/* Direction: deep-space arcade — midnight indigo canvas, alien-green accent, candy gems */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  color-scheme: dark;
  --canvas: #0b1024;
  --surface: #141b3a;
  --surface-2: #1d2752;
  --border: #2d3970;
  --border-strong: #545866;
  --ink: #e9eeff;
  --muted: #a3aedd;
  --accent: #3ddc84;
  --accent-hover: #5ae196;
  --accent-ink: #0b1024;
  --accent-text: #6cf0a6;
  --accent-strong: #3ddc84;
  --accent-soft: #163d39;
  --accent-border: #226c4f;
  --success: #3ddc84;
  --success-ink: #ffffff;
  --success-soft: #163d39;
  --success-strong: #3ddc84;
  --warning: #ffc83d;
  --warning-ink: #ffffff;
  --warning-soft: #41382a;
  --warning-strong: #ffc83d;
  --danger: #ff5d73;
  --danger-ink: #ffffff;
  --danger-soft: #412135;
  --danger-strong: #ff5d73;
  --chart-1: #3ddc84;
  --chart-2: #03d4f4;
  --chart-3: #889af9;
  --chart-4: #fd92e9;
  --chart-5: #fb6d4d;
  --chart-6: #debb2d;

  --font-display: "Fredoka", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --display-weight: 600;
  --radius-card: 20px;
  --radius-btn: 14px;
  --radius-input: 12px;
  --x-g0: #ff4d6a;
  --x-g0h: #ff9aab;
  --x-g1: #3d8bff;
  --x-g1h: #98c3ff;
  --x-g2: #38d46a;
  --x-g2h: #9af0b4;
  --x-g3: #ffc83d;
  --x-g3h: #ffe69a;
  --x-g4: #a35cff;
  --x-g4h: #d3adff;
  --x-g5: #ff8a3d;
  --x-g5h: #ffc49a;
  --x-t0: #3ddc84;
  --x-t1: #ffc83d;
  --x-t2: #ff8a3d;
  --x-t3: #ff4d6a;
  --x-alien: #7dff9b;
  --x-alien-d: #2fb866;
  --x-sclera: #f4fbff;
  --x-pupil: #10142c;
  --x-bear: #8a5a3a;
  --x-bear-d: #5c3a24;
  --x-snout: #d9b48a;
  --x-laser: #ff3d5a;
  --x-shadow: #05081a;
  --x-ship: #b9c4e8;
  --x-ship-d: #6c7ab0;
  --x-fire: #ff9a3d;
  --x-smoke: #8a93b8;
  --x-water: #3da5ff;
  --x-water-d: #1f5fc4;
  --x-tree: #2f8a52;
  --x-tree-d: #1c5a36;
  --x-goo: #b4ff3d;
  --x-clone: #ff7ad9;
  --x-star: #dfe7ff;
  --x-decor: #0d2a24;
  --x-ground: #17301f;
  --x-metal: #9aa7d0;
  --x-metal-d: #55618f;
  --x-wood: #a9763f;
  --x-wood-d: #6b4624;
  --x-tent: #ff8a3d;
  --x-solar: #2a4fa8;
  --x-glass: #8fe6ff;
  --x-threat: #ff6b7e;
  --gradient-s1: linear-gradient(180deg, #27406b 0%, #2f6b5a 58%, #143826 100%);
  --gradient-s2: linear-gradient(180deg, #1c2a3a 0%, #2d4458 60%, #16222e 100%);
  --gradient-s3: linear-gradient(180deg, #5a4630 0%, #7a5b3a 58%, #3a2a1a 100%);
  --gradient-s4: linear-gradient(180deg, #ff9a6b 0%, #ffc98a 50%, #6b8f3a 100%);
  --gradient-s5: linear-gradient(180deg, #1a1440 0%, #3a2a78 55%, #1d2a2a 100%);
  --gradient-s6: linear-gradient(180deg, #2b5f9a 0%, #6fb4d8 55%, #1d4c6a 100%);
  --gradient-s7: linear-gradient(180deg, #14122a 0%, #2a2144 60%, #0f0c1c 100%);
  --gradient-s8: linear-gradient(180deg, #0e1a33 0%, #4a2a5e 55%, #1c1630 100%);
  --gradient-s9: linear-gradient(180deg, #1a2748 0%, #55507a 55%, #262a3a 100%);
  --gradient-s10: linear-gradient(180deg, #2a1a30 0%, #7a3a3a 55%, #2a1a1a 100%);
  --gradient-intro: linear-gradient(180deg, #05081a 0%, #141b4a 70%, #2a3a8a 100%);
  --gradient-base: linear-gradient(180deg, #1b2a5e 0%, #4a6fa8 55%, #2f5a3a 56%, #1d3a28 100%);
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Nunito", system-ui, sans-serif;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f3f4;
  --border: #dddee0;
  --border-strong: #b6b7bd;
  --ink: #0b1024;
  --muted: #646772;
  --accent: #3ddc84;
  --accent-hover: #34bb70;
  --accent-ink: #0b1024;
  --accent-text: #227949;
  --accent-strong: #227949;
  --accent-soft: #e4faee;
  --accent-border: #a8efc8;
  --success: #3ddc84;
  --success-ink: #0b1024;
  --success-soft: #e8fbf0;
  --success-strong: #227949;
  --warning: #ffc83d;
  --warning-ink: #0b1024;
  --warning-soft: #fff8e8;
  --warning-strong: #84661f;
  --danger: #ff5d73;
  --danger-ink: #0b1024;
  --danger-soft: #ffecee;
  --danger-strong: #b74353;
  --chart-1: #1aa45d;
  --chart-2: #129cb5;
  --chart-3: #5867cb;
  --chart-4: #cf71bf;
  --chart-5: #b7452c;
  --chart-6: #ad9017;
}

/* Starfall Salvage — game surfaces. Colours come from theme.css tokens only. */

.brand-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 14px; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.brand-mark .icon { width: 1.5rem; height: 1.5rem; }
.atom-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-family: var(--font-display); font-size: 1.05rem; }
.atom-pill .icon { color: var(--accent-text); }

.bottom-nav { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; padding: .4rem .6rem calc(.4rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
@media (min-width: 640px) { .bottom-nav { inset: auto 50% 1rem auto; transform: translateX(50%); width: min(32rem, 92vw); border: 1px solid var(--border); border-radius: 999px; padding: .35rem; } }
.nav-btn { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .45rem .25rem; border-radius: 14px; font-size: .75rem; font-weight: 700; color: var(--muted); transition: background .15s, color .15s, transform .1s; }
.nav-btn:hover { color: var(--ink); background: var(--surface-2); }
.nav-btn:active { transform: scale(.96); }
.nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-btn[aria-current="page"] { color: var(--accent-ink); background: var(--accent); }
.nav-btn .icon { width: 1.35rem; height: 1.35rem; }

.toast-box { position: fixed; left: 50%; bottom: 6rem; z-index: 90; transform: translateX(-50%); display: grid; gap: .5rem; width: min(26rem, 92vw); pointer-events: none; }
.toast-item { padding: .7rem 1rem; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--accent); color: var(--ink); font-weight: 700; text-align: center; animation: toast-in .3s ease-out; }
@keyframes toast-in { from { transform: translateY(14px); } to { transform: none; } }

/* ---------- stage map ---------- */
.hero-card { position: relative; overflow: hidden; border-radius: 28px; padding: 1.5rem; background: var(--gradient-s1); border: 1px solid var(--border); }
.hero-card .hero-alien { position: absolute; right: .5rem; bottom: -.5rem; width: 8.5rem; animation: bob .9s ease-in-out infinite alternate; }
.stat { padding: .6rem .9rem; border-radius: 14px; background: color-mix(in srgb, var(--canvas) 70%, transparent); }
.stat b { display: block; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.1; }
.stat span { font-size: .75rem; color: var(--muted); font-weight: 700; }
.node { --tc: var(--x-t0); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; aspect-ratio: 1; border-radius: 18px; background: var(--surface); border: 2px solid var(--tc); color: var(--ink); transition: transform .12s, background .15s; }
.node.t1 { --tc: var(--x-t1); } .node.t2 { --tc: var(--x-t2); } .node.t3 { --tc: var(--x-t3); }
.node b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1; }
.node .icon { width: 1rem; height: 1rem; }
.node:not(:disabled):hover { transform: translateY(-3px); background: var(--surface-2); }
.node:not(:disabled):active { transform: scale(.95); }
.node:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.node.done { background: color-mix(in srgb, var(--tc) 18%, var(--surface)); }
.node.cur { background: var(--tc); color: var(--x-pupil); animation: pulse 1.4s ease-in-out infinite; }
.node:disabled { opacity: .45; cursor: not-allowed; border-style: dashed; }
.tier-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--tc, var(--x-t0)); }
.tier-dot.t1 { --tc: var(--x-t1); } .tier-dot.t2 { --tc: var(--x-t2); } .tier-dot.t3 { --tc: var(--x-t3); }
.tier-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--tc); font-size: .75rem; font-weight: 800; --tc: var(--x-t0); }
.tier-tag.t1 { --tc: var(--x-t1); } .tier-tag.t2 { --tc: var(--x-t2); } .tier-tag.t3 { --tc: var(--x-t3); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc) 55%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }

.pat { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 5.5rem; flex: none; padding: 4px; border-radius: 10px; background: var(--surface-2); }
.pat i { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.pat i.on { background: var(--accent); }

/* ---------- play: scene ---------- */
.scene { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 10; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--gradient-s1); }
.scene-decor { position: absolute; left: 0; bottom: 20%; width: 200%; display: flex; justify-content: space-around; color: var(--x-decor); opacity: .55; animation: drift 16s linear infinite; z-index: 0; }
.scene-decor .icon { width: 4.5rem; height: 4.5rem; flex: none; }
.scene-ground { position: absolute; inset: auto 0 0 0; height: 20%; background: var(--x-ground); z-index: 1; border-top: 3px solid var(--x-tree-d); }
.scene-ground::after { content: ""; position: absolute; inset: 40% 0 auto 0; height: 4px; background-image: linear-gradient(90deg, var(--x-tree-d) 50%, transparent 50%); background-size: 36px 4px; animation: drift-s 1.2s linear infinite; opacity: .8; }
.scene-water { position: absolute; inset: auto 0 0 0; height: 0%; z-index: 4; transition: height 1s linear; background: linear-gradient(180deg, var(--x-water), var(--x-water-d)); opacity: .82; border-top: 3px solid var(--x-glass); }
.scene-alien { position: absolute; bottom: 12%; width: 15%; aspect-ratio: 64 / 72; z-index: 3; transition: left .9s ease; animation: bob .45s ease-in-out infinite alternate; }
.scene-alien.scared { animation: shake .18s linear infinite; }
.scene-alien.dead { animation: none; transform: rotate(90deg) translateY(-30%); filter: grayscale(1); }
.scene-threat { position: absolute; bottom: 11%; width: 24%; z-index: 3; transition: left .9s ease; animation: bob .35s ease-in-out infinite alternate; }
.threat-ic { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--x-threat) 28%, transparent); color: var(--x-threat); border: 2px solid var(--x-threat); }
.threat-ic .icon { width: 55%; height: 55%; }
.scene-obs { position: absolute; right: 3%; bottom: 13%; z-index: 2; display: flex; gap: .15rem; color: var(--x-tree); }
.scene-obs .icon { width: 2rem; height: 2rem; transition: opacity .3s, transform .3s; }
.scene-obs .icon.gone { opacity: 0; transform: scale(.2) rotate(40deg); }
.scene-beam { position: absolute; z-index: 3; height: 4px; border-radius: 4px; background: var(--x-laser); box-shadow: 0 0 10px var(--x-laser); transform-origin: left center; transform: scaleX(0); opacity: 0; pointer-events: none; }
.scene-beam.fire { animation: beam .45s ease-out; }
.scene-cap { position: absolute; left: .55rem; right: .55rem; top: .55rem; z-index: 6; padding: .4rem .7rem; border-radius: 12px; font-size: .82rem; font-weight: 700; line-height: 1.3; background: color-mix(in srgb, var(--canvas) 78%, transparent); animation: cap-in .4s ease-out; }
.scene-name { position: absolute; right: .55rem; bottom: .45rem; z-index: 6; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--x-star); }
.scene.hz-timer .scene-ground, .scene.hz-rising .scene-ground { border-top-color: var(--x-metal-d); }
@keyframes drift { to { transform: translateX(-50%); } }
@keyframes drift-s { to { background-position-x: -36px; } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes shake { 0%, 100% { translate: 0 0; } 25% { translate: -2px 1px; } 75% { translate: 2px -1px; } }
@keyframes beam { 0% { transform: scaleX(0); opacity: 1; } 40% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes cap-in { from { transform: translateY(-8px); } to { transform: none; } }

/* ---------- play: hud ---------- */
.hud { display: flex; align-items: stretch; gap: .5rem; margin-top: .6rem; }
.pill { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 4.4rem; padding: .35rem .7rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); }
.pill span { font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pill b { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.pill.low { border-color: var(--danger); } .pill.low b { color: var(--danger); animation: pulse-t .8s ease-in-out infinite; }
.goals { display: flex; flex: 1; gap: .5rem; }
.goalchip { display: flex; flex: 1; align-items: center; justify-content: center; gap: .5rem; padding: .35rem .6rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-display); font-size: 1.3rem; }
.goalchip .icon { width: 1.5rem; height: 1.5rem; color: var(--x-tree); }
.goalchip.ok { border-color: var(--accent); } .goalchip.ok b { color: var(--accent-text); }
.goalchip small { font-family: var(--font-body); font-size: .68rem; font-weight: 800; color: var(--muted); line-height: 1.1; }
.sw { display: inline-block; width: 1.6rem; height: 1.6rem; flex: none; }
.danger-bar { display: flex; align-items: center; gap: .6rem; margin-top: .55rem; font-size: .75rem; font-weight: 800; color: var(--muted); }
.danger-bar .icon { color: var(--x-threat); }
.danger-bar .bar { flex: 1; height: .6rem; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.danger-bar .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--x-t1), var(--x-t3)); transition: width .8s ease; }
@keyframes pulse-t { 50% { transform: scale(1.15); } }

/* ---------- play: board ---------- */
.board { position: relative; overflow: hidden; width: 100%; max-width: 30rem; margin: .75rem auto 0; aspect-ratio: 1; border-radius: 22px; border: 2px solid var(--border); touch-action: none; user-select: none; background-color: var(--surface); background-image: conic-gradient(var(--surface) 25%, var(--surface-2) 0 50%, var(--surface) 0 75%, var(--surface-2) 0); background-size: 25% 25%; }
.gem { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; padding: 0; cursor: pointer; transition: transform .24s cubic-bezier(.3, .8, .4, 1.05); will-change: transform; }
.gem-in { --gc: var(--x-g0); --gh: var(--x-g0h); position: absolute; inset: 7%; display: grid; place-items: center; color: var(--x-pupil); background: radial-gradient(circle at 32% 28%, var(--gh), var(--gc) 62%); box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--gc) 55%, var(--canvas)); transition: transform .15s; }
.gem-in.k0 { border-radius: 50%; }
.gem-in.k1 { --gc: var(--x-g1); --gh: var(--x-g1h); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.gem-in.k2 { --gc: var(--x-g2); --gh: var(--x-g2h); border-radius: 30%; }
.gem-in.k3 { --gc: var(--x-g3); --gh: var(--x-g3h); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.gem-in.k4 { --gc: var(--x-g4); --gh: var(--x-g4h); clip-path: polygon(50% 3%, 98% 92%, 2% 92%); }
.gem-in.k5 { --gc: var(--x-g5); --gh: var(--x-g5h); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.gem-in .sp-ic { width: 62%; height: 62%; stroke-width: 2.6; filter: drop-shadow(0 1px 0 var(--x-star)); }
.gem-in .sp-ic.rot { transform: rotate(45deg); }
.gem.sel .gem-in { transform: scale(1.14); }
.gem.sel::before { content: ""; position: absolute; inset: 2%; border-radius: 30%; border: 3px solid var(--ink); }
.gem.hint .gem-in { animation: hint .7s ease-in-out infinite alternate; }
.gem.pop .gem-in { animation: pop .24s ease-in forwards; }
.gem.born .gem-in { animation: born .45s cubic-bezier(.3, 1.6, .5, 1); }
.gem.nope { animation: shake .18s linear 3; }
.gem.has-sp::after { content: ""; position: absolute; inset: 1%; border-radius: 50%; border: 3px solid var(--x-star); pointer-events: none; animation: spin 5s linear infinite; border-style: dashed; }
.gem.sp-atom::after { border-color: var(--x-fire); }
.gem.sp-laser::after { border-color: var(--x-laser); }
.gem.sp-goo::after { border-color: var(--x-goo); }
.gem.sp-clone::after { border-color: var(--x-clone); }
.gem.sp-atom .gem-in, .gem.sp-laser .gem-in, .gem.sp-goo .gem-in, .gem.sp-clone .gem-in { animation: glow 1s ease-in-out infinite alternate; }
.blk { position: absolute; inset: 3%; z-index: 2; display: grid; place-items: center; border-radius: 22%; background: var(--x-wood); border: 3px solid var(--x-wood-d); color: var(--x-tree-d); box-shadow: inset 0 -4px 0 var(--x-wood-d); }
.blk .icon { width: 70%; height: 70%; }
@keyframes pop { to { transform: scale(0) rotate(70deg); opacity: 0; } }
@keyframes born { from { transform: scale(.2); } 60% { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes hint { to { transform: scale(1.18); } }
@keyframes glow { to { transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }

.fx { position: absolute; left: calc(var(--c) * 12.5%); top: calc(var(--r) * 12.5%); width: 12.5%; height: 12.5%; pointer-events: none; z-index: 5; }
.fx-atom::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc((var(--R, 1) * 2 + 1) * 100%); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.1); background: radial-gradient(circle, var(--x-star), var(--x-fire) 55%, transparent 70%); animation: blast .55s ease-out forwards; }
.fx-row::before { content: ""; position: absolute; left: calc(var(--c) * -100%); top: 25%; width: 800%; height: 50%; background: var(--x-laser); box-shadow: 0 0 14px var(--x-laser); transform-origin: center; animation: lz .5s ease-out forwards; }
.fx-diag::before, .fx-diag::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1800%; height: 30%; background: var(--x-laser); box-shadow: 0 0 14px var(--x-laser); transform: translate(-50%, -50%) rotate(45deg) scaleY(1); animation: lzd .5s ease-out forwards; }
.fx-diag::after { transform: translate(-50%, -50%) rotate(-45deg); animation-name: lzd2; }
.fx-goo::before { content: ""; position: absolute; inset: -20%; border-radius: 45% 55% 50% 50%; background: var(--x-goo); animation: splat .6s ease-out forwards; }
.fx-clone::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; border: 3px solid var(--x-clone); animation: splat .6s ease-out forwards; }
@keyframes splat { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes blast { 0% { transform: translate(-50%, -50%) scale(.1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes lz { 0% { transform: scaleY(0); opacity: 1; } 30% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
@keyframes lzd { 0% { transform: translate(-50%, -50%) rotate(45deg) scaleY(0); opacity: 1; } 30% { transform: translate(-50%, -50%) rotate(45deg) scaleY(1); } 100% { transform: translate(-50%, -50%) rotate(45deg) scaleY(0); opacity: 0; } }
@keyframes lzd2 { 0% { transform: translate(-50%, -50%) rotate(-45deg) scaleY(0); opacity: 1; } 30% { transform: translate(-50%, -50%) rotate(-45deg) scaleY(1); } 100% { transform: translate(-50%, -50%) rotate(-45deg) scaleY(0); opacity: 0; } }

/* ---------- base ---------- */
.base-view { overflow: hidden; border-radius: 24px; border: 1px solid var(--border); background: var(--gradient-base); }
.base-view svg { display: block; width: 100%; height: auto; }
.base-view .ghost { opacity: .14; }
.base-view .new { animation: born .7s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center bottom; }
.room { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 6rem; padding: .6rem; border-radius: 16px; text-align: center; font-size: .8rem; font-weight: 800; background: var(--surface); border: 2px dashed var(--border); color: var(--muted); }
.room .icon { width: 1.8rem; height: 1.8rem; }
.room.lit { border-style: solid; border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.room.lit .icon { color: var(--accent-text); }

/* ---------- workshop ---------- */
.slot { display: grid; place-items: center; gap: .2rem; width: 6rem; aspect-ratio: 1; border-radius: 18px; border: 2px dashed var(--border); background: var(--surface-2); font-size: .72rem; font-weight: 800; color: var(--muted); transition: transform .12s; }
.slot:hover { transform: scale(1.04); }
.slot.full { border-style: solid; border-color: var(--accent); color: var(--ink); }
.slot .icon { width: 2rem; height: 2rem; }
.item { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .6rem .3rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: .72rem; font-weight: 800; text-align: center; transition: transform .12s, border-color .15s; }
.item .icon { width: 1.6rem; height: 1.6rem; color: var(--accent-text); }
.item:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); }
.item:not(:disabled):active { transform: scale(.95); }
.item:disabled { opacity: .4; cursor: not-allowed; }
.item:focus-visible, .slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.made { animation: born .6s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- intro art ---------- */
.art { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 18px; background: var(--gradient-intro); }
.art .stars { position: absolute; inset: 0; background-image: radial-gradient(var(--x-star) 1px, transparent 1.6px), radial-gradient(var(--x-star) 1.4px, transparent 2px); background-size: 38px 46px, 71px 83px; background-position: 0 0, 17px 29px; animation: twinkle 2.4s ease-in-out infinite alternate; }
.art .planet { position: absolute; right: -12%; bottom: -40%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--x-glass), var(--x-water) 45%, var(--x-water-d)); }
.art .ship { position: absolute; width: 26%; }
.art .ship-fall { left: 8%; top: 8%; animation: fall 3.2s ease-in infinite; }
.art .trail { position: absolute; right: 88%; top: 20%; width: 120%; height: 8px; border-radius: 8px; background: linear-gradient(90deg, transparent, var(--x-fire)); transform: rotate(-30deg); transform-origin: right; }
.art-forest { background: var(--gradient-s1); }
.art-dark { background: var(--gradient-s7); }
.art .ground { position: absolute; inset: auto 0 0 0; height: 24%; background: var(--x-ground); border-top: 3px solid var(--x-tree-d); }
.art .trees { position: absolute; inset: auto 0 18% 0; display: flex; justify-content: space-around; color: var(--x-tree-d); }
.art .trees .icon { width: 4rem; height: 4rem; }
.art .ship-crash { left: 36%; bottom: 12%; width: 32%; transform: rotate(-12deg); animation: thud .8s ease-out; }
.art .puff { position: absolute; border-radius: 50%; background: var(--x-smoke); opacity: .75; animation: puff 2.4s ease-out infinite; }
.art .alien { position: absolute; width: 11%; bottom: 14%; animation: bob .5s ease-in-out infinite alternate; }
.art .float { position: absolute; color: var(--x-star); animation: bob 1.2s ease-in-out infinite alternate; }
.art .float .icon { width: 2rem; height: 2rem; }
.art .eyes { position: absolute; display: flex; gap: .5rem; animation: twinkle 1s ease-in-out infinite alternate; }
.art .eyes i { width: .9rem; height: .5rem; border-radius: 50%; background: var(--x-laser); box-shadow: 0 0 12px var(--x-laser); }
.dots { display: flex; gap: .4rem; justify-content: center; }
.dots i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--border); }
.dots i.on { width: 1.4rem; background: var(--accent); border-radius: 99px; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes fall { 0% { transform: translate(0, 0) rotate(20deg); } 100% { transform: translate(190%, 120%) rotate(32deg); } }
@keyframes thud { 0% { transform: translateY(-160%) rotate(-30deg); } 70% { transform: translateY(8%) rotate(-10deg); } 100% { transform: rotate(-12deg); } }
@keyframes puff { 0% { transform: translateY(0) scale(.4); opacity: .8; } 100% { transform: translateY(-120%) scale(1.6); opacity: 0; } }

.gem-in.sw { position: relative; inset: auto; display: inline-block; width: 1.6rem; height: 1.6rem; }
.mini-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }

dialog.modal { max-width: min(34rem, 94vw); width: 100%; }
dialog.modal::backdrop { background: color-mix(in srgb, var(--canvas) 80%, transparent); }

html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation: none !important; }