From 0407269e79dd99dc74812d44c6d2a2f1e06ee376 Mon Sep 17 00:00:00 2001
From: Matt Batchelder <matt@buzzbee.dev>
Date: Sat, 21 Feb 2026 12:45:48 -0500
Subject: [PATCH] Adjust TV and player dimensions for improved layout and
 responsiveness

---
 theme/assets/css/main.css | 57 ++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 7ff9d26..e9909a5 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -4562,8 +4562,8 @@ p:last-child { margin-bottom: 0; }
 .ngd-stage {
   position: relative;
   width: 100%;
-  max-width: 400px;
-  aspect-ratio: 4/3;
+  max-width: 380px;
+  aspect-ratio: 1/1;
   margin: 0 auto;
 }
 
@@ -4593,7 +4593,7 @@ p:last-child { margin-bottom: 0; }
 .ngd-tv__port {
   position: absolute;
   right: -5px;
-  top: 50px;
+  top: 70px;
   width: 8px;
   height: 14px;
   background: #1a1a1a;
@@ -4626,11 +4626,11 @@ p:last-child { margin-bottom: 0; }
 /* TV feet */
 .ngd-tv__feet {
   display: flex;
-  gap: 50px;
+  gap: 72px;
   margin-top: 3px;
 }
 .ngd-tv__foot {
-  width: 22px;
+  width: 28px;
   height: 6px;
   background: #181818;
   border-radius: 0 0 3px 3px;
@@ -4732,12 +4732,12 @@ p:last-child { margin-bottom: 0; }
 /* ── Player device (stick plugged into TV right-side HDMI port) ── */
 .ngd-player {
   position: absolute;
-  /* TV body: left(8) + border(4) + width(160) + border(4) = 176px
-     TV port protrudes 5px right → connector starts at 181px */
-  left: 181px;
-  /* TV body top(18) + border(4) + port.top(50) + port half-h(7) = 79px
-     stick h=26px → top = 79 − 13 = 66px */
-  top: 66px;
+  /* TV: left(20) + border(4) + width(220) + border(4) = 248px
+     TV port protrudes 5px right → connector starts at 248px */
+  left: 248px;
+  /* TV body top(90) + border(4) + port.top(70) + port half-h(7) = 171px
+     stick h=28px → top = 171 − 14 = 157px */
+  top: 157px;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -4813,10 +4813,10 @@ p:last-child { margin-bottom: 0; }
 /* ── Signal wrap (cloud + vertical line to player) ─────────── */
 .ngd-signal-wrap {
   position: absolute;
-  /* centred on stick body: player left(181) + connector(14) + body_centre(34) = 229px
-     cloud width 74px → half = 37px → left = 229 − 37 = 192px */
-  left: 192px;
-  top: 0;
+  /* centred on stick body: player left(248) + connector(14) + body_centre(40) = 302px
+     cloud width 74px → half = 37px → left = 302 − 37 = 265px */
+  left: 265px;
+  top: 24px;
   width: 74px;
   display: flex;
   flex-direction: column;
@@ -4839,7 +4839,7 @@ p:last-child { margin-bottom: 0; }
 /* Vertical signal line */
 .ngd-signal-line {
   width: 3px;
-  height: 18px;   /* gap from cloud bottom (~48px) to stick top (~66px) */
+  height: 80px;   /* gap: signal-wrap top(24) + cloud h(~46) + line(80) ≈ player top(157) */
   background: rgba(76,175,80,.35);
   border-radius: 2px;
   position: relative;
@@ -4949,18 +4949,21 @@ p:last-child { margin-bottom: 0; }
 /* ── Responsive ─────────────────────────────────────────────── */
 @media (max-width: 640px) {
   .ngd-stage { max-width: 320px; }
-  /* Scale fixed-px elements 80% (320/400) */
-  .ngd-tv__body             { width: 128px; height: 96px; }
-  .ngd-tv__port             { top: 40px; }
-  .ngd-tv__foot             { width: 18px; }
-  /* player: left(145) + connector(11) + body_centre(27) = 183px; cloud half(30) → wrap left 153 */
-  .ngd-player               { left: 145px; top: 53px; }
-  .ngd-player__connector    { width: 11px; height: 8px; }
-  .ngd-player__body         { width: 54px; height: 21px; }
-  .ngd-player__body::before { top: 5px; left: 6px; width: 22px; height: 9px; }
+  /* Scale fixed-px elements 84% (320/380) */
+  .ngd-tv                   { left: 17px; top: 76px; }
+  .ngd-tv__body             { width: 185px; height: 136px; }
+  .ngd-tv__port             { top: 59px; }
+  .ngd-tv__feet             { gap: 60px; }
+  .ngd-tv__foot             { width: 24px; }
+  /* player left: 17+4+185+4=210; center-y: 76+4+59+7=146; top=146-14=132 */
+  .ngd-player               { left: 210px; top: 132px; }
+  .ngd-player__connector    { width: 12px; height: 9px; }
+  .ngd-player__body         { width: 68px; height: 24px; }
+  .ngd-player__body::before { top: 5px; left: 6px; width: 24px; height: 10px; }
   .ngd-player__led          { width: 3px; height: 3px; right: 6px; }
-  .ngd-signal-wrap          { left: 153px; width: 60px; }
-  .ngd-signal-line          { height: 14px; }
+  /* body-centre-x: 210+12+34=256; cloud half-width(31)→56; wrap left=256-28=228 */
+  .ngd-signal-wrap          { left: 228px; top: 20px; width: 62px; }
+  .ngd-signal-line          { height: 68px; }
 }
 
 /* ── Reduced-motion overrides ───────────────────────────────── */