/* ===========================
   Play Typing Page Styles
   =========================== */

/* --- Typing-specific theme variables --- */
/* design-allow-start: color-literal */
/* タイピング機能識別色（typed=青/line-clear=緑/result グラデ等）の固定 token 定義。テーマ非依存 */
:root {
  --typing-typed: #0099CC;
  --typing-typed-rgb: 0,153,204;
  --typing-line-clear: #1eff52;
  --progress-phrase: #17a2b8;
  --progress-song: var(--color-warning);
  --progress-bg: rgba(var(--accent-rgb), 0.08);
  --result-gradient-1: #ff6b9d;
  --result-gradient-2: #c46dff;
  /* ⚠️ 結果カードは .result-overlay = rgba(0,0,0,.88) のダーク面。色相・彩度は据え置きで
     明度だけ上げた（--result-score 4.30 → 4.73 / --result-miss **3.05** → 4.71。
     練習ドリルの #111 面でも 5.35 / 5.33。計画書 182 Phase 3-5） */
  --result-score: #e7547b;
  --result-miss: #996ef7;
  --result-accuracy: #01a89d;
  --danger-red: var(--color-danger);
  --typing-bg: #111;

  /* タイピング画面のユーザー設定可能変数の初期値。JS から style.setProperty() で上書きされる前提 */
  --typed-color: var(--typing-typed);
  --untyped-color: var(--text-muted);
  --current-char-color: var(--accent);
  --miss-effect-color: var(--color-danger);
  --combo-color: var(--accent);
  --lyric-color: var(--text-primary);
  --next-lyric-color: var(--text-secondary);
  --next-lyric-font-size: 0.9rem;
  /* --countdown-color / --typing-area-bg は対戦画面（battle.css）も参照するため theme.css に移設済み */
  --typing-text-color: var(--text-primary);
  --phrase-gauge-bg: var(--bg-secondary);
  --phrase-gauge-color: var(--progress-phrase);
  --song-gauge-bg: var(--bg-secondary);
  --song-gauge-color: var(--progress-song);
  --skip-guide-color: var(--text-muted);
  --line-clear-color: var(--typing-line-clear);
  --kana-font-size: 1rem;
  --kana-letter-spacing: normal;
  --roma-font-size: 0.9rem;
  --roma-letter-spacing: normal;
  /* 用途: -webkit-text-stroke の thickness。length 値が必要なので 0 を初期値とし、JSがpxで上書き */
  --text-stroke: 0;
}

/* ⚠️ タイピングエリアは --typing-area-bg = --card-bg の**テーマ追従**面。
   上の 2 色は暗面前提の鮮色で、light 5 テーマの card 面では
   --typing-typed **2.46** / --typing-line-clear **1.02（＝地に溶けて見えない）**だった。
   色相・彩度は保ったまま明度だけ下げる（計画書 182 Phase 3-5）。
   ⚠️ この 2 つを使う**ダーク固定面**は元の鮮色に戻すこと（面とスコープは対で扱う）:
     ・.battle-play-page（battle.css。battle/play.html.erb が play_typing.css を読む）
     ・.gp-play-area / .gp-start-area / .gp-result-area（seo_guide.css の #111）
   ⚠️ ユーザーが自分で色を選んでいる場合は game_controller.js が --typed-color /
      --line-clear-color を直接上書きするので、ここが効くのは**既定値のとき**（+ light テーマで
      明るすぎる色がガードされたときのフォールバック先）。 */
[data-theme^="light-"] {
  --typing-typed: #00688b;
  --typing-typed-rgb: 0, 104, 139;
  --typing-line-clear: #00701a;
}
/* design-allow-end: color-literal */

/* --- Play Page Layout --- */
.play-page {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}

/* --- YouTube Player Area --- */
.yt-player-area {
  background: #000; /* design-allow: color-literal */
  border-radius: var(--card-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 0.5rem;
}
.yt-player-area iframe {
  width: 100%;
  height: 100%;
}
.yt-player-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

/* --- Controls Bar (placed between breadcrumb and video) --- */
.controls-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--border-color);
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.volume-control {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.volume-control input[type="range"] {
  width: 80px;
  accent-color: var(--accent);
  cursor: pointer;
}
.volume-control .vol-value {
  width: 1.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.time-adjust-control {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.time-adjust-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
  padding: 0;
  transition: border-color 0.15s, color 0.15s;
}
.time-adjust-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.time-adjust-value {
  min-width: 2.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.7rem;
  user-select: none;
}
.control-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}
.control-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.control-btn.active {
  border-color: rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
}
.control-btn i { font-size: 0.9rem; }
.controls-spacer { flex: 1; }
.share-btns {
  display: flex;
  gap: 0.375rem;
}
.share-btns .control-btn { padding: 0.35rem; }

/* --- Mode Selection --- */
.mode-select-area {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 1.25rem;
  margin-bottom: 0.75rem;
}
.mode-select-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.5rem;
}
.practice-toggle-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.practice-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.practice-info-btn:hover,
.practice-info-btn.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}
.practice-info-btn i { font-size: 1rem; }
.practice-info-popover {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  z-index: 20;
  width: 280px;
  max-width: calc(100vw - 2rem);
  padding: 0.75rem 0.875rem;
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* design-allow: color-literal */
  font-size: 0.78rem;
  line-height: 1.5;
}
.practice-info-popover p { margin: 0; }
.practice-info-popover p + p { margin-top: 0.4rem; }
.practice-info-popover::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 0.5rem;
  width: 10px;
  height: 10px;
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
  transform: rotate(45deg);
}
/* Practice toggle (switch pattern) */
.practice-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  transition: color 0.15s;
}
.practice-toggle:hover { color: var(--accent); }
.practice-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.practice-toggle-switch {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 9999px;
  background: var(--border-color);
  transition: background 0.2s;
  flex-shrink: 0;
}
.practice-toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--card-bg);
  transition: transform 0.2s;
}
.practice-toggle-input:checked + .practice-toggle-switch {
  background: var(--accent);
}
.practice-toggle-input:checked + .practice-toggle-switch::after {
  transform: translateX(16px);
}
.practice-toggle-input:focus-visible + .practice-toggle-switch {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.practice-toggle-text {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.practice-toggle-input:checked ~ .practice-toggle-text {
  color: var(--accent);
  font-weight: 600;
}
/* When practice toggle is on, indicate practice state on start buttons (theme colors) */
.mode-btn.practice-active {
  border-style: dashed;
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
  color: var(--accent);
}
.mode-btn.primary.practice-active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  border-color: var(--accent);
}
/* ⚠️ accent tint の地に accent の文字は light-sakana で 4.01 まで近づく。
   「練習中」の手がかりはボタンの地・枠・ラベル側に置き、説明文は中立色にする */
.mode-btn.primary.practice-active .mode-btn-desc { color: var(--text-secondary); }
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.mode-grid > .mode-btn:only-of-type { grid-column: span 2; }
/* Mobile: expand toggle button */
.mode-expand-toggle {
  display: none; /* shown only on mobile layout */
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.mode-expand-toggle:hover { color: var(--accent); border-color: var(--accent); }
.mode-expand-toggle i { transition: transform 0.2s; }
.mode-expand-toggle.expanded i { transform: rotate(180deg); }
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .practice-toggle,
  .practice-toggle-switch,
  .practice-toggle-switch::after,
  .practice-info-btn,
  .mode-expand-toggle,
  .mode-expand-toggle i,
  .mode-btn { transition: none; }
}
/* Show expand toggle only on mobile-layout grid, hide when keyboard modes are visible */
.mode-grid.mobile-layout .mode-expand-toggle { display: flex; grid-column: span 2; }
.mode-grid.mobile-layout.keyboard-modes-visible .mode-expand-toggle { display: none; }
/* Hide keyboard modes by default on mobile layout */
.mode-grid.mobile-layout .keyboard-mode { display: none; }
.mode-grid.mobile-layout.keyboard-modes-visible .keyboard-mode { display: flex; }
.mode-grid.mobile-layout.keyboard-modes-visible .keyboard-hint { display: block; }
.mode-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.mode-btn:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}
.mode-btn.primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}
.mode-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.mode-select-warning {
  color: var(--danger);
  font-weight: 600;
}
/* ⚠️ .mode-btn-desc と同じ形。opacity を重ねると .primary（accent 地）で 3.17 まで落ちる。
   弱さは font-size と weight で出す */
