/* ==========================================================================
   FANZWIPE — site stylesheet
   Tokens, type scale and the card treatment are lifted straight from the game,
   so the site and the app are the same thing rather than two things that
   happen to look similar.
   ========================================================================== */

:root{
  --pitch:#0B2027; --slat:#14323C; --slat-hi:#1B4250; --line:#245464;
  --sodium:#F2A33C; --sodium-deep:#C9822B; --chalk:#EDE7DA; --muted:#9FB8C0;
  --ink:#061318; --right:#5FA05A; --claret:#A8323E;
  --r:14px; --pad:clamp(18px,5vw,28px); --maxw:1000px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--pitch);color:var(--chalk);
  font-family:"Chivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--sodium);text-decoration:none;border-bottom:1px solid rgba(242,163,60,.4)}
a:hover{border-bottom-color:var(--sodium)}
:focus-visible{outline:3px solid var(--sodium);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:700px}

h1,h2,h3{font-family:"Archivo Black",sans-serif;line-height:1.05;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(32px,7.2vw,54px)}
h2{font-size:clamp(24px,4.6vw,34px);margin-bottom:14px}
h3{font-size:clamp(18px,2.6vw,21px);margin-bottom:8px}
p{margin:0 0 16px}
.eyebrow{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sodium);margin-bottom:14px;display:block}
.lede{font-size:clamp(17px,2.2vw,20px);color:#C9DAE0;max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:14px}
.center{text-align:center}

/* ---------- header ---------- */
/* Sticky, but it gets out of the way. Holding 64px of a phone screen for a logo
   and a burger isn't worth it while someone's reading — so it slides away as you
   scroll down and comes straight back the moment you scroll up, which is when
   you're reaching for navigation anyway.

   And once you're past the hero it earns its place: a compact PLAY appears in it,
   so the main action is never more than one tap away. */
.site-head{position:sticky;top:0;z-index:50;background:rgba(11,32,39,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid rgba(36,84,100,.6);
  transition:transform .22s ease}
.site-head.tucked{transform:translateY(-101%)}

.head-play{
  display:none;align-items:center;justify-content:center;
  background:var(--sodium);color:var(--ink);border:0;border-bottom:3px solid var(--sodium-deep);
  font-family:"Archivo Black",sans-serif;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 16px;border-radius:10px;flex:none;
}
.head-play:hover{background:#F5B057}
.head-play:active{transform:translateY(2px);border-bottom-width:1px}
.site-head.scrolled .head-play{display:inline-flex}
.site-head .wrap{display:flex;align-items:center;gap:10px;height:64px;position:relative}
.brand{display:flex;align-items:center;gap:10px;border:0}
.brand svg{width:30px;height:30px;flex:none}
.wordmark{font-family:"Archivo Black",sans-serif;font-size:19px;letter-spacing:-.01em;color:var(--chalk)}
.wordmark span{color:var(--sodium)}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center}
.head-play{margin-left:auto}
.site-head.scrolled .nav{margin-left:10px}
.nav a{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);padding:9px 11px;border-radius:8px;border:0}
.nav a:hover,.nav a[aria-current="page"]{color:var(--chalk);background:var(--slat)}

/* burger, mobile only */
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;
  border:1px solid var(--line);background:var(--slat);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--chalk);border-radius:2px;
  transition:transform .18s,opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:780px){
  .burger{display:flex}
  .nav{
    position:absolute;top:64px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--pitch);border-bottom:1px solid var(--line);
    padding:8px var(--pad) 16px;display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:15px 4px;font-size:13px;letter-spacing:.14em;
    border-bottom:1px solid rgba(36,84,100,.45);border-radius:0}
  .nav a:last-child{border-bottom:0}
  .nav a:hover,.nav a[aria-current="page"]{background:transparent;color:var(--sodium)}
}

/* ---------- the arcade PLAY key ---------- */
.play{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sodium);color:var(--ink);border:0;border-bottom:4px solid var(--sodium-deep);
  font-family:"Archivo Black",sans-serif;font-size:19px;letter-spacing:.04em;text-transform:uppercase;
  padding:18px 44px;border-radius:16px;min-height:60px;min-width:200px;cursor:pointer;position:relative;
  transition:transform .06s linear,border-bottom-width .06s linear,background .12s;
}
.play:hover{background:#F5B057}
.play:active{transform:translateY(3px);border-bottom-width:1px}
.play::before,.play::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  border-left:6px solid transparent;border-right:6px solid transparent;opacity:0;transition:opacity .15s}
.play::before{top:-12px;border-bottom:7px solid var(--sodium)}
.play::after{bottom:-12px;border-top:7px solid var(--sodium)}
.play:hover::before,.play:hover::after{opacity:.6}
@media (max-width:420px){ .play{width:100%} }

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--slat);border:1px solid var(--line);color:var(--chalk);
  padding:14px 22px;border-radius:var(--r);font-weight:700;font-size:15px;min-height:50px;cursor:pointer}
