/* VN runtime fixed styles. Skeleton coordinates are injected from build/skeleton.js. */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* 固定書体=Shippori Mincho(しっぽり明朝・OFL・同梱)。調整盤の全数値はこの書体で確定した(仕様§3)。
   本文500/ネーム600/ルビ700。Noto Sans JPは同梱の最終フォールバック */
@font-face {
  font-family: "Shippori Mincho VN";
  src: url("fonts/ShipporiMincho-Medium.ttf?v=6c53ff42") format("truetype");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho VN";
  src: url("fonts/ShipporiMincho-SemiBold.ttf?v=6c53ff42") format("truetype");
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho VN";
  src: url("fonts/ShipporiMincho-Bold.ttf?v=6c53ff42") format("truetype");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP VN";
  src: url("fonts/NotoSansJP.ttf?v=6c53ff42") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --frame-bg: rgba(0, 0, 0, 0.6);
  --frame-border: rgba(255, 255, 255, 0.18);
  --text-color: #f0f0ea;
  --name-color: #ffd479;
  --accent: #8fa3c8;
  --ui-color: #080808;
  --ui-edge: rgba(255, 255, 255, 0.88);
  --top-overlay: rgba(8, 8, 12, 0.6);
  --panel-bg: rgba(18, 18, 24, 0.96);
  --body-font: "Shippori Mincho VN", "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN",
    "Noto Sans JP VN", "Noto Sans JP", serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; letter-spacing: 0; }
html, body { user-select: none; -webkit-user-select: none; }
img { -webkit-user-drag: none; pointer-events: none; }
input, button { pointer-events: auto; font: inherit; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: var(--body-font); color: var(--text-color); }

#viewport {
  position: fixed; inset: 0; overflow: hidden; background: #000;
  touch-action: manipulation;
}
#canvas {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  width: var(--canvas-w, 0px); height: var(--canvas-h, 0px);
  transform-origin: center center; overflow: hidden; background: #000;
}

.surface { position: absolute; inset: 0; display: none; }
.surface.active { display: block; }
#surface-game { z-index: 1; }
#surface-top, #surface-end { z-index: 10; }

/* Stage */
#cgarea {
  position: absolute; inset: 0; overflow: hidden; background: #000;
}
#scene-look-target, #stage-look, #cutin-layer { position: absolute; inset: 0; }
.cglayer {
  /* insetを-3pxにして親(overflow:hidden)からはみ出させる——覆い・層のGPU合成レイヤは
     クリップと独立に端数丸めされるため、-1pxでは表示倍率(dpr1.25等)次第で1デバイス
     ピクセル分の取り残しが4辺のどこにでも出る(#183)。3pxで丸め誤差を確実に飲む */
  position: absolute; inset: -3px;
  background-size: cover; background-repeat: no-repeat; background-position: center;
  transition: opacity 0.5s ease;
}
#bglayer { z-index: 1; }
#cglayer { z-index: 2; opacity: 0; }
#cglayer.visible { opacity: 1; }
#cutin-layer { z-index: 4; pointer-events: none; }
#cg-frame { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
#fxflash {
  position: absolute; inset: -3px; z-index: 8; background: #fff; opacity: 0;
  pointer-events: none;
}

/* Scrim and text */
#scrim {
  /* 黒帯は背景・CGの減光であって、人物(カットイン z-index:4)を暗くするためのものではない。
     以前は cutin と同じ z-index:4 で、描画順しだいでカットインが帯の下へ潜っていた。 */
  position: absolute; z-index: 3; left: 0; right: 0;
  top: var(--scrim-top, 0px); height: var(--scrim-height, 0px);
  pointer-events: none;
  background: var(--scrim-gradient, none);
}
#textarea {
  position: absolute; z-index: 5;
  left: var(--text-left, 0px); top: var(--text-top, 0px);
  width: var(--text-width, 0px); height: var(--text-height, 0px);
  background: transparent; border: 0; overflow: visible;
}
#bodyzone {
  position: absolute; inset: 0; color: var(--text-color);
  font-weight: 500;
  font-size: var(--text-font-size, 1px);
  line-height: var(--text-line-pitch, 1px);
  letter-spacing: var(--text-letter-spacing, 0);
  -webkit-text-stroke: var(--text-stroke, 0) #000;
  paint-order: stroke fill;
}
#bodyzone .line {
  position: relative; height: var(--text-line-pitch, 1px);
  line-height: var(--text-line-pitch, 1px);
  white-space: pre; overflow: visible; word-break: keep-all;
}
/* 全要素リセット(* { letter-spacing: 0 })が1文字スパンに効いて本文の字間(-0.04em)を打ち消していた
   (36字行が1592→1656pxに広がり枠から食み出す。ユーザー指摘「字詰めが違う」)。字間は本文から継承させる */
