/* ---------------------------------------------------------------------------
   January (src/postseason_view.js): the cut-scene cards, Home's Playoff
   picture and the Game day strips. Pixel UI kit only: solid colour, hard
   ink frames and hard shadows. No fog, no haze, no glow.
--------------------------------------------------------------------------- */

/* ---- THE CUTS ------------------------------------------------------------ */
.pox-wrap {
  position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; overflow: hidden;
  padding: 26px max(16px, env(safe-area-inset-right)) 26px max(16px, env(safe-area-inset-left));
  background: var(--night); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: pox-in .18s steps(3) both;
}
.pox-wrap * { border-radius: 0 !important; }
.pox-wrap.out { opacity: 0; transition: opacity .16s steps(3); }
@keyframes pox-in { from { opacity: 0; } }
/* the cut: two bars close in like a broadcast, a gold rule on each */
.pox-bar { position: absolute; left: 0; right: 0; height: 18px; background: #000; z-index: 2; pointer-events: none; animation: pox-bar .32s steps(4) both; }
.pox-bar.t { top: 0; box-shadow: 0 3px 0 0 var(--gold); }
.pox-bar.b { bottom: 0; box-shadow: 0 -3px 0 0 var(--gold); --from: 100%; }
@keyframes pox-bar { from { transform: translateY(var(--from, -100%)); } }
.pox-loss .pox-bar.t, .pox-out .pox-bar.t { box-shadow: 0 3px 0 0 var(--rule); }
.pox-loss .pox-bar.b, .pox-out .pox-bar.b { box-shadow: 0 -3px 0 0 var(--rule); }

.pox-in {
  position: relative; z-index: 3; width: min(820px, 100%); max-height: 100%; overflow: auto;
  display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; gap: 8px 22px; text-align: center;
}
.pox-a, .pox-b { display: grid; justify-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.pox-go { display: grid; justify-items: center; gap: 2px; }
/* a phone held sideways: headline left, what it means right */
@media (min-width: 640px) and (max-height: 520px) {
  .pox-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .pox-go { grid-column: 1 / -1; }
}

/* the beats, one after another; .fin is the whole card at once */
.pox-in .s1, .pox-in .s2, .pox-in .s3, .pox-in .s4, .pox-in .s5, .pox-in .s6 { animation: pox-up .28s steps(4) both; }
.pox-in .s1 { animation-delay: .25s; } .pox-in .s2 { animation-delay: .55s; } .pox-in .s3 { animation-delay: .9s; }
.pox-in .s4 { animation-delay: 1.25s; } .pox-in .s5 { animation-delay: 1.6s; } .pox-in .s6 { animation-delay: 1.95s; }
.pox-in .pox-big.s2, .pox-in .pox-stamp { animation-name: pox-slam; animation-timing-function: cubic-bezier(.2,.9,.3,1.15); }   /* smooth, not stepped (the owner read stepped motion as lag) */
.pox-go { animation: pox-up .2s steps(3) 2.1s both; }
.pox-wrap.fin .pox-in *, .pox-wrap.fin .pox-go { animation: none !important; opacity: 1 !important; transform: none; }
.pox-wrap.fin .pox-stamp { transform: rotate(-3deg); }
@keyframes pox-up { from { opacity: 0; transform: translateY(8px); } }
@keyframes pox-slam { from { opacity: 0; transform: scale(2.2); } }

.pox-k { font: 900 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.pox-big {
  font: 400 min(96px, 21vh)/0.9 var(--disp); letter-spacing: .04em; color: #fff;
  text-shadow: 4px 4px 0 var(--tm, #1e63d6), 8px 8px 0 var(--ink);
}
.pox-big.sb { font-size: min(60px, 14vh); color: var(--gold); text-shadow: 3px 3px 0 var(--gold-dk), 6px 6px 0 var(--ink); }
.pox-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.pox-stamp {
  display: inline-block; padding: 7px 18px 5px; margin: 2px 0 10px; transform: rotate(-3deg);
  font: 400 min(32px, 7.5vh)/1 var(--disp); letter-spacing: .08em; text-transform: uppercase; max-width: 100%;
  box-shadow: var(--frame), 6px 6px 0 0 #000;
}
.pox-stamp.gold { background: var(--gold); color: var(--ink); }
.pox-stamp.red { background: var(--red); color: #fff; text-shadow: 2px 2px 0 var(--red-dk); }
.pox-stamp.ink { background: var(--ink-2); color: #fff; box-shadow: var(--frame), 0 0 0 5px var(--rule), 6px 6px 0 5px #000; }
.pox-line { margin: 0; max-width: 460px; font: 800 14px/1.35 var(--sans); color: #e7ecf3; }
.pox-sub { font: 400 24px/1 var(--disp); letter-spacing: .05em; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 var(--ink); }

/* a club on its colour: crest, name, a small line, the score */
.pox-vs { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pox-vs.col { flex-direction: column; align-items: stretch; gap: 6px; min-width: min(300px, 100%); }
.pox-pl {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 12px 3px 3px; margin: 3px;
  background: var(--tm); color: var(--on-tm, #fff); box-shadow: var(--frame), 4px 4px 0 3px #000; text-align: left;
}
.pox-pl.won { box-shadow: var(--frame), 0 0 0 6px var(--gold), 5px 5px 0 6px #000; }
.pox-pl.q { --tm: var(--ink-2); }
.pox-cr { width: 44px; height: 44px; margin: 3px; }
.pox-cr b { font: 400 30px/1 var(--disp); color: var(--ink); }
.pox-pn { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.pox-pn b { font: 400 24px/1 var(--disp); letter-spacing: .05em; text-transform: uppercase; text-shadow: 2px 2px 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pox-pn i { font: 900 10px/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pox-ps { margin-left: auto; padding-left: 10px; font: 400 40px/1 var(--disp); text-shadow: 3px 3px 0 var(--ink); }
.pox-v { font: 400 26px/1 var(--disp); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.pox-vs.col .pox-v { text-align: center; }
.pox-loss .pox-pl, .pox-out .pox-pl { box-shadow: var(--frame), 4px 4px 0 3px #000; }

/* the bracket reveal */
.pox-rev { display: grid; justify-items: center; gap: 4px; padding: 8px 10px 9px; margin: 3px; background: var(--win); box-shadow: var(--frame); max-width: 100%; }
.pox-rh { font: 900 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.pox-rs { font: 800 12.5px/1.3 var(--sans); color: #fff; }

/* a message card: a face, who it is from, what he says */
.pox-msg {
  position: relative; display: flex; align-items: center; gap: 9px; max-width: 480px; margin: 3px; padding: 6px 12px 6px 6px;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame), 4px 4px 0 3px #000; text-align: left;
}
.pox-msg.sm { padding: 4px 10px 4px 4px; }
.pox-mb { display: grid; gap: 3px; min-width: 0; }
.pox-mh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pox-mh b { font: 400 18px/1 var(--disp); letter-spacing: .04em; text-transform: uppercase; }
.pox-mh i { font: 900 9.5px/1 var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: inherit; }
.pox-mh .rm-bd { margin: 0 0 0 2px; padding: 3px 6px 2px; font-size: 9.5px; }
.pox-mt { font: 700 12.5px/1.3 var(--sans); }
.pox-ic { width: 36px; height: 36px; margin: 2px; }
.pox-ic img { width: 28px; height: 28px; }

/* the champions */
.pox-champ { background: var(--ink); }
.pox-top { display: flex; align-items: center; justify-content: center; gap: 14px; }
.pox-cup { display: block; filter: drop-shadow(4px 4px 0 #000); }
.pox-word {
  font: 400 min(56px, 13vh, 6vw)/0.9 var(--disp); letter-spacing: .04em; text-transform: uppercase; color: var(--gold);
  text-shadow: 4px 4px 0 var(--gold-dk), 8px 8px 0 #000;
}
.pox-mvp { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; margin: 3px; background: var(--gold); color: var(--ink); box-shadow: var(--frame), 4px 4px 0 3px #000; text-align: left; }
.pox-mvp span { display: grid; gap: 3px; }
.pox-mvp i { font: 900 10px/1 var(--sans); font-style: normal; letter-spacing: .14em; text-transform: uppercase; }
.pox-mvp b { font: 400 26px/1 var(--disp); letter-spacing: .04em; text-transform: uppercase; }
.pox-mvp em { font: 800 12px/1.2 var(--sans); font-style: normal; }
.pox-conf { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.pox-conf i { position: absolute; top: -14px; display: block; box-shadow: 0 0 0 1px var(--ink); animation: pox-fall var(--t) steps(16) var(--d) infinite; }
@keyframes pox-fall {
  0% { transform: translate(0, 0) scaleX(1); }
  50% { transform: translate(calc(var(--x) / 2), 56vh) scaleX(.35); }
  100% { transform: translate(var(--x), 112vh) scaleX(1); }
}

/* the somber ones: no colour but the clubs' own */
.pox-loss, .pox-out { background: #05080f; }
.pox-loss .pox-k, .pox-out .pox-k { color: #8593a7; }
.pox-loss .pox-pl:not(.won) { --tm: #2a3346 !important; }

.pox-tap { font: 900 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8593a7; }
.pox-wrap.fin .pox-tap { visibility: hidden; }

@media (max-height: 460px) {
  .pox-wrap { padding-top: 22px; padding-bottom: 22px; }
  .pox-bar { height: 14px; }
  .pox-in { gap: 5px 18px; }
  .pox-a, .pox-b { gap: 5px; }
  .pox-cr { width: 36px; height: 36px; }
  .pox-cr img { width: 28px; height: 28px; }
  .pox-pn b { font-size: 20px; }
  .pox-ps { font-size: 32px; }
  .pox-msg .rm-fc.s44 { width: 36px; height: 36px; }
  .pox-mvp b { font-size: 22px; }
  .pox-cup { width: 56px; height: 72px; }
  .pox-sbi .pox-cup { width: 42px; height: 54px; }
  .pox-go .rm-btn.big { font-size: 24px; padding: 9px 18px 8px; }
  .pox-line { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .pox-wrap *, .pox-wrap { animation: none !important; }
  .pox-conf { display: none; }
}

/* ---- HOME: THE PLAYOFF PICTURE ------------------------------------------- */
.home-po .rm-wb { display: grid; gap: 8px; align-content: start; }
/* over the messages: it takes what it holds, up to a little over half the
   column, and scrolls inside itself past that */
.hg-v2 > .hg-r > .home-po { flex: 0 1 auto; max-height: 58%; }
.hg-v2 > .hg-r > .home-po > .rm-wb { min-height: 0; overflow-y: auto; overflow-x: hidden; }
.hpo-me { display: flex; align-items: center; gap: 8px; }
.hpo-me span { display: grid; gap: 3px; min-width: 0; }
.hpo-me b { font: 400 24px/1 var(--disp); letter-spacing: .05em; text-transform: uppercase; }
.hpo-me i { font: 800 12px/1.2 var(--sans); font-style: normal; color: var(--soft); }
.home-po .pox-msg { max-width: none; box-shadow: var(--frame); }
.hpo-cfs { display: grid; gap: 4px; }
.hpo-cf { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.hpo-cl { width: 34px; font: 900 11px/1 var(--sans); letter-spacing: .1em; color: var(--gold); }
.hpo-sd { position: relative; display: block; }
.hpo-sd i { position: absolute; left: -1px; top: -1px; z-index: 1; min-width: 13px; padding: 2px 2px 1px; background: var(--ink); color: #fff; font: 900 9px/1 var(--sans); font-style: normal; text-align: center; }
.hpo-cr { width: 34px; height: 34px; margin: 3px; }
.hpo-cr img { width: 26px; height: 26px; }
.hpo-sd.me .hpo-cr { background: var(--gold); box-shadow: var(--frame), 0 0 0 5px var(--gold); }
/* out of it: crossed through in red, never faded */
.hpo-sd.out .hpo-cr { background: #3a4357; }
.hpo-sd.out .hpo-cr::after { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; margin-top: -2px; background: var(--red); transform: rotate(-35deg); box-shadow: 0 0 0 1px var(--ink); }
.hpo-sd.out .hpo-cr img { opacity: .55; }
.hpo-h { font: 900 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 2px; }
.hpo-gms { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.hpo-gm { display: grid; gap: 4px; margin: 3px; padding: 5px 7px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); min-width: 0; }
.hpo-gs { display: flex; align-items: center; gap: 4px; }
.hpo-gs b { font: 400 24px/1 var(--disp); }
.hpo-gs b.l { color: inherit; }
.hpo-gs span { flex: 1 1 auto; text-align: center; font: 900 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: inherit; }
.hpo-gs span .rm-bd { margin: 0; }
.hpo-gs .hpo-cr { width: 30px; height: 30px; }
.hpo-gs .hpo-cr img { width: 24px; height: 24px; }
.hpo-gs .hpo-cr.l img { opacity: .7; }
.hpo-st { display: flex; align-items: center; gap: 6px; min-width: 0; font: 700 11.5px/1.25 var(--sans); }
.hpo-st span { min-width: 0; }
.hpo-st b { font-weight: 900; }
.hpo-go { display: flex; flex-wrap: wrap; gap: 2px; }

/* ---- GAME DAY ------------------------------------------------------------- */
.pgs-pre { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 4px 3px 6px; padding: 6px 8px; background: var(--ink); box-shadow: var(--frame-2); }
.gd-matchwin .pgs-pre { order: -2; }
.pgs-t { font: 800 12.5px/1.3 var(--sans); color: #fff; }
.pgs-fin { display: grid; gap: 4px; margin: 6px 0; }
.pgs-fin > .rm-bd { justify-self: start; }
.pgs-l { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; }
.pgs-r { display: flex; align-items: center; gap: 7px; margin: 3px; padding: 4px 8px 4px 4px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); text-decoration: none; min-width: 0; }
.pgs-r > span { display: grid; gap: 2px; min-width: 0; font: 700 11.5px/1.2 var(--sans); }
.pgs-n { display: flex; align-items: center; gap: 4px; min-width: 0; }
.pgs-r b { font: 400 18px/1 var(--disp); letter-spacing: .04em; text-transform: uppercase; }
.pgs-r .rm-bd { margin: 0 0 0 4px; padding: 2px 5px 1px; font-size: 9px; }
.pgs-r em { font-style: normal; font-weight: 800; }
.pgs-r small { font: 800 10.5px/1.2 var(--sans); color: inherit; }