:root{
  --snow:#F1EFE6;
  --snow-2:#E9E5D7;
  --canvas:#EDE8D8;
  --ink:#1C252B;
  --sky:#397FA8;
  --sky-deep:#245B7C;
  --timber:#8A6548;
  --timber-deep:#5E4330;
  --safety:#E9653A;
  --safety-deep:#B4441C;
  --hair:rgba(28,37,43,.15);
  --hair-strong:rgba(28,37,43,.32);
  --head:"Oswald","Arial Narrow",sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Barlow",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(18px,3.2vw,56px);
}

*{box-sizing:border-box}
html{scrollbar-color:var(--timber) var(--snow-2);scrollbar-width:thin}
html,body{margin:0}
body{
  background:var(--snow);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
::selection{background:var(--safety);color:var(--snow)}
:focus-visible{outline:2px solid var(--sky-deep);outline-offset:3px;border-radius:2px}
h1,h2,h3,p,dl,dd{margin:0}
h1,h2,h3{font-family:var(--head);font-weight:600}

/* One sheet of paper over everything, video included, so hero and page share a tooth. */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  background:url("assets/grain.png") 0 0/320px 320px;
  mix-blend-mode:overlay;opacity:.34;
}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;min-height:clamp(440px,66vh,740px);overflow:hidden;isolation:isolate;background:var(--sky)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;z-index:-2}
.hero-shade{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(28,37,43,.42), rgba(28,37,43,0) 58%),
    radial-gradient(70% 62% at 100% 0%, rgba(28,37,43,.5), rgba(28,37,43,0) 70%),
    linear-gradient(to bottom, rgba(241,239,230,0) 56%, rgba(241,239,230,.5) 80%, var(--snow) 99%);
}
.hero-inner{
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:28px 40px;
  padding:clamp(26px,4.2vw,64px) var(--gutter) 0;
}
.wordmark{display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.crest{width:clamp(84px,8.6vw,138px);height:auto;border-radius:50%;box-shadow:0 14px 30px rgba(16,28,36,.34)}
.the{
  display:block;font-family:var(--head);font-weight:500;color:var(--snow);text-transform:uppercase;
  letter-spacing:.92em;font-size:clamp(13px,1.35vw,22px);margin:0 0 .35em .12em;
  text-shadow:0 2px 14px rgba(16,28,36,.45);
}
.hero h1{
  color:var(--snow);text-transform:uppercase;line-height:.9;letter-spacing:.075em;
  font-size:clamp(52px,7.6vw,96px);text-shadow:0 6px 28px rgba(16,28,36,.42);
}
.tagline{
  display:flex;align-items:center;gap:14px;margin-top:clamp(10px,1.1vw,18px);color:var(--snow);
  font-family:var(--head);font-weight:500;text-transform:uppercase;letter-spacing:.42em;
  font-size:clamp(11px,1.12vw,17px);text-shadow:0 2px 12px rgba(16,28,36,.5);
}
.tagline .rule{display:inline-block;height:3px;width:clamp(30px,5vw,92px);background:var(--safety)}
.hero-meta{
  display:grid;gap:9px;text-align:right;padding-top:clamp(4px,1vw,16px);color:var(--snow);
  text-shadow:0 2px 12px rgba(16,28,36,.55);
}
.hero-meta dt{
  display:inline;font-family:var(--cond);text-transform:uppercase;letter-spacing:.24em;font-size:11.5px;opacity:.82;
}
.hero-meta dt::after{content:"  /  "}
.hero-meta dd{display:inline;font-family:var(--head);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(13px,1.05vw,16px)}

.drift{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(70px,9vw,140px)}
.drift-snow{fill:var(--snow)}
.wind{
  fill:none;stroke:var(--safety);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:gust 2.6s var(--ease) .35s forwards;
}
@keyframes gust{to{stroke-dashoffset:0}}

/* ------------------------------------------------------ the canvas patch */
.patch{
  position:relative;z-index:5;width:min(640px,calc(100% - 2*var(--gutter)));
  margin:calc(-1*clamp(150px,17vw,236px)) var(--gutter) 0 auto;
  padding:clamp(20px,2vw,30px) clamp(22px,2.3vw,36px) clamp(18px,1.8vw,26px);
  background:var(--canvas);border-radius:12px;
  box-shadow:0 22px 44px -18px rgba(28,37,43,.5), 0 3px 8px rgba(28,37,43,.16);
}
.patch::before{ /* stitching, as on the brand board's canvas label */
  content:"";position:absolute;inset:8px;border:1.5px dashed rgba(138,101,72,.62);border-radius:7px;pointer-events:none;
}
.patch-scores{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:6px 18px}
.side{min-width:0}
.side.theirs{text-align:right}
.side-name{
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--timber-deep);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.side-points{font-family:var(--head);font-weight:600;line-height:1;font-size:clamp(46px,5.2vw,76px);letter-spacing:.01em;margin-top:4px}
.side.theirs .side-points{color:var(--timber-deep)}
.side-note{margin-top:4px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:var(--timber-deep)}
.versus{font-family:var(--head);font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:13px;color:var(--safety-deep);padding-bottom:26px}

.gauge{margin-top:clamp(14px,1.4vw,20px);padding-top:clamp(12px,1.2vw,16px);border-top:2px solid var(--ink)}
.gauge-labels{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--timber-deep)}
.gauge-labels strong{font-family:var(--head);font-weight:600;font-size:clamp(22px,2.1vw,30px);letter-spacing:.02em;color:var(--sky-deep);margin-right:6px}
.gauge-labels span:last-child strong{color:var(--timber-deep);margin:0}
.gauge-track{position:relative;height:16px;margin-top:8px;background:var(--timber);border-radius:3px;overflow:hidden}
.gauge-fill{position:absolute;inset:0;background:var(--sky);transform-origin:0 50%;transform:scaleX(.5);transition:transform 1.1s var(--ease)}
.gauge-ticks{ /* a ruler: ten-point divisions */
  position:absolute;inset:0;
  background:repeating-linear-gradient(to right, transparent 0 calc(10% - 1px), rgba(241,239,230,.55) calc(10% - 1px) 10%);
}
.gauge-mark{position:absolute;inset:0;transform:translateX(50%);transition:transform 1.1s var(--ease)}
.gauge-mark::before{content:"";position:absolute;top:0;bottom:0;left:-2px;width:4px;background:var(--safety)}
.gauge-proj{margin-top:9px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--ink)}