#bodyzone .line, #bodyzone .ruby-unit, #bodyzone .ruby-base, #bodyzone .ch:not(.ruby-text) { letter-spacing: inherit; }
#bodyzone .ch.pending { visibility: hidden; }
/* ルビの基準箱=基字のem箱(inline)。inline-blockにすると箱が行ピッチ全体になり、
   ルビが行の箱の上へ食み出して上の行・話者ネームに重なる(調整盤の実装=inline相対+bottom:calc(100%-寄せ)) */
.ruby-unit {
  position: relative; display: inline; vertical-align: baseline;
}
.ruby-text {
  position: absolute; left: 50%; bottom: calc(100% - var(--ruby-shift, 0px));
  transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-size: var(--ruby-font-size, 1px); line-height: 1; font-weight: 700; letter-spacing: 0; /* 調整盤の.rtと同じく字間なし */
}

#namezone {
  position: absolute; z-index: 6;
  left: var(--name-left, 0px); top: var(--name-top, 0px);
  width: var(--name-rule-width, 0px); height: var(--name-height, 1px);
  /* 文字は白固定・太さ600・字間0.1em(調整盤)。キャラクターカラーは下線(::after)のみ(仕様§3/§17) */
  color: #fff; font-weight: 600; letter-spacing: 0.1em;
  font-size: var(--name-font-size, 1px); line-height: var(--name-line-height, 1.6);
  display: flex; align-items: flex-start; justify-content: flex-start;
  -webkit-text-stroke: var(--text-stroke, 0) #000; paint-order: stroke fill;
}
#namezone:empty { visibility: hidden; }
#namezone::after {
  content: ""; position: absolute; left: 0; top: calc(100% + var(--name-rule-gap, 0px));
  width: var(--name-rule-width, 0px); height: var(--name-rule-thickness, 0px);
  background: var(--name-color);
}

/* 送りマーカー=クリックカーソル(ユーザー支給の参考 2026-09-08——傾いた矢印+3本のバースト線)。
   灰と黒を行き来する控えめな点滅(前意匠の扇形は主張が強すぎで撤回)。
   形はSVGマスクでruntimeが描く(#167: 幾何UIは画像生成しない) */
@keyframes cw-gray-blink { 0%, 100% { background-color: #99a3b0; } 50% { background-color: #1a1f28; } }
#click-wait {
  position: absolute; z-index: 7; display: none;
  left: var(--marker-left, 0px); top: var(--marker-top, 0px);
  width: var(--marker-size, 0px); height: var(--marker-size, 0px);
  pointer-events: none;
}
#click-wait.on { display: block; }
#click-wait::before {
  content: ""; position: absolute; inset: 2%;
  background-color: #99a3b0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><g fill='none' stroke='black' stroke-width='16' stroke-linecap='round'><path d='M97 34 L106 12'/><path d='M56 44 L42 26'/><path d='M32 76 L11 71'/></g><path d='M72 62 L148 97 L109 113 L94 150 Z' fill='black' stroke='black' stroke-width='14' stroke-linejoin='round'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'><g fill='none' stroke='black' stroke-width='16' stroke-linecap='round'><path d='M97 34 L106 12'/><path d='M56 44 L42 26'/><path d='M32 76 L11 71'/></g><path d='M72 62 L148 97 L109 113 L94 150 Z' fill='black' stroke='black' stroke-width='14' stroke-linejoin='round'/></svg>") center / contain no-repeat;
  animation: cw-gray-blink 1.1s steps(1, end) infinite;
}
body[data-effects="static"] #click-wait::before { animation: none; }
#click-wait.auto::before { animation-duration: 0.5s; } /* 自動進行=点滅が速い */
/* AUTO中の「＞」二重矢印は旧マーカー意匠の残骸として撤去(2026-09-08 実機レビュー——
   クリックカーソル以外の表示を出さない。AUTOの区別=点滅速度0.5s+設定アイコンのAバッジ) */

/* Cutins */
.cutin-slot { position: absolute; pointer-events: none; visibility: hidden; }
#speaker-cutin-slot {
  left: var(--speaker-cutin-left, 0px); top: var(--speaker-cutin-top, 0px);
  width: var(--speaker-cutin-w, 0px); height: var(--speaker-cutin-h, 0px);
}
#event-cutin-left-slot {
  left: var(--event-cutin-left-x, 0px); top: var(--event-cutin-top, 0px);
  width: var(--event-cutin-w, 0px); height: var(--event-cutin-h, 0px);
}
#event-cutin-center-slot {
  left: var(--event-cutin-center-x, 0px); top: var(--event-cutin-top, 0px);
  width: var(--event-cutin-w, 0px); height: var(--event-cutin-h, 0px);
}
#event-cutin-right-slot {
  left: var(--event-cutin-right-x, 0px); top: var(--event-cutin-top, 0px);
  width: var(--event-cutin-w, 0px); height: var(--event-cutin-h, 0px);
}
.cutin {
  position: absolute; z-index: 4; overflow: hidden; border-radius: 0;
  will-change: transform, opacity; /* 入場アニメ出だしのカクつき対策(2026-09-08) */
  background: transparent;
  border: var(--cutin-border-px, 0px) solid var(--frame-border);
  box-shadow: none;
  transform: translateX(var(--slide-x, -112%));
  transition: transform var(--cut-dur, 0.4s) ease, opacity var(--cut-dur, 0.4s) ease;
}
.cutin.visible { transform: translateX(0); opacity: 1; }
.cutin.xfade { transform: none; opacity: 0; }
.cutin.xfade.visible { opacity: 1; }
/* 話者カットインの出入り=グリッター転換(スライド廃止・2026-09-07)。
   カードは定位置に置き、絵はcanvasのセル出現/消滅で現す。枠(::after)は同尺で明滅 */
