/* ============================================================================
   amd-postgame.css — the pieces both Postgame pages share: the club menu, the
   week row and the game band. Drawn by v2/shared/amd-postgame.js. Rulebook
   tokens only (v2/shared/amd-rules.css).

   THE BAND. The record of a game that is over, on the site's dark band ground
   (--navy, elephant in Elephant and Tusk) in both themes. Its material is the
   site's own leather still (/assets/landing/hero-env.webp), screened onto the
   ground and masked so it sits behind the big numerals only, never under small
   text. The week numeral is set solid in the band's quieter ink: an outlined
   numeral is a text-stroke the render auditor cannot measure.
   ========================================================================== */

/* The club menu: whose side of the game. A native select — 32 clubs is a
   list to pick from, not a row of buttons. */
.pg-clubrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:var(--s5) 0 0}
.pg-clubrow label{font-size:var(--t-tiny);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--muted);font-weight:var(--w-bold)}
.pg-clubrow select{min-width:0;flex:0 1 18rem;font:inherit;font-size:var(--t-input);color:var(--ink);background:var(--panel);
  border:1px solid var(--ring);border-radius:var(--r-sm);padding:0 var(--s3);min-height:var(--tap)}
.pg-clubrow select:focus-visible{outline:2px solid var(--ring-focus);outline-offset:1px}

/* The week row: week and opponent only. No score, so the row gives nothing
   away before the band does. */
.pg-picker{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s3) 0 0}
.pg-picker button{position:relative;min-height:var(--tap);padding:0 var(--s4);border-radius:var(--r-sm);border:1px solid var(--line);background:var(--panel);color:var(--soft);font:inherit;font-size:var(--t-small);font-weight:var(--w-bold);cursor:pointer;text-align:left;line-height:1.2;display:inline-flex;align-items:center;gap:var(--s2)}
.pg-picker button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* "Graded": a small check beside a week the reader has locked a recap for. */
.pg-picker .pg-done{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:var(--r-pill);background:var(--ink);color:var(--panel);flex:none}
.pg-picker .pg-done svg{width:11px;height:11px}

/* ── THE GAME BAND ───────────────────────────────────────────────────────── */
.pg-band{position:relative;isolation:isolate;overflow:hidden;margin:var(--s5) 0 0;background:var(--navy);color:var(--on-dk);border-radius:var(--r-lg);padding:var(--s6);display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s6);align-items:stretch;box-shadow:var(--shadow-md);min-height:160px}
.pg-band::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/landing/hero-env.webp) center/cover;mix-blend-mode:screen;opacity:.3;filter:grayscale(1) contrast(1.1);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 12%,transparent 19%,transparent 78%,#000 96%);
          mask-image:linear-gradient(90deg,#000 0,#000 12%,transparent 19%,transparent 78%,#000 96%)}
.pg-wk{display:grid;align-content:center;justify-items:center;padding-right:var(--s6);border-right:1px solid var(--gold-lt)}
.pg-wk span{font-size:var(--t-tiny);letter-spacing:var(--track-caps);color:var(--gold-lt);font-weight:var(--w-bold);background:var(--navy);padding:1px var(--s1);border-radius:var(--r-xs);box-shadow:0 0 0 3px var(--navy)}
.pg-wk b{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-h1);line-height:.85;color:var(--on-dk-soft);margin-top:var(--s2)}
.pg-rows{display:grid;gap:var(--s3);align-content:center}
.pg-club{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding-bottom:var(--s3);border-bottom:1px solid var(--on-dk-soft)}
.pg-club:nth-child(2){border-bottom:0}
.pg-club b{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-stat);line-height:1}
.pg-club small{display:block;font-size:var(--t-tiny);color:var(--on-dk-soft);margin-top:2px}
.pg-club .s{font-family:var(--font-display);font-weight:var(--w-bold);font-size:var(--t-h1);line-height:.9;font-variant-numeric:tabular-nums}
.pg-club.lo b,.pg-club.lo .s{color:var(--on-dk-soft)}
.pg-crest{width:56px;height:56px;border-radius:var(--r-pill);display:grid;place-items:center;box-shadow:0 0 0 2px var(--gold-lt);flex:none;overflow:hidden}
.pg-crest img{width:100%;height:100%;display:block}
.pg-foot{font-size:var(--t-tiny);color:var(--on-dk-soft);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.pg-foot i{font-style:normal;color:var(--gold-lt);letter-spacing:var(--track-caps);font-weight:var(--w-bold)}
.pg-band.loading{min-height:200px}
.pg-band.loading>*{visibility:hidden}

@media (max-width:720px){
  .pg-picker{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .pg-picker button{flex:none}
  .pg-band{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5);margin-top:var(--s4)}
  .pg-band::before{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 18%,transparent 32%);mask-image:linear-gradient(180deg,#000 0,#000 18%,transparent 32%)}
  .pg-wk{border-right:0;border-bottom:1px solid var(--gold-lt);padding:0 0 var(--s3);grid-auto-flow:column;gap:var(--s4);align-items:end;justify-content:start}
  .pg-wk b{margin-top:0}
  .pg-club b{font-size:var(--t-h3)}
  .pg-club .s{font-size:var(--t-h2)}
  .pg-crest{width:46px;height:46px}
}