/* 動一下｜私人教練
 *
 * 視覺方向：軟圓角、白卡片浮在暖米白上、明亮但不刺眼的糖果色、圓潤的大數字。
 * 介面負責讓人想打開，她說的話負責兇。這個反差是刻意的。
 *
 * 例外：劇情播放器維持暗場。那是獎勵，要跟日常畫面有儀式感的區隔。
 */

:root {
  color-scheme: light;

  /* 底 */
  --paper: #FDF6EC;
  --paper-2: #F6EDE1;
  --card: #FFFFFF;

  /* 字 */
  --ink: #33403C;
  --ink-2: #7C8A85;
  --ink-3: #ABB5B1;

  /* 糖果色 */
  --sun: #FFB03B;
  --sun-soft: #FFEBCE;
  --coral: #FF8A80;
  --coral-soft: #FFE2DF;
  --mint: #3FC3B6;
  --mint-soft: #D6F4F0;
  --sky: #5FB3DE;
  --sky-soft: #DAEEF9;
  --grape: #A98CE0;
  --grape-soft: #EBE2FA;
  --leaf: #5FC46E;
  --danger: #F0685E;

  /* 形狀 */
  --r-xl: 32px;
  --r-lg: 24px;
  --r: 18px;
  --r-sm: 13px;

  --shadow-sm: 0 3px 10px rgba(51, 64, 60, .05);
  --shadow: 0 8px 22px rgba(51, 64, 60, .07);
  --shadow-lg: 0 16px 38px rgba(51, 64, 60, .11);

  --ease: cubic-bezier(0.34, 1.36, 0.44, 1);

  font-family: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
}

/* 深色不是把亮版反過來，是換一組暖的暗色，可愛感要留著 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #26232B;
  --paper-2: #2F2B35;
  --card: #363140;
  --ink: #F2ECE4;
  --ink-2: #B3AAB8;
  --ink-3: #837A8A;
  --sun-soft: #4A3B28;
  --coral-soft: #4A302E;
  --mint-soft: #23403E;
  --sky-soft: #263C48;
  --grape-soft: #362D4A;
  --shadow-sm: 0 3px 10px rgba(0, 0, 0, .22);
  --shadow: 0 8px 22px rgba(0, 0, 0, .30);
  --shadow-lg: 0 16px 38px rgba(0, 0, 0, .42);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #26232B;
    --paper-2: #2F2B35;
    --card: #363140;
    --ink: #F2ECE4;
    --ink-2: #B3AAB8;
    --ink-3: #837A8A;
    --sun-soft: #4A3B28;
    --coral-soft: #4A302E;
    --mint-soft: #23403E;
    --sky-soft: #263C48;
    --grape-soft: #362D4A;
    --shadow-sm: 0 3px 10px rgba(0, 0, 0, .22);
    --shadow: 0 8px 22px rgba(0, 0, 0, .30);
    --shadow-lg: 0 16px 38px rgba(0, 0, 0, .42);
  }
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
}

.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;
}

.app-shell {
  width: min(100%, 760px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 18px calc(104px + env(safe-area-inset-bottom));
}

/* ---------- 頂部 ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 4px 18px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--ink-2);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 900; text-wrap: balance; letter-spacing: -.01em; }

h1 { margin-bottom: 0; font-size: clamp(1.75rem, 7vw, 2.3rem); line-height: 1.1; }
h2 { font-size: clamp(1.4rem, 5.6vw, 1.9rem); line-height: 1.3; }
h3 { font-size: 1.2rem; }

.install-button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--sun);
  color: #fff;
  font-size: .84rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.install-button:active { transform: scale(.96); }

.screen { display: none; }
.screen.is-active { display: block; animation: screen-in .45s var(--ease) both; }

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

/* ---------- 教練卡 ---------- */

.coach-stage {
  position: relative;
  isolation: isolate;
  min-height: 330px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--sun-soft);
  box-shadow: var(--shadow-lg);
}

.sun-disc {
  position: absolute;
  z-index: 0;
  top: -70px;
  right: -50px;
  width: 230px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  opacity: .5;
}

