/* ============================================================
   LUNAR NEW YEAR THEME — red and gold for the Spring Festival.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the things of the New Year: paper-cuts, red
   envelopes, round silk lanterns, the key-fret border and gold
   on red lacquer. Lacquer red on rice paper by day (the
   default); black lacquer and gold leaf by night.

   The theme sets the --theme-* accent ramp itself (lacquer red by
   day, gold by night), so the admin's accent colour setting does
   not apply while it is active.
   ============================================================ */

:root {
  --font-display: 'Noto Serif Display', 'Noto Serif', 'Songti SC', 'Noto Serif SC', Georgia, serif;
  --font-ui:      'Manrope', 'Inter', system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-seal:    'Lunar Seal', 'Songti SC', 'Noto Serif SC', serif;

  --paper:        #fbf3e4;
  --paper-2:      #fffaf1;
  --paper-3:      #f3e5cc;
  --ink:          #2b1712;
  --ink-2:        #4d3128;
  --ink-soft:     #7a5f54;
  --rule:         rgba(43, 23, 18, 0.14);
  --rule-soft:    rgba(43, 23, 18, 0.07);
  --radius:       14px;
  --radius-sm:    8px;
  --shadow:       0 1px 2px rgba(43, 23, 18, .06), 0 4px 14px -6px rgba(43, 23, 18, .16);
  --shadow-md:    0 2px 4px rgba(43, 23, 18, .06), 0 16px 32px -14px rgba(43, 23, 18, .32);

  /* Lacquer red */
  --theme-50:  #fdeeee;
  --theme-100: #f9d3d5;
  --theme-200: #f0a5ab;
  --theme-300: #e3727c;
  --theme-400: #d23d4c;
  --theme-500: #c8142c;
  --theme-600: #a8102a;
  --theme-700: #870d22;
  --theme-800: #660a1a;
  --theme-900: #430611;
  --theme-500-rgb: 200, 20, 44;
  --theme-600-rgb: 168, 16, 42;

  --red:        #c8142c;
  --red-2:      #a8102a;
  --red-soft:   rgba(200, 20, 44, 0.09);
  --lacquer:    #8e0f20;
  --lacquer-2:  #b8142a;
  --leaf:       #e3ac48;
  --leaf-2:     #f4cd7c;
  --jade:       #1d7a5b;
  --jade-soft:  rgba(29, 122, 91, 0.11);

  /* Names other themes' shared markup reaches for */
  --gold:       #b7801c;
  --gold-2:     #e3ac48;
  --gold-soft:  rgba(200, 20, 44, 0.08);
  --gold-ink:   #2b1205;
  --felt:       #8e0f20;
  --felt-2:     #6e0a18;
  --on-felt:    #fbf3e4;
  --on-felt-soft: rgba(251, 243, 228, 0.76);
  --peacock:    #1d7a5b;
  --peacock-soft: rgba(29, 122, 91, 0.11);

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

  /* Buttons: lacquer red with a gold-leaf edge in both modes */
  --btn-bg:       #b8142a;
  --btn-bg-hover: #c8142c;
  --btn-ink:      #fff8ec;
  --btn-shadow:   inset 0 0 0 1px rgba(244, 205, 124, .35), 0 2px 0 #6e0a18, 0 8px 18px -10px rgba(110, 10, 24, .7);
  --btn-shadow-hover: inset 0 0 0 1px rgba(244, 205, 124, .5), 0 3px 0 #6e0a18, 0 12px 22px -10px rgba(110, 10, 24, .7);

  /* The key fret (回纹): the theme's border band, gold on red */
  --fret-band: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='18' viewBox='0 0 24 18'><rect width='24' height='18' fill='%23a8102a'/><path d='M0 1h24M0 17h24' stroke='%23e3ac48' stroke-width='1.2'/><path d='M0 14H19V4H6V11H14V7.5H10M19 14H24' fill='none' stroke='%23e3ac48' stroke-width='1.8' stroke-linecap='square'/></svg>");
  --fret-band-v: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='24' viewBox='0 0 18 24'><rect width='18' height='24' fill='%23a8102a'/><path d='M1 0v24M17 0v24' stroke='%23e3ac48' stroke-width='1.2'/><path d='M14 0V19H4V6H11V14H7.5V10M14 19V24' fill='none' stroke='%23e3ac48' stroke-width='1.8' stroke-linecap='square'/></svg>");
  /* Rice paper, scattered with faint plum blossom */
  --blossoms: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%23c8142c' fill-opacity='0.05'><circle cx='24' cy='20' r='4'/><circle cx='31' cy='25' r='4'/><circle cx='28' cy='33' r='4'/><circle cx='20' cy='33' r='4'/><circle cx='17' cy='25' r='4'/><circle cx='84' cy='76' r='3'/><circle cx='89' cy='80' r='3'/><circle cx='87' cy='86' r='3'/><circle cx='81' cy='86' r='3'/><circle cx='79' cy='80' r='3'/></g></svg>");

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

html.dark {
  --paper:        #170d0b;
  --paper-2:      #221410;
  --paper-3:      #301c16;
  --ink:          #f7ead3;
  --ink-2:        #e3cfb1;
  --ink-soft:     #b49b88;
  --rule:         rgba(247, 234, 211, 0.14);
  --rule-soft:    rgba(247, 234, 211, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px -8px rgba(0, 0, 0, .6);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .35), 0 18px 36px -14px rgba(0, 0, 0, .8);

  /* Gold leaf */
  --theme-50:  #2b1f0e;
  --theme-100: #3b2a12;
  --theme-200: #6b4c1c;
  --theme-300: #f4cd7c;
  --theme-400: #eebf62;
  --theme-500: #e3ac48;
  --theme-600: #eebf62;
  --theme-700: #f4cd7c;
  --theme-800: #f8dea7;
  --theme-900: #fbeccb;
  --theme-500-rgb: 227, 172, 72;
  --theme-600-rgb: 238, 191, 98;

  /* A step lighter than the day red: core markup prints it as text on the
     night cards, where it needs 4.5:1 */
  --red:        #ec4a5c;
  --red-2:      #f05a68;
  --red-soft:   rgba(226, 57, 74, 0.14);
  --jade:       #3fbf93;
  --jade-soft:  rgba(63, 191, 147, 0.14);

  --gold:       #e3ac48;
  --gold-2:     #f4cd7c;
  --gold-soft:  rgba(227, 172, 72, 0.15);
  --felt:       #110908;
  --felt-2:     #221410;
  --peacock:    #3fbf93;
  --peacock-soft: rgba(63, 191, 147, 0.14);

  --nav-accent:    var(--leaf);
  --hdr-strip-bg:  #0f0807;
  /* Picture wells after dark: warm lacquer-brown lit from the middle, so
     black products (speakers, shredders, cameras) keep their outline */
  --ln-well: radial-gradient(circle at 50% 45%, #5e463c 0%, #46322b 48%, #3a2a24 100%);

  --btn-bg:       #c8142c;
  --btn-bg-hover: #d7253b;
  --btn-ink:      #fff6e6;
  --btn-shadow:   inset 0 0 0 1px rgba(244, 205, 124, .45), 0 2px 0 #5e0814, 0 8px 22px -8px rgba(200, 20, 44, .55);
  --btn-shadow-hover: inset 0 0 0 1px rgba(244, 205, 124, .6), 0 3px 0 #5e0814, 0 12px 28px -8px rgba(200, 20, 44, .7);

  --blossoms: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%23e3ac48' fill-opacity='0.05'><circle cx='24' cy='20' r='4'/><circle cx='31' cy='25' r='4'/><circle cx='28' cy='33' r='4'/><circle cx='20' cy='33' r='4'/><circle cx='17' cy='25' r='4'/><circle cx='84' cy='76' r='3'/><circle cx='89' cy='80' r='3'/><circle cx='87' cy='86' r='3'/><circle cx='81' cy='86' r='3'/><circle cx='79' cy='80' r='3'/></g></svg>");
  --page-bg:
    radial-gradient(1000px 460px at 50% -160px, rgba(200, 20, 44, 0.14), transparent 70%) no-repeat,
    var(--blossoms) repeat,
    var(--paper);
}

/* ── 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;
  font-synthesis: none;
  letter-spacing: 0;
}
.display-italic { font-style: normal; }

::selection { background: var(--red); color: #fff8ec; }

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

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

/* Section eyebrow — a small red diamond (the New Year's doufang) in front
   of the label */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><rect x='2.5' y='2.5' width='9' height='9' transform='rotate(45 7 7)' fill='%23c8142c'/><rect x='5' y='5' width='4' height='4' transform='rotate(45 7 7)' fill='%23e3ac48'/></svg>") center / contain no-repeat;
}

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

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

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

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

.hdr-strip, .hdr-strip .ed-status { color: rgba(251, 243, 228, 0.88); }
.hdr-strip a:hover, .hdr-strip button:hover { color: var(--leaf-2); }

/* The fret band: a gold key-fret meander on red, under the main header bar
   and wherever a section needs a border. */
.ln-band { height: 18px; background: var(--fret-band) repeat-x center / 24px 18px; }

/* The festival chip in the status strip */
.ln-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .06em; color: var(--leaf-2); }
.ln-strip-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
/* The desktop strip shares its line with the menu; the Lantern Festival
   countdown joins the day only where there is room for both. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1439px) { .ln-strip-chip__extra { display: none; } }

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

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

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

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

/* ── Cards: soft corners, a fine edge, a lift on hover ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html .ed-plan:hover, html .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
html .ed-plan-featured {
  position: relative;
  background: var(--clouds) repeat, linear-gradient(170deg, #b8142a, #8e0f20); color: #fbf3e4;
  border: 1px solid rgba(227, 172, 72, .55); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: var(--fret-band) repeat-x center / 24px 18px; pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(251, 243, 228, .22); }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-soft); }
.ed-topnav-link { color: rgba(251, 243, 228, 0.88); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: var(--leaf-2); }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
.drawer-logout {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 12px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600;
  color: var(--theme-600); border: 1px solid var(--theme-600); text-decoration: none;
}
.drawer-logout:hover { background: var(--gold-soft); }

.mobile-glass-header {
  background: rgba(251, 243, 228, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(23, 13, 11, 0.94); }

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

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

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

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

/* ── Red lacquer: the ground of the hero, the winners page, the splash and
   the 404, in both modes — deep red with faint gold clouds ── */
