/* styles.css — 命の光（v4）
   正本: docs/v3-app-refinement-spec.md §2 §6 §6.5 + 末尾「v4 追補」（v4-1 / v4-3 / v4-4）

   デザインシステム（個別のpx指定をしないための約束）:
   - タイプスケールは5段階のみ（display / title / action / body / caption）。
     13.5px・12.5px・15px・17px などの中間値は使わない。line-height: normal を残さない。
   - スペーシングは4pxグリッド（--sp-1..--sp-12）。2/5/6/10pxのような端数は使わない。
   - 画面は3ゾーン（ヘッダー固定 / ステージが伸縮 / コントロールは下にまとまる）。
   - 文字を載せる coral は --coral-deep（白文字で約5.0:1）。面のcoralは --coral のまま。
   - 補助テキストは opacity ではなく --ink-muted（白に近い地で 5.7:1）で落とす。
   - v4-4: 主要な操作は「厚み」で触感を出す。塗り＋下辺の一段濃い縁（--edge-*）で、
     押すと translateY(--press) して縁が消える。色は原画パレットの範囲を出ない。 */

:root {
  /* ---- 色 ----
     ここの値は **既定テーマ「生命のひかり」のライト配色**であり、JSが動く前 /
     JSが失敗したときのフォールバック。実際の配色は src/themes.js が
     <style id="theme-vars"> をこのファイルの後ろに差し込んで上書きする（v5-1）。
     つまり「配色を変えたい」ときに触るのは themes.js であって、ここではない。 */
  --cream: #fdfdfc;        /* v4-1: ほぼ純白。ごく僅かな温かみだけ残す */
  --cream-pale: #ffffff;   /* シート/カードの面 */
  --wedge-empty: #ebe6dc;  /* 空きコマ: 地が白に寄ったぶん一段はっきり沈める（v4-1） */
  --wedge-glow: #f6efe2;   /* v5-3-3: 待機中にゆっくり巡る光が当たったコマ */
  --ink: #5a5148;
  --coral: #e4705a;        /* 面に使う（文字は載せない） */
  --coral-deep: #bc4c36;   /* --on-accent の文字を載せる */
  --coral-deeper: #a54029;
  --yellow: #efc75e;
  --sky: #92bfd6;
  --rest-ink: #3f6c82;     /* 「休けい」ラベルの文字 */
  --lilac: #b49bc9;
  --sage: #a8c487;
  --blush: #f2b8a0;
  --ink-muted: #6e655b;    /* 白に近い地で 5.7:1 */

  /* rgba() を組み立てるための成分（テーマごとに差し替わる）。
     個別に rgba(90,81,72,…) と直書きすると着せ替えから漏れるので必ずこれを使う。 */
  --ink-rgb: 90, 81, 72;
  --accent-rgb: 228, 112, 90;
  --accent-deep-rgb: 188, 76, 54;
  --accent-edge-rgb: 165, 64, 41;
  --sky-rgb: 146, 191, 214;
  --blush-rgb: 242, 184, 160;
  /* --coral-deep の上に載る文字色。ライトは白、ダークは暗い色になる */
  --on-accent: #ffffff;

  /* 影は「弱く広く」。地が白なので濃さではなく広がりで面を浮かせる（v4-1） */
  --shadow-soft: rgba(90, 81, 72, 0.10);
  --shadow-softer: rgba(90, 81, 72, 0.07);
  --panel-border: rgba(90, 81, 72, 0.20);
  --hairline: rgba(90, 81, 72, 0.14);
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --field-bg: #ffffff;     /* 入力欄・チップ・ゴーストボタンの面 */
  --backdrop: rgba(58, 50, 44, 0.12);
  --hover-tint: rgba(90, 81, 72, 0.06);

  /* ---- 厚み（v4-4「触って気持ちいいボタン」） ---- */
  --edge-primary: var(--coral-deeper);
  --edge-soft: rgba(90, 81, 72, 0.22);
  --press: 3px;
  --dur-press: 80ms;

  /* ---- タイプスケール（5段階） ---- */
  --font-round: ui-rounded, "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(44px, 14vw, 68px);
  --fs-title: 18px;
  --fs-action: 16px;
  --fs-body: 14px;
  --fs-caption: 12px;

  --lh-display: 1;
  --lh-title: 1.45;
  --lh-action: 1.4;
  --lh-body: 1.7;
  --lh-caption: 1.6;

  --ls-display: 0em;
  --ls-title: 0.01em;
  --ls-action: 0.02em;
  --ls-body: 0.02em;

  /* ---- スペーシング（4pxグリッド） ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* ---- 形・動き ---- */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --tap: 44px;
  --tap-lg: 56px;          /* v4-4: 主要ボタンは56px以上 */

  /* ケーキリングの内円（cake.js の R_INNER / viewBox と対で管理する。
     初期化時に ui.js が cake.js の RING_INNER_BOX_RATIO で上書きするので、
     ここの値は JS が動く前のフォールバック）。
     内接正方形の一辺 ÷ リング幅 = (R_INNER*2*cos45°)/viewBox = (60*2*0.7071)/200 */
  --ring-inner-box-ratio: 0.4243;
  --ring-inner-inset: calc((100% - 100% * var(--ring-inner-box-ratio)) / 2);
  /* 内円そのもの（直径 ÷ リング幅 = R_INNER*2/viewBox）。祝福バナーだけは
     「内接正方形」ではなく「穴いっぱい」を使う（1行に収めたいため） */
  --ring-inner-ratio: 0.3;
  --ring-inner-circle-inset: calc((100% - 200% * var(--ring-inner-ratio)) / 2);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 200ms;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-tap-highlight-color: transparent;
}

