:root{
  --bg:#4b4b4b; --panel:#1c1f24; --panel2:#2a2e35; --text:#e8e8e8; --muted:#9aa0a8;
  --red-team:#e56e56; --blue-team:#5689e5; --accent:#f2c94c;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--text);
  font-family:"Segoe UI", system-ui, sans-serif;
  overflow:hidden;
}
#wrap{position:relative; width:100vw; height:100vh;}
canvas{display:block; width:100%; height:100%;}

#scoreboard{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  background:rgba(15,17,20,.92); border-radius:6px;
  display:flex; align-items:center; gap:14px;
  padding:6px 18px; font-size:22px; font-weight:800;
  user-select:none;
}
.sq{width:18px; height:18px; border-radius:4px; display:inline-block;}
.sq.red{background:var(--red-team);} .sq.blue{background:var(--blue-team);}
#timer{font-variant-numeric:tabular-nums; margin-left:14px; font-weight:700;}
.cards{display:flex; gap:3px; min-width:26px;}
.card{width:10px; height:14px; border-radius:2px;}
.card.y{background:#f2c94c;} .card.r{background:#d0342c;}

#topbtns{position:absolute; top:8px; right:10px; display:flex; gap:6px;}
#topbtns button{
  background:rgba(15,17,20,.92); color:var(--text); border:none;
  padding:7px 14px; border-radius:6px; font-size:14px; font-weight:700; cursor:pointer;
}
#topbtns button:hover{background:#2f353d;}

#fps{
  position:absolute; left:6px; bottom:6px; font-size:13px; color:#cfcfcf;
  background:rgba(15,17,20,.6); padding:2px 8px; border-radius:4px;
}

#msg{
  position:absolute; top:56px; left:50%; transform:translateX(-50%);
  font-size:18px; font-weight:800; color:var(--accent);
  text-shadow:0 2px 6px rgba(0,0,0,.6); pointer-events:none; text-align:center;
}

#chatlog{
  position:absolute; left:50%; transform:translateX(-50%); bottom:52px;
  width:min(680px, 90vw); max-height:170px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  font-size:14px; pointer-events:none;
}
#chatlog .line{
  background:rgba(15,17,20,.75); padding:3px 10px; border-radius:4px;
  margin-top:3px; color:#e8e8e8;
}
#chatlog .line.sys{color:#8fd48f;}
#chatlog .line b.red{color:var(--red-team);} #chatlog .line b.blue{color:var(--blue-team);}
#chatbox{
  position:absolute; left:50%; transform:translateX(-50%); bottom:14px;
  width:min(680px, 90vw); display:none;
}
#chatbox input{
  width:100%; padding:8px 12px; border-radius:6px; border:1px solid #3a4048;
  background:rgba(15,17,20,.95); color:var(--text); font-size:15px; outline:none;
}

#menu{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55);
}
#menu .box{
  background:var(--panel); border-radius:10px; padding:22px 26px; width:360px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
#menu h2{
  font-size:18px; margin-bottom:14px; border-bottom:2px solid #b33;
  padding-bottom:8px;
}
#menu .row{display:flex; align-items:center; justify-content:space-between; margin:10px 0; font-size:14px;}
#menu .row.note{color:var(--muted); font-size:12px;}
#menu input[type=number]{
  width:70px; background:var(--panel2); border:1px solid #3a4048; color:var(--text);
  padding:5px 8px; border-radius:5px; font-size:14px;
}
#menu .btns{display:flex; gap:8px; margin-top:16px;}
#menu button{
  flex:1; padding:8px 0; border:none; border-radius:6px; font-weight:800;
  font-size:14px; cursor:pointer; color:#fff;
}
#btnResume{background:#2e7d32;} #btnRestart2{background:#b33a2e;} #btnPause{background:#2a5fa8;}
#btnExitLocal{background:#3a4048;}