.coach-portrait {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 70%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 24%;
  mask-image: linear-gradient(90deg, #000 74%, transparent 100%);
  animation: coach-arrive .8s var(--ease) both, breathe 5.5s ease-in-out 1s infinite;
}

@keyframes coach-arrive {
  from { opacity: 0; transform: translateX(-16px) scale(1.03); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.014); }
}

.coach-copy {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 16px;
  width: 51%;
  padding: 17px 16px;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow);
}

.coach-mode {
  display: inline-block;
  margin-bottom: 9px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--coral-soft);
  color: var(--coral);
  font-size: .68rem;
  font-weight: 800;
}

.coach-line {
  margin-bottom: 12px;
  font-size: clamp(.9rem, 3.6vw, 1rem);
  font-weight: 700;
  line-height: 1.65;
}

.voice-button[hidden] { display: none; }
.voice-button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--mint-soft);
  color: var(--mint);
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.voice-button:active { transform: scale(.95); }

/* ---------- 三個狀態小卡 ---------- */

.status-ribbon {
  display: grid;
  grid-template-columns: .8fr 1.5fr 1fr;
  gap: 9px;
  margin: 14px 0 0;
}

.status-ribbon div {
  min-width: 0;
  padding: 14px 10px 15px;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.status-ribbon span, .status-ribbon strong { display: block; }
.status-ribbon span { color: var(--ink-2); font-size: .68rem; font-weight: 700; }
.status-ribbon strong {
  margin-top: 4px;
  font-size: .86rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.status-ribbon div:first-child strong { font-family: Nunito, sans-serif; font-size: 1.5rem; color: var(--sun); line-height: 1.1; }
.status-ribbon div:nth-child(2) strong { color: var(--coral); }
.status-ribbon div:last-child strong { font-family: Nunito, sans-serif; font-size: 1.12rem; color: var(--mint); }

/* ---------- 線索卡 ---------- */

.mystery-lure {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 80px;
  margin: 12px 0 26px;
  padding: 15px 18px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--grape-soft);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease);
}
.mystery-lure:active { transform: scale(.985); }

.mystery-lock {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grape);
  color: #fff;
  font-size: 1.4rem;
}

.mystery-lure > span:last-child { flex: 1; min-width: 0; }
.mystery-lure small, .mystery-lure strong { display: block; }
.mystery-lure small { color: var(--ink-2); font-size: .7rem; font-weight: 700; }
.mystery-lure strong { margin-top: 3px; font-size: .95rem; font-weight: 800; line-height: 1.45; }

.lure-meter, .bond-meter {
  display: block;
  height: 6px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
}
.lure-meter i, .bond-meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--grape);
  transition: width .7s var(--ease);
}

/* ---------- 標題列 ---------- */

.choice-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 4px;
}
.choice-heading h2, .choice-heading h3 { margin-bottom: 0; }
.choice-heading > p {
  margin-bottom: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--coral-soft);
  color: var(--coral);
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}

/* ---------- 方案卡 ---------- */

.workout-choices { display: grid; gap: 12px; margin-top: 16px; }

.workout-card {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 96px;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--r-lg);
  color: var(--ink);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: left;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease);
}
.workout-card:active { transform: scale(.975); box-shadow: var(--shadow-sm); }

.workout-card .workout-letter {
  display: grid;
  place-items: center;
  width: 54px;
  aspect-ratio: 1;
  border-radius: var(--r);
  background: var(--choice-color);
  color: #fff;
  font-family: Nunito, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
}
.workout-card small, .workout-card strong { display: block; }
.workout-card small { color: var(--ink-2); font-size: .72rem; font-weight: 700; }
.workout-card strong { margin: 3px 0; font-size: 1.12rem; font-weight: 900; }
.workout-card > span > span { display: block; color: var(--ink-2); font-size: .78rem; }
.workout-card .workout-arrow { color: var(--choice-color); font-size: 1.7rem; font-weight: 700; }

/* ---------- 安全提醒 ---------- */

.safety-note {
  display: grid;
  gap: 5px;
  margin: 26px 0 8px;
  padding: 17px 19px;
  border-radius: var(--r-lg);
  background: var(--sun-soft);
  color: var(--ink-2);
  font-size: .8rem;
  line-height: 1.65;
}
.safety-note strong { color: var(--ink); font-weight: 800; }

