:root {
  --cream: #f6f1e8;
  --cream-deep: #ece5d8;
  --green: #165323;
  --green-soft: #2b6c33;
  --red: #ef1e24;
  --ink: #1e241d;
  --white: #ffffff;
  --shadow: 0 24px 60px rgba(23, 35, 22, 0.18);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(22, 83, 35, 0.12), transparent 28%),
    radial-gradient(circle at bottom right, rgba(239, 30, 36, 0.12), transparent 24%),
    linear-gradient(180deg, #fbf7f0 0%, #f1eadf 100%);
  color: var(--ink);
}

body {
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

.app-shell {
  width: 100%;
  display: flex;
  justify-content: center;
}

.phone-frame {
  width: min(100%, 430px);
  min-height: min(100dvh - 20px, 860px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(237, 244, 233, 0.9));
  border: 2px solid rgba(22, 83, 35, 0.12);
  border-radius: 34px;
  box-shadow: var(--shadow);
  padding: clamp(12px, 2.8vh, 18px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vh, 16px);
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.eyebrow,
.overlay-kicker,
.stat-label,
.instructions {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
}

.brand-lockup h1,
.overlay-card h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--green);
  line-height: 0.88;
}

.brand-lockup h1 {
  font-size: clamp(2.25rem, 10vw, 4.4rem);
}

.brand-lockup h1 span {
  display: block;
}

.eyebrow {
  margin: 0 0 8px;
  color: rgba(22, 83, 35, 0.7);
}

.brand-pill {
  background: var(--red);
  color: var(--white);
  padding: 9px 14px;
  border-radius: 999px;
  font-size: clamp(0.72rem, 2.4vw, 0.9rem);
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.brand-pill-button {
  border: 0;
  cursor: pointer;
  box-shadow: none;
}

.hud {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1.6vh, 12px);
}

.stat-card {
  background: rgba(255, 255, 255, 0.76);
  border-radius: 22px;
  padding: clamp(10px, 1.8vh, 14px) clamp(12px, 3vw, 16px);
}

.stat-label {
  display: block;
  color: rgba(22, 83, 35, 0.7);
  margin-bottom: 6px;
}

.stat-value {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 5vw, 1.8rem);
  color: var(--green);
}

.game-board {
  position: relative;
  flex: 1;
  min-height: clamp(390px, 58dvh, 560px);
  overflow: hidden;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.65), rgba(213, 231, 209, 0.96)),
    var(--cream);
  touch-action: none;
}

.game-board::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 5%;
  background: var(--green);
}

.lane {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  border-left: 2px dashed rgba(22, 83, 35, 0.18);
}

.lane-left {
  left: 32%;
}

.lane-right {
  left: 68%;
}

.trolley {
  position: absolute;
  width: 24%;
  aspect-ratio: 1.25;
  transform: translate(-50%, -50%);
}

.trolley svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trolley.left svg {
  color: var(--green);
}

.trolley.right svg {
  color: var(--red);
}

.character-wrap {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 54%;
  aspect-ratio: 1 / 0.78;
  transform: translateX(-50%);
}

.character {
  position: relative;
  width: 100%;
  height: 100%;
}

.flag-arm {
  position: absolute;
  left: 48%;
  bottom: 12%;
  width: 3.2%;
  height: 82%;
  transform-origin: bottom center;
  transition: transform 180ms cubic-bezier(.2,.9,.25,1.15);
}

.flag-pole {
  position: absolute;
  inset: 0 0 0 0;
  background: var(--green);
  border-radius: 999px;
}

.flag-cloth {
  position: absolute;
  top: -2%;
  left: 100%;
  width: 680%;
  height: 48%;
  background: var(--green);
  clip-path: polygon(0 10%, 18% 2%, 98% 4%, 97% 28%, 94% 54%, 96% 82%, 76% 80%, 56% 78%, 34% 80%, 16% 74%, 0 58%, 10% 34%);
  border-radius: 16px 24px 24px 24px;
}

.body {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34%;
  height: 72%;
  transform: translateX(-50%);
}

.head {
  width: 24%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green);
  margin: 0 auto -2%;
}

.torso {
  width: 34%;
  height: 42%;
  margin: 0 auto;
  background: var(--green);
  border-radius: 999px;
}

.legs {
  display: flex;
  justify-content: center;
  gap: 18%;
  margin-top: -2%;
}

.legs span {
  width: 12%;
  height: 34%;
  background: var(--green);
  border-radius: 999px;
  transform-origin: top center;
}

.legs span:first-child {
  transform: rotate(10deg);
}

.legs span:last-child {
  transform: rotate(-10deg);
}

.hit-flash {
  position: absolute;
  bottom: 19%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(239, 30, 36, 0.35);
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 180ms ease;
}

.burst {
  position: absolute;
  z-index: 12;
  width: 32%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%) scale(0.5) rotate(-10deg);
  animation: burst-pop 420ms ease-out forwards;
  pointer-events: none;
}

