:root { --ink: #2A2340; --blue: #3D7BFF; --red: #E8484A; --gold: #FFD23F; --parch: #FFF6E2; --disp: "Titan One", system-ui, sans-serif; --body: "Signika", system-ui, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: #A9DDF5; color: var(--ink); font-family: var(--body); 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; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
.lbl { position: absolute; transform: translate(-50%, -50%); font-family: var(--disp); font-size: 18px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; animation: rise 1s ease-out forwards; white-space: nowrap; }
.lbl.dmg { color: #FFE17A; } .lbl.hurt { color: #FF9C9C; font-size: 15px; }
.lbl.up { font-size: 24px; color: var(--gold); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, -20%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); } to { opacity: 0; transform: translate(-50%, -200%); } }

.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)); }
.home { color: var(--ink); text-decoration: none; font-size: 14px; opacity: .7; margin-right: auto; }
.home b { color: var(--blue); }
.stagebar { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px 18px 8px; border-radius: 14px; background: var(--parch); border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font-family: var(--disp); font-size: 20px; white-space: nowrap; }
.stagebar svg { width: 18px; height: 18px; color: var(--blue); }
.stagebar.boss { background: #FFE0DC; } .stagebar.boss svg { color: var(--red); }
.coins { display: flex; align-items: center; gap: 6px; padding: 5px 14px 5px 8px; border-radius: 99px; background: var(--parch); border: 3px solid var(--ink); font-family: var(--disp); font-size: 19px; }
.coins svg { width: 22px; height: 22px; }
.ib { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--parch); border: 3px solid var(--ink); color: var(--ink); }
.ib svg { width: 20px; height: 20px; }
.mute .offi { display: none; } .mute.off .on { display: none; } .mute.off .offi { display: block; }
.power { position: fixed; z-index: 5; left: 50%; top: calc(max(12px, env(safe-area-inset-top)) + 58px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-family: var(--disp); font-size: 15px; }
.power .mine { color: var(--blue); } .power .theirs { color: var(--red); }
.power span { min-width: 44px; text-align: center; -webkit-text-stroke: 4px #fff; paint-order: stroke fill; }
.pbar { width: min(46vw, 240px); height: 12px; border-radius: 6px; background: var(--red); border: 2.5px solid var(--ink); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--blue); transform-origin: left; transition: transform .3s; }
.hint { position: fixed; z-index: 5; left: 50%; bottom: calc(max(14px, env(safe-area-inset-bottom)) + 104px); transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 12px; background: var(--ink); color: #fff; white-space: nowrap; animation: bob 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes bob { 50% { transform: translateX(-50%) translateY(-5px); } }

.dock { position: fixed; z-index: 5; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: stretch; gap: 10px; }
.buy { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 8px 14px; border-radius: 18px; background: var(--parch); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); text-align: left; }
.buy > svg { grid-row: span 2; width: 30px; height: 30px; color: var(--blue); }
.buy span { font-family: var(--disp); font-size: 17px; }
.buy em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 15px; }
.buy em svg { width: 16px; height: 16px; }
.buy:disabled { opacity: .5; cursor: default; }
.buy:not(:disabled):active, .fight:not(:disabled):active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.fight { min-width: 118px; padding: 0 22px; border-radius: 18px; background: var(--red); color: #fff; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-family: var(--disp); font-size: 28px; -webkit-text-stroke: 1px var(--ink); }
.fight:disabled { opacity: .5; cursor: default; }
body.fighting .dock, body.fighting .hint { display: none; }
.speed { display: none; position: fixed; z-index: 5; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); align-items: center; gap: 6px; padding: 8px 14px; border-radius: 14px; background: var(--parch); border: 3px solid var(--ink); font-family: var(--disp); font-size: 17px; }
.speed.on { background: var(--gold); }
body.fighting .speed { display: flex; }

.result { position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 340px); padding: 24px 22px 16px; text-align: center; border-radius: 24px; background: var(--parch); border: 4px solid var(--ink); box-shadow: 0 8px 0 var(--ink), 0 30px 60px rgba(42,35,64,.3); animation: pop .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.result h2 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 48px; color: var(--gold); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; }
.result.lost h2 { color: #B9C2D6; }
.result p { margin: 6px 0 10px; line-height: 1.35; }
.gain { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--disp); font-size: 30px; }
.gain svg { width: 32px; height: 32px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 13px; border-radius: 16px; background: var(--blue); color: #fff; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-family: var(--disp); font-size: 24px; }
.btn svg { width: 22px; height: 22px; stroke-width: 2.6; }
.link { margin-top: 12px; background: none; border: 0; color: #7A6E92; font-size: 14px; text-decoration: underline; }
.buy:focus-visible, .fight:focus-visible, .btn:focus-visible, .ib:focus-visible, .speed:focus-visible { outline: 3px dashed var(--red); outline-offset: 3px; }

.ogmark { display: none; }
body.og .ogmark { display: block; position: fixed; z-index: 8; left: 6%; top: 50%; transform: translateY(-50%); }
body.og .ogmark h1 { margin: 0; font-family: var(--disp); font-weight: 400; font-size: 104px; line-height: .95; color: var(--gold); -webkit-text-stroke: 14px var(--ink); paint-order: stroke fill; }
body.og .ogmark p { display: inline-block; margin: 14px 0 0; padding: 8px 16px; border-radius: 14px; background: var(--parch); border: 3px solid var(--ink); font-size: 26px; }
body.demo .top, body.demo .power, body.demo .dock, body.demo .hint, body.demo .speed, body.demo .result, body.demo #fx { display: none !important; }
@media (max-width: 560px) {
  .home { display: none; }
  .stagebar { position: static; transform: none; font-size: 17px; padding: 6px 12px; margin-right: auto; }
  .buy { padding: 6px 10px; } .buy > svg { width: 24px; height: 24px; } .buy span { font-size: 15px; }
  .fight { min-width: 92px; font-size: 24px; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .hint, .result, .lbl { animation: none; } }