*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0d0b08}body{font-family:Georgia,Times New Roman,serif;color:#e8dcc0;user-select:none}#app{width:100%;height:100%;position:relative}.screen{position:absolute;inset:0;display:none}.screen.visible{display:block}.hidden{display:none!important}.menu-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#2a2418,#16120b 55%,#0a0805)}.menu-bg:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 118px,rgba(200,170,110,.03) 118px 120px),repeating-linear-gradient(0deg,transparent 0 118px,rgba(200,170,110,.02) 118px 120px)}#menu-canvas{position:absolute;inset:0;width:100%;height:100%}.game-title{font-size:64px;letter-spacing:8px;color:#e8c66a;text-align:center;text-shadow:0 0 30px rgba(232,198,106,.35),0 3px 0 #6b5320,0 6px 12px rgba(0,0,0,.8);font-weight:700}.game-title span{font-size:28px;letter-spacing:4px;color:#b09a63;margin:0 14px;font-style:italic}.menu-sub{text-align:center;color:#9a8a64;font-style:italic;margin-top:8px;letter-spacing:2px}.menu-center,.loading-center{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}.menu-buttons{display:flex;flex-direction:column;gap:12px;margin-top:36px;width:320px}.menu-note{margin-top:28px;color:#776a4d;font-size:13px}.loading-bar{width:340px;height:12px;border:1px solid #6b5320;margin-top:40px;background:#1a150c}#loading-fill{height:100%;width:0%;background:linear-gradient(90deg,#a3822f,#e8c66a);transition:width .2s}#loading-text{color:#9a8a64;font-style:italic;font-size:14px}.btn{font-family:inherit;font-size:16px;padding:10px 22px;cursor:pointer;background:linear-gradient(180deg,#453619,#241c0e 55%,#1a1408);color:#e8dcc0;font-variant:small-caps;letter-spacing:1.5px;border:1px solid #8a6a2e;border-radius:3px;box-shadow:0 0 0 1px #000000b3,inset 0 1px #e8c66a38;transition:all .12s;position:relative}.btn:hover{background:linear-gradient(180deg,#5a4722,#2e2412 60%,#201a0c);border-color:#e8c66a;color:#ffe9a8;box-shadow:0 0 0 1px #000000b3,0 0 14px #c9a84c66,inset 0 1px #e8c66a59}.btn:active{transform:translateY(1px) scale(.98)}.btn.big{font-size:20px;padding:14px 30px}.btn.tiny{font-size:12px;padding:4px 10px}.btn.ghost{background:transparent;border-color:#55482c;color:#9a8a64}.btn.sel{border-color:#e8c66a;color:#ffe9a8;box-shadow:0 0 10px #e8c66a4d}.btn:disabled{opacity:.4;cursor:default;pointer-events:none}.panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#201a0ff7,#141009f7);border:1px solid #7a6230;border-radius:4px;padding:24px 28px;z-index:3;box-shadow:0 10px 60px #000000b3}.panel.narrow{width:380px;text-align:center}.panel.wide{width:min(1060px,96vw);max-height:94vh;overflow-y:auto}.panel h2{color:#e8c66a;letter-spacing:3px;margin-bottom:12px;text-align:center}.panel input{font-family:inherit;font-size:26px;letter-spacing:8px;text-align:center;text-transform:uppercase;background:#14100a;color:#ffe9a8;border:1px solid #7a6230;padding:10px;width:100%;margin:12px 0}.row{display:flex;gap:12px;align-items:center;margin-top:14px}.row.center{justify-content:center}.grow{flex:1}.status{font-size:13px;color:#9a8a64;min-height:18px;font-style:italic}.status.err{color:#d9705c}.status.ok{color:#8fc07a}.hint{color:#776a4d;font-size:12px;font-weight:400}.code-row{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:10px}.code-row b{font-size:22px;letter-spacing:5px;color:#ffe9a8;background:#14100a;padding:2px 12px;border:1px solid #55482c}.slots{display:flex;gap:10px;justify-content:center;margin-bottom:14px}.slot{flex:1;max-width:320px;border:1px solid #55482c;border-radius:4px;padding:8px 12px;display:flex;align-items:center;gap:10px;background:#0000004d;min-height:62px}.slot .slot-portrait{width:46px;height:46px;flex:none}.slot .slot-portrait canvas{width:46px;height:46px;border-radius:3px;border:1px solid #55482c}.slot .slot-name{font-size:15px;color:#e8dcc0}.slot .slot-hero{font-size:12px;color:#9a8a64;font-style:italic}.slot .slot-ready{margin-left:auto;font-size:12px}.slot.p0{border-color:#4a7edb}.slot.p1{border-color:#d9705c}.slot.p2{border-color:#8fc07a}.hero-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-bottom:12px}.hero-card{border:1px solid #55482c;border-radius:4px;background:#00000059;cursor:pointer;padding:6px;text-align:center;transition:all .12s;position:relative}.hero-card:hover{border-color:#c9a84c;background:#3c301880}.hero-card.sel{border-color:#e8c66a;box-shadow:0 0 12px #e8c66a66;background:#46381a99}.hero-card.taken{opacity:.35;cursor:not-allowed}.hero-card.taken:after{content:"TAKEN";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#d9705c;font-size:11px;letter-spacing:2px}.hero-card canvas{width:100%;aspect-ratio:1}.hero-card .hc-name{font-size:12px;color:#e8dcc0;margin-top:2px;white-space:nowrap;overflow:hidden}.hero-card .hc-role{font-size:10px;color:#9a8a64;font-style:italic}.hero-detail{border:1px solid #55482c;border-radius:4px;background:#0000004d;padding:12px 16px;min-height:120px;font-size:13px;line-height:1.5}.hero-detail h3{color:#e8c66a}.hero-detail .hd-lore{font-style:italic;color:#9a8a64;margin:4px 0 8px}.hero-detail .hd-ab{margin:2px 0}.hero-detail .hd-ab b{color:#c9a84c}.hero-detail .hd-ab .lvl{color:#776a4d;font-size:11px}.diff-row{display:flex;gap:6px;align-items:center;font-size:14px}.lobby-bottom{border-top:1px solid #3a301a;padding-top:12px}#screen-match{background:#000}#game-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:default}#hud{position:absolute;inset:0;pointer-events:none}#hud .btn,#minimap,#btn-cam-home{pointer-events:auto}#top-bar{position:absolute;top:8px;left:50%;transform:translate(-50%);background:linear-gradient(180deg,#1c140aeb,#0c0804f2);border:1px solid #8a6a2e;border-radius:3px;padding:4px 22px;font-size:18px;color:#f0cf7a;letter-spacing:3px;box-shadow:0 0 0 1px #000c,inset 0 1px #e8c66a40,0 4px 14px #0009;font-variant-numeric:tabular-nums}#announce-wrap{position:absolute;top:70px;left:50%;transform:translate(-50%);text-align:center;z-index:5}.announce{font-size:30px;color:#ffe9a8;letter-spacing:3px;text-shadow:0 0 20px rgba(232,198,106,.6),0 2px 6px #000;animation:announceIn .4s ease-out;margin-bottom:6px}.announce.small{font-size:19px;color:#e8dcc0}.announce.danger{color:#ff9080;text-shadow:0 0 20px rgba(217,112,92,.6),0 2px 6px #000}@keyframes announceIn{0%{transform:scale(1.6);opacity:0}to{transform:scale(1);opacity:1}}.announce.out{transition:opacity .8s;opacity:0}#kill-feed{position:absolute;top:12px;right:246px;text-align:right;font-size:13px}.feed-line{background:#0a080599;border-radius:3px;padding:2px 10px;margin-bottom:4px;animation:announceIn .25s}#cap-status{position:absolute;top:8px;left:12px;display:flex;gap:8px}.cap-pip{width:26px;height:26px;border-radius:50%;border:2px solid #55482c;display:flex;align-items:center;justify-content:center;font-size:13px;color:#0a0805;font-weight:700;background:#333}#bottom-hud{left:50%;bottom:10px;transform:translate(-50%);display:flex;align-items:flex-end;gap:10px;background:linear-gradient(180deg,#2a20108c,#0000 30%),linear-gradient(180deg,#1e160bf5,#0d0904f7);border:1px solid #8a6a2e;border-radius:6px;padding:12px 16px 10px;pointer-events:auto;box-shadow:0 0 0 1px #000000d9,inset 0 0 0 1px #c9a84c24,inset 0 1px #e8c66a47,0 8px 30px #000000b3;position:absolute}#bottom-hud:after{content:"Δ Θ Λ Ξ Π Σ Φ Ψ Ω Δ Θ Λ Ξ Π Σ Φ Ψ Ω Δ Θ Λ Ξ Π Σ";position:absolute;left:14px;right:14px;top:1px;height:10px;font-size:8px;letter-spacing:6px;color:#d6b26629;overflow:hidden;white-space:nowrap;text-align:center;pointer-events:none}#bottom-hud:before{content:"";position:absolute;left:6px;right:6px;top:-3px;height:3px;background:repeating-linear-gradient(90deg,#c9a84cd9 0 7px,#c9a84c26 7px 10px,#c9a84c8c 10px 14px,#c9a84c1a 14px 17px);border-radius:2px;pointer-events:none}#portrait-wrap{position:relative}#portrait{border:2px solid #a07f38;border-radius:4px;display:block;background:#14100a;box-shadow:0 0 0 1px #000000e6,inset 0 0 8px #0009,0 0 12px #c9a84c2e}#level-badge{position:absolute;bottom:-6px;right:-6px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a6a26,#4a3510 55%,#241a06);border:1px solid #e8c66a;color:#ffe9a8;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;box-shadow:0 0 0 1px #000c,0 0 8px #e8c66a59,inset 0 1px 1px #fff0c866;text-shadow:0 1px 2px #000}.cap-pip{box-shadow:0 0 0 1px #000c,0 2px 6px #00000080}#stat-col{display:flex;flex-direction:column;gap:5px;width:190px}.bar{position:relative;height:18px;background:linear-gradient(180deg,#0a0805,#16110a);border:1px solid #6d5426;border-radius:2px;overflow:hidden;box-shadow:inset 0 1px 3px #000c,0 1px #e8c66a1a}.bar div{height:100%;width:50%;transition:width .12s;position:absolute;left:0;top:0}#hp-lag{background:#8a3626;transition:width .6s ease-out!important}.bar.hp #hp-fill{background:linear-gradient(180deg,#8fd06a,#55a83e 45%,#3d8a2e);box-shadow:inset 0 1px #ffffff59}.bar.hp.low #hp-fill{background:linear-gradient(180deg,#f08a70,#c8503a,#a33f2e);animation:lowPulse .9s infinite}@keyframes lowPulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.35)}}.bar.xp{height:10px}.bar.xp div{background:linear-gradient(180deg,#9f8de8,#6a58c0 60%,#51409a);box-shadow:inset 0 1px #ffffff4d}.bar span{position:absolute;inset:0;text-align:center;font-size:11px;line-height:17px;color:#fff;text-shadow:0 1px 2px #000,0 0 4px rgba(0,0,0,.9);font-variant-numeric:tabular-nums}.bar.xp span{line-height:9px;font-size:8px}#gold-row{display:flex;align-items:center;gap:6px;font-size:15px;color:#ffd769}#gold-row .coin{color:#e8c66a}#pts-badge{background:#8f2de0;border-radius:8px;padding:0 6px;color:#fff;margin-left:3px}#ability-bar,#item-bar{display:flex;gap:6px}.ab-slot{position:relative;width:52px;height:52px;border:1px solid #8a6a2e;border-radius:4px;background:#14100a;cursor:pointer;box-shadow:0 0 0 1px #000000d9,inset 0 0 0 1px #c9a84c1f,inset 0 -6px 10px #00000080;transition:transform .08s,box-shadow .12s,border-color .12s}.ab-slot:hover:not(.locked):not(.empty){border-color:#e8c66a;box-shadow:0 0 0 1px #000000d9,0 0 10px #e8c66a73,inset 0 0 0 1px #e8c66a4d;transform:translateY(-1px)}.ab-slot:active:not(.locked){transform:translateY(1px) scale(.95)}.ab-slot canvas{width:100%;height:100%;display:block;border-radius:3px}.ab-slot .key{position:absolute;top:-1px;left:3px;font-size:11px;font-weight:700;color:#f0cf7a;text-shadow:0 1px 2px #000,0 0 4px #000;z-index:2}.ab-slot .cd-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;border-radius:3px;z-index:1;text-shadow:0 1px 3px #000;font-variant-numeric:tabular-nums}.ab-slot.ready-flash:after{content:"";position:absolute;inset:-2px;border-radius:5px;pointer-events:none;z-index:3;box-shadow:0 0 14px 3px #ffe08cd9,inset 0 0 10px #ffe08c99;animation:readyFlash .7s ease-out forwards}@keyframes readyFlash{0%{opacity:1}to{opacity:0}}.ab-slot.empty{position:relative}.ab-slot.empty:before{content:"◈";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c9a84c2e;font-size:18px;pointer-events:none}.ab-slot .charges{position:absolute;bottom:0;right:2px;font-size:11px;color:#ffe9a8;text-shadow:0 1px 2px #000;z-index:2}.ab-slot.locked{opacity:.35}.ab-slot.locked:after{content:attr(data-lock);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9a8a64;font-size:10px;text-align:center}.ab-slot.active-glow{box-shadow:0 0 12px #e8c66acc;border-color:#ffe9a8}.ab-slot.pressed{transform:scale(.92)}.ab-slot.empty{opacity:.3}#item-bar .ab-slot{width:44px;height:44px}#buff-bar{display:flex;flex-direction:column-reverse;gap:3px;max-height:60px;flex-wrap:wrap}.buff-icon{width:22px;height:22px;border-radius:3px;border:1px solid #55482c;font-size:12px;display:flex;align-items:center;justify-content:center}.buff-icon.good{border-color:#6fbf5a;background:#3f8a304d}.buff-icon.bad{border-color:#d9705c;background:#a33f2e4d}#target-panel{display:flex;gap:8px;align-items:center;background:#0006;border:1px solid #3a301a;border-radius:4px;padding:5px 9px}#target-info{font-size:12px;line-height:1.4;min-width:110px}#target-info b{color:#e8c66a}#target-info .tbar{height:6px;background:#222;border-radius:2px;overflow:hidden;margin-top:2px}#target-info .tbar div{height:100%;background:#6fbf5a}#minimap-wrap{position:absolute;right:12px;bottom:12px}#minimap{border:2px solid #a07f38;border-radius:4px;display:block;background:#0a0805;cursor:pointer;box-shadow:0 0 0 1px #000000e6,inset 0 0 0 1px #c9a84c33,0 6px 22px #000000b3}#minimap-wrap:before,#minimap-wrap:after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;z-index:2;border-color:#e8c66a;border-style:solid}#minimap-wrap:before{left:-3px;top:-3px;border-width:2px 0 0 2px}#minimap-wrap:after{right:-3px;bottom:-3px;border-width:0 2px 2px 0}#btn-cam-home{position:absolute;top:-30px;right:0;width:28px;height:26px;font-size:15px;cursor:pointer;background:#1a150ce6;color:#c9a84c;border:1px solid #55482c;border-radius:3px}#btn-cam-home:hover{color:#ffe9a8;border-color:#c9a84c}#respawn-overlay{position:absolute;top:13%;left:50%;transform:translate(-50%,-50%);text-align:center;background:#0a0805d9;border:1px solid #7a3a2c;border-radius:6px;padding:14px 34px;z-index:45;pointer-events:none}#respawn-text{font-size:20px;color:#ff9080}#respawn-text b{font-size:34px;color:#ffe9a8;display:block}#respawn-text .hint{display:block;margin-top:4px;line-height:1.5}#tooltip{position:absolute;background:#0e0b06f5;border:1px solid #7a6230;border-radius:4px;padding:8px 12px;font-size:12px;max-width:280px;z-index:30;pointer-events:none;line-height:1.5}#tooltip b{color:#e8c66a}#tooltip .gold{color:#ffd769}#tooltip .dim{color:#9a8a64;font-style:italic}.modal{position:absolute;inset:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:40;pointer-events:auto}.modal-box{background:linear-gradient(180deg,#201a0ffa,#141009fa);border:1px solid #7a6230;border-radius:6px;padding:20px 26px;min-width:420px;max-width:720px;max-height:88vh;overflow-y:auto}.modal-box h3{color:#e8c66a;letter-spacing:2px;text-align:center;margin-bottom:10px}.shop-gold{text-align:center;color:#ffd769;font-size:17px;margin-bottom:12px}#shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.shop-item{border:1px solid #55482c;border-radius:4px;padding:8px;cursor:pointer;text-align:center;background:#0000004d;transition:all .1s;position:relative}.shop-item:hover{border-color:#c9a84c;background:#3c301880}.shop-item.poor{opacity:.45}.shop-item canvas{width:40px;height:40px}.shop-item .si-name{font-size:11px;color:#e8dcc0}.shop-item .si-cost{font-size:12px;color:#ffd769}.shop-item.owned-slot{display:flex;align-items:center;gap:8px;text-align:left}#shop-owned h4{margin:14px 0 6px;color:#c9a84c}#owned-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-height:52px}#btn-shop-close,#btn-upgrade-close{margin-top:14px;width:100%}#upgrade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.up-item{border:1px solid #55482c;border-radius:4px;padding:10px 12px;cursor:pointer;background:#0000004d;font-size:13px}.up-item:hover{border-color:#c9a84c}.up-item b{color:#e8c66a}.up-item .cnt{float:right;color:#8f7ddb}.up-item.maxed,.up-item.nopts{opacity:.4;cursor:default}.set-row{display:flex;align-items:center;gap:12px;margin:10px 0;font-size:14px}.set-row label{width:170px;color:#c9a84c}.set-row input[type=range]{flex:1}.set-row input[type=checkbox]{transform:scale(1.3)}#end-panel{text-align:center}#end-panel h1{font-size:60px;letter-spacing:10px;color:#e8c66a;text-shadow:0 0 40px rgba(232,198,106,.5)}#end-panel h1.defeat{color:#d9705c;text-shadow:0 0 40px rgba(217,112,92,.4)}#end-sub{color:#9a8a64;font-style:italic;margin:8px 0 18px;font-size:17px}#end-stats{display:flex;gap:14px;justify-content:center;margin-bottom:20px}.end-col{border:1px solid #55482c;border-radius:4px;padding:12px 18px;min-width:230px;background:#0000004d}.end-col h4{margin-bottom:8px;font-size:17px}.end-col.winner{border-color:#e8c66a;box-shadow:0 0 20px #e8c66a40}.end-col table{width:100%;font-size:13px;border-collapse:collapse}.end-col td{padding:2px 4px;text-align:left;color:#b0a480}.end-col td:last-child{text-align:right;color:#e8dcc0}#debug-panel{position:absolute;top:60px;left:12px;background:#000000b3;border:1px solid #444;font:11px monospace;color:#8f8;padding:8px;white-space:pre;z-index:50}#disconnect-overlay .modal-box{text-align:center}#disconnect-overlay p{margin:10px 0 16px;color:#9a8a64}