:root {
  color-scheme: dark;
  font-family: Tahoma, "Segoe UI", Arial, sans-serif;
  --cream: #fff7dc;
  --ink: #181747;
  --purple: #6657d9;
  --purple-dark: #332b91;
  --yellow: #ffd859;
  --pink: #ff7b9b;
  --glass: rgba(22, 23, 74, 0.76);
}

* { box-sizing: border-box; }

html,
body {
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #10194e;
}

body {
  min-height: 100dvh;
  color: var(--cream);
}

body::before {
  content: "";
  position: fixed;
  inset: -32px;
  z-index: -2;
  background: linear-gradient(rgba(17, 25, 74, 0.55), rgba(17, 25, 74, 0.78)), url("/assets/background.png") center / cover;
  filter: blur(24px) saturate(1.25);
  transform: scale(1.06);
}

button,
input { font: inherit; }

button,
a { -webkit-tap-highlight-color: transparent; }

[hidden] { display: none !important; }

.app-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
}

.game-stage {
  container-type: inline-size;
  position: relative;
  width: min(100vw, 56.25dvh);
  height: min(100dvh, 177.7778vw);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  isolation: isolate;
  background: #111a54;
  box-shadow: 0 0 70px rgba(8, 8, 38, 0.72);
}

.scene-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.scene-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 225, 133, 0.08) 0 15%, transparent 34%),
    linear-gradient(to bottom, rgba(10, 16, 67, 0.18), transparent 25% 68%, rgba(6, 13, 58, 0.42));
}

.game-hud {
  position: absolute;
  z-index: 10;
  top: max(2.3%, env(safe-area-inset-top));
  left: 4%;
  right: 4%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.brand-pill,
.attempts-card {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 8px 22px rgba(11, 10, 60, 0.28), inset 0 1px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
}

.brand-pill {
  direction: ltr;
  padding: 1.8cqw 2.7cqw;
  gap: 1.5cqw;
  border-radius: 100px;
  background: rgba(25, 26, 83, 0.72);
  font-weight: 900;
  font-size: 3.4cqw;
  letter-spacing: 0.09em;
}

.brand-logo {
  width: 7cqw;
  height: 4.5cqw;
  object-fit: contain;
}

.attempts-card {
  flex-direction: column;
  padding: 1.4cqw 2.3cqw;
  border-radius: 4cqw;
  background: rgba(23, 24, 77, 0.75);
}

.attempts-card > span {
  font-size: 2.5cqw;
  opacity: 0.82;
}

.hearts {
  direction: ltr;
  display: flex;
  gap: .3cqw;
  line-height: 1.3;
}

.hearts b {
  font-size: 4.2cqw;
  transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}

.hearts b.is-used {
  transform: scale(.72);
  filter: grayscale(1);
  opacity: .32;
}

.sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.sparkles i {
  position: absolute;
  color: #fff1ad;
  font-style: normal;
  text-shadow: 0 0 12px #fff5be;
  animation: twinkle 2.7s ease-in-out infinite;
}

.sparkles i:nth-child(1) { top: 18%; left: 13%; font-size: 4cqw; }
.sparkles i:nth-child(2) { top: 31%; right: 11%; font-size: 3cqw; animation-delay: -.8s; }
.sparkles i:nth-child(3) { top: 67%; left: 20%; font-size: 5cqw; animation-delay: -1.4s; }
.sparkles i:nth-child(4) { top: 75%; right: 19%; font-size: 3cqw; animation-delay: -.3s; }
.sparkles i:nth-child(5) { top: 9%; right: 31%; font-size: 2.5cqw; animation-delay: -2s; }
.sparkles i:nth-child(6) { top: 59%; right: 8%; font-size: 4cqw; animation-delay: -1s; }

@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.7) rotate(0); }
  50% { opacity: 1; transform: scale(1.2) rotate(25deg); }
}

.panda-track {
  position: absolute;
  z-index: 5;
  top: 40.625%;
  left: 0;
  right: 0;
  height: 18.28125%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}

.is-playing .panda-track,
.is-winner .panda-track { opacity: 1; }

