/* =====================================================
   Sanrio Say My Name - Game Styles
   =====================================================
   Fully responsive using dvh/dvw units.
   9:16 container scales to any screen size.
   ===================================================== */

/* ========================
   Custom Fonts
   ======================== */
@font-face {
  font-family: "AG Book Rounded";
  src: url("https://sanrio2026game-migration.mmdbfiles.com/sanrio2026game/assets/say-my-name/font/dfn/DFNYuanXBold-B5.TTC")
    format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* ========================
   CSS Custom Properties
   ======================== */
:root {
  --pink: #ffb6d9;
  --pink-light: #ffe5f0;
  --pink-dark: #ff9cc8;
  --accent: #e85489;
  --yellow: #ffd700;
  --yellow-text: #fedd15;
  --success: #66bb6a;
  --fail: #ef5350;
  --white: #ffffff;
  --black: #333333;
  --grey: #999999;
  --overlay: rgba(0, 0, 0, 0.5);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ========================
   Reset & Base
   ======================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--pink);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  pointer-events: none;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

/* ========================
   App Container
   ======================== */
/* 9:16 container — scales to fill any screen while keeping ratio. */
#app {
  position: relative;
  width: 100dvw;
  max-width: calc(100dvh * 9 / 16);
  aspect-ratio: 9 / 16;
  overflow: hidden;
}

/* ========================
   Mute / Unmute Button
   ======================== */
.mute-btn {
  position: absolute;
  top: min(1.8dvh, 3.2dvw);
  right: min(1.8dvh, 3.2dvw);
  z-index: 9999;
  width: min(6dvh, 10.7dvw);
  height: min(6dvh, 10.7dvw);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.mute-btn:active {
  transform: scale(0.88);
}

.mute-icon {
  /* Volume.png — graphic fills most of canvas, sized smaller */
  width: min(4.8dvh, 6dvw);
  height: min(4.8dvh, 6dvw);
  object-fit: contain;
  display: block;
  margin: auto;
  pointer-events: none;
  user-select: none;
}

.mute-btn.auto-muted .mute-icon {
  /* Volume.png pre-unlock: same size, just dimmed */
  opacity: 0.5;
}

.mute-btn.muted .mute-icon {
  /* Mute.png content fills 70% height vs Volume's 95% — scale up by 95/70 = 1.36x */
  width: min(6.5dvh, 9.5dvw);
  height: min(6.5dvh, 9.5dvw);
  max-width: none;
  opacity: 0.6;
}

/* ========================
   Screen System
   ======================== */
.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.screen.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* ========================
   HOME SCREEN
   ======================== */
#screen-home {
  background-color: #f8c8dc;
}

.home-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

/* ========================
   Home character animations
   ======================== */
@keyframes homeEntrance {
  0% {
    opacity: 0;
    transform: translateY(min(3.7dvh, 6.5dvw)) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes homeBtnPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.93);
  }
}

@keyframes homeTitlePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
}

/* Individual character bobbing animations */
@keyframes charMove1 {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}
@keyframes charMove2 {
  0%,
  100% {
    transform: translateY(0) rotate(1deg);
  }
  50% {
    transform: translateY(-10px) rotate(-2deg);
  }
}
@keyframes charMove3 {
  0%,
  100% {
    transform: translateY(0) rotate(0.5deg);
  }
  50% {
    transform: translateY(-7px) rotate(-1.5deg);
  }
}
@keyframes charMove4 {
  0%,
  100% {
    transform: translateY(0) rotate(-0.5deg);
  }
  50% {
    transform: translateY(-9px) rotate(1.5deg);
  }
}
@keyframes charMove5 {
  0%,
  100% {
    transform: translateY(0) rotate(1deg);
  }
  50% {
    transform: translateY(-6px) rotate(-2.5deg);
  }
}
@keyframes charMove6 {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}
@keyframes charMove7 {
  0%,
  100% {
    transform: translateY(0) rotate(0.8deg);
  }
  50% {
    transform: translateY(-8px) rotate(-1.8deg);
  }
}
@keyframes charMove8 {
  0%,
  100% {
    transform: translateY(0) rotate(-0.8deg);
  }
  50% {
    transform: translateY(-7px) rotate(2deg);
  }
}
@keyframes charMove9 {
  0%,
  100% {
    transform: translateY(0) rotate(1.2deg);
  }
  50% {
    transform: translateY(-9px) rotate(-1deg);
  }
}

.home-characters {
  position: absolute;
  top: 13%;
  left: 0;
  width: 100%;
  height: 57%;
  pointer-events: none;
}