:root {
  --clouds: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'><g fill='none' stroke='%23f4cd7c' stroke-opacity='0.09' stroke-width='1.6' stroke-linecap='round'><path d='M14 40 c-10 0 -10 -14 0 -14 c0 -12 18 -14 22 -4 c4 -12 24 -12 26 2 c10 -2 16 10 8 16 Z'/><path d='M24 34 c0 -7 10 -7 10 0 c0 4 -6 4 -6 0'/><path d='M94 100 c-10 0 -10 -14 0 -14 c0 -12 18 -14 22 -4 c4 -12 24 -12 26 2 c10 -2 16 10 8 16 Z'/><path d='M104 94 c0 -7 10 -7 10 0 c0 4 -6 4 -6 0'/></g></svg>");
  --lacquer-bg:
    radial-gradient(560px 340px at 74% 30%, rgba(244, 205, 124, .22), transparent 70%),
    radial-gradient(700px 420px at 8% 100%, rgba(80, 6, 16, .45), transparent 70%),
    var(--clouds) repeat,
    linear-gradient(170deg, #b8142a 0%, #9c1024 50%, #7e0c1c 100%);
}
html.dark {
  --lacquer-bg:
    radial-gradient(560px 340px at 74% 30%, rgba(227, 172, 72, .16), transparent 70%),
    radial-gradient(700px 420px at 8% 100%, rgba(0, 0, 0, .5), transparent 70%),
    var(--clouds) repeat,
    linear-gradient(170deg, #7a0c1b 0%, #4e0811 55%, #2a0509 100%);
}

/* ── Lanterns ──
   lunar_lantern_svg() draws them: red silk on gold ribs, glowing from
   inside, with a gold tassel. */
.ln-lantern { display: block; width: 100%; height: auto; overflow: visible; }
.ln-lantern__gold, .ln-lantern__tassel { fill: #e3ac48; }
.ln-lantern__silk { fill: #d21f33; }
.ln-lantern__glow { fill: #f2573d; opacity: .75; }
.ln-lantern__rib { stroke: #e3ac48; stroke-width: 1.5; stroke-opacity: .9; }
.ln-lantern--gold .ln-lantern__silk { fill: #e3ac48; }
.ln-lantern--gold .ln-lantern__glow { fill: #f8d98e; }
.ln-lantern--gold .ln-lantern__rib { stroke: #a8102a; }
.ln-lantern--gold .ln-lantern__gold, .ln-lantern--gold .ln-lantern__tassel { fill: #a8102a; }
.ln-hang { position: relative; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 0; }
.ln-hang__chain { width: 2px; background: #e3ac48; }
.ln-hang .ln-lantern { filter: drop-shadow(0 0 12px rgba(242, 87, 61, .45)) drop-shadow(0 0 28px rgba(244, 205, 124, .2)); }
@media (prefers-reduced-motion: no-preference) {
  .ln-hang { animation: ln-sway 5.5s ease-in-out 2 forwards; animation-delay: calc(var(--i, 0) * -1.4s); }
  .ln-lantern__glow { animation: ln-flicker 3s ease-in-out 4 forwards; animation-delay: calc(var(--i, 0) * -.8s); }
}
@keyframes ln-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes ln-flicker { 0%, 100% { opacity: .75; } 40% { opacity: .5; } 60% { opacity: .85; } }

/* The paper-cut window (lunar_papercut_svg()): red paper over gold light. */
.ln-papercut { display: block; width: 100%; height: auto; }
.ln-papercut .ln-light, .ln-papercut .ln-cut { fill: #f7d68a; }
.ln-papercut .ln-paper { fill: #c8142c; }
.ln-papercut .ln-cut-line { fill: none; stroke: #f7d68a; stroke-width: 3; stroke-linecap: round; }
.ln-papercut .ln-branch { fill: none; stroke: #c8142c; stroke-width: 9; stroke-linecap: round; }
.ln-papercut .ln-branch--twig { stroke-width: 5; }
.ln-papercut .ln-paper-line { fill: none; stroke: #c8142c; stroke-width: 3; stroke-linecap: round; }

/* The 福 seal: a gold-edged diamond with the character, on envelopes.
   Templates draw it only on Chinese pages (lunar_reads_han()). */
.ln-fu {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-seal); font-weight: 900; line-height: 1;
}

/* ── Dark/light toggle: a folding fan ──
   assets/themes/lunar-new-year/assets/js/lunar-new-year.js registers the
   transition: a red-and-gold paper fan opens from the foot of the screen
   until it covers the page, the mode flips behind it, and it folds shut
   the other way. Each blade turns about the fan's rivet; --a is its
   resting angle, --w and --r its width and length, and --od, --cd and
   --cw its opening time, closing time and wait before closing, all set
   from JS. */
.px-fx--ln-fan { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--ln-fan .ln-fan__blade {
  position: absolute; left: 50%; bottom: 0;
  width: var(--w); height: var(--r); margin-left: calc(var(--w) / -2);
  transform-origin: 50% 100%;
  transform: rotate(-96deg);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  background:
    linear-gradient(90deg, transparent 49.4%, rgba(227, 172, 72, .9) 49.4% 50.6%, transparent 50.6%),
    radial-gradient(circle at 50% 100%, transparent 0 22%, rgba(227, 172, 72, .85) 22% 22.6%, transparent 22.6% 93.4%, #e3ac48 93.4%),
    var(--c, #c8142c);
  transition: transform var(--od, .4s) linear;
}
.px-fx--ln-fan .ln-fan__blade:nth-child(even) { --c: #a8102a; }
.px-fx--ln-fan.is-open .ln-fan__blade { transform: rotate(var(--a)); }
.px-fx--ln-fan.is-closing .ln-fan__blade { transform: rotate(96deg); transition-duration: var(--cd, .4s); transition-delay: var(--cw, 0s); }
.px-fx--ln-fan .ln-fan__rivet {
  position: absolute; left: 50%; bottom: -26px; width: 52px; height: 52px; margin-left: -26px;
  border-radius: 50%; background: #e3ac48; box-shadow: inset 0 0 0 6px #a8102a, 0 0 0 3px #e3ac48;
  transform: scale(0); transition: transform .2s ease;
}
.px-fx--ln-fan.is-open .ln-fan__rivet { transform: scale(1); }

/* ── Footer: black lacquer under a tiled eave, with lanterns hung from it ── */
.ln-footer {
  --paper:     #170d0b;
  --paper-2:   #221410;
  --paper-3:   #301c16;
  --ink:       #f7ead3;
  --ink-2:     #e3cfb1;
  --ink-soft:  #b49b88;
  --rule:      rgba(247, 234, 211, 0.15);
  --rule-soft: rgba(247, 234, 211, 0.08);
  --theme-500: #e3ac48; --theme-600: #e3ac48; --theme-700: #f4cd7c;
  --theme-500-rgb: 227, 172, 72;
  position: relative;
}
/* The eave: a ridge of glazed tiles, their round ends in a row along the
   edge, gold on lacquer, with the lanterns hanging below. */
.ln-footer-top { position: relative; background: #170d0b; margin-bottom: -1px; }
.ln-eave {
  height: 34px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='34' viewBox='0 0 32 34'><rect width='32' height='16' fill='%235e0814'/><path d='M0 4h32M0 10h32' stroke='%23a8102a' stroke-width='2'/><circle cx='16' cy='20' r='11' fill='%238e0f20' stroke='%23e3ac48' stroke-width='2'/><circle cx='16' cy='20' r='5.5' fill='none' stroke='%23e3ac48' stroke-width='1.6'/><circle cx='16' cy='20' r='1.8' fill='%23e3ac48'/></svg>") repeat-x left top / 32px 34px;
}
.ln-footer-lanterns { position: relative; display: flex; justify-content: space-around; padding: 0 1rem; height: 110px; margin-top: -6px; overflow: hidden; }
.ln-footer-lanterns .ln-hang { width: 36px; }
.ln-footer-lanterns .ln-hang__chain { height: var(--h, 20px); }
.ln-footer a:hover { color: var(--leaf-2); }
html.dark #desktopFooter li { color: var(--ink-2) !important; }

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

html body .ln-footer .ed-newsletter {
  position: relative;
  background: var(--clouds) repeat, linear-gradient(170deg, #9c1024, #6e0a18); color: #fbf3e4;
  border: 1px solid rgba(227, 172, 72, .55); border-radius: 16px;
  box-shadow: 0 0 0 5px rgba(227, 172, 72, .07);
}
html body .ln-footer .ed-newsletter::after { display: none; }
html body .ln-footer .ed-newsletter-input { background: #fffaf1 !important; color: #2b1712 !important; border: 1px solid rgba(227, 172, 72, .6) !important; border-radius: 10px; }
html body .ln-footer .ed-newsletter-input::placeholder { color: #7a5f54; }
html body .ln-footer .ed-newsletter-input:focus { border-color: #e3ac48 !important; box-shadow: 0 0 0 3px rgba(227, 172, 72, .35); }
html body .ln-footer .ed-newsletter-btn {
  background: #e3ac48; color: #2b1205; border: 0; border-radius: 10px;
  font-family: var(--font-ui); font-weight: 700;
}
html body .ln-footer .ed-newsletter-age { color: rgba(251, 243, 228, .85); }

/* Logo seal: the light-mode logo on a rice-paper card inside a red double
   frame, like a name seal, wherever it sits on dark or red ground (footer,
   app splash). */
.ln-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.1rem 1.5rem;
  background: #fffaf1;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #c8142c, 0 0 0 5px #fffaf1, 0 0 0 7px #e3ac48, 0 14px 28px -12px rgba(0, 0, 0, .6);
}
.ln-plaque::before, .ln-plaque::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  background: #e3ac48; transform: rotate(45deg);
}
.ln-plaque::before { left: -12px; }
.ln-plaque::after { right: -12px; }

/* 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(23, 13, 11, 0.94) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: var(--paper) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(34, 20, 16, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #301c16, #170d0b, #4e0811, #110908) !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 theme's own black lacquer. 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: #110908 !important;
  border-color: rgba(247, 234, 211, .2) !important;
  color: #f7ead3 !important;
}

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink
   is dark. After dark those panels take the deepest lacquer red. */
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: #4e0811;
  --paper: #f7ead3;
  border-color: rgba(227, 172, 72, .3);
}

html header.safe-top-header[style] { background: rgba(251, 243, 228, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(23, 13, 11, .95) !important; }

/* ── Login / register / forgot-password brand panel: red lacquer ── */
:root, html.dark {
  --brand-gradient: linear-gradient(170deg, #b8142a 0%, #8e0f20 55%, #5e0814 100%);
  --brand-glow-1: rgba(244, 205, 124, 0.24);
  --brand-glow-2: rgba(244, 205, 124, 0.1);
}
.brand-panel { background: var(--clouds), var(--brand-gradient) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the fret band along the panel's foot. */
html .brand-panel::after {
  content: ''; position: absolute;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; height: 18px !important;
  border-radius: 0 !important; transform: none !important; opacity: 1 !important;
  background: var(--fret-band) repeat-x center / 24px 18px !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(251, 243, 228, 0.82) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: a red envelope — lacquer red, a gold coin in the
   corner and the fret band along its foot ── */
html body .wallet-hero {
  position: relative;
  background:
    radial-gradient(500px 220px at 85% 0%, rgba(244, 205, 124, .2), transparent 70%),
    var(--clouds),
    linear-gradient(150deg, #b8142a 0%, #7e0c1c 85%);
  border: 1px solid rgba(227, 172, 72, .45);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
  color: #fbf3e4;
  overflow: hidden;
}
html body .wallet-hero::before {
  left: 0; right: 0; top: auto; bottom: 0; height: 18px; border-radius: 0;
  background: var(--fret-band) repeat-x center / 24px 18px;
}
/* A gold cash coin: round, with a square hole */
html body .wallet-hero::after {
  content: ''; position: absolute; right: 24px; top: 20px; width: 44px; height: 44px; border-radius: 50%;
  background:
    linear-gradient(#9c1024, #9c1024) center / 13px 13px no-repeat,
    radial-gradient(circle, #f4cd7c 0 56%, #c68a1e 57% 62%, #f4cd7c 63%);
  box-shadow: 0 0 0 2px #c68a1e, 0 6px 14px -6px rgba(0, 0, 0, .5);
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 24px; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 700;
  color: #f4cd7c;
}
html body .wallet-hero-btn-primary { background: #e3ac48; color: #2b1205; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 10px; }
html body .wallet-hero-btn-primary:hover { background: #f4cd7c; color: #2b1205; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 600; color: #fbf3e4; border-color: rgba(251, 243, 228, .45); border-radius: 10px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): a gift tied
   with a fret-pattern ribbon down its side ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
html .ed-card-mystery::before {
  top: 0; bottom: 0; left: 20%; right: auto; width: 18px; height: auto; border-radius: 0;
  background: var(--fret-band-v) repeat-y center / 18px 24px; opacity: 1; z-index: 0;
}
[dir="rtl"] .ed-card-mystery::before { left: auto; right: 20%; }
html .ed-card-mystery img { position: relative; z-index: 1; }

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

/* dynamic-theme's ".dark button" turns the mystery box button's label the
   colour of its fill; the theme paints that button red, so its ink is the
   button cream. */
html.dark button.spin-btn:not(:disabled) { color: var(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's red and gold. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a
   field and take the colour of the main buttons. */
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 12px;
}
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(176, 122, 25, .3); }
html.dark .border-violet-200 { border-color: rgba(227, 172, 72, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(15, 91, 95, .35); }
html .focus\:border-purple-400:focus { border-color: var(--red); }

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

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

/* ── Cart and checkout: the order total under the fret band ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.6rem !important;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: var(--fret-band) repeat-x center / 24px 18px;
}
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: 600;
  font-size: 1.7rem;
  color: var(--theme-600);
}

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


/* ── My Winnings: each prize in a red envelope — a red flap over the
   picture, sealed with a gold 福 on Chinese pages ── */
.ln-win {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ln-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ln-win__wrap { background: var(--blossoms), var(--paper-3); padding-top: 18px; }
html.dark .ln-win__wrap { background: var(--ln-well); }
.ln-win__wrap::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34px; z-index: 1;
  background: #c8142c; clip-path: polygon(0 0, 100% 0, 100% 30%, 50% 100%, 0 30%);
}
html:lang(zh) .ln-win__wrap::after {
  content: '\798F'; position: absolute; left: 50%; top: 14px; width: 30px; height: 30px; margin-left: -15px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-seal); font-weight: 900; font-size: 17px; line-height: 1; color: #a8102a;
  background: #e3ac48; border-radius: 50%; box-shadow: 0 0 0 2px var(--paper-2);
}
.ln-win__wrap img { position: relative; z-index: 0; }
.ln-win__wrap > .absolute { z-index: 3; top: 2.9rem; }
.ln-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px;
}
.ln-win__tag--open { color: #fff8ec; background: #c8142c; border-color: transparent; }
.ln-win__tag--done { color: #fffaf1; background: #1d7a5b; border-color: transparent; }
html.dark .ln-win__tag--done { color: #110908; background: #3fbf93; }
.ln-win__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.ln-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.ln-win__price { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1; color: var(--theme-600); }
.ln-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; }
.ln-win__cart, .ln-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 12px; font-weight: 600;
}
.ln-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.ln-win__cart:hover { border-color: var(--red); color: var(--red); }
.ln-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.ln-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .9rem; font-weight: 600;
  color: var(--jade); background: var(--jade-soft); border-radius: 12px;
}

/* ── Materials for every other surface ──
   The skin sheets (assets/css/skin/) and the plugin variants build each
   page from these, so a cart, a ticket or a game board reads as the same
   New Year as the homepage:
   - the fret band, slim (12px) for panels and section heads, full (18px)
     for heroes and big sheets;
   - the red envelope: red paper, a flap folded down to a point, a round
     gold seal on the flap;
   - the couplet plaque: red paper lettered in gold, a gold hairline just
     inside its edge (prices, rates, amounts, codes);
   - the seal chop: a small red square with a cream hairline, for icon
     tiles, tags and the current page;
   - the cash coin (round, square hole), the doufang diamond and the cloud
     scroll as small marks;
   - gold corner brackets, as on the hero's stat boxes, and the lacquer
     frame (red lacquer, a gold hairline) round pictures and boards;
   - the moon window: a round disc of gold light ringed with cut holes,
     behind products and drawings;
   - five hues in turn (--h1 … --h5): lacquer red, gold, jade, plum
     blossom and ink. */
:root {
  --h1: #c8142c;
  --h2: #c98a1f;
  --h3: #1d7a5b;
  --h4: #c2457a;
  --h5: #4d3128;
  --h-ink: #fff8ec;
  --theme-600-ink: #fff8ec;

  --fret-slim: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'><rect width='16' height='12' fill='%23a8102a'/><path d='M0 .8h16M0 11.2h16' stroke='%23e3ac48' stroke-width='.9'/><path d='M0 9.3H12.6V2.7H4V7.3H9.3V5H6.6M12.6 9.3H16' fill='none' stroke='%23e3ac48' stroke-width='1.3' stroke-linecap='square'/></svg>") repeat-x left center / 16px 12px;
  --fret-wide: var(--fret-band) repeat-x left center / 24px 18px;
  /* A cord of red silk with a gold thread through it */
  --cord: linear-gradient(180deg, #8e0f20 0 1px, #c8142c 1px 2px, #e3ac48 2px 3px, #c8142c 3px 4px, #8e0f20 4px);
  --cord-x: linear-gradient(90deg, #8e0f20 0 1px, #c8142c 1px 2px, #e3ac48 2px 3px, #c8142c 3px 4px, #8e0f20 4px);
  --coin-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20a10 10 0 1 1 0-20zM10 2.4a7.6 7.6 0 1 0 0 15.2a7.6 7.6 0 1 0 0-15.2zM10 3.6a6.4 6.4 0 1 1 0 12.8a6.4 6.4 0 1 1 0-12.8zM7 7v6h6V7z'/></svg>");
  --diamond-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill-rule='evenodd' d='M10 0L20 10L10 20L0 10zM10 4.6L4.6 10L10 15.4L15.4 10z'/><path d='M10 7L13 10L10 13L7 10z'/></svg>");
  --cloud-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'><path fill-rule='evenodd' d='M4 19C-1 19-1 11 4 10.5C3 4 11 1.5 14 6.5C16 0 26-.5 26.5 7.5C31.5 7 33 15 28 16.5C27.5 18.5 26 19 24 19ZM9 13.5c0-3 4.5-3 4.5 0c0 1.8-2.5 1.8-2.5.3M17 11.5c0-4 6-4 6-.5c0 2.4-3.4 2.4-3.4.4'/></svg>");
  /* Gold corner brackets: background layers, laid over anything */
  --tick: #c98a1f;
  --ticks:
    linear-gradient(var(--tick), var(--tick)) 6px 6px / 14px 2px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 6px 6px / 2px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) calc(100% - 6px) 6px / 14px 2px no-repeat,
    linear-gradient(var(--tick), var(--tick)) calc(100% - 6px) 6px / 2px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 6px calc(100% - 6px) / 14px 2px no-repeat,
    linear-gradient(var(--tick), var(--tick)) 6px calc(100% - 6px) / 2px 14px no-repeat,
    linear-gradient(var(--tick), var(--tick)) calc(100% - 6px) calc(100% - 6px) / 14px 2px no-repeat,
    linear-gradient(var(--tick), var(--tick)) calc(100% - 6px) calc(100% - 6px) / 2px 14px no-repeat;
  /* The moon window: gold light in a ring of cut holes */
  --moon: radial-gradient(circle at 50% 46%, #fff6dc 0 34%, #f9e2a6 52%, #f1c768 64%, transparent 64.4%);
  --moon-rim: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='47' fill='none' stroke='%23c8142c' stroke-width='5'/><circle cx='50' cy='50' r='43.2' fill='none' stroke='%23e3ac48' stroke-width='1.2'/><g fill='%23f7d68a'><circle cx='50' cy='3' r='1.3'/><circle cx='97' cy='50' r='1.3'/><circle cx='50' cy='97' r='1.3'/><circle cx='3' cy='50' r='1.3'/><circle cx='83.2' cy='16.8' r='1.3'/><circle cx='83.2' cy='83.2' r='1.3'/><circle cx='16.8' cy='83.2' r='1.3'/><circle cx='16.8' cy='16.8' r='1.3'/><circle cx='68' cy='6.6' r='1'/><circle cx='93.4' cy='32' r='1'/><circle cx='93.4' cy='68' r='1'/><circle cx='68' cy='93.4' r='1'/><circle cx='32' cy='93.4' r='1'/><circle cx='6.6' cy='68' r='1'/><circle cx='6.6' cy='32' r='1'/><circle cx='32' cy='6.6' r='1'/></g></svg>");
  /* Couplet paper: red, gold lettering */
  --couplet: radial-gradient(120% 90% at 50% 0%, #d21f33, #b8142a 60%, #9c1024);
  --couplet-ink: #f8dc93;
  --veil: rgba(48, 6, 14, .62);
  --lacquer-ring: 0 0 0 5px #a8102a, 0 0 0 6.5px #e3ac48;
}
html.dark {
  --h1: #e2394a;
  --h2: #e3ac48;
  --h3: #3fbf93;
  --h4: #ec7aa6;
  --h5: #e3cfb1;
  --h-ink: #170d0b;
  --theme-600-ink: #2b1205;
  --tick: #e3ac48;
  --veil: rgba(8, 3, 2, .7);
  --lacquer-ring: 0 0 0 5px #6e0a18, 0 0 0 6.5px #e3ac48;
}

/* ── Game palette ──
   The earn-games arena posts these into each HTML5 board. By day the
   boards are rice paper with a pale-gold well, tiles rising from rice
   through gold and plum to lacquer red, jade and ink; by night black
   lacquer with tiles rising through gold leaf to red, plum and jade. The arena
   chrome itself is restyled in skin/play.css. */
:root {
  --game-bg:        #fbf3e4;
  --game-surface:   #f3e5cc;
  --game-surface-2: #fffaf1;
  --game-ink:       #2b1712;
  --game-muted:     #7a5f54;
  --game-accent:    #c8142c;
  --game-accent-ink:#fff8ec;
  --game-good:      #1d7a5b;
  --game-bad:       #a8102a;
  --game-tile-1:    #f6e4bf;
  --game-tile-2:    #f4cd7c;
  --game-tile-3:    #e3ac48;
  --game-tile-4:    #e3727c;
  --game-tile-5:    #c8142c;
  --game-tile-6:    #8e0f20;
  --game-tile-7:    #1d7a5b;
  --game-tile-8:    #2b1712;
  --game-radius:    8px;
  --game-font:      'Noto Serif Display', 'Noto Serif', Georgia, serif;
  --game-font-css:  "/assets/themes/lunar-new-year/assets/fonts/fonts.css";
  --game-arena-screen: #fbf3e4;
  --game-arena-coins:  #b7801c;
  --game-arena-win:    #1d7a5b;
  --game-arena-danger: #a8102a;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'><g fill='none' stroke='%23c8142c' stroke-opacity='0.07' stroke-width='1.6' stroke-linecap='round'><path d='M14 40 c-10 0 -10 -14 0 -14 c0 -12 18 -14 22 -4 c4 -12 24 -12 26 2 c10 -2 16 10 8 16 Z'/><path d='M94 100 c-10 0 -10 -14 0 -14 c0 -12 18 -14 22 -4 c4 -12 24 -12 26 2 c10 -2 16 10 8 16 Z'/></g></svg>");
}
html.dark {
  --game-bg:        #170d0b;
  --game-surface:   #221410;
  --game-surface-2: #301c16;
  --game-ink:       #f7ead3;
  --game-muted:     #b49b88;
  --game-accent:    #e3ac48;
  --game-accent-ink:#2b1205;
  --game-good:      #3fbf93;
  --game-bad:       #f05a68;
  --game-tile-1:    #3b2a12;
  --game-tile-2:    #6b4c1c;
  --game-tile-3:    #b7801c;
  --game-tile-4:    #e3ac48;
  --game-tile-5:    #e2394a;
  --game-tile-6:    #ec7aa6;
  --game-tile-7:    #3fbf93;
  --game-tile-8:    #fbeccb;
  --game-arena-screen: #120a08;
  --game-arena-coins:  #f4cd7c;
  --game-arena-win:    #3fbf93;
  --game-arena-danger: #f05a68;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'><g fill='none' stroke='%23e3ac48' stroke-opacity='0.08' stroke-width='1.6' stroke-linecap='round'><path d='M14 40 c-10 0 -10 -14 0 -14 c0 -12 18 -14 22 -4 c4 -12 24 -12 26 2 c10 -2 16 10 8 16 Z'/><path d='M94 100 c-10 0 -10 -14 0 -14 c0 -12 18 -14 22 -4 c4 -12 24 -12 26 2 c10 -2 16 10 8 16 Z'/></g></svg>");
}

/* ── Standalone pages ──
   Age check, unsubscribe and change language are their own documents that
   never run header.php's head_meta, so the skin sheets don't reach them;
   their few rules live here, where they do load. */
html body.age-check-body { background: var(--blossoms), var(--paper); font-family: var(--font-ui); }
html body .age-check-card {
  position: relative; overflow: hidden;
  padding-top: calc(18px + 1.6rem);
  background: var(--ticks), var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}
html body .age-check-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: var(--fret-wide);
}
html body .age-check-logo {
  border-radius: 6px;
  background: #fffaf1;
  box-shadow: 0 0 0 2px #c8142c, 0 0 0 5px #fffaf1, 0 0 0 7px #e3ac48;
  padding: 8px;
}
html body .age-check-title { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
html body .age-check-input { border-radius: 8px; border: 1.5px solid var(--rule); background: var(--paper-2); font-family: var(--font-ui); }
html body .age-check-input:focus { border-color: var(--theme-500); box-shadow: 0 0 0 3px var(--red-soft); outline: none; }
html body .age-check-submit { border-radius: 10px; background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--btn-shadow); font-family: var(--font-ui); }
html body .age-check-foot a { color: var(--theme-600); }
html body .lang-card {
  border-radius: 10px !important;
  border: 1.5px dashed var(--rule) !important;
  background: var(--paper-2) !important;
  transition: transform .15s ease, border-color .15s ease;
}
html body .lang-card:hover { transform: translateY(-2px); border-color: var(--theme-400) !important; }
html body .lang-card:has(input:checked) {
  border-style: solid !important;
  border-color: transparent !important;
  box-shadow: var(--lacquer-ring), var(--shadow) !important;
  background: var(--ticks), var(--gold-soft) !important;
}
html body .lang-card img { border-radius: 50%; box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px var(--h2); }
html body .lang-card:has(input:checked) .rounded-full:has(> .fa-check) { background: var(--btn-bg) !important; color: var(--btn-ink) !important; }
html body:has(.lang-card) h1 { font-family: var(--font-display); font-weight: 700 !important; letter-spacing: 0 !important; }
html body:has(.lang-card) .footer-safe { box-shadow: 0 -12px 24px -18px rgba(48, 6, 14, .55); }
html body:has(.lang-card) .footer-safe::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 5px; background: var(--cord); }
html body:has(.lang-card) .w-9.h-9.rounded-xl:has(> .fa-language) { background: #b8142a !important; color: #fff4dc !important; border-radius: 6px !important; outline: 1px solid rgba(255, 244, 220, .6); outline-offset: -4px; }
html.dark option { background-color: var(--paper-2) !important; color: var(--ink) !important; }

/* 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: #1d7c5c; --px-warn: #b45309; --px-crit: #c7142c; --px-info: #366fed; }
html.dark:root { --px-good: #4bc49a; --px-warn: #fbbf23; --px-crit: #ef949d; --px-info: #8faff5; }

/* Changing language, the scene (lunar-new-year.js): the red envelope, sealed
   before the reload and opened after it, its card brushed with the new name
   and stamped. The envelope is the same on both pages, so the reload never
   shows. */
.ln-lang-stage { background: color-mix(in srgb, var(--lacquer) 52%, transparent); }
.ln-lang-scene {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: min(560px, 100%); box-sizing: border-box; padding: 140px 16px 16px;
  font-family: var(--font-ui); text-align: center;
}
.ln-lang-lantern {
  position: absolute; top: 26px; left: 8%; width: 36px; height: 40px; border-radius: 46%;
  background: radial-gradient(circle at 40% 35%, #f05a68, #c8142c 55%, #870d22);
  box-shadow: inset 0 0 0 1px rgba(244, 205, 124, .5), 0 0 18px rgba(240, 90, 104, .35);
  transform-origin: 50% -26px;
}
.ln-lang-lantern + .ln-lang-lantern { left: auto; right: 8%; }
.ln-lang-lantern::before {
  content: ''; position: absolute; left: 17px; top: -26px; width: 2px; height: 26px; background: var(--leaf);
}
.ln-lang-lantern::after {
  content: ''; position: absolute; left: 15px; bottom: -14px; width: 6px; height: 14px; border-radius: 0 0 3px 3px;
  background: var(--leaf);
}
.ln-lang-env { position: relative; display: grid; width: min(300px, 100%); }
.ln-lang-env > * { grid-area: 1 / 1; }
.ln-lang-back { z-index: 0; border-radius: 10px; background: #7e0c1c; }
.ln-lang-lid {
  z-index: 0; align-self: start; height: 66px; margin-top: -66px; background: linear-gradient(0deg, #9c1024, #7e0c1c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: 50% 100%; transform: scaleY(0);
}
.ln-lang-card {
  position: relative; z-index: 1; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 10px 12px 0; padding: 18px 14px 16px; border-radius: 6px;
  background: var(--paper-2); color: var(--ink); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--rule);
}
.ln-lang-new {
  max-width: 100%; overflow-wrap: anywhere; font: 700 clamp(26px, 7.4vw, 40px)/1.15 var(--font-display);
  clip-path: inset(-20% -5% -20% -5%);
}
.ln-lang-sign { display: inline-flex; align-items: center; gap: 10px; }
.ln-lang-flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.ln-lang-chop {
  display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; box-sizing: border-box; border-radius: 6px;
  background: #c8142c; color: #fff4e0; font: 900 14px/1 var(--font-seal); letter-spacing: .06em;
  box-shadow: inset 0 0 0 2px rgba(255, 244, 224, .55); transform: rotate(-6deg);
}
.ln-lang-front {
  position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center;
  min-height: 180px; padding: 92px 16px 22px; box-sizing: border-box; border-radius: 10px;
  background: radial-gradient(120% 60% at 50% 100%, rgba(244, 205, 124, .18), transparent 70%), linear-gradient(170deg, #c8142c, #a8102a 55%, #8e0f20);
  box-shadow: 0 26px 46px -22px rgba(0, 0, 0, .65);
}
.ln-lang-front::before {
  content: ''; position: absolute; inset: 6px; border: 1px solid var(--leaf); border-radius: 6px; opacity: .75; pointer-events: none;
}
.ln-lang-old { max-width: 100%; overflow-wrap: anywhere; color: var(--leaf-2); font: 700 clamp(24px, 6.6vw, 34px)/1.15 var(--font-display); }
.ln-lang-shine { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ln-lang-shine i {
  display: block; width: 40%; height: 100%; transform: translateX(260%);
  background: linear-gradient(100deg, transparent, rgba(255, 230, 170, .32), transparent);
}
.ln-lang-flap {
  z-index: 3; align-self: start; height: 66px; border-radius: 10px 10px 0 0; transform-origin: 50% 0;
  background: linear-gradient(180deg, #b8142a, #9c1024); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.ln-lang-seal {
  z-index: 4; align-self: start; justify-self: center; display: grid; place-items: center;
  width: 42px; height: 42px; margin-top: 45px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8dea7, #e3ac48 55%, #b7801c); color: #870d22;
  font: 800 12px/1 var(--font-ui); letter-spacing: .04em; box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(135, 13, 34, .25);
}

/* Out: the envelope slides in, the seal is pressed and the gold catches the light. */
.px-lang-stage-out .ln-lang-env { animation: ln-lang-slide .5s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .ln-lang-seal { animation: ln-lang-seal .3s cubic-bezier(.2, .9, .3, 1.4) .48s both; }
.px-lang-stage-out .ln-lang-chop { transform: rotate(-6deg) scale(2.2); opacity: 0; }
.px-lang-stage-out .ln-lang-shine i { animation: ln-lang-shine .36s ease-in-out .44s both; }
.ln-lang-stage .ln-lang-lantern { animation: ln-lang-swing .8s ease-in-out both; }
.ln-lang-stage .ln-lang-lantern + .ln-lang-lantern { animation-delay: .06s; }
/* In: the seal breaks, the flap opens, the card rises, is brushed and stamped. */
.px-lang-stage-in .ln-lang-seal { animation: ln-lang-unseal .2s ease-in .1s both; }
.px-lang-stage-in .ln-lang-flap { animation: ln-lang-fold .16s ease-in .2s both; }
.px-lang-stage-in .ln-lang-lid { animation: ln-lang-unfold .16s ease-out .34s both; }
.px-lang-stage-in .ln-lang-card { animation: ln-lang-rise .4s cubic-bezier(.2, .8, .3, 1.05) .4s both; }
.px-lang-stage-in .ln-lang-old { animation: ln-lang-dim .3s ease .4s both; }
.px-lang-stage-in .ln-lang-new { animation: ln-lang-brush .4s ease-out .5s both; }
.px-lang-stage-in .ln-lang-to-rtl .ln-lang-new { animation-name: ln-lang-brush-rtl; }
.px-lang-stage-in .ln-lang-chop { animation: ln-lang-chop .22s cubic-bezier(.2, .9, .3, 1.4) .8s both; }
.px-lang-stage-in .ln-lang-scene { animation: ln-lang-scene-out .25s ease-in 1.02s both; }
@keyframes ln-lang-slide { from { transform: translateX(-70px) rotate(-10deg); opacity: 0; } }
@keyframes ln-lang-seal { from { transform: scale(1.9); opacity: 0; } }
@keyframes ln-lang-shine { from { transform: translateX(-110%); } }
@keyframes ln-lang-swing { 25% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 85% { transform: rotate(2deg); } }
@keyframes ln-lang-unseal { to { transform: scale(.5) rotate(25deg); opacity: 0; } }
@keyframes ln-lang-fold { to { transform: scaleY(0); } }
@keyframes ln-lang-unfold { to { transform: none; } }
@keyframes ln-lang-rise { to { transform: translateY(calc(-100% + 4px)); } }
@keyframes ln-lang-dim { to { opacity: .4; } }
@keyframes ln-lang-brush { from { clip-path: inset(-20% 100% -20% -5%); } }
@keyframes ln-lang-brush-rtl { from { clip-path: inset(-20% -5% -20% 100%); } }
@keyframes ln-lang-chop { from { transform: rotate(-6deg) scale(2.2); opacity: 0; } }
@keyframes ln-lang-scene-out { to { transform: translateY(24px); opacity: 0; } }
@media (max-width: 460px) {
  .ln-lang-lantern { display: none; }
  .ln-lang-scene { padding: 132px 0 12px; }
}

/* 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(> :is(.ed-btn-secondary, .ln-hero__cta2)) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: .5rem; }
  html body :is(div, p):has(> .ed-btn-primary):has(> :is(.ed-btn-secondary, .ln-hero__cta2)) > :is(.ed-btn-primary, .ed-btn-secondary, .ln-hero__cta2) {
    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(> :is(.ed-btn-secondary, .ln-hero__cta2)) > :is(.ed-btn-primary, .ed-btn-secondary, .ln-hero__cta2) > :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.dark [role="dialog"] .spin-btn:not(:disabled) {
  color: var(--btn-ink);
}
/* rev 868fe5109c9f2a2b */