/* ============================================================
   DRAW HALL THEME — the televised draw night.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   The studio set: a glossy white stage floor, a backdrop of
   electric-blue LED panels, the studio clock with its ring of
   second-lights, the clear ball drum and its chute, numbered
   balls coming to rest in the results rack, the split-flap
   results board, an ON AIR lamp and broadcast lower-thirds.
   Headlines in a wide grotesque, every clock, number and result
   in a tabular mono. One hot colour, signal red, is kept for ON
   AIR, live states and the winning ball. After dark it is the
   live show: the hall goes dark, the stage is lit, the panels
   glow.

   The theme sets the --theme-* accent ramp itself (electric
   blue), so the admin's accent colour setting does not apply
   while it is active.
   ============================================================ */

:root {
  --font-display: 'Anybody', 'Arial Black', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-ui:      'Onest', 'Segoe UI', system-ui, 'Noto Sans', sans-serif;
  --font-num:     'Chivo Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --paper:        #f3f5fa;
  --paper-2:      #ffffff;
  --paper-3:      #e7ecf6;
  --ink:          #0b1433;
  --ink-2:        #26304f;
  --ink-soft:     #535e7d;
  --rule:         rgba(11, 20, 51, 0.13);
  --rule-soft:    rgba(11, 20, 51, 0.07);
  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 1px 0 rgba(11, 20, 51, .05), 0 10px 24px -16px rgba(16, 34, 110, .4);
  --shadow-md:    0 1px 0 rgba(11, 20, 51, .05), 0 22px 40px -22px rgba(16, 34, 110, .55);

  /* Electric blue: the backdrop */
  --theme-50:  #eef2ff;
  --theme-100: #dfe6ff;
  --theme-200: #bccbff;
  --theme-300: #8ea6ff;
  --theme-400: #5b7cff;
  --theme-500: #2a4fff;
  --theme-600: #1f45ff;
  --theme-700: #1535d6;
  --theme-800: #1129a6;
  --theme-900: #0d1f78;
  --theme-500-rgb: 42, 79, 255;
  --theme-600-rgb: 31, 69, 255;
  --theme-600-ink: #ffffff;

  /* The set's colours, each with its deep shade, an ink that reads on
     paper, and a soft wash */
  --drh-blue:      #1f45ff;
  --drh-blue-deep: #0e2bc2;
  --drh-blue-ink:  #1a3be0;
  --drh-blue-soft: rgba(31, 69, 255, .09);
  --drh-red:       #ff1f4b;
  --drh-red-deep:  #c40f36;
  --drh-red-ink:   #d0103b;
  --drh-red-soft:  rgba(255, 31, 75, .1);
  --drh-gold:      #ffc21f;
  --drh-gold-deep: #d99a00;
  --drh-gold-ink:  #8a5c00;
  --drh-gold-soft: rgba(255, 194, 31, .18);
  --drh-green:      #10a56f;
  --drh-green-deep: #0a7a51;
  --drh-green-ink:  #0b7a52;
  --drh-green-soft: rgba(16, 165, 111, .11);
  --drh-navy:      #0b1433;
  --drh-navy-2:    #141e45;
  /* Older names some shared rules use */
  --drh-yellow: var(--drh-gold); --drh-yellow-ink: var(--drh-gold-ink); --drh-yellow-soft: var(--drh-gold-soft);

  /* The control room: footer, splash, winners board and the draw */
  --night:   #070b1e;
  --night-2: #0e1532;
  --night-3: #18224d;
  --on-night: #eef2ff;
  --on-night-soft: rgba(238, 242, 255, .74);

  /* Names other themes' shared markup reaches for */
  --gold:       #1f45ff;
  --gold-2:     #ffc21f;
  --gold-soft:  rgba(31, 69, 255, 0.08);
  --gold-ink:   #0b1433;
  --felt:       #070b1e;
  --felt-2:     #0e1532;
  --on-felt:    #eef2ff;
  --on-felt-soft: rgba(238, 242, 255, 0.76);
  --peacock:    #1f45ff;
  --peacock-soft: rgba(31, 69, 255, 0.1);
  --red:        #d0103b;
  --red-soft:   rgba(255, 31, 75, 0.1);
  --rose:       #ff1f4b;
  --rose-soft:  rgba(255, 31, 75, 0.09);

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

  /* Buttons: a lit console key in electric blue that sinks when pressed */
  --btn-bg:       #1f45ff;
  --btn-bg-hover: #2f55ff;
  --btn-ink:      #ffffff;
  --btn-side:     #0e2bc2;
  --btn-shadow:   inset 0 1px 0 rgba(255, 255, 255, .32), 0 3px 0 var(--btn-side), 0 10px 20px -10px rgba(31, 69, 255, .7);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .32), 0 3px 0 var(--btn-side), 0 14px 26px -10px rgba(31, 69, 255, .85);

  /* The backdrop: LED panels in electric blue, seams between them and
     a fine grid of lamp dots over the face */
  --drh-led: radial-gradient(circle at 3px 3px, rgba(255, 255, 255, .2) 0 1px, transparent 1.5px) 0 0 / 7px 7px;
  --drh-seams: linear-gradient(90deg, rgba(4, 12, 60, .35) 0 1px, transparent 1px) 0 0 / 96px 100%, linear-gradient(0deg, rgba(4, 12, 60, .35) 0 1px, transparent 1px) 0 0 / 100% 72px;
  --drh-wall: var(--drh-led), var(--drh-seams), radial-gradient(120% 90% at 50% 0%, #3b62ff, #1f45ff 55%, #1232d0);
  /* The stage floor: white gloss, a band of reflected light across it */
  --drh-floor: linear-gradient(180deg, #ffffff, #e9eef8 60%, #dde4f2);
  --drh-gloss: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%);
  /* An LED strip along the foot of a lit plinth or card */
  --drh-strip: linear-gradient(90deg, transparent, var(--drh-blue) 12%, var(--drh-blue) 88%, transparent);
  --drh-strip-glow: 0 0 14px rgba(31, 69, 255, .55);
  --drh-chip-bg: rgba(11, 20, 51, .055);

  /* The board: split-flap cells in the control room's navy */
  --drh-flap: linear-gradient(180deg, #1a2452 0 49%, #0a1130 49% 51%, #141d47 51%);
  --drh-flap-ink: #ffffff;

  /* Art colours (includes/art.php reads these, the light set its fallback) */
  --drh-a-floor: #dfe5f2; --drh-a-floor2: #c9d2e6; --drh-a-pool: #ffffff;
  --drh-a-metal: #8e9bbd; --drh-a-metal2: #5b6890; --drh-a-metal3: #c3cbe0;
  --drh-a-panel: #0b1433; --drh-a-panel2: #18224a; --drh-a-glass: #e8eeff;
  --drh-a-line: #0b1433; --drh-a-paper: #fefefe; --drh-a-paper2: #eef2fb;

  /* A calm column down the middle, the panel grid out in the gutters */
  --drh-gutters: linear-gradient(90deg, transparent calc(50% - 700px), var(--paper) calc(50% - 664px), var(--paper) calc(50% + 664px), transparent calc(50% + 700px));
  --drh-gutter-pat: radial-gradient(circle at 6px 6px, rgba(31, 69, 255, .13) 0 1.3px, transparent 1.8px) 0 0 / 14px 14px;
  --page-bg: radial-gradient(1400px 420px at 50% -140px, rgba(31, 69, 255, .08), transparent 70%) no-repeat, var(--drh-gutters), var(--drh-gutter-pat), var(--paper);
}

/* After dark: the live show */
html.dark {
  --paper:        #060a1c;
  --paper-2:      #0d1430;
  --paper-3:      #172150;
  --ink:          #eef2ff;
  --ink-2:        #cbd3f3;
  --ink-soft:     #9aa6d2;
  --rule:         rgba(150, 172, 255, 0.17);
  --rule-soft:    rgba(150, 172, 255, 0.08);
  --shadow:       0 1px 0 rgba(0, 0, 0, .4), 0 14px 30px -16px rgba(0, 0, 0, .85);
  --shadow-md:    0 1px 0 rgba(0, 0, 0, .4), 0 24px 44px -20px rgba(0, 0, 0, .9);

  --theme-50:  #121a3f;
  --theme-100: #18245a;
  --theme-200: #243582;
  --theme-300: #8fa8ff;
  --theme-400: #7792ff;
  --theme-500: #5577ff;
  --theme-600: #4a6dff;
  --theme-700: #93abff;
  --theme-800: #b9c8ff;
  --theme-900: #dde5ff;
  --theme-500-rgb: 85, 119, 255;
  --theme-600-rgb: 74, 109, 255;
  --theme-600-ink: #ffffff;

  --drh-blue:      #3d66ff;
  --drh-blue-deep: #1f3fd6;
  --drh-blue-ink:  #93abff;
  --drh-blue-soft: rgba(61, 102, 255, .16);
  --drh-red:       #ff2e5b;
  --drh-red-deep:  #c4123b;
  --drh-red-ink:   #ff7c98;
  --drh-red-soft:  rgba(255, 46, 91, .16);
  --drh-gold:      #ffc93a;
  --drh-gold-deep: #c99200;
  --drh-gold-ink:  #ffd66b;
  --drh-gold-soft: rgba(255, 201, 58, .14);
  --drh-green:      #2fd39a;
  --drh-green-deep: #149a6c;
  --drh-green-ink:  #5fe3b4;
  --drh-green-soft: rgba(47, 211, 154, .14);

  --gold:       #93abff;
  --gold-2:     #ffc93a;
  --gold-soft:  rgba(61, 102, 255, 0.14);
  --gold-ink:   #eef2ff;
  --peacock:    #93abff;
  --peacock-soft: rgba(61, 102, 255, 0.16);
  --red:        #ff7c98;
  --red-soft:   rgba(255, 46, 91, 0.15);
  --rose:       #ff2e5b;
  --rose-soft:  rgba(255, 46, 91, 0.14);

  --hdr-strip-bg:  #03050f;
  --hdr-strip-rule: rgba(150, 172, 255, .12);

  --btn-bg:       #3d66ff;
  --btn-bg-hover: #3b66ff;
  --btn-ink:      #ffffff;
  --btn-side:     #1a36b8;
  --btn-shadow:   inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 var(--btn-side), 0 0 24px -4px rgba(61, 102, 255, .65);
  --btn-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 var(--btn-side), 0 0 34px -2px rgba(61, 102, 255, .85);

  --drh-led: radial-gradient(circle at 3px 3px, rgba(140, 165, 255, .42) 0 1px, transparent 1.6px) 0 0 / 7px 7px;
  --drh-seams: linear-gradient(90deg, rgba(0, 2, 20, .7) 0 1px, transparent 1px) 0 0 / 96px 100%, linear-gradient(0deg, rgba(0, 2, 20, .7) 0 1px, transparent 1px) 0 0 / 100% 72px;
  --drh-wall: var(--drh-led), var(--drh-seams), radial-gradient(90% 80% at 50% 62%, #2448e6, #12279c 45%, #081250 80%, #050a30);
  --drh-floor: linear-gradient(180deg, #0f1638, #080d24 60%, #050818);
  --drh-gloss: linear-gradient(180deg, rgba(120, 150, 255, .14), rgba(120, 150, 255, 0) 45%);
  --drh-strip-glow: 0 0 18px rgba(61, 102, 255, .9);
  --drh-chip-bg: rgba(150, 172, 255, .09);
  --drh-flap: linear-gradient(180deg, #1e2a5c 0 49%, #070b1e 49% 51%, #172152 51%);

  --drh-a-floor: #151d42; --drh-a-floor2: #26305e; --drh-a-pool: #2b3d8f;
  --drh-a-metal: #6a78a8; --drh-a-metal2: #46538a; --drh-a-metal3: #8090c4;
  --drh-a-panel: #1b2556; --drh-a-panel2: #2a376e; --drh-a-glass: #1d2a66;
  --drh-a-line: #000000; --drh-a-paper: #1a2350; --drh-a-paper2: #243066;

  --drh-gutter-pat: radial-gradient(circle at 6px 6px, rgba(93, 128, 255, .2) 0 1.3px, transparent 1.8px) 0 0 / 14px 14px;
  --page-bg:
    radial-gradient(1300px 540px at 50% -200px, rgba(61, 102, 255, .22), transparent 70%) no-repeat,
    var(--drh-gutters),
    var(--drh-gutter-pat),
    var(--paper);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board. A board is a
   panel of the set: white with blue lamps by day, the control room's
   navy after dark; tiles climb through the colours of the balls. */
:root {
  --game-bg:        #e7ecf6;
  --game-surface:   #c9d3ea;
  --game-surface-2: #ffffff;
  --game-ink:       #0b1433;
  --game-muted:     #535e7d;
  --game-accent:    #1f45ff;
  --game-accent-ink:#ffffff;
  --game-good:      #0b7a52;
  --game-bad:       #d0103b;
  --game-tile-1:    #ffffff;
  --game-tile-2:    #ffe08a;
  --game-tile-3:    #ffc21f;
  --game-tile-4:    #ff7a1a;
  --game-tile-5:    #ff1f4b;
  --game-tile-6:    #8b3dff;
  --game-tile-7:    #1f45ff;
  --game-tile-8:    #0b1433;
  --game-radius:    10px;
  --game-font:      'Chivo Mono', ui-monospace, monospace;
  --game-font-css:  "/assets/themes/draw-hall/assets/fonts/fonts.css";
  --game-arena-screen: #e7ecf6;
  --game-arena-coins:  #1a3be0;
  --game-arena-win:    #0b7a52;
  --game-arena-danger: #d0103b;
  --game-pattern:   radial-gradient(circle at 5px 5px, rgba(31, 69, 255, .12) 0 1.1px, transparent 1.6px) 0 0 / 12px 12px;
}
html.dark {
  --game-bg:        #0d1430;
  --game-surface:   #070b1e;
  --game-surface-2: #1b2556;
  --game-ink:       #eef2ff;
  --game-muted:     #9aa6d2;
  --game-accent:    #3d66ff;
  --game-accent-ink:#ffffff;
  --game-good:      #2fd39a;
  --game-bad:       #ff7c98;
  --game-tile-1:    #1b2556;
  --game-tile-2:    #2a376e;
  --game-tile-3:    #c99200;
  --game-tile-4:    #ffc93a;
  --game-tile-5:    #ff2e5b;
  --game-tile-6:    #9a5cff;
  --game-tile-7:    #3d66ff;
  --game-tile-8:    #eef2ff;
  --game-arena-screen: #0d1430;
  --game-arena-coins:  #ffc93a;
  --game-arena-win:    #2fd39a;
  --game-arena-danger: #ff7c98;
  --game-pattern:   radial-gradient(circle at 5px 5px, rgba(93, 128, 255, .18) 0 1.1px, transparent 1.6px) 0 0 / 12px 12px;
}

/* The draw machine's balls (detail-draw-machine.js and every ball the
   theme draws), one colour per band of ten, in both modes */
:root {
  --drh-ball-1: #ffb800; --drh-ball-1-hi: #ffe58f;
  --drh-ball-2: #1f45ff; --drh-ball-2-hi: #8ea6ff;
  --drh-ball-3: #ff1f4b; --drh-ball-3-hi: #ff98ad;
  --drh-ball-4: #10a56f; --drh-ball-4-hi: #7fe3be;
  --drh-ball-5: #ff7a1a; --drh-ball-5-hi: #ffc08f;
  --drh-ball-6: #8b3dff; --drh-ball-6-hi: #c9a6ff;
}

/* Anybody covers Latin and Vietnamese only; other scripts get a heavy
   system face at normal width rather than a wide fallback */
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) {
  --font-display: system-ui, 'Segoe UI', 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ── Base ── */
html body {
  font-family: var(--font-ui);
  background: var(--page-bg);
  color: var(--ink);
}
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-stretch: 118%;
  letter-spacing: -.01em;
}
.display-italic { font-style: normal; }
/* Figures in tabular columns take the mono of the results board */
html .font-display.tabular-nums, html .font-display[class*="tabular"], html .tabular-nums { font-family: var(--font-num); font-stretch: normal; letter-spacing: -.02em; }
::selection { background: #ffd34d; color: #0b1433; }
html.dark ::selection { background: #3d66ff; color: #ffffff; }

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

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

/* The eyebrow: the red tab of a lower-third, then the words */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .8rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0; width: 26px; height: 10px;
  background: var(--drh-red);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  box-shadow: 0 0 10px rgba(255, 31, 75, .5);
}
[dir="rtl"] .section-eyebrow::before { clip-path: polygon(0 0, 100% 0, 100% 100%, 5px 100%); }

/* View all: a console key; its arrow slides on hover or focus */
.btn-view-all {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .85rem;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  background: var(--paper-2);
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 2px 0 var(--rule);
  transition: transform .15s ease, box-shadow .15s ease, gap .3s ease, border-color .2s ease;
}
.btn-view-all:hover, .btn-view-all:focus-visible { gap: .8rem; outline: none; border-color: var(--drh-blue); box-shadow: 0 2px 0 var(--drh-blue), 0 0 0 3px var(--drh-blue-soft); }
.btn-view-all:active { transform: translateY(2px); box-shadow: 0 0 0 var(--rule); }
[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(--drh-gloss); }

.ed-folio { font-family: var(--font-num); font-weight: 600; color: var(--ink-soft); }

[dir="rtl"] .drh-flip-rtl { transform: scaleX(-1); }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 1.5px solid var(--rule);
  border-radius: 10px;
}
#desktopHeader .hdr-search:focus-within { border-color: var(--drh-blue); box-shadow: 0 0 0 4px var(--drh-blue-soft); }
.ed-search { background: transparent; border: none; }

/* The top strip: the control room's navy, like a broadcast ticker bar */
.hdr-strip, .hdr-strip .ed-status { color: #dfe6ff; }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffffff; }
html.dark .hdr-strip, html.dark .hdr-strip .ed-status { color: var(--ink-2); }
html.dark .hdr-strip a:hover, html.dark .hdr-strip button:hover { color: #ffffff; }

/* An LED strip under the main header bar */
.drh-led-line { height: 4px; background: var(--drh-strip), var(--paper-3); box-shadow: 0 1px 0 var(--rule); }
html.dark .drh-led-line { box-shadow: var(--drh-strip-glow); }

.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; padding-right: 1.25rem; border-right: 1px solid var(--rule);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
[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.35rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.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(--drh-blue); color: #fff; box-shadow: inset 0 -3px 0 var(--drh-blue-deep); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--drh-blue); outline-offset: 2px; }

/* ── Links and buttons ──
   Primary: a lit console key in electric blue, sinking a step when
   pressed. Secondary: an unlit key, white with a navy rim. */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: 14px; color: var(--ink);
  background: linear-gradient(var(--drh-red), var(--drh-red)) left 100% / 26px 3px no-repeat;
  padding-bottom: 3px;
  transition: gap .25s ease, background-size .3s ease;
}
.ed-link-arrow:hover, .ed-link-arrow:focus-visible { gap: 0.7rem; background-size: 100% 3px; }
[dir="rtl"] .ed-link-arrow { background-position: right 100%; }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .78rem 1.45rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: .015em;
  text-decoration: none;
  color: var(--btn-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%), var(--btn-bg);
  border: 0;
  border-radius: 10px;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);
  transition: background-color .2s ease, box-shadow .15s ease, transform .12s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background-color: var(--btn-bg-hover); color: var(--btn-ink); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px);
}
html .ed-btn-primary:active, html .ed-plan-cta:active, html .drawer-login:active { transform: translateY(3px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25), 0 0 0 var(--btn-side); }
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 { background: #ff1f4b; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #a80c2e, 0 0 22px -4px rgba(255, 31, 75, .7); }
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 3px solid var(--drh-red); outline-offset: 3px; }

.ed-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .74rem 1.35rem;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: .015em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 3px 0 var(--ink);
  transition: box-shadow .15s ease, transform .12s ease, color .2s ease, border-color .2s ease;
}
.ed-btn-secondary:hover { transform: translateY(-1px); color: var(--drh-blue-ink); border-color: var(--drh-blue); box-shadow: 0 3px 0 var(--drh-blue); }
.ed-btn-secondary:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
html.dark .ed-btn-secondary { background: rgba(13, 20, 48, .7); color: var(--ink); border-color: rgba(200, 212, 255, .55); box-shadow: 0 3px 0 rgba(200, 212, 255, .35); }
html.dark .ed-btn-secondary:hover { color: #fff; border-color: var(--drh-blue); box-shadow: 0 3px 0 var(--drh-blue), 0 0 22px -6px rgba(61, 102, 255, .8); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }
@media (prefers-reduced-motion: reduce) {
  html .ed-btn-primary, html .ed-btn-secondary, html .ed-plan-cta, .btn-view-all { transition: none; }
  html .ed-btn-primary:hover, html .ed-btn-secondary:hover { transform: none; }
}

/* ── Cards: a panel of the set with an LED strip along its foot; the
   strip lights and the panel rises on hover or focus ── */
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 .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease, border-color .3s ease;
}
html .shop-card::after, html .ed-plan::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px;
  background: var(--drh-strip); opacity: .35; pointer-events: none;
  transition: opacity .3s ease, box-shadow .3s ease;
}
html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(31, 69, 255, .35); }
html .shop-card:hover::after, html .shop-card:focus-within::after, html .ed-plan:hover::after { opacity: 1; box-shadow: var(--drh-strip-glow); }
html .ed-plan-featured {
  background: var(--night) !important;
  color: var(--on-night);
  border-color: transparent;
}
html .ed-plan-featured::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--drh-led); opacity: .5; pointer-events: none; }
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(238, 242, 255, .16); }
@media (prefers-reduced-motion: reduce) { html .ed-plan:hover, html .shop-card:hover, html .shop-card:focus-within { transform: none; } }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink-soft); }
.ed-topnav-link { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffffff; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.2rem 1.5rem .5rem;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.drawer-section-label::before { content: ''; flex-shrink: 0; width: 16px; height: 8px; background: var(--drh-red); clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
html body #sideMenu .drawer-section-label { color: var(--ink-soft) !important; }
/* Count badges on drawer rows: an ON AIR red tally */
html body #sideMenu span.rounded-full.text-white[style*="--theme-600"] { background: var(--drh-red) !important; color: #fff !important; }
.drawer-nav-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .75rem 1.5rem;
  font-size: 15.5px; font-weight: 600; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); box-shadow: inset 3px 0 0 var(--drh-blue); }