.mode-btn .badge-sub {
  font-size: 0.6rem;
  font-weight: 400;
}
.mode-btn-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
/* ⚠️ 弱さは font-size と weight で出す。opacity を重ねると
   .primary（accent 地）の説明文が 4.12 まで落ちるうえ、どのラチェットからも見えない */
.mode-btn-desc {
  font-size: 0.68rem;
  font-weight: 400;
}
/* First-play guide (server-side conditional rendering, no CLS) */
.first-play-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.55rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--text-on-accent);
  margin-left: 0.3rem;
  vertical-align: middle;
  line-height: 1.4;
}
.first-play-example {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  opacity: 0.6;
  margin-top: 0.15rem;
  font-style: italic;
}
.mode-divider {
  border-top: 1px dashed var(--border-color);
  margin: 0.375rem 0;
  grid-column: span 2;
}
.keyboard-hint {
  display: none;
  grid-column: span 2;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0.375rem 0;
  border-top: 1px dashed var(--border-color);
}
.keyboard-hint i { margin-right: 0.25rem; }
.speed-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.speed-control .speed-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
  color: var(--text-primary);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.speed-control .speed-value {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* --- Typing Play Area --- */
.typing-area {
  background: var(--typing-area-bg);
  border-radius: var(--card-radius);
  padding: 1rem 1.25rem;
  position: relative;
  margin-bottom: 0.5rem;
  min-height: 180px;
  -webkit-user-select: none;
  user-select: none;
}
/* Hidden input for flick/mobile IME
   - transform:scale(0): IME互換性向上（旧方式準拠）
   - font-size:16px: iOS Safari auto-zoom防止（16px未満でズームが発生する）
   - opacity:0: 視覚的に非表示 */
.flick-hidden-input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: none;
  outline: none;
  padding: 0;
  font-size: 16px;
  caret-color: transparent;
  overflow: hidden;
}
/* Flick Input: Tap-here indicator (旧システムtap_here SVG相当) */
.flick-tap-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 5;
  pointer-events: none;
}
.flick-tap-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--typing-text-color);
  opacity: 0.12;
  animation: flick-tap-pulse 1.2s ease-in-out infinite;
}
@keyframes flick-tap-pulse {
  0%, 100% { transform: scale(1); opacity: 0.12; }
  50% { transform: scale(1.3); opacity: 0.04; }
}
.flick-tap-text {
  /* ⚠️ opacity で薄めると --typing-text-color(= --text-primary) でも 4.10 まで落ちる。
     操作を促すヒントなので既定を読める濃さにする（計画書 182 Phase 3-5） */
  color: var(--typing-text-color);
  font-size: 0.85rem;
  white-space: nowrap;
}
/* Inline Status Bar (Tier 1: combo, line speed, remaining time) */
.typing-inline-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding-bottom: 0.25rem;
  margin-bottom: 0.125rem;
  border-bottom: 1px solid var(--border-color);
  font-variant-numeric: tabular-nums;
}
.inline-combo {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.inline-combo .combo-num {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--combo-color);
  margin-right: 0.125rem;
  display: inline-block;
}
/* Battle mode combo (absolute positioned, shown via display toggle) */
.typing-combo {
  position: absolute;
  top: 0.5rem;
  left: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.typing-combo .combo-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--combo-color);
  margin-right: 0.125rem;
  display: inline-block;
}

/* Combo bounce animation */
@keyframes combo-bounce {
  0%   { transform: scale(1.1, 1.2); }
  2%   { transform: scale(1.1, 1.3); }
  9%   { transform: scale(1, 1); }
  100% { transform: scale(1, 1); }
}
.combo-animate {
  animation: combo-bounce 0.6s both;
}
.inline-line-speed {
  opacity: 0.8;
}
.inline-remaining {
  opacity: 0.8;
}
.typing-main {
  font-size: var(--kana-font-size);
  letter-spacing: var(--kana-letter-spacing);
  margin: 0.5rem 0 0.25rem;
  line-height: 1.6;
  min-height: 1.6em;
  font-weight: 600;
  -webkit-text-stroke: var(--text-stroke) rgba(0,0,0,0.3); /* design-allow: color-literal */
  white-space: nowrap;
  overflow: hidden;
}
.typing-main .typed { color: var(--typed-color); }
.typing-main .current { color: var(--current-char-color); text-decoration: underline; text-underline-offset: 3px; }
.typing-main .untyped { color: var(--untyped-color); }
.typing-main .dk { font-size: 1.15em; vertical-align: baseline; line-height: inherit; }
.typing-main.line-cleared .typed { color: var(--line-clear-color); }
.typing-sub {
  font-size: var(--roma-font-size);
  letter-spacing: var(--roma-letter-spacing);
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  min-height: 1.6em;
  white-space: nowrap;
  overflow: hidden;
}
/* ⚠️ 弱さを alpha / opacity で出さない。ローマ字行は font-size で既に主行と差が付いており、
   薄めると light テーマの card 面で 1.99 / **1.24** まで落ちていた（計画書 182 Phase 3-5） */
