/* ================= TV / CAR HEADREST MODE (Iron Jungle) ================= */
/* Every rule is scoped to html.tv-mode (set by tv/tv-core.js) — web & mobile are untouched. */

/* ---------- performance: no frosted glass over the moving 3D scene ---------- */
/* backdrop-filter re-blurs everything behind each panel every frame, and the ::before layer adds a blend pass —
   the most expensive CSS there is on a TV GPU. Solid dark panels instead (the game's own no-blur fallback colour). */
.tv-mode .glass{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--glass-strong); }
.tv-mode .glass::before{ display:none; }

/* ---------- 10-foot sizing: the HUD and menus are fixed-pixel, sized for a desk; zoom them on 1080p TVs ---------- */
@media (min-height:900px){
  .tv-mode.device-tv #hud .hud-panel,
  .tv-mode.device-tv #boss-bar{ zoom:1.45; }
  .tv-mode.device-tv .dialog{ zoom:1.4; }
  .tv-mode.device-tv .title-wrap{ zoom:1.25; }
  .tv-mode.device-tv #toasts,
  .tv-mode.device-tv #banner{ zoom:1.35; }
}
@media (min-height:650px) and (max-height:899px){
  .tv-mode.device-tv #hud .hud-panel,
  .tv-mode.device-tv #boss-bar{ zoom:1.1; }
}
/* many TVs crop the picture edges: keep the HUD inside a safe margin (values are divided by the zoom above) */
.tv-mode.device-tv #hud-vitals{ top:2.2vh; left:2.2vw; }
.tv-mode.device-tv #hud #hud-mission{ top:2.2vh; }
.tv-mode.device-tv #hud-combat{ top:2.2vh; right:2.2vw; }
.tv-mode.device-tv #boss-bar{ bottom:6vh; }
.tv-mode.device-tv #fps{ left:3vw; bottom:3vh; font-size:16px; }
/* the remote hint bar replaces the keyboard one: bigger, and kept clear of the bottom edge */
.tv-mode #hint{ font-size:clamp(13px,1.8vh,20px); bottom:3vh; display:block; }
.tv-mode #hint .tvk{ font-size:.85em; }
.tv-mode:not([data-tv-ctx="play"]) #hint{ display:none; }   /* only during a mission, not under menus */

/* ---------- focus ring (hidden while the user touches / points) ---------- */
.tv-mode button:focus, .tv-mode input:focus{ outline:none; }
.tv-mode:not(.tv-pointer) .btn:focus,
.tv-mode:not(.tv-pointer) .seg button:focus,
.tv-mode:not(.tv-pointer) .toggle:focus,
.tv-mode:not(.tv-pointer) input[type=range]:focus{
  outline:3px solid var(--amber); outline-offset:3px;
  box-shadow:0 0 0 6px rgba(242,178,76,.25), 0 0 22px rgba(242,178,76,.55);
}

/* ---------- Controls screen: remote list instead of the keyboard list ---------- */
.tv-controls{ display:none; }
.tv-mode .tv-controls{ display:block; text-align:left; }
.tv-mode #screen-help .controls{ display:none; }
.tv-controls h3{ margin:0 0 8px; font-family:var(--font-display); letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); font-size:15px; }
.tvc-row{ display:flex; align-items:center; gap:12px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.05); font-size:14px; }
.tvc-keys{ display:inline-flex; align-items:center; gap:4px; min-width:7.5em; color:var(--text-2); }
.tvc-auto{ font:700 11px var(--font-display); letter-spacing:.2em; color:var(--amber); border:1px solid var(--amber-dim); border-radius:6px; padding:3px 7px; }
.tvc-note{ color:var(--text-2); font-size:13px; margin:10px 0 0; }
.tv-only{ display:none !important; }
.tv-mode .tv-only{ display:revert !important; }

/* ---------- remote key glyphs (CSS-drawn — no emoji or arrow characters) ---------- */
.tvk{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; flex:0 0 auto;
  min-width:1.8em; height:1.8em; padding:0 .4em; margin:0 .1em; border-radius:.4em;
  border:2px solid var(--amber); background:rgba(0,0,0,.45); color:var(--text);
  font:700 .75em/1 var(--font-display); letter-spacing:.06em;
}
.tvk-arrow{ padding:0; }
.tvk-arrow::before{ content:""; width:0; height:0; border-style:solid; }
.tvk-left::before { border-width:.36em .52em .36em 0;  border-color:transparent currentColor transparent transparent; }
.tvk-right::before{ border-width:.36em 0 .36em .52em;  border-color:transparent transparent transparent currentColor; }
.tvk-up::before   { border-width:0 .36em .52em .36em;  border-color:transparent transparent currentColor transparent; }
.tvk-down::before { border-width:.52em .36em 0 .36em;  border-color:currentColor transparent transparent transparent; }
.tvk-ok{ border-radius:50%; padding:0; min-width:2em; height:2em; font-size:.68em; }
.tvk-dot{ padding:0; border-radius:50%; min-width:1.5em; height:1.5em; background:var(--dot); border-color:rgba(255,255,255,.6); }

/* ---------- one-time "Play with your remote" card ---------- */
#tvHelpCard{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:40; display:flex; align-items:center; justify-content:center; background:rgba(4,8,12,.82); }
#tvHelpCard.hidden{ display:none; }
.tvh-card{ max-width:min(92vw,560px); max-height:94vh; overflow:auto; padding:24px 28px; text-align:center;
  background:var(--glass-strong); border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:var(--shadow); }
.tvh-card h2{ font-family:var(--font-display); letter-spacing:.12em; text-transform:uppercase; margin:0 0 14px; font-size:30px; }
.tvh-body{ text-align:left; margin-bottom:18px; }
@media (min-height:900px){ .tv-mode.device-tv .tvh-card{ zoom:1.4; } }

/* ---------- ?audiodebug=1 ---------- */
#tvAudioDebug{ position:fixed; left:8px; top:8px; z-index:99999; padding:4px 8px; background:rgba(0,0,0,.75);
  color:#7f7; font:14px/1.3 monospace; pointer-events:none; white-space:pre; }