/* フォームコントロールはUAの font ショートハンドで line-height:normal に戻るため明示する */
button, input, select, textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: inherit;
}

p, h1, h2, h3, ol, ul, li {
  margin: 0;
  line-height: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.noscript-note {
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---- アイコン ---- */

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

/* ---- フォーカス（キーボード操作時のみ・§6） ---- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--coral-deep);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* パネル等コンテナへのプログラム的フォーカス（パネル切替時）は枠を描かない。
   実際に操作できる要素のフォーカスだけを見せる。 */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

.chip:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-outline:focus-visible,
.segmented-btn:focus-visible,
.mini-toggle:focus-visible,
.config-line:focus-visible,
.foot-btn:focus-visible,
.step-chip:focus-visible {
  outline-offset: 3px;
}

/* ============================================================
   3ゾーンレイアウト
   ============================================================ */

#app {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + var(--sp-2)) var(--sp-4) calc(var(--safe-bottom) + var(--sp-3));
  overflow: hidden;
}

/* 原画は「ケーキのコマの中」だけに登場させる。全面ブラーの背景レイヤーは廃止（案A）。 */

/* ---- ゾーン1: ヘッダー ---- */

#mode-header {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.app-title {
  font-family: var(--font-round);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-body);
  letter-spacing: 0.08em;
  color: var(--ink);
}

.segmented {
  display: inline-flex;
  background: rgba(var(--ink-rgb), 0.08);
  border-radius: var(--r-pill);
  padding: var(--sp-1);
  gap: var(--sp-1);
}

.segmented-btn {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-action);
  min-height: 36px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease, transform 120ms var(--ease-spring);
}

.segmented-btn:hover {
  background: var(--hover-tint);
  color: var(--ink);
}

.segmented-btn:active {
  transform: scale(0.96);
}

.segmented-btn[aria-selected="true"] {
  background: var(--coral-deep);
  color: var(--on-accent);
  box-shadow: 0 3px 10px rgba(var(--accent-deep-rgb), 0.28);
}

.segmented-btn[aria-selected="true"]:hover {
  background: var(--coral-deeper);
  color: var(--on-accent);
}

.segmented-btn:disabled,
.segmented-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.segmented-btn:disabled:hover,
.segmented-btn[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--ink-muted);
}

/* ---- 通知 ---- */

.top-notices {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

.notice-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  max-width: 100%;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-muted);
  background: rgba(var(--blush-rgb), 0.22);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
}

.notice-text {
  flex: 1 1 auto;
}

.notice-close {
  flex: 0 0 auto;
  width: var(--sp-6);
  height: var(--sp-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--dur) ease;
}

.notice-close:hover {
  background: rgba(var(--ink-rgb), 0.12);
}

/* ---- ゾーン2: ステージ（伸縮してリングを光学的中心に置く） ---- */

#stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-4);
}

/* v4-3: 中央の文字がカツカツにならないよう、リング自体を大きくする */
#cake-wrap {
  position: relative;
  width: min(86vw, 52vh, 400px);
  aspect-ratio: 1 / 1;
}

#cake-ring {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  transition: filter 320ms ease;
}

#cake-ring.is-paused {
  filter: saturate(0.55);
}

.cake-wedge {
  fill: var(--wedge-empty);
  stroke: var(--blush);
  stroke-width: 1.4;
}

.cake-wedge-rest {
  stroke: var(--sky);
}

.cake-wedge-complete {
  animation: cake-breathe 6s ease-in-out infinite;
}

@keyframes cake-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.96; }
}

.cake-active-fill {
  opacity: 0.98;
}

.cake-particle {
  opacity: 0.9;
  will-change: transform, opacity;
  animation: cake-particle-burst 1.2s ease-out forwards;
  animation-delay: var(--delay, 0s);
}

