/* ============================================================
   BIG MATCH THEME — a stadium on match night.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from a ground on the night of a big game: the pitch mown in
   stripes with its chalk lines, floodlight towers, the crowd as a
   bowl of tiny lights, an LED scoreboard, match tickets torn along
   the perforation, and a hi-vis lime for everything you can press.
   A sunlit afternoon match by day; a floodlit night by dark (the
   default).

   The sport comes from functions.php as <html data-bm-sport=
   "football|cricket|gridiron">; it changes drawings, not colours.
   The --theme-* ramp is set here, so the admin's accent colour
   setting does not apply while the theme is active.
   ============================================================ */

:root {
  --font-display: 'Big Shoulders Display', 'Sofia Sans Extra Condensed', 'Archivo', 'Arial Narrow', sans-serif;
  --font-ui:      'Archivo', 'Sofia Sans', 'Inter', system-ui, sans-serif;

  --paper:        #eef2ec;
  --paper-2:      #ffffff;
  --paper-3:      #e2e9e1;
  --ink:          #0c1730;
  --ink-2:        #2a3852;
  --ink-soft:     #5b687c;
  --rule:         rgba(12, 23, 48, 0.13);
  --rule-soft:    rgba(12, 23, 48, 0.07);
  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 1px 2px rgba(12, 23, 48, .07), 0 4px 14px -6px rgba(12, 23, 48, .18);
  --shadow-md:    0 2px 4px rgba(12, 23, 48, .07), 0 16px 32px -14px rgba(12, 23, 48, .34);

  /* Turf green, the theme's accent text and links */
  --theme-50:  #ebf6ee;
  --theme-100: #d0ebd8;
  --theme-200: #a3d6b1;
  --theme-300: #6dbb83;
  --theme-400: #3f9e5d;
  --theme-500: #1f8a4c;
  --theme-600: #17733e;
  --theme-700: #135c33;
  --theme-800: #0f4728;
  --theme-900: #0a311c;
  --theme-500-rgb: 31, 138, 76;
  --theme-600-rgb: 23, 115, 62;

  /* Hi-vis lime (what you press), navy (the night and the ink), amber
     (the scoreboard's LEDs), the two greens of a mown pitch, chalk */
  --lime:    #c6ec2f;
  --lime-2:  #a6cc12;
  --navy:    #0c1730;
  --navy-2:  #142347;
  --navy-3:  #1d3060;
  --led:     #ffb81c;
  --led-2:   #ffd36b;
  --turf-1:  #2f9a57;
  --turf-2:  #288a4c;
  --chalk:   #f6f8f2;
  --lime-soft: rgba(31, 138, 76, 0.1);

  /* Names other themes' shared markup reaches for */
  --gold:       #b8860b;
  --gold-2:     #e0a526;
  --gold-soft:  rgba(31, 138, 76, 0.09);
  --gold-ink:   #0c1730;
  --felt:       #0c1730;
  --felt-2:     #070d1d;
  --on-felt:    #f6f8f2;
  --on-felt-soft: rgba(246, 248, 242, 0.78);
  --peacock:    #1f8a4c;
  --peacock-soft: rgba(31, 138, 76, 0.12);
  --red:        #d23a2a;
  --red-soft:   rgba(210, 58, 42, .1);
  --rose:       var(--theme-500);

  --notify-accent: var(--theme-500);
  --nav-accent:    var(--theme-600);
  --hdr-strip-bg:  #0a1328;
  --hdr-strip-rule: transparent;
  --text-primary:  var(--ink);

  --btn-bg:       #c6ec2f;
  --btn-bg-hover: #d4f553;
  --btn-ink:      #0c1730;
  /* lettering on the accent (--theme-500/600): pitch green takes white */
  --on-accent:    #ffffff;
  --btn-edge:     #86a70c;
  --btn-shadow:   0 2px 0 var(--btn-edge), 0 8px 18px -10px rgba(12, 23, 48, .55);
  --btn-shadow-hover: 0 3px 0 var(--btn-edge), 0 12px 22px -10px rgba(12, 23, 48, .55);

  /* The touchline: a chalk line along the edge of a strip of mown turf.
     The theme's border band. */
  --bm-band:
    linear-gradient(var(--chalk), var(--chalk)) left 0 top 3px / 100% 2px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 60%, rgba(0, 0, 0, .12)),
    repeating-linear-gradient(90deg, var(--turf-1) 0 36px, var(--turf-2) 36px 72px);
  --bm-band-v:
    linear-gradient(var(--chalk), var(--chalk)) left 3px top 0 / 2px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--turf-1) 0 36px, var(--turf-2) 36px 72px);

  /* The crowd as lights: phone torches and shirts dotted over the stand */
  --bm-crowd:
    radial-gradient(circle, rgba(255, 255, 255, .85) 0 .8px, transparent 1.3px) 3px 2px / 17px 11px,
    radial-gradient(circle, rgba(198, 236, 47, .55) 0 .8px, transparent 1.3px) 11px 7px / 23px 13px,
    radial-gradient(circle, rgba(255, 184, 28, .55) 0 .9px, transparent 1.4px) 1px 9px / 29px 15px,
    radial-gradient(circle, rgba(132, 186, 255, .45) 0 .8px, transparent 1.3px) 15px 1px / 31px 12px,
    radial-gradient(circle, rgba(255, 120, 110, .4) 0 .8px, transparent 1.3px) 7px 5px / 37px 17px;
  --bm-stand: #0b1324;
  --bm-stand-2: #142038;

  /* The gaps between an LED board's pixels */
  --bm-led-grid:
    linear-gradient(90deg, rgba(3, 5, 9, .55) 1px, transparent 1px) 0 0 / 3px 3px,
    linear-gradient(rgba(3, 5, 9, .55) 1px, transparent 1px) 0 0 / 3px 3px;

  /* Floodlit navy, the ground of the footer, the winners page, the splash
     and the wallet in both modes */
  --bm-night:
    radial-gradient(520px 300px at 6% -60px, rgba(214, 232, 255, .2), transparent 70%),
    radial-gradient(520px 300px at 94% -60px, rgba(214, 232, 255, .2), transparent 70%),
    linear-gradient(180deg, #13234a 0%, #0c1730 55%, #070e1f 100%);

  /* A mown pitch faintly through the page, wide stripes of chalk-green */
  --bm-mown: repeating-linear-gradient(90deg, rgba(31, 138, 76, .035) 0 90px, transparent 90px 180px);
  --page-bg: var(--bm-mown), var(--paper);
}

