/* assets/pages/game.css
   Game preview pages (sports-prediction/<league>/<away>-vs-<home>-<date>.html).
   Rides on pages/fight.css for the article shell (.ar-*); this file only adds the
   game-specific pieces. Every colour is a site token so both themes follow site.css. */

/* Hero strip: the four things someone attending actually needs. */
.gm-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:28px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.gm-strip>div{background:var(--paper);padding:14px 16px}
.gm-k{margin:0;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.gm-v{margin:4px 0 0;font-weight:800;font-size:1.15rem;line-height:1.2;color:var(--ink)}
.gm-s{margin:3px 0 0;font-size:.82rem;color:var(--ink-3)}
.gm-vs{font-weight:600;font-size:.82rem;color:var(--ink-3);margin:0 2px}
@media (max-width:860px){.gm-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.gm-strip{grid-template-columns:1fr}}

/* Numbered reasons. */
.gm-reasons{margin:20px 0 0;padding:0;list-style:none;counter-reset:gmr}
.gm-reasons li{counter-increment:gmr;position:relative;padding:14px 0 14px 46px;border-top:1px solid var(--line)}
.gm-reasons li:last-child{border-bottom:1px solid var(--line)}
.gm-reasons li::before{content:counter(gmr);position:absolute;left:0;top:13px;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;background:var(--accent,#2459f0);color:#fff;
  font-weight:800;font-size:.86rem}

/* Tables. .ar-t supplies the base; these are the per-table tweaks. */
.gm-tape td,.gm-tape th{vertical-align:top}
.gm-span{font-weight:600}
.gm-odds tbody tr:last-child{border-top:2px solid var(--line)}
.gm-rung td,.gm-rung th{background:var(--tint,rgba(36,89,240,.06));font-weight:700}
.gm-props small,.gm-inj small{display:block;font-weight:500;color:var(--ink-3)}

/* Player cards. */
.gm-players{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:20px}
.gm-p{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--paper)}
.gm-p-team{margin:0;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.gm-p h3{margin:4px 0 6px;font-size:1.12rem}
.gm-p-line{margin:0 0 8px;color:var(--ink-2)}
.gm-p-line b{font-size:1.05rem}
.gm-p p:last-child{margin:0;font-size:.92rem;color:var(--ink-2)}
@media (max-width:760px){.gm-players{grid-template-columns:1fr}}

/* Method steps. */
.gm-steps{margin:18px 0 0;padding-left:22px}
.gm-steps li{margin-bottom:10px}

/* Rail note. */
.gm-note{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--paper)}
.gm-note-t{margin:0 0 6px;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.gm-note p{font-size:.92rem;color:var(--ink-2)}
.gm-note p:last-child{margin-bottom:0}

/* Byline avatar keeps its circle when the name wraps on narrow screens.
   Scoped to .gm-hero so the fight pages that share pages/fight.css are untouched. */
.gm-hero .ar-by-av{flex:0 0 48px;align-self:flex-start}
.gm-hero .ar-by-av img{display:block;width:48px;height:48px;border-radius:50%;object-fit:cover}

/* ---- Graded plan block ------------------------------------------------- */
.gm-plan{border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:var(--paper)}
.gm-plan-tag{margin:0 0 18px;font-size:.9rem;color:var(--ink-3);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gm-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:26px}
.gm-plan-grid>div{background:var(--paper);padding:13px 15px}
@media (max-width:820px){.gm-plan-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.gm-plan-grid{grid-template-columns:1fr}}
.gm-strip-pick .gm-v{color:var(--accent,#2459f0)}
.gm-pick{font-weight:800;color:var(--accent,#2459f0)}
.gm-against{margin:16px 0 0;padding:0;list-style:none}
.gm-against li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line)}
.gm-against li:last-child{border-bottom:1px solid var(--line)}
.gm-against li::before{content:"";position:absolute;left:4px;top:19px;width:10px;height:10px;
  border-radius:50%;background:var(--amber,#8a5a00);opacity:.75}
.gm-math th small{display:block;font-weight:500;color:var(--ink-3);margin-top:3px}
.gm-grade{margin-top:18px;padding:14px 16px;border-left:3px solid var(--accent,#2459f0);
  background:var(--tint,rgba(36,89,240,.06));border-radius:0 10px 10px 0;font-size:.94rem}
/* The hero strip gains a fifth cell on plan pages. */
.gm-hero .gm-strip{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.gm-hero .gm-strip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:860px){.gm-hero .gm-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.gm-hero .gm-strip{grid-template-columns:1fr}}

/* ---- On the record card: writer identity + the plan ---------------------- */
.gm-by{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;
  padding:10px;margin:0 -10px 4px;border-radius:12px;transition:background .15s ease}
.gm-by:hover,.gm-by:focus-visible{background:var(--tint,rgba(36,89,240,.06))}
.gm-by img{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:block}
.gm-by-t{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.gm-by-t b{font-size:1.02rem;color:var(--ink)}
.gm-by:hover .gm-by-t b,.gm-by:focus-visible .gm-by-t b{color:var(--accent,#2459f0)}
.gm-by-t small{font-size:.8rem;color:var(--ink-3)}
.gm-plan-dl{margin-top:10px}
.gm-note .ar-take-dl dd.gm-pick{color:var(--accent,#2459f0)}

/* ---- Fanatics referral: small pill that opens a panel ------------------- */
.gm-ref{position:fixed;right:18px;bottom:18px;z-index:80;width:auto;display:flex;
  flex-direction:column;align-items:flex-end;gap:10px}

.gm-ref-pill{display:flex;align-items:center;gap:10px;padding:9px 14px 9px 12px;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;text-align:left;
  box-shadow:0 10px 28px rgba(10,18,38,.16),0 2px 6px rgba(10,18,38,.07)}
.gm-ref-pill:hover,.gm-ref-pill:focus-visible{border-color:var(--accent,#2459f0)}
.gm-ref-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:var(--accent,#2459f0)}
.gm-ref-pill-t{display:flex;flex-direction:column;line-height:1.25}
.gm-ref-pill-t b{font-size:.9rem;color:var(--ink)}
.gm-ref-pill-t small{font-size:.72rem;color:var(--ink-3)}
.gm-ref-caret{flex:0 0 auto;width:8px;height:8px;margin-left:2px;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(-135deg);transition:transform .2s ease}
.gm-ref.is-open .gm-ref-caret{transform:rotate(45deg)}
.gm-ref.is-open .gm-ref-pill{border-color:var(--accent,#2459f0)}

.gm-ref-panel{order:-1;position:relative;width:330px;max-width:calc(100vw - 36px);
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px 18px 14px;
  box-shadow:0 18px 46px rgba(10,18,38,.22),0 2px 8px rgba(10,18,38,.08)}
.gm-ref-panel[hidden]{display:none}
.gm-ref-x{position:absolute;top:8px;right:8px;width:28px;height:28px;display:grid;place-items:center;
  border:0;border-radius:8px;background:transparent;color:var(--ink-3);font-size:1.3rem;line-height:1;cursor:pointer}
.gm-ref-x:hover,.gm-ref-x:focus-visible{background:var(--tint,rgba(36,89,240,.08));color:var(--ink)}
.gm-ref-tag{margin:0 0 8px}
.gm-ref-h{margin:0;font-weight:800;font-size:1.06rem;line-height:1.25;color:var(--ink)}
.gm-ref-p{margin:6px 0 0;font-size:.9rem;color:var(--ink-2)}
.gm-ref-terms{margin:10px 0 0;padding:0;list-style:none}
.gm-ref-terms li{position:relative;padding:5px 0 5px 15px;font-size:.8rem;line-height:1.45;color:var(--ink-3)}
.gm-ref-terms li::before{content:"";position:absolute;left:2px;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--ink-3);opacity:.55}
.gm-ref-code{margin:11px 0 0;display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:10px;
  background:var(--tint,rgba(36,89,240,.06));border:1px dashed var(--line-2,var(--line))}
.gm-ref-code span{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.gm-ref-code b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;letter-spacing:.06em;color:var(--ink)}
.gm-ref-btn{display:block;margin-top:11px;padding:11px 14px;border-radius:11px;text-align:center;
  background:var(--accent,#2459f0);color:#fff;font-weight:700;text-decoration:none;font-size:.95rem}
.gm-ref-btn:hover,.gm-ref-btn:focus-visible{filter:brightness(1.08)}
.gm-ref-fine{margin:10px 0 0;font-size:.73rem;line-height:1.45;color:var(--ink-3)}
.gm-ref-fine a{color:inherit}
@media (max-width:620px){
  .gm-ref{right:10px;left:10px;bottom:10px;align-items:stretch}
  .gm-ref-panel{width:auto;padding:14px 16px 12px}
  .gm-ref-pill{justify-content:flex-start}
}
@media (prefers-reduced-motion:no-preference){
  .gm-ref-panel{animation:gmRefIn .22s ease both}
  @keyframes gmRefIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

/* ---- Typography: stop orphaned last lines ------------------------------- */
/* text-wrap:pretty pulls a stranded word up so no line ends alone;
   balance evens out short headings. Both degrade to normal wrapping. */
.ar-body p, .ar-body li, .ar-body dd, .ar-body td, .ar-body th,
.gm-s, .gm-ref-p, .gm-ref-terms li, .gm-ref-fine, .ar-take-dl dd, .ar-src li{
  text-wrap:pretty}
.ar-h1, .ar-dek, .ar-h2, .ar-h3, .ar-take-main, .gm-ref-h, .gm-p h3, .gm-v,
.gm-hero .eyebrow{text-wrap:balance}
/* The plan cell's link gets its own line on purpose rather than by accident. */
.gm-s-more{display:block;margin-top:2px}
/* Strip cells share a baseline: labels top, values on one row, notes below. */
.gm-strip>div{display:flex;flex-direction:column}
.gm-strip .gm-s{margin-top:auto;padding-top:3px}

/* ---- Bet slip: the plan priced at the reader's own stake ---------------- */
.gm-slip{margin-top:16px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--paper)}
.gm-slip-chips{display:flex;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);
  background:var(--tint,rgba(36,89,240,.05));flex-wrap:wrap}
.gm-slip-chips button{flex:1 1 auto;min-width:92px;padding:10px 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);font-weight:700;font-size:.95rem}
.gm-slip-chips button:hover{border-color:var(--accent,#2459f0)}
.gm-slip-chips button[aria-pressed="true"]{background:var(--accent,#2459f0);border-color:var(--accent,#2459f0);color:#fff}
.gm-slip-out{margin:0;padding:4px 16px 8px}
.gm-slip-out>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.gm-slip-out>div:last-child{border-bottom:0}
.gm-slip-out dt{margin:0;color:var(--ink-2);font-size:.94rem}
.gm-slip-out dd{margin:0;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.gm-slip-sum{border-bottom-width:2px!important}
.gm-slip-sum dt{font-weight:700;color:var(--ink)}
.gm-slip-fine{margin:0;padding:0 16px 14px}
@media (max-width:460px){
  .gm-slip-chips button{min-width:0;flex:1 1 30%}
  .gm-slip-out dt{font-size:.9rem}
}

/* The accent follows the lead card. On the record is first now, so it carries it. */
.ar-rail .gm-note{border-top:3px solid var(--accent,#2459f0)}
.ar-rail .ar-take{border-top:1px solid var(--line);box-shadow:none}

/* ---- Kalshi CTA inside the desk card ----------------------------------- */
.gm-kalshi{display:flex;flex-direction:column;gap:1px;margin-top:14px;padding:12px 14px;border-radius:12px;
  text-decoration:none;background:var(--ink);color:var(--paper);transition:transform .15s ease,filter .15s ease}
.gm-kalshi:hover,.gm-kalshi:focus-visible{filter:brightness(1.15);transform:translateY(-1px)}
.gm-kalshi-t{font-weight:700;font-size:.96rem}
.gm-kalshi-s{font-size:.72rem;letter-spacing:.06em;opacity:.7;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.gm-note-fine{margin:8px 0 0!important;font-size:.72rem;color:var(--ink-3)}

/* ---- At a glance, as a bottom-centre bar -------------------------------- */
.gm-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:75;
  max-width:min(calc(100vw - 32px), 780px);
  transition:opacity .25s ease, transform .25s ease}
.gm-bar.is-away{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(14px)}
.gm-bar-in{background:color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 16px 44px rgba(10,18,38,.18),0 1px 3px rgba(10,18,38,.08);overflow:hidden}
.gm-bar-row{display:flex;align-items:stretch}
.gm-bar-cell{display:flex;flex-direction:column;justify-content:center;gap:1px;
  padding:9px 16px;border-right:1px solid var(--line);min-width:0}
.gm-bar-row .gm-bar-cell:first-child{padding-left:18px}
.gm-bar-k{font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:var(--ink-3);white-space:nowrap}
.gm-bar-v{font-size:.94rem;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.gm-bar-more{display:flex;align-items:center;gap:7px;padding:9px 16px;border:0;background:transparent;
  cursor:pointer;color:var(--ink-2);font-weight:700;font-size:.84rem;white-space:nowrap}
.gm-bar-more:hover,.gm-bar-more:focus-visible{background:var(--tint,rgba(36,89,240,.06));color:var(--ink)}
.gm-bar-caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-135deg);transition:transform .2s ease}
.gm-bar.is-open .gm-bar-caret{transform:rotate(45deg)}
.gm-bar-rest{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);padding:2px 0 0}
.gm-bar-rest[hidden]{display:none}
.gm-bar-rest .gm-bar-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);flex:1 1 auto}
.gm-bar-fine{flex:1 1 100%;margin:0;padding:8px 18px 10px;font-size:.72rem;color:var(--ink-3)}
.gm-bar-show-sm{display:none}
@media (max-width:760px){
  .gm-bar{left:10px;right:10px;bottom:10px;transform:none;max-width:none}
  .gm-bar.is-away{transform:translateY(14px)}
  .gm-bar-hide-sm{display:none}
  .gm-bar-show-sm{display:flex}
  .gm-bar-row .gm-bar-cell{flex:1 1 0;padding:8px 10px;align-items:flex-start}
  .gm-bar-more{padding:8px 12px}
  /* the referral pill stacks above the bar instead of fighting it */
  .gm-ref{bottom:calc(10px + 62px)}
}
@media (min-width:761px){
  /* keep the pill clear of the centred bar on wide screens */
  .gm-ref{bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .gm-bar{transition:none}
}

/* Player names link to their ESPN stats page. Understated inside tables. */
.pl{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2,var(--line));
  text-underline-offset:2px}
.pl:hover,.pl:focus-visible{color:var(--accent,#2459f0);border-bottom-color:currentColor}
.gm-p h3 .pl{border-bottom-width:2px}
.gm-kalshi-alt{display:block;margin-top:8px;text-align:center;font-size:.84rem;font-weight:600;
  color:var(--ink-3);text-decoration:none;padding:7px 10px;border:1px solid var(--line);border-radius:10px}
.gm-kalshi-alt:hover,.gm-kalshi-alt:focus-visible{color:var(--ink);border-color:var(--accent,#2459f0)}

/* Referral tag on the Kalshi button */
.gm-kalshi{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
.gm-kalshi-tag{font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;font-weight:800;
  padding:3px 7px;border-radius:999px;background:rgba(255,255,255,.16);color:inherit;white-space:nowrap}

/* ---- Payout simulator + CTA inside the bottom bar ----------------------- */
.gm-bar.is-open .gm-bar-in{max-height:min(74vh, 720px);overflow-y:auto;overscroll-behavior:contain}
.gm-bar-sim{flex:1 1 100%;border-top:1px solid var(--line);padding:12px 18px 14px}
.gm-bar-simh{margin:0 0 9px;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  font-weight:800;color:var(--ink-3)}
.gm-slip--bar{margin-top:0;border-radius:12px}
.gm-slip--bar .gm-slip-chips{padding:9px 10px;gap:6px}
.gm-slip--bar .gm-slip-chips button{padding:7px 10px;font-size:.86rem;min-width:0}
.gm-slip--bar .gm-slip-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:18px;padding:2px 12px 8px}
.gm-slip--bar .gm-slip-out>div{padding:7px 0}
.gm-slip--bar .gm-slip-out dt{font-size:.84rem}
.gm-slip--bar .gm-slip-out dd{font-size:.94rem}
@media (max-width:760px){
  .gm-slip--bar .gm-slip-out{grid-template-columns:1fr}
  .gm-bar-sim{padding:10px 12px 12px}
}
/* Trade CTA lives in the always-visible row of the bar. */
.gm-bar-cta{display:flex;align-items:center;margin:6px;padding:0 15px;border-radius:11px;
  background:var(--ink);color:var(--paper);font-weight:700;font-size:.9rem;text-decoration:none;
  white-space:nowrap;transition:filter .15s ease}
.gm-bar-cta:hover,.gm-bar-cta:focus-visible{filter:brightness(1.18)}
.gm-bar-row .gm-bar-cell:last-of-type{border-right:1px solid var(--line)}
.gm-bar-cta-short{display:none}
@media (max-width:760px){
  .gm-bar-cta{margin:5px;padding:0 12px;font-size:.86rem}
  .gm-bar-cta-long{display:none}
  .gm-bar-cta-short{display:inline}
  .gm-bar-more-t{display:none}
  .gm-bar-more{padding:8px 10px}
}
/* Narrow phones: short team labels, tip-off moves into the expanded panel. */
.gm-sm,.gm-bar-show-xs{display:none}
@media (max-width:520px){
  .gm-lg{display:none}
  .gm-sm{display:inline}
  .gm-bar-hide-xs{display:none}
  .gm-bar-show-xs{display:flex}
  .gm-bar-row .gm-bar-cell{padding:8px 8px}
  .gm-bar-v{font-size:.9rem}
}

/* Pros and cons, side by side. */
.gm-cases{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
.gm-case{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--paper)}
.gm-case-k{margin:0 0 7px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800}
.gm-case--pro{border-top:3px solid var(--up,#0f7a4f)}
.gm-case--pro .gm-case-k{color:var(--up,#0f7a4f)}
.gm-case--con{border-top:3px solid var(--amber,#8a5a00)}
.gm-case--con .gm-case-k{color:var(--amber,#8a5a00)}
.gm-case p:last-child{margin:0;color:var(--ink-2)}
@media (max-width:760px){.gm-cases{grid-template-columns:1fr}}
.gm-ser{margin:6px 0 0;padding-left:18px;font-weight:500;font-size:.88rem;color:var(--ink-3)}
/* The strip sizes to however many cells it has, so a page without a plan cell has no gap. */
.gm-hero .gm-strip{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media (max-width:860px){.gm-hero .gm-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.gm-hero .gm-strip{grid-template-columns:1fr}}