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

/* landscape is the norm on TV / car: the phone "rotate to portrait" notice must not cover the game */
.tv-mode .rotate-notice{ display:none !important; }

/* ---------- fill the TV screen: the game is a fixed 360×620 stage (599 tall under 1440 px wide) ---------- */
/* zoom scales the whole stage — fixed-pixel buttons, text, gaps and the game's own cursor maths together */
.tv-mode.device-tv{ --tvz:1; }
@media (min-height:700px){ .tv-mode.device-tv{ --tvz:1.18; } }  /* 720p TVs: 599 → 707 px */
@media (min-height:900px){ .tv-mode.device-tv{ --tvz:1.7; } }   /* 1080p / 4K TVs: 620 → 1054 px */
.tv-mode.device-tv .stageWrap{ zoom:var(--tvz); }
/* short car screens (800×480 …): shrink the stage so it fits instead of overflowing */
@media (max-height:598px){ .tv-mode.device-car .stageWrap{ zoom:.9; } }
@media (max-height:539px){ .tv-mode.device-car .stageWrap{ zoom:.8; } }

/* ---------- sizes the TV engines lose: container units (cqw/cqh) need Chrome 105, webOS 23 / Tizen 7 are ~94 ---------- */
/* fixed values = what the web build computes at this stage size, digits a little larger for reading from a sofa */
.tv-mode .num-btn{ height:48px; }
.tv-mode .tool-btn{ min-height:54px; }
.tv-mode .cell{ font-size:20px; }
.tv-mode #board.wide .cell{ font-size:20px; }
.tv-mode #board.size-4 .cell{ font-size:34px; }
.tv-mode .num-btn .num-val{ font-size:26px; }
@supports not (width:1cqw){
  /* the game's own fallback (width:100%) makes the square board taller than the space left for it */
  .tv-mode .board-outer{ min-height:0; }
  .tv-mode #board{ width:auto; height:100%; max-width:100%; aspect-ratio:1/1; }
  .tv-mode #board.size-4{ height:86%; }
  .tv-mode #board.wide{ width:100%; height:auto; aspect-ratio:3/2; }
}
/* no :has() before Chrome 105: tv-board.js marks the 3×3 box holding the selected cell instead */
.tv-mode .box.tv-sel-box:after{ opacity:1; }

/* ---------- focus ---------- */
/* glow via filter only — a transform would fight the keys' own :active press effect */
.tv-mode .stageWrap button, .tv-mode .tv-card button, .tv-mode .cell{ outline:none; }
.tv-mode:not(.tv-pointer) .stageWrap button:focus,
.tv-mode:not(.tv-pointer) .tv-card button:focus{
  /* two tight white passes make a ring that also shows on the gold PLAY button, then the warm glow */
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px #ffd27a) drop-shadow(0 0 18px #ff9a1f);
}
/* a focused cell is the game's own selected cell (dark tile + gold cursor) — nothing to add there */