/* ---------------------------------------------------------- status line */
.statusline{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:clamp(18px,2.2vw,34px);padding:10px var(--gutter);background:var(--snow);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--timber-deep);
}
/* the scoreboard follows you down: a compact copy docks here once the patch scrolls away */
.mini{display:none;align-items:center;gap:10px;padding-right:16px;margin-right:4px;border-right:1px solid var(--hair-strong);color:var(--ink)}
.statusline.docked .mini{display:inline-flex;animation:dock .5s var(--ease)}
@keyframes dock{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mini img{width:26px;height:26px;border-radius:50%}
.mini b{font-family:var(--head);font-weight:600;font-size:24px;line-height:1;letter-spacing:.01em}
.mini b.theirs{color:var(--timber-deep)}
.mini i{font-style:normal;font-size:11px;letter-spacing:.2em;color:var(--safety-deep)}
.mini em{font-style:normal;font-family:var(--head);font-weight:600;font-size:16px;letter-spacing:.04em;color:var(--sky-deep);margin-left:4px}
.mini-gauge{position:relative;width:clamp(54px,8vw,120px);height:8px;border-radius:2px;background:var(--timber);overflow:hidden}
.mini-gauge span{position:absolute;inset:0;background:var(--sky);transform-origin:0 50%;transform:scaleX(.5);transition:transform 1.1s var(--ease)}
.statusline.docked{box-shadow:0 10px 22px -16px rgba(28,37,43,.6)}
.sl-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--safety);animation:pulse 2.4s infinite}
.live-dot.idle{background:var(--hair-strong);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(233,101,58,.55)}70%{box-shadow:0 0 0 10px rgba(233,101,58,0)}100%{box-shadow:0 0 0 0 rgba(233,101,58,0)}}
.refresh-track{width:clamp(60px,9vw,150px);height:3px;background:var(--hair);border-radius:2px;overflow:hidden}
.refresh-track span{display:block;height:100%;width:0;background:var(--safety)}
#refresh-now{
  font:inherit;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:transparent;cursor:pointer;
  border:1.5px solid var(--ink);border-radius:4px;padding:5px 14px;transition:background .25s var(--ease),color .25s var(--ease);
}
#refresh-now:hover{background:var(--ink);color:var(--snow)}
#refresh-now:active{transform:translateY(1px)}

