/* CRUCIBLE - SPLIT-SCREEN FACE-OFF. The whole page is divided FOR vs AGAINST
   down a glowing seam. Clash Display + Space Grotesk · OLED + magenta/cyan. */
@import url("https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=space-grotesk@400,500,600&f[]=jetbrains-mono@400,500&display=swap");

:root{
  --bg:#070509; --txt:#ece9f5; --txt2:#a39db8; --dim:#6b6480;
  --a:#ff3d7f; --a2:#ff86b0; --ad:#1a0710; --b:#3df0ff; --b2:#9af5ff; --bd:#04161a; --gold:#ffd45e;
  --line:#241f33; --line2:#332c47;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:"Space Grotesk",sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.disp{font-family:"Clash Display",sans-serif;letter-spacing:-.01em}
.mono{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
a{color:var(--b);text-decoration:none}
.ic-svg{display:inline-block;vertical-align:-2px}
.wrap{position:relative;z-index:2;max-width:1340px;margin:0 auto;padding:0 28px}

/* the split background - only behind the hero face-off, calm and restrained. */
.split-bg{position:fixed;inset:0 0 auto 0;height:88vh;z-index:0;display:flex;background:#070509;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.half-for{flex:1;background:linear-gradient(90deg,rgba(255,61,127,.07),transparent 70%)}
.half-against{flex:1;background:linear-gradient(270deg,rgba(61,240,255,.06),transparent 70%)}
.seam{position:absolute;left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);
  background:linear-gradient(180deg,transparent,rgba(255,212,94,.4) 30%,rgba(255,212,94,.4) 70%,transparent)}
@media(max-width:760px){.seam{display:none}.half-for,.half-against{flex:none;height:50%}.split-bg{flex-direction:column}}

.nav{position:sticky;top:18px;z-index:40;margin-top:18px}
.nav::before{content:"";position:fixed;left:0;right:0;top:0;height:86px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 50%,transparent 100%)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(13,10,18,.66);backdrop-filter:blur(18px);border:1px solid var(--line2);border-radius:999px;padding:10px 12px 10px 20px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Clash Display";font-weight:600;font-size:20px}
.brand svg{width:30px;height:30px;flex-shrink:0}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{color:var(--txt2);font-size:14px;font-weight:500;padding:8px 13px;border-radius:999px;transition:.3s cubic-bezier(.32,.72,0,1)}
.nav-links a:hover{background:rgba(255,255,255,.05);color:var(--txt)}
@media(max-width:760px){.nav-links a:not(.cta){display:none}}

.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:"Space Grotesk";font-weight:600;font-size:14px;border:none;cursor:pointer;border-radius:999px;padding:11px 12px 11px 20px;background:var(--txt);color:#0a0710;transition:transform .5s cubic-bezier(.32,.72,0,1),box-shadow .5s}
.btn:active{transform:scale(.975)}
.btn .ic{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.12);transition:transform .5s cubic-bezier(.32,.72,0,1)}
.btn .ic .ic-svg{width:15px;height:15px}.btn:hover .ic{transform:translate(3px,-2px)}
.btn.pink{background:linear-gradient(100deg,var(--a),#d62768);color:#fff}.btn.pink .ic{background:rgba(255,255,255,.2)}.btn.pink:hover{box-shadow:0 18px 40px -16px rgba(255,61,127,.6)}
.btn.cyan{background:linear-gradient(100deg,var(--b),#1bc2d6);color:#04222a}.btn.cyan:hover{box-shadow:0 18px 40px -16px rgba(61,240,255,.55)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line2);padding:11px 20px}.btn.ghost:hover{background:rgba(255,255,255,.05)}
.btn.ghost.sm,.btn.sm{padding:8px 9px 8px 15px;font-size:13px}.btn.sm .ic{width:24px;height:24px}.btn.ghost.sm{padding:8px 16px}
.btn.block{width:100%;justify-content:center;padding:14px 22px}.btn:disabled{opacity:.5;cursor:not-allowed}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--txt2);border-radius:999px;padding:6px 13px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.eyebrow .pip{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}

/* face-off hero */
.faceoff{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;min-height:74vh;gap:10px}
@media(max-width:900px){.faceoff{grid-template-columns:1fr}}
.side-tag{font-family:"Clash Display";font-weight:700;font-size:clamp(20px,3vw,34px);writing-mode:vertical-rl;text-align:center;letter-spacing:.1em;opacity:.6}
.side-tag.for{color:var(--a2);transform:rotate(180deg)}
.side-tag.against{color:var(--b2)}
@media(max-width:900px){.side-tag{display:none}}
.faceoff-center{text-align:center;padding:30px 0;position:relative}
#arena3d{position:absolute;left:50%;top:-20px;transform:translateX(-50%);width:min(560px,90vw);height:340px;z-index:-1;opacity:.95;pointer-events:none}
#arena3d canvas{width:100%;height:100%;display:block}
.faceoff h1{font-family:"Clash Display";font-weight:700;font-size:clamp(48px,8vw,104px);line-height:.92;letter-spacing:-.03em;margin:140px 0 18px}
@media(max-width:900px){.faceoff h1{margin-top:0}.faceoff{min-height:auto;padding-top:200px}#arena3d{top:30px;height:200px}}
.seam-word{background:linear-gradient(90deg,var(--a),var(--gold) 50%,var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.faceoff .sub{max-width:54ch;margin:0 auto;color:var(--txt2);font-size:18px}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}

/* fixtures: full-width head-to-head rows */
section{padding:40px 0}
.fixtures-head{display:flex;align-items:baseline;gap:16px;border-bottom:1px solid var(--line2);padding-bottom:14px;margin-bottom:22px}
.fixtures-head h2{font-family:"Clash Display";font-weight:600;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em}
.fixtures-head .meta{margin-left:auto;color:var(--dim);font-size:12px}
.fixtures{display:flex;flex-direction:column;gap:16px}
.fixture{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;background:rgba(13,10,18,.72);border:1px solid var(--line2);border-radius:18px;overflow:hidden;cursor:pointer;transition:.4s cubic-bezier(.32,.72,0,1)}
.fixture:hover{transform:translateY(-3px);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.corner{padding:20px 22px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.corner.for{background:linear-gradient(100deg,rgba(255,61,127,.12),transparent)}
.corner.against{background:linear-gradient(260deg,rgba(61,240,255,.1),transparent);text-align:right;align-items:flex-end}
.corner .lbl{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.corner.for .lbl{color:var(--a2)}.corner.against .lbl{color:var(--b2)}
.corner .who{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--txt)}
.corner .stk{font-family:"Clash Display";font-weight:600;font-size:18px;color:var(--gold)}
.center-col{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px 20px;min-width:200px;border-left:1px solid var(--line);border-right:1px solid var(--line);background:rgba(0,0,0,.3)}
.center-col .motion{font-family:"Clash Display";font-weight:600;font-size:16px;text-align:center;line-height:1.2;margin-bottom:10px}
.vs-badge{font-family:"Clash Display";font-weight:700;color:var(--gold);font-size:13px;letter-spacing:.1em;margin-bottom:8px}
.pill{font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border:1px solid;border-radius:999px}
.p-wait{color:var(--gold);border-color:var(--gold)}.p-lock{color:var(--b);border-color:var(--b)}.p-done{color:var(--dim);border-color:var(--line2)}
@media(max-width:760px){.fixture{grid-template-columns:1fr}.corner.against{text-align:left;align-items:flex-start}.center-col{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}}
.empty{text-align:center;color:var(--dim);border:1px dashed var(--line2);border-radius:18px;padding:54px;background:rgba(13,10,18,.5)}

/* arena photo band - cinematic split between fixtures and how */
.arena-band{position:relative;margin:30px 0;border-radius:18px;overflow:hidden;border:1px solid var(--line2)}
.ab-img{margin:0;position:relative;line-height:0}
.ab-img img{width:100%;height:auto;display:block;filter:grayscale(.8) contrast(1.3) brightness(.55)}
.ab-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,61,127,.18),transparent 45%,rgba(61,240,255,.15))}
.ab-cap{position:absolute;bottom:0;left:0;right:0;padding:18px 24px;font-family:"Clash Display";font-weight:600;font-size:15px;color:var(--txt2);letter-spacing:.02em;background:linear-gradient(0deg,rgba(7,5,9,.85),transparent)}

/* how - horizontal scroll-snap strip with gradient progression */
.how h2{font-family:"Clash Display";font-weight:600;font-size:clamp(26px,3.4vw,40px);text-align:center;margin-bottom:28px}
.hscroll{display:flex;justify-content:center;align-items:stretch;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 18px;-webkit-overflow-scrolling:touch}
.hscroll::-webkit-scrollbar{height:6px}.hscroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
.hcard{flex:0 0 min(340px,80vw);scroll-snap-align:start;border-radius:20px;padding:30px 26px;position:relative;overflow:hidden;border:1px solid var(--line2)}
.hcard .hc-n{position:absolute;top:16px;right:20px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.1em;opacity:.5}
.hcard .hc-ic{font-size:30px;margin-bottom:14px;display:block}
.hcard h4{font-family:"Clash Display";font-weight:600;font-size:20px;margin-bottom:8px}
.hcard p{color:var(--txt2);font-size:14px;line-height:1.5}
.hc-a{background:linear-gradient(145deg,rgba(255,61,127,.14),rgba(255,61,127,.03));border-color:rgba(255,61,127,.3)}.hc-a .hc-ic{color:var(--a2)}
.hc-b{background:linear-gradient(145deg,rgba(255,212,94,.12),rgba(255,212,94,.03));border-color:rgba(255,212,94,.25)}.hc-b .hc-ic{color:var(--gold)}
.hc-c{background:linear-gradient(145deg,rgba(61,240,255,.12),rgba(61,240,255,.03));border-color:rgba(61,240,255,.25)}.hc-c .hc-ic{color:var(--b2)}
@media(max-width:1120px){.hscroll{justify-content:flex-start;padding-left:max(0px,calc((100vw - 340px)/2 - 28px));padding-right:max(0px,calc((100vw - 340px)/2 - 28px))}}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(5,3,8,.72);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s;z-index:70}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(540px,100%);background:#0c0a12;border-left:1px solid var(--line2);z-index:71;transform:translateX(102%);visibility:hidden;transition:transform .55s cubic-bezier(.32,.72,0,1),visibility .55s;overflow-y:auto;box-shadow:-40px 0 100px -50px rgba(0,0,0,.9)}
.drawer.on{transform:none;visibility:visible}
.drawer-h{display:flex;justify-content:space-between;align-items:center;padding:26px 30px 18px}
.drawer-h h3{font-family:"Clash Display";font-weight:600;font-size:22px}
.drawer-b{padding:6px 30px 40px}
label{display:block;font-size:12px;font-weight:600;color:var(--txt2);margin:16px 0 7px}
input,textarea{width:100%;background:#16131f;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;font-family:"Space Grotesk";font-size:15px;color:var(--txt);transition:.3s}
input:focus,textarea:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 4px rgba(255,61,127,.12)}
textarea{resize:vertical;min-height:90px}
.hint{font-size:12.5px;color:var(--dim);margin-top:6px}
.cases{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0}
.case{border:1px solid var(--line2);border-radius:14px;padding:14px}
.case.fa{background:rgba(255,61,127,.05);border-color:rgba(255,61,127,.3)}.case.fb{background:rgba(61,240,255,.05);border-color:rgba(61,240,255,.3)}
.case .lbl{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.case.fa .lbl{color:var(--a2)}.case.fb .lbl{color:var(--b2)}
.case .txt{font-size:14px;line-height:1.5;color:var(--txt)}
.winbanner{font-family:"Clash Display";font-weight:700;font-size:22px;text-align:center;padding:16px;border-radius:14px;margin:14px 0}
.win-a{color:var(--a2);border:1px solid var(--a);background:rgba(255,61,127,.08)}
.win-b{color:var(--b2);border:1px solid var(--b);background:rgba(61,240,255,.08)}
.win-tie{color:var(--gold);border:1px solid var(--gold);background:rgba(255,212,94,.07)}
.rationale{font-style:italic;color:var(--txt2);font-size:14px;border-left:2px solid var(--line2);padding-left:10px;margin-top:8px}

#log{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:12px;z-index:90;max-width:380px}
.toast{background:#0c0a12;border:1px solid var(--line2);border-left:3px solid var(--b);border-radius:14px;padding:14px 16px;font-family:"JetBrains Mono",monospace;font-size:12px;line-height:1.5;white-space:pre-wrap;color:var(--txt)}
.toast.err{border-left-color:var(--a)}.toast.ok{border-left-color:#3df0a8}
.toast .tt{display:block;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.spinner{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}
footer{border-top:1px solid var(--line2);margin-top:30px;padding:26px 0 60px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--dim)}
.links{display:flex;gap:16px;flex-wrap:wrap}

/* GLOBAL OVERFLOW GUARD */
html,body{overflow-x:hidden;max-width:100%}