/* 夜更けの人狼 — 見た目
 *
 * 全画面固定にしない。普通にスクロールするページの中の箱で、重なる UI は箱の中に absolute。
 * 夜の村を背にした卓。象牙を文字に、くすんだ金を罫に、深い紅を «押す場所» にだけ使う（灯火の人狼と同じ配色）
 */

[hidden] { display: none !important; }
/* 言語。要らないほうを最初から伏せる（<head> の先読みが <html lang> を先に立てる） */
html[lang="ja"] [lang="en"],
html[lang="en"] [lang="ja"] { display: none !important; }

:root {
  --night: #0b0c16;
  --panel: rgba(19, 19, 34, .9);
  --ink: #efe6cf;
  --dim: #a6a1b3;
  --hair: rgba(201, 169, 110, .24);
  --hair2: rgba(201, 169, 110, .5);
  --gold: #c9a96e;
  --gold2: #e6cf9a;
  --crimson: #8e2536;
  --crimson2: #c23b4f;
  --serif: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --r: 12px;
  --cw: clamp(30px, 4.3vw, 46px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(900px 480px at 78% -8%, rgba(243, 233, 207, .07) 0%, transparent 60%),
    radial-gradient(1200px 700px at 50% 120%, rgba(142, 37, 54, .12) 0%, transparent 60%),
    var(--night);
  color: var(--ink);
  font: 14px/1.7 system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-text-size-adjust: 100%;
}

#app { max-width: 1240px; margin: 0 auto; padding: 0 16px 56px; }
button { font: inherit; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }

/* ── ヘッダー ───────────────────────────────── */

#site-header { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.apps-link { color: var(--dim); text-decoration: none; font-size: 12px; padding: 5px 10px; border: 1px solid var(--hair); border-radius: 999px; white-space: nowrap; }
.apps-link:hover { color: var(--ink); border-color: var(--hair2); }
.header-logo { margin: 0; font: 700 20px var(--serif); letter-spacing: .08em; flex: 1; min-width: 0; }
.header-logo a { color: inherit; text-decoration: none; display: inline-block; padding: 5px 0; }
.header-sub { font: 500 12px var(--serif); letter-spacing: .1em; color: var(--dim); margin-left: 8px; }
#sound-btn { background: none; border: 1px solid var(--hair); border-radius: 999px; padding: 5px 12px; color: var(--dim); font-size: 12px; cursor: pointer; white-space: nowrap; min-height: 32px; }
#sound-btn:hover { border-color: var(--hair2); color: var(--ink); }
.langbar { display: inline-flex; gap: 4px; }
.langbar button { background: none; border: 1px solid var(--hair); border-radius: 999px; padding: 5px 10px; color: var(--dim); font-size: 12px; cursor: pointer; white-space: nowrap; min-height: 32px; }
.langbar button:hover { border-color: var(--hair2); color: var(--ink); }
.langbar button[aria-pressed="true"] { color: var(--gold2); border-color: var(--gold); }
/* 英語は明朝向けの字間だと間延びするので詰める */
html[lang="en"] body * { letter-spacing: .02em !important; }
@media (max-width: 760px) {
  #site-header { gap: 8px; }
  .header-logo { font-size: 17px; }
  .header-sub { display: none; }
  .apps-link, #sound-btn, .langbar button { min-height: 40px; display: inline-flex; align-items: center; }
  .langbar button { padding: 5px 8px; }
}

/* ── 場の組み立て ───────────────────────────── */

#stage { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 10px 14px; margin-top: 14px; align-items: start; }
#bar { grid-column: 1 / -1; display: flex; gap: 4px; }
#bar li { flex: 1; text-align: center; font: 500 12px var(--serif); color: var(--dim); padding: 5px 0 6px; border-bottom: 2px solid var(--hair); white-space: nowrap; }
#bar li.done { color: var(--gold); border-color: var(--gold); opacity: .6; }
#bar li.on { color: var(--gold2); border-color: var(--gold2); font-weight: 700; }
#board { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* 入口は役職の説明だけを見せる */
#stage[data-phase="entry"] { grid-template-columns: minmax(0, 1fr); }
#stage[data-phase="entry"] #table, #stage[data-phase="entry"] #side, #stage[data-phase="entry"] #talk { display: none; }
#talk { --talk-h: clamp(380px, 78svh, 680px); position: sticky; top: 8px; min-width: 0; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r); }
/* 1 列のときは 卓 → 操作 → 発言 → カード の順。ボタンを卓のすぐ下に置く（発言を先にすると操作が画面の下に押し出された）。
   CPU が話しているあいだは、操作の欄に今の発言を出す（.now-say）。前の発言はすぐ下の発言の欄に積み上がる */
@media (max-width: 1060px) {
  #stage { grid-template-columns: minmax(0, 1fr); }
  #board { display: contents; }
  #table { order: 1; }
  #panel { order: 2; }
  #talk { order: 3; position: static; }
  #side { order: 4; }
}

/* ── 卓 ─────────────────────────────────────── */

#table { position: relative; aspect-ratio: 16 / 10; max-height: max(50svh, 400px); width: 100%; overflow: hidden; border-radius: var(--r); border: 1px solid var(--hair); background: linear-gradient(#0c0d1c, #171628); }
@media (max-width: 620px) { #table { aspect-ratio: 1 / 1; max-height: none; } }
@media (max-width: 360px) { #table { aspect-ratio: 1 / 1.14; } }
/* 6〜7 人は席が増えるので、スマホでは縦に伸ばす */
@media (max-width: 620px) {
  #table[data-n="6"], #table[data-n="7"] { aspect-ratio: 1 / 1.26; }
}
#sky { position: absolute; inset: 0; width: 100%; height: 62%; }
.twinkle { animation: twinkle 3.6s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .15; } }
#dawn { position: absolute; inset: 0; opacity: 0; transition: opacity 2.4s ease; background: linear-gradient(rgba(84, 70, 118, .55), rgba(235, 150, 95, .42) 46%, rgba(52, 42, 54, .5) 66%); }
#stage[data-time="day"] #dawn { opacity: 1; }
#felt { position: absolute; left: 5%; right: 5%; top: 30%; bottom: -20%; border-radius: 50%; background: radial-gradient(closest-side, #6b4426, #47301c 62%, #2c1d12 96%); border: 2px solid rgba(201, 169, 110, .4); box-shadow: 0 -8px 40px rgba(240, 195, 106, .13); transition: filter 1.6s ease; }
#stage[data-time="night"] #felt { filter: brightness(.62) saturate(.8); }
#stage[data-dark="1"] #felt, #stage[data-dark="1"] #seats, #stage[data-dark="1"] #center { filter: brightness(.42) saturate(.7); }
/* filter を掛けると子の絶対配置の基準がここへ移るので、#seats は卓と同じ大きさにしておく */
#seats { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
#seats, #center { transition: filter .8s ease; }

#table[data-n="6"] #center, #table[data-n="7"] #center { top: 47%; }
#center { position: absolute; left: 50%; top: 43%; transform: translate(-50%, -50%); display: flex; gap: 8px; z-index: 2; }
#center .pick { background: none; border: 0; padding: 0; border-radius: 8px; }

#caption { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); margin: 0; z-index: 3; padding: 4px 14px; border-radius: 999px; background: rgba(8, 8, 16, .72); font: 700 14px var(--serif); letter-spacing: .08em; white-space: nowrap; max-width: 94%; color: var(--gold2); }
#caption:empty { display: none; }
@media (max-width: 620px) { #caption { font-size: 12px; top: 58%; } }

#arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }

/* 席 */
.seat { position: absolute; transform: translate(-50%, -50%); width: clamp(84px, 22%, 148px); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px; background: none; border: 2px solid transparent; border-radius: 12px; cursor: default; color: var(--ink); pointer-events: auto; }
.seat:disabled { color: var(--ink); }
.seat-top { display: flex; align-items: center; gap: 5px; }
.face { width: clamp(38px, 5.6vw, 56px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--hair2); background: #111; flex: none; transition: transform .2s ease, border-color .2s ease; }
.face img, .face svg { width: 100%; height: 100%; display: block; }
.name { font: 700 12px var(--serif); padding: 0 8px; border-radius: 999px; background: rgba(8, 8, 16, .66); white-space: nowrap; }
.said { font-size: 11px; line-height: 1.32; text-align: center; color: var(--gold2); background: rgba(8, 8, 16, .74); padding: 2px 6px; border-radius: 6px; max-width: 100%; }
.said:empty { display: none; }
.said b { display: block; font: 700 11px var(--serif); color: var(--ink); }
.marks { display: flex; gap: 2px; height: 6px; position: absolute; top: 3px; left: 6px; }
.marks i { width: 6px; height: 6px; border-radius: 50%; background: var(--crimson2); box-shadow: 0 0 4px rgba(194, 59, 79, .9); }
.marks i.ally { background: var(--gold2); box-shadow: 0 0 4px rgba(230, 207, 154, .9); }
.votes { position: absolute; top: -2px; right: 0; min-width: 22px; height: 22px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--crimson); border: 1px solid var(--crimson2); font-weight: 700; font-size: 12px; }
.votes:empty { display: none; }
.votes.lean { background: rgba(130, 128, 150, .92); }
.seat.talking .face { border-color: var(--gold2); transform: scale(1.1); box-shadow: 0 0 14px rgba(230, 207, 154, .7); }
.seat.can { cursor: pointer; animation: can 1.5s ease-in-out infinite; border-color: rgba(230, 207, 154, .6); }
.seat.can:hover, .seat.sel { background: rgba(230, 207, 154, .16); border-color: var(--gold2); animation: none; }
@keyframes can { 50% { border-color: rgba(230, 207, 154, .16); } }
.seat.out .face { filter: grayscale(1) brightness(.6); border-color: var(--crimson2); }
.seat.out .name { background: var(--crimson); }
.changed { display: inline-block; max-width: 100%; font: 700 11px var(--serif); line-height: 1.32; color: #1a150c; background: var(--gold2); border-radius: 4px; padding: 0 5px; }
/* 英語の役職名は明朝の太字だと 7 人の卓の席に収まらない（«→Werewolf» が切れた）ので、幅の狭い本文の書体にする */
html[lang="en"] .changed { font-family: system-ui, -apple-system, sans-serif; padding: 0 3px; }

/* カード */
.card { width: var(--cw); aspect-ratio: 64 / 90; perspective: 420px; display: inline-block; flex: none; position: relative; }
.card-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.3, .6, 1); }
.card.open .card-in { transform: rotateY(180deg); }
.side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.side svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55)); }
.side.front { transform: rotateY(180deg); }
#center .card { --cw: clamp(42px, 5.4vw, 58px); }
.pick.can .card, .card.glow { filter: drop-shadow(0 0 7px rgba(230, 207, 154, .95)); }
.pick.can { cursor: pointer; }
.card.fly { transition: transform .75s cubic-bezier(.5, 0, .3, 1); z-index: 6; }
.seat:has(.card.fly), #center:has(.card.fly) { z-index: 6; }
.card.undealt { visibility: hidden; }
/* 山札。#center と同じ位置で、切る動きのあと 1 枚ずつ減る */
#pile { position: absolute; left: 50%; top: 43%; transform: translate(-50%, -50%); width: clamp(42px, 5.4vw, 58px); aspect-ratio: 64 / 90; z-index: 2; }
#table[data-n="6"] #pile, #table[data-n="7"] #pile { top: 47%; }
.pile-card { position: absolute; inset: 0; }
.pile-card svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.pile-card:nth-child(2) { transform: translate(-1px, -1px); }
.pile-card:nth-child(3) { transform: translate(-2px, -2px); }
.pile-card:nth-child(4) { transform: translate(-3px, -3px); }
.pile-card:nth-child(5) { transform: translate(-4px, -4px); }
#pile.shuffling .pile-card:nth-child(odd) { animation: cut-l .38s ease-in-out 2; }
#pile.shuffling .pile-card:nth-child(even) { animation: cut-r .38s ease-in-out 2; }
@keyframes cut-l { 50% { transform: translateX(-62%) rotate(-7deg); } }
@keyframes cut-r { 50% { transform: translateX(62%) rotate(7deg); } }