.cake-particle-coral { fill: var(--coral); }
.cake-particle-yellow { fill: var(--yellow); }
.cake-particle-sky { fill: var(--sky); }
.cake-particle-lilac { fill: var(--lilac); }
.cake-particle-sage { fill: var(--sage); }
.cake-particle-blush { fill: var(--blush); }

@keyframes cake-particle-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 0.95; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* v4-3: 固定18%をやめ、内円に内接する正方形にテキスト箱を収める。
   （テキスト箱の半幅 = r×0.7071 ちょうど。はみ出しの最終防波堤は ui.js の実測フィット） */
#stage-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  text-align: center;
  padding: var(--ring-inner-inset);
}

#stage-center.is-idle .time-primary {
  opacity: 0.55;
}

#stage-center.is-idle .time-secondary {
  opacity: 0;
}

.time-swap {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0 var(--sp-1);
  border-radius: var(--r-sm);
  transition: transform 120ms var(--ease-spring), background var(--dur) ease;
}

.time-swap:hover {
  background: var(--hover-tint);
}

.time-swap:active {
  transform: scale(0.98);
}

.time-swap:disabled {
  cursor: default;
  background: transparent;
}

/* --fit-scale は ui.js が「内円に内接する正方形」との実測比較で毎回決める（v4-3）。
   1:05:23 のような最長表記でも穴からはみ出さないことを実測で保証する。 */
.time-primary {
  display: block;
  font-family: var(--font-round);
  font-size: calc(var(--fs-display) * var(--fit-scale, 1));
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: opacity var(--dur) ease;
}

.time-primary.roll {
  animation: time-roll 120ms ease-out;
}

@keyframes time-roll {
  0% { transform: translateY(1.5px) scale(0.985); opacity: 0.72; }
  100% { transform: none; opacity: 1; }
}

/* 補助行も --fit-scale で実測フィットする（ui.js が決める）。
   円の中に入るのは短い固定長に近い情報だけだが、どんな文字列が来ても溢れないようにする。 */
.time-secondary {
  font-family: var(--font-round);
  font-size: calc(var(--fs-body) * var(--fit-scale, 1));
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  max-width: 100%;
  transition: opacity var(--dur) ease;
}

.lap-context {
  font-size: calc(var(--fs-caption) * var(--fit-scale, 1));
  line-height: var(--lh-caption);
  color: var(--ink-muted);
  max-width: 100%;
}

/* 中央の補足は「・」で1行に詰めない（内円の幅に収めるため・v4-3） */
.lap-context > span {
  display: block;
  white-space: nowrap;
}

/* v4-4: ごほうびの瞬間を大きく。ホール完成の短い祝福（600-900ms）。 */
.celebrate-banner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ring-inner-circle-inset);
  pointer-events: none;
  z-index: 2;
}

.celebrate-banner > span {
  display: inline-block;
  max-width: 100%;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--cream-pale);
  border: 1.5px solid var(--blush);
  box-shadow: 0 4px 0 rgba(var(--accent-rgb), 0.28), 0 8px 24px var(--shadow-soft);
  font-family: var(--font-round);
  font-size: var(--fs-action);
  font-weight: 800;
  line-height: var(--lh-action);
  color: var(--coral-deep);
  animation: celebrate-pop 620ms var(--ease-spring) both;
}

@keyframes celebrate-pop {
  0% { transform: scale(0.5); opacity: 0; }
  55% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 祝福が出ている間だけ中央の数字を沈める（数字と祝福が重ならないように） */
#stage-center.is-celebrating .time-primary,
#stage-center.is-celebrating .time-secondary,
#stage-center.is-celebrating .lap-context {
  opacity: 0.16;
}

/* リングの外の補助行（セッション全体の情報）。
   円の中に入れると内接正方形（幅は直径の70%）を簡単に超えるため、長い文はここに出す。 */
.stage-note {
  max-width: min(100%, 420px);
  padding: 0 var(--sp-2);
  text-align: center;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.stage-note:empty {
  display: none;
}

.round-holes {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.round-hole-icon {
  width: 18px;
  height: 18px;
}

.round-hole-base {
  fill: var(--coral);
  opacity: 0.9;
}

.round-hole-slice {
  stroke: var(--cream);
  stroke-width: 1.4;
}

.round-hole-more {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- ゾーン3: コントロール ---- */

#controls {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.home {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-4); /* v4-4: 詰まっていない印象に */
  animation: home-in 220ms var(--ease-sheet) both;
}

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

.config-line {
  width: 100%;
  min-height: var(--tap-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1.5px solid var(--panel-border);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-action);
  font-weight: 700;
  line-height: var(--lh-action);
  letter-spacing: var(--ls-action);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--edge-soft), 0 6px 18px var(--shadow-softer);
  transition: background var(--dur-press) ease, border-color var(--dur-press) ease,
    transform var(--dur-press) ease, box-shadow var(--dur-press) ease;
}

.config-line:hover {
  background: var(--surface-strong);
  border-color: rgba(var(--ink-rgb), 0.32);
}

.config-line:active {
  transform: translateY(var(--press));
  box-shadow: 0 0 0 var(--edge-soft), 0 2px 8px var(--shadow-softer);
}

.config-text {
  flex: 1 1 auto;
}

.config-edit {
  color: var(--coral-deep);
}

.config-meta {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-muted);
  text-align: center;
  min-height: 1.6em;
}

