:root {
  color-scheme: light;
  --ink: #17151f;
  --text: #383242;
  --muted: #756f80;
  --blue: #1688ff;
  --pink: #ff7aa8;
  --purple: #8d63ff;
  --green: #49c596;
  --shadow: 0 24px 70px rgba(61, 52, 83, .16);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #f7f5fb;
  color: var(--text);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at 8% 10%, rgba(223, 241, 255, .96), transparent 34%),
    radial-gradient(circle at 92% 12%, rgba(255, 225, 236, .94), transparent 33%),
    linear-gradient(135deg, #faf7ff 0%, #f2fbff 48%, #fff7df 100%);
}

.patient-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.stage {
  width: min(1040px, 100%);
  min-height: min(760px, calc(100dvh - 36px));
  display: grid;
  grid-template-rows: auto 6px 1fr auto;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 34px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 24px 12px;
  background: rgba(255,255,255,.38);
}

.session-meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.session-meta p {
  margin: 0;
}

#sessionLabel {
  color: var(--ink);
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 950;
}

#progressText {
  color: var(--muted);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 950;
}

.progress-track {
  background: rgba(255,255,255,.64);
}

#progressBar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--pink));
  transition: width .35s ease;
}

.moment-card {
  display: grid;
  align-content: center;
  gap: clamp(18px, 3vw, 30px);
  margin: clamp(14px, 2vw, 24px);
  padding: clamp(26px, 5vw, 58px);
  border-radius: 30px;
  background: linear-gradient(145deg, #ffffff 0%, #dff1ff 100%);
}

.moment-card[data-theme="morning"],
body[data-theme="morning"] .moment-card[data-type="welcome"] {
  background: linear-gradient(145deg, #fffaf0 0%, #ffe8c8 48%, #ffd6a8 100%);
}

.moment-card[data-theme="evening"],
body[data-theme="evening"] .moment-card[data-type="welcome"],
body[data-theme="evening"] .moment-card[data-type="ending"],
body[data-theme="evening"] .moment-card[data-type="closing_music"],
body[data-theme="evening"] .moment-card[data-type="rhythm_tap"] {
  background: linear-gradient(145deg, #eef2ff 0%, #d5dff7 45%, #b8c6e8 100%);
  color: #1d2438;
}

.moment-card[data-type="music"],
.moment-card[data-type="opening_music"],
.moment-card[data-type="closing_music"] {
  background: linear-gradient(145deg, #fff7fb 0%, #ffe1ec 52%, #eadcff 100%);
}

.moment-card[data-type="family_today"] {
  grid-template-columns: 1fr;
  background: linear-gradient(145deg, #ffffff 0%, #dcf7ef 100%);
  padding: 0;
  overflow: hidden;
}

.moment-card[data-type="family_photo"],
.moment-card[data-type="ending"] {
  grid-template-columns: minmax(280px, 1.05fr) minmax(280px, .95fr);
  align-items: center;
  background: linear-gradient(145deg, #ffffff 0%, #dcf7ef 100%);
}

.family-today {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: min(520px, 62vh);
}

.family-today-photo {
  min-height: 360px;
  border-radius: 0;
  margin: 0;
}

.family-today-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-today-bar {
  padding: 22px 26px 26px;
  background: rgba(23, 21, 31, .78);
  color: #fff;
}

.family-today-who {
  margin: 0 0 8px;
  opacity: .9;
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 800;
}

.family-today-line {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 850;
  line-height: 1.35;
}

.family-today-sign {
  margin: 10px 0 0;
  opacity: .88;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
}

.moment-card[data-fade="1"] {
  animation: eveningFade 1.2s ease forwards;
}

@keyframes eveningFade {
  from { filter: brightness(1); }
  to { filter: brightness(.72); }
}

.moment-card[data-type="family_today"] .copy-block {
  display: none;
}

.rhythm-board {
  display: grid;
  place-items: center;
  min-height: 280px;
}

.rhythm-ring {
  width: min(220px, 46vw);
  height: min(220px, 46vw);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 950;
  background: radial-gradient(circle at 30% 28%, #7eb6ff, #1688ff 55%, #5b6cff);
  box-shadow: 0 18px 40px rgba(22, 136, 255, .28);
  transition: transform .2s ease;
}

.rhythm-ring.pulse {
  transform: scale(1.08);
}

.music-pulse {
  width: min(180px, 40vw);
  height: min(180px, 40vw);
  margin: 0 auto;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,122,168,.55), rgba(141,99,255,.18) 70%, transparent 72%);
  animation: softPulse 1.8s ease-in-out infinite;
}

@keyframes softPulse {
  0%, 100% { transform: scale(.92); opacity: .7; }
  50% { transform: scale(1.08); opacity: 1; }
}

body[data-session="evening"] {
  background:
    radial-gradient(circle at 12% 10%, rgba(180, 198, 255, .55), transparent 36%),
    radial-gradient(circle at 88% 14%, rgba(120, 140, 200, .35), transparent 34%),
    linear-gradient(145deg, #1b2238 0%, #2a3554 48%, #3d4a6d 100%);
}

body[data-session="evening"] .stage {
  background: rgba(255, 255, 255, .82);
}

.moment-card[data-type="object_naming_game"],
.moment-card[data-type="picture_match_game"],
.moment-card[data-type="number_tap_game"] {
  background: linear-gradient(145deg, #ffffff 0%, #eadcff 54%, #dff1ff 100%);
}

.moment-card[data-type="object_naming_game"] .copy-block,
.moment-card[data-type="picture_match_game"] .copy-block,
.moment-card[data-type="number_tap_game"] .copy-block {
  order: -1;
}

.copy-block {
  display: grid;
  gap: 16px;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(44px, 6.7vw, 76px);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
}

.card-text {
  max-width: 820px;
  margin: 0;
  color: var(--text);
  font-size: clamp(29px, 4vw, 44px);
  line-height: 1.42;
  font-weight: 760;
  letter-spacing: 0;
}

.support-text {
  min-height: 1.4em;
  margin: 0;
  color: var(--muted);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  line-height: 1.38;
}

.support-text:empty {
  display: none;
}

.media-slot {
  display: grid;
  gap: 16px;
}

.media-slot:empty {
  display: none;
}

.photo-frame {
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  border: 5px solid rgba(255,255,255,.82);
  background: #fff;
  box-shadow: 0 18px 46px rgba(61, 52, 83, .16);
  cursor: zoom-in;
}

.photo-frame img {
  width: 100%;
  max-height: min(52vh, 470px);
  object-fit: contain;
  display: block;
  background: #fff;
}

.photo-frame:focus-visible {
  outline: 5px solid rgba(22, 136, 255, .24);
  outline-offset: 5px;
}

.question {
  width: fit-content;
  max-width: 760px;
  border-radius: 999px;
  padding: 14px 18px;
  background: rgba(255,255,255,.82);
  color: #187554;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 950;
  line-height: 1.35;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  width: min(860px, 100%);
}

.game-board.compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.game-option {
  min-height: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 4px solid rgba(255,255,255,.76);
  border-radius: 26px;
  background: rgba(255,255,255,.84);
  color: var(--ink);
  box-shadow: 0 16px 34px rgba(61, 52, 83, .12);
}

.game-swatch {
  width: 100%;
  min-height: clamp(120px, 20vw, 210px);
  border-radius: 22px;
  border: 4px solid rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.54);
}

.game-label {
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 950;
  line-height: 1.25;
}

.game-option small {
  color: var(--muted);
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 850;
  line-height: 1.35;
}

.game-option.selected {
  border-color: var(--blue);
  background: #eff7ff;
  box-shadow: 0 18px 42px rgba(22, 136, 255, .22);
}

.target-card {
  width: min(520px, 100%);
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 5px solid rgba(22, 136, 255, .58);
  border-radius: 26px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 46px rgba(22, 136, 255, .18);
}

.target-swatch {
  width: 100%;
  min-height: clamp(110px, 18vw, 190px);
  border-radius: 20px;
  border: 4px solid rgba(255,255,255,.82);
}

.target-card strong {
  color: var(--ink);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 950;
}

.object-target {
  width: min(560px, 100%);
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 32px;
  background: rgba(255,255,255,.78);
  border: 4px solid rgba(255,255,255,.74);
  box-shadow: 0 18px 46px rgba(61, 52, 83, .13);
}

.object-target strong {
  color: var(--ink);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 950;
  line-height: 1.28;
  text-align: center;
}

.object-visual {
  position: relative;
  width: min(260px, 44vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 32px;
  background: linear-gradient(145deg, #fff 0%, #f6fbff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 12px 30px rgba(61, 52, 83, .1);
}

.object-shape {
  position: relative;
  display: block;
  width: 48%;
  height: 48%;
}

.object-shape::before,
.object-shape::after {
  content: "";
  position: absolute;
  display: block;
}

.visual-apple .object-shape {
  width: 48%;
  height: 44%;
  border-radius: 48% 48% 54% 54%;
  background: linear-gradient(145deg, #ff8095, #ef4f63);
  box-shadow: inset 12px 10px 0 rgba(255,255,255,.22);
}

.visual-apple .object-shape::before {
  width: 22%;
  height: 34%;
  left: 48%;
  top: -24%;
  border-radius: 999px;
  background: #5c4a36;
  transform: rotate(16deg);
}

.visual-apple .object-shape::after {
  width: 36%;
  height: 22%;
  right: -10%;
  top: -18%;
  border-radius: 999px 0 999px 0;
  background: #66c88d;
  transform: rotate(-18deg);
}

.visual-cup .object-shape {
  width: 48%;
  height: 48%;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(145deg, #8fd2ff, #4aa6ed);
  box-shadow: inset 12px 10px 0 rgba(255,255,255,.28);
}

.visual-cup .object-shape::before {
  width: 44%;
  height: 48%;
  right: -30%;
  top: 16%;
  border: 10px solid #4aa6ed;
  border-left: 0;
  border-radius: 0 999px 999px 0;
}

.visual-cup .object-shape::after {
  width: 132%;
  height: 10px;
  left: -16%;
  bottom: -20px;
  border-radius: 999px;
  background: #d4edf9;
}

.visual-flower .object-shape {
  width: 28%;
  height: 28%;
  border-radius: 999px;
  background: #ffd35a;
}

.visual-flower .object-shape::before {
  width: 220%;
  height: 220%;
  left: -60%;
  top: -60%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, #ff8fbd 0 19%, transparent 21%),
    radial-gradient(circle at 100% 50%, #ff8fbd 0 19%, transparent 21%),
    radial-gradient(circle at 50% 100%, #ff8fbd 0 19%, transparent 21%),
    radial-gradient(circle at 0% 50%, #ff8fbd 0 19%, transparent 21%);
  z-index: -1;
}

.visual-flower .object-shape::after {
  width: 12px;
  height: 94px;
  left: 50%;
  top: 78%;
  border-radius: 999px;
  background: #56bd82;
  transform: translateX(-50%);
}

.visual-bowl .object-shape {
  width: 58%;
  height: 36%;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(145deg, #ffd88a, #ffad68);
  box-shadow: inset 12px 10px 0 rgba(255,255,255,.24);
}

.visual-bowl .object-shape::before {
  width: 116%;
  height: 18px;
  left: -8%;
  top: -10px;
  border-radius: 999px;
  background: #ffe7b8;
  border: 6px solid #ffad68;
}

.visual-key .object-shape {
  width: 58%;
  height: 18%;
  border-radius: 999px;
  background: #f8c657;
  transform: rotate(-28deg);
}

.visual-key .object-shape::before {
  width: 42%;
  aspect-ratio: 1;
  left: -30%;
  top: 50%;
  border: 12px solid #f8c657;
  border-radius: 999px;
  transform: translateY(-50%);
  background: transparent;
}

.visual-key .object-shape::after {
  width: 18%;
  height: 150%;
  right: 10%;
  top: 60%;
  border-radius: 0 0 8px 8px;
  background: #f8c657;
  box-shadow: 24px 0 0 #f8c657;
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 16px;
  width: min(860px, 100%);
}

.word-option,
.number-tile,
.match-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.word-option {
  min-height: clamp(82px, 11vw, 118px);
  border: 4px solid rgba(255,255,255,.76);
  border-radius: 28px;
  background: rgba(255,255,255,.86);
  color: var(--ink);
  box-shadow: 0 16px 34px rgba(61, 52, 83, .12);
}

.word-option.selected,
.number-tile.done,
.match-card.matched {
  border-color: rgba(22, 136, 255, .74);
  background: #eff7ff;
  color: #075eb2;
  box-shadow: 0 18px 42px rgba(22, 136, 255, .22);
}

.word-option.soft,
.number-tile.soft {
  border-color: rgba(255, 122, 168, .5);
  background: #fff5f9;
}

.match-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 16px;
  width: min(900px, 100%);
}

.match-card {
  position: relative;
  min-height: clamp(150px, 20vw, 220px);
  padding: 10px;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,.76);
  border-radius: 30px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 16px 34px rgba(61, 52, 83, .12);
}

.match-back,
.match-face {
  position: absolute;
  inset: 10px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  transition: opacity .22s ease, transform .22s ease;
}

.match-back {
  color: rgba(22, 136, 255, .85);
  font-size: clamp(58px, 8vw, 92px);
  font-weight: 950;
  background: linear-gradient(145deg, #ffffff 0%, #dff1ff 100%);
}

.match-face {
  gap: 8px;
  opacity: 0;
  transform: scale(.96);
  background: #fff;
}

.match-face .object-visual {
  width: min(128px, 24vw);
  border-radius: 22px;
  box-shadow: none;
}

.match-label {
  color: var(--ink);
  font-size: clamp(18px, 2.3vw, 24px);
  font-weight: 950;
}

.match-card.revealed .match-back,
.match-card.matched .match-back {
  opacity: 0;
  transform: scale(1.04);
}

.match-card.revealed .match-face,
.match-card.matched .match-face {
  opacity: 1;
  transform: scale(1);
}

.number-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 18px;
  width: min(760px, 100%);
}

.number-tile {
  min-height: clamp(150px, 22vw, 230px);
  border: 4px solid rgba(255,255,255,.76);
  border-radius: 34px;
  background: rgba(255,255,255,.86);
  color: var(--ink);
  font-size: clamp(70px, 12vw, 130px);
  font-weight: 950;
  box-shadow: 0 16px 34px rgba(61, 52, 83, .12);
}

audio {
  width: min(680px, 100%);
  filter: drop-shadow(0 14px 24px rgba(61, 52, 83, .12));
}

.controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 22px);
  padding: 18px 22px 22px;
  background: rgba(255,255,255,.38);
}

button {
  min-height: 66px;
  border-radius: 999px;
  border: 0;
  padding: 14px 22px;
  font: inherit;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 950;
  letter-spacing: 0;
}

button:disabled {
  opacity: .42;
}

.primary,
.nav-next {
  background: linear-gradient(135deg, var(--blue), #6aa7ff);
  color: #fff;
  box-shadow: 0 14px 28px rgba(22, 136, 255, .25);
}

.secondary,
.nav-prev {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.86);
  color: var(--text);
}

.nav-button {
  min-height: clamp(68px, 9vw, 86px);
  border-radius: 999px;
  font-size: clamp(34px, 5vw, 48px);
  line-height: 1;
}

.nav-next {
  font-size: clamp(40px, 5.8vw, 56px);
}

.nav-next:not(:empty) {
  white-space: nowrap;
}

.nav-next[aria-label*="完成"] {
  font-size: clamp(26px, 4vw, 36px);
}

button:active {
  transform: translateY(1px);
}

.session-finished .controls,
.session-finished .media-slot {
  display: none;
}

.viewer-open {
  overflow: hidden;
}

.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  background: rgba(23, 21, 31, .92);
}

.photo-viewer[hidden] {
  display: none;
}

.photo-viewer img {
  width: auto;
  max-width: 96vw;
  height: auto;
  max-height: 88dvh;
  object-fit: contain;
  border-radius: 26px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .4);
}

.viewer-close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 51;
  min-width: 104px;
  min-height: 58px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.4);
}

@media (max-width: 760px) {
  .patient-shell {
    padding: 0;
  }

  .stage {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .moment-card,
  .moment-card[data-type="family_photo"],
  .moment-card[data-type="ending"] {
    grid-template-columns: 1fr;
    align-content: center;
    margin: 10px;
    border-radius: 28px;
  }

  .topbar {
    min-height: 58px;
    padding: 14px 18px 10px;
  }

  h1 {
    font-size: clamp(32px, 9vw, 42px);
  }

  .card-text {
    font-size: clamp(22px, 6.4vw, 30px);
  }

  .support-text {
    font-size: clamp(18px, 5vw, 24px);
  }

  .session-meta {
    width: 100%;
    justify-content: space-between;
  }

  .controls {
    grid-template-columns: 1fr 1fr;
    padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  }

  .game-board,
  .game-board.compact {
    grid-template-columns: 1fr 1fr;
  }

  .choice-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .word-option {
    min-height: 64px;
    padding: 10px 8px;
    border-radius: 24px;
    font-size: clamp(20px, 6vw, 28px);
  }

  .object-target {
    gap: 10px;
    padding: 12px;
    border-radius: 28px;
  }

  .object-visual {
    width: min(160px, 38vw);
    border-radius: 26px;
  }

  .object-target strong {
    font-size: clamp(18px, 5.2vw, 24px);
  }

  .number-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .number-tile {
    min-height: clamp(96px, 26vw, 124px);
    border-radius: 28px;
    font-size: clamp(56px, 18vw, 78px);
  }

  .match-board {
    grid-template-columns: 1fr 1fr;
  }

  .object-target {
    justify-self: center;
  }
}