* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0f0f13; --bg2: #1a1a24; --bg3: #24242f; --border: #2e2e3e;
  --text: #e8e8f0; --text2: #8888a8; --accent: #7c6fea; --accent2: #5a4fd4;
  --gold: #f0b84a; --danger: #e05555; --success: #4aaa6e;
}
body { background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,sans-serif; min-height:100vh; overflow-x:hidden; }
.screen { display:none; min-height:100vh; flex-direction:column; }
.screen.active { display:flex; }

/* AUTH */
.auth-box { display:flex; flex-direction:column; gap:12px; max-width:320px; margin:auto; padding:40px 24px; }
.auth-box h1 { font-size:32px; font-weight:700; text-align:center; color:var(--accent); }
.auth-box .subtitle { text-align:center; color:var(--text2); font-size:14px; margin-bottom:8px; }
.version { text-align:center; font-size:11px; color:var(--text2); margin-top:4px; opacity:0.6; }
input { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:10px 14px; color:var(--text); font-size:14px; outline:none; transition:border-color .2s; width:100%; }
input:focus { border-color:var(--accent); }
button { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:10px 14px; font-size:14px; font-weight:500; cursor:pointer; transition:background .15s,transform .1s; }
button:hover { background:var(--accent2); }
button:active { transform:scale(0.98); }
button.ghost { background:transparent; color:var(--text2); border:1px solid var(--border); }
button.ghost:hover { background:var(--bg2); color:var(--text); }
.msg { font-size:13px; text-align:center; color:var(--danger); min-height:18px; }
.msg.ok { color:var(--success); }

/* HOME */
.home-header { display:flex; align-items:center; gap:12px; padding:24px 20px 16px; }
.avatar { width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; }
.username { font-size:15px; font-weight:600; }
.coin { font-size:12px; color:var(--gold); margin-top:2px; }
.nav-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 20px; }
.nav-btn { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:20px 12px; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--text); cursor:pointer; transition:border-color .2s,background .2s; }
.nav-btn:hover { border-color:var(--accent); background:var(--bg3); }
.nav-icon { font-size:24px; line-height:1; }
.stats-bar { display:flex; margin:16px 20px 0; background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.stat { flex:1; display:flex; flex-direction:column; align-items:center; padding:12px; border-right:1px solid var(--border); }
.stat:last-child { border-right:none; }
.stat span { font-size:22px; font-weight:700; }
.stat small { font-size:11px; color:var(--text2); margin-top:2px; }

/* SCREEN HEADER */
.screen-header { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); }
.screen-header h2 { font-size:16px; font-weight:600; }
.back-btn { background:transparent; color:var(--text2); border:1px solid var(--border); padding:6px 12px; font-size:13px; border-radius:6px; }
.back-btn:hover { color:var(--text); background:var(--bg2); }

/* LOBBY */
.lobby-body { padding:16px 20px; display:flex; flex-direction:column; gap:12px; }
.primary-btn { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:12px; font-size:14px; font-weight:600; cursor:pointer; width:100%; }
.primary-btn:hover { background:var(--accent2); }
.section-label { font-size:11px; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; }
.empty-msg { font-size:13px; color:var(--text2); text-align:center; padding:20px 0; }

