diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css
index 645ff52..7ff9d26 100644
--- a/theme/assets/css/main.css
+++ b/theme/assets/css/main.css
@@ -4729,58 +4729,74 @@ p:last-child { margin-bottom: 0; }
animation: ngd-ticker 2s linear infinite;
}
-/* ── HDMI bridge ────────────────────────────────────────────── */
-.ngd-hdmi {
- position: absolute;
- left: 168px;
- top: 112px;
- width: 14px;
- height: 3px;
- background: #252525;
- border-radius: 1px;
-}
-
-/* ── Player device ──────────────────────────────────────────── */
+/* ── Player device (stick plugged into TV right-side HDMI port) ── */
.ngd-player {
position: absolute;
- left: 182px;
- top: 102px;
-}
-.ngd-player__body {
+ /* 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;
display: flex;
+ flex-direction: row;
align-items: center;
- gap: 5px;
- width: 96px;
- height: 28px;
- background: #1a1a1a;
- border: 1.5px solid #2d2d2d;
- border-radius: 4px;
- padding: 4px 6px;
- box-shadow: 0 4px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
- position: relative;
}
-.ngd-player__led {
+/* HDMI connector plug — left side, inserts into TV port */
+.ngd-player__connector {
+ width: 14px;
+ height: 10px;
+ background: linear-gradient(180deg, #888, #666);
+ border-radius: 2px 0 0 2px;
+ position: relative;
+ box-shadow: 0 1px 3px rgba(0,0,0,.3);
+ flex-shrink: 0;
+ z-index: 1;
+}
+.ngd-player__connector::before {
+ content: '';
+ position: absolute;
+ right: 2px;
+ top: 2px;
width: 6px;
height: 6px;
+ background: #555;
+ border-radius: 1px;
+}
+/* Main stick body — white gradient capsule */
+.ngd-player__body {
+ width: 68px;
+ height: 26px;
+ background: linear-gradient(180deg, #f5f5f5, #e0e0e0);
+ border: 1px solid #ccc;
+ border-radius: 0 5px 5px 0;
+ position: relative;
+ box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
+}
+/* Brand logo area subtle inset */
+.ngd-player__body::before {
+ content: '';
+ position: absolute;
+ top: 6px;
+ left: 8px;
+ width: 28px;
+ height: 12px;
+ background: rgba(0,0,0,.04);
+ border-radius: 2px;
+}
+/* LED indicator — right side of body */
+.ngd-player__led {
+ position: absolute;
+ right: 8px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 4px;
border-radius: 50%;
- flex-shrink: 0;
background: #4CAF50;
box-shadow: 0 0 6px rgba(76,175,80,.8);
animation: ngd-led 5s ease-in-out infinite;
}
-.ngd-player__brand {
- flex: 1;
- height: 5px;
- background: rgba(255,255,255,.07);
- border-radius: 2px;
-}
-.ngd-player__port {
- width: 8px; height: 11px;
- background: #0d0d0d;
- border: 1px solid #222;
- border-radius: 1px;
- flex-shrink: 0;
-}
/* Checkmark badge — visible only during offline phase */
.ngd-player__check {
position: absolute;
@@ -4797,9 +4813,10 @@ p:last-child { margin-bottom: 0; }
/* ── Signal wrap (cloud + vertical line to player) ─────────── */
.ngd-signal-wrap {
position: absolute;
- /* horizontally centred on player: player left=182px, width=96px → centre=230px */
- left: 193px; /* 230 – cloud_half(37px) = 193 */
- top: 8px;
+ /* 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;
width: 74px;
display: flex;
flex-direction: column;
@@ -4822,7 +4839,7 @@ p:last-child { margin-bottom: 0; }
/* Vertical signal line */
.ngd-signal-line {
width: 3px;
- height: 44px; /* gap from cloud bottom to player top */
+ height: 18px; /* gap from cloud bottom (~48px) to stick top (~66px) */
background: rgba(76,175,80,.35);
border-radius: 2px;
position: relative;
@@ -4932,15 +4949,18 @@ p:last-child { margin-bottom: 0; }
/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
.ngd-stage { max-width: 320px; }
- /* Scale the fixed-px elements down proportionally */
- .ngd-tv__body { width: 128px; height: 96px; }
- .ngd-tv__port { top: 40px; }
- .ngd-tv__foot { width: 18px; }
- .ngd-hdmi { left: 134px; top: 90px; }
- .ngd-player { left: 146px; top: 82px; }
- .ngd-player__body { width: 76px; height: 24px; }
- .ngd-signal-wrap { left: 154px; width: 60px; }
- .ngd-signal-line { height: 36px; }
+ /* 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; }
+ .ngd-player__led { width: 3px; height: 3px; right: 6px; }
+ .ngd-signal-wrap { left: 153px; width: 60px; }
+ .ngd-signal-line { height: 14px; }
}
/* ── Reduced-motion overrides ───────────────────────────────── */
diff --git a/theme/blocks/index.php b/theme/blocks/index.php
index 34dfc25..2f96721 100644
--- a/theme/blocks/index.php
+++ b/theme/blocks/index.php
@@ -1606,15 +1606,11 @@ function oribi_render_platform_row( $a ) {
$ngd .= '
';
$ngd .= ''; /* ngd-tv */
- /* HDMI bridge from TV port to player */
- $ngd .= '
';
-
- /* Player device */
+ /* Player device (stick style, plugged into TV right-side HDMI port) */
$ngd .= '';
+ $ngd .= '
';
$ngd .= '
';
$ngd .= '
';
- $ngd .= '
';
- $ngd .= '
';
$ngd .= '
';
$ngd .= '
';
$ngd .= '';