.typing-sub .typed { color: var(--typing-typed); }
.typing-sub.line-cleared .typed { color: var(--line-clear-color); }
.typing-lyric {
  font-size: 1.1rem;
  color: var(--lyric-color);
  margin: 0.75rem 0 0.25rem;
  font-weight: 500;
  min-height: 1.6em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.typing-next-lyric-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  min-height: 1.6em;
}
.typing-next-lyric {
  font-size: var(--next-lyric-font-size);
  color: var(--next-lyric-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.typing-next-line-speed {
  font-size: 0.72rem;
  color: var(--next-lyric-color);
  white-space: nowrap;
  flex-shrink: 0;
}
.typing-skip-guide {
  position: absolute;
  bottom: 2.5rem;
  right: 1rem;
  color: var(--skip-guide-color);
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.typing-skip-guide kbd {
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: var(--tag-bg);
  border: 1px solid var(--border-color);
  font-size: 0.7rem;
}

/* --- Progress Bars --- */
.progress-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 0.25rem;
}
.progress-bar-wrap {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar-wrap.phrase { background: var(--phrase-gauge-bg); }
.progress-bar-wrap.phrase .bar-fill { background: var(--phrase-gauge-color); width: 0%; height: 100%; border-radius: 3px; }
.progress-bar-wrap.song { background: var(--song-gauge-bg); }
.progress-bar-wrap.song .bar-fill { background: var(--song-gauge-color); width: 0%; height: 100%; border-radius: 3px; transition: width 0.1s; }

/* --- Shortcut Bar --- */
.shortcut-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.shortcut-bar kbd {
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: var(--tag-bg);
  border: 1px solid var(--border-color);
  font-size: 0.68rem;
  color: var(--text-secondary);
}
.shortcut-bar .shortcut-item {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

/* --- Status / Ranking Tabs --- */
.status-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 1rem;
}
.status-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
}
.status-tab {
  flex: 1;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 2px solid transparent;
}
.status-tab:hover { color: var(--text-primary); }
.status-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.status-content {
  padding: 0.75rem 1rem;
}
.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.stat-item .stat-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-item .stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--status-text-color);
  font-variant-numeric: tabular-nums;
}
.ranking-list {
  max-height: 200px;
  overflow-y: auto;
}
.ranking-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.06);
  font-size: 0.82rem;
}
.ranking-item:last-child { border-bottom: none; }
.ranking-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0 0.375rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.12);
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}
.ranking-pos {
  width: 1.5rem;
  text-align: center;
  font-weight: 700;
  color: var(--text-muted);
}
.ranking-pos.gold { color: var(--medal-gold-fg); }
.ranking-pos.silver { color: var(--medal-silver-fg); }
.ranking-pos.bronze { color: var(--medal-bronze-fg); }
.ranking-score {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 3.5rem;
}
.ranking-speed {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.ranking-name {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

/* --- Settings Panel (Slide-in) --- */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35); /* design-allow: color-literal */
  z-index: var(--z-modal);
  display: flex;
  justify-content: flex-end;
}
.settings-panel {
  width: 380px;
  max-width: 90vw;
  background: var(--card-bg);
  border-left: 1px solid var(--border-color);
  overflow-y: auto;
  padding: 1.25rem;
  box-shadow: var(--player-float-shadow);
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card-bg);
  padding-bottom: 0.5rem;
}
.settings-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.settings-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}
.settings-close-label { display: none; }
.settings-close-icon { line-height: 1; }
.settings-tabs {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
}
.settings-tab {
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.settings-tab:hover { color: var(--text-primary); }
.settings-tab.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}
.settings-section {
  margin-bottom: 1.25rem;
}
.settings-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.625rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.08);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0;
  gap: 0.5rem;
}
.setting-row.sub {
  padding-left: 1.25rem;
}
.setting-label {
  font-size: 0.8rem;
  color: var(--text-primary);
  flex: 1;
}
.setting-label .hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  display: block;
  margin-top: 0.1rem;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border-color);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-switch::before {
  content: '';
  position: absolute;
  inset: -12px;
}
.toggle-switch.on { background: var(--accent); }
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-primary);
  transition: transform 0.2s;
  box-shadow: var(--player-menu-shadow);
}
.toggle-switch.on::after { transform: translateX(16px); }
/* Cycle switch */
.cycle-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  user-select: none;
  transition: background 0.15s;
  flex-shrink: 0;
}
.cycle-switch:hover {
  background: rgba(var(--accent-rgb), 0.15);
}
/* Numeric stepper */
.num-stepper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.num-stepper button {
  min-width: 44px;
  min-height: 44px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.num-stepper .num-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  min-width: 2.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Volume slider in settings */
.setting-slider {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.setting-slider input[type="range"] {
  width: 60px;
  accent-color: var(--accent);
}
.setting-slider .slider-val {
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 1.5rem;
  text-align: right;
}
/* Color picker */
.color-picker-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.color-swatch {
  min-width: 44px;
  min-height: 44px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.settings-footer {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}
.settings-reset-btn {
  width: 100%;
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  cursor: pointer;
}

/* --- Result Overlay --- */
.result-overlay {
  background: rgba(0,0,0,0.88); /* design-allow: color-literal */
  /* ⚠️ ここは rgba(0,0,0,.88) の**ダーク固定面**なので、中で使うテーマ追従トークンを
     この面に合わせて局所上書きする（.battle-play-page / .bge-container と同じ形）。
     上書きしないと light 5 テーマで --text-secondary 2.49 / --text-muted 1.90、
     dark 5 テーマで --text-on-accent 1.18 と両方向に割れる。
     ⚠️ 上書きしたら scripts/contrast_context_audit.py の CONTEXTS にも scope を書くこと */
  /* design-allow-start: color-literal */
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-muted: #888;
  --card-bg: #1f1f24;
  --border-color: rgba(255,255,255,0.15);
  --tag-bg: rgba(255,255,255,0.08);
  --color-warning: #fbbf24;
  /* accent 面の上の文字。light の #fff のままだと下の light 用 accent（明色）で沈む */
  --text-on-accent: #1a1a1a;
  /* design-allow-end: color-literal */
  border-radius: var(--card-radius);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 0.75rem;
}
/* ⚠️ 「壊れているテーマだけ直す」。dark 5 テーマの --accent はこの暗面で足りているので触らない */
/* design-allow-start: color-literal */
[data-theme="light-classic"] .result-overlay { --accent: #e26262; --accent-rgb: 226,98,98; }
[data-theme="light-slate"] .result-overlay { --accent: #648dca; --accent-rgb: 100,141,202; }
[data-theme="light-sakana"] .result-overlay { --accent: #cf7061; --accent-rgb: 207,112,97; }
[data-theme="light-botanical"] .result-overlay { --accent: #3f9d54; --accent-rgb: 63,157,84; }
[data-theme="light-shell"] .result-overlay { --accent: #728cb0; --accent-rgb: 114,140,176; }
/* design-allow-end: color-literal */
.result-image {
  width: 380px;
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
  position: relative;
  background: linear-gradient(135deg, #1a0533, #0d1b2a); /* design-allow: color-literal */
  padding: 1.25rem;
}
.result-image .result-rank-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.result-image .result-rank-text {
  font-size: 2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--result-gradient-1), var(--result-gradient-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0.25rem 0;
}
.result-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.result-score-item {
  text-align: center;
}
.result-score-item .label {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.125rem;
}
.result-score-item .value {
  font-size: 1.3rem;
  font-weight: 700;
  /* ⚠️ accent 面ではなくダーク面の上の主要な数値。--text-on-accent は dark 値が黒なので 1.18 だった */
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.result-score-item .value.score-color { color: var(--result-score); }
.result-score-item .value.miss-color { color: var(--result-miss); }
.result-score-item .value.acc-color { color: var(--result-accuracy); }
.result-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.result-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}
.result-action-btn.primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
.result-action-btn.secondary {
  background: var(--tag-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
/* design-allow-start: color-literal */
/* X の共有ボタン。⚠️ アイコンは bi-twitter-x なのに地だけ旧 Twitter 青 (#1da1f2) のままで、
   #fff を置くと 2.83 だった。X のブランドは黒/白。ここは .result-overlay =
   rgba(0,0,0,.88) のダーク固定面なので、.share-modal-btn-x のダークテーマ側と
   同じ「白地 + 黒文字」に揃える（21:1。計画書 182 Phase 4） */
.result-action-btn.twitter {
  background: #fff;
  color: #000;
}
/* design-allow-end: color-literal */

/* --- Result: Guest Registration CTA --- */
.result-guest-cta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(76, 154, 255, 0.08); /* design-allow: color-literal */
  border: 1px solid rgba(76, 154, 255, 0.2); /* design-allow: color-literal */
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.result-guest-cta i {
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
}
.result-guest-cta-btn {
  margin-left: auto;
  padding: 0.3rem 0.75rem;
  background: var(--accent);
  color: var(--text-on-accent);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* --- Result: Next Recommend Songs --- */
.result-next-songs {
  margin-top: 0.75rem;
}
.result-next-songs-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}
.result-next-songs-grid {
  display: flex;
  gap: 0.5rem;
}
.result-next-card-wrap {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: border-color 0.15s;
}
.result-next-card-wrap:hover {
  border-color: var(--accent);
}
.result-next-card {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0.4rem;
  text-decoration: none;
  color: inherit;
}
.result-next-thumb {
  width: 64px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.result-next-info {
  min-width: 0;
  flex: 1;
}
.result-next-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-next-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}
.result-next-reason {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--text-secondary);
}
.result-next-later {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-left: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  transition: color 0.15s;
}
.result-next-later:hover {
  color: var(--accent);
}

/* --- Play Result Detail --- */
.result-detail {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  margin-bottom: 1rem;
}
.result-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}
.result-detail-body {
  padding: 0 1rem 1rem;
}

/* --- Song Info --- */
.song-info {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.song-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}
.song-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.song-meta .level-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.72rem;
}
.song-creator-section {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
}
.song-creator-avatar-link {
  flex-shrink: 0;
}
.song-creator-avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}
.song-creator-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 0.7rem;
}
.song-creator-body {
  min-width: 0;
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.song-creator-name {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}
.song-creator-name:hover {
  color: var(--accent);
}
.song-creator-desc {
  display: inline;
}
.song-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.song-tag {
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--tag-bg);
  color: var(--text-secondary);
  font-size: 0.7rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.song-tag:hover {
  background: var(--tag-hover-bg, rgba(var(--accent-rgb), 0.1));
  color: var(--text-primary);
}

/* --- Song Difficulty / Map Info --- */
.song-difficulty {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}
.song-difficulty:empty {
  display: none;
}
.map-info-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.map-info-item i {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Value change flash animation */
@keyframes map-info-flash {
  0% { background-color: rgba(var(--accent-rgb), 0.15); }
  100% { background-color: transparent; }
}
.map-info-flash .map-info-item {
  animation: map-info-flash 0.6s ease-out;
  border-radius: 3px;
}

/* Symbol popup trigger */
.map-symbol-trigger {
  position: relative;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
/* Invisible bridge to prevent hover gap between trigger and popup */
.map-symbol-trigger::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 10px;
}
.map-symbol-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.75rem;
  min-width: 180px;
  max-width: 320px;
  box-shadow: var(--player-menu-shadow);
  z-index: 100;
  font-size: 0.75rem;
  color: var(--text-primary);
}
/* Desktop hover, keyboard focus, and tap toggle */
.map-symbol-trigger:hover .map-symbol-popup,
.map-symbol-trigger:focus-within .map-symbol-popup,
.map-symbol-trigger.is-active .map-symbol-popup {
  display: block;
}
.map-symbol-trigger:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.map-symbol-popup-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}
.map-symbol-columns {
  display: flex;
  gap: 0.75rem;
}
.symbol-column {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.symbol-entry {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.symbol-char {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5em;
  padding: 0.1rem 0.3rem;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 3px;
  font-weight: 600;
  font-family: monospace;
}

/* Map info summary in mode-select area */
.map-info-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.map-info-summary:empty {
  display: none;
}
.map-summary-sep {
  opacity: 0.4;
}

@media (max-width: 480px) {
  .song-difficulty {
    gap: 0.3rem 0.6rem;
    font-size: 0.72rem;
  }
  .map-symbol-popup {
    left: 0;
    transform: none;
    min-width: 160px;
  }
  .map-info-summary {
    font-size: 0.72rem;
  }
}

/* --- Personal Record --- */
.personal-record {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 1rem;
}
.record-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.record-table th {
  background: rgba(var(--accent-rgb), 0.04);
  padding: 0.5rem 0.625rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-color);
}
.record-table td {
  padding: 0.5rem 0.625rem;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.04);
  font-variant-numeric: tabular-nums;
}
.record-table td.highlight {
  font-weight: 700;
  color: var(--accent);
}

/* --- Recommend --- */
.recommend-section {
  margin-bottom: 1.5rem;
}
.recommend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.recommend-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
}
.recommend-card:hover { transform: translateY(-2px); }
.recommend-thumb {
  aspect-ratio: 16/9;
  background: var(--code-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.5rem;
}
.recommend-info {
  padding: 0.5rem 0.625rem;
}
.recommend-info .rec-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recommend-info .rec-creator {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

/* --- Countdown Overlay --- */
.countdown-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 800;
  color: var(--countdown-color);
  text-shadow: 0 0 30px var(--border-color);
  z-index: 5;
}

/* --- Shortcut Guide Overlay (first-play) --- */
.shortcut-guide-overlay {
  /* ⚠️ rgba(0,0,0,.8) のダーク固定面。light の --text-muted を置くと 2.01。
     .result-overlay より薄い面（alpha .8）なので #888 では 3.56 にしかならず、一段明るくする */
  --text-muted: #a5a5a5; /* design-allow: color-literal */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.8); /* design-allow: color-literal */
  z-index: 6;
  gap: 1.5rem;
  animation: shortcutGuideIn 0.3s ease-out;
}
.shortcut-guide-items {
  display: flex;
  gap: 2rem;
}
.shortcut-guide-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.shortcut-guide-item kbd {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 1.1rem;
  font-weight: 700;
  background: rgba(255,255,255,0.12); /* design-allow: color-literal */
  border: 1px solid rgba(255,255,255,0.25); /* design-allow: color-literal */
  border-radius: 6px;
  color: #fff; /* design-allow: color-literal */
  min-width: 3rem;
  text-align: center;
}
.shortcut-guide-item span {
  font-size: 0.8rem;
  color: var(--text-muted);
}
/* ⚠️ opacity 0.7 だと実効 2.88。点滅アニメーションがあるので静止時は薄くしない */
.shortcut-guide-dismiss {
  font-size: 0.75rem;
  color: var(--text-muted);
  animation: shortcutGuidePulse 2s ease-in-out infinite;
}
@keyframes shortcutGuideIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes shortcutGuidePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* --- Pause Overlay --- */
.pause-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7); /* design-allow: color-literal */
  z-index: 5;
  gap: 0.5rem;
}
.pause-overlay .pause-icon { font-size: 3rem; color: var(--text-primary); }
.pause-overlay .pause-text { font-size: 1rem; color: var(--text-secondary); font-weight: 600; }
.pause-overlay .pause-hint { font-size: 0.75rem; color: var(--text-muted); }
.pause-shortcuts {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.pause-shortcut-item {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.pause-shortcut-item kbd {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
  background: rgba(255,255,255,0.1); /* design-allow: color-literal */
  border: 1px solid rgba(255,255,255,0.2); /* design-allow: color-literal */
  border-radius: 3px;
  color: var(--text-secondary);
  margin-right: 0.25rem;
}

/* --- Game Over Overlay --- */
.gameover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85); /* design-allow: color-literal */
  z-index: 5;
  gap: 0.5rem;
}
.gameover-overlay .gameover-text {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--danger-red);
  text-shadow: 0 0 20px rgba(var(--color-danger-rgb), 0.4);
}
.gameover-overlay .gameover-sub { font-size: 0.85rem; color: var(--text-muted); }
.gameover-overlay .gameover-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* --- Practice Mode Indicator --- */
.practice-indicator {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.6rem;
  background: rgba(var(--accent-rgb), 0.15);
  border: 1px dashed rgba(var(--accent-rgb), 0.4);
  border-radius: 4px;
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 600;
}

/* --- Miss Effect Flash --- */
.miss-flash {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--miss-effect-color) 6%, transparent);
  pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--miss-effect-color) 15%, transparent);
  border-radius: var(--card-radius);
  z-index: 3;
}

