:root { --navy: #1E3350; --deep: #13233A; --tool: #FFC531; --ink: #13233A; --paper: #F7F1E3; --disp: "Lilita One", Impact, sans-serif; --body: "Nunito", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
/* pegboard */
body { background: radial-gradient(circle at 50% 50%, rgba(8,16,28,.75) 0 3px, rgba(255,255,255,.07) 3.6px, transparent 4.4px) 0 0 / 30px 30px, radial-gradient(120% 90% at 50% 30%, #2A4870 0%, var(--navy) 55%, #122238 100%); color: var(--paper); font-family: var(--body); font-weight: 800; 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; }
body.drill #stage { cursor: crosshair; }

.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: 6px; background: var(--tool); color: var(--ink); font-family: var(--disp); font-size: 14px; text-decoration: none; letter-spacing: .03em; }
.plate { display: flex; align-items: baseline; gap: 7px; padding: 4px 14px 5px; border-radius: 10px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.plate small { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.plate b { font-family: var(--disp); font-size: 26px; font-weight: 400; line-height: 1.05; }
.plate .kind { align-self: center; padding: 0 8px; border-radius: 6px; background: #E8453C; color: #fff; font-size: 11px; line-height: 19px; text-transform: uppercase; letter-spacing: .08em; }
body[data-kind="boss"] .plate .kind { background: #9A5BE0; }
.count { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; background: rgba(8,16,28,.55); font-size: 18px; }
.count svg { width: 20px; height: 20px; color: var(--tool); }
.tools { margin-left: auto; display: flex; gap: 8px; }
.ib { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.4); }
.ib svg { width: 22px; height: 22px; }
.ib:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.ib:disabled { opacity: .4; cursor: default; }
.ib em { position: absolute; right: -6px; top: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--tool); color: var(--ink); font-style: normal; font-size: 12px; line-height: 20px; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
body.drill #drillBtn { background: var(--tool); }
.mute .offi { display: none; } .mute.off .on { display: none; } .mute.off .offi { display: block; }
.hint { position: fixed; z-index: 5; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; width: max-content; max-width: 94vw; padding: 7px 14px; border-radius: 8px; background: rgba(8,16,28,.72); color: var(--paper); font-size: 13.5px; font-weight: 600; text-align: center; pointer-events: none; }
.toast { position: fixed; z-index: 7; left: 50%; top: 42%; transform: translateX(-50%); margin: 0; padding: 8px 18px; border-radius: 10px; background: var(--tool); color: var(--ink); font-family: var(--disp); font-size: 20px; pointer-events: none; box-shadow: 0 4px 0 rgba(0,0,0,.35); }

.card { position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 360px); padding: 24px 22px 20px; text-align: center; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 8px 0 rgba(0,0,0,.35), 0 30px 70px rgba(0,0,0,.45); border-top: 10px solid var(--tool); animation: in .4s cubic-bezier(.3,1.5,.5,1); }
@keyframes in { from { transform: translate(-50%, -42%) scale(.92); opacity: 0; } }
.card h2 { margin: 0 0 6px; font-family: var(--disp); font-weight: 400; font-size: 36px; line-height: 1.05; }
.card p { margin: 0 0 16px; font-weight: 600; line-height: 1.4; }
.card .kicker { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #6B7A8F; }
.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: #DCD5C4; }
.stars i.on { background: var(--tool); 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: 12px; border: 0; border-radius: 12px; background: var(--navy); color: var(--tool); font-family: var(--disp); font-size: 22px; box-shadow: 0 4px 0 var(--deep); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--deep); }
.btn.ghost { background: #E8E0CC; color: var(--ink); box-shadow: 0 4px 0 #C7BCA2; font-family: var(--body); font-size: 16px; }
.btn svg { width: 20px; height: 20px; stroke-width: 2.6; }
.btn:focus-visible, .ib:focus-visible, .sign:focus-visible, .node:focus-visible { outline: 3px dashed var(--tool); outline-offset: 3px; }
.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: .12em; text-transform: uppercase; color: #6B7A8F; }
.card .x { position: absolute; right: 12px; 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: 5px; }
.node { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border: 0; border-radius: 50%; background: #E8E0CC; font-family: var(--disp); font-size: 14px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
.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: #C7BCA2; }
.node em i.on { background: #D99A00; }
.node.hard { background: #FFD3CE; } .node.boss { background: #E2D2FF; }
.node.cur { background: var(--navy); color: var(--tool); }
.node:disabled { opacity: .35; cursor: default; }

.ogmark { display: none; }
body.og #stage { right: 44%; }
body.og .ogmark { display: block; position: fixed; z-index: 8; right: 5%; top: 50%; transform: translateY(-50%) rotate(-2deg); padding: 26px 34px 30px; border-radius: 18px; background: var(--tool); color: var(--ink); box-shadow: 0 12px 0 rgba(0,0,0,.35); }
body.og .ogmark h1 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 120px; line-height: .85; }
body.og .ogmark p { margin: 16px 0 0; font-size: 26px; }
body.demo .top, body.demo .hint, body.demo .card, body.demo .toast { display: none !important; }
@media (max-width: 560px) {
  .sign { display: none; }
  .ib { width: 40px; height: 40px; }
  .tools { gap: 6px; }
  .hint { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .card, .stars i.on { animation: none; } }