/* --------------------------------------------------------------- layout */
main{
  display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.9fr);gap:clamp(28px,4vw,72px);align-items:start;
  padding:clamp(30px,3.6vw,56px) var(--gutter) 64px;
}
.section-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
.section-head:not(:first-child){margin-top:clamp(40px,4.4vw,68px)}
.section-head h2{text-transform:uppercase;letter-spacing:.13em;font-size:clamp(24px,2.3vw,34px);line-height:1}
.section-head h2::after{content:"";display:inline-block;width:46px;height:4px;margin-left:16px;background:var(--safety);vertical-align:middle}
.section-head p{font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:12.5px;color:var(--timber-deep)}

/* --------------------------------------------------------------- ledger */
.row{
  display:grid;grid-template-columns:54px 44px minmax(0,1.05fr) minmax(0,1.25fr) 92px;
  grid-template-areas:"slot logo who stat pts";align-items:center;gap:0 14px;
  padding:13px 8px;border-bottom:1px solid var(--hair);transition:background .4s var(--ease);
}
.row.live{background:linear-gradient(90deg,rgba(233,101,58,.10),rgba(233,101,58,0) 72%)}
.row:hover{background:rgba(57,127,168,.07)}
.slot{grid-area:slot;font-family:var(--head);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--sky-deep)}
.jersey{display:block;margin-top:2px;font-family:var(--head);font-weight:600;letter-spacing:.04em;font-size:15px;color:var(--ink)}
.jersey.inline{display:inline;margin:0 0 0 9px;font-family:var(--cond);font-weight:600;letter-spacing:.12em;font-size:12.5px;color:var(--sky-deep)}
.logo{grid-area:logo;width:40px;height:40px;object-fit:contain}
.logo-blank{grid-area:logo;width:40px;height:40px}
.who{grid-area:who;min-width:0}
.name{font-family:var(--head);font-weight:500;font-size:clamp(17px,1.35vw,21px);letter-spacing:.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{margin-top:2px;font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.13em;font-size:12.5px;color:var(--timber-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub .clock-live{color:var(--safety-deep);font-weight:600}
.sub .clock-pre{color:var(--sky-deep)}
.stat{grid-area:stat;font-size:14.5px;line-height:1.4;color:var(--ink)}
.stat.quiet{color:var(--timber-deep)}
.tag{
  display:inline-block;margin-top:5px;padding:2px 9px;border:1.5px solid var(--safety-deep);border-radius:4px;color:var(--safety-deep);
  font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;
}
.tag.injury{border-color:var(--timber-deep);color:var(--timber-deep)}
.pts{grid-area:pts;text-align:right;font-family:var(--head);font-weight:600;font-size:clamp(26px,2.4vw,36px);line-height:1}
.pts.zero{color:rgba(28,37,43,.34);font-weight:400}
.pts.bump{animation:bump 1.4s var(--ease)}
@keyframes bump{0%{color:var(--safety);transform:translateY(-5px)}100%{transform:none}}

.ledger.bench{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:0 clamp(20px,3vw,44px)}
.ledger.bench .row{grid-template-columns:32px minmax(0,1fr) 64px;grid-template-areas:"logo who pts";padding:10px 6px}
.ledger.bench .logo,.ledger.bench .logo-blank{width:30px;height:30px}
.ledger.bench .name{font-size:16px}
.ledger.bench .pts{font-size:22px}

/* ----------------------------------------------------------- fence line */
.col-side{display:grid;gap:clamp(30px,3.2vw,46px)}
.fenceline{
  padding:clamp(20px,2vw,28px);background:var(--sky);color:var(--snow);border-radius:14px;
  box-shadow:0 20px 40px -22px rgba(28,37,43,.55);
}
.fenceline{position:relative;overflow:hidden;isolation:isolate;min-height:300px}
.fenceline::after{ /* the hero's own fence, matted out of the footage */
  content:"";position:absolute;z-index:-1;right:-5%;bottom:-3%;width:88%;aspect-ratio:672/523;
  background:url("assets/fence-cutout.png") right bottom/contain no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 2%,rgba(0,0,0,.55) 38%,#000 70%);
          mask-image:linear-gradient(to right,transparent 2%,rgba(0,0,0,.55) 38%,#000 70%);
}
.dst-name,.dst-meta,.dst-pts,.part b,.part span,.fl-sub{text-shadow:0 1px 10px rgba(22,58,82,.75)}
.fenceline h3{text-transform:uppercase;letter-spacing:.15em;font-size:20px}
.fl-sub{margin-top:4px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.17em;font-size:12px;color:rgba(241,239,230,.86)}
.dst{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:16px 0 4px;margin-top:14px;border-top:1px solid rgba(241,239,230,.34)}
.dst-logo{width:46px;height:46px;padding:6px;border-radius:50%;background:var(--snow);object-fit:contain}
.dst-name{font-family:var(--head);font-weight:500;font-size:20px;letter-spacing:.03em}
.dst-meta{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:rgba(241,239,230,.88)}
.dst-pts{font-family:var(--head);font-weight:600;font-size:38px;line-height:1}
.dst-parts{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;margin-top:8px}
.part{padding-top:7px;border-top:2px solid rgba(241,239,230,.5)}
.part.hot{border-top-color:var(--safety)}
.part b{display:block;font-family:var(--head);font-weight:600;font-size:21px;line-height:1.05}
.part span{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;font-size:11px;color:rgba(241,239,230,.9)}

/* scores ride on a cream plaque so they never sink into the timber */
.dst-pts{
  min-width:92px;padding:5px 12px 6px;text-align:center;text-shadow:none;color:var(--ink);background:var(--canvas);
  border-radius:7px;box-shadow:0 6px 14px -6px rgba(16,40,58,.7);
}
.dst-parts{padding:10px 12px 11px;border-radius:9px;background:rgba(31,84,116,.82)}
.part{border-top:0;padding-top:0}
.part.hot b{color:#FFC9B3}

/* ---------------------------------------------------------- side lists */
.list-block h3{text-transform:uppercase;letter-spacing:.15em;font-size:19px;padding-bottom:9px;border-bottom:2px solid var(--ink)}
.lb-sub{margin:8px 0 2px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.17em;font-size:12px;color:var(--timber-deep)}
.line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 2px;border-bottom:1px solid var(--hair)}
.line-name{min-width:0;font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.1em;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.line-name em{font-style:normal;color:var(--sky-deep);margin-right:8px;font-family:var(--head);letter-spacing:.12em;font-size:12px}
.line-name small{font-size:12px;letter-spacing:.12em;color:var(--timber-deep);margin-left:8px}
.line-val{font-family:var(--head);font-weight:500;font-size:18px;white-space:nowrap}
.line.on .line-name{color:var(--safety-deep)}
.line.lead .line-val{color:var(--sky-deep);font-weight:600}
.line.me{background:rgba(57,127,168,.10)}
.line.gap{margin-top:10px}
.line .state{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--timber-deep);white-space:nowrap}
.line.in .state{color:var(--safety-deep);font-weight:600}
.empty{padding:10px 2px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.15em;font-size:12.5px;color:var(--timber-deep)}

/* ------------------------------------------------------------------ reel */
.reel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(14px,1.8vw,26px);padding-top:16px}
.reel-stage video{display:block;width:100%;aspect-ratio:16/9;background:var(--ink);border-radius:12px;box-shadow:0 20px 40px -22px rgba(28,37,43,.6)}
.reel-caption{margin-top:10px;font-family:var(--head);font-weight:500;font-size:18px;line-height:1.25;text-wrap:balance}
.reel-strip{display:grid;gap:0;align-content:start;max-height:min(420px,52vh);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--timber) var(--snow-2)}
.clip{
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:center;width:100%;padding:9px 4px;text-align:left;
  font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--hair);cursor:pointer;transition:background .25s var(--ease);
}
.clip:hover,.clip.playing{background:rgba(57,127,168,.10)}
.clip img{width:104px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--snow-2)}
.clip b{display:block;font-family:var(--head);font-weight:500;font-size:14.5px;line-height:1.25}
.clip em{display:block;margin-top:3px;font-style:normal;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;color:var(--sky-deep)}
.clip.theirs em{color:var(--timber-deep)}
.posted{display:block;margin-top:3px;font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;color:var(--timber-deep)}
.posted.fresh{color:var(--safety-deep);font-weight:600}
.reel-caption .posted{margin-top:5px;font-size:12.5px}

