:root{--bg:#070b14;--surface:#0f1725;--surface-soft:#0b131f;--panel:#0f1a2a;--panel-2:#111b2d;--panel-3:#0a1322;--line:#26405f;--line-soft:#2f4868;--text:#ecf2ff;--muted:#99a8bf;--green:#3dd598;--blue:#6dd0ff;--yellow:#ffd47d;--orange:#ffaf5a;--red:#ff6d6d;--amber:#ffb85a;--frost:#9bc4ff;--overlay:rgba(5,10,18,.64)}@keyframes panelPulse{0%{transform:translateY(0)}50%{transform:translateY(-1px)}to{transform:translateY(0)}}@keyframes shimmer{0%{transform:translateX(-120%)}to{transform:translateX(130%)}}*{box-sizing:border-box}body,html{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}body{padding:18px;color:var(--text);background:radial-gradient(120% 125% at 20% 8%,#1b2b47 0,transparent 45%),radial-gradient(150% 130% at 90% 18%,#27173f 0,transparent 50%),linear-gradient(160deg,#05080e,#070b14 55%,#05080e);background-attachment:fixed}body:before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,hsla(0,0%,100%,.03),hsla(0,0%,100%,.03) 1px,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0) 4px);opacity:.12;mix-blend-mode:soft-light;z-index:-1}.layout{width:min(1440px,100%);margin:0 auto;display:grid;grid-gap:12px;gap:12px}.hud-header{display:grid;align-items:end;grid-gap:10px;gap:10px;border-radius:14px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:linear-gradient(120deg,color-mix(in srgb,var(--surface) 80%,#1b3257 20%),color-mix(in srgb,var(--surface) 88%,#0f1722 12%));padding:12px 16px;box-shadow:inset 0 0 0 1px rgba(162,197,255,.06),0 10px 28px rgba(6,12,22,.34);position:relative;overflow:hidden}.hud-header:hover{animation:panelPulse 2.6s ease-in-out infinite}.hud-header:after{content:"";position:absolute;inset:0 -18px auto auto;width:120px;height:120px;background:radial-gradient(circle,rgba(255,212,123,.22),rgba(255,212,123,0));pointer-events:none;transform:translateY(-38px)}.kicker{margin:0;color:var(--yellow);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.hud-header h1{margin:3px 0 4px;font-size:30px;font-weight:700;letter-spacing:.01em}.subtext{margin:0;max-width:70ch}.header-meta,.subtext{color:var(--muted);font-size:13px}.header-meta{justify-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-width:240px}.pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;border:1px solid color-mix(in srgb,var(--yellow) 30%,var(--line));background:color-mix(in srgb,var(--yellow) 12%,transparent);font-size:11px;letter-spacing:.03em;text-transform:uppercase}.header-meta strong{color:var(--text);font-size:16px}.sep{width:1px;height:16px;background:var(--line);display:inline-block}.game-shell{display:grid;grid-template-columns:minmax(560px,1fr) 410px;grid-gap:12px;gap:12px;align-items:start}.stage{position:relative;aspect-ratio:16/9;min-height:0;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:14px;overflow:hidden;background:#050a12;box-shadow:inset 0 0 0 1px color-mix(in srgb,#95a8c4 10%,transparent),0 22px 44px rgba(3,8,16,.55)}.stage:before{background:repeating-linear-gradient(90deg,hsla(0,0%,100%,.03),hsla(0,0%,100%,.03) 1px,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,0) 16px),radial-gradient(circle at 35% 8%,hsla(0,0%,100%,.06),transparent 45%);mix-blend-mode:soft-light;opacity:.55;box-shadow:inset 0 0 36px hsla(0,0%,100%,.06),inset 0 0 0 1px hsla(0,0%,100%,.12);z-index:1}.stage:after,.stage:before{content:"";position:absolute;inset:0;pointer-events:none}.stage:after{border:1px solid rgba(154,184,224,.08);border-radius:12px;z-index:2}.game-canvas{width:100%;height:100%;display:block;filter:contrast(1.08) saturate(1.12);position:relative;z-index:0}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:linear-gradient(rgba(6,9,15,.5),rgba(6,9,15,.25));z-index:3}.overlay-card:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.15),hsla(0,0%,100%,0));transform:translateX(-120%);transition:transform .18s ease;animation:shimmer 2.8s ease-in-out infinite;border-radius:14px;pointer-events:none;mix-blend-mode:screen}.overlay-card{width:min(460px,96%);border-radius:14px;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:color-mix(in srgb,var(--surface) 70%,#02060c 30%);padding:16px;box-shadow:0 14px 40px rgba(5,10,20,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:relative;overflow:hidden}.overlay-kicker{margin:0;color:var(--blue);font-size:11px;letter-spacing:.1em;text-transform:uppercase}.overlay-card h2{margin:6px 0 10px;font-size:28px}.panel{display:grid;grid-gap:10px;gap:10px;align-content:start}.panel section{position:relative;overflow:hidden}.panel section:after{content:"";position:absolute;inset:auto 6px 6px;width:60px;height:1px;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.42),transparent)}.overlay-muted{color:var(--muted);margin:0 0 2px}.overlay-card p{margin:0 0 6px;color:#d2deed}.card{border-radius:12px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);padding:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 88%,#0a111c 12%),color-mix(in srgb,var(--surface-soft) 94%,#05090f 6%));box-shadow:inset 0 0 0 1px rgba(184,213,255,.08)}.card h2,.card h3{margin:0 0 8px;font-size:14px;letter-spacing:.03em;text-transform:uppercase;color:#dce6ff}.card-head:before{content:"";position:absolute;right:14px;top:14px;width:46px;height:4px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(164,202,255,.32))}.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;position:relative}.status-pill{border-radius:999px;font-size:11px;padding:4px 10px;border:1px solid color-mix(in srgb,var(--line) 65%,transparent);text-transform:uppercase;letter-spacing:.08em;background:color-mix(in srgb,#fff 4%,transparent)}.status-menu,.status-paused,.status-reward{color:var(--yellow)}.status-running{color:#8effb4}.status-gameOver{color:var(--red)}.status-gameOver,.status-menu,.status-paused,.status-reward,.status-running{text-shadow:0 0 14px currentColor}.run-meta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px;border-top:1px dashed color-mix(in srgb,var(--line) 55%,transparent);margin-top:8px;padding-top:8px}.run-meta span{color:#dbe7fa;border:1px solid color-mix(in srgb,var(--line) 56%,transparent);border-radius:999px;padding:2px 8px}.status-paused{animation:panelPulse 1.6s ease-in-out infinite}.stat-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px}.stat{border-radius:10px;border:1px solid color-mix(in srgb,var(--line) 74%,transparent);background:color-mix(in srgb,#fff 3%,transparent);padding:8px;transition:transform .16s ease}.stat:hover{transform:translateY(-1px)}.stat span{display:block;color:var(--muted);font-size:12px}.stat strong{display:block;margin-top:4px;font-size:24px;line-height:1.1;color:#f1f7ff}.meter-grid{display:grid;grid-gap:10px;gap:10px}.meter .label-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted);margin-bottom:4px;font-size:12px}.bar{height:12px;border-radius:999px;border:1px solid #263d5b;overflow:hidden;background:#0b1320;position:relative}.bar:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.22),hsla(0,0%,100%,0));pointer-events:none;animation:shimmer 2.2s linear infinite}.bar>span{display:block;height:100%;transition:width .18s linear}.hp-fill{background:linear-gradient(90deg,#7ce8c6,#38b57d)}.xp-fill{background:linear-gradient(90deg,#7bc2ff,#4f92ff)}.progress-fill{background:linear-gradient(90deg,#ffcf71,#ff8a4a)}.hp-fill,.progress-fill,.xp-fill{box-shadow:0 0 12px hsla(0,0%,100%,.2)}.shield-row{margin-top:6px;color:var(--blue);font-size:12px}.meta h3{margin-bottom:10px}.meta-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.meta p{margin:0;color:var(--muted);font-size:12px}.desc{color:#d3deee;margin:6px 0 0;line-height:1.45;font-size:13px}.controls{display:grid;grid-template-columns:1fr;grid-gap:8px;gap:8px}.buff-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));grid-gap:8px}.buff,.buff-grid{display:grid;gap:8px}.buff{border:1px solid color-mix(in srgb,var(--line) 65%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--panel-3) 82%,#081018 18%),color-mix(in srgb,var(--panel) 80%,#0e1521 20%));border-radius:10px;padding:8px;grid-template-columns:18px 1fr auto;grid-gap:8px}.buff,.buff-icon{align-items:center}.buff-icon{width:18px;height:18px;border-radius:999px;display:inline-flex;justify-content:center;background:color-mix(in srgb,#fff 8%,transparent);border:1px solid color-mix(in srgb,#8fc9ff 35%,#22304f 65%);font-size:11px}.buff-copy{min-width:0}.buff-copy span{display:block;color:var(--muted);font-size:11px}.buff-copy strong{display:block;font-size:13px;color:#edf2ff;line-height:1.1}.buff-time{color:#d4e4ff;font-size:11px;letter-spacing:.03em}.buffs h3{margin-bottom:7px}.btn{border-radius:10px;height:40px;color:#f2f6ff;background:color-mix(in srgb,#9db2d5 18%,#0f1f33 82%);border:1px solid color-mix(in srgb,#98add0 50%,#213555 50%);cursor:pointer;font-weight:600;transition:all .14s ease;position:relative;overflow:hidden;letter-spacing:.02em}.btn:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,hsla(0,0%,100%,.2) 45%,transparent 90%);transform:translateX(-130%);transition:transform .22s ease}.btn:hover{filter:brightness(1.05)}.btn:hover:before{transform:translateX(130%)}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(180deg,#ffd68c,#ffbd60);border-color:color-mix(in srgb,var(--orange) 55%,#6f3f09);color:#241100}.btn-ghost{background:color-mix(in srgb,#9db2d5 17%,#0f1f33 83%)}.btn-danger{background:linear-gradient(180deg,#f87878,#ea4f4f);border-color:color-mix(in srgb,var(--red) 45%,#6a1f1f)}.reward h3{margin-bottom:6px}.reward p{margin:0;color:var(--muted)}.reward-grid{display:grid;grid-gap:8px;gap:8px;margin-top:10px}.reward-card{text-align:left;border-radius:10px;border:1px solid color-mix(in srgb,#355177 65%,transparent);background:color-mix(in srgb,#101a2b 60%,transparent);color:var(--text);padding:10px}.reward-card:hover{border-color:color-mix(in srgb,var(--yellow) 45%,#355177);background:color-mix(in srgb,#1c2f4a 58%,transparent)}.reward-kind{display:inline-block;margin-bottom:4px;color:var(--yellow);text-transform:uppercase;letter-spacing:.08em;font-size:11px}.reward-card strong{display:block;margin-bottom:4px;font-size:13px}.reward-card p{margin:0;color:#d7e3f7;line-height:1.35;font-size:12px}@media (max-width:1280px){.game-shell{grid-template-columns:1fr}.panel{grid-template-columns:1fr 1fr;display:grid}.panel .controls,.panel .reward,.panel .run-hud{grid-column:1/-1}.hud-header h1{font-size:26px}}@media (max-width:900px){body{padding:10px}.header-meta{justify-self:start;min-width:0}.panel{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel .run-hud{order:1}.panel .controls{order:2}.panel .buffs{order:3}.panel .meter-grid{order:4}.panel .reward{order:5}.panel .meta{order:6}}@media (max-width:720px){body,html{-webkit-text-size-adjust:100%}.game-shell,.layout{gap:10px}.stage{aspect-ratio:16/10}.hud-header{padding:10px 12px}.hud-header h1{font-size:22px}.header-meta,.subtext{font-size:12px}.header-meta{justify-self:stretch;gap:8px}.header-meta strong{font-size:15px}.overlay-card{padding:12px;width:min(360px,94%)}.overlay-card h2{font-size:20px}.overlay-card p{font-size:13px}.buff-grid{grid-template-columns:1fr}.btn{height:46px;font-size:15px;touch-action:manipulation}.reward-card{padding:12px}}@media (max-width:560px){.stage{aspect-ratio:4/3}.overlay-card{width:min(300px,92%)}}@media (hover:none){.hud-header:hover{animation:none}}