:root{
  --bg:#0f172a; --panel:#0b1220; --panel-soft:#0b1220f2; --border:#1f2937; --text:#e5e7eb; --muted:#94a3b8;
  --accent:#22d3ee; --accent2:#a78bfa; --good:#10b981; --bad:#dc2626;
}
*{box-sizing:border-box}
body{margin:0;background:
  radial-gradient(1200px 800px at 80% -10%, #1f2937, transparent 70%),
  radial-gradient(1000px 700px at -10% 110%, #1e293b, transparent 60%),
  var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial
}

:root.light{
  --bg:#f5f7fb; --panel:#ffffff; --panel-soft:#ffffff; --border:#d4d8e1; --text:#0b1020; --muted:#5c6b8a;
  --accent:#2563eb; --accent2:#06b6d4; --good:#059669; --bad:#dc2626;
}
:root.light body{ background:linear-gradient(180deg,#eff3ff,#f8fafc 60%); }
:root.light .topbar{ background:#f8fafc; border-bottom-color:#e2e8f0; }
:root.light .board{ background:#fff; border-color:#cbd5e1; }
:root.light .cell{ border-color:#e2e8f0; }
:root.light input.cell{ background:#fff; color:#0b1020; }
:root.light .cell.locked input{ background:#f1f5f9; }
:root.light .panel, :root.light .board-wrap{ background:#fff; border-color:#e2e8f0; }
:root.light .chat-log, :root.light .chat-form input{ background:#fff; border-color:#e2e8f0; color:#0b1020; }
:root.light .pill{ border-color:#cbd5e1; color:#64748b; }
:root.light .tools button, :root.light button.ghost{ background:#fff; border-color:#e2e8f0; color:#0b1020; }
:root.light .keypad button{ background:#fff; border-color:#e2e8f0; color:#0b1020; }
:root.light .modal{ background:#0004; }
:root.light .modal-card{ background:#fff; border-color:#e2e8f0; }
:root.light .overlay-card{ background:#fff; border-color:#e2e8f0; }
:root.light .chat-drawer{ background:#fff; }

.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:#0b1020;position:sticky;top:0;z-index:10}
.brand{font-weight:800;letter-spacing:.4px}
.room-info{display:flex;gap:14px;color:var(--muted)}

.layout{display:grid;grid-template-columns:1fr;gap:16px;max-width:1100px;margin:16px auto;padding:0 16px}
@media(min-width:980px){.layout{grid-template-columns: 620px 1fr}}

.board-wrap{background:linear-gradient(180deg,var(--panel),var(--panel-soft));border:1px solid var(--border);border-radius:16px;box-shadow:0 20px 60px #0006;padding:16px}
.board{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;background:var(--panel);border:2px solid #334155;border-radius:12px;overflow:hidden}
.cell{position:relative;border:1px solid #1f2937}
.cell[data-r="0"], .cell[data-r="3"], .cell[data-r="6"]{border-top:2px solid #475569}
.cell[data-c="0"], .cell[data-c="3"], .cell[data-c="6"]{border-left:2px solid #475569}
.cell[data-r="8"]{border-bottom:2px solid #475569}
.cell[data-c="8"]{border-right:2px solid #475569}

input.cell{
  width:100%;aspect-ratio:1/1;display:block;text-align:center;font-weight:800;font-size:clamp(18px,2.6vw,26px);
  color:var(--text);background:#0f172a;border:none;outline:none
}
input.cell.readonly{color:#94a3b8}
.cell.locked input{background:#0c1424}
.cell.mine input{outline:2px solid var(--accent)}

/* notes (pencil) */
.notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);font-size:9px;color:var(--muted);opacity:.95;pointer-events:none}
.notes span{display:flex;align-items:center;justify-content:center;line-height:1}

/* highlights */
.cell.rowhl input{ background:#0e2239 !important; }
.cell.colhl input{ background:#0e2239 !important; }
.cell.boxhl input{ background:#0d1a2d !important; }
.cell.rowhl.colhl input{ background:#0f2b49 !important; }
.cell.same input{ background:#112b49 !important; box-shadow: inset 0 0 0 2px #1d4ed8; }
.cell.alt input{ background:#0e1626; }
.cell.locked.alt input{ background:#0d1422; }

:root.light .cell.rowhl input,
:root.light .cell.colhl input{ background:#eef2ff !important; }
:root.light .cell.boxhl input{ background:#eaf1ff !important; }
:root.light .cell.rowhl.colhl input{ background:#e2e8f0 !important; }
:root.light .cell.same input{ background:#dbeafe !important; box-shadow: inset 0 0 0 2px #2563eb; }
:root.light .cell.alt input{ background:#f8fafc; }
:root.light .cell.locked.alt input{ background:#f1f5f9; }

.toolbar{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:12px;flex-wrap:wrap}
.tools{display:flex;gap:8px}
.tools button{background:#0f172a;border:1px solid #334155;color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer}
.tools button.active{outline:2px solid var(--accent2)}

.keypad{display:grid;grid-template-columns:repeat(9,1fr);gap:8px;flex:1}
.keypad button{aspect-ratio:1/1;background:#0f172a;border:1px solid #334155;color:var(--text);border-radius:10px;font-weight:700;cursor:pointer;font-size:1.12rem;padding:12px}
.keypad button:hover{border-color:#475569}
@media(max-width:520px){ .keypad button{ font-size:1.25rem; padding:13px } }
.legend{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px dashed #334155;border-radius:999px;padding:6px 10px;color:var(--muted)}

.sidebar{display:flex;flex-direction:column;gap:16px}
.panel{background:linear-gradient(180deg,var(--panel),var(--panel-soft));border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 20px 60px #0006}
.panel.small{display:flex;gap:8px}

.players{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.players li{display:flex;justify-content:space-between;align-items:center;border:1px solid #243041;border-radius:12px;padding:8px 10px;background:#0f172a}
.players .name{font-weight:700}
.players .stat{color:var(--muted);font-size:12px}
.players .elim{color:#ef4444;font-weight:700}
:root.light .players li{ background:#fff; border-color:#e2e8f0; }

.chat-log{height:220px;overflow:auto;border:1px solid #243041;border-radius:12px;padding:10px;background:#0f172a;color:var(--text)}
.chat-item{margin-bottom:8px}
.chat-item .who{color:var(--accent);font-weight:700;margin-right:6px}
.chat-form{display:flex;gap:8px;margin-top:10px}
.chat-form input{flex:1;background:#0f172a;border:1px solid #334155;color:var(--text);border-radius:10px;padding:10px}
.chat-form button{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b1020;border:none;border-radius:10px;font-weight:800;padding:10px 12px;cursor:pointer}

.modal{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:40}
.modal-card{width:min(92vw,620px);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:0;display:flex;flex-direction:column;gap:0}
.modal-card .primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b1020;border:none;border-radius:10px;font-weight:800;padding:10px 12px;cursor:pointer}
.modal-card input,.modal-card select{background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:10px;padding:10px}

.menu-head{display:flex;gap:12px;align-items:center;padding:16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,var(--panel),var(--panel-soft))}
.menu-logo{font-size:32px; background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.menu-head h1{margin:0}
.menu-head p{margin:.2rem 0 0; color:var(--muted)}

.tabs{display:flex;border-bottom:1px solid var(--border);background:var(--panel-soft)}
.tab{flex:1;padding:12px 14px;text-align:center;border:none;background:transparent;color:var(--text);cursor:pointer;font-weight:700}
.tab.active{background:linear-gradient(180deg,var(--panel),var(--panel-soft))}
.tab-contents{padding:16px 16px 18px}
.pane{display:none}
.pane.active{display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){ .grid2{grid-template-columns:1fr}}

.overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:50}
.overlay-card{width:min(92vw,420px);background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center}
.overlay-card h2{margin:0;font-size:28px}
.overlay-card p{margin:0;color:var(--muted)}
.overlay-card .primary{margin-top:6px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b1020;border:none;border-radius:10px;font-weight:800;padding:10px 12px;cursor:pointer}

.actions{display:flex;gap:8px;align-items:center}
button.ghost{background:transparent;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px;cursor:pointer}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:#0b1220;color:#e5e7eb;padding:10px 14px;border-radius:10px;border:1px solid #223042;z-index:60;box-shadow:0 10px 30px #0005;transition:opacity .25s, transform .25s}
:root.light .toast{background:#111827;color:#f8fafc;border-color:#111827}

.chat-fab{position:fixed;right:16px;bottom:18px;width:56px;height:56px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#0b1020;border:none;box-shadow:0 10px 30px #0005;z-index:55;font-size:22px;display:flex;align-items:center;justify-content:center}
.badge{position:absolute;top:-6px;right:-6px;background:#ef4444;color:#fff;border-radius:999px;font-size:12px;line-height:1;padding:4px 6px}
.chat-drawer{position:fixed;inset:auto 0 0 0;height:60vh;background:linear-gradient(180deg,var(--panel),var(--panel-soft));border-top-left-radius:16px;border-top-right-radius:16px;border:1px solid var(--border);box-shadow:0 -10px 40px #0005;z-index:54;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.drawer-head{display:flex;justify-content:space-between;align-items:center}

.cell.mistake input{ box-shadow:0 0 0 2px var(--bad) !important; background:#1a0b0b !important; }
:root.light .cell.mistake input{ background:#fee2e2 !important; }

.howto{margin:0 0 4px 18px}
.howto li{margin:6px 0}