/* 広告代理店サバイバル — UIスタイル
   正典: /DESIGN_DIRECTION.md（レジスター: 物語×劇場 / 夜のオフィスのステージに紙のパネル）
   色・書体・余白・角丸は必ず :root トークン経由で変更する。 */

:root {
  /* ステージと紙面 */
  --stage: #10141F;
  --stage-2: #171D2C;
  --paper: #F8F6F0;
  --paper-2: #EFEBE1;
  --ink: #232838;
  --ink-soft: #5A6070;
  --line: #DCD6C9;

  /* アクセント（CTA・選択・フォーカスのみ） */
  --accent: #B4541B;
  --accent-deep: #96430F;

  /* ステータス色（バー・チップ罫のみ） */
  --stat-performance: #3D6EA5;
  --stat-trust: #3F8C88;
  --stat-mental: #B05A72;
  --stat-yatterukan: #8A5BA5;
  --danger: #B3372E;

  /* ダーク面（タイトル画面）の文字 */
  --paper-on-dark: #F1EEE5;
  --sub-on-dark: #A9B0C2;

  /* 架空ワークスペースのクローム（DESIGN_DIRECTION v2「業務ツールの劇」） */
  --chrome: #232838;
  --chrome-2: #1B2233;
  --ground: #F7F5EF;
  --surface: #FFFFFF;
  --surface-2: #FAF8F3;
  --line-2: #E2DED2;
  --ink-faint: #8B8E9C;

  /* 書体 */
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-display: "Dela Gothic One", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* リズム */
  --radius-panel: 20px;
  --radius-m: 12px;
  --radius-pill: 999px;
  --dur-1: 180ms;
  --dur-2: 240ms;
  --dur-3: 600ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-pop: cubic-bezier(0.2, 1.4, 0.4, 1);

  font-family: var(--font-body);
  color: var(--ink);
  background: var(--stage);
  line-height: 1.75;
  font-synthesis: none;
  font-feature-settings: "palt" 0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 55% at 50% -8%, var(--stage-2) 0%, rgba(23, 29, 44, 0) 70%),
    var(--stage);
}

/* ---- 世界: 夜のオフィス街（常時微動する舞台。Balatroの「静止背景を避ける」原則） ---- */

.stage-skyline {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: min(30vh, 240px);
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%230C101B'%3E%3Crect x='0' y='90' width='90' height='150'/%3E%3Crect x='100' y='40' width='120' height='200'/%3E%3Crect x='230' y='120' width='70' height='120'/%3E%3Crect x='310' y='70' width='110' height='170'/%3E%3Crect x='430' y='140' width='80' height='100'/%3E%3Crect x='520' y='30' width='130' height='210'/%3E%3Crect x='660' y='100' width='90' height='140'/%3E%3Crect x='760' y='60' width='120' height='180'/%3E%3Crect x='890' y='130' width='75' height='110'/%3E%3Crect x='975' y='50' width='115' height='190'/%3E%3Crect x='1100' y='110' width='100' height='130'/%3E%3C/g%3E%3Cg fill='%23222B44'%3E%3Crect x='116' y='60' width='10' height='14'/%3E%3Crect x='140' y='60' width='10' height='14'/%3E%3Crect x='164' y='84' width='10' height='14'/%3E%3Crect x='116' y='108' width='10' height='14'/%3E%3Crect x='188' y='108' width='10' height='14'/%3E%3Crect x='140' y='132' width='10' height='14'/%3E%3Crect x='330' y='90' width='9' height='12'/%3E%3Crect x='354' y='90' width='9' height='12'/%3E%3Crect x='378' y='114' width='9' height='12'/%3E%3Crect x='330' y='138' width='9' height='12'/%3E%3Crect x='540' y='50' width='10' height='14'/%3E%3Crect x='564' y='50' width='10' height='14'/%3E%3Crect x='612' y='74' width='10' height='14'/%3E%3Crect x='540' y='98' width='10' height='14'/%3E%3Crect x='588' y='122' width='10' height='14'/%3E%3Crect x='564' y='170' width='10' height='14'/%3E%3Crect x='778' y='80' width='10' height='13'/%3E%3Crect x='826' y='80' width='10' height='13'/%3E%3Crect x='802' y='104' width='10' height='13'/%3E%3Crect x='778' y='152' width='10' height='13'/%3E%3Crect x='994' y='70' width='10' height='13'/%3E%3Crect x='1042' y='94' width='10' height='13'/%3E%3Crect x='994' y='142' width='10' height='13'/%3E%3C/g%3E%3Cg fill='%235A4326'%3E%3Crect x='188' y='60' width='10' height='14'/%3E%3Crect x='588' y='50' width='10' height='14'/%3E%3Crect x='802' y='128' width='10' height='13'/%3E%3Crect x='1018' y='70' width='10' height='13'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom center;
  opacity: 0.85;
}

