/* ============================================================
   KITE FESTIVAL THEME — a sky full of kites over the rooftops.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from Makar Sankranti and Uttarayan: paper fighter kites
   (patang) in two-tone papers, manja strings and the charkhi
   they wind on, the terraces of an old city in the winter sun,
   til-gul and chikki. Bright winter daylight by default — sky
   blue, cobalt and kite-paper colours on a pale sky; after dark
   a winter evening over the terraces, teal dusk with sky
   lanterns rising and an ember glow along the rooftops.

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

:root {
  --font-display: 'Tillana', 'Baloo 2', 'Noto Sans Devanagari', 'Trebuchet MS', system-ui, sans-serif;
  --font-ui:      'Plus Jakarta Sans', 'Inter', system-ui, 'Noto Sans', 'Segoe UI', sans-serif;

  --paper:        #f1f7fc;
  --paper-2:      #ffffff;
  --paper-3:      #e4eef7;
  --ink:          #14213d;
  --ink-2:        #33415f;
  --ink-soft:     #687590;
  --rule:         rgba(20, 33, 61, 0.13);
  --rule-soft:    rgba(20, 33, 61, 0.07);
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 1px 2px rgba(20, 33, 61, .06), 0 6px 16px -8px rgba(20, 33, 61, .2);
  --shadow-md:    0 2px 4px rgba(20, 33, 61, .06), 0 18px 34px -16px rgba(20, 33, 61, .36);

  /* Cobalt, the colour of the manja on the spool */
  --theme-50:  #eef2fd;
  --theme-100: #dbe3fb;
  --theme-200: #b6c6f5;
  --theme-300: #8aa2ee;
  --theme-400: #5a78e0;
  --theme-500: #2f55d4;
  --theme-600: #1f47c7;
  --theme-700: #1a3aa3;
  --theme-800: #172f7f;
  --theme-900: #12245e;
  --theme-500-rgb: 47, 85, 212;
  --theme-600-rgb: 31, 71, 199;

  /* Kite papers */
  --kite-red: #f04a23; --kite-gold: #ffb21e; --kite-teal: #10a5a0; --kite-rani: #e0287a;
  --kite-blue: #1f47c7; --kite-leaf: #3aa655; --kite-plum: #6b3fb5;
  /* Til-gul and chikki */
  --til: #f6ead2; --jaggery: #b8732f; --jaggery-2: #8a4f1c;
  --manja: #e03a5c;
  --bamboo: #8a5a2b;

  /* The dusk, the colour of the footer, winners, wallet and splash in both modes */
  --night:   #0f2738;
  --night-2: #163448;
  --night-3: #1f4259;
  --on-night: #f5efe4;
  --on-night-soft: rgba(245, 239, 228, .76);

  /* Names other themes' shared markup reaches for */
  --gold:       #b9701a;
  --gold-2:     #ffb21e;
  --gold-soft:  rgba(31, 71, 199, 0.08);
  --gold-ink:   #14213d;
  --felt:       #0f2738;
  --felt-2:     #163448;
  --on-felt:    #f5efe4;
  --on-felt-soft: rgba(245, 239, 228, 0.78);
  --peacock:    #0f8f8a;
  --peacock-soft: rgba(16, 165, 160, 0.11);
  --red:        #1f47c7;
  --red-soft:   rgba(31, 71, 199, 0.09);
  --rose:       #e0441c;
  --rose-soft:  rgba(31, 71, 199, 0.09);

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

  /* Buttons: cobalt by day, sky-lantern orange by night */
  --btn-bg:       #1f47c7;
  --btn-bg-hover: #2c56dc;
  --btn-ink:      #ffffff;
  --btn-shadow:   0 2px 0 #13308f, 0 10px 20px -10px rgba(31, 71, 199, .75);
  --btn-shadow-hover: 0 3px 0 #13308f, 0 14px 24px -10px rgba(31, 71, 199, .8);

  /* A string of little kites: the theme's border band */
  --kite-band-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'><path d='M0 4.5Q60 9.5 120 4.5' fill='none' stroke='%237d8da6' stroke-width='.8'/><g><path d='M10 0.6L15 6L10 11.4L5 6Z' fill='%23f04a23'/><path d='M10 0.6L10 11.4L5 6Z' fill='%23fff' fill-opacity='.45'/><path d='M10 11L8.6 13.6H11.4Z' fill='%23f04a23'/></g><g><path d='M30 1.8L35 7.2L30 12.6L25 7.2Z' fill='%23ffb21e'/><path d='M25 7.2L35 7.2L30 1.8Z' fill='%23fff' fill-opacity='.5'/></g><g><path d='M50 2.4L55 7.8L50 13.2L45 7.8Z' fill='%2310a5a0'/><circle cx='50' cy='7.8' r='2' fill='%23fff' fill-opacity='.75'/></g><g><path d='M70 2.4L75 7.8L70 13.2L65 7.8Z' fill='%23e0287a'/><path d='M70 2.4L70 13.2L65 7.8Z' fill='%23fff' fill-opacity='.45'/></g><g><path d='M90 1.8L95 7.2L90 12.6L85 7.2Z' fill='%231f47c7'/><path d='M87.5 4.5L92.5 4.5L90 1.8Z' fill='%23ffb21e'/></g><g><path d='M110 0.6L115 6L110 11.4L105 6Z' fill='%233aa655'/><path d='M105 6L115 6L110 11.4Z' fill='%23fff' fill-opacity='.45'/></g></svg>");
  --kite-band-night-img: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14'><path d='M0 4.5Q60 9.5 120 4.5' fill='none' stroke='%23ffcf9a' stroke-opacity='.45' stroke-width='.8'/><g><path d='M10 0.6L15 6L10 11.4L5 6Z' fill='%23ff6a3d'/><path d='M10 0.6L10 11.4L5 6Z' fill='%23fff' fill-opacity='.3'/><path d='M10 11L8.6 13.6H11.4Z' fill='%23ff6a3d'/></g><g><path d='M30 1.8L35 7.2L30 12.6L25 7.2Z' fill='%23ffbe3d'/><path d='M25 7.2L35 7.2L30 1.8Z' fill='%23fff' fill-opacity='.4'/></g><g><path d='M50 2.4L55 7.8L50 13.2L45 7.8Z' fill='%2329c2bb'/><circle cx='50' cy='7.8' r='2' fill='%23fff' fill-opacity='.6'/></g><g><path d='M70 2.4L75 7.8L70 13.2L65 7.8Z' fill='%23f0559a'/><path d='M70 2.4L70 13.2L65 7.8Z' fill='%23fff' fill-opacity='.3'/></g><g><path d='M90 1.8L95 7.2L90 12.6L85 7.2Z' fill='%236f8fff'/><path d='M87.5 4.5L92.5 4.5L90 1.8Z' fill='%23ffbe3d'/></g><g><path d='M110 0.6L115 6L110 11.4L105 6Z' fill='%2356c46f'/><path d='M105 6L115 6L110 11.4Z' fill='%23fff' fill-opacity='.3'/></g></svg>");
  --kite-band: var(--kite-band-img) repeat-x left center / 120px 14px;
  --kite-band-night: var(--kite-band-night-img) repeat-x left center / 120px 14px;
  /* Far-off kites drifting over the page */
  --far-kites: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill-opacity='.13'><path d='M40 30l7 8l-7 8l-7-8z' fill='%231f47c7'/><path d='M190 120l5 6l-5 6l-5-6z' fill='%23f04a23'/><path d='M110 200l4 4.5l-4 4.5l-4-4.5z' fill='%2310a5a0'/></g><g fill='none' stroke='%2314213d' stroke-opacity='.07' stroke-width='.8'><path d='M40 46q6 24 -4 44'/><path d='M190 132q4 18 -3 30'/></g></svg>");
  /* The winter evening behind the footer, winners, wallet, splash and login */
  --dusk-stars: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='%23fff7e8'><circle cx='20' cy='30' r='.9' fill-opacity='.7'/><circle cx='80' cy='14' r='.6' fill-opacity='.5'/><circle cx='140' cy='52' r='1' fill-opacity='.7'/><circle cx='206' cy='24' r='.7' fill-opacity='.55'/><circle cx='44' cy='118' r='.6' fill-opacity='.45'/><circle cx='112' cy='140' r='.8' fill-opacity='.55'/><circle cx='178' cy='104' r='.6' fill-opacity='.45'/><circle cx='226' cy='170' r='.8' fill-opacity='.5'/><circle cx='70' cy='200' r='.7' fill-opacity='.45'/></g></svg>");
  --dusk-bg:
    radial-gradient(520px 260px at 50% 118%, rgba(255, 140, 70, .42), transparent 70%),
    radial-gradient(480px 300px at 92% -60px, rgba(110, 170, 210, .22), transparent 70%),
    var(--dusk-stars),
    linear-gradient(180deg, #0c2232 0%, #133349 62%, #24405a 100%);
  /* Rooftops of the old city: terraces, parapets, tanks and stair huts */
  --roofs: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='60' viewBox='0 0 480 60'><path fill='%23c3d6e6' d='M0 60V30h18v-6h40v6h6V18h34v12h14v-8h10v-6h22v6h10v8h30V26h8V8h4v18h12V20h46v10h18v-4h30v-14h26v14h12v-6h28v6h20V22h40v8h8v-4h20v4h30V16h14v-6h20v20h16V60Z'/><g fill='%23aac3d8'><rect x='68' y='22' width='6' height='5'/><rect x='80' y='22' width='6' height='5'/><rect x='300' y='18' width='6' height='5'/><rect x='420' y='20' width='6' height='5'/></g><g fill='none' stroke='%23aac3d8' stroke-width='1'><path d='M118 16q20 6 40 0'/><path d='M343 12V2M338 4h10'/></g></svg>");
  --roofs-dusk: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='60' viewBox='0 0 480 60'><path fill='%23081a26' d='M0 60V30h18v-6h40v6h6V18h34v12h14v-8h10v-6h22v6h10v8h30V26h8V8h4v18h12V20h46v10h18v-4h30v-14h26v14h12v-6h28v6h20V22h40v8h8v-4h20v4h30V16h14v-6h20v20h16V60Z'/><g fill='%23ffb862'><rect x='68' y='38' width='5' height='6' fill-opacity='.85'/><rect x='232' y='40' width='5' height='6' fill-opacity='.6'/><rect x='300' y='34' width='5' height='6' fill-opacity='.8'/><rect x='420' y='38' width='5' height='6' fill-opacity='.7'/></g><g fill='none' stroke='%23081a26' stroke-width='1'><path d='M118 16q20 6 40 0'/><path d='M343 12V2M338 4h10'/></g></svg>");

  /* Nearer, the pastel houses of an old quarter: parapets, water tanks,
     a stair hut and a line of washing, 560×70 */
  --pol-houses: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='70' viewBox='0 0 560 70'><path d='M0 70V30h64V70Z' fill='%23f4e4c4'/><path d='M-1 27h66v4h-66Z' fill='%23e2cc9f'/><path d='M12.0 50v-7a4 4 0 0 1 8 0v7Z' fill='%23e2cc9f'/><path d='M12.0 66v-7a4 4 0 0 1 8 0v7Z' fill='%23e2cc9f'/><path d='M44.0 50v-7a4 4 0 0 1 8 0v7Z' fill='%23e2cc9f'/><path d='M44.0 66v-7a4 4 0 0 1 8 0v7Z' fill='%23e2cc9f'/><path d='M64 70V20h78V70Z' fill='%23c4dcee'/><path d='M63 17h80v4h-80Z' fill='%23a3c3dc'/><path d='M73.0 40v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M73.0 56v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M99.0 40v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M99.0 56v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M125.0 40v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M125.0 56v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M93.0 17l2-6M113.0 17l-2-6' stroke='%23a3c3dc' stroke-width='1.6'/><rect x='91.0' y='1' width='24' height='11' rx='2' fill='%23a3c3dc'/><path d='M142 70V38h48V70Z' fill='%23f3cdc6'/><path d='M141 35h50v4h-50Z' fill='%23dcaaa1'/><path d='M162.0 58v-7a4 4 0 0 1 8 0v7Z' fill='%23dcaaa1'/><path d='M190 70V26h92V70Z' fill='%23cfe7d6'/><path d='M189 23h94v4h-94Z' fill='%23a9cfb5'/><path d='M201.3 46v-7a4 4 0 0 1 8 0v7Z' fill='%23a9cfb5'/><path d='M201.3 62v-7a4 4 0 0 1 8 0v7Z' fill='%23a9cfb5'/><path d='M232.0 46v-7a4 4 0 0 1 8 0v7Z' fill='%23a9cfb5'/><path d='M232.0 62v-7a4 4 0 0 1 8 0v7Z' fill='%23a9cfb5'/><path d='M262.7 46v-7a4 4 0 0 1 8 0v7Z' fill='%23a9cfb5'/><path d='M262.7 62v-7a4 4 0 0 1 8 0v7Z' fill='%23a9cfb5'/><path d='M196 23V12M276 23V12' stroke='%23a9cfb5' stroke-width='1.4'/><path d='M196 13Q236.0 20 276 13' fill='none' stroke='%23a9cfb5' stroke-width='.8'/><rect x='218' y='15' width='8' height='9' fill='%23f04a23' fill-opacity='.75'/><rect x='236' y='15' width='8' height='9' fill='%23ffb21e' fill-opacity='.75'/><rect x='254' y='15' width='8' height='9' fill='%231f47c7' fill-opacity='.75'/><path d='M282 70V16h48V70Z' fill='%23f4e4c4'/><path d='M281 13h50v4h-50Z' fill='%23e2cc9f'/><path d='M302.0 36v-7a4 4 0 0 1 8 0v7Z' fill='%23e2cc9f'/><path d='M302.0 52v-7a4 4 0 0 1 8 0v7Z' fill='%23e2cc9f'/><path d='M290 13V1h20v12Z' fill='%23f4e4c4'/><path d='M288 -1h24v3h-24Z' fill='%23e2cc9f'/><path d='M296 13v-8h7v8Z' fill='%23e2cc9f'/><path d='M330 70V32h90V70Z' fill='%23c4dcee'/><path d='M329 29h92v4h-92Z' fill='%23a3c3dc'/><path d='M341.0 52v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M341.0 68v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M371.0 52v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M371.0 68v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M401.0 52v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M401.0 68v-7a4 4 0 0 1 8 0v7Z' fill='%23a3c3dc'/><path d='M420 70V22h66V70Z' fill='%23f3cdc6'/><path d='M419 19h68v4h-68Z' fill='%23dcaaa1'/><path d='M432.5 42v-7a4 4 0 0 1 8 0v7Z' fill='%23dcaaa1'/><path d='M432.5 58v-7a4 4 0 0 1 8 0v7Z' fill='%23dcaaa1'/><path d='M465.5 42v-7a4 4 0 0 1 8 0v7Z' fill='%23dcaaa1'/><path d='M465.5 58v-7a4 4 0 0 1 8 0v7Z' fill='%23dcaaa1'/><path d='M443.0 19l2-6M463.0 19l-2-6' stroke='%23dcaaa1' stroke-width='1.6'/><rect x='441.0' y='3' width='24' height='11' rx='2' fill='%23dcaaa1'/><path d='M486 70V36h74V70Z' fill='%23cfe7d6'/><path d='M485 33h76v4h-76Z' fill='%23a9cfb5'/><path d='M500.5 56v-7a4 4 0 0 1 8 0v7Z' fill='%23a9cfb5'/><path d='M537.5 56v-7a4 4 0 0 1 8 0v7Z' fill='%23a9cfb5'/></svg>");
  --pol-houses-dusk: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='70' viewBox='0 0 560 70'><path d='M0 70V30h64V70Z' fill='%230a1a27'/><path d='M-1 27h66v4h-66Z' fill='%23071420'/><path d='M12.0 50v-7a4 4 0 0 1 8 0v7Z' fill='%23ffb862'/><path d='M64 70V20h78V70Z' fill='%230a1a27'/><path d='M63 17h80v4h-80Z' fill='%23071420'/><path d='M73.0 56v-7a4 4 0 0 1 8 0v7Z' fill='%23ffb862'/><path d='M99.0 40v-7a4 4 0 0 1 8 0v7Z' fill='%23ffb862'/><path d='M93.0 17l2-6M113.0 17l-2-6' stroke='%23071420' stroke-width='1.6'/><rect x='91.0' y='1' width='24' height='11' rx='2' fill='%23071420'/><path d='M142 70V38h48V70Z' fill='%230a1a27'/><path d='M141 35h50v4h-50Z' fill='%23071420'/><path d='M190 70V26h92V70Z' fill='%230a1a27'/><path d='M189 23h94v4h-94Z' fill='%23071420'/><path d='M262.7 62v-7a4 4 0 0 1 8 0v7Z' fill='%23ffb862'/><path d='M196 23V12M276 23V12' stroke='%23071420' stroke-width='1.4'/><path d='M196 13Q236.0 20 276 13' fill='none' stroke='%23071420' stroke-width='.8'/><path d='M282 70V16h48V70Z' fill='%230a1a27'/><path d='M281 13h50v4h-50Z' fill='%23071420'/><path d='M302.0 36v-7a4 4 0 0 1 8 0v7Z' fill='%23ffb862'/><path d='M290 13V1h20v12Z' fill='%230a1a27'/><path d='M288 -1h24v3h-24Z' fill='%23071420'/><path d='M296 13v-8h7v8Z' fill='%23071420'/><path d='M330 70V32h90V70Z' fill='%230a1a27'/><path d='M329 29h92v4h-92Z' fill='%23071420'/><path d='M341.0 68v-7a4 4 0 0 1 8 0v7Z' fill='%23ffb862'/><path d='M371.0 52v-7a4 4 0 0 1 8 0v7Z' fill='%23ffb862'/><path d='M420 70V22h66V70Z' fill='%230a1a27'/><path d='M419 19h68v4h-68Z' fill='%23071420'/><path d='M465.5 58v-7a4 4 0 0 1 8 0v7Z' fill='%23ffb862'/><path d='M443.0 19l2-6M463.0 19l-2-6' stroke='%23071420' stroke-width='1.6'/><rect x='441.0' y='3' width='24' height='11' rx='2' fill='%23071420'/><path d='M486 70V36h74V70Z' fill='%230a1a27'/><path d='M485 33h76v4h-76Z' fill='%23071420'/></svg>");

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

html.dark {
  --paper:        #0c1d2b;
  --paper-2:      #132a3b;
  --paper-3:      #1b3549;
  --ink:          #f4efe6;
  --ink-2:        #d9d4ca;
  --ink-soft:     #98a8b6;
  --rule:         rgba(244, 239, 230, 0.13);
  --rule-soft:    rgba(244, 239, 230, 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);

  /* Sky-lantern orange */
  --theme-50:  #162b3b;
  --theme-100: #1f3a4e;
  --theme-200: #5a4232;
  --theme-300: #ffd0a6;
  --theme-400: #ffb67a;
  --theme-500: #ff9a4d;
  --theme-600: #ffad6a;
  --theme-700: #ffc795;
  --theme-800: #ffdcbd;
  --theme-900: #fff1e3;
  --theme-500-rgb: 255, 154, 77;
  --theme-600-rgb: 255, 173, 106;

  --gold:       #ffbe6b;
  --gold-2:     #ffd29a;
  --gold-soft:  rgba(255, 154, 77, 0.12);
  --felt:       #081722;
  --felt-2:     #132a3b;
  --peacock:    #4fd3c9;
  --peacock-soft: rgba(79, 211, 201, 0.13);
  --red:        #ffad6a;
  --red-soft:   rgba(255, 154, 77, 0.13);
  --rose:       #ff8a5c;
  --rose-soft:  rgba(255, 154, 77, 0.13);

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

  --btn-bg:       #ff9d4f;
  --btn-bg-hover: #ffb06e;
  --btn-ink:      #241102;
  --btn-shadow:   0 2px 0 #c96a22, 0 10px 26px -10px rgba(255, 157, 79, .6);
  --btn-shadow-hover: 0 3px 0 #c96a22, 0 14px 30px -10px rgba(255, 157, 79, .75);

  --kite-band-img: var(--kite-band-night-img);
  --kite-band: var(--kite-band-night);
  --far-kites: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='%23fff7e8'><circle cx='30' cy='40' r='.7' fill-opacity='.4'/><circle cx='150' cy='20' r='.6' fill-opacity='.3'/><circle cx='220' cy='150' r='.8' fill-opacity='.35'/><circle cx='70' cy='210' r='.6' fill-opacity='.3'/></g><rect x='186' y='96' width='4' height='5' rx='1' fill='%23ffb66b' fill-opacity='.35'/></svg>");
  --page-bg:
    radial-gradient(900px 420px at 86% -160px, rgba(255, 154, 77, 0.08), transparent 70%) no-repeat,
    radial-gradient(900px 420px at 8% -140px, rgba(79, 160, 200, 0.12), transparent 70%) no-repeat,
    var(--far-kites) repeat,
    var(--paper);
}

/* ── Materials ──
   The pieces every surface is built from, shared by the skin sheets
   (assets/css/skin/) and the plugin variants:
   - six kite papers (--kf-k1 … --kf-k6: red, marigold, teal, rani pink,
     cobalt, leaf) with --kf-kN-ink for lettering on paper and -soft
     washes;
   - the string of little kites (--kite-band, above) along the top of
     panels and sheets;
   - manja, the glass-coated kite string, as a twisted cord for rules and
     progress bars (--manja-cord), and the bamboo of a kite's frame with
     its nodes (--bamboo-h, --bamboo-v) for banner and card frames;
   - a two-tone corner of kite paper pasted on (--kf-corner), and the
     little paper tail a patang flies with, cut as a clip-path for tags
     (--kf-tail);
   - the turned-square kite shape itself (--kf-diamond, a clip-path) for
     icon tiles, the current page and ticks;
   - til-gul paper, cream flecked with sesame, and a row of chikki
     (--tilgul, --chikki) for stat slips and receipts;
   - the sky over the terraces by day and the evening after dark
     (--kf-sky, --dusk-bg), with the rooftops (--roofs, --pol-houses). */
:root {
  --kf-k1: #f04a23; --kf-k2: #ffb21e; --kf-k3: #10a5a0; --kf-k4: #e0287a; --kf-k5: #1f47c7; --kf-k6: #3aa655;
  --kf-k1-ink: #b8340f; --kf-k2-ink: #8a5300; --kf-k3-ink: #0b7471; --kf-k4-ink: #b01a5e; --kf-k5-ink: #1a3aa3; --kf-k6-ink: #23753a;
  --kf-k1-soft: rgba(240, 74, 35, .12); --kf-k2-soft: rgba(255, 178, 30, .2); --kf-k3-soft: rgba(16, 165, 160, .13); --kf-k4-soft: rgba(224, 40, 122, .11); --kf-k5-soft: rgba(31, 71, 199, .1); --kf-k6-soft: rgba(58, 166, 85, .13);
  --kf-diamond: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  --kf-tail: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%);
  --kf-tail-rtl: polygon(0 0, 100% 0, 100% 100%, 0 100%, 7px 50%);
  --manja-cord: repeating-linear-gradient(115deg, #e03a5c 0 3px, #ffc2cf 3px 4px, #b81f47 4px 7px);
  --manja-cord-gold: repeating-linear-gradient(115deg, #ffb21e 0 3px, #fff1c9 3px 4px, #d8860a 4px 7px);
  --bamboo-h: repeating-linear-gradient(90deg, #d9a25c 0 58px, #a8662d 58px 60px, #e8bb7c 60px 62px, #d9a25c 62px 120px);
  --bamboo-v: repeating-linear-gradient(180deg, #d9a25c 0 58px, #a8662d 58px 60px, #e8bb7c 60px 62px, #d9a25c 62px 120px);
  --bamboo-ink: #8a5a2b;
  --kf-corner: linear-gradient(135deg, var(--kf-k1) 0 14px, var(--kf-k2) 14px 22px, transparent 22px);
  --kf-corner-rtl: linear-gradient(225deg, var(--kf-k1) 0 14px, var(--kf-k2) 14px 22px, transparent 22px);
  --tilgul: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='%23b8732f' fill-opacity='.16'><ellipse cx='12' cy='14' rx='2.2' ry='1.2' transform='rotate(30 12 14)'/><ellipse cx='56' cy='30' rx='2.2' ry='1.2' transform='rotate(-40 56 30)'/><ellipse cx='30' cy='62' rx='2.2' ry='1.2' transform='rotate(70 30 62)'/><ellipse cx='76' cy='74' rx='2.2' ry='1.2' transform='rotate(10 76 74)'/></g></svg>");
  --tilgul-paper: #fbf3e3;
  --chikki: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='18' viewBox='0 0 44 18'><rect x='1' y='2' width='20' height='16' rx='2.5' fill='%23c98a3e'/><rect x='23' y='2' width='20' height='16' rx='2.5' fill='%23b8732f'/><g fill='%23f6ead2'><ellipse cx='6' cy='7' rx='1.4' ry='.8'/><ellipse cx='14' cy='12' rx='1.4' ry='.8'/><ellipse cx='9' cy='14' rx='1.2' ry='.7'/><ellipse cx='29' cy='8' rx='1.4' ry='.8'/><ellipse cx='37' cy='13' rx='1.4' ry='.8'/><ellipse cx='33' cy='5' rx='1.2' ry='.7'/></g></svg>") repeat-x left bottom / 44px 18px;
  --kf-sky: linear-gradient(180deg, #8fcdf0 0%, #cfe9f8 62%, #eef7fd 100%);
  --kf-sky-soft: linear-gradient(180deg, #d6ecfa 0%, #eef7fd 100%);
  --kf-paper-hi: #ffffff;
  --theme-600-ink: #ffffff;
  /* A product stood on the terrace: the parapet's coping along the foot,
     the winter sky behind and a pool of light round the product */
  --kf-stage:
    linear-gradient(180deg, transparent 0 84%, #e2cc9f 84% calc(84% + 3px), #f4e4c4 calc(84% + 3px)),
    radial-gradient(65% 55% at 50% 42%, #ffffff 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #cfe8f8, #eef7fd 84%);
}
html.dark {
  --kf-k1: #ff6a3d; --kf-k2: #ffbe3d; --kf-k3: #29c2bb; --kf-k4: #f0559a; --kf-k5: #6f8fff; --kf-k6: #56c46f;
  --kf-k1-ink: #ff9a78; --kf-k2-ink: #ffd27a; --kf-k3-ink: #6fdcd5; --kf-k4-ink: #ff8fbe; --kf-k5-ink: #a9bcff; --kf-k6-ink: #8fdc9f;
  --kf-k1-soft: rgba(255, 106, 61, .14); --kf-k2-soft: rgba(255, 190, 61, .14); --kf-k3-soft: rgba(41, 194, 187, .14); --kf-k4-soft: rgba(240, 85, 154, .14); --kf-k5-soft: rgba(111, 143, 255, .14); --kf-k6-soft: rgba(86, 196, 111, .14);
  --manja-cord: repeating-linear-gradient(115deg, #ff7a5c 0 3px, #ffe1c2 3px 4px, #e0502c 4px 7px);
  --bamboo-h: repeating-linear-gradient(90deg, #8a5a2b 0 58px, #5e3a17 58px 60px, #b07a40 60px 62px, #8a5a2b 62px 120px);
  --bamboo-v: repeating-linear-gradient(180deg, #8a5a2b 0 58px, #5e3a17 58px 60px, #b07a40 60px 62px, #8a5a2b 62px 120px);
  --bamboo-ink: #d9a25c;
  --tilgul-paper: #1f3447;
  --kf-sky: linear-gradient(180deg, #0c2232 0%, #173b55 70%, #2c4560 100%);
  --kf-sky-soft: linear-gradient(180deg, #132a3b 0%, #0c1d2b 100%);
  --kf-paper-hi: #183247;
  --theme-600-ink: #241102;
  --kf-stage:
    linear-gradient(180deg, transparent 0 84%, #2c4c66 84% calc(84% + 3px), #163448 calc(84% + 3px)),
    radial-gradient(65% 55% at 50% 42%, rgba(255, 214, 170, .3) 0%, rgba(255, 214, 170, 0) 72%),
    linear-gradient(180deg, #0c2232, #1f4259 84%);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board. By day a board is
   a patch of winter sky: white kite-paper cells on pale blue, the tiles
   rising from til cream through marigold, red and rani pink to teal,
   cobalt and the dusk; after dark it is the evening over the terraces,
   cells of deep dusk and the tiles glowing like sky lanterns. */
:root {
  --game-bg:        #e7f3fb;
  --game-surface:   #cfe4f3;
  --game-surface-2: #ffffff;
  --game-ink:       #14213d;
  --game-muted:     #5b6a86;
  --game-accent:    #1f47c7;
  --game-accent-ink:#ffffff;
  --game-good:      #23753a;
  --game-bad:       #d23a1a;
  --game-tile-1:    #f6ead2;
  --game-tile-2:    #ffd27a;
  --game-tile-3:    #ffb21e;
  --game-tile-4:    #f04a23;
  --game-tile-5:    #e0287a;
  --game-tile-6:    #10a5a0;
  --game-tile-7:    #1f47c7;
  --game-tile-8:    #0f2738;
  --game-radius:    7px;
  --game-font:      'Tillana', 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/kite-festival/assets/fonts/fonts.css";
  /* Arena chrome (assets/css/game-arena.css): the daytime sky, not a dark screen */
  --game-arena-screen: #e7f3fb;
  --game-arena-coins:  #b9701a;
  --game-arena-win:    #23753a;
  --game-arena-danger: #d23a1a;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%231f47c7' fill-opacity='.07'><path d='M24 14l8 9-8 9-8-9z'/><path d='M88 70l6 7-6 7-6-7z'/></g><g fill='none' stroke='%2314213d' stroke-opacity='.06' stroke-width='.8'><path d='M24 32q5 18-3 34'/><path d='M88 84q3 12-2 24'/></g></svg>");
}
html.dark {
  --game-bg:        #0c1d2b;
  --game-surface:   #081722;
  --game-surface-2: #163448;
  --game-ink:       #f4efe6;
  --game-muted:     #98a8b6;
  --game-accent:    #ff9d4f;
  --game-accent-ink:#241102;
  --game-good:      #56c46f;
  --game-bad:       #ff7a5c;
  --game-tile-1:    #1f4259;
  --game-tile-2:    #2c5a6e;
  --game-tile-3:    #1f8f8a;
  --game-tile-4:    #6f8fff;
  --game-tile-5:    #f0559a;
  --game-tile-6:    #ff6a3d;
  --game-tile-7:    #ff9d4f;
  --game-tile-8:    #ffd27a;
  --game-arena-screen: #0c1d2b;
  --game-arena-coins:  #ffd27a;
  --game-arena-win:    #56c46f;
  --game-arena-danger: #ff7a5c;
  --game-pattern:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%23fff7e8' fill-opacity='.18'><circle cx='14' cy='20' r='.9'/><circle cx='70' cy='12' r='.7'/><circle cx='104' cy='58' r='.8'/><circle cx='40' cy='88' r='.7'/></g><rect x='84' y='92' width='4' height='5' rx='1' fill='%23ffb66b' fill-opacity='.3'/></svg>");
}

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

html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-synthesis: none;
  letter-spacing: 0;
}
.display-italic { font-style: normal; }
/* Tillana 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: Tillana's
   figures are calligraphic and uneven in width. */
html .font-display.tabular-nums, html .font-display[class*="tabular"] { font-family: var(--font-ui); font-weight: 800; letter-spacing: 0; }

::selection { background: #ffd27a; color: #14213d; }

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

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

/* Section eyebrow — a small two-tone kite in front of the label */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 11px; height: 11px; margin: 0 2px;
  transform: rotate(45deg);
  background: linear-gradient(45deg, var(--kite-red) 50%, var(--kite-gold) 50%);
  box-shadow: 1px 1px 0 rgba(20, 33, 61, .2);
}
[dir="rtl"] .section-eyebrow::before { background: linear-gradient(-45deg, var(--kite-red) 50%, var(--kite-gold) 50%); }

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

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

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

[data-kf-phase][hidden] { display: none !important; }
[dir="rtl"] .kf-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 var(--red-soft); }
.ed-search { background: transparent; border: none; }

.hdr-strip, .hdr-strip .ed-status { color: rgba(245, 239, 228, 0.88); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffd27a; }

/* A string of little kites under the main header bar and wherever a
   section needs a border */
.kf-band { height: 14px; background: var(--kite-band), var(--paper); }
.kf-band--night { background: var(--kite-band-night), var(--night); }

/* The festival chip in the status strip */
.kf-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .06em; color: #ffd27a; }
.kf-strip-chip svg { width: 12px; height: 14px; flex-shrink: 0; }
/* The desktop strip shares its line with the menu; the second half of the
   chip joins it only where there is room for both, and the day's date
   gives way to the chip below 1440px. Where a long language still runs
   out of room, kite-festival.js marks the strip .kf-strip-tight and the
   chip keeps only the date or the festival's name. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1439px) { .kf-strip-chip__extra { display: none; } }
@media (min-width: 1024px) and (max-width: 1439px) { .hdr-strip .kf-strip-date { display: none; } }
.kf-strip-chip__short, .kf-strip-tight .kf-strip-chip__full { display: none; }
.kf-strip-tight .kf-strip-chip__short { display: inline; }

.ed-subnav { align-items: center; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.ed-subnav-inner { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 0.6rem 2rem; }
@media (min-width: 1280px) { .ed-subnav-inner { padding-left: 2.5rem; padding-right: 2.5rem; } }
.ed-subnav-eyebrow {
  flex-shrink: 0;
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); white-space: nowrap;
  padding-right: 1.25rem; border-right: 1px solid var(--rule);
}
[dir="rtl"] .ed-subnav-eyebrow { padding-right: 0; padding-left: 1.25rem; border-right: 0; border-left: 1px solid var(--rule); }
.ed-subnav-items { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.ed-subnav-item {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.85rem; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.ed-subnav-item svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.ed-subnav-item:hover { color: var(--ink); background: var(--paper-3); }
.ed-subnav-item.active { background: var(--btn-bg); color: var(--btn-ink); }
.ed-subnav-item:focus-visible { outline: 2px solid var(--theme-500); outline-offset: 2px; }

/* ── Links and buttons ── */
.ed-link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.92rem; font-weight: 700;
  color: var(--ink); text-decoration: none;
  padding-bottom: 2px; border-bottom: 2px solid var(--theme-500);
  transition: gap 0.18s ease;
}
.ed-link-arrow:hover { gap: 0.7rem; }

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

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

/* ── Cards: crisp paper 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(--dusk-bg); color: #f5efe4;
  border: 1px solid rgba(255, 190, 120, .3); border-radius: var(--radius);
  overflow: hidden;
}
.ed-plan-featured::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: var(--kite-band-night); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(245, 239, 228, .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(245, 239, 228, 0.88); text-decoration: none; transition: color 0.16s ease; }
.ed-topnav-link:hover, .ed-topnav-link.active { color: #ffd27a; }

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

.mobile-glass-header {
  background: rgba(241, 247, 252, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(12, 29, 43, 0.94); }

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

[x-cloak] { display: none !important; }

.ed-dropdown {
  background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ed-dropdown-item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.68rem 1rem;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.ed-dropdown-item:hover { background: var(--paper-3); color: var(--ink); }
.ed-section-cap {
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 0.9rem 1rem 0.4rem;
}

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

/* ── A small kite on its own (.kf-kite: --k1/--k2 papers, --s size,
   placed by the caller), drawn in CSS for the footer, splash and cards.
   The paper is a turned square, split along the spine; the tail hangs
   off its lower corner. ── */
.kf-kite {
  position: absolute; width: var(--s, 22px); height: var(--s, 22px);
  transform: rotate(var(--r, 0deg));
}
.kf-kite::before {
  content: ''; position: absolute; inset: 14.6%;
  transform: rotate(45deg);
  background: linear-gradient(45deg, var(--k2, #fff) 50%, var(--k1, #f04a23) 50%);
  box-shadow: inset 0 0 0 1px rgba(20, 33, 61, .18);
}
.kf-kite::after {
  content: ''; position: absolute; left: 50%; top: 94%; width: 30%; height: 26%; margin-left: -15%;
  background: var(--k1, #f04a23);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* A sky lantern: a paper bag of light rising on a winter evening
   (.kf-lantern, placed by --x/--y, sized by --k, timed by --w) */
.kf-lantern {
  position: absolute; left: var(--x); top: var(--y);
  width: calc(12px * var(--k, 1)); height: calc(15px * var(--k, 1));
  border-radius: 40% 40% 18% 18% / 50% 50% 14% 14%;
  background: radial-gradient(ellipse 60% 55% at 50% 78%, #fff6d6, #ffb862 55%, #f2722f 100%);
  box-shadow: 0 0 calc(14px * var(--k, 1)) calc(3px * var(--k, 1)) rgba(255, 150, 70, .45);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .kf-lantern { animation: kf-drift 9s ease-in-out 1 forwards; animation-delay: var(--w, 0s); }
}
@keyframes kf-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -10px); } }

/* ── Dark/light toggle: a kite swoops over the page ──
   assets/themes/kite-festival/assets/js/kite-festival.js registers it: a
   great paper kite dives in from the lower corner on its string until its
   paper covers the screen, the mode flips behind it, and it climbs away
   to a speck in the far corner of the new sky. */
.px-fx--kf-swoop { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--kf-swoop.is-to-dark { --fx-1: #0e2536; --fx-2: #1f4560; --fx-3: #ff9d4f; --fx-bone: #ffcf9a; }
.px-fx--kf-swoop.is-to-light { --fx-1: #bfe0f5; --fx-2: #f4f9fd; --fx-3: #ffb21e; --fx-bone: #8a5a2b; }
.px-fx--kf-swoop .kf-fx-kite {
  position: absolute; left: 50%; top: 50%;
  width: var(--kf-size); height: calc(var(--kf-size) * 1.18);
  margin: calc(var(--kf-size) * -.5) 0 0 calc(var(--kf-size) * -.5);
  transform: translate(-46vw, 52vh) scale(.03) rotate(-24deg);
  transform-origin: 50% 42.4%;
  transition: transform .62s cubic-bezier(.55, 0, .25, 1);
  filter: drop-shadow(0 30px 40px rgba(10, 25, 40, .35));
}
.px-fx--kf-swoop.is-rtl .kf-fx-kite { transform: translate(46vw, 52vh) scale(.03) rotate(24deg); }
.px-fx--kf-swoop .kf-fx-kite svg { display: block; width: 100%; height: 100%; overflow: visible; }
.px-fx--kf-swoop .kf-fx-p1 { fill: var(--fx-1); }
.px-fx--kf-swoop .kf-fx-p2 { fill: var(--fx-2); }
.px-fx--kf-swoop .kf-fx-p3 { fill: var(--fx-3); }
.px-fx--kf-swoop .kf-fx-bone { fill: none; stroke: var(--fx-bone); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.px-fx--kf-swoop.is-in .kf-fx-kite { transform: translate(0, 0) scale(1) rotate(0deg); }
.px-fx--kf-swoop.is-away .kf-fx-kite {
  transform: translate(40vw, -44vh) scale(.02) rotate(18deg);
  transition: transform .95s cubic-bezier(.5, 0, .3, 1);
}
.px-fx--kf-swoop.is-rtl.is-away .kf-fx-kite { transform: translate(-40vw, -44vh) scale(.02) rotate(-18deg); }
/* Its manja, taut from the lower corner while it dives and slack as it goes */
.px-fx--kf-swoop .kf-fx-line {
  position: absolute; left: 0; bottom: 0; width: 160vmax; height: 2px; transform-origin: 0 50%;
  transform: rotate(-38deg) scaleX(0);
  background: linear-gradient(90deg, var(--fx-3), rgba(255, 255, 255, .8));
  transition: transform .5s ease;
}
.px-fx--kf-swoop.is-rtl .kf-fx-line { left: auto; right: 0; transform-origin: 100% 50%; transform: rotate(38deg) scaleX(0); }
.px-fx--kf-swoop.is-away .kf-fx-line { transform: rotate(-38deg) scaleX(1); opacity: 0; transition: transform .7s ease, opacity .5s ease .45s; }
.px-fx--kf-swoop.is-rtl.is-away .kf-fx-line { transform: rotate(38deg) scaleX(1); }

/* ── Footer: the rooftops at dusk in both modes — the skyline along its
   top edge, kites still up over the parapets and the first sky lanterns ── */
.kf-footer {
  --paper:     #0f2738;
  --paper-2:   #163448;
  --paper-3:   #1f4259;
  --ink:       #f5efe4;
  --ink-2:     #e2dccf;
  --ink-soft:  #a9b8c4;
  --rule:      rgba(245, 239, 228, 0.15);
  --rule-soft: rgba(245, 239, 228, 0.08);
  --theme-500: #ffb06e; --theme-600: #ffb06e; --theme-700: #ffc795;
  --theme-500-rgb: 255, 176, 110;
  position: relative;
}
html.dark .kf-footer { --paper: #081722; --paper-2: #132a3b; --paper-3: #1b3549; }
.kf-footer-top { position: relative; height: 118px; margin-bottom: -1px; overflow: hidden; }
.kf-footer-top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='480' height='60' viewBox='0 0 480 60'><path fill='%230f2738' d='M0 60V30h18v-6h40v6h6V18h34v12h14v-8h10v-6h22v6h10v8h30V26h8V8h4v18h12V20h46v10h18v-4h30v-14h26v14h12v-6h28v6h20V22h40v8h8v-4h20v4h30V16h14v-6h20v20h16V60Z'/><g fill='%23ffb862'><rect x='68' y='38' width='5' height='6' fill-opacity='.85'/><rect x='232' y='40' width='5' height='6' fill-opacity='.6'/><rect x='300' y='34' width='5' height='6' fill-opacity='.8'/><rect x='420' y='38' width='5' height='6' fill-opacity='.7'/></g><g fill='none' stroke='%230f2738' stroke-width='1'><path d='M118 16q20 6 40 0'/><path d='M343 12V2M338 4h10'/></g></svg>") repeat-x left bottom / 480px 60px;
}
html.dark .kf-footer-top::after { filter: brightness(.62); }
.kf-footer-top .kf-kite { z-index: 1; }
/* Each footer kite's manja runs down behind the parapets */
.kf-footer-top .kf-kite > i {
  position: absolute; left: 50%; top: 110%; width: 1px; height: 120px;
  background: linear-gradient(180deg, rgba(20, 33, 61, .45), rgba(20, 33, 61, 0));
  transform-origin: 50% 0; transform: rotate(var(--sr, 20deg));
}
html.dark .kf-footer-top .kf-kite > i { background: linear-gradient(180deg, rgba(255, 207, 154, .5), rgba(255, 207, 154, 0)); }
.kf-footer a:hover { color: #ffd27a; }
html .kf-footer .ed-footer-heading { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: 0; text-transform: none; color: #ffd27a; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }
@media (prefers-reduced-motion: no-preference) {
  .kf-footer-top .kf-kite { animation: kf-bob 6s ease-in-out 2 forwards; animation-delay: var(--w, 0s); }
}
@keyframes kf-bob { 0%, 100% { transform: rotate(var(--r, 0deg)) translate(0, 0); } 50% { transform: rotate(calc(var(--r, 0deg) + 5deg)) translate(4px, -5px); } }

html .ed-floating-nav {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .92rem; font-weight: 600; color: var(--ink-2); }
html .ed-floating-nav .ed-floating-link:hover { background: var(--paper-3); color: var(--ink); }
html body .ed-floating-nav a.ed-floating-link.active { background: var(--btn-bg); color: var(--btn-ink) !important; }
html body .ed-floating-nav a.ed-floating-link.active > span { color: var(--btn-ink) !important; }

/* The newsletter on a sheet of til-gul paper: sesame-flecked cream with
   chikki along its foot */
html body .kf-footer .ed-newsletter {
  position: relative;
  background:
    radial-gradient(260px 160px at 100% 0%, rgba(255, 210, 122, .5), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'><g fill='%23b8732f' fill-opacity='.16'><ellipse cx='12' cy='14' rx='2.2' ry='1.2' transform='rotate(30 12 14)'/><ellipse cx='56' cy='30' rx='2.2' ry='1.2' transform='rotate(-40 56 30)'/><ellipse cx='30' cy='62' rx='2.2' ry='1.2' transform='rotate(70 30 62)'/><ellipse cx='76' cy='74' rx='2.2' ry='1.2' transform='rotate(10 76 74)'/></g></svg>"),
    #fbf3e3;
  color: #14213d;
  border: 0; border-radius: 22px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .55);
  overflow: hidden;
  padding-bottom: 2.6rem;
}
html body .kf-footer .ed-newsletter::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='18' viewBox='0 0 44 18'><rect x='1' y='2' width='20' height='16' rx='2.5' fill='%23c98a3e'/><rect x='23' y='2' width='20' height='16' rx='2.5' fill='%23b8732f'/><g fill='%23f6ead2'><ellipse cx='6' cy='7' rx='1.4' ry='.8'/><ellipse cx='14' cy='12' rx='1.4' ry='.8'/><ellipse cx='9' cy='14' rx='1.2' ry='.7'/><ellipse cx='29' cy='8' rx='1.4' ry='.8'/><ellipse cx='37' cy='13' rx='1.4' ry='.8'/><ellipse cx='33' cy='5' rx='1.2' ry='.7'/></g></svg>") repeat-x left bottom / 44px 18px;
}
html body .kf-footer .ed-newsletter::after { display: none; }
html body .kf-footer .ed-newsletter, html body .kf-footer .ed-newsletter * { --ink: #14213d; --ink-2: #33415f; }
html body .kf-footer .ed-newsletter h4, html.dark body .kf-footer .ed-newsletter h4 { color: #14213d !important; font-family: var(--font-display); font-weight: 700; }
html.dark body .kf-footer .ed-newsletter p:not(#newsletter-msg) { color: #33415f !important; }
html body .kf-footer .ed-newsletter-input, html.dark body .kf-footer .ed-newsletter input[type="email"].ed-newsletter-input:not(.no-dark):not([type="checkbox"]) { background: #ffffff !important; color: #14213d !important; border: 1px solid rgba(20, 33, 61, .18) !important; border-radius: 12px; }
html body .kf-footer .ed-newsletter-input::placeholder { color: #687590; }
html body .kf-footer .ed-newsletter-input:focus { border-color: #1f47c7 !important; box-shadow: 0 0 0 3px rgba(31, 71, 199, .15); }
html body .kf-footer .ed-newsletter-btn {
  background: #1f47c7; color: #ffffff; border: 0; border-radius: 12px;
  font-family: var(--font-ui); font-weight: 800;
}
/* After dark the button takes the night's marigold, like every other button */
html.dark body .kf-footer .ed-newsletter-btn { background: #ff9d4f; color: #241102; box-shadow: 0 3px 0 #c8641c; }
html body .kf-footer .ed-newsletter-age { color: #33415f; }

/* Logo card: the light-mode logo on a sheet of white kite paper with a
   two-tone corner pasted on, wherever it sits on the dusk (footer, app
   splash). */
.kf-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.7rem;
  background: linear-gradient(135deg, #f04a23 0 18px, #ffb21e 18px 30px, transparent 30px), #ffffff;
  border-radius: 6px;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(20, 33, 61, .08);
}
[dir="rtl"] .kf-plaque { background: linear-gradient(225deg, #f04a23 0 18px, #ffb21e 18px 30px, transparent 30px), #ffffff; }

/* 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, 29, 43, 0.94) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter { background: var(--paper) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(19, 42, 59, 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, #1b3549, #0c1d2b, #22344a, #081722) !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 dusk. 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: #081722 !important;
  border-color: rgba(244, 239, 230, .2) !important;
  color: #f4efe6 !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 dusk. */
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: #081722;
  --paper: #f4efe6;
  border-color: rgba(255, 190, 120, .3);
}

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

/* ── Login / register / forgot-password brand panel: the dusk over the
   rooftops, a kite still up in its corner ── */
:root, html.dark {
  --brand-gradient: var(--dusk-bg);
  --brand-glow-1: rgba(255, 157, 79, 0.28);
  --brand-glow-2: rgba(79, 160, 200, 0.3);
}
.brand-panel { background: var(--roofs-dusk) repeat-x left bottom / 480px 60px, var(--dusk-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is a two-tone kite. */
html .brand-panel::after {
  content: ''; position: absolute;
  top: 10% !important; right: 12% !important; left: auto !important; bottom: auto !important;
  width: 86px !important; height: 86px !important;
  border-radius: 2px !important; opacity: .95 !important; filter: none !important;
  transform: rotate(45deg) !important;
  background: radial-gradient(circle, #ffd27a 0 14%, transparent 15%), linear-gradient(45deg, #ff6a3d 50%, #fff3e2 50%) !important;
  box-shadow: 0 0 50px 10px rgba(255, 157, 79, .22) !important;
}
[dir="rtl"] .brand-panel::after { right: auto !important; left: 12% !important; }
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(245, 239, 228, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 700 !important; }

/* ── Wallet balance card: the evening sky over the terraces, a two-tone
   kite flying in its corner and the parapets along its foot ── */
html body .wallet-hero {
  position: relative;
  background: var(--roofs-dusk) repeat-x left bottom / 480px 60px, var(--dusk-bg);
  border: 1px solid rgba(255, 190, 120, .25);
  border-radius: 22px;
  box-shadow: var(--shadow-md);
  color: #f5efe4;
  overflow: hidden;
  padding-bottom: 4.6rem !important;
}
html body .wallet-hero::before {
  content: ''; position: absolute; right: 34px; top: 92px; width: 44px; height: 44px; left: auto; bottom: auto;
  border: 0; border-radius: 0;
  transform: rotate(45deg);
  background: radial-gradient(circle, #ffd27a 0 16%, transparent 17%), linear-gradient(45deg, #ff6a3d 50%, #fff3e2 50%);
  box-shadow: 0 0 30px 6px rgba(255, 157, 79, .25);
  pointer-events: none;
}
/* Its manja, falling away to the roofs */
html body .wallet-hero::after {
  content: ''; position: absolute; right: 55px; top: 152px; width: 1.5px; height: 120px; left: auto;
  background: linear-gradient(180deg, rgba(255, 207, 154, .7), rgba(255, 207, 154, 0));
  transform-origin: 50% 0; transform: rotate(14deg);
  pointer-events: none;
}
html[dir="rtl"] body .wallet-hero::before { right: auto; left: 30px; }
html[dir="rtl"] body .wallet-hero::after { right: auto; left: 52px; transform: rotate(-14deg); }
@media (max-width: 639px) {
  html body .wallet-hero::before { width: 34px; height: 34px; top: 54px; right: 22px; }
  html body .wallet-hero::after { right: 38px; top: 104px; height: 100px; }
  html[dir="rtl"] body .wallet-hero::before { right: auto; left: 22px; }
  html[dir="rtl"] body .wallet-hero::after { right: auto; left: 38px; }
}
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-balance-num {
  font-family: var(--font-ui); font-variation-settings: normal; font-weight: 800; letter-spacing: -.02em;
  color: #ffffff; overflow-wrap: normal; font-variant-numeric: lining-nums tabular-nums;
}
html body .wallet-hero-btn-primary { background: #ff9d4f; color: #241102; border: 0; font-family: var(--font-ui); font-weight: 800; border-radius: 12px; }
html body .wallet-hero-btn-primary:hover { background: #ffb06e; color: #241102; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #f5efe4; border-color: rgba(245, 239, 228, .45); border-radius: 12px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): a box tied
   with a string of little kites ── */
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(--kite-band), var(--paper-2); opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

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

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

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's cobalt. */
html .bg-purple-600, html .bg-indigo-600, html .bg-violet-600 { background-color: var(--theme-500); }
html .hover\:bg-purple-700:hover, html .hover\:bg-indigo-700:hover, html .hover\:bg-violet-700:hover { background-color: var(--theme-600); }
html .text-purple-500, html .text-purple-600, html .text-indigo-500, html .text-indigo-600, html .text-violet-600 { color: var(--theme-600); }
/* Solid purple action buttons (coupon Apply and the like) sit beside a
   field and take the colour of the main buttons. */
html .bg-purple-600.text-white, html .bg-indigo-600.text-white, html .bg-violet-600.text-white {
  background-color: var(--btn-bg) !important; color: var(--btn-ink) !important; border-radius: 12px;
}
html .bg-purple-50, html .bg-indigo-50, html .bg-violet-50, html .bg-purple-100 { background-color: var(--gold-soft); }
html.dark .bg-purple-50, html.dark .bg-indigo-50, html.dark .bg-violet-50 { background-color: var(--gold-soft) !important; }
html .border-purple-200, html .border-indigo-200, html .border-violet-200 { border-color: rgba(31, 71, 199, .3); }
html.dark .border-violet-200 { border-color: rgba(255, 154, 77, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(31, 71, 199, .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); }

/* ── Winners page cards ── */
html .wnc { border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: var(--shadow); }
html .wnc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* ── Cart and checkout: the order total under a string of kites ──
   Picked out by what the panels contain, so no copies of their markup
   (or their Alpine hooks) live in the theme. */
html [id^="cart-row-"] { background: var(--paper-2) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; }
html .rounded-2xl:has(> div > div > #summary-total),
html section.rounded-2xl:has([x-text="totalDisplay()"]) {
  position: relative;
  background: var(--paper-2) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
  padding-top: 1.6rem !important;
}
html .rounded-2xl:has(> div > div > #summary-total)::before,
html section.rounded-2xl:has([x-text="totalDisplay()"])::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: var(--kite-band);
}
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--theme-600);
  overflow-wrap: normal;
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip .ed-status, .hdr-strip .ed-status * { white-space: nowrap; }
.hdr-strip .ed-status { font-size: 11px; letter-spacing: .05em; }
@media (max-width: 1023px) { .hdr-strip .kf-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 flown on its own kite — a patch of sky with
   the prize on a paper kite, its tail and string trailing ── */
.kf-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;
}
.kf-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.kf-win__sky {
  position: relative;
  padding: 3rem 14px 1.6rem;
  background: var(--pol-houses) repeat-x -60px bottom / 392px 49px, linear-gradient(180deg, #8fcdf0, #cfe9f8 70%, #e9f5fc);
}
.kf-win:nth-child(3n+2) .kf-win__sky { background-position: -200px bottom, 0 0; }
.kf-win:nth-child(3n+3) .kf-win__sky { background-position: -300px bottom, 0 0; }
html.dark .kf-win__sky { background: var(--pol-houses-dusk) repeat-x -60px bottom / 392px 49px, linear-gradient(180deg, #0c2232, #173b55 70%, #2c4560); }
.kf-win__kite {
  --k1: #f04a23; --k2: #ffffff; --k3: #ffb21e;
  position: relative; display: block; width: min(76%, 11.5rem); margin: 0 auto;
}
.kf-win:nth-child(3n+2) .kf-win__kite { --k1: #1f47c7; --k2: #ffb21e; --k3: #f04a23; }
.kf-win:nth-child(3n+3) .kf-win__kite { --k1: #10a5a0; --k2: #ffffff; --k3: #e0287a; }
.kf-win__kite > svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 12px rgba(20, 33, 61, .3)); }
.kf-win__window {
  position: absolute; left: 50%; top: 42.4%; width: 50%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #ffffff;
  box-shadow: inset 0 0 0 3px rgba(20, 33, 61, .1), 0 0 0 3px rgba(255, 255, 255, .55);
  overflow: hidden;
}
.kf-win__window img { width: 78%; height: 78%; object-fit: contain; transition: transform .3s ease; }
.kf-win:hover .kf-win__window img { transform: scale(1.06); }
.kf-win__sky > .absolute { z-index: 3; top: .95rem; }
.kf-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: #14213d; background: #ffffff; border-radius: 6px;
  box-shadow: 0 1px 0 rgba(20, 33, 61, .15);
}
.kf-win__tag--open { color: #241102; background: #ffb21e; }
.kf-win__tag--done { color: #ffffff; background: #0f8f8a; }
.kf-win__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.kf-win__label { padding-top: .6rem; border-top: 1px dashed var(--rule); }
.kf-win__price { font-family: var(--font-ui); font-weight: 800; font-size: clamp(1.15rem, 4vw, 1.35rem); line-height: 1; color: var(--theme-600); overflow-wrap: normal; white-space: nowrap; }
.kf-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; }
.kf-win__cart, .kf-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 12px; font-weight: 700;
}
.kf-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); }
.kf-win__cart:hover { border-color: var(--theme-500); color: var(--theme-600); }
.kf-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.kf-win__claimed {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.75rem; padding: .5rem;
  font-size: .9rem; font-weight: 700;
  color: var(--theme-600); background: var(--rose-soft); border-radius: 12px;
}

/* 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: #23763a; --px-warn: #aa6508; --px-crit: #d13a1a; --px-info: #1f47c7; }
html.dark:root { --px-good: #82d395; --px-warn: #fbbf23; --px-crit: #ffac99; --px-info: #adc0ff; }

/* Changing language, the scene (kite-festival.js): a kite flies in with the
   old name on the banner at its tail before the reload; after it a gust
   turns it over and its other side carries the new name. The two sides are
   stacked in one grid cell and turned together, so the kite is as tall as
   its longer banner. The string is drawn first and the kite, tail and
   banner are positioned so they cover it. The sky is the same on both pages, so the reload never
   shows. */
.kf-lang-stage { overflow: hidden; background: color-mix(in srgb, var(--night) 46%, transparent); }
.kf-lang-sky {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: min(560px, 100%); box-sizing: border-box; padding: 22px 16px 14px; overflow: clip;
  background: var(--kf-sky); color: var(--ink); border-radius: 18px;
  box-shadow: 0 0 0 1px var(--rule), 0 34px 70px -30px rgba(0, 0, 0, .6);
  font-family: var(--font-ui);
}
.kf-lang-cloud {
  position: absolute; height: 18px; border-radius: 18px; pointer-events: none;
  background: color-mix(in srgb, var(--paper-2) 72%, transparent);
  box-shadow: 14px -8px 0 2px color-mix(in srgb, var(--paper-2) 72%, transparent);
}
.kf-lang-c1 { top: 22px; right: 12%; width: 64px; }
.kf-lang-c2 { top: 64%; left: 7%; width: 48px; opacity: .7; }
.kf-lang-gust { position: absolute; inset: 0; pointer-events: none; }
.kf-lang-gust i {
  position: absolute; left: 6%; top: 30%; width: 34%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--paper-2), transparent); opacity: 0;
}
.kf-lang-gust i:nth-child(2) { left: 30%; top: 44%; width: 46%; }
.kf-lang-gust i:nth-child(3) { left: 52%; top: 22%; width: 30%; }
.kf-lang-flight { position: relative; display: grid; max-width: 100%; perspective: 900px; }
.kf-lang-turn { display: grid; transform-style: preserve-3d; }
.kf-lang-face {
  position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.kf-lang-back { transform: rotateY(180deg); }
.kf-lang-string {
  position: absolute; right: 50%; top: 60px; width: 1px; height: 280px;
  background: color-mix(in srgb, var(--ink) 45%, transparent); transform: rotate(38deg); transform-origin: 0 0;
}
.kf-lang-kite, .kf-lang-tail, .kf-lang-banner { position: relative; }
.kf-lang-kite {
  display: block; width: 92px; height: 112px;
  clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%);
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(0, 0, 0, .3) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(40% - 1px), rgba(0, 0, 0, .3) calc(40% - 1px) calc(40% + 1px), transparent calc(40% + 1px)),
    conic-gradient(from 0deg at 50% 40%, var(--kf-k1) 0 90deg, var(--kf-k2) 0 180deg, var(--kf-k3) 0 270deg, var(--kf-k4) 0);
}
.kf-lang-back .kf-lang-kite {
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(0, 0, 0, .3) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(40% - 1px), rgba(0, 0, 0, .3) calc(40% - 1px) calc(40% + 1px), transparent calc(40% + 1px)),
    conic-gradient(from 0deg at 50% 40%, var(--kf-k5) 0 90deg, var(--kf-k6) 0 180deg, var(--kf-k2) 0 270deg, var(--kf-k1) 0);
}
.kf-lang-tail {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 2px 0;
  background: linear-gradient(90deg, transparent calc(50% - .5px), var(--ink-soft) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
}
.kf-lang-tail i { display: block; width: 12px; height: 9px; clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 50% 50%, 0 100%); background: var(--kf-k1); }
.kf-lang-tail i:nth-child(2) { background: var(--kf-k2); transform: translateX(-4px); }
.kf-lang-tail i:nth-child(3) { background: var(--kf-k3); transform: translateX(3px); }
.kf-lang-back .kf-lang-tail i:nth-child(1) { background: var(--kf-k4); }
.kf-lang-back .kf-lang-tail i:nth-child(3) { background: var(--kf-k5); }
.kf-lang-banner {
  max-width: 100%; box-sizing: border-box; padding: 6px 22px 7px 14px; text-align: center; overflow-wrap: anywhere;
  background: var(--paper-2); color: var(--ink); box-shadow: inset 4px 0 0 var(--kf-k1);
  clip-path: var(--kf-tail);
  font: 400 clamp(22px, 6.4vw, 32px)/1.15 var(--font-display);
}
.kf-lang-back .kf-lang-banner { color: var(--theme-600); box-shadow: inset 4px 0 0 var(--kf-k5); }
.kf-lang-foot { position: relative; display: flex; align-items: center; gap: 12px; color: var(--ink-2); font: 700 12px/1 var(--font-ui); letter-spacing: .14em; }
.kf-lang-side { display: inline-flex; align-items: center; gap: 6px; }
.kf-lang-side img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.kf-lang-arrow { color: var(--kf-k1-ink); }

/* Out: the sky opens and the kite climbs in on the wind. */
.px-lang-stage-out .kf-lang-sky { animation: kf-lang-sky-in .3s ease-out both; }
.px-lang-stage-out .kf-lang-flight { animation: kf-lang-fly .75s cubic-bezier(.3, .7, .4, 1) .12s both; }
/* In: from where it hangs, a gust turns it over, then the sky lifts. */
.px-lang-stage-in .kf-lang-gust i { animation: kf-lang-gust .55s ease-out .05s both; }
.px-lang-stage-in .kf-lang-gust i:nth-child(2) { animation-delay: .12s; }
.px-lang-stage-in .kf-lang-gust i:nth-child(3) { animation-delay: .2s; }
.px-lang-stage-in .kf-lang-turn { animation: kf-lang-turn .6s cubic-bezier(.45, 0, .3, 1) .18s both; }
.px-lang-stage-in .kf-lang-sky { animation: kf-lang-sky-out .25s ease-in 1s both; }
@keyframes kf-lang-sky-in { from { transform: translateY(16px); opacity: 0; } }
@keyframes kf-lang-sky-out { to { transform: translateY(-16px); opacity: 0; } }
@keyframes kf-lang-fly {
  0%   { transform: translate(-60%, 40%) rotate(-24deg) scale(.6); opacity: 0; }
  30%  { opacity: 1; }
  75%  { transform: translate(4%, -3%) rotate(6deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes kf-lang-gust {
  0%   { transform: translateX(-40%); opacity: 0; }
  35%  { opacity: .9; }
  100% { transform: translateX(70%); opacity: 0; }
}
@keyframes kf-lang-turn {
  0%   { transform: none; }
  55%  { transform: rotateY(110deg) rotate(-6deg); }
  100% { transform: rotateY(180deg); }
}
@media (max-width: 460px) {
  .kf-lang-sky { padding: 18px 12px 12px; }
  .kf-lang-kite { width: 76px; height: 92px; }
  .kf-lang-string { top: 50px; }
  .kf-lang-c2 { display: none; }
}

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

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

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