.cutin.glitter { transform: none; transition: none; opacity: 1; }
.cutin.glitter:not(.visible) img { visibility: hidden; }
.cutin.glitter::after { transition: opacity var(--cut-dur, 0.4s) ease; }
.cutin.glitter:not(.visible)::after { opacity: 0; }
.cutin.glitter-out::after { opacity: 0; }
.cutin .glitter-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* 二重枠の解消(ユーザー指摘の正しい解釈 2026-09-08): キット枠(::after)は表示し、
   その下に敷かれていた「枠生成前のダミー縁(単色border)」だけを消す——キット枠が
   供給されている種別ではダミー縁を描かない(未供給の作品では従来どおりダミー縁が枠代わり) */
.cutin[data-kind="speaker"] { border-width: var(--cutin-speaker-dummy-border, var(--cutin-border-px, 0px)); }
.cutin[data-kind="event"] { border-width: var(--cutin-event-dummy-border, var(--cutin-border-px, 0px)); }
.cutin img { width: 100%; height: 100%; display: block; }
.cutin[data-kind="speaker"] img { object-fit: contain; }
/* 人物(と煌めきcanvas)を枠画像の窓に合わせた八角形でクリップ——枠外へのはみ出し防止
   (2026-09-08。枠(::after)はクリップしない=枠の角を削らないため子要素側に掛ける) */
.cutin[data-kind="speaker"] img,
.cutin[data-kind="speaker"] .glitter-fx {
  /* 枠帯の「内窓」を画素採寸した八角形(#188)。前値は外形基準だったため、
     絵が枠帯を越えて外へ見えていた。帯(横12px/縦11px)へ4割重ねて隙間も出さない */
  clip-path: polygon(7.7% 1.5%, 92.3% 1.5%, 98.2% 5.9%, 98.2% 94%,
                     92.3% 98.5%, 7.7% 98.5%, 1.8% 94%, 1.8% 5.9%);
}
.cutin[data-kind="event"] img { object-fit: cover; }
/* イベント枠も同様に内窓でクリップ(#188——従来は無クリップで絵が帯の外へ出ていた) */
.cutin[data-kind="event"] img {
  clip-path: polygon(4.6% 1.6%, 95.4% 1.6%, 98.9% 6.1%, 98.9% 93.9%,
                     95.4% 98.4%, 4.6% 98.4%, 1.1% 93.9%, 1.1% 6.1%);
}
.cutin::after {
  content: ""; position: absolute; inset: calc(var(--cutin-border-px, 0px) * -1);
  pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat;
}
.cutin[data-kind="speaker"]::after {
  background-image: var(--kit-frame-speaker, none);
  /* 枠画像の位置はダミー縁の太さと連動——縁0のときは箱ちょうどに描く
     (負のinsetのままだと overflow:hidden で枠の下端が切れる。2026-09-08) */
  inset: calc(var(--cutin-speaker-dummy-border, var(--cutin-border-px, 0px)) * -1);
}
.cutin[data-kind="event"]::after {
  background-image: var(--kit-frame-event, none);
  inset: calc(var(--cutin-event-dummy-border, var(--cutin-border-px, 0px)) * -1);
}
.cutin[data-kind="speaker"] {
  left: var(--speaker-cutin-left, 0px); top: var(--speaker-cutin-top, 0px);
  width: var(--speaker-cutin-w, 0px); height: var(--speaker-cutin-h, 0px);
}
.cutin[data-kind="event"][data-slot-norm="left"] {
  left: var(--event-cutin-left-x, 0px); top: var(--event-cutin-top, 0px);
  width: var(--event-cutin-w, 0px); height: var(--event-cutin-h, 0px);
}
.cutin[data-kind="event"][data-slot-norm="center"] {
  /* 可視制御はxfade系クラスに任せる——ここにopacity:0を書くと詳細度で
     .cutin.xfade.visibleに勝ってしまい、中央カットインが永久に不可視になる
     (実測バグ 2026-09-08 チェック公開レビュー「中央表示が一度も無い」の原因) */
  left: var(--event-cutin-center-x, 0px); top: var(--event-cutin-top, 0px);
  width: var(--event-cutin-w, 0px); height: var(--event-cutin-h, 0px);
}
.cutin[data-kind="event"][data-slot-norm="right"] {
  left: var(--event-cutin-right-x, 0px); top: var(--event-cutin-top, 0px);
  width: var(--event-cutin-w, 0px); height: var(--event-cutin-h, 0px);
}

