/* ===========================================================
   Play Your Club Right — retro overlay for /daily

   The daily is the one game with no club, so it wears the site's
   own palette rather than a club's. Its --ink token does double
   duty as both the card fill and the body text colour, which is
   convenient here: setting it to navy turns the cards navy and
   the body copy navy in a single move.
   =========================================================== */

: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;

  /* --ink is the card fill AND the text colour — navy serves both */
  --ink:#0E2C63;
  --ink-2:#4A4034; --ink-3:#7B6E5C;
  --paper:#F2E7CB; --paper-2:#FBF5E5; --paper-3:#E7D8B2;
  --line:#E0D2AE; --line-2:#C6B287;
  --cream:#FAF3E0;

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

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

*,*::before,*::after{border-radius:0!important}
body{font-family:var(--body);-webkit-font-smoothing:auto;line-height:1.55}

/* ---------- shared chrome (matches the other pages) ---------- */
.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,.site-nav{
  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 */
.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;padding:9px 11px;
  border-left:1px solid rgba(199,154,62,.35)}
.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}
footer{background:var(--r-navy-2);border-top:3px solid var(--r-key)!important;color:var(--r-frame)}

/* ---------- headings ---------- */
.mode-title{font-family:var(--disp);font-weight:400;font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-2)}
.mode-title b{font-weight:600;color:var(--r-navy)}
/* the daily's title gets the same ladder tab as every club name */
.mode-club{
  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:9px 16px;
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;line-height:1.1;font-size:clamp(21px,6.6vw,27px);
  text-shadow:none;
}
.mode-explainer{font-family:var(--body);font-size:12.5px;color:var(--ink-2)}
.daily-number{font-family:var(--disp);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--r-key-dark)}
.ts-label,.tl{font-family:var(--disp);font-weight:500;letter-spacing:.18em}
.ts-title,.btitle{font-family:var(--disp);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.tv,.bnum,.cval,.cq{font-family:var(--disp)!important;font-weight:600!important;
  letter-spacing:.01em!important;font-variant-numeric:tabular-nums}

/* ---------- panels ---------- */
.mode-card,.top-box,.banner{
  border:2px solid var(--r-key)!important;
  box-shadow:4px 4px 0 rgba(0,0,0,.34)!important;
}
.mc-title{font-family:var(--disp);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mc-desc,.mc-played,.bsub,.hint{font-family:var(--body);font-size:12.5px}

/* ---------- the cards, as Panini stickers on the brand navy ---------- */
.card{
  background:var(--r-navy)!important;
  border:5px solid var(--r-frame)!important;
  outline:1px solid var(--r-ink);
  box-shadow:inset 0 0 0 2px var(--r-key)!important;
  color:var(--r-frame)!important;
}
.card::before{background:var(--r-key)!important;opacity:1!important;height:5px!important}
.card.base::before{opacity:1!important}
.card.facedown{
  background:var(--paper-3)!important;color:var(--ink-3)!important;
  border-color:var(--r-frame)!important;
  box-shadow:inset 0 0 0 2px var(--line-2)!important;
}
/* verdict lives in the frame, as it does in the club games */
.card.ok{border-color:var(--r-pitch)!important;box-shadow:inset 0 0 0 2px var(--r-key)!important}
.card.bad{border-color:var(--r-red)!important;box-shadow:inset 0 0 0 2px var(--r-key)!important}
.card.spinning{box-shadow:inset 0 0 0 2px var(--r-key-lite)!important}
@keyframes pulse{from{transform:none}to{transform:none}}

.clabel{
  font-family:var(--disp);font-weight:500;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--r-navy)!important;color:var(--r-frame)!important;
  border:1px solid var(--r-ink);padding:2px 8px!important;
}
.cclub,.cera{font-family:var(--disp);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--r-key-lite)!important}
.cname{font-family:var(--disp);font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  color:var(--r-frame)!important}

/* ---------- controls ---------- */
.btn-h,.btn-l{
  border-width:2px!important;background:var(--paper-2)!important;
  box-shadow:3px 3px 0 var(--r-ink)!important;
  font-family:var(--disp)!important;font-weight:600!important;
  letter-spacing:.12em;text-transform:uppercase;
}
.btn-h:active,.btn-l:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--r-ink)!important}
.mc-btn,.bprimary{
  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)!important;
  font-family:var(--disp)!important;font-weight:600!important;
  letter-spacing:.12em;text-transform:uppercase;
}
.mc-btn:hover,.bprimary:hover{background:var(--r-key-lite)!important}
.mc-btn:active,.bprimary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--r-navy-3)!important}
.bsecondary,.go-lb{
  border:2px solid currentColor!important;
  font-family:var(--disp)!important;font-weight:500!important;
  letter-spacing:.12em;text-transform:uppercase;
}
.badge{font-family:var(--disp)!important;font-weight:500!important;letter-spacing:.16em!important;
  border:1px solid var(--r-key)!important}
.timer-wrap{height:8px;border:1px solid var(--r-ink);background:var(--paper-3)}
.timer-bar.warn,.timer-bar.amber{background:var(--r-key)!important}
.timer-bar.danger{background:var(--r-red)!important}
.transition-screen{border-top:4px solid var(--r-key)}

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

/* =========================================================
   MOBILE MENU (utility pages)
   Under 860px the .nav-right list becomes a dropdown panel rather than a
   second copy of the links, so there is nothing to keep in sync.
   ========================================================= */
.nav-burger{display:none}

@media (max-width:860px){
  .nav{position:relative;flex-wrap:nowrap}
  .nav-burger{
    display:flex;align-items:center;justify-content:center;
    margin-left:auto;width:44px;height:38px;flex:0 0 auto;
    background:var(--r-blue);border:2px solid var(--r-key);cursor:pointer;padding:0;
  }
  .nav-burger span,
  .nav-burger span::before,
  .nav-burger span::after{
    content:"";display:block;width:18px;height:2px;background:var(--r-frame);position:relative;
  }
  .nav-burger span::before{position:absolute;top:-6px;left:0}
  .nav-burger span::after{position:absolute;top:6px;left:0}
  .nav-burger.on{background:var(--r-key)}
  .nav-burger.on span,
  .nav-burger.on span::before,
  .nav-burger.on span::after{background:var(--r-navy-3)}

  .nav-right{
    display:none!important;
    position:absolute;top:100%;left:0;right:0;z-index:80;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--r-navy-2);
    border-top:2px solid var(--r-key);
    border-bottom:3px solid var(--r-key);
    box-shadow:0 6px 0 rgba(0,0,0,.35);
    padding:0;
  }
  .nav-right.open{display:flex!important}
  .nav-right a{
    border-left:none!important;
    border-bottom:1px solid rgba(199,154,62,.28);
    padding:13px 18px!important;font-size:12.5px;
  }
  .nav-right a:last-child{border-bottom:none}
  .nav-right a.solid{margin:0;text-align:center}
}