/* xetribes1 (31-10-2026; Mortimer: «hay que agregar 5 nuevos wheel style, uno para cada tribu de xelementia … quien podrá
   host with it, pues los miembros del team que pertenezcan a el team de esa tribu (los superadmins tendrán total acceso
   obviamente), quiero que cuando se seleccione uno de estos nuevos style todo cambie y se adapte a esa tribu, osea,
   atmosfera total! … aether.xelementia.com … hazlo muy muy muy especial»).
   The five tribe wheels (giveaways.TRIBE_STYLES: Akasha, Vayu, Bhumi, Agni, Apas) and the page that becomes the tribe.
   - The colours of the wheel, its halo, bulbs, pointer and swatch: [data-style="<tribe>"] (as every wheel style).
   - The tribe's tokens (--xt-*): [data-tribe="<tribe>"] (the stage, the winner window, the picker tile, the surge) and
     body:has(.gw-stage[data-tribe="<tribe>"]) (the whole page). The stage gets data-tribe from the page and from
     giveaway.js setStyle(), so picking another wheel in the setup changes the whole page at once.
   - The page: XElementia's own sky of that tribe (the same layers as static/css/tribe-atmos.css of xelementia.com, via
     bascdao's copy ape-xe-looks.css), its particles (giveaway-tribes.js), the head with the tribe's banner and emblem, the
     title in the tribe's light, tinted glass panels (no backdrop-filter over a moving sky), the tribe's buttons.
   - The wheel: the tribe's alchemical sign turning behind it (.gw-sigil), the element round the stage (::after).
   - The winner: the tribe's window and the element's light over the page when the wheel stops (.gw-surge).
   The BASC hub, the engraved ring, the pointer's shape and the 28 lights never change. prefers-reduced-motion: still. */


