:root{color-scheme:dark;font-family:Inter,"Avenir Next",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--ink:#f6f1e8;--mint:#7ef0d5;--gold:#ffd37a;--panel:rgba(15,21,51,.82)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#091023;color:var(--ink);touch-action:none}
button{font:inherit;color:inherit}
.game{position:relative;width:100%;height:100%;min-height:520px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 10%,#253366,#111735 45%,#080d21)}
#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hud{position:absolute;z-index:5;top:0;left:0;right:0;display:grid;grid-template-columns:44px 1fr auto auto 44px;gap:8px;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 14px 12px;background:linear-gradient(#0b112bde,#0b112b00)}
.icon-button{width:44px;height:44px;border:1px solid #ffffff24;border-radius:15px;background:#141c3bbd;box-shadow:inset 0 1px #ffffff1a,0 8px 22px #05091850;font-size:20px;cursor:pointer}
.level-copy{display:flex;min-width:0;flex-direction:column}.level-copy small,.hud-stat small{font-size:9px;letter-spacing:.18em;color:#91d9d5}.level-copy strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-stat{text-align:right;border-right:1px solid #ffffff1c;padding-right:10px}.hud-stat strong{display:block;font-size:20px}
.coin-stat{display:flex;align-items:center;gap:5px;min-width:47px;color:#ffd37a}.coin-stat span{font-size:12px;text-shadow:0 0 12px #ffd37a}.coin-stat strong{font-size:17px}.coin-stat.bump{animation:coinBump .35s cubic-bezier(.2,1.8,.4,1)}
.screen{position:absolute;z-index:4;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(30px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 22%,#29366bde,#111735f4 55%,#070c1dfc);opacity:0;pointer-events:none;transform:scale(1.02);transition:opacity .36s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.screen.open{opacity:1;pointer-events:auto;transform:none}
.brand-mark{position:relative;width:70px;height:58px;margin-bottom:18px}.brand-mark i{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--mint);box-shadow:0 0 18px var(--mint)}.brand-mark i:nth-child(1){left:30px;top:2px}.brand-mark i:nth-child(2){left:4px;bottom:4px}.brand-mark i:nth-child(3){right:4px;bottom:4px}.brand-mark:before,.brand-mark:after{content:"";position:absolute;top:29px;width:37px;height:1px;background:linear-gradient(90deg,transparent,var(--mint))}.brand-mark:before{left:8px;transform:rotate(-57deg)}.brand-mark:after{right:8px;transform:rotate(57deg) scaleX(-1)}
.eyebrow{margin:0 0 10px;font-size:10px;font-weight:800;letter-spacing:.25em;color:#91d9d5;text-align:center}.screen h1{margin:0;text-align:center;font-size:clamp(48px,15vw,76px);line-height:.76;letter-spacing:-.055em}.screen h1 em{color:var(--gold);font-style:normal}.tagline{max-width:310px;margin:20px 0 23px;text-align:center;color:#b9bfd5;font-size:13px;line-height:1.55}
.level-map{display:grid;grid-template-columns:repeat(4,48px);gap:10px 17px;align-items:center;margin-bottom:22px}.level-node{padding:0;border:0;background:none;text-align:center;cursor:pointer}.level-node span{position:relative;display:grid;width:46px;height:46px;margin:auto;place-items:center;border-radius:14px;border:1px solid #ffffff2b;background:#101833;color:#687493;font-weight:800;box-shadow:inset 0 0 20px #0005}.level-node small{display:none}.level-node.unlocked span{color:#f6f1e8;border-color:#7ef0d55c}.level-node.selected span{color:#081426;background:var(--mint);border-color:#c9fff1;box-shadow:0 0 0 4px #7ef0d51a,0 0 24px #7ef0d562}.level-node.done span:after{content:"✓";position:absolute;right:-4px;bottom:-4px;display:grid;width:16px;height:16px;place-items:center;border-radius:50%;background:#ffd37a;color:#1b1731;font-size:9px}
.primary-button{position:relative;width:min(100%,360px);min-height:70px;padding:12px 58px 12px 20px;border:1px solid #baffef;border-radius:20px;background:linear-gradient(135deg,#6de8cf,#51cfc7);color:#081427;text-align:left;box-shadow:0 16px 44px #05091c70,0 0 30px #68ead53b;cursor:pointer}.primary-button small{display:block;font-size:9px;letter-spacing:.15em;opacity:.68}.primary-button strong{display:block;margin-top:4px;font-size:17px;letter-spacing:.02em}.primary-button>span{position:absolute;right:22px;top:17px;font-size:30px}.control-hint{margin:16px 0 0;color:#868fae;font-size:10px;text-align:center}.control-hint b{color:#d6d9e8;letter-spacing:.09em}
.toast{position:absolute;z-index:8;left:50%;top:104px;max-width:86%;padding:10px 16px;border:1px solid #ffffff24;border-radius:999px;background:#101735e8;color:#f7f1e9;font-size:12px;font-weight:700;transform:translate(-50%,-12px);opacity:0;transition:.25s;pointer-events:none;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}
.result{background:radial-gradient(circle at 50% 35%,#33417de8,#111735f5 56%,#070c1d)}.result-orbit{display:grid;width:116px;height:116px;margin-bottom:26px;place-items:center;border:1px solid #7ef0d570;border-radius:50%;box-shadow:0 0 60px #7ef0d532,inset 0 0 35px #7ef0d51c;animation:float 3s ease-in-out infinite}.result-orbit span{font-size:52px;color:var(--mint);filter:drop-shadow(0 0 14px #7ef0d5)}.result h2{max-width:340px;margin:0;text-align:center;font-size:31px;line-height:1.05}.result-stars{margin:22px 0 18px;color:var(--gold);font-size:33px;letter-spacing:.16em;text-shadow:0 0 18px #ffd37a80}.result-stars .off{color:#ffffff1c;text-shadow:none}.result-row{display:flex;width:min(100%,310px);margin-bottom:23px;border-top:1px solid #ffffff1c;border-bottom:1px solid #ffffff1c}.result-row span{flex:1;padding:14px;text-align:center}.result-row span+span{border-left:1px solid #ffffff1c}.result-row small{display:block;color:#8f9abc;font-size:9px;letter-spacing:.18em}.result-row strong{display:block;margin-top:5px;font-size:22px}.text-button{margin-top:15px;padding:8px;border:0;background:none;color:#9ea7c3;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
@keyframes float{50%{transform:translateY(-7px) rotate(6deg)}}
@keyframes coinBump{50%{transform:scale(1.28);filter:brightness(1.35)}}
@media(min-width:620px){body{display:grid;place-items:center;background:#060b18}.game{width:min(100%,520px);height:min(100%,920px);max-height:100vh;box-shadow:0 0 0 1px #ffffff12,0 30px 100px #000}.screen{padding-left:40px;padding-right:40px}}
@media(max-height:700px){.brand-mark{display:none}.eyebrow{margin-bottom:6px}.tagline{margin:10px 0}.level-map{gap:7px 14px;margin-bottom:12px}.level-node span{width:42px;height:42px}.screen h1{font-size:44px}.primary-button{min-height:60px}.control-hint{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}