[dir="rtl"] .drawer-nav-row:hover { box-shadow: inset -3px 0 0 var(--drh-blue); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  border: 1.5px solid var(--rule); border-radius: 10px;
  font-weight: 700; color: var(--red);
}
.drawer-logout:hover { background: var(--red-soft); }

.mobile-glass-header {
  background: rgba(243, 245, 250, 0.95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 rgba(31, 69, 255, .25);
}
html.dark .mobile-glass-header { background: rgba(6, 10, 28, 0.95); }

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

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

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}
.ed-dropdown::before { content: ''; display: block; height: 3px; margin: -1px 12px 0; border-radius: 0 0 3px 3px; background: var(--drh-blue); }
.ed-dropdown-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.25rem;
  font-size: 14.5px; color: var(--ink-2);
  transition: background-color .2s ease, color .2s ease;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  padding: .7rem 1.25rem .35rem;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft);
}
.ed-mobile-link.active { color: var(--nav-accent); }

/* ── Dark/light toggle: the results board ──
   The screen becomes the split-flap board: its flaps drop shut cell by
   cell in reading order until the board is whole, the mode flips behind
   it, and the flaps fall on over to show the new mode. The cells are
   placed by draw-hall.js; their colours are fixed, so nothing changes at
   the flip. */
.px-fx--drh-board { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--drh-board .drh-fx-cell {
  position: absolute; display: block;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 22%),
    linear-gradient(180deg, #1e2a5c 0 calc(50% - 1px), #050817 calc(50% - 1px) calc(50% + 1px), #172152 calc(50% + 1px));
  box-shadow: inset 0 0 0 1px rgba(5, 8, 23, .85), inset 0 1px 0 1px rgba(120, 146, 255, .12);
  transform-origin: 50% 0;
  transform: perspective(700px) rotateX(-90deg);
  backface-visibility: hidden;
  will-change: transform;
}
/* A drawn ball showing on a few of the cells */
.px-fx--drh-board .drh-fx-cell--ball {
  background:
    radial-gradient(circle at 44% 40%, rgba(255, 255, 255, .55) 0 7%, transparent 18%),
    radial-gradient(circle closest-side, var(--b) 0 52%, rgba(0, 0, 0, .35) 56%, transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 22%),
    linear-gradient(180deg, #1e2a5c 0 calc(50% - 1px), #050817 calc(50% - 1px) calc(50% + 1px), #172152 calc(50% + 1px));
}
/* The shade on a flap as it swings, lifting as it comes face on */
.px-fx--drh-board .drh-fx-cell::after {
  content: ''; position: absolute; inset: 0; background: #02040d; opacity: 0;
}
.px-fx--drh-board.is-shut .drh-fx-cell { animation: drh-fx-shut 280ms cubic-bezier(.4, 0, .6, 1.2) var(--d, 0ms) both; }
.px-fx--drh-board.is-shut .drh-fx-cell::after { animation: drh-fx-shade-in 280ms ease-in var(--d, 0ms) both; }
.px-fx--drh-board.is-open .drh-fx-cell { transform: none; transform-origin: 50% 100%; animation: drh-fx-fall 280ms cubic-bezier(.35, 0, .75, .6) var(--d, 0ms) both; }
.px-fx--drh-board.is-open .drh-fx-cell::after { animation: drh-fx-shade-out 280ms ease-in var(--d, 0ms) both; }
@keyframes drh-fx-shut { 0% { transform: perspective(700px) rotateX(-90deg); } 100% { transform: perspective(700px) rotateX(0); } }
@keyframes drh-fx-fall { 0% { transform: perspective(700px) rotateX(0); } 100% { transform: perspective(700px) rotateX(90deg); } }
@keyframes drh-fx-shade-in { 0% { opacity: .7; } 100% { opacity: 0; } }
@keyframes drh-fx-shade-out { 0% { opacity: 0; } 100% { opacity: .8; } }

/* ── Footer: the end of the broadcast. A band of the backdrop's LED
   panels, the results rack in front of it with the night's balls at
   rest, and the credits under it on the studio floor; white floor by
   day, the dark hall after dark ── */
.drh-footer {
  background:
    var(--drh-gloss),
    linear-gradient(180deg, #ffffff, #eef2fa) !important;
  color: var(--ink-2);
}
html.dark .drh-footer {
  background:
    radial-gradient(900px 260px at 50% 0%, rgba(61, 102, 255, .16), transparent 70%),
    #04071a !important;
}
.drh-footer-top { position: relative; height: 112px; overflow: hidden; background: var(--drh-wall); }
.drh-footer-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: var(--drh-floor); box-shadow: 0 -1px 0 rgba(255, 255, 255, .6); }
.drh-footer-rack {
  position: absolute; z-index: 1; bottom: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #0b1433;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .08), 0 3px 0 #040818, 0 12px 20px -10px rgba(0, 0, 0, .6);
}
.drh-footer-rack .drh-ball { --s: 34px; }
.drh-footer-onair { position: absolute; z-index: 1; top: 16px; inset-inline-end: 6%; }
.drh-footer-clock { position: absolute; z-index: 1; top: 14px; inset-inline-start: 6%; }
@media (max-width: 639px) {
  .drh-footer-top { height: 96px; }
  .drh-footer-rack { gap: 5px; padding: 6px 10px; }
  .drh-footer-rack .drh-ball { --s: 26px; }
  .drh-footer-clock { display: none; }
  .drh-footer-onair { top: 10px; }
}
.drh-footer a:hover { color: var(--theme-600); }
html .drh-footer .ed-footer-heading {
  font-family: var(--font-display); font-weight: 800; font-stretch: 118%; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
html.dark #desktopFooter li { color: var(--ink-2) !important; }
/* header.css greys every footer h4 after dark with an ID rule */
html.dark #desktopFooter .ed-footer-heading { color: var(--ink) !important; }
html .drh-footer .ed-footer-link { color: var(--ink-2); background: linear-gradient(var(--drh-blue), var(--drh-blue)) left 100% / 0 2px no-repeat; transition: background-size .3s ease, color .2s ease; }
html .drh-footer .ed-footer-link:hover, html .drh-footer .ed-footer-link:focus-visible { background-size: 100% 2px; color: var(--ink); }
[dir="rtl"] .drh-footer .ed-footer-link { background-position: right 100%; }

/* The floating nav: a vision mixer's row of keys, the live one lit */
html .ed-floating-nav {
  position: relative;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 3px 0 rgba(11, 20, 51, .12), var(--shadow-md);
}
html.dark .ed-floating-nav { background: rgba(13, 20, 48, .96); box-shadow: 0 3px 0 #03050f, 0 0 0 1px rgba(61, 102, 255, .25), 0 20px 40px -20px rgba(0, 0, 0, .9); }
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .95rem; font-weight: 600; color: var(--ink-2); border-radius: 9px; }
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(--drh-blue); color: #fff !important; box-shadow: inset 0 -3px 0 var(--drh-blue-deep), 0 0 16px -4px rgba(31, 69, 255, .7); }
html body .ed-floating-nav a.ed-floating-link.active > span { color: #fff !important; }

/* The newsletter: a lower-third across the studio's backdrop */
html body .drh-footer .ed-newsletter {
  position: relative; overflow: hidden;
  background: var(--drh-wall) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 20px 40px -22px rgba(16, 34, 140, .7) !important;
}
html.dark body .drh-footer .ed-newsletter { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 50px -10px rgba(61, 102, 255, .55) !important; }
html body .drh-footer .ed-newsletter::before { display: block !important; content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: 8px; background: var(--drh-red); box-shadow: 0 0 18px rgba(255, 31, 75, .8); opacity: 1; border-radius: 0; }
html body .drh-footer .ed-newsletter::after { display: none !important; }
html body .drh-footer .ed-newsletter, html body .drh-footer .ed-newsletter * { --ink: #ffffff; --ink-2: #e6ecff; --ink-soft: #d6defc; }
html body .drh-footer .ed-newsletter h4, html.dark body .drh-footer .ed-newsletter h4 { color: #ffffff !important; font-family: var(--font-display); font-weight: 800; font-stretch: 118%; }
html body .drh-footer .ed-newsletter p:not(#newsletter-msg), html.dark body .drh-footer .ed-newsletter p:not(#newsletter-msg) { color: #e6ecff !important; opacity: 1; }
html body .drh-footer .ed-newsletter-input, html.dark body .drh-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #0b1433 !important; border: 1.5px solid rgba(255, 255, 255, .6) !important; border-radius: 10px; }
html body .drh-footer .ed-newsletter-input::placeholder { color: #535e7d; }
html body .drh-footer .ed-newsletter-input:focus { border-color: #ffc21f !important; box-shadow: 0 0 0 4px rgba(255, 194, 31, .35); }
html body .drh-footer .ed-newsletter-btn { background: #ff1f4b; color: #fff; border: 0; border-radius: 10px; font-family: var(--font-ui); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #a80c2e; transition: transform .12s ease, box-shadow .12s ease; }
html body .drh-footer .ed-newsletter-btn:hover { background: #ff3a60; }
html body .drh-footer .ed-newsletter-btn:active { transform: translateY(3px); box-shadow: 0 0 0 #a80c2e; }
html body .drh-footer .ed-newsletter-age, html body .drh-footer .ed-newsletter label { color: #e6ecff !important; }

/* Logo card: the light-mode logo on a white caption card wherever it
   sits on a dark wall */
.drh-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.4rem;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: inset 0 -3px 0 #1f45ff, 0 14px 28px -14px rgba(0, 0, 0, .7);
}

/* 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; }

/* ── 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 dark hall instead. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(6, 10, 28, 0.95) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: #04071a !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(13, 20, 48, 0.97) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: var(--drh-blue) !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, #172150, #060a1c, #0d1430, #03050f) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* header.css fills every dark-mode field with #0d1117; here fields are
   the control room's deep navy. 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: #070b1e !important;
  border-color: rgba(150, 172, 255, .24) !important;
  color: #eef2ff !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: #03050f;
  --paper: #eef2ff;
  border-color: rgba(150, 172, 255, .18);
}

html header.safe-top-header[style] { background: rgba(243, 245, 250, .96) !important; }
html.dark header.safe-top-header[style] { background: rgba(6, 10, 28, .96) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(6, 10, 28, .96); }

/* ── Login / register / forgot-password brand panel: the backdrop wall
   with a camera trained on the stage; electric blue by day, glowing out
   of the dark hall at night ── */
:root {
  --brand-gradient: linear-gradient(170deg, #2b52ff, #1232d0);
  --brand-glow-1: rgba(255, 255, 255, 0.18);
  --brand-glow-2: rgba(255, 31, 75, 0.2);
}
html.dark {
  --brand-gradient: linear-gradient(170deg, #1636d6, #0a1a80);
  --brand-glow-1: rgba(120, 150, 255, 0.2);
  --brand-glow-2: rgba(255, 46, 91, 0.2);
}
html body .brand-panel {
  position: relative;
  background: var(--drh-wall) !important;
  color: #ffffff;
}
html.dark body .brand-panel {
  background:
    radial-gradient(120% 70% at 50% 110%, rgba(3, 5, 15, .85), transparent 60%),
    var(--drh-wall) !important;
}
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the studio camera on the floor. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: auto !important; bottom: 18px !important; right: 6% !important; left: auto !important;
  width: 176px !important; height: 132px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--art-camera) center bottom / contain no-repeat !important;
  box-shadow: none !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 6% !important; transform: scaleX(-1) !important; }
/* login.css's other glow becomes the stage floor along the foot */
html .brand-panel::before {
  top: auto !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 40px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--drh-floor) !important;
  box-shadow: 0 -2px 0 rgba(255, 255, 255, .5), 0 -10px 24px rgba(255, 255, 255, .25) !important;
}
html.dark .brand-panel::before { box-shadow: 0 -2px 0 rgba(61, 102, 255, .7), 0 -10px 24px rgba(61, 102, 255, .3) !important; }
html body .brand-panel .text-purple-200,
html body .brand-panel [class*="text-purple-200"],
html body .brand-panel .text-white\/80, html body .brand-panel .text-white\/70 { color: rgba(255, 255, 255, .86) !important; }
html body .brand-panel .text-white, html body .brand-panel h1, html body .brand-panel h2 { color: #ffffff !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 800 !important; font-stretch: 118%; }

/* ── Wallet balance card: the player card. Electric blue with a red
   tally stripe, a chip, a fine lamp grid on its face and a ball printed
   in its corner; the balance in the results board's mono ── */
html body .wallet-hero {
  position: relative;
  background:
    var(--drh-led),
    radial-gradient(120% 120% at 0% 0%, #4a6dff, #1f45ff 45%, #1131c4);
  border: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 24px 40px -22px rgba(16, 34, 160, .8);
  color: #ffffff;
  overflow: hidden;
  margin-bottom: 8px;
}
/* The red tally stripe and the chip */
html body .wallet-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 6px; margin: 0;
  border: 0; border-radius: 0; transform: none; opacity: 1;
  background: #ff1f4b; box-shadow: 0 0 18px rgba(255, 31, 75, .8);
  pointer-events: none;
}
/* The ball printed in the corner */
html body .wallet-hero::after {
  content: ''; position: absolute; inset-inline-end: 26px; top: 26px; left: auto; bottom: auto; width: 74px; height: 74px; margin: 0;
  border-radius: 50%; transform: none; opacity: 1; filter: none;
  background: radial-gradient(circle, #fff 0 52%, transparent 53%), radial-gradient(circle at 35% 30%, #ffe58f, #ffb800 62%, #d99a00);
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .5), 0 0 0 4px rgba(255, 255, 255, .18);
  pointer-events: none;
}
@media (max-width: 639px) {
  html body .wallet-hero::after { width: 44px; height: 44px; top: 26px; inset-inline-end: 16px; }
}
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-hero .wallet-ref { margin-inline-end: 100px; color: rgba(255, 255, 255, .78) !important; letter-spacing: .16em; font-size: .66rem; font-weight: 700; }
@media (max-width: 639px) { html body .wallet-hero .wallet-ref { margin-inline-end: 52px; } }
html body .wallet-hero span[style*="color:rgba(255,255,255"] { color: rgba(255, 255, 255, .86) !important; }
html body .wallet-hero [style*="color:#fff"], html body .wallet-hero [style*="color: #fff"], html body .wallet-hero .text-white { color: #ffffff !important; }
html body .wallet-hero .h-px { background: rgba(255, 255, 255, .28) !important; }
html body .wallet-balance-num {
  font-family: var(--font-num); font-variation-settings: normal; font-weight: 700; letter-spacing: -.03em;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 0 22px rgba(255, 255, 255, .35);
}
html body .wallet-hero-btn-primary { background: #ffffff; color: #0b1433; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 10px; box-shadow: 0 3px 0 #0b1a8a; transition: transform .12s ease, box-shadow .12s ease; }
html body .wallet-hero-btn-primary:hover { background: #f1f4ff; color: #0b1433; }
html body .wallet-hero-btn-primary:active { transform: translateY(3px); box-shadow: 0 0 0 #0b1a8a; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #ffffff; background: rgba(4, 12, 60, .25); border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 10px; }
html body .wallet-hero-btn-secondary:hover { background: rgba(4, 12, 60, .38); }
/* After dark the card glows out of the hall */
html.dark body .wallet-hero {
  background:
    var(--drh-led),
    radial-gradient(120% 120% at 0% 0%, #3d66ff, #1636d6 45%, #0a1a80);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 60px -14px rgba(61, 102, 255, .75);
}

/* ── Box card (styled by assets/css/pages/home.css) ── */
html .ed-card-mystery {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
html .ed-card-mystery::before {
  top: auto; left: 14px; right: 14px; bottom: 0; width: auto; height: 3px; border-radius: 3px;
  background: var(--drh-strip); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: a lit panel on the set ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--drh-red) 0 64px, var(--drh-blue) 64px);
}
html body .pd-buybox .font-display.text-4xl { color: var(--ink); overflow-wrap: normal; font-family: var(--font-num); font-stretch: normal; letter-spacing: -.03em; }
.pd-title { font-weight: 800 !important; }

/* The box page's own spin 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 set's blue. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-600); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-700); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600, html .text-blue-600, html .text-blue-500 { color: var(--drh-blue-ink); }
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: 10px; box-shadow: 0 3px 0 var(--btn-side);
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100, html .bg-blue-50 { background-color: var(--drh-blue-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50, html.dark .bg-blue-50 { background-color: var(--drh-blue-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200, html .border-blue-200 { border-color: rgba(31, 69, 255, .28); }
html.dark .border-violet-200 { border-color: rgba(93, 128, 255, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(31, 69, 255, .3); }
html .focus\:border-purple-400:focus { border-color: var(--drh-blue); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the theme's console keys. */
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(255, 255, 255, .3); border-top-color: var(--btn-ink); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), box-shadow .3s ease; }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }

/* ── Cart and checkout: the order total on a lit panel ──
   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: 14px !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: 16px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}
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: 4px;
  background: linear-gradient(90deg, var(--drh-red) 0 64px, var(--drh-blue) 64px);
}
[dir="rtl"] .rounded-2xl:has(> div > div > #summary-total)::before,
[dir="rtl"] section.rounded-2xl:has([x-text="totalDisplay()"])::before { background: linear-gradient(270deg, var(--drh-red) 0 64px, var(--drh-blue) 64px); }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.7rem);
  letter-spacing: -.03em;
  color: var(--ink);
  overflow-wrap: normal;
  font-variant-numeric: lining-nums tabular-nums;
}

/* 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: .12em; }
/* 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; }
}

/* The hero's scene is drawn by components/home/hero.css, which arrives
   after this sheet; until it does, the bare SVGs would paint at their
   natural size, so the scene waits out of sight. */
.drh-hero__scene { visibility: hidden; max-height: 0; overflow: hidden; }

/* ── The set's small pieces ── */
/* The five colours banners and categories are mapped to (drh_tone_for()) */
:root { --drh-t1: #1f45ff; --drh-t2: #ff1f4b; --drh-t3: #ffb800; --drh-t4: #10a56f; --drh-t5: #8b3dff; }
html.dark { --drh-t1: #3d66ff; --drh-t2: #ff2e5b; --drh-t3: #ffc93a; --drh-t4: #2fd39a; --drh-t5: #9a5cff; }
.drh-strip-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; flex-shrink: 0; }

/* The ON AIR lamp: a red lightbox in a navy housing, lit when the show
   is live (.is-off when it is not) */
.drh-onair {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .32rem .7rem .3rem;
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800;
  font-size: 11px; line-height: 1.1; letter-spacing: .14em; text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0) 50%), #ff1f4b;
  border-radius: 6px;
  box-shadow: 0 0 0 2px #0b1433, 0 0 0 3px rgba(255, 255, 255, .15), 0 0 18px rgba(255, 31, 75, .65);
  white-space: nowrap;
}
.drh-onair::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; flex-shrink: 0; }
.drh-onair.is-off { color: rgba(255, 255, 255, .6); background: #4a2030; box-shadow: 0 0 0 2px #0b1433; }
.drh-onair.is-off::before { background: rgba(255, 255, 255, .35); box-shadow: none; }
html:is(:lang(ar), :lang(ur), :lang(bn), :lang(zh), :lang(ru), :lang(el)) .drh-onair { letter-spacing: .02em; font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .drh-onair:not(.is-off) { animation: drh-onair 2.6s ease-in-out infinite; }
  .drh-onair.is-switching { animation: drh-onair-on .7s steps(1, end); }
}
@keyframes drh-onair { 50% { box-shadow: 0 0 0 2px #0b1433, 0 0 0 3px rgba(255, 255, 255, .15), 0 0 28px rgba(255, 31, 75, .9); } }
@keyframes drh-onair-on { 0% { filter: brightness(.4); } 20% { filter: brightness(1.3); } 30% { filter: brightness(.5); } 45%, 100% { filter: none; } }

/* "Live": a red tally light */
.drh-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff1f4b; box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 0 8px rgba(255, 31, 75, .9); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .drh-live { animation: drh-tally 1.4s ease-in-out infinite; }
}
@keyframes drh-tally { 50% { opacity: .45; } }

/* A ball drawn in CSS: --s its size, --b its band (1..6), its number in a
   <span> on the white disc */
.drh-ball {
  --s: 40px; --b: 1;
  position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--hi), var(--c) 62%);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .18), 0 4px 10px -4px rgba(0, 0, 0, .5);
  --c: var(--drh-ball-1); --hi: var(--drh-ball-1-hi);
}
.drh-ball[data-b="2"] { --c: var(--drh-ball-2); --hi: var(--drh-ball-2-hi); }
.drh-ball[data-b="3"] { --c: var(--drh-ball-3); --hi: var(--drh-ball-3-hi); }
.drh-ball[data-b="4"] { --c: var(--drh-ball-4); --hi: var(--drh-ball-4-hi); }
.drh-ball[data-b="5"] { --c: var(--drh-ball-5); --hi: var(--drh-ball-5-hi); }
.drh-ball[data-b="6"] { --c: var(--drh-ball-6); --hi: var(--drh-ball-6-hi); }
.drh-ball > span {
  display: grid; place-items: center;
  width: 58%; height: 58%; border-radius: 50%;
  background: #fff;
  font: 700 calc(var(--s) * .3)/1 var(--font-num); letter-spacing: -.04em; color: #0b1433;
}
.drh-ball > span > svg { width: 62%; height: 62%; fill: var(--c); }
.drh-ball::after { content: ''; position: absolute; left: 18%; top: 12%; width: 28%; height: 16%; border-radius: 50%; background: rgba(255, 255, 255, .6); transform: rotate(-30deg); }

/* A lower-third: a red tab and a white bar, slanted at the end */
.drh-l3 { display: inline-flex; align-items: stretch; max-width: 100%; filter: drop-shadow(0 8px 14px rgba(11, 20, 51, .18)); }
.drh-l3__tab {
  display: inline-flex; align-items: center; padding: .3rem .75rem .3rem .6rem;
  font: 800 11px/1.2 var(--font-display); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: #ff1f4b;
  flex-shrink: 0; white-space: nowrap;
}
.drh-l3__bar {
  display: inline-flex; align-items: center; padding: .3rem 1.4rem .3rem .75rem; min-width: 0;
  font: 700 12px/1.25 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #0b1433;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
[dir="rtl"] .drh-l3__bar { padding: .3rem .75rem .3rem 1.4rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%); }
html.dark .drh-l3__bar { background: #eef2ff; }

.drh-balance, .drh-icon-btn { border: 1.5px solid var(--rule); color: var(--ink); background: var(--paper-2); transition: border-color .2s ease, transform .12s ease, box-shadow .12s ease; box-shadow: 0 2px 0 var(--rule); }
.drh-balance:hover, .drh-icon-btn:hover { border-color: var(--drh-blue); }
.drh-balance:active, .drh-icon-btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--rule); }
.drh-balance [data-raw] { font-family: var(--font-num); font-weight: 600; letter-spacing: -.03em; }
/* A panel of the set for dialogs and sheets: white, a blue strip along
   the top with the red tab at its start */
.drh-sheet {
  position: relative; overflow: hidden;
  background: var(--drh-gloss), var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: 0 24px 50px -24px rgba(16, 34, 110, .5);
}
.drh-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--drh-red) 0 56px, var(--drh-blue) 56px); }
[dir="rtl"] .drh-sheet::before { background: linear-gradient(270deg, var(--drh-red) 0 56px, var(--drh-blue) 56px); }
html.dark .drh-sheet { box-shadow: 0 0 0 1px rgba(61, 102, 255, .18), 0 24px 50px -20px rgba(0, 0, 0, .9); }
html body [style*="background:#16a34a"] { background: var(--drh-green) !important; }
/* The floating nav pill is printed inside the footer; it floats over the
   page and keeps the page's own colours. */
html body .drh-footer .ed-floating-nav { --ink: #0b1433; --ink-2: #26304f; --paper-3: #e7ecf6; }
html.dark body .drh-footer .ed-floating-nav { --ink: #eef2ff; --ink-2: #cbd3f3; --paper-3: #172150; }
/* The phone menu button: a white console key */
html body .menu-btn, html.dark body .menu-btn { background: var(--paper-2) !important; border: 1.5px solid var(--rule) !important; box-shadow: 0 2px 0 var(--rule); }
html body .menu-btn:hover, html.dark body .menu-btn:hover { background: var(--paper-3) !important; transform: none; }
html body .menu-btn:active { transform: translateY(2px); box-shadow: none; }

/* ── Micro-interactions shared by the whole set ──
   A badge lights up like a tally when it appears (.drh-light-in); a
   featured countdown's figures flip like a split-flap cell as they roll
   over (.drh-tick, gated in draw-hall.js; never on cards), and in
   its last ten seconds the clock goes red (.drh-final, draw-hall.js);
   a ball drops into whatever bids, buys or adds to the cart (.drh-drop). */
@media (prefers-reduced-motion: no-preference) {
  .drh-light-in { animation: drh-light-in .6s steps(1, end) both; }
  .drh-tick { animation: drh-tick .32s cubic-bezier(.3, .7, .4, 1); transform-origin: 50% 50%; }
}
@keyframes drh-light-in { 0% { opacity: .25; } 20% { opacity: 1; } 35% { opacity: .4; } 50%, 100% { opacity: 1; } }
@keyframes drh-tick { 0% { transform: perspective(200px) rotateX(-40deg); } 100% { transform: none; } }
.drh-final { color: #ff1f4b !important; text-shadow: 0 0 12px rgba(255, 31, 75, .55); }
.drh-drop {
  position: fixed; z-index: 2147482000; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 50%, transparent 52%), radial-gradient(circle at 35% 30%, #ff98ad, #ff1f4b 62%, #c40f36);
  box-shadow: 0 0 14px rgba(255, 31, 75, .7);
  animation: drh-drop .8s cubic-bezier(.5, 0, .75, 0) forwards;
}
@keyframes drh-drop {
  0% { transform: translateY(-80px) scale(.6); opacity: 0; }
  12% { opacity: 1; }
  62% { transform: translateY(0) scale(1); opacity: 1; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  78% { transform: translateY(-14px) scale(1); }
  92% { transform: translateY(0) scale(1.08, .9); opacity: 1; }
  100% { transform: translateY(0) scale(.4); opacity: 0; }
}
.drh-slot-flash { box-shadow: 0 0 0 3px rgba(255, 31, 75, .45), var(--btn-shadow) !important; }

/* ── Walls: the backdrop's lamp grid beside the words ──
   A wall that carries words draws its lamp grid on a layer of its own,
   masked away from the copy: down both sides of a centred copy, on the
   far side of a copy that sits to one side, nowhere at phone width. */
:root {
  --drh-wall-pat: radial-gradient(circle at 5px 5px, rgba(31, 69, 255, .2) 0 1.4px, transparent 2px) 0 0 / 12px 12px;
  --drh-mask-c: linear-gradient(90deg, #000 0, #000 7%, transparent 19%, transparent 81%, #000 93%, #000 100%);
  --drh-mask-s: linear-gradient(90deg, transparent 0, transparent 52%, #000 64%, #000 100%);
}
html.dark { --drh-wall-pat: radial-gradient(circle at 5px 5px, rgba(93, 128, 255, .3) 0 1.4px, transparent 2px) 0 0 / 12px 12px; }
[dir="rtl"] { --drh-mask-s: linear-gradient(270deg, transparent 0, transparent 52%, #000 64%, #000 100%); }
@media (max-width: 1023px) {
  :root, [dir="rtl"] { --drh-mask-c: linear-gradient(transparent, transparent); --drh-mask-s: linear-gradient(transparent, transparent); }
}
.drh-wn, html body .drh-lamplit, html body .drh-err, body.drh-404, .drh-draw, html body .brand-panel, .ga-marquee { isolation: isolate; }
.drh-wn::before, html body .drh-lamplit::before, html body .drh-err::before, body.drh-404::before, .drh-draw::before, .ga-marquee::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--drh-wall-pat);
  -webkit-mask: var(--drh-mask-c); mask: var(--drh-mask-c);
}
.ga-marquee::after { -webkit-mask: var(--drh-mask-s); mask: var(--drh-mask-s); display: block; }
body.drh-404::before { position: fixed; }
.drh-lamps { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--drh-wall-pat); -webkit-mask: var(--drh-mask-c); mask: var(--drh-mask-c); }

/* Phones: headings break only between words, never mid-word. */
@media (max-width: 639px) {
  html body .reveal.flex-row:has(> .btn-view-all) h2.text-fit { font-size: clamp(1.4rem, 7vw, 1.8rem); }
  html body :is(h1, h2, h3):is(.text-fit, .truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
}

/* Phones: a ticket's two dates stack rather than run into each other; the
   bids page's four tiles go two by two (a long German label was cut
   off); a lot page's browse link drops under its heading (its German
   label pushed the page wider). */
@media (max-width: 639px) {
  html body .grid.grid-cols-2.rtl-text-right:has(> div > .whitespace-nowrap) { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  html body .grid.grid-cols-4:has(> div > p.text-3xl.font-extrabold) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}
.drh-footer-clock { width: 92px; }
.drh-footer-clock svg { display: block; width: 100%; height: auto; }

/* The drum's materials, wherever drh_drum_svg() draws it */
.drh-drum__leg { stroke: #5b6890; }
.drh-drum__base, .drh-drum__outlet, .drh-drum__hub { fill: #3b4672; }
.drh-drum__rim { stroke: #8e9bbd; }
.drh-drum__hoop, .drh-drum__ring { stroke: rgba(91, 104, 144, .85); }
html.dark .drh-drum__rim { stroke: #93abff; }
html.dark .drh-drum__hoop, html.dark .drh-drum__ring { stroke: rgba(147, 171, 255, .8); }
html.dark .drh-drum { filter: drop-shadow(0 0 26px rgba(61, 102, 255, .55)); }
.drh-drum__hoop { transform-box: fill-box; transform-origin: center; }
.drh-drum__hoop--a { transform: scaleX(.34); }
.drh-drum__hoop--b { transform: scaleX(-.86); }
.drh-drum__balls { transform-box: view-box; transform-origin: 120px 118px; }
/* The chute: a clear tube from the outlet down to the rack */
.drh-drum__chute { fill: rgba(205, 216, 255, .5); stroke: rgba(91, 104, 144, .7); stroke-width: 2; }
html.dark .drh-drum__chute { fill: rgba(61, 102, 255, .25); stroke: rgba(147, 171, 255, .7); }
@media (prefers-reduced-motion: no-preference) {
  .drh-drum__b { animation: drh-bob 1.1s ease-in-out 4 alternate both; animation-delay: calc(var(--i) * -170ms); transform-box: fill-box; }
}
@keyframes drh-tumble { to { transform: rotate(360deg); } }
@keyframes drh-bob { from { translate: 0 -3px; } to { translate: 0 3px; } }
@keyframes drh-hoop { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }

/* The top edge of a caption card: the red tab, then the blue line */
:root { --drh-topline: linear-gradient(90deg, var(--drh-red) 0 56px, var(--drh-blue) 56px); }
[dir="rtl"] { --drh-topline: linear-gradient(270deg, var(--drh-red) 0 56px, var(--drh-blue) 56px); }

/* A product's white ground under a spot: thumbnails, the prize in a
   dialog, the icon of a notice */
:root {
  --drh-face: radial-gradient(80% 80% at 50% 20%, #ffffff, #e6ecfb);
  --drh-face-ring: inset 0 0 0 1px rgba(11, 20, 51, .1), inset 0 -3px 0 var(--drh-blue);
  /* A spot from the rig, for walls that want a pool of light */
  --drh-window: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  /* A meter: LED cells filling in electric blue */
  --drh-meter: repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, .2) 9px 11px), linear-gradient(90deg, var(--drh-blue), #6f8cff);
}
html.dark {
  --drh-face: radial-gradient(80% 80% at 50% 20%, #2b3d8f, #111a40);
  --drh-face-ring: inset 0 0 0 1px rgba(150, 172, 255, .2), inset 0 -3px 0 var(--drh-blue);
  --drh-window: radial-gradient(closest-side, rgba(93, 128, 255, .3), rgba(93, 128, 255, 0));
}
/* Phones: a long single word in a big section title ("funktioniert's")
   gets a size that fits the row instead of breaking */
@media (max-width: 639px) {
  html body h2.text-fit.text-4xl { font-size: clamp(1.35rem, 6.6vw, 2.25rem); }
}

/* Change language: on a wide screen the floating page nav sits at the foot of
   the window, so the list's sticky save bar stops above it rather than under it. */
@media (min-width: 1024px) {
  html body #langForm + .sticky.bottom-0 { bottom: 5.75rem; }
}

/* 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: #0b895b; --px-warn: #8a5c00; --px-crit: #e0103d; --px-info: #1f45ff; }
html.dark:root { --px-good: #31d39b; --px-warn: #fbbf23; --px-crit: #ff8fa7; --px-info: #99adff; }

/* Changing language, the scene (draw-hall.js): the drum tumbles with the old
   code on a ball, the winning ball comes to the mouth of the chute and the
   plaque turns to the new name; after the reload the ball runs down the
   chute into the tray. The drum is the same on both pages, so the reload
   never shows. */
.drh-lang-stage { background: color-mix(in srgb, var(--theme-900, #0d1f78) 60%, transparent); }
.drh-lang-set {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: min(560px, 100%); box-sizing: border-box; padding: 22px 20px 20px;
  color: var(--ink, #0b1433); background: var(--paper-2, #fff); border-radius: var(--radius, 14px);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .6); font-family: var(--font-ui, system-ui, sans-serif);
}
.drh-lang-rig { position: relative; width: 240px; height: 300px; flex: 0 0 auto; }
.drh-lang-globe {
  position: absolute; left: 35px; top: 0; width: 170px; height: 170px; z-index: 2; border-radius: 50%; overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--ink, #0b1433) 22%, transparent); box-sizing: border-box;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .12) 34%, color-mix(in srgb, var(--theme-500, #2a4fff) 10%, transparent) 70%);
  box-shadow: inset 0 -10px 24px rgba(var(--theme-500-rgb, 42, 79, 255), .18);
}
.drh-lang-tumble { position: absolute; inset: 0; }
.drh-lang-ball, .drh-lang-old {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 32%), var(--drh-ball, var(--drh-blue, #1f45ff));
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, .22);
}
.drh-lang-ball:nth-child(1) { left: 26px; top: 42px; }
.drh-lang-ball:nth-child(2) { left: 70px; top: 18px; --drh-ball: var(--drh-gold, #ffc21f); }
.drh-lang-ball:nth-child(3) { left: 118px; top: 96px; --drh-ball: var(--drh-green, #10a56f); }
.drh-lang-ball:nth-child(4) { left: 34px; top: 100px; --drh-ball: #f4f6fb; }
.drh-lang-ball:nth-child(5) { left: 78px; top: 122px; --drh-ball: var(--drh-red, #ff1f4b); }
.drh-lang-ball:nth-child(6) { left: 66px; top: 70px; --drh-ball: var(--drh-gold, #ffc21f); }
.drh-lang-old { left: 100px; top: 40px; width: 46px; height: 46px; display: grid; place-items: center; --drh-ball: var(--drh-blue, #1f45ff); }
.drh-lang-old b {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: #0b1433; font: 700 12px/1 var(--font-num, ui-monospace, monospace);
}
.drh-lang-chute {
  position: absolute; left: 40px; top: 118px; width: 48px; height: 150px; z-index: 1; box-sizing: border-box;
  border: 3px solid color-mix(in srgb, var(--ink, #0b1433) 22%, transparent); border-top: 0; border-radius: 0 0 24px 24px;
  background: color-mix(in srgb, var(--theme-500, #2a4fff) 8%, transparent);
}
.drh-lang-tray {
  position: absolute; left: 0; top: 230px; width: 240px; height: 68px; z-index: 1; box-sizing: border-box; border-radius: 34px;
  border: 3px solid color-mix(in srgb, var(--ink, #0b1433) 22%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-500, #2a4fff) 6%, transparent), color-mix(in srgb, var(--theme-500, #2a4fff) 16%, transparent));
}
.drh-lang-pick {
  position: absolute; left: 36px; top: 122px; z-index: 3; width: 56px; height: 56px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 30%), var(--drh-red, #ff1f4b);
  box-shadow: inset 0 -6px 9px rgba(0, 0, 0, .25), 0 6px 14px -6px rgba(0, 0, 0, .5);
}
.drh-lang-pick img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.drh-lang-pick b { padding: 1px 5px; border-radius: 8px; background: #fff; color: #0b1433; font: 700 12px/1.1 var(--font-num, ui-monospace, monospace); }
.drh-lang-plaque {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; max-width: 420px; box-sizing: border-box; padding: 12px 16px; overflow: hidden; border-radius: var(--radius-sm, 9px);
  background: var(--theme-600, #1f45ff); color: #fff; text-align: center;
}
.drh-lang-was, .drh-lang-name { grid-area: 1 / 2; font: 800 clamp(26px, 8vw, 40px)/1.1 var(--font-display, sans-serif); overflow-wrap: anywhere; }
.drh-lang-was { opacity: 0; transform: translateY(-70%); }
.drh-lang-spark { font-style: normal; color: var(--drh-gold, #ffc21f); font-size: 18px; }

/* Out: the set comes up, the drum spins down, the winning ball comes out
   to the chute and the plaque turns over to the new name. */
.px-lang-stage-out .drh-lang-set { animation: drh-lang-set-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .drh-lang-tumble { animation: drh-lang-tumble 1s cubic-bezier(.25, .6, .3, 1) .1s both; }
.px-lang-stage-out .drh-lang-pick { animation: drh-lang-pick .38s cubic-bezier(.4, 0, .6, 1) .66s both; }
.px-lang-stage-out .drh-lang-was { animation: drh-lang-was .28s ease-in .68s both; }
.px-lang-stage-out .drh-lang-name { animation: drh-lang-name .3s ease-out .76s both; }
/* In: it starts where out ended, runs down the chute and rolls into the tray. */
.px-lang-stage-in .drh-lang-pick { animation: drh-lang-roll .78s cubic-bezier(.45, 0, .4, 1) .05s both; }
.px-lang-stage-in .drh-lang-old { animation: drh-lang-dim .3s ease .2s both; }
.px-lang-stage-in .drh-lang-name { animation: drh-lang-win .4s ease-out .72s both; }
.px-lang-stage-in .drh-lang-set { animation: drh-lang-set-out .26s ease-in 1s both; }
@keyframes drh-lang-set-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes drh-lang-set-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes drh-lang-tumble { from { transform: rotate(-600deg); } }
@keyframes drh-lang-pick { from { transform: translate(56px, -65px) scale(.6); opacity: 0; } }
@keyframes drh-lang-was { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-70%); } }
@keyframes drh-lang-name { from { opacity: 0; transform: translateY(70%); } }
@keyframes drh-lang-roll {
  0%   { transform: none; }
  40%  { transform: translate(0, 114px); }
  52%  { transform: translate(0, 104px); }
  62%  { transform: translate(0, 114px); }
  100% { transform: translate(56px, 114px) rotate(360deg); }
}
@keyframes drh-lang-dim { to { opacity: .4; filter: grayscale(1); } }
@keyframes drh-lang-win { 50% { transform: scale(1.07); color: var(--drh-gold, #ffc21f); } }
@media (max-width: 460px) {
  .drh-lang-set { padding: 18px 14px 16px; }
  .drh-lang-spark { display: none; }
  .drh-lang-plaque { grid-template-columns: minmax(0, 1fr); padding: 10px 12px; }
  .drh-lang-was, .drh-lang-name { grid-area: 1 / 1; }
}

/* 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; }

/* Confirm windows at night: the shared hover brightens OK under its white
   text; it darkens a touch instead. */
html.dark body .px-confirm__btn--ok:not(.px-confirm__btn--destructive):hover { filter: brightness(.92); }

/* The voucher link in the top-up window at night: the accent a little
   lighter on the window's panel, so it reads at 4.5:1. */
html.dark body #addMoneyModal [data-px-call="giftCards.openVoucher"] { color: #6483ff !important; }

/* Withdraw window: Submit is painted in this theme's good green
   (--px-good); a shade deeper here by day, where white on it stood
   under 4.5:1. */
html:not(.dark) body #withdrawModal button[type="submit"][style*="--px-good"] { background: #0a8256 !important; }

/* 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.dark :is([role="dialog"], #logoutModal) {
  --btn-bg: #385de8;
  --btn-bg-hover: #385de8;
}
html body [role="dialog"] .amount-btn:is(.active, .selected, [aria-pressed="true"]) {
  background: #de1b41 !important;
}
html.dark [role="dialog"] a.spin-btn {
  color: var(--btn-ink);
}
/* rev 868fe5109c9f2a2b */