/* Game UI */
#ep-indicator { display: none; }
#game-ui {
  position: absolute; z-index: 7;
  right: var(--ui-icons-right, 0px); top: var(--ui-icons-top, 0px);
  display: flex; gap: var(--ui-icons-gap, 0px);
}
.iconbtn {
  position: relative; width: var(--ui-hit-px, var(--ui-icon-size, 0px));
  height: var(--ui-hit-px, var(--ui-icon-size, 0px));
  border: 0; background: transparent; cursor: pointer; padding: 0;
}
.iconbtn::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--ui-icon-size, 0px); height: var(--ui-icon-size, 0px);
  transform: translate(-50%, -50%);
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
/* バックログ・設定アイコン=runtimeの幾何描画(#187——キット画像は「破滅的に
   よくない」との実機レビューで廃止。#167「幾何UIは画像生成しない」に統合。
   マーカーと同じSVGマスク方式・地色は従来のUI色+縁光 */
/* バックログ・設定アイコン(#187改2): 白地+約2pxの黒縁のSVG直描き(縁光なし)。
   設定は縦スライダー(ミキサー)型——歯車は電源・明るさのアイコンに見えるため変更(実機レビュー) */
#btn-history::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23fff' stroke='%23000' stroke-width='7' paint-order='stroke' stroke-linejoin='round'><rect x='14' y='19' width='72' height='14' rx='7'/><rect x='14' y='43' width='72' height='14' rx='7'/><rect x='14' y='67' width='52' height='14' rx='7'/></g></svg>");
}
#btn-settings::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23fff' stroke='%23000' stroke-width='6' paint-order='stroke' stroke-linejoin='round'><rect x='21' y='12' width='8' height='76' rx='4'/><rect x='46' y='12' width='8' height='76' rx='4'/><rect x='71' y='12' width='8' height='76' rx='4'/><circle cx='25' cy='60' r='10'/><circle cx='50' cy='34' r='10'/><circle cx='75' cy='66' r='10'/></g></svg>");
}
#btn-settings.auto::after {
  /* 自動進行中のA——隅の小バッジでは見づらいとの実機レビューで、
     アイコン中央に大きく重ねる(2026-09-09) */
  content: "A"; position: absolute; width: auto; height: auto; background: transparent; border-radius: 0;
  left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--name-color);
  font: 900 calc(var(--ui-icon-size, 0px) * 1.05) / 1 var(--body-font);
  -webkit-text-stroke: 4px #000; paint-order: stroke;
}

/* クレジットの主題歌節(#200)——歌詞が長いためクレジットの本文だけスクロール可
   (#182「スクロールはバックログ専用」のクレジット例外。ユーザー裁定 2026-09-10)。
   スクロールバーの意匠はバックログと同一 */
#ov-credits .popup-body {
  overflow-y: auto;
  padding-right: calc(var(--backlog-scrollbar-width, 0px) + 16px);
  scrollbar-width: auto;
}
#ov-credits .popup-body::-webkit-scrollbar { width: var(--backlog-scrollbar-width, 0px); }
#ov-credits .popup-body::-webkit-scrollbar-thumb {
  background: var(--kit-scroll-thumb, none) center / 100% 100% no-repeat rgba(191, 228, 240, 0.35);
  border-radius: 6px;
}
/* 主題歌節の階層(ユーザー指摘 2026-09-10「全部が全部大きい必要は無い」):
   題=素材行よりやや小さい強調/作詞作曲=さらに小さく控えめ/歌詞=小さめ・連ごとの段落 */
.credits-theme-song {
  margin: calc(var(--popup-item-px, 14px) * 1.2) auto 0;
  width: min(80%, 760px); text-align: center;
  border-top: 1px solid var(--frame-border);
  padding-top: calc(var(--popup-item-px, 14px) * 0.9);
}
.credits-song-title {
  font-size: calc(var(--popup-item-px, 14px) * 0.85);
  font-weight: 700; color: var(--name-color);
}
.credits-song-credit {
  font-size: calc(var(--popup-item-px, 14px) * 0.6);
  margin: 6px 0 calc(var(--popup-item-px, 14px) * 0.8); opacity: 0.7;
}
.credits-song-lyrics {
  font-size: calc(var(--popup-item-px, 14px) * 0.68);
  line-height: 1.7; opacity: 0.92;
  white-space: pre-line;  /* 支給の改行を逐語で表示・行途中の折返しはさせない */
}
.credits-song-lyrics .credits-song-stanza { margin: 0 0 0.8em; }
.credits-song-lyrics .credits-song-stanza:last-child { margin-bottom: 0; }

