:root{--panel:#121620b8;--panel-border:#ffffff1f;--text:#f2efe6;--muted:#a9b0c0;--gold:#ffd166;--accent:#ff9f43;--good:#6ee7a8;--bad:#ff6b6b}*{box-sizing:border-box}html,body{height:100%;color:var(--text);-webkit-user-select:none;user-select:none;background:#9fc3e6;margin:0;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#app,#app canvas{width:100%;height:100%;display:block;position:fixed;inset:0}#hud{pointer-events:none;position:fixed;inset:0}#hud .panel,#hud button{pointer-events:auto}.panel{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);border-radius:14px;box-shadow:0 8px 30px #00000040}.topbar{align-items:center;gap:18px;padding:8px 12px 8px 18px;font-size:17px;font-weight:700;display:flex;position:absolute;top:14px;left:50%;transform:translate(-50%)}.stat{white-space:nowrap;align-items:center;gap:6px;display:flex}.stat.small{color:var(--muted);min-width:90px;font-size:13px;font-weight:600}.ico{font-size:18px}#gold{color:var(--gold);min-width:46px}.btn{font:inherit;color:var(--text);cursor:pointer;background:#ffffff14;border:1px solid #ffffff29;border-radius:10px;padding:7px 12px;font-size:14px;font-weight:700;transition:background .15s,transform .1s}.btn:hover{background:#ffffff29}.btn:active{transform:scale(.96)}.btn.primary{color:#2a1600;background:linear-gradient(#ffb347,#ff8c1a);border-color:#ffb347}.btn.primary:disabled{filter:grayscale()brightness(.7);cursor:default}.btn.danger{background:#ff6b6b33;border-color:#ff6b6b80}.btn.active{border-color:var(--good);background:#6ee7a840}kbd{background:#00000040;border:1px solid #fff3;border-radius:5px;margin-left:4px;padding:1px 5px;font-family:inherit;font-size:11px}.towerbar{gap:10px;padding:10px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.tcard{cursor:pointer;text-align:center;background:#ffffff0f;border:2px solid #0000;border-radius:12px;width:112px;padding:10px 8px 8px;transition:transform .12s,background .15s,border-color .15s;position:relative}.tcard:hover{background:#ffffff1f;transform:translateY(-3px)}.tcard.selected{border-color:var(--accent);background:#ff9f432e}.tcard.disabled{opacity:.45}.tcard .ticon{filter:drop-shadow(0 3px 6px #0006);font-size:30px;line-height:1}.tcard .tname{margin-top:6px;font-size:13px;font-weight:800}.tcard .tcost{color:var(--gold);margin-top:2px;font-size:13px;font-weight:800}.tcard .tkey{color:var(--muted);font-size:11px;position:absolute;top:5px;left:7px}.selpanel{width:240px;padding:14px;position:absolute;bottom:16px;right:16px}.sel-title{font-size:18px;font-weight:800}.sel-desc{color:var(--muted);margin:6px 0 10px;font-size:12.5px;line-height:1.35}.sel-stats{grid-template-columns:1fr auto;gap:3px 10px;margin-bottom:12px;font-size:13px;display:grid}.sel-stats b{color:var(--gold)}.selpanel .btn{width:100%}.sel-stats b.up{color:var(--good)}.sel-sub{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:11px;font-weight:800}.sel-slots{gap:8px;margin-bottom:8px;display:flex}.sel-slots .islot{width:48px;height:48px;font-size:24px}.sel-effects{gap:2px;margin-bottom:10px;font-size:12.5px;font-weight:800;display:grid}.sel-effects:empty{display:none}.debug{flex-direction:column;gap:6px;width:150px;padding:10px;display:flex;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.debug-title{color:var(--muted);margin-bottom:2px;font-size:12px;font-weight:800}.debug .btn{text-align:left;padding:6px 8px;font-size:12.5px}.debug-title:not(:first-child){margin-top:6px}.debug-row{gap:6px;display:flex}.debug-row .btn{text-align:center;flex:1;padding:6px 4px}.help{color:#ffffffd9;text-shadow:0 1px 3px #0009;max-width:300px;font-size:12px;line-height:1.6;position:absolute;bottom:16px;left:16px}.hidden{display:none!important}#floaters{position:absolute;inset:0;overflow:hidden}.floater{color:var(--gold);text-shadow:0 2px #00000080,0 0 10px #ffc85099;white-space:nowrap;will-change:transform, opacity;font-size:16px;font-weight:900;position:absolute;transform:translate(-50%,-50%)}.floater.bad{color:var(--bad);text-shadow:0 2px #00000080,0 0 10px #ff505099}.floater.ice{color:#aee9ff;text-shadow:0 2px #0006,0 0 10px #78c8ffcc}.banner{letter-spacing:1px;opacity:0;text-shadow:0 4px #00000059,0 0 30px #ffaa3cb3;font-size:46px;font-weight:900;transition:opacity .4s,transform .4s;position:absolute;top:22%;left:50%;transform:translate(-50%,-50%)scale(.9)}.banner.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.overlay{pointer-events:auto;background:#00000073;place-items:center;display:grid;position:absolute;inset:0}.overlay-box{text-align:center;padding:28px 40px}.overlay-box h1{margin:0 0 8px;font-size:40px}:root{--r-common:#b9bec8;--r-magic:#5b9bff;--r-rare:#ffd84a;--r-unique:#ff8a1f;--r-mythic:#b765ff}.inventory{padding:10px;position:absolute;top:16px;right:16px}.inv-head{color:var(--muted);justify-content:space-between;margin-bottom:8px;font-size:12px;font-weight:800;display:flex}.inv-count{font-variant-numeric:tabular-nums}.inv-grid{grid-template-columns:repeat(4,40px);gap:5px;display:grid}.islot{--rc:#ffffff24;pointer-events:auto;background:#00000038;border:1.5px solid #ffffff1a;border-radius:9px;place-items:center;width:40px;height:40px;font-size:20px;transition:transform .12s,border-color .12s,box-shadow .2s;display:grid}.islot.filled{cursor:grab;border-color:var(--rc);background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc) 38%, transparent), #0000004d 75%)}.islot.filled:hover{transform:scale(1.08)}.islot span{filter:drop-shadow(0 2px 3px #00000080);pointer-events:none}.islot.r-common{--rc:var(--r-common)}.islot.r-magic{--rc:var(--r-magic);box-shadow:0 0 8px color-mix(in srgb, var(--r-magic) 45%, transparent)}.islot.r-rare{--rc:var(--r-rare);box-shadow:0 0 10px color-mix(in srgb, var(--r-rare) 55%, transparent)}.islot.r-unique{--rc:var(--r-unique);box-shadow:0 0 12px color-mix(in srgb, var(--r-unique) 60%, transparent)}.islot.r-mythic{--rc:var(--r-mythic);animation:1.6s ease-in-out infinite mythic-glow}@keyframes mythic-glow{0%,to{box-shadow:0 0 8px color-mix(in srgb, var(--r-mythic) 60%, transparent)}50%{box-shadow:0 0 18px var(--r-mythic), 0 0 4px #fff inset}}.islot.dragging{opacity:.35}.islot.drop-target{border-color:#fff;transform:scale(1.08)}.islot.incoming{visibility:hidden}.islot.pop{animation:.35s ease-out slot-pop}@keyframes slot-pop{0%{transform:scale(1.35)}to{transform:scale(1)}}.islot.flyer{z-index:20;pointer-events:none;transition:transform .5s cubic-bezier(.5,-.2,.6,1);position:fixed;top:0;left:0}.tooltip{z-index:30;pointer-events:none;background:#0c0e16f0;border:1px solid #ffffff29;border-radius:10px;max-width:250px;padding:10px 12px;font-size:12.5px;line-height:1.4;position:fixed;top:0;left:0;box-shadow:0 8px 24px #0006}.tt-name{font-size:14.5px;font-weight:900}.tt-rarity{opacity:.8;margin-bottom:6px;font-size:11px;font-weight:700}.tt-stat{color:#9ff0c0;font-weight:700}.tt-bonus{color:#ffe7a6;border-top:1px solid #ffffff1f;margin-top:6px;padding-top:6px}.tt-bonus.inactive{color:#7d828d}.tt-hint{color:var(--muted);margin-top:6px;font-size:11px}.floater.gold{color:#ffd23a;text-shadow:0 2px #00000080,0 0 12px #ffbe28e6;font-size:18px}.floater.crit{color:#ffb347;text-shadow:0 2px #00000080,0 0 12px #ff8c28e6;font-size:19px}.banner.mythic{color:#e3c2ff;text-shadow:0 4px #00000059,0 0 30px #b45afff2}
