/* ============================================================
   FESTA JUNINA THEME — the arraiá, the June party in the square.
   Same class surface as editorial/theme.css, so shared header,
   footer, drawer and component classes stay styled.

   Built from the things of the festa: strings of bandeirinhas
   (notched paper pennants), chita (big-flowered cotton print) and
   gingham, painted wooden stalls, straw hats, corn, pipoca and the
   fogueira. Chita red, corn yellow and bunting blue on warm paper
   by day (the default); the party at night around the bonfire, in
   firelight under an indigo sky.

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

:root {
  --font-display: 'Lilita One', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-ui:      'Nunito', 'Inter', system-ui, sans-serif;

  --paper:        #fffaf0;
  --paper-2:      #ffffff;
  --paper-3:      #fbeedb;
  --ink:          #1f1b4d;
  --ink-2:        #433e78;
  --ink-soft:     #7671a0;
  --rule:         rgba(31, 27, 77, 0.13);
  --rule-soft:    rgba(31, 27, 77, 0.07);
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 1px 2px rgba(31, 27, 77, .07), 0 6px 16px -8px rgba(31, 27, 77, .2);
  --shadow-md:    0 2px 4px rgba(31, 27, 77, .07), 0 18px 34px -14px rgba(31, 27, 77, .32);

  /* Chita red */
  --theme-50:  #fdeef0;
  --theme-100: #fbd5da;
  --theme-200: #f5a8b2;
  --theme-300: #ec7383;
  --theme-400: #e2475c;
  --theme-500: #d7263d;
  --theme-600: #b81d33;
  --theme-700: #94162a;
  --theme-800: #6f1020;
  --theme-900: #4a0a15;
  --theme-500-rgb: 215, 38, 61;
  --theme-600-rgb: 184, 29, 51;

  /* The bandeirinha colours */
  --b1: #e63946; --b2: #ffc233; --b3: #2463d6; --b4: #1f9d55; --b5: #ff7a1a; --b6: #ff5c9a;
  --indigo: #1f1b4d;
  --twine: #7a5a3a;
  --straw: #efc15a;
  --rose-soft: rgba(215, 38, 61, 0.08);

  /* Names other themes' shared markup reaches for */
  --gold:       #c98a00;
  --gold-2:     #ffc233;
  --gold-soft:  rgba(215, 38, 61, 0.08);
  --gold-ink:   #1f1b4d;
  --felt:       #1f1b4d;
  --felt-2:     #151236;
  --on-felt:    #fff3dc;
  --on-felt-soft: rgba(255, 243, 220, 0.78);
  --peacock:    #1f9d55;
  --peacock-soft: rgba(31, 157, 85, 0.11);
  --red:        #d7263d;
  --red-soft:   rgba(215, 38, 61, 0.08);
  --rose:       #d7263d;

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

  /* Buttons: chita red with a painted-board edge by day, firelight by night */
  --btn-bg:       #d7263d;
  --btn-bg-hover: #d71f37;
  --btn-ink:      #ffffff;
  --btn-shadow:   0 3px 0 #8f1426, 0 8px 18px -10px rgba(143, 20, 38, .8);
  --btn-shadow-hover: 0 4px 0 #8f1426, 0 12px 22px -10px rgba(143, 20, 38, .8);

  /* A string of bandeirinhas: the theme's border band. Twine by day,
     a pale cord by night. */
  --bunting: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='26' viewBox='0 0 132 26'><path d='M0 3 Q66.0 7 132 3' fill='none' stroke='%237a5a3a' stroke-width='1.3'/><g transform='rotate(2.9 11.0 3.0)'><path d='M3.5 3.0 H18.5 V22.0 L11.0 16.0 L3.5 22.0 Z' fill='%23e63946'/></g><g transform='rotate(1.7 33.0 3.9)'><path d='M25.5 3.9 H40.5 V22.9 L33.0 16.9 L25.5 22.9 Z' fill='%23ffc233'/></g><g transform='rotate(0.6 55.0 4.3)'><path d='M47.5 4.3 H62.5 V23.3 L55.0 17.3 L47.5 23.3 Z' fill='%232463d6'/></g><g transform='rotate(-0.6 77.0 4.3)'><path d='M69.5 4.3 H84.5 V23.3 L77.0 17.3 L69.5 23.3 Z' fill='%231f9d55'/></g><g transform='rotate(-1.7 99.0 3.9)'><path d='M91.5 3.9 H106.5 V22.9 L99.0 16.9 L91.5 22.9 Z' fill='%23ff7a1a'/></g><g transform='rotate(-2.9 121.0 3.0)'><path d='M113.5 3.0 H128.5 V22.0 L121.0 16.0 L113.5 22.0 Z' fill='%23ff5c9a'/></g></svg>") repeat-x left top / 132px 26px;
  /* Deeper swags for the tops of the hero and the night scenes */
  --swag-a: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='58' viewBox='0 0 260 58'><path d='M0 2 Q130.0 20 260 2' fill='none' stroke='%237a5a3a' stroke-width='1.5'/><g transform='rotate(6.9 16.2 3.5)'><path d='M5.2 3.5 H27.2 V31.5 L16.2 23.5 L5.2 31.5 Z' fill='%23e63946'/></g><g transform='rotate(4.9 48.8 6.9)'><path d='M37.8 6.9 H59.8 V34.9 L48.8 26.9 L37.8 34.9 Z' fill='%23ffc233'/></g><g transform='rotate(3.0 81.2 9.1)'><path d='M70.2 9.1 H92.2 V37.1 L81.2 29.1 L70.2 37.1 Z' fill='%232463d6'/></g><g transform='rotate(1.0 113.8 10.3)'><path d='M102.8 10.3 H124.8 V38.3 L113.8 30.3 L102.8 38.3 Z' fill='%231f9d55'/></g><g transform='rotate(-1.0 146.2 10.3)'><path d='M135.2 10.3 H157.2 V38.3 L146.2 30.3 L135.2 38.3 Z' fill='%23ff7a1a'/></g><g transform='rotate(-3.0 178.8 9.1)'><path d='M167.8 9.1 H189.8 V37.1 L178.8 29.1 L167.8 37.1 Z' fill='%23ff5c9a'/></g><g transform='rotate(-4.9 211.2 6.9)'><path d='M200.2 6.9 H222.2 V34.9 L211.2 26.9 L200.2 34.9 Z' fill='%23e63946'/></g><g transform='rotate(-6.9 243.8 3.5)'><path d='M232.8 3.5 H254.8 V31.5 L243.8 23.5 L232.8 31.5 Z' fill='%23ffc233'/></g></svg>");
  --swag-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='72' viewBox='0 0 300 72'><path d='M0 1 Q150.0 35 300 1' fill='none' stroke='%237a5a3a' stroke-width='1.6'/><g transform='rotate(11.2 18.8 4.4)'><path d='M6.8 4.4 H30.8 V34.4 L18.8 25.4 L6.8 34.4 Z' fill='%23e63946'/></g><g transform='rotate(8.1 56.2 10.8)'><path d='M44.2 10.8 H68.2 V40.8 L56.2 31.8 L44.2 40.8 Z' fill='%23ffc233'/></g><g transform='rotate(4.9 93.8 15.0)'><path d='M81.8 15.0 H105.8 V45.0 L93.8 36.0 L81.8 45.0 Z' fill='%232463d6'/></g><g transform='rotate(1.6 131.2 17.1)'><path d='M119.2 17.1 H143.2 V47.1 L131.2 38.1 L119.2 47.1 Z' fill='%231f9d55'/></g><g transform='rotate(-1.6 168.8 17.1)'><path d='M156.8 17.1 H180.8 V47.1 L168.8 38.1 L156.8 47.1 Z' fill='%23ff7a1a'/></g><g transform='rotate(-4.9 206.2 15.0)'><path d='M194.2 15.0 H218.2 V45.0 L206.2 36.0 L194.2 45.0 Z' fill='%23ff5c9a'/></g><g transform='rotate(-8.1 243.8 10.8)'><path d='M231.8 10.8 H255.8 V40.8 L243.8 31.8 L231.8 40.8 Z' fill='%23e63946'/></g><g transform='rotate(-11.2 281.2 4.4)'><path d='M269.2 4.4 H293.2 V34.4 L281.2 25.4 L269.2 34.4 Z' fill='%23ffc233'/></g></svg>");
  --swag-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='50' viewBox='0 0 200 50'><path d='M0 2 Q100.0 16 200 2' fill='none' stroke='%237a5a3a' stroke-width='1.4'/><g transform='rotate(6.8 14.3 3.3)'><path d='M5.3 3.3 H23.3 V26.3 L14.3 19.3 L5.3 26.3 Z' fill='%231f9d55'/></g><g transform='rotate(4.6 42.9 6.1)'><path d='M33.9 6.1 H51.9 V29.1 L42.9 22.1 L33.9 29.1 Z' fill='%23ff7a1a'/></g><g transform='rotate(2.3 71.4 7.8)'><path d='M62.4 7.8 H80.4 V30.8 L71.4 23.8 L62.4 30.8 Z' fill='%23ff5c9a'/></g><g transform='rotate(0.0 100.0 8.4)'><path d='M91.0 8.4 H109.0 V31.4 L100.0 24.4 L91.0 31.4 Z' fill='%23e63946'/></g><g transform='rotate(-2.3 128.6 7.8)'><path d='M119.6 7.8 H137.6 V30.8 L128.6 23.8 L119.6 30.8 Z' fill='%23ffc233'/></g><g transform='rotate(-4.6 157.1 6.1)'><path d='M148.1 6.1 H166.1 V29.1 L157.1 22.1 L148.1 29.1 Z' fill='%232463d6'/></g><g transform='rotate(-6.8 185.7 3.3)'><path d='M176.7 3.3 H194.7 V26.3 L185.7 19.3 L176.7 26.3 Z' fill='%231f9d55'/></g></svg>");
  /* The same strings with a pale cord, for grounds that are night in both modes */
  --bunting-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='26' viewBox='0 0 132 26'><path d='M0 3 Q66.0 7 132 3' fill='none' stroke='%23f3dfb4' stroke-width='1.3'/><g transform='rotate(2.9 11.0 3.0)'><path d='M3.5 3.0 H18.5 V22.0 L11.0 16.0 L3.5 22.0 Z' fill='%23e63946'/></g><g transform='rotate(1.7 33.0 3.9)'><path d='M25.5 3.9 H40.5 V22.9 L33.0 16.9 L25.5 22.9 Z' fill='%23ffc233'/></g><g transform='rotate(0.6 55.0 4.3)'><path d='M47.5 4.3 H62.5 V23.3 L55.0 17.3 L47.5 23.3 Z' fill='%232463d6'/></g><g transform='rotate(-0.6 77.0 4.3)'><path d='M69.5 4.3 H84.5 V23.3 L77.0 17.3 L69.5 23.3 Z' fill='%231f9d55'/></g><g transform='rotate(-1.7 99.0 3.9)'><path d='M91.5 3.9 H106.5 V22.9 L99.0 16.9 L91.5 22.9 Z' fill='%23ff7a1a'/></g><g transform='rotate(-2.9 121.0 3.0)'><path d='M113.5 3.0 H128.5 V22.0 L121.0 16.0 L113.5 22.0 Z' fill='%23ff5c9a'/></g></svg>") repeat-x left top / 132px 26px;
  --swag-deep-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='72' viewBox='0 0 300 72'><path d='M0 1 Q150.0 35 300 1' fill='none' stroke='%23f3dfb4' stroke-width='1.6'/><g transform='rotate(11.2 18.8 4.4)'><path d='M6.8 4.4 H30.8 V34.4 L18.8 25.4 L6.8 34.4 Z' fill='%23e63946'/></g><g transform='rotate(8.1 56.2 10.8)'><path d='M44.2 10.8 H68.2 V40.8 L56.2 31.8 L44.2 40.8 Z' fill='%23ffc233'/></g><g transform='rotate(4.9 93.8 15.0)'><path d='M81.8 15.0 H105.8 V45.0 L93.8 36.0 L81.8 45.0 Z' fill='%232463d6'/></g><g transform='rotate(1.6 131.2 17.1)'><path d='M119.2 17.1 H143.2 V47.1 L131.2 38.1 L119.2 47.1 Z' fill='%231f9d55'/></g><g transform='rotate(-1.6 168.8 17.1)'><path d='M156.8 17.1 H180.8 V47.1 L168.8 38.1 L156.8 47.1 Z' fill='%23ff7a1a'/></g><g transform='rotate(-4.9 206.2 15.0)'><path d='M194.2 15.0 H218.2 V45.0 L206.2 36.0 L194.2 45.0 Z' fill='%23ff5c9a'/></g><g transform='rotate(-8.1 243.8 10.8)'><path d='M231.8 10.8 H255.8 V40.8 L243.8 31.8 L231.8 40.8 Z' fill='%23e63946'/></g><g transform='rotate(-11.2 281.2 4.4)'><path d='M269.2 4.4 H293.2 V34.4 L281.2 25.4 L269.2 34.4 Z' fill='%23ffc233'/></g></svg>");
  --swag-a-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='58' viewBox='0 0 260 58'><path d='M0 2 Q130.0 20 260 2' fill='none' stroke='%23f3dfb4' stroke-width='1.5'/><g transform='rotate(6.9 16.2 3.5)'><path d='M5.2 3.5 H27.2 V31.5 L16.2 23.5 L5.2 31.5 Z' fill='%23e63946'/></g><g transform='rotate(4.9 48.8 6.9)'><path d='M37.8 6.9 H59.8 V34.9 L48.8 26.9 L37.8 34.9 Z' fill='%23ffc233'/></g><g transform='rotate(3.0 81.2 9.1)'><path d='M70.2 9.1 H92.2 V37.1 L81.2 29.1 L70.2 37.1 Z' fill='%232463d6'/></g><g transform='rotate(1.0 113.8 10.3)'><path d='M102.8 10.3 H124.8 V38.3 L113.8 30.3 L102.8 38.3 Z' fill='%231f9d55'/></g><g transform='rotate(-1.0 146.2 10.3)'><path d='M135.2 10.3 H157.2 V38.3 L146.2 30.3 L135.2 38.3 Z' fill='%23ff7a1a'/></g><g transform='rotate(-3.0 178.8 9.1)'><path d='M167.8 9.1 H189.8 V37.1 L178.8 29.1 L167.8 37.1 Z' fill='%23ff5c9a'/></g><g transform='rotate(-4.9 211.2 6.9)'><path d='M200.2 6.9 H222.2 V34.9 L211.2 26.9 L200.2 34.9 Z' fill='%23e63946'/></g><g transform='rotate(-6.9 243.8 3.5)'><path d='M232.8 3.5 H254.8 V31.5 L243.8 23.5 L232.8 31.5 Z' fill='%23ffc233'/></g></svg>");
  --swag-b-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='50' viewBox='0 0 200 50'><path d='M0 2 Q100.0 16 200 2' fill='none' stroke='%23f3dfb4' stroke-width='1.4'/><g transform='rotate(6.8 14.3 3.3)'><path d='M5.3 3.3 H23.3 V26.3 L14.3 19.3 L5.3 26.3 Z' fill='%231f9d55'/></g><g transform='rotate(4.6 42.9 6.1)'><path d='M33.9 6.1 H51.9 V29.1 L42.9 22.1 L33.9 29.1 Z' fill='%23ff7a1a'/></g><g transform='rotate(2.3 71.4 7.8)'><path d='M62.4 7.8 H80.4 V30.8 L71.4 23.8 L62.4 30.8 Z' fill='%23ff5c9a'/></g><g transform='rotate(0.0 100.0 8.4)'><path d='M91.0 8.4 H109.0 V31.4 L100.0 24.4 L91.0 31.4 Z' fill='%23e63946'/></g><g transform='rotate(-2.3 128.6 7.8)'><path d='M119.6 7.8 H137.6 V30.8 L128.6 23.8 L119.6 30.8 Z' fill='%23ffc233'/></g><g transform='rotate(-4.6 157.1 6.1)'><path d='M148.1 6.1 H166.1 V29.1 L157.1 22.1 L148.1 29.1 Z' fill='%232463d6'/></g><g transform='rotate(-6.8 185.7 3.3)'><path d='M176.7 3.3 H194.7 V26.3 L185.7 19.3 L176.7 26.3 Z' fill='%231f9d55'/></g></svg>");
  /* Chita: the big-flowered cotton of the stall awnings and the dresses */
  --chita-red: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><rect width='96' height='96' fill='%23c8102e'/><path transform='rotate(35 30 30)' d='M30 30 q15.0 -10.5 30 0 q-15.0 10.5 -30 0 Z' fill='%231f9d55'/><path transform='rotate(215 24 24)' d='M24 24 q14.0 -9.799999999999999 28 0 q-14.0 9.799999999999999 -28 0 Z' fill='%231f9d55'/><path transform='rotate(-25 72 72)' d='M72 72 q14.0 -9.799999999999999 28 0 q-14.0 9.799999999999999 -28 0 Z' fill='%231f9d55'/><path transform='rotate(160 70 68)' d='M70 68 q13.0 -9.1 26 0 q-13.0 9.1 -26 0 Z' fill='%231f9d55'/><circle cx='26.0' cy='13.9' r='11.0' fill='%23ffffff'/><circle cx='37.5' cy='22.3' r='11.0' fill='%23ffffff'/><circle cx='33.1' cy='35.8' r='11.0' fill='%23ffffff'/><circle cx='18.9' cy='35.8' r='11.0' fill='%23ffffff'/><circle cx='14.5' cy='22.3' r='11.0' fill='%23ffffff'/><circle cx='26' cy='26' r='7.5' fill='%23ffffff'/><circle cx='26' cy='26' r='4.8' fill='%23ffc233'/><circle cx='72.0' cy='59.0' r='10.0' fill='%23ffc233'/><circle cx='82.5' cy='66.6' r='10.0' fill='%23ffc233'/><circle cx='78.5' cy='78.9' r='10.0' fill='%23ffc233'/><circle cx='65.5' cy='78.9' r='10.0' fill='%23ffc233'/><circle cx='61.5' cy='66.6' r='10.0' fill='%23ffc233'/><circle cx='72' cy='70' r='6.8' fill='%23ffffff'/><circle cx='72' cy='70' r='4.4' fill='%232463d6'/><circle cx='78.0' cy='13.1' r='4.5' fill='%23ffc233'/><circle cx='82.7' cy='16.5' r='4.5' fill='%23ffc233'/><circle cx='80.9' cy='22.0' r='4.5' fill='%23ffc233'/><circle cx='75.1' cy='22.0' r='4.5' fill='%23ffc233'/><circle cx='73.3' cy='16.5' r='4.5' fill='%23ffc233'/><circle cx='78' cy='18' r='2.0' fill='%23ffffff'/><circle cx='18.0' cy='75.0' r='4.5' fill='%232463d6'/><circle cx='22.7' cy='78.5' r='4.5' fill='%232463d6'/><circle cx='20.9' cy='84.0' r='4.5' fill='%232463d6'/><circle cx='15.1' cy='84.0' r='4.5' fill='%232463d6'/><circle cx='13.3' cy='78.5' r='4.5' fill='%232463d6'/><circle cx='18' cy='80' r='2.0' fill='%23ffc233'/><circle cx='50' cy='46' r='2.2' fill='%23ffe7a3'/><circle cx='6' cy='54' r='2.2' fill='%23ffe7a3'/><circle cx='54' cy='92' r='2.2' fill='%23ffe7a3'/><circle cx='92' cy='44' r='2.2' fill='%23ffe7a3'/><circle cx='44' cy='6' r='2.2' fill='%23ffe7a3'/></svg>");
  --chita-blue: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><rect width='96' height='96' fill='%231f4fb8'/><path transform='rotate(35 30 30)' d='M30 30 q15.0 -10.5 30 0 q-15.0 10.5 -30 0 Z' fill='%232fae62'/><path transform='rotate(215 24 24)' d='M24 24 q14.0 -9.799999999999999 28 0 q-14.0 9.799999999999999 -28 0 Z' fill='%232fae62'/><path transform='rotate(-25 72 72)' d='M72 72 q14.0 -9.799999999999999 28 0 q-14.0 9.799999999999999 -28 0 Z' fill='%232fae62'/><path transform='rotate(160 70 68)' d='M70 68 q13.0 -9.1 26 0 q-13.0 9.1 -26 0 Z' fill='%232fae62'/><circle cx='26.0' cy='13.9' r='11.0' fill='%23ff5c9a'/><circle cx='37.5' cy='22.3' r='11.0' fill='%23ff5c9a'/><circle cx='33.1' cy='35.8' r='11.0' fill='%23ff5c9a'/><circle cx='18.9' cy='35.8' r='11.0' fill='%23ff5c9a'/><circle cx='14.5' cy='22.3' r='11.0' fill='%23ff5c9a'/><circle cx='26' cy='26' r='7.5' fill='%23ffffff'/><circle cx='26' cy='26' r='4.8' fill='%23ffc233'/><circle cx='72.0' cy='59.0' r='10.0' fill='%23ffc233'/><circle cx='82.5' cy='66.6' r='10.0' fill='%23ffc233'/><circle cx='78.5' cy='78.9' r='10.0' fill='%23ffc233'/><circle cx='65.5' cy='78.9' r='10.0' fill='%23ffc233'/><circle cx='61.5' cy='66.6' r='10.0' fill='%23ffc233'/><circle cx='72' cy='70' r='6.8' fill='%23ffffff'/><circle cx='72' cy='70' r='4.4' fill='%23e63946'/><circle cx='78.0' cy='13.1' r='4.5' fill='%23ffc233'/><circle cx='82.7' cy='16.5' r='4.5' fill='%23ffc233'/><circle cx='80.9' cy='22.0' r='4.5' fill='%23ffc233'/><circle cx='75.1' cy='22.0' r='4.5' fill='%23ffc233'/><circle cx='73.3' cy='16.5' r='4.5' fill='%23ffc233'/><circle cx='78' cy='18' r='2.0' fill='%23ff5c9a'/><circle cx='18.0' cy='75.0' r='4.5' fill='%23e63946'/><circle cx='22.7' cy='78.5' r='4.5' fill='%23e63946'/><circle cx='20.9' cy='84.0' r='4.5' fill='%23e63946'/><circle cx='15.1' cy='84.0' r='4.5' fill='%23e63946'/><circle cx='13.3' cy='78.5' r='4.5' fill='%23e63946'/><circle cx='18' cy='80' r='2.0' fill='%23ffc233'/><circle cx='50' cy='46' r='2.2' fill='%23ffffff'/><circle cx='6' cy='54' r='2.2' fill='%23ffffff'/><circle cx='54' cy='92' r='2.2' fill='%23ffffff'/><circle cx='92' cy='44' r='2.2' fill='%23ffffff'/><circle cx='44' cy='6' r='2.2' fill='%23ffffff'/></svg>");
  --chita-yellow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><rect width='96' height='96' fill='%23f6b51e'/><path transform='rotate(35 30 30)' d='M30 30 q15.0 -10.5 30 0 q-15.0 10.5 -30 0 Z' fill='%231f9d55'/><path transform='rotate(215 24 24)' d='M24 24 q14.0 -9.799999999999999 28 0 q-14.0 9.799999999999999 -28 0 Z' fill='%231f9d55'/><path transform='rotate(-25 72 72)' d='M72 72 q14.0 -9.799999999999999 28 0 q-14.0 9.799999999999999 -28 0 Z' fill='%231f9d55'/><path transform='rotate(160 70 68)' d='M70 68 q13.0 -9.1 26 0 q-13.0 9.1 -26 0 Z' fill='%231f9d55'/><circle cx='26.0' cy='13.9' r='11.0' fill='%23e63946'/><circle cx='37.5' cy='22.3' r='11.0' fill='%23e63946'/><circle cx='33.1' cy='35.8' r='11.0' fill='%23e63946'/><circle cx='18.9' cy='35.8' r='11.0' fill='%23e63946'/><circle cx='14.5' cy='22.3' r='11.0' fill='%23e63946'/><circle cx='26' cy='26' r='7.5' fill='%23ffffff'/><circle cx='26' cy='26' r='4.8' fill='%23ffffff'/><circle cx='72.0' cy='59.0' r='10.0' fill='%232463d6'/><circle cx='82.5' cy='66.6' r='10.0' fill='%232463d6'/><circle cx='78.5' cy='78.9' r='10.0' fill='%232463d6'/><circle cx='65.5' cy='78.9' r='10.0' fill='%232463d6'/><circle cx='61.5' cy='66.6' r='10.0' fill='%232463d6'/><circle cx='72' cy='70' r='6.8' fill='%23ffffff'/><circle cx='72' cy='70' r='4.4' fill='%23ffffff'/><circle cx='78.0' cy='13.1' r='4.5' fill='%23ffffff'/><circle cx='82.7' cy='16.5' r='4.5' fill='%23ffffff'/><circle cx='80.9' cy='22.0' r='4.5' fill='%23ffffff'/><circle cx='75.1' cy='22.0' r='4.5' fill='%23ffffff'/><circle cx='73.3' cy='16.5' r='4.5' fill='%23ffffff'/><circle cx='78' cy='18' r='2.0' fill='%23e63946'/><circle cx='18.0' cy='75.0' r='4.5' fill='%23ffffff'/><circle cx='22.7' cy='78.5' r='4.5' fill='%23ffffff'/><circle cx='20.9' cy='84.0' r='4.5' fill='%23ffffff'/><circle cx='15.1' cy='84.0' r='4.5' fill='%23ffffff'/><circle cx='13.3' cy='78.5' r='4.5' fill='%23ffffff'/><circle cx='18' cy='80' r='2.0' fill='%232463d6'/><circle cx='50' cy='46' r='2.2' fill='%23e63946'/><circle cx='6' cy='54' r='2.2' fill='%23e63946'/><circle cx='54' cy='92' r='2.2' fill='%23e63946'/><circle cx='92' cy='44' r='2.2' fill='%23e63946'/><circle cx='44' cy='6' r='2.2' fill='%23e63946'/></svg>");
  --chita-green: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><rect width='96' height='96' fill='%23178a4a'/><path transform='rotate(35 30 30)' d='M30 30 q15.0 -10.5 30 0 q-15.0 10.5 -30 0 Z' fill='%230c5c30'/><path transform='rotate(215 24 24)' d='M24 24 q14.0 -9.799999999999999 28 0 q-14.0 9.799999999999999 -28 0 Z' fill='%230c5c30'/><path transform='rotate(-25 72 72)' d='M72 72 q14.0 -9.799999999999999 28 0 q-14.0 9.799999999999999 -28 0 Z' fill='%230c5c30'/><path transform='rotate(160 70 68)' d='M70 68 q13.0 -9.1 26 0 q-13.0 9.1 -26 0 Z' fill='%230c5c30'/><circle cx='26.0' cy='13.9' r='11.0' fill='%23ff5c9a'/><circle cx='37.5' cy='22.3' r='11.0' fill='%23ff5c9a'/><circle cx='33.1' cy='35.8' r='11.0' fill='%23ff5c9a'/><circle cx='18.9' cy='35.8' r='11.0' fill='%23ff5c9a'/><circle cx='14.5' cy='22.3' r='11.0' fill='%23ff5c9a'/><circle cx='26' cy='26' r='7.5' fill='%23ffffff'/><circle cx='26' cy='26' r='4.8' fill='%23ffc233'/><circle cx='72.0' cy='59.0' r='10.0' fill='%23ffc233'/><circle cx='82.5' cy='66.6' r='10.0' fill='%23ffc233'/><circle cx='78.5' cy='78.9' r='10.0' fill='%23ffc233'/><circle cx='65.5' cy='78.9' r='10.0' fill='%23ffc233'/><circle cx='61.5' cy='66.6' r='10.0' fill='%23ffc233'/><circle cx='72' cy='70' r='6.8' fill='%23ffffff'/><circle cx='72' cy='70' r='4.4' fill='%23ffffff'/><circle cx='78.0' cy='13.1' r='4.5' fill='%23ffc233'/><circle cx='82.7' cy='16.5' r='4.5' fill='%23ffc233'/><circle cx='80.9' cy='22.0' r='4.5' fill='%23ffc233'/><circle cx='75.1' cy='22.0' r='4.5' fill='%23ffc233'/><circle cx='73.3' cy='16.5' r='4.5' fill='%23ffc233'/><circle cx='78' cy='18' r='2.0' fill='%23ff5c9a'/><circle cx='18.0' cy='75.0' r='4.5' fill='%23ffffff'/><circle cx='22.7' cy='78.5' r='4.5' fill='%23ffffff'/><circle cx='20.9' cy='84.0' r='4.5' fill='%23ffffff'/><circle cx='15.1' cy='84.0' r='4.5' fill='%23ffffff'/><circle cx='13.3' cy='78.5' r='4.5' fill='%23ffffff'/><circle cx='18' cy='80' r='2.0' fill='%23ffc233'/><circle cx='50' cy='46' r='2.2' fill='%23ffe7a3'/><circle cx='6' cy='54' r='2.2' fill='%23ffe7a3'/><circle cx='54' cy='92' r='2.2' fill='%23ffe7a3'/><circle cx='92' cy='44' r='2.2' fill='%23ffe7a3'/><circle cx='44' cy='6' r='2.2' fill='%23ffe7a3'/></svg>");
  --chita-pink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'><rect width='96' height='96' fill='%23e8457f'/><path transform='rotate(35 30 30)' d='M30 30 q15.0 -10.5 30 0 q-15.0 10.5 -30 0 Z' fill='%231f9d55'/><path transform='rotate(215 24 24)' d='M24 24 q14.0 -9.799999999999999 28 0 q-14.0 9.799999999999999 -28 0 Z' fill='%231f9d55'/><path transform='rotate(-25 72 72)' d='M72 72 q14.0 -9.799999999999999 28 0 q-14.0 9.799999999999999 -28 0 Z' fill='%231f9d55'/><path transform='rotate(160 70 68)' d='M70 68 q13.0 -9.1 26 0 q-13.0 9.1 -26 0 Z' fill='%231f9d55'/><circle cx='26.0' cy='13.9' r='11.0' fill='%23ffffff'/><circle cx='37.5' cy='22.3' r='11.0' fill='%23ffffff'/><circle cx='33.1' cy='35.8' r='11.0' fill='%23ffffff'/><circle cx='18.9' cy='35.8' r='11.0' fill='%23ffffff'/><circle cx='14.5' cy='22.3' r='11.0' fill='%23ffffff'/><circle cx='26' cy='26' r='7.5' fill='%23ffffff'/><circle cx='26' cy='26' r='4.8' fill='%23e63946'/><circle cx='72.0' cy='59.0' r='10.0' fill='%23ffc233'/><circle cx='82.5' cy='66.6' r='10.0' fill='%23ffc233'/><circle cx='78.5' cy='78.9' r='10.0' fill='%23ffc233'/><circle cx='65.5' cy='78.9' r='10.0' fill='%23ffc233'/><circle cx='61.5' cy='66.6' r='10.0' fill='%23ffc233'/><circle cx='72' cy='70' r='6.8' fill='%23ffffff'/><circle cx='72' cy='70' r='4.4' fill='%232463d6'/><circle cx='78.0' cy='13.1' r='4.5' fill='%23e63946'/><circle cx='82.7' cy='16.5' r='4.5' fill='%23e63946'/><circle cx='80.9' cy='22.0' r='4.5' fill='%23e63946'/><circle cx='75.1' cy='22.0' r='4.5' fill='%23e63946'/><circle cx='73.3' cy='16.5' r='4.5' fill='%23e63946'/><circle cx='78' cy='18' r='2.0' fill='%23ffffff'/><circle cx='18.0' cy='75.0' r='4.5' fill='%232463d6'/><circle cx='22.7' cy='78.5' r='4.5' fill='%232463d6'/><circle cx='20.9' cy='84.0' r='4.5' fill='%232463d6'/><circle cx='15.1' cy='84.0' r='4.5' fill='%232463d6'/><circle cx='13.3' cy='78.5' r='4.5' fill='%232463d6'/><circle cx='18' cy='80' r='2.0' fill='%23ffc233'/><circle cx='50' cy='46' r='2.2' fill='%23ffffff'/><circle cx='6' cy='54' r='2.2' fill='%23ffffff'/><circle cx='54' cy='92' r='2.2' fill='%23ffffff'/><circle cx='92' cy='44' r='2.2' fill='%23ffffff'/><circle cx='44' cy='6' r='2.2' fill='%23ffffff'/></svg>");
  /* Gingham, the checked cotton of the shirts and counter cloths */
  --gingham: linear-gradient(90deg, rgba(215, 38, 61, .55) 50%, transparent 0) 0 0 / 14px 14px, linear-gradient(rgba(215, 38, 61, .55) 50%, transparent 0) 0 0 / 14px 14px, #ffffff;
  --gingham-blue: linear-gradient(90deg, rgba(36, 99, 214, .5) 50%, transparent 0) 0 0 / 14px 14px, linear-gradient(rgba(36, 99, 214, .5) 50%, transparent 0) 0 0 / 14px 14px, #ffffff;
  /* Chita flowers drawn in outline, a faint print across the page */
  --flowers: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23d7263d' stroke-opacity='.075' stroke-width='1.2'><circle cx='40.0' cy='36.9' r='6.2'/><circle cx='46.8' cy='41.8' r='6.2'/><circle cx='44.2' cy='49.8' r='6.2'/><circle cx='35.8' cy='49.8' r='6.2'/><circle cx='33.2' cy='41.8' r='6.2'/><circle cx='40' cy='44' r='2.6'/><circle cx='132.0' cy='120.8' r='6.2'/><circle cx='138.8' cy='125.8' r='6.2'/><circle cx='136.2' cy='133.8' r='6.2'/><circle cx='127.8' cy='133.8' r='6.2'/><circle cx='125.2' cy='125.8' r='6.2'/><circle cx='132' cy='128' r='2.6'/><circle cx='140.0' cy='26.1' r='3.4'/><circle cx='143.7' cy='28.8' r='3.4'/><circle cx='142.3' cy='33.1' r='3.4'/><circle cx='137.7' cy='33.1' r='3.4'/><circle cx='136.3' cy='28.8' r='3.4'/><circle cx='140' cy='30' r='1.4'/><circle cx='36.0' cy='142.2' r='3.4'/><circle cx='39.7' cy='144.8' r='3.4'/><circle cx='38.3' cy='149.1' r='3.4'/><circle cx='33.7' cy='149.1' r='3.4'/><circle cx='32.3' cy='144.8' r='3.4'/><circle cx='36' cy='146' r='1.4'/><circle cx='92.0' cy='85.8' r='1.9'/><circle cx='94.1' cy='87.3' r='1.9'/><circle cx='93.3' cy='89.8' r='1.9'/><circle cx='90.7' cy='89.8' r='1.9'/><circle cx='89.9' cy='87.3' r='1.9'/><circle cx='92' cy='88' r='0.8'/></g></svg>");
  /* The square at night, lit from below by the fogueira: the ground of
     the footer, the winners page, the splash and the wallet in both modes */
  --night-bg:
    radial-gradient(520px 260px at 50% 112%, rgba(255, 122, 26, .5), transparent 70%),
    radial-gradient(420px 220px at 6% 100%, rgba(230, 57, 70, .26), transparent 70%),
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255, 243, 220, .9), transparent),
    radial-gradient(1.2px 1.2px at 34% 8%, rgba(255, 243, 220, .7), transparent),
    radial-gradient(1.6px 1.6px at 61% 22%, rgba(255, 243, 220, .85), transparent),
    radial-gradient(1.2px 1.2px at 83% 12%, rgba(255, 243, 220, .7), transparent),
    radial-gradient(1.4px 1.4px at 92% 34%, rgba(255, 243, 220, .6), transparent),
    linear-gradient(180deg, #17134a 0%, #1f1b4d 55%, #2c1c47 100%);

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

html.dark {
  --paper:        #110f2c;
  --paper-2:      #1c1941;
  --paper-3:      #28244f;
  --ink:          #fff3dc;
  --ink-2:        #eadfcb;
  --ink-soft:     #b5abc8;
  --rule:         rgba(255, 243, 220, 0.13);
  --rule-soft:    rgba(255, 243, 220, 0.07);
  --shadow:       0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px -8px rgba(0, 0, 0, .65);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, .35), 0 18px 36px -14px rgba(0, 0, 0, .85);

  /* Firelight */
  --theme-50:  #2a1d2c;
  --theme-100: #3a2733;
  --theme-200: #6a4030;
  --theme-300: #ffd27a;
  --theme-400: #ffc04d;
  --theme-500: #ffb02e;
  --theme-600: #ffbe4f;
  --theme-700: #ffd27a;
  --theme-800: #ffe2a8;
  --theme-900: #fff3dc;
  --theme-500-rgb: 255, 176, 46;
  --theme-600-rgb: 255, 190, 79;

  --twine: #f3dfb4;
  --rose-soft: rgba(255, 176, 46, 0.13);
  --red:        #ff6b6b;
  --red-soft:   rgba(255, 107, 107, 0.14);
  --rose:       #ff6b6b;

  --gold:       #ffc233;
  --gold-2:     #ffd36b;
  --gold-soft:  rgba(255, 176, 46, 0.13);
  --felt:       #0b0a20;
  --felt-2:     #1c1941;
  --peacock:    #4fd18b;
  --peacock-soft: rgba(79, 209, 139, 0.14);

  --nav-accent:    #ffb02e;
  --hdr-strip-bg:  #0b0a20;

  --btn-bg:       #ffb02e;
  --btn-bg-hover: #ffc04d;
  --btn-ink:      #1f1b4d;
  --btn-shadow:   0 3px 0 #b36a00, 0 8px 22px -8px rgba(255, 140, 26, .5);
  --btn-shadow-hover: 0 4px 0 #b36a00, 0 12px 28px -8px rgba(255, 140, 26, .65);

  --bunting: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='132' height='26' viewBox='0 0 132 26'><path d='M0 3 Q66.0 7 132 3' fill='none' stroke='%23f3dfb4' stroke-width='1.3'/><g transform='rotate(2.9 11.0 3.0)'><path d='M3.5 3.0 H18.5 V22.0 L11.0 16.0 L3.5 22.0 Z' fill='%23e63946'/></g><g transform='rotate(1.7 33.0 3.9)'><path d='M25.5 3.9 H40.5 V22.9 L33.0 16.9 L25.5 22.9 Z' fill='%23ffc233'/></g><g transform='rotate(0.6 55.0 4.3)'><path d='M47.5 4.3 H62.5 V23.3 L55.0 17.3 L47.5 23.3 Z' fill='%232463d6'/></g><g transform='rotate(-0.6 77.0 4.3)'><path d='M69.5 4.3 H84.5 V23.3 L77.0 17.3 L69.5 23.3 Z' fill='%231f9d55'/></g><g transform='rotate(-1.7 99.0 3.9)'><path d='M91.5 3.9 H106.5 V22.9 L99.0 16.9 L91.5 22.9 Z' fill='%23ff7a1a'/></g><g transform='rotate(-2.9 121.0 3.0)'><path d='M113.5 3.0 H128.5 V22.0 L121.0 16.0 L113.5 22.0 Z' fill='%23ff5c9a'/></g></svg>") repeat-x left top / 132px 26px;
  --swag-a: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='58' viewBox='0 0 260 58'><path d='M0 2 Q130.0 20 260 2' fill='none' stroke='%23f3dfb4' stroke-width='1.5'/><g transform='rotate(6.9 16.2 3.5)'><path d='M5.2 3.5 H27.2 V31.5 L16.2 23.5 L5.2 31.5 Z' fill='%23e63946'/></g><g transform='rotate(4.9 48.8 6.9)'><path d='M37.8 6.9 H59.8 V34.9 L48.8 26.9 L37.8 34.9 Z' fill='%23ffc233'/></g><g transform='rotate(3.0 81.2 9.1)'><path d='M70.2 9.1 H92.2 V37.1 L81.2 29.1 L70.2 37.1 Z' fill='%232463d6'/></g><g transform='rotate(1.0 113.8 10.3)'><path d='M102.8 10.3 H124.8 V38.3 L113.8 30.3 L102.8 38.3 Z' fill='%231f9d55'/></g><g transform='rotate(-1.0 146.2 10.3)'><path d='M135.2 10.3 H157.2 V38.3 L146.2 30.3 L135.2 38.3 Z' fill='%23ff7a1a'/></g><g transform='rotate(-3.0 178.8 9.1)'><path d='M167.8 9.1 H189.8 V37.1 L178.8 29.1 L167.8 37.1 Z' fill='%23ff5c9a'/></g><g transform='rotate(-4.9 211.2 6.9)'><path d='M200.2 6.9 H222.2 V34.9 L211.2 26.9 L200.2 34.9 Z' fill='%23e63946'/></g><g transform='rotate(-6.9 243.8 3.5)'><path d='M232.8 3.5 H254.8 V31.5 L243.8 23.5 L232.8 31.5 Z' fill='%23ffc233'/></g></svg>");
  --swag-deep: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='72' viewBox='0 0 300 72'><path d='M0 1 Q150.0 35 300 1' fill='none' stroke='%23f3dfb4' stroke-width='1.6'/><g transform='rotate(11.2 18.8 4.4)'><path d='M6.8 4.4 H30.8 V34.4 L18.8 25.4 L6.8 34.4 Z' fill='%23e63946'/></g><g transform='rotate(8.1 56.2 10.8)'><path d='M44.2 10.8 H68.2 V40.8 L56.2 31.8 L44.2 40.8 Z' fill='%23ffc233'/></g><g transform='rotate(4.9 93.8 15.0)'><path d='M81.8 15.0 H105.8 V45.0 L93.8 36.0 L81.8 45.0 Z' fill='%232463d6'/></g><g transform='rotate(1.6 131.2 17.1)'><path d='M119.2 17.1 H143.2 V47.1 L131.2 38.1 L119.2 47.1 Z' fill='%231f9d55'/></g><g transform='rotate(-1.6 168.8 17.1)'><path d='M156.8 17.1 H180.8 V47.1 L168.8 38.1 L156.8 47.1 Z' fill='%23ff7a1a'/></g><g transform='rotate(-4.9 206.2 15.0)'><path d='M194.2 15.0 H218.2 V45.0 L206.2 36.0 L194.2 45.0 Z' fill='%23ff5c9a'/></g><g transform='rotate(-8.1 243.8 10.8)'><path d='M231.8 10.8 H255.8 V40.8 L243.8 31.8 L231.8 40.8 Z' fill='%23e63946'/></g><g transform='rotate(-11.2 281.2 4.4)'><path d='M269.2 4.4 H293.2 V34.4 L281.2 25.4 L269.2 34.4 Z' fill='%23ffc233'/></g></svg>");
  --swag-b: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='50' viewBox='0 0 200 50'><path d='M0 2 Q100.0 16 200 2' fill='none' stroke='%23f3dfb4' stroke-width='1.4'/><g transform='rotate(6.8 14.3 3.3)'><path d='M5.3 3.3 H23.3 V26.3 L14.3 19.3 L5.3 26.3 Z' fill='%231f9d55'/></g><g transform='rotate(4.6 42.9 6.1)'><path d='M33.9 6.1 H51.9 V29.1 L42.9 22.1 L33.9 29.1 Z' fill='%23ff7a1a'/></g><g transform='rotate(2.3 71.4 7.8)'><path d='M62.4 7.8 H80.4 V30.8 L71.4 23.8 L62.4 30.8 Z' fill='%23ff5c9a'/></g><g transform='rotate(0.0 100.0 8.4)'><path d='M91.0 8.4 H109.0 V31.4 L100.0 24.4 L91.0 31.4 Z' fill='%23e63946'/></g><g transform='rotate(-2.3 128.6 7.8)'><path d='M119.6 7.8 H137.6 V30.8 L128.6 23.8 L119.6 30.8 Z' fill='%23ffc233'/></g><g transform='rotate(-4.6 157.1 6.1)'><path d='M148.1 6.1 H166.1 V29.1 L157.1 22.1 L148.1 29.1 Z' fill='%232463d6'/></g><g transform='rotate(-6.8 185.7 3.3)'><path d='M176.7 3.3 H194.7 V26.3 L185.7 19.3 L176.7 26.3 Z' fill='%231f9d55'/></g></svg>");
  --gingham: linear-gradient(90deg, rgba(215, 38, 61, .6) 50%, transparent 0) 0 0 / 14px 14px, linear-gradient(rgba(215, 38, 61, .6) 50%, transparent 0) 0 0 / 14px 14px, #fff3dc;
  --flowers: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><g fill='none' stroke='%23ffc233' stroke-opacity='.05' stroke-width='1.2'><circle cx='40.0' cy='36.9' r='6.2'/><circle cx='46.8' cy='41.8' r='6.2'/><circle cx='44.2' cy='49.8' r='6.2'/><circle cx='35.8' cy='49.8' r='6.2'/><circle cx='33.2' cy='41.8' r='6.2'/><circle cx='40' cy='44' r='2.6'/><circle cx='132.0' cy='120.8' r='6.2'/><circle cx='138.8' cy='125.8' r='6.2'/><circle cx='136.2' cy='133.8' r='6.2'/><circle cx='127.8' cy='133.8' r='6.2'/><circle cx='125.2' cy='125.8' r='6.2'/><circle cx='132' cy='128' r='2.6'/><circle cx='140.0' cy='26.1' r='3.4'/><circle cx='143.7' cy='28.8' r='3.4'/><circle cx='142.3' cy='33.1' r='3.4'/><circle cx='137.7' cy='33.1' r='3.4'/><circle cx='136.3' cy='28.8' r='3.4'/><circle cx='140' cy='30' r='1.4'/><circle cx='36.0' cy='142.2' r='3.4'/><circle cx='39.7' cy='144.8' r='3.4'/><circle cx='38.3' cy='149.1' r='3.4'/><circle cx='33.7' cy='149.1' r='3.4'/><circle cx='32.3' cy='144.8' r='3.4'/><circle cx='36' cy='146' r='1.4'/><circle cx='92.0' cy='85.8' r='1.9'/><circle cx='94.1' cy='87.3' r='1.9'/><circle cx='93.3' cy='89.8' r='1.9'/><circle cx='90.7' cy='89.8' r='1.9'/><circle cx='89.9' cy='87.3' r='1.9'/><circle cx='92' cy='88' r='0.8'/></g></svg>");
  --page-bg:
    radial-gradient(1000px 520px at 50% calc(100% + 120px), rgba(255, 122, 26, 0.10), transparent 70%) no-repeat,
    radial-gradient(900px 420px at 12% -140px, rgba(36, 99, 214, 0.18), transparent 70%) no-repeat,
    var(--flowers) repeat,
    var(--paper);
}

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

