/* ===========================================================
   Play Your Club Right — retro overlay for NON-GAME pages
   Covers: about, contact, sponsorship, request-a-club,
           leaderboard, rugby-league.html

   Loads after each page's inline <style>, so equal-specificity
   rules win on source order. None of these pages carry club
   colours, so this file uses the brand palette throughout.
   =========================================================== */

:root{
  --r-ink:#171310;
  --r-key:#C79A3E; --r-key-lite:#E7CE84; --r-key-dark:#8A6620;
  --r-frame:#FAF3E0;
  --r-navy:#0E2C63; --r-navy-2:#0A2350; --r-navy-3:#061634; --r-blue:#164385;
  --r-red:#B03A22; --r-pitch:#1F5B33;

  /* surfaces retuned to the logo's cream */
  --paper:#F2E7CB; --paper-2:#FBF5E5; --paper-3:#E7D8B2;
  --line:#E0D2AE; --line-2:#C6B287;
  --ink:#171310; --ink-2:#4A4034; --ink-3:#7B6E5C;
  --cream:#F2E7CB;

  --higher:#1F5B33; --lower:#B03A22;
  --hi-on:#3E9A5F;  --lo-on:#D9553C;

  /* leaderboard mode accents, pulled onto the brand palette */
  --streak:#1F5B33; --levels:#164385; --faceoff:#B03A22;
  --gold:#C79A3E; --silver:#8E8F93; --bronze:#9A6A3C;

  --disp:'Oswald','Arial Narrow',Arial,sans-serif;
  --body:Tahoma,Verdana,'DejaVu Sans',Geneva,sans-serif;
}

*,*::before,*::after{border-radius:0!important}

/* =========================================================
   1. SHARED CHROME — all six pages
   ========================================================= */
body{
  background:var(--r-navy);
  font-family:var(--body);
  -webkit-font-smoothing:auto;
  line-height:1.6;
}

/* Panini foot rule — hard bands, not a gradient */
.topline{
  height:6px;
  background:linear-gradient(90deg,
    var(--r-red) 0 34%, var(--r-key) 34% 48%, var(--r-frame) 48% 58%,
    var(--r-blue) 58% 92%, var(--r-key) 92% 100%);
}
.topline i{display:none}

header{
  background:var(--r-navy)!important;
  border-bottom:3px solid var(--r-key)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.brand b{
  font-family:var(--disp);font-weight:500;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--r-frame);
}
.brand b span{color:var(--r-key-lite);font-weight:600}

/* the real logo in place of the CSS-drawn mark. These navs are 62px,
   so it can run larger than on the game pages. */
.mark{
  width:52px!important;height:44px!important;
  background:url(/assets/logo-nav.png) center/contain no-repeat!important;
  border:none!important;
  overflow:visible!important;
}
.mark::before,.mark::after{display:none!important}

.nav-right a{
  font-family:var(--disp);font-weight:500;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--r-frame)!important;
  border-left:1px solid rgba(199,154,62,.35);
  padding:9px 11px;
}
.nav-right a:hover,.nav-right a[aria-current]{
  background:var(--r-frame)!important;color:var(--r-navy)!important;
}
.nav-right a.solid{background:var(--r-key)!important;color:var(--r-navy-3)!important;font-weight:600}
.nav-right a.solid:hover{background:var(--r-key-lite)!important;color:var(--r-navy-3)!important}

footer{
  background:var(--r-navy-2);
  border-top:3px solid var(--r-key)!important;
  color:var(--r-frame);
  margin-top:0!important;
  padding:30px 0!important;
}
.foot-links a{
  font-family:var(--disp);font-weight:500;font-size:11.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(250,243,224,.82)!important;
}
.foot-links a:hover{color:var(--r-key-lite)!important}
.foot-copy{color:rgba(250,243,224,.55)!important;font-family:var(--body);font-size:11px}

/* the ladder tab — used for every page title, the same construction
   as the club name on the mode screens and the player cards */
.ladder-tab,
main h1,
.game-title,
.page-title{
  display:block;
  background:var(--r-navy);
  color:var(--r-frame)!important;
  border:4px solid var(--r-frame);
  outline:2px solid var(--r-ink);
  box-shadow:inset 0 0 0 2px var(--r-key), 4px 4px 0 rgba(0,0,0,.34);
  padding:10px 16px;
  font-family:var(--disp)!important;font-weight:600!important;
  text-transform:uppercase;letter-spacing:.05em!important;
  line-height:1.12!important;
  font-size:clamp(20px,4.4vw,28px)!important;
  text-align:center;
}

/* =========================================================
   2. CONTENT PAGES — about / contact / sponsorship / request-a-club
   ========================================================= */
