@font-face{font-family:Plex;src:url('/assets/ibm-plex-sans.woff2') format('woff2');font-display:swap;font-weight:100 700}
:root{color-scheme:light;--bg:#fff;--panel:#fff;--ink:#14263a;--muted:#425770;--edge:#a3b4c5;--line:#d8e2ec;--accent:#995000;--blue:#03658b;--control:#f5f8fc;--input:#fff;--error:#a32619;--gutter:clamp(1.1rem,4vw,3rem);--body:Plex,system-ui,sans-serif;font-family:var(--body)}
*{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100vh;color:var(--ink);background:var(--bg)}
body:is([data-page=host],[data-page=student],[data-page=display]){color-scheme:dark;--bg:#0d1726;--panel:#162538;--ink:#f5f1e6;--muted:#b9cbdc;--edge:#42617b;--line:#39536b;--accent:#ffd490;--blue:#97def3;--control:#101f31;--input:#0d1929;--error:#ffb9ad}
button,input,select,textarea{font:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
a{color:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
main:focus{outline:none}
p{color:var(--muted);line-height:1.55;margin:.5rem 0 1.15rem}
h1,h2{margin:0;line-height:1.04}
h1{font:700 clamp(2.15rem,4.4vw,3.6rem)/1.08 var(--body);letter-spacing:-.035em}
h2{font:650 clamp(1.35rem,2.5vw,1.8rem)/1.18 var(--body);letter-spacing:-.02em}
.top,main,footer{max-width:78rem;margin:auto;padding-inline:var(--gutter)}
.top{display:flex;justify-content:space-between;align-items:center;gap:1.1rem;min-height:4.4rem;border-bottom:1px solid var(--line)}
.top nav,.actions,.fields{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.top nav{gap:clamp(.65rem,3vw,1.8rem)}
.top a{text-decoration:none}
.brand{display:flex;align-items:center;gap:.7rem;font:700 1.4rem/1 var(--body);letter-spacing:-.035em;white-space:nowrap}
.mark{position:relative;display:inline-block;width:1.08rem;height:1.08rem;border:2px solid var(--blue);border-radius:50%;transform:rotate(-35deg)}
.mark::after{content:"";position:absolute;inset:24% -37%;border:1px solid var(--blue);border-radius:50%}
.primary,.outline,.small{display:inline-flex;align-items:center;justify-content:center;min-height:2.8rem;padding:.55rem 1rem;border-radius:.18rem;font-weight:650;text-decoration:none;line-height:1.2}
.primary{background:#ffd490;color:#192131;border:1px solid #ffd490}
.outline,.small{background:var(--control);color:var(--ink);border:1px solid var(--edge)}
.primary:hover:enabled,a.primary:hover{background:#ffe3b5}
.outline:hover:enabled,a.outline:hover,.small:hover:enabled{border-color:var(--blue);color:var(--blue)}
.small{min-height:2rem;font-size:.86rem;padding:.25rem .65rem}
.hero{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;
  position:relative;isolation:isolate;overflow:hidden;margin-inline:calc(-1 * var(--gutter));
  padding-inline:var(--gutter);min-height:clamp(25rem,43vw,35rem);
  background:#060710;color:#f4f1ea
}
.hero-copy{position:relative;z-index:1;padding:2.6rem 0}
.game-wordmark{display:block;width:min(100%,22rem);height:auto;image-rendering:pixelated}
.hero-copy > p:not(.error){max-width:33ch;color:#d2d9e5;font-size:clamp(1.06rem,1.5vw,1.22rem);margin:1.25rem 0 1.55rem}
.hero-copy .actions{gap:.65rem}
.hero .outline{background:#101624;color:#e9eff8;border-color:#67778f}
.hero .outline:hover:enabled{border-color:#96e4fb;color:#bcefff}
.hero .error{color:#ffc4b8}
.hero :focus-visible{outline-color:#97def3}
.hero-scene{align-self:stretch;display:grid;place-items:center;min-width:0;margin-inline:-1.5rem calc(-1 * var(--gutter));mask-image:linear-gradient(90deg,transparent,#000 22%,#000 92%,transparent)}
.mission-scene{border:1px solid #344e65;background:#060710;position:relative;overflow:hidden}
.orbit{display:block;width:100%;height:auto;image-rendering:pixelated}
.lesson-flow{padding-block:clamp(2.35rem,5vw,4rem);border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem clamp(1.3rem,4vw,3.25rem);margin:1.3rem 0 0;padding-left:1.35rem}
.steps li::marker{color:var(--accent);font-size:.94rem;font-weight:700}
.steps h3,.home-games h3{font-size:1.03rem;line-height:1.4;margin:0}
.steps p,.home-games li p{margin:.3rem 0 0}
.plans{display:grid;gap:1.35rem}
.home-games{padding-block:clamp(2.35rem,5vw,4rem) 0}
.home-games ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem;margin:1.15rem 0 0;padding:0;list-style:none}
.home-games li{border-top:2px solid var(--line);padding-top:.85rem}
.home-games li button{margin-top:.85rem}
footer{color:var(--muted);margin-top:3.25rem;padding-block:1.2rem;border-top:1px solid var(--line);font-size:.85rem}
.page{padding-top:3rem}
.page h1{overflow-wrap:anywhere}
.page > p{margin-top:1rem}
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:.24rem;padding:clamp(1rem,3vw,1.55rem);min-width:0}
.panel li{color:var(--muted);margin:.5rem 0}
.panel ul{padding-left:1.2rem}
.plans,.editor,.narrow .panel{margin-top:1.45rem}
.plans{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;max-width:62rem}
.plans .panel{border-color:var(--line)}
.plans .panel:nth-child(2){border-color:var(--edge)}
.plan-prices{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.65rem .85rem;border-block:1px solid var(--line);padding-block:1rem;margin-block:1rem}
.plan-prices p{grid-column:1;margin:0}
.plan-prices strong{color:var(--ink);font-variant-numeric:tabular-nums}
.plan-prices button{grid-column:2}
.billing-message{margin:.65rem 0}
.billing-message:empty{margin:0}
#billing-signin,#billing-portal,#billing-retry{margin-top:.65rem}
.editor{max-width:57rem}
label{display:grid;gap:.38rem;font-weight:550;min-width:0}
input,textarea,select{border:1px solid var(--edge);border-radius:.25rem;background:var(--input);color:var(--ink);width:100%;min-height:2.75rem;padding:.58rem .7rem}
textarea{resize:vertical;line-height:1.5}
input::placeholder,textarea::placeholder{color:var(--muted)}
.fields{align-items:end;margin-block:1rem}
.fields label{flex:1}
.import-fields label:first-child{flex:1.45}
.import-help{font-size:.94rem;margin:.2rem 0 .75rem}
.editor .actions{margin-top:1rem}
#starter-pack-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));gap:.9rem;list-style:none;margin:.7rem 0 1.2rem;padding:0}
#starter-pack-list li{display:flex;flex-direction:column;align-items:flex-start;border:1px solid var(--line);background:var(--panel);padding:1rem}
#starter-pack-list h3{margin:0}
#starter-pack-list p{flex:1;margin:.55rem 0 .8rem;color:var(--muted)}
.game-setup{border-top:1px solid var(--line);margin-top:1.25rem;padding-top:1.1rem}
.game-setup label{max-width:22rem}
.game-setup .shuffle-option{display:flex;align-items:center;gap:.55rem;margin:.8rem 0 1rem;max-width:none}
.shuffle-option input{width:1.12rem;height:1.12rem;min-height:0;padding:0;accent-color:var(--blue)}
.teacher-page{max-width:57rem}
.teacher-auth{max-width:31rem;margin-top:1.45rem}
#account-security-form{margin-top:0}
#account-link-form label + label,#account-link-form button{margin-top:1rem}
.teacher-auth label + label,.teacher-auth .actions{margin-top:1rem}
.field-hint{font-size:.94rem;margin:.35rem 0 1rem}
.teacher-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.teacher-bar p{margin:0;overflow-wrap:anywhere}
#teacher-workspace > .teacher-bar{margin-top:1.15rem}
.workspace-section{margin-top:1.45rem;border-top:1px solid var(--line);padding-top:1.1rem}
.lesson-list{list-style:none;padding:0;margin:.65rem 0 0}
.lesson-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.45rem .8rem;border-top:1px solid var(--line);padding:.65rem 0}
.lesson-list li > div{flex:1 1 15rem;overflow-wrap:anywhere}
.lesson-list li > .lesson-actions{flex:0 1 auto}
.lesson-list p{margin:.15rem 0 0;font-size:.94rem}
#lessons-takeover{margin:.45rem 0 0}
#lessons-status:empty,#lessons-error:empty{display:block;margin:0}
.lesson-list:empty{margin:0}
#archive-status:empty,#report-save-status:empty{display:none}
#archived-report{margin-top:1rem}
.saved-list{display:grid;gap:.45rem;list-style:none;padding:0;margin:.65rem 0 0}
.saved-list:empty,.editor-status:empty,#teacher-status:empty,#saved-status:empty{display:none}
.saved-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.45rem}
.saved-list li > button:first-child{justify-content:start;text-align:start;overflow-wrap:anywhere}
.saved-list button[aria-current=true]{border-color:var(--blue);color:var(--blue)}
#lessons-retry,#saved-retry,#teacher-retry,#local-sets{margin-top:.65rem}
#local-sets summary,#rejoin-options summary,#transfer-options summary,#account-security summary,#report-archive summary{cursor:pointer;width:fit-content;min-height:2.8rem;padding-block:.55rem}
.editor-status{margin:.65rem 0 0;color:var(--blue)}
.error{color:var(--error);margin:.65rem 0 0}
.error:empty{display:none}
.narrow{max-width:30rem;margin-inline:auto}
.narrow .panel button{margin-top:1rem}
table{width:100%;border-collapse:collapse;margin-top:.6rem;text-align:start;overflow-wrap:anywhere}
th,td{padding:.55rem .4rem;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
#preview-cards h2{margin-top:1.45rem}
#preview-cards td:last-child{width:1%;white-space:nowrap}
#card-editor{color:var(--ink);background:var(--panel);border:1px solid var(--edge);border-radius:.24rem;width:min(31rem,calc(100% - 2rem));max-height:calc(100dvh - 2rem);padding:clamp(.9rem,3vw,1.5rem)}
#card-editor::backdrop{background:#0c172ab0}
#card-edit-form{display:grid;gap:.85rem;margin-top:.9rem}
#card-edit-form textarea{resize:vertical;min-height:2.6rem}
#card-edit-alternatives{display:grid;gap:.55rem;border:1px solid var(--line);min-width:0;padding:.65rem}
#card-edit-alternatives legend{padding-inline:.3rem;font-weight:650}
.mission-top{display:flex;align-items:start;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}
.game-name{margin:0 0 .45rem;font-size:.95rem;font-weight:650;color:var(--blue)}
.game-name:empty,.student-objective:empty{display:none}
.student-objective{margin:0;max-width:60ch}
.student-objective strong{color:var(--blue)}
.mission-result{color:#a4f6c8;font-size:clamp(1.05rem,2.4vw,1.55rem);font-weight:650;margin:.3rem 0 0}
.mission-result:empty,.projector-header .mission-result:empty{margin:0}
.room-id{display:grid;justify-items:start;gap:.2rem;flex:none}
.room-id strong{font-size:clamp(1.4rem,4vw,2rem);font-variant-numeric:tabular-nums;letter-spacing:.12em;color:var(--accent)}
.room-id span{color:var(--muted)}
#join-display{width:min(26rem,calc(100% - 2rem));max-height:calc(100% - 2rem);overflow:auto;border:1px solid var(--line);padding:1.2rem;background:var(--panel);color:var(--ink);text-align:center}
#join-display::backdrop{background:rgba(5,10,20,.78)}
#join-display h2{margin:0}
#join-display-code{display:block;margin:.55rem 0;font-size:clamp(1.65rem,7vw,2.5rem);letter-spacing:.14em;color:var(--accent)}
#join-qr{width:min(100%,18rem);height:auto;image-rendering:pixelated;display:block;margin:.65rem auto}
#join-qr[hidden]{display:none}
#join-qr-error:empty{margin:0}
#join-display .actions{justify-content:center;margin-top:.85rem}
body[data-page=display] :is(.top,footer){display:none}
.projector{padding-block:clamp(1rem,5vw,3rem)}
.projector-header h1{font-size:clamp(1.9rem,4.5vw,3.65rem);margin:.25rem 0;overflow-wrap:anywhere}
.projector-header p{margin:.35rem 0}
.projector-meta{display:flex;flex-wrap:wrap;gap:0 1.1rem}
#projector-status{color:var(--ink)}
.projector-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:1rem;margin-top:1.2rem;align-items:start}
.projector-grid:has(#projector-entry[hidden]){grid-template-columns:1fr}
.projector-grid .orbit{max-height:60svh;object-fit:contain}
.projector-room{align-self:center;text-align:center}
.projector-room strong{display:block;font-size:clamp(1.7rem,5vw,3rem);letter-spacing:.12em;color:var(--accent);margin:.4rem 0}
#projector-qr:not([hidden]){display:block;width:min(100%,16rem);height:auto;image-rendering:pixelated;margin:.6rem auto}
#projector-score{font-size:clamp(1rem,2.5vw,1.6rem);margin:0}
@media(max-width:620px){.projector-grid{grid-template-columns:1fr}.projector-room{grid-row:1}}
.mission-grid{display:grid;grid-template-columns:1fr .88fr;gap:1.15rem;align-items:start}
.student-grid{grid-template-columns:1fr 1fr}
.mission-score{position:relative;background:#0b1423;border-top:1px solid #314760;padding:.55rem .85rem}
.mission-score strong{color:var(--blue);font-size:1.25rem}
#players{list-style:none;padding-left:0}
#players li{display:flex;align-items:center;justify-content:space-between;gap:.5rem;border-top:1px solid #446078;padding-top:.5rem}
#report{margin-top:1.15rem}
#report .actions:has(button:not([hidden])){margin-top:1rem}
.answer-panel h2{overflow-wrap:anywhere}
#student-pause:empty{margin:0}
.answer-panel .actions{margin-top:.8rem}
.accent-keys summary{cursor:pointer;width:fit-content;min-height:2.75rem;padding-block:.55rem}
.accent-keys>div{display:flex;flex-wrap:wrap;gap:.3rem}
.accent-keys button{min-width:2.75rem;min-height:2.75rem;padding:.3rem}
.feedback{margin-block:.8rem;overflow-wrap:anywhere;color:var(--accent)}
.feedback.correct{color:var(--blue)}
#student-retry{color:var(--accent);font-size:.9rem;font-weight:650;margin:.35rem 0 .6rem}
.jump{position:absolute;left:1rem;top:-4rem;background:var(--accent);color:#192131;padding:.55rem;z-index:2}
.jump:focus{top:.5rem}
@media(max-width:720px){
  .hero,.mission-grid{grid-template-columns:1fr}
  .hero{gap:0;min-height:0}
  .hero-copy{padding:2.15rem 0 0}
  .game-wordmark{width:min(100%,16.5rem)}
  .hero-scene{width:min(100%,31rem);justify-self:center;margin:-.6rem 0 0;mask-image:none}
  .hero-scene .orbit{max-height:19rem;object-fit:contain}
  .mission-scene canvas{max-height:19rem;object-fit:contain}
  .steps,.plans{grid-template-columns:1fr;gap:1.05rem}
  .steps p{max-width:none}
  .home-games ul{grid-template-columns:1fr;gap:1.15rem}
  .top{min-height:4.5rem}
}
@media(max-width:350px){
  .plan-prices{grid-template-columns:1fr}
  .plan-prices button{grid-column:1;justify-self:start}
}
@media(max-width:480px){
  .top{flex-wrap:wrap;gap:.65rem 1.25rem;padding-block:.85rem}
  .top nav{gap:.85rem;font-size:.91rem}
  .top nav .outline{padding:.4rem .65rem}
  .brand{font-size:1.3rem;gap:.55rem}.mark{width:.85rem;height:.85rem}
}
@media(max-width:420px){
  .fields label,.import-fields label:first-child{flex:1 1 100%}
  .mission-top{flex-direction:column}
}