/* 窓明かりがゆっくり移ろう（60sループの淡い光） */
.stage-skyline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(220px 120px at 20% 70%, rgba(226, 178, 98, 0.10), transparent 70%);
  animation: window-drift 60s ease-in-out infinite alternate;
}

@keyframes window-drift {
  from { transform: translateX(0); opacity: 0.6; }
  50% { opacity: 1; }
  to { transform: translateX(60vw); opacity: 0.6; }
}

.app-shell { position: relative; z-index: 1; }

button { font: inherit; }

.app-shell {
  width: min(100%, 540px);
  min-height: 100vh;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
}

/* ---- パネル（1画面1枚の紙） ---- */

.panel {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-panel);
  padding: 24px 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: panel-in var(--dur-2) var(--ease-out) both;
}

/* 紙の質感（微細な粒子。人の手触りのレイヤー） */
.panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: 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)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: multiply;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- ツール画面（架空の仕事チャット。日常はこの顔、月末だけ紙） ---- */

.tool-screen {
  overflow: hidden;
  background: var(--ground);
  border-radius: var(--radius-panel);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: panel-in var(--dur-2) var(--ease-out) both;
}

.appbar {
  background: var(--chrome);
  color: var(--paper-on-dark);
  padding: 14px 16px 11px;
}

.appbar-ws {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.appbar-channel {
  margin: 2px 0 0;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.4;
}

.appbar-channel span { color: #E08A4C; }

.appbar-topic {
  margin: 3px 0 0;
  font-size: 0.66rem;
  color: var(--sub-on-dark);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ピン留めされた予実バー（シグネチャー: ステータスHUDを予実シートのセルとして扱う） */
.tool-screen .stats-grid {
  margin: 0;
  padding: 8px 12px 9px;
  border-radius: 0;
  background: var(--chrome-2);
  border-top: 1px solid #2A3450;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tool-screen .stat-card span { color: #8B96B8; }
.tool-screen .stat-card strong {
  color: var(--paper-on-dark);
  font-size: 1.02rem;
  font-family: var(--font-mono);
  font-weight: 700;
}
.tool-screen .stat-track { background: #2A3450; height: 4px; margin-top: 4px; }
.tool-screen .stat-track-low {
  background: repeating-linear-gradient(-45deg, #4A2A33 0 4px, #37222E 4px 8px);
}
.tool-screen .stat-card:has(.stat-track-low) strong { color: #F0A8A0; }

/* スレッド */
.thread { padding: 12px 12px 6px; }

.thread-day {
  margin: 2px 0 12px;
  text-align: center;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--ink-faint);
}

.thread-day span {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.event-title { font-size: 1.12rem; margin: 12px 2px 8px; }

/* 地の文＝システムメッセージ。文単位で改行し、流し読みでも数字が拾える形にする */
.sys {
  margin: 10px 0;
  padding: 10px 12px;
  background: #EFECE3;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 0.84rem;
  line-height: 1.72;
  color: var(--ink-soft);
}

.sys p { margin: 0 0 7px; }
.sys p:last-child { margin-bottom: 0; }
.sys b { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 関係者チップ（メンバープロフィール） */
.member-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
}

.member-ava {
  flex: none;
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--character-accent) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--character-accent) 32%, var(--line-2));
}

.member-ava img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale(2.8);
  transform-origin: 50% 9%;
}

.member-ava-blank { border-style: dashed; }

.member-copy { min-width: 0; }
.member-copy b { display: block; font-size: 0.86rem; font-weight: 900; line-height: 1.35; }
.member-copy span { display: block; font-size: 0.68rem; color: var(--ink-faint); }

.member-label {
  margin-left: auto;
  flex: none;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--character-accent) 72%, var(--ink));
  border: 1px solid color-mix(in srgb, var(--character-accent) 46%, var(--line-2));
  border-radius: 5px;
  padding: 2px 7px;
}

/* 返信サジェスト＝選択肢 */
.composer {
  margin-top: 6px;
  padding: 11px 12px 16px;
  background: var(--surface);
  border-top: 1px solid var(--line-2);
}

.suggest-label {
  margin: 0 0 9px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--accent);
}