/* ROOM GRID */
.room-grid { display:flex; flex-direction:column; gap:10px; }
.room-card { display:flex; gap:12px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:10px; cursor:default; transition:border-color .2s; }
.room-card:hover { border-color:var(--accent); }
.mini-board { border-radius:4px; flex-shrink:0; }
.room-card-info { flex:1; display:flex; flex-direction:column; gap:4px; justify-content:center; }
.room-card-name { font-size:13px; font-weight:600; }
.room-card-meta { font-size:11px; color:var(--text2); }
.room-card-actions { margin-top:4px; }
.join-btn { background:var(--success); color:#fff; border:none; border-radius:6px; padding:6px 16px; font-size:12px; font-weight:600; cursor:pointer; }
.join-btn:hover { opacity:0.85; }
.watch-btn { background:transparent; color:var(--accent); border:1px solid var(--accent); border-radius:6px; padding:5px 14px; font-size:12px; font-weight:600; cursor:pointer; }
.watch-btn:hover { background:var(--accent); color:#fff; }
.waiting-lbl { font-size:12px; color:var(--text2); }

/* CREATE ROOM */
.create-body { padding:16px 20px; display:flex; flex-direction:column; gap:14px; }
.setting-group { display:flex; flex-direction:column; gap:6px; }
.setting-label { font-size:12px; color:var(--text2); font-weight:500; }
.setting-select { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--text); font-size:14px; outline:none; appearance:none; cursor:pointer; }
.setting-select:focus { border-color:var(--accent); }
.setting-input { background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; color:var(--text); font-size:14px; outline:none; }
.setting-input:focus { border-color:var(--accent); }
.setting-toggle-row { flex-direction:row; align-items:center; justify-content:space-between; }
.toggle { position:relative; display:inline-block; width:44px; height:24px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; top:0;left:0;right:0;bottom:0; background:var(--bg3); border:1px solid var(--border); border-radius:24px; transition:.3s; }
.toggle-slider:before { position:absolute; content:""; height:16px; width:16px; left:3px; bottom:3px; background:var(--text2); border-radius:50%; transition:.3s; }
.toggle input:checked + .toggle-slider { background:var(--accent); border-color:var(--accent); }
.toggle input:checked + .toggle-slider:before { transform:translateX(20px); background:#fff; }

/* GAME */
.game-header { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); background:var(--bg2); }
#game-status { flex:1; font-size:13px; color:var(--text2); }
.turn-badge { font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; background:var(--bg3); color:var(--text2); }
.turn-badge.my-turn { background:var(--accent); color:#fff; }
#screen-game { overflow-y: auto; }
#phaser-container { display:block; margin:0 auto; background:#0f0f13; max-width:100vw; }
#phaser-container canvas { display:block !important; max-width:100%; }

/* SETTINGS */
.settings-body { padding:16px 20px; display:flex; flex-direction:column; gap:16px; }
.settings-section { background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.settings-section .section-label { padding:10px 14px 6px; display:block; }
.settings-row { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-top:1px solid var(--border); font-size:13px; }
.settings-val { color:var(--text2); font-size:12px; }
.danger-btn { background:transparent; color:var(--danger); border:1px solid var(--danger); border-radius:8px; padding:10px; font-size:14px; font-weight:500; cursor:pointer; transition:background .15s; width:100%; }
.danger-btn:hover { background:rgba(224,85,85,0.1); }

/* COMBAT */
#screen-combat { display:none; flex-direction:column; min-height:100vh; background:var(--bg); }
.combat-header { padding:10px 16px; border-bottom:1px solid var(--border); background:var(--bg2); display:flex; justify-content:space-between; align-items:center; }
.combat-turn { font-size:13px; font-weight:600; padding:4px 12px; border-radius:20px; }
.combat-turn.my-turn { background:var(--accent); color:#fff; }
.combat-turn.opp-turn { background:var(--bg3); color:var(--text2); }

.combat-arena { display:flex; flex-direction:column; gap:0; padding:12px 16px; }
.combatant { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:10px 14px; }
.combatant-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.piece-sym-big { font-size:32px; line-height:1; }
.combatant-name { font-size:13px; font-weight:600; }
.hp-text { font-size:11px; color:var(--text2); margin-top:1px; }
.hp-track { height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; }
.hp-fill { height:100%; border-radius:4px; transition:width .3s, background .3s; }

.vs-divider { text-align:center; font-size:18px; font-weight:700; color:var(--text2); padding:6px 0; }

.combat-log-box { margin:8px 16px; background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; min-height:80px; max-height:100px; overflow:hidden; }
.log-entry { font-size:12px; padding:2px 0; border-bottom:0.5px solid var(--border); color:var(--text2); }
.log-entry:last-child { border-bottom:none; }
.log-entry.damage { color:#e05555; }
.log-entry.heal { color:#4aaa6e; }
.log-entry.effect { color:var(--accent); }
.log-entry.revive { color:#f0b84a; font-weight:600; }
.log-entry.opponent { color:var(--text2); font-style:italic; }
.log-entry.stun { color:#f0b84a; }
.log-entry.dodge { color:#378add; }
.log-entry.immune { color:#7c6fea; }
.log-entry.counter { color:#e05555; }

.hand-label { font-size:11px; color:var(--text2); text-transform:uppercase; letter-spacing:.06em; padding:0 16px 4px; }
.combat-hand { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 16px 8px; }
.card-item { background:var(--bg2); border:1.5px solid var(--border); border-radius:10px; padding:10px; cursor:default; transition:transform .1s, border-color .2s; }
.card-item.playable { cursor:pointer; }
.card-item.playable:hover { transform:translateY(-3px); }
.card-item.playable:active { transform:scale(0.97); }
.card-item.steal-card { cursor:pointer; border-style:dashed; }
.card-item.steal-card:hover { transform:translateY(-2px); }
.card-rarity { font-size:9px; font-weight:700; letter-spacing:.08em; margin-bottom:3px; }
.card-name { font-size:13px; font-weight:600; margin-bottom:3px; }
.card-desc { font-size:11px; color:var(--text2); line-height:1.4; }
.steal-prompt { font-size:12px; color:var(--accent); font-weight:600; padding:4px 0 8px; grid-column:1/-1; text-align:center; }

.combat-actions { display:flex; gap:8px; padding:8px 16px 16px; }
.discard-btn { flex:1; background:transparent; color:var(--text2); border:1px solid var(--border); border-radius:8px; padding:10px; font-size:13px; cursor:pointer; }
.discard-btn:hover { background:var(--bg2); color:var(--text); }

/* RESULT OVERLAY */
#combat-result { display:none; position:absolute; top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,0.75); flex-direction:column; align-items:center; justify-content:center; gap:12px; z-index:100; }
#result-title { font-size:40px; font-weight:700; }
#result-sub { font-size:16px; color:var(--text2); }
#result-close { background:var(--accent); color:#fff; border:none; border-radius:8px; padding:12px 32px; font-size:15px; font-weight:600; cursor:pointer; margin-top:8px; }