.panda-mover {
  position: absolute;
  top: 0;
  left: -24%;
  height: 100%;
  aspect-ratio: 233 / 351;
  will-change: left;
  filter: drop-shadow(0 2cqw 2.2cqw rgba(21, 13, 54, .34));
}

.panda {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: pandaBob .8s ease-in-out infinite alternate;
}

.panda-mover.is-miss .panda { animation: pandaShake .46s ease both; }

@keyframes pandaBob {
  from { transform: translateY(-1.2%) rotate(-1.2deg); }
  to { transform: translateY(1.6%) rotate(1.2deg); }
}

@keyframes pandaShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-8%) rotate(-5deg); }
  40% { transform: translateX(8%) rotate(5deg); }
  60% { transform: translateX(-5%) rotate(-3deg); }
  80% { transform: translateX(4%) rotate(2deg); }
}

.stop-button {
  position: absolute;
  z-index: 20;
  bottom: max(4.2%, env(safe-area-inset-bottom));
  left: 10%;
  right: 10%;
  min-height: 13cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  padding: 2.4cqw 5cqw;
  border: 0;
  border-radius: 100px;
  color: var(--ink);
  background: linear-gradient(135deg, #ffe67b, #ffbf57);
  box-shadow: 0 2.3cqw 0 #cf793e, 0 3.6cqw 7cqw rgba(13, 11, 57, .45), inset 0 1px rgba(255,255,255,.8);
  font-size: 5cqw;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s;
}

.stop-button b { font-size: 6cqw; }
.stop-button:active { transform: translateY(1.5cqw) scale(.985); box-shadow: 0 .8cqw 0 #cf793e, 0 2cqw 4cqw rgba(13, 11, 57, .35); }
.stop-button:disabled { cursor: wait; opacity: .7; }

.game-toast {
  position: absolute;
  z-index: 25;
  top: 13%;
  left: 50%;
  min-width: 55%;
  max-width: 86%;
  padding: 2.2cqw 4cqw;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 100px;
  color: var(--cream);
  background: rgba(27, 25, 89, .82);
  box-shadow: 0 2cqw 6cqw rgba(6, 8, 47, .35);
  backdrop-filter: blur(12px);
  text-align: center;
  font-size: 3.4cqw;
  font-weight: 800;
  transform: translate(-50%, -18px) scale(.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}

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

.screen {
  position: absolute;
  z-index: 30;
  left: 7%;
  right: 7%;
  top: 13%;
  padding: 6cqw 6cqw 5.5cqw;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 8cqw;
  background: linear-gradient(145deg, rgba(39, 38, 115, .9), rgba(24, 27, 85, .83));
  box-shadow: 0 5cqw 13cqw rgba(8, 8, 48, .48), inset 0 1px rgba(255,255,255,.2);
  backdrop-filter: blur(16px) saturate(1.25);
  text-align: center;
}

.screen::before {
  content: "";
  position: absolute;
  inset: 1.6cqw;
  z-index: -1;
  border: 1px dashed rgba(255, 232, 137, .26);
  border-radius: 6.6cqw;
  pointer-events: none;
}

.intro-emoji,
.winner-badge,
.message-emoji {
  width: 17cqw;
  height: 17cqw;
  margin: -12cqw auto 2cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff1a2, #ffa96b);
  box-shadow: 0 2cqw 6cqw rgba(12, 10, 57, .4), inset 0 1px 0 rgba(255,255,255,.8);
  font-size: 10cqw;
  animation: badgeFloat 2s ease-in-out infinite;
}

@keyframes badgeFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-1.5cqw) rotate(3deg); }
}

.eyebrow {
  margin: 0 0 1.2cqw;
  color: #ffe989;
  font-size: 3cqw;
  font-weight: 800;
}

.screen h1,
.screen h2 {
  margin: 0;
  color: #fff9de;
  font-weight: 950;
  line-height: 1.15;
  text-shadow: 0 .8cqw 0 rgba(31, 24, 104, .55);
}

.screen h1 { font-size: 9cqw; }
.screen h2 { font-size: 8cqw; }