/* Akasha · Aether tribe (aether.xelementia.com) */
[data-style="aether"] {
    --gw-bg1: #140a33; --gw-bg2: #05020f; --gw-glow1: rgba(169,139,255,0.3); --gw-glow2: rgba(255,143,224,0.18);
    --gw-halo: conic-gradient(from 0deg, rgba(169,139,255,0.6), rgba(255,143,224,0.5), rgba(70,190,255,0.45), rgba(115,86,255,0.55), rgba(169,139,255,0.6));
    --gw-bulb: #f4efff; --gw-bulb-glow: rgba(196,170,255,0.95);
    --gw-ptr1: #f1e9ff; --gw-ptr2: #a98bff; --gw-ptr3: #5b3fb8; --gw-ptr-glow: rgba(169,139,255,0.7);
    --gw-tick: linear-gradient(90deg, #c4b5fd, #fff, #ff9be3);
    --gw-sw: conic-gradient(#7c5cff 0 60deg, #d158d6 0 120deg, #1b1240 0 180deg, #c4b5fd 0 240deg, #46beff 0 300deg, #ff8fe0 0);
    --gw-sw-rim: #d9c8ff; }
[data-tribe="aether"], body:has(.gw-stage[data-tribe="aether"]) {
    --xt-base: #04020c;
    --xt-sky: radial-gradient(55% 40% at 18% 24%, rgba(147, 112, 219, 0.32) 0%, transparent 70%), radial-gradient(50% 38% at 84% 62%, rgba(230, 80, 200, 0.18) 0%, transparent 70%), radial-gradient(45% 32% at 62% 6%, rgba(70, 190, 255, 0.14) 0%, transparent 70%), radial-gradient(70% 45% at 40% 100%, rgba(100, 60, 220, 0.22) 0%, transparent 70%), linear-gradient(180deg, #0a0520 0%, #0b0624 40%, #08041a 70%, #04020c 100%);
    --xt-glow: #a98bff; --xt-glow2: #ff8fe0;
    --xt-card-a: rgba(22, 12, 48, 0.8); --xt-card-b: rgba(9, 5, 22, 0.88); --xt-line: rgba(190, 160, 255, 0.24);
    --xt-title: linear-gradient(92deg, #ffffff 0%, #e2d6ff 32%, #a98bff 64%, #ff9be3 100%);
    --xt-btn: linear-gradient(135deg, #7356ff 0%, #d158d6 100%); --xt-ink: #ffffff; --xt-text: #ece8fb;
    --xt-chip: '✨ Akasha · Aether tribe';
    --xt-emblem: url('../img/tribes/aether-emblem.webp'); --xt-banner: url('../img/tribes/aether-banner.webp');
    --xt-surge: radial-gradient(60% 55% at 50% 45%, rgba(200,170,255,0.55), rgba(255,120,220,0.22) 45%, transparent 75%);
    --xt-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23d9c8ff' stroke-linecap='round'%3E%3Ccircle cx='200' cy='200' r='196' stroke-width='0.9'/%3E%3Ccircle cx='200' cy='200' r='184' stroke-width='0.6' stroke-dasharray='2 6'/%3E%3Ccircle cx='200' cy='200' r='150' stroke-width='0.8'/%3E%3Ccircle cx='200' cy='200' r='96' stroke-width='0.7'/%3E%3Cpath d='M200.0 50.0 L329.9 275.0 L70.1 275.0Z' stroke-width='0.8'/%3E%3Cpath d='M200.0 350.0 L70.1 125.0 L329.9 125.0Z' stroke-width='0.8'/%3E%3Cpath d='M360.0 200.0 L396.0 200.0 M200.0 360.0 L200.0 396.0 M40.0 200.0 L4.0 200.0 M200.0 40.0 L200.0 4.0 ' stroke-width='0.9'/%3E%3Ccircle cx='200' cy='200' r='40' stroke-width='0.7' stroke-dasharray='1 4'/%3E%3Cpath d='M384.0 200.0 L390.0 200.0 M377.7 247.6 L383.5 249.2 M359.3 292.0 L364.5 295.0 M330.1 330.1 L334.4 334.4 M292.0 359.3 L295.0 364.5 M247.6 377.7 L249.2 383.5 M200.0 384.0 L200.0 390.0 M152.4 377.7 L150.8 383.5 M108.0 359.3 L105.0 364.5 M69.9 330.1 L65.6 334.4 M40.7 292.0 L35.5 295.0 M22.3 247.6 L16.5 249.2 M16.0 200.0 L10.0 200.0 M22.3 152.4 L16.5 150.8 M40.7 108.0 L35.5 105.0 M69.9 69.9 L65.6 65.6 M108.0 40.7 L105.0 35.5 M152.4 22.3 L150.8 16.5 M200.0 16.0 L200.0 10.0 M247.6 22.3 L249.2 16.5 M292.0 40.7 L295.0 35.5 M330.1 69.9 L334.4 65.6 M359.3 108.0 L364.5 105.0 M377.7 152.4 L383.5 150.8 ' stroke-width='0.6'/%3E%3C/svg%3E"); }

/* Vayu · Air tribe (air.xelementia.com) */
[data-style="air"] {
    --gw-bg1: #14405f; --gw-bg2: #071a2c; --gw-glow1: rgba(190,240,255,0.26); --gw-glow2: rgba(127,220,255,0.2);
    --gw-halo: conic-gradient(from 0deg, rgba(255,255,255,0.55), rgba(127,220,255,0.5), rgba(28,134,201,0.45), rgba(191,238,255,0.5), rgba(255,255,255,0.55));
    --gw-bulb: #ffffff; --gw-bulb-glow: rgba(191,238,255,0.95);
    --gw-ptr1: #ffffff; --gw-ptr2: #7fdcff; --gw-ptr3: #1c6ea3; --gw-ptr-glow: rgba(127,220,255,0.7);
    --gw-tick: linear-gradient(90deg, #ffffff, #bfeeff, #7fdcff);
    --gw-sw: conic-gradient(#7fdcff 0 60deg, #f4fbff 0 120deg, #2f7fb8 0 180deg, #bfeeff 0 240deg, #1c86c9 0 300deg, #dbe7f0 0);
    --gw-sw-rim: #ffffff; }
[data-tribe="air"], body:has(.gw-stage[data-tribe="air"]) {
    --xt-base: #0a1a2c;
    --xt-sky: radial-gradient(80% 50% at 78% -6%, rgba(255, 255, 255, 0.2) 0%, rgba(190, 235, 255, 0.08) 45%, transparent 70%), radial-gradient(60% 40% at 10% 30%, rgba(140, 220, 255, 0.14) 0%, transparent 70%), radial-gradient(70% 45% at 50% 108%, rgba(120, 200, 255, 0.2) 0%, transparent 70%), linear-gradient(180deg, #123a5c 0%, #0f2f4d 30%, #0c2440 62%, #081a30 100%);
    --xt-glow: #7fdcff; --xt-glow2: #e9fbff;
    --xt-card-a: rgba(16, 44, 72, 0.78); --xt-card-b: rgba(8, 24, 44, 0.86); --xt-line: rgba(200, 240, 255, 0.24);
    --xt-title: linear-gradient(92deg, #ffffff 0%, #e2f8ff 35%, #9fe4ff 70%, #4fc8ff 100%);
    --xt-btn: linear-gradient(135deg, #e9fbff 0%, #7fdcff 55%, #1c86c9 100%); --xt-ink: #04243a; --xt-text: #e8f4fb;
    --xt-chip: '🌪️ Vayu · Air tribe';
    --xt-emblem: url('../img/tribes/air-emblem.webp'); --xt-banner: url('../img/tribes/air-banner.webp');
    --xt-surge: linear-gradient(100deg, transparent 10%, rgba(235,250,255,0.5) 45%, rgba(127,220,255,0.25) 60%, transparent 85%);
    --xt-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23e9fbff' stroke-linecap='round'%3E%3Ccircle cx='200' cy='200' r='196' stroke-width='0.8'/%3E%3Ccircle cx='200' cy='200' r='182' stroke-width='0.5' stroke-dasharray='1 5'/%3E%3Cpath d='M260.0 200.0 L261.5 203.9 L262.8 208.0 L263.8 212.3 L264.4 216.8 L264.8 221.3 L264.8 226.0 L264.5 230.8 L263.9 235.7 L262.9 240.5 L261.5 245.4 L259.7 250.3 L257.6 255.1 L255.1 259.9 L252.2 264.6 L249.0 269.1 L245.3 273.5 L241.3 277.7 L237.0 281.6 L232.3 285.4 L227.3 288.8 L222.0 292.0 L216.4 294.8 L210.5 297.3 L204.4 299.4 L198.0 301.1 L191.4 302.4 L184.7 303.3 L177.8 303.7 L170.8 303.7 L163.7 303.2 L156.6 302.2 L149.5 300.7 L142.3 298.7 L135.2 296.2 L128.3 293.2 L121.4 289.7 L114.7 285.6 L108.2 281.1 L101.9 276.1 L95.9 270.7 L90.2 264.8 L84.8 258.4 L79.9 251.6 L75.3 244.4 L71.1 236.8 L67.4 228.9 L64.2 220.7 L61.5 212.1 L59.4 203.4 L57.8 194.3 L56.8 185.1 L56.5 175.8 L56.7 166.3 L57.5 156.8 L59.0 147.3 L61.2 137.7 L64.0 128.3 L67.4 118.9 L71.5 109.7 L76.2 100.7 L81.5 91.9 L87.5 83.4 L94.1 75.2 L101.2 67.4 L109.0 60.0 L117.2 53.1 L126.0 46.6 L135.3 40.7 L145.1 35.4 L155.2 30.6 L165.8 26.5 L176.6 23.1 L187.8 20.3 L199.3 18.2 L210.9 16.9 L222.8 16.3 L234.7 16.5 L246.7 17.5 L258.7 19.3' stroke-width='.8'/%3E%3Cpath d='M170.0 252.0 L165.8 251.3 L161.7 250.4 L157.5 249.1 L153.3 247.4 L149.1 245.5 L145.0 243.1 L141.0 240.5 L137.2 237.5 L133.5 234.2 L129.9 230.5 L126.6 226.6 L123.4 222.3 L120.6 217.8 L118.0 212.9 L115.7 207.8 L113.7 202.5 L112.1 197.0 L110.8 191.2 L109.9 185.3 L109.4 179.2 L109.4 173.1 L109.7 166.8 L110.5 160.4 L111.7 154.1 L113.4 147.7 L115.6 141.4 L118.2 135.1 L121.3 128.9 L124.8 122.9 L128.8 117.0 L133.2 111.3 L138.1 105.9 L143.4 100.7 L149.1 95.8 L155.2 91.3 L161.7 87.1 L168.5 83.3 L175.6 79.9 L183.1 77.0 L190.8 74.5 L198.8 72.5 L207.0 71.1 L215.4 70.1 L223.9 69.8 L232.5 70.0 L241.2 70.7 L250.0 72.1 L258.7 74.0 L267.4 76.6 L276.0 79.7 L284.4 83.5 L292.7 87.8 L300.8 92.7 L308.6 98.2 L316.1 104.3 L323.3 110.9 L330.1 118.0 L336.5 125.7 L342.5 133.8 L347.9 142.4 L352.9 151.5 L357.2 160.9 L361.0 170.7 L364.2 180.8 L366.7 191.2 L368.6 201.8 L369.8 212.6 L370.3 223.6 L370.0 234.7 L369.1 245.9 L367.4 257.1 L364.9 268.2 L361.7 279.3 L357.8 290.3 L353.1 301.0 L347.7 311.5 L341.5 321.8 L334.7 331.7 L327.1 341.2' stroke-width='.8'/%3E%3Cpath d='M170.0 148.0 L172.6 144.8 L175.6 141.6 L178.8 138.6 L182.3 135.8 L186.1 133.2 L190.1 130.8 L194.4 128.7 L198.9 126.8 L203.7 125.3 L208.6 124.0 L213.7 123.1 L219.0 122.5 L224.3 122.3 L229.8 122.5 L235.4 123.1 L241.0 124.0 L246.6 125.4 L252.2 127.1 L257.8 129.3 L263.3 132.0 L268.7 135.0 L273.9 138.4 L279.0 142.3 L283.9 146.5 L288.6 151.2 L293.0 156.2 L297.1 161.6 L300.9 167.4 L304.4 173.4 L307.5 179.8 L310.2 186.5 L312.5 193.4 L314.3 200.6 L315.7 208.0 L316.6 215.5 L317.0 223.2 L316.8 231.1 L316.2 238.9 L315.0 246.9 L313.3 254.8 L311.0 262.7 L308.1 270.5 L304.8 278.3 L300.8 285.8 L296.3 293.2 L291.3 300.4 L285.8 307.2 L279.7 313.8 L273.2 320.1 L266.2 325.9 L258.7 331.4 L250.8 336.4 L242.5 340.9 L233.8 345.0 L224.8 348.4 L215.5 351.4 L205.9 353.7 L196.1 355.4 L186.1 356.5 L175.9 356.9 L165.6 356.7 L155.3 355.7 L144.9 354.1 L134.6 351.8 L124.3 348.8 L114.2 345.1 L104.2 340.7 L94.4 335.6 L84.9 329.9 L75.7 323.5 L66.9 316.4 L58.4 308.7 L50.4 300.4 L42.9 291.5 L36.0 282.1 L29.6 272.1 L23.8 261.7 L18.6 250.8 L14.2 239.5' stroke-width='.8'/%3E%3Cpath d='M200.0 80.0 L303.9 260.0 L96.1 260.0Z' stroke-width='1'/%3E%3Cpath d='M140 221.6 H260' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='150' stroke-width='0.6'/%3E%3C/svg%3E"); }

/* Bhumi · Earth tribe (earth.xelementia.com) */
[data-style="earth"] {
    --gw-bg1: #13260f; --gw-bg2: #050a04; --gw-glow1: rgba(73,201,90,0.24); --gw-glow2: rgba(216,181,82,0.2);
    --gw-halo: conic-gradient(from 0deg, rgba(73,201,90,0.55), rgba(216,181,82,0.5), rgba(143,184,60,0.45), rgba(176,114,58,0.45), rgba(73,201,90,0.55));
    --gw-bulb: #fff3c4; --gw-bulb-glow: rgba(216,181,82,0.9);
    --gw-ptr1: #f3e2a0; --gw-ptr2: #d8b552; --gw-ptr3: #5b4026; --gw-ptr-glow: rgba(216,181,82,0.6);
    --gw-tick: linear-gradient(90deg, #b8ef84, #fff6c9, #d8b552);
    --gw-sw: conic-gradient(#49c95a 0 60deg, #d8b552 0 120deg, #5b4026 0 180deg, #8fb83c 0 240deg, #1f6b35 0 300deg, #b0723a 0);
    --gw-sw-rim: #d8b552; }
[data-tribe="earth"], body:has(.gw-stage[data-tribe="earth"]) {
    --xt-base: #050a04;
    --xt-sky: radial-gradient(70% 45% at 22% -8%, rgba(214, 222, 120, 0.16) 0%, rgba(120, 170, 60, 0.06) 45%, transparent 70%), radial-gradient(55% 40% at 92% 30%, rgba(60, 176, 67, 0.14) 0%, transparent 70%), radial-gradient(90% 45% at 50% 112%, rgba(150, 105, 40, 0.3) 0%, transparent 70%), linear-gradient(180deg, #0c1a0b 0%, #0b170a 34%, #10180a 66%, #1a160a 100%);
    --xt-glow: #49c95a; --xt-glow2: #d8b552;
    --xt-card-a: rgba(16, 28, 13, 0.82); --xt-card-b: rgba(7, 12, 6, 0.9); --xt-line: rgba(160, 210, 110, 0.22);
    --xt-title: linear-gradient(92deg, #f3ffd9 0%, #b8ef84 36%, #5fcf5a 66%, #d4ae4a 100%);
    --xt-btn: linear-gradient(135deg, #2b8a3a 0%, #8fb83c 60%, #d8b552 100%); --xt-ink: #0b1606; --xt-text: #e8eedf;
    --xt-chip: '🌿 Bhumi · Earth tribe';
    --xt-emblem: url('../img/tribes/earth-emblem.webp'); --xt-banner: url('../img/tribes/earth-banner.webp');
    --xt-surge: radial-gradient(90% 55% at 50% 110%, rgba(216,181,82,0.5), rgba(73,201,90,0.22) 45%, transparent 75%);
    --xt-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23e6cf86' stroke-linecap='round'%3E%3Ccircle cx='200' cy='200' r='196' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='186' stroke-width='0.6'/%3E%3Cpath d='M306.1 306.1 L93.9 306.1 L93.9 93.9 L306.1 93.9Z' stroke-width='0.7'/%3E%3Cpath d='M200.0 350.0 L50.0 200.0 L200.0 50.0 L350.0 200.0Z' stroke-width='0.7'/%3E%3Ccircle cx='200' cy='200' r='150' stroke-width='0.6' stroke-dasharray='4 4'/%3E%3Cpath d='M200.0 320.0 L96.1 140.0 L303.9 140.0Z' stroke-width='1'/%3E%3Cpath d='M140 178.4 H260' stroke-width='1'/%3E%3Cpath d='M386.0 200.0 L396.0 200.0 M331.5 331.5 L338.6 338.6 M200.0 386.0 L200.0 396.0 M68.5 331.5 L61.4 338.6 M14.0 200.0 L4.0 200.0 M68.5 68.5 L61.4 61.4 M200.0 14.0 L200.0 4.0 M331.5 68.5 L338.6 61.4 ' stroke-width='1.2'/%3E%3Ccircle cx='200' cy='200' r='56' stroke-width='0.7'/%3E%3C/svg%3E"); }

/* Agni · Fire tribe (fire.xelementia.com) */
[data-style="fire"] {
    --gw-bg1: #2a0803; --gw-bg2: #0b0201; --gw-glow1: rgba(255,90,31,0.3); --gw-glow2: rgba(255,178,63,0.22);
    --gw-halo: conic-gradient(from 0deg, rgba(255,90,31,0.65), rgba(255,178,63,0.55), rgba(200,30,30,0.5), rgba(255,122,43,0.55), rgba(255,90,31,0.65));
    --gw-bulb: #fff1c9; --gw-bulb-glow: rgba(255,140,40,0.95);
    --gw-ptr1: #fff4c9; --gw-ptr2: #ff7a2b; --gw-ptr3: #8a1a04; --gw-ptr-glow: rgba(255,90,31,0.75);
    --gw-tick: linear-gradient(90deg, #ffc04a, #fff4c9, #ff7a2b);
    --gw-sw: conic-gradient(#ff3d1f 0 60deg, #ff7a2b 0 120deg, #ffc04a 0 180deg, #2a0d07 0 240deg, #c81e1e 0 300deg, #ff5a1f 0);
    --gw-sw-rim: #ffb23f; }
[data-tribe="fire"], body:has(.gw-stage[data-tribe="fire"]) {
    --xt-base: #0b0201;
    --xt-sky: radial-gradient(120% 55% at 50% 112%, rgba(255, 96, 24, 0.5) 0%, rgba(255, 60, 10, 0.16) 45%, transparent 70%), radial-gradient(60% 40% at 8% 100%, rgba(255, 40, 0, 0.28) 0%, transparent 70%), radial-gradient(55% 40% at 94% 96%, rgba(255, 150, 0, 0.2) 0%, transparent 70%), radial-gradient(70% 45% at 50% -8%, rgba(120, 18, 6, 0.55) 0%, transparent 70%), linear-gradient(180deg, #080100 0%, #160403 38%, #2a0803 78%, #3a0d02 100%);
    --xt-glow: #ff5a1f; --xt-glow2: #ffb23f;
    --xt-card-a: rgba(34, 9, 4, 0.82); --xt-card-b: rgba(12, 3, 2, 0.9); --xt-line: rgba(255, 120, 60, 0.24);
    --xt-title: linear-gradient(92deg, #fff4c9 0%, #ffc04a 38%, #ff7a2b 70%, #ff3d1f 100%);
    --xt-btn: linear-gradient(135deg, #ff4d1a 0%, #ff9a2e 100%); --xt-ink: #2a0700; --xt-text: #f4e6df;
    --xt-chip: '🔥 Agni · Fire tribe';
    --xt-emblem: url('../img/tribes/fire-emblem.webp'); --xt-banner: url('../img/tribes/fire-banner.webp');
    --xt-surge: radial-gradient(110% 70% at 50% 115%, rgba(255,120,30,0.6), rgba(255,60,10,0.25) 45%, transparent 75%);
    --xt-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23ffb23f' stroke-linecap='round'%3E%3Cpath d='M366.8 179.9 Q389.1 181.0 395.8 209.8 Q368.0 203.4 366.8 220.1 M361.8 245.2 Q381.9 254.8 377.1 284.0 Q353.9 267.4 346.4 282.4 M332.2 303.7 Q347.1 320.3 331.5 345.3 Q316.4 321.1 303.7 332.2 M282.4 346.4 Q289.9 367.4 265.9 384.6 Q261.2 356.5 245.2 361.8 M220.1 366.8 Q219.0 389.1 190.2 395.8 Q196.6 368.0 179.9 366.8 M154.8 361.8 Q145.2 381.9 116.0 377.1 Q132.6 353.9 117.6 346.4 M96.3 332.2 Q79.7 347.1 54.7 331.5 Q78.9 316.4 67.8 303.7 M53.6 282.4 Q32.6 289.9 15.4 265.9 Q43.5 261.2 38.2 245.2 M33.2 220.1 Q10.9 219.0 4.2 190.2 Q32.0 196.6 33.2 179.9 M38.2 154.8 Q18.1 145.2 22.9 116.0 Q46.1 132.6 53.6 117.6 M67.8 96.3 Q52.9 79.7 68.5 54.7 Q83.6 78.9 96.3 67.8 M117.6 53.6 Q110.1 32.6 134.1 15.4 Q138.8 43.5 154.8 38.2 M179.9 33.2 Q181.0 10.9 209.8 4.2 Q203.4 32.0 220.1 33.2 M245.2 38.2 Q254.8 18.1 284.0 22.9 Q267.4 46.1 282.4 53.6 M303.7 67.8 Q320.3 52.9 345.3 68.5 Q321.1 83.6 332.2 96.3 M346.4 117.6 Q367.4 110.1 384.6 134.1 Q356.5 138.8 361.8 154.8 ' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='166' stroke-width='0.9'/%3E%3Ccircle cx='200' cy='200' r='150' stroke-width='0.6' stroke-dasharray='3 7'/%3E%3Cpath d='M200.0 60.0 L321.2 270.0 L78.8 270.0Z' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='70' stroke-width='0.7'/%3E%3Cpath d='M350.0 200.0 L358.0 200.0 M347.1 229.3 L355.0 230.8 M338.6 257.4 L346.0 260.5 M324.7 283.3 L331.4 287.8 M306.1 306.1 L311.7 311.7 M283.3 324.7 L287.8 331.4 M257.4 338.6 L260.5 346.0 M229.3 347.1 L230.8 355.0 M200.0 350.0 L200.0 358.0 M170.7 347.1 L169.2 355.0 M142.6 338.6 L139.5 346.0 M116.7 324.7 L112.2 331.4 M93.9 306.1 L88.3 311.7 M75.3 283.3 L68.6 287.8 M61.4 257.4 L54.0 260.5 M52.9 229.3 L45.0 230.8 M50.0 200.0 L42.0 200.0 M52.9 170.7 L45.0 169.2 M61.4 142.6 L54.0 139.5 M75.3 116.7 L68.6 112.2 M93.9 93.9 L88.3 88.3 M116.7 75.3 L112.2 68.6 M142.6 61.4 L139.5 54.0 M170.7 52.9 L169.2 45.0 M200.0 50.0 L200.0 42.0 M229.3 52.9 L230.8 45.0 M257.4 61.4 L260.5 54.0 M283.3 75.3 L287.8 68.6 M306.1 93.9 L311.7 88.3 M324.7 116.7 L331.4 112.2 M338.6 142.6 L346.0 139.5 M347.1 170.7 L355.0 169.2 ' stroke-width='0.6'/%3E%3C/svg%3E"); }

/* Apas · Water tribe (water.xelementia.com) */
[data-style="water"] {
    --gw-bg1: #06305e; --gw-bg2: #010a1b; --gw-glow1: rgba(94,234,255,0.24); --gw-glow2: rgba(59,157,255,0.24);
    --gw-halo: conic-gradient(from 0deg, rgba(59,157,255,0.6), rgba(94,234,255,0.55), rgba(20,200,200,0.45), rgba(42,99,255,0.55), rgba(59,157,255,0.6));
    --gw-bulb: #effcff; --gw-bulb-glow: rgba(94,234,255,0.95);
    --gw-ptr1: #f0fbff; --gw-ptr2: #3b9dff; --gw-ptr3: #0a2a5c; --gw-ptr-glow: rgba(59,157,255,0.75);
    --gw-tick: linear-gradient(90deg, #9fe6ff, #ffffff, #4fb4ff);
    --gw-sw: conic-gradient(#2a63ff 0 60deg, #22b8ff 0 120deg, #5eeaff 0 180deg, #0a2a5c 0 240deg, #14c8c8 0 300deg, #cfefff 0);
    --gw-sw-rim: #9fe6ff; }
[data-tribe="water"], body:has(.gw-stage[data-tribe="water"]) {
    --xt-base: #010915;
    --xt-sky: radial-gradient(90% 45% at 50% -12%, rgba(120, 205, 255, 0.34) 0%, rgba(60, 140, 255, 0.1) 45%, transparent 70%), radial-gradient(50% 38% at 12% 40%, rgba(30, 110, 220, 0.18) 0%, transparent 70%), radial-gradient(50% 40% at 90% 70%, rgba(20, 200, 220, 0.12) 0%, transparent 70%), linear-gradient(180deg, #06305e 0%, #042247 26%, #021632 58%, #010a1b 100%);
    --xt-glow: #3b9dff; --xt-glow2: #5eeaff;
    --xt-card-a: rgba(4, 26, 56, 0.8); --xt-card-b: rgba(2, 12, 30, 0.88); --xt-line: rgba(110, 200, 255, 0.24);
    --xt-title: linear-gradient(92deg, #f0fbff 0%, #9fe6ff 40%, #4fb4ff 72%, #4a6dff 100%);
    --xt-btn: linear-gradient(135deg, #2a63ff 0%, #22b8ff 100%); --xt-ink: #ffffff; --xt-text: #e1eefc;
    --xt-chip: '💧 Apas · Water tribe';
    --xt-emblem: url('../img/tribes/water-emblem.webp'); --xt-banner: url('../img/tribes/water-banner.webp');
    --xt-surge: radial-gradient(100% 60% at 50% -10%, rgba(120,220,255,0.55), rgba(59,157,255,0.22) 45%, transparent 75%);
    --xt-sigil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%239fe6ff' stroke-linecap='round'%3E%3Cpath d='M388.0 200.0 L392.6 210.1 L392.6 220.2 L387.5 229.7 L380.4 238.4 L375.8 247.1 L375.4 257.0 L377.2 268.0 L377.0 278.8 L371.8 287.6 L362.8 294.0 L353.6 299.7 L347.5 307.1 L344.7 317.1 L342.3 328.2 L337.2 337.2 L328.2 342.3 L317.1 344.7 L307.1 347.5 L299.7 353.6 L294.0 362.8 L287.6 371.8 L278.8 377.0 L268.0 377.2 L257.0 375.4 L247.1 375.8 L238.4 380.4 L229.7 387.5 L220.2 392.6 L210.1 392.6 L200.0 388.0 L190.4 382.9 L180.9 381.3 L170.9 383.9 L160.2 387.3 L149.8 387.4 L140.8 382.2 L133.3 373.8 L125.9 366.5 L116.9 363.2 L106.0 362.8 L95.0 361.7 L86.1 356.7 L80.5 347.5 L76.6 337.1 L71.3 328.7 L62.9 323.4 L52.5 319.5 L43.3 313.9 L38.3 305.0 L37.2 294.0 L36.8 283.1 L33.5 274.1 L26.2 266.7 L17.8 259.2 L12.6 250.2 L12.7 239.8 L16.1 229.1 L18.7 219.1 L17.1 209.6 L12.0 200.0 L7.4 189.9 L7.4 179.8 L12.5 170.3 L19.6 161.6 L24.2 152.9 L24.6 143.0 L22.8 132.0 L23.0 121.2 L28.2 112.4 L37.2 106.0 L46.4 100.3 L52.5 92.9 L55.3 82.9 L57.7 71.8 L62.8 62.8 L71.8 57.7 L82.9 55.3 L92.9 52.5 L100.3 46.4 L106.0 37.2 L112.4 28.2 L121.2 23.0 L132.0 22.8 L143.0 24.6 L152.9 24.2 L161.6 19.6 L170.3 12.5 L179.8 7.4 L189.9 7.4 L200.0 12.0 L209.6 17.1 L219.1 18.7 L229.1 16.1 L239.8 12.7 L250.2 12.6 L259.2 17.8 L266.7 26.2 L274.1 33.5 L283.1 36.8 L294.0 37.2 L305.0 38.3 L313.9 43.3 L319.5 52.5 L323.4 62.9 L328.7 71.3 L337.1 76.6 L347.5 80.5 L356.7 86.1 L361.7 95.0 L362.8 106.0 L363.2 116.9 L366.5 125.9 L373.8 133.3 L382.2 140.8 L387.4 149.8 L387.3 160.2 L383.9 170.9 L381.3 180.9 L382.9 190.4 L388.0 200.0' stroke-width='0.9'/%3E%3Cpath d='M372.0 200.0 L375.6 209.2 L373.4 218.2 L367.6 226.5 L364.5 235.0 L366.1 244.5 L367.2 254.3 L362.8 262.5 L355.0 269.0 L349.9 276.4 L349.0 286.0 L347.4 295.7 L341.1 302.5 L331.8 306.8 L325.0 312.5 L321.6 321.6 L317.6 330.6 L309.7 335.5 L299.7 337.2 L291.6 341.1 L286.0 349.0 L279.8 356.6 L270.9 359.3 L260.8 358.4 L252.0 360.0 L244.5 366.1 L236.6 372.0 L227.3 372.2 L217.7 368.7 L208.8 368.0 L200.0 372.0 L190.8 375.6 L181.8 373.4 L173.5 367.6 L165.0 364.5 L155.5 366.1 L145.7 367.2 L137.5 362.8 L131.0 355.0 L123.6 349.9 L114.0 349.0 L104.3 347.4 L97.5 341.1 L93.2 331.8 L87.5 325.0 L78.4 321.6 L69.4 317.6 L64.5 309.7 L62.8 299.7 L58.9 291.6 L51.0 286.0 L43.4 279.8 L40.7 270.9 L41.6 260.8 L40.0 252.0 L33.9 244.5 L28.0 236.6 L27.8 227.3 L31.3 217.7 L32.0 208.8 L28.0 200.0 L24.4 190.8 L26.6 181.8 L32.4 173.5 L35.5 165.0 L33.9 155.5 L32.8 145.7 L37.2 137.5 L45.0 131.0 L50.1 123.6 L51.0 114.0 L52.6 104.3 L58.9 97.5 L68.2 93.2 L75.0 87.5 L78.4 78.4 L82.4 69.4 L90.3 64.5 L100.3 62.8 L108.4 58.9 L114.0 51.0 L120.2 43.4 L129.1 40.7 L139.2 41.6 L148.0 40.0 L155.5 33.9 L163.4 28.0 L172.7 27.8 L182.3 31.3 L191.2 32.0 L200.0 28.0 L209.2 24.4 L218.2 26.6 L226.5 32.4 L235.0 35.5 L244.5 33.9 L254.3 32.8 L262.5 37.2 L269.0 45.0 L276.4 50.1 L286.0 51.0 L295.7 52.6 L302.5 58.9 L306.8 68.2 L312.5 75.0 L321.6 78.4 L330.6 82.4 L335.5 90.3 L337.2 100.3 L341.1 108.4 L349.0 114.0 L356.6 120.2 L359.3 129.1 L358.4 139.2 L360.0 148.0 L366.1 155.5 L372.0 163.4 L372.2 172.7 L368.7 182.3 L368.0 191.2 L372.0 200.0' stroke-width='0.6'/%3E%3Ccircle cx='200' cy='200' r='156' stroke-width='0.8'/%3E%3Cpath d='M200.0 340.0 L78.8 130.0 L321.2 130.0Z' stroke-width='1'/%3E%3Ccircle cx='200' cy='200' r='68' stroke-width='0.7'/%3E%3Cpath d='M310.0 200.0 L312.8 205.9 L314.1 212.0 L313.3 218.0 L310.5 223.5 L306.3 228.5 L301.8 233.1 L298.3 237.7 L296.1 242.8 L295.4 248.6 L295.3 255.0 L294.7 261.5 L292.8 267.5 L289.2 272.2 L283.9 275.6 L277.8 277.8 L271.6 279.6 L266.2 281.8 L261.9 285.1 L258.3 289.8 L255.0 295.3 L251.3 300.6 L246.7 304.8 L241.1 307.1 L234.9 307.4 L228.5 306.3 L222.3 304.7 L216.5 303.9 L211.0 304.7 L205.6 306.9 L200.0 310.0 L194.1 312.8 L188.0 314.1 L182.0 313.3 L176.5 310.5 L171.5 306.3 L166.9 301.8 L162.3 298.3 L157.2 296.1 L151.4 295.4 L145.0 295.3 L138.5 294.7 L132.5 292.8 L127.8 289.2 L124.4 283.9 L122.2 277.8 L120.4 271.6 L118.2 266.2 L114.9 261.9 L110.2 258.3 L104.7 255.0 L99.4 251.3 L95.2 246.7 L92.9 241.1 L92.6 234.9 L93.7 228.5 L95.3 222.3 L96.1 216.5 L95.3 211.0 L93.1 205.6 L90.0 200.0 L87.2 194.1 L85.9 188.0 L86.7 182.0 L89.5 176.5 L93.7 171.5 L98.2 166.9 L101.7 162.3 L103.9 157.2 L104.6 151.4 L104.7 145.0 L105.3 138.5 L107.2 132.5 L110.8 127.8 L116.1 124.4 L122.2 122.2 L128.4 120.4 L133.8 118.2 L138.1 114.9 L141.7 110.2 L145.0 104.7 L148.7 99.4 L153.3 95.2 L158.9 92.9 L165.1 92.6 L171.5 93.7 L177.7 95.3 L183.5 96.1 L189.0 95.3 L194.4 93.1 L200.0 90.0 L205.9 87.2 L212.0 85.9 L218.0 86.7 L223.5 89.5 L228.5 93.7 L233.1 98.2 L237.7 101.7 L242.8 103.9 L248.6 104.6 L255.0 104.7 L261.5 105.3 L267.5 107.2 L272.2 110.8 L275.6 116.1 L277.8 122.2 L279.6 128.4 L281.8 133.8 L285.1 138.1 L289.8 141.7 L295.3 145.0 L300.6 148.7 L304.8 153.3 L307.1 158.9 L307.4 165.1 L306.3 171.5 L304.7 177.7 L303.9 183.5 L304.7 189.0 L306.9 194.4 L310.0 200.0' stroke-width='0.5'/%3E%3Cpath d='M356.0 200.0 L362.0 200.0 M335.1 278.0 L340.3 281.0 M278.0 335.1 L281.0 340.3 M200.0 356.0 L200.0 362.0 M122.0 335.1 L119.0 340.3 M64.9 278.0 L59.7 281.0 M44.0 200.0 L38.0 200.0 M64.9 122.0 L59.7 119.0 M122.0 64.9 L119.0 59.7 M200.0 44.0 L200.0 38.0 M278.0 64.9 L281.0 59.7 M335.1 122.0 L340.3 119.0 ' stroke-width='0.7'/%3E%3C/svg%3E"); }

/* ---------- the picker: a row of the five tribes (only for whoever has one; the others locked) ---------- */
.gw-tribe-pick { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 16px;
    background: linear-gradient(120deg, rgba(169,139,255,0.1), rgba(255,90,31,0.06) 35%, rgba(73,201,90,0.06) 60%, rgba(59,157,255,0.1));
    border: 1px solid rgba(190,160,255,0.22); }
.gw-tribe-pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin: 0; }
.gw-tribe-pick-head img { width: 22px; height: 22px; object-fit: contain; }
.gw-tribe-pick-head b { font-size: 0.86rem; font-weight: 900; letter-spacing: 0.04em; }
.gw-tribe-pick-head small { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.gw-tribe-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.gw-style--tribe { gap: 5px; padding: 12px 4px 10px; color: var(--xt-text);
    background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--xt-glow) 26%, transparent), transparent 68%), linear-gradient(180deg, var(--xt-card-a), var(--xt-card-b));
    border-color: var(--xt-line); }
.gw-style--tribe b { font-size: 0.82rem; letter-spacing: 0.02em; background: var(--xt-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gw-style--tribe small { display: inline-flex; align-items: center; gap: 3px; font-size: 0.75rem; font-weight: 700; color: color-mix(in srgb, var(--xt-text) 70%, transparent); white-space: nowrap; }
.gw-style--tribe small svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; flex: none; }
.gw-tribe-emb { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; isolation: isolate; }
.gw-tribe-emb::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--xt-glow) 45%, transparent), transparent 70%); opacity: 0.7; transition: opacity .25s, transform .25s; }
.gw-tribe-emb img { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--xt-glow) 70%, transparent)); transition: transform .3s; }
.gw-style--tribe:hover { border-color: color-mix(in srgb, var(--xt-glow) 60%, transparent); }
.gw-style--tribe:hover .gw-tribe-emb img { transform: scale(1.08); }
.gw-style--tribe:has(input:checked) { border-color: var(--xt-glow);
    background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--xt-glow) 42%, transparent), transparent 70%), linear-gradient(180deg, var(--xt-card-a), var(--xt-card-b));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--xt-glow) 60%, transparent), 0 8px 22px rgba(0,0,0,0.35), 0 0 26px color-mix(in srgb, var(--xt-glow) 35%, transparent); }
.gw-style--tribe:has(input:checked) .gw-tribe-emb::before { opacity: 1; transform: scale(1.25); }
.gw-style--tribe:has(input:checked) .gw-tribe-emb img { animation: gw-xt-float 3.2s ease-in-out infinite; }
.gw-style--tribe.is-locked { cursor: not-allowed; background: rgba(255,255,255,0.03); border-color: var(--line); }
.gw-style--tribe.is-locked:hover { transform: none; border-color: var(--line); }
.gw-style--tribe.is-locked .gw-tribe-emb img { filter: saturate(0.25) brightness(0.65); }
.gw-style--tribe.is-locked .gw-tribe-emb::before { opacity: 0.2; }
.gw-style--tribe.is-locked b { background: none; color: #94a3b8; }
@keyframes gw-xt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- the page becomes the tribe ---------- */
body:has(.gw-stage[data-tribe]) { background: var(--xt-base); background-color: var(--xt-base); }
.gw-xa { display: none; }
body:has(.gw-stage[data-tribe]) .gw-xa { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
.gw-xa > * { position: absolute; inset: 0; }
.gw-xa .xa-sky { background: var(--xt-sky); transition: background 0.6s; }
.gw-xa .xa-fx { width: 100%; height: 100%; }
.gw-xa .xa-vig { background: radial-gradient(130% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }
.gw-xa .xa-l1, .gw-xa .xa-l2 { will-change: transform, opacity; }
/* the slow layers of each tribe, as on its own page of xelementia.com (tribe-atmos.css) */
.gw-xa[data-element="fire"] .xa-l1 { inset: auto -10% -18% -10%; height: 60%;
    background: radial-gradient(50% 60% at 50% 100%, rgba(255, 110, 20, 0.55) 0%, rgba(255, 50, 0, 0.18) 50%, transparent 75%); animation: gw-xa-heat 5.5s ease-in-out infinite; }
.gw-xa[data-element="fire"] .xa-l2 { inset: -20%;
    background: radial-gradient(28% 22% at 20% 80%, rgba(255, 140, 40, 0.16) 0%, transparent 70%), radial-gradient(26% 20% at 80% 70%, rgba(255, 70, 20, 0.16) 0%, transparent 70%);
    animation: gw-xa-sway 14s ease-in-out infinite alternate; }
.gw-xa[data-element="water"] .xa-l1 { inset: -10% -20% 30% -20%;
    background: repeating-linear-gradient(100deg, transparent 0 7%, rgba(150, 220, 255, 0.07) 8% 10%, transparent 11% 17%, rgba(120, 200, 255, 0.05) 18% 19%, transparent 20% 26%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
    transform-origin: 50% 0; animation: gw-xa-rays 16s ease-in-out infinite alternate; }
.gw-xa[data-element="water"] .xa-l2 { inset: -10% -10% 50% -10%;
    background: radial-gradient(30% 26% at 30% 20%, rgba(120, 220, 255, 0.14) 0%, transparent 70%), radial-gradient(26% 22% at 72% 12%, rgba(90, 170, 255, 0.14) 0%, transparent 70%);
    animation: gw-xa-sway 11s ease-in-out infinite alternate; }
.gw-xa[data-element="air"] .xa-l1 { inset: 0 -60% 0 -60%;
    background: radial-gradient(14% 9% at 18% 22%, rgba(235, 248, 255, 0.13) 0%, transparent 70%), radial-gradient(18% 10% at 46% 58%, rgba(220, 242, 255, 0.1) 0%, transparent 70%),
                radial-gradient(12% 8% at 74% 34%, rgba(240, 250, 255, 0.12) 0%, transparent 70%), radial-gradient(16% 9% at 88% 80%, rgba(210, 238, 255, 0.09) 0%, transparent 70%);
    animation: gw-xa-drift 70s linear infinite; }
.gw-xa[data-element="air"] .xa-l2 { inset: 0 -60% 0 -60%;
    background: radial-gradient(20% 12% at 30% 78%, rgba(200, 236, 255, 0.08) 0%, transparent 70%), radial-gradient(14% 8% at 62% 16%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    animation: gw-xa-drift 110s linear infinite reverse; }
.gw-xa[data-element="earth"] .xa-l1 { inset: auto 0 0 0; height: 34vh; min-height: 200px; opacity: 0.85;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 210 L120 150 L210 190 L330 96 L450 176 L560 120 L700 200 L820 110 L930 168 L1060 84 L1180 170 L1300 126 L1440 180 L1440 320 L0 320Z' fill='%2312240f' fill-opacity='.75'/%3E%3Cpath d='M0 250 L140 200 L260 236 L380 170 L520 240 L660 186 L780 246 L900 196 L1040 252 L1160 198 L1300 244 L1440 210 L1440 320 L0 320Z' fill='%230b1709' fill-opacity='.9'/%3E%3Cpath d='M0 290 L180 262 L360 286 L540 258 L720 292 L900 262 L1080 290 L1260 266 L1440 286 L1440 320 L0 320Z' fill='%23060d05'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
.gw-xa[data-element="earth"] .xa-l2 { inset: -20% -10% 20% -30%;
    background: repeating-linear-gradient(118deg, transparent 0 9%, rgba(230, 220, 140, 0.06) 10% 12%, transparent 13% 21%, rgba(200, 230, 140, 0.045) 22% 23%, transparent 24% 32%);
    -webkit-mask-image: radial-gradient(70% 70% at 15% 0%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 70% at 15% 0%, #000 0%, transparent 75%);
    transform-origin: 0 0; animation: gw-xa-rays 18s ease-in-out infinite alternate; }
.gw-xa[data-element="aether"] .xa-l1 { inset: auto; left: 50%; top: 50%; width: min(120vmin, 1100px); height: min(120vmin, 1100px);
    margin: calc(min(120vmin, 1100px) / -2) 0 0 calc(min(120vmin, 1100px) / -2); opacity: 0.1;
    background: var(--xt-sigil) center / contain no-repeat; animation: gw-xa-spin 160s linear infinite; }
.gw-xa[data-element="aether"] .xa-l2 { inset: -15%;
    background: radial-gradient(30% 24% at 30% 30%, rgba(160, 110, 255, 0.16) 0%, transparent 70%), radial-gradient(26% 20% at 74% 66%, rgba(255, 110, 210, 0.12) 0%, transparent 70%);
    animation: gw-xa-sway 20s ease-in-out infinite alternate; }
@keyframes gw-xa-heat { 0%, 100% { opacity: 0.75; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.08); } }
@keyframes gw-xa-sway { from { transform: translate3d(-2%, 1%, 0) scale(1); } to { transform: translate3d(2%, -1.5%, 0) scale(1.06); } }
@keyframes gw-xa-rays { from { transform: rotate(-3deg) translateX(-2%); opacity: 0.75; } to { transform: rotate(3deg) translateX(2%); opacity: 1; } }
@keyframes gw-xa-drift { from { transform: translate3d(-18%, 0, 0); } to { transform: translate3d(18%, 0, 0); } }
@keyframes gw-xa-spin { to { transform: rotate(360deg); } }

/* the head: the tribe's banner behind, its emblem floating in a ring of light, its name in a chip, the title in its light */
.gw-tribe-mark, .gw-tag--tribe { display: none; }
body:has(.gw-stage[data-tribe]) .gw-head { position: relative; overflow: hidden; isolation: isolate; color: var(--xt-text);
    border-color: color-mix(in srgb, var(--xt-glow) 50%, transparent);
    background: linear-gradient(90deg, var(--xt-card-b) 0%, color-mix(in srgb, var(--xt-card-b) 88%, transparent) 42%, color-mix(in srgb, var(--xt-card-b) 35%, transparent) 100%),
                var(--xt-banner) right center / cover no-repeat, var(--xt-card-b);
    box-shadow: 0 0 46px color-mix(in srgb, var(--xt-glow) 26%, transparent), inset 0 1px 0 rgba(255,255,255,0.06);
    animation: gw-xt-headglow 5s ease-in-out infinite; }
@keyframes gw-xt-headglow { 0%, 100% { box-shadow: 0 0 34px color-mix(in srgb, var(--xt-glow) 20%, transparent), inset 0 1px 0 rgba(255,255,255,0.06); }
                            50% { box-shadow: 0 0 60px color-mix(in srgb, var(--xt-glow) 36%, transparent), inset 0 1px 0 rgba(255,255,255,0.06); } }
body:has(.gw-stage[data-tribe]) .gw-head h1 { background: var(--xt-title); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--xt-glow) 40%, transparent)); }
body:has(.gw-stage[data-tribe]) .gw-head .gw-prize { color: color-mix(in srgb, var(--xt-glow2) 35%, #ffffff) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--xt-glow) 24%, rgba(0,0,0,0.3)), color-mix(in srgb, var(--xt-glow2) 10%, rgba(0,0,0,0.3)));
    border-color: color-mix(in srgb, var(--xt-glow) 55%, transparent); }
body:has(.gw-stage[data-tribe]) .gw-head .gw-prize .gw-i { color: var(--xt-glow2); }
body:has(.gw-stage[data-tribe]) .gw-head .crumbs a { color: var(--xt-glow2); }
body:has(.gw-stage[data-tribe]) .gw-tag--tribe { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 0.8rem; font-weight: 900;
    letter-spacing: 0.02em; color: var(--xt-text); background: color-mix(in srgb, var(--xt-glow) 20%, rgba(0,0,0,0.35));
    border: 1px solid color-mix(in srgb, var(--xt-glow) 65%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--xt-glow) 30%, transparent); }
body:has(.gw-stage[data-tribe]) .gw-tag--tribe::before { content: var(--xt-chip); }
body:has(.gw-stage[data-tribe]) .gw-tribe-mark { display: block; position: absolute; top: 50%; right: 4%; z-index: -1; width: 170px; height: 170px; margin-top: -85px; pointer-events: none;
    background: var(--xt-emblem) center / 74% no-repeat; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--xt-glow) 70%, transparent));
    animation: gw-xt-float-big 6s ease-in-out infinite; }
body:has(.gw-stage[data-tribe]) .gw-tribe-mark > i { position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 20%, var(--xt-glow2) 32%, transparent 44% 70%, var(--xt-glow) 82%, transparent 94%);
    -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 90%, #000 97%, transparent 99%); mask: radial-gradient(closest-side, transparent 88%, #000 90%, #000 97%, transparent 99%);
    opacity: 0.8; animation: gw-xa-spin 9s linear infinite; }
@keyframes gw-xt-float-big { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
body:has(.gw-stage[data-tribe]) .gw-head.has-img .gw-tribe-mark { right: auto; left: 54%; width: 120px; height: 120px; margin-top: -60px; }

/* the panels: tinted glass in the tribe's colours (no backdrop-filter: the sky moves behind them) */
body:has(.gw-stage[data-tribe]) .gw-panel { color: var(--xt-text); border-color: var(--xt-line);
    background: linear-gradient(160deg, var(--xt-card-a), var(--xt-card-b)); box-shadow: 0 14px 34px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05); }
body:has(.gw-stage[data-tribe]) .gw-panel-head h2 .gw-i { color: var(--xt-glow2); }
body:has(.gw-stage[data-tribe]) .gw-count { color: var(--xt-glow2); background: color-mix(in srgb, var(--xt-glow) 14%, transparent); border-color: color-mix(in srgb, var(--xt-glow) 45%, transparent); }
body:has(.gw-stage[data-tribe]) .gw-lobby { background: radial-gradient(420px 200px at 100% 0%, color-mix(in srgb, var(--xt-glow) 22%, transparent), transparent 70%),
    radial-gradient(420px 220px at 0% 100%, color-mix(in srgb, var(--xt-glow2) 14%, transparent), transparent 70%), linear-gradient(160deg, var(--xt-card-a), var(--xt-card-b)); }
body:has(.gw-stage[data-tribe]) :is(.gw-join.gw-solana, .gw-spin.btn-primary) { background: var(--xt-btn); color: var(--xt-ink); border-color: color-mix(in srgb, var(--xt-glow2) 70%, transparent);
    box-shadow: 0 0 26px color-mix(in srgb, var(--xt-glow) 45%, transparent), inset 0 1px 0 rgba(255,255,255,0.3); }
body:has(.gw-stage[data-tribe]) :is(.gw-join.gw-solana, .gw-spin.btn-primary):hover { filter: brightness(1.08); }

/* the stage: the tribe's sign turns behind the wheel; the element round it */
.gw-sigil { display: none; }
.gw-stage[data-tribe] { border-color: color-mix(in srgb, var(--xt-glow) 45%, transparent);
    box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 50px color-mix(in srgb, var(--xt-glow) 18%, transparent), inset 0 1px 0 rgba(255,255,255,0.06); }
.gw-stage[data-tribe] .gw-sigil { display: block; position: absolute; inset: -9%; z-index: -1; pointer-events: none; border-radius: 50%;
    background: var(--xt-sigil) center / contain no-repeat; opacity: 0.42; filter: drop-shadow(0 0 6px var(--xt-glow));
    animation: gw-xa-spin 90s linear infinite; transition: opacity 0.6s; }
.gw-stage[data-tribe].is-spinning .gw-sigil { animation-duration: 14s; opacity: 0.6; }
.gw-stage[data-tribe].is-dark .gw-sigil { opacity: 0.22; }
.gw-stage[data-tribe].is-hit .gw-sigil { animation: gw-xa-spin 90s linear infinite, gw-xt-sigil-hit 1.6s ease-out; }
@keyframes gw-xt-sigil-hit { 0% { opacity: 0.25; filter: drop-shadow(0 0 6px var(--xt-glow)); } 18% { opacity: 1; filter: drop-shadow(0 0 22px var(--xt-glow2)) brightness(1.6); } 100% { opacity: 0.42; } }
.gw-stage[data-tribe]::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.gw-stage[data-tribe="fire"]::after { left: -10%; right: -10%; bottom: -10%; height: 46%;
    background: radial-gradient(50% 70% at 50% 100%, rgba(255,110,20,0.42), rgba(255,50,0,0.12) 55%, transparent 78%); animation: gw-xa-heat 4.5s ease-in-out infinite; }
.gw-stage[data-tribe="water"]::after { inset: -10% -20% 40% -20%;
    background: repeating-linear-gradient(100deg, transparent 0 7%, rgba(150,220,255,0.08) 8% 10%, transparent 11% 17%, rgba(120,200,255,0.06) 18% 19%, transparent 20% 26%);
    -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
    transform-origin: 50% 0; animation: gw-xa-rays 12s ease-in-out infinite alternate; }
.gw-stage[data-tribe="air"]::after { inset: 0 -60%;
    background: radial-gradient(14% 10% at 20% 18%, rgba(235,248,255,0.14), transparent 70%), radial-gradient(16% 10% at 70% 82%, rgba(220,242,255,0.1), transparent 70%),
                radial-gradient(12% 8% at 45% 60%, rgba(240,250,255,0.08), transparent 70%);
    animation: gw-xa-drift 40s linear infinite; }
.gw-stage[data-tribe="earth"]::after { left: 0; right: 0; bottom: 0; height: 22%; opacity: 0.9;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 210 L120 150 L210 190 L330 96 L450 176 L560 120 L700 200 L820 110 L930 168 L1060 84 L1180 170 L1300 126 L1440 180 L1440 320 L0 320Z' fill='%2312240f' fill-opacity='.8'/%3E%3Cpath d='M0 290 L180 262 L360 286 L540 258 L720 292 L900 262 L1080 290 L1260 266 L1440 286 L1440 320 L0 320Z' fill='%23060d05'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat; }
.gw-stage[data-tribe="aether"]::after { inset: -20%;
    background: radial-gradient(26% 22% at 22% 26%, rgba(160,110,255,0.2), transparent 70%), radial-gradient(24% 20% at 78% 70%, rgba(255,110,210,0.16), transparent 70%),
                radial-gradient(1.4px 1.4px at 12% 30%, #fff, transparent), radial-gradient(1.2px 1.2px at 82% 18%, #fff, transparent), radial-gradient(1.6px 1.6px at 64% 86%, #fff, transparent),
                radial-gradient(1.2px 1.2px at 30% 78%, #e2d6ff, transparent), radial-gradient(1.4px 1.4px at 90% 52%, #ffd6f5, transparent);
    animation: gw-xa-sway 16s ease-in-out infinite alternate; }

/* the winner: the tribe's window, its emblem behind the name */
.gw-win.is-tribe .gw-win-box { color: var(--xt-text); border-color: color-mix(in srgb, var(--xt-glow) 65%, transparent);
    background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--xt-glow) 34%, #05030c), var(--xt-card-b) 66%), var(--xt-base);
    box-shadow: 0 30px 90px rgba(0,0,0,0.65), 0 0 90px color-mix(in srgb, var(--xt-glow) 34%, transparent); }
.gw-win.is-tribe .gw-win-box::before { content: ''; position: absolute; top: 50%; left: 50%; z-index: -1; width: 112%; aspect-ratio: 1; transform: translate(-50%, -50%);
    background: var(--xt-emblem) center / contain no-repeat; opacity: 0.09; pointer-events: none; }
.gw-win.is-tribe .gw-win-label { color: var(--xt-glow2); letter-spacing: 0.12em; text-shadow: 0 0 14px color-mix(in srgb, var(--xt-glow) 70%, transparent); }
.gw-win.is-tribe .gw-win-rays { background: repeating-conic-gradient(from 0deg, var(--xt-glow) 0 8deg, transparent 8deg 20deg); opacity: 0.26; }
.gw-win.is-tribe .gw-win-img { border-color: var(--xt-glow2); box-shadow: 0 0 0 6px color-mix(in srgb, var(--xt-glow) 25%, transparent), 0 12px 30px rgba(0,0,0,0.5); }

/* when the wheel stops: the element's light over the whole page */
.gw-surge { position: fixed; inset: 0; z-index: 240; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: var(--xt-surge); }

/* /giveaways: a card with a tribe's wheel wears the tribe */
.gw-card[data-tribe] { border-color: color-mix(in srgb, var(--xt-glow) 42%, transparent);
    background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--xt-glow) 18%, transparent), transparent 60%), linear-gradient(160deg, var(--xt-card-a), var(--xt-card-b)); }
.gw-card[data-tribe]:hover { border-color: var(--xt-glow); box-shadow: 0 20px 44px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--xt-glow) 35%, transparent), 0 0 30px color-mix(in srgb, var(--xt-glow) 25%, transparent); }
.gw-card[data-tribe] .gw-card-title { background: var(--xt-title); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gw-card-tribe { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px 3px 4px; border-radius: 999px; font-size: 0.78rem; font-weight: 900;
    color: var(--xt-text); background: color-mix(in srgb, var(--xt-glow) 18%, rgba(0,0,0,0.3)); border: 1px solid color-mix(in srgb, var(--xt-glow) 55%, transparent); }
.gw-card-tribe img { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 0 4px var(--xt-glow)); }

@media (max-width: 700px) {
    .gw-tribe-pick { padding: 10px; }
    .gw-tribe-list { gap: 6px; }
    .gw-style--tribe { padding: 10px 2px 8px; }
    .gw-style--tribe small { display: none; }
    .gw-tribe-emb { width: 40px; height: 40px; }
    .gw-tribe-emb img { width: 36px; height: 36px; }
    body:has(.gw-stage[data-tribe]) .gw-tribe-mark, body:has(.gw-stage[data-tribe]) .gw-head.has-img .gw-tribe-mark { top: 16px; right: 12px; left: auto; width: 84px; height: 84px; margin-top: 0; opacity: 0.85; }
    body:has(.gw-stage[data-tribe]) .gw-head .crumbs { padding-right: 92px; }
    body:has(.gw-stage[data-tribe]) .gw-head { background: linear-gradient(180deg, color-mix(in srgb, var(--xt-card-b) 55%, transparent) 0%, var(--xt-card-b) 70%), var(--xt-banner) center top / cover no-repeat, var(--xt-card-b); }
}
/* xetribes2 (31-10-2026): with a tribe's wheel the «Ape XP season top 25» source becomes that tribe's top 25 of La Jungla */
.gw-source .gw-jt[hidden], .gw-hint.gw-jt[hidden] { display: none; }
body:has(.gw-stage[data-tribe]) .gw-jt-off { display: none; }
body:has(.gw-stage[data-tribe="aether"]) .gw-jt[data-jt="aether"], body:has(.gw-stage[data-tribe="air"]) .gw-jt[data-jt="air"],
body:has(.gw-stage[data-tribe="earth"]) .gw-jt[data-jt="earth"], body:has(.gw-stage[data-tribe="fire"]) .gw-jt[data-jt="fire"],
body:has(.gw-stage[data-tribe="water"]) .gw-jt[data-jt="water"] { display: grid; }
body:has(.gw-stage[data-tribe="aether"]) p.gw-jt[data-jt="aether"], body:has(.gw-stage[data-tribe="air"]) p.gw-jt[data-jt="air"],
body:has(.gw-stage[data-tribe="earth"]) p.gw-jt[data-jt="earth"], body:has(.gw-stage[data-tribe="fire"]) p.gw-jt[data-jt="fire"],
body:has(.gw-stage[data-tribe="water"]) p.gw-jt[data-jt="water"] { display: block; }
.gw-source .gw-jt b { display: flex; align-items: center; gap: 7px; }
.gw-source .gw-jt b img { width: 18px; height: 18px; flex: none; object-fit: contain; filter: drop-shadow(0 0 6px var(--xt-glow)); }
body:has(.gw-stage[data-tribe]) .gw-source:has(input[value="xp_season"]) { border-color: color-mix(in srgb, var(--xt-glow) 38%, transparent); }
body:has(.gw-stage[data-tribe]) .gw-source:has(input[value="xp_season"]:checked) { border-color: var(--xt-glow); background: color-mix(in srgb, var(--xt-glow) 14%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--xt-glow) 30%, transparent), 0 0 22px -6px var(--xt-glow); }
body:has(.gw-stage[data-tribe]) .gw-source input[value="xp_season"] { accent-color: var(--xt-glow); }
/* topn1: the Top 10/25/50/90 switch wears the tribe too */
body:has(.gw-stage[data-tribe]) .gw-topns { background: color-mix(in srgb, var(--xt-glow) 14%, transparent); border-color: var(--xt-glow);
    border-top-color: color-mix(in srgb, var(--xt-glow) 35%, transparent); box-shadow: 0 14px 22px -14px var(--xt-glow); }
body:has(.gw-stage[data-tribe]) .gw-topns-set { border-color: color-mix(in srgb, var(--xt-glow) 30%, transparent); }
body:has(.gw-stage[data-tribe]) .gw-topn-opt input:checked + span { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--xt-glow) 80%, #000), var(--xt-glow));
    box-shadow: 0 6px 18px -8px var(--xt-glow), inset 0 1px 0 rgba(255,255,255,0.25); }

/* xetribes2: a tribe's giveaway without its own picture wears the tribe on /giveaways (banner, sign, emblem, La Jungla) */
.gw-ctm { display: block; background: var(--xt-base); isolation: isolate; }
.gw-ctm .gw-ctm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.62) saturate(1.15); transform: scale(1.02);
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.6s; }
.gw-ctm::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(60% 75% at 50% 48%, transparent 0 30%, color-mix(in srgb, var(--xt-base) 55%, transparent) 75%),
                linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--xt-base) 92%, transparent) 100%); }
.gw-ctm-glow { position: absolute; left: 50%; top: 46%; z-index: 1; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--xt-glow) 55%, transparent) 0, transparent 66%); mix-blend-mode: screen; animation: gw-ctm-breathe 5s ease-in-out infinite; }
.gw-ctm-sigil { position: absolute; left: 50%; top: 46%; z-index: 1; width: 62%; aspect-ratio: 1; margin: -31% 0 0 -31%; pointer-events: none;
    background: var(--xt-sigil) center / contain no-repeat; opacity: 0.5; filter: drop-shadow(0 0 6px var(--xt-glow)); animation: gw-xa-spin 80s linear infinite; }
.gw-ctm-emb { position: absolute; left: 50%; top: 46%; z-index: 2; width: 27%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
    display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--xt-base) 30%, transparent) 0 55%, transparent 72%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--xt-glow) 70%, transparent), 0 0 26px -2px var(--xt-glow), inset 0 0 18px color-mix(in srgb, var(--xt-glow) 40%, transparent); }
.gw-ctm-emb img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 0 10px var(--xt-glow)); transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
.gw-ctm-name { position: absolute; left: 16px; bottom: 12px; z-index: 2; display: grid; gap: 1px; text-align: left; }
.gw-ctm-name b { font-size: 1.12rem; font-weight: 900; letter-spacing: 0.02em; background: var(--xt-title); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
.gw-ctm-name small { font-size: 0.75rem; font-weight: 800; color: var(--xt-text); opacity: 0.85; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.gw-ctm-jungle { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; border-radius: 12px;
    background: color-mix(in srgb, var(--xt-base) 70%, rgba(0,0,0,0.4)); border: 1px solid color-mix(in srgb, var(--xt-glow) 50%, transparent);
    box-shadow: 0 0 16px -6px var(--xt-glow); backdrop-filter: blur(4px); }
.gw-ctm-jungle b { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 0.95rem; font-weight: 900; color: #0b0418;
    background: var(--xt-title); }
.gw-ctm-jungle small { font-size: 0.75rem; line-height: 1.25; font-weight: 800; color: var(--xt-text); text-align: left; }
.gw-card:hover .gw-ctm .gw-ctm-bg { transform: scale(1.07); filter: brightness(0.72) saturate(1.25); }
.gw-card:hover .gw-ctm-emb img { transform: scale(1.08) rotate(-4deg); }
@keyframes gw-ctm-breathe { 50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.12); } }
@media (max-width: 520px) { .gw-ctm-name b { font-size: 1rem; } }

/* xetribes2: the review windows say it in red when the prize is missing (Approve is locked until it is written) */
[data-gw-rv-prize].is-missing, [data-gw-lrv-prize].is-missing { color: #ff6b81; }

@media (prefers-reduced-motion: reduce) {
    .gw-xa .xa-l1, .gw-xa .xa-l2, .gw-stage[data-tribe]::after, .gw-stage[data-tribe] .gw-sigil, .gw-tribe-mark, .gw-tribe-mark > i,
    body:has(.gw-stage[data-tribe]) .gw-head, .gw-style--tribe:has(input:checked) .gw-tribe-emb img { animation: none !important; }
    .gw-surge { display: none; }
    .gw-ctm-sigil, .gw-ctm-glow { animation: none !important; }
    .gw-ctm .gw-ctm-bg, .gw-ctm-emb img { transition: none; }
}