/* ===========================================================================
   Hopheads Tipping — "Race Day" football edition
   Syne + Archivo · racing stripes · dark board · thick-contour stickers
   =========================================================================== */
:root{
  --green:#006738; --green-dk:#0a3b22; --board:#0c1c14; --board-2:#12291d;
  --gold:#fcd205; --orange:#fbb040; --cream:#f4efe0; --cream-2:#eae3ce;
  --ink:#15251b; --white:#fffdf6; --line:#1c2a20;
  --shadow: 4px 4px 0 rgba(21,37,27,.9);
  --shadow-sm: 3px 3px 0 rgba(21,37,27,.85);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; font-weight:400; overflow-x:hidden;
}
h1,h2,h3,.display{font-family:"Syne","Archivo",sans-serif; font-weight:800; line-height:1.02; letter-spacing:-.01em}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--orange); outline-offset:2px}
img{max-width:100%}

.stripes{
  height:12px; border:0;
  background:repeating-linear-gradient(115deg,
    var(--green) 0 20px, var(--gold) 20px 40px, var(--orange) 40px 60px, var(--cream-2) 60px 80px);
}

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem 1rem; flex-wrap:wrap;
  background:var(--green); color:var(--white); padding:.7rem 1.1rem;
  border-bottom:3px solid var(--ink);
}
.brand{font-family:"Syne",sans-serif; font-weight:800; font-size:1.35rem; letter-spacing:-.02em; color:var(--gold)}
.brand span{color:var(--white)}
.brand:hover{text-decoration:none}
.topbar nav{display:flex; align-items:center; gap:.3rem .9rem; flex-wrap:wrap; font-weight:700; font-size:.92rem}
.topbar nav a{color:var(--white); text-transform:uppercase; letter-spacing:.02em; font-size:.82rem}
.topbar nav a:hover{color:var(--gold); text-decoration:none}
.who{color:var(--cream-2); opacity:.9; font-weight:600; font-size:.85rem; text-transform:none}

main{max-width:1000px; margin:0 auto; padding:0 1rem 2rem}
.fullbleed{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:100vw}

