:root { --clay: #C8553D; --ink: #3A2A20; --cream: #FFF6EC; --sand: #F7D9BF; --disp: "Baloo 2", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: radial-gradient(120% 90% at 50% 20%, #FFF1E2 0%, #F9DCC3 55%, #EDB999 100%); color: var(--ink); font-family: var(--disp); 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; }
body.hammer #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: 999px; background: var(--ink); color: var(--sand); font-size: 13px; text-decoration: none; letter-spacing: .04em; }
.plate { display: flex; align-items: baseline; gap: 6px; padding: 4px 14px; border-radius: 16px; background: var(--cream); box-shadow: 0 3px 0 rgba(58,42,32,.2); }
.plate small { font-size: 13px; opacity: .7; }
.plate b { font-size: 26px; font-weight: 800; line-height: 1.1; }
.plate .kind { margin-left: 2px; padding: 0 9px; border-radius: 999px; background: var(--clay); color: #fff; font-size: 12px; line-height: 20px; align-self: center; }
body[data-kind="boss"] .plate .kind { background: #7B3FE4; }
.goal { flex: 1 1 200px; max-width: 360px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 16px; background: var(--cream); box-shadow: 0 3px 0 rgba(58,42,32,.2); }
.goal svg { width: 20px; height: 20px; color: var(--clay); fill: currentColor; stroke: none; }
.goal .bar { flex: 1; height: 12px; border-radius: 999px; background: #EAD2BD; overflow: hidden; }
.goal .bar i { display: block; height: 100%; background: linear-gradient(90deg, #FF8A5B, var(--clay)); transform-origin: left; transform: scaleX(0); transition: transform .35s cubic-bezier(.3,1.3,.5,1); }
.goal b { font-size: 15px; min-width: 64px; text-align: right; font-variant-numeric: tabular-nums; }
.tools { margin-left: auto; display: flex; gap: 8px; }
.ib { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 14px; background: var(--cream); color: var(--ink); box-shadow: 0 3px 0 rgba(58,42,32,.22); }
.ib svg { width: 21px; height: 21px; }
.ib:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(58,42,32,.22); }
.ib:disabled { opacity: .4; cursor: default; }
.ib em { position: absolute; right: -5px; top: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--clay); color: #fff; font-style: normal; font-size: 12px; line-height: 20px; }
body.hammer #hammerBtn { background: var(--clay); color: #fff; }
.mute .offi { display: none; } .mute.off .on { display: none; } .mute.off .offi { display: block; }
.hint { position: fixed; z-index: 5; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; width: max-content; max-width: 92vw; padding: 7px 16px; border-radius: 999px; background: rgba(58,42,32,.82); color: var(--cream); font-size: 14px; font-weight: 500; text-align: center; pointer-events: none; }
.toast { position: fixed; z-index: 7; left: 50%; top: 24%; transform: translateX(-50%); margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--ink); color: var(--sand); font-size: 18px; pointer-events: none; animation: tin .3s ease; }
@keyframes tin { from { opacity: 0; transform: translate(-50%, 8px); } }
#floats { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.float { position: absolute; transform: translate(-50%, -50%); font-size: 30px; font-weight: 800; color: #fff; text-shadow: 0 2px 0 var(--clay), 0 4px 10px rgba(58,42,32,.4); animation: rise 1.1s ease-out forwards; }
.float.gold { color: #FFE27A; text-shadow: 0 2px 0 #A36A00, 0 4px 10px rgba(58,42,32,.4); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } to { opacity: 0; transform: translate(-50%, -180%) scale(1); } }

.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: 26px; background: var(--cream); box-shadow: 0 8px 0 rgba(58,42,32,.18), 0 30px 70px rgba(120,60,30,.3); 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-size: 34px; font-weight: 800; line-height: 1.05; color: var(--clay); }
.card p { margin: 0 0 16px; font-weight: 500; line-height: 1.4; }
.card .kicker { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #9B7A66; }
.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: #EAD2BD; }
.stars i.on { background: #FFB23E; 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: 16px; background: var(--clay); color: #fff; font-size: 21px; font-weight: 800; box-shadow: 0 4px 0 #8E3522; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8E3522; }
.btn.ghost { background: #F3E1D0; color: var(--ink); box-shadow: 0 4px 0 #D9BCA3; 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(--clay); 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: 13px; letter-spacing: .1em; text-transform: uppercase; color: #9B7A66; }
.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: 10px; background: #F3E1D0; font-size: 14px; font-weight: 800; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.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: #D9BCA3; }
.node em i.on { background: #E08A00; }
.node.hard { background: #FFD1C2; } .node.boss { background: #D9C6FF; }
.node.cur { background: var(--clay); color: #fff; }
.node:disabled { opacity: .35; cursor: default; }

.ogmark { display: none; }
body.og #stage { right: 42%; }
body.og .ogmark { display: block; position: fixed; z-index: 8; right: 5%; top: 50%; transform: translateY(-50%); }
body.og .ogmark h1 { margin: 0; font-size: 150px; font-weight: 800; line-height: .82; color: var(--clay); text-shadow: 0 8px 0 rgba(58,42,32,.15); }
body.og .ogmark p { margin: 18px 0 0; font-size: 30px; }
body.demo .top, body.demo .hint, body.demo .card, body.demo .toast, body.demo #floats { display: none !important; }
@media (max-width: 560px) {
  .sign { display: none; }
  .goal { order: 3; flex: 1 1 100%; max-width: none; }
  .ib { width: 40px; height: 40px; }
  .tools { gap: 6px; }
  .hint { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .card, .stars i.on, .float, .toast { animation: none; } }