:root {
  color-scheme: dark;
  --bg: #080604;
  --wood: #4b2b17;
  --wood2: #24140c;
  --plastic: #181713;
  --plastic2: #080908;
  --metal: #8b7a64;
  --cream: #dec8a5;
  --green: #8ed52e;
  --green-dim: #4f8919;
  --red: #f23d36;
  --guide-blue: #134b99;
  --guide-blue2: #092c65;
  --amber: #efc95c;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); font-family: "Courier New", monospace; }
body { min-height: 100vh; overflow-x: hidden; color: #eee2ca; }
button { font: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.is-hidden { display: none !important; }
.scene { min-height: 100vh; position: relative; background:
  radial-gradient(circle at 50% 30%, rgba(93,56,31,.25), transparent 38%),
  linear-gradient(180deg, #120d09 0%, #080604 70%); }
.scene::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background-image: repeating-linear-gradient(90deg, transparent 0 11px, rgba(255,255,255,.012) 12px); }

/* Landing */
.scene--landing { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:44px 20px 34px; }
.landing-title { text-align:center; z-index:2; margin-bottom:22px; text-shadow: 0 3px 18px #000; }
.landing-title h1 { font-family: Georgia, serif; font-weight:400; font-size:clamp(2.2rem,5vw,4.6rem); margin:0; letter-spacing:.02em; color:#d8bd96; }
.landing-title p { margin:.55rem 0 0; font-size:clamp(1rem,2vw,1.65rem); letter-spacing:.25em; color:#c2a47d; }
.landing-console { width:min(760px,90vw); z-index:2; cursor:pointer; transition:transform .35s ease, filter .35s ease; }
.landing-console:hover { transform:scale(1.015); filter:brightness(1.08); }
.tv { position:relative; filter: drop-shadow(0 25px 35px rgba(0,0,0,.65)); }
.tv-bezel { display:grid; grid-template-columns:minmax(0,1fr) 120px; gap:9px; border:10px solid #26150d; border-left-color:#54301a; border-right-color:#54301a; background:linear-gradient(#7a624a,#26221c 8%,#15130f); padding:12px; border-radius:7px; box-shadow: inset 0 0 0 2px #9c7751, inset 0 0 0 4px #1a120e; }
.crt-shell { position:relative; aspect-ratio:4/3; overflow:hidden; background:#020302; border:15px solid #0d0e0d; border-radius:11% / 8%; box-shadow: inset 0 0 35px #000, 0 0 0 3px #4d4438; isolation:isolate; }
.crt-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#020302; filter:saturate(.8) contrast(.94) brightness(.9); }
.crt-scanlines { position:absolute; inset:0; z-index:10; pointer-events:none; opacity:.16; background:repeating-linear-gradient(0deg, rgba(0,0,0,.33) 0 1px, transparent 1px 3px); mix-blend-mode:multiply; }
.crt-glass { position:absolute; inset:0; z-index:11; pointer-events:none; border-radius:10% / 8%; box-shadow: inset 0 0 62px rgba(0,0,0,.72), inset 0 0 9px rgba(255,255,255,.14); background:linear-gradient(118deg, rgba(255,255,255,.05), transparent 25%, transparent 70%, rgba(255,255,255,.02)); }
.landing-screen-label { position:absolute; z-index:7; right:7%; top:7%; color:#a5e74d; border:1px solid #5f8b28; background:rgba(0,0,0,.72); padding:.35em .55em; font-size:clamp(.72rem,1.4vw,1rem); text-shadow:0 0 7px #71b42f; }
.tv-controls { min-width:0; display:flex; flex-direction:column; align-items:stretch; padding:8px 7px; color:#b7ac98; background:linear-gradient(90deg,#11110f,#24211b 60%,#0c0d0c); border:2px solid #5d5140; box-shadow:inset 0 0 0 2px #111; }
.channel-window { height:72px; display:flex; align-items:center; justify-content:center; background:#090b08; border:3px inset #302a21; color:var(--green); font-size:1.8rem; text-shadow:0 0 7px currentColor; }
.channel-window--red { color:#ff312f; }
.sensor-dot { width:5px; height:5px; background:#d32923; border-radius:50%; margin:8px auto 10px; box-shadow:0 0 5px #c22; }
.mini-buttons { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:8px 4px; }
.mini-buttons i { height:16px; background:#080807; border:1px solid #4d463a; }
.speaker { flex:1; min-height:70px; margin-top:10px; opacity:.6; background:repeating-linear-gradient(0deg,#090909 0 2px,#2c2923 2px 4px); border-top:1px solid #443d32; }
.brand { position:absolute; left:45%; bottom:14px; z-index:20; font-family:Georgia,serif; font-style:italic; color:#88745a; font-size:.85rem; letter-spacing:.06em; }
.landing-shelf { height:82px; margin-top:7px; background:linear-gradient(#5a321b,#25140c 60%,#140b07); border-radius:3px; box-shadow:0 18px 40px #000; display:flex; align-items:center; justify-content:space-between; padding:0 40px; }
.vhs-tape { width:180px; height:48px; background:linear-gradient(#151515,#060606); border:2px solid #252525; box-shadow: inset 0 0 0 3px #080808; display:flex; align-items:center; justify-content:center; transform:rotate(-1deg); }
.vhs-tape span { background:#bca782; color:#2a2118; padding:3px 12px; font-family:"Comic Sans MS", cursive; font-size:.85rem; }
.vcr { width:220px; height:48px; border:1px solid #181818; background:#090909; display:flex; align-items:center; justify-content:flex-end; padding-right:23px; color:#677d2d; }
.enter-copy { text-align:center; margin:13px 0 0; letter-spacing:.1em; color:#cdb38d; text-shadow:0 2px 8px #000; }

/* Main app */
.scene--app { padding:16px 18px 26px; min-height:100vh; }
.status-bar { display:flex; align-items:stretch; gap:0; margin-bottom:12px; position:relative; z-index:20; }
.status-card { border:1px solid #4a3a29; background:rgba(7,7,6,.84); min-height:58px; display:flex; flex-direction:column; justify-content:center; padding:5px 12px; }
.status-card--channel { width:130px; color:var(--green); font-size:1.45rem; text-shadow:0 0 7px #518f1c; }
.status-card--title { width:min(300px,30vw); }
.status-card--title strong { font-size:1.05rem; font-weight:400; }
.status-card--title small { margin-top:4px; color:#b7a58e; }
.status-actions { margin-left:auto; display:flex; gap:12px; }
.top-button { min-width:105px; color:#d3c1a4; border:1px solid #4e422f; border-radius:5px; background:rgba(8,8,7,.8); padding:0 14px; cursor:pointer; }
.top-button:hover { border-color:#9e7c3a; }
.top-button--power { color:#ff403b; }
#topVolumeBars { color:var(--green); letter-spacing:2px; }
.watch-layout { display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:22px; align-items:center; width:min(1420px,100%); margin:0 auto; }
.tv--main .tv-bezel { grid-template-columns:minmax(0,1fr) 150px; }
.tv--main .channel-window { height:82px; }
.channel-label { text-align:center; font-size:.72rem; margin:2px 0 4px; }
.physical-group { display:grid; grid-template-columns:42px 1fr; grid-template-rows:1fr 1fr; gap:4px 8px; margin:9px 0; border-top:1px solid #413a31; padding-top:9px; }
.physical-group button { grid-column:1; background:#141311; border:1px solid #574c3e; color:#d7c6a7; cursor:pointer; }
.physical-group span { grid-column:2; grid-row:1/3; align-self:center; font-size:.72rem; }
.colortrack { display:flex; gap:4px; padding:10px 5px; border-top:1px solid #413a31; }
.colortrack i { display:block; width:12px; height:12px; background:#b72a22; }
.colortrack i:nth-child(2) { background:#738729; }.colortrack i:nth-child(3) { background:#305a7b; }

.guide-screen { position:absolute; inset:0; z-index:5; background:linear-gradient(#1558ad,#0c3d88 45%,#092d68); color:#f1f0dd; padding:5% 5% 4%; text-shadow:1px 1px #001; font-size:clamp(.6rem,1.35vw,1.16rem); }
.guide-head { display:flex; justify-content:space-between; font-size:1.25em; letter-spacing:.05em; padding-bottom:.7em; border-bottom:2px solid rgba(255,255,255,.55); }
.guide-subhead { text-align:center; color:#f0d170; font-size:1.3em; padding:.55em 0 .45em; }
.guide-columns { display:grid; grid-template-columns:14% 1fr; border-bottom:1px solid rgba(255,255,255,.5); padding:.22em .55em; }
.guide-rows { display:flex; flex-direction:column; }
.guide-row { display:grid; grid-template-columns:14% 1fr; padding:.28em .55em; border-bottom:1px solid rgba(255,255,255,.25); cursor:pointer; position:relative; }
.guide-row.selected { color:#171005; background:#e6c454; text-shadow:none; }
.guide-row.selected::before { content:"▶"; position:absolute; left:-1.2em; color:#e7c455; }
.guide-footer { position:absolute; left:5%; right:5%; bottom:4%; text-align:center; border-top:1px solid rgba(255,255,255,.45); padding-top:.6em; font-size:.85em; }
.static-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:7; image-rendering:pixelated; }
.osd { position:absolute; z-index:8; left:50%; top:50%; transform:translate(-50%,-50%); min-width:230px; text-align:center; padding:16px 22px; color:var(--green); border:1px solid #5a8928; border-radius:6px; background:rgba(1,5,0,.82); box-shadow:0 0 14px rgba(77,139,26,.15); text-shadow:0 0 7px #47891a; font-size:clamp(.9rem,1.8vw,1.45rem); line-height:1.45; white-space:pre-line; }
.pause-icon { position:absolute; z-index:8; right:7%; top:8%; background:rgba(0,0,0,.7); color:var(--green); border:1px solid #4e7b23; border-radius:4px; padding:7px 11px; font-size:1.3rem; }
.power-line { position:absolute; z-index:20; height:2px; width:76%; left:12%; top:50%; background:#f8fbff; box-shadow:0 0 16px 5px #fff; }
.power-dot { position:absolute; z-index:20; width:7px; height:7px; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%); background:white; box-shadow:0 0 18px 7px white; }
.crt-shell.is-off { background:#010101; }

.under-tv { display:grid; grid-template-columns:270px 1fr; gap:20px; align-items:center; margin-top:11px; }
.vhs-tape--main { width:260px; }
.quick-help { min-height:70px; padding:12px 16px; background:rgba(5,5,4,.78); border:1px solid #3d3021; border-radius:8px; display:grid; grid-template-columns:repeat(3,minmax(170px,1fr)); gap:9px 16px; color:#baa88b; font-size:.72rem; }
kbd { color:#dbcaad; background:#242019; border:1px solid #4e4539; padding:3px 5px; border-radius:3px; margin-right:6px; font:inherit; }

/* Remote */
.remote { background:linear-gradient(100deg,#1a1917,#0b0b0a 50%,#23211e); border:2px solid #494039; border-radius:25px 25px 30px 30px; padding:19px 15px 17px; box-shadow:0 20px 35px #000, inset 1px 0 rgba(255,255,255,.06); color:#d4c6af; align-self:center; }
.remote-topline,.transport-labels { display:flex; justify-content:space-between; font-size:.58rem; margin:1px 6px 5px; }
.remote-row { display:flex; gap:9px; justify-content:center; }
.remote-row--wide { justify-content:space-between; }
.remote-row--triple > * { flex:1; }
.number-pad { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:10px 0; }
.remote-btn { min-height:34px; border-radius:8px; border:1px solid #51493f; color:#dccdaf; background:linear-gradient(#292620,#11110f); box-shadow:inset 0 1px rgba(255,255,255,.08),0 2px 2px #000; cursor:pointer; }
.remote-btn:active,.remote-btn.active { transform:translateY(1px); background:#393326; }
.remote-btn--power { color:#fff; background:linear-gradient(#a63c2c,#6b1d14); border-radius:50%; width:42px; flex:0 0 42px; }
.remote-btn--small { font-size:.65rem; }
.remote-rockers { display:grid; grid-template-columns:1fr .92fr 1fr; gap:8px; margin:11px 0; align-items:center; }
.rocker { display:grid; grid-template-rows:32px 20px 32px; text-align:center; }
.rocker span { align-self:center; font-size:.65rem; }
.remote-btn--enter { height:48px; align-self:center; font-size:.72rem; }
.remote-brand { margin-top:19px; text-align:center; font-family:Arial,sans-serif; font-size:.9rem; color:#c8b48e; }
.remote-brand small { display:block; margin-top:3px; font-size:.68rem; }
.memory-note { width:max-content; max-width:90%; margin:18px 7vw 0 auto; padding:12px 16px; background:#caa769; color:#3f2b15; font-family:"Comic Sans MS",cursive; transform:rotate(1deg); box-shadow:0 7px 14px #000; }

/* Entry transition */
.scene--landing.zoom-away { animation:zoomAway .85s ease forwards; pointer-events:none; }
@keyframes zoomAway { to { opacity:0; transform:scale(1.22); filter:blur(4px); } }
.scene--app.entering { animation:appIn .65s ease both; }
@keyframes appIn { from { opacity:0; transform:scale(.96); } to { opacity:1; transform:scale(1); } }

@media (max-width: 900px) {
  .status-card--title { display:none; }
  .status-actions { gap:5px; }
  .top-button { min-width:0; padding:0 9px; font-size:.75rem; }
  .watch-layout { grid-template-columns:1fr; }
  .remote { width:min(420px,94vw); margin:0 auto; }
  .tv--main .tv-bezel { grid-template-columns:minmax(0,1fr) 105px; padding:7px; }
  .tv-controls { padding:5px 4px; }
  .channel-window { height:55px !important; font-size:1.35rem; }
  .physical-group { grid-template-columns:32px 1fr; gap:2px 5px; }
  .physical-group span { font-size:.55rem; }
  .under-tv { grid-template-columns:1fr; }
  .vhs-tape--main { display:none; }
  .quick-help { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 620px) {
  .scene--app { padding:7px; }
  .status-bar { margin-bottom:6px; }
  .status-card--channel { width:86px; min-height:43px; font-size:1rem; }
  .top-button { min-height:43px; font-size:.66rem; }
  #topMute { display:none; }
  .tv--main .tv-bezel { grid-template-columns:1fr; border-width:7px; }
  .tv--main .tv-controls { display:none; }
  .crt-shell { border-width:9px; }
  .quick-help { display:none; }
  .memory-note { margin-right:auto; font-size:.82rem; }
  .landing-title { margin-bottom:12px; }
  .tv--landing .tv-bezel { grid-template-columns:1fr 76px; border-width:7px; padding:7px; }
  .landing-shelf { padding:0 12px; }
  .vcr { width:135px; }
  .guide-screen { font-size:clamp(.56rem,2.6vw,.8rem); }
}

/* v0.2 polish */
.crt-shell { transform: translateZ(0); }
.crt-shell.switching .crt-video { animation:vhsChannelBreak .46s steps(2,end); }
.crt-shell.switching::after { content:""; position:absolute; inset:-10%; z-index:6; pointer-events:none; opacity:.34; background:linear-gradient(90deg,rgba(255,0,0,.08),transparent 32%,rgba(0,110,255,.08)); animation:chromaSlip .13s steps(2,end) infinite; }
@keyframes vhsChannelBreak {
  0% { transform:translateY(0) scale(1.01); filter:saturate(.9) contrast(1); }
  30% { transform:translateY(-2.5%) scaleX(1.035); filter:saturate(.45) contrast(1.35) hue-rotate(-8deg); }
  55% { transform:translateY(3%) scaleX(.98); filter:saturate(1.3) contrast(.85) hue-rotate(12deg); }
  100% { transform:translateY(0) scale(1); }
}
@keyframes chromaSlip { from { transform:translateX(-1.5%); } to { transform:translateX(1.5%); } }
.tracking-bar { position:absolute; z-index:9; left:-4%; width:108%; height:9%; top:42%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(255,255,255,.19),rgba(0,0,0,.45),transparent); filter:blur(1px); animation:trackingSweep .43s linear infinite; }
@keyframes trackingSweep { from { transform:translateY(-430%); } to { transform:translateY(560%); } }
.tape-timestamp { position:absolute; z-index:8; left:7%; bottom:8%; color:#ece9dc; font-size:clamp(.72rem,1.55vw,1.25rem); font-weight:bold; line-height:1.15; text-shadow:2px 2px #101010,-1px -1px #101010; letter-spacing:.035em; pointer-events:none; }
.crt-shell.powering-down .crt-glass { animation:powerFlash .22s ease-out; }
@keyframes powerFlash { 50% { background:rgba(255,255,255,.13); } }
.guide-columns { grid-template-columns:12% minmax(0,1fr) 29%; }
.guide-row { grid-template-columns:12% minmax(0,1fr) 29%; align-items:center; }
.guide-status { text-align:right; font-size:.73em; opacity:.9; white-space:nowrap; }
.guide-row.selected .guide-status { opacity:1; }
.guide-rows { max-height:63%; overflow:hidden; }
.memory-note small { font-family:"Courier New",monospace; opacity:.6; font-size:.58rem; margin-left:.55rem; }
.config-error { max-width:720px; margin:2rem auto; border:1px solid #733; background:#170707; color:#ffd4c9; padding:1rem 1.2rem; line-height:1.5; }

/* Slightly more lived-in dark-room ambience without blocking the UI. */
.scene--app::after { content:""; position:fixed; right:-6vw; top:10vh; width:24vw; height:55vh; pointer-events:none; opacity:.16; background:radial-gradient(ellipse at 70% 30%,rgba(87,114,52,.42),transparent 35%),linear-gradient(115deg,transparent 45%,rgba(30,61,20,.34) 46% 48%,transparent 49%); filter:blur(5px); }

@media (max-width:620px) {
  .guide-columns,.guide-row { grid-template-columns:13% minmax(0,1fr) 33%; }
  .guide-status { font-size:.62em; }
  .tape-timestamp { font-size:.68rem; }
}

/* v0.3.1 landing-room music */
.landing-actions { display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:4px; }
.landing-actions .enter-copy { margin:0; }
.landing-music-toggle {
  border:1px solid #67533a;
  border-radius:4px;
  padding:8px 13px;
  background:linear-gradient(#262018,#12100d);
  color:#bca784;
  font:600 .68rem/1 "Courier New",monospace;
  letter-spacing:.075em;
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 3px 7px rgba(0,0,0,.6);
  cursor:pointer;
  opacity:.82;
  transition:opacity .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.landing-music-toggle:hover,.landing-music-toggle:focus-visible { opacity:1; color:#e2c999; border-color:#9b7b4e; outline:none; }
.landing-music-toggle.is-on { color:#9dcc58; border-color:#587436; box-shadow:0 0 12px rgba(104,150,55,.14),inset 0 1px rgba(255,255,255,.055); }

/* v0.5 authentication / family-access screen */
.scene--auth {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:22px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 43%,rgba(68,102,38,.11),transparent 34%),
    linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.72)),
    #070604;
  color:#d6e8b5;
}
.auth-ambient { position:fixed; inset:0; pointer-events:none; opacity:.35; background:radial-gradient(ellipse at 18% 72%,rgba(93,57,25,.2),transparent 26%),radial-gradient(ellipse at 82% 68%,rgba(45,74,28,.18),transparent 30%); }
.auth-tv { width:min(720px,96vw); position:relative; z-index:1; }
.auth-bezel {
  display:grid;
  grid-template-columns:minmax(0,1fr) 118px;
  gap:10px;
  padding:18px;
  border:12px solid #4a2e18;
  border-radius:23px;
  background:linear-gradient(115deg,#775034,#422716 45%,#2c1a10 70%,#614126);
  box-shadow:0 30px 70px rgba(0,0,0,.72),inset 0 0 0 2px rgba(255,210,150,.10),inset 0 0 25px rgba(0,0,0,.55);
}
.auth-screen {
  position:relative;
  min-height:430px;
  overflow:hidden;
  border:12px solid #171714;
  border-radius:45% / 10%;
  background:#061006;
  box-shadow:inset 0 0 44px #000,0 0 25px rgba(90,145,58,.12);
}
.auth-screen::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center,rgba(76,153,58,.10),transparent 68%); pointer-events:none; }
.auth-scanlines { position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.20; background:repeating-linear-gradient(180deg,rgba(255,255,255,.08) 0,rgba(255,255,255,.08) 1px,transparent 1px,transparent 4px); }
.auth-glass { position:absolute; inset:0; z-index:5; pointer-events:none; background:radial-gradient(ellipse at 35% 12%,rgba(255,255,255,.08),transparent 22%),linear-gradient(105deg,rgba(255,255,255,.035),transparent 28%); }
.auth-content { position:relative; z-index:3; min-height:430px; padding:56px clamp(28px,7vw,72px) 38px; display:flex; flex-direction:column; align-items:center; text-align:center; font-family:"Courier New",monospace; text-shadow:0 0 7px rgba(129,208,86,.40); }
.auth-kicker { margin:0 0 9px; color:#91d25f; font-size:clamp(.82rem,2vw,1.05rem); font-weight:bold; letter-spacing:.15em; }
.auth-content h1 { margin:0; color:#d9f3b8; font-size:clamp(1.75rem,5vw,3.15rem); letter-spacing:.11em; line-height:1; }
.auth-copy { color:#7faa60; letter-spacing:.17em; font-size:.69rem; margin:12px 0 32px; }
.auth-form { width:min(420px,100%); display:flex; flex-direction:column; gap:10px; }
.auth-form label { text-align:left; color:#a9d481; font-size:.69rem; letter-spacing:.10em; }
.auth-form input { width:100%; box-sizing:border-box; border:1px solid #5f8247; border-radius:2px; padding:13px 14px; background:#020702; color:#d9f3b8; font:700 1rem/1.15 "Courier New",monospace; outline:none; box-shadow:inset 0 0 13px rgba(0,0,0,.75); text-align:center; }
.auth-form input:focus { border-color:#b0df82; box-shadow:0 0 12px rgba(119,185,74,.18),inset 0 0 13px rgba(0,0,0,.75); }
#authCode { font-size:1.65rem; letter-spacing:.34em; padding-left:calc(14px + .34em); }
.auth-enter { margin-top:4px; border:1px solid #7d9c59; border-radius:2px; padding:12px 14px; color:#e2f4cb; background:linear-gradient(#29421d,#13230e); font:700 .78rem/1 "Courier New",monospace; letter-spacing:.09em; cursor:pointer; box-shadow:inset 0 1px rgba(255,255,255,.08),0 4px 10px rgba(0,0,0,.45); }
.auth-enter:hover,.auth-enter:focus-visible { background:linear-gradient(#355826,#172b11); outline:none; }
.auth-enter:disabled { opacity:.45; cursor:wait; }
.auth-sent { color:#9fc77b; font-size:.68rem; line-height:1.5; margin:0 0 7px; }
.auth-sent strong { color:#d8efbc; }
.auth-secondary-actions { display:flex; justify-content:center; gap:18px; margin-top:3px; }
.auth-link { border:0; background:none; color:#77975e; font:700 .61rem/1 "Courier New",monospace; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:5px; }
.auth-link:hover,.auth-link:focus-visible { color:#b7d99a; outline:none; }
.auth-message { min-height:2.6em; margin:19px 0 0; color:#9cbd7d; font:700 .66rem/1.45 "Courier New",monospace; max-width:470px; }
.auth-message.is-error { color:#e39a86; text-shadow:0 0 6px rgba(200,70,45,.32); }
.auth-controls { display:flex; flex-direction:column; align-items:center; gap:18px; padding:36px 8px 15px; color:#a98762; font:700 .55rem/1 "Arial",sans-serif; letter-spacing:.06em; }
.auth-led { width:9px; height:9px; border-radius:50%; background:#6fad3c; box-shadow:0 0 10px rgba(117,191,64,.75); }
.auth-speaker { width:65px; flex:1; max-height:220px; background:repeating-linear-gradient(90deg,#151310 0,#151310 3px,#342b21 3px,#342b21 5px); border:1px solid #17130f; border-radius:4px; box-shadow:inset 0 0 18px rgba(0,0,0,.8); }
.auth-foot { text-align:center; color:#604a34; font:700 .58rem/1.3 "Courier New",monospace; letter-spacing:.08em; margin:13px 0 0; }
.viewer-badge { font:700 .58rem/1 "Courier New",monospace; letter-spacing:.05em; color:#725f46; }
.viewer-badge strong { color:#9b815c; }
.viewer-badge button { margin-left:8px; padding:0; border:0; background:none; color:#776245; font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.viewer-badge button:hover { color:#b09268; }
.auth-tv.auth-success { animation:authUnlock .55s ease both; }
@keyframes authUnlock { 35% { filter:brightness(1.28); transform:scale(1.012); } 100% { opacity:0; transform:scale(1.08); filter:blur(3px); } }

@media (max-width:650px) {
  .scene--auth { padding:10px; }
  .auth-bezel { grid-template-columns:1fr; padding:8px; border-width:8px; }
  .auth-controls { display:none; }
  .auth-screen,.auth-content { min-height:390px; }
  .auth-content { padding:48px 20px 30px; }
  .auth-screen { border-width:9px; border-radius:32px; }
  .auth-secondary-actions { gap:8px; flex-wrap:wrap; }
  #topSignOut { display:none; }
}