/*
 * フレネミー将棋 v2 — 観戦の画面（/spectate。features/spectate/spectate-screen.js。I47 N7-10 ZUKAN）。
 * 盤・駒台・棋譜・結果・つながりのしるし（.conn）は ui/style.css のまま（旧と同じ）。ここは観戦の見出しと ID の入力欄だけ。style.css の変数で light / dark 両対応
 */
.sp-head { margin: 0 0 4px; }
.sp-head .lobby-head h1 { font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.sp-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; margin: 0 0 4px; font-size: 0.85rem; }
.sp-status { color: var(--text-2); font-variant-numeric: tabular-nums; }
.sp-note { margin: 4px 0 8px; text-align: center; font-size: 0.85rem; color: var(--text); }
.conn[data-mode='finished'] { display: none; }

/* ID の入力欄（?id= が無いとき） */
.sp-page { max-width: var(--page-narrow); }
.sp-form label { display: block; font-size: 0.85rem; color: var(--text-2); margin: 0 0 4px; }
.sp-form-row { display: flex; gap: 8px; }
.sp-form-row input { flex: 1; min-width: 0; max-width: 12em; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sp-error { color: var(--danger); font-size: 0.85rem; margin: 6px 0 0; }
.sp-hint { color: var(--text-2); font-size: 0.82rem; margin: 12px 0 0; }
.sp-hint a, .sp-head a:not(.ghost) { color: var(--accent); }

/* 部屋一覧（/lobby）の下見の「👀 観戦する」（features/online/lobby-screen.js が出すリンク） */
.lobby-watch { display: inline-block; margin: 6px 0 0; padding: 6px 14px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-weight: 600; text-decoration: none; }
.lobby-watch:hover, .lobby-watch:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* 終局の結果の欄の「📈 検討する」（/review へ） */
.sp-review { margin: 2px 0 6px; font-size: 0.85rem; }
.sp-review-link { display: inline-block; min-height: 32px; padding: 4px 6px; color: var(--accent); font-weight: 700; text-decoration: none; }