/* ==========================================================================
   Show Us Your TDs — "Game Day" sticker theme
   Loads LAST. Re-points the Broadcast tokens at a warm paper / turf / gold
   palette, then gives the furniture chunky ink outlines and hard offset
   shadows. Fredoka display, Inter Tight body, Caveat for the handwriting.
   ========================================================================== */

:root{
  /* the paper + ink */
  --cream:#FFF6E3; --paper:#FFFCF4; --peach:#FFE7C2; --sand:#F6E3C3;
  --choc:#2E1A0F;  --cocoa:#6A4A33;
  /* the field */
  --grass:#46B26A; --grass2:#2F944F; --pine:#1D6B3A; --night:#0E281C; --night2:#163C2A;
  /* the trim */
  --gold:#FFC23A; --gold2:#F2A818; --flag:#E4573D; --sky:#8FD3F4; --sunset:#F7A25C;

  --ink:3px solid var(--choc);
  --ink2:2px solid var(--choc);
  --hs:0 6px 0 var(--choc);
  --hs-sm:0 4px 0 var(--choc);
  --hs-xs:0 3px 0 var(--choc);

  /* Broadcast tokens, re-pointed */
  --bg:var(--cream); --bg2:var(--paper);
  --panel:var(--paper); --panel2:#FFF0D2; --raise:#F5E1BE;
  --line:rgba(46,26,15,.14); --line2:rgba(46,26,15,.26); --lit:rgba(255,255,255,.6);
  --chalk:var(--choc); --muted:#6A4A33; --faint:#7A5B44;
  --turf:var(--grass2); --turf2:var(--pine); --turf-ink:#1F7A40;
  --yellow:var(--gold); --yellow-dim:#FFE7A3;
  --red:var(--flag); --red-ink:#B83A24; --ice:#2C86B8; --amber:#B9780C;
  --sh-1:0 2px 0 rgba(46,26,15,.16);
  --sh-2:var(--hs-sm);
  --sh-3:var(--hs);
  --r:22px; --r-sm:16px; --r-xs:10px;
  --disp:"Fredoka","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Caveat","Marker Felt",cursive;
  --lh-disp:1.04;
  color-scheme:light;
}

body{
  background:var(--cream); color:var(--choc);
  font-family:var(--body); font-size:16px;
}
::selection{ background:var(--gold); color:var(--choc) }
:focus-visible{ outline:3px solid var(--flag) !important; outline-offset:3px }

/* --------------------------------------------------------------- shared */

.stk-note{
  font-family:var(--hand); font-weight:700; font-size:1.55rem; line-height:1.05;
  color:var(--flag); transform:rotate(-3deg); display:inline-block;
}
.stk-note svg{ width:58px; height:40px; fill:none; stroke:currentColor; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round; vertical-align:middle }
.stk-btn, .hm-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:52px; padding:0 24px; border-radius:999px; border:var(--ink);
  background:linear-gradient(180deg,#FFD15E 0%,var(--gold) 100%);
  color:var(--choc); font-family:var(--disp); font-weight:600; font-size:1.05rem; letter-spacing:0;
  box-shadow:var(--hs-sm), inset 0 2px 0 rgba(255,255,255,.45);
  transition:transform .1s ease, box-shadow .1s ease; text-decoration:none; cursor:pointer;
}
.stk-btn:hover, .hm-cta:hover{ transform:translateY(-1px); box-shadow:0 5px 0 var(--choc), inset 0 2px 0 rgba(255,255,255,.45) }
.stk-btn:active, .hm-cta:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--choc) }
.hm-cta.ghost{ background:var(--paper); color:var(--choc); border:var(--ink) }

