/* ============================================================
   SORARE HIDDEN-WEEK GAME
   ------------------------------------------------------------
   The build phase reuses the manager lineup-builder classes
   (.lineup-builder-layout / .manager-formation / .lineup-slot /
   .lineup-table …) and the results phase reuses the SO5 scores
   classes (.so5-lineup-card / .so5-lp-* …), both from manager.css.
   This file only holds Hidden-Week-specific bits + small overrides.
   ============================================================ */

.sg-page {
  font-family: var(--font);
  color: var(--primary);
}

.sg-loading,
.sg-empty,
.sg-error {
  padding: 24px 0;
  color: var(--muted);
  text-align: center;
}
.sg-error {
  color: var(--error);
}

/* --- buttons --- */
.sg-btn {
  font-family: var(--font);
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
  box-sizing: border-box; /* so width:100% buttons include padding (no overflow) */
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.sg-btn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--secondary);
}
.sg-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sg-btn--primary {
  background: var(--secondary);
  color: #0a0a0a;
  border-color: var(--secondary);
  font-weight: 600;
}
.sg-btn--primary:hover:not(:disabled) {
  background: #ffc433;
  color: #0a0a0a;
}
.sg-btn--ghost {
  background: transparent;
}
.sg-btn--lg {
  padding: 14px 28px;
  font-size: 15px;
  letter-spacing: 0.05em;
}

/* --- intro --- */
.sg-intro {
  max-width: 620px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.sg-intro__lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}
.sg-intro__hidden {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-tertiary);
  border-left: 2px solid var(--secondary);
  padding-left: 14px;
}
.sg-intro .sg-btn--lg {
  align-self: center;
  margin-top: 8px;
}

.sg-hidden-note {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 16px;
}
.sg-easy-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--secondary);
  color: #0a0a0a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* --- mode select (intro) --- */
.sg-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.sg-mode-card {
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.sg-mode-card--ranked {
  border-color: var(--secondary);
}
.sg-mode-card__title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sg-mode-card__tag {
  font-size: 10px;
  font-weight: 700;
  background: var(--secondary);
  color: #0a0a0a;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 4px;
}
.sg-mode-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-tertiary);
  flex: 1;
}
.sg-mode-card__note {
  font-size: 11px;
  color: var(--muted);
}
.sg-mode-card .sg-btn--lg {
  align-self: stretch;
  text-align: center;
}

/* --- ranked draft timer --- */
.sg-timer {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-secondary);
}
.sg-timer.is-low {
  border-color: var(--secondary);
  color: var(--secondary);
}
.sg-timer.is-expired {
  border-color: var(--error);
  color: var(--error);
}
.sg-ranked-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
}
.sg-ranked-note--warn {
  color: var(--error);
}

/* --- ranked leaderboard --- */
.sg-lb-me {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--secondary);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  padding: 14px 16px;
  margin: 14px 0;
}
.sg-lb-me__rank {
  font-size: 28px;
  font-weight: 700;
  color: var(--secondary);
}
.sg-lb-me__line {
  font-size: 15px;
}
.sg-lb-me__sub {
  font-size: 12px;
  color: var(--muted);
}
.sg-lb-unranked {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: 4px;
  padding: 0 5px;
  margin-left: 6px;
}
.sg-lb-wrap {
  max-height: none;
}
.sg-lb-rank {
  font-weight: 700;
  color: var(--text-tertiary);
}
.sg-lb-grade {
  font-weight: 700;
  color: var(--secondary);
}
.sg-lb-row--me {
  background: rgba(255, 176, 0, 0.1);
}
.sg-lb-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sg-lb-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
  flex-shrink: 0;
}
.sg-lb-user__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   MOBILE — the options table is too wide for a phone, so turn each
   candidate row into a stacked card. Scoped to .page-sorare-game so
   the manager builder/SO5 pages are untouched. Columns are:
   1:+  2:player  3:H/A  4:L5  5:L10  6:L40  7:matchup
   ============================================================ */
/* When the builder stacks (≤768), the layout's `align-items: flex-start` lets
   each column shrink-wrap to its content — the finalize panel's long lines then
   make it wider than the viewport. Pin the panel to full width (leaving the
   formation to size itself) so its content wraps within the screen. */
