/* ============ starter-squad page ============ */

.ss-grid{display:grid;grid-template-columns:minmax(340px,420px) 1fr;gap:18px;align-items:start;}
.ss-side{display:flex;flex-direction:column;gap:18px;}

.ss-gwpill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--green-tint);color:var(--green-deep);font-size:12.5px;font-weight:700;white-space:nowrap;}
.ss-gwpill .n{font-weight:800;}

/* frames the page as a pre-season special — pairs with the "Pre-season" tag in the nav drawer */
.ss-titlehead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.ss-special-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  background:var(--green-tint);color:var(--green-deep);font-size:11px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;}

.ss-pitch-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px;}
.ss-shape{font-size:15px;font-weight:800;letter-spacing:.04em;}
.ss-head-meta{font-size:12.5px;color:var(--text-3);}
.ss-head-meta b{color:var(--text-2);}

.ss .pitch{padding:24px 8px 16px;min-height:520px;}
.ss .pitch-row{gap:2px;}
.ss .nameplate{min-width:0;max-width:100%;padding:3px 6px;}
.ss .nameplate .nm{font-size:10.5px;}
.ss .nameplate .vs{font-size:9px;}

/* The captain badge is anchored to the kit wrapper, which is only as wide as the shirt,
   rather than to the much wider .player column — that keeps it on the shoulder at every
   kit size. 78% is where the jersey edge sits at the badge's own height inside the kit
   viewBox (0 0 114 96). */
.ss .kitwrap{position:relative;}
.ss-cap{position:absolute;top:-3px;left:78%;transform:translateX(-50%);z-index:3;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;background:var(--text);color:#fff;font-size:9.5px;font-weight:800;
  border:1.5px solid #fff;}

.ss-bench{margin-top:14px;}
.ss-bench-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:6px;}
.ss-benchrow{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;border:1px solid transparent;
  text-decoration:none;color:inherit;}
.ss-benchrow:hover{border-color:var(--border-strong);background:var(--surface-2);}
.ss-bench-meta{min-width:0;flex:1;}
.ss-bench-meta .nm{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ss-bench-meta .sub2,.ss-opt-meta .sub2{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* shared by the bench and "other options" rows */
.ss-kit{display:grid;place-items:center;flex:none;}
.ss-pos{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--text-3);
  border:1px solid var(--border-2);border-radius:6px;padding:2px 6px;}
.ss-price{flex:none;min-width:52px;text-align:right;font-size:12.5px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums;}
.ss-pts{flex:none;min-width:34px;text-align:right;font-size:12.5px;font-weight:700;color:var(--green-deep);font-variant-numeric:tabular-nums;}

/* minmax(0,…) + min-width:0 so a long captain name clips with an ellipsis instead of
   stretching the grid track (and the card) past the viewport. */
.ss-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.ss-stat{min-width:0;}
.ss-stat .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin-bottom:4px;}
.ss-stat .v{font-size:17px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.ss-h2{font-size:14.5px;font-weight:800;margin:0 0 10px;}
.ss-tips{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:13px;color:var(--text-2);line-height:1.45;}

.ss-options{margin-bottom:8px;}
.ss-opt-head{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);
  margin:10px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.ss-options:first-child .ss-opt-head{margin-top:0;}
.ss-optrow{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;border:1px solid transparent;
  text-decoration:none;color:inherit;}
.ss-optrow:hover{border-color:var(--border-strong);background:var(--surface-2);}
.ss-opt-meta{min-width:0;flex:1;}
.ss-opt-meta .nm{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

@media (max-width: 960px){
  /* minmax(0,1fr) — not 1fr — so a wide pitch row can't stretch the column past the viewport */
  .ss-grid{grid-template-columns:minmax(0,1fr);}
  .ss-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---- phones: the pitch must shrink to fit, never force the page wider ---- */
@media (max-width: 767px){
  .ss .card-pad{padding:14px;}

  .ss-pitch-head{flex-wrap:wrap;row-gap:2px;}
  .ss-head-meta{white-space:nowrap;}

  .ss .pitch{min-height:360px;padding:16px 2px 12px;}
  .ss .pitch-row{gap:2px;}
  /* let 4–5 players share the row width instead of overflowing at a fixed 88px */
  .ss .player{width:auto;flex:1 1 0;min-width:0;gap:5px;}
  .ss .nameplate{min-width:0;max-width:100%;padding:3px 5px;}
  .ss .nameplate .nm{font-size:10px;overflow:hidden;text-overflow:ellipsis;}
  /* keep the price on the pitch but drop the points — the full row is too wide for 5-across.
     display:block overrides the base pitch's mobile rule that hides .vs entirely. */
  .ss .nameplate .vs{display:block;font-size:9px;overflow:hidden;text-overflow:ellipsis;}
  .ss .nameplate .vs-pts{display:none;}
  /* no offset needed — the badge is anchored to the kit, so it shrinks in place */
  .ss-cap{width:15px;height:15px;font-size:9px;}

  .ss-price{min-width:46px;}
}

/* ---- very narrow: give each headline stat its own row ---- */
@media (max-width: 400px){
  .ss-stats{grid-template-columns:minmax(0,1fr);gap:10px;}
}