:root {
  color-scheme: dark;
  font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  background: var(--page);
  color: var(--text);
  --muted: var(--text-muted);
  --gold: var(--brand);
  --gold-soft: var(--brand-soft);
  --red: var(--outcome-loss);
  --green: var(--outcome-win);
  --blue: var(--alliance-allied);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--page);
  color: var(--text);
  font-size: 18px;
  line-height: 1.5;
}

button, input, select { font: inherit; letter-spacing: 0; }

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; }

.topbar {
  min-height: 58px;
  padding: 5px clamp(18px, 3vw, 54px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line-strong);
  background: #121313;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  color: inherit;
  text-decoration: none;
}
.brand-logo {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
}
.eyebrow { margin: 0 0 1px; color: var(--gold); font-size: 11px; font-weight: 700; }
h1 { margin: 0; font-family: serif; font-size: 23px; font-weight: 600; letter-spacing: 0; }
.topbar-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.drawer-open-button, .overview-open-button, .hub-link, .source-link, .matchup-button {
  min-height: 34px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #705e3d;
  border-radius: 4px;
  background: #211d17;
  color: #ead59f;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.drawer-open-button:hover, .overview-open-button:hover, .hub-link:hover, .source-link:hover, .matchup-button:hover { border-color: #b79350; background: #292116; }

.intel-layout { width: min(1720px, 100%); min-height: calc(100vh - 58px); margin: 0 auto; }
.deck-detail { min-width: 0; min-height: inherit; padding: 16px clamp(18px, 2.2vw, 38px); background: #101112; }
.detail-content { min-width: 0; }
.detail-header {
  min-height: 60px;
  padding-bottom: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line-strong);
}
.detail-title-block { min-width: 0; }
.detail-title-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.detail-title-line h2 {
  margin: 0;
  overflow: hidden;
  color: #f0d28a;
  font: 600 clamp(24px, 2.4vw, 34px)/1.15 serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-player { min-width: 0; overflow: hidden; font-size: 19px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.detail-meta { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.detail-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.matchup-button { white-space: nowrap; }

.team-facts {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  color: #ccc6bb;
  font-size: 15px;
}
.team-facts strong { color: #f2ede4; }
.outcome-win { color: var(--green); }
.outcome-loss { color: var(--red); }
.outcome-draw { color: var(--blue); }

.hero-comparison { min-width: 0; min-height: 0; }
.hero-tabs { display: none; }
.hero-columns { min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-intel {
  min-width: 0;
  padding: 12px clamp(12px, 1.5vw, 24px) 10px;
  border-right: 1px solid var(--line);
}
.hero-intel:first-child { padding-left: 0; }
.hero-intel:last-child { padding-right: 0; border-right: 0; }
.hero-identity { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 11px; align-items: center; }
.hero-portrait, .hero-tab-portrait, .portrait-fallback {
  object-fit: cover;
  border: 1px solid #79623c;
  background: #24211d;
}
.hero-portrait { width: 64px; height: 80px; }
.portrait-fallback { display: grid; place-items: center; color: var(--gold); font: 600 22px/1 serif; }
.hero-slot { margin: 0; color: var(--gold-soft); font-size: 13px; }
.hero-name { margin: 0; overflow: hidden; font: 600 21px/1.15 serif; text-overflow: ellipsis; white-space: nowrap; }
.hero-progress { margin-top: 4px; color: #c7c1b8; font-size: 14px; }
.progress-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breakthrough { display: inline-flex; align-items: center; gap: 4px; color: #d8c28f; font-size: 13px; }
.breakthrough-pips { display: inline-flex; gap: 2px; }
.breakthrough-pips i {
  width: 6px;
  height: 9px;
  display: block;
  border: 1px solid #6e6350;
  background: #272725;
  transform: skew(-8deg);
}
.breakthrough-pips i.is-filled { border-color: #d2ad5f; background: #c89b43; box-shadow: 0 0 4px #b27f2d66; }
.allocation-summary { display: block; margin-top: 2px; color: #8fb79a; font-size: 12px; }

.stat-grid {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
}
.stat-row { min-width: 0; padding: 4px 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-row:nth-child(2n) { border-right: 0; }
.stat-row:nth-child(3), .stat-row:nth-child(4) { border-bottom: 0; }
.stat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.stat-grid dt { color: var(--muted); font-size: 12px; }
.stat-grid dd { margin: 0; color: #f0ece4; font-size: 16px; font-weight: 700; }
.stat-formula { margin-top: 1px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.formula-paren, .formula-plus { color: #696761; }
.formula-plus { margin: 0 1px; }
.stat-intrinsic { color: #c9c4bb; }
.stat-allocated { color: #79c58a; }
.stat-gear { color: #ddb866; }
.stat-unresolved { display: block; margin-top: 1px; color: #77746e; font-size: 11px; }
.stat-legend {
  grid-column: 1 / -1;
  padding: 2px 7px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  background: #141515;
  font-size: 10px;
}

.intel-section { margin-top: 7px; }
.intel-section h4 { margin: 0 0 3px; color: #c9b078; font-size: 13px; }
.tactic-list, .warbook-list, .gear-list { margin: 0; padding: 0; list-style: none; }
.tactic-row, .compact-row { border-top: 1px solid #303131; }
.tactic-button {
  width: 100%;
  min-height: 38px;
  padding: 3px 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.tactic-button:hover .tactic-name, .tactic-button:focus-visible .tactic-name,
.compact-detail-button:hover .compact-detail-title, .compact-detail-button:focus-visible .compact-detail-title { color: #f4cf78; }
.tactic-icon, .tactic-icon-fallback {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border: 1px solid #685638;
  background: #24211c;
}
.tactic-icon-fallback { display: grid; place-items: center; color: var(--gold); font-size: 11px; }
.tactic-body { min-width: 0; }
.tactic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.tactic-name { overflow: hidden; color: #eee9df; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.tactic-level { color: var(--gold); font-size: 11px; white-space: nowrap; }
.tactic-tags { overflow: hidden; color: #9eb1bd; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.compact-detail-button {
  width: 100%;
  min-height: 30px;
  padding: 3px 1px;
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr) 12px;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.compact-detail-title { overflow: hidden; color: #ddd7cc; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.compact-detail-summary { overflow: hidden; color: #99958e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.compact-detail-arrow { color: var(--gold-soft); font-size: 18px; line-height: 1; }
.warbook-row .compact-detail-button { align-items: start; min-height: 36px; }
.warbook-row .compact-detail-summary { overflow: visible; line-height: 1.4; text-overflow: clip; white-space: normal; }
.empty-value { padding: 6px 0; color: #77746e; font-size: 12px; }

.deck-drawer {
  width: min(420px, 94vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  inset: 0 auto 0 0;
  overflow: hidden;
  border: 0;
  border-right: 1px solid #806c46;
  border-radius: 0;
  background: #111213;
  color: var(--text);
  box-shadow: 20px 0 60px #000b;
}
.deck-drawer::backdrop, .intel-modal::backdrop { background: #050606c9; }
.deck-drawer-shell { height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.drawer-heading {
  min-height: 76px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-strong);
}
.drawer-heading h2 { margin: 0; font: 600 24px/1.2 serif; }
.drawer-close-button, .intel-modal-close {
  width: 38px;
  height: 38px;
  border: 1px solid #54514b;
  border-radius: 50%;
  background: #232425;
  color: #ddd7cc;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.toolbar { padding: 12px 16px; display: grid; gap: 9px; border-bottom: 1px solid var(--line); background: #171818; }
.search-field { min-width: 0; }
.search-field input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #4b4b49;
  border-radius: 4px;
  background: #0f1011;
  color: #f3eee3;
}
.search-field input::placeholder { color: #88857f; }
.drawer-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.check-control, .sort-control { min-height: 38px; display: flex; align-items: center; gap: 7px; color: #d6d1c8; white-space: nowrap; }
.check-control { padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; }
.check-control input { width: 16px; height: 16px; accent-color: #ba9247; }
.sort-control span { color: var(--muted); font-size: 14px; }
.sort-control select {
  height: 38px;
  padding: 0 28px 0 10px;
  border: 1px solid #4b4b49;
  border-radius: 4px;
  background: #111213;
  color: #eee9df;
}
.deck-browser { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: #121313; }
.section-heading { min-height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.section-heading h3 { margin: 0; font-size: 18px; }
.section-heading span { color: var(--gold); font-weight: 700; }
.deck-list { min-height: 0; overflow-y: auto; }
.deck-row {
  width: 100%;
  min-height: 96px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid #2f3030;
  border-left: 3px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.deck-row:hover { background: #1b1c1d; }
.deck-row.is-selected { border-left-color: var(--gold); background: var(--surface-selected); }
.deck-row-main { min-width: 0; }
.deck-row-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.deck-alias { color: #f1d48f; font: 600 18px/1.2 serif; }
.player-name { min-width: 0; overflow: hidden; color: #f0ede7; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.alliance-badge { flex: 0 0 auto; border: 1px solid; border-radius: 4px; padding: 2px 6px; font-size: 12px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.alliance-badge.is-allied { border-color: #3b8db8; background: #102a3a; color: #91d5ff; }
.alliance-badge.is-hostile { border-color: #bf5d5d; background: #351b1d; color: #ffb0ab; }
.lineup-name { display: block; margin-top: 4px; overflow: hidden; color: #bbb5aa; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.mini-lineup { margin-top: 8px; display: flex; align-items: center; gap: 7px; }
.mini-hero { display: flex; align-items: center; gap: 4px; color: #ddd7cc; font-size: 13px; }
.mini-hero img, .mini-portrait-fallback { width: 28px; height: 32px; object-fit: cover; border: 1px solid #61553e; background: #262321; }
.mini-portrait-fallback { display: grid; place-items: center; color: var(--gold); }
.deck-row-meta { min-width: 60px; text-align: right; }
.observation-count { display: block; color: var(--gold); font-weight: 700; }
.win-rate { display: block; margin-top: 4px; color: var(--green); font-size: 13px; font-weight: 700; }
.record { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }

.intel-modal {
  width: min(680px, calc(100vw - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #806c46;
  border-radius: 6px;
  background: #171819;
  color: var(--text);
  box-shadow: 0 24px 70px #000c;
}
.intel-modal-shell { position: relative; max-height: inherit; padding: 26px; overflow-y: auto; }
.intel-modal-close { position: absolute; z-index: 2; top: 11px; right: 11px; }
.intel-detail-header { padding-right: 44px; }
.intel-detail-header-icon { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; }
.intel-detail-header-icon .tactic-icon, .intel-detail-header-icon .tactic-icon-fallback { width: 64px; height: 64px; }
.intel-detail-eyebrow { margin: 0; color: var(--gold); font-size: 14px; }
.intel-detail-title h2 { display: inline; margin: 0 8px 0 0; font: 600 25px/1.3 serif; }
.intel-detail-level { color: #c3aa73; font-size: 15px; }
.intel-detail-facts { margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.intel-detail-fact { padding: 11px; border-right: 1px solid var(--line); }
.intel-detail-fact:last-child { border-right: 0; }
.intel-detail-fact dt { color: #8e8a83; font-size: 13px; }
.intel-detail-fact dd { margin: 3px 0 0; color: #e5dfd3; font-size: 15px; }
.intel-detail-description { margin: 20px 0 0; color: #d5d0c7; font-size: 17px; line-height: 1.75; white-space: pre-wrap; }
.intel-detail-effect-list { margin-top: 20px; display: grid; gap: 14px; }
.intel-detail-effect { padding: 14px 16px; border-left: 3px solid #74613e; background: #121313; }
.intel-detail-effect-effect { border-left-color: #587896; }
.intel-detail-effect-kind { color: var(--gold); font-size: 13px; }
.intel-detail-effect h3 { margin: 3px 0 0; font-size: 20px; }
.intel-detail-effect .intel-detail-description { margin-top: 8px; font-size: 16px; }

.matchup-header { padding-right: 44px; }
.matchup-header h2 { margin: 2px 0 0; color: #f0d28a; font: 600 28px/1.25 serif; }
.matchup-base { margin: 8px 0 0; color: #eee9df; font-size: 17px; font-weight: 700; }
.matchup-notice { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.matchup-controls { margin-top: 20px; padding: 14px; display: grid; gap: 12px; border: 1px solid var(--line); background: #111213; }
.matchup-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.matchup-mode-button {
  min-height: 40px;
  border: 1px solid #4c4a45;
  background: #191a1b;
  color: #aaa59d;
  cursor: pointer;
}
.matchup-mode-button + .matchup-mode-button { border-left: 0; }
.matchup-mode-button[aria-pressed="true"] { border-color: #9b7e48; background: #302719; color: #f0d18a; font-weight: 700; }
.matchup-select-field { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 10px; color: #c8c2b8; font-size: 15px; }
.matchup-select-field[hidden] { display: none; }
.matchup-select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 34px 0 11px;
  border: 1px solid #55524c;
  border-radius: 3px;
  background: var(--page);
  color: #f0ece4;
}
.matchup-result { margin-top: 18px; }
.matchup-result-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.matchup-result-heading h3 { margin: 0; font: 600 21px/1.3 serif; }
.matchup-sample { padding: 4px 8px; border: 1px solid #4a614f; color: #8ec799; font-size: 13px; white-space: nowrap; }
.matchup-sample.is-low { border-color: #725d38; color: #d9b86d; }
.matchup-empty { margin: 14px 0 0; padding: 20px; border: 1px dashed #4a4741; color: var(--muted); text-align: center; }
.matchup-metrics { margin: 14px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.matchup-metrics > div { padding: 10px 12px; border-right: 1px solid var(--line); }
.matchup-metrics > div:last-child { border-right: 0; }
.matchup-metrics dt { color: var(--muted); font-size: 13px; }
.matchup-metrics dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; }
.matchup-metrics .is-primary dd { color: var(--gold); font-size: 24px; }
.matchup-breakdown, .matchup-recent { margin-top: 18px; }
.matchup-breakdown h4, .matchup-recent h4 { margin: 0 0 7px; color: #c9b078; font-size: 15px; }
.matchup-table { border-top: 1px solid var(--line); }
.matchup-table-row { min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) 48px 104px 52px; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.matchup-table-deck { min-width: 0; }
.matchup-table-deck strong { margin-right: 7px; color: #f0d28a; }
.matchup-table-deck span { overflow: hidden; color: #b9b3aa; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.matchup-table-count, .matchup-table-record { color: #b9b3aa; font-size: 14px; text-align: right; }
.matchup-table-rate { color: var(--green); text-align: right; }
.matchup-match-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.matchup-match-row { min-height: 44px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 42px; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); }
.matchup-outcome { font-weight: 800; text-align: center; }
.matchup-match-copy { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.matchup-match-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matchup-match-copy span { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.matchup-source-link { color: #d8bd7e; font-size: 14px; text-align: right; }

.battle-history-header { padding-right: 44px; }
.battle-history-header h2 { margin: 2px 0 0; color: #f0d28a; font: 600 28px/1.25 serif; }
.battle-history-deck { margin: 8px 0 0; color: #eee9df; font-size: 17px; font-weight: 700; }
.battle-history-notice { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.battle-history-list { margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.battle-history-item { border-bottom: 1px solid var(--line); }
.battle-history-row {
  min-height: 72px;
  padding: 11px 2px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.battle-history-row:hover { background: rgba(183, 147, 80, .08); }
.battle-history-outcome { font-size: 17px; text-align: center; }
.battle-history-opponent { min-width: 0; display: grid; gap: 3px; }
.battle-history-opponent strong { overflow: hidden; color: #eee9df; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.battle-history-opponent span { overflow: hidden; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.battle-history-meta { display: flex; align-items: center; gap: 9px; color: #aaa49a; font-size: 13px; white-space: nowrap; }
.battle-history-arrow { color: #d8bd7e; font-size: 14px; }

.overview-content { width: min(1480px, 100%); margin: 0 auto; padding: 26px 0 38px; }