/* 「赤ずきんちゃんご用心」基本スタイル
 *
 * 仕様§1-A に従う。滞在時間のほとんどがログを読む時間のため、
 * 装飾よりも本文の可読性を優先する。ダークテーマ・血のイメージは使わない。
 */

/* 配色は変数にまとめる(§1-A)。
   **明暗の切り替えはこの変数だけを差し替えて行う。**
   個々の指定に色を直接書くと、片方のテーマだけ直し忘れる */
:root {
  color-scheme: light;

  /* 配色(§1-A) */
  --bg:          #FAF6EC;  /* 生成り。白より目が疲れにくい */
  --bg-card:     #FFFDF7;
  --text:        #2C2C2A;  /* 純黒は使わない */
  --text-sub:    #5F5E5A;
  --rule:        #E5E0D2;
  --accent:      #993556;  /* くすんだ赤。見出し・強調 */
  --gold:        #EF9F27;  /* チップセットの額縁に合わせた金 */
  --on-accent:   #FFFFFF;  /* 強調色の上に載せる文字 */

  /* 発言種別(§1-A)。人狼BBS系の慣例を踏襲する */
  --whisper-bg:   #FCEBEB; --whisper-bar:   #A32D2D; --whisper-text:   #501313;
  /* 赤窓(人狼の囁き)そのものの色。恋文(ピンク)とほぼ同じ淡い色だったので、窓だけはっきり赤くする(2026-10-07) */
  --redwin-bg:    #F4C4C4; --redwin-bar:    #B3141B; --redwin-text:    #4A0D0D;
  --grave-bg:     #EEEDFE; --grave-bar:     #534AB7; --grave-text:     #26215C;
  --mono-bar:     #B4B2A9; --mono-text:     #5F5E5A;
  /* 独り言の地(2026-10-01)。アクションと見分けるため、独り言だけ薄い灰色の地を敷く */
  --mono-bg:      #F0EEE8;
  --spectate-bg:  #EAF3DE; --spectate-bar:  #639922; --spectate-text:  #173404;
  --heavens-bg:   #FDF3E0; --heavens-text:  #7A4E06; --heavens-sub:    #8A6A2A;
  --admin-bg:     #F3EDFA; --admin-bar:     #6B4FA0; --admin-text:     #3E2A63;
  --lovers-bg:    #FDEBF3; --lovers-bar:    #C2478A; --lovers-text:    #6B1444;
  --lovers-sub:   #96406B;
  /* 共鳴(2026-09-17)。見学の黄緑と並んでも分かるよう、青みの深い緑にする */
  --resonance-bg: #E1F3EC; --resonance-bar: #11795A; --resonance-text: #0B3B2C;
  --set-bg:       #FFF6DA; --ready-bg:      #FFF9EC;

  --font: system-ui, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}

/* 暗い配色。
   **明るい方をそのまま反転させない。** 反転すると彩度が上がりすぎて目が痛い。
   背景は真っ黒にせず、文字は真っ白にしない(§1-A の「純黒は使わない」と同じ考え)。
   発言種別の色は、暗い背景でも見分けられるところまで明度を上げる。 */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #1C1A18;
  --bg-card:     #26231F;
  --text:        #E8E3D8;
  --text-sub:    #A9A398;
  --rule:        #3A362F;
  --accent:      #D98098;
  --gold:        #D9A24A;
  --on-accent:   #1C1A18;

  --whisper-bg:   #3A2222; --whisper-bar:   #D96A6A; --whisper-text:   #F2C7C7;
  --redwin-bg:    #4E1717; --redwin-bar:    #E5484D; --redwin-text:    #FAD4D4;
  --grave-bg:     #23233A; --grave-bar:     #8F87E0; --grave-text:     #CFCBF2;
  --mono-bar:     #5A564E; --mono-text:     #A9A398;
  --mono-bg:      #2B2925;
  --spectate-bg:  #22301C; --spectate-bar:  #8CC65A; --spectate-text:  #CFE6B8;
  --heavens-bg:   #33291A; --heavens-text:  #E8C88A; --heavens-sub:    #C4A469;
  --admin-bg:     #2A2438; --admin-bar:     #A98FD9; --admin-text:     #D6C9F0;
  --lovers-bg:    #33202B; --lovers-bar:    #D97FAE; --lovers-text:    #F0C4DA;
  --lovers-sub:   #C79AB4;
  --resonance-bg: #1A2F28; --resonance-bar: #4CC39A; --resonance-text: #BFE9D8;
  --set-bg:       #3A3120; --ready-bg:      #302A1E;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;      /* 本文 14〜15px */
  line-height: 1.7;
}

/* 11px 未満は使わない(§1-A) */
small, .sub { font-size: 12px; color: var(--text-sub); }

a { color: var(--accent); }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 16px 48px; }

/* ---- ヘッダ ---- */
.site-header {
  border-bottom: 2px solid var(--gold);
  background: var(--bg-card);
}
.site-header .wrap { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px; }
.site-title { margin: 0; font-size: 20px; color: var(--accent); }
.site-title a { text-decoration: none; color: inherit; }

h2 { color: var(--accent); font-size: 17px; border-bottom: 1px solid var(--rule);
     padding-bottom: 6px; margin-top: 32px; }

/* ---- 村カード(§13-1) ---- */
.village-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.village-card h3 { margin: 0 0 4px; font-size: 16px; }
.village-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 8px; }
.village-title-row h3 { margin: 0; }

/* 全員に見せるのは表の残喉だけ。20人でも名前と残量を拾いやすい一覧にする */
.public-budgets { margin: 18px 0 24px; }
.public-budgets h3 { margin-bottom: 4px; }
.public-budgets > .sub { margin-top: 0; }
.public-budgets__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px 10px;
}
.public-budget {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 5px 9px; border: 1px solid var(--rule); border-radius: 5px;
  background: var(--bg-card);
}
.public-budget strong { white-space: nowrap; color: var(--accent); }
.public-budget--empty { border-color: var(--accent); }
.public-budget--empty strong { font-weight: 800; }

/* ---- 管理人からのお知らせ ---- */
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-heading h2 { flex: 1; }
.announcement-list { display: grid; gap: 10px; }
.announcement-card {
  background: var(--bg-card); border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: 12px 16px;
}
.announcement-card h3 { margin: 0; font-size: 15px; color: var(--accent); }
/* 本文は記法で組む(§13-4)ので、生の改行をそのまま出す指定は外す。
   **段落の間だけ空ける。** 行ごとに <p> になるので、既定の余白だと間延びする */
.announcement-body { overflow-wrap: anywhere; margin-top: 7px; }
.announcement-body > :first-child { margin-top: 0; }
.announcement-body > :last-child  { margin-bottom: 0; }
.announcement-body p  { margin: 0 0 4px; }
.announcement-body p:last-of-type { margin-bottom: 0; }
.announcement-body ul { margin: 6px 0; padding-left: 1.4em; }
.announcement-body li { margin: 2px 0; }
.notation { margin: 6px 0 10px; }
.notation > summary { cursor: pointer; }
.notation-list { margin: 6px 0; padding-left: 1.4em; }
.notation-list li { margin: 2px 0; }
.announcement-body h2, .announcement-body h3, .announcement-body h4 {
  font-size: 15px; margin: 12px 0 4px;
}
.announcement-body blockquote { margin: 8px 0; }
.announcement-body hr { margin: 10px 0; }
/* TOPで本文を畳む(§13-1)。**指で押せる大きさにする。**
   小さい字のリンクだと、スマホで狙いにくい */
.announcement-fold { margin-top: 6px; }
.announcement-fold > summary {
  cursor: pointer; display: inline-block;
  padding: 4px 2px; font-size: 13px; color: var(--accent);
}
.announcement-fold > summary:hover { text-decoration: underline; }
/* 開いているあいだは目立たせない。**三角の向きが状態を示す** */
.announcement-fold[open] > summary { color: var(--text-sub); }
.announcement-form .input { width: 100%; max-width: 48em; }
.announcement-admin { margin: 10px 0; }
.announcement-admin summary { cursor: pointer; }

