/* Designed for the TV browser's 1280x720 CSS viewport, watched from bed in the dark:
   deep blacks, no pure white, one warm accent, motion limited to opacity/transform. */

/* Bundled font: the TV's own fallback fonts render as a pixel monospace. */
@font-face { font-family: "InterApp"; font-style: normal; font-weight: 400 800; font-display: block;
  src: url(fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "InterApp"; font-style: normal; font-weight: 400 800; font-display: block;
  src: url(fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #050608;
  --surface: #11141b;
  --surface-2: #181c25;
  --line: rgba(255,255,255,.08);
  --text: #ece8df;
  --soft: #c3c6cd;
  --muted: #8e939e;
  --faint: #5b606b;
  --accent: #f4b942;
  --accent-ink: #1a1305;
  --eng: #7aa2f7;
  --safe-x: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
/* Overlays below set display:flex, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: "InterApp", sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
button:focus { outline: none; }

/* remote.js keeps the document scrolled to a centre point so cursor pushes against a screen
   edge (which scroll the page) still register. Everything visible is position: fixed. */
html.remote-scroll, html.remote-scroll body { overflow: scroll; scrollbar-width: none; }
html.remote-scroll::-webkit-scrollbar, html.remote-scroll body::-webkit-scrollbar { display: none; }
html.remote-scroll body { width: 300vw; height: 300vh; }
html.remote-scroll, html.remote-scroll * { cursor: none !important; }

/* ---------- background ---------- */
#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.bg-img { position: absolute; inset: -2%; background-size: cover; background-position: center top;
  opacity: 0; transition: opacity .7s var(--ease); animation: drift 26s ease-in-out infinite alternate; }
.bg-img.on { opacity: .5; }
@keyframes drift { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.06) translate3d(-1.2%, -.8%, 0); } }
.bg-shade { position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, #050608 0%, rgba(5,6,8,.9) 35%, rgba(5,6,8,0) 75%),
    linear-gradient(0deg, #050608 0%, rgba(5,6,8,.85) 40%, rgba(5,6,8,0) 72%); }

/* ---------- top bar & tabs ---------- */
#topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between;
  align-items: center; height: 76px; padding: 0 var(--safe-x); pointer-events: none; }
.brand { font-weight: 800; letter-spacing: -.5px; font-size: 24px; color: var(--text); }
.brand i { color: var(--accent); font-style: normal; }
.status { display: flex; gap: 14px; align-items: center; font-size: 18px; color: var(--muted); }
#st-night { color: var(--accent); opacity: .8; }
#st-sleep { color: var(--accent); font-weight: 600; font-size: 16px; }
.clock { font-size: 20px; font-weight: 600; color: var(--soft); font-variant-numeric: tabular-nums; }

.tabs { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 4px;
  padding: 4px; border-radius: 24px; background: rgba(17,20,27,.7); box-shadow: inset 0 0 0 1px var(--line); }
.tab { height: 36px; padding: 0 18px; border-radius: 18px; font-size: 16px; font-weight: 600; color: var(--muted);
  transition: background .2s, color .2s; }
.tab.on { color: var(--text); background: rgba(255,255,255,.08); }
.tab:focus { background: var(--text); color: var(--bg); }

#view { position: fixed; inset: 0; z-index: 1; }
#view.enter > * { animation: fadein .35s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- shared bits ---------- */
.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.meta { display: flex; gap: 14px; align-items: center; font-size: 17px; color: var(--muted); }
.meta b { color: var(--text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.meta > * { white-space: nowrap; }
.desc { font-size: 17px; line-height: 1.5; color: #b9bcc4; margin-top: 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.badge { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1px; padding: 3px 7px;
  border-radius: 5px; background: rgba(244,185,66,.16); color: var(--accent); }
.badge.en { background: rgba(122,162,247,.16); color: var(--eng); }

.btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 26px;
  font-size: 19px; font-weight: 700; background: rgba(255,255,255,.09); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line); transition: transform .18s var(--ease), background .18s, color .18s; }
.btn:focus { background: var(--text); color: var(--bg); transform: scale(1.06); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.btn.primary:focus { background: #ffd473; box-shadow: 0 0 0 4px rgba(244,185,66,.35), 0 10px 30px rgba(244,185,66,.25); }
.btn .sm { font-weight: 500; opacity: .75; font-size: 16px; }
.btn.small { height: 40px; padding: 0 18px; font-size: 16px; }

.pill { height: 50px; padding: 0 22px; border-radius: 25px; font-size: 18px; font-weight: 600; background: rgba(255,255,255,.1);
  transition: transform .15s var(--ease), background .15s; white-space: nowrap; }
.pill:focus { background: var(--text); color: var(--bg); transform: scale(1.07); }
.pill.sm { height: 40px; padding: 0 16px; font-size: 15px; border-radius: 20px; }
.pill.on { color: var(--accent); }
.pill.on:focus { color: var(--bg); }

/* ---------- home ---------- */
.hero { position: absolute; left: var(--safe-x); top: 96px; width: 600px; }
.hero h1 { font-size: 46px; line-height: 1.1; margin: 8px 0 10px; font-weight: 800; letter-spacing: -.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .desc { height: 76px; }
.hero .actions { display: flex; gap: 14px; margin-top: 20px; transition: opacity .25s; }
.browsing .hero .actions { opacity: 0; }

.rows { position: absolute; left: 0; right: 0; top: 404px; bottom: 0; overflow-y: auto; padding-bottom: 300px;
  scrollbar-width: none; scroll-behavior: smooth; }
.rows::-webkit-scrollbar, .eps::-webkit-scrollbar { display: none; }
.row { margin-bottom: 14px; }
.row-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px var(--safe-x); }
.row-head h2 { font-size: 19px; font-weight: 700; margin: 0; }
.row-head .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; transform: translateY(-2px); }
.row-head .sub { font-size: 15px; color: var(--muted); }
.track { display: flex; gap: 16px; overflow-x: auto; overflow-y: visible; padding: 10px var(--safe-x) 16px;
  scroll-behavior: smooth; scrollbar-width: none; }
.track::-webkit-scrollbar { display: none; }

.tile { position: relative; flex: 0 0 auto; width: 272px; height: 153px; border-radius: 14px; overflow: hidden;
  background: var(--surface) center/cover no-repeat; box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .2s var(--ease), box-shadow .2s; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.88), rgba(0,0,0,0) 62%); }