.burst::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 62% 18%, 82% 6%, 78% 28%, 100% 30%, 84% 46%, 100% 62%, 78% 66%, 82% 92%, 60% 80%, 50% 100%, 38% 82%, 18% 94%, 22% 70%, 0% 68%, 14% 50%, 0% 32%, 22% 30%, 16% 8%, 40% 20%);
  box-shadow: 0 0 0 4px var(--ink);
}

.burst::after {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at center, transparent 54%, currentColor 55%, transparent 58%),
    conic-gradient(from 0deg, currentColor 0deg 10deg, transparent 10deg 30deg, currentColor 30deg 40deg, transparent 40deg 60deg, currentColor 60deg 70deg, transparent 70deg 90deg, currentColor 90deg 100deg, transparent 100deg 120deg, currentColor 120deg 130deg, transparent 130deg 150deg, currentColor 150deg 160deg, transparent 160deg 180deg, currentColor 180deg 190deg, transparent 190deg 210deg, currentColor 210deg 220deg, transparent 220deg 240deg, currentColor 240deg 250deg, transparent 250deg 270deg, currentColor 270deg 280deg, transparent 280deg 300deg, currentColor 300deg 310deg, transparent 310deg 330deg, currentColor 330deg 340deg, transparent 340deg 360deg);
  opacity: 0.28;
}

.burst span {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 4vw, 1.8rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #ffe760;
  text-shadow:
    -2px -2px 0 var(--ink),
    2px -2px 0 var(--ink),
    -2px 2px 0 var(--ink),
    2px 2px 0 var(--ink);
}

.burst-red {
  color: var(--red);
}

.burst-red::before {
  background: var(--red);
}

.burst-green {
  color: var(--green);
}

.burst-green::before {
  background: var(--green);
}

.burst-green span {
  color: #fff2a8;
}

.burst-red span {
  color: #fff7b8;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(17, 23, 17, 0.18);
  padding: 18px;
}

.overlay.hidden {
  display: none;
}

.overlay-card {
  position: relative;
  z-index: 21;
  background: rgba(255,255,255,0.9);
  border-radius: 28px;
  padding: clamp(18px, 3vh, 24px) clamp(18px, 4vw, 22px);
  text-align: center;
  box-shadow: 0 20px 40px rgba(20, 41, 20, 0.14);
}

.overlay-card h2 {
  font-size: clamp(2rem, 9vw, 3rem);
  margin-bottom: 12px;
}

.overlay-card p {
  margin: 0 0 18px;
  line-height: 1.45;
}

button {
  border: 0;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.instructions {
  color: rgba(22, 83, 35, 0.8);
  text-align: left;
}

@media (max-width: 420px) {
  body {
    padding: 10px;
  }

  .phone-frame {
    min-height: calc(100dvh - 20px);
    padding: 14px;
    border-radius: 28px;
  }

  .brand-pill {
    font-size: 0.74rem;
    padding: 8px 12px;
  }

  .game-board {
    min-height: 60vh;
  }
}

@media (max-height: 760px) {
  .phone-frame {
    min-height: calc(100dvh - 12px);
    padding: 12px;
    gap: 10px;
  }

  .game-header {
    gap: 8px;
  }

  .brand-lockup h1 {
    font-size: clamp(2rem, 9vw, 3.3rem);
  }

  .brand-pill {
    padding: 8px 12px;
    font-size: 0.72rem;
  }

  .stat-card {
    border-radius: 18px;
    padding: 10px 12px;
  }

  .stat-value {
    font-size: 1.35rem;
  }

  .game-board {
    min-height: clamp(340px, 54dvh, 460px);
    border-radius: 24px;
  }

  .overlay-card h2 {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }

  .overlay-card p {
    font-size: 0.95rem;
    margin-bottom: 14px;
  }

  .instructions {
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }
}

@media (max-height: 680px) {
  .phone-frame {
    padding: 10px;
    gap: 8px;
  }

  .game-board {
    min-height: clamp(300px, 50dvh, 400px);
  }

  .brand-lockup h1 {
    font-size: clamp(1.8rem, 8vw, 2.8rem);
  }

  .instructions {
    display: none;
  }
}

.credits-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 24, 16, 0.5);
}

.credits-modal.hidden {
  display: none;
}

.credits-card {
  width: min(100%, 420px);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(239, 244, 236, 0.96));
  border-radius: 30px;
  padding: 18px;
  box-shadow: 0 24px 60px rgba(16, 24, 16, 0.28);
  text-align: center;
}

.credits-photo {
  width: 100%;
  display: block;
  border-radius: 22px;
  margin-bottom: 16px;
  object-fit: cover;
  max-height: min(48dvh, 430px);
}

.credits-card h2 {
  margin: 0 0 18px;
  color: var(--green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1.2;
}

@keyframes burst-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(-10deg);
  }

  22% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08) rotate(-6deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -54%) scale(1.16) rotate(-2deg);
  }
}