/* pennant bunting — a repeating tile of three flags on a sagging string */
.stk-bunting{
  height:46px; pointer-events:none; position:relative; z-index:2;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='46' viewBox='0 0 150 46'%3E%3Cpath d='M0 6 Q75 22 150 6' fill='none' stroke='%232E1A0F' stroke-width='2.5'/%3E%3Cpath d='M10 9 L36 14 L21 40 Z' fill='%231D6B3A' stroke='%232E1A0F' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M62 13.5 L88 13.5 L75 41 Z' fill='%23FFC23A' stroke='%232E1A0F' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M114 14 L140 9 L129 40 Z' fill='%23FFFCF4' stroke='%232E1A0F' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 0 / 150px 46px;
}
.stk-edge{ display:block; width:100%; height:40px; margin-bottom:-1px }

/* --------------------------------------------------------------- the nav */

.gn{
  background:rgba(255,246,227,.94); border-bottom:2.5px solid var(--choc);
  backdrop-filter:blur(10px);
}
.gn-brand{ font-family:var(--disp); font-weight:700; text-transform:none; letter-spacing:-.01em; font-size:1.3rem; color:var(--choc) }
.gn-brand b{ color:var(--pine); font-weight:700 }
.gn-brand img{ filter:drop-shadow(0 2px 0 var(--choc)) }
.gn-top{ font-family:var(--disp); font-weight:500; font-size:.98rem; letter-spacing:0; color:var(--choc); border-radius:99px }
.gn-top:hover, .gn-top[aria-expanded="true"]{ background:var(--peach); color:var(--choc) }
.gn-group.here > .gn-top{ color:var(--choc); box-shadow:inset 0 -3px 0 var(--gold) }
.gn-menu{ background:var(--paper); border:var(--ink); border-radius:18px; box-shadow:var(--hs) }
.gn-menu a:hover, .gn-menu a:focus-visible{ background:var(--peach) }
.gn-menu b{ font-family:var(--disp); font-weight:600; color:var(--choc) }
.gn-menu a[aria-current] b{ color:var(--pine) }
.gn-draft{ color:var(--choc) }
.gn-draft:hover{ background:var(--gold); color:var(--choc) }
.gn-draft .gn-hot{ background:var(--flag); color:#fff; border:2px solid var(--choc); box-shadow:none; animation:none }
.gn-find{ background:var(--paper); border:var(--ink2); color:var(--choc); box-shadow:var(--hs-xs); font-family:var(--disp); font-weight:500 }
.gn-find:hover{ border-color:var(--choc); background:var(--peach) }
.gn-find kbd{ border:1.5px solid var(--choc); color:var(--choc) }
.gn-james{ border:var(--ink2); color:var(--choc); background:var(--yellow-dim) }
.gn-me{ border:var(--ink2); border-radius:99px; background:var(--paper); box-shadow:var(--hs-xs); padding:5px 12px 5px 6px }
.gn-me.unset{ background:var(--gold) }
.gn-me .stk-mhead{ width:30px; height:30px; margin:-3px 2px -3px -2px }
@media (max-width:920px){
  .gn-rail{ background:var(--cream); border-top:2.5px solid var(--choc) }
  .gn-menu{ border:0; box-shadow:none; background:transparent }
  .gn-burger i{ background:var(--choc) }
}

/* mascot head avatar — a badge in the team's colours */
.stk-mhead{
  display:inline-block; flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--c1,#ddd) url() center/112% no-repeat; border:2px solid var(--choc);
  box-shadow:0 2px 0 var(--choc); overflow:hidden; vertical-align:middle;
}
.stk-mhead img{ width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.08) translateY(4%) }

/* --------------------------------------------------------------- hero */

