/* ============================================================
   時宗 -TOKIMUNE-  style (v0)
   パレット：鉄紺(ink/steel) × 蒼氷(pale cyan) × 銅緑(verdigris)
   ＝元寇「海と嵐」。既存(2048温茶 / td藍朱金 / iai朱月金 / hub紺朱金)と非衝突。
   ============================================================ */
:root {
  --bg:      #0c131c;
  --bg2:     #111d29;
  --panel:   #16232f;
  --panel2:  #1d2f3d;
  --line:    #2b4152;
  --ink:     #e7eef3;   /* 文字 */
  --ink-dim: #bccbd7;
  --ice:     #7fd6d6;   /* 蒼氷アクセント */
  --ice-dim: #3f8f97;
  --verd:    #6fb98a;   /* 銅緑 */
  --gold:    #d9b566;
  --warn:    #e0a94a;
  --danger:  #d95c54;
  --shadow:  0 10px 30px rgba(0,0,0,.45);
  /* 読みやすいゴシック（大正活字を使わない箇所＝選択肢の説明文など） */
  --font-ui: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo",
    "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Noto Sans JP",
    system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E") repeat,
    radial-gradient(120% 92% at 50% 4%, transparent 52%, rgba(0,0,0,.42) 100%) fixed,
    radial-gradient(120% 80% at 50% -10%, #16283a 0%, var(--bg) 60%) fixed,
    var(--bg);
  color: var(--ink);
  font-family: "大正活字", "TaishoKatsuji", "Taisho Katsuji",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo",
    "Yu Gothic Medium", "Yu Gothic", "YuGothic", "Noto Sans JP",
    system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column;
  min-height: 100%;
  overflow-x: hidden;
}

/* ---------- topbar ---------- */
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 12px;
  background: linear-gradient(180deg, rgba(10,17,25,.9), rgba(10,17,25,.55));
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.back { color: var(--ink-dim); text-decoration: none; font-size: 14px; white-space: nowrap; }
.back:hover { color: var(--ice); }
.brand { font-weight: 700; letter-spacing: .04em; margin-right: auto; }
.brand small { color: var(--ice-dim); font-size: 10px; letter-spacing: .18em; margin-left: 4px; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang button {
  appearance: none; border: 0; background: transparent; color: var(--ink-dim);
  font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--ice-dim); color: #05131a; font-weight: 700; }
.audio-ctl { color: var(--ink-dim); }

/* ---------- HUD / メーター ---------- */
.hud { padding: 10px 12px 4px; max-width: 620px; margin: 0 auto; width: 100%; }

/* 襲来カウントダウン */
.countdown { text-align: center; margin-bottom: 10px; }
.cd-face {
  display: inline-flex; align-items: baseline; gap: 5px; flex-wrap: wrap; justify-content: center;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(10,17,25,.5); font-size: 12px; color: var(--ink-dim); letter-spacing: .05em;
}
.cd-lbl { color: var(--danger); font-weight: 700; letter-spacing: .08em; }
.cd-which { color: var(--gold); }
.cd-n { color: var(--ink); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.countdown.soon .cd-face { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger), 0 0 14px rgba(217,92,84,.4); animation: cdpulse 1s ease-in-out infinite; }
.countdown.soon .cd-n { color: var(--danger); }
@keyframes cdpulse { 0%,100%{ opacity:1 } 50%{ opacity:.6 } }

/* 元寇への備え（本命ゲージ） */
.sonae { margin-bottom: 12px; }
.sonae-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.sonae-lbl { font-size: 13px; color: var(--gold); letter-spacing: .06em; font-weight: 600; }
.sonae-v { color: var(--gold); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sonae-bar {
  position: relative; height: 16px; border-radius: 6px;
  background: #0a141d; border: 1px solid var(--line); overflow: hidden;
}
.sonae-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: linear-gradient(90deg, #8a6e2e, var(--gold));
  box-shadow: 0 0 10px rgba(217,181,102,.4);
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
/* 文永の必要ライン(22%)の目印 */
.sonae-bar::after {
  content: ""; position: absolute; left: 22%; top: -1px; bottom: -1px;
  width: 2px; background: rgba(217,92,84,.55);
}
.sonae-delta { font-size: 12px; margin-left: 6px; font-weight: 700; opacity: 0; transition: opacity .12s; color: var(--gold); }
.sonae-delta.show { opacity: 1; }
.sonae-delta.down { color: var(--warn); }

.reign { text-align: center; color: var(--ink-dim); font-size: 12px; letter-spacing: .1em; margin-bottom: 8px; }
.reign-n { color: var(--ice); font-size: 20px; font-weight: 700; margin: 0 4px; }
.reign-unit { font-size: 11px; }

.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.meter { }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; margin-bottom: 3px; }
.meter-name { color: var(--ink-dim); letter-spacing: .05em; }
.meter-val { color: var(--ink); font-variant-numeric: tabular-nums; opacity: .8; font-size: 11px; }
.meter-bar {
  position: relative; height: 10px; border-radius: 999px;
  background: #0a141d; border: 1px solid var(--line); overflow: hidden;
}
.meter-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--ice-dim), var(--ice));
  transition: width .35s cubic-bezier(.4,0,.2,1), background .3s;
}
/* 中央(=50)の基準線 */
.meter-bar::after {
  content: ""; position: absolute; left: 50%; top: -1px; bottom: -1px;
  width: 1px; background: rgba(255,255,255,.16);
}
.meter.warn  .meter-fill { background: linear-gradient(90deg, #b98a2e, var(--warn)); }
.meter.danger .meter-fill { background: linear-gradient(90deg, #a33, var(--danger)); }
.meter.danger .meter-name { color: var(--danger); }
/* ドラッグ中：動くメーターを光らせる（予告） */
.meter.preview { }
.meter.preview .meter-bar { box-shadow: 0 0 0 1px var(--ice), 0 0 10px rgba(127,214,214,.5); }
.meter-delta {
  font-size: 11px; margin-left: 6px; font-weight: 700;
  opacity: 0; transition: opacity .12s;
}
.meter-delta.up   { color: var(--ice); }
.meter-delta.down { color: var(--warn); }
.meter.preview .meter-delta { opacity: 1; }

/* 決定時：動いたメーターが殴られたように弾ける */
.meter.bump .meter-bar { animation: barflash .5s ease; }
.meter.bump .meter-fill { animation: fillpop .5s cubic-bezier(.2,.9,.3,1); }
@keyframes barflash {
  0% { box-shadow: 0 0 0 2px var(--ice), 0 0 18px rgba(127,214,214,.75); }
  100% { box-shadow: none; }
}
@keyframes fillpop { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
/* 危険域に触れたら赤の警報 */
.meter.alarm .meter-bar { animation: alarmflash .55s ease 2; }
@keyframes alarmflash {
  0%,100% { box-shadow: 0 0 0 1px var(--line); }
  50% { box-shadow: 0 0 0 2px var(--danger), 0 0 20px rgba(217,92,84,.85); }
}

/* 画面ゆれ（振れ幅に応じて） */
.shake-sm { animation: shakeSm .34s ease; }
.shake-lg { animation: shakeLg .46s ease; }
@keyframes shakeSm { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
@keyframes shakeLg { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-7px)} 32%{transform:translateX(6px)} 50%{transform:translateX(-5px)} 68%{transform:translateX(4px)} 84%{transform:translateX(-2px)} }

/* 全画面フラッシュ */
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 15; opacity: 0; }
.flash.big.play { animation: flashBig .38s ease; }
.flash.danger.play { animation: flashDanger .42s ease; }
@keyframes flashBig { 0%{opacity:0;background:radial-gradient(circle at 50% 42%, rgba(127,214,214,.28), transparent 65%);} 18%{opacity:1;} 100%{opacity:0;background:radial-gradient(circle at 50% 42%, rgba(127,214,214,.28), transparent 65%);} }
@keyframes flashDanger { 0%{opacity:0;background:radial-gradient(circle at 50% 42%, rgba(217,92,84,.34), transparent 70%);} 16%{opacity:1;} 100%{opacity:0;background:radial-gradient(circle at 50% 42%, rgba(217,92,84,.34), transparent 70%);} }

/* 呼び戻しの帯（あの決断の報い） */
.callback {
  font-size: 11px; letter-spacing: .06em; color: var(--gold); align-self: stretch;
  border: 1px solid rgba(217,181,102,.4); background: rgba(217,181,102,.09);
  border-radius: 6px; padding: 4px 9px; margin-bottom: 10px; text-align: center;
}

/* ---------- stage / card ---------- */
.stage {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 14px 12px 24px; width: 100%; max-width: 620px; margin: 0 auto;
}
.deck { position: relative; width: 100%; max-width: 560px; margin: 6px auto 0; display: flex; align-items: stretch; gap: 7px; }

/* カードの左右に常時「選択肢＋本文」を表示。カードをその側へスワイプして選ぶ。触れた側が強調される */
.swipe-hint {
  flex: 0 0 26%; min-width: 0; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 12px 9px; border-radius: 13px;
  background: rgba(9,15,22,.6); border: 1px solid var(--line);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.swipe-hint.left  { text-align: left;  align-items: flex-start; border-left: 4px solid #e8695c; }
.swipe-hint.right { text-align: right; align-items: flex-end;  border-right: 4px solid #e8695c; }
.swipe-hint .sh-arrow { font-size: 14px; color: var(--ink-dim); }
.swipe-hint .sh-lab { font-family: "TaishoKatsuji", var(--font-ui); font-weight: 700; font-size: 22px; line-height: 1.18; color: #e8695c; }
.swipe-hint .sh-eff { font-family: var(--font-ui); font-size: 11.5px; line-height: 1.5; color: #cdd8e2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
/* スワイプ中：カードを寄せている側を強調 */
.swipe-hint.show  { background: rgba(20,40,58,.55); border-color: var(--ice-dim); }
.swipe-hint.ready { border-color: var(--ice); box-shadow: 0 0 0 2px var(--ice) inset, 0 0 20px rgba(127,214,214,.25); }
.swipe-hint.ready .sh-lab, .swipe-hint.show .sh-arrow { color: #eef6f8; }

/* 操作はスワイプ（＝カードのドラッグ）に一本化＝常時ボタンは廃止 */
.choices { display: none !important; }

/* 初手チュートリアル：スワイプで選ぶ、を教えるコーチ */
.coach {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: 100%; max-width: 380px; margin: 16px auto 0; padding: 14px 16px;
  border: 1px dashed rgba(127,214,214,.45); border-radius: 14px;
  background: rgba(20,40,58,.35); pointer-events: none;
}
.coach[hidden] { display: none; }
.coach-arrows { display: flex; align-items: center; gap: 26px; font-size: 30px; color: var(--ice); }
.coach-arrows .coach-card {
  font-family: "TaishoKatsuji", var(--font-ui); font-size: 22px; color: #e7eef3;
  border: 2px solid var(--line); border-radius: 7px; padding: 4px 12px; background: var(--panel2);
}
.coach-arrows .l { animation: coachL 1.15s ease-in-out infinite; }
.coach-arrows .r { animation: coachR 1.15s ease-in-out infinite; }
@keyframes coachL { 0%,100% { transform: translateX(0); opacity:.45; } 50% { transform: translateX(-13px); opacity:1; } }
@keyframes coachR { 0%,100% { transform: translateX(0); opacity:.45; } 50% { transform: translateX(13px); opacity:1; } }
.coach-text { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: #f0e6c8; letter-spacing: .02em; }

/* 初手だけカードを微かに左右に揺らして「掴んで動かせる」ことを示す */
.card.hintwiggle { animation: cardwiggle 1.7s ease-in-out infinite; }
@keyframes cardwiggle { 0%,100%{ transform: translateX(0) rotate(0); } 25%{ transform: translateX(-9px) rotate(-1.2deg); } 75%{ transform: translateX(9px) rotate(1.2deg); } }

.card {
  position: relative; z-index: 2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23c)' opacity='0.05'/%3E%3C/svg%3E") repeat,
    linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(217,181,102,.10);
  padding: 18px 14px 22px; min-height: 320px;
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  touch-action: pan-y; cursor: grab; user-select: none;
  will-change: transform;
}
/* 朱印（落款）＝古い印刷物の判子 */
.card::after {
  content: "時"; position: absolute; right: 13px; bottom: 11px;
  width: 30px; height: 30px; display: grid; place-items: center;
  color: #cf3b2e; border: 2px solid #cf3b2e; border-radius: 5px;
  font-size: 19px; line-height: 1; opacity: .48; transform: rotate(-5deg);
  pointer-events: none; text-shadow: none;
}
.card.dragging { cursor: grabbing; transition: none; }
.card.snap { transition: transform .28s cubic-bezier(.2,.7,.3,1); }

/* 判子・朱印風の円スタンプ（陣営で色分け＝相関図と統一）。素材不要 */
.portrait {
  --acc: var(--ice-dim);
  position: relative;
  width: 108px; height: 108px; max-width: 100%; border-radius: 50%; flex: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23p)' opacity='0.06'/%3E%3C/svg%3E") repeat,
    radial-gradient(circle at 50% 42%, #21323f, #142129);
  border: 2px solid var(--acc);
  box-shadow: inset 0 0 0 4px rgba(8,14,20,.55), inset 0 0 0 5px var(--acc),
    inset 0 3px 10px rgba(0,0,0,.45), 0 4px 14px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.p-mon {
  font-size: 46px; color: var(--acc); opacity: .92;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.portrait.foe   { --acc: var(--danger); }
.portrait.monk,
.portrait.self  { --acc: var(--verd); }
.portrait.court { --acc: var(--gold); }
/* 立ち絵（あれば判子フレーム内に表示。無ければ p-mon スタンプ） */
.p-img {
  position: absolute; inset: 6px; object-fit: cover; border-radius: 50%;
  z-index: 1; background: #14212b;
}
/* 幾何フラットSVGポートレート */
.p-svg {
  position: absolute; inset: 5px; border-radius: 50%; overflow: hidden;
  z-index: 1; line-height: 0;
}
.p-svg svg { width: 100%; height: 100%; display: block; }

.who { font-size: 13px; color: var(--ice); letter-spacing: .06em; margin-bottom: 12px; }
.ctext { font-size: 19px; line-height: 1.9; text-align: center; color: #f2f6f9; letter-spacing: .01em; max-width: 20em; font-family: var(--font-ui); }

/* ---------- choices ---------- */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 380px; margin-top: 16px; align-items: stretch; }
.choice {
  appearance: none; cursor: pointer;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 13px; min-height: 92px; font-family: inherit; font-size: 16px;
  display: flex; flex-direction: column; align-items: stretch; gap: 7px; justify-content: flex-start;
  text-align: left;
  transition: background .15s, border-color .15s, transform .08s;
  touch-action: manipulation;
}
.choice:hover { border-color: var(--ice-dim); background: var(--panel2); }
.choice:active { transform: translateY(1px); }
.choice.hot { border-color: var(--ice); background: #1b3340; box-shadow: 0 0 0 1px var(--ice) inset; }
.ch-head { display: flex; align-items: center; gap: 7px; }
.choice-r .ch-head { justify-content: space-between; }
.ch-arrow { color: var(--ice-dim); font-size: 13px; flex: none; }
.ch-lab { font-weight: 700; font-size: 18px; line-height: 1.3; color: #e8695c; }
/* 選択肢ごとの「想定される結果」文（数値は上のバーが担う） */
.ch-eff {
  display: block; font-size: 15px; line-height: 1.7; color: #e6edf2;
  font-weight: 400; text-align: left;
  font-family: var(--font-ui); /* 説明文＝白の読みやすいゴシック（ラベルのみ赤） */
}
.ch-eff:empty { display: none; }
.chip {
  font-size: 12px; line-height: 1; padding: 4px 6px; border-radius: 5px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: var(--ink-dim); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.chip.up   { color: var(--ice); border-color: rgba(127,214,214,.35); }
.chip.down { color: var(--warn); border-color: rgba(224,169,74,.35); }
/* 備えチップは金で目立たせる（このゲームの本命） */
.chip.sonae {
  color: #05131a; background: linear-gradient(180deg, var(--gold), #b98a2e);
  border-color: var(--gold); font-weight: 700;
}
.chip.sonae.down { color: var(--warn); background: rgba(224,169,74,.08); border-color: rgba(224,169,74,.4); }

/* 備えが動いたときのフロート表示 */
.sonae { position: relative; }
.sonae-pop {
  position: absolute; right: 8px; top: -2px; pointer-events: none;
  font-size: 15px; font-weight: 700; color: var(--gold); opacity: 0;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.sonae-pop.neg { color: var(--warn); }
.sonae-pop.play { animation: sonaepop 1s ease-out; }
@keyframes sonaepop {
  0% { opacity: 0; transform: translateY(6px) scale(.8); }
  25% { opacity: 1; transform: translateY(-2px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-16px) scale(1); }
}

/* 結果の一言＝"間"をもって前面に出す（deck領域に重ねる） */
.result {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 90%; max-width: 340px; text-align: center; z-index: 4; pointer-events: none;
  font-size: 17px; line-height: 1.7; font-weight: 600; color: var(--ink);
  background: linear-gradient(180deg, rgba(20,34,45,.96), rgba(14,24,32,.96));
  border: 1px solid var(--ice-dim); border-radius: 12px; padding: 16px 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(127,214,214,.18);
}
.result .r-text { display: block; }
.result .r-next {
  display: block; margin-top: 12px; font-size: 12px; font-weight: 600;
  color: var(--ice); opacity: .75; letter-spacing: .04em; animation: nextpulse 1.1s ease-in-out infinite;
}
@keyframes nextpulse { 0%,100%{opacity:.4} 50%{opacity:.9} }
.result.show { animation: resultin .34s cubic-bezier(.2,.8,.3,1); }
@keyframes resultin { 0% { opacity: 0; transform: translate(-50%,-42%) scale(.9); } 60% { opacity: 1; transform: translate(-50%,-52%) scale(1.02); } 100% { transform: translate(-50%,-50%) scale(1); } }
.hint-how { color: var(--ink-dim); font-size: 11px; text-align: center; margin: 14px 12px 0; line-height: 1.6; max-width: 380px; font-family: var(--font-ui); }

/* ---------- overlay (intro / over) ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(6,11,17,.82); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* hidden 属性を確実に効かせる（.overlay の display:flex が [hidden] を上書きしてしまうのを防ぐ） */
.overlay[hidden] { display: none; }
.ov-card {
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: 24px 22px; max-width: 420px; width: 100%; text-align: center;
  max-height: 92vh; overflow-y: auto;
}
/* 終幕の絵札（鎌倉期PD絵巻をバナーに） */
.ov-img {
  display: block; width: calc(100% + 44px); margin: -24px -22px 14px;
  height: 140px; object-fit: cover; object-position: center 42%;
  border-radius: 16px 16px 0 0;
  filter: sepia(.28) contrast(1.03) brightness(.96);
  border-bottom: 1px solid var(--line); box-shadow: inset 0 -30px 30px -20px rgba(6,11,17,.7);
}
.ov-img[hidden] { display: none; }
.ov-mon { font-size: 30px; color: var(--ice); letter-spacing: .1em; margin-bottom: 6px; }
.ov-head { margin: 0 0 12px; font-size: 22px; letter-spacing: .05em; }
.ov-lead { color: #d2dce4; font-size: 15px; line-height: 1.85; margin: 0 0 16px; }
.ov-steps { text-align: left; margin: 0 0 18px; padding-left: 18px; color: var(--ink-dim); font-size: 13px; line-height: 1.75; font-family: var(--font-ui); }
/* イントロの説明リードは読みやすく（結末側 #over .ov-lead は大正活字のまま） */
#intro .ov-lead { font-family: var(--font-ui); }
.ov-steps li { margin-bottom: 6px; }
.ov-btn {
  appearance: none; cursor: pointer; font-family: inherit;
  background: linear-gradient(180deg, var(--ice), var(--ice-dim));
  color: #04141b; font-weight: 700; font-size: 15px;
  border: 0; border-radius: 999px; padding: 12px 30px; letter-spacing: .04em;
  box-shadow: 0 6px 18px rgba(127,214,214,.28); touch-action: manipulation;
}
.ov-btn:active { transform: translateY(1px); }

.score { margin: 6px 0 14px; }
.score-lbl, .score-unit { color: var(--ink-dim); font-size: 12px; }
.score-n { color: var(--gold); font-size: 34px; font-weight: 700; margin: 0 6px; }

.ranks { text-align: left; margin: 0 0 18px; }
.ranks-h { color: var(--ice-dim); font-size: 11px; letter-spacing: .08em; margin-bottom: 6px; text-align: center; }
.ranks-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ranks-list li {
  display: flex; justify-content: space-between; padding: 4px 10px; border-radius: 6px;
  color: var(--ink-dim); font-variant-numeric: tabular-nums;
}
.ranks-list li.me { background: rgba(127,214,214,.12); color: var(--ink); }
.ranks-list li .rk-i { color: var(--ice-dim); width: 2em; }
.ranks-list li .rk-tag { font-size: 10px; color: var(--verd); }

/* 新しい結末の発見バナー */
.ends-new {
  margin: 0 auto 10px; display: inline-block; color: #05131a;
  background: linear-gradient(180deg, var(--gold), #b98a2e); font-weight: 700; font-size: 13px;
  padding: 4px 14px; border-radius: 999px; letter-spacing: .04em;
  box-shadow: 0 4px 16px rgba(217,181,102,.5); animation: newpop .5s ease;
}
@keyframes newpop { 0%{transform:scale(.7);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }

/* 結末コレクション */
.ends { margin: 0 0 16px; }
.ends-h {
  appearance: none; width: 100%; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 8px; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; color: var(--ink-dim); font-size: 13px; touch-action: manipulation;
}
.ends-count { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.ends-caret { margin-left: auto; opacity: .6; transition: transform .2s; }
.ends.open .ends-caret { transform: rotate(180deg); }
.ends-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px;
}
.end-chip {
  font-size: 12px; padding: 6px 8px; border-radius: 7px; text-align: left;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.end-chip.locked { color: var(--ink-dim); opacity: .55; }
.end-chip.got.good { border-color: rgba(217,181,102,.5); color: var(--gold); }
.end-chip.got.dark, .end-chip.got.bad { border-color: rgba(217,92,84,.45); color: var(--danger); }
.end-chip.got.coup { border-color: rgba(224,169,74,.4); color: var(--warn); }
.end-chip.got.mixed { border-color: var(--ice-dim); color: var(--ice); }
.end-chip.fresh { animation: freshglow 1.2s ease 2; }
@keyframes freshglow { 0%,100%{box-shadow:none} 50%{box-shadow:0 0 0 1px var(--gold),0 0 12px rgba(217,181,102,.6)} }

/* over画面の勝敗トーン */
.overlay.lose .ov-mon  { color: var(--danger); }
.overlay.win  .ov-mon  { color: var(--gold); }
/* 文永の役（中間）の見出しトーン */
#invasion .ov-mon { color: var(--danger); animation: cdpulse 1.2s ease-in-out infinite; }
#invasion .ov-head { color: var(--ice); }

/* ---------- about ---------- */
.about { max-width: 620px; margin: 10px auto 0; padding: 18px 16px 40px; color: var(--ink-dim); font-family: var(--font-ui); }
.about h1 { font-size: 15px; color: var(--ink); margin: 0 0 8px; }
.about p { font-size: 12px; line-height: 1.9; margin: 0; }
.about .credit { font-size: 10.5px; opacity: .68; margin-top: 12px; }

/* ---------- topbar: 人物ボタン ---------- */
.people-btn {
  appearance: none; cursor: pointer; font-family: inherit;
  background: rgba(127,214,214,.08); border: 1px solid var(--line); color: var(--ice);
  font-size: 12px; padding: 4px 11px; border-radius: 999px; letter-spacing: .04em;
  touch-action: manipulation; white-space: nowrap;
}
.people-btn:hover { background: rgba(127,214,214,.16); }

/* イントロ/終幕の副ボタン */
.ov-btn.ghost {
  background: transparent; color: var(--ice); box-shadow: none;
  border: 1px solid var(--ice-dim); font-weight: 600; padding: 10px 22px; font-size: 13px;
  margin-top: 10px;
}
.ov-btn.ghost:hover { background: rgba(127,214,214,.1); }

/* ---------- 人物相関図オーバーレイ ---------- */
.people-ov { z-index: 26; align-items: flex-start; padding: 0; }
.people-card {
  max-width: 640px; text-align: left; border-radius: 0; max-height: 100vh;
  padding: calc(16px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
  position: relative;
  font-family: var(--font-ui); /* 相関図は大正活字でなく読みやすいゴシック */
}
.people-card .ov-head { text-align: center; color: var(--ice); }
.people-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px;
  appearance: none; cursor: pointer; width: 34px; height: 34px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--ink-dim);
  font-size: 15px; line-height: 1; touch-action: manipulation;
}
.people-close:hover { color: var(--ink); background: rgba(255,255,255,.12); }
.people-lead { color: var(--ink-dim); font-size: 13px; line-height: 1.8; text-align: center; margin: 0 auto 14px; max-width: 30em; }

/* 核の相関図 SVG */
.people-core { margin: 0 auto 18px; max-width: 380px; }
.pc-svg { width: 100%; height: auto; display: block; overflow: visible; }
.pc-edge { stroke: var(--ice-dim); stroke-width: 2; }
.pc-edge.threat, .pc-edge.blood { stroke: var(--danger); stroke-width: 2.2; }
.pc-feud { stroke: var(--danger); stroke-width: 1.8; stroke-dasharray: 5 3; opacity: .85; }
.pc-ahead { fill: var(--ice-dim); }
.pc-ahead.red { fill: var(--danger); }
.pc-node circle { fill: var(--panel2); stroke: var(--acc, var(--line)); stroke-width: 2.5; }
.pc-node.pc-center circle { stroke: var(--gold); stroke-width: 3; filter: drop-shadow(0 0 9px rgba(217,181,102,.45)); }
.pc-mon { fill: var(--ink); font-size: 17px; font-weight: 700; }
.pc-center .pc-mon { fill: var(--gold); font-size: 22px; }
.pc-name { fill: var(--ink); font-size: 12.5px; font-weight: 700; }
.pc-cname { fill: var(--gold); font-size: 13px; }
.pc-read { fill: var(--ice-dim); font-size: 8px; letter-spacing: .02em; }
/* 線上の関係ラベル（ピル） */
.pc-pill rect { fill: var(--panel2); stroke: var(--line); stroke-width: 1; }
.pc-pill text { fill: var(--ink); font-size: 11.5px; font-weight: 600; }
.pc-pill.threat rect, .pc-pill.blood rect { stroke: var(--danger); }
.pc-pill.threat text, .pc-pill.blood text { fill: var(--danger); }
.pc-pill.feudpill rect { fill: #2a1517; stroke: var(--danger); }
.pc-pill.feudpill text { fill: var(--danger); font-weight: 700; }
/* 凡例＋読み方 */
.pc-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin: 4px 0 8px; }
.pc-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-dim); }
.pc-leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--acc, var(--line)); display: inline-block; }
.pc-howto { font-size: 11px; line-height: 1.65; color: var(--ink-dim); text-align: center; margin: 0 auto; max-width: 30em; }

/* トーン別アクセント（ノード枠・カード左帯） */
.self  { --acc: var(--gold); }
.ally  { --acc: var(--verd); }
.scheme{ --acc: var(--danger); }
.monk  { --acc: var(--ice); }
.court { --acc: var(--warn); }
.rough { --acc: #c9975a; }
.folk  { --acc: var(--ink-dim); }
.foe   { --acc: var(--danger); }
.pc-node.foe circle { stroke-dasharray: 3 2; }

/* 陣営別ロスター */
.people-roster { display: flex; flex-direction: column; gap: 16px; }
.camp-h {
  margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; color: var(--ice-dim);
  border-bottom: 1px solid var(--line); padding-bottom: 5px;
}
.camp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcard {
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  border-left: 3px solid var(--acc, var(--line)); border-radius: 9px; padding: 9px 11px;
}
.pcard.is-you { background: rgba(217,181,102,.07); }
.pcard-top { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.pcard-mon {
  flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center;
  background: var(--panel2); color: var(--acc, var(--ink)); border: 1px solid var(--acc, var(--line));
  font-weight: 700; font-size: 13px;
}
.pcard-name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pcard-read { font-size: 10px; color: var(--ice-dim); margin: -1px 0 5px; letter-spacing: .03em; }
.you-tag { font-size: 9px; color: #05131a; background: var(--gold); border-radius: 4px; padding: 1px 5px; letter-spacing: .06em; }
.pcard-role { font-size: 10.5px; color: var(--ice-dim); margin-bottom: 4px; }
.pcard-tie { font-size: 11.5px; line-height: 1.65; color: var(--ink-dim); margin: 0; }
.pcard-feud { font-size: 10.5px; color: var(--danger); margin-top: 5px; line-height: 1.5; }

/* ---------- 狭幅調整 ---------- */
@media (max-width: 380px) {
  .ctext { font-size: 16px; }
  .card { min-height: 300px; padding: 16px 14px 20px; }
  .portrait { width: 96px; height: 96px; }
  .camp-grid { grid-template-columns: 1fr; }
}

/* ---------- PC（広い画面）：全体を大きく ---------- */
@media (min-width: 760px) {
  .hud, .stage, .about { max-width: 760px; }
  .deck { max-width: 680px; }
  .hint-how { max-width: 560px; }
  .card { min-height: 408px; padding: 28px 28px 34px; border-radius: 20px; }
  .card::after { width: 36px; height: 36px; font-size: 23px; right: 16px; bottom: 14px; }
  .portrait { width: 156px; height: 156px; margin-bottom: 16px; }
  .p-mon { font-size: 60px; }
  .who { font-size: 16px; letter-spacing: .08em; margin-bottom: 16px; }
  .ctext { font-size: 25px; line-height: 1.85; max-width: 18em; }
  .callback { font-size: 14px; }
  .choices { gap: 14px; margin-top: 20px; }
  .choice { min-height: 126px; padding: 18px 20px; border-radius: 14px; }
  .ch-lab { font-size: 21px; }
  .ch-arrow { font-size: 15px; }
  .ch-eff { font-size: 16.5px; line-height: 1.75; }
  .result { font-size: 22px; }
  .r-next { font-size: 14px; }
  .hint-how { font-size: 12.5px; }
  .swipe-hint { flex-basis: 27%; padding: 16px 16px; }
  .swipe-hint .sh-arrow { font-size: 18px; }
  .swipe-hint .sh-lab { font-size: 30px; }
  .swipe-hint .sh-eff { font-size: 14px; }
  .coach { max-width: 500px; }
  .coach-arrows { font-size: 38px; gap: 34px; }
  .coach-arrows .coach-card { font-size: 27px; }
  .coach-text { font-size: 17px; }
  /* HUD 上部 */
  .countdown .cd-face { font-size: 14px; }
  .cd-n { font-size: 24px; }
  .sonae-lbl { font-size: 15px; }
  .sonae-v { font-size: 18px; }
  .reign { font-size: 13px; }
  .reign-n { font-size: 24px; }
  .meter-top { font-size: 13px; }
  .meter-val { font-size: 12px; }
}