.intro-copy,
.screen--winner > p,
.screen--message > p {
  margin: 2.5cqw auto;
  max-width: 90%;
  color: rgba(255, 249, 224, .9);
  font-size: 3.5cqw;
  line-height: 1.7;
}

.tries-note {
  margin: 3cqw auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  color: rgba(255,255,255,.8);
  font-size: 3cqw;
}

.tries-note b { color: var(--yellow); font-size: 3.8cqw; }

.primary-button {
  width: 100%;
  min-height: 12cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2cqw;
  padding: 2.5cqw 4cqw;
  border: 0;
  border-radius: 100px;
  color: var(--ink);
  background: linear-gradient(135deg, #ffe879, #ffb95e);
  box-shadow: 0 1.7cqw 0 #ca7842, 0 3cqw 6cqw rgba(9, 8, 53, .36);
  font-weight: 900;
  font-size: 4.1cqw;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease;
}

.primary-button:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-.4cqw); }
.primary-button:not(:disabled):active { transform: translateY(1cqw); box-shadow: 0 .7cqw 0 #ca7842, 0 1.5cqw 3cqw rgba(9, 8, 53, .3); }
.primary-button:disabled { opacity: .65; cursor: wait; }
.keyboard-hint { margin: 3cqw 0 0; font-size: 2.5cqw; opacity: .55; }

.screen--winner { top: 11%; padding-top: 5cqw; }
.winner-badge { font-size: 9cqw; }

.winner-form {
  display: grid;
  gap: 2.5cqw;
  margin-top: 3cqw;
  text-align: right;
}

.winner-form label { display: grid; gap: 1cqw; }
.winner-form label span { padding-inline: 2cqw; color: #fff2b9; font-size: 3cqw; font-weight: 800; }

.winner-form input {
  width: 100%;
  height: 11.5cqw;
  padding: 0 4cqw;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 3.3cqw;
  outline: none;
  color: var(--ink);
  background: rgba(255, 252, 232, .96);
  box-shadow: inset 0 .5cqw 1.2cqw rgba(33, 28, 91, .08);
  font-size: 3.7cqw;
  transition: box-shadow .2s, border-color .2s;
}

.winner-form input:focus { border-color: #ffd95f; box-shadow: 0 0 0 1cqw rgba(255, 217, 95, .2); }
.winner-form input::placeholder { color: #87819c; }
.winner-form input[type="tel"] { direction: ltr; text-align: right; }
.form-error { min-height: 3.8cqw; margin: 0; color: #ffd1db; font-size: 2.8cqw; text-align: center; }
.primary-button--submit { margin-top: 0; }

.screen--message { top: 27%; }
.message-emoji { margin-top: -14cqw; }
.countdown { color: #ffe989 !important; font-size: 3cqw !important; }
.link-button { margin-top: 3cqw; }

.confetti {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.confetti span {
  position: absolute;
  top: -8%;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * .55);
  border-radius: 3px;
  background: var(--color);
  animation: confettiFall var(--duration) var(--delay) cubic-bezier(.2,.7,.4,1) forwards;
}

@keyframes confettiFall {
  0% { transform: translate3d(0, -10%, 0) rotate(0); opacity: 1; }
  100% { transform: translate3d(var(--drift), 175cqw, 0) rotate(var(--spin)); opacity: .85; }
}

.loading-cover {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  gap: 3cqw;
  background: #17194f;
  text-align: center;
  font-size: 3.5cqw;
  transition: opacity .35s, visibility .35s;
}

.loading-cover.is-hidden { opacity: 0; visibility: hidden; }
.loader-panda { font-size: 15cqw; animation: loaderBounce 1s ease-in-out infinite alternate; }

@keyframes loaderBounce {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-2.5cqw) scale(1.05); }
}

@media (min-width: 720px) {
  .game-stage { border-radius: 26px; border: 1px solid rgba(255,255,255,.16); }
}

@media (prefers-reduced-motion: reduce) {
  .sparkles i,
  .panda,
  .intro-emoji,
  .winner-badge,
  .message-emoji,
  .loader-panda { animation: none !important; }
  .confetti { display: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}