.btn:hover{background:var(--slat-hi)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(40px,8vw,80px) 0 clamp(36px,6vw,64px);overflow:hidden}
/* the kit slice from the cards, blown up as a background motif */
.hero::before{content:"";position:absolute;inset:-15% -25% -15% 34%;z-index:0;
  background:linear-gradient(112deg,transparent 0 46%,rgba(242,163,60,.09) 46% 100%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:16ch}
.hero h1 em{font-style:normal;color:var(--sodium)}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:30px}
.finep{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:18px}

section{padding:clamp(36px,6vw,64px) 0}
section + section{border-top:1px solid rgba(36,84,100,.45)}
.grid-2{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,44px);align-items:center}
@media (min-width:860px){ .grid-2{grid-template-columns:1.05fr .95fr} }

/* ---------- player cards, exactly as in the game ---------- */
.cards{display:flex;gap:14px;justify-content:center;align-items:center}
.card{position:relative;width:184px;height:294px;flex:none;border-radius:16px;
  border:1px solid var(--line);overflow:hidden;padding:13px;display:flex;flex-direction:column;
  box-shadow:0 18px 40px rgba(0,0,0,.38)}
.card:nth-child(1){transform:rotate(-5deg) translateY(10px)}
.card:nth-child(3){transform:rotate(5deg) translateY(10px)}
.card:nth-child(2){transform:translateY(-8px);z-index:2}
.card .panel{position:absolute;inset:0;z-index:0;
  background:linear-gradient(112deg,var(--c1) 0 64%,var(--c2) 64% 100%)}
.card .bar{position:absolute;left:0;right:0;height:8.5%;opacity:.62}
.card .scrim-top{position:absolute;left:0;right:0;top:0;height:38%;z-index:1;
  background:linear-gradient(180deg,rgba(6,19,24,.86) 0%,rgba(6,19,24,.45) 55%,transparent 100%)}
.card .scrim-bot{position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;
  background:linear-gradient(0deg,rgba(6,19,24,.92) 0%,rgba(6,19,24,.72) 45%,transparent 100%)}
