/* ============================================================
   MID-AUTUMN THEME — a harvest moon over still water.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the Moon Festival night: the full moon of the
   eighth lunar month, mooncakes pressed with petals, paper
   lanterns (round, rabbit and star), osmanthus blossom and
   river lanterns on the water. Plum and indigo night with
   lantern amber and moon gold (the default); by day a rice-paper
   dusk, lavender over peach, with the moon just risen.

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

:root {
  --font-display: 'Cormorant', 'Noto Serif', 'Songti SC', 'Noto Serif SC', Georgia, serif;
  --font-ui:      'Mulish', 'Inter', system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-brush:   'Moon Brush', 'Kaiti SC', 'STKaiti', 'KaiTi', serif;

  --paper:        #fbf6ee;
  --paper-2:      #ffffff;
  --paper-3:      #f3ebdf;
  --ink:          #251c40;
  --ink-2:        #453a63;
  --ink-soft:     #75698c;
  --rule:         rgba(37, 28, 64, 0.13);
  --rule-soft:    rgba(37, 28, 64, 0.07);
  --radius:       18px;
  --radius-sm:    12px;
  --shadow:       0 1px 2px rgba(37, 28, 64, .06), 0 6px 16px -8px rgba(37, 28, 64, .18);
  --shadow-md:    0 2px 4px rgba(37, 28, 64, .06), 0 18px 34px -16px rgba(37, 28, 64, .34);

  /* Plum */
  --theme-50:  #f8eff6;
  --theme-100: #efdcea;
  --theme-200: #dcb6d3;
  --theme-300: #c48ab8;
  --theme-400: #a8649a;
  --theme-500: #8c4580;
  --theme-600: #74356a;
  --theme-700: #5c2954;
  --theme-800: #441e3f;
  --theme-900: #2d142a;
  --theme-500-rgb: 140, 69, 128;
  --theme-600-rgb: 116, 53, 106;

  /* The night, the colour of the footer, winners, wallet and splash in both modes */
  --night:   #17123a;
  --night-2: #211a4c;
  --night-3: #2c2360;
  --on-night: #f8efdb;
  --on-night-soft: rgba(248, 239, 219, .76);

  /* Moon gold, lantern amber, osmanthus, mooncake crust */
  --moon: #f6dc96; --moon-2: #efc977; --moon-3: #d9a94c;
  --lantern: #e8792b; --lantern-2: #f29b38; --lantern-deep: #b9501d;
  --osmanthus: #f2b632;
  --crust: #c07a35; --crust-2: #8e5121;
  --plum: #74356a;

  /* Names other themes' shared markup reaches for */
  --gold:       #a8741f;
  --gold-2:     #e0ad4f;
  --gold-soft:  rgba(140, 69, 128, 0.08);
  --gold-ink:   #251c40;
  --felt:       #17123a;
  --felt-2:     #211a4c;
  --on-felt:    #f8efdb;
  --on-felt-soft: rgba(248, 239, 219, 0.78);
  --peacock:    #2f8f83;
  --peacock-soft: rgba(47, 143, 131, 0.11);
  --red:        #74356a;
  --red-soft:   rgba(140, 69, 128, 0.09);
  --rose:       #b9501d;
  --rose-soft:  rgba(140, 69, 128, 0.09);

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

  /* Buttons: lantern persimmon by day, moon gold by night */
  --btn-bg:       #b9501d;
  --btn-bg-hover: #b45524;
  --btn-ink:      #fff8ee;
  --btn-shadow:   0 2px 0 #8a3a14, 0 10px 20px -10px rgba(185, 80, 29, .7);
  --btn-shadow-hover: 0 3px 0 #8a3a14, 0 14px 24px -10px rgba(232, 121, 43, .75);

  /* The moon through a month: the theme's border band */
  --phase-band: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14'><circle cx='10.0' cy='7' r='5' fill='%23ead9c4'/><circle cx='10.0' cy='7' r='5' fill='%23e0ad4f'/><circle cx='20.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='30.0' cy='7' r='5' fill='%23ead9c4'/><path d='M30.0 2A5 5 0 0 0 30.0 12A2.6 5 0 0 0 30.0 2Z' fill='%23e0ad4f'/><circle cx='40.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='50.0' cy='7' r='5' fill='%23ead9c4'/><path d='M50.0 2A5 5 0 0 0 50.0 12Z' fill='%23e0ad4f'/><circle cx='60.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='70.0' cy='7' r='5' fill='%23ead9c4'/><path d='M70.0 2A5 5 0 0 0 70.0 12A2.6 5 0 0 1 70.0 2Z' fill='%23e0ad4f'/><circle cx='80.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='90.0' cy='7' r='5' fill='%23ead9c4'/><circle cx='90.0' cy='7' r='4.4' fill='none' stroke='%23b98fb0' stroke-width='1.1'/><circle cx='100.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='110.0' cy='7' r='5' fill='%23ead9c4'/><path d='M110.0 2A5 5 0 0 1 110.0 12A2.6 5 0 0 0 110.0 2Z' fill='%23e0ad4f'/><circle cx='120.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='130.0' cy='7' r='5' fill='%23ead9c4'/><path d='M130.0 2A5 5 0 0 1 130.0 12Z' fill='%23e0ad4f'/><circle cx='140.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='150.0' cy='7' r='5' fill='%23ead9c4'/><path d='M150.0 2A5 5 0 0 1 150.0 12A2.6 5 0 0 1 150.0 2Z' fill='%23e0ad4f'/><circle cx='160.0' cy='7' r='.9' fill='%23b98fb0'/></svg>") repeat-x left center / 160px 14px;
  --phase-band-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14'><circle cx='10.0' cy='7' r='5' fill='%232c2559'/><circle cx='10.0' cy='7' r='5' fill='%23f6dc96'/><circle cx='20.0' cy='7' r='.9' fill='%238f7fb8'/><circle cx='30.0' cy='7' r='5' fill='%232c2559'/><path d='M30.0 2A5 5 0 0 0 30.0 12A2.6 5 0 0 0 30.0 2Z' fill='%23f6dc96'/><circle cx='40.0' cy='7' r='.9' fill='%238f7fb8'/><circle cx='50.0' cy='7' r='5' fill='%232c2559'/><path d='M50.0 2A5 5 0 0 0 50.0 12Z' fill='%23f6dc96'/><circle cx='60.0' cy='7' r='.9' fill='%238f7fb8'/><circle cx='70.0' cy='7' r='5' fill='%232c2559'/><path d='M70.0 2A5 5 0 0 0 70.0 12A2.6 5 0 0 1 70.0 2Z' fill='%23f6dc96'/><circle cx='80.0' cy='7' r='.9' fill='%238f7fb8'/><circle cx='90.0' cy='7' r='5' fill='%232c2559'/><circle cx='90.0' cy='7' r='4.4' fill='none' stroke='%238f7fb8' stroke-width='1.1'/><circle cx='100.0' cy='7' r='.9' fill='%238f7fb8'/><circle cx='110.0' cy='7' r='5' fill='%232c2559'/><path d='M110.0 2A5 5 0 0 1 110.0 12A2.6 5 0 0 0 110.0 2Z' fill='%23f6dc96'/><circle cx='120.0' cy='7' r='.9' fill='%238f7fb8'/><circle cx='130.0' cy='7' r='5' fill='%232c2559'/><path d='M130.0 2A5 5 0 0 1 130.0 12Z' fill='%23f6dc96'/><circle cx='140.0' cy='7' r='.9' fill='%238f7fb8'/><circle cx='150.0' cy='7' r='5' fill='%232c2559'/><path d='M150.0 2A5 5 0 0 1 150.0 12A2.6 5 0 0 1 150.0 2Z' fill='%23f6dc96'/><circle cx='160.0' cy='7' r='.9' fill='%238f7fb8'/></svg>") repeat-x left center / 160px 14px;
  /* Osmanthus florets scattered across the page */
  --florets: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'><g fill='%23e0a52c' fill-opacity='.30'><circle cx='28' cy='24' r='2.2'/><circle cx='32' cy='27' r='2.2'/><circle cx='28' cy='30' r='2.2'/><circle cx='24' cy='27' r='2.2'/><circle cx='118' cy='104' r='1.8'/><circle cx='121' cy='107' r='1.8'/><circle cx='118' cy='110' r='1.8'/><circle cx='115' cy='107' r='1.8'/><circle cx='134' cy='96' r='1.5'/><circle cx='137' cy='98' r='1.5'/><circle cx='134' cy='100' r='1.5'/><circle cx='131' cy='98' r='1.5'/></g><g fill='%2374356a' fill-opacity='.08'><circle cx='80' cy='60' r='1.1'/><circle cx='150' cy='30' r='.9'/><circle cx='54' cy='140' r='1'/><circle cx='10' cy='96' r='.8'/></g></svg>");
  /* The night sky behind the footer, winners, wallet, splash and login */
  --night-stars: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><g fill='%23fff3d6'><circle cx='20' cy='30' r='.9' fill-opacity='.8'/><circle cx='70' cy='12' r='.6' fill-opacity='.6'/><circle cx='130' cy='50' r='1.1' fill-opacity='.8'/><circle cx='190' cy='22' r='.7' fill-opacity='.6'/><circle cx='40' cy='110' r='.7' fill-opacity='.5'/><circle cx='100' cy='130' r='.9' fill-opacity='.7'/><circle cx='170' cy='100' r='.6' fill-opacity='.5'/><circle cx='210' cy='160' r='1' fill-opacity='.7'/><circle cx='60' cy='190' r='.8' fill-opacity='.6'/><circle cx='150' cy='200' r='.6' fill-opacity='.5'/></g><g fill='%23f2b632' fill-opacity='.35'><circle cx='160' cy='160' r='1.6'/><circle cx='163' cy='162' r='1.6'/><circle cx='160' cy='164' r='1.6'/><circle cx='157' cy='162' r='1.6'/></g></svg>");
  --night-bg:
    radial-gradient(480px 300px at 88% -40px, rgba(246, 220, 150, .22), transparent 70%),
    radial-gradient(520px 320px at 0% 110%, rgba(140, 69, 128, .38), transparent 70%),
    radial-gradient(420px 260px at 60% 120%, rgba(232, 121, 43, .14), transparent 70%),
    var(--night-stars),
    linear-gradient(180deg, #1c1647 0%, #151036 100%);
  /* Water: ripples of moonlight on a dark lake, as a 120×24 tile */
  --ripples: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'><g fill='none' stroke='%23f6dc96' stroke-linecap='round'><path d='M6 6h22' stroke-opacity='.35' stroke-width='1.2'/><path d='M60 14h30' stroke-opacity='.25' stroke-width='1.2'/><path d='M34 20h14' stroke-opacity='.2'/><path d='M96 4h12' stroke-opacity='.3'/></g></svg>");

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

html.dark {
  --paper:        #13102e;
  --paper-2:      #1c1841;
  --paper-3:      #27214f;
  --ink:          #f6eedc;
  --ink-2:        #ddd3c1;
  --ink-soft:     #a79fbe;
  --rule:         rgba(246, 238, 220, 0.13);
  --rule-soft:    rgba(246, 238, 220, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .7);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .4), 0 18px 36px -14px rgba(0, 0, 0, .85);

  /* Moon gold */
  --theme-50:  #1f1a3c;
  --theme-100: #2c2550;
  --theme-200: #5b4a3a;
  --theme-300: #f9e7b8;
  --theme-400: #f6dc96;
  --theme-500: #f0c96e;
  --theme-600: #f4d488;
  --theme-700: #f9e7b8;
  --theme-800: #fcf1d4;
  --theme-900: #fef9ec;
  --theme-500-rgb: 240, 201, 110;
  --theme-600-rgb: 244, 212, 136;

  --gold:       #f4d488;
  --gold-2:     #f9e7b8;
  --gold-soft:  rgba(240, 201, 110, 0.12);
  --felt:       #0e0b25;
  --felt-2:     #1c1841;
  --peacock:    #6fd3c4;
  --peacock-soft: rgba(111, 211, 196, 0.13);
  --red:        #f4d488;
  --red-soft:   rgba(240, 201, 110, 0.13);
  --rose:       #f29b38;
  --rose-soft:  rgba(240, 201, 110, 0.13);

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

  --btn-bg:       #f3d38b;
  --btn-bg-hover: #f8e0a6;
  --btn-ink:      #1d1640;
  --btn-shadow:   0 2px 0 #c99a45, 0 10px 26px -10px rgba(246, 220, 150, .55);
  --btn-shadow-hover: 0 3px 0 #c99a45, 0 14px 30px -10px rgba(246, 220, 150, .7);

  --phase-band: var(--phase-band-night);
  --florets: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='170' height='170' viewBox='0 0 170 170'><g fill='%23f2b632' fill-opacity='.16'><circle cx='28' cy='24' r='2.2'/><circle cx='32' cy='27' r='2.2'/><circle cx='28' cy='30' r='2.2'/><circle cx='24' cy='27' r='2.2'/><circle cx='118' cy='104' r='1.8'/><circle cx='121' cy='107' r='1.8'/><circle cx='118' cy='110' r='1.8'/><circle cx='115' cy='107' r='1.8'/></g><g fill='%23fff3d6' fill-opacity='.35'><circle cx='80' cy='60' r='.8'/><circle cx='150' cy='30' r='.6'/><circle cx='54' cy='140' r='.7'/><circle cx='10' cy='96' r='.6'/><circle cx='140' cy='150' r='.5'/></g></svg>");
  --page-bg:
    radial-gradient(900px 420px at 88% -160px, rgba(246, 220, 150, 0.09), transparent 70%) no-repeat,
    radial-gradient(900px 420px at 8% -140px, rgba(140, 69, 128, 0.16), transparent 70%) no-repeat,
    var(--florets) repeat,
    var(--paper);
}