/* ---------- 段落開頭 ---------- */

.section-intro { padding: 20px 4px 14px; }
.section-intro h2 { max-width: 17ch; margin-bottom: 12px; }
.section-intro > p:last-child { max-width: 36rem; color: var(--ink-2); line-height: 1.8; font-size: .92rem; }

/* ---------- 默契頁的教練圖 ---------- */

.bond-portrait {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--mint-soft);
  box-shadow: var(--shadow);
}
.action-sprite {
  aspect-ratio: 1;
  background-image: var(--action-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity .25s var(--ease);
}
.action-wave { --action-image: url("/public/assets/coach-wave.webp"); }
.action-strict { --action-image: url("/public/assets/coach-strict.webp"); }
.action-highfive { --action-image: url("/public/assets/coach-highfive.webp"); }
.action-dance { --action-image: url("/public/assets/coach-dance.webp"); }
.action-tease { --action-image: url("/public/assets/coach-tease.webp"); }
.action-concern { --action-image: url("/public/assets/coach-concern.webp"); }

.bond-caption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 14px 17px;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow);
}
.bond-caption small, .bond-caption strong { display: block; }
.bond-caption small { color: var(--ink-2); font-size: .68rem; font-weight: 700; }
.bond-caption strong { margin-top: 2px; font-size: 1rem; font-weight: 900; color: var(--coral); }
.bond-meter { width: 112px; background: var(--paper-2); }
.bond-meter i { background: var(--coral); }

/* ---------- 語氣選擇 ---------- */

