/*
  盤面のテーマ。版面は 1920x1080 固定で、投影先には拡大縮小だけで合わせる。
  どのテーマでも題は左上。配色は各テーマ2系統まで、信号色（赤と緑）は使わない。
  切り替えは <div class="stage" data-theme="..."> の値だけで行う。
*/

.fit{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden}
.stage{
  width:1920px; height:1080px; flex:none; transform-origin:center center;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:52px 72px 0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  word-break:normal; line-break:strict; overflow-wrap:break-word;
  transition:background-color .6s ease, color .6s ease;
}
.stage > *{position:relative; z-index:1}
.stage .sky, .stage .flag, .stage .paper{position:absolute; z-index:0; pointer-events:none}

.head{display:flex; align-items:flex-end; gap:28px; flex:none; min-height:84px}
.title{font-family:var(--font-title); font-size:var(--title-size); font-weight:var(--title-weight);
  line-height:1.14; letter-spacing:var(--title-track); min-width:0; color:var(--title-ink)}
.title.placeholder{color:var(--ink-faint)}
.meta{margin-left:auto; white-space:nowrap; font-size:20px; color:var(--ink-soft);
  font-family:var(--font-label); padding-bottom:10px; font-variant-numeric:tabular-nums}
.rule{flex:none; width:100%; height:14px; display:block; margin-top:6px}

.board{flex:1 1 auto; min-height:0; overflow:hidden; padding:28px 0 16px; position:relative}
.grid{display:grid; gap:var(--gap); align-content:start; transform-origin:top left; transition:transform .35s ease}
.grid.flat{grid-template-columns:repeat(6, 1fr); grid-auto-flow:row dense}
.grid.plain{grid-template-columns:repeat(var(--cols, 2), 1fr)}
.grid.hero{grid-template-columns:1.18fr 1fr}
.grid.hero.two{grid-template-columns:1.1fr .8fr .8fr}
.grid.hero > [data-role="hero"]{grid-column:1; grid-row:1 / span var(--rows, 1); align-self:stretch}
.grid.hero.band{grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr))}
.grid.hero.band > [data-role="hero"]{grid-column:1 / -1; grid-row:auto}
.grid.hero.band > [data-role="hero"] .mermaid svg{max-height:420px}
.empty{position:absolute; left:0; right:0; top:34%; text-align:center; font-size:30px;
  color:var(--ink-faint); font-family:var(--font-body); letter-spacing:.04em}

