#app {
  min-height: 100%;
  background: #f7cf4b;
  color: #241b12;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

button {
  box-sizing: border-box;
}

button::after { border: 0; }

/* Every illustrated sticker gets the same paper-cut white edge. */
.sticker-art {
  filter:
    drop-shadow(calc(min(100vw, 440px) * -3 / 750) calc(min(100vw, 440px) * -3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * 3 / 750) calc(min(100vw, 440px) * -3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * -3 / 750) calc(min(100vw, 440px) * 3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * 3 / 750) calc(min(100vw, 440px) * 3 / 750) 0 #fffdf4)
    drop-shadow(calc(min(100vw, 440px) * 6 / 750) calc(min(100vw, 440px) * 8 / 750) 0 rgba(37, 28, 19, .14)) !important;
}

.safe-top { height: env(safe-area-inset-top); }

.primary-button {
  height: calc(min(100vw, 440px) * 104 / 750);
  border-radius: calc(min(100vw, 440px) * 52 / 750);
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(min(100vw, 440px) * 4 / 750) solid #2a2119;
  color: #fffaf0;
  font-size: calc(min(100vw, 440px) * 30 / 750);
  font-weight: 700;
  letter-spacing: calc(min(100vw, 440px) * 2 / 750);
  background: #2a2119;
  box-shadow: 0 calc(min(100vw, 440px) * 12 / 750) 0 #fff1c2;
}

.primary-button[disabled] { opacity: 0.55; }

.ghost-button {
  height: calc(min(100vw, 440px) * 88 / 750);
  border-radius: calc(min(100vw, 440px) * 44 / 750);
  border: calc(min(100vw, 440px) * 3 / 750) solid #2a2119;
  background: #fff8e7;
  color: #2a2119;
  font-size: calc(min(100vw, 440px) * 28 / 750);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shared one-shot sheen for card surfaces. */
.quick-shine {
  position: relative;
  overflow: hidden;
}

.quick-shine::after {
  content: '';
  position: absolute;
  z-index: 30;
  top: -20%;
  bottom: -20%;
  left: -45%;
  width: 36%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: translate3d(-180%, 0, 0) skewX(-14deg);
  animation: quick-card-shine 680ms 100ms ease-out both;
}

@keyframes quick-card-shine {
  0% { opacity: 0; transform: translate3d(-180%, 0, 0) skewX(-14deg); }
  24% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(520%, 0, 0) skewX(-14deg); }
}

.smoke-page {
  position: relative;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: #f7cf4b;
  color: #251c13;
}

.paper-grain {
  position: absolute;
  inset: 0;
  opacity: .1;
  background-image: radial-gradient(#251c13 calc(min(100vw, 440px) * 1 / 750), transparent calc(min(100vw, 440px) * 1 / 750));
  background-size: calc(min(100vw, 440px) * 18 / 750) calc(min(100vw, 440px) * 18 / 750);
  pointer-events: none;
}

.game-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  box-sizing: border-box;
  padding: calc(min(100vw, 440px) * 58 / 750) calc(min(100vw, 440px) * 28 / 750) calc(calc(min(100vw, 440px) * 42 / 750) + env(safe-area-inset-bottom));
}

.page-heading { text-align: center; }
.eyebrow { display: block; font-size: calc(min(100vw, 440px) * 18 / 750); font-weight: 900; letter-spacing: calc(min(100vw, 440px) * 4 / 750); opacity: .56; }
.page-title { display: block; margin-top: calc(min(100vw, 440px) * 7 / 750); font-size: calc(min(100vw, 440px) * 48 / 750); line-height: 1.08; font-weight: 950; letter-spacing: calc(min(100vw, 440px) * 2 / 750); }
.page-lead { display: block; margin-top: calc(min(100vw, 440px) * 8 / 750); font-size: calc(min(100vw, 440px) * 25 / 750); font-weight: 800; color: #6f5217; }

.round-status {
  width: max-content;
  margin: calc(min(100vw, 440px) * 24 / 750) auto 0;
  padding: calc(min(100vw, 440px) * 12 / 750) calc(min(100vw, 440px) * 24 / 750);
  border: calc(min(100vw, 440px) * 3 / 750) solid #251c13;
  border-radius: calc(min(100vw, 440px) * 999 / 750);
  background: #fff7df;
  box-shadow: calc(min(100vw, 440px) * 4 / 750) calc(min(100vw, 440px) * 5 / 750) 0 rgba(37, 28, 19, .9);
  font-size: calc(min(100vw, 440px) * 22 / 750);
  font-weight: 900;
}
.round-unlimited { margin-left: calc(min(100vw, 440px) * 16 / 750); color: #a54a30; }

.duel-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  margin-top: calc(min(100vw, 440px) * 30 / 750);
}

.talk-bubble {
  position: relative;
  box-sizing: border-box;
  padding: calc(min(100vw, 440px) * 20 / 750) calc(min(100vw, 440px) * 24 / 750);
  border: calc(min(100vw, 440px) * 3 / 750) solid #251c13;
  border-radius: calc(min(100vw, 440px) * 28 / 750);
  background: #fff7df;
  box-shadow: calc(min(100vw, 440px) * 6 / 750) calc(min(100vw, 440px) * 7 / 750) 0 rgba(37, 28, 19, .92);
  font-size: calc(min(100vw, 440px) * 24 / 750);
  line-height: 1.42;
  font-weight: 900;
  text-align: center;
  animation: bubble-pop .42s cubic-bezier(.2, .86, .26, 1.18) both;
}

.talk-bubble::after {
  content: '';
  position: absolute;
  right: calc(min(100vw, 440px) * -13 / 750);
  top: 50%;
  width: calc(min(100vw, 440px) * 20 / 750);
  height: calc(min(100vw, 440px) * 20 / 750);
  border-top: calc(min(100vw, 440px) * 3 / 750) solid #251c13;
  border-right: calc(min(100vw, 440px) * 3 / 750) solid #251c13;
  background: #fff7df;
  transform: translateY(-50%) rotate(45deg);
}

.ready-stage {
  min-height: calc(min(100vw, 440px) * 746 / 750);
  margin-top: calc(min(100vw, 440px) * 104 / 750);
  display: flex;
  flex-direction: column;
}

.ready-boss-row {
  height: calc(min(100vw, 440px) * 270 / 750);
  padding-right: calc(min(100vw, 440px) * 6 / 750);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.boss-ready-bubble {
  width: calc(min(100vw, 440px) * 278 / 750);
  margin-right: calc(min(100vw, 440px) * -4 / 750);
  margin-bottom: calc(min(100vw, 440px) * 40 / 750);
}

.ready-boss-sticker {
  width: calc(min(100vw, 440px) * 318 / 750);
  height: calc(min(100vw, 440px) * 350 / 750);
  flex: 0 0 auto;
  animation: boss-enter .52s cubic-bezier(.2, .9, .24, 1.16) both, character-breathe 3.8s 1s ease-in-out infinite;
}

.ready-player-row {
  min-height: calc(min(100vw, 440px) * 292 / 750);
  margin-top: calc(min(100vw, 440px) * 10 / 750);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.ready-man-sticker {
  position: relative;
  top: calc(min(100vw, 440px) * 60 / 750);
  width: calc(min(100vw, 440px) * 326 / 750);
  height: calc(min(100vw, 440px) * 350 / 750);
  margin-left: calc(min(100vw, 440px) * 18 / 750);
  flex: 0 0 auto;
  animation: man-enter .52s .14s cubic-bezier(.2, .9, .24, 1.16) both, character-breathe 4.4s 1.2s ease-in-out infinite;
}

.choice-cluster {
  position: relative;
  z-index: 6;
  width: 100%;
  box-sizing: border-box;
  margin: calc(min(100vw, 440px) * 14 / 750) 0 0;
  padding: 0 calc(min(100vw, 440px) * 72 / 750);
}

.choice-prompt {
  display: block;
  margin-bottom: calc(min(100vw, 440px) * 20 / 750);
  text-align: center;
  font-size: calc(min(100vw, 440px) * 31 / 750);
  line-height: 1;
  font-weight: 950;
  letter-spacing: calc(min(100vw, 440px) * 2 / 750);
}

.move-row { display: flex; justify-content: center; gap: calc(min(100vw, 440px) * 18 / 750); }

.move-button {
  width: calc(min(100vw, 440px) * 128 / 750);
  height: calc(min(100vw, 440px) * 132 / 750);
  margin: 0;
  padding: calc(min(100vw, 440px) * 9 / 750) 0 calc(min(100vw, 440px) * 7 / 750);
  border: calc(min(100vw, 440px) * 3 / 750) solid #251c13;
  border-radius: calc(min(100vw, 440px) * 25 / 750);
  background: #f7cf4b;
  box-shadow: calc(min(100vw, 440px) * 4 / 750) calc(min(100vw, 440px) * 6 / 750) 0 #ef6a55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: choice-drop .42s cubic-bezier(.18, .88, .24, 1.22) both;
}

.move-button:nth-child(1) { animation-delay: .3s; }
.move-button:nth-child(2) { animation-delay: .4s; }
.move-button:nth-child(3) { animation-delay: .5s; }
.move-button-pressed { transform: translateY(calc(min(100vw, 440px) * 5 / 750)) scale(.97); box-shadow: calc(min(100vw, 440px) * 1 / 750) calc(min(100vw, 440px) * 2 / 750) 0 #ef6a55; }
.move-icon { width: calc(min(100vw, 440px) * 72 / 750); height: calc(min(100vw, 440px) * 72 / 750); flex: 0 0 auto; }
.move-label { margin-top: calc(min(100vw, 440px) * 3 / 750); font-size: calc(min(100vw, 440px) * 20 / 750); line-height: 1; font-weight: 950; }

.countdown-stage {
  min-height: calc(min(100vw, 440px) * 620 / 750);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.countdown-fighters {
  position: relative;
  top: calc(min(100vw, 440px) * 80 / 750);
  width: calc(min(100vw, 440px) * 660 / 750);
  height: calc(min(100vw, 440px) * 560 / 750);
  margin: 0 auto;
}
.countdown-character {
  position: absolute;
  z-index: 2;
  width: calc(min(100vw, 440px) * 330 / 750);
  height: calc(min(100vw, 440px) * 380 / 750);
  transform-origin: 50% 90%;
}
.countdown-man {
  left: calc(min(100vw, 440px) * -4 / 750);
  bottom: calc(min(100vw, 440px) * -8 / 750);
  animation: waiting-shake-left .62s ease-in-out infinite;
}
.countdown-boss {
  top: calc(min(100vw, 440px) * -12 / 750);
  right: calc(min(100vw, 440px) * -4 / 750);
  animation: waiting-shake-right .62s ease-in-out infinite;
}
.countdown-hand-burst {
  position: absolute;
  z-index: 7;
  top: calc(min(100vw, 440px) * 210 / 750);
  left: 50%;
  width: calc(min(100vw, 440px) * 178 / 750);
  height: calc(min(100vw, 440px) * 178 / 750);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.countdown-ring {
  position: absolute;
  inset: calc(min(100vw, 440px) * 10 / 750);
  border: calc(min(100vw, 440px) * 5 / 750) solid #251c13;
  border-radius: 50%;
  background: rgba(255, 247, 223, .88);
  box-shadow: calc(min(100vw, 440px) * 6 / 750) calc(min(100vw, 440px) * 7 / 750) 0 #ef6a55;
}
.countdown-ring-two {
  inset: calc(min(100vw, 440px) * -10 / 750);
  border-color: rgba(37, 28, 19, .32);
  background: transparent;
  box-shadow: none;
  animation: countdown-ring-pulse .62s ease-out infinite;
}
.countdown-hand {
  position: relative;
  z-index: 2;
  width: calc(min(100vw, 440px) * 132 / 750);
  height: calc(min(100vw, 440px) * 132 / 750);
  filter: drop-shadow(calc(min(100vw, 440px) * 4 / 750) calc(min(100vw, 440px) * 5 / 750) 0 rgba(37, 28, 19, .18));
}
.countdown-beat-0 .countdown-hand { animation: countdown-hand-one .62s cubic-bezier(.18, .82, .2, 1.18) both; }
.countdown-beat-1 .countdown-hand { animation: countdown-hand-two .62s cubic-bezier(.18, .82, .2, 1.18) both; }
.countdown-beat-2 .countdown-hand { animation: countdown-hand-three .62s cubic-bezier(.18, .82, .2, 1.18) both; }
.countdown-beat-3 .countdown-hand { animation: countdown-hand-four .32s cubic-bezier(.18, .82, .2, 1.18) both; }

.settle-error-stage { min-height: calc(min(100vw, 440px) * 500 / 750); padding-top: calc(min(100vw, 440px) * 52 / 750); text-align: center; }
.error-boss { width: calc(min(100vw, 440px) * 250 / 750); height: calc(min(100vw, 440px) * 235 / 750); }
.error-bubble { width: calc(min(100vw, 440px) * 430 / 750); margin: calc(min(100vw, 440px) * -22 / 750) auto 0; }
.error-bubble::after { display: none; }
.error-title { display: block; font-size: calc(min(100vw, 440px) * 31 / 750); font-weight: 950; }
.error-copy { display: block; margin-top: calc(min(100vw, 440px) * 10 / 750); font-size: calc(min(100vw, 440px) * 22 / 750); color: #795b25; }

.result-stage { min-height: calc(min(100vw, 440px) * 820 / 750); text-align: center; }
.result-pair-wrap {
  position: relative;
  width: calc(min(100vw, 440px) * 660 / 750);
  height: calc(min(100vw, 440px) * 466 / 750);
  margin: calc(min(100vw, 440px) * -6 / 750) auto 0;
  overflow: visible;
}
.result-pair-sticker {
  display: block;
  width: 100%;
  height: 100%;
  animation: result-pair-enter .62s cubic-bezier(.16, .9, .2, 1.16) both;
}
.sticker-countdown {
  position: absolute;
  z-index: 4;
  top: calc(min(100vw, 440px) * 292 / 750);
  left: calc(50% + calc(min(100vw, 440px) * 28 / 750));
  width: calc(min(100vw, 440px) * 126 / 750);
  height: calc(min(100vw, 440px) * 66 / 750);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #fff7df;
  font-size: calc(min(100vw, 440px) * 27 / 750);
  line-height: 1;
  font-weight: 950;
  letter-spacing: calc(min(100vw, 440px) * 2 / 750);
  text-align: center;
}
.result-copy-stack { margin-top: calc(min(100vw, 440px) * 46 / 750); }
.result-title { display: block; margin: 0; font-size: calc(min(100vw, 440px) * 34 / 750); line-height: 1.2; font-weight: 950; }
.result-message { width: calc(min(100vw, 440px) * 470 / 750); margin: calc(min(100vw, 440px) * 18 / 750) auto 0; font-size: calc(min(100vw, 440px) * 23 / 750); }
.result-message::after { display: none; }
.result-player_win .result-pair-wrap { height: calc(min(100vw, 440px) * 462 / 750); }
.result-boss_win .result-pair-wrap { height: calc(min(100vw, 440px) * 500 / 750); }
.cooldown-card {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(calc(min(100vw, 440px) * 48 / 750) + env(safe-area-inset-bottom));
  width: max-content;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: translateX(-50%);
}
.cooldown-note { display: block; font-size: calc(min(100vw, 440px) * 22 / 750); font-weight: 850; color: #795b25; }

.result-boss-row {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  height: calc(min(100vw, 440px) * 260 / 750);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.health-bubble,
.boss-win-bubble {
  width: calc(min(100vw, 440px) * 280 / 750);
  margin-right: calc(min(100vw, 440px) * -8 / 750);
  margin-bottom: calc(min(100vw, 440px) * 62 / 750);
}
.boss-cheer-sticker { width: calc(min(100vw, 440px) * 285 / 750); height: calc(min(100vw, 440px) * 268 / 750); animation: cheer-pop .6s .08s cubic-bezier(.15, .9, .2, 1.25) both; }

.story-button {
  width: calc(min(100vw, 440px) * 340 / 750);
  height: calc(min(100vw, 440px) * 82 / 750);
  margin: calc(min(100vw, 440px) * 24 / 750) auto 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(min(100vw, 440px) * 25 / 750);
  line-height: 1;
  box-shadow: 0 calc(min(100vw, 440px) * 7 / 750) 0 #ef6a55;
}

.result-stage .story-button {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: calc(calc(min(100vw, 440px) * 42 / 750) + env(safe-area-inset-bottom));
  margin: 0;
  transform: translateX(-50%);
}

.page-state {
  position: relative;
  z-index: 2;
  min-height: 82vh;
  padding: 0 calc(min(100vw, 440px) * 60 / 750);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: calc(min(100vw, 440px) * 20 / 750);
  font-size: calc(min(100vw, 440px) * 25 / 750);
  line-height: 1.5;
  font-weight: 850;
}
.rps-loader { width: calc(min(100vw, 440px) * 96 / 750); height: calc(min(100vw, 440px) * 96 / 750); animation: loader-wobble .55s ease-in-out infinite alternate; }
.state-title { font-size: calc(min(100vw, 440px) * 38 / 750); font-weight: 950; }
.state-copy { color: #795b25; }
.state-button { width: 100%; margin-top: calc(min(100vw, 440px) * 12 / 750); }

@keyframes bubble-pop { from { transform: scale(.72) translateY(calc(min(100vw, 440px) * 12 / 750)); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes boss-enter { from { transform: translate(calc(min(100vw, 440px) * 28 / 750), calc(min(100vw, 440px) * -10 / 750)) scale(.9); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes man-enter { from { transform: translate(calc(min(100vw, 440px) * -30 / 750), calc(min(100vw, 440px) * 18 / 750)) scale(.9); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes character-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(min(100vw, 440px) * -3 / 750)); } }
@keyframes choice-drop { from { transform: translateY(calc(min(100vw, 440px) * -22 / 750)) rotate(-6deg) scale(.76); opacity: 0; } to { transform: translateY(0) rotate(0) scale(1); opacity: 1; } }
@keyframes waiting-shake-left { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 48% { transform: translateY(calc(min(100vw, 440px) * -10 / 750)) rotate(2.5deg); } }
@keyframes waiting-shake-right { 0%, 100% { transform: translateY(0) rotate(1.5deg); } 48% { transform: translateY(calc(min(100vw, 440px) * -10 / 750)) rotate(-2.5deg); } }
@keyframes countdown-ring-pulse { 0% { transform: scale(.72); opacity: .52; } 78%, 100% { transform: scale(1.22); opacity: 0; } }
@keyframes countdown-hand-one { 0% { transform: translateY(calc(min(100vw, 440px) * -24 / 750)) rotate(-18deg) scale(.55); opacity: .2; } 58% { transform: translateY(calc(min(100vw, 440px) * 8 / 750)) rotate(7deg) scale(1.12); opacity: 1; } 100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } }
@keyframes countdown-hand-two { 0% { transform: translateY(calc(min(100vw, 440px) * -24 / 750)) rotate(18deg) scale(.55); opacity: .2; } 58% { transform: translateY(calc(min(100vw, 440px) * 8 / 750)) rotate(-7deg) scale(1.12); opacity: 1; } 100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } }
@keyframes countdown-hand-three { 0% { transform: translateY(calc(min(100vw, 440px) * -24 / 750)) rotate(-18deg) scale(.55); opacity: .2; } 58% { transform: translateY(calc(min(100vw, 440px) * 8 / 750)) rotate(7deg) scale(1.12); opacity: 1; } 100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; } }
@keyframes countdown-hand-four { 0% { transform: scale(1) rotate(0); } 45% { transform: scale(.82) rotate(-5deg); } 100% { transform: scale(1.18) rotate(4deg); } }
@keyframes result-pair-enter { from { transform: translateY(calc(min(100vw, 440px) * 32 / 750)) scale(.78); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes offer-enter { from { transform: translate(calc(min(100vw, 440px) * 34 / 750), calc(min(100vw, 440px) * -12 / 750)) scale(.88); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes receive-enter { from { transform: translate(calc(min(100vw, 440px) * -38 / 750), calc(min(100vw, 440px) * 18 / 750)) scale(.88); opacity: 0; } to { transform: translate(0, 0) scale(1); opacity: 1; } }
@keyframes cheer-pop { 0% { transform: translateY(calc(min(100vw, 440px) * 24 / 750)) scale(.72); opacity: 0; } 68% { transform: translateY(calc(min(100vw, 440px) * -8 / 750)) scale(1.07); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes loader-wobble { from { transform: rotate(-10deg) scale(.94); } to { transform: rotate(10deg) scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .ready-boss-sticker,
  .ready-man-sticker,
  .move-button,
  .talk-bubble,
  .countdown-character,
  .countdown-hand,
  .countdown-ring,
  .result-pair-sticker,
  .boss-cheer-sticker,
  .rps-loader { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}