/* 村の属性を並べる。参加前の判断材料をすべて出す(§13-1) */
/* 次の更新まで(§10-1)。**見出しのすぐ下で、常に目に入る位置に置く** */
.next-change {
  margin: 6px 0 0; font-size: 15px;
}
.next-change strong { color: var(--accent); }
.next-change .sub { font-size: 13px; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.badge {
  font-size: 12px; line-height: 1.5;
  padding: 1px 8px; border-radius: 10px;
  border: 1px solid var(--rule); background: var(--bg);
  color: var(--text-sub);
}
.village-info-link { color: var(--accent); text-decoration: none; }
.village-info-link:hover { background: var(--bg-card); text-decoration: underline; }
/* ID公開村・メタあり村は通常村と視覚的に区別する(§12-A) */
.badge--warn { border-color: var(--gold); background: var(--heavens-bg); color: var(--heavens-text); }
/* 新しく入った立ち絵の印(§4-2)。**目を引くが、うるさくならない程度に** */
.badge--new { border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* 勝った陣営(§13-1)。過去ログの一覧で「どれを読むか」を選ぶ手がかりにする。
   **色は新しく足さない。** 発言種別で既に決めてある色を借りると、
   明暗どちらのテーマでも見え方が保証済みになる。
   人狼物語系の国と同じ対応(村側=緑・狼側=赤・第三=青・第四=桃)に揃えてある */
.badge--win { font-weight: 700; }
.badge--win-village { background: var(--spectate-bg); border-color: var(--spectate-bar); color: var(--spectate-text); }
.badge--win-wolf    { background: var(--whisper-bg);  border-color: var(--whisper-bar);  color: var(--whisper-text); }
.badge--win-fox     { background: var(--grave-bg);    border-color: var(--grave-bar);    color: var(--grave-text); }
.badge--win-lovers  { background: var(--lovers-bg);   border-color: var(--lovers-bar);   color: var(--lovers-text); }

/* ---- キャラクター一覧 ---- */
.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}
.char { text-align: center; }
/* 立ち絵は大きめに表示する(§1-A)。長期村80px以上 */
.char img {
  /* height:auto を省くと、HTML の height 属性が残って縦長に潰れる */
  /* **cover は切り取る。** 90×130 のチップは左右が失われていた。
     配布物をそのまま置く方針(§4-2)にしたので、余白は器の側で持つ */
  width: 100%; height: auto; max-width: 96px; aspect-ratio: 1 / 1; object-fit: contain;
  border-radius: 4px; border: 1px solid var(--rule);
  display: block; margin: 0 auto;
}
.char .name { font-size: 12px; line-height: 1.4; margin-top: 4px; }

/* 自分だけの短いメモ(§13-2)。**使わない人の邪魔にならない大きさで、
   それでいて指で押せる。** スマホでは名前の下を軽く叩ければよい */
.memo { margin-top: 3px; }
.memo > summary {
  list-style: none; cursor: pointer;
  display: inline-block; padding: 3px 8px; min-height: 24px;
  font-size: 12px; line-height: 1.5; border-radius: 10px;
  border: 1px dashed var(--rule); color: var(--accent); background: var(--bg);
}
.memo > summary::-webkit-details-marker { display: none; }
.memo__tag--empty { color: var(--text-sub); opacity: .7; }
.memo[open] > summary { border-style: solid; }
.memo__input { width: 7em; font-size: 14px; padding: 6px 8px; }
.memo form { display: flex; gap: 4px; justify-content: center; margin-top: 4px; flex-wrap: wrap; }
/* 発言の名前の横に出すぶん。**読むのを邪魔しない小ささ** */
/* 記号でしぼる(§13-2)。**畳んである。使わない人の画面を汚さない** */
.mark-filter { margin: 6px 0; }
.mark-filter > summary {
  cursor: pointer; font-size: 13px; color: var(--text-sub);
  padding: 4px 2px; display: inline-block;
}
.mark-filter > summary:hover { color: var(--accent); }

.memo__tag--inline {
  display: inline-block; margin-left: 4px; padding: 0 6px;
  font-size: 11px; border-radius: 8px;
  border: 1px dashed var(--rule); color: var(--accent);
}
.char .title { font-size: 12px; color: var(--text-sub); }
/* 死んだ人(2026-10-01)。**立ち絵を薄く・灰色に**して、ひと目で生死が分かるように。
   札は立ち絵のすぐ下に大きめに(重要な情報は大きく: 孫の手の方針)。色は死因ごと、配色の中の色を使う */
.char--dead img { filter: grayscale(.9); opacity: .55; }
.fate {
  display: inline-block; margin-top: 4px; padding: 1px 8px;
  font-size: 12px; font-weight: 700; line-height: 1.6; border-radius: 10px;
  border: 1px solid var(--rule); background: var(--bg-card); color: var(--text);
}
.fate--executed     { background: var(--whisper-bg);   border-color: var(--whisper-bar);   color: var(--whisper-text); }
.fate--attacked     { background: var(--grave-bg);     border-color: var(--grave-bar);     color: var(--grave-text); }
.fate--sudden_death { color: var(--text-sub); }
.fate--love_suicide { background: var(--lovers-bg);    border-color: var(--lovers-bar);    color: var(--lovers-text); }
.fate--divined      { background: var(--resonance-bg); border-color: var(--resonance-bar); color: var(--resonance-text); }
.fate--alive        { background: var(--spectate-bg);  border-color: var(--spectate-bar);  color: var(--spectate-text); }
/* 決着後に出す役職(§3-1)。**名前と取り違えない程度に目立たせる** */
.char .role {
  font-size: 12px; margin-top: 2px;
  color: var(--accent); font-weight: 700;
}

.empty { color: var(--text-sub); }

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 40px; padding: 16px 0;
  font-size: 12px; color: var(--text-sub);
}

@media (max-width: 600px) {
  .wrap { padding: 0 12px 32px; }

  /* **狭い画面ではヘッダを2段にする。**
     題字と操作を1行に押し込むと、幅が足りず「ロ / グ / ア / ウ / ト」と
     1文字ずつ折り返して読めなくなる。折り返さないことを優先する */
  .site-header .wrap { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
  .site-header h1 { font-size: 18px; }
  .site-nav {
    margin-left: 0; width: 100%;
    flex-wrap: wrap; gap: 6px 14px;
  }
  .site-nav > * { white-space: nowrap; }
}

/* ---- 発言(§1-A)----
 * 人狼BBS系の慣例を踏襲した色分け。既存プレイヤーが迷わないことを優先する。
 */
.msg {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px 14px;
  margin-bottom: 10px;
  /* アンカーや投稿後に飛んできたとき、画面の上端に貼り付かせない。
     少し手前が見えるほうが前後の流れをつかみやすい */
  scroll-margin-top: 16px;
}
/* 改行はそのまま出す。**nl2br と併用しないこと。**
   両方かけると1回の改行が2行ぶん空く(テスト村で指摘があった) */
:root[data-log-spacing="compact"] { --log-line-height: 1.4; }
:root[data-log-spacing="standard"] { --log-line-height: 1.7; }
:root[data-log-spacing="wide"] { --log-line-height: 2; }
.body { white-space: pre-wrap; word-break: break-word; line-height: var(--log-line-height, 1.7); }
.log-spacing-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.log-spacing-pick select { width: auto; }
.body--markdown { white-space: normal; overflow-wrap: anywhere; }
.body--markdown > :first-child { margin-top: 0; }
.body--markdown > :last-child { margin-bottom: 0; }
.body--markdown p { margin: .45em 0; }
/* 発言の空行(2026-10-01)。1つで1行分のすき間。連続は2つまで(Markdown::MAX_BLANK) */
.body--markdown .md-blank { height: 1.2em; }
.body--markdown h2, .body--markdown h3, .body--markdown h4,
.body--markdown h5, .body--markdown h6 { margin: .75em 0 .35em; }
.body--markdown ul { margin: .45em 0; padding-left: 1.7em; }
.body--markdown blockquote { margin: .6em 0; padding: .25em .8em; border-left: 3px solid var(--rule); }
.body--markdown hr { border: 0; border-top: 1px solid var(--rule); margin: .8em 0; }
.body--markdown .table-wrap { overflow-x: auto; }
.body--markdown table { border-collapse: collapse; }
.body--markdown th, .body--markdown td { border: 1px solid var(--rule); padding: .3em .55em; }
.speech-notation { margin: .35em 0 .8em; }
.speech-notation summary { cursor: pointer; }
.dice-palette { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.dice-help code { white-space: nowrap; }
/* 表の作り方(2026-09-17)。書き方と見え方を並べる */
.table-help { margin: 6px 0; }
.table-help summary { cursor: pointer; }
.table-help__src {
  background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: 6px 10px;
  overflow-x: auto; font-size: 13px; font-weight: 400;
  /* **書き方は等幅で。** 縦棒の位置がそろって見えないと、真似しにくい */
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.table-help ol { padding-left: 1.4em; }
.table-help li { margin-bottom: 4px; }
.table-help li ul { padding-left: 1.2em; margin: 4px 0; list-style: disc; }
/* 差し出す文を作る欄(2026-09-16)。**狭い画面では折り返す** */
.gift-maker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; }
.gift-maker label { display: flex; align-items: center; gap: 6px; }
.gift-maker .input { min-width: 0; width: auto; padding: 4px 8px; font-size: 13px; }
/* ---- 村メモ(2026-09-16)。ログの先頭の畳み欄 ---- */
/* 村の番号(2026-09-16)。他国と同じく名前の前に並べる。**名前より控えめに** */
.village-no { color: var(--text-sub); font-weight: 400; font-variant-numeric: tabular-nums; margin-right: .15em; }
/* 自由編成の内訳(2026-09-17) */
/* 入力欄の label は display:block を持つので、hidden を上書きしてしまう。**消すときは確実に消す** */
[data-custom-only][hidden], #free-composition[hidden] { display: none !important; }
.free-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5em, 1fr)); gap: 6px 12px; margin: 8px 0; }
.free-grid__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.free-grid__item small { display: block; font-size: 11px; }
.free-grid__item[data-faction="wolf"] span { color: var(--whisper-bar); }
.free-summary { margin: 6px 0; }
.alert-inline { color: var(--whisper-bar); font-weight: 700; }
.warn-inline { color: var(--gold); font-weight: 700; }
.badge--free { border-color: var(--whisper-bar); }
.village-memo { margin: 8px 0 16px; }
/* エピローグのお知らせ(2026-09-16)。他国と同じく枠で囲んで目立たせる */
.epilogue-note {
  margin: 16px 0; padding: 10px 14px; border: 2px solid var(--whisper-bar);
  border-radius: 6px; color: var(--whisper-bar); background: var(--bg-card);
}
.epilogue-note p { margin: 0; }
.epilogue-note p + p { margin-top: 4px; }
.village-memo > details {
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--bg-card); padding: 8px 12px;
}
.village-memo summary { cursor: pointer; }
.village-memo__item { border-top: 1px dashed var(--rule); padding: 8px 0; }
.village-memo__item .meta { font-size: 12px; color: var(--text-sub); margin-bottom: 4px; }
/* 墓下のメモは墓下の色。**表のメモと取り違えない** */
.village-memo__item--grave { background: var(--grave-bg); color: var(--grave-text); padding: 8px; border-radius: 4px; }
.village-memo__form { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 10px; }
.village-memo__form textarea.input { width: 100%; max-width: none; }
/* ログの中の「村メモを貼った」。**発言より目立たせない** */
.memo-note { font-size: 12px; color: var(--text-sub); margin: 6px 0; padding-left: 8px; border-left: 2px solid var(--gold); }