html.dark {
  --paper:        #070c16;
  --paper-2:      #0f1727;
  --paper-3:      #182337;
  --ink:          #eef3fa;
  --ink-2:        #c4cede;
  --ink-soft:     #8794aa;
  --rule:         rgba(238, 243, 250, 0.12);
  --rule-soft:    rgba(238, 243, 250, 0.06);
  --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .7);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .4), 0 18px 36px -14px rgba(0, 0, 0, .85);

  --theme-50:  #141c0c;
  --theme-100: #1e2a10;
  --theme-200: #34481a;
  --theme-300: #e6f8a6;
  --theme-400: #d6f26b;
  --theme-500: #c6ec2f;
  --theme-600: #d0f04f;
  --theme-700: #e6f8a6;
  --theme-800: #f1fbd0;
  --theme-900: #f8fde8;
  --theme-500-rgb: 198, 236, 47;
  --theme-600-rgb: 208, 240, 79;

  --turf-1:  #237a45;
  --turf-2:  #1d6b3c;
  --lime-soft: rgba(198, 236, 47, 0.12);
  --gold:       #ffc94a;
  --gold-2:     #ffd36b;
  --gold-soft:  rgba(198, 236, 47, 0.1);
  --felt:       #04070e;
  --felt-2:     #0f1727;
  --peacock:    #6fd28f;
  --peacock-soft: rgba(111, 210, 143, 0.14);
  --red:        #ff7a66;
  --red-soft:   rgba(255, 122, 102, .14);

  --nav-accent:    var(--theme-500);
  --hdr-strip-bg:  #03060c;

  --btn-bg:       #c6ec2f;
  --btn-bg-hover: #d4f553;
  --btn-ink:      #0a1226;
  /* at night the accent is floodlight lime, which needs the navy ink */
  --on-accent:    var(--btn-ink);
  --btn-edge:     #7a980a;
  --btn-shadow:   0 2px 0 var(--btn-edge), 0 8px 24px -8px rgba(198, 236, 47, .35);
  --btn-shadow-hover: 0 3px 0 var(--btn-edge), 0 12px 30px -8px rgba(198, 236, 47, .5);

  --page-bg:
    radial-gradient(760px 460px at 4% -180px, rgba(206, 226, 255, 0.11), transparent 70%) no-repeat,
    radial-gradient(760px 460px at 96% -180px, rgba(206, 226, 255, 0.11), transparent 70%) no-repeat,
    var(--paper);
}

/* ── Materials ──
   The pieces every surface is built from, shared by the skin sheets
   (assets/css/skin/) and the plugin variants:
   - five match-day colours (--bm-k1 … --bm-k5: hi-vis lime, scoreboard
     amber, stand blue, red-card red, turf green), with --bm-kN-ink for
     lettering on paper;
   - the touchline (--bm-band, above) along the top of panels and sheets,
     and a chalk line (--bm-chalk-line) for rules;
   - match tickets: a notch bitten from each side (--bm-notch, a mask) and
     the perforation between ticket and stub (--bm-perf-line);
   - the LED scoreboard (.bm-board, .bm-led, --bm-led-grid) and a row of
     its amber lamps (--bm-lamps);
   - a product stood on the pitch under the floodlights (--bm-stage);
   - the ball of the sport (--bm-ball, set by <html data-bm-sport>) as the
     full stop of headings and the hub of the spin wheel;
   - a supporters' scarf in bars of navy and lime (--bm-scarf) for
     progress bars and strips. */
