/* ============================================================
   SONGKRAN THEME — the water festival of the April heat.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from Songkran morning: silver khan bowls of jasmine-
   scented water, phuang malai garlands of jasmine, marigold and
   rose, frangipani floating on a basin, drops flung in the sun,
   and the woven stripes of a pha sin hem as the border language.
   Jasmine white, silver and water blue by day, marigold and rose
   for warmth; after dark the festival night, garland lights
   strung over the water and their reflections trembling in it.

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

:root {
  --font-display: 'Mitr', 'Anuphan', 'Trebuchet MS', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', system-ui, sans-serif;
  --font-ui:      'Anuphan', system-ui, 'Segoe UI', 'Noto Sans', sans-serif;

  --paper:        #f7fafa;
  --paper-2:      #ffffff;
  --paper-3:      #e8f2f3;
  --ink:          #0f2f3b;
  --ink-2:        #2c4c58;
  --ink-soft:     #5d7a85;
  --rule:         rgba(15, 47, 59, 0.13);
  --rule-soft:    rgba(15, 47, 59, 0.07);
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 1px 2px rgba(15, 47, 59, .06), 0 6px 16px -8px rgba(15, 47, 59, .2);
  --shadow-md:    0 2px 4px rgba(15, 47, 59, .06), 0 18px 34px -16px rgba(15, 47, 59, .34);

  /* Water blue */
  --theme-50:  #ebf6fc;
  --theme-100: #cfeaf7;
  --theme-200: #a0d4ef;
  --theme-300: #66b8e2;
  --theme-400: #2f9bd3;
  --theme-500: #0a86c6;
  --theme-600: #0a76b2;
  --theme-700: #075f91;
  --theme-800: #064c74;
  --theme-900: #053a59;
  --theme-500-rgb: 10, 134, 198;
  --theme-600-rgb: 10, 118, 178;

  /* Garland and silk colours */
  --sk-blue: #0a7fbf; --sk-water: #3aaec0; --sk-pool: #c9f1f0; --sk-jasmine: #fffdf5;
  --sk-marigold: #f59e1b; --sk-rose: #e8466f; --sk-pink: #f0507e; --sk-jade: #24a389;
  --sk-silver: #c7d0d9; --sk-silver-hi: #f4f7fa; --sk-silver-lo: #8b97a5;

  /* The festival night: footer, winners, splash and login in both modes */
  --night:   #0b1b28;
  --night-2: #12283a;
  --night-3: #1b3449;
  --on-night: #f3f1ea;
  --on-night-soft: rgba(243, 241, 234, .76);

  /* Names other themes' shared markup reaches for */
  --gold:       #b9790e;
  --gold-2:     #f59e1b;
  --gold-soft:  rgba(10, 134, 198, 0.08);
  --gold-ink:   #0f2f3b;
  --felt:       #0b1b28;
  --felt-2:     #12283a;
  --on-felt:    #f3f1ea;
  --on-felt-soft: rgba(243, 241, 234, 0.78);
  --peacock:    #1d8f78;
  --peacock-soft: rgba(36, 163, 137, 0.12);
  --red:        #d23a5f;
  --red-soft:   rgba(232, 70, 111, 0.09);
  --rose:       #e8466f;
  --rose-soft:  rgba(10, 134, 198, 0.08);

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

  /* Buttons: water blue with white lettering by day; after dark the warm
     light of the garland bulbs */
  --btn-bg:       #0a7bb9;
  --btn-bg-hover: #097ab6;
  --btn-ink:      #ffffff;
  --btn-shadow:   0 2px 0 #055b8a, 0 10px 20px -10px rgba(10, 127, 191, .7);
  --btn-shadow-hover: 0 3px 0 #055b8a, 0 14px 24px -10px rgba(10, 127, 191, .75);

  /* The woven hem of a pha sin: rose, marigold and jade stripes either
     side of a blue ground run with tiny white diamonds. The theme's band
     wherever a section needs an edge. */
  --sin: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'><rect width='24' height='14' fill='%230a7fbf'/><rect width='24' height='2' fill='%23e8466f'/><rect y='2' width='24' height='.8' fill='%23fffdf5'/><rect y='2.8' width='24' height='1.6' fill='%23f59e1b'/><rect y='9.6' width='24' height='1.6' fill='%23f59e1b'/><rect y='11.2' width='24' height='.8' fill='%23fffdf5'/><rect y='12' width='24' height='2' fill='%2324a389'/><path d='M6 5.2L8 7L6 8.8L4 7Z' fill='%23fffdf5'/><path d='M18 5.6L19.4 7L18 8.4L16.6 7Z' fill='%23ffc23d'/><circle cx='12' cy='7' r='.8' fill='%23fffdf5'/><circle cx='0' cy='7' r='.8' fill='%23fffdf5'/><circle cx='24' cy='7' r='.8' fill='%23fffdf5'/></svg>") repeat-x left center / 24px 14px;
  --sin-night: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'><rect width='24' height='14' fill='%23165f8c'/><rect width='24' height='2' fill='%23d8456c'/><rect y='2' width='24' height='.8' fill='%23f3f1ea' fill-opacity='.8'/><rect y='2.8' width='24' height='1.6' fill='%23ffc457'/><rect y='9.6' width='24' height='1.6' fill='%23ffc457'/><rect y='11.2' width='24' height='.8' fill='%23f3f1ea' fill-opacity='.8'/><rect y='12' width='24' height='2' fill='%231f8c78'/><path d='M6 5.2L8 7L6 8.8L4 7Z' fill='%23f3f1ea'/><path d='M18 5.6L19.4 7L18 8.4L16.6 7Z' fill='%23ffc457'/><circle cx='12' cy='7' r='.8' fill='%23f3f1ea'/><circle cx='0' cy='7' r='.8' fill='%23f3f1ea'/><circle cx='24' cy='7' r='.8' fill='%23f3f1ea'/></svg>") repeat-x left center / 24px 14px;

  /* Ripple rings and a few drifting jasmine buds, very faint, on the page */
  --ripples-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%230a86c6' stroke-opacity='.07' stroke-width='1.3'><ellipse cx='80' cy='90' rx='18' ry='6'/><ellipse cx='80' cy='90' rx='36' ry='12'/><ellipse cx='80' cy='90' rx='56' ry='19' stroke-opacity='.04'/><ellipse cx='228' cy='226' rx='14' ry='5'/><ellipse cx='228' cy='226' rx='30' ry='10' stroke-opacity='.05'/></g><g fill='%2324a389' fill-opacity='.06'><ellipse cx='196' cy='70' rx='4' ry='2' transform='rotate(-24 196 70)'/><ellipse cx='60' cy='232' rx='4' ry='2' transform='rotate(30 60 232)'/></g><g fill='%230a86c6' fill-opacity='.07'><path d='M150 140c2 4 6 8 6 12a6 6 0 0 1-12 0c0-4 4-8 6-12Z'/><path d='M270 130c1.4 3 4 5 4 8a4 4 0 0 1-8 0c0-3 2.6-5 4-8Z'/></g></svg>");

  /* The festival night behind the footer, winners, splash and login:
     garland light warming the water at its foot, its reflections broken
     into short trembling strokes */
  --night-glints: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='80' viewBox='0 0 360 80'><g stroke-linecap='round' stroke-width='2.2'><path d='M22 10h16M26 20h11M18 30h19M26 41h9M22 52h14M29 63h6M26 72h9' stroke='%23ffc457' stroke-opacity='0.55'/><path d='M142 10h16M146 20h11M138 30h19M146 41h9M142 52h14M149 63h6M146 72h9' stroke='%23ff7aa0' stroke-opacity='0.4'/><path d='M254 10h16M258 20h11M250 30h19M258 41h9M254 52h14M261 63h6M258 72h9' stroke='%23ffc457' stroke-opacity='0.5'/><path d='M322 10h16M326 20h11M318 30h19M326 41h9M322 52h14M329 63h6M326 72h9' stroke='%23f3f1ea' stroke-opacity='0.3'/></g></svg>");
  --night-bg:
    radial-gradient(620px 220px at 50% 115%, rgba(255, 190, 90, .26), transparent 70%),
    radial-gradient(420px 240px at 92% -60px, rgba(232, 70, 111, .2), transparent 70%),
    radial-gradient(380px 220px at 6% -40px, rgba(58, 174, 192, .22), transparent 70%),
    linear-gradient(180deg, #091723 0%, #0e2433 58%, #133248 100%);

  /* A phuang malai pendant, 46×100: a loop of jasmine buds, a marigold
     knot and a rose, ribbon tails and a tassel of buds */
  --malai: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 100'><path d='M23 0V8' stroke='%23c7d0d9' stroke-width='1.4'/><g fill='%23fffdf5' stroke='%230b1b28' stroke-opacity='.25' stroke-width='.6'><ellipse cx='23' cy='10' rx='2.6' ry='3.6'/><ellipse cx='18' cy='13' rx='2.6' ry='3.6' transform='rotate(40 18 13)'/><ellipse cx='28' cy='13' rx='2.6' ry='3.6' transform='rotate(-40 28 13)'/><ellipse cx='14' cy='19' rx='2.6' ry='3.6' transform='rotate(20 14 19)'/><ellipse cx='32' cy='19' rx='2.6' ry='3.6' transform='rotate(-20 32 19)'/><ellipse cx='12.6' cy='26' rx='2.6' ry='3.6'/><ellipse cx='33.4' cy='26' rx='2.6' ry='3.6'/><ellipse cx='13.4' cy='33' rx='2.6' ry='3.6' transform='rotate(-16 13.4 33)'/><ellipse cx='32.6' cy='33' rx='2.6' ry='3.6' transform='rotate(16 32.6 33)'/><ellipse cx='16.4' cy='39' rx='2.6' ry='3.6' transform='rotate(-36 16.4 39)'/><ellipse cx='29.6' cy='39' rx='2.6' ry='3.6' transform='rotate(36 29.6 39)'/></g><path d='M21 50C19 62 15 72 12 82L16 83C19 72 22 62 23 52Z' fill='%23e8466f'/><path d='M25 50C27 62 31 72 34 82L30 83C27 72 24 62 23 52Z' fill='%2324a389'/><g fill='%23fffdf5' stroke='%230b1b28' stroke-opacity='.25' stroke-width='.6'><ellipse cx='23' cy='62' rx='2.2' ry='3.6'/><ellipse cx='23' cy='70' rx='2.2' ry='3.6'/><ellipse cx='23' cy='78' rx='2.2' ry='3.6'/><ellipse cx='23' cy='86' rx='2' ry='3.4'/></g><circle cx='23' cy='44' r='7.4' fill='%23f08c12'/><g fill='%23ffc23d'><circle cx='20.4' cy='41.6' r='2.8'/><circle cx='26' cy='42.2' r='2.6'/><circle cx='23' cy='47' r='2.8'/></g><circle cx='23' cy='54' r='4.6' fill='%23e0386b'/><path d='M20.8 53.4q2.2-2.6 4.4 0' fill='none' stroke='%23ff94b3' stroke-width='1.2'/><circle cx='23' cy='96' r='2.4' fill='%23f08c12'/></svg>");
  /* The same pendant with room either side, for a row of them */
  --malai-row: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-24 0 94 100'><path d='M23 0V8' stroke='%23c7d0d9' stroke-width='1.4'/><g fill='%23fffdf5' stroke='%230b1b28' stroke-opacity='.25' stroke-width='.6'><ellipse cx='23' cy='10' rx='2.6' ry='3.6'/><ellipse cx='18' cy='13' rx='2.6' ry='3.6' transform='rotate(40 18 13)'/><ellipse cx='28' cy='13' rx='2.6' ry='3.6' transform='rotate(-40 28 13)'/><ellipse cx='14' cy='19' rx='2.6' ry='3.6' transform='rotate(20 14 19)'/><ellipse cx='32' cy='19' rx='2.6' ry='3.6' transform='rotate(-20 32 19)'/><ellipse cx='12.6' cy='26' rx='2.6' ry='3.6'/><ellipse cx='33.4' cy='26' rx='2.6' ry='3.6'/><ellipse cx='13.4' cy='33' rx='2.6' ry='3.6' transform='rotate(-16 13.4 33)'/><ellipse cx='32.6' cy='33' rx='2.6' ry='3.6' transform='rotate(16 32.6 33)'/><ellipse cx='16.4' cy='39' rx='2.6' ry='3.6' transform='rotate(-36 16.4 39)'/><ellipse cx='29.6' cy='39' rx='2.6' ry='3.6' transform='rotate(36 29.6 39)'/></g><path d='M21 50C19 62 15 72 12 82L16 83C19 72 22 62 23 52Z' fill='%23e8466f'/><path d='M25 50C27 62 31 72 34 82L30 83C27 72 24 62 23 52Z' fill='%2324a389'/><g fill='%23fffdf5' stroke='%230b1b28' stroke-opacity='.25' stroke-width='.6'><ellipse cx='23' cy='62' rx='2.2' ry='3.6'/><ellipse cx='23' cy='70' rx='2.2' ry='3.6'/><ellipse cx='23' cy='78' rx='2.2' ry='3.6'/><ellipse cx='23' cy='86' rx='2' ry='3.4'/></g><circle cx='23' cy='44' r='7.4' fill='%23f08c12'/><g fill='%23ffc23d'><circle cx='20.4' cy='41.6' r='2.8'/><circle cx='26' cy='42.2' r='2.6'/><circle cx='23' cy='47' r='2.8'/></g><circle cx='23' cy='54' r='4.6' fill='%23e0386b'/><path d='M20.8 53.4q2.2-2.6 4.4 0' fill='none' stroke='%23ff94b3' stroke-width='1.2'/><circle cx='23' cy='96' r='2.4' fill='%23f08c12'/></svg>");

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

html.dark {
  --paper:        #0c1924;
  --paper-2:      #132433;
  --paper-3:      #1b3144;
  --ink:          #f3f1ea;
  --ink-2:        #d9d6cc;
  --ink-soft:     #9cb0bb;
  --rule:         rgba(243, 241, 234, 0.13);
  --rule-soft:    rgba(243, 241, 234, 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);

  /* Garland light */
  --theme-50:  #1a2a33;
  --theme-100: #24363f;
  --theme-200: #5d5233;
  --theme-300: #ffdc96;
  --theme-400: #ffd078;
  --theme-500: #ffc457;
  --theme-600: #ffcb68;
  --theme-700: #ffd98c;
  --theme-800: #ffe8bb;
  --theme-900: #fff5df;
  --theme-500-rgb: 255, 196, 87;
  --theme-600-rgb: 255, 203, 104;

  --gold:       #ffc457;
  --gold-2:     #ffd98c;
  --gold-soft:  rgba(255, 196, 87, 0.12);
  --felt:       #08131c;
  --felt-2:     #132433;
  --peacock:    #4fd1b0;
  --peacock-soft: rgba(79, 209, 176, 0.13);
  --red:        #ff7a9a;
  --red-soft:   rgba(255, 122, 154, 0.13);
  --rose:       #ff7a9a;
  --rose-soft:  rgba(255, 196, 87, 0.12);

  --nav-accent:    var(--theme-500);
  --hdr-strip-bg:  #08131c;

  --btn-bg:       #ffc457;
  --btn-bg-hover: #ffd27a;
  --btn-ink:      #0c1924;
  --btn-shadow:   0 2px 0 #b07a1f, 0 10px 26px -10px rgba(255, 196, 87, .45);
  --btn-shadow-hover: 0 3px 0 #b07a1f, 0 14px 30px -10px rgba(255, 196, 87, .6);

  --sin: var(--sin-night);
  --ripples-faint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23f3f1ea' stroke-opacity='.045' stroke-width='1.3'><ellipse cx='80' cy='90' rx='18' ry='6'/><ellipse cx='80' cy='90' rx='36' ry='12'/><ellipse cx='228' cy='226' rx='14' ry='5'/><ellipse cx='228' cy='226' rx='30' ry='10'/></g><g stroke-linecap='round' stroke-width='1.6'><path d='M190 60h8M186 68h12' stroke='%23ffc457' stroke-opacity='.12'/><path d='M50 200h10M54 208h6' stroke='%23ff7aa0' stroke-opacity='.1'/></g></svg>");
  --page-bg:
    radial-gradient(900px 420px at 86% -160px, rgba(255, 190, 90, 0.07), transparent 70%) no-repeat,
    radial-gradient(900px 420px at 8% -140px, rgba(58, 174, 192, 0.09), transparent 70%) no-repeat,
    var(--ripples-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 Songkran at a glance:
   - the pha sin hem (--sin above) along the top of sheets, a narrow
     cousin (--sin-thin) for table heads, tabs and toasts, and the hem
     turned on its side (--sin-v) for a leading edge;
   - the chased silver of a khan: a beaded rim (--sk-beads) round frames
     and the chosen option, the bowl seen from above with water in it
     (--sk-bowl-top, --sk-bowl-relief) for icon medallions, and plain
     polished silver (--sk-silver-grad) for coins and plates;
   - a string of jasmine buds with a marigold knot (--sk-jasmine) for
     rules under titles and across modals;
   - water: a drop (--sk-drop) for the current page and list markers,
     ripple rings (--sk-rings) behind drawings, a pool (--sk-pool) for
     products to float on, and the run of water (--sk-flow) that fills
     progress bars;
   - a spray of dok khun blossoms (--sk-dokkhun) hung from section heads;
   - the riverside market's tiled roofs on stilts (--sk-roofs-day,
     --sk-roofs-dusk) along the foot of night panels and error scenes;
   - a frangipani (--sk-frangipani) for ticks, stamps and chips. */
:root {
  --sk-c1: #0a86c6; --sk-c2: #e8466f; --sk-c3: #f59e1b; --sk-c4: #24a389; --sk-c5: #8b97a5;
  --sk-water-ink: #075f91; --sk-jade-ink: #16735f; --sk-rose-ink: #b52a52; --sk-marigold-ink: #9a5a00; --sk-silver-ink: #4d5966;
  --sk-water-soft: rgba(10, 134, 198, .1); --sk-jade-soft: rgba(36, 163, 137, .12); --sk-rose-soft: rgba(232, 70, 111, .1); --sk-marigold-soft: rgba(245, 158, 27, .16); --sk-silver-soft: rgba(139, 151, 165, .14);
  --theme-600-ink: #ffffff;

  --sin-thin-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><rect width='24' height='8' fill='%230a7fbf'/><rect width='24' height='1.4' fill='%23e8466f'/><rect y='1.9' width='24' height='.9' fill='%23f59e1b'/><rect y='5.2' width='24' height='.9' fill='%23f59e1b'/><rect y='6.6' width='24' height='1.4' fill='%2324a389'/><path d='M6 2.8L7.2 4L6 5.2L4.8 4Z' fill='%23fffdf5'/><path d='M18 3L19 4L18 5L17 4Z' fill='%23ffc23d'/></svg>");
  --sin-thin: var(--sin-thin-img) repeat-x left center / 24px 8px;
  --sin-v-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'><rect width='8' height='24' fill='%230a7fbf'/><rect width='1.4' height='24' fill='%23e8466f'/><rect x='1.9' width='.9' height='24' fill='%23f59e1b'/><rect x='5.2' width='.9' height='24' fill='%23f59e1b'/><rect x='6.6' width='1.4' height='24' fill='%2324a389'/><path d='M4 4.8L5.2 6L4 7.2L2.8 6Z' fill='%23fffdf5'/><path d='M4 17L5 18L4 19L3 18Z' fill='%23ffc23d'/></svg>");
  --sin-v: var(--sin-v-img) repeat-y center top / 8px 24px;

  --sk-beads-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><rect width='12' height='8' fill='%23dfe5eb'/><rect width='12' height='1.2' fill='%23ffffff'/><rect y='6.8' width='12' height='1.2' fill='%238b97a5'/><circle cx='6' cy='4' r='2' fill='%23ffffff'/><circle cx='6.6' cy='4.6' r='1.6' fill='%238b97a5' fill-opacity='.6'/><circle cx='5.6' cy='3.5' r='.9' fill='%23ffffff'/></svg>");
  --sk-beads: var(--sk-beads-img) repeat-x left center / 12px 8px;
  --sk-silver-grad: linear-gradient(100deg, #8b97a5 0%, #d5dce4 22%, #ffffff 38%, #d5dce4 60%, #8b97a5 88%, #66727f 100%);
  /* A khan seen from above: water inside a chased silver lip */
  --sk-bowl-top:
    radial-gradient(circle at 42% 36%, rgba(255, 255, 255, .7) 0 10%, transparent 26%),
    radial-gradient(circle, #5cc2d4 0 50%, #ffffff 52% 55%, #b8c2cc 57% 62%, #eef2f6 64% 70%, #8b97a5 74% 100%);
  --sk-bowl-relief: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px rgba(102, 114, 127, .45), 0 3px 0 rgba(102, 114, 127, .35), 0 8px 14px -8px rgba(15, 47, 59, .45);
  /* The beaded rim as a ring round a frame or a chosen option */
  --sk-rim: 0 0 0 2px #ffffff, 0 0 0 4px #b8c2cc, 0 0 0 5px #8b97a5, 0 10px 22px -12px rgba(15, 47, 59, .5);

  --sk-jasmine-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'><path d='M0 7Q10 10 20 7T40 7' fill='none' stroke='%23c7d0d9' stroke-width='.8'/><g fill='%23fffdf5' stroke='%230f2f3b' stroke-opacity='.3' stroke-width='.6'><ellipse cx='5' cy='7.6' rx='3.4' ry='1.9' transform='rotate(12 5 7.6)'/><ellipse cx='13' cy='8.4' rx='3.4' ry='1.9' transform='rotate(-6 13 8.4)'/><ellipse cx='25' cy='6.4' rx='3.4' ry='1.9' transform='rotate(-12 25 6.4)'/><ellipse cx='33' cy='6' rx='3.4' ry='1.9' transform='rotate(8 33 6)'/></g><circle cx='19.6' cy='7.2' r='2.6' fill='%23f08c12'/><circle cx='19' cy='6.4' r='1' fill='%23ffc23d'/></svg>");
  --sk-jasmine: var(--sk-jasmine-img) repeat-x left center / 40px 14px;
  --sk-drop-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'><path d='M20 2C24 11 37 20 37 30C37 39 29 44 20 44C11 44 3 39 3 30C3 20 16 11 20 2Z' fill='%230a86c6'/><path d='M10 28C9.6 33 12.4 37 16.6 39' fill='none' stroke='%23ffffff' stroke-opacity='.75' stroke-width='2.6' stroke-linecap='round'/></svg>");
  --sk-drop: var(--sk-drop-img) center / contain no-repeat;
  --sk-frangipani-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'><g fill='%23fffdf5' stroke='%230f2f3b' stroke-opacity='.3' stroke-width='.7'><path d='M0 0C-4 -3 -6 -8.6 -1.6 -10.8C2.6 -12.4 6.4 -10 6 -6.2C5.6 -3 2.4 -1 0 0Z'/><path transform='rotate(72)' d='M0 0C-4 -3 -6 -8.6 -1.6 -10.8C2.6 -12.4 6.4 -10 6 -6.2C5.6 -3 2.4 -1 0 0Z'/><path transform='rotate(144)' d='M0 0C-4 -3 -6 -8.6 -1.6 -10.8C2.6 -12.4 6.4 -10 6 -6.2C5.6 -3 2.4 -1 0 0Z'/><path transform='rotate(216)' d='M0 0C-4 -3 -6 -8.6 -1.6 -10.8C2.6 -12.4 6.4 -10 6 -6.2C5.6 -3 2.4 -1 0 0Z'/><path transform='rotate(288)' d='M0 0C-4 -3 -6 -8.6 -1.6 -10.8C2.6 -12.4 6.4 -10 6 -6.2C5.6 -3 2.4 -1 0 0Z'/></g><circle r='3.4' fill='%23ffc23d'/><circle r='1.5' fill='%23f59e1b'/></svg>");
  --sk-frangipani: var(--sk-frangipani-img) center / contain no-repeat;
  --sk-rings-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'><g fill='none' stroke='%230a86c6' stroke-width='1.6'><ellipse cx='100' cy='60' rx='38' ry='11' stroke-opacity='.5'/><ellipse cx='100' cy='60' rx='64' ry='19' stroke-opacity='.32'/><ellipse cx='100' cy='60' rx='92' ry='28' stroke-opacity='.16'/></g></svg>");
  --sk-rings: var(--sk-rings-img) center / contain no-repeat;
  --sk-dokkhun: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='30' viewBox='0 0 72 30'><path d='M0 2Q36 6 72 2' fill='none' stroke='%238a7a2a' stroke-width='1.2'/><g fill='%23ffd23f'><circle cx='14' cy='7' r='3'/><circle cx='12' cy='12' r='2.6'/><circle cx='15' cy='16.5' r='2.2'/><circle cx='13' cy='20.5' r='1.8'/><circle cx='15' cy='24' r='1.3'/><circle cx='50' cy='7' r='3'/><circle cx='52' cy='12' r='2.6'/><circle cx='49' cy='16' r='2.1'/><circle cx='51' cy='20' r='1.6'/></g><g fill='%23f2b705'><circle cx='14' cy='7' r='1.1'/><circle cx='12' cy='12' r='.9'/><circle cx='50' cy='7' r='1.1'/><circle cx='52' cy='12' r='.9'/></g><path d='M30 3c3-2 7-2 9 0-3 2-6 2-9 0Z' fill='%232fa36f'/></svg>") repeat-x left top / 72px 30px;
  --sk-pool:
    radial-gradient(60% 40% at 50% 62%, rgba(255, 255, 255, .9), transparent 70%),
    repeating-radial-gradient(ellipse at 50% 64%, transparent 0 18px, rgba(10, 134, 198, .07) 18px 19.5px),
    linear-gradient(180deg, #eaf7f8, #d3eff1);
  --sk-flow: linear-gradient(90deg, #8fdbe6, #3aaec0 45%, #0a86c6);
  /* A product floating in a khan on the basin: the bowl's water and
     chased lip low in the frame, the basin's ripples round it */
  --sk-float:
    radial-gradient(ellipse 30% 6% at 50% 89%, rgba(15, 47, 59, .12) 0 60%, transparent 62%),
    radial-gradient(ellipse 28% 6.5% at 50% 85%, #a6e3ec 0 56%, #ffffff 58% 64%, #c3ccd5 66% 78%, #8b97a5 80% 90%, transparent 92%),
    var(--sk-pool);
  --sk-paper-weave: repeating-linear-gradient(90deg, rgba(10, 127, 191, .025) 0 2px, transparent 2px 6px), repeating-linear-gradient(0deg, rgba(10, 127, 191, .025) 0 2px, transparent 2px 6px);

  --sk-roofs-day: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='72' viewBox='0 0 560 72'><path d='M6.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M35.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M64.0 60V72' stroke='%23a8744a' stroke-width='3'/><rect x='4' y='34' width='62' height='26' fill='%23f1dcc0'/><rect x='13.5' y='42' width='12' height='14' fill='%23c99a6a'/><path d='M19.5 42v14' stroke='%23a8744a' stroke-width='1'/><rect x='44.5' y='42' width='12' height='14' fill='%23c99a6a'/><path d='M50.5 42v14' stroke='%23a8744a' stroke-width='1'/><path d='M-4 36L35.0 12L74 36Z' fill='%23d58a66'/><path d='M25.2 18.5H44.8' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M15.5 24.0H54.5' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M5.8 29.5H64.2' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M-6 37L35.0 11L76 37' fill='none' stroke='%237a4f2e' stroke-width='2' stroke-linejoin='round'/><path d='M0 60H70' stroke='%23a8744a' stroke-width='2.4'/><path d='M80.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M120.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M160.0 60V72' stroke='%23a8744a' stroke-width='3'/><rect x='78' y='26' width='84' height='34' fill='%23e6caa6'/><rect x='86.0' y='34' width='12' height='14' fill='%23c99a6a'/><path d='M92.0 34v14' stroke='%23a8744a' stroke-width='1'/><rect x='114.0' y='34' width='12' height='14' fill='%23c99a6a'/><path d='M120.0 34v14' stroke='%23a8744a' stroke-width='1'/><rect x='142.0' y='34' width='12' height='14' fill='%23c99a6a'/><path d='M148.0 34v14' stroke='%23a8744a' stroke-width='1'/><path d='M70 28L120.0 0L170 28Z' fill='%23bf6f4c'/><path d='M107.5 7.5H132.5' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M95.0 14.0H145.0' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M82.5 20.5H157.5' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M68 29L120.0 -1L172 29' fill='none' stroke='%237a4f2e' stroke-width='2' stroke-linejoin='round'/><path d='M74 60H166' stroke='%23a8744a' stroke-width='2.4'/><path d='M176.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M200.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M224.0 60V72' stroke='%23a8744a' stroke-width='3'/><rect x='174' y='38' width='52' height='22' fill='%23f1dcc0'/><rect x='181.0' y='46' width='12' height='10' fill='%23c99a6a'/><path d='M187.0 46v10' stroke='%23a8744a' stroke-width='1'/><rect x='207.0' y='46' width='12' height='10' fill='%23c99a6a'/><path d='M213.0 46v10' stroke='%23a8744a' stroke-width='1'/><path d='M166 40L200.0 20L234 40Z' fill='%23d58a66'/><path d='M191.5 25.5H208.5' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M183.0 30.0H217.0' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M174.5 34.5H225.5' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M164 41L200.0 19L236 41' fill='none' stroke='%237a4f2e' stroke-width='2' stroke-linejoin='round'/><path d='M170 60H230' stroke='%23a8744a' stroke-width='2.4'/><path d='M240.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M286.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M332.0 60V72' stroke='%23a8744a' stroke-width='3'/><rect x='238' y='30' width='96' height='30' fill='%23e6caa6'/><rect x='244.0' y='38' width='12' height='14' fill='%23c99a6a'/><path d='M250.0 38v14' stroke='%23a8744a' stroke-width='1'/><rect x='268.0' y='38' width='12' height='14' fill='%23c99a6a'/><path d='M274.0 38v14' stroke='%23a8744a' stroke-width='1'/><rect x='292.0' y='38' width='12' height='14' fill='%23c99a6a'/><path d='M298.0 38v14' stroke='%23a8744a' stroke-width='1'/><rect x='316.0' y='38' width='12' height='14' fill='%23c99a6a'/><path d='M322.0 38v14' stroke='%23a8744a' stroke-width='1'/><path d='M230 32L286.0 6L342 32Z' fill='%23bf6f4c'/><path d='M272.0 13.0H300.0' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M258.0 19.0H314.0' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M244.0 25.0H328.0' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M228 33L286.0 5L344 33' fill='none' stroke='%237a4f2e' stroke-width='2' stroke-linejoin='round'/><path d='M234 60H338' stroke='%23a8744a' stroke-width='2.4'/><path d='M348.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M375.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M402.0 60V72' stroke='%23a8744a' stroke-width='3'/><rect x='346' y='36' width='58' height='24' fill='%23f1dcc0'/><rect x='354.5' y='44' width='12' height='12' fill='%23c99a6a'/><path d='M360.5 44v12' stroke='%23a8744a' stroke-width='1'/><rect x='383.5' y='44' width='12' height='12' fill='%23c99a6a'/><path d='M389.5 44v12' stroke='%23a8744a' stroke-width='1'/><path d='M338 38L375.0 16L412 38Z' fill='%23d58a66'/><path d='M365.8 22.0H384.2' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M356.5 27.0H393.5' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M347.2 32.0H402.8' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M336 39L375.0 15L414 39' fill='none' stroke='%237a4f2e' stroke-width='2' stroke-linejoin='round'/><path d='M342 60H408' stroke='%23a8744a' stroke-width='2.4'/><path d='M418.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M457.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M496.0 60V72' stroke='%23a8744a' stroke-width='3'/><rect x='416' y='28' width='82' height='32' fill='%23e6caa6'/><rect x='423.7' y='36' width='12' height='14' fill='%23c99a6a'/><path d='M429.7 36v14' stroke='%23a8744a' stroke-width='1'/><rect x='451.0' y='36' width='12' height='14' fill='%23c99a6a'/><path d='M457.0 36v14' stroke='%23a8744a' stroke-width='1'/><rect x='478.3' y='36' width='12' height='14' fill='%23c99a6a'/><path d='M484.3 36v14' stroke='%23a8744a' stroke-width='1'/><path d='M408 30L457.0 2L506 30Z' fill='%23bf6f4c'/><path d='M444.8 9.5H469.2' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M432.5 16.0H481.5' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M420.2 22.5H493.8' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M406 31L457.0 1L508 31' fill='none' stroke='%237a4f2e' stroke-width='2' stroke-linejoin='round'/><path d='M412 60H502' stroke='%23a8744a' stroke-width='2.4'/><path d='M512.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M533.0 60V72' stroke='%23a8744a' stroke-width='3'/><path d='M554.0 60V72' stroke='%23a8744a' stroke-width='3'/><rect x='510' y='36' width='46' height='24' fill='%23f1dcc0'/><rect x='515.5' y='44' width='12' height='12' fill='%23c99a6a'/><path d='M521.5 44v12' stroke='%23a8744a' stroke-width='1'/><rect x='538.5' y='44' width='12' height='12' fill='%23c99a6a'/><path d='M544.5 44v12' stroke='%23a8744a' stroke-width='1'/><path d='M502 38L533.0 18L564 38Z' fill='%23d58a66'/><path d='M525.2 23.5H540.8' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M517.5 28.0H548.5' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M509.8 32.5H556.2' stroke='%23a54b2a' stroke-opacity='.5' stroke-width='1'/><path d='M500 39L533.0 17L566 39' fill='none' stroke='%237a4f2e' stroke-width='2' stroke-linejoin='round'/><path d='M506 60H560' stroke='%23a8744a' stroke-width='2.4'/><path d='M74 37Q72.0 51.0 70 29' fill='none' stroke='%23c7d0d9' stroke-opacity='.7' stroke-width='.8'/><circle cx='72.8' cy='44.2' r='1.8' fill='%23fffdf5'/><circle cx='71.2' cy='41.0' r='1.8' fill='%23fffdf5'/><path d='M170 29Q168.0 55.0 166 41' fill='none' stroke='%23c7d0d9' stroke-opacity='.7' stroke-width='.8'/><circle cx='168.8' cy='43.0' r='1.8' fill='%23fffdf5'/><circle cx='167.2' cy='47.8' r='1.8' fill='%23fffdf5'/><path d='M234 41Q232.0 55.0 230 33' fill='none' stroke='%23c7d0d9' stroke-opacity='.7' stroke-width='.8'/><circle cx='232.8' cy='48.2' r='1.8' fill='%23fffdf5'/><circle cx='231.2' cy='45.0' r='1.8' fill='%23fffdf5'/><path d='M342 33Q340.0 53.0 338 39' fill='none' stroke='%23c7d0d9' stroke-opacity='.7' stroke-width='.8'/><circle cx='340.8' cy='43.9' r='1.8' fill='%23fffdf5'/><circle cx='339.2' cy='46.3' r='1.8' fill='%23fffdf5'/><path d='M412 39Q410.0 53.0 408 31' fill='none' stroke='%23c7d0d9' stroke-opacity='.7' stroke-width='.8'/><circle cx='410.8' cy='46.2' r='1.8' fill='%23fffdf5'/><circle cx='409.2' cy='43.0' r='1.8' fill='%23fffdf5'/><path d='M506 31Q504.0 53.0 502 39' fill='none' stroke='%23c7d0d9' stroke-opacity='.7' stroke-width='.8'/><circle cx='504.8' cy='43.0' r='1.8' fill='%23fffdf5'/><circle cx='503.2' cy='46.2' r='1.8' fill='%23fffdf5'/><rect y='62' width='560' height='10' fill='%239fd8e2'/><path d='M6 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M46 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M86 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M126 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M166 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M206 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M246 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M286 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M326 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M366 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M406 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M446 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M486 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M526 66h14' stroke='%23ffffff' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/></svg>");
  --sk-roofs-dusk: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='72' viewBox='0 0 560 72'><path d='M6.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M35.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M64.0 60V72' stroke='%230a1824' stroke-width='3'/><rect x='4' y='34' width='62' height='26' fill='%23102435'/><rect x='13.5' y='42' width='12' height='14' fill='%23ffd98c'/><rect x='44.5' y='42' width='12' height='14' fill='%230c1c2a' fill-opacity='0'/><path d='M-4 36L35.0 12L74 36Z' fill='%230a1824'/><path d='M-6 37L35.0 11L76 37' fill='none' stroke='%231b3449' stroke-width='2' stroke-linejoin='round'/><path d='M0 60H70' stroke='%230a1824' stroke-width='2.4'/><path d='M80.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M120.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M160.0 60V72' stroke='%230a1824' stroke-width='3'/><rect x='78' y='26' width='84' height='34' fill='%230c1c2a'/><rect x='86.0' y='34' width='12' height='14' fill='%23102435' fill-opacity='0'/><rect x='114.0' y='34' width='12' height='14' fill='%23ffd98c'/><rect x='142.0' y='34' width='12' height='14' fill='%23ffc457'/><path d='M70 28L120.0 0L170 28Z' fill='%2313293a'/><path d='M68 29L120.0 -1L172 29' fill='none' stroke='%231b3449' stroke-width='2' stroke-linejoin='round'/><path d='M74 60H166' stroke='%230a1824' stroke-width='2.4'/><path d='M176.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M200.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M224.0 60V72' stroke='%230a1824' stroke-width='3'/><rect x='174' y='38' width='52' height='22' fill='%23102435'/><rect x='181.0' y='46' width='12' height='10' fill='%23ffd98c'/><rect x='207.0' y='46' width='12' height='10' fill='%23ffc457'/><path d='M166 40L200.0 20L234 40Z' fill='%230a1824'/><path d='M164 41L200.0 19L236 41' fill='none' stroke='%231b3449' stroke-width='2' stroke-linejoin='round'/><path d='M170 60H230' stroke='%230a1824' stroke-width='2.4'/><path d='M240.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M286.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M332.0 60V72' stroke='%230a1824' stroke-width='3'/><rect x='238' y='30' width='96' height='30' fill='%230c1c2a'/><rect x='244.0' y='38' width='12' height='14' fill='%23ffc457'/><rect x='268.0' y='38' width='12' height='14' fill='%23102435' fill-opacity='0'/><rect x='292.0' y='38' width='12' height='14' fill='%23ffc457'/><rect x='316.0' y='38' width='12' height='14' fill='%23ffd98c'/><path d='M230 32L286.0 6L342 32Z' fill='%2313293a'/><path d='M228 33L286.0 5L344 33' fill='none' stroke='%231b3449' stroke-width='2' stroke-linejoin='round'/><path d='M234 60H338' stroke='%230a1824' stroke-width='2.4'/><path d='M348.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M375.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M402.0 60V72' stroke='%230a1824' stroke-width='3'/><rect x='346' y='36' width='58' height='24' fill='%23102435'/><rect x='354.5' y='44' width='12' height='12' fill='%230c1c2a' fill-opacity='0'/><rect x='383.5' y='44' width='12' height='12' fill='%23ffc457'/><path d='M338 38L375.0 16L412 38Z' fill='%230a1824'/><path d='M336 39L375.0 15L414 39' fill='none' stroke='%231b3449' stroke-width='2' stroke-linejoin='round'/><path d='M342 60H408' stroke='%230a1824' stroke-width='2.4'/><path d='M418.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M457.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M496.0 60V72' stroke='%230a1824' stroke-width='3'/><rect x='416' y='28' width='82' height='32' fill='%230c1c2a'/><rect x='423.7' y='36' width='12' height='14' fill='%23ffc457'/><rect x='451.0' y='36' width='12' height='14' fill='%23ffd98c'/><rect x='478.3' y='36' width='12' height='14' fill='%23102435' fill-opacity='0'/><path d='M408 30L457.0 2L506 30Z' fill='%2313293a'/><path d='M406 31L457.0 1L508 31' fill='none' stroke='%231b3449' stroke-width='2' stroke-linejoin='round'/><path d='M412 60H502' stroke='%230a1824' stroke-width='2.4'/><path d='M512.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M533.0 60V72' stroke='%230a1824' stroke-width='3'/><path d='M554.0 60V72' stroke='%230a1824' stroke-width='3'/><rect x='510' y='36' width='46' height='24' fill='%23102435'/><rect x='515.5' y='44' width='12' height='12' fill='%23ffd98c'/><rect x='538.5' y='44' width='12' height='12' fill='%230c1c2a' fill-opacity='0'/><path d='M502 38L533.0 18L564 38Z' fill='%230a1824'/><path d='M500 39L533.0 17L566 39' fill='none' stroke='%231b3449' stroke-width='2' stroke-linejoin='round'/><path d='M506 60H560' stroke='%230a1824' stroke-width='2.4'/><path d='M74 37Q72.0 51.0 70 29' fill='none' stroke='%238b97a5' stroke-opacity='.7' stroke-width='.8'/><circle cx='72.8' cy='44.2' r='3.6' fill='%23ffd078' fill-opacity='.35'/><circle cx='72.8' cy='44.2' r='1.8' fill='%23ffd078'/><circle cx='71.2' cy='41.0' r='3.6' fill='%23ffd078' fill-opacity='.35'/><circle cx='71.2' cy='41.0' r='1.8' fill='%23ffd078'/><path d='M170 29Q168.0 55.0 166 41' fill='none' stroke='%238b97a5' stroke-opacity='.7' stroke-width='.8'/><circle cx='168.8' cy='43.0' r='3.6' fill='%23ff9ab6' fill-opacity='.35'/><circle cx='168.8' cy='43.0' r='1.8' fill='%23ff9ab6'/><circle cx='167.2' cy='47.8' r='3.6' fill='%23ff9ab6' fill-opacity='.35'/><circle cx='167.2' cy='47.8' r='1.8' fill='%23ff9ab6'/><path d='M234 41Q232.0 55.0 230 33' fill='none' stroke='%238b97a5' stroke-opacity='.7' stroke-width='.8'/><circle cx='232.8' cy='48.2' r='3.6' fill='%23ffd078' fill-opacity='.35'/><circle cx='232.8' cy='48.2' r='1.8' fill='%23ffd078'/><circle cx='231.2' cy='45.0' r='3.6' fill='%23ffd078' fill-opacity='.35'/><circle cx='231.2' cy='45.0' r='1.8' fill='%23ffd078'/><path d='M342 33Q340.0 53.0 338 39' fill='none' stroke='%238b97a5' stroke-opacity='.7' stroke-width='.8'/><circle cx='340.8' cy='43.9' r='3.6' fill='%23ff9ab6' fill-opacity='.35'/><circle cx='340.8' cy='43.9' r='1.8' fill='%23ff9ab6'/><circle cx='339.2' cy='46.3' r='3.6' fill='%23ff9ab6' fill-opacity='.35'/><circle cx='339.2' cy='46.3' r='1.8' fill='%23ff9ab6'/><path d='M412 39Q410.0 53.0 408 31' fill='none' stroke='%238b97a5' stroke-opacity='.7' stroke-width='.8'/><circle cx='410.8' cy='46.2' r='3.6' fill='%23ffd078' fill-opacity='.35'/><circle cx='410.8' cy='46.2' r='1.8' fill='%23ffd078'/><circle cx='409.2' cy='43.0' r='3.6' fill='%23ffd078' fill-opacity='.35'/><circle cx='409.2' cy='43.0' r='1.8' fill='%23ffd078'/><path d='M506 31Q504.0 53.0 502 39' fill='none' stroke='%238b97a5' stroke-opacity='.7' stroke-width='.8'/><circle cx='504.8' cy='43.0' r='3.6' fill='%23ff9ab6' fill-opacity='.35'/><circle cx='504.8' cy='43.0' r='1.8' fill='%23ff9ab6'/><circle cx='503.2' cy='46.2' r='3.6' fill='%23ff9ab6' fill-opacity='.35'/><circle cx='503.2' cy='46.2' r='1.8' fill='%23ff9ab6'/><rect y='62' width='560' height='10' fill='%230e2a3d'/><path d='M6 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M46 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M86 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M126 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M166 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M206 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M246 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M286 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M326 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M366 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M406 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M446 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M486 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/><path d='M526 66h14' stroke='%23ffc457' stroke-opacity='.5' stroke-width='1.4' stroke-linecap='round'/></svg>");
}
html.dark {
  --sk-c1: #2f9bd3; --sk-c2: #ff7a9a; --sk-c3: #ffc457; --sk-c4: #4fd1b0; --sk-c5: #c7d0d9;
  --sk-water-ink: #8fd3ef; --sk-jade-ink: #6fdcc0; --sk-rose-ink: #ff9ab6; --sk-marigold-ink: #ffd078; --sk-silver-ink: #c7d0d9;
  --sk-water-soft: rgba(143, 211, 239, .1); --sk-jade-soft: rgba(79, 209, 176, .12); --sk-rose-soft: rgba(255, 122, 154, .12); --sk-marigold-soft: rgba(255, 196, 87, .13); --sk-silver-soft: rgba(199, 208, 217, .1);
  --theme-600-ink: #0c1924;
  --sk-beads-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><rect width='12' height='8' fill='%23253d52'/><rect width='12' height='1' fill='%234d6377'/><rect y='7' width='12' height='1' fill='%23101f2c'/><circle cx='6' cy='4' r='2' fill='%238b97a5'/><circle cx='5.5' cy='3.4' r='.8' fill='%23c7d0d9'/></svg>");

  --sin-thin-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'><rect width='24' height='8' fill='%23165f8c'/><rect width='24' height='1.4' fill='%23d8456c'/><rect y='1.9' width='24' height='.9' fill='%23ffc457'/><rect y='5.2' width='24' height='.9' fill='%23ffc457'/><rect y='6.6' width='24' height='1.4' fill='%231f8c78'/><path d='M6 2.8L7.2 4L6 5.2L4.8 4Z' fill='%23f3f1ea'/><path d='M18 3L19 4L18 5L17 4Z' fill='%23ffc457'/></svg>");
  --sin-v-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'><rect width='8' height='24' fill='%23165f8c'/><rect width='1.4' height='24' fill='%23d8456c'/><rect x='1.9' width='.9' height='24' fill='%23ffc457'/><rect x='5.2' width='.9' height='24' fill='%23ffc457'/><rect x='6.6' width='1.4' height='24' fill='%231f8c78'/><path d='M4 4.8L5.2 6L4 7.2L2.8 6Z' fill='%23f3f1ea'/><path d='M4 17L5 18L4 19L3 18Z' fill='%23ffc457'/></svg>");
  --sin-v: var(--sin-v-img) repeat-y center top / 8px 24px;
  --sk-bowl-top:
    radial-gradient(circle at 42% 36%, rgba(255, 220, 150, .55) 0 10%, transparent 26%),
    radial-gradient(circle, #16506e 0 50%, #c7d0d9 52% 55%, #6b7785 57% 62%, #aab4bf 64% 70%, #4d5966 74% 100%);
  --sk-bowl-relief: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 1px rgba(0, 0, 0, .4), 0 3px 0 rgba(0, 0, 0, .35), 0 8px 16px -8px rgba(0, 0, 0, .7);
  --sk-rim: 0 0 0 2px #132433, 0 0 0 4px #8b97a5, 0 0 0 5px #4d5966, 0 0 18px -2px rgba(255, 196, 87, .3);
  --sk-jasmine-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'><path d='M0 7Q10 10 20 7T40 7' fill='none' stroke='%238b97a5' stroke-width='.8'/><g fill='%23f3f1ea' fill-opacity='.9'><ellipse cx='5' cy='7.6' rx='3.4' ry='1.9' transform='rotate(12 5 7.6)'/><ellipse cx='13' cy='8.4' rx='3.4' ry='1.9' transform='rotate(-6 13 8.4)'/><ellipse cx='25' cy='6.4' rx='3.4' ry='1.9' transform='rotate(-12 25 6.4)'/><ellipse cx='33' cy='6' rx='3.4' ry='1.9' transform='rotate(8 33 6)'/></g><circle cx='19.6' cy='7.2' r='2.8' fill='%23ffc457'/><circle cx='19.6' cy='7.2' r='4.6' fill='%23ffc457' fill-opacity='.25'/></svg>");
  --sk-drop-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 46'><path d='M20 2C24 11 37 20 37 30C37 39 29 44 20 44C11 44 3 39 3 30C3 20 16 11 20 2Z' fill='%23ffc457'/><path d='M10 28C9.6 33 12.4 37 16.6 39' fill='none' stroke='%23fff5df' stroke-opacity='.85' stroke-width='2.6' stroke-linecap='round'/></svg>");
  --sk-rings-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'><g fill='none' stroke='%23ffc457' stroke-width='1.6'><ellipse cx='100' cy='60' rx='38' ry='11' stroke-opacity='.4'/><ellipse cx='100' cy='60' rx='64' ry='19' stroke-opacity='.24'/><ellipse cx='100' cy='60' rx='92' ry='28' stroke-opacity='.12'/></g></svg>");
  --sk-pool:
    radial-gradient(60% 40% at 50% 62%, rgba(255, 196, 87, .16), transparent 70%),
    repeating-radial-gradient(ellipse at 50% 64%, transparent 0 18px, rgba(243, 241, 234, .05) 18px 19.5px),
    linear-gradient(180deg, #12283a, #0e2131);
  --sk-flow: linear-gradient(90deg, #ffe0a0, #ffc457 50%, #ff9ab6);
  --sk-float:
    radial-gradient(ellipse 30% 6% at 50% 89%, rgba(0, 0, 0, .35) 0 60%, transparent 62%),
    radial-gradient(ellipse 28% 6.5% at 50% 85%, #1d5a78 0 56%, #c7d0d9 58% 64%, #6b7785 66% 78%, #4d5966 80% 90%, transparent 92%),
    var(--sk-pool);
  --sk-paper-weave: repeating-linear-gradient(90deg, rgba(243, 241, 234, .02) 0 2px, transparent 2px 6px), repeating-linear-gradient(0deg, rgba(243, 241, 234, .02) 0 2px, transparent 2px 6px);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board. By day a board
   is a basin of clear water in a silver bowl: jasmine-white cells on pale
   water, the tiles rising from water through jade, marigold and rose to
   the deep blue of the pha sin; after dark the festival night, cells of
   deep river blue and the tiles glowing like the garland bulbs. */
:root {
  --game-bg:        #eaf7f8;
  --game-surface:   #cfe7ee;
  --game-surface-2: #ffffff;
  --game-ink:       #0f2f3b;
  --game-muted:     #5d7a85;
  --game-accent:    #0a7fbf;
  --game-accent-ink:#ffffff;
  --game-good:      #1d8f78;
  --game-bad:       #d23a5f;
  --game-tile-1:    #e4f7f8;
  --game-tile-2:    #a8e3ea;
  --game-tile-3:    #3aaec0;
  --game-tile-4:    #24a389;
  --game-tile-5:    #ffc23d;
  --game-tile-6:    #f59e1b;
  --game-tile-7:    #e8466f;
  --game-tile-8:    #075f91;
  --game-radius:    12px;
  --game-font:      'Mitr', 'Anuphan', 'Trebuchet MS', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/songkran/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): a basin of water, not a dark screen */
  --game-arena-screen: #eaf7f8;
  --game-arena-coins:  #b9790e;
  --game-arena-win:    #1d8f78;
  --game-arena-danger: #d23a5f;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%230a86c6' stroke-opacity='.08' stroke-width='1.3'><ellipse cx='40' cy='40' rx='16' ry='5'/><ellipse cx='40' cy='40' rx='30' ry='10'/><ellipse cx='108' cy='104' rx='12' ry='4'/><ellipse cx='108' cy='104' rx='24' ry='8'/></g><path d='M104 30c1.6 3.4 5 6 5 9a5 5 0 0 1-10 0c0-3 3.4-5.6 5-9Z' fill='%230a86c6' fill-opacity='.08'/></svg>");
  --px-ball-1: #0a86c6; --px-ball-1-hi: #8fdbe6;
  --px-ball-2: #e8466f; --px-ball-2-hi: #ffb3c7;
  --px-ball-3: #f59e1b; --px-ball-3-hi: #ffe0a0;
  --px-ball-4: #24a389; --px-ball-4-hi: #a6ecd9;
  --px-ball-5: #8b97a5; --px-ball-5-hi: #ffffff;
  --px-ball-6: #075f91; --px-ball-6-hi: #66b8e2;
}
html.dark {
  --game-bg:        #0e2131;
  --game-surface:   #0a1824;
  --game-surface-2: #1b3449;
  --game-ink:       #f3f1ea;
  --game-muted:     #9cb0bb;
  --game-accent:    #ffc457;
  --game-accent-ink:#0c1924;
  --game-good:      #4fd1b0;
  --game-bad:       #ff7a9a;
  --game-tile-1:    #16354a;
  --game-tile-2:    #165f8c;
  --game-tile-3:    #1f8c78;
  --game-tile-4:    #3aaec0;
  --game-tile-5:    #d8456c;
  --game-tile-6:    #ff9ab6;
  --game-tile-7:    #ffc457;
  --game-tile-8:    #fff0c9;
  --game-arena-screen: #0e2131;
  --game-arena-coins:  #ffd078;
  --game-arena-win:    #4fd1b0;
  --game-arena-danger: #ff7a9a;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><g fill='none' stroke='%23f3f1ea' stroke-opacity='.05' stroke-width='1.3'><ellipse cx='40' cy='40' rx='16' ry='5'/><ellipse cx='40' cy='40' rx='30' ry='10'/><ellipse cx='108' cy='104' rx='24' ry='8'/></g><g stroke='%23ffc457' stroke-opacity='.14' stroke-width='1.6' stroke-linecap='round'><path d='M96 30h10M100 36h6'/></g></svg>");
  --px-ball-1: #2f9bd3; --px-ball-1-hi: #b8e6f7;
  --px-ball-2: #ff7a9a; --px-ball-2-hi: #ffd0dc;
  --px-ball-3: #ffc457; --px-ball-3-hi: #fff0c9;
  --px-ball-4: #4fd1b0; --px-ball-4-hi: #c6f3e6;
  --px-ball-5: #c7d0d9; --px-ball-5-hi: #ffffff;
  --px-ball-6: #165f8c; --px-ball-6-hi: #8fd3ef;
}

/* ── Base ──
   Tailwind's compiled sheet loads after the theme, so selectors that must
   beat its single-class utilities carry an extra html qualifier. */
html body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: var(--font-ui);
}
html .font-sans { font-family: var(--font-ui); }

html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: -.005em;
}
.display-italic { font-style: normal; }
/* Mitr has no italic and is a headline face: the small italic asides
   shared markup sets in the display face (card blurbs, bid notes) are set
   upright in the UI face instead. */
html .font-display.italic, html .italic.font-display { font-family: var(--font-ui); font-style: normal; font-weight: 500; }
/* 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: 700; letter-spacing: 0; }

::selection { background: #bdeef0; color: #0f2f3b; }

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

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

/* A drop of water, glinting: section eyebrows wear it */
.sk-drop, html .section-eyebrow::before {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'><path d='M10 1C12.4 6.4 19 11 19 16.8C19 22 15 25 10 25C5 25 1 22 1 16.8C1 11 7.6 6.4 10 1Z' fill='%230a86c6'/><path d='M5.4 15.6C5.2 18.6 6.8 20.8 9 22' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/></svg>") center / contain no-repeat;
}
html.dark .sk-drop, html.dark .section-eyebrow::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'><path d='M10 1C12.4 6.4 19 11 19 16.8C19 22 15 25 10 25C5 25 1 22 1 16.8C1 11 7.6 6.4 10 1Z' fill='%23ffc457'/><path d='M5.4 15.6C5.2 18.6 6.8 20.8 9 22' fill='none' stroke='%23fff5df' stroke-width='1.8' stroke-linecap='round'/></svg>");
}
.sk-drop { display: inline-block; flex-shrink: 0; width: 11px; height: 14px; }
/* A frangipani, white with a yellow heart: the hero kicker and season chip */
.sk-flower {
  display: inline-block; flex-shrink: 0; width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23fffdf5' stroke='%230f2f3b' stroke-opacity='.35' stroke-width='3'><path d='M50 50C38 42 34 20 48 8C62 -2 76 10 72 26C68 38 60 45 50 50Z'/><path transform='rotate(72 50 50)' d='M50 50C38 42 34 20 48 8C62 -2 76 10 72 26C68 38 60 45 50 50Z'/><path transform='rotate(144 50 50)' d='M50 50C38 42 34 20 48 8C62 -2 76 10 72 26C68 38 60 45 50 50Z'/><path transform='rotate(216 50 50)' d='M50 50C38 42 34 20 48 8C62 -2 76 10 72 26C68 38 60 45 50 50Z'/><path transform='rotate(288 50 50)' d='M50 50C38 42 34 20 48 8C62 -2 76 10 72 26C68 38 60 45 50 50Z'/></g><circle cx='50' cy='50' r='16' fill='%23ffd04d'/><circle cx='50' cy='50' r='7' fill='%23f5a524'/></svg>") center / contain no-repeat;
}

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

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

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

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

[data-sk-phase][hidden], [data-sk-day][hidden] { display: none !important; }
[dir="rtl"] .sk-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(243, 241, 234, 0.88); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffd078; }

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

/* The festival chip in the status strip */
.sk-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; letter-spacing: .06em; color: #ffd078; }
.sk-strip-chip .sk-flower { width: 14px; height: 14px; }
/* The desktop strip shares its line with the menu; the second half of the
   chip joins it 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, songkran.js marks the strip .sk-strip-tight and the chip
   keeps only the dates or the greeting. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1679px) { .sk-strip-chip__extra { display: none; } }
@media (min-width: 1024px) and (max-width: 1439px) { .hdr-strip .sk-strip-date { display: none; } }
.sk-strip-chip__short, .sk-strip-tight .sk-strip-chip__full { display: none; }
.sk-strip-tight .sk-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: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); white-space: nowrap;
  padding-right: 1.25rem; border-right: 1px solid var(--rule);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.92rem; 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.94rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid var(--theme-500);
  transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; }

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

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

/* ── Cards: 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(--night-glints) repeat-x left bottom / 360px 80px, var(--night-bg); color: #f3f1ea;
  border: 1px solid rgba(255, 196, 87, .3); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--sin-night); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(243, 241, 234, .2); }

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

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

.mobile-glass-header {
  background: rgba(247, 250, 250, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(12, 25, 36, 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.96rem; 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: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 0.9rem 1rem 0.4rem;
}

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

/* A phuang malai pendant hung from a wire (.sk-malai, placed by --x and
   sized by --k, its sway timed by --w): a loop of jasmine buds closed by
   a marigold knot and a rose, ribbon tails and a tassel of buds below. */
.sk-malai {
  position: absolute; left: var(--x); top: 0;
  width: calc(46px * var(--k, 1)); height: calc(100px * var(--k, 1));
  margin-left: calc(-23px * var(--k, 1));
  transform-origin: 50% 0;
  pointer-events: none;
  background: var(--malai) center top / 100% auto no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .sk-malai { animation: sk-sway 4.4s ease-in-out 3 both; animation-delay: var(--w, 0s); }
}
@keyframes sk-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

/* A garland bulb on the night string (.sk-bulb, --x/--y): a warm glow with
   its reflection waiting on the water below */
.sk-bulb {
  position: absolute; left: var(--x); top: var(--y);
  width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0 30%, #ffc457 60%, #f08c12 100%);
  box-shadow: 0 0 10px 3px rgba(255, 196, 87, .55);
  pointer-events: none;
}
.sk-bulb:nth-child(3n+2) { background: radial-gradient(circle, #ffe6ee 0 30%, #ff7aa0 60%, #e0386b 100%); box-shadow: 0 0 10px 3px rgba(255, 122, 160, .5); }
@media (prefers-reduced-motion: no-preference) {
  .sk-bulb { animation: sk-twinkle 3s ease-in-out 4 both; animation-delay: var(--w, 0s); }
}
@keyframes sk-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }

/* The garland's night bulbs (songkran_garland_svg()): dark by day, lit
   after dark and wherever the garland hangs in the festival night */
.sk-garland__bulbs { display: none; }
html.dark .sk-garland__bulbs, .sk-night .sk-garland__bulbs { display: inline; }
.sk-gbulb { fill: #ffd078; filter: drop-shadow(0 0 4px #ffc457) drop-shadow(0 0 9px rgba(255, 196, 87, .7)); }
.sk-gbulb--rose { fill: #ff9ab6; filter: drop-shadow(0 0 4px #ff7aa0) drop-shadow(0 0 9px rgba(255, 122, 160, .6)); }
@media (prefers-reduced-motion: no-preference) {
  .sk-gbulb { animation: sk-twinkle 3s ease-in-out 4 both; }
  .sk-gbulb--rose { animation-delay: -1.5s; }
}

/* ── Dark/light toggle: a splash that ripples the new mode outward ──
   assets/themes/songkran/assets/js/songkran.js registers it: a drop falls
   to the middle of the screen and breaks the surface; a crown of droplets
   leaps up while ring after ring of the new mode's colour runs out from
   the point of impact, each wave front catching the light, until the
   whole screen has turned; the mode flips under it and the water stills
   and clears. */
.px-fx--sk-ripple { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--sk-ripple.is-to-dark { --fx-water: #0e2433; --fx-water-hi: #1d4a66; --fx-water-edge: #0b1d2b; --fx-crest: #ffd078; --fx-glow: rgba(255, 196, 87, .45); --fx-shine: #fff4dc; --fx-ripple: rgba(255, 208, 120, .55); --fx-drop: #bfeef2; --fx-drop-deep: #5cc4dc; --fx-drop-edge: #0a86c6; }
.px-fx--sk-ripple.is-to-light { --fx-water: #d9f2f2; --fx-water-hi: #ffffff; --fx-water-edge: #bfe8ec; --fx-crest: #0a86c6; --fx-glow: rgba(10, 134, 198, .35); --fx-shine: #ffffff; --fx-ripple: rgba(10, 134, 198, .45); --fx-drop: #5cc4dc; --fx-drop-deep: #0a76b2; --fx-drop-edge: #ffffff; }
.px-fx--sk-ripple svg { position: absolute; inset: 0; overflow: visible; }
.px-fx--sk-ripple .sk-fx-front { transform: scale(0); }
.px-fx--sk-ripple .sk-fx-glow { fill: none; stroke: var(--fx-glow); stroke-width: 22; vector-effect: non-scaling-stroke; }
.px-fx--sk-ripple .sk-fx-crest { fill: none; stroke: var(--fx-crest); stroke-width: 6; vector-effect: non-scaling-stroke; }
.px-fx--sk-ripple .sk-fx-shine { fill: none; stroke: var(--fx-shine); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .9; }
.px-fx--sk-ripple .sk-fx-ripple { fill: none; stroke: var(--fx-ripple); stroke-width: 2.5; vector-effect: non-scaling-stroke; transform: scale(0); opacity: 0; }
.px-fx--sk-ripple .sk-fx-crown { fill: var(--fx-drop); stroke: var(--fx-drop-edge); stroke-width: 1.6; stroke-linejoin: round; opacity: 0; transform: scale(.3, 0); transform-box: fill-box; transform-origin: 50% 100%; }
/* The drop, large and glinting, with its shadow gathering on the page
   below it as it falls */
.px-fx--sk-ripple .sk-fx-fall {
  position: absolute; left: var(--cx); top: -90px; width: 52px; height: 68px; margin-left: -26px;
  background: radial-gradient(circle at 34% 64%, rgba(255, 255, 255, .9) 0 11%, transparent 12%), radial-gradient(circle at 60% 70%, var(--fx-drop) 0 52%, var(--fx-drop-deep) 100%);
  clip-path: path('M26 0C33 17 52 31 52 45C52 59 40 68 26 68C12 68 0 59 0 45C0 31 19 17 26 0Z');
}
.px-fx--sk-ripple .sk-fx-shadow {
  position: absolute; left: var(--cx); top: var(--cy); width: 90px; height: 22px; margin: -11px 0 0 -45px;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 40, 60, .35), transparent);
  transform: scale(.2); opacity: 0;
}
.px-fx--sk-ripple .sk-fx-drops { position: absolute; left: var(--cx); top: var(--cy); width: 0; height: 0; }
.px-fx--sk-ripple .sk-fx-drops i {
  position: absolute; left: -8px; top: -10px; width: 16px; height: 21px;
  background: radial-gradient(circle at 36% 62%, rgba(255, 255, 255, .9) 0 14%, transparent 15%), var(--fx-drop);
  clip-path: path('M8 0C10.5 5 16 9 16 14C16 18 12.4 21 8 21C3.6 21 0 18 0 14C0 9 5.5 5 8 0Z');
  opacity: 0;
}
.px-fx--sk-ripple.is-falling .sk-fx-fall { transition: transform .42s cubic-bezier(.5, 0, .9, .4); transform: translateY(calc(var(--cy) + 90px - 60px)); }
.px-fx--sk-ripple.is-falling .sk-fx-shadow { transition: transform .42s ease-in, opacity .42s ease-in; transform: scale(1); opacity: 1; }
.px-fx--sk-ripple.is-splash .sk-fx-fall, .px-fx--sk-ripple.is-splash .sk-fx-shadow { opacity: 0; transition: opacity .06s; }
.px-fx--sk-ripple.is-splash .sk-fx-front { transform: scale(var(--s)); transition: transform 1.3s cubic-bezier(.4, .1, .45, 1) .06s; }
.px-fx--sk-ripple.is-splash .sk-fx-ripple { animation: sk-fx-ripple 1.35s cubic-bezier(.3, .1, .3, 1) both; animation-delay: var(--d, 0s); }
.px-fx--sk-ripple.is-splash .sk-fx-crown { animation: sk-fx-crown .7s cubic-bezier(.2, .8, .3, 1) both; }
.px-fx--sk-ripple.is-splash .sk-fx-drops i { animation: sk-fx-leap .8s cubic-bezier(.2, .7, .4, 1) both; animation-delay: var(--d, 0s); }
@keyframes sk-fx-ripple { 0% { transform: scale(.02); opacity: 1; } 80% { opacity: .8; } 100% { transform: scale(var(--s)); opacity: .55; } }
@keyframes sk-fx-crown { 0% { opacity: 1; transform: scale(.4, 0); } 40% { opacity: 1; transform: scale(1.15, 1.1); } 100% { opacity: 0; transform: scale(1.7, .5); } }
@keyframes sk-fx-leap {
  0% { opacity: 1; transform: translate(0, 0) rotate(var(--a)) scale(.5); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--a)) scale(var(--z, 1)); }
}
.px-fx--sk-ripple.is-away { opacity: 0; transition: opacity .6s ease; }

/* ── Footer: the festival night in both modes — phuang malai pendants
   swaying from a silver wire along its top edge, garland bulbs between
   them and their light broken on the water below ── */
.sk-footer {
  --paper:     #0b1b28;
  --paper-2:   #12283a;
  --paper-3:   #1b3449;
  --ink:       #f3f1ea;
  --ink-2:     #dcdad0;
  --ink-soft:  #a9bbc4;
  --rule:      rgba(243, 241, 234, 0.15);
  --rule-soft: rgba(243, 241, 234, 0.08);
  --theme-500: #ffc457; --theme-600: #ffc457; --theme-700: #ffd98c;
  --theme-500-rgb: 255, 196, 87;
  position: relative;
}
html.dark .sk-footer { --paper: #08131c; --paper-2: #132433; --paper-3: #1b3144; }
.sk-footer-top {
  position: relative; height: 132px; margin-bottom: -1px; overflow: hidden;
  background:
    var(--night-glints) repeat-x left 80px / 360px 52px,
    radial-gradient(70% 120% at 50% 0%, rgba(255, 190, 90, .12), transparent 70%),
    linear-gradient(180deg, #102a3b 0%, #0b1b28 100%);
}
html.dark .sk-footer-top { background: var(--night-glints) repeat-x left 80px / 360px 52px, radial-gradient(70% 120% at 50% 0%, rgba(255, 190, 90, .1), transparent 70%), linear-gradient(180deg, #0c1e2c 0%, #08131c 100%); }
/* The wire the garlands hang from */
.sk-footer-top::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #8b97a5, #f4f7fa 30%, #c7d0d9 60%, #8b97a5);
}
.sk-footer-top svg.sk-footer-string { position: absolute; left: 0; top: 0; width: 100%; height: 50px; overflow: visible; }
.sk-footer-string path { fill: none; stroke: #c7d0d9; stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sk-footer-top .sk-malai, .sk-footer-top .sk-bulb { z-index: 2; }
.sk-footer a:hover { color: #ffd078; }
html .sk-footer .ed-footer-heading { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: 0; text-transform: none; color: #ffd078; }
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: #ffd078 !important; }
html.dark #desktopFooter .ed-newsletter h4 { color: #0f2f3b !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: .95rem; font-weight: 600; color: var(--ink-2); }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }

/* The newsletter on a jasmine-white panel: the pha sin hem along its top
   and a frangipani floating in its corner */
html body .sk-footer .ed-newsletter {
  position: relative;
  background:
    radial-gradient(260px 160px at 100% 50%, rgba(58, 174, 192, .16), transparent 70%),
    #fffdf7;
  color: #0f2f3b;
  border: 0; border-radius: 18px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .6);
  overflow: hidden;
  padding-top: 2.5rem; padding-bottom: 2.2rem;
}
html body .sk-footer .ed-newsletter::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; pointer-events: none;
  background: var(--sin);
}
html body .sk-footer .ed-newsletter::after {
  content: ''; position: absolute; right: 22px; top: 2px; bottom: auto; left: auto; width: 32px; height: 32px; display: block; z-index: 3;
  border-radius: 0; opacity: .95; filter: none; transform: rotate(14deg); pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23ffffff' stroke='%230f2f3b' stroke-opacity='.25' stroke-width='2'><path d='M50 50C38 42 34 20 48 8C62 -2 76 10 72 26C68 38 60 45 50 50Z'/><path transform='rotate(72 50 50)' d='M50 50C38 42 34 20 48 8C62 -2 76 10 72 26C68 38 60 45 50 50Z'/><path transform='rotate(144 50 50)' d='M50 50C38 42 34 20 48 8C62 -2 76 10 72 26C68 38 60 45 50 50Z'/><path transform='rotate(216 50 50)' d='M50 50C38 42 34 20 48 8C62 -2 76 10 72 26C68 38 60 45 50 50Z'/><path transform='rotate(288 50 50)' d='M50 50C38 42 34 20 48 8C62 -2 76 10 72 26C68 38 60 45 50 50Z'/></g><circle cx='50' cy='50' r='16' fill='%23ffd04d'/><circle cx='50' cy='50' r='7' fill='%23f5a524'/></svg>") center / contain no-repeat;
}
[dir="rtl"] body .sk-footer .ed-newsletter::after { right: auto; left: 22px; }
@media (max-width: 767px) { html body .sk-footer .ed-newsletter::after { width: 28px; height: 28px; top: 2px; right: 14px; } [dir="rtl"] body .sk-footer .ed-newsletter::after { right: auto; left: 14px; } }
html body .sk-footer .ed-newsletter, html body .sk-footer .ed-newsletter * { --ink: #0f2f3b; --ink-2: #2c4c58; }
html body .sk-footer .ed-newsletter h4, html.dark body .sk-footer .ed-newsletter h4 { color: #0f2f3b !important; font-family: var(--font-display); font-weight: 600; }
html.dark body .sk-footer .ed-newsletter p:not(#newsletter-msg) { color: #2c4c58 !important; }
html body .sk-footer .ed-newsletter-input { background: #ffffff !important; color: #0f2f3b !important; border: 1px solid rgba(15, 47, 59, .2) !important; border-radius: 999px; }
html body .sk-footer .ed-newsletter-input::placeholder { color: #5d7a85; }
html body .sk-footer .ed-newsletter-input:focus { border-color: #0a86c6 !important; box-shadow: 0 0 0 3px rgba(10, 134, 198, .16); }
html body .sk-footer .ed-newsletter-btn {
  background: #0a7fbf; color: #ffffff; border: 0; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 700;
}
html body .sk-footer .ed-newsletter-age { color: #2c4c58; }

/* Logo card: the light-mode logo on a jasmine-white panel in a silver
   frame, wherever it sits on the night (footer, app splash) */
.sk-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1.05rem 1.6rem;
  background: #fffdf7;
  border-radius: 18px;
  box-shadow: 0 0 0 3px #e2e8ee, 0 0 0 4.5px #8b97a5, 0 14px 28px -12px rgba(0, 0, 0, .6);
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* On phones the words of a heading wrap whole ("Mystery Boxen"), never mid-word. */
@media (max-width: 639px) {
  html body h2.text-fit { overflow-wrap: break-word; word-break: normal; hyphens: manual; font-size: clamp(1.5rem, 8vw, 1.875rem); }
  /* the auction page's "similar auctions" link ("Andere Auktionen durchstöbern") drops under its heading */
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
  /* ticket dates ("28 Oct 2026, 06:18 AM") wrap after the comma in their half-width column */
  html body .grid.grid-cols-2 > div > .whitespace-nowrap.text-sm.font-medium { white-space: normal; }
}

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow the theme's own surfaces. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(12, 25, 36, 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(19, 36, 51, 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, #1b3144, #0c1924, #142a3a, #08131c) !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: #08131c !important;
  border-color: rgba(243, 241, 234, .2) !important;
  color: #f3f1ea !important;
}

/* Inverted panels: shared markup paints some panels with background
   var(--ink) and letters them in var(--paper), which only works while ink
   is dark. After dark those panels take the deepest night. */
html.dark [style*="background: var(--ink)"],
html.dark [style*="background:var(--ink)"],
html.dark [style*="background-color: var(--ink)"],
html.dark [style*="background-color:var(--ink)"] {
  --ink: #08131c;
  --paper: #f3f1ea;
  border-color: rgba(255, 196, 87, .3);
}

html header.safe-top-header[style] { background: rgba(247, 250, 250, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(12, 25, 36, .95) !important; }
/* The winners page's tab bar, near-black in assets/css/pages/winners.css */
html.dark .wn-tab-bar { background: rgba(12, 25, 36, .95); }

/* ── Login / register / forgot-password brand panel: the festival night,
   pendants hung along its top and a frangipani on a silver dish in its
   corner ── */
:root, html.dark {
  --brand-gradient: var(--night-bg);
  --brand-glow-1: rgba(255, 190, 90, 0.24);
  --brand-glow-2: rgba(58, 174, 192, 0.26);
}
.brand-panel { background: var(--night-glints) repeat-x left bottom / 360px 80px, var(--night-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is a frangipani floating on a silver dish. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: 130px !important; right: 9% !important; left: auto !important; bottom: auto !important;
  width: 110px !important; height: 110px !important;
  border-radius: 50% !important; opacity: .95 !important; filter: none !important; transform: none !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='s' x1='0' x2='1'><stop offset='0' stop-color='%238b97a5'/><stop offset='.35' stop-color='%23ffffff'/><stop offset='1' stop-color='%23738090'/></linearGradient><radialGradient id='w' cx='.4' cy='.35'><stop offset='0' stop-color='%23c9f3f2'/><stop offset='1' stop-color='%232f98ad'/></radialGradient></defs><circle cx='50' cy='50' r='48' fill='url(%23s)'/><circle cx='50' cy='50' r='40' fill='url(%23w)'/><g fill='%23fffdf5'><path d='M50 50C42 45 40 31 49 23C58 17 67 25 64 35C62 42 56 47 50 50Z'/><path transform='rotate(72 50 50)' d='M50 50C42 45 40 31 49 23C58 17 67 25 64 35C62 42 56 47 50 50Z'/><path transform='rotate(144 50 50)' d='M50 50C42 45 40 31 49 23C58 17 67 25 64 35C62 42 56 47 50 50Z'/><path transform='rotate(216 50 50)' d='M50 50C42 45 40 31 49 23C58 17 67 25 64 35C62 42 56 47 50 50Z'/><path transform='rotate(288 50 50)' d='M50 50C42 45 40 31 49 23C58 17 67 25 64 35C62 42 56 47 50 50Z'/></g><circle cx='50' cy='50' r='9' fill='%23ffd04d'/><circle cx='50' cy='50' r='4' fill='%23f5a524'/></svg>") center / contain no-repeat !important;
  box-shadow: 0 0 50px 10px rgba(255, 190, 90, .18) !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 9% !important; }
/* login.css's other glow becomes a row of garland pendants along the top */
html .brand-panel::before {
  top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; height: 92px !important;
  border-radius: 0 !important; opacity: 1 !important; filter: none !important; transform: none !important;
  background: var(--malai-row) 0 0 / 82px 87px repeat-x, linear-gradient(90deg, #8b97a5, #f4f7fa 30%, #c7d0d9 60%, #8b97a5) 0 0 / 100% 2px no-repeat !important;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(243, 241, 234, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 600 !important; }

/* ── Wallet balance card: a length of pha sin silk — deep water-blue
   ground shot with a sheen, its woven hem of stripes and diamonds along
   the foot, and a silver khan of jasmine water embossed in the corner ── */
html body .wallet-hero {
  position: relative;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 7px),
    linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .12) 45%, transparent 60%),
    radial-gradient(120% 120% at 15% 0%, #0f7fb8, #0a5f91 55%, #08466d);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 2px 0 #053a59, 0 22px 40px -18px rgba(5, 58, 89, .75);
  color: #f6fbfc;
  overflow: hidden;
  padding-bottom: calc(1.5rem + 26px) !important;
}
/* The hem: rose, marigold, a band of diamonds, marigold, jade */
html body .wallet-hero::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: auto; height: 26px;
  border: 0; border-radius: 0; transform: none; opacity: 1;
  background:
    linear-gradient(#e8466f, #e8466f) left top / 100% 4px no-repeat,
    linear-gradient(#fffdf5, #fffdf5) left 4px / 100% 1.5px no-repeat,
    linear-gradient(#f59e1b, #f59e1b) left 5.5px / 100% 3px no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='9' viewBox='0 0 20 9'><rect width='20' height='9' fill='%2324a389'/><path d='M5 .8L8.6 4.5L5 8.2L1.4 4.5Z' fill='%23fffdf5'/><path d='M5 2.8L6.7 4.5L5 6.2L3.3 4.5Z' fill='%23e8466f'/><circle cx='15' cy='4.5' r='1.3' fill='%23ffc23d'/></svg>") left 8.5px / 20px 9px repeat-x,
    linear-gradient(#f59e1b, #f59e1b) left 17.5px / 100% 3px no-repeat,
    linear-gradient(#fffdf5, #fffdf5) left 20.5px / 100% 1.5px no-repeat,
    #e8466f;
  pointer-events: none;
}
/* The bowl embossed on the silk */
html body .wallet-hero::after {
  content: ''; position: absolute; right: 40px; top: 50%; left: auto; bottom: auto; width: 148px; height: 111px; margin-top: -66px;
  border-radius: 0; transform: none; opacity: .95;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'><defs><linearGradient id='s' x1='0' x2='1'><stop offset='0' stop-color='%238b97a5'/><stop offset='.36' stop-color='%23ffffff'/><stop offset='.62' stop-color='%23d5dce4'/><stop offset='1' stop-color='%2366727f'/></linearGradient></defs><ellipse cx='100' cy='46' rx='92' ry='24' fill='url(%23s)'/><ellipse cx='100' cy='48' rx='82' ry='18' fill='%2390dde2'/><g fill='%23fffdf5'><ellipse cx='70' cy='46' rx='6' ry='3'/><ellipse cx='124' cy='52' rx='6' ry='3'/><ellipse cx='108' cy='42' rx='5' ry='2.6'/></g><path d='M72 122H128L136 140H64Z' fill='url(%23s)'/><path d='M8 46A92 24 0 0 0 192 46C190 92 152 126 100 126C48 126 10 92 8 46Z' fill='url(%23s)'/><path d='M8 46A92 24 0 0 0 192 46' fill='none' stroke='%23ffffff' stroke-width='3'/><g fill='none' stroke='%2366727f' stroke-width='2' stroke-linecap='round'><path d='M40 84c0-6 7-7 9-2s-2 7-5 5M60 88c0-6 7-7 9-2s-2 7-5 5M80 90c0-6 7-7 9-2s-2 7-5 5M100 90c0-6 7-7 9-2s-2 7-5 5M120 88c0-6 7-7 9-2s-2 7-5 5M140 84c0-6 7-7 9-2s-2 7-5 5'/></g><path d='M30 74C40 100 64 114 90 119' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-opacity='.5'/></svg>") center / contain no-repeat;
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 36px; }
@media (max-width: 639px) {
  html body .wallet-hero::after { width: 66px; height: 50px; top: 64px; margin-top: 0; right: 16px; }
  html[dir="rtl"] body .wallet-hero::after { right: auto; left: 16px; }
}
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 silk 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(246, 251, 252, .82) !important; }
html body .wallet-hero .h-px { background: repeating-linear-gradient(90deg, rgba(246, 251, 252, .45) 0 5px, transparent 5px 9px) !important; }
html body .wallet-balance-num {
  font-family: var(--font-ui); font-variation-settings: normal; font-weight: 700; letter-spacing: -.01em;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
}
html body .wallet-hero-btn-primary { background: #fffdf7; color: #075f91; border: 0; font-family: var(--font-ui); font-weight: 700; border-radius: 999px; box-shadow: 0 2px 0 #053a59; }
html body .wallet-hero-btn-primary:hover { background: #ffffff; color: #075f91; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #f6fbfc; border-color: rgba(246, 251, 252, .5); border-radius: 999px; }
html.dark body .wallet-hero {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 7px),
    linear-gradient(105deg, transparent 30%, rgba(255, 196, 87, .1) 45%, transparent 60%),
    radial-gradient(120% 120% at 15% 0%, #12557c, #0c3c5a 55%, #0a2c44);
  box-shadow: 0 2px 0 #061f30, 0 0 50px -14px rgba(255, 196, 87, .3);
}

/* ── Mystery box card (styled by assets/css/pages/home.css): the pha sin
   hem 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(--sin); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

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

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

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's water blue. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a
   field and take the colour of the main buttons. */
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 999px;
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--gold-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--gold-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(10, 134, 198, .3); }
html.dark .border-violet-200 { border-color: rgba(255, 196, 87, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(10, 134, 198, .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;
   after dark the accent is garland light, so it takes the button ink. */
html.dark .arena-play { color: var(--btn-ink); text-shadow: none; }
html.dark .arena-play .pic { background: rgba(12, 25, 36, .12); }
html.dark .arena-play .cost { border-left-color: rgba(12, 25, 36, .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 hem ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.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(--sin);
}
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: 700;
  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 .sk-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 resting in a silver khan afloat on a square
   of jasmine water, ripples running out from it and a frangipani drifting
   by, over a white panel for its details ── */
.sk-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;
}
.sk-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sk-win__water {
  position: relative; container-type: inline-size;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 3.4rem 14px calc(14px + 1rem);
  background:
    radial-gradient(60% 26% at 50% 78%, rgba(255, 255, 255, .55), transparent 70%),
    repeating-radial-gradient(ellipse 120% 40% at 50% 80%, transparent 0 16px, rgba(255, 255, 255, .3) 16px 18px),
    linear-gradient(180deg, #bfeef0 0%, #7fd3dc 60%, #4cb6c8 100%);
  --b-shadow: rgba(8, 70, 90, .3);
}
.sk-win:nth-child(3n+2) .sk-win__water { background: radial-gradient(60% 26% at 50% 78%, rgba(255, 255, 255, .55), transparent 70%), repeating-radial-gradient(ellipse 120% 40% at 50% 80%, transparent 0 16px, rgba(255, 255, 255, .3) 16px 18px), linear-gradient(180deg, #cdeffa 0%, #8ccdf0 60%, #4fa8db 100%); }
.sk-win:nth-child(3n+3) .sk-win__water { background: radial-gradient(60% 26% at 50% 78%, rgba(255, 255, 255, .55), transparent 70%), repeating-radial-gradient(ellipse 120% 40% at 50% 80%, transparent 0 16px, rgba(255, 255, 255, .3) 16px 18px), linear-gradient(180deg, #c8f2e6 0%, #84d9c3 60%, #3fb59a 100%); }
html.dark .sk-win:nth-child(n) .sk-win__water {
  background:
    radial-gradient(50% 30% at 50% 80%, rgba(255, 196, 87, .28), transparent 70%),
    repeating-radial-gradient(ellipse 120% 40% at 50% 80%, transparent 0 16px, rgba(255, 196, 87, .1) 16px 18px),
    var(--night-glints) repeat-x left 60% / 260px 58px,
    linear-gradient(180deg, #0c2232 0%, #12354a 100%);
  --b-hi: #fff4dc; --b-mid: #c9ced4; --b-lo: #6d7783; --b-edge: #4d5865; --b-shadow: rgba(0, 0, 0, .4);
  --w-hi: #2f6f86; --w-lo: #0f3247; --w-line: #ffc457;
}
.sk-win__water::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: var(--sin); }
.sk-win__bowl { position: relative; display: block; width: min(76%, 13rem); aspect-ratio: 200 / 150; }
.sk-win__bowl > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sk-win__prize {
  position: absolute; left: 24%; right: 24%; bottom: 66%; height: 52%;
  display: flex; align-items: flex-end; justify-content: center;
}
.sk-win__prize img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(8, 50, 70, .28)); transition: transform .3s ease; }
.sk-win:hover .sk-win__prize img { transform: translateY(-4px) scale(1.04); }
.sk-win__bloom { position: absolute; width: 15%; right: 7%; bottom: 22%; --f-edge: rgba(8, 50, 70, .2); }
.sk-win__bloom svg { display: block; width: 100%; height: auto; }
[dir="rtl"] .sk-win__bloom { right: auto; left: 7%; }
.sk-win__water > .absolute { z-index: 3; top: .9rem; }
.sk-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .65rem;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #0f2f3b; background: #fffdf7; border-radius: 999px;
  box-shadow: 0 1px 0 rgba(15, 47, 59, .2);
}
.sk-win__tag--open { color: #3d2600; background: #ffc23d; }
.sk-win__tag--done { color: #ffffff; background: #1d8f78; }
.sk-win__name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.sk-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.sk-win__price { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.15rem, 4vw, 1.35rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; white-space: nowrap; }
.sk-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .92rem; }
.sk-win__cart, .sk-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 999px; font-weight: 700;
}
.sk-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.sk-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.sk-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.sk-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .92rem; font-weight: 700;
  color: var(--theme-600); background: var(--rose-soft); border-radius: 999px;
}

/* 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. */
.sk-hero__scene { visibility: hidden; max-height: 0; overflow: hidden; }

/* 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: #1b836e; --px-warn: #b45309; --px-crit: #d23c61; --px-info: #0a76b3; }
html.dark:root { --px-good: #51d2b1; --px-warn: #fbbf23; --px-crit: #ffa3b9; --px-info: #62c4f9; }

/* Changing language, the scene (songkran.js): a basin under a jasmine
   garland, the old name on the water; a splash covers it before the reload,
   and after it the water ripples and runs clear over the new name. The
   covered basin is the same on both pages, so the reload never shows. */
.sk-lang-stage { background: color-mix(in srgb, var(--night) 50%, transparent); }
.sk-lang-bowl {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  width: min(560px, 100%); box-sizing: border-box; padding: 14px 20px 18px; border-radius: 22px;
  background: var(--paper-2); color: var(--ink); box-shadow: var(--sk-rim), 0 34px 70px -28px rgba(0, 0, 0, .6);
  font-family: var(--font-ui); text-align: center;
}
.sk-lang-garland { display: block; height: 14px; background: var(--sk-jasmine); }
.sk-lang-pool {
  position: relative; display: grid; place-items: center; min-height: 150px; box-sizing: border-box;
  padding: 26px 18px; border-radius: 26px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, #3aaec0 8%, var(--paper-2)), color-mix(in srgb, #3aaec0 24%, var(--paper-2)));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #3aaec0 35%, transparent), inset 0 6px 14px -6px rgba(0, 0, 0, .22);
}
.sk-lang-pool > span, .sk-lang-ring { grid-area: 1 / 1; }
.sk-lang-pool > span {
  position: relative; z-index: 1; max-width: 100%; min-width: 0; overflow-wrap: anywhere;
  font: 600 clamp(26px, 8vw, 40px)/1.15 var(--font-display); color: var(--sk-water-ink);
}
.px-lang-stage-out .sk-lang-new, .px-lang-stage-in .sk-lang-old { visibility: hidden; }
.sk-lang-ring {
  width: 120px; height: 56px; border-radius: 50%; opacity: 0;
  border: 2px solid color-mix(in srgb, #0a86c6 55%, transparent);
}
.sk-lang-wave {
  position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, .2) 0 2px, transparent 2px 24px), linear-gradient(90deg, #8fdbe6, #3aaec0 45%, #0a86c6);
}
.sk-lang-wave::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 18px;
  background: radial-gradient(circle at 0 50%, #0a86c6 0 9px, transparent 10px) 0 0 / 18px 22px repeat-y;
}
.sk-lang-drops { position: absolute; left: 20px; right: 20px; top: 46px; height: 0; }
.sk-lang-drop {
  position: absolute; left: 12%; top: 0; width: 9px; height: 12px; opacity: 0;
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%; background: #3aaec0;
}
.sk-lang-drop:nth-child(2) { left: 28%; --sk-dx: -10px; }
.sk-lang-drop:nth-child(3) { left: 44%; --sk-dx: 8px; }
.sk-lang-drop:nth-child(4) { left: 58%; --sk-dx: -6px; }
.sk-lang-drop:nth-child(5) { left: 72%; --sk-dx: 12px; }
.sk-lang-drop:nth-child(6) { left: 86%; --sk-dx: 4px; }
.sk-lang-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px;
  font: 600 12px/1.2 var(--font-ui); letter-spacing: .08em; color: var(--ink-soft);
}
.sk-lang-foot b { color: var(--sk-water-ink); font-size: 14px; }
.sk-lang-foot img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; margin-inline-start: 6px; }
/* Out: the basin comes up and a splash washes over the name. */
.px-lang-stage-out .sk-lang-bowl { animation: sk-lang-bowl-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .sk-lang-wave { animation: sk-lang-wash .5s cubic-bezier(.5, 0, .3, 1) .4s both; }
.px-lang-stage-out .sk-lang-drop { animation: sk-lang-fling .34s ease-out .42s both; }
.px-lang-stage-out .sk-lang-drop:nth-child(2) { animation-delay: .45s; }
.px-lang-stage-out .sk-lang-drop:nth-child(3) { animation-delay: .48s; }
.px-lang-stage-out .sk-lang-drop:nth-child(4) { animation-delay: .5s; }
.px-lang-stage-out .sk-lang-drop:nth-child(5) { animation-delay: .52s; }
.px-lang-stage-out .sk-lang-drop:nth-child(6) { animation-delay: .54s; }
/* In: the water ripples and runs off, clearing over the new name. */
.px-lang-stage-in .sk-lang-ring { animation: sk-lang-ripple .7s ease-out .1s both; }
.px-lang-stage-in .sk-lang-ring:nth-of-type(2) { animation-delay: .25s; }
.px-lang-stage-in .sk-lang-ring:nth-of-type(3) { animation-delay: .4s; }
.px-lang-stage-in .sk-lang-wave { animation: sk-lang-recede .45s ease-in .2s both; }
.px-lang-stage-in .sk-lang-new { animation: sk-lang-clear .55s ease-out .25s both; }
.px-lang-stage-in .sk-lang-bowl { animation: sk-lang-bowl-out .25s ease-in 1s both; }
@keyframes sk-lang-bowl-in { from { transform: translateY(36px) scale(.96); opacity: 0; } }
@keyframes sk-lang-bowl-out { to { transform: translateY(-24px); opacity: 0; } }
@keyframes sk-lang-wash { from { transform: translateX(calc(-100% - 40px)) skewX(-8deg); } }
@keyframes sk-lang-recede { to { transform: translateX(calc(100% + 40px)) skewX(-8deg); } }
@keyframes sk-lang-fling {
  0%   { transform: scale(.5); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(var(--sk-dx, 0px), -44px); opacity: 0; }
}
@keyframes sk-lang-ripple {
  0%   { transform: scale(.3); opacity: 0; }
  15%  { opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes sk-lang-clear { from { transform: skewX(-6deg) scale(.96); filter: blur(4px); } }
@media (max-width: 460px) {
  .sk-lang-bowl { padding: 12px 14px 16px; }
  .sk-lang-pool { min-height: 130px; padding: 22px 12px; }
  .sk-lang-drops { left: 14px; right: 14px; top: 40px; }
}

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

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

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

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

/* Phone strip: the language button shows the language's own name, which can
   be long (Português (Brasil), Bahasa Indonesia). Tighter gaps make room, a
   long name is capped, and the strip chip gives way with an ellipsis instead
   of running under the toggles. */
@media (max-width: 1023.98px) {
  .hdr-strip { column-gap: .5rem; }
  .hdr-strip > .ed-status:last-child { column-gap: .625rem; }
  .hdr-strip [data-px-call="openLangSheet"] > span[lang] { max-width: 7.5em; overflow: hidden; text-overflow: ellipsis; }
  .hdr-strip > .ed-status:first-child { overflow-x: clip; }
  .hdr-strip > .ed-status:first-child > *, .hdr-strip > .ed-status:first-child > * > :not([aria-hidden], svg, img, i) { min-width: 0; }
  .hdr-strip > .ed-status:first-child > * > :is([aria-hidden], svg, img, i) { flex-shrink: 0; }
  .hdr-strip > .ed-status:first-child > * > :is(span, bdi):not([aria-hidden]), .hdr-strip > .ed-status:first-child bdi { overflow: hidden; text-overflow: ellipsis; }
}

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