/* ---------- remote key glyphs (drawn in CSS — no emoji, old TV fonts box them) ---------- */
.tvk{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; flex:0 0 auto;
  min-width:1.9em; height:1.9em; padding:0 .45em; margin-right:.3em;
  border-radius:.45em; border:2px solid #f0a030; background:#2a1708;
  box-shadow:0 2px 0 rgba(0,0,0,.6);
  color:#ffe6b0; font-weight:800; font-size:.78em; line-height:1; letter-spacing:.03em; font-family:Arial,sans-serif;
}
.tvk-arrow{ padding:0; }
.tvk-arrow::before{ content:""; width:0; height:0; border-style:solid; }
.tvk-left::before { border-width:.38em .55em .38em 0;  border-color:transparent currentColor transparent transparent; }
.tvk-right::before{ border-width:.38em 0 .38em .55em;  border-color:transparent transparent transparent currentColor; }
.tvk-up::before   { border-width:0 .38em .55em .38em;  border-color:transparent transparent currentColor transparent; }
.tvk-down::before { border-width:.55em .38em 0 .38em;  border-color:currentColor transparent transparent transparent; }
.tvk-ok{ border-radius:50%; padding:0; min-width:2.1em; height:2.1em; font-size:.7em; }
.tvk-dot{ padding:0; min-width:1.5em; width:1.5em; height:1.5em; border-radius:50%; border-color:rgba(255,255,255,.7); }
.tvk-red,.tvb-red{ background:#e0323f; }
.tvk-green,.tvb-green{ background:#2fa84f; }
.tvk-yellow,.tvb-yellow{ background:#f2c230; }
.tvk-blue,.tvb-blue{ background:#2f7de0; }

/* red cross replacing the ❌ old TV fonts draw as a box (tv-help.js) */
.tv-x{ display:inline-block; position:relative; width:.8em; height:.8em; margin-right:.3em; vertical-align:-.05em; }
.tv-x::before,.tv-x::after{ content:""; position:absolute; left:50%; top:0; width:.18em; height:100%; margin-left:-.09em;
  border-radius:.09em; background:#e0323f; transform:rotate(45deg); }
.tv-x::after{ transform:rotate(-45deg); }

/* ---------- colour-key badges on Undo / Hint / Erase (top-left: Hint's count sits top-right) ---------- */
.tvb{ display:none; }
.tv-mode.device-tv:not(.tv-pointer) .tvb{
  display:block; position:absolute; top:4px; left:4px; width:10px; height:10px; border-radius:50%;
  border:1px solid rgba(255,255,255,.85); box-shadow:0 1px 2px rgba(0,0,0,.5); pointer-events:none;
}
.tv-mode #undoBtn{ position:relative; }

/* ---------- key panel in the empty space right of the game ---------- */
#tvPanel{ display:none; }
.tv-mode.device-tv:not(.tv-pointer) #tvPanel{
  display:block; position:fixed; z-index:50; top:50%; transform:translateY(-50%);
  left:calc(50% + 180px * var(--tvz) + 3vw); width:calc(50% - 180px * var(--tvz) - 6vw); max-width:440px;
  padding:1em 1.2em; border-radius:18px;
  background:rgba(20,10,3,.72); border:2px solid rgba(240,160,48,.7); box-shadow:0 10px 30px rgba(0,0,0,.5);
  font:600 clamp(13px,2.2vh,26px)/1.25 "Poppins",Arial,sans-serif; color:#ffe6b0; pointer-events:none;
}
.tv-mode[data-tv-ctx="loading"] #tvPanel,
.tv-mode[data-tv-ctx="none"] #tvPanel{ display:none !important; }
.tvp-title{ margin-bottom:.5em; font-weight:800; font-size:1.1em; letter-spacing:.06em; text-transform:uppercase; color:#ffc46b; }
.tvp-group{ display:none; }
html[data-tv-ctx="start"] .tvp-group[data-ctx="start"],
html[data-tv-ctx="guide"] .tvp-group[data-ctx="guide"],
html[data-tv-ctx="board"] .tvp-group[data-ctx="board"],
html[data-tv-ctx="pad"] .tvp-group[data-ctx="pad"],
html[data-tv-ctx="buttons"] .tvp-group[data-ctx="buttons"],
html[data-tv-ctx="popup"] .tvp-group[data-ctx="popup"]{ display:block; }
.tvc-row{ display:flex; align-items:center; gap:.5em; margin:.45em 0; }
.tvc-keys{ display:inline-flex; align-items:center; flex-shrink:0; min-width:7.6em; } /* fits the 4-arrow row */
.tvc-label{ color:#fff5e6; }

/* ---------- TV cards: one-time help, leave-puzzle confirmation ---------- */
.tv-card-wrap{
  position:fixed; top:0; right:0; bottom:0; left:0; z-index:10001;
  display:flex; align-items:center; justify-content:center; background:rgba(10,5,0,.78);
  font:600 clamp(13px,2.4vh,28px)/1.25 "Poppins",Arial,sans-serif; color:#ffe6b0;
}
.tv-card-wrap.hidden{ display:none; }
.tv-card{
  max-width:min(92vw,40em); max-height:94vh; overflow:auto; padding:1.1em 1.5em 1.2em; text-align:center;
  background:linear-gradient(180deg,#5a3214,#2a1708); border:3px solid #f0a030; border-radius:22px;
  box-shadow:0 14px 40px rgba(0,0,0,.6);
}
.tv-card-small{ max-width:min(92vw,24em); }
.tv-card-title{ margin:0 0 .6em; font-size:1.4em; font-weight:800; color:#ffc46b; }
.tv-card-body{ text-align:left; display:inline-block; }
.tv-card-text{ margin:0 0 1em; color:#fff5e6; }
.tv-card-actions{ display:flex; gap:.8em; justify-content:center; }
.tv-card-btn{
  margin-top:.8em; padding:.5em 1.5em; border-radius:14px; cursor:pointer;
  font:800 1em "Poppins",Arial,sans-serif; color:#fff5e6;
  background:#4a2a10; border:1px solid rgba(255,235,205,.5); box-shadow:0 4px 0 #1e0f04;
}
.tv-card-primary{ color:#3a1d05; background:linear-gradient(180deg,#ffd98a 0%,#f7a64b 48%,#d27a26 100%); border-color:#ffe2a8; box-shadow:0 4px 0 #8a4a12; }