:root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color:#edf5ff;background:#0c1430;color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select,input{touch-action:manipulation}button{cursor:pointer;border:1px solid #60709c;background:#25365f;color:#fff;border-radius:14px;padding:12px 18px;min-height:44px;font-weight:700}button:hover{background:#344a7e}button:disabled{opacity:.5;cursor:default}.primary{background:#71e8d3;color:#102f3d;border:0}.primary:hover{background:#a3f6e6}:focus-visible{outline:3px solid #ffd985;outline-offset:4px}a{color:#8ee9e4}h1,h2,p{margin-top:0}h1{font-size:clamp(34px,5vw,62px);line-height:1.07;letter-spacing:-1.5px}h2{font-size:28px}.eyebrow{font-size:12px;letter-spacing:3px;font-weight:800;color:#9ce8e4;text-transform:uppercase}.muted{color:#b5c4df;line-height:1.6}.shell{max-width:1180px;margin:auto;padding:30px 24px}.hero{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:35px;padding:26px 0 40px}.hero p{max-width:510px}.hero-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:28px;border:1px solid #45537c;box-shadow:0 25px 50px #0006}.accent{color:#8ee9dc}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.space-between{justify-content:space-between}.tag{font-size:12px;font-weight:800;border:1px solid #56628a;border-radius:999px;padding:7px 12px;color:#d8d8ff}.settings{background:#182343;border:1px solid #354363;padding:20px;border-radius:22px;margin:15px 0 24px}.settings label{display:inline-flex;gap:8px;align-items:center;margin:8px 18px 8px 0}.settings select{padding:9px;border-radius:10px;background:#25365f;border:1px solid #60709c}.missions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.mission{text-align:left;min-height:150px;padding:20px;position:relative;background:linear-gradient(150deg,#263b61,#172343)}.mission strong{display:block;font-size:19px;margin:12px 0 8px}.mission small{display:block;color:#c0cde5}.mission .number{color:#8be4de;font-size:12px;letter-spacing:2px}.region{margin-top:30px}.gold{color:#ffdb87}.play-top{margin-bottom:16px}.hud{display:flex;gap:25px;flex-wrap:wrap}.hud small{display:block;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#b5c4df}.hud strong{font-size:24px}.stage{position:relative;height:460px;border:1px solid #45537c;border-radius:26px;overflow:hidden;background-color:#131f45;background-image:radial-gradient(circle at 15% 30%,#fcffffa0 1px,transparent 2px),radial-gradient(circle at 70% 15%,#fcffff80 1px,transparent 2px),radial-gradient(ellipse at 75% 80%,#664a8b65,transparent 55%);background-size:125px 135px,190px 180px,100% 100%;outline-offset:5px}.stage[data-region="1"]{background-color:#242048}.stage[data-region="2"]{background-color:#0c303f}.planet{position:absolute;right:-40px;top:25px;width:170px;height:170px;border-radius:50%;background:linear-gradient(140deg,#688db850,#33316f20);box-shadow:inset 15px -10px 0 #9eaeef10}.ship{position:absolute;bottom:8px;left:calc(50% - 35px);width:70px;height:70px}.horizon{position:absolute;bottom:60px;border-top:1px dashed #b7c7e050;width:100%}.pod{position:absolute;top:0;width:68px;height:68px;margin-left:-34px;background:#7de3d6;color:#142e45;border-radius:22px;display:grid;place-items:center;font-size:48px;font-weight:700;box-shadow:inset 0 -5px #0002,0 0 22px #73e6d622;will-change:transform;pointer-events:none}.pod.tone-1{background:#ffcf83}.pod.tone-2{background:#c4adff}.stationary .pod{top:32%;left:50%!important}.beam{position:absolute;left:50%;bottom:55px;width:4px;background:#8df7e2;transform-origin:bottom;box-shadow:0 0 15px #9ff9e5;border-radius:9px;pointer-events:none;animation:vanish .25s forwards}.spark{position:absolute;font-size:35px;color:#ffdf90;pointer-events:none;animation:pop .45s forwards}.wrong{animation:nudge .25s}.status{min-height:30px;color:#ffdc93;padding:8px 0}.keyboard{display:grid;grid-template-columns:repeat(13,1fr);gap:6px;margin-top:12px}.keyboard button{padding:8px 0;min-width:44px;font-size:20px}.keyboard.qwerty{display:flex;flex-direction:column;align-items:center}.key-row{display:flex;gap:6px;width:100%;justify-content:center}.key-row button{flex:1;max-width:64px}.keyboard button.pressed{background:#80e4d6;color:#17384b}.overlay{position:absolute;inset:0;background:#10172cee;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px;z-index:5;overflow:auto}.overlay h2{margin-bottom:8px}.overlay p{max-width:430px;font-size:18px;line-height:1.6}.result{max-width:780px;margin:25px auto;text-align:center;background:#192544;border:1px solid #45537c;border-radius:28px;padding:32px}.stars{font-size:46px;letter-spacing:10px;color:#ffd989;margin:20px 0}.stars span{display:inline-block}.stars .on{animation:star-pop .55s both}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:25px 0}.metric{padding:16px 8px;background:#253454;border-radius:15px}.metric strong{display:block;font-size:27px}.metric small{color:#bbcae3}.result .row{justify-content:center}details{text-align:left;margin:25px 0}table{width:100%;border-collapse:collapse}td,th{padding:10px;border-bottom:1px solid #435171;text-align:left}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:absolute;left:10px;top:-70px;z-index:20}.skip:focus{top:10px;background:#fff;color:#111;padding:10px}.high-contrast{--unused:0}.high-contrast .pod{background:#fff!important;color:#000;border:3px solid #ffde80}.high-contrast .stage{background:#000;background-image:none}.reduced .spark,.reduced .beam,.reduced .stars .on{animation:none}.reduced .wrong{animation:none}.reset-box{margin:24px 0;padding:15px;border:1px solid #667193;border-radius:15px}footer{margin-top:25px;font-size:13px;color:#b5c4df}@keyframes star-pop{0%{opacity:0;transform:scale(.2) rotate(-40deg)}70%{transform:scale(1.35) rotate(8deg)}to{opacity:1;transform:none}}@keyframes vanish{to{opacity:0}}@keyframes pop{to{opacity:0;transform:translateY(-25px) scale(1.3)}}@keyframes nudge{50%{box-shadow:inset 0 0 0 3px #ffcf83}}@media(max-width:800px){.hero{grid-template-columns:1fr 1fr}.missions{grid-template-columns:repeat(2,1fr)}.keyboard{grid-template-columns:repeat(9,1fr)}.metrics{grid-template-columns:repeat(2,1fr)}.hud{gap:15px}}@media(max-width:540px){.shell{padding:20px 12px}.hero{grid-template-columns:1fr;gap:5px}.hero-art{order:-1}.stage{height:345px}.pod{width:58px;height:58px;margin-left:-29px;font-size:42px}.keyboard{grid-template-columns:repeat(7,1fr);gap:5px}.keyboard button{min-width:0;padding:0;height:44px}.key-row{gap:4px}.mission{padding:15px}.hud strong{font-size:20px}.result{padding:24px 15px}.play-top .row{gap:7px}.play-top button{padding:10px}.settings label{display:flex}.hero h1{font-size:38px}}@media(prefers-reduced-motion:reduce){.spark,.beam,.wrong,.stars .on{animation:none}}
[hidden]{display:none!important}
/* Letters use Andika, a font designed for early readers: I and l, a and g are easy to tell apart. */
.pod,.keyboard button,.stage-prompt,#prompt,.mission small:first-of-type{font-family:Andika,ui-rounded,'Trebuchet MS',system-ui,sans-serif}
.pod{z-index:2}.pod.rescued{z-index:3}
.stage-prompt{position:absolute;left:14px;top:12px;z-index:1;padding:6px 14px;border-radius:14px;background:#0c1430cc;border:1px solid #56628a;font-size:26px;font-weight:700;color:#ffdb87;pointer-events:none}
.stage-prompt:empty{display:none}
.guide-line{display:flex;align-items:center;gap:12px;text-align:left;margin-bottom:12px}
.guide-line p{margin:0;max-width:none;font-size:16px;line-height:1.5}
.guide-line strong{color:#9ce8e4}
.guide{flex:none;width:52px;height:52px;filter:drop-shadow(0 6px 10px #0006)}
.overlay .guide-line{margin-bottom:6px}
.overlay .guide-line p{font-size:12px;letter-spacing:2px;font-weight:800;text-transform:uppercase}
.result .guide-line{justify-content:center;max-width:560px;margin:0 auto 8px}
.rewards{margin:0 auto 20px;padding:14px;border:1px dashed #ffd985;border-radius:18px;max-width:520px}
.rewards .eyebrow{color:#ffdb87;margin-bottom:8px}
.reward{display:inline-block;margin:4px;padding:8px 14px;border-radius:999px;background:#2c3a63;font-weight:800}
.hangar{margin-top:34px;background:#182343;border:1px solid #354363;padding:20px;border-radius:22px}
.hangar h3{margin:22px 0 10px}
.ships,.stickers{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.stickers{grid-template-columns:repeat(4,1fr)}
.ship-choice{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px}
.ship-choice[aria-pressed="true"]{border:2px solid #71e8d3;background:#1f4a5c}
.ship-choice small,.sticker small{color:#c0cde5;font-weight:600}
.ship-icon{width:54px;height:54px}
.sticker{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 8px;border-radius:16px;border:1px dashed #56628a;opacity:.6}
.sticker span{font-size:34px;color:#8ea0c7}
.sticker.earned{opacity:1;border-style:solid;border-color:#ffd985;background:#2a2f55}
.controls{margin-top:12px}
@media(max-width:800px){.ships{grid-template-columns:repeat(3,1fr)}.stickers{grid-template-columns:repeat(2,1fr)}}
/* Phones: keep the prompt, playfield and on-screen keys in one view. */
@media(max-width:540px){
  .play{padding-top:10px}
  .play-top{margin-bottom:8px}
  /* The in-stage prompt names the task, so the mode heading is kept for screen readers only. */
  .play-top>div:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .play-top .row{width:100%;flex-wrap:nowrap;gap:6px}
  .play-top .row button{flex:1}
  .hud-mission{display:none}
  .status{position:absolute;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .play-top button{padding:8px 10px;min-height:40px;font-size:14px}
  .hud{gap:12px;margin-bottom:8px}
  .hud small{font-size:10px}
  .hud strong{font-size:17px}
  .keys-on .stage{height:clamp(220px,calc(100svh - 470px),345px)}
  .stage-prompt{font-size:22px}
  .ship{width:56px;height:56px;left:calc(50% - 28px)}
  .controls{margin-top:8px}
  .controls{flex-wrap:nowrap;gap:8px}
  .controls button{flex:1;padding:8px 10px;min-height:40px;font-size:13px}
  .overlay{padding:14px}
  .overlay h2{font-size:21px}
  .overlay p{font-size:15px;line-height:1.45}
  .overlay .guide{width:40px;height:40px}
  .ships{grid-template-columns:repeat(2,1fr)}
}
/* QWERTY: every key shares the top row's width so shorter rows sit centred, like a phone keyboard. */
.keyboard.qwerty{--gap:6px;gap:var(--gap)}
.keyboard.qwerty .key-row{gap:var(--gap)}
.keyboard.qwerty .key-row button{flex:0 1 calc((100% - 9 * var(--gap)) / 10);min-width:0;max-width:64px}
@media(max-width:540px){.keys-on:has(.keyboard.qwerty) .stage{height:clamp(190px,calc(100svh - 370px),345px)}.keyboard.qwerty{--gap:4px;margin-top:8px}.keyboard.qwerty .key-row button{height:46px;font-size:19px}}
/* Landscape phones: playfield on the left, controls and keys on the right, so both fit without scrolling. */
@media(orientation:landscape) and (max-height:500px){
  .play{display:grid;grid-template-columns:minmax(0,1fr) min(46%,420px);column-gap:14px;row-gap:8px;align-items:start;padding:8px 16px}
  .play-top{grid-column:2;grid-row:1;margin:0}
  .play-top>div:first-child,.status{position:absolute;width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .play-top .row{width:100%;flex-wrap:nowrap;gap:6px}
  .play-top .row button{flex:1;padding:6px 8px;min-height:38px;font-size:13px}
  .hud{grid-column:1;grid-row:1;gap:14px;align-self:center}
  .hud small{font-size:10px}.hud strong{font-size:17px}.hud-mission{display:none}
  .stage,.keys-on .stage{grid-column:1;grid-row:2/span 2;height:max(170px,calc(100svh - 135px))}
  .controls{grid-column:2;grid-row:2;margin:0;flex-wrap:nowrap;gap:6px}
  .controls button{flex:1;padding:6px 8px;min-height:38px;font-size:13px}
  .keyboard,.keyboard.qwerty{grid-column:2;grid-row:3;margin:0;--gap:4px}
  .keyboard.qwerty .key-row button{height:42px;font-size:18px}
  .overlay{padding:10px}.overlay h2{font-size:19px}.overlay p{font-size:14px;line-height:1.4;margin-bottom:8px}.overlay .guide{width:36px;height:36px}
}