/* ============================================================
   VINTAGE ARCADE THEME — a 1980s video arcade, played for real.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the arcade floor: upright cabinets with purple side
   art and yellow T-molding, CRT screens bulging behind their
   bezels with scanlines across the glass, marquees lit from
   behind, a cosmic carpet underfoot, brass tokens, prize-counter
   tickets and sprites drawn pixel by pixel. The border language
   is the pixel frame: a hard edge with its corners stepped off,
   a whole pixel at a time, and a block shadow where a sprite
   would cast one. After dark the arcade at night, black-purple
   lit by magenta, cyan, yellow and green phosphor; by day the
   shutters are up: sunlit carpet, cabinet art in bright inks.

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

:root {
  --font-ui:      'IBM Plex Sans', system-ui, 'Segoe UI', 'Noto Sans', sans-serif;
  --font-display: 'Pixelify Sans', 'IBM Plex Sans', system-ui, sans-serif;
  /* The square bitmap of the cabinets: scores, marquees, counters */
  --font-score:   'Press Start 2P', 'Pixelify Sans', ui-monospace, monospace;

  --paper:        #fbf3e4;
  --paper-2:      #fffcf6;
  --paper-3:      #f2e6cf;
  --ink:          #1d1030;
  --ink-2:        #3b2858;
  --ink-soft:     #6a5986;
  --rule:         rgba(29, 16, 48, 0.17);
  --rule-soft:    rgba(29, 16, 48, 0.08);
  --radius:       4px;
  --radius-sm:    2px;
  --shadow:       4px 4px 0 rgba(29, 16, 48, .14);
  --shadow-md:    6px 6px 0 rgba(29, 16, 48, .2);

  /* Magenta phosphor */
  --theme-50:  #fff0f8;
  --theme-100: #ffd9ec;
  --theme-200: #ffb0d8;
  --theme-300: #ff7dbd;
  --theme-400: #f2409b;
  --theme-500: #dd1580;
  --theme-600: #c00f6d;
  --theme-700: #9b0c58;
  --theme-800: #770a44;
  --theme-900: #510730;
  --theme-500-rgb: 221, 21, 128;
  --theme-600-rgb: 192, 15, 109;
  --theme-600-ink: #ffffff;

  /* The four phosphors and the cabinet violet, as inks that read on the
     paper, each with a soft wash. --va-c1…5 rotate through them. */
  /* Each ink a step deep enough for small text on all three papers
     (4.5:1 on --paper-3); the yellow keeps its brighter brass as a fill. */
  --va-mag: #c4106f; --va-cyan: #06717f; --va-yel: #8a6300; --va-grn: #12763c; --va-vio: #6236c0;
  --va-yel-fill: #b98600;
  --va-mag-soft: rgba(221, 21, 128, .1); --va-cyan-soft: rgba(8, 134, 154, .11); --va-yel-soft: rgba(255, 196, 30, .2);
  --va-grn-soft: rgba(22, 138, 70, .11); --va-vio-soft: rgba(98, 54, 192, .1);
  --va-c1: var(--va-mag); --va-c2: var(--va-cyan); --va-c3: var(--va-yel-fill); --va-c4: var(--va-grn); --va-c5: var(--va-vio);
  /* Phosphor at full strength, for glows and lamps on a dark ground */
  --glow-mag: #ff3ea5; --glow-cyan: #2be4f0; --glow-yel: #ffd23f; --glow-grn: #5cf08a; --glow-vio: #a98bff;

  /* The cabinet: side art, T-molding, bezel and tube */
  --cab:       #2a1650;
  --cab-2:     #3b2070;
  --cab-hi:    #6a3fc0;
  --cab-edge:  #12081f;
  --molding:   #ffd23f;
  --molding-lo:#c99a10;
  --tube:      #120a24;
  --tube-2:    #1d1240;
  /* The night well behind product pictures: a soft violet glow, so a
     black speaker or shredder keeps its outline on a dark card */
  --va-well-night: radial-gradient(80% 75% at 50% 46%, #3e2e6c, #2c1f55 52%, #21163f 100%);
  --scan:      rgba(0, 0, 0, .28);

  /* Sprite palette (includes/sprites.php reads these inline) */
  --px-k: #1d1030; --px-screen: #130a26; --px-scan: #1f1340; --px-bezel-hi: #8f66e0;
  --px-glass: rgba(8, 134, 154, .12); --px-shelf: #ffc41e; --px-floor: rgba(29, 16, 48, .2);

  /* The night ground of the footer, splash, winners and login panel */
  --night:   #120a20;
  --night-2: #1d1131;
  --night-3: #2a1846;
  --on-night: #f4eeff;
  --on-night-soft: rgba(244, 238, 255, .74);

  /* Names other themes' shared markup reaches for */
  --gold:       #b98600;
  --gold-2:     #ffd23f;
  --gold-soft:  rgba(221, 21, 128, 0.08);
  --gold-ink:   #1d1030;
  --felt:       #120a20;
  --felt-2:     #1d1131;
  --on-felt:    #f4eeff;
  --on-felt-soft: rgba(244, 238, 255, 0.78);
  --peacock:    #08869a;
  --peacock-soft: rgba(8, 134, 154, 0.12);
  --red:        #d0204a;
  --red-soft:   rgba(208, 32, 74, 0.09);
  --rose:       #dd1580;
  --rose-soft:  rgba(221, 21, 128, 0.08);

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

  /* Buttons: a yellow arcade button in a black pixel frame, standing on
     its own travel; pressed, it sinks into it */
  --btn-bg:       #ffd23f;
  --btn-bg-hover: #ffdd66;
  --btn-ink:      #1d1030;
  --btn-edge:     #1d1030;
  --btn-travel:   #1d1030;
  --btn-shadow:   0 -3px 0 0 var(--btn-edge), 0 3px 0 0 var(--btn-edge), -3px 0 0 0 var(--btn-edge), 3px 0 0 0 var(--btn-edge), 0 7px 0 0 var(--btn-travel);
  --btn-shadow-hover: 0 -3px 0 0 var(--btn-edge), 0 3px 0 0 var(--btn-edge), -3px 0 0 0 var(--btn-edge), 3px 0 0 0 var(--btn-edge), 0 9px 0 0 var(--btn-travel);
  --btn-shadow-down: 0 -3px 0 0 var(--btn-edge), 0 3px 0 0 var(--btn-edge), -3px 0 0 0 var(--btn-edge), 3px 0 0 0 var(--btn-edge), 0 4px 0 0 var(--btn-travel);

  /* The pixel frame: a 3px edge with its corners stepped off, and the
     block shadow under it */
  --px-edge: var(--ink);
  --frame: 0 -3px 0 0 var(--px-edge), 0 3px 0 0 var(--px-edge), -3px 0 0 0 var(--px-edge), 3px 0 0 0 var(--px-edge);
  --frame-thin: 0 -2px 0 0 var(--rule), 0 2px 0 0 var(--rule), -2px 0 0 0 var(--rule), 2px 0 0 0 var(--rule);
  --frame-drop: 0 -3px 0 0 var(--px-edge), 0 3px 0 0 var(--px-edge), -3px 0 0 0 var(--px-edge), 3px 0 0 0 var(--px-edge), 6px 9px 0 0 rgba(29, 16, 48, .16);
  --frame-lift: 0 -3px 0 0 var(--px-edge), 0 3px 0 0 var(--px-edge), -3px 0 0 0 var(--px-edge), 3px 0 0 0 var(--px-edge), 9px 12px 0 0 rgba(29, 16, 48, .2);

  /* Scanlines over glass, and the curve and vignette of the tube */
  --scanlines: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .26) 2px 3px);
  --tube-glow: radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, .06), transparent 60%), radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);

  /* Marquee lamps chasing round a sign, and the yellow T-molding strip */
  --bulbs: radial-gradient(circle at 6px 50%, #fff6c8 0 2px, #ffd23f 2.5px 3.5px, transparent 4px) left center / 16px 100% repeat-x;
  --molding-strip: linear-gradient(180deg, #fff2a8 0 2px, #ffd23f 2px 6px, #c99a10 6px 8px);

  /* The arcade carpet: neon squiggles, rings, sparks and zigzags woven
     into a black-purple ground. --carpet is the full rug (footer, hero
     floor); the page carries a faint trace of it. */
  --carpet: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><rect width='240' height='240' fill='%23160b2a'/><g fill='none' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 44q14-18 28 0t28 0' stroke='%23ff3ea5'/><circle cx='186' cy='46' r='13' stroke='%232be4f0'/><path d='M112 108l16 27h-32z' stroke='%23ffd23f'/><path d='M30 178l10-10 10 10 10-10 10 10' stroke='%235cf08a'/><path d='M168 182q12 22 34 10' stroke='%23a98bff'/><path d='M200 128q-14 14 0 28' stroke='%23ff3ea5'/><circle cx='70' cy='112' r='6' stroke='%23a98bff'/><path d='M136 220l14-12 14 12' stroke='%232be4f0'/></g><g fill='%23ffd23f'><path d='M92 22l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/><path d='M222 92l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/></g><g fill='%23f4eeff'><rect x='150' y='88' width='3' height='3'/><rect x='20' y='118' width='3' height='3'/><rect x='104' y='196' width='3' height='3'/><rect x='228' y='212' width='3' height='3'/></g></svg>");
  --carpet-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='.11'><path d='M20 54q16-20 32 0t32 0' stroke='%23dd1580'/><circle cx='232' cy='58' r='14' stroke='%2308869a'/><path d='M140 136l18 30h-36z' stroke='%23d9a300'/><path d='M36 226l12-12 12 12 12-12 12 12' stroke='%23168a46'/><path d='M210 226q14 24 38 12' stroke='%236236c0'/></g><g fill='%23d9a300' fill-opacity='.18'><path d='M112 28l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/></g></svg>");

  --page-bg: var(--carpet-faint) repeat, var(--paper);
}

/* After dark: the arcade at night */
html.dark {
  --paper:        #110a1e;
  --paper-2:      #1a1030;
  --paper-3:      #25173f;
  --ink:          #f4eeff;
  --ink-2:        #d8cdf0;
  --ink-soft:     #a495c6;
  --rule:         rgba(216, 205, 240, 0.17);
  --rule-soft:    rgba(216, 205, 240, 0.08);
  --shadow:       4px 4px 0 rgba(0, 0, 0, .5);
  --shadow-md:    6px 6px 0 rgba(0, 0, 0, .55);

  --theme-50:  #2a0f26;
  --theme-100: #3d1236;
  --theme-200: #6a1a58;
  --theme-300: #ff9bd0;
  --theme-400: #ff6cbb;
  --theme-500: #ff3ea5;
  --theme-600: #ff5cb3;
  --theme-700: #ff8cc8;
  --theme-800: #ffbfe0;
  --theme-900: #ffe6f3;
  --theme-500-rgb: 255, 62, 165;
  --theme-600-rgb: 255, 92, 179;
  --theme-600-ink: #1d1030;

  --va-mag: #ff4fae; --va-cyan: #2be4f0; --va-yel: #ffd23f; --va-grn: #5cf08a; --va-vio: #b49aff;
  --va-yel-fill: #ffd23f;
  --va-mag-soft: rgba(255, 62, 165, .13); --va-cyan-soft: rgba(43, 228, 240, .11); --va-yel-soft: rgba(255, 210, 63, .12);
  --va-grn-soft: rgba(92, 240, 138, .1); --va-vio-soft: rgba(169, 139, 255, .13);

  --px-k: #07030d; --px-screen: #0b0618; --px-scan: #160d2e; --px-bezel-hi: #8f66e0;
  --px-glass: rgba(43, 228, 240, .1); --px-shelf: #ffd23f; --px-floor: rgba(0, 0, 0, .45); --px-n: #ff8cc6;

  --gold:       #ffd23f;
  --gold-2:     #ffe27a;
  --gold-soft:  rgba(255, 62, 165, 0.12);
  --gold-ink:   #1d1030;
  --felt:       #0b0614;
  --felt-2:     #1a1030;
  --peacock:    #2be4f0;
  --peacock-soft: rgba(43, 228, 240, 0.12);
  --red:        #ff6b8a;
  --red-soft:   rgba(255, 107, 138, 0.13);
  --rose:       #ff3ea5;
  --rose-soft:  rgba(255, 62, 165, 0.12);

  --nav-accent:    var(--theme-500);
  --hdr-strip-bg:  #0b0614;

  --btn-bg:       #ffd23f;
  --btn-bg-hover: #ffe066;
  --btn-ink:      #1d1030;
  --btn-edge:     #07030d;
  --btn-travel:   #a87a06;

  --px-edge: #07030d;
  --frame-thin: 0 -2px 0 0 var(--rule), 0 2px 0 0 var(--rule), -2px 0 0 0 var(--rule), 2px 0 0 0 var(--rule);
  --frame-drop: 0 -3px 0 0 var(--px-edge), 0 3px 0 0 var(--px-edge), -3px 0 0 0 var(--px-edge), 3px 0 0 0 var(--px-edge), 6px 9px 0 0 rgba(0, 0, 0, .45);
  --frame-lift: 0 -3px 0 0 var(--px-edge), 0 3px 0 0 var(--px-edge), -3px 0 0 0 var(--px-edge), 3px 0 0 0 var(--px-edge), 9px 12px 0 0 rgba(0, 0, 0, .5), 0 0 26px -6px rgba(255, 62, 165, .45);

  --carpet-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='.13'><path d='M20 54q16-20 32 0t32 0' stroke='%23ff3ea5'/><circle cx='232' cy='58' r='14' stroke='%232be4f0'/><path d='M140 136l18 30h-36z' stroke='%23ffd23f'/><path d='M36 226l12-12 12 12 12-12 12 12' stroke='%235cf08a'/><path d='M210 226q14 24 38 12' stroke='%23a98bff'/></g><g fill='%23ffd23f' fill-opacity='.16'><path d='M112 28l3 8 8 3-8 3-3 8-3-8-8-3 8-3z'/></g></svg>");
  --page-bg:
    radial-gradient(900px 420px at 85% -160px, rgba(255, 62, 165, 0.09), transparent 70%) no-repeat,
    radial-gradient(800px 400px at 6% -140px, rgba(43, 228, 240, 0.07), transparent 70%) no-repeat,
    var(--carpet-faint) repeat,
    var(--paper);
}

/* Neither pixel face carries Greek, Vietnamese, Arabic, Bengali or
   Chinese; those pages set every heading and counter in Plex whole,
   rather than a pixel word with a Plex letter in the middle of it. */
html:is(:lang(el), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) {
  --font-display: var(--font-ui);
  --font-score: var(--font-ui);
}

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

html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
}
.display-italic { font-style: normal; color: var(--theme-500); }
/* Figures in tabular columns read better in the UI face. */
html .font-display.tabular-nums, html .font-display[class*="tabular"] { font-family: var(--font-ui); font-weight: 600; letter-spacing: 0; }