.composer .choice-list { margin-top: 0; }

/* リザルト: 送信済みの自分の返信 */
.own-sent {
  background: #FBEFE6 !important;
  border-color: #E8C4A8 !important;
  margin-left: 44px;
}

/* ---- チャットの作り込み: メンション・時刻・未読線・添付・リアクション・入力欄 ---- */

.mention {
  color: var(--accent);
  background: #FBEFE6;
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 800;
}

.dialogue-speaker time {
  margin-left: 7px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0;
}

.unread-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 14px 0 10px;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--danger);
}

.unread-divider::before,
.unread-divider::after {
  content: '';
  height: 1px;
  background: color-mix(in srgb, var(--danger) 45%, var(--line-2));
}

.file-card {
  display: block;
  margin-top: 8px;
  max-width: 268px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
}

.file-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.file-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 6px;
  background: #2E7D5B;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
}

.file-copy { min-width: 0; }
.file-copy b { display: block; font-size: 0.72rem; font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-copy span { display: block; font-size: 0.6rem; color: var(--ink-faint); font-family: var(--font-mono); }

.file-sheet {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

.file-sheet th,
.file-sheet td { border-top: 1px solid #EFECE3; padding: 5px 10px; font-weight: 500; }
.file-sheet th { text-align: left; color: var(--ink-soft); font-weight: 700; background: var(--surface-2); white-space: nowrap; }
.file-sheet td { text-align: right; }
.file-sheet .cell-danger { color: var(--danger); font-weight: 700; background: #FBF0EE; }
.file-sheet .cell-empty { color: #C9C4B6; font-style: italic; text-align: center; }

/* 偽クリエイティブ添付（社長の自作広告画像）。意図的に「素人が全部盛りした画像」を再現する */
.creative-card { max-width: 284px; }

.file-icon-img { background: #7A4A9E; }

.creative-shot {
  display: block;
  position: relative;
  margin: 0;
  padding: 30px 12px 26px;
  background:
    radial-gradient(120% 90% at 50% 0%, #E33B2A 0%, #B3221A 70%, #8E1812 100%);
  color: #fff;
  overflow: hidden;
}

.creative-badge {
  position: absolute;
  top: 7px;
  right: -30px;
  transform: rotate(18deg);
  font-style: normal;
  font-weight: 900;
  font-size: 0.7rem;
  background: #FFE03A;
  color: #B3221A;
  padding: 3px 36px;
  letter-spacing: 0.04em;
}

.creative-headline {
  display: block;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.45;
  color: #FFE03A;
  text-shadow: 1.5px 1.5px 0 #7A130E;
  margin-bottom: 6px;
}

.creative-body {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 rgba(122, 19, 14, 0.8);
}

.creative-footer {
  display: block;
  margin-top: 7px;
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 900;
  color: #B3221A;
  background: #fff;
  border-radius: 3px;
  padding: 3px 6px;
  text-align: center;
}

.react-row { display: inline-flex; gap: 4px; margin-top: 6px; }
.react-row span {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

.inputbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-size: 0.74rem;
  color: #B9B2A0;
}

.inputbar-send {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #EFECE3;
  color: #B9B2A0;
  font-size: 0.7rem;
}

/* ---- オンライン会議シーン ---- */

.appbar-meeting { background: var(--chrome-2); }

.rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-radius: 50%;
  background: #E05A4E;
  vertical-align: 1px;
  animation: rec-pulse 1.6s ease-in-out infinite;
}

@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.meeting-timer { color: #E08A4C; }

.meeting-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 10px 12px 12px;
  background: var(--chrome);
}

.tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: #0E1220;
  border: 1px solid #2A3450;
}

.tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale(2.1);
  transform-origin: 50% 10%;
}

.tile-speaking { border-color: #E08A4C; box-shadow: 0 0 0 1.5px #E08A4C; }

.tile-name {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 12px);
  background: rgba(9, 11, 18, 0.78);
  color: #E8E4D8;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.62rem;
  font-weight: 700;
  white-space: nowrap;
}

.tile-mic { display: inline-grid; place-items: center; color: #8B96B8; }
.tile-mic-live { color: #7DC9A2; }

/* カメラOFFの参加者（立ち絵なしキャラ・自分） */
.tile-off {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
}

.tile-off i {
  font-style: normal;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--character-accent, #5A6070) 38%, #1B2233);
  color: #E8E4D8;
  font-size: 1.05rem;
  font-weight: 900;
}

.tile-off em {
  font-style: normal;
  font-size: 0.56rem;
  font-weight: 700;
  color: #6E7A9A;
  letter-spacing: 0.08em;
}

.tile-img-broken img { display: none; }

.transcript-label {
  margin: 14px 0 8px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

.is-meeting .dialogue-line { border-style: dashed; background: var(--surface-2); }

/* ---- タイポグラフィ ---- */

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

h1, h2 { line-height: 1.3; margin-top: 0; }
h1 { font-size: clamp(1.9rem, 8.5vw, 2.7rem); font-weight: 900; }
h2 { font-size: 1.45rem; font-weight: 900; }
p { margin: 0 0 16px; }

.tagline { font-size: 1.06rem; font-weight: 700; }
.disclaimer, .learning { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.7; }

/* ---- ボタン ---- */

.primary-button,
.choice-button,
.secondary-button {
  width: 100%;
  border: 0;
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}

.primary-button {
  margin-top: 12px;
  padding: 15px 18px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(180, 84, 27, 0.32);
}

.primary-button:hover { background: var(--accent-deep); }

.secondary-button {
  margin-top: 8px;
  padding: 13px 16px;
  background: var(--paper-2);
  color: var(--ink);
  font-weight: 700;
}

button:hover { transform: translateY(-1px); }
button:active { transform: translateY(0) scale(0.99); }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* 選択肢: A/B/C バッジつきの意思決定ボタン */

.choice-list { display: grid; gap: 10px; margin-top: 18px; counter-reset: choice; }

.choice-button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 14px;
  text-align: left;
  background: #FDFCF8;
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 700;
  line-height: 1.6;
}

.choice-button::before {
  counter-increment: choice;
  content: counter(choice, upper-alpha);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.78rem;
  transition: background-color var(--dur-1) var(--ease-out);
}

.choice-button:hover { border-color: var(--accent); }
.choice-button:hover::before { background: var(--accent); }

/* ---- ブリーフ ---- */

.brief-grid,
.stats-grid { margin: 18px 0; }

.brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.brief-item {
  background: var(--paper-2);
  border-radius: var(--radius-m);
  padding: 12px;
}

.brief-item span {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ---- ステータスHUD ---- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 10px;
  background: var(--paper-2);
  border-radius: var(--radius-m);
}

.stat-card { position: relative; min-width: 0; text-align: center; }

.stat-card span {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.stat-card strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.stat-delta {
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.72rem;
  margin-left: 3px;
  vertical-align: top;
  animation: delta-in 320ms var(--ease-pop) both;
  animation-delay: 480ms;
}

.stat-delta-plus { color: var(--stat-trust); }
.stat-delta-minus { color: var(--danger); }

@keyframes delta-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-track {
  height: 6px;
  margin-top: 6px;
  background: #E3DDD0;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--ink);
  transition: width var(--dur-3) var(--ease-out);
}

/* 順次発火: リザルトのバーは左から1本ずつ動く（Balatroの逐次開示） */
[data-screen="result"] .stat-card:nth-child(1) .stat-fill { transition-delay: 0ms; }
[data-screen="result"] .stat-card:nth-child(2) .stat-fill { transition-delay: 130ms; }
[data-screen="result"] .stat-card:nth-child(3) .stat-fill { transition-delay: 260ms; }
[data-screen="result"] .stat-card:nth-child(4) .stat-fill { transition-delay: 390ms; }

[data-screen="result"] .stat-card:nth-child(2) .stat-delta { animation-delay: 610ms; }
[data-screen="result"] .stat-card:nth-child(3) .stat-delta { animation-delay: 740ms; }
[data-screen="result"] .stat-card:nth-child(4) .stat-delta { animation-delay: 870ms; }

/* 数値の着地ポップ（カウントアップ完了の瞬間） */
.stat-card strong.stat-landed { animation: stat-land 160ms var(--ease-pop); }

@keyframes stat-land {
  from { transform: scale(1.18); }
  to { transform: scale(1); }
}

.stat-card strong { display: inline-block; }

[data-stat="performance"] .stat-fill { background: var(--stat-performance); }
[data-stat="trust"] .stat-fill { background: var(--stat-trust); }
[data-stat="mental"] .stat-fill { background: var(--stat-mental); }

/* シグネチャー: 「やってる感」だけ斜めストライプ。
   リザルト画面では流れる＝数値が増えても中身が動いていない、の視覚化 */
[data-stat="yatterukan"] .stat-fill {
  background: repeating-linear-gradient(
    -45deg,
    var(--stat-yatterukan) 0 5px,
    color-mix(in srgb, var(--stat-yatterukan) 55%, #fff) 5px 10px
  );
  background-size: 200% 100%;
}

[data-screen="result"] [data-stat="yatterukan"] .stat-fill {
  animation: busy-tape 2.4s linear infinite;
}

@keyframes busy-tape {
  from { background-position: 0 0; }
  to { background-position: 28px 0; }
}

/* 危険域（25未満）: 色＋斜線パターン＋太字で示す（色だけに頼らない） */
.stat-track-low {
  background: repeating-linear-gradient(
    -45deg,
    #EAD9D5 0 4px,
    #F3E9E5 4px 8px
  );
}

.stat-track-low .stat-fill { background: var(--danger); }
.stat-card:has(.stat-track-low) strong { color: var(--danger); }

.progress {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.event-body { font-size: 1rem; }

/* ---- キャスト（ピクセル） ---- */

.cast-pixels {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 10px 0 18px;
}

.cast-pixels img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  image-rendering: pixelated;
  animation: idle-bob 1.6s steps(2, jump-none) infinite;
}

/* 二次動作: ピクセルキャラの待機ボブ（位相をずらして機械感を消す） */
.cast-pixels img:nth-child(2) { animation-delay: 0.53s; }
.cast-pixels img:nth-child(3) { animation-delay: 1.06s; }

@keyframes idle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

.image-unavailable { display: none; }

.character-unavailable {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 4px solid var(--line);
  background: var(--paper-2);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  font-size: 0.88rem;
}

.character-card-textonly { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: 4px; align-items: start; }

/* ---- 会話（チャット様式） ---- */

.dialogue-list { display: grid; gap: 10px; margin: 4px 0 16px; }

.dialogue-line {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 4px 14px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  animation: rise-in 240ms var(--ease-out) both;
}

/* メッセージ着信のスタガー（最大6件で頭打ち） */
.dialogue-list .dialogue-line:nth-child(1) { animation-delay: 40ms; }
.dialogue-list .dialogue-line:nth-child(2) { animation-delay: 110ms; }
.dialogue-list .dialogue-line:nth-child(3) { animation-delay: 180ms; }
.dialogue-list .dialogue-line:nth-child(4) { animation-delay: 250ms; }
.dialogue-list .dialogue-line:nth-child(5) { animation-delay: 320ms; }
.dialogue-list .dialogue-line:nth-child(n+6) { animation-delay: 380ms; }

/* 顔クロップアバター: 立ち絵の顔部分だけを44pxへ切り出す。行ごとの表情差分が読める最小サイズ */
.dialogue-avatar {
  display: block;
  width: 44px;
  height: 44px;
  margin-top: 2px;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--speaker-accent) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--speaker-accent) 32%, var(--line));
}

.dialogue-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale(2.8);
  transform-origin: 50% 9%;
}

.dialogue-avatar-pixel img {
  transform: none;
  object-fit: contain;
  image-rendering: pixelated;
}

.dialogue-avatar-blank {
  width: 12px;
  height: 12px;
  margin: 8px auto 0;
  border-radius: 50%;
  border: 0;
  background: var(--speaker-accent);
}

.dialogue-line-player {
  grid-template-columns: minmax(0, 1fr);
  margin-left: 32px;
  border-radius: 14px 4px 14px 14px;
  background: var(--surface-2);
  border-color: var(--line-2);
}

.dialogue-speaker {
  display: block;
  margin-bottom: 2px;
  color: color-mix(in srgb, var(--speaker-accent) 72%, var(--ink));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.dialogue-line-player .dialogue-speaker { color: var(--ink-soft); }
.dialogue-text { margin: 0; font-size: 0.95rem; line-height: 1.7; }

/* ---- リザルト（開示の3拍: バー→パンチライン→チップ） ---- */

.result-box {
  margin: 14px 0;
  padding: 16px;
  border-radius: var(--radius-m);
  background: var(--paper-2);
}

.tool-screen .result-box { background: var(--surface); border: 1px solid var(--line-2); }
.thread .primary-button { margin: 6px 0 12px; }

.result-box > p { animation: rise-in 280ms var(--ease-out) both; }

.punchline {
  font-weight: 800;
  padding-left: 10px;
  border-left: 4px solid var(--accent);
  animation: stamp-in 320ms var(--ease-pop) both;
  animation-delay: 620ms;
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes stamp-in {
  from { opacity: 0; transform: scale(1.25) rotate(-2deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

.effect-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }

.effect-chip {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: chip-in 240ms var(--ease-pop) both;
}

.effect-chip-plus { border-color: color-mix(in srgb, var(--stat-trust) 55%, #fff); color: #22635F; }
.effect-chip-minus { border-color: color-mix(in srgb, var(--danger) 45%, #fff); color: var(--danger); }

.effect-chip:nth-child(1) { animation-delay: 880ms; }
.effect-chip:nth-child(2) { animation-delay: 940ms; }
.effect-chip:nth-child(3) { animation-delay: 1000ms; }
.effect-chip:nth-child(4) { animation-delay: 1060ms; }
.effect-chip:nth-child(n+5) { animation-delay: 1120ms; }

@keyframes chip-in {
  from { opacity: 0; transform: translateY(5px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- エンディング（月末評価＝紙のレポート） ---- */

.report-subject {
  margin: -2px 0 6px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.ending-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  line-height: 1.35;
  margin-bottom: 12px;
  padding-bottom: 6px;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% 5px no-repeat;
  animation: underline-sweep 640ms var(--ease-out) 320ms both;
}

@keyframes underline-sweep {
  from { background-size: 0% 5px; }
  to { background-size: 100% 5px; }
}

.history-list, .month-results {
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
  font-size: 0.9rem;
  color: var(--ink-soft);
  counter-reset: report;
}

.history-list li, .month-results li {
  padding: 8px 0 8px 30px;
  position: relative;
  border-bottom: 1px dashed var(--line);
  counter-increment: report;
}

.history-list li::before, .month-results li::before {
  content: counter(report, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 9px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  color: var(--accent);
}

.month-results { font-weight: 700; color: var(--ink); }

/* ---- タイトル（暗いポスター面） ---- */

.panel[data-screen="title"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(720px, calc(100vh - 72px));
  background: linear-gradient(172deg, #1C2334 0%, #141926 100%);
  color: var(--paper-on-dark);
  border: 1px solid #2A3247;
}

.panel[data-screen="title"] h1 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 12px;
  padding-bottom: 10px;
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 44px 5px no-repeat;
}

.panel[data-screen="title"] .eyebrow { color: #E08A4C; }
.panel[data-screen="title"] .tagline { color: var(--paper-on-dark); }
.panel[data-screen="title"] p { color: var(--sub-on-dark); }
.panel[data-screen="title"] .disclaimer { color: #8B92A6; }
.panel[data-screen="title"] .cast-pixels { margin: 18px 0 22px; }
.panel[data-screen="title"] .cast-pixels img { filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.5)); }

/* ---- レスポンシブ ---- */

@media (max-width: 370px) {
  .brief-grid { grid-template-columns: 1fr; }
  .stats-grid { gap: 6px; padding: 10px 8px; }
  .stat-card span { font-size: 0.6rem; }
  .stat-card strong { font-size: 1.12rem; }
  .panel { padding: 20px 16px; }
  .appbar-channel { font-size: 0.94rem; }
  .tool-screen .stat-card strong { font-size: 1rem; }
}

/* ---- reduced motion: 演出を全停止し最終状態を即時表示 ---- */

/* シーズン表記（タイトル）と続編予告（最終エンディング） */

.season-badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  border: 1px solid #2A3247;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  color: #E08A4C !important;
  letter-spacing: 0.02em;
}

.season-outro {
  margin: 20px 0 4px;
  padding: 16px 16px 14px;
  background: var(--chrome);
  border-radius: var(--radius-m);
  color: var(--paper-on-dark);
}

.season-outro-label {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  color: #E08A4C;
}

.season-outro-lead {
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.7;
}

.season-outro-list {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.season-outro-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--sub-on-dark);
}

.season-outro-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #E08A4C;
}

.season-outro-note {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.65;
  color: #8B92A6;
}

/* 主人公名の入力（タイトル画面） */
.name-field {
  display: block;
  margin: 2px 0 14px;
}

.name-field span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--sub-on-dark);
}

.name-field input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-weight: 700;
  color: var(--paper-on-dark);
  background: rgba(9, 11, 18, 0.6);
  border: 1px solid #2A3247;
  border-radius: var(--radius-m);
}

.name-field input::placeholder { color: #6E7A9A; font-weight: 500; }
.name-field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

/* サウンドトグル（タイトル画面） */
.sound-toggle {
  align-self: flex-start;
  width: auto;
  margin-top: 16px;
  padding: 8px 14px;
  background: transparent;
  color: var(--sub-on-dark);
  border: 1px solid #2A3247;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.sound-toggle:hover { color: var(--paper-on-dark); border-color: #3A4560; }
.sound-toggle[aria-pressed="true"] { color: #E08A4C; border-color: #E08A4C; }

@media (prefers-reduced-motion: reduce) {
  .panel,
  .result-box > p,
  .punchline,
  .effect-chip,
  .stat-delta,
  .ending-title,
  .dialogue-line,
  .rec-dot,
  .cast-pixels img,
  .stage-skyline::after,
  .stat-card strong.stat-landed { animation: none; }
  [data-screen="result"] [data-stat="yatterukan"] .stat-fill { animation: none; }
  .stat-fill { transition: none; }
  button, .choice-button::before { transition: none; }
  button:hover { transform: none; }
}