/* Milford Athletic FC Lottery
   Design system. Three rules the whole thing follows:
     1. The prize figure is the hero. Everything else supports it.
     2. Deep maroon carries brand and action; light surfaces carry content.
     3. One spacing scale, one type scale. No arbitrary values.            */

:root{
  /* brand, sampled from the crest */
  --maroon:#4C1A35; --maroon-700:#3D1229; --maroon-800:#2E0D1F; --maroon-500:#6B2A4B;
  --blue:#78A8CC; --blue-100:#EAF2F8; --blue-200:#C3DAEA; --blue-700:#3C6F97;
  --green:#145C2C; --green-100:#E8F3EC; --green-200:#C6E2CF;
  --gold:#C9A227;

  /* neutrals */
  --ink:#14181C; --ink-2:#3D4750; --muted:#65727D; --line:#D7E3EC; --line-2:#E6EEF4;
  --surface:#FFFFFF; --page:#E9F0F6;
  --danger:#B3123C; --danger-100:#FDF2F5; --danger-200:#F3CFDA;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:28px; --s7:40px; --s8:56px;

  /* radii + elevation */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;
  --e1:0 1px 2px rgba(20,24,28,.06), 0 1px 3px rgba(20,24,28,.05);
  --e2:0 2px 4px rgba(20,24,28,.05), 0 8px 20px rgba(20,24,28,.08);
  --e3:0 4px 8px rgba(20,24,28,.06), 0 18px 40px rgba(20,24,28,.13);

  --ease:cubic-bezier(.2,.7,.3,1);
  --dur:200ms;
}

*{box-sizing:border-box}
/* The hidden attribute has to win.
   Its default is display:none at the very bottom of the cascade, so ANY rule
   that gives an element its own display beats it and the element stays on
   screen. That has now bitten this page four times: the trophy, the prize
   amount, the reel window, and the "Drawing..." pill still sitting there under
   a finished result (James, 2026-09-11). Rather than patch the fifth one, the
   attribute is made to win everywhere. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);
  font:400 16.5px/1.5 "Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
::selection{background:var(--maroon);color:#fff}

/* ---------------------------------------------------------------- type -- */
.display{font-weight:800;font-size:clamp(58px,19vw,82px);line-height:.9;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
h1{font-weight:700;font-size:clamp(24px,6.2vw,30px);line-height:1.18;letter-spacing:-.025em;margin:0 0 var(--s3);
  color:var(--maroon)}
h2{font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.015em;margin:var(--s6) 0 var(--s3);color:var(--maroon)}
h3{font-weight:650;font-size:16px;line-height:1.3;margin:0 0 var(--s2)}
p{margin:0 0 var(--s3)}
.lede{font-size:16px;color:var(--ink-2);margin:0 0 var(--s4)}
.sub{color:var(--muted);font-size:14.5px;margin:0 0 var(--s4)}
.micro{font-size:12px;color:var(--muted);line-height:1.6;margin:0}
.num{font-variant-numeric:tabular-nums}

/* eyebrow with a rule: the temporal hook every lottery front page uses */
.eyebrow{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3);
  font-weight:700;font-size:11.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--maroon)}
.eyebrow:after{content:"";flex:1;height:1px;background:currentColor;opacity:.25}
.eyebrow.on-dark{color:#E8C7D8}

.sec{font-weight:700;font-size:11px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:var(--s5) 0 var(--s3)}

/* -------------------------------------------------------------- chrome -- */
/* Masthead: the crest carries the brand at full size, then condenses to a slim
   bar on scroll so it keeps presence without eating the screen. */
/* The masthead does not move. It condensed on scroll through two rewrites and
   James reported jitter on both, so it is gone: the header is in normal flow, and
   anything that changes its height while you are scrolling changes the document
   height under the scroll position. There is no version of that which is free.
   A masthead that reclaims 74px is not worth a page that fights the finger. */
.hd{position:sticky;top:0;z-index:50;background:var(--maroon-800);
  border-bottom:1px solid rgba(255,255,255,.09)}
.hd .bar{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s3);padding:var(--s4) var(--s4) var(--s3);
  max-width:1120px;margin:0 auto;position:relative}
.hd .brand{display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  text-decoration:none}
.hd .brand img{height:56px;width:auto;display:block;flex:none;
  filter:drop-shadow(0 5px 14px rgba(0,0,0,.35))}