/* Light themes: higher opacity for visibility on light backgrounds */
[data-theme="light-classic"] .miss-flash,
[data-theme="light-slate"] .miss-flash,
[data-theme="light-sakana"] .miss-flash,
[data-theme="light-botanical"] .miss-flash,
[data-theme="light-shell"] .miss-flash {
  background: color-mix(in srgb, var(--miss-effect-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--miss-effect-color) 25%, transparent);
}

/* --- Line Clear Gauge --- */
.line-clear-gauge {
  height: 4px;
  background: var(--tag-bg);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.25rem;
}
.line-clear-gauge .gauge-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--line-clear-color), rgba(var(--lh-success-rgb), 0.6));
  border-radius: 2px;
  transition: width 0.3s;
}

/* --- Ranking Self Highlight --- */
.ranking-item.self-record {
  background: rgba(var(--accent-rgb), 0.06);
  border-radius: 4px;
  margin: 0 -0.25rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.ranking-item.self-record .ranking-name {
  color: var(--accent);
  font-weight: 600;
}

/* --- Ranking Pagination --- */
.ranking-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border-top: 1px solid var(--border-color);
}
.ranking-pagination .page-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ranking-pagination .page-btn.active {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}
.ranking-pagination .page-btn:hover:not(.active) {
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* --- Speed Range Hint --- */
.speed-range {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: 0.25rem;
}

/* --- Result Extra Stats --- */
.result-extra-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.result-extra-item {
  text-align: center;
}
.result-extra-item .extra-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}
.result-extra-item .extra-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary); /* ⚠️ .result-score-item .value と同じ。accent 面ではない */
  font-variant-numeric: tabular-nums;
}
.result-extra-item .extra-value.highlight-color { color: var(--progress-song); }

