/* Wordle Quest — TV / car remote layer styles (tv-core.js, tv-help.js, tv-focus.js). Everything is scoped to .tv-mode,
   so the web and mobile game are untouched. */
.tv-mode :focus { outline: 5px solid #ffd21f !important; outline-offset: 3px; filter: drop-shadow(0 0 12px #ffd21f); }
.tv-mode.tv-pointer :focus { outline: none !important; filter: none; }
.tv-mode .rotate-notice { display: none !important; }

/* key-hint panel (tv-help.js): the 9:16 column leaves the sides empty, so it lives on the right edge;
   only the group for the screen showing now (html[data-tv-ctx], set by tv-focus.js) is visible */
#tvHints { position: fixed; right: 3vh; top: 50%; transform: translateY(-50%); z-index: 2147483000; pointer-events: none;
  width: 26vh; padding: 1.2vh 1.6vh; border-radius: 2vh; background: rgba(8, 12, 30, .86); border: 2px solid rgba(255, 255, 255, .35);
  color: #fff; font: 700 2.1vh/1.3 system-ui, sans-serif; }
html:not(.tv-mode) #tvHints, .tv-mode.tv-pointer #tvHints { display: none !important; }
#tvHints .tvn-group { display: none; }
[data-tv-ctx="menu"] #tvHints .tvn-group[data-ctx="menu"],
[data-tv-ctx="levels"] #tvHints .tvn-group[data-ctx="levels"],
[data-tv-ctx="game"] #tvHints .tvn-group[data-ctx="game"],
[data-tv-ctx="dialog"] #tvHints .tvn-group[data-ctx="dialog"] { display: block; }
[data-tv-ctx="none"] #tvHints { display: none; }
#tvHints .tvn-item { display: flex; align-items: center; gap: .8vh; margin: .5vh 0; }
#tvHints .tvn-keys { display: inline-flex; align-items: center; gap: .4vh; flex: 0 0 auto; }
/* key glyphs drawn with CSS (old TV fonts show emoji / arrow characters as empty boxes) */
#tvHints .tvk { display: inline-block; padding: 0 .7vh; border-radius: .6vh; background: #ffd21f; color: #111; font-size: 1.7vh; line-height: 2.6vh; }
#tvHints .tvk-arrow { padding: 0; width: 0; height: 0; border-radius: 0; background: none; border: .7vh solid transparent; }
#tvHints .tvk-left { border-right: 1vh solid #ffd21f; border-left: 0; }
#tvHints .tvk-right { border-left: 1vh solid #ffd21f; border-right: 0; }
#tvHints .tvk-up { border-bottom: 1vh solid #ffd21f; border-top: 0; }
#tvHints .tvk-down { border-top: 1vh solid #ffd21f; border-bottom: 0; }
#tvHints .tvk-dot { padding: 0; width: 2.2vh; height: 2.2vh; border-radius: 50%; background: var(--dot); border: .3vh solid #fff; }

/* TV: bigger on-screen keyboard keys (user spec): fixed 50px tall, up to 51px wide */
.device-tv .key { max-width: 51px; height: 50px; }

/* old TV engines (webOS 22 / Tizen <= 6.5 ~ Chromium 87, webOS 23 ~ 94) */
@supports not (height: 1dvh) {
  html.tv-mode, .tv-mode body { height: 100%; }   /* var(--app-height,100dvh) is invalid here: page would collapse to 0 height */
  .tv-mode dialog { max-height: 90vh; }
  .tv-mode .confetti { animation-name: tvfall; }
}
@keyframes tvfall { to { transform: translateY(105vh) rotate(720deg); } }
@supports not (inset: 0) {   /* Chromium < 87: screens would not fill the app */
  .screen { top: 0; right: 0; bottom: 0; left: 0; }
}
@supports not (aspect-ratio: 1 / 1) {
  .tv-mode .lv { height: 68px; }   /* level tiles: 5 per row in the 400px column */
}