:root { --night: #140D38; --ink: #F4F0FF; --soft: #B8AEE8; --pink: #FF6B8B; --lime: #4EE3A4; --gold: #FFD24A; --font: "Fredoka", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(120% 80% at 50% 0%, #3A2491 0%, #1D1256 45%, var(--night) 100%); color: var(--ink); font-family: var(--font); font-weight: 600; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button { font: inherit; color: inherit; cursor: pointer; }
#cv { position: fixed; inset: 0; z-index: 1; }
/* soft drifting lights behind the board */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; filter: blur(60px); opacity: .35; animation: drift 22s ease-in-out infinite alternate; }
.bg i:nth-child(1) { background: #FF4F9A; left: -12vmax; top: 10%; }
.bg i:nth-child(2) { background: #3C7BFF; right: -14vmax; top: -8%; animation-delay: -7s; }
.bg i:nth-child(3) { background: #22D3A0; left: 30%; bottom: -24vmax; animation-delay: -13s; opacity: .22; }
@keyframes drift { to { transform: translate(6vmax, -5vmax) scale(1.15); } }

.top { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); pointer-events: none; }
.top > * { pointer-events: auto; }
.sign { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--ink); font-size: 13px; text-decoration: none; border: 1px solid rgba(255,255,255,.14); }
.tools { margin-left: auto; display: flex; gap: 8px; }
.ib { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.08); color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ib svg { width: 20px; height: 20px; }
.ib:active { transform: scale(.94); }
body[data-mode="classic"] .ib.adv { display: none; }
.mute .offi { display: none; } .mute.off .on { display: none; } .mute.off .offi { display: block; }
.scorebox { position: fixed; z-index: 4; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.scorebox small { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.scorebox b { font-size: 48px; font-weight: 700; line-height: 1; text-shadow: 0 4px 24px rgba(160,120,255,.6); font-variant-numeric: tabular-nums; }
.best { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--gold); }
.best svg { width: 15px; height: 15px; fill: var(--gold); stroke: none; }
.best em { font-style: normal; }
.goals { display: flex; gap: 8px; margin-top: 6px; }
.goal { display: flex; align-items: center; gap: 5px; padding: 3px 10px 3px 6px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); }
.goal i { width: 18px; height: 18px; clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); background: linear-gradient(135deg, #7FF3FF, #1FB7D6); }
.goal.g2 i { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: linear-gradient(135deg, #FF8FD8, #E0359E); }
.goal.g3 i { clip-path: polygon(50% 0, 100% 90%, 0 90%); background: linear-gradient(135deg, #B6FF6B, #5FC21A); }
.goal b { font-size: 17px; }
.goal.done { opacity: .45; }
.combo { position: fixed; z-index: 4; right: max(16px, env(safe-area-inset-right)); top: 64px; padding: 6px 14px; border-radius: 999px; background: linear-gradient(90deg, var(--pink), #FF9F43); color: #fff; font-size: 15px; box-shadow: 0 6px 20px rgba(255,80,140,.4); animation: pulse 1s ease-in-out infinite; }
.combo b { font-size: 19px; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.callout { position: fixed; z-index: 6; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.callout b { font-size: clamp(40px, 9vw, 72px); font-weight: 700; line-height: 1; background: linear-gradient(180deg, #FFF 20%, #FFD24A 60%, #FF7AB6); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 rgba(40,10,90,.8)) drop-shadow(0 10px 30px rgba(255,120,200,.5)); }
.callout span { margin-top: 4px; font-size: 20px; color: #fff; text-shadow: 0 2px 0 rgba(40,10,90,.8); }
.callout.go { animation: call 1.3s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes call { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }
.toast { position: fixed; z-index: 6; left: 50%; top: 34%; transform: translateX(-50%); margin: 0; padding: 8px 20px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 20px; pointer-events: none; }

.card { position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(90vw, 380px); padding: 26px 22px 20px; text-align: center; border-radius: 28px; background: linear-gradient(180deg, rgba(58,36,145,.92), rgba(24,14,70,.95)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: in .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes in { from { opacity: 0; transform: translate(-50%, -44%) scale(.9); } }
.card h2 { margin: 0 0 8px; font-size: 32px; font-weight: 700; }
.card p { margin: 0 0 16px; color: var(--soft); font-weight: 500; line-height: 1.4; }
.logo { margin: 0; font-size: 64px; font-weight: 700; line-height: .95; letter-spacing: -.02em; }
.logo span { background: linear-gradient(90deg, var(--pink), var(--gold), var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { margin: 12px 0 18px !important; }
.mode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin-top: 10px; padding: 14px 18px; border: 0; border-radius: 18px; background: linear-gradient(135deg, #FF6B8B, #FF9F43); color: #fff; text-align: left; box-shadow: 0 6px 0 #B83256, 0 14px 30px rgba(255,90,140,.35); }
.mode.alt { background: linear-gradient(135deg, #34D399, #3B82F6); box-shadow: 0 6px 0 #1E5E9E, 0 14px 30px rgba(60,160,255,.35); }
.mode b { font-size: 24px; } .mode span { font-size: 14px; font-weight: 500; opacity: .95; } .mode em { font-style: normal; font-weight: 700; }
.mode:active { transform: translateY(3px); }
.final { display: flex; flex-direction: column; align-items: center; margin: 6px 0 14px; }
.final b { font-size: 60px; font-weight: 700; line-height: 1; }
.final span { color: var(--gold); }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 8px; padding: 13px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #FF6B8B, #FF9F43); color: #fff; font-size: 20px; font-weight: 700; box-shadow: 0 5px 0 #B83256; }
.btn svg { width: 20px; height: 20px; stroke-width: 2.6; }
.btn.ghost { background: rgba(255,255,255,.1); box-shadow: none; border: 1px solid rgba(255,255,255,.18); font-size: 17px; }
.btn:active { transform: translateY(3px); }
.btn:focus-visible, .ib:focus-visible, .mode:focus-visible, .node:focus-visible, .sign:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 12px; }
.stars i { width: 50px; height: 50px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: rgba(255,255,255,.15); }
.stars i.on { background: linear-gradient(180deg, #FFE98A, #FFB020); animation: pop .5s cubic-bezier(.3,1.7,.5,1) both; animation-delay: var(--d); }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } }
.card.map { width: min(94vw, 480px); max-height: 86vh; overflow: auto; text-align: left; }
.card.map h2 { text-align: center; }
.card.map h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.card .x { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; }
.mrow { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.node { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; border: 0; border-radius: 12px; background: rgba(255,255,255,.1); font-size: 14px; font-weight: 700; }
.node em { display: flex; gap: 1px; } .node em i { width: 6px; height: 6px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: rgba(255,255,255,.25); }
.node em i.on { background: var(--gold); }
.node.hard { background: rgba(255,107,139,.3); } .node.boss { background: rgba(180,140,255,.4); }
.node:disabled { opacity: .3; cursor: default; }

.ogmark { display: none; }
body.og #cv { left: 0; }
body.og .ogmark { display: block; position: fixed; z-index: 8; left: 6%; top: 50%; transform: translateY(-50%); }
body.og .ogmark h1 { margin: 0; font-size: 130px; font-weight: 700; line-height: .85; background: linear-gradient(180deg, #FFF 30%, #FF9FC4); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.og .ogmark p { margin: 18px 0 0; font-size: 30px; color: var(--soft); }
body.demo .top, body.demo .scorebox, body.demo .card, body.demo .toast, body.demo .combo, body.demo .callout { display: none !important; }
@media (max-width: 560px) { .sign { display: none; } .ib { width: 38px; height: 38px; } .tools { gap: 6px; } .scorebox { top: 58px; } .scorebox b { font-size: 40px; } .combo { top: auto; bottom: 20px; right: 50%; transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .bg i, .combo, .callout.go, .card, .stars i.on { animation: none; } }