.running-controls {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
}

#home-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.foot-btn {
  min-height: var(--tap);
  flex: 0 0 auto;          /* 「今日の合計」に押されてラベルが縦積みにならないように */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease, transform 120ms var(--ease-spring);
}

.foot-btn:hover {
  background: var(--hover-tint);
  color: var(--ink);
}

.foot-btn:active {
  transform: scale(0.96);
}

/* v4-4「進捗が見えるよろこび」: 今日の合計を数字＋ケーキアイコンの列で表す */
.today-wrap {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--sp-6);
  min-width: 0;
}

/* アイコンの本数は ui.js が実測した空き幅から決める（狭い端末では0個＝数字だけ） */
.today-cakes {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: nowrap;
  overflow: hidden;
}

.today-cakes:empty {
  display: none;
}

.today-cakes .round-hole-icon {
  width: 12px;
  height: 12px;
}

.today-total {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 今日の合計が伸びた瞬間だけ、数字が一瞬ポップする（v4-4） */
.today-total.pop {
  animation: today-pop 420ms var(--ease-spring);
}

@keyframes today-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); color: var(--coral-deep); }
  100% { transform: scale(1); }
}

/* ============================================================
   共通パーツ
   ============================================================ */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  width: 100%;
}

.chip {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-action);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 0 var(--edge-soft);
  transition: background var(--dur-press) ease, color var(--dur-press) ease,
    border-color var(--dur-press) ease, transform var(--dur-press) ease,
    box-shadow var(--dur-press) ease;
}

.chip:hover {
  background: var(--surface-strong);
  border-color: rgba(var(--ink-rgb), 0.34);
}

.chip:active {
  transform: translateY(2px);
  box-shadow: none;
}

.chip[aria-pressed="true"],
.chip.selected {
  background: var(--coral-deep);
  border-color: var(--coral-deep);
  color: var(--on-accent);
  box-shadow: 0 3px 0 var(--edge-primary);
}

.chip[aria-pressed="true"]:active,
.chip.selected:active {
  box-shadow: 0 1px 0 var(--edge-primary);
}

.chip[aria-pressed="true"]:hover,
.chip.selected:hover {
  background: var(--coral-deeper);
  border-color: var(--coral-deeper);
}

.chip:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
}

.chip:disabled:hover {
  background: var(--field-bg);
  border-color: var(--panel-border);
}

.chip-with-menu {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--r-pill);
}

.chip-with-menu .chip {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}

.chip-menu-btn {
  min-height: var(--tap);
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sp-2);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  border: 1.5px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease;
}

.chip-menu-btn:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

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

/* v4-4: 厚みのあるボタン。下辺に一段濃い縁（4px）、押すと縁が消えて沈む。 */
.btn-primary {
  min-height: var(--tap-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-8);
  border-radius: var(--r-pill);
  border: none;
  background: var(--coral-deep);
  color: var(--on-accent);
  font-family: var(--font-round);
  font-size: var(--fs-action);
  font-weight: 800;
  line-height: var(--lh-action);
  letter-spacing: var(--ls-action);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge-primary), 0 6px 18px rgba(var(--accent-deep-rgb), 0.22);
  transition: background var(--dur-press) ease, transform var(--dur-press) ease,
    box-shadow var(--dur-press) ease;
}

.btn-primary:hover {
  background: var(--coral-deeper);
  box-shadow: 0 4px 0 var(--edge-primary), 0 8px 22px rgba(var(--accent-deep-rgb), 0.26);
}

.btn-primary:active {
  transform: translateY(var(--press));
  box-shadow: 0 1px 0 var(--edge-primary), 0 2px 8px rgba(var(--accent-deep-rgb), 0.18);
}

.btn-primary:disabled {
  background: rgba(var(--ink-rgb), 0.24);
  box-shadow: 0 4px 0 rgba(var(--ink-rgb), 0.16);
  cursor: not-allowed;
}

.btn-primary:disabled:active {
  transform: none;
}