.hd .brand b{display:block;text-align:center;font-weight:800;font-size:15px;line-height:1;
  letter-spacing:.15em;color:#fff;text-transform:uppercase;white-space:nowrap}
.hd .brand span{display:block;font-weight:600;font-size:9px;line-height:1;letter-spacing:.3em;
  color:#C79FB6;text-transform:uppercase;margin-top:7px}
.hd .play{position:absolute;right:var(--s4);top:50%;transform:translateY(-50%);
  background:#fff;color:var(--maroon);text-decoration:none;
  font-weight:700;font-size:13px;line-height:1;padding:10px 17px;border-radius:var(--r-pill)}
.hd .play:hover{background:#F4E4EC}

/* scrollable tab row, the way the betting sites carry section nav on mobile */
.tabs{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;
  padding:0 var(--s4) var(--s3);max-width:1120px;margin:0 auto;justify-content:center}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;font-weight:600;font-size:13.5px;line-height:1;color:#C79FB6;text-decoration:none;
  padding:9px 15px;border-radius:var(--r-pill);white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.tabs a:hover{color:#fff}
.tabs a.on{background:rgba(255,255,255,.15);color:#fff}
@media (max-width:420px){.tabs{justify-content:flex-start}}

main{max-width:480px;margin:0 auto;padding:var(--s4) var(--s4) var(--s6)}
body.wide main{max-width:1120px}
main.flush{padding-top:0}

footer{border-top:1px solid var(--line);margin-top:var(--s6);background:var(--surface)}
footer .in{max-width:480px;margin:0 auto;padding:var(--s4) var(--s4) var(--s5);
  color:var(--muted);font-size:11.5px;line-height:1.6;text-align:center}
body.wide footer .in{max-width:1120px}
footer p{margin:var(--s3) 0 0}
footer nav{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:center}
footer a{color:var(--maroon-500);text-decoration:none;font-weight:600;font-size:12px}
footer a:hover{text-decoration:underline}

/* ---------------------------------------------------------------- hero -- */
.hero{margin-top:0;background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.14), transparent 62%),
    linear-gradient(168deg, var(--maroon) 0%, var(--maroon-800) 100%);
  color:#fff;margin:0 calc(var(--s4)*-1);padding:var(--s6) var(--s4) var(--s5);
  border-bottom-left-radius:26px;border-bottom-right-radius:26px;position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0);background-size:18px 18px}
.hero > *{position:relative}
.hero h1{color:#fff;margin:0 0 var(--s2)}
.hero .lede{color:#DEC3D2}

.jackpot{text-align:center;padding:var(--s3) 0 var(--s4)}
.jackpot .label{font-weight:700;font-size:11px;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  color:#D5A9C0;margin:0 0 var(--s3)}
.jackpot .display{color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.28)}
.jackpot .beneath{font-weight:600;font-size:13px;line-height:1.4;color:#E8C7D8;margin:var(--s3) 0 0}

/* prize tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin:var(--s4) 0 0}
.tier{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:var(--s3) var(--s2);text-align:center;
  backdrop-filter:blur(2px)}
/* The 1st prize is deliberately a bigger number, so the value sits in a fixed-height
   box. Without it the taller text pushes the label down and the three tiles read
   as misaligned. */
.tier .v{font-weight:800;font-size:22px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
  height:30px;display:flex;align-items:center;justify-content:center}
.tier .k{font-weight:700;font-size:9.5px;line-height:1;letter-spacing:.12em;text-transform:uppercase;
  color:#C79FB6;margin-top:6px}
.tier.lead{background:#fff;border-color:#fff}
.tier.lead .v{color:var(--maroon);font-size:29px}
.tier.lead .k{color:var(--maroon-500)}

/* on light surfaces */
.tiers.light .tier{background:var(--blue-100);border-color:var(--blue-200)}
.tiers.light .tier .v{color:var(--maroon)}
.tiers.light .tier .k{color:var(--muted)}
.tiers.light .tier.lead{background:var(--maroon);border-color:var(--maroon)}
.tiers.light .tier.lead .v{color:#fff}
.tiers.light .tier.lead .k{color:#E8C7D8}

/* --------------------------------------------------------------- cards -- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);margin:0 0 var(--s4);box-shadow:var(--e1)}
.card.tight{padding:var(--s4)}
.card > :last-child{margin-bottom:0}

.note{border-radius:var(--r);padding:var(--s3) var(--s4);font-size:13.5px;line-height:1.6;
  margin:0 0 var(--s3);background:var(--blue-100);border:1px solid var(--blue-200);
  border-left:3px solid var(--blue-700);color:#1E3242}
.note b{color:var(--blue-700)}
.note > :last-child{margin-bottom:0}
.note.good{background:var(--green-100);border-color:var(--green-200);border-left-color:var(--green);color:#173A24}
.note.good b{color:var(--green)}
.note.brand{background:#FBF3F7;border-color:#EBD3E0;border-left-color:var(--maroon);color:#3A2130}
.note.brand b{color:var(--maroon)}
.note.warn{background:var(--danger-100);border-color:var(--danger-200);border-left-color:var(--danger);color:#5E1026}
.note.warn b{color:var(--danger)}
.err{background:var(--danger-100);border:1px solid var(--danger-200);border-left:3px solid var(--danger);
  border-radius:var(--r);padding:var(--s3) var(--s4);font-size:13.5px;margin:0 0 var(--s4);color:#5E1026}

/* --------------------------------------------------------------- forms -- */
label{display:block;font-weight:600;font-size:13px;line-height:1;margin:0 0 var(--s2);color:var(--ink-2)}
.f{width:100%;padding:14px var(--s4);border:1.5px solid var(--line);border-radius:var(--r);
  font:inherit;font-size:16px;background:var(--surface);color:var(--ink);margin:0 0 var(--s4);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.f:hover{border-color:#CFD8DF}
.f:focus{outline:none;border-color:var(--maroon);box-shadow:0 0 0 4px rgba(76,26,53,.12)}
select.f{appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7680' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s4) center}
textarea.f{resize:vertical;min-height:96px}
.hint{font-size:12.5px;color:var(--muted);margin:calc(var(--s3)*-1) 0 var(--s4);line-height:1.5}
.chk{display:flex;gap:var(--s3);align-items:flex-start;margin:0 0 var(--s3);font-size:14px;
  color:var(--ink-2);cursor:pointer}
.chk input{margin:1px 0 0;width:20px;height:20px;accent-color:var(--maroon);flex:none;cursor:pointer}
.chk a{color:var(--maroon);font-weight:600}

/* ------------------------------------------------------------- buttons -- */
.btn{display:flex;align-items:center;justify-content:center;gap:var(--s2);width:100%;
  background:var(--maroon);color:#fff;border:1.5px solid var(--maroon);border-radius:var(--r-pill);
  padding:16px var(--s5);font-weight:650;font-size:16px;line-height:1;font-family:inherit;cursor:pointer;
  text-decoration:none;margin:var(--s4) 0 var(--s2);
  transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);box-shadow:var(--e1)}
.btn:hover{background:var(--maroon-500);border-color:var(--maroon-500);box-shadow:var(--e2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(76,26,53,.25)}
.btn.ghost{background:var(--surface);color:var(--maroon)}
.btn.ghost:hover{background:#FBF3F7}
.btn.on-dark{background:#fff;color:var(--maroon);border-color:#fff}
.btn.on-dark:hover{background:#F6E7EF}
.btn.sm{padding:11px var(--s4);font-size:14px;margin:0;width:auto}
.btn[disabled]{opacity:.45;pointer-events:none}

/* sticky buy bar: the action is always one thumb away */
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:var(--s3) var(--s4);
  /* iOS Safari's toolbar overlays fixed content, so clear it as well as the
     home indicator, otherwise the button sits behind the address pill */
  padding-bottom:calc(var(--s3) + 18px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform 260ms var(--ease);box-shadow:0 -6px 24px rgba(20,24,28,.09)}
.stickybuy.show{transform:none}
.stickybuy .in{max-width:480px;margin:0 auto;display:flex;align-items:center;gap:var(--s3)}
.stickybuy .price{font-weight:800;font-size:19px;line-height:1;color:var(--maroon);font-variant-numeric:tabular-nums}
.stickybuy .price span{display:block;font-weight:500;font-size:11px;line-height:1;color:var(--muted);margin-top:5px}
.stickybuy .btn{margin:0;flex:1}

/* --------------------------------------------------------------- lists -- */
.row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r);margin:0 0 var(--s2);background:var(--surface);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.row:hover{border-color:var(--blue-200);box-shadow:var(--e1)}
/* a runner-up's free club, marked so it never reads as a ticket they paid for */
.row.bonus{background:var(--green-100);border-color:var(--green-200);
  border-left:3px solid var(--green)}
.row.bonus .m{color:#2F6B45}
/* the runner-up line under the prize tiles */
.runnersup{margin:var(--s2) 0 0;padding:9px 12px;border-radius:var(--r2);text-align:center;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  font-weight:600;font-size:12.5px;line-height:1.35;color:#F3E4EC}
.runnersup b{color:#fff;font-weight:750}
.row img{width:36px;height:36px;object-fit:contain;flex:none}
.row .t{font-weight:650;font-size:15px;line-height:1.25;min-width:0}
.row .m{font-size:12.5px;color:var(--muted);margin-top:3px}
.row .end{margin-left:auto;text-align:right;flex:none}

.pill{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:10px;line-height:1;letter-spacing:.07em;
  text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill);white-space:nowrap}
.pill.in{color:var(--green);background:var(--green-100);border:1px solid var(--green-200)}
.pill.wait{color:#8A6100;background:#FDF6E7;border:1px solid #EFDFB8}
.pill.off{color:var(--blue-700);background:var(--blue-100);border:1px solid var(--blue-200)}
.pill.live{color:#fff;background:var(--danger);border:1px solid var(--danger)}
.pill.live i{width:6px;height:6px;border-radius:50%;background:#fff;display:block;
  animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* --------------------------------------------------------------- table -- */
.tbl{border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;margin:0 0 var(--s4);
  background:var(--surface);box-shadow:var(--e1);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-700);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);
  white-space:nowrap;background:var(--blue-100)}
td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line-2);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- draw -- */
.countdown{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);
  margin:var(--s5) 0 var(--s2)}
.countdown div{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:var(--s4) var(--s2);text-align:center}
.countdown b{display:block;font-weight:800;font-size:33px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.countdown span{font-weight:700;font-size:9.5px;line-height:1;letter-spacing:.13em;text-transform:uppercase;
  color:#C79FB6;margin-top:8px;display:block}
.countdown.light div{background:var(--blue-100);border-color:var(--blue-200)}
.countdown.light b{color:var(--maroon)} .countdown.light span{color:var(--muted)}

.reel{background:linear-gradient(168deg,var(--maroon-700),var(--maroon-800));
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);padding:var(--s5) var(--s4);text-align:center;position:relative;
  overflow:hidden;margin:var(--s4) 0}
.reel:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 45%,rgba(255,255,255,.13),transparent 68%)}
.reel .t{font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  color:#D5A9C0;margin:0 0 var(--s4)}
/* The highlight and the pawl are positioned against THIS box, not against the
   whole reel. They used to be absolute inside .reel, whose vertical centre sits
   above the strip because of the reel's top padding and the "IN THE DRAW" label,
   so the window floated above the club it was supposed to be framing. */
.reel .window{position:relative;height:132px}
.reel .strip{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(#0000,#000 26%,#000 74%,#0000);
  mask-image:linear-gradient(#0000,#000 26%,#000 74%,#0000)}
.reel .strip div{height:44px;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:18px;line-height:1;color:#B98BA9}
.reel .strip div.on{color:#fff;font-size:23px;font-weight:800;letter-spacing:-.01em}
.reel .line{position:absolute;left:10px;right:10px;top:50%;height:48px;transform:translateY(-50%);
  border-top:1.5px solid rgba(255,255,255,.5);border-bottom:1.5px solid rgba(255,255,255,.5);
  border-radius:var(--r-sm)}

/* a winner: the lottery-ball moment */
/* The reel used to supply the gap under the hero. In the finished state the reel
   is hidden, so the 1st place card sat flush against the banner. :not(:empty) so
   an empty container before the first reveal does not hold open a gap. */
#winners:not(:empty){display:block;margin-top:var(--s6)}
.win{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line);margin:0 0 var(--s2);box-shadow:var(--e1);
  animation:rise 420ms var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.win.first{background:linear-gradient(168deg,var(--maroon),var(--maroon-800));border-color:var(--maroon);
  box-shadow:var(--e2)}
.win .rank{font-weight:800;font-size:10.5px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  width:30px;flex:none}
.win.first .rank{color:#D5A9C0}
.win img{width:38px;height:38px;object-fit:contain;flex:none}
.win .nm{font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.015em;min-width:0}
.win.first .nm{color:#fff;font-size:19px}
.win .amt{margin-left:auto;font-weight:800;font-size:20px;line-height:1;color:var(--maroon);font-variant-numeric:tabular-nums}
.win.first .amt{color:#fff;font-size:24px}
.nocrest{width:38px;height:38px;flex:none;border-radius:var(--r-sm);background:var(--blue-100);
  border:1px solid var(--blue-200)}

/* --------------------------------------------------------- the reveal -- */
.reveal{background:
    radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(168deg,var(--maroon),var(--maroon-800));
  border-radius:26px;padding:var(--s6) var(--s4);text-align:center;color:#fff;
  position:relative;overflow:hidden;margin:0 0 var(--s4);box-shadow:var(--e3)}
.reveal .t{font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;
  color:#D5A9C0;margin:0 0 var(--s5)}
.reveal img{height:96px;width:auto;display:block;margin:0 auto var(--s4);
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.35));animation:pop 620ms var(--ease) both}
@keyframes pop{0%{opacity:0;transform:scale(.82)}60%{transform:scale(1.04)}100%{opacity:1;transform:none}}
.reveal .nm{font-weight:800;font-size:clamp(28px,8vw,36px);line-height:1.1;letter-spacing:-.03em;margin:0 0 var(--s2)}
.reveal .mt{font-size:14px;color:#DEC3D2;margin:0}

/* leaderboard */
.lb{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border:1px solid var(--line);border-radius:var(--r);margin:0 0 var(--s2);background:var(--surface)}
.lb.lead{border-color:var(--maroon);border-width:1.5px;background:#FBF3F7;box-shadow:var(--e1)}
.lb .rk{width:24px;font-weight:800;font-size:15px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
.lb.lead .rk{color:var(--maroon)}
.lb .nm{font-weight:650;font-size:15px;line-height:1.2}
.lb .bar{margin-left:auto;text-align:right}
.lb .bar b{font-weight:700;font-size:16px;line-height:1;font-variant-numeric:tabular-nums}
.lb .bar span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.lb.na{opacity:.55}

/* trust strip */
.trust{display:flex;gap:var(--s4);flex-wrap:wrap;justify-content:center;
  padding:var(--s4) 0 0;margin:var(--s4) 0 0;border-top:1px solid rgba(255,255,255,.14)}
.trust div{display:flex;align-items:center;gap:7px;font-weight:600;font-size:11.5px;line-height:1.3;color:#DEC3D2}
.trust svg{width:14px;height:14px;flex:none;opacity:.9}
.trust.on-light{border-top-color:var(--line)}
.trust.on-light div{color:var(--muted)}

.qr{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);text-align:center;box-shadow:var(--e1)}
.qr img{width:100%;max-width:170px;height:auto;display:block;margin:0 auto var(--s3)}
.qr code{font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);word-break:break-all}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
code{font:12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);box-shadow:var(--e1)}
.stat .k{font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-weight:800;font-size:30px;line-height:1;color:var(--maroon);margin:var(--s3) 0 0;font-variant-numeric:tabular-nums}
.stat .m{font-size:12.5px;color:var(--muted);margin:var(--s2) 0 0}

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

/* Manage membership: tucked away, because cancelling is not a primary action */
.manage{margin:var(--s5) 0 0;border-top:1px solid var(--line);padding-top:var(--s3)}
.manage summary{list-style:none;cursor:pointer;font-weight:600;font-size:13.5px;
  color:var(--muted);display:flex;align-items:center;gap:7px;padding:var(--s2) 0;
  transition:color var(--dur) var(--ease)}
.manage summary::-webkit-details-marker{display:none}
.manage summary:before{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);margin-left:2px;
  transition:transform var(--dur) var(--ease)}
.manage[open] summary:before{transform:rotate(45deg)}
.manage summary:hover{color:var(--ink-2)}
.manage .body{padding:var(--s2) 0 var(--s3)}
.manage .body a{color:var(--danger);font-weight:600;font-size:13.5px;text-decoration:none}
.manage .body a:hover{text-decoration:underline}

/* Draw alert: the bell rides the nav from ten minutes out until five past the end */
.tabs a.alert{background:var(--danger);color:#fff}
.tabs a.alert:hover{background:#C4194A;color:#fff}
.tabs a .bell{display:inline-block;width:13px;height:13px;vertical-align:-2px;margin-right:6px;
  animation:ring 2.4s var(--ease) infinite;transform-origin:50% 12%}
@keyframes ring{
  0%,72%,100%{transform:rotate(0)}
  76%{transform:rotate(13deg)} 80%{transform:rotate(-11deg)}
  84%{transform:rotate(8deg)}  88%{transform:rotate(-6deg)} 92%{transform:rotate(3deg)}
}

/* Something is wrong with this ticket and it needs sorting */
.fix{background:var(--danger-100);border:1px solid var(--danger-200);
  border-left:3px solid var(--danger);border-radius:var(--r);
  padding:var(--s3) var(--s4);margin:calc(var(--s2)*-1) 0 var(--s3)}
.fix b{color:var(--danger)}

/* Ten seconds is short enough to feel broken if nothing moves, so the wait is
   named and counted rather than left blank */
/* It sits above the reel, so hiding it during a spin shifted the whole panel down
   and back on every draw: eight jumps a night. It keeps its box now and just goes
   quiet (James, 2026-09-10). */
.nextin{min-height:44px;display:flex;align-items:center;justify-content:center;
  transition:opacity 200ms var(--ease)}
.nextin.quiet{opacity:0;pointer-events:none}
.nextin{text-align:center;font-weight:600;font-size:15px;color:var(--maroon);
  margin:0 0 var(--s4);padding:var(--s3) var(--s4);background:var(--blue-100);
  border:1px solid var(--blue-200);border-radius:var(--r-pill)}
.nextin b{font-weight:800;font-size:19px;font-variant-numeric:tabular-nums}
.banner{text-align:center;font-size:11.5px;color:var(--muted);margin:var(--s4) 0 0;
  padding:var(--s3) var(--s4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);line-height:1.5}
.banner a{color:var(--maroon);font-weight:600}
.hero.tight{padding-bottom:var(--s4)}
/* crests ride the reel as it scrolls */
.reel .strip div img,.reel .strip div .nocrest{width:26px;height:26px;object-fit:contain;
  flex:none;margin-right:10px;background:transparent;border:0}
.reel .strip div.on img,.reel .strip div.on .nocrest{width:32px;height:32px}

/* Club names stay on one line: long ones step down a size rather than wrap */
.win .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win .nm.long{font-size:15px}
.win .nm.xlong{font-size:13px;letter-spacing:0}
.win.first .nm.long{font-size:16.5px}
.win.first .nm.xlong{font-size:14.5px}
.reel .strip div span{white-space:nowrap}
.reel .strip div span.long{font-size:16px}
.reel .strip div span.xlong{font-size:14px}
.reel .strip div.on span.long{font-size:20px}
.reel .strip div.on span.xlong{font-size:17px}
.row .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ------------------------------------------------------- the December draw --
   Snow over the hero for the Christmas draw. Pure CSS: three gradient layers
   drifting at different speeds gives depth without a single DOM node, so it
   costs nothing on an old phone. Off entirely under reduced motion.          */
.hero.festive{background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.16), transparent 62%),
    linear-gradient(168deg, #5A1030 0%, #2B0A18 100%)}
.snow{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;
  z-index:0}
.snow span{position:absolute;inset:-60% 0 -10%;display:block;
  background-repeat:repeat;opacity:.85}
.snow span:nth-child(1){
  background-image:
    radial-gradient(2.5px 2.5px at 18px 22px,#fff,transparent),
    radial-gradient(2px 2px at 96px 64px,#fff,transparent),
    radial-gradient(2.5px 2.5px at 152px 18px,#fff,transparent),
    radial-gradient(2px 2px at 58px 132px,#fff,transparent);
  background-size:190px 190px;animation:snowfall 9s linear infinite}
.snow span:nth-child(2){
  background-image:
    radial-gradient(1.6px 1.6px at 42px 78px,rgba(255,255,255,.85),transparent),
    radial-gradient(1.6px 1.6px at 128px 34px,rgba(255,255,255,.85),transparent),
    radial-gradient(1.4px 1.4px at 172px 118px,rgba(255,255,255,.85),transparent);
  background-size:230px 230px;animation:snowfall 15s linear infinite;opacity:.6}
.snow span:nth-child(3){
  background-image:
    radial-gradient(3.5px 3.5px at 74px 46px,rgba(255,255,255,.7),transparent),
    radial-gradient(3px 3px at 200px 150px,rgba(255,255,255,.7),transparent);
  background-size:300px 300px;animation:snowfall 22s linear infinite;opacity:.45;filter:blur(.4px)}
@keyframes snowfall{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-24px,300px,0)}
}
.hero.festive > *:not(.snow){position:relative;z-index:1}
.festive-tag svg{width:14px;height:14px;flex:none}
.festive-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:var(--r-pill);
  padding:7px 14px;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  margin:0 auto var(--s3);backdrop-filter:blur(2px)}
@media (prefers-reduced-motion: reduce){ .snow{display:none} }

/* ------------------------------------------- the draw: clicker + trophy -- */
/* Anticipation is the point of a live draw, so the reel gets a raffle-drum
   clicker that ticks with every name, and a landing gets a trophy lift rather
   than a name quietly appearing (James, 2026-09-09). */

/* The clicker: a pawl at the top of the reel that kicks on every row change.
   It is driven by a class the reel JS toggles, not by a CSS animation loop,
   so it stays in step with the strip as the spin slows down. */
/* The pawl points at the top edge of the highlight, so it reads as the thing the
   clubs are clicking past. 24px is half the highlight's height, 16px is the pawl. */
.reel .clicker{position:absolute;left:50%;top:calc(50% - 24px - 16px);
  width:22px;height:16px;margin-left:-11px;
  z-index:3;transform-origin:50% 100%;pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))}
.reel .clicker svg{width:100%;height:100%;display:block;color:#F0C674}
.reel .clicker.kick{animation:pawl 90ms var(--ease)}
@keyframes pawl{0%{transform:rotate(0)}45%{transform:rotate(15deg)}100%{transform:rotate(0)}}

.reel .snd{position:absolute;right:10px;top:10px;z-index:4;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;
  font:600 10.5px/1 Poppins,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 10px;border-radius:var(--r-pill);cursor:pointer}
.reel .snd:hover{background:rgba(255,255,255,.2)}
.reel .snd[aria-pressed="true"]{background:#F0C674;border-color:#F0C674;color:var(--maroon-800)}

/* The strip settles when it stops. There used to be a filter:blur(.25px) here as
   a motion cue. It has to stay off: a filter promotes the strip to its own
   compositing layer, and on iOS that layer is rasterised once and then scaled to
   the device's pixel ratio, so on a 3x phone every club name came out soft while
   the drum was moving (James, 2026-09-11: the names are blurry as they spin). The
   mask below is the only thing that should touch this layer. */
.reel.landed .strip div.on{animation:land 420ms var(--ease)}
@keyframes land{0%{transform:scale(1)}35%{transform:scale(1.1)}100%{transform:scale(1)}}

/* The winner pop.
   It was a set of absolutely positioned pieces at fixed viewport offsets: the
   trophy at the centre, the caption at "50% + 21vw", the confetti loose behind.
   On a narrow screen they collided with each other and with the reel underneath,
   the trophy landing on top of the club names and the text running out of the
   box (James, 2026-09-10). It is one centred column now, in a real panel that is
   sized by its contents, so it cannot overflow whatever the name lengths. */
/* The pop takes the whole screen for five seconds and then minimises away
   towards the results underneath (James, 2026-09-11). It used to be a single
   2.6s keyframe that faded itself out, which meant the hold and the exit could
   not be changed independently: now the entry, the hold and the minimise are
   three separate things and src/reveal.js owns the timing. */
.lift{position:fixed;inset:0;z-index:120;pointer-events:none;display:none;
  align-items:center;justify-content:center;padding:var(--s4);
  background:rgba(20,6,14,0);transition:background 260ms var(--ease)}
.lift.on{display:flex;background:rgba(20,6,14,.82)}
.lift.min{background:rgba(20,6,14,0)}
.lift .bits{position:absolute;inset:0;overflow:hidden}
.lift .glow{position:absolute;width:min(88vw,420px);height:min(88vw,420px);border-radius:50%;
  background:radial-gradient(circle,rgba(240,198,116,.42),rgba(240,198,116,0) 68%);
  animation:glow 1400ms var(--ease)}
.lift .card{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:var(--s3);max-width:min(92vw,440px);
  padding:var(--s5) var(--s5) var(--s6);border-radius:26px;
  background:linear-gradient(168deg,rgba(76,26,53,.97),rgba(46,13,31,.98));
  border:1px solid rgba(240,198,116,.34);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  animation:popin 620ms var(--ease) both}
/* Entry only. The card then simply sits there until .min is added. */
@keyframes popin{
  0%{opacity:0;transform:translateY(26px) scale(.88)}
  55%{opacity:1;transform:translateY(0) scale(1.03)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
/* Minimising: it shrinks back down towards the results list rather than being
   switched off, so the eye is handed from the pop to the card it becomes. */
.lift.min .card{animation:popmin 520ms var(--ease) both}
@keyframes popmin{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(16vh) scale(.42)}
}
.lift.min .glow,.lift.min .bits{opacity:0;transition:opacity 260ms var(--ease)}
/* "Free in the November draw only": the condition, said where it cannot be
   missed. Quiet next to the club name, but never hidden behind a tap. */
.lift .only{margin:2px 0 0;color:#F0C674;font-weight:700;font-size:12.5px;line-height:1.35;
  letter-spacing:.06em;text-transform:uppercase;text-align:center}
.win.bonus .only{margin:8px 0 0;color:var(--muted);font-weight:650;font-size:12px;
  line-height:1.35;letter-spacing:.04em}
.lift .cup{width:clamp(52px,14vw,74px);color:#F0C674;flex:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
.lift .cup svg{width:100%;height:auto;display:block}
.lift.small .cup{width:clamp(40px,10vw,54px)}
.lift .capt{margin:0;color:#F0C674;font-weight:800;font-size:11px;line-height:1;
  letter-spacing:.2em;text-transform:uppercase}
/* Balanced and wrapping, never clipped: some club names are very long. */
.lift .club{margin:0;color:#fff;font-weight:800;line-height:1.08;letter-spacing:-.02em;
  font-size:clamp(22px,6.4vw,34px);text-align:center;text-wrap:balance;
  overflow-wrap:anywhere}
.lift .amt{margin:0;color:#fff;font-weight:800;line-height:1;text-align:center;
  font-size:clamp(20px,5.6vw,30px);font-variant-numeric:tabular-nums}
.lift.small .club{font-size:clamp(19px,5.2vw,26px)}
.lift.small .amt{font-size:clamp(13px,3.4vw,16px);color:#F0C674;font-weight:700;
  letter-spacing:.04em}

@keyframes glow{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.2)}}

/* Confetti in club colours. Pieces are placed by the JS that spawns them. */
.lift .bits i{position:absolute;top:44%;width:9px;height:14px;border-radius:2px;
  opacity:0;animation:bit 1900ms ease-out forwards}
@keyframes bit{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0)}
  100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot))}
}

@media (prefers-reduced-motion: reduce){
  .lift .card,.lift .glow{animation-duration:1ms}
  .lift .bits{display:none}
  .reel .clicker.kick{animation:none}
  .reel.landed .strip div.on{animation:none}
}

/* --------------------------------------------- runners-up, drawn on screen -- */
/* Its own layout, not the prize card's. The prize card gives the rank a 30px
   gutter, which is right for "1ST" and shredded "Runner-up" across two lines, and
   it truncates the club name to hold one row, which cut Nottingham Forest to
   "Nottingham For...". Here the label has its own line and the names wrap. */
.win.bonus{flex-direction:column;align-items:stretch;gap:10px;
  background:var(--surface);border-style:dashed;box-shadow:none}
.win.bonus .tag{align-self:flex-start;white-space:nowrap;
  font-weight:800;font-size:10px;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  color:var(--maroon);background:var(--maroon-050,rgba(76,26,53,.08));
  padding:6px 10px;border-radius:var(--r-pill)}
.win.bonus .pair{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.win.bonus .side{display:flex;align-items:center;gap:9px;min-width:0}
.win.bonus .side img,.win.bonus .side .nocrest{width:30px;height:30px;object-fit:contain;flex:none}
.win.bonus .who{font-weight:700;font-size:16px;line-height:1.2;letter-spacing:-.015em;
  color:var(--ink)}
/* Inside .got, so it always sits immediately before the club it introduces. On
   its own it drifted to the end of one line or the start of the next depending on
   how the names wrapped. */
.win.bonus .arrow{font-weight:600;font-size:10.5px;line-height:1;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);flex:none}
.win.bonus .got{gap:8px}
.win.bonus .got b{font-weight:800;font-size:16px;line-height:1.2;color:var(--maroon)}



/* A photographed trophy for the top prize. Taller than the drawn cup because a
   photograph needs the height to read, and capped against the viewport so it can
   never push the card past the screen. */
.lift .cup.photo{width:auto;height:clamp(120px,34vh,210px);max-width:74vw;
  object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}

/* ---------------------------------------------------------------- RESTORED --
   These were destroyed by a bad splice while replacing the winner pop: the range
   I cut ran from the old trophy block all the way to the runners-up header, and
   the entrant list, the big countdown and the `[hidden]` rule were sitting in
   between. Without a size on .ent img the crests rendered at natural size, and
   without the [hidden] rule the club list and the ticker were both on screen at
   once. Recovered verbatim from 182865a rather than retyped. */
.festive-tag .emo{letter-spacing:.02em;text-transform:none;font-size:13px;line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.reel .entrants{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:2px}
.reel .ent.more{background:transparent;border-style:dashed;color:#C79FB6}
.reel .ent.more span{color:#C79FB6}
.reel .ent{display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);padding:6px 13px 6px 7px}
.reel .ent img,.reel .ent .nocrest{width:22px;height:22px;object-fit:contain;flex:none}
.reel .ent span{font-weight:700;font-size:13.5px;line-height:1;color:#fff;white-space:nowrap}
.reel .entrants .none{color:#C79FB6;font-size:13.5px;font-weight:600;margin:var(--s4) 0}
.reel .bigcount{position:absolute;inset:0;z-index:4;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:84px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 8px 34px rgba(0,0,0,.6);
  background:radial-gradient(circle at 50% 50%,rgba(46,13,31,.78),rgba(46,13,31,0) 72%)}
.reel .bigcount b{display:block;animation:tickpop 900ms var(--ease)}
@keyframes tickpop{
  0%{transform:scale(1.35);opacity:.25}
  30%{transform:scale(1);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.reel .entrants[hidden],
.reel .bigcount[hidden],

/* The sound control is an icon now, not the words "Sound off". An inline SVG with
   only a viewBox has no intrinsic size inside a flex/pill button, so it collapsed
   and left an empty circle. */
.reel .snd{display:grid;place-items:center;width:38px;height:38px;padding:0}
.reel .snd svg{width:18px;height:18px;display:block}
.reel .snd #sndIcon{display:block;width:18px;height:18px;line-height:0}

/* The demo control. Only rendered on a one-off test draw, never on a real one. */
.democtl{margin-top:var(--s6);padding-top:var(--s5);border-top:1px dashed var(--line);
  text-align:center}
.democtl .micro{margin-top:var(--s3);color:var(--muted)}
.democtl .btn[disabled]{opacity:.55;cursor:default;pointer-events:none}

/* Test replay banner. If this is ever visible on a real draw night, something is
   badly wrong, so it is deliberately loud rather than subtle. */
.testbar{background:#FFF4D6;border:1px solid #E3C36A;color:#6B4E00;
  border-radius:var(--r);padding:10px 14px;margin:0 0 var(--s4);
  font-weight:700;font-size:12.5px;line-height:1.45;text-align:center}