:root {
  --bg: #0f1720;
  --panel: #17212b;
  --panel-2: #1e2c39;
  --line: #2a3a4a;
  --text: #e8eef4;
  --muted: #94a6b8;
  --accent: #2f81f7;
  --accent-2: #1f6feb;
  --good: #3fb950;
  --bad: #ff7b72;
  --hot: #ff9f45;
  --cold: #58a6ff;
  --warn: #d29922;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --radius: 12px;
}

* { box-sizing: border-box; }
/* The [hidden] attribute must always win, even over class rules like .modal{display:flex}.
   Without this, the full-screen modal backdrop stays on top and blocks all clicks. */
[hidden] { display: none !important; }
/* Paint the root dark so the mobile status-bar/notch area and overscroll bounce
   never reveal the browser's default white behind the page. */
html { margin: 0; padding: 0; background-color: var(--bg); min-height: 100%; }
body { margin: 0; padding: 0; }
body {
  background-color: var(--bg);
  color: var(--text);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-header { text-align: center; padding: 32px 16px 8px; }
.brand { display: inline-flex; align-items: center; gap: 15px; }
.brand-logo { width: 72px; height: 72px; flex: 0 0 auto; }
.brand-text { text-align: left; line-height: 1; }
.wm-top { font-size: 13px; letter-spacing: 3px; color: var(--muted); font-weight: 600; text-transform: uppercase; }
.app-header h1.wm-main { margin: 3px 0; font-size: 30px; font-weight: 800; font-style: italic; letter-spacing: .5px; text-transform: uppercase; }
.wm-sub { font-size: 12px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; }

main { max-width: 860px; margin: 0 auto; padding: 16px; }

/* Search + dropdown */
.search-wrap { position: relative; margin: 18px auto 0; max-width: 620px; }
#search {
  width: 100%; padding: 15px 18px; font-size: 18px; font-family: inherit;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius); outline: none;
}
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,129,247,.25); }
#search::placeholder { color: var(--muted); opacity: 1; }

.dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none; z-index: 20;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 340px; overflow-y: auto;
}
.dropdown li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.dropdown li[aria-selected="true"], .dropdown li:hover { background: var(--panel-2); }
.dropdown .nm { font-weight: 600; }
.dropdown .team { color: var(--muted); font-size: 13px; margin-left: auto; }
.dropdown .pos { color: var(--muted); font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.dropdown .empty { color: var(--muted); cursor: default; padding: 12px; text-align: center; }

.hint { color: var(--muted); text-align: center; margin-top: 22px; font-size: 13px; }

/* Results panel */
.results { margin-top: 22px; }
/* Single row always: never wrap to a second line; a very narrow screen scrolls instead. */
.nav-row { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: nowrap;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.nav-row::-webkit-scrollbar { display: none; }
.nav-btn { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); color: var(--text); cursor: pointer; flex: 0 0 auto; white-space: nowrap; }
.nav-btn:hover { border-color: var(--accent); }
.player-head {
  display: flex; gap: 16px; align-items: flex-start; /* top-align: fixed photo, info flows beside */
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow);
}
/* Fixed, consistent headshot (industry-standard). Top-aligned via the container, so a longer
   info column simply extends below the photo rather than resizing it. */
.ph-photo { position: relative; flex: 0 0 auto; width: 132px; height: 168px;
  border-radius: 12px; overflow: hidden; border: 2px solid var(--line); background: var(--panel-2); }