/* ---- 読み返す道具(2026-09-16)。星狩り国の単語検索・複数人・表示順・アンカーピックアップ ---- */
.log-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0; }
.log-search { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.log-search label { display: flex; align-items: center; gap: 6px; }
.log-search input[type=search] { width: 14em; max-width: 100%; }
/* .input は幅いっぱいに広がる。**範囲の選択は中身の幅で足りる** */
.log-search .input { min-width: 0; padding: 4px 8px; font-size: 13px; }
.log-search select.input { width: auto; }
.log-order { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.log-order .current { font-weight: 700; text-decoration: none; }
.who-filter { margin: 8px 0; }
.who-filter summary { cursor: pointer; }
/* 名前は長い。**1行に詰めず、折り返して並べる** */
.who-filter__list { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0; font-size: 14px; }
.who-filter__list label { white-space: nowrap; }
.pickup-note.pickup-note--active {
  border: 2px solid var(--accent);
  border-left-width: 6px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text);
}
.pickup-note__state { font-size: 16px; color: var(--accent); }
.pickup-note__back { display: inline-block; margin: 8px 0 0 6px; }
#log-list.log-list--pickup {
  border: 2px solid var(--accent); border-radius: 6px;
  padding: 8px; margin-bottom: 12px;
}
.pickup-note {
  margin: 8px 0; padding: 8px 12px; border-left: 4px solid var(--gold);
  background: var(--bg-card); border-radius: 0 6px 6px 0;
}
/* 返事の数。**番号の近くに小さく。** 本文より目立たせない */
.reply-pick { font-size: 12px; margin-left: 4px; text-decoration: none; }
.reply-pick.current { font-weight: 700; }
.speech-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.speech-switch strong { margin-right: 4px; }
.msg .meta { font-size: 12px; color: var(--text-sub); margin-bottom: 4px; }

/* 発言の時刻と消費ポイント。本文の邪魔をしない大きさで meta に並べる */
.stamp {
  font-variant-numeric: tabular-nums;
  color: var(--text-sub); font-size: 11px; margin-left: 6px;
}

/* 左帯で種別を示す */
.msg--whisper   { background: var(--redwin-bg);   border-left: 4px solid var(--redwin-bar);   color: var(--redwin-text); }
.msg--grave     { background: var(--grave-bg);    border-left: 4px solid var(--grave-bar);    color: var(--grave-text); }
.msg--spectator { background: var(--spectate-bg); border-left: 4px solid var(--spectate-bar); color: var(--spectate-text); }
.bookmark-form { display: inline; }
.bookmark {
  background: none; border: 1px solid var(--rule); border-radius: 4px;
  color: var(--text-sub); font-size: 11px; padding: 0 5px; margin-left: 4px; cursor: pointer;
}
.bookmark:hover { border-color: var(--accent); color: var(--accent); }
.bookmark--here { background: var(--gold); border-color: var(--gold); color: var(--on-accent); font-weight: 700; }
/* 更新までの色(2026-09-18)。**背景だけ**を朝→昼→夕へ少しずつ沈める。
   文字や窓の色は変えない(読みやすさと、種別の見分けを崩さない)。
   選んだ配色の中で変える: 明るい配色は明るいまま、暗い配色は暗い側で */
