:root{
  --bg:#ffffff;--text:#1a1c20;--muted:#5c667a;--card:#f6f7f9;--line:#e6e8ef;
  --badge-bg:#eef2f7;--badge-text:#39455e;--primary:#2f6fed;--danger:#e25555;
  --cell:#f3f5f8;--cell-border:#dfe3ea;--cell-open:#e8eef7;--cell-mine:#ffe3e3
}
*{box-sizing:border-box} html,body{height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,sans-serif;margin:0;background:var(--bg);color:var(--text)}
.hidden{display:none}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#fff;border-bottom:1px solid var(--line)}
.topbar.three{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.topbar.three .left{justify-self:start}
.topbar.three .center{justify-self:center}
.topbar.three .right{justify-self:end}
.topbar input,.host-panel input,.host-panel select{background:#fff;border:1px solid var(--line);color:var(--text);padding:8px 10px;border-radius:8px}
.topbar button,.host-panel button{background:var(--primary);border:0;color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600}
.danger{background:var(--danger)!important;color:#fff}
button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}

/* Badges */
.view.hidden{display:none}
.badge{background:var(--badge-bg);color:var(--badge-text);padding:4px 8px;border-radius:999px;font-size:12px;margin-left:8px;border:1px solid var(--line)}

/* Lobby */
.lobby-main{padding:16px}
.room-list{list-style:none;padding:0;margin:12px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.room-item{background:#fff;border:1px solid var(--line);padding:12px;border-radius:12px;cursor:pointer}
.room-item .meta{font-size:12px;color:var(--muted);margin-top:6px;display:flex;gap:8px}

/* Layout */
.room-body.cols-3{display:grid;grid-template-columns:240px 1fr 240px;gap:0;min-height:calc(100vh - 64px)}
.sidebar{border-right:1px solid var(--line);padding:12px;background:#fff}
.sidebar.right{border-left:1px solid var(--line);border-right:none}

/* Players */
.players-header{display:flex;justify-content:flex-start;align-items:center;margin-bottom:8px}
.players-header .wide{background: var(--primary); color: #fff; width:100%; font-size:16px; padding:12px 14px; border: 0; border-radius:12px;}
.players{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.player{background:var(--card);border:1px solid var(--line);padding:8px;border-radius:10px;display:grid; grid-template-rows:auto auto; gap:6px;}
.player.turn{outline:2px solid var(--primary)}
.player .row1{display:flex;align-items:center;gap:8px;min-width:0}
.player .row1 .dot{width:12px;height:12px;border-radius:999px;border:1px solid rgba(0,0,0,0.08);flex:0 0 auto}
.player .row1 .name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player .row2{display:flex;align-items:center;justify-content:space-between;gap:8px}
.player .stun{background:#f0eaff;color:#5b3fb3;padding:2px 6px;border-radius:999px;font-size:11px;border:1px solid var(--line)}
.player .mine{background:#fff3d1;color:#7a5a00;padding:2px 6px;border-radius:999px;font-size:11px;border:1px solid var(--line)}

/* Board */
.board-wrap{padding:16px; display:flex; align-items:center; justify-content:center; position:relative;}
#board{display:grid;grid-template-columns:repeat(9,32px);gap:4px; position:relative;}
.cell{width:32px;height:32px;background:var(--cell);border:1px solid var(--cell-border);display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;font-weight:600; transition: box-shadow .15s ease, outline .15s ease, background-color .15s ease}
.cell.open{background:var(--cell-open)}
.cell.mine{background:var(--cell-mine)}
.cell.last-selected{outline:2px solid var(--primary); box-shadow:0 0 0 3px rgba(47,111,237,0.15)}

/* Host panel */
.host-panel{margin-top:8px;background:#fff;border:1px solid var(--line);padding:12px;border-radius:10px}
.field{margin-bottom:10px;display:block}
.field.grid2{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.field.grid2 label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.host-panel input[type="number"]{width:56px;justify-self:end;text-align:right;padding:6px 8px}
.host-panel select{min-width:140px}

/* Mode visibility via attribute */
#rightPanel[data-mode="TURN"] #rtOptions{display:none}
#rightPanel[data-mode="REALTIME"] #turnOptions{display:none}

/* Turn overlay */
.turn-overlay{
  position:absolute; inset:-8px; pointer-events:none;
  border-radius:14px;
  background: transparent;
  border: 3px solid rgba(150, 230, 170, 0.85);
  box-shadow: 0 0 22px 6px rgba(150,230,170,.35), inset 0 0 22px 6px rgba(150,230,170,.25);
  transition: opacity .15s ease; opacity:0;
}
.turn-overlay.on{ opacity:1; }

/* Gameover banner */
.gameover-banner{
  position:absolute;
  top:-8px; left:50%; transform:translateX(-50%);
  background:#ffffffcc; border:1px solid var(--line);
  padding:8px 12px; border-radius:10px; font-weight:600;
  box-shadow:0 6px 16px rgba(0,0,0,0.08); z-index:5;
}
.gameover-banner .winners{ display:inline-flex; gap:6px; align-items:center; }
.gameover-banner .reason{ color:var(--muted); font-weight:500; margin-left:8px; }