:root {
  --bg: #0a0e19;
  --bg2: #121a2e;
  --panel: rgba(22, 29, 50, 0.82);
  --panel2: rgba(34, 43, 70, 0.7);
  --line: rgba(232, 214, 170, 0.12);
  --ink: #ece6d6;
  --muted: #a3a9b9;
  --gold: #e8c872;
  --gold2: #c9a24a;
  --blood: #d0473f;
  --village: #8fb573;
  --wolf: #d0473f;
  --fox: #e98a3c;
  --radius: 16px;
  --serif: 'Shippori Mincho B1', 'Noto Serif KR', 'Noto Serif SC', 'Hiragino Mincho ProN', serif;
  --sans: 'Zen Kaku Gothic New', 'Noto Sans KR', 'Noto Sans SC', system-ui, -apple-system, 'Hiragino Sans', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(1200px 700px at 70% -10%, #1d2a4d 0%, transparent 60%), linear-gradient(180deg, #0c1122 0%, var(--bg) 60%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  transition: background 1.2s;
}
body[data-phase="day"], body[data-phase="morning"], body[data-phase="vote"], body[data-phase="voteResult"], body[data-phase="execution"] {
  background: radial-gradient(1000px 600px at 50% -20%, #4a3a26 0%, transparent 65%), linear-gradient(180deg, #1e1913 0%, #110e0b 70%);
  background-attachment: fixed;
  --panel: rgba(44, 36, 27, 0.82);
  --panel2: rgba(66, 54, 40, 0.65);
  --line: rgba(240, 210, 160, 0.14);
}
body[data-phase="vote"], body[data-phase="voteResult"], body[data-phase="execution"] {
  background: radial-gradient(900px 600px at 50% -20%, #5a2020 0%, transparent 65%), linear-gradient(180deg, #1c1010 0%, #0e0909 70%);
  background-attachment: fixed;
}
.bg-stars {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(1px 1px at 10% 20%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 30% 70%, #fff6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 80% 30%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 60% 10%, #fff7 50%, transparent 51%), radial-gradient(1px 1px at 90% 80%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 45% 45%, #fff6 50%, transparent 51%);
  background-size: 400px 400px;
  transition: opacity 1s;
}
body[data-phase="day"] .bg-stars, body[data-phase="morning"] .bg-stars, body[data-phase^="vote"] .bg-stars, body[data-phase="execution"] .bg-stars { opacity: 0; }

button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 800; letter-spacing: .04em; margin: 0; }
h3 { font-size: 17px; margin-bottom: 12px; }
p { margin: 0; }
.note { color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.center-t { text-align: center; margin-top: 10px; }

/* ---------- ヘッダー ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: linear-gradient(180deg, rgba(8, 11, 20, .92), rgba(8, 11, 20, .6));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; }
.brand-t { font-family: var(--serif); font-weight: 800; font-size: 16px; white-space: nowrap; letter-spacing: .06em; }
.mini-moon { width: 22px; height: 22px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 35%, #fff3c4, var(--gold) 55%, #b98f35); box-shadow: 0 0 14px #e8c87266; }
.hd-mid { flex: 1; display: flex; justify-content: center; min-width: 0; }
.hd-right { display: flex; align-items: center; gap: 6px; }
.phase-chip { font-size: 12.5px; padding: 4px 12px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phase-chip.night { color: #c8d4ff; }
.phase-chip.vote, .phase-chip.voteResult, .phase-chip.execution { color: #ffb4ae; }
.room-chip { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .12em; padding: 4px 8px 4px 10px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #e0b84a; display: inline-block; }
.dot.online { background: #6fcf7c; box-shadow: 0 0 8px #6fcf7c; }
.dot.offline { background: var(--blood); }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: transparent; border: 1px solid transparent; cursor: pointer; color: var(--ink); }
.icon-btn:hover { background: var(--panel2); border-color: var(--line); }
.lang-sel { position: relative; display: flex; align-items: center; gap: 4px; padding: 0 6px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; }
.lang-sel select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; font-size: 13px; padding: 0 2px; cursor: pointer; outline: none; }
.lang-sel option { background: #1a2238; }
.sound-pop { position: absolute; right: 16px; top: calc(100% + 6px); width: 230px; display: grid; gap: 10px; padding: 14px; z-index: 30; }

@media (max-width: 560px) {
  .brand-t { display: none; }
  .hd-mid { justify-content: flex-start; }
  .room-chip { display: none; }
  .top { gap: 6px; padding-left: 12px; padding-right: 12px; }
}

/* ---------- 共通部品 ---------- */
main { position: relative; z-index: 1; padding: 18px 16px calc(env(safe-area-inset-bottom) + 90px); max-width: 1120px; margin: 0 auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.card + .card, .col > * + * { margin-top: 14px; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.card-h h3 { margin: 0; }
.row { display: flex; gap: 8px; align-items: center; }
.row.end { justify-content: flex-end; margin-top: 10px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--panel2); cursor: pointer; font-weight: 700; letter-spacing: .03em;
  transition: transform .15s cubic-bezier(.2, .8, .2, 1), background .2s, border-color .2s, opacity .2s;
  touch-action: manipulation; white-space: nowrap;
}
.btn:hover { border-color: rgba(232, 200, 114, .4); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn.primary { background: linear-gradient(180deg, #f0d48a, #c9a24a); color: #1d1608; border-color: #f4dc9c; box-shadow: 0 6px 24px rgba(232, 200, 114, .25); }
.btn.danger { background: linear-gradient(180deg, #e0605a, #a8302b); color: #fff; border-color: #f08a84; box-shadow: 0 6px 24px rgba(208, 71, 63, .3); }
.btn.ghost { background: transparent; }
.btn.on { background: rgba(232, 200, 114, .16); border-color: rgba(232, 200, 114, .5); color: var(--gold); }
.btn.big { width: 100%; padding: 15px 20px; font-size: 16.5px; border-radius: 14px; }
.btn.sm { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn.xs { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn.wide { width: 100%; margin-top: 14px; }
input[type="text"], input:not([type]), .code-in, .url {
  width: 100%; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(0, 0, 0, .28); outline: none; font-size: 16px;
}
input:focus { border-color: rgba(232, 200, 114, .6); box-shadow: 0 0 0 3px rgba(232, 200, 114, .12); }
select { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .3); }
input[type="range"] { width: 100%; accent-color: var(--gold); }
.sw { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; padding: 6px 0; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw span { width: 40px; height: 23px; border-radius: 99px; background: #3a4258; position: relative; flex: none; transition: background .2s; }
.sw span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.sw input:checked + span { background: var(--gold2); }
.sw input:checked + span::after { transform: translateX(17px); }
.sw input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 2px 8px; border-radius: 99px; background: rgba(232, 200, 114, .14); color: var(--gold); border: 1px solid rgba(232, 200, 114, .3); }
.badge.me { background: rgba(120, 170, 255, .14); color: #a9c5ff; border-color: rgba(120, 170, 255, .3); }
.av { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 60%, #000)); color: #fff; font-weight: 700; font-size: 15px; text-shadow: 0 1px 2px #0006; box-shadow: 0 2px 8px #0005, inset 0 -2px 4px #0003; }
.av.lg { width: 52px; height: 52px; font-size: 21px; }
.team { font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.t-village { color: var(--village); border-color: rgba(143, 181, 115, .4); background: rgba(143, 181, 115, .1); }
.t-wolf { color: #ff8a80; border-color: rgba(208, 71, 63, .45); background: rgba(208, 71, 63, .12); }
.t-fox { color: var(--fox); border-color: rgba(233, 138, 60, .45); background: rgba(233, 138, 60, .1); }
.ricon { flex: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4)); }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--gold); margin: 0 auto 12px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center { min-height: 60vh; display: grid; place-items: center; }
.msg { text-align: center; max-width: 440px; width: 100%; }
.msg h2 { margin-bottom: 8px; }
.narrow { max-width: 560px; margin: 0 auto; }

/* ---------- ホーム ---------- */
.home { max-width: 520px; margin: 0 auto; }
.hero { text-align: center; padding: 34px 0 26px; position: relative; }
.hero-moon { width: 120px; height: 120px; margin: 0 auto 18px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fff6d6 0%, #f1d78e 40%, #caa04a 75%, #9e7a33 100%); box-shadow: 0 0 60px 10px rgba(232, 200, 114, .28), 0 0 160px 40px rgba(232, 200, 114, .1); position: relative; animation: float 7s ease-in-out infinite; }
.hero-moon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 62% 60%, rgba(120, 90, 40, .35) 0 9%, transparent 10%), radial-gradient(circle at 40% 66%, rgba(120, 90, 40, .25) 0 6%, transparent 7%), radial-gradient(circle at 66% 32%, rgba(120, 90, 40, .22) 0 5%, transparent 6%); }
@keyframes float { 50% { transform: translateY(-8px); } }
.kicker { font-size: 11px; letter-spacing: .3em; color: var(--muted); }
.hero h1 { font-size: clamp(40px, 11vw, 64px); line-height: 1.15; margin: 8px 0 6px; background: linear-gradient(180deg, #fff3cf, #e8c872 60%, #b8913d); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 30px rgba(232, 200, 114, .15); }
.tagline { color: var(--muted); font-family: var(--serif); letter-spacing: .2em; }
.strip { display: flex; justify-content: center; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.strip-i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.home-card { display: grid; gap: 12px; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin-top: 4px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.code-in { text-transform: uppercase; letter-spacing: .25em; font-family: ui-monospace, Menlo, monospace; }
.guide-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }

/* ---------- ロビー ---------- */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.invite { text-align: center; }
.qr-wrap { display: grid; place-items: center; }
.qr { background: #fff; padding: 10px; border-radius: 14px; width: min(260px, 70vw); aspect-ratio: 1; box-shadow: 0 0 0 6px rgba(232, 200, 114, .15), 0 10px 40px rgba(0, 0, 0, .4); }
.qr svg { width: 100%; height: 100%; display: block; }
.code-big { font-family: ui-monospace, Menlo, monospace; font-size: 34px; letter-spacing: .3em; margin: 14px 0 12px; color: var(--gold); font-weight: 700; }
.code-big small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .1em; color: var(--muted); font-weight: 400; }
.url { font-size: 12px; padding: 8px 10px; color: var(--muted); }
.plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plist li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid transparent; animation: pop .4s cubic-bezier(.2, .9, .3, 1.3) both; }
.plist li.me { border-color: rgba(120, 170, 255, .3); }
.plist li .pn { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .empty { color: var(--muted); justify-content: center; font-size: 13px; }
@keyframes pop { from { opacity: 0; transform: scale(.92) translateY(4px); } }
.host-join { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.roles-edit { display: grid; gap: 6px; }
.re-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.re-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.re-t b { font-size: 14.5px; }
.re-t small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.stepper { display: flex; align-items: center; gap: 4px; background: rgba(0, 0, 0, .25); border-radius: 10px; padding: 3px; border: 1px solid var(--line); }
.stepper button { width: 34px; height: 34px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .06); cursor: pointer; font-size: 18px; font-weight: 700; }
.stepper button:disabled { opacity: .3; }
.stepper button:active:not(:disabled) { transform: scale(.92); }
.stepper span { min-width: 26px; text-align: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.total { margin-top: 12px; padding: 9px 12px; border-radius: 10px; font-weight: 700; text-align: center; }
.total.ok { background: rgba(111, 207, 124, .1); color: #8fdc98; }
.total.ng { background: rgba(208, 71, 63, .12); color: #ff9a92; }
.rec-note { margin: -4px 0 10px; }
.balance { margin-top: 14px; }
.bal-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.bal-h b { font-size: 14px; }
.bal-strongV, .bal-village { color: var(--village); }
.bal-even { color: var(--gold); }
.bal-wolf, .bal-strongW { color: #ff8a80; }
.bal-bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: #0005; box-shadow: inset 0 1px 3px #0008; }
.bal-bar i { display: block; height: 100%; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.bv { background: linear-gradient(90deg, #6f9c55, #a3cf83); }
.bw { background: linear-gradient(90deg, #e3615a, #a8302b); }
.bf { background: linear-gradient(90deg, #f0a35c, #d9762a); }
.bal-legend { display: flex; justify-content: space-between; font-size: 12px; margin: 6px 0 6px; font-variant-numeric: tabular-nums; }
.lv { color: var(--village); } .lw { color: #ff8a80; } .lf { color: var(--fox); }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0 8px; }
.errs { list-style: none; padding: 10px 14px; margin: 14px 0 0; border-radius: 12px; background: rgba(208, 71, 63, .1); color: #ffb0a9; font-size: 13px; border: 1px solid rgba(208, 71, 63, .3); }
.start { margin-top: 14px; }

/* ---------- 説明 ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { display: flex; gap: 12px; }
.steps .num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(232, 200, 114, .14); color: var(--gold); font-weight: 700; font-family: var(--serif); border: 1px solid rgba(232, 200, 114, .35); }
.steps b { display: block; font-family: var(--serif); }
.steps p { color: var(--muted); font-size: 13.5px; }
.tips-h { margin: 18px 0 8px; font-size: 15px; }
.tips { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13.5px; display: grid; gap: 4px; }
.role-list { display: grid; gap: 10px; }
.role-entry { display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.re-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.re-h b { font-family: var(--serif); font-size: 16px; }
.re-h .cnt { color: var(--gold); font-weight: 700; }
.re-body p { font-size: 13.5px; }
.re-body .ab { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.ab span, .rc-ab span { display: inline-block; font-size: 10.5px; padding: 0 6px; margin-right: 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); color: var(--ink); }

/* ---------- モーダル ---------- */
#modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
#modal[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(3, 5, 12, .7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadein .25s; }
.modal { position: relative; width: min(620px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; padding: 0; overflow: hidden; animation: rise .35s cubic-bezier(.2, .9, .3, 1); background: #141b2f; }
.tabs { display: flex; gap: 4px; padding: 10px 10px 0; border-bottom: 1px solid var(--line); }
.tab { background: none; border: 0; padding: 10px 14px; cursor: pointer; color: var(--muted); font-weight: 700; border-bottom: 2px solid transparent; }
.tab.on { color: var(--gold); border-bottom-color: var(--gold); }
.x { margin-left: auto; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--muted); padding: 0 10px; }
.modal-body { overflow-y: auto; padding: 18px; -webkit-overflow-scrolling: touch; }
@keyframes fadein { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(20px) scale(.98); } }

/* ---------- 参加 ---------- */
.join-card { text-align: center; display: grid; gap: 10px; }
.join-moon { width: 70px; height: 70px; margin: 4px auto 6px; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fff6d6, #e8c872 55%, #a5803a); box-shadow: 0 0 40px rgba(232, 200, 114, .35); }
.join-card h2 { font-size: 26px; }
.lbl { text-align: left; font-size: 13px; color: var(--muted); margin-top: 6px; }
.waiting-dot { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.waiting-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- 役職カード ---------- */
.role-screen { text-align: center; }
.ttl { font-size: 22px; margin: 6px 0 16px; }
.flip { position: relative; width: min(340px, 100%); margin: 0 auto 18px; aspect-ratio: 5 / 7.4; perspective: 1200px; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; }
.face { position: absolute; inset: 0; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.3, .9, .3, 1); overflow: hidden; }
.back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(circle at 50% 35%, #2a3763, #121933 70%); border: 1px solid rgba(232, 200, 114, .4); box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 0 0 8px rgba(0, 0, 0, .15), inset 0 0 0 9px rgba(232, 200, 114, .25); }
.back b { font-family: var(--serif); font-size: 18px; color: var(--gold); }
.back small { color: var(--muted); }
.back-emblem { width: 120px; height: 120px; border-radius: 50%; margin-bottom: 12px; background: radial-gradient(circle at 60% 40%, #121933 0 32%, transparent 33%), radial-gradient(circle at 45% 45%, #f6dc95, #c9a24a 70%); box-shadow: 0 0 40px rgba(232, 200, 114, .3); animation: float 4s ease-in-out infinite; }
.front { transform: rotateY(180deg); }
.flip.show .back { transform: rotateY(-180deg); }
.flip.show .front { transform: rotateY(0); }
.role-card { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 22px 20px; background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--rc) 30%, #1a2038), #10152a 75%); border: 1px solid color-mix(in srgb, var(--rc) 60%, transparent); border-radius: 22px; box-shadow: inset 0 0 60px color-mix(in srgb, var(--rc) 20%, transparent); }
.rc-icon { width: 130px; height: 130px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 25%, transparent), transparent 70%); }
.rc-name { font-family: var(--serif); font-size: 32px; font-weight: 800; letter-spacing: .1em; color: color-mix(in srgb, var(--rc) 60%, #fff); }
.rc-short { font-size: 14px; }
.rc-ab { font-size: 12.5px; color: var(--muted); }
.rc-win { font-size: 12.5px; color: var(--gold); }
.partners { margin-top: 6px; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.partners span { color: var(--muted); font-size: 11.5px; }
.waiting { color: var(--muted); font-size: 13px; margin-top: 10px; }

/* ---------- 盤面 ---------- */
.phase-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.phase-head h2 { font-size: 22px; flex: 1; }
.moon-sm { width: 34px; height: 34px; border-radius: 50%; flex: none; background: radial-gradient(circle at 65% 35%, #0c1122 0 30%, transparent 31%), radial-gradient(circle at 40% 45%, #fff2c4, #e8c872 70%); box-shadow: 0 0 20px rgba(232, 200, 114, .35); }
.sun-sm { width: 34px; height: 34px; border-radius: 50%; flex: none; background: radial-gradient(circle, #fff2c4, #f0a94a 70%); box-shadow: 0 0 24px rgba(240, 169, 74, .55); }
.timer { font-family: ui-monospace, Menlo, monospace; font-size: 24px; font-weight: 700; padding: 4px 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.timer.urgent { color: #ff8a80; animation: pulse 1s infinite; }
.timer.big { font-size: 46px; padding: 6px 20px; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.hint { color: var(--muted); font-size: 13.5px; margin-bottom: 14px; }
.banner { padding: 11px 14px; border-radius: 12px; margin-bottom: 12px; font-weight: 700; font-size: 14px; }
.banner.dead { background: rgba(208, 71, 63, .14); border: 1px solid rgba(208, 71, 63, .35); color: #ffb0a9; }
.banner.peace { background: rgba(143, 181, 115, .12); border: 1px solid rgba(143, 181, 115, .3); color: #c4e3ad; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.ptok { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); text-align: center; transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .2s, background .2s, opacity .3s, filter .3s; }
button.ptok { cursor: pointer; }
.ptok.can:hover { border-color: rgba(232, 200, 114, .45); transform: translateY(-2px); }
.ptok.can:active { transform: scale(.96); }
.ptok.sel { border-color: var(--gold); background: rgba(232, 200, 114, .14); box-shadow: 0 0 0 3px rgba(232, 200, 114, .2), 0 8px 30px rgba(232, 200, 114, .15); transform: translateY(-2px); }
body[data-phase="vote"] .ptok.sel { border-color: #ff7b72; background: rgba(208, 71, 63, .2); box-shadow: 0 0 0 3px rgba(208, 71, 63, .25); }
.ptok.dim { opacity: .45; }
.ptok.dead { filter: grayscale(1); opacity: .5; }
.ptok.dead .av { position: relative; }
.pt-name { font-weight: 700; font-size: 13.5px; line-height: 1.3; word-break: break-all; }
.pt-name small { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); }
.pt-role { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, .35); }
.tag { position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 1px 6px; border-radius: 6px; background: #3b0d0d; color: #ff9a92; border: 1px solid #7a2420; }
.tag.exec { background: #2b1d0a; color: #f3c66b; border-color: #6b4c17; }
.done { position: absolute; top: 6px; left: 8px; font-size: 12px; color: var(--muted); }
.done.y { color: #8fdc98; }
.sticky-act { position: sticky; bottom: calc(env(safe-area-inset-bottom) + 12px); margin-top: 16px; z-index: 5; }
.sticky-act .btn { box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.prompt-card { margin-bottom: 14px; }
.prompt { font-family: var(--serif); font-size: 17px; font-weight: 800; }
.prompt-card .note { margin-top: 4px; }
.pack { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(208, 71, 63, .12); border: 1px solid rgba(208, 71, 63, .3); font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.pack span { display: inline-flex; align-items: center; gap: 4px; color: #ffb0a9; }
.night-msg { margin: 10px auto; }
.zzz { font-size: 44px; color: var(--gold); line-height: 1; margin-bottom: 8px; animation: float 3s ease-in-out infinite; }
.my { margin-top: 16px; }
.peek { position: relative; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none; min-height: 50px; display: flex; align-items: center; justify-content: center; text-align: center; }
.peek-show { display: none; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.peek.show { border-style: solid; border-color: rgba(232, 200, 114, .4); background: rgba(232, 200, 114, .08); }
.peek.show .peek-hide { display: none; }
.peek.show .peek-show { display: flex; }
.peek-show .notes { width: 100%; margin-top: 8px; text-align: left; }
.peek-hide { color: var(--muted); font-size: 13px; }
.peek .partners { margin: 0; }
.notes { margin-top: 12px; }
.notes h4 { font-size: 14px; margin-bottom: 6px; }
.notes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.notes li { display: flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); flex-wrap: wrap; }
.notes .d { font-size: 11px; color: var(--muted); min-width: 44px; }
.res { padding: 1px 8px; border-radius: 6px; }
.res.wolf { background: rgba(208, 71, 63, .25); color: #ffaaa3; }
.res.human { background: rgba(143, 181, 115, .2); color: #c4e3ad; }
.tally ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tally li { padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .25); animation: pop .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.tally li:nth-child(2) { animation-delay: .15s; } .tally li:nth-child(3) { animation-delay: .3s; } .tally li:nth-child(4) { animation-delay: .45s; } .tally li:nth-child(5) { animation-delay: .6s; }
.tally li.top { border: 1px solid rgba(208, 71, 63, .5); }
.tally li.victim { background: rgba(208, 71, 63, .2); }
.tl { display: flex; align-items: center; gap: 10px; }
.tl b { flex: 1; }
.vn { font-weight: 700; color: #ffb0a9; font-variant-numeric: tabular-nums; }
.tbar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); margin-top: 8px; overflow: hidden; }
.tbar i { display: block; height: 100%; background: linear-gradient(90deg, #e0605a, #a8302b); border-radius: 99px; animation: grow .9s cubic-bezier(.2, .8, .2, 1) both .3s; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.voters { font-size: 12px; color: var(--muted); margin-top: 6px; }
.exec-line { margin-top: 14px; text-align: center; font-family: var(--serif); font-size: 18px; color: #ffb0a9; }
.ghost-view .dead-msg { border-color: rgba(160, 170, 210, .25); background: rgba(30, 34, 52, .75); }
.ghost-i { font-size: 34px; color: #b9c0dc; }
.sec-h { margin: 18px 0 10px; font-size: 15px; color: #b9c0dc; }
.ghost-view .timer { display: inline-block; margin-top: 10px; }

/* ---------- 点数 ---------- */
.pts-box { margin: 10px 0 6px; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); display: grid; gap: 4px; }
.pts-h { font-size: 12px; color: var(--muted); }
.pts { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.pts b { font-variant-numeric: tabular-nums; }
.scores { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.scores li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); animation: pop .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.scores li.me { border: 1px solid rgba(120, 170, 255, .35); }
.scores .pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medal { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, .06); font-family: var(--serif); }
.medal.m1 { background: linear-gradient(180deg, #ffe7a0, #d4a437); color: #3a2a06; box-shadow: 0 0 14px rgba(232, 200, 114, .5); }
.medal.m2 { background: linear-gradient(180deg, #f1f3f8, #a9b0c0); color: #23262e; }
.medal.m3 { background: linear-gradient(180deg, #f0c09a, #b06a3a); color: #2b160a; }
.sc { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; font-size: 15px; }
.dl { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 99px; font-variant-numeric: tabular-nums; animation: dlpop .7s .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.dl.pos { background: rgba(111, 207, 124, .18); color: #8fdc98; }
.dl.neg { background: rgba(208, 71, 63, .2); color: #ff9a92; }
.dl.zero { color: var(--muted); }
@keyframes dlpop { from { opacity: 0; transform: scale(.4); } }
.mv { font-size: 11px; font-weight: 700; }
.mv.up { color: #8fdc98; } .mv.down { color: #ff9a92; }

/* ---------- 終了 ---------- */
.win-banner { text-align: center; padding: 28px 18px; border-radius: 20px; margin-bottom: 14px; border: 1px solid; position: relative; overflow: hidden; }
.win-banner h2 { font-size: 30px; margin: 10px 0 6px; }
.win-banner p { color: var(--muted); font-family: var(--serif); }
.w-village { background: radial-gradient(circle at 50% 0, rgba(240, 210, 120, .35), rgba(40, 60, 30, .5)); border-color: rgba(232, 200, 114, .45); }
.w-wolf { background: radial-gradient(circle at 50% 0, rgba(208, 71, 63, .45), rgba(40, 10, 10, .6)); border-color: rgba(208, 71, 63, .5); }
.w-fox { background: radial-gradient(circle at 50% 0, rgba(233, 138, 60, .4), rgba(40, 20, 10, .6)); border-color: rgba(233, 138, 60, .5); }
.wb-i { display: inline-grid; place-items: center; width: 90px; height: 90px; border-radius: 50%; background: rgba(0, 0, 0, .25); }
.reveal { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.reveal li { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); flex-wrap: wrap; animation: pop .4s both; }
.reveal li.win { background: rgba(232, 200, 114, .1); border: 1px solid rgba(232, 200, 114, .3); }
.reveal li.dead .pn { text-decoration: line-through; opacity: .7; }
.reveal .pn { flex: 1; min-width: 80px; }
.reveal .rr { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; }
.reveal .tag { position: static; }
.wm { font-size: 11px; padding: 1px 8px; border-radius: 99px; background: var(--gold); color: #1d1608; font-weight: 700; }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 13.5px; }
.timeline .d { display: inline-block; min-width: 64px; color: var(--muted); font-size: 12px; }

/* ---------- GM ---------- */
.gm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.gm-head h2 { font-size: clamp(24px, 4vw, 38px); }
.gm-head p { color: var(--muted); }
.gm .pgrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.gm .tally { margin-bottom: 14px; }
.gm-ctrl { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.gm-qr { position: fixed; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 16px); display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); z-index: 4; opacity: .85; }
.gm-qr .qr { width: 92px; padding: 5px; border-radius: 8px; box-shadow: none; }
@media (max-width: 700px) { .gm-qr { display: none; } }
.host-panel { position: fixed; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); z-index: 15; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: calc(100vw - 24px); }
.hp-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 99px; background: rgba(10, 14, 25, .9); border: 1px solid rgba(232, 200, 114, .35); color: var(--gold); cursor: pointer; font-size: 12.5px; font-weight: 700; }
.hp-body { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding: 12px; border-radius: 14px; background: rgba(10, 14, 25, .95); border: 1px solid var(--line); max-width: 360px; }
.hp-body .note { width: 100%; text-align: right; }
.host-panel:not(.open) { opacity: .75; }

/* ================= 演出 ================= */
#fx { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.fxs { position: absolute; inset: 0; pointer-events: auto; overflow: hidden; animation: fadein .6s ease both; background: #04060c; }
.fxs.out { animation: fadeout .6s ease both; }
@keyframes fadeout { to { opacity: 0; } }
.fx-skip { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 18px); left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .45); letter-spacing: .1em; animation: fadein 1s 2s both; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, #02030a 0%, #0b1430 45%, #1b2a55 80%, #2d3c6c 100%); }
.stars { position: absolute; inset: 0; }
.stars i { position: absolute; border-radius: 50%; background: #fff; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .25; } }
.moon { position: absolute; left: 50%; top: 16%; width: 18vmin; height: 18vmin; margin-left: -9vmin; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #fffbe6, #f3dc9b 45%, #d1ab55 85%); box-shadow: 0 0 6vmin 1vmin rgba(255, 230, 160, .35), 0 0 22vmin 6vmin rgba(255, 230, 160, .12); animation: moonrise 3.6s cubic-bezier(.2, .7, .2, 1) both; }
.moon span { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 62% 58%, rgba(140, 105, 50, .35) 0 9%, transparent 10%), radial-gradient(circle at 38% 68%, rgba(140, 105, 50, .25) 0 6%, transparent 7%), radial-gradient(circle at 68% 30%, rgba(140, 105, 50, .2) 0 5%, transparent 6%); }
.moon.big { width: 30vmin; height: 30vmin; margin-left: -15vmin; top: 10%; animation-duration: 5s; }
.moon.red { background: radial-gradient(circle at 38% 36%, #ffd0c0, #e0533f 50%, #7c1c14 95%); box-shadow: 0 0 8vmin 2vmin rgba(220, 60, 40, .45), 0 0 30vmin 10vmin rgba(200, 30, 20, .18); }
@keyframes moonrise { from { transform: translateY(40vh) scale(.85); opacity: 0; } 40% { opacity: 1; } }
.village { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42vh; fill: #03050b; }
.village .hill { fill: #070b18; }
.village .hill2 { fill: #050812; }
.village .win { fill: #ffc65a; animation: flicker 3s ease-in-out infinite; }
@keyframes flicker { 50% { opacity: .5; } 52% { opacity: .9; } }
.village .wolf path { fill: #000; }
.fx-intro .village .wolf { opacity: 0; animation: wolfIn 1.6s 3.1s ease both; }
@keyframes wolfIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.fog { position: absolute; left: -50%; width: 200%; height: 40vh; bottom: 6vh; background: radial-gradient(ellipse at 30% 50%, rgba(180, 190, 230, .16), transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(180, 190, 230, .12), transparent 55%); filter: blur(10px); animation: fog 18s linear infinite; z-index: 2; pointer-events: none; }
.fog.f2 { bottom: 0; animation-duration: 26s; animation-direction: reverse; opacity: .8; }
@keyframes fog { to { transform: translateX(25%); } }
.intro-text { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); text-align: center; z-index: 3; padding: 0 20px; }
.intro-text .l1 { font-family: var(--serif); font-size: clamp(15px, 3.6vw, 22px); letter-spacing: .2em; color: #dfe4f5; opacity: 0; animation: textIn 1.6s 1.2s ease both; text-shadow: 0 2px 20px #000; }
.intro-text h1 { font-size: clamp(54px, 15vw, 130px); margin: 12px 0; color: #fff3cf; letter-spacing: .12em; opacity: 0; animation: titleIn 2.2s 4.8s cubic-bezier(.2, .8, .2, 1) both; text-shadow: 0 0 30px rgba(232, 200, 114, .55), 0 0 80px rgba(208, 71, 63, .45), 0 4px 0 #000; }
.intro-text .l2 { font-family: var(--serif); font-size: clamp(16px, 4vw, 26px); letter-spacing: .4em; color: #ffb0a9; opacity: 0; animation: textIn 1.4s 6.8s ease both; }
@keyframes textIn { from { opacity: 0; transform: translateY(10px); letter-spacing: .5em; filter: blur(6px); } to { opacity: 1; } }
@keyframes titleIn { from { opacity: 0; transform: scale(1.35); filter: blur(14px); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: none; } }
.center-text { position: absolute; left: 0; right: 0; top: 42%; transform: translateY(-50%); text-align: center; z-index: 4; padding: 0 22px; }
.center-text.low { top: 72%; }
.center-text h2 { font-size: clamp(34px, 9vw, 72px); color: #fff3cf; letter-spacing: .14em; text-shadow: 0 0 30px rgba(0, 0, 0, .8), 0 0 40px rgba(232, 200, 114, .35); animation: textIn 1.4s .4s both; }
.center-text p { font-family: var(--serif); font-size: clamp(15px, 3.8vw, 22px); margin-top: 10px; color: #e8e2d0; text-shadow: 0 2px 12px #000; animation: textIn 1.4s 1.1s both; line-height: 1.7; }
.fx-night .center-text h2 { color: #d7e0ff; text-shadow: 0 0 30px rgba(120, 150, 255, .5); }
/* 朝 */
.dawn { position: absolute; inset: 0; background: linear-gradient(180deg, #0b1430, #0b1430); animation: dawn 4s ease forwards; }
@keyframes dawn { to { background: linear-gradient(180deg, #6fa3d8 0%, #f3c79b 55%, #f6a86b 100%); } }
.fx-morning .dawn { background: linear-gradient(180deg, #13204a 0%, #6b5a8a 60%, #e59a6a 100%); animation: dawnshift 5s ease forwards; }
@keyframes dawnshift { from { filter: brightness(.3); } to { filter: brightness(1.05); } }
.sun { position: absolute; left: 50%; bottom: 28vh; width: 26vmin; height: 26vmin; margin-left: -13vmin; border-radius: 50%; background: radial-gradient(circle, #fff7d6, #ffc46b 60%, #f08a3c); box-shadow: 0 0 10vmin 4vmin rgba(255, 190, 100, .5); animation: sunrise 4.5s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes sunrise { from { transform: translateY(30vh); } }
.fx-morning .village { fill: #1d1520; }
.fx-morning .village .hill { fill: #2a1d28; } .fx-morning .village .hill2 { fill: #22171f; }
.fx-morning .center-text h2 { color: #fff; text-shadow: 0 2px 30px rgba(120, 60, 20, .6); }
.fx-morning .center-text p { color: #fff8ea; }
/* 襲撃 */
.redsky { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, #3b0b0b, #0a0203 70%); }
.fx-kill .moon { top: 8%; width: 16vmin; height: 16vmin; margin-left: -8vmin; animation: moonpulse 1.7s ease-in-out infinite; }
@keyframes moonpulse { 50% { transform: scale(1.06); filter: brightness(1.2); } }
.kill-stage { position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%); display: flex; justify-content: center; gap: 24px; z-index: 2; }
.vcard, .ecard { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 26px; border-radius: 18px; background: rgba(20, 10, 12, .85); border: 1px solid rgba(255, 140, 130, .25); box-shadow: 0 20px 60px #000; animation: rise .8s .3s both; }
.vcard .av, .ecard .av { width: 84px; height: 84px; font-size: 34px; }
.vcard b, .ecard b { font-family: var(--serif); font-size: 22px; }
.fx-kill.strike .vcard { animation: shake .5s, bleed 1.5s .3s forwards; }
@keyframes shake { 20%, 60% { transform: translateX(-10px) rotate(-2deg); } 40%, 80% { transform: translateX(10px) rotate(2deg); } }
@keyframes bleed { to { filter: grayscale(.9) brightness(.6); transform: rotate(-4deg) translateY(8px); } }
.claws { position: absolute; inset: 8% 10%; width: 80%; height: 70%; z-index: 3; pointer-events: none; }
.claws path { fill: none; stroke: #e2231a; stroke-width: 9px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px #ff2a1a); opacity: 0; }
.fx-kill.strike .claws path { animation: claw .22s cubic-bezier(.6, 0, .4, 1) forwards; opacity: 1; }
.fx-kill.strike .claws path:nth-child(2) { animation-delay: .16s; }
.fx-kill.strike .claws path:nth-child(3) { animation-delay: .32s; }
@keyframes claw { to { stroke-dashoffset: 0; } }
.splat { position: absolute; inset: 0; z-index: 2; opacity: 0; background: radial-gradient(circle at 45% 42%, rgba(150, 0, 0, .55) 0 6%, transparent 18%), radial-gradient(circle at 58% 50%, rgba(130, 0, 0, .45) 0 4%, transparent 12%), radial-gradient(circle at 38% 58%, rgba(120, 0, 0, .4) 0 3%, transparent 9%); }
.fx-kill.strike .splat { animation: splat 1.2s .45s forwards; }
@keyframes splat { from { opacity: 0; transform: scale(.6); } 30% { opacity: 1; } to { opacity: .85; transform: scale(1.1); } }
.vignette { position: absolute; inset: 0; z-index: 3; box-shadow: inset 0 0 18vmin 6vmin rgba(120, 0, 0, .7); opacity: 0; animation: fadein 1.2s 1s forwards; }
.fx-kill.strike { animation: fadein .6s ease both, flash .5s .2s; }
@keyframes flash { 30% { background: #5a0000; } }
.fx-kill .center-text { animation: none; }
.fx-kill .center-text h2 { animation-delay: 4.4s; }
.fx-kill .center-text p { animation-delay: 5s; }
.fx-kill .center-text p { color: #ffc7c0; }
/* 処刑 */
.dark { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, #1d1410, #000 75%); }
.spot { position: absolute; left: 50%; top: -10%; width: 70vmin; height: 120vh; margin-left: -35vmin; background: radial-gradient(ellipse at 50% 0, rgba(255, 230, 180, .3), transparent 65%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); animation: spot 1.2s .2s both; }
@keyframes spot { from { opacity: 0; } 30% { opacity: .4; } 40% { opacity: .1; } to { opacity: 1; } }
.rope { position: absolute; left: 50%; top: -6%; width: 12vmin; height: 46vh; margin-left: -6vmin; z-index: 2; animation: drop 2s .8s cubic-bezier(.3, 1.4, .5, 1) both; }
.rope path, .rope ellipse { fill: none; stroke: #8d6a40; stroke-width: 4; }
.rope path:last-child { fill: #6b4f2e; stroke: none; }
@keyframes drop { from { transform: translateY(-60vh); } }
.ecard { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%); z-index: 3; animation: ecardIn .8s 1.2s both; }
@keyframes ecardIn { from { opacity: 0; transform: translate(-50%, -10%); } }
.stamp { position: absolute; left: 50%; top: 50%; z-index: 4; font-family: var(--serif); font-weight: 800; font-size: clamp(54px, 14vw, 110px); color: #e2231a; border: .08em solid #e2231a; border-radius: .14em; padding: 0 .3em; letter-spacing: .1em; transform: translate(-50%, -40%) rotate(-12deg) scale(3); opacity: 0; mix-blend-mode: screen; text-shadow: 0 0 20px rgba(226, 35, 26, .6); white-space: nowrap; }
.fx-exec.hit .stamp { animation: stampIn .35s cubic-bezier(.5, 0, .7, 1.4) forwards; }
@keyframes stampIn { to { opacity: .95; transform: translate(-50%, -40%) rotate(-12deg) scale(1); } }
.fx-exec.hit { animation: fadein .6s both, shakeAll .4s; }
@keyframes shakeAll { 25% { transform: translate(6px, -4px); } 50% { transform: translate(-6px, 4px); } 75% { transform: translate(4px, 2px); } }
.fx-exec.fall .ecard { animation: fallaway 2.6s cubic-bezier(.5, 0, .9, .4) forwards; }
.fx-exec.fall .rope { animation: none; transform: none; transition: transform 2s ease-in; }
@keyframes fallaway { to { transform: translate(-50%, 70vh) rotate(18deg); filter: grayscale(1) blur(2px); opacity: 0; } }
.ash { position: absolute; inset: 0; z-index: 2; opacity: 0; background-image: radial-gradient(2px 2px at 20% 30%, #888 50%, transparent 51%), radial-gradient(2px 2px at 60% 40%, #777 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 70%, #999 50%, transparent 51%), radial-gradient(2px 2px at 80% 60%, #666 50%, transparent 51%); background-size: 200px 200px; }
.fx-exec.fall .ash { animation: ash 3s linear forwards; }
@keyframes ash { 20% { opacity: .8; } to { opacity: 0; background-position: 0 -300px; } }
.fx-exec .center-text p { animation-delay: 5.4s; color: #ffcf9a; font-size: clamp(18px, 4.6vw, 28px); }
/* 終了 */
.fx-end .bg { position: absolute; inset: 0; }
.win-v .bg { background: radial-gradient(circle at 50% 60%, #f6d58a, #c98b3c 40%, #3a2a14 90%); }
.win-w .bg { background: radial-gradient(circle at 50% 30%, #4a0c0c, #090203 75%); }
.win-f .bg { background: radial-gradient(circle at 50% 50%, #4a240a, #0b0503 75%); }
.rays { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .14) 0 6deg, transparent 6deg 18deg); animation: rot 30s linear infinite; opacity: 0; }
.win-v .rays { opacity: 1; }
.win-f .rays { opacity: .25; background: repeating-conic-gradient(from 0deg, rgba(255, 160, 60, .25) 0 4deg, transparent 4deg 20deg); }
@keyframes rot { to { transform: rotate(360deg); } }
.fx-end .center-text { top: 46%; }
.emblem { display: inline-grid; place-items: center; width: 140px; height: 140px; border-radius: 50%; background: rgba(0, 0, 0, .3); margin-bottom: 14px; animation: titleIn 1.6s .2s both; box-shadow: 0 0 60px rgba(255, 220, 150, .3); }
.win-v .center-text h2 { color: #fffaf0; text-shadow: 0 2px 30px rgba(120, 70, 10, .8); }
.win-w .center-text h2 { color: #ffd2cc; text-shadow: 0 0 40px rgba(226, 35, 26, .8); }
.win-f .center-text h2 { color: #ffd9a8; text-shadow: 0 0 40px rgba(233, 138, 60, .8); }
.wisps i { position: absolute; width: 14px; height: 22px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff3c4, #ff9a3c 45%, transparent 70%); filter: blur(1px) drop-shadow(0 0 10px #ff8a2a); animation: wisp 5s ease-in-out infinite; }
.wisps i:nth-child(1) { left: 15%; top: 30%; } .wisps i:nth-child(2) { left: 80%; top: 25%; animation-delay: -1s; } .wisps i:nth-child(3) { left: 25%; top: 70%; animation-delay: -2s; } .wisps i:nth-child(4) { left: 70%; top: 72%; animation-delay: -3s; } .wisps i:nth-child(5) { left: 50%; top: 15%; animation-delay: -1.5s; } .wisps i:nth-child(6) { left: 88%; top: 55%; animation-delay: -4s; }
@keyframes wisp { 50% { transform: translate(14px, -24px) scale(1.2); opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.badge.cpu { background: rgba(150, 160, 190, .15); color: #c3c9db; border-color: rgba(150, 160, 190, .35); }
.add-cpu { margin-top: 10px; width: 100%; border-style: dashed; }

/* ================= 卓上の質感（光沢・ガラス・発光を抑える） ================= */
:root {
  --serif: 'Cinzel', 'Shippori Mincho B1', 'Nanum Myeongjo', 'Songti SC', 'Hiragino Mincho ProN', serif;
  --radius: 6px;
  --gold: #d9b45a;
  --gold2: #a67c2e;
  --wood: #3a2416;
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body { background: var(--paper-noise), radial-gradient(ellipse at 50% 0, #1b2238 0%, #0d1019 55%, #07080c 100%); background-attachment: fixed; }
body[data-phase="day"], body[data-phase="morning"] { background: var(--paper-noise), radial-gradient(ellipse at 50% 0, #3a2c1d 0%, #1b140e 60%, #0e0a07 100%); background-attachment: fixed; --panel: #241b14; --panel2: #2f241a; --line: #4a3a28; }
body[data-phase="vote"], body[data-phase="voteResult"], body[data-phase="execution"] { background: var(--paper-noise), radial-gradient(ellipse at 50% 0, #3d1512 0%, #1a0c0a 60%, #0b0606 100%); background-attachment: fixed; --panel: #22130f; --panel2: #2e1a14; --line: #4d2a22; }
body { --panel: #161a24; --panel2: #1f2430; --line: #333a4a; }
.bg-stars { opacity: .25; }
.top { background: #0b0d12; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #262b36; }
.card { background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: var(--radius); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 6px 18px rgba(0, 0, 0, .35); border: 1px solid var(--line); }
h1, h2, h3, h4 { letter-spacing: .03em; }
h3 { font-size: 16px; text-transform: none; }
.btn { border-radius: 4px; letter-spacing: .02em; box-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.btn.primary { background: #c99a3d; border: 1px solid #7d5a1c; color: #1b1205; box-shadow: 0 2px 0 #5c4113, inset 0 1px 0 rgba(255, 240, 200, .45); }
.btn.primary:hover { background: #d4a64a; }
.btn.danger { background: #9b2620; border: 1px solid #5e1410; box-shadow: 0 2px 0 #4a0f0c, inset 0 1px 0 rgba(255, 200, 190, .25); }
.btn.big { border-radius: 5px; }
.btn.on { background: #3a2f1a; color: var(--gold); border-color: #6e5626; }
.badge, .team, .tag, .wm, .dl { border-radius: 3px; }
.av { background: var(--c); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); text-shadow: none; }
.phase-chip, .room-chip { border-radius: 4px; }
.hero h1 { background: none; color: #ead7a4; -webkit-background-clip: initial; background-clip: initial; text-shadow: 0 2px 0 #000; }
.hero-moon { box-shadow: 0 0 40px 4px rgba(232, 200, 114, .18); }
.strip-i { border-radius: 6px; background: #12151d; }
.ptok { border-radius: 6px; }
.ptok.sel { box-shadow: 0 0 0 2px var(--gold); background: #2a2416; }
body[data-phase="vote"] .ptok.sel { box-shadow: 0 0 0 2px #d0473f; background: #3a1714; }
.qr { border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, .4); }
.code-big { font-family: 'Cinzel', ui-monospace, monospace; }
.win-banner { border-radius: 6px; }
.modal { background: #151922; border-radius: 6px; }
.stepper, .stepper button { border-radius: 4px; }
.balance .bal-bar { border-radius: 2px; }
.pts-box, .scores li, .reveal li, .plist li, .re-row, .role-entry, .notes li, .tally li { border-radius: 4px; }

/* ---------- 役職カード（木枠＋肖像画＋赤い帯） ---------- */
.flip { aspect-ratio: 520 / 700; width: min(330px, 86vw); }
.face { border-radius: 10px; }
.back { background: var(--paper-noise), repeating-linear-gradient(92deg, #3b2416 0 6px, #43291a 6px 9px, #352013 9px 15px), #3a2416; border: 0; box-shadow: inset 0 0 0 10px #2a170d, inset 0 0 0 11px #6b4a2a, 0 18px 40px rgba(0, 0, 0, .6); }
.back b { font-family: var(--serif); color: #e2c372; }
.back small { color: #b79a78; }
.back-emblem { width: 110px; height: 110px; box-shadow: none; background: radial-gradient(circle at 62% 40%, #3a2416 0 31%, transparent 32%), radial-gradient(circle at 45% 45%, #e6c777, #a77e30 72%); }
.rcard { position: relative; height: 100%; border-radius: 10px; background: var(--paper-noise), repeating-linear-gradient(91deg, #3b2416 0 5px, #46291a 5px 8px, #301c10 8px 14px, #3d2617 14px 19px); box-shadow: inset 0 0 0 2px #1e1008, inset 0 2px 0 3px rgba(255, 220, 170, .08), 0 18px 40px rgba(0, 0, 0, .6); }
.rcard-top { position: absolute; top: 0; left: 0; right: 0; height: 38px; display: grid; place-items: center; font-family: 'Cinzel', var(--serif); font-weight: 600; font-size: 17px; color: #d9b45a; letter-spacing: .08em; text-shadow: 0 1px 0 #000; }
.rcard-art { position: absolute; top: 38px; left: 16px; right: 16px; bottom: 16px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #3b1414, #120707 75%); box-shadow: inset 0 0 0 2px #140a05; display: grid; place-items: center; }
.rcard-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.rcard-name { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 64px; display: grid; place-items: center; background: linear-gradient(180deg, #c42a22, #9a1712); border-top: 2px solid #d9473e; box-shadow: 0 -4px 12px rgba(0, 0, 0, .5); }
.rcard.r-village .rcard-name { background: linear-gradient(180deg, #3d6b3a, #274a26); border-top-color: #5b8a52; }
.rcard.r-fox .rcard-name { background: linear-gradient(180deg, #b8641f, #8a4510); border-top-color: #d98a40; }
.rcard-name span { color: #fbf3e4; font-family: 'Shippori Mincho B1', serif; font-weight: 800; font-size: 32px; letter-spacing: .12em; text-shadow: 0 2px 0 #3a0604, 0 0 2px #3a0604; }
.rcard-name.lang-en span { font-family: 'UnifrakturMaguntia', serif; font-weight: 400; font-size: 38px; letter-spacing: .02em; }
.rcard-name.lang-ko span { font-family: 'Nanum Myeongjo', serif; }
.rcard-name.lang-zh span { font-family: 'Songti SC', 'Noto Serif SC', serif; }
.rdetail-wrap { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.rdetail-wrap.show { max-height: 400px; }
.rdetail { margin: 0 auto 16px; max-width: 330px; text-align: left; padding: 14px; border-radius: 6px; background: #1d1813; border: 1px solid #4a3a28; font-size: 13.5px; display: grid; gap: 6px; }
.rd-h { display: flex; gap: 8px; align-items: center; }
.rd-h b { font-family: var(--serif); font-size: 17px; }
.rc-win { color: var(--gold); font-size: 12.5px; }
.art { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 4px; overflow: hidden; flex: none; background: #1a0d0b; box-shadow: inset 0 0 0 1px #000; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.art .ricon { width: 70%; height: 70%; }
.art.sm { width: 38px; height: 38px; }
.art.xs { width: 26px; height: 26px; border-radius: 3px; }

/* ---------- 実写寄りの場面演出 ---------- */
.scene-img { position: absolute; inset: -4%; background-size: cover; background-position: center; filter: brightness(.25) saturate(.8); transform: scale(1.12); animation: sceneIn 5.5s cubic-bezier(.2, .6, .2, 1) forwards; }
@keyframes sceneIn { 40% { filter: brightness(.45) saturate(.9); } to { filter: brightness(.8) saturate(1); transform: scale(1); } }
.fx-kill.real .kill-stage { top: auto; bottom: 30%; transform: none; opacity: 0; animation: fadein .8s 4.6s forwards; }
.fx-kill.real .vcard { background: rgba(10, 4, 4, .82); border-color: rgba(160, 20, 15, .6); }
.fx-kill.real .vcard .av { filter: grayscale(1) brightness(.7); }
.lightning { position: absolute; inset: 0; background: #dfe6ff; opacity: 0; mix-blend-mode: overlay; animation: lightning 2.6s .4s; }
@keyframes lightning { 0%, 8%, 14%, 100% { opacity: 0; } 4%, 11% { opacity: .9; } }
.fx-kill.real.strike .scene-img { animation: sceneIn 5.5s cubic-bezier(.2, .6, .2, 1) forwards, quake .5s .1s; }
@keyframes quake { 20%, 60% { translate: -12px 6px; } 40%, 80% { translate: 10px -6px; } }
.drips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.drips i { position: absolute; top: 0; width: var(--w); height: 0; border-radius: 0 0 50% 50% / 0 0 30% 30%; background: linear-gradient(#5a0000, #9e0b06 70%, #c0150d); opacity: 0; }
.fx-kill.strike .drips i, .fx-exec.hit .drips i { animation: drip 3.4s cubic-bezier(.5, 0, .7, 1) forwards; }
@keyframes drip { 0% { opacity: .95; height: 0; } 100% { opacity: .95; height: var(--h); } }
.fx-kill.real .splat { background: radial-gradient(circle at 40% 45%, rgba(120, 0, 0, .75) 0 5%, transparent 16%), radial-gradient(circle at 62% 55%, rgba(110, 0, 0, .65) 0 4%, transparent 12%), radial-gradient(circle at 30% 70%, rgba(100, 0, 0, .6) 0 2%, transparent 8%), radial-gradient(circle at 75% 30%, rgba(120, 0, 0, .5) 0 3%, transparent 9%); mix-blend-mode: multiply; }
/* ギロチン */
.fx-exec.real { background: #000; }
.fx-exec.real .scene-img.up { filter: brightness(.3); animation: sceneIn 3.4s ease forwards; }
.fx-exec.real .scene-img.down { opacity: 0; transform: none; filter: brightness(.85); animation: none; }
.fx-exec.real.hit .scene-img.down { opacity: 1; animation: quake .45s; }
.fx-exec.real.hit .scene-img.up { opacity: 0; }
.streak { position: absolute; left: 35%; right: 35%; top: -30%; height: 30%; background: linear-gradient(180deg, transparent, rgba(230, 235, 245, .7), rgba(255, 255, 255, .95)); filter: blur(4px); opacity: 0; z-index: 2; }
.fx-exec.drop .streak { animation: streak .22s cubic-bezier(.7, 0, 1, .6) forwards; }
@keyframes streak { 0% { opacity: 1; top: -30%; } 100% { opacity: .9; top: 60%; } }
.flashw { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 4; }
.fx-exec.hit .flashw { animation: flashw .5s ease-out; }
@keyframes flashw { 0% { opacity: .85; background: #fff; } 30% { opacity: .7; background: #8a0000; } 100% { opacity: 0; } }
.spray { position: absolute; left: 50%; top: 58%; z-index: 3; }
.spray i { position: absolute; width: var(--w); height: var(--l); border-radius: 50%; background: linear-gradient(180deg, rgba(120, 0, 0, 0), #8d0a05 30%, #5a0000); opacity: 0; filter: blur(.4px); }
.fx-exec.hit .spray i { animation: spray .9s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes spray { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--r)) scaleY(.3); } 60% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 18vmin)) rotate(var(--r)) scaleY(1); } }
.ecard.top { top: 10%; transform: translate(-50%, 0); animation: ecardIn2 .8s .6s both; padding: 14px 20px; }
@keyframes ecardIn2 { from { opacity: 0; transform: translate(-50%, -14px); } }
.fx-exec.hit .ecard.top { animation: none; filter: grayscale(1); opacity: .9; }
.fx-exec.real .center-text p { animation-delay: 4.6s; }

/* ギロチン（刃を切り出して実際に落とす） */
.gstage { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100vh * 1672 / 941)); aspect-ratio: 1672 / 941; transform: translate(-50%, -50%); overflow: hidden; }
.gscene { position: absolute; inset: 0; background: url(../img/scenes/guillotine_plate.webp) center / 100% 100% no-repeat; filter: brightness(.3); transform: scale(1.05); transform-origin: 50% 52%; animation: gzoom 3.3s cubic-bezier(.3, .6, .3, 1) forwards; }
@keyframes gzoom { to { filter: brightness(.85); transform: scale(1.35); } }
.fx-exec.hit .gscene { animation: gzoom 3.3s cubic-bezier(.3, .6, .3, 1) forwards, quake .45s; animation-fill-mode: forwards; }
.gblade { position: absolute; left: 44.26%; top: 8.29%; width: 10.65%; transition: transform .2s cubic-bezier(.75, 0, 1, .7); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .6)); }
.fx-exec.drop .gblade { transform: translateY(170%); }
.ghead { position: absolute; left: 47.6%; top: 49.4%; width: 4.7%; transition: transform 1.1s cubic-bezier(.5, 0, .8, .6); }
.fx-exec.hit .ghead { transform: translate(6%, 160%) rotate(68deg); }
.gstage .spray { left: 50%; top: 54%; }
.fx-exec.real .streak { display: none; }

.slashes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.slashes i { position: absolute; left: -15%; width: 150vmax; height: 1.3vmin; min-height: 6px; border-radius: 50%; transform-origin: 0 50%; transform: rotate(52deg) scaleX(0); background: linear-gradient(90deg, transparent, #ff2a1a 12%, #c00 55%, rgba(90, 0, 0, .6) 85%, transparent); box-shadow: 0 0 14px rgba(255, 30, 20, .7); }
.slashes i:nth-child(1) { top: -20%; left: 0%; } .slashes i:nth-child(2) { top: -20%; left: 14%; } .slashes i:nth-child(3) { top: -20%; left: 28%; }
.fx-kill.strike .slashes i { animation: slashIn .16s cubic-bezier(.6, 0, .3, 1) forwards, slashFade 3s .6s forwards; }
.fx-kill.strike .slashes i:nth-child(2) { animation-delay: .1s, .7s; } .fx-kill.strike .slashes i:nth-child(3) { animation-delay: .2s, .8s; }
@keyframes slashIn { to { transform: rotate(52deg) scaleX(1); } }
@keyframes slashFade { to { transform: rotate(52deg) scaleX(1); opacity: .25; box-shadow: none; filter: brightness(.5); } }
.mist { position: absolute; inset: 0; z-index: 2; opacity: 0; background: radial-gradient(ellipse at 50% 45%, rgba(130, 0, 0, .55), transparent 55%); }
.fx-kill.strike .mist { animation: mist 1.8s .25s forwards; }
@keyframes mist { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: .55; transform: scale(1.4); } }
.gmist { position: absolute; left: 40%; top: 42%; width: 20%; height: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(140, 0, 0, .7), transparent 65%); opacity: 0; }
.fx-exec.hit .gmist { animation: mist 1.6s forwards; }
.drips i::after { content: ''; position: absolute; bottom: -4px; left: 50%; width: calc(var(--w) * 1.6); height: calc(var(--w) * 1.9); transform: translateX(-50%); border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: #a10d07; }

/* ---------- 襲撃の映像（視点カメラ） ---------- */
.fx-amb { background: #000; }
.amb-cam { position: absolute; inset: -8%; will-change: transform; }
.amb-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; will-change: transform, opacity, filter; }
.fx-amb.run .a-run { opacity: 1; filter: brightness(.55) contrast(1.1); animation: runFwd 3.9s linear forwards; }
@keyframes runFwd { from { transform: scale(1.02); } to { transform: scale(1.45); filter: brightness(.7) contrast(1.15); } }
.fx-amb.run .amb-cam { animation: bob .31s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translate(-1.2%, -1.6%) rotate(-1.2deg); } to { transform: translate(1.2%, 1.6%) rotate(1.2deg); } }
.fx-amb.run .amb-vig { box-shadow: inset 0 0 22vmin 10vmin #000; }
.fx-amb.look .a-run { opacity: 0; }
.fx-amb.look .a-back { opacity: 1; transform: scaleX(-1) scale(1.15); filter: brightness(.45); animation: whip .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes whip { from { transform: scaleX(-1) scale(1.15) translateX(-35%); filter: blur(14px) brightness(.4); } }
.fx-amb.look .amb-cam { animation: none; }
.fx-amb.calm .amb-cam { animation: sway 2.4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: translate(-.4%, -.5%) rotate(-.3deg); } to { transform: translate(.4%, .5%) rotate(.3deg); } }
.fx-amb.calm .a-back { animation: calmZoom 3.4s ease-out forwards; }
@keyframes calmZoom { from { transform: scaleX(-1) scale(1.15); filter: brightness(.45); } to { transform: scaleX(-1) scale(1.05); filter: brightness(.6); } }
.fx-amb.scare .a-back { opacity: 0; }
.fx-amb.scare .a-wolf { opacity: 1; transform-origin: 53% 33%; animation: lunge .45s cubic-bezier(.1, .9, .2, 1) forwards; }
@keyframes lunge { from { transform: scale(1.4); filter: brightness(.2); } to { transform: scale(3.1); filter: brightness(1.15) contrast(1.2); } }
.fx-amb.scare .amb-cam { animation: hardShake .12s linear infinite; }
@keyframes hardShake { 0% { transform: translate(2%, -1%); } 50% { transform: translate(-2%, 1.5%); } 100% { transform: translate(1%, 2%); } }
.amb-black { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 2; }
.fx-amb.cut .amb-black { opacity: 1; }
.fx-amb.cut .slashes i { animation: slashIn .14s cubic-bezier(.6, 0, .3, 1) forwards, slashFade 2.4s .5s forwards; }
.fx-amb.cut .slashes i:nth-child(2) { animation-delay: .08s, .58s; } .fx-amb.cut .slashes i:nth-child(3) { animation-delay: .16s, .66s; }
.fx-amb.fall .amb-black { opacity: 0; transition: opacity .2s; }
.fx-amb.fall .a-wolf { opacity: 0; }
.fx-amb.fall .amb-cam { animation: none; }
.fx-amb.fall .a-ground { opacity: 1; transform-origin: 50% 70%; animation: headFall .9s cubic-bezier(.5, 0, .6, 1.25) forwards, fadeLife 2.6s .9s forwards; }
@keyframes headFall { 0% { transform: rotate(0) translateY(0) scale(1.1); filter: brightness(.5); } 70% { transform: rotate(-84deg) translateY(18%) scale(1.25); } 82% { transform: rotate(-78deg) translateY(14%) scale(1.25); } 100% { transform: rotate(-82deg) translateY(17%) scale(1.25); filter: brightness(.55); } }
@keyframes fadeLife { to { transform: rotate(-82deg) translateY(17%) scale(1.25); filter: brightness(.35) saturate(.2) blur(2px); } }
.amb-blood { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.amb-blood i { position: absolute; width: var(--s); height: var(--s); transform: rotate(var(--r)) scale(0); opacity: 0; border-radius: 46% 54% 38% 62% / 55% 40% 60% 45%; background: radial-gradient(circle at 40% 40%, rgba(160, 10, 5, .95), rgba(90, 0, 0, .9) 55%, rgba(60, 0, 0, 0) 72%); filter: blur(.6px); }
.fx-amb.fall .amb-blood i { animation: bloodHit .35s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes bloodHit { to { transform: rotate(var(--r)) scale(1); opacity: 1; } }
.fx-amb.fall .drips i { animation: drip 3.6s cubic-bezier(.5, 0, .7, 1) forwards; }
.amb-vig { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: box-shadow 2.5s ease; box-shadow: inset 0 0 14vmin 4vmin #000; }
.fx-amb.fall .amb-vig { box-shadow: inset 0 0 30vmin 22vmin rgba(40, 0, 0, .95); }
.fx-amb.dead .amb-cam, .fx-amb.dead .amb-blood, .fx-amb.dead .drips, .fx-amb.dead .slashes { opacity: 0; transition: opacity 1s; }
.amb-end { position: absolute; inset: 0; z-index: 4; opacity: 0; transition: opacity 1.2s; }
.fx-amb.final .amb-end { opacity: 1; }
.amb-end .scene-img { animation: none; filter: brightness(.45); transform: scale(1.05); }
.fx-amb.final .amb-end .scene-img { animation: sceneIn 5s ease forwards; }
.amb-end .center-text h2, .amb-end .center-text p { animation: none; opacity: 0; }
.fx-amb.final .amb-end .center-text h2 { animation: textIn 1.4s .3s both; }
.fx-amb.final .amb-end .center-text p { animation: textIn 1.4s 1s both; color: #ffc7c0; }

/* ================= 真っ暗な部屋に、ろうそく一本 ================= */
body, body[data-phase] { background: #040302 !important; --panel: rgba(16, 12, 9, .86); --panel2: rgba(30, 23, 16, .8); --line: rgba(120, 90, 50, .28); }
body[data-phase="vote"], body[data-phase="voteResult"], body[data-phase="execution"] { --panel: rgba(22, 9, 7, .88); --line: rgba(140, 40, 30, .35); }
.room { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.glow { position: absolute; left: 50%; bottom: -20vh; width: 170vmax; height: 170vmax; margin-left: -85vmax; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(255, 170, 70, .26) 0, rgba(200, 110, 40, .12) 18%, rgba(90, 45, 15, .05) 34%, transparent 48%); transform-origin: 50% 50%; animation: flickerGlow 3.2s infinite; }
@keyframes flickerGlow { 0%, 100% { opacity: .95; transform: scale(1); } 12% { opacity: .78; transform: scale(.985); } 18% { opacity: 1; } 37% { opacity: .86; transform: scale(1.01); } 52% { opacity: .97; } 63% { opacity: .74; transform: scale(.99); } 71% { opacity: .92; } 88% { opacity: .82; } }
.candle { position: absolute; left: 50%; bottom: 0; width: 26px; margin-left: -13px; opacity: .9; }
.wax, .age-candle .wax { width: 26px; height: 64px; border-radius: 5px 5px 0 0; background: linear-gradient(90deg, #9c8a6a, #e9dcc0 40%, #c9b896 70%, #8d7b5c); box-shadow: 0 -2px 0 #f3e8cc inset; }
.flame, .age-candle .flame { position: relative; width: 12px; height: 28px; margin: 0 auto 2px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 80%, #fff8d6 0, #ffd36b 30%, #ff9a2e 60%, rgba(255, 90, 20, 0) 75%); box-shadow: 0 0 18px 6px rgba(255, 170, 60, .45), 0 0 60px 20px rgba(255, 140, 40, .15); transform-origin: 50% 90%; animation: flame 1.6s ease-in-out infinite alternate; }
.flame::after { content: ''; position: absolute; left: 50%; bottom: -3px; width: 2px; height: 8px; margin-left: -1px; background: #2a1a0e; border-radius: 1px; }
@keyframes flame { 0% { transform: scaleY(1) rotate(-2deg); } 30% { transform: scaleY(1.12) rotate(2deg); } 60% { transform: scaleY(.92) rotate(-1deg); } 100% { transform: scaleY(1.06) rotate(1.5deg); } }
main, .top { position: relative; z-index: 1; }
.top { background: rgba(4, 3, 2, .92); border-bottom-color: rgba(120, 90, 50, .2); }
.hero-moon { width: 40px; height: auto; background: none; box-shadow: none; animation: none; margin-bottom: 26px; }
.hero-moon::before { content: ''; display: block; width: 14px; height: 34px; margin: 0 auto 2px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 80%, #fff8d6 0, #ffd36b 30%, #ff9a2e 60%, rgba(255, 90, 20, 0) 75%); box-shadow: 0 0 30px 12px rgba(255, 170, 60, .4), 0 0 120px 50px rgba(255, 140, 40, .12); animation: flame 1.6s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.hero-moon::after { content: ''; position: static; display: block; width: 30px; height: 70px; margin: 0 auto; border-radius: 5px 5px 0 0; background: linear-gradient(90deg, #9c8a6a, #e9dcc0 40%, #c9b896 70%, #8d7b5c); }
.hero h1 { color: #e9d2a0; text-shadow: 0 0 24px rgba(255, 160, 60, .25), 0 2px 0 #000; }
.mini-moon { background: radial-gradient(ellipse at 50% 70%, #fff3c4, #ffb347 55%, rgba(255, 120, 30, 0) 72%); box-shadow: 0 0 12px rgba(255, 160, 60, .5); border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; width: 14px; height: 22px; animation: flame 1.6s ease-in-out infinite alternate; }
.moon-sm, .sun-sm { width: 18px; height: 28px; border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; background: radial-gradient(ellipse at 50% 75%, #fff3c4, #ffb347 50%, rgba(255, 120, 30, 0) 72%); box-shadow: 0 0 16px rgba(255, 160, 60, .5); animation: flame 1.6s ease-in-out infinite alternate; }
.age { width: min(460px, 100%); text-align: center; }
.age .modal-body { display: grid; gap: 12px; justify-items: center; padding: 28px 22px; }
.age h2 { font-size: 22px; color: #ff9a92; }
.age p { color: var(--muted); }
.age-btns { display: grid; gap: 8px; width: 100%; margin-top: 6px; }
.age-candle { margin-bottom: 4px; }
.age-candle .wax { width: 20px; height: 44px; margin: 0 auto; }

.amb-blood svg { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
.amb-blood .sp { transform: scale(0); opacity: 0; }
.fx-amb.fall .amb-blood .sp { animation: spHit .28s cubic-bezier(.2, 1.3, .4, 1) forwards; }
@keyframes spHit { to { transform: scale(1); opacity: .93; } }
.amb-blood { filter: drop-shadow(0 0 1px rgba(40, 0, 0, .6)); }

.owner-phone { display: grid; gap: 8px; justify-items: start; padding: 12px; border: 1px dashed rgba(217, 180, 90, .45); border-radius: 6px; }
.owner-phone b { color: var(--gold); display: inline-flex; gap: 6px; align-items: center; }
.qr.sm { width: 160px; }
.owner-card { border-color: rgba(217, 180, 90, .45); }

.fx-vid { background: #000; }
.fxv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-end { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; background: rgba(0, 0, 0, .55); }
.fx-vid.final .vid-end { opacity: 1; }
.vid-end .center-text h2, .vid-end .center-text p { animation: none; opacity: 0; }
.fx-vid.final .vid-end .center-text h2 { animation: textIn 1.2s .2s both; }
.fx-vid.final .vid-end .center-text p { animation: textIn 1.2s .7s both; color: #ffc7c0; }

.fx-vid.hit .slashes i { animation: slashIn .14s cubic-bezier(.6, 0, .3, 1) forwards, slashFade 2.4s .5s forwards; }
.fx-vid.hit .slashes i:nth-child(2) { animation-delay: .08s, .58s; } .fx-vid.hit .slashes i:nth-child(3) { animation-delay: .16s, .66s; }
.fx-vid.hit .flashw { animation: flashw .5s ease-out; }
.fx-vid.hit .amb-blood .sp { animation: spHit .28s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.fx-vid.hit .drips i { animation: drip 3.4s cubic-bezier(.5, 0, .7, 1) forwards; }
.fx-vid.hit .fxv { animation: quake .45s; }
.fx-vid .vid-end { z-index: 5; }

/* 役職の小絵（肖像画で統一） */
.ricon.pic { position: relative; display: inline-block; flex: none; border-radius: 4px; overflow: hidden; background: #140c08; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(150, 110, 60, .55), 0 3px 8px rgba(0, 0, 0, .6); filter: none; vertical-align: middle; }
.ricon.pic svg { position: absolute; inset: 18%; width: 64%; height: 64%; }
.ricon.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ricon.pic.t-wolf { box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(170, 40, 30, .7), 0 3px 8px rgba(0, 0, 0, .6); }
.ricon.pic.t-fox { box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(200, 110, 40, .7), 0 3px 8px rgba(0, 0, 0, .6); }
.strip { gap: 10px; }
.strip-i { width: auto; height: auto; background: none; border: 0; border-radius: 0; }
.strip-i .ricon.pic { width: 52px !important; height: 52px !important; }
.re-icon .ricon.pic, .rc-icon .ricon.pic { border-radius: 6px; }
.emblem, .wb-i { overflow: hidden; }
.emblem .ricon.pic, .wb-i .ricon.pic { border-radius: 50%; }
.pt-role .ricon.pic, .rr .ricon.pic, .notes .ricon.pic, .pack .ricon.pic { border-radius: 3px; }
.art { width: auto; height: auto; background: none; box-shadow: none; }

/* 参加者の丸アイコンなし：名前だけで見せる */
.av { display: none !important; }
.ptok { justify-content: center; min-height: 74px; padding: 14px 8px; }
.ptok .pt-name { font-size: 15px; font-family: var(--serif); letter-spacing: .04em; }
.vcard, .ecard { padding: 18px 28px; }
.vcard b, .ecard b { font-size: 26px; }

/* 陣営の色：市民側＝緑、人狼側＝赤、第三陣営＝青（寺本指定） */
:root { --c-village: #3f9b4e; --c-wolf: #c8302a; --c-fox: #2f6fd0; }
.ricon.pic { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--c-village), 0 3px 8px rgba(0, 0, 0, .6); }
.ricon.pic.t-wolf { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--c-wolf), 0 3px 8px rgba(0, 0, 0, .6); }
.ricon.pic.t-fox { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--c-fox), 0 3px 8px rgba(0, 0, 0, .6); }
.strip-i { padding: 3px; }
.t-village { color: #7fd08a; border-color: rgba(63, 155, 78, .6); background: rgba(63, 155, 78, .14); }
.t-wolf { color: #ff8a80; border-color: rgba(200, 48, 42, .6); background: rgba(200, 48, 42, .14); }
.t-fox { color: #8db6ff; border-color: rgba(47, 111, 208, .6); background: rgba(47, 111, 208, .16); }
.rcard.r-village .rcard-name { background: linear-gradient(180deg, #3f8a45, #24572a); border-top-color: #5fae62; }
.rcard.r-fox .rcard-name { background: linear-gradient(180deg, #2f6fd0, #1b4690); border-top-color: #5b93ea; }
.rcard.r-village .rcard-art { box-shadow: inset 0 0 0 3px var(--c-village); }
.rcard.r-wolf .rcard-art { box-shadow: inset 0 0 0 3px var(--c-wolf); }
.rcard.r-fox .rcard-art { box-shadow: inset 0 0 0 3px var(--c-fox); }
.bf { background: linear-gradient(90deg, #4d86e0, #2556a8); }
.lf { color: #8db6ff; }
.w-fox { background: radial-gradient(circle at 50% 0, rgba(47, 111, 208, .4), rgba(10, 18, 40, .6)); border-color: rgba(47, 111, 208, .5); }

.a2hs { text-align: left; margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 6px; color: var(--ink); font-size: 14px; }
:fullscreen body, body:fullscreen { overflow-y: auto; }
:root:fullscreen { background: #040302; }

/* 死んだ人の名前を大きく */
.death { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 6; text-align: center; padding: 0 18px; pointer-events: none; }
.death .d-head { font-family: var(--serif); font-size: clamp(22px, 6vw, 40px); color: #f3e6c8; letter-spacing: .14em; margin-bottom: 14px; opacity: 0; text-shadow: 0 2px 12px #000; }
.death .d-pre { font-family: var(--serif); font-size: clamp(16px, 4.5vw, 26px); color: #e8d7b0; letter-spacing: .2em; margin-bottom: 10px; opacity: 0; text-shadow: 0 2px 10px #000; }
.death .d-names { display: grid; gap: 4px; }
.death .d-names span { display: block; font-family: 'Shippori Mincho B1', var(--serif); font-weight: 800; font-size: clamp(56px, min(17vw, 22vh), 180px); line-height: 1.08; color: #fff3ec; letter-spacing: .06em; word-break: break-all; opacity: 0;
  text-shadow: 0 0 2px #2a0000, 0 3px 0 #3a0000, 0 0 28px rgba(220, 20, 10, .85), 0 0 70px rgba(160, 0, 0, .7); }
.death .d-sub { font-family: var(--serif); font-size: clamp(18px, 5vw, 30px); color: #ffb3aa; letter-spacing: .12em; margin-top: 12px; opacity: 0; text-shadow: 0 2px 10px #000; }
@keyframes nameSlam { 0% { opacity: 0; transform: scale(1.9); filter: blur(10px); } 55% { opacity: 1; transform: scale(.96); filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes dFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fx-vid.final .vid-end .death .d-head, .fx-amb.final .death .d-head { animation: dFade .9s .1s forwards; }
.fx-vid.final .vid-end .death .d-pre { animation: dFade .9s .1s forwards; }
.fx-vid.final .vid-end .death .d-names span, .fx-amb.final .death .d-names span { animation: nameSlam .7s .5s cubic-bezier(.2, .8, .2, 1) forwards; }
.fx-vid.final .vid-end .death .d-names span + span, .fx-amb.final .death .d-names span + span { animation-delay: .8s; }
.fx-vid.final .vid-end .death .d-sub, .fx-amb.final .death .d-sub { animation: dFade .9s 1.2s forwards; }
.fx-kill .death .d-head { animation: dFade .9s 4.2s forwards; } .fx-kill .death .d-names span { animation: nameSlam .7s 4.6s cubic-bezier(.2, .8, .2, 1) forwards; } .fx-kill .death .d-sub { animation: dFade .9s 5.3s forwards; }
.fx-exec .death .d-pre { animation: dFade .9s 4.4s forwards; } .fx-exec .death .d-names span { animation: nameSlam .7s 4.7s cubic-bezier(.2, .8, .2, 1) forwards; } .fx-exec .death .d-sub { animation: dFade .9s 5.4s forwards; }
.vid-start { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 45%, rgba(0, 0, 0, .55)); animation: vsOut .8s 3.6s forwards; }
.vid-start .death .d-pre { animation: dFade .8s .3s forwards; }
.vid-start .death .d-names span { animation: nameSlam .7s .6s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes vsOut { to { opacity: 0; } }
.vid-end { background: rgba(0, 0, 0, .62); }
.exec-line { font-size: 22px; }

/* 恋人陣営（第三陣営＝青い枠） */
.ricon.pic.t-lovers { box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--c-fox), 0 3px 8px rgba(0, 0, 0, .6); }
.t-lovers { color: #8db6ff; border-color: rgba(47, 111, 208, .6); background: rgba(47, 111, 208, .16); }
.rcard.r-lovers .rcard-name { background: linear-gradient(180deg, #2f6fd0, #1b4690); border-top-color: #5b93ea; }
.rcard.r-lovers .rcard-art { box-shadow: inset 0 0 0 3px var(--c-fox); }
.bl { background: linear-gradient(90deg, #e07aa8, #b04a7c); }
.ll { color: #f0a0c4; }
.partners.lover { background: rgba(176, 74, 124, .22); border: 1px solid rgba(224, 122, 168, .45); }
.partners.lover span { color: #f0a0c4; }
.lv-mark { font-size: 11px; padding: 1px 7px; border-radius: 3px; color: #f6c1d8; background: rgba(176, 74, 124, .3); border: 1px solid rgba(224, 122, 168, .5); }
.tag.love { background: #3a0f24; color: #f6a8c8; border-color: #7a2a52; }
.w-lovers { background: radial-gradient(circle at 50% 0, rgba(224, 122, 168, .4), rgba(40, 10, 25, .6)); border-color: rgba(224, 122, 168, .5); }
.win-l .bg { background: radial-gradient(circle at 50% 50%, #5a1f3a, #0b0306 75%); }
.win-l .rays { opacity: .3; background: repeating-conic-gradient(from 0deg, rgba(255, 150, 200, .25) 0 4deg, transparent 4deg 20deg); }
.win-l .center-text h2 { color: #ffd6e8; text-shadow: 0 0 40px rgba(224, 90, 150, .8); }
.death .d-follow { font-family: var(--serif); font-size: clamp(18px, 5vw, 30px); color: #f6a8c8; margin-top: 14px; opacity: 0; text-shadow: 0 2px 10px #000; }
.fx-vid.final .vid-end .death .d-follow { animation: dFade .9s 1.8s forwards; }
.fx-exec .death .d-follow { animation: dFade .9s 6s forwards; }

/* 夜の操作の直後に出る結果 */
.act-result { text-align: center; margin: 6px 0 12px; border-width: 2px; animation: rise .5s cubic-bezier(.2, .9, .3, 1); }
.act-result .ar-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 15px; color: var(--muted); margin-bottom: 8px; }
.act-result .ar-name { font-family: 'Shippori Mincho B1', var(--serif); font-weight: 800; font-size: clamp(30px, 9vw, 44px); line-height: 1.2; color: #fff3ec; }
.act-result .ar-name i { font-style: normal; font-size: .6em; color: var(--muted); }
.act-result .ar-res { display: inline-block; margin-top: 10px; padding: 6px 22px; border-radius: 4px; font-family: var(--serif); font-weight: 800; font-size: clamp(24px, 7vw, 34px); letter-spacing: .1em; }
.act-result .ar-res.human { background: rgba(63, 155, 78, .2); color: #9ee0a8; border: 2px solid var(--c-village); }
.act-result .ar-res.wolf { background: rgba(200, 48, 42, .22); color: #ffaaa3; border: 2px solid var(--c-wolf); animation: pulse 1.2s 2; }
.act-result.wolf { border-color: rgba(200, 48, 42, .6); }
.act-result.human { border-color: rgba(63, 155, 78, .55); }
.act-result.love { border-color: rgba(224, 122, 168, .6); }

/* うんこ */
#poop-layer { position: fixed; inset: 0; z-index: 150; pointer-events: none; overflow: hidden; }
.poop { position: absolute; left: 0; line-height: 1; animation-name: poopFly; animation-timing-function: linear; animation-fill-mode: both; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .6)); }
@keyframes poopFly { 0% { transform: translateX(calc(var(--dir) * -60vw + 50vw - 50%)) rotate(0deg); } 100% { transform: translateX(calc(var(--dir) * 70vw + 50vw - 50%)) rotate(calc(var(--dir) * 720deg)); } }
.poop-from { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); padding: 6px 14px; border-radius: 4px; background: rgba(60, 40, 20, .85); color: #f1d9a8; font-weight: 700; animation: fadein .3s, fadeout .5s 2.6s forwards; }
.poop-btn { margin-top: 12px; }
/* 賭け */
.bet h3 { margin-bottom: 6px; }
.bet-sides { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.bet-sides .btn { flex: 1; min-width: 96px; flex-direction: column; gap: 2px; }
.bet-sides .btn small { font-size: 12px; opacity: .8; }
.bs-village.on { background: rgba(63, 155, 78, .25); border-color: var(--c-village); color: #9ee0a8; }
.bs-wolf.on { background: rgba(200, 48, 42, .25); border-color: var(--c-wolf); color: #ffaaa3; }
.bs-fox.on, .bs-lovers.on { background: rgba(47, 111, 208, .25); border-color: var(--c-fox); color: #a9c8ff; }
.bet-amt { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bet-amt .stepper button { width: auto; min-width: 34px; padding: 0 6px; }
.bet-line { font-family: var(--serif); font-size: 17px; color: var(--gold); }

.banner.bread.yes { background: rgba(217, 163, 90, .14); border: 1px solid rgba(217, 163, 90, .4); color: #f1d29b; }
.banner.bread.no { background: rgba(80, 60, 40, .25); border: 1px solid rgba(120, 90, 60, .4); color: #b9a68a; }
.bread-line { font-size: clamp(14px, 3.6vw, 18px) !important; color: #f1d29b !important; margin-top: 14px !important; }

/* タイトル「人狼、バカ野郎！」を1行に収める */
.hero h1 { font-size: clamp(30px, 9.5vw, 60px); white-space: nowrap; }
.intro-text h1 { font-size: clamp(36px, 11vw, 120px); white-space: nowrap; letter-spacing: .06em; }
.join-card h2 { white-space: nowrap; font-size: clamp(22px, 7vw, 28px); }

.hunter-wait { font-family: var(--serif); font-size: 18px; color: #f1d29b; line-height: 1.7; }
.fx-shot { background: #050202; }
.fx-shot.hit .flashw { animation: flashw .5s ease-out; }
.fx-shot.hit .amb-blood .sp { animation: spHit .28s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.fx-shot.hit .drips i { animation: drip 3.4s cubic-bezier(.5, 0, .7, 1) forwards; }
.fx-shot .death .d-pre { animation: dFade .8s .2s forwards; }
.fx-shot .death .d-names span { animation: nameSlam .7s 1.3s cubic-bezier(.2, .8, .2, 1) forwards; }
.fx-shot .death .d-sub { animation: dFade .9s 2s forwards; }
.fx-shot .death .d-follow { animation: dFade .9s 2.8s forwards; }

/* 恋人に選ばれた知らせ */
.love-bg { background: radial-gradient(ellipse at 50% 40%, rgba(120, 10, 40, .55), rgba(0, 0, 0, .92) 70%); }
.love-modal { text-align: center; max-width: 420px; border: 2px solid #c0406e; box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 60px rgba(192, 64, 110, .35); animation: loveIn .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.love-heart { display: grid; place-items: center; margin: 4px 0 6px; animation: loveBeat 1.1s ease-in-out infinite; }
.love-kicker { color: #e58aa9; letter-spacing: .12em; font-size: 14px; margin: 0; }
.love-title { font-family: var(--serif); font-size: clamp(19px, 5.6vw, 30px); white-space: nowrap; margin: 6px 0 14px; color: #f6d9e2; }
.love-with { margin: 0; color: var(--muted); }
.love-name { font-family: var(--serif); font-weight: 800; font-size: clamp(40px, 13vw, 64px); line-height: 1.15; color: #ff7aa2; text-shadow: 0 0 18px rgba(255, 90, 140, .45); margin: 4px 0 14px; word-break: break-all; }
.love-rules { text-align: left; margin: 0 0 18px; padding-left: 1.2em; display: grid; gap: 6px; font-size: 15px; }
@keyframes loveIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes loveBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }

/* 仲間の名前（人狼・狂信者・共有者・恋人）は大きく */
.partners b { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pchip { font-style: normal; font-weight: 700; padding: 2px 10px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.rd-partners .partners { flex-direction: column; gap: 8px; padding: 14px 12px; margin: 0 0 12px; }
.rd-partners .partners span { font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.rd-partners .pchip { font-family: var(--serif); font-size: clamp(24px, 7.5vw, 34px); padding: 4px 14px; }
.partners.wolfish { background: rgba(120, 16, 12, .45); border: 1px solid rgba(200, 48, 42, .7); }
.partners.wolfish span { color: #f19a93; }
.partners.wolfish .pchip { background: rgba(200, 48, 42, .25); color: #ffd6d2; }

/* 夜：自分の役職と仲間 */
.night-info { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .42); border: 2px solid var(--c-village); }
.night-info.t-wolf { border-color: var(--c-wolf); }
.night-info.t-fox, .night-info.t-lovers { border-color: var(--c-fox); }
.ni-role { display: flex; align-items: center; gap: 12px; }
.ni-role small { display: block; color: var(--muted); font-size: 12px; }
.ni-role b { font-family: var(--serif); font-size: 26px; }
.ni-ab { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.night-info .rd-partners { margin-top: 10px; }
.night-info .rd-partners .partners { margin: 0; }
.love-death { margin: 6px 0 10px; padding: 10px 12px; border-radius: 10px; background: rgba(176, 74, 124, .22); border: 1px solid rgba(224, 122, 168, .5); color: #f6c6da; font-weight: 700; }

/* トップ：みんなの戦績 */
.stats-card { display: grid; gap: 10px; }
.st-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.st-h span { color: var(--muted); font-size: 13px; letter-spacing: .08em; }
.st-h b { font-family: var(--serif); font-size: 22px; }
.st-bar .bo { background: linear-gradient(90deg, #2f6fd0, #6b9be6); }
.st-rows { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; justify-content: space-between; }
.st-rows b { font-size: 16px; }
.st-rows .lv b { color: #8fc46f; } .st-rows .lw b { color: #e3615a; } .st-rows .lo b { color: #6b9be6; }
.stats-card .note { margin: 0; }

/* 長押し・タップでの画像ドラッグや保存メニューを防ぐ */
[data-hold] img, [data-toggle-card] img, .rcard img { -webkit-user-drag: none; user-drag: none; pointer-events: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.flip[data-toggle-card] { touch-action: manipulation; }
.rdetail-wrap.show { max-height: 900px; }

/* 開幕：映像の上に文字、最後に役職カード */
.fx-intro .intro-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intro-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.65) 80%); z-index: 1; }
.fx-intro .intro-text { transition: opacity .8s ease; }
.fx-intro.show-cards .intro-text { opacity: 0; }
.intro-cards { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px; background: rgba(0, 0, 0, .72); opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.fx-intro.show-cards .intro-cards { opacity: 1; }
.ic-h { margin: 0; font-family: var(--serif); font-size: clamp(18px, 4.6vw, 28px); letter-spacing: .2em; color: #f3e2c0; text-shadow: 0 2px 12px #000; }
.ic-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 980px; }
.ic { display: grid; justify-items: center; gap: 6px; width: clamp(78px, 21vw, 130px); opacity: 0; transform: translateY(18px) scale(.9); }
.fx-intro.show-cards .ic { animation: icIn .6s cubic-bezier(.2, 1.2, .4, 1) forwards; }
.ic-art { position: relative; width: 100%; aspect-ratio: 5 / 7; border-radius: 8px; overflow: hidden; border: 3px solid var(--c-village); box-shadow: 0 6px 18px rgba(0, 0, 0, .7); }
.ic-art.t-wolf { border-color: var(--c-wolf); } .ic-art.t-fox, .ic-art.t-lovers { border-color: var(--c-fox); }
.ic-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ic-art b { position: absolute; right: 4px; bottom: 4px; background: rgba(0, 0, 0, .8); color: #fff3cf; font-size: 15px; padding: 1px 7px; border-radius: 6px; }
.ic span { font-family: var(--serif); font-weight: 700; font-size: clamp(12px, 3.2vw, 16px); color: #f3e2c0; text-align: center; }
@keyframes icIn { to { opacity: 1; transform: none; } }
.fx-intro .intro-v { object-position: 30% 50%; }
@media (max-aspect-ratio: 1/1) { .fx-intro .intro-v { object-position: 14% 50%; } }

/* PCの盤面：議論の残り時間を大きく */
.gm-timer { display: grid; justify-items: center; gap: 4px; margin: 4px 0 18px; }
.gm-timer span { color: var(--muted); font-size: clamp(14px, 1.6vw, 20px); letter-spacing: .2em; }
.gm-timer .timer { font-size: clamp(96px, 17vw, 260px); line-height: 1; padding: 10px 40px; border-radius: 24px; color: #fff3cf; text-shadow: 0 0 30px rgba(232, 200, 114, .35); }
.gm-timer .timer.urgent { color: #ff6b5e; }