.mode-picker { margin-top: 26px; }
.mode-picker > p:first-child { font-weight: 800; margin-bottom: 10px; }
.mode-picker > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.mode-picker button {
  min-height: 50px;
  border: 0;
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink-2);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease);
}
.mode-picker button:active { transform: scale(.96); }
.mode-picker button.is-selected { background: var(--mint); color: #fff; box-shadow: var(--shadow); }
.mode-help {
  min-height: 46px;
  margin-top: 14px;
  padding: 13px 16px;
  border-radius: var(--r);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: .82rem;
  line-height: 1.6;
}

/* ---------- 故事列表 ---------- */

.locked-scenes { margin-top: 34px; }
.scene-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 68%;
  gap: 12px;
  margin: 16px -18px 0;
  padding: 4px 18px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.scene-strip::-webkit-scrollbar { display: none; }

.scene-card {
  display: flex;
  flex-direction: column;
  min-height: 158px;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .18s var(--ease);
}
.scene-card:active { transform: scale(.975); }
.scene-card.is-locked { background: var(--paper-2); box-shadow: none; cursor: default; }
.scene-card span { display: block; font-size: 1.5rem; color: var(--sun); }
.scene-card.is-locked span { color: var(--ink-3); }
.scene-card strong { display: block; margin-top: auto; font-size: .95rem; font-weight: 800; line-height: 1.45; }
.scene-card small { display: block; margin-top: 5px; color: var(--ink-2); font-size: .75rem; }

/* ---------- 身體狀況 ---------- */

.body-profile {
  margin: 32px 0 8px;
  padding: 6px 18px 10px;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.body-profile .check-row {
  padding: 2px 0;
  border-bottom: 1px solid var(--paper-2);
  font-size: .9rem;
}
.body-profile .check-row:last-child { border-bottom: 0; }

/* ---------- 紀錄頁 ---------- */

.record-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0 22px;
}
.record-summary div {
  padding: 20px 8px;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.record-summary strong, .record-summary span { display: block; }
.record-summary strong {
  font-family: Nunito, sans-serif;
  font-size: 1.85rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.record-summary div:nth-child(1) strong { color: var(--sky); }
.record-summary div:nth-child(2) strong { color: var(--leaf); }
.record-summary div:nth-child(3) strong { color: var(--sun); }
.record-summary span { margin-top: 4px; color: var(--ink-2); font-size: .7rem; font-weight: 700; }

.backup-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.backup-row .secondary-action {
  min-height: 50px;
  border: 0;
  border-radius: var(--r);
  background: var(--card);
  color: var(--mint);
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.backup-note {
  margin: 0 4px 26px;
  color: var(--ink-2);
  font-size: .78rem;
  line-height: 1.65;
  transition: color .3s var(--ease);
}
.backup-note.is-flash { color: var(--leaf); font-weight: 800; }

.history-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.history-list li {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px;
  align-items: center;
  min-height: 78px;
  padding: 14px 18px;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .16s var(--ease);
}
.history-list li:active { transform: scale(.985); }
.history-date {
  font-family: Nunito, sans-serif;
  color: var(--sky);
  font-size: .82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.history-list strong, .history-list span { display: block; }
.history-list li > strong:last-child {
  font-family: Nunito, sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
}
.history-list span { color: var(--ink-2); font-size: .76rem; }
.history-list li > span:nth-child(2) > strong { font-size: .95rem; font-weight: 800; margin-bottom: 2px; color: var(--ink); }

.empty-record {
  display: block !important;
  padding: 34px 22px !important;
  color: var(--ink-2);
  line-height: 1.8;
  font-size: .88rem;
  cursor: default !important;
  background: var(--paper-2) !important;
  box-shadow: none !important;
}

/* ---------- 底部導覽 ---------- */

.bottom-nav {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: min(calc(100% - 26px), 460px);
  padding: 8px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}
.bottom-nav button {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 54px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink-3);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .24s var(--ease), color .24s var(--ease);
}
.bottom-nav button span { font-size: 1.15rem; }
.bottom-nav button.is-active { background: var(--sun-soft); color: var(--sun); }
.bottom-nav button:nth-child(2).is-active { background: var(--coral-soft); color: var(--coral); }
.bottom-nav button:nth-child(3).is-active { background: var(--mint-soft); color: var(--mint); }

/* ---------- 進行中計時列 ---------- */

.running-bar[hidden] { display: none; }

.running-bar {
  position: fixed;
  z-index: 25;
  left: 50%;
  bottom: calc(90px + max(12px, env(safe-area-inset-bottom)));
  display: flex;
  align-items: center;
  gap: 11px;
  width: min(calc(100% - 26px), 460px);
  min-height: 58px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-lg);
  color: #fff;
  background: var(--mint);
  box-shadow: var(--shadow-lg);
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
  transform: translateX(-50%);
  animation: bar-in .36s var(--ease) both;
}
@keyframes bar-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.running-dot {
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
.running-bar strong {
  margin-left: auto;
  font-family: Nunito, sans-serif;
  font-size: 1.25rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.running-back { opacity: .78; font-size: .74rem; font-weight: 800; }
.running-bar.is-paused { background: var(--ink-3); }
.running-bar.is-paused .running-dot { animation: none; opacity: .6; }

/* ---------- 底部面板 ---------- */

.sheet-backdrop {
  position: fixed;
  z-index: 30;
  inset: 0;
  background: rgba(51, 64, 60, .42);
  backdrop-filter: blur(4px);
}
.bottom-sheet {
  position: fixed;
  z-index: 40;
  right: 0; bottom: 0; left: 0;
  max-height: 92dvh;
  padding: 16px 22px calc(26px + env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--paper);
  box-shadow: 0 -18px 46px rgba(51, 64, 60, .18);
  transform: translateY(104%);
  transition: transform .44s var(--ease);
}
.bottom-sheet.is-open { transform: translateY(0); }
.sheet-handle {
  width: 46px; height: 5px;
  margin: 0 auto 14px;
  border-radius: 99px;
  background: var(--ink-3);
  opacity: .45;
}
.sheet-close {
  position: absolute;
  top: 16px; right: 18px;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-2);
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.bottom-sheet h2 { margin-bottom: 10px; }
.bottom-sheet > p:not(.eyebrow) { color: var(--ink-2); line-height: 1.75; font-size: .92rem; }

.plan-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 9px;
  margin: 20px 0;
}
.plan-step {
  min-height: 86px;
  padding: 14px 12px;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.plan-step small, .plan-step strong { display: block; }
.plan-step small { color: var(--ink-2); font-size: .68rem; font-weight: 700; }
.plan-step strong { margin-top: 6px; font-size: .86rem; font-weight: 800; line-height: 1.4; }

.video-links { display: grid; gap: 10px; margin: 16px 0; }
.video-link {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 66px;
  padding: 11px 15px;
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.video-link::before {
  content: "▶";
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  font-size: .8rem;
  padding-left: 3px;
}
.video-link strong, .video-link small { display: block; }
.video-link strong { font-size: .95rem; font-weight: 800; }
.video-link small { margin-top: 2px; color: var(--ink-2); font-size: .76rem; }

.timer-display {
  margin: 24px 0 18px;
  font-family: Nunito, sans-serif;
  font-size: clamp(4rem, 20vw, 6.5rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-align: center;
  line-height: 1;
}
.timer-actions { display: grid; gap: 10px; }

.primary-action, .secondary-action {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: var(--r-lg);
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .16s var(--ease);
}
.primary-action { background: var(--mint); color: #fff; box-shadow: var(--shadow); }
.secondary-action { background: transparent; color: var(--ink-2); }
.primary-action:active, .secondary-action:active { transform: scale(.975); }

#reportForm { display: grid; gap: 18px; }
#reportForm > label:not(.check-row) {
  display: grid;
  gap: 10px;
  font-weight: 800;
  font-size: .92rem;
}
#reportForm input[type="number"] {
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r);
  background: var(--card);
  color: var(--ink);
  font-family: Nunito, sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
/* 原生滑桿的未填滿段是深灰的，在米白底上太重，整條自己畫 */
#reportForm input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coral) var(--fill, 50%), var(--paper-2) var(--fill, 50%));
  cursor: pointer;
}
#reportForm input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: var(--shadow);
  cursor: pointer;
}
#reportForm input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: var(--shadow);
  cursor: pointer;
}
#rpeOutput { color: var(--coral); font-weight: 800; }

.check-row {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 52px;
  font-weight: 700;
  font-size: .92rem;
}
.check-row input { width: 26px; height: 26px; accent-color: var(--mint); flex-shrink: 0; }
.warning-row { color: var(--danger); }
.warning-row input { accent-color: var(--danger); }

/* ---------- 完成畫面 ---------- */

.event-reveal {
  position: fixed;
  z-index: 60;
  inset: 0;
  /* 內容會長（對話＋默契理由＋解鎖），所以整個畫面要能捲 */
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  overflow-y: auto;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.event-reveal.is-open { opacity: 1; pointer-events: auto; }
.event-visual {
  position: relative;
  overflow: hidden;
  height: 40dvh;
  margin: 14px 14px 0;
  border-radius: var(--r-xl);
  background: var(--sun-soft);
}
/* .action-sprite 本身是正方形的，在這裡要撐滿容器，不然右邊會留白 */
.event-visual .action-sprite {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background-size: cover;
  background-position: center 14%;
}
.event-copy { padding: 22px 24px calc(24px + env(safe-area-inset-bottom)); }
.event-copy .eyebrow { color: var(--sun); font-weight: 800; }
.event-copy h2 { margin-bottom: 10px; font-size: clamp(1.5rem, 6vw, 2rem); }
.event-copy p:not(.eyebrow) { color: var(--ink-2); line-height: 1.75; font-size: .92rem; }

.bond-reasons { margin: 16px 0 20px; padding: 0; list-style: none; display: grid; gap: 8px; }
.bond-reasons li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 15px;
  border-radius: var(--r-sm);
  background: var(--coral-soft);
  font-size: .84rem;
}
.bond-reasons span { color: var(--ink); font-weight: 600; }
.bond-reasons strong { flex-shrink: 0; color: var(--coral); font-size: .8rem; font-weight: 900; white-space: nowrap; }

/* ---------- 劇情播放器（刻意維持暗場）---------- */

.story-stage {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  /* 人物區吃滿，對話框浮在上面，這樣才有「她站在那裡跟你講話」的感覺 */
  grid-template-rows: minmax(0, 1fr) auto;
  background: #241F2A;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
.story-stage.is-open { opacity: 1; pointer-events: auto; }

.story-visual {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 70% 20%, rgba(255, 176, 59, .30) 0 42%, transparent 72%),
    linear-gradient(165deg, #3A3244, #241F2A);
}
/* 背景層：同一張圖放大＋模糊＋壓暗，讓人物浮出來 */
.story-bg {
  position: absolute;
  inset: -8%;
  background-image: var(--story-image);
  background-size: cover;
  background-position: center 30%;
  filter: blur(26px) brightness(.48) saturate(.85);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .7s var(--ease);
}
.story-visual.has-image .story-bg { opacity: 1; }

/* 人物層：完整看得到人，邊緣淡出融進背景，加上很輕的呼吸晃動 */
.story-char {
  position: absolute;
  inset: 0;
  background-image: var(--story-image);
  /* 蓋滿畫面、錨在偏上，臉才不會被對話框切掉，底下也不會空一塊 */
  background-size: cover;
  background-position: 50% 12%;
  background-repeat: no-repeat;
  opacity: 0;
  transform-origin: 50% 92%;
}
/* 底部壓一層暗，讓她跟對話框接得順。
   本來用 mask 做，但這個瀏覽器會把整層弄不見，改用蓋一層漸層最穩。 */
.story-char::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(29, 25, 34, .78) 70%, #1D1922 100%);
}
.story-visual.has-image .story-char {
  animation: story-in .9s var(--ease) both, story-breathe 6s ease-in-out .9s infinite;
}
.story-visual.has-image .story-placeholder { opacity: 0; }

@keyframes story-in { from { opacity: 0; transform: scale(1.05) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* 呼吸：非常小的起伏，看得出來活著但不會晃到分心 */
@keyframes story-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.012) translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .story-visual.has-image .story-char { animation: story-in .9s var(--ease) both; }
}

.story-placeholder {
  position: relative;
  z-index: 1;
  max-width: min(100%, 30ch);
  padding: 0 28px;
  text-align: center;
  transition: opacity .3s var(--ease);
}
.story-placeholder .eyebrow { color: var(--sun); font-weight: 800; }
.story-placeholder h2 {
  margin: 0;
  color: #F6F0E8;
  font-size: clamp(1.7rem, 8vw, 2.5rem);
  line-height: 1.3;
}
.story-placeholder h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 99px;
  margin: 22px auto 0;
  background: var(--sun);
}

/* 戀愛遊戲的對話框：壓低、半透明、浮在畫面上，人才看得完整 */
.story-dialogue {
  position: relative;
  min-height: 30dvh;
  padding: 30px 24px calc(26px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(29, 25, 34, .82) 0%, rgba(29, 25, 34, .96) 22%, #1D1922 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 176, 59, .22);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  margin-top: -34px;
  cursor: pointer;
}
/* 名牌像掛在框上，跟遊戲一樣 */
.story-who {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 15px;
  background: linear-gradient(135deg, var(--sun), #FF9A2E);
  border-radius: 999px;
  color: #2A2118;
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(255, 176, 59, .3);
}
.story-text {
  margin: 0;
  max-width: 34rem;
  color: #F6F0E8;
  font-size: clamp(1.02rem, 4.4vw, 1.18rem);
  font-weight: 500;
  line-height: 1.85;
  animation: line-in .3s var(--ease) both;
}
.story-text.is-narration { color: #A79FAF; font-style: italic; font-size: clamp(.94rem, 4vw, 1.05rem); }
@keyframes line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.story-hint {
  margin: 20px 0 0;
  color: #6E6578;
  font-size: .74rem;
  letter-spacing: .1em;
  animation: blink 2.2s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: .85; } 50% { opacity: .3; } }

.story-choices[hidden] { display: none; }
.story-choices { display: grid; gap: 10px; margin-top: 20px; }
.story-choices button {
  min-height: 58px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r);
  color: #241F2A;
  background: var(--sun);
  font-size: .96rem;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  transition: transform .16s var(--ease);
}
.story-choices button:nth-child(2) { background: #F6F0E8; }
.story-choices button:active { transform: scale(.975); }

.story-skip {
  position: absolute;
  z-index: 2;
  top: max(16px, env(safe-area-inset-top));
  right: 18px;
  min-height: 40px;
  padding: 0 17px;
  border: 0;
  border-radius: 999px;
  color: #241F2A;
  background: rgba(246, 240, 232, .9);
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}

/* ---------- 開場問診 ---------- */

.intake {
  position: fixed;
  z-index: 80;
  inset: 0;
  overflow-y: auto;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.intake.is-open { opacity: 1; pointer-events: auto; }
.intake-inner {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: max(48px, env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
}
.intake-inner .eyebrow { color: var(--sun); font-weight: 800; }
.intake-inner h2 { margin-bottom: 14px; max-width: 16ch; }
.intake-lead { margin-bottom: 24px; color: var(--ink-2); line-height: 1.8; font-size: .92rem; }
.intake .check-row {
  padding: 4px 18px;
  margin-bottom: 9px;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: .94rem;
}
.intake-sub { margin: 28px 0 12px; font-weight: 800; }
.intake-gap { display: grid; gap: 9px; margin-bottom: 30px; }
.intake-gap button {
  min-height: 56px;
  border: 0;
  border-radius: var(--r);
  color: var(--ink-2);
  background: var(--card);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .16s var(--ease);
}
.intake-gap button:active { transform: scale(.98); }
.intake-gap button.is-selected { background: var(--mint); color: #fff; box-shadow: var(--shadow); }
.intake-foot { margin: 16px 0 0; color: var(--ink-3); font-size: .76rem; text-align: center; }

/* ---------- 完成畫面的日常對話 ---------- */

.event-chat[hidden] { display: none; }
.event-chat {
  display: grid;
  gap: 9px;
  margin: 18px 0 4px;
}
.event-chat p {
  margin: 0;
  padding: 14px 17px;
  border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 6px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.7;
  justify-self: start;
  max-width: 92%;
  animation: chat-in .5s var(--ease) both;
}
@keyframes chat-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 她的樣子（收藏冊）---------- */

.outfit-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 11px;
  margin: 16px -18px 0;
  padding: 4px 18px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.outfit-strip::-webkit-scrollbar { display: none; }

.outfit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  min-height: 128px;
  padding: 17px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .18s var(--ease);
}
.outfit-card:active { transform: scale(.975); }
.outfit-card strong { font-size: .98rem; font-weight: 900; }
.outfit-card small { color: var(--ink-2); font-size: .76rem; line-height: 1.5; }

.outfit-card.is-locked {
  background: var(--paper-2);
  box-shadow: none;
  cursor: default;
}
.outfit-card.is-locked strong { color: var(--ink-3); }

.outfit-card.is-current { background: var(--sun-soft); }
.outfit-now {
  position: absolute;
  top: 13px;
  right: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sun);
  color: #fff;
  font-size: .64rem;
  font-weight: 800;
}

/* 解鎖新造型時，在完成畫面最上面那一條 */
.bond-reasons .unlock-row {
  background: var(--sun-soft);
  padding: 14px 16px;
  align-items: flex-start;
}
.bond-reasons .unlock-row b { display: block; font-size: .95rem; font-weight: 900; margin-bottom: 3px; }
.bond-reasons .unlock-row span { line-height: 1.55; }
.bond-reasons .unlock-row strong { color: var(--sun); }

/* ---------- 響應式 ---------- */

@media (min-width: 560px) {
  .workout-choices { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 760px) {
  .app-shell { padding-inline: 28px; }
  .coach-stage { min-height: 440px; }
  .coach-copy { width: 44%; right: 26px; bottom: 26px; }
  .bottom-sheet { left: 50%; width: min(620px, 100%); transform: translate(-50%, 104%); }
  .bottom-sheet.is-open { transform: translate(-50%, 0); }
  .event-reveal { grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr; align-content: stretch; }
  .event-visual { height: auto; margin: 14px 0 14px 14px; }
  .event-copy { align-self: center; padding: 44px; }
  .story-stage { grid-template-rows: none; grid-template-columns: 1.15fr .85fr; }
  .story-dialogue { min-height: 100dvh; display: grid; align-content: center; padding: 44px 40px; margin-top: 0; border-radius: 0; }
  .running-bar { bottom: calc(96px + max(12px, env(safe-area-inset-bottom))); }
}

@media (max-width: 370px) {
  .app-shell { padding-inline: 13px; }
  .coach-stage { min-height: 300px; }
  .coach-copy { right: 10px; bottom: 12px; width: 54%; padding: 15px 13px; }
  .workout-card { grid-template-columns: 48px 1fr auto; gap: 11px; padding: 14px 15px; }
  .workout-card .workout-letter { width: 48px; font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}