/* ── Materials ──
   The pieces every surface is built from, shared by the skin sheets
   (assets/css/skin/) and the plugin variants:
   - the moon (--moon-disc) for medallions, coins and chosen rings, and
     the mooncake's crust (--crust-disc) where a piece is "baked";
   - lacquer and gold fret (--lacquer, --fret): a mooncake tin, the frame
     of banners, galleries and featured panels;
   - a string of paper lanterns (--lantern-line) hung across the top of
     modals, sheets and section heads;
   - the fluted rim of a mooncake (--fluted-mask), behind icons, numbers
     and the current page;
   - a scalloped doily edge (--scallop), the cut top of stat cards,
     tickets, slips and tags;
   - an osmanthus floret (--floret) for bullets, full stops and dividers,
     and a single hanging lantern (--lantern-one) on frames' shoulders;
   - the moon's phases (--phase-band) under table heads and along sheets,
     and a lantern-glow line (--glow-line) for bars and progress. */
:root {
  --fluted-mask: 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='39'/><circle cx='88.50' cy='50.00' r='10.6'/><circle cx='85.57' cy='64.73' r='10.6'/><circle cx='77.22' cy='77.22' r='10.6'/><circle cx='64.73' cy='85.57' r='10.6'/><circle cx='50.00' cy='88.50' r='10.6'/><circle cx='35.27' cy='85.57' r='10.6'/><circle cx='22.78' cy='77.22' r='10.6'/><circle cx='14.43' cy='64.73' r='10.6'/><circle cx='11.50' cy='50.00' r='10.6'/><circle cx='14.43' cy='35.27' r='10.6'/><circle cx='22.78' cy='22.78' r='10.6'/><circle cx='35.27' cy='14.43' r='10.6'/><circle cx='50.00' cy='11.50' r='10.6'/><circle cx='64.73' cy='14.43' r='10.6'/><circle cx='77.22' cy='22.78' r='10.6'/><circle cx='85.57' cy='35.27' r='10.6'/></svg>") center / contain no-repeat;
  --floret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><ellipse cx='20' cy='11.5' rx='6.2' ry='8.4' transform='rotate(0 20 20)' fill='%23f2b632'/><ellipse cx='20' cy='11.5' rx='6.2' ry='8.4' transform='rotate(90 20 20)' fill='%23f2b632'/><ellipse cx='20' cy='11.5' rx='6.2' ry='8.4' transform='rotate(180 20 20)' fill='%23f2b632'/><ellipse cx='20' cy='11.5' rx='6.2' ry='8.4' transform='rotate(270 20 20)' fill='%23f2b632'/><circle cx='20' cy='20' r='4' fill='%23c97a14'/></svg>") center / contain no-repeat;
  --floret-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><ellipse cx='20' cy='11.5' rx='6.2' ry='8.4' transform='rotate(0 20 20)' fill='%23000'/><ellipse cx='20' cy='11.5' rx='6.2' ry='8.4' transform='rotate(90 20 20)' fill='%23000'/><ellipse cx='20' cy='11.5' rx='6.2' ry='8.4' transform='rotate(180 20 20)' fill='%23000'/><ellipse cx='20' cy='11.5' rx='6.2' ry='8.4' transform='rotate(270 20 20)' fill='%23000'/><circle cx='20' cy='20' r='4' fill='%23000'/></svg>") center / contain no-repeat;
  /* A single paper lantern on its cord, tucked on frames' shoulders */
  --lantern-one: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><path d='M20 0 V9' stroke='%236b3a2a' stroke-width='1.4'/><circle cx='20' cy='28' r='19' fill='%23ffe3a0' fill-opacity='.22'/><rect x='14' y='8' width='12' height='4' rx='1.3' fill='%233a2340'/><ellipse cx='20' cy='26' rx='15' ry='13.5' fill='%23d4492a'/><ellipse cx='20' cy='25' rx='8' ry='8.6' fill='%23ffe3a0' fill-opacity='.85'/><path d='M20 13 V39 M12 14.4 Q5.4 26 12 37.6 M28 14.4 Q34.6 26 28 37.6' fill='none' stroke='%233a2340' stroke-opacity='.38' stroke-width='1.1'/><rect x='14' y='38' width='12' height='4' rx='1.3' fill='%233a2340'/><path d='M20 42 V58' stroke='%23d4492a' stroke-width='2.6' stroke-linecap='round'/></svg>") center top / contain no-repeat;
  --lantern-one-amber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><path d='M20 0 V9' stroke='%236b3a2a' stroke-width='1.4'/><circle cx='20' cy='28' r='19' fill='%23fff1c2' fill-opacity='.22'/><rect x='14' y='8' width='12' height='4' rx='1.3' fill='%233a2340'/><ellipse cx='20' cy='26' rx='15' ry='13.5' fill='%23ef8a2e'/><ellipse cx='20' cy='25' rx='8' ry='8.6' fill='%23fff1c2' fill-opacity='.85'/><path d='M20 13 V39 M12 14.4 Q5.4 26 12 37.6 M28 14.4 Q34.6 26 28 37.6' fill='none' stroke='%233a2340' stroke-opacity='.38' stroke-width='1.1'/><rect x='14' y='38' width='12' height='4' rx='1.3' fill='%233a2340'/><path d='M20 42 V58' stroke='%23ef8a2e' stroke-width='2.6' stroke-linecap='round'/></svg>") center top / contain no-repeat;
  --lantern-line: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='34' viewBox='0 0 180 34'><path d='M0 3 Q45.0 13 90.0 3 Q135.0 13 180 3' fill='none' stroke='%236b3a2a' stroke-width='1.3'/><path d='M45.0 8 V12' stroke='%236b3a2a' stroke-width='1.1'/><rect x='41.4' y='11.4' width='7.2' height='2.4' rx='.8' fill='%233a2340'/><ellipse cx='45.0' cy='19.6' rx='8' ry='6.8' fill='%23d4492a'/><ellipse cx='45.0' cy='19' rx='4.2' ry='4.4' fill='%23ffe3a0' fill-opacity='.85'/><path d='M45.0 13 V26.4 M40.6 13.6 Q37.4 19.6 40.6 25.8 M49.4 13.6 Q52.6 19.6 49.4 25.8' fill='none' stroke='%233a2340' stroke-opacity='.4' stroke-width='.8'/><rect x='41.4' y='25.6' width='7.2' height='2.4' rx='.8' fill='%233a2340'/><path d='M45.0 28 V33' stroke='%23d4492a' stroke-width='1.6' stroke-linecap='round'/><path d='M135.0 8 V12' stroke='%236b3a2a' stroke-width='1.1'/><rect x='131.4' y='11.4' width='7.2' height='2.4' rx='.8' fill='%233a2340'/><ellipse cx='135.0' cy='19.6' rx='8' ry='6.8' fill='%23ef8a2e'/><ellipse cx='135.0' cy='19' rx='4.2' ry='4.4' fill='%23ffe3a0' fill-opacity='.85'/><path d='M135.0 13 V26.4 M130.6 13.6 Q127.4 19.6 130.6 25.8 M139.4 13.6 Q142.6 19.6 139.4 25.8' fill='none' stroke='%233a2340' stroke-opacity='.4' stroke-width='.8'/><rect x='131.4' y='25.6' width='7.2' height='2.4' rx='.8' fill='%233a2340'/><path d='M135.0 28 V33' stroke='%23ef8a2e' stroke-width='1.6' stroke-linecap='round'/><g transform='translate(12 6.7)'><circle cx='0' cy='-1.5' r='1.4' fill='%23e0a52c'/><circle cx='1.5' cy='0' r='1.4' fill='%23e0a52c'/><circle cx='0' cy='1.5' r='1.4' fill='%23e0a52c'/><circle cx='-1.5' cy='0' r='1.4' fill='%23e0a52c'/></g><g transform='translate(26 8.5)'><circle cx='0' cy='-1.5' r='1.4' fill='%23e0a52c'/><circle cx='1.5' cy='0' r='1.4' fill='%23e0a52c'/><circle cx='0' cy='1.5' r='1.4' fill='%23e0a52c'/><circle cx='-1.5' cy='0' r='1.4' fill='%23e0a52c'/></g><g transform='translate(64 8.5)'><circle cx='0' cy='-1.5' r='1.4' fill='%23e0a52c'/><circle cx='1.5' cy='0' r='1.4' fill='%23e0a52c'/><circle cx='0' cy='1.5' r='1.4' fill='%23e0a52c'/><circle cx='-1.5' cy='0' r='1.4' fill='%23e0a52c'/></g><g transform='translate(78 6.7)'><circle cx='0' cy='-1.5' r='1.4' fill='%23e0a52c'/><circle cx='1.5' cy='0' r='1.4' fill='%23e0a52c'/><circle cx='0' cy='1.5' r='1.4' fill='%23e0a52c'/><circle cx='-1.5' cy='0' r='1.4' fill='%23e0a52c'/></g><g transform='translate(102 6.7)'><circle cx='0' cy='-1.5' r='1.4' fill='%23e0a52c'/><circle cx='1.5' cy='0' r='1.4' fill='%23e0a52c'/><circle cx='0' cy='1.5' r='1.4' fill='%23e0a52c'/><circle cx='-1.5' cy='0' r='1.4' fill='%23e0a52c'/></g><g transform='translate(116 8.5)'><circle cx='0' cy='-1.5' r='1.4' fill='%23e0a52c'/><circle cx='1.5' cy='0' r='1.4' fill='%23e0a52c'/><circle cx='0' cy='1.5' r='1.4' fill='%23e0a52c'/><circle cx='-1.5' cy='0' r='1.4' fill='%23e0a52c'/></g><g transform='translate(154 8.5)'><circle cx='0' cy='-1.5' r='1.4' fill='%23e0a52c'/><circle cx='1.5' cy='0' r='1.4' fill='%23e0a52c'/><circle cx='0' cy='1.5' r='1.4' fill='%23e0a52c'/><circle cx='-1.5' cy='0' r='1.4' fill='%23e0a52c'/></g><g transform='translate(168 6.7)'><circle cx='0' cy='-1.5' r='1.4' fill='%23e0a52c'/><circle cx='1.5' cy='0' r='1.4' fill='%23e0a52c'/><circle cx='0' cy='1.5' r='1.4' fill='%23e0a52c'/><circle cx='-1.5' cy='0' r='1.4' fill='%23e0a52c'/></g></svg>") repeat-x left top / 180px 34px;
  --lantern-line-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='34' viewBox='0 0 180 34'><path d='M0 3 Q45.0 13 90.0 3 Q135.0 13 180 3' fill='none' stroke='%23c9a26a' stroke-width='1.3'/><path d='M45.0 8 V12' stroke='%23c9a26a' stroke-width='1.1'/><rect x='41.4' y='11.4' width='7.2' height='2.4' rx='.8' fill='%232a1d3a'/><ellipse cx='45.0' cy='19.6' rx='8' ry='6.8' fill='%23e8562c'/><ellipse cx='45.0' cy='19' rx='4.2' ry='4.4' fill='%23fff1c2' fill-opacity='.85'/><path d='M45.0 13 V26.4 M40.6 13.6 Q37.4 19.6 40.6 25.8 M49.4 13.6 Q52.6 19.6 49.4 25.8' fill='none' stroke='%232a1d3a' stroke-opacity='.4' stroke-width='.8'/><rect x='41.4' y='25.6' width='7.2' height='2.4' rx='.8' fill='%232a1d3a'/><path d='M45.0 28 V33' stroke='%23e8562c' stroke-width='1.6' stroke-linecap='round'/><path d='M135.0 8 V12' stroke='%23c9a26a' stroke-width='1.1'/><rect x='131.4' y='11.4' width='7.2' height='2.4' rx='.8' fill='%232a1d3a'/><ellipse cx='135.0' cy='19.6' rx='8' ry='6.8' fill='%23f29b38'/><ellipse cx='135.0' cy='19' rx='4.2' ry='4.4' fill='%23fff1c2' fill-opacity='.85'/><path d='M135.0 13 V26.4 M130.6 13.6 Q127.4 19.6 130.6 25.8 M139.4 13.6 Q142.6 19.6 139.4 25.8' fill='none' stroke='%232a1d3a' stroke-opacity='.4' stroke-width='.8'/><rect x='131.4' y='25.6' width='7.2' height='2.4' rx='.8' fill='%232a1d3a'/><path d='M135.0 28 V33' stroke='%23f29b38' stroke-width='1.6' stroke-linecap='round'/><g transform='translate(12 6.7)'><circle cx='0' cy='-1.5' r='1.4' fill='%23f2b632'/><circle cx='1.5' cy='0' r='1.4' fill='%23f2b632'/><circle cx='0' cy='1.5' r='1.4' fill='%23f2b632'/><circle cx='-1.5' cy='0' r='1.4' fill='%23f2b632'/></g><g transform='translate(26 8.5)'><circle cx='0' cy='-1.5' r='1.4' fill='%23f2b632'/><circle cx='1.5' cy='0' r='1.4' fill='%23f2b632'/><circle cx='0' cy='1.5' r='1.4' fill='%23f2b632'/><circle cx='-1.5' cy='0' r='1.4' fill='%23f2b632'/></g><g transform='translate(64 8.5)'><circle cx='0' cy='-1.5' r='1.4' fill='%23f2b632'/><circle cx='1.5' cy='0' r='1.4' fill='%23f2b632'/><circle cx='0' cy='1.5' r='1.4' fill='%23f2b632'/><circle cx='-1.5' cy='0' r='1.4' fill='%23f2b632'/></g><g transform='translate(78 6.7)'><circle cx='0' cy='-1.5' r='1.4' fill='%23f2b632'/><circle cx='1.5' cy='0' r='1.4' fill='%23f2b632'/><circle cx='0' cy='1.5' r='1.4' fill='%23f2b632'/><circle cx='-1.5' cy='0' r='1.4' fill='%23f2b632'/></g><g transform='translate(102 6.7)'><circle cx='0' cy='-1.5' r='1.4' fill='%23f2b632'/><circle cx='1.5' cy='0' r='1.4' fill='%23f2b632'/><circle cx='0' cy='1.5' r='1.4' fill='%23f2b632'/><circle cx='-1.5' cy='0' r='1.4' fill='%23f2b632'/></g><g transform='translate(116 8.5)'><circle cx='0' cy='-1.5' r='1.4' fill='%23f2b632'/><circle cx='1.5' cy='0' r='1.4' fill='%23f2b632'/><circle cx='0' cy='1.5' r='1.4' fill='%23f2b632'/><circle cx='-1.5' cy='0' r='1.4' fill='%23f2b632'/></g><g transform='translate(154 8.5)'><circle cx='0' cy='-1.5' r='1.4' fill='%23f2b632'/><circle cx='1.5' cy='0' r='1.4' fill='%23f2b632'/><circle cx='0' cy='1.5' r='1.4' fill='%23f2b632'/><circle cx='-1.5' cy='0' r='1.4' fill='%23f2b632'/></g><g transform='translate(168 6.7)'><circle cx='0' cy='-1.5' r='1.4' fill='%23f2b632'/><circle cx='1.5' cy='0' r='1.4' fill='%23f2b632'/><circle cx='0' cy='1.5' r='1.4' fill='%23f2b632'/><circle cx='-1.5' cy='0' r='1.4' fill='%23f2b632'/></g></svg>") repeat-x left top / 180px 34px;
  --moon-disc: radial-gradient(circle at 36% 32%, #fffaf0 0, #f6dc96 48%, #e2b45a 100%);
  --crust-disc: radial-gradient(circle at 40% 34%, #e9b56c 0, #c07a35 58%, #8e5121 100%);
  --lacquer: linear-gradient(150deg, #7a3a6e 0%, #5c2954 46%, #44203f 100%);
  --lacquer-edge: #2d142a;
  --fret-gold: #e0b45e;
  --fret: inset 0 0 0 1.5px rgba(224, 180, 94, .75);
  --scallop: linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat, radial-gradient(circle at 50% 0, #000 5.6px, transparent 6.2px) left bottom / 12px 6px repeat-x;
  --scallop-top: linear-gradient(#000 0 0) bottom / 100% calc(100% - 6px) no-repeat, radial-gradient(circle at 50% 100%, #000 5.6px, transparent 6.2px) left top / 12px 6px repeat-x;
  --glow-line: linear-gradient(90deg, #b9501d 0%, #e8792b 24%, #f2b632 50%, #f6dc96 66%, #c48ab8 84%, #8c4580 100%);
  /* Five lantern papers, used in turn wherever a row of things wants colour */
  --ln-1: #c94a1f; --ln-2: #d98a1c; --ln-3: #2f8f83; --ln-4: #8c4580; --ln-5: #3f3c91;
  --on-ln-1: #fff8ee; --on-ln-2: #251c40; --on-ln-3: #ffffff; --on-ln-4: #ffffff; --on-ln-5: #ffffff;
  /* The same five, deep enough for type on rice paper */
  --ln-1-ink: #a83c16; --ln-2-ink: #8a5300; --ln-3-ink: #1f6f66; --ln-4-ink: #74356a; --ln-5-ink: #3f3c91;
  --lantern-ring: conic-gradient(var(--ln-1) 0 72deg, var(--ln-2) 0 144deg, var(--ln-3) 0 216deg, var(--ln-4) 0 288deg, var(--ln-5) 0);
  --lantern-bulb: radial-gradient(ellipse 46% 42% at 50% 46%, #fff1c2, rgba(255, 210, 122, 0) 80%), linear-gradient(90deg, #b8401a, #e8702c 30%, #f29b38 50%, #e8702c 70%, #b8401a);
  /* Cart badges sit on --theme-600: rice paper on plum by day */
  --theme-600-ink: #fff8ee;
  --veil: rgba(23, 18, 58, .58);
}
html.dark {
  --lantern-line: var(--lantern-line-night);
  --lacquer: linear-gradient(150deg, #2c2360 0%, #211a4c 50%, #17123a 100%);
  --lacquer-edge: #0b0920;
  --fret: inset 0 0 0 1.5px rgba(246, 220, 150, .6);
  --glow-line: linear-gradient(90deg, #e8792b 0%, #f29b38 24%, #f2b632 46%, #f6dc96 64%, #d48ac4 84%, #a8649a 100%);
  --ln-1: #f07a45; --ln-2: #f6b04a; --ln-3: #6fd3c4; --ln-4: #d48ac4; --ln-5: #a39dff;
  --on-ln-1: #1d1640; --on-ln-2: #1d1640; --on-ln-3: #10102a; --on-ln-4: #1d1640; --on-ln-5: #10102a;
  --ln-1-ink: #f89a6c; --ln-2-ink: #f6c46a; --ln-3-ink: #7fdccf; --ln-4-ink: #e2a6d6; --ln-5-ink: #b8b3ff;
  --theme-600-ink: #1d1640;
  --veil: rgba(8, 6, 26, .7);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board, so 2048 tiles,
   hex cells and word-grid letters come out as the night of the festival:
   rice paper and plum by day, indigo after dark. Tiles rise from a pale
   new moon through moon gold, osmanthus and lantern amber to plum and
   the deep night sky. */
:root {
  --game-bg:        #fbf6ee;
  --game-surface:   #f1e6d6;
  --game-surface-2: #ffffff;
  --game-ink:       #251c40;
  --game-muted:     #75698c;
  --game-accent:    #b9501d;
  --game-accent-ink:#fff8ee;
  --game-good:      #2f8f83;
  --game-bad:       #b3262b;
  --game-tile-1:    #f7ebcc;
  --game-tile-2:    #f3d38b;
  --game-tile-3:    #f2b632;
  --game-tile-4:    #f29b38;
  --game-tile-5:    #d4552a;
  --game-tile-6:    #8c4580;
  --game-tile-7:    #3f3c91;
  --game-tile-8:    #17123a;
  --game-radius:    14px;
  --game-font:      'Cormorant', 'Noto Serif', Georgia, serif;
  --game-font-css:  "/assets/themes/mid-autumn/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): rice paper, not a dark screen */
  --game-arena-screen: #fbf6ee;
  --game-arena-coins:  #c98a14;
  --game-arena-win:    #2f8f83;
  --game-arena-danger: #b3262b;
  --game-pattern:   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='%23e0a52c' fill-opacity='.22'><circle cx='20' cy='17' r='2'/><circle cx='23' cy='20' r='2'/><circle cx='20' cy='23' r='2'/><circle cx='17' cy='20' r='2'/><circle cx='84' cy='78' r='1.6'/><circle cx='87' cy='81' r='1.6'/><circle cx='84' cy='84' r='1.6'/><circle cx='81' cy='81' r='1.6'/></g><g fill='%2374356a' fill-opacity='.1'><circle cx='60' cy='40' r='1.2'/><circle cx='104' cy='22' r='.9'/><circle cx='36' cy='100' r='1'/></g></svg>");
}
html.dark {
  --game-bg:        #13102e;
  --game-surface:   #1c1841;
  --game-surface-2: #2a2358;
  --game-ink:       #f6eedc;
  --game-muted:     #a79fbe;
  --game-accent:    #f3d38b;
  --game-accent-ink:#1d1640;
  --game-good:      #6fd3c4;
  --game-bad:       #f07a62;
  --game-tile-1:    #3a3166;
  --game-tile-2:    #5c3d7a;
  --game-tile-3:    #8c4580;
  --game-tile-4:    #c95f28;
  --game-tile-5:    #f29b38;
  --game-tile-6:    #f2b632;
  --game-tile-7:    #f6dc96;
  --game-tile-8:    #fffaf0;
  --game-arena-screen: #13102e;
  --game-arena-coins:  #f2b632;
  --game-arena-win:    #6fd3c4;
  --game-arena-danger: #f07a62;
  --game-pattern:   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='%23f2b632' fill-opacity='.18'><circle cx='20' cy='17' r='2'/><circle cx='23' cy='20' r='2'/><circle cx='20' cy='23' r='2'/><circle cx='17' cy='20' r='2'/></g><g fill='%23fff3d6' fill-opacity='.4'><circle cx='60' cy='40' r='.8'/><circle cx='104' cy='22' r='.6'/><circle cx='36' cy='100' r='.7'/><circle cx='90' cy='90' r='.6'/></g></svg>");
}

/* ── 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);
  /* Cormorant's default figures are old-style; prices, counts and codes
     set in it read as lining figures everywhere. */
  font-variant-numeric: lining-nums;
}
html .font-sans { font-family: var(--font-ui); }

html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;
  letter-spacing: 0;
  font-variant-numeric: lining-nums;
}
.display-italic { font-style: italic; }
/* Figures in tabular columns read better in the UI face: Cormorant's
   figures are narrow and light at small sizes. */
html .font-display.tabular-nums, html .font-display[class*="tabular"] { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0; }

::selection { background: #f6dc96; color: #251c40; }

.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: 800;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--theme-600);
}
.ed-eyebrow-tight { font-size: 9px !important; letter-spacing: 0 !important; white-space: nowrap !important; }

/* Section eyebrow — a small full moon 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: 800;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff6d8, #f0c96e 60%, #d9a94c);
  box-shadow: 0 0 0 3px rgba(240, 201, 110, .22);
}

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.9rem; font-weight: 700;
  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(--florets); }

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

[data-mn-phase][hidden], [data-mn-when][hidden] { display: none !important; }

/* Brushed moon characters (中 秋 月) from the self-hosted Moon Brush subset */
.mn-brush { font-family: var(--font-brush); font-weight: 400; line-height: 1; }

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

.hdr-strip, .hdr-strip .ed-status { color: rgba(248, 239, 219, 0.88); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #f6dc96; }

/* The moon through a month, new to full and back, under the main header
   bar and wherever a section needs a border */
.mn-band { height: 14px; background: var(--phase-band), var(--paper); }
.mn-band--night { background: var(--phase-band-night), var(--night); }

/* The Mid-Autumn chip in the status strip */
.mn-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .06em; color: #f6dc96; }
.mn-strip-chip svg { width: 13px; height: 13px; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(246, 220, 150, .6)); }
/* The desktop strip shares its line with the menu; the second half of the
   chip joins it only where there is room for both. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1439px) { .mn-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: 800;
  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: 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); }
.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: 700;
  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.6rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 0.97rem; font-weight: 800;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 999px;
  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, html.dark body .ed-plan-featured .ed-plan-cta { background: #f3d38b; color: #1d1640; box-shadow: 0 2px 0 #c99a45; }
.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: 700;
  color: var(--ink); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 999px;
  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(--night-bg); color: #f8efdb;
  border: 1px solid rgba(246, 220, 150, .3); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--phase-band-night); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(248, 239, 219, .2); }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-soft); }
.ed-topnav-link { color: rgba(248, 239, 219, 0.88); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #f6dc96; }

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  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: 600;
  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: 999px; font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700;
  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, 246, 238, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(19, 16, 46, 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: 600;
  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: 800;
  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); }

/* ── River lanterns: a paper box lit from inside on a little wooden float,
   bobbing on the water (.mn-floater, placed by --x, sized by --k, timed
   by --w) ── */
.mn-floater {
  position: absolute; bottom: 30%; left: var(--x);
  width: calc(17px * var(--k, 1)); height: calc(15px * var(--k, 1));
  border-radius: 2px 2px 1px 1px;
  background:
    linear-gradient(90deg, transparent 47%, rgba(140, 50, 20, .35) 47% 53%, transparent 53%),
    radial-gradient(ellipse 60% 70% at 50% 60%, #fff3c8, #f6a548 70%, #e0702a);
  box-shadow: 0 0 calc(16px * var(--k, 1)) calc(4px * var(--k, 1)) rgba(242, 155, 56, .5);
}
.mn-floater::before {
  content: ''; position: absolute; left: -32%; right: -32%; bottom: calc(-6px * var(--k, 1)); height: calc(6px * var(--k, 1));
  background: #5b2a1e; border-radius: 1px 1px 10px 10px;
}
.mn-floater::after {
  content: ''; position: absolute; left: -40%; right: -40%; top: calc(100% + 7px * var(--k, 1)); height: calc(8px * var(--k, 1));
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 110, .55), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .mn-floater { animation: mn-bob 5s ease-in-out 3 forwards; animation-delay: var(--w, 0s); }
}
@keyframes mn-bob { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(8px, -3px) rotate(2deg); } }

/* ── Dark/light toggle: paper lanterns rise ──
   assets/themes/mid-autumn/assets/js/mid-autumn.js registers it: lanterns
   lift off from the foot of the screen on a rising tide of warm night,
   the mode flips behind them once the night has covered the page, and
   they drift on up and out of sight as it clears. */
.px-fx--mn-lanterns { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--mn-lanterns .mn-fx-night {
  position: absolute; left: -10%; right: -10%; top: 0; height: 160%;
  background:
    radial-gradient(60% 30% at 50% 100%, rgba(242, 155, 56, .55), transparent 70%),
    linear-gradient(180deg, transparent 0, var(--fx-night, #1c1647) 22%, var(--fx-night, #1c1647) 100%);
  transform: translateY(100%);
  transition: transform .62s cubic-bezier(.45, 0, .2, 1);
}
.px-fx--mn-lanterns.is-up .mn-fx-night { transform: translateY(-22%); }
.px-fx--mn-lanterns.is-clearing .mn-fx-night { transform: translateY(-100%); opacity: 0; transition: transform .7s cubic-bezier(.5, 0, .7, 1), opacity .5s ease .2s; }
.px-fx--mn-lanterns .mn-fx-ln {
  position: absolute; left: var(--x); bottom: -24vh; width: var(--s); height: calc(var(--s) * 1.25);
  border-radius: 46% 46% 40% 40%;
  background:
    radial-gradient(ellipse 46% 40% at 50% 46%, #fff1c2, rgba(255, 210, 122, 0) 80%),
    repeating-linear-gradient(90deg, rgba(120, 30, 10, .12) 0 2px, transparent 2px calc(var(--s) / 5)),
    linear-gradient(90deg, #c94a1c, #f08a33 30%, #f6a547 50%, #f08a33 70%, #c94a1c);
  box-shadow: 0 0 calc(var(--s) * .5) calc(var(--s) * .12) rgba(242, 155, 56, .5);
  transform: translateY(0);
  transition: transform 1.25s cubic-bezier(.3, .1, .3, 1) var(--d, 0s);
}
.px-fx--mn-lanterns .mn-fx-ln::before, .px-fx--mn-lanterns .mn-fx-ln::after {
  content: ''; position: absolute; left: 30%; right: 30%; height: 8%; border-radius: 2px; background: #3a2340;
}
.px-fx--mn-lanterns .mn-fx-ln::before { top: -4%; }
.px-fx--mn-lanterns .mn-fx-ln::after { bottom: -4%; }
.px-fx--mn-lanterns.is-up .mn-fx-ln { transform: translateY(calc(-130vh - 30%)) rotate(var(--r, 0deg)); }

/* ── Footer: a night lake in both modes — the shore along its top edge,
   river lanterns drifting on the water and the moon low in the sky ── */
.mn-footer {
  --paper:     #17123a;
  --paper-2:   #211a4c;
  --paper-3:   #2c2360;
  --ink:       #f8efdb;
  --ink-2:     #e3d9c6;
  --ink-soft:  #b5acc9;
  --rule:      rgba(248, 239, 219, 0.15);
  --rule-soft: rgba(248, 239, 219, 0.08);
  --theme-500: #f6dc96; --theme-600: #f6dc96; --theme-700: #f9e7b8;
  --theme-500-rgb: 246, 220, 150;
  position: relative;
}
html.dark .mn-footer { --paper: #0e0b25; --paper-2: #1c1841; --paper-3: #27214f; }
.mn-footer-top { position: relative; isolation: isolate; height: 92px; margin-bottom: -1px; overflow: hidden; background: linear-gradient(180deg, var(--paper) 0 40%, #17123a 40%); }
html.dark .mn-footer-top { background: linear-gradient(180deg, var(--paper) 0 40%, #0e0b25 40%); }
/* The far shore: low hills and a pavilion roof against the moonlit water */
.mn-footer-top::before {
  content: ''; position: absolute; left: 0; right: 0; top: 18px; height: 22px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='22' viewBox='0 0 600 22' preserveAspectRatio='none'><path d='M0 22V14C40 8 70 6 110 10C150 14 170 4 220 6C260 8 290 16 330 14C360 12 380 10 400 12L404 7L420 3L436 7L440 12C470 12 500 4 540 6C570 8 590 12 600 12V22Z' fill='%23211a4c'/></svg>") repeat-x left bottom / 600px 22px;
}
.mn-footer-top::after {
  content: ''; position: absolute; left: 0; right: 0; top: 40px; bottom: 0;
  background: var(--ripples) repeat left top / 120px 24px;
  opacity: .9;
}
.mn-footer-moon { position: absolute; top: 2px; right: 12%; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #fffaf0, #f6dc96 55%, #e2b45a); box-shadow: 0 0 22px 6px rgba(246, 220, 150, .35); z-index: -1; }
.mn-footer-moon::after { content: ''; position: absolute; left: 50%; top: 60px; width: 8px; height: 46px; margin-left: -4px; background: repeating-linear-gradient(180deg, rgba(246, 220, 150, .55) 0 3px, transparent 3px 8px); filter: blur(.4px); }
[dir="rtl"] .mn-footer-moon { right: auto; left: 12%; }
.mn-footer-top .mn-floater { bottom: 14px; z-index: 2; }
.mn-footer a:hover { color: #f6dc96; }
html .mn-footer .ed-footer-heading { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: #f6dc96; }
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: 600; 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; }

/* The newsletter on rice paper under the moon phases */
html body .mn-footer .ed-newsletter {
  position: relative;
  background:
    radial-gradient(260px 160px at 100% 0%, rgba(246, 220, 150, .55), transparent 70%),
    radial-gradient(240px 150px at 0% 100%, rgba(220, 182, 211, .5), transparent 70%),
    var(--florets),
    #fbf6ee;
  color: #251c40;
  border: 0; border-radius: 24px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .55);
  overflow: hidden;
  padding-bottom: 2.4rem;
}
html body .mn-footer .ed-newsletter::before { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 14px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='14' viewBox='0 0 160 14'><circle cx='10.0' cy='7' r='5' fill='%23ead9c4'/><circle cx='10.0' cy='7' r='5' fill='%23e0ad4f'/><circle cx='20.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='30.0' cy='7' r='5' fill='%23ead9c4'/><path d='M30.0 2A5 5 0 0 0 30.0 12A2.6 5 0 0 0 30.0 2Z' fill='%23e0ad4f'/><circle cx='40.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='50.0' cy='7' r='5' fill='%23ead9c4'/><path d='M50.0 2A5 5 0 0 0 50.0 12Z' fill='%23e0ad4f'/><circle cx='60.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='70.0' cy='7' r='5' fill='%23ead9c4'/><path d='M70.0 2A5 5 0 0 0 70.0 12A2.6 5 0 0 1 70.0 2Z' fill='%23e0ad4f'/><circle cx='80.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='90.0' cy='7' r='5' fill='%23ead9c4'/><circle cx='90.0' cy='7' r='4.4' fill='none' stroke='%23b98fb0' stroke-width='1.1'/><circle cx='100.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='110.0' cy='7' r='5' fill='%23ead9c4'/><path d='M110.0 2A5 5 0 0 1 110.0 12A2.6 5 0 0 0 110.0 2Z' fill='%23e0ad4f'/><circle cx='120.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='130.0' cy='7' r='5' fill='%23ead9c4'/><path d='M130.0 2A5 5 0 0 1 130.0 12Z' fill='%23e0ad4f'/><circle cx='140.0' cy='7' r='.9' fill='%23b98fb0'/><circle cx='150.0' cy='7' r='5' fill='%23ead9c4'/><path d='M150.0 2A5 5 0 0 1 150.0 12A2.6 5 0 0 1 150.0 2Z' fill='%23e0ad4f'/><circle cx='160.0' cy='7' r='.9' fill='%23b98fb0'/></svg>") repeat-x left center / 160px 14px; pointer-events: none; }
html body .mn-footer .ed-newsletter::after { display: none; }
html body .mn-footer .ed-newsletter, html body .mn-footer .ed-newsletter * { --ink: #251c40; --ink-2: #453a63; }
html body .mn-footer .ed-newsletter h4, html.dark body .mn-footer .ed-newsletter h4 { color: #251c40 !important; font-family: var(--font-display); font-weight: 700; }
html.dark body .mn-footer .ed-newsletter p:not(#newsletter-msg) { color: #453a63 !important; }
html body .mn-footer .ed-newsletter-input, html.dark body .mn-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #251c40 !important; border: 1px solid rgba(37, 28, 64, .18) !important; border-radius: 999px; }
html body .mn-footer .ed-newsletter-input::placeholder { color: #75698c; }
html body .mn-footer .ed-newsletter-input:focus { border-color: #8c4580 !important; box-shadow: 0 0 0 3px rgba(140, 69, 128, .15); }
html body .mn-footer .ed-newsletter-btn {
  background: #b9501d; color: #fff8ee; border: 0; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 800;
}
html body .mn-footer .ed-newsletter-age { color: #453a63; }

/* Logo card: the light-mode logo on rice paper with a pressed scallop
   edge, like the paper insert in a mooncake box, wherever it sits on the
   night (footer, app splash). */
.mn-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.6rem;
  background: radial-gradient(160px 80px at 100% 0%, rgba(246, 220, 150, .5), transparent 70%), #fbf6ee;
  border-radius: 18px;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(217, 169, 76, .35);
}
.mn-plaque::before { content: ''; position: absolute; inset: 5px; border: 1.5px dashed rgba(192, 122, 53, .5); border-radius: 13px; pointer-events: none; }

/* 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(19, 16, 46, 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(28, 24, 65, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper) !important; border-top-color: var(--rule) !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, #27214f, #13102e, #2c1a4a, #0e0b25) !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 night. 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: #0e0b25 !important;
  border-color: rgba(246, 238, 220, .2) !important;
  color: #f6eedc !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 night. */
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: #0e0b25;
  --paper: #f6eedc;
  border-color: rgba(246, 220, 150, .3);
}

html header.safe-top-header[style] { background: rgba(251, 246, 238, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(19, 16, 46, .95) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(19, 16, 46, .95); }

/* ── Login / register / forgot-password brand panel: the night, with the
   moon rising in its corner ── */
:root, html.dark {
  --brand-gradient: var(--night-bg);
  --brand-glow-1: rgba(246, 220, 150, 0.3);
  --brand-glow-2: rgba(140, 69, 128, 0.32);
}
.brand-panel { background: var(--night-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the full moon. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: 9% !important; right: 9% !important; left: auto !important; bottom: auto !important;
  width: 120px !important; height: 120px !important;
  border-radius: 50% !important; transform: none !important; opacity: .95 !important; filter: none !important;
  background: radial-gradient(circle at 36% 34%, #fffaf0, #f6dc96 50%, #e2b45a) !important;
  box-shadow: 0 0 60px 16px rgba(246, 220, 150, .3) !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 9% !important; }
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(248, 239, 219, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: a lacquered mooncake tin, plum night with a
   gold fret just inside its edge and the moon rising in its corner ── */
html body .wallet-hero {
  position: relative;
  background:
    radial-gradient(160px 160px at calc(100% - 55px) 91px, rgba(246, 220, 150, .3), transparent 70%),
    var(--night-bg);
  border: 1px solid rgba(246, 220, 150, .3);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  color: #f8efdb;
  overflow: hidden;
}
html body .wallet-hero::before {
  inset: 8px; top: 8px; left: 8px; right: 8px; bottom: 8px; height: auto; width: auto;
  border: 1.5px solid rgba(246, 220, 150, .4); border-radius: 18px;
  background: none; pointer-events: none;
}
html body .wallet-hero::after {
  content: ''; position: absolute; right: 28px; top: 64px; width: 54px; height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 40%, rgba(217, 169, 76, .45) 0 7%, transparent 8%),
    radial-gradient(circle at 64% 66%, rgba(217, 169, 76, .4) 0 5%, transparent 6%),
    radial-gradient(circle at 36% 32%, #fffaf0, #f6dc96 52%, #e2b45a);
  box-shadow: 0 0 34px 8px rgba(246, 220, 150, .28);
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 28px; }
@media (max-width: 639px) { html body .wallet-hero::after { width: 42px; height: 42px; top: 58px; right: 22px; } html[dir="rtl"] body .wallet-hero::after { right: auto; left: 22px; } }
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 700;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
}
html body .wallet-hero-btn-primary { background: #f3d38b; color: #1d1640; border: 0; font-family: var(--font-ui); font-weight: 800; border-radius: 999px; }
html body .wallet-hero-btn-primary:hover { background: #f8e0a6; color: #1d1640; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #f8efdb; border-color: rgba(248, 239, 219, .45); border-radius: 999px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): a mooncake
   gift box, its lid edged in gold fret ── */
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; left: 0; right: 0; bottom: auto; width: auto; height: 14px; border-radius: 0;
  background: var(--phase-band), var(--paper-2); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: the moon phases 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: 14px;
  background: var(--phase-band);
}
html body .pd-buybox .font-display.text-4xl { font-weight: 700; color: var(--theme-600); overflow-wrap: normal; }
.pd-title { font-weight: 700 !important; }

/* The mystery box plugin's own button is ink on paper and dynamic-theme's
   ".dark button" turns its label the colour of its fill; readable here on
   plugin releases without their own fix. */
html.dark button.spin-btn:not(:disabled) { color: var(--btn-ink); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's plum. */
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: 999px;
}
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(140, 69, 128, .3); }
html.dark .border-violet-200 { border-color: rgba(240, 201, 110, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(140, 69, 128, .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 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, 248, 238, .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 moon phases ──
   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: 14px;
  background: var(--phase-band);
}
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--theme-600);
  overflow-wrap: normal;
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .05em; }
@media (max-width: 1023px) { .hdr-strip .mn-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 set in its mooncake box — a plum lacquer lid
   with a gold fret, the prize on a round paper doily inside ── */
.mn-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;
}
.mn-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mn-win__wrap {
  position: relative;
  padding: 3rem 14px 16px;
  background:
    radial-gradient(120px 90px at 100% 0%, rgba(246, 220, 150, .35), transparent 70%),
    linear-gradient(160deg, #6a2f61, #4a2147 60%, #3b1a3a);
}
.mn-win:nth-child(3n+2) .mn-win__wrap { background: radial-gradient(120px 90px at 100% 0%, rgba(246, 220, 150, .35), transparent 70%), linear-gradient(160deg, #2b2468, #1f1a4f 60%, #18143e); }
.mn-win:nth-child(3n+3) .mn-win__wrap { background: radial-gradient(120px 90px at 100% 0%, rgba(246, 220, 150, .35), transparent 70%), linear-gradient(160deg, #9a4a1f, #7a3517 60%, #5f2812); }
.mn-win__wrap::before { content: ''; position: absolute; inset: 6px; border: 1.5px solid rgba(246, 220, 150, .55); border-radius: 12px; pointer-events: none; }
.mn-win__doily {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: min(100%, 10.5rem); aspect-ratio: 1; margin: 0 auto;
  background: radial-gradient(circle, #fffaf0 0 62%, #f3e4c6 63% 64.5%, #fffaf0 65.5%);
  border-radius: 50%;
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6), 0 0 0 4px rgba(255, 250, 240, .35);
}
.mn-win__doily::before { content: ''; position: absolute; inset: 6px; border: 1.5px dashed rgba(192, 122, 53, .45); border-radius: 50%; pointer-events: none; }
.mn-win__doily img { width: 72%; height: 72%; object-fit: contain; transition: transform .3s ease; }
.mn-win:hover .mn-win__doily img { transform: scale(1.05); }
.mn-win__wrap > .absolute { z-index: 3; top: .95rem; }
.mn-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: #251c40; background: #fbf6ee; border-radius: 999px;
}
.mn-win__tag--open { color: #1d1640; background: #f3d38b; }
.mn-win__tag--done { color: #ffffff; background: #2f8f83; }
.mn-win__name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.mn-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.mn-win__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 4vw, 1.4rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; white-space: nowrap; }
.mn-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; }
.mn-win__cart, .mn-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; font-weight: 700;
}
.mn-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.mn-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.mn-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.mn-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .9rem; font-weight: 700;
  color: var(--theme-600); background: var(--rose-soft); border-radius: 999px;
}

/* ── 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: radial-gradient(520px 320px at 50% 0%, rgba(246, 220, 150, .3), transparent 70%), var(--florets), var(--paper); font-family: var(--font-ui); }
html body .age-check-card {
  position: relative; overflow: hidden;
  padding-top: 3.2rem;
  background: var(--florets), var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 26px;
  box-shadow: var(--shadow-md);
}
html body .age-check-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34px;
  background: var(--lantern-line);
}
html body .age-check-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--phase-band);
}
html body .age-check-logo { border-radius: 50%; background: var(--moon-disc); box-shadow: 0 0 0 3px #c07a35, 0 0 0 6px var(--paper-2), 0 0 26px 6px rgba(246, 220, 150, .45); padding: 10px; }
html body .age-check-title { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
html body .age-check-input { border-radius: 14px; 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(--rose-soft); outline: none; }
html body .age-check-submit { border-radius: 999px; 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: 18px !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: #e0b45e !important; }
html body .lang-card:has(input:checked) {
  border-style: solid !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 2px #e0b45e, 0 0 0 4px var(--plum), 0 0 18px 4px rgba(246, 220, 150, .35), var(--shadow) !important;
  background: color-mix(in srgb, var(--osmanthus) 8%, var(--paper-2)) !important;
}
html body .lang-card img { border-radius: 50%; box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px #e0b45e; }
html body .lang-card:has(input:checked) .rounded-full:has(> .fa-check) { background: var(--theme-500) !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(23, 18, 58, .55); }
html body:has(.lang-card) .footer-safe::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; background: var(--phase-band); }
html body:has(.lang-card) .w-9.h-9.rounded-xl:has(> .fa-language) { background: radial-gradient(circle at 34% 28%, rgba(255, 244, 214, .5), transparent 40%), var(--ln-4) !important; color: #fff !important; border-radius: 0 !important; -webkit-mask: var(--fluted-mask); mask: var(--fluted-mask); }

/* 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: #2b8378; --px-warn: #b45309; --px-crit: #b5262b; --px-info: #74356a; }
html.dark:root { --px-good: #6ed3c4; --px-warn: #fbbf23; --px-crit: #f5a494; --px-info: #b2adff; }
/* The cart's urgent "Complete Payment" prints white on the crit tone; the
   night crit is light, so its label takes the dark paper instead. */
html.dark body a[style*="background:var(--px-crit)"] { color: var(--paper) !important; }
/* Seller Centre keeps its own tone names; point them at the same hues. */
html body :is(.sc-page, .sc-panel) { --sc-good: var(--px-good); --sc-warn: var(--px-warn); --sc-crit: var(--px-crit); --sc-info: var(--px-info); }

/* Changing language, the scene (mid-autumn.js): the night sky, the moon and
   a paper lantern that rises out of it with the old name before the reload
   and comes down with the new one after it. Both pages show the sky with
   the lantern gone at the switch, so the reload never shows. */
.mn-lang-stage { background: color-mix(in srgb, var(--night) 56%, transparent); }
.mn-lang-sky {
  position: relative; display: grid; grid-template-rows: 1fr auto; min-height: 300px; overflow: hidden;
  width: min(560px, 100%); box-sizing: border-box; padding: 30px 20px 0; border-radius: 18px;
  background: radial-gradient(circle at 84% 16%, rgba(246, 220, 150, .2), transparent 42%), linear-gradient(180deg, var(--night-2), var(--night));
  color: var(--on-night); border: 1px solid rgba(246, 220, 150, .18); box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .65);
  font-family: var(--font-ui); text-align: center;
}
.mn-lang-moon {
  position: absolute; top: 22px; right: 26px; width: 66px; height: 66px; border-radius: 50%;
  background: var(--moon-disc); box-shadow: 0 0 40px 8px rgba(246, 220, 150, .3);
}
.mn-lang-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--moon); opacity: .7; }
.mn-lang-star:nth-of-type(2) { top: 18%; left: 12%; }
.mn-lang-star:nth-of-type(3) { top: 34%; left: 26%; opacity: .45; }
.mn-lang-star:nth-of-type(4) { top: 12%; left: 52%; }
.mn-lang-star:nth-of-type(5) { top: 44%; left: 78%; opacity: .45; }
.mn-lang-flight {
  position: relative; z-index: 1; align-self: center; justify-self: center; max-width: 100%; min-width: 0;
  display: flex; flex-direction: column; align-items: center; padding: 8px 0 22px;
}
.mn-lang-lantern { display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 0 18px rgba(242, 155, 56, .55)); }
.mn-lang-cap { display: block; width: 30px; height: 7px; border-radius: 3px; background: var(--lantern-deep); }
.mn-lang-body {
  display: block; width: 72px; height: 58px; border-radius: 50%;
  background: radial-gradient(ellipse 46% 42% at 50% 46%, #fff1c2, rgba(255, 210, 122, 0) 80%),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(120, 40, 10, .3) 11px 12px),
    linear-gradient(90deg, var(--lantern-deep), var(--lantern) 30%, var(--lantern-2) 50%, var(--lantern) 70%, var(--lantern-deep));
}
.mn-lang-tassel { display: block; width: 4px; height: 20px; border-radius: 0 0 2px 2px; background: linear-gradient(var(--moon-3), var(--lantern-deep)); }
.mn-lang-tag {
  display: grid; max-width: 100%; box-sizing: border-box; padding: 8px 18px 10px; border-radius: 4px;
  background: var(--on-night); color: var(--night); border-top: 4px solid var(--lantern-deep);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6);
  font: 600 clamp(22px, 6.4vw, 30px)/1.15 var(--font-display);
}
.mn-lang-tag > span { grid-area: 1 / 1; min-width: 0; overflow-wrap: anywhere; }
.px-lang-stage-out .mn-lang-new, .px-lang-stage-in .mn-lang-old { visibility: hidden; }
.mn-lang-water {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin: 0 -20px;
  padding: 8px 20px; box-sizing: border-box;
  background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(246, 220, 150, .12) 7px 8px), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .28));
  border-top: 1px solid rgba(246, 220, 150, .25);
  font: 600 12px/1.2 var(--font-ui); letter-spacing: .08em; color: var(--on-night-soft);
}
.mn-lang-water::before {
  content: ''; position: absolute; top: 9px; right: 34px; width: 50px; height: 5px; border-radius: 50%;
  background: rgba(246, 220, 150, .45); box-shadow: 8px 10px 0 -1px rgba(246, 220, 150, .25);
}
.mn-lang-water img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
/* Out: the sky comes up and the lantern rises past the moon and away. */
.px-lang-stage-out .mn-lang-sky { animation: mn-lang-sky-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .mn-lang-flight { animation: mn-lang-rise .6s cubic-bezier(.5, 0, .75, .4) .28s both; }
/* In: it comes down from where it went, carrying the new name, and glows. */
.px-lang-stage-in .mn-lang-flight { animation: mn-lang-fall .75s cubic-bezier(.2, .7, .3, 1) both; }
.px-lang-stage-in .mn-lang-lantern { animation: mn-lang-glow .3s ease-out .7s both; }
.px-lang-stage-in .mn-lang-sky { animation: mn-lang-sky-out .25s ease-in 1s both; }
@keyframes mn-lang-sky-in { from { transform: translateY(36px) scale(.96); opacity: 0; } }
@keyframes mn-lang-sky-out { to { transform: translateY(-24px); opacity: 0; } }
@keyframes mn-lang-rise {
  0%   { transform: none; opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(36px, calc(-100% - 240px)) rotate(-6deg); opacity: 0; }
}
@keyframes mn-lang-fall {
  0%   { transform: translate(36px, calc(-100% - 240px)) rotate(-6deg); opacity: 0; }
  15%  { opacity: 1; }
  75%  { transform: translateY(5px) rotate(2deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes mn-lang-glow { 50% { filter: drop-shadow(0 0 30px rgba(255, 200, 100, .85)); } }
@media (max-width: 460px) {
  .mn-lang-sky { min-height: 270px; padding: 26px 16px 0; }
  .mn-lang-water { margin: 0 -16px; padding: 8px 16px; }
  .mn-lang-moon { top: 16px; right: 18px; width: 48px; height: 48px; }
}

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

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


/* Confirm windows: the shared hover brightens the OK button, which took
   white text under 4.5:1 here; it darkens a touch instead. */
html:not(.dark) body .px-confirm__btn--ok:not(.px-confirm__btn--destructive):hover { filter: brightness(.92); }
/* rev 868fe5109c9f2a2b */