:root{--edge:#7a5a30;--edge-dark:#2a1e12;--plate:linear-gradient(#211810, #0d0906);--gold:#f0c040;--text:#e8d8b0;--accent:#ffe080;--cool:#9ab0ff}*{box-sizing:border-box}html,body,#root{background:#000;height:100%;margin:0;overflow:hidden}body{color:var(--text);-webkit-user-select:none;user-select:none;font-family:Courier New,monospace}.root,.viewport,.hud{position:absolute;inset:0}.hud{pointer-events:none}:where(.hud) button{pointer-events:auto;font:inherit;color:inherit;cursor:pointer}.hud button:disabled{opacity:.4;cursor:default}.message{text-shadow:2px 2px #000;font-size:18px;font-weight:700;animation:2.5s forwards fade;position:absolute;top:132px;left:50%;transform:translate(-50%)}.flash{animation:.35s forwards flash;position:absolute;inset:0}.flash.hurt{background:#c8000059}.flash.pickup{background:#ffdc5014}.icon{vertical-align:middle;flex:none;width:44px;height:44px;display:inline-flex;position:relative}.icon img{width:100%;height:100%;image-rendering:pixelated}.icon b{color:var(--gold);text-shadow:1px 1px #000,-1px -1px #000;font-size:13px;position:absolute;bottom:-4px;right:-2px}.icon.evolved img{filter:drop-shadow(0 0 4px #ff9a50)}.pips{gap:3px;margin-left:auto;display:flex}.pips i{border:1px solid #6a5a40;width:9px;height:9px;transform:rotate(45deg)}.pips i.on{background:var(--gold)}.coin-amount{color:var(--gold);align-items:center;gap:.3em;font-weight:700;display:inline-flex}.icon-amount{align-items:center;gap:.35em;font-weight:700;display:inline-flex}.icon-amount img{width:1.6em;height:1.6em;image-rendering:pixelated}.run-summary{justify-content:center;gap:28px;margin:6px 0 14px;font-size:22px;display:flex}.run-summary .icon-amount img{width:44px;height:44px}.coin-amount img{width:1em;height:1em;image-rendering:pixelated}.build{text-align:left;background:#14101ceb;border:2px solid #4a3a5a;gap:20px;margin:4px 0 12px;padding:12px 16px;display:flex}.build section{width:300px}.build h3{color:var(--cool);letter-spacing:2px;margin:6px 0 4px;font-size:14px}.build ul{margin:0;padding:0;list-style:none}.build li{align-items:center;gap:8px;margin:4px 0;font-size:14px;display:flex}.build li.evolved span{color:#ff9a50}.build em{color:#ff9a50;margin-left:auto;font-size:12px;font-style:normal}.build .none{color:#6a6a7a}.overlay{text-align:center;background:#0009;flex-direction:column;justify-content:safe center;align-items:center;gap:8px;display:flex;position:absolute;inset:0;overflow-y:auto}.overlay.paused{--keycap-size:64px;--control-font-size:18px}.overlay.dead{background:#46000099}.overlay h1{color:#d03020;text-shadow:4px 4px #000;letter-spacing:6px;margin:0 0 8px;font-size:56px}.overlay p{margin:2px;font-size:18px}.controls{flex-wrap:wrap;justify-content:center;gap:14px 36px;max-width:1200px;margin-top:24px;display:flex}.control{font-size:var(--control-font-size,22px);color:#c8b890;align-items:center;gap:6px;display:flex}.control em{margin-left:10px;font-style:normal}.keycap{width:var(--keycap-size,96px);height:var(--keycap-size,96px);image-rendering:pixelated;vertical-align:middle}.keycap.wide{width:auto;height:var(--keycap-size,96px);display:inline-flex}.keycap.wide img{width:var(--keycap-size,96px);height:var(--keycap-size,96px);image-rendering:pixelated}.start{background:#6a1a10;border:3px solid #d04020;flex-direction:column;align-items:center;gap:4px;min-width:240px;padding:10px 28px;font-size:22px;font-weight:700;display:flex}.start small{color:#e8c8a0;font-size:12px;font-weight:400}.start.training{background:#1a3a2a;border-color:#40b070}.start.shop-button{background:#3a2a10;border-color:#c0a040}.start.buy{background:#2a6a20;border-color:#6ad050;flex-direction:row;gap:6px;min-width:0;margin:0;padding:8px 16px;font-size:16px}.start.buy:disabled{color:#b09080;background:#3a2a20;border-color:#6a4a36}.modes{gap:14px;margin:6px 0 10px;display:flex}.menu-button{background:#2a2018;border:1px solid #8a6a40;padding:6px 22px;font-size:16px}.heroes{gap:10px;margin:0 0 14px;display:flex}.hero{background:var(--plate);text-align:left;border:2px solid #5a4430;align-items:center;gap:10px;padding:6px 12px 6px 6px;display:flex}.hero.selected{border-color:#f0c860;box-shadow:0 0 12px #f0c86059}.hero img{width:84px;height:84px;image-rendering:pixelated;background:radial-gradient(circle at 50% 40%,#3a2416,#0d0906);border:1px solid #000}.hero-text{flex-direction:column;gap:2px;max-width:230px;display:flex}.hero-text strong{color:var(--accent);font-size:18px}.hero-text em{color:#b09a80;font-size:12px;font-style:normal}.hero .perk{color:#d8d0c0;font-size:13px}.hero .perk b{color:#8ad0ff}.hero.locked{opacity:.5;flex-direction:column;justify-content:center;gap:4px;width:96px;padding:6px}.hero.locked .silhouette{background:#050302;border-radius:30px 30px 6px 6px;width:60px;height:70px;box-shadow:inset 0 0 0 2px #3a2a1a}.hero.locked em{color:#9a8a70;font-size:12px;font-style:normal}.shop{background:#1e1610eb;border:2px solid #5a4a36;grid-template-columns:1fr 1fr;gap:8px;width:720px;max-width:100%;margin:8px 0 14px;padding:12px;display:grid}.shop button{background:#2a2018;border:1px solid #5a4a36;justify-content:space-between;align-items:center;gap:10px;width:100%;margin:0;padding:8px 12px;display:flex}.shop button.selected{border-color:var(--gold);background:#3a2c1a}.shop button.locked{opacity:.8}.shop button.locked .price,.shop button.locked .price .coin-amount{color:#c05040}.shop .name{text-align:left;flex-direction:column;flex:1;font-size:16px;line-height:1.1;display:flex}.shop .name small{color:var(--cool);font-size:12px}.shop .price{text-align:right;min-width:54px}.shop-tip{text-align:left;background:#1e1610eb;border:2px solid #8a6a36;align-items:center;gap:14px;width:720px;max-width:100%;margin-bottom:12px;padding:10px 14px;display:flex}.tip-text{color:#c8b89a;flex-direction:column;flex:1;gap:2px;font-size:14px;display:flex}.tip-text strong{color:var(--accent);font-size:17px}.tip-text strong em{color:var(--cool);margin-left:6px;font-size:13px;font-style:normal}.tip-text b{color:#fff}.tip-text b.next{color:#7aff8a}.levelup{background:#0a0a1e8c}.levelup h1{color:#7aa8ff}.cards{gap:14px;display:flex}.card{text-align:left;background:#1c1828f2;border:2px solid #4a4a7a;flex-direction:column;gap:6px;width:200px;min-height:150px;padding:14px;animation:.28s cubic-bezier(.2,.8,.3,1) both card-in;display:flex;position:relative}.card:nth-child(2){animation-delay:50ms}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}.card.new{border-color:#c0a040}.card.weapon{border-color:#d05030}.card strong{color:var(--accent);font-size:17px}.card em{color:var(--cool);font-size:12px;font-style:normal}.card .icon{width:56px;height:56px}.card .key{color:#6a6a9a;font-weight:700;position:absolute;top:6px;right:10px}.card .key .keycap{width:56px;height:56px}.reroll .keycap{width:64px;height:64px}.reroll{background:#2a2018;border:1px solid #c0a040;align-items:center;gap:8px;margin-top:10px;padding:6px 18px;display:flex}.stick{pointer-events:none;opacity:.4;z-index:5;background:radial-gradient(circle,#00000059,#00000014 70%);border:2px solid #ffffff47;border-radius:50%;width:128px;height:128px;margin:-64px 0 0 -64px;transition:opacity .12s;position:absolute;top:0;left:0}.stick.active{opacity:.95}.stick-knob{background:radial-gradient(circle at 40% 35%,#ffecbebf,#c8965073);border:2px solid #ffffffb3;border-radius:50%;width:56px;height:56px;position:absolute;top:34px;left:34px;box-shadow:0 0 12px #ffd28c66}.touch-pause{top:max(8px, env(safe-area-inset-top));border:2px solid var(--edge);background:var(--plate);color:#f0e0c0;z-index:6;touch-action:none;width:42px;height:42px;font:700 16px monospace;position:absolute;right:10px;box-shadow:0 0 0 2px #000}@keyframes fade{0%,70%{opacity:1}to{opacity:0}}@keyframes flash{0%{opacity:1}to{opacity:0}}@keyframes card-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media (pointer:coarse){.card .key,.reroll .keycap{display:none}.heroes{margin-bottom:8px}.hero img{width:54px;height:54px}.hero-text strong{font-size:14px}.hero .perk{font-size:11px}.hero.locked{width:64px}.hero.locked .silhouette{width:36px;height:44px}}@media (height<=520px){.shop-screen h1{margin:4px 0;font-size:28px}.shop-screen>p{margin:2px 0;font-size:13px}.shop{gap:4px;margin:4px 0 6px;padding:6px}.shop button{padding:3px 10px}.shop .icon,.shop-tip .icon{width:30px;height:30px}.shop-tip{margin-bottom:6px;padding:6px 10px}.tip-text{font-size:12px}.tip-text strong{font-size:14px}}
