/* Crab Derby
   The sunset bay is the page itself; everything on it is a plank sign with rope edges.
   Color: bay #0d3a42, deep #082a30, tide #145059, chalk #f2e9d2, foam #8ccfd8, shell #ff5a2e, plank #4a3421, rope #d9b98a
   Type: Alfa Slab One (boardwalk sign lettering) + Barlow Semi Condensed (tote numerals and body)
   Layout: single left-aligned column, 1120 wide; big badge header, full-width framed track, tote beside the slip, then the take and the ledger. */
:root{
  --bay:#0d3a42; --deep:#082a30; --tide:#145059; --tide-2:#0f444c;
  --chalk:#f2e9d2; --chalk-dim:#c4d2cf; --foam:#8ccfd8; --shell:#ff5a2e; --shell-deep:#8a2a0f; --shell-light:#ffb088;
  --plank:#4a3421; --plank-2:#2f2015; --rope:#d9b98a; --rope-dim:rgba(217,185,138,.45);
  --win:#8af0ad; --lose:#ff9a7a; --line:rgba(242,233,210,.18);
  --display:"Alfa Slab One",Rockwell,"Roboto Slab",Georgia,serif;
  --body:"Barlow Semi Condensed","Arial Narrow","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bay);color:var(--chalk);font-family:var(--body);font-size:18px;line-height:1.45;position:relative;overflow-x:hidden}
/* the bay at dusk behind everything, with a slow band of light crossing it */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:url(/static/img/backdrop.jpg) center top/cover no-repeat;opacity:.75}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,42,48,.35),rgba(8,42,48,.6) 45%,rgba(8,42,48,.82)),
             linear-gradient(115deg,transparent 35%,rgba(255,176,90,.14) 50%,transparent 65%);
  background-size:100% 100%,300% 300%;animation:drift 18s linear infinite}
@keyframes drift{from{background-position:0 0,120% 0}to{background-position:0 0,-120% 0}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}
a{color:var(--foam)}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--shell);outline-offset:3px}
img{max-width:100%;height:auto}
.gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:1120px;margin:0 auto}

/* header: a boardwalk plank band with the badge hung on it */
.plank{background:linear-gradient(180deg,rgba(40,26,14,.35),rgba(40,26,14,.6)),url(/static/img/planks.jpg) center/auto 100% repeat-x,var(--plank);
  border-top:4px solid var(--rope);border-bottom:4px solid var(--rope);box-shadow:inset 0 0 0 3px var(--plank-2),inset 0 0 0 5px var(--rope-dim),0 12px 30px rgba(0,0,0,.45)}
.plank .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 24px;padding-block:14px}
/* the nav never squeezes into tall boxes: links stay on one line, and below 1240px the whole row drops under the brand */
@media (max-width:1240px){
  .plank .wrap{grid-template-columns:minmax(0,1fr) auto}
  .plank .brand{grid-column:1;grid-row:1}
  .plank .bank,.plank .wrap>.btn{grid-column:2;grid-row:1;justify-self:end}
  .plank nav.top{grid-column:1/-1;grid-row:2;justify-content:flex-start}}
@media (max-width:720px){.plank nav.top{justify-content:center}}
.brand{display:flex;align-items:center;gap:18px;text-decoration:none;color:var(--chalk);min-width:0}
.brand img{width:136px;height:136px;flex:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}
@media (max-width:720px){.brand img{width:92px;height:92px}}
.brand b{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,56px);line-height:1;letter-spacing:.5px;white-space:nowrap;text-shadow:0 3px 0 var(--plank-2),0 6px 18px rgba(0,0,0,.5)}
.brand small{display:block;font-size:17px;color:var(--rope);margin-top:6px;text-shadow:0 1px 0 rgba(0,0,0,.6)}
nav.top{display:flex;flex-wrap:wrap;gap:10px 12px;font-size:17px;justify-content:center;min-width:0}
nav.top a{color:var(--rope);text-decoration:none;border:2px solid var(--rope-dim);border-radius:4px;padding:6px 12px;background:rgba(8,42,48,.35);white-space:nowrap}
nav.top a:hover,nav.top a[aria-current]{border-color:var(--rope);color:var(--chalk)}
.bank{text-align:right;line-height:1;background:rgba(8,42,48,.55);border:3px solid var(--rope);border-radius:6px;padding:10px 16px;box-shadow:inset 0 0 0 2px var(--plank-2)}
.bank b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,44px);font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 2px 0 var(--plank-2)}
.bank span{font-size:15px;color:var(--rope)}
.bank.btn-link{text-decoration:none;color:var(--chalk);font-weight:700;font-size:17px;display:inline-block}