.btn-ghost {
  min-height: var(--tap-lg);
  min-width: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--ink);
  font-size: var(--fs-action);
  font-weight: 700;
  line-height: var(--lh-action);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge-soft);
  transition: background var(--dur-press) ease, border-color var(--dur-press) ease,
    transform var(--dur-press) ease, box-shadow var(--dur-press) ease;
}

.btn-ghost:hover {
  background: var(--surface-strong);
  border-color: rgba(var(--ink-rgb), 0.34);
}

.btn-ghost:active {
  transform: translateY(var(--press));
  box-shadow: 0 1px 0 var(--edge-soft);
}

/* v7-1追記: 実行中の音トグル。アイコンだけの正方形にして、
   「一時停止 / おわる」より前に出ないようにする。 */
.btn-icon-only {
  flex: 0 0 auto;
  width: var(--tap-lg);
  min-width: var(--tap-lg);
  padding: var(--sp-2);
  gap: 0;
}

.btn-outline {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  border: 1.5px dashed var(--panel-border);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-action);
  cursor: pointer;
  transition: background var(--dur) ease, border-color var(--dur) ease, transform 120ms var(--ease-spring);
}

.btn-outline:hover {
  background: var(--hover-tint);
  border-color: rgba(var(--ink-rgb), 0.34);
}

.btn-outline:active {
  transform: scale(0.97);
}

.btn-outline-sm {
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  border-style: solid;
}

.btn-text {
  min-height: 40px;
  padding: var(--sp-2);
  border: none;
  background: transparent;
  color: var(--coral-deep);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-action);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--dur) ease;
}

.btn-text:hover {
  background: var(--hover-tint);
}

.danger {
  color: var(--coral-deeper);
}

.btn-outline.danger {
  border-style: solid;
  border-color: rgba(var(--accent-edge-rgb), 0.45);
}

.mini-toggle {
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  border: 1.5px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-action);
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease, border-color var(--dur) ease;
}

.mini-toggle:hover {
  background: var(--surface-strong);
}

.mini-toggle[aria-pressed="true"] {
  background: var(--coral-deep);
  border-color: var(--coral-deep);
  color: var(--on-accent);
}

/* ============================================================
   ボトムシート / ダイアログ
   ============================================================ */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet-center {
  align-items: center;
  padding: var(--sp-4);
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: backdrop-in 200ms ease both;
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sheet-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: min(86vh, 720px);
  display: flex;
  flex-direction: column;
  background: var(--cream-pale);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: 0 -6px 32px var(--shadow-soft);
  border: 1px solid var(--hairline);
  border-bottom: none;
  padding: var(--sp-1) 0 calc(var(--safe-bottom) + var(--sp-2));
  animation: sheet-in 240ms var(--ease-sheet) both;
}

@keyframes sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sheet.is-closing .sheet-panel {
  animation: sheet-out 180ms var(--ease-sheet) both;
}

.sheet.is-closing .sheet-backdrop,
.sheet.is-closing .dialog-card {
  animation: backdrop-out 180ms ease both;
}

@keyframes sheet-out {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

@keyframes backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.sheet-grip {
  width: 40px;
  height: var(--sp-1);
  border-radius: var(--r-pill);
  background: rgba(var(--ink-rgb), 0.22);
  margin: var(--sp-1) auto 0;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
}

.sheet-title {
  flex: 1 1 auto;
  font-family: var(--font-round);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-align: center;
}

.sheet-head > .sheet-title:first-child {
  margin-left: var(--tap);
}

.sheet-close,
.sheet-back {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur) ease, color var(--dur) ease;
}

.sheet-close:hover,
.sheet-back:hover {
  background: var(--hover-tint);
  color: var(--ink);
}

.sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-1) var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.sheet-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-1);
  border-top: 1px solid var(--panel-border);
}

.sheet-foot .btn-primary {
  flex: 1 1 auto;
}

.builder-foot {
  flex-wrap: wrap;
}

.builder-edit-actions {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
}

.sheet-label {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: var(--lh-caption);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

.sheet-body > .sheet-label:first-child {
  margin-top: 0;
}

.sheet-hint {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-muted);
}

.sheet-error {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: var(--lh-caption);
  color: var(--coral-deeper);
}

.inline-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

.inline-field input[type="number"],
.inline-field input[type="text"],
.inline-field input[type="time"],
.inline-field select {
  min-height: var(--tap);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--ink);
  font-size: var(--fs-action);
  line-height: var(--lh-action);
  padding: var(--sp-2) var(--sp-3);
}

.inline-field input[type="number"] {
  width: 76px;
  text-align: center;
}

.field-name {
  margin-top: var(--sp-1);
}

.field-name input[type="text"] {
  flex: 1 1 140px;
  min-width: 0;
}

/* ---- パターンビルダー ---- */

