:root {
  color-scheme: light;
  font-family: "Arial Rounded MT Bold", "Avenir Next Rounded", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --cream: #fff3df;
  --ink: #4d331e;
  --green: #58ad55;
  --blue: #347ecb;
  --yellow: #ffc84d;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.9), transparent 42%),
    #f8edda;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }

.a-app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
}

.a-stage {
  --page-ratio: 1.39416;
  position: relative;
  width: min(calc(100vw - 12px), calc((100dvh - 12px) * var(--page-ratio)));
  height: min(calc(100dvh - 12px), calc((100vw - 12px) / var(--page-ratio)));
  aspect-ratio: var(--page-ratio);
  overflow: hidden;
  border-radius: clamp(18px, 2.2vw, 31px);
  background: var(--cream);
  box-shadow: 0 14px 38px rgba(124, 85, 39, .18);
  isolation: isolate;
  touch-action: manipulation;
}

.page-image,
.dynamic-layer,
.hotspot-layer,
.motion-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-image {
  z-index: 0;
  display: block;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.dynamic-layer { z-index: 2; pointer-events: none; }
.hotspot-layer { z-index: 4; }
.motion-layer { z-index: 5; pointer-events: none; overflow: hidden; }

.hotspot {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.hotspot:focus-visible {
  outline: none;
  box-shadow: none;
}

.hotspot.is-pressing { transform: scale(.97); }

.motion-clone {
  position: absolute;
  overflow: hidden;
  border-radius: 22%;
  transform-origin: 50% 78%;
  will-change: transform, filter, opacity;
}

.motion-clone::before {
  position: absolute;
  content: "";
  left: var(--image-left);
  top: var(--image-top);
  width: var(--stage-width);
  height: var(--stage-height);
  background-image: var(--page-image);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.motion-clone.is-bouncing { animation: exactBounce .62s cubic-bezier(.2,.84,.22,1) both; }
.motion-clone.is-wiggling { animation: exactWiggle .66s ease-in-out both; }
.motion-clone.is-celebrating { animation: exactCelebrate .9s cubic-bezier(.2,.8,.2,1) both; }
.motion-clone.is-wrong { animation: exactWrong .48s ease-in-out both; filter: saturate(.75); }

@keyframes exactBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  34% { transform: translateY(-8%) scale(1.035, .97); }
  62% { transform: translateY(1.5%) scale(.985, 1.02); }
}

@keyframes exactWiggle {
  0%,100% { transform: rotate(0); }
  24% { transform: rotate(-4deg) scale(1.025); }
  55% { transform: rotate(4deg) scale(1.04); }
  78% { transform: rotate(-2deg) scale(1.015); }
}

@keyframes exactCelebrate {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-10%) rotate(-3deg) scale(1.06); }
  55% { transform: translateY(-5%) rotate(3deg) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes exactWrong {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5%); }
  50% { transform: translateX(5%); }
  75% { transform: translateX(-3%); }
}

.word-bubble {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 5.5%;
  min-width: 180px;
  max-width: 72%;
  padding: clamp(8px, 1.4vw, 15px) clamp(16px, 2.4vw, 28px);
  border: clamp(3px, .35vw, 5px) solid rgba(255,255,255,.94);
  border-radius: 999px;
  background: linear-gradient(#69b9eb, #337fca);
  box-shadow: 0 6px 0 rgba(32, 85, 148, .34), 0 12px 24px rgba(64,52,32,.22);
  color: white;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 18px) scale(.9);
  transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.word-bubble strong {
  display: block;
  font-size: clamp(23px, 3vw, 42px);
  line-height: 1;
  text-shadow: 0 2px 0 rgba(18,77,136,.28);
}

.word-bubble span {
  display: block;
  margin-top: 4px;
  font-size: clamp(12px, 1.4vw, 19px);
}

.word-bubble.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

.toast {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 6%;
  max-width: 78%;
  padding: 10px 20px;
  border: 3px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: rgba(67, 54, 39, .88);
  box-shadow: 0 8px 22px rgba(80,55,29,.2);
  color: #fff;
  font-size: clamp(14px, 1.7vw, 22px);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -12px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.hold-progress {
  position: absolute;
  left: 20.4%;
  top: 75.3%;
  width: 49.4%;
  height: 10.2%;
  overflow: hidden;
  border-radius: 999px;
}

.hold-progress::after {
  content: "";
  position: absolute;
  inset: 7% auto 7% 1.8%;
  width: calc((96.4% * var(--hold, 0)));
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.08)), #7863cf;
  box-shadow: inset 0 2px 2px rgba(255,255,255,.48), 0 2px 4px rgba(77,54,133,.25);
  transition: width .04s linear;
}

