/* 3D Fight Club | Intellectual property of Sidedoor Digital. */

/* ---------- fonts, self hosted so no visitor data goes to Google ---------- */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/big-shoulders-display-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/archivo-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/archivo-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/archivo-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/chakra-petch-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/chakra-petch-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/chakra-petch-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* hidden always wins, even over a display rule on the same element */
[hidden]{display:none!important}

/* ---------- tokens ---------- */
:root{
  --ink:#0e1012;
  --ink-deep:#000000;
  --plate:#16191d;
  --plate-hi:#1e2228;
  --steel:#8a9099;
  --steel-lo:#5a616a;
  --steel-hi:#c3c9d0;
  --bone:#e9e4db;
  --blood:#c1122b;
  --blood-deep:#8a0f22;
  --blood-glow:rgba(193,18,43,.35);
  --bronze:#a87b4a;

  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-stat:"Chakra Petch","Courier New",monospace;

  --gut:clamp(1.25rem,4vw,3rem);
  --maxw:1240px;
  --rule:1px solid rgba(138,144,153,.22);
  --bevel:inset 1px 1px 0 rgba(195,201,208,.09), inset -1px -1px 0 rgba(0,0,0,.5);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + var(--safe-t));-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font:400 16px/1.6 var(--f-body);
  overflow-x:hidden;
  padding-bottom:var(--safe-b);
}
/* shattered red ground, site wide. Dark enough to read over, loud enough to feel */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(94deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,rgba(14,16,18,.80),rgba(14,16,18,.90)),
    #0e1012 url("../img/bg-shards-2048.webp") center/cover no-repeat;
}
main,header,footer{position:relative;z-index:1}
main{overflow-x:clip}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blood);outline-offset:3px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:.9;letter-spacing:-.01em;margin:0}
h1,h2{text-transform:uppercase;letter-spacing:-.015em}
h1{font-size:clamp(3rem,12vw,7.5rem)}
h2{font-size:clamp(2.4rem,7.5vw,4.8rem);line-height:.86}
h3{font-size:clamp(1.5rem,3.6vw,2.1rem)}
h4{font-size:clamp(1.1rem,2.4vw,1.35rem);font-weight:700}
p{margin:0 0 1.1em;max-width:68ch}
.lede{font-size:clamp(1.05rem,2vw,1.25rem);color:var(--steel-hi);line-height:1.55}
.muted{color:var(--steel)}
.stat{font-family:var(--f-stat);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.section-note{font-family:var(--f-stat);font-size:.8rem;color:var(--steel-lo);letter-spacing:.06em}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:clamp(3.5rem,9vw,7rem)}
.section{position:relative}
/* a red slash between sections instead of a flat rule */
.section + .section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--blood) 12%,rgba(193,18,43,.35) 55%,transparent 88%);
  transform:skewY(-.5deg);transform-origin:left;
}
.section-head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:.9rem 1rem;margin-bottom:clamp(1.75rem,4vw,3rem);position:relative}
.section-head > h2{grid-column:2}
.section-head > :not(h2){grid-column:1/-1;margin:0}
@media(min-width:880px){
  .section-head{grid-template-columns:auto minmax(0,1fr) minmax(0,25rem);column-gap:1.4rem}
  .section-head > :not(h2){grid-column:3;justify-self:end;padding-bottom:.35rem}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-display);font-weight:800;font-size:1.15rem;letter-spacing:.02em;
  padding:.85rem 1.7rem;border:1px solid var(--blood);background:var(--blood);color:#fff;
  cursor:pointer;position:relative;transition:transform .08s ease,background .18s ease;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
.btn:hover{background:var(--blood-deep)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;border-color:rgba(138,144,153,.45);color:var(--bone)}
.btn--ghost:hover{background:rgba(233,228,219,.07);border-color:var(--bone)}
.btn--block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- plates ---------- */
.plate{background:linear-gradient(160deg,var(--plate-hi),var(--plate));box-shadow:var(--bevel);border:1px solid rgba(138,144,153,.14)}

/* ---------- intro ---------- */
#intro{
  position:fixed;inset:0;z-index:9999;background:var(--ink-deep);
  overflow:hidden;
}
#intro[hidden]{display:none}
.intro-stage{position:absolute;inset:0;overflow:hidden}
.intro-layer{position:absolute;opacity:0;will-change:transform,opacity;pointer-events:none}
.intro-layer img{width:100%;height:100%;display:block;max-width:none}
/* soften the frame edges into the black so they never read as a box */
.intro-feather{
  -webkit-mask-image:radial-gradient(closest-side,#000 68%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 68%,transparent 100%);
}
.intro-site{position:absolute;inset:0;opacity:0;display:grid;place-items:center;background:var(--ink)}
.intro-site::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(55% 45% at 50% 50%,rgba(14,16,18,.25),rgba(14,16,18,.72));
}
.intro-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
.intro-logo{position:relative;z-index:1;width:min(70vw,50vh,420px);height:auto;will-change:transform;filter:drop-shadow(0 18px 40px rgba(0,0,0,.7))}
.intro-skip{
  position:absolute;z-index:2;bottom:calc(2rem + var(--safe-b));right:1.5rem;
  background:none;border:1px solid rgba(138,144,153,.4);color:var(--steel);
  font-family:var(--f-stat);font-size:.8rem;padding:.5rem 1rem;cursor:pointer;letter-spacing:.06em;
}
.intro-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:600;
  padding-top:var(--safe-t);
  background:rgba(14,16,18,.86);backdrop-filter:blur(14px);
  border-bottom:var(--rule);
}
.head-in{display:flex;align-items:center;gap:1rem;height:70px}
.brandmark{display:flex;align-items:center;gap:.7rem;margin-right:auto}
.brandmark img{height:40px;width:auto}
.brandmark span{font-family:var(--f-display);font-weight:800;font-size:1.3rem;line-height:1;letter-spacing:.01em}
.nav{display:flex;gap:.25rem;align-items:center}
.nav a{
  font-family:var(--f-display);font-weight:700;font-size:1.05rem;padding:.5rem .7rem;
  color:var(--steel-hi);border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--bone)}
.nav a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--blood)}
.nav-cta{margin-left:.5rem;padding:.55rem 1.1rem;font-size:1rem}

/* menu button. The word Menu is always written next to the bars */
.menu-btn{display:inline-flex;align-items:center;gap:.6rem;margin-left:.5rem;padding:.5rem .8rem;cursor:pointer;
  background:transparent;border:1px solid rgba(138,144,153,.4);font-family:var(--f-display);font-weight:800;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--bone)}
.menu-btn:hover{border-color:var(--bone)}
.menu-btn-bars{display:grid;gap:4px;width:20px}
.menu-btn-bars i{display:block;height:2px;background:var(--bone)}
.menu-btn-bars i:nth-child(2){background:var(--blood)}
.menu-btn-bars i:nth-child(3){width:65%}
@media (max-width:1000px){
  .nav{display:none}
}
@media (max-width:480px){
  .head-in .nav-cta{padding:.5rem .8rem;font-size:.95rem}
  .brandmark span{display:none}
}

/* ---------- full screen menu ---------- */
html.menu-lock{overflow:hidden}
.menu{position:fixed;inset:0;z-index:900;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:
    linear-gradient(100deg,rgba(6,7,8,.97) 35%,rgba(6,7,8,.88)),
    #000 url("../img/bg-shards-2048.webp") center/cover no-repeat;
  clip-path:polygon(100% 0,100% 0,100% 0,100% 0);
  transition:clip-path .42s cubic-bezier(.7,0,.2,1)}
.menu[data-open="true"]{clip-path:polygon(-20% 0,100% 0,100% 100%,-60% 100%)}
.menu::before{ /* a red blade sweeps across as it opens */
  content:"";position:fixed;top:-10%;bottom:-10%;left:0;width:38%;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--blood) 30%,var(--blood) 70%,transparent);opacity:.9;
  transform:translateX(280%) skewX(-18deg)}
.menu[data-open="true"]::before{animation:blade .75s cubic-bezier(.6,0,.2,1) both}
@keyframes blade{0%{transform:translateX(280%) skewX(-18deg)}100%{transform:translateX(-160%) skewX(-18deg)}}
.menu-in{min-height:100%;display:flex;flex-direction:column;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:calc(.9rem + var(--safe-t)) var(--gut) calc(1.5rem + var(--safe-b))}
.menu-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:52px;margin-bottom:clamp(.5rem,3vh,2rem)}
.menu-top .brandmark{margin:0}
.menu-top .brandmark span{display:inline;font-size:1.1rem;color:var(--steel-hi)}
.menu-close{display:inline-flex;align-items:center;gap:.6rem;background:var(--blood);border:0;color:#fff;cursor:pointer;
  font-family:var(--f-display);font-weight:800;font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;padding:.55rem .9rem}
.menu-close span{position:relative;width:14px;height:14px}
.menu-close span::before,.menu-close span::after{content:"";position:absolute;left:-2px;right:-2px;top:6px;height:2px;background:#fff;transform:rotate(45deg)}
.menu-close span::after{transform:rotate(-45deg)}
.menu-list{list-style:none;margin:0;padding:0;counter-reset:none}
.menu-list li{border-bottom:1px solid rgba(138,144,153,.16);opacity:0;transform:translateX(-40px) skewX(-8deg);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1);transition-delay:0s}
.menu[data-open="true"] .menu-list li{opacity:1;transform:none;transition-delay:calc(.18s + var(--i) * .045s)}
.menu-list a{display:grid;grid-template-columns:2.4rem 1fr;column-gap:.6rem;align-items:baseline;padding:clamp(.55rem,1.6vh,.9rem) 0;position:relative}
.menu-no{font-family:var(--f-stat);font-weight:700;font-size:.8rem;color:var(--blood);letter-spacing:.08em}
.menu-name{font-family:var(--f-display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;
  font-size:clamp(2.2rem,8.5vw,4.4rem);transition:color .15s,transform .2s cubic-bezier(.2,.9,.3,1);transform-origin:left}
.menu-hint{grid-column:2;margin-top:.3rem;font-size:clamp(.85rem,1.6vw,1rem);color:var(--steel)}
.menu-here{position:absolute;right:0;top:50%;transform:translateY(-50%) rotate(-3deg);background:var(--blood);color:#fff;
  font-family:var(--f-stat);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .5rem}
.menu-list a[aria-current="page"] .menu-name{color:var(--blood)}
@media (hover:hover){
  .menu-list a:hover .menu-name{color:var(--blood);transform:translateX(.4rem) skewX(-8deg)}
  .menu-list a:hover .menu-hint{color:var(--bone)}
}
@media(min-width:1000px){
  .menu-list{display:grid;grid-template-columns:1fr 1fr;column-gap:3.5rem}
  .menu-list a{padding:1.1rem 0}
}
.menu-foot{margin-top:auto;padding-top:1.75rem;display:grid;gap:1.25rem;opacity:0;transition:opacity .3s ease}
.menu[data-open="true"] .menu-foot{opacity:1;transition-delay:.45s}
@media(min-width:760px){.menu-foot{grid-template-columns:1fr 1fr auto;align-items:end}}
.menu-more p{margin:0 0 .5rem;font-family:var(--f-stat);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-lo)}
.menu-more div{display:flex;flex-wrap:wrap;gap:.4rem}
.menu-more a{padding:.5rem .8rem;border:1px solid rgba(138,144,153,.3);font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--steel-hi)}
.menu-more a:hover,.menu-more a[aria-current="page"]{border-color:var(--blood);color:var(--bone)}
.menu-cta{font-size:1.3rem;padding:1rem 2rem}

/* ---------- phone tab bar ---------- */
.tabbar{display:none}
@media(max-width:760px){
  body.has-tabbar{padding-bottom:calc(64px + var(--safe-b))}
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:650;
    padding-bottom:var(--safe-b);background:rgba(8,9,11,.96);backdrop-filter:blur(12px);border-top:1px solid rgba(193,18,43,.45)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;height:64px;
    background:none;border:0;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;color:var(--steel-hi)}
  .tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .tabbar [aria-current="page"]{color:var(--bone);box-shadow:inset 0 3px 0 var(--blood)}
  .tabbar [aria-current="page"] svg{stroke:var(--blood)}
  /* the basket sits above the tab bar, not under it */
  /* the basket bar sits on top of the tab bar when it has something in it,
     and is fully out of sight when it does not. The tab bar always stays on top,
     so the basket can never cover it, even mid slide */
  .tabbar{z-index:720}
  .has-tabbar .cartbar{bottom:calc(64px + var(--safe-b));padding-bottom:.85rem;
    transform:translateY(calc(100% + 64px + var(--safe-b)));visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  .has-tabbar .cartbar[data-open="true"]{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s}
  .has-tabbar.cart-open{padding-bottom:calc(64px + 72px + var(--safe-b))}
  .has-tabbar .intro-skip{bottom:calc(2rem + var(--safe-b))}
}

/* ---------- where next ---------- */
.next-up{position:relative;z-index:1;padding-block:clamp(2.5rem,6vw,4rem);background:#050607;border-top:2px solid var(--blood)}
.next-up-title{margin:0 0 1.25rem;font-family:var(--f-display);font-weight:800;font-size:clamp(1.8rem,5vw,3rem);text-transform:uppercase;line-height:.9;
  transform:skewX(-9deg);transform-origin:left bottom}
.next-up-grid{display:grid;gap:clamp(.5rem,1.2vw,.9rem);grid-template-columns:1fr}
@media(min-width:760px){.next-up-grid{grid-template-columns:repeat(3,1fr)}}
.door{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:.9rem;align-items:center;
  padding:1.1rem 1.2rem;background:linear-gradient(160deg,var(--plate-hi),var(--plate));box-shadow:var(--bevel);border-left:3px solid var(--blood);
  transition:background .2s,transform .2s cubic-bezier(.2,.9,.3,1)}
.door-no{grid-row:1/3;font-family:var(--f-stat);font-weight:700;font-size:.8rem;color:var(--blood);letter-spacing:.08em}
.door-name{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3.4vw,2.1rem);text-transform:uppercase;line-height:.95}
.door-hint{grid-column:2;font-size:.88rem;color:var(--steel);margin-top:.2rem}
.door-go{grid-column:3;grid-row:1/3;font-family:var(--f-display);font-weight:800;font-size:1rem;text-transform:uppercase;color:#fff;background:var(--blood);
  padding:.45rem .7rem;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%)}
