/* ODYSSEY SHELL LAYER
   One look for the whole suite: ship-computer panels in the 2001 and Star Wars console style.
   Each game is a station with its own accent colour. Loaded last on Home and Practice. */
:root{
  --o-void:#030605; --o-deck:#07100b; --o-panel:#0b1711; --o-line:#1f3b2b;
  --o-ink:#dcffe6; --o-dim:#86a993; --o-phos:#3dff7a;
  --st-linkup:#3fe9ff; --st-strafe:#ffb21e; --st-sector:#ff4fd8; --st-nova:#ff6a3d;
  --o-display:'Orbitron','Share Tech Mono','Courier New',monospace;
  --o-mono:'Share Tech Mono','Courier New',monospace;
}
#matchModule,#matchSetup,#superMatchTile{--st:var(--st-linkup)}
#moveModule,#moveSetup,#moveTile{--st:var(--st-strafe)}
#jeopardyModule,#jeopardySetup,#jeopardyTile{--st:var(--st-sector)}
#spaceModule,#spaceSetup,#spaceTile{--st:var(--st-nova)}

/* Practice tiles: each game reads as a numbered station with its own accent */
#futureGames{counter-reset:station}
#futureGames>div{counter-increment:station;border-left-color:var(--st,var(--accent))!important;transition:box-shadow .2s,transform .2s}
#futureGames>div:has(#superMatchTile){--st:var(--st-linkup)}
#futureGames>div:has(#moveTile){--st:var(--st-strafe)}
#futureGames>div:has(#jeopardyTile){--st:var(--st-sector)}
#futureGames>div:has(#spaceTile){--st:var(--st-nova)}
#futureGames>div .game-instrument{color:var(--st)}
#futureGames>div::before{content:"STATION 0" counter(station);position:absolute;top:10px;right:14px;font:11px/1 var(--o-mono);letter-spacing:.18em;color:var(--st);opacity:.75}
#futureGames>div:hover{box-shadow:inset 0 0 0 1px var(--st),0 0 22px color-mix(in srgb,var(--st),transparent 80%)}
#futureGames .game-name{font-family:var(--o-display);font-weight:700;letter-spacing:.14em;color:var(--o-ink)}
#futureGames small{border-top-color:color-mix(in srgb,var(--st),transparent 60%)!important;font-family:var(--o-mono)}
#futureGames>div:has(:focus-visible){outline:3px solid var(--st);outline-offset:4px}

/* Game station bar: name, live lamp, class and lesson, exit buttons */
#matchModule,#moveModule,#jeopardyModule,#spaceModule{background:var(--o-void)}
#matchModule>header,#moveModule>header,#jeopardyModule>header,#spaceModule>header{
  position:relative;background:linear-gradient(180deg,#0b1711,#050b08);border-bottom:1px solid var(--st)!important;
  box-shadow:0 1px 0 #000,0 0 18px color-mix(in srgb,var(--st),transparent 82%);padding-left:16px!important;gap:16px!important}
#matchModule>header::before,#moveModule>header::before,#jeopardyModule>header::before,#spaceModule>header::before{
  font:700 clamp(15px,1.6vw,20px)/1 var(--o-display);letter-spacing:.22em;color:var(--st);
  text-shadow:0 0 10px color-mix(in srgb,var(--st),transparent 45%);padding-left:18px;flex:none;
  background:radial-gradient(circle at 5px 50%,var(--st) 0 4px,transparent 5px);animation:o-lamp 2.4s steps(1) infinite}
#matchModule>header::before{content:"LINKUP"}
#moveModule>header::before{content:"STRAFE"}
#jeopardyModule>header::before{content:"SECTOR"}
#spaceModule>header::before{content:"NOVA STRIKE"}
#matchRunLabel,#moveRunLabel,#jeopardyRunLabel,#spaceRunLabel{font:13px/1.35 var(--o-mono)!important;letter-spacing:.06em;color:var(--o-dim);border-left:1px solid var(--o-line);padding-left:14px}
#matchModule header button,#moveModule header button,#jeopardyModule header button,#spaceModule header button{
  font:700 12px/1 var(--o-mono);letter-spacing:.14em;background:transparent;color:var(--o-ink);border:1px solid var(--o-line);border-bottom-width:1px;border-radius:2px;box-shadow:none}
#matchModule header button:hover,#moveModule header button:hover,#jeopardyModule header button:hover,#spaceModule header button:hover{border-color:var(--st);color:var(--st)}
#matchModule .actions button:first-child,#moveModule .actions button:first-child,#jeopardyModule .actions button:first-child,#spaceModule .actions button:first-child{border-left:1px solid var(--o-line)}
@keyframes o-lamp{0%,92%{background-image:radial-gradient(circle at 5px 50%,var(--st) 0 4px,transparent 5px)}93%,100%{background-image:radial-gradient(circle at 5px 50%,transparent 0 4px,transparent 5px)}}

/* Result strip under a game */
#matchSummary,#spaceSaveStatus,#moveSaveStatus,#jeopardySaveStatus{background:var(--o-deck);border-top:1px solid var(--o-line);font-family:var(--o-mono);color:var(--o-dim)}

/* Setup dialogs: one template for all four games */
#matchSetup,#moveSetup,#jeopardySetup,#spaceSetup{
  background:linear-gradient(var(--st),var(--st)) top left/22px 2px no-repeat,linear-gradient(var(--st),var(--st)) top left/2px 22px no-repeat,
             linear-gradient(var(--st),var(--st)) bottom right/22px 2px no-repeat,linear-gradient(var(--st),var(--st)) bottom right/2px 22px no-repeat,
             repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),var(--o-deck);
  color:var(--o-ink);border:1px solid var(--o-line);border-radius:3px;padding:26px 28px;box-shadow:0 0 0 1px #000,0 0 40px color-mix(in srgb,var(--st),transparent 85%)}