.card{display:flex; flex-direction:column; gap:12px; min-width:0; min-height:0; overflow:hidden; position:relative}
.kind{display:flex; align-items:center; gap:12px; font-family:var(--font-label)}
.kind .num{font-variant-numeric:tabular-nums}
.headline{font-family:var(--font-head); font-size:var(--head-size); line-height:1.3; font-weight:var(--head-weight); margin:0}
.body{font-size:var(--body-size); line-height:1.66; color:var(--ink-body); margin:0}
.stat{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
.stat b{font-family:var(--font-stat); font-weight:var(--stat-weight); font-size:var(--stat-size); line-height:.95; color:var(--stat-ink)}
.stat i{font-style:normal; font-size:28px; color:var(--ink-soft)}
.vs{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:stretch}
.vs .side{padding:16px 20px}
.vs .side h4{margin:0 0 6px; font-size:25px; font-weight:var(--head-weight)}
.vs .side p{margin:0; font-size:21px; line-height:1.56; color:var(--ink-body)}
.vs .mid{align-self:center; font-family:var(--font-label); font-size:22px; color:var(--ink-soft)}
.mermaid{display:flex; justify-content:center; overflow:hidden; padding:10px 16px}
.mermaid svg{width:auto !important; max-width:100% !important; height:auto !important; max-height:var(--fig-max, 300px); display:block}
[data-role="hero"] .mermaid{flex:1 1 auto; align-items:center}
[data-role="hero"] .mermaid svg{width:100% !important; max-height:560px}
.src{font-family:var(--font-label); font-size:19px; color:var(--accent); word-break:break-all; margin-top:auto}
.card.pending .mermaid{min-height:120px}

.foot{flex:none; display:flex; align-items:center; gap:22px; padding:12px 0 16px;
  font-size:19px; color:var(--ink-soft); font-family:var(--font-label)}
.heard{flex:1 1 auto; white-space:nowrap; overflow:hidden; direction:rtl; text-align:left}
.heard span{direction:ltr; unicode-bidi:embed}
.statline{white-space:nowrap; font-variant-numeric:tabular-nums; display:none}
.stage.debug .statline{display:block}
.live{width:10px; height:10px; border-radius:50%; background:var(--accent); opacity:.25}
.live.on{animation:pulse 1.9s ease-in-out infinite}
.copy{display:none; white-space:nowrap}
@keyframes pulse{0%,100%{opacity:.22} 50%{opacity:1}}
.flash{position:absolute; top:40px; right:72px; z-index:5; padding:12px 26px; font-size:22px;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
  background:var(--ink); color:var(--bg); border-radius:var(--radius)}

/* ───────────────────────── 1. 手書き風 ───────────────────────── */
.stage[data-theme="sketch"]{
  --bg:#f7f4ec; --ink:#1f1c17; --title-ink:#1f1c17; --ink-body:#3a352d; --ink-soft:#6d6558; --ink-faint:#a39b8c;
  --accent:#0d5b56; --accent-wash:#dfeae8; --mark:#b0692a; --mark-wash:#f3e6d4; --rule:#cfc6b4; --card:#fffdf8;
  --font-body:"Zen Kurenaido","Hiragino Sans","Noto Sans JP",sans-serif;
  --font-title:var(--font-body); --font-head:var(--font-body); --font-label:"Yomogi","Zen Kurenaido",sans-serif;
  --font-stat:"Yomogi",sans-serif;
  --title-size:62px; --title-weight:400; --title-track:.01em; --head-size:36px; --head-weight:400; --body-size:24px;
  --stat-size:96px; --stat-weight:400; --stat-ink:var(--mark); --gap:22px; --radius:120px 14px 110px 16px / 16px 110px 14px 120px;
}
.stage[data-theme="sketch"] .paper{inset:0; opacity:.45;
  background-image:linear-gradient(#ece5d6 1px, transparent 1px), linear-gradient(90deg, #ece5d6 1px, transparent 1px);
  background-size:48px 48px}
.stage[data-theme="sketch"] .card{
  background:var(--card); border:2.5px solid var(--ink); padding:24px 30px; grid-column:span 3; max-height:430px;
  box-shadow:5px 6px 0 rgba(31,28,23,.09); animation:sketch-in .5s cubic-bezier(.2,.75,.3,1) both;
  /* 角の丸みを不揃いにして、定規で引いていない枠に見せる */
  border-radius:230px 16px 210px 18px / 18px 205px 20px 235px}
.stage[data-theme="sketch"] .card:nth-child(3n+2){border-radius:16px 220px 20px 200px / 210px 20px 225px 18px}
.stage[data-theme="sketch"] .card:nth-child(3n+3){border-radius:200px 22px 18px 215px / 20px 200px 22px 18px}
.stage[data-theme="sketch"] .card.wide{grid-column:span 6; max-height:580px}
.stage[data-theme="sketch"] .card.major{grid-column:span 4; max-height:580px}
.stage[data-theme="sketch"] .card.third{grid-column:span 2; padding:20px 24px; max-height:340px}
.stage[data-theme="sketch"] .card.third .headline{font-size:28px}
.stage[data-theme="sketch"] .card.third .body{font-size:20px}
.stage[data-theme="sketch"] .kind{font-size:19px; color:var(--accent)}
.stage[data-theme="sketch"] .kind::after{content:""; flex:1; height:2px; background:var(--rule); border-radius:2px}
.stage[data-theme="sketch"] .mermaid{background:var(--bg); border-radius:12px}
.stage[data-theme="sketch"] .vs .side{background:var(--bg); border:2px dashed var(--rule);
  border-radius:140px 14px 130px 16px / 16px 130px 14px 140px}
.stage[data-theme="sketch"] .vs .side h4{color:var(--accent); font-weight:400}
.stage[data-theme="sketch"] .foot{border-top:2px dotted var(--rule)}
.stage[data-theme="sketch"] .card.bump{animation:sketch-bump .9s ease both}
@keyframes sketch-in{from{opacity:0; transform:translateY(20px) rotate(-.4deg)} to{opacity:1; transform:none}}
@keyframes sketch-bump{0%{background:var(--mark-wash)} 100%{background:var(--card)}}

/* ───────────────────────── 2. Givery ───────────────────────── */
/* 正典: ティール #47BCC6 が主役、ライトティール #A3DDE3 が面と旗、強調だけ青 #264DBF */
.stage[data-theme="givery"]{
  --bg:#ffffff; --ink:#000000; --title-ink:#000000; --ink-body:#484848; --ink-soft:#999999; --ink-faint:#b8bec3;
  --accent:#47BCC6; --accent-light:#A3DDE3; --accent-wash:#EEF6F7; --blue:#264DBF; --surface:#F7F9FA; --rule:#E3E7EA;
  --font-body:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  --font-title:var(--font-body); --font-head:var(--font-body); --font-label:var(--font-body); --font-stat:var(--font-body);
  --title-size:56px; --title-weight:700; --title-track:.02em; --head-size:32px; --head-weight:700; --body-size:23px;
  --stat-size:104px; --stat-weight:700; --stat-ink:var(--blue); --gap:20px; --radius:4px;
  padding-left:196px;
}
.stage[data-theme="givery"] .flag{left:0; top:0; width:150px; height:156px; background:var(--accent-light);
  clip-path:polygon(0 0, 100% 0, 0 100%)}
.stage[data-theme="givery"] .head{margin-left:-6px}
.stage[data-theme="givery"] .rule{width:calc(100% + 6px); height:4px; background:linear-gradient(90deg, var(--accent) 0 140px, var(--rule) 140px); margin-left:-6px}
.stage[data-theme="givery"] .rule path{display:none}
.stage[data-theme="givery"] .board{margin-left:-124px}
.stage[data-theme="givery"] .card{background:#fff; border:1px solid var(--rule); border-top:4px solid var(--accent);
  padding:22px 28px 24px; animation:givery-in .4s ease-out both}
.stage[data-theme="givery"] .card[data-role="hero"]{background:var(--surface); border-top-color:var(--blue)}
.stage[data-theme="givery"] .kind{font-size:17px; font-weight:700; letter-spacing:.06em}
.stage[data-theme="givery"] .kind .num{color:var(--accent); font-size:30px; line-height:1; letter-spacing:0}
.stage[data-theme="givery"] .kind .lbl{background:var(--accent); color:#fff; padding:4px 12px 5px; border-radius:2px}
.stage[data-theme="givery"] .k-diagram .kind .lbl, .stage[data-theme="givery"] .k-stat .kind .lbl{background:var(--blue)}
.stage[data-theme="givery"] .k-note .kind .lbl, .stage[data-theme="givery"] .k-quote .kind .lbl{background:#999999}
.stage[data-theme="givery"] .mermaid{background:#fff; border:1px solid var(--rule)}
.stage[data-theme="givery"] .vs .side{background:var(--surface); border-left:4px solid var(--accent)}
.stage[data-theme="givery"] .vs .side:last-child{border-left-color:var(--blue)}
.stage[data-theme="givery"] .vs .mid{font-weight:700; color:var(--accent)}
.stage[data-theme="givery"] .src{color:var(--blue)}
.stage[data-theme="givery"] .foot{border-top:1px solid var(--rule); margin-left:-124px; font-size:16px}
.stage[data-theme="givery"] .copy{display:block; color:#999}
.stage[data-theme="givery"] .card.bump{animation:givery-bump .9s ease both}
@keyframes givery-in{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes givery-bump{0%{background:var(--accent-wash)} 100%{background:#fff}}

/* ───────────────────────── 3. モノトーン ───────────────────────── */
/* 箱を使わず罫線だけで区切る。色は墨の濃淡だけ */
.stage[data-theme="mono"]{
  --bg:#fbfbf9; --ink:#111111; --title-ink:#111111; --ink-body:#4a4a48; --ink-soft:#8a8a86; --ink-faint:#c4c4bf;
  --accent:#111111; --rule:#1a1a1a; --hair:#d9d9d4;
  --font-body:"Noto Sans JP","Hiragino Sans",sans-serif;
  --font-title:var(--font-body); --font-head:var(--font-body); --font-label:"Noto Sans JP",sans-serif; --font-stat:var(--font-body);
  --title-size:74px; --title-weight:300; --title-track:.02em; --head-size:34px; --head-weight:700; --body-size:23px;
  --stat-size:150px; --stat-weight:200; --stat-ink:#111; --gap:0px; --radius:0;
  padding:64px 88px 0;
}
.stage[data-theme="mono"] .rule{height:1px; background:var(--rule); margin-top:18px}
.stage[data-theme="mono"] .rule path{display:none}
.stage[data-theme="mono"] .grid{column-gap:72px}
.stage[data-theme="mono"] .card{padding:26px 0 28px; border-top:1px solid var(--hair); animation:mono-in .6s ease both}
.stage[data-theme="mono"] .grid.hero > [data-role="hero"]{border-top:none; padding-top:6px}
.stage[data-theme="mono"] .grid > .card:first-child, .stage[data-theme="mono"] .grid.hero > [data-role="item"]:nth-child(2){border-top:none}
.stage[data-theme="mono"] .kind{font-size:14px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft)}
.stage[data-theme="mono"] .kind .num{color:var(--ink); letter-spacing:.08em}
.stage[data-theme="mono"] [data-role="hero"] .headline{font-size:46px; font-weight:300; line-height:1.28}
.stage[data-theme="mono"] .mermaid{padding:18px 0}
.stage[data-theme="mono"] .vs{gap:28px}
.stage[data-theme="mono"] .vs .side{padding:0 0 0 20px; border-left:1px solid var(--ink)}
.stage[data-theme="mono"] .vs .mid{font-size:14px; letter-spacing:.24em}
.stage[data-theme="mono"] .src{color:var(--ink-soft); font-size:17px; letter-spacing:.02em}
.stage[data-theme="mono"] .foot{border-top:1px solid var(--hair); font-size:15px; letter-spacing:.04em}
.stage[data-theme="mono"] .live{background:#111}
.stage[data-theme="mono"] .card.bump .headline{animation:mono-bump .9s ease both}
@keyframes mono-in{from{opacity:0} to{opacity:1}}
@keyframes mono-bump{0%{opacity:.25} 100%{opacity:1}}

/* ───────────────────────── 4. 星空 ───────────────────────── */
/* 夜の紺と金の2系統。動きはゆっくり、減らしたい人の設定には従う */
.stage[data-theme="stars"]{
  --bg:#060a1c; --ink:#f3ecdc; --title-ink:#f7f0e0; --ink-body:rgba(243,236,220,.78); --ink-soft:rgba(243,236,220,.52);
  --ink-faint:rgba(243,236,220,.34); --accent:#d8bb84; --gold:#d8bb84; --gold-soft:rgba(216,187,132,.38); --glass:rgba(255,255,255,.045);
  --font-body:"Noto Sans JP","Hiragino Sans",sans-serif; --font-title:"Shippori Mincho","Hiragino Mincho ProN",serif;
  --font-head:"Shippori Mincho","Hiragino Mincho ProN",serif; --font-label:"Shippori Mincho",serif; --font-stat:"Shippori Mincho",serif;
  --title-size:64px; --title-weight:600; --title-track:.06em; --head-size:34px; --head-weight:600; --body-size:22px;
  --stat-size:112px; --stat-weight:400; --stat-ink:var(--gold); --gap:26px; --radius:999px;
  background:radial-gradient(ellipse 120% 90% at 70% 0%, #1a2150 0%, #0b1030 42%, #05081a 100%);
}
.stage[data-theme="stars"] .sky{inset:0; width:100%; height:100%}
.stage[data-theme="stars"] .rule{height:1px; margin-top:14px;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-soft) 38%, transparent 92%)}
.stage[data-theme="stars"] .rule path{display:none}
.stage[data-theme="stars"] .card{
  background:linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border:1px solid var(--gold-soft); border-radius:20px; padding:26px 32px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 24px 60px -30px rgba(0,0,0,.8);
  animation:stars-in 1.1s cubic-bezier(.16,.84,.3,1) both, stars-float 9s ease-in-out 1.1s infinite}
.stage[data-theme="stars"] .card:nth-child(2n){animation-delay:0s, 2.2s}
.stage[data-theme="stars"] .card:nth-child(3n){animation-delay:0s, 4.1s}
.stage[data-theme="stars"] .kind{font-size:17px; letter-spacing:.3em; color:var(--gold)}
.stage[data-theme="stars"] .kind::before{content:""; width:7px; height:7px; transform:rotate(45deg); background:var(--gold);
  box-shadow:0 0 12px var(--gold)}
.stage[data-theme="stars"] .headline{letter-spacing:.03em}
.stage[data-theme="stars"] .mermaid{background:rgba(3,6,20,.35); border-radius:14px; border:1px solid rgba(216,187,132,.16)}
.stage[data-theme="stars"] .vs .side{background:rgba(255,255,255,.035); border:1px solid rgba(216,187,132,.22); border-radius:12px}
.stage[data-theme="stars"] .vs .side h4{color:var(--gold); font-family:var(--font-head); font-weight:600}
.stage[data-theme="stars"] .stat b{text-shadow:0 0 30px rgba(216,187,132,.35)}
.stage[data-theme="stars"] .foot{border-top:1px solid rgba(216,187,132,.16); font-family:var(--font-body); font-size:16px}
.stage[data-theme="stars"] .live{background:var(--gold); box-shadow:0 0 10px var(--gold)}
.stage[data-theme="stars"] .card.bump{animation:stars-glow 1.4s ease both}
@keyframes stars-in{from{opacity:0; transform:translateY(26px) scale(.985); filter:blur(6px)} to{opacity:1; transform:none; filter:none}}
@keyframes stars-float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
@keyframes stars-glow{0%{box-shadow:0 0 0 1px rgba(216,187,132,.6), 0 0 60px -10px rgba(216,187,132,.55)} 100%{box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 24px 60px -30px rgba(0,0,0,.8)}}

@media (prefers-reduced-motion: reduce){
  .stage .card, .stage .card.bump{animation:none !important}
  .grid{transition:none}
}