@media (hover:hover){.door:hover{background:linear-gradient(160deg,#2a1419,#15090c);transform:translateY(-2px)}.door:hover .door-hint{color:var(--bone)}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(560px,86svh,860px);display:flex;align-items:flex-end;overflow:hidden}
/* no drift or scale on the hero ground, any resampling softens it */
.hero-bg{position:absolute;inset:0;background:#000 url("../img/bg-shards-2048.webp") center/cover no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 6%,rgba(14,16,18,.42) 48%,rgba(14,16,18,.6))}
.hero-in{position:relative;padding-block:clamp(2.5rem,6vw,5rem);width:100%}
.hero-status{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-stat);font-size:.82rem;
  letter-spacing:.1em;color:var(--bone);background:rgba(193,18,43,.16);
  border:1px solid rgba(193,18,43,.5);padding:.45rem .9rem;margin-bottom:1.5rem;
}
.dot{width:8px;height:8px;background:var(--blood);border-radius:50%}
.dot--live{animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--blood-glow)}50%{box-shadow:0 0 0 7px transparent}}
.hero h1{margin-bottom:.35rem;text-shadow:0 8px 40px rgba(0,0,0,.6)}
/* The hero mark. One word cut along its own diagonal, the halves knocked
   apart, a blood line showing through the cut, a hard blood shadow, the lot
   leaning forward. The event number stamps in on a torn red block. */
.hero-mark{font-size:clamp(5rem,27vw,15rem);line-height:.8;letter-spacing:-.02em;text-transform:uppercase;text-shadow:none;margin-bottom:1rem}
@media(max-width:600px){.hero-mark{font-size:31vw}}
.mark{display:inline-flex;align-items:flex-end;gap:.16em;transform:skewX(-9deg);transform-origin:left bottom;padding:.06em .08em .04em 0}
.mark-word{position:relative;display:inline-block;color:var(--bone);z-index:0}
.mark-a,.mark-b{display:block;text-shadow:.05em .05em 0 var(--blood-deep),0 .12em .5em rgba(0,0,0,.65)}
.mark-a{clip-path:polygon(-10% -10%,110% -10%,-10% 110%);transform:translate(-.07em,-.035em)}
.mark-b{position:absolute;inset:0;clip-path:polygon(110% -10%,110% 110%,-10% 110%);transform:translate(.07em,.035em)}
.mark-word::before{
  content:"";position:absolute;inset:-9%;z-index:-1;
  background:linear-gradient(to bottom right,transparent calc(50% - .035em),var(--blood-deep) calc(50% - .025em),#ff3048 50%,var(--blood-deep) calc(50% + .025em),transparent calc(50% + .035em));
  filter:drop-shadow(0 0 .18em rgba(255,40,70,.7));
}
.mark-num{
  display:inline-block;font-size:.78em;line-height:.9;color:var(--bone);background:var(--blood);padding:.08em .16em .02em;
  clip-path:polygon(5% 0,100% 4%,95% 31%,100% 57%,94% 100%,0 96%,6% 66%,0 34%);
  box-shadow:inset 0 -.08em 0 var(--blood-deep);margin-bottom:.05em;
}
/* the cut opens after the slam lands, then the number stamps in */
.hit .mark-a{animation:markA .9s cubic-bezier(.2,.9,.3,1) both}
.hit .mark-b{animation:markB .9s cubic-bezier(.2,.9,.3,1) both}
.hit .mark-word::before{animation:markCut .9s ease-out both}
.hit .mark-num{animation:markNum .5s cubic-bezier(.2,.9,.3,1) .55s both}
@keyframes markA{0%,38%{transform:none}55%{transform:translate(-.11em,-.055em)}100%{transform:translate(-.07em,-.035em)}}
@keyframes markB{0%,38%{transform:none}55%{transform:translate(.11em,.055em)}100%{transform:translate(.07em,.035em)}}
@keyframes markCut{0%,36%{opacity:0}42%{opacity:1;filter:drop-shadow(0 0 .4em #ff3048)}100%{opacity:1}}
@keyframes markNum{0%{opacity:0;transform:scale(2.2) rotate(-8deg)}60%{opacity:1;transform:scale(.92) rotate(2deg)}100%{opacity:1;transform:none}}
.hero-sub{font-family:var(--f-display);font-weight:600;font-size:clamp(1.2rem,3vw,1.9rem);color:var(--steel-hi);margin-bottom:1.75rem}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* countdown */
.countdown{display:flex;gap:clamp(.5rem,2vw,1.25rem);margin:2rem 0 0;flex-wrap:wrap}
.cd-unit{min-width:74px;padding:.7rem .9rem;text-align:center;background:linear-gradient(160deg,var(--plate-hi),var(--plate));box-shadow:var(--bevel);border-top:2px solid var(--blood)}
.cd-unit b{display:block;font-family:var(--f-stat);font-weight:700;font-size:clamp(1.6rem,5vw,2.4rem);line-height:1;font-variant-numeric:tabular-nums}
.cd-unit small{font-family:var(--f-stat);font-size:.68rem;color:var(--steel);letter-spacing:.12em}

/* ---------- fight card ---------- */
/* Fight night style. Full body shots, red corner left, blue corner right.
   Photos are cutouts standing on the bottom edge, so they are contained and
   bottom aligned, never cropped at the head or the feet. */
.bout{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:clamp(.25rem,2vw,1.5rem);
  padding:clamp(1rem,2.5vw,1.6rem) clamp(.75rem,2vw,1.5rem) 1.2rem;
  background:
    radial-gradient(50% 70% at 20% 100%,rgba(193,18,43,.18),transparent 70%),
    radial-gradient(50% 70% at 80% 100%,rgba(60,90,160,.14),transparent 70%),
    linear-gradient(160deg,var(--plate-hi),var(--plate));
  box-shadow:var(--bevel);border-left:3px solid transparent;margin-bottom:.75rem;
}
.bout--main{border-left-color:var(--blood)}
.bout--title{border-left-color:var(--bronze)}
.bout-tag{
  grid-column:1/-1;font-family:var(--f-stat);font-size:.7rem;letter-spacing:.12em;color:var(--steel-lo);
  display:flex;gap:.6rem;align-items:center;
}
.bout-tag em{font-style:normal;color:var(--blood)}
.bout-vs{font-family:var(--f-display);font-weight:800;font-size:clamp(1.1rem,3vw,1.8rem);color:var(--blood);padding:0 .3rem;align-self:center;margin-bottom:3rem}
.bout-meta{font-family:var(--f-stat);font-size:.72rem;color:var(--steel);letter-spacing:.05em;display:block;margin-top:.35rem}
.bout-result{grid-column:1/-1;margin-top:.6rem;padding-top:.6rem;border-top:var(--rule);font-family:var(--f-stat);font-size:.8rem;color:var(--steel-hi)}

.corner{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.corner-photo{
  width:100%;height:clamp(200px,34vw,300px);position:relative;display:flex;justify-content:center;align-items:flex-end;
  color:rgba(138,144,153,.22);
}
.bout--main .corner-photo{height:clamp(280px,52vw,520px)}
.corner-photo img{width:100%;height:100%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}
.corner-photo .sil{height:92%;width:auto}
.corner--red .corner-photo{border-bottom:3px solid var(--blood)}
.corner--blue .corner-photo{border-bottom:3px solid #3c5aa0}
.corner-name{margin-top:.7rem;font-family:var(--f-display);line-height:.9}
.corner-name small{display:block;font-weight:600;font-size:clamp(.8rem,2vw,1.05rem);color:var(--steel-hi);letter-spacing:.04em}
.corner-name b{display:block;font-weight:800;font-size:clamp(1.3rem,4.2vw,2.3rem);text-transform:uppercase}
.bout--main .corner-name b{font-size:clamp(1.7rem,6vw,3.4rem)}

.corner-nick{display:block;margin-top:.35rem;font-family:var(--f-body);font-size:.82rem;font-weight:500;color:var(--steel);letter-spacing:.02em}

/* Archive plate. Past bouts with no photos, set like the old printed card:
   bout number, red name right aligned, vs, blue name left aligned. */
.bout--plate{grid-template-columns:auto 1fr auto 1fr;align-items:center;row-gap:.6rem;padding-block:1rem}
.bout--plate .bout-vs{margin:0;font-size:clamp(.95rem,2.4vw,1.3rem)}
.plate-no{font-family:var(--f-stat);font-weight:700;font-size:clamp(.8rem,2vw,1rem);color:var(--steel-lo);
  letter-spacing:.08em;padding-right:clamp(.25rem,1.5vw,1rem);border-right:var(--rule);align-self:stretch;display:flex;align-items:center}
.plate-name{min-width:0;font-family:var(--f-display);line-height:.95;padding-bottom:.45rem;overflow-wrap:break-word}
.plate-name--red{text-align:right;box-shadow:inset 0 -3px 0 var(--blood)}
.plate-name--blue{text-align:left;box-shadow:inset 0 -3px 0 #3c5aa0}
.plate-name small{display:block;font-weight:600;font-size:clamp(.72rem,1.8vw,.95rem);color:var(--steel-hi);letter-spacing:.04em}
.plate-name b{display:block;font-weight:800;font-size:clamp(1.05rem,3.4vw,1.8rem);text-transform:uppercase}
.bout--plate.bout--main .plate-name b{font-size:clamp(1rem,4.2vw,2.8rem)}
.bout--plate .corner-nick{font-size:.75rem}
@media(max-width:400px){
  .bout--plate{column-gap:.35rem;padding-inline:.6rem}
  .plate-no{font-size:.7rem;padding-right:.35rem}
  .bout--plate .plate-name b,.bout--plate.bout--main .plate-name b{font-size:.98rem}
}

/* a night filmed as one video rather than bout by bout */
.ev-film{max-width:960px}

/* youtube, thumbnail first, player on tap */
.bout-watch{grid-column:1/-1;margin-top:1rem}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:#000;cursor:pointer;overflow:hidden}
.yt img{width:100%;height:100%;object-fit:cover;opacity:.8;transition:opacity .2s ease,transform .4s ease}
.yt:hover img,.yt:focus-visible img{opacity:1;transform:scale(1.03)}
.yt-play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;background:var(--blood);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.yt-play::after{content:"";position:absolute;left:29px;top:22px;border-left:20px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.yt-title{position:absolute;left:0;right:0;bottom:0;padding:2rem 1rem .8rem;text-align:left;
  font-family:var(--f-display);font-weight:800;font-size:clamp(1rem,2.4vw,1.3rem);color:var(--bone);
  background:linear-gradient(to top,rgba(0,0,0,.85),transparent)}
.yt--on{cursor:auto}

/* ---------- quote bumper ---------- */
.bumper{background:var(--ink-deep);padding-block:clamp(4rem,11vw,8rem);border-block:1px solid rgba(138,144,153,.15);position:relative;overflow:hidden}
.bumper blockquote{margin:0;position:relative;width:fit-content;max-width:100%;padding-left:clamp(1.25rem,4vw,3rem);border-left:6px solid var(--blood)}
.bumper blockquote::before{
  content:"\201C";position:absolute;left:-.06em;top:-.22em;z-index:0;pointer-events:none;
  font-family:var(--f-display);font-weight:800;font-size:clamp(14rem,40vw,30rem);line-height:1;color:rgba(193,18,43,.14);
}
.bumper q{
  position:relative;z-index:1;font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,8.5vw,6rem);line-height:.9;
  text-transform:uppercase;letter-spacing:-.015em;quotes:none;display:block;color:var(--bone);max-width:18ch;
}
.bumper q::before,.bumper q::after{content:""}
.bumper cite{
  position:relative;z-index:1;display:inline-block;margin-top:1.75rem;font-family:var(--f-display);font-weight:800;font-style:normal;
  font-size:clamp(1rem,2.4vw,1.35rem);text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--blood);
  padding:.35rem .8rem .25rem;transform:rotate(-2deg);clip-path:polygon(2% 0,100% 6%,98% 100%,0 92%);
}
/* every other quote comes in from the right */
.bumper[data-quote="1"] blockquote,.bumper[data-quote="3"] blockquote{margin-left:auto;border-left:0;border-right:6px solid var(--blood);padding-left:0;padding-right:clamp(1.25rem,4vw,3rem);text-align:right}
.bumper[data-quote="1"] q,.bumper[data-quote="3"] q{margin-left:auto}
.bumper[data-quote="1"] blockquote::before,.bumper[data-quote="3"] blockquote::before{left:auto;right:-.06em;content:"\201D"}
.bumper[data-quote="1"] cite,.bumper[data-quote="3"] cite{transform:rotate(2deg)}
.caret{display:inline-block;width:.06em;min-width:2px;height:.72em;margin-left:.06em;background:var(--blood);vertical-align:baseline;animation:caret .9s step-end infinite}
@keyframes caret{50%{opacity:0}}

/* event covers. Vault home strip thumb, and the event page backdrop */
.vault-thumb{display:block;padding-top:0!important;overflow:hidden}
.vault-thumb img{display:block;width:calc(100% + 3rem);max-width:none;margin:0 -1.5rem 1.1rem;aspect-ratio:16/9;object-fit:cover;filter:saturate(.9) contrast(1.05);transition:transform .4s ease,filter .4s ease}
.vault-thumb:hover img{transform:scale(1.04);filter:none}
.ev-hero{overflow:hidden}
.ev-cover{position:absolute;inset:0;z-index:0}
.ev-cover img{width:100%;height:100%;object-fit:cover;opacity:.55}
.ev-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,9,11,.96) 0,rgba(8,9,11,.75) 45%,rgba(8,9,11,.35) 100%),linear-gradient(to top,var(--ink) 0,transparent 45%)}
.ev-hero .wrap{position:relative;z-index:1}
.ev-hero--cover{padding-block:clamp(5rem,14vw,10rem) clamp(3rem,8vw,5rem)}

/* the Vault's sealed 3DFC 1 */
.vault-sealed{position:relative}
@media(min-width:700px){
  .vault-sealed{grid-column:1/-1;display:grid;grid-template-columns:minmax(260px,.9fr) 1.1fr;column-gap:2rem;align-items:center}
  .vault-sealed .fighter-photo{aspect-ratio:auto!important;height:200px;margin:-1.5rem 0 -1.5rem -1.5rem!important;grid-row:1/4}
  .vault-sealed h3,.vault-sealed .fighter-rec,.vault-sealed p{grid-column:2}
  .vault-sealed h3{align-self:end}
  .vault-sealed p{align-self:start;max-width:34rem}
  .vault-sealed .sealed-tape{transform:translateY(-50%) rotate(-6deg)}
}
.vault-sealed .fighter-photo{overflow:hidden;background:repeating-linear-gradient(135deg,#15181c 0 14px,#101215 14px 28px)}
.sealed-tape{
  position:absolute;left:-12%;right:-12%;top:50%;transform:translateY(-50%) rotate(-14deg);
  background:var(--blood);color:var(--bone);text-align:center;padding:.45rem 0;
  font-family:var(--f-display);font-weight:800;font-size:clamp(1.4rem,3.4vw,2rem);letter-spacing:.35em;text-transform:uppercase;
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}
.vault-sealed h3{color:var(--steel-hi)}

/* ---------- fighter sign up. Half advert, half form ---------- */
.recruit{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1fr;
  background:
    radial-gradient(55% 70% at 22% 78%,rgba(193,18,43,.38),transparent 70%),
    linear-gradient(160deg,#170b0e,#07080a 70%);
  border-block:1px solid rgba(193,18,43,.35);
}
@media(min-width:960px){.recruit{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.recruit-art{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:clamp(300px,78vw,420px);padding-top:2.5rem}
.recruit-art::before{
  content:"FIGHT";position:absolute;left:50%;top:8%;transform:translateX(-50%) skewX(-9deg);
  font-family:var(--f-display);font-weight:800;font-size:clamp(7rem,34vw,20rem);line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:2px rgba(193,18,43,.45);white-space:nowrap;pointer-events:none;
}
.recruit-art img{
  position:relative;width:min(92%,560px);height:auto;max-height:420px;object-fit:contain;object-position:center bottom;
  -webkit-mask-image:linear-gradient(to top,transparent 0,#000 24%);mask-image:linear-gradient(to top,transparent 0,#000 24%);
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.7));
}
@media(min-width:960px){
  .recruit-art{min-height:0;align-items:center;padding:0}
  .recruit-art::before{top:14%}
  .recruit-art img{position:sticky;top:12vh;max-height:78vh;width:min(100%,640px)}
}
.recruit-stamp{
  position:absolute;left:var(--gut);top:1.25rem;z-index:1;transform:rotate(-6deg);
  font-family:var(--f-display);font-weight:800;font-size:clamp(1rem,2.6vw,1.4rem);line-height:.95;text-transform:uppercase;
  color:var(--bone);background:var(--blood);padding:.45rem .7rem .35rem;
  clip-path:polygon(3% 0,100% 5%,97% 100%,0 94%);box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.recruit-copy{position:relative;padding:clamp(1.5rem,5vw,4.5rem) var(--gut) clamp(3rem,7vw,5rem)}
.recruit-copy h2,.recruit-copy h1{font-size:clamp(2.6rem,8vw,5rem);margin:.6rem 0 1rem}
.recruit-copy .lede{max-width:34rem;margin-bottom:2rem}
.recruit-form{max-width:40rem}
.recruit-grid{display:grid;grid-template-columns:1fr;column-gap:1rem}
@media(min-width:560px){.recruit-grid{grid-template-columns:1fr 1fr}}
.pick{border:0;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.pick legend{font-family:var(--f-stat);font-size:.75rem;letter-spacing:.08em;color:var(--steel);margin-bottom:.4rem;padding:0}
.pick label{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pick span{display:block;text-align:center;padding:.85rem .4rem;border:1px solid rgba(138,144,153,.3);background:var(--ink);
  font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,2.6vw,1.2rem);text-transform:uppercase;letter-spacing:.02em;color:var(--steel-hi);transition:background .15s,border-color .15s}
.pick input:checked+span{background:var(--blood);border-color:var(--blood);color:#fff}
.pick input:focus-visible+span{outline:2px solid var(--bone);outline-offset:2px}
.check{display:flex;gap:.7rem;align-items:center;margin:0 0 1rem;cursor:pointer;font-size:.98rem;color:var(--steel-hi)}
.check input{width:1.25rem;height:1.25rem;accent-color:var(--blood);flex:none}
.recruit-target{padding:1rem 1rem .1rem;margin:-.25rem 0 1rem;border-left:3px solid var(--blood);background:rgba(193,18,43,.08)}
.recruit-form .btn{font-size:1.15rem;padding-block:1.05rem}
.recruit-form .form-note{margin-top:.9rem}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* fight.html, the shareable sign up page */
.steps{display:grid;gap:1rem;grid-template-columns:1fr;counter-reset:st}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{list-style:none;padding:1.25rem;background:linear-gradient(160deg,var(--plate-hi),var(--plate));box-shadow:var(--bevel);counter-increment:st}
.steps li::before{content:"0" counter(st);display:block;font-family:var(--f-stat);font-weight:700;color:var(--blood);letter-spacing:.1em;margin-bottom:.6rem}
.steps h3{font-size:1.5rem;margin-bottom:.4rem}
.steps p{margin:0;color:var(--steel-hi);font-size:.95rem}
.share-row{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:2rem}

/* ---------- ad bumper ---------- */
.ad{display:block;background:var(--ink-deep);border-block:1px solid rgba(168,123,74,.3);padding-block:clamp(2.5rem,6vw,4rem);position:relative;overflow:hidden}
.ad-in{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center}
@media(min-width:760px){.ad-in{grid-template-columns:auto 1fr auto}}
.ad-label{font-family:var(--f-stat);font-size:.68rem;letter-spacing:.2em;color:var(--steel-lo);position:absolute;top:.9rem;left:var(--gut)}
.ad-art{display:block;width:clamp(220px,26vw,260px);aspect-ratio:3/4;overflow:hidden;border:1px solid rgba(168,123,74,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.55);background:#0c0a08}
.ad-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.9,.3,1)}
@media (hover:hover){.ad:hover .ad-art img{transform:scale(1.05)}}
.ad-copy h3{font-family:var(--f-display);font-size:clamp(1.6rem,4.5vw,2.6rem);color:var(--bone)}
.ad-copy p{color:var(--steel);margin:.6rem 0 0;font-size:.95rem}
.ad--bronze .ad-copy h3{color:var(--bronze)}
.ad--gold{border-color:rgba(198,164,92,.35)}
.ad--gold .ad-art{border-color:rgba(198,164,92,.4)}
.ad--gold .ad-copy h3{color:#c6a45c}

/* ---------- grids ---------- */
.grid{display:grid;gap:1px;background:rgba(138,144,153,.14)}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cell{background:var(--ink);padding:1.5rem}

/* fighter tile, a tall full body card like a fight night roster */
.roster{display:grid;gap:clamp(.6rem,1.5vw,1rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.fighter{position:relative;overflow:hidden;display:block;text-align:left;
  background:linear-gradient(180deg,#1a1d22 0%,#0c0e10 70%);box-shadow:var(--bevel)}
.fighter-shot{aspect-ratio:9/16;position:relative;display:flex;justify-content:center;align-items:flex-end;
  color:rgba(138,144,153,.2);
  background:radial-gradient(70% 45% at 50% 88%,rgba(193,18,43,.32),transparent 70%)}
.fighter-shot img{position:absolute;inset:4% 0 0;width:100%;height:96%;object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.65));transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.fighter-shot .sil{height:88%;width:auto;margin-bottom:0}
@media (hover:hover){.fighter:hover .fighter-shot img{transform:scale(1.04)}}
.fighter-plate{position:absolute;left:0;right:0;bottom:0;padding:3.5rem 1rem 1rem;
  background:linear-gradient(to top,rgba(8,9,11,.96) 35%,transparent);border-bottom:3px solid var(--blood)}
.fighter-name{font-family:var(--f-display);line-height:.88;margin:0}
.fighter-name small{display:block;font-weight:600;font-size:1rem;color:var(--steel-hi);letter-spacing:.04em}
.fighter-name b{display:block;font-weight:800;font-size:clamp(1.8rem,5vw,2.4rem);text-transform:uppercase}
.fighter-link{display:inline-block;margin-top:.6rem;font-family:var(--f-stat);font-size:.72rem;letter-spacing:.06em;color:var(--blood)}
.fighter-link:hover{color:var(--bone)}
/* the vault still uses this for event posters */
.fighter-photo{aspect-ratio:3/4;background:linear-gradient(170deg,#23282e,#0c0e10);display:grid;place-items:center;position:relative}
.fighter-photo span{font-family:var(--f-display);font-weight:800;font-size:3.5rem;color:rgba(138,144,153,.25)}
.fighter-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fighter-rec{font-family:var(--f-stat);font-size:.78rem;color:var(--steel);margin-top:.25rem;display:block}
.fighter-div{position:absolute;top:0;left:0;font-family:var(--f-stat);font-size:.65rem;letter-spacing:.1em;background:rgba(0,0,0,.72);padding:.3rem .55rem;color:var(--steel-hi)}

/* ---------- tape ---------- */
.tape{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center}
.tape-row{display:contents}
.tape-face{grid-column:1/-1;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:1rem;margin-bottom:1rem}
.tape-face .corner-photo{height:clamp(240px,46vw,440px)}
.tape-val{font-family:var(--f-stat);font-weight:700;font-size:clamp(1rem,3vw,1.5rem);padding:.6rem 0}
.tape-val--r{text-align:right}
.tape-key{font-family:var(--f-stat);font-size:.68rem;letter-spacing:.12em;color:var(--steel-lo);text-align:center;padding:0 .5rem;white-space:nowrap}
.tape-bar{height:4px;background:rgba(138,144,153,.18);position:relative;grid-column:1/-1;margin-bottom:.5rem}
.tape-bar i{position:absolute;inset:0 auto 0 0;background:var(--blood);display:block}

/* ---------- tickets ---------- */
.tier{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;padding:1.5rem;background:linear-gradient(160deg,var(--plate-hi),var(--plate));box-shadow:var(--bevel);margin-bottom:.65rem;border-left:3px solid var(--steel-lo)}
.tier--vip{border-left-color:var(--bronze)}
.tier--top{border-left-color:var(--blood)}
.tier h4{font-size:1.45rem}
.tier ul{margin:.75rem 0 0;padding-left:1.1rem;color:var(--steel);font-size:.9rem;line-height:1.5}
.tier-price{font-family:var(--f-stat);font-weight:700;font-size:clamp(1.5rem,4vw,2.2rem);text-align:right;white-space:nowrap}
.tier-price small{display:block;font-size:.65rem;letter-spacing:.1em;color:var(--steel-lo);font-weight:400}
.tier-buy{margin-top:.9rem}
.qty{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;justify-content:flex-end}
.qty button{width:34px;height:34px;background:var(--plate-hi);border:1px solid rgba(138,144,153,.3);cursor:pointer;font-family:var(--f-stat);font-size:1.1rem}
.qty input{width:48px;height:34px;text-align:center;background:var(--ink);border:1px solid rgba(138,144,153,.3);color:var(--bone);font-family:var(--f-stat)}

/* arena map */
.arena{width:100%;max-width:640px;margin-inline:auto}
.arena .seat{cursor:pointer;transition:fill .15s ease}
.arena .seat:hover{fill:var(--blood)}
.arena .seat[data-state="sold"]{fill:#2a2d31;cursor:not-allowed}
.arena .seat[data-state="picked"]{fill:var(--blood)}

/* cart bar */
.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:700;background:rgba(14,16,18,.96);
  border-top:2px solid var(--blood);padding:.85rem var(--gut) calc(.85rem + var(--safe-b));
  display:flex;align-items:center;gap:1rem;transform:translateY(110%);transition:transform .22s ease;
}
.cartbar[data-open="true"]{transform:none}
.cartbar .stat{margin-right:auto;font-size:1.05rem}

/* ---------- live mode ---------- */
.live-now{padding:clamp(1.5rem,4vw,2.5rem);background:linear-gradient(160deg,#241016,#100a0c);border:1px solid rgba(193,18,43,.4);box-shadow:0 0 60px rgba(193,18,43,.12) inset}
.live-rail{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.live-chip{flex:0 0 auto;padding:.6rem .9rem;background:var(--plate);border:1px solid rgba(138,144,153,.2);font-family:var(--f-stat);font-size:.78rem;white-space:nowrap}
.live-chip[data-state="done"]{opacity:.45}
.live-chip[data-state="now"]{border-color:var(--blood);color:var(--bone);background:rgba(193,18,43,.16)}

/* scorecard */
.scorer{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}
.scorer button{padding:1.1rem .8rem;background:var(--plate-hi);border:1px solid rgba(138,144,153,.28);cursor:pointer;font-family:var(--f-display);font-weight:800;font-size:1.2rem;text-align:left}
.scorer button[aria-pressed="true"]{background:var(--blood);border-color:var(--blood);color:#fff}
.tally{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center;margin-top:1.25rem;padding-top:1rem;border-top:var(--rule)}
.tally-bar{grid-column:1/-1;height:10px;background:var(--plate-hi);display:flex;overflow:hidden}
.tally-bar i{display:block;height:100%;background:var(--blood);transition:width .5s ease}
.tally-bar i:last-child{background:var(--steel-lo)}

/* ---------- forms ---------- */
.field{display:block;margin-bottom:1rem}
.field span{display:block;font-family:var(--f-stat);font-size:.75rem;letter-spacing:.08em;color:var(--steel);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem .9rem;background:var(--ink);border:1px solid rgba(138,144,153,.3);
  color:var(--bone);font:400 1rem var(--f-body);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--blood);outline:none}
.form-note{font-size:.82rem;color:var(--steel-lo)}
.form-msg{padding:.9rem 1rem;border-left:3px solid var(--blood);background:rgba(193,18,43,.1);font-size:.9rem;margin-bottom:1rem}

/* ---------- footer ---------- */
.site-foot{background:var(--ink-deep);border-top:1px solid rgba(138,144,153,.2);padding-block:clamp(3rem,7vw,4.5rem) 2rem}
.foot-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-bottom:3rem}
.foot-grid h5{font-family:var(--f-display);font-weight:700;font-size:1.15rem;margin:0 0 .9rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot-grid a{color:var(--steel);font-size:.92rem}
.foot-grid a:hover{color:var(--bone)}
.foot-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.75rem;border-top:var(--rule);font-size:.8rem;color:var(--steel-lo)}
.foot-base a{color:var(--steel)}

/* ---------- utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack-sm > * + *{margin-top:.75rem}
.stack > * + *{margin-top:1.5rem}
.split{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media(min-width:880px){.split{grid-template-columns:1.15fr .85fr}.split--even{grid-template-columns:1fr 1fr}}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.center{text-align:center}
.hide-sm{display:none}
@media(min-width:760px){.hide-sm{display:block}}

/* ================================================================
   Fight poster layer. Headings are billed like bouts, copy sits
   beside a title instead of under it, and each section has its own
   shape: a ticket stub, a broadcast screen, a ladder, a poster wall.
   ================================================================ */

/* round numbers. Every section head is numbered in order down the page */
main{counter-reset:rd}
.section-head::before,.duo-head::before{
  counter-increment:rd;content:counter(rd,decimal-leading-zero);
  font-family:var(--f-stat);font-weight:700;font-size:clamp(.78rem,1.6vw,.95rem);letter-spacing:.08em;line-height:1;
  color:#fff;background:var(--blood);padding:.42rem .5rem .36rem;align-self:start;margin-top:.15em;
  transform:rotate(-5deg);clip-path:polygon(4% 0,100% 6%,96% 100%,0 94%);
}
.section-head--plain::before{content:none}
.section-head--plain > h2{grid-column:1/-1}

/* a line of copy that sits beside a heading, not under it */
.head-aside{margin:0;font-size:clamp(.98rem,1.6vw,1.08rem);line-height:1.55;color:var(--steel-hi);border-left:2px solid var(--blood);padding-left:1rem;max-width:26rem}
.head-aside b{color:var(--bone);font-weight:600}
@media(min-width:880px){.section-head > .head-aside{justify-self:start}}
a.section-note{color:var(--steel-hi);border-bottom:1px solid rgba(193,18,43,.6);padding-bottom:.15rem;transition:color .15s,border-color .15s}
a.section-note:hover{color:var(--bone);border-color:var(--blood)}

/* ghost word. A huge outlined word behind a section, cropped by the edge */
.ghost{position:relative;overflow:hidden}
.ghost::after{
  content:attr(data-ghost);position:absolute;z-index:0;right:-.06em;top:-.12em;pointer-events:none;white-space:nowrap;
  font-family:var(--f-display);font-weight:800;font-size:clamp(7rem,26vw,22rem);line-height:.8;text-transform:uppercase;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.5px rgba(193,18,43,.2);transform:skewX(-9deg);
}
.ghost > .wrap{position:relative;z-index:1}
.ghost--low::after{top:auto;bottom:-.14em}
.ghost--left::after{right:auto;left:-.06em}

/* section grounds, so the page does not run one flat colour top to bottom */
.section--black{background:#050607}
.section--blood{background:radial-gradient(70% 90% at 15% 100%,rgba(193,18,43,.28),transparent 70%),linear-gradient(160deg,#150a0d,#07080a 75%)}

/* ---------- inner page heads ---------- */
.page-head{
  position:relative;overflow:hidden;padding:clamp(4.5rem,12vw,8.5rem) 0 clamp(3rem,7vw,5rem);
  background:
    linear-gradient(100deg,rgba(8,9,11,.96) 20%,rgba(8,9,11,.7) 60%,rgba(8,9,11,.5)),
    linear-gradient(to top,var(--ink),transparent 45%),
    #000 url("../img/bg-shards-2048.webp") 70% 40%/cover no-repeat;
  clip-path:polygon(0 0,100% 0,100% calc(100% - clamp(18px,3vw,42px)),0 100%);
  margin-bottom:calc(-1 * clamp(18px,3vw,42px));
}
.page-head::after{
  content:attr(data-ghost);position:absolute;right:-.05em;bottom:-.1em;pointer-events:none;white-space:nowrap;
  font-family:var(--f-display);font-weight:800;font-size:clamp(8rem,30vw,26rem);line-height:.78;text-transform:uppercase;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.5px rgba(233,228,219,.07);transform:skewX(-9deg);
}
.page-head-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:1.4rem}
.page-tag{
  display:inline-flex;align-items:center;gap:.7rem;margin:0;width:fit-content;
  font-family:var(--f-stat);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-hi);
}
.page-tag::before{content:"";width:2.2rem;height:3px;background:var(--blood)}
.page-title{
  font-size:clamp(3.6rem,15vw,10.5rem);line-height:.8;letter-spacing:-.025em;margin:0;
  transform:skewX(-9deg);transform-origin:left bottom;
  text-shadow:.05em .05em 0 var(--blood-deep),0 .12em .5em rgba(0,0,0,.6);
}
.page-title em{font-style:normal;color:var(--blood);text-shadow:.05em .05em 0 #000}
.page-aside{margin:0;max-width:30rem;font-size:clamp(1rem,1.8vw,1.15rem);line-height:1.55;color:var(--steel-hi);
  border-left:3px solid var(--blood);padding:.2rem 0 .2rem 1.1rem}
.page-aside a{color:var(--bone);border-bottom:1px solid var(--blood)}
.page-head .hero-actions{margin-top:.25rem}
@media(min-width:900px){
  .page-head-in{grid-template-columns:minmax(0,1fr) minmax(16rem,26rem);column-gap:clamp(2rem,5vw,4.5rem);align-items:end}
  .page-tag{grid-column:1/-1}
  .page-title{grid-column:1}
  .page-aside,.page-head-side{grid-column:2;margin-bottom:.4rem}
}
.page-head-side{display:grid;gap:1.1rem}
.page-head--short{padding-bottom:clamp(2rem,5vw,3rem)}
.page-head--short .page-title{font-size:clamp(2.8rem,10vw,6.5rem)}

/* ---------- duo. Big heading on one side, the copy and the form on the other ---------- */
.duo{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem 1rem;align-items:start}
.duo-head{display:contents}
.duo-head h2{grid-column:2;font-size:clamp(2.6rem,8vw,5.6rem)}
.duo-body{grid-column:1/-1;margin-top:.6rem}
.duo-body > .lede:first-child{border-left:2px solid var(--blood);padding-left:1rem}
@media(min-width:900px){
  .duo{grid-template-columns:auto minmax(0,.95fr) minmax(0,1.05fr);column-gap:1.1rem}
  .duo-body{padding-left:clamp(1rem,3vw,3rem)}
  .duo-head h2{position:sticky;top:110px}
  .duo-body{grid-column:3;margin-top:0}
}

/* ---------- ticker. A slanted strip of billing between sections ---------- */
.ticker{position:relative;z-index:3;overflow:hidden;background:var(--blood);color:#fff;border-block:2px solid #000;
  transform:rotate(-1.4deg);margin:-1.4rem -3vw 0;box-shadow:0 14px 40px rgba(0,0,0,.55)}
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker-track span{font-family:var(--f-display);font-weight:800;font-size:clamp(1.15rem,2.8vw,1.75rem);text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap;padding:.55rem 0 .45rem}
.ticker-track span::after{content:"";display:inline-block;width:.42em;height:.42em;background:#000;transform:rotate(45deg);margin:0 1.05em;vertical-align:.14em}
.ticker--dark{background:#000;color:var(--steel-hi);border-color:rgba(193,18,43,.6);transform:rotate(1deg);margin:0 -3vw}
.ticker--dark .ticker-track{animation-direction:reverse;animation-duration:55s}
.ticker--dark .ticker-track span::after{background:var(--blood)}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- home: first access as a ticket stub ---------- */
.stub{position:relative;display:grid;grid-template-columns:1fr;background:
    repeating-linear-gradient(94deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
    linear-gradient(150deg,#1d1114,#0d0e10 60%);
  border:1px solid rgba(193,18,43,.4);box-shadow:0 30px 70px rgba(0,0,0,.55),var(--bevel)}
@media(min-width:900px){.stub{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr)}}
.stub-main{position:relative;padding:clamp(1.5rem,4vw,3rem);overflow:hidden}
.stub-main::after{ /* barcode down the edge */
  content:"";position:absolute;right:clamp(1rem,2.5vw,1.8rem);top:1.5rem;bottom:1.5rem;width:26px;opacity:.5;
  background:repeating-linear-gradient(180deg,var(--bone) 0 2px,transparent 2px 5px,var(--bone) 5px 6px,transparent 6px 9px,var(--bone) 9px 12px,transparent 12px 14px);
}
.stub-top{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-family:var(--f-stat);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-bottom:1.25rem;padding-right:3rem}
.stub-top b{color:var(--blood);font-weight:700}
.stub-title{font-size:clamp(3rem,10vw,6.5rem);line-height:.82;padding-right:3rem;margin-bottom:1.5rem}
.stub-title span{display:block;color:var(--blood)}
.stub-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;margin:0 3rem 1.5rem 0;border-top:1px dashed rgba(138,144,153,.35)}
@media(min-width:1100px){.stub-fields{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stub-fields div{padding:.8rem .8rem .8rem 0;border-bottom:1px dashed rgba(138,144,153,.35)}
.stub-fields dt{font-family:var(--f-stat);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-lo)}
.stub-fields dd{margin:.2rem 0 0;font-family:var(--f-display);font-weight:800;font-size:clamp(1.15rem,2.6vw,1.5rem);text-transform:uppercase;line-height:1}
.stub-small{font-size:.9rem;color:var(--steel);max-width:38rem;margin:0;padding-right:3rem}
.stub-tear{position:relative;padding:clamp(1.5rem,4vw,3rem);border-top:2px dashed rgba(138,144,153,.35);background:rgba(0,0,0,.28)}
.stub-tear::before,.stub-tear::after{content:"";position:absolute;width:28px;height:28px;border-radius:50%;background:var(--ink);border:1px solid rgba(193,18,43,.4)}
.stub-tear::before{left:-15px;top:-15px}.stub-tear::after{right:-15px;top:-15px}
@media(min-width:900px){
  .stub-tear{border-top:0;border-left:2px dashed rgba(138,144,153,.35)}
  .stub-tear::before{left:-15px;top:-15px}.stub-tear::after{left:-15px;right:auto;top:auto;bottom:-15px}
}
.stub-tear h3{font-size:clamp(1.5rem,3.2vw,2rem);text-transform:uppercase;margin-bottom:1.1rem}

/* ---------- home: the card before it is announced ---------- */
.bout--tba{grid-template-columns:1fr auto 1fr;position:relative;overflow:hidden}
.bout--tba .corner-photo{color:rgba(138,144,153,.16)}
/* open slot: stand in fighters in guard, faces in shadow, lit from their own corner */
.bout--tba .corner--red .corner-photo{background:radial-gradient(ellipse 42% 58% at 50% 62%,rgba(193,18,43,.26),transparent 72%)}
.bout--tba .corner--blue .corner-photo{background:radial-gradient(ellipse 42% 58% at 50% 62%,rgba(60,90,160,.26),transparent 72%)}
/* stand ins sit on the floor of the card: no dark drop shadow halo, a soft
   contact shadow under the feet, and blue turned to face red across the ring */
.bout--tba .corner-photo img{filter:none;position:relative;z-index:1}
.bout--tba .corner-photo::after{content:"";position:absolute;left:22%;right:22%;bottom:-2px;height:18px;z-index:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,.55),transparent 70%)}
.bout--tba .corner--blue .corner-photo img{transform:scaleX(-1)}
.bout--tba .corner-name small{color:var(--steel);letter-spacing:.14em;text-transform:uppercase;font-family:var(--f-stat);font-size:.7rem}
.bout--tba .corner-photo{height:clamp(220px,36vw,380px)}
.card-tba-note{grid-column:1/-1;margin:1rem auto 0;text-align:center;color:var(--steel-hi);font-size:.95rem}

/* ---------- home: pay per view as a broadcast screen ---------- */
.screen{position:relative;overflow:hidden;min-height:clamp(380px,56vw,560px);display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1rem,2.5vw,1.6rem);border:1px solid rgba(195,201,208,.18);box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 120px rgba(0,0,0,.8);
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),
    radial-gradient(60% 70% at 50% 45%,transparent,rgba(0,0,0,.75)),
    #000 url("../img/bg-shards-2048.webp") center/cover no-repeat}
.screen::before{ /* corner brackets */
  content:"";position:absolute;inset:clamp(.6rem,1.5vw,1rem);pointer-events:none;
  background:
    linear-gradient(var(--bone),var(--bone)) left top/22px 2px,linear-gradient(var(--bone),var(--bone)) left top/2px 22px,
    linear-gradient(var(--bone),var(--bone)) right top/22px 2px,linear-gradient(var(--bone),var(--bone)) right top/2px 22px,
    linear-gradient(var(--bone),var(--bone)) left bottom/22px 2px,linear-gradient(var(--bone),var(--bone)) left bottom/2px 22px,
    linear-gradient(var(--bone),var(--bone)) right bottom/22px 2px,linear-gradient(var(--bone),var(--bone)) right bottom/2px 22px;
  background-repeat:no-repeat;opacity:.55}
.screen-top{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.4rem .6rem}
.screen-bug{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-stat);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--blood);color:#fff;padding:.4rem .7rem}
.screen-bug .dot{background:#fff}
.screen-mark{height:34px;width:auto;opacity:.85}
.screen-mid{position:relative;padding:0 .6rem}
.screen-big{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(2.6rem,9vw,6.4rem);line-height:.82;margin:0 0 1.4rem;max-width:none;
  transform:skewX(-9deg);transform-origin:left bottom;text-shadow:.05em .05em 0 var(--blood-deep),0 .1em .5em rgba(0,0,0,.7)}
.screen-big span{display:block}
.screen-big span:nth-child(2){color:var(--blood);text-shadow:.05em .05em 0 #000}
.screen-lower{position:relative;display:grid;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media(min-width:760px){.screen-lower{grid-template-columns:repeat(3,1fr)}}
.screen-lower li{display:flex;gap:.7rem;align-items:center;padding:.7rem .9rem;background:rgba(8,9,11,.86);border-top:2px solid var(--blood);
  font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.8vw,1.15rem);text-transform:uppercase;letter-spacing:.02em;color:var(--bone)}
.screen-lower li + li{border-left:1px solid rgba(138,144,153,.18)}
.screen-lower small{font-family:var(--f-stat);font-size:.68rem;letter-spacing:.12em;color:var(--blood);font-weight:700}
.venue-line{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;margin-top:1.25rem;padding:1.1rem 1.25rem;
  background:linear-gradient(90deg,rgba(168,123,74,.14),transparent);border-left:3px solid var(--bronze)}
.venue-line p{margin:0;color:var(--steel-hi);max-width:48rem}
.venue-line b{font-family:var(--f-display);font-weight:800;font-size:1.25rem;text-transform:uppercase;color:var(--bronze);margin-right:.5rem;letter-spacing:.02em}

/* ---------- home: highlights, one big and two stacked ---------- */
.reel{display:grid;gap:clamp(.5rem,1.2vw,.9rem);grid-template-columns:1fr}
@media(min-width:880px){
  .reel{grid-template-columns:1.7fr 1fr}
  .reel > :first-child{grid-row:span 2}
  .reel > :first-child .yt{height:100%;aspect-ratio:auto;min-height:100%}
  .reel > :first-child .yt-title{font-size:clamp(1.4rem,2.8vw,2.2rem)}
}
.reel-item{position:relative;display:flex;flex-direction:column;background:#000;box-shadow:var(--bevel)}
.reel-item .yt{flex:1}
.reel-from{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;font-family:var(--f-stat);font-size:.72rem;letter-spacing:.08em;color:var(--steel);border-top:1px solid rgba(138,144,153,.14)}
.reel-from:hover{color:var(--bone)}
.reel-from b{color:var(--blood);font-weight:700}
.reel-empty{padding:2rem;background:var(--plate);color:var(--steel)}

/* ---------- home: the Gauntlet, poster lines and a ladder ---------- */
.gauntlet{display:grid;grid-template-columns:1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:900px){.gauntlet{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
.shout{margin:0 0 1.75rem;font-family:var(--f-display);font-weight:800;text-transform:uppercase;line-height:.84;font-size:clamp(3rem,10vw,7rem);letter-spacing:-.02em;
  transform:skewX(-9deg);transform-origin:left bottom}
.shout span{display:block}
.shout span:nth-child(2){color:transparent;-webkit-text-stroke:2px var(--bone)}
.shout span:nth-child(3){color:var(--blood)}
.small-print{font-size:.98rem;color:var(--steel-hi);max-width:34rem;margin-bottom:1.6rem}
.ladder{list-style:none;margin:0;padding:0;counter-reset:rung;position:relative}
.ladder::before{content:"";position:absolute;left:1.55rem;top:0;bottom:0;width:2px;background:linear-gradient(var(--blood),rgba(193,18,43,.1))}
.ladder li{position:relative;display:grid;grid-template-columns:3.1rem 1fr auto;align-items:center;gap:1rem;padding:.85rem 1rem .85rem 0;
  counter-increment:rung;border-bottom:1px solid rgba(138,144,153,.14)}
.ladder li::before{content:counter(rung,decimal-leading-zero);position:relative;z-index:1;display:grid;place-items:center;width:3.1rem;height:3.1rem;
  font-family:var(--f-stat);font-weight:700;font-size:.95rem;background:var(--ink);border:1px solid rgba(138,144,153,.3);color:var(--steel-hi)}
.ladder li:first-child::before{background:var(--blood);border-color:var(--blood);color:#fff;transform:rotate(-4deg)}
.ladder b{font-family:var(--f-display);font-weight:800;font-size:clamp(1.2rem,2.6vw,1.6rem);text-transform:uppercase;letter-spacing:.01em}
.ladder li:not(:first-child) b{color:var(--steel-lo)}
.ladder small{font-family:var(--f-stat);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.ladder li:first-child small{color:var(--blood)}

/* ---------- home: the Vault as a poster wall ---------- */
.vcount{display:flex;flex-wrap:wrap;gap:0;margin:0 0 clamp(1.5rem,4vw,2.5rem);border-block:1px solid rgba(138,144,153,.16)}
.vcount div{flex:1 1 9rem;padding:1rem 1.2rem 1rem 0}
.vcount div + div{padding-left:1.2rem;border-left:1px solid rgba(138,144,153,.16)}
.vcount b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(2.8rem,8vw,5rem);line-height:.85;color:var(--bone)}
.vcount div:first-child b{color:var(--blood)}
.vcount span{font-family:var(--f-stat);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.posters{display:grid;gap:clamp(.5rem,1.2vw,.9rem);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.posters{grid-template-columns:repeat(4,minmax(0,1fr))}}
.poster{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:#000;box-shadow:var(--bevel)}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.1) brightness(.8);transition:transform .5s cubic-bezier(.2,.9,.3,1),filter .4s ease}
.poster::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 8%,transparent 55%)}
@media (hover:hover){.poster:hover img{transform:scale(1.06);filter:none}}
.poster-no{position:absolute;z-index:1;right:.5rem;top:.1rem;font-family:var(--f-display);font-weight:800;font-size:clamp(4.5rem,12vw,8rem);line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(233,228,219,.75);transform:skewX(-9deg)}
.poster-cap{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:1rem}
.poster-cap h4{font-size:clamp(1.3rem,2.6vw,1.8rem);text-transform:uppercase}
.poster-cap span{display:block;margin-top:.35rem;font-family:var(--f-stat);font-size:.7rem;letter-spacing:.08em;color:var(--steel-hi)}
.poster-cap span b{color:var(--blood);font-weight:700}

/* grids that still use plain cells get a bit more bite */
.cell h4{text-transform:uppercase}

/* ---------- lists that used to sit in a grey box under a small heading ---------- */
.duo-body > * + *{margin-top:1.25rem}
.duo-body > .hero-actions{margin-top:1.75rem}
.rundown{border-top:2px solid var(--blood);margin-top:1.75rem}
.rundown-label{margin:0;padding:.75rem 0 .35rem;font-family:var(--f-stat);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blood)}
.rundown ul{list-style:none;margin:0;padding:0;counter-reset:rl}
.rundown li{counter-increment:rl;display:grid;grid-template-columns:2.4rem 1fr;align-items:baseline;gap:.5rem;padding:.8rem 0;border-bottom:1px solid rgba(138,144,153,.16);
  font-family:var(--f-display);font-weight:700;font-size:clamp(1.1rem,2.2vw,1.35rem);text-transform:uppercase;letter-spacing:.01em;line-height:1.1;color:var(--bone)}
.rundown li::before{content:counter(rl,decimal-leading-zero);font-family:var(--f-stat);font-size:.75rem;color:var(--steel-lo);letter-spacing:.08em}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0;max-width:none}
@media(min-width:760px){.checklist{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
.checklist li{position:relative;padding:.95rem 0 .95rem 2rem;border-bottom:1px solid rgba(138,144,153,.16);color:var(--steel-hi)}
.checklist li::before{content:"";position:absolute;left:0;top:1.25rem;width:.9rem;height:.9rem;background:var(--blood);clip-path:polygon(0 40%,38% 75%,100% 0,100% 28%,38% 100%,0 68%)}

/* ---------- rules: two codes set as red corner and blue corner ---------- */
.versus{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:900px){.versus{grid-template-columns:1fr auto 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:stretch}}
.versus-side{position:relative;padding:clamp(1.5rem,3.5vw,2.5rem);box-shadow:var(--bevel);overflow:hidden}
.versus-side--red{background:radial-gradient(80% 60% at 0 100%,rgba(193,18,43,.26),transparent 70%),linear-gradient(160deg,var(--plate-hi),var(--plate));border-top:4px solid var(--blood)}
.versus-side--blue{background:radial-gradient(80% 60% at 100% 100%,rgba(60,90,160,.26),transparent 70%),linear-gradient(160deg,var(--plate-hi),var(--plate));border-top:4px solid #3c5aa0}
.versus-side h2{margin-bottom:1.5rem}
.versus-side p{color:var(--steel-hi)}
.versus-side .stack-sm p{padding-left:1rem;border-left:2px solid rgba(138,144,153,.25)}
.versus-corner{margin:0 0 .6rem;font-family:var(--f-stat);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.versus-side--red .versus-corner{color:var(--blood)}
.versus-side--blue .versus-corner{color:#6f8fd8}
.versus-vs{align-self:center;justify-self:center;font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,5vw,3.6rem);color:var(--blood);text-transform:uppercase;transform:skewX(-9deg)}

/* ---------- violence ---------- */
/* headings slam in when they arrive. .hit-ready is only ever added by app.js,
   so with no JS every heading simply shows */
.hit-ready{opacity:0;position:relative;z-index:0}
.hit{animation:slam .6s cubic-bezier(.2,.9,.3,1) both}
.hit::after{
  content:"";position:absolute;z-index:-1;left:-4%;right:-4%;top:48%;height:.22em;
  background:var(--blood);transform-origin:left center;
  animation:slash .7s cubic-bezier(.3,.9,.3,1) both;
}
@keyframes slam{
  0%{opacity:0;transform:translate3d(-6%,0,0) scale(1.9);filter:blur(6px)}
  45%{opacity:1;transform:scale(.95);filter:blur(0)}
  60%{transform:translate3d(5px,-3px,0) scale(1.01)}
  75%{transform:translate3d(-3px,2px,0)}
  100%{opacity:1;transform:none}
}
@keyframes slash{
  0%{transform:skewX(-24deg) scaleX(0);opacity:1}
  45%{transform:skewX(-24deg) scaleX(1);opacity:.9}
  100%{transform:skewX(-24deg) scaleX(1) translateX(12%);opacity:0}
}

/* buttons twitch when you square up to them */
@media (hover:hover){.btn:hover{animation:twitch .28s linear 1}}
@keyframes twitch{
  0%,100%{transform:none}
  20%{transform:translate3d(-2px,1px,0)}
  40%{transform:translate3d(2px,-1px,0)}
  60%{transform:translate3d(-1px,-1px,0)}
  80%{transform:translate3d(1px,1px,0)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.001ms !important;transition-delay:0s !important}
}

/* ---------- tickets ----------
   Rendered by assets/js/ticket.js. Flat print, no bevels, no perspective.
   Everything inside is sized in container units off .tkt-wrap, so the
   ticket keeps its proportions at any width. Landscape from 720px of
   container, portrait (stub underneath, big QR) below that.
   One stock per tier: floor, vip, vvip, ringside. Change a stock by its
   custom properties only. */
.tkt-wrap{container-type:inline-size;width:100%}
.tkt{
  --tk-bg:#060607; --tk-ink:var(--bone); --tk-dim:rgba(233,228,219,.52);
  --tk-line:rgba(233,228,219,.16); --tk-acc:var(--blood); --tk-stub:#0b0c0e;
  --tk-chip:var(--steel-hi); --tk-chip-ink:#060607; --tk-foil:none;
  --tk-r:2.1cqi; --tk-cut:1.5cqi; --tk-tear:77%;
  position:relative;display:grid;grid-template-columns:var(--tk-tear) 1fr;
  aspect-ratio:2.6/1;color:var(--tk-ink);background:var(--tk-bg);
  font-family:var(--f-body);line-height:1.1;isolation:isolate;
  clip-path:polygon(var(--tk-cut) 0,calc(100% - var(--tk-cut)) 0,100% var(--tk-cut),100% calc(100% - var(--tk-cut)),calc(100% - var(--tk-cut)) 100%,var(--tk-cut) 100%,0 calc(100% - var(--tk-cut)),0 var(--tk-cut));
  -webkit-mask:
    radial-gradient(circle var(--tk-r) at 0 50%,#0000 98%,#000) ,
    radial-gradient(circle var(--tk-r) at 100% 50%,#0000 98%,#000),
    radial-gradient(circle calc(var(--tk-r) * .7) at var(--tk-tear) 0,#0000 98%,#000),
    radial-gradient(circle calc(var(--tk-r) * .7) at var(--tk-tear) 100%,#0000 98%,#000);
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(circle var(--tk-r) at 0 50%,#0000 98%,#000),
    radial-gradient(circle var(--tk-r) at 100% 50%,#0000 98%,#000),
    radial-gradient(circle calc(var(--tk-r) * .7) at var(--tk-tear) 0,#0000 98%,#000),
    radial-gradient(circle calc(var(--tk-r) * .7) at var(--tk-tear) 100%,#0000 98%,#000);
  mask-composite:intersect;
  transition:background-color .35s ease,color .35s ease;
}
.tkt-main{position:relative;padding:2.8cqi 3.4cqi 2.3cqi 4.4cqi;display:grid;grid-template-rows:auto 1fr auto;gap:1cqi;overflow:hidden;min-height:0}
.tkt-main::before{content:"";position:absolute;inset:0;background:var(--tk-foil);z-index:-1;pointer-events:none}
/* the fist comes through from the tear, fading out before it reaches the bill */
.tkt-art{position:absolute;inset:0 0 0 44%;z-index:-1;pointer-events:none;
  background:url("../img/intro-impact.webp") 42% 45%/cover no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 38%,#000 90%,rgba(0,0,0,.5)),linear-gradient(180deg,#000 62%,transparent 86%);
  -webkit-mask-composite:source-in;
          mask:linear-gradient(90deg,transparent 0,#000 38%,#000 90%,rgba(0,0,0,.5)),linear-gradient(180deg,#000 62%,transparent 86%);
          mask-composite:intersect;
  filter:saturate(.9) contrast(1.05)}
.tkt-brand{display:flex;align-items:center;gap:1.5cqi;position:relative}
.tkt-mark{width:6.4cqi;height:6.4cqi;flex:none}
.tkt-mark .tkm-side{fill:var(--tk-ink)}
.tkt-mark .tkm-mid{fill:var(--tk-acc)}
.tkt-event{display:block;font-family:var(--f-display);font-weight:800;font-size:4.4cqi;letter-spacing:.14em;line-height:.9;text-transform:uppercase}
.tkt-sub{display:block;margin-top:.7cqi;font-family:var(--f-stat);font-size:1.15cqi;letter-spacing:.3em;text-transform:uppercase;color:var(--tk-dim)}
.tkt-class{margin-left:auto;align-self:flex-start;font-family:var(--f-stat);font-weight:700;font-size:1.25cqi;letter-spacing:.28em;text-transform:uppercase;
  padding:.55cqi 1cqi .5cqi 1.25cqi;background:var(--tk-chip);color:var(--tk-chip-ink)}
.tkt-bill{align-self:center;width:56%;display:grid;gap:.6cqi}
.tkt-rule{display:flex;align-items:center;gap:1.2cqi;margin:0;max-width:none;font-family:var(--f-display);font-weight:800;font-size:1.5cqi;letter-spacing:.3em;text-transform:uppercase;color:var(--tk-acc)}
.tkt-rule::before,.tkt-rule::after{content:"";flex:1;height:max(1px,.18cqi);background:currentColor;opacity:.85}
.tkt-rule--vs{font-size:2.2cqi;letter-spacing:.1em}
.tkt-name{display:block;font-family:var(--f-display);font-weight:800;font-size:3.5cqi;line-height:1;letter-spacing:.02em;text-transform:uppercase;
  padding:.75cqi 1.4cqi;border:max(1px,.14cqi) solid var(--tk-line);background:rgba(0,0,0,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkt-name--sealed{position:relative;height:5cqi;padding:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(-45deg,rgba(233,228,219,.07) 0 .35cqi,transparent .35cqi 1.1cqi),rgba(0,0,0,.45)}
.tkt-name--sealed span{font-family:var(--f-stat);font-weight:600;font-size:1.2cqi;letter-spacing:.3em;text-transform:uppercase;color:var(--tk-dim);background:var(--tk-bg);padding:.3cqi 1cqi}
.tkt-belt{margin:.3cqi 0 0;font-family:var(--f-stat);font-size:1.2cqi;letter-spacing:.24em;text-transform:uppercase;color:var(--tk-dim)}
.tkt-belt span{color:var(--tk-ink);border:max(1px,.12cqi) solid var(--tk-acc);padding:.3cqi .8cqi;margin-right:.6cqi}
.tkt-meta{display:grid;grid-template-columns:1.2fr 2fr .7fr 1.2fr .9fr;margin:0;border-top:max(1px,.14cqi) solid var(--tk-line);padding-top:1.1cqi;position:relative}
.tkt-f{padding:0 1.2cqi;border-left:max(1px,.14cqi) solid var(--tk-line);min-width:0}
.tkt-f:first-child{padding-left:0;border-left:0}
.tkt-f dt{font-family:var(--f-stat);font-size:1cqi;letter-spacing:.3em;text-transform:uppercase;color:var(--tk-acc);margin-bottom:.45cqi}
.tkt-f dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:1.85cqi;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tkt-stub{position:relative;background:var(--tk-stub);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.9cqi;padding:2.6cqi 2cqi}
/* perforation: round holes, not a dashed border */
.tkt-stub::before{content:"";position:absolute;left:-.25cqi;top:2.4cqi;bottom:2.4cqi;width:.5cqi;
  background:radial-gradient(circle,var(--tk-line) 45%,transparent 50%) 0 0/.5cqi 1.3cqi repeat-y}
.tkt-mark--stub{width:5cqi;height:5cqi}
.tkt-stub .tkt-event{font-size:2.6cqi}
.tkt-class--stub{margin:0;align-self:center;font-size:1.1cqi}
.tkt-qr{width:13.5cqi;aspect-ratio:1;display:grid;place-items:center;margin-top:.6cqi;position:relative}
.tkt-qr-code{width:100%;height:100%;display:block}
.tkt-qr--empty{border:max(1px,.14cqi) solid var(--tk-line);background:
  linear-gradient(var(--tk-acc),var(--tk-acc)) 0 0/1.8cqi .25cqi,linear-gradient(var(--tk-acc),var(--tk-acc)) 0 0/.25cqi 1.8cqi,
  linear-gradient(var(--tk-acc),var(--tk-acc)) 100% 0/1.8cqi .25cqi,linear-gradient(var(--tk-acc),var(--tk-acc)) 100% 0/.25cqi 1.8cqi,
  linear-gradient(var(--tk-acc),var(--tk-acc)) 0 100%/1.8cqi .25cqi,linear-gradient(var(--tk-acc),var(--tk-acc)) 0 100%/.25cqi 1.8cqi,
  linear-gradient(var(--tk-acc),var(--tk-acc)) 100% 100%/1.8cqi .25cqi,linear-gradient(var(--tk-acc),var(--tk-acc)) 100% 100%/.25cqi 1.8cqi;
  background-repeat:no-repeat}
.tkt-qr--empty span{font-family:var(--f-stat);font-size:1.05cqi;letter-spacing:.24em;text-transform:uppercase;color:var(--tk-dim);padding:0 1.6cqi;line-height:1.5}
.tkt-no{margin:0;font-family:var(--f-stat);font-size:1cqi;letter-spacing:.22em;text-transform:uppercase;color:var(--tk-dim)}
.tkt-stamp{position:absolute;top:50%;left:38%;transform:translate(-50%,-50%) rotate(-12deg);margin:0;
  font-family:var(--f-display);font-weight:800;font-size:9cqi;letter-spacing:.1em;text-transform:uppercase;color:var(--blood);
  border:.5cqi solid var(--blood);padding:0 2cqi;opacity:.9;mix-blend-mode:screen}
.tkt--used .tkt-qr{opacity:.25}

/* stocks. Floor is the default above */
.tkt--vip{--tk-acc:#c0915a;--tk-line:rgba(192,145,90,.34);--tk-chip:#c0915a;--tk-dim:rgba(233,228,219,.56)}
.tkt--vvip{--tk-acc:#d8b27c;--tk-line:rgba(216,178,124,.42);--tk-stub:#100d09;--tk-chip-ink:#140f08;
  --tk-chip:linear-gradient(100deg,#9c7240,#f0d3a0 45%,#b98a55 70%,#e6c28c);
  --tk-foil:linear-gradient(90deg,#9c7240,#f0d3a0 35%,#b98a55 60%,#e6c28c) 0 0/100% .45cqi no-repeat,
            linear-gradient(90deg,#9c7240,#f0d3a0 35%,#b98a55 60%,#e6c28c) 0 100%/100% .45cqi no-repeat}
.tkt--ringside{--tk-bg:#3b0510;--tk-acc:var(--bone);--tk-ink:#fff;--tk-dim:rgba(255,236,236,.62);
  --tk-line:rgba(255,236,236,.26);--tk-stub:var(--blood);--tk-chip:var(--bone);--tk-chip-ink:#3b0510;
  --tk-foil:linear-gradient(115deg,#1d0206 0,#3b0510 38%,#7a0c1d 100%)}
.tkt--ringside .tkt-art{mix-blend-mode:screen;filter:grayscale(1) contrast(1.25) brightness(.95)}
.tkt--ringside .tkt-mark .tkm-mid{fill:#fff}
.tkt--ringside .tkt-mark .tkm-side{fill:rgba(255,255,255,.55)}
.tkt--ringside .tkt-name{background:rgba(0,0,0,.28)}
.tkt--teaser .tkt-stub{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0 .4cqi,transparent .4cqi 1.2cqi),var(--tk-stub)}

/* portrait under 720px of room: stub drops under the main, QR gets big for the door */
@container (max-width:719px){
  /* portrait: each half carries its own two notches, so they always sit on the tear */
  .tkt{--tk-r:4.5cqi;--tk-cut:3.2cqi;grid-template-columns:1fr;grid-template-rows:auto auto;aspect-ratio:auto;
    -webkit-mask:none;mask:none}
  .tkt-main{-webkit-mask:radial-gradient(circle var(--tk-r) at 0 100%,#0000 98%,#000),radial-gradient(circle var(--tk-r) at 100% 100%,#0000 98%,#000);
    -webkit-mask-composite:source-in;
    mask:radial-gradient(circle var(--tk-r) at 0 100%,#0000 98%,#000),radial-gradient(circle var(--tk-r) at 100% 100%,#0000 98%,#000);mask-composite:intersect}
  .tkt-stub{-webkit-mask:radial-gradient(circle var(--tk-r) at 0 0,#0000 98%,#000),radial-gradient(circle var(--tk-r) at 100% 0,#0000 98%,#000);
    -webkit-mask-composite:source-in;
    mask:radial-gradient(circle var(--tk-r) at 0 0,#0000 98%,#000),radial-gradient(circle var(--tk-r) at 100% 0,#0000 98%,#000);mask-composite:intersect}
  .tkt-main{padding:6cqi 6cqi 5cqi;gap:4cqi}
  .tkt-art{inset:18cqi 0 auto 0;height:58cqi;background-position:50% 42%;opacity:.45;
    -webkit-mask:linear-gradient(180deg,transparent,#000 22%,#000 45%,transparent);-webkit-mask-composite:source-over;
    mask:linear-gradient(180deg,transparent,#000 22%,#000 45%,transparent);mask-composite:add}
  .tkt-brand{gap:3cqi;align-items:flex-start}
  .tkt-mark{width:13cqi;height:13cqi}
  .tkt-event{font-size:9cqi;letter-spacing:.1em}
  .tkt-sub{font-size:2.3cqi;margin-top:1.6cqi;letter-spacing:.22em;line-height:1.5}
  .tkt-class{font-size:2.6cqi;padding:1.2cqi 2cqi 1.1cqi 2.5cqi}
  .tkt-bill{width:100%;gap:2cqi;margin-top:14cqi}
  .tkt-rule{font-size:3.4cqi;gap:2.5cqi}
  .tkt-rule--vs{font-size:5cqi}
  .tkt-name{font-size:8cqi;padding:2cqi 3cqi;border-width:max(1px,.3cqi)}
  .tkt-name--sealed{height:12cqi}
  .tkt-name--sealed span{font-size:2.5cqi;padding:.6cqi 2cqi}
  .tkt-belt{font-size:2.6cqi}
  .tkt-meta{grid-template-columns:1fr 1fr;gap:4cqi 0;padding-top:4cqi;border-width:max(1px,.3cqi)}
  .tkt-f,.tkt-f:first-child{padding:0;border-left:0}
  .tkt-f--venue{grid-column:1/-1;order:-1}
  .tkt-f--doors{order:1}.tkt-f--area{order:2}.tkt-f--admit{order:3}
  .tkt-f--doors,.tkt-f--admit{padding-left:3cqi;border-left:max(1px,.3cqi) solid var(--tk-line)}
  .tkt-f dt{font-size:2.3cqi;margin-bottom:1.3cqi}
  .tkt-f dd{font-size:5cqi;white-space:normal}
  .tkt-stub{padding:8cqi 6cqi 7cqi;gap:2.4cqi}
  .tkt-stub::before{left:5cqi;right:5cqi;top:-.5cqi;bottom:auto;width:auto;height:1cqi;
    background:radial-gradient(circle,var(--tk-line) 45%,transparent 50%) 0 0/2.6cqi 1cqi repeat-x}
  .tkt-mark--stub,.tkt-stub .tkt-event{display:none}
  .tkt-class--stub{font-size:2.8cqi}
  .tkt-qr{width:62cqi}
  .tkt-qr--empty{width:42cqi}
  .tkt-qr--empty span{font-size:2.6cqi}
  .tkt-no{font-size:2.6cqi}
  .tkt-stamp{top:30%;left:50%;font-size:18cqi}
}

/* tickets page: the preview and the stock picker under it */
.tkt-stage{display:grid;gap:1.25rem}
.tkt-stocks{display:flex;flex-wrap:wrap;gap:.4rem}
.tkt-stocks button{font-family:var(--f-stat);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.65rem 1rem;background:transparent;border:1px solid rgba(138,144,153,.35);color:var(--steel-hi);cursor:pointer;display:flex;gap:.6rem;align-items:center}
.tkt-stocks button::before{content:"";width:.8rem;height:.8rem;background:var(--sw,#060607);border:1px solid rgba(233,228,219,.3)}
.tkt-stocks button[aria-pressed="true"]{border-color:var(--bone);color:var(--bone)}
.tkt-stocks [data-stock="vip"]{--sw:#c0915a}
.tkt-stocks [data-stock="vvip"]{--sw:linear-gradient(100deg,#9c7240,#f0d3a0,#b98a55)}
.tkt-stocks [data-stock="ringside"]{--sw:#8a0f22}
.tkt-upsell{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;padding:1rem 1.25rem;border-left:3px solid var(--bronze);background:rgba(0,0,0,.35)}
.tkt-upsell[hidden]{display:none}
.tkt-upsell p{margin:0;flex:1 1 20rem;color:var(--steel-hi)}
.tkt-upsell b{color:var(--bone)}
/* the kit upsell Dougie switches on in control.html */
.kit-up{margin-top:.75rem;border-left-color:var(--blood)}
.kit-up img{width:64px;height:64px;object-fit:cover;background:#0a0b0d;flex:0 0 64px}
.kit-up p{flex:1 1 14rem}
.kit-up--after{max-width:34rem;margin:2.5rem auto 0;text-align:left}

/* buy confirmation, one sheet for tickets, PPV and replays */
.buy-sheet{border:0;padding:0;max-width:min(34rem,calc(100vw - 2rem));width:100%;background:var(--plate);color:var(--bone);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.buy-sheet::backdrop{background:rgba(0,0,0,.72)}
.buy-sheet form{padding:1.6rem 1.5rem 1.4rem;border-top:3px solid var(--blood)}
.buy-sheet h3{margin-bottom:.9rem}
.buy-sheet .check{align-items:flex-start;font-size:.92rem;line-height:1.45}
.buy-sheet .check input{margin-top:.15rem}
.buy-sheet .check a{color:var(--bone);text-decoration:underline}
.buy-sheet .row{display:flex;gap:.6rem;margin-top:1.2rem}
.buy-sheet .row .btn{flex:1}

/* legal pages */
.legal{max-width:74ch}
.legal h3{margin:2.5rem 0 .9rem}
.legal h3:first-child{margin-top:0}
.legal p,.legal li{color:var(--steel-hi)}
.legal ul{padding-left:1.1rem;line-height:1.75;margin:0 0 1.1em}
.legal li{margin-bottom:.4rem}
.legal-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.9rem;line-height:1.5;margin:0 0 1.2rem}
.legal-table th{text-align:left;font-family:var(--f-stat);font-weight:600;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);padding:.6rem .8rem .6rem 0;border-bottom:1px solid rgba(138,144,153,.35)}
.legal-table td{vertical-align:top;padding:.8rem .8rem .8rem 0;border-bottom:var(--rule);color:var(--steel-hi)}
/* anything still to be filled in before launch. Must not ship: grep "to-confirm" */
.to-confirm{background:var(--blood);color:#fff;padding:0 .3em}

/* ---------- merch. The kit rack ---------- */
.mx-filters{display:flex;gap:.4rem;flex-wrap:wrap;margin:0 0 1.5rem}
.mx-filters button{font-family:var(--f-stat);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;padding:.55rem .85rem;border:1px solid rgba(138,144,153,.3);background:transparent;color:var(--steel-hi);cursor:pointer}
.mx-filters button[aria-pressed="true"]{background:var(--blood);border-color:var(--blood);color:#fff}
.mx-grid{display:grid;gap:clamp(1rem,2.5vw,1.75rem);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.mx{display:flex;flex-direction:column;background:linear-gradient(170deg,var(--plate-hi),var(--plate));box-shadow:var(--bevel);border-bottom:3px solid var(--steel-lo)}
.mx[data-out="true"]{border-bottom-color:transparent}
.mx-img{position:relative;aspect-ratio:1/1;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,rgba(193,18,43,.22),transparent 60%),#0a0b0d;cursor:pointer;border:0;padding:0;width:100%;display:block}
.mx-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .25s ease}
.mx-img img + img{opacity:0}
@media (hover:hover){.mx-img:hover img + img{opacity:1}.mx-img:hover img:first-child:not(:only-child){opacity:0}}
.mx-img[data-shot="1"] img:first-child{opacity:0}.mx-img[data-shot="1"] img + img{opacity:1}
.mx-mark{position:absolute;left:50%;top:50%;width:42%;transform:translate(-50%,-55%)}
.mx-mark .tkm-side{fill:#2a2e34}.mx-mark .tkm-mid{fill:var(--blood)}
.mx-tag{position:absolute;left:0;top:1rem;background:var(--blood);color:#fff;font-family:var(--f-stat);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .7rem .35rem .9rem;clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.mx-tag--out{background:var(--bone);color:var(--ink)}
.mx-dots{position:absolute;right:.75rem;bottom:.6rem;display:flex;gap:.3rem}
.mx-dots i{width:.45rem;height:.45rem;border-radius:50%;background:rgba(233,228,219,.35)}
.mx-dots i[data-on="true"]{background:var(--bone)}
.mx-body{padding:1.1rem 1.15rem 1.25rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.mx-top{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.mx-cat{font-family:var(--f-stat);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-lo);margin:0}
.mx-name{font-size:clamp(1.45rem,3vw,1.75rem);line-height:1;margin:0;text-transform:uppercase}
.mx-price{font-family:var(--f-stat);font-weight:700;font-size:1.35rem;white-space:nowrap;color:var(--bone)}
.mx-blurb{font-size:.92rem;color:var(--steel);margin:0;line-height:1.5}
.mx-sizes{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.2rem}
.mx-sizes button{min-width:2.9rem;padding:.55rem .5rem;font-family:var(--f-stat);font-weight:600;font-size:.85rem;background:transparent;color:var(--bone);border:1px solid rgba(138,144,153,.4);cursor:pointer}
.mx-sizes button[aria-pressed="true"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.mx-sizes button:disabled{color:var(--steel-lo);border-style:dashed;text-decoration:line-through;cursor:not-allowed}
.mx-left{font-family:var(--f-stat);font-size:.75rem;color:var(--blood);letter-spacing:.05em;min-height:1.1em;margin:0}
.mx-add{margin-top:auto}
.mx-add .btn{width:100%}
.mx-drop{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:1fr;align-items:center}
@media (min-width:860px){.mx-drop{grid-template-columns:1.1fr 1fr}}
.mx-rack{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.mx-rack span{aspect-ratio:3/4;background:radial-gradient(110% 80% at 50% 100%,rgba(193,18,43,.25),transparent 65%),#0a0b0d;box-shadow:var(--bevel);display:grid;place-items:center;font-family:var(--f-stat);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-lo)}
.mx-rack span svg{width:55%}
.mx-rack .tkm-side{fill:#24282d}.mx-rack .tkm-mid{fill:var(--blood)}
.mx-rack span:nth-child(2){transform:translateY(-1.25rem)}
.bag-lines{list-style:none;margin:0 0 1rem;padding:0}
.bag-lines li{display:grid;grid-template-columns:1fr auto;gap:.3rem .75rem;padding:.8rem 0;border-bottom:var(--rule)}
.bag-lines b{font-family:var(--f-display);font-size:1.15rem;text-transform:uppercase;line-height:1.1}
.bag-lines .price{font-family:var(--f-stat);text-align:right}
.bag-qty{display:flex;align-items:center;gap:.4rem;grid-column:1/-1}
.bag-qty button{width:2.2rem;height:2.2rem;background:transparent;border:1px solid rgba(138,144,153,.4);color:var(--bone);font-size:1.1rem;cursor:pointer}
.bag-qty span{min-width:1.6rem;text-align:center;font-family:var(--f-stat)}
.bag-qty .bag-rm{width:auto;height:auto;border:0;background:none;color:var(--steel-lo);font-size:.8rem;text-decoration:underline;margin-left:auto;padding:0}
.bag-sum{display:flex;justify-content:space-between;font-family:var(--f-stat);padding:.35rem 0}
.bag-sum--total{font-weight:700;font-size:1.15rem;border-top:var(--rule);margin-top:.35rem;padding-top:.7rem}
.cartbar .btn--ghost{background:var(--ink)}
.cartbar .stat{white-space:nowrap}
@media (max-width:480px){
  .cartbar{gap:.5rem}
  .cartbar .stat{font-size:.92rem}
  .cartbar .btn{padding:.75rem .9rem;font-size:1rem}
}
.bag-how{border:0;margin:0 0 1rem;padding:.9rem 0 0;border-top:var(--rule)}
.bag-how legend{font-family:var(--f-stat);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);padding:0;margin-bottom:.6rem}
.bag-how .check{margin-bottom:.6rem}
.bag-how .check input{accent-color:var(--blood)}

/* ---------- merch: closer look, postage bar, add feedback ---------- */
.mx-img img{transition:opacity .25s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){.mx-img:hover img{transform:scale(1.04)}}
.mx-look{position:absolute;left:50%;bottom:1rem;transform:translate(-50%,.4rem);opacity:0;transition:opacity .2s ease,transform .2s ease;
  font-family:var(--f-stat);font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);
  background:rgba(14,16,18,.82);border:1px solid rgba(233,228,219,.25);padding:.45rem .8rem;white-space:nowrap;pointer-events:none}
@media (hover:hover){.mx-img:hover .mx-look,.mx-img:focus-visible .mx-look{opacity:1;transform:translate(-50%,0)}}
@media (hover:none){.mx-look{opacity:.9;transform:translate(-50%,0);bottom:.7rem;font-size:.65rem;padding:.35rem .6rem}}
.mx-add .btn[data-done="true"],#qvAdd[data-done="true"]{background:var(--bone);color:var(--ink)}

.cartbar .cart-fill{position:absolute;left:0;right:0;top:-2px;height:2px;background:rgba(138,144,153,.25);pointer-events:none}
.cartbar .cart-fill i{display:block;height:100%;width:0;background:var(--bone);transition:width .35s ease}

.bag-free{margin:0 0 1rem}
.bag-free p{font-family:var(--f-stat);font-size:.82rem;letter-spacing:.04em;margin:0 0 .45rem;color:var(--steel-hi)}
.bag-free-bar{display:block;height:6px;background:rgba(138,144,153,.2);overflow:hidden}
.bag-free-bar i{display:block;height:100%;width:0;background:var(--blood);transition:width .35s ease}
.bag-free[data-done="true"] p{color:var(--bone)}
.bag-free[data-done="true"] .bag-free-bar i{background:var(--bone)}
.bag-up{display:grid;grid-template-columns:64px 1fr;gap:.4rem .9rem;align-items:center;padding:.85rem;margin:0 0 1rem;
  background:var(--plate-hi);border-left:3px solid var(--blood)}
.bag-up img,.bag-up-mark{width:64px;height:64px;object-fit:cover;background:#0a0b0d;grid-row:span 2}
.bag-up-mark{display:grid;place-items:center}.bag-up-mark svg{width:60%}
.bag-up p{margin:0;font-size:.9rem;line-height:1.4}
.bag-up b{font-family:var(--f-display);text-transform:uppercase;font-size:1.05rem}
.bag-up .btn{justify-self:start;padding:.5rem .9rem;font-size:.95rem}

.qv{border:0;padding:0;margin:auto;width:min(68rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);background:var(--plate);color:var(--bone);
  box-shadow:0 30px 90px rgba(0,0,0,.7);overflow:auto;overscroll-behavior:contain}
.qv::backdrop{background:rgba(0,0,0,.8)}
.qv[open]{animation:qv-in .22s ease-out}
@keyframes qv-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.qv-in{display:grid;grid-template-columns:1fr;border-top:3px solid var(--blood)}
@media (min-width:860px){.qv-in{grid-template-columns:1.15fr 1fr}}
.qv-media{background:#0a0b0d;padding:0 0 .9rem}
.qv-stage{position:relative;aspect-ratio:1/1;overflow:hidden;cursor:zoom-in;touch-action:pan-y}
.qv-stage[data-zoom="true"]{cursor:zoom-out;touch-action:none}
.qv-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease,transform .25s ease;user-select:none;-webkit-user-drag:none}
.qv-stage img[data-on="true"]{opacity:1}
.qv-stage[data-zoom="true"] img[data-on="true"]{transform:scale(2.2);transition:opacity .25s ease}
.qv-stage .mx-mark .tkm-side{fill:#2a2e34}.qv-stage .mx-mark .tkm-mid{fill:var(--blood)}
.qv-thumbs{display:flex;gap:.5rem;padding:.9rem .9rem 0}
.qv-thumbs button{width:4.25rem;height:4.25rem;padding:0;border:1px solid rgba(138,144,153,.3);background:#0a0b0d;cursor:pointer;opacity:.6}
.qv-thumbs button[aria-pressed="true"]{opacity:1;border-color:var(--bone)}
.qv-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.qv-hint{font-family:var(--f-stat);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-lo);margin:.7rem .9rem 0}
.qv-info{position:relative;padding:1.6rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.7rem}
.qv-x{position:absolute;right:.6rem;top:.5rem;width:2.6rem;height:2.6rem;border:0;background:none;color:var(--steel-hi);font-size:2rem;line-height:1;cursor:pointer}
.qv-x:hover{color:var(--bone)}
.qv-name{font-size:clamp(2rem,4.5vw,3rem);line-height:.95;margin:0;text-transform:uppercase;padding-right:2.5rem}
.qv-price{font-family:var(--f-stat);font-weight:700;font-size:1.6rem;margin:0}
.qv-facts{list-style:none;margin:.4rem 0 0;padding:.9rem 0 0;border-top:var(--rule);display:grid;gap:.45rem}
.qv-facts li{font-size:.88rem;color:var(--steel-hi);padding-left:1.1rem;position:relative}
.qv-facts li::before{content:"";position:absolute;left:0;top:.5em;width:.45rem;height:.45rem;background:var(--blood);clip-path:polygon(0 0,100% 50%,0 100%)}
.qv-share{align-self:flex-start;background:none;border:0;padding:0;color:var(--steel);font-family:var(--f-stat);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;cursor:pointer}
.qv-share:hover{color:var(--bone)}
@media (max-width:859px){
  .qv{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0}
  .qv-info{padding:1.3rem var(--gut) calc(1.5rem + var(--safe-b))}
  .qv-x{position:fixed;right:.6rem;top:calc(.5rem + var(--safe-t));background:rgba(14,16,18,.8);z-index:2}
}
@media (prefers-reduced-motion:reduce){
  .qv[open]{animation:none}
  .mx-img img,.qv-stage img,.cartbar .cart-fill i,.bag-free-bar i{transition:none}
  @media (hover:hover){.mx-img:hover img{transform:none}}
}
/* the photo melts into the card rather than stopping on a hard line */
.mx-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(to bottom,rgba(30,34,40,0),var(--plate-hi));pointer-events:none}
.mx-tag,.mx-look{z-index:1}
/* five sizes sit on one row at card width */
.mx-sizes{display:grid;grid-template-columns:repeat(auto-fit,minmax(2.15rem,1fr));gap:.3rem}
.mx-sizes button{min-width:0}

/* ---------- fan layer: passport, gum shields, spin, Fight IQ, poster maker (explore.js, fanzone.html) ---------- */
.link-btn{background:none;border:0;padding:0;color:var(--bone);text-decoration:underline;font:inherit;cursor:pointer}
.row-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.btn--big{font-size:1.4rem;padding:1.1rem 2.2rem}

/* toast */
.fan-toast{position:fixed;left:1rem;bottom:calc(1rem + var(--safe-b));z-index:800;max-width:min(24rem,calc(100vw - 2rem));
  display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:start;padding:.95rem 1rem;background:rgba(14,16,18,.97);
  border-left:3px solid var(--blood);box-shadow:0 18px 50px rgba(0,0,0,.55);transform:translateY(calc(100% + 2rem));opacity:0;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.fan-toast[data-on="true"]{transform:none;opacity:1}
.fan-toast b{display:block;font-family:var(--f-display);font-size:1.15rem;text-transform:uppercase;line-height:1.1}
.fan-toast p{margin:.3rem 0 0;font-size:.86rem;color:var(--steel-hi);line-height:1.45}
.fan-toast a{display:inline-block;margin-top:.45rem;font-family:var(--f-stat);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone)}
.fan-toast button{background:none;border:0;color:var(--steel);font-size:1.4rem;line-height:1;cursor:pointer;padding:0 .2rem}
.fan-toast-mark{width:2.1rem;height:2.1rem;border:2px solid var(--blood);transform:rotate(-8deg);display:grid;place-items:center}
.fan-toast-mark::after{content:"";width:.7rem;height:.7rem;background:var(--blood);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.has-tabbar .fan-toast{bottom:calc(64px + 1rem + var(--safe-b))}
.cart-open .fan-toast{bottom:calc(64px + 80px + var(--safe-b))}
@media(min-width:761px){.cart-open .fan-toast{bottom:calc(5.5rem + var(--safe-b))}}

/* gum shields. Small, dim, findable by someone looking */
.gum{position:absolute;z-index:3;width:30px;height:22px;padding:0;border:0;background:none;cursor:pointer;opacity:.32;transition:opacity .2s ease,transform .2s ease}
.gum svg{width:100%;height:100%;fill:var(--steel-lo);stroke:var(--ink-deep)}
.gum:hover,.gum:focus-visible{opacity:1;transform:scale(1.25) rotate(-8deg)}
.gum:hover svg,.gum:focus-visible svg{fill:var(--blood)}
.gum[data-found="true"]{opacity:.85}.gum[data-found="true"] svg{fill:var(--blood)}
.gum--br{right:.9rem;bottom:.9rem}.gum--bl{left:.9rem;bottom:.9rem}.gum--tr{right:.9rem;top:.9rem}.gum--tl{left:.9rem;top:.9rem}

/* the passport line in the menu */
.menu-passport{grid-column:1/-1;display:grid;gap:.45rem;padding:.9rem 1rem;background:rgba(193,18,43,.08);border-left:3px solid var(--blood);
  font-family:var(--f-stat);font-size:.8rem;color:var(--steel-hi);text-decoration:none}
.menu-passport-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.menu-passport-bar,.pp-bar{display:block;height:4px;background:rgba(138,144,153,.2);overflow:hidden}
.menu-passport-bar i,.pp-bar i{display:block;height:100%;background:var(--blood);transition:width .5s ease}
.pp-bar{height:8px;margin:0 0 1.75rem}.pp-bar--thin{height:4px;margin:.6rem 0 1.4rem}

/* watched fights */
.yt[data-seen="true"]::before{content:"Watched";position:absolute;z-index:2;right:.7rem;top:.7rem;background:var(--bone);color:var(--ink);
  font-family:var(--f-stat);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.25rem .5rem}

/* passport rooms */
.pp-rooms{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.pp-rooms a{position:relative;display:grid;gap:.15rem;padding:1rem 1rem 1.1rem;min-height:6.2rem;background:var(--plate);box-shadow:var(--bevel);
  text-decoration:none;color:var(--bone);border-bottom:3px solid transparent;transition:background .15s ease,border-color .15s ease;overflow:hidden}
.pp-rooms a:hover{background:var(--plate-hi);border-color:var(--blood)}
.pp-no{font-family:var(--f-stat);font-size:.72rem;color:var(--steel-lo)}
.pp-name{font-family:var(--f-display);font-weight:800;font-size:1.5rem;text-transform:uppercase;line-height:1}
.pp-hint{font-size:.82rem;color:var(--steel)}
.pp-go{position:absolute;right:1rem;bottom:1rem;font-family:var(--f-stat);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blood)}
.pp-rooms [data-got="false"] a{background:transparent;border:1px dashed rgba(138,144,153,.3);border-bottom-width:3px}
.pp-rooms [data-got="false"] .pp-name{color:var(--steel-hi)}
.pp-stamp{position:absolute;right:.6rem;top:50%;transform:translateY(-50%) rotate(-14deg);padding:.3rem .55rem;border:3px double var(--blood);
  color:var(--blood);font-family:var(--f-display);font-weight:800;font-size:1.2rem;letter-spacing:.05em;opacity:.85;mix-blend-mode:screen}
.pp-shields{display:grid;gap:1rem 2rem;align-items:center;margin-top:2rem;padding:1.4rem;background:var(--plate);box-shadow:var(--bevel)}
@media(min-width:760px){.pp-shields{grid-template-columns:1fr auto}}
.pp-shields h3{margin:0 0 .35rem;text-transform:uppercase}
.pp-shields p{margin:0;font-size:.92rem}
.pp-shield-row{list-style:none;margin:0;padding:0;display:flex;gap:.6rem}
.pp-shield-row li{width:3rem;height:2.2rem;border:1px dashed rgba(138,144,153,.35);
  background:no-repeat center/70% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M3 8c0-4 4-6 8-5l9 3 9-3c4-1 8 1 8 5 0 9-6 17-17 17S3 17 3 8z' fill='%23252a30'/%3E%3C/svg%3E")}
.pp-shield-row li[data-got="true"]{border:1px solid var(--blood);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M3 8c0-4 4-6 8-5l9 3 9-3c4-1 8 1 8 5 0 9-6 17-17 17S3 17 3 8z' fill='%23c1122b'/%3E%3C/svg%3E")}

/* spin the Vault */
.spin-count{font-family:var(--f-stat);font-size:.9rem;color:var(--steel-hi);margin:0}
.spin-sheet{border:0;padding:0;margin:auto;width:min(56rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);background:var(--plate);color:var(--bone);
  box-shadow:0 30px 90px rgba(0,0,0,.7);overflow:auto}
.spin-sheet::backdrop{background:rgba(0,0,0,.85)}
.spin-sheet[open]{animation:qv-in .22s ease-out}
.spin-in{position:relative;padding:1.5rem 1.5rem 1.4rem;border-top:3px solid var(--blood)}
.spin-tag{font-family:var(--f-stat);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin:0 2.5rem .4rem 0}
.spin-title{font-size:clamp(1.9rem,5vw,3.2rem);line-height:.95;margin:0 2.5rem 1rem 0;text-transform:uppercase}
.spin-title i{font-style:normal;font-size:.5em;color:var(--steel);margin:0 .2em;vertical-align:middle}
.spin-red{color:var(--bone);box-shadow:inset 0 -.18em 0 var(--blood)}.spin-blue{color:var(--bone);box-shadow:inset 0 -.18em 0 #2a5bd7}
.spin-video .yt{aspect-ratio:16/9}
.spin-seen{font-family:var(--f-stat);font-size:.8rem;color:var(--steel);margin:.8rem 0 0}
.spin-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.spin-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.75rem;padding:1.1rem 1.25rem;
  background:linear-gradient(100deg,rgba(193,18,43,.18),transparent 70%),var(--plate);border-left:3px solid var(--blood)}
.spin-bar b{display:block;font-family:var(--f-display);font-size:1.6rem;text-transform:uppercase;line-height:1}
.spin-bar p{margin:.3rem 0 0}

/* Fight IQ */
.iq{max-width:46rem}
.iq-head{display:flex;justify-content:space-between;font-family:var(--f-stat);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}
.iq-q{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.05;margin:0 0 1.2rem;text-transform:uppercase}
.iq-opts{display:grid;gap:.55rem}
@media(min-width:620px){.iq-opts{grid-template-columns:1fr 1fr}}
.iq-opts button{text-align:left;padding:1rem 1.1rem;background:var(--plate);box-shadow:var(--bevel);border:1px solid transparent;color:var(--bone);
  font-family:var(--f-display);font-weight:700;font-size:1.25rem;text-transform:uppercase;cursor:pointer;transition:background .15s,border-color .15s}
.iq-opts button:hover:not(:disabled){border-color:var(--blood);background:var(--plate-hi)}
.iq-opts button:disabled{cursor:default;opacity:.5}
.iq-opts button[data-r="right"]{opacity:1;background:#14301e;border-color:#3fae66}
.iq-opts button[data-r="wrong"]{opacity:1;background:#3a1016;border-color:var(--blood)}
.iq-note{min-height:1.5em;margin:1rem 0;color:var(--steel-hi)}
.iq-note a{color:var(--bone)}
.iq-video{display:block;margin-top:.8rem;max-width:32rem}
.iq-rank-tag{font-family:var(--f-stat);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blood);margin:0}
.iq-rank{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,7vw,4.4rem);line-height:.95;text-transform:uppercase;margin:.3rem 0 .8rem}

/* poster maker */
.pm{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(min-width:900px){.pm{grid-template-columns:1fr minmax(0,26rem)}}
.pm-preview{position:sticky;top:96px}
.pm-preview canvas{display:block;width:100%;height:auto;aspect-ratio:4/5;box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(233,228,219,.08)}
.pm-stock label[data-locked="true"]{cursor:not-allowed}
.pm-stock label[data-locked="true"] span{opacity:.4;border-style:dashed}
.pm-stock label[data-locked="true"] span::after{content:" (locked)";font-size:.75em}
@media(max-width:899px){.pm-preview{position:static;order:-1;max-width:24rem}}

@media (prefers-reduced-motion:reduce){
  .fan-toast,.gum,.pp-rooms a,.menu-passport-bar i,.pp-bar i{transition:none}
  .spin-sheet[open]{animation:none}
}

/* ---------- the clock. Home hero, plus one line on tickets and watch ---------- */
.clock{margin:2rem 0 0}
.clock-label{font-family:var(--f-stat);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-hi);margin:0 0 .65rem;display:flex;align-items:center;gap:.6rem}
.clock-label::before{content:"";width:22px;height:2px;background:var(--blood)}
.clock .countdown{margin:0}
.clock .cd-unit{min-width:0;flex:1 1 0;max-width:7.5rem}
.clock .cd-unit[hidden]{display:none}
.cd-unit--on b{color:var(--blood)}
.cd-tick{animation:cdTick .35s ease-out}
@keyframes cdTick{from{color:var(--blood);transform:translateY(-2px)}to{color:inherit;transform:none}}
.clock--hot .cd-unit{border-top-color:var(--blood);box-shadow:var(--bevel),0 0 28px var(--blood-glow)}
.clock--hot .clock-label{color:var(--bone)}
.clock-cal{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1rem;align-items:center}
.clock-cal:empty{display:none}
.cal-btn{font-family:var(--f-stat);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);background:transparent;border:1px solid rgba(233,228,219,.35);padding:.7rem 1rem;min-height:44px;cursor:pointer;display:inline-flex;align-items:center}
.cal-btn:hover{border-color:var(--blood);color:#fff}
.cal-btn--quiet{border:0;padding-inline:0;color:var(--steel);text-decoration:underline;text-underline-offset:.25em}
.clock-line{font-family:var(--f-stat);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin:.75rem 0 0}
.clock-line b{color:var(--bone);font-variant-numeric:tabular-nums;margin-left:.35rem}
@media(max-width:480px){
  .clock .countdown{gap:.4rem;flex-wrap:nowrap}
  .clock .cd-unit{padding:.6rem .3rem}
  .clock .cd-unit small{font-size:.6rem;letter-spacing:.08em}
}

/* ---------- ticket availability ---------- */
.tier-left{font-family:var(--f-stat);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blood);text-align:right;margin:.6rem 0 0}
.tier--out{opacity:.55}
.tier--out .tier-left{color:var(--steel-hi)}
.qty button:disabled,.qty input:disabled{cursor:not-allowed;opacity:.5}
.arena .seat[data-state="sold"],.arena .seat[data-state="sold"]:hover{fill:#1b1d20;stroke:#5a616a;stroke-dasharray:3 3;opacity:.7;cursor:not-allowed}
@media (pointer:coarse){.qty button{width:42px;height:42px}.qty input{height:42px}}

/* ---------- phone fixes ---------- */
/* Vault count: a clean two by two on phones, no stray divider on row two */
@media(max-width:600px){
  .vcount{display:grid;grid-template-columns:1fr 1fr}
  .vcount div,.vcount div + div{padding:1rem .9rem;border-left:1px solid rgba(138,144,153,.16)}
  .vcount div:nth-child(odd){border-left:0;padding-left:0}
  .vcount div:nth-child(n+3){border-top:1px solid rgba(138,144,153,.16)}
}
/* footer links big enough for a thumb */
@media(max-width:760px){
  .foot-grid ul{gap:0}
  .foot-grid a{display:inline-block;padding:.55rem 0}
}
/* sign up folded on home phones: the advert shows, the form opens on a tap */
.recruit-open{display:none}
@media(max-width:760px){
  .recruit-form--fold:not(.is-open){display:none}
  .recruit-form--fold:not(.is-open) + .recruit-open{display:flex;justify-content:center}
}

/* ---------- since you were last here ---------- */
.since{background:var(--ink-deep);border-block:1px solid rgba(193,18,43,.35)}
.since-in{display:grid;gap:1rem;padding-block:1.4rem}
@media(min-width:760px){.since-in{grid-template-columns:auto 1fr auto;align-items:center;gap:2rem}}
.since-head{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.35rem;line-height:1;margin:0}
.since-head small{display:block;font-family:var(--f-stat);font-weight:400;font-size:.7rem;letter-spacing:.16em;color:var(--steel);margin-top:.35rem}
.since-list{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.since-list a{display:flex;gap:.75rem;align-items:baseline;padding:.55rem 0;color:var(--bone);border-bottom:1px solid rgba(138,144,153,.12)}
.since-list a::before{content:"";flex:0 0 8px;height:8px;background:var(--blood);transform:translateY(-1px) rotate(45deg)}
.since-list a:hover{color:#fff}
.since-x{justify-self:start;background:none;border:0;color:var(--steel);font-family:var(--f-stat);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:44px;padding:0}

/* fight of the week tag on the home reel */
.fotw{display:inline-block;font-family:var(--f-stat);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;background:var(--blood);color:#fff;padding:.3rem .55rem;margin-bottom:.5rem}

/* home screen install line in the menu */
.menu-install{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;font-size:.9rem;color:var(--steel)}
.menu-install button{min-height:44px}
.install-how{font-size:.85rem;color:var(--steel-hi);margin:.25rem 0 0;flex-basis:100%}

@media (prefers-reduced-motion:reduce){.cd-tick{animation:none}}