.tile:focus { transform: scale(1.08); box-shadow: 0 0 0 4px var(--accent), 0 18px 40px rgba(0,0,0,.6); z-index: 2; }
.tile .cap { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; }
.tile .cap .t { font-size: 18px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .cap .s { font-size: 14px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.15); z-index: 1; }
.tile .prog i { display: block; height: 100%; background: var(--accent); }
.tile .chk { position: absolute; top: 10px; right: 10px; z-index: 1; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 900; display: grid; place-items: center; }
.tile.wide { width: 320px; height: 180px; }

/* "Stasera" planner chips */
.plan { flex: 0 0 auto; width: 214px; height: 104px; border-radius: 16px; padding: 16px 18px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface)); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.plan .k { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan .v { font-size: 34px; font-weight: 800; letter-spacing: -.5px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.plan .v small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.plan:focus { transform: scale(1.06); box-shadow: 0 0 0 4px var(--accent), 0 16px 36px rgba(0,0,0,.5); background: var(--surface-2); }
.plan.moon .v { color: var(--accent); }

/* ---------- arc page ---------- */
.arc-head { position: absolute; left: var(--safe-x); top: 76px; right: var(--safe-x); }
.arc-head h1 { font-size: 46px; margin: 8px 0 10px; font-weight: 800; letter-spacing: -.5px; }
.arc-head .desc { max-width: 680px; -webkit-line-clamp: 2; }
.head-pills { display: flex; gap: 10px; margin-bottom: 18px; }
.eps { position: absolute; left: 0; right: 0; top: 352px; bottom: 0; overflow-y: auto; padding: 8px var(--safe-x) 420px;
  scrollbar-width: none; scroll-behavior: smooth; }
.ep-row { display: flex; align-items: center; gap: 14px; max-width: 1168px; margin-bottom: 6px; }
.ep { display: flex; gap: 22px; align-items: center; flex: 1 1 auto; max-width: 740px; padding: 12px;
  border-radius: 14px; transition: background .18s, transform .18s var(--ease); }
.ep:focus { background: rgba(255,255,255,.08); transform: translateX(6px); box-shadow: inset 4px 0 0 var(--accent); }
.ep .th { position: relative; flex: 0 0 auto; width: 224px; height: 126px; border-radius: 10px; overflow: hidden;
  background: var(--surface) center/cover no-repeat; }
.ep .th .num { position: absolute; left: 8px; top: 8px; font-size: 13px; font-weight: 800; padding: 3px 7px; border-radius: 5px; background: rgba(0,0,0,.7); }
.ep .th .dur { position: absolute; right: 8px; bottom: 10px; font-size: 13px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.7); }
.ep .th .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.15); }
.ep .th .prog i { display: block; height: 100%; background: var(--accent); }
.ep .th .seen-ov { position: absolute; inset: 0; background: rgba(5,6,8,.55); display: grid; place-items: center; font-size: 30px; color: var(--accent); }
.ep .body { min-width: 0; }
.ep .t { font-size: 21px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.ep .d { font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ep:focus .d { color: #b9bcc4; }
.ep-pills { display: flex; gap: 8px; opacity: .3; transition: opacity .2s; }
.ep-row:focus-within .ep-pills { opacity: 1; }

/* ---------- journey page ---------- */
.page { position: absolute; left: var(--safe-x); right: var(--safe-x); top: 96px; bottom: 30px; }
.page h1 { font-size: 40px; font-weight: 800; letter-spacing: -.5px; margin: 6px 0 4px; }
.page .lead { font-size: 17px; color: var(--muted); }
.route { position: relative; margin: 46px 0 8px; height: 14px; display: flex; gap: 3px; }
.route .seg { position: relative; height: 100%; border-radius: 7px; background: rgba(255,255,255,.08); overflow: hidden; }
.route .seg i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; }
.route-marker { position: absolute; top: -32px; transform: translateX(-50%); font-size: 13px; font-weight: 800; color: var(--accent);
  white-space: nowrap; letter-spacing: .5px; }
.route-marker::after { content: ""; position: absolute; left: var(--pin, 50%); top: 20px; width: 2px; height: 26px; margin-left: -1px; background: var(--accent); }
.route-labels { display: flex; gap: 3px; font-size: 12px; color: var(--faint); }
.route-labels span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 22px; }
.card { padding: 18px 20px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.card .k { font-size: 14px; color: var(--muted); font-weight: 600; }
.card .v { font-size: 30px; font-weight: 800; margin-top: 6px; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.card .v small { font-size: 16px; color: var(--muted); font-weight: 600; letter-spacing: 0; }
.card .n { font-size: 14px; color: var(--faint); margin-top: 4px; }
.split { display: grid; grid-template-columns: 1fr 1.25fr; gap: 14px; margin-top: 14px; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin-top: 14px; }
.chart .b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.chart .b i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(0deg, rgba(244,185,66,.55), var(--accent)); min-height: 3px; }
.chart .b.zero i { background: rgba(255,255,255,.08); }
.chart .b span { font-size: 12px; color: var(--faint); }
.sagas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: 12px; }
.saga-line .top { display: flex; justify-content: space-between; font-size: 15px; gap: 10px; }
.saga-line .top b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saga-line .top span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.saga-line .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); margin-top: 6px; overflow: hidden; }
.saga-line .bar i { display: block; height: 100%; border-radius: 3px; }
.page .actions { position: absolute; right: 0; top: 14px; }

