/* ============================================================
   EASTER THEME — a spring egg hunt.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the things of spring mornings: painted eggs, sugar
   eggs with a window to peep through, grass and blossom, in
   butter, mint, lilac, blush and sky. Pastels on cream by day
   (the default); a spring night garden, where the pastels glow,
   by night.

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

:root {
  --font-display: 'Comfortaa', 'M PLUS Rounded 1c', 'Segoe UI', system-ui, sans-serif;
  --font-ui:      'M PLUS Rounded 1c', 'Inter', system-ui, sans-serif;

  --paper:        #fffbf1;
  --paper-2:      #ffffff;
  --paper-3:      #f5f0e3;
  --ink:          #2c2440;
  --ink-2:        #4a4163;
  --ink-soft:     #776f8c;
  --rule:         rgba(44, 36, 64, 0.13);
  --rule-soft:    rgba(44, 36, 64, 0.07);
  --radius:       20px;
  --radius-sm:    12px;
  --shadow:       0 1px 2px rgba(44, 36, 64, .06), 0 4px 14px -6px rgba(44, 36, 64, .14);
  --shadow-md:    0 2px 4px rgba(44, 36, 64, .06), 0 16px 32px -14px rgba(44, 36, 64, .28);

  /* Violet */
  --theme-50:  #f4f0fd;
  --theme-100: #e6dcfb;
  --theme-200: #cbb8f5;
  --theme-300: #a98cec;
  --theme-400: #8d6be1;
  --theme-500: #7a55d6;
  --theme-600: #5f42bd;
  --theme-700: #4b3399;
  --theme-800: #382674;
  --theme-900: #241850;
  --theme-500-rgb: 122, 85, 214;
  --theme-600-rgb: 95, 66, 189;
  --theme-600-ink: #ffffff;

  /* Spring pastels (eggs, glows) and their deeper sisters (marks on white) */
  --p1: #ffe39a; --p2: #a8e3c9; --p3: #d7c6f6; --p4: #ffc6d1; --p5: #b9dcf5;
  --c1: #7a55d6; --c2: #e9a923; --c3: #2fa577; --c4: #e5658a; --c5: #3e97d6;
  --grass: #6dbb6e; --grass-2: #4a9a58;
  --rose-soft: rgba(122, 85, 214, 0.09);
  --foil: #e9a923;
  --foil-2: #ffe39a;

  /* Names other themes' shared markup reaches for */
  --gold:       #c98a10;
  --gold-2:     #e9a923;
  --gold-soft:  rgba(122, 85, 214, 0.08);
  --gold-ink:   #2c2440;
  --felt:       #2f5a41;
  --felt-2:     #24412f;
  --on-felt:    #fffbf1;
  --on-felt-soft: rgba(255, 251, 241, 0.78);
  --peacock:    #2fa577;
  --peacock-soft: rgba(47, 165, 119, 0.11);
  --red:        #7a55d6;
  --red-soft:   rgba(122, 85, 214, 0.09);
  --rose:       #7a55d6;

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

  /* Buttons: violet by day, lilac by night */
  --btn-bg:       #6b4bc8;
  --btn-bg-hover: #7a55d6;
  --btn-ink:      #ffffff;
  --btn-shadow:   0 2px 0 #4b3399, 0 8px 18px -10px rgba(75, 51, 153, .7);
  --btn-shadow-hover: 0 3px 0 #4b3399, 0 12px 22px -10px rgba(75, 51, 153, .7);

  /* A row of small painted eggs: the theme's border band */
  --egg-band: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='14' viewBox='0 0 110 14'><g><path d='M11 1 C15 1 17 6 17 9 C17 12 14.5 13.5 11 13.5 C7.5 13.5 5 12 5 9 C5 6 7 1 11 1 Z' fill='%23ffe39a'/><path d='M33 1 C37 1 39 6 39 9 C39 12 36.5 13.5 33 13.5 C29.5 13.5 27 12 27 9 C27 6 29 1 33 1 Z' fill='%23a8e3c9'/><path d='M55 1 C59 1 61 6 61 9 C61 12 58.5 13.5 55 13.5 C51.5 13.5 49 12 49 9 C49 6 51 1 55 1 Z' fill='%23d7c6f6'/><path d='M77 1 C81 1 83 6 83 9 C83 12 80.5 13.5 77 13.5 C73.5 13.5 71 12 71 9 C71 6 73 1 77 1 Z' fill='%23ffc6d1'/><path d='M99 1 C103 1 105 6 105 9 C105 12 102.5 13.5 99 13.5 C95.5 13.5 93 12 93 9 C93 6 95 1 99 1 Z' fill='%23b9dcf5'/></g><g fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-linejoin='round'><path d='M6 9 l2.5 -2 l2.5 2 l2.5 -2 l2.5 2'/><path d='M50 9 l2.5 -2 l2.5 2 l2.5 -2 l2.5 2'/><path d='M94 9 l2.5 -2 l2.5 2 l2.5 -2 l2.5 2'/></g></svg>") repeat-x left center / 110px 14px;
  /* A scatter of small blossoms across the page */
  --blossoms: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill-opacity='.22'><g fill='%23ffc6d1'><circle cx='24' cy='20' r='3'/><circle cx='29' cy='24' r='3'/><circle cx='27' cy='30' r='3'/><circle cx='21' cy='30' r='3'/><circle cx='19' cy='24' r='3'/></g><g fill='%23d7c6f6'><circle cx='106' cy='96' r='2.4'/><circle cx='110' cy='99' r='2.4'/><circle cx='108.5' cy='104' r='2.4'/><circle cx='103.5' cy='104' r='2.4'/><circle cx='102' cy='99' r='2.4'/></g></g><circle cx='24' cy='26' r='1.4' fill='%23e9a923' fill-opacity='.35'/><circle cx='106' cy='101' r='1.1' fill='%23e9a923' fill-opacity='.35'/></svg>");
  /* The meadow: deep spring green under pastel glows, the ground of the
     footer, the winners page, the splash and the wallet, in both modes */
  --meadow-bg:
    radial-gradient(420px 260px at 90% 0%, rgba(255, 227, 154, .30), transparent 70%),
    radial-gradient(380px 260px at 6% 100%, rgba(215, 198, 246, .28), transparent 70%),
    radial-gradient(360px 240px at 60% 115%, rgba(255, 198, 209, .26), transparent 70%),
    linear-gradient(170deg, #2f5a41 0%, #24412f 60%, #1a3124 100%);

  /* Grass blades along the foot of a section, as an 80×34 tile */
  --grass-tile: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='34' viewBox='0 0 80 34'><g fill='%236dbb6e'><path d='M0 34 C2 22 4 14 3 4 C7 14 8 24 7 34 Z'/><path d='M9 34 C12 24 16 16 20 10 C17 20 16 28 16 34 Z'/><path d='M18 34 C18 22 20 12 24 2 C25 14 25 24 24 34 Z'/><path d='M30 34 C30 26 28 18 24 12 C30 18 34 26 35 34 Z'/><path d='M38 34 C40 22 44 12 48 6 C46 18 46 26 46 34 Z'/><path d='M50 34 C50 24 52 16 56 8 C57 18 57 26 56 34 Z'/><path d='M58 34 C60 26 62 20 68 14 C64 22 64 28 64 34 Z'/><path d='M68 34 C68 22 70 14 74 4 C75 16 76 26 74 34 Z'/></g><g fill='%234a9a58'><path d='M4 34 C6 26 8 20 12 16 C10 24 10 30 10 34 Z'/><path d='M26 34 C27 26 30 20 33 16 C32 24 32 30 31 34 Z'/><path d='M52 34 C53 28 55 22 60 18 C58 26 58 30 58 34 Z'/><path d='M74 34 C75 28 77 22 80 20 C79 26 79 30 79 34 Z'/></g></svg>");

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

html.dark {
  --paper:        #10201b;
  --paper-2:      #172b25;
  --paper-3:      #20382f;
  --ink:          #f3f7ee;
  --ink-2:        #d6e2d6;
  --ink-soft:     #9fb4a6;
  --rule:         rgba(243, 247, 238, 0.13);
  --rule-soft:    rgba(243, 247, 238, 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);

  /* Lilac */
  --theme-50:  #1e1a33;
  --theme-100: #2b2447;
  --theme-200: #4a3d7a;
  --theme-300: #ddd0ff;
  --theme-400: #cbb8ff;
  --theme-500: #b9a2ff;
  --theme-600: #c9b6ff;
  --theme-700: #ddd0ff;
  --theme-800: #ebe3ff;
  --theme-900: #f5f1ff;
  --theme-500-rgb: 185, 162, 255;
  --theme-600-rgb: 201, 182, 255;
  --theme-600-ink: #1b1230;

  --c1: #b9a2ff; --c2: #ffd36b; --c3: #6fdcae; --c4: #ff9fb7; --c5: #8fcaf5;
  --rose-soft: rgba(185, 162, 255, 0.14);
  --red:        #b9a2ff;
  --red-soft:   rgba(185, 162, 255, 0.14);
  --rose:       #b9a2ff;

  --gold:       #ffd36b;
  --gold-2:     #ffe39a;
  --gold-soft:  rgba(185, 162, 255, 0.13);
  --felt:       #0c1915;
  --felt-2:     #172b25;
  --peacock:    #6fdcae;
  --peacock-soft: rgba(111, 220, 174, 0.14);

  --nav-accent:    var(--c2);
  --hdr-strip-bg:  #0b1713;

  --btn-bg:       #b9a2ff;
  --btn-bg-hover: #cbb8ff;
  --btn-ink:      #1b1230;
  --btn-shadow:   0 2px 0 #7a62c9, 0 8px 22px -8px rgba(185, 162, 255, .45);
  --btn-shadow-hover: 0 3px 0 #7a62c9, 0 12px 28px -8px rgba(185, 162, 255, .6);

  --blossoms: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill-opacity='.12'><g fill='%23ffc6d1'><circle cx='24' cy='20' r='3'/><circle cx='29' cy='24' r='3'/><circle cx='27' cy='30' r='3'/><circle cx='21' cy='30' r='3'/><circle cx='19' cy='24' r='3'/></g><g fill='%23d7c6f6'><circle cx='106' cy='96' r='2.4'/><circle cx='110' cy='99' r='2.4'/><circle cx='108.5' cy='104' r='2.4'/><circle cx='103.5' cy='104' r='2.4'/><circle cx='102' cy='99' r='2.4'/></g></g></svg>");
  --page-bg:
    radial-gradient(900px 420px at 15% -140px, rgba(185, 162, 255, 0.12), transparent 70%) no-repeat,
    radial-gradient(900px 420px at 90% -160px, rgba(255, 211, 107, 0.08), transparent 70%) no-repeat,
    var(--blossoms) repeat,
    var(--paper);
}

/* ── Materials ──
   The pieces every surface is built from, shared by the skin sheets
   (assets/css/skin/) and the plugin variants:
   - the five pastels (--p1 … --p5) for eggs and fills, their deeper
     sisters (--c1 … --c5) for marks, and --cN-ink for lettering on white;
   - an eggshell cap: a band of painted shell along the top of a card,
     broken off along a zigzag crack (--crack-hem is the crack as a mask);
   - the egg band (row of painted eggs) and grass along the foot;
   - wicker from the Easter basket for frames, a ribbon bow on the shoulder;
   - an egg and a five-petal blossom as masks, behind icons, numbers and
     the current page;
   - the painted zigzag as a rule under section heads;
   - a twig nest round thumbnails and avatars. */
:root {
  --c1-ink: #5f42bd; --c2-ink: #8a5f00; --c3-ink: #1b7650; --c4-ink: #b03a64; --c5-ink: #22679c;
  --crack-hem: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) left bottom / 14px 7px repeat-x;
  --egg-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M50 1 C77 1 95 39 95 62 C95 86 75 99 50 99 C25 99 5 86 5 62 C5 39 23 1 50 1 Z'/></svg>") center / 100% 100% no-repeat;
  --blossom-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g><circle cx='50' cy='25' r='24'/><circle cx='74' cy='42' r='24'/><circle cx='65' cy='72' r='24'/><circle cx='35' cy='72' r='24'/><circle cx='26' cy='42' r='24'/><circle cx='50' cy='52' r='22'/></g></svg>") center / contain no-repeat;
  --egg-dot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><defs><clipPath id='e'><path d='M12 1 C19 1 23 11 23 18 C23 25 18 29 12 29 C6 29 1 25 1 18 C1 11 5 1 12 1 Z'/></clipPath></defs><path d='M12 1 C19 1 23 11 23 18 C23 25 18 29 12 29 C6 29 1 25 1 18 C1 11 5 1 12 1 Z' fill='%23d7c6f6'/><g clip-path='url(%23e)'><rect x='0' y='19' width='24' height='12' fill='%23ffe39a'/><path d='M0 18 l3 -3 l3 3 l3 -3 l3 3 l3 -3 l3 3 l3 -3 l3 3' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/></g><path d='M7 8 C8 6 9.5 4.6 11 4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' opacity='.7'/><path d='M12 1 C19 1 23 11 23 18 C23 25 18 29 12 29 C6 29 1 25 1 18 C1 11 5 1 12 1 Z' fill='none' stroke='%237a55d6' stroke-opacity='.35' stroke-width='1'/></svg>") center / contain no-repeat;
  --blossom-dot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23ffc6d1'><circle cx='12' cy='6' r='5'/><circle cx='17.7' cy='10.2' r='5'/><circle cx='15.5' cy='17' r='5'/><circle cx='8.5' cy='17' r='5'/><circle cx='6.3' cy='10.2' r='5'/></g><circle cx='12' cy='12' r='3.6' fill='%23e9a923'/></svg>") center / contain no-repeat;
  --zigzag-rule: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'><path d='M0 8 L7 3 L14 8 L21 3 L28 8' fill='none' stroke='%237a55d6' stroke-width='2.4' stroke-linejoin='round'/><path d='M0 11 L7 6 L14 11 L21 6 L28 11' fill='none' stroke='%23ffc6d1' stroke-width='1.6' stroke-linejoin='round'/></svg>") repeat-x left center / 28px 12px;
  --wicker:
    repeating-linear-gradient(90deg, rgba(255, 246, 220, .35) 0 1.5px, transparent 1.5px 7px),
    conic-gradient(from 90deg at 50% 50%, #e3b868 0 25%, #c6913f 0 50%, #e3b868 0 75%, #c6913f 0) 0 0 / 14px 12px;
  --wicker-edge: #a8742f;
  --nest-ring: repeating-conic-gradient(#c8954a 0 7deg, #a8733a 7deg 12deg, #dcb06a 12deg 18deg);
  --pastel-stripe: repeating-linear-gradient(90deg, #ffe39a 0 14px, #a8e3c9 14px 28px, #d7c6f6 28px 42px, #ffc6d1 42px 56px, #b9dcf5 56px 70px);
  --bow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='44' viewBox='0 0 60 44'><path d='M27 22 L18 40 L23 38 L26 43 L30 25 Z' fill='%23e5658a'/><path d='M33 22 L42 40 L37 38 L34 43 L30 25 Z' fill='%23d4507a'/><path d='M29 20 C20 6 4 4 4 14 C4 24 18 26 29 22 Z' fill='%23ffc6d1'/><path d='M31 20 C40 6 56 4 56 14 C56 24 42 26 31 22 Z' fill='%23ffb3c4'/><path d='M27 18 C20 12 11 11 9 14' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' opacity='.7'/><path d='M29 20 C20 6 4 4 4 14 C4 24 18 26 29 22 Z M31 20 C40 6 56 4 56 14 C56 24 42 26 31 22 Z' fill='none' stroke='%23b03a64' stroke-opacity='.35' stroke-width='1.2'/><rect x='25' y='15' width='10' height='11' rx='4' fill='%23e5658a'/></svg>") center / contain no-repeat;
  /* A spring morning behind a product: pale sky, the sun's glow, a green
     hill to stand it on */
  --meadow-view:
    radial-gradient(circle at 50% 40%, rgba(255, 227, 154, .75) 0 16%, rgba(255, 227, 154, 0) 42%),
    radial-gradient(130% 34% at 50% 100%, #a9dc9c 0 54%, #8ecb85 55% 70%, transparent 71%),
    linear-gradient(180deg, #e8f3ff 0, #f4efff 62%, #fffbf1 100%);
}
html.dark {
  --c1-ink: #cbb8ff; --c2-ink: #ffd36b; --c3-ink: #7fe3b8; --c4-ink: #ffadc2; --c5-ink: #9fd2f7;
  --zigzag-rule: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='12' viewBox='0 0 28 12'><path d='M0 8 L7 3 L14 8 L21 3 L28 8' fill='none' stroke='%23b9a2ff' stroke-width='2.4' stroke-linejoin='round'/><path d='M0 11 L7 6 L14 11 L21 6 L28 11' fill='none' stroke='%23ffd36b' stroke-opacity='.7' stroke-width='1.6' stroke-linejoin='round'/></svg>") repeat-x left center / 28px 12px;
  --wicker:
    repeating-linear-gradient(90deg, rgba(255, 236, 190, .14) 0 1.5px, transparent 1.5px 7px),
    conic-gradient(from 90deg at 50% 50%, #9c6f33 0 25%, #7a5424 0 50%, #9c6f33 0 75%, #7a5424 0) 0 0 / 14px 12px;
  --wicker-edge: #5e3f18;
  --nest-ring: repeating-conic-gradient(#9c6f33 0 7deg, #6f4c20 7deg 12deg, #b48546 12deg 18deg);
  --pastel-stripe: repeating-linear-gradient(90deg, #ffd36b 0 14px, #6fdcae 14px 28px, #b9a2ff 28px 42px, #ff9fb7 42px 56px, #8fcaf5 56px 70px);
  /* After dark: the night garden, a low moon glow, the hill in shadow */
  --meadow-view:
    radial-gradient(circle at 50% 40%, rgba(185, 162, 255, .32) 0 16%, rgba(185, 162, 255, 0) 42%),
    radial-gradient(130% 34% at 50% 100%, #2f5a41 0 54%, #24412f 55% 70%, transparent 71%),
    linear-gradient(180deg, #1b2a3d 0, #172a2b 62%, #10201b 100%);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board, so 2048 tiles, hex
   cells and word-grid letters come out as painted eggs on cream. Tiles rise
   from pale butter through mint, lilac and blush to deep violet. */
:root {
  --game-bg:        #fffbf1;
  --game-surface:   #f2ebdc;
  --game-surface-2: #ffffff;
  --game-ink:       #2c2440;
  --game-muted:     #776f8c;
  --game-accent:    #6b4bc8;
  --game-accent-ink:#ffffff;
  --game-good:      #2fa577;
  --game-bad:       #d1456f;
  --game-tile-1:    #fff1c4;
  --game-tile-2:    #ffe39a;
  --game-tile-3:    #a8e3c9;
  --game-tile-4:    #b9dcf5;
  --game-tile-5:    #d7c6f6;
  --game-tile-6:    #ffc6d1;
  --game-tile-7:    #e5658a;
  --game-tile-8:    #6b4bc8;
  --game-radius:    16px;
  --game-font:      'Comfortaa', 'M PLUS Rounded 1c', 'Segoe UI', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/easter/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): cream and meadow, not a dark screen */
  --game-arena-screen: #fffbf1;
  --game-arena-coins:  #b87f0a;
  --game-arena-win:    #2fa577;
  --game-arena-danger: #d1456f;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill-opacity='.22'><path d='M30 14 C36 14 40 24 40 30 C40 36 35 39 30 39 C25 39 20 36 20 30 C20 24 24 14 30 14 Z' fill='%23d7c6f6'/><path d='M112 92 C117 92 120 100 120 105 C120 110 116 112 112 112 C108 112 104 110 104 105 C104 100 107 92 112 92 Z' fill='%23ffe39a'/><g fill='%23ffc6d1'><circle cx='104' cy='26' r='3'/><circle cx='109' cy='30' r='3'/><circle cx='107' cy='36' r='3'/><circle cx='101' cy='36' r='3'/><circle cx='99' cy='30' r='3'/></g><g fill='%23a8e3c9'><circle cx='40' cy='112' r='2.6'/><circle cx='44.5' cy='115.5' r='2.6'/><circle cx='43' cy='120.5' r='2.6'/><circle cx='37' cy='120.5' r='2.6'/><circle cx='35.5' cy='115.5' r='2.6'/></g></g></svg>");
}
html.dark {
  --game-bg:        #10201b;
  --game-surface:   #172b25;
  --game-surface-2: #20382f;
  --game-ink:       #f3f7ee;
  --game-muted:     #9fb4a6;
  --game-accent:    #b9a2ff;
  --game-accent-ink:#1b1230;
  --game-good:      #6fdcae;
  --game-bad:       #ff9fb7;
  --game-tile-1:    #2a3d33;
  --game-tile-2:    #355a4a;
  --game-tile-3:    #3d7a5e;
  --game-tile-4:    #3f6f93;
  --game-tile-5:    #7a62c9;
  --game-tile-6:    #c96a88;
  --game-tile-7:    #ffd36b;
  --game-tile-8:    #f3f7ee;
  --game-arena-screen: #10201b;
  --game-arena-coins:  #ffd36b;
  --game-arena-win:    #6fdcae;
  --game-arena-danger: #ff9fb7;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill-opacity='.12'><path d='M30 14 C36 14 40 24 40 30 C40 36 35 39 30 39 C25 39 20 36 20 30 C20 24 24 14 30 14 Z' fill='%23b9a2ff'/><path d='M112 92 C117 92 120 100 120 105 C120 110 116 112 112 112 C108 112 104 110 104 105 C104 100 107 92 112 92 Z' fill='%23ffd36b'/><g fill='%23ff9fb7'><circle cx='104' cy='26' r='3'/><circle cx='109' cy='30' r='3'/><circle cx='107' cy='36' r='3'/><circle cx='101' cy='36' r='3'/><circle cx='99' cy='30' r='3'/></g></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);
}
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: #ffe39a; color: #2c2440; }

.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 painted egg 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: 11px; height: 14px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: linear-gradient(180deg, var(--p3) 0 45%, #ffffff 45% 55%, var(--p1) 55%);
  box-shadow: inset 0 0 0 1px rgba(44, 36, 64, .12);
}
/* A centred eyebrow (flex justify-center in the markup) stays a full-width
   row so it lines up with the centred heading under it. */
html .section-eyebrow.flex.justify-center { display: flex; }

.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, 250, 242, 0.9); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffe39a; }

/* The egg band: small painted eggs in the five pastels, under the main
   header bar and wherever a section needs a border. */
.ea-band { height: 14px; background: var(--egg-band); }

/* The Easter chip in the status strip */
.ea-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .06em; color: #ffe39a; }
.ea-strip-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
/* 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) { .ea-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: #ffe39a; color: #2c2440; box-shadow: 0 2px 0 #d9b75a; }
.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(--meadow-bg); color: #f6f2ff;
  border: 1px solid rgba(255, 227, 154, .35); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: var(--egg-band); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(251, 250, 242, .2); }

/* ── 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, 250, 242, 0.9); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffe39a; }

/* ── 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(255, 251, 241, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(16, 32, 27, 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); }

/* ── Blossom drifting across a section (.ea-petals), each petal placed by
   --x, sized by --s and timed by --d/--w; still for visitors who ask for
   less motion ── */
.ea-petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.ea-petal {
  position: absolute; top: -20px; left: var(--x); width: var(--s, 12px); aspect-ratio: 1;
  border-radius: 80% 0 80% 0; background: var(--c, #ffc6d1); opacity: .8;
  transform: rotate(var(--r, 30deg));
}
@media (prefers-reduced-motion: no-preference) {
  .ea-petal { animation: ea-drift var(--d, 16s) linear 1 forwards; animation-delay: var(--w, 0s); }
}
@media (prefers-reduced-motion: reduce) { .ea-petal { top: var(--y, 30%); } }
@keyframes ea-drift {
  0% { transform: translate(0, 0) rotate(var(--r, 30deg)); }
  50% { transform: translate(40px, 55vh) rotate(calc(var(--r, 30deg) + 180deg)); }
  100% { transform: translate(-10px, calc(110vh + 40px)) rotate(calc(var(--r, 30deg) + 360deg)); }
}

/* Painted eggs drawn by easter_egg_svg() take their fill from currentColor */
.ea-egg { display: block; width: 100%; height: auto; overflow: visible; }

/* Grass: blades along the foot of a section, drawn as a repeating tile */
.ea-grass {
  height: 34px;
  background: var(--grass-tile) repeat-x left bottom / 80px 34px;
}

/* ── Dark/light toggle: an egg cracks open ──
   assets/themes/easter/assets/js/easter.js registers the transition: a
   pastel egg grows from the middle of the screen until its shell covers
   the page, the mode flips inside it, and it cracks along a zigzag, the
   top half lifting away and the bottom falling. */
.px-fx--ea-egg { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--ea-egg .ea-shell {
  position: absolute; left: 50%; top: 50%; width: 190vmax; height: 230vmax; margin: -115vmax 0 0 -95vmax;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background:
    radial-gradient(30vmax 20vmax at 40% 30%, rgba(255, 255, 255, .55), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 9vmax, rgba(255, 255, 255, .5) 9vmax 10.5vmax, transparent 10.5vmax 20vmax),
    var(--egg, #d7c6f6);
  transform: scale(.02);
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.px-fx--ea-egg .ea-shell--top { clip-path: polygon(0 0, 100% 0, 100% 50%, 95% 47%, 90% 50%, 85% 47%, 80% 50%, 75% 47%, 70% 50%, 65% 47%, 60% 50%, 55% 47%, 50% 50%, 45% 47%, 40% 50%, 35% 47%, 30% 50%, 25% 47%, 20% 50%, 15% 47%, 10% 50%, 5% 47%, 0 50%); }
.px-fx--ea-egg .ea-shell--bottom { clip-path: polygon(0 50%, 5% 47%, 10% 50%, 15% 47%, 20% 50%, 25% 47%, 30% 50%, 35% 47%, 40% 50%, 45% 47%, 50% 50%, 55% 47%, 60% 50%, 65% 47%, 70% 50%, 75% 47%, 80% 50%, 85% 47%, 90% 50%, 95% 47%, 100% 50%, 100% 100%, 0 100%); }
.px-fx--ea-egg.is-whole .ea-shell { transform: none; }
.px-fx--ea-egg.is-cracked .ea-shell { transition: transform .55s cubic-bezier(.5, 0, .75, 0); }
.px-fx--ea-egg.is-cracked .ea-shell--top { transform: translateY(-62%) rotate(-6deg); }
.px-fx--ea-egg.is-cracked .ea-shell--bottom { transform: translateY(62%) rotate(4deg); }

/* ── Footer: a meadow in both modes — grass along its top edge with
   painted eggs half-hidden in it, and a pair of ears peeking up ── */
.ea-footer {
  --paper:     #24412f;
  --paper-2:   #2f5a41;
  --paper-3:   #386a4d;
  --ink:       #fbfaf2;
  --ink-2:     #e2ecdf;
  --ink-soft:  #b4c9b8;
  --rule:      rgba(251, 250, 242, 0.16);
  --rule-soft: rgba(251, 250, 242, 0.08);
  --theme-500: #ffe39a; --theme-600: #ffe39a; --theme-700: #fff0c2;
  --theme-500-rgb: 255, 227, 154;
  position: relative;
}
html.dark .ea-footer { --paper: #0c1915; --paper-2: #172b25; --paper-3: #20382f; }
.ea-footer-top { position: relative; background: var(--paper); margin-bottom: -1px; }
html:not(.dark) .ea-footer-top { background: #fffbf1; }
.ea-footer-top .ea-grass { position: relative; z-index: 2; height: 40px; background-size: 94px 40px; }
.ea-footer-eggs { position: absolute; inset: auto 0 2px 0; z-index: 1; display: flex; justify-content: space-around; padding: 0 1rem; pointer-events: none; }
.ea-footer-eggs > svg { width: 26px; height: auto; margin-bottom: var(--y, 0px); transform: rotate(var(--r, 0deg)); }
.ea-footer-ears { position: absolute; z-index: 1; bottom: 10px; left: 72%; width: 30px; height: 40px; }
.ea-footer-ears::before, .ea-footer-ears::after {
  content: ''; position: absolute; bottom: 0; width: 11px; height: 36px; border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
  background: radial-gradient(ellipse 30% 60% at 50% 55%, #ffc6d1 0 90%, transparent 100%), #f7f3ea;
  transform-origin: 50% 100%;
}
.ea-footer-ears::before { left: 2px; transform: rotate(-12deg); }
.ea-footer-ears::after { right: 2px; transform: rotate(10deg); }
@media (prefers-reduced-motion: no-preference) {
  .ea-footer-ears::after { animation: ea-twitch 6s ease-in-out 2 forwards; }
}
@keyframes ea-twitch { 0%, 88%, 100% { transform: rotate(10deg); } 92% { transform: rotate(22deg); } 96% { transform: rotate(6deg); } }
[dir="rtl"] .ea-footer-ears { left: auto; right: 72%; }
.ea-footer a:hover { color: #ffe39a; }
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 .ea-footer .ed-newsletter {
  position: relative;
  background:
    radial-gradient(220px 140px at 0% 0%, rgba(255, 227, 154, .45), transparent 70%),
    radial-gradient(220px 140px at 100% 100%, rgba(215, 198, 246, .5), transparent 70%),
    #fffbf1;
  color: #2c2440;
  border: 0; border-radius: 26px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .5);
  overflow: hidden;
}
html body .ea-footer .ed-newsletter::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--egg-band); pointer-events: none; }
html body .ea-footer .ed-newsletter::after { display: none; }
html body .ea-footer .ed-newsletter, html body .ea-footer .ed-newsletter * { --ink: #2c2440; --ink-2: #4a4163; }
html body .ea-footer .ed-newsletter-input { background: #ffffff !important; color: #2c2440 !important; border: 1px solid rgba(44, 36, 64, .18) !important; border-radius: 999px; }
html body .ea-footer .ed-newsletter-input::placeholder { color: #776f8c; }
html body .ea-footer .ed-newsletter-input:focus { border-color: #7a55d6 !important; box-shadow: 0 0 0 3px rgba(122, 85, 214, .15); }
html body .ea-footer .ed-newsletter-btn {
  background: #6b4bc8; color: #ffffff; border: 0; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 700;
}
html body .ea-footer .ed-newsletter-age { color: #4a4163; }
/* The card stays cream after dark: header.css letters footer headings and
   copy light and the dark field rule paints inputs green, so pin both back. */
html.dark body .ea-footer .ed-newsletter h4,
html.dark body .ea-footer .ed-newsletter p:not(#newsletter-msg) { color: #2c2440; }
html.dark body .ea-footer .ed-newsletter input.ed-newsletter-input[type="email"]:not(.no-dark) {
  background-color: #ffffff !important;
  border-color: rgba(44, 36, 64, .18) !important;
  color: #2c2440 !important;
}

/* Logo card: the light-mode logo on a cream card with an egg border along
   its foot, wherever it sits on the meadow (footer, app splash). */
.ea-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.6rem 1.35rem;
  background: var(--egg-band), #fffbf1;
  background-position: left bottom 4px, 0 0;
  background-size: 110px 14px, auto;
  background-repeat: repeat-x, no-repeat;
  border-radius: 22px;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .5);
}

/* 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(16, 32, 27, 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(23, 43, 37, 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, #20382f, #10201b, #24412f, #0c1915) !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 green. 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: #0c1915 !important;
  border-color: rgba(243, 247, 238, .2) !important;
  color: #f3f7ee !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 green. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #0c1915;
  --paper: #f3f7ee;
  border-color: rgba(255, 227, 154, .3);
}

html header.safe-top-header[style] { background: rgba(255, 251, 241, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(16, 32, 27, .95) !important; }

/* ── Login / register / forgot-password brand panel: the meadow ── */
:root, html.dark {
  --brand-gradient: var(--meadow-bg);
  --brand-glow-1: rgba(255, 227, 154, 0.3);
  --brand-glow-2: rgba(215, 198, 246, 0.26);
}
.brand-panel { background: var(--meadow-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is grass 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: 34px !important;
  border-radius: 0 !important; transform: none !important; opacity: 1 !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='34' viewBox='0 0 80 34'><g fill='%236dbb6e'><path d='M0 34 C2 22 4 14 3 4 C7 14 8 24 7 34 Z'/><path d='M9 34 C12 24 16 16 20 10 C17 20 16 28 16 34 Z'/><path d='M18 34 C18 22 20 12 24 2 C25 14 25 24 24 34 Z'/><path d='M38 34 C40 22 44 12 48 6 C46 18 46 26 46 34 Z'/><path d='M50 34 C50 24 52 16 56 8 C57 18 57 26 56 34 Z'/><path d='M68 34 C68 22 70 14 74 4 C75 16 76 26 74 34 Z'/></g></svg>") repeat-x left bottom / 80px 34px !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(251, 250, 242, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: a woven basket in the meadow, with a painted egg
   peeking over its rim ── */
html body .wallet-hero {
  position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 10px, transparent 10px 20px),
    var(--meadow-bg);
  border: 1px solid rgba(251, 250, 242, .14);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  color: #fbfaf2;
  overflow: hidden;
}
html body .wallet-hero::before {
  left: 0; right: 0; top: auto; bottom: 0; height: 14px; border-radius: 0;
  background: var(--egg-band);
}
html body .wallet-hero::after {
  content: ''; position: absolute; right: 26px; top: 4.75rem; width: 38px; height: 48px;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background:
    linear-gradient(180deg, transparent 44%, #ffffff 44% 52%, transparent 52%),
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .6) 0 12%, transparent 30%),
    #ffc6d1;
  transform: rotate(14deg);
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 26px; transform: rotate(-14deg); }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 700;
  color: #ffffff;
}
html body .wallet-hero-btn-primary { background: #ffe39a; color: #2c2440; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 999px; }
html body .wallet-hero-btn-primary:hover { background: #fff0c2; color: #2c2440; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 500; color: #fbfaf2; border-color: rgba(251, 250, 242, .45); border-radius: 999px; }
/* The shared card letters "WALLET" and the transaction count in 25-30%
   white inline, which disappears into the meadow. */
html body .wallet-hero .wallet-ref { color: rgba(251, 250, 242, .78) !important; }
@media (max-width: 480px) {
  html body :is(.wallet-hero-btn-primary, .wallet-hero-btn-secondary) { white-space: nowrap; padding-inline: .9rem; gap: .35rem; }
}

/* ── Mystery box card (styled by assets/css/pages/home.css): a gift tied
   with a pastel 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: 12px; height: auto; border-radius: 0;
  background: repeating-linear-gradient(180deg, var(--p3) 0 14px, var(--p1) 14px 28px, var(--p2) 28px 42px, var(--p4) 42px 56px); 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 egg 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(--egg-band);
}
html body .pd-buybox .font-display.text-4xl { font-weight: 600; color: var(--theme-600); }
.pd-title { font-weight: 600 !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(--paper); }

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's violet. */
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(122, 85, 214, .3); }
html.dark .border-violet-200 { border-color: rgba(185, 162, 255, .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; }
/* Same for the accent-gradient buttons (Save Language, claim modal): after
   dark the accent turns pale lavender and needs the dark button ink. */
html :is(button, a).bg-gradient-to-r.from-theme-600.text-white {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html :is(button, a).bg-gradient-to-r.from-theme-600.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 egg 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(--egg-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: 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 .ea-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 hatching from a painted egg — the top of the
   shell over the picture, broken along a zigzag, a different pastel for
   each card ── */
.ea-win {
  --c: var(--p3);
  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;
}
.ea-win:nth-child(5n+2) { --c: var(--p1); }
.ea-win:nth-child(5n+3) { --c: var(--p2); }
.ea-win:nth-child(5n+4) { --c: var(--p4); }
.ea-win:nth-child(5n+5) { --c: var(--p5); }
.ea-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ea-win__wrap { background: var(--blossoms), color-mix(in srgb, var(--c) 22%, var(--paper-2)); padding-top: 22px; }
.ea-win__wrap::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, .7) 40% 52%, transparent 52%), var(--c);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 95% 100%, 90% 70%, 85% 100%, 80% 70%, 75% 100%, 70% 70%, 65% 100%, 60% 70%, 55% 100%, 50% 70%, 45% 100%, 40% 70%, 35% 100%, 30% 70%, 25% 100%, 20% 70%, 15% 100%, 10% 70%, 5% 100%, 0 70%);
}
.ea-win__wrap img { position: relative; z-index: 0; }
.ea-win__wrap > .absolute { z-index: 3; top: 2.6rem; }
.ea-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;
}
.ea-win__tag--open { color: #ffffff; background: #6b4bc8; border-color: transparent; }
.ea-win__tag--done { color: #ffffff; background: #2fa577; border-color: transparent; }
html.dark .ea-win__tag--done { color: #0c1915; background: #6fdcae; }
.ea-win__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.ea-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.ea-win__price { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1; color: var(--theme-600); }
.ea-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; }
.ea-win__cart, .ea-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 12px; font-weight: 600;
}
.ea-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.ea-win__cart:hover { border-color: var(--red); color: var(--red); }
.ea-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.ea-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(--theme-600); background: var(--rose-soft); border-radius: 12px;
}

/* ── 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: 2.8rem; padding-bottom: 2.4rem;
  background: var(--blossoms), 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: 20px;
  background:
    radial-gradient(circle at 11px 7px, #ffffff 0 1.8px, transparent 2.3px) 0 0 / 22px 20px repeat-x,
    linear-gradient(180deg, transparent 0 11px, rgba(255, 255, 255, .8) 11px 13px, transparent 13px),
    var(--p3);
  -webkit-mask: var(--crack-hem); mask: var(--crack-hem);
}
html body .age-check-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--egg-band);
}
html body .age-check-logo { border-radius: 50%; padding: 9px; background: radial-gradient(circle, var(--paper-2) 0 62%, transparent 63%), var(--nest-ring); }
html body .age-check-title { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; }
html body .age-check-input { border-radius: 16px; border: 1.5px solid var(--rule); background: var(--paper-2); font-family: var(--font-ui); }
html body .age-check-input:focus { border-color: var(--c1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--p3) 55%, transparent); outline: none; }
html body .age-check-submit { border-radius: 14px; 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); }
/* Change language: each language a cream card; the chosen one ringed in
   violet with its flag in a twig nest */
html body .lang-card {
  border-radius: 20px !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(--c1) !important; }
html body .lang-card:has(input:checked) {
  border-style: solid !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 3px var(--paper-2), 0 0 0 6px var(--c1), var(--shadow) !important;
  background: color-mix(in srgb, var(--p3) 20%, var(--paper-2)) !important;
}
html body .lang-card img { border-radius: 50%; padding: 3px; background: var(--nest-ring); }
html body .lang-card:has(input:checked) .rounded-full:has(> .fa-check) { background: var(--c1) !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(44, 36, 64, .55); }
html body:has(.lang-card) .footer-safe::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 14px; background: var(--egg-band); }
html body:has(.lang-card) .w-9.h-9.rounded-xl:has(> .fa-language) { background: linear-gradient(180deg, transparent 70%, rgba(255, 255, 255, .6) 70% 77%, transparent 77%), #7a55d6 !important; color: #fff !important; border-radius: 0 !important; padding-top: 3px; -webkit-mask: var(--egg-mask); mask: var(--egg-mask); }

/* The price-offer form on an item page brings its own amber Send button;
   it takes the theme's button like every other primary action. */
html body #shopB2bNegotiateForm button[type="submit"] { background: var(--btn-bg) !important; color: var(--btn-ink) !important; box-shadow: var(--btn-shadow); }
html body #shopB2bNegotiateForm button[type="submit"]:hover { background: var(--btn-bg-hover, var(--btn-bg)) !important; }

/* While the wheel turns the spin button is disabled, and the shared
   disabled grey made it look dead; it keeps its colour, a little softer. */
html body.is-spinning #spinButton:disabled { background: var(--btn-bg) !important; color: var(--btn-ink) !important; opacity: .8; cursor: progress; }

/* 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: #268761; --px-warn: #b45309; --px-crit: #ce3b67; --px-info: #5f42bd; }
html.dark:root { --px-good: #6fdcae; --px-warn: #fbc22d; --px-crit: #ffadc2; --px-info: #cbb8ff; }

/* Changing language, the scene (easter.js): the painted egg wobbles and
   cracks and the new name shows through; after the reload it hatches, the
   top of the shell lifts away and the name rises out with a chick and
   confetti. The egg is the same on both pages, so the reload never shows. */
.ea-lang-stage { background: color-mix(in srgb, var(--theme-900, #241850) 50%, transparent); }
.ea-lang-scene {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: min(560px, 100%); box-sizing: border-box; padding: 64px 20px 0; overflow: hidden;
  color: var(--ink, #2c2440); background: var(--paper, #fffbf1); border-radius: var(--radius, 20px);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .55); font-family: var(--font-ui, system-ui, sans-serif);
}
.ea-lang-egg {
  position: relative; z-index: 1; width: 180px; height: 230px; flex: 0 0 auto; transform-origin: 50% 92%;
  filter: drop-shadow(0 14px 14px rgba(44, 36, 64, .22));
}
.ea-lang-shell {
  position: absolute; inset: 0; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 22% 62%, var(--p3, #d7c6f6) 0 7px, transparent 8px),
    radial-gradient(circle at 50% 66%, var(--p2, #a8e3c9) 0 7px, transparent 8px),
    radial-gradient(circle at 78% 62%, var(--p5, #b9dcf5) 0 7px, transparent 8px),
    linear-gradient(180deg, var(--p5, #b9dcf5) 0 20%, var(--p1, #ffe39a) 20% 27%, var(--p4, #ffc6d1) 27% 76%, var(--p1, #ffe39a) 76% 82%, var(--p2, #a8e3c9) 82%);
}
.ea-lang-top { z-index: 3; transform-origin: 20% 50%; clip-path: polygon(0 0, 100% 0, 100% 49%, 90% 45%, 80% 50%, 70% 45%, 60% 50%, 50% 45%, 40% 50%, 30% 45%, 20% 50%, 10% 45%, 0 49%); }
.ea-lang-bottom { z-index: 2; clip-path: polygon(0 49%, 10% 45%, 20% 50%, 30% 45%, 40% 50%, 50% 45%, 60% 50%, 70% 45%, 80% 50%, 90% 45%, 100% 49%, 100% 100%, 0 100%); }
.ea-lang-crack { position: absolute; left: 0; top: 43%; z-index: 4; width: 100%; height: 10%; overflow: visible; }
.ea-lang-crack polyline { fill: none; stroke: #4b3399; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ea-lang-chick { position: absolute; left: 50%; top: 34%; z-index: 1; margin-left: -21px; font-size: 40px; line-height: 1; opacity: 0; transform: translateY(30px); }
.ea-lang-old {
  position: absolute; inset: 0 16px; z-index: 4; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 700 clamp(20px, 6vw, 26px)/1.15 var(--font-display, sans-serif); color: #4b3399; overflow-wrap: anywhere;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  opacity: 0; filter: blur(4px); transform: scale(.9);
}
.ea-lang-new { position: absolute; inset: 0 -30px; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.ea-lang-new img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.ea-lang-new b {
  max-width: 100%; box-sizing: border-box; padding: 6px 16px; border-radius: 999px; text-align: center;
  background: #fffbf1; color: #2c2440; font: 700 clamp(22px, 6.5vw, 30px)/1.15 var(--font-display, sans-serif); overflow-wrap: anywhere;
  box-shadow: 0 0 0 3px var(--p3, #d7c6f6), 0 8px 18px -8px rgba(44, 36, 64, .45);
}
.ea-lang-confetti { position: absolute; left: 50%; top: 42%; z-index: 6; width: 0; height: 0; }
.ea-lang-confetti i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; background: var(--p1, #ffe39a); opacity: 0; }
.ea-lang-confetti i:nth-child(5n+2) { background: var(--p2, #a8e3c9); }
.ea-lang-confetti i:nth-child(5n+3) { background: var(--p3, #d7c6f6); border-radius: 50%; }
.ea-lang-confetti i:nth-child(5n+4) { background: var(--p4, #ffc6d1); }
.ea-lang-confetti i:nth-child(5n) { background: var(--p5, #b9dcf5); border-radius: 50%; }
.ea-lang-confetti i:nth-child(1)  { --x: -120px; --y: -110px; --r: 200deg; }
.ea-lang-confetti i:nth-child(2)  { --x: -70px;  --y: -150px; --r: -160deg; }
.ea-lang-confetti i:nth-child(3)  { --x: -20px;  --y: -170px; --r: 240deg; }
.ea-lang-confetti i:nth-child(4)  { --x: 30px;   --y: -160px; --r: -220deg; }
.ea-lang-confetti i:nth-child(5)  { --x: 80px;   --y: -140px; --r: 180deg; }
.ea-lang-confetti i:nth-child(6)  { --x: 125px;  --y: -100px; --r: -260deg; }
.ea-lang-confetti i:nth-child(7)  { --x: -140px; --y: -40px;  --r: 140deg; }
.ea-lang-confetti i:nth-child(8)  { --x: 140px;  --y: -30px;  --r: -140deg; }
.ea-lang-confetti i:nth-child(9)  { --x: -100px; --y: 20px;   --r: 300deg; }
.ea-lang-confetti i:nth-child(10) { --x: 105px;  --y: 30px;   --r: -300deg; }
.ea-lang-confetti i:nth-child(11) { --x: -50px;  --y: -120px; --r: 90deg; }
.ea-lang-confetti i:nth-child(12) { --x: 55px;   --y: -115px; --r: -90deg; }
.ea-lang-grass {
  position: relative; width: calc(100% + 40px); height: 40px; margin-top: -18px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 22% 6px; box-sizing: border-box;
  background:
    radial-gradient(14px 12px at 10px 0, transparent 98%, var(--grass, #6dbb6e)) repeat-x 0 0 / 20px 12px,
    linear-gradient(var(--grass, #6dbb6e), var(--grass-2, #4a9a58)) no-repeat 0 12px / 100% 100%;
}
.ea-lang-flower { font-size: 26px; line-height: 1; opacity: 0; transform: translateY(10px) scale(.2); }

/* Out: the egg comes up, wobbles, cracks, and the new name shows through. */
.px-lang-stage-out .ea-lang-scene { animation: ea-lang-scene-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .ea-lang-egg { animation: ea-lang-wobble .55s ease-in-out .3s both; }
.px-lang-stage-out .ea-lang-crack { animation: ea-lang-crack .24s ease-out .64s both; }
.px-lang-stage-out .ea-lang-old { animation: ea-lang-flake .26s ease-in .78s both; }
.px-lang-stage-out .ea-lang-new { animation: ea-lang-show .28s ease-out .82s both; }
/* In: it starts where out ended; the egg hatches and the name rises out. */
.px-lang-stage-in .ea-lang-crack { animation: ea-lang-fade .15s ease .25s both; }
.px-lang-stage-in .ea-lang-top { animation: ea-lang-lift .5s cubic-bezier(.3, .6, .4, 1) .3s both; }
.px-lang-stage-in .ea-lang-new { animation: ea-lang-rise .5s cubic-bezier(.2, .8, .3, 1.2) .35s both; }
.px-lang-stage-in .ea-lang-chick { animation: ea-lang-peep .35s cubic-bezier(.2, .9, .3, 1.4) .48s both; }
.px-lang-stage-in .ea-lang-confetti i { animation: ea-lang-pop .7s cubic-bezier(.15, .7, .4, 1) .4s both; }
.px-lang-stage-in .ea-lang-flower { animation: ea-lang-bloom .32s cubic-bezier(.2, .9, .3, 1.4) .55s both; }
.px-lang-stage-in .ea-lang-flower + .ea-lang-flower { animation-delay: .63s; }
.px-lang-stage-in .ea-lang-scene { animation: ea-lang-scene-out .26s ease-in 1s both; }
@keyframes ea-lang-scene-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes ea-lang-scene-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes ea-lang-wobble {
  20% { transform: rotate(-7deg); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-5deg); }
  80% { transform: rotate(3deg); }
}
@keyframes ea-lang-crack { from { clip-path: inset(-50% 100% -50% 0); } to { clip-path: inset(-50% 0 -50% 0); } }
@keyframes ea-lang-flake { from { opacity: 1; filter: none; transform: none; } to { opacity: 0; filter: blur(4px); transform: scale(.9); } }
@keyframes ea-lang-show { from { opacity: 0; transform: scale(.8); } }
@keyframes ea-lang-fade { to { opacity: 0; } }
@keyframes ea-lang-lift { to { transform: translate(-30px, -84px) rotate(-32deg); opacity: 0; } }
@keyframes ea-lang-rise { to { transform: translateY(-92px) scale(1.12); } }
@keyframes ea-lang-peep { to { opacity: 1; transform: translateY(-4px); } }
@keyframes ea-lang-pop {
  0%   { opacity: 0; transform: scale(.3); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); }
}
@keyframes ea-lang-bloom { to { opacity: 1; transform: none; } }
@media (max-width: 460px) {
  .ea-lang-scene { padding-top: 58px; }
  .ea-lang-flower { display: none; }
  .ea-lang-new { inset: 0 -20px; }
}

/* 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; }

/* Windows (wallet, sign-out and the plugins' windows) sit on their own panel,
   so the secondary text, accent links and buttons in them take the deeper
   shades below to read at 4.5:1 there; the page around keeps its own. */
html:not(.dark) [role="dialog"] {
  --ink-soft: #736c88;
}
/* rev 868fe5109c9f2a2b */