.builder-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-height: 56px;
  padding: var(--sp-1);
  border-radius: var(--r-md);
  background: rgba(var(--ink-rgb), 0.03);
  border: 1.5px dashed var(--panel-border);
}

.builder-steps.is-empty::before {
  content: "したの「よく使う長さ」をタップして追加";
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-muted);
  padding: 0 var(--sp-2);
}

.step-chip {
  min-height: var(--tap);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-action);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  transition: border-color var(--dur) ease, transform 120ms var(--ease-spring), box-shadow var(--dur) ease;
}

.step-chip:hover {
  border-color: rgba(var(--ink-rgb), 0.34);
}

.step-chip:active {
  transform: scale(0.96);
}

.step-chip[aria-pressed="true"] {
  border-color: var(--coral-deep);
  box-shadow: 0 0 0 2px rgba(var(--accent-deep-rgb), 0.18);
}

.step-chip .step-kind-label {
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: var(--lh-caption);
  color: var(--ink-muted);
}

.step-chip.is-rest {
  border-color: var(--sky);
  background: rgba(var(--sky-rgb), 0.16);
}

.step-chip.is-rest .step-kind-label {
  color: var(--rest-ink);
}

.step-add {
  min-height: var(--tap);
  min-width: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1.5px dashed var(--panel-border);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) ease, transform 120ms var(--ease-spring);
}

.step-add:hover {
  background: var(--hover-tint);
}

.step-add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.builder-phrase {
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: var(--lh-body);
  color: var(--ink);
}

.builder-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: rgba(var(--ink-rgb), 0.03);
}

.picker-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.step-kind {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

.picker-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

/* ---- ダイアログ ---- */

.dialog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  background: var(--cream-pale);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: 0 6px 32px var(--shadow-soft);
  text-align: center;
  max-width: 340px;
  width: 100%;
  animation: dialog-in 220ms var(--ease-sheet) both;
}

.dialog-card-sm {
  max-width: 320px;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.dialog-title {
  font-family: var(--font-round);
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}

.dialog-line {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

.dialog-line-sub {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-muted);
}

.dialog-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-2);
}

.summary-cake-wrap {
  width: 110px;
  aspect-ratio: 1 / 1;
}

.summary-cake-wrap svg {
  width: 100%;
  height: 100%;
}

.onboarding-list {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  text-align: left;
}

.onboarding-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.onboarding-num {
  flex: 0 0 auto;
  width: var(--sp-6);
  height: var(--sp-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--accent-deep-rgb), 0.12);
  color: var(--coral-deep);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
}

/* ============================================================
   設定画面（v5-2）
   ============================================================ */

/* セクションで区切る。設定画面はホームと違い縦に伸びてよい（v5-2）。 */
.settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--hairline);
}

.settings-section:first-of-type {
  padding-top: var(--sp-1);
  border-top: none;
}

.settings-heading {
  font-family: var(--font-round);
  font-size: var(--fs-action);
  font-weight: 800;
  line-height: var(--lh-action);
  letter-spacing: var(--ls-action);
  color: var(--ink);
}

.settings-section .sheet-label:first-of-type {
  margin-top: 0;
}

/* 「絵をえらぶ」: 2列グリッド。作品が増えても縦に伸びるだけで破綻しない（v6-4）。 */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-md);
  border: 1.5px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--dur-press) ease, transform var(--dur-press) ease,
    box-shadow var(--dur-press) ease;
  box-shadow: 0 2px 0 var(--edge-soft);
}

.theme-card:hover {
  border-color: rgba(var(--ink-rgb), 0.34);
}

.theme-card:active {
  transform: translateY(2px);
  box-shadow: none;
}

/* サムネイルは縦横比を固定して確保する。読込中でもレイアウトが動かない（v5-1 実装上の注意）。 */
.theme-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--wedge-empty);
}

.theme-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 240ms ease;
}

.theme-thumb img.is-loaded {
  opacity: 1;
}

.theme-name {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-action);
  /* 作品名は長いものがある（「風の流れに身を任せて」）。2行までで省略する */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.theme-card[aria-pressed="true"] {
  border-color: var(--coral-deep);
  box-shadow: 0 0 0 2px rgba(var(--accent-deep-rgb), 0.22), 0 2px 0 var(--edge-soft);
}

.theme-card[aria-pressed="true"] .theme-name {
  color: var(--coral-deep);
}

.theme-check {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--coral-deep);
  color: var(--on-accent);
  box-shadow: 0 2px 6px var(--shadow-soft);
}

.theme-card[aria-pressed="true"] .theme-check {
  display: inline-flex;
}

