/* Season replay — steps a simulated season GW by GW. Reuses portal.css tokens
   (purple + neon green/cyan, position colours); adds the pitch + stepper. */

.replay-hero { align-items: stretch; }
.replay-hero .hero-main { display: flex; flex-direction: column; gap: 12px; }

/* ------------------------------------------------ flavour banners -- */
/* base .banner (amber) lives in portal.css; these tint per flavour. */
.banner b { font-weight: 800; }
.banner.sim { border-color: rgba(255,209,102,0.35); background: rgba(255,209,102,0.08); color: var(--amber); }
.banner.open { border-color: rgba(4,245,255,0.35); background: rgba(4,245,255,0.08); color: var(--cyan); }

/* prediction-mode shirt: projected points, neutral (nothing played yet) */
.shirt.proj { background: rgba(4,245,255,0.10); color: var(--cyan); }

/* ------------------------------------------------------------- stepper -- */
.stepper { display: flex; align-items: center; gap: 12px; }
.step-btn {
  font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--ink); background: rgba(0,0,0,0.28); border: 1px solid var(--line);
  border-radius: 10px; width: 40px; height: 40px; flex: none; transition: all .12s;
}
.step-btn:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.step-btn:disabled { opacity: 0.3; cursor: default; }
.slider {
  flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px;
  background: rgba(0,0,0,0.3); outline: none; cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--cyan)); border: none;
  box-shadow: 0 0 8px rgba(0,255,135,0.5);
}
.slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--green), var(--cyan));
}

