/* ============ Tokens — matched to the real Nitrous "Silk Gloss Black" theme ============
   Source of truth: /media/sol1/1TB-Drive2/next/app/brand.css (read-only).
   Deep glossy near-black + luxe gold accent + polished chrome/silver primary.
   Red (#e4112b) is used ONLY for the logo and primary "Enter now" CTAs, exactly
   like the real site (a.btn.btn-primary override). */
:root {
  --bg: #fffaf5;            /* bright warm white page */
  --bg-2: #fff1e6;          /* soft peach secondary */
  --header: #ffffff;        /* clean white bar */
  --surface: #ffffff;       /* white card surface */
  --surface-2: #fff4ec;     /* very light warm panel */
  --surface-3: #faeee2;     /* light warm media bg */
  --ink: #1d1813;           /* warm near-black ink */
  --muted: #8a7f74;         /* warm grey */

  --accent: #ff6a13;        /* vibrant orange */
  --accent-light: #ff8c45;
  --accent-dark: #d8530a;
  --primary: #ff6a13;       /* orange primary */
  --gold: #ff9e1b;          /* warm amber for badges */
  --green: #10b981;

  /* Primary "Enter now" CTAs = bright orange with white letters. */
  --red: #ff7a1a;
  --red-dark: #f15c05;
  --red-label: #ffffff;     /* white letters on the orange CTA */

  --border: rgba(40, 25, 10, .12);
  --border-strong: rgba(40, 25, 10, .22);
  --hairline: rgba(40, 25, 10, .08);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow: 0 12px 36px rgba(80, 45, 15, .12);
  --shadow-lift: 0 22px 50px rgba(80, 45, 15, .17);
  --glow-gold: 0 14px 44px rgba(255, 106, 19, .28);
  --maxw: 1240px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head: "Space Grotesk", "Segoe UI", var(--font);
}

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

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font);
  background: #f3f3f4; /* very light grey canvas — Nitrous logo watermark via ::before */
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  min-height: 100dvh;
  /* x stays clamped; y chains to the parent page so, when the design is shown
     in the homepage iframe, scrolling past its end reveals the parent's visible
     "how it works" content instead of trapping the scroll here. */
  overscroll-behavior: none auto;
  -webkit-overflow-scrolling: touch;
}