.hm-hero{
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(255,194,58,.28), transparent 70%),
    linear-gradient(180deg,var(--cream) 0%, #FFEACB 100%);
  border-bottom:0; overflow:visible;
}
.hm-hero::before{ display:none }
.hm-heroin{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(24px,4vw,56px); align-items:center;
  padding:clamp(18px,3vw,34px) var(--sp-4) clamp(40px,6vw,70px); text-align:left;
}
.hm-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--disp); font-size:.95rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--choc); background:var(--paper); border:var(--ink2); border-radius:99px;
  padding:5px 14px 5px 6px; box-shadow:var(--hs-xs); margin-bottom:18px;
}
.hm-kicker img{ width:26px; height:26px }
.hm-title{
  font-family:var(--disp); font-weight:700; text-transform:none; letter-spacing:-.02em;
  font-size:clamp(2.9rem,6.6vw,5.4rem); line-height:.98; color:var(--choc);
}
.hm-title em{ font-style:normal; color:var(--pine); position:relative; white-space:nowrap }
.hm-title em svg{
  position:absolute; left:-2%; bottom:-.16em; width:104%; height:.32em; overflow:visible;
  fill:none; stroke:var(--gold); stroke-width:9; stroke-linecap:round;
}
.hm-sub{ font-size:clamp(1.02rem,1.3vw,1.15rem); color:var(--cocoa); max-width:46ch; margin-top:18px; line-height:1.6 }
.hm-sub b{ color:var(--choc) }
.hm-ctas{ margin-top:26px; gap:12px }
.hm-count{
  font-family:var(--disp); font-weight:600; font-size:.95rem; color:var(--choc);
  background:var(--yellow-dim); border:var(--ink2); padding:8px 16px; box-shadow:var(--hs-xs);
}
.hm-count:hover{ border-color:var(--choc) }
.hm-hero[data-draft="soon"] .hm-count{ border-color:var(--choc) }
.hm-hero .stk-note{ margin-top:22px; margin-left:6px }

