/* ── RESET & VARS ─────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
:root{
--bg:#08080f;--bg2:#0d0d18;--bg3:#131320;--card:#111125;--card2:#181830;
--c1:#00f5ff;--c2:#b94fff;--c3:#ff4081;--c4:#00e676;
--text:#eeeef8;--muted:#6060a0;--border:#1e1e38;
--sidebar:220px;
}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);height:100vh;overflow:hidden}

/* THEMES */
body.theme-light{--bg:#f0f0f8;--bg2:#ffffff;--bg3:#e8e8f4;--card:#ffffff;--card2:#f4f4fc;--c1:#0066cc;--c2:#7700cc;--c3:#cc0055;--c4:#007744;--text:#111130;--muted:#8888aa;--border:#d4d4e8;}
/* Kniffel tooltip */
[title]{position:relative;cursor:help}
td[title]:hover::after{content:attr(title);position:fixed;background:#0d0d18;border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:6px;font-size:11px;white-space:nowrap;z-index:9999;pointer-events:none;max-width:220px;white-space:normal;line-height:1.4}

body.theme-retro{--bg:#000a00;--bg2:#001200;--bg3:#001800;--card:#000f00;--card2:#001500;--c1:#00ff41;--c2:#00cc33;--c3:#00ff41;--c4:#00ff41;--text:#00ff41;--muted:#005510;--border:#003300;}

/* ── LAYOUT ──────────────────────────────────── */
.app{display:flex;height:100vh}

/* ── SIDEBAR ─────────────────────────────────── */
.sidebar{width:var(--sidebar);background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.logo{padding:16px 14px 12px;border-bottom:1px solid var(--border);cursor:pointer;user-select:none}
.logo-name{font-size:19px;font-weight:900;letter-spacing:2px;background:linear-gradient(90deg,var(--c1),var(--c2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-tag{font-size:9px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;margin-top:1px}
nav{padding:8px 6px;flex:1;overflow-y:auto}
nav::-webkit-scrollbar{width:0}
.nav-group{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;padding:10px 10px 5px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--muted);transition:all .18s;margin:1px 0;border:1px solid transparent;user-select:none}
.nav-item:hover{color:var(--text);background:var(--bg3)}
.nav-item.active{color:var(--c1);background:rgba(0,245,255,.06);border-color:rgba(0,245,255,.18)}
.nav-icon{width:18px;text-align:center;font-size:15px;flex-shrink:0}
.nav-badge{font-size:9px;background:var(--c3);color:#fff;padding:1px 5px;border-radius:10px;margin-left:auto;font-weight:700}
.sidebar-spacer{flex:1}
.sidebar-user{padding:10px 12px;border-top:1px solid var(--border);cursor:pointer;transition:background .15s;user-select:none}
.sidebar-user:hover{background:var(--bg3)}
.sidebar-user-inner{display:flex;align-items:center;gap:9px}
.av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;border:1.5px solid}
.av-c{background:rgba(0,245,255,.12);color:var(--c1);border-color:rgba(0,245,255,.3)}
.av-p{background:rgba(185,79,255,.12);color:var(--c2);border-color:rgba(185,79,255,.3)}
.av-g{background:rgba(0,230,118,.12);color:var(--c4);border-color:rgba(0,230,118,.3)}
.av-r{background:rgba(255,64,129,.12);color:var(--c3);border-color:rgba(255,64,129,.3)}
.su-name{font-size:12px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.su-pts{font-size:10px;color:var(--muted)}
.online-section{padding:8px 12px 10px;border-top:1px solid var(--border)}
.online-hdr{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:7px;font-weight:700}
.friend{display:flex;align-items:center;gap:8px;padding:4px 2px;border-radius:6px;cursor:pointer;transition:background .15s}
.friend:hover{background:var(--bg3)}
.friend-name{font-size:12px;color:var(--text);flex:1}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot-on{background:var(--c4);box-shadow:0 0 6px var(--c4)}
.dot-away{background:#f59e0b;box-shadow:0 0 6px #f59e0b}

/* ── MAIN ────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{padding:10px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg2);flex-shrink:0;height:46px}
.page-title{font-size:14px;font-weight:800;color:var(--text);letter-spacing:.3px}
.topbar-right{display:flex;align-items:center;gap:10px}
.pts-chip{font-size:11px;font-weight:700;color:var(--c1);background:rgba(0,245,255,.08);border:1px solid rgba(0,245,255,.2);padding:3px 10px;border-radius:20px}
.icon-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--muted);transition:all .15s}
.icon-btn:hover{border-color:var(--c1);color:var(--c1)}

/* ── CONTENT ─────────────────────────────────── */
.page{display:none;flex:1;overflow-y:auto;padding:20px}
.page::-webkit-scrollbar{width:4px}
.page::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.page.active{display:flex;flex-direction:column}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.page.active{animation:fadeUp .2s ease}

/* ── SECTION TITLE ───────────────────────────── */
.stitle{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:14px}

/* ── GAME CARDS (home) ───────────────────────── */
.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gcard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 16px 16px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;user-select:none}
.gcard:hover{transform:translateY(-3px);border-color:var(--gc,var(--c1));box-shadow:0 8px 24px rgba(0,0,0,.3)}
.gcard:hover .gcard-icon{filter:drop-shadow(0 0 10px var(--gc,var(--c1)))}
.gcard:active{transform:translateY(-1px)}
.gcard-icon{font-size:34px;display:block;margin-bottom:10px;transition:filter .22s}
.gcard-name{font-size:14px;font-weight:800;color:var(--text);margin-bottom:2px}
.gcard-sub{font-size:11px;color:var(--muted)}
.gcard-badge{position:absolute;top:10px;right:10px;font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.5px}
.badge-new{background:rgba(0,230,118,.12);color:var(--c4);border:1px solid rgba(0,230,118,.25)}
.badge-hot{background:rgba(255,64,129,.12);color:var(--c3);border:1px solid rgba(255,64,129,.25)}

/* ── PRE-MENU ────────────────────────────────── */
#page-premenu{align-items:center;justify-content:center}
.premenu-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px 24px;width:100%;max-width:400px}
.premenu-icon{font-size:48px;display:block;margin-bottom:12px;text-align:center;filter:drop-shadow(0 0 10px var(--c1))}
.premenu-title{font-size:22px;font-weight:900;text-align:center;color:var(--text);margin-bottom:6px}
.premenu-desc{font-size:12px;color:var(--muted);text-align:center;line-height:1.7;margin-bottom:20px}
.pmenu-section{background:var(--bg3);border-radius:10px;padding:12px 14px;margin-bottom:14px}
.pmenu-label{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.opts-row{display:flex;gap:7px;flex-wrap:wrap}
.opt-btn{padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;font-size:12px;font-family:inherit;font-weight:600;transition:all .15s}
.opt-btn:hover{border-color:var(--c1);color:var(--c1)}
.opt-btn.sel{border-color:var(--c1);color:var(--c1);background:rgba(0,245,255,.08)}
.start-btn{width:100%;padding:13px;background:var(--c1);color:#000;border:none;border-radius:10px;font-size:14px;font-weight:900;cursor:pointer;font-family:inherit;letter-spacing:.5px;transition:all .2s;margin-top:4px}
.start-btn:hover{box-shadow:0 0 20px rgba(0,245,255,.4);transform:translateY(-1px)}
.back-small{font-size:11px;color:var(--muted);cursor:pointer;text-align:center;margin-top:10px;display:block;transition:color .15s}
.back-small:hover{color:var(--c1)}

/* ── GAME PAGE ───────────────────────────────── */
#page-game{padding:0;overflow:hidden}
.game-shell{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--bg)}
.game-topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0}
.game-topbar-left{display:flex;align-items:center;gap:10px}
.game-back{font-size:11px;color:var(--muted);cursor:pointer;padding:4px 10px;border-radius:6px;border:1px solid var(--border);transition:all .15s;white-space:nowrap}
.game-back:hover{color:var(--c1);border-color:var(--c1)}
.game-title-bar{font-size:13px;font-weight:800;color:var(--text)}
.score-chips{display:flex;gap:6px;align-items:center}
.score-chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.score-chip-you{color:var(--c1);background:rgba(0,245,255,.1);border:1px solid rgba(0,245,255,.2)}
.score-chip-ai{color:var(--c2);background:rgba(185,79,255,.1);border:1px solid rgba(185,79,255,.2)}
.game-ctrl-btns{display:flex;gap:5px}
.ctrl-btn{padding:4px 10px;font-size:11px;font-family:inherit;border-radius:7px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-weight:600;transition:all .15s}
.ctrl-btn:hover{border-color:var(--c1);color:var(--c1)}
/* Canvas area – takes ALL remaining space */
.game-canvas-area{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg);overflow:hidden;position:relative;min-height:0}
.game-canvas-area canvas{display:block;max-width:100%;max-height:100%;object-fit:contain}
/* Pause overlay */
.pause-overlay{position:absolute;inset:0;background:rgba(0,0,0,.75);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:10}
.pause-overlay.show{display:flex}
.pause-title{font-size:28px;font-weight:900;color:var(--c1);letter-spacing:4px}
.pause-action{padding:10px 28px;border-radius:9px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .18s}
.pa-primary{background:var(--c1);color:#000;border:none}
.pa-secondary{background:transparent;border:1px solid var(--border);color:var(--muted)}
.pa-secondary:hover{border-color:var(--c1);color:var(--c1)}
/* Status bar */
.game-statusbar{padding:5px 14px;font-size:10px;color:var(--muted);background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0;text-align:center;letter-spacing:.3px}
/* Kniffel extra UI */
#kniffel-ui{width:100%;height:100%;overflow-y:auto;padding:12px}
#kniffel-ui::-webkit-scrollbar{width:4px}
#kniffel-ui::-webkit-scrollbar-thumb{background:var(--border)}

/* ── LOBBY ───────────────────────────────────── */
.lobby-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.create-lobby-btn{padding:7px 16px;background:var(--c1);color:#000;border:none;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;transition:all .15s}
.create-lobby-btn:hover{box-shadow:0 0 12px rgba(0,245,255,.4)}
.lobby-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:13px;cursor:pointer;transition:all .18s}
.lobby-card:hover{border-color:var(--c1);background:var(--card2)}
.lob-icon{width:40px;height:40px;border-radius:8px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.lob-info{flex:1}
.lob-name{font-size:13px;font-weight:700;color:var(--text)}
.lob-host{font-size:11px;color:var(--muted);margin-top:2px}
.lob-right{text-align:right;flex-shrink:0}
.lob-count{font-size:11px;color:var(--muted)}
.lob-status{font-size:9px;padding:2px 8px;border-radius:20px;margin-top:3px;display:inline-block;font-weight:700;letter-spacing:.5px}
.st-w{background:rgba(0,230,118,.1);color:var(--c4);border:1px solid rgba(0,230,118,.2)}
.st-f{background:rgba(96,96,160,.12);color:var(--muted);border:1px solid var(--border)}
.create-panel{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:10px;display:none}
.create-panel.show{display:block}

/* ── CHAT ────────────────────────────────────── */
.chat-layout{display:flex;gap:12px;height:100%;min-height:0}
.chat-rooms-col{width:130px;flex-shrink:0;display:flex;flex-direction:column;gap:2px}
.room-group{font-size:9px;color:var(--muted);letter-spacing:2px;text-transform:uppercase;padding:7px 4px 4px;font-weight:700}
.room-item{padding:7px 10px;border-radius:7px;font-size:12px;color:var(--muted);cursor:pointer;border:1px solid transparent;transition:all .15s;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden}
.room-item:hover{background:var(--bg3);color:var(--text)}
.room-item.active{background:var(--card2);color:var(--c1);border-color:rgba(0,245,255,.18)}
.chat-window{flex:1;background:var(--card);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.chat-win-hdr{padding:10px 14px;border-bottom:1px solid var(--border);font-size:13px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;flex-shrink:0}
.online-ind{font-size:10px;color:var(--c4);font-weight:400}
.msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px}
.msgs::-webkit-scrollbar{width:3px}
.msgs::-webkit-scrollbar-thumb{background:var(--border)}
.msg{display:flex;gap:8px}
.msg-body{flex:1}
.msg-meta{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
.msg-name{font-size:11px;font-weight:700;color:var(--text)}
.msg-time{font-size:10px;color:var(--muted)}
.msg-text{font-size:12px;color:var(--text);line-height:1.55;background:var(--bg3);padding:7px 10px;border-radius:3px 9px 9px 9px;display:inline-block;max-width:300px}
.msg.own{flex-direction:row-reverse}
.msg.own .msg-body{align-items:flex-end;display:flex;flex-direction:column}
.msg.own .msg-text{background:rgba(0,245,255,.1);border:1px solid rgba(0,245,255,.18);color:var(--c1);border-radius:9px 3px 9px 9px}
.msg.own .msg-meta{flex-direction:row-reverse}
.chat-input{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:7px;flex-shrink:0}
.chat-input input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-size:12px;font-family:inherit;outline:none;transition:border .15s}
.chat-input input:focus{border-color:rgba(0,245,255,.4)}
.chat-send{padding:7px 14px;background:var(--c1);color:#000;border:none;border-radius:8px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit}

/* ── STATS ───────────────────────────────────── */
.stats-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 13px}
.kpi-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;font-weight:700}
.kpi-val{font-size:22px;font-weight:900;color:var(--text)}
.kpi-sub{font-size:10px;color:var(--c4);margin-top:2px}
.leaderboard{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.lb-hdr{padding:11px 14px;border-bottom:1px solid var(--border);font-size:12px;font-weight:800;color:var(--text)}
.lb-row{display:flex;align-items:center;gap:11px;padding:9px 14px;border-bottom:1px solid var(--border);transition:background .15s}
.lb-row:last-child{border:none}
.lb-row:hover{background:var(--bg3)}
.lb-row.me{background:rgba(0,245,255,.04)}
.lb-rank{width:20px;text-align:center;font-size:12px;font-weight:900;flex-shrink:0}
.lb-name{flex:1;font-size:12px;color:var(--text)}
.lb-game{font-size:10px;color:var(--muted);margin-left:5px}
.lb-pts{font-size:12px;font-weight:700;color:var(--c1)}

/* ── SETTINGS ────────────────────────────────── */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.set-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:15px}
.set-title{font-size:10px;font-weight:800;color:var(--text);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.set-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.set-row:last-child{margin:0}
.set-label{font-size:12px;color:var(--muted)}
.toggle{width:36px;height:19px;background:var(--border);border-radius:10px;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.toggle.on{background:var(--c1)}
.toggle::after{content:'';position:absolute;width:13px;height:13px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left .2s}
.toggle.on::after{left:20px}
.theme-grid{display:flex;flex-direction:column;gap:6px}
.theme-btn{padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--muted);cursor:pointer;font-size:12px;font-family:inherit;font-weight:600;transition:all .15s;text-align:left}
.theme-btn:hover{border-color:var(--c1);color:var(--c1)}
.theme-btn.active{border-color:var(--c1);color:var(--c1);background:rgba(0,245,255,.07)}
.lang-btns{display:flex;gap:6px}
.lang-btn{flex:1;padding:7px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--muted);cursor:pointer;font-size:12px;font-family:inherit;font-weight:700;text-align:center;transition:all .15s}
.lang-btn.active{border-color:var(--c1);color:var(--c1);background:rgba(0,245,255,.07)}

/* ── ACCOUNT ─────────────────────────────────── */
.account-wrap{max-width:380px}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px}
.auth-title{font-size:17px;font-weight:900;text-align:center;color:var(--text);margin-bottom:4px}
.auth-sub{font-size:11px;color:var(--muted);text-align:center;margin-bottom:18px}
.auth-tabs{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:16px}
.auth-tab{flex:1;padding:8px;font-size:12px;font-weight:700;border:none;cursor:pointer;font-family:inherit;background:transparent;color:var(--muted);transition:all .15s}
.auth-tab.active{background:var(--c1);color:#000}
.field{margin-bottom:11px}
.field-label{font-size:9px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:5px;font-weight:700}
.field input{width:100%;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 11px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:border .15s}
.field input:focus{border-color:rgba(0,245,255,.4)}
.auth-submit{width:100%;padding:11px;background:var(--c1);color:#000;border:none;border-radius:9px;font-size:13px;font-weight:900;cursor:pointer;font-family:inherit;transition:all .2s;margin-top:4px}
.auth-submit:hover{box-shadow:0 0 16px rgba(0,245,255,.4)}
.auth-msg{padding:8px 12px;border-radius:7px;font-size:11px;font-weight:700;text-align:center;margin-bottom:12px;display:none}
.auth-msg.ok{background:rgba(0,230,118,.1);color:var(--c4);border:1px solid rgba(0,230,118,.2)}
.auth-msg.err{background:rgba(255,64,129,.1);color:var(--c3);border:1px solid rgba(255,64,129,.2)}
.profile-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:14px;display:flex;align-items:center;gap:14px}
.profile-av{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;flex-shrink:0;background:rgba(0,245,255,.12);color:var(--c1);border:2px solid rgba(0,245,255,.3)}
.profile-name{font-size:18px;font-weight:900;color:var(--text)}
.profile-pts{font-size:12px;color:var(--c1);margin-top:3px}
.logout-btn{margin-left:auto;padding:6px 13px;background:transparent;border:1px solid var(--border);border-radius:7px;color:var(--muted);font-size:11px;cursor:pointer;font-family:inherit;font-weight:600;transition:all .15s;flex-shrink:0}
.logout-btn:hover{border-color:var(--c3);color:var(--c3)}
.scores-card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.scores-hdr{padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;font-weight:800;color:var(--text)}
.score-row{display:flex;justify-content:space-between;padding:8px 14px;border-bottom:1px solid var(--border)}
.score-row:last-child{border:none}
.score-game{font-size:12px;color:var(--text)}
.score-pts{font-size:12px;font-weight:700;color:var(--c1)}

/* ── IMPRESSUM ───────────────────────────────── */
.imprint-wrap{max-width:500px}
.imprint-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:11px}
.imprint-card h3{font-size:10px;font-weight:800;color:var(--c1);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:9px}
.imprint-card p{font-size:12px;color:var(--muted);line-height:1.7}
.imprint-card a{color:var(--c1);text-decoration:none}

/* ── INGAME CHAT ─────────────────────────────── */
.igchat{position:fixed;bottom:16px;right:16px;width:260px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.5);z-index:200;display:none;flex-direction:column;overflow:hidden}
.igchat.show{display:flex}
.igchat-hdr{padding:9px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--bg3);cursor:pointer;flex-shrink:0;user-select:none;}
.igchat-title{font-size:11px;font-weight:700;color:var(--c1)}
.igchat-x{font-size:20px;color:var(--text);cursor:pointer;line-height:1;padding:2px 6px;background:rgba(255,255,255,.1);border-radius:4px;font-weight:700;}
.igchat-msgs{height:150px;overflow-y:auto;padding:9px;display:flex;flex-direction:column;gap:6px}
.igchat-msgs::-webkit-scrollbar{width:3px}
.igchat-msgs::-webkit-scrollbar-thumb{background:var(--border)}
.igm{font-size:11px;color:var(--text);line-height:1.4}
.igm b{font-weight:700;margin-right:3px}
.igm.you b{color:var(--c1)}
.igm.them b{color:var(--c4)}
.igchat-inp{display:flex;gap:6px;padding:7px}
.igchat-inp input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:11px;padding:5px 8px;font-family:inherit;outline:none}
.igchat-inp button{padding:5px 9px;background:var(--c1);color:#000;border:none;border-radius:6px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit}

/* ── MODAL ───────────────────────────────────── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:300}
.modal-bg.show{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px;min-width:280px;max-width:340px;animation:fadeUp .2s ease}
.modal h3{font-size:15px;font-weight:800;color:var(--text);margin-bottom:12px}
.modal-btns{display:flex;gap:8px;margin-top:16px}
.modal-btn{flex:1;padding:9px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.mbt-sec{background:transparent;border:1px solid var(--border);color:var(--muted)}
.mbt-pri{background:var(--c1);color:#000;border:none}

/* ── GAME LOBBY / MODE SELECT ─────────────────── */
#page-lobby-select{align-items:center;justify-content:center;background:var(--bg)}
.ls-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;width:100%;max-width:520px;overflow-y:auto;max-height:90vh}
.ls-icon{font-size:44px;display:block;text-align:center;margin-bottom:8px}
.ls-title{font-size:20px;font-weight:900;color:var(--text);text-align:center;margin-bottom:4px}
.ls-desc{font-size:12px;color:var(--muted);text-align:center;margin-bottom:20px;line-height:1.6}
.ls-section{margin-bottom:18px}
.ls-label{font-size:9px;font-weight:800;color:var(--muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;display:block}
.ls-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ls-mode{background:var(--bg3);border:1.5px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;transition:all .18s;text-align:center;user-select:none;position:relative}
.ls-mode:hover{border-color:var(--c1);background:rgba(0,245,255,.05)}
.ls-mode.active{border-color:var(--c1);background:rgba(0,245,255,.08);box-shadow:0 0 0 1px rgba(0,245,255,.3)}
.ls-mode.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}
.ls-mode-icon{font-size:22px;display:block;margin-bottom:4px}
.ls-mode-name{font-size:12px;font-weight:700;color:var(--text)}
.ls-mode-sub{font-size:10px;color:var(--muted);margin-top:2px}
.ls-mode-badge{position:absolute;top:6px;right:6px;font-size:8px;font-weight:700;padding:2px 5px;border-radius:8px;background:rgba(96,96,160,.3);color:var(--muted);letter-spacing:.5px}
.ls-badge-soon{background:rgba(255,193,7,.15);color:#ffc107}
.ls-players{display:flex;flex-direction:column;gap:6px}
.ls-player-row{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.ls-player-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0;color:#fff}
.ls-player-input{flex:1;background:transparent;border:none;color:var(--text);font-size:13px;font-family:inherit;outline:none}
.ls-player-type{font-size:10px;padding:3px 8px;border-radius:5px;background:rgba(0,245,255,.1);color:var(--c1);font-weight:600;white-space:nowrap;flex-shrink:0}
.ls-player-remove{width:20px;height:20px;border-radius:4px;background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color .15s}
.ls-player-remove:hover{color:var(--c3)}
.ls-add-btns{display:flex;gap:6px;margin-top:6px}
.ls-add-btn{flex:1;padding:7px;border-radius:7px;border:1px dashed var(--border);background:transparent;color:var(--muted);font-size:11px;font-family:inherit;cursor:pointer;transition:all .15s;font-weight:600}
.ls-add-btn:hover{border-color:var(--c1);color:var(--c1)}
.ls-diff-btns{display:flex;gap:6px}
.ls-diff-btn{flex:1;padding:7px;border-radius:7px;border:1.5px solid var(--border);background:var(--bg3);color:var(--muted);font-size:12px;font-family:inherit;cursor:pointer;font-weight:600;transition:all .15s}
.ls-diff-btn.active{border-color:var(--c1);color:var(--c1);background:rgba(0,245,255,.07)}
.ls-start-btn{width:100%;padding:13px;background:var(--c1);color:#000;border:none;border-radius:10px;font-size:14px;font-weight:900;cursor:pointer;font-family:inherit;letter-spacing:.5px;transition:all .2s;margin-top:4px;display:block}
.ls-start-btn:hover{box-shadow:0 0 20px rgba(0,245,255,.4);transform:translateY(-1px)}
.ls-back{font-size:11px;color:var(--muted);cursor:pointer;text-align:center;margin-top:10px;display:block;transition:color .15s}
.ls-back:hover{color:var(--c1)}
/* Settings overlay */
#settings-overlay{position:absolute;inset:0;align-items:center;justify-content:center;z-index:20;background:rgba(0,0,0,.75);backdrop-filter:blur(4px)}

#auth-gate{
position:fixed;inset:0;z-index:9999;
background:var(--bg,#07071a);
display:flex;align-items:center;justify-content:center;
overflow-y:auto;
}
#auth-gate.hidden{display:none;}
.auth-gate-box{
width:100%;max-width:420px;
background:var(--card,#10102a);
border:1px solid var(--border,rgba(255,255,255,.08));
border-radius:18px;padding:32px 24px;
margin:20px;
box-shadow:0 8px 40px rgba(0,0,0,.5);
}
.auth-gate-logo{text-align:center;margin-bottom:24px;}
.auth-gate-logo .logo-icon{font-size:40px;}
.auth-gate-logo .logo-title{font-size:26px;font-weight:800;color:var(--text,#e0e0ff);margin-top:6px;}
.auth-gate-logo .logo-sub{font-size:13px;color:var(--muted,#4a4a7a);margin-top:4px;}
.auth-gate-tabs{display:flex;gap:8px;margin-bottom:20px;}
.auth-gate-tab{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--border,rgba(255,255,255,.08));
background:transparent;color:var(--muted,#4a4a7a);cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
transition:all .2s;}
.auth-gate-tab.active{border-color:var(--c1,#00f5ff);background:rgba(0,245,255,.1);color:var(--c1,#00f5ff);}
.auth-gate-field{margin-bottom:14px;}
.auth-gate-label{font-size:10px;color:var(--muted,#4a4a7a);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.auth-gate-input{width:100%;box-sizing:border-box;padding:10px 12px;background:rgba(255,255,255,.04);
border:1px solid var(--border,rgba(255,255,255,.08));border-radius:8px;color:var(--text,#e0e0ff);
font-family:inherit;font-size:14px;outline:none;transition:border .2s;}
.auth-gate-input:focus{border-color:var(--c1,#00f5ff);}
.auth-gate-btn{width:100%;padding:13px;background:var(--c1,#00f5ff);color:#000;border:none;border-radius:10px;
font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:4px;transition:opacity .2s;}
.auth-gate-btn:disabled{opacity:.5;cursor:not-allowed;}
.auth-gate-msg{padding:8px 12px;border-radius:8px;font-size:12px;margin-bottom:12px;display:none;}
.auth-gate-msg.ok{background:rgba(0,230,118,.15);border:1px solid rgba(0,230,118,.3);color:#4ade80;}
.auth-gate-msg.err{background:rgba(255,80,80,.15);border:1px solid rgba(255,80,80,.3);color:#f87171;}
.auth-gate-footer{text-align:center;font-size:10px;color:#3a3a5a;margin-top:14px;}

/* Chat Panel Overlay */
#chat-panel-overlay{
  position:fixed;top:0;right:-520px;bottom:0;width:min(480px,90vw);
  background:var(--bg2,#0d0d24);border-left:2px solid var(--c1,#00f5ff);
  z-index:9999;display:flex;flex-direction:column;
  box-shadow:-8px 0 32px rgba(0,0,0,.6);
  transition:right .25s ease;
}
#chat-panel-overlay.open{right:0;}
#chat-panel-overlay .cpo-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--border);
  flex-shrink:0;background:var(--bg3,#0a0a1a);
}
#chat-panel-overlay .cpo-hdr span{font-weight:700;font-size:15px;color:var(--text);}
#chat-panel-overlay .cpo-close{
  background:rgba(255,255,255,.15);border:none;color:var(--text);
  font-size:20px;font-weight:900;cursor:pointer;border-radius:8px;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-family:inherit;
}
#chat-panel-overlay .cpo-body{flex:1;overflow:hidden;display:flex;flex-direction:column;}