::selection { background: #ff3ea5; color: #ffffff; }

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

/* The menu cursor of every arcade title screen: a pixel arrow pointing at
   the line it picks. Eyebrows and section caps wear it. */
:root { --cursor-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 7' shape-rendering='crispEdges'><path d='M0 0h1v7H0zM1 1h1v5H1zM2 2h1v3H2zM3 3h1v1H3z'/></svg>"); }
.va-cursor, html .section-eyebrow::before {
  content: ''; display: inline-block; flex-shrink: 0; width: 8px; height: 14px;
  background: var(--theme-500);
  -webkit-mask: var(--cursor-mask) center / contain no-repeat; mask: var(--cursor-mask) center / contain no-repeat;
}
[dir="rtl"] .va-cursor, [dir="rtl"] .section-eyebrow::before { transform: scaleX(-1); }
@media (prefers-reduced-motion: no-preference) {
  .va-cursor--blink { animation: va-blink 1.1s steps(1) 4; }
}
@keyframes va-blink { 50% { opacity: 0; } }

.ed-eyebrow {
  font-family: var(--font-score);
  font-size: 10px; font-weight: 400; line-height: 1.6;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--theme-600);
}
.ed-eyebrow-tight { font-size: 8px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-score);
  font-size: 10px; font-weight: 400; line-height: 1.6;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--theme-600);
  margin-bottom: 0.8rem;
}
html:is(:lang(el), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) :is(.ed-eyebrow, .section-eyebrow) { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.92rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink);
  padding: .32rem .7rem;
  background: var(--paper-2);
  box-shadow: var(--frame-thin);
  text-decoration: none;
  transition: gap 0.15s steps(3), background .15s ease;
}
.btn-view-all:hover, .btn-view-all:focus-visible { gap: 0.75rem; background: var(--va-yel-soft); }
[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-image: var(--carpet-faint); }

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

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

/* Sprites stay square-pixelled at every size */
.va-sprite, .va-art { image-rendering: pixelated; shape-rendering: crispEdges; }

