/* 「赤ずきんちゃんご用心」基本スタイル
 *
 * 仕様§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;
  --grave-bg:     #EEEDFE; --grave-bar:     #534AB7; --grave-text:     #26215C;
  --mono-bar:     #B4B2A9; --mono-text:     #5F5E5A;
  --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;
  --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;
  --grave-bg:     #23233A; --grave-bar:     #8F87E0; --grave-text:     #CFCBF2;
  --mono-bar:     #5A564E; --mono-text:     #A9A398;
  --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;
  --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; }

/* ---- 管理人からのお知らせ ---- */
.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); }
.announcement-body { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 7px; }
.announcement-form .input { width: 100%; max-width: 48em; }
.announcement-admin { margin: 10px 0; }
.announcement-admin summary { cursor: pointer; }

/* 村の属性を並べる。参加前の判断材料をすべて出す(§13-1) */
.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);
}
/* ID公開村・メタあり村は通常村と視覚的に区別する(§12-A) */
.badge--warn { border-color: var(--gold); background: var(--heavens-bg); color: var(--heavens-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 属性(256)が残って縦長に潰れる */
  width: 100%; height: auto; max-width: 96px; aspect-ratio: 1 / 1; object-fit: cover;
  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; }
.char .title { font-size: 12px; color: var(--text-sub); }

.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行ぶん空く(テスト村で指摘があった) */
.body { white-space: pre-wrap; word-break: break-word; }
.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(--whisper-bg);  border-left: 4px solid var(--whisper-bar);  color: var(--whisper-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); }
.msg--monologue { background: transparent;        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; }
.msg--heavens { display: block; }
.msg .portrait { width: 80px; height: 80px; border-radius: 4px; }
.msg--dense .portrait { width: 40px; height: 40px; }

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

.btn {
  display: inline-block; margin-right: 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); }

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; }
.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; }

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

   欄ごとに手で指定せず、**広い欄そのものを条件にする。**
   後から 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;
}
.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); }

/* ---- ログ ---- */
.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; }

/* 残喉は常に見える位置に固定する(§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; }
.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;
}

/* ---- トップのバナー ---- */
.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;
}

.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); }

/* 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; }

/* ---- 上に戻るボタン ---- */
/* このサイトは縦に長い。ログインや村の切り替えは上端にあるため、
   読み進めたあとに戻る手間が出る */
.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  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);
  z-index: 20;
}
.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) {
  /* 親指の届く位置に置きつつ、発言ボタンと重ならない高さにする */
  .to-top { right: 12px; bottom: 12px; 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;
    --grave-bg:     #23233A; --grave-bar:     #8F87E0; --grave-text:     #CFCBF2;
    --mono-bar:     #5A564E; --mono-text:     #A9A398;
    --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;
    --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); }