/* TOP / END */
/* KV文字の黒縁——絵の上で文字を読ませるための縁取り。太さは骨格定数(kv-screens.outline)。
   板(ボタン)は自前の地を持つので縁は付けない */
#top-title, #end-title {
  -webkit-text-stroke: var(--kv-outline-title, 0px) #000; paint-order: stroke fill;
}
#top-badge, #top-catch, #top-info, #end-message, #end-credits {
  -webkit-text-stroke: var(--kv-outline-text, 0px) #000; paint-order: stroke fill;
}
#top-kv, #end-kv { position: absolute; inset: 0; background-size: cover; background-position: center; }
#top-panel, #end-panel { position: absolute; inset: 0; z-index: 2; color: #fff; }
#top-badge {
  position: absolute; left: var(--kv-top-badge-x, 0px); top: var(--kv-top-badge-y, 0px);
  font-size: var(--kv-top-badge-font, 1px); line-height: 1;
}
#top-badge[hidden] { display: none; }
#top-title {
  position: absolute; left: var(--kv-top-title-x, 0px); top: var(--kv-top-title-y, 0px);
  font-size: var(--kv-top-title-font, 1px); line-height: 1.15; font-weight: 900;
  /* 折り返し幅は自分の位置から画面右端まで(静穏域の幅に連動させない——
     別の目的の値で題名が折り返されていた。2026-09-07) */
  max-width: calc(var(--canvas-w, 2520px) - var(--kv-top-title-x, 0px) - 40px);
  text-wrap: balance;
}
#top-catch {
  position: absolute; left: var(--kv-top-catch-x, 0px); top: var(--kv-top-catch-y, 0px);
  font-size: var(--kv-top-catch-font, 1px); line-height: 1.35;
  max-width: calc(var(--canvas-w, 2520px) - var(--kv-top-catch-x, 0px) - 40px);
}
#top-info {
  position: absolute; left: var(--kv-top-info-x, 0px); top: var(--kv-top-info-y, 0px);
  font-size: var(--kv-top-info-font, 1px);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
}
#top-author { opacity: 0.8; }
/* 情報行の項目が全て繋がって見える問題(#187): 項目間に細い区切り線を入れる。
   flexのgapを区切り線の左右へ半分ずつ配る */
#top-info { gap: 0; }
#top-info > :not(:first-child) {
  /* :not()で詳細度を上げる——下の button/a のリセット(border:0)に勝たせる */
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  padding-left: 20px; margin-left: 20px;
}
/* 情報行の項目は板ではなく文字列として並べる(操作列と役割を分ける) */
#top-info button, #top-info a {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  opacity: 0.8; cursor: pointer; text-decoration: none;
}
#top-info button:hover, #top-info a:hover { opacity: 1; text-decoration: underline; }
#top-episodes {
  position: absolute; left: var(--kv-top-episodes-x, 0px); top: var(--kv-top-episodes-y, 0px);
  width: var(--kv-top-episodes-w, 0px); max-height: 410px;
  display: flex; flex-wrap: wrap; gap: 14px; overflow-y: auto;
}
#top-links {
  position: absolute; left: var(--kv-top-continue-x, 0px); top: var(--kv-top-continue-y, 0px);
  font-size: var(--kv-top-continue-font, 1px);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.uibtn, #top-links a, #top-links button {
  min-width: 64px; min-height: 48px; padding: 8px 16px;
  color: #fff; background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 6px;
  cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center;
}
.uibtn:hover, #top-links a:hover, #top-links button:hover { background: rgba(0, 0, 0, 0.62); }
#top-links .primary { border-width: 3px; font-weight: 800; box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }
#top-links .secondary { opacity: 0.78; }
.lbl-short { display: none; }
.ep-btn { white-space: nowrap; }  /* 「第1話」を折り返さない */
.ep-btn .ep-no { display: inline; font-size: var(--kv-top-episodes-font, 1px); }
.ep-btn .ep-title, .ep-btn .ep-min { display: none; }

#end-panel { opacity: 0; transition: opacity 1.2s ease; text-align: center; }
#end-panel.visible { opacity: 1; }
#end-message {
  position: absolute; left: var(--kv-ed-read-x, 0px); top: var(--kv-ed-read-y, 0px);
  font-size: var(--kv-ed-read-font, 1px); letter-spacing: 0.08em;
}
#end-title {
  position: absolute; left: var(--kv-ed-title-x, 0px); top: var(--kv-ed-title-y, 0px);
  font-size: var(--kv-ed-title-font, 1px); line-height: 1.15; font-weight: 900;
  max-width: calc(var(--canvas-w, 2520px) - var(--kv-ed-title-x, 0px) - 40px);
}
#end-credits {
  position: absolute; left: var(--kv-ed-credits-x, 0px); top: var(--kv-ed-credits-y, 0px);
  font-size: var(--kv-ed-credits-font, 1px); line-height: 1.75; white-space: pre-line; text-align: left;
}
#end-actions {
  position: absolute; left: var(--kv-ed-callout-x, 0px); top: var(--kv-ed-callout-y, 0px);
  display: flex; gap: 18px; align-items: center;
}
#end-source { font-size: var(--kv-ed-callout-font, 1px); }
#btn-end-top {
  position: absolute; left: var(--kv-ed-back-x, 0px); top: var(--kv-ed-back-y, 0px);
  font-size: var(--kv-ed-back-font, 1px);
}

