:root{--night:#141828;--panel:#f6ead2;--ink:#3a2c1c;--ink-soft:#6b5a42;--accent:#ff9d3c;--accent-dark:#d97a1a;--gold:#ffd94a}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%}body{font-family:Trebuchet MS,Verdana,sans-serif;color:var(--ink);background:radial-gradient(1200px 500px at 50% -10%,#2c3358 0%,transparent 60%),linear-gradient(180deg,#1a2040,#12152a 55%,#0c0e1d)}.center{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}.panel{background:var(--panel);border:4px solid #4a3622;border-radius:14px;box-shadow:0 10px #00000059,inset 0 0 0 3px #fff7e3;padding:26px 30px;min-width:340px}.panel h1{font-size:24px;text-align:center}.panel h1 .sub{display:block;font-size:11px;letter-spacing:3px;color:var(--accent-dark);text-transform:uppercase;margin-top:4px}.field{margin-top:14px}.field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);margin-bottom:5px}.field input{width:100%;padding:10px 12px;border:3px solid #4a3622;border-radius:8px;background:#fffaf0;font-size:15px;font-family:inherit;outline:none}.field input:focus{border-color:var(--accent-dark)}.btn{display:block;width:100%;margin-top:16px;padding:12px 18px;border:3px solid #4a3622;border-radius:10px;background:linear-gradient(180deg,#ffc14d,#ff9d3c 60%,#ef8a25);color:#3a2208;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 5px #8a5a16;font-family:inherit}.btn:active{transform:translateY(4px);box-shadow:0 1px #8a5a16}.btn.secondary{background:linear-gradient(180deg,#fff5dd,#ecd9b3);box-shadow:0 5px #9a8158;color:var(--ink)}.btn:disabled{filter:grayscale(.7);opacity:.6;cursor:not-allowed}.msg{margin-top:12px;font-size:13px;text-align:center;min-height:18px;font-weight:700;color:#b3261e}.msg.ok{color:#2c7a35}.link-row{margin-top:14px;text-align:center;font-size:13px;color:var(--ink-soft)}.link-row a{color:var(--accent-dark);font-weight:700;cursor:pointer;text-decoration:underline}.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}.class-card{background:#fffaf0;border:3px solid #4a3622;border-radius:12px;padding:14px 10px;text-align:center;cursor:pointer}.class-card.selected{outline:4px solid var(--accent);outline-offset:2px;background:#fff3d8}.class-card .avatar{width:56px;height:64px;margin:0 auto 8px;border-radius:10px;border:3px solid #4a3622}.class-card h3{font-size:14px}.class-card .role{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft)}.class-card .stats{font-size:10px;margin-top:6px;color:var(--ink-soft);line-height:1.5}.lobby-wrap{display:flex;gap:16px;width:900px;max-width:96vw}.lobby-col{flex:1}.kv-row{display:flex;justify-content:space-between;font-size:13px;padding:5px 0;border-bottom:2px dashed #d8c8a8}.party-slot{display:flex;align-items:center;gap:10px;background:#fffaf0;border:3px solid #4a3622;border-radius:10px;padding:8px 12px;margin-top:8px;font-size:13px}.party-slot.empty{opacity:.5;border-style:dashed;justify-content:center;color:var(--ink-soft)}.party-slot .dot{width:26px;height:30px;border-radius:7px;border:2px solid #4a3622}.party-slot .leader{margin-left:auto;font-size:10px;background:var(--gold);border:2px solid #4a3622;border-radius:6px;padding:2px 6px;font-weight:700}.party-slot button{margin-left:6px;font-size:10px;padding:3px 8px;border:2px solid #4a3622;border-radius:6px;background:#ecd9b3;cursor:pointer;font-family:inherit;font-weight:700}.online-row{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 0;border-bottom:1px dashed #d8c8a8}.online-row .dot{width:16px;height:18px;border-radius:5px;border:2px solid #4a3622}.online-row button{margin-left:auto;font-size:10px;padding:3px 8px;border:2px solid #4a3622;border-radius:6px;background:#ffc14d;cursor:pointer;font-family:inherit;font-weight:700}h4.sec{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--ink-soft);margin-top:6px}.game-shell{position:relative;width:100vw;height:100vh;background:#0d1020}.game-hud{position:absolute;top:10px;left:10px;z-index:5;background:#14100acc;border:3px solid #4a3622;border-radius:10px;color:#f3e9d2;padding:8px 12px;font-size:12px}.game-hud b{color:var(--gold)}.game-hud button{margin-top:8px;display:block;width:100%;font-family:inherit;font-weight:700;border:2px solid #4a3622;border-radius:6px;padding:5px;background:#ecd9b3;cursor:pointer}.dhud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;font-size:12px;color:#e7e2d6}.dhud-box{position:absolute;background:#071020e0;border:1px solid #7A5A1A;border-radius:8px;padding:8px 10px}.dhud-tl{top:8px;left:8px;width:225px}.dhud-tl .row{display:flex;justify-content:space-between;font-weight:700}.dhud-tc{top:8px;left:50%;transform:translate(-50%);text-align:center;padding:6px 18px}.dhud-tr{top:8px;right:8px;max-width:230px;font-size:11px;text-align:center}.dhud-bl{bottom:8px;left:8px;width:195px}.dhud-br{bottom:8px;right:8px;width:215px;font-size:11px}.dhud-bl h6,.dhud-br h6{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#777c89;margin-bottom:4px}.dhud-br .row{display:flex;justify-content:space-between;margin-top:2px}.dhud-br .row b{color:#f3c14b;font-family:ui-monospace,monospace}.dhud-br .ritem{font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dhud-br .standby{margin-top:5px;text-align:center;font-size:8px;letter-spacing:2px;color:#f59e0b;text-transform:uppercase}.gold-t{color:#f3c14b}.muted-t{color:#777c89;font-size:10px}.dbar{position:relative;height:13px;border:1px solid #3D321D;border-radius:5px;background:#030711;overflow:hidden;margin-top:5px}.dbar.big{height:17px}.dbar i{position:absolute;top:0;right:0;bottom:0;left:0;display:block;transition:width .15s}.dbar em{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:9px;font-weight:700;color:#fff;text-shadow:0 1px 2px #000;font-family:ui-monospace,monospace}.f-hp{background:linear-gradient(180deg,#ff6a78,#c41f31)}.f-mp{background:linear-gradient(180deg,#5cb6f0,#1a6fae)}.f-boss{background:linear-gradient(180deg,#b07dff,#5b2aa8)}.pvp-b{display:inline-block;margin-top:7px;font-size:9px;font-weight:700;letter-spacing:1px;padding:3px 8px;border-radius:4px;border:1px solid;cursor:pointer;pointer-events:auto}.pvp-b.peace{color:#32d47e;border-color:#32d47e}.pvp-b.hostile{color:#ff3b4f;border-color:#ff3b4f;cursor:default}.dhud-boss{position:absolute;top:56px;left:50%;transform:translate(-50%);width:460px}.dhud-boss .bname{text-align:center;font-family:Georgia,serif;color:#d9b8ff;font-size:13px;letter-spacing:1px;text-shadow:0 2px 3px #000;margin-bottom:3px}.portal-n{position:absolute;top:100px;left:50%;transform:translate(-50%);color:#f3c14b;font-family:Georgia,serif;font-size:14px;letter-spacing:1px;background:#071020e6;border:1px solid #F3C14B;border-radius:8px;padding:6px 20px}.dskills{position:absolute;bottom:8px;left:50%;transform:translate(-50%);display:flex;gap:7px}.dslot{position:relative;width:48px;height:48px;background:#071020e6;border:1px solid #7A5A1A;border-radius:8px;text-align:center}.dslot .k{position:absolute;top:1px;left:4px;font-size:9px;color:#f3c14b;font-weight:700}.dslot .ic{display:block;margin-top:13px;font-size:18px}.dslot.locked{filter:grayscale(1);opacity:.4}.dslot .cd{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:#fff;border-radius:7px}.prow{display:flex;align-items:center;gap:6px;font-size:11px;margin-top:4px}.prow .dot{width:14px;height:16px;border-radius:4px;border:1px solid #7A5A1A;display:inline-block}.prow .mini{flex:1;height:7px;border-radius:4px;background:#030711;overflow:hidden}.prow .mini i{display:block;height:100%;background:#ff3b4f}.dhint{position:absolute;bottom:64px;left:8px;color:#777c89;font-size:9px;background:#071020b3;border-radius:6px;padding:5px 8px;pointer-events:none}.dmodal{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#030711b3;pointer-events:auto}.dpanel{width:380px;background:#101d38;border:1px solid #7A5A1A;border-radius:10px;padding:20px 24px;text-align:center}.dpanel h2{font-family:Georgia,serif;color:#f3c14b;font-size:18px}.dpanel p{font-size:12px;color:#afa896;margin-top:8px;line-height:1.6}.dtimer{font-family:ui-monospace,monospace;font-size:42px;font-weight:700;color:#ff3b4f;margin:8px 0}.dtoast{position:absolute;bottom:74px;left:50%;transform:translate(-50%);background:#071020f2;color:#f3c14b;border:1px solid #7A5A1A;border-radius:7px;padding:6px 16px;font-size:12px;font-weight:700}.dleave{position:absolute;top:8px;right:248px;background:#101d38;border:1px solid #3D321D;color:#afa896;border-radius:6px;padding:5px 10px;font-size:11px;cursor:pointer;font-family:inherit}.btn.danger{background:linear-gradient(180deg,#ff8a7e,#e0584f);box-shadow:0 5px #8a2620;color:#fff}.btn.block{display:block;width:100%}.dgsel-back{position:fixed;top:0;right:0;bottom:0;left:0;background:#030711cc;display:flex;align-items:center;justify-content:center;z-index:50;padding:14px}.dgsel{width:880px;max-width:98%;max-height:94vh;display:flex;flex-direction:column;background:#101d38;border:1px solid #7A5A1A;border-radius:10px;box-shadow:0 16px 60px #000c}.dgsel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #3D321D}.dgsel-head h2{font-family:Georgia,serif;color:#f3c14b;font-size:18px;letter-spacing:1px}.dgsel-x{width:30px;height:30px;border:1px solid #3D321D;border-radius:6px;background:#071020;color:#afa896;cursor:pointer;font-family:inherit}.dgsel-body{display:flex;gap:12px;padding:14px;overflow:auto}.dgsel-left{flex:1;min-width:0}.dgsel-left h5{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#777c89;margin:10px 0 6px}.dgsel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.dg-card{background:#071020;border:1px solid #3D321D;border-radius:8px;padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:2px;font-size:12px;color:#e7e2d6}.dg-card:hover{filter:brightness(1.3)}.dg-card.sel{border-color:#f3c14b;box-shadow:0 0 8px #f3c14b40}.dg-card .ic{font-size:18px}.dg-card small{font-size:9px;color:#777c89}.dgsel-tiers{display:flex;gap:7px}.tier-btn{flex:1;background:#071020;border:1px solid #3D321D;border-radius:8px;padding:8px;cursor:pointer;color:#e7e2d6;font-family:inherit;display:flex;flex-direction:column;gap:2px;font-size:12px}.tier-btn span{font-size:10px;color:#afa896}.tier-btn small{font-size:9px;color:#777c89}.tier-btn.sel{border-color:#f3c14b;box-shadow:0 0 8px #f3c14b40}.dgsel-right{width:280px;flex-shrink:0}.dg-preview{background:#071020;border:1px solid #3D321D;border-radius:8px;padding:12px;font-size:12px}.dg-preview .pv-title{font-family:Georgia,serif;color:#f3c14b;font-size:14px;margin-bottom:4px}.dg-preview p{font-size:11px;color:#afa896;margin-bottom:8px;line-height:1.5}.dg-preview .pv-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid rgba(122,90,26,.15)}.dg-preview .pv-rewards{margin-top:8px;font-size:11px;color:#afa896;line-height:1.7}.dg-preview .pv-rewards h6{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#777c89;margin-bottom:3px}.contract-box{background:#071020;border:1px solid #3D321D;border-radius:8px;padding:8px 10px;margin:8px 0;font-size:12px}.contract-line b{color:#f3c14b}.contract-sub{font-size:10px;color:#afa896;margin-top:2px}.contract-warn{font-size:10px;color:#e0584f;margin-top:4px;font-weight:700}.relic-n{position:absolute;top:128px;left:50%;transform:translate(-50%);color:#d9b8ff;font-size:12px;font-weight:700;background:#071020e6;border:1px solid #9B5CFF;border-radius:8px;padding:5px 16px}.gv-pause{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;background:#030711c7;display:flex;align-items:center;justify-content:center}.gv-pause .pm-box{width:340px;background:#101d38;border:1px solid #F3C14B;border-radius:12px;padding:22px 20px;text-align:center;box-shadow:0 18px 60px #000000d9}.gv-pause h2{font-family:Georgia,serif;color:#f3c14b;font-size:19px;letter-spacing:1px}.gv-pause .pm-sub{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#777c89;margin:4px 0 14px}.gv-pause .btn{width:100%;margin-top:8px}.gv-pause .pm-warn{font-size:11px;color:#e0584f;margin-top:10px;line-height:1.5;min-height:14px}.gv-banner{position:absolute;left:50%;top:26%;transform:translate(-50%);padding:10px 26px;border:3px solid #4a3622;border-radius:12px;font-weight:800;font-size:16px;letter-spacing:.5px;z-index:40;animation:bannerIn .25s ease-out;box-shadow:0 6px #00000040;pointer-events:none;text-align:center;max-width:70%}.gv-banner.gold{background:linear-gradient(180deg,#ffe9a8,#f3c14b);color:#4a3622}.gv-banner.event{background:linear-gradient(180deg,#e6e0ff,#b9a8ff);color:#2d2350}.gv-banner.portal{background:linear-gradient(180deg,#c9f5ff,#7fd4ec);color:#103a4a}@keyframes bannerIn{0%{opacity:0;transform:translate(-50%) translateY(-14px)}to{opacity:1;transform:translate(-50%) translateY(0)}}