:root[data-daytime="noon"]    { --bg: #F4ECDA; }
:root[data-daytime="evening"] { --bg: #EAD9C0; }
/* **暗い配色は明るさではなく色味で変える**(2026-09-18、がるさんの指摘)。
   黒に近いところで明るさを下げても、目にはほとんど違いが出ない。
   朝は温かい焦げ茶、昼は色の抜けた灰、夕は藍へ寄せる(明るさも少しずつ下げる) */
:root[data-theme="dark"][data-daytime="noon"]    { --bg: #18191F; }
:root[data-theme="dark"][data-daytime="evening"] { --bg: #15113A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme])[data-daytime="noon"]    { --bg: #18191F; }
  :root:not([data-theme])[data-daytime="evening"] { --bg: #15113A; }
}
body { transition: background-color 2s ease; }

/* 更新までの背景(2026-09-18、がるさんの絵)。**1日を6つに分けて景色を替える。**
   夜明け前 → 日の出 → 昼 → 午後 → 夕焼け → 夜。色の三段階(朝・昼・夕)はそのままで、
   朝=1・2、昼=3・4、夕=5・6 にあたる。
   **文字の読みやすさが先。** 絵は背景色で覆って薄く敷き、窓の色も変えない */
:root[data-dayimg] { background: var(--bg); }
:root[data-dayimg] body { background: transparent; }
:root[data-dayimg] body::before,
:root[data-dayimg] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
}
:root[data-dayimg] body::before {
  z-index: -2; background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* 絵の上に背景色を重ねて沈める。**暗い配色は絵の暗さが効くので少し薄く** */
:root[data-dayimg] body::after { z-index: -1; background: var(--bg); opacity: .84; transition: background-color 2s ease; }
:root[data-theme="dark"][data-dayimg] body::after { opacity: .78; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme])[data-dayimg] body::after { opacity: .78; }
}
:root[data-dayimg="1"] body::before {
  background-image: url("daytime/day-1.jpg");
  background-image: image-set(url("daytime/day-1.webp") type("image/webp"), url("daytime/day-1.jpg") type("image/jpeg"));
}
:root[data-dayimg="2"] body::before {
  background-image: url("daytime/day-2.jpg");
  background-image: image-set(url("daytime/day-2.webp") type("image/webp"), url("daytime/day-2.jpg") type("image/jpeg"));
}
:root[data-dayimg="3"] body::before {
  background-image: url("daytime/day-3.jpg");
  background-image: image-set(url("daytime/day-3.webp") type("image/webp"), url("daytime/day-3.jpg") type("image/jpeg"));
}
:root[data-dayimg="4"] body::before {
  background-image: url("daytime/day-4.jpg");
  background-image: image-set(url("daytime/day-4.webp") type("image/webp"), url("daytime/day-4.jpg") type("image/jpeg"));
}
:root[data-dayimg="5"] body::before {
  background-image: url("daytime/day-5.jpg");
  background-image: image-set(url("daytime/day-5.webp") type("image/webp"), url("daytime/day-5.jpg") type("image/jpeg"));
}
:root[data-dayimg="6"] body::before {
  background-image: url("daytime/day-6.jpg");
  background-image: image-set(url("daytime/day-6.webp") type("image/webp"), url("daytime/day-6.jpg") type("image/jpeg"));
}


.daytime-shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0 20px; }
.daytime-shots figure { margin: 0; }
.scenery-pick { margin: 6px 0; }
.scenery-pick select { width: auto; }
.daytime-label { font-weight: 700; margin: 12px 0 0; }
.daytime-shots img { width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 6px; display: block; }
.daytime-shots figcaption { text-align: center; font-size: 13px; color: var(--text-sub); margin-top: 4px; }
.msg--pending { border: 2px dashed var(--gold); background: var(--set-bg); }
.pending-left { margin-left: 8px; color: var(--text-sub); font-size: 12px; }
.msg--cancelled { opacity: .75; border-left: 4px solid var(--mono-bar); }
.msg--cancelled .body { text-decoration: line-through; text-decoration-color: var(--text-sub); }
.cancelled-tag { font-size: 11px; border: 1px solid var(--mono-bar); border-radius: 4px; padding: 0 5px; margin-right: 6px; }
.silence-note {
  margin: 12px 0; padding: 10px 14px; border-left: 4px solid var(--grave-bar);
  background: var(--grave-bg); color: var(--grave-text); border-radius: 4px;
}
.footer-x { white-space: nowrap; }
.log-mine { margin: 8px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.msg--resonance { background: var(--resonance-bg); border-left: 4px solid var(--resonance-bar); color: var(--resonance-text); }
/* 独り言は灰色の地＋太い線、アクションは地なし＋細い線(2026-10-01、村16のエピで「見分けにくい」) */
.msg--monologue { background: var(--mono-bg);       border-left: 4px solid var(--mono-bar);     color: var(--mono-text); font-style: italic; }

/* 天の声は村建て人からの連絡。吹き出しにして本文と混同させない */
.msg--heavens {
  position: relative;
  background: var(--heavens-bg);
  border: 2px solid var(--gold);
  border-radius: 10px;
  color: var(--heavens-text);
  margin: 18px 0 22px;
  padding: 12px 16px;
  font-weight: 600;
}
.msg--heavens::after {   /* 吹き出しの尻尾 */
  content: ""; position: absolute; left: 28px; bottom: -10px;
  width: 16px; height: 16px; background: var(--heavens-bg);
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
}
.msg--heavens .meta { color: var(--heavens-sub); font-weight: 400; }

/* 管理者発言。天の声と同じ吹き出しだが色を変え、運営の発言だと一目で分かるようにする。
   **普段は使わない。** 村の進行に使うと村建て人の天の声と区別がつかなくなる */
.msg--admin {
  position: relative;
  background: var(--admin-bg);
  border: 2px solid var(--admin-bar);
  border-radius: 10px;
  color: var(--admin-text);
  margin: 18px 0 22px;
  padding: 12px 16px;
  font-weight: 600;
  display: block;
}
.msg--admin::after {
  content: ""; position: absolute; left: 28px; bottom: -10px;
  width: 16px; height: 16px; background: var(--admin-bg);
  border-right: 2px solid var(--admin-bar); border-bottom: 2px solid var(--admin-bar);
  transform: rotate(45deg);
}
.msg--admin .meta { color: var(--admin-bar); font-weight: 700; }
.msg--admin .stamp { color: var(--admin-bar); }

/* 立ち絵つきの発言。長期村は80px以上、短期村は40px程度(§1-A) */
.msg { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
/* **「秘話ログを隠す/のみ」が効いていなかった**(2026-10-01、村16のエピで指摘)。
   display: grid がブラウザ既定の [hidden]{display:none} より強く、hidden を付けても消えなかった */
#log-list [data-speech-private][hidden] { display: none !important; }
.msg--heavens { display: block; }
/* **object-fit を省くと、90×130 の絵が 80×80 に潰れる。**
   配布物をそのまま置く方針(§4-2)にしたので、器の中へ収める */
.msg .portrait { width: 80px; height: 80px; border-radius: 4px; object-fit: contain; }
.msg--dense .portrait { width: 40px; height: 40px; }

/* ---- ヘッダのログイン状態 ---- */
.site-nav { margin-left: auto; display: flex; align-items: baseline; gap: 12px; }

.btn {
  /* **下にも余白を置く。** 横並びが折り返したとき、
     margin-right だけだと2行目が上の行に貼り付く(iPhoneで露見)。
     inline-block は行間で離れないので、自分で空ける */
  display: inline-block; margin-right: 8px; margin-bottom: 8px;
  padding: 8px 18px; border-radius: 4px;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font-size: 14px;
}
.btn:hover { opacity: .9; }

/* ---- フォーム ---- */
.input {
  font: inherit; padding: 7px 10px;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--bg-card); color: var(--text);
  min-width: 16em;
  /* **画面からはみ出させない。** select は最長の選択肢に合わせて広がるため、
     長い文言の選択肢があると狭い画面で横スクロールが出る(言い回しの選択で実際に出た) */
  max-width: 100%;
  box-sizing: border-box;
}
button.btn { border: 0; cursor: pointer; font: inherit; }

.notice, .alert {
  padding: 10px 14px; border-radius: 4px; margin: 12px 0;
}
.notice { background: var(--spectate-bg); border-left: 4px solid var(--spectate-bar); color: var(--spectate-text); }
.alert  { background: var(--whisper-bg);  border-left: 4px solid var(--whisper-bar);  color: var(--whisper-text); }
/* **注意書きの中で、いちばん外せない一行**(§12-A)。
   同じ調子の文が続くと読み飛ばされる。ここだけ区切って浮かせる */
.warn-line { margin-top: 10px; padding-top: 10px; border-top: 1px solid currentColor; opacity: .95; }

h3 { font-size: 15px; margin-top: 28px; }

/* ---- 村建てフォーム ---- */
.form label { display: block; margin: 14px 0; }
.form label.inline { display: inline-block; margin-right: 16px; }
.form textarea.input { width: 100%; max-width: 36em; }
/* **長い文章を書く場所は幅を絞らない**(§A-5・2026-09-07)。
   相談の申請は3000字まで書ける。36em で頭打ちにすると、
   行数の指定と合わさってほぼ正方形になり、書きにくい */
.form--wide textarea.input { max-width: none; }

.form fieldset {
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 10px 14px; margin: 14px 0;
}
.form legend { font-size: 13px; color: var(--text-sub); padding: 0 4px; }
.field-error { color: var(--whisper-bar); font-size: 12px; margin-left: 8px; }

/* ---- ページ送り(§13-2)----
   発言の多い日だけ出る。日の切り替え(.day-nav)と見た目を揃える */
.page-nav {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
  margin: 10px 0; font-size: 13px;
}
.page-nav a, .page-nav span {
  padding: 3px 9px; border-radius: 4px; text-decoration: none;
  border: 1px solid var(--rule);
}
.page-nav a { color: var(--accent); }
.page-nav a:hover { background: var(--bg-card); }
.page-nav .current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* 行き止まりは押せないと分かる見た目にする */
.page-nav__off { color: var(--text-sub); border-color: transparent; }
.page-nav__gap { color: var(--text-sub); border-color: transparent; padding: 3px 2px; }
.page-nav .sub { border: 0; padding: 3px 0; }

/* ---- 通常発言の確認(§9-2)----
   **出る前に立ち止まらせる。** 目立たせないと素通りされ、確認の意味がない */
.preview {
  border: 2px solid var(--gold); border-radius: 6px;
  padding: 12px 16px; margin: 16px 0;
  background: var(--bg-card);
}
.preview h3 { margin-top: 0; }
/* 本文は実際の発言と同じ見た目にする。出たあとの姿と食い違わせない */
.preview-body { margin: 8px 0; }
.preview-form { margin-top: 8px; }

/* **閉じた窓を持つ人にだけ出す念押し**(§9-2・2026-09-07)。
   人狼・囁き狂人・恋人は書く先を取り違えると村がそこで終わる。
   村人にも同じ赤を出すと、赤が「いつもの飾り」になって効かなくなる。
   色は囁きの赤を借りる。明暗どちらの配色でも読める値が入っている */
.preview__warn {
  margin: 0 0 8px; padding: 8px 10px; border-radius: 4px;
  border: 1px solid var(--whisper-bar);
  background: var(--whisper-bg); color: var(--whisper-text);
}
/* 印は押す釦のすぐ上に置く。**目とゆびの動きの間に挟む** */
.preview__agree {
  display: block; margin: 8px 0; font-weight: bold;
}
.preview__agree input { margin-right: 6px; }

/* ---- 入力欄の補足テキスト ----
   **原則は入力欄の右。** 一行で収まるうちは、そのほうが縦に伸びず読みやすい。
   ただし幅の広い入力欄では補足が折り返して、入力欄の下へ回り込んだ
   中途半端な見た目になる。そういう欄では最初から下に置く。

   欄ごとに手で指定せず、**広い欄そのものを条件にする。**
   後から textarea を足したときも自動で下に付く。 */
.input + .sub { margin-left: 8px; }
.form textarea.input + .sub,
.announcement-form .input + .sub,
.sub--below { display: block; margin-left: 0; margin-top: 4px; }
.warn-head { color: var(--heavens-text); border-bottom: 2px solid var(--gold); padding-bottom: 4px; }

/* ---- 村の詳細 ---- */
.village-desc {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 4px; padding: 12px 16px;
}

/* 村の設定を参加前にもまとめて確認できる情報ページ。 */
.village-info { max-width: 860px; margin-inline: auto; }
.turnnavi { display: flex; gap: 8px; align-items: center; }
.info-section {
  margin: 18px 0;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.info-section h3 { margin: 0 0 12px; }
.info-list { margin: 0; }
.info-list > div {
  display: grid;
  grid-template-columns: minmax(9em, 28%) 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}
.info-list > div:first-child { border-top: 0; }
.info-list dt { color: var(--text-sub); font-weight: 600; }
.info-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.info-list--compact { margin-top: 12px; }
.role-composition { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 600px) {
  .info-section { padding: 14px 12px; }
  .info-list > div { grid-template-columns: 1fr; gap: 3px; }
}
.char-grid--pick .char { cursor: pointer; padding: 6px; border-radius: 6px; }
.char-grid--pick .char:hover { background: var(--bg-card); }
.char-grid--pick input[type=radio] { margin-bottom: 4px; }

.btn--quiet { background: var(--text-sub); }
/* 飛んできたとき、見出しを画面の上端に貼り付かせない(§13-1)。
   少し手前が見えるほうが、何の一覧に来たのか分かる */
#villages { scroll-margin-top: 12px; }

/* ---- ログ ---- */
.day-sep {
  font-size: 14px; color: var(--text-sub);
  border-bottom: 1px dashed var(--rule); padding-bottom: 4px; margin: 24px 0 12px;
}
.msg--deleted { color: var(--text-sub); font-style: italic; display: block; }

/* 人で絞り込む(§13-2)。**何人でも選べる畳み欄**になった(2026-09-16)。
   前の1人ずつ選ぶ枠の並べ方は、チェック欄では要らない */
.who-filter { font-size: 13px; color: var(--text-sub); }

/* まだ発言していない人(§13-2)。
   本文より控えめに、でも名前だけは読み取れるように */
.silent-note {
  font-size: 13px; color: var(--text-sub); line-height: 1.9;
  margin: 0 0 12px;
}
.silent-note strong {
  /* 名前どうしの間は、肩書きと名前の間より広く取る。
     詰めると「パン屋　オットー」が2人に見える */
  color: var(--text); font-weight: normal; margin-right: 1em;
}

/* 残喉は常に見える位置に固定する(§1-A) */
.quota-bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--gold); border-radius: 4px;
  padding: 6px 12px; margin-bottom: 12px;
}
.quota { font-size: 12px; color: var(--text-sub); }
.quota strong { font-size: 14px; color: var(--accent); margin-left: 3px; }

/* ---- 投票・能力行使 ---- */
.act-form {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 4px; padding: 10px 14px; margin-bottom: 10px;
}
.act-form label { margin: 0 0 8px; }

/* ---- 管理画面 ---- */
.admin-nav { display: flex; gap: 14px; margin: 12px 0 20px;
  border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td {
  border-bottom: 1px solid var(--rule); padding: 6px 8px; text-align: left; vertical-align: top; }
.admin-table th { color: var(--text-sub); font-weight: 600; font-size: 12px; }
.row--banned { background: var(--whisper-bg); }
.admin-ops { white-space: nowrap; }
.inline-form { display: inline-block; margin: 0 4px 4px 0; }
/* 管理画面をスマホで押すとき(2026-10-01、棚卸し)。隣のボタンを押し間違えないよう、表の中の操作は縦に並べて間を空ける */
@media (max-width: 600px) {
  body.admin .admin-table .inline-form { display: block; margin: 0 0 12px; }
  body.admin .admin-table .btn { min-height: 40px; }
  body.admin .admin-table .input--small { width: 100%; margin-bottom: 6px; }
}
/* スマホでは村の操作を縦に並べ、指で押せる大きさと間隔を取る(2026-09-30、押し間違えで村16が廃村になった件) */
@media (max-width: 700px) {
  .admin-ops { white-space: normal; }
  .admin-ops > a, .admin-ops .inline-form { display: block; margin: 0 0 12px; }
  .admin-ops .btn { min-height: 40px; }
}
.btn--small { padding: 3px 10px; font-size: 12px; }
.btn--danger { background: var(--whisper-bar); }
.input--small { width: 8em; padding: 3px 6px; font-size: 12px; min-width: 0; }

.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.stat { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 8px 14px; font-size: 12px; color: var(--text-sub); }
.stat .n { display: block; font-size: 20px; color: var(--text); }
.stat--alert { border-color: var(--whisper-bar); }
.stat--alert .n { color: var(--whisper-bar); }

/* 管理画面は横に広いので本文より広く使う */
body.admin .wrap { max-width: 1100px; }

/* ---- 法務ページ ---- */
.legal { max-width: 46em; }
.legal h2 { font-size: 19px; margin-top: 0; }
.legal h3 { font-size: 16px; margin-top: 28px; color: var(--accent); }
.legal h4 { font-size: 14px; margin-top: 20px; }
.legal h5 { font-size: 13px; margin-top: 16px; color: var(--text-sub); }
.legal p, .legal li { line-height: 1.85; }
.legal ul { padding-left: 1.4em; }
.legal hr { border: 0; border-top: 1px solid var(--rule); margin: 28px 0; }
.legal blockquote {
  margin: 16px 0; padding: 10px 16px;
  border-left: 4px solid var(--gold); background: var(--heavens-bg);
}
.legal blockquote p { margin: 4px 0; }
.legal code {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 3px; padding: 1px 5px; font-size: 13px;
}
/* 横に広い表は、本文を押し広げずに表だけスクロールさせる */
.table-wrap { overflow-x: auto; margin: 12px 0; }
.legal table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.legal th, .legal td {
  border: 1px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top;
}
.legal th { background: var(--bg-card); white-space: nowrap; }
.admin-nav a.current { font-weight: 700; color: var(--text); }

/* ---- 恋文(ピンクログ・§7-5)---- */
.lovers-box {
  background: var(--lovers-bg);
  border: 1px solid var(--lovers-bar); border-radius: 6px;
  padding: 12px 16px; margin-bottom: 16px; color: var(--lovers-text);
}
.lovers-box .sub { color: var(--lovers-sub); }
.msg--lovers {
  background: var(--lovers-bg); border-left: 4px solid var(--lovers-bar); color: var(--lovers-text);
}
/* アクションは地の文として、発言と区別する(§9-4) */
.msg--action {
  background: transparent; border: 0; border-left: 3px solid var(--mono-bar);
  color: var(--text-sub); font-style: italic; padding: 4px 12px;
}
/* 見学者のアクション(086)。地の文の形のまま、見学の色で分ける */
.msg--spectator-action {
  background: var(--spectate-bg); border: 0; border-left: 3px solid var(--spectate-bar);
  color: var(--spectate-text); font-style: italic; padding: 4px 12px;
}
/* 墓場のアクション(2026-09-27)。地の文の形のまま、墓下の色で分ける */
.msg--grave-action {
  background: var(--grave-bg); border: 0; border-left: 3px solid var(--grave-bar);
  color: var(--grave-text); font-style: italic; padding: 4px 12px;
}

/* ---- トップのバナー ---- */
.hero { margin: 0 0 18px; }
.hero img {
  display: block; width: 100%; height: auto;
  border-radius: 6px;
  /* 生成りの背景から浮かせず、金の細い縁で額装する */
  border: 1px solid var(--gold);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  background: var(--bg-card);
}
.lead { margin: 0 0 16px; }
.lead .sub { display: inline-block; margin-left: 4px; }
.btn--lead { padding: 10px 24px; font-size: 15px; }

/* 画面が狭いときは余白を詰め、バナーを目一杯使う */
@media (max-width: 600px) {
  .hero { margin: 0 -12px 14px; }
  .hero img { border-radius: 0; border-left: 0; border-right: 0; }
}


/* ---- ログの見出しと更新 ---- */
.log-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.log-head h3 { margin-right: auto; }

/* 入力中の消費量。上限を超えたら赤くして、送る前に気づけるようにする */
#say-count.over { color: var(--whisper-bar); font-weight: 700; }

/* 発言に添える管理操作。本文の流れを崩さないよう meta の右端へ */
.mod-form { display: inline-flex; gap: 4px; align-items: center; margin-left: 8px; }
.input--tiny { width: 6em; padding: 2px 5px; font-size: 11px; min-width: 0; }

/* ---- ルール・遊び方 ---- */
.hero--rule { max-width: 300px; margin: 0 0 12px; }
.hero--rule img { width: 100%; height: auto; border-radius: 8px; }

.toc {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 6px; padding: 12px 16px; margin: 16px 0 24px;
  font-size: 14px;
}

/* ---- 初めての方向けのマンガ(§13-4・2026-09-07)----
   **ルールは文字だけで長い。** 数字の出どころを rules/*.json に
   縛っている以上あの密度は下げられないので、軽い入口を別に置く */

/* ルール頁からマンガへ送る一行。**本文より先に目に入る位置に置く** */
.guide-lead {
  margin: 12px 0 20px; padding: 10px 14px;
  border-left: 4px solid var(--gold);
  background: var(--bg-card); border-radius: 0 6px 6px 0;
}

/* 目次は8つ並ぶので、狭い画面では縦に積ませる */
.toc--guide { font-size: 13px; gap: 6px 14px; }

.manga { margin: 8px 0 32px; }
.manga__page { margin: 0 0 28px; }
/* **原寸は1400px幅で、本文カラム(880px)より大きい。**
   縮めて置き、携帯で広げたときに字がつぶれないだけの画素を持たせる */
.manga__page img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--bg-card);
}
.manga__page figcaption {
  margin-top: 6px; font-size: 13px; color: var(--text-sub); text-align: center;
}
/* 目次から飛んだとき、ヘッダの下に潜り込ませない */
.manga__page { scroll-margin-top: 16px; }

