/* ============================================================
   TICKET KIOSK THEME — the ticket kiosk on the street corner.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the kiosk and what it sells: a painted green kiosk
   under a striped awning with a scalloped edge, newsprint and
   ticket-roll cream, perforations and punch holes, serials in
   typewriter mono, rubber stamps in red and blue ink, and a felt
   letter board. The border language is the printed ticket: a
   hairline of press ink, a perforated tear line before the stub,
   notches bitten out of its ends, and a shadow where paper lifts
   off the counter. By day newsprint under a cream sky; after
   dark the kiosk at night, the street blue-black and a warm lamp
   inside.

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

:root {
  --font-ui:      'Schibsted Grotesk', system-ui, 'Segoe UI', 'Noto Sans', sans-serif;
  /* The poster face of the boards and bills */
  --font-display: 'League Gothic', 'Arial Narrow', 'Roboto Condensed', 'Schibsted Grotesk', sans-serif-condensed, sans-serif;
  /* The ticket printer: serials, numbers, slips and receipts */
  --font-mono:    'Courier Prime', 'Courier New', ui-monospace, monospace;

  --paper:        #f4ecda;
  --paper-2:      #fffaf0;
  --paper-3:      #ebdfc4;
  --ink:          #1f2420;
  --ink-2:        #3b413b;
  --ink-soft:     #625f50;
  --rule:         rgba(31, 36, 32, 0.2);
  --rule-soft:    rgba(31, 36, 32, 0.09);
  --radius:       4px;
  --radius-sm:    2px;
  --shadow:       0 1px 0 rgba(31, 36, 32, .08), 0 10px 18px -12px rgba(31, 36, 32, .42);
  --shadow-md:    0 1px 0 rgba(31, 36, 32, .1), 0 18px 30px -16px rgba(31, 36, 32, .5);

  /* Kiosk green */
  --theme-50:  #eef6f1;
  --theme-100: #d4eadf;
  --theme-200: #a9d3bf;
  --theme-300: #74b495;
  --theme-400: #3f9474;
  --theme-500: #2a7a5e;
  --theme-600: #1d5c47;
  --theme-700: #164a39;
  --theme-800: #123a2d;
  --theme-900: #0c2a20;
  --theme-500-rgb: 42, 122, 94;
  --theme-600-rgb: 29, 92, 71;
  --theme-600-ink: #ffffff;

  /* The kiosk's inks, each with a soft wash. --tkk-c1…5 rotate through
     them: kiosk green, ticket yellow, stamp red, stamp blue, ticket orange. */
  --tkk-green: #1d5c47; --tkk-yellow: #b07c00; --tkk-red: #c42c3a; --tkk-blue: #2552a8; --tkk-orange: #c4500f;
  --tkk-green-soft: rgba(29, 92, 71, .1); --tkk-yellow-soft: rgba(255, 201, 60, .26); --tkk-red-soft: rgba(196, 44, 58, .09);
  --tkk-blue-soft: rgba(37, 82, 168, .09); --tkk-orange-soft: rgba(240, 102, 28, .11);
  --tkk-c1: var(--tkk-green); --tkk-c2: var(--tkk-yellow); --tkk-c3: var(--tkk-red); --tkk-c4: var(--tkk-blue); --tkk-c5: var(--tkk-orange);
  /* Paper colours of the ticket rolls (fills, not inks) */
  --roll-yellow: #ffc93c; --roll-yellow-2: #ffe08a; --roll-pink: #ffb3b8; --roll-blue: #b8cff5; --roll-green: #bfe3cf; --roll-orange: #ffb27e;
  /* The kiosk itself, the same by day and by night */
  --kiosk:      #1d5c47;
  --kiosk-2:    #2a7a5e;
  --kiosk-deep: #123a2d;
  --kiosk-hi:   #4c9d7c;
  --awning-a:   #1d5c47;
  --awning-b:   #fbf3e2;
  --stamp-red:  #c42c3a;
  --stamp-blue: #2552a8;
  --lamp:       #ffbf5a;
  --felt:       #1b2026;
  --felt-2:     #262c33;

  /* Drawings (includes/art.php) */
  --art-ink: #1f2420; --art-paper: #fffaf0; --art-paper2: #f1e6cc; --art-green: #1d5c47; --art-green2: #2a7a5e;
  --art-yellow: #ffc93c; --art-orange: #f0661c; --art-red: #c42c3a; --art-blue: #2552a8; --art-glass: #dcebe2; --art-lamp: #ffe7a6;

  /* The street at night, under the footer, splash, error scenes and the
     login panel in both modes */
  --night:   #0f151c;
  --night-2: #17202a;
  --night-3: #212c37;
  --on-night: #f3ead6;
  --on-night-soft: rgba(243, 234, 214, .76);

  /* Names other themes' shared markup reaches for */
  --gold:       #b07c00;
  --gold-2:     #ffc93c;
  --gold-soft:  rgba(29, 92, 71, 0.08);
  --gold-ink:   #1f2420;
  --peacock:    #2552a8;
  --peacock-soft: rgba(37, 82, 168, 0.1);
  --red:        #c42c3a;
  --red-soft:   rgba(196, 44, 58, 0.09);
  --rose:       #c42c3a;
  --rose-soft:  rgba(196, 44, 58, 0.08);
  --on-felt:    #f3ead6;
  --on-felt-soft: rgba(243, 234, 214, .78);

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

  /* Buttons: a ticket off the yellow roll, printed in press ink with its
     stub torn along a perforation; it stands on its own printed shadow
     and pressed, it goes down flat like a stamp on the counter */
  --btn-bg:       #ffc93c;
  --btn-bg-hover: #ffd667;
  --btn-ink:      #1f2420;
  --btn-edge:     #1f2420;
  --btn-shadow:      3px 3px 0 0 var(--btn-edge);
  --btn-shadow-hover: 5px 5px 0 0 var(--btn-edge);
  --btn-shadow-down: 0 0 0 0 var(--btn-edge);
  --btn-perf: repeating-linear-gradient(180deg, rgba(31, 36, 32, .6) 0 3px, transparent 3px 6px);

  /* The ticket's edge: press-ink hairline, a sheet's lift off the counter */
  --edge: #1f2420;
  --card-line: 0 0 0 1.5px var(--edge);
  --card-drop: 0 0 0 1.5px var(--edge), 0 12px 20px -14px rgba(31, 36, 32, .55);
  --card-lift: 0 0 0 1.5px var(--edge), 0 22px 30px -16px rgba(31, 36, 32, .55);
  /* A row of punched holes along a ticket's top, the colour of what's behind */
  --punch-row: radial-gradient(circle at 7px 7px, var(--paper) 0 2.6px, rgba(31, 36, 32, .5) 2.7px 3.3px, transparent 3.5px) 0 0 / 14px 14px repeat-x;
  /* A tear line: dashes in press ink */
  --perf-x: repeating-linear-gradient(90deg, rgba(31, 36, 32, .55) 0 5px, transparent 5px 9px);
  --perf-y: repeating-linear-gradient(180deg, rgba(31, 36, 32, .55) 0 5px, transparent 5px 9px);
  /* The awning: green and cream canvas in stripes over a scalloped edge */
  --awning:
    radial-gradient(circle at 12px 0, var(--awning-a) 0 11.5px, transparent 12px) 0 14px / 48px 12px repeat-x,
    radial-gradient(circle at 36px 0, var(--awning-b) 0 11.5px, transparent 12px) 0 14px / 48px 12px repeat-x,
    linear-gradient(180deg, rgba(0, 0, 0, .12), transparent 70%) 0 0 / 100% 14px no-repeat,
    linear-gradient(90deg, var(--awning-a) 0 24px, var(--awning-b) 24px 48px) 0 0 / 48px 14px repeat-x;
  /* Newsprint: a halftone screen so faint it reads as paper tooth */
  --newsprint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='%231f2420' fill-opacity='.045'><circle cx='10' cy='12' r='1'/><circle cx='52' cy='30' r='.8'/><circle cx='96' cy='8' r='1.1'/><circle cx='140' cy='44' r='.9'/><circle cx='24' cy='78' r='.8'/><circle cx='76' cy='92' r='1.2'/><circle cx='120' cy='110' r='.9'/><circle cx='12' cy='138' r='1'/><circle cx='64' cy='150' r='.8'/><circle cx='150' cy='146' r='1'/></g><g stroke='%231f2420' stroke-opacity='.05' stroke-width='.7' fill='none'><path d='M30 50q6-3 12 1'/><path d='M104 64q5 4 11 2'/><path d='M44 118q7-2 13 2'/><path d='M128 20q4 5 9 4'/></g></svg>");

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

