:root {
  --page: #f6f2e9;
  --page-warm: #fffaf1;
  --card: #fffdf8;
  --ink: #30443e;
  --muted: #6e7e78;
  --accent: #2d8b72;
  --accent-deep: #20715d;
  --accent-soft: #dcefe7;
  --warm: #efbd62;
  --rose: #e9a291;
  --sky: #92bcd0;
  --shadow: 0 24px 56px rgba(67, 83, 75, 0.12), 0 4px 14px rgba(67, 83, 75, 0.06);
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background:
    radial-gradient(circle at 12% 12%, rgba(238, 194, 148, 0.2), transparent 28%),
    radial-gradient(circle at 90% 35%, rgba(132, 190, 170, 0.17), transparent 30%),
    linear-gradient(165deg, var(--page-warm) 0%, var(--page) 58%, #eef5ef 100%);
  color: var(--ink);
  overscroll-behavior: none;
}

button {
  font: inherit;
}

.app-shell {
  position: relative;
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr) 60px minmax(164px, 22dvh);
  gap: 2px;
  isolation: isolate;
  width: min(100%, 480px);
  height: 100dvh;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 18px max(12px, env(safe-area-inset-bottom));
  overflow: hidden;
}

.app-shell::before,
.app-shell::after {
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.app-shell::before {
  top: -142px;
  left: -112px;
  background: rgba(239, 189, 98, 0.13);
}

.app-shell::after {
  right: -148px;
  bottom: 52px;
  background: rgba(67, 151, 123, 0.1);
}

.reward-strip {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  touch-action: manipulation;
  user-select: none;
}

.reward-strip::before {
  position: absolute;
  width: 134px;
  height: 28px;
  border: 1px solid rgba(67, 105, 91, 0.07);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  content: "";
}

.reward-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(69, 103, 91, 0.13);
  box-shadow: inset 0 1px 2px rgba(44, 75, 64, 0.08);
  transition: background 260ms ease, transform 260ms ease, box-shadow 260ms ease;
}

.reward-dot i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transition: opacity 220ms ease;
}

.reward-dot.active {
  background: var(--warm);
  box-shadow: 0 0 0 5px rgba(239, 189, 98, 0.14), 0 3px 8px rgba(190, 137, 52, 0.2);
  transform: scale(1.08);
}

.reward-dot.active i {
  opacity: 1;
}

.reward-strip.celebrating .reward-dot {
  animation: collection-shimmer 720ms ease-in-out 2;
}

.reward-strip.celebrating .reward-dot:nth-child(2) { animation-delay: 60ms; }
.reward-strip.celebrating .reward-dot:nth-child(3) { animation-delay: 120ms; }
.reward-strip.celebrating .reward-dot:nth-child(4) { animation-delay: 180ms; }
.reward-strip.celebrating .reward-dot:nth-child(5) { animation-delay: 240ms; }

.item-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 2px 0 6px;
}

.stage-glow {
  position: absolute;
  width: min(94%, 410px);
  aspect-ratio: 1;
  border-radius: 44%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 58%, transparent 74%);
  filter: blur(4px);
  pointer-events: none;
}

.item-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 406px, calc(100dvh - 294px));
  min-width: 226px;
  aspect-ratio: 1;
  padding: clamp(8px, 2.3vw, 14px);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: clamp(28px, 9vw, 44px);
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 253, 248, 0.94) 64%, rgba(244, 239, 227, 0.8) 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: translateZ(0);
  transition: box-shadow 280ms ease, transform 280ms ease;
}

.item-image {
  display: none;
  width: 100%;
  height: 100%;
  border-radius: clamp(22px, 7vw, 36px);
  object-fit: contain;
  filter: saturate(0.98) contrast(1.01);
  transform: scale(var(--item-visual-scale, 1));
  transform-origin: center;
}

.item-image.visible {
  display: block;
}

.image-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: clamp(22px, 7vw, 36px);
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.96), transparent 42%),
    linear-gradient(145deg, rgba(233, 242, 236, 0.72), rgba(249, 237, 213, 0.54));
  overflow: hidden;
}

