/* Champions of the Circle — six visual styles.
   Chosen from the Theme button (bottom-right). They change fonts, shapes, borders,
   shadows and effects; the colour theme still decides the colours. Same content and
   features in every style. Loaded after the page's own styles. */

#bgfx{ opacity:var(--fx,1); transition:opacity .4s; }
.theme-panel{ max-height:min(78vh,620px); overflow:auto; }
.theme-panel h5.style-h{ margin-top:16px; }
.style-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.style-opt{ display:flex; flex-direction:column; gap:3px; align-items:flex-start; padding:9px 11px; border-radius:12px; border:1.5px solid var(--line); background:transparent; color:var(--text); font:500 12.5px 'Inter',sans-serif; cursor:pointer; text-align:left; }
.style-opt:hover{ border-color:var(--line-2); }
.style-opt[aria-pressed="true"]{ border-color:var(--a-br); background:rgba(var(--a-rgb),.14); color:var(--head); }
.style-opt .aa{ font-size:20px; line-height:1.1; color:var(--head); }

/* shared selector groups ------------------------------------------------- */
html[data-style]{ --cards-sel:x; }

/* ===================== 1. EDITORIAL — magazine serif, hairlines ===================== */
html[data-style="editorial"]{ --fx:.38; }
html[data-style="editorial"] body{ font-family:'Lora',Georgia,'Times New Roman',serif; }
html[data-style="editorial"] :is(h1,h2,h3,.wordmark,.stat-num,.tag,.event-tag,.hero-meta strong,.gx-title){ font-family:'Playfair Display',Georgia,'Times New Roman',serif; text-transform:none; letter-spacing:-.005em; font-weight:700; }
html[data-style="editorial"] :is(.btn,.eyebrow,.navlinks a,.stat-label,.pill,.nav-mobile a,.field label,.gx-meta){ font-family:'Inter',system-ui,sans-serif; }
html[data-style="editorial"] :is(.btn,.eyebrow){ text-transform:uppercase; letter-spacing:.16em; font-size:11.5px; }
html[data-style="editorial"] .hero h1 em{ font-style:italic; }
html[data-style="editorial"] .hero h1{ line-height:1.08; font-weight:700; }
html[data-style="editorial"] :is(.event-card,.div-card,.value,.coach-card,.join,.form-card,.gx-card,.photo-grid .ph,.reg-form-note,.consent-note,.theme-panel){ border-radius:3px; box-shadow:none; border-color:var(--line-2); }
html[data-style="editorial"] .btn{ border-radius:2px; }
html[data-style="editorial"] .pill, html[data-style="editorial"] .tag{ border-radius:2px; }
html[data-style="editorial"] .div-card::before, html[data-style="editorial"] .form-card::before{ height:2px; }
html[data-style="editorial"] .eyebrow::before{ width:34px; height:1px; }
html[data-style="editorial"] .field input, html[data-style="editorial"] .field textarea, html[data-style="editorial"] .field select{ border-radius:2px; }
html[data-style="editorial"] .stat-num{ font-weight:600; }

/* ===================== 2. POSTER — chunky, offset shadows ===================== */
html[data-style="poster"]{ --fx:.55; }
html[data-style="poster"] body{ font-family:'Archivo','Inter',system-ui,sans-serif; }
html[data-style="poster"] :is(h1,h2,h3,.wordmark,.stat-num,.tag,.event-tag,.hero-meta strong,.gx-title,.btn,.eyebrow){ font-family:'Anton','Oswald',Impact,'Arial Narrow',sans-serif; text-transform:uppercase; letter-spacing:.03em; font-weight:400; }
html[data-style="poster"] .hero h1{ font-size:clamp(40px,7vw,78px); line-height:.98; text-shadow:4px 4px 0 rgba(var(--a-rgb),.85); }
html[data-style="poster"] :is(h2,.gx-title){ text-shadow:3px 3px 0 rgba(var(--a-rgb),.55); }
html[data-style="poster"] :is(.event-card,.div-card,.value,.coach-card,.join,.form-card,.gx-card,.photo-grid .ph,.reg-form-note,.consent-note){ border:3px solid var(--head); border-radius:8px; box-shadow:8px 8px 0 rgba(var(--a-rgb),1); }
html[data-style="poster"] .div-card.junior{ box-shadow:8px 8px 0 var(--b); }
html[data-style="poster"] :is(.value,.reg-form-note,.consent-note){ box-shadow:5px 5px 0 rgba(var(--a-rgb),1); }
html[data-style="poster"] .btn{ border:3px solid var(--head); border-radius:8px; box-shadow:4px 4px 0 var(--head); font-size:15px; letter-spacing:.06em; padding:12px 22px; }
html[data-style="poster"] .btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--head); }
html[data-style="poster"] .btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--head); }
html[data-style="poster"] .btn-outline-teal{ background:rgba(var(--ink-rgb),.8); color:var(--head); }
html[data-style="poster"] :is(.pill,.tag){ border:2px solid var(--head); border-radius:6px; color:var(--head); }
html[data-style="poster"] .field :is(input,textarea,select){ border:2.5px solid var(--head); border-radius:6px; }
html[data-style="poster"] header.site, html[data-style="poster"] footer{ border-color:var(--head); }
html[data-style="poster"] body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(rgba(var(--a-rgb),.22) 1.2px,transparent 1.6px) 0 0/18px 18px; opacity:.55; }