/* After dark: the kiosk at night, the street blue-black under its lamp */
html.dark {
  --paper:        #0f151c;
  --paper-2:      #18212a;
  --paper-3:      #222d38;
  --ink:          #f3ead6;
  --ink-2:        #ddd3bd;
  --ink-soft:     #a8a493;
  --rule:         rgba(243, 234, 214, 0.18);
  --rule-soft:    rgba(243, 234, 214, 0.08);
  --shadow:       0 1px 0 rgba(0, 0, 0, .4), 0 12px 22px -12px rgba(0, 0, 0, .8);
  --shadow-md:    0 1px 0 rgba(0, 0, 0, .4), 0 20px 34px -16px rgba(0, 0, 0, .85);

  --theme-50:  #0f241c;
  --theme-100: #143126;
  --theme-200: #1d4a3a;
  --theme-300: #8fd6b6;
  --theme-400: #6cc8a1;
  --theme-500: #4cb48c;
  --theme-600: #5cc29a;
  --theme-700: #84d2b2;
  --theme-800: #b4e6d0;
  --theme-900: #e1f5ec;
  --theme-500-rgb: 76, 180, 140;
  --theme-600-rgb: 92, 194, 154;
  --theme-600-ink: #0f151c;

  --tkk-green: #5cc29a; --tkk-yellow: #ffd25a; --tkk-red: #ff7a7a; --tkk-blue: #93b2ff; --tkk-orange: #ff9a5c;
  --tkk-green-soft: rgba(92, 194, 154, .12); --tkk-yellow-soft: rgba(255, 210, 90, .13); --tkk-red-soft: rgba(255, 122, 122, .12);
  --tkk-blue-soft: rgba(147, 178, 255, .12); --tkk-orange-soft: rgba(255, 154, 92, .12);

  --stamp-red:  #ff7272;
  --stamp-blue: #93b2ff;

  --art-ink: #f3ead6; --art-paper: #25303b; --art-paper2: #1b242e; --art-green: #2f8a68; --art-green2: #4cb48c;
  --art-yellow: #ffd25a; --art-orange: #ff8a45; --art-red: #ff7272; --art-blue: #93b2ff; --art-glass: #2a3a33; --art-lamp: #ffbf5a;

  --gold:       #ffd25a;
  --gold-2:     #ffe08a;
  --gold-soft:  rgba(92, 194, 154, 0.12);
  --gold-ink:   #1f2420;
  --peacock:    #93b2ff;
  --peacock-soft: rgba(147, 178, 255, 0.12);
  --red:        #ff7a7a;
  --red-soft:   rgba(255, 122, 122, 0.13);
  --rose:       #ff7a7a;
  --rose-soft:  rgba(255, 122, 122, 0.12);

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

  --btn-bg:       #ffd25a;
  --btn-bg-hover: #ffdf85;
  --btn-ink:      #1f2420;
  --btn-edge:     #05080b;
  --btn-perf: repeating-linear-gradient(180deg, rgba(31, 36, 32, .6) 0 3px, transparent 3px 6px);

  --edge: rgba(243, 234, 214, .3);
  --card-line: 0 0 0 1.5px var(--edge);
  --card-drop: 0 0 0 1.5px var(--edge), 0 14px 24px -14px rgba(0, 0, 0, .85);
  --card-lift: 0 0 0 1.5px rgba(255, 191, 90, .55), 0 24px 34px -16px rgba(0, 0, 0, .9), 0 0 30px -12px rgba(255, 191, 90, .4);
  --punch-row: radial-gradient(circle at 7px 7px, var(--paper) 0 2.6px, rgba(243, 234, 214, .4) 2.7px 3.3px, transparent 3.5px) 0 0 / 14px 14px repeat-x;
  --perf-x: repeating-linear-gradient(90deg, rgba(243, 234, 214, .45) 0 5px, transparent 5px 9px);
  --perf-y: repeating-linear-gradient(180deg, rgba(243, 234, 214, .45) 0 5px, transparent 5px 9px);
  --awning-a: #1d5c47;
  --awning-b: #d9cfb6;
  --newsprint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='%23f3ead6' fill-opacity='.035'><circle cx='10' cy='12' r='1'/><circle cx='52' cy='30' r='.8'/><circle cx='96' cy='8' r='1.1'/><circle cx='140' cy='44' r='.9'/><circle cx='24' cy='78' r='.8'/><circle cx='76' cy='92' r='1.2'/><circle cx='120' cy='110' r='.9'/><circle cx='12' cy='138' r='1'/><circle cx='64' cy='150' r='.8'/><circle cx='150' cy='146' r='1'/></g></svg>");
  --page-bg:
    radial-gradient(900px 420px at 82% -180px, rgba(255, 191, 90, 0.1), transparent 70%) no-repeat,
    radial-gradient(700px 360px at 8% -160px, rgba(92, 194, 154, 0.07), transparent 70%) no-repeat,
    var(--newsprint) repeat,
    var(--paper);
}

/* League Gothic and Courier Prime carry Latin only; Greek, Cyrillic,
   Vietnamese, Arabic, Bengali and Chinese pages set boards and serials in
   the text face whole, rather than a poster word with a system letter in
   the middle of it. */
html:is(:lang(el), :lang(ru), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) {
  --font-display: var(--font-ui);
  --font-mono: 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: 400;
  letter-spacing: .01em;
  font-variant-numeric: lining-nums;
}
html:is(:lang(el), :lang(ru), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) .font-display { font-weight: 800; letter-spacing: 0; }
.display-italic { font-style: normal; color: var(--theme-600); }
/* Figures in tabular columns read better in the text face. */
html .font-display.tabular-nums, html .font-display[class*="tabular"] { font-family: var(--font-ui); font-weight: 700; letter-spacing: 0; }
html .font-mono { font-family: var(--font-mono); }

::selection { background: #ffc93c; color: #1f2420; }

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

/* The rubber stamp: a label pressed on in red or blue ink, slightly
   askew, the ink a touch uneven. Eyebrows and section caps wear it. */
:root {
  --ink-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='40'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.5 1.72'/></filter><rect width='90' height='40' filter='url(%23g)'/></svg>");
}
.tkk-stamp, html .section-eyebrow {
  --stamp: var(--stamp-blue);
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .2rem .55rem .15rem;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--stamp);
  border: 2px solid var(--stamp);
  border-radius: 3px;
  transform: rotate(-1.5deg);
  -webkit-mask: var(--ink-grain) 0 0 / 90px 40px; mask: var(--ink-grain) 0 0 / 90px 40px;
}
.tkk-stamp--red { --stamp: var(--stamp-red); }
html:is(:lang(el), :lang(ru), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) :is(.tkk-stamp, .section-eyebrow) { letter-spacing: 0; font-size: 12.5px; }
[dir="rtl"] :is(.tkk-stamp, .section-eyebrow) { transform: rotate(1.5deg); }

.ed-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700; line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--theme-600);
}
.ed-eyebrow-tight { font-size: 10px !important; letter-spacing: .02em !important; white-space: nowrap !important; }

html .section-eyebrow { margin-bottom: 0.85rem; }

.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: .34rem .75rem .34rem .9rem;
  background: var(--btn-perf) .42rem 50% / 1.5px 64% no-repeat, var(--paper-2);
  border-radius: 3px;
  box-shadow: var(--card-line);
  text-decoration: none;
  transition: gap 0.18s ease, background-color .15s ease;
}
[dir="rtl"] .btn-view-all { padding: .34rem .9rem .34rem .75rem; background-position: right .42rem center, 0 0; }
.btn-view-all:hover, .btn-view-all:focus-visible { gap: 0.75rem; background-color: var(--tkk-yellow-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(--newsprint); }

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

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

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

.hdr-strip, .hdr-strip .ed-status { color: rgba(243, 234, 214, 0.88); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffc93c; }

/* The awning: under the header, along the top of sheets and in the hero.
   Static by day; nothing in it moves. */
.tkk-awning {
  display: block;
  height: 26px;
  background: var(--awning);
  filter: drop-shadow(0 4px 3px rgba(31, 36, 32, .18));
  pointer-events: none;
}
html.dark .tkk-awning { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5)); }
[dir="rtl"] .tkk-awning { transform: scaleX(-1); }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1.5px solid var(--edge); }
.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-mono); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--theme-600); white-space: nowrap;
  padding-right: 1.25rem; border-right: 0;
  background: var(--perf-y) right center / 1.5px 100% no-repeat;
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; background-position: left center; }
.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: 3px;
  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 0 0 1.5px var(--btn-edge), 2px 2px 0 0 var(--btn-edge); }