#matchSetup h2,#moveSetup h2,#jeopardySetup h2,#spaceSetup h2{font:700 clamp(22px,3vw,30px)/1.1 var(--o-display);letter-spacing:.2em;color:var(--st);margin:0 0 6px;text-shadow:0 0 14px color-mix(in srgb,var(--st),transparent 55%)}
#matchSetup p,#moveSetup p,#jeopardySetup p,#spaceSetup p{color:var(--o-dim);font-size:15px;line-height:1.5}
#matchSetupLesson,#moveSetupContext,#jeopardyContext,#spaceContext{font:13px/1.4 var(--o-mono)!important;letter-spacing:.06em;color:var(--o-ink)!important}
#matchSetup label,#moveSetup label,#jeopardySetup>label,#spaceSetup label{display:block;margin:14px 0 6px;font:12px/1.4 var(--o-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--o-dim)}
#jeopardySetup>label:has(input[type=checkbox]),#moveSetup label:has(input[type=checkbox]),#jeopardySetup fieldset label,#moveSetup fieldset label{text-transform:none;letter-spacing:.02em;font:15px/1.4 Arial,'Microsoft YaHei',sans-serif;color:var(--o-ink);margin:8px 0;display:flex;align-items:center;gap:10px}
#matchSetup select,#moveSetup select,#jeopardySetup select,#spaceSetup select{display:block;width:100%;margin-top:6px;padding:11px 12px;font:15px/1.3 Arial,'Microsoft YaHei',sans-serif;letter-spacing:0;text-transform:none;color:var(--o-ink);background:var(--o-void);border:1px solid var(--o-line);border-radius:2px}
#matchSetup select:focus-visible,#moveSetup select:focus-visible,#jeopardySetup select:focus-visible,#spaceSetup select:focus-visible{outline:2px solid var(--st);outline-offset:2px}
#moveSetup input[type=checkbox],#jeopardySetup input[type=checkbox],#spaceSetup input[type=checkbox]{accent-color:var(--st);width:20px;height:20px;margin:0;flex:none}
#moveSetup fieldset,#jeopardySetup fieldset,#spaceSetup fieldset{border:1px solid var(--o-line);border-radius:2px;padding:8px 14px;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0 16px;max-height:220px;overflow:auto}
#moveSetup legend,#jeopardySetup legend,#spaceSetup legend{font:12px/1 var(--o-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--o-dim);padding:0 6px}
#matchSetup summary,#moveSetup summary,#jeopardySetup summary,#spaceSetup summary{font:13px/1.4 var(--o-mono);letter-spacing:.08em;color:var(--st);margin:12px 0 6px}
#matchSetup details,#moveSetup details,#jeopardySetup details,#spaceSetup details{max-width:none}
#matchPairs,#moveQuestions,#jeopardyQuestions,#spaceQuestions{font-size:14px;color:var(--o-ink)}
#matchSetupStatus,#moveCounts,#jeopardyCounts,#spaceCounts{font:13px/1.5 var(--o-mono)!important;color:var(--st)!important;letter-spacing:.04em}
#matchSetup .actions,#moveSetup .actions,#jeopardySetup .actions,#spaceSetup .actions{background:var(--o-deck)!important;border-top:1px solid var(--o-line);justify-content:flex-end;gap:12px}
#matchSetup .actions button,#moveSetup .actions button,#jeopardySetup .actions button,#spaceSetup .actions button{font:700 13px/1 var(--o-mono);letter-spacing:.16em;padding:14px 20px;border-radius:2px;border:1px solid var(--o-line);background:transparent;color:var(--o-dim);box-shadow:none}
#matchSetup .actions button:last-child,#moveSetup .actions button:last-child,#jeopardySetup .actions button:last-child,#spaceSetup .actions button:last-child{
  background:var(--st);color:#020403;border-color:var(--st);padding-inline:28px;box-shadow:0 0 18px color-mix(in srgb,var(--st),transparent 60%)}
#matchSetup .actions button:last-child:disabled,#moveSetup .actions button:last-child:disabled,#jeopardySetup .actions button:last-child:disabled,#spaceSetup .actions button:last-child:disabled{background:transparent;color:var(--o-dim);border-color:var(--o-line);box-shadow:none}
#matchSetup .actions button:first-child,#moveSetup .actions button:first-child,#jeopardySetup .actions button:first-child,#spaceSetup .actions button:first-child{border-left:1px solid var(--o-line)}

/* Short glitch when a station opens */
#matchModule:not([hidden]),#moveModule:not([hidden]),#jeopardyModule:not([hidden]),#spaceModule:not([hidden]){animation:o-boot .42s steps(6,end)}
@keyframes o-boot{0%{clip-path:inset(48% 0 48% 0);filter:brightness(2.2)}35%{clip-path:inset(20% 0 64% 0)}55%{clip-path:inset(0 0 0 0);transform:translateX(-3px)}70%{transform:translateX(2px)}100%{clip-path:inset(0);filter:none;transform:none}}
@media(prefers-reduced-motion:reduce){#matchModule,#moveModule,#jeopardyModule,#spaceModule,#matchModule>header::before,#moveModule>header::before,#jeopardyModule>header::before,#spaceModule>header::before{animation:none!important}}
@media(max-width:540px){#matchModule>header::before,#moveModule>header::before,#jeopardyModule>header::before,#spaceModule>header::before{font-size:13px}#matchSetup,#moveSetup,#jeopardySetup,#spaceSetup{padding:18px}}