/* style.css — one theme, three playing surfaces (pitch / court / rink). */
* { box-sizing: border-box; }
:root {
  --bg: #0b1f12;
  --panel: #0f2a1a;
  --ink: #eaf2ec;
  --muted: #9fbcac;
  --line: #23423020;
  --accent: #3ea06a;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(1200px 600px at 50% -10%, #12331f, var(--bg));
  min-height: 100vh;
  min-height: 100dvh; /* dvh tracks the visible viewport on iOS Safari (no toolbar overshoot); vh is the fallback */
}

/* ---- header / controls ---- */
.topbar { max-width: 900px; margin: 0 auto; padding: 18px 16px 6px; }
h1 { margin: 0 0 4px; font-size: 22px; letter-spacing: 0.2px; }
.tagline { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.tagline strong { color: var(--ink); }

.view-toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.view-toggle { flex: 0 0 auto; } /* never let the Court/List switch truncate */
.view-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.season-picker { display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.season-picker select { text-transform: none; letter-spacing: 0; background: #0c2416; color: var(--ink); border: 1px solid #29513a; border-radius: 8px; padding: 5px 8px; font-size: 13px; }
/* Find-a-player box: styled like the other controls, ~150px, subtle. */
.player-search { width: 150px; max-width: 40vw; background: #0c2416; color: var(--ink); border: 1px solid #29513a; border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.player-search::placeholder { color: var(--muted); }
.player-search:focus { outline: none; border-color: var(--accent); }
.view-toggle { display: flex; flex: 1; background: #0c2416; border: 1px solid #1c3b28; border-radius: 10px; overflow: hidden; }
.view-toggle button { flex: 1; padding: 10px 8px; background: transparent; color: var(--muted); border: 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.view-toggle button.active { background: var(--accent); color: #06140b; }

.controls { display: grid; gap: 8px; }
.control-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid #1c3b28; border-radius: 10px; padding: 8px 10px; }
.row-tag { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; color: #06140b; }
.rowA .row-tag { background: #7fd4a1; }
.rowB .row-tag { background: #8fb7e8; }
.control-row label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.control-row select { background: #0c2416; color: var(--ink); border: 1px solid #29513a; border-radius: 8px; padding: 8px 10px; font-size: 14px; min-width: 190px; }
.control-row .conf-picker select { min-width: 120px; }
.control-row .formation-inline select { min-width: 96px; }
.control-row.actions { justify-content: flex-end; gap: 8px; }
.control-row.actions button { background: #17442a; color: var(--ink); border: 1px solid #2c5c3d; border-radius: 8px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.control-row.actions button:hover { background: #1e5836; }

.legend { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; font-size: 12px; color: var(--muted); }

/* ---- injury badges ---- */
.badge { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 999px; color: #fff; white-space: nowrap; }
.badge.out { background: #d1382f; }
.badge.questionable { background: #d99a00; color: #241a00; }
.badge.other { background: #6b7f74; }

.status { max-width: 900px; margin: 6px auto; padding: 0 16px; color: var(--muted); font-size: 13px; min-height: 18px; }
.status .retry { margin-left: 8px; background: #17442a; color: var(--ink); border: 1px solid #2c5c3d; border-radius: 8px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.updated { margin-left: 10px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.surface.loading { opacity: 0.5; transition: opacity 0.15s ease; }

/* ---- the surface (two teams: A top, B bottom) ---- */
.surface-scroll { max-width: 640px; margin: 4px auto 0; padding: 0 12px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* sideways swipe stays in the surface — no page back-nav / bounce on mobile */
.surface {
  position: relative;
  width: 100%;
  min-width: 520px;
  container-type: inline-size; /* chips size themselves off the surface width */
  aspect-ratio: 0.82;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid #0a1a10;
  box-shadow: 0 10px 40px #0006;
}
.surface[data-surface="pitch"] { aspect-ratio: 0.64; }
.surface[data-surface="court"] { aspect-ratio: 0.9; }
.surface[data-surface="rink"] { aspect-ratio: 0.72; }
.half { position: absolute; left: 0; right: 0; height: 50%; }
.half.top { top: 0; }
.half.bottom { bottom: 0; }
.half .tint { position: absolute; inset: 0; }
.half .players { position: absolute; left: 0; right: 0; }
.half.top .players { top: 28px; bottom: 0; }      /* leave room for the name band */
.half.bottom .players { top: 0; bottom: 28px; }
.tint { pointer-events: none; z-index: 2; }
.players { z-index: 3; }
.team-band {
  position: absolute; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 9px; font-size: 11px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px #0009; /* backdrop-filter removed: a GPU blur layer that janked the sideways scroll on low-end phones; the 0.92-opaque band + text-shadow carry legibility */
}
.half.top .team-band { top: 0; }
.half.bottom .team-band { bottom: 0; }
.team-band img { height: 20px; width: 20px; object-fit: contain; }
.team-band .band-next { margin-left: auto; font-size: 10px; font-weight: 600; opacity: 0.82; white-space: nowrap; }
/* Next-game stays visible on phones too — the band wraps rather than truncating. */
.midline { position: absolute; top: 50%; left: 0; right: 0; height: 0; z-index: 5; transform: translateY(-50%); text-align: center; }
.midline span { font-size: 9px; letter-spacing: 2px; color: #ffffffb0; background: #00000030; padding: 1px 8px; border-radius: 6px; }

/* Surface backgrounds ------------------------------------------------- */
/* soccer pitch */
.surface[data-surface="pitch"] { background:
  repeating-linear-gradient(0deg, #1f7a43 0 8.33%, #1c7040 8.33% 16.66%); }
.surface[data-surface="pitch"]::before { /* markings */
  content: ""; position: absolute; inset: 8px; z-index: 1; pointer-events: none;
  border: 2px solid #ffffff55; border-radius: 4px;
  background:
    radial-gradient(circle at 50% 50%, transparent 46px, #ffffff55 46px 48px, transparent 49px),
    linear-gradient(#ffffff55, #ffffff55) 50% 50% / 100% 2px no-repeat;
}
.surface[data-surface="pitch"]::after { /* penalty boxes + goals top & bottom */
  content: ""; position: absolute; inset: 8px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(#ffffff55,#ffffff55) 50% 0 / 46% 12% no-repeat,
    linear-gradient(#ffffff55,#ffffff55) 50% 100% / 46% 12% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  border: 0;
  box-shadow: inset 0 0 0 0 transparent;
  background-blend-mode: normal;
}
/* draw the boxes as hollow rectangles via outline trick */
.surface[data-surface="pitch"] .box-top, .surface[data-surface="pitch"] .box-bot { display:none; }

/* basketball court */
.surface[data-surface="court"] { background: linear-gradient(180deg, #b9793e, #a86a34); }
.surface[data-surface="court"]::before {
  content: ""; position: absolute; inset: 8px; z-index: 1; pointer-events: none;
  border: 2px solid #ffffff88;
  background:
    radial-gradient(circle at 50% 50%, transparent 40px, #ffffff88 40px 42px, transparent 43px),
    linear-gradient(#ffffff88,#ffffff88) 50% 50% / 100% 2px no-repeat,
    /* keys (paint) top & bottom */
    linear-gradient(#ffffff33,#ffffff33) 50% 0 / 34% 22% no-repeat,
    linear-gradient(#ffffff33,#ffffff33) 50% 100% / 34% 22% no-repeat;
}
.surface[data-surface="court"]::after { /* hoops */
  content: ""; position: absolute; inset: 8px; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 3%, #ff8a3d 0 4px, transparent 5px),
    radial-gradient(circle at 50% 97%, #ff8a3d 0 4px, transparent 5px);
}

/* baseball diamond */
.surface[data-surface="diamond"] { aspect-ratio: 0.92; background: linear-gradient(180deg, #2f7a43, #256a3a); }
.surface[data-surface="diamond"]::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; z-index: 1; pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid #ffffff66; background: #b9793e40; border-radius: 6px;
}
.surface[data-surface="diamond"]::after {
  content: ""; position: absolute; inset: 8px; z-index: 1; pointer-events: none;
  background: linear-gradient(#ffffff55, #ffffff55) 50% 50% / 100% 2px no-repeat;
}
/* single-team baseball diamond: infield lower (home plate near the bottom), a
   pitcher's mound at the center, outfield grass filling the top. */
.surface.single[data-surface="diamond"] { aspect-ratio: 0.86; }
.surface.single[data-surface="diamond"]::before {
  content: ""; position: absolute; left: 50%; top: 56%; width: 42%; height: 42%; z-index: 1; pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid #ffffff70; background: #b9793e55; border-radius: 6px;
}
.surface.single[data-surface="diamond"]::after {
  content: ""; position: absolute; left: 50%; top: 55%; width: 16px; height: 16px; z-index: 1; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%; background: #c89b6a; border: 1px solid #ffffff66;
}

/* single-team mode: one lineup fills the whole surface (hide the mirrored half). */
.surface.single .half.bottom, .surface.single .midline { display: none; }
.surface.single .half.top { height: 100%; }

/* football field */
.surface[data-surface="field"] { aspect-ratio: 0.82; background: repeating-linear-gradient(0deg, #1f7a43 0 9.09%, #1c7040 9.09% 18.18%); }
.surface[data-surface="field"]::before {
  content: ""; position: absolute; inset: 8px; z-index: 1; pointer-events: none;
  border: 2px solid #ffffff55;
  background:
    linear-gradient(#ffffffcc, #ffffffcc) 50% 50% / 100% 3px no-repeat,   /* line of scrimmage */
    linear-gradient(#ffffff33, #ffffff33) 0 20% / 100% 1px no-repeat,
    linear-gradient(#ffffff33, #ffffff33) 0 30% / 100% 1px no-repeat,
    linear-gradient(#ffffff33, #ffffff33) 0 40% / 100% 1px no-repeat,
    linear-gradient(#ffffff33, #ffffff33) 0 60% / 100% 1px no-repeat,
    linear-gradient(#ffffff33, #ffffff33) 0 70% / 100% 1px no-repeat,
    linear-gradient(#ffffff33, #ffffff33) 0 80% / 100% 1px no-repeat;
}

/* hockey rink */
.surface[data-surface="rink"] { background: linear-gradient(180deg, #e9f3fb, #dceaf6); }
.surface[data-surface="rink"]::before {
  content: ""; position: absolute; inset: 6px; z-index: 1; pointer-events: none;
  border: 2px solid #9db6cc; border-radius: 40px;
  background:
    /* center red line */
    linear-gradient(#d0313a,#d0313a) 50% 50% / 100% 3px no-repeat,
    /* two blue lines */
    linear-gradient(#2b6fd6,#2b6fd6) 50% 33% / 100% 3px no-repeat,
    linear-gradient(#2b6fd6,#2b6fd6) 50% 67% / 100% 3px no-repeat,
    /* center faceoff circle */
    radial-gradient(circle at 50% 50%, transparent 34px, #2b6fd688 34px 36px, transparent 37px);
}
.surface[data-surface="rink"]::after { /* goal creases top & bottom */
  content: ""; position: absolute; inset: 6px; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 2%, #b9d4ec 0 16px, transparent 17px),
    radial-gradient(circle at 50% 98%, #b9d4ec 0 16px, transparent 17px);
}
.surface[data-surface="rink"] .team-band { color: #0b2540; text-shadow: none; }

/* ---- player chips ---- */
.chip {
  position: absolute; transform: translate(-50%, -50%);
  /* Scale with the surface so chips don't overlap/clip on narrow + tablet widths. */
  width: clamp(60px, 14cqw, 88px); min-height: 38px; padding: 4px 5px 5px;
  background: #0c2416f2; color: var(--ink);
  border: 1px solid #2c5c3d; border-top: 3px solid var(--accent);
  border-radius: 9px; text-align: center; cursor: pointer;
  box-shadow: 0 3px 10px #0007; touch-action: none; user-select: none;
  transition: transform 0.05s ease, box-shadow 0.1s ease;
}
.chip:hover, .chip:focus { outline: none; box-shadow: 0 0 0 2px var(--accent), 0 6px 16px #0008; z-index: 20; }
.chip.dragging { opacity: 0.92; box-shadow: 0 10px 22px #000a; z-index: 30; transition: none; will-change: transform; } /* transform-drag: don't animate the live translate; will-change promotes only the in-flight chip to its own compositor layer */
/* Search-dim: chips whose starter doesn't match the query fade back and stop taking taps. */
.chip.chip-dim { opacity: 0.25; filter: grayscale(1); pointer-events: none; }
.chip .pos { font-size: 9.5px; letter-spacing: 0.3px; color: var(--muted); font-weight: 700; }
.chip .name { font-size: clamp(10px, 2.1cqw, 12px); font-weight: 700; line-height: 1.15; margin-top: 1px; }
.chip .depth-count { font-size: 9px; color: #7fd4a1; margin-top: 2px; }
.chip .badge { position: absolute; top: -8px; right: -6px; }
/* Video-game overall rating (Madden/EA FC/The Show), like a card OVR. */
.chip .chip-ovr { position: absolute; top: -8px; left: -7px; min-width: 20px; height: 20px; padding: 0 3px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #241a00; background: linear-gradient(180deg, #ffd85a, #e8b500); border: 1px solid #b98f00; border-radius: 6px; box-shadow: 0 1px 3px #0006; }
.empty-lineup { display: flex; flex-direction: column; gap: 6px; max-width: 340px; margin: 40px auto; padding: 18px 20px; text-align: center; background: #0c2416cc; border: 1px solid #2c5c3d; border-radius: 12px; }
.empty-lineup strong { font-size: 15px; color: var(--ink); }
.empty-lineup span { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

.scroll-hint { text-align: center; color: var(--muted); font-size: 11px; margin: 8px 0 20px; }
@media (min-width: 620px) { .scroll-hint { display: none; } }

/* ---- list view ---- */
.list-view { max-width: 720px; margin: 8px auto 40px; padding: 0 14px; display: grid; gap: 18px; }
.list-team { content-visibility: auto; contain-intrinsic-size: auto 700px; } /* skip layout/paint of the offscreen (team B) section at first paint */
.list-team h2 { font-size: 15px; margin: 0 0 2px; padding-left: 10px; border-left: 4px solid #666; }
.list-meta { font-size: 12px; color: var(--muted); margin: 0 0 8px; padding-left: 14px; }
.list-group { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 12px 0 4px; }
.list-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--panel); color: var(--ink); border: 1px solid #1c3b28;
  border-radius: 9px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; text-align: left;
}
.list-row:hover { background: #123522; }
.list-row.search-hidden { display: none !important; } /* filtered out by the player search */
.list-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.list-photo-blank { background: #0002; }
.list-pos { font-size: 11px; font-weight: 800; color: var(--muted); min-width: 54px; }
.list-name { flex: 1; font-size: 14px; font-weight: 600; }
.list-num { color: var(--muted); font-weight: 500; font-size: 12px; }
.list-depth { font-size: 11px; color: #7fd4a1; }
.list-ovr { font-size: 12px; font-weight: 900; color: #241a00; background: linear-gradient(180deg, #ffd85a, #e8b500); padding: 1px 7px; border-radius: 6px; border: 1px solid #b98f00; }

/* ---- popover (modal) ---- */
/* Modal sits ABOVE the sticky site-nav (z-index 200) — otherwise, on mobile where the
   nav wraps to several tall rows, the nav renders over the popover's top and hides the
   ✕ close button (and blocks tap-to-close), trapping the user in the dialog. */
.backdrop { position: fixed; inset: 0; background: #000a; z-index: 300; }
.hidden { display: none !important; }
.popover {
  position: fixed; z-index: 301; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, 92vw); max-height: 82vh; overflow: auto;
  background: #0e2719; border: 1px solid #2c5c3d; border-radius: 14px; box-shadow: 0 20px 60px #000b;
  overscroll-behavior: contain; /* scrolling the long player list doesn't chain to the page */
}
.popover-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; position: sticky; top: 0; z-index: 1; background: #0e2719; border-bottom: 1px solid #16341f; }
.popover-head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* long titles never push the ✕ off-screen */
.popover-head span { font-size: 15px; font-weight: 800; }
.popover-head button { flex: 0 0 auto; background: #17442a; border: 1px solid #2c5c3d; color: var(--ink); font-size: 18px; cursor: pointer; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
/* Prev/next steppers flanking the title — same touch target, lighter weight than the ✕. */
.popover-nav { font-size: 22px; font-weight: 700; line-height: 1; }
.popover-nav[hidden] { display: none; }
.popover ol { list-style: none; margin: 0; padding: 4px 10px 8px; }
.popover li { display: flex; flex-direction: column; gap: 2px; padding: 9px 8px; border-bottom: 1px solid #17392600; border-top: 1px solid #16341f; }
.popover li.starter { background: #123522; border-radius: 8px; }
.popover .p-main { display: flex; align-items: center; gap: 8px; }
.popover .rank { font-size: 11px; color: var(--muted); width: 16px; }
.popover .p-num { font-size: 12px; color: var(--muted); width: 34px; }
.popover .p-name { flex: 1; font-size: 14px; font-weight: 700; }
.popover .p-pos { font-size: 10px; font-weight: 800; color: #06140b; background: #7fd4a1; padding: 1px 6px; border-radius: 6px; }
.popover .p-age { font-size: 12px; color: var(--muted); }
.popover .p-ovr { display: inline-flex; align-items: baseline; gap: 2px; font-size: 14px; font-weight: 900; color: #241a00; background: linear-gradient(180deg, #ffd85a, #e8b500); padding: 1px 7px; border-radius: 7px; border: 1px solid #b98f00; }
.popover .p-ovr i { font-style: normal; font-size: 8px; font-weight: 800; opacity: 0.75; }
.popover .p-bio { font-size: 11px; color: #8fb0a0; padding-left: 52px; }
.popover .p-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #0c2416; border: 1px solid #29513a; flex: 0 0 auto; }
.popover li.starter .p-photo { width: 46px; height: 46px; }
.popover .p-photo-blank { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--muted); }
.popover .p-espn { color: #7fd4a1; text-decoration: none; font-weight: 800; font-size: 14px; padding: 0 2px; }
.popover .p-espn:hover { color: var(--ink); }
.popover .p-injury { font-size: 11px; color: #f0b37e; padding-left: 52px; margin-top: 2px; }
.popover .p-stats { display: flex; flex-wrap: wrap; gap: 14px; padding: 3px 0 2px 52px; font-size: 12px; color: var(--muted); }
.popover .p-stats[data-loading] { opacity: 0.55; font-style: italic; }
.popover .p-stats .stat b { color: var(--ink); font-size: 15px; font-weight: 800; margin-right: 3px; }
/* [U1] Non-starter rows expand to reveal a stat line; a caret + pointer signal it. */
.popover li.p-expandable { cursor: pointer; }
.popover li.p-expandable:hover .p-name { color: var(--ink); }
.popover li.p-expandable:hover .p-main::after { opacity: 1; }
.popover li.p-expandable .p-main::after { content: "\25B8"; color: var(--muted); opacity: 0.7; font-size: 11px; flex: none; transition: transform 0.15s ease; }
.popover li.p-expandable[aria-expanded="true"] .p-main::after { transform: rotate(90deg); color: #7fd4a1; opacity: 1; }
.popover .p-draft { font-size: 11px; font-weight: 700; padding: 2px 8px 2px 24px; margin-top: 2px; }
.popover .p-draft.drafted { color: #7fd4a1; }
.popover .p-draft.undrafted { color: #8fb0a0; font-weight: 500; }
.list-draft { font-size: 11px; font-weight: 800; color: #06140b; background: #7fd4a1; padding: 1px 6px; border-radius: 6px; }
.popover-note { padding: 6px 16px 14px; font-size: 11px; color: var(--muted); }

.stale-banner { max-width: 640px; margin: 0 auto 8px; padding: 8px 14px; border-radius: 8px; background: #3a2a0e; color: #f0cd8a; border: 1px solid #6b501a; font-size: 13px; text-align: center; }

@media (max-width: 620px) {
  .control-row select { min-width: 150px; flex: 1; }
  .surface { min-width: 480px; }
  /* Comfortable one-handed touch targets (>=44px) on phones — chips are both the
     tap target (open depth) and the drag handle for every non-NFL sport. */
  .chip { min-height: 44px; padding: 7px 6px 8px; }
  .view-toggle button { padding: 13px 12px; font-size: 15px; }
  /* Reserve space so the fixed compare drawer never hides the last players/rows. */
  body.cmp-open { padding-bottom: 210px; }
  /* Depth popover as a bottom sheet on phones: full width, anchored to the bottom (so
     the long list is thumb-scrollable), with the ✕ header pinned at the sheet's top and
     always visible no matter how many players a position has. Backdrop above stays
     tappable to close. */
  .popover {
    top: auto; bottom: 0; left: 0; right: 0; transform: none;
    width: 100%; max-width: 100%; max-height: 85vh;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .popover-head { padding: 14px 16px 10px; }
  .popover-head span { font-size: 16px; }
}

/* ---- loading skeletons (first cold load) ---- */
/* Neutral tinted blocks that stand in for chips/rows until data arrives. The shimmer
   only runs when the user hasn't asked for reduced motion (see the media query below). */
.skeleton { background: #ffffff14; border-color: #ffffff14 !important; color: transparent !important; box-shadow: none; pointer-events: none; }
.skeleton * { visibility: hidden; }
.list-row.skeleton { min-height: 44px; }
@media (prefers-reduced-motion: no-preference) {
  .skeleton { animation: skeleton-pulse 1.2s ease-in-out infinite; }
  @keyframes skeleton-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.85; } }
}

/* ---- compare drawer (player vs player) ---- */
.compare-drawer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #0e2719; border-top: 2px solid #2c5c3d; box-shadow: 0 -10px 30px #0009; padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }
.cmp-close { position: absolute; top: 6px; right: 12px; background: transparent; border: 0; color: var(--muted); font-size: 18px; cursor: pointer; }
.cmp-grid { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; }
.cmp-vs { align-self: center; color: var(--muted); font-weight: 800; font-size: 13px; }
.cmp-col { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cmp-col.cmp-empty { color: var(--muted); font-size: 12px; padding: 28px 0; justify-content: center; }
.cmp-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #0c2416; border: 1px solid #29513a; }
.cmp-name { font-weight: 800; font-size: 14px; }
.cmp-team { color: var(--muted); font-size: 11px; }
.cmp-ovr { font-size: 13px; font-weight: 900; color: #241a00; background: linear-gradient(180deg, #ffd85a, #e8b500); padding: 1px 7px; border-radius: 7px; }
.cmp-ovr i { font-style: normal; font-size: 8px; opacity: 0.75; margin-left: 2px; }
.cmp-bio { color: #8fb0a0; font-size: 11px; }
.cmp-stats { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 3px; }
.cmp-stats[data-loading] { opacity: 0.55; font-style: italic; }
.cmp-stats .stat b { color: var(--ink); font-weight: 800; margin-right: 2px; }
.cmp-stats .stat.better b { color: #7fd4a1; }
/* [U3] A pinned player reads as "locked in" — the photo gets a green ring. */
.cmp-col.cmp-selected .cmp-photo { border-color: #7fd4a1; box-shadow: 0 0 0 2px rgba(127, 212, 161, 0.45); }
#compare.active { color: #06140b; background: #3ea06a; border-color: #3ea06a; }

/* Respect users who prefer less motion: drop transitions/animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* iOS Safari auto-zooms the viewport when a focused form control is under 16px. Bump the
   controls (team/season/formation selects + the player-search input) to 16px on phones so
   focusing them doesn't yank the layout; pinch-zoom stays allowed (viewport meta unchanged). */
@media (max-width: 760px) {
  select, input, textarea, .player-search { font-size: 16px !important; }
}

/* Print: surface list rows are dark on screen — flip them ink-light so a Save-as-PDF is
   readable (shared.css handles the rest of the print chrome-stripping). */
@media print {
  .list-row { background: #fff !important; color: #000 !important; border-color: #999 !important; }
  .list-pos, .list-meta, .list-num, .list-team h2 { color: #333 !important; }
}