/* ── 操作 ───────────────────────────────────── */

#panel { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r); padding: 10px 14px 12px; min-height: 92px; }
.ask { margin: 0 0 8px; font: 700 15px var(--serif); letter-spacing: .04em; }
.listening { margin: 0; color: var(--dim); font-size: 13px; }
.now-say { display: none; gap: 8px; align-items: flex-start; }
.now-say .face { width: 40px; flex: none; border-width: 1px; }
.now-say b { display: block; font: 700 12px var(--serif); color: var(--dim); letter-spacing: .06em; margin-bottom: 2px; }
.now-say p { margin: 0; font-size: 15px; line-height: 1.55; }
.now-say .you-ref { font-style: normal; color: var(--gold2); font-weight: 700; }
.now-say .topic-note { display: block; margin-bottom: 4px; font-size: 12px; color: var(--gold2); }
@media (max-width: 1060px) {
  .listening:has(+ .now-say) { display: none; }
  .now-say { display: flex; }
}
.note { margin: -4px 0 10px; color: var(--dim); font-size: 13px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-break { flex: 0 0 100%; height: 0; }
.opt-head { flex: 0 0 34px; align-self: center; font: 700 13px var(--serif); color: var(--gold); }
.choice.grp { flex: 1 1 calc(33% - 56px); }
@media (max-width: 620px) {
  .opt-head { flex-basis: 100%; }
  .choice.grp { flex-basis: calc(50% - 8px); }
}
.choice { flex: 1 1 calc(25% - 8px); min-height: 44px; padding: 8px 12px; border: 1px solid var(--hair2); border-radius: 9px; background: rgba(255, 255, 255, .04); cursor: pointer; text-align: center; line-height: 1.35; }
.choice:hover { background: rgba(230, 207, 154, .13); border-color: var(--gold2); }
.choice.name { font: 700 14px var(--serif); }
.choice.on { border-color: var(--gold2); background: rgba(230, 207, 154, .16); }
.choice small { display: block; color: var(--dim); font-size: 12px; }
/* 推理のように長い選択肢は、左揃えの横長にする */
.choice.long { flex-basis: 100%; text-align: left; font-weight: 500; }
.choice.primary { flex-basis: 100%; background: var(--crimson); border-color: var(--crimson2); font-weight: 700; }
.choice.primary:hover { background: var(--crimson2); }
.choice.primary small { color: #eed6d4; font-weight: 400; }
.choice.quiet { flex: 0 1 auto; background: none; color: var(--dim); }
@media (max-width: 620px) { .choice { flex-basis: calc(50% - 8px); } }

.hero { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.hero .card { --cw: 86px; }
.hero h3 { margin: 0; font: 700 20px var(--serif); }
.hero p { margin: 4px 0 0; color: var(--dim); }

#yours { display: flex; flex-wrap: wrap; gap: 0 12px; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid var(--hair); font-size: 13px; }
#yours b { font: 700 13px var(--serif); color: var(--gold2); white-space: nowrap; }
#yours span { color: var(--dim); }

/* 今夜の配役 */
.setup { padding: 12px 0; border-top: 1px solid var(--hair); }
.setup:first-child { padding-top: 2px; border-top: 0; }
.setup-name { margin: 0 0 8px; font: 700 15px var(--serif); letter-spacing: .08em; color: var(--gold2); }
.setup-n { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.setup-n .setup-name { margin: 0; }
.setup-n .note { flex: 1 1 300px; margin: 0; }
.seg { display: flex; flex: 0 1 340px; min-width: 0; border: 1px solid var(--hair2); border-radius: 9px; overflow: hidden; }
.seg button { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; border-left: 1px solid var(--hair); background: none; color: var(--ink); cursor: pointer; font: 700 14px var(--serif); white-space: nowrap; }
.seg button:first-child { border-left: 0; }
.seg button:hover { background: rgba(230, 207, 154, .1); }
.seg button.on { background: var(--gold2); color: var(--night); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { flex: 1 1 calc(20% - 6px); min-width: 112px; min-height: 44px; padding: 5px 8px; border: 1px solid var(--hair); border-radius: 9px; background: none; cursor: pointer; font: 700 13px var(--serif); line-height: 1.3; }
.chip small { display: block; font: 400 11px system-ui, sans-serif; color: var(--dim); }
.chip:hover { border-color: var(--hair2); }
.chip.on { border-color: var(--gold2); background: rgba(230, 207, 154, .12); color: var(--gold2); }
.adv { margin-bottom: 10px; }
.adv:not([open]) .field { display: none; }
.adv summary { display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; font: 700 13px var(--serif); letter-spacing: .08em; color: var(--dim); }
.adv summary::-webkit-details-marker { display: none; }
.adv summary::before { content: "▸"; color: var(--gold); transition: transform .15s; }
.adv[open] summary::before { transform: rotate(90deg); }
.adv summary:hover { color: var(--ink); }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 6px; }
.role-row { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border: 1px solid var(--hair); border-radius: 9px; }
.role-row .rname { flex: 1; min-width: 0; font: 700 13px var(--serif); white-space: nowrap; }
.role-row .num { width: 20px; text-align: center; font: 700 15px var(--serif); color: var(--gold2); }
.step { width: 40px; height: 40px; border: 1px solid var(--hair); border-radius: 8px; background: none; color: var(--ink); font-size: 16px; cursor: pointer; }
.step:hover:not(:disabled) { border-color: var(--hair2); }
.step:disabled { opacity: .3; cursor: default; }
.adv .note { margin: 6px 0 0; }
.field { padding: 8px 0 10px; border-top: 1px solid var(--hair); }
.field-name { margin: 0 0 6px; font: 700 13px var(--serif); letter-spacing: .04em; color: var(--ink); }
.field .seg { max-width: 460px; }
#my-role { min-width: 180px; min-height: 44px; padding: 0 10px; border: 1px solid var(--hair2); border-radius: 9px; background: var(--night); color: var(--ink); font: 14px var(--serif); cursor: pointer; }
.deckbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-bottom: 8px; }
.deckbox li { display: flex; gap: 9px; align-items: flex-start; }
.deckbox .card { --cw: 56px; }
.deckbox b .tag { margin-left: 6px; font-style: normal; font-weight: 400; }
.choices.start { position: sticky; bottom: 8px; margin-top: 10px; flex-wrap: nowrap; }
.choices.start .primary { flex: 2 1 0; }
.choice.daily { flex: 1 1 0; min-width: 0; background: var(--night); }
/* 下に貼りつくボタンが、枚数を変えるボタンの上に乗らないように */
#pbody:has(.adv[open]) .choices.start { position: static; }
.deckbox b { display: block; font: 700 13px var(--serif); }
.deckbox div > span { font-size: 12px; line-height: 1.45; color: var(--dim); }
@media (max-width: 620px) { .deckbox { grid-template-columns: minmax(0, 1fr); } }

/* 結果 */
.result h3 { margin: 0 0 2px; font: 700 26px var(--serif); letter-spacing: .1em; }
.result.win h3 { color: var(--gold2); }
.result.lose h3 { color: var(--crimson2); }
.result p { margin: 2px 0; }
.result .surprise { color: var(--gold2); font-weight: 700; }
.result ol { margin: 10px 0 12px; padding: 8px 12px; border-left: 2px solid var(--hair2); color: var(--dim); }
.result h4 { margin: 12px 0 0; font: 700 13px var(--serif); color: var(--ink); }
.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin-top: 6px; }
.answers li { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.answers .face { width: 36px; align-self: flex-start; }
.answers b { font: 700 13px var(--serif); margin-right: 6px; }
.answers .was { font-size: 12px; color: var(--gold2); margin-right: 6px; }
.answers p { margin: 1px 0 0; font-size: 12px; color: var(--dim); }
.tag { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 5px; margin-right: 4px; border-radius: 4px; border: 1px solid var(--hair2); color: var(--dim); }
.tag.ok { border-color: #7fb394; color: #a8d8bb; }
.tag.ng { border-color: var(--crimson2); color: #f0a0ac; }
@media (max-width: 620px) { .answers { grid-template-columns: minmax(0, 1fr); } }

/* ── カードの欄 ─────────────────────────────────── */

#side { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
#side h2 { margin: 0; font: 700 13px var(--serif); color: var(--gold2); letter-spacing: .04em; }
#deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(0, 68px)); gap: 6px; }
#deck li { position: relative; }
#deck .card { --cw: 100%; width: 100%; }
#deck .count { position: absolute; right: 2px; top: 2px; min-width: 20px; text-align: center; border-radius: 10px; background: rgba(8, 8, 16, .84); border: 1px solid var(--hair2); font-size: 12px; font-weight: 700; }
#legend { margin: 0; color: var(--dim); font-size: 12px; }

/* ── 発言の欄 ───────────────────────────────── */

#talk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--hair); }
#talk-head h2 { margin: 0; font: 700 13px var(--serif); color: var(--gold2); letter-spacing: .04em; }
#talk-head h2 { flex: 1; }
#fast-btn, #sheet-btn { min-height: 40px; padding: 3px 12px; background: none; border: 1px solid var(--hair2); border-radius: 999px; color: var(--ink); font-size: 12px; cursor: pointer; }
#fast-btn:hover, #sheet-btn:hover { border-color: var(--gold2); }
#fast-btn.on { background: var(--gold2); border-color: var(--gold2); color: var(--night); }
#memos { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px 12px; border-bottom: 1px solid var(--hair); }
.memos-name { font: 700 12px var(--serif); color: var(--dim); }
.memo { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 8px; background: none; color: var(--ink); cursor: pointer; font: 700 12px var(--serif); white-space: nowrap; }
.memo:hover { border-color: var(--hair2); }
.memo i { min-width: 14px; font-style: normal; text-align: center; }
.memo.m1, .memo-mark.m1 { background: rgba(127, 179, 148, .22); border-color: #7fb394; color: #bfe3cc; }
.memo.m2, .memo-mark.m2 { background: rgba(194, 59, 79, .3); border-color: var(--crimson2); color: #f7c3cb; }
.memo.m3, .memo-mark.m3 { background: rgba(230, 207, 154, .14); border-color: var(--gold2); color: var(--gold2); }
.seat-top { position: relative; }
.memo-mark { position: absolute; left: -5px; top: -5px; width: 18px; height: 18px; border: 1px solid; border-radius: 50%; background-clip: padding-box; font: 700 11px/16px var(--serif); text-align: center; }
.review { margin: 0 0 10px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 13px; }
.review dt { color: var(--dim); }
.review dd { margin: 0; }
@media (max-width: 620px) { .review { grid-template-columns: minmax(0, 1fr); } .review dd { margin-bottom: 6px; } }
.record { margin: 6px 0 10px; }
.tip { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--gold2); border-radius: 9px; background: rgba(230, 207, 154, .1); color: var(--ink); font-size: 13px; line-height: 1.6; }
.tip::before { content: "案内"; margin-right: 8px; padding: 0 6px; border-radius: 4px; background: var(--gold2); color: var(--night); font: 700 11px var(--serif); }
.guide-row { margin: 0 0 12px; }
.choice.guide { flex-basis: 100%; border-color: var(--gold2); color: var(--gold2); }
.share-box { margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid var(--hair); }
.share-title { margin: 0 0 8px; font: 700 13px var(--serif); letter-spacing: .08em; color: var(--gold2); }
.share-card { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto 10px; border: 1px solid var(--hair2); border-radius: 10px; }
.share-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 6px; }
.share-btn { min-height: 40px; padding: 4px 13px; border: 1px solid var(--hair); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--ink); cursor: pointer; font: 600 13px var(--serif); }
.share-btn:hover { border-color: var(--gold); color: var(--gold2); }
.share-note { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--dim); }
#sheet { height: var(--talk-h); overflow-y: auto; padding: 12px; }
#sheet .deckbox { grid-template-columns: minmax(0, 1fr); margin: 0; }

/* 発言は積み上げて、一番下についていく（灯火の人狼と同じ） */
#log { height: var(--talk-h); overflow-y: auto; display: flex; flex-direction: column; gap: 9px; padding: 12px 12px; scrollbar-color: rgba(201, 169, 110, .3) transparent; }
#log .msg { display: flex; gap: 8px; align-items: flex-start; animation: rise .22s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#log .face { width: 34px; border-width: 1px; align-self: flex-start; }
#log .msg > div { min-width: 0; flex: 1; }
#log b { display: block; font: 700 12px var(--serif); color: var(--dim); letter-spacing: .06em; margin-bottom: 2px; }
#log p { margin: 0; font-size: 14px; line-height: 1.55; background: rgba(255, 255, 255, .035); border: 1px solid rgba(201, 169, 110, .14); border-left: 2px solid rgba(201, 169, 110, .35); border-radius: 3px 10px 10px 10px; padding: 5px 10px; }
#log .hot p { border-left-color: var(--crimson2); }
#log .kind p { border-left-color: #5b9bbd; }
#log .ask p { border-left-color: var(--gold2); }
#log .co p { border-color: rgba(201, 169, 110, .45); border-left-color: var(--gold2); background: linear-gradient(90deg, rgba(201, 169, 110, .1), rgba(201, 169, 110, .02)); }
#log .recant p { color: var(--gold2); }
#log .me p { background: rgba(201, 169, 110, .08); }
#log .think p { border-left-color: #8fc3a3; background: rgba(143, 195, 163, .07); }
#log .flow p { border-left-color: #b58cd6; }
#log .you-ref { font-style: normal; color: var(--gold2); font-weight: 700; }
#log .topic { margin-top: 2px; padding: 5px 10px; border: 1px dashed var(--hair2); border-radius: 8px; color: var(--ink); font: 700 13px var(--serif); }
#log .topic span { margin-right: 8px; padding: 0 6px; border-radius: 4px; background: var(--gold2); color: var(--night); font-size: 11px; }
#log .round { text-align: center; color: var(--gold2); font: 700 13px var(--serif); letter-spacing: .2em; padding-top: 4px; }
#log:empty::after { content: "夜が明けると、ここに発言が並びます"; color: var(--dim); font-size: 13px; }
@media (max-width: 1060px) {
  #talk { --talk-h: clamp(220px, 32svh, 360px); }
}

/* ── 遊び方・フッター ───────────────────────── */

#guide-section { margin-top: 44px; }
.guide-title { font: 700 20px var(--serif); margin: 0 0 12px; }
.guide-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.guide-col { border: 1px solid var(--hair); border-radius: var(--r); padding: 12px 16px; background: rgba(255, 255, 255, .02); }
.guide-col h3 { margin: 0 0 6px; font: 700 15px var(--serif); color: var(--gold2); }
.guide-col p { margin: 0 0 8px; }
.guide-col dl { margin: 0; }
.guide-col dt { font-weight: 700; }
.guide-col dd { margin: 0 0 6px; color: var(--dim); }
@media (max-width: 900px) { .guide-content { grid-template-columns: minmax(0, 1fr); } }

.related-apps, #ad-section { margin-top: 36px; }
.related-apps-title { font: 700 18px var(--serif); letter-spacing: .2em; color: var(--gold2); margin: 0 0 12px; }
.related-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, calc(50% - 5px)), 1fr)); gap: 10px; }
.related-app-link.ra-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hair); border-radius: 10px; background: rgba(255, 255, 255, .03); color: var(--ink); text-decoration: none; transition: transform .15s, border-color .15s; }
.related-app-link.ra-card:hover { transform: translateY(-2px); border-color: var(--hair2); }
.ra-card .ra-thumb { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #111; }
.ra-card .ra-name { display: block; padding: 8px 12px 10px; font: 700 14px var(--serif); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .related-app-link.ra-card { transition: none; } }

#site-footer { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--hair); color: var(--dim); font-size: 12px; }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a { color: var(--dim); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.footer-copy { margin: 8px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .card-in, .card.fly, #dawn { transition: none; }
  .twinkle, .seat.can { animation: none; }
}