.home-char-img {
  position: absolute;
  pointer-events: none;
  animation-fill-mode: both;
}

/* Character positions */
.home-char-1 {
  width: 35%;
  top: -1%;
  left: -3.5%;
  transform-origin: 50% 100%;
  animation:
    homeEntrance 0.6s ease-out 0.1s both,
    charMove1 2.8s ease-in-out 0.7s infinite;
}
.home-char-2 {
  width: 45%;
  top: -1%;
  left: 18%;
  transform-origin: 50% 100%;
  animation:
    homeEntrance 0.6s ease-out 0.25s both,
    charMove2 3.2s ease-in-out 0.85s infinite;
}
.home-char-3 {
  width: 60%;
  top: -8%;
  right: -12%;
  transform-origin: 50% 100%;
  animation:
    homeEntrance 0.6s ease-out 0.15s both,
    charMove3 2.6s ease-in-out 0.75s infinite;
}
.home-char-4 {
  width: 74%;
  top: 18.5%;
  left: -5%;
  z-index: 5;
  transform-origin: 30% 100%;
  animation:
    homeEntrance 0.7s ease-out 0.5s both,
    charMove4 3s ease-in-out 1.2s infinite;
}
.home-char-5 {
  width: 60%;
  top: 21%;
  right: -7%;
  transform-origin: 70% 100%;
  animation:
    homeEntrance 0.6s ease-out 0.35s both,
    charMove5 3.4s ease-in-out 0.95s infinite;
}
.home-char-6 {
  width: 45%;
  bottom: 13%;
  left: 7%;
  z-index: 6;
  transform-origin: 50% 100%;
  animation:
    homeEntrance 0.6s ease-out 0.4s both,
    charMove6 2.9s ease-in-out 1s infinite;
}
.home-char-7 {
  width: 50%;
  bottom: 10.5%;
  right: 4%;
  z-index: 6;
  transform-origin: 50% 100%;
  animation:
    homeEntrance 0.6s ease-out 0.3s both,
    charMove7 3.1s ease-in-out 0.9s infinite;
}
.home-char-8 {
  width: 57%;
  bottom: -24.5%;
  left: -2%;
  z-index: 8;
  transform-origin: 40% 100%;
  animation:
    homeEntrance 0.6s ease-out 0.45s both,
    charMove8 3.3s ease-in-out 1.05s infinite;
}
.home-char-9 {
  width: 59%;
  bottom: -24.5%;
  right: -1.5%;
  z-index: 7;
  transform-origin: 60% 100%;
  animation:
    homeEntrance 0.6s ease-out 0.55s both,
    charMove9 2.7s ease-in-out 1.15s infinite;
}

/* Home buttons */
.home-buttons {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 3%);
  left: 35%;
  width: 35%;
  display: flex;
  justify-content: center;
}

.home-btn {
  width: 100%;
  transition: transform 0.12s ease;
  pointer-events: auto;
}

.home-btn:active {
  transform: scale(0.92) !important;
  animation: none;
}

.home-btn img {
  width: 100%;
  pointer-events: none;
}

/* Title layers scale zoom animation */
.home-title-anim {
  animation: homeTitlePulse 2s ease-in-out 0.8s infinite;
}

.home-btn-start {
  animation:
    homeEntrance 0.6s ease-out 0.7s both,
    homeBtnPulse 2s ease-in-out 1.3s infinite;
}

/* ========================
   INSTRUCTIONS POPUP
   ======================== */
.popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.popup.active {
  opacity: 1;
  visibility: visible;
}