/* --- Growth Feedback Badges --- */
.result-growth-feedback {
  width: 100%;
  max-width: 400px;
  margin: 0.75rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 200px;
  overflow-y: auto;
}
.growth-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0;
  animation: growthBadgeFadeIn 0.4s ease-out forwards;
}
.growth-badge-icon {
  flex-shrink: 0;
  font-size: 0.9rem;
}
.growth-badge-text {
  white-space: nowrap;
}
.growth-badge-detail {
  margin-left: auto;
  font-size: 0.8rem;
  font-weight: 400;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* Tier 1: 自己ベスト更新 */
.growth-badge-record {
  background: rgba(var(--warning-soft-bg-rgb), 0.12);
  border: 1px solid rgba(var(--warning-soft-bg-rgb), 0.3);
  color: var(--color-warning);
}
.growth-badge-combo {
  color: #fb923c; /* design-allow: color-literal */
  background: rgba(251, 146, 60, 0.12); /* design-allow: color-literal */
  border-color: rgba(251, 146, 60, 0.3); /* design-allow: color-literal */
}
.growth-badge-speed {
  color: #22d3ee; /* design-allow: color-literal */
  background: rgba(34, 211, 238, 0.12); /* design-allow: color-literal */
  border-color: rgba(34, 211, 238, 0.3); /* design-allow: color-literal */
}
.growth-badge-clear {
  color: #34d399; /* design-allow: color-literal */
  background: rgba(52, 211, 153, 0.12); /* design-allow: color-literal */
  border-color: rgba(52, 211, 153, 0.3); /* design-allow: color-literal */
}

/* Tier 2: 特別達成 */
.growth-badge-special {
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
}
.growth-badge-perfect {
  background: linear-gradient(135deg, rgba(var(--warning-soft-bg-rgb), 0.15), rgba(236, 72, 153, 0.15)); /* design-allow: color-literal */
  border: 1px solid rgba(var(--warning-soft-bg-rgb), 0.4);
  color: var(--color-warning);
  animation: growthBadgeFadeIn 0.4s ease-out forwards, growthBadgePulse 2s ease-in-out 0.4s infinite;
}

/* Tier 3: マイルストーン */
.growth-badge-milestone {
  background: rgba(139, 92, 246, 0.1); /* design-allow: color-literal */
  border: 1px solid rgba(139, 92, 246, 0.25); /* design-allow: color-literal */
  color: #a78bfa; /* design-allow: color-literal */
  font-size: 0.8rem;
}

@keyframes growthBadgeFadeIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes growthBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--warning-soft-bg-rgb), 0.3); }
  50% { box-shadow: 0 0 12px 2px rgba(var(--warning-soft-bg-rgb), 0.2); }
}