@media (max-width: 768px) {
  .page-sorare-game .lineup-table-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  /* Formation: empty slots are 5/13 (very tall) on desktop — that blows up the
     pitch on a phone. Shrink slots + shorten empty boxes so it stays compact. */
  .page-sorare-game .lineup-slot {
    width: 92px;
  }
  /* Both empty + filled are 5/13 on desktop; shorten BOTH to the same ratio so
     filled slots don't stick out past the empty ones on mobile. */
  .page-sorare-game .lineup-slot--empty,
  .page-sorare-game .lineup-slot--filled {
    aspect-ratio: 5 / 9;
  }
  .page-sorare-game .manager-formation__row {
    gap: 8px;
  }

  .page-sorare-game .lineup-table,
  .page-sorare-game .lineup-table tbody {
    display: block;
  }
  .page-sorare-game .lineup-table thead {
    display: none;
  }
  .page-sorare-game .lineup-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
  }
  .page-sorare-game .lineup-table td {
    display: block;
    border: none !important;
    padding: 0;
  }
  .page-sorare-game .lineup-table td:first-child::after {
    display: none; /* hide the desktop vertical divider in card layout */
  }
  /* row 1: + then player (fills the rest) */
  .page-sorare-game .lineup-table td:nth-child(1) {
    order: 0;
  }
  .page-sorare-game .lineup-table td:nth-child(2) {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* H/A is redundant on mobile (matchup says vs/at) — hide it */
  .page-sorare-game .lineup-table td:nth-child(3) {
    display: none;
  }
  /* row 2: matchup, full width */
  .page-sorare-game .lineup-table td:nth-child(7) {
    order: 2;
    flex: 1 0 100%;
  }
  /* row 3: the form badges, in a row */
  .page-sorare-game .lineup-table td:nth-child(4),
  .page-sorare-game .lineup-table td:nth-child(5),
  .page-sorare-game .lineup-table td:nth-child(6) {
    order: 3;
  }
  /* full-width helper rows (empty state, load-more) */
  .page-sorare-game .lineup-table td.lineup-table-empty,
  .page-sorare-game .lineup-table td.sg-loadmore-cell {
    flex: 1 0 100%;
    text-align: center;
  }
  /* skeleton rows: don't card-ify into a mess — just stack simply */
  .page-sorare-game .lineup-table tr.sg-skeleton-row td:nth-child(3) {
    display: block;
  }
  /* league/slot header: fully stack (league → slot → re-spin) so the long
     league name + re-spin button don't overflow the row on a phone. */
  .page-sorare-game .sg-pool-header {
    flex-direction: column;
    align-items: stretch;
  }
  .page-sorare-game .sg-pool-header__main {
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
  }
  .page-sorare-game .sg-respin-btn {
    align-self: flex-start;
  }
  .page-sorare-game .sg-pool-header__league {
    font-size: 14px;
  }
  /* search fills the row instead of bleeding off the right edge */
  .page-sorare-game .lineup-table-filters {
    width: 100%;
  }
  .page-sorare-game .lineup-search {
    width: 100%;
    min-width: 0;
  }
}

/* --- easy-mode toggle (intro) --- */
.sg-easy-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.sg-easy-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--secondary);
  cursor: pointer;
}

/* --- reveal: appearance status + decisive-action count --- */
.sg-appearance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.sg-appearance img {
  width: 12px;
  height: 12px;
  object-fit: contain;
}

/* --- actions footer (shared by build + results) --- */
.sg-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.sg-progress {
  margin-right: auto;
  color: var(--muted);
  font-size: 13px;
}

/* RULES indicator removed in build mode — keep the toolbar actions right-aligned. */
.sg-toolbar {
  justify-content: flex-end;
}