/* the speaker: a small sign fixed to the corner, remembered per browser */
.sound{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:20;font:inherit;font-weight:700;font-size:15px;padding:9px 14px 9px 36px;border:2px solid var(--rope);border-radius:24px;cursor:pointer;color:var(--chalk);
  background:linear-gradient(180deg,rgba(40,26,14,.5),rgba(40,26,14,.8)),url(/static/img/planks.jpg) center/auto 100% repeat-x,var(--plank);box-shadow:0 6px 18px rgba(0,0,0,.5);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.sound::before{content:"";position:absolute;left:12px;top:50%;width:14px;height:14px;transform:translateY(-50%);border-radius:50%;background:var(--chalk-dim);box-shadow:inset 0 0 0 3px var(--plank-2)}
.sound[aria-pressed="true"]::before{background:var(--shell);box-shadow:0 0 10px rgba(255,90,46,.8),inset 0 0 0 3px var(--plank-2)}
.sound:hover{color:#fff}

/* the track in a plank frame */
.track-wrap{padding-block:24px 10px}
.track{position:relative;overflow:hidden;background:var(--deep);
  border:22px solid transparent;border-image:url(/static/img/planks.jpg) 90 round;
  box-shadow:0 0 0 3px var(--rope),0 0 0 6px var(--plank-2),0 24px 60px rgba(0,0,0,.55),inset 0 0 0 3px var(--rope-dim)}
.track canvas{display:block;width:100%;height:auto;max-width:100%}
.theater-btn{position:absolute;top:12px;right:14px;z-index:2;font:inherit;font-weight:700;font-size:14px;padding:6px 12px;border:2px solid var(--rope-dim);border-radius:4px;background:rgba(8,42,48,.85);color:var(--chalk);cursor:pointer}
.theater-btn:hover{border-color:var(--rope);color:#fff}
/* the lightbox: the frame fills the screen, the canvas sits centered at the largest size that fits */
.track.theater{position:fixed;inset:0;z-index:60;border:0;border-image:none;border-radius:0;box-shadow:none;background:rgba(5,24,28,.97);display:grid;place-items:center;padding:12px}
.track.theater canvas{max-width:none;border:10px solid transparent;border-image:url(/static/img/planks.jpg) 60 round;box-shadow:0 0 0 3px var(--rope),0 30px 80px rgba(0,0,0,.7)}
.track.theater .flag{top:18px;left:50%;font-size:20px;padding:8px 18px}
.track.theater .theater-btn{top:18px;right:22px;font-size:16px;padding:8px 16px;border-color:var(--rope)}
body.theater-open{overflow:hidden}
.track .flag{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:var(--chalk);color:var(--deep);font-weight:700;font-size:17px;padding:6px 14px;border-radius:3px;box-shadow:0 3px 0 var(--plank-2)}
.track .daily{position:absolute;bottom:12px;right:14px;background:rgba(8,42,48,.85);color:var(--chalk);font-size:15px;padding:6px 12px;border-radius:3px;border:1px solid var(--rope-dim);font-variant-numeric:tabular-nums}

/* the public race board */
.pub{padding-block:14px 48px}
.pub-head{display:grid;grid-template-columns:1fr auto;gap:6px 18px;align-items:center}
.pub-head>b{font-family:var(--display);font-weight:400;font-size:clamp(20px,3vw,28px);line-height:1.15;color:#fff;text-shadow:0 2px 0 var(--plank-2)}
.pub-head>span#pub-race{font-size:15px;color:var(--chalk-dim)}
.pub-bucks{grid-column:2;grid-row:1/3;text-align:right;background:rgba(8,42,48,.6);border:2px solid var(--rope);border-radius:6px;padding:8px 14px}
.pub-bucks small{display:block;font-size:13px;color:var(--rope)}
.pub-bucks b{font-family:var(--display);font-weight:400;font-size:28px;color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:600px){.pub-head{grid-template-columns:1fr}.pub-bucks{grid-column:1;grid-row:auto;text-align:left}}
.pub-field{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.pub-field li{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:8px 10px 8px 8px;border:2px solid var(--rope-dim);border-radius:8px;background:linear-gradient(180deg,rgba(8,42,48,.75),rgba(8,42,48,.55))}
.pub-field .bib{position:relative;width:64px;height:64px;display:grid;place-items:center;font-family:var(--display);font-size:24px}
.pub-field .bib img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55))}
.pub-field .name{font-family:var(--display);font-size:18px;line-height:1.1;min-width:0}
.pub-field .name small{display:block;font-family:var(--body);font-size:13px;color:var(--chalk-dim);margin-top:2px}
.pub-field .pool{grid-column:2;text-align:left;font-variant-numeric:tabular-nums;line-height:1.1}
.pub-field .pool b{font-family:var(--display);font-weight:400;font-size:17px;color:#fff}
.pub-field .pool small{display:block;font-size:13px;color:var(--chalk-dim);margin-top:2px}
.pub-field .pub-bet{grid-column:3;grid-row:1/3;font-size:16px;padding:9px 16px;border-color:var(--shell);background:linear-gradient(180deg,#ff8a5e,#ff5a2e 48%,#e04a22 52%,#c93f1c);color:#fff;box-shadow:0 4px 0 var(--shell-deep);text-shadow:0 2px 0 var(--shell-deep)}
.pub-field .pub-bet[disabled]{opacity:.45;cursor:default}
.pub-name{max-width:320px}
.borrow{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 12px;border:2px dashed var(--rope-dim);border-radius:8px;background:rgba(8,42,48,.45)}
.borrow .note{margin:0}
/* tickets: chalk stubs with a perforated end */
.tickets-wrap{display:grid;gap:8px}
.tickets-title{font-family:var(--display);font-size:20px;color:var(--rope);text-shadow:0 2px 0 rgba(0,0,0,.5)}
.tickets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ticket{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:10px;align-items:stretch;background:var(--chalk);color:var(--deep);border-radius:8px;padding:0 0 0 10px;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 0 0 2px rgba(74,52,33,.25);
  background-image:repeating-linear-gradient(180deg,transparent 0 6px,rgba(74,52,33,.05) 6px 7px)}
.ticket>img,.ticket-body{align-self:center;padding-block:10px}
.ticket img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.ticket-body{min-width:0;display:grid;gap:2px}
.ticket-body small{font-size:12px;color:#5a4a3a;letter-spacing:.3px}
.ticket-body b{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.1;color:#2a1a0e}
.ticket-body span{font-size:14px;color:#4a3a2e;font-variant-numeric:tabular-nums}
.ticket-stub{position:relative;min-width:88px;padding:10px 12px;display:grid;place-items:center;align-content:center;gap:2px;border-left:2px dashed rgba(74,52,33,.5);background:rgba(255,90,46,.12);color:var(--shell-deep);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.ticket-stub b{font-family:var(--display);font-weight:400;font-size:22px}
.ticket-stub small{font-size:11px;color:#7a2a12}
/* the perforation notches sit on the stub's own edge */
.ticket-stub::before,.ticket-stub::after{content:"";position:absolute;left:-9px;width:16px;height:16px;border-radius:50%;background:var(--tide)}
.ticket-stub::before{top:-8px}.ticket-stub::after{bottom:-8px}
.ticket--won .ticket-stub{background:rgba(46,125,79,.18);color:#1f5c3a}.ticket--won .ticket-stub small{color:#1f5c3a}
.ticket--lost{opacity:.72}.ticket--lost .ticket-stub{background:rgba(74,52,33,.12);color:#7a2a12}
.ticket--lost .ticket-body b{text-decoration:line-through;text-decoration-color:rgba(122,42,18,.6)}
.collectors{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px;font-variant-numeric:tabular-nums}
.collectors li{display:flex;justify-content:space-between;gap:12px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:rgba(8,42,48,.5)}
.collectors li.me{border-color:var(--shell);color:var(--shell)}
.collectors b{font-family:var(--display);font-weight:400;font-size:18px;color:#fff}
.collectors li.me b{color:var(--shell)}
.pubresult{align-content:start}
.pub-slip{display:grid;grid-template-columns:200px 1fr;gap:6px 18px;align-items:end}
@media (max-width:600px){.pub-slip{grid-template-columns:1fr}}
.pub-slip label{grid-column:1}
.pub-slip input{grid-column:1}
.pub-slip .note{grid-column:2;grid-row:1/3;align-self:center}
@media (max-width:600px){.pub-slip .note{grid-column:1;grid-row:auto}}

/* chalk odds ticker under the track */
.ticker{margin-top:14px;overflow:hidden;background:rgba(8,42,48,.8);border:2px solid var(--rope-dim);border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-run{display:inline-flex;white-space:nowrap;gap:0;padding:8px 0;font-size:18px;font-variant-numeric:tabular-nums;animation:ticker 40s linear infinite;will-change:transform}
.ticker-run span{padding:0 22px;border-right:1px solid var(--rope-dim);color:var(--chalk)}
.ticker-run span b{font-family:var(--display);font-weight:400;color:#fff;margin-left:8px}
.ticker-run span i{font-style:normal;color:var(--rope);margin-right:8px}
.ticker:hover .ticker-run{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-run{animation:none}}

/* boards: plank signs with rope rings. The tote takes the left column; the slip and the take stack on the right. */
.paddock{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);grid-template-rows:auto 1fr;gap:16px 28px;padding-block:14px 16px}
.paddock .tote{grid-row:1/3;grid-template-rows:auto auto 1fr}
.paddock .tote .runners{align-content:space-between}
@media (max-width:820px){.paddock{grid-template-columns:1fr}.paddock .tote{grid-row:auto}}
.winner[hidden]{display:none}
.winner{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;background:rgba(8,42,48,.7);border:2px solid var(--rope);border-radius:8px;padding:10px 14px 10px 10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.winner img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(255,140,60,.85))}
.winner .winner-label{display:block;font-size:14px;color:var(--rope);letter-spacing:.3px}
.winner b{display:block;font-family:var(--display);font-weight:400;font-size:26px;line-height:1.1;color:#fff;text-shadow:0 2px 0 var(--plank-2)}
.winner span:last-child{display:block;font-size:16px;color:var(--chalk-dim);margin-top:4px}
.board{min-width:0;position:relative;background:linear-gradient(180deg,rgba(20,80,89,.92),rgba(12,58,66,.94));border:3px solid var(--rope);border-radius:10px;
  padding:16px 18px 20px;display:grid;gap:12px;align-content:start;
  box-shadow:0 0 0 7px var(--plank),0 0 0 9px var(--rope-dim),0 0 0 11px var(--plank-2),0 22px 50px rgba(0,0,0,.5),inset 0 0 0 1px rgba(242,233,210,.08);
  margin:11px}
.board>h2{font-family:var(--display);font-weight:400;font-size:26px;margin:0;letter-spacing:.3px;padding:10px 16px;color:var(--chalk);
  background:linear-gradient(180deg,rgba(40,26,14,.35),rgba(40,26,14,.6)),url(/static/img/planks.jpg) center/auto 100% repeat-x,var(--plank);
  border:2px solid var(--rope);border-radius:6px;text-shadow:0 2px 0 var(--plank-2);box-shadow:0 4px 0 var(--plank-2)}
.board>p{margin:0;color:var(--chalk-dim);font-size:17px}

.runners{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.runner{display:grid;grid-template-columns:88px 1fr auto;gap:14px;align-items:center;width:100%;padding:8px 14px 8px 8px;border:2px solid var(--rope-dim);border-radius:8px;
  background:linear-gradient(180deg,rgba(8,42,48,.75),rgba(8,42,48,.55));color:var(--chalk);font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.runner:hover{border-color:var(--rope);background:rgba(8,42,48,.9)}
.runner[aria-checked="true"]{border-color:var(--shell);box-shadow:0 0 0 3px rgba(255,90,46,.35),0 0 24px rgba(255,90,46,.35);background:rgba(20,80,89,.95)}
.runner .bib{position:relative;width:88px;height:88px;display:grid;place-items:center;font-family:var(--display);font-size:30px;color:var(--chalk);flex:none}
.runner .bib img{width:88px;height:88px;object-fit:contain;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55))}
.runner[aria-checked="true"] .bib img{filter:drop-shadow(0 0 10px rgba(255,120,60,.9))}
.runner .name{font-weight:700;font-size:22px;line-height:1.1;min-width:0;font-family:var(--display);font-weight:400}
.runner .name small{display:block;font-family:var(--body);font-size:15px;color:var(--chalk-dim);margin-top:3px}
.runner .odds{text-align:right;line-height:1;font-variant-numeric:tabular-nums}
.runner .odds b{display:block;font-family:var(--display);font-weight:400;font-size:26px;color:#fff;text-shadow:0 2px 0 var(--plank-2)}
.runner .odds small{display:block;font-size:14px;color:var(--chalk-dim);margin-top:5px}
@media (max-width:480px){
  .runner{grid-template-columns:64px 1fr;grid-template-rows:auto auto;gap:4px 12px}
  .runner .bib{grid-row:1/3}.runner .bib,.runner .bib img{width:64px;height:64px}
  .runner .name{font-size:19px}
  .runner .odds{text-align:left;display:flex;align-items:baseline;gap:10px}.runner .odds b{font-size:22px}.runner .odds small{margin:0}}

.board label{display:block;font-family:var(--display);font-size:19px;color:var(--rope);margin-bottom:6px;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.board input[type=number],.board input[type=text]{width:100%;font:inherit;font-weight:700;font-size:22px;padding:10px 14px;border:2px solid var(--rope-dim);border-radius:6px;background:rgba(8,42,48,.85);color:var(--chalk);font-variant-numeric:tabular-nums;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{font:inherit;font-weight:700;font-size:16px;padding:8px 14px;border:2px solid var(--rope-dim);background:rgba(8,42,48,.85);color:var(--chalk);border-radius:20px;cursor:pointer;box-shadow:0 3px 0 var(--plank-2)}
.chips button:hover{border-color:var(--rope);color:#fff}
/* the sign that starts the race */
.go{position:relative;font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:1px;padding:18px 16px;border:3px solid var(--shell-light);border-radius:8px;cursor:pointer;width:100%;color:#fff;
  background:linear-gradient(180deg,#ff8a5e,#ff5a2e 48%,#e04a22 52%,#c93f1c);text-shadow:0 3px 0 var(--shell-deep),0 0 18px rgba(255,200,150,.35);
  outline:3px dashed rgba(255,255,255,.5);outline-offset:-10px;
  box-shadow:0 8px 0 var(--shell-deep),0 0 0 4px var(--plank-2),0 0 0 6px var(--rope-dim),0 18px 40px rgba(255,90,46,.35);
  animation:beacon 2.8s ease-in-out infinite;transition:transform .08s}
.go:hover{filter:brightness(1.06)}
.go:active{transform:translateY(5px);box-shadow:0 3px 0 var(--shell-deep),0 0 0 4px var(--plank-2),0 0 0 6px var(--rope-dim)}
.go[disabled]{opacity:.6;cursor:default;animation:none;transform:none}
@keyframes beacon{0%,100%{box-shadow:0 8px 0 var(--shell-deep),0 0 0 4px var(--plank-2),0 0 0 6px var(--rope-dim),0 18px 40px rgba(255,90,46,.3)}50%{box-shadow:0 8px 0 var(--shell-deep),0 0 0 4px var(--plank-2),0 0 0 6px var(--rope-dim),0 18px 56px rgba(255,120,60,.6)}}
@media (prefers-reduced-motion:reduce){.go{animation:none}}
.result{font-weight:700;font-size:20px;min-height:1.5em;margin:0}
.result.win{color:var(--win)}.result.lose{color:var(--lose)}
.payout{font-size:16px;color:var(--chalk-dim);font-variant-numeric:tabular-nums;margin:0}

/* the take and the ledger */
.lower{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:28px;padding-block:0 28px}
@media (max-width:820px){.lower{grid-template-columns:1fr}}
.take .big{font-family:var(--display);font-weight:400;font-size:clamp(44px,6vw,64px);line-height:1;color:var(--shell);font-variant-numeric:tabular-nums;text-shadow:0 3px 0 var(--shell-deep),0 0 24px rgba(255,90,46,.4)}
.take dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-variant-numeric:tabular-nums;font-size:18px}
.take dt{color:var(--chalk-dim)}.take dd{margin:0;text-align:right;font-weight:700;color:#fff}
.meter{height:14px;background:rgba(8,42,48,.9);border-radius:7px;overflow:hidden;border:1px solid var(--rope-dim)}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--shell-deep),var(--shell));width:0;transition:width .4s}
@media (prefers-reduced-motion:reduce){.meter i{transition:none}}
.ledger table,.leader table{width:100%;border-collapse:collapse;font-size:17px;font-variant-numeric:tabular-nums}
.ledger th,.leader th{text-align:left;font-weight:700;color:var(--rope);padding:6px 8px;border-bottom:2px solid var(--rope-dim)}
.ledger td,.leader td{padding:8px;border-bottom:1px solid var(--line)}
.r{text-align:right}
.ledger td.win{color:var(--win);font-weight:700}.ledger td.lose{color:var(--lose);font-weight:700}
.scroll{overflow-x:auto}

/* leaderboard */
section.leader{padding-block:0 32px}
.lower{padding-bottom:48px}
.leader .board{grid-template-columns:1fr}
.leader form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
@media (max-width:520px){.leader form{grid-template-columns:1fr}}
.leader tr.me td{color:var(--shell);font-weight:700}
.btn{font:inherit;font-weight:700;font-size:18px;padding:11px 18px;border:2px solid var(--rope);background:linear-gradient(180deg,rgba(40,26,14,.4),rgba(40,26,14,.7)),url(/static/img/planks.jpg) center/auto 100% repeat-x,var(--plank);color:var(--chalk);border-radius:6px;cursor:pointer;text-decoration:none;display:inline-block;box-shadow:0 4px 0 var(--plank-2);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.btn:hover{color:#fff;filter:brightness(1.1)}
.note{font-size:16px;color:var(--chalk-dim);margin:0}

footer{border-top:4px solid var(--rope);padding-block:20px 44px;font-size:16px;color:var(--chalk-dim);background:linear-gradient(180deg,rgba(40,26,14,.5),rgba(40,26,14,.75)),url(/static/img/planks.jpg) center/auto 100% repeat-x,var(--plank);box-shadow:0 -12px 30px rgba(0,0,0,.4)}
footer .foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 36px;color:var(--chalk-dim)}
@media (max-width:820px){footer .foot{grid-template-columns:1fr}}
footer .foot b{display:block;font-family:var(--display);font-weight:400;font-size:20px;color:var(--rope);margin-bottom:6px;text-shadow:0 2px 0 rgba(0,0,0,.6)}
footer .foot p{margin:0;font-size:16px;line-height:1.5}
footer a{color:var(--chalk);text-decoration-color:var(--rope)}
footer button{font:inherit;font-size:16px;background:none;border:0;color:var(--chalk);text-decoration:underline;text-decoration-color:var(--rope);cursor:pointer;padding:0}

/* prose pages */
.prose{max-width:68ch;padding-block:28px 48px}
.prose h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,50px);line-height:1.1;margin:0 0 14px;text-wrap:balance;text-shadow:0 3px 0 var(--plank-2)}
.prose h2{font-family:var(--display);font-weight:400;font-size:26px;margin:30px 0 8px}
.prose p{margin:0 0 14px;font-size:19px}
.prose table{border-collapse:collapse;margin:8px 0 16px;font-variant-numeric:tabular-nums;width:100%;background:rgba(8,42,48,.6);border:2px solid var(--rope-dim)}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
.prose .figure{margin:18px 0;border:14px solid transparent;border-image:url(/static/img/planks.jpg) 60 round;background:var(--deep);box-shadow:0 0 0 3px var(--rope),0 18px 40px rgba(0,0,0,.5)}
.prose .figure img{display:block;width:100%}
.prose.card{background:linear-gradient(180deg,rgba(20,80,89,.9),rgba(12,58,66,.92));border:3px solid var(--rope);border-radius:10px;padding:20px 22px;box-shadow:0 0 0 7px var(--plank),0 0 0 9px var(--rope-dim),0 22px 50px rgba(0,0,0,.5);margin:11px}
.prose.card{margin:28px auto 48px}

/* the stable */
.stable-intro{margin-top:28px}
.stable-intro p{font-size:18px;color:var(--chalk-dim)}
.stable-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:22px;padding-block:18px 40px}
.stable-card{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:start;background:linear-gradient(180deg,rgba(20,80,89,.92),rgba(12,58,66,.94));border:3px solid var(--rope);border-radius:10px;padding:14px;box-shadow:0 0 0 7px var(--plank),0 0 0 9px var(--rope-dim),0 22px 50px rgba(0,0,0,.5);margin:11px;min-width:0}
.stable-card.racing{border-color:var(--shell);box-shadow:0 0 0 7px var(--plank),0 0 0 9px rgba(255,90,46,.55),0 22px 50px rgba(0,0,0,.5)}
.stable-card img{width:130px;height:130px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.55))}
.stable-body{min-width:0;display:grid;gap:4px}
.stable-bib{font-size:13px;color:var(--rope);letter-spacing:.3px}
.stable-body>b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.1;color:#fff;text-shadow:0 2px 0 var(--plank-2)}
.stable-body>small{font-size:15px;color:var(--chalk-dim)}
.stable-body dl{margin:6px 0 0;display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:15px;font-variant-numeric:tabular-nums}
.stable-body dt{color:var(--chalk-dim)}.stable-body dd{margin:0;text-align:right;font-weight:700;color:#fff}
.stable-body dd em{font-style:normal;font-weight:400;color:var(--chalk-dim)}
.stable-body .btn{justify-self:start;margin-top:6px;font-size:15px;padding:7px 12px}
@media (max-width:420px){.stable-card{grid-template-columns:110px 1fr}.stable-card img{width:110px;height:110px}}

/* results archive */
.results{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:28px;padding-block:28px 40px;align-items:start}
@media (max-width:820px){.results{grid-template-columns:1fr}}
.daylist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.daylist button{width:100%;text-align:left;font:inherit;color:var(--chalk);background:rgba(8,42,48,.7);border:2px solid var(--rope-dim);border-radius:8px;padding:10px 14px;cursor:pointer;display:grid;gap:2px}
.daylist button:hover{border-color:var(--rope)}
.daylist button[aria-current]{border-color:var(--shell);box-shadow:0 0 0 3px rgba(255,90,46,.35)}
.daylist button b{font-family:var(--display);font-weight:400;font-size:19px}
.daylist button span{font-size:15px;color:var(--chalk-dim)}
.totals{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-variant-numeric:tabular-nums;font-size:18px;background:rgba(8,42,48,.6);border:2px solid var(--rope-dim);border-radius:8px;padding:12px 14px}
.totals dt{color:var(--chalk-dim)}.totals dd{margin:0;text-align:right;font-weight:700;color:#fff}
.day h3{font-family:var(--display);font-weight:400;font-size:22px;margin:6px 0 0}
.shares{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.shares li{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center}
.shares img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55))}
.shares li>div:first-of-type b{display:block;font-family:var(--display);font-weight:400;font-size:19px;margin-bottom:6px}
.shares .bar{display:block;height:14px;background:rgba(8,42,48,.9);border:1px solid var(--rope-dim);border-radius:7px;overflow:hidden}
.shares .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--shell-deep),var(--shell))}
.shares .pct{text-align:right;font-variant-numeric:tabular-nums;line-height:1}
.shares .pct b{display:block;font-family:var(--display);font-weight:400;font-size:24px;color:#fff}
.shares .pct small{display:block;font-size:13px;color:var(--chalk-dim);margin-top:4px}
.lost{text-align:center;padding-block:40px 60px}
.lost img{max-width:520px;margin:0 auto 16px;display:block;filter:drop-shadow(0 16px 24px rgba(0,0,0,.6))}