.theme-check .icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.settings-version {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.settings-update {
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: var(--lh-caption);
  color: var(--coral-deep);
}

/* ---- v7-3 タイムゾーン選択 ----
   `Intl.supportedValuesOf('timeZone')` は数百件あるので単純なリストにはしない。
   検索入力で絞り込み、結果は高さを固定した枠の中だけをスクロールさせる
   （シート全体が伸びて他の設定が遠くなるのを防ぐ）。 */
.tz-picker {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tz-search {
  width: 100%;
  min-height: var(--tap);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--panel-border);
  background: var(--field-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-action);
  line-height: var(--lh-action);
  padding: var(--sp-2) var(--sp-3);
}

.tz-search::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.tz-list {
  max-height: 208px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--hairline);
  background: var(--surface);
}

.tz-option {
  flex: 0 0 auto;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-action);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-press) ease, color var(--dur-press) ease;
}

.tz-option:hover {
  background: var(--hover-tint);
}

.tz-option[aria-selected="true"] {
  background: var(--coral-deep);
  color: var(--on-accent);
  font-weight: 700;
}

.tz-option-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tz-option-zone {
  flex: 0 0 auto;
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}

.tz-option[aria-selected="true"] .tz-option-zone {
  color: var(--on-accent);
}

.tz-empty {
  padding: var(--sp-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--ink-muted);
}

.tz-now {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   v5-3 アニメーション拡充
   ============================================================ */

/* v5-3-2 テーマ切替: 色を「パチンと」切り替えず240msで移す。
   カスタムプロパティ自体は補間できないので、切替の瞬間だけ全要素に
   色系プロパティのトランジションを付ける（付けっぱなしにはしない）。
   粒子（<circle>）だけは除く: 使い回しのプールなので色の補間がかかると前の色を引きずる。
   :not(circle) の単純セレクタに留めているのは、複雑セレクタ入りの :not() を
   解釈できないブラウザだとセレクタリストごと無効化されてしまうため。 */
.theme-xfade,
.theme-xfade *:not(circle) {
  transition:
    background-color 240ms ease,
    border-color 240ms ease,
    color 240ms ease,
    fill 240ms ease,
    stroke 240ms ease,
    box-shadow 240ms ease,
    outline-color 240ms ease !important;
}

/* v5-3-2 の後半「リングが一度だけ静かに脈打つ」 */
#cake-wrap.theme-pulse {
  animation: theme-pulse 520ms ease-in-out;
}

@keyframes theme-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.022); }
  100% { transform: scale(1); }
}

/* v5-3-3 待機中のリング: 30秒で1周、1コマずつ淡く光が巡る。
   rAFを使わずCSSだけで回すので、待機中に描画ループを起こさない（性能ガード）。
   --wedge-index / --wedge-count は cake.js が各コマに書き込む。 */
#cake-ring.is-idle-shimmer .cake-wedge {
  animation: wedge-idle-glow 30s linear infinite;
  animation-delay: calc(-30s * var(--wedge-index, 0) / var(--wedge-count, 10));
}

@keyframes wedge-idle-glow {
  0%, 8%, 100% { fill: var(--wedge-empty); }
  3% { fill: var(--wedge-glow); }
}

/* v5-3-1 画面遷移: ホーム→実行中でリングが僅かに拡大しながら中央へ寄る（220ms）。
   戻りは逆再生。transformのみなのでレイアウトを揺らさない。 */
#cake-wrap.enter-running {
  animation: ring-enter-running 220ms var(--ease-sheet) both;
}

#cake-wrap.leave-running {
  animation: ring-leave-running 220ms var(--ease-sheet) both;
}

@keyframes ring-enter-running {
  from { transform: scale(0.965) translateY(6px); }
  to { transform: none; }
}

@keyframes ring-leave-running {
  from { transform: none; }
  to { transform: scale(0.965) translateY(6px); }
}

/* v5-3-1 パネルの出入り: フェードに加えて下から8px、40msずつずらす（最大5要素）。
   .home 自体の home-in は残し、その中身にスタッガを重ねる。 */
.home.stagger-in > * {
  animation: panel-item-in 260ms var(--ease-sheet) both;
}

.home.stagger-in > *:nth-child(1) { animation-delay: 0ms; }
.home.stagger-in > *:nth-child(2) { animation-delay: 40ms; }
.home.stagger-in > *:nth-child(3) { animation-delay: 80ms; }
.home.stagger-in > *:nth-child(4) { animation-delay: 120ms; }
.home.stagger-in > *:nth-child(5) { animation-delay: 160ms; }
.home.stagger-in > *:nth-child(n + 6) { animation-delay: 160ms; }

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

/* v5-3-4 数字: 秒の変わり目は微小、分の変わり目はもう少しはっきり。 */
.time-primary.roll-major {
  animation: time-roll-major 260ms var(--ease-spring);
}