/* --- league/position header above the player-selection table --- */
.sg-pool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
}
.sg-pool-header--empty {
  color: var(--muted);
  font-size: 13px;
  justify-content: center;
}
.sg-pool-header__main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.sg-respin-btn {
  padding: 6px 12px;
  font-size: 12px;
  flex-shrink: 0;
}
.sg-respin-used {
  font-size: 11px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.sg-pool-header__league {
  font-size: 15px;
  font-weight: 700;
  color: var(--secondary);
}
.sg-pool-header__slot {
  font-size: 12px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sg-pool-header__chip {
  font-weight: 700;
  font-size: 11px;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
}
/* --- load-more row in the options table --- */
.sg-loadmore-cell {
  text-align: center;
  padding: 10px;
}

/* --- captain badge on a filled formation slot (non-interactive indicator) --- */
.sg-cap-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--secondary);
  color: #0a0a0a;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* --- finalize panel (all 5 picked → choose captain + submit) --- */
.sg-finalize {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-finalize__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--secondary);
}
.sg-finalize__hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.sg-finalize__need {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.sg-finalize__submit {
  width: 100%;
  margin-top: 4px;
}
.sg-cap-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sg-cap-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  text-align: left;
  font-family: var(--font);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  color: var(--primary);
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sg-cap-opt:hover {
  border-color: var(--secondary);
}
.sg-cap-opt.is-captain {
  border-color: var(--secondary);
  background: rgba(255, 176, 0, 0.12);
}
.sg-cap-opt__img {
  width: 30px;
  height: 38px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--card-bg);
  flex-shrink: 0;
}
.sg-cap-opt__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  flex: 1;
}
.sg-cap-opt__slot {
  font-size: 10px;
  font-weight: 700;
  color: var(--secondary);
  letter-spacing: 0.04em;
}
.sg-cap-opt__name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-cap-opt__c {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.sg-cap-opt.is-captain .sg-cap-opt__c {
  background: var(--secondary);
  color: #0a0a0a;
  border-color: var(--secondary);
}
.sg-done-btn {
  width: 100%;
  margin-top: 8px;
}

/* --- matchup cell (options "Matchup" column) --- */
.sg-matchup {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.sg-opp-crest {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.sg-opp-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-ko {
  color: var(--muted);
  margin-left: 4px;
  flex-shrink: 0;
}

/* --- results: grade hero (sits above the SO5-style lineup cards) --- */
.sg-result-hero {
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 24px 20px;
  margin: 14px 0 22px;
  background: var(--card-bg);
}
.sg-result-hero.is-allstar {
  border-color: var(--secondary);
  box-shadow: 0 0 24px rgba(255, 176, 0, 0.18);
}
.sg-result-hero__badge {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 8px;
}
.sg-result-hero__grade {
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
}
.sg-result-hero__grade-pct {
  font-size: 22px;
  color: var(--muted);
  margin-left: 6px;
}
.sg-result-hero__sub {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

/* --- tier ladder --- */
.sg-ladder {
  max-width: 420px;
  margin: 18px auto 0;
}
.sg-ladder__track {
  position: relative;
  height: 8px;
  background: var(--surface);
  border-radius: 6px;
}
.sg-ladder__fill {
  height: 100%;
  background: var(--secondary);
  border-radius: 6px;
  transition: width 0.4s ease;
}
.sg-ladder__mark {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 14px;
  background: var(--border);
}
.sg-ladder__mark-val {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--text-dim);
}
.sg-ladder__tiers {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  gap: 4px;
}
.sg-ladder__tier {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}
.sg-ladder__tier.is-current {
  color: var(--secondary);
  font-weight: 700;
}

/* --- results: slot/competition line under each SO5 player card --- */
.sg-lp-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
  min-width: 0;
}
.sg-lp-slot__pos {
  font-weight: 700;
  font-size: 11px;
  color: var(--secondary);
}
.sg-lp-slot__comp {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.2;
  text-align: center;
  /* wrap to at most 2 lines, contained within the (equal-width) card column */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  max-width: 100%;
}
/* matchup line: H/A · vs · opponent crest (results cards, both lineups) */
.sg-lp-matchup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 3px;
  max-width: 100%;
}
.sg-lp-ha {
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  flex-shrink: 0;
}
.sg-lp-ha--home {
  background: var(--venue-home-bg, #1481ec);
  color: #fff;
}
.sg-lp-ha--away {
  background: var(--venue-away-bg, #eab532);
  color: #0a0a0a;
}
.sg-lp-vs {
  font-size: 10px;
  color: var(--muted);
}
.sg-lp-opp {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.sg-lp-opp-name {
  font-size: 10px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Keep all 5 lineup cards equal width — without min-width:0 a long league name
   forces its column wider and starves the others (e.g. the GK card shrinks). */
.page-sorare-game .so5-lp-col {
  min-width: 0;
}
.sg-lineup-card--win {
  border-color: var(--secondary);
}

/* The optimal lineup's players don't include a card image, so the SO5 fallback
   tile is used — give it a visible card-shaped background (scoped to our page
   so the manager SO5 page is untouched). Player name + score still render. */
.page-sorare-game .so5-lp-card-fallback {
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 4px;
}