.ed-subnav-item:focus-visible { outline: 2px dashed var(--theme-600); 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: 3px;
  background: var(--perf-x) 0 100% / 100% 2px no-repeat;
  transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; color: var(--theme-600); }

/* The ticket button: yellow roll paper in a press-ink hairline, its stub
   torn along a perforation at the leading end, standing on its printed
   shadow. Hover lifts it off the counter; pressed, it goes down flat, 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.74rem 1.35rem 0.74rem 1.75rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 1.02rem; font-weight: 800; letter-spacing: .01em;
  color: var(--btn-ink);
  background: var(--btn-perf) .78rem 50% / 1.5px 62% no-repeat, var(--btn-bg);
  border: 1.5px solid var(--btn-edge);
  border-radius: 3px;
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
[dir="rtl"] :is(.ed-btn-primary, .ed-plan-cta, .drawer-login) { padding: 0.74rem 1.75rem 0.74rem 1.35rem; background-position: right .78rem center, 0 0; }
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-color: var(--btn-bg-hover); color: var(--btn-ink);
  transform: translate(-1px, -1px); box-shadow: var(--btn-shadow-hover);
}
html .ed-btn-primary:active, html .ed-plan-cta:active, html .drawer-login:active { transform: translate(3px, 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-perf) .78rem 50% / 1.5px 62% no-repeat, var(--btn-bg); color: var(--btn-ink); border: 1.5px solid var(--btn-edge); 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-600); outline-offset: 6px; }

/* The second button is a cream ticket printed in kiosk green */
.ed-btn-secondary {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.72rem 1.25rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 700;
  color: var(--theme-600); background: var(--paper-2);
  border: 1.5px solid var(--theme-600); border-radius: 3px;
  box-shadow: 3px 3px 0 0 var(--theme-600);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color .12s ease;
}
.ed-btn-secondary:hover, .ed-btn-secondary:focus-visible { background: var(--tkk-green-soft); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--theme-600); }
.ed-btn-secondary:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--theme-600); }
html.dark .ed-btn-secondary { color: var(--theme-700); border-color: var(--theme-500); background: var(--paper-2); box-shadow: 3px 3px 0 0 var(--theme-500); }
:is([data-bnr-layout="cover"], [data-bnr-layout="product"]) .ed-btn-primary { color: var(--btn-ink); }