.player-head img.shot { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; display: block; }
.ph-team { color: var(--muted); font-size: 15px; margin-top: 3px; }
.ph-team-link { cursor: pointer; }
.ph-team-link:hover { color: var(--text); }
.ph-born { color: var(--muted); font-size: 13px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.il-banner { background: rgba(210,153,34,.13); border: 1px solid rgba(210,153,34,.4); border-radius: 10px; padding: 10px 12px; margin-top: 14px; margin-bottom: 14px; }
.il-title { color: var(--warn); font-weight: 700; font-size: 14px; }
.il-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); }
.chip-on { color: var(--good); border-color: rgba(63,185,80,.45); }
.chip-off { color: var(--muted); }
.chip-as { color: var(--text); border: 1px solid rgba(240,193,75,.55); background: transparent; font-weight: 600;
  cursor: pointer; padding: 3px 10px; border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.chip-as:hover { border-color: rgba(240,193,75,.9); } /* stay gold on hover, not accent-blue */
.as-star { color: #f0c14b; }
/* Tappable "🏆 N awards ›" chip → opens the career-awards popup. Chevron signals it's tappable. */
.chip-awards { color: var(--text); border: 1px solid rgba(240,193,75,.55); background: transparent; font-weight: 600;
  cursor: pointer; font-size: 12px; line-height: 1.2; padding: 3px 10px; border-radius: 999px; -webkit-tap-highlight-color: transparent; }
.chip-awards:hover { border-color: var(--accent); }
.aw-ico { font-size: 11px; }
.aw-caret { color: var(--muted); font-weight: 700; margin-left: 1px; }
/* Career-honors popup: section per honor (count header = summary), season · team rows = detail. */
.award-list { padding: 4px 4px 10px; }
.award-sec { margin-bottom: 4px; }
.award-sec-head { font-weight: 800; font-size: 15px; color: var(--text); margin: 16px 4px 4px;
  padding-bottom: 6px; border-bottom: 2px solid var(--accent-2); }
.award-sec:first-child .award-sec-head { margin-top: 4px; }
.award-inst { display: flex; justify-content: space-between; gap: 12px; padding: 8px 6px;
  font-size: 14px; border-bottom: 1px solid rgba(42,58,74,.55); }
.award-yr { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.award-tm { color: var(--muted); }
.ph-chips.as-row { margin-top: 6px; }
/* flex: 1 1 0 sizes the text column from the space beside the photo (not its content width),
   so a long name/birthplace can't bump the whole column below the headshot. The badge row
   still drops to its own full-width line via .as-row { flex-basis: 100% }. */
.ph-main { flex: 1 1 0; min-width: 0; }
.ph-name { font-size: 24px; font-weight: 700; margin: 0; }
.ph-sub { color: var(--muted); font-size: 15px; margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
.badge.active { color: var(--good); border-color: rgba(63,185,80,.5); }
.badge.inactive { color: var(--muted); }
.ph-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.stamp { color: var(--muted); font-size: 11px; margin-top: 8px; }

button, .toggle button {
  font: inherit; color: var(--text); background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; cursor: pointer;
}
button:hover { border-color: var(--accent); }
.icon-btn { background: transparent; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; }

/* toggle + controls */
.controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 16px 0 10px; }
.toggle { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.toggle button { border: none; border-radius: 0; background: transparent; padding: 8px 14px; }
.toggle button.on { background: var(--accent-2); color: #fff; }
select {
  font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.seg button.on { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }

.caption { color: var(--muted); font-size: 15px; margin: 4px 2px 12px; }
.caption strong { color: var(--text); }

/* stat cards */
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; text-align: center; position: relative;
}
.card .abbr { color: var(--muted); font-size: 14px; letter-spacing: .5px; font-weight: 600; }
.card .val { font-size: 32px; font-weight: 800; margin: 6px 0 4px; }
.card .ref { color: var(--muted); font-size: 13px; line-height: 1.5; height: 40px;
  white-space: nowrap; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.card .refline { overflow: hidden; text-overflow: ellipsis; }
.card .ref b { color: var(--text); font-weight: 600; }
.card .rankbtn { margin-top: 8px; font-size: 11px; padding: 4px 8px; }
/* Temperature heat styling: warm = hot, blue = cold. Flame/snowflake carry the meaning too. */
.card.hot { border-color: rgba(255,159,69,.55); box-shadow: inset 0 0 0 1px rgba(255,159,69,.18); }
.card.cold { border-color: rgba(88,166,255,.55); box-shadow: inset 0 0 0 1px rgba(88,166,255,.18); }
.ref .up { color: var(--hot); font-weight: 700; }
.ref .down { color: var(--cold); font-weight: 700; }

.heat { font-size: 13px; padding: 2px 12px; border-radius: 999px; font-weight: 600;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.heat.hot { background: rgba(255,159,69,.16); color: var(--hot); border: 1px solid rgba(255,159,69,.45); }
.heat.cold { background: rgba(88,166,255,.16); color: var(--cold); border: 1px solid rgba(88,166,255,.45); }
.name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.skeleton { color: transparent; background: linear-gradient(90deg,#22303d,#2b3b4a,#22303d); border-radius: 6px; animation: sh 1.2s infinite; }
@keyframes sh { 0%{opacity:.6} 50%{opacity:1} 100%{opacity:.6} }

/* game list */
.gamelist { margin-top: 16px; }
.gamelist summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
table.games { border-collapse: collapse; font-size: 15px; min-width: 100%; }
table.games th, table.games td { text-align: right; padding: 6px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.games th:first-child, table.games td:first-child,
table.games th:nth-child(2), table.games td:nth-child(2) { text-align: left; }
table.games th { color: var(--muted); font-weight: 600; }

/* season picker note */
.note { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* messages */
.banner { background: rgba(210,153,34,.12); border: 1px solid rgba(210,153,34,.4); color: #f0d089;
  border-radius: 8px; padding: 10px 12px; margin: 12px 0; font-size: 13px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; overscroll-behavior: contain; }
body.modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
.modal-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  width: 100%; max-width: 460px; max-height: 82vh; max-height: 85dvh; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; display: flex; flex-direction: column; }
.mt-name { font-size: 17px; font-weight: 700; }
.mt-sub { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 3px; letter-spacing: .3px; }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; padding: 8px 8px 14px; }
.modal-foot { flex: 0 0 auto; padding: 10px 12px; border-top: 1px solid var(--line); }
.modal-close-btn { width: 100%; padding: 12px; border-radius: 10px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.modal-close-btn:hover { border-color: var(--accent); }

@media (max-width: 640px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal-box { max-width: 100%; max-height: 82vh; max-height: 82dvh; border-radius: 16px 16px 0 0; }
}
table.lead { width: 100%; border-collapse: collapse; font-size: 16px; }
table.lead td, table.lead th { padding: 7px 10px; border-bottom: 1px solid var(--line); }
table.lead th { text-align: left; color: var(--muted); font-weight: 600; font-size: 13px; }
table.lead td.r, table.lead th.r { text-align: right; }

.me-banner { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; margin: 4px 2px 16px; }
.me-name { font-weight: 700; font-size: 15px; }
.me-stat { color: var(--muted); font-size: 13px; margin-top: 2px; }
table.lead tr.clickable { cursor: pointer; }
table.lead tr.clickable:hover td { background: var(--panel-2); }
table.lead tr.me { background: rgba(47,129,247,.16); }
table.lead td.lrank { color: var(--muted); width: 36px; vertical-align: middle; }
table.lead .lname { font-weight: 600; }
table.lead .lteam { color: var(--muted); font-size: 13px; margin-top: 1px; }
table.lead td.lval { font-weight: 600; vertical-align: middle; }
table.lead tr.me .lname { font-weight: 800; }
.modal .sub { color: var(--muted); font-size: 12px; padding: 6px 10px; }

.guide-btn { display: inline-block; margin-top: 12px; font-size: 13px; padding: 6px 16px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer; }
.guide-btn:hover { border-color: var(--accent); }
.card .abbr-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: var(--muted); }

.guide .g-sec { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 16px 6px 6px; }
.guide .g-sec:first-child { margin-top: 4px; }
.guide .g-row { display: flex; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); border-radius: 8px; }
.guide .g-abbr { flex: 0 0 48px; font-weight: 800; font-size: 15px; color: var(--text); }
.guide .g-name { font-weight: 600; }
.guide .g-desc { color: var(--muted); font-size: 14px; margin-top: 2px; line-height: 1.45; }
.guide .g-formula { color: var(--accent); font-size: 13px; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.guide .g-hi { background: rgba(47,129,247,.16); box-shadow: inset 3px 0 0 var(--accent); }

/* Browse by team */
.browse { margin-top: 24px; }
body.has-selection .browse { display: none; }
.browse-head { color: var(--muted); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; margin: 0 0 12px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; }
.team-tile { display: flex; align-items: center; gap: 9px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 11px; cursor: pointer; color: var(--text); font: inherit; text-align: left; }
.team-tile:hover { border-color: var(--accent); }
.team-badge { width: 34px; height: 34px; border-radius: 8px; background: #dbe1e9; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.28); display: flex; align-items: center; justify-content: center; }
.team-logo { width: 26px; height: 26px; object-fit: contain;
  filter: drop-shadow(0 0 0.6px rgba(0,0,0,.55)) drop-shadow(0 0 0.6px rgba(0,0,0,.35)); }
/* Light/gold marks (Pirates): denser version of the standard halo. Zero offset is essential —
   offset shadows stamp a visible ghost copy of fine detail like the "TM", and chaining them
   compounds into shadows-of-shadows. With no offset the copies sit exactly on top, so the
   blur only darkens the edge. Tune darkness via alpha/blur, never via offset. */
.team-logo.logo-outline {
  filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 1px rgba(0,0,0,.7)); }
.team-name { font-size: 13px; line-height: 1.2; }

/* Matched pair of home actions: same neutral pill, each with its own icon. */
.browse-actions { display: flex; gap: 10px; justify-content: center; margin: 16px auto 0; max-width: 420px; }
.browse-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 14px; padding: 10px 14px; border-radius: 999px; background: var(--panel);
  border: 1px solid var(--line); color: var(--text); cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; }
.browse-btn:hover { border-color: var(--accent); }
.bb-ico { font-size: 15px; line-height: 1; }

/* Awards browse popup */
.awardpick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 4px 8px; }
.awardpick-tile { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 10px; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer;
  text-align: center; -webkit-tap-highlight-color: transparent; }
.awardpick-tile:hover { border-color: var(--accent); }
.awardpick-div { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .5px; border-bottom: 1px solid var(--line); padding-bottom: 6px; margin: 16px 2px 10px; }
.aw-back { background: transparent; border: none; color: var(--muted); font-size: 14px; cursor: pointer;
  padding: 4px 4px 8px; -webkit-tap-highlight-color: transparent; }
.aw-back:hover { color: var(--text); }
.aw-years { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 2px 2px 12px; scrollbar-width: none; }
.aw-years::-webkit-scrollbar { display: none; }
.aw-year { flex: 0 0 auto; font-size: 13px; padding: 5px 12px; border-radius: 999px; background: var(--panel-2);
  border: 1px solid var(--line); color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aw-year.on { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.aw-sec { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 2px solid var(--accent-2); padding-bottom: 5px; margin: 14px 2px 4px; }
.aw-win { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 6px; border: none; border-bottom: 1px solid rgba(42,58,74,.55); background: transparent;
  color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.aw-win-l { min-width: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.aw-lg { flex: 0 0 auto; font-size: 11px; color: var(--muted); background: var(--panel-2);
  border-radius: 5px; padding: 1px 7px; }
.aw-win-nm { font-size: 14px; }
.aw-win-tm { color: var(--muted); font-size: 12px; }
.aw-win-yr { flex: 0 0 auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Standings popup */
/* Toggle left, refresh pushed to the right edge with a guaranteed gap from Wild Card. */
.stand-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 4px; }
.stand-seg { margin-bottom: 0; }
.stand-refresh { flex: 0 0 auto; font-size: 13px; padding: 6px 13px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text); cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; }
/* No blue border/ring on hover, tap, or focus; keyboard focus still gets a visible ring. */
.stand-refresh:hover, .stand-refresh:focus, .stand-refresh:active { border-color: var(--line); outline: none; }
.stand-refresh:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stand-sec { font-size: 15px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .6px;
  margin: 22px 2px 8px; padding-bottom: 6px; border-bottom: 2px solid var(--accent-2); }
.stand-sec:first-child { margin-top: 6px; }
.stand-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stand-inner { width: max-content; min-width: 100%; }
.stand-row, .roster-row.stand-row { display: grid;
  grid-template-columns: 148px repeat(4, 48px) 1px repeat(3, 48px); gap: 8px; align-items: center;
  width: max-content; min-width: 100%; }
/* Invisible spacer: keeps the wider break before L5/L10/STRK, no visible rule. */
.stand-gap { width: 1px; }
.stand-team { min-width: 0; position: sticky; left: 0; background: var(--panel); padding-right: 6px; }
.stand-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stand-c { text-align: left; font-size: 14px; font-variant-numeric: tabular-nums; }
.stand-head { font-size: 12px; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.stand-head .stand-team, .stand-head .stand-c { font-weight: 600; }
.wc-cut { display: flex; align-items: center; gap: 10px; margin: 16px 4px 8px;
  color: var(--warn); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
.wc-cut::after { content: ''; flex: 1; height: 1px; background: rgba(210,153,34,.5); }

/* Roster popup */
.roster-sec { font-size: 15px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: .6px;
  margin: 20px 4px 8px; padding-bottom: 6px; border-bottom: 2px solid var(--accent-2); }
.roster-sec:first-child { margin-top: 4px; }
.roster-row { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px;
  padding: 10px 8px; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--text);
  font: inherit; text-align: left; cursor: pointer; }
.roster-row:hover { background: var(--panel-2); border-color: var(--line); }
.roster-row .pos { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.ros-left { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.ros-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-sm { font-size: 11px; padding: 2px 8px; flex: 0 0 auto; }

.app-footer { text-align: center; color: var(--muted); font-size: 12px; padding: 24px 16px 32px; }

/* On touch devices :hover "sticks" after a tap, leaving rows/buttons highlighted.
   Neutralize hover effects where there's no real hover (touchscreens). */
@media (hover: none) {
  .roster-row:hover { background: transparent; }
  table.lead tr.clickable:hover td { background: transparent; }
  .dropdown li:hover { background: transparent; }
  .ph-team-link:hover { color: var(--muted); }
  button:hover, .team-tile:hover, .nav-btn:hover, .browse-btn:hover,
  .awardpick-tile:hover, .modal-close-btn:hover, .rankbtn:hover { border-color: var(--line); }
  .aw-win:hover { background: transparent; }
}

@media (max-width: 640px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  /* Drop the logo + search together to the lower part of the upper third, so the
     suggestions dropdown has room to open below without getting cut off. Collapse
     to the top once a player is selected so results sit near the top. */
  .app-header { padding-top: 13vh; transition: padding-top .25s ease; }
  body.has-selection .app-header { padding-top: 24px; }
}