/* --- Tablet --- */
@media (max-width: 768px) {
  .play-page { padding: 0 0.75rem 1.5rem; }
  .result-scores { grid-template-columns: repeat(3, 1fr); }
  .result-actions { flex-direction: column; align-items: stretch; }
  .settings-panel { width: calc(100vw - 3rem); max-width: calc(100vw - 3rem); }
  .status-grid { grid-template-columns: repeat(2, 1fr); }
  .recommend-grid { grid-template-columns: repeat(2, 1fr); }
  .controls-bar { gap: 0.5rem; padding: 0.375rem 0.5rem; margin-bottom: 0.375rem; }
  /* ゲーム進行中（カウントダウン含む）は動画の縦スペース確保のため非表示。paused 時は表示 */
  html[data-typing-active="playing"] .controls-bar,
  html[data-typing-active="countdown"] .controls-bar { display: none; }
  .shortcut-bar { display: none; }
  /* Touch target sizes (44px minimum) */
  .control-btn { min-width: 44px; min-height: 44px; padding: 0.5rem; }
  .speed-control .speed-btn { width: 44px; height: 44px; font-size: 1.1rem; }
  .settings-close {
    width: auto; height: 44px; font-size: 0.875rem;
    border-radius: 8px; padding: 0 0.75rem;
    background: var(--border-color);
  }
  .settings-close-label { display: inline; }
  .volume-control input[type="range"] { width: 120px; }
  .pub-share-btn { width: 44px; height: 44px; font-size: 1rem; }
  /* Typing text: font-size reduction */
  .typing-main { font-size: 1.1rem; }
  .typing-sub { font-size: 0.85rem; }
  .typing-lyric { font-size: 0.9rem; }
  .typing-next-lyric { font-size: var(--next-lyric-font-size); }
  .typing-next-line-speed { font-size: 0.65rem; }
  /* Inline status: size adjustment */
  .typing-inline-status { font-size: 0.68rem; }
  .inline-combo .combo-num { font-size: 1rem; }
  .typing-combo .combo-num { font-size: 1.25rem; }
  /* Mode buttons: touch-friendly sizing */
  .mode-btn { padding: 0.75rem 1rem; font-size: 0.95rem; }
  /* Ranking list: horizontal scroll support */
  .ranking-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Personal record table: horizontal scroll */
  .personal-record { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* --- Mobile (mode grid 1-col) --- */
@media (max-width: 640px) {
  .mode-grid { grid-template-columns: 1fr; }
  .mode-divider { grid-column: span 1; }
  .keyboard-hint { grid-column: span 1; }
}

/* --- Smartphone --- */
@media (max-width: 480px) {
  .play-page { padding: 0 0.5rem 1rem; }
  .recommend-grid { grid-template-columns: 1fr; }
  /* Typing text: further reduction */
  .typing-main { font-size: 1rem; letter-spacing: 0.5px; }
  .typing-sub { font-size: 0.75rem; }
  /* Result screen: layout adjustment */
  .result-scores { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .result-overlay { padding: 1rem; }
  .result-next-songs-grid { flex-direction: column; }
  .result-guest-cta { flex-wrap: wrap; font-size: 0.72rem; }
  /* Volume control */
  .volume-control input[type="range"] { width: 80px; }
  /* Settings panel: padding adjustment */
  .settings-panel { padding: 0.75rem; }
  .settings-section { margin-bottom: 0.75rem; }
  /* Song info: compact */
  .song-info { padding: 0.75rem; }
  /* Result detail: compact */
  .result-detail-line-status { padding-left: 1rem; }
  /* Status panel */
  .status-grid { gap: 0.25rem; }
  .stat-item .stat-value { font-size: 0.9rem; }
}

/* --- Touch Device Enhancements --- */
@media (pointer: coarse) {
  .progress-bar-wrap { height: 8px; }
  .volume-control input[type="range"] { height: 24px; }
}

/* --- Phase 4: Result Detail --- */
.result-detail-line {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
}
.result-detail-line-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.result-detail-line-header .line-number {
  font-weight: 700;
  color: var(--status-text-color);
  min-width: 2rem;
}
.result-detail-line-header .line-lyric {
  color: var(--lyric-color);
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result-detail-line-status {
  padding-left: 2.5rem;
  font-size: 0.8rem;
  margin-top: 0.15rem;
}
.result-detail-line.line-failed {
  background: var(--danger-bg);
}
.result-detail-line.line-has-miss {
  background: rgba(var(--warning-soft-bg-rgb), 0.08);
}
.result-detail-stats {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
}
.result-detail-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
}
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-danger { color: var(--danger-color); }
.text-muted { color: var(--text-muted); }
.ranking-empty {
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
}

/* ===================================================================
   Mission HUD (mission HP display during gameplay)

   計画書171 §5: タイピング領域の最上段に置く 1 行（コンボ行の上）。
   絶対配置をやめてフロー要素にしたので、コンボ行と重ならず幅もフルに使える
   （おしごと名は nl/es/fr で 40 文字前後になるため 150px の箱には入らなかった）。
   配色は同じ面のコンボ行（.typing-inline-status）と同じ扱い = 下敷きを敷かず
   テーマ変数だけを使う。タイピングエリアの背景はユーザーが任意色に設定できるため、
   固定色の下敷きでは全テーマでの正しさを担保できない
   =================================================================== */

.mission-hud {
  position: relative; /* 用途: 達成バナー（absolute）の基準 */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  pointer-events: none;
}

/* 行が増えるぶんの縦を最小にする: HUD が出ているときだけ上端の余白を詰める。
   ノート PC など画面が低い環境で、動画とタイピング情報を同時に視野へ入れるため
   （HUD が無いときは行ごと display:none なので縦は 1px も増えない） */
.typing-area:has(.mission-hud:not(.is-hidden)) {
  padding-top: 0.5rem;
}

.mission-hud-portrait {
  width: 20px;
  height: 20px;
  image-rendering: pixelated;
  border-radius: 3px;
  flex-shrink: 0;
}

/* おしごと名。長い言語では省略し、HP バーの幅を優先して確保する */
.mission-hud-title {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mission-hud-hp-bar {
  flex: 1 1 auto;
  min-width: 64px;
  max-width: 240px;
  height: 6px;
  background: var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}

.mission-hud-hp-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.15s ease;
}

/* 残量の色。--success-green（固定グリーン）は light 5 テーマでトラックとの差が 1.4 前後しかなく
   非テキストの 3:1 を満たさないため、テーマ別に調整済みの --color-success を使う */
.mission-hud-hp-fill.hp-high {
  background: var(--color-success);
}
.mission-hud-hp-fill.hp-mid {
  background: var(--color-warning);
}
.mission-hud-hp-fill.hp-low {
  background: var(--color-danger);
}

/* 数値はバーの直後に置く（右端に飛ばすとどのバーの残量か読み取りにくい） */
.mission-hud-hp-text {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 練習モードインジケータ（absolute 右上）が HUD 行に重ならないよう下へずらす。
   HUD 行はエリア上端 8px から始まりキャラ絵 20px + padding 4px = 24px 分を占めるので、
   2rem 以降なら被らない。コンボ行との重なりは HUD と無関係の既存問題
   （計画書171 §5.7 でスコープ外） */
.mission-hud:not(.is-hidden) ~ .practice-indicator {
  top: 2rem;
}

/* Damage pulse: portrait shake */
.mission-hud-portrait.damage-shake {
  animation: mission-hud-shake 0.2s ease;
}
@keyframes mission-hud-shake {
  0%, 100% { transform: translateX(0); }
  25%  { transform: translateX(-2px); }
  75%  { transform: translateX(2px); }
}

/* Damage pulse: HP bar flash */
.mission-hud-hp-fill.damage-flash {
  animation: mission-hud-bar-flash 0.2s ease;
}
@keyframes mission-hud-bar-flash {
  0%   { filter: brightness(1); }
  50%  { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

/* 達成バナー。HUD 行を基準に浮かせ、行より大きい文字を上方向へはみ出させる
   （タイピング領域の上端 padding 1rem の余地に収まる。歌詞・ローマ字は遮らない） */
.mission-hud-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-warning);
  text-shadow: 0 0 12px rgba(var(--warning-soft-bg-rgb), 0.6);
}

/* Defeat animation: pop → hold → fade out。
   行そのものは残す（撃破はプレイ中に起きるので、行が消えるとタイピング文字が上へずれる）ため、
   アニメーションはバナーだけに掛ける（計画書171 §5.5-2 / §5.8 ③） */
.mission-hud.defeated .mission-hud-banner {
  animation: mission-hud-banner-defeat 2s ease forwards;
}
@keyframes mission-hud-banner-defeat {
  0%   { opacity: 0; transform: scale(0.9); }
  8%   { opacity: 1; transform: scale(1.15); }
  20%  { opacity: 1; transform: scale(1); }
  65%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* 動きを抑える設定では、揺れ・拡大をやめて透明度だけで見せる
   （バナーはアニメーションを消すと出たまま残ってしまうので、フェードは残す） */
@media (prefers-reduced-motion: reduce) {
  .mission-hud-portrait.damage-shake,
  .mission-hud-hp-fill.damage-flash { animation: none; }
  .mission-hud-hp-fill { transition: none; }
  .mission-hud.defeated .mission-hud-banner {
    animation: mission-hud-banner-fade 2s ease forwards;
  }
  @keyframes mission-hud-banner-fade {
    0%   { opacity: 0; }
    8%   { opacity: 1; }
    65%  { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* Mobile: smaller HUD（フル幅の 1 行なので、名前を縮める必要はない） */
@media (max-width: 640px) {
  .mission-hud {
    gap: 0.375rem;
    font-size: 0.6rem;
  }
  .mission-hud-hp-bar { min-width: 48px; height: 4px; }
  .mission-hud-hp-text { font-size: 0.6rem; }
  .mission-hud-banner { font-size: 1.25rem; }
}

/* ===========================
   Replay Mode Styles
   =========================== */

/* Replay: ミス文字の色分け（サブテキスト領域） */
.typing-sub .replay-miss {
  /* ⚠️ .typing-area は --typing-area-bg = --card-bg の**テーマ追従**面。
     固定の #FF3554 は light 5 テーマで 3.37 だった（replay-summary と同じ直し方） */
  color: var(--color-danger);
  text-decoration: underline wavy var(--color-danger);
}

/* Replay: ショートカットバーのリプレイ情報表示 */
.play-page[data-typing--game-replay-mode-value="true"] .shortcut-bar {
  justify-content: center;
  gap: 1.5rem;
}

.play-page[data-typing--game-replay-mode-value="true"] .shortcut-bar .shortcut-item i {
  margin-right: 0.25rem;
}

/* Replay: ステータスパネルのタブ非表示（リプレイではモード切替不要） */
.play-page[data-typing--game-replay-mode-value="true"] .status-tabs {
  display: none;
}

/* design-allow-start: bang-important */
/* Replay モード時、JS が inline style="display:flex" で表示するオーバーレイ類を強制非表示にする必要があるため !important が機能要件 */

/* Replay: 練習モードインジケーター非表示 */
.play-page[data-typing--game-replay-mode-value="true"] .practice-indicator {
  display: none !important;
}

/* Replay: スキップガイド非表示 */
.play-page[data-typing--game-replay-mode-value="true"] .typing-skip-guide {
  display: none;
}

/* Replay: ポーズオーバーレイ非表示（YouTubeクリックでの一時停止時） */
.play-page[data-typing--game-replay-mode-value="true"] .pause-overlay {
  display: none !important;
}

/* Replay: ゲームオーバーオーバーレイ非表示 */
.play-page[data-typing--game-replay-mode-value="true"] .gameover-overlay {
  display: none !important;
}

/* Replay: カウントダウン非表示 */
.play-page[data-typing--game-replay-mode-value="true"] .countdown-overlay {
  display: none !important;
}

/* Replay: ショートカットガイド非表示 */
.play-page[data-typing--game-replay-mode-value="true"] .shortcut-guide-overlay {
  display: none !important;
}
/* design-allow-end: bang-important */

/* ===========================
   Visual Stage (計画書 136 Phase 1)
   3 モード切替: video / stage / split。
   feedback_cls.md: display:none トグルではなく visibility / grid template で領域確保。
   =========================== */

.play-media-area {
  display: grid;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  gap: 8px;
}

.media-slot {
  position: relative;
  overflow: hidden;
}

.media-slot--stage {
  aspect-ratio: 16 / 9;
  background-color: var(--bg-secondary);
}

.media-slot--video {
  aspect-ratio: 16 / 9;
}

.visual-stage__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  transition: opacity 0.3s ease-in-out;
}

/* Phase 2: シーン遷移フェード — _transitionToScene で is-transitioning を一時的に付与 */
.visual-stage__canvas.is-transitioning {
  opacity: 0;
}

/* mode: video (default) — ステージは visibility:hidden、動画フル幅 */
.play-media-area.media-mode--video .media-slot--stage,
.play-media-area:not(.media-mode--stage):not(.media-mode--split) .media-slot--stage {
  visibility: hidden;
  height: 0;
  margin: 0;
}

/* mode: stage — 動画 200×200 上段、ステージ 960×540 下段。
 * 動画を上に置くのはスクロール時に動画 + 歌詞行が画面に残るようにするため
 * (上段がステージだとスクロールでステージが画面外に出て小さい動画だけが残り
 *  「ステージ大」モードの意味がなくなる)。HTML 順序は visual_stage 有無で
 *  変えない方針のため grid-row で表示順を反転する。 */
.play-media-area.media-mode--stage {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.play-media-area.media-mode--stage .media-slot--video {
  grid-row: 1;
  width: 200px;
  height: 200px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

.play-media-area.media-mode--stage .media-slot--stage {
  grid-row: 2;
  visibility: visible;
}

/* mode: split — 2 カラム並列、各 480×270 */
.play-media-area.media-mode--split {
  grid-template-columns: 1fr 1fr;
}

.play-media-area.media-mode--split .media-slot--stage,
.play-media-area.media-mode--split .media-slot--video {
  visibility: visible;
  aspect-ratio: 16 / 9;
}

/* mobile: split を縦並びに変える */
@media (max-width: 768px) {
  .play-media-area.media-mode--split {
    grid-template-columns: 1fr;
  }
}

/* Settings panel: ビジュアルステージ mode ボタン */
.visual-stage-admin-section .visual-stage-mode-buttons {
  display: flex;
  gap: 4px;
}

.visual-stage-admin-section .vs-mode-btn {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.85rem;
}

.visual-stage-admin-section .vs-mode-btn.is-active {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

/* Phase 3: pulse_effect — _applyPulse で .vs-pulse を一時付与 */
@keyframes vs-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  70% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.visual-stage__canvas .decoration-slot.vs-pulse {
  /* --vs-pulse-duration は theme.css に fallback 定義あり、JS (_applyPulse) が intensity に応じて上書き */
  animation: vs-pulse var(--vs-pulse-duration) cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Phase 5d: set_slot_param による CSS variable バインド。
   opacity は常時 --vs-opacity (未設定なら 1) で適用。GPU compositing layer 影響なし。
   filter 系は .has-vs-filter class 条件付きで適用 (未設定 slot は filter プロパティが当たらず
   GPU compositing layer 生成を回避)。
   transform は触らない (既存 motion の wrapper/inner 三層構造を破壊しないため)。 */
.visual-stage__canvas .decoration-slot {
  opacity: var(--vs-opacity, 1);
}

.visual-stage__canvas .decoration-slot.has-vs-filter {
  filter: blur(var(--vs-filter-blur, 0px)) brightness(var(--vs-filter-brightness, 1)) saturate(var(--vs-filter-saturate, 1));
}


/* 共有 URL コピー時のトースト。typing--game#_showShareToast が body 直下に足す。
   プレイページの body 面（テーマ追従）に載るので、以前の固定 #fff は light 5 テーマで
   --card-bg の明るい地に白文字 = 1.00 だった。配色は既存の
   .pixel-art-showcase-toast と同じ組（--card-bg × --text-primary）に揃える。 */
.typing-share-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.typing-share-toast.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .typing-share-toast {
    transition: none;
  }
}