main{
  max-width:868px;
  margin:26px auto 30px!important;
  background:var(--paper);
  border:2px solid var(--r-key);
  box-shadow:6px 6px 0 rgba(0,0,0,.38);
  padding:30px 0 34px!important;
}
.page-hero{
  border-bottom:none!important;
  padding-bottom:26px!important;
  margin-bottom:28px!important;
  position:relative;
}
.page-hero::after{
  content:"";position:absolute;left:24px;right:24px;bottom:0;height:4px;
  background:var(--r-key);
  border-top:1px solid var(--r-ink);border-bottom:1px solid var(--r-ink);
}
.eyebrow{
  font-family:var(--disp);font-weight:500;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--r-key-dark)!important;
  display:block;margin-bottom:12px;text-align:center;
}
.lead{
  font-family:var(--body);font-size:13.5px!important;color:var(--ink-2);
  margin:18px auto 0!important;max-width:56ch;text-align:center;
}

/* prose */
.prose h2{
  font-family:var(--disp)!important;font-weight:600!important;
  font-size:15px!important;letter-spacing:.14em!important;text-transform:uppercase;
  color:var(--r-navy)!important;
  border-bottom:2px solid var(--r-key);
  padding-bottom:7px;margin:32px 0 14px!important;
}
.prose p,.prose li{font-family:var(--body);font-size:13px!important;color:var(--ink-2)}
.prose li::before{
  width:7px!important;height:7px!important;top:8px!important;
  background:var(--r-key)!important;border:1px solid var(--r-ink);
}
.prose a{color:var(--r-navy)!important;text-decoration-color:var(--r-key)}
.prose p b,.prose li b{color:var(--r-navy)}

/* the three mode blurbs on /about */
.mode-item{
  border:2px solid var(--r-key)!important;
  background:var(--paper-2)!important;
  box-shadow:4px 4px 0 rgba(0,0,0,.3);
  padding:16px 16px 18px!important;
}
.mode-item::before{height:6px!important}
.mode-item h3{
  font-family:var(--disp)!important;font-weight:600!important;font-size:14px!important;
  letter-spacing:.12em!important;text-transform:uppercase;color:var(--r-navy)!important;
  margin:10px 0 7px!important;
}
.mode-item p{font-family:var(--body);font-size:12.5px!important}

/* forms */
.field label{
  font-family:var(--disp);font-weight:500;font-size:10.5px;
  letter-spacing:.18em;color:var(--r-key-dark)!important;
}
.field .opt{color:var(--ink-3)!important;letter-spacing:.04em}
.field input,.field textarea{
  font-family:var(--body)!important;font-size:13.5px!important;
  background:var(--paper-2)!important;
  border:2px solid var(--r-ink)!important;
}
.field input:focus,.field textarea:focus{border-color:var(--r-red)!important}
.btn{
  font-family:var(--disp)!important;font-weight:600!important;font-size:13px!important;
  letter-spacing:.12em;text-transform:uppercase;
  background:var(--r-key)!important;color:var(--r-navy-3)!important;
  border:2px solid var(--r-ink)!important;
  box-shadow:4px 4px 0 var(--r-navy-3);
  padding:12px 22px!important;
}
.btn:hover{background:var(--r-key-lite)!important}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--r-navy-3)}
.form-note{font-family:var(--body);font-size:11.5px;color:var(--ink-3)}
.form-ok{
  background:var(--paper-2)!important;
  border:2px solid var(--r-pitch)!important;
  font-family:var(--body);
}

/* =========================================================
   3. LEADERBOARD — CM stat tables
   ========================================================= */
.lb-hero{padding:30px 24px 0!important}
.title-rule{
  width:64px!important;height:5px!important;
  background:var(--r-key)!important;
  border-top:1px solid var(--r-ink);border-bottom:1px solid var(--r-ink);
  opacity:1!important;margin-top:18px!important;
}
.tagline{
  font-family:var(--body)!important;font-size:13px!important;
  color:rgba(250,243,224,.78)!important;margin-bottom:34px!important;
}
.section-title{
  font-family:var(--disp)!important;font-weight:600!important;font-size:16px!important;
  letter-spacing:.14em!important;text-transform:uppercase;color:var(--r-frame)!important;
}
.section-sub{
  font-family:var(--disp)!important;font-weight:500!important;
  letter-spacing:.16em!important;color:var(--r-key-lite)!important;
}
.mode-name{
  font-family:var(--disp)!important;font-weight:500!important;font-size:12px!important;
  letter-spacing:.16em!important;color:var(--r-frame)!important;
}
.mode-name::before{
  width:11px!important;height:11px!important;
  border:1px solid var(--r-ink);
}
.mode-name::after{background:rgba(199,154,62,.45)!important;height:2px!important}

/* each board is a CM stat panel */
.mini{
  border:2px solid var(--r-key)!important;
  background:var(--paper)!important;
  box-shadow:4px 4px 0 rgba(0,0,0,.34)!important;
}
.mini:hover{transform:none!important;box-shadow:4px 4px 0 rgba(0,0,0,.34)!important}
.mini-head{
  font-family:var(--disp)!important;font-weight:500!important;font-size:11px!important;
  letter-spacing:.16em!important;
  background:var(--r-navy)!important;color:var(--r-frame)!important;
  border-bottom:2px solid var(--r-key)!important;
  padding:8px 12px!important;
}
.mini-head .pip{color:var(--r-key-lite)!important;font-family:var(--body);font-weight:bold}
.mini-body{padding:0!important}