:root {
  --bm-k1: #c6ec2f; --bm-k2: #ffb81c; --bm-k3: #2f6fd6; --bm-k4: #e2382b; --bm-k5: #2f9a57;
  --bm-k1-ink: #4d6a00; --bm-k2-ink: #8c5300; --bm-k3-ink: #1f56b0; --bm-k4-ink: #b4271c; --bm-k5-ink: #17733e;
  --bm-k1-soft: rgba(198, 236, 47, .26); --bm-k2-soft: rgba(255, 184, 28, .2); --bm-k3-soft: rgba(47, 111, 214, .13); --bm-k4-soft: rgba(226, 56, 43, .12); --bm-k5-soft: rgba(47, 154, 87, .14);
  --bm-chalk-line: linear-gradient(90deg, rgba(12, 23, 48, .2), rgba(12, 23, 48, .2));
  --bm-perf-line: repeating-linear-gradient(90deg, rgba(12, 23, 48, .3) 0 6px, transparent 6px 11px);
  --bm-perf-line-v: repeating-linear-gradient(180deg, rgba(12, 23, 48, .3) 0 6px, transparent 6px 11px);
  --bm-notch:
    radial-gradient(circle 9px at 0 50%, transparent 97%, #000 100%) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle 9px at 100% 50%, transparent 97%, #000 100%) 100% 0 / 51% 100% no-repeat;
  --bm-lamp-dot: radial-gradient(circle, #ffb81c 0 1.7px, rgba(255, 184, 28, .35) 2.2px, transparent 3px);
  --bm-lamps: var(--bm-lamp-dot) 0 50% / 10px 100% repeat-x;
  --bm-turf-strip: repeating-linear-gradient(90deg, #2f9a57 0 22px, #288a4c 22px 44px);
  --bm-stage:
    radial-gradient(60% 18% at 50% 88%, rgba(12, 23, 48, .2), transparent 70%),
    linear-gradient(180deg, transparent 0 80%, #f6f8f2 80% calc(80% + 2px), transparent calc(80% + 2px)),
    linear-gradient(180deg, transparent 0 80%, rgba(255, 255, 255, .1) 80%),
    linear-gradient(180deg, transparent 0 80%, #2f9a57 80%),
    radial-gradient(70% 70% at 50% 0%, #ffffff 0%, #f1f5ef 60%, #e3eae2 100%);
  --bm-scarf: repeating-linear-gradient(90deg, #142347 0 14px, #c6ec2f 14px 28px);
  --bm-ball: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23f7f8f4'/%3E%3Cpath d='M20 12.5 L27.2 17.7 L24.4 26.2 H15.6 L12.8 17.7 Z' fill='%23141a26'/%3E%3Cpath d='M20 2 V12.5 M27.2 17.7 L37 14.5 M24.4 26.2 L30.5 34.5 M15.6 26.2 L9.5 34.5 M12.8 17.7 L3 14.5' stroke='%23141a26' stroke-width='1.3'/%3E%3Cpath d='M13 3.6 L20 2 L27 3.6 L24 7 H16 Z M36.5 12 L38 19.5 L34.5 23 L33 17 Z M3.5 12 L2 19.5 L5.5 23 L7 17 Z M24 37.5 L31 35 L28.5 31.5 L23 34 Z M16 37.5 L9 35 L11.5 31.5 L17 34 Z' fill='%23141a26'/%3E%3Ccircle cx='20' cy='20' r='18' fill='none' stroke='%23141a26' stroke-opacity='.25' stroke-width='1'/%3E%3C/svg%3E");
}
html.dark {
  --bm-k1: #c6ec2f; --bm-k2: #ffc94a; --bm-k3: #6fa8ff; --bm-k4: #ff7a66; --bm-k5: #6fd28f;
  --bm-k1-ink: #d6f26b; --bm-k2-ink: #ffd36b; --bm-k3-ink: #9cc3ff; --bm-k4-ink: #ff9a8a; --bm-k5-ink: #8fe0a9;
  --bm-k1-soft: rgba(198, 236, 47, .14); --bm-k2-soft: rgba(255, 201, 74, .14); --bm-k3-soft: rgba(111, 168, 255, .14); --bm-k4-soft: rgba(255, 122, 102, .14); --bm-k5-soft: rgba(111, 210, 143, .14);
  --bm-chalk-line: linear-gradient(90deg, rgba(238, 243, 250, .22), rgba(238, 243, 250, .22));
  --bm-perf-line: repeating-linear-gradient(90deg, rgba(238, 243, 250, .28) 0 6px, transparent 6px 11px);
  --bm-perf-line-v: repeating-linear-gradient(180deg, rgba(238, 243, 250, .28) 0 6px, transparent 6px 11px);
  --bm-turf-strip: repeating-linear-gradient(90deg, #237a45 0 22px, #1d6b3c 22px 44px);
  --bm-stage:
    radial-gradient(60% 18% at 50% 88%, rgba(0, 0, 0, .35), transparent 70%),
    linear-gradient(180deg, transparent 0 80%, #f6f8f2 80% calc(80% + 2px), transparent calc(80% + 2px)),
    linear-gradient(180deg, transparent 0 80%, #237a45 80%),
    radial-gradient(70% 80% at 50% 0%, #ffffff 0%, #e6ecf3 55%, #c9d3df 100%);
}
html[data-bm-sport="cricket"] { --bm-ball: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23c4232b'/%3E%3Cpath d='M8 8 C16 15 16 25 8 32 M32 8 C24 15 24 25 32 32' fill='none' stroke='%23f4e9d8' stroke-width='1.6'/%3E%3Cpath d='M10.5 10 l2 -1 M12.5 13 l2 -1.2 M14 16.5 l2 -.8 M14.4 20 h2.2 M14 23.5 l2 .8 M12.5 27 l2 1.2 M10.5 30 l2 1 M29.5 10 l-2 -1 M27.5 13 l-2 -1.2 M26 16.5 l-2 -.8 M25.6 20 h-2.2 M26 23.5 l-2 .8 M27.5 27 l-2 1.2 M29.5 30 l-2 1' stroke='%23f4e9d8' stroke-width='1' stroke-linecap='round'/%3E%3Cellipse cx='14' cy='12' rx='6' ry='3.5' fill='%23fff' fill-opacity='.22' transform='rotate(-30 14 12)'/%3E%3C/svg%3E"); }
html[data-bm-sport="gridiron"] { --bm-ball: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 36'%3E%3Cpath d='M3 18 C10 3 46 3 53 18 C46 33 10 33 3 18 Z' fill='%238a4a22'/%3E%3Cpath d='M8 11 C9 15 9 21 8 25 M48 11 C47 15 47 21 48 25' fill='none' stroke='%23f4efe6' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M20 12.5 H36' stroke='%23f4efe6' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M22 10 V15 M25 10 V15 M28 10 V15 M31 10 V15 M34 10 V15' stroke='%23f4efe6' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M14 8 C22 5 34 5 42 8' fill='none' stroke='%23fff' stroke-opacity='.22' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board. By day a board is
   the sunlit pitch: chalk-white cells on pale turf, the tiles rising from
   chalk through lime and scoreboard amber to stand blue and navy; after
   dark it is the floodlit night, navy cells and the tiles lit like LEDs. */
:root {
  --game-bg:        #eef2ec;
  --game-surface:   #dbe5d9;
  --game-surface-2: #ffffff;
  --game-ink:       #0c1730;
  --game-muted:     #5b687c;
  --game-accent:    #c6ec2f;
  --game-accent-ink:#0c1730;
  --game-good:      #17733e;
  --game-bad:       #d23a2a;
  --game-tile-1:    #f6f8f2;
  --game-tile-2:    #e4f5ad;
  --game-tile-3:    #c6ec2f;
  --game-tile-4:    #ffd36b;
  --game-tile-5:    #ffb81c;
  --game-tile-6:    #6fb0ff;
  --game-tile-7:    #2457b8;
  --game-tile-8:    #0c1730;
  --game-radius:    6px;
  --game-font:      'Big Shoulders Display', 'Sofia Sans Extra Condensed', 'Archivo', 'Arial Narrow', sans-serif;
  --game-font-css:  "/assets/themes/big-match/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): the pitch by day, not a dark screen */
  --game-arena-screen: #eef2ec;
  --game-arena-coins:  #b8860b;
  --game-arena-win:    #17733e;
  --game-arena-danger: #d23a2a;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><rect width='40' height='80' fill='%231f8a4c' fill-opacity='.05'/></svg>");
}
html.dark {
  --game-bg:        #0a1328;
  --game-surface:   #070d1d;
  --game-surface-2: #142347;
  --game-ink:       #eef3fa;
  --game-muted:     #8794aa;
  --game-accent:    #c6ec2f;
  --game-accent-ink:#0a1226;
  --game-good:      #6fd28f;
  --game-bad:       #ff7a66;
  --game-tile-1:    #1d3060;
  --game-tile-2:    #1f5a3a;
  --game-tile-3:    #2f9a57;
  --game-tile-4:    #8fcf3a;
  --game-tile-5:    #c6ec2f;
  --game-tile-6:    #ffd36b;
  --game-tile-7:    #ffb81c;
  --game-tile-8:    #f6f8f2;
  --game-arena-screen: #0a1328;
  --game-arena-coins:  #ffc94a;
  --game-arena-win:    #6fd28f;
  --game-arena-danger: #ff7a66;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='30' viewBox='0 0 46 30'><g fill='%23ffffff' fill-opacity='.07'><circle cx='4' cy='5' r='1'/><circle cx='21' cy='14' r='.9'/><circle cx='36' cy='4' r='.8'/><circle cx='12' cy='24' r='.9'/><circle cx='40' cy='22' r='1'/></g></svg>");
}

/* ── Base ──
   Tailwind's compiled sheet loads after the theme, so selectors that must
   beat its single-class utilities carry an extra html qualifier. */
html body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-ui);
}
html .font-sans { font-family: var(--font-ui); }

html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-synthesis: none;
  letter-spacing: .005em;
}
.display-italic { font-style: normal; }

::selection { background: var(--lime); color: #0c1730; }

.text-gradient-theme { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--theme-500); }

.ed-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--theme-600);
}
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

/* Section eyebrow: a slanted lime bar in front, like a broadcast caption */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 18px; height: 10px;
  background: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(12, 23, 48, .12);
  transform: skewX(-20deg);
}
[dir="rtl"] .section-eyebrow::before { transform: skewX(20deg); }

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.92rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink);
  padding: .3rem .1rem 2px;
  border-bottom: 2px solid var(--theme-500);
  text-decoration: none;
  transition: gap 0.18s ease;
}
.btn-view-all:hover { gap: 0.75rem; }
[dir="rtl"] .btn-view-all svg { transform: scaleX(-1); }

.ed-rule { background-color: var(--rule); }
.ed-rule-soft { background-color: var(--rule-soft); }
.ed-grain::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--bm-mown); }

.ed-folio { font-family: var(--font-display); font-weight: 800; color: var(--theme-600); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
#desktopHeader .hdr-search:focus-within { border-color: var(--theme-500); box-shadow: 0 0 0 3px var(--lime-soft); }
.ed-search { background: transparent; border: none; }

.hdr-strip, .hdr-strip .ed-status { color: rgba(238, 243, 250, 0.86); }
.hdr-strip a:hover, .hdr-strip button:hover { color: var(--lime); }

/* The touchline band under the main header bar and wherever a section
   needs a border */
.bm-band { height: 12px; background: var(--bm-band); }

/* The season chip in the status strip: the ball of the sport and the match */
.bm-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .06em; color: var(--lime); }
.bm-strip-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
html[data-bm-sport="gridiron"] .bm-strip-chip svg { width: 20px; }
.bm-strip-chip__led { color: var(--led); }
/* The desktop strip shares its line with the menu; the second half of the
   chip joins it only where there is room for both. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1439px) { .bm-strip-chip__extra { display: none; } }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0;
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); white-space: nowrap;
  padding-right: 1.25rem; border-right: 1px solid var(--rule);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.92rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--btn-bg); color: var(--btn-ink); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--theme-500); outline-offset: 2px; }

/* ── Links and buttons ── */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid var(--theme-500);
  transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.55rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 800;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 8px;
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background: var(--btn-bg-hover); color: var(--btn-ink);
  transform: translateY(-1px); box-shadow: var(--btn-shadow-hover);
}
html .ed-btn-primary:active, html .ed-plan-cta:active { transform: translateY(1px); }
html.dark .ed-btn-primary, html.dark .ed-btn-primary:hover,
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta,
html body .ed-plan-cta, html.dark body .ed-plan-cta {
  background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow);
}
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--theme-500); outline-offset: 3px; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.76rem 1.4rem;
  font-family: var(--font-ui); font-size: 0.98rem; font-weight: 700;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 8px;
  transition: background 0.15s ease, border-color .15s ease;
}
.ed-btn-secondary:hover { background: var(--paper-3); border-color: var(--ink-soft); }
html.dark .ed-btn-secondary { color: var(--ink); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }

/* ── Cards: a fine edge, a lift on hover ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html .ed-plan:hover, html .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
html .ed-plan-featured {
  position: relative;
  background: var(--bm-night); color: #f6f8f2;
  border: 1px solid rgba(198, 236, 47, .3); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: var(--bm-band); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(246, 248, 242, .2); }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-soft); }
.ed-topnav-link { color: rgba(238, 243, 250, 0.86); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: var(--lime); }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
/* header.css makes these full width; with the margins here they would
   stick out of the closed drawer */
html .drawer-login, html .drawer-logout { display: flex; width: auto; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 8px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700;
  color: var(--theme-600); border: 1px solid var(--theme-600); text-decoration: none;
}
.drawer-logout:hover { background: var(--gold-soft); }

.mobile-glass-header {
  background: rgba(238, 242, 236, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(7, 12, 22, 0.94); }

.ed-avatar-ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--theme-500); }

[x-cloak] { display: none !important; }

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ed-dropdown-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.68rem 1rem;
  font-family: var(--font-ui); font-size: 0.97rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 0.9rem 1rem 0.4rem;
}

.ed-mobile-link.active { color: var(--nav-accent); }

/* ── The LED scoreboard: a black panel in a steel frame, its text lit in
   amber with the gaps between pixels showing. Used by the hero, the 404,
   the winners page and the splash. ── */
.bm-board {
  position: relative;
  color: var(--led);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .06), transparent 60%),
    #05080e;
  border: 3px solid #2a3346;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 26px rgba(0, 0, 0, .8), 0 14px 30px -12px rgba(0, 0, 0, .6);
}
.bm-led {
  position: relative;
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--led);
  text-shadow: 0 0 10px rgba(255, 184, 28, .55), 0 0 2px rgba(255, 211, 107, .9);
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}
/* The pixel grid laid over the lit text; decorative, so it never takes
   pointer events or covers anything outside the text box */
.bm-led::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--bm-led-grid); }
.bm-led--lime { color: var(--lime); text-shadow: 0 0 10px rgba(198, 236, 47, .5), 0 0 2px rgba(230, 248, 166, .9); }

/* ── A match ticket: chalk-white card, a perforated tear line with a
   notch bitten out of each side. --bg is whatever it sits on. ── */