/* ── Header ── */
#desktopHeader .hdr-search {
  background: var(--paper-2);
  border: 0;
  border-radius: 0;
  box-shadow: var(--frame-thin);
}
#desktopHeader .hdr-search:focus-within { box-shadow: 0 -2px 0 0 var(--theme-500), 0 2px 0 0 var(--theme-500), -2px 0 0 0 var(--theme-500), 2px 0 0 0 var(--theme-500), 0 0 0 6px rgba(var(--theme-500-rgb), .14); }
.ed-search { background: transparent; border: none; }

.hdr-strip, .hdr-strip .ed-status { color: rgba(244, 238, 255, 0.86); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffd23f; }

/* The marquee's lamps: a row of bulbs under the header, chasing */
.va-band {
  height: 12px;
  background:
    radial-gradient(circle at 8px 50%, #fff6c8 0 1.5px, #ffd23f 2px 3px, rgba(255, 210, 63, .25) 3.5px 5px, transparent 5.5px) 0 50% / 16px 100% repeat-x,
    linear-gradient(180deg, #2a1650, #12081f);
  box-shadow: inset 0 2px 0 #ff3ea5, inset 0 -2px 0 #07030d;
}
.va-band--chase { position: relative; }
.va-band--chase::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 8px 50%, #ffffff 0 2px, rgba(255, 255, 255, .5) 3px 4px, transparent 5px) 0 50% / 48px 100% repeat-x;
}
@media (prefers-reduced-motion: no-preference) {
  .va-band--chase::after { animation: va-chase 1.2s steps(3) 4; }
}
@keyframes va-chase { to { background-position: 48px 50%; } }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 3px solid var(--ink); }
html.dark .ed-subnav { border-bottom-color: #07030d; }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0;
  font-family: var(--font-score); font-size: 9px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--theme-600); white-space: nowrap;
  padding-right: 1.25rem; border-right: 2px dotted var(--rule);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 2px dotted var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.8rem; border-radius: 0;
  font-family: var(--font-ui); font-size: 0.94rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--btn-bg); color: var(--btn-ink); box-shadow: 0 -2px 0 0 var(--btn-edge), 0 2px 0 0 var(--btn-edge), -2px 0 0 0 var(--btn-edge), 2px 0 0 0 var(--btn-edge); }
.ed-subnav-item:focus-visible { outline: 2px dashed var(--theme-500); outline-offset: 3px; }

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

/* The arcade button: yellow in a black pixel frame, on its travel. Hover
   lifts it a step; pressed it sinks down into the travel, and a keyboard
   press (Enter or Space) does the same through :active. */
html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.78rem 1.5rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 1.02rem; font-weight: 700; letter-spacing: .01em;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 0;
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2), background 0.12s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover,
html .ed-btn-primary:focus-visible, html .ed-plan-cta:focus-visible {
  background: var(--btn-bg-hover); color: var(--btn-ink);
  transform: translateY(-2px); box-shadow: var(--btn-shadow-hover);
}
html .ed-btn-primary:active, html .ed-plan-cta:active, html .drawer-login:active { transform: translateY(3px); box-shadow: var(--btn-shadow-down); }
html.dark .ed-btn-primary, html.dark .ed-btn-primary:hover,
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta,
html body .ed-plan-cta, html.dark body .ed-plan-cta {
  background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow);
}
.ed-btn-primary:focus-visible, .ed-btn-secondary:focus-visible, .ed-plan-cta:focus-visible { outline: 2px dashed var(--theme-500); outline-offset: 7px; }

/* The second button is cyan, framed the same way with a shallower travel */
.ed-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.74rem 1.3rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 700;
  color: var(--ink); background: var(--paper-2);
  border: 0; border-radius: 0;
  box-shadow: 0 -3px 0 0 var(--px-edge), 0 3px 0 0 var(--px-edge), -3px 0 0 0 var(--px-edge), 3px 0 0 0 var(--px-edge), 0 6px 0 0 var(--va-cyan);
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2), background .12s ease;
}
.ed-btn-secondary:hover, .ed-btn-secondary:focus-visible { background: var(--va-cyan-soft); transform: translateY(-1px); }
.ed-btn-secondary:active { transform: translateY(3px); box-shadow: 0 -3px 0 0 var(--px-edge), 0 3px 0 0 var(--px-edge), -3px 0 0 0 var(--px-edge), 3px 0 0 0 var(--px-edge); }
html.dark .ed-btn-secondary { color: var(--ink); background: var(--paper-3); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }

/* ── Cards: a pixel frame on the paper, a block shadow, and a step up on
   hover or focus ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 0;
  border-radius: 0;
  box-shadow: var(--frame-drop);
  transition: transform 0.12s steps(2), box-shadow 0.12s steps(2);
}
html .ed-plan:hover, html .shop-card:hover, html .ed-plan:focus-within, html .shop-card:focus-within { transform: translate(-3px, -3px); box-shadow: var(--frame-lift); }
html .ed-plan-featured {
  position: relative;
  background: var(--scanlines), var(--tube-glow), linear-gradient(180deg, var(--tube-2), var(--tube)); color: #f4eeff;
  border: 0; border-radius: 0;
  box-shadow: var(--frame-drop), inset 0 0 0 6px var(--cab-2);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: var(--molding-strip); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(244, 238, 255, .2); }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; color: var(--ink-soft); }
.ed-topnav-link { color: rgba(244, 238, 255, 0.88); text-decoration: none; transition: color 0.12s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffd23f; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-score); font-size: 9px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--theme-600); padding: 1.2rem 1.5rem 0.45rem;
}
html:is(:lang(el), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) .drawer-section-label { font-size: 12px; font-weight: 700; }
/* header.css greys the label slate with !important after dark */
html.dark .drawer-section-label { color: var(--theme-600) !important; }
.drawer-section-label::after { content: ''; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--rule) 0 4px, transparent 4px 8px); }
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.drawer-nav-row:hover, .drawer-nav-row:focus-visible { background: var(--paper-3); color: var(--ink); box-shadow: inset 4px 0 0 var(--theme-500); }
[dir="rtl"] .drawer-nav-row:hover, [dir="rtl"] .drawer-nav-row:focus-visible { box-shadow: inset -4px 0 0 var(--theme-500); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.4rem; padding: 0.85rem 1rem; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 0; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700;
  color: var(--theme-600); border: 0; box-shadow: 0 -2px 0 0 var(--theme-600), 0 2px 0 0 var(--theme-600), -2px 0 0 0 var(--theme-600), 2px 0 0 0 var(--theme-600); text-decoration: none;
}
.drawer-logout:hover { background: var(--gold-soft); }