.guide-next {
  border: 1px solid var(--rule); border-radius: 6px;
  background: var(--bg-card); padding: 12px 16px; margin: 24px 0;
}
.guide-next h3 { margin-top: 0; }

.rule-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0 20px; }
.rule-table th, .rule-table td {
  border: 1px solid var(--rule); padding: 6px 10px; text-align: left; vertical-align: top;
}
.rule-table th { background: var(--bg-card); font-weight: 600; }
/* 配役表は数字を読み比べるため、桁を揃えて中央に置く */
.rule-table--comp td { text-align: center; font-variant-numeric: tabular-nums; }
.rule-table--comp th { white-space: nowrap; }
/* 横に長い表は表の中だけを流す。本文ごと横スクロールさせない */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.steps { padding-left: 1.4em; }
.steps li { margin-bottom: 10px; }

.glossary { margin: 12px 0 20px; }
.glossary dt { font-weight: 700; margin-top: 10px; }
.glossary dd { margin: 2px 0 0 1.2em; color: var(--text-sub); }

/* ---- トップの導線 ---- */
.entry-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 18px 0 28px; }
.entry-row__text { flex: 1 1 300px; }
.rule-banner img {
  width: 300px; max-width: 100%; height: auto;
  border: 1px solid var(--rule); border-radius: 8px; display: block;
}
.rule-banner:hover img { border-color: var(--accent); }
.header-link { margin-left: 14px; font-size: 13px; }