.image-placeholder.hidden {
  display: none;
}

.placeholder-orb {
  position: absolute;
  top: 27%;
  left: 27%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 48% 52% 56% 44%;
  background: linear-gradient(145deg, rgba(138, 187, 169, 0.2), rgba(239, 189, 98, 0.18));
  box-shadow: 0 16px 36px rgba(83, 116, 103, 0.09);
  transform: rotate(-7deg);
}

.placeholder-spark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(239, 189, 98, 0.4);
}

.placeholder-spark-one {
  top: 28%;
  right: 24%;
}

.placeholder-spark-two {
  right: 31%;
  bottom: 25%;
  width: 8px;
  height: 8px;
  background: rgba(78, 153, 127, 0.34);
}

.item-frame.bounce {
  animation: card-bounce 520ms ease;
}

.item-frame.reward {
  animation: reward-card 1500ms ease;
}

.app-shell[data-state="RETRY_GENTLY"] .item-frame {
  animation: gentle-listen 850ms ease-in-out 2;
}

.replay-button {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 138px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid rgba(42, 127, 102, 0.08);
  border-radius: 999px;
  background: rgba(224, 241, 233, 0.84);
  color: #286e5a;
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  box-shadow: 0 7px 18px rgba(59, 119, 98, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: transform 140ms ease, background 180ms ease, box-shadow 180ms ease;
}

.replay-icon {
  width: 29px;
  height: 29px;
  overflow: visible;
}

.ear-outline,
.ear-inner {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.35;
}

.replay-button.replaying {
  animation: replay-ear 620ms ease;
}

.replay-button:active {
  transform: translateY(2px) scale(0.98);
  background: #d2ebe0;
  box-shadow: 0 3px 10px rgba(59, 119, 98, 0.08);
}

.replay-button.replaying .replay-icon {
  animation: ear-listen 620ms ease;
}

.microphone-zone {
  display: grid;
  place-items: center;
  min-height: 0;
}

.microphone-button,
.microphone-button * {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.microphone-button {
  position: relative;
  width: clamp(132px, 39vw, 158px);
  height: clamp(132px, 39vw, 158px);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: linear-gradient(150deg, #45a285 0%, var(--accent) 50%, var(--accent-deep) 100%);
  color: #fff;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: transform 130ms ease, box-shadow 180ms ease, filter 180ms ease;
  box-shadow:
    0 17px 30px rgba(42, 119, 95, 0.24),
    0 5px 10px rgba(42, 119, 95, 0.12),
    inset 0 2px 1px rgba(255, 255, 255, 0.28),
    inset 0 -7px 14px rgba(19, 91, 70, 0.15);
}

.microphone-button::after {
  position: absolute;
  top: 9px;
  left: 21%;
  width: 58%;
  height: 28%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent);
  content: "";
  pointer-events: none;
}

.microphone-button:disabled {
  cursor: default;
  opacity: 0.64;
}

.microphone-button.listening {
  transform: translateY(3px) scale(calc(0.955 + var(--listening-level, 0) * 0.025));
  filter: saturate(0.94);
  box-shadow:
    0 8px 18px rgba(38, 110, 87, 0.26),
    0 0 0 calc(7px + var(--listening-level, 0) * 8px) rgba(93, 174, 145, 0.1),
    inset 0 3px 10px rgba(20, 84, 65, 0.16);
}

.microphone-button.listening::before {
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(82, 168, 138, 0.28);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: listening-breathe 1350ms ease-in-out infinite;
}

.microphone-aura {
  position: absolute;
  inset: -11px;
  border: 2px solid rgba(55, 150, 119, 0.14);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(55, 150, 119, 0.05);
  pointer-events: none;
}

.microphone-button.listening .microphone-aura {
  animation: listening-ring 980ms ease-out infinite;
}

.microphone-pill {
  position: absolute;
  top: 30px;
  left: 50%;
  width: 34px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: inset 0 -4px 5px rgba(25, 101, 78, 0.08);
  transform: translateX(-50%);
}

.microphone-base {
  position: absolute;
  top: 57px;
  left: 50%;
  width: 56px;
  height: 38px;
  border: 5px solid rgba(255, 255, 255, 0.96);
  border-top: 0;
  border-radius: 0 0 30px 30px;
  background: transparent;
  transform: translateX(-50%);
}

.microphone-base::before,
.microphone-base::after {
  position: absolute;
  left: 50%;
  background: rgba(255, 255, 255, 0.96);
  content: "";
  transform: translateX(-50%);
}

.microphone-base::before {
  bottom: -13px;
  width: 5px;
  height: 13px;
}

.microphone-base::after {
  bottom: -14px;
  width: 34px;
  height: 5px;
  border-radius: 999px;
}

.press-hint {
  position: absolute;
  right: 0;
  bottom: 17px;
  left: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 1px 2px rgba(16, 76, 58, 0.16);
}

.parent-notice {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 15;
  width: min(360px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 16px;
  background: rgba(45, 68, 61, 0.92);
  color: #fffdf7;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 12px 26px rgba(29, 52, 44, 0.18);
  transform: translateX(-50%);
}

.audio-unlock-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(246, 242, 233, 0.88);
  backdrop-filter: blur(6px);
}

.audio-unlock-layer[hidden] {
  display: none;
}

.audio-unlock-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 208px;
  min-height: 64px;
  padding: 0 28px;
  border: 1px solid rgba(45, 139, 114, 0.14);
  border-radius: 999px;
  background: #fffdf8;
  color: #2d6d5a;
  font-size: 19px;
  font-weight: 700;
  box-shadow: 0 18px 36px rgba(52, 84, 73, 0.14);
  cursor: pointer;
}

.audio-unlock-button:active {
  transform: translateY(2px) scale(0.99);
}

.audio-unlock-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(45, 139, 114, 0.12);
}
.feedback-layer {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.feedback-glow {
  width: 118px;
  height: 118px;
  border: 2px solid rgba(239, 189, 98, 0.45);
  border-radius: 50%;
  opacity: 0;
}

.feedback-star {
  position: absolute;
  width: 46px;
  height: 46px;
  background: linear-gradient(145deg, #f7d684, var(--warm));
  filter: drop-shadow(0 7px 10px rgba(186, 133, 42, 0.18));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
}

.feedback-layer.light .feedback-star,
.feedback-star.light {
  animation: light-feedback 720ms ease;
}

.feedback-layer.transition .feedback-glow {
  border-color: rgba(146, 188, 208, 0.5);
  animation: transition-ring 760ms ease-out;
}

.feedback-layer.transition .feedback-star {
  background: linear-gradient(145deg, #f9dfa1, #92bcd0);
  animation: transition-spark 760ms ease;
}

.item-frame.transition {
  animation: transition-card 760ms ease;
}

.feedback-layer.light .feedback-glow {
  animation: feedback-ring 620ms ease-out;
}

.reward-celebration {
  position: fixed;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
  animation: reward-fade 1650ms ease forwards;
}

.reward-rainbow {
  position: absolute;
  top: 16%;
  left: 50%;
  width: min(64vw, 276px);
  height: min(30vw, 128px);
  border-radius: 300px 300px 0 0;
  background: radial-gradient(ellipse at 50% 100%, transparent 0 37%, rgba(142, 187, 208, 0.82) 38% 45%, rgba(139, 194, 172, 0.82) 46% 53%, rgba(246, 207, 119, 0.84) 54% 61%, rgba(231, 156, 140, 0.8) 62% 69%, transparent 70%);
  filter: drop-shadow(0 10px 20px rgba(82, 106, 96, 0.1));
  opacity: 0;
  transform: translateX(-50%) scale(0.82);
  animation: rainbow-arrive 1500ms ease forwards;
}

.reward-spark {
  --spark-color: var(--warm);
  position: absolute;
  width: 19px;
  height: 19px;
  background: var(--spark-color);
  filter: drop-shadow(0 4px 7px rgba(79, 99, 90, 0.12));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
  animation: reward-spark 1300ms ease-out forwards;
}

.debug-panel {
  position: fixed;
  pointer-events: none;
  z-index: 20;
  right: 10px;
  bottom: 10px;
  width: min(310px, calc(100vw - 20px));
  max-height: 70vh;
  padding: 12px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(21, 34, 30, 0.93);
  color: #f3f6f8;
  font-size: 12px;
  line-height: 1.45;
}

.debug-panel h2 {
  margin: 0 0 8px;
  font-size: 13px;
}

.debug-panel dl {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 4px 8px;
  margin: 0;
}

.debug-panel div {
  display: contents;
}

.debug-panel dt {
  color: #a7b0b8;
}

.debug-panel dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

@keyframes card-bounce {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-6px) scale(1.018); }
  72% { transform: translateY(1px) scale(0.995); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes light-feedback {
  0% { opacity: 0; transform: translateY(9px) scale(0.55) rotate(-8deg); }
  34% { opacity: 0.96; transform: translateY(0) scale(1) rotate(3deg); }
  100% { opacity: 0; transform: translateY(-13px) scale(1.18) rotate(8deg); }
}

@keyframes feedback-ring {
  0% { opacity: 0; transform: scale(0.5); }
  28% { opacity: 0.65; }
  100% { opacity: 0; transform: scale(1.24); }
}

@keyframes reward-card {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-7px) scale(1.022); }
  70% { transform: translateY(1px) scale(0.997); }
}

@keyframes collection-shimmer {
  0%, 100% { transform: scale(1); }
  45% { transform: translateY(-3px) scale(1.18); box-shadow: 0 0 0 7px rgba(239, 189, 98, 0.12), 0 4px 10px rgba(190, 137, 52, 0.18); }
}

@keyframes replay-ear {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(1px) scale(0.975); }
}