.mobile-glass-header {
  background: rgba(251, 243, 228, 0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 3px solid var(--ink);
}
html.dark .mobile-glass-header { background: rgba(17, 10, 30, 0.96); border-bottom-color: #07030d; }

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

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

.ed-dropdown {
  background: var(--paper-2);
  border: 0; border-radius: 0;
  box-shadow: var(--frame-drop);
  overflow: hidden;
}
.ed-dropdown-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.68rem 1rem;
  font-family: var(--font-ui); font-size: 0.98rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.ed-dropdown-item:hover, .ed-dropdown-item:focus-visible { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  font-family: var(--font-score); font-size: 9px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--theme-600); padding: 0.95rem 1rem 0.45rem;
}

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

/* ── Dark/light toggle: the CRT powers down and back up ──
   assets/js/vintage-arcade.js registers it. The picture collapses from
   top and bottom into a white-hot line across the middle of the screen,
   the line shrinks to a dot and the dot dies; on black glass the mode
   flips, then a dot sparks, stretches into a line and the line opens
   into the new picture under a sweep of scanlines. The slabs and line
   are fixed colours, so nothing on the cover changes at the flip. */
.px-fx--va-crt { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--va-crt .va-fx-flash { position: absolute; inset: 0; background: #ffffff; opacity: 0; }
.px-fx--va-crt .va-fx-slab { position: absolute; left: 0; right: 0; height: calc(50% + 2px); background: #07030d; transform: scaleY(0); }
.px-fx--va-crt .va-fx-slab--t { top: 0; transform-origin: 50% 0; }
.px-fx--va-crt .va-fx-slab--b { bottom: 0; transform-origin: 50% 100%; }
.px-fx--va-crt .va-fx-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
  background: #ffffff; opacity: 0;
  box-shadow: 0 0 10px 3px rgba(190, 245, 255, .95), 0 0 46px 12px rgba(255, 62, 165, .55);
}
.px-fx--va-crt .va-fx-scan { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(7, 3, 13, .5) 2px 4px); }
.px-fx--va-crt.is-off .va-fx-flash { opacity: .4; transition: opacity .24s ease-in; }
.px-fx--va-crt.is-off .va-fx-slab { transform: scaleY(1); transition: transform .26s cubic-bezier(.6, 0, .9, .45); }
.px-fx--va-crt.is-off .va-fx-line { opacity: 1; transition: opacity .06s linear .2s; }
.px-fx--va-crt.is-dot .va-fx-line { transform: scaleX(.006) scaleY(1.6); transition: transform .22s cubic-bezier(.75, 0, 1, .55); }
.px-fx--va-crt.is-dark .va-fx-line { opacity: 0; transition: opacity .16s ease-out; }
.px-fx--va-crt.is-dark .va-fx-flash { opacity: 0; transition: none; }
.px-fx--va-crt.is-spark .va-fx-line { opacity: 1; transform: scaleX(.006) scaleY(1.6); transition: opacity .05s linear; }
.px-fx--va-crt.is-wide .va-fx-line { opacity: 1; transform: none; transition: transform .17s cubic-bezier(.2, .8, .3, 1); }
.px-fx--va-crt.is-open .va-fx-slab { transform: scaleY(0); transition: transform .32s cubic-bezier(.2, .75, .3, 1); }
.px-fx--va-crt.is-open .va-fx-line { opacity: 0; transform: scaleY(40); transition: opacity .3s ease-out, transform .3s ease-out; }
.px-fx--va-crt.is-open .va-fx-scan { opacity: 1; transition: opacity .1s; }
.px-fx--va-crt.is-settle .va-fx-scan { opacity: 0; transition: opacity .35s ease-out; }

/* ── Footer: the prize counter closes the page. A glass shelf of pixel
   prizes along its top on yellow T-molding, then the arcade's carpet
   under the dimmed lights ── */
.va-footer {
  --paper:     #150c26;
  --paper-2:   #1e1236;
  --paper-3:   #2a1846;
  --ink:       #f4eeff;
  --ink-2:     #ddd2f3;
  --ink-soft:  #b0a2d0;
  --rule:      rgba(244, 238, 255, 0.16);
  --rule-soft: rgba(244, 238, 255, 0.08);
  --theme-500: #ff3ea5; --theme-600: #ff5cb3; --theme-700: #ff8cc8;
  --theme-500-rgb: 255, 62, 165;
  --px-edge: #07030d;
  position: relative;
}
html body #desktopFooter.va-footer {
  background:
    linear-gradient(180deg, rgba(18, 9, 32, .9), rgba(14, 7, 26, .95)),
    var(--carpet) repeat 0 0 / 240px 240px !important;
}
.va-footer-shelf { position: relative; pointer-events: none; }
.va-footer-shelf__glass {
  display: flex; align-items: flex-end; justify-content: space-around; gap: 8px;
  height: 78px; padding: 0 4%;
  background:
    linear-gradient(115deg, transparent 0 62%, rgba(255, 255, 255, .25) 62% 64%, transparent 64% 68%, rgba(255, 255, 255, .16) 68% 69%, transparent 69%),
    linear-gradient(180deg, rgba(43, 228, 240, .08), rgba(43, 228, 240, .18));
  border-top: 3px solid #1d1030;
}
html.dark .va-footer-shelf__glass { border-top-color: #07030d; }
.va-footer-shelf__glass .va-sprite { width: 42px; height: auto; margin-bottom: -1px; }
.va-footer-shelf__glass .va-sprite--wide { width: 63px; }
.va-footer-shelf__molding { display: block; height: 10px; background: var(--molding-strip); box-shadow: 0 3px 0 #07030d; }
@media (max-width: 639px) {
  .va-footer-shelf__glass { height: 58px; }
  .va-footer-shelf__glass .va-sprite { width: 30px; }
  .va-footer-shelf__glass .va-sprite--wide { width: 45px; }
  .va-footer-shelf__glass .va-sprite:nth-child(n+7) { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .va-footer-shelf__glass .va-sprite { animation: va-idle 2.4s steps(2) 3; animation-delay: calc(var(--i, 0) * -.3s); }
}
@keyframes va-idle { 50% { transform: translateY(-3px); } }
.va-footer a:hover, .va-footer a:focus-visible { color: #ffd23f; }
html .va-footer .ed-footer-heading { font-family: var(--font-score); font-weight: 400; font-size: 10px; line-height: 1.6; letter-spacing: .04em; text-transform: uppercase; color: #2be4f0; }
html:is(:lang(el), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) .va-footer .ed-footer-heading { font-size: 13px; font-weight: 700; }
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: #2be4f0 !important; }
html.dark #desktopFooter .ed-newsletter h4 { color: #f4eeff !important; }
html .ed-floating-nav {
  background: var(--paper-2);
  border: 0; border-radius: 0;
  box-shadow: var(--frame-drop);
}
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .96rem; font-weight: 600; color: var(--ink-2); border-radius: 0; }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }

/* The newsletter on a CRT: the tube behind its bezel, a high-score entry
   in cyan phosphor on the glass */
html body .va-footer .ed-newsletter {
  position: relative;
  background: var(--scanlines), var(--tube-glow), linear-gradient(180deg, #1d1240, #0d0720);
  color: #f4eeff;
  border: 0; border-radius: 14px / 22px;
  box-shadow: 0 0 0 10px #2a1650, 0 0 0 13px #07030d, 0 0 0 16px #ffd23f, 0 0 0 19px #07030d, 0 0 40px 10px rgba(43, 228, 240, .12);
  margin: 19px 19px 3.5rem;
  overflow: hidden;
  padding-top: 2.3rem; padding-bottom: 2.1rem;
}
html body .va-footer .ed-newsletter::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(80% 60% at 30% 20%, rgba(255, 255, 255, .07), transparent 60%);
}
html body .va-footer .ed-newsletter::after { display: none; }
@media (max-width: 767px) { html body .va-footer .ed-newsletter { margin-left: 16px; margin-right: 16px; } }
html body .va-footer .ed-newsletter > * { position: relative; z-index: 1; }
html body .va-footer .ed-newsletter h4, html.dark body .va-footer .ed-newsletter h4 { color: #ffd23f !important; font-family: var(--font-display); font-weight: 700; text-shadow: 0 0 12px rgba(255, 210, 63, .45); }
html body .va-footer .ed-newsletter p:not(#newsletter-msg), html.dark body .va-footer .ed-newsletter p:not(#newsletter-msg) { color: rgba(244, 238, 255, .78) !important; }
html body .va-footer .ed-newsletter-input, html.dark body .va-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) {
  background: #07030d !important; color: #2be4f0 !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: 0 -2px 0 0 #2be4f0, 0 2px 0 0 #2be4f0, -2px 0 0 0 #2be4f0, 2px 0 0 0 #2be4f0 !important;
  font-family: var(--font-ui); caret-color: #ffd23f;
}
html body .va-footer .ed-newsletter-input::placeholder { color: rgba(43, 228, 240, .55); }
html body .va-footer .ed-newsletter-input:focus { box-shadow: 0 -2px 0 0 #ffd23f, 0 2px 0 0 #ffd23f, -2px 0 0 0 #ffd23f, 2px 0 0 0 #ffd23f, 0 0 16px rgba(255, 210, 63, .35) !important; }
html body .va-footer .ed-newsletter-btn {
  /* One step deeper than the neon so white reads on it (5.1:1) */
  background: #d1137b; color: #ffffff; border: 0; border-radius: 0;
  box-shadow: 0 -2px 0 0 #07030d, 0 2px 0 0 #07030d, -2px 0 0 0 #07030d, 2px 0 0 0 #07030d, 0 5px 0 0 #8a0c50, 0 0 14px -2px rgba(255, 62, 165, .55);
  font-family: var(--font-ui); font-weight: 700;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
html body .va-footer .ed-newsletter-btn:active { transform: translateY(3px); box-shadow: 0 -2px 0 0 #07030d, 0 2px 0 0 #07030d, -2px 0 0 0 #07030d, 2px 0 0 0 #07030d, 0 2px 0 0 #8a0c50; }
html body .va-footer .ed-newsletter-age, html body .va-footer .ed-newsletter label { color: rgba(244, 238, 255, .72) !important; }

/* The logo on a backlit marquee: the light-mode logo on a cream sign
   framed in lamps, wherever it sits on the night (footer, splash) */
.va-marquee-plate {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.6rem;
  background: radial-gradient(90% 120% at 50% 50%, #fffdf3, #fff2c8);
  box-shadow: 0 0 0 4px #07030d, 0 0 0 12px #2a1650, 0 0 0 15px #07030d, 0 0 30px 8px rgba(255, 210, 63, .25);
  margin: 15px;
}
.va-marquee-plate::before {
  content: ''; position: absolute; inset: -12px; pointer-events: none;
  background:
    radial-gradient(circle, #fff6c8 0 1.5px, #ffd23f 2px 2.6px, transparent 3px) 0 0 / 14px 12px repeat-x,
    radial-gradient(circle, #fff6c8 0 1.5px, #ffd23f 2px 2.6px, transparent 3px) 0 100% / 14px 12px repeat-x;
}
@media (prefers-reduced-motion: no-preference) {
  .va-marquee-plate::before { animation: va-lamps 1s steps(2) 4; }
}
@keyframes va-lamps { 50% { background-position: 7px 0, 7px 100%; } }

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* On phones the words of a heading wrap whole ("Mystery Boxen"), never mid-word. */
@media (max-width: 639px) {
  html body h2.text-fit { overflow-wrap: break-word; word-break: normal; hyphens: manual; font-size: clamp(1.5rem, 8vw, 1.875rem); }
  /* the auction page's "similar auctions" link ("Andere Auktionen durchstöbern") drops under its heading */
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
  /* ticket dates ("28 Oct 2026, 06:18 AM") wrap after the comma in their half-width column */
  html body .grid.grid-cols-2 > div > .whitespace-nowrap.text-sm.font-medium { white-space: normal; }
}

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow the theme's own surfaces. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(17, 10, 30, 0.96) !important; border-bottom-color: #07030d !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(26, 16, 48, 0.97) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: #ff3ea5 !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, #25173f, #110a1e, #1a1030, #0b0614) !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 a navy #0d1117; here fields
   take the cabinet's own black. 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: #0b0614 !important;
  border-color: rgba(216, 205, 240, .22) !important;
  color: #f4eeff !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 cabinet black. */
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: #0b0614;
  --paper: #f4eeff;
  border-color: rgba(255, 62, 165, .35);
}
html header.safe-top-header[style] { background: rgba(251, 243, 228, .96) !important; }
html.dark header.safe-top-header[style] { background: rgba(17, 10, 30, .96) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(17, 10, 30, .96); }

/* ── Login / register / forgot-password brand panel: the arcade at night,
   the carpet under a marquee glow, a cabinet's lamps along the top ── */
:root, html.dark {
  --brand-gradient: linear-gradient(180deg, #1a0e30, #0e0718);
  --brand-glow-1: rgba(255, 62, 165, 0.24);
  --brand-glow-2: rgba(43, 228, 240, 0.2);
}
.brand-panel {
  background:
    radial-gradient(70% 50% at 80% 0%, rgba(255, 62, 165, .28), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(43, 228, 240, .2), transparent 70%),
    linear-gradient(180deg, rgba(18, 9, 32, .82), rgba(14, 7, 26, .9)),
    var(--carpet) repeat 0 0 / 240px 240px !important;
}
/* login.css draws ::after as a round glow; here it is the trophy */
html .brand-panel::after {
  content: ''; position: absolute;
  top: 74px !important; right: 9% !important; left: auto !important; bottom: auto !important;
  width: 96px !important; height: 96px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: drop-shadow(0 0 22px rgba(255, 210, 63, .35)) !important; transform: none !important;
  background: var(--spr-trophy) center / contain no-repeat !important;
  image-rendering: pixelated;
  box-shadow: none !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 9% !important; }
/* login.css's other glow becomes the marquee lamps along the top */
html .brand-panel::before {
  top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 12px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background:
    radial-gradient(circle at 8px 50%, #fff6c8 0 1.5px, #ffd23f 2px 3px, transparent 3.5px) 0 50% / 16px 100% repeat-x,
    linear-gradient(180deg, #2a1650, #12081f) !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(244, 238, 255, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: an arcade play card. Magenta-to-violet plastic
   in a pixel frame, the magnetic stripe across its top, the token count
   in the arcade's lettering and a token cup in its corner ── */
html body .wallet-hero {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 10px, transparent 10px 20px),
    radial-gradient(70% 90% at 100% 0%, rgba(43, 228, 240, .35), transparent 60%),
    linear-gradient(135deg, #c40f6e 0%, #6a2bb0 58%, #3b1a7a 100%);
  border: 0;
  border-radius: 0;
  box-shadow: var(--frame-drop);
  color: #ffffff;
  overflow: hidden;
  padding-top: calc(1.5rem + 26px) !important;
}
html.dark body .wallet-hero { box-shadow: var(--frame-drop), 0 0 40px -10px rgba(255, 62, 165, .5); }
/* The magnetic stripe */
html body .wallet-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 22px;
  border: 0; border-radius: 0; transform: none; opacity: 1;
  background: linear-gradient(180deg, #1a0e2a, #07030d 70%, #2a1846);
  pointer-events: none;
}
/* The cup of tokens, standing in the corner */
html body .wallet-hero::after {
  content: ''; position: absolute; right: 30px; top: calc(50% - 30px); left: auto; bottom: auto; width: 84px; height: 72px;
  border-radius: 0; transform: none; opacity: 1;
  background: var(--spr-cup) center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(5px 6px 0 rgba(7, 3, 13, .35));
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 26px; }
@media (max-width: 639px) { html body .wallet-hero::after { width: 50px; height: 43px; right: 16px; top: calc(50% - 40px); } html[dir="rtl"] body .wallet-hero::after { right: auto; left: 16px; } }
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-hero span:is([style*="color:rgba(255,255,255"], [style*="color:color-mix(in srgb, var(--paper)"]) { color: rgba(255, 255, 255, .86) !important; }
html body .wallet-hero .h-px { height: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 6px, transparent 6px 12px) !important; }
html body .wallet-hero span[style*="font-style:italic"] { font-size: 0 !important; display: inline-block; width: 24px; height: 24px; background: var(--spr-token) center / contain no-repeat; image-rendering: pixelated; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(2.6rem, 11vw, 5.5rem) !important; line-height: 1.05;
  text-shadow: 4px 4px 0 rgba(7, 3, 13, .45);
}
html body .wallet-hero-btn-primary {
  background: #ffd23f; color: #1d1030; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 0;
  box-shadow: 0 -3px 0 0 #07030d, 0 3px 0 0 #07030d, -3px 0 0 0 #07030d, 3px 0 0 0 #07030d, 0 7px 0 0 #07030d;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
html body .wallet-hero-btn-primary:hover, html body .wallet-hero-btn-primary:focus-visible { background: #ffe066; color: #1d1030; transform: translateY(-2px); }
html body .wallet-hero-btn-primary:active { transform: translateY(3px); box-shadow: 0 -3px 0 0 #07030d, 0 3px 0 0 #07030d, -3px 0 0 0 #07030d, 3px 0 0 0 #07030d, 0 4px 0 0 #07030d; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #ffffff; border: 0; border-radius: 0; box-shadow: 0 -2px 0 0 rgba(255, 255, 255, .7), 0 2px 0 0 rgba(255, 255, 255, .7), -2px 0 0 0 rgba(255, 255, 255, .7), 2px 0 0 0 rgba(255, 255, 255, .7); }
html body .wallet-hero-btn-secondary:hover { background: rgba(255, 255, 255, .12); }
/* Three buttons share a phone row; each label stays on one line and the
   row wraps instead of a button folding "Add Balance" in two. */
html body .wallet-hero-btn-primary, html body .wallet-hero-btn-secondary { white-space: nowrap; }
@media (max-width: 420px) {
  html body .wallet-hero-btn-primary, html body .wallet-hero-btn-secondary { padding: .55rem .95rem; font-size: .8125rem; gap: .375rem; }
}

/* ── Mystery box card (styled by assets/css/pages/home.css): the cabinet's
   T-molding across its top ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 0;
  border-radius: 0;
  box-shadow: var(--frame-drop);
  overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--frame-lift); transform: translate(-3px, -3px); }
html .ed-card-mystery::before {
  top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 10px; border-radius: 0;
  background: var(--molding-strip); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }
/* ── Product page buy box: the control panel, molding along its top ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 0;
  border-radius: 0;
  box-shadow: var(--frame-drop);
  overflow: hidden;
  padding-top: calc(1.25rem + 10px);
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: var(--molding-strip);
}
html body .pd-buybox .font-display.text-4xl { font-family: var(--font-display); font-weight: 700; color: var(--theme-600); overflow-wrap: normal; }
.pd-title { font-weight: 700 !important; }
/* The mystery box plugin's own button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill. */
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 magenta phosphor. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a
   field and become arcade buttons. */
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 0;
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--gold-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--gold-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(var(--theme-500-rgb), .3); }
html.dark .border-violet-200 { border-color: rgba(255, 62, 165, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(var(--theme-500-rgb), .35); }
html .focus\:border-purple-400:focus { border-color: var(--theme-500); }
/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the theme's arcade buttons. */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--btn-shadow) !important;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
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:active, html .bg-theme-500.text-white:active { transform: translateY(3px); box-shadow: var(--btn-shadow-down) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(29, 16, 48, .3); border-top-color: var(--btn-ink); }
/* The game arena's Play button letters itself in white on the accent */
html .arena-play { color: var(--btn-ink); text-shadow: none; }
html .arena-play .pic { background: rgba(29, 16, 48, .12); }
html .arena-play .cost { border-left-color: rgba(29, 16, 48, .3); }

/* ── Winners page cards ── */
html .wnc { border-radius: 0; background: var(--paper-2); border: 0; box-shadow: var(--frame-drop); transition: transform .12s steps(2), box-shadow .12s steps(2); }
html .wnc:hover { box-shadow: var(--frame-lift); transform: translate(-3px, -3px); }

/* ── Cart and checkout: the order total on the counter's receipt, the
   molding along its top. 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: 0 !important; border-radius: 0 !important; box-shadow: var(--frame-drop) !important; margin-bottom: 14px; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: var(--frame-drop) !important;
  overflow: hidden;
  padding-top: 1.7rem !important;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: var(--molding-strip);
}
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
  color: var(--theme-600);
  overflow-wrap: normal;
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .05em; }
/* 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; }
}

/* ── My Winnings: each prize is a ticket off the counter's roll. The
   prize stands behind the counter glass on a lit shelf; below a
   perforated tear, the pink stub carries its name, its worth and its
   number. Notches are bitten out of both edges at the tear. ── */
.va-win {
  --stub: #ffe3f0; --stub-2: #ffd0e6; --stub-ink: #5c0f3a;
  position: relative;
  background: var(--paper-2);
  box-shadow: var(--frame-drop);
  transition: transform .12s steps(2), box-shadow .12s steps(2);
}
html.dark .va-win { --stub: #2c1230; --stub-2: #3a1840; --stub-ink: #ffc2e1; }
.va-win:hover, .va-win:focus-within { transform: translate(-3px, -3px); box-shadow: var(--frame-lift); }
.va-win__glass {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 12.5rem; padding: 3.2rem 14px 0;
  background:
    linear-gradient(115deg, transparent 0 66%, rgba(255, 255, 255, .5) 66% 68%, transparent 68% 72%, rgba(255, 255, 255, .3) 72% 73%, transparent 73%),
    linear-gradient(180deg, #e6fbfd, #c4f1f6);
}
html.dark .va-win__glass {
  background:
    linear-gradient(115deg, transparent 0 66%, rgba(255, 255, 255, .12) 66% 68%, transparent 68% 72%, rgba(255, 255, 255, .08) 72% 73%, transparent 73%),
    radial-gradient(70% 70% at 50% 100%, rgba(43, 228, 240, .22), transparent 70%),
    var(--va-well-night);
}
.va-win__prize { display: flex; align-items: flex-end; justify-content: center; height: 8.5rem; width: 100%; position: relative; z-index: 1; }
.va-win__prize img { max-width: 80%; max-height: 100%; object-fit: contain; filter: drop-shadow(5px 6px 0 rgba(29, 16, 48, .2)); transition: transform .15s steps(3); }
html.dark .va-win__prize img { filter: drop-shadow(0 0 14px rgba(43, 228, 240, .35)); }
.va-win:hover .va-win__prize img { transform: translateY(-4px); }
.va-win__shelf { display: block; align-self: stretch; height: 12px; margin: 0 -14px; background: var(--molding-strip); box-shadow: 0 3px 0 var(--px-edge); }
/* The tear: a perforated line, the notches bitten out at either end */
.va-win__tear {
  position: relative; display: block; height: 16px;
  background:
    radial-gradient(circle at 0 50%, var(--paper) 0 8px, transparent 8.5px) left center / 16px 16px no-repeat,
    radial-gradient(circle at 100% 50%, var(--paper) 0 8px, transparent 8.5px) right center / 16px 16px no-repeat,
    repeating-linear-gradient(90deg, var(--stub-ink) 0 4px, transparent 4px 9px) center / calc(100% - 36px) 2px no-repeat,
    var(--stub);
  opacity: 1;
}
.va-win__stub {
  position: relative;
  background:
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 255, 255, .25) 22px 24px),
    linear-gradient(180deg, var(--stub), var(--stub-2));
  color: var(--stub-ink);
}
.va-win__stub > * { position: relative; }
.va-win__serial { font-family: var(--font-score); font-size: 9px; letter-spacing: .08em; color: var(--stub-ink); opacity: .75; margin-bottom: .6rem; }
.va-win__tag {
  display: inline-flex; align-items: center;
  padding: .26rem .6rem;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #1d1030; background: #ffffff;
  box-shadow: 0 -2px 0 0 #1d1030, 0 2px 0 0 #1d1030, -2px 0 0 0 #1d1030, 2px 0 0 0 #1d1030;
}
.va-win__tag--open { color: #1d1030; background: #ffd23f; }
.va-win__tag--done { color: #ffffff; background: #12763c; }
.va-win__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.25; color: var(--stub-ink); overflow-wrap: anywhere; }
.va-win__stub [style*="color:var(--ink-soft)"] { color: color-mix(in srgb, var(--stub-ink) 72%, transparent) !important; }
.va-win__stub [style*="color:var(--ink)"] { color: var(--stub-ink) !important; }
.va-win__label { padding-top: .6rem; border-top: 2px dashed color-mix(in srgb, var(--stub-ink) 35%, transparent); }
.va-win__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 4vw, 1.4rem); line-height: 1; color: var(--stub-ink); overflow-wrap: normal; white-space: nowrap; }
.va-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .94rem; }
.va-win__cart, .va-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 0; font-weight: 700;
}
.va-win__cart { color: #1d1030; background: #2be4f0; box-shadow: 0 -3px 0 0 #1d1030, 0 3px 0 0 #1d1030, -3px 0 0 0 #1d1030, 3px 0 0 0 #1d1030, 0 6px 0 0 #1d1030; transition: transform .08s steps(2); }
.va-win__cart:hover, .va-win__cart:focus-visible { background: #7af0f7; }
.va-win__cart:active { transform: translateY(3px); }
.va-win__btn-off { color: var(--stub-ink); background: transparent; border: 2px dashed color-mix(in srgb, var(--stub-ink) 40%, transparent); cursor: not-allowed; }
.va-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .94rem; font-weight: 700;
  color: var(--stub-ink); background: rgba(255, 255, 255, .45);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--stub-ink) 30%, transparent);
}
html.dark .va-win__claimed { background: rgba(0, 0, 0, .25); }

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

/* ── The arcade's materials ──
   Every surface beyond the hero and footer is built from these, so a
   panel anywhere in the shop reads as the arcade at a glance:
   - the pixel frame (--frame, --frame-drop, --frame-lift) round cards,
     dialogs and fields, corners stepped off;
   - the cabinet's yellow T-molding (--molding-strip) along the top of
     sheets, and the marquee lamps (.va-band) under titles;
   - the CRT (.va-crt): tube, scanlines and vignette behind a bezel, for
     dark panels, table heads and screens;
   - the four phosphors and cabinet violet (--va-c1…5) for icon tiles and
     rotating accents, each with a soft wash;
   - prize tickets (--ticket-edge) for stubs, chips and the counter tags;
   - sprites (--spr-*) for ticks, list markers and corners, baked per
     mode by functions.php. */
:root {
  /* A ticket's edge: notches bitten out top and bottom every 14px */
  --ticket-notch: radial-gradient(circle at 7px 0, transparent 0 4px, #000 4.5px) 0 0 / 14px 51% repeat-x, radial-gradient(circle at 7px 100%, transparent 0 4px, #000 4.5px) 0 100% / 14px 51% repeat-x;
  /* Icon tiles: a phosphor square in a pixel frame, the sprite's highlight
     in its top corner */
  --tile-lift: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge), 3px 5px 0 0 rgba(29, 16, 48, .2);
  --tile-ink: #ffffff;
}
html.dark {
  --tile-lift: 0 -2px 0 0 var(--px-edge), 0 2px 0 0 var(--px-edge), -2px 0 0 0 var(--px-edge), 2px 0 0 0 var(--px-edge), 0 0 14px -2px rgba(255, 62, 165, .35);
  --tile-ink: #1d1030;
}
/* The CRT: any panel can be a screen */
.va-crt {
  position: relative;
  background: var(--scanlines), var(--tube-glow), linear-gradient(180deg, var(--tube-2), var(--tube));
  color: #f4eeff;
  border-radius: 12px / 18px;
  box-shadow: 0 0 0 8px var(--cab-2), 0 0 0 11px var(--px-edge), inset 0 0 30px rgba(0, 0, 0, .6);
}
.va-phosphor { text-shadow: 0 0 8px currentColor; }
.va-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  background: var(--va-c1); color: var(--tile-ink);
  box-shadow: var(--tile-lift);
}
.va-sheet { position: relative; }
.va-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; z-index: 2; pointer-events: none; background: var(--molding-strip); }

/* ── Micro-interactions ──
   - a token drops into the slot of whatever was bid on or added (the
     coin-drop, assets/js/vintage-arcade.js);
   - the main countdown's digits tick over with a one-frame jump and a
     yellow flash as a minute turns over, and every second through the
     last ten (.va-tick, same script); card countdowns keep still;
   - badges pop in on two frames, like a sprite spawning;
   - the chosen tab carries the menu cursor, blinking;
   - switches are a pixel slider that snaps across in steps.
   All of them settle under reduced motion. */
.va-coin-drop {
  position: fixed; z-index: 2147482000; pointer-events: none;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background: var(--spr-token) center / contain no-repeat;
  image-rendering: pixelated;
  animation: va-coin 0.52s steps(9, end) forwards;
}
@keyframes va-coin {
  0% { transform: translateY(-70px) scaleX(1); opacity: 1; }
  45% { transform: translateY(-34px) scaleX(.35); }
  70% { transform: translateY(-12px) scaleX(1); }
  90% { transform: translateY(0) scaleY(.55); opacity: 1; }
  100% { transform: translateY(6px) scaleY(.1); opacity: 0; }
}
.va-slot-flash { animation: va-slot .42s steps(3) 1; }
@keyframes va-slot { 0%, 100% { filter: none; } 40% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 210, 63, .9)); } }
.va-tick { position: relative; animation: va-tick .32s steps(2) 1; }
@keyframes va-tick { 0% { top: -3px; color: #ffd23f; text-shadow: 0 0 8px rgba(255, 210, 63, .8); } 100% { top: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html body :is(.badge, [class*="-badge"]:not([class*="badge-wrap"]), .va-win__tag) { animation: va-spawn .36s steps(3) both; }
}
@keyframes va-spawn { 0% { transform: scale(.5); opacity: 0; } 66% { transform: scale(1.12); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .va-coin-drop, .va-slot-flash, .va-tick { animation: none !important; }
  .va-coin-drop { display: none; }
  html body *, html body *::before, html body *::after { transition-duration: .01ms !important; }
}

/* ── Game palette (the earn-games arena posts these into each game) ──
   By day a cabinet screen set in cream side art, its pieces climbing the
   phosphors from cyan to a hot magenta; after dark the boards glow on
   black glass. */
:root {
  --game-bg: #fbf3e4;
  --game-surface: #e9def7;
  --game-surface-2: #fffcf6;
  --game-ink: #1d1030;
  --game-muted: #6a5986;
  --game-accent: #dd1580;
  --game-accent-ink: #ffffff;
  --game-good: #168a46;
  --game-bad: #d0204a;
  --game-tile-1: #fff3c4;
  --game-tile-2: #c4f1f6;
  --game-tile-3: #7fe3ee;
  --game-tile-4: #8ce6a6;
  --game-tile-5: #ffd23f;
  --game-tile-6: #ff9a3c;
  --game-tile-7: #ff3ea5;
  --game-tile-8: #6236c0;
  --game-radius: 2px;
  --game-font: 'Pixelify Sans', 'IBM Plex Sans', system-ui, sans-serif;
  --game-font-css: "/assets/themes/vintage-arcade/assets/fonts/fonts.css";
  --game-pattern: var(--carpet-faint);
  --game-arena-screen: #fbf3e4;
  --game-arena-coins: #b98600;
  --game-arena-win: #168a46;
  --game-arena-danger: #d0204a;
}
html.dark {
  --game-bg: #0b0618;
  --game-surface: #1a1030;
  --game-surface-2: #2a1846;
  --game-ink: #f4eeff;
  --game-muted: #a495c6;
  --game-accent: #ff3ea5;
  --game-accent-ink: #1d1030;
  --game-good: #5cf08a;
  --game-bad: #ff6b8a;
  --game-tile-1: #2a1846;
  --game-tile-2: #12475a;
  --game-tile-3: #0e7c8c;
  --game-tile-4: #1f8f4a;
  --game-tile-5: #b38a12;
  --game-tile-6: #c45a12;
  --game-tile-7: #d01a83;
  --game-tile-8: #ffd23f;
  --game-arena-screen: #0b0618;
  --game-arena-coins: #ffd23f;
  --game-arena-win: #5cf08a;
  --game-arena-danger: #ff6b8a;
}

/* ── The INSERT COIN chip in the status strip ── */
.va-strip-chip { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-score); font-size: 9px; letter-spacing: .04em; color: #ffd23f; }
html:is(:lang(el), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) .va-strip-chip { font-size: 11px; font-weight: 700; }
.va-strip-chip__token { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) { .va-strip-chip__text { animation: va-blink 1.2s steps(1) 4; } }
/* The desktop strip shares its line with the menu; the date gives way to
   the chip below 1440px. */
@media (min-width: 1024px) and (max-width: 1439px) { .hdr-strip .va-strip-date { display: none; } }

/* 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: #12763c; --px-warn: #b45309; --px-crit: #d0204a; --px-info: #c20f6e; }
html.dark:root { --px-good: #5cf08a; --px-warn: #fbbf23; --px-crit: #ff94aa; --px-info: #ff8ac9; }

/* Changing language, the scene (vintage-arcade.js): player one's card on the
   cabinet's screen, a coin in the slot and a credit before the reload, then
   player two's card with the new language in a level-up flash. The cabinet
   is the same on both pages, so the reload never shows. */
.va-lang-stage { background: color-mix(in srgb, var(--night) 66%, transparent); }
.va-lang-cab {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 12px 16px 16px;
  color: var(--on-night); background: linear-gradient(180deg, var(--cab-2), var(--cab) 60%);
  box-shadow: 0 -4px 0 0 var(--molding), 0 4px 0 0 var(--molding), -4px 0 0 0 var(--molding), 4px 0 0 0 var(--molding), 10px 14px 0 0 rgba(0, 0, 0, .35);
  /* The pixel face whatever the page's language, so both pages set it alike */
  --va-lang-pix: 'Press Start 2P', 'Pixelify Sans', ui-monospace, monospace;
  font-family: var(--font-ui);
}
.va-lang-marquee {
  display: flex; justify-content: center; gap: 18px; margin-bottom: 12px; padding: 7px 0 9px;
  background: var(--bulbs), linear-gradient(180deg, var(--night-3), var(--night));
  box-shadow: 0 -2px 0 0 var(--cab-edge), 0 2px 0 0 var(--cab-edge), -2px 0 0 0 var(--cab-edge), 2px 0 0 0 var(--cab-edge);
  color: var(--glow-yel); font: 14px/1 var(--va-lang-pix); text-shadow: 0 0 6px rgba(255, 210, 63, .7);
}
.va-lang-screen {
  position: relative; display: grid; place-items: center; min-height: 170px; padding: 22px 18px; box-sizing: border-box;
  background: var(--tube-glow), var(--tube); border-radius: 18px / 14px;
  box-shadow: inset 0 0 0 5px var(--cab-edge), inset 0 0 30px rgba(0, 0, 0, .65);
}
.va-lang-screen::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--scanlines); opacity: .6; pointer-events: none;
}
.va-lang-card, .va-lang-credit { grid-area: 1 / 1; }
.va-lang-card {
  --va-lang-c: var(--glow-cyan);
  display: grid; justify-items: center; gap: 8px; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 18px 14px;
  text-align: center; background: rgba(255, 255, 255, .04);
  box-shadow: 0 -3px 0 0 var(--va-lang-c), 0 3px 0 0 var(--va-lang-c), -3px 0 0 0 var(--va-lang-c), 3px 0 0 0 var(--va-lang-c), 0 0 18px -2px var(--va-lang-c);
}
.va-lang-p2 { --va-lang-c: var(--glow-mag); opacity: 0; transform: translateX(28px); }
.va-lang-player {
  padding: 4px 6px 3px; background: var(--va-lang-c); color: var(--tube);
  font: 11px/1 var(--va-lang-pix);
}
.va-lang-code { font: clamp(24px, 8vw, 36px)/1 var(--va-lang-pix); color: var(--va-lang-c); text-shadow: 0 0 10px var(--va-lang-c); }
.va-lang-who { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.va-lang-flag { width: 20px; height: 20px; object-fit: cover; image-rendering: pixelated; box-shadow: 0 0 0 2px var(--cab-edge); }
.va-lang-name { font: 700 clamp(14px, 4vw, 17px)/1.2 var(--font-ui); color: var(--on-night); overflow-wrap: anywhere; min-width: 0; }
.va-lang-credit {
  display: inline-flex; align-items: center; gap: 10px; opacity: 0;
  color: var(--glow-yel); font: 18px/1 var(--va-lang-pix); text-shadow: 0 0 8px rgba(255, 210, 63, .6);
}
.va-lang-token, .va-lang-coin {
  display: block; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 4px, #c99a10 4.5px 5.5px, transparent 6px), radial-gradient(circle at 35% 30%, #fff2a8, #ffd23f 50%, #c99a10);
  box-shadow: 0 0 0 2px #7a5c00;
}
.va-lang-flash { position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; pointer-events: none; }
.va-lang-star {
  position: absolute; top: 50%; left: 50%; width: 20px; margin: -10px 0 0 -10px; text-align: center; opacity: 0;
  font-style: normal; font-size: 18px; line-height: 20px; color: var(--glow-yel); text-shadow: 0 0 8px rgba(255, 210, 63, .8);
  --va-lang-x: -110px; --va-lang-y: -46px;
}
.va-lang-star:nth-of-type(2) { --va-lang-x: 110px; --va-lang-y: -40px; color: var(--glow-cyan); }
.va-lang-star:nth-of-type(3) { --va-lang-x: -96px; --va-lang-y: 50px; color: var(--glow-grn); }
.va-lang-star:nth-of-type(4) { --va-lang-x: 100px; --va-lang-y: 52px; color: var(--glow-mag); }
.va-lang-panel { display: flex; align-items: center; gap: 14px; padding: 16px 6px 0; }
.va-lang-stick { position: relative; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9bd0, var(--glow-mag) 55%, #9b0c58); }
.va-lang-stick::after { content: ''; position: absolute; left: 6px; top: 14px; width: 4px; height: 10px; background: var(--cab-edge); }
.va-lang-btn { width: 18px; height: 18px; border-radius: 50%; background: var(--glow-cyan); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3), 0 2px 0 var(--cab-edge); }
.va-lang-btn + .va-lang-btn { background: var(--glow-yel); }
.va-lang-slot {
  position: relative; width: 30px; height: 40px; margin-inline-start: auto; background: var(--cab-edge); border-radius: 3px;
  box-shadow: inset 0 0 0 2px var(--cab-hi);
}
.va-lang-slot::before { content: ''; position: absolute; left: 13px; top: 9px; width: 4px; height: 22px; background: #000; }
.va-lang-coin { position: absolute; left: 4px; top: 9px; opacity: 0; }

/* Out: the cabinet comes up, a coin goes in, player one steps off for a credit. */
.px-lang-stage-out .va-lang-cab { animation: va-lang-cab-in .32s steps(6, end) both; }
.px-lang-stage-out .va-lang-coin { animation: va-lang-coin .46s ease-in .16s both; }
.px-lang-stage-out .va-lang-slot { animation: va-lang-slot .12s steps(2, end) .58s both; }
.px-lang-stage-out .va-lang-p1 { animation: va-lang-p1-off .22s steps(4, end) .58s both; }
.px-lang-stage-out .va-lang-credit { animation: va-lang-credit .2s steps(2, end) .66s both; }
/* In: it starts where out ended; player two comes on and levels up. */
.px-lang-stage-in .va-lang-slot { box-shadow: inset 0 0 0 2px var(--glow-yel), 0 0 12px rgba(255, 210, 63, .7); }
.px-lang-stage-in .va-lang-p1 { opacity: 0; transform: translateX(-28px); }
.px-lang-stage-in .va-lang-credit { animation: va-lang-credit-off .12s steps(2, end) .22s both; }
.px-lang-stage-in .va-lang-p2 { animation: va-lang-p2-on .24s steps(4, end) .3s both; }
.px-lang-stage-in .va-lang-flash { animation: va-lang-flash .36s ease-out .5s both; }
.px-lang-stage-in .va-lang-p2 .va-lang-code { animation: va-lang-level .4s steps(4, end) .52s both; }
.px-lang-stage-in .va-lang-star { animation: va-lang-star .5s ease-out .52s both; }
.px-lang-stage-in .va-lang-cab { animation: va-lang-cab-out .26s steps(5, end) 1s both; }
@keyframes va-lang-cab-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes va-lang-cab-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes va-lang-coin {
  0%   { opacity: 0; transform: translateY(-48px); }
  15%  { opacity: 1; transform: translateY(-48px); }
  75%  { opacity: 1; transform: translateY(-2px) scaleX(.3); }
  100% { opacity: 0; transform: none; }
}
@keyframes va-lang-slot { to { box-shadow: inset 0 0 0 2px var(--glow-yel), 0 0 12px rgba(255, 210, 63, .7); } }
@keyframes va-lang-p1-off { to { opacity: 0; transform: translateX(-28px); } }
@keyframes va-lang-credit { 0% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: .2; } 100% { opacity: 1; } }
@keyframes va-lang-credit-off { from { opacity: 1; } to { opacity: 0; } }
@keyframes va-lang-p2-on { to { opacity: 1; transform: none; } }
@keyframes va-lang-flash { 0% { opacity: 0; } 25% { opacity: .85; } 100% { opacity: 0; } }
@keyframes va-lang-level { 50% { color: var(--glow-yel); transform: scale(1.18); } }
@keyframes va-lang-star {
  0%   { opacity: 0; transform: scale(.4); }
  10%  { opacity: 1; transform: scale(.5); }
  100% { opacity: 0; transform: translate(var(--va-lang-x), var(--va-lang-y)) scale(1.3); }
}
@media (max-width: 460px) {
  .va-lang-cab { padding: 10px 10px 14px; }
  .va-lang-screen { padding: 18px 12px; min-height: 150px; }
  .va-lang-card { padding: 10px 12px 12px; }
  .va-lang-star { --va-lang-x: -78px; }
  .va-lang-star:nth-of-type(2) { --va-lang-x: 78px; }
  .va-lang-star:nth-of-type(3) { --va-lang-x: -70px; }
  .va-lang-star:nth-of-type(4) { --va-lang-x: 72px; }
}

/* 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 over 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: 55%; }
  html body div.flex.justify-between:has(> div h2.text-fit):has(> a) > a { flex: 0 1 auto; max-width: 45%; 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.15rem, 6vw, 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; }

/* Phone strip: the language button shows the language's own name, which can
   be long (Português (Brasil), Bahasa Indonesia). Tighter gaps make room, a
   long name is capped, and the strip chip gives way with an ellipsis instead
   of running under the toggles. */
@media (max-width: 1023.98px) {
  .hdr-strip { column-gap: .5rem; }
  .hdr-strip > .ed-status:last-child { column-gap: .625rem; }
  .hdr-strip [data-px-call="openLangSheet"] > span[lang] { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; }
  .hdr-strip > .ed-status:first-child { overflow-x: clip; }
  .hdr-strip > .ed-status:first-child > *, .hdr-strip > .ed-status:first-child > * > :not([aria-hidden], svg, img, i) { min-width: 0; }
  .hdr-strip > .ed-status:first-child > * > :is([aria-hidden], svg, img, i) { flex-shrink: 0; }
  .hdr-strip > .ed-status:first-child > * > :is(span, bdi):not([aria-hidden]), .hdr-strip > .ed-status:first-child bdi { overflow: hidden; text-overflow: ellipsis; }
}

/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
   so the secondary text, accent links and buttons in them take the deeper
   shades below to read at 4.5:1 there; the page around keeps its own. */
html:not(.dark) [role="dialog"] {
  --theme-500: #d2147a;
}
html body [role="dialog"] .amount-btn:is(.active, .selected, [aria-pressed="true"]) {
  background: linear-gradient(180deg, #ff9fd0 0 18%, #c8307f 19% 78%, #b80f6a 79%) !important;
}
/* rev 868fe5109c9f2a2b */