/* Popups */
#policy-text { text-align: center; }
.text-popup-body {
  white-space: pre-line; font-size: var(--popup-item-px, 14px); line-height: 1.9;
  /* スクロールバーはバックログ専用(#182——ユーザー裁定)。本文は内容が収まる量で組む */
  overflow: visible;
}
/* Creditsの組: 原作ブロック(主)を中央に大きく、素材行(従)を仕切り線の下に小さく。
   runtime.jsのDOM構造化(ORIGINAL STORY/原作/著者/題)に対応する見た目側 */
#credits-text { display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--popup-item-px, 14px) * 1.1); }
.credits-primary { text-align: center; padding-top: calc(var(--popup-item-px, 14px) * 0.4); }
.credits-primary-label {
  font-size: calc(var(--popup-item-px, 14px) * 0.74);
  letter-spacing: 0.45em; text-indent: 0.45em; line-height: 1.4;
  color: var(--name-color); opacity: 0.9;
}
.credits-primary-role {
  display: inline-block; vertical-align: baseline; margin-right: 0.75em;
  font-size: calc(var(--popup-item-px, 14px) * 0.9); opacity: 0.75; line-height: 1.6;
}
.credits-primary-author {
  display: inline-block; vertical-align: baseline;
  font-size: calc(var(--popup-item-px, 14px) * 1.6); line-height: 1.6;
}
.credits-primary-title {
  font-size: calc(var(--popup-item-px, 14px) * 1.05);
  margin-top: calc(var(--popup-item-px, 14px) * 0.35); opacity: 0.95;
}
.credits-secondary {
  text-align: center; width: min(72%, 560px);
  border-top: 1px solid var(--frame-border); opacity: 0.85;
  padding-top: calc(var(--popup-item-px, 14px) * 0.9);
  font-size: calc(var(--popup-item-px, 14px) * 0.9);
}
.credits-secondary-line { line-height: 2.0; }
.overlay {
  position: absolute; inset: -3px; z-index: 20; display: none; /* 減光幕も覆い契約(#183) */
  background: rgba(0, 0, 0, var(--popup-dim, 0.35)); color: #eee;
}
.overlay.active { display: flex; align-items: center; justify-content: center; }
.panel {
  background: var(--panel-bg); border: var(--popup-border, 1px) solid var(--frame-border);
  border-radius: 8px; color: #eee;
}
.popup-panel {
  position: relative; width: var(--popup-w, 0px);
  max-height: calc(var(--canvas-h, 0px) - 80px);
  padding: 0 var(--popup-side-pad, 0px) var(--popup-bottom-pad, 0px);
  overflow: hidden;
}
.popup-header {
  position: relative; height: var(--popup-header-effective, 0px);
  min-height: var(--popup-header-effective, 0px);
}
.popup-header h2 {
  position: absolute; left: 50%; top: var(--popup-title-y, 0px);
  width: var(--popup-title-w, 0px); height: var(--popup-title-h, 0px);
  transform: translateX(-50%); margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--popup-title-font, 1px); line-height: 1; color: var(--name-color);
  isolation: isolate;
}
/* 題字プレートはruntimeが幾何描画する(#182)。生成画のプレートは縁が荒れて
   「破損して見える」ためスロット廃止(#167の方針: 幾何UIは画像生成しない)。
   ::before=縁の層 / ::after=地の層 の2層で、枠キットと同じ角落としの八角形 */
.popup-header h2::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: rgba(190, 222, 236, 0.75);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px),
                     calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
}
.popup-header h2::after {
  content: ""; position: absolute; inset: 2px; z-index: -1;
  background: rgba(13, 20, 32, 0.94);
  clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px),
                     calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px);
}
/* キット枠の供給時はCSSの代替縁・角丸を消す(#182——枠の外側に半透明白線が
   もう一重見える紛らわしさ、および角丸クリップによる枠角の欠けの解消) */
html[data-kit-popup-frame="1"] .popup-panel {
  border-color: transparent; border-radius: 0;
}
/* 本文ブロックは枠帯(約36px)の内側に収める(#188——話者名・本文が枠に掛かっていた)。
   ブロックは枠の内窓でセンターに置く */
