:root { --ink: #2B2D42; --lilac: #DCD3FF; --pop: #FF4D5E; --blue: #3A86FF; --disp: "Luckiest Guy", "Arial Black", sans-serif; --body: "Quicksand", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: linear-gradient(170deg, #E9E3FF 0%, #D6E6FF 55%, #C9F1EC 100%); color: var(--ink); font-family: var(--body); font-weight: 700; 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; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }

.top { position: fixed; z-index: 5; top: 0; left: 0; right: 0; display: flex; flex-wrap: wrap; 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: var(--ink); color: #fff; font-size: 13px; text-decoration: none; }
.plate { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 6px; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 rgba(43,45,66,.12); }
.plate b { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; background: var(--blue); color: #fff; font-family: var(--disp); font-weight: 400; font-size: 20px; line-height: 1; padding-top: 3px; }
.plate span { font-family: var(--disp); font-weight: 400; font-size: 18px; text-transform: capitalize; letter-spacing: .02em; }
.plate .kind { font-style: normal; padding: 1px 9px; border-radius: 999px; background: var(--pop); color: #fff; font-size: 12px; }
.prog { flex: 1 1 160px; max-width: 280px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 rgba(43,45,66,.12); }
.prog .bar { flex: 1; height: 10px; border-radius: 999px; background: #ECE7FF; overflow: hidden; }
.prog .bar i { display: block; height: 100%; background: linear-gradient(90deg, #3DDC84, #3A86FF, #9B5DE5); transform-origin: left; transform: scaleX(0); transition: transform .25s; }
.prog b { font-size: 14px; min-width: 38px; text-align: right; }
.chips { display: flex; gap: 6px; }
.chips span { display: flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 rgba(43,45,66,.12); font-size: 14px; }
.chips svg { width: 17px; height: 17px; color: #8A7FD1; }
.chips .warn { background: #FFE3E6; color: #C21F33; } .chips .warn svg { color: #C21F33; }
.tools { margin-left: auto; display: flex; gap: 8px; }
.ib { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(43,45,66,.14); }
.ib svg { width: 20px; height: 20px; }
.ib:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(43,45,66,.14); }
.mute .offi { display: none; } .mute.off .on { display: none; } .mute.off .offi { display: block; }
.hint { position: fixed; z-index: 5; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; width: max-content; max-width: 94vw; padding: 6px 14px; border-radius: 999px; background: rgba(43,45,66,.78); color: #fff; font-size: 13px; text-align: center; pointer-events: none; }
.toast { position: fixed; z-index: 7; left: 50%; top: 30%; transform: translateX(-50%); margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--disp); font-weight: 400; font-size: 20px; letter-spacing: .03em; pointer-events: none; }

.card { position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 360px); padding: 26px 22px 20px; text-align: center; border-radius: 30px; background: #fff; box-shadow: 0 10px 0 rgba(43,45,66,.1), 0 30px 70px rgba(80,60,160,.25); animation: in .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes in { from { opacity: 0; transform: translate(-50%, -44%) scale(.9); } }
.card h2 { margin: 0 0 8px; font-family: var(--disp); font-weight: 400; font-size: 34px; letter-spacing: .02em; line-height: 1.05; color: var(--blue); }
.card p { margin: 0 0 16px; font-weight: 600; line-height: 1.45; }
.card .kicker { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #8A7FD1; }
.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: #ECE7FF; }
.stars i.on { background: linear-gradient(180deg, #FFE066, #FF9F1C); animation: pop .5s cubic-bezier(.3,1.7,.5,1) both; animation-delay: var(--d); }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 8px; padding: 13px; border: 0; border-radius: 999px; background: var(--blue); color: #fff; font-family: var(--disp); font-weight: 400; font-size: 22px; letter-spacing: .03em; box-shadow: 0 5px 0 #1F5BC2; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #1F5BC2; }
.btn svg { width: 20px; height: 20px; stroke-width: 2.8; }
.btn:focus-visible, .ib:focus-visible, .node:focus-visible, .sign:focus-visible { outline: 3px dashed var(--pop); outline-offset: 3px; }
.card.map { width: min(94vw, 460px); 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: #8A7FD1; }
.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: #F1EDFF; font-family: var(--disp); font-weight: 400; font-size: 15px; }
.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: #D5CCF5; }
.node em i.on { background: #FF9F1C; }
.node.hard { background: #FFE3E6; } .node.boss { background: #FFE9B8; }
.node.cur { background: var(--blue); color: #fff; }
.node:disabled { opacity: .35; cursor: default; }

.ogmark { display: none; }
body.og .ogmark { display: block; position: fixed; z-index: 8; left: 6%; top: 50%; transform: translateY(-50%) rotate(-3deg); }
body.og .ogmark h1 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 136px; line-height: .86; color: var(--blue); text-shadow: 0 8px 0 #1F5BC2; letter-spacing: .02em; }
body.og .ogmark p { margin: 20px 0 0; font-size: 28px; }
body.demo .top, body.demo .hint, body.demo .card, body.demo .toast { display: none !important; }
@media (max-width: 620px) { .sign { display: none; } .chips span { padding: 6px 9px; } .ib { width: 38px; height: 38px; } .tools { gap: 6px; } .prog { order: 5; max-width: none; flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .card, .stars i.on { animation: none; } }