.hm-art{ position:relative; min-width:0 }
.hm-frame{
  position:relative; border:var(--ink); border-radius:28px; overflow:hidden;
  box-shadow:0 10px 0 var(--choc); transform:rotate(1.2deg); background:var(--sunset);
}
.hm-frame img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }
.hm-stamp{
  position:absolute; left:-34px; bottom:-34px; width:118px; height:118px; z-index:2;
  animation:stkSpin 22s linear infinite;
}
.hm-stamp circle{ fill:var(--gold); stroke:var(--choc); stroke-width:3 }
.hm-stamp text{ font-family:var(--disp); font-weight:600; font-size:12.4px; letter-spacing:.14em; fill:var(--choc) }
.hm-stamp .ball{ fill:#8B4A2B; stroke:var(--choc); stroke-width:2.5 }
.hm-stamp .lace{ stroke:#fff; stroke-width:2.2; stroke-linecap:round }
@keyframes stkSpin{ to{ transform:rotate(360deg) } }
.hm-art .stk-note{ position:absolute; right:4px; bottom:-58px; text-align:right; transform:rotate(2deg) }

/* --------------------------------------------------------------- the roster */

.roster{ position:relative; padding:clamp(34px,5vw,56px) 0 10px; background:var(--peach) }
.roster .stk-edge.stk-edge--b{ position:absolute; top:auto; bottom:-39px; left:0; color:var(--peach); transform:scaleY(-1); z-index:1 }
.roster + .hm-wrap .hm-order > .hm-h2:first-child{ margin-top:56px }
.roster + .hm-wrap .hm-order[hidden] + .hm-topboard .hm-h2{ margin-top:56px }
.roster .stk-edge{ position:absolute; top:-39px; left:0; color:var(--peach) }
.roster-head{ display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap }
.roster-head p{ color:var(--cocoa); max-width:52ch; margin-top:6px }
.roster-nav{ display:flex; gap:10px }
.roster-nav button{
  width:48px; height:48px; border-radius:50%; border:var(--ink); background:var(--paper);
  box-shadow:var(--hs-xs); font:600 1.3rem/1 var(--disp); color:var(--choc); cursor:pointer;
}
.roster-nav button:hover{ background:var(--gold) }
.roster-nav button:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--choc) }
.roster-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(220px,24vw,262px); gap:20px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:max(16px,calc((100vw - 1160px)/2 + 16px));
  padding:28px max(16px,calc((100vw - 1160px)/2 + 16px)) 34px; scrollbar-width:none; overscroll-behavior-x:contain;
  cursor:grab;
}
.roster-rail::-webkit-scrollbar{ display:none }
.roster-rail.drag{ cursor:grabbing; scroll-snap-type:none }
.rc{
  scroll-snap-align:start; position:relative; display:flex; flex-direction:column;
  background:var(--paper); border:var(--ink); border-radius:24px; box-shadow:var(--hs);
  overflow:hidden; transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.rc:hover{ transform:translateY(-6px) rotate(-1deg) }
.rc:nth-child(even):hover{ transform:translateY(-6px) rotate(1deg) }
.rc-top{
  position:relative; height:206px; border-bottom:var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.14) 34px 37px),
    linear-gradient(180deg, color-mix(in srgb, var(--c1) 82%, #fff), var(--c1));
}
.rc-top::after{ /* sleeve stripes */
  content:""; position:absolute; left:0; right:0; bottom:16px; height:14px;
  background:linear-gradient(180deg, var(--c2) 0 5px, transparent 5px 9px, var(--c2) 9px 14px); opacity:.9;
}
.rc-num{
  position:absolute; top:10px; left:12px; z-index:2; font:700 2.6rem/1 var(--disp);
  color:var(--ink-c,#fff); -webkit-text-stroke:2px var(--choc); paint-order:stroke fill;
}
.rc-art{
  position:absolute; left:50%; bottom:-14px; height:236px; width:auto; z-index:1;
  transform:translateX(-50%); transform-origin:50% 100%; filter:drop-shadow(0 4px 0 rgba(46,26,15,.25));
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.rc:hover .rc-art{ transform:translateX(-50%) translateY(-8px) scale(1.04) }
.rc-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:3px; flex:1 }
.rc-body h3{ font-family:var(--disp); font-weight:700; font-size:1.45rem; line-height:1.05; text-transform:none }
.rc-team{ font-family:var(--disp); font-weight:600; color:var(--pine); font-size:1rem; line-height:1.2 }
.rc-own{ font-size:.86rem; color:var(--faint) }
.rc-bio{ font-size:.92rem; color:var(--cocoa); margin-top:6px; line-height:1.45; flex:1 }
.rc-me{
  margin-top:12px; align-self:flex-start; font:600 .92rem/1 var(--disp); color:var(--choc);
  background:var(--paper); border:var(--ink2); border-radius:99px; padding:9px 14px;
  box-shadow:var(--hs-xs); cursor:pointer;
}
.rc-me:hover{ background:var(--gold) }
.rc.you .rc-me{ background:var(--grass); color:#fff }
.rc-you{
  position:absolute; top:12px; right:12px; z-index:3; display:none;
  font:700 .8rem/1 var(--disp); letter-spacing:.06em; text-transform:uppercase;
  background:var(--gold); color:var(--choc); border:var(--ink2); border-radius:99px; padding:6px 10px;
  transform:rotate(6deg); box-shadow:var(--hs-xs);
}
.rc.you .rc-you{ display:block }
.rc.you{ outline:4px solid var(--gold); outline-offset:3px }

/* --------------------------------------------------------------- section shell */

.hm-wrap{ max-width:1192px; padding:0 var(--sp-4) }
.hm-h2{
  font-family:var(--disp); font-weight:700; text-transform:none; letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.04; margin:clamp(40px,6vw,64px) 0 18px;
}
.hm-h2 a{
  font-family:var(--disp); font-weight:600; font-size:.95rem; color:var(--choc);
  background:var(--paper); border:var(--ink2); border-radius:99px; padding:6px 12px;
  margin-left:12px; vertical-align:middle; box-shadow:var(--hs-xs); white-space:nowrap; display:inline-block;
}
.hm-h2 a:hover{ background:var(--gold); color:var(--choc) }

.hm-card, .hm-tcol, .hm-oslot, .hm-hrow, .hm-feed{
  background:var(--paper); border:var(--ink); box-shadow:var(--hs);
}
.hm-card{ border-radius:24px; padding:22px }
.hm-card h3{ font-family:var(--disp); font-weight:700; font-size:1.4rem; text-transform:none; line-height:1.1 }
.hm-card h3 a, .hm-card h3 .hm-h3note{ font-family:var(--disp); font-size:.9rem }
.hm-card h3 a{ color:var(--turf-ink); text-decoration:underline; text-underline-offset:3px }

/* draft order / the haul */
.hm-oslots{ gap:12px; padding:4px 4px 14px }
.hm-oslot{ border-radius:18px; padding:12px 12px 12px; display:flex; flex-direction:column; align-items:flex-start }
.hm-oslot .stk-mhead{ width:46px; height:46px; margin-bottom:8px }
.hm-opick{ font-family:var(--disp); font-weight:700; color:var(--choc); font-size:1.05rem; position:absolute; top:10px; right:12px }
.hm-oslot b{ font-family:var(--disp); font-weight:600; font-size:.95rem; max-width:100% }
.hm-oslot.me, .hm-hrow.me{ background:var(--yellow-dim); border-color:var(--choc) }
.hm-oslot.me .hm-opick, .hm-hrow.me .hm-hpick{ color:var(--choc) }
.hm-oyou{ background:var(--gold); color:var(--choc); border:2px solid var(--choc) }
.hm-hrow{ border-radius:16px; grid-template-columns:28px 44px minmax(0,1fr) minmax(0,1.1fr) }
.hm-hrow .stk-mhead{ width:42px; height:42px }
.hm-hpick{ font-family:var(--disp); font-weight:700; color:var(--choc) }
.hm-hrow:first-child .hm-hpick{ color:var(--flag) }
.hm-hpl b{ color:var(--pine); font-family:var(--disp); font-weight:600 }
.hm-hteam b{ font-family:var(--disp); font-weight:600 }

/* top of the board */
.hm-top{ gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) }
.hm-tcol{ border-radius:22px; padding:0 12px 10px; overflow:hidden }
.hm-tcol h4{
  margin:0 -12px 8px; padding:12px 16px; border-bottom:var(--ink);
  font-family:var(--disp); font-weight:700; font-size:1.15rem; letter-spacing:.02em; text-transform:none; color:var(--choc);
}
.hm-tcol:nth-child(1) h4{ background:#FFC9BD }
.hm-tcol:nth-child(2) h4{ background:#C9EBCF }
.hm-tcol:nth-child(3) h4{ background:#C7E6F7 }
.hm-tcol:nth-child(4) h4{ background:#FFE3A1 }
.hm-tdot{ width:12px; height:12px; border:2px solid var(--choc) }
.hm-td-qb{ background:var(--flag) } .hm-td-rb{ background:var(--grass) }
.hm-td-wr{ background:#3FA4DB } .hm-td-te{ background:var(--gold) }
.hm-trow{ padding:7px 4px; border-radius:12px }
.hm-trow:hover{ background:var(--peach) }
.hm-trk{ font-family:var(--disp); font-weight:700; color:var(--faint); font-size:.9rem; width:16px }
.hm-trow:first-of-type .hm-trk{ color:var(--flag) }
.hm-tshot{ width:42px; height:32px; border-radius:9px; border:2px solid var(--choc); background:var(--sand) }
.hm-tnm b{ font-weight:700; font-size:.9rem }
.hm-tnm span{ font-size:.72rem; color:var(--faint) }
.hm-tpw{
  font-family:var(--disp); font-weight:700; font-size:1.02rem; color:var(--choc);
  background:var(--yellow-dim); border:2px solid var(--choc); border-radius:99px; padding:3px 9px;
}
.hm-trow:first-of-type .hm-tpw{ background:var(--gold) }
.hm-topfine{ font-size:.9rem; color:var(--cocoa); margin-top:14px }
.hm-topfine b{ color:var(--choc) }
.hm-topboard .hm-h2{ position:relative }
.hm-peek{
  position:absolute; right:18px; bottom:-20px; width:78px; height:auto; pointer-events:none;
  transform:rotate(5deg); filter:drop-shadow(0 4px 0 rgba(46,26,15,.2));
}

/* strips: the wire + soft spots side by side */
.hm-strips1{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:22px; margin-top:4px }
.hm-feed{
  flex:none; min-width:0; max-width:none !important; margin:0 !important; align-self:stretch; border-radius:24px;
  background:var(--paper); backdrop-filter:none;
}
.hm-feedhead{ padding:14px 18px; border-bottom:var(--ink); background:var(--night); color:var(--cream) }
.hm-feedhead b{ font-family:var(--disp); font-weight:700; font-size:1.2rem; letter-spacing:0; text-transform:none; color:var(--cream) }
.hm-feedsub{ font-family:var(--hand); font-size:1.15rem; letter-spacing:0; text-transform:none; color:var(--gold) }
.hm-feedhead a{ color:var(--cream); font-family:var(--disp); text-decoration:underline; text-underline-offset:3px }
.hm-livedot{ background:var(--flag); border:2px solid var(--cream) }
.hm-feedview{ min-height:300px; max-height:340px }
.hm-feedlist{ padding:6px 18px }
.hm-feedlist li{ border-bottom:1.5px dashed var(--line2) }
.hm-feedlist b{ font-size:.92rem; font-weight:600; color:var(--choc) }
.hm-feedlist a:hover b{ color:var(--pine); text-decoration:underline }
.hm-feedlist span{ font-size:.75rem; color:var(--faint) }

.hm-spot > span{ font-family:var(--disp); font-weight:600; font-size:.85rem; letter-spacing:.02em; text-transform:none; color:var(--cocoa) }
.hm-spot a{
  background:var(--paper); border:var(--ink2); box-shadow:var(--hs-xs); padding:5px 12px 5px 6px; margin:0 8px 10px 0;
}
.hm-spot a:hover{ background:var(--gold); border-color:var(--choc) }
.hm-spot b{ font-family:var(--disp); font-weight:600; font-size:.9rem }
.hm-spot em{ color:var(--cocoa) }
.hm-none{ color:var(--cocoa) }
.hm-none a{ color:var(--turf-ink) }

/* --------------------------------------------------------------- under the lights */

.lights{
  position:relative; overflow:hidden; margin-top:clamp(56px,8vw,90px); color:var(--cream);
  background:
    radial-gradient(1.6px 1.6px at 8% 18%, #fff 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 23% 42%, #FFE9C4 50%, transparent 55%),
    radial-gradient(1.8px 1.8px at 41% 12%, #fff 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 63% 30%, #fff 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 78% 9%, #FFE9C4 50%, transparent 55%),
    radial-gradient(1.1px 1.1px at 92% 36%, #fff 50%, transparent 55%),
    radial-gradient(70% 60% at 50% 0%, rgba(255,214,120,.18), transparent 70%),
    linear-gradient(180deg, #0B1F16 0%, var(--night2) 70%, #1E5236 100%);
  padding:20px 0 clamp(40px,6vw,64px);
}
.lights .stk-edge{ position:absolute; top:0; left:0; color:var(--cream); transform:scaleY(-1) }
.lights::before, .lights::after{ /* floodlight beams */
  content:""; position:absolute; top:0; width:44%; height:100%; pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%, transparent 0 160deg, rgba(255,233,170,.10) 172deg, rgba(255,233,170,.16) 180deg, rgba(255,233,170,.10) 188deg, transparent 200deg 360deg);
}
.lights::before{ left:-6% } .lights::after{ right:-6% }
.lights .hm-wrap{ position:relative; z-index:1 }
.lights .hm-h2{ color:var(--cream); margin-top:24px }
.lights .hm-h2 a{ background:var(--gold) }
.hm-champs{ margin:0 }
.champ-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,2fr); gap:28px; align-items:end; padding-top:78px }
.champ-reign{
  position:relative; background:var(--paper); color:var(--choc); border:var(--ink); border-radius:24px;
  box-shadow:0 6px 0 #000; padding:18px 18px 20px; text-align:center;
}
.champ-reign img{ width:62%; margin:-74px auto 6px; filter:drop-shadow(0 6px 0 rgba(0,0,0,.25)) }
.champ-reign .stk-note{ color:var(--flag); font-size:1.4rem }
.champ-reign b{ display:block; font:700 1.5rem/1.1 var(--disp) }
.champ-reign span{ display:block; color:var(--cocoa); font-size:.92rem }
.hm-rail{ gap:14px }
.hm-bnr img{ filter:drop-shadow(0 8px 0 rgba(0,0,0,.35)) }
.hm-bnr.reign img{ filter:drop-shadow(0 0 22px rgba(255,194,58,.45)) drop-shadow(0 8px 0 rgba(0,0,0,.35)) }
.hm-bnr b{ color:var(--cream); font-family:var(--disp); font-weight:600; font-size:1rem }
.hm-bnr span{ color:#CFE3D6 }

/* --------------------------------------------------------------- the end zone */

.endzone{
  position:relative; overflow:hidden; color:#fff; text-align:center;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 60px, transparent 60px 120px),
    linear-gradient(180deg,#3DA661,#2C8C4B);
  border-top:4px solid #fff; padding:46px 16px 150px;
}
.endzone::before{ /* goal line + hash marks */
  content:""; position:absolute; left:0; right:0; top:0; height:10px;
  background:repeating-linear-gradient(90deg,#fff 0 4px,transparent 4px 46px);
  opacity:.9;
}
.ez-word{
  font:700 clamp(2.6rem,9vw,7rem)/.9 var(--disp); letter-spacing:.04em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:3px rgba(255,255,255,.92); opacity:.95;
}
.ez-sub{ margin-top:14px; font-family:var(--hand); font-size:1.7rem; color:var(--gold) }
.ez-score{
  position:relative; display:inline-flex; align-items:center; gap:14px; margin-top:22px;
  background:var(--paper); color:var(--choc); border:var(--ink); border-radius:22px;
  box-shadow:0 6px 0 var(--choc); padding:10px 22px 10px 10px;
  opacity:0; transform:translateY(16px) scale(.9); transition:opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.ez-score.on{ opacity:1; transform:none }
.ez-score img{ height:92px; width:auto; margin-top:-34px }
.ez-score b{ font:700 1.5rem/1.05 var(--disp); text-align:left }
.ez-score span{ display:block; font:500 .95rem/1.3 var(--body); color:var(--cocoa) }
.ez-post{ position:absolute; right:6%; bottom:0; width:120px; height:220px; opacity:.95; z-index:0 }
.endzone > *:not(.ez-post){ position:relative; z-index:1 }
@media (max-width:700px){
  .ez-post{ width:64px; height:118px; right:12px }
  .endzone{ padding-bottom:170px }
  .hm-foot{ padding-right:70px; text-align:left }
}
.hm-foot{ border:0; color:#E6F4EA; font-size:.85rem; margin-top:26px; padding:0 }

/* --------------------------------------------------------------- the scroll play */

.play{
  --h:118px; position:fixed; left:0; right:0; bottom:10px; height:calc(var(--h) + 92px);
  z-index:40; pointer-events:none; opacity:0; transition:opacity .45s ease;
}
.play.is-on{ opacity:1 }
.play.is-done{ opacity:0; transition-duration:.8s }
.pl-actor{ position:absolute; left:0; bottom:0; will-change:transform }
.pl-sprite{
  width:var(--w); height:var(--h); background-repeat:no-repeat; background-size:auto 100%;
  transform-origin:50% 90%;
}
.pl-sprite.idle{ background-size:contain; background-position:50% 100% !important }
.pl-shadow{
  position:absolute; left:50%; bottom:-6px; width:70%; height:12px; border-radius:50%;
  background:rgba(46,26,15,.22); transform:translateX(-50%); z-index:-1;
}
.pl-chase.is-diving .pl-sprite{ transition:transform .16s ease-out }
.pl-bubble{
  position:absolute; left:50%; bottom:calc(var(--h) + 14px); transform:translate(calc(-50% + var(--bx,0px)), 6px) scale(.9);
  white-space:nowrap; font:600 .98rem/1 var(--disp); color:var(--choc);
  background:var(--paper); border:var(--ink2); border-radius:14px; padding:9px 12px;
  box-shadow:var(--hs-xs); opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.pl-bubble::after{
  content:""; position:absolute; left:calc(50% - var(--bx,0px) - 7px); bottom:-9px; width:12px; height:12px;
  background:var(--paper); border-right:var(--ink2); border-bottom:var(--ink2); transform:rotate(45deg);
}
.pl-bubble.is-on{ opacity:1; transform:translate(calc(-50% + var(--bx,0px)), 0) scale(1) }
.pl-chip{
  position:absolute; left:14px; bottom:calc(var(--h) + 46px);
  display:inline-flex; align-items:center; gap:8px; font:600 .86rem/1 var(--disp); color:var(--choc);
  background:var(--paper); border:var(--ink2); border-radius:99px; padding:6px 12px 6px 6px; box-shadow:var(--hs-xs);
}
.pl-chip .stk-mhead{ width:26px; height:26px; border-width:1.5px; box-shadow:none }
.pl-chip i{ font-style:normal; background:var(--gold); border:1.5px solid var(--choc); border-radius:99px; padding:3px 8px }
.pl-dust{
  position:absolute; bottom:2px; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #7BC98C, #3E9A57); pointer-events:none;
}
.pl-td{
  position:fixed; left:50%; top:38%; z-index:41; pointer-events:none;
  font:700 clamp(3rem,10vw,7.5rem)/.9 var(--disp); letter-spacing:.02em; color:var(--gold);
  -webkit-text-stroke:4px var(--choc); paint-order:stroke fill; text-shadow:0 8px 0 var(--choc);
  transform:translate(-50%,-50%) scale(.2) rotate(-8deg); opacity:0;
}
.pl-td.go{ animation:plTD 1.6s cubic-bezier(.34,1.56,.64,1) forwards }
@keyframes plTD{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(-8deg) }
  30%{ opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(-4deg) }
  70%{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-4deg) }
  100%{ opacity:0; transform:translate(-50%,-60%) scale(1) rotate(-4deg) }
}
.pl-conf{ position:fixed; top:-12px; width:10px; height:16px; z-index:41; pointer-events:none; border:1.5px solid var(--choc); border-radius:2px }

@media (max-width:700px){
  .play{ --h:92px; bottom:6px }
  .pl-bubble{ font-size:.86rem }
  .pl-chip{ font-size:.78rem; left:10px }
}

/* --------------------------------------------------------------- responsive */

@media (max-width:880px){
  .hm-heroin{ grid-template-columns:minmax(0,1fr); text-align:left }
  .hm-art{ margin:8px 6px 56px }
  .hm-stamp{ width:92px; height:92px; left:-14px; bottom:-30px }
  .hm-strips1{ grid-template-columns:minmax(0,1fr) }
  .champ-grid{ grid-template-columns:minmax(0,1fr) }
  .champ-reign{ max-width:360px; margin:70px auto 0 }
  .hm-peek{ display:none }
}
@media (max-width:520px){
  .hm-h2 a{ margin:8px 0 0; display:table }
  .hm-ctas .hm-cta{ width:100% }
  .roster-nav{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .hm-stamp{ animation:none }
  .rc, .rc-art{ transition:none }
}

/* --------------------------------------------------------------- player card + search (site-wide modules) */

.pc-scrim, .q-veil{ background:rgba(46,26,15,.55) !important }
.pc-dialog{ border:var(--ink) !important; border-radius:26px !important; box-shadow:0 10px 0 var(--choc) !important }
.pc-close{ background:var(--paper) !important; border:var(--ink2) !important; color:var(--choc) !important }
.q-box{ border:var(--ink) !important; border-radius:22px !important; box-shadow:0 8px 0 var(--choc) !important }
.q-qb{ background:#FFC9BD; color:var(--choc) } .q-rb{ background:#C9EBCF; color:var(--choc) }
.q-wr{ background:#C7E6F7; color:var(--choc) } .q-te{ background:#FFE3A1; color:var(--choc) }
.q-k, .q-dst{ background:var(--sand); color:var(--choc) }
.q-pill{ background:var(--paper) !important; border:var(--ink2) !important; color:var(--choc) !important; box-shadow:var(--hs-xs) }