.card > *:not(.panel):not(.scrim-top):not(.scrim-bot){position:relative;z-index:2}
.card .club{font-family:"Anton",sans-serif;font-size:17px;text-transform:uppercase;line-height:1;color:#fff}
.card .pos{font-family:"Roboto Mono",monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:4px}
.card .plate{width:56px;height:56px;border-radius:50%;background:rgba(6,19,24,.55);
  border:1px solid rgba(255,255,255,.12);margin:8px auto 4px;display:flex;align-items:center;justify-content:center}
.card .plate svg{width:58%;height:58%;fill:var(--sodium)}
.card .name{font-family:"Archivo Black",sans-serif;font-size:17px;line-height:1.05;
  color:#fff;margin-top:auto;letter-spacing:-.015em}
.card .stats{display:flex;margin-top:8px}
.card .stat{flex:1;min-width:0}
.card .stat + .stat{padding-left:10px;margin-left:10px;border-left:1px solid rgba(255,255,255,.22)}
.card .stat .v{display:block;font-family:"Archivo Black",sans-serif;font-size:22px;line-height:1;color:var(--sodium)}
.card .stat + .stat .v{color:rgba(255,255,255,.92)}
.card .stat .l{display:block;font-size:9px;font-weight:700;margin-top:4px;color:rgba(255,255,255,.72)}
@media (max-width:560px){
  .cards{gap:7px}
  .card{width:31.5%;height:auto;aspect-ratio:184/294;padding:9px}
  .card .club{font-size:12px}
  .card .name{font-size:12px}
  .card .pos{font-size:8px}
  .card .plate{width:40px;height:40px;margin:6px auto 2px}
  .card .stat .v{font-size:16px}
  .card .stat .l{font-size:7px}
  .card .stat + .stat{padding-left:7px;margin-left:7px}
}

.panel-box{background:var(--slat);border:1px solid var(--line);border-left:4px solid var(--sodium);
  border-radius:var(--r);padding:clamp(18px,3vw,26px)}
.share-mock{font-family:"Roboto Mono",monospace;font-size:13px;line-height:1.85;
  background:#0F2830;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;white-space:pre-wrap;color:#C9DAE0;overflow-x:auto;margin:0}
.share-mock b{color:var(--sodium);font-weight:400}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:720px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{background:var(--slat);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.step .n{font-family:"Archivo Black",sans-serif;font-size:13px;color:var(--ink);background:var(--sodium);
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;margin-bottom:14px}
.step .icon{height:54px;display:flex;align-items:center;margin-bottom:12px}
.step .icon svg{height:100%;width:auto;fill:var(--sodium)}
.step .chev{display:flex;gap:12px;align-items:center;font-family:"Archivo Black",sans-serif;font-size:28px;height:54px}
.step .chev .l{color:var(--claret)}
.step .chev .r{color:var(--right)}
.step .big{font-family:"Archivo Black",sans-serif;font-size:46px;color:var(--sodium);line-height:1;height:54px}
.step p{margin:0;color:#C9DAE0;font-size:15px}

/* ---------- kid-safe ---------- */
.safe{background:var(--slat);border:1px solid var(--line);border-left:4px solid var(--sodium);
  border-radius:var(--r);padding:clamp(20px,3vw,28px)}
.safe ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
@media (min-width:700px){ .safe ul{grid-template-columns:1fr 1fr} }
.safe li{display:flex;gap:11px;align-items:flex-start;font-weight:700}
.safe li svg{width:18px;height:18px;flex:none;margin-top:4px;stroke:var(--right);fill:none;stroke-width:2.8}

.rules{display:grid;gap:12px;margin:0;padding:0;list-style:none}
/* Amber left edge, same as the kid-safe strip, so a rule reads as a rule
   rather than as another paragraph in a box. */
.rules li{background:#0F2830;border:1px solid var(--line);border-left:4px solid var(--sodium);
  border-radius:var(--r);padding:16px 18px 16px 20px}
.rules li b{color:var(--sodium)}
dl.facts{margin:0}
dl.facts dt{font-family:"Archivo Black",sans-serif;font-size:16px;margin-top:20px}
dl.facts dd{margin:6px 0 0;color:#C9DAE0}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:7px}
.field input{width:100%;background:#0F2830;border:1px solid var(--line);color:var(--chalk);
  border-radius:10px;padding:15px;font-family:inherit;font-size:16px}
.field input:focus{border-color:var(--sodium)}
.msg{border-radius:var(--r);padding:14px 16px;margin-top:16px;font-weight:700;display:none}
.msg.show{display:block}
.msg.ok{background:rgba(95,160,90,.14);border:1px solid rgba(95,160,90,.5);color:#B6DDB1}
.msg.bad{background:rgba(168,50,62,.14);border:1px solid rgba(168,50,62,.5);color:#F0BFC4}

/* ---------- leaderboard ---------- */
table.board{width:100%;border-collapse:collapse;margin-top:6px}
table.board th{text-align:left;font-family:"Roboto Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);padding:0 14px 12px;font-weight:400}
table.board th:last-child{text-align:right}
table.board td{padding:14px;border-top:1px solid rgba(36,84,100,.5)}
table.board tbody tr td:first-child{font-family:"Roboto Mono",monospace;color:var(--muted);width:58px}
table.board tbody tr td:nth-child(2){font-weight:700}
table.board tbody tr td:last-child{font-family:"Archivo Black",sans-serif;color:var(--sodium);text-align:right}
table.board tbody tr:nth-child(-n+3) td:first-child{color:var(--sodium)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid rgba(36,84,100,.6);padding:34px 0 46px;margin-top:16px}
.site-foot .links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:18px}
.site-foot .links a{font-family:"Roboto Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);border:0}
.site-foot .links a:hover{color:var(--chalk)}
.disclaimer{font-size:13px;color:var(--muted);max-width:72ch;margin:0}

@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto} }

/* ---------- points grid on the home page ---------- */
.ptgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){ .ptgrid{grid-template-columns:repeat(4,1fr)} }
.pt{background:var(--slat);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 16px;text-align:center}
.pt .ic{height:46px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.pt .ic svg{height:100%;width:auto;fill:var(--sodium)}
.pt .n{font-family:"Archivo Black",sans-serif;font-size:clamp(34px,8vw,44px);
  line-height:1;color:var(--sodium)}
.pt .l{font-size:12px;font-weight:700;color:var(--muted);margin-top:8px;letter-spacing:.01em}