/* The same two tickets for the theme's own markup (plugin overrides) */
html body .tkk-btn-ticket {
  font-family: var(--font-ui); font-weight: 800; font-size: 1rem; letter-spacing: .01em;
  color: var(--btn-ink); background: var(--btn-perf) .78rem 50% / 1.5px 62% no-repeat, var(--btn-bg);
  border: 1.5px solid var(--btn-edge); border-radius: 3px; box-shadow: var(--btn-shadow);
  padding-inline: 1.75rem 1.35rem;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
html body .tkk-btn-ticket:dir(rtl) { background-position: right .78rem center, 0 0; }
html body .tkk-btn-ticket:hover, html body .tkk-btn-ticket:focus-visible { background-color: var(--btn-bg-hover); transform: translate(-1px, -1px); box-shadow: var(--btn-shadow-hover); color: var(--btn-ink); }
html body .tkk-btn-ticket:active { transform: translate(3px, 3px); box-shadow: var(--btn-shadow-down); }
html body .tkk-btn-ticket:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
html body .tkk-btn-ticket__price { font-weight: 600; font-size: .86em; opacity: .78; }
html body .tkk-btn-green {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .62rem 1.15rem; font-family: var(--font-ui); font-weight: 700; font-size: .95rem;
  color: var(--theme-600); background: var(--paper-2);
  border: 1.5px solid var(--theme-600); border-radius: 3px; box-shadow: 3px 3px 0 0 var(--theme-600);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
html body .tkk-btn-green:hover, html body .tkk-btn-green:focus-visible { background: var(--tkk-green-soft); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--theme-600); }
html body .tkk-btn-green:active { transform: translate(3px, 3px); box-shadow: none; }
.tkk-stamp--green { --stamp: var(--theme-600); }

/* ── Cards: printed on ticket-roll cream in a press-ink hairline, a row of
   punch holes along the top; hovered or focused, a card lifts off the
   string and tilts a hair ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 0;
  border-radius: 3px;
  box-shadow: var(--card-drop);
  transition: transform 0.2s cubic-bezier(.3, 1.4, .5, 1), box-shadow 0.2s ease;
}
html .ed-plan:hover, html .shop-card:hover, html .ed-plan:focus-within, html .shop-card:focus-within { transform: translateY(-3px) rotate(-.5deg); box-shadow: var(--card-lift); }
html .ed-plan-featured {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 40%), var(--kiosk);
  color: #f3ead6;
  border: 0; border-radius: 3px;
  box-shadow: 0 0 0 1.5px #0c2a20, 0 14px 26px -14px rgba(18, 58, 45, .7);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: var(--awning); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(243, 234, 214, .22); }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); }
.ed-topnav-link { color: rgba(243, 234, 214, 0.9); text-decoration: none; transition: color 0.12s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffc93c; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--theme-600); padding: 1.2rem 1.5rem 0.45rem;
}
html:is(:lang(el), :lang(ru), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) .drawer-section-label { font-size: 12px; letter-spacing: 0; }
.drawer-section-label::after { content: ''; flex: 1; height: 2px; background: var(--perf-x); }
.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-600); }
[dir="rtl"] .drawer-nav-row:hover, [dir="rtl"] .drawer-nav-row:focus-visible { box-shadow: inset -4px 0 0 var(--theme-600); }
.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: 3px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700;
  color: var(--stamp-red); border: 2px solid var(--stamp-red); text-decoration: none;
}
.drawer-logout:hover { background: var(--tkk-red-soft); }

.mobile-glass-header {
  background: rgba(244, 236, 218, 0.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1.5px solid var(--edge);
}
html.dark .mobile-glass-header { background: rgba(15, 21, 28, 0.96); border-bottom-color: rgba(243, 234, 214, .16); }

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

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

.ed-dropdown {
  background: var(--paper-2);
  border: 0; border-radius: 3px;
  box-shadow: var(--card-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-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--theme-600); padding: 0.95rem 1rem 0.45rem;
}

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

/* ── Dark/light toggle: a ticket is printed over the page and torn away ──
   assets/js/ticket-kiosk.js registers it. A printer's slot opens along the
   top of the screen and a ticket the size of the page feeds down out of
   it, its serials printed as it comes; once it covers everything a round
   rubber stamp comes down in the middle with the sun or the moon, and
   under the solid paper the mode flips. Then the ticket tears along its
   perforation across the middle and the halves fall away. The paper and
   ink are fixed per run (copied in by the script), so nothing on the
   cover changes at the flip. */
.px-fx--tkk-tear { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--tkk-tear .tkk-fx-slot {
  position: absolute; left: 0; right: 0; top: 0; height: 16px; z-index: 3;
  background: linear-gradient(180deg, #123a2d 0 10px, #05080b 10px 13px, #123a2d 13px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
  transform: translateY(-100%);
  transition: transform .14s ease-out;
}
.px-fx--tkk-tear .tkk-fx-sheet {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 1;
  transform: translateY(-101%);
}
.px-fx--tkk-tear .tkk-fx-half {
  position: absolute; left: -2%; right: -2%;
  background-color: var(--fx-paper);
  background-image: var(--fx-print);
}
/* The two halves meet along a zigzag that overlaps, so no seam shows */
.px-fx--tkk-tear .tkk-fx-half--t { top: 0; height: calc(50% + 10px); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 97.5% 100%, 95% calc(100% - 10px), 92.5% 100%, 90% calc(100% - 10px), 87.5% 100%, 85% calc(100% - 10px), 82.5% 100%, 80% calc(100% - 10px), 77.5% 100%, 75% calc(100% - 10px), 72.5% 100%, 70% calc(100% - 10px), 67.5% 100%, 65% calc(100% - 10px), 62.5% 100%, 60% calc(100% - 10px), 57.5% 100%, 55% calc(100% - 10px), 52.5% 100%, 50% calc(100% - 10px), 47.5% 100%, 45% calc(100% - 10px), 42.5% 100%, 40% calc(100% - 10px), 37.5% 100%, 35% calc(100% - 10px), 32.5% 100%, 30% calc(100% - 10px), 27.5% 100%, 25% calc(100% - 10px), 22.5% 100%, 20% calc(100% - 10px), 17.5% 100%, 15% calc(100% - 10px), 12.5% 100%, 10% calc(100% - 10px), 7.5% 100%, 5% calc(100% - 10px), 2.5% 100%, 0 calc(100% - 10px)); }
.px-fx--tkk-tear .tkk-fx-half--b { bottom: 0; height: calc(50% + 10px); background-position: 0 calc(-50vh + 10px); clip-path: polygon(0 10px, 2.5% 0, 5% 10px, 7.5% 0, 10% 10px, 12.5% 0, 15% 10px, 17.5% 0, 20% 10px, 22.5% 0, 25% 10px, 27.5% 0, 30% 10px, 32.5% 0, 35% 10px, 37.5% 0, 40% 10px, 42.5% 0, 45% 10px, 47.5% 0, 50% 10px, 52.5% 0, 55% 10px, 57.5% 0, 60% 10px, 62.5% 0, 65% 10px, 67.5% 0, 70% 10px, 72.5% 0, 75% 10px, 77.5% 0, 80% 10px, 82.5% 0, 85% 10px, 87.5% 0, 90% 10px, 92.5% 0, 95% 10px, 97.5% 0, 100% 10px, 100% 100%, 0 100%); }
.px-fx--tkk-tear .tkk-fx-perf {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 2;
  background: repeating-linear-gradient(90deg, var(--fx-ink) 0 10px, transparent 10px 18px);
  opacity: .5;
}
.px-fx--tkk-tear .tkk-fx-stamp {
  position: absolute; left: 50%; top: 50%; z-index: 4;
  width: min(42vmin, 260px); height: min(42vmin, 260px);
  margin: calc(min(42vmin, 260px) / -2) 0 0 calc(min(42vmin, 260px) / -2);
  color: var(--fx-stamp);
  opacity: 0; transform: scale(1.9) rotate(-18deg);
}
.px-fx--tkk-tear .tkk-fx-stamp svg { width: 100%; height: 100%; display: block; }
.px-fx--tkk-tear.is-slot .tkk-fx-slot { transform: none; }
.px-fx--tkk-tear.is-feed .tkk-fx-sheet { transform: none; transition: transform .46s cubic-bezier(.45, 0, .3, 1); }
.px-fx--tkk-tear.is-stamp .tkk-fx-stamp { opacity: .92; transform: scale(1) rotate(-9deg); transition: transform .16s cubic-bezier(.6, 0, .9, .5), opacity .08s linear; }
.px-fx--tkk-tear.is-tear .tkk-fx-slot { transform: translateY(-100%); transition: transform .2s ease-in; }
.px-fx--tkk-tear.is-tear .tkk-fx-perf { opacity: 0; transition: opacity .1s; }
.px-fx--tkk-tear.is-tear .tkk-fx-half--t { transform: translate(-3%, -112%) rotate(-5deg); transition: transform .5s cubic-bezier(.55, 0, .75, .4); }
.px-fx--tkk-tear.is-tear .tkk-fx-half--b { transform: translate(4%, 115%) rotate(6deg); transition: transform .55s cubic-bezier(.55, 0, .75, .4) .04s; }
.px-fx--tkk-tear.is-tear .tkk-fx-stamp { transform: translate(-4%, -150%) rotate(-14deg); opacity: 0; transition: transform .5s cubic-bezier(.55, 0, .75, .4), opacity .4s ease-in; }

/* ── Footer: the foot of the kiosk. A strip of tickets off the roll runs
   along its top, then the kiosk's green panelling: in daylight by day,
   with the street lamp's warmth on it after dark ── */
.tkk-footer {
  --paper:     #17202a;
  --paper-2:   #1d2833;
  --paper-3:   #263340;
  --ink:       #f3ead6;
  --ink-2:     #e2d9c4;
  --ink-soft:  #b9b29c;
  --rule:      rgba(243, 234, 214, 0.16);
  --rule-soft: rgba(243, 234, 214, 0.08);
  --theme-500: #5cc29a; --theme-600: #6ccaa4; --theme-700: #94dbbd;
  --theme-500-rgb: 92, 194, 154;
  --edge: rgba(243, 234, 214, .3);
  position: relative;
}
html body #desktopFooter.tkk-footer {
  background:
    linear-gradient(112deg, transparent 0 55%, rgba(255, 255, 255, .06) 55% 70%, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(0, 0, 0, .16) 118px 120px, rgba(255, 255, 255, .05) 120px 122px),
    linear-gradient(180deg, #23704f, #1d5c47 60%, #184d3c) !important;
}
html.dark body #desktopFooter.tkk-footer {
  background:
    radial-gradient(70% 120% at 85% 0%, rgba(255, 191, 90, .14), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(0, 0, 0, .2) 118px 120px, rgba(255, 255, 255, .03) 120px 122px),
    linear-gradient(180deg, #154635, #0f3326 60%, #0c2a20) !important;
}
/* The ticket strip along the top: yellow roll paper, a perforation
   between each ticket and its serial printed in the middle */
.tkk-footer-strip { position: relative; pointer-events: none; overflow: hidden; }
.tkk-footer-strip__paper {
  display: flex; height: 46px;
  background:
    repeating-linear-gradient(90deg, transparent 0 158px, rgba(31, 36, 32, .5) 158px 160px) 0 0 / 160px 100%,
    linear-gradient(180deg, #ffd667, #ffc93c);
  -webkit-mask: radial-gradient(circle at 159px 0, transparent 0 6px, #000 6.5px) 0 0 / 160px 51% repeat-x, radial-gradient(circle at 159px 100%, transparent 0 6px, #000 6.5px) 0 100% / 160px 51% repeat-x;
  mask: radial-gradient(circle at 159px 0, transparent 0 6px, #000 6.5px) 0 0 / 160px 51% repeat-x, radial-gradient(circle at 159px 100%, transparent 0 6px, #000 6.5px) 0 100% / 160px 51% repeat-x;
}
.tkk-footer-strip__serial {
  flex: 0 0 160px; display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: 'Courier Prime', ui-monospace, monospace; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: rgba(31, 36, 32, .82);
}
.tkk-footer-strip__serial svg { width: 14px; height: 14px; color: #c42c3a; }
.tkk-footer-strip__shade { display: block; height: 10px; background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent); }
.tkk-footer a:hover, .tkk-footer a:focus-visible { color: #ffc93c; }
.tkk-footer__motto { font-family: var(--font-mono); font-size: 1rem !important; }
html .tkk-footer .ed-footer-heading { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; color: #ffc93c; }
html:is(:lang(el), :lang(ru), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) .tkk-footer .ed-footer-heading { font-size: 13px; letter-spacing: 0; }
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: #ffc93c !important; }
html.dark #desktopFooter .ed-newsletter h4 { color: #1f2420 !important; }
html .ed-floating-nav {
  --paper-2: #fffaf0; --paper-3: #ebdfc4; --ink: #1f2420; --ink-2: #3b413b;
  background: var(--paper-2);
  border: 0; border-radius: 6px;
  box-shadow: var(--card-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: 3px; }
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; box-shadow: 0 0 0 1.5px var(--btn-edge); }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }
html.dark .ed-floating-nav { --paper-2: #18212a; --paper-3: #222d38; --ink: #f3ead6; --ink-2: #ddd3bd; box-shadow: 0 0 0 1.5px rgba(243, 234, 214, .3), 0 14px 24px -12px rgba(0, 0, 0, .8); }

/* The newsletter is a subscription coupon cut from the paper: cream
   newsprint inside a dashed cut line, the scissors on the line */
html body .tkk-footer .ed-newsletter {
  position: relative;
  background: var(--newsprint) repeat, #f6eedc;
  color: #1f2420;
  border: 0; border-radius: 4px;
  outline: 2px dashed rgba(31, 36, 32, .42); outline-offset: -11px;
  box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .7);
  margin: 1.5rem 1.5rem 3.5rem;
  padding-top: 2.4rem; padding-bottom: 2.2rem;
  --ink: #1f2420; --ink-2: #3b413b; --ink-soft: #625f50;
}
html body .tkk-footer .ed-newsletter::before {
  content: ''; position: absolute; top: -2px; inset-inline-start: 34px; width: 26px; height: 26px; pointer-events: none; z-index: 2;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f6eedc' stroke='%231f2420' stroke-width='2' stroke-linecap='round'><circle cx='6' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><path d='M8.1 8.1L20 18M8.1 15.9L20 6'/></svg>") center / contain no-repeat;
  transform: rotate(90deg);
}
html body .tkk-footer .ed-newsletter::after { display: none; }
@media (max-width: 767px) { html body .tkk-footer .ed-newsletter { margin-left: 16px; margin-right: 16px; } }
html body .tkk-footer .ed-newsletter > * { position: relative; z-index: 1; }
html body .tkk-footer .ed-newsletter h4, html.dark body .tkk-footer .ed-newsletter h4 { color: #1d5c47 !important; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.5rem); line-height: 1.05; letter-spacing: .01em; }
html:is(:lang(el), :lang(ru), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) body .tkk-footer .ed-newsletter h4 { font-weight: 800; font-size: 1.6rem; }
html body .tkk-footer .ed-newsletter p:not(#newsletter-msg), html.dark body .tkk-footer .ed-newsletter p:not(#newsletter-msg) { color: #3b413b !important; }
html body .tkk-footer .ed-newsletter-input, html.dark body .tkk-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) {
  background: #fffaf0 !important; color: #1f2420 !important; border: 0 !important; border-radius: 3px !important;
  box-shadow: 0 0 0 1.5px #1f2420 !important;
  font-family: var(--font-mono); font-weight: 700; caret-color: #c42c3a;
}
html body .tkk-footer .ed-newsletter-input::placeholder { color: rgba(31, 36, 32, .5); }
html body .tkk-footer .ed-newsletter-input:focus { box-shadow: 0 0 0 2px #1d5c47, 0 0 0 6px rgba(29, 92, 71, .18) !important; }
html body .tkk-footer .ed-newsletter-btn {
  background: #1d5c47; color: #fffaf0; border: 1.5px solid #0c2a20; border-radius: 3px;
  box-shadow: 3px 3px 0 0 #0c2a20;
  font-family: var(--font-ui); font-weight: 800;
  transition: transform .12s ease, box-shadow .12s ease;
}
html body .tkk-footer .ed-newsletter-btn:hover { background: #2a7a5e; }
html body .tkk-footer .ed-newsletter-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 #0c2a20; }
html body .tkk-footer .ed-newsletter-age, html body .tkk-footer .ed-newsletter label { color: #3b413b !important; }

/* The logo on the kiosk's fascia: the light logo on a cream sign board
   in a green frame, wherever it sits on the night (footer, splash) */
.tkk-fascia {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.5rem;
  background: linear-gradient(180deg, #fffaf0, #f1e6cc);
  border-radius: 3px;
  box-shadow: 0 0 0 5px #1d5c47, 0 0 0 7px #0c2a20, 0 14px 26px -12px rgba(0, 0, 0, .6);
  margin: 7px;
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. Nothing is clamped, so overflow hidden would only cut
   the descenders of the tight-set poster titles. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; overflow: visible; }
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 poster face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* On phones the words of a heading wrap whole, 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.9rem, 10vw, 2.4rem); }
  /* the auction page's "similar" 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(15, 21, 28, 0.96) !important; border-bottom-color: rgba(243, 234, 214, .16) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(24, 33, 42, 0.97) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: var(--theme-500) !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, #18212a, #0f151c, #17202a, #0a0f14) !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
   are the street's own blue-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: #0b1016 !important;
  border-color: rgba(243, 234, 214, .22) !important;
  color: #f3ead6 !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 kiosk's green. */
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: #123a2d;
  --paper: #f3ead6;
  border-color: rgba(92, 194, 154, .35);
}
html header.safe-top-header[style] { background: rgba(244, 236, 218, .96) !important; }
html.dark header.safe-top-header[style] { background: rgba(15, 21, 28, .96) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(15, 21, 28, .96); }

/* ── Login / register / forgot-password brand panel: the kiosk's green
   panelling under its awning, in daylight by day and under the lamp
   after dark ── */
:root, html.dark {
  --brand-gradient: linear-gradient(180deg, #154635, #0c2a20);
  --brand-glow-1: rgba(255, 191, 90, 0.2);
  --brand-glow-2: rgba(92, 194, 154, 0.18);
}
.brand-panel {
  background:
    linear-gradient(112deg, transparent 0 50%, rgba(255, 255, 255, .07) 50% 66%, transparent 66%),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(0, 0, 0, .16) 118px 120px, rgba(255, 255, 255, .05) 120px 122px),
    linear-gradient(180deg, #23704f, #1d5c47) !important;
}
html.dark .brand-panel {
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(255, 191, 90, .22), transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(0, 0, 0, .18) 118px 120px, rgba(255, 255, 255, .03) 120px 122px),
    linear-gradient(180deg, #154635, #0c2a20) !important;
}
/* login.css draws ::after as a round glow; here it is a ticket roll */
html .brand-panel::after {
  content: ''; position: absolute;
  top: 70px !important; right: 8% !important; left: auto !important; bottom: auto !important;
  width: 120px !important; height: 90px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)) !important; transform: rotate(-6deg) !important;
  background: var(--art-roll, none) center / contain no-repeat !important;
  box-shadow: none !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 8% !important; }
/* login.css's other glow becomes the awning along the top */
html .brand-panel::before {
  top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 22px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: radial-gradient(circle at 12px 0, #1d5c47 0 11.5px, transparent 12px) 0 9px / 48px 13px repeat-x, radial-gradient(circle at 36px 0, #fbf3e2 0 11.5px, transparent 12px) 0 9px / 48px 13px repeat-x, linear-gradient(90deg, #1d5c47 0 24px, #fbf3e2 24px 48px) 0 0 / 48px 9px repeat-x !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(243, 234, 214, 0.86) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 400 !important; }

/* ── Wallet balance card: the kiosk's loyalty punch card. Yellow card
   stock, the shop's green band across its top, a row of punch spaces
   along its foot with the first ones punched through, and the balance
   printed big in poster type ── */
html body .wallet-hero {
  position: relative;
  background:
    linear-gradient(180deg, transparent 0 calc(100% - 56px), rgba(31, 36, 32, .07) calc(100% - 56px)),
    var(--newsprint) repeat,
    linear-gradient(160deg, #ffd667, #ffc93c 55%, #f5b929);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 1.5px #1f2420, 0 18px 30px -18px rgba(31, 36, 32, .6);
  color: #1f2420;
  overflow: hidden;
  padding-top: calc(1.5rem + 30px) !important;
  padding-bottom: calc(1.25rem + 52px) !important;
  --ink: #1f2420; --ink-soft: #4b4636;
}
html.dark body .wallet-hero { box-shadow: 0 0 0 1.5px #05080b, 0 20px 34px -16px rgba(0, 0, 0, .9), 0 0 40px -16px rgba(255, 191, 90, .5); }
/* The shop's band across the top */
html body .wallet-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 30px;
  border: 0; border-radius: 0; transform: none; opacity: 1;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 9px), #1d5c47;
  box-shadow: inset 0 -2px 0 #123a2d;
  pointer-events: none;
}
/* Ten punch spaces along the foot: four punched, the rest stars waiting */
html body .wallet-hero::after {
  content: ''; position: absolute; left: 22px; right: 22px; bottom: 14px; top: auto; width: auto; height: 30px;
  border-radius: 0; transform: none; opacity: 1;
  background:
    radial-gradient(circle at 15px 15px, #0f151c 0 9px, rgba(31, 36, 32, .65) 9.5px 10.5px, transparent 11px) 0 0 / 34px 30px repeat-x;
  -webkit-mask: linear-gradient(90deg, #000 0 136px, transparent 136px), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='30'><path d='M15 6l2.6 5.4 5.9.8-4.3 4.1 1 5.8-5.2-2.8-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z' fill='none' stroke='black' stroke-width='1.6'/></svg>") 136px 0 / 34px 30px repeat-x;
  mask: linear-gradient(90deg, #000 0 136px, transparent 136px), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='30'><path d='M15 6l2.6 5.4 5.9.8-4.3 4.1 1 5.8-5.2-2.8-5.2 2.8 1-5.8-4.3-4.1 5.9-.8z' fill='none' stroke='black' stroke-width='1.6'/></svg>") 136px 0 / 34px 30px repeat-x;
  background-color: rgba(31, 36, 32, .55);
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { transform: scaleX(-1); }
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(31, 36, 32, .78) !important; }
html body .wallet-hero [style*="color:#fff"], html body .wallet-hero .text-white { color: #1f2420 !important; }
html body .wallet-hero .h-px { height: 2px; background: repeating-linear-gradient(90deg, rgba(31, 36, 32, .55) 0 5px, transparent 5px 9px) !important; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-weight: 400; letter-spacing: .01em;
  color: #1f2420; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(3.2rem, 14vw, 6.6rem) !important; line-height: .95;
}
html:is(:lang(el), :lang(ru), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) body .wallet-balance-num { font-weight: 800; font-size: clamp(2.4rem, 10vw, 4.6rem) !important; }
html body .wallet-hero-btn-primary {
  background: #1d5c47; color: #fffaf0; border: 1.5px solid #0c2a20; font-family: var(--font-ui); font-weight: 800; border-radius: 3px;
  box-shadow: 3px 3px 0 0 #0c2a20;
  transition: transform .12s ease, box-shadow .12s ease;
}
html body .wallet-hero-btn-primary:hover, html body .wallet-hero-btn-primary:focus-visible { background: #2a7a5e; color: #fffaf0; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 #0c2a20; }
html body .wallet-hero-btn-primary:active { transform: translate(3px, 3px); box-shadow: 0 0 0 0 #0c2a20; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #1f2420; border: 1.5px solid #1f2420; border-radius: 3px; background: rgba(255, 250, 240, .55); }
html body .wallet-hero-btn-secondary:hover { background: rgba(255, 250, 240, .9); }
/* 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; }
  html body .wallet-hero::after { left: 14px; right: 14px; }
}

/* ── Mystery box card (styled by assets/css/pages/home.css): printed card
   with the punch row along its top ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 0;
  border-radius: 3px;
  box-shadow: var(--card-drop);
  overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--card-lift); transform: translateY(-3px) rotate(-.5deg); }
html .ed-card-mystery::before {
  top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 14px; border-radius: 0;
  background: var(--punch-row); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }
/* ── Product page buy box: a printed price card, a stub along its top ── */
html body .pd-buybox {
  position: relative;
  background: var(--paper-2);
  border: 0;
  border-radius: 3px;
  box-shadow: var(--card-drop);
  overflow: hidden;
  padding-top: calc(1.25rem + 14px);
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: var(--punch-row), linear-gradient(var(--kiosk), var(--kiosk)) 0 0 / 100% 4px no-repeat;
}
html body .pd-buybox .font-display.text-4xl { font-family: var(--font-display); font-weight: 400; color: var(--theme-600); overflow-wrap: normal; }
.pd-title { font-weight: 800 !important; }
/* The mystery box plugin's own button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill. */
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 kiosk green. */
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 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a
   field and become ticket 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: 3px;
}
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(92, 194, 154, .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 ticket 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: 3px !important;
  box-shadow: 0 0 0 1.5px var(--btn-edge), var(--btn-shadow) !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
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: translate(3px, 3px); box-shadow: 0 0 0 1.5px var(--btn-edge) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(31, 36, 32, .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(31, 36, 32, .12); }
html .arena-play .cost { border-left-color: rgba(31, 36, 32, .3); }

/* ── Winners page cards ── */
html .wnc { border-radius: 3px; background: var(--paper-2); border: 0; box-shadow: var(--card-drop); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s ease; }
html .wnc:hover { box-shadow: var(--card-lift); transform: translateY(-3px) rotate(-.5deg); }

/* ── Cart and checkout: the order total is a till receipt, its torn edge
   along the foot. 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: 3px !important; box-shadow: var(--card-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: 3px 3px 0 0 !important;
  box-shadow: var(--card-line) !important;
  padding-top: 1.7rem !important;
  margin-bottom: 14px;
}
html .rounded-2xl:has(> div > div > #summary-total)::after,
html section.rounded-2xl:has([x-text="totalDisplay()"])::after {
  content: ''; position: absolute; left: -1.5px; right: -1.5px; top: 100%; height: 10px;
  background: linear-gradient(-45deg, transparent 5px, var(--paper-2) 5px) 0 0 / 10px 10px repeat-x, linear-gradient(45deg, transparent 5px, var(--paper-2) 5px) 0 0 / 10px 10px repeat-x;
  filter: drop-shadow(0 1.5px 0 var(--edge));
}
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-mono);
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 1.65rem);
  color: var(--ink);
  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 win is a cash-in receipt from the kiosk's till.
   The prize on a strip of counter at its head, then the till roll: the
   kiosk's name, a dashed rule, the prize, its worth on the TOTAL line, a
   serial, and the zigzag where it was torn off. A claimed win carries a
   PAID stamp in green ink. ── */
.tkk-win {
  position: relative;
  background: var(--paper-2);
  border-radius: 3px 3px 0 0;
  box-shadow: var(--card-line);
  margin-bottom: 12px;
  transition: transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.tkk-win::after {
  content: ''; position: absolute; left: -1.5px; right: -1.5px; top: 100%; height: 10px;
  background: linear-gradient(-45deg, transparent 5px, var(--paper-2) 5px) 0 0 / 10px 10px repeat-x, linear-gradient(45deg, transparent 5px, var(--paper-2) 5px) 0 0 / 10px 10px repeat-x;
  filter: drop-shadow(0 1.5px 0 var(--edge));
}
.tkk-win:hover, .tkk-win:focus-within { transform: translateY(-3px) rotate(-.4deg); }
.tkk-win__counter {
  display: flex; align-items: flex-end; justify-content: center;
  height: 10rem; padding: 1rem 14px 0;
  background: radial-gradient(70% 60% at 50% 100%, var(--tkk-yellow-soft), transparent 70%), linear-gradient(180deg, var(--paper-3), var(--paper-2));
  border-bottom: 1.5px solid var(--edge);
}
html.dark .tkk-win__counter { background: radial-gradient(70% 70% at 50% 100%, rgba(255, 191, 90, .18), transparent 70%), linear-gradient(180deg, #1b2530, #18212a); }
.tkk-win__counter img { max-width: 78%; max-height: 8.5rem; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(31, 36, 32, .22)); transition: transform .2s ease; }
.tkk-win:hover .tkk-win__counter img { transform: translateY(-4px); }
.tkk-win__roll { padding: 1rem 1.1rem 1.15rem; font-family: var(--font-mono); color: var(--ink); }
.tkk-win__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.tkk-win__rule { display: block; height: 2px; margin: .7rem 0; background: var(--perf-x); }
.tkk-win__name { font-family: var(--font-ui); font-weight: 800; font-size: 1.12rem; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.tkk-win__line { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: 14px; color: var(--ink-2); }
.tkk-win__total { font-weight: 700; font-size: clamp(1.15rem, 4vw, 1.35rem); color: var(--ink); white-space: nowrap; overflow-wrap: normal; }
.tkk-win__serial { font-size: 12px; letter-spacing: .12em; color: var(--stamp-red); }
.tkk-win__when { font-size: 12.5px; color: var(--ink-soft); }
.tkk-win__tag {
  display: inline-flex; align-items: center;
  padding: .14rem .45rem;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--stamp-blue); border: 2px solid currentColor; border-radius: 3px;
  transform: rotate(-2deg);
}
.tkk-win__tag--open { color: var(--tkk-orange); }
.tkk-win__tag--done { color: var(--tkk-green); }
.tkk-win__paid {
  position: absolute; top: 4.6rem; inset-inline-end: 1rem; z-index: 2;
  padding: .3rem .7rem;
  font-family: var(--font-display); font-size: 1.7rem; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tkk-green); border: 3px solid currentColor; border-radius: 4px;
  transform: rotate(-12deg);
  -webkit-mask: var(--ink-grain) 0 0 / 90px 40px; mask: var(--ink-grain) 0 0 / 90px 40px;
  pointer-events: none;
}
html:is(:lang(el), :lang(ru), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) .tkk-win__paid { font-weight: 800; font-size: 1.2rem; }
.tkk-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .94rem; font-family: var(--font-ui); }
.tkk-win__cart, .tkk-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 3px; font-weight: 800;
}
.tkk-win__cart { color: #fffaf0; background: var(--kiosk); border: 1.5px solid #0c2a20; box-shadow: 3px 3px 0 0 #0c2a20; transition: transform .12s ease, box-shadow .12s ease; }
.tkk-win__cart:hover, .tkk-win__cart:focus-visible { background: var(--kiosk-2); }
.tkk-win__cart:active { transform: translate(3px, 3px); box-shadow: none; }
.tkk-win__btn-off { color: var(--ink-soft); background: transparent; border: 2px dashed var(--rule); cursor: not-allowed; }
.tkk-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-family: var(--font-ui); font-size: .94rem; font-weight: 700;
  color: var(--tkk-green); background: var(--tkk-green-soft);
  border-radius: 3px;
}

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

/* ── The kiosk's materials ──
   Every surface beyond the hero and footer is built from these, so a
   panel anywhere in the shop reads as the kiosk at a glance:
   - printed card stock in a press-ink hairline (--card-line, --card-drop,
     --card-lift), a row of punch holes along the top (--punch-row);
   - tear lines (--perf-x, --perf-y) between a ticket and its stub;
   - the awning (--awning) along the top of hero bands and sheets;
   - rubber stamps (.tkk-stamp) in red and blue ink for labels and states;
   - the felt letter board (.tkk-board) for dark panels and table heads;
   - the five inks (--tkk-c1…5) for icon tiles and rotating accents;
   - the drawings (--art-*) for bare empty rows, baked per mode by
     functions.php. */
:root {
  --tile-lift: 0 0 0 1.5px var(--edge), 2px 2px 0 0 var(--edge);
  --tile-ink: #fffaf0;
}
html.dark {
  --tile-lift: 0 0 0 1.5px rgba(5, 8, 11, .8), 0 0 16px -4px rgba(255, 191, 90, .3);
  --tile-ink: #0f151c;
}
/* The letter board: black felt in fine grooves, white plastic letters */
.tkk-board {
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(255, 255, 255, .055) 7px 8px),
    linear-gradient(180deg, var(--felt-2), var(--felt));
  color: #f3ead6;
  border-radius: 4px;
  box-shadow: 0 0 0 3px #3a2c1c, 0 0 0 4.5px #0a0d10, inset 0 0 18px rgba(0, 0, 0, .55);
}
.tkk-board__letters { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; color: #f3ead6; }
html.dark .tkk-board__letters { text-shadow: 0 0 10px rgba(255, 233, 180, .55); }
.tkk-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  background: var(--tkk-c1); color: var(--tile-ink);
  border-radius: 3px;
  box-shadow: var(--tile-lift);
}
.tkk-sheet { position: relative; }
.tkk-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 2; pointer-events: none; background: var(--punch-row); }

/* ── Micro-interactions ──
   - pressing anything that buys, bids or adds tears a stub off it on its
     perforation, and the stub flutters down (the tear, ticket-kiosk.js);
   - the main countdown's figures roll over like the bands of a rubber
     date stamp as a minute turns over, and every second through the
     last ten (.tkk-tick, same script); card countdowns keep still;
   - badges and status tags are stamped on: down hard, a little askew;
   - the chosen tab is a ticket with its hole punched;
   - switches are a lever that clicks across.
   All of them settle under reduced motion. */
.tkk-stub {
  position: fixed; z-index: 2147482000; pointer-events: none;
  width: 34px; height: 22px; margin: -11px 0 0 -17px;
  background: linear-gradient(90deg, transparent 0 5px, rgba(31, 36, 32, .55) 5px 6.5px, transparent 6.5px), #ffc93c;
  border-radius: 2px;
  box-shadow: 0 0 0 1.5px #1f2420;
  animation: tkk-stub .82s cubic-bezier(.3, .2, .6, 1) forwards;
}
[dir="rtl"] .tkk-stub { animation-name: tkk-stub-rtl; }
@keyframes tkk-stub {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  18% { transform: translate(-6px, -10px) rotate(-14deg); }
  60% { transform: translate(-22px, 30px) rotate(28deg); opacity: 1; }
  100% { transform: translate(-30px, 70px) rotate(64deg); opacity: 0; }
}
@keyframes tkk-stub-rtl {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  18% { transform: translate(6px, -10px) rotate(14deg); }
  60% { transform: translate(22px, 30px) rotate(-28deg); opacity: 1; }
  100% { transform: translate(30px, 70px) rotate(-64deg); opacity: 0; }
}
.tkk-torn { animation: tkk-torn .34s ease-out 1; }
@keyframes tkk-torn { 0%, 100% { transform: none; } 35% { transform: translateX(2px) rotate(-.6deg); } 70% { transform: translateX(-1px); } }
.tkk-tick { display: inline-block; animation: tkk-tick .32s cubic-bezier(.3, 1.5, .5, 1) 1; }
@keyframes tkk-tick { 0% { transform: translateY(-22%); } 100% { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  html body :is(.badge, [class*="-badge"]:not([class*="badge-wrap"]), .tkk-win__tag, .tkk-stamp-in) { animation: tkk-stamp-on .34s cubic-bezier(.5, 0, .7, .4) both; }
}
@keyframes tkk-stamp-on { 0% { transform: scale(1.5) rotate(-6deg); opacity: 0; } 70% { transform: scale(.96); opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tkk-stub, .tkk-torn, .tkk-tick { animation: none !important; }
  .tkk-stub { 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 the boards are printed on newsprint, the pieces climbing the
   ticket rolls from cream to stamp red; after dark they sit on the
   street's blue-black under the lamp. */
:root {
  --game-bg: #f4ecda;
  --game-surface: #e6d9bb;
  --game-surface-2: #fffaf0;
  --game-ink: #1f2420;
  --game-muted: #625f50;
  --game-accent: #1d5c47;
  --game-accent-ink: #ffffff;
  --game-good: #1d6b50;
  --game-bad: #c42c3a;
  --game-tile-1: #fff3cf;
  --game-tile-2: #ffe08a;
  --game-tile-3: #ffc93c;
  --game-tile-4: #ffb27e;
  --game-tile-5: #f0661c;
  --game-tile-6: #c42c3a;
  --game-tile-7: #2552a8;
  --game-tile-8: #1d5c47;
  --game-radius: 3px;
  --game-font: 'League Gothic', 'Schibsted Grotesk', system-ui, sans-serif;
  --game-font-css: "/assets/themes/ticket-kiosk/assets/fonts/fonts.css";
  --game-pattern: var(--newsprint);
  --game-arena-screen: #f4ecda;
  --game-arena-coins: #b07c00;
  --game-arena-win: #1d6b50;
  --game-arena-danger: #c42c3a;
}
html.dark {
  --game-bg: #0b1016;
  --game-surface: #18212a;
  --game-surface-2: #222d38;
  --game-ink: #f3ead6;
  --game-muted: #a8a493;
  --game-accent: #ffd25a;
  --game-accent-ink: #1f2420;
  --game-good: #5cc29a;
  --game-bad: #ff7a7a;
  --game-tile-1: #222d38;
  --game-tile-2: #3a3a2a;
  --game-tile-3: #6b5418;
  --game-tile-4: #a8701a;
  --game-tile-5: #d9822a;
  --game-tile-6: #c4404c;
  --game-tile-7: #3f6ccc;
  --game-tile-8: #2f8a68;
  --game-arena-screen: #0b1016;
  --game-arena-coins: #ffd25a;
  --game-arena-win: #5cc29a;
  --game-arena-danger: #ff7a7a;
}

/* ── The status strip chip: the kiosk's open sign ── */
.tkk-strip-chip { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ffc93c; }
html:is(:lang(el), :lang(ru), :lang(vi), :lang(ar), :lang(ur), :lang(bn), :lang(zh)) .tkk-strip-chip { letter-spacing: 0; font-size: 11.5px; }
.tkk-strip-chip__lamp { width: 8px; height: 8px; border-radius: 50%; background: #ffc93c; box-shadow: 0 0 8px rgba(255, 201, 60, .8); }
/* 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 .tkk-strip-date { display: none; } }

/* The draw pages' scripts paint their buttons yellow-to-amber in Tailwind:
   the kiosk's yellow ticket instead */
html body .bg-gradient-to-r.from-yellow-400.to-amber-500 {
  background: var(--btn-perf) .78rem 50% / 1.5px 62% no-repeat, var(--btn-bg) !important;
  color: var(--btn-ink) !important; border: 1.5px solid var(--btn-edge) !important; border-radius: 3px !important;
  box-shadow: var(--btn-shadow) !important; padding-inline-start: 1.6rem;
}
html body .bg-gradient-to-r.from-yellow-400.to-amber-500:hover { background-color: var(--btn-bg-hover) !important; transform: translate(-1px, -1px); box-shadow: var(--btn-shadow-hover) !important; }
html body .bg-gradient-to-r.from-yellow-400.to-amber-500:active { transform: translate(3px, 3px); box-shadow: var(--btn-shadow-down) !important; }
html body .bg-gradient-to-r.from-yellow-400.to-amber-500:dir(rtl) { background-position: right .78rem center, 0 0 !important; }

/* A count badge: a red rubber-stamp dot with cream figures */
html body .tkk-badge-red { background: #c42c3a; color: #fffaf0; box-shadow: 0 0 0 2px var(--paper-2); font-family: var(--font-mono); }

/* 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: #1d6c51; --px-warn: #af5109; --px-crit: #c42c3a; --px-info: #2463ff; }
html.dark:root { --px-good: #5cc29a; --px-warn: #fbbf23; --px-crit: #ff8f8f; --px-info: #94b3ff; }

/* The language-switch scene (PX_LANG_SCENES in ticket-kiosk.js): the kiosk
   tears off the old language's ticket and prints and punches the new one. */
.tkk-lang-stage { background: color-mix(in srgb, var(--felt, #1b2026) 58%, transparent); overflow: hidden; }
.tkk-lang-kiosk { display: flex; flex-direction: column; align-items: center; width: min(560px, 100%); box-sizing: border-box; font-family: var(--font-ui); }
.tkk-lang-booth {
  position: relative; z-index: 2; width: min(440px, 100%); box-sizing: border-box; padding: 0 16px;
  background: var(--kiosk, #1d5c47); border-radius: 12px 12px 6px 6px;
  box-shadow: inset 0 -3px 0 var(--kiosk-deep, #123a2d), 0 24px 44px -24px rgba(0, 0, 0, .65);
}
.tkk-lang-awning {
  display: block; height: 20px; margin: 0 -16px 14px; border-radius: 12px 12px 0 0;
  background: repeating-linear-gradient(90deg, var(--awning-a, #1d5c47) 0 22px, var(--awning-b, #fbf3e2) 22px 44px);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14);
}
.tkk-lang-sign {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 14px; border-radius: 4px;
  background: var(--kiosk-deep, #123a2d); color: var(--lamp, #ffbf5a);
  font: 400 clamp(28px, 8vw, 36px)/1 var(--font-display); letter-spacing: .06em;
}
.tkk-lang-sign span { font-family: var(--font-ui); font-size: .6em; opacity: .7; }
.tkk-lang-lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--lamp, #ffbf5a); box-shadow: 0 0 10px 3px rgba(255, 191, 90, .55); }
.tkk-lang-slot { position: relative; display: block; width: min(420px, 92%); height: 10px; margin: 14px auto -5px; border-radius: 6px; background: #0b0f0d; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7); }
.tkk-lang-feed { position: relative; z-index: 1; width: 100%; height: 128px; clip-path: inset(0 -50vw -100vh -50vw); }
.tkk-lang-ticket {
  position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; display: flex;
  width: min(400px, calc(100% - 24px)); height: 116px; box-sizing: border-box; border-radius: 0 0 5px 5px;
  color: #1f2420; background: var(--roll-yellow, #ffc93c); box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .55);
}
.tkk-lang-ticket::before { content: ''; position: absolute; left: 0; right: 0; top: 0; border-top: 2px dashed rgba(31, 36, 32, .45); }
.tkk-lang-old { background: var(--roll-blue, #b8cff5); opacity: 0; transform: translateY(150px) rotate(12deg); }
.tkk-lang-main {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  margin: 9px 0 9px 9px; padding: 6px 12px; border: 1.5px dashed rgba(31, 36, 32, .35); border-radius: 3px;
}
.tkk-lang-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.tkk-lang-name { font: 400 clamp(26px, 8vw, 40px)/1 var(--font-display); letter-spacing: .02em; text-align: center; overflow-wrap: anywhere; }
.tkk-lang-stars { font-size: 11px; letter-spacing: .3em; color: var(--stamp-red, #c42c3a); }
.tkk-lang-stub {
  position: relative; flex: 0 0 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border-left: 2px dashed rgba(31, 36, 32, .4);
}
.tkk-lang-stub b { font: 400 28px/1 var(--font-display); letter-spacing: .04em; }
.tkk-lang-one { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; font: 700 13px/1 var(--font-mono, monospace); }
.tkk-lang-hole, .tkk-lang-chad { position: absolute; right: 30px; top: 8px; width: 18px; height: 18px; border-radius: 50%; }
.tkk-lang-hole { background: var(--felt, #1b2026); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); opacity: 0; transform: scale(0); }
.tkk-lang-chad { background: var(--roll-yellow, #ffc93c); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); opacity: 0; }
/* Out: the old ticket prints, is torn off and drops; the new one feeds out. */
.px-lang-stage-out .tkk-lang-kiosk { animation: tkk-lang-in .3s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .tkk-lang-old { animation: tkk-lang-tear .78s linear .18s both; }
.px-lang-stage-out .tkk-lang-new { animation: tkk-lang-print .4s cubic-bezier(.3, .6, .4, 1) .72s both; }
.px-lang-stage-out .tkk-lang-lamp { animation: tkk-lang-blink .3s steps(2, end) .2s 3 both; }
/* In: it starts where out ended, the ticket is punched and handed over. */
.px-lang-stage-in .tkk-lang-hole { animation: tkk-lang-punch .14s ease-out .34s both; }
.px-lang-stage-in .tkk-lang-chad { animation: tkk-lang-chad .5s ease-in .34s both; }
.px-lang-stage-in .tkk-lang-new { animation: tkk-lang-jolt .3s ease-out .32s both; }
.px-lang-stage-in .tkk-lang-stars { animation: tkk-lang-blink .24s steps(2, end) .5s 2 both; }
.px-lang-stage-in .tkk-lang-kiosk { animation: tkk-lang-off .28s ease-in 1s both; }
@keyframes tkk-lang-in { from { transform: translateY(-30px); opacity: 0; } }
@keyframes tkk-lang-off { to { transform: translateY(30px); opacity: 0; } }
@keyframes tkk-lang-tear {
  0%   { opacity: 1; transform: translateY(-102%); }
  45%  { opacity: 1; transform: none; }
  58%  { opacity: 1; transform: translateY(6px) rotate(-1.5deg); }
  100% { opacity: 0; transform: translateY(150px) rotate(12deg); }
}
@keyframes tkk-lang-print { from { transform: translateY(-102%); } }
@keyframes tkk-lang-blink { 50% { opacity: .3; } }
@keyframes tkk-lang-punch { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes tkk-lang-chad {
  0%   { opacity: 0; }
  1%   { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(10px, 110px) rotate(200deg); }
}
@keyframes tkk-lang-jolt { 30% { transform: translateY(5px) rotate(-1deg); } }
@media (max-width: 460px) {
  .tkk-lang-stub { flex-basis: 60px; }
  .tkk-lang-stub b { font-size: 22px; }
  .tkk-lang-hole, .tkk-lang-chad { right: 21px; }
  .tkk-lang-stars { display: none; }
}

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

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

/* 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: #29765b;
}
html.dark #logoutModal a[href="/logout"] {
  background: #b55151 !important;
}
/* rev 868fe5109c9f2a2b */