::selection { background: var(--accent); color: var(--bg); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .3px;
  padding: 13px 26px;
  border-radius: var(--radius);
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s, filter .2s;
  white-space: nowrap;
  text-transform: uppercase;
}
/* Primary CTA = the real Nitrous red fill with gold letters. */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  border: 1.5px solid var(--accent-dark);
  color: #1a1206;
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
  box-shadow: 0 8px 22px rgba(255, 106, 19, .38), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent, transparent 30%, rgba(255,255,255,.28) 45%, rgba(255,223,0,.25) 50%, rgba(255,255,255,.28) 55%, transparent 70%, transparent);
  background-size: 300% 100%;
  animation: glitter 3s ease-in-out infinite;
  pointer-events: none;
}
.btn-primary:hover::after {
  animation-duration: .8s;
}
@keyframes glitter {
  0%   { background-position: 300% 0; }
  100% { background-position: -300% 0; }
}
@media (hover: hover) { .btn-primary:hover { background: linear-gradient(180deg, #ff8a32, #e85605); filter: brightness(1.05); transform: translateY(-2px); } }
.btn-outline { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }
@media (hover: hover) { .btn-outline:hover { background: var(--accent); color: var(--bg); } }
.btn-ghost { background: transparent; border: none; color: var(--muted); }
@media (hover: hover) { .btn-ghost:hover { color: var(--ink); } }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* ============ Top bar ============ */
.topbar { background: var(--header); color: var(--muted); font-size: 12.5px; border-bottom: 1px solid var(--hairline); }
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 7px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.topbar-tag { letter-spacing: .2px; opacity: .95; font-weight: 600; }
.topbar-social { display: flex; gap: 12px; }
.social-link { color: var(--muted); display: inline-flex; transition: color .15s; }
.social-link:hover { color: var(--accent); }

/* ============ Header ============ */
.header {
  position: sticky; top: 0; z-index: 50;
  /* dark gunmetal metal bar */
  background: linear-gradient(180deg, #43464e 0%, #34373d 48%, #282a2f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.5), 0 6px 22px rgba(0,0,0,.32);
  border-bottom: 1px solid rgba(0,0,0,.45);
  padding-top: env(safe-area-inset-top, 0px);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  height: 72px; display: flex; align-items: center; gap: 24px;
}

/* ---- Real Nitrous logo image (1400x473, height-locked) — 3D + red shimmer ---- */
.logo { display: inline-flex; align-items: center; position: relative; perspective: 700px; }
.logo-img {
  height: 40px; width: auto; display: block;
  transform: translateZ(0); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  /* layered extrusion = 3D depth, with a red edge + glow */
  filter:
    drop-shadow(0 1px 0 #8e0c1a)
    drop-shadow(0 2px 0 #6a0813)
    drop-shadow(0 4px 7px rgba(0,0,0,.55))
    drop-shadow(0 0 12px rgba(228,17,43,.5));
}
.logo:hover .logo-img { transform: rotateX(8deg) rotateY(-14deg) scale(1.05); }
/* animated red shimmer sweep, masked to the logo's exact shape */
.logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg,
    transparent 30%, rgba(255,70,85,.7) 44%, rgba(255,235,235,.95) 50%,
    rgba(255,70,85,.7) 56%, transparent 70%);
  background-size: 260% 100%; background-repeat: no-repeat;
  -webkit-mask: url("logo.png") left center / contain no-repeat;
          mask: url("logo.png") left center / contain no-repeat;
  mix-blend-mode: screen;
  animation: logo-shimmer 4s ease-in-out infinite;
}
@keyframes logo-shimmer {
  0%, 12% { background-position: 200% 0; }
  60%, 100% { background-position: -60% 0; }
}

.nav { display: flex; gap: 22px; margin-left: 10px; }
.nav-cats { display: none; } /* category shortcuts: shown only inside the mobile burger */
.nav-link {
  color: rgba(255,255,255,.8); font-weight: 600; font-size: 14px;
  padding: 6px 2px; position: relative; transition: color .2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform .2s;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { transform: scaleX(1); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.btn-signin { padding: 8px 18px; font-size: 13px; }

.cart { position: relative; color: rgba(255,255,255,.92); display: inline-flex; align-items: center; padding: 4px; }
.cart-emoji { font-size: 22px; line-height: 1; }
.cart:hover { transform: translateY(-1px) scale(1.06); }
.cart-badge {
  position: absolute; top: -6px; right: -8px;
  background: var(--accent); color: var(--bg); font-size: 11px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

.nav-toggle { display: none; flex-direction: column; gap: 4px; margin-left: auto; padding: 6px; }
.nav-toggle span { width: 24px; height: 2.5px; background: rgba(255,255,255,.92); border-radius: 2px; transition: .2s; }

/* ============ Hero ============ */
.hero { position: relative; max-width: 1150px; margin: 4px auto 0; padding: 0 10px; }
.hero-track {
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* AUTO (not smooth): the infinite-loop wrap repositions scrollLeft instantly; with
     scroll-behavior:smooth that reposition animated mid-momentum and caused the
     swipe FLICKER. Manual swipe only now (autoplay removed), so no smooth needed. */
  scroll-behavior: auto;
  overscroll-behavior-x: contain;
  /* pan-y: the browser only ever does VERTICAL (page) scrolling here — horizontal
     momentum/fling is disabled, so a fast swipe can never skid past competitions.
     Horizontal swipes are driven one-at-a-time in JS (goHero ±1). iOS + Android. */
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px; margin: -4px;
}
.hero-track::-webkit-scrollbar { display: none; }
/* Layout-shift guards: the skeleton slide shimmers until app.js swaps in real
   slides; the empty dots row + winners ticker reserve their populated heights so
   nothing below the hero jumps when data arrives. */
.hero-skel-block { background: linear-gradient(100deg, rgba(10,10,18,.06) 40%, rgba(10,10,18,.12) 50%, rgba(10,10,18,.06) 60%); background-size: 200% 100%; animation: heroSkel 1.4s ease-in-out infinite; }
@keyframes heroSkel { from { background-position: 120% 0; } to { background-position: -80% 0; } }
#hero-dots:empty { min-height: 71px; }
.nc-mq-ticker:empty { min-height: 20px; }

/* ===== Rolling Jackpot overlay — SAME look as the competition page's image
   overlay (lib/vendor/competition.js #nc-rj-css): centred gold amount with a
   JACKPOT label, dark stroke + amber glow, tabular numerals. Sized with
   container units (cqw) so the proportions match the comp page on every card /
   slide width. Covers exactly the 4:3 image area; pointer-events none. */
.card-media, .hero-slide, .lc-media { container-type: inline-size; }
/* lc-media is a 1:1 square (not 4:3) — cover the whole image box there. */
.lc-media .comp-rj-overlay { aspect-ratio: auto; bottom: 0; }
.comp-rj-overlay { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 4 / 3; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.comp-rj-overlay small { font-weight: 800; font-size: clamp(9px, 4.2cqw, 16px); line-height: 1.1; letter-spacing: .24em; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.85); text-transform: uppercase; }
.comp-rj-overlay b { font-weight: 900; font-size: clamp(18px, 12cqw, 84px); line-height: 1.05; color: #ffd54a; -webkit-text-stroke: .028em rgba(0,0,0,.9); text-shadow: 0 2px 6px rgba(0,0,0,.9), 0 0 26px rgba(255,193,7,.55); font-variant-numeric: tabular-nums; }
.hero-slide {
  /* 82% (was 90%) so the NEXT/PREVIOUS competition peeks more on each side — makes it
     obvious there's more to swipe. */
  position: relative; flex: 0 0 82%;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--border);
  background: #ffffff;
  cursor: grab; user-select: none;
}
.hero-track.dragging { cursor: grabbing; scroll-behavior: auto; }
.hero-track.dragging .hero-slide { cursor: grabbing; }
.hero-img {
  width: 100%; aspect-ratio: 4 / 3;
  background-size: cover; background-repeat: no-repeat; background-position: center;
  background-color: transparent;
  flex-shrink: 0;
}
/* Percentage bar stays readable on the bright-white card */
.hero-content .progress-bar { background: rgba(10,10,18,.12); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
/* Bar + % number on the same line */
.hero-prog-row { display: flex; align-items: center; gap: 12px; }
.hero-prog-row .progress-bar { flex: 1; height: 10px; }
.hero-pct { font-family: var(--font-head); font-weight: 900; font-size: 15px; color: var(--accent-dark); white-space: nowrap; }
/* Enter Here button with the price baked in */
.hero-enter-btn { width: 100%; margin-top: 14px; justify-content: center; gap: 10px; font-size: 15px; padding: 14px 22px; }
.hero-enter-price { background: rgba(255,255,255,.24); padding: 3px 12px; border-radius: 999px; font-weight: 900; }
.hero-enter-orig { text-decoration: line-through; opacity: .6; font-weight: 700; margin-right: 3px; }
/* Padding lives in --hc-py/--hc-px so the full-bleed LED strip below the image can
   cancel it exactly at every breakpoint (see .hero-led). */
.hero-content { position: relative; z-index: 2; color: var(--ink); --hc-py: 22px; --hc-px: 26px; padding: var(--hc-py) var(--hc-px); width: 100%; }
.hero-cashpill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold); color: #1a1407; font-weight: 800; font-size: 13px;
  padding: 5px 13px; border-radius: 999px; margin-bottom: 14px;
}
.hero-title { font-family: var(--font-head); font-size: 30px; font-weight: 900; line-height: 1.05; margin-bottom: 16px; letter-spacing: -.01em; }
.hero-progress { margin-bottom: 16px; }
.hero-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.hero-price { font-size: 28px; font-weight: 900; color: var(--accent); }
.hero-orig { font-size: 17px; color: var(--muted); text-decoration: line-through; }
.hero-enter { font-size: 16px; padding: 14px 30px; }


/* Thumbnail nav strip (replaces dots) — centred when it fits, scrolls when it doesn't */
.hero-dots {
  display: flex; gap: 10px;
  width: fit-content; max-width: 100%;
  margin: 16px auto 0; padding: 4px;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hero-dots::-webkit-scrollbar { display: none; }
.hero-thumb {
  flex: 0 0 auto; width: 84px; aspect-ratio: 4 / 3;
  padding: 0; border-radius: 11px; overflow: hidden;
  border: 2px solid transparent; background: var(--surface-2);
  opacity: .55; cursor: pointer;
  transition: opacity .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.hero-thumb-img { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; }
.hero-thumb:hover { opacity: .9; transform: translateY(-2px); }
.hero-thumb.active { opacity: 1; border-color: var(--accent); box-shadow: 0 5px 16px rgba(255,106,19,.32); }

/* ============ Progress bar ============ */
.progress-bar { height: 9px; background: rgba(40,25,10,.10); border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.12); }
.card .progress-bar { background: rgba(40,25,10,.10); }
.progress-fill {
  /* GPU-composited fill: JS sets transform: scaleX(fraction) instead of `width`,
     so the .9s fill animation doesn't reflow on Android WebView. */
  height: 100%; border-radius: 999px; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light));
  box-shadow: 0 0 12px rgba(212,175,55,.5);
  transition: transform .9s cubic-bezier(.2,.8,.2,1);
}
.progress-meta {
  display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600;
  margin-top: 6px; opacity: .92;
}
.hero-progress .progress-meta { color: #d6dce8; }
.card .progress-meta { color: var(--muted); }
.progress-meta span:last-child { color: var(--accent); font-weight: 800; }

/* ============ Stat strip ============ */
.stats { max-width: 1040px; margin: 30px auto 0; padding: 0 20px; }
.stats-inner {
  background: linear-gradient(180deg, #ffffff, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); color: var(--ink);
  display: flex; align-items: center; justify-content: center; gap: 52px;
  padding: 32px 28px; box-shadow: var(--shadow); flex-wrap: wrap;
}
.stat { text-align: center; min-width: 180px; }
.stat-num {
  font-family: var(--font-head); font-size: 42px; font-weight: 900; line-height: 1;
  letter-spacing: -.02em;
  /* glossy orange with a moving white shine sweep */
  background: linear-gradient(110deg,
    var(--accent-dark) 0%, var(--accent) 28%, #fff4e0 44%, #ffffff 50%,
    #fff4e0 56%, var(--accent) 72%, var(--accent-dark) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent-dark);
  filter: drop-shadow(0 2px 7px rgba(255,140,40,.4));
  animation: stat-shine 3.6s ease-in-out infinite;
}
@keyframes stat-shine {
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
.stat-label { font-size: 11.5px; color: var(--muted); margin-top: 9px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 600; }
.stat-divider { width: 1px; height: 56px; background: linear-gradient(180deg, transparent, var(--border-strong), transparent); }
/* Official Trustpilot TrustBox widgets (Micro Combo banner + Mini Carousel). */
.tp-banner { padding: 8px 12px 2px; }
.tp-section { max-width: 1200px; margin: 8px auto 0; padding: 0 16px 8px; }
.tp-mobile { display: none; }
@media (max-width: 640px) {
  .tp-desktop { display: none; }
  .tp-mobile { display: block; }
}

/* ============ Winners marquee ticker ============ */
.nc-mq { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--surface-2); padding: 10px 0; margin-top: 4px; }
.nc-mq-ticker { display: flex; gap: 30px; width: max-content; animation: mq 160s linear infinite; }
.nc-mq:hover .nc-mq-ticker { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.nc-mq-item { display: flex; align-items: center; gap: 10px; font-size: 14px; white-space: nowrap; color: var(--muted); }
.nc-mq-item img { width: 34px; height: 34px; border-radius: 999px; object-fit: cover; border: 1px solid var(--border-strong); flex-shrink: 0; }
.nc-mq-item b { color: var(--text); }
.nc-mq-item b.win { color: var(--accent); }

/* ============ Chips / pills ============ */
.chips-wrap { max-width: var(--maxw); margin: 30px auto 0; padding: 0 20px; position: relative; }
.chips {
  display: flex; gap: 10px; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 6px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  background: var(--surface); color: color-mix(in srgb, var(--ink) 78%, var(--bg));
  border: 1px solid var(--border-strong);
  font-weight: 700; font-size: 13px; padding: 9px 16px; border-radius: 999px;
  transition: all .2s; white-space: nowrap; flex-shrink: 0;
  scroll-snap-align: start; touch-action: pan-x pan-y pinch-zoom; cursor: pointer;
}
.chip:hover { transform: translateY(-1px); border-color: var(--primary); color: var(--ink); }
.chip.active { background: var(--primary); border-color: var(--primary); color: var(--bg); box-shadow: 0 6px 18px rgba(205,211,223,.3); }
/* Fade hint on right edge when scrollable */
.chips-wrap::after {
  content: ""; position: absolute; top: 0; bottom: 6px; right: 0; width: 40px;
  background: linear-gradient(90deg, transparent, var(--bg));
  pointer-events: none; opacity: 0; transition: opacity .3s;
}
.chips-wrap.can-scroll::after { opacity: 1; }

/* ============ Sections ============ */
.section { max-width: var(--maxw); margin: 26px auto 0; padding: 0 20px; }
.section-head { margin-bottom: 18px; }
.section-title {
  font-family: var(--font-head);
  font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink);
  position: relative; padding-bottom: 14px;
}
.section-title::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 56px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 18px rgba(205,211,223,.4);
}
.section-flame { font-size: 22px; }
.section-sub { color: var(--muted); font-size: 15px; margin-top: 12px; max-width: 64ch; }
.section.hidden-empty { display: none; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.featured-grid {
  /* FIXED card width (not 1fr) so a single/few cards stay card-sized and the row
     stays a swipeable carousel on desktop instead of stretching to one big hero. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 300px;
  gap: 16px; overflow-x: auto; padding-bottom: 10px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom; cursor: grab;
}
.featured-grid.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.featured-grid::-webkit-scrollbar { display: none; }
.featured-grid .card { scroll-snap-align: start; }
/* All Competitions list — a responsive WRAPPING grid (like /all-competitions), NOT a
   carousel. Cards flow onto new rows; 2-up on phones. */
/* Row gap stays roomy for the straddling top badges; columns tight so 2-up sits close. */
/* stretch (was start) so cards in a row are EQUAL HEIGHT — with .lc-body flex:1 and
   the draw line pinned to the bottom, every card's top/bottom edges line up. */
.allcomps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px 14px; align-items: stretch; padding-top: 20px; }
.allcomps-grid .card { width: auto; }
/* List-card design (All Competitions grid): image + ⚡ ENDS-IN banner, bold title,
   orange progress, "N sold (X%)" / "N left", and the draw date. */
.lc-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 16px; min-width: 0;
  box-shadow: 0 8px 22px rgba(0,0,0,.14); border: 2px solid #141414; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.lc-card:hover, .lc-card:active { transform: translateY(-3px); border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(34,197,94,.35), 0 12px 30px rgba(34,197,94,.45); }
/* MANDATORY 4:3 — competition artwork is designed at 4:3; anything else (this was
   1:1) crops the top/bottom off the image. Full width, cover, no distortion. */
.lc-media { position: relative; aspect-ratio: 4 / 3; background: #111; border-radius: 16px 16px 0 0; overflow: hidden; }
.lc-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.lc-card:hover .lc-img, .lc-card:active .lc-img { transform: scale(1.03); } /* ~103% zoom on hover */
.lc-endbadge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; max-width: 92%;
  background: linear-gradient(180deg, #ff9a4d, #f07d0a); color: #fff; font-weight: 800; font-size: 11px;
  letter-spacing: .2px; padding: 5px 13px; border-radius: 7px; box-shadow: 0 3px 10px rgba(0,0,0,.35); }
/* Straddles the CARD's top edge — sits almost fully above, only a sliver on the image. */
.lc-endbadge--top { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); z-index: 5; }
.lc-endbadge--mid { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); z-index: 4; }
/* flex:1 so the body fills the card — with the grid stretching every card in a row
   to the same height, this + the draw line pinned to the bottom (margin-top:auto)
   keeps every card's top and bottom edges aligned regardless of content. */
.lc-body { position: relative; background: #fff; border-radius: 0 0 16px 16px; padding: 20px 13px 13px;
  display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.lc-draws { margin-top: auto; }
.lc-title { margin: 0; font-size: 13.5px; font-weight: 800; line-height: 1.22; color: #1a1a1a; text-transform: uppercase; letter-spacing: -.01em; }
/* Admin card subtitle (legacy_meta.subtitle): uppercase, small, medium-weight grey. */
.lc-subtitle { margin: -3px 0 0; font-size: 11px; font-weight: 600; line-height: 1.2; color: #777; text-transform: uppercase; letter-spacing: .01em; }
.lc-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lc-price-now { font-size: 16px; font-weight: 900; color: #f07d0a; }
.lc-orig { font-size: 12px; color: #9ca3af; text-decoration: line-through; font-weight: 600; }
.lc-price-now.lc-sale { color: #e4112b; animation: ncSaleFlash 1.1s ease-in-out infinite; }
.lc-salebadge { background: #e4112b; color: #fff; font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 5px; letter-spacing: .4px; }
.lc-per { font-size: 11px; color: #9ca3af; font-weight: 600; }
.lc-bar { height: 8px; border-radius: 999px; background: #ececec; overflow: hidden; margin-top: 2px; }
.lc-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff9a4d, #f07d0a); min-width: 4px; }
.lc-stats { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.lc-sold { color: #6b7280; font-weight: 600; white-space: nowrap; }
.lc-left { color: #f07d0a; font-weight: 800; white-space: nowrap; }
.lc-draws { font-size: 11.5px; color: #6b7280; font-weight: 600; line-height: 1.3; }
.lc-draws::before { content: "\25CF"; color: #f07d0a; margin-right: 6px; font-size: 8px; vertical-align: middle; }
/* GAME cards in the All Competitions grid (Admin › Games › 🃏 Game Cards).
   Same .lc-card shell as a competition — purple accents + a "Play now" line so
   they read as "play", not "buy a ticket". */
.lc-game { border-color: #6d28d9; }
.lc-game:hover, .lc-game:active { border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168,85,247,.35), 0 12px 30px rgba(124,58,237,.45); }
.lc-gamepill { position: absolute; bottom: 8px; left: 8px; z-index: 3;
  background: linear-gradient(135deg, #6d28d9, #a855f7); color: #fff; font-size: 11px; font-weight: 800;
  padding: 4px 11px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.35); white-space: nowrap; }
.lc-gamebadge { position: absolute; top: 8px; right: 8px; z-index: 3;
  background: #16a34a; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .4px;
  padding: 4px 10px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.35); white-space: nowrap;
  animation: ncGameFlash 1.6s ease-in-out infinite; }
@keyframes ncGameFlash { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
.lc-gametag { margin: 0; font-size: 11.5px; font-weight: 600; line-height: 1.35; color: #6b7280; }
.lc-gamecta { margin-top: auto; font-size: 13px; font-weight: 900; color: #7c3aed; }
/* minmax(0,1fr): columns can NEVER grow past half the screen (the nowrap stats were
   forcing the grid wider than the phone, shoving the right card off-centre). */
@media (max-width: 620px) { .allcomps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 9px; } }
@media (max-width: 360px) { .allcomps-grid { grid-template-columns: 1fr; } }
.row-scroll {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
  gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x mandatory;
}
.row-scroll .card { scroll-snap-align: start; }
.row-scroll::-webkit-scrollbar { height: 8px; }
.row-scroll::-webkit-scrollbar-thumb { background: rgba(40,25,10,.2); border-radius: 999px; }

/* ============ Card ============ */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 6px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(246,248,255,.16);
  display: flex; flex-direction: column;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s, border-color .24s;
}
@media (hover: hover) {
.card:hover {
  transform: translateY(-8px) scale(1.012);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--glow-gold), 0 28px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(246,248,255,.24);
}
}
.card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--accent) 16%, var(--surface))); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-media img { transform: scale(1.05); }

.card-tag {
  position: absolute; top: 10px; left: 10px;
  background: linear-gradient(135deg, var(--accent, #ff7a1a), var(--accent-dark, #e85d04)); color: #fff; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px; padding: 5px 11px; border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,.08); box-shadow: 0 3px 10px rgba(232,93,4,.32);
}
.card-cashpill {
  position: absolute; top: 10px; right: 10px;
  background: linear-gradient(135deg, var(--accent-dark), var(--accent), var(--accent-light));
  color: #1a1407; font-size: 11.5px; font-weight: 800;
  padding: 5px 11px; border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(212,175,55,.38);
}
/* Live Competitions (coverflow) cash-alt pill: bottom-left over the image, clear of
   the wishlist heart (top-right) + header badge. Absolutely positioned = ZERO layout
   height, so cash-alt cards stay exactly the same height as the others. */
.nc-cf .card-media .card-cashpill {
  top: auto; bottom: 10px; left: 10px; right: auto; z-index: 4;
  font-size: 10.5px; padding: 4px 9px; max-width: calc(100% - 20px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Hero cash-alt pill: top-right over the hero image, clear of the top-left
   instant badge. Absolute within .hero-slide (position:relative). */
.hero-cashpill {
  top: 14px; right: 14px; left: auto; z-index: 4;
  font-size: 11px; padding: 5px 10px;
  max-width: calc(100% - 28px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-badge-end {
  position: absolute; bottom: 12px; left: 12px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; padding: 5px 11px; border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(176,12,31,.5);
  animation: pulse 1.6s infinite;
  will-change: opacity;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }

.card-body { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-family: var(--font-head); font-size: 14px; font-weight: 800; line-height: 1.25; min-height: 2.5em; color: var(--ink); }
/* Admin card subtitle (legacy_meta.subtitle) — uppercase, small, medium-weight grey. */
.card-subtitle { font-size: 11px; font-weight: 600; line-height: 1.2; color: #777; text-transform: uppercase; letter-spacing: .01em; margin: -4px 0 2px; }
.card-progress { margin-top: -2px; }

.card-date { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.card-date .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 6px rgba(212,175,55,.5); }
/* Real ticket count under the progress bar (directors wanted the number, not just %). */
.card-sold { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-top: -2px; }
.card-odds { font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.card-countdown { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; }
.card-countdown .clock { font-size: 12px; }

.card-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: auto; flex-wrap: wrap; }
/* Make the live price POP — bigger, heavier, accent-coloured (was dull/muted). */
.card-price { font-size: 19px; font-weight: 900; color: var(--accent); letter-spacing: .2px; text-shadow: 0 1px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.card-price-suffix { font-size: 12px; font-weight: 600; color: var(--muted); }
.card-orig { font-size: 13px; font-weight: 700; color: var(--muted); text-decoration: line-through; }
/* ON SALE — same line: struck original + the sale price (red, flashing) + a flashing SALE badge. */
.card-price-row.is-sale .card-price { color: #ff3b3b; animation: ncSaleFlash 1.05s ease-in-out infinite; text-shadow: 0 1px 10px rgba(255,59,59,.5); }
.card-sale-badge {
  font-size: 10px; font-weight: 900; letter-spacing: .5px; color: #fff; line-height: 1;
  background: linear-gradient(135deg, #ff4242, #c20f1c); padding: 3px 8px; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(225,29,42,.45); animation: ncSaleFlash 1.05s ease-in-out infinite;
}
@keyframes ncSaleFlash { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.card-enter { margin-top: 2px; }

/* ============ Card purchase panel (inline) ============ */
.card-purchase {
  max-height: 0; overflow: hidden;
  transition: max-height .35s cubic-bezier(.2,.8,.2,1), padding .35s;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
.card-purchase.open { max-height: 180px; }
.card-purchase-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; flex-wrap: wrap;
}
.card-purchase .stepper { flex-shrink: 0; }
.card-purchase-total {
  font-family: var(--font-head); font-size: 18px; font-weight: 900;
  color: var(--accent); white-space: nowrap; min-width: 60px;
}
.card-purchase-add { padding: 9px 18px; font-size: 13px; flex-shrink: 0; background: var(--accent); border-color: var(--accent-dark); color: var(--bg); text-shadow: none; box-shadow: 0 4px 14px rgba(212,175,55,.35); }
.card-purchase-add:hover { background: var(--accent-light); filter: brightness(1.1); }
.card-purchase-add.flash, .hero-purchase-add.flash { animation: flash-green .35s ease forwards; }
@keyframes flash-green { 0% { background: #22c55e; } 100% { background: var(--accent); } }
.card-purchase-info { padding: 9px 18px; font-size: 13px; flex-shrink: 0; background: var(--red); border-color: var(--red-dark); color: #fff; text-shadow: none; box-shadow: 0 4px 14px rgba(228,17,43,.3); }
.card-purchase-info:hover { background: #f31833; filter: brightness(1.05); }

/* Qty swipe slider */
.qty-slider {
  -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 50%, var(--border-strong) 50%);
  outline: none; cursor: pointer; min-width: 80px; flex: 1; max-width: 120px;
}
.qty-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 2px solid var(--bg); box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.qty-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 2px solid var(--bg); box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* Hero purchase panel — slides up within active slide */
.hero-purchase {
  position: absolute; bottom: 0; left: 0; right: 0;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  background: rgba(10,10,18,.96);
  border-top: 1px solid var(--border);
  z-index: 2;
}
.hero-purchase.open { transform: translateY(0); }
.hero-purchase.open .hero-purchase-inner { max-height: 180px; }
.hero-purchase-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; flex-wrap: wrap;
}
.hero-purchase .stepper { flex-shrink: 0; }
.hero-purchase-total {
  font-family: var(--font-head); font-size: 18px; font-weight: 900;
  color: var(--accent); white-space: nowrap; min-width: 60px;
}
.hero-purchase-add { padding: 9px 18px; font-size: 13px; flex-shrink: 0; background: var(--accent); border-color: var(--accent-dark); color: var(--bg); text-shadow: none; box-shadow: 0 4px 14px rgba(212,175,55,.35); }
.hero-purchase-add:hover { background: var(--accent-light); filter: brightness(1.1); }
.hero-purchase-info { padding: 9px 18px; font-size: 13px; flex-shrink: 0; background: var(--red); border-color: var(--red-dark); color: #fff; text-shadow: none; box-shadow: 0 4px 14px rgba(228,17,43,.3); }
.hero-purchase-info:hover { background: #f31833; filter: brightness(1.05); }

/* ============ Newsletter ============ */
.newsletter {
  margin-top: 60px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border-top: 1px solid var(--hairline);
  position: relative;
}
.newsletter::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.newsletter-inner { max-width: 720px; margin: 0 auto; padding: 52px 20px; text-align: center; color: var(--ink); }
.newsletter-title { font-family: var(--font-head); font-size: 32px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.newsletter-text { font-size: 16px; margin-top: 8px; color: var(--muted); }
.newsletter-form { display: flex; gap: 10px; max-width: 480px; margin: 24px auto 0; }
.newsletter-input {
  flex: 1; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--ink);
  border-radius: var(--radius); padding: 14px 18px; font-size: 15px;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.newsletter-input::placeholder { color: var(--muted); }
.newsletter-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(205,211,223,.18); }
.newsletter-btn { padding: 14px 26px; }
.newsletter-msg { min-height: 22px; margin-top: 14px; font-weight: 800; color: var(--accent); }
.newsletter-privacy { font-size: 12.5px; margin-top: 8px; color: var(--muted); }

/* ============ Footer ============ */
.footer { background: linear-gradient(180deg, var(--surface), var(--surface-2)); color: var(--muted); margin-top: 0; border-top: 1px solid var(--hairline); }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 44px 20px 28px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px;
}
.logo-footer { margin-bottom: 12px; }
.logo-footer .logo-img { height: 38px; }
.footer-blurb { font-size: 14px; line-height: 1.6; max-width: 42ch; color: var(--muted); }
.footer-pays { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.pay-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 48px; padding: 0 11px; border-radius: var(--radius-sm);
  background: #fff; color: #1a1407; font-size: 12px; font-weight: 800; letter-spacing: .3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.footer-head { color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.footer-link { display: block; font-size: 13.5px; padding: 4px 0; color: color-mix(in srgb, var(--ink) 70%, var(--bg)); width: fit-content; transition: color .2s, transform .2s; }
.footer-link:hover { color: var(--accent); transform: translateX(3px); }
.footer-company {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 20px;
  border-top: 1px solid var(--hairline); font-size: 13px; color: color-mix(in srgb, var(--ink) 62%, var(--bg)); line-height: 1.6;
}
.footer-company strong { color: var(--ink); }
.footer-postal { font-size: 12px; opacity: .75; margin-top: 4px; }
.footer-reg { margin-top: 4px; }
.footer-bottom {
  max-width: var(--maxw); margin: 0 auto;
  border-top: 1px solid var(--hairline); text-align: center;
  padding: 18px 20px; font-size: 12.5px; color: var(--muted);
}
.footer-trustpilot { color: #00b67a; font-weight: 700; margin-bottom: 6px; }

/* ============ Modal ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(3,3,8,.82);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .2s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; text-align: center;
  max-width: 380px; width: 100%; position: relative;
  box-shadow: var(--shadow-lift); transform: translateY(14px) scale(.96); transition: transform .2s;
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 12px; right: 16px; font-size: 26px; color: var(--muted); line-height: 1; }
.modal-close:hover { color: var(--ink); }
.modal-icon { font-size: 48px; margin-bottom: 10px; }
.modal-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--ink); }
.modal-text { color: var(--muted); margin: 8px 0 22px; }
.modal-ok { width: 100%; }

/* ============ Competition Details Modal ============ */
.modal-details { max-width: 680px; padding: 0; overflow: hidden auto; max-height: 92vh; max-height: 92dvh; transform: translateY(20px) scale(0.97); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.modal-overlay.open .modal-details { transform: translateY(0) scale(1); }
.details-layout { display: flex; flex-direction: column; }
.details-media { width: 100%; max-height: 260px; overflow: hidden; background: var(--surface-2); }
.details-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.details-content { padding: 24px 28px; text-align: left; }
.details-category {
  display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  padding: 4px 10px; border-radius: var(--radius-sm); background: var(--accent); color: var(--bg); margin-bottom: 10px;
}
.details-content .modal-title { font-size: 20px; }
.details-meta { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 14px; flex-wrap: wrap; }
.details-price { font-size: 22px; font-weight: 900; color: var(--accent); }
.details-cashalt { font-size: 13px; color: var(--muted); }
.details-progress { margin: 10px 0; }
.details-progress .progress-meta { font-size: 12px; }
.details-draw { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.details-draw .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); display: inline-block; }
.details-desc { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 8px 0 18px; }
.details-about { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--ink); margin: 14px 0 14px; }
.details-enter { width: 100%; }
@media (min-width: 600px) {
  .details-layout { flex-direction: row; }
  .details-media { width: 280px; max-height: none; flex-shrink: 0; }
  .details-content { flex: 1; }
}

/* ============ Purchase Bar (slide-up ticket selector) ============ */
.purchase-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(3,3,8,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.purchase-overlay.open { opacity: 1; visibility: visible; }

.purchase-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 91;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(0,0,0,.5);
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  padding: 20px 24px;
  will-change: transform;
}
.purchase-overlay.open .purchase-bar { transform: translateY(0); }

.purchase-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.purchase-info { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 220px; }
.purchase-thumb {
  width: 60px; height: 45px; border-radius: var(--radius-sm);
  object-fit: cover; flex-shrink: 0; display: block;
  border: 1px solid var(--border);
}
.purchase-meta { min-width: 0; }
.purchase-title {
  font-family: var(--font-head); font-size: 15px; font-weight: 700;
  color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.purchase-price-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.purchase-controls {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-left: auto;
}
.stepper {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-2);
}
.stepper-btn {
  width: 36px; height: 38px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: var(--ink);
  background: transparent; border: none; cursor: pointer;
  transition: background .15s, color .15s;
}
@media (hover: hover) { .stepper-btn:hover { background: var(--accent); color: var(--bg); } }
.stepper-btn:disabled { opacity: .3; cursor: default; }
.stepper-btn:disabled:hover { background: transparent; color: var(--ink); }
.stepper-value {
  min-width: 40px; text-align: center; font-weight: 800; font-size: 16px;
  color: var(--ink); font-variant-numeric: tabular-nums;
  padding: 0 4px;
}
.purchase-total {
  font-family: var(--font-head); font-size: 22px; font-weight: 900;
  color: var(--accent); white-space: nowrap; min-width: 70px; text-align: right;
}
.purchase-add { padding: 11px 24px; font-size: 14px; }
.purchase-buy { padding: 11px 24px; font-size: 14px; }
.purchase-close {
  position: absolute; top: 12px; right: 16px;
  font-size: 22px; color: var(--muted); line-height: 1; background: none; border: none; cursor: pointer;
}
.purchase-close:hover { color: var(--ink); }

/* ============ Cart Drawer (slide-in from right) ============ */
.cart-overlay {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(3,3,8,.55);
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
  will-change: opacity;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 96;
  width: 400px; max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 40px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.cart-overlay.open .cart-drawer { transform: translateX(0); }

.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--hairline); flex-shrink: 0;
}
.cart-drawer-title {
  font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.cart-drawer-count {
  font-size: 13px; font-weight: 700; color: var(--muted);
  background: var(--surface-2); padding: 2px 10px; border-radius: 999px;
}
.cart-drawer-close {
  font-size: 24px; color: var(--muted); line-height: 1; background: none; border: none; cursor: pointer; padding: 4px;
}
.cart-drawer-close:hover { color: var(--ink); }

.cart-drawer-body {
  flex: 1; overflow-y: auto; padding: 16px 24px;
  overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
}
.cart-empty {
  text-align: center; padding: 48px 0; color: var(--muted); font-size: 15px;
}
.cart-items { display: flex; flex-direction: column; gap: 14px; }

.cart-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.cart-item-img {
  width: 52px; height: 39px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--hairline);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-title {
  font-size: 14px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-price {
  font-size: 13px; color: var(--muted); margin-top: 2px;
}
.cart-item-qty {
  display: flex; align-items: center; gap: 6px;
}
.cart-item-qty-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px;
  cursor: pointer; transition: background .15s, color .15s;
}
@media (hover: hover) { .cart-item-qty-btn:hover { background: var(--accent); color: var(--bg); } }
.cart-item-qty-btn:disabled { opacity: .3; cursor: default; }
.cart-item-qty-btn:disabled:hover { background: var(--surface); color: var(--ink); }
.cart-item-qty-val {
  min-width: 24px; text-align: center; font-weight: 800; font-size: 14px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.cart-item-total {
  font-weight: 800; font-size: 15px; color: var(--accent); white-space: nowrap;
  min-width: 60px; text-align: right;
}
.cart-item-remove {
  font-size: 18px; color: var(--muted); background: none; border: none; cursor: pointer;
  padding: 4px; line-height: 1;
}
.cart-item-remove:hover { color: #ef4444; }

.cart-drawer-footer {
  border-top: 1px solid var(--hairline); padding: 20px 24px; flex-shrink: 0;
}
.cart-total-row {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--ink);
  margin-bottom: 16px;
}
.cart-total-amount {
  font-size: 24px; font-weight: 900; color: var(--accent);
}
.cart-checkout { margin-bottom: 10px; }
.cart-clear {
  width: 100%; justify-content: center; font-size: 13px; color: var(--muted);
}

/* ============ Toast notification ============ */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); z-index: 99;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 24px;
  box-shadow: var(--shadow-lift); font-size: 14px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s, transform .25s;
  white-space: nowrap;
  will-change: transform, opacity;
}
.toast.show { opacity: 1; visibility: visible; }
.toast-icon { font-size: 20px; }

/* ============ Responsive ============ */
@media (max-width: 860px) {
  .nav, .header-actions { display: none; }
  .nav-toggle { display: flex; }
  /* Open burger = a fixed, SCROLLABLE menu panel below the header bar, with the
     Sign-in/cart pinned to the bottom so they're ALWAYS fully visible however many
     categories are expanded. */
  .header.open .nav {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; left: 0; right: 0;
    top: calc(72px + env(safe-area-inset-top, 0px)); bottom: 68px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, #34373d, #282a2f);
    padding: 8px 20px 20px; box-shadow: 0 10px 20px rgba(0,0,0,.5);
    border-bottom: 1px solid rgba(0,0,0,.45);
  }
  .header.open .nav-link { padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .header.open .nav-cats { display: flex; flex-direction: column; gap: 0; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.18); }
  /* Tap "Browse competitions" to reveal the category chips (collapsed by default). */
  .nav-cats-head { display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: none; color: rgba(255,255,255,.85); font: inherit; font-size: 15px; font-weight: 700;
    padding: 11px 2px; cursor: pointer; text-align: left; }
  .nav-cats-chev { transition: transform .2s ease; font-size: 12px; opacity: .8; }
  .nav-cats.open .nav-cats-chev { transform: rotate(180deg); }
  .nav-cats-list { display: none; flex-wrap: wrap; gap: 8px; padding: 6px 0 4px; }
  .nav-cats.open .nav-cats-list { display: flex; }
  .nav-cat { flex: 0 0 auto; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.95); font: inherit; font-size: 13px; font-weight: 700; padding: 9px 13px; border-radius: 999px; cursor: pointer; }
  .nav-cat.active, .nav-cat:active { background: #ff8a32; border-color: #ff8a32; color: #1a1a1a; }
  .header.open .header-actions {
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 51;
    background: linear-gradient(180deg, #2b2d33, #232529);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 18px rgba(0,0,0,.4);
  }
  .header.open .header-actions .btn-signin { flex: 1; }
  .hero-title { font-size: 28px; }
  .hero-content { --hc-py: 28px; --hc-px: 26px; }
  .hero-slide { flex-basis: 80%; }
}
@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .featured-grid { gap: 12px; grid-auto-columns: 75%; touch-action: pan-x pan-y pinch-zoom; }
  .row-scroll { grid-auto-columns: 82%; }
  .stats-inner { gap: 18px; }
  .stat-divider { display: none; }
  .stat-num { font-size: 26px; }
  .newsletter-form { flex-direction: column; }
  .hero-title { font-size: 24px; }
  .section-title { font-size: 24px; }

  /* Inline purchase panel mobile */
  .card-purchase-inner { flex-wrap: wrap; gap: 10px; }
  .card-purchase-inner .stepper { order: 0; }
  .card-purchase-inner .qty-slider { order: 1; flex: 1 1 80px; max-width: none; }
  .card-purchase-total { order: 2; min-width: 50px; font-size: 16px; }
  .card-purchase-add { order: 3; flex: 1; padding: 9px 12px; font-size: 12px; }
  .card-purchase-info { order: 4; flex: 1; padding: 9px 12px; font-size: 12px; }

  .hero-purchase-inner { flex-wrap: wrap; gap: 10px; }
  .hero-purchase-inner .stepper { order: 0; }
  .hero-purchase-inner .qty-slider { order: 1; flex: 1 1 80px; max-width: none; }
  .hero-purchase-total { order: 2; min-width: 50px; font-size: 16px; }
  .hero-purchase-add { order: 3; flex: 1; padding: 9px 12px; font-size: 12px; }
  .hero-purchase-info { order: 4; flex: 1; padding: 9px 12px; font-size: 12px; }

  /* Cart drawer mobile */
  .cart-drawer { width: 100vw; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
@media (max-width: 480px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .featured-grid { gap: 10px; }

  .mobile-hide { display: none; }
  .hero-title { font-size: 20px; }
  .hero-content { --hc-py: 20px; --hc-px: 20px; }
  .hero-thumb { width: 64px; }
  .section-title { font-size: 20px; }
  .section { padding: 28px 14px; }
}
@media (hover: none) and (pointer: coarse) {
  .btn:hover { transform: none; filter: none; }
  .btn:active { transform: scale(0.97); }
  .card:hover { transform: none; }
  .card:active { transform: scale(0.98); transition-duration: .1s; }
  .nav-link:hover::after { transform: scaleX(0); }
  .stepper-btn:hover { background: transparent; color: var(--ink); }
  .stepper-btn:active { background: var(--accent); color: var(--bg); }
}

/* Safe area helpers for notched iOS devices */
@supports (padding-top: env(safe-area-inset-top)) {
  .footer { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .cart-drawer-header { padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
  .cart-drawer-footer { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .purchase-overlay { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Landscape phone adjustments */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-content { --hc-py: 16px; --hc-px: 20px; }
  .hero-title { font-size: 18px; }
  .hero-enter { font-size: 12px; padding: 8px 18px; }
  .stat-num { font-size: 22px; }
  .stats-inner { padding: 14px 16px; gap: 14px; }
  .nav-link { font-size: 12px; padding: 4px 8px; }
}

/* Carousel card overrides — prevent bleed from base .card styles */
.nc-cf .card { display: flex; flex-direction: column; }
.nc-cf .card:hover { transform: none; }
.nc-cf .card-media { background: var(--surface-3); }
.nc-cf .card:hover .card-media img { transform: none; }

/* ============ Swipeable carousel (drag + native swipe + arrows) ============ */
.nc-cf-wrap { position: relative; }
.nc-cf { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; padding: 16px 4px 24px; touch-action: pan-x pan-y pinch-zoom;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: auto; -webkit-overflow-scrolling: touch; cursor: grab; }
.nc-cf::-webkit-scrollbar { display: none; }
.nc-cf.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.nc-cf-nav { position: absolute; top: 46%; transform: translateY(-50%); z-index: 6; width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); box-shadow: var(--shadow); font-size: 20px; user-select: none; transition: all .2s cubic-bezier(.2,.8,.2,1); }
.nc-cf-nav.prev { left: -8px; } .nc-cf-nav.next { right: -8px; }
.nc-cf-nav:hover { box-shadow: 0 0 0 1px rgba(212,175,55,.5), 0 10px 30px rgba(200,16,46,.3); border-color: var(--accent); transform: translateY(-50%) scale(1.06); }
@media (max-width: 760px) { .nc-cf-nav { display: none; } }

/* ============ Flip cards ============ */
.nc-cf .card { flex: 0 0 84%; max-width: 300px; scroll-snap-align: center; height: 552px; perspective: 1300px;
  background: transparent; border: none; box-shadow: none; overflow: visible; border-radius: var(--radius-lg); }
.card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2,.85,.25,1); }
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: box-shadow .2s cubic-bezier(.2,.8,.2,1), border-color .2s cubic-bezier(.2,.8,.2,1); }
.card.lift:hover .card-face { border-color: var(--border-strong); box-shadow: var(--shadow-lift); }
.card-back { transform: rotateY(180deg); padding: 22px; justify-content: center; align-items: stretch; gap: 14px; text-align: center; }
.card-back .card-title { font-size: 18px; }
.card-back .btn { width: 100%; }
.nc-cf .card-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-3); flex: 0 0 auto; }
.nc-cf .card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.03); }
.nc-cf .card-media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  /* Was a heavy near-black bottom gradient (made the cards look black, esp. with dark
     prize photos). The title/price now live in the white body below the image, so the
     dark scrim isn't needed — keep only a whisper for grounding. */
  background: linear-gradient(180deg, transparent 86%, rgba(7,7,12,.14)); box-shadow: inset 0 1px 0 var(--border-strong); }
/* Shine sweep on hover */
.nc-cf .card-front::before { content: ""; position: absolute; top: 0; left: -60%; width: 55%; height: 100%; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg);
  opacity: 0; transition: left .7s cubic-bezier(.2,.8,.2,1), opacity .2s cubic-bezier(.2,.8,.2,1); }
.nc-cf .card.lift:hover .card-front::before { left: 125%; opacity: 1; }
.nc-cf .flip-hint { position: absolute; bottom: 10px; right: 10px; z-index: 4; font-size: 11px; padding: 4px 9px; border-radius: 999px;
  background: rgba(0,0,0,.62); color: #fff; pointer-events: none; }
.nc-cf .card-header { padding: 10px 12px 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nc-cf .card-badge { position: static; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(180deg, var(--red), var(--red-dark)); color: #fff; border: 1px solid var(--accent-dark); }
.instant-badge-inline { position: static; top: auto; left: auto; box-shadow: none; }
.nc-cf .card-body { padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.nc-cf .card-title { font-size: 16px; font-weight: 700; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Live Competitions price was dull (muted, 14px) — make it stand out like the rest. */
.nc-cf .card-price { font-size: 18px; color: var(--accent); font-weight: 900; }
.nc-cf .card-price-row { margin-top: 0; }
.nc-cf .card-price-row.is-sale .card-price { color: #ff3b3b; }
.nc-cf .nc-enter-btn { margin-top: auto; padding: 10px 12px; font-size: 13px; font-weight: 700; width: 100%; }
/* Quick Enter (slider popup) + Enter (full-screen slug page) — STACKED full-width. */
.nc-cf .nc-card-actions { margin-top: auto; display: flex; flex-direction: column; gap: 7px; }
.nc-cf .nc-card-actions .nc-enter-btn { margin-top: 0; width: 100%; }
.nc-cf .nc-info-btn { width: 100%; padding: 10px 12px; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* Top-centre ending pill on the card image (directors' blue "days left" pill;
   flashes red when it ends today). */
.nc-cf .card-media .nc-end-pill,
.allcomps-grid .card-media .nc-end-pill,
.featured-grid .card-media .nc-end-pill { position: absolute; bottom: 10px; left: 10px; top: auto; transform: none; z-index: 5;
  background: #f5820a; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .2px;
  padding: 5px 14px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.4); white-space: nowrap; }
.nc-end-pill.is-today { background: var(--red, #d11218); animation: ncEndFlash 1s ease-in-out infinite; }
/* "NEW" badge (green) — shown for competitions within their admin-set new-badge window. */
.card-new-badge { position: absolute; top: 10px; right: 10px; z-index: 6;
  background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; font-size: 11px; font-weight: 900;
  letter-spacing: .4px; padding: 4px 10px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.35); white-space: nowrap; }
/* Compact badges on the dense All Competitions grid cards, placed in the corners so
   the image AND the info stay clearly visible (they were covering the photo). */
.allcomps-grid .card-tag,
.allcomps-grid .card-cashpill,
.allcomps-grid .card-new-badge,
.allcomps-grid .card-media .nc-end-pill {
  font-size: 9px !important; font-weight: 800 !important; padding: 2.5px 6px !important;
  letter-spacing: .2px !important; border-radius: 6px !important; box-shadow: 0 2px 6px rgba(0,0,0,.3) !important;
}
.allcomps-grid .card-tag { top: 6px !important; left: 6px !important; }
.allcomps-grid .card-new-badge { top: 6px !important; right: 6px !important; }
.allcomps-grid .card-media .nc-end-pill { bottom: 6px !important; left: 6px !important; }
.allcomps-grid .card-cashpill { top: auto !important; bottom: 6px !important; right: 6px !important; left: auto !important; }
@keyframes ncEndFlash { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
/* Admin "cash alternative" — the 💷 pill, the info line, and an optional flash. */
/* Single compact line — never wraps to a 2nd row (which pushed the Enter button
   off the bottom of cash-alternative cards, clipping it vs the other cards). */
.card-cashinfo { display: block; font-size: 11.5px; font-weight: 700; color: #1a8a4a; line-height: 1.3; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-cashpill.is-flash, .card-cashinfo.is-flash, .details-cashalt.is-flash { animation: ncEndFlash 1s ease-in-out infinite; }
/* Flashing "ENDING TODAY" badge in the competition detail popup. */
.details-endflag { display: inline-block; background: var(--red, #d11218); color: #fff; font-weight: 900;
  font-size: 11px; letter-spacing: .4px; padding: 3px 10px; border-radius: 999px; margin-left: 6px;
  vertical-align: middle; animation: ncEndFlash 1s ease-in-out infinite; }
/* Clear X to close the swipe-to-add overlay (when no tickets are wanted). */
.qe-close-x { position: absolute; top: 8px; right: 10px; z-index: 6; width: 36px; height: 36px;
  border: none; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qe-close-x:hover { background: rgba(0,0,0,.8); }
/* Flashing "ENDING TODAY" on hero slides that end today (all others stay as-is). */
.hero-end-flag { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: var(--red, #d11218); color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .5px;
  padding: 5px 15px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.4); white-space: nowrap;
  animation: ncEndFlash 1s ease-in-out infinite; }
/* Admin-chosen positions on the card image — used by the ending pill / hero flag
   (legacy_meta.end_pill_pos) AND the category / instant badge (legacy_meta.tag_pos).
   Generic so any badge carrying an .nc-pos-* class is placed accordingly. */
.nc-pos-top-left { top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important; transform: none !important; }
.nc-pos-top-center { top: 10px !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translateX(-50%) !important; }
.nc-pos-top-right { top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; transform: none !important; }
.nc-pos-bottom-left { bottom: 10px !important; top: auto !important; left: 10px !important; right: auto !important; transform: none !important; }
.nc-pos-bottom-center { bottom: 10px !important; top: auto !important; left: 50% !important; right: auto !important; transform: translateX(-50%) !important; }
.nc-pos-bottom-right { bottom: 10px !important; top: auto !important; right: 10px !important; left: auto !important; transform: none !important; }
/* Hero buttons: Quick Enter (swipe) + Enter Here (slug) — STACKED full-width. */
.hero-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.hero-actions .hero-quick-btn, .hero-actions .hero-enter-btn { margin-top: 0; width: 100%; }
.hero-actions .hero-enter-btn { padding: 14px 20px; display: flex;
  align-items: center; justify-content: center; text-decoration: none; }
/* Featured (Ending Soon) card buttons — stacked full-width like the carousel. */
/* Pin the action buttons to the BOTTOM of every card (margin-top:auto absorbs the
   slack), so cards with an extra line (e.g. cash alternative) keep their buttons
   aligned with — and as fully visible as — every other card. */
.fg-card-actions { display: flex; flex-direction: column; gap: 7px; margin-top: auto; padding-top: 8px; }
.fg-card-actions .fg-enter-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: rgba(212,175,55,.12); color: var(--accent); border: 1px solid var(--border-strong); cursor: default; }
.pill-wrap { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

/* Per-card countdown + almost-sold pulse */
.nc-ends { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.card.almost .card-badge { animation: pulseb 1.25s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes pulseb { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,.6); } 50% { box-shadow: 0 0 0 9px rgba(200,16,46,0); } }

/* Wishlist heart */
.wish { position: absolute; top: 8px; right: 8px; z-index: 3; width: 34px; height: 34px; border-radius: 999px; border: none;
  background: rgba(0,0,0,.45); color: #fff; font-size: 16px; cursor: pointer; display: grid; place-items: center;
  transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.wish:hover { transform: scale(1.14); }
.wish.on { color: #ff3b5c; }

/* ============ Quick-buy drawer ============ */
.nc-cf .card.selected .card-face { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(212,175,55,.5), 0 10px 30px rgba(200,16,46,.3); }
.qbuy { margin-top: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface);
  box-shadow: var(--shadow); overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-8px);
  transition: max-height .45s cubic-bezier(.2,.8,.2,1), opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1); }
.qbuy.open { max-height: 520px; opacity: 1; transform: none; }
.qbuy-inner { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: center; padding: 18px; }
.qbuy-media { width: 96px; height: 72px; border-radius: var(--radius-md); overflow: hidden; flex: 0 0 auto; border: 1px solid var(--border-strong); }
.qbuy-media img { width: 100%; height: 100%; object-fit: cover; }
.qbuy-info { min-width: 150px; flex: 0 1 200px; }
.qbuy-info h3 { margin: 0 0 2px; font-size: 19px; }
.qbuy-info .per { color: var(--muted); font-size: 13px; }
.qbuy-controls { display: flex; flex-direction: column; gap: 10px; flex: 1 1 300px; min-width: 250px; }
.qbuy-slider { display: flex; align-items: center; gap: 12px; }
.qbuy-slider input[type=range] { flex: 1; height: 6px; accent-color: var(--red); cursor: pointer; }
.qbuy-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.qb-preset { cursor: pointer; user-select: none; }
.qb-preset.on { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.qbuy-actions { display: flex; gap: 10px; align-items: center; flex: 1 1 100%; flex-wrap: wrap; }
.qbuy-total { font-size: 22px; font-weight: 800; margin-right: auto; font-family: var(--font-head); }
.qbuy-total small { font-size: 12px; font-weight: 500; color: var(--muted); }
.qbuy-more { font-size: 13px; color: var(--muted); line-height: 1.6; padding: 0 18px 18px; display: none; }
.qbuy.show-more .qbuy-more { display: block; }

/* Swipe-to-add ticket bar */
.qbuy-swipe { flex: 1 1 100%; }
.swipebar { position: relative; height: 54px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong);
  overflow: hidden; user-select: none; touch-action: none; }
.swipebar-fill { position: absolute; inset: 0; width: 48px; background: linear-gradient(90deg, var(--red), var(--accent)); opacity: .3; transition: width .12s linear; }
.swipebar-label { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; color: var(--ink); pointer-events: none; letter-spacing: .02em; }
.swipebar-handle { position: absolute; top: 4px; left: 4px; width: 46px; height: 46px; border-radius: 999px; background: var(--red);
  color: #fff; display: grid; place-items: center; cursor: grab; font-size: 20px; box-shadow: var(--shadow); touch-action: none; z-index: 2; }
.swipebar.dragging .swipebar-handle { cursor: grabbing; }
.swipebar.done .swipebar-handle { background: var(--accent); color: var(--bg); }

/* Confetti */
.confetti-piece { position: fixed; z-index: 120; width: 9px; height: 14px; border-radius: 2px; pointer-events: none; will-change: transform,opacity; }

/* Cart badge bump */
.cart-count.bump { animation: cartbump .45s cubic-bezier(.2,.8,.2,1); }
@keyframes cartbump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.45); } }

/* ============ Instant wins ============ */
.nc-instant-band { padding: 20px 0; background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-top: 10px; }
/* Competitions Quick View — hero image with the title below it */
.qv-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.qv-card { border-radius: var(--radius); overflow: hidden; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
.qv-media { aspect-ratio: 4/3; overflow: hidden; flex-shrink: 0; }
.qv-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.qv-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.qv-card:hover .qv-media img { transform: scale(1.05); }
.qv-card-label { padding: 10px 12px; color: var(--ink); font-weight: 700; font-size: 13px; line-height: 1.25;
  display: flex; align-items: center; gap: 6px; }
.qv-bolt { flex-shrink: 0; filter: drop-shadow(0 0 5px rgba(255,180,0,.8)); }
@media (max-width: 560px) {
  .qv-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .qv-card-label { font-size: 12px; padding: 9px 10px; }
}

.iw-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.iw-scratch { position: relative; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.iw-scratch img { width: 100%; height: 100%; object-fit: cover; }
.iw-scratch .iw-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); opacity: 1; transition: opacity .25s; }
.iw-scratch:hover .iw-overlay { background: rgba(0,0,0,.75); }
.iw-scratch .iw-btn { background: var(--accent, #d4af37); color: #000; font-weight: 700; font-size: 13px; padding: 8px 22px; border-radius: 999px; letter-spacing: .5px; cursor: pointer; border: none; text-transform: uppercase; }

/* ============ Forms ============ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-width: 360px; }
.label { font-size: 13px; color: var(--muted); }
input, select, textarea { padding: 11px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--ink); font: inherit; }

/* ============ Full details modal ============ */
.modal-card { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  max-width: 900px; width: 100%; overflow: hidden; box-shadow: 0 0 0 1px rgba(212,175,55,.5), 0 10px 30px rgba(200,16,46,.3); animation: modalin .35s cubic-bezier(.2,.8,.2,1); }
@keyframes modalin { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-hero { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--surface-3); }
.modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.modal-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,7,12,.85)); }
.modal-close { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: rgba(0,0,0,.5); color: #fff; font-size: 20px; cursor: pointer; z-index: 3; }
.modal-badge { position: absolute; left: 16px; bottom: 14px; z-index: 2; }
.modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.modal-body h2 { margin: 0; font-size: 28px; }
.modal-stats { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; }
.modal-stats b { display: block; font-size: 20px; font-family: var(--font-head); }
.modal-gallery { display: flex; gap: 8px; flex-wrap: wrap; }
.modal-gallery img { width: 84px; height: 63px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; }
.modal-gallery img:hover { border-color: var(--accent); }

/* ============ Sticky mobile mini-cart ============ */
.minicart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 86; transform: translateY(130%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
  background: var(--surface); border-top: 1px solid var(--border-strong); box-shadow: 0 -10px 30px rgba(0,0,0,.45);
  padding: 12px 16px; display: flex; align-items: center; gap: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom));
  will-change: transform; }
.minicart.show { transform: none; }
.minicart .mc-total { font-weight: 800; font-family: var(--font-head); font-size: 18px; margin-right: auto; }
.minicart .mc-total small { font-weight: 500; color: var(--muted); font-size: 12px; }
@media (min-width: 761px) { .minicart { display: none; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Dark mode support for default browser chrome */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

/* ============================================================
   3D "Enter" quick-buy overlay (swipe to choose tickets)
   ============================================================ */
.qe-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(40, 22, 6, .72);
  visibility: hidden; opacity: 0;
  transition: opacity .2s ease, visibility .2s ease;
}
.qe-overlay.open { visibility: visible; opacity: 1; }
.qe-card {
  position: relative; width: min(420px, 94vw);
  background: #fff; border-radius: 22px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 40px 90px rgba(60, 30, 10, .45);
  transform-style: preserve-3d; will-change: transform, opacity;
  padding-bottom: 22px;
}
.qe-grabbing { cursor: grabbing; }
/* "Close" text link just above the swipe bar (dismiss without buying) */
.qe-close-text {
  display: block; margin: 0 auto 10px; padding: 4px 6px;
  background: none; border: none; color: var(--muted);
  font-weight: 700; font-size: 13px; letter-spacing: .3px;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.qe-close-text:hover { color: var(--ink); }
.qe-media { width: 100%; aspect-ratio: 4 / 3; background: #0a0a12; }
.qe-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qe-title {
  font-family: var(--font-head); font-size: 18px; font-weight: 800;
  color: var(--ink); text-align: center; padding: 16px 22px 4px; line-height: 1.2;
}
.qe-qty { text-align: center; margin-top: 8px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.qe-qnum {
  font-family: var(--font-head); font-weight: 900; font-size: 56px; line-height: 1;
  background: linear-gradient(180deg, var(--accent-light), var(--accent-dark));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: var(--accent-dark);
}
.qe-qlabel { font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.qe-total { text-align: center; font-weight: 800; color: var(--ink); margin-top: 2px; margin-bottom: 16px; }
/* WHITE, readable quick-enter card + the OK confirm button (slide amount, then tap OK). */
.qe-card { background: #fff !important; }
.qe-title, .qe-total { color: #1d1813 !important; }
.qe-qlabel, .qe-swipe-hint { color: #6b6256 !important; }
.qe-ok { display: block; width: calc(100% - 44px); margin: 16px auto 0; padding: 14px 16px;
  font-size: 15px; font-weight: 800; border-radius: 12px; }
.qe-swipe {
  position: relative; margin: 0 22px; height: 56px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden; touch-action: none; cursor: grab; user-select: none;
}
.qe-swipe-fill {
  /* GPU-composited: driven by transform: scaleX() from JS (was animated `width`,
     which forced a layout reflow on every pointer-move → jerky drag on Android WebView). */
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  transform: scaleX(0); transform-origin: left center; will-change: transform;
  background: linear-gradient(90deg, #34d399, #10b981);
  border-radius: 999px;
}
/* "0" zone on the left + the divider line */
.qe-swipe-zero {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 3; width: 46px;
  display: grid; place-items: center; pointer-events: none;
  background: var(--surface-2);
  border-right: 2px solid var(--border-strong);
  border-radius: 999px 0 0 999px;
  font-family: var(--font-head); font-weight: 900; font-size: 16px; color: var(--muted);
}
.qe-swipe-handle {
  /* Positioned via transform (translateX in px from JS) instead of animating `left`,
     so the finger-follow is GPU-composited and smooth on Android WebView. */
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); will-change: transform;
  width: 48px; height: 48px; border-radius: 999px;
  background: #fff; color: var(--green); font-size: 20px; font-weight: 900;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(16,185,129,.35); z-index: 4; pointer-events: none;
}
.qe-swipe-hint {
  position: absolute; inset: 0 0 0 46px; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  letter-spacing: .3px; pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.qe-added .qe-swipe { background: var(--green); border-color: var(--green); }
.qe-added .qe-swipe-fill { background: var(--green); }
.qe-added .qe-swipe-zero { display: none; }
.qe-added .qe-swipe-hint { color: #fff; text-shadow: none; left: 0; }
.qe-added .qe-swipe-handle { color: var(--green); }

/* ============================================================
   Details modal — image slideshow
   ============================================================ */
.details-media { position: relative; overflow: hidden; }
.ds-track { display: flex; height: 100%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ds-slide { flex: 0 0 100%; background-size: cover; background-position: center; min-height: 240px; }
.ds-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(0,0,0,.5); color: #fff; font-size: 22px; line-height: 1;
  display: grid; place-items: center;
}
.ds-prev { left: 10px; } .ds-next { right: 10px; }
.ds-count {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
}
.ds-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; z-index: 3; padding: 0 12px; box-sizing: border-box; }
.ds-dot { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.5); }
.ds-dot.active { background: #fff; width: 20px; }

/* ============================================================
   Details modal — instant win prizes block
   ============================================================ */
.details-instant { margin: 12px 0 4px; }
.details-instant-toggle {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: var(--radius); cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border);
  font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--ink);
}
.details-instant-toggle .dit-caret { margin-left: auto; transition: transform .2s; color: var(--accent-dark); }
.details-instant-toggle.open .dit-caret { transform: rotate(180deg); }
.details-instant-toggle:hover { border-color: var(--accent); }
.details-instant-panel { margin-top: 10px; }
.details-instant-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.di-prize { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-align: center; padding-bottom: 8px; }
.di-prize.gone { opacity: .45; }
.di-media { aspect-ratio: 4/3; background: var(--surface-3); }
.di-media img { width: 100%; height: 100%; object-fit: cover; }
.di-amt { font-family: var(--font-head); font-weight: 900; color: var(--accent-dark); font-size: 15px; margin-top: 6px; }
.di-left { font-size: 10.5px; color: var(--muted); }
@media (max-width: 480px) {
  .details-instant-grid { grid-template-columns: repeat(2, 1fr); }
  .qe-qnum { font-size: 46px; }
}

/* ============================================================
   Instant Win badge (cards + hero)
   ============================================================ */
.instant-badge {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #ff8a1a, #ff5a00);
  color: #fff; font-family: var(--font-head); font-weight: 900;
  font-size: 11px; letter-spacing: .6px;
  padding: 5px 10px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255,90,0,.4); border: 1px solid rgba(255,255,255,.35);
  text-shadow: 0 1px 1px rgba(120,40,0,.4);
}
.instant-bolt { font-size: 12px; filter: drop-shadow(0 0 4px rgba(255,255,0,.8)); }
.hero-instant-badge { top: 14px; left: 14px; font-size: 12px; padding: 6px 12px; }

/* ============================================================
   Mobile-friendly 3D quick-buy (80% of users are on phones)
   ============================================================ */
@media (max-width: 560px) {
  /* Lift the sheet ~a quarter of the screen up so the swipe bar sits at a
     comfortable thumb height, not jammed against the very bottom edge. */
  /* CENTRE the sheet (not jammed to the bottom edge) and make the WHOLE box fit on
     screen — full prize image + every control visible, nothing cut off. The card is a
     flex column: the image can shrink, the controls stay fixed, no internal scroll. */
  .qe-overlay { padding: 14px 12px; align-items: center; }
  .qe-card {
    width: 100%; max-height: 92vh; display: flex; flex-direction: column;
    overflow: hidden; border-radius: 18px; padding-bottom: 12px;
  }
  .qe-media { aspect-ratio: auto; flex: 0 1 auto; max-height: 30vh; background: #f1f1f4; }
  .qe-media img { object-fit: contain; }               /* show the FULL prize image, never cropped */
  .qe-title { font-size: 15px; padding: 8px 16px 2px; flex: 0 0 auto; }
  .qe-qty { margin-top: 2px; flex: 0 0 auto; }
  .qe-qnum { font-size: 38px; }
  .qe-qlabel { font-size: 12px; }
  .qe-total { margin-top: 0; margin-bottom: 8px; flex: 0 0 auto; }
  .qe-close-text { display: none; }                    /* redundant — the ✕ + OK are right there */
  .qe-swipe { margin: 0 16px; height: 56px; flex: 0 0 auto; }
  .qe-swipe-handle { width: 50px; height: 50px; font-size: 20px; }
  .qe-swipe-hint { font-size: 12px; }
  .qe-ok { margin: 10px 16px 0; padding: 13px 16px; flex: 0 0 auto; }
}

/* ============================================================
   Live Competitions: 2 cards side-by-side on mobile, swipe
   advances one card at a time (snap to each card's start).
   ============================================================ */
@media (max-width: 560px) {
  /* bigger cards: trim the section + carousel padding so they use more width */
  #comp-carousel-section { padding-left: 8px; padding-right: 8px; }
  .nc-cf { gap: 6px; scroll-snap-type: x mandatory; padding: 12px 2px 18px; }
  .nc-cf .card {
    flex: 0 0 calc(50% - 3px); max-width: none;   /* 2 up, snug together */
    scroll-snap-align: start; height: 372px; perspective: none;
  }
  .nc-cf .card-body { padding: 11px; gap: 8px; }
  .nc-cf .card-title { font-size: 13.5px; line-height: 1.2; }
  .nc-cf .card-price { font-size: 15px; }
  .nc-cf .nc-enter-btn { padding: 10px 8px; font-size: 12px; }
  .nc-cf .card-badge { font-size: 9.5px; padding: 4px 7px; }
  .instant-badge { font-size: 9px; padding: 3px 6px; gap: 3px; }
}

/* ============================================================
   Floating round cart button (mobile)
   ============================================================ */
.cart-fab {
  position: fixed; right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 90; width: 62px; height: 62px; border-radius: 999px;
  display: none; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--red), var(--red-dark));
  color: #fff; border: 1.5px solid rgba(255,255,255,.35);
  box-shadow: 0 12px 30px rgba(255,90,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.cart-fab:active { transform: scale(.93); }
.cart-fab-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 23px; height: 23px; padding: 0 6px;
  border-radius: 999px; background: #15151f; color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1;
  display: grid; place-items: center; border: 2px solid #fff;
}
.cart-fab-badge.bump { animation: fab-bump .4s ease; }
@keyframes fab-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (max-width: 760px) {
  .cart-fab { display: inline-flex; }
  .minicart { display: none !important; }   /* round FAB replaces the slide-up bar */
}

/* ============================================================
   Premium faint Nitrous logo watermark — tiled across the page,
   barely visible, sits above content but below the header, FAB,
   cart and modals (pointer-events: none so it never blocks taps).
   ============================================================ */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("logo.png");
  background-repeat: repeat;
  background-position: center;
  background-size: 300px auto;     /* sparser tiling */
  opacity: .02;                    /* whisper-faint */
}

/* ============================================================
   Footer social icons — official platform glyphs, brand colours
   ============================================================ */
.footer-social { display: flex; gap: 11px; margin-top: 30px; flex-wrap: wrap; }
.soc {
  width: 40px; height: 40px; border-radius: 999px;
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), filter .15s, box-shadow .15s;
}
.soc svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.soc:hover { transform: translateY(-3px) scale(1.06); filter: brightness(1.08); box-shadow: 0 8px 20px rgba(0,0,0,.28); }
.soc-fb { background: #1877F2; }
.soc-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.soc-tt { background: #010101; }
.soc-yt { background: #FF0000; }
.soc-x  { background: #000000; }

/* Faint tiled Nitrous logo watermark over the light-grey canvas (behind content). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('/landing/logo.png');
  background-repeat: repeat; background-size: 200px auto;
  filter: grayscale(1); opacity: 0.04;
}

/* Gunmetal footer (match the header + app footer). */
.footer {
  background: linear-gradient(180deg, #3a3d44 0%, #2e3036 55%, #232529 100%) !important;
  color: rgba(255, 255, 255, .72) !important;
  border-top: 1px solid rgba(0, 0, 0, .45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.footer-blurb { color: rgba(255, 255, 255, .68) !important; }
.footer-head { color: #fff !important; }
.footer-link { color: rgba(255, 255, 255, .72) !important; }
.footer-link:hover { color: var(--accent) !important; }
.footer-company { color: rgba(255, 255, 255, .60) !important; border-top-color: rgba(255, 255, 255, .10) !important; }
.footer-company strong { color: #fff !important; }
.footer-bottom { color: rgba(255, 255, 255, .55) !important; border-top-color: rgba(255, 255, 255, .10) !important; }
.footer-trustpilot { color: #00d18a !important; }

/* Mobile: Live Competitions carousel shows 2 cards side-by-side; a swipe advances
   one card at a time (the left card leaves, the next available enters on the right). */
@media (max-width: 760px) {
  .nc-cf { gap: 12px; scroll-snap-type: x mandatory; }
  .nc-cf .card { flex: 0 0 calc(50% - 6px); max-width: none; scroll-snap-align: start; height: 472px; }
  .nc-cf .card-title { font-size: 13.5px; }
  .nc-cf .card-price { font-size: 15px; }
  .nc-cf .card-body { padding: 12px; gap: 8px; }
  .nc-cf .card-header { padding: 9px 11px 6px; }
}

/* Countdown timer moved into the card body (below the image, with the info text). */
.nc-ends-inline {
  position: static; transform: none; display: inline-flex; align-items: center; gap: 5px;
  width: fit-content; backdrop-filter: none; box-shadow: none; margin: 2px 0 0;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  color: var(--accent-dark); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Slideshow image counter moved to the middle-bottom (was top-right, covering the
   close button). Dots sit just above it. */
.ds-count {
  top: auto; right: auto; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 4;
}
.ds-dots { bottom: 36px; }

/* "Ending Tonight" — flash GREEN to grab attention (only comps actually ending today). */
.card-badge-end {
  background: #16a34a; box-shadow: 0 4px 12px rgba(22,163,74,.5);
  animation: endflash 1.1s ease-in-out infinite;
}
@keyframes endflash {
  0%, 100% { background: #16a34a; box-shadow: 0 0 0 0 rgba(34,197,94,.55), 0 4px 12px rgba(22,163,74,.5); }
  50%      { background: #22c55e; box-shadow: 0 0 0 9px rgba(34,197,94,0),  0 4px 12px rgba(22,163,74,.5); }
}
.featured-grid .card.is-ending, .nc-cf .card.is-ending {
  border: 1px solid #22c55e; animation: endglow 1.5s ease-in-out infinite;
}
@keyframes endglow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  50%      { box-shadow: 0 0 16px 2px rgba(34,197,94,.5); }
}

/* =====================================================================
   DESKTOP-ONLY: use the unused space at the sides on larger screens.
   Scoped to min-width:1280px so phones, tablets and the mobile layout
   (all rules below 1280px) are COMPLETELY untouched. Only the content
   max-width grows — aspect-ratio:4/3 on hero/cards is unchanged, so the
   4:3 ratio is preserved; cards/grids just gain columns/width.
   ===================================================================== */
@media (min-width: 1280px) {
  :root { --maxw: 1680px; }     /* header, sections, carousels, footer widen */
  .hero { max-width: var(--maxw); }  /* match sections/header/footer width so the
    banner no longer sits inset with side gaps on wide screens (still 4:3 via
    .hero-img — widening the container never distorts the image). Desktop-only:
    this lives inside min-width:1280px, so mobile sizing is untouched. */
}

/* App-like fixed canvas: never allow sideways page wiggle (clip does not create a
   scroll container, so the sticky header keeps working — unlike overflow-x:hidden). */
html, body { overflow-x: clip; }

/* Hero "ENDING TODAY" strip — below the image, above the sold bar: pulsing red band
   with a LIVE HH:MM:SS countdown and a moving light sheen. */
.hero-today-strip { position: relative; overflow: hidden; display: flex; align-items: center;
  justify-content: center; gap: 12px; margin: 0 0 12px; padding: 9px 14px; border-radius: 12px;
  background: linear-gradient(90deg, #a90d12, #e4112b 45%, #a90d12); color: #fff;
  font-weight: 900; font-size: 13.5px; letter-spacing: .6px; white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(228,17,43,.55); animation: htsPulse 1.6s ease-in-out infinite; }
.hero-today-strip::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%;
  width: 40%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
  animation: htsSheen 2.4s linear infinite; }
.hts-count { font-variant-numeric: tabular-nums; background: rgba(0,0,0,.3);
  padding: 3px 10px; border-radius: 8px; font-size: 13px; letter-spacing: 1px; }
@keyframes htsPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(228,17,43,.55); } 50% { box-shadow: 0 0 0 8px rgba(228,17,43,0); } }
@keyframes htsSheen { to { left: 120%; } }

/* Hero LED ticker — a premium "LED display" strip between the hero image and the sold
   bar: glossy black bar, glowing amber text scrolling continuously (chase effect).
   Ending-today comps glow red. */
/* FULL-BLEED: the strip is the exact width of the 4:3 hero image and sits flush
   under it. The negative margins cancel .hero-content's padding (--hc-py/--hc-px),
   so it stays edge-to-edge at every breakpoint without hard-coding numbers. */
.hero-led { margin: calc(-1 * var(--hc-py, 22px)) calc(-1 * var(--hc-px, 26px)) 14px;
  background: linear-gradient(180deg, #0b0b0d, #16161a 55%, #0b0b0d);
  border: 1px solid #26262c; border-left: 0; border-right: 0; border-radius: 0;
  padding: 8px 0; overflow: hidden; position: relative;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.85), inset 0 -1px 0 rgba(255,255,255,.05); }
.hero-led::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 45%); }
/* STILL centred message with a slow LED-style fade in/out (no scrolling).
   TRAFFIC-LIGHT system — the bar GLOWS from behind + matching text:
   RED ends today · AMBER ends tomorrow · GREEN ends later (incl. NEW). */
.hero-led { text-align: center; padding: 12px 14px;
  /* green halo behind the bar (default: ends after tomorrow) */
  box-shadow: 0 0 16px 2px rgba(61,255,126,.45), inset 0 2px 8px rgba(0,0,0,.85);
  border-color: rgba(61,255,126,.35); }
.hero-led-text { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; vertical-align: middle; font-weight: 800;
  font-size: clamp(16px, 2.1cqw + 8px, 24px); letter-spacing: 1.2px; line-height: 1.2;
  font-variant-numeric: tabular-nums; /* still text — no fade/animation */
  color: #3dff7e; text-shadow: 0 0 6px rgba(61,255,126,.95), 0 0 16px rgba(40,220,110,.5); }
/* The DRAWS half is the supporting line — a touch smaller than the headline. */
.hero-led-text .hl-b { font-size: .82em; opacity: .96; }
/* ENDING TODAY — red glow. */
.hero-led.is-today { box-shadow: 0 0 18px 3px rgba(255,59,59,.55), inset 0 2px 8px rgba(0,0,0,.85);
  border-color: rgba(255,59,59,.4); }
.hero-led.is-today .hero-led-text { color: #ff3b3b;
  text-shadow: 0 0 6px rgba(255,59,59,.95), 0 0 18px rgba(255,59,59,.55); }
/* ENDS TOMORROW — amber glow. */
.hero-led.is-tomorrow { box-shadow: 0 0 17px 2px rgba(255,183,50,.5), inset 0 2px 8px rgba(0,0,0,.85);
  border-color: rgba(255,183,50,.4); }
.hero-led.is-tomorrow .hero-led-text { color: #ffb732;
  text-shadow: 0 0 6px rgba(255,183,50,.95), 0 0 18px rgba(255,170,30,.5); }
/* NEW COMPETITION — green like the default (ends later), keeps its ✨ message. */
.hero-led.is-new { box-shadow: 0 0 16px 2px rgba(61,255,126,.45), inset 0 2px 8px rgba(0,0,0,.85);
  border-color: rgba(61,255,126,.35); }
.hero-led.is-new .hero-led-text { color: #3dff7e;
  text-shadow: 0 0 6px rgba(61,255,126,.95), 0 0 18px rgba(40,220,110,.5); }
@keyframes ledFade { 0%, 100% { opacity: .16; } 50% { opacity: 1; } }
/* Mobile: the DRAWS part drops to its OWN line so the full sentence always shows. */
@media (max-width: 620px) {
  .hero-led-text { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.6; }
  .hero-led-text .hl-sep { display: none; }
  /* Head-over-DRAWS layout: pull the emoji out of the inline flow so ONLY the words
     are centred — otherwise the bolt's advance is counted and line 1 sits half a
     bolt-width right of the DRAWS line below it. It hangs just left of the words,
     which is empty bar either way.
     :has(.hl-b) scopes this to the two-segment message. The NEW-competition state
     has no DRAWS line and can wrap to full width, so its icon must stay inline or
     it hangs off the edge and gets clipped. Browsers without :has() simply keep the
     icon inline everywhere — the old behaviour, never broken. */
  .hero-led-text:has(.hl-b) .hl-a { position: relative; }
  .hero-led-text:has(.hl-b) .hl-ico { position: absolute; right: 100%; top: 0; margin-right: .3em; }
  .hero-led-text .hl-b { display: block; font-size: .78em; letter-spacing: .04em; opacity: .95; margin-top: 2px; }
}