.popup-card {
  position: relative;
  width: 90%;
  max-height: 85%;
  background: var(--white);
  border-radius: min(3dvh, 5.3dvw);
  padding: min(2dvh, 3.5dvw) min(1dvh, 1.3dvw) min(2dvh, 3.5dvw)
    min(2dvh, 4.3dvw);
  box-shadow: 0 min(1.5dvh, 2.6dvw) min(5dvh, 8.8dvw) rgba(0, 0, 0, 0.25);
  transform: translateY(min(2.5dvh, 4.4dvw)) scale(0.95);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.instructions-card {
  border: min(0.5dvh, 0.9dvw) solid var(--accent);
  width: 92%;
  max-height: 95%;
  overflow-y: hidden;
}

.popup.active .popup-card {
  transform: translateY(0) scale(1);
}

.popup-close {
  position: absolute;
  top: min(1.5dvh, 2.6dvw);
  right: min(2dvh, 3.5dvw);
  font-size: min(3.5dvh, 6.1dvw);
  color: var(--grey);
  line-height: 1;
  z-index: 2;
}

.popup-title {
  text-align: center;
  font-size: min(2.8dvh, 4.9dvw);
  font-weight: 700;
  color: #4a90d9;
  margin-bottom: min(1dvh, 1.7dvw);
}

.instruction-mock-text {
  font-size: min(1.9dvh, 3.3dvw);
  color: #4a90d9;
  line-height: 1.7;
  font-weight: 600;
  margin-bottom: min(1.2dvh, 2dvw);
  text-align: justify;
  word-break: normal;
  overflow-wrap: break-word;
  padding: 0 min(1dvh, 1dvw) 0 0;
}

.instruction-steps {
  list-style: none;
  padding: 0;
}

.instruction-steps li {
  display: flex;
  align-items: flex-start;
  gap: min(1.5dvh, 2.6dvw);
  margin-bottom: min(2dvh, 3.5dvw);
  font-size: min(1.85dvh, 3.3dvw);
  color: var(--black);
  line-height: 1.5;
}

.step-icon {
  flex-shrink: 0;
  width: min(4dvh, 7dvw);
  height: min(4dvh, 7dvw);
  border-radius: 50%;
  background: var(--pink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(2dvh, 3.5dvw);
}

.instruction-tiers {
  background: var(--pink-light);
  border-radius: min(1.5dvh, 2.6dvw);
  padding: min(1.5dvh, 2.6dvw) min(2dvh, 3.5dvw);
  margin: min(1.5dvh, 2.6dvw) 0 min(2.5dvh, 4.4dvw);
  font-size: min(1.7dvh, 3dvw);
  color: var(--black);
  line-height: 1.6;
  text-align: center;
}

.popup-btn-start {
  display: block;
  width: 100%;
  padding: min(1.7dvh, 3dvw);
  background: linear-gradient(135deg, var(--pink), var(--accent));
  color: var(--white);
  font-size: min(2.2dvh, 3.9dvw);
  font-weight: 600;
  border-radius: min(3.7dvh, 6.5dvw);
  text-align: center;
  transition: transform 0.15s ease;
}

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

/* Instruction popup — game preview video */
.instruction-preview {
  position: relative;
  width: 60%;
  margin: 0 auto min(0.8dvh, 1.4dvw);
  border-radius: min(1.5dvh, 2.6dvw);
  overflow: hidden;
}

.instr-prev-video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: min(1.5dvh, 2.6dvw);
  background: #fae5ee;
}

/* Start button — image-based, same size & animation as home btn */
.popup-btn-into {
  display: block;
  width: 45%;
  margin: 0 auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  animation: homeBtnPulse 2s ease-in-out 0.5s infinite;
}

.popup-btn-into-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.popup-btn-into:active {
  transform: scale(0.92) !important;
  animation: none;
}

/* Custom text button — pink border, blue text, white bg */
.popup-btn-custom {
  display: block;
  width: 50%;
  margin: min(1.5dvh, 2.6dvw) auto 0;
  padding: min(1.4dvh, 2.5dvw) min(2dvh, 3.5dvw);
  background: var(--white);
  color: #2678bd;
  font-family: "AG Book Rounded", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: min(3.6dvh, 5.6dvw);
  font-weight: 700;
  letter-spacing: 0.1em;
  border: min(0.5dvh, 0.8dvw) solid var(--accent);
  border-radius: min(1.5dvh, 5.8dvw);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
  animation: homeBtnPulse 2s ease-in-out 0.5s infinite;
}

.popup-btn-custom:active {
  transform: scale(0.92) !important;
  animation: none;
}

/* Image-based popup button */
.popup-btn-img {
  display: block;
  width: 45%;
  margin: min(0.8dvh, 1.4dvw) auto 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
  animation: homeBtnPulse 2s ease-in-out 0.5s infinite;
}
.popup-btn-img img {
  width: 100%;
  display: block;
  pointer-events: none;
}
.popup-btn-img:active {
  transform: scale(0.92) !important;
  animation: none;
}

/* More popup — asset-based layout */
.popup-more-card {
  position: relative;
  width: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(min(2.5dvh, 4.4dvw)) scale(0.95);
  transition: transform 0.3s ease;
}

.popup.active .popup-more-card {
  transform: translateY(0) scale(1);
}

.popup-more-bg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: min(2dvh, 3.5dvw);
}

.popup-more-deco {
  position: absolute;
  width: 85%;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  animation:
    tierCharSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
    tierCharBounce 3s ease-in-out 1.1s infinite;
}

.popup-more-btn {
  position: absolute;
  bottom: 3%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 35%;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease;
  animation: homeBtnPulse 2s ease-in-out 0.5s infinite;
}

