:root { color-scheme: dark; --ink:#eef4ff; --muted:#93a0bd; --bg:#0e1326; --panel:#171e36; --line:#2d385b; --gold:#f6bd4d; --cyan:#55d7ff; --red:#ff6675; --green:#78e0a7; }
* { box-sizing:border-box; } body { margin:0; min-width:320px; overflow-x:hidden; background:radial-gradient(1200px 800px at 50% -20%,#263669 0%,#11172b 48%,#090d1b 100%); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
button { font:inherit; color:inherit; cursor:pointer; } .app-shell { max-width:1580px; margin:auto; min-height:100vh; padding:22px 28px 28px; }
.topbar { height:64px; display:flex; align-items:center; gap:28px; border-bottom:1px solid var(--line); padding-bottom:17px; } .brand { display:flex; align-items:center; gap:8px; font-size:20px; letter-spacing:.11em; font-weight:700; white-space:nowrap; } .brand b { color:var(--gold); }.brand-coin { width:31px; height:31px; object-fit:contain; filter:drop-shadow(0 0 7px #f6bd4d88); }
.top-stats { display:flex; justify-content:center; gap:8px; flex:1; }.stat { min-width:132px; padding:4px 17px 3px; border-left:1px solid var(--line); }.stat:last-child { border-right:1px solid var(--line); }.stat span,.eyebrow,.large-counter span { display:block; font:500 10px "DM Mono",monospace; letter-spacing:.15em; color:var(--muted); }.stat strong { display:block; margin-top:1px; font-size:22px; letter-spacing:.03em; }.combo-stat strong { color:var(--cyan); }.icon-button,.text-button { border:1px solid var(--line); background:#151b31; min-height:37px; padding:0 13px; }.icon-button:hover,.text-button:hover { border-color:var(--gold); color:var(--gold); }
.game-layout { display:grid; grid-template-columns:minmax(205px,.82fr) minmax(530px,2.35fr) minmax(205px,.82fr); gap:18px; padding-top:22px; align-items:start; }.panel { background:linear-gradient(150deg,#1a223d,#131a31); border:1px solid var(--line); box-shadow:0 18px 50px #03050d44; }.upgrade-panel,.intel-panel { padding:16px; }.section-title { display:flex; gap:11px; align-items:center; font:500 10px "DM Mono",monospace; letter-spacing:.14em; color:var(--muted); }.section-title i { height:1px; flex:1; background:var(--line); }
.upgrade-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:18px 0; }.upgrade-wrap { display:grid; grid-template-columns:1fr auto; }.upgrade { position:relative; overflow:hidden; min-width:0; text-align:left; padding:11px 10px 10px 42px; border:1px solid #324065; background:#121a31; transition:.16s transform,.16s border-color; }.upgrade:hover:not(:disabled) { transform:translateY(-2px); border-color:var(--gold); }.upgrade:disabled { opacity:.45; cursor:not-allowed; }.upgrade-ad { border:1px solid #5a476f; border-left:0; background:#211b35; color:#d8c5ff; padding:7px 8px; font:700 8px ui-monospace,SFMono-Regular,monospace; letter-spacing:.08em; writing-mode:vertical-rl; transform:rotate(180deg); }.upgrade-ad:hover { background:#372957; border-color:#b99af4; }.upgrade-icon { position:absolute; left:11px; top:11px; color:var(--gold); font-size:18px; }.upgrade strong { display:block; font-size:12px; }.upgrade small { display:block; margin-top:3px; color:var(--muted); font:9px "DM Mono",monospace; line-height:1.3; }.upgrade .cost { margin-top:7px; color:var(--gold); font:500 9px "DM Mono",monospace; }.run-card { margin-top:23px; padding:14px; border:1px solid #405077; background:#10172a; }.run-card strong { display:block; margin-top:7px; font-size:14px; }.run-card small { display:block; margin-top:8px; font:10px "DM Mono",monospace; color:var(--muted); }.progress { height:5px; margin-top:12px; background:#0a1022; }.progress span { display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold),#ffe59a); transition:width .25s; }
.play-panel { min-width:0; }.play-heading { display:flex; justify-content:space-between; align-items:end; margin:2px 1px 12px; }.play-heading h1 { margin:3px 0 0; font-size:clamp(26px,3vw,38px); letter-spacing:-.065em; line-height:1; }.play-heading h1 em,.help-dialog em { color:var(--gold); font-style:normal; }.text-button { font:500 10px "DM Mono",monospace; letter-spacing:.1em; }.canvas-frame { position:relative; overflow:hidden; aspect-ratio:1050/620; border:1px solid #44557d; background:#10192f; box-shadow:0 18px 45px #02050d66; }.canvas-frame canvas { display:block; width:100%; height:100%; touch-action:manipulation; }.vault-button { position:absolute; left:50%; top:32%; transform:translate(-50%,-50%); width:125px; height:125px; border-radius:50%; border:4px solid #ffe59a; background:radial-gradient(circle at 33% 28%,#fff6b9 0 3%,#ffd158 4% 30%,#c66c1e 31% 54%,#6d311a 55% 100%); color:#3e1a11; box-shadow:0 0 0 8px #f8b84626,0 16px 26px #02050c88,inset -10px -13px 0 #853d1d77; font-weight:700; letter-spacing:.13em; transition:transform .08s,filter .12s; }.vault-button:hover { filter:brightness(1.12); }.vault-button:active { transform:translate(-50%,-50%) scale(.92); }.vault-button span { display:block; font-size:18px; }.vault-button small { display:block; margin-top:5px; font:500 8px "DM Mono",monospace; letter-spacing:.12em; }.vault-spark { color:#fff7d3; font-size:25px!important; line-height:20px; }.toast { pointer-events:none; position:absolute; top:16px; left:50%; transform:translateX(-50%) translateY(-10px); opacity:0; padding:8px 12px; color:#fff8d9; background:#0b1124dd; border:1px solid var(--gold); font:500 11px "DM Mono",monospace; letter-spacing:.06em; transition:.25s; white-space:nowrap; }.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }.overdrive { display:none; position:absolute; left:50%; bottom:139px; transform:translateX(-50%); color:var(--cyan); text-shadow:0 0 18px #48d5ff; font:700 13px "DM Mono",monospace; letter-spacing:.18em; }.overdrive.active { display:block; animation:pulse .65s infinite alternate; }.bay-key { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin-top:10px; }.bay-key span { padding:9px 6px; border-top:2px solid var(--line); color:#dce5f8; text-align:center; font:500 10px "DM Mono",monospace; letter-spacing:.08em; }.bay-key i { display:block; margin-top:3px; color:var(--muted); font-style:normal; font-size:8px; letter-spacing:0; }.bay-key b,.help-grid b { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; }.gold-dot { background:var(--gold); }.blue-dot { background:var(--cyan); }.red-dot { background:var(--red); }.green-dot { background:var(--green); }
.large-counter { padding:19px 2px 16px; border-bottom:1px solid var(--line); }.large-counter strong { display:block; margin:5px 0; color:var(--gold); font-size:34px; letter-spacing:-.06em; }.large-counter:nth-child(3) strong { color:var(--cyan); }.large-counter small { color:var(--muted); font:10px "DM Mono",monospace; }.event-log { min-height:145px; padding-top:14px; color:var(--muted); font:10px/1.55 "DM Mono",monospace; }.log-entry { padding:5px 0; border-bottom:1px solid #26314e; }.log-entry b { color:var(--gold); }
.help-dialog { width:min(600px,calc(100% - 30px)); border:1px solid #53678f; padding:32px; color:var(--ink); background:linear-gradient(145deg,#202b4b,#11172b); box-shadow:0 35px 100px #000; }.help-dialog::backdrop { background:#050714b8; backdrop-filter:blur(5px); }.help-dialog h2 { margin:8px 0 9px; font-size:34px; letter-spacing:-.06em; }.help-dialog p { color:#b8c4dc; line-height:1.55; }.help-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:22px 0; }.help-grid article { padding:13px; border:1px solid var(--line); background:#11192d; }.help-grid h3 { margin:7px 0 0; font-size:14px; }.help-grid p { margin:4px 0 0; font-size:12px; }.close-button { position:absolute; top:10px; right:12px; border:0; background:transparent; font-size:27px; color:var(--muted); }.primary-button { border:0; padding:13px 18px; background:var(--gold); color:#34200c; font-weight:700; letter-spacing:.08em; }.primary-button:hover { filter:brightness(1.1); }
.bay-key { grid-template-columns:1fr; }.bay-key .gold-guide { border-color:var(--gold); }.single-help { grid-template-columns:1fr; }
.reward-station { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:18px; padding:14px; border:1px solid #584773; background:linear-gradient(135deg,#1c1933,#101529); }.reward-station strong { display:block; margin-top:5px; color:#d8d0ea; font-size:12px; }.reward-station small { display:block; margin-top:5px; color:#9f91bd; font:9px ui-monospace,SFMono-Regular,monospace; }.reward-actions { display:flex; gap:7px; flex-shrink:0; }.reward-button { min-height:48px; border:1px solid #9369e6; background:#282042; color:#eee6ff; padding:7px 10px; font:700 9px ui-monospace,SFMono-Regular,monospace; letter-spacing:.06em; }.reward-button:hover:not(:disabled) { background:#3d2c62; }.reward-button:disabled,.upgrade-ad:disabled { opacity:.42; cursor:not-allowed; }.reward-button span { color:#f6bd4d; }.reward-button small { display:block; margin-top:4px; color:#c6a7fa; font-size:8px; }
.achievement-card,.skin-card { margin-top:23px; padding:14px; border:1px solid #405077; background:#10172a; }.achievement-list { display:grid; gap:7px; margin-top:12px; }.achievement { padding:8px 9px; border-left:2px solid #425073; background:#0d1427; }.achievement.done { border-color:var(--green); }.achievement-head { display:flex; justify-content:space-between; gap:8px; color:#e3ebfa; font-size:10px; }.achievement-head b { color:var(--gold); font:500 9px "DM Mono",monospace; }.achievement small { display:block; margin-top:5px; color:var(--muted); font:9px "DM Mono",monospace; }.achievement .progress { margin-top:7px; height:3px; }.skin-card strong { display:block; margin:6px 0 10px; color:var(--gold); font-size:14px; }.skin-rack { display:flex; flex-wrap:wrap; gap:7px; }.skin-choice { width:33px; height:33px; padding:0; border:1px solid #435174; background:#0b1121; color:var(--skin-color); font-weight:700; font-size:17px; }.skin-choice:disabled { color:#58627b; cursor:not-allowed; }.skin-choice.selected { outline:2px solid var(--skin-color); outline-offset:2px; }.vault-button { --coin-skin:#ffd158; background:radial-gradient(circle at 33% 28%,#fff6b9 0 3%,var(--coin-skin) 4% 30%,#a95f1d 31% 54%,#6d311a 55% 100%); box-shadow:0 0 0 8px color-mix(in srgb,var(--coin-skin) 23%,transparent),0 16px 26px #02050c88,inset -10px -13px 0 #853d1d77; }
.top-actions { display:flex; gap:7px; }.danger-button { color:#ff9aa5; }.danger-button:hover { border-color:var(--red); color:#ffc0c7; }.prestige-card { margin-top:23px; padding:14px; border:1px solid #5e4b78; background:linear-gradient(145deg,#17152d,#101529); }.prestige-card>strong { display:block; margin:12px 0 5px; color:#c8a8ff; font-size:16px; }.prestige-card>strong span { font-size:23px; }.prestige-card p { min-height:30px; margin:0; color:var(--muted); font:10px/1.4 "DM Mono",monospace; }.prestige-card .progress { margin:12px 0; }.prestige-card .progress span { background:linear-gradient(90deg,#9369e6,#d7b7ff); }.prestige-button { width:100%; padding:10px; border:1px solid #8966c8; background:#241b3a; color:#d9c4ff; font:700 10px "DM Mono",monospace; letter-spacing:.11em; }.prestige-button:not(:disabled):hover { background:#3b2960; }.prestige-button:disabled { opacity:.45; cursor:not-allowed; }.skill-list { display:grid; gap:7px; margin-top:14px; }.skill { position:relative; min-height:52px; width:100%; padding:8px 52px 8px 9px; border:1px solid #3a4168; background:#0b1122; color:var(--ink); text-align:left; }.skill:not(:disabled):hover { border-color:#b392f3; }.skill:disabled { opacity:.6; cursor:not-allowed; }.skill strong { display:block; font-size:10px; }.skill small { display:block; margin-top:3px; color:var(--muted); font:9px/1.3 "DM Mono",monospace; }.skill .skill-level { position:absolute; top:10px; right:8px; color:#c7a6ff; font:700 10px "DM Mono",monospace; }.confirm-dialog { width:min(420px,calc(100% - 30px)); border:1px solid #58698f; padding:28px; color:var(--ink); background:linear-gradient(145deg,#202b4b,#11172b); box-shadow:0 35px 100px #000; }.confirm-dialog::backdrop { background:#050714b8; backdrop-filter:blur(5px); }.confirm-dialog h2 { margin:8px 0; font-size:27px; letter-spacing:-.05em; }.confirm-dialog p { color:#bdc8de; line-height:1.55; }.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }.danger-confirm { border:1px solid #ff6877; padding:10px 13px; background:#56202a; color:#ffd9dd; font:700 10px "DM Mono",monospace; letter-spacing:.08em; }
@keyframes pulse { to { opacity:.55; transform:translateX(-50%) scale(1.05); } }
@media (max-width:1050px) { .game-layout { grid-template-columns:190px minmax(440px,1fr); }.intel-panel { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:15px; }.intel-panel .section-title { display:none; }.large-counter { border:0; padding:5px; }.event-log { padding:5px; min-height:0; }.top-stats { justify-content:flex-end; } }
@media (max-width:720px) { .app-shell { width:100%; max-width:100%; padding:13px; }.topbar { height:auto; flex-wrap:wrap; gap:10px; padding-bottom:12px; }.brand { font-size:16px; }.top-stats { order:3; width:100%; justify-content:stretch; }.stat { flex:1; min-width:0; padding:3px 8px; }.stat strong { font-size:17px; }.game-layout { display:flex; flex-direction:column; width:100%; min-width:0; padding-top:14px; }.play-panel { order:-1; width:100%; min-width:0; }.upgrade-panel,.intel-panel { width:100%; min-width:0; }.upgrade-list { grid-template-columns:1fr; }.upgrade { padding-left:42px; }.upgrade-ad { writing-mode:initial; transform:none; min-width:92px; }.intel-panel { display:grid; grid-template-columns:1fr 1fr; }.event-log { display:none; }.bay-key span { font-size:8px; padding:7px 2px; }.bay-key i { display:none; }.vault-button { width:95px; height:95px; border-width:3px; }.vault-button span { font-size:14px; }.vault-button small { font-size:6px; }.play-heading h1 { font-size:28px; }.help-dialog,.confirm-dialog { width:calc(100dvw - 24px); max-width:480px; max-height:calc(100dvh - 24px); margin:auto; padding:23px 18px; overflow:auto; }.help-grid { grid-template-columns:1fr; }.help-dialog h2 { font-size:28px; }.reward-station { align-items:stretch; flex-direction:column; }.reward-actions { width:100%; }.reward-button { flex:1; } }