/* ===================== 3. NEON — glowing arcade ===================== */
html[data-style="neon"]{ --fx:1; }
html[data-style="neon"] body{ font-family:'Rajdhani','Inter',system-ui,sans-serif; font-weight:500; font-size:1.04em; }
html[data-style="neon"] :is(h1,h2,h3,.wordmark,.stat-num,.tag,.event-tag,.hero-meta strong,.gx-title,.btn,.eyebrow){ font-family:'Orbitron','Oswald',Impact,sans-serif; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
html[data-style="neon"] .hero h1{ font-size:clamp(28px,4.6vw,50px); line-height:1.12; }
html[data-style="neon"] :is(h1,h2,.stat-num){ text-shadow:0 0 16px rgba(var(--a-rgb),.75), 0 0 2px rgba(var(--a-rgb),.9); }
html[data-style="neon"] :is(h3,.gx-title){ font-size:.92em; }
html[data-style="neon"] :is(.event-card,.div-card,.value,.coach-card,.join,.form-card,.gx-card,.photo-grid .ph,.reg-form-note,.consent-note){ border:1px solid rgba(var(--a-rgb),.7); border-radius:4px; box-shadow:0 0 0 1px rgba(var(--a-rgb),.12), 0 0 26px rgba(var(--a-rgb),.3), inset 0 0 28px rgba(var(--a-rgb),.08); }
html[data-style="neon"] .div-card.junior{ border-color:rgba(var(--b-rgb),.75); box-shadow:0 0 0 1px rgba(var(--b-rgb),.12), 0 0 26px rgba(var(--b-rgb),.3), inset 0 0 28px rgba(var(--b-rgb),.08); }
html[data-style="neon"] .btn{ border-radius:4px; font-size:12px; letter-spacing:.12em; box-shadow:0 0 18px -2px rgba(var(--a-rgb),.7); }
html[data-style="neon"] .btn-gold{ box-shadow:0 0 18px -2px rgba(var(--b-rgb),.8); }
html[data-style="neon"] .btn-outline-teal{ box-shadow:0 0 14px -4px rgba(var(--a-rgb),.9), inset 0 0 14px -6px rgba(var(--a-rgb),.9); }
html[data-style="neon"] :is(.pill,.tag){ border-radius:3px; border-color:rgba(var(--a-rgb),.6); }
html[data-style="neon"] .field :is(input,textarea,select){ border-radius:4px; border-color:rgba(var(--a-rgb),.5); }
html[data-style="neon"] .field :is(input,textarea,select):focus-visible{ box-shadow:0 0 14px rgba(var(--a-rgb),.6); }
html[data-style="neon"] header.site{ border-bottom-color:rgba(var(--a-rgb),.55); box-shadow:0 1px 22px -6px rgba(var(--a-rgb),.6); }
html[data-style="neon"] body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px); opacity:.5; }
html[data-theme="daylight"][data-style="neon"] body::after{ opacity:.12; }

/* ===================== 4. GLASS — frosted panels ===================== */
html[data-style="glass"]{ --fx:1; }
html[data-style="glass"] body{ font-family:'Inter',system-ui,sans-serif; }
html[data-style="glass"] :is(h1,h2,h3,.wordmark,.stat-num,.tag,.event-tag,.hero-meta strong,.gx-title){ font-family:'Outfit','Inter',system-ui,sans-serif; text-transform:none; letter-spacing:-.01em; font-weight:600; }
html[data-style="glass"] :is(.btn,.eyebrow){ font-family:'Outfit','Inter',sans-serif; letter-spacing:.06em; font-weight:500; }
html[data-style="glass"] :is(.event-card,.div-card,.value,.coach-card,.join,.form-card,.gx-card,.photo-grid .ph,.reg-form-note,.consent-note,.stats){ background:rgba(255,255,255,.07); -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5); border:1px solid rgba(255,255,255,.2); border-radius:26px; box-shadow:0 24px 60px -18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.28); }
html[data-style="glass"] .stats{ border-radius:0; border-inline:0; }
html[data-theme="daylight"][data-style="glass"] :is(.event-card,.div-card,.value,.coach-card,.join,.form-card,.gx-card,.photo-grid .ph,.reg-form-note,.consent-note,.stats){ background:rgba(255,255,255,.55); border-color:rgba(255,255,255,.9); box-shadow:0 24px 60px -22px rgba(20,60,80,.35), inset 0 1px 0 #fff; }
html[data-style="glass"] .btn{ border-radius:999px; box-shadow:0 8px 24px -10px rgba(var(--a-rgb),.8), inset 0 1px 0 rgba(255,255,255,.35); }
html[data-style="glass"] .div-card::before, html[data-style="glass"] .form-card::before{ height:3px; opacity:.9; }
html[data-style="glass"] :is(.pill,.tag){ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.22); }
html[data-style="glass"] .field :is(input,textarea,select){ background:rgba(0,0,0,.18); border-radius:14px; border-color:rgba(255,255,255,.2); }
html[data-theme="daylight"][data-style="glass"] .field :is(input,textarea,select){ background:rgba(255,255,255,.7); }
html[data-style="glass"] header.site{ background:rgba(var(--ink-rgb),.35); -webkit-backdrop-filter:blur(22px) saturate(1.5); backdrop-filter:blur(22px) saturate(1.5); }