/* ---- Settings ---- */
#settings{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.5); z-index:25;
}
#settings .box{
  background:var(--panel); border-radius:10px; padding:18px 22px; width:400px;
  box-shadow:0 12px 40px rgba(0,0,0,.5); max-height:80vh; overflow-y:auto;
}
.sethead{display:flex; justify-content:space-between; align-items:center;
  border-bottom:2px solid #b33; padding-bottom:8px; margin-bottom:12px;}
.sethead h2{font-size:18px;}
.sethead button{
  background:#2a5fa8; border:none; border-radius:6px; color:#fff;
  padding:6px 14px; font-weight:700; cursor:pointer;
}
.settabs{display:flex; gap:6px; margin-bottom:14px;}
.settab{
  flex:1; background:var(--panel2); border:none; border-radius:6px; color:var(--text);
  padding:7px 0; font-weight:700; font-size:13px; cursor:pointer;
}
.settab.active{background:#2a5fa8; color:#fff;}
.setpage .chk{display:flex; align-items:center; gap:8px; margin:10px 2px; font-size:14px; cursor:pointer;}
.setpage .row{display:flex; align-items:center; justify-content:space-between; margin:10px 2px; font-size:14px;}
.setpage .row.note{color:var(--muted); font-size:12px;}
.setpage select, .setpage input[type=number]{
  background:var(--panel2); border:1px solid #3a4048; color:var(--text);
  padding:5px 8px; border-radius:5px; font-size:13px; width:150px;
}
.setpage input[type=number]{width:80px;}
.bindrow{display:flex; align-items:center; gap:6px; margin:8px 0; font-size:14px; flex-wrap:wrap;}
.bindrow .bname{width:60px; font-weight:700;}
.bindrow .key{
  background:#3a4048; border-radius:4px; padding:2px 8px; font-size:12px; cursor:pointer;
}
.bindrow .key:hover{background:#5a2e2e;}
.bindrow .addkey{
  background:#2a5fa8; border:none; border-radius:4px; color:#fff;
  font-size:13px; padding:2px 9px; cursor:pointer;
}
.bindrow .addkey.waiting{background:#b33a2e;}

/* ---- Home ---- */
#home{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); z-index:20;
}
#home .box{
  background:var(--panel); border-radius:10px; padding:22px 26px; width:380px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
#home h2{font-size:20px; margin-bottom:14px; border-bottom:2px solid #b33; padding-bottom:8px;}
#home .row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0; font-size:14px;}
#home .row.note{color:#e08a8a; font-size:12px; min-height:14px;}
#home input[type=text]{
  flex:1; background:var(--panel2); border:1px solid #3a4048; color:var(--text);
  padding:7px 10px; border-radius:5px; font-size:14px; outline:none;
}
#home .btns{display:flex; gap:8px; margin-top:14px;}
#home .btns.col{flex-direction:column;}
#home button{
  padding:9px 12px; border:none; border-radius:6px; font-weight:800;
  font-size:14px; cursor:pointer; color:#fff; background:#2a5fa8;
}
#home #btnLocal{background:#3a4048;}
#home #btnHost{background:#2e7d32;}
#home .joinrow input{text-transform:uppercase; width:110px; flex:0 0 110px;}
#home .joinrow button{flex:1; background:#2a5fa8;}

/* ---- Lobby ---- */
#lobby{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); z-index:15;
}
.lobbybox{
  background:var(--panel); border-radius:10px; padding:18px 22px;
  width:min(720px, 94vw); box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.lobbyhead{display:flex; align-items:center; justify-content:space-between;
  border-bottom:2px solid #b33; padding-bottom:8px; margin-bottom:12px;}
.lobbyhead h2{font-size:18px;}
.lobbyactions{display:flex; gap:6px;}
.lobbyactions button{
  background:var(--panel2); color:var(--text); border:none; padding:6px 12px;
  border-radius:6px; font-size:13px; font-weight:700; cursor:pointer;
}
.teamsrow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:6px;}
.teamhead{
  padding:7px 0; border:none; border-radius:6px; font-weight:800; font-size:14px;
  cursor:pointer; color:#fff; background:var(--panel2);
}
.teamhead.red{background:#8a3b2d;} .teamhead.blue{background:#2d4f8a;}
.cols{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
.col-list{
  background:#14161a; border-radius:6px; min-height:170px; padding:6px;
  display:flex; flex-direction:column; gap:4px; font-size:14px;
}
.col-list .pl{
  display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:4px;
  background:var(--panel2); cursor:default; position:relative;
}
.col-list .pl.me{outline:1px solid var(--accent);}
.col-list .pl .adm{color:var(--accent); font-size:12px;}
.col-list .pl .av{min-width:20px; text-align:center;}
.col-list .pl .plmenu{
  position:absolute; right:4px; top:2px; display:flex; gap:4px;
}
.col-list .pl .plmenu button{
  background:#3a4048; border:none; border-radius:4px; color:#fff;
  font-size:11px; padding:2px 6px; cursor:pointer;
}
.lobbyset{display:flex; gap:24px; margin:12px 2px; font-size:14px;}
.lobbyset .row{display:flex; align-items:center; gap:8px;}
.lobbyset input{
  width:64px; background:var(--panel2); border:1px solid #3a4048; color:var(--text);
  padding:4px 8px; border-radius:5px; font-size:14px;
}
#lobbyAdmin{display:flex; gap:8px; margin-top:6px;}
#lobbyAdmin button{
  flex:1; padding:8px 0; border:none; border-radius:6px; font-weight:800;
  font-size:14px; cursor:pointer; color:#fff;
}
#btnStart{background:#2e7d32;} #btnPauseOn{background:#2a5fa8;} #btnStop{background:#b33a2e;}
#lobby .row.note{color:var(--muted); font-size:12px; margin-top:10px;}

#hint{
  position:absolute; bottom:14px; right:12px; font-size:12px; color:#c6c6c6;
  background:rgba(15,17,20,.6); padding:6px 10px; border-radius:6px; line-height:1.6;
  pointer-events:none; text-align:right;
}
kbd{background:#333a42; border-radius:3px; padding:0 5px; font-family:inherit;}