/* =========================================================================
   base.css — theme-independent layer.
   Only styles the style-switcher control + under-construction chrome, so the
   picker looks/behaves the same no matter which visual theme is active.
   ========================================================================= */

.style-switcher{
  position:fixed; top:10px; right:12px; z-index:99999;
  font-family:'Inter',system-ui,sans-serif;
}
.ss-gear{
  width:46px; height:46px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  background:#111317; color:#fff; font-size:1.45rem; line-height:1; cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  display:grid; place-items:center; transition:transform .25s ease, background .15s;
}
.ss-gear:hover{ transform:rotate(60deg); background:#1c2029; }
.ss-gear[aria-expanded="true"]{ transform:rotate(120deg); }

/* the little "under construction" hazard ring */
.style-switcher::after{
  content:""; position:absolute; inset:-5px; border-radius:50%; z-index:-1;
  background:repeating-conic-gradient(#e3b71f 0 12deg, #111 12deg 24deg);
  opacity:.0; transition:opacity .2s;
}
.style-switcher:hover::after{ opacity:.9; }

.ss-menu{
  position:absolute; top:56px; right:0; width:248px;
  background:#15171c; color:#e9ecf1; border:1px solid #2a2f3a; border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.55); overflow:hidden;
  animation:ss-pop .14s ease-out;
}
@keyframes ss-pop{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

.ss-head{ padding:.8rem .9rem; border-bottom:1px solid #2a2f3a; background:#0f1115; }
.ss-uc{ display:block; font-weight:700; font-size:.82rem; letter-spacing:.02em; color:#e3b71f; }
.ss-head small{ color:#9aa3b2; font-size:.74rem; }

.ss-opt{
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid #21262f; color:#e9ecf1;
  padding:.7rem .9rem; cursor:pointer; font:inherit; transition:background .12s;
}
.ss-opt:hover{ background:#1e2430; }
.ss-key{
  flex:0 0 auto; width:26px; height:26px; border-radius:6px; display:grid; place-items:center;
  font-weight:800; font-size:.9rem; background:#2a2f3a; color:#fff;
}
.ss-opt[data-theme="R"] .ss-key{ background:#d11f2d; }
.ss-opt[data-theme="Y"] .ss-key{ background:#e3b71f; color:#1a1305; }
.ss-opt[data-theme="P"] .ss-key{ background:#f2c200; color:#0b0b0a; }
.ss-opt[data-theme="G"] .ss-key{ background:#6d28d9; color:#e8c84a; }
.ss-name{ display:flex; flex-direction:column; line-height:1.15; }
.ss-name small{ color:#9aa3b2; font-size:.72rem; font-weight:400; }
.ss-opt[aria-checked="true"]{ background:#202733; }
.ss-opt[aria-checked="true"]::after{ content:"✓"; margin-left:auto; color:#7CFC8A; font-weight:700; }

.ss-foot{ padding:.55rem .9rem; font-size:.72rem; color:#7b8493; background:#0f1115; font-style:italic; }

@media (max-width:640px){
  .ss-gear{ width:42px; height:42px; font-size:1.25rem; }
  .ss-menu{ width:220px; }
}

/* =========================================================================
   Join form — theme-independent so it reads the same in every visual style.
   ========================================================================= */
.join-form{ max-width:46rem; margin:0 auto; }
.jf-row{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; align-items:stretch;
}
.jf-input{
  flex:1 1 14rem; min-width:0;
  font:inherit; font-size:1rem; color:#fff;
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.30);
  border-radius:2px; padding:.85rem 1rem;
}
.jf-input::placeholder{ color:rgba(255,255,255,.55); }
.jf-input:focus{ outline:none; border-color:#d11f2d; background:rgba(255,255,255,.10); }
.jf-submit{ flex:0 0 auto; border:0; }
.jf-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.jf-status{ min-height:1.4em; margin:1rem auto 0; font-weight:600; max-width:36rem; }
.jf-status.ok{ color:#7CFC8A; }
.jf-status.err{ color:#ff8a93; }
.jf-fineprint{ margin-top:1.2rem; font-size:.8rem; opacity:.6; }
@media (max-width:560px){
  .jf-row{ flex-direction:column; }
  .jf-submit{ width:100%; }
}

/* =========================================================================
   Hero side image — the Eternal Golden Braid noose, bled in from the right.
   Theme-independent. mix-blend-mode:screen drops the image's dark ground so
   only the glowing gold rope + particles float over whatever theme is active;
   the left edge is feathered into the hero so there's no hard seam.
   ========================================================================= */
.hero{ position:relative; overflow:hidden; }
.hero-inner{ position:relative; z-index:2; }
.hero::after{
  content:""; position:absolute; top:0; right:0; bottom:0;
  width:min(54%, 660px);
  background:url("noose-side.jpg") center right / contain no-repeat;
  mix-blend-mode:screen; opacity:.95; pointer-events:none; z-index:1;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 42%);
          mask-image:linear-gradient(to right, transparent 0%, #000 42%);
}
@media (max-width:820px){ .hero::after{ width:64%; opacity:.45; } }
@media (max-width:560px){ .hero::after{ display:none; } }

/* =========================================================================
   Join popup — hero modal shown on arrival. Theme-independent.
   Backdrop carries a faint gold skull; the dialog leads with the corruption
   poster, then a JOIN THE PARTY capture form (posts to the same join.php).
   ========================================================================= */
.jp-overlay{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center; padding:1.2rem;
  background:rgba(6,5,9,.86);
  opacity:0; visibility:hidden; transition:opacity .35s ease;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.jp-overlay::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:url("popup-skull.jpg") center/cover no-repeat; opacity:.16;
}
.jp-overlay.open{ opacity:1; visibility:visible; }
.jp-dialog{
  position:relative; width:min(560px,100%); max-height:92vh; overflow:auto;
  background:#0c0a10; border:1px solid rgba(242,183,5,.55); border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
  transform:translateY(14px) scale(.985); transition:transform .35s ease;
  font-family:'Inter',system-ui,sans-serif;
}
.jp-overlay.open .jp-dialog{ transform:none; }
.jp-hero{ display:block; width:100%; height:auto; border-bottom:1px solid rgba(242,183,5,.35); }
.jp-body{ padding:1.5rem 1.6rem 1.7rem; text-align:center; color:#fff; }
.jp-body h2{
  font-family:'Oswald',Impact,sans-serif; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(1.7rem,5vw,2.4rem); line-height:1.04; margin:0 0 .5rem; color:#fff;
}
.jp-body h2 .g{ color:#f2b705; }
.jp-sub{ color:#a7b0bf; font-size:1rem; margin:0 0 1.2rem; }
.jp-fine{ margin-top:1rem; font-size:.78rem; color:#a7b0bf; opacity:.7; }
.jp-close{
  position:absolute; top:.55rem; right:.6rem; z-index:2;
  width:2.1rem; height:2.1rem; display:grid; place-items:center;
  background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:50%; font-size:1.25rem; line-height:1; cursor:pointer; transition:.15s;
}
.jp-close:hover{ background:#d11f2d; border-color:#d11f2d; }
@media (max-width:560px){ .jp-body{ padding:1.2rem 1.1rem 1.4rem; } }

/* =========================================================================
   The Arena — open-air proceedings as the new national sport. Splashy and
   self-contained (own dark ground) so it reads the same across every theme.
   ========================================================================= */
.arena{
  position:relative; overflow:hidden; color:#fff;
  font-family:'Inter',system-ui,sans-serif;
  background:
    radial-gradient(100% 120% at 50% -20%, rgba(209,31,45,.30), transparent 60%),
    radial-gradient(80% 100% at 82% 120%, rgba(242,183,5,.14), transparent 60%),
    #07080c;
  border-top:1px solid #232a38; border-bottom:1px solid #232a38; padding:0 0 4rem;
}
.arena-ticker{ background:#d11f2d; overflow:hidden; white-space:nowrap; border-bottom:2px solid rgba(0,0,0,.25); }
.arena-ticker .track{
  display:inline-block; padding:.5rem 0; will-change:transform; color:#fff;
  font-family:'Oswald',Impact,sans-serif; text-transform:uppercase;
  letter-spacing:.12em; font-size:.8rem; font-weight:600;
  animation:arena-scroll 30s linear infinite;
}
.arena-ticker .track span{ padding:0 1.4rem; }
.arena-ticker .track b{ color:#ffe48a; }
@keyframes arena-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.arena-head{ max-width:72rem; margin:0 auto; padding:4rem 1.5rem 1rem; text-align:center; }
.arena-eyebrow{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.2em; font-size:.78rem; font-weight:700; color:#f2b705; margin:0 0 .9rem; }
.arena-title{ font-family:'Oswald',Impact,sans-serif; text-transform:uppercase; line-height:1.02; font-size:clamp(2.1rem,6vw,4rem); margin:0 0 .8rem; color:#fff; }
.arena-title .hl{ color:#d11f2d; }
.arena-sub{ color:#c7cedb; font-size:1.12rem; max-width:42rem; margin:0 auto; }

.fixtures{ max-width:72rem; margin:0 auto; padding:2rem 1.5rem 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.fixture{ position:relative; background:#11131b; border:1px solid #232a38; border-top:3px solid #d11f2d; border-radius:4px; padding:1.4rem 1.3rem 1.2rem; }
.fixture .when{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:#a7b0bf; margin:0 0 .6rem; }
.fixture .bout{ font-family:'Oswald',Impact,sans-serif; text-transform:uppercase; line-height:1.05; font-size:1.35rem; margin:0 0 .8rem; color:#fff; }
.fixture .bout em{ color:#f2b705; font-style:normal; }
.fixture .venue{ color:#a7b0bf; font-size:.9rem; margin:0 0 1rem; }
.fixture .status{ display:inline-block; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700; padding:.28rem .6rem; border-radius:2px; }
.fixture .status.live{ background:#d11f2d; color:#fff; }
.fixture .status.sold{ background:rgba(242,183,5,.16); color:#f2b705; border:1px solid rgba(242,183,5,.5); }
.fixture .status.final{ background:rgba(255,255,255,.08); color:#cfd6e2; border:1px solid #2c3445; }

.arena-stats{ max-width:72rem; margin:2.4rem auto 0; padding:0 1.5rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.arena-stats .s{ background:rgba(255,255,255,.03); border:1px solid #232a38; padding:1.5rem 1rem; text-align:center; }
.arena-stats .n{ display:block; font-family:'Oswald',Impact,sans-serif; font-size:2.4rem; color:#f2b705; line-height:1; }
.arena-stats .l{ display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.74rem; color:#a7b0bf; margin-top:.5rem; }
.arena-cta{ text-align:center; margin-top:2.4rem; }
@media (max-width:820px){ .fixtures{ grid-template-columns:1fr; } .arena-stats{ grid-template-columns:repeat(2,1fr); } }