.popup-more-btn img {
  width: 100%;
  display: block;
  pointer-events: none;
}

.popup-more-btn:active {
  transform: scale(0.92) !important;
  animation: none;
}

/* ========================
   GAME SCREEN
   ======================== */
#screen-game {
  background: #fae5ee;
}

/* Background layer: solid color base + animated floating image on top */
.game-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  /* Normal state base color */
  background-color: #fae5ee;
  transition: background-color 0.6s ease;
}

/* Win state: switch base color */
.game-bg-layer.win-bg {
  background-color: #ffb6d9;
}

/* Animated floating overlay container (always animating, up/down drift) */
.game-bg-anim {
  position: absolute;
  top: -8%;
  left: -3%;
  width: 103%;
  height: 100%;
  pointer-events: none;
  animation: bgFloat 4s ease-in-out infinite alternate;
}

/* Both bg images are stacked, enlarged, and float together */
.game-bg-anim-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease;
}

/* Normal bg flowers: visible by default */
.game-bg-anim-default {
  opacity: 1;
}

/* Win bg flowers: hidden by default, shown on success */
.game-bg-anim-win {
  opacity: 0;
}

/* On win: swap which image is visible */
.game-bg-layer.win-bg .game-bg-anim-default {
  opacity: 0;
}

.game-bg-layer.win-bg .game-bg-anim-win {
  opacity: 1;
}

@keyframes bgFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-7%);
  }
}

/* 3-2-1 countdown overlay */
.game-countdown {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.game-countdown.hidden {
  display: none;
}

.game-countdown span {
  font-size: min(25dvh, 44dvw);
  font-weight: 900;
  font-family: "AG Book Rounded", sans-serif;
  color: white;
  -webkit-text-stroke: min(1dvh, 1.4dvw) #e85489;
  paint-order: stroke fill;
  text-shadow: 0 min(0.25dvh, 0.4dvw) min(0.7dvh, 1.3dvw) rgba(0, 0, 0, 0.12);
  letter-spacing: min(0.4dvh, 0.7dvw);
  animation: countdownPop 0.35s ease-out both;
}

.game-countdown span.ready-go-text {
  font-size: min(10dvh, 17.8dvw);
  -webkit-text-stroke: min(1dvh, 1.4dvw) #e85489;
  letter-spacing: min(0.3dvh, 0.5dvw);
}

@keyframes countdownPop {
  0% {
    transform: scale(1.8);
    opacity: 0;
  }
  60% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Game header - hidden per design */
.game-header {
  display: none;
}

.progress-dots {
  display: flex;
  gap: min(1dvh, 1.7dvw);
}

.progress-dot {
  width: min(3.5dvh, 6.1dvw);
  height: min(3.5dvh, 6.1dvw);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: min(0.25dvh, 0.4dvw) solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(1.5dvh, 2.6dvw);
  font-weight: 700;
}

.progress-dot.current {
  background: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 min(0.4dvh, 0.7dvw) rgba(255, 107, 177, 0.3);
}

.progress-dot.success {
  background: var(--success);
  border-color: var(--success);
  color: var(--white);
}

.progress-dot.fail {
  background: var(--fail);
  border-color: var(--fail);
  color: var(--white);
}

.score-badge {
  background: var(--white);
  border-radius: min(2.5dvh, 4.4dvw);
  padding: min(0.5dvh, 0.9dvw) min(2dvh, 3.5dvw);
  font-size: min(2dvh, 3.5dvw);
  font-weight: 700;
  color: var(--accent);
  box-shadow: 0 min(0.25dvh, 0.4dvw) min(1dvh, 1.7dvw) rgba(0, 0, 0, 0.1);
}

/* Track area */
.track-area {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
}

#screen-game.active {
  overflow: visible;
}
#screen-game .track-area {
  overflow: visible;
}

.track-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Character walker */
#character-walker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: 62%;
  pointer-events: none;
  will-change: transform, bottom, left;
}

/* Rocking animation */
#character-rocker {
  transform-origin: center bottom;
}

#character-rocker.rocking {
  animation: rock 0.5s ease-in-out infinite;
}

@keyframes rock {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

#game-character-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 min(1dvh, 1.7dvw) min(2dvh, 3.5dvw) rgba(0, 0, 0, 0.2));
}

/* Rope collision shake */
#character-walker.rope-shake {
  animation: ropeCollisionShake 0.45s ease-out;
}