@keyframes ear-listen {
  0%, 100% { transform: scale(1); }
  38% { transform: scale(1.1) rotate(-3deg); }
  72% { transform: scale(0.99) rotate(2deg); }
}

@keyframes listening-ring {
  0% { inset: -8px; opacity: 0.72; }
  100% { inset: -25px; opacity: 0; }
}

@keyframes listening-breathe {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.72; transform: scale(1.045); }
}

@keyframes transition-ring {
  0% { opacity: 0; transform: scale(0.62); }
  32% { opacity: 0.55; }
  100% { opacity: 0; transform: scale(1.18); }
}

@keyframes transition-spark {
  0% { opacity: 0; transform: translateY(10px) scale(0.5); }
  35%, 68% { opacity: 0.86; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-16px) scale(0.75); }
}

@keyframes transition-card {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-4px) scale(1.012); }
}

@keyframes gentle-listen {
  0%, 100% { transform: translateY(0); box-shadow: var(--shadow); }
  50% { transform: translateY(-3px); box-shadow: 0 24px 58px rgba(57, 117, 96, 0.14), 0 0 0 7px rgba(109, 179, 153, 0.07); }
}

@keyframes rainbow-arrive {
  0% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(0.82); }
  24%, 72% { opacity: 0.94; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-5px) scale(1.02); }
}

@keyframes reward-spark {
  0% { opacity: 0; transform: translateY(12px) scale(0.45) rotate(-18deg); }
  28%, 68% { opacity: 0.9; transform: translateY(0) scale(1) rotate(5deg); }
  100% { opacity: 0; transform: translateY(-20px) scale(0.72) rotate(18deg); }
}

@keyframes reward-fade {
  0%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-height: 680px) {
  .app-shell {
    grid-template-rows: 32px minmax(0, 1fr) 48px 142px;
    padding-top: max(6px, env(safe-area-inset-top));
  }

  .microphone-button {
    width: 124px;
    height: 124px;
  }

  .microphone-pill {
    top: 23px;
    width: 29px;
    height: 45px;
  }

  .microphone-base {
    top: 47px;
    width: 49px;
    height: 34px;
  }

  .press-hint {
    bottom: 13px;
    font-size: 13px;
  }
}

@media (max-width: 350px) {
  .app-shell {
    padding-right: 14px;
    padding-left: 14px;
  }

  .replay-button {
    min-width: 120px;
    min-height: 43px;
    font-size: 15px;
  }
}

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