:root{
  --bg:#090d13;--panel:#111824;--panel2:#151f2d;--line:#253246;--text:#e8edf5;--muted:#8c99aa;
  --accent:#c95b45;--accent2:#e29a62;--good:#6fbf8f;--danger:#d86b6b;--gold:#d8b36c;--shadow:0 24px 70px rgba(0,0,0,.35);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}body{background:radial-gradient(circle at 15% -10%,#202a39 0,transparent 30%),radial-gradient(circle at 90% 0,#241715 0,transparent 24%),var(--bg)}button,input{font:inherit}.hidden{display:none!important}.muted{color:var(--muted)}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:28px}.auth-card{width:min(620px,100%);background:rgba(17,24,36,.94);border:1px solid var(--line);border-radius:24px;padding:30px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.brand{display:flex;gap:11px;align-items:center}.brand-mark{width:38px;height:38px;border:1px solid #934a3a;background:linear-gradient(145deg,#8f372a,#3d1a18);border-radius:10px;display:grid;place-items:center;font-weight:900;color:#ffd9bd;box-shadow:inset 0 0 18px rgba(255,177,112,.1)}.brand strong{letter-spacing:.15em;font-size:14px}.brand small{display:block;color:var(--muted);margin-top:2px;font-size:11px}.brand-large .brand-mark{width:54px;height:54px;font-size:22px}.brand-large strong{font-size:20px}.auth-intro{line-height:1.6;margin:20px 0}.auth-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:20px}.tab-button{border:0;background:none;color:var(--muted);padding:12px 18px;cursor:pointer;border-bottom:2px solid transparent}.tab-button.active{color:var(--text);border-bottom-color:var(--accent)}
.auth-form{display:grid;gap:16px}.auth-form label,.field-title{display:grid;gap:7px;color:#b8c1cd;font-size:13px}.auth-form input,.search-row input,.chat-compose input{width:100%;border:1px solid var(--line);background:#0c121b;color:var(--text);border-radius:10px;padding:12px 13px;outline:none}.auth-form input:focus,.search-row input:focus,.chat-compose input:focus{border-color:#7d4a42;box-shadow:0 0 0 3px rgba(201,91,69,.08)}
.class-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:8px}.class-card{border:1px solid var(--line);background:#0d141e;color:var(--text);padding:12px;border-radius:12px;text-align:left;cursor:pointer}.class-card strong{display:block;margin-bottom:5px}.class-card small{color:var(--muted);line-height:1.35}.class-card.active{border-color:var(--accent);background:#1a171b}.primary,.secondary,.ghost,.danger-btn{border:1px solid transparent;border-radius:10px;padding:10px 13px;cursor:pointer;transition:.16s transform,.16s background,.16s border}.primary{background:linear-gradient(135deg,#b74d39,#8e382c);color:#fff}.primary:hover,.secondary:hover,.ghost:hover,.danger-btn:hover{transform:translateY(-1px)}.secondary{background:#1a2635;border-color:#304158;color:#dfe8f5}.ghost{background:transparent;border-color:var(--line);color:#b9c4d0}.danger-btn{background:#33191b;border-color:#642e31;color:#f0b9b9}.wide{width:100%}.small{padding:7px 10px;font-size:12px}.error-box{margin-top:14px;background:#2c171a;border:1px solid #6b3035;color:#f0b8be;padding:11px 12px;border-radius:10px}
.game-shell{min-height:100vh}.topbar{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;background:rgba(9,13,19,.92);backdrop-filter:blur(16px);z-index:20}.topbar-right{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.online-dot{width:7px;height:7px;background:var(--good);border-radius:50%;box-shadow:0 0 10px rgba(111,191,143,.7)}
.layout{display:grid;grid-template-columns:240px minmax(0,1100px);gap:26px;max-width:1400px;margin:0 auto;padding:24px}.sidebar{position:sticky;top:90px;align-self:start}.mini-profile{background:var(--panel);border:1px solid var(--line);padding:15px;border-radius:16px;margin-bottom:13px}.mini-name{font-weight:750}.mini-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:7px}.bar{height:7px;background:#081019;border:1px solid #213046;border-radius:99px;overflow:hidden}.bar>span{display:block;height:100%;background:linear-gradient(90deg,#8d3c32,#cc6650)}.bar.mana>span{background:linear-gradient(90deg,#3c527f,#6d89c6)}.bar-wrap{display:grid;gap:4px;margin-top:10px}.bar-label{font-size:11px;color:var(--muted);display:flex;justify-content:space-between}.main-nav{display:grid;gap:5px}.nav-btn{border:1px solid transparent;background:transparent;color:#8d99a9;padding:11px 12px;border-radius:10px;text-align:left;cursor:pointer}.nav-btn span{font-size:10px;color:#59687a;margin-right:10px}.nav-btn.active,.nav-btn:hover{background:#121b28;border-color:#202e40;color:#e4eaf1}.main-content{min-width:0;padding-bottom:80px}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.page-head h1{margin:0;font-size:26px;letter-spacing:-.02em}.page-head p{margin:6px 0 0;color:var(--muted);font-size:13px}.section-title{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#8d99a9;margin:24px 0 10px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.card{background:linear-gradient(180deg,var(--panel),#0f1620);border:1px solid var(--line);border-radius:15px;padding:15px;min-width:0}.card.current{border-color:#744035;box-shadow:inset 0 0 0 1px rgba(201,91,69,.08)}.card h3{margin:0 0 6px;font-size:15px}.card p{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 12px}.card-top{display:flex;justify-content:space-between;gap:10px}.badge{display:inline-flex;padding:4px 7px;border-radius:99px;background:#192333;border:1px solid #2a3b51;color:#aebccc;font-size:10px;white-space:nowrap}.badge.gold{color:#e9c982;border-color:#5c4b2a;background:#211d13}.badge.red{color:#e6a79b;border-color:#64382f;background:#261916}.stats-row{display:flex;gap:12px;flex-wrap:wrap;color:#b8c2cf;font-size:11px;margin:8px 0 12px}.actions{display:flex;gap:7px;flex-wrap:wrap}.list{display:grid;gap:8px}.list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--line);background:#0e151f;border-radius:11px}.list-row .sub{color:var(--muted);font-size:11px;margin-top:3px}.item-name{font-weight:650;font-size:13px}.rarity-common{color:#d1d8e0}.rarity-uncommon{color:#8fd0a8}.rarity-rare{color:#9fb7ff}.empty{border:1px dashed #2b394c;color:#738195;border-radius:13px;padding:28px;text-align:center}.loading-card{padding:30px;border:1px solid var(--line);border-radius:14px;color:var(--muted);background:var(--panel)}
.battle-arena{display:grid;grid-template-columns:1fr 90px 1fr;gap:14px;align-items:stretch}.fighter{background:linear-gradient(165deg,#131d2a,#0e151f);border:1px solid var(--line);border-radius:16px;padding:18px}.fighter.enemy{background:linear-gradient(165deg,#211819,#121218);border-color:#4b2d2b}.versus{display:grid;place-items:center;color:#566476;font-weight:900;letter-spacing:.18em}.fighter-name{font-size:19px;font-weight:800}.fighter-meta{font-size:11px;color:var(--muted);margin:4px 0 15px}.effect-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.effect{font-size:10px;padding:4px 6px;border:1px solid #4a3d28;background:#231e13;color:#d9be7a;border-radius:6px}.battle-actions{margin-top:13px;display:flex;gap:8px;flex-wrap:wrap}.battle-log{margin-top:14px;max-height:260px;overflow:auto;display:flex;flex-direction:column-reverse;gap:6px}.log-line{font-size:12px;color:#aab5c3;border-left:2px solid #344458;padding:5px 8px}.turn-notice{padding:10px 12px;border:1px solid #3b4d64;background:#141e2b;border-radius:10px;margin:12px 0;color:#c4d0dd;font-size:12px}.result-box{border:1px solid #64402e;background:#201812;padding:16px;border-radius:13px;margin-bottom:13px}
.search-row,.chat-compose{display:flex;gap:8px}.search-row input,.chat-compose input{flex:1}.chat-box{height:480px;overflow:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.chat-message{padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#0e151f}.chat-message strong{font-size:12px}.chat-message span{display:block;color:#c0c8d2;font-size:12px;line-height:1.45;margin-top:4px}.chat-message time{font-size:9px;color:#667487;margin-left:6px}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.stat-box{background:#0e151f;border:1px solid var(--line);border-radius:12px;padding:12px}.stat-box span{display:block;color:var(--muted);font-size:10px}.stat-box strong{font-size:19px;margin-top:3px;display:block}.mobile-nav{display:none}.toast{position:fixed;right:20px;bottom:20px;max-width:360px;background:#172131;border:1px solid #35465d;color:#e9eef5;padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);z-index:100}
@media(max-width:900px){.layout{grid-template-columns:1fr;padding:14px}.sidebar{position:static}.main-nav{display:none}.grid,.grid.two{grid-template-columns:1fr 1fr}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;background:rgba(10,15,22,.96);border-top:1px solid var(--line);z-index:30;padding-bottom:env(safe-area-inset-bottom)}.mobile-nav button{border:0;background:none;color:#738195;padding:13px 3px;font-size:11px}.mobile-nav button.active{color:#efc0ae;background:#17171b}.topbar{padding:0 14px}.battle-arena{grid-template-columns:1fr}.versus{height:30px}.profile-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.auth-screen{padding:13px}.auth-card{padding:20px;border-radius:18px}.class-picker{grid-template-columns:1fr}.grid,.grid.two{grid-template-columns:1fr}.page-head{align-items:start;flex-direction:column}.page-head h1{font-size:22px}.topbar .brand small{display:none}.topbar-right{font-size:10px}.layout{padding:10px}.mini-profile{margin-bottom:5px}.card{padding:13px}.search-row,.chat-compose{flex-direction:column}.chat-box{height:420px}.toast{left:12px;right:12px;bottom:72px}}