/* ---- 連携アカウント ---- */
.identity-list { list-style: none; padding: 0; }
.identity-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--rule); }

/* ---- 立ち絵の管理 ---- */
.char-admin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin: 16px 0;
}
.char-admin {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 6px; padding: 10px; font-size: 12px;
}
.char-admin img { width: 100%; height: auto; border-radius: 4px; display: block; }
.char-admin label { margin: 6px 0 0; display: block; }
.char-admin .input { font-size: 12px; padding: 3px 6px; }
/* 使わない設定のものは薄くする。消せない代わりに一目で区別できるように */
.char-admin--off { opacity: .55; }
.char-admin--new { border-style: dashed; }
.char-admin__blank {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px dashed var(--rule); border-radius: 4px;
  color: var(--text-sub);
}
.admin-details { margin: 12px 0 20px; }
.admin-details summary { cursor: pointer; color: var(--accent); }
.filter-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filter-form label { margin: 0; }
.current-row { background: var(--bg-card); }

/* ---- マイページ・戦歴(§3-2)---- */
/* 中の人の開示(§3-1)。エピローグ以降とID公開村でだけ出る */
.char .who { font-size: 11px; margin-top: 3px; line-height: 1.4; }
.char .who .sub { display: block; }

/* ---- 飴(§9-3)---- */
/* 墓場の人が生存者を後押しする。選ぶ相手が一目で分かるよう立ち絵を並べる */
.candy-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px; margin: 12px 0 20px;
}
.candy {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 6px; padding: 8px; text-align: center; font-size: 12px;
}
.candy img { width: 100%; height: auto; border-radius: 4px; display: block; }
.candy .name { margin: 4px 0; line-height: 1.3; }

/* ---- 見学者(§11)---- */
/* 遊んでいる人と混ぜない。誰が村人か分からなくなる */
.char--spectator { opacity: .8; }
.char--spectator .title { color: var(--spectate-text); }

/* 新着があることを目立たせる。押すと最新まで読み込む(§13-3) */
.btn--alert { background: var(--accent); }

/* ---- セットした相手を目立たせる(短期村の通しで「セットミスに気づけない」との指摘)---- */
.input--set { background: var(--set-bg); border-color: var(--gold); font-weight: 700; }
.act-form--set { border-color: var(--gold); }

/* ---- 発言の連番とアンカー(§9-1)---- */
/* 番号はアンカー(>>3)で指す先。押すとその発言へ飛ぶ */
.seq {
  font-variant-numeric: tabular-nums;
  color: var(--text-sub); font-size: 11px;
  margin-right: 6px; text-decoration: none;
}
.seq:hover { text-decoration: underline; }
.anchor { font-weight: 600; }
/* 見えない先。押せないことが分かるように色を落とす */
.anchor--dead { color: var(--text-sub); text-decoration: line-through; cursor: not-allowed; }
/* 飛んできた発言を一瞬だけ目立たせる */
:target.msg, :target.msg--heavens, :target.msg--admin { outline: 2px solid var(--gold); }

/* アンカー先を、いま読んでいる位置を保ったまま前面で読む。 */
.anchor-preview {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .62);
}
.anchor-preview[hidden] { display: none; }
.anchor-preview__panel {
  width: min(720px, 100%); max-height: min(76vh, 720px);
  overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--rule); border-radius: 8px;
  background: var(--bg); color: var(--text);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .55);
}
.anchor-preview__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border-bottom: 1px solid var(--rule);
  background: var(--bg-card);
}
.anchor-preview__close {
  border: 0; padding: 3px 7px; background: transparent;
  color: var(--link); text-decoration: underline; cursor: pointer;
}
.anchor-preview__body { padding: 12px; }
.anchor-preview__body > .msg,
.anchor-preview__body > .msg--heavens,
.anchor-preview__body > .msg--admin { margin: 0; }
.anchor-preview__message { scroll-margin-top: 48px; }
@media (max-width: 600px) {
  .anchor-preview { padding: 8px; align-items: center; }
  .anchor-preview__panel { max-height: 86vh; }
  .anchor-preview__body { padding: 8px; }
}

/* 1日ごとのページ(§13-2) */
.day-nav {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px;
}
.day-nav a {
  padding: 3px 12px; border: 1px solid var(--rule); border-radius: 999px;
  font-size: 13px; text-decoration: none; background: var(--bg-card);
}
.day-nav a.current { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---- コミット(§10)---- */
.commit-box {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 6px; padding: 12px 16px; margin: 12px 0 20px;
}
/* 全員そろったことが一目で分かるように */
.commit-box--ready { border-color: var(--gold); background: var(--ready-bg); }
/* ルールページのアンカーの例 */
.rule-table code { background: var(--bg-card); padding: 1px 5px; border-radius: 3px; }
/* 種別の絞り込み。日のリンクと区別する(§13-2) */
.day-nav--type a { font-size: 12px; }

/* ---- 上に戻るボタン ---- */
/* このサイトは縦に長い。ログインや村の切り替えは上端にあるため、
   読み進めたあとに戻る手間が出る */
/* 上下のボタンを縦に積む。位置決めは入れ物側に持たせる */
.jump-btns {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
}
.to-top {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg-card);
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.to-top:hover  { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.to-top[hidden] { display: none; }

@media (max-width: 600px) {
  /* 親指の届く位置に置きつつ、発言ボタンと重ならない高さにする */
  .jump-btns { right: 12px; bottom: 12px; gap: 6px; }
  .to-top { width: 42px; height: 42px; }

  /* **狭い画面では、どの補足も入力欄の下。**
     横に並べる余地がなく、並べると必ず折り返して読みにくくなる */
  .input + .sub { display: block; margin-left: 0; margin-top: 4px; }
}

/* ---- 折りたたみの手引き ---- */
.help {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: 6px; padding: 10px 16px; margin: 8px 0 16px;
}
.help summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.help[open] summary { margin-bottom: 8px; }


/* 「端末の設定に従う」を選んだとき(data-theme を書かない)は、
   ブラウザの指示に合わせる。JavaScript を使わずに済ませるための仕組み */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg:          #1C1A18;
    --bg-card:     #26231F;
    --text:        #E8E3D8;
    --text-sub:    #A9A398;
    --rule:        #3A362F;
    --accent:      #D98098;
    --gold:        #D9A24A;
    --on-accent:   #1C1A18;

    --whisper-bg:   #3A2222; --whisper-bar:   #D96A6A; --whisper-text:   #F2C7C7;
  --redwin-bg:    #4E1717; --redwin-bar:    #E5484D; --redwin-text:    #FAD4D4;
    --grave-bg:     #23233A; --grave-bar:     #8F87E0; --grave-text:     #CFCBF2;
    --mono-bar:     #5A564E; --mono-text:     #A9A398;
    --mono-bg:      #2B2925;
    --spectate-bg:  #22301C; --spectate-bar:  #8CC65A; --spectate-text:  #CFE6B8;
    --heavens-bg:   #33291A; --heavens-text:  #E8C88A; --heavens-sub:    #C4A469;
    --admin-bg:     #2A2438; --admin-bar:     #A98FD9; --admin-text:     #D6C9F0;
    --lovers-bg:    #33202B; --lovers-bar:    #D97FAE; --lovers-text:    #F0C4DA;
    --lovers-sub:   #C79AB4;
    --resonance-bg: #1A2F28; --resonance-bar: #4CC39A; --resonance-text: #BFE9D8;
    --set-bg:       #3A3120; --ready-bg:      #302A1E;
  }
  :root:not([data-theme]) .msg .portrait,
  :root:not([data-theme]) .char img { filter: brightness(.92); }
  :root:not([data-theme]) .to-top { box-shadow: none; border-color: var(--text-sub); }
}

/* ---- 暗い配色での細かい調整 ---- */
/* 立ち絵は明るい背景を想定して描かれている。暗い画面でまぶしくならないよう少し落とす */
:root[data-theme="dark"] .msg .portrait,
:root[data-theme="dark"] .char img { filter: brightness(.92); }
/* 上に戻るボタンの影は、暗い背景では見えないので輪郭で示す */
:root[data-theme="dark"] .to-top { box-shadow: none; border-color: var(--text-sub); }
/* 村を去った人。発言は残るが、いま村にはいない(§5-2) */
.char--left { opacity: .5; }
.char--left .title { color: var(--text-sub); }

/* キャラクターセットの紹介(§4) */
.char-set { margin: 0 0 32px; }
.char-set h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.char-set h3 .sub { font-weight: normal; }
/* 作者の紹介。**本文より一段引いて置く。** 主役は立ち絵のほう */
.char-set__author {
  border-left: 3px solid var(--gold);
  padding: 8px 12px; margin: 12px 0; background: var(--bg-card);
}
.char-set__by { margin: 0 0 4px; }
.char-set__links { margin: 8px 0 0; display: flex; gap: 12px; flex-wrap: wrap; }

/* 選べる1日の長さ(§10-1)。TOPで一覧を見せる。
   **村の一覧を押し下げないよう、詰めて置く**(§13-1 で村が主役) */
.day-lengths { margin: 20px 0; }
.day-lengths h2 { margin-bottom: 4px; }
.day-lengths__list {
  display: grid; grid-template-columns: auto 1fr;
  gap: 4px 10px; align-items: baseline; margin: 8px 0;
}
.day-lengths__list dt {
  font-size: 12px; color: var(--text-sub); white-space: nowrap;
}
.day-lengths__list dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }

/* 立ち絵の入口(§4-2)。TOPで、誰の絵が入っているかを見せる */
.char-sets-home { margin: 20px 0; }
.char-sets-home__list {
  list-style: none; padding: 0; margin: 8px 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px;
}
.char-sets-home__list li { text-align: center; }
.char-sets-home__list a { display: block; text-decoration: none; }
.char-sets-home__list img {
  width: 72px; height: 72px; object-fit: contain;
  border: 1px solid var(--rule); border-radius: 6px; background: var(--bg-card);
}
.char-sets-home__name { display: block; font-size: 13px; margin-top: 2px; }
.char-sets-home__list .sub { font-size: 11px; }

/* 村の札に出す立ち絵のセット(§13-1)。**絵柄で村を選べるように。**
   他の札と見分けがつくよう、少しだけ色を変える */
.badge--chip { border-color: var(--accent); color: var(--accent); }

/* ---- 誰として書くか(§4)----
 * **書き込み欄のすぐ上に置く。** 村が長くなると自分のキャラを忘れる。
 * 名簿まで戻らずに、書く直前の位置で確かめられるようにするためのもの
 */
.say-as {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 8px; padding: 8px 12px;
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 4px; background: var(--bg-card);
}
.say-as .portrait { width: 80px; height: 80px; border-radius: 4px; object-fit: contain; }
.say-as__name { font-weight: 700; }
.say-as__pic { display: inline-flex; }
/* **display を指定したら hidden も指定し直す。**
   display: inline-flex はブラウザ既定の [hidden]{display:none} より強く、
   これを書かないと種別ぶんの絵が全部並ぶ */
.say-as__pic[hidden] { display: none; }