/* this-week scoreboard: predicted vs actual + the running/context numbers */
.scoreline-row { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; }
.score-item { display: flex; flex-direction: column; gap: 1px; }
.score-item .k { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); }
.score-item .v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.score-item .v.pred {
  background: linear-gradient(135deg, var(--green), var(--cyan));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.score-item .v.small { font-size: 18px; font-weight: 700; color: var(--ink-dim); }

/* --------------------------------------------------------------- layout -- */
.replay-grid {
  margin-top: 20px; display: grid; grid-template-columns: 1fr 300px; gap: 18px;
  align-items: start;
}
@media (max-width: 820px) { .replay-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- pitch -- */
.pitch-wrap {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--panel);
}
.pitch-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.formation-lab {
  font-family: ui-monospace, Menlo, monospace; font-weight: 800; font-size: 15px;
  color: var(--ink);
}
.pitch {
  background:
    linear-gradient(0deg, rgba(0,0,0,0.18), rgba(0,0,0,0.18)),
    repeating-linear-gradient(0deg, #0c5c3f 0 56px, #0a5238 56px 112px);
  padding: 20px 10px; display: flex; flex-direction: column; gap: 8px;
  border-bottom: 1px solid var(--line);
}
.pitch-row { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }

/* a player shirt = circle with the realized points, plus name/team/pred below */
.player { width: 78px; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.shirt {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.35); border: 2px solid var(--ink-faint); color: var(--ink);
}
.shirt.GKP { border-color: #ffd166; } .shirt.DEF { border-color: #04f5ff; }
.shirt.MID { border-color: #00ff87; } .shirt.FWD { border-color: #ff6ba9; }
.player.subout .shirt { opacity: 0.4; }
.player.subout .pname { text-decoration: line-through; opacity: 0.55; }

.pname {
  font-size: 11.5px; font-weight: 600; max-width: 78px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #eafff6;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.pmeta { font-size: 10px; color: #bfe9d6; font-family: ui-monospace, Menlo, monospace; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
/* The shirt xP: match the pmeta line's size — the global `.pred` (portal.css)
   is a 19px gradient number for the player table; here it must stay inline and
   small so `TEAM · 4.1` sits on one line. */
.pmeta .pred {
  color: var(--cyan); font-size: inherit; font-weight: 700; text-align: inherit;
  background: none; -webkit-text-fill-color: currentColor;
}

/* armband + auto-sub markers */
.badge {
  position: absolute; top: -4px; right: 8px; width: 17px; height: 17px; border-radius: 50%;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,0.4);
}
.badge.c { background: var(--amber); color: #3a2600; }
.badge.v { background: var(--ink-dim); color: var(--purple-900); }
.marker {
  position: absolute; top: -4px; left: 8px; font-size: 11px; line-height: 1;
  width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
}
.marker.up { color: var(--green); } .marker.down { color: #ff9c9c; }

/* bench strip */
.bench {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 14px 10px; background: rgba(0,0,0,0.2);
}
.bench .player .shirt { width: 34px; height: 34px; font-size: 14px; opacity: 0.92; }
.bench-lab {
  writing-mode: vertical-rl; transform: rotate(180deg); align-self: center;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-faint);
}

/* ----------------------------------------------------------- decisions -- */
.decisions { display: flex; flex-direction: column; gap: 12px; }
.dec-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 14px 16px; }
.dec-title { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.dec-title .thru { text-transform: none; letter-spacing: 0; color: var(--ink-faint); }
.dec-body { font-size: 14px; color: var(--ink); line-height: 1.5; }

.xfer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xfer .out { color: #ff9c9c; } .xfer .in { color: var(--green); font-weight: 700; }
.xfer .arr { color: var(--ink-faint); }
.xfer-meta { margin-top: 6px; font-size: 12px; color: var(--ink-dim); font-family: ui-monospace, Menlo, monospace; }
.roll { color: var(--ink-dim); font-style: italic; }
.hit-pill { color: #ff9c9c; font-weight: 700; }

.kv { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.kv .lab { color: var(--ink-dim); }
.kv .val { font-weight: 700; }
.kv .val.hit { color: var(--green); } .kv .val.miss { color: #ff9c9c; }
.kv .val.pred { color: var(--cyan); }

/* ------------------------------------------------- mobile compaction -- */
/* Shrink the hero (badge + stepper + scoreline) so it and the top of the
   pitch land in the same viewport on a phone. Matches portal.css's 560px
   breakpoint, where the hero also switches to a stacked column. */
@media (max-width: 560px) {
  /* Grid layout: the badge sits inline with the stepper on row 1, and the
     scoreline + chips span the full width below. `display: contents` on
     hero-main promotes the stepper/scoreline/chips to grid items of the hero so
     they can be placed alongside the badge (which is hero-main's sibling). */
  .replay-hero {
    margin-top: 14px; padding: 14px 16px;
    display: grid; grid-template-columns: auto 1fr;
    align-items: center; column-gap: 10px; row-gap: 10px;
  }
  .replay-hero .hero-main { display: contents; }
  /* Badge: a small inline pill instead of the 108px square. */
  .replay-hero .gw-badge {
    flex-direction: row; align-items: baseline; gap: 8px;
    min-width: 0; height: auto; padding: 4px 12px;
    grid-column: 1; grid-row: 1;
  }
  .replay-hero .gw-badge .num { font-size: 28px; }
  .replay-hero .stepper { grid-column: 2; grid-row: 1; gap: 8px; }
  .replay-hero .scoreline-row { grid-column: 1 / -1; grid-row: 2; gap: 16px; }
  .replay-hero .chips { grid-column: 1 / -1; grid-row: 3; margin-top: 0; gap: 6px; }
  /* Trim chip text a touch so the (still-longish) model chip fits one line. */
  .replay-hero .chip { font-size: 11px; padding: 4px 9px; }
  .replay-hero .chip code { font-size: 0.85em; }
  .step-btn { width: 34px; height: 34px; font-size: 19px; }
  .score-item .v { font-size: 20px; }
  .score-item .v.small { font-size: 15px; }
  .replay-grid { margin-top: 12px; gap: 12px; }

  /* Tighten the pitch: smaller shirts, rows, and label text pack more of the
     XI into the first screen. */
  .pitch { padding: 10px 6px; gap: 5px; }
  .pitch-head { padding: 9px 12px; }
  .pitch-row { gap: 5px; }
  .player { width: 70px; gap: 2px; }
  .shirt { width: 36px; height: 36px; font-size: 15px; }
  .pname { font-size: 11px; max-width: 70px; }
  .pmeta { font-size: 9.5px; }
  .bench { padding: 10px 6px; }
  .bench .player .shirt { width: 32px; height: 32px; font-size: 13px; }
}