/* Galaxy Voyage cockpit */
.galaxy-game .stage{background:#02020a}
.galaxy-game .topbar{background:#0d1030e6;border-color:#2d3370;color:#eef0ff}
.galaxy-game .topbar h1,.galaxy-game .topbar p,.galaxy-game .brand span{color:#eef0ff}
.galaxy-game .game-footer{background:#090b22;color:#aab0e0}
.galaxy-ui{position:absolute;inset:0;pointer-events:none;z-index:4;color:#eef2ff}
.galaxy-ui button{font-family:inherit;pointer-events:auto;cursor:pointer}
.galaxy-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.galaxy-label{position:absolute;left:0;top:0;pointer-events:auto;border:2px solid #ffffff55;background:#0f1640c4;color:#fff;border-radius:16px;padding:4px 11px 4px 7px;font:800 12px/1.2 inherit;font-family:inherit;white-space:nowrap;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s}
.galaxy-label span{margin-right:5px}
.galaxy-label:hover{background:#2b3aa0}
.galaxy-label.stamped::after{content:' ✓';color:#8ff5b5}
.galaxy-label.target{background:#ff7a3d;border-color:#ffd2b3}
.galaxy-mission{position:absolute;left:26px;top:104px;width:min(340px,calc(100% - 52px));pointer-events:auto;background:linear-gradient(160deg,#1b2370ee,#2b1660ee);border:3px solid #8fa6ff66;border-radius:24px;padding:14px 16px;box-shadow:0 8px 30px #0008}
.galaxy-kicker{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#ffd36b}
.galaxy-riddle{margin:8px 0 10px;font-size:16px;line-height:1.45;font-weight:800}
.galaxy-hint{margin:0 0 10px;font-size:13px;color:#c9d4ff}
.galaxy-go{border:0;border-radius:14px;padding:9px 14px;font-weight:900;font-size:13px;background:linear-gradient(180deg,#ffd36b,#ff9d3c);color:#3a1d00}
.galaxy-go.ghost{background:#ffffff1f;color:#fff;border:2px solid #ffffff44}
.galaxy-hud{position:absolute;top:104px;right:26px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.galaxy-pill{display:flex;gap:12px;align-items:center;border:3px solid #ffffff55;background:#0f1640d9;color:#fff;border-radius:22px;padding:8px 14px;font-size:13px;backdrop-filter:blur(8px)}
.galaxy-pill b{font-size:20px}.galaxy-pill small{opacity:.7}.galaxy-pill em{font-style:normal;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;background:#ffd36b;color:#3a1d00;border-radius:10px;padding:4px 8px}
.galaxy-rank{background:#0f1640c9;border:2px solid #ffffff33;border-radius:16px;padding:6px 12px;font-size:13px;display:flex;flex-direction:column;align-items:flex-end}
.galaxy-rank small{font-size:11px;color:#b9c3ff}
.galaxy-status{background:#0f1640c9;border:2px solid #ffffff33;border-radius:14px;padding:6px 12px;font-size:12px;font-weight:800}
.galaxy-controls{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.galaxy-controls button{border:3px solid #ffffff66;border-radius:20px;padding:11px 18px;font-weight:900;font-size:15px;color:#fff;background:linear-gradient(180deg,#3d55e0,#2a2f9e);box-shadow:0 5px 0 #14185a,0 12px 30px #0007;transition:transform .12s}
.galaxy-controls button:hover{transform:translateY(-2px)}
.galaxy-controls button:active{transform:translateY(2px);box-shadow:0 2px 0 #14185a}
#galaxy-boost{background:linear-gradient(180deg,#ff8a4c,#e2451f);box-shadow:0 5px 0 #7a1d06,0 12px 30px #0007}
#galaxy-warp{background:linear-gradient(180deg,#b86bff,#6a2fd8);box-shadow:0 5px 0 #34106f,0 12px 30px #0007}
#galaxy-warp.locked{filter:grayscale(.6) brightness(.85)}
.galaxy-pad{position:absolute;left:26px;bottom:22px;display:grid;grid-template:repeat(2,46px)/repeat(3,46px);gap:6px}
.galaxy-pad button{border:2px solid #ffffff55;background:#0f1640c9;color:#fff;border-radius:14px;font-size:16px}
.galaxy-pad [data-key=arrowup]{grid-column:2}.galaxy-pad [data-key=arrowleft]{grid-column:1;grid-row:2}.galaxy-pad [data-key=arrowdown]{grid-column:2;grid-row:2}.galaxy-pad [data-key=arrowright]{grid-column:3;grid-row:2}
.galaxy-card{left:auto;right:26px;bottom:96px;width:min(380px,calc(100% - 52px))}
.galaxy-stats{list-style:none;padding:0;margin:10px 0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.galaxy-stats li{background:#eef3ff;border-radius:10px;padding:6px 8px;display:flex;flex-direction:column}
.galaxy-stats span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#5b6aa8;font-weight:900}.galaxy-stats b{font-size:13px;color:#1d2a5c}
.galaxy-stats.small li{padding:4px 6px}.galaxy-stats.small b{font-size:11px}
.galaxy-facts{margin:6px 0 8px;padding-left:18px;font-size:13px;line-height:1.5;color:#2f3d64}
.galaxy-stamp.stamp-in{animation:stampIn .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes stampIn{0%{transform:scale(2.6) rotate(-25deg);opacity:0}60%{transform:scale(.9) rotate(6deg);opacity:1}100%{transform:none}}
.chart-head{margin:12px 0 8px;font-size:14px;color:#3a4a7a}
.chart-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.chart-place{display:flex;align-items:center;gap:10px;border:2px solid #e2e6f5;background:#fff;border-radius:16px;padding:9px 12px;font-family:inherit;cursor:pointer;text-align:left;color:#22305c}
.chart-place:hover{border-color:#7b8cff}.chart-place.done{background:#f1fff5;border-color:#a6e8bb}.chart-place:disabled{opacity:.5;cursor:not-allowed}
.chart-emoji{font-size:26px}.chart-place span:nth-child(2){display:flex;flex-direction:column;flex:1}.chart-place small{color:#6c7aa8;font-size:11px}.chart-place em{font-style:normal;font-weight:900;font-size:12px;color:#4b3fd1}
.passport-stamp{border:3px dashed #9fb2ff}
.galaxy-feature{position:relative;display:flex;align-items:center;gap:22px;border:0;width:100%;text-align:left;cursor:pointer;margin:0 0 16px;padding:22px 26px;border-radius:26px;color:#fff;font-family:inherit;overflow:hidden;background:radial-gradient(circle at 85% 30%,#ff9d3c55,transparent 30%),radial-gradient(circle at 70% 80%,#b86bff66,transparent 40%),linear-gradient(120deg,#0b0f35,#24125a 60%,#0b2a5a);box-shadow:0 8px 0 #0a0c2a33,0 20px 40px #1b1f6a33;transition:transform .15s}
.galaxy-feature:hover{transform:translateY(-3px)}
.galaxy-feature .gf-planets{font-size:54px;letter-spacing:-12px;filter:drop-shadow(0 6px 10px #0008)}
.galaxy-feature h3{margin:4px 0;font-size:24px}.galaxy-feature p{margin:0;color:#cfd6ff;font-size:14px}
.galaxy-feature .gf-tag{font-size:11px;font-weight:900;letter-spacing:.1em;background:#ffd36b;color:#3a1d00;border-radius:10px;padding:4px 9px}
.galaxy-feature .gf-go{margin-left:auto;background:#ffd36b;color:#3a1d00;font-weight:900;border-radius:16px;padding:12px 18px;white-space:nowrap}
.galaxy-feature::after{content:'';position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1.5px),radial-gradient(#fff 1px,transparent 1.5px);background-size:60px 60px,90px 90px;background-position:0 0,30px 40px;opacity:.35;pointer-events:none}
@media(max-width:800px){
  .galaxy-mission{left:12px;top:86px;padding:10px 12px}.galaxy-riddle{font-size:14px}
  .galaxy-hud{top:auto;bottom:150px;right:12px}.galaxy-rank,.galaxy-status{display:none}
  .galaxy-controls{bottom:12px;left:auto;right:12px;transform:none;gap:6px}.galaxy-controls button{padding:9px 11px;font-size:13px}.galaxy-controls span{display:none}
  .galaxy-pad{left:12px;bottom:12px}
  .galaxy-label{font-size:10.5px;padding:3px 8px 3px 5px}
  .galaxy-card{right:12px;left:12px;width:auto;bottom:150px}
  .galaxy-feature{flex-wrap:wrap}.galaxy-feature .gf-go{margin-left:0}
}

/* Expansion: quizzes, radar, mysteries */
.galaxy-quiz{background:#f1f4ff;border-radius:14px;padding:10px 12px;margin:6px 0 10px;color:#22305c}
.galaxy-quiz b{font-size:13px;display:block;margin-bottom:8px}
.galaxy-quiz.done{font-weight:900;font-size:13px;color:#2f7a5a;background:#e8f8ee}
.quiz-options{display:flex;flex-direction:column;gap:6px}
.quiz-options button{border:2px solid #cfd8ff;background:#fff;border-radius:12px;padding:7px 10px;font:700 13px inherit;font-family:inherit;text-align:left;cursor:pointer;color:#22305c;transition:transform .1s}
.quiz-options button:hover:not(:disabled){transform:translateX(3px);border-color:#7b8cff}
.quiz-options button.right{background:#c9f5d6;border-color:#3cbf6e}.quiz-options button.wrong{background:#ffe0e0;border-color:#ff8a8a;opacity:.7}
.quiz-feedback{margin:8px 0 0;font-size:12.5px;font-weight:700;color:#4b3fd1;min-height:1em}
.galaxy-radar{display:flex;align-items:center;gap:8px;background:#062a22e6;border:2px solid #8fffd0;border-radius:14px;padding:6px 12px;font-size:12px;font-weight:800;color:#c9fff0;animation:radarGlow 1.2s ease-in-out infinite}
.galaxy-radar b{color:#fff}
.radar-bars{display:flex;gap:2px;align-items:flex-end;height:16px}
.radar-bars em{width:4px;background:#ffffff33;border-radius:2px}
.radar-bars em:nth-child(1){height:4px}.radar-bars em:nth-child(2){height:7px}.radar-bars em:nth-child(3){height:10px}.radar-bars em:nth-child(4){height:13px}.radar-bars em:nth-child(5){height:16px}
.radar-bars em.on{background:#8fffd0;box-shadow:0 0 6px #8fffd0}
@keyframes radarGlow{50%{box-shadow:0 0 0 5px #8fffd033}}
@media(max-width:800px){.galaxy-pill .g-extra{display:none}.galaxy-hud .galaxy-radar{display:flex}}

/* Reading stops the rocket; Star Gazer */
.galaxy-continue{display:block;width:100%;margin-top:10px;border:0;border-radius:14px;padding:11px;font:900 15px inherit;font-family:inherit;color:#3a1d00;background:linear-gradient(180deg,#ffd36b,#ff9d3c);box-shadow:0 4px 0 #b9661c;cursor:pointer}
.galaxy-continue:active{transform:translateY(2px);box-shadow:0 2px 0 #b9661c}
.galaxy-card{max-height:calc(100% - 200px);overflow:auto}
.fact-card.mission{background:linear-gradient(170deg,#fffef6 55%,#ffe9c4)}
.galaxy-riddle.dark{color:#2b2060;font-size:17px}
.size-pic{display:flex;align-items:center;gap:10px;background:#f4f7ff;border-radius:12px;padding:6px 10px;margin:6px 0}
.size-pic svg{width:150px;flex:none}.size-pic text{font-size:10px;fill:#4a5a8a;font-weight:800}.size-pic span{font-size:12px;font-weight:700;color:#2f3d64}
#galaxy-stars{background:linear-gradient(180deg,#2fc4b2,#16857a);box-shadow:0 5px 0 #0b4a44,0 12px 30px #0007}
.stargazer{position:absolute;inset:0;z-index:8;background:radial-gradient(circle at 50% 30%,#1a2160f2,#05061cf7);color:#eef2ff;padding:92px 24px 18px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.sg-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.sg-head h2{margin:0 0 4px;font-size:24px}.sg-head p{margin:0;max-width:760px;color:#cdd6ff;font-size:14px}
.sg-close{background:#ffffff22;color:#fff;border:0}
.sg-body{display:flex;gap:14px;flex:1;min-height:0}
.sg-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:300px;align-content:start}
.sg-list button{border:2px solid #ffffff33;background:#ffffff12;border-radius:14px;padding:6px;color:#fff;font:800 12px inherit;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px}
.sg-list button.active{border-color:#ffd36b;background:#ffd36b22}.sg-list button.done span{color:#8ff5b5}
.shape-thumb{width:100%;height:60px}.shape-thumb line{stroke:#8fc8ff;stroke-width:2}.shape-thumb circle{fill:#fff}
.album-card .shape-thumb{background:#0d1340;border-radius:10px;height:80px}
.sg-main{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.sg-sky{width:100%;max-height:52vh;background:radial-gradient(circle,#0e1450,#03041a);border-radius:22px;border:2px solid #ffffff22}
.sg-dust{fill:#fff;opacity:.5;animation:sgTwinkle 3s ease-in-out infinite}
@keyframes sgTwinkle{50%{opacity:.15}}
.sg-star{cursor:pointer}.sg-halo{fill:#9fd8ff;opacity:.12;transition:opacity .3s}.sg-core{fill:#c9d6ff;transition:fill .3s}
.sg-star:hover .sg-halo{opacity:.35}.sg-star.on .sg-halo{opacity:.55;fill:#ffe9a6}.sg-star.on .sg-core{fill:#fff}
.sg-star:focus-visible{outline:none}.sg-star:focus-visible .sg-halo{opacity:.6;stroke:#ffd36b;stroke-width:3}
.sg-lines line{stroke:#9fd0ff;stroke-width:3;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:sgDraw .6s ease-out forwards}
@keyframes sgDraw{to{stroke-dashoffset:0}}
.sg-panel{background:#ffffff12;border-radius:18px;padding:12px 16px;min-height:80px}
.sg-step{margin:0;font-size:15px;font-weight:800}.sg-count{margin-left:8px;background:#ffd36b;color:#3a1d00;border-radius:10px;padding:2px 8px}
.sg-options{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.sg-options button{border:2px solid #ffffff55;background:#ffffff1a;color:#fff;border-radius:14px;padding:9px 14px;font:800 14px inherit;font-family:inherit;cursor:pointer}
.sg-options button.wrong{opacity:.45}
.sg-reveal h3{margin:0 0 6px;color:#ffd36b}.sg-reveal .galaxy-facts{color:#e4e9ff}.sg-find{font-size:13.5px;color:#cfe4ff}
.sg-reveal .fact-read{border:0;background:#ffffff22;color:#fff;border-radius:12px;padding:7px 12px;font-weight:800;cursor:pointer}
.sg-colours{margin:0;font-size:12.5px;color:#cdd6ff;background:#ffffff0f;border-radius:12px;padding:8px 12px}
@media(max-width:800px){.stargazer{padding:76px 10px 10px}.sg-body{flex-direction:column}.sg-list{width:auto;grid-template-columns:repeat(4,1fr)}.sg-list span{font-size:10px}.shape-thumb{height:40px}}
/* Tablets: banners sit at the bottom-left so they never cover the mission, counters or a briefing card. */
@media(min-width:801px){.galaxy-ui .quest-banner{top:auto;bottom:100px;left:26px;transform:none;max-width:min(520px,calc(100% - 460px));animation-name:bannerUp}}
@media(max-width:800px){.galaxy-card{top:auto}.galaxy-controls{bottom:34px}}
.galaxy-ui:has(.galaxy-card:not([hidden])) .galaxy-hud>:not(:first-child){visibility:hidden}
@media(max-width:800px){.galaxy-ui .quest-banner{top:236px;bottom:auto}}
/* A real shot of the voyage sits behind the banner, darkened on the left so the words stay readable. */
.galaxy-feature{background:linear-gradient(90deg,#0b0f35f2 0%,#0b0f35d9 45%,#0b0f3555 100%),url('./assets/covers/galaxy.webp') center/cover,#0b0f35}