.stats-minute-mask {
  position: absolute;
  left: 13.2%;
  top: 48.2%;
  width: 27.3%;
  height: 21.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 0 0 15px 15px;
  background: #f8eedb;
  color: #39332c;
  text-shadow: 0 1px 0 #fff;
}

.stats-minute-mask strong { font-size: clamp(34px, 5vw, 68px); line-height: 1; }
.stats-minute-mask span { align-self: flex-end; margin-bottom: 18%; font-size: clamp(13px, 1.6vw, 21px); }

.stats-words-mask {
  position: absolute;
  left: 48.4%;
  top: 27.7%;
  width: 43.4%;
  height: 41.1%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4.5%;
  padding: 1.5%;
  background: #f5e7cf;
}

.stats-word {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 6%;
  border-radius: clamp(8px, 1.3vw, 16px);
  background: linear-gradient(145deg, #fffaf0, #f7ead3);
  box-shadow: 0 2px 3px rgba(120,82,36,.17);
  color: #3b2e24;
  font-size: clamp(11px, 1.3vw, 18px);
  pointer-events: auto;
}

.stats-word img { width: 31%; max-height: 72%; object-fit: contain; }
.stats-word span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-word--empty { grid-column: 1 / -1; grid-row: 1 / -1; color: #8b765f; }

.setting-switch {
  position: absolute;
  left: 73.3%;
  width: 9.1%;
  height: 7.4%;
  border: 0;
  border-radius: 999px;
  background: #b9b5aa;
  box-shadow: inset 0 2px 4px rgba(74,62,48,.22);
  pointer-events: none;
}

.setting-switch::after {
  content: "";
  position: absolute;
  top: 8%;
  left: 6%;
  width: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(57,48,36,.32);
  transition: left .2s ease;
}

.setting-switch.is-on { background: #55b75a; }
.setting-switch.is-on::after { left: 51%; }
.setting-switch--language { top: 37.8%; }

.slider-overlay {
  position: absolute;
  left: 45.8%;
  width: 38.5%;
  height: 2.2%;
  border-radius: 999px;
  background: #d1cbc0;
  box-shadow: inset 0 1px 2px rgba(54,48,39,.18);
  overflow: visible;
}

.slider-overlay::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--value, 62%);
  border-radius: inherit;
  background: #3986cf;
}

.slider-overlay::after {
  content: "";
  position: absolute;
  left: calc(var(--value, 62%) - 2.3%);
  top: 50%;
  width: 5.3%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: #3e8bd2;
  box-shadow: 0 2px 4px rgba(49,73,90,.28);
  transform: translateY(-50%);
}

.slider-overlay--music { top: 57.7%; }
.slider-overlay--sound { top: 72.6%; }

.garage-tab-highlight {
  position: absolute;
  left: var(--tab-left);
  top: 82.6%;
  width: 27%;
  height: 15.5%;
  border: clamp(3px, .42vw, 6px) solid #69b35a;
  border-radius: clamp(12px, 1.8vw, 23px);
  box-shadow: 0 0 0 3px rgba(255,255,255,.85), 0 5px 10px rgba(89,64,35,.18);
  transition: left .25s ease;
}

.listening-pulse {
  position: absolute;
  left: 42.7%;
  top: 69.8%;
  width: 20.5%;
  aspect-ratio: 1;
  border: 5px solid rgba(255,255,255,.92);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(54,135,213,.48);
  animation: listeningPulse 1.1s ease-out infinite;
}

@keyframes listeningPulse {
  0% { box-shadow: 0 0 0 0 rgba(54,135,213,.5); transform: scale(.9); }
  75%,100% { box-shadow: 0 0 0 24px rgba(54,135,213,0); transform: scale(1.06); }
}

.orientation-notice {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: none;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 30px;
  background: #fff3df;
  color: #64472d;
  text-align: center;
}

.orientation-notice strong { font-size: 25px; }
.orientation-notice small { font-size: 16px; color: #8a725e; }
.orientation-device {
  width: 70px;
  height: 104px;
  padding: 8px;
  border: 5px solid #5ea985;
  border-radius: 14px;
  animation: turnDevice 2s ease-in-out infinite;
}
.orientation-device span { display: block; width: 100%; height: 100%; border-radius: 6px; background: #b9e4ef; }
@keyframes turnDevice { 0%,22% { transform: rotate(0); } 55%,100% { transform: rotate(90deg); } }

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

@media (orientation: portrait) and (max-width: 1024px) {
  .orientation-notice { display: grid; }
  .a-app { visibility: hidden; }
}

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