/* ===================== 5. BLUEPRINT — technical drawing ===================== */
html[data-style="blueprint"]{ --fx:.45; }
html[data-style="blueprint"] body{ font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-size:.96em; }
html[data-style="blueprint"] :is(h1,h2,h3,.wordmark,.stat-num,.tag,.event-tag,.hero-meta strong,.gx-title,.btn,.eyebrow){ font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
html[data-style="blueprint"] .hero h1{ font-size:clamp(28px,4.6vw,48px); line-height:1.12; }
html[data-style="blueprint"] :is(.event-card,.div-card,.value,.coach-card,.join,.form-card,.gx-card,.photo-grid .ph,.reg-form-note,.consent-note){ border:1px dashed rgba(var(--a-rgb),.8); border-radius:0; box-shadow:none; background:rgba(var(--a-rgb),.07); }
html[data-style="blueprint"] .div-card::before, html[data-style="blueprint"] .form-card::before{ height:2px; }
html[data-style="blueprint"] :is(.btn,.pill,.tag){ border-radius:0; }
html[data-style="blueprint"] .btn{ border-style:solid; font-size:12px; letter-spacing:.1em; }
html[data-style="blueprint"] .eyebrow::before{ content:"//"; width:auto; height:auto; background:none; font-weight:700; }
html[data-style="blueprint"] .field :is(input,textarea,select){ border-radius:0; border-style:dashed; }
html[data-style="blueprint"] header.site{ border-bottom-style:dashed; }
html[data-style="blueprint"] body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background:linear-gradient(rgba(var(--a-rgb),.09) 1px,transparent 1px) 0 0/40px 40px, linear-gradient(90deg,rgba(var(--a-rgb),.09) 1px,transparent 1px) 0 0/40px 40px; }

/* ===================== 6. PEBBLE — soft, rounded, bouncy ===================== */
html[data-style="pebble"]{ --fx:.8; }
html[data-style="pebble"] body{ font-family:'Nunito','Inter',system-ui,sans-serif; font-weight:500; }
html[data-style="pebble"] :is(h1,h2,h3,.wordmark,.stat-num,.tag,.event-tag,.hero-meta strong,.gx-title,.btn,.eyebrow){ font-family:'Fredoka','Nunito',system-ui,sans-serif; text-transform:none; letter-spacing:0; font-weight:600; }
html[data-style="pebble"] .hero h1{ line-height:1.06; }
html[data-style="pebble"] :is(.btn,.eyebrow){ letter-spacing:.02em; font-size:15px; }
html[data-style="pebble"] :is(.event-card,.div-card,.value,.coach-card,.join,.form-card,.gx-card,.photo-grid .ph,.reg-form-note,.consent-note){ border:2px solid rgba(var(--a-rgb),.4); border-radius:32px; box-shadow:0 9px 0 rgba(var(--a-rgb),.3), 0 24px 40px -16px rgba(0,0,0,.4); }
html[data-style="pebble"] .div-card.junior{ border-color:rgba(var(--b-rgb),.45); box-shadow:0 9px 0 rgba(var(--b-rgb),.3), 0 24px 40px -16px rgba(0,0,0,.4); }
html[data-style="pebble"] .photo-grid .ph{ border-radius:22px; }
html[data-style="pebble"] .btn{ border-radius:999px; padding:14px 26px; box-shadow:0 5px 0 rgba(0,0,0,.35); transition:transform .15s cubic-bezier(.3,1.6,.5,1), box-shadow .15s, background .15s; }
html[data-style="pebble"] .btn:hover{ transform:translateY(2px); box-shadow:0 3px 0 rgba(0,0,0,.35); }
html[data-style="pebble"] .btn:active{ transform:translateY(5px); box-shadow:0 0 0 rgba(0,0,0,.35); }
html[data-style="pebble"] :is(.pill,.tag){ border-radius:999px; }
html[data-style="pebble"] .field :is(input,textarea,select){ border-radius:20px; border-width:2px; }
html[data-style="pebble"] .stats{ background:transparent; border:0; }
html[data-style="pebble"] .stat{ background:rgba(var(--panel-rgb),.7); border:2px solid rgba(var(--a-rgb),.3); border-radius:26px; margin:18px 6px; }
html[data-style="pebble"] .stat-row{ gap:6px; padding-inline:18px; }
html[data-style="pebble"] .eyebrow::before{ width:12px; height:12px; border-radius:50%; }

@media (prefers-reduced-motion: reduce){ html[data-style] *{ animation-duration:.001s!important; } }