@keyframes ropeCollisionShake {
  0% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(0deg);
  }
  10% {
    transform: translateX(-50%) scale(calc(var(--end-scale, 1.15) * 1.02))
      rotate(-3deg) translateY(2px);
  }
  20% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(3deg)
      translateY(-3px);
  }
  30% {
    transform: translateX(-50%) scale(calc(var(--end-scale, 1.15) * 1.01))
      rotate(-2deg) translateY(2px);
  }
  40% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(2deg)
      translateY(-2px);
  }
  50% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(-1deg)
      translateY(1px);
  }
  60% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(1deg);
  }
  80%,
  100% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(0deg);
  }
}

/* Fail bounce back */
#character-walker.fail-bounce-back {
  animation: failBounceBack 0.7s ease-out forwards;
}

@keyframes failBounceBack {
  0% {
    transform: translateX(-50%) scale(1);
  }
  20% {
    transform: translateX(-50%) scale(1.02) translateY(5px);
  }
  40% {
    transform: translateX(-50%) scale(0.9) translateY(-20px);
  }
  60% {
    transform: translateX(-50%) scale(0.93) translateY(-12px);
  }
  80% {
    transform: translateX(-50%) scale(0.91) translateY(-16px);
  }
  100% {
    transform: translateX(-50%) scale(0.92) translateY(-14px);
  }
}

/* Fail stuck */
#character-walker.fail-stuck {
  animation: stuckStruggle 0.45s ease-out;
}

@keyframes stuckStruggle {
  0% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(0deg);
  }
  10% {
    transform: translateX(-50%) scale(calc(var(--end-scale, 1.15) * 1.02))
      rotate(-3deg) translateY(2px);
  }
  20% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(3deg)
      translateY(-3px);
  }
  30% {
    transform: translateX(-50%) scale(calc(var(--end-scale, 1.15) * 1.01))
      rotate(-2deg) translateY(2px);
  }
  40% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(2deg)
      translateY(-2px);
  }
  50% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(-1deg)
      translateY(1px);
  }
  60% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(1deg);
  }
  80%,
  100% {
    transform: translateX(-50%) scale(var(--end-scale, 1.15)) rotate(0deg);
  }
}

/* Rope wobble */
.finish-line.rope-hit {
  animation: ropeWobble 0.5s ease-out;
}

@keyframes ropeWobble {
  0%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(min(0.6dvh, 1.1dvw));
  }
  50% {
    transform: translateY(min(-0.4dvh, -0.7dvw));
  }
  75% {
    transform: translateY(min(0.25dvh, 0.4dvw));
  }
}

/* Finish line / Rope */
.finish-line {
  position: absolute;
  bottom: 14%;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  animation: rope-bob 5s infinite ease-in-out;
}

.rope-piece {
  width: 54%;
  height: auto;
  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.5s ease;
}

#rope-left {
  transform: translateX(6.4%);
}
#rope-right {
  transform: translateX(-6.2%) translateY(1%);
}
#rope-left.broken {
  transform: translateX(-10%) rotate(15deg);
}
#rope-right.broken {
  transform: translateX(10%) rotate(-15deg);
}

@keyframes rope-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(min(1.2dvh, 2.2dvw));
  }
}

/* Win effect */
.win-effect {
  display: none !important;
}

/* Stars above character */
.win-stars {
  position: absolute;
  top: -40%;
  left: 50%;
  --star-rotate: 0deg;
  transform: translateX(-50%) scale(0) rotate(var(--star-rotate));
  width: 120%;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}

.win-stars.show {
  transform: translateX(-50%) scale(1) rotate(var(--star-rotate));
  opacity: 1;
}

/* ========================
   Win Background Overlay
   ======================== */
.win-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: radial-gradient(
    ellipse at 50% 90%,
    rgba(255, 215, 0, 0.35) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.win-bg-overlay.show {
  opacity: 1;
}

/* ========================
   Game Bottom Overlay
   ======================== */
.game-bottom-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: min(1dvh, 1.7dvw) 4% calc(var(--safe-bottom) + 1.5%);
  pointer-events: none;
}

.game-bottom-overlay > * {
  pointer-events: auto;
}

/* Character name row */
.character-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.2dvh, 2.2dvw);
  background: none;
  border-radius: 0;
  padding: min(0.5dvh, 0.9dvw) 0;
  box-shadow: none;
  margin-bottom: min(1dvh, 1.7dvw);
  max-width: 100%;
  white-space: nowrap;
}

.character-name-row.hidden {
  visibility: hidden;
}