html[data-kit-popup-frame="1"] .popup-body {
  padding-left: 44px; padding-right: 44px;
}
/* 供給時はキットのポップアップ枠(#174)。縁だけを画像から取り、中の地はCSSの層を保つ */
html[data-kit-popup-frame="1"] .popup-panel::after {
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  border: 30px solid transparent;
  border-image: var(--kit-popup-frame, none) 60 stretch;
  background: none;
}
.popup-close {
  position: absolute; right: var(--popup-close-right, 0px); top: var(--popup-close-top, 0px);
  width: var(--popup-close-size, 0px); height: var(--popup-close-size, 0px);
  border: 0; background: transparent; color: #fff; cursor: pointer;
  font-size: calc(var(--popup-close-size, 0px) * 0.72); line-height: 1;
}
/* 供給時はキットの閉じるボタン意匠を使う(×の素テキストはフォールバック。#174) */
html[data-kit-popup-close="1"] .popup-close {
  background: var(--kit-popup-close, none) center / contain no-repeat;
  color: transparent;
}
.popup-body {
  position: relative; max-height: calc(var(--canvas-h, 0px) - var(--popup-header-effective, 0px) - var(--popup-bottom-pad, 0px) - 96px);
  /* スクロールバーはバックログ専用(#182)——バックログは#history-listが自前でスクロールする。
     他のポップアップの本文はスクロールさせない(収まる量で組むのが契約) */
  overflow: hidden; padding-top: var(--popup-content-top-offset, 0px);
}
.setting-row {
  display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  align-items: center; gap: var(--popup-option-gap, 0px);
  margin: 0 0 var(--popup-item-gap, 0px);
  min-height: var(--popup-item-px, 0px); font-size: var(--popup-item-px, 1px);
}
.setting-label { justify-self: center; font-weight: 700; }
.setting-control {
  justify-self: stretch; display: flex; align-items: center; justify-content: center;
  gap: var(--popup-option-gap, 0px); min-width: 0;
}
.setting-control input[type="range"] { width: 520px; height: 52px; } /* 縦の有効範囲を約2倍に(ゲージ選択がシビア・2026-09-07) */
.option-choice {
  flex: 0 0 calc(var(--popup-item-px, 1px) * 5);
  min-height: calc(var(--popup-item-px, 1px) * 1.25);
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--popup-item-px, 1px) * 0.25);
  border: 1px solid var(--frame-border); border-radius: 6px;
}
.setting-row.top-row {
  display: flex; justify-content: center; gap: var(--popup-option-gap, 0px);
  margin-top: var(--popup-back-top-gap, 0px);
}
.confirm-overlay { z-index: 30; }
.confirm-panel {
  width: calc(var(--popup-w, 0px) * 0.52);
  padding: calc(var(--popup-item-px, 1px) * 1.25) var(--popup-side-pad, 0px);
  text-align: center; font-size: var(--popup-item-px, 1px);
}
.confirm-actions {
  display: flex; align-items: center; justify-content: center;
  gap: var(--popup-option-gap, 0px); margin-top: var(--popup-item-gap, 0px);
}
.confirm-actions .uibtn { min-width: calc(var(--popup-item-px, 1px) * 5); }
#history-list {
  font-size: var(--backlog-body-px, 1px); line-height: 1.8;
  /* 固定viewHeightが.popup-bodyの可視域(canvas-h基準のmax-height)を超えると
     最下段が下端で切れて読めない(実機レビュー2026-09-09)。同じ収支式でキャップする */
  height: min(var(--backlog-view-height, 0px),
              calc(var(--canvas-h, 0px) - var(--popup-header-effective, 0px)
                   - var(--popup-bottom-pad, 0px) - 96px
                   - var(--popup-content-top-offset, 0px)));
  overflow-y: auto;
  padding-right: calc(var(--backlog-scrollbar-width, 0px) + 16px);
  scrollbar-width: auto;
}
#history-list::-webkit-scrollbar { width: var(--backlog-scrollbar-width, 0px); }
#history-list::-webkit-scrollbar-thumb {
  background: var(--kit-scroll-thumb, none) center / 100% 100% no-repeat rgba(191, 228, 240, 0.35);
  border-radius: 6px;
}
#history-list .h-chapter {
  margin: var(--backlog-divider-gap, 0px) 0; text-align: center;
  color: var(--name-color); font-weight: 800;
}
#history-list .h-chapter::after {
  /* 話区切りのキット仕切り(未供給ならvarがnoneで何も出ない。#174) */
  content: ""; display: block; height: 22px; margin: 10px auto 0; max-width: 70%;
  background: var(--kit-divider, none) center / auto 100% no-repeat;
}
#history-list .h-page {
  display: grid; grid-template-columns: var(--backlog-speaker-col, 0px) 1fr;
  gap: 24px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.18);
  white-space: pre-wrap;
}
#history-list .h-name { color: var(--name-color); font-weight: 800; text-align: center; }