.watch{
  display:inline-block;margin-left:8px;padding:1px 8px;border:1.5px solid var(--sky-deep);border-radius:4px;color:var(--sky-deep);text-decoration:none;
  font-family:var(--cond);font-weight:600;letter-spacing:.13em;font-size:11px;transition:background .25s var(--ease),color .25s var(--ease);
}
.watch:hover{background:var(--sky-deep);color:var(--snow)}
.line .watch{margin-left:10px}

.toast{
  position:fixed;z-index:45;left:50%;bottom:26px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;
  width:min(520px,calc(100vw - 32px));padding:10px 16px 10px 10px;text-align:left;font:inherit;color:var(--snow);cursor:pointer;
  background:var(--ink);border:0;border-radius:12px;box-shadow:0 24px 50px -18px rgba(28,37,43,.75);
  transform:translate(-50%,160%);transition:transform .7s var(--ease);
}
.toast.show{transform:translate(-50%,0)}
.toast img{width:96px;aspect-ratio:16/9;object-fit:cover;border-radius:7px}
.toast b{display:block;font-family:var(--head);font-weight:500;font-size:16px;line-height:1.25}
.toast em{display:block;margin-top:4px;font-style:normal;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:11.5px;color:#F6A98C}

/* ------------------------------------------------------------------ gust */
.gust{position:fixed;inset:0;z-index:55;pointer-events:none;visibility:hidden}
.gust svg{position:absolute;inset:0;width:100%;height:100%}
.gust path{fill:none;stroke:var(--safety);stroke-linecap:round;stroke-dasharray:.42 1;stroke-dashoffset:.42}
.gust path:nth-child(1){stroke-width:9}
.gust path:nth-child(2){stroke-width:5;stroke:var(--snow)}
.gust path:nth-child(3){stroke-width:12}
.gust path:nth-child(4){stroke-width:5;stroke:var(--sky)}
.gust path:nth-child(5){stroke-width:7;stroke:var(--snow)}
.gust-card{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:clamp(18px,2.4vw,34px) var(--gutter);
  background:var(--ink);color:var(--snow);clip-path:inset(0 100% 0 0);
}
.gust-name{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.06em;line-height:1;font-size:clamp(34px,6vw,92px)}
.gust-note{margin-top:10px;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:clamp(13px,1.3vw,19px);color:#F6A98C}
.gust.blow{visibility:visible}
.gust.blow path{animation:sweep 1.5s var(--ease) forwards}
.gust.blow path:nth-child(2){animation-delay:.10s}
.gust.blow path:nth-child(3){animation-delay:.18s}
.gust.blow path:nth-child(4){animation-delay:.26s}
.gust.blow path:nth-child(5){animation-delay:.05s}
.gust.blow .gust-card{animation:banner 3.6s var(--ease) .2s forwards}
@keyframes sweep{from{stroke-dashoffset:.42}to{stroke-dashoffset:-1.05}}
@keyframes banner{
  0%{clip-path:inset(0 100% 0 0)}
  16%,80%{clip-path:inset(0 0 0 0)}
  100%{clip-path:inset(0 0 0 100%)}
}

/* rows open the player drawer */
[data-player]{cursor:pointer}
[data-player]:focus-visible{outline-offset:-2px}
.line[data-player]:hover{background:rgba(57,127,168,.08)}
.dst[data-player]:hover .dst-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* --------------------------------------------------------------- drawer */
.drawer{
  position:fixed;z-index:40;top:0;right:0;bottom:0;width:min(540px,100vw);display:flex;flex-direction:column;
  background:var(--snow);border-left:2px solid var(--ink);box-shadow:-30px 0 60px -30px rgba(28,37,43,.55);
  transform:translateX(104%);transition:transform .55s var(--ease);
}
.drawer.open{transform:none}
.dr-head{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 20px;align-items:center;
  min-height:168px;padding:20px 24px 0;background:var(--sky);color:var(--snow);overflow:hidden}
.dr-portrait{
  position:relative;align-self:center;width:132px;height:132px;margin:0 0 20px;border-radius:50%;overflow:hidden;
  background:var(--snow);box-shadow:0 0 0 4px var(--snow),0 14px 26px -10px rgba(16,40,58,.75);
}
.dr-crest{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;opacity:.26}
.dr-shot{position:absolute;left:50%;bottom:0;width:128%;max-width:none;transform:translateX(-50%);object-fit:contain}
.dr-portrait.no-shot .dr-crest{opacity:1;inset:16%;width:68%;height:68%}
.dr-portrait.no-shot .dr-shot{display:none}
.dr-id{padding:14px 0 20px;min-width:0}
.dr-id h2{font-size:clamp(26px,2.4vw,34px);line-height:1;letter-spacing:.03em;text-transform:uppercase;text-wrap:balance}
.dr-id p{margin-top:7px;font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.15em;font-size:12.5px;color:rgba(241,239,230,.94)}
.dr-id p:empty{display:none}
.dr-close{
  position:absolute;top:14px;right:16px;font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.2em;font-size:12px;
  color:var(--snow);background:rgba(28,37,43,.28);border:1.5px solid rgba(241,239,230,.7);border-radius:4px;padding:5px 12px;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.dr-close:hover{background:var(--snow);color:var(--ink)}
.dr-body{flex:1;overflow-y:auto;padding:22px 24px 40px;scrollbar-color:var(--timber) var(--snow-2);scrollbar-width:thin}
.dr-sec{margin-top:30px}
.dr-sec:first-child{margin-top:0}
.dr-sec h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-transform:uppercase;letter-spacing:.15em;font-size:17px;padding-bottom:8px;border-bottom:2px solid var(--ink)}
.dr-sec h3 small{font-family:var(--cond);font-weight:500;letter-spacing:.15em;font-size:12px;color:var(--timber-deep)}
.dr-now{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:14px 0 6px}
.dr-now b{font-family:var(--head);font-weight:600;font-size:64px;line-height:.9}
.dr-now span{font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:13px;color:var(--timber-deep);text-align:right;line-height:1.5}
.dr-line{font-size:15px;line-height:1.45;padding:6px 0 4px}
.dr-table{width:100%;border-collapse:collapse;margin-top:4px}
.dr-table th{font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--timber-deep);text-align:left;padding:9px 6px 6px 0;border-bottom:1px solid var(--hair-strong)}
.dr-table td{padding:9px 6px 9px 0;border-bottom:1px solid var(--hair);font-size:14.5px;vertical-align:baseline}
.dr-table .n{text-align:right;font-family:var(--head);font-weight:500;font-size:17px;white-space:nowrap;padding-right:0}
.dr-table th.n{font-family:var(--cond);font-size:11.5px}
.dr-table .k{font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.dr-table tfoot td{border-bottom:0;border-top:2px solid var(--ink);font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px}
.play{display:grid;grid-template-columns:70px minmax(0,1fr);gap:0 12px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:14px;line-height:1.4}
.play time{font-family:var(--cond);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--sky-deep);padding-top:1px}
.play.score time{color:var(--safety-deep)}
.dr-loading{padding:30px 0;font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:var(--timber-deep)}

footer{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:20px var(--gutter) 44px;border-top:2px solid var(--ink);
  font-family:var(--cond);font-weight:500;text-transform:uppercase;letter-spacing:.18em;font-size:12px;color:var(--timber-deep);
}

/* ------------------------------------------------------------ responsive */
@media (max-width:1100px){
  main{grid-template-columns:1fr}
  .hero-meta{text-align:left}
  .hero-shade{background:
    linear-gradient(to bottom, rgba(28,37,43,.46) 0%, rgba(28,37,43,.30) 48%, rgba(28,37,43,0) 66%),
    linear-gradient(to bottom, rgba(241,239,230,0) 60%, rgba(241,239,230,.5) 82%, var(--snow) 99%)}
}
@media (max-width:760px){
  .reel{grid-template-columns:1fr}
  .patch{margin-left:auto;margin-right:auto}
  .row{grid-template-columns:44px 36px minmax(0,1fr) 72px;grid-template-areas:"slot logo who pts" ". . stat stat";row-gap:4px}
  .logo,.logo-blank{width:34px;height:34px}
  .sl-right{margin-left:0}
  .statusline.docked .sl-right{display:none}          /* on a phone the docked bar is score first */
  .statusline.docked{flex-wrap:nowrap;gap:10px}
  .statusline.docked #games-live{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mini{gap:8px;padding-right:12px}
  .mini b{font-size:22px}
  .hero h1{letter-spacing:.05em}
  .tagline{letter-spacing:.26em;font-size:11px;gap:10px;white-space:nowrap}
  .tagline .rule{width:20px}
  .hero-meta dt{opacity:1}
}
/* ------------------------------------------------ touch, notches, home-screen app */
@media (pointer:coarse){
  .watch{position:relative;padding:3px 10px;font-size:11.5px}
  .watch::after{content:"";position:absolute;inset:-11px -8px}   /* finger-sized hit area, small label */
  #refresh-now{padding:10px 18px}
  .dr-close{padding:10px 16px}
  .clip{padding:11px 4px}
  .line{padding:11px 2px}
}
@media (max-width:760px){
  .sub{white-space:normal;line-height:1.55}
  .bench .sub,.ledger.bench .sub{white-space:normal}
  .hero-inner{gap:18px}
  .drawer{width:100vw;border-left:0}
  .dr-head{grid-template-columns:104px minmax(0,1fr);gap:0 16px;padding-left:18px;padding-right:18px}
  .dr-portrait{width:104px;height:104px}
  .dr-body{padding-left:18px;padding-right:18px}
  .dr-now b{font-size:54px}
  .gust-card{padding-top:22px;padding-bottom:22px}
  .toast{bottom:16px}
}
.hero-inner{padding-top:calc(clamp(26px,4.2vw,64px) + env(safe-area-inset-top))}
.statusline{padding-top:calc(10px + env(safe-area-inset-top) * .0)}
.dr-head{padding-top:calc(20px + env(safe-area-inset-top))}
.dr-close{top:calc(14px + env(safe-area-inset-top))}
.dr-body{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.toast{margin-bottom:env(safe-area-inset-bottom)}
footer{padding-bottom:calc(44px + env(safe-area-inset-bottom))}
main,.statusline,footer,.hero-inner{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
@media (display-mode:standalone){
  .statusline{top:0;padding-top:calc(10px + env(safe-area-inset-top))}
}
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none}
.row,.line,.clip,.watch,button{-webkit-tap-highlight-color:rgba(57,127,168,.18)}

@media (prefers-reduced-motion:reduce){
  .drawer,.toast{transition:none}
  .statusline.docked .mini{animation:none}
  .gust.blow path{animation:none}
  .gust.blow .gust-card{animation:none;clip-path:none;opacity:1}
  .wind{animation:none;stroke-dashoffset:0}
  .live-dot,.pts.bump{animation:none}
  *{transition:none!important}
}