.matchups-hero { padding: 20px 0 16px; max-width: 900px; }
.matchups-hero h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0 0 8px; letter-spacing: -.025em; }
.matchups-hero p { margin: 0; font-size: 1rem; }
.matchups-hero p:last-child { color: var(--secondary); max-width: 620px; }
.practice-entry { color: var(--purple); font-weight: 750; display: inline-block; margin-top: 8px; }
.matchup-tool { margin-bottom: 32px; }
.mode-picker { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft); max-width: 400px; margin-bottom: 18px; }
.mode-picker button { flex: 1; }
.matchup-tool button { font: inherit; cursor: pointer; }
.mode-picker button, .side-picker button { border: 0; border-radius: 13px; padding: 12px; color: var(--secondary); background: transparent; font-weight: 750; }
.mode-picker button[aria-pressed="true"], .side-picker button[aria-pressed="true"] { background: var(--surface-strong); color: var(--purple); box-shadow: 0 2px 8px #0000000c; }
.matchup-tool { --attack-color: #c8303e; --defend-color: #2464c5; }
.mode-picker [data-mode="attack"][aria-pressed="true"] { color: var(--attack-color); }
.mode-picker [data-mode="defense"][aria-pressed="true"] { color: var(--defend-color); }
:root[data-theme="dark"] .matchup-tool { --attack-color: #ff737c; --defend-color: #77acff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .matchup-tool { --attack-color: #ff737c; --defend-color: #77acff; }
}
.side-picker [data-side="a"][aria-pressed="true"], .selected-role[data-role="player"], .role-name[data-role="player"] { color: var(--defend-color); }
.side-picker [data-side="b"][aria-pressed="true"], .selected-role[data-role="rival"], .role-name[data-role="rival"] { color: var(--attack-color); }
.tool-layout { display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 20px; align-items: start; }
body:has(#tool) main { max-width: 1060px; }
.tool-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 24px; min-width: 0; }
.tool-panel h2 { font-size: 1.4rem; line-height: 1.2; margin: 0 0 10px; }
.tool-hint, .tool-scope { color: var(--secondary); font-size: .9rem; }
.tool-hint { margin: 0 0 18px; }
.type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.type-choice { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface-strong); color: var(--text); padding: 8px; font-size: .85rem !important; font-weight: 650; }
.type-choice img, .type-tag img { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; }
.type-choice-content { display: flex; align-items: center; gap: 7px; width: 96px; max-width: 100%; text-align: left; }
.type-choice[aria-pressed="true"] { border: 2px solid var(--purple); padding: 7px; background: var(--surface-soft); }
.type-choice:hover { border-color: var(--purple); }
.type-choice[data-type="normal"] { --choice-tint: #9e9e8c; }
.type-choice[data-type="fire"] { --choice-tint: #ed4033; }
.type-choice[data-type="water"] { --choice-tint: #4585e6; }
.type-choice[data-type="electric"] { --choice-tint: #f5c733; }
.type-choice[data-type="grass"] { --choice-tint: #59ad4a; }
.type-choice[data-type="ice"] { --choice-tint: #66c7e6; }
.type-choice[data-type="fighting"] { --choice-tint: #de6e26; }
.type-choice[data-type="poison"] { --choice-tint: #9459d1; }
.type-choice[data-type="ground"] { --choice-tint: #996336; }
.type-choice[data-type="flying"] { --choice-tint: #8abdee; }
.type-choice[data-type="psychic"] { --choice-tint: #eb5287; }
.type-choice[data-type="bug"] { --choice-tint: #94a82b; }
.type-choice[data-type="rock"] { --choice-tint: #a8a180; }
.type-choice[data-type="ghost"] { --choice-tint: #73528f; }
.type-choice[data-type="dragon"] { --choice-tint: #4d61db; }
.type-choice[data-type="dark"] { --choice-tint: #40383b; }
.type-choice[data-type="steel"] { --choice-tint: #78a8b8; }
.type-choice[data-type="fairy"] { --choice-tint: #eb73e8; }
.type-choice[data-type] { background: color-mix(in srgb, var(--choice-tint) 8%, var(--surface-strong)); border-color: color-mix(in srgb, var(--choice-tint) 30%, var(--surface-strong)); }
.type-choice[data-type][aria-pressed="true"] { border-color: var(--purple); background: color-mix(in srgb, var(--choice-tint) 14%, var(--surface-strong)); }
.type-choice[data-type]:hover { border-color: var(--purple); }
.type-choice { transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease; }
.type-choice:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .type-choice { transition: none; }
  .type-choice:active { transform: none; }
}
.matchup-tool button:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tool-action { border: 1px solid var(--line); background: var(--surface-strong); color: var(--purple); border-radius: 12px; padding: 10px 14px; font-weight: 700 !important; }
.side-picker { display: flex; background: var(--surface-soft); border-radius: 16px; padding: 4px; margin-bottom: 16px; }
.side-picker button { flex: 1; }
.selection-summary { color: var(--purple); font-weight: 750; margin: 0 0 18px; }
.selection-summary, .selected-role, .selected-types { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.selection-summary { column-gap: 20px; row-gap: 12px; }
.selected-types img { width: 22px; height: 22px; border-radius: 6px; }
.selection-empty { font-size: .85rem; color: var(--secondary); font-weight: 500; }
.tool-status { min-height: 1.5em; margin: 12px 0 0; font-size: .85rem; color: var(--secondary); }
.mobile-results-link { display: none; color: var(--purple); font-weight: 700; margin: -4px 0 16px; }
#results-title { scroll-margin-top: 155px; }
.result-group { margin-top: 22px; }
.result-group h3 { font-size: 1rem; margin: 0 0 10px; line-height: 1.4; }
.result-tags { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 8px; }
.type-tag { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-soft); border-radius: 10px; padding: 6px 9px 6px 6px; font-size: .88rem; }
.type-tag b { margin-left: 3px; }
.effectiveness { display: inline-flex; align-items: center; gap: 8px; }
.effect-symbol { width: 18px; height: 18px; flex: 0 0 18px; }
.effect-strong { color: #e65459; }
.effect-resisted { color: #5cb5c7; }
.effect-immune, .effect-neutral { color: var(--secondary); }
.result-tags:has(.effectiveness) { grid-template-columns: 1fr; }
.type-tag:has(.effectiveness) { display: grid; grid-template-columns: 26px minmax(65px, 1fr) auto; gap: 8px; }
.type-tag:has(.effectiveness) .effectiveness { justify-self: end; }
.type-tag .effectiveness { font-size: .82rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.result-empty { color: var(--secondary); padding: 22px 0; }
.result-neutral { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 15px; }
.result-neutral summary { cursor: pointer; color: var(--secondary); margin-bottom: 12px; }
.tool-scope { max-width: 850px; margin: 24px 0; }
.tool-download { border-top: 1px solid var(--line); padding: 28px 0 45px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tool-download h2 { font-size: 1.4rem; margin: 0 0 8px; }
.tool-download p { margin: 0; color: var(--secondary); }
.tool-download .app-store-link { flex-shrink: 0; }
@media(max-width: 720px) { .tool-download { flex-direction: column; align-items: flex-start; } }
[hidden] { display: none !important; }
@media(max-width: 800px) { .tool-layout { grid-template-columns: 1fr; } .matchups-hero { padding-top: 32px; } .mobile-results-link { display: block; } }
@media(max-width: 420px) { .tool-panel { padding: 18px 14px; } .type-choice { gap: 5px; font-size: .78rem !important; } .type-choice-content { width: 82px; gap: 5px; } .type-choice img { width: 22px; height: 22px; } .tool-download { flex-direction: column; align-items: flex-start; } }

/* Short, wide screens need less vertical chrome, not smaller tap targets. */
@media (orientation: landscape) and (max-height: 540px) {
  .site-header { position: static; }
  .nav { flex-wrap: nowrap; justify-content: space-between; min-height: 56px; padding-block: 6px; gap: 12px; }
  .nav-links { width: auto; flex-wrap: nowrap; }
  .nav-links a:not(.nav-essential) { display: none; }
  .brand-mark { width: 34px; height: 34px; }
  .matchups-hero { padding: 18px 0 16px; max-width: none; }
  .matchups-hero .eyebrow { margin: 0 0 10px; }
  .matchups-hero h1 { font-size: 2rem; margin: 0 0 10px; }
  .matchups-hero p:last-child { max-width: 760px; margin: 0; font-size: .95rem; }
  .mode-picker { margin-bottom: 16px; }
  .mode-picker button, .side-picker button { min-height: 44px; padding-block: 8px; }
  .tool-layout { gap: 16px; }
  .tool-panel { padding: 18px 14px; border-radius: 20px; }
  .tool-panel h2 { font-size: 1.2rem; }
  .tool-hint { margin-bottom: 12px; }
  .selection-summary { margin-bottom: 14px; }
  .type-choice-content { width: 82px; gap: 5px; }
  .type-choice { font-size: .78rem !important; }
  .type-choice img { width: 22px; height: 22px; }
  .result-group { margin-top: 16px; }
  #results-title { scroll-margin-top: 16px; }
  .tool-download { flex-wrap: wrap; }
}
@media (orientation: landscape) and (max-height: 540px) and (min-width: 660px) {
  .tool-layout { grid-template-columns: minmax(320px, 1.12fr) minmax(0, 1fr); }
  .mobile-results-link { display: none; }
}
/* Leave room for camera cutouts when the browser exposes safe-area insets. */
@media (orientation: landscape) and (max-height: 540px) and (max-width: 640px) {
  .nav { flex-wrap: wrap; justify-content: center; }
  .nav-links { width: 100%; justify-content: center; }
}
.matchups-hero, .matchup-tool, .tool-download { min-width: 0; }
/* A single working surface keeps the controls and their results connected. */
.matchup-workspace { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.matchup-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; }
.matchup-workspace .mode-picker { margin: 0; width: 320px; max-width: 100%; box-sizing: border-box; }
.matchup-toolbar .tool-actions { margin: 0; gap: 6px; }
.matchup-toolbar .tool-action { padding: 9px 10px; font-size: .8rem; }
.matchup-workspace > .tool-status:not(:empty) { margin: 0; padding: 0 22px 12px; }
.matchup-workspace .tool-layout { grid-template-columns: 408px minmax(0,1fr); gap: 0; align-items: stretch; border-top: 1px solid var(--line); }
.matchup-workspace .tool-panel { background: transparent; border: 0; border-radius: 0; padding: 22px; }
.matchup-workspace .tool-panel + .tool-panel { border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.matchup-workspace #results.is-empty { flex: 1; display: grid; place-items: center; min-height: 200px; }
.matchup-workspace .result-empty { text-align: center; max-width: 300px; padding: 24px 8px; }
.result-empty svg { width: 42px; height: 42px; fill: currentColor; opacity: .4; }
.result-empty p { margin: 16px 0 0; line-height: 1.6; }
.side-picker button { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 48px; }
@media (max-width: 600px) {
  .matchup-toolbar .mode-picker { width: 100%; }
  .matchup-toolbar .tool-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .matchup-toolbar .tool-action { min-height: 44px; }
}
.matchup-workspace .type-grid { grid-template-columns: repeat(3,minmax(0,116px)); }
.matchup-workspace .type-choice-content { width: 92px; }
.matchup-workspace .result-group { margin-top: 16px; }
.matchup-workspace .result-group + .result-group { border-top: 1px solid var(--line); padding-top: 14px; }
.matchup-workspace .result-tags { grid-template-columns: repeat(auto-fill,minmax(112px,124px)); }
.matchup-workspace .result-tags:has(.effectiveness) { grid-template-columns: 1fr; }
.matchup-workspace .tool-status:empty { display: none; }
#results-selection { margin: 14px 0; }
@media (max-width: 800px) {
  .matchup-workspace .tool-layout { grid-template-columns: 1fr; }
  .matchup-workspace .tool-panel + .tool-panel { border-left: 0; border-top: 1px solid var(--line); }
  .matchup-workspace .type-grid { grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 420px; }
}
@media (max-width: 420px) {
  .matchup-workspace .tool-panel { padding: 18px 14px; }
  .matchup-toolbar { padding: 12px; }
  .matchup-workspace .type-choice-content { width: 82px; }
}
@media (min-width: 801px) and (max-width: 950px), (max-width: 420px) {
  .type-tag:has(.effectiveness) { grid-template-columns: 26px minmax(0,1fr); }
  .type-tag:has(.effectiveness) .effectiveness { grid-column: 2; justify-self: start; }
}
@supports (padding: env(safe-area-inset-left)) {
  body:has(.matchup-tool) main, body:has(.matchup-tool) .nav {
    width: min(calc(100% - 36px - env(safe-area-inset-left) - env(safe-area-inset-right)), var(--page-width));
  }
}