#scrim, #textarea, #namezone, #click-wait, #game-ui, #cutin-layer {
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
body[data-view="hidden"] #scrim,
body[data-view="hidden"] #textarea,
body[data-view="hidden"] #namezone,
body[data-view="hidden"] #click-wait,
body[data-view="hidden"] #cutin-layer, /* 絵だけ表示では話者カットインも消す(2026-09-07) */
body[data-view="hidden"] #game-ui {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
body[data-view="hidden"] #click-wait { animation: none; }

/* Debug */
#debug-counter {
  position: fixed; left: 10px; bottom: 8px; z-index: 2147483000; display: none;
  font: bold 48px/1.1 Consolas, monospace; color: #8f9;
  background: rgba(0, 0, 0, 0.6); padding: 2px 14px; border-radius: 8px;
  text-shadow: 0 0 4px #000; pointer-events: none;
}
body[data-debug="1"] #debug-counter { display: block; }
#debug-load {
  position: fixed; left: 190px; bottom: 8px; z-index: 2147483000; display: none;
  font: bold 18px/1.2 Consolas, monospace; color: #fff;
  background: rgba(0, 0, 0, 0.6); padding: 8px 12px; border-radius: 8px;
  text-shadow: 0 0 4px #000; pointer-events: none;
}
body[data-debug="1"] #debug-load { display: block; }
#debug-cg {
  position: fixed; right: 10px; top: 8px; z-index: 2147483000; display: none;
  font: bold 20px/1.2 Consolas, monospace; color: #9cf;
  background: rgba(0, 0, 0, 0.6); padding: 4px 12px; border-radius: 8px;
  text-shadow: 0 0 4px #000; pointer-events: none; max-width: 60vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-debug="1"] #debug-cg:not(:empty) { display: block; }

#loading-mark {
  position: fixed; right: 12px; bottom: 12px; z-index: 2147483000;
  width: 24px; height: 24px; display: none; pointer-events: none;
  border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  border-radius: 50%;
}
#loading-mark.visible { display: block; animation: loading-spin 0.8s linear infinite; }
@keyframes loading-spin { to { transform: rotate(360deg); } }

/* レターボックス遮蔽(#183根治): キャンバス内の内容がGPU合成の内部挙動でクリップ外
   (レターボックス領域)へ線状に漏れて見えることがある(暗転中に実証・要素幾何にも
   フィルタにも該当なし=DOM検査に映らない)。レターボックスは常に黒なので、
   上下左右の黒帯全域を実要素のborderで覆い、境界は舞台側へ2px食い込ませて
   (0.2%未満・不可視)どんな漏れ方でも物理的に隠す。borderはapplyLayoutNowが設定 */
#stage-mask {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
  border: 0 solid #000; background: none; box-sizing: border-box;
}

#fader {
  /* TOP⇄ゲームの暗転幕。#canvas(scale変換)内の覆いはクリップと独立に端数丸めされるため、
     inset:0では4辺のどこかに1デバイスピクセルの取り残し(下の絵が線状に見える)が出る(#183)。
     -3pxで丸め誤差を確実に飲む(canvasのoverflow:hiddenで刈られ副作用なし) */
  position: absolute; inset: -3px; z-index: 30; background: #000; opacity: 0;
  pointer-events: none; transition: opacity 0.6s ease;
}
#fader.black { opacity: 1; pointer-events: auto; }
#stage-fader {
  position: absolute; inset: -3px; z-index: 8; background: #000; opacity: 0;
  pointer-events: none; transition: opacity 0.5s ease;
}
#stage-fader.black { opacity: 1; }

@keyframes fx-shake-s { 0%,100% { transform: translate(0,0); } 25% { transform: translate(4px,2px); } 50% { transform: translate(-4px,-2px); } 75% { transform: translate(3px,-1px); } }
@keyframes fx-shake-l { 0%,100% { transform: translate(0,0); } 20% { transform: translate(10px,6px); } 40% { transform: translate(-10px,-6px); } 60% { transform: translate(8px,-4px); } 80% { transform: translate(-8px,4px); } }
@keyframes fx-flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
#stage-look.fx-shake-small, #scene-look-target.fx-shake-small, #cgarea.fx-shake-small { animation: fx-shake-s 0.4s ease; }
#stage-look.fx-shake-large, #scene-look-target.fx-shake-large, #cgarea.fx-shake-large { animation: fx-shake-l 0.6s ease; }
#fxflash.run { animation: fx-flash 0.5s ease-out; }
body[data-effects="static"] #cgarea.fx-shake-small,
body[data-effects="static"] #cgarea.fx-shake-large,
body[data-effects="static"] #scene-look-target.fx-shake-small,
body[data-effects="static"] #scene-look-target.fx-shake-large,
body[data-effects="static"] #stage-look.fx-shake-small,
body[data-effects="static"] #stage-look.fx-shake-large { animation: none; }
body[data-effects="static"] #fxflash.run { animation: none; opacity: 0.35; transition: opacity 0.4s; }
body[data-effects="static"] .cutin { transition: opacity 0.01s; transform: none; }