/* Hanabi — console styles (extends /css/style.css) */

.console-topbar { flex-wrap: wrap; }
.console-topbar .tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.console-topbar .tabs a {
  color: var(--muted); text-decoration: none; font-weight: 600; padding: 8px 14px; border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}
.console-topbar .tabs a:hover { background: var(--panel-2); color: var(--text); }
.console-topbar .tabs a.active { background: var(--panel-2); color: var(--accent); }
.topbar-right { gap: 10px; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }

a.btn { text-decoration: none; }
.console-main { max-width: 1280px; margin: 0 auto; padding: 18px 16px 48px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head h1 { margin: 0; }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar .input { width: auto; min-width: 180px; }
.empty { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); }

/* ── tables grid ── */
.tables-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.table-card { display: flex; flex-direction: column; gap: 10px; }
.table-card .code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.35rem; font-weight: 800; letter-spacing: 2px; color: var(--accent); }
.table-card .name { font-weight: 700; }
.table-card .seats { display: flex; gap: 6px; flex-wrap: wrap; }
.seat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(0,0,0,0.25); font-size: 0.85rem; }
.seat-chip .dot-online { margin-left: 2px; }
.table-card .stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.9rem; }
.table-card .stats b { font-size: 1.05rem; }
.table-card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.cfg-summary { font-size: 0.85rem; color: var(--muted); }

/* ── table detail ── */
.detail-layout { display: grid; grid-template-columns: 400px 1fr; gap: 14px; align-items: start; }
@media (max-width: 1000px) { .detail-layout { grid-template-columns: 1fr; } }
.detail-side { display: flex; flex-direction: column; gap: 12px; }
.detail-side .panel + .panel, .detail-main .panel + .panel { margin-top: 0; }
.detail-main { display: flex; flex-direction: column; gap: 12px; }
.seat-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(0,0,0,0.2); }
.seat-row .idx { width: 20px; color: var(--muted); font-weight: 700; font-size: 0.85rem; }
.seat-row .nm { flex: 1; font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.seat-row .ops { display: flex; gap: 4px; }
.seat-row.current { outline: 2px solid var(--accent); }
.qr-box { display: flex; gap: 12px; align-items: center; }
.qr-box canvas { border-radius: 8px; }
.join-url { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; word-break: break-all; background: rgba(0,0,0,0.3); padding: 8px; border-radius: 8px; }
.cfg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cfg-form .full { grid-column: 1 / -1; }
.cfg-form .input, .cfg-form label.field > .input { font-size: 0.9rem; padding: 8px 10px; }
.cfg-form label.switch { color: var(--muted); font-size: 0.85rem; }

/* ── live game view ── */
.game-top { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.game-stats { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.game-stat { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.game-stat b { font-size: 1.3rem; color: var(--text); }
.game-stat .tokens { justify-content: center; }
.hands { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hand-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,0.2); border: 1px solid transparent; }
.hand-row.current { border-color: var(--accent); background: rgba(255,179,71,0.08); }
.hand-row .who { width: 150px; display: flex; align-items: center; gap: 8px; font-weight: 600; flex: 0 0 auto; }
.hand-row .who .turn { font-size: 0.7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.hand-row .hand { padding: 10px 4px 22px; }
.discards { display: flex; gap: 14px; flex-wrap: wrap; }
.discard-col { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.discard-col .cards { display: flex; gap: 3px; flex-wrap: wrap; max-width: 140px; }
.discard-col .lbl { font-size: 11px; color: var(--muted); }
.log.tall { max-height: 420px; }
.log .entry .n { color: var(--muted); font-size: 0.8rem; margin-right: 6px; }

/* ── players ── */
.player-row td { vertical-align: middle; }
.player-row .nm { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.emoji-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.emoji-grid button { width: 38px; height: 38px; border-radius: 8px; border: 2px solid transparent; background: rgba(0,0,0,0.25); font-size: 20px; cursor: pointer; }
.emoji-grid button.selected { border-color: var(--accent); background: rgba(255,179,71,0.15); }
.color-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.color-grid button { width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.color-grid button.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.avatar-preview { display: flex; align-items: center; gap: 10px; }

/* ── history / stats ── */
.score-bar { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.score-bar .bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; }
.score-bar .bar i { display: block; height: 100%; border-radius: 4px; }
.score-bar b { font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.avatars-inline { display: flex; align-items: center; }
.avatars-inline .avatar { margin-right: -8px; box-shadow: 0 0 0 2px var(--bg-2); }
.tiles .panel + .panel { margin-top: 0; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tile { padding: 14px 16px; }
.tile .lbl { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.tile .val { font-size: 1.8rem; font-weight: 800; margin-top: 2px; }
.rank-badge-n { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--panel-2); font-weight: 800; font-size: 0.85rem; }
.rank-badge-n.r1 { background: #ffd54f; color: #3a2a00; }
.rank-badge-n.r2 { background: #cfd8dc; color: #263238; }
.rank-badge-n.r3 { background: #d7a86e; color: #3e2723; }
.table-wrap { overflow-x: auto; }
tr.clickable { cursor: pointer; }
.pstats { width: 100%; font-size: 0.85rem; }

/* ── settings ── */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; }
.settings-grid .panel + .panel { margin-top: 0; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; font-size: 0.9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; text-align: right; }
.prose p { margin: 0 0 8px; line-height: 1.45; font-size: 0.92rem; }
.prose ul { margin: 0 0 8px; padding-left: 18px; font-size: 0.92rem; line-height: 1.45; }

/* ── modal extras ── */
.modal h2 { margin-bottom: 12px; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.modal .form { display: flex; flex-direction: column; gap: 10px; }
.modal.wide { width: min(860px, 100%); }
.modal .log { max-height: 360px; }

@media (max-width: 700px) {
  .hand-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hand-row .who { width: auto; }
  .cfg-form { grid-template-columns: 1fr; }
}