/* Program Guide × Midnight Broadcast — signature game cards.
   Structure: Program Guide (channel bug, ON NOW bug, matchup as show title,
   DVR progress bar, up-next rails). Atmosphere: Midnight Broadcast
   (team-color ambient glow, huge tabular broadcast scores).
   Laptop-first; 390px clean. No carousel chrome. No page sideways scroll. */

.pgcard{
  position:relative;overflow:hidden;cursor:pointer;
  background:#0e0f12;border:1px solid var(--line);border-radius:12px;
  min-width:0;isolation:isolate;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.pgcard:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.55);border-color:#3a3b41}
.pgcard:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
/* Midnight Broadcast glow — team colors bleed behind the program tile */
.pgcard::before,.pgcard::after{
  content:"";position:absolute;top:-48px;width:230px;height:230px;border-radius:50%;
  filter:blur(72px);opacity:.30;z-index:0;pointer-events:none;
}
.pgcard::before{left:-56px;background:var(--ha,#6d6e73)}
.pgcard::after{right:-56px;background:var(--hh,#6d6e73)}

.pg-screen{position:relative;z-index:1;padding:18px;background:linear-gradient(180deg,rgba(23,24,29,.60),rgba(14,15,18,.66))}
/* signature: BOTH team logos as large faded background watermarks —
   the card surface goes semi-transparent so they show through like a
   broadcast matchup graphic. Every state (pre/live/final). */
.pg-wm{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pg-wm img{position:absolute;top:50%;width:170px;height:170px;object-fit:contain;opacity:.13;
  transform:translateY(-50%);
  -webkit-mask-image:radial-gradient(circle,#000 55%,transparent 78%);
  mask-image:radial-gradient(circle,#000 55%,transparent 78%)}
.pg-wm .wm-l{left:-36px}
.pg-wm .wm-r{right:-36px}
.pg-screen>*:not(.pg-wm):not(.pg-bugs){position:relative;z-index:1}
.pg-bugs{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;z-index:2}
.pg-onnow{background:var(--red);color:#fff;font-size:10px;font-weight:800;letter-spacing:.18em;padding:5px 10px;border-radius:4px;display:inline-flex;align-items:center;gap:6px}
.pg-onnow .rdot{width:7px;height:7px;border-radius:50%;background:#fff;animation:pgblink 1.4s infinite}
@keyframes pgblink{50%{opacity:.45}}
.pg-air{font-size:10px;letter-spacing:.2em;font-weight:800;color:var(--faint)}
.pg-air.done{color:var(--gold)}
.pg-chan{background:rgba(0,0,0,.55);border:1px solid #3a3b41;color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.12em;padding:5px 10px;border-radius:4px;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pg-title{margin-top:32px;font-size:19px;font-weight:800;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.pg-title small{display:block;font-size:11px;color:var(--faint);font-weight:600;letter-spacing:.2em;margin-top:6px}

.pg-match{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:14px}
.pg-team{text-align:center;min-width:0}
.pg-team img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.7))}
.pg-team .ab{font-size:11px;letter-spacing:.18em;color:var(--dim);font-weight:800;margin-top:6px;white-space:nowrap}
.pg-team .ab .rec{display:block;letter-spacing:.04em;color:var(--faint);font-weight:600;font-size:10px;margin-top:2px}
.pg-team .poss{width:8px;height:8px;border-radius:50%;background:var(--gold);display:inline-block;margin-right:6px;vertical-align:1px}
.pg-team.loser{opacity:.45}
/* huge tabular broadcast scores — the Midnight Broadcast half of the blend */
.pg-score{font-size:46px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;white-space:nowrap;text-shadow:0 2px 14px rgba(0,0,0,.65)}
.pg-kick{font-size:26px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-kick span{font-size:13px;color:var(--dim);font-weight:600}

.pg-clock{text-align:center;font-size:12px;color:var(--red);font-weight:700;letter-spacing:.1em;margin-top:10px}
.pg-prog{height:4px;background:#26272c;border-radius:99px;margin-top:12px;overflow:hidden}
.pg-prog i{display:block;height:100%;background:var(--red);border-radius:99px;transition:width .6s ease}

.pg-body{position:relative;z-index:1;padding:14px 18px 16px}
.pg-line{font-size:12.5px;color:var(--dim);line-height:1.7}
.pg-line b{color:var(--ink)}
.pg-upnext{margin-top:10px;padding-top:10px;border-top:1px dashed #2c2d33;font-size:11.5px;color:var(--faint);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pg-upnext>b{color:var(--dim);letter-spacing:.1em;font-size:10px}
.pg-follows{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.pg-follows .follow{margin-left:0}
/* markets inside program cards reuse .marketline/.mbadge from hub.css */
.pg-body .marketline{margin-top:10px;padding-top:10px}
.pgcard.post .pg-body .marketline{opacity:.55}
.pg-closed{font-size:10.5px;color:var(--faint);letter-spacing:.06em}

/* phone */
/* hero opens the game sheet too */
.hero-inner[data-hero]{cursor:pointer}
.hero-inner[data-hero]:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (max-width:640px){
  .pg-screen{padding:16px 14px}
  .pg-title{font-size:17px}
  .pg-team img{width:48px;height:48px}
  .pg-score{font-size:38px}
  .pg-kick{font-size:22px}
  .pgcard::before,.pgcard::after{width:170px;height:170px;filter:blur(56px)}
  .pg-wm img{width:120px;height:120px;opacity:.11}
  .pg-wm .wm-l{left:-26px}
  .pg-wm .wm-r{right:-26px}
  .pg-body{padding:12px 14px 14px}
}
@media (prefers-reduced-motion:reduce){
  .pgcard{transition:none}
  .pgcard:hover{transform:none}
  .pg-onnow .rdot{animation:none}
  .pg-prog i{transition:none}
}