:root { --bg: #0C0818; --ink: #EDE8FF; --soft: #9C92C9; --cyan: #7FE9FF; --pink: #FF4DD2; --gold: #FFC93C; --green: #5CFF9D; --disp: "Audiowide", system-ui, sans-serif; --body: "Space Grotesk", 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% 40%, #1C1238 0%, #120B26 45%, var(--bg) 100%); color: var(--ink); font-family: var(--body); font-weight: 500; 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; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(75% 70% at 50% 50%, transparent 55%, rgba(5,2,14,.75) 100%); }
body.low .vignette { background: radial-gradient(75% 70% at 50% 50%, transparent 45%, rgba(120,0,40,.55) 100%); }
.hurt { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(80% 80% at 50% 50%, transparent 40%, rgba(255,40,90,.6)); opacity: 0; }
.joy { position: fixed; z-index: 4; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 2px solid rgba(127,233,255,.35); background: rgba(127,233,255,.06); pointer-events: none; }
.joy i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(127,233,255,.5); box-shadow: 0 0 20px rgba(127,233,255,.6); }

.hud { position: fixed; z-index: 5; inset: 0 0 auto 0; padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)); pointer-events: none; }
.hud .ib, .hud button { pointer-events: auto; }
.xp { position: relative; height: 14px; margin: 0 calc(-1 * max(12px, env(safe-area-inset-left))); background: rgba(255,255,255,.07); }
.xp i { position: absolute; inset: 0; background: linear-gradient(90deg, #5CC8FF, #9D7BFF, #FF4DD2); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 14px rgba(157,123,255,.8); }
.xp b { position: absolute; right: 12px; top: 0; font-family: var(--disp); font-weight: 400; font-size: 11px; line-height: 14px; letter-spacing: .08em; }
.xp em { font-style: normal; }
.row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.hp { display: flex; flex-direction: column; gap: 3px; width: min(34vw, 220px); }
.hp .bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; border: 1px solid rgba(255,255,255,.15); }
.hp .bar i { display: block; height: 100%; background: linear-gradient(90deg, #3DDC97, #5CFF9D); transform-origin: left; transition: transform .12s; }
body.low .hp .bar i { background: linear-gradient(90deg, #FF4D6D, #FF8A3D); }
.hp small { font-size: 11px; color: var(--soft); }
.clock { position: relative; display: flex; align-items: center; gap: 6px; margin: 0 auto; padding: 5px 14px 8px; border-radius: 12px; background: rgba(12,8,24,.6); border: 1px solid rgba(157,123,255,.3); }
.clock svg { width: 16px; height: 16px; color: var(--gold); fill: var(--gold); stroke: none; }
.clock b { font-family: var(--disp); font-weight: 400; font-size: 20px; letter-spacing: .06em; }
.night { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.night i { display: block; height: 100%; background: linear-gradient(90deg, #5C4DFF, var(--gold)); transform-origin: left; transform: scaleX(0); }
.stats { display: flex; gap: 6px; }
.stats span { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 10px; background: rgba(12,8,24,.6); font-weight: 700; font-size: 14px; }
.stats svg { width: 15px; height: 15px; color: var(--soft); }
.stats span:nth-child(2) svg { color: var(--gold); }
.ib { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid rgba(157,123,255,.35); background: rgba(12,8,24,.6); color: var(--ink); }
.ib svg { width: 19px; height: 19px; }
.mute .offi { display: none; } .mute.off .on { display: none; } .mute.off .offi { display: block; }
.kit { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.kitem { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(12,8,24,.7); border: 1px solid rgba(127,233,255,.35); }
.kitem.p { border-color: rgba(255,201,60,.35); }
.kitem svg { width: 19px; height: 19px; color: var(--cyan); } .kitem.p svg { color: var(--gold); }
.kitem i { position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 16px; border-radius: 999px; background: #2A1B4A; font-style: normal; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.boss { position: fixed; left: 50%; top: 74px; transform: translateX(-50%); width: min(80vw, 420px); text-align: center; }
.boss b { font-family: var(--disp); font-weight: 400; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #FF7AB6; text-shadow: 0 0 12px rgba(255,77,210,.7); }
.boss .bar { height: 10px; margin-top: 4px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.boss .bar i { display: block; height: 100%; background: linear-gradient(90deg, #FF4D6D, #FF4DD2); transform-origin: left; }
.banner { position: fixed; z-index: 6; left: 50%; top: 32%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.banner b { font-family: var(--disp); font-weight: 400; font-size: clamp(34px, 7vw, 60px); letter-spacing: .06em; color: #fff; text-shadow: 0 0 24px rgba(255,77,210,.9), 0 0 60px rgba(127,233,255,.5); }
.banner span { margin-top: 4px; color: var(--soft); font-size: 16px; }
.banner.go { animation: ban 2.2s ease both; }
@keyframes ban { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

.panel { position: fixed; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 420px); max-height: 94vh; overflow: auto; padding: 26px 22px 22px; text-align: center; border-radius: 22px; background: linear-gradient(180deg, rgba(34,22,68,.94), rgba(14,9,30,.96)); border: 1px solid rgba(157,123,255,.35); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(157,123,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: in .35s cubic-bezier(.2,1.3,.4,1); }
@keyframes in { from { opacity: 0; transform: translate(-50%, -46%) scale(.95); } }
.panel h2 { margin: 0 0 12px; font-family: var(--disp); font-weight: 400; font-size: 30px; letter-spacing: .05em; }
.panel p { margin: 0 0 14px; color: var(--soft); line-height: 1.45; }
.panel .kicker { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); }
.sign { display: inline-block; margin-bottom: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(157,123,255,.35); color: var(--soft); font-size: 12px; text-decoration: none; }
.logo { margin: 0; font-family: var(--disp); font-weight: 400; font-size: clamp(44px, 12vw, 64px); line-height: .95; letter-spacing: .02em; color: #fff; text-shadow: 0 0 30px rgba(127,233,255,.6); }
.logo span { display: block; background: linear-gradient(90deg, var(--cyan), #9D7BFF, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 18px rgba(255,77,210,.5)); }
.tag { margin-top: 10px !important; }
.heroes { display: grid; gap: 8px; margin: 6px 0 14px; }
.hero { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 11px 14px; border-radius: 14px; border: 1px solid rgba(157,123,255,.25); background: rgba(255,255,255,.04); text-align: left; }
.hero b { font-family: var(--disp); font-weight: 400; font-size: 17px; letter-spacing: .04em; }
.hero span { font-size: 13px; color: var(--soft); }
.hero.on { border-color: var(--cyan); background: rgba(127,233,255,.1); box-shadow: 0 0 20px rgba(127,233,255,.25); }
.hero.locked { opacity: .6; } .hero.locked span { color: var(--gold); }
.hero.shake { animation: sh .35s; } @keyframes sh { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.btn { display: block; width: 100%; margin-top: 8px; padding: 14px; border: 0; border-radius: 14px; background: linear-gradient(90deg, #5C4DFF, #FF4DD2); color: #fff; font-family: var(--disp); font-weight: 400; font-size: 19px; letter-spacing: .06em; box-shadow: 0 0 30px rgba(255,77,210,.35); }
.btn:active { transform: scale(.98); }
.btn.ghost { background: rgba(255,255,255,.06); border: 1px solid rgba(157,123,255,.35); box-shadow: none; font-family: var(--body); font-weight: 700; font-size: 16px; letter-spacing: 0; }
.btn:focus-visible, .hero:focus-visible, .offer:focus-visible, .buy:focus-visible, .ib:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.menurow { display: flex; align-items: center; gap: 10px; } .menurow .btn { flex: 1; }
.bank { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 12px; background: rgba(255,201,60,.1); color: var(--gold); font-weight: 700; margin-top: 8px; }
.bank svg { width: 16px; height: 16px; }
.keys { margin: 14px 0 0 !important; font-size: 13px; }
.offers { display: grid; gap: 10px; }
.offer { position: relative; display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(127,233,255,.3); background: rgba(127,233,255,.06); text-align: left; transition: transform .12s, background .12s; }
.offer.p { border-color: rgba(255,201,60,.35); background: rgba(255,201,60,.06); }
.offer:hover { transform: translateY(-2px); background: rgba(127,233,255,.12); }
.offer svg { grid-row: 1 / 3; width: 42px; height: 42px; padding: 8px; border-radius: 12px; background: rgba(12,8,24,.7); color: var(--cyan); }
.offer.p svg { color: var(--gold); }
.offer b { font-family: var(--disp); font-weight: 400; font-size: 17px; letter-spacing: .03em; }
.offer em { position: absolute; right: 36px; top: 12px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--pink); }
.offer span { font-size: 13px; color: var(--soft); }
.offer kbd { position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.08); font: 700 11px/20px var(--body); text-align: center; color: var(--soft); }
.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 12px; }
.results span { display: flex; flex-direction: column; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.05); }
.results small { font-size: 11px; color: var(--soft); text-transform: uppercase; letter-spacing: .1em; }
.results b { font-family: var(--disp); font-weight: 400; font-size: 20px; }
.srow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(157,123,255,.15); text-align: left; }
.srow b { display: block; font-weight: 700; } .srow span { font-size: 13px; color: var(--soft); }
.srow i { display: flex; gap: 3px; } .srow u { width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.15); } .srow u.on { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.buy { min-width: 64px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,201,60,.5); background: rgba(255,201,60,.12); color: var(--gold); font-weight: 700; }
.buy:disabled { opacity: .45; cursor: default; }

.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: 118px; line-height: .9; color: #fff; text-shadow: 0 0 40px rgba(255,77,210,.8), 0 0 90px rgba(127,233,255,.5); }
body.og .ogmark p { margin: 22px 0 0; font-size: 28px; color: var(--soft); }
body.demo .hud, body.demo .panel, body.demo .banner, body.demo .joy { display: none !important; }
@media (max-width: 560px) { .stats span:first-child { display: none; } .hp { width: 30vw; } .clock b { font-size: 17px; } .boss { top: 118px; } }
@media (prefers-reduced-motion: reduce) { .panel, .banner.go, .hero.shake { animation: none; } }