.bm-perf {
  position: relative; height: 0;
  border-top: 2px dashed rgba(12, 23, 48, .25);
}
.bm-perf::before, .bm-perf::after {
  content: ''; position: absolute; top: -8px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg, var(--paper));
}
.bm-perf::before { left: -8px; }
.bm-perf::after { right: -8px; }
/* A barcode, drawn as stripes */
.bm-barcode {
  display: block; height: 18px;
  background: repeating-linear-gradient(90deg, #0c1730 0 2px, transparent 2px 3px, #0c1730 3px 4px, transparent 4px 6px, #0c1730 6px 9px, transparent 9px 10px, #0c1730 10px 11px, transparent 11px 14px);
  opacity: .8;
}

/* ── Dark/light toggle: the floodlights switch on ──
   assets/js/big-match.js registers the transition: banks of floodlights
   along the top of the screen switch on one after another with a clunk,
   each throwing a column of white light down the page until the whole
   screen is lit, the mode flips under the glare, and then the banks go
   off again in the same order, each lamp fading through amber. */
.px-fx--bm-flood { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; display: flex; }
.px-fx--bm-flood .bm-fx-bank { position: relative; flex: 1 1 0; height: 100%; }
.px-fx--bm-flood .bm-fx-beam {
  position: absolute; inset: 0 -1px;
  background: linear-gradient(180deg, #ffffff 0%, rgba(238, 246, 255, .98) 40%, rgba(222, 236, 255, .96) 100%);
  opacity: 0;
  transform-origin: 50% 0;
  transition: opacity .16s ease-out, transform .2s ease-out;
  transform: scaleX(.35);
}
.px-fx--bm-flood .bm-fx-head {
  position: absolute; z-index: 2; left: 50%; top: 10px; width: min(86px, 70%); aspect-ratio: 1.6;
  transform: translateX(-50%) translateY(-120%);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 5px;
  background: #1a2335; border-radius: 4px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
  transition: transform .18s cubic-bezier(.3, 1.4, .5, 1);
}
.px-fx--bm-flood .bm-fx-head > i { border-radius: 2px; background: #3a4558; transition: background .1s, box-shadow .1s; }
.px-fx--bm-flood.is-rigged .bm-fx-head { transform: translateX(-50%); }
.px-fx--bm-flood .bm-fx-bank.is-on .bm-fx-head > i { background: #ffffff; box-shadow: 0 0 12px 4px rgba(255, 255, 255, .9); }
.px-fx--bm-flood .bm-fx-bank.is-on .bm-fx-beam { opacity: 1; transform: none; }
.px-fx--bm-flood .bm-fx-bank.is-off .bm-fx-beam { opacity: 0; transform: scaleX(.6); transition: opacity .26s ease-in, transform .26s ease-in; }
.px-fx--bm-flood .bm-fx-bank.is-off .bm-fx-head > i { background: #ffb81c; box-shadow: 0 0 6px 1px rgba(255, 184, 28, .6); transition: background .4s, box-shadow .4s; }
.px-fx--bm-flood.is-gone .bm-fx-head { transform: translateX(-50%) translateY(-120%); transition: transform .2s ease-in; }

/* ── Footer: the stand behind the goal, navy in both modes, a row of
   pitch-side LED boards along its top and the touchline under them ── */
.bm-footer {
  --paper:     #0c1730;
  --paper-2:   #142347;
  --paper-3:   #1d3060;
  --ink:       #f6f8f2;
  --ink-2:     #dfe6f1;
  --ink-soft:  #a7b3c7;
  --rule:      rgba(246, 248, 242, 0.15);
  --rule-soft: rgba(246, 248, 242, 0.08);
  --theme-500: #c6ec2f; --theme-600: #c6ec2f; --theme-700: #e1f68f;
  --theme-500-rgb: 198, 236, 47;
  position: relative;
}
html.dark .bm-footer { --paper: #050a16; --paper-2: #0e1830; --paper-3: #16233f; }
html body #desktopFooter.bm-footer {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 16px),
    var(--paper) !important;
}
.bm-footer-top { position: relative; background: var(--paper); }
html.dark .bm-footer-top { background: var(--paper); }
/* The boards: black, lit in moving amber and lime words, joined end to end */
.bm-boards {
  position: relative; height: 40px; overflow: hidden;
  background: #04070d;
  border-top: 3px solid #1e2738; border-bottom: 3px solid #1e2738;
  display: flex; align-items: center;
}
.bm-boards__run { display: flex; flex: 0 0 auto; align-items: center; gap: 0; white-space: nowrap; }
.bm-boards__seg {
  display: inline-flex; align-items: center; gap: .9rem; height: 34px; padding: 0 1.4rem;
  font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase;
  border-inline-end: 2px solid #1e2738;
}
.bm-boards__seg:nth-child(odd) { color: var(--led); text-shadow: 0 0 8px rgba(255, 184, 28, .5); }
.bm-boards__seg:nth-child(even) { color: var(--lime); text-shadow: 0 0 8px rgba(198, 236, 47, .45); }
.bm-boards__seg svg { width: 20px; height: 20px; flex-shrink: 0; }
html[data-bm-sport="gridiron"] .bm-boards__seg svg { width: 28px; }
.bm-boards::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--bm-led-grid); }
@media (prefers-reduced-motion: no-preference) {
  .bm-boards__run { animation: bm-boards 38s linear 1; }
  [dir="rtl"] .bm-boards__run { animation-name: bm-boards-rtl; }
}
@keyframes bm-boards { to { transform: translateX(-100%); } }
@keyframes bm-boards-rtl { to { transform: translateX(100%); } }
.bm-footer-top > .bm-band { height: 14px; }
.bm-footer a:hover { color: var(--lime); }
html.dark #desktopFooter li { color: var(--ink-2) !important; }

html .ed-floating-nav {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .95rem; font-weight: 600; color: var(--ink-2); }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }

/* The newsletter: a chalk-white board with a lime caption bar */
html body .bm-footer .ed-newsletter {
  position: relative;
  background:
    radial-gradient(280px 160px at 100% 100%, rgba(31, 138, 76, .12), transparent 70%),
    #f6f8f2;
  color: #0c1730;
  border: 0; border-radius: 10px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6);
  overflow: hidden;
}
html body .bm-footer .ed-newsletter::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; pointer-events: none;
  background: var(--bm-band);
}
html body .bm-footer .ed-newsletter::after { display: none; }
html body .bm-footer .ed-newsletter, html body .bm-footer .ed-newsletter * { --ink: #0c1730; --ink-2: #2a3852; }
html body .bm-footer .ed-newsletter h4 { font-family: var(--font-display); font-weight: 900; letter-spacing: .01em; }
/* header.css letters dark-mode footer headings in a light grey; this card
   stays chalk white, so its words stay navy */
html.dark #desktopFooter .ed-newsletter, html.dark #desktopFooter .ed-newsletter h4, html.dark #desktopFooter .ed-newsletter p { color: #0c1730 !important; }
html.dark body .bm-footer .ed-newsletter input.ed-newsletter-input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark) {
  background-color: #ffffff !important; color: #0c1730 !important; border-color: rgba(12, 23, 48, .22) !important;
}
html body .bm-footer .ed-newsletter-input { background: #ffffff !important; color: #0c1730 !important; border: 1px solid rgba(12, 23, 48, .22) !important; border-radius: 8px; }
html body .bm-footer .ed-newsletter-input::placeholder { color: #5b687c; }
html body .bm-footer .ed-newsletter-input:focus { border-color: #1f8a4c !important; box-shadow: 0 0 0 3px rgba(31, 138, 76, .18); }
html body .bm-footer .ed-newsletter-btn {
  background: #0c1730; color: #c6ec2f; border: 0; border-radius: 8px;
  font-family: var(--font-ui); font-weight: 800;
}
html body .bm-footer .ed-newsletter-age { color: #2a3852; }
[dir="rtl"] .ed-newsletter-btn svg { transform: scaleX(-1); }

/* Logo card: the light-mode logo on a chalk-white stadium sign with a lime
   edge, wherever it sits on navy (footer, app splash) */
.bm-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.4rem;
  padding-inline-start: 1.9rem;
  background: linear-gradient(90deg, var(--lime) 0 8px, #f6f8f2 8px);
  border-radius: 6px;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .5);
}
[dir="rtl"] .bm-plaque { background: linear-gradient(270deg, var(--lime) 0 8px, #f6f8f2 8px); }

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* On phones a heading never splits mid-word; only a word wider than the
   whole column may still break. */
@media (max-width: 639px) {
  html body :is(.text-fit, :is(h1, h2, h3).truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
  /* the auction page's "similar auctions" link ("Andere Auktionen durchstöbern") drops under its heading */
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow the theme's own surfaces. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(7, 12, 22, 0.94) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: var(--paper) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(15, 23, 39, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #182337, #070c16, #13234a, #04070e) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* The phone language sheet: header.css paints it near-black after dark;
   here it is the night stand, the chosen language on a lime tint. */
html.dark #langSheet { background: var(--paper-2) !important; border-top: 1px solid var(--rule); }
html.dark #langSheet .lang-sheet-header { border-bottom-color: var(--rule); }
html.dark #langSheet .lang-row span { color: var(--ink) !important; }
html.dark #langSheet .lang-row:hover { background: var(--paper-3) !important; }
html #langSheet .lang-row[style*="background"] { background: var(--lime-soft) !important; box-shadow: inset 0 0 0 1px rgba(var(--theme-500-rgb), .35); }
html.dark #langSheet .lang-drag-handle { background: rgba(238, 243, 250, .2); }

/* header.css fills every dark-mode field with a navy #0d1117; here fields
   take the theme's own night. Same selector shape so it outranks it. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark),
html.dark textarea:not(.no-dark),
html.dark select:not(.no-dark) {
  background-color: #050913 !important;
  border-color: rgba(238, 243, 250, .2) !important;
  color: #eef3fa !important;
}

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink
   is dark. After dark those panels take the deepest navy. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #04070e;
  --paper: #eef3fa;
  border-color: rgba(198, 236, 47, .3);
}

html header.safe-top-header[style] { background: rgba(238, 242, 236, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(7, 12, 22, .95) !important; }

/* ── Login / register / forgot-password brand panel: the floodlit night,
   the touchline along its foot ── */
:root, html.dark {
  --brand-gradient: var(--bm-night);
  --brand-glow-1: rgba(214, 232, 255, 0.24);
  --brand-glow-2: rgba(198, 236, 47, 0.16);
}
.brand-panel { background: var(--bm-night) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the touchline. */
html .brand-panel::after {
  content: ''; position: absolute;
  left: 0 !important; right: 0 !important; bottom: 22px !important; top: auto !important;
  width: 100% !important; height: 14px !important;
  border-radius: 0 !important; transform: none !important; opacity: 1 !important;
  background: var(--bm-band) !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(246, 248, 242, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 900 !important; }

/* ── Wallet balance card: a season ticket — navy, the halfway line and
   centre circle of a pitch marked faintly across it, a lime stripe down
   its edge and the balance lit like the scoreboard ── */
html body .wallet-hero {
  position: relative;
  background:
    radial-gradient(circle at 72% 34%, transparent 0 52px, rgba(246, 248, 242, .16) 53px 55px, transparent 56px),
    linear-gradient(90deg, transparent calc(72% - 1px), rgba(246, 248, 242, .16) calc(72% - 1px) calc(72% + 1px), transparent calc(72% + 1px)) 0 0 / 100% 58% no-repeat,
    radial-gradient(circle at 72% 34%, rgba(246, 248, 242, .3) 0 3px, transparent 3.5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 40px, transparent 40px 80px),
    var(--bm-night);
  border: 1px solid rgba(198, 236, 47, .25);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  color: #f6f8f2;
  overflow: hidden;
}
html body .wallet-hero::before {
  left: 0; right: auto; top: 0; bottom: 0; width: 8px; height: auto; border-radius: 0;
  background: var(--lime);
}
html[dir="rtl"] body .wallet-hero::before { left: auto; right: 0; }
html body .wallet-hero::after { display: none; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 900;
  letter-spacing: .01em; overflow-wrap: normal;
  color: var(--led);
  text-shadow: 0 0 14px rgba(255, 184, 28, .45);
}
html body .wallet-hero-btn-primary { background: var(--lime); color: #0c1730; border: 0; font-family: var(--font-ui); font-weight: 800; border-radius: 8px; }
html body .wallet-hero-btn-primary:hover { background: #d4f553; color: #0c1730; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #f6f8f2; border-color: rgba(246, 248, 242, .45); border-radius: 8px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): the touchline
   down its side ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
html .ed-card-mystery::before {
  top: 0; bottom: 0; left: 0; right: auto; width: 10px; height: auto; border-radius: 0;
  background: var(--bm-band-v); opacity: 1; z-index: 0;
}
[dir="rtl"] .ed-card-mystery::before { left: auto; right: 0; }
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: the touchline along its top ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  padding-top: 1.9rem;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: var(--bm-band);
}
html body .pd-buybox .font-display.text-4xl { font-weight: 900; color: var(--theme-600); }
.pd-title { font-weight: 800 !important; }

/* The mystery box plugin's own button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill; readable here on
   plugin releases without their own fix. */
html.dark button.spin-btn:not(:disabled) { color: var(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's accent. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a
   field and take the colour of the main buttons. */
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 8px;
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--gold-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--gold-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(var(--theme-500-rgb), .3); }
html.dark .border-violet-200 { border-color: rgba(var(--theme-500-rgb), .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(var(--theme-500-rgb), .35); }
html .focus\:border-purple-400:focus { border-color: var(--theme-500); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the theme's main buttons. */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(12, 23, 48, .3); border-top-color: var(--btn-ink); }

/* Shared and plugin markup letters accent surfaces in a fixed white (the
   theme utilities, inline var(--theme-500/600) fills, the seller centre's
   --sc-accent); read it from --on-accent instead so it stays legible on lime. */
html.dark :is(.bg-theme-500, .bg-theme-600, .bg-theme-700, .from-theme-500, .from-theme-600).text-white,
html.dark :is(.bg-theme-500, .bg-theme-600, .bg-theme-700, .from-theme-500, .from-theme-600) .text-white,
html.dark [style*="background:var(--theme-500)"][style*="color:#fff"],
html.dark [style*="background:var(--theme-600)"][style*="color:#fff"] { color: var(--on-accent) !important; }
html.dark :is(.sc-tile--hero, .sc-btn--primary) { color: var(--on-accent); }
html.dark .sc-tile--hero :is(.sc-eb, p) { color: color-mix(in srgb, var(--on-accent) 82%, transparent); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ── Cart and checkout: the order total under the touchline ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 12px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.6rem !important;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px;
  background: var(--bm-band);
}
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.8rem;
  color: var(--theme-600);
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .05em; }
@media (max-width: 1023px) { .hdr-strip .bm-strip-chip { font-size: 10px; gap: .35rem; } }
/* Small phones: the dark-mode switch and the App chip in the header drop
   their words and keep their icons. */
@media (max-width: 419px) {
  html .hdr-strip .dark-mode-toggle span { display: none; }
  html .mobile-glass-header .pwa-chip__label { display: none; }
  html .mobile-glass-header .pwa-chip { padding: 0 .6rem; }
}

/* Tab bars on the Earn hub and the winners page sit on the theme's own
   surface, not a black band, after dark; the chosen tab is a main button. */
html.dark #pillNavBar, html.dark #pillNavBar > div { background-color: var(--paper-2) !important; border-color: var(--rule) !important; }
html .wn-tab-bar { background: rgba(238, 242, 236, .95); }
html.dark .wn-tab-bar { background: rgba(15, 23, 39, .96); }
html .wn-tab { font-family: var(--font-ui); font-size: 14px; }
html .wn-tab-active, html.dark .wn-tab-active, html.dark button.wn-tab-active { background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); }

/* ── My Winnings: each prize a match ticket — the picture on a patch of
   mown turf inside a chalk penalty box, a perforated tear line, the
   details on the stub with a barcode ── */
.bm-win {
  --bg: var(--paper);
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.bm-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.bm-win__turf {
  position: relative; padding: 14px; border-radius: 11px 11px 0 0; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 22px, transparent 22px 44px),
    linear-gradient(180deg, var(--turf-1), var(--turf-2));
}
.bm-win__box { position: relative; background: #f6f8f2; border-radius: 4px; box-shadow: 0 0 0 3px rgba(246, 248, 242, .55), 0 6px 14px -6px rgba(0, 0, 0, .45); }
html.dark .bm-win__box { background: #eef3ea; }
.bm-win__turf img { position: relative; z-index: 0; }
.bm-win__turf > .absolute { z-index: 4; top: 1.4rem; }
.bm-win__perf { margin: 0 2px; }
.bm-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #0c1730; background: #f6f8f2; border-radius: 4px;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .35);
}
.bm-win__tag--open { color: #0c1730; background: var(--lime); }
.bm-win__tag--done { color: #f6f8f2; background: #0c1730; }
.bm-win__name { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.15; letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere; }
.bm-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.bm-win__price { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; }
.bm-win__code { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.bm-win__code .bm-barcode { flex: 0 0 96px; height: 16px; }
html.dark .bm-win__code .bm-barcode { filter: invert(1); opacity: .5; }
.bm-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .92rem; }
.bm-win__cart, .bm-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 8px; font-weight: 700;
}
.bm-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.bm-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.bm-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.bm-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .92rem; font-weight: 700;
  color: var(--theme-600); background: var(--lime-soft); border-radius: 8px;
}

/* Shared markup sets some small captions in the display face; a condensed
   stadium face is for headlines, so at caption sizes they use the UI face. */
html .font-display.text-xs, html .font-display.text-sm { font-family: var(--font-ui); font-weight: 500; letter-spacing: 0; }
/* Arabic and Urdu fall back to a system face whose letters run taller than
   the condensed Latin one; the tight headline leading would let lines touch. */
[dir="rtl"] .bm-hero__title, [dir="rtl"] .bm-wn__title, [dir="rtl"] .bm-seller__title, [dir="rtl"] .bm-404__heading { line-height: 1.3; }

/* Status tones (kernel 1.1.166): this theme's own green, amber, red and info hues
   for the shared .px-tone-* chips and notes, each set so its chip and text
   read at 4.5:1 or better on this theme's paper in light and dark. */
html:root { --px-good: #17733e; --px-warn: #b45e09; --px-crit: #d03a2a; --px-info: #0a6bff; }
html.dark:root { --px-good: #6fd28f; --px-warn: #fbbf23; --px-crit: #ff9080; --px-info: #d5f269; }

/* Changing language, the scene (big-match.js): the scoreboard over the
   pitch and the substitution boards, the old code up in red and the new in
   green, while the scoreboard changes to the new name; after the reload
   the cameras flash. Scoreboard and boards stay dark in both modes, so
   their lights are fixed colours. The stadium is the same on both pages,
   so the reload never shows. */
.bm-lang-stage { background: color-mix(in srgb, #070d1d 60%, transparent); }
.bm-lang-ground {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 18px 18px 20px; overflow: hidden;
  border-radius: var(--radius, 14px); color: #f6f8f2;
  background: repeating-linear-gradient(90deg, var(--turf-1, #2f9a57) 0 44px, var(--turf-2, #288a4c) 44px 88px);
  box-shadow: inset 0 0 0 2px rgba(246, 248, 242, .35), 0 34px 70px -28px rgba(0, 0, 0, .65);
  font-family: var(--font-ui);
}
.bm-lang-score {
  position: relative; z-index: 2; padding: 10px; border-radius: 10px; background: #0c1730;
  box-shadow: inset 0 0 0 2px #1d3060, 0 10px 20px -10px rgba(0, 0, 0, .6);
}
.bm-lang-screen {
  display: grid; align-items: center; justify-items: center; min-height: 112px; padding: 12px 14px; border-radius: 6px; text-align: center;
  background: radial-gradient(ellipse at 50% 0, #142347, #070d1d 80%);
}
.bm-lang-screen > span { grid-area: 1 / 1; max-width: 100%; min-width: 0; }
.bm-lang-was { opacity: 0; color: #ffb81c; font: 700 clamp(24px, 7vw, 34px)/1.1 var(--font-display); text-transform: none; overflow-wrap: anywhere; }
.bm-lang-now { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bm-lang-now img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #c6ec2f; }
.bm-lang-name {
  max-width: 100%; color: #f6f8f2; font: 800 clamp(32px, 10vw, 56px)/1 var(--font-display); letter-spacing: .01em; overflow-wrap: anywhere;
  text-shadow: 0 0 14px rgba(198, 236, 47, .35);
}
.bm-lang-leds {
  display: block; height: 8px; margin-top: 8px; border-radius: 4px;
  background: radial-gradient(circle, #ffb81c 0 2px, transparent 2.5px) 0 50% / 10px 8px repeat-x; opacity: .8;
}
.bm-lang-subs { position: relative; z-index: 1; display: flex; justify-content: center; gap: 18px; padding-top: 16px; }
.bm-lang-sub {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 8px;
  background: #0c1730; box-shadow: inset 0 0 0 3px #1d3060, 0 8px 14px -8px rgba(0, 0, 0, .6);
  font: 800 clamp(26px, 8vw, 36px)/1 var(--font-display); letter-spacing: .06em;
}
.bm-lang-sub::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 8px; height: 16px; margin-left: -4px; background: #1d3060; }
.bm-lang-sub i { font-style: normal; font-size: .8em; }
.bm-lang-sub-off { color: #ff5a46; text-shadow: 0 0 10px rgba(255, 90, 70, .6); }
.bm-lang-sub-on { color: #43e07a; text-shadow: 0 0 10px rgba(67, 224, 122, .6); }
.bm-lang-flash {
  position: absolute; right: 8%; top: 4px; z-index: 1; width: 90px; height: 90px; margin: -45px -45px 0 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 8%, rgba(255, 255, 255, .7) 18%, rgba(255, 255, 255, 0) 62%);
}
.bm-lang-flash-b { right: auto; left: 10%; top: auto; bottom: 30px; margin: 0 0 -45px -45px; }

/* Out: red board up, green board up, the scoreboard changes. */
.px-lang-stage-out .bm-lang-ground { animation: bm-lang-ground-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .bm-lang-sub-off { animation: bm-lang-raise .38s cubic-bezier(.3, .8, .3, 1.2) .18s both; }
.px-lang-stage-out .bm-lang-sub-on { animation: bm-lang-raise .38s cubic-bezier(.3, .8, .3, 1.2) .48s both; }
.px-lang-stage-out .bm-lang-sub-off b { animation: bm-lang-blink .2s steps(2, end) .55s 2 both; }
.px-lang-stage-out .bm-lang-was { animation: bm-lang-was .72s ease-in both; }
.px-lang-stage-out .bm-lang-now { animation: bm-lang-now .95s ease-out both; }
/* In: it starts where out ended; the cameras flash, then off it goes. */
.px-lang-stage-in .bm-lang-flash { animation: bm-lang-flash .45s ease-out .12s both; }
.px-lang-stage-in .bm-lang-flash-b { animation-delay: .32s; }
.px-lang-stage-in .bm-lang-score { animation: bm-lang-lit .45s ease-out .12s both; }
.px-lang-stage-in .bm-lang-ground { animation: bm-lang-ground-out .28s ease-in 1s both; }
@keyframes bm-lang-ground-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes bm-lang-ground-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes bm-lang-raise { from { transform: translateY(90px); opacity: 0; } }
@keyframes bm-lang-blink { 50% { opacity: .35; } }
@keyframes bm-lang-was { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bm-lang-now { 0%, 62% { opacity: 0; clip-path: inset(0 0 100% 0); } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes bm-lang-flash {
  0%   { opacity: 0; transform: scale(.3); }
  25%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes bm-lang-lit { 30% { filter: brightness(1.45); box-shadow: inset 0 0 0 2px #1d3060, 0 0 30px rgba(255, 255, 255, .55); } }
@media (max-width: 460px) {
  .bm-lang-ground { padding: 14px 12px 18px; }
  .bm-lang-subs { gap: 10px; }
  .bm-lang-sub { padding: 7px 12px; gap: 6px; }
}

/* Phones: the hero's two buttons stay side by side, each as wide as its
   label needs, their text and padding shrinking with the screen; a label
   still too long takes two even lines inside its button. A home section's title and its "View all" link
   share one row too: the title keeps a little under half of it, breaking
   between words if it must, and only a very long link label takes two
   lines. */
@media (max-width: 639px) {
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) {
    flex: 1 1 auto; min-width: min-content; width: auto; margin: 0; justify-content: center; text-align: center; white-space: normal; text-wrap: balance;
    padding-inline: clamp(.5rem, 2.6vw, 1.25rem); font-size: clamp(.75rem, 3.5vw, .9375rem); line-height: 1.15;
  }
  html body :is(div, p):has(> .ed-btn-primary):has(> .ed-btn-secondary) > :is(.ed-btn-primary, .ed-btn-secondary) > :is(svg, i, img) { flex: none; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) { flex-direction: row; flex-wrap: nowrap; align-items: flex-end; column-gap: .75rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > div { flex: 1 1 0; min-width: 45%; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 55%; margin: 0; white-space: normal; text-wrap: balance; text-align: center; font-size: .8125rem; line-height: 1.2; letter-spacing: .02em; gap: .375rem; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) h2.text-fit { font-size: clamp(1.25rem, 6.4vw, 1.75rem); overflow-wrap: break-word; }
}

/* Recent winners strip. It also stops while one of its cards has focus,
   slides towards the reading side on right-to-left pages (the shared loop
   only runs leftwards, which empties the row there), and holds still with
   each winner shown once when there are too few of them to fill the row
   (data-wt-still, set by assets/js/components/home/winner-ticker.js). */
html body .wt-wrap:focus-within .wt-track { animation-play-state: paused; }
@keyframes wt-scroll-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
@media (prefers-reduced-motion: no-preference) {
  html[dir="rtl"] body .wt-track { animation-name: wt-scroll-rtl; }
}
html body .wt-wrap[data-wt-still] .wt-track { animation: none; transform: none; margin-inline: auto; }
html body .wt-wrap[data-wt-still] .wt-card[data-wt-repeat] { display: none; }

/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
   so the secondary text, accent links and buttons in them take the deeper
   shades below to read at 4.5:1 there; the page around keeps its own. */
html:not(.dark) [role="dialog"] {
  --theme-500: #1c7c45;
  --ink-soft: #586578;
}
/* rev 868fe5109c9f2a2b */