/* あなたが総理です — 官邸の世界観 × テレビの選挙速報
   5色の役割：世界＝官邸の深い紺と木 / 主役＝総理（肌・紺スーツ・濃い縁） / 操作＝金黄（解散ボタン・速さ）
             危険＝赤（急落・過半数割れ・大事故） / プレイヤー色＝与党オレンジ（議席図→開票→結果まで固定） */
/* 同梱フォント（OFL）。使う文字だけに絞ってある → scripts/subset-fonts.mjs */
@font-face { font-family: "Dot"; src: url(fonts/DotGothic16.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Maru"; src: url(fonts/MPLUSRounded1c-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --ink: #241a33;
  --wall: #1b2440;
  --wall2: #24315a;
  --wood: #7a4a24;
  --wood2: #9a6232;
  --gold: #ffd23f;
  --gold2: #ffb21a;
  --danger: #ff3b4e;
  --ruling: #ff8a1f;
  --coal: #6fd36a;
  --opp: #4f8dff;
  --paper: #fffaf0;
  --text: #1d1730;
  --muted: #6c6584;
  /* 文字：デザイン決定までは飾りのない太字（前作の光沢・斜体は使わない） */
  --font-ui: "Maru", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Meiryo", system-ui, sans-serif;
  --font-dot: "Dot", "Maru", system-ui, sans-serif;
  --font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}
html, body { font-family: var(--font-ui); font-weight: 700; }
.num-big { font-family: var(--font-jp); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: #12182c;
  color: var(--text);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }

/* PCでは左右を官邸の赤じゅうたんと金の縁で飾る（額縁） */
#frame {
  height: 100%;
  overflow: hidden; /* 揺れの演出で横スクロールを出さない */
  display: flex; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 210, 63, 0.16), transparent 60%),
    repeating-linear-gradient(90deg, #6d1222 0 26px, #7b1628 26px 52px);
}
#app {
  position: relative;
  width: 100%; max-width: 480px; height: 100%; height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  background: var(--wall);
  box-shadow: 0 0 0 4px var(--gold2), 0 0 0 7px var(--ink), 0 0 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 520px) { #app { box-shadow: none; } }
#app > * { grid-column: 1; min-width: 0; }

/* ---------- 上：日付と在任 ---------- */
#top {
  grid-row: 1;
  position: relative;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  background: linear-gradient(180deg, #0f1530, #1b2440);
  border-bottom: 3px solid var(--gold2);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 10px;
}
.top-date { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; }
/* 月の時計：その月の進み具合で円が埋まり、針が回る。止まると灰色 */
.clock { width: 34px; height: 34px; flex: none; }
.clock svg { width: 100%; height: 100%; }
.c-bg { fill: #0f1530; stroke: rgba(243, 231, 207, 0.25); stroke-width: 4; }
.c-fill { fill: none; stroke: var(--gold); stroke-width: 4; stroke-dasharray: 81.7; stroke-dashoffset: 81.7; transform: rotate(-90deg); transform-origin: 16px 16px; }
.c-hand { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; transform-origin: 16px 16px; }
.c-dot { fill: #fff; }
body.paused .c-fill { stroke: #8a8aa0; }
body.paused .clock { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.35; } }
#date { color: #fff; font-family: var(--font-jp); font-weight: 900; font-size: clamp(20px, 6.2vw, 28px); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.top-tenure { grid-column: 1 / 3; display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.top-tenure .lbl { color: var(--gold); font-weight: 800; font-size: 13px; white-space: nowrap; }
#tenure { font-size: clamp(28px, 8.8vw, 40px); line-height: 1.05; color: #fff; }
/* ---------- 官邸 ---------- */
#office { grid-row: 2; position: relative; overflow: hidden; min-height: 0; }
.wall {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, 0.25) 72% 73%, #2a3a66 73%),
    repeating-linear-gradient(90deg, var(--wall2) 0 54px, var(--wall) 54px 58px);
}
.window {
  position: absolute; right: 6%; top: 6%; width: 22%; height: 30%;
  border: 4px solid #c9a24a; border-radius: 4px; overflow: hidden; opacity: 0.55;
}
.window-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #8fd3ff, #d9f1ff); }
.window::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: #c9a24a; }

/* テレビ（ニュース） */
#tv { position: absolute; left: 4%; right: 4%; top: 4%; height: 33%; z-index: 2; }
.tv-screen {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0c1a3d, #10275c);
  border: 5px solid #11131c; border-radius: 10px;
  box-shadow: 0 0 0 3px #3a3f52, 0 8px 0 rgba(0, 0, 0, 0.35);
  overflow: hidden; padding: 8px 10px 6px;
}
.tv-tag {
  position: absolute; right: 8px; top: 6px;
  background: var(--danger); color: #fff; font: 900 11px/1 var(--font-jp);
  padding: 3px 6px; border-radius: 3px; letter-spacing: 0.08em;
}
#news { margin: 0; }
.nw { color: #e9efff; line-height: 1.3; padding: 0 54px 0 8px; border-left: 4px solid #8ea2d8; }
.nw b { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw b { font-size: clamp(15px, 4.6vw, 18px); white-space: normal; }
.nw small { display: none; }
.nw .chip { display: inline-block; margin-top: 4px; font-size: 13px; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.nw.in { animation: newsin 0.35s ease-out; }
.nw.new { opacity: 1; }
.nw.new b { font-size: clamp(16px, 5vw, 20px); white-space: normal; }
.nw:first-child { padding-right: 54px; } /* 右上の NEWS と重ねない */
.nw.new small, .nw.new .chip { display: block; }
.nw.new .chip { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 900; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.nw.good { border-left-color: var(--coal); }
.nw.good .chip { color: #b8ffb0; }
.nw.bad { border-left-color: var(--danger); }
.nw.bad .chip { color: #ffb3bb; }
.nw.big.new b { color: #ffdf5a; }
.nw.new { animation: newsin 0.35s ease-out; }
@keyframes newsin { from { transform: translateX(-12px); opacity: 0; } }

/* 総理と机 */
#pmWrap { position: absolute; left: 0; right: 0; bottom: 15%; height: 50%; z-index: 1; pointer-events: none; }
/* 総理（ドット絵）：整数倍で拡大し、ドットをくっきり保つ */
.pm { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pm img { display: block; width: auto; image-rendering: pixelated; image-rendering: crisp-edges; -webkit-user-drag: none; }
.pm[data-mood="nervous"] img { animation: jitter 0.25s steps(2) infinite; }
/* 在任による変化（重ねる表現）：100年＝幽霊の輪、150年＝化石、200年〜＝銅像、500年〜＝金色 */
.pm-halo, .pm-aura { position: absolute; display: none; pointer-events: none; }
.pm-halo { left: 50%; bottom: calc(var(--imgh, 100%) - 26px); width: min(30%, 110px); height: 14px; z-index: 1; transform: translateX(-50%); border: 4px solid #ffd23f; border-radius: 50%; box-shadow: 0 0 10px #fff3a0; }
.pm-aura { inset: -6% 10%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 140, 0.8), rgba(255, 200, 60, 0) 65%); }
.pm[data-tier="7"] .pm-halo, .pm[data-tier="8"] .pm-halo { display: block; }
.pm[data-tier="7"] img { filter: saturate(0.35) brightness(1.15); opacity: 0.88; }
.pm[data-tier="8"] img { filter: grayscale(1) sepia(0.35) brightness(1.05); }
.pm[data-tier="9"] img, .pm[data-tier="10"] img { filter: sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(0.85); }
.pm[data-tier="11"] img, .pm[data-tier="12"] img { filter: sepia(1) saturate(3) brightness(1.2); }
.pm[data-tier="11"] .pm-aura, .pm[data-tier="12"] .pm-aura { display: block; }
@keyframes jitter { 50% { transform: translateX(1.5px); } }
.desk {
  position: absolute; left: -2%; right: -2%; bottom: 0; height: 17%; min-height: 44px; z-index: 3;
  background: linear-gradient(180deg, var(--wood2), var(--wood) 30%, #5a3418);
  border-top: 4px solid #c48a4c; box-shadow: 0 -4px 0 var(--ink);
}
.desk-plate {
  position: absolute; left: 50%; top: 14%; transform: translateX(-50%);
  background: linear-gradient(180deg, #ffe8a0, #d9a63a); color: #4a2a08;
  font-weight: 900; font-size: 13px; line-height: 1.15; padding: 2px 12px 3px; border: 2px solid #4a2a08; border-radius: 3px; white-space: nowrap;
  text-align: center; box-shadow: 0 2px 0 #4a2a08;
}
.desk-plate small { display: block; font-size: 9px; opacity: 0.75; }

/* 支持率（いつも見える大きな数字） */
#supportBadge {
  position: absolute; left: 3%; bottom: 17%; z-index: 4;
  display: flex; flex-direction: column; align-items: center;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 12px;
  padding: 4px 10px 2px; box-shadow: 3px 4px 0 var(--ink);
  min-width: 86px;
}
#supportBadge .lbl { font-size: 12px; font-weight: 900; color: var(--muted); }
#supportBadge .num { display: flex; align-items: baseline; }
#support { font-size: clamp(36px, 11.5vw, 48px); line-height: 1; color: var(--ink); }
#supportBadge small { font-weight: 900; font-size: 15px; }
#supportBadge.low { background: #ffe1e4; }
#supportBadge.low #support { color: #c4142a; }
.trend { font-weight: 900; font-size: 22px; line-height: 1; }
#supportBadge .trend { position: absolute; right: -14px; top: 18px; background: var(--paper); border: 3px solid var(--ink); border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; font-size: 20px; }
.trend.up { color: #1a9c3a; }
.trend.down { color: var(--danger); }
.trend.flat { color: var(--muted); }
.dpop { position: absolute; right: -6px; top: -16px; font-size: 24px; pointer-events: none; animation: dpop 0.9s ease-out forwards; }
@keyframes dpop { from { transform: translateY(6px) scale(0.6); opacity: 0; } 25% { transform: translateY(0) scale(1.15); opacity: 1; } to { transform: translateY(-22px); opacity: 0; } }

/* 吹き出し（遊びながら教える） */
.bubble {
  position: absolute; left: 4%; top: 30%; z-index: 6; max-width: 62%;
  background: #fff; border: 3px solid var(--ink); border-radius: 14px;
  padding: 7px 9px; font-size: 13px; font-weight: 800; line-height: 1.4;
  box-shadow: 3px 4px 0 var(--ink);
}
.bubble::after { content: ''; position: absolute; right: 22%; bottom: -12px; border: 9px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.bubble.in { animation: pop 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
.hl { outline: 4px solid var(--gold); outline-offset: 2px; animation: hl 0.7s ease-in-out infinite alternate; }
@keyframes hl { to { outline-color: #fff; } }

/* お知らせ（新しい判断材料・称号アップなど。1つずつ） */
.toast {
  position: absolute; left: 4%; right: 4%; bottom: 3%; z-index: 7;
  background: var(--ink); color: #fff; border: 3px solid var(--gold);
  border-radius: 10px; padding: 7px 10px; font-weight: 800; font-size: 14px; line-height: 1.35; text-align: center;
}
.toast.unlock { background: #10275c; border-color: #9ff3ff; }
.toast.unlock::before { content: 'NEW'; display: inline-block; margin-right: 6px; background: #9ff3ff; color: var(--ink); font: 900 11px/1 var(--font-jp); padding: 3px 5px; border-radius: 3px; vertical-align: 2px; }
.toast.title { background: #5a0a3a; border-color: #ff8ad8; }
.toast.result { background: #fff; color: var(--ink); border-color: var(--ink); }
.toast.in { animation: pop 0.25s ease-out; }

/* 2択 */
.choice {
  position: absolute; left: 3%; right: 3%; bottom: 3%; z-index: 8;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink); padding: 8px;
}
.choice.in { animation: pop 0.25s ease-out; }
.choice-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.choice-tag { background: var(--danger); color: #fff; font-weight: 900; font-size: 12px; padding: 1px 6px; border-radius: 4px; }
.choice-head b { font-size: 17px; }
.choice-head small { color: var(--muted); font-weight: 700; font-size: 12px; }
.choice-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.choice-btns button {
  border: 3px solid var(--ink); border-radius: 10px; background: #fff; padding: 7px 6px; min-height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-shadow: 0 3px 0 var(--ink);
}
.choice-btns button:active { transform: translateY(3px); box-shadow: none; }
.choice-btns b { font-size: 16px; font-weight: 900; }
.choice-btns small { font-size: 11px; color: var(--muted); font-weight: 700; line-height: 1.25; }
#choiceA { background: #fff3d6; }
#choiceB { background: #e3f1ff; }
.choice-timer { position: relative; margin-top: 6px; height: 18px; border-radius: 9px; background: #e8e2f2; overflow: hidden; }
#choiceBar { position: absolute; inset: 0; background: linear-gradient(90deg, #ffb21a, #ffd23f); transform-origin: left; }
#choiceKeep { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 800; line-height: 18px; }

/* ---------- 資料 ---------- */
/* ---------- 判断エリア（支持率メーター＋任期の砂時計） ---------- */
#judge { grid-row: 3; position: relative; background: var(--paper); padding: 8px 14px 10px; border-top: 3px solid var(--ink); }
.m-head { display: flex; align-items: baseline; gap: 4px; }
.m-lbl { font-size: 13px; color: var(--muted); margin-right: 4px; white-space: nowrap; }
#support { font-size: clamp(34px, 10vw, 44px); line-height: 1; color: var(--ink); }
.m-head small { font-size: 15px; }
.m-head .trend { margin-left: 6px; font-size: 22px; position: static; width: auto; height: auto; border: 0; background: none; }
.verdict { margin-left: auto; align-self: center; font-family: var(--font-dot); font-size: clamp(14px, 4.4vw, 20px); padding: 3px 10px; border-radius: 6px; color: #fff; white-space: nowrap; }
.verdict.win { background: #1f9d48; }
.verdict.close { background: #e0a100; color: var(--ink); }
.verdict.lose { background: var(--danger); }
.meter { position: relative; height: 22px; margin: 16px 0 6px; border-radius: 6px; overflow: visible; background: #e6e0d2; }
.mz { position: absolute; top: 0; bottom: 0; }
.mz.lose { left: 0; width: var(--line); background: #f3a6ae; border-radius: 6px 0 0 6px; }
.mz.close { left: var(--line); width: calc(var(--safe) - var(--line)); background: #f6d77a; }
.mz.win { left: var(--safe); right: 0; background: #8fd6a0; border-radius: 0 6px 6px 0; }
.m-line { position: absolute; top: -6px; bottom: -6px; left: var(--line); width: 3px; margin-left: -1.5px; background: var(--ink); transition: left 0.3s; }
.m-line em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11px; white-space: nowrap; color: var(--ink); margin-bottom: 1px; }
.m-mark { position: absolute; top: -12px; left: var(--now); width: 0; height: 0; margin-left: -9px; border: 9px solid transparent; border-top: 13px solid var(--ink); border-bottom: 0; transition: left 0.15s linear; }
.m-mark::after { content: ''; position: absolute; left: -2px; top: 9px; width: 4px; height: 17px; background: var(--ink); border-radius: 2px; }
.m-sub { font-size: 12px; color: var(--muted); margin: 2px 0 0; }
.gauge { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--ink); }
.g-lbl { font-size: 13px; width: calc(2em + 22px); white-space: nowrap; }
.g-bar { position: relative; flex: 1; height: 12px; border-radius: 6px; background: #e6e0d2; overflow: hidden; }
.g-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #7a5cff, #b9a8ff); transform-origin: left; }
.g-txt { font-family: var(--font-dot); font-size: 16px; min-width: 6.5em; text-align: right; white-space: nowrap; }
.taigi.full .g-bar i { background: linear-gradient(90deg, #5b3dff, #ffd23f); }
.taigi.full .g-txt { color: #5b3dff; }
.hand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.hand .card { min-height: 50px; border: 2px solid var(--ink); border-radius: 8px; background: #fff7e0; padding: 4px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 3px 0 var(--ink); line-height: 1.2; }
.hand .card b { font-family: var(--font-dot); font-weight: 400; font-size: 15px; }
.hand .card small { font-size: 10px; color: var(--muted); text-align: center; }
.hand .card:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.hand .card.empty { background: #ece6d8; border-style: dashed; box-shadow: none; }
.toast.card { background: #5b3dff; border-color: #fff; }
.toast.warn { background: var(--danger); border-color: #fff; }
.sand { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--ink); }
.s-icon { width: 16px; height: 20px; flex: none; }
.s-lbl { font-size: 13px; white-space: nowrap; width: 2em; }
.s-bar { position: relative; flex: 1; height: 12px; border-radius: 6px; background: #e6e0d2; overflow: hidden; }
.s-bar i { position: absolute; inset: 0; background: linear-gradient(90deg, #ffb21a, #ffd23f); transform-origin: left; }
.sand.low .s-bar i { background: linear-gradient(90deg, var(--danger), #ff8a95); }
.sand.low .s-txt { color: #c4142a; }
.s-txt { font-family: var(--font-dot); font-size: 16px; white-space: nowrap; min-width: 6.5em; text-align: right; }
.sand.refill .s-bar i { animation: refill 1s ease-out; }
@keyframes refill { 0% { filter: brightness(2.2); } 100% { filter: none; } }
#judge .dpop { position: absolute; left: 92px; top: 0; right: auto; }
.toast.refill { background: #1f9d48; border-color: #fff; }
#dSub.warn { color: #b0001b; }
#docs { grid-row: 3; background: var(--paper); }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 8px; border-bottom: 1px solid #ddd3bd; }
.tabs button { border: 0; background: transparent; padding: 7px 4px 5px; font-weight: 800; font-size: 13px; color: var(--muted); border-bottom: 3px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ruling); }
.tabs button.locked::after { content: ' ？'; color: #b0a8c4; }
.panel { height: clamp(104px, 15dvh, 136px); padding: 6px 12px 8px; overflow: hidden; }
.p-seats { display: grid; grid-template-columns: minmax(0, 46%) 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 0 10px; height: 100%; }
.seat-svg { grid-row: 1 / 3; width: 100%; max-height: 100%; }
.seat-svg .r { fill: var(--ruling); }
.seat-svg .c { fill: var(--coal); }
.seat-svg .o { fill: var(--opp); }
.seat-svg .mid { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 2; }
.legend { display: flex; flex-direction: column; gap: 2px; font-weight: 800; font-size: 14px; }
.legend span::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; border: 2px solid var(--ink); vertical-align: -1px; }
.legend .r::before { background: var(--ruling); }
.legend .c::before { background: var(--coal); }
.legend .o::before { background: var(--opp); }
.legend b { font-size: 17px; font-variant-numeric: tabular-nums; }
.p-note { font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.35; }
.p-note b { color: var(--ink); }
.p-note.warn { color: #c4142a; }
.p-support { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; gap: 0 10px; height: 100%; align-items: center; }
.p-support .big { grid-row: 1 / 3; font-weight: 900; font-size: 18px; }
.p-support .big b { font-size: 40px; }
.p-support .trend { font-size: 16px; }
.p-support .spark { grid-column: 1 / 3; width: 100%; height: 100%; min-height: 0; }
.spark polyline { fill: none; stroke: var(--ruling); stroke-width: 2.5; stroke-linejoin: round; }
.spark .guide { stroke: #b9b0cc; stroke-dasharray: 3 3; }
.spark .gt { font-size: 8px; fill: var(--muted); }
.p-support > .p-note:last-child { display: none; }
.p-locked { height: 100%; display: grid; place-items: center; text-align: center; color: var(--muted); font-weight: 800; }
.p-locked b { font-size: 34px; color: #c9c0dc; }
.p-locked p { margin: 0; font-size: 13px; }
.p-predict { display: flex; flex-direction: column; justify-content: center; gap: 6px; height: 100%; }
.pp-head { font-weight: 800; font-size: 14px; }
.pp-head b { font-size: 30px; font-family: var(--font-jp); font-weight: 900; }
.pp-head b.ok { color: #1a8a34; }
.pp-head b.ng { color: #c4142a; }
.pp-bar { position: relative; height: 18px; border: 0; border-radius: 4px; background: var(--opp); overflow: visible; }
.pp-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--ruling) 85%, var(--coal) 85%); border-right: 2px solid var(--ink); }
.pp-range { position: absolute; top: -6px; bottom: -6px; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); background: rgba(255, 255, 255, 0.35); }
.pp-line { position: absolute; top: -9px; bottom: -9px; width: 3px; margin-left: -1.5px; background: var(--danger); }
.pp-sub { font-weight: 900; font-size: 14px; }
.pp-sub.ok { color: #1a8a34; }
.pp-sub.ng { color: #c4142a; }

/* ---------- 操作：速さと解散 ---------- */
#controls { grid-row: 4; background: linear-gradient(180deg, #2a1d14, #1a120c); padding: 8px 10px 8px; border-top: 3px solid var(--ink); }
/* 速さ：シムシティ式。4つの点を線でつなぎ、つまみを右へ動かすほど速い */
/* 一時停止ボタンと速さスライダーを1行に */
.time-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#pauseBtn { flex: none; width: 40px; height: 34px; border-radius: 8px; border: 2px solid #f3e7cf; background: #2a1d14; display: grid; place-items: center; padding: 0; }
#pauseBtn svg { width: 18px; height: 18px; }
#pauseBtn .pp-pause, #pauseBtn .pp-play { fill: #f3e7cf; }
#pauseBtn .pp-play { display: none; }
body.paused #pauseBtn { background: var(--gold); border-color: var(--gold); }
body.paused #pauseBtn .pp-pause { display: none; }
body.paused #pauseBtn .pp-play { display: block; fill: var(--ink); }
#pausedTag { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); z-index: 9; background: rgba(15, 21, 48, 0.88); color: #fff; font-family: var(--font-dot); font-size: 22px; padding: 6px 16px; border: 2px solid var(--gold); border-radius: 8px; pointer-events: none; }
#speed { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: #f3e7cf; touch-action: none; outline: none; }
#speed:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sp-lbl { font-size: 12px; font-weight: 800; white-space: nowrap; }
.sp-track { position: relative; flex: 1; height: 34px; cursor: pointer; }
.sp-line, .sp-fill { position: absolute; left: 12px; top: 15px; height: 4px; border-radius: 2px; }
.sp-line { right: 12px; background: rgba(243, 231, 207, 0.35); }
.sp-fill { background: var(--gold); width: 0; }
.sp-dot { position: absolute; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #2a1d14; border: 2px solid #f3e7cf; }
.sp-dot.on { border-color: var(--gold); background: var(--gold); }
.sp-knob { position: absolute; top: 4px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); box-shadow: 0 2px 0 var(--ink); transition: left 0.12s ease-out; pointer-events: none; }
#speed.drag .sp-knob { transition: none; transform: scale(1.12); }
.sp-now { min-width: 5.2em; text-align: right; font-family: var(--font-jp); font-weight: 900; font-size: 15px; white-space: nowrap; }
body[data-speed="bakusoku"] .sp-now { color: #ff8a95; }
body[data-speed="bakusoku"] .sp-knob { border-color: var(--danger); }
body[data-speed="bakusoku"] .sp-fill { background: var(--danger); }
#dissolve {
  width: 100%; min-height: 72px;
  border: 4px solid var(--ink); border-radius: 16px;
  background: linear-gradient(180deg, #fff6b0 0%, var(--gold) 40%, var(--gold2) 42%, #ff8a1f 100%);
  box-shadow: 0 6px 0 var(--ink), inset 0 -4px 0 rgba(0, 0, 0, 0.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--ink);
}
#dissolve .d-main { font-family: var(--font-jp); font-weight: 900; font-size: clamp(24px, 7.6vw, 32px); letter-spacing: 0.06em; line-height: 1.1; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.7); }
#dissolve .d-sub { font-size: 12px; font-weight: 800; opacity: 0.8; }
#dissolve:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
#dissolve:disabled { filter: grayscale(0.7) brightness(0.8); }
#termInfo { margin-top: 7px; color: #f3e7cf; font-size: 12px; font-weight: 700; text-align: center; line-height: 1.4; white-space: nowrap; }
#termInfo b { font-size: 14px; }
#termInfo b { color: #fff; }
#termInfo em { font-style: normal; color: #ffb3bb; }
#termInfo.soon b { color: #ff8a95; }

/* ---------- 選挙速報 ---------- */
#election {
  grid-row: 2 / 5; grid-column: 1; z-index: 20;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 12px;
  padding: 18px 14px 10px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, #0b1a44, #13308a 60%, #0b1a44);
  color: #fff; cursor: pointer;
}
.el-band { display: flex; align-items: center; gap: 8px; }
.el-tag { background: var(--danger); color: #fff; font-family: var(--font-jp); font-weight: 900; font-size: 22px; padding: 4px 10px; border: 3px solid #fff; transform: skewX(-10deg); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.4); }
#elTitle { font-weight: 900; font-size: 17px; }
#elStep { font-weight: 900; font-size: clamp(18px, 5.6vw, 24px); line-height: 1.35; min-height: 2.7em; }
#election.win #elStep { color: #ffe97a; }
#election.lose #elStep { color: #ff8a95; }
.el-bar { position: relative; display: flex; height: 40px; border: 4px solid #fff; border-radius: 6px; background: #0a1230; overflow: visible; }
.el-bar i { display: block; height: 100%; }
.el-bar .r { background: var(--ruling); }
.el-bar .c { background: var(--coal); }
.el-bar .o { background: var(--opp); margin-left: auto; }
.el-line { position: absolute; left: calc(233 / 465 * 100%); top: -10px; bottom: -10px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 0 2px var(--danger); }
.el-line em { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 12px; font-weight: 900; white-space: nowrap; }
.el-counts { display: flex; justify-content: space-between; margin-top: 8px; font-weight: 900; font-size: 14px; }
.el-counts b { font-family: var(--font-jp); font-weight: 900; font-size: clamp(26px, 8vw, 36px); font-variant-numeric: tabular-nums; }
.el-counts .r b { color: var(--ruling); }
.el-counts .c b { color: var(--coal); }
.el-counts .o b { color: #8fb6ff; }
#elFlow { min-height: 5.6em; }
#elFlow p { margin: 0 0 4px; font-weight: 800; font-size: 15px; line-height: 1.35; animation: newsin 0.3s ease-out both; }
#elFlow p:nth-child(2) { animation-delay: 0.35s; }
#elFlow p:nth-child(3) { animation-delay: 0.7s; }
#elFlow p.small { font-size: 13px; color: #c4d0f5; }
#elFlow p.em { color: #ffe97a; font-size: 17px; }
#elFlow b { color: #ffe97a; }
.el-seats { margin-top: 14px; }
#elPm { flex: 1 1 0; min-height: 0; max-height: 280px; }
#elPm .pm { height: 100%; }
#election.win #elPm img { animation: hop 0.5s steps(2) infinite alternate; }
.title-pm { display: block; height: 258px; margin: -6px auto 10px; image-rendering: pixelated; image-rendering: crisp-edges; }
@media (max-height: 760px) { .title-pm { height: 129px; } }
@keyframes hop { to { transform: translateY(-10px) rotate(3deg); } }
.el-skip { text-align: center; font-size: 12px; color: #8ea2d8; font-weight: 700; }

/* ---------- タイトル・結果 ---------- */
.screen {
  grid-row: 1 / 5; grid-column: 1; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 210, 63, 0.25), transparent 60%),
    repeating-linear-gradient(90deg, var(--wall2) 0 54px, var(--wall) 54px 58px);
  overflow-y: auto;
}
#logo { margin: 0 0 18px; text-align: center; color: #fff; line-height: 1.05; font-family: var(--font-jp); font-weight: 900; }
#logo .lg-s { display: block; font-size: clamp(22px, 7vw, 32px); letter-spacing: 0.3em; color: var(--gold); }
#logo .lg-b { display: block; font-size: clamp(52px, 17vw, 88px); letter-spacing: 0.02em; }
.card {
  width: 100%; max-width: 400px;
  background: var(--paper); border: 4px solid var(--ink); border-radius: 18px;
  box-shadow: 0 6px 0 var(--ink); padding: 14px 16px;
}
.lead { margin: 0 0 8px; text-align: center; font-weight: 900; font-size: 17px; line-height: 1.45; }
.lead b { color: #d9440f; font-size: 1.15em; }
.howto { margin: 0 0 12px; padding-left: 1.4em; font-size: 15px; }
.howto li { margin-bottom: 4px; }
.howto b { display: block; }
.howto small { color: var(--muted); font-weight: 700; }
.big-btn {
  width: 100%; min-height: 62px; border: 4px solid var(--ink); border-radius: 16px;
  background: linear-gradient(180deg, #fff6b0 0%, var(--gold) 40%, var(--gold2) 42%, #ff8a1f 100%);
  font-family: var(--font-jp); font-weight: 900; font-size: 24px; color: var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  animation: beat 1.1s ease-in-out infinite;
}
.big-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
@keyframes beat { 50% { transform: scale(1.03); } }
.best { margin: 10px 0 0; text-align: center; font-size: 13px; font-weight: 800; color: var(--muted); }
.best.new { color: #d9440f; }
.best b { display: block; font-size: 15px; }
.note { margin-top: 10px; font-size: 12px; color: var(--muted); }
.note summary { cursor: pointer; font-weight: 800; }
.note p { margin: 4px 0; line-height: 1.5; }
.res-stamp { font-family: var(--font-jp); font-weight: 900; color: #fff; text-shadow: 3px 3px 0 var(--danger), 6px 6px 0 var(--ink); font-size: clamp(48px, 15vw, 80px); transform: rotate(-6deg); margin-bottom: 10px; animation: stampin 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.res-card { text-align: center; }
.res-label { font-weight: 900; color: var(--muted); font-size: 14px; }
#resTenure { font-size: clamp(40px, 13vw, 60px); line-height: 1.1; color: var(--ink); }
.res-title { font-weight: 900; font-size: 17px; margin-top: 2px; }
.res-span { font-size: 12px; color: var(--muted); font-weight: 700; margin: 2px 0 8px; }
.res-why { text-align: left; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 8px 10px; }
.res-why-h { font-weight: 900; color: #c4142a; font-size: 14px; }
#resWhy { margin: 2px 0 6px; font-weight: 800; font-size: 15px; line-height: 1.45; }
#resFactors { list-style: none; margin: 0; padding: 0; font-size: 13px; }
#resFactors li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-top: 1px dashed #d8d0e6; }
#resFactors li b { white-space: nowrap; font-variant-numeric: tabular-nums; }
#resFactors li.neg b { color: #c4142a; }
#resFactors li.pos b { color: #1a8a34; }
#resFactors li.total { font-weight: 900; border-top: 2px solid var(--ink); }
.hint { margin: 8px 0 12px; font-size: 14px; font-weight: 800; color: #10275c; background: #e3f1ff; border-radius: 8px; padding: 6px 8px; text-align: left; }

/* 演出の文字（ハンコ・支持率の増減）：デザイン決定までは太字＋濃い縁だけ */
.fx { font-family: var(--font-jp); font-weight: 900; color: #fff; white-space: nowrap;
  text-shadow: 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink), 2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink), 3px 5px 0 var(--ink); }
.fx.pink { color: #ff6f8a; }
.fx.cyan { color: #7fe0ff; }
#logo, .stamp, .res-stamp, .dpop { will-change: transform, opacity; }
/* ---------- ハンコ・フラッシュ・揺れ ---------- */
#stampLayer { position: absolute; inset: 0; z-index: 40; pointer-events: none; display: flex; justify-content: center; align-items: flex-start; padding-top: 42dvh; }
#stampLayer .stamp { font-size: clamp(60px, 19vw, 108px); animation: stampin 1.2s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
@keyframes stampin {
  0% { transform: scale(2.6) rotate(-14deg); opacity: 0; }
  14% { transform: scale(1) rotate(-6deg); opacity: 1; }
  80% { transform: scale(1.04) rotate(-6deg); opacity: 1; }
  100% { transform: scale(1.1) rotate(-6deg); opacity: 0; }
}
#flash { position: absolute; inset: 0; z-index: 39; pointer-events: none; opacity: 0; }
#flash.on { animation: flash 0.35s ease-out; }
@keyframes flash { from { opacity: 0.45; } to { opacity: 0; } }
#app.shake { animation: shake 0.32s linear; }
@keyframes shake { 20% { transform: translate(-5px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, 0); } }

#volBtn {
  position: fixed; right: max(10px, env(safe-area-inset-right)); top: calc(8px + env(safe-area-inset-top)); z-index: 50;
  border: 2px solid var(--gold2); background: rgba(15, 21, 48, 0.85); color: #fff; border-radius: 8px;
  font-size: 12px; font-weight: 800; padding: 4px 8px;
}
@media (min-width: 521px) { #volBtn { right: calc(50% - 240px + 10px); } }

/* 背の低い画面（iPhone SE・横向きPC）では詰める */
@media (max-height: 700px) {
  #tenure { font-size: 26px; }
  #dissolve { min-height: 60px; }
  .panel { height: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .stamp, .res-stamp { animation-name: fade !important; }
  .pm img, #election.win #elPm img, .big-btn, .hl, #app.shake, .nw.new { animation: none !important; }
  .dpop { animation-name: fade !important; }
}
@keyframes fade { 0% { opacity: 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 文字の役割：大きい数字・見出し・見せ場＝ドット、説明＝丸ゴシック ---------- */
#date, .num-big, #support, .p-support .big b, .pp-head b, #dissolve .d-main, .nw b, .tv-tag,
.choice-head b, .choice-btns b, .fx, .stamp, #logo, #logo span, .el-tag, #elStep, .el-counts b,
.res-stamp, .big-btn, .sp-now, .desk-plate b, .legend b, #elFlow b, .toast.unlock::before {
  font-family: var(--font-dot); font-weight: 400; font-synthesis: none; font-style: normal; letter-spacing: 0.02em;
}

/* ---------- 天気（30日後の予報）と、切り札＋解散の操作段 ---------- */
.fc { display: flex; align-items: center; gap: 10px; padding: 0 54px 6px 0; margin-bottom: 6px; border-bottom: 1px dashed rgba(196, 208, 245, 0.35); }
.fc-lbl { font-size: 12px; color: #c4d0f5; line-height: 1.2; white-space: nowrap; }
.fc-lbl small { display: block; font-size: 10px; opacity: 0.8; }
.weather { display: flex; align-items: center; gap: 6px; color: #fff; }
.weather svg { width: 40px; height: 34px; flex: none; }
.weather b { font-family: var(--font-dot); font-weight: 400; font-size: clamp(20px, 6.4vw, 28px); white-space: nowrap; }
.weather small { font-size: 12px; white-space: nowrap; }
.weather.up b, .weather.up small { color: #9dffb0; }
.weather.down b, .weather.down small, .weather.storm b { color: #ff9aa6; }
.weather.peak b { color: #ffe27a; }
.act-row { display: flex; gap: 8px; align-items: stretch; }
.act-row #dissolve { flex: 1; min-width: 0; }
.card-btn { flex: 0 0 34%; min-height: 72px; border: 3px solid var(--ink); border-radius: 14px; background: #f1ecff; color: var(--ink); padding: 4px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 5px 0 var(--ink); line-height: 1.2; position: relative; }
.card-btn .cb-tag { position: absolute; top: -10px; left: 8px; background: #5b3dff; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 6px; }
.card-btn b { font-family: var(--font-dot); font-weight: 400; font-size: 18px; }
.card-btn small { font-size: 11px; text-align: center; }
.card-btn em { font-style: normal; font-size: 10px; color: #5b3dff; }
.card-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.card-btn.empty { background: #3a2c22; color: #c8b8a0; border-style: dashed; border-color: #8a7a64; box-shadow: none; }
.card-btn.short { background: #e6e1f2; opacity: 0.75; }
.card-btn.short em { color: #c4142a; }
.act-row #dissolve .d-main { font-size: clamp(20px, 6.4vw, 30px); }

/* 背の低い画面（iPhone SE など）：下半分を詰めて、官邸とテレビの高さを残す */
@media (max-height: 700px) {
  #judge { padding: 4px 12px 6px; }
  #support { font-size: 30px; }
  .meter { margin: 13px 0 4px; height: 18px; }
  .gauge, .sand { margin-top: 4px; }
  .fc-lbl small { display: none; }
  .tv-tag { display: none; }
  .fc { padding-right: 0; }
  .weather svg { width: 30px; height: 26px; }
  .act-row #dissolve, .card-btn { min-height: 56px; }
  .card-btn small { display: none; }
  #controls { padding: 6px 10px; }
  .time-row { margin-bottom: 6px; }
  #top { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
  #tenure { font-size: 24px; }
  #tv { height: 38%; }
}