@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700&family=Inter:wght@400;500;600;700&display=swap');

:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background:#080809; color:#f5f2ef; }
* { box-sizing:border-box; }
html, body, #app { min-height:100%; margin:0; }
body { min-width:320px; background:radial-gradient(circle at 50% 25%, #241011 0, #0d0b0c 36rem, #080809 65rem); }
button, input { font:inherit; }
button { color:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid #ff4d45; outline-offset:4px; }
.game-shell { --red:#f33832; --line:#312a2b; min-height:100vh; padding:0 clamp(1rem,4vw,4rem) 2rem; overflow:hidden; position:relative; }
.game-shell::before { content:""; position:fixed; inset:-20%; pointer-events:none; background:radial-gradient(circle at 50% 32%, rgba(243,56,50,calc(.08 + var(--intensity) * .13)), transparent 30%); animation:breathe calc(3s - var(--intensity) * 1.4s) ease-in-out infinite; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:2; }
.brand { color:#fff; text-decoration:none; font:900 1.15rem/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; }
.brand span { color:var(--red); }
.wallet { border:1px solid #493637; border-radius:99px; padding:.55rem .9rem; font-weight:700; background:#151112; }
.token { color:#ff4d45; text-shadow:0 0 12px #f33832; }
.token.small { font-size:.7rem; }
.hero { min-height:680px; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; z-index:1; }
.eyebrow,.kicker { font:700 .72rem/1 "Barlow Condensed",sans-serif; color:#a69c9c; letter-spacing:.22em; }
.hero h1 { font:800 clamp(4.5rem,13vw,9.5rem)/.9 "Barlow Condensed",sans-serif; margin:.5rem 0 1rem; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.hero h1:focus { outline:none; }
.progress-track { width:min(390px,80vw); height:2px; background:#392d2e; }
.progress-fill { height:100%; background:var(--red); box-shadow:0 0 12px var(--red); transition:width .2s linear; }
.next-reward { color:#9f9696; font-size:.72rem; margin:.6rem 0 1.8rem; text-transform:uppercase; letter-spacing:.11em; }
.hold-button { width:clamp(190px,42vw,270px); aspect-ratio:1; border:0; border-radius:50%; padding:0; background:transparent; position:relative; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; }
.hold-button:disabled { cursor:default; opacity:.58; }
.hold-ring { position:absolute; inset:0; border-radius:50%; border:1px solid #7b2b2a; box-shadow:0 0 35px rgba(243,56,50,.12), inset 0 0 35px rgba(243,56,50,.07); animation:ring 2.8s ease-in-out infinite; }
.hold-ring::before,.hold-ring::after { content:""; position:absolute; border-radius:50%; inset:10px; border:1px solid #331c1d; }
.hold-ring::after { inset:-12px; border-color:#28191a; }
.hold-core { position:absolute; inset:22px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 48% 38%, #9e2421, #5c1111 53%, #2b0d0e 100%); border:1px solid #d2443e; box-shadow:inset 0 5px 18px rgba(255,255,255,.08), inset 0 -20px 35px rgba(0,0,0,.35), 0 15px 45px rgba(0,0,0,.5); transition:transform .12s,filter .12s; }
.hold-button:not(:disabled):active .hold-core,.hold-button.is-holding .hold-core { transform:scale(.96); filter:brightness(1.25); }
.hold-button.is-holding .hold-ring { animation:ring .85s ease-in-out infinite; border-color:#ff4d45; }
.hold-icon { font-size:1.6rem; margin-bottom:.6rem; }
.hold-core strong { font:800 clamp(1.15rem,4vw,1.5rem)/1 "Barlow Condensed",sans-serif; letter-spacing:.1em; }
.hold-core small { color:#c69693; font-size:.58rem; margin-top:.65rem; letter-spacing:.08em; }
.run-meta { display:flex; margin-top:2rem; border:1px solid var(--line); background:rgba(15,13,14,.7); }
.run-meta span { padding:.65rem 1rem; color:#81797a; font-size:.63rem; text-transform:uppercase; letter-spacing:.1em; border-right:1px solid var(--line); }
.run-meta span:last-child { border:0; }
.run-meta b { color:#eee; margin-left:.3rem; }
.new-run { margin-top:1rem; border:1px solid #74413f; background:#1b1213; padding:.75rem 1.2rem; cursor:pointer; font:700 .72rem "Barlow Condensed",sans-serif; letter-spacing:.12em; }
.new-run:hover { background:#2a1718; border-color:#b4433f; }
.dashboard { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; position:relative; }
.panel { border:1px solid var(--line); background:rgba(14,12,13,.92); padding:1.2rem; }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.panel-heading h2 { font:700 1.55rem/1 "Barlow Condensed",sans-serif; margin:.25rem 0 0; text-transform:uppercase; letter-spacing:.04em; }
.panel-heading>span { color:#6f6869; font-size:.65rem; }
.kicker { color:var(--red); font-size:.58rem; }
.leader-row,.history-row { display:grid; align-items:center; border-bottom:1px solid #211d1e; min-height:50px; font-size:.78rem; }
.leader-row { grid-template-columns:42px 1fr auto; }
.leader-row .rank { color:#635d5e; font:700 .7rem "Barlow Condensed"; }
.leader-row .name { letter-spacing:.08em; }
.leader-row strong { font:700 .95rem "Barlow Condensed"; font-variant-numeric:tabular-nums; }
.leader-row em { color:var(--red); font:700 .52rem Inter; margin-left:.4rem; }
.player-row { background:linear-gradient(90deg,rgba(243,56,50,.1),transparent); }
.shop p,.empty-state { color:#756e6f; font-size:.75rem; }
.bundles { display:grid; gap:.55rem; }
.bundles button,.restore-action,.modal-actions button { border:1px solid #392f30; background:#161314; padding:.8rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; text-align:left; }
.bundles button:hover,.modal-actions button:hover { border-color:#74413f; background:#1d1718; }
.bundles b { font:700 1rem "Barlow Condensed"; letter-spacing:.08em; }
.bundles small { display:block; color:#70696a; font-size:.58rem; margin-top:.2rem; text-transform:uppercase; }
.bundles>button>strong { color:#aaa0a0; font-size:.72rem; }
.history { grid-column:1 / -1; }
.history-row { grid-template-columns:120px 1fr auto; color:#777071; }
.history-row strong { color:#eee; font-variant-numeric:tabular-nums; }
.history-row time { font-size:.68rem; }
footer { max-width:1180px; margin:1rem auto 0; padding:1rem 0; display:flex; justify-content:space-between; color:#615b5c; font-size:.67rem; }
footer label { display:flex; gap:.45rem; align-items:center; }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:1rem; background:rgba(3,2,3,.86); backdrop-filter:blur(8px); }
.release-modal { width:min(440px,100%); background:#100d0e; border:1px solid #553031; padding:2rem; text-align:center; box-shadow:0 30px 100px #000; }
.release-mark { display:grid; place-items:center; margin:0 auto 1.2rem; width:54px; height:54px; border:1px solid var(--red); border-radius:50%; color:var(--red); font:800 2rem "Barlow Condensed"; }
.release-modal h2 { font:800 4rem/1 "Barlow Condensed"; margin:.5rem 0; font-variant-numeric:tabular-nums; }
.release-modal>p { color:#898081; font-size:.78rem; line-height:1.6; }
.restore-action { width:100%; margin-top:1.4rem; background:var(--red); border-color:#ff625c; padding:1rem; }
.restore-action:disabled { filter:grayscale(.7); opacity:.4; }
.restore-action span { font:800 1.1rem "Barlow Condensed"; letter-spacing:.08em; }
.restore-action small { display:block; font:400 .58rem Inter; opacity:.75; margin-top:.2rem; }
.restore-action strong { font:800 1.3rem "Barlow Condensed"; }
.modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:.6rem; }
.modal-actions button { justify-content:center; font-size:.7rem; }
.warning { color:#ff716b!important; }
.countdown { position:fixed; z-index:20; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#080708eF; }
.countdown span { font:700 .8rem "Barlow Condensed"; letter-spacing:.3em; color:#a99c9c; }
.countdown strong { font:900 14rem/.9 "Barlow Condensed"; color:var(--red); text-shadow:0 0 60px rgba(243,56,50,.5); animation:count .95s ease-out infinite; }
.toast { position:fixed; z-index:30; top:1.25rem; left:50%; transform:translateX(-50%); border:1px solid #74413f; background:#171213; color:#fff; padding:.8rem 1.2rem; font:700 .7rem Inter; letter-spacing:.1em; box-shadow:0 10px 40px #000; }
.boot { min-height:100vh; display:grid; place-content:center; text-align:center; color:#8f8788; font:700 .7rem Inter; letter-spacing:.2em; }
.boot-mark { color:#ef413b; font:900 3rem "Barlow Condensed",sans-serif; }
#blazor-error-ui { display:none; position:fixed; z-index:99; bottom:0; left:0; right:0; padding:1rem; background:#6e1717; }
#blazor-error-ui .dismiss { float:right; border:0; background:none; }
@keyframes breathe { 50% { opacity:.55; transform:scale(1.06); } }
@keyframes ring { 50% { transform:scale(1.025); box-shadow:0 0 55px rgba(243,56,50,.2); } }
@keyframes count { from { transform:scale(1.25); opacity:.2; } to { transform:scale(1); opacity:1; } }
.reduce-motion * { animation:none!important; transition:none!important; }
@media (max-width:700px) {
    .game-shell { padding-inline:1rem; }
    .topbar { height:62px; }
    .hero { min-height:620px; }
    .hero h1 { font-size:4.5rem; }
    .run-meta span { padding:.55rem .65rem; }
    .dashboard { grid-template-columns:1fr; }
    .history { grid-column:auto; }
    .history-row { grid-template-columns:1fr auto; padding:.7rem 0; }
    .history-row time { grid-column:1/-1; margin-top:.35rem; }
    footer { flex-direction:column; gap:.75rem; }
}
@media (prefers-reduced-motion:reduce) { * { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }