/* ============================================================
   PONGAL THEME — the Tamil harvest festival.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from a courtyard on Thai Pongal morning: the ground swept
   and washed red, a pulli kolam drawn on it in rice flour, line
   looping round a grid of dots; a new clay pot with a turmeric
   plant tied round its neck, the rice and milk boiling over the
   rim; sugarcane stalks either side, mango leaves strung over the
   door, banana leaves to eat from. Turmeric, cane green and cane
   purple, terracotta and sun orange on rice-flour cream by day;
   after dark the hour before dawn, the courtyard silver under the
   moon and the sky just beginning to turn.

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

:root {
  --font-display: 'Arima', 'Catamaran', Georgia, 'PingFang SC', 'Microsoft YaHei', 'Noto Serif CJK SC', serif;
  --font-ui:      'Catamaran', system-ui, 'Segoe UI', 'Noto Sans', sans-serif;

  --paper:        #fcf5e4;
  --paper-2:      #fffdf7;
  --paper-3:      #f5e9cc;
  --ink:          #2e1820;
  --ink-2:        #523240;
  --ink-soft:     #896b74;
  --rule:         rgba(46, 24, 32, 0.13);
  --rule-soft:    rgba(46, 24, 32, 0.07);
  --radius:       14px;
  --radius-sm:    9px;
  --shadow:       0 1px 2px rgba(80, 36, 16, .07), 0 6px 16px -8px rgba(80, 36, 16, .24);
  --shadow-md:    0 2px 4px rgba(80, 36, 16, .07), 0 18px 34px -16px rgba(80, 36, 16, .38);

  /* Sugarcane purple */
  --theme-50:  #f8eef5;
  --theme-100: #efd6e7;
  --theme-200: #dcaccd;
  --theme-300: #c47eaf;
  --theme-400: #a8568f;
  --theme-500: #8b3a75;
  --theme-600: #782e64;
  --theme-700: #622451;
  --theme-800: #4c1c3f;
  --theme-900: #35132c;
  --theme-500-rgb: 139, 58, 117;
  --theme-600-rgb: 120, 46, 100;

  /* The courtyard */
  --pg-earth: #a3411d; --pg-earth-deep: #7a2e13; --pg-clay: #c0653a; --pg-rice: #fffaf0;
  --pg-turmeric: #f2b01e; --pg-turmeric-deep: #c4840a; --pg-sun: #ef7a1c;
  --pg-leaf: #4f8f2e; --pg-leaf-hi: #78b443; --pg-cane: #7a2d63; --pg-cane-hi: #a8628f;
  --pg-brass: #d9a02c; --pg-brass-hi: #ffe08a; --pg-brass-lo: #8a5a0e;
  --pg-red: #c0392b; --pg-green: #3f8f3a;

  /* The courtyard ground behind the footer, winners, splash and login */
  --night:   #7f3014;
  --night-2: #8f3a1a;
  --night-3: #a04622;
  --on-night: #fff6e6;
  --on-night-soft: rgba(255, 246, 230, .8);

  /* Names other themes' shared markup reaches for */
  --gold:       #a8730f;
  --gold-2:     #f2b01e;
  --gold-soft:  rgba(139, 58, 117, 0.08);
  --gold-ink:   #2e1820;
  --felt:       #7f3014;
  --felt-2:     #8f3a1a;
  --on-felt:    #fff6e6;
  --on-felt-soft: rgba(255, 246, 230, 0.8);
  --peacock:    #3f7f2a;
  --peacock-soft: rgba(79, 143, 46, 0.11);
  --red:        #b8361f;
  --red-soft:   rgba(184, 54, 31, 0.09);
  --rose:       #a3411d;
  --rose-soft:  rgba(139, 58, 117, 0.08);

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

  /* Buttons: sugarcane purple with white lettering by day; before dawn,
     turmeric */
  --btn-bg:       #782e64;
  --btn-bg-hover: #8b3a75;
  --btn-ink:      #ffffff;
  --btn-shadow:   0 2px 0 #3f1530, 0 10px 20px -10px rgba(120, 46, 100, .7);
  --btn-shadow-hover: 0 3px 0 #3f1530, 0 14px 24px -10px rgba(120, 46, 100, .75);

  /* A kolam border, the theme's edge wherever a section needs one: two
     rice-flour lines weaving round a row of dots on the red earth, a
     turmeric line along each side. */
  --kolam-band: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'><rect width='28' height='14' fill='%23a3411d'/><rect width='28' height='1.6' fill='%23f2b01e'/><rect y='12.4' width='28' height='1.6' fill='%23f2b01e'/><g fill='none' stroke='%23fffaf0' stroke-width='1.15' stroke-linecap='round'><path d='M0 7C3.5 2.8 10.5 2.8 14 7S24.5 11.2 28 7'/><path d='M0 7C3.5 11.2 10.5 11.2 14 7S24.5 2.8 28 7'/></g><g fill='%23fffaf0'><circle cx='7' cy='7' r='1.25'/><circle cx='21' cy='7' r='1.25'/></g></svg>") repeat-x left center / 28px 14px;
  --kolam-band-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'><rect width='28' height='14' fill='%232f2433'/><rect width='28' height='1.6' fill='%23f4bf3c'/><rect y='12.4' width='28' height='1.6' fill='%23f4bf3c'/><g fill='none' stroke='%23e8edf6' stroke-width='1.15' stroke-linecap='round'><path d='M0 7C3.5 2.8 10.5 2.8 14 7S24.5 11.2 28 7'/><path d='M0 7C3.5 11.2 10.5 11.2 14 7S24.5 2.8 28 7'/></g><g fill='%23e8edf6'><circle cx='7' cy='7' r='1.25'/><circle cx='21' cy='7' r='1.25'/></g></svg>") repeat-x left center / 28px 14px;
  --kolam-band-light: var(--kolam-band);

  /* Pulli, the grid of dots a kolam is drawn round, very faint on the page */
  --pulli-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='%23a3411d' fill-opacity='.09'><circle cx='12' cy='12' r='1.3'/><circle cx='36' cy='36' r='1.3'/><circle cx='60' cy='12' r='1.3'/><circle cx='84' cy='36' r='1.3'/><circle cx='12' cy='60' r='1.3'/><circle cx='60' cy='60' r='1.3'/><circle cx='36' cy='84' r='1.3'/><circle cx='84' cy='84' r='1.3'/></g><g fill='none' stroke='%23a3411d' stroke-opacity='.06' stroke-width='1.1'><path d='M72 48C66 42 66 36 72 30C78 36 78 42 72 48ZM72 48C78 54 78 60 72 66C66 60 66 54 72 48ZM72 48C66 54 60 54 54 48C60 42 66 42 72 48ZM72 48C78 42 84 42 90 48C84 54 78 54 72 48Z'/></g></svg>");

  /* The swept red earth of the courtyard: a faint grid of dots and the
     arcs a broom leaves */
  --pulli-earth: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='%23fffaf0' fill-opacity='.14'><circle cx='16' cy='16' r='1.3'/><circle cx='48' cy='48' r='1.3'/><circle cx='48' cy='16' r='.8'/><circle cx='16' cy='48' r='.8'/></g><path d='M2 40C14 34 26 34 38 40M30 8C40 4 52 4 62 8' fill='none' stroke='%23000000' stroke-opacity='.07' stroke-width='1.2'/></svg>");
  --court-dust: var(--pulli-earth);
  --court-bg:
    radial-gradient(560px 240px at 50% -60px, rgba(242, 176, 30, .3), transparent 70%),
    radial-gradient(380px 220px at 6% 110%, rgba(239, 122, 28, .22), transparent 70%),
    linear-gradient(180deg, #8f3818 0%, #7a2e13 100%);

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

html.dark {
  --paper:        #10172a;
  --paper-2:      #172036;
  --paper-3:      #212b45;
  --ink:          #eef1f7;
  --ink-2:        #ccd3e3;
  --ink-soft:     #95a0ba;
  --rule:         rgba(226, 232, 245, 0.13);
  --rule-soft:    rgba(226, 232, 245, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px -8px rgba(0, 0, 0, .7);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .4), 0 18px 36px -14px rgba(0, 0, 0, .85);

  /* Turmeric, the first light */
  --theme-50:  #1f2131;
  --theme-100: #2c2c38;
  --theme-200: #5e5233;
  --theme-300: #f8d98a;
  --theme-400: #f6cd66;
  --theme-500: #f4bf3c;
  --theme-600: #f6c854;
  --theme-700: #f8d77f;
  --theme-800: #fbe6b2;
  --theme-900: #fff5dc;
  --theme-500-rgb: 244, 191, 60;
  --theme-600-rgb: 246, 200, 84;

  --night:   #241c2a;
  --night-2: #2f2535;
  --night-3: #3a2e40;
  --on-night: #eef1f7;
  --on-night-soft: rgba(238, 241, 247, .78);

  --gold:       #f4bf3c;
  --gold-2:     #f8d77f;
  --gold-soft:  rgba(244, 191, 60, 0.12);
  --felt:       #241c2a;
  --felt-2:     #2f2535;
  --peacock:    #8cc96a;
  --peacock-soft: rgba(140, 201, 106, 0.13);
  --red:        #ff8f73;
  --red-soft:   rgba(255, 143, 115, 0.13);
  --rose:       #ff9a6b;
  --rose-soft:  rgba(244, 191, 60, 0.12);

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

  --btn-bg:       #f4bf3c;
  --btn-bg-hover: #f7cd62;
  --btn-ink:      #1c1408;
  --btn-shadow:   0 2px 0 #a8791a, 0 10px 26px -10px rgba(244, 191, 60, .45);
  --btn-shadow-hover: 0 3px 0 #a8791a, 0 14px 30px -10px rgba(244, 191, 60, .6);

  --kolam-band: var(--kolam-band-night);
  --pulli-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><g fill='%23c9d3ea' fill-opacity='.08'><circle cx='12' cy='12' r='1.3'/><circle cx='36' cy='36' r='1.3'/><circle cx='60' cy='12' r='1.3'/><circle cx='84' cy='36' r='1.3'/><circle cx='12' cy='60' r='1.3'/><circle cx='60' cy='60' r='1.3'/><circle cx='36' cy='84' r='1.3'/><circle cx='84' cy='84' r='1.3'/></g><g fill='none' stroke='%23c9d3ea' stroke-opacity='.05' stroke-width='1.1'><path d='M72 48C66 42 66 36 72 30C78 36 78 42 72 48ZM72 48C78 54 78 60 72 66C66 60 66 54 72 48ZM72 48C66 54 60 54 54 48C60 42 66 42 72 48ZM72 48C78 42 84 42 90 48C84 54 78 54 72 48Z'/></g></svg>");
  --pulli-earth: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><g fill='%23e8edf6' fill-opacity='.1'><circle cx='16' cy='16' r='1.3'/><circle cx='48' cy='48' r='1.3'/><circle cx='48' cy='16' r='.8'/><circle cx='16' cy='48' r='.8'/></g><path d='M2 40C14 34 26 34 38 40M30 8C40 4 52 4 62 8' fill='none' stroke='%23000000' stroke-opacity='.12' stroke-width='1.2'/></svg>");
  --court-bg:
    radial-gradient(420px 220px at 86% -60px, rgba(220, 228, 245, .16), transparent 70%),
    radial-gradient(520px 200px at 30% 120%, rgba(240, 140, 90, .16), transparent 70%),
    linear-gradient(180deg, #2c2230 0%, #221a27 100%);
  --page-bg:
    radial-gradient(900px 420px at 86% -160px, rgba(220, 228, 245, 0.07), transparent 70%) no-repeat,
    radial-gradient(900px 380px at 8% -140px, rgba(240, 140, 90, 0.08), transparent 70%) no-repeat,
    var(--pulli-faint) repeat,
    var(--paper);
}

/* ── The festival's materials ──
   Every surface beyond the hero and footer is built from these, so a
   panel anywhere in the shop reads as Pongal at a glance:
   - the kolam border (--kolam-band above) along the top of sheets, a
     narrow cousin (--kolam-thin) for table heads, tabs and toasts, and a
     sugarcane stalk standing up (--cane-v) for a leading edge;
   - a mango-leaf toran (--pg-toran) hung along a card's top edge for stat
     cards, tickets, order slips and tags;
   - a small lotus kolam, four loops round a dot (--pg-loop, and its
     outline --pg-loop-mask for one dyed any colour) for the current page,
     list markers, ticks and heading marks; a clay tile ringed with
     rice-flour dots (.pg-tile in the system skin) for icon tiles; a
     length of sugarcane lying down (--pg-stalk) for rules;
   - grains of rice (--pg-grains) to part table rows and list items;
   - a toran with a cattle bell hung in it (--pg-bells) along the top of
     the courtyard's earth panels and error scenes;
   - a scrap of banana leaf (--pg-sweet) behind prices and numbers;
   - a banana leaf (--pg-leaf-bed) for products to rest on, and boiling
     froth (--pg-froth) that fills progress bars. */
:root {
  --pg-c1: #a3411d; --pg-c2: #e09a0a; --pg-c3: #4f8f2e; --pg-c4: #ef7a1c; --pg-c5: #7a2d63;
  --pg-earth-ink: #8f3517; --pg-sun-ink: #a64d05; --pg-leaf-ink: #356b1e; --pg-turmeric-ink: #8a5a00; --pg-cane-ink: #6a2656;
  --pg-earth-soft: rgba(163, 65, 29, .09); --pg-sun-soft: rgba(239, 122, 28, .12); --pg-leaf-soft: rgba(79, 143, 46, .11); --pg-turmeric-soft: rgba(242, 176, 30, .16); --pg-cane-soft: rgba(122, 45, 99, .1);
  --theme-600-ink: #ffffff;
  --pg-art-floor: rgba(70, 30, 12, .16);

  --kolam-thin-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'><rect width='16' height='8' fill='%23a3411d'/><g fill='none' stroke='%23fffaf0' stroke-width='.75' stroke-linecap='round'><path d='M0 4C2 1.4 6 1.4 8 4S14 6.6 16 4'/><path d='M0 4C2 6.6 6 6.6 8 4S14 1.4 16 4'/></g><g fill='%23fffaf0'><circle cx='4' cy='4' r='.8'/><circle cx='12' cy='4' r='.8'/></g></svg>");
  --kolam-thin: var(--kolam-thin-img) repeat-x left center / 16px 8px;
  --cane-v-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='26' viewBox='0 0 8 26'><rect width='8' height='26' fill='%237a2d63'/><rect width='1.5' height='26' fill='%233f1530'/><rect x='6.5' width='1.5' height='26' fill='%233f1530'/><rect x='2.4' width='1.1' height='26' fill='%23b06a96'/><rect y='22.6' width='8' height='1.5' fill='%23d6a8c6'/><rect y='24.1' width='8' height='.8' fill='%233f1530'/><ellipse cx='4.6' cy='19' rx='.8' ry='1.3' fill='%233f1530' fill-opacity='.5'/></svg>");
  --cane-v: var(--cane-v-img) repeat-y center top / 8px 26px;
  --pg-toran-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'><path d='M0 1.4H20' stroke='%23f2b01e' stroke-width='2'/><path d='M0 1.4H20' stroke='%23a86a06' stroke-width='2' stroke-dasharray='1 2'/><path d='M5 2.2C8 4 8.3 8.4 5 11.6C1.7 8.4 2 4 5 2.2Z' fill='%234f8f2e'/><path d='M15 2.2C18 4 18.3 8.4 15 11.6C11.7 8.4 12 4 15 2.2Z' fill='%2378b443'/><path d='M5 3V10.6M15 3V10.6' stroke='%23d9eaa0' stroke-width='.45'/></svg>");
  --pg-toran: var(--pg-toran-img) repeat-x left top / 20px 12px;
  --pg-grains-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'><ellipse cx='6' cy='3' rx='2.3' ry='1' fill='%23dcc394' transform='rotate(-24 6 3)'/></svg>");
  --pg-grains: var(--pg-grains-img) repeat-x left center / 12px 6px;
  --pg-stalk-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='8' viewBox='0 0 26 8'><rect y='1' width='26' height='6' fill='%237a2d63'/><rect y='1' width='26' height='1.3' fill='%233f1530'/><rect y='2.9' width='26' height='1' fill='%23b06a96'/><rect y='5.8' width='26' height='1.2' fill='%233f1530'/><rect x='22.6' y='1' width='1.5' height='6' fill='%23d6a8c6'/><rect x='24.1' y='1' width='.8' height='6' fill='%233f1530'/></svg>");
  --pg-stalk: var(--pg-stalk-img) repeat-x left center / 26px 8px;
  --pg-loop-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'><g fill='none' stroke='%23a3411d' stroke-width='1.35' stroke-linejoin='round'><path d='M0 -1.8C2.8 -4 2.8 -8.4 0 -9.2C-2.8 -8.4 -2.8 -4 0 -1.8ZM0 1.8C2.8 4 2.8 8.4 0 9.2C-2.8 8.4 -2.8 4 0 1.8ZM-1.8 0C-4 2.8 -8.4 2.8 -9.2 0C-8.4 -2.8 -4 -2.8 -1.8 0ZM1.8 0C4 2.8 8.4 2.8 9.2 0C8.4 -2.8 4 -2.8 1.8 0Z'/></g><circle r='1.5' fill='%23f2b01e'/><g fill='%23a3411d'><circle cx='5.2' cy='-5.2' r='1'/><circle cx='-5.2' cy='-5.2' r='1'/><circle cx='5.2' cy='5.2' r='1'/><circle cx='-5.2' cy='5.2' r='1'/></g></svg>");
  --pg-loop: var(--pg-loop-img) center / contain no-repeat;
  /* The same in rice flour, for earth panels */
  --pg-loop-white: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'><g fill='none' stroke='%23fffaf0' stroke-width='1.4' stroke-linejoin='round'><path d='M0 -1.8C2.8 -4 2.8 -8.4 0 -9.2C-2.8 -8.4 -2.8 -4 0 -1.8ZM0 1.8C2.8 4 2.8 8.4 0 9.2C-2.8 8.4 -2.8 4 0 1.8ZM-1.8 0C-4 2.8 -8.4 2.8 -9.2 0C-8.4 -2.8 -4 -2.8 -1.8 0ZM1.8 0C4 2.8 8.4 2.8 9.2 0C8.4 -2.8 4 -2.8 1.8 0Z'/></g><circle r='1.6' fill='%23f8cf5a'/></svg>");
  --pg-loop-leaf: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'><g fill='none' stroke='%234f8f2e' stroke-width='1.35' stroke-linejoin='round'><path d='M0 -1.8C2.8 -4 2.8 -8.4 0 -9.2C-2.8 -8.4 -2.8 -4 0 -1.8ZM0 1.8C2.8 4 2.8 8.4 0 9.2C-2.8 8.4 -2.8 4 0 1.8ZM-1.8 0C-4 2.8 -8.4 2.8 -9.2 0C-8.4 -2.8 -4 -2.8 -1.8 0ZM1.8 0C4 2.8 8.4 2.8 9.2 0C8.4 -2.8 4 -2.8 1.8 0Z'/></g><circle r='1.5' fill='%23f2b01e'/></svg>");
  --pg-loop-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'><path d='M0 -1C3.4 -3.6 3.4 -9 0 -10C-3.4 -9 -3.4 -3.6 0 -1ZM0 1C3.4 3.6 3.4 9 0 10C-3.4 9 -3.4 3.6 0 1ZM-1 0C-3.6 3.4 -9 3.4 -10 0C-9 -3.4 -3.6 -3.4 -1 0ZM1 0C3.6 3.4 9 3.4 10 0C9 -3.4 3.6 -3.4 1 0Z'/><circle r='1.8'/></svg>");
  /* A scrap of banana leaf behind a price or number */
  --pg-sweet-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'><path d='M3 30C18 6 70 1 97 26C72 56 22 58 3 30Z' fill='%23dbecb8'/><path d='M8 30C34 27 66 26 92 27' stroke='%23f4f9e6' stroke-width='2.4' fill='none'/><path d='M24 29L18 14M40 28L36 10M56 27L54 9M24 31L20 48M40 31L38 51M56 31L56 52' stroke='%23b9d68e' stroke-width='1.2' fill='none'/></svg>");
  --pg-sweet: var(--pg-sweet-img) center / 100% 100% no-repeat;
  --pg-bells-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='34' viewBox='0 0 52 34'><path d='M0 4H52' stroke='%23f2b01e' stroke-width='3'/><path d='M0 4H52' stroke='%23a86a06' stroke-width='3' stroke-dasharray='1.6 3'/><path d='M8 5C13 9 13.6 18 8 25C2.4 18 3 9 8 5Z' fill='%234f8f2e'/><path d='M20 5C25 9 25.6 18 20 25C14.4 18 15 9 20 5Z' fill='%2378b443'/><path d='M44 5C49 9 49.6 18 44 25C38.4 18 39 9 44 5Z' fill='%234f8f2e'/><path d='M8 6.5V23M20 6.5V23M44 6.5V23' stroke='%23d9eaa0' stroke-width='.6'/><path d='M32 5V12' stroke='%23c0392b' stroke-width='2'/><path d='M28.5 13.5C28.5 11 35.5 11 35.5 13.5L37 23C37 25 27 25 27 23Z' fill='%23e2a92e'/><path d='M29.5 14V22' stroke='%23fff3c4' stroke-opacity='.6' stroke-width='1.2'/><circle cx='32' cy='26.4' r='1.7' fill='%236b450c'/></svg>");
  --pg-bells: var(--pg-bells-img) repeat-x left top / 52px 34px;
  --pg-bells-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='34' viewBox='0 0 52 34'><path d='M0 4H52' stroke='%23c9a14a' stroke-width='3'/><path d='M0 4H52' stroke='%23705312' stroke-width='3' stroke-dasharray='1.6 3'/><path d='M8 5C13 9 13.6 18 8 25C2.4 18 3 9 8 5Z' fill='%23365f2a'/><path d='M20 5C25 9 25.6 18 20 25C14.4 18 15 9 20 5Z' fill='%23527f38'/><path d='M44 5C49 9 49.6 18 44 25C38.4 18 39 9 44 5Z' fill='%23365f2a'/><path d='M8 6.5V23M20 6.5V23M44 6.5V23' stroke='%23b8cfa0' stroke-opacity='.6' stroke-width='.6'/><path d='M32 5V12' stroke='%23a8473a' stroke-width='2'/><path d='M28.5 13.5C28.5 11 35.5 11 35.5 13.5L37 23C37 25 27 25 27 23Z' fill='%23c9973a'/><path d='M29.5 14V22' stroke='%23fff3c4' stroke-opacity='.5' stroke-width='1.2'/><circle cx='32' cy='26.4' r='1.7' fill='%234a300a'/></svg>");
  /* A lotus kolam on a length of sugarcane, as a rule under titles */
  --pg-tie: var(--pg-loop-img) center / 22px 22px no-repeat, var(--pg-stalk-img) left center / 26px 7px repeat-x;
  --pg-clay-relief: 0 0 0 1px rgba(124, 51, 23, .45), 0 3px 0 rgba(124, 51, 23, .3), 0 8px 14px -8px rgba(80, 36, 16, .5);
  --pg-dot-ring: #fffaf0;
  /* A ring of clay round a frame or the chosen option */
  --pg-clay-disc: 0 0 0 2px var(--paper-2), 0 0 0 4px #c0653a, 0 0 0 5px #7c3317, 0 10px 22px -12px rgba(80, 36, 16, .5);
  --pg-brass-grad: linear-gradient(100deg, #8a5a0e 0%, #e2a92e 22%, #ffe08a 40%, #e2a92e 60%, #8a5a0e 88%, #6b450c 100%);
  --pg-froth:
    radial-gradient(circle at 6px 2px, #fffdf6 0 2.6px, transparent 3.1px) 0 0 / 12px 100% repeat-x,
    radial-gradient(circle at 3px 6px, rgba(255, 253, 246, .7) 0 1.4px, transparent 1.9px) 0 0 / 9px 100% repeat-x,
    linear-gradient(90deg, #f2b01e, #ef7a1c);
  --pg-leaf-bed:
    radial-gradient(60% 50% at 50% 44%, rgba(255, 255, 255, .92), transparent 74%),
    repeating-linear-gradient(74deg, transparent 0 15px, rgba(79, 143, 46, .07) 15px 16px),
    linear-gradient(160deg, #eaf2d6, #fbf6e3 55%, #f1e6c6);
  /* The red earth itself, swept: feature panels by day */
  --pg-earth-swept:
    var(--pulli-earth) repeat,
    radial-gradient(420px 200px at 20% 0%, rgba(242, 176, 30, .2), transparent 70%),
    linear-gradient(160deg, #a8461f, #8f3818 60%, #7d2f14);
  /* A chain of kolam loops round a rice-flour well, for a product to sit in */
  --pg-well: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'><g fill='none' stroke='%23fffaf0' stroke-opacity='1' stroke-width='3'><circle cx='0.0' cy='-80.0' r='13.5'/><circle cx='24.7' cy='-76.1' r='13.5'/><circle cx='47.0' cy='-64.7' r='13.5'/><circle cx='64.7' cy='-47.0' r='13.5'/><circle cx='76.1' cy='-24.7' r='13.5'/><circle cx='80.0' cy='-0.0' r='13.5'/><circle cx='76.1' cy='24.7' r='13.5'/><circle cx='64.7' cy='47.0' r='13.5'/><circle cx='47.0' cy='64.7' r='13.5'/><circle cx='24.7' cy='76.1' r='13.5'/><circle cx='0.0' cy='80.0' r='13.5'/><circle cx='-24.7' cy='76.1' r='13.5'/><circle cx='-47.0' cy='64.7' r='13.5'/><circle cx='-64.7' cy='47.0' r='13.5'/><circle cx='-76.1' cy='24.7' r='13.5'/><circle cx='-80.0' cy='0.0' r='13.5'/><circle cx='-76.1' cy='-24.7' r='13.5'/><circle cx='-64.7' cy='-47.0' r='13.5'/><circle cx='-47.0' cy='-64.7' r='13.5'/><circle cx='-24.7' cy='-76.1' r='13.5'/><circle r='62'/></g><g fill='%23fffaf0' fill-opacity='1'><circle cx='0.0' cy='-80.0' r='3.2'/><circle cx='24.7' cy='-76.1' r='3.2'/><circle cx='47.0' cy='-64.7' r='3.2'/><circle cx='64.7' cy='-47.0' r='3.2'/><circle cx='76.1' cy='-24.7' r='3.2'/><circle cx='80.0' cy='-0.0' r='3.2'/><circle cx='76.1' cy='24.7' r='3.2'/><circle cx='64.7' cy='47.0' r='3.2'/><circle cx='47.0' cy='64.7' r='3.2'/><circle cx='24.7' cy='76.1' r='3.2'/><circle cx='0.0' cy='80.0' r='3.2'/><circle cx='-24.7' cy='76.1' r='3.2'/><circle cx='-47.0' cy='64.7' r='3.2'/><circle cx='-64.7' cy='47.0' r='3.2'/><circle cx='-76.1' cy='24.7' r='3.2'/><circle cx='-80.0' cy='0.0' r='3.2'/><circle cx='-76.1' cy='-24.7' r='3.2'/><circle cx='-64.7' cy='-47.0' r='3.2'/><circle cx='-47.0' cy='-64.7' r='3.2'/><circle cx='-24.7' cy='-76.1' r='3.2'/><circle cx='15.3' cy='-96.8' r='2'/><circle cx='44.5' cy='-87.3' r='2'/><circle cx='69.3' cy='-69.3' r='2'/><circle cx='87.3' cy='-44.5' r='2'/><circle cx='96.8' cy='-15.3' r='2'/><circle cx='96.8' cy='15.3' r='2'/><circle cx='87.3' cy='44.5' r='2'/><circle cx='69.3' cy='69.3' r='2'/><circle cx='44.5' cy='87.3' r='2'/><circle cx='15.3' cy='96.8' r='2'/><circle cx='-15.3' cy='96.8' r='2'/><circle cx='-44.5' cy='87.3' r='2'/><circle cx='-69.3' cy='69.3' r='2'/><circle cx='-87.3' cy='44.5' r='2'/><circle cx='-96.8' cy='15.3' r='2'/><circle cx='-96.8' cy='-15.3' r='2'/><circle cx='-87.3' cy='-44.5' r='2'/><circle cx='-69.3' cy='-69.3' r='2'/><circle cx='-44.5' cy='-87.3' r='2'/><circle cx='-15.3' cy='-96.8' r='2'/></g><circle r='62' fill='%23fffdf6'/></svg>");
  --pg-well-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'><g fill='none' stroke='%23e8edf6' stroke-opacity='1' stroke-width='3'><circle cx='0.0' cy='-80.0' r='13.5'/><circle cx='24.7' cy='-76.1' r='13.5'/><circle cx='47.0' cy='-64.7' r='13.5'/><circle cx='64.7' cy='-47.0' r='13.5'/><circle cx='76.1' cy='-24.7' r='13.5'/><circle cx='80.0' cy='-0.0' r='13.5'/><circle cx='76.1' cy='24.7' r='13.5'/><circle cx='64.7' cy='47.0' r='13.5'/><circle cx='47.0' cy='64.7' r='13.5'/><circle cx='24.7' cy='76.1' r='13.5'/><circle cx='0.0' cy='80.0' r='13.5'/><circle cx='-24.7' cy='76.1' r='13.5'/><circle cx='-47.0' cy='64.7' r='13.5'/><circle cx='-64.7' cy='47.0' r='13.5'/><circle cx='-76.1' cy='24.7' r='13.5'/><circle cx='-80.0' cy='0.0' r='13.5'/><circle cx='-76.1' cy='-24.7' r='13.5'/><circle cx='-64.7' cy='-47.0' r='13.5'/><circle cx='-47.0' cy='-64.7' r='13.5'/><circle cx='-24.7' cy='-76.1' r='13.5'/><circle r='62'/></g><g fill='%23e8edf6' fill-opacity='1'><circle cx='0.0' cy='-80.0' r='3.2'/><circle cx='24.7' cy='-76.1' r='3.2'/><circle cx='47.0' cy='-64.7' r='3.2'/><circle cx='64.7' cy='-47.0' r='3.2'/><circle cx='76.1' cy='-24.7' r='3.2'/><circle cx='80.0' cy='-0.0' r='3.2'/><circle cx='76.1' cy='24.7' r='3.2'/><circle cx='64.7' cy='47.0' r='3.2'/><circle cx='47.0' cy='64.7' r='3.2'/><circle cx='24.7' cy='76.1' r='3.2'/><circle cx='0.0' cy='80.0' r='3.2'/><circle cx='-24.7' cy='76.1' r='3.2'/><circle cx='-47.0' cy='64.7' r='3.2'/><circle cx='-64.7' cy='47.0' r='3.2'/><circle cx='-76.1' cy='24.7' r='3.2'/><circle cx='-80.0' cy='0.0' r='3.2'/><circle cx='-76.1' cy='-24.7' r='3.2'/><circle cx='-64.7' cy='-47.0' r='3.2'/><circle cx='-47.0' cy='-64.7' r='3.2'/><circle cx='-24.7' cy='-76.1' r='3.2'/><circle cx='15.3' cy='-96.8' r='2'/><circle cx='44.5' cy='-87.3' r='2'/><circle cx='69.3' cy='-69.3' r='2'/><circle cx='87.3' cy='-44.5' r='2'/><circle cx='96.8' cy='-15.3' r='2'/><circle cx='96.8' cy='15.3' r='2'/><circle cx='87.3' cy='44.5' r='2'/><circle cx='69.3' cy='69.3' r='2'/><circle cx='44.5' cy='87.3' r='2'/><circle cx='15.3' cy='96.8' r='2'/><circle cx='-15.3' cy='96.8' r='2'/><circle cx='-44.5' cy='87.3' r='2'/><circle cx='-69.3' cy='69.3' r='2'/><circle cx='-87.3' cy='44.5' r='2'/><circle cx='-96.8' cy='15.3' r='2'/><circle cx='-96.8' cy='-15.3' r='2'/><circle cx='-87.3' cy='-44.5' r='2'/><circle cx='-69.3' cy='-69.3' r='2'/><circle cx='-44.5' cy='-87.3' r='2'/><circle cx='-15.3' cy='-96.8' r='2'/></g><circle r='62' fill='%231d2639'/></svg>");
  --pg-halo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'><g fill='none' stroke='%23a3411d' stroke-opacity='0.22' stroke-width='1.8'><circle cx='0.0' cy='-80.0' r='13.5'/><circle cx='24.7' cy='-76.1' r='13.5'/><circle cx='47.0' cy='-64.7' r='13.5'/><circle cx='64.7' cy='-47.0' r='13.5'/><circle cx='76.1' cy='-24.7' r='13.5'/><circle cx='80.0' cy='-0.0' r='13.5'/><circle cx='76.1' cy='24.7' r='13.5'/><circle cx='64.7' cy='47.0' r='13.5'/><circle cx='47.0' cy='64.7' r='13.5'/><circle cx='24.7' cy='76.1' r='13.5'/><circle cx='0.0' cy='80.0' r='13.5'/><circle cx='-24.7' cy='76.1' r='13.5'/><circle cx='-47.0' cy='64.7' r='13.5'/><circle cx='-64.7' cy='47.0' r='13.5'/><circle cx='-76.1' cy='24.7' r='13.5'/><circle cx='-80.0' cy='0.0' r='13.5'/><circle cx='-76.1' cy='-24.7' r='13.5'/><circle cx='-64.7' cy='-47.0' r='13.5'/><circle cx='-47.0' cy='-64.7' r='13.5'/><circle cx='-24.7' cy='-76.1' r='13.5'/><circle r='62'/></g><g fill='%23a3411d' fill-opacity='0.22'><circle cx='0.0' cy='-80.0' r='3.2'/><circle cx='24.7' cy='-76.1' r='3.2'/><circle cx='47.0' cy='-64.7' r='3.2'/><circle cx='64.7' cy='-47.0' r='3.2'/><circle cx='76.1' cy='-24.7' r='3.2'/><circle cx='80.0' cy='-0.0' r='3.2'/><circle cx='76.1' cy='24.7' r='3.2'/><circle cx='64.7' cy='47.0' r='3.2'/><circle cx='47.0' cy='64.7' r='3.2'/><circle cx='24.7' cy='76.1' r='3.2'/><circle cx='0.0' cy='80.0' r='3.2'/><circle cx='-24.7' cy='76.1' r='3.2'/><circle cx='-47.0' cy='64.7' r='3.2'/><circle cx='-64.7' cy='47.0' r='3.2'/><circle cx='-76.1' cy='24.7' r='3.2'/><circle cx='-80.0' cy='0.0' r='3.2'/><circle cx='-76.1' cy='-24.7' r='3.2'/><circle cx='-64.7' cy='-47.0' r='3.2'/><circle cx='-47.0' cy='-64.7' r='3.2'/><circle cx='-24.7' cy='-76.1' r='3.2'/><circle cx='15.3' cy='-96.8' r='2'/><circle cx='44.5' cy='-87.3' r='2'/><circle cx='69.3' cy='-69.3' r='2'/><circle cx='87.3' cy='-44.5' r='2'/><circle cx='96.8' cy='-15.3' r='2'/><circle cx='96.8' cy='15.3' r='2'/><circle cx='87.3' cy='44.5' r='2'/><circle cx='69.3' cy='69.3' r='2'/><circle cx='44.5' cy='87.3' r='2'/><circle cx='15.3' cy='96.8' r='2'/><circle cx='-15.3' cy='96.8' r='2'/><circle cx='-44.5' cy='87.3' r='2'/><circle cx='-69.3' cy='69.3' r='2'/><circle cx='-87.3' cy='44.5' r='2'/><circle cx='-96.8' cy='15.3' r='2'/><circle cx='-96.8' cy='-15.3' r='2'/><circle cx='-87.3' cy='-44.5' r='2'/><circle cx='-69.3' cy='-69.3' r='2'/><circle cx='-44.5' cy='-87.3' r='2'/><circle cx='-15.3' cy='-96.8' r='2'/></g></svg>");
  --pg-halo-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'><g fill='none' stroke='%23e8edf6' stroke-opacity='0.16' stroke-width='1.8'><circle cx='0.0' cy='-80.0' r='13.5'/><circle cx='24.7' cy='-76.1' r='13.5'/><circle cx='47.0' cy='-64.7' r='13.5'/><circle cx='64.7' cy='-47.0' r='13.5'/><circle cx='76.1' cy='-24.7' r='13.5'/><circle cx='80.0' cy='-0.0' r='13.5'/><circle cx='76.1' cy='24.7' r='13.5'/><circle cx='64.7' cy='47.0' r='13.5'/><circle cx='47.0' cy='64.7' r='13.5'/><circle cx='24.7' cy='76.1' r='13.5'/><circle cx='0.0' cy='80.0' r='13.5'/><circle cx='-24.7' cy='76.1' r='13.5'/><circle cx='-47.0' cy='64.7' r='13.5'/><circle cx='-64.7' cy='47.0' r='13.5'/><circle cx='-76.1' cy='24.7' r='13.5'/><circle cx='-80.0' cy='0.0' r='13.5'/><circle cx='-76.1' cy='-24.7' r='13.5'/><circle cx='-64.7' cy='-47.0' r='13.5'/><circle cx='-47.0' cy='-64.7' r='13.5'/><circle cx='-24.7' cy='-76.1' r='13.5'/><circle r='62'/></g><g fill='%23e8edf6' fill-opacity='0.16'><circle cx='0.0' cy='-80.0' r='3.2'/><circle cx='24.7' cy='-76.1' r='3.2'/><circle cx='47.0' cy='-64.7' r='3.2'/><circle cx='64.7' cy='-47.0' r='3.2'/><circle cx='76.1' cy='-24.7' r='3.2'/><circle cx='80.0' cy='-0.0' r='3.2'/><circle cx='76.1' cy='24.7' r='3.2'/><circle cx='64.7' cy='47.0' r='3.2'/><circle cx='47.0' cy='64.7' r='3.2'/><circle cx='24.7' cy='76.1' r='3.2'/><circle cx='0.0' cy='80.0' r='3.2'/><circle cx='-24.7' cy='76.1' r='3.2'/><circle cx='-47.0' cy='64.7' r='3.2'/><circle cx='-64.7' cy='47.0' r='3.2'/><circle cx='-76.1' cy='24.7' r='3.2'/><circle cx='-80.0' cy='0.0' r='3.2'/><circle cx='-76.1' cy='-24.7' r='3.2'/><circle cx='-64.7' cy='-47.0' r='3.2'/><circle cx='-47.0' cy='-64.7' r='3.2'/><circle cx='-24.7' cy='-76.1' r='3.2'/><circle cx='15.3' cy='-96.8' r='2'/><circle cx='44.5' cy='-87.3' r='2'/><circle cx='69.3' cy='-69.3' r='2'/><circle cx='87.3' cy='-44.5' r='2'/><circle cx='96.8' cy='-15.3' r='2'/><circle cx='96.8' cy='15.3' r='2'/><circle cx='87.3' cy='44.5' r='2'/><circle cx='69.3' cy='69.3' r='2'/><circle cx='44.5' cy='87.3' r='2'/><circle cx='15.3' cy='96.8' r='2'/><circle cx='-15.3' cy='96.8' r='2'/><circle cx='-44.5' cy='87.3' r='2'/><circle cx='-69.3' cy='69.3' r='2'/><circle cx='-87.3' cy='44.5' r='2'/><circle cx='-96.8' cy='15.3' r='2'/><circle cx='-96.8' cy='-15.3' r='2'/><circle cx='-87.3' cy='-44.5' r='2'/><circle cx='-69.3' cy='-69.3' r='2'/><circle cx='-44.5' cy='-87.3' r='2'/><circle cx='-15.3' cy='-96.8' r='2'/></g></svg>");
  /* A glow low in an earth panel: the sun coming up by day, the moon
     before dawn */
  --pg-moon: radial-gradient(circle at 50% 50%, #ffd26a 0 17%, rgba(246, 161, 42, .55) 24%, rgba(246, 161, 42, .18) 36%, transparent 52%);
}
html.dark {
  --pg-c1: #ff9a6b; --pg-c2: #f4bf3c; --pg-c3: #8cc96a; --pg-c4: #ffb36b; --pg-c5: #d79ac4;
  --pg-earth-ink: #ffa983; --pg-sun-ink: #ffbe7d; --pg-leaf-ink: #a6d98a; --pg-turmeric-ink: #f6d27a; --pg-cane-ink: #e4b6d6;
  --pg-earth-soft: rgba(255, 154, 107, .12); --pg-sun-soft: rgba(255, 179, 107, .12); --pg-leaf-soft: rgba(140, 201, 106, .12); --pg-turmeric-soft: rgba(244, 191, 60, .13); --pg-cane-soft: rgba(215, 154, 196, .12);
  --theme-600-ink: #1c1408;
  --pg-art-floor: rgba(0, 0, 0, .3);
  --kolam-thin-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'><rect width='16' height='8' fill='%232f2433'/><g fill='none' stroke='%23e8edf6' stroke-width='.75' stroke-linecap='round'><path d='M0 4C2 1.4 6 1.4 8 4S14 6.6 16 4'/><path d='M0 4C2 6.6 6 6.6 8 4S14 1.4 16 4'/></g><g fill='%23e8edf6'><circle cx='4' cy='4' r='.8'/><circle cx='12' cy='4' r='.8'/></g></svg>");
  --cane-v-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='26' viewBox='0 0 8 26'><rect width='8' height='26' fill='%235e2a52'/><rect width='1.5' height='26' fill='%232a1024'/><rect x='6.5' width='1.5' height='26' fill='%232a1024'/><rect x='2.4' width='1.1' height='26' fill='%238f5a80'/><rect y='22.6' width='8' height='1.5' fill='%23b590ad'/><rect y='24.1' width='8' height='.8' fill='%232a1024'/></svg>");
  --pg-toran-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'><path d='M0 1.4H20' stroke='%23c9a14a' stroke-width='2'/><path d='M5 2.2C8 4 8.3 8.4 5 11.6C1.7 8.4 2 4 5 2.2Z' fill='%23426f2c'/><path d='M15 2.2C18 4 18.3 8.4 15 11.6C11.7 8.4 12 4 15 2.2Z' fill='%23609447'/><path d='M5 3V10.6M15 3V10.6' stroke='%23b8cfa0' stroke-opacity='.6' stroke-width='.45'/></svg>");
  --pg-grains-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'><ellipse cx='6' cy='3' rx='2.3' ry='1' fill='%23707b96' transform='rotate(-24 6 3)'/></svg>");
  --pg-stalk-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='8' viewBox='0 0 26 8'><rect y='1' width='26' height='6' fill='%235e2a52'/><rect y='1' width='26' height='1.3' fill='%232a1024'/><rect y='2.9' width='26' height='1' fill='%238f5a80'/><rect y='5.8' width='26' height='1.2' fill='%232a1024'/><rect x='22.6' y='1' width='1.5' height='6' fill='%23b590ad'/></svg>");
  --pg-loop-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'><g fill='none' stroke='%23f4bf3c' stroke-width='1.35' stroke-linejoin='round'><path d='M0 -1.8C2.8 -4 2.8 -8.4 0 -9.2C-2.8 -8.4 -2.8 -4 0 -1.8ZM0 1.8C2.8 4 2.8 8.4 0 9.2C-2.8 8.4 -2.8 4 0 1.8ZM-1.8 0C-4 2.8 -8.4 2.8 -9.2 0C-8.4 -2.8 -4 -2.8 -1.8 0ZM1.8 0C4 2.8 8.4 2.8 9.2 0C8.4 -2.8 4 -2.8 1.8 0Z'/></g><circle r='1.5' fill='%23e8edf6'/><g fill='%23e8edf6'><circle cx='5.2' cy='-5.2' r='1'/><circle cx='-5.2' cy='-5.2' r='1'/><circle cx='5.2' cy='5.2' r='1'/><circle cx='-5.2' cy='5.2' r='1'/></g></svg>");
  --pg-sweet-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'><path d='M3 30C18 6 70 1 97 26C72 56 22 58 3 30Z' fill='%23243a2c'/><path d='M8 30C34 27 66 26 92 27' stroke='%2337543d' stroke-width='2.4' fill='none'/><path d='M24 29L18 14M40 28L36 10M56 27L54 9M24 31L20 48M40 31L38 51M56 31L56 52' stroke='%232f4a35' stroke-width='1.2' fill='none'/></svg>");
  --pg-bells-img: var(--pg-bells-night);
  --pg-clay-relief: 0 0 0 1px rgba(0, 0, 0, .45), 0 3px 0 rgba(0, 0, 0, .35), 0 0 14px -2px rgba(244, 191, 60, .3);
  --pg-dot-ring: #e8edf6;
  --pg-halo: var(--pg-halo-night);
  --pg-well: var(--pg-well-night);
  --pg-moon: radial-gradient(circle at 50% 50%, rgba(244, 246, 251, .92) 0 13%, rgba(223, 229, 242, .3) 19%, rgba(223, 229, 242, .08) 32%, transparent 48%);
  --pg-clay-disc: 0 0 0 2px var(--paper-2), 0 0 0 4px #c98a5a, 0 0 0 5px #5a2c18, 0 0 18px -2px rgba(244, 191, 60, .3);
  --pg-froth:
    radial-gradient(circle at 6px 2px, #f4f6fb 0 2.6px, transparent 3.1px) 0 0 / 12px 100% repeat-x,
    radial-gradient(circle at 3px 6px, rgba(244, 246, 251, .6) 0 1.4px, transparent 1.9px) 0 0 / 9px 100% repeat-x,
    linear-gradient(90deg, #f4bf3c, #f08a4b);
  --pg-leaf-bed:
    radial-gradient(60% 50% at 50% 44%, rgba(244, 191, 60, .1), transparent 74%),
    repeating-linear-gradient(74deg, transparent 0 15px, rgba(140, 201, 106, .05) 15px 16px),
    linear-gradient(160deg, #1b2a2d, #172036 55%, #20243a);
  --pg-earth-swept:
    var(--pulli-earth) repeat,
    radial-gradient(420px 200px at 85% 0%, rgba(220, 228, 245, .12), transparent 70%),
    linear-gradient(160deg, #3a2a35, #2f2330 60%, #261c29);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board. By day a board
   is a square of swept courtyard in rice-flour cream: pale cells, the
   tiles rising from rice and turmeric through sun orange and clay to the
   red earth, cane green and cane purple; before dawn the courtyard under
   the moon, cells of night blue and the tiles warming toward sunrise. */
:root {
  --game-bg:        #f5e9cc;
  --game-surface:   #ecd9b0;
  --game-surface-2: #fffcf3;
  --game-ink:       #2e1820;
  --game-muted:     #896b74;
  --game-accent:    #782e64;
  --game-accent-ink:#ffffff;
  --game-good:      #3f7f2a;
  --game-bad:       #b8361f;
  --game-tile-1:    #fff3d4;
  --game-tile-2:    #f8d77a;
  --game-tile-3:    #f2b01e;
  --game-tile-4:    #ef7a1c;
  --game-tile-5:    #c0653a;
  --game-tile-6:    #a3411d;
  --game-tile-7:    #4f8f2e;
  --game-tile-8:    #7a2d63;
  --game-radius:    9px;
  --game-font:      'Catamaran', 'Arima', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/pongal/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): rice-flour cream, not a dark screen */
  --game-arena-screen: #f5e9cc;
  --game-arena-coins:  #a8730f;
  --game-arena-win:    #3f7f2a;
  --game-arena-danger: #b8361f;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='%23a3411d' fill-opacity='.1'><circle cx='12' cy='12' r='1.4'/><circle cx='36' cy='36' r='1.4'/></g></svg>");
}
html.dark {
  --game-bg:        #172036;
  --game-surface:   #10172a;
  --game-surface-2: #263252;
  --game-ink:       #eef1f7;
  --game-muted:     #95a0ba;
  --game-accent:    #f4bf3c;
  --game-accent-ink:#1c1408;
  --game-good:      #8cc96a;
  --game-bad:       #ff8f73;
  --game-tile-1:    #263252;
  --game-tile-2:    #34406a;
  --game-tile-3:    #5a3f6e;
  --game-tile-4:    #8a4a6a;
  --game-tile-5:    #c0653a;
  --game-tile-6:    #ef7a1c;
  --game-tile-7:    #f4bf3c;
  --game-tile-8:    #fff1c8;
  --game-arena-screen: #172036;
  --game-arena-coins:  #f6d27a;
  --game-arena-win:    #8cc96a;
  --game-arena-danger: #ff8f73;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><g fill='%23c9d3ea' fill-opacity='.08'><circle cx='12' cy='12' r='1.4'/><circle cx='36' cy='36' r='1.4'/></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: 700;
  font-synthesis: none;
  letter-spacing: -.005em;
}
.display-italic { font-style: normal; }
/* Arima has no italic: the small italic asides shared markup sets in the
   display face (card blurbs, bid notes) are set upright in the UI face. */
html .font-display.italic, html .italic.font-display { font-family: var(--font-ui); font-style: normal; font-weight: 600; }
/* Figures in tabular columns read better in the UI face. */
html .font-display.tabular-nums, html .font-display[class*="tabular"] { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0; }

::selection { background: #f8d77a; color: #2e1820; }

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

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

/* A lotus kolam, four loops round a turmeric dot, worn by section
   eyebrows, the hero kicker and the season chip */
.pg-gem, html .section-eyebrow::before { background: var(--pg-loop); }
.pg-gem { display: inline-block; flex-shrink: 0; width: 18px; height: 18px; }

html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; }

.btn-view-all {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui);
  font-size: 0.95rem; font-weight: 700;
  white-space: nowrap; flex-shrink: 0;
  color: var(--ink);
  padding: .3rem .1rem 4px;
  border-bottom: 0;
  background: var(--pg-grains) left bottom / 12px 5px repeat-x;
  text-decoration: none;
  transition: gap 0.18s ease;
}
.btn-view-all:hover { gap: 0.75rem; color: var(--theme-600); }
[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(--pulli-faint); }

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

[data-pg-phase][hidden], [data-pg-day][hidden] { display: none !important; }
[dir="rtl"] .pg-flip-rtl { transform: scaleX(-1); }

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

.hdr-strip, .hdr-strip .ed-status { color: rgba(255, 246, 230, 0.9); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #f8cf5a; }
html.dark .hdr-strip, html.dark .hdr-strip .ed-status { color: rgba(226, 232, 245, .86); }

/* The kolam border under the main header bar and wherever a section
   needs an edge */
.pg-band { height: 14px; background: var(--kolam-band); }
.pg-band--night { background: var(--kolam-band-night); }

/* The season chip in the status strip */
.pg-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .06em; color: #f8cf5a; }
.pg-strip-chip .pg-gem { width: 14px; height: 14px; background: var(--pg-loop-white) center / contain no-repeat; }
/* The desktop strip shares its line with the menu; the note joins the
   chip only on the widest screens, and the day's date gives way to the
   chip below 1440px. Where a long language still runs out of room,
   pongal.js marks the strip .pg-strip-tight and the chip keeps
   only the date or the greeting. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1679px) { .pg-strip-chip__extra { display: none; } }
@media (min-width: 1024px) and (max-width: 1439px) { .hdr-strip .pg-strip-date { display: none; } }
.pg-strip-chip__short, .pg-strip-tight .pg-strip-chip__full { display: none; }
.pg-strip-tight .pg-strip-chip__short { display: inline; }

.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.95rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--btn-bg); color: var(--btn-ink); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--theme-500); outline-offset: 2px; }

/* ── Links and buttons ── */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.96rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  padding-bottom: 4px;
  background: var(--pg-grains) left bottom / 12px 5px repeat-x;
  transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; color: var(--theme-600); }

html .ed-btn-primary, html .ed-plan-cta, html .drawer-login {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.8rem 1.6rem;
  white-space: nowrap;
  font-family: var(--font-ui); font-size: 1.02rem; font-weight: 800;
  color: var(--btn-ink);
  background: var(--btn-bg);
  border: 0;
  border-radius: 14px;
  box-shadow: var(--btn-shadow);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
html .ed-btn-primary:hover, html .ed-plan-cta:hover, html .drawer-login:hover {
  background: var(--btn-bg-hover); color: var(--btn-ink);
  transform: translateY(-1px); box-shadow: var(--btn-shadow-hover);
}
html .ed-btn-primary:active, html .ed-plan-cta:active { transform: translateY(1px); }
html.dark .ed-btn-primary, html.dark .ed-btn-primary:hover,
html.dark .ed-plan-cta, html.dark .ed-plan-cta:hover, html.dark button.ed-plan-cta { color: var(--btn-ink); }
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta,
html body .ed-plan-cta, html.dark body .ed-plan-cta {
  background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow);
}
html body .ed-plan-featured .ed-plan-cta, html.dark body .ed-plan-featured .ed-plan-cta { background: #f2b01e; color: #2e1408; box-shadow: 0 2px 0 #9a6a06; }
.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: 1rem; font-weight: 700;
  color: var(--ink); background: var(--paper-2);
  border: 1.5px solid var(--rule); border-radius: 14px;
  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: white with 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(--court-dust) repeat, var(--court-bg); color: #fff6e6;
  border: 1px solid rgba(242, 176, 30, .35); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--kolam-band); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(255, 246, 230, .22); }

/* ── Status text ── */
.ed-status { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); }
.ed-topnav-link { color: rgba(255, 246, 230, 0.9); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #f8cf5a; }

/* ── 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: 6px; background: var(--pg-grains); opacity: .9; }
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-ui); font-size: 1.02rem; 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: 14px; font-family: var(--font-ui); font-size: 0.97rem; font-weight: 700;
  color: var(--theme-600); border: 1.5px solid var(--theme-600); text-decoration: none;
}
.drawer-logout:hover { background: var(--gold-soft); }

.mobile-glass-header {
  background: rgba(252, 245, 228, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(16, 23, 42, 0.95); }

.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.98rem; 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); }

/* ── The courtyard's parts, shared by the hero, footer, splash and 404 ──
   Colours for the drawings in includes/drawings.php. By day the clay is
   new and orange, the leaves fresh; before dawn the same things in
   moonlight, cooler and darker. */
:root {
  --pot-hi: #ea9659; --pot-mid: #bf5f2e; --pot-lo: #7c3317; --pot-paint: #fff8ea;
  --froth: #fffdf7; --froth-lo: #e9dcc2; --froth-grain: #ecdfc2; --steam: #ffffff;
  --leaf-a: #4f8f2e; --leaf-b: #6fae3c; --leaf-rib: #d9eaa0;
  --cane-a: #3f1530; --cane-b: #7a2d63; --cane-c: #a8628f; --cane-node: #d6a8c6;
  --kolam-ink: #fffaf0;
  --toran-cord: #f2b01e; --toran-twist: #a86a06;
  --flame-a: #f5a524; --flame-b: #ef6a1c; --stone: #8b6b58;
}
html.dark {
  --pot-hi: #c98060; --pot-mid: #95503a; --pot-lo: #4c2420; --pot-paint: #e8edf6;
  --froth: #f4f6fb; --froth-lo: #c6cddd; --froth-grain: #d5dbe8; --steam: #dfe5f2;
  --leaf-a: #35672a; --leaf-b: #4f8a38; --leaf-rib: #a9c79a;
  --cane-a: #24101f; --cane-b: #5a2650; --cane-c: #8a5a80; --cane-node: #b590ad;
  --kolam-ink: #e8edf6;
  --toran-cord: #c9a14a; --toran-twist: #705312;
  --stone: #5c4a52;
}
.pg-toran__leaf { fill: var(--leaf-a); }
.pg-toran__leaf--b { fill: var(--leaf-b); }

/* ── Dark/light toggle: the pot boils over ──
   assets/themes/pongal/assets/js/pongal.js registers it: the rim of a clay
   pot rises along the foot of the screen, white froth wells up over it,
   bubbling, and foams up until it fills the screen; the mode flips under
   the foam, which settles back down into the pot, and the rim sinks away. */
.px-fx--pg-boil { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; --froth: #fffcf3; --froth-2: #f1e7d2; --froth-grain: #e9dcc0; }
.px-fx--pg-boil .pg-fx-foam {
  position: absolute; left: -4%; right: -4%; bottom: -160px; height: calc(100% + 160px);
  transform: translateY(var(--from, 110%));
  background: linear-gradient(180deg, var(--froth) 0%, var(--froth) 70%, var(--froth-2) 100%);
}
/* The foam's crown: a row of round bubbles along its top edge */
.px-fx--pg-boil .pg-fx-crown { position: absolute; left: 0; right: 0; top: -70px; height: 72px; }
.px-fx--pg-boil .pg-fx-crown i {
  position: absolute; bottom: 0; left: var(--x); width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2);
  border-radius: 50%; background: var(--froth);
  box-shadow: inset -6px -8px 0 -2px var(--froth-2);
}
.px-fx--pg-boil .pg-fx-bubble {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  border-radius: 50%; border: 2px solid var(--froth-2); opacity: 0;
}
.px-fx--pg-boil .pg-fx-grain {
  position: absolute; left: var(--x); top: var(--y); width: 9px; height: 4px; border-radius: 50%;
  background: var(--froth-grain); transform: rotate(var(--r));
}
.px-fx--pg-boil .pg-fx-rim {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 120px;
  transform: translateY(130px);
  background:
    radial-gradient(120% 70% at 50% 0%, #e08a52 0%, #bf5f2e 45%, #7c3317 100%);
  border-radius: 50% 50% 0 0 / 60px 60px 0 0;
  box-shadow: inset 0 10px 0 -4px #f0a46e, inset 0 -30px 40px rgba(60, 20, 8, .35);
}
.px-fx--pg-boil .pg-fx-rim::before {
  content: ''; position: absolute; left: 4%; right: 4%; top: 34px; height: 3px; border-radius: 3px;
  background: #fff8ea; opacity: .85;
}
.px-fx--pg-boil .pg-fx-rim::after {
  content: ''; position: absolute; left: 6%; right: 6%; top: 46px; height: 8px;
  background: radial-gradient(circle, #fff8ea 0 2.4px, transparent 3px) 0 0 / 26px 8px repeat-x;
}
.px-fx--pg-boil.is-rim .pg-fx-rim { transition: transform .32s cubic-bezier(.3, 1.3, .5, 1); transform: translateY(40px); }
.px-fx--pg-boil.is-boil .pg-fx-foam { transition: transform var(--rise, .95s) cubic-bezier(.55, 0, .35, 1); transform: translateY(-80px); }
.px-fx--pg-boil.is-boil .pg-fx-bubble { animation: pg-fx-pop 1.1s ease-out var(--d) infinite; }
.px-fx--pg-boil.is-boil .pg-fx-crown i { animation: pg-fx-churn .7s ease-in-out var(--d) infinite alternate; }
@keyframes pg-fx-pop { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.2) translateY(-20px); } }
@keyframes pg-fx-churn { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-10px) scale(1.12); } }
.px-fx--pg-boil.is-settle .pg-fx-foam { transition: transform .7s cubic-bezier(.5, 0, .7, 1); transform: translateY(var(--from, 110%)); }
.px-fx--pg-boil.is-settle .pg-fx-rim { transition: transform .35s ease-in .5s; transform: translateY(130px); }

/* ── Footer: the courtyard in both modes — under the kolam border a
   mango-leaf toran is strung the width of the page, cattle bells
   hanging in it, over the swept red earth (before dawn, the same earth
   under the moon) ── */
.pg-footer {
  --paper:     #7a2e13;
  --paper-2:   #8a3718;
  --paper-3:   #9a4120;
  --ink:       #fff6e6;
  --ink-2:     #fbe9d2;
  --ink-soft:  #efcdb2;
  --rule:      rgba(255, 246, 230, 0.18);
  --rule-soft: rgba(255, 246, 230, 0.09);
  --theme-500: #f8cf5a; --theme-600: #f8cf5a; --theme-700: #fbe08f;
  --theme-500-rgb: 248, 207, 90;
  position: relative;
}
html body .pg-footer#desktopFooter { background: var(--court-dust) repeat, var(--court-bg) !important; }
html.dark .pg-footer { --paper: #221a27; --paper-2: #2c2232; --paper-3: #382c3f; --ink: #eef1f7; --ink-2: #d6dcea; --ink-soft: #a9b2c8; --theme-500: #f4bf3c; --theme-600: #f4bf3c; --theme-700: #f8d77f; }
.pg-footer-top {
  position: relative; height: 112px; margin-bottom: -1px; overflow: hidden;
  background: var(--court-dust) repeat, linear-gradient(180deg, #96401c 0%, #8f3818 100%);
}
html.dark .pg-footer-top { background: var(--court-dust) repeat, linear-gradient(180deg, #30253a 0%, #2c2230 100%); }
.pg-footer-top::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--kolam-band); z-index: 1; }
.pg-footer-toran { position: absolute; left: 0; top: 14px; width: 100%; height: 46px; display: block; }
.pg-footer-bell { position: absolute; left: var(--x); top: 16px; width: 34px; height: 54px; margin-left: -17px; }
.pg-footer-bell svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pg-footer-kolam { position: absolute; left: 50%; bottom: -46px; width: 240px; margin-left: -120px; opacity: .55; }
.pg-footer-kolam svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .pg-footer-sway { animation: pg-sway 4.6s ease-in-out 3 both; animation-delay: var(--w, 0s); transform-origin: 50% 0; }
}
@keyframes pg-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.pg-footer a:hover { color: #f8cf5a; }
html .pg-footer .ed-footer-heading { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0; text-transform: none; color: #f8cf5a; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }
/* header.css greys every footer h4 after dark with an ID rule */
html.dark #desktopFooter .ed-footer-heading { color: #f4bf3c !important; }
html.dark #desktopFooter .ed-newsletter h4 { color: #2e1820 !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: .97rem; font-weight: 700; color: var(--ink-2); }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }

/* The newsletter on a sheet of rice-flour cream: the kolam border along
   its top and a little pot boiling over in its corner */
html body .pg-footer .ed-newsletter {
  position: relative;
  background:
    radial-gradient(260px 160px at 100% 50%, rgba(242, 176, 30, .22), transparent 70%),
    var(--pulli-faint) repeat,
    #fff9ec;
  color: #2e1820;
  border: 0; border-radius: 16px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6);
  overflow: hidden;
  padding-top: 2.5rem; padding-bottom: 2.2rem;
}
html body .pg-footer .ed-newsletter::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'><rect width='28' height='14' fill='%23a3411d'/><rect width='28' height='1.6' fill='%23f2b01e'/><rect y='12.4' width='28' height='1.6' fill='%23f2b01e'/><g fill='none' stroke='%23fffaf0' stroke-width='1.15' stroke-linecap='round'><path d='M0 7C3.5 2.8 10.5 2.8 14 7S24.5 11.2 28 7'/><path d='M0 7C3.5 11.2 10.5 11.2 14 7S24.5 2.8 28 7'/></g><g fill='%23fffaf0'><circle cx='7' cy='7' r='1.25'/><circle cx='21' cy='7' r='1.25'/></g></svg>") repeat-x left center / 28px 14px;
}
html body .pg-footer .ed-newsletter::after {
  content: ''; position: absolute; right: 18px; top: 26px; bottom: auto; left: auto; width: 74px; height: 74px; display: block;
  border-radius: 0; opacity: 1; filter: drop-shadow(0 4px 5px rgba(80, 36, 16, .25)); transform: none; pointer-events: none;
  background: var(--pg-pot-mini) center / contain no-repeat;
}
[dir="rtl"] body .pg-footer .ed-newsletter::after { right: auto; left: 18px; }
@media (max-width: 767px) { html body .pg-footer .ed-newsletter::after { width: 46px; height: 46px; top: 22px; right: 12px; } [dir="rtl"] body .pg-footer .ed-newsletter::after { right: auto; left: 12px; } }
html body .pg-footer .ed-newsletter, html body .pg-footer .ed-newsletter * { --ink: #2e1820; --ink-2: #523240; }
html body .pg-footer .ed-newsletter h4, html.dark body .pg-footer .ed-newsletter h4 { color: #2e1820 !important; font-family: var(--font-display); font-weight: 700; }
html.dark body .pg-footer .ed-newsletter p:not(#newsletter-msg) { color: #523240 !important; }
html body .pg-footer .ed-newsletter-input, html.dark body .pg-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #2e1820 !important; border: 1px solid rgba(46, 24, 32, .2) !important; }
html body .pg-footer .ed-newsletter-input.no-dark, html.dark body .pg-footer .ed-newsletter-input.no-dark { background: #ffffff !important; color: #2e1820 !important; border: 1px solid rgba(46, 24, 32, .2) !important; }
html body .pg-footer .ed-newsletter-input::placeholder { color: #896b74; }
html body .pg-footer .ed-newsletter-input:focus { border-color: #782e64 !important; box-shadow: 0 0 0 3px rgba(120, 46, 100, .16); }
html body .pg-footer .ed-newsletter-btn {
  background: #782e64; color: #ffffff; border: 0; border-radius: 12px;
  font-family: var(--font-ui); font-weight: 800; box-shadow: 0 2px 0 #3f1530;
}
html body .pg-footer .ed-newsletter-age { color: #523240; }

/* Logo card: the light-mode logo on a cream tile edged with a ring of
   rice-flour dots, wherever it sits on the earth (footer, app splash) */
.pg-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 1.6rem;
  background: #fff9ec;
  border-radius: 16px;
  box-shadow: 0 0 0 3px #f2b01e, 0 0 0 5px #7c3317, 0 14px 28px -12px rgba(0, 0, 0, .6);
}
.pg-plaque::after {
  content: ''; position: absolute; inset: -12px; border-radius: 24px; pointer-events: none;
  background:
    radial-gradient(circle, #fffaf0 0 1.6px, transparent 2.1px) 0 0 / 14px 14px repeat-x,
    radial-gradient(circle, #fffaf0 0 1.6px, transparent 2.1px) 0 100% / 14px 14px repeat-x;
  opacity: .8;
}

/* 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(16, 23, 42, 0.95) !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, 32, 54, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
html.dark #langSheet { background: var(--paper-2) !important; border-top-color: var(--rule) !important; }
html.dark .premium-profile-header { background: var(--paper-2) !important; }
html.dark .premium-dropdown,
html.dark #mobileExploreSheet .bg-white,
html.dark #logoutModal .bg-white,
html.dark .bg-white,
html.dark [x-data] .bg-white,
html.dark .bg-white.shadow-xl,
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .odd\:bg-white:nth-child(odd) { background-color: var(--paper-2) !important; }
html.dark .bg-gray-50,
html.dark .even\:bg-gray-50:nth-child(even) { background-color: var(--paper) !important; }
html.dark .bg-gray-100,
html.dark #mobileExploreSheet .bg-gray-100,
html.dark thead { background-color: var(--paper-3) !important; }
html.dark .from-white, html.dark .from-gray-50 { --tw-gradient-from: var(--paper) !important; }
html.dark .to-white, html.dark .to-gray-50 { --tw-gradient-to: var(--paper) !important; }
html.dark .via-white, html.dark .via-gray-50 { --tw-gradient-via: var(--paper-2) !important; }
html.dark .from-gray-100 { --tw-gradient-from: var(--paper-2) !important; }
html.dark .to-gray-100 { --tw-gradient-to: var(--paper-2) !important; }
html.dark .search-input,
html.dark select:not(.no-dark) { background-color: var(--paper-2) !important; }
html.dark .gradient-bg { background: linear-gradient(-45deg, #212b45, #10172a, #1b2440, #0a0f1e) !important; }
html.dark [class*="dark:bg-[#121218]"], html.dark [class*="dark:bg-[#0"] { background-color: var(--paper-2) !important; }

/* header.css fills every dark-mode field with a navy #0d1117; here fields
   take the theme's own night. Same selector shape so it outranks it. */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.no-dark),
html.dark textarea:not(.no-dark),
html.dark select:not(.no-dark) {
  background-color: #0c1222 !important;
  border-color: rgba(226, 232, 245, .2) !important;
  color: #eef1f7 !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. Before dawn those panels take the deepest night. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #0a0f1e;
  --paper: #eef1f7;
  border-color: rgba(244, 191, 60, .3);
}

html header.safe-top-header[style] { background: rgba(252, 245, 228, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(16, 23, 42, .95) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(16, 23, 42, .95); }

/* ── Login / register / forgot-password brand panel: the courtyard, a
   toran along its top and a pot boiling over in its corner ── */
:root, html.dark {
  --brand-gradient: var(--court-bg);
  --brand-glow-1: rgba(242, 176, 30, 0.26);
  --brand-glow-2: rgba(239, 122, 28, 0.24);
}
.brand-panel { background: var(--court-dust) repeat, var(--court-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the pot boiling over. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: 110px !important; right: 8% !important; left: auto !important; bottom: auto !important;
  width: 130px !important; height: 130px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .45)) !important; transform: none !important;
  background: var(--pg-pot-mini) center / contain no-repeat !important;
  box-shadow: none !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 8% !important; }
/* login.css's other glow becomes the kolam border along the top */
html .brand-panel::before {
  top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 14px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--kolam-band) !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(255, 246, 230, 0.86) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: a whole banana leaf — deep green, its pale
   midrib running the length of it and the fine veins slanting off — with
   the kolam border along its foot and a pot boiling over in its corner ── */
html body .wallet-hero {
  position: relative;
  background:
    linear-gradient(176deg, transparent 0 57%, rgba(232, 246, 196, .55) 57.4% 58.6%, transparent 59% 100%),
    repeating-linear-gradient(64deg, transparent 0 22px, rgba(18, 60, 12, .2) 22px 23.5px),
    repeating-linear-gradient(116deg, transparent 0 22px, rgba(18, 60, 12, .14) 22px 23.5px),
    linear-gradient(112deg, transparent 20%, rgba(255, 255, 230, .14) 38%, transparent 52%),
    radial-gradient(120% 140% at 10% 0%, #5c9f35, #3c7a25 52%, #275a19);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 2px 0 #1c4212, 0 22px 40px -18px rgba(28, 66, 18, .75);
  color: #fffdf2;
  overflow: hidden;
  padding-bottom: calc(1.5rem + 18px) !important;
}
html body .wallet-hero::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 14px;
  border: 0; border-radius: 0; transform: none; opacity: 1;
  background: var(--kolam-band);
  pointer-events: none;
}
html body .wallet-hero::after {
  content: ''; position: absolute; right: 36px; top: 50%; left: auto; bottom: auto; width: 128px; height: 128px; margin-top: -76px;
  border-radius: 0; transform: none; opacity: 1; filter: drop-shadow(0 8px 10px rgba(10, 40, 6, .45));
  background: var(--pg-pot-mini) center / contain no-repeat;
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 32px; }
@media (max-width: 639px) {
  html body .wallet-hero::after { width: 60px; height: 60px; top: 52px; margin-top: 0; right: 12px; }
  html[dir="rtl"] body .wallet-hero::after { right: auto; left: 12px; }
}
html body .wallet-hero > * { position: relative; z-index: 1; }
/* Shared markup letters the eyebrow, counts and rules in faint white for
   a black card; on the leaf they need more body. */
html body .wallet-hero span:is([style*="color:rgba(255,255,255"], [style*="color:color-mix(in srgb, var(--paper)"]) { color: rgba(255, 253, 242, .88) !important; }
html body .wallet-hero .h-px { background: repeating-linear-gradient(90deg, rgba(255, 250, 220, .6) 0 3px, transparent 3px 8px) !important; }
html body .wallet-balance-num {
  font-family: var(--font-ui); font-variation-settings: normal; font-weight: 800; letter-spacing: -.01em;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
  text-shadow: 0 2px 0 rgba(20, 60, 10, .4);
}
html body .wallet-hero-btn-primary { background: #fff9ec; color: #2c5c1a; border: 0; font-family: var(--font-ui); font-weight: 800; border-radius: 12px; box-shadow: 0 2px 0 #1c4212; }
html body .wallet-hero-btn-primary:hover { background: #ffffff; color: #2c5c1a; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #fffdf2; border-color: rgba(255, 250, 220, .6); border-radius: 12px; }
html.dark body .wallet-hero {
  background:
    linear-gradient(176deg, transparent 0 57%, rgba(200, 220, 190, .28) 57.4% 58.6%, transparent 59% 100%),
    repeating-linear-gradient(64deg, transparent 0 22px, rgba(0, 0, 0, .22) 22px 23.5px),
    repeating-linear-gradient(116deg, transparent 0 22px, rgba(0, 0, 0, .16) 22px 23.5px),
    linear-gradient(112deg, transparent 20%, rgba(220, 228, 245, .08) 38%, transparent 52%),
    radial-gradient(120% 140% at 10% 0%, #2e5a2c, #1f4224 52%, #142c1c);
  box-shadow: 0 2px 0 #0a1a0e, 0 0 50px -14px rgba(244, 191, 60, .22);
}

/* ── Mystery box card (styled by assets/css/pages/home.css): the kolam
   border across its top ── */
html .ed-card-mystery {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
html .ed-card-mystery:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
html .ed-card-mystery::before {
  top: 0; left: 0; right: 0; bottom: auto; width: auto; height: 14px; border-radius: 0;
  background: var(--kolam-band); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

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

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

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's cane purple. */
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(139, 58, 117, .3); }
html.dark .border-violet-200 { border-color: rgba(244, 191, 60, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(139, 58, 117, .35); }
html .focus\:border-purple-400:focus { border-color: var(--theme-500); }

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

/* The game arena's Play button letters itself in white on the accent;
   before dawn the accent is turmeric, so it takes the button ink. */
html.dark .arena-play { color: var(--btn-ink); text-shadow: none; }
html.dark .arena-play .pic { background: rgba(28, 20, 8, .12); }
html.dark .arena-play .cost { border-left-color: rgba(28, 20, 8, .3); }

/* ── 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 on a white panel under the kolam ──
   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: 14px !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: 16px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.7rem !important;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: var(--kolam-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-ui);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--theme-600);
  overflow-wrap: normal;
}

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

/* ── My Winnings: each prize in a kolam well drawn on a square of swept
   earth, a toran hung along its top and the kolam border at its foot,
   over a white panel for its details. The earth takes turns with the
   colours of a sugarcane stalk and a banana leaf. ── */
.pg-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;
}
.pg-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pg-win__ground {
  position: relative; container-type: inline-size;
  display: flex; align-items: center; justify-content: center;
  padding: 2.6rem 14px calc(14px + 1.3rem);
  background: var(--pulli-earth) repeat, radial-gradient(120% 100% at 50% 0%, #b44d24, #9a3c1a 55%, #7d2f14);
}
.pg-win:nth-child(3n+2) .pg-win__ground { background: var(--pulli-earth) repeat, radial-gradient(120% 100% at 50% 0%, #8e3b78, #6f2a5d 55%, #561f48); }
.pg-win:nth-child(3n+3) .pg-win__ground { background: var(--pulli-earth) repeat, radial-gradient(120% 100% at 50% 0%, #5c9a35, #3f7a26 55%, #2e5f1b); }
html.dark .pg-win:nth-child(n) .pg-win__ground { background: var(--pulli-earth) repeat, radial-gradient(120% 100% at 50% 0%, #3c2e3e, #2c2230 55%, #221a27); }
html.dark .pg-win:nth-child(3n+2) .pg-win__ground { background: var(--pulli-earth) repeat, radial-gradient(120% 100% at 50% 0%, #3d2a40, #2e2032 55%, #24182a); }
html.dark .pg-win:nth-child(3n+3) .pg-win__ground { background: var(--pulli-earth) repeat, radial-gradient(120% 100% at 50% 0%, #253a2e, #1d2d25 55%, #17241e); }
.pg-win__ground::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--pg-toran); }
.pg-win__ground::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--kolam-band); }
.pg-win__well { position: relative; display: block; width: min(66%, 12.5rem); aspect-ratio: 1; background: var(--pg-well) center / contain no-repeat; filter: drop-shadow(0 6px 8px rgba(40, 10, 0, .35)); }
.pg-win__prize {
  position: absolute; left: 50%; top: 50%; width: 56%; height: 56%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden;
}
.pg-win__prize img { max-width: 86%; max-height: 86%; object-fit: contain; transition: transform .3s ease; }
.pg-win:hover .pg-win__prize img { transform: scale(1.06); }
.pg-win__ground > .absolute { z-index: 3; top: 1.1rem; }
.pg-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .65rem;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: #2e1820; background: #fff9ec; border-radius: 8px;
  box-shadow: 0 1px 0 rgba(46, 24, 32, .25);
}
.pg-win__tag--open { color: #2e1408; background: #f8cf5a; }
.pg-win__tag--done { color: #ffffff; background: #3f7f2a; }
.pg-win__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.pg-win__label { padding-top: .6rem; background: var(--pg-grains) left top / 12px 5px repeat-x; }
.pg-win__price { font-family: var(--font-ui); font-weight: 800; font-size: clamp(1.15rem, 4vw, 1.35rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; white-space: nowrap; }
.pg-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .94rem; }
.pg-win__cart, .pg-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 12px; font-weight: 700;
}
.pg-win__cart { color: var(--ink); background: var(--paper-2); border: 1.5px solid var(--rule); }
.pg-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.pg-win__btn-off { color: var(--ink-soft); background: transparent; border: 1.5px dashed var(--rule); cursor: not-allowed; }
.pg-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .94rem; font-weight: 800;
  color: var(--pg-leaf-ink); background: var(--pg-leaf-soft); border-radius: 12px;
}

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

@media (prefers-reduced-motion: reduce) {
  .pg-footer-sway { animation: none !important; }
}

/* Status tones (kernel 1.1.166): this theme's own green, amber, red and info hues
   for the shared .px-tone-* chips and notes, each set so its chip and text
   read at 4.5:1 or better on this theme's paper in light and dark. */
html:root { --px-good: #3f7e2a; --px-warn: #aa6108; --px-crit: #b7361f; --px-info: #7a2f65; }
html.dark:root { --px-good: #94cd74; --px-warn: #fbbf23; --px-crit: #ffa994; --px-info: #e1acd2; }

/* Changing language, the scene (pongal.js): a clay pot on the hearth
   between two sugarcanes, the old language's name on the pot. The milk
   boils over the brim in a white froth and the new name rises on the pot;
   after the reload the froth runs further down and kolam dots are set on
   the floor round the hearth. The pot is the same on both pages, so the
   reload never shows. */
.pg-lang-stage { background: color-mix(in srgb, var(--pg-earth-deep, #7a2e13) 50%, transparent); }
.pg-lang-yard {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 18px 16px 0; overflow: hidden;
  border-radius: var(--radius, 14px); background: var(--paper-2, #fffdf7); font-family: var(--font-ui, system-ui, sans-serif);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .65);
}
.pg-lang-scene {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; align-items: end; gap: 8px; max-width: 470px; margin: 0 auto;
}
.pg-lang-cane {
  position: relative; justify-self: center; width: 9px; height: 176px; border-radius: 4px;
  background: repeating-linear-gradient(180deg, var(--pg-cane, #7a2d63) 0 26px, var(--pg-cane-hi, #a8628f) 26px 29px);
  transform-origin: 50% 100%; transform: rotate(-6deg);
}
.pg-lang-cane:last-child { transform: rotate(6deg); }
.pg-lang-cane::before, .pg-lang-cane::after {
  content: ""; position: absolute; left: 50%; top: -22px; width: 10px; height: 34px; border-radius: 100% 0;
  background: var(--pg-leaf, #4f8f2e); transform-origin: 0 100%; transform: rotate(-30deg);
}
.pg-lang-cane::after { background: var(--pg-leaf-hi, #78b443); transform: rotate(28deg) scaleX(-1); }
.pg-lang-pot { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 30px; min-width: 0; }
.pg-lang-froth { position: absolute; left: 20%; right: 20%; top: 6px; height: 36px; z-index: 1; }
.pg-lang-froth i {
  position: absolute; bottom: 0; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0 30%, var(--pg-rice, #fffaf0) 55%, #ece2cc);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}
.pg-lang-froth i:nth-child(1) { left: 0; height: 20px; width: 20px; }
.pg-lang-froth i:nth-child(2) { left: 13%; bottom: 6px; }
.pg-lang-froth i:nth-child(3) { left: 28%; bottom: 10px; width: 30px; height: 30px; }
.pg-lang-froth i:nth-child(4) { left: 44%; bottom: 4px; }
.pg-lang-froth i:nth-child(5) { left: 58%; bottom: 10px; width: 28px; height: 28px; }
.pg-lang-froth i:nth-child(6) { left: 72%; bottom: 3px; }
.pg-lang-froth i:nth-child(7) { right: 0; height: 20px; width: 20px; }
.pg-lang-neck {
  position: relative; z-index: 2; display: block; width: 62%; height: 22px; border-radius: 6px;
  background: linear-gradient(180deg, var(--pg-clay, #c0653a), var(--pg-earth, #a3411d));
}
.pg-lang-neck::after {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -4px; height: 8px; border-radius: 4px;
  background: repeating-linear-gradient(110deg, var(--pg-leaf, #4f8f2e) 0 6px, var(--pg-leaf-hi, #78b443) 6px 10px);
}
.pg-lang-belly {
  position: relative; display: grid; place-items: center; width: 100%; min-height: 136px; box-sizing: border-box; margin-top: -2px;
  padding: 26px 34px 30px; border-radius: 44% 44% 46% 46% / 30% 30% 58% 58%; color: #fffaf0; text-align: center;
  background: radial-gradient(circle at 34% 28%, var(--pg-clay, #c0653a), var(--pg-earth, #a3411d) 55%, var(--pg-earth-deep, #7a2e13));
  box-shadow: inset -10px -14px 22px rgba(0, 0, 0, .25);
}
.pg-lang-drips { position: absolute; inset: 0; z-index: 2; }
.pg-lang-drips i {
  position: absolute; top: 0; width: 12px; height: 32px; border-radius: 0 0 6px 6px; background: var(--pg-rice, #fffaf0);
  transform-origin: 50% 0; clip-path: inset(0 0 0 0);
}
.pg-lang-drips i:nth-child(1) { left: 22%; height: 26px; }
.pg-lang-drips i:nth-child(2) { left: 34%; height: 16px; }
.pg-lang-drips i:nth-child(3) { left: 62%; height: 22px; }
.pg-lang-drips i:nth-child(4) { left: 74%; height: 30px; }
.pg-lang-old, .pg-lang-new { grid-area: 1 / 1; position: relative; z-index: 3; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
.pg-lang-old { font: 600 clamp(22px, 6vw, 30px)/1.15 var(--font-display, Georgia, serif); opacity: 0; transform: translateY(16px); }
.pg-lang-new {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-shadow: 0 2px 6px rgba(60, 20, 5, .45);
  font: 600 clamp(28px, 8.5vw, 44px)/1.08 var(--font-display, Georgia, serif);
}
.pg-lang-new b { max-width: 100%; min-width: 0; font-weight: inherit; }
.pg-lang-new img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--pg-turmeric, #f2b01e); }
.pg-lang-floor {
  position: relative; height: 66px; margin: 0 -16px;
  background: linear-gradient(180deg, var(--pg-earth, #a3411d), var(--pg-earth-deep, #7a2e13));
}
.pg-lang-hearth { position: absolute; left: 50%; top: 0; display: flex; align-items: flex-start; gap: 6px; transform: translateX(-50%); }
.pg-lang-hearth i { display: block; width: 26px; height: 18px; border-radius: 0 0 40% 40%; background: linear-gradient(180deg, #6b5a52, #3e322d); }
.pg-lang-hearth .pg-lang-fire {
  width: 22px; height: 26px; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; transform-origin: 50% 0;
  background: radial-gradient(circle at 50% 30%, #fff3c4, var(--pg-turmeric, #f2b01e) 45%, var(--pg-sun, #ef7a1c) 75%);
  box-shadow: 0 0 14px 4px rgba(239, 122, 28, .5);
}
.pg-lang-kolam { position: absolute; inset: 0; }
.pg-lang-kolam i {
  position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--pg-rice, #fffaf0); box-shadow: 0 0 0 4px rgba(255, 250, 240, .22); opacity: 0; transform: scale(0);
}
/* Out: the fire flares, the milk froths over, the new name rises on the pot. */
.px-lang-stage-out .pg-lang-yard { animation: pg-lang-rise .3s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .pg-lang-fire { animation: pg-lang-flicker .9s ease-in-out both; }
.px-lang-stage-out .pg-lang-froth i { animation: pg-lang-boil .32s cubic-bezier(.3, 1.4, .5, 1) var(--d) both; }
.px-lang-stage-out .pg-lang-drips i { animation: pg-lang-spill .32s ease-in .6s both; }
.px-lang-stage-out .pg-lang-old { animation: pg-lang-old .22s ease-in .45s both; }
.px-lang-stage-out .pg-lang-new { animation: pg-lang-new .32s ease-out .64s both; }
/* In: the froth runs on, the kolam dots are set; then away. */
.px-lang-stage-in .pg-lang-fire { animation: pg-lang-flicker .9s ease-in-out both; }
.px-lang-stage-in .pg-lang-froth i { animation: pg-lang-bubble .5s ease-in-out var(--d) both; }
.px-lang-stage-in .pg-lang-drips i { animation: pg-lang-run .5s ease-in .1s both; }
.px-lang-stage-in .pg-lang-kolam i { animation: pg-lang-dot .25s cubic-bezier(.3, 1.5, .5, 1) var(--d) both; }
.px-lang-stage-in .pg-lang-yard { animation: pg-lang-leave .28s ease-in 1s both; }
@keyframes pg-lang-rise { from { opacity: 0; transform: translateY(36px); } }
@keyframes pg-lang-flicker { 25% { transform: scaleY(1.25); } 50% { transform: scaleY(.9); } 75% { transform: scaleY(1.15); } }
@keyframes pg-lang-boil { from { opacity: 0; transform: translateY(24px) scale(.3); } }
@keyframes pg-lang-spill { from { clip-path: inset(0 0 100% 0); } }
@keyframes pg-lang-old { from { opacity: 1; transform: none; } }
@keyframes pg-lang-new { from { opacity: 0; transform: translateY(22px); } }
@keyframes pg-lang-bubble { 50% { transform: translateY(-4px) scale(1.12); } }
@keyframes pg-lang-run { to { transform: scaleY(1.35); } }
@keyframes pg-lang-dot { to { opacity: 1; transform: none; } }
@keyframes pg-lang-leave { to { opacity: 0; transform: translateY(24px) scale(.97); } }
@media (max-width: 460px) {
  .pg-lang-yard { padding: 16px 12px 0; }
  .pg-lang-floor { margin: 0 -12px; }
  .pg-lang-scene { grid-template-columns: minmax(0, 1fr); }
  .pg-lang-cane { display: none; }
  .pg-lang-belly { padding: 24px 26px 28px; }
}

/* 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: #7f646c;
}
/* rev 868fe5109c9f2a2b */