:root{color-scheme:dark;--case:#202921;--glass:#080f0b;--ink:#edf1de;--muted:#bac8b6;--accent:#73ed83;--edge:#758776;--raised:#313d33}
*{box-sizing:border-box}body{margin:0;background:var(--case);color:var(--ink);font:17px/1.5 Arial,'Microsoft YaHei',sans-serif}button,summary{touch-action:manipulation}button{font:700 15px/1.4 'Courier New',monospace;letter-spacing:.06em;color:var(--ink);background:var(--raised);border:1px solid var(--edge);border-bottom-width:4px;border-radius:5px;padding:12px 18px;cursor:pointer}button:hover{border-color:var(--accent)}button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button:disabled{opacity:.6;cursor:default}[hidden]{display:none!important}
#suiteShell{max-width:1160px;margin:30px auto;padding:28px;border:3px solid var(--edge);border-radius:14px;background:linear-gradient(130deg,transparent,rgba(255,255,255,.035)),var(--case);box-shadow:inset 0 0 0 6px #0003,0 14px 40px #0004}.identity{display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--edge);padding:0 0 24px}.lamp{width:12px;height:34px;background:var(--accent);border:3px solid var(--glass);box-shadow:0 0 0 1px var(--edge)}h1{font:700 clamp(22px,4vw,34px)/1.1 'Courier New',monospace;letter-spacing:.09em;margin:6px 0}.eyebrow,.local{font:12px/1.5 'Courier New',monospace;letter-spacing:.12em;color:var(--muted);margin:0}.local{margin-left:auto}.section-head{padding:24px 0 18px}h2{font-size:25px;line-height:1.3;margin:0 0 8px}p{margin:8px 0;color:var(--muted)}.choices{display:grid;grid-template-columns:1fr 1fr;gap:22px}.choice{position:relative;text-align:left;display:flex;flex-direction:column;gap:18px;min-height:220px;padding:24px;border:2px solid var(--edge);border-bottom:7px solid var(--edge);background:var(--glass);box-shadow:inset 0 0 0 6px var(--case)}.instrument{font:38px/1 monospace;color:var(--accent)}.choice strong{font-size:clamp(18px,2.2vw,25px);letter-spacing:.05em}.choice>span:last-child{font:16px/1.4 Arial,sans-serif;color:var(--muted)}.choice b{float:right;color:var(--accent)}.context{margin-top:26px;padding:20px;background:var(--glass);border-top:2px solid var(--edge);display:grid;grid-template-columns:1fr 2fr auto;gap:22px}.context span{font:12px 'Courier New',monospace;color:var(--muted);display:block;margin-bottom:6px}.context strong{font-size:17px;overflow-wrap:anywhere}.games{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.games div{border:1px dashed var(--edge);padding:22px;background:var(--glass);font:700 20px 'Courier New',monospace}.games small{display:block;margin-top:12px;font-size:12px;letter-spacing:.08em;color:var(--muted)}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}footer{display:flex;justify-content:space-between;gap:20px;margin-top:24px;font:12px/1.6 'Courier New',monospace;color:var(--muted)}details{max-width:350px}summary{cursor:pointer}details button{margin-top:12px}#suiteStatus:empty{display:none}#retroFrame{position:fixed;inset:0;border:0;width:100%;height:100dvh;background:#111812}dialog{background:var(--case);color:var(--ink);border:2px solid var(--edge);border-radius:8px;max-width:min(560px,calc(100% - 24px));max-height:90dvh;overflow:auto;padding:24px}dialog::backdrop{background:#000b}
@media(max-width:850px){#suiteShell{margin:12px;padding:22px}.choice{min-height:180px;padding:20px;gap:12px}.identity{padding-bottom:18px}.section-head{padding-top:18px}.context{margin-top:20px}.local{display:none}}
@media(max-width:540px){#suiteShell{margin:8px;padding:18px 14px}.choices{grid-template-columns:1fr;gap:14px}.choice{min-height:155px}.instrument{font-size:28px}.context{grid-template-columns:1fr;gap:14px}.games{grid-template-columns:1fr}.games div{padding:18px}footer{display:block}footer details{margin-top:18px}h2{font-size:21px}}
/* Suite shell hardware treatment. No rules cross into the Retro document. */
body{background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--case),#83929a 12%),var(--glass) 100%)}
#suiteShell{--metal:color-mix(in srgb,var(--case) 50%,#62666a);position:relative;margin:22px auto;padding:28px 32px 22px;border:2px solid color-mix(in srgb,var(--edge),#c2bfb0 40%);border-radius:18px 5px 18px 5px;background:linear-gradient(175deg,#ffffff08,transparent 28%,#00000018),var(--metal);box-shadow:inset 0 2px 1px #fff4,inset 0 -5px 1px #0006,inset 6px 0 #0002,0 15px 0 -8px #0007,0 24px 50px #0008}
#suiteShell::before,#suiteShell::after{content:'';position:absolute;pointer-events:none;width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,transparent 42%,#0b0e0e 43% 55%,transparent 56%),#828783;border:1px solid #b9beb5;box-shadow:1px 2px 2px #000b}#suiteShell::before{left:9px;top:10px}#suiteShell::after{right:9px;bottom:10px}
.identity{padding-bottom:18px;border-bottom:3px double color-mix(in srgb,var(--edge),#000 22%)}.identity .lamp{height:38px;width:11px;border-width:3px;box-shadow:0 0 0 2px #121916,0 0 12px color-mix(in srgb,var(--accent),transparent 70%)}h1{font-size:clamp(23px,3vw,34px);letter-spacing:.13em}.identity .local{border-left:3px solid var(--accent);padding:6px 0 6px 12px;font-size:11px}
.home-heading{display:grid;grid-template-columns:minmax(0,1fr) 245px;align-items:center;gap:22px;padding:16px 0}.heading-copy h2{max-width:520px;font-size:25px}.heading-copy p{font-size:17px}.optical-instrument{position:relative;display:flex;gap:8px;height:126px;padding:8px 9px 8px 15px;background:linear-gradient(90deg,#0005,transparent),var(--case);border-radius:55px 7px 7px 55px;box-shadow:inset 2px 3px 4px #000a,0 1px 0 #fff3;pointer-events:none;overflow:hidden}.optical-glass{position:relative;overflow:hidden;width:190px;border-radius:50%;border:1px solid var(--edge);background:radial-gradient(ellipse,color-mix(in srgb,var(--glass),var(--accent) 7%),var(--glass));box-shadow:inset 0 0 14px #0007;color:var(--accent)}.optical-glass::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#0002 3px 4px);opacity:.45}.optical-vector{height:100%;width:100%;opacity:.85}.vector-trace{opacity:.35}.instrument-lamps{display:flex;flex-direction:column;justify-content:center;gap:9px}.instrument-lamps i{width:9px;height:5px;background:var(--accent);opacity:.35;box-shadow:0 0 0 2px #0005}.instrument-lamps i:first-child{opacity:.9}.optical-sweep{position:absolute;top:0;left:0;height:100%;width:18%;opacity:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent),transparent 65%),transparent)}
.choices{gap:24px}.choice{isolation:isolate;min-height:203px;border:1px solid color-mix(in srgb,var(--edge),#fff 10%);border-bottom:7px solid color-mix(in srgb,var(--case),#000 40%);border-radius:5px 5px 12px 5px;background:linear-gradient(160deg,#ffffff0c,transparent 40%),var(--glass);box-shadow:inset 0 0 0 7px color-mix(in srgb,var(--raised),#000 20%),inset 0 0 0 8px #ffffff20,0 4px 0 #0007,0 7px 9px #0004;padding:20px 24px 22px;gap:12px;overflow:hidden}.choice::before{content:'';position:absolute;pointer-events:none;left:0;top:28px;width:4px;height:44px;background:var(--accent);opacity:.6;box-shadow:0 0 12px var(--accent)}.choice::after{content:'';position:absolute;pointer-events:none;right:21px;top:23px;width:27px;height:7px;border:2px solid var(--edge);background:var(--accent);box-shadow:-9px 0 0 -2px var(--glass),0 0 8px color-mix(in srgb,var(--accent),transparent 75%)}.choice .instrument{height:47px;width:84px;color:var(--accent);pointer-events:none}.instrument svg{width:84px;height:47px}.choice strong{font-size:clamp(18px,2vw,24px);line-height:1.3;letter-spacing:.035em}.choice:hover{background:linear-gradient(160deg,color-mix(in srgb,var(--accent),transparent 91%),transparent 65%),var(--glass)}.choice:active{box-shadow:inset 0 0 0 7px var(--raised),inset 0 0 16px #0009,0 2px 0 #0007}.choice:active::before,.choice:focus-visible::before{opacity:1;width:5px}.choice:focus-visible{outline:3px solid var(--accent);outline-offset:5px}.choice:nth-child(2){border-radius:5px 12px 5px 5px}.choice b{font-size:22px;line-height:1}
.context{position:relative;margin-top:24px;border:none;border-radius:4px;padding:15px 18px;background:linear-gradient(90deg,#0002,transparent),var(--glass);box-shadow:inset 0 2px 5px #0008,0 1px 0 #fff2;gap:20px}.context div{border-left:3px solid var(--edge);padding-left:12px;min-width:0}.context div:first-child{border-color:var(--accent)}.context span{letter-spacing:.08em;font-size:11px}.context strong{font-weight:500}.context div:last-child strong{font:700 23px/1.2 'Courier New',monospace}
.games{gap:16px}.games>div{position:relative;overflow:hidden;display:grid;grid-template-columns:88px 1fr;column-gap:14px;align-items:center;padding:18px;border:0;border-left:4px solid var(--edge);border-radius:3px 8px 3px 3px;background:linear-gradient(115deg,#ffffff06,transparent),var(--glass);box-shadow:inset 0 0 0 1px #ffffff18,0 3px 0 #0005}.game-instrument{grid-row:1/3;display:block;width:84px;height:64px;color:var(--accent);opacity:.8;pointer-events:none}.game-instrument svg{width:100%;height:100%}.games .game-name{font-size:19px;overflow-wrap:anywhere}.games small{margin-top:8px;font-size:11px;border-top:1px solid var(--edge);padding-top:8px;letter-spacing:.1em}.actions button{border-bottom-color:color-mix(in srgb,var(--edge),#000 35%);box-shadow:inset 0 1px #fff2,0 2px 2px #0006}.actions button:active{box-shadow:inset 0 2px 4px #0005}.actions button:first-child{border-left:4px solid var(--accent)}footer{font-size:11px;margin-top:20px}
#suiteShell[data-signal=redraw] .vector-trace{animation:shell-vector .68s ease-out}#suiteShell[data-signal=sync] .optical-sweep{animation:shell-scan .68s linear}#suiteShell[data-signal=register] .optical-vector{animation:shell-register .68s steps(1)}#suiteShell[data-signal=lamp] .choice::after,#suiteShell[data-signal=lamp] .instrument-lamps i:nth-child(2){animation:shell-lamp .68s steps(1)}
@keyframes shell-vector{0%{stroke-dasharray:8 120;opacity:.2}40%{stroke-dasharray:60 30;opacity:1}100%{stroke-dasharray:180 0;opacity:.35}}@keyframes shell-scan{0%{transform:translateX(0);opacity:0}20%{opacity:1}100%{transform:translateX(600%);opacity:0}}@keyframes shell-register{0%,65%,100%{transform:none;filter:none}25%{transform:translateX(2px);filter:drop-shadow(-2px 0 0 #76bfd280)}45%{transform:translateX(-1px)}}@keyframes shell-lamp{0%,65%,100%{opacity:.8}24%{opacity:.28}42%{opacity:1}}
@media(max-width:850px){#suiteShell{margin:12px;padding:23px 24px 20px}.home-heading{grid-template-columns:1fr 186px;gap:14px;padding:14px 0}.optical-instrument{height:105px;padding-left:10px}.optical-glass{width:150px}.choice{min-height:180px;padding:19px;gap:10px}.context{margin-top:20px}.games>div{grid-template-columns:66px 1fr;padding:16px 12px;gap:10px}.game-instrument{width:64px}.games .game-name{font-size:17px}}
@media(max-width:540px){#suiteShell{margin:8px;padding:22px 18px 18px}.identity{gap:12px;padding-bottom:14px}h1{font-size:23px;letter-spacing:.06em}.eyebrow{font-size:10px}.home-heading{grid-template-columns:1fr 76px;gap:9px;padding:18px 0}.heading-copy h2{font-size:20px}.heading-copy p{font-size:15px}.optical-instrument{height:76px;padding:5px;border-radius:50%}.optical-glass{width:66px}.instrument-lamps{display:none}.choices{gap:18px}.choice{min-height:170px;padding:18px 20px}.choice strong{font-size:19px}.choice .instrument{height:36px}.instrument svg{height:36px}.choice::after{top:22px;right:21px}.context{padding:16px;gap:18px}.games>div{grid-template-columns:68px 1fr;min-height:114px}.games .game-name{font-size:18px}.game-instrument{width:66px}.actions{gap:12px}.actions button{min-height:46px}}
@media(prefers-reduced-motion:reduce){#suiteShell *,#suiteShell *::before,#suiteShell *::after{animation:none!important;transition:none!important}}
body{min-height:100dvh;background-repeat:no-repeat;background-attachment:fixed}
.game-instrument{overflow:hidden}.games>div::after{content:'';position:absolute;pointer-events:none;bottom:2px;left:12px;height:2px;width:20%;background:var(--accent);opacity:0}
#suiteShell[data-signal=redraw] .game-instrument path{animation:shell-vector .68s ease-out}
#suiteShell[data-signal=register] .game-instrument svg{animation:shell-register .68s steps(1)}
#suiteShell[data-signal=sync] .games>div::after{animation:shell-scan .68s linear}
#suiteShell[data-signal=lamp] .identity .lamp{animation:shell-lamp .68s steps(1)}
html[data-shell-palette=light] #suiteShell{--metal:color-mix(in srgb,var(--case) 92%,#d9d6ce)}
html[data-shell-palette=light] .identity .eyebrow,html[data-shell-palette=light] .local,html[data-shell-palette=light] .heading-copy p,html[data-shell-palette=light] #practiceView>.section-head p,html[data-shell-palette=light] #returnNote,html[data-shell-palette=light] footer{color:var(--ink)}

/* One-time update panel on Home */
#updateNeeded{margin-top:20px;padding:16px 20px;border:2px solid var(--accent);border-radius:4px;background:var(--glass)}#updateNeeded h3{margin:0 0 6px;color:var(--accent)}#updateNeeded p{margin:6px 0}#updateNeeded .actions{margin-top:12px}
/* Fit the suite panel to the screen: scale up on projectors, tighten on short laptop screens (audit 2026-10-29) */
@media (min-width:1600px) and (min-height:950px){#suiteShell{zoom:1.22;margin-top:max(22px,calc((100vh / 1.22 - 760px) / 2))}}
@media (min-width:2200px) and (min-height:1300px){#suiteShell{zoom:1.5}}
@media (max-height:800px) and (min-width:851px){#suiteShell{margin:10px auto}}
/* game setup dialogs: form controls large enough to use on a classroom screen */
:is(#doomSetup,#trenchSetup,#spaceSetup,#moveSetup,#realmSetup,#jeopardySetup) select,:is(#doomSetup,#trenchSetup,#spaceSetup,#moveSetup,#realmSetup,#jeopardySetup) input:not([type=checkbox]):not([type=radio]){font:inherit;font-size:clamp(15px,calc(1vmin + 8px),19px);min-height:44px;padding:6px 10px;border-radius:6px;background:var(--glass,#0b140e);color:var(--ink,#e8f3ea);border:1px solid var(--edge,#5d7a63);box-sizing:border-box}
:is(#doomSetup,#trenchSetup,#spaceSetup,#moveSetup,#realmSetup,#jeopardySetup) input:is([type=checkbox],[type=radio]){width:20px;height:20px}