/* Character name text — uniform size, auto-shrink to fit via CSS */
.char-name-text {
  font-family: "AG Book Rounded", sans-serif;
  font-size: min(5dvh, 8.8dvw);
  margin-bottom: min(1.2dvh, 2.2dvw);
  font-weight: 400;
  color: white;
  -webkit-text-stroke: min(0.55dvh, 1dvw) #000;
  paint-order: stroke fill;
  text-shadow: 0 min(0.25dvh, 0.4dvw) min(0.7dvh, 1.3dvw) rgba(0, 0, 0, 0.12);
  letter-spacing: min(0.3dvh, 0.5dvw);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.1;
  padding: 0 1%;
  max-width: 96%;
}

/* ─────────────────────────────────────────
   Syllable highlight spans (Azure feedback)
   ───────────────────────────────────────── */

/* Individual syllable — inherits all font/stroke from .char-name-text */
.char-syllable {
  display: inline;
  transition:
    -webkit-text-stroke-color 0.35s ease,
    color 0.35s ease;
}

/* Correct syllable — green fill with white stroke (outlined) */
.char-syllable.syl-correct {
  -webkit-text-stroke-color: #fff;
  color: #1b9e3c;
}

/* Wrong syllable — red fill with white stroke (outlined) */
.char-syllable.syl-wrong {
  -webkit-text-stroke-color: #fff;
  color: #f21818;
}

/* Separator between syllables (space / hyphen / dot / bullet).
   Inherits stroke + color from parent so it animates with neighbors. */
.char-syllable-space {
  display: inline;
  transition:
    -webkit-text-stroke-color 0.35s ease,
    color 0.35s ease;
}

/* Tight period separator (e.g. "U.SA.HA.NA") — cancel letter-spacing */
.char-syllable-space.sep-dot {
  letter-spacing: 0;
  margin-right: -0.1em;
  margin-left: 0.05em;
}

/* Correct/wrong separator mirrors syllable styling */
.char-syllable-space.syl-correct {
  -webkit-text-stroke-color: #fff;
  color: #1b9e3c;
}
.char-syllable-space.syl-wrong {
  -webkit-text-stroke-color: #fff;
  color: #f21818;
}

/* Macron: base Latin letter with an overline drawn above it using the
   same stroke colour as the parent syllable. Keeps webfont consistent. */
.char-syllable .macron {
  position: relative;
  display: inline-block;
}
/* Macron bar: mirrors text style — outlined (white fill + colored border)
   in neutral/correct state, solid red in wrong state. */
.char-syllable .macron::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: -0.1em;
  height: 0.18em;
  background: #fff;
  border: 0.05em solid #000;
  border-radius: 0.12em;
  box-sizing: border-box;
}
.char-syllable.syl-correct .macron::before {
  background: #1b9e3c;
  border-color: #fff;
}
.char-syllable.syl-wrong .macron::before {
  background: #f21818;
  border-color: #fff;
}

/* Voice pronunciation button - hidden */
.voice-btn {
  display: none !important;
}

/* Star mic button */
.star-mic-btn {
  width: min(14.8dvh, 26dvw);
  height: min(14.8dvh, 26dvw);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
  pointer-events: auto;
  position: absolute;
  right: 2%;
  bottom: 20%;
  z-index: 12;
  /* Amplitude ring — driven by JS via CSS custom property */
  --mic-amp: 0;
}

/* Mic SVG container */
#mic-img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#mic-img > svg {
  width: 100%;
  height: 100%;
}

/* SVG path transitions */
.star-mic-btn #mic-img path {
  transition: all 0.3s;
}

/* Disabled: dimmed, no interaction, no animation */
.star-mic-btn.disabled {
  pointer-events: none;
  opacity: 0.35;
  animation: none !important;
  transform: none !important;
  transition: opacity 0.3s ease !important;
}

/* Enabled (ready to tap): slightly dimmed, static, no animation */
.star-mic-btn.enabled {
  opacity: 0.35;
}
.star-mic-btn.enabled:active {
  transform: scale(0.9);
}

/* OFF state: static green fills */
.star-mic-btn:not(.listening) #Path_7 {
  fill: #08b459;
}
.star-mic-btn:not(.listening) #Path_3 {
  stroke: #08b459;
}
.star-mic-btn:not(.listening) #Path_4,
.star-mic-btn:not(.listening) #Path_5,
.star-mic-btn:not(.listening) #Path_6 {
  fill: #08b459;
}

/* Listening (recording): full opacity, scale pulse animation */
.star-mic-btn.listening {
  pointer-events: auto;
  opacity: 1;
  animation: micListenPulse 1s ease-in-out infinite;
}

/* ON state: animated stroke on star outline */
.star-mic-btn.listening #Path_3 {
  animation: strokeGradient 2s linear infinite;
}

