:root {
  --bg: #15110e;
  --panel: #211a15;
  --panel-2: #2b221b;
  --line: #3d3128;
  --text: #f1e8dc;
  --muted: #b3a493;
  --accent: #d9a441;
  --red: #c8443a;
  --black: #1b1b1b;
  --ok: #6fbf73;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
button {
  font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: var(--accent); color: #1b140c; border-color: var(--accent); font-weight: 600; }
button.small { padding: 3px 8px; font-size: 13px; }
select { max-width: 112px; font-size: 13px; padding: 4px 6px; }
ol.list li.empty { list-style: none; }
select, input {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
}
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }

.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--panel); }
.brand { font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.status { font-size: 13px; color: var(--muted); }
.status.online { color: var(--ok); }
.me { margin-left: auto; font-size: 14px; }

.layout { display: grid; grid-template-columns: 260px minmax(0, 1fr) 320px; height: calc(100% - 49px); }
.panel { background: var(--panel); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 18px; }
.panel.left { border-right: 1px solid var(--line); }
.panel.right { border-left: 1px solid var(--line); gap: 8px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.row-between h2 { margin: 0; }
section > .row-between { margin-bottom: 8px; }

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
ol.list { list-style: decimal inside; }
.list li { padding: 6px 8px; border-radius: 8px; background: var(--panel-2); font-size: 14px; }
.list li.active { outline: 1px solid var(--accent); }
.list li.clickable { cursor: pointer; }
.list li .count { float: right; color: var(--muted); }
.list .empty { background: none; color: var(--muted); font-style: italic; padding-left: 0; }
.table-item { display: flex; flex-direction: column; gap: 6px; }
.table-item .vs { font-weight: 600; }
.table-item .meta { color: var(--muted); font-size: 12px; }
.table-item .btns { display: flex; gap: 6px; }
.people li { background: none; padding: 2px 0; }

.board-wrap { position: relative; flex: 1; display: flex; min-height: 320px; }
.board-wrap .board { flex: 1; }
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 10px; gap: 6px; }
.board { flex: 1; min-height: 320px; border-radius: 12px; overflow: hidden; background: #0d0b09; position: relative; }
.board canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.board .fallback { padding: 24px; color: var(--muted); }
.players { display: flex; justify-content: center; min-height: 26px; }
.seat { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.seat .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: 1px solid #666; }
.seat .dot.b { background: var(--black); }
.seat .dot.r { background: var(--red); }
.seat.turn { color: var(--accent); font-weight: 600; }
.game-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.game-status { font-size: 15px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tabs { display: flex; gap: 6px; }
.tab.active { border-color: var(--accent); color: var(--accent); }
.chat { list-style: none; margin: 0; padding: 4px; flex: 1; overflow-y: auto; font-size: 14px; display: flex; flex-direction: column; gap: 3px; min-height: 120px; }
.chat li { line-height: 1.35; word-wrap: break-word; }
.chat .time { color: var(--muted); font-size: 11px; margin-right: 6px; }
.chat .nick { color: var(--accent); font-weight: 600; margin-right: 4px; }
.chat .system { color: var(--muted); font-style: italic; }
.chat .action { color: #d6b7f0; font-style: italic; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 24px; width: min(360px, 92vw); }
dialog::backdrop { background: rgba(0,0,0,.7); }
dialog h1 { margin: 0 0 6px; color: var(--accent); font-size: 22px; }
dialog input { width: 100%; margin: 4px 0 10px; }
dialog label { display: block; font-size: 14px; color: var(--muted); }
dialog .auth-tabs { margin: 10px 0 14px; }
dialog .hint { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
dialog button.primary { width: 100%; }
.error { color: #ff8a80; min-height: 1.2em; font-size: 14px; margin: 0 0 8px; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #3a2a20; border: 1px solid var(--accent); padding: 10px 16px; border-radius: 10px; max-width: 90vw; z-index: 10; }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; height: auto; }
  .stage { order: 1; }
  .board { min-height: 0; }
  .panel.right { order: 2; height: 360px; border-left: none; border-top: 1px solid var(--line); }
  .panel.left { order: 3; border-right: none; border-top: 1px solid var(--line); }
}

.new-table-row { margin-bottom: 8px; }
.new-table-row select { max-width: none; flex: 1; }
.seat .clock { font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 8px; margin-left: 6px; }
.seat.turn .clock { border-color: var(--accent); }
.seat .clock.low { color: #ff8a80; border-color: #ff8a80; }
.game-item { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.game-item .meta { color: var(--muted); font-size: 12px; }
.game-item .res-win { color: var(--ok); }
.game-item .res-loss { color: #ff8a80; }
#replay-bar { border-top: 1px solid var(--line); padding-top: 6px; }

button.danger { background: #8e2b24; border-color: #c8443a; }
.friend-form { margin-bottom: 8px; }
.friend-form input { flex: 1; min-width: 0; }
.friend-item { display: flex; align-items: center; gap: 6px; }
.friend-item .name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.friend-item .dot-online { width: 8px; height: 8px; border-radius: 50%; background: #555; flex: none; }
.friend-item .dot-online.on { background: var(--ok); }
.video-panel { position: absolute; top: 10px; right: 10px; width: min(320px, 45%); background: rgba(13,11,9,.92); border: 1px solid var(--line); border-radius: 12px; padding: 6px; z-index: 5; }
.video-panel video { width: 100%; border-radius: 8px; background: #000; display: block; }
.video-panel #remote-video { aspect-ratio: 4 / 3; }
.video-panel #local-video { position: absolute; width: 32%; right: 12px; top: 12px; border: 1px solid var(--line); }
.video-controls { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.video-controls #video-peer { flex: 1; font-size: 13px; color: var(--muted); }
@media (max-width: 960px) { .board-wrap { min-height: 0; aspect-ratio: 1 / 1; flex: none; } .video-panel { width: 55%; } }

.people li.person { display: flex; align-items: center; gap: 4px; }
.people li.person .name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.people li.person button { padding: 1px 6px; font-size: 12px; }
.badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--line); font-size: 12px; text-align: center; }
.badge.hot { background: var(--red); }
dialog textarea, dialog select { width: 100%; margin: 4px 0 10px; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; max-width: none; }
dialog label.check { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--text); }
dialog label.check input { width: auto; margin: 0; }
dialog.wide { width: min(720px, 94vw); max-height: 86vh; overflow-y: auto; }
dialog.wide h2 { margin-top: 16px; }
.admin-form { flex-wrap: wrap; margin: 10px 0 4px; justify-content: flex-start; }
.admin-form input { width: auto; flex: 1; min-width: 110px; margin: 0; }
.admin-form #admin-minutes { flex: 0 0 96px; min-width: 0; }
.reports li { display: flex; flex-direction: column; gap: 6px; }
.reports .head { font-weight: 600; }
.reports .meta { color: var(--muted); font-size: 12px; }
.reports .note { font-style: italic; }
.reports .context { margin: 0; padding: 6px 8px; background: var(--bg); border-radius: 6px; font-size: 12px; max-height: 140px; overflow-y: auto; list-style: none; }
.reports .context .who { color: var(--accent); }
.reports .context .hit { background: rgba(200,68,58,.25); }
.reports .btns { display: flex; gap: 6px; flex-wrap: wrap; }
.reports .context li { display: block; background: none; padding: 1px 0; border-radius: 0; font-size: 12px; }

.me-btn { margin-left: auto; display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 2px 6px; font-size: 14px; }
.me-btn:hover { text-decoration: underline; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; line-height: 1; flex: none; color: #fff; }
.avatar.big { width: 64px; height: 64px; font-size: 34px; }
.plink { cursor: pointer; }
.plink:hover { text-decoration: underline; }
.people li.person { gap: 6px; }
.room-tools { margin-top: 8px; justify-content: flex-start; flex-wrap: wrap; }
.list li .lock { margin-right: 4px; font-size: 12px; }
.code-row { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 8px; font-size: 14px; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; color: var(--accent); }
#room-members { margin-bottom: 8px; }
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-id { flex: 1; min-width: 0; }
.profile-id h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.profile-head .meta, #pf-games .meta { color: var(--muted); font-size: 13px; }
.bio { white-space: pre-wrap; margin: 12px 0; }
.bio.empty { color: var(--muted); font-style: italic; }
#pf-actions { margin-bottom: 10px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 8px 0 4px; }
.stat { background: var(--panel-2); border-radius: 8px; padding: 8px 10px; }
.stat .v { font-size: 20px; font-weight: 700; }
.stat .k { font-size: 12px; color: var(--muted); }
.chart { background: var(--panel-2); border-radius: 8px; padding: 8px; min-height: 40px; }
.chart svg { display: block; width: 100%; height: 140px; }
.chart .empty { color: var(--muted); font-style: italic; font-size: 14px; }
.avatar-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.avatar-grid button { padding: 4px; border-radius: 50%; line-height: 0; }
.avatar-grid button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.avatar-grid .swatch { width: 26px; height: 26px; border-radius: 50%; display: inline-block; }
dialog .profile-head + .bio + .actions button { width: auto; }
.bot-row { flex-wrap: wrap; justify-content: flex-start; }
.bot-row select { max-width: none; flex: 1; }
.panel .hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

.msg-btn { margin-left: auto; }
.msg-btn + .me-btn { margin-left: 0; }
dialog.dm { width: min(760px, 96vw); }
.dm-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; margin-top: 10px; height: min(60vh, 520px); }
.dm-list { overflow-y: auto; }
.dm-list li { cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.dm-list li.active { outline: 1px solid var(--accent); }
.dm-list .who { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.dm-list .who .badge { margin-left: auto; }
.dm-list .preview { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-thread-wrap { display: flex; flex-direction: column; min-height: 0; gap: 6px; }
.dm-head { margin: 0; }
.dm-thread { background: var(--bg); border-radius: 8px; padding: 8px; min-height: 0; }
.dm-thread li.mine .nick { color: var(--ok); }
@media (max-width: 700px) { .dm-body { grid-template-columns: 1fr; height: auto; } .dm-list { max-height: 140px; } .dm-thread { height: 40vh; } }
.people li.person { flex-wrap: wrap; }
.people li.person .name { flex: 1 1 130px; }