/* ---------- settings ---------- */
.settings { margin-top: 22px; max-width: 880px; height: 520px; overflow-y: auto; scrollbar-width: none; scroll-behavior: smooth; padding: 4px 10px 200px 4px; }
.settings::-webkit-scrollbar { display: none; }
.set { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 16px 22px; margin-bottom: 8px;
  border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: background .18s, transform .18s var(--ease); }
.set:focus { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); transform: translateX(6px); }
.set .l b { display: block; font-size: 19px; font-weight: 700; }
.set .l span { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }
.set .r { font-size: 18px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.set .r::before { content: "‹  "; color: var(--faint); }
.set .r::after { content: "  ›"; color: var(--faint); }
.set.danger .r { color: #ff8a7a; }
.set.danger .r::before, .set.danger .r::after { content: ""; }
.foot { margin-top: 18px; font-size: 14px; color: var(--faint); line-height: 1.6; }

/* ---------- player ---------- */
#player { position: fixed; inset: 0; z-index: 10; background: #000; }
#player video { position: absolute; inset: 0; width: 100%; height: 100%; }
#hud { position: absolute; inset: 0; transition: opacity .3s var(--ease); pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 62%, rgba(0,0,0,.85) 100%); }
#hud.hide { opacity: 0; }
#hud.paused { background: rgba(0,0,0,.55); }
.hud-top { position: absolute; top: 28px; left: var(--safe-x); right: var(--safe-x); display: flex; justify-content: space-between; }
.hud-arc { font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
.hud-title { font-size: 26px; font-weight: 700; margin-top: 4px; }
.hud-right { display: flex; gap: 16px; align-items: center; }
.hud-sleep { font-size: 16px; font-weight: 700; color: var(--accent); padding: 5px 12px; border-radius: 14px; background: rgba(244,185,66,.14); }
.hud-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 64px; opacity: 0;
  transition: opacity .25s, transform .25s var(--ease); }
.hud-center.show { opacity: .9; transform: translate(-50%, -50%) scale(1.1); }
.hud-bottom { position: absolute; left: var(--safe-x); right: var(--safe-x); bottom: 34px; }
.seekbar { position: relative; height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); }
.seek-buf { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,.22); border-radius: 3px; }
.seek-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }
.seek-knob { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--accent); }
.seek-knob span { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 18px; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: rgba(0,0,0,.8); opacity: 0; transition: opacity .2s; }
.seek-knob.seeking span { opacity: 1; }
.seek-knob.seeking { transform: scale(1.3); }
.hud-times { display: flex; justify-content: space-between; margin-top: 12px; font-size: 17px; color: #c9ccd3; font-variant-numeric: tabular-nums; }
.hud-hint { margin-top: 10px; font-size: 14px; color: var(--faint); text-align: center; }
.hud-info { position: absolute; left: var(--safe-x); top: 120px; width: 640px; opacity: 0; transition: opacity .3s; }
.hud-info .meta { margin-bottom: 4px; }
.hud-info p { font-size: 18px; line-height: 1.55; color: var(--soft); margin: 10px 0 0; }
#hud.info .hud-info { opacity: 1; }
#hud.info { background: linear-gradient(90deg, rgba(0,0,0,.88), rgba(0,0,0,.4) 70%), linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0) 40%); }

#menu { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px var(--safe-x) 40px;
  background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,0)); }
