/* ============================================================
   ADVENT MARKET THEME — a winter market through December.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the things of a holiday market: striped stall
   awnings, wrapped presents with ribbon, gift tags on string and
   strings of lights. Pine green and cranberry on warm cream by
   day; a snowy midnight lit by warm windows by night (the default).

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

:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Figtree', 'Inter', system-ui, sans-serif;

  --paper:        #fbf6ec;
  --paper-2:      #fffdf8;
  --paper-3:      #f2e9d8;
  --ink:          #1d2a22;
  --ink-2:        #3b4a40;
  --ink-soft:     #687268;
  --rule:         rgba(29, 42, 34, 0.14);
  --rule-soft:    rgba(29, 42, 34, 0.07);
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 1px 2px rgba(29, 42, 34, .06), 0 4px 14px -6px rgba(29, 42, 34, .12);
  --shadow-md:    0 2px 4px rgba(29, 42, 34, .06), 0 16px 32px -14px rgba(29, 42, 34, .28);

  /* Cranberry */
  --theme-50:  #fdf0f1;
  --theme-100: #f9d9dc;
  --theme-200: #f2b1b8;
  --theme-300: #e57f8a;
  --theme-400: #d84d5c;
  --theme-500: #c8283a;
  --theme-600: #a81f30;
  --theme-700: #861826;
  --theme-800: #64121d;
  --theme-900: #420b13;
  --theme-500-rgb: 200, 40, 58;
  --theme-600-rgb: 168, 31, 48;

  --pine:       #1f5a3d;
  --pine-2:     #2e7a54;
  --pine-soft:  rgba(31, 90, 61, 0.10);
  --cranberry:  #c8283a;
  --cranberry-soft: rgba(200, 40, 58, 0.10);
  --snow:       #fffdf8;
  --lamp:       #f0b44c;

  /* Names other themes' shared markup reaches for */
  --gold:       #d99a2b;
  --gold-2:     #f0bd5a;
  --gold-soft:  rgba(217, 154, 43, 0.16);
  --gold-ink:   #2a1d06;
  --felt:       #1f5a3d;
  --felt-2:     #174630;
  --on-felt:    #fbf6ec;
  --on-felt-soft: rgba(251, 246, 236, 0.74);
  --peacock:    #1f5a3d;
  --peacock-soft: rgba(31, 90, 61, 0.10);

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

  /* Buttons: pine green by day, warm window-light by night */
  --btn-bg:       #1f5a3d;
  --btn-bg-hover: #2e7a54;
  --btn-ink:      #fffdf8;
  --btn-shadow:   0 2px 0 #143d29, 0 8px 18px -10px rgba(20, 61, 41, .7);
  --btn-shadow-hover: 0 3px 0 #143d29, 0 12px 22px -10px rgba(20, 61, 41, .7);

  --awning: repeating-linear-gradient(90deg, #c8283a 0 28px, #fffdf8 28px 56px);
  --flakes: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='%231d2a22' fill-opacity='0.05'><circle cx='14' cy='22' r='1.6'/><circle cx='70' cy='12' r='1.1'/><circle cx='102' cy='48' r='1.7'/><circle cx='40' cy='66' r='1.2'/><circle cx='88' cy='96' r='1.4'/><circle cx='20' cy='104' r='1'/></g></svg>");

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

html.dark {
  --paper:        #0f1a2e;
  --paper-2:      #16243d;
  --paper-3:      #1f2f4c;
  --ink:          #f6efe2;
  --ink-2:        #d9d2c3;
  --ink-soft:     #a2adbf;
  --rule:         rgba(246, 239, 226, 0.14);
  --rule-soft:    rgba(246, 239, 226, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px -8px rgba(0, 0, 0, .55);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .3), 0 18px 36px -14px rgba(0, 0, 0, .75);

  --theme-50:  #2a1420;
  --theme-100: #3b1724;
  --theme-200: #6a2030;
  --theme-300: #ffb0b3;
  --theme-400: #ff8a8e;
  --theme-500: #e5484d;
  --theme-600: #f06469;
  --theme-700: #ff8a8e;
  --theme-800: #ffb0b3;
  --theme-900: #ffd9da;
  --theme-500-rgb: 229, 72, 77;
  --theme-600-rgb: 240, 100, 105;

  --pine:       #4fae7f;
  --pine-2:     #6cc495;
  --pine-soft:  rgba(79, 174, 127, 0.14);
  --cranberry:  #e5484d;
  --cranberry-soft: rgba(229, 72, 77, 0.16);
  --lamp:       #ffc56b;

  --gold:       #ffc56b;
  --gold-2:     #ffd796;
  --gold-soft:  rgba(255, 197, 107, 0.16);
  --gold-ink:   #2a1d06;
  --felt:       #0b1424;
  --felt-2:     #16243d;
  --peacock:    #4fae7f;
  --peacock-soft: rgba(79, 174, 127, 0.14);

  --nav-accent:    var(--lamp);
  --hdr-strip-bg:  #0b1424;

  --btn-bg:       #ffc56b;
  --btn-bg-hover: #ffd796;
  --btn-ink:      #2a1d06;
  --btn-shadow:   0 2px 0 #b9852f, 0 8px 22px -8px rgba(255, 197, 107, .45);
  --btn-shadow-hover: 0 3px 0 #b9852f, 0 12px 28px -8px rgba(255, 197, 107, .6);

  --awning: repeating-linear-gradient(90deg, #b8283a 0 28px, #f6efe2 28px 56px);
  --flakes: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><g fill='%23ffffff' fill-opacity='0.13'><circle cx='14' cy='22' r='1.6'/><circle cx='70' cy='12' r='1.1'/><circle cx='102' cy='48' r='1.7'/><circle cx='40' cy='66' r='1.2'/><circle cx='88' cy='96' r='1.4'/><circle cx='20' cy='104' r='1'/></g></svg>");
  --page-bg:
    radial-gradient(1000px 460px at 50% -160px, rgba(255, 197, 107, 0.10), transparent 70%) no-repeat,
    var(--flakes) repeat,
    var(--paper);
}

/* ── Materials ──
   The pieces every surface is built from, shared by the skin sheets
   (assets/css/skin/) and the plugin variants:
   - the market colours: cranberry, pine, lamp gold and frost (--a1 … --a4),
     with --aN-ink for lettering on cream;
   - the stall awning: cranberry and cream stripes ending in a scalloped
     valance (--valance is the scallops as a mask), across sheet tops;
   - a numbered calendar door: a panel with a moulded inner frame and a
     brass knob (--door-frame), for stats, page numbers and day tiles;
   - a bauble (--bauble-mask) behind icons and toast marks;
   - a string of lights (--lights-rule) under headings and table heads;
   - a candy-cane stripe for progress and countdown bars;
   - gift tags on string for prices and kickers, a ribbon and bow for
     anything that is a present (boxes, wallets, prizes);
   - a fir sprig as a bullet, snow lying on top of things (--snowcap) and
     a snowy hill with firs along the foot (--snow-ground);
   - stall timber for frames round banners, galleries and the arena;
   - the stall window (--stall-view) a product stands in. */
:root {
  --a1: #c8283a; --a2: #1f5a3d; --a3: #e0a43a; --a4: #4f7fa8;
  --a1-ink: #a81f30; --a2-ink: #1f5a3d; --a3-ink: #8a5a08; --a4-ink: #2f5f88;
  --a1-soft: rgba(200, 40, 58, .12); --a2-soft: rgba(31, 90, 61, .12); --a3-soft: rgba(224, 164, 58, .2); --a4-soft: rgba(79, 127, 168, .14);
  --wood: #8a5a33; --wood-2: #6b4226; --wood-3: #b07a48;
  --brass: #c9973f;
  --frost: #dfe9f2;
  --wreath: repeating-conic-gradient(#1f5a3d 0 9deg, #2e7a54 9deg 16deg, #1f5a3d 16deg 24deg, #c8283a 24deg 28deg, #2e7a54 28deg 33deg);
  --valance: linear-gradient(#000 0 0) top / 100% calc(100% - 9px) no-repeat, radial-gradient(circle at 50% 0, #000 13.5px, #0000 14px) left bottom / 28px 9px repeat-x;
  --door-frame: inset 0 0 0 3px var(--door, var(--paper-2)), inset 0 0 0 4.5px color-mix(in srgb, var(--door-line, var(--a3)) 70%, transparent);
  --bauble-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'><rect x='38' y='0' width='24' height='16' rx='4'/><circle cx='50' cy='64' r='48'/></svg>") center / 100% 100% no-repeat;
  --door-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M8 2 H92 a6 6 0 0 1 6 6 V92 a6 6 0 0 1 -6 6 H8 a6 6 0 0 1 -6 -6 V8 a6 6 0 0 1 6 -6 Z'/></svg>") center / 100% 100% no-repeat;
  --lights-rule: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='112' height='18' viewBox='0 0 112 18'><path d='M0 2 Q14 10 28 2 Q42 10 56 2 Q70 10 84 2 Q98 10 112 2' fill='none' stroke='%232c3a33' stroke-width='1.3'/><g fill='%232c3a33'><rect x='12.4' y='5.4' width='3.2' height='3' rx='.8'/><rect x='40.4' y='5.4' width='3.2' height='3' rx='.8'/><rect x='68.4' y='5.4' width='3.2' height='3' rx='.8'/><rect x='96.4' y='5.4' width='3.2' height='3' rx='.8'/></g><ellipse cx='14' cy='12.4' rx='3' ry='4.3' fill='%23c8283a'/><ellipse cx='42' cy='12.4' rx='3' ry='4.3' fill='%23e0a43a'/><ellipse cx='70' cy='12.4' rx='3' ry='4.3' fill='%232e7a54'/><ellipse cx='98' cy='12.4' rx='3' ry='4.3' fill='%234f7fa8'/><g fill='%23ffffff' fill-opacity='.6'><ellipse cx='13' cy='11' rx='.9' ry='1.5'/><ellipse cx='41' cy='11' rx='.9' ry='1.5'/><ellipse cx='69' cy='11' rx='.9' ry='1.5'/><ellipse cx='97' cy='11' rx='.9' ry='1.5'/></g></svg>") repeat-x left top / 112px 18px;
  --candy: repeating-linear-gradient(-45deg, var(--a1) 0 7px, #fffdf8 7px 14px);
  --fir-dot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'><path d='M10 2 L14.5 8.5 H12.2 L16.5 14 H13.6 L18.5 20 H1.5 L6.4 14 H3.5 L7.8 8.5 H5.5 Z' fill='%232e7a54'/><path d='M10 2 L14.5 8.5 H12.2 L16.5 14 H13.6 L18.5 20 H10 Z' fill='%231f5a3d'/><rect x='8.6' y='20' width='2.8' height='3.6' fill='%238a5a33'/><circle cx='10' cy='2.2' r='1.9' fill='%23e0a43a'/><circle cx='7.4' cy='16.6' r='1.1' fill='%23c8283a'/><circle cx='12.8' cy='11.4' r='1' fill='%23c8283a'/></svg>") center / contain no-repeat;
  --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 L17 41 L22.5 39 L25 44 L30 25 Z' fill='%23a81f30'/><path d='M33 22 L43 41 L37.5 39 L35 44 L30 25 Z' fill='%23861826'/><path d='M29 20 C21 5 3 4 4 15 C5 25 19 25 29 22 Z' fill='%23c8283a'/><path d='M31 20 C39 5 57 4 56 15 C55 25 41 25 31 22 Z' fill='%23b8283a'/><path d='M26 18 C20 12 11 10 8.5 14' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' opacity='.45'/><rect x='25' y='15' width='10' height='11' rx='4' fill='%23a81f30'/><rect x='27' y='17' width='3' height='6' rx='1.5' fill='%23ffffff' opacity='.3'/></svg>") center / contain no-repeat;
  --snowcap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'><path d='M0 0 H120 V7 C113 7 111 12.5 103 12.5 C96 12.5 95 8 87 8 C80 8 79 14.5 70 14.5 C62 14.5 62 9 54 9 C47 9 45 12 38 12 C30 12 30 6 22 6 C15 6 12.5 11 6.5 11 C3 11 1.5 8.5 0 7.5 Z' fill='%23ffffff'/><path d='M120 7 C113 7 111 12.5 103 12.5 C96 12.5 95 8 87 8 C80 8 79 14.5 70 14.5 C62 14.5 62 9 54 9 C47 9 45 12 38 12 C30 12 30 6 22 6 C15 6 12.5 11 6.5 11 C3 11 1.5 8.5 0 7.5' fill='none' stroke='%23b9cad9' stroke-width='1.2'/></svg>") repeat-x left top / 120px 16px;
  --snow-ground: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='44' viewBox='0 0 180 44'><path d='M30 30 L36 18 H33.5 L38 10 H35.8 L40 2 L44.2 10 H42 L46.5 18 H44 L50 30 Z' fill='%231f5a3d'/><path d='M126 32 L130 24 H128.4 L131.4 18 H130 L133 12 L136 18 H134.6 L137.6 24 H136 L140 32 Z' fill='%232e7a54'/><path d='M0 32 C26 24 52 24 78 30 C104 36 130 26 156 26 C166 26 174 28 180 30 V44 H0 Z' fill='%23ffffff'/><path d='M0 32 C26 24 52 24 78 30 C104 36 130 26 156 26 C166 26 174 28 180 30' fill='none' stroke='%23b9cad9' stroke-width='1.2'/><g fill='%23dfe9f2'><ellipse cx='60' cy='36' rx='14' ry='1.6'/><ellipse cx='140' cy='34' rx='10' ry='1.4'/></g></svg>") repeat-x left bottom / 180px 44px;
  --timber:
    repeating-linear-gradient(90deg, rgba(255, 236, 205, .07) 0 2px, transparent 2px 11px, rgba(60, 30, 10, .08) 11px 12px, transparent 12px 19px),
    linear-gradient(180deg, #a06c40 0%, #8a5a33 48%, #774b29 100%);
  --timber-edge: #5a361c;
  /* A product on show: the stall's window — warm cream, a lamp's glow
     overhead and a bank of snow to stand on */
  --stall-view:
    radial-gradient(130% 30% at 50% 102%, #ffffff 0 56%, #e6eef5 57% 64%, transparent 65%),
    radial-gradient(circle at 50% 30%, rgba(240, 180, 76, .3) 0 18%, rgba(240, 180, 76, 0) 46%),
    linear-gradient(180deg, #f6ecd9 0%, #fbf6ec 70%, #fffdf8 100%);
  --night-sky:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 0, transparent 100%),
    radial-gradient(1.2px 1.2px at 34% 8%, #fff 0, transparent 100%),
    radial-gradient(1.6px 1.6px at 58% 22%, #fff 0, transparent 100%),
    radial-gradient(1.1px 1.1px at 78% 10%, #fff 0, transparent 100%),
    radial-gradient(1.3px 1.3px at 90% 30%, #fff 0, transparent 100%),
    radial-gradient(600px 300px at 80% -10%, rgba(255, 197, 107, .16), transparent 70%),
    linear-gradient(180deg, #16243d 0%, #0f1a2e 60%, #0b1424 100%);
}
html.dark {
  --a1: #e5484d; --a2: #4fae7f; --a3: #ffc56b; --a4: #8ab8e0;
  --a1-ink: #ff9a9d; --a2-ink: #7fd3a6; --a3-ink: #ffc56b; --a4-ink: #a9cdee;
  --a1-soft: rgba(229, 72, 77, .16); --a2-soft: rgba(79, 174, 127, .16); --a3-soft: rgba(255, 197, 107, .16); --a4-soft: rgba(138, 184, 224, .16);
  --wood: #6b4226; --wood-2: #4f2f19; --wood-3: #8a5a33;
  --brass: #ffc56b;
  --frost: #24365a;
  --lights-rule: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='112' height='18' viewBox='0 0 112 18'><path d='M0 2 Q14 10 28 2 Q42 10 56 2 Q70 10 84 2 Q98 10 112 2' fill='none' stroke='%238a96a8' stroke-width='1.3'/><g fill='%238a96a8'><rect x='12.4' y='5.4' width='3.2' height='3' rx='.8'/><rect x='40.4' y='5.4' width='3.2' height='3' rx='.8'/><rect x='68.4' y='5.4' width='3.2' height='3' rx='.8'/><rect x='96.4' y='5.4' width='3.2' height='3' rx='.8'/></g><g><ellipse cx='14' cy='12.4' rx='5' ry='5.5' fill='%23ff5a63' fill-opacity='.25'/><ellipse cx='42' cy='12.4' rx='5' ry='5.5' fill='%23ffc56b' fill-opacity='.25'/><ellipse cx='70' cy='12.4' rx='5' ry='5.5' fill='%235fd39a' fill-opacity='.25'/><ellipse cx='98' cy='12.4' rx='5' ry='5.5' fill='%23fff4dc' fill-opacity='.25'/></g><ellipse cx='14' cy='12.4' rx='3' ry='4.3' fill='%23ff5a63'/><ellipse cx='42' cy='12.4' rx='3' ry='4.3' fill='%23ffc56b'/><ellipse cx='70' cy='12.4' rx='3' ry='4.3' fill='%235fd39a'/><ellipse cx='98' cy='12.4' rx='3' ry='4.3' fill='%23fff4dc'/></svg>") repeat-x left top / 112px 18px;
  --candy: repeating-linear-gradient(-45deg, var(--a1) 0 7px, #f6efe2 7px 14px);
  --fir-dot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'><path d='M10 2 L14.5 8.5 H12.2 L16.5 14 H13.6 L18.5 20 H1.5 L6.4 14 H3.5 L7.8 8.5 H5.5 Z' fill='%234fae7f'/><path d='M10 2 L14.5 8.5 H12.2 L16.5 14 H13.6 L18.5 20 H10 Z' fill='%232e7a54'/><rect x='8.6' y='20' width='2.8' height='3.6' fill='%23b07a48'/><circle cx='10' cy='2.2' r='1.9' fill='%23ffc56b'/><circle cx='7.4' cy='16.6' r='1.1' fill='%23ff8a8e'/><circle cx='12.8' cy='11.4' r='1' fill='%23ffc56b'/></svg>") center / contain no-repeat;
  --snowcap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='16' viewBox='0 0 120 16'><path d='M0 0 H120 V7 C113 7 111 12.5 103 12.5 C96 12.5 95 8 87 8 C80 8 79 14.5 70 14.5 C62 14.5 62 9 54 9 C47 9 45 12 38 12 C30 12 30 6 22 6 C15 6 12.5 11 6.5 11 C3 11 1.5 8.5 0 7.5 Z' fill='%23eef3f9'/></svg>") repeat-x left top / 120px 16px;
  --snow-ground: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='44' viewBox='0 0 180 44'><path d='M30 30 L36 18 H33.5 L38 10 H35.8 L40 2 L44.2 10 H42 L46.5 18 H44 L50 30 Z' fill='%23163f2c'/><path d='M126 32 L130 24 H128.4 L131.4 18 H130 L133 12 L136 18 H134.6 L137.6 24 H136 L140 32 Z' fill='%231f5a3d'/><circle cx='40' cy='2.5' r='1.6' fill='%23ffc56b'/><path d='M0 32 C26 24 52 24 78 30 C104 36 130 26 156 26 C166 26 174 28 180 30 V44 H0 Z' fill='%23d9e3ef'/><g fill='%23b9c8da'><ellipse cx='60' cy='36' rx='14' ry='1.6'/><ellipse cx='140' cy='34' rx='10' ry='1.4'/></g></svg>") repeat-x left bottom / 180px 44px;
  --timber:
    repeating-linear-gradient(90deg, rgba(255, 236, 205, .05) 0 2px, transparent 2px 11px, rgba(0, 0, 0, .12) 11px 12px, transparent 12px 19px),
    linear-gradient(180deg, #7a4d2b 0%, #633d21 48%, #52321b 100%);
  --timber-edge: #3a2210;
  /* After dark the window looks out on the night: midnight blue, a warm
     lamp overhead, the snow lit blue-white */
  --stall-view:
    radial-gradient(130% 30% at 50% 102%, #dbe5f0 0 56%, #b9c8da 57% 64%, transparent 65%),
    radial-gradient(circle at 50% 30%, rgba(255, 197, 107, .26) 0 18%, rgba(255, 197, 107, 0) 46%),
    radial-gradient(1.3px 1.3px at 18% 16%, rgba(255, 255, 255, .8) 0, transparent 100%),
    radial-gradient(1.1px 1.1px at 82% 22%, rgba(255, 255, 255, .7) 0, transparent 100%),
    linear-gradient(180deg, #16243d 0%, #1b2c48 70%, #22365a 100%);
}

/* ── Game palette ──
   Posted into every HTML5 game by the earn-games arena (game-theme.js).
   By day the boards are cream card with pine and cranberry pieces, rising
   from pale candlelight through gold and fir to cranberry; at night they
   are the midnight market, the top tiles lit like lamps. Square-ish
   corners, like calendar doors; numbers in Fraunces. */
:root {
  --game-bg:        #fbf6ec;
  --game-surface:   #efe4cf;
  --game-surface-2: #fffdf8;
  --game-ink:       #1d2a22;
  --game-muted:     #687268;
  --game-accent:    #1f5a3d;
  --game-accent-ink:#fffdf8;
  --game-good:      #2e7a54;
  --game-bad:       #c8283a;
  --game-tile-1:    #fdf3dc;
  --game-tile-2:    #f6dca6;
  --game-tile-3:    #f0b44c;
  --game-tile-4:    #8fc0a3;
  --game-tile-5:    #2e7a54;
  --game-tile-6:    #e57f8a;
  --game-tile-7:    #c8283a;
  --game-tile-8:    #0f1a2e;
  --game-radius:    9px;
  --game-font:      'Fraunces', Georgia, 'Times New Roman', serif;
  --game-font-css:  "/assets/themes/advent-market/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): the cream market by day */
  --game-arena-screen: #fbf6ec;
  --game-arena-coins:  #b07a12;
  --game-arena-win:    #2e7a54;
  --game-arena-danger: #c8283a;
  --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='%231f5a3d' fill-opacity='.08'><path d='M24 10 L30 20 H27 L33 30 H15 L21 20 H18 Z'/><path d='M92 70 L97 78 H95 L100 86 H84 L89 78 H87 Z'/></g><g fill='%23c8283a' fill-opacity='.09'><circle cx='86' cy='24' r='4'/><circle cx='30' cy='92' r='3'/></g><g fill='%23e0a43a' fill-opacity='.14'><circle cx='60' cy='56' r='1.6'/><circle cx='108' cy='108' r='1.4'/><circle cx='8' cy='60' r='1.4'/></g></svg>");
}
html.dark {
  --game-bg:        #0f1a2e;
  --game-surface:   #16243d;
  --game-surface-2: #1f2f4c;
  --game-ink:       #f6efe2;
  --game-muted:     #a2adbf;
  --game-accent:    #ffc56b;
  --game-accent-ink:#2a1d06;
  --game-good:      #4fae7f;
  --game-bad:       #ff8a8e;
  --game-tile-1:    #24365a;
  --game-tile-2:    #2f4a72;
  --game-tile-3:    #1f5a3d;
  --game-tile-4:    #2e7a54;
  --game-tile-5:    #a81f30;
  --game-tile-6:    #e5484d;
  --game-tile-7:    #ffc56b;
  --game-tile-8:    #fff4dc;
  --game-arena-screen: #0f1a2e;
  --game-arena-coins:  #ffc56b;
  --game-arena-win:    #4fae7f;
  --game-arena-danger: #ff8a8e;
  --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='%23ffffff' fill-opacity='.08'><circle cx='14' cy='22' r='1.6'/><circle cx='70' cy='12' r='1.1'/><circle cx='102' cy='48' r='1.7'/><circle cx='40' cy='66' r='1.2'/><circle cx='88' cy='96' r='1.4'/><circle cx='20' cy='104' r='1'/></g><g fill='%234fae7f' fill-opacity='.1'><path d='M24 40 L30 50 H27 L33 60 H15 L21 50 H18 Z'/><path d='M92 70 L97 78 H95 L100 86 H84 L89 78 H87 Z'/></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: 650;
  font-optical-sizing: auto;
  font-synthesis: none;
  letter-spacing: -.01em;
}
.display-italic { font-style: italic; }

::selection { background: var(--theme-500); color: #fff; }

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

/* Section eyebrow — a little gift tag on its string 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.14em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 22px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 28'><path d='M0 14C6 14 8 8 13 8' fill='none' stroke='%23d99a2b' stroke-width='2'/><path d='M14 4H40a4 4 0 0 1 4 4V20a4 4 0 0 1-4 4H14L8 14Z' fill='%23c8283a'/><circle cx='15' cy='14' r='2.6' fill='%23fffdf8'/></svg>") center / contain no-repeat;
}
[dir="rtl"] .section-eyebrow::before { transform: scaleX(-1); }

.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(--flakes); }

.ed-folio { font-family: var(--font-display); font-style: italic; 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(--pine); box-shadow: 0 0 0 3px var(--pine-soft); }
html.dark #desktopHeader .hdr-search { background: var(--paper-2); border-color: var(--rule); }
.ed-search { background: transparent; border: none; }

.hdr-strip, .hdr-strip .ed-status { color: rgba(251, 246, 236, 0.86); }
.hdr-strip a:hover, .hdr-strip button:hover { color: var(--lamp); }

/* The market awning: cranberry and cream stripes with a scalloped edge,
   hung under the main header bar. */
.am-awning { position: relative; height: 10px; background: var(--awning); }
.am-awning::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
  background: var(--awning);
  -webkit-mask: radial-gradient(circle at 50% 0, #000 12.5px, #0000 13px) 0 0 / 28px 12px repeat-x;
          mask: radial-gradient(circle at 50% 0, #000 12.5px, #0000 13px) 0 0 / 28px 12px repeat-x;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .12));
}

/* The advent chip in the status strip */
.am-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .06em; }
.am-strip-chip__door {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.25rem; padding: 0 .3rem;
  font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0;
  color: #2a1d06; background: var(--lamp); border-radius: 4px;
}

.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(--pine); color: #fffdf8; }
html.dark .ed-subnav-item.active { background: var(--lamp); color: #2a1d06; }
.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.55rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 0.97rem; font-weight: 750;
  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);
}
.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: 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: stall goods — warm cream, soft corners, 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: #1f5a3d; color: #fbf6ec;
  border: 0; border-radius: var(--radius);
  overflow: hidden;
}
html.dark .ed-plan-featured { background: #163f2c; }
/* A ribbon tied across the featured plan's top corner */
.ed-plan-featured::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 2.25rem; width: 12px;
  background: linear-gradient(90deg, #a81f30, #c8283a 40%, #a81f30);
  opacity: .9; pointer-events: none;
}
[dir="rtl"] .ed-plan-featured::after { right: auto; left: 2.25rem; }
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(251, 246, 236, .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(251, 246, 236, 0.86); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: var(--lamp); }

/* ── 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: 12px; 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(--cranberry-soft); }

.mobile-glass-header {
  background: rgba(251, 246, 236, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(15, 26, 46, 0.94); }

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

[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); }

/* ── Snowfall ──
   Two layers of flakes drifting down at different speeds. Purely
   decorative; switched off for visitors who ask for less motion. */
.am-snow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.am-snow::before, .am-snow::after {
  content: ''; position: absolute; left: 0; right: 0; top: -240px; height: calc(100% + 240px);
  background-image:
    radial-gradient(2.5px 2.5px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 90px 120px, #fff, transparent),
    radial-gradient(3px 3px at 160px 60px, #fff, transparent),
    radial-gradient(2px 2px at 210px 190px, #fff, transparent);
  background-size: 240px 240px;
  opacity: .55;
}
.am-snow::after { background-size: 180px 180px; opacity: .35; transform: translateX(40px); }
html:not(.dark) .am-snow::before, html:not(.dark) .am-snow::after { filter: drop-shadow(0 0 1px rgba(29, 42, 34, .35)); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .am-snow::before { animation: am-snowfall 16s linear 1; }
  .am-snow::after { animation: am-snowfall 24s linear 1; }
}
@keyframes am-snowfall { from { transform: translateY(0); } to { transform: translateY(240px); } }

/* ── String of lights ──
   A dipping wire with bulbs that glow one after another; the colours run
   cranberry, lamp gold, pine and snow. Used along the footer's top. */
.am-lights { position: relative; height: 46px; overflow: hidden; }
.am-lights__wire { position: absolute; inset: 0; width: 100%; height: 100%; }
.am-lights__row { position: absolute; inset: 0; display: flex; justify-content: space-around; padding: 0 1rem; }
.am-bulb {
  position: relative; width: 11px; height: 17px; margin-top: var(--y, 12px);
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background: var(--c, #ffc56b);
  box-shadow: 0 0 10px 2px var(--c, #ffc56b);
}
.am-bulb::before { content: ''; position: absolute; top: -5px; left: 2px; width: 7px; height: 6px; border-radius: 2px; background: #2c3a33; }
.am-bulb:nth-child(4n+1) { --c: #ff5a63; }
.am-bulb:nth-child(4n+2) { --c: #ffc56b; }
.am-bulb:nth-child(4n+3) { --c: #5fd39a; }
.am-bulb:nth-child(4n+4) { --c: #fff4dc; }
@media (prefers-reduced-motion: no-preference) {
  .am-bulb { animation: am-twinkle 3.2s ease-in-out 4 forwards; animation-delay: calc(var(--i, 0) * .16s); }
}
@keyframes am-twinkle {
  0%, 100% { opacity: 1; box-shadow: 0 0 12px 3px var(--c); }
  45% { opacity: .5; box-shadow: 0 0 2px 0 var(--c); }
}

/* ── Dark/light toggle: curtains across a frosty window ──
   assets/themes/advent-market/assets/js/advent-market.js registers the
   transition: two cranberry curtains draw shut, the mode flips behind
   them, and they part again. */
.px-fx--am-curtains { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.px-fx--am-curtains .am-curtain {
  position: absolute; top: 0; bottom: 0; width: 51%;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 6px, transparent 6px 22px, rgba(255, 255, 255, .06) 22px 26px, transparent 26px 34px),
    linear-gradient(180deg, #b8283a, #7e1624);
  transition: transform 0.45s cubic-bezier(.65, 0, .35, 1);
}
.px-fx--am-curtains .am-curtain--l { left: 0; transform: translateX(-102%); box-shadow: 8px 0 18px rgba(0, 0, 0, .35); }
.px-fx--am-curtains .am-curtain--r { right: 0; transform: translateX(102%); box-shadow: -8px 0 18px rgba(0, 0, 0, .35); }
.px-fx--am-curtains.is-shut .am-curtain { transform: translateX(0); }
.px-fx--am-curtains .am-curtain::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 18px;
  background: var(--awning);
}

/* ── Footer: the market after dark, under a string of lights ── */
.am-footer {
  --paper:     #0b1424;
  --paper-2:   #142139;
  --paper-3:   #1c2c49;
  --ink:       #f6efe2;
  --ink-2:     #d9d2c3;
  --ink-soft:  #a2adbf;
  --rule:      rgba(246, 239, 226, 0.16);
  --rule-soft: rgba(246, 239, 226, 0.08);
  --theme-500: #ffc56b; --theme-600: #ffc56b; --theme-700: #ffd796;
  --theme-500-rgb: 255, 197, 107;
  position: relative;
}
.am-footer-top { background: #0b1424; margin-bottom: -1px; }
.am-footer a:hover { color: var(--lamp); }
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: 650; 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(--pine); color: #fffdf8 !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: #fffdf8 !important; }
html.dark body .ed-floating-nav a.ed-floating-link.active { background: var(--lamp); color: #2a1d06 !important; }
html.dark body .ed-floating-nav a.ed-floating-link.active > span { color: #2a1d06 !important; }

html body .am-footer .ed-newsletter {
  background: #142139; color: var(--ink);
  border: 1px solid rgba(255, 197, 107, .35); border-radius: 18px;
  box-shadow: 0 0 0 6px rgba(255, 197, 107, .05);
}
html body .am-footer .ed-newsletter::after { display: none; }
html body .am-footer .ed-newsletter-input { background: #0b1424 !important; color: var(--ink) !important; border: 1px solid rgba(246, 239, 226, .25) !important; border-radius: 12px; }
html body .am-footer .ed-newsletter-input::placeholder { color: var(--ink-soft); }
html body .am-footer .ed-newsletter-input:focus { border-color: var(--lamp) !important; }
html body .am-footer .ed-newsletter-btn {
  background: #ffc56b; color: #2a1d06; border: 0; border-radius: 12px;
  font-family: var(--font-ui); font-weight: 750;
}
html body .am-footer .ed-newsletter-age { color: var(--ink-2); }

/* Logo tag: the logo on a cream gift tag tied with a cranberry ribbon,
   wherever it sits on the night colours (footer, app splash). */
.am-logo-tag {
  position: relative;
  display: inline-flex; align-items: center;
  padding: .85rem 1.4rem .85rem 2.4rem;
  background: #fffdf8;
  border-radius: 6px 14px 14px 6px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.am-logo-tag::before {
  content: ''; position: absolute; left: 14px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: #0b1424; box-shadow: 0 0 0 2px #d99a2b;
}
.am-logo-tag-wrap { position: relative; display: inline-block; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }
.am-logo-tag-wrap::before {
  content: ''; position: absolute; right: 100%; top: 50%; width: 38px; height: 2px; margin-right: -4px;
  background: #d99a2b; transform: rotate(-12deg); transform-origin: right center;
}
[dir="rtl"] .am-logo-tag { padding: .85rem 2.4rem .85rem 1.4rem; border-radius: 14px 6px 6px 14px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
[dir="rtl"] .am-logo-tag::before { left: auto; right: 14px; }
[dir="rtl"] .am-logo-tag-wrap::before { right: auto; left: 100%; margin-right: 0; margin-left: -4px; transform: rotate(12deg); transform-origin: left center; }

/* 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 a heading never splits mid-word; only a word wider than the
   whole column may still break. */
@media (max-width: 639px) {
  html body :is(.text-fit, :is(h1, h2, h3).truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
  /* 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; }
}

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow the theme's own surfaces. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(15, 26, 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(22, 36, 61, 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, #16243d, #0f1a2e, #1f2f4c, #0b1424) !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 blue. 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: #0b1424 !important;
  border-color: rgba(246, 239, 226, .2) !important;
  color: #f6efe2 !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 deep night blue. */
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: #0b1424;
  --paper: #f6efe2;
  border-color: rgba(255, 197, 107, .3);
}

html header.safe-top-header[style] { background: rgba(251, 246, 236, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(15, 26, 46, .95) !important; }

/* ── Login / register / forgot-password brand panel: a snowy night ── */
:root, html.dark {
  --brand-gradient: linear-gradient(170deg, #16243d 0%, #0f1a2e 55%, #0b1424 100%);
  --brand-glow-1: rgba(255, 197, 107, 0.22);
  --brand-glow-2: rgba(229, 72, 77, 0.16);
}
.brand-panel { background: var(--flakes), var(--brand-gradient) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the market awning along the panel's top. */
html .brand-panel::after {
  content: ''; position: absolute;
  left: 0 !important; right: 0 !important; top: 0 !important; bottom: auto !important;
  width: 100% !important; height: 14px !important;
  border-radius: 0 !important; transform: none !important; opacity: 1 !important;
  background: var(--awning) !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(246, 239, 226, 0.8) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 650 !important; }

/* ── Wallet balance card: a present wrapped in pine paper, tied with a
   cranberry ribbon ── */
html body .wallet-hero {
  background:
    linear-gradient(90deg, transparent calc(100% - 44px), #a81f30 calc(100% - 44px), #c8283a calc(100% - 33px), #a81f30 calc(100% - 22px), transparent calc(100% - 22px)),
    radial-gradient(600px 240px at 20% 0%, rgba(255, 255, 255, .08), transparent 70%),
    linear-gradient(150deg, #22654a 0%, #174630 85%);
  border: 0;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  color: #fbf6ec;
  /* Keeps the balance and buttons clear of the ribbon, 22-44px in from the
     edge (the left edge on right-to-left pages). */
  padding-inline-end: calc(44px + 1rem);
}
html[dir="rtl"] body .wallet-hero {
  background:
    linear-gradient(270deg, transparent calc(100% - 44px), #a81f30 calc(100% - 44px), #c8283a calc(100% - 33px), #a81f30 calc(100% - 22px), transparent calc(100% - 22px)),
    radial-gradient(600px 240px at 80% 0%, rgba(255, 255, 255, .08), transparent 70%),
    linear-gradient(210deg, #22654a 0%, #174630 85%);
}
html.dark body .wallet-hero { box-shadow: 0 0 0 1px rgba(255, 197, 107, .2), var(--shadow-md); }
html body .wallet-hero::before { display: none; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 700;
  color: #fff4dc;
  /* the shared -0.03em tucks this face's comma under the next digit at hero size */
  letter-spacing: .01em; font-variant-numeric: lining-nums;
}
html body .wallet-hero-btn-primary { background: #ffc56b; color: #2a1d06; border: 0; font-family: var(--font-ui); font-weight: 750; border-radius: 12px; }
html body .wallet-hero-btn-primary:hover { background: #ffd796; color: #2a1d06; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 650; color: #fbf6ec; border-color: rgba(251, 246, 236, .4); border-radius: 12px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): a present —
   a ribbon runs down the picture 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: linear-gradient(90deg, #a81f30, #c8283a 40%, #a81f30); opacity: .9; 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: a gift tag on a ribbon ── */
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: 6px;
  background: linear-gradient(90deg, #a81f30, #c8283a, #a81f30);
}
html body .pd-buybox .font-display.text-4xl { font-weight: 700; color: var(--theme-600); }
.pd-title { font-weight: 650 !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 cranberry and pine. */
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 pine 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(--cranberry-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--cranberry-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(200, 40, 58, .3); }
html.dark .border-violet-200 { border-color: rgba(229, 72, 77, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(31, 90, 61, .35); }
html .focus\:border-purple-400:focus { border-color: var(--pine); }

/* Shared buttons drawn in the accent with white lettering (Place Order,
   Buy Now bars) are the theme's main buttons. */
html .bg-theme-600.text-white, html .bg-theme-500.text-white,
html .bg-blue-600.text-white, html .bg-blue-500.text-white {
  background: var(--btn-bg) !important;
  color: var(--btn-ink) !important;
  box-shadow: var(--btn-shadow) !important;
}
html .bg-theme-600.text-white:hover, html .bg-theme-500.text-white:hover { background: var(--btn-bg-hover) !important; }
html .bg-theme-600.text-white [class*="border-white"] { border-color: rgba(255, 253, 248, .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 is a gift tag, its rows stitched ──
   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;
}
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: 6px;
  background: linear-gradient(90deg, #a81f30, #c8283a, #a81f30);
}
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.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 .am-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 a present tied with ribbon ── */
.am-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;
}
.am-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.am-win__wrap {
  background:
    linear-gradient(90deg, transparent calc(50% - 7px), rgba(200, 40, 58, .16) calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)),
    linear-gradient(0deg, transparent calc(50% - 7px), rgba(200, 40, 58, .16) calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)),
    var(--paper-3);
}
html.dark .am-win__wrap {
  background:
    linear-gradient(90deg, transparent calc(50% - 7px), rgba(229, 72, 77, .22) calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)),
    linear-gradient(0deg, transparent calc(50% - 7px), rgba(229, 72, 77, .22) calc(50% - 7px) calc(50% + 7px), transparent calc(50% + 7px)),
    #1f2f4c;
}
.am-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  font-size: 11px; font-weight: 750; letter-spacing: .04em;
  color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px;
}
.am-win__tag--open { color: #3a2408; background: #ffc56b; border-color: transparent; }
.am-win__tag--done { color: #fffdf8; background: var(--pine); border-color: transparent; }
html.dark .am-win__tag--done { color: #0b1424; }
.am-win__name {
  font-family: var(--font-display); font-weight: 650; font-size: 1.2rem; line-height: 1.2;
  color: var(--ink); overflow-wrap: anywhere;
}
.am-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.am-win__price { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1; color: var(--theme-600); }
.am-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; }
.am-win__cart, .am-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 12px; font-weight: 700;
}
.am-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.am-win__cart:hover { border-color: var(--pine); color: var(--pine); }
.am-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.am-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(--pine); background: var(--pine-soft); border-radius: 12px;
}

/* ── Standalone pages ──
   Age check, unsubscribe (which shares the age-check card) 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(--flakes), var(--paper); font-family: var(--font-ui); }
html body .age-check-card {
  position: relative; overflow: hidden;
  padding-top: 3rem; padding-bottom: 2.6rem;
  background: var(--flakes), var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}
html body .age-check-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px;
  background: var(--awning);
  -webkit-mask: var(--valance); mask: var(--valance);
}
html body .age-check-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: var(--lights-rule);
}
html body .age-check-logo { border-radius: 50%; padding: 8px; background: radial-gradient(circle, var(--paper-2) 0 64%, transparent 65%), var(--wreath); }
html body .age-check-title { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
html body .age-check-input { border-radius: 12px; border: 1.5px solid var(--rule); background: var(--paper-2); font-family: var(--font-ui); }
html body .age-check-input:focus { border-color: var(--a2); box-shadow: 0 0 0 4px var(--a3-soft); outline: none; }
html body .age-check-submit { border-radius: 12px; 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 a calendar
   door — cranberry edge, gold moulding — with its flag in a fir wreath */
html body .lang-card {
  border-radius: 12px !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(--a3) !important; }
html body .lang-card:has(input:checked) {
  border-style: solid !important;
  border-color: #c8283a !important;
  box-shadow: inset 0 0 0 3px var(--paper-2), inset 0 0 0 4.5px #e0a43a, var(--shadow) !important;
  background: var(--a3-soft) !important;
}
html body .lang-card img { border-radius: 50%; padding: 3px; background: var(--wreath); }
html body .lang-card:has(input:checked) .rounded-full:has(> .fa-check) { background: #c8283a !important; }
html body:has(.lang-card) h1 { font-family: var(--font-display); font-weight: 700 !important; letter-spacing: -0.01em !important; }
html body:has(.lang-card) .footer-safe { box-shadow: 0 -12px 24px -18px rgba(15, 26, 46, .55); }
html body:has(.lang-card) .footer-safe::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; height: 18px; background: var(--lights-rule); }
html body:has(.lang-card) .w-9.h-9.rounded-xl:has(> .fa-language) { background: radial-gradient(circle at 34% 50%, rgba(255, 255, 255, .5) 0 6%, transparent 20%), #c8283a !important; color: #fff !important; border-radius: 0 !important; padding-top: 5px; -webkit-mask: var(--bauble-mask); mask: var(--bauble-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: #2e7a54; --px-warn: #b45309; --px-crit: #c8283a; --px-info: #2779c4; }
html.dark:root { --px-good: #8fccae; --px-warn: #fbbf23; --px-crit: #ffadb0; --px-info: #aacdee; }

/* Changing language, the scene (advent-market.js): a row of calendar doors,
   one open on the old flag with the old name beneath; it shuts as the big
   door 24 is picked and swings open on the new flag and name. After the
   reload a star sparkles on the corner. The calendar is the same on both
   pages, so the reload never shows. */
.am-lang-stage { background: color-mix(in srgb, #0f1a2e 58%, transparent); }
.am-lang-cal {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 20px 20px 22px;
  color: var(--ink); background: var(--paper-2); border-radius: var(--radius, 16px);
  box-shadow: inset 0 0 0 3px var(--gold, #d99a2b), 0 34px 70px -28px rgba(0, 0, 0, .6);
  font-family: var(--font-ui);
}
.am-lang-row { display: flex; justify-content: center; gap: 10px; }
.am-lang-door {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; perspective: 300px;
  background: var(--paper-3); box-shadow: inset 0 0 0 2px var(--rule);
}
.am-lang-peek { position: absolute; inset: 0; display: grid; place-items: center; }
.am-lang-peek img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.am-lang-peek b { font: 800 13px/1 var(--font-ui); letter-spacing: .06em; color: var(--ink); }
.am-lang-leaf {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: 8px;
  background: #1f5a3d; color: #fffdf8; font: 700 17px/1 var(--font-display); font-style: normal;
  box-shadow: inset 0 0 0 2px rgba(255, 253, 248, .28); transform-origin: left center;
}
.am-lang-door:nth-child(even) .am-lang-leaf { background: #c8283a; }
.am-lang-cap { display: grid; justify-items: center; align-items: center; min-height: 22px; margin: 10px 0 14px; }
.am-lang-cap > span { grid-area: 1 / 1; max-width: 100%; text-align: center; }
.am-lang-was { opacity: 0; font: 600 15px/1.3 var(--font-ui); color: var(--ink-2); overflow-wrap: anywhere; }
.am-lang-garland { color: var(--gold, #d99a2b); font-size: 12px; letter-spacing: .6em; }
.am-lang-big {
  position: relative; display: grid; width: min(340px, 100%); min-height: 176px; margin: 0 auto; perspective: 900px;
  border-radius: 12px; background: var(--paper-3); box-shadow: inset 0 0 0 3px var(--gold, #d99a2b);
}
.am-lang-inside {
  position: relative; z-index: 3; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 24px 18px; text-align: center;
}
.am-lang-inside img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gold-2, #f0bd5a); }
.am-lang-name {
  position: relative; z-index: 5; max-width: 100%; color: var(--ink);
  font: 600 clamp(28px, 8.5vw, 44px)/1.08 var(--font-display); overflow-wrap: anywhere;
}
.am-lang-code { font: 800 12px/1 var(--font-ui); letter-spacing: .22em; color: var(--theme-600); }
.am-lang-bigleaf {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; border-radius: 12px;
  background: radial-gradient(circle at 50% 50%, #d84d5c, #a81f30 75%); color: #fffdf8; font: 700 56px/1 var(--font-display); font-style: normal;
  box-shadow: inset 0 0 0 3px #f0bd5a, inset 0 0 0 7px rgba(255, 253, 248, .18);
  transform-origin: left center; transform: rotateY(-96deg);
}
.am-lang-star {
  position: absolute; top: -18px; right: -12px; z-index: 2; font-size: 34px; line-height: 1; color: #f0bd5a;
  text-shadow: 0 0 12px rgba(240, 189, 90, .8); opacity: 0;
}
.am-lang-sparks { position: absolute; top: -2px; right: 4px; z-index: 2; width: 0; height: 0; }
.am-lang-sparks i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #f0bd5a; opacity: 0; }
.am-lang-sparks i:nth-child(odd) { background: #fffdf8; box-shadow: 0 0 6px #f0bd5a; }
.am-lang-sparks i:nth-child(1) { --x: -34px; --y: -26px; }
.am-lang-sparks i:nth-child(2) { --x: 0;     --y: -40px; }
.am-lang-sparks i:nth-child(3) { --x: 30px;  --y: -28px; }
.am-lang-sparks i:nth-child(4) { --x: 38px;  --y: 4px; }
.am-lang-sparks i:nth-child(5) { --x: 24px;  --y: 30px; }
.am-lang-sparks i:nth-child(6) { --x: -40px; --y: 6px; }
.am-lang-sparks i:nth-child(7) { --x: -22px; --y: 32px; }
.am-lang-sparks i:nth-child(8) { --x: -50px; --y: -10px; }

/* Out: the open door shuts on the old flag, the big door is picked and opens. */
.px-lang-stage-out .am-lang-cal { animation: am-lang-cal-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .am-lang-door-was .am-lang-leaf { animation: am-lang-shut .85s ease-in-out both; }
.px-lang-stage-out .am-lang-was { animation: am-lang-was .8s ease-in both; }
.px-lang-stage-out .am-lang-garland { animation: am-lang-garland .95s ease-out both; }
.px-lang-stage-out .am-lang-bigleaf { animation: am-lang-pick .95s cubic-bezier(.4, 0, .3, 1) both; }
.px-lang-stage-out .am-lang-inside { animation: am-lang-inside .95s ease-out both; }
/* In: it starts where out ended; the star sparkles and the calendar goes. */
.px-lang-stage-in .am-lang-star { animation: am-lang-twinkle .55s cubic-bezier(.2, .9, .3, 1.3) .12s both; }
.px-lang-stage-in .am-lang-sparks i { animation: am-lang-spark .7s cubic-bezier(.15, .7, .4, 1) .22s both; }
.px-lang-stage-in .am-lang-name { animation: am-lang-hello .4s ease-out .3s both; }
.px-lang-stage-in .am-lang-cal { animation: am-lang-cal-out .28s ease-in 1s both; }
@keyframes am-lang-cal-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes am-lang-cal-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes am-lang-shut { 0%, 45% { transform: rotateY(-112deg); } }
@keyframes am-lang-was { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes am-lang-garland { 0%, 70% { opacity: 0; } }
@keyframes am-lang-pick {
  0%, 20% { transform: none; }
  32% { transform: none; box-shadow: inset 0 0 0 3px #f0bd5a, 0 0 0 6px rgba(240, 189, 90, .7); }
  46% { transform: none; }
}
@keyframes am-lang-inside { 0%, 55% { opacity: 0; transform: scale(.94); } }
@keyframes am-lang-twinkle {
  0%  { opacity: 0; transform: scale(.2) rotate(-60deg); }
  55% { opacity: 1; transform: scale(1.3) rotate(12deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes am-lang-spark {
  0%   { opacity: 0; transform: scale(.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) scale(.6); }
}
@keyframes am-lang-hello { 50% { transform: scale(1.06); } }
@media (max-width: 460px) {
  .am-lang-cal { padding: 16px 14px 18px; }
  .am-lang-row { gap: 7px; }
  .am-lang-door { width: 38px; height: 38px; }
  .am-lang-leaf { font-size: 14px; }
  .am-lang-star { right: -6px; }
}

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

/* The voucher link in the top-up window at night: the accent a little
   lighter on the window's panel, so it reads at 4.5:1. */
html.dark body #addMoneyModal [data-px-call="giftCards.openVoucher"] { color: #ed8285 !important; }

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