@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
:root { --bg: #0b0716; --fg: #f4f0ff; --muted: #a9a2c4; --pink: #ff3d7f; --gold: #ffd23d; --cyan: #3dd6ff; --green: #3dffb5; --card: rgba(22, 16, 44, 0.92); --pw: 540px; --px: 0px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden; overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body { font-family: "Space Grotesk", "Segoe UI", Roboto, Arial, sans-serif; }
#app { position: fixed; inset: 0; }
#screen { position: absolute; inset: 0; display: block; }
.hidden { display: none !important; }
#hud #btnPause { position: absolute; top: 54px; right: calc(var(--px) + 8px); width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(10,6,24,.6); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 5; }
#touchbtns button { position: absolute; z-index: 5; border-radius: 50%; border: 3px solid rgba(255,255,255,.55); color: #fff; font: 700 13px/1 "Space Grotesk", sans-serif; letter-spacing: .04em; touch-action: none; }
#btnTap { right: calc(var(--px) + 14px); bottom: calc(env(safe-area-inset-bottom) + 96px); width: 84px; height: 84px; background: radial-gradient(circle at 35% 30%, rgba(255,210,61,.55), rgba(255,61,127,.35)); }
#btnSpecial { left: calc(var(--px) + 14px); bottom: calc(env(safe-area-inset-bottom) + 96px); width: 66px; height: 66px; background: rgba(20,14,40,.6); opacity: .55; }
#btnSpecial.ready { opacity: 1; background: radial-gradient(circle, rgba(61,214,255,.7), rgba(255,61,127,.5)); animation: pulse .5s infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }

#ui { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.scr { pointer-events: auto; position: absolute; inset: 0; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 60px) 16px calc(env(safe-area-inset-bottom) + 84px); display: flex; flex-direction: column; align-items: center; background: radial-gradient(ellipse at 50% 20%, rgba(40,16,70,.72), rgba(8,5,18,.9)); touch-action: pan-y; -webkit-user-select: text; user-select: text; }
.scr > * { width: 100%; max-width: 560px; }
.scr.title { justify-content: center; background: radial-gradient(ellipse at 50% 40%, rgba(40,16,70,.35), rgba(8,5,18,.75)); text-align: center; }
.scr.pause, .scr.result { background: rgba(8,5,18,.86); }
h2 { font-size: 30px; margin: 4px 0 6px; letter-spacing: .02em; text-align: center; }
h2.win { color: var(--green); text-shadow: 0 0 22px rgba(61,255,181,.5); }
h2.lose { color: #ff5a7a; }
h3 { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.sub { color: var(--muted); text-align: center; margin: 0 0 6px; line-height: 1.45; }
.sub.small { font-size: 13px; }
.logo { font-size: clamp(48px, 14vw, 92px); font-weight: 700; line-height: .9; letter-spacing: -.02em; text-align: center; margin-bottom: 14px; }
.logo span { color: #fff; }
.logo b { display: block; background: linear-gradient(90deg, #ff3d7f, #ffd23d 45%, #3dd6ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(255,61,127,.45)); animation: beat .45s infinite alternate ease-out; }
.logo.small { font-size: 44px; margin-bottom: 18px; }
@keyframes beat { from { transform: scale(1.03); } to { transform: scale(1); } }
.tag { font-size: 18px; color: #e6defa; margin: 0 0 28px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 18px; }
.menu { display: flex; flex-direction: column; gap: 10px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { appearance: none; border: 1px solid rgba(255,255,255,.18); background: rgba(30,22,58,.92); color: #fff; font: 700 17px/1.2 "Space Grotesk", sans-serif; padding: 14px 16px; border-radius: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .08s, background .15s; }
.btn:hover, .btn:focus-visible { background: rgba(52,36,96,.95); outline: none; border-color: rgba(255,255,255,.45); }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(90deg, #ff3d7f, #ff7a3d); border: 0; box-shadow: 0 6px 24px rgba(255,61,127,.35); }
.btn.big { font-size: 22px; padding: 18px 40px; width: auto; align-self: center; }
.btn.ghost { background: transparent; }
.btn.locked, .btn[aria-disabled="true"] { opacity: .5; }
.btn small { font-size: 12px; color: var(--muted); font-weight: 500; }
.btn.danger { color: #ff8a9a; border-color: rgba(255,90,120,.4); }
.coins { display: inline-flex; align-items: center; gap: 5px; color: var(--gold); font-size: 15px; }
.coins i, i.coin { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 2px #8a5a00; display: inline-block; }
h2 .coins { font-size: 20px; margin-left: 8px; vertical-align: middle; }
.genre-quick { margin-top: 18px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.seg button { flex: 1 1 auto; min-width: 88px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(20,14,40,.8); color: #ddd; font: 700 14px "Space Grotesk", sans-serif; cursor: pointer; }
.seg button.on { background: #fff; color: #140c28; border-color: #fff; }
.seg button.locked { opacity: .4; cursor: default; }
.worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.wcard { position: relative; text-align: left; border-radius: 16px; padding: 14px 12px 12px; min-height: 140px; border: 2px solid var(--c); background: linear-gradient(160deg, var(--bg), #0b0716); color: #fff; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 0 18px color-mix(in srgb, var(--c) 30%, transparent); }
.wcard .wn { font-size: 11px; letter-spacing: .14em; color: var(--c); }
.wcard b { font-size: 19px; }
.wcard .ws { font-size: 12px; color: var(--muted); }
.wcard .wb { font-size: 12px; color: #ffd6e4; margin-top: auto; }
.wcard .wbest { font-size: 12px; color: var(--gold); }
.wcard .wdone { position: absolute; top: 10px; right: 10px; font-size: 12px; color: var(--green); }
.wcard.locked { filter: grayscale(.9); opacity: .55; cursor: default; }
.heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hcard { text-align: left; border-radius: 14px; padding: 10px; border: 2px solid rgba(255,255,255,.15); background: rgba(20,14,40,.85); color: #fff; font-family: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.hcard b { color: var(--c); font-size: 17px; }
.hcard span { font-size: 12px; color: var(--muted); }
.hcard small { font-size: 11px; line-height: 1.3; color: #cfc8e6; }
.hcard.on { border-color: var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 45%, transparent); }
.hcard.locked { opacity: .45; cursor: default; }
.foot { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.foot .btn { flex: 1 1 140px; }
.shop { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid rgba(255,255,255,.1); }
.item .it { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.item small { color: var(--muted); font-size: 12px; }
.item.locked { opacity: .5; }
.pips { display: flex; gap: 3px; }
.pips i { width: 14px; height: 5px; border-radius: 2px; background: rgba(255,255,255,.15); }
.pips i.on { background: var(--gold); }
.btn.buy { padding: 8px 12px; font-size: 15px; min-width: 92px; }
.btn.buy.poor { opacity: .45; }
.need { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.chk { display: flex; gap: 10px; align-items: center; padding: 8px 2px; font-size: 15px; }
.chk input { width: 20px; height: 20px; accent-color: var(--pink); }
.rng { display: flex; align-items: center; gap: 12px; padding: 8px 2px; font-size: 15px; }
.rng input[type=range] { flex: 1; accent-color: var(--pink); }
.rng select { flex: 1; padding: 8px; border-radius: 10px; background: #1a1230; color: #fff; border: 1px solid rgba(255,255,255,.2); font: inherit; }
.help p { line-height: 1.5; margin: 0 0 10px; color: #e6defa; }
.story { margin: auto 0; }
.story p { font-size: 19px; line-height: 1.55; color: #ece6ff; margin: 0 0 16px; opacity: 0; animation: fade 1s forwards; }
.story p:nth-child(2) { animation-delay: .8s; } .story p:nth-child(3) { animation-delay: 1.8s; } .story p:nth-child(4) { animation-delay: 2.8s; } .story p:nth-child(5) { animation-delay: 3.8s; } .story p:nth-child(n+6) { animation-delay: 4.6s; }
.story p.last { color: var(--gold); font-size: 21px; }
.story p.big { font-size: 26px; color: var(--green); }
.story h3 { opacity: 0; animation: fade 1s 3.4s forwards; }
@keyframes fade { to { opacity: 1; } }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.stats div { background: var(--card); border-radius: 12px; padding: 10px; text-align: center; border: 1px solid rgba(255,255,255,.08); }
.stats span { display: block; font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.stats b { font-size: 20px; }
.stats b.gold { color: var(--gold); }
.unlocks { background: linear-gradient(135deg, rgba(255,210,61,.18), rgba(255,61,127,.14)); border: 1px solid rgba(255,210,61,.5); border-radius: 16px; padding: 4px 14px 12px; margin: 8px 0; animation: pop .5s ease-out; }
.unlocks h3 { color: var(--gold); }
.unl { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 16px; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.submit input { padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: #140c28; color: #fff; font: 700 17px "Space Grotesk", sans-serif; text-transform: uppercase; min-width: 0; }
.board .tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.board ol { margin: 0; padding: 0; list-style: none; counter-reset: r; }
.board li { counter-increment: r; display: flex; gap: 6px; align-items: center; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.04); margin-bottom: 3px; font-size: 14px; }
.board li::before { content: counter(r); width: 20px; color: var(--muted); font-size: 12px; }
.board li .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board li .w { color: var(--muted); font-size: 11px; }
.board li b { color: var(--gold); }
.ico { vertical-align: middle; }
.pause-genre { margin-top: 18px; }
.noscript { position: absolute; top: 40%; width: 100%; text-align: center; }
@media (max-width: 420px) { .heroes { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } h2 { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .logo b, #btnSpecial.ready { animation: none; } .story p, .story h3 { animation-duration: .01s; animation-delay: 0s !important; } }