From 8c3c7a1d8a7dcf84a91d9a5c85ffb751bec479e2 Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Sat, 21 Feb 2026 17:26:19 -0500
Subject: [PATCH] Sync: update ngd-tv component styles for improved layout and
 dimensions

---
 theme/assets/css/main.css | 83 ++++++++++++++++++++++++---------------
 1 file changed, 51 insertions(+), 32 deletions(-)

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 45977e1..61f9e29 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -4633,7 +4633,7 @@ p:last-child { margin-bottom: 0; }
 .ngd-stage {
   position: relative;
   width: 100%;
-  max-width: 380px;
+  max-width: 560px;
   aspect-ratio: 1/1;
   margin: 0 auto;
 }
@@ -4642,14 +4642,14 @@ p:last-child { margin-bottom: 0; }
 .ngd-tv {
   position: absolute;
   left: 20px;
-  top: 90px;
+  top: 72px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .ngd-tv__body {
-  width: 220px;
-  height: 162px;
+  width: 400px;
+  height: 235px;
   background: #111;
   border: 4px solid #111;
   border-radius: 6px 6px 4px 4px;
@@ -4658,20 +4658,33 @@ p:last-child { margin-bottom: 0; }
   display: flex;
   align-items: stretch;
   position: relative;
-  box-shadow: 0 10px 36px rgba(0,0,0,.55);
+  box-shadow: 0 14px 48px rgba(0,0,0,.55);
 }
 /* HDMI port stub on right side */
 .ngd-tv__port {
   position: absolute;
-  right: -5px;
-  top: 74px;
-  width: 8px;
+  right: -6px;
+  top: 110px;
+  width: 6px;
   height: 14px;
   background: #1a1a1a;
   border: 1px solid #000;
-  border-radius: 2px;
+  border-left: none;
+  border-radius: 0 2px 2px 0;
+}
+.ngd-tv__port::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 2px;
+  width: 3px;
+  height: 8px;
+  background: #333;
+  border-radius: 0 1px 1px 0;
 }
 .ngd-tv__screen {
+  --ngd-menu-scale-x: 1.8182;
+  --ngd-menu-scale-y: 1.4506;
   width: 100%;
   height: 100%;
   border-radius: 2px;
@@ -4697,20 +4710,26 @@ p:last-child { margin-bottom: 0; }
 /* TV feet */
 .ngd-tv__feet {
   display: flex;
-  gap: 72px;
-  margin-top: 3px;
+  justify-content: space-between;
+  width: 224px;
 }
 .ngd-tv__foot {
-  width: 28px;
-  height: 6px;
-  background: #181818;
-  border-radius: 0 0 3px 3px;
+  width: 12px;
+  height: 8px;
+  background: #111;
+  border: 1px solid #000;
+  border-radius: 0 0 4px 4px;
 }
 
 /* ── Menu board content (always playing) ───────────────────── */
 .ngd-menu {
   position: absolute;
-  inset: 0;
+  left: 0;
+  top: 0;
+  width: 220px;
+  height: 162px;
+  transform: scale(var(--ngd-menu-scale-x), var(--ngd-menu-scale-y));
+  transform-origin: top left;
   display: flex;
   flex-direction: column;
   padding: 7px 6px 4px;
@@ -4803,20 +4822,19 @@ p:last-child { margin-bottom: 0; }
 /* ── Player device (stick plugged into TV right-side HDMI port) ── */
 .ngd-player {
   position: absolute;
-  /* TV: left(20) + border(4) + width(220) + border(4) = 248px
-     port right:-5 → connector aligns to TV right edge at 248px */
-  left: 248px;
-  /* TV top(90) + border(4) + port.top(74) + port half-h(7) = 175px
-     stick h=26px → top = 175 − 13 = 162px */
-  top: 162px;
+  /* TV: left(20) + border(4) + width(400) + border(4) = 428px */
+  left: 428px;
+  /* TV top(72) + border(4) + port.top(110) + port half-h(7) = 193px
+    stick h=32px → top = 193 − 16 = 177px */
+  top: 177px;
   display: flex;
   flex-direction: row;
   align-items: center;
 }
 /* HDMI connector plug — left side, inserts into TV port */
 .ngd-player__connector {
-  width: 14px;
-  height: 10px;
+  width: 18px;
+  height: 14px;
   background: linear-gradient(180deg, #888, #666);
   border-radius: 2px 0 0 2px;
   position: relative;
@@ -4829,15 +4847,15 @@ p:last-child { margin-bottom: 0; }
   position: absolute;
   right: 2px;
   top: 2px;
-  width: 6px;
-  height: 6px;
+  width: 8px;
+  height: 8px;
   background: #555;
   border-radius: 1px;
 }
 /* Main stick body — white gradient capsule */
 .ngd-player__body {
-  width: 68px;
-  height: 26px;
+  width: 84px;
+  height: 32px;
   background: linear-gradient(180deg, #f5f5f5, #e0e0e0);
   border: 1px solid #ccc;
   border-radius: 0 5px 5px 0;
@@ -4884,9 +4902,9 @@ p:last-child { margin-bottom: 0; }
 /* ── Signal wrap (cloud + vertical line to player) ─────────── */
 .ngd-signal-wrap {
   position: absolute;
-  /* body centre X: player left(248) + connector(14) + body half(34) = 296
-     cloud width 74px → half = 37 → left = 296 − 37 = 259px */
-  left: 259px;
+  /* body centre X: player left(428) + connector(18) + body half(42) = 488
+    cloud width 74px → half = 37 → left = 488 − 37 = 451px */
+  left: 451px;
   top: 22px;
   width: 74px;
   display: flex;
@@ -4910,7 +4928,7 @@ p:last-child { margin-bottom: 0; }
 /* Vertical signal line */
 .ngd-signal-line {
   width: 3px;
-  height: 92px;  /* wrap top(22) + cloud h(46) + line(92) = 160 ≈ player top(162) */
+  height: 109px;
   background: rgba(76,175,80,.35);
   border-radius: 2px;
   position: relative;
@@ -5023,6 +5041,7 @@ p:last-child { margin-bottom: 0; }
   /* Scale at 84% (320/380) */
   .ngd-tv                   { left: 17px; top: 76px; }
   .ngd-tv__body             { width: 185px; height: 136px; }
+  .ngd-tv__screen           { --ngd-menu-scale-x: 0.8409; --ngd-menu-scale-y: 0.8395; }
   /* port at body midpoint: 136/2 − 7 = 61 */
   .ngd-tv__port             { top: 61px; }
   .ngd-tv__feet             { gap: 60px; }