:root { --sign: #FFC93C; --ink: #1E1E24; --asphalt: #4A4D59; --cream: #F6E9C9; --disp: "Archivo Black", Impact, sans-serif; --body: "Archivo", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: #9ED67E; 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; 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)); }
.sign { padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--sign); font-family: var(--disp); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.plate { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 8px; padding: 6px 16px 7px; border-radius: 10px; background: var(--sign); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.plate small { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.plate b { font-family: var(--disp); font-size: 24px; line-height: 1; }
.stats { margin-left: auto; display: flex; gap: 8px; }
.stats span { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.88); font-size: 16px; }
.stats svg { width: 18px; height: 18px; }
.stats span.bad { background: #FFD6D0; color: #B3261E; }
.ib { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; border: 3px solid var(--ink); background: #fff; color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.ib svg { width: 20px; height: 20px; }
.ib:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.mute .offi { display: none; } .mute.off .on { display: none; } .mute.off .offi { display: block; }
.hint { position: fixed; z-index: 5; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; width: max-content; max-width: 92vw; padding: 9px 16px; border-radius: 10px; background: var(--ink); color: var(--cream); font-size: 14px; text-align: center; pointer-events: none; }
.card { position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 340px); padding: 24px 22px 20px; text-align: center; border-radius: 18px; background: var(--sign); border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink), 0 30px 60px rgba(0,0,0,.25); animation: in .4s cubic-bezier(.3,1.5,.5,1); }
@keyframes in { from { transform: translate(-50%, -40%) scale(.9); opacity: 0; } }
.card h2 { margin: 0 0 6px; font-family: var(--disp); font-weight: 400; font-size: 32px; line-height: 1.05; text-transform: uppercase; }
.card p { margin: 0 0 16px; }
.stars { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.stars i { width: 48px; height: 48px; 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(30,30,36,.2); }
.stars i.on { background: var(--ink); 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%; padding: 13px; border-radius: 12px; border: 0; background: var(--ink); color: var(--sign); font-family: var(--disp); font-size: 22px; text-transform: uppercase; }
.btn svg { width: 20px; height: 20px; stroke-width: 2.6; }
.btn:focus-visible, .ib:focus-visible, .sign:focus-visible { outline: 3px dashed #B3261E; outline-offset: 3px; }
.ogmark { display: none; }
body.og .ogmark { display: block; position: fixed; z-index: 8; right: 6%; top: 50%; transform: translateY(-50%); padding: 22px 30px 26px; border-radius: 18px; background: var(--sign); border: 6px solid var(--ink); box-shadow: 0 10px 0 var(--ink); }
body.og .ogmark h1 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 96px; line-height: .9; text-transform: uppercase; }
body.og .ogmark p { margin: 12px 0 0; font-size: 24px; }
body.demo .top, body.demo .hint, body.demo .card { display: none !important; }
@media (max-width: 520px) { .sign { display: none; } .plate { position: static; transform: none; } .hint { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .card, .stars i.on { animation: none; } }

.plate .kind { margin-left: 4px; padding: 1px 8px; border-radius: 6px; background: #B3261E; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
body[data-kind="boss"] .plate { background: #FF7A5C; }
.ib.on { background: var(--sign); }
.ib:disabled { opacity: .35; cursor: default; }
.toast { position: fixed; z-index: 7; left: 50%; top: 20%; transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 10px; background: var(--ink); color: var(--sign); font-family: var(--disp); text-transform: uppercase; pointer-events: none; }
.card .kicker { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.card.map { width: min(94vw, 460px); max-height: 86vh; overflow: auto; text-align: left; }
.card.map h2 { text-align: center; }
.card.map h3 { margin: 12px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.card .x { position: absolute; right: 10px; top: 10px; 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: 4px; }
.node { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; border: 2px solid var(--ink); background: #fff; font-family: var(--disp); font-size: 13px; padding: 0; }
.node em { display: flex; gap: 1px; } .node em i { width: 7px; height: 7px; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); background: currentColor; }
.node.hard { background: #FFD6D0; } .node.boss { background: #FF7A5C; color: #fff; }
.node.cur { box-shadow: 0 0 0 3px var(--ink); }
.node:disabled { opacity: .35; cursor: default; }