/* 確認欄でも同じ姿を出す。本文だけだと、どのキャラの喉から出るのか分からない */
.preview-body { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.preview-body .portrait { width: 80px; height: 80px; border-radius: 4px; object-fit: contain; }
.preview-body .meta { font-size: 12px; color: var(--text-sub); margin-bottom: 4px; }

/* 能力の結果は、その日のログの中に混ぜる。天の声より控えめにして、
   人の発言の流れを断ち切らないようにする */
.result-line { margin: 12px 0; font-weight: 400; }

/* 終了後のログを、知っている人には馴染み深く、初見にも意味が伝わる形で読む */
.log-replay {
  margin: 12px 0 16px; padding: 12px;
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 5px; background: var(--bg-card);
}
.log-replay__head { display:flex; gap:8px 14px; align-items:baseline; flex-wrap:wrap; margin-bottom:8px; }
.viewpoint-nav { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.viewpoint-nav a {
  padding:5px 10px; border:1px solid var(--rule); border-radius:999px;
  text-decoration:none; background:var(--bg-card);
}
.viewpoint-nav a.current { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.log-type-checks { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:8px; }
.log-type-checks label { white-space:nowrap; }

/* 赤ずきんID(§12-A)。**書き写す場面があるので、字を大きく離して出す** */
.identity-now {
  font-size: 22px; font-weight: 700; letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  margin: 6px 0 10px;
}
.id-change { font-size: 17px; margin: 8px 0 12px; }
.id-change .sub { font-size: 12px; }

/* 赤ずきんIDと表示名の役割を並べる(§12-A)。
   **別々の場所に書いていたので、どちらがどこに出るのか分からなくなった。**
   一度に見比べられる形にする */
.name-roles { border-collapse: collapse; margin: 10px 0 14px; font-size: 14px; }
.name-roles th, .name-roles td {
  border: 1px solid var(--rule); padding: 6px 12px; text-align: left; vertical-align: top;
}
.name-roles tr:first-child th { background: var(--bg-card); text-align: center; }
.name-roles th { color: var(--text-sub); font-weight: 400; white-space: nowrap; }
.name-roles td:first-of-type { background: var(--bg-card); }
@media (max-width: 600px) {
  .name-roles { font-size: 13px; }
  .name-roles th, .name-roles td { padding: 5px 8px; }
}

/* いま誰として入っているか(§12-A)。書き込み欄の見出しに添える。
   **共有の機械では、前の人のまま書いてしまう事故が起きる** */
.say-who { margin-left: 10px; font-weight: 400; }

/* 村建ての立ち絵: 選んだセットの顔ぶれ(2026-09-19)。横に流して見比べる */
.set-row__strip {
  display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 8px;
  max-width: 100%; -webkit-overflow-scrolling: touch;
}
.set-row__strip img {
  flex: 0 0 auto; height: 72px; width: auto; border-radius: 3px;
}

/* 村建ての立ち絵: セットをカードから選ぶ(2026-09-19)。60を超えたのでプルダウンをやめた */
.setpick__bar { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 6px 0; }
.setpick__bar input[type="search"] { flex: 1 1 220px; }
.setpick__count { margin: 0; flex-basis: 100%; font-weight: 700; color: var(--accent); }
.setpick__list {
  list-style: none; margin: 0; padding: 4px; display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  max-height: 60vh; overflow-y: auto; border: 1px solid var(--rule); border-radius: 6px;
}
.setcard {
  border: 1px solid var(--rule); border-radius: 6px; padding: 6px 8px; background: var(--bg-card);
}
.setcard.is-on { border-color: var(--accent); }
.setcard.is-main { box-shadow: 0 0 0 2px var(--accent) inset; }
.setcard__check { display: block; cursor: pointer; }
.setcard__name { font-weight: 700; }
.setcard__meta { display: block; }
.setcard__thumbs { display: flex; gap: 3px; margin: 4px 0; min-height: 56px; }
.setcard__thumbs img { height: 56px; width: auto; border-radius: 3px; }
.setcard__main { font-size: 13px; }
.setcard:not(.is-on) .setcard__main { opacity: .5; }
.setcard__more summary { cursor: pointer; }

/* キャラクターを選ぶ部品(2026-09-19)。セットごとに畳み、開いた分だけ読む */
.charpick__bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0; }
.charpick__bar input[type="search"] { flex: 1 1 220px; }
.charpick__buttons .is-on, .charpick__buttons [aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.charpick__set { border: 1px solid var(--rule); border-radius: 6px; margin: 4px 0; background: var(--bg-card); }
.charpick__set > summary { cursor: pointer; padding: 6px 8px; }
.charpick__set[open] > summary { border-bottom: 1px solid var(--rule); }
.charpick__set .char-grid { padding: 6px; }
/* **選ぶ丸と ♡☆ を重ねない**(2026-09-30、がるさんの指摘)。丸は上の真ん中、♡☆は右上に
   重ねて置いていたため、96px の枠では ♡ の下に丸が隠れた。上に1段ぶん空け、丸を左上・♡☆を右上に分ける */
.charpick label.char { position: relative; padding-top: 36px; }
.charpick label.char > input[type=radio] { position: absolute; top: 11px; left: 8px; margin: 0; width: 18px; height: 18px; }
.charpick__marks { position: absolute; top: 6px; right: 4px; display: flex; gap: 4px; }
.charpick__marks button {
  border: 1px solid var(--rule); background: var(--bg); color: var(--accent);
  border-radius: 999px; width: 26px; height: 26px; line-height: 1; padding: 0; cursor: pointer; font-size: 14px;
}
.charpick__marks button.is-on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.charpick__tray { border: 1px dashed var(--accent); border-radius: 6px; padding: 6px; margin: 6px 0; }
.charpick__tray-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.charpick__tray-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 84px;
  border: 1px solid var(--rule); background: var(--bg); border-radius: 6px; padding: 4px; cursor: pointer; font-size: 11px;
}
.charpick__tray-item img { height: 64px; width: auto; }
.charpick__legend { margin: 2px 0 6px; line-height: 1.6; }
.charpick__chosen { min-height: 1.2em; font-weight: 700; color: var(--accent); }

/* アンカーを発言欄へ入れる(2026-09-19)。発言欄がある人にだけ出す */
.anchor-insert { display: none; }
.can-anchor .anchor-insert {
  display: block; margin: 4px 0 0 auto; padding: 1px 8px;
  font-size: 12px; line-height: 1.6; color: var(--text-sub);
  background: transparent; border: 1px solid var(--rule); border-radius: 10px; cursor: pointer;
}
.can-anchor .anchor-insert:hover { color: var(--text); border-color: currentColor; }
.anchor-insert--done::after { content: " ✓"; }

/* 表情を選ぶ(2026-09-19)。立ち絵の名前の下に小さく置く */
.say-as__face { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.say-as__face .input { width: auto; padding: 2px 6px; font-size: 13px; }

/* 外のサイトへ移る前の一枚(2026-09-20) */
.leave-to { margin: 1em 0; padding: .8em 1em; border: 1px solid var(--rule); border-radius: 8px; background: var(--bg-card); }
.leave-to__host { font-size: 1.15em; font-weight: 700; }
.leave-to__url { margin-top: .2em; font-size: .9em; color: var(--text-sub); word-break: break-all; }

/* エピローグ中の村(2026-09-22)。外から見て「もう終わった」が分かるように */
.badge--settled { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* **押せる広さを確保する**(2026-09-22、レビュー指摘)。スマホで見出しや足元のリンクが
   高さ14〜22pxしかなく、指で押しにくかった。見た目の文字の大きさは変えず、押せる範囲だけ広げる。
   目安は最低24px、なるべく44px(指先の大きさ) */
.site-nav a, .site-footer a { display: inline-block; min-height: 24px; line-height: 24px; padding: 4px 2px; }
@media (max-width: 600px) {
  .site-nav a, .site-footer a { min-height: 32px; line-height: 32px; padding: 6px 4px; }
  .btn--small { min-height: 44px; }
}

/* TOPの入口(2026-09-22)。2列2段。上の段が「村一覧を見る・参加する」「ルール・遊び方を読む」 */
.entry-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.entry-buttons .btn { text-align: center; justify-content: center; }
/* 札の中の案内リンク(短期村の「昼夜のターンはありません」) */
.badge--link { text-decoration: none; }
.badge--link:hover { text-decoration: underline; }

/* 表で話せる時間帯の選択(2026-09-22)。「〜から〜まで」を1行に */
.speak-hours { border: 0; padding: 0; margin: 12px 0 0; }
.speak-hours legend { padding: 0; margin-bottom: 4px; }
.speak-hours .input { width: auto; display: inline-block; }

/* 日程のカレンダー(2026-09-23)。休みの曜日の村を建てる前に見通す。
   スマホでは表を横に流す(7列を潰さない) */
.sched { margin: 12px 0 20px; }
.sched__summary { margin: 0 0 8px; }
.sched__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sched__cal { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 13px; }
@media (max-width: 520px) { .sched__cal { font-size: 11px; } .sched__day { height: 54px; padding: 2px; } }
.sched__cal th { font-weight: 700; padding: 4px; text-align: center; color: var(--text-sub); }
.sched__cal th.sched__we { color: var(--accent); }
.sched__day { vertical-align: top; height: 62px; padding: 3px 4px; border: 1px solid color-mix(in srgb, var(--text-sub) 25%, transparent); }
.sched__day--rest { background: color-mix(in srgb, var(--text-sub) 14%, transparent); }
.sched__day--before { opacity: .45; }
.sched__day--end { outline: 2px solid var(--gold); outline-offset: -2px; }
.sched__date { display: block; font-size: 11px; color: var(--text-sub); }
.sched__rest { display: inline-block; font-size: 11px; color: var(--text-sub); font-weight: 700; }
.sched__ev { display: block; font-weight: 700; color: var(--accent); line-height: 1.3; }
.sched__ev b { white-space: nowrap; }
.sched__end { display: block; font-size: 11px; font-weight: 700; color: var(--heavens-text); background: var(--heavens-bg); border-radius: 3px; padding: 0 3px; margin-top: 2px; }
.sched__legend { margin-top: 4px; }
.sched__long-head { margin: 12px 0 4px; }
.sched__long { margin: 0 0 8px; padding-left: 1.2em; }
.sched__tip { margin: 8px 0; }

/* TOPの遊び方(2026-09-23)。短期と長期を並べる。スマホでは縦に積む */
.ways { margin: 24px 0; }
.ways__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .ways__grid { grid-template-columns: 1fr; } }
.ways__item { background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--text-sub) 25%, transparent); border-radius: 8px; padding: 12px 14px; }
.ways__item h3 { margin: 0 0 6px; font-size: 1rem; }
.ways__item p { margin: 0 0 6px; }
.ways__item ul { margin: 4px 0 6px; padding-left: 1.2em; }
.footer-font { margin: 8px 0 0; }

/* 企画wiki(2026-09-23)。色はサイトの色の名前だけを使い、ライト/ダークに従う */
.plans__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 20px; }
.plans__table td { vertical-align: top; }
.plans__closed { opacity: .6; }
.plans__meta { margin: 8px 0 16px; }
.plans__body { background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--text-sub) 25%, transparent); border-radius: 8px; padding: 12px 16px; margin: 0 0 12px; overflow-wrap: anywhere; }
.plans__entries { margin: 24px 0; }
.plans__entries ol { padding-left: 1.4em; }
.plans__manage { margin: 24px 0; }
.plans__tpl { background: var(--bg-card); border: 1px solid color-mix(in srgb, var(--text-sub) 25%, transparent); border-radius: 6px; padding: 10px 12px; white-space: pre-wrap; font-size: 13px; overflow-x: auto; }
.plans__co td:first-child { width: 3em; text-align: center; color: var(--text-sub); }
.plans__co-empty td { height: 1.8em; }
.plans__caps { display: flex; flex-wrap: wrap; gap: 16px; }
.plans__comments { margin: 32px 0 24px; }
.plans__comment { border-top: 1px solid color-mix(in srgb, var(--text-sub) 25%, transparent); padding: 8px 0; overflow-wrap: anywhere; }
.plans__comment--hidden { opacity: .5; }
.plans__preview { border: 2px dashed var(--gold); border-radius: 8px; padding: 10px 14px; margin: 0 0 20px; }
.plans__buttons { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.setcard__note { margin: .25em 0; }

/* 発言欄の本文の窓を、選んでいる種別の色にする(2026-10-01)。ログの色と同じ組み合わせ */
#say-body[data-say-type="monologue"]    { background: var(--mono-bg);      border-color: var(--mono-bar);      color: var(--mono-text); }
#say-body[data-say-type="whisper"]      { background: var(--redwin-bg);    border-color: var(--redwin-bar);    color: var(--redwin-text); }
#say-body[data-say-type="grave"],
#say-body[data-say-type="grave_action"] { background: var(--grave-bg);     border-color: var(--grave-bar);     color: var(--grave-text); }
#say-body[data-say-type="spectator"],
#say-body[data-say-type="spectator_action"] { background: var(--spectate-bg);  border-color: var(--spectate-bar);  color: var(--spectate-text); }
#say-body[data-say-type="lovers"],
#say-body[data-say-type="lovers_action"]{ background: var(--lovers-bg);    border-color: var(--lovers-bar);    color: var(--lovers-text); }
#say-body[data-say-type="resonance"]    { background: var(--resonance-bg); border-color: var(--resonance-bar); color: var(--resonance-text); }
#say-body[data-say-type="heavens_voice"]{ background: var(--heavens-bg);   border-color: var(--heavens-sub);   color: var(--heavens-text); }
#say-body[data-say-type="admin_voice"]  { background: var(--admin-bg);     border-color: var(--admin-bar);     color: var(--admin-text); }
#say-body[data-say-type="action"]       { font-style: italic; border-left: 3px solid var(--mono-bar); }
#say-body[data-say-type]:not([data-say-type="normal"]):not([data-say-type="action"]) { border-width: 2px; }

/* 管理画面の取り返しのつかない操作(2026-10-01)。畳んでおき、開いてから押す */
.admin-danger { margin-top: 6px; }
.admin-danger > summary { cursor: pointer; font-size: 12px; color: var(--whisper-bar); }
.admin-danger form { margin-top: 6px; display: grid; gap: 6px; justify-items: start; }

/* プロローグの見学の入口は畳む(2026-10-01)。参加の欄を下へ押し出さない */
.spectate-entry > summary { list-style: none; cursor: pointer; display: inline-block; margin: 6px 0; }
.spectate-entry > summary::-webkit-details-marker { display: none; }

/* 畳める欄(2026-10-01)。見出しをそのまま押して開け閉めする */
details.fold > summary { list-style: none; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary h3 { display: inline-block; margin-right: 6px; }
details.fold > summary::after { content: '▸ 開く'; font-size: 12px; color: var(--text-sub); }
details.fold[open] > summary::after { content: '▾ 畳む'; }

/* 用語の「？」(2026-10-01)。押すと説明が出る。読む邪魔をしない小ささ */
.term-q {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 4px; padding: 0; vertical-align: middle;
  font-size: 11px; font-weight: 700; line-height: 1; border-radius: 50%;
  border: 1px solid var(--rule); background: var(--bg-card); color: var(--accent); cursor: pointer;
}
.term-pop {
  max-width: min(360px, calc(100vw - 32px)); padding: 10px 12px; margin: auto;
  font-size: 14px; font-weight: 400; line-height: 1.6; text-align: left;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--bg); color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.term-pop a { margin-left: 4px; }

/* エピローグの発言に添える赤ずきんID(2026-10-01) */
.epi-id { margin-left: 4px; font-size: 12px; color: var(--text-sub); }

/* 日の頭の「昨夜のこと」(2026-10-03、瓜科国に倣う)。票・処刑・襲撃の一言・結果・襲撃の結果を1つの枠に。
   中の天の声の吹き出しは尻尾と余白を落として、行として詰めて並べる */
.night-head {
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: var(--bg-card);
  padding: 8px 10px;
  margin: 10px 0 18px;
}
.night-head > .msg--heavens { margin: 6px 0; }
.night-head > .msg--heavens::after { display: none; }
.night-head > .msg { margin: 6px 0; }

.say-as__role { margin-top: 4px; }
.say-as__role .fate { position: static; display: inline-block; margin-left: 6px; }

/* 陣営別・役職別の勝率(2026-10-03)。狭い画面では縦に並ぶ */
.winrate { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.winrate .admin-table { width: auto; min-width: 220px; }

/* 管理者の「全ログ(管理)」の帯(2026-10-04)。使っている間は目立たせ続ける */
.admin-all-bar { background: var(--whisper-bg); border: 2px solid var(--whisper-bar); color: var(--whisper-text);
  border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.admin-all-bar .btn { margin-left: 8px; }
.admin-all-link { margin: 4px 0; }