/* 公開サイトの観戦席の見た目（D 2026-11-01: 入口と同じトーンで、ミニマルでモダンに）。
   viewer.html（手元のビューワー）の CSS の上に重ねる。build_public_viewer.py --site が <link> で読み込ませる。 */
:root { --bg:#11161d; --panel:#141a22; --surface:#1a212b; --line:#28313d; --text:#e8ecf1; --muted:#8f9aa8; --accent:#f2c14e; --hover:#222b37;
  --ui: "Zen Kaku Gothic New", -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif; }
body { font: 13px/1.5 var(--ui); background: var(--bg); }
* { scrollbar-width: thin; scrollbar-color: #2e3946 transparent; }

/* 上のつまみの列 */
header { gap: 6px 8px; padding: 10px 14px; background: rgba(17,22,29,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
header button, #review button, #whybox button {
  font: 700 12.5px/1 var(--ui); color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; cursor: pointer; transition: background .15s, border-color .15s, transform .08s; }
header button:hover, #review button:hover { background: var(--hover); border-color: #3a4554; }
header button:active, #review button:active { transform: scale(.96); }
header #play { background: var(--accent); color: #1d1503; border-color: transparent; min-width: 84px; }
header #play:hover { background: #f5cd6a; }
header select, aside select, #whybox select, label > select {
  -webkit-appearance: none; appearance: none; font: 700 12.5px/1 var(--ui); color: var(--text);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238f9aa8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 28px 7px 13px; cursor: pointer; }
header select:hover, aside select:hover { border-color: #3a4554; }
#replay { max-width: min(520px, 44vw); }
#whybox select { padding: 4px 24px 4px 9px; font-size: 11px; background-position: right 8px center; }

/* 入口へ戻る（全画面の時だけ。埋め込みでは hidden） */
#home { font: 700 12.5px/1 var(--ui); color: var(--accent); text-decoration: none; padding: 7px 13px 7px 4px; white-space: nowrap; }
#home:hover { color: #f5cd6a; }
#home[hidden] { display: none; }

/* ターンの棒 */
#slider { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: var(--line); border: 0; padding: 0; margin: 0 6px; cursor: pointer; }
#slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); }
#slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); }
#turnlabel { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }

/* 表示の切り替え（チェックボックス → 丸いチップ） */
header label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-weight: 700; font-size: 12.5px; cursor: pointer; user-select: none; transition: background .15s, color .15s, border-color .15s; }
header label:hover { background: var(--hover); }
header label input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: #3a4554; transition: background .15s, box-shadow .15s; }
header label:has(input:checked) { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, transparent); }
header label input[type=checkbox]:checked { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
header label:has(select) { padding: 3px 3px 3px 12px; gap: 8px; }
header label:has(select) select { padding-top: 5px; padding-bottom: 5px; }

/* 右の欄 */
aside { background: var(--panel); padding: 12px; border-left: 1px solid var(--line); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.card summary, #legendbox summary { list-style: none; cursor: pointer; color: var(--muted); font-weight: 700; font-size: 12px; }
.card summary::-webkit-details-marker, #legendbox summary::-webkit-details-marker { display: none; }
.card summary::before, #legendbox summary::before { content: "▸ "; color: var(--accent); }
.card details[open] summary::before, #legendbox[open] summary::before { content: "▾ "; }
h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; }
#events div, #why div { border-bottom-color: #1f2731; }

/* ツッコミ欄 */
#review { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
#review textarea, #review input { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: 13px/1.5 var(--ui); padding: 8px 10px; transition: border-color .15s; }
#review textarea:focus, #review input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); }
#review button.save { background: var(--accent); color: #1d1503; border-color: transparent; }
#review button.save:hover { background: #f5cd6a; }
#reviewList div { border-bottom-color: #232c37; padding: 5px 0; }
#reviewList div.here { color: var(--accent); }

/* 地図の上の板 */
#whybox { background: rgba(17,22,29,.84); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; }
#whybox .hd { font-weight: 700; }
#tip { background: rgba(10,13,18,.94); border-radius: 10px; padding: 8px 10px; border-color: var(--line); }
#legendbox { margin-top: 6px; }

@media (max-width: 640px) {
  header { padding: 8px 10px; gap: 6px; }
  header button, header select, header label { font-size: 12px; }
  #replay { max-width: 100%; flex: 1 1 100%; }
}