/* ---- Fonts (team = Gotham Medium gold, odds = Gotham Book white) ---- */
@font-face {
  font-family: 'Gotham Medium';
  src: url('../assets/fonts/Gotham-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham Book';
  src: url('../assets/fonts/Gotham-Book.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* No page chrome: just the banner box at the origin (drops into an ad slot). */
body { overflow: hidden; }

/* ---- Banner box: the clickable ad surface + fixed coordinate space ----------
   Dimensions are set per size by the .b-WxH class on the container; all overlay
   coordinates below live in each size's own fixed pixel space. ---------------- */
.banner-container {
  position: relative;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  user-select: none;
}
.b-320x480 { width: 320px; height: 480px; }
.b-300x250 { width: 300px; height: 250px; }
.b-320x50  { width: 320px; height: 50px;  }

/* ---- Designer GIF (plays itself; we only overlay text) ---- */
.banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Slide-2 odds overlay (toggled in sync with the GIF's "BEST ODDS" slide) */
.odds-overlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Instant toggle (no fade): the GIF hard-cuts between slides, so the overlay
     snaps on/off with it. A fade would lag the cut on entry and bleed onto the
     next slide on exit — the tell-tale "pasted overlay" look we avoid here. */
  transition: none;
  pointer-events: none;
}
.odds-overlay.active { opacity: 1; }

/* Team names flank the VS badge (gold, Gotham Medium). */
.team {
  position: absolute;
  text-align: center;
  color: #ffde00;
  font-family: 'Gotham Medium', Arial, sans-serif;
  line-height: 1.02;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Odds values centred inside the 1 / X / 2 boxes (white, Gotham Book). */
.odd {
  position: absolute;
  text-align: center;
  color: #ffffff;
  font-family: 'Gotham Book', Arial, sans-serif;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   Per-size overlay coordinates (hand-tuned to each GIF's slide-2 artwork)
   ========================================================================== */

/* ---- 320x480 (medium portrait) ---- */
/* slide-2 1/x/2 label centres: x≈70/160/252. Each column shares one centre:
   the team name and the odd both sit on it (home over 1, away over 2). */
.b-320x480 .team { width: 104px; font-size: 13px; }
.b-320x480 .team-home { left: 70px;  top: 372px; }
.b-320x480 .team-away { left: 252px; top: 372px; }
/* Single-line names sit 3px lower (a 2-line name keeps its 372 centre). */
.b-320x480 .team.single-line { top: 375px; }
.b-320x480 .odd { width: 80px; height: 24px; line-height: 24px; font-size: 14px; }
.b-320x480 .odd-one  { left: 70px;  top: 415px; }
.b-320x480 .odd-draw { left: 160px; top: 415px; }
.b-320x480 .odd-two  { left: 252px; top: 415px; }

/* ---- 300x250 (medium rectangle) ---- */
/* Centres tuned to the green panel on slide 2: panel x≈36–263, VS at x≈152,
   labels 1/x/2 at x≈83/151/220. Each column shares one centre: the team name
   and the odd both sit on it — home over 1 (83), away over 2 (220). Team width
   matches the ~100px zone so fitTeam caps overflow. */
.b-300x250 .team { width: 92px; font-size: 10px; }
.b-300x250 .team-home { left: 83px;  top: 177px; }
.b-300x250 .team-away { left: 220px; top: 177px; }
/* Single-line names sit 3px lower (a 2-line name keeps its 177 centre). */
.b-300x250 .team.single-line { top: 180px; }
.b-300x250 .odd { width: 72px; height: 22px; line-height: 22px; font-size: 11px; }
.b-300x250 .odd-one  { left: 83px;  top: 210px; }
.b-300x250 .odd-draw { left: 151px; top: 210px; }
.b-300x250 .odd-two  { left: 220px; top: 210px; }

/* ---- 320x50 (mobile leaderboard): compact green panel on the right ----
   The panel stacks three rows in 50px: VS badge up top, 1/x/2 labels, then the
   odds slots. Team names flank the VS badge in the top row. Full names don't fit
   on one line here, so the font is tiny and wrapping is allowed (fitTeam wraps to
   ~2 lines, shrinking only if a line is still too wide); the odds font is trimmed
   to match. Centres are tuned to the new 320-wide art (see CSS comment per box). */
.b-320x50 .team { width: 56px; font-size: 4.5px; line-height: 1.05; }
/* Base top is the 2-line position: a wrapped name is nudged down 1px (to 13) on
   either side so the two stacked lines sit on the VS row.
   away is centred on label 2 (x287); home is nudged 5px right of label 1 (x208 ->
   213) so a long left name clears the panel's rounded left border. */
.b-320x50 .team-home { left: 213px; top: 13px; }
.b-320x50 .team-away { left: 287px; top: 13px; }
/* Single-line names sit ~1px lower (14) so they centre like a 2-line name. */
.b-320x50 .team.single-line { top: 14px; }
.b-320x50 .odd { width: 36px; height: 16px; line-height: 16px; font-size: 4.5px; }
.b-320x50 .odd-one  { left: 208px; top: 34.5px; }
.b-320x50 .odd-draw { left: 247px; top: 34.5px; }
.b-320x50 .odd-two  { left: 287px; top: 34.5px; }