:root{--gold: #e8c979;--red: #e0554f;--blue: #6ad0ff;--panel: rgba(14, 16, 24, .86);--border: rgba(232, 201, 121, .35)}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}html,body,#app{width:100%;height:100%;overflow:hidden;background:#05060a;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;color:#eee}canvas{display:block;cursor:crosshair}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.hud-top{position:absolute;top:14px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}.stat-row{display:flex;gap:18px;font-size:15px;letter-spacing:.5px;text-shadow:0 2px 4px #000}.stat-row b{color:var(--gold)}.hud-bars{position:absolute;left:20px;bottom:20px;width:300px;max-width:40vw}.bar{height:20px;border:1px solid var(--border);border-radius:4px;background:#00000080;overflow:hidden;position:relative;margin-bottom:8px}.bar .fill{height:100%;transition:width .15s ease-out}.bar .label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}#hpFill{background:linear-gradient(90deg,#b02a2a,#e0554f)}#xpFill{background:linear-gradient(90deg,#2a7fb0,#6ad0ff);height:12px}#xpBar{height:12px}.hud-dash{position:absolute;right:20px;bottom:20px;text-align:center}.dash-ring{width:56px;height:56px;border-radius:50%;border:3px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;background:conic-gradient(var(--blue) var(--p, 0%),rgba(255,255,255,.08) 0%)}.dash-ring.ready{border-color:var(--blue);box-shadow:0 0 14px #6ad0ff99}.dash-label{font-size:11px;margin-top:4px;opacity:.7}.icon-btn{position:absolute;top:14px;right:16px;pointer-events:auto;cursor:pointer;width:42px;height:42px;font-size:20px;line-height:1;border:1px solid var(--border);border-radius:50%;background:var(--panel);color:#fff;transition:transform .15s,border-color .1s}.icon-btn:hover{transform:scale(1.08) rotate(40deg);border-color:var(--gold)}.hud-ammo{position:absolute;right:20px;bottom:92px;text-align:right}.ammo-pips{display:flex;gap:3px;justify-content:flex-end;margin-bottom:4px}.ammo-pips i{width:6px;height:15px;border-radius:2px;background:#4a3520;display:inline-block;transition:background .1s}.ammo-pips i.on{background:var(--gold);box-shadow:0 0 5px #e8c979b3}.ammo-text{font-size:16px;font-weight:700;color:var(--gold);text-shadow:0 2px 3px #000}.ammo-label{font-size:10px;opacity:.6;margin-top:2px}.ammo-label kbd{background:#23283a;border:1px solid var(--border);border-radius:3px;padding:0 4px;color:var(--gold)}.hud-ammo.reloading .ammo-text{color:#ff9a5a;animation:reloadPulse .5s ease-in-out infinite}@keyframes reloadPulse{50%{opacity:.4}}.settings-panel{width:460px;max-width:92vw;max-height:86vh;overflow-y:auto;background:var(--panel);border:2px solid var(--border);border-radius:14px;padding:26px 28px;pointer-events:auto;box-shadow:0 16px 40px #0009}.settings-title{font-size:28px;color:var(--gold);text-align:center;letter-spacing:3px;margin-bottom:18px}.settings-sec{font-size:15px;color:var(--gold);letter-spacing:1px;margin:18px 0 10px;border-bottom:1px solid var(--border);padding-bottom:6px}.traits-count{font-size:12px;color:#999;letter-spacing:0}.slider-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}.slider-row label{width:56px;font-size:14px;color:#ddd}.slider-row input[type=range]{flex:1;accent-color:var(--gold);cursor:pointer}.slval{width:42px;text-align:right;font-size:13px;color:var(--gold)}.traits{display:flex;flex-direction:column;gap:8px}.trait-empty{font-size:13px;color:#888;text-align:center;padding:16px 0}.trait{display:flex;align-items:center;gap:12px;background:#ffffff0a;border-left:3px solid #888;border-radius:6px;padding:8px 12px}.trait.common{border-left-color:#ccc}.trait.rare{border-left-color:#6aa0ff}.trait.epic{border-left-color:#c878ff}.trait .ticon{font-size:24px}.trait .tmain{flex:1;display:flex;flex-direction:column}.trait .tname{font-size:15px;font-weight:700;color:#fff}.trait .tdesc{font-size:12px;color:#b8b0a0}.trait .tlv{font-size:15px;font-weight:700;color:var(--gold);white-space:nowrap}.btn.small{margin-top:22px;width:100%;padding:12px;font-size:17px}#bossBar{position:absolute;top:70px;left:50%;transform:translate(-50%);width:60%;max-width:600px;display:none}#bossBar .bar{height:16px}#bossBar .name{text-align:center;color:var(--red);font-weight:700;text-shadow:0 0 8px #e0554f;margin-bottom:4px;font-size:15px;letter-spacing:2px}#bossFill{background:linear-gradient(90deg,#7a1010,#e0554f)}#banner{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);font-size:42px;font-weight:700;color:var(--gold);text-shadow:0 0 20px #000,0 4px 8px #000;opacity:0;text-align:center;letter-spacing:3px}@keyframes bannerPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(1.1)}}#banner.show{animation:bannerPop 2s ease-out forwards}.floater{position:fixed;left:0;top:0;font-size:16px;font-weight:700;color:#fff;text-shadow:0 2px 3px #000;pointer-events:none;z-index:20}.floater.crit{font-size:24px;color:var(--gold);text-shadow:0 0 8px #e8c979,0 2px 3px #000}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#04050ad1;display:none;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;z-index:30;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.overlay.show{display:flex}.title{font-size:54px;font-weight:700;color:var(--gold);text-shadow:0 0 24px rgba(232,201,121,.5),0 4px 10px #000;letter-spacing:4px}.subtitle{font-size:18px;color:#bbb;margin-top:6px;letter-spacing:2px}.helptext{margin-top:26px;font-size:14px;line-height:2;color:#cfc7b5;text-align:center;max-width:480px}.helptext kbd{background:#23283a;border:1px solid var(--border);border-radius:4px;padding:2px 8px;color:var(--gold);font-family:inherit}.btn{margin-top:28px;pointer-events:auto;cursor:pointer;padding:14px 42px;font-size:20px;font-weight:700;color:#1a1206;background:linear-gradient(180deg,#f0d68a,#d4af52);border:none;border-radius:8px;letter-spacing:2px;box-shadow:0 6px #8a6d28,0 8px 16px #00000080;transition:transform .08s}.btn:active{transform:translateY(4px);box-shadow:0 2px #8a6d28}.levelup-head{font-size:34px;color:var(--gold);text-shadow:0 0 16px #000;margin-bottom:8px;letter-spacing:3px}.levelup-sub{color:#bbb;margin-bottom:28px}.cards{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}.card{width:200px;min-height:210px;background:var(--panel);border:2px solid var(--border);border-radius:12px;padding:22px 16px;cursor:pointer;pointer-events:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;transition:transform .12s,box-shadow .12s,border-color .12s}.card:hover{transform:translateY(-8px);box-shadow:0 12px 28px #0009}.card .cicon{font-size:46px}.card .cname{font-size:20px;font-weight:700;color:#fff}.card .cdesc{font-size:14px;color:#cfc7b5;line-height:1.5}.card .crar{font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-top:auto;opacity:.8}.card.common{border-color:#c8c8c866}.card.common:hover{border-color:#ccc}.card.common .crar{color:#ccc}.card.rare{border-color:#6aa0ff99}.card.rare:hover{border-color:#6aa0ff;box-shadow:0 12px 28px #6aa0ff4d}.card.rare .crar{color:#6aa0ff}.card.epic{border-color:#c878ffb3}.card.epic:hover{border-color:#c878ff;box-shadow:0 12px 28px #c878ff59}.card.epic .crar{color:#c878ff}.gameover-stats{margin-top:18px;font-size:18px;color:#ddd;line-height:1.9;text-align:center}.gameover-stats b{color:var(--gold)}.credit{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:11px;color:#556;letter-spacing:1px}@media(max-width:640px){.title{font-size:38px}.card{width:150px;min-height:180px}.hud-bars{width:200px}}