@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap";:root{--font-pixel:"Press Start 2P", "Courier New", monospace;--font-body:"VT323", "Courier New", monospace;--panel-w:min(100vw, max(400px, 42vw), 600px);--bg:#0d0a1c;--panel:#1b1535;--panel-2:#251d48;--edge:#5b44c9;--edge-dark:#2a1f66;--text:#f1ecff;--muted:#a99fd0;--gold:gold;--hp:#e8323c;--mp:#3a7bff;--xp:gold;--common:#c08a50;--rare:#1e90ff;--ultra:gold;--unique:#ff5cf0;--danger:#ff4d5e}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--font-body);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:none;margin:0;font-size:20px;overflow:hidden}#game,#game canvas{display:block;position:fixed;inset:0}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:.85em}.hl{color:var(--gold)}.error{color:var(--danger);min-height:1.2em}h1,h2,h3{font-family:var(--font-pixel);letter-spacing:1px;font-weight:400}h2{margin:0 0 14px;font-size:16px}h3{color:var(--muted);margin:16px 0 8px;font-size:11px}.panel{background:var(--panel);border:4px solid var(--edge);box-shadow:inset -4px -4px 0 var(--edge-dark), inset 4px 4px 0 #7d68e8, 0 8px 0 #000a, 0 0 0 4px #000;max-width:min(92vw,640px);max-height:92vh;padding:22px 26px;overflow:auto}.panel-lite{border:3px solid var(--edge);box-shadow:inset -3px -3px 0 var(--edge-dark), 0 0 0 3px #000;background:#120d26d9;padding:8px 10px}.btn{font-family:var(--font-pixel);color:var(--text);background:var(--panel-2);cursor:pointer;text-transform:uppercase;border:3px solid #000;padding:11px 16px;font-size:11px;transition:transform 50ms;box-shadow:inset -3px -3px #120d26,inset 3px 3px #4a3a90}.btn:hover:not(:disabled){color:var(--gold);background:#33296a}.btn:active:not(:disabled){transform:translateY(2px);box-shadow:inset 3px 3px #120d26}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:#4b2fbf;box-shadow:inset -3px -3px #2a1880,inset 3px 3px #8a70ff}.btn-primary:hover:not(:disabled){background:#5d3ee0}.btn.danger{background:#6a1a28;box-shadow:inset -3px -3px #3a0a14,inset 3px 3px #a33a4c}.small-btn{padding:8px 10px;font-size:9px}.actions{flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:20px;display:flex}.screen{z-index:20;flex-direction:column;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.screen.dim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#05030dcc}#screen-confirm{z-index:35}#screen-loading{z-index:50;background:radial-gradient(circle at 50% 40%,#241a52,#07050f 70%)}#loading-logo{width:min(520px,90vw);height:auto;image-rendering:pixelated}.logo-text{color:var(--gold);text-shadow:4px 4px #8a3b00,8px 8px #000;text-align:center;margin:6px 0 16px;font-size:clamp(22px,5vw,40px)}.progress{width:min(420px,80vw);height:22px;box-shadow:0 0 0 3px var(--edge);background:#120d26;border:3px solid #000}.progress-fill{background:repeating-linear-gradient(90deg,#8a70ff 0 12px,#5b44c9 12px 24px);width:0;height:100%;transition:width .25s}#loading-label{margin-top:10px}.tip{text-align:center;color:#cfc6ff;max-width:520px;min-height:2.4em;margin-top:26px;transition:opacity .4s}.menu-panel{text-align:center;background:#1b1535ee;min-width:320px}.subtitle{color:var(--muted);margin:-8px 0 18px}.menu-buttons{flex-direction:column;gap:10px;display:flex}.menu-buttons .btn{width:100%}#save-info{margin-top:14px}.row{justify-content:space-between;align-items:center;gap:24px;margin:8px 0;display:flex}select,input[type=text]{font-family:var(--font-pixel);color:var(--text);border:3px solid var(--edge);background:#0d0a1c;padding:8px;font-size:12px}input[type=range]{accent-color:#6a4cff;width:140px}.range{align-items:center;gap:10px;display:flex}.range output{text-align:right;min-width:4.5em}input[type=checkbox]{accent-color:#6a4cff;width:22px;height:22px}.controls{border-collapse:collapse;width:100%}.controls td{border-bottom:1px dashed #3a2f6a;padding:3px 6px}.controls td:first-child{color:var(--gold);white-space:nowrap}.credits p{margin:8px 0}.create-panel{width:min(92vw,620px)}.steps{justify-content:center;gap:8px;margin-bottom:12px;display:flex}.steps span{font-family:var(--font-pixel);width:28px;height:28px;color:var(--muted);background:#120d26;border:2px solid #3a2f6a;place-items:center;font-size:10px;display:grid}.steps span.active{border-color:var(--gold);color:var(--gold)}#hero-name{width:100%;margin:6px 0;font-size:16px}.class-cards{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.class-card{cursor:pointer;text-align:center;background:#120d26;border:3px solid #3a2f6a;padding:8px 6px 10px;transition:transform .1s,border-color .1s}.class-card:hover{border-color:#7d68e8;transform:translateY(-3px)}.class-card.selected{border-color:var(--gold);box-shadow:0 0 0 3px #ffd70055,0 0 18px #ffd70044}.class-card img{aspect-ratio:1;width:100%;max-width:120px;image-rendering:pixelated}.class-card .cname{font-family:var(--font-pixel);margin-top:4px;font-size:10px}.class-card .cicon{font-size:22px}.focus{min-height:3.4em;margin-top:14px}.confirm{align-items:center;gap:18px;display:flex}.confirm img{width:130px;height:130px;image-rendering:pixelated;background:#120d26;border:3px solid #3a2f6a}.confirm p{margin:4px 0}.stat-list{margin:4px 0;padding:0;list-style:none}#hud{pointer-events:none;z-index:10;position:fixed;inset:0}#hud button,#hud canvas,#hud .minimap-markers{pointer-events:auto}.hud-player{width:270px;position:absolute;top:12px;left:12px}.hud-boss{text-align:center;border-color:#ff4500;width:min(420px,46vw);position:absolute;top:12px;left:50%;transform:translate(-50%);box-shadow:0 0 0 3px #000,0 0 18px #f206}.hud-boss.giant{border-color:#f20;box-shadow:0 0 0 3px #000,0 0 24px #f20a}.hud-boss-name{font-family:var(--font-pixel);color:var(--gold);text-shadow:2px 2px #000;white-space:nowrap;text-overflow:ellipsis;margin-bottom:6px;font-size:10px;overflow:hidden}.bar.boss-hp{height:18px;box-shadow:0 0 0 2px #ff4500}.bar.boss-hp .fill{background:linear-gradient(90deg,#ff1e27,#ff6a00)}.hud-name{font-family:var(--font-pixel);white-space:nowrap;text-overflow:ellipsis;margin-bottom:6px;font-size:10px;overflow:hidden}.bar{background:#000;border:2px solid #000;height:16px;margin:4px 0;position:relative;box-shadow:0 0 0 2px #3a2f6a}.bar .fill{width:100%;height:100%;transition:width .2s}.bar.hp .fill{background:linear-gradient(#ff5a5a,#b0101a)}.bar.mp .fill{background:linear-gradient(#7aa8ff,#1840c0)}.bar.xp{height:10px}.bar.xp .fill{background:linear-gradient(#fff07a,#c99800)}.bar span{text-align:center;text-shadow:1px 1px #000,-1px -1px #000;font-size:14px;line-height:14px;position:absolute;inset:0}.bar.xp span{font-size:11px;line-height:9px}.hud-row{justify-content:space-between;margin-top:6px;display:flex}.points{color:var(--gold);animation:1s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.35}}.hud-minimap{text-align:center;position:absolute;top:12px;right:12px}.minimap-title{font-family:var(--font-pixel);margin-bottom:6px;font-size:9px}.minimap-levels{color:var(--gold,#ffd54a)}.minimap-sky{font-family:var(--font-pixel);color:var(--muted,#b8b0d8);margin:-2px 0 6px;font-size:8px}#minimap{width:160px;height:160px;image-rendering:pixelated;background:#00000080;display:block}.minimap-markers{justify-content:space-between;gap:4px;margin-top:6px;display:flex}.marker{cursor:pointer;border:2px solid #000;flex:1;place-items:center;height:26px;font-size:14px;display:grid;box-shadow:inset -2px -2px #0006,inset 2px 2px #fff4}.marker.current{outline-offset:1px;outline:2px solid #fff}.marker:hover{filter:brightness(1.25)}.hud-abilities{gap:8px;display:flex;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.ability{border:3px solid var(--edge);pointer-events:auto;background:#120d26e0;place-items:center;width:52px;height:52px;font-size:24px;display:grid;position:relative}.ability.locked{filter:grayscale();opacity:.35}.ability .cd{background:#000b;position:absolute;bottom:0;left:0;right:0}.ability .lvl{color:var(--muted);font-size:13px;position:absolute;bottom:-2px;right:2px}.ability.flash{animation:.4s abflash}@keyframes abflash{0%{box-shadow:0 0 18px var(--gold);border-color:var(--gold)}}.hud-buttons{gap:8px;display:flex;position:absolute;bottom:14px;right:12px}.fps{font-family:var(--font-pixel);color:#7cfc00;text-shadow:1px 1px #000;font-size:10px;position:absolute;bottom:14px;left:12px}.tutorial{border:3px solid var(--gold);text-align:center;background:#1b1535f0;max-width:min(90vw,560px);padding:12px 18px;font-size:22px;animation:.3s pop;position:absolute;top:120px;left:50%;transform:translate(-50%);box-shadow:0 0 0 3px #000,0 0 24px #ffd70055}.tutorial .tstep{font-family:var(--font-pixel);color:var(--gold);margin-bottom:6px;font-size:9px;display:block}@keyframes pop{0%{opacity:0;transform:translate(-50%)scale(.8)}}#toasts{z-index:30;pointer-events:none;flex-direction:column;gap:6px;display:flex;position:fixed;top:210px;left:12px}.toast{border-left:5px solid var(--edge);background:#120d26e8;max-width:340px;padding:6px 12px;font-size:19px;animation:.25s slidein}.toast.common{border-color:var(--common)}.toast.rare{border-color:var(--rare)}.toast.ultra,.toast.ability{border-color:var(--ultra)}.toast.warn,.toast.boss{border-color:var(--danger)}.toast.boss{color:#ffb0b0;font-size:22px}.toast.out{opacity:0;transition:opacity .4s}@keyframes slidein{0%{opacity:0;transform:translate(-30px)}}.banner{text-align:center;z-index:25;pointer-events:none;animation:3s forwards bannerIn;position:fixed;top:22%;left:50%;transform:translate(-50%)}#banner-title{font-family:var(--font-pixel);color:#fff;text-shadow:3px 3px #000,0 0 20px #8a70ff;font-size:clamp(18px,3.5vw,30px)}#banner-sub{color:var(--gold);text-shadow:2px 2px #000;margin-top:8px}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,10px)}15%,75%{opacity:1;transform:translate(-50%)}to{opacity:0}}.levelup{font-family:var(--font-pixel);color:var(--gold);text-shadow:4px 4px #8a3b00,0 0 30px gold;z-index:25;pointer-events:none;text-align:center;font-size:clamp(20px,4vw,36px);animation:2.6s forwards bannerIn;position:fixed;top:34%;left:50%;transform:translate(-50%)}.levelup small{color:#fff;margin-top:10px;font-size:11px;display:block}.fade{opacity:0;pointer-events:none;z-index:40;background:#000;transition:opacity .35s;position:fixed;inset:0}.fade.on{opacity:1}.death h1{color:var(--danger);text-shadow:5px 5px #000;text-align:center;margin:0 0 10px;font-size:clamp(28px,6vw,56px)}.death p{text-align:center}.game-panel{width:var(--panel-w);z-index:22;display:flex;position:fixed;top:0;bottom:0;right:0}.game-panel .panel-box{flex:1;min-width:0;max-width:none;max-height:none;padding:16px 18px;animation:.18s ease-out dockIn;overflow-y:auto}@keyframes dockIn{0%{opacity:0;transform:translate(24px)}}@media (min-width:641px){body:has(.game-panel) :is(#hud,#screen-death){right:var(--panel-w)}body:has(.game-panel) :is(.banner,.levelup){left:calc((100vw - var(--panel-w)) / 2)}}.game-panel .stats-grid,.game-panel .inv-layout{grid-template-columns:1fr}.panel-header{border-bottom:2px solid var(--edge);grid-template-columns:36px 1fr 36px;align-items:center;gap:8px;margin-bottom:14px;padding-bottom:10px;display:grid}.panel-header #panel-title,.panel-header .panel-title{font-family:var(--font-pixel);text-align:center;color:var(--gold);text-shadow:2px 2px #000;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:12px;overflow:hidden}.panel-back-btn{background:var(--panel-2);color:#fff;border:2px solid var(--edge);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:15px;line-height:1;transition:background .15s,border-color .15s,transform 50ms;display:flex;box-shadow:0 2px #120d26}.panel-back-btn:hover{border-color:var(--accent);color:var(--gold);background:#362c64}.panel-back-btn:active{box-shadow:none;transform:translateY(2px)}.panel-back-btn.is-invisible{visibility:hidden;pointer-events:none}.panel-header .panel-back-btn{grid-column:1}.panel-header .panel-title{grid-column:2}.panel-header .panel-close-btn{grid-column:3;justify-self:end}.panel-close-btn{color:#fff;cursor:pointer;background:#4a1824;border:2px solid #d32f2f;border-radius:4px;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:15px;font-weight:700;line-height:1;transition:background .15s,transform 50ms;display:flex;box-shadow:0 2px #5a0000}.panel-close-btn:hover{background:#7a1f2e;border-color:#f44336}.panel-close-btn:active{box-shadow:none;transform:translateY(2px)}.tabs{border-bottom:3px solid var(--edge);gap:6px;margin-bottom:14px;display:flex}.tab{font-family:var(--font-pixel);color:var(--muted);border:3px solid var(--edge);cursor:pointer;background:#120d26;border-bottom:none;padding:9px 14px;font-size:10px}.tab.active{background:var(--edge);color:#fff}.tab-body{min-height:280px}.panel-actions{justify-content:center}.subview-header{border-bottom:1px dashed #3a2f6a;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:8px;display:flex}.subview-title{font-family:var(--font-pixel);color:var(--gold);letter-spacing:1px;font-size:11px}.subview-nav-back{border-top:1px dashed #3a2f6a;margin-top:18px;padding-top:12px}.menu-nav-back-btn{font-family:var(--font-pixel);font-size:10px}.menu-nav-container{flex-direction:column;gap:12px;display:flex}.menu-hero-card{border:2px solid var(--edge);background:#140f2b;border-radius:4px;flex-direction:column;gap:6px;padding:10px 14px;display:flex}.hero-card-row{justify-content:space-between;align-items:center;display:flex}.hero-card-class{font-family:var(--font-pixel);color:var(--accent);font-size:11px}.unassigned-badge{color:var(--gold);font-size:13px;font-weight:700}.menu-nav-list{flex-direction:column;gap:8px;display:flex}.menu-nav-item{background:var(--panel-2);border:2px solid var(--edge);color:#fff;cursor:pointer;text-align:left;border-radius:4px;align-items:center;width:100%;padding:12px 14px;transition:all .15s;display:flex;box-shadow:0 3px #120d26}.menu-nav-item:hover{border-color:var(--accent);color:var(--gold);background:#362c64;transform:translate(3px)}.menu-nav-item:active{box-shadow:none;transform:translateY(2px)}.menu-nav-item .nav-item-icon{flex-shrink:0;width:28px;font-size:18px}.menu-nav-item .nav-item-info{flex:1;min-width:0}.menu-nav-item .nav-item-title{font-family:var(--font-pixel);margin-bottom:2px;font-size:11px}.menu-nav-item .nav-item-subtitle{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.menu-nav-item .nav-item-arrow{font-family:var(--font-pixel);color:var(--muted);padding-left:8px;font-size:12px}.menu-nav-item:hover .nav-item-arrow{color:var(--gold)}.menu-divider{background:#3a2f6a;height:1px;margin:4px 0}.menu-nav-item.secondary{background:#1a1438}.menu-nav-item.danger{background:#2d121c;border-color:#6d1b28}.menu-nav-item.danger:hover{color:#f99;background:#4a1824;border-color:#d32f2f}.equips-view{flex-direction:column;gap:12px;display:flex}.equips-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;display:grid}.equip-card{border:2px solid var(--edge);background:#140f2b;border-radius:4px;flex-direction:column;gap:8px;padding:10px 12px;display:flex}.equip-card-header{border-bottom:1px dashed #2e2558;justify-content:space-between;align-items:center;padding-bottom:4px;display:flex}.equip-slot-name{font-family:var(--font-pixel);color:var(--gold);align-items:center;gap:6px;font-size:10px;display:flex}.rarity-badge{font-family:var(--font-pixel);border-radius:2px;padding:2px 6px;font-size:9px}.equip-card-body{align-items:center;gap:12px;display:flex}.equip-info{flex:1;min-width:0}.equip-name{font-family:var(--font-pixel);margin-bottom:4px;font-size:11px}.equip-stats{color:#7cfc00;font-size:13px}.equip-unequip-btn{flex-shrink:0;margin-left:8px}.equips-footer{margin-top:6px}.equips-footer .btn{width:100%}.stats-grid{grid-template-columns:1.1fr 1fr;gap:18px;display:grid}.attr{border-bottom:1px dashed #3a2f6a;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:6px 0;display:grid}.attr .name{font-family:var(--font-pixel);font-size:10px}.attr .val{text-align:right;min-width:2.5em;font-size:22px}.attr .bonus{color:#7cfc00;font-size:16px}.attr .desc{color:var(--muted);grid-column:1/-1;font-size:15px}.plus{font-family:var(--font-pixel);width:32px;height:32px;padding:0;font-size:12px}.unassigned{font-family:var(--font-pixel);margin:10px 0;font-size:10px}.derived{font-size:18px}.derived div{border-bottom:1px dotted #2e2558;justify-content:space-between;padding:2px 0;display:flex}.derived b{color:var(--gold);font-weight:400}.equip-slots{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px;display:grid}.inv-layout{grid-template-columns:auto 1fr;gap:16px;display:grid}.inv-grid{grid-template-rows:repeat(4,64px);grid-template-columns:repeat(5,64px);gap:6px;display:grid}.slot{cursor:pointer;background:#0b0818;border:2px solid #000;place-items:center;width:64px;height:64px;display:grid;position:relative;box-shadow:inset 4px 4px #000,inset -3px -3px #2e2558}.slot img{width:54px;height:54px;image-rendering:pixelated;pointer-events:none}.slot.common{box-shadow:inset 4px 4px 0 #000, inset -3px -3px 0 #2e2558, 0 0 0 2px var(--common)}.slot.rare{box-shadow:inset 4px 4px 0 #000, inset -3px -3px 0 #2e2558, 0 0 0 2px var(--rare)}.slot.ultra{box-shadow:inset 4px 4px 0 #000, inset -3px -3px 0 #2e2558, 0 0 0 2px var(--ultra)}.slot.unique{box-shadow:inset 4px 4px 0 #000, inset -3px -3px 0 #2e2558, 0 0 0 2px var(--unique)}.slot.selected{outline-offset:1px;outline:3px solid #ff0;box-shadow:0 0 14px #ff0}.slot .tag{color:#fff;text-shadow:1px 1px #000;font-size:13px;position:absolute;bottom:1px;right:3px}.slot .slot-label{color:var(--muted);font-size:12px;position:absolute;top:2px;left:4px}.item-detail{background:#120d26;border:3px solid #3a2f6a;min-height:200px;padding:12px}.item-detail h4{font-family:var(--font-pixel);margin:0 0 8px;font-size:10px}.item-detail .actions{justify-content:flex-start;margin-top:12px}.rarity-common{color:var(--common)}.rarity-rare{color:var(--rare)}.rarity-ultra{color:var(--ultra)}.rarity-unique{color:var(--unique)}.map-list{gap:10px;display:grid}.map-entry{background:#120d26;border:3px solid #3a2f6a;grid-template-columns:50px 1fr auto;align-items:center;gap:12px;padding:8px 12px;display:grid}.map-entry.current{border-color:var(--gold)}.map-entry .swatch{border:3px solid #000;place-items:center;width:44px;height:44px;font-size:22px;display:grid}.map-entry .mname{font-family:var(--font-pixel);font-size:10px}.stats-table{grid-template-columns:repeat(2,1fr);gap:2px 18px;margin-top:14px;font-size:18px;display:grid}.tooltip{z-index:60;border:2px solid var(--edge);pointer-events:none;background:#0b0818f2;max-width:260px;padding:8px 10px;font-size:17px;position:fixed}.tooltip b{font-family:var(--font-pixel);margin-bottom:4px;font-size:9px;display:block}@media (max-width:640px){.hud-player{width:200px}#minimap{width:110px;height:110px}.stats-grid,.inv-layout{grid-template-columns:1fr}.inv-grid{grid-template-rows:repeat(4,52px);grid-template-columns:repeat(5,52px)}.slot{width:52px;height:52px}.slot img{width:44px;height:44px}.ability{width:42px;height:42px;font-size:18px}.class-cards{grid-template-columns:1fr 1fr 1fr;gap:6px}}.row.targeting{white-space:nowrap;gap:8px;margin-top:10px}.row.targeting select{padding:6px;font-size:10px}.google-signin{justify-content:center;min-height:44px;display:flex}.account-line{margin-top:8px}.link-btn{color:inherit;cursor:pointer;font:inherit;background:0 0;border:0;padding:0;text-decoration:underline}