/* ON state: staggered fill animations on inner arcs */
.star-mic-btn.listening #Path_4 {
  animation: fillGradient3 1s linear infinite;
}
.star-mic-btn.listening #Path_5 {
  animation: fillGradient2 1s linear infinite;
}
.star-mic-btn.listening #Path_6 {
  animation: fillGradient 1s linear infinite;
}

/* ON state: dark green fill on mic base */
.star-mic-btn.listening #Path_8 {
  fill: #009345;
}

/* Listen pulse: scale breathing when mic is ON/recording */
@keyframes micListenPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Stroke color cycle: green ↔ dark green */
@keyframes strokeGradient {
  0%,
  100% {
    stroke: #08b459;
  }
  50% {
    stroke: #009345;
  }
}

/* Fill color cycles (staggered phases) */
@keyframes fillGradient {
  0%,
  50% {
    fill: #08b459;
  }
  25% {
    fill: #009345;
  }
}

@keyframes fillGradient2 {
  25%,
  75% {
    fill: #08b459;
  }
  50% {
    fill: #009345;
  }
}

@keyframes fillGradient3 {
  50%,
  100% {
    fill: #08b459;
  }
  75% {
    fill: #009345;
  }
}

/* Try Again toast — top center */
#try-again-toast {
  position: fixed;
  top: 8dvh;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  font-family: "AG Book Rounded", sans-serif;
  font-weight: 400;
  font-size: min(6dvh, 10dvw);
  color: #fff;
  -webkit-text-stroke: min(0.7dvh, 1.3dvw) #f21818;
  paint-order: stroke fill;
  text-shadow: 0 min(0.3dvh, 0.5dvw) min(0.9dvh, 1.6dvw) rgba(0, 0, 0, 0.18);
  letter-spacing: min(0.3dvh, 0.5dvw);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.1;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}
#try-again-toast.visible {
  opacity: 1;
}

/* "打氣中" analyzing toast — solid white, shadow, gentle float */
#analyzing-toast {
  position: fixed;
  top: 8dvh;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  font-family: "AG Book Rounded", sans-serif;
  font-weight: 400;
  font-size: min(8dvh, 14dvw);
  color: #fff;
  -webkit-text-stroke: none;
  paint-order: stroke fill;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);
  letter-spacing: min(0.4dvh, 0.7dvw);
  white-space: nowrap;
  line-height: 1.1;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}
#analyzing-toast.visible {
  opacity: 1;
  animation: analyzingFloat 0.7s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes analyzingFloat {
  from {
    transform: translateX(-50%) translateY(4px) scale(0.95);
  }
  to {
    transform: translateX(-50%) translateY(-12px) scale(1.1);
  }
}

/* Amplitude ring — expands with voice volume */
.star-mic-btn.listening::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(1 + var(--mic-amp) * 0.6));
  background: radial-gradient(
    circle,
    rgba(255, 107, 177, calc(0.15 + var(--mic-amp) * 0.35)) 30%,
    rgba(255, 107, 177, 0) 70%
  );
  pointer-events: none;
  transition: transform 0.08s ease-out;
}

/* Mic label - hidden */
.mic-label {
  display: none !important;
}

/* Listening indicator dots */
.listening-indicator {
  display: flex;
  justify-content: center;
  gap: min(0.7dvh, 1.3dvw);
  margin-top: min(0.7dvh, 1.3dvw);
}

.listening-indicator.hidden {
  display: none;
}

.listening-dot {
  width: min(1dvh, 1.7dvw);
  height: min(1dvh, 1.7dvw);
  border-radius: 50%;
  background: var(--accent);
  animation: dotPulse 1.2s ease-in-out infinite;
}

.listening-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.listening-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotPulse {
  0%,
  60%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  30% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Volume bars */
.volume-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: min(0.5dvh, 0.9dvw);
  height: min(4dvh, 7dvw);
  margin-top: min(0.7dvh, 1.3dvw);
}

.volume-bars.hidden {
  display: none;
}

.vol-bar {
  width: min(0.6dvh, 1.1dvw);
  height: 15%;
  background: var(--accent);
  border-radius: min(0.4dvh, 0.7dvw);
  transition: height 0.08s ease-out;
  min-height: min(0.4dvh, 0.7dvw);
}

/* Speech feedback — hidden */
.speech-feedback {
  display: none !important;
}
.feedback-sub {
  display: none !important;
}
.speech-feedback.hidden {
  display: none;
}

.speech-feedback.success {
  background: rgba(102, 187, 106, 0.2);
  color: var(--success);
}
.speech-feedback.fail {
  background: rgba(239, 83, 80, 0.2);
  color: var(--fail);
}

/* Continue button — hidden */
.btn-continue {
  display: none !important;
}

