.overview-heading {
  min-height: 76px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  border-bottom: 1px solid var(--line-strong);
}
.overview-heading-copy { max-width: 760px; padding-bottom: 9px; }
.overview-heading h2 { margin: 0; color: #f0d28a; font: 600 clamp(27px, 2.2vw, 34px)/1.1 serif; }
.overview-description { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.overview-browse-button {
  min-height: 44px;
  margin-bottom: 20px;
  padding: 10px 18px;
  border: 1px solid #806a42;
  border-radius: 4px;
  background: #211d17;
  color: #ead59f;
  cursor: pointer;
}
.overview-browse-button:hover { border-color: #c09a54; background: #2b2318; }
.overview-summary-panel { display: grid; justify-items: end; gap: 5px; }
.overview-last-update { margin: 0; color: var(--muted); font-size: 12px; }
.overview-site-notice { margin: 10px 0 2px; padding: 8px 12px; border-left: 3px solid #b85c57; background: #1b1515; color: #edb1aa; font-size: 14px; }
.overview-summary {
  margin: 0 0 10px;
  display: flex;
  align-items: flex-end;
  border: 0;
}
.overview-summary > div { min-height: 0; padding: 0 18px; border-left: 1px solid var(--line); }
.overview-summary > div:first-child { padding-left: 0; border-left: 0; }
.overview-summary > div:last-child { padding-right: 0; }
.overview-summary dt { color: var(--muted); font-size: 11px; }
.overview-summary dd { margin: 1px 0 0; color: #eee1c2; font: 600 18px/1.15 serif; }
.overview-rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(34px, 5vw, 76px); padding-top: 30px; }
.overview-ranking { min-width: 0; }
.overview-ranking-heading { min-height: 78px; border-bottom: 1px solid var(--line-strong); }
.overview-ranking-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.overview-ranking-heading h3 { margin: 0; font: 600 clamp(22px, 2vw, 29px)/1.2 serif; }
.overview-ranking-heading > p:last-child { margin: 5px 0 14px; color: var(--muted); font-size: 14px; }
.overview-ranking-more-button {
  min-height: 30px;
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid #6e5c3a;
  border-radius: 4px;
  background: #1b1a17;
  color: #dec385;
  cursor: pointer;
  font-size: 13px;
}
.overview-ranking-more-button:hover { border-color: #c09a54; background: #2b2318; }
.overview-ranking-list { margin: 0; padding: 0; list-style: none; }
.overview-ranking-item { border-bottom: 1px solid var(--line); }
.overview-ranking-button {
  width: 100%;
  min-height: 76px;
  padding: 8px 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) minmax(170px, 42%) 20px;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.overview-ranking-button:hover { background: linear-gradient(90deg, rgba(216,181,109,.09), transparent); }
.overview-ranking-button.is-static { cursor: default; }
.overview-ranking-button.is-static:hover { background: transparent; }
.overview-rank { color: var(--gold-soft); font: 600 13px/1 serif; }
.overview-lineup { min-width: 0; display: flex; align-items: center; gap: 12px; }
.overview-portraits { flex: 0 0 auto; display: flex; }
.overview-portraits > img, .overview-portraits .mini-portrait-fallback {
  width: 34px;
  height: 42px;
  margin-left: -5px;
  object-fit: cover;
  border: 1px solid #6c5939;
  background: #201d19;
}
.overview-portraits > :first-child { margin-left: 0; }
.overview-portraits .mini-portrait-fallback { display: grid; place-items: center; color: var(--gold); font: 600 13px/1 serif; }
.overview-lineup-copy { min-width: 0; }
.overview-lineup-copy strong { display: block; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
.overview-lineup-copy span { display: block; overflow: visible; text-overflow: clip; white-space: nowrap; }
.overview-lineup-copy strong { color: #f0d28a; font: 600 18px/1.2 serif; }
.overview-lineup-copy span { margin-top: 3px; color: #b8b2a8; font-size: 14px; }
.overview-ranking-stats { min-width: 0; max-width: 100%; text-align: right; }
.overview-ranking-stats strong, .overview-ranking-stats span { display: block; white-space: normal; overflow-wrap: anywhere; }
.overview-ranking-stats strong { color: #e6ddca; font-size: 15px; }
.overview-ranking-stats span { margin-top: 3px; color: var(--muted); font-size: 13px; }
.overview-ranking-arrow { color: var(--gold); font-size: 20px; transition: transform 150ms ease; }
.overview-ranking-button:hover .overview-ranking-arrow { transform: translateX(4px); }
.overview-ranking-empty { min-height: 76px; padding: 24px 0; color: var(--muted); }
.overview-search-results { padding-top: 4px; }
.overview-search-results-heading { min-height: 82px; border-bottom: 1px solid var(--line-strong); }
.overview-search-results-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.overview-search-results-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
}
.overview-search-results-actions .overview-sort-control { margin-top: 0; }
.overview-search-close-button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  padding: 0;
  border: 1px solid #605741;
  border-radius: 4px;
  background: #171715;
  color: #e6ddca;
  cursor: pointer;
  font: 400 24px/1 sans-serif;
}
.overview-search-close-button:hover { border-color: #d4ab55; background: #342815; color: #f0d28a; }
.overview-search-results-heading h3 { margin: 0; font: 600 clamp(22px, 2vw, 29px)/1.2 serif; }
.overview-search-results-heading > p:last-child { margin: 5px 0 14px; color: var(--muted); font-size: 14px; }
.overview-search-result-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }
.overview-search-result-card {
  width: 100%;
  min-height: 88px;
  padding: 12px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(125px, auto) 16px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.overview-search-result-card:hover { background: #1b1c1d; }
.overview-result-player { color: #eee9df !important; font-weight: 700; }
.overview-search-result-stats { min-width: 0; text-align: right; }
.overview-search-result-stats strong, .overview-search-result-stats span { display: block; white-space: nowrap; }
.overview-search-result-stats strong { color: var(--green); font-size: 15px; }
.overview-search-result-stats span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.overview-search-empty { margin: 0; padding: 28px 0; color: var(--muted); }
.deck-detail.is-overview { overflow-y: auto; }
.loading-message, .empty-message, .error-message { margin: 0; padding: 32px 20px; color: var(--muted); }
.error-message { color: #e49a90; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 900px) and (min-height: 720px) {
  body { height: 100dvh; overflow-y: hidden; }
  .app-shell { height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .intel-layout { height: auto; min-height: 0; }
  .deck-detail, .detail-content, .hero-comparison, .hero-columns { height: 100%; min-height: 0; }
  .deck-detail { overflow: hidden; }
  .detail-content { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
}

@media (min-width: 1200px) and (min-height: 801px) {
  .detail-meta { margin-top: 6px; font-size: 16px; }
  .team-facts { font-size: 17px; }
  .hero-slot { font-size: 14px; }
  .hero-name { font-size: 27px; }
  .hero-progress { font-size: 16px; }
  .breakthrough { font-size: 14px; }
  .allocation-summary { font-size: 14px; }
  .stat-grid dt { font-size: 14px; line-height: 1.2; }
  .stat-grid dd { font-size: 19px; line-height: 1.2; }
  .stat-formula { font-size: 13px; line-height: 1.2; }
  .stat-legend { font-size: 12px; }
  .intel-section h4 { font-size: 16px; }
  .tactic-name { font-size: 16px; }
  .tactic-level, .tactic-tags { font-size: 13px; line-height: 1.25; }
  .compact-detail-title { font-size: 15px; }
  .compact-detail-summary { font-size: 13px; }
}

@media (min-width: 900px) and (max-height: 800px) {
  .topbar { min-height: 72px; padding-block: 8px; }
  .intel-layout { min-height: 0; }
  .deck-detail { padding-block: 10px; }
  .detail-header { min-height: 54px; padding-bottom: 6px; }
  .team-facts { min-height: 34px; }
  .hero-intel { padding-top: 8px; padding-bottom: 4px; }
  .hero-identity { grid-template-columns: 58px minmax(0, 1fr); gap: 9px; }
  .hero-portrait { width: 58px; height: 72px; }
  .intel-section { margin-top: 5px; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .topbar { padding-inline: 16px; gap: 14px; }
  .brand-logo { width: 46px; height: 46px; }
  h1 { font-size: 26px; }
  .deck-detail { padding-inline: 12px; }
  .hero-intel { padding-inline: 10px; }
  .hero-intel:first-child { padding-left: 0; }
  .hero-intel:last-child { padding-right: 0; }
  .hero-identity { grid-template-columns: 58px minmax(0, 1fr); gap: 8px; }
  .hero-portrait { width: 58px; height: 72px; }
  .hero-name { font-size: 21px; }
  .compact-detail-button { grid-template-columns: minmax(64px, auto) minmax(0, 1fr) 10px; }
}

@media (max-width: 899px) {
  .overview-content { padding-top: 8px; }
  .overview-heading { min-height: 0; align-items: stretch; flex-direction: column; gap: 14px; }
  .overview-heading-copy { padding-bottom: 0; }
  .overview-heading h2 { font-size: 29px; }
  .overview-description { font-size: 13px; }
  .overview-browse-button { width: 100%; margin: 0 0 18px; }
  .overview-summary-panel { justify-items: start; }
  .overview-summary > div { min-height: 0; padding: 0 10px; }
  .overview-summary > div:first-child { padding-left: 0; }
  .overview-summary dt { font-size: 12px; }
  .overview-summary dd { font-size: 18px; }
  .overview-rankings { grid-template-columns: 1fr; gap: 32px; padding-top: 24px; }
  .overview-ranking-button { grid-template-columns: 25px minmax(0, 1fr) auto 14px; gap: 8px; }
  .overview-ranking-stats { min-width: 88px; }
  .overview-search-result-list { grid-template-columns: 1fr; }
  .overview-portraits > img, .overview-portraits .mini-portrait-fallback { width: 29px; height: 36px; }
  .overview-lineup-copy strong { font-size: 18px; }
  .overview-lineup-copy span { font-size: 12px; }
}
@media (max-width: 899px) {
  .topbar { min-height: 72px; gap: 12px; padding: 10px 14px; }
  .brand-logo { width: 46px; height: 46px; }
  .brand-block { min-width: 0; gap: 9px; }
  .brand-block .eyebrow { font-size: 11px; }
  .brand-block h1 { font-size: 24px; }
  .topbar-nav { flex: 0 0 auto; gap: 7px; }
  .overview-open-button, .drawer-open-button { min-height: 38px; padding-inline: 11px; }
  .intel-layout { min-height: calc(100vh - 72px); }
  .deck-detail { padding: 16px 14px 28px; }
  .detail-header { align-items: stretch; flex-direction: column; gap: 10px; }
  .detail-title-line { flex-wrap: wrap; }
  .detail-title-line h2, .detail-player { white-space: normal; }
  .detail-meta { white-space: normal; }
  .detail-actions { width: 100%; }
  .detail-actions .source-link, .detail-actions .matchup-button { flex: 1; }
  .team-facts { padding: 8px 0; flex-wrap: wrap; gap: 6px 14px; }
  .hero-tabs {
    margin: 10px 0 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block: 1px solid var(--line);
  }
  .hero-tab {
    min-width: 0;
    min-height: 56px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-right: 1px solid var(--line);
    border-bottom: 3px solid transparent;
    background: #151617;
    color: #c7c1b8;
    cursor: pointer;
  }
  .hero-tab:last-child { border-right: 0; }
  .hero-tab[aria-selected="true"] { border-bottom-color: var(--gold); background: #242019; color: #f2e3bd; }
  .hero-tab-portrait { width: 34px; height: 42px; }
  .hero-tab span:last-child { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .hero-columns { display: block; }
  .hero-intel, .hero-intel:first-child, .hero-intel:last-child { padding: 16px 0 0; border: 0; }
  .hero-identity { grid-template-columns: 72px minmax(0, 1fr); }
  .hero-portrait { width: 72px; height: 90px; }
  .hero-name { font-size: 26px; }
  .stat-grid { margin-top: 12px; }
  .stat-row { padding: 7px 9px; }
  .stat-grid dt { font-size: 14px; }
  .stat-grid dd { font-size: 18px; }
  .stat-formula { font-size: 13px; }
  .stat-legend { padding: 4px 9px; font-size: 12px; }
  .intel-section { margin-top: 13px; }
  .intel-section h4 { margin-bottom: 6px; font-size: 15px; }
  .tactic-button { min-height: 52px; padding: 7px 0; grid-template-columns: 42px minmax(0, 1fr); gap: 9px; }
  .tactic-icon, .tactic-icon-fallback { width: 40px; height: 40px; }
  .tactic-name { font-size: 16px; }
  .tactic-level, .tactic-tags { font-size: 13px; }
  .compact-detail-button { min-height: 42px; padding-block: 7px; grid-template-columns: minmax(76px, auto) minmax(0, 1fr) 14px; }
  .compact-detail-title { font-size: 15px; }
  .compact-detail-summary { font-size: 13px; }
  .intel-modal {
    width: 100%;
    max-width: none;
    max-height: 86dvh;
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 8px 8px 0 0;
  }
  .intel-modal-shell { padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); }
  .intel-detail-facts { grid-template-columns: 1fr; }
  .intel-detail-fact { border-right: 0; border-bottom: 1px solid var(--line); }
  .intel-detail-fact:last-child { border-bottom: 0; }
  .matchup-select-field { grid-template-columns: 1fr; gap: 5px; }
  .matchup-result-heading { align-items: flex-start; flex-direction: column; }
  .matchup-metrics { grid-template-columns: 1fr; }
  .matchup-metrics > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .matchup-metrics > div:last-child { border-bottom: 0; }
  .matchup-table-row { grid-template-columns: minmax(0, 1fr) 40px 74px 46px; gap: 5px; }
  .matchup-table-deck span { display: block; }
  .matchup-match-copy { align-items: flex-start; flex-direction: column; gap: 0; }
  .battle-history-row { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
  .battle-history-meta { grid-column: 2; justify-content: flex-end; }
}

@media (max-width: 520px) {
  h1 { font-size: 25px; }
  .drawer-open-button { padding-inline: 11px; }
  .drawer-filter-row { align-items: stretch; flex-direction: column; }
  .sort-control { justify-content: space-between; }
  .sort-control select { flex: 1; }
  .mini-hero span { display: none; }
}

.search-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) 42px; gap: 8px; }
.search-category { min-width: 0; }
.search-category select, .overview-search-category {
  width: 100%;
  border: 1px solid #4b4b49;
  border-radius: 4px;
  background: #111213;
  color: #eee9df;
}
select { color-scheme: dark; }
select option { background: #101112; color: #f1e9da; }
.search-category select { height: 42px; padding: 0 7px; font-size: 14px; }
.search-submit {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid #705e3d;
  border-radius: 4px;
  background: #211d17;
  color: #ead59f;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.search-submit:hover { border-color: #b79350; background: #292116; }
.drawer-filter-row { flex-wrap: wrap; justify-content: flex-start; }
.minimum-troops-control {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d6d1c8;
  white-space: nowrap;
}
.minimum-troops-control span { color: var(--muted); font-size: 14px; }
.minimum-troops-control input {
  width: 92px;
  height: 38px;
  padding: 0 7px;
  border: 1px solid #4b4b49;
  border-radius: 4px;
  background: #111213;
  color: #eee9df;
}
.overview-player-search { width: min(720px, 100%); margin: 28px auto 38px; }
.overview-search-row { display: grid; grid-template-columns: 124px minmax(0, 1fr) 54px max-content; gap: 10px; }
.overview-search-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.overview-search-toggle { background: #171717; }
.overview-minimum-troops { background: #171717; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; }
.overview-search-category {
  height: 58px;
  padding: 0 10px;
  border-color: #8d7441;
  color: #f4eee3;
  font-size: 16px;
}
.overview-player-search-input {
  min-width: 0;
  height: 58px;
  padding: 0 18px;
  border: 1px solid #8d7441;
  border-radius: 5px;
  background: #0e0f10;
  color: #f4eee3;
  font-size: 20px;
}
.overview-player-search-input::placeholder { color: #928d83; }
.overview-player-search-submit {
  width: 54px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid #967a43;
  border-radius: 5px;
  background: #2a2216;
  color: #f0d18a;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.overview-player-search-submit:hover { border-color: #d4ab55; background: #342815; }
@media (max-width: 560px) {
  .overview-player-search { margin: 20px auto 28px; }
  .overview-search-row { grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 8px; }
  .overview-advanced-toggle { min-height: 42px; grid-column: 1 / -1; }
  .overview-search-filters { justify-content: flex-start; }
  .overview-search-category { height: 50px; padding: 0 7px; font-size: 14px; }
  .overview-player-search-input { height: 50px; font-size: 17px; }
  .overview-player-search-submit { width: 48px; height: 50px; }
  .overview-search-result-card { grid-template-columns: minmax(0, 1fr) auto 13px; gap: 8px; }
  .overview-search-result-card .alliance-badge { display: none; }
  .overview-search-result-stats { display: none; }
}
.composition-page { width: min(1040px, 100%); margin: 0 auto; padding: 34px 28px 48px; }