/* ============================================================
   theme.css — 明るい新デザイン（Asobi Home と統一）
   style.css の後に読み込み、共通UI（クローム）を上書きする。
   ゲーム盤面は各自の配色を保持（--board 等は据え置き）。
   ============================================================ */

:root {
  --bg:      oklch(0.99 0.004 95);   /* クリーム地 */
  --surface: #ffffff;                /* 白カード */
  --text:    oklch(0.2 0.01 95);     /* 濃いインク */
  --muted:   oklch(0.5 0.01 95);     /* グレー */
  --accent:  oklch(0.42 0.12 155);   /* ブランド緑（見出し/リンク） */
  --btn:     oklch(0.22 0.04 155);   /* 深緑ボタン */
  --line:    oklch(0.91 0.006 95);   /* 罫線 */
  --line-soft: oklch(0.94 0.004 95);
  --brand-bright: oklch(0.75 0.18 145);
  --jp:      'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP','Yu Gothic',system-ui,sans-serif;
}

body { font-family: var(--jp); background: var(--bg); color: var(--text); }

/* ── Buttons ── */
.btn-primary { background: var(--btn); color: var(--brand-bright); font-weight: 900; border-radius: 10px; }
.btn-primary:hover { opacity: 1; background: oklch(0.26 0.05 155); }
.btn-secondary { background: #fff; color: oklch(0.35 0.01 95); border: 1px solid var(--line); border-radius: 10px; font-weight: 700; }
.btn-secondary:hover { opacity: 1; border-color: var(--accent); color: var(--accent); }
.btn-icon { background: #fff; border: 1px solid var(--line); color: var(--muted); }
.btn-icon:hover { border-color: var(--accent); color: var(--accent); }

/* ── Inputs ── */
input[type=text], select {
  background: #fff; border: 1px solid var(--line); color: var(--text);
}
input[type=text]:focus, select:focus { border-color: var(--accent); }

/* ── Titles ── */
.site-title { color: var(--ink, var(--text)); }

/* ── Language switch (floating) ── */
.lang-switch {
  background: #fff; color: oklch(0.4 0.01 95);
  border: 1px solid var(--line); box-shadow: 0 2px 8px oklch(0.2 0.01 95 / 0.08);
}
.lang-switch:hover { background: #fff; color: var(--accent); border-color: var(--accent); }

/* ── Cards / panels: white on cream needs a defining border ── */
.slot-panel-row, .slot-chip, #topBar, #gameConfigArea, #chatPanel,
.modal, .room-row, .rules-panel {
  border: 1px solid var(--line);
}
.modal { box-shadow: 0 20px 50px oklch(0.2 0.01 95 / 0.18); }
.game-card { border: 1px solid var(--line); }
.game-card:not(.disabled):hover { box-shadow: 0 8px 24px oklch(0.2 0.01 95 / 0.10); }

/* ── Genre chips (lobby/legacy) ── */
.genre-chip { background: #fff; color: oklch(0.4 0.01 95); border: 1px solid var(--line); }
.genre-chip:hover { color: var(--accent); border-color: var(--accent); }
.genre-chip.active { background: var(--btn); color: var(--brand-bright); border-color: var(--btn); }

/* ── Badges ── */
.spectator-badge { background: oklch(0.95 0.02 155); color: oklch(0.4 0.12 155); }
.badge-watch { background: oklch(0.96 0.03 55); color: oklch(0.45 0.12 55); border: 1px solid oklch(0.8 0.08 55); }
.badge-waiting { background: oklch(0.95 0.004 95); color: oklch(0.45 0.01 95); border: 1px solid var(--line); }

/* ── Slot config toggles (waiting view) ── */
.type-btn { background: #fff; color: oklch(0.45 0.01 95); border: 1px solid var(--line); }
.type-btn:hover { border-color: var(--accent); color: var(--accent); }
.type-btn.active { background: var(--btn); color: var(--brand-bright); border-color: var(--btn); }
.btn-spec-toggle.on { background: oklch(0.95 0.02 155); color: oklch(0.38 0.12 155); border: 1px solid oklch(0.7 0.1 155); }
.btn-spec-toggle.off { background: oklch(0.96 0.04 27); color: oklch(0.5 0.18 27); border: 1px solid oklch(0.75 0.12 27); }

/* ── Chat ── */
.chat-header { border-bottom: 1px solid var(--line); }
.chat-input-row { border-top: 1px solid var(--line); }
.chat-text { background: oklch(0.96 0.005 95); color: var(--text); }
#chatMessages { scrollbar-color: oklch(0.85 0.006 95) transparent; }
#chatMessages::-webkit-scrollbar-thumb { background: oklch(0.85 0.006 95); }

/* ── Rules panel ── */
.rules-panel { background: #fff; }
.rules-title { border-bottom: 1px solid var(--line); }
.rules-body { color: oklch(0.3 0.01 95); }
.rules-overview { color: oklch(0.28 0.01 95); }
.rules-dl dt { color: oklch(0.25 0.01 95); }
.rules-dl dd { color: oklch(0.4 0.01 95); }

/* ── Footer ── */
.site-footer { background: var(--bg); border-top: 1px solid var(--line); }
.footer-col a:hover { color: var(--accent); }
.footer-genre-games a { background: oklch(0.96 0.004 95); border: 1px solid var(--line); }
.footer-genre-games a:hover { background: oklch(0.93 0.03 155); }
.footer-disabled, .footer-no-rooms { color: var(--muted); }
.footer-room { border: 1px solid var(--line); }
.footer-room:hover { background: oklch(0.97 0.005 95); }
.footer-room-watch .footer-room-meta { color: oklch(0.5 0.1 250); }

/* ── Feedback page ── */
.fb-card { border: 1px solid var(--line); box-shadow: 0 1px 3px oklch(0.2 0.01 95 / 0.05); }
.fb-type-btn { background: #fff; color: var(--text); border: 1px solid var(--line); }
.fb-type-btn:hover { border-color: var(--accent); color: var(--accent); }
.fb-type-btn.selected { background: var(--btn); color: var(--brand-bright); border-color: var(--btn); }
.fb-card textarea, .fb-card input[type=text], .fb-card select { background: #fff; border: 1px solid var(--line); }
.fb-card textarea:focus, .fb-card input:focus, .fb-card select:focus { border-color: var(--accent); }
.fb-fab { background: var(--btn); color: var(--brand-bright); border: none; }
.fb-fab:hover { background: oklch(0.26 0.05 155); color: var(--brand-bright); }

/* ── Last-move highlight: 目立つリング（相手の着手を分かりやすく） ── */
.cell.last-move { box-shadow: inset 0 0 0 3px #ffcf33, 0 0 6px rgba(255,200,40,.5); }

/* ── In-game controls (投了) ── */
.ingame-controls { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.btn-resign { font-size: .85rem; padding: 7px 20px; }
.btn-resign:hover { border-color: oklch(0.6 0.18 27); color: oklch(0.55 0.2 27); }

/* ── Game over panel (light) ── */
.game-over-panel { background: #fff; border: 2px solid var(--accent); box-shadow: 0 12px 34px oklch(0.2 0.01 95 / 0.14); }
.go-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ── 棋譜（手数履歴） ── */
.mlog { width: min(460px, 100%); margin: 12px auto 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mlog-head { cursor: pointer; padding: 9px 14px; font-size: .82rem; font-weight: 800; color: oklch(0.35 0.01 95); list-style: none; user-select: none; }
.mlog-head::-webkit-details-marker { display: none; }
.mlog-head::before { content: '▸ '; color: var(--muted); }
.mlog[open] .mlog-head::before { content: '▾ '; }
.mlog-count { color: var(--muted); font-weight: 600; }
.mlog-body { max-height: 190px; overflow-y: auto; border-top: 1px solid var(--line); padding: 6px 0; }
.mlog-row { display: grid; grid-template-columns: 42px 1fr 1.4fr; gap: 8px; padding: 3px 14px; font-size: .8rem; }
.mlog-row:nth-child(odd) { background: oklch(0.98 0.004 95); }
.mlog-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.mlog-c { color: oklch(0.4 0.01 95); font-weight: 700; }
.mlog-m { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Invite / share bar ── */
.invite-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.invite-copy { font-size: .82rem; padding: 7px 14px; }
.invite-share { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border-radius: 9px; font-size: .82rem; font-weight: 800; text-decoration: none; color: #fff; }
.invite-x { background: #111; } .invite-x:hover { background: #000; color: #fff; }
.invite-line { background: #06c755; } .invite-line:hover { background: #05b34c; color: #fff; }

/* ── Misc ── */
.start-hint { color: oklch(0.5 0.12 55); }
.error, .fb-req, .fb-result.fb-err { color: oklch(0.53 0.2 27); }