/* Text input fallback */
.text-input-fallback {
  display: flex;
  gap: min(1dvh, 1.7dvw);
  margin-top: min(1dvh, 1.7dvw);
  width: 100%;
  max-width: 75%;
}

.text-input-fallback.hidden {
  display: none;
}

.text-input-fallback input {
  flex: 1;
  padding: min(1.2dvh, 2.2dvw) min(2dvh, 3.5dvw);
  border: min(0.25dvh, 0.4dvw) solid var(--pink);
  border-radius: min(2.5dvh, 4.4dvw);
  font-size: min(1.85dvh, 3.3dvw);
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}

.text-input-fallback input:focus {
  border-color: var(--accent);
}

.text-input-fallback button {
  padding: min(1.2dvh, 2.2dvw) min(2.2dvh, 3.9dvw);
  background: var(--accent);
  color: var(--white);
  border-radius: min(2.5dvh, 4.4dvw);
  font-size: min(1.7dvh, 3dvw);
  font-weight: 600;
  white-space: nowrap;
}

/* ========================
   TIER RESULT SCREEN
   ======================== */
.tier-layer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  pointer-events: none;
}

.tier-bg {
  z-index: 0;
  width: 100%;
  left: 0;
  transform: none;
  object-fit: cover;
  aspect-ratio: auto;
}

.tier-top-title {
  z-index: 1;
}
.tier-middle-title {
  z-index: 2;
}
.tier-bottom-title {
  z-index: 3;
}

.tier-content {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--safe-top) + 1%) 5% calc(var(--safe-bottom) + 1.5%);
  overflow: hidden;
}

/* Character image — large, centered in middle area */
.tier-character-img {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  height: 48%;
  object-fit: contain;
  z-index: 6;
  pointer-events: none;
  animation:
    tierCharSlideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
    tierCharBounce 3s ease-in-out 1.1s infinite;
}

@keyframes tierCharSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(15%) scale(0.7);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes tierCharBounce {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-1.2%) scale(1.015);
  }
}

/* Bottom group: tier text + share + CTA — flex column pinned to bottom */
.tier-bottom-group {
  position: absolute;
  bottom: calc(var(--safe-bottom) + 2%);
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(1.5dvh, 2.3dvw);
  z-index: 7;
  pointer-events: none;
  animation: tierBottomSlideUp 0.6s ease-out 0.7s both;
}

@keyframes tierBottomSlideUp {
  0% {
    opacity: 0;
    transform: translateY(min(3dvh, 5.3dvw));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.tier-bottom-group > * {
  pointer-events: auto;
}

/* Tier text label */
.tier-text-img {
  width: 90%;
  object-fit: contain;
  pointer-events: none;
}

/* Award wrapper — used for JS hidden toggle */
.tier-award {
  display: block;
}

.tier-award.hidden {
  display: none;
}
.tier-award.hidden ~ .tier-character-img,
.tier-award.hidden ~ .tier-bottom-group {
  display: none;
}

/* tier-stats removed */

/* Tier bottom buttons — same size & animation as home start button */
.tier-cta-buttons {
  display: flex;
  gap: 4%;
  justify-content: center;
  width: 80%;
}

.tier-cta-btn {
  width: 35%;
  transition: transform 0.12s ease;
  pointer-events: auto;
  animation: homeBtnPulse 2s ease-in-out 0.5s infinite;
}

.tier-cta-btn:active {
  transform: scale(0.92) !important;
  animation: none;
}

.tier-cta-btn img {
  width: 100%;
  pointer-events: none;
}

.tier-play-again {
  padding: min(1.5dvh, 2.6dvw) min(4dvh, 7dvw);
  background: linear-gradient(135deg, var(--pink), var(--accent));
  color: var(--white);
  font-size: min(2dvh, 3.5dvw);
  font-weight: 600;
  border-radius: min(3.7dvh, 6.5dvw);
  margin-bottom: min(1.2dvh, 2.2dvw);
  transition: transform 0.15s ease;
  pointer-events: auto;
}

.tier-play-again:active {
  transform: scale(0.95);
}

/* Share buttons */
.share-buttons {
  display: flex;
  gap: min(2.5dvh, 4.4dvw);
  justify-content: center;
}

.share-btn {
  width: min(4dvh, 7dvw);
  height: min(4dvh, 7dvw);
  transition: transform 0.15s ease;
  pointer-events: auto;
}

.share-btn:active {
  transform: scale(0.9);
}

.share-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
/* ========================
   UTILITY CLASSES
   ======================== */
.hidden {
  display: none !important;
}

/* Landscape: 9:16 container handles it naturally (narrow centered column) */