.btn,.btn-ghost{
  display:inline-block; font-family:"Syne",sans-serif; font-weight:800; cursor:pointer;
  border-radius:12px; padding:.7rem 1.3rem; font-size:1rem; text-transform:uppercase;
  letter-spacing:.01em; border:3px solid var(--ink); transition:transform .08s ease, box-shadow .08s ease;
}
.btn{background:var(--gold); color:var(--ink); box-shadow:var(--shadow)}
.btn:hover{background:#ffe23a; text-decoration:none; transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(21,37,27,.9)}
.btn:active{transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(21,37,27,.9)}
.btn-ghost{background:var(--white); color:var(--ink); box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:#fff; text-decoration:none; transform:translate(-2px,-2px)}
nav .btn{padding:.4rem .9rem; font-size:.85rem; box-shadow:var(--shadow-sm)}
nav .btn-ghost{padding:.35rem .8rem; font-size:.8rem; background:transparent; color:#fff; border-color:rgba(255,255,255,.6); box-shadow:none}
.danger{color:#b3241f; border-color:#b3241f}

.hero{
  background:
    radial-gradient(120% 90% at 88% 10%, rgba(252,210,5,.20), transparent 60%),
    var(--cream);
  border-bottom:3px solid var(--ink); overflow:hidden;
}
.hero-inner{
  max-width:1040px; margin:0 auto; padding:2.4rem 1.2rem 2rem;
  display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; align-items:center;
}
.hero .eyebrow{
  display:inline-block; font-family:"Syne",sans-serif; font-weight:800; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--green);
  background:var(--gold); border:2.5px solid var(--ink); border-radius:30px; padding:.25rem .8rem; box-shadow:var(--shadow-sm);
}
.hero h1{
  font-size:clamp(2.6rem,7vw,4.6rem); margin:.7rem 0 .3rem; color:var(--green); text-transform:uppercase;
  text-shadow:3px 3px 0 var(--gold);
}
.hero .tagline{font-size:clamp(1.05rem,2.4vw,1.4rem); font-weight:600; max-width:30ch; margin:.2rem 0 1.2rem}
.hero-cta{display:flex; gap:.7rem; flex-wrap:wrap}
.hero-art{position:relative; display:flex; justify-content:center; align-items:center}
.hero-art img{width:100%; max-width:420px; position:relative; z-index:1; filter:drop-shadow(6px 8px 0 rgba(21,37,27,.18))}
.hero-art::before{
  content:""; position:absolute; inset:6% 8% 10% 8%; border-radius:50%; z-index:0;
  background:repeating-linear-gradient(125deg,var(--green) 0 14px,var(--gold) 14px 28px,var(--orange) 28px 42px);
  opacity:.16;
}

.ticker{
  background:var(--green); color:var(--gold); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  overflow:hidden; padding:.55rem 0;
}
.ticker__track{display:inline-flex; white-space:nowrap; will-change:transform; animation:scroll-x 32s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{
  font-family:"Syne",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  font-size:1.05rem; padding:0 1.1rem;
}
.ticker span::after{content:"\26BD"; margin-left:1.1rem; color:var(--white)}
@keyframes scroll-x{from{transform:translateX(0)} to{transform:translateX(-50%)}}

.section{padding-top:1.8rem}
.section-title{
  display:flex; align-items:center; gap:.6rem; margin:.2rem 0 1rem;
  font-size:1.5rem; text-transform:uppercase; color:var(--green);
}
.section-title::before{content:""; width:16px; height:26px; border-radius:3px; background:var(--gold); border:2.5px solid var(--ink); box-shadow:2px 2px 0 rgba(21,37,27,.85)}

.card{
  background:var(--white); border:3px solid var(--ink); border-radius:16px;
  padding:1.3rem 1.4rem; margin:1.2rem 0; box-shadow:var(--shadow);
}
.card.narrow{max-width:440px; margin:1.6rem auto}
.card > h1:first-child, .card > h2:first-child{margin-top:0}
h1{font-size:1.9rem; margin:.1rem 0 1rem; color:var(--green)}
h2{font-size:1.25rem; margin:1.3rem 0 .8rem; color:var(--green)}
.muted{color:#5f6f63; font-size:.92rem}

.podium{display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; align-items:end}
.pod{
  background:var(--white); border:3px solid var(--ink); border-radius:16px; padding:1rem .8rem; text-align:center;
  box-shadow:var(--shadow); position:relative;
}
.pod .rank{font-family:"Syne",sans-serif; font-weight:800; font-size:1.5rem; line-height:1}
.pod .name{font-weight:700; margin:.35rem 0 .1rem; word-break:break-word}
.pod .pts{font-family:"Syne",sans-serif; font-weight:800; font-size:2rem; color:var(--green)}
.pod .lbl{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#6b7a6f}
.pod--1{background:linear-gradient(180deg,#fff6cf,var(--white)); transform:translateY(-10px)}
.pod .crown{position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:1.5rem}

.board{
  background:var(--board); border:3px solid var(--ink); border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow); margin:1.2rem 0;
}
.board .board-head{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.9rem 1.2rem; background:var(--board-2); border-bottom:2px solid rgba(255,255,255,.08);
}
.board .board-head h2{margin:0; color:var(--gold); font-size:1.15rem; text-transform:uppercase}
.board .board-head .hint{color:#9fb4a6; font-size:.8rem; font-weight:600}
table{width:100%; border-collapse:collapse}
.ladder{color:#eaf3ec}
.ladder th,.ladder td{padding:.7rem .9rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.08)}
.ladder th{font-family:"Syne",sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#8fb39c}
.ladder td:first-child{font-family:"Syne",sans-serif; font-weight:800; color:#c8d8cd; width:2.5rem}
.ladder .pts{font-family:"Syne",sans-serif; font-weight:800; color:var(--gold); font-size:1.05rem}
.ladder tbody tr:last-child td{border-bottom:0}
.ladder tr.leader{background:linear-gradient(90deg, rgba(252,210,5,.22), rgba(252,210,5,.04))}
.ladder tr.leader td{color:#fff}
.ladder tr.leader td:first-child::after{content:" \1F451"}
.ladder.small{color:var(--ink)}
.ladder.small th{color:#6b7a6f}
.ladder.small th,.ladder.small td{padding:.5rem .6rem; font-size:.9rem; border-bottom:1px solid var(--cream-2)}
.ladder.small td:first-child{color:var(--ink)}
.ladder.small .pts{color:var(--green)}
.scroll-x{overflow-x:auto}

label{display:block; margin:.7rem 0; font-weight:700; font-size:.92rem}
input,select{
  width:100%; padding:.65rem .75rem; border:2.5px solid var(--ink); border-radius:10px;
  font-size:1rem; font-family:inherit; background:#fff; font-weight:500;
}
input:focus,select:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(0,103,56,.18)}
input[type=radio]{width:auto}
.row{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.row input,.row select{width:auto; flex:1; min-width:140px}
.grid-form{display:grid; grid-template-columns:1fr 1fr; gap:.2rem .9rem}
.grid-form label:first-of-type,.grid-form .btn,.grid-form datalist{grid-column:1 / -1}

.flash{padding:.7rem 1rem; border-radius:12px; margin:1rem 0; font-weight:700; border:2.5px solid var(--ink); box-shadow:var(--shadow-sm)}
.flash.ok{background:#d8f0e0; color:#12522f}
.flash.error{background:#fbdede; color:#8a1f1f}

.gw-nav{display:flex; gap:.45rem; flex-wrap:wrap; margin:1rem 0}
.chip{background:#fff; border:2.5px solid var(--ink); border-radius:30px; padding:.3rem .85rem; font-family:"Syne",sans-serif; font-weight:800; font-size:.82rem; box-shadow:var(--shadow-sm)}
.chip.active{background:var(--green); color:#fff}
.chip:hover{text-decoration:none; transform:translate(-1px,-1px)}

.fixture{border:2.5px solid var(--ink); border-radius:14px; padding:.85rem .95rem; margin-bottom:.75rem; background:#fff; box-shadow:var(--shadow-sm)}
.fixture.locked{opacity:.75; background:#f7f3e6}
.teams{display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:.55rem}
.teams .home{font-weight:800; text-align:right}
.teams .v{color:#93a08f; font-weight:700}
.teams .away{font-weight:800}
.teams .ko{margin-left:auto; color:#6b7a6f; font-size:.82rem; font-weight:600}
.teams .score{font-family:"Syne",sans-serif; font-weight:800; color:var(--green)}
.options{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem}
.opt{display:flex; align-items:center; justify-content:center; gap:.4rem; min-width:0; border:2.5px solid var(--ink); border-radius:10px; padding:.55rem; cursor:pointer; font-weight:800; font-family:"Syne",sans-serif; margin:0; background:#fff; text-transform:uppercase; font-size:.9rem; white-space:nowrap}
.opt:hover{background:var(--cream-2)}
.opt.chosen{background:var(--green); color:#fff}
.opt.right{background:#1c8a4e; color:#fff}
.opt.wrong{background:#c94b4b; color:#fff}
.deadline{background:var(--gold); border:2.5px solid var(--ink); border-radius:12px; padding:.7rem 1rem; margin-bottom:1rem; font-weight:700; box-shadow:var(--shadow-sm)}

.results th,.results td{padding:.45rem .5rem; border-bottom:1px solid var(--cream-2); vertical-align:middle}
.ta-r{text-align:right}
.results .teamcol{text-align:center; vertical-align:top; width:40%}
.results .ko{white-space:nowrap; font-size:.85rem}
.results .vs{text-align:center}
.teamcell{display:flex; flex-direction:column; align-items:center; gap:.4rem}
.teamcell .tn{font-weight:700; text-align:center; line-height:1.15}
.scorebox{width:56px; text-align:center; display:block; margin:0 auto}
.tag{background:var(--gold); color:var(--ink); border-radius:8px; padding:.1rem .5rem; font-size:.78rem; font-weight:800; border:2px solid var(--ink)}

/* fixtures & results — on a phone the 5-column table doesn't fit and breaks
   out of the card, so stack each fixture into its own compact row instead. */
@media (max-width:640px){
  table.results{display:block; width:100%}
  table.results thead{display:none}
  table.results tbody{display:block}
  table.results tr{
    display:flex; flex-direction:column; align-items:center; gap:.35rem;
    border:2px solid var(--ink); border-radius:12px; margin-bottom:.7rem;
    padding:.7rem .7rem .8rem; background:#fff; box-shadow:var(--shadow-sm);
  }
  table.results td{display:block; width:100%; max-width:100%; box-sizing:border-box;
    padding:0; border-bottom:0; text-align:center}
  table.results .ko{font-weight:700; padding-bottom:.2rem; border-bottom:1px dashed var(--cream-2); margin-bottom:.15rem}
  table.results .teamcol{width:100%}
  table.results .vs{font-weight:800; color:#93a08f}
}
.inline-del{justify-content:space-between; border-bottom:1px dashed var(--cream-2); padding:.35rem 0}
.inline-del span{flex:1}
.linkbtn{background:none; border:0; color:var(--green); cursor:pointer; font-size:.85rem; padding:0 .2rem; text-decoration:underline; font-weight:700}
.linkbtn.danger{color:#b3241f}

footer{
  background:var(--board); color:var(--cream-2); text-align:center; padding:1.6rem 1rem;
  border-top:3px solid var(--ink); font-weight:600; font-size:.9rem;
}
footer strong{color:var(--gold); font-family:"Syne",sans-serif}

.empty{text-align:center; padding:1.5rem}
.empty .big{font-family:"Syne",sans-serif; font-weight:800; font-size:1.4rem; color:var(--green); margin-bottom:.3rem}

@media (max-width:720px){
  .hero-inner{grid-template-columns:1fr; text-align:center}
  .hero .tagline{margin-left:auto; margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-art{order:-1; max-width:320px; margin:0 auto}
  .grid-form{grid-template-columns:1fr}
  .teams .home{text-align:left}
  .podium{grid-template-columns:1fr; gap:.7rem}
  .pod--1{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  .btn,.btn-ghost,.chip{transition:none}
  html{scroll-behavior:auto}
}

/* team crest badges + fixtures/results page --------------------------------- */
.crest{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; border:2.5px solid var(--ink);
  font-family:"Syne",sans-serif; font-weight:800; font-size:.72rem; letter-spacing:.02em;
  box-shadow:2px 2px 0 rgba(21,37,27,.85); flex:none;
}
.fx{border:2.5px solid var(--ink); border-radius:14px; background:#fff; box-shadow:var(--shadow-sm); padding:.8rem .9rem; margin-bottom:.8rem}
.fx-main{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem}
.fx-team{display:flex; align-items:center; gap:.55rem; min-width:0}
.fx-team .tname{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fx-home{justify-content:flex-end; text-align:right}
.fx-away{justify-content:flex-start}
.fx-mid{display:flex; flex-direction:column; align-items:center; min-width:78px}
.fx-score{font-family:"Syne",sans-serif; font-weight:800; font-size:1.5rem; color:var(--green); line-height:1}
.fx-score i{color:#9aa89d; font-style:normal; margin:0 .15rem}
.fx-ft{font-size:.65rem; font-weight:800; letter-spacing:.1em; color:#8a978c; text-transform:uppercase}
.fx-v{font-family:"Syne",sans-serif; font-weight:800; color:#9aa89d}
.fx-ko{font-size:.72rem; color:#6b7a6f; font-weight:600; text-align:center; margin-top:.15rem}

.split{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:.5rem; align-items:end; margin-top:.75rem; padding-top:.7rem; border-top:1px dashed var(--cream-2)}
.seg{min-width:0}
.seg-bar{height:8px; background:var(--cream-2); border:1.5px solid var(--ink); border-radius:6px; overflow:hidden}
.seg-bar span{display:block; height:100%; background:var(--orange)}
.seg.win .seg-bar span{background:var(--green)}
.seg-lbl{font-size:.72rem; font-weight:600; color:#5f6f63; margin-top:.25rem; white-space:nowrap}
.seg.win .seg-lbl{color:var(--green); font-weight:800}
.seg-lbl b{font-family:"Syne",sans-serif}
.split-total{font-size:.72rem; font-weight:700; color:#8a978c; white-space:nowrap; align-self:end; padding-bottom:.15rem}
.split-none{margin-top:.6rem; padding-top:.6rem; border-top:1px dashed var(--cream-2); font-size:.85rem}

@media (max-width:560px){
  .crest{width:30px; height:30px; font-size:.66rem}
  .fx-team .tname{font-size:.9rem; white-space:normal}
  .split{grid-template-columns:1fr 1fr 1fr; }
  .split-total{grid-column:1 / -1; text-align:right}
  /* tips page: keep all three H/D/A pills visible in portrait */
  main{padding:0 .6rem 2rem}
  .card{padding:1.1rem 1rem}
  .fixture{padding:.7rem .65rem}
  .options{gap:.35rem}
  .opt{padding:.5rem .25rem; font-size:.78rem; gap:.25rem}
  .opt input[type=radio]{transform:scale(.85); margin:0}
}
@media (max-width:360px){
  .opt{font-size:.72rem; padding:.5rem .15rem}
  .opt input[type=radio]{display:none}   /* very narrow: green fill shows the pick */
}

/* weekly winners + prize -------------------------------------------------- */
.prize-strip{
  display:block; margin:1.1rem 0; padding:.7rem 1rem; border:2.5px solid var(--ink);
  border-radius:12px; background:var(--white); box-shadow:var(--shadow-sm);
  font-weight:600; color:var(--ink);
}
.prize-strip:hover{text-decoration:none; transform:translate(-2px,-2px)}
.prize-strip.rolling{background:linear-gradient(90deg,#fff2b8,var(--white)); border-color:var(--ink)}
.prize-card{
  display:flex; gap:.9rem; align-items:center; border:3px solid var(--ink); border-radius:16px;
  background:var(--white); box-shadow:var(--shadow); padding:1.1rem 1.2rem; margin:1rem 0;
}
.prize-card.rolling{background:linear-gradient(180deg,#fff6cf,var(--white))}
.prize-emoji{font-size:2.2rem; line-height:1}
.prize-head{font-family:"Syne",sans-serif; font-weight:800; font-size:1.25rem; color:var(--green)}
.prize-sub{margin:.2rem 0 0; font-size:.95rem}
.wk{display:flex; gap:.9rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--cream-2)}
.wk:last-child{border-bottom:0}
.wk-label{font-family:"Syne",sans-serif; font-weight:800; color:var(--green); min-width:110px; flex:none}
.wk-body{display:flex; flex-wrap:wrap; gap:.4rem .8rem; align-items:baseline}
.wk-win{font-weight:800}
.wk-draw{font-weight:800; color:#b06a2c}
.wk-score{color:#6b7a6f; font-size:.88rem; font-weight:600}
.wk-claim{width:100%; margin-top:.2rem; font-weight:700; color:var(--green);
  background:#eafaf0; border:2px solid var(--ink); border-radius:9px; padding:.25rem .6rem; display:inline-block}
.rules summary{font-family:"Syne",sans-serif; font-weight:800; color:var(--green); cursor:pointer; font-size:1.05rem}
.rules ol{margin:.8rem 0 0; padding-left:1.2rem}
.rules li{margin:.35rem 0}
@media (max-width:560px){ .wk{flex-direction:column; gap:.2rem} .wk-label{min-width:0} }

/* this-week board ---------------------------------------------------------- */
.tw-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem}
.tw-gw{font-family:"Syne",sans-serif; font-weight:800; color:var(--green); font-size:1.1rem}
.live{font-weight:700; font-size:.82rem; color:#1c8a4e}

/* anchor offset so sticky header does not cover jumped-to sections */
section[id]{scroll-margin-top:84px}
.rules ol{margin:.4rem 0 0}

/* tip log (admin manual backup) ------------------------------------------- */
.tiplog{border-collapse:collapse; font-size:.85rem; min-width:100%}
.tiplog th,.tiplog td{border:1px solid var(--cream-2); padding:.4rem .5rem; text-align:center; white-space:nowrap}
.tiplog thead th{background:var(--board); color:var(--gold); font-family:"Syne",sans-serif; position:sticky; top:0}
.tiplog .fxcol{text-align:left; position:sticky; left:0; background:var(--white); font-weight:600}
.tiplog thead .fxcol{background:var(--board); color:var(--gold)}
.tiplog .fxline .v{color:#9aa89d; font-weight:400}
.tiplog .fxko{font-size:.72rem; color:#6b7a6f; font-weight:400}
.tiplog .res{font-weight:700}
.tiplog .res .sc{display:block; font-size:.72rem; color:#6b7a6f; font-weight:400}
.tiplog .pk{font-family:"Syne",sans-serif; font-weight:800; color:#33413a}
.tiplog .pk.ok{background:#1c8a4e; color:#fff}
.tiplog .totals td{background:#faf7ec; border-top:2px solid var(--ink)}
.tiplog .pcol{max-width:80px; overflow:hidden; text-overflow:ellipsis}

/* prize claim (staff) ----------------------------------------------------- */
.pill{display:inline-block; font-family:"Syne",sans-serif; font-weight:800; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.03em; padding:.15rem .55rem; border-radius:20px; border:2px solid var(--ink)}
.pill.open{background:var(--gold); color:var(--ink)}
.pill.done{background:#1c8a4e; color:#fff}
.pill.exp{background:#e9e2cf; color:#6b7a6f}
.card.claim{padding:1rem 1.1rem}
.card.claim.claimed{opacity:.75}
.card.claim.expired{opacity:.6}
.claim-top{display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem}
.claim-who{font-family:"Syne",sans-serif; font-weight:800; font-size:1.15rem; color:var(--green)}
.claim-meta{font-size:.85rem; color:#6b7a6f; font-weight:600}
.claim-dl{margin:.5rem 0 .4rem; font-size:.85rem}
.claim-btns{display:flex; gap:.5rem; flex-wrap:wrap; margin:0}
.claim-btns .btn{font-size:.9rem; padding:.55rem 1rem}

/* player beer ticket ------------------------------------------------------- */
.ticket{border:3px solid var(--ink); border-radius:18px; padding:1.6rem 1.2rem; margin:1rem 0; text-align:center;
  background:linear-gradient(180deg,#fff6cf,var(--white)); box-shadow:var(--shadow); position:relative; overflow:hidden}
.ticket::before,.ticket::after{content:""; position:absolute; top:50%; width:26px; height:26px; background:var(--cream);
  border:3px solid var(--ink); border-radius:50%; transform:translateY(-50%)}
.ticket::before{left:-16px}
.ticket::after{right:-16px}
.ticket-top{font-family:"Syne",sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:var(--green); font-size:.95rem}
.ticket-gw{font-family:"Syne",sans-serif; font-weight:800; font-size:3.2rem; line-height:1; color:var(--ink); margin:.2rem 0}
.ticket-sub{font-weight:600; color:#5f6f63; margin-bottom:.9rem}
.ticket-status .pill{font-size:.9rem; padding:.35rem .9rem}
.ticket.claimed{background:#eafaf0}
.ticket.claimed .ticket-gw{color:#1c8a4e}
.ticket.expired{background:#efece2; opacity:.75}
#live-note{text-align:center; font-size:.8rem}

/* remember-me checkbox ---------------------------------------------------- */
.remember{display:flex; align-items:center; gap:.5rem; font-weight:600; margin:.7rem 0}
.remember input{width:auto}

/* gameweek leaders (compact) --------------------------------------------- */
.section-title.sub{font-size:1.15rem}
.gwlead{padding:.5rem .9rem}
.gwl-row{display:flex; align-items:center; gap:.7rem; padding:.55rem .2rem; border-bottom:1px solid var(--cream-2)}
.gwl-row:last-child{border-bottom:0}
.gwl-rank{font-size:1.15rem; width:1.7rem; text-align:center; font-weight:800; color:var(--green)}
.gwl-name{flex:1; font-weight:700}
.gwl-score{font-family:"Syne",sans-serif; font-weight:800; color:var(--green)}

/* reminders sent (admin) -------------------------------------------------- */
.card.rem{padding:.8rem 1rem}
.rem-head{font-size:.98rem}
.rem-list{margin:.5rem 0 0; padding-left:1.1rem}
.rem-list li{padding:.1rem 0}

/* rolling prize list (per-week contests) ---------------------------------- */
.prize-list{margin:.35rem 0 .2rem; padding-left:1.1rem}
.prize-list li{padding:.18rem 0; line-height:1.35}
.prize-foot{font-size:.82rem; margin:.3rem 0 0}

/* hub link + claim code --------------------------------------------------- */
.linklist{display:flex;flex-direction:column;gap:.3rem;margin:.5rem 0}
.linkrow{display:flex;align-items:center;gap:.5rem;font-weight:600}
.linkrow input{width:auto}
.claimcode{font-family:"Syne",sans-serif;font-weight:800;font-size:2.6rem;letter-spacing:.35rem;
  color:var(--green);margin:.2rem 0 .1rem}

/* Admin → Members page ---------------------------------------------------- */
.card.migrate{background:var(--cream); margin:0 0 1.2rem}
.card.migrate h2{margin-top:0}
.card.migrate textarea{
  width:100%; padding:.6rem .75rem; border:2px solid var(--ink); border-radius:10px;
  font-family:monospace; font-size:.85rem; box-sizing:border-box; resize:vertical;
}
.card.migrate .btn{margin-top:.6rem}

.members-table{width:100%; border-collapse:collapse}
.members-table th{text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; color:#6b7a6f}
.members-table td{vertical-align:middle}
.mem-name{font-weight:700}
.mem-sub{font-size:.78rem}
.mem-role{font-size:.85rem; margin-bottom:.15rem}

.emailform{display:flex; gap:.4rem; align-items:center; margin:0}
.emailform input{
  width:auto; flex:1; min-width:150px; max-width:220px; padding:.4rem .55rem;
  border:2px solid var(--line); border-radius:8px; font-size:.85rem; font-weight:500;
}
.emailform button{
  flex:none; padding:.4rem .7rem; border:2px solid var(--ink); border-radius:8px;
  background:#fff; font-family:"Syne",sans-serif; font-weight:800; font-size:.72rem;
  text-transform:uppercase; cursor:pointer; color:var(--green);
}
.emailform button:hover{background:var(--cream)}

/* admin top action buttons ------------------------------------------------- */
.admin-actions{display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 1.2rem}
.admin-actions .btn-ghost{margin:0}

/* gameweeks table on the admin page — stack it on phones so the "Fixtures &
   results" button + delete link have room instead of squeezing into a cell. */
@media (max-width:640px){
  .gw-table thead{display:none}
  .gw-table, .gw-table tbody{display:block; width:100%}
  .gw-table tr{
    display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .6rem;
    border:2px solid var(--ink); border-radius:12px; margin-bottom:.6rem;
    padding:.6rem .7rem; background:#fff; box-shadow:var(--shadow-sm);
  }
  .gw-table td{display:inline; width:auto; padding:0; border-bottom:0}
  .gw-table td[data-label]::before{content:attr(data-label) ": "; font-weight:700; color:#6b7a6f}
  .gw-table .gw-actions{flex:1 0 100%; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
    margin-top:.4rem; padding-top:.5rem; border-top:1px dashed var(--cream-2)}
  .gw-table .gw-actions .btn-ghost{padding:.5rem .9rem; font-size:.85rem}
}

/* Home Screen app sign-in bridge ------------------------------------------ */
.appcode-banner{display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:center}
.appcode-banner a{color:#12522f; text-decoration:underline; font-weight:800}
.appcode-steps{margin:.8rem 0; padding-left:1.2rem}
.appcode-steps li{margin:.3rem 0}
.appcode-box{
  font-family:"Syne",sans-serif; font-weight:800; font-size:2.2rem; letter-spacing:.12em;
  text-align:center; background:var(--cream-2); border:2.5px solid var(--ink); border-radius:14px;
  padding:.9rem 1rem; margin:1rem 0; color:var(--green);
}