.menu-row { display: flex; gap: 12px; justify-content: center; }

#upnext { position: absolute; right: var(--safe-x); bottom: 120px; display: flex; gap: 16px; align-items: center; width: 480px;
  padding: 14px; border-radius: 16px; background: rgba(18,21,28,.94); box-shadow: 0 0 0 3px var(--accent), 0 20px 50px rgba(0,0,0,.6);
  animation: rise .4s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.un-thumb { position: relative; flex: 0 0 auto; width: 160px; height: 90px; border-radius: 10px; background: #222 center/cover; }
.un-ring { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); border-radius: 10px; }
.un-ring i { font-style: normal; font-size: 30px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.un-label { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; }
.un-title { font-size: 19px; font-weight: 700; margin-top: 4px; }

#goodnight { position: absolute; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gn-moon { font-size: 76px; color: var(--accent); opacity: .65; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .3; transform: scale(.94); } }
.gn-text { font-size: 34px; font-weight: 700; margin-top: 12px; color: #8e939e; }
.gn-sub { font-size: 17px; color: var(--faint); margin-top: 8px; }
.gn-hint { position: absolute; bottom: 40px; font-size: 14px; color: #33363d; }

#spinner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#spinner i { display: block; width: 54px; height: 54px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15);
  border-top-color: var(--accent); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- spoiler sheet ---------- */
#sheet { position: fixed; inset: 0; z-index: 20; background: rgba(5,6,8,.82); display: flex; align-items: center; justify-content: center; }
.sheet-panel { width: 880px; max-height: 620px; display: flex; flex-direction: column; padding: 34px 40px 22px;
  border-radius: 20px; background: #12151c; box-shadow: 0 0 0 2px rgba(244,185,66,.35), 0 30px 80px rgba(0,0,0,.6); animation: rise .35s var(--ease); }
.sheet-kicker { font-size: 14px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); }
.sheet-title { font-size: 30px; font-weight: 800; margin: 8px 0 16px; letter-spacing: -.3px; }
.sheet-scroll { overflow-y: auto; scrollbar-width: none; scroll-behavior: smooth; padding-right: 8px; }
.sheet-scroll::-webkit-scrollbar { display: none; }
#sheet-body p { font-size: 20px; line-height: 1.6; color: #cfd1d6; margin: 0 0 14px; }
#sheet-body p.muted { color: var(--muted); }
.sheet-hint { margin-top: 14px; font-size: 14px; color: var(--faint); text-align: center; }

/* ---------- screensaver, splash, toast, dimmers ---------- */
#saver { position: fixed; inset: 0; z-index: 40; background: #000; }
.saver-clock { position: absolute; font-size: 96px; font-weight: 300; color: #3a3d44; font-variant-numeric: tabular-nums;
  letter-spacing: -2px; transition: left 2s, top 2s; }
.saver-sub { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-size: 14px; color: #26282d; }

#splash { position: fixed; inset: 0; z-index: 45; background: var(--bg); display: flex; flex-direction: column; align-items: center;
  justify-content: center; transition: opacity .6s var(--ease); }
#splash.out { opacity: 0; pointer-events: none; }
.splash-brand { font-size: 64px; font-weight: 800; letter-spacing: -2px; animation: rise .8s var(--ease); }
.splash-brand i { color: var(--accent); font-style: normal; }
.splash-sub { font-size: 18px; color: var(--muted); margin-top: 6px; animation: rise 1s var(--ease); }

#toast { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 30; padding: 12px 22px; border-radius: 24px;
  background: rgba(18,21,28,.96); font-size: 18px; font-weight: 600; box-shadow: 0 0 0 2px rgba(244,185,66,.5); animation: rise .3s var(--ease); }

/* Night tint and software dimmer: layers above everything (the TV composites UI over the video plane). */
/* multiply keeps blacks black and only warms the lights. */
#warm { position: fixed; inset: 0; z-index: 49; background: #ffb070; mix-blend-mode: multiply; opacity: 0; pointer-events: none; transition: opacity 1.5s; }
#dim { position: fixed; inset: 0; z-index: 50; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s; }

/* Inline SVG icons (the TV's fonts lack symbol glyphs). */
.ico { display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; flex: 0 0 auto; }
.hud-center .ico { width: 72px; height: 72px; }
.gn-moon .ico { width: 80px; height: 80px; }
.chk .ico { width: 17px; height: 17px; }
.seen-ov .ico { width: 34px; height: 34px; }
.hud-hint .ico { width: 13px; height: 13px; margin: 0 1px; vertical-align: -1px; }
.lead .ico { width: 13px; height: 13px; }

#hud.menu-open .hud-bottom { opacity: 0; }
.hud-bottom { transition: opacity .2s; }