/* ============================================================
   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: #4d74ff;
  --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: cut to black, a ball down the chute ──
   The studio lights cut and the screen goes black; a numbered ball
   drops out of the chute at the top, falls and bounces on the floor;
   where it lands, a stage light opens upwards in a widening beam and
   the new mode is under it. The black and the beam are fixed colours,
   so nothing changes at the flip. Built by draw-hall.js. */
.px-fx--drh-drop { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--drh-drop .drh-fx-black {
  position: absolute; inset: 0; background: #03050f; opacity: 0;
}
.px-fx--drh-drop.is-cut .drh-fx-black { animation: drh-fx-cut .24s steps(1, end) forwards; }
/* The beam: everything inside a fan of half-angle --a above the landing
   point is cut out of the black (the angle is stepped by draw-hall.js) */
.px-fx--drh-drop.is-open .drh-fx-black {
  opacity: 1; animation: none;
  -webkit-mask: conic-gradient(from calc(0deg - var(--a, 0deg)) at var(--lx, 50%) var(--ly, 100%), transparent 0 calc(var(--a, 0deg) * 2), #000 0);
  mask: conic-gradient(from calc(0deg - var(--a, 0deg)) at var(--lx, 50%) var(--ly, 100%), transparent 0 calc(var(--a, 0deg) * 2), #000 0);
}
@keyframes drh-fx-cut { 0% { opacity: .6; } 35% { opacity: .15; } 55%, 100% { opacity: 1; } }
.px-fx--drh-drop .drh-fx-chute {
  position: absolute; top: -10px; left: var(--lx, 50%); width: 56px; height: 34vh; margin-left: -28px;
  border-radius: 0 0 28px 28px;
  background: linear-gradient(90deg, rgba(160, 180, 255, .25), rgba(255, 255, 255, .08) 40%, rgba(160, 180, 255, .3));
  box-shadow: inset 2px 0 0 rgba(200, 212, 255, .5), inset -2px 0 0 rgba(200, 212, 255, .5);
  opacity: 0; transform: translateY(-100%);
  transition: transform .22s cubic-bezier(.2, .8, .3, 1), opacity .15s ease;
}
.px-fx--drh-drop.is-chute .drh-fx-chute { opacity: 1; transform: none; }
.px-fx--drh-drop.is-open .drh-fx-chute { opacity: 0; transition: opacity .25s ease; }
.px-fx--drh-drop .drh-fx-ball {
  position: absolute; left: var(--lx, 50%); top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 54%, transparent 55%), radial-gradient(circle at 35% 30%, #ff98ad, #ff1f4b 62%, #c40f36);
  box-shadow: 0 0 30px rgba(255, 31, 75, .65);
  display: grid; place-items: center;
  font: 700 15px/1 var(--font-num); color: #0b1433;
  opacity: 0;
}
.px-fx--drh-drop .drh-fx-ball > svg { width: 30px; height: 30px; fill: #ff1f4b; }
.px-fx--drh-drop.is-fall .drh-fx-ball { animation: drh-fx-fall .62s cubic-bezier(.55, 0, 1, .45) forwards; }
.px-fx--drh-drop.is-land .drh-fx-ball { animation: drh-fx-bounce .4s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes drh-fx-fall { 0% { opacity: 1; transform: translateY(12vh) rotate(0); } 100% { opacity: 1; transform: translateY(var(--ly-px)) rotate(400deg); } }
@keyframes drh-fx-bounce { 0% { opacity: 1; transform: translateY(var(--ly-px)) rotate(400deg) scale(1.1, .86); } 45% { opacity: 1; transform: translateY(calc(var(--ly-px) - 46px)) rotate(470deg); } 100% { opacity: 0; transform: translateY(var(--ly-px)) rotate(520deg) scale(.6); } }
.px-fx--drh-drop .drh-fx-flare {
  position: absolute; left: var(--lx, 50%); top: var(--ly, 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 40px 22px rgba(255, 255, 255, .8), 0 0 120px 60px rgba(120, 150, 255, .5);
  opacity: 0;
}
.px-fx--drh-drop.is-open .drh-fx-flare { animation: drh-fx-flare .7s ease-out forwards; }
@keyframes drh-fx-flare { 0% { opacity: 1; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(2); } }

/* ── 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
   countdown's figures flip like a split-flap cell (.drh-tick), 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(-80deg); opacity: .4; } 100% { transform: none; opacity: 1; } }
.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: a home section's title takes the whole row and its "Browse"
   link drops below it. Squeezed beside the link, a two-word title was
   cut short or broke mid-word. Headings break only between words. */
@media (max-width: 639px) {
  html body .reveal.flex-row.justify-between:has(> .btn-view-all) { flex-wrap: wrap; }
  html body .reveal.flex-row.justify-between:has(> .btn-view-all) > .min-w-0 { flex: 1 1 100%; }
  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 infinite alternate; 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; }
}
/* rev c3f5690e562485bf */