@font-face {
  font-family: 'Mattone';
  src: url('./fonts/Mattone-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'uRegular';
  src: url(https://wavecdn.b-cdn.net/fonts/UnitPro-Regular.woff2) format('woff2'),
    url(https://wavecdn.b-cdn.net/fonts/UnitPro-Regular.woff) format('woff'),
    url(https://wavecdn.b-cdn.net/fonts/UnitPro-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'uMedi';
  src: url(https://wavecdn.b-cdn.net/fonts/UnitPro-Medium.woff2) format('woff2'),
    url(https://wavecdn.b-cdn.net/fonts/UnitPro-Medium.woff) format('woff'),
    url(https://wavecdn.b-cdn.net/fonts/UnitPro-Medium.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --reborn-green: #9adebe;
  --reborn-green-deep: #5bb88d;
  --reborn-green-bright: #34BC7D;
  --reborn-heading: #373c4b;
  --reborn-text: #373c4b;
  --reborn-white: #ffffff;
  --reborn-gray--light: #f9f9fa;
  --reborn-header-teal: #014045;
  --reborn-cta: #34bc7d;
  --reborn-cta-hover: #71d1a4;
  --reborn-pitch-grass: #2bb24f;
  --reborn-pitch-grass-dark: #1e8b3a;
  --reborn-sky: #4ab3ff;
  --reborn-stadium-orange: #f57c1c;
  --reborn-stadium-red: #e23b2c;
  --font: 'uRegular', Helvetica, Arial, sans-serif;
  --radius-btn: 4px;
  --radius-card: 20px;
  --game-card-width: 28.125rem; /* 450px */
  --reborn-header-height: 52px;
  --pitch-height: 28rem; /* 448px */
  --ball-size: 3.2875rem; /* 52.6px — 5 px bigger in diameter than the previous 47.6 px */
  --keeper-size: 8.125%; /* relative to pitch width */
  /* Feet on the goal-line (the white line that runs along the foot
     of the goal posts where they stand on the pitch). Tuned for the
     125 %-scaled pitch background. */
  --keeper-bottom: calc(50% + 50px);
  /* Mobile pitch is narrower than the source image's aspect ratio,
     so `cover` resolves to "fill height". `auto 87.5%` is a 0.875×
     scale of that fit — i.e. 30 % smaller than the previous
     `auto 125%`, which made the gate read too large on phones. */
  --pitch-bg-size: auto 87.5%;
  --pitch-bg-position: center top;

  --gizzmo-cta: rgb(110, 201, 62);
  --gizzmo-cta-hover: #5ba533;
}

@media (min-width: 768px) {
  :root {
    --reborn-header-height: 62px;
    --game-card-width: 58.125rem; /* 930px */
    --pitch-height: 34rem; /* 544px */
    --ball-size: 4.8125rem; /* 77px — 5 px bigger in diameter than the previous 72 px */
    --keeper-size: 5.2%;
    /* Feet on the goal-line on desktop — see comment on the mobile
       value above. */
    --keeper-bottom: calc(44% - 25px);
    /* Desktop pitch is wider than the image, so `cover` resolves to
       "fill width". `125% auto` is a 1.25× scale of that fit. */
    --pitch-bg-size: 125% auto;
    --pitch-bg-position: center 35%;
  }
}

/* ------------------------------------------------------------------
   iPad-portrait (768 – 1024 px)
   - Stadium image scaled an extra 20 % (125 % → 150 %) so the goal
     reads bigger on the larger device.
   - Image anchored right under the orange title bar instead of
     being vertically centred in the pitch, and the pitch height is
     capped so no plain-grass strip appears below the artwork.
   - Keeper repositioned so his feet still land on the new goal
     line at the vertical centre of the top-aligned image (using
     `vw` so the value tracks the actual image height, which is
     ≈ pitch width on iPad-portrait). The −25 px nudge keeps the
     same offset the user is happy with on desktop.
   ------------------------------------------------------------------ */
/* Mobile (<768 px): lift the ball + hand off the bottom so they
   sit higher up the field, in front of the smaller goal. */
@media (max-width: 767px) {
  .pitch__ball,
  .pitch__hand {
    bottom: 12% !important;
  }
}

/* Small phones (<400 px): anchor the ball + hand to viewport WIDTH
   instead of pitch height, mirroring the keeper rule below. With
   bg-size `calc(312.333% − 66.667px) auto` and bg-position `center
   top`, the foreground-grass strip where the ball should sit lands at
   ~66 % of the image height = `(137.43vw − 29.33px)` from the pitch
   top, regardless of how tall the pitch is — so the ball/hand stay on
   that same artwork line on both Chrome emulator and real Safari.
   The extra −125 px pushes the ball/hand well down onto the foreground
   grass so on iPhone 12 Pro–class devices (390 px wide, Safari with
   bottom toolbar) AND on narrower Androids like Galaxy S24 (360 px
   wide — where the vw-based formula would otherwise put the ball even
   higher) they all sit clearly in front of the keeper line instead
   of floating up toward the net. */
@media (max-width: 399px) {
  .pitch__ball,
  .pitch__hand {
    bottom: calc(100% - 137.43vw + 29.33px - 125px) !important;
  }
}

@supports (height: 100dvh) {
  @media (max-width: 767px) {
    .pitch__ball,
    .pitch__hand {
      /* `(100vh − 100dvh)` is the *combined* height of always-on
         browser chrome — on iPhone Safari that's BOTH the top URL bar
         (~80 px) AND the bottom toolbar (~85 px), totalling ~165 px.
         We only want to clear the bottom one, so cap the lift at 80 px
         (enough for any realistic bottom toolbar) — that way Pixel 8
         and similar Androids still rise above their URL bar without
         iPhone Pro Max overshooting into the goal area. */
      bottom: calc(12% + min((100vh - 100dvh), 80px)) !important;
    }
  }

  @media (max-width: 399px) {
    .pitch__ball,
    .pitch__hand {
      bottom: calc(100% - 137.43vw + 29.33px - 125px + min((100vh - 100dvh), 80px)) !important;
    }
  }
}

/* ------------------------------------------------------------------
   iPhone-only extra lift.

   `html.is-ios` is added by script.js using `navigator.userAgent`
   sniffing — it's set ONLY on iPhones / iPads, never on Android
   Chrome / Firefox / desktop. Using a JS class is more reliable
   than `@supports (-webkit-touch-callout: none)`, which can leak
   through to Android Chrome.

   Why iPhones need more lift than Android:
     • iOS Safari has a *bottom* toolbar (~100–120 px) on top of
       its top URL bar. Android Chrome only has a top URL bar — no
       bottom toolbar at all.
     • The cross-platform `min((100vh − 100dvh), 80px)` lift above is
       enough to clear an Android URL bar but NOT a full iOS bottom
       toolbar, which is why the ball/hand were sitting behind the
       toolbar on iPhone 13 / 16 Pro while looking fine on Pixel 8.
     • These rules add 60 px of extra lift on top of the dvh lift,
       so iPhones get the ball/hand well above the toolbar.

   Placed AFTER the cross-platform @supports (height: 100dvh) block
   so it wins over those rules on iOS by source order at equal
   specificity (selector specificity is also +1 thanks to `html`). */
/* Mobile baseline (everything <768 px wide). STATIC constant — no
   dvh-based lift. Reason: Safari's bottom URL bar toggles between
   expanded (~80 px tall) and compact (~0 px) between sessions, so
   `min((100vh − 100dvh), 80px)` returned 0 in some BrowserStack
   sessions and 80 in others, producing an 80 px swing between two
   near-identical phones (iPhone 13 vs iPhone 15) and between two
   reloads on the same device.

   Selector is `html .pitch__ball` (specificity 0,1,1) — NOT
   `html.is-ios …` — so the rule wins over the cross-platform
   `.pitch__ball` (0,1,0) rules above even when the `is-ios` class
   isn't set (which can happen in some BrowserStack iframes / private
   browsing). The narrower width bands below override this baseline. */
@media (max-width: 767px) {
  html .pitch__ball,
  html .pitch__hand {
    bottom: calc(12% + 100px) !important;
  }
}

/* iPhone 13 / 14 / 12 / SE / Mini (≤392 px wide). Lifted 15 px higher
   than the iPhone 15 band because the shorter viewport (844 px on
   iPhone 13 vs 852 px on iPhone 15) means a slightly shorter pitch
   and we want the ball to sit a touch higher to avoid grazing the
   Safari URL bar. */
@media (max-width: 392px) {
  html .pitch__ball,
  html .pitch__hand {
    bottom: calc(12% + 115px) !important;
  }
}

/* iPhone 15 / 14 Pro / 15 Pro / 16 / 16 Pro (393–419 px wide). 50 px
   lower than the iPhone 13 band — the taller viewport gives a taller
   pitch, so the ball naturally sits higher up in viewport space and
   needs to be pulled down to land on the foreground grass instead of
   near the keeper. */
@media (min-width: 393px) and (max-width: 419px) {
  html .pitch__ball,
  html .pitch__hand {
    bottom: calc(12% + 50px) !important;
  }
}

/* iPhone Pro Max + large Android (≥420 px wide). Even bigger / taller
   screens mean the +50 px lift from the 15 band is still too much;
   +10 px keeps the ball on the foreground grass. */
@media (max-width: 767px) and (min-width: 420px) {
  html .pitch__ball,
  html .pitch__hand {
    bottom: calc(12% + 10px) !important;
  }
}

/* ------------------------------------------------------------------
   Short-screen override (viewport HEIGHT < 690 px).

   On a short viewport — landscape phones, DevTools with a short
   custom height, etc. — the width-based vw formulas above can drop
   the ball off-screen (the formulas assume a tall pitch). This rule
   ignores width entirely and pushes the ball/hand 10 px UP from the
   mobile baseline so they sit comfortably on the short pitch.

   The selector list mirrors both the cross-platform mobile rules
   (`.pitch__ball`) AND the iPhone-only rule (`html.is-ios
   .pitch__ball`) above. That way:
     • For non-iOS, `html .pitch__ball` (specificity 0,1,1) beats
       the plain `.pitch__ball` mobile rules (0,1,0).
     • For iOS, `html.is-ios .pitch__ball` (specificity 0,2,1)
       matches the iPhone rule's specificity exactly, so source
       order decides — and this rule comes later, so it wins.

   Result: on any device shorter than 690 px, this single rule
   applies, regardless of platform or screen width.
   ------------------------------------------------------------------ */
@media (max-height: 689px) {
  html .pitch__ball,
  html .pitch__hand,
  html.is-ios .pitch__ball,
  html.is-ios .pitch__hand {
    bottom: calc(12% - 10px) !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --pitch-bg-size: 150% auto;
    --pitch-bg-position: center top;
    /* The goal line lives at 50 % of the pitch *width* (= the image
       height at `150% auto`), and the keeper's feet should sit
       15 px above it. Express that as `pitch_height − 50 % pitch_width
       + 15 px` using `cqw` so the value is anchored to the pitch
       width — not the viewport width — and stays correct even when
       the game-card max-width (930 px) clamps the pitch narrower
       than the viewport (e.g. on ~1024 px-wide tablets). */
    --keeper-bottom: calc(100% - 50cqw + 15px);
    /* Ball + hand 20 % smaller on iPad-portrait so they don't read
       oversized against the 150 %-scaled goal image. Hand width is
       defined as a fraction of --ball-size, so it shrinks with it. */
    --ball-size: 3.85rem; /* 77 px × 0.8 = 61.6 px */
  }

  .pitch {
    /* Enables `cqw` units on descendants (used by --keeper-bottom). */
    container-type: inline-size;
    /* Cap pitch height to the smaller of the viewport width and the
       game-card max — both approximate the image height at `150 % auto`
       and prevent a strip of plain grass appearing below the image. */
    max-height: min(100vw, 930px);
  }

  /* Lift the ball + hand off the very bottom edge so they sit on
     the field in front of the goal instead of at the foot of the
     screen. */
  .pitch__ball,
  .pitch__hand {
    bottom: 45%;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* `100vh` fallback for older browsers without `dvh` support. `100dvh`
     wins in modern Safari/Chrome and matches the *visible* viewport
     (excluding Safari's top URL bar + bottom toolbar). Using `100vh`
     here previously made the body ~177 px taller than the visible
     area on iPhone X, which caused iOS Safari to auto-scroll the
     page on load and hide the black header above the viewport. */
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
  font-family: var(--font);
  color: var(--reborn-text);
  background: var(--reborn-gray--light);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

body.is-flicking {
  overflow: hidden;
  touch-action: none;
}

body.has-win-popup {
  overflow: hidden;
}

/* ============================================================
   Header (matches the fortune-cookie SI/HR promo header)
   ============================================================ */

.site-topbar {
  flex-shrink: 0;
  width: 100%;
  background: #0b1123;
}

.site-topbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  height: 62px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 5px 24px 0;
}

.site-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #ffffff;
  opacity: 0.7;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.15s ease-in-out;
}

.site-topbar__link:hover,
.site-topbar__link:focus-visible {
  opacity: 1;
  color: #ffffff;
}

.site-topbar__link--back {
  justify-self: start;
}

.site-topbar__link--phone {
  justify-self: end;
}

.site-topbar__icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.site-topbar__link-text {
  white-space: nowrap;
}

.site-topbar__logo {
  justify-self: center;
  display: block;
  line-height: 0;
  flex-shrink: 0;
}

.site-topbar__logo img {
  display: block;
  width: 168px;
  height: auto;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .site-topbar__inner {
    padding: 5px 16px 0;
    gap: 14px;
  }

  .site-topbar__link {
    font-size: 13px;
  }
}

@media (max-width: 767px) {
  .site-topbar__inner {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    height: 64px;
    padding: 0 14px;
  }

  .site-topbar__link-text {
    display: none; /* only the icon shows on small screens, like the reference */
  }

  .site-topbar__logo img {
    width: 154px;
  }
}

/* ============================================================
   Page + game card (full-screen, no frame)
   ============================================================ */

.page {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  padding: 0;
  isolation: isolate;
  background: var(--reborn-pitch-grass);
}

@media (max-width: 767px) {
  .page {
    min-height: calc(100svh - var(--reborn-header-height));
    min-height: calc(100dvh - var(--reborn-header-height));
  }
}

.game-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  text-align: center;
  border-radius: 0;
  box-shadow: none;
}

.game-card__hero {
  position: relative;
  z-index: 2;
  padding: 14px 22px 10px 22px;
  background: linear-gradient(
    150deg,
    var(--reborn-stadium-red) 0%,
    var(--reborn-stadium-orange) 100%
  );
  color: var(--reborn-white);
}

.game-card__title {
  margin: 0 0 6px;
  /*font-family: 'Mattone', sans-serif;*/
  font-family: 'uMedi', var(--font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--reborn-white);
  text-align: center;
}

.game-card__subcopy {
  margin: 0;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--reborn-white);
}

@media (min-width: 768px) {
  .game-card__hero {
    padding: 18px 20px 17px 20px;
  }

  .game-card__title {
    font-size: 24px;
  }

  .game-card__subcopy {
    font-size: 1.05rem;
  }
}

@media (min-width: 1024px) {
  .game-card__hero {
    padding: 24px 28px 22px;
  }

  .game-card__title {
    font-size: 32px;
  }
}

.game-card__subcopy strong {
  font-family: 'uMedi', var(--font);
  font-weight: 400;
}

/* ============================================================
   Pitch — the playing area with goal at top, ball at bottom
   ============================================================ */

.game-card__play {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: stretch;
  padding: 0;
  min-height: 0;
  touch-action: manipulation;
}

.pitch {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: var(--pitch-height);
  overflow: hidden;
  background-color: var(--reborn-pitch-grass);
  background-image: url('./images/bg-flick-soccer.webp');
  background-repeat: no-repeat;
  background-position: var(--pitch-bg-position);
  background-size: var(--pitch-bg-size);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 767px) {
  .pitch {
    background-size: auto 122% !important;
  }

  .pitch__keeper {
    bottom: calc(50% - 50px) !important;
  }
}

/* Small phones (<400 px): anchor the stadium image to viewport WIDTH
   instead of pitch height. The calc() locks the image width to
   `(viewport − 20px) / gate-fraction`, where the gate occupies ~30 %
   of the image's width — so the gate ends up exactly 10 px from each
   screen edge on every device width, regardless of how much vertical
   space the Safari / Chrome chrome eats up. */
@media (max-width: 399px) {
  .pitch {
    background-size: calc(312.333% - 66.667px) auto !important;
  }

  /* Keeper anchored to viewport WIDTH instead of pitch height, so his
     feet land on the same artwork line — the goal line / front of the
     net — on every device. The image is `(312.333vw − 66.667px) / 1.5`
     tall, anchored to the pitch top by bg-position. The goal line sits
     at ~50 % of the image height, so it ends up at
     `(104.111vw − 22.222px)` from the pitch top; subtract from 100 %
     to get the bottom offset. This kills the Chrome-emulator vs
     real-Safari discrepancy where calc(50% − 40px) shifted with the
     pitch height. */
  .pitch__keeper {
    bottom: calc(100% - 104.111vw + 22.222px) !important;
  }
}

/* On the smallest phones (≤385 px) keep the keeper ~20 px higher up
   the image so he still reads inside the goal mouth at narrow widths. */
@media (max-width: 385px) {
  .pitch__keeper {
    bottom: calc(100% - 104.111vw + 42.222px) !important;
  }
}

/* Soft vignette so the corner stadium graphics fade nicely into the
   card rather than ending with a hard rectangle edge. */
.pitch::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

/* ----------------------------------------------------------------
   Goalkeeper — bobs left/right inside the goal mouth waiting for
   the ball. JS pauses the animation when the user takes their
   shot so the ball can be aimed past the keeper.
   ---------------------------------------------------------------- */

.pitch__keeper {
  position: absolute;
  bottom: var(--keeper-bottom);
  left: 50%;
  z-index: 4;
  width: var(--keeper-size);
  margin-left: calc(var(--keeper-size) / -2);
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: keeper-bounce 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}

.pitch__keeper svg {
  display: block;
  width: 100%;
  height: auto;
}

.pitch__keeper.is-frozen {
  animation-play-state: paused;
}

/* Failed dive — keeper tumbles down to the left, lands almost flat
   on the grass. */
.pitch__keeper.is-dive-left {
  animation: none;
  transform: translate3d(-260%, 25%, 0) rotate(-78deg);
  transition: transform 0.55s cubic-bezier(0.34, 1.45, 0.64, 1);
}

@keyframes keeper-bounce {
  0%   { transform: translateX(-180%); }
  100% { transform: translateX(180%); }
}

/* The interactive ball. Positioned absolutely at the bottom-centre of
   the pitch; JS translates it during a flick. */
.pitch__ball {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 5;
  width: var(--ball-size);
  height: var(--ball-size);
  margin-left: calc(var(--ball-size) / -2);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
  transition: transform 0s linear;
  will-change: transform;
}

.pitch__ball:active {
  cursor: grabbing;
}

.pitch__ball svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pitch__ball.is-flying {
  /* JS controls the path via inline transform; we just want a smooth
     ease-out as the ball arcs towards the goal. */
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pitch__ball.is-scored {
  /* Held in place after settling on the goal line. The flight + bounce
     transforms are driven by JS so the ball can land on the keeper's
     vertical line regardless of pitch size. */
  opacity: 0.97;
}

/* Animated hand hint — sits on the ball and slides upward to teach the
   user the drag gesture. No fading: the hand is fully visible going
   up, then instantly hides at the top and snaps back to the start. */
.pitch__hand {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 6;
  width: calc(var(--ball-size) * 0.8);
  height: auto;
  /* Centre the hand horizontally on the ball, with the wrist sitting
     on top of the ball and the index finger leaning up toward the goal. */
  margin-left: calc(var(--ball-size) * -0.4);
  margin-bottom: calc(var(--ball-size) * 0.5);
  pointer-events: none;
  transform-origin: 50% 92%;
  animation: flick-hint 1.6s cubic-bezier(0.55, 0.06, 0.32, 1) infinite;
}

.pitch__hand img,
.pitch__hand svg {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

.pitch__hand.is-hidden {
  display: none;
}

@keyframes flick-hint {
  0%   { transform: translateY(0)     rotate(-30deg); visibility: visible; }
  45%  { transform: translateY(-140%) rotate(-30deg); visibility: visible; }
  46%  { transform: translateY(-140%) rotate(-30deg); visibility: hidden; }
  99%  { transform: translateY(0)     rotate(-30deg); visibility: hidden; }
  100% { transform: translateY(0)     rotate(-30deg); visibility: visible; }
}

/* Score flash that briefly appears when the ball hits the back of the net. */
.pitch__score {
  position: absolute;
  inset: 0;
  /* Sits above every in-game layer (background, net, keeper at 6,
     ball at 5, hand) but stays below the win popup (100) so the
     flash never overlaps the modal. */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  /*font-family: 'Mattone', sans-serif;*/
  font-family: 'uMedi', var(--font);
  font-size: clamp(3.5rem, 17vw, 5.6rem);
  /* Default = "Poskusi še." / "Pokušaj još." colour → stadium
     orange. The goal flash overrides this with brand green via
     `.is-goal` below. This way the miss text can never flash green
     during fade-in / fade-out. */
  color: var(--reborn-stadium-orange);
  text-shadow:
    0 2px 0 var(--reborn-white),
    0 4px 0 rgba(0, 0, 0, 0.25),
    0 8px 22px rgba(0, 0, 0, 0.65),
    0 0 32px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.02em;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
  transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.3s ease;
}

@media (max-width: 767px) {
  .pitch__score {
    top: 240px;
    align-items: flex-start;
  }
}

.pitch__score.is-visible {
  opacity: 1;
  transform: scale(1);
}

.pitch__score.is-miss {
  /* "Poskusi še." / "Pokušaj još." is longer than "Goool!", so we
     keep the font a touch smaller; the colour is already stadium
     orange from the default `.pitch__score` rule above, and the
     beefed-up text-shadow is inherited too. */
  font-size: clamp(2.5rem, 12vw, 4.2rem);
}

.pitch__score.is-goal {
  /* "Goool!" — brand green. Applied by flickIntoGoal() once the
     ball has reached the net. */
  color: var(--reborn-cta);
}

/* ============================================================
   Shared "game" elements (popup) — matches the other games so
   the look is consistent across the funnel.
   ============================================================ */

.game__title {
  margin: 0 0 20px;
  /*font-family: 'Mattone', sans-serif;*/
  font-family: 'uMedi', var(--font);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--reborn-heading);
  text-align: center;
}

.game__subtitle {
  margin-bottom: 22px;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--reborn-text);
}

.btn {
  display: block;
  width: 100%;
  max-width: 328px;
  margin: 0 auto;
  padding: 18px 32px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: 'uMedi', var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.btn--primary {
  color: var(--reborn-white);
  background: var(--reborn-cta);
}

.btn--primary:hover:not(:disabled) {
  background: var(--reborn-cta-hover);
}

.btn--primary:active:not(:disabled) {
  opacity: 0.92;
}

.btn--primary__gizzmo {
  color: var(--reborn-white);
  background: var(--gizzmo-cta);
}

.btn--primary__gizzmo:hover:not(:disabled) {
  background: var(--gizzmo-cta-hover);
}

.win-popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.win-popup[hidden] {
  display: none;
}

.win-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(55, 60, 75, 0.55);
  backdrop-filter: blur(4px);
}

.win-popup__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 750px;
  padding: 36px 24px;
  border-radius: 16px;
  background: var(--reborn-white);
  text-align: center;
  box-shadow: 0 24px 48px rgba(0, 63, 70, 0.2);
}

.win-popup__header {
  margin: 0 0 24px;
}

.win-popup__header .game__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.win-popup__header .game__title .game__subtitle {
  margin: 0;
  font-family: var(--font);
}

.win-popup__prize-box {
  width: 100%;
  max-width: 23.75rem;
  margin: 0 auto 1.5rem;
  padding: 1.5rem 1.25rem 2rem;
  border: 1px solid #e0e3e8;
  border-radius: 0.625rem;
  background: #f0f1f3;
  box-shadow: inset 0 1px 2px rgba(55, 60, 75, 0.06);
}

.win-popup__prize-value {
  margin: 0 0 6px;
  font-family: 'uMedi', var(--font);
  font-size: clamp(2.5rem, 12vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--reborn-heading);
}

.win-popup__prize-detail {
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-family: 'uMedi', var(--font);
  font-size: clamp(1rem, 4.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--reborn-heading);
}

.win-popup__disclaimer {
  margin: 1.5rem auto 0;
  max-width: 36rem;
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.4;
  color: #8a8f9a;
  text-align: center;
}

.win-popup__disclaimer a {
  color: inherit;
  text-decoration: none;
}

.win-popup__disclaimer a:hover,
.win-popup__disclaimer a:focus {
  text-decoration: underline;
}

.win-popup__disclaimer[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .win-popup__disclaimer {
    margin-top: 2.5rem;
    padding: 0;
  }

  .game__title {
    font-size: 32px;
    line-height: 1.3;
  }
}