@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root { --ink:#202426; --muted:#737774; --paper:#f3f1ec; --panel:#fbfaf7; --wall:#d5d4ce; --ice:#dbe2e3; --line:#d8d7d1; --coral:#ba645d; --blue:#657f9a; --shadow:0 22px 50px #36383419,0 2px 4px #36383410; --radius:24px; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; background:radial-gradient(circle at 50% -10%,#fff 0,#f3f1ec 42%,#e9e8e3 100%); color:var(--ink); font-family:'Noto Sans SC',system-ui,sans-serif; } body::before { content:''; inset:0; position:fixed; pointer-events:none; opacity:.22; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); } button { font:inherit; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:12px; top:12px; z-index:10; background:#fff; padding:10px; }
.app-shell { min-height:100svh; width:min(100%,760px); margin:auto; padding:clamp(18px,4vw,36px) 20px max(24px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; }
.wordmark { display:flex; align-items:center; gap:10px; letter-spacing:.14em; font-size:11px; font-family:'DM Mono',monospace; text-transform:uppercase; color:var(--muted); } .wordmark .mark { height:18px; width:18px; border:2px solid var(--ink); border-radius:50%; box-shadow:inset 3px 0 #d3d2cc; }
.landing { min-height:calc(100svh - 48px); justify-content:space-between; text-align:center; } .landing-copy { margin-top:clamp(7vh,12vh,16vh); } h1 { font-weight:600; letter-spacing:-.075em; font-size:clamp(47px,14vw,80px); line-height:.95; margin:18px 0; } .landing p { margin:0 auto; max-width:280px; color:var(--muted); font-size:14px; line-height:1.8; } .hero-orbit { width:min(66vw,300px); aspect-ratio:1; position:relative; border:1px solid #d5d3cd; border-radius:50%; margin:20px auto 8px; display:grid; place-items:center; animation:float 7s ease-in-out infinite; } .hero-orbit::before,.hero-orbit::after { content:''; position:absolute; width:62%; aspect-ratio:1; border:12px solid #d1d0c9; border-radius:16px; transform:rotate(25deg); box-shadow:4px 7px 11px #31332f18; } .hero-orbit::after { width:34%; border-width:8px; transform:rotate(70deg); } .hero-marble { z-index:1; width:48px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 30% 24%,#fff 0 8%,#e9e5dc 23%,#9da09c 85%); box-shadow:8px 10px 13px #47494433,inset -5px -7px 10px #565b5633; }
.primary,.secondary,.icon-btn { border:0; cursor:pointer; transition:transform .16s ease,background .16s ease; } .primary:active,.secondary:active,.icon-btn:active { transform:scale(.96); } .primary { color:#f7f5ef; background:#202426; border-radius:999px; padding:15px 23px; min-width:178px; box-shadow:0 9px 20px #272a2640; } .secondary { padding:12px 18px; background:transparent; color:var(--muted); } button:focus-visible { outline:2px solid #566d7a; outline-offset:3px; }
.screen-head { width:100%; display:flex; justify-content:space-between; align-items:center; min-height:34px; } .back { color:var(--muted); background:transparent; border:0; padding:6px 0; cursor:pointer; } .screen-title { margin:42px 0 7px; font-size:30px; letter-spacing:-.06em; } .subtle { color:var(--muted); font-size:13px; margin:0; }
.level-grid { width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:34px 0; } .level-chip { aspect-ratio:1; border:1px solid var(--line); background:#f8f7f3; border-radius:15px; color:var(--ink); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; font-family:'DM Mono',monospace; font-size:15px; } .level-chip.done { background:#e8e8e1; } .level-chip.current { border-color:#4d5653; box-shadow:0 6px 12px #33352d1a; } .level-chip.locked { color:#b7b8b2; background:#efeee9; cursor:not-allowed; } .stars { font-size:10px; letter-spacing:1px; color:#8d8569; min-height:12px; }
.game-screen { width:100%; } .hud { width:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin:14px 0 22px; } .hud-item { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:.04em; } .hud-item:last-child { text-align:right; } .hud-item b { display:block; color:var(--ink); font-size:14px; margin-top:4px; font-weight:500; } .stage-name { text-align:center; font-size:12px; letter-spacing:.12em; font-weight:600; }
.board-frame { width:min(100%,580px); margin:auto; padding:clamp(10px,2.5vw,15px); border:1px solid #dad8d1; border-radius:clamp(20px,4vw,30px); background:#eeede8; box-shadow:var(--shadow); } .board-rotor { aspect-ratio:1; transition:transform 340ms cubic-bezier(.22,.8,.26,1); } .board { width:100%; height:100%; position:relative; display:grid; overflow:hidden; border-radius:16px; background:#e8e8e3; box-shadow:inset 0 0 0 1px #c8c9c4,inset 0 12px 25px #a9aca50e; touch-action:none; }
.tile { position:relative; border:solid #d3d4ce; border-width:0 1px 1px 0; } .tile.ice { background:linear-gradient(135deg,#dfe7e8bd,#edf0edcc); } .tile.ice::after { content:''; position:absolute; inset:18%; border-top:1px solid #fff8; transform:rotate(-32deg); } .wall { position:absolute; inset:7%; border:1px solid #bbbdb7; border-radius:5px; background:linear-gradient(135deg,#e4e4df,#c6c7c1); box-shadow:1px 2px 3px #4a4e491c,inset 1px 1px #fff8; } .exit { position:absolute; inset:17%; border:3px solid #889690; border-radius:50%; box-shadow:0 0 0 2px #f2f2eb,inset 0 0 8px #91a29b80,0 0 10px #879b9145; } .exit.red { border-color:#b9746e; box-shadow:0 0 0 2px #f2f2eb,inset 0 0 8px #bd777066,0 0 10px #b8756c44; } .exit.blue { border-color:#718ba4; box-shadow:0 0 0 2px #f2f2eb,inset 0 0 8px #7891aa66,0 0 10px #7891aa44; } .portal { position:absolute; inset:15%; border:3px solid #b28b57; border-radius:50%; box-shadow:inset 0 0 0 2px #f5efe4,0 0 10px #bb976b66; } .portal.teal { border-color:#6e9990; box-shadow:inset 0 0 0 2px #f1f4ed,0 0 10px #719c9466; } .trap { position:absolute; inset:10%; border-radius:50%; background:radial-gradient(circle at 35% 28%,#606460,#252927 58%,#111312 100%); box-shadow:inset 2px 3px 6px #0009; } .oneway { position:absolute; inset:17%; border:1px solid #a8aba4; border-radius:6px; background:#e0e0da; display:grid; place-items:center; color:#5d635f; font-size:13px; } .switch { position:absolute; inset:24%; border-radius:50%; background:#d4b75c; box-shadow:inset 0 1px #fff7,0 1px 2px #35363044; } .switch.active { background:#8c9d7d; } .door { position:absolute; inset:8%; background:repeating-linear-gradient(90deg,#90958d 0 3px,#aeb0a8 3px 6px); border-radius:4px; opacity:.92; transition:opacity .18s; } .door.open { opacity:.18; }
.ball { position:absolute; z-index:4; width:calc(100% / var(--cols) * .62); height:calc(100% / var(--rows) * .62); margin:calc(100% / var(--cols) * .19); border-radius:50%; transition:left 110ms cubic-bezier(.25,.8,.35,1),top 110ms cubic-bezier(.25,.8,.35,1),transform 180ms ease,opacity 180ms ease; box-shadow:6px 8px 9px #2f342d39,inset 5px 5px 8px #fff9,inset -6px -7px 9px #60655f5e; background:radial-gradient(circle at 31% 25%,#fff 0 9%,#e5e2d9 28%,#959a94 92%); } .ball.red { background:radial-gradient(circle at 31% 25%,#fff 0 9%,#e4b7ad 32%,#a35450 92%); } .ball.blue { background:radial-gradient(circle at 31% 25%,#fff 0 9%,#b9cbd8 32%,#55738d 92%); } .ball.entering { transform:scale(.35)!important; opacity:0; }
.gravity-readout { font-family:'DM Mono',monospace; color:var(--muted); font-size:11px; text-align:center; min-height:22px; margin:16px 0 9px; } .controls { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; width:min(100%,420px); margin:auto; } .icon-btn { min-height:58px; border:1px solid #d7d6d0; border-radius:17px; color:var(--ink); background:#f8f7f3; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; font-size:19px; } .icon-btn small { font-size:9px; color:var(--muted); letter-spacing:.06em; } .icon-btn.main { background:#252a2b; color:#f7f6ef; border-color:#252a2b; } .icon-btn:disabled { opacity:.35; cursor:not-allowed; }
.toast { text-align:center; color:#9b5e55; font-size:12px; min-height:20px; margin:14px 0 0; } .result { position:fixed; inset:0; z-index:10; display:grid; place-items:center; background:#1f23262c; padding:24px; animation:fade .22s ease; } .result-card { width:min(100%,340px); background:#fbfaf6; padding:31px; border-radius:25px; box-shadow:0 25px 70px #2023203d; text-align:center; } .result-card h2 { font-size:29px; letter-spacing:-.06em; margin:6px 0; } .result-star { font-size:24px; letter-spacing:5px; color:#a89059; margin:16px 0; } .result-stats { display:flex; justify-content:center; gap:28px; font-family:'DM Mono',monospace; color:var(--muted); font-size:10px; margin:22px 0; } .result-stats b { display:block; color:var(--ink); font-size:18px; margin-top:6px; font-weight:500; } .result-actions { display:grid; gap:8px; }
@keyframes float { 50% { transform:translateY(-8px) rotate(3deg); } } @keyframes fade { from { opacity:0; } }

/* P0: state transitions occur on persistent board nodes, so these are felt rather than merely declared. */
.board { transition:filter .14s ease,box-shadow .14s ease; }
.ball { transition:left 110ms cubic-bezier(.25,.8,.35,1),top 110ms cubic-bezier(.25,.8,.35,1),transform 180ms ease,opacity 180ms ease,filter 180ms ease; }
.ball.failed { transform:scale(.58); opacity:.28; filter:grayscale(1); }
.board.impact { filter:brightness(.96); box-shadow:inset 0 0 0 2px #9b715d,inset 0 12px 25px #a9aca50e; }
.board.portal-flash { filter:brightness(1.08) saturate(1.14); }
.board.switch-flash { box-shadow:inset 0 0 0 2px #9b9c72,inset 0 12px 25px #a9aca50e; }
/* Blocked marbles dip toward the blocker in board-local coordinates, so the nudge always reads as "down" on screen. */
.ball.bump { animation:bump .22s ease; }
@keyframes bump { 50% { transform:translate(var(--bx,0),var(--by,0)) scale(.9); } }
.mission { display:flex; align-items:baseline; gap:9px; min-height:25px; margin:-8px 0 12px; color:var(--muted); font-size:12px; } .mission span,.lesson-card span { color:#8d8569; font:10px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; } .mission p { margin:0; line-height:1.45; }
.lesson-card { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start; margin:0 0 14px; padding:11px 12px; border-left:2px solid #a89059; background:#ebe8dd; color:#555950; font-size:12px; line-height:1.55; } .lesson-card p { margin:0; } .lesson-dismiss { border:0; padding:0; background:transparent; color:#566d7a; cursor:pointer; font:11px 'DM Mono',monospace; white-space:nowrap; }
.tile.ice.cracked { background:#474b4a; box-shadow:inset 0 0 0 1px #202423; } .tile.ice.cracked::after { content:'×'; inset:0; display:grid; place-items:center; color:#d7d6d0; border:0; transform:none; font:17px 'DM Mono',monospace; }
.controls { grid-template-columns:repeat(4,1fr); width:min(100%,500px); } .controls .icon-btn { min-height:55px; } .controls .icon-btn[data-action="undo"] { background:#ecebe5; }

@media (min-width:700px) { .app-shell { padding-top:28px; } .game-screen { width:620px; } }
@media (max-width:390px) { .controls { gap:7px; } .controls .icon-btn { min-height:50px; border-radius:14px; } .mission { font-size:11px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* ============================================================
   P3 visual layer — precision apparatus / glass marble.
   Pure CSS depth; appended after the base rules so it overrides.
   ============================================================ */

/* Atmosphere: faint drafting grid under the warm paper + heavier vignette. */
body { background-image:linear-gradient(#20242606 1px,transparent 1px),linear-gradient(90deg,#20242606 1px,transparent 1px),radial-gradient(1200px 620px at 50% -12%,#fff 0,#f3f1ec 46%,#e5e3dc 100%); background-size:42px 42px,42px 42px,100% 100%; background-position:center top; }

/* Apparatus frame: machined plate with four corner screws. */
.board-frame { border:1px solid #d2d0c8; border-radius:clamp(22px,4vw,32px); background-image:radial-gradient(circle at 15px 15px,#b6b4ab 0 1.6px,#e9e8e2 1.9px 3.6px,transparent 4px),radial-gradient(circle at calc(100% - 15px) 15px,#b6b4ab 0 1.6px,#e9e8e2 1.9px 3.6px,transparent 4px),radial-gradient(circle at 15px calc(100% - 15px),#b6b4ab 0 1.6px,#e9e8e2 1.9px 3.6px,transparent 4px),radial-gradient(circle at calc(100% - 15px) calc(100% - 15px),#b6b4ab 0 1.6px,#e9e8e2 1.9px 3.6px,transparent 4px),linear-gradient(150deg,#f4f3ee 0,#e8e7e0 55%,#dfded6 100%); box-shadow:0 34px 64px -26px #2b2e2a66,0 6px 14px #2b2e2a14,inset 0 1px 0 #ffffffcc,inset 0 -3px 8px #c4c2b955; }
.board-rotor { transition:transform 360ms cubic-bezier(.22,.84,.3,1.015); will-change:transform; }

/* The maze is a recessed milled well. */
.board { border-radius:18px; background:linear-gradient(180deg,#deddd6 0,#e7e6e0 46%,#e9e8e2 100%); box-shadow:inset 0 3px 12px #0000001f,inset 0 0 0 1px #c0c1bb,inset 0 -1px 0 #ffffffaa,0 1px 0 #ffffff99; }
.tile { border-color:#d3d2cc; box-shadow:inset 1px 1px 0 #ffffff70; }

/* Tiles / mechanisms get a machined light-from-top-left treatment. */
.wall { inset:6%; border:1px solid #b3b5ae; border-radius:7px; background:linear-gradient(145deg,#edece6 0,#d7d8d1 45%,#c4c5be 100%); box-shadow:inset 1.5px 1.5px 1px #ffffffc0,inset -2.5px -2.5px 4px #8f918a4d,2px 3px 4px #3c3f3a22; }
.tile.ice { background:linear-gradient(135deg,#e9f0f1 0,#d9e2e4 55%,#cfdadd 100%); box-shadow:inset 0 0 0 1px #ffffffaa,inset 0 0 9px #ffffff77; }
.tile.ice.cracked { background:linear-gradient(145deg,#4b4f4e,#333736); box-shadow:inset 0 2px 6px #0009,inset 0 0 0 1px #202423; }
.exit { inset:15%; border:3px solid #8b9892; background:radial-gradient(circle at 50% 42%,#e6eae4 0 34%,#b7c0b9 66%,#8b9892 100%); box-shadow:0 0 0 2px #f2f2eb,inset 0 2px 5px #56665d66,inset 0 -1px 1px #ffffffcc,0 1px 2px #00000022; }
.exit::after { content:''; position:absolute; inset:24%; border:1.5px dashed #77847d; border-radius:50%; opacity:.45; }
.exit.red { border-color:#b9746e; background:radial-gradient(circle at 50% 42%,#f3e2df 0 34%,#c9918b 66%,#b0675f 100%); box-shadow:0 0 0 2px #f2f2eb,inset 0 2px 5px #8e4e4866,inset 0 -1px 1px #ffffffcc; }
.exit.blue { border-color:#718ba4; background:radial-gradient(circle at 50% 42%,#e3ebf1 0 34%,#8ea6bd 66%,#67839d 100%); box-shadow:0 0 0 2px #f2f2eb,inset 0 2px 5px #46607866,inset 0 -1px 1px #ffffffcc; }
.portal { inset:14%; border:2.5px solid #b28b57; background:radial-gradient(circle,#0000 56%,#b28b571f 62%,#0000 68%); box-shadow:inset 0 0 0 1px #f5efe4,inset 0 0 9px #bb976b55,0 0 13px #bb976b44; }
.portal::before { content:''; position:absolute; inset:-4.5px; border-radius:50%; border:2px dashed #d9b783; animation:portalSpin 7s linear infinite; }
.portal::after { content:''; position:absolute; inset:28%; border-radius:50%; background:radial-gradient(circle at 42% 36%,#f6ecd8 0,#c39a6055 58%,transparent 72%); opacity:.55; }
.portal.teal { border-color:#6e9990; background:radial-gradient(circle,#0000 56%,#6e99901f 62%,#0000 68%); box-shadow:inset 0 0 0 1px #f1f4ed,inset 0 0 9px #719c9455,0 0 13px #719c9444; }
.portal.teal::before { border-color:#9dc4bb; }
.portal.teal::after { background:radial-gradient(circle at 42% 36%,#e9f2ef 0,#719c9455 58%,transparent 72%); }
@keyframes portalSpin { to { transform:rotate(360deg); } }
.trap { inset:9%; background:radial-gradient(circle at 38% 29%,#4c514d 0,#1e2220 52%,#090b0a 100%); box-shadow:inset 2px 4px 8px #000b,inset 0 0 0 2px #00000030,0 1px 0 #ffffff66; }
.trap::after { content:''; position:absolute; inset:22%; border-radius:50%; box-shadow:inset 0 2px 6px #000; }
.oneway { inset:15%; border:1px solid #b7bab3; border-radius:7px; background:linear-gradient(180deg,#e9e9e3 0,#d6d6cf 100%); box-shadow:inset 0 1px 0 #ffffffcc,0 1px 2px #00000024; color:#555b57; text-shadow:0 1px 0 #ffffffe0; }
.switch { inset:22%; background:radial-gradient(circle at 36% 28%,#f2de9b 0,#cba94e 68%,#a88637 100%); box-shadow:inset 0 1px 1px #ffffff90,inset 0 -2px 3px #7a5f2470,0 2px 3px #35363055; transition:transform .15s ease,background .15s ease,box-shadow .15s ease; }
.switch.active { background:radial-gradient(circle at 36% 30%,#b8c8a6 0,#8c9d7d 68%,#6e7f60 100%); box-shadow:inset 0 2px 4px #00000033,inset 0 -1px 0 #ffffff55; transform:translateY(1px); }
.door { inset:7%; border:1px solid #7d827b; border-radius:5px; background:repeating-linear-gradient(90deg,#8d928a 0 3.5px,#b3b5ad 3.5px 7px); box-shadow:inset 0 1px 0 #ffffff60,0 2px 3px #00000033; }
.door.open { opacity:.14; }

/* ---- The marble: ground shadow, rolling marble-vein shell, fixed lamp. ---- */
.ball { background:none; box-shadow:none; }
.ball > span { position:absolute; display:block; border-radius:50%; pointer-events:none; }
.ball-shadow { z-index:0; left:4%; right:4%; top:auto; bottom:-6%; height:34%; background:radial-gradient(ellipse at center,#272a264d 0,#272a2622 52%,transparent 72%); filter:blur(.6px); transform:translateY(0) scaleX(1); transition:transform .12s ease,opacity .18s ease; }
.ball.rolling .ball-shadow { transform:translateY(12%) scaleX(1.14); opacity:.82; }
.ball-spin { z-index:1; inset:0; overflow:hidden; transition:transform 112ms cubic-bezier(.3,.7,.38,1); background:radial-gradient(circle at 31% 26%,#fff 0 8%,#e8e5dc 27%,#a7aca6 74%,#7d837d 100%); box-shadow:inset 0 0 0 1px #ffffff30,inset 5px 6px 8px #ffffffaa,inset -6px -8px 11px #43493f5e,0 0 0 1px #00000012; }
.ball-spin::before { content:''; position:absolute; inset:-12%; background:conic-gradient(from 18deg at 62% 38%,transparent 0 16%,#ffffff26 21%,transparent 30%,#33392f1f 40%,transparent 52%,#ffffff30 61%,transparent 72%,#33392f14 84%,transparent 94%),radial-gradient(circle at 72% 66%,#0000001a 0 5%,transparent 17%),radial-gradient(circle at 26% 74%,#ffffff34 0 4%,transparent 15%); }
.ball-spin::after { content:''; position:absolute; inset:0; border-radius:50%; box-shadow:inset -8px -10px 13px #3e443d30; }
.ball-shine { z-index:2; inset:0; background:radial-gradient(circle at 29% 21%,#fffffff5 0 8%,#ffffff80 15%,transparent 27%),radial-gradient(circle at 68% 82%,#ffffff20 0,transparent 42%); }
.ball.red .ball-spin { background:radial-gradient(circle at 31% 26%,#fff 0 8%,#eccec7 27%,#c0716a 72%,#8e4541 100%); }
.ball.blue .ball-spin { background:radial-gradient(circle at 31% 26%,#fff 0 8%,#ccdce8 27%,#6987a1 72%,#47637c 100%); }
/* Blocked marbles squash toward the obstruction. */
.ball.bump { animation:bump .24s cubic-bezier(.3,.7,.4,1); }
@keyframes bump { 0%{transform:translate(0,0) scale(1);} 45%{transform:translate(calc(var(--bx,0)*.7),calc(var(--by,0)*.7)) scale(.84);} 100%{transform:translate(0,0) scale(1);} }

/* Landing marble inherits the same glass treatment. */
.hero-marble { background:radial-gradient(circle at 31% 26%,#fff 0 9%,#e8e5dc 28%,#9aa09a 86%,#777d77 100%); box-shadow:10px 13px 16px #4749443d,inset 6px 7px 9px #ffffffb0,inset -7px -9px 12px #53584f66,0 0 0 1px #00000010; }

/* Controls: physical keys with a top lamp edge and a press travel. */
.primary { box-shadow:0 9px 20px #272a2640,inset 0 1px 0 #ffffff24,inset 0 -2px 4px #00000028; }
.icon-btn { background:linear-gradient(180deg,#fbfaf6 0,#efeee7 100%); border:1px solid #d6d5ce; box-shadow:0 2px 0 #d0cfc7,0 5px 9px #2b2e2a14,inset 0 1px 0 #ffffffd8; }
.icon-btn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 3px 0 #d0cfc7,0 7px 12px #2b2e2a18,inset 0 1px 0 #ffffffd8; }
.icon-btn:active:not(:disabled) { transform:translateY(2px); box-shadow:0 0 0 #d0cfc7,inset 0 1px 0 #ffffffd8; }
.icon-btn.main { background:linear-gradient(180deg,#33393b 0,#1e2324 100%); border-color:#1c2021; box-shadow:0 2px 0 #0d1011,0 6px 14px #20231f55,inset 0 1px 0 #ffffff2e,inset 0 -2px 3px #00000040; }
.icon-btn.main:hover:not(:disabled) { box-shadow:0 3px 0 #0d1011,0 8px 16px #20231f5e,inset 0 1px 0 #ffffff2e; }
.controls .icon-btn[data-action="undo"] { background:linear-gradient(180deg,#f1f0ea 0,#e7e6df 100%); }

/* Level chips feel like stamped metal tags. */
.level-chip { box-shadow:inset 0 1px 0 #ffffffaa,0 2px 4px #2b2e2a10; transition:transform .15s ease,box-shadow .15s ease; }
.level-chip:not(.locked):hover { transform:translateY(-2px); box-shadow:inset 0 1px 0 #ffffffaa,0 5px 10px #2b2e2a1c; }
.level-chip.done { background:linear-gradient(180deg,#eeeede 0,#e2e2da 100%); }
.level-chip.current { border-color:#444c49; box-shadow:inset 0 1px 0 #ffffffaa,0 0 0 1px #444c4933,0 7px 14px #33352d22; }

/* Readout / stage plate engraving. */
.stage-name { color:#3b403d; text-shadow:0 1px 0 #ffffffaa; }
.gravity-readout { letter-spacing:.22em; }
.hud-item b { text-shadow:0 1px 0 #ffffffaa; }

/* Result dialog: heavier casting with a top sheen. */
.result { background:#1f232633; backdrop-filter:blur(2px); }
.result-card { background:linear-gradient(180deg,#fdfcf9 0,#f6f5f0 100%); box-shadow:0 30px 80px #1a1d1a55,inset 0 1px 0 #ffffffcc; }
.result-card::before { content:''; display:block; height:3px; margin:-31px -31px 22px; border-radius:25px 25px 0 0; background:linear-gradient(90deg,#a8905900,#a89059cc,#a8905900); }

@media (prefers-reduced-motion:reduce) { .portal::before,.ball-spin,.ball-shadow { animation-duration:.01ms!important; transition-duration:.01ms!important; } }