@keyframes time-roll-major {
  0% { transform: translateY(5px) scale(0.955); opacity: 0.45; }
  60% { transform: translateY(-1px) scale(1.012); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* v5-3-5 主要ボタンの「触れられるのを待っている」呼吸。
   4秒周期・最大 scale 1.008。押下時と実行中は止める（うるさくしない）。 */
.btn-primary {
  animation: btn-breathe 4s ease-in-out infinite;
}

.btn-primary:active,
.btn-primary:disabled,
.btn-primary:focus-visible {
  animation: none;
}

@keyframes btn-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.008); }
}

/* v5-3-6 祝福の階層: セッション完了は明確に別格（大きめ・1.2秒）。 */
.celebrate-banner.is-major > span {
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-title);
  border-width: 2px;
  animation: celebrate-pop-major 820ms var(--ease-spring) both;
}

@keyframes celebrate-pop-major {
  0% { transform: scale(0.4) rotate(-3deg); opacity: 0; }
  45% { transform: scale(1.14) rotate(1.5deg); opacity: 1; }
  70% { transform: scale(0.98) rotate(0deg); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   画面サイズ / 配色 / モーション
   ============================================================ */

/* 375×667クラス: リング外の補助行ぶんの高さを確保するため少しだけ控える
   （それでもv3の277pxより大きい） */
@media (max-height: 700px) {
  #cake-wrap { width: min(80vw, 46vh, 360px); }
}

/* 低身長端末（375×667未満など）: v4-3の拡大率に比例させて縮める */
@media (max-height: 620px) {
  #cake-wrap { width: min(70vw, 45vh, 300px); }
  #controls { gap: var(--sp-3); }
  .home { gap: var(--sp-3); }
  .config-line { min-height: var(--tap); }
  .btn-primary { min-height: 48px; }
  .btn-ghost { min-height: var(--tap); }
}

@media (orientation: landscape) and (max-height: 480px) {
  #app { padding-top: calc(var(--safe-top) + var(--sp-1)); }
  #cake-wrap { width: min(40vh, 240px); }
  #stage { padding: 0; gap: var(--sp-2); }
}

/* ダーク配色も「既定テーマのフォールバック」でしかない。
   実際の値は themes.js が同名の @media ブロックを後ろに差し込んで上書きする。
   スキーム固有の *構造* だけをここに残し、色の対応表は themes.js に一本化してある。 */
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1d1c1b;
    --cream-pale: #262525;
    --wedge-empty: #2c2a28;
    --wedge-glow: #3a3733;
    --ink: #ecebe8;
    --ink-muted: #b6b1a9;
    --ink-rgb: 236, 235, 232;
    --coral-deep: #e8836c;
    --coral-deeper: #f0937d;
    --accent-deep-rgb: 232, 131, 108;
    --accent-edge-rgb: 240, 147, 125;
    --on-accent: #2a1a15;
    --sky: #7fa9be;
    --sky-rgb: 127, 169, 190;
    --rest-ink: #a8cbdd;
    --blush: #c98a72;
    --blush-rgb: 201, 138, 114;
    --yellow: #c9a44e;
    --lilac: #9a85ad;
    --sage: #8da671;
    --panel-border: rgba(236, 235, 232, 0.22);
    --hairline: rgba(236, 235, 232, 0.12);
    --surface: rgba(255, 255, 255, 0.07);
    --surface-strong: rgba(255, 255, 255, 0.12);
    --field-bg: rgba(255, 255, 255, 0.07);
    --backdrop: rgba(0, 0, 0, 0.4);
    --hover-tint: rgba(255, 255, 255, 0.09);
    --shadow-soft: rgba(0, 0, 0, 0.4);
    --shadow-softer: rgba(0, 0, 0, 0.3);
    /* 暗い地では「一段濃い縁」は黒側に置く（coral-deeperは明るくなるため使えない） */
    --edge-primary: rgba(0, 0, 0, 0.42);
    --edge-soft: rgba(0, 0, 0, 0.45);
  }

  .segmented { background: rgba(255, 255, 255, 0.08); }
  .step-chip { background: rgba(255, 255, 255, 0.1); }
  .onboarding-num { background: rgba(var(--accent-deep-rgb), 0.18); }
  .time-swap:hover { background: rgba(255, 255, 255, 0.08); }
  .theme-card { background: rgba(255, 255, 255, 0.05); }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .cake-wedge-complete { animation: none; }
  .cake-particle { animation: none; opacity: 0; }
  /* v4-4: 祝福・ポップは「動きを止めて静的に出す」（表示自体は残す） */
  .celebrate-banner > span { animation: none; }
  .today-total.pop { animation: none; }
  /* v5-3: 追加した常時モーションは全停止（静的表示は残す） */
  .cake-wedge { animation: none !important; }
  .btn-primary { animation: none !important; }
  #cake-wrap { animation: none !important; }
  .home > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}