.lb{gap:0!important}
.lb-row{border-bottom:1px solid var(--line)}
.lb-row:nth-child(even){background:rgba(23,19,16,.045)}
.lb-row:last-child{border-bottom:none}
.lb-row.top{background:rgba(199,154,62,.14)!important}
.lb-pos{
  width:30px!important;flex-shrink:0;
  background:var(--r-navy);color:var(--r-frame)!important;
  font-family:var(--body)!important;font-weight:bold!important;font-size:11.5px!important;
  display:flex;align-items:center;justify-content:center;align-self:stretch;
}
/* medals: flat blocks, no radial gradients */
.lb-row.r1 .lb-pos,.lb-row.r2 .lb-pos,.lb-row.r3 .lb-pos{color:var(--r-navy-3)!important}
.lb-row.r1 .lb-pos::after,.lb-row.r2 .lb-pos::after,.lb-row.r3 .lb-pos::after{
  display:none!important;
}
.lb-row.r1 .lb-pos{background:var(--gold)!important}
.lb-row.r2 .lb-pos{background:var(--silver)!important}
.lb-row.r3 .lb-pos{background:var(--bronze)!important}
.lb-name{
  font-family:var(--body)!important;font-size:12.5px!important;font-weight:normal!important;
  color:var(--ink)!important;padding:8px 10px!important;
}
.lb-row.r1 .lb-name{font-weight:bold!important}
.lb-score{
  font-family:var(--body)!important;font-weight:bold!important;font-size:13px!important;
  color:var(--r-navy)!important;font-variant-numeric:tabular-nums;
  padding:8px 12px!important;
}
.lb-row.lb-me{
  background:rgba(199,154,62,.22)!important;
  box-shadow:inset 3px 0 0 var(--r-key);
}
.club-empty,.state{font-family:var(--body);font-size:11.5px;color:var(--ink-3)}
.whoami{font-family:var(--body);font-size:11.5px;color:rgba(250,243,224,.7)}

/* club filter */
.clubbar input{
  font-family:var(--body)!important;font-size:13.5px!important;
  background:var(--paper-2)!important;
  border:2px solid var(--r-ink)!important;
}
.clubbar input:focus{border-color:var(--r-red)!important}
.chip{
  font-family:var(--disp)!important;font-weight:500!important;font-size:11.5px!important;
  letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--r-key-dark)!important;
  background:var(--paper-2)!important;color:var(--ink-2)!important;
}
.chip.active,.chip[aria-pressed="true"]{
  background:var(--r-red)!important;color:var(--r-frame)!important;border-color:var(--r-ink)!important;
}

/* =========================================================
   4. rugby-league.html — a club list, so: ladder tabs
   This page carries no design tokens of its own, so everything
   is set explicitly here.
   ========================================================= */
body.rl,
body:has(.club-card){
  background:var(--r-navy)!important;
  color:var(--r-frame)!important;
  font-family:var(--body)!important;
}
.site-title{
  font-family:var(--disp)!important;font-weight:500!important;font-size:10.5px!important;
  letter-spacing:.22em!important;color:var(--r-key-lite)!important;
}
.page-sub{
  font-family:var(--body)!important;font-size:12.5px!important;
  color:rgba(250,243,224,.72)!important;margin-top:16px!important;
}
.section-label{
  font-family:var(--disp)!important;font-weight:500!important;font-size:10.5px!important;
  letter-spacing:.2em!important;color:var(--r-key-lite)!important;
  border-bottom:1px solid rgba(199,154,62,.4);padding-bottom:6px!important;
}
.grid{gap:8px!important}
.club-card{
  background:var(--r-navy-2)!important;
  border:3px solid var(--r-frame)!important;
  outline:1px solid var(--r-ink);
  box-shadow:inset 0 0 0 1px var(--r-key), 3px 3px 0 rgba(0,0,0,.34);
  padding:10px 12px!important;
}
.club-card:hover{background:var(--r-blue)!important}
.club-card:active{transform:translate(2px,2px);box-shadow:inset 0 0 0 1px var(--r-key),1px 1px 0 rgba(0,0,0,.34)}
.club-card .bar{height:5px!important;border-bottom:1px solid rgba(0,0,0,.4)}
.club-name{
  font-family:var(--disp)!important;font-weight:600!important;font-size:13px!important;
  letter-spacing:.05em;text-transform:uppercase;color:var(--r-frame)!important;
  margin-top:6px!important;
}
.club-tag{font-family:var(--body)!important;font-size:10.5px!important;color:rgba(250,243,224,.6)!important}
.club-arrow{display:none!important}

@media(max-width:600px){
  main{margin:14px 10px 20px!important}
  .page-hero::after{left:16px;right:16px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}