/* Lilita One comes in one weight; bold utilities on display text keep it
   rather than smearing a synthetic bold. Where it has no glyphs (Cyrillic,
   Vietnamese) Nunito stands in at its heaviest. */
html .font-display, h1.display, h2.display, h3.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: .005em;
}
html:is(:lang(ru), :lang(vi), :lang(gr), :lang(el)) :is(.font-display, h1.display, h2.display, h3.display) { font-weight: 800; }
.display-italic { font-style: normal; }
/* Lilita One is a sign-painter's face: at caption sizes the shared
   markup's .font-display falls back to the text face, which stays legible. */
html .font-display:is(.text-xs, .text-sm, .text-\[10px\], .text-\[11px\], .text-\[12px\], .text-\[13px\]) {
  font-family: var(--font-ui);
  font-weight: 600;
  font-style: normal;
}

::selection { background: #ffc233; color: #1f1b4d; }

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

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

/* Section eyebrow — a little bandeirinha in front of the label */
html .section-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--theme-600);
  margin-bottom: 0.7rem;
}
html .section-eyebrow::before {
  content: ''; flex-shrink: 0;
  width: 11px; height: 14px;
  background: var(--b2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
  box-shadow: inset 0 3px 0 var(--b1);
}

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

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

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

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

.hdr-strip, .hdr-strip .ed-status { color: rgba(255, 243, 220, 0.9); }
.hdr-strip a:hover, .hdr-strip button:hover { color: #ffc233; }

/* The bunting band: a string of bandeirinhas under the main header bar
   and wherever a section needs a border. Its own paper behind it, so it
   reads on any ground. */
.fj-band { height: 26px; background: var(--bunting), var(--paper); }
.fj-band--night { background: var(--bunting-n), #1f1b4d; }

/* The festa chip in the status strip */
.fj-strip-chip { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; letter-spacing: .06em; color: #ffc233; }
.fj-strip-chip svg { width: 22px; height: 13px; flex-shrink: 0; }
/* The desktop strip shares its line with the menu; the second half of the
   chip joins it only where there is room for both. */
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1439px) { .fj-strip-chip__extra { display: none; } }

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

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

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

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

/* ── Cards: soft corners, a fine edge, a lift on hover ── */
html .ed-plan, html .shop-card {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html .ed-plan:hover, html .shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
html .ed-plan-featured {
  position: relative;
  background: var(--night-bg); color: #fff3dc;
  border: 1px solid rgba(255, 194, 51, .35); border-radius: var(--radius);
  overflow: hidden;
  padding-top: 2rem;
}
.ed-plan-featured::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background: var(--bunting-n); pointer-events: none;
}
.ed-plan-hairline { border-color: var(--rule); }
.ed-plan-featured .ed-plan-hairline { border-color: rgba(255, 243, 220, .2); }

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

/* ── Drawer ── */
.drawer-section-label {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--theme-600); padding: 1.1rem 1.5rem 0.4rem;
}
.drawer-section-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.drawer-nav-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
}
.drawer-nav-row:hover { background: var(--paper-3); color: var(--ink); }
.drawer-logout, .drawer-login { margin: 1rem 1.5rem 1.25rem; padding: 0.85rem 1rem; }
/* header.css letters the dark drawer's login in the accent, !important,
   which disappears on the firelight button. */
html.dark .drawer-login { color: var(--btn-ink) !important; background: var(--btn-bg) !important; }
html.dark .drawer-login:hover { background: var(--btn-bg-hover) !important; }
.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(255, 250, 240, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
}
html.dark .mobile-glass-header { background: rgba(17, 15, 44, 0.94); }

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

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

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

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

/* ── Bandeirinhas as markup (junina_pennants()): a cord with notched paper
   pennants hanging from it, each lifting a little in the breeze, still
   for visitors who ask for less motion ── */
.fj-string {
  position: relative;
  display: flex; justify-content: space-around; align-items: flex-start;
  padding-top: 3px;
  pointer-events: none;
}
.fj-string::before {
  content: ''; position: absolute; left: 0; right: 0; top: 2px; height: calc(var(--sag, 0px) + 2px);
  border-bottom: 2px solid var(--twine); border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.fj-pennant {
  position: relative;
  margin-top: calc(var(--y, 0) * var(--sag, 0px));
  width: var(--pw, 18px); height: var(--ph, 24px); flex-shrink: 0;
  background: var(--c, #e63946);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  transform-origin: 50% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fj-pennant { animation: fj-flutter calc(2.6s + var(--i, 0) * .17s) ease-in-out 6 forwards alternate; animation-delay: calc(var(--i, 0) * -.43s); }
}
@keyframes fj-flutter { from { transform: rotate(-4deg) skewX(-2deg); } to { transform: rotate(4deg) skewX(2deg); } }

/* The fogueira's flames (junina_fire_svg()) flicker from their base */
.fj-fire { display: block; width: 100%; height: auto; overflow: visible; }
.fj-fire .fj-flame { transform-origin: 40px 64px; transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .fj-fire .fj-flame { animation: fj-flicker 1.6s ease-in-out 8 forwards alternate; }
  .fj-fire .fj-sparks { animation: fj-sparks 2.4s ease-out 4 forwards; }
  .fj-fire .fj-smoke { animation: fj-smoke 3.2s ease-in-out 4 forwards alternate; }
}
@keyframes fj-flicker {
  0%   { transform: scale(1, 1) skewX(0); }
  30%  { transform: scale(.96, 1.05) skewX(-2deg); }
  60%  { transform: scale(1.03, .96) skewX(2deg); }
  100% { transform: scale(.98, 1.03) skewX(-1deg); }
}
@keyframes fj-sparks { from { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }
@keyframes fj-smoke { from { opacity: .4; transform: translateY(2px); } to { opacity: .9; transform: translateY(-3px); } }
.fj-hat, .fj-corn, .fj-popcorn, .fj-fish { display: block; width: 100%; height: auto; }

/* ── Dark/light toggle: strings of bandeirinhas ──
   assets/themes/festa-junina/assets/js/festa-junina.js registers the
   transition: a few strings of paper pennants are hung across the screen,
   cord first, each pennant dropping open along it, while the sky of the
   coming mode is drawn down behind them. The mode changes under that sky;
   then the sky clears and the strings fall away. The strings hang well
   apart, so it stays bunting against the sky the whole way through. */
.px-fx--fj-bunting { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; }
.px-fx--fj-bunting .fj-fx-sky {
  position: absolute; inset: 0;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .5s cubic-bezier(.4, 0, .2, 1), opacity .42s ease;
}
.px-fx--fj-bunting .fj-fx-sky.is-day { background: radial-gradient(640px 320px at 70% 110%, rgba(255, 194, 51, .35), transparent 70%), linear-gradient(180deg, #d5eafb 0%, #eaf4fb 40%, #fff6e2 85%, #fffaf0 100%); }
.px-fx--fj-bunting .fj-fx-sky.is-night { background: radial-gradient(620px 300px at 70% 112%, rgba(255, 122, 26, .42), transparent 70%), linear-gradient(180deg, #0c0a26 0%, #15124a 55%, #241a4a 100%); }
.px-fx--fj-bunting .fj-fx-row {
  position: absolute; left: -10px; right: -10px; height: calc(var(--sag) + 70px);
  display: flex; justify-content: space-around; align-items: flex-start;
  transition: transform .42s cubic-bezier(.55, 0, .8, .35) var(--od), opacity .3s ease calc(var(--od) + .12s);
}
.px-fx--fj-bunting .fj-fx-row::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--sag);
  border-bottom: 2px solid #8a6a4a; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: scaleX(0); transform-origin: var(--from) 50%;
  transition: transform .24s ease var(--rd);
}
.px-fx--fj-bunting .fj-fx-sky.is-night ~ .fj-fx-row::before { border-bottom-color: #f3dfb4; }
.px-fx--fj-bunting .fj-fx-p {
  flex-shrink: 0;
  margin-top: calc(var(--y) * var(--sag) + 1px);
  background: var(--c);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .24s cubic-bezier(.3, 1.3, .5, 1) var(--d);
}
.px-fx--fj-bunting.is-on .fj-fx-sky { clip-path: inset(0 0 0 0); }
.px-fx--fj-bunting.is-on .fj-fx-row::before { transform: scaleX(1); }
.px-fx--fj-bunting.is-on .fj-fx-p { transform: scaleY(1); }
.px-fx--fj-bunting.is-off .fj-fx-sky { opacity: 0; }
.px-fx--fj-bunting .fj-fx-sky.is-moment { background: none; }
.px-fx--fj-bunting.is-off .fj-fx-row { transform: translateY(45vh); opacity: 0; }

/* ── Footer: the square at night in both modes — two strings of
   bandeirinhas swagged across its top, and along the ground the
   fogueira with straw hats, corn and pipoca round it ── */
.fj-footer {
  --paper:     #1f1b4d;
  --paper-2:   #2b2663;
  --paper-3:   #383277;
  --ink:       #fff3dc;
  --ink-2:     #efe4d0;
  --ink-soft:  #bdb3d3;
  --rule:      rgba(255, 243, 220, 0.16);
  --rule-soft: rgba(255, 243, 220, 0.08);
  --twine: #f3dfb4;
  --theme-500: #ffc233; --theme-600: #ffc233; --theme-700: #ffd36b;
  --theme-500-rgb: 255, 194, 51;
  position: relative;
}
html.dark .fj-footer { --paper: #0d0b24; --paper-2: #1c1941; --paper-3: #28244f; }
.fj-footer-top {
  position: relative; height: 150px; margin-bottom: -1px; overflow: hidden;
  background:
    radial-gradient(280px 120px at 50% 100%, rgba(255, 122, 26, .5), transparent 70%),
    radial-gradient(1.4px 1.4px at 14% 62%, rgba(255, 243, 220, .8), transparent),
    radial-gradient(1.2px 1.2px at 31% 48%, rgba(255, 243, 220, .6), transparent),
    radial-gradient(1.5px 1.5px at 72% 58%, rgba(255, 243, 220, .8), transparent),
    radial-gradient(1.2px 1.2px at 88% 44%, rgba(255, 243, 220, .6), transparent),
    linear-gradient(180deg, #120f3a 0%, #1f1b4d 100%);
}
html.dark .fj-footer-top {
  background:
    radial-gradient(280px 120px at 50% 100%, rgba(255, 122, 26, .45), transparent 70%),
    radial-gradient(1.4px 1.4px at 14% 62%, rgba(255, 243, 220, .8), transparent),
    radial-gradient(1.2px 1.2px at 31% 48%, rgba(255, 243, 220, .6), transparent),
    radial-gradient(1.5px 1.5px at 72% 58%, rgba(255, 243, 220, .8), transparent),
    radial-gradient(1.2px 1.2px at 88% 44%, rgba(255, 243, 220, .6), transparent),
    linear-gradient(180deg, #08071c 0%, #0d0b24 100%);
}
.fj-footer-swags {
  position: absolute; left: 0; right: 0; top: 0; height: 64px;
  background:
    var(--swag-a-n) repeat-x 0 0 / 260px 58px,
    var(--swag-b-n) repeat-x 90px 8px / 200px 50px;
}
.fj-footer-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: #2c1c47; box-shadow: 0 -2px 0 rgba(255, 194, 51, .18); }
html.dark .fj-footer-ground { background: #171230; }
.fj-footer-things {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 1;
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(.9rem, 3.4vw, 3rem);
  padding: 0 1rem;
}
.fj-footer-things > span { display: block; flex: 0 0 auto; }
.fj-footer-things .fj-ft-hat { width: 74px; }
.fj-footer-things .fj-ft-corn { width: 26px; transform: rotate(-12deg); transform-origin: 50% 100%; }
.fj-footer-things .fj-ft-corn--b { transform: rotate(14deg); }
.fj-footer-things .fj-ft-pop { width: 38px; }
.fj-footer-things .fj-ft-fire { width: 84px; margin-bottom: -4px; }
@media (max-width: 1023px) { .fj-footer-things > .fj-ft-wide { display: none; } }
@media (max-width: 479px) { .fj-footer-things > .fj-ft-mid { display: none; } }
.fj-footer a:hover { color: #ffc233; }
html.dark #desktopFooter li { color: var(--ink-2) !important; }
#desktopFooter.fj-footer { background: var(--paper) !important; }

html .ed-floating-nav {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}
html .ed-floating-nav .ed-floating-link { font-family: var(--font-ui); font-size: .92rem; font-weight: 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: a chita-covered noticeboard with a cream card pinned to it */
html body .fj-footer .ed-newsletter {
  position: relative;
  background: linear-gradient(#fffaf0, #fffaf0) padding-box, var(--chita-blue) border-box;
  background-size: auto, 64px 64px;
  color: #1f1b4d;
  border: 16px solid transparent; border-radius: 22px;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .55);
  overflow: hidden;
}
html body .fj-footer .ed-newsletter::before, html body .fj-footer .ed-newsletter::after { display: none; }
html body .fj-footer .ed-newsletter, html body .fj-footer .ed-newsletter * { --ink: #1f1b4d; --ink-2: #433e78; }
html body .fj-footer .ed-newsletter-input { background: #ffffff !important; color: #1f1b4d !important; border: 1px solid rgba(31, 27, 77, .2) !important; border-radius: 12px; }
html body .fj-footer .ed-newsletter-input::placeholder { color: #7671a0; }
html body .fj-footer .ed-newsletter-input:focus { border-color: #d7263d !important; box-shadow: 0 0 0 3px rgba(215, 38, 61, .15); }
html body .fj-footer .ed-newsletter-btn {
  background: #d7263d; color: #ffffff; border: 0; border-radius: 12px;
  box-shadow: 0 3px 0 #8f1426;
  font-family: var(--font-ui); font-weight: 800;
}
html body .fj-footer .ed-newsletter-age { color: #433e78; }

/* Logo plaque: the light-mode logo on a cream board framed in gingham,
   a nail in each corner, wherever it sits on the night square (footer,
   app splash). */
.fj-plaque {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 1.5rem;
  border: 8px solid transparent;
  border-radius: 14px;
  background: linear-gradient(#fffaf0, #fffaf0) padding-box, var(--gingham);
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .6);
}
.fj-plaque::before {
  content: ''; position: absolute; inset: 4px; pointer-events: none;
  background:
    radial-gradient(circle, #8a6a4a 0 2.2px, transparent 2.8px) left top / 10px 10px no-repeat,
    radial-gradient(circle, #8a6a4a 0 2.2px, transparent 2.8px) right top / 10px 10px no-repeat,
    radial-gradient(circle, #8a6a4a 0 2.2px, transparent 2.8px) left bottom / 10px 10px no-repeat,
    radial-gradient(circle, #8a6a4a 0 2.2px, transparent 2.8px) right bottom / 10px 10px no-repeat;
}

/* Long titles and descriptions show in full; a card grows instead of
   clipping them. */
html [class*="line-clamp-"] { -webkit-line-clamp: unset; }
html body .truncate { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* .text-fit (assets/css/header.css) shrinks a title to one line with JS,
   measured before the display face loads; under this theme it wraps. */
html body .text-fit { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
/* On phones a heading never splits mid-word; only a word wider than the
   whole column may still break. */
@media (max-width: 639px) {
  html body :is(.text-fit, :is(h1, h2, h3).truncate) { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
  /* the auction page's "similar auctions" link ("Andere Auktionen durchstöbern") drops under its heading */
  html body div.flex.justify-between:has(> a.ed-link-arrow.whitespace-nowrap) { flex-wrap: wrap; row-gap: .75rem; }
}

/* ── Dark-mode greys from assets/css/header.css ──
   header.css forces a neutral near-black palette onto Tailwind's light
   utilities with !important; these follow the theme's own surfaces. */
html.dark body { background-color: var(--paper) !important; }
html.dark .mobile-glass-header { background: rgba(17, 15, 44, 0.94) !important; border-bottom-color: var(--rule) !important; }
html.dark #desktopFooter, html.dark #desktopFooter.fj-footer { background: var(--paper) !important; }
html.dark .floating-nav-shell,
html.dark .safe-area-bottom > div.mobile-bottom-nav { background: rgba(28, 25, 65, 0.96) !important; }
html.dark .premium-side-menu { background: var(--paper) !important; }
/* header.css paints the phone language sheet near-black; here it is the
   night sky with the bunting along its top. */
html.dark #langSheet { background: var(--bunting), linear-gradient(180deg, #1c1941, #110f2c) !important; background-size: 132px 26px, auto !important; padding-top: 1.4rem; }
html.dark #langSheet .lang-row span { color: var(--ink) !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, #28244f, #110f2c, #2c1c47, #0b0a20) !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 indigo. 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: #0b0a20 !important;
  border-color: rgba(255, 243, 220, .2) !important;
  color: #fff3dc !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 indigo. */
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: #0b0a20;
  --paper: #fff3dc;
  border-color: rgba(255, 194, 51, .3);
}

html header.safe-top-header[style] { background: rgba(255, 250, 240, .95) !important; }
html.dark header.safe-top-header[style] { background: rgba(17, 15, 44, .95) !important; }

/* ── Login / register / forgot-password brand panel: the square at night ── */
:root, html.dark {
  --brand-gradient: var(--night-bg);
  --brand-glow-1: rgba(255, 122, 26, 0.3);
  --brand-glow-2: rgba(36, 99, 214, 0.26);
}
.brand-panel { background: var(--swag-deep-n) repeat-x -40px 0 / 300px 72px, var(--night-bg) !important; }
/* assets/css/pages/login.css loads after the theme and draws ::after as a
   round glow; here it is the fogueira's light rising from the panel's foot. */
html .brand-panel::after {
  content: ''; position: absolute;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: 100% !important; height: 40% !important;
  border-radius: 0 !important; transform: none !important; opacity: 1 !important; filter: none !important;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255, 122, 26, .35), transparent 70%) !important;
  pointer-events: none;
}
.brand-panel .text-purple-200,
.brand-panel [class*="text-purple-200"] { color: rgba(255, 243, 220, 0.84) !important; }
.brand-panel h2 { font-family: var(--font-display); font-weight: 400 !important; }

/* ── Wallet balance card: the caixa, the booth where the festa sells its
   fichas — a chita awning scalloped along the top, the booth in the night
   indigo, a gingham cloth along the counter and a ticket notch punched in
   each side ── */
html body .wallet-hero {
  position: relative;
  background:
    radial-gradient(circle at 0 50%, var(--paper) 0 13px, transparent 13.5px) left center / 28px 28px no-repeat,
    radial-gradient(circle at 100% 50%, var(--paper) 0 13px, transparent 13.5px) right center / 28px 28px no-repeat,
    var(--night-bg);
  border: 0;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  color: #fff3dc;
  overflow: hidden;
  padding-top: 3.9rem !important; padding-bottom: 2.9rem !important;
}
/* The awning: chita fabric whose hem is cut in scallops */
html body .wallet-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 36px; pointer-events: none; z-index: 0;
  background: linear-gradient(#9a6233 0 7px, rgba(0, 0, 0, .2) 7px 9px, transparent 9px), var(--chita-red);
  background-size: auto, 76px 76px;
  -webkit-mask: linear-gradient(#000 0 calc(100% - 12px), transparent 0), radial-gradient(circle at 50% 0, #000 11.5px, transparent 12px) 0 100% / 24px 12px repeat-x;
          mask: linear-gradient(#000 0 calc(100% - 12px), transparent 0), radial-gradient(circle at 50% 0, #000 11.5px, transparent 12px) 0 100% / 24px 12px repeat-x;
  border-radius: 0; opacity: 1; filter: none; transform: none; width: auto;
}
/* The counter cloth along the foot */
html body .wallet-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 14px; pointer-events: none; z-index: 0;
  background: var(--gingham); border-radius: 0; opacity: 1; filter: none; transform: none; width: auto;
  box-shadow: inset 0 2px 0 rgba(31, 27, 77, .25);
}
html body .wallet-hero > * { position: relative; z-index: 1; }
html body .wallet-balance-num {
  font-family: var(--font-display); font-variation-settings: normal; font-weight: 400;
  color: #ffffff; overflow-wrap: normal; word-break: normal;
  letter-spacing: .01em;
}
html body .wallet-hero-btn-primary { background: #ffc233; color: #1f1b4d; border: 0; font-family: var(--font-ui); font-weight: 800; border-radius: 12px; box-shadow: 0 3px 0 #b37f00; }
html body .wallet-hero-btn-primary:hover { background: #ffd05c; color: #1f1b4d; }
/* The shared card letters its small print in near-transparent white,
   too faint on the booth; lift it to the firelit cream. */
html body .wallet-hero [style*="rgba(255,255,255,0.4)"], html body .wallet-hero [style*="rgba(255,255,255,0.35)"], html body .wallet-hero [style*="color:color-mix(in srgb, var(--paper)"] { color: rgba(255, 243, 220, .82) !important; }
html body .wallet-hero [style*="rgba(255,255,255,0.3)"], html body .wallet-hero [style*="rgba(255,255,255,0.25)"] { color: rgba(255, 243, 220, .64) !important; }
html body .wallet-hero-btn-primary, html body .wallet-hero-btn-secondary { white-space: nowrap; }
html body .wallet-hero-btn-secondary { font-family: var(--font-ui); font-weight: 700; color: #fff3dc; border-color: rgba(255, 243, 220, .45); border-radius: 12px; }

/* ── Mystery box card (styled by assets/css/pages/home.css): a string of
   bunting hung 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: 26px; border-radius: 0;
  background: var(--bunting);
  opacity: 1; z-index: 2;
}
html .ed-card-mystery img { position: relative; z-index: 1; }

/* ── Product page buy box: the bunting 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;
  padding-top: 2.2rem;
}
html body .pd-buybox::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px;
  background: var(--bunting);
}
html body .pd-buybox .font-display.text-4xl { font-weight: 400; color: var(--theme-600); overflow-wrap: normal; }
.pd-title { font-weight: 400 !important; }

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

/* Shared markup's stock purple, indigo and blue accents (coupon buttons,
   tier chips, focus rings) take the theme's chita red. */
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(215, 38, 61, .3); }
html.dark .border-violet-200 { border-color: rgba(255, 176, 46, .35) !important; }
html .focus\:ring-purple-400:focus { --tw-ring-color: rgba(215, 38, 61, .35); }
html .focus\:border-purple-400:focus { border-color: var(--red); }

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

/* Carousel arrows: home.css draws them ink on paper, and dynamic-theme's
   ".dark button" letters them the colour of their fill after dark; here
   they are the theme's own buttons. */
html .ed-carousel-btn, html.dark .ed-carousel-btn { background: var(--btn-bg); color: var(--btn-ink); border: 0; box-shadow: var(--btn-shadow); }
html .ed-carousel-btn:hover, html.dark .ed-carousel-btn:hover { background: var(--btn-bg-hover); color: var(--btn-ink); }

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

/* ── Cart and checkout: the order total under the bunting ──
   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: 2.2rem !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: 26px;
  background: var(--bunting);
}
html .rounded-2xl:has(> div > div > #summary-total) > div,
html section.rounded-2xl:has([x-text="totalDisplay()"]) > div { border-style: dashed !important; }
html #summary-total,
html section.rounded-2xl [x-text="totalDisplay()"] {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--theme-600);
}

/* The status strip holds one line, never wrapping inside its 32px. */
.hdr-strip.fj-strip-tight .ed-status > span.xl\:inline-flex,
.hdr-strip.fj-strip-tight .ed-status > span:has(+ span.xl\:inline-flex) { display: none; }
.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 .fj-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; }
}

/* Tab bars on the Earn and Winners pages sit on the page's own paper,
   not on the near-black header.css gives them after dark. */
html.dark #pillNavBar { background: color-mix(in srgb, var(--paper) 92%, transparent) !important; border-color: var(--rule) !important; }
html .wn-tab-bar, html.dark .wn-tab-bar { background: color-mix(in srgb, var(--paper) 94%, transparent); }
html .wn-tab-active, html .wn-view-btn-active, html.dark .wn-tab-active, html.dark .wn-view-btn-active { background: var(--btn-bg); color: var(--btn-ink); }

/* ── My Winnings: each prize laid out on a square of chita under a little
   string of bunting, a different print for each card, its price on a
   hand-painted board ── */
.fj-win {
  --chita: var(--chita-red);
  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;
}
.fj-win:nth-child(5n+2) { --chita: var(--chita-blue); }
.fj-win:nth-child(5n+3) { --chita: var(--chita-yellow); }
.fj-win:nth-child(5n+4) { --chita: var(--chita-green); }
.fj-win:nth-child(5n+5) { --chita: var(--chita-pink); }
.fj-win:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fj-win__wrap {
  background: var(--chita); background-size: 120px 120px;
  padding: 34px 14px 14px;
}
.fj-win__wrap::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 1;
  background: var(--bunting), #fffaf0;
}
html.dark .fj-win__wrap::before { background: var(--bunting), #1c1941; }
/* The prize sits on a white plate in the middle of the cloth */
.fj-win__wrap > img {
  position: relative; z-index: 0;
  background: radial-gradient(circle at 50% 45%, #ffffff 60%, #f6efe2);
  border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 10px 18px -10px rgba(0, 0, 0, .55);
}
.fj-win__wrap > .absolute { z-index: 3; top: auto !important; bottom: 1.4rem; }
.fj-win__tag {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 8px;
}
.fj-win__tag--open { color: #ffffff; background: #b81d33; border-color: transparent; }
.fj-win__tag--done { color: #ffffff; background: #17804a; border-color: transparent; }
html.dark .fj-win__tag--open { color: #1f1b4d; background: #ffb02e; }
html.dark .fj-win__tag--done { color: #0b0a20; background: #4fd18b; }
.fj-win__name { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
html:is(:lang(ru), :lang(vi)) .fj-win__name { font-weight: 800; }
.fj-win__label { padding-top: .6rem; border-top: 2px dashed var(--rule); }
.fj-win__price {
  display: inline-block;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.1rem, 4vw, 1.3rem); line-height: 1;
  color: var(--theme-600); overflow-wrap: normal; white-space: nowrap;
}
.fj-win__btn { min-height: 2.75rem; padding: .55rem .9rem; font-size: .9rem; }
.fj-win__cart, .fj-win__btn-off {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 12px; font-weight: 700;
}
.fj-win__cart { color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); box-shadow: 0 2px 0 var(--rule); }
.fj-win__cart:hover { border-color: var(--red); color: var(--red); }
.fj-win__btn-off { color: var(--ink-soft); background: transparent; border: 1px dashed var(--rule); cursor: not-allowed; }
.fj-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;
}

/* ── The festa's materials, shared by the skins (assets/css/skin/) and the
   plugin variants, so a surface anywhere can be built from them ──
   - the small string of bandeirinhas for card and table tops;
   - the chita awning: a batten with the cloth hung from it, its hem cut
     in scallops (--scallop is the mask that cuts it);
   - straw, woven like the hats: rings round icons, avatars and the
     current page;
   - the painted board of the stalls, for price boards and kickers;
   - chalk, the lines marked on the quadrilha floor, for dashed rules;
   - pennant, balloon, corn, hat and flame shapes as masks for small marks. */
:root {
  --bunting-sm: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='14' viewBox='0 0 66 14'><path d='M0 2 Q33.0 4.4 66 2' fill='none' stroke='%237a5a3a' stroke-width='1.1'/><g transform='rotate(0.8 5.5 2.4)'><path d='M1.8 2.4 H9.2 V12.9 L5.5 9.9 L1.8 12.9 Z' fill='%23e63946'/></g><g transform='rotate(0.5 16.5 2.9)'><path d='M12.8 2.9 H20.2 V13.4 L16.5 10.5 L12.8 13.4 Z' fill='%23ffc233'/></g><g transform='rotate(0.2 27.5 3.2)'><path d='M23.8 3.2 H31.2 V13.7 L27.5 10.7 L23.8 13.7 Z' fill='%232463d6'/></g><g transform='rotate(-0.2 38.5 3.2)'><path d='M34.8 3.2 H42.2 V13.7 L38.5 10.7 L34.8 13.7 Z' fill='%231f9d55'/></g><g transform='rotate(-0.5 49.5 2.9)'><path d='M45.8 2.9 H53.2 V13.4 L49.5 10.5 L45.8 13.4 Z' fill='%23ff7a1a'/></g><g transform='rotate(-0.8 60.5 2.4)'><path d='M56.8 2.4 H64.2 V12.9 L60.5 9.9 L56.8 12.9 Z' fill='%23ff5c9a'/></g></svg>") repeat-x left top / 66px 14px;
  --bunting-sm-n: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='14' viewBox='0 0 66 14'><path d='M0 2 Q33.0 4.4 66 2' fill='none' stroke='%23f3dfb4' stroke-width='1.1'/><g transform='rotate(0.8 5.5 2.4)'><path d='M1.8 2.4 H9.2 V12.9 L5.5 9.9 L1.8 12.9 Z' fill='%23e63946'/></g><g transform='rotate(0.5 16.5 2.9)'><path d='M12.8 2.9 H20.2 V13.4 L16.5 10.5 L12.8 13.4 Z' fill='%23ffc233'/></g><g transform='rotate(0.2 27.5 3.2)'><path d='M23.8 3.2 H31.2 V13.7 L27.5 10.7 L23.8 13.7 Z' fill='%232463d6'/></g><g transform='rotate(-0.2 38.5 3.2)'><path d='M34.8 3.2 H42.2 V13.7 L38.5 10.7 L34.8 13.7 Z' fill='%231f9d55'/></g><g transform='rotate(-0.5 49.5 2.9)'><path d='M45.8 2.9 H53.2 V13.4 L49.5 10.5 L45.8 13.4 Z' fill='%23ff7a1a'/></g><g transform='rotate(-0.8 60.5 2.4)'><path d='M56.8 2.4 H64.2 V12.9 L60.5 9.9 L56.8 12.9 Z' fill='%23ff5c9a'/></g></svg>") repeat-x left top / 66px 14px;
  --awning: linear-gradient(#9a6233 0 6px, rgba(0, 0, 0, .22) 6px 8px, transparent 8px), var(--chita-red);
  --awning-blue: linear-gradient(#9a6233 0 6px, rgba(0, 0, 0, .22) 6px 8px, transparent 8px), var(--chita-blue);
  --awning-yellow: linear-gradient(#9a6233 0 6px, rgba(0, 0, 0, .22) 6px 8px, transparent 8px), var(--chita-yellow);
  --scallop: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 50% 0, #000 9.5px, transparent 10px) 0 100% / 20px 10px repeat-x;
  --straw:
    repeating-linear-gradient(45deg, rgba(170, 118, 30, .38) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(255, 238, 180, .5) 0 2px, transparent 2px 6px),
    #efc15a;
  --straw-ring: 0 0 0 3px #efc15a, 0 0 0 4.5px #b98326;
  --ficha: radial-gradient(circle at 38% 32%, #ffffff, #fbeedb 72%);
  --board:
    repeating-linear-gradient(0deg, rgba(74, 37, 17, .14) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #c98a4a, #a8692f);
  --board-ink: #fff3dc;
  --chalk: repeating-linear-gradient(90deg, rgba(31, 27, 77, .28) 0 9px, transparent 9px 15px);
  --pennant-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'><path d='M0 0H20V26L10 18.5L0 26Z'/></svg>");
  --balloon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M12 0L21 6L23 15L18 23L14 25V30H10V25L6 23L1 15L3 6Z'/></svg>");
  --corn-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'><path d='M10 0C15 1 16 9 15.5 16C15 21 13 23 10 23C7 23 5 21 4.5 16C4 9 5 1 10 0ZM10 30C5 27 2 21 3 14C5 20 7 22 10 24C13 22 15 20 17 14C18 21 15 27 10 30Z'/></svg>");
  --hat-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><path d='M8 13C8 5 11 1 15 1S22 5 22 13C26 13.5 30 15 30 16.5C30 18.5 23 20 15 20S0 18.5 0 16.5C0 15 4 13.5 8 13Z'/></svg>");
  --flame-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 28'><path d='M10 0C13 6 19 9 19 17C19 23 15 28 10 28S1 23 1 17C1 12 5 9 6 4C8 8 9 10 10 11C11 7 10 3 10 0Z'/></svg>");
  /* The bunting colours by number, for the skins' rotating marks */
  --fj-c1: #e63946; --fj-c2: #ffc233; --fj-c3: #2463d6; --fj-c4: #1f9d55; --fj-c5: #ff7a1a; --fj-c6: #ff5c9a;
  /* Paper for sheets and dialogs: the theme's paper with the print faint on it */
  --sheet: var(--flowers) repeat, var(--paper-2);
  --fire-glow: radial-gradient(closest-side, rgba(255, 154, 31, .28), transparent);
}
html.dark {
  --chalk: repeating-linear-gradient(90deg, rgba(255, 243, 220, .3) 0 9px, transparent 9px 15px);
  --ficha: radial-gradient(circle at 38% 32%, #fffaf0, #f3e3c6 72%);
  --sheet: var(--flowers) repeat, var(--paper-2);
  --fire-glow: radial-gradient(closest-side, rgba(255, 154, 31, .22), transparent);
}

/* ── Game palette ──
   The earn-games arena hands these to each HTML5 board, so 2048 tiles,
   hex cells and word-grid letters take the festa's colours: on the warm
   paper by day, round the fire after dark. Tiles rise from pale corn
   through the bunting colours to the night indigo. */
:root {
  --game-bg:        #fffaf0;
  --game-surface:   #f3e2c4;
  --game-surface-2: #ffffff;
  --game-ink:       #1f1b4d;
  --game-muted:     #7671a0;
  --game-accent:    #d7263d;
  --game-accent-ink:#ffffff;
  --game-good:      #1f9d55;
  --game-bad:       #94162a;
  --game-tile-1:    #fff1c9;
  --game-tile-2:    #ffd76b;
  --game-tile-3:    #ffb02e;
  --game-tile-4:    #ff7a1a;
  --game-tile-5:    #ff5c9a;
  --game-tile-6:    #e63946;
  --game-tile-7:    #2463d6;
  --game-tile-8:    #1f1b4d;
  --game-radius:    10px;
  --game-font:      'Lilita One', 'Nunito', system-ui, sans-serif;
  --game-font-css:  "/assets/themes/festa-junina/assets/fonts/fonts.css";
  --game-arena-screen: #fffaf0;
  --game-arena-coins:  #b37f00;
  --game-arena-win:    #17804a;
  --game-arena-danger: #b81d33;
}
html.dark {
  --game-bg:        #110f2c;
  --game-surface:   #1c1941;
  --game-surface-2: #2b2663;
  --game-ink:       #fff3dc;
  --game-muted:     #b5abc8;
  --game-accent:    #ffb02e;
  --game-accent-ink:#1f1b4d;
  --game-good:      #4fd18b;
  --game-bad:       #ff6b6b;
  --game-tile-1:    #2b2663;
  --game-tile-2:    #3d3580;
  --game-tile-3:    #2463d6;
  --game-tile-4:    #1f9d55;
  --game-tile-5:    #ff5c9a;
  --game-tile-6:    #e63946;
  --game-tile-7:    #ff7a1a;
  --game-tile-8:    #ffc233;
  --game-arena-screen: #110f2c;
  --game-arena-coins:  #ffc233;
  --game-arena-win:    #4fd18b;
  --game-arena-danger: #ff6b6b;
}

/* header.css letters footer headings and notes in pale grey after dark;
   on the newsletter's cream card they keep the night ink. */
html.dark body .fj-footer .ed-newsletter :is(h4, p:not(#newsletter-msg)) { color: #1f1b4d !important; }
html.dark body .fj-footer .ed-newsletter label { color: #433e78 !important; }

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

/* Status tones (kernel 1.1.166): this theme's own green, amber, red and info hues
   for the shared .px-tone-* chips and notes, each set so its chip and text
   read at 4.5:1 or better on this theme's paper in light and dark. */
html:root { --px-good: #1c8d4c; --px-warn: #996300; --px-crit: #e32130; --px-info: #2463d6; }
html.dark:root { --px-good: #4dd18a; --px-warn: #ffc233; --px-crit: #ff9999; --px-info: #94b6ff; }

/* Changing language, the scene (festa-junina.js): bandeirinhas on a string
   across the night sky turn over one by one from the old flag to the new,
   and the paper lantern below lights with the new name; after the reload
   sparks rise from the fogueira. The sky stays dark in both modes and the
   lantern stays lit, so their text is fixed. The night is the same on both
   pages, so the reload never shows. */
.fj-lang-stage { background: color-mix(in srgb, #0b0a20 60%, transparent); }
.fj-lang-sky {
  position: relative; width: min(560px, 100%); box-sizing: border-box; padding: 6px 18px 0; overflow: hidden;
  border-radius: var(--radius, 16px); color: #fff3dc;
  background:
    radial-gradient(circle at 12% 30%, rgba(255, 243, 220, .7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 22%, rgba(255, 243, 220, .6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 90% 62%, rgba(255, 243, 220, .5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 6% 74%, rgba(255, 243, 220, .5) 0 1px, transparent 1.5px),
    radial-gradient(ellipse at 50% 120%, rgba(255, 122, 26, .35), transparent 55%),
    linear-gradient(180deg, #151236, #1f1b4d);
  box-shadow: inset 0 0 0 2px rgba(255, 194, 51, .3), 0 34px 70px -28px rgba(0, 0, 0, .65);
  font-family: var(--font-ui);
}
.fj-lang-string { position: relative; display: flex; justify-content: space-between; height: 84px; margin: 0 -6px; padding: 0 4px; transform-origin: 50% -160px; }
.fj-lang-twine {
  position: absolute; left: -10px; right: -10px; top: -26px; height: 52px; box-sizing: border-box;
  border-bottom: 2px solid #f3dfb4; border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.fj-lang-flag { position: relative; display: grid; width: 34px; height: 44px; transform-origin: 50% 0; transform: translateY(var(--y)) rotate(var(--r)); }
.fj-lang-face {
  grid-area: 1 / 1; display: grid; place-items: center; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); background: #e63946;
}
.fj-lang-face img { width: 100%; height: 100%; object-fit: cover; }
.fj-lang-face b { margin-top: -8px; font: 800 10px/1 var(--font-ui); color: #1f1b4d; }
.fj-lang-flag:nth-child(3n+2) .fj-lang-face { background: #ffc233; }
.fj-lang-flag:nth-child(3n) .fj-lang-face { background: #2463d6; }
.fj-lang-flag:nth-child(3n+1) .fj-lang-face { background: #1f9d55; }
.fj-lang-flag:nth-child(3n) .fj-lang-face-new { background: #ff5c9a; }
.fj-lang-flag:nth-child(3n+2) .fj-lang-face-new { background: #ff7a1a; }
.fj-lang-face-old { transform: scaleX(0); }
.fj-lang-lantern {
  position: relative; z-index: 3; display: grid; align-items: center; justify-items: center; width: min(340px, 100%); min-height: 132px; margin: 0 auto;
  box-sizing: border-box; padding: 22px 16px; border-radius: 40% 40% 34% 34% / 26% 26% 22% 22%; text-align: center; color: #1f1b4d;
  background: repeating-linear-gradient(90deg, rgba(150, 60, 0, .14) 0 2px, transparent 2px 26px), radial-gradient(ellipse at 50% 45%, #fff3c4, #ffc233 55%, #ff7a1a 100%);
  box-shadow: inset 0 9px 0 #94162a, inset 0 -9px 0 #94162a, 0 0 34px rgba(255, 194, 51, .45);
}
.fj-lang-lantern::before { content: ""; position: absolute; left: 50%; top: -20px; width: 2px; height: 20px; background: #f3dfb4; }
.fj-lang-lantern > span { grid-area: 1 / 1; max-width: 100%; min-width: 0; }
.fj-lang-was { opacity: 0; font: 400 clamp(20px, 6vw, 28px)/1.15 var(--font-display); color: #433e78; overflow-wrap: anywhere; }
.fj-lang-now { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fj-lang-now img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #94162a; }
.fj-lang-name { max-width: 100%; color: #1f1b4d; font: 400 clamp(28px, 8.5vw, 44px)/1.08 var(--font-display); overflow-wrap: anywhere; }
.fj-lang-fire { position: relative; z-index: 1; width: 60px; height: 40px; margin: 6px auto 0; }
.fj-lang-logs {
  position: absolute; left: 6px; right: 6px; bottom: 4px; height: 10px; border-radius: 5px; background: #7a5a3a;
  box-shadow: 0 0 0 1px #5a3f24; transform: rotate(-8deg);
}
.fj-lang-logs::after { content: ""; position: absolute; inset: 0; border-radius: 5px; background: #8a6a46; transform: rotate(16deg); }
.fj-lang-flame {
  position: absolute; left: 50%; bottom: 10px; width: 26px; height: 30px; margin-left: -13px; border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse at 50% 80%, #fff3c4, #ffc233 40%, #ff7a1a 75%, rgba(230, 57, 70, 0) 100%); transform-origin: 50% 100%;
}
.fj-lang-sparks { position: absolute; left: 50%; bottom: 30px; width: 0; height: 0; }
.fj-lang-sparks i { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #ffc233; box-shadow: 0 0 6px #ff7a1a; opacity: 0; }
.fj-lang-sparks i:nth-child(1) { --x: -26px; --y: -80px; }
.fj-lang-sparks i:nth-child(2) { --x: 18px;  --y: -96px; }
.fj-lang-sparks i:nth-child(3) { --x: -8px;  --y: -110px; }
.fj-lang-sparks i:nth-child(4) { --x: 34px;  --y: -70px; }
.fj-lang-sparks i:nth-child(5) { --x: -40px; --y: -60px; }
.fj-lang-sparks i:nth-child(6) { --x: 6px;   --y: -84px; }
.fj-lang-sparks i:nth-child(7) { --x: 46px;  --y: -100px; }
.fj-lang-sparks i:nth-child(8) { --x: -52px; --y: -94px; }

/* Out: the string swings and the flags turn over; the lantern lights. */
.px-lang-stage-out .fj-lang-sky { animation: fj-lang-sky-in .32s cubic-bezier(.2, .8, .3, 1.1) both; }
.px-lang-stage-out .fj-lang-string { animation: fj-lang-swing .9s ease-in-out both; }
.px-lang-stage-out .fj-lang-face-old { animation: fj-lang-turn-off .16s ease-in calc(.3s + var(--d, 0ms)) both; }
.px-lang-stage-out .fj-lang-face-new { animation: fj-lang-turn-on .16s ease-out calc(.46s + var(--d, 0ms)) both; }
.px-lang-stage-out .fj-lang-was { animation: fj-lang-was .62s ease-in both; }
.px-lang-stage-out .fj-lang-now { animation: fj-lang-now .95s ease-out both; }
.px-lang-stage-out .fj-lang-lantern { animation: fj-lang-light .95s ease-out both; }
/* In: it starts where out ended; the fire flares and sparks rise. */
.px-lang-stage-in .fj-lang-flame { animation: fj-lang-flicker .25s ease-in-out 4 both; }
.px-lang-stage-in .fj-lang-sparks i { animation: fj-lang-spark .8s ease-out .1s both; }
.px-lang-stage-in .fj-lang-sparks i:nth-child(even) { animation-delay: .28s; }
.px-lang-stage-in .fj-lang-flag { animation: fj-lang-flutter .5s ease-in-out .1s both; }
.px-lang-stage-in .fj-lang-sky { animation: fj-lang-sky-out .28s ease-in 1s both; }
@keyframes fj-lang-sky-in { from { transform: translateY(40px); opacity: 0; } }
@keyframes fj-lang-sky-out { to { transform: translateY(26px); opacity: 0; } }
@keyframes fj-lang-swing { 25% { transform: rotate(3deg); } 55% { transform: rotate(-2.5deg); } 80% { transform: rotate(1deg); } }
@keyframes fj-lang-turn-off { from { transform: scaleX(1); } }
@keyframes fj-lang-turn-on { from { transform: scaleX(0); } }
@keyframes fj-lang-was { 0%, 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fj-lang-now { 0%, 64% { opacity: 0; transform: scale(.9); } }
@keyframes fj-lang-light { 0%, 55% { filter: brightness(.6) saturate(.6); } }
@keyframes fj-lang-flicker { 50% { transform: scale(1.15, 1.3); } }
@keyframes fj-lang-spark {
  0%   { opacity: 0; transform: none; }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x, 0), var(--y, -80px)); }
}
@keyframes fj-lang-flutter { 50% { transform: translateY(var(--y)) rotate(calc(var(--r) + 8deg)); } }
@media (max-width: 460px) {
  .fj-lang-sky { padding: 6px 12px 0; }
  .fj-lang-flag { width: 28px; height: 38px; }
}

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

/* Withdraw window: Submit is painted in this theme's good green
   (--px-good); a shade deeper here by day, where white on it stood
   under 4.5:1. */
html:not(.dark) body #withdrawModal button[type="submit"][style*="--px-good"] { background: #1a8246 !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"] {
  --ink-soft: #706b98;
}
/* rev 868fe5109c9f2a2b */