[hidden] { display: none !important; }

:root {
  --brand-primary: #2f9e44;
  --brand-secondary: #ffd43b;
}

* { box-sizing: border-box; }

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.7) translateY(20px); }
  60% { opacity: 1; transform: scale(1.05) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes bounceIn {
  0% { opacity: 0; transform: translateX(-50%) scale(0.3); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  70% { transform: translateX(-50%) scale(0.92); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes shakeScreen {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(9px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

@keyframes countPunch {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.3; }
  60% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.pulse { animation: pulse 0.3s ease; }
.shake-screen { animation: shakeScreen 0.4s ease; }

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  justify-content: center;
  font-family: "Nunito", "Segoe UI", sans-serif;
  align-items: center;
}

#game-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* Illustrated rolling-hill frame around the whole game area, tinted to the
   selected brand's color and always on top so it stays visible through
   every screen (start/brand-select/gameplay/end) without each needing to
   know about it. */
#game-frame {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.hill-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hill-fill { fill: var(--brand-primary); transition: fill 0.5s ease; }

#game-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#game-badge {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid var(--brand-primary);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.5s ease;
  animation: bounceIn 0.5s ease;
}

#game-badge img {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

#input_video {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

canvas {
  position: relative;
  display: block;
  z-index: 2;
  background: linear-gradient(180deg, #dff3ff 0%, #f4fbff 100%);
  width: 100%;
  height: 100%;
}

#countdown {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Baloo 2", sans-serif;
  font-size: 130px;
  font-weight: 800;
  color: var(--brand-secondary);
  z-index: 30;
  display: none;
  text-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 6px 0 rgba(0, 0, 0, 0.25);
}

#countdown.punch { animation: countPunch 0.5s ease; }

.stats {
  position: absolute;
  top: 5%;
  left: 3%;
  right: 3%;
  /* Above #game-frame (40): the hill frame's wavy band grows taller, as a
     share of viewport height, on narrow/tall aspect ratios (mobile portrait,
     tall desktop windows) since the SVG stretches non-uniformly — a fixed
     z-index below it let the frame visually clip the timer/points cards on
     those screens. Sitting above it means the cards are always fully
     visible no matter the aspect ratio. */
  z-index: 46;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.stat-medal {
  background: #fff;
  border-radius: 16px;
  padding: 8px 18px 10px;
  text-align: center;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.12);
  border-bottom: 4px solid var(--brand-primary);
  min-width: 60px;
  transition: border-color 0.5s ease;
}

.stat-medal span {
  display: block;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--brand-primary);
  line-height: 1;
  transition: color 0.5s ease;
}

.stat-medal label {
  display: block;
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #7a7a7a;
  margin-top: 3px;
}

.stat-icon {
  content: url("img/apple.png");
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin: 0 auto 2px;
  display: block;
}

.stat-icon--timer {
  content: url("img/hourglass.png");
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-color, #e44c9b);
  background-image: url("img/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-blend-mode: soft-light;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  color: white;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

#overlay > * {
  flex-shrink: 0;
  animation: popIn 0.45s ease both;
}
#overlay > *:nth-child(1) { animation-delay: 0s; }
#overlay > *:nth-child(2) { animation-delay: 0.1s; }
#overlay > *:nth-child(3) { animation-delay: 0.2s; }
#overlay > *:nth-child(4) { animation-delay: 0.3s; }

.location-badge {
  background: #fff;
  border-radius: 20px;
  padding: 8px 22px;
  margin-bottom: 18px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.15);
}
.location-badge img { width: 160px; height: auto; max-width: 40vw; object-fit: contain; display: block; }

.location-badge--sm {
  padding: 6px 16px;
  margin-bottom: 12px;
}
.location-badge--sm img { width: 110px; }

#overlay img.logo {
  width: 56%;
  max-width: 280px;
  margin-bottom: 16px;
}

#overlay img.logo.end-title {
  width: 62%;
  max-width: 300px;
  margin-bottom: 12px;
}

.game-title-typed {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Luckiest Guy", "Baloo 2", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 9vw, 66px);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 24px;
  max-width: 94%;
}

.title-word {
  display: inline-block;
  color: #fff;
  -webkit-text-stroke: 3px var(--game-name-color, #ed1c24);
  paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 var(--game-name-color, #ed1c24));
}

/* Poster-style bookend placement, matching the reference: the first word
   is big and tilts left from the left edge, the last word is biggest and
   tilts right from the right edge, and anything in between (there's just
   one in "Catch the Food", but this holds for any word count the admin
   types) is small, centered, and tilts the other way — a tight zigzag
   stack rather than plain centered lines. */
.title-word:first-child {
  align-self: flex-start;
  transform: rotate(-8deg);
  margin: 0 0 -2px 1%;
}

.title-word:last-child {
  align-self: flex-end;
  font-size: 1.08em;
  transform: rotate(3deg);
  margin: -6px 1% 0 0;
}

.title-word:not(:first-child):not(:last-child) {
  align-self: center;
  font-size: 0.6em;
  transform: rotate(6deg);
  margin: -4px 6% 0 0;
}

/* A single-word game name is both first and last — keep it plain instead
   of applying (and fighting over) both bookend treatments. */
.title-word:first-child:last-child {
  align-self: center;
  font-size: 1em;
  transform: none;
  margin: 0;
}

#overlay img.start-btn {
  width: 50%;
  max-width: 250px;
  cursor: pointer;
  transition: transform 0.15s;
}

#overlay img.start-btn:hover {
  transform: scale(1.05);
}

#overlay img.start-btn:active {
  transform: scale(0.94);
}

#brandSelect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.78);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 25;
  color: white;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

#brandSelect h2,
#brandSelect .section-sub,
#brandSelect .brand-grid {
  animation: popIn 0.45s ease both;
}
#brandSelect .section-sub { animation-delay: 0.08s; }
#brandSelect .brand-grid { animation-delay: 0.16s; }

#brandSelect h2 {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 34px;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
}

#brandSelect .section-sub {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  margin-bottom: 34px;
}

.brand-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 520px;
}

.brand-logo {
  width: 100%;
  padding: 12px 10px;
  background: #fff;
  border-radius: 24px;
  cursor: pointer;
  transition: transform 0.15s;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.15);
  border: 4px solid rgba(255, 255, 255, 0.6);
  height: 170px;
  object-fit: contain;
  animation: popIn 0.4s ease both;
}

.brand-logo:hover {
  transform: scale(1.05);
}

.brand-logo:active {
  transform: scale(0.95);
}

h1 {
  font-family: "Baloo 2", sans-serif;
  font-size: 34px;
  color: #f1c40f;
  text-transform: uppercase;
  margin-bottom: 5px;
}

button {
  font-family: "Baloo 2", sans-serif;
  padding: 16px 48px;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
  background: var(--brand-primary);
  border: none;
  border-bottom: 6px solid rgba(0, 0, 0, 0.25);
  border-radius: 100px;
  margin-top: 25px;
  color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, background-color 0.5s ease;
}

button:hover {
  transform: scale(1.05);
}

button:active {
  transform: scale(0.94);
}

.total-score {
  background: #fff;
  border-radius: 26px;
  padding: 22px 56px 26px;
  margin: 16px 0 8px;
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.15);
  border-bottom: 6px solid var(--brand-primary);
  transition: border-color 0.5s ease;
}

.total-score label {
  display: block;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #8a8a8a;
}

.total-score span {
  display: block;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 54px;
  color: var(--brand-primary);
  line-height: 1.15;
  transition: color 0.5s ease;
}