@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --ink: #2d392f;
  --muted: #758078;
  --paper: #fbf8f1;
  --card: #fffefd;
  --line: #d8e1d8;
  --accent: #cf6b91;
  --accent-soft: #fbeaf1;
  --teal: #4f7c5b;
  --grid-gap: 16px;
  --footer-height: 82px;
  --card-height: 376px;
  --shadow: 0 10px 30px rgba(45, 70, 52, 0.10);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { width: min(1600px, 100%); min-height: 100vh; margin: 0 auto; padding: 0 28px 64px; }

/* Heading-style view switcher: the page title IS the nav. A hidden bold ghost reserves each
   option's active width so toggling weight never nudges its neighbours. */
.heading-nav { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 34px 0 20px; }
.heading-nav-sep { color: #d2d8d0; font-size: clamp(24px, 2.7vw, 40px); font-weight: 300; line-height: 1; letter-spacing: -.04em; user-select: none; }
.heading-tab { position: relative; display: inline-grid; padding: 0; border: 0; background: none; line-height: 1; cursor: pointer; }
.heading-tab > span, .heading-tab::after { grid-area: 1 / 1; font-size: clamp(24px, 2.7vw, 40px); letter-spacing: -.045em; text-align: center; white-space: nowrap; }
.heading-tab::after { content: attr(data-title); font-weight: 800; visibility: hidden; }
.heading-tab > span { color: #b3bab3; font-weight: 500; transition: color .15s ease; }
.heading-tab:hover > span { color: #737b75; }
.heading-tab.is-active > span, .heading-tab.is-active:hover > span { color: var(--ink); font-weight: 800; }
.heading-tab:focus-visible { outline: 0; }
.heading-tab:focus-visible > span { color: var(--ink); }
.icon-button { justify-self: end; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: .2s ease; }
.icon-button:hover { background: white; border-color: #a8b8aa; transform: rotate(-18deg); }
.icon-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

main { padding-top: 6px; }
.intro { display: block; }
.intro > div { width: 100%; }
h1 { margin: 0; font-size: clamp(38px, 3.8vw, 56px); line-height: 1; letter-spacing: -.055em; }
.subtitle { max-width: 650px; margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }

.controls { min-height: 76px; display: flex; align-items: center; justify-content: space-between; margin-top: 25px; padding: 12px 15px 12px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.78); box-shadow: 0 5px 24px rgba(55,64,61,.035); }
.pokemon-search { position: relative; min-width: 0; display: flex; flex: 1 1 auto; gap: 10px; }
.search-combobox { position: relative; min-width: 0; flex: 1; }
.search-field { height: 50px; display: flex; align-items: center; gap: 11px; padding: 0 15px; border: 1px solid #d3ddd4; border-radius: 10px; background: white; transition: border-color .18s ease, box-shadow .18s ease; }
.search-field:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,124,91,.11); }
.search-field svg { flex: 0 0 auto; width: 19px; fill: none; stroke: #929a97; stroke-width: 1.7; stroke-linecap: round; }
.search-field input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; line-height: 20px; }
.search-field input::placeholder { color: #929a97; }
.search-field kbd { flex: 0 0 auto; min-width: 25px; padding: 3px 6px; border: 1px solid #e0e2dd; border-radius: 5px; background: #f7f7f3; color: #909894; font-family: Manrope, sans-serif; font-size: 11px; text-align: center; }
.search-field:has(input:not(:placeholder-shown)) > svg,
.search-field:has(input:not(:placeholder-shown)) > kbd { display: none; }
.add-button { height: 50px; min-width: 128px; border: 1px solid var(--ink); border-radius: 10px; padding: 0 22px; background: var(--ink); color: white; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
.add-button:hover { border-color: #34423f; background: #34423f; }
.add-button:active { border-color: #111918; background: #111918; }
.add-button:focus-visible { outline: 3px solid rgba(79,124,91,.20); outline-offset: 2px; }
.add-button:disabled { cursor: wait; opacity: .65; }
.add-button.is-clear { border-color: #a84f70; background: #a84f70; color: white; }
.add-button.is-clear:hover { border-color: #91435f; background: #91435f; }

.suggestions { position: absolute; z-index: 30; top: calc(100% + 7px); left: 0; right: 0; overflow: hidden; max-height: 390px; overflow-y: auto; border: 1px solid #d3d7d1; border-radius: 10px; background: rgba(255,255,253,.98); box-shadow: 0 18px 42px rgba(28,41,38,.16); }
.suggestion-option { width: 100%; height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 15px; border: 0; border-bottom: 1px solid #ebece7; background: transparent; text-align: left; cursor: pointer; }
.suggestion-option:last-child { border-bottom: 0; }
.suggestion-option:hover, .suggestion-option.is-active { background: #eaf2eb; }
.suggestion-main { min-width: 0; display: flex; align-items: center; gap: 9px; }
.suggestion-name { flex: 0 1 auto; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-name strong { color: var(--teal); font-weight: 800; }
.suggestion-types { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.suggestion-types .matchup-type { padding: 3px 5px; font-size: 7.5px; }
.suggestion-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.suggestion-number { flex: 0 0 auto; color: #858e8a; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: .05em; }
.suggestion-message { padding: 16px; color: var(--muted); font-size: 12px; text-align: center; }

.search-status { position: static; flex: 0 0 auto; align-self: center; margin: 0 0 0 4px; padding: 0; color: var(--teal); font-size: 11px; font-weight: 700; white-space: nowrap; }
.search-status:empty { display: none; }
.search-status.is-error { color: #a2534b; }
.control-divider { width: 1px; height: 38px; margin: 0 24px; background: var(--line); }
.sort-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.sort-menu { position: relative; min-width: 178px; }
.sort-menu-button { width: 100%; height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 12px; border: 1px solid #d3ddd4; border-radius: 10px; background: white; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; }
.sort-menu-button:hover { border-color: #b7bdb8; background: #fafaf7; }
.sort-menu-button:focus-visible, .sort-menu.is-open .sort-menu-button { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,124,91,.11); }
.sort-menu-button span { display: flex; flex-direction: column; }
.sort-menu-button small { color: #8b9490; font-family: "DM Mono", monospace; font-size: 7px; font-weight: 500; line-height: 1; letter-spacing: .08em; }
.sort-menu-button strong { margin-top: 4px; color: var(--ink); font-size: 12px; line-height: 1; }
.sort-menu-button svg { width: 15px; fill: none; stroke: #7a8580; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.sort-menu.is-open .sort-menu-button svg { transform: rotate(180deg); }
.sort-options { position: absolute; z-index: 45; top: calc(100% + 7px); left: 0; right: 0; overflow: hidden; padding: 5px; border: 1px solid #d3ddd4; border-radius: 10px; background: rgba(255,255,253,.99); box-shadow: 0 16px 38px rgba(28,41,38,.14); }
.sort-options button { width: 100%; min-height: 36px; display: flex; align-items: center; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #4f5a56; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; }
.sort-options button:hover, .sort-options button:focus-visible { outline: 0; background: #eef3ef; color: var(--ink); }
.sort-options button[aria-selected="true"] { background: #e6f0e7; color: var(--teal); }
.sort-direction { width: 50px; height: 50px; display: grid; place-items: center; padding: 0; border: 1px solid #d3ddd4; border-radius: 10px; background: white; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.sort-direction:hover { border-color: #aeb7b2; background: #f7f8f4; }
.sort-direction svg { width: 19px; fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.sort-direction.is-ascending svg { transform: rotate(180deg); }

.board-section { margin-top: 18px; }
.pokemon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: start; gap: var(--grid-gap); }
.pokemon-card { position: relative; height: var(--card-height); min-width: 0; display: grid; grid-template-columns: 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 2px 0 rgba(35,47,44,.02); transition: box-shadow .22s ease, border-color .22s ease; }
.pokemon-card:hover { border-color: #c4d1c5; box-shadow: var(--shadow); }
.pokemon-card.is-expanded { grid-column: span 2; grid-template-columns: calc((100% - var(--grid-gap)) / 2 - 1px) minmax(0, 1fr); background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
.pokemon-card.is-expanded:hover { border-color: #c4d1c5; box-shadow: var(--shadow); }
.card-main, .card-details { min-width: 0; height: var(--card-height); overflow: hidden; border-radius: 13px; background: var(--card); }
.pokemon-card.is-expanded .card-main, .pokemon-card.is-expanded .card-details { border: 0; border-radius: 0; box-shadow: none; }
.card-main { position: relative; display: grid; grid-template-rows: 126px minmax(0, 1fr) var(--footer-height); }

.remove-button { position: absolute; z-index: 5; top: 9px; right: 9px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #6e7874; opacity: 0; cursor: pointer; transition: opacity .16s ease, color .16s ease, background-color .16s ease; }
.pokemon-card:hover .remove-button { opacity: .58; }
.remove-button:hover { color: #b45f7e; opacity: 1 !important; background: #f9eaf0; }
.remove-button:focus-visible { opacity: 1; outline: 2px solid rgba(155,90,84,.25); outline-offset: 1px; }
.remove-button svg { width: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.card-summary { position: relative; width: 100%; height: 126px; display: grid; grid-template-columns: 65px minmax(0,1fr); grid-template-rows: 18px 1fr; column-gap: 12px; padding: 16px 17px 12px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.imported-mark { position: absolute; top: 16px; right: 43px; z-index: 2; color: var(--teal); font-family: "DM Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: .12em; transition: opacity .14s ease; }
.pokemon-card.is-imported { border-color: #94b69a; box-shadow: 0 0 0 1px rgba(79,124,91,.10); }
.pokemon-card.is-imported:hover .imported-mark { opacity: 0; }
.pokemon-number { grid-column: 1 / -1; color: #8e9692; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .08em; }
.pokemon-art-wrap { position: relative; grid-column: 1; grid-row: 2; width: 65px; height: 76px; align-self: center; }
.pokemon-art-wrap.is-loading::after { content: ""; position: absolute; width: 46px; height: 46px; left: 50%; top: 50%; border-radius: 50%; background: linear-gradient(110deg, #eceee9 30%, #f7f8f4 48%, #eceee9 66%); background-size: 220% 100%; transform: translate(-50%, -50%); animation: sprite-loading 1.15s linear infinite; }
.pokemon-art { position: absolute; width: 78px; height: 78px; left: 50%; top: 50%; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 6px 5px rgba(32,45,41,.12)); transform: translate(-50%, -50%); }
@keyframes sprite-loading { to { background-position: -220% 0; } }
.pokemon-identity { grid-column: 2; grid-row: 2; min-width: 0; align-self: center; }
.name-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.name-viewport { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.name-viewport.is-overflowing { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 17px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 17px), transparent 100%); }
.pokemon-name { display: block; width: max-content; max-width: none; font-size: 17px; line-height: 1.25; letter-spacing: -.035em; white-space: nowrap; transform: translateX(0); }
.name-row:hover .name-viewport.is-overflowing .pokemon-name { animation: name-peek 4.4s both; will-change: transform; }
@keyframes name-peek {
  0%, 12% { transform: translateX(0); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  40% { transform: translateX(var(--name-shift)); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  66% { transform: translateX(0); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  100% { transform: translateX(var(--name-shift)); }
}
.eligibility-slot { flex: 0 0 auto; display: inline-flex; align-items: center; }
.eligibility-slot:empty { display: none; }
.not-allowed-mark { width: 15px; height: 15px; flex: 0 0 auto; display: inline-grid; place-items: center; color: #a7655e; opacity: .78; }
.not-allowed-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; }
.expand-icon { flex: 0 0 auto; width: 19px; fill: none; stroke: #7e8984; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.pokemon-card.is-expanded .expand-icon { transform: rotate(180deg); }
.type-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.type-pill, .matchup-type { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 4px; color: white; font-family: "DM Mono", monospace; font-size: 8px; font-weight: 500; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.imported-item-chip { width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 1px; border: 1px solid #d8e1d8; border-radius: 5px; background: #fff; cursor: pointer; }
.imported-item-chip:hover, .imported-item-chip:focus-visible { outline: 0; border-color: #9db6a1; background: #f0f5ef; }
.imported-item-chip img { width: 18px; height: 18px; object-fit: contain; image-rendering: auto; }
.is-mega-fallback { filter: grayscale(1) contrast(1.18); }

.card-stats { display: grid; align-content: center; gap: 7px; padding: 13px 18px; border-top: 1px solid #e8ede7; }
.stat-row { display: grid; grid-template-columns: 34px 29px 1fr; align-items: center; gap: 7px; }
.stat-name { color: #65716d; font-family: "DM Mono", monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .035em; }
.stat-value { color: #34413d; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; text-align: right; }
.stat-track { position: relative; height: 5px; overflow: hidden; border-radius: 4px; background: #e6e8e3; }
.stat-fill { position: absolute; inset: 0 auto 0 0; min-width: 2px; border-radius: inherit; background: var(--stat-color, var(--teal)); }
.stat-row.is-total { margin-top: 1px; padding-top: 7px; border-top: 1px solid #e0e8e0; }
.stat-row.is-total .stat-name, .stat-row.is-total .stat-value { font-weight: 600; }
.stat-row.is-total .stat-value { color: var(--ink); }
.stat-hover-detail { min-width: 0; margin: 2px 0 0; padding-top: 6px; overflow: hidden; border-top: 1px solid #e0e8e0; color: #7e8983; font-family: "DM Mono", monospace; font-size: 7.5px; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pokemon-card.is-imported .stat-row { cursor: default; }
.pokemon-card.is-imported .stat-row:hover .stat-name { color: var(--teal); }

.speed-panel { height: var(--footer-height); display: grid; grid-template-rows: 30px minmax(0, 1fr); padding: 0 17px 7px; border-top: 1px solid #e5e7e1; background: var(--card); }
.detail-label { margin: 0; color: #64706c; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; line-height: 12px; letter-spacing: .07em; }
.speed-heading { min-width: 0; height: 30px; display: flex; align-items: center; gap: 5px; color: #a1a8a4; font-size: 9px; white-space: nowrap; }
.speed-heading > strong { color: var(--ink); font-size: 10px; font-weight: 800; }
.speed-heading > span { color: #c2c7c3; }
.speed-stages { min-width: 0; display: flex; align-items: center; gap: 1px; }
.speed-stages button { min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 2px; border: 0; border-radius: 4px; background: transparent; color: #9aa29e; font-size: 8.5px; font-weight: 600; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.speed-stages button:hover { background: #f0f2ed; color: #596560; }
.speed-stages button.is-active { background: #e8efeb; color: var(--ink); font-weight: 800; }
.speed-stages button:focus-visible { outline: 2px solid rgba(79,124,91,.22); outline-offset: 1px; }
.speed-levels { align-self: start; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; }
.speed-levels > span { min-width: 0; height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 3px; padding: 0 6px; border: 1px solid #dfe2dc; border-radius: 7px; background: rgba(255,255,255,.72); }
.speed-levels small { color: #65716d; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 500; }
.speed-levels b { font-family: "DM Mono", monospace; font-size: 13px; font-weight: 500; }
.speed-levels.is-imported { grid-template-columns: minmax(0, 1fr) 3fr; }
.imported-stat-toggle { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 32px; padding: 3px; border: 1px solid #dfe2dc; border-radius: 7px; background: #f2f4ef; }
.imported-stat-toggle button { min-width: 0; border: 0; border-radius: 4px; background: transparent; color: #7f8984; font-size: 9px; font-weight: 700; cursor: pointer; }
.imported-stat-toggle button:hover { color: var(--teal); }
.imported-stat-toggle button.is-active { background: #fff; color: var(--teal); box-shadow: 0 1px 3px rgba(39,54,44,.10); }
.speed-imported-note { min-width: 0; margin: 0; align-self: center; color: #939b97; font-size: 10px; font-style: italic; }

.card-details { display: none; border-left: 1px solid #e0e8e0; }
.pokemon-card.is-expanded .card-details { display: grid; grid-template-rows: minmax(0, 1fr) var(--footer-height); }
.detail-body { min-height: 0; display: grid; grid-template-rows: 43px minmax(0, 1fr); overflow: hidden; }
.detail-tabs, .footer-tabs { display: flex; align-items: center; gap: 8px; padding: 11px 18px 7px; border-bottom: 1px solid #e8ede7; }
.footer-tabs { min-width: 0; height: 30px; padding: 0 14px; border-bottom: 0; }
.detail-tabs > span, .footer-tabs > span { color: #c2c7c3; font-size: 11px; }
.detail-tab, .footer-tab { display: inline-flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; color: #a1a8a4; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center; cursor: pointer; transition: color .16s ease; white-space: nowrap; }
/* Reserve the bold width and center the live label inside it, preventing optical drift. */
.detail-tab::after, .footer-tab::after { content: attr(data-title); height: 0; overflow: hidden; visibility: hidden; font-weight: 800; pointer-events: none; }
.footer-tab { font-size: 11px; }
.detail-tab:hover, .footer-tab:hover { color: #65716d; }
.detail-tab.is-active, .footer-tab.is-active { color: var(--ink); font-weight: 800; }
.detail-tab:focus-visible, .footer-tab:focus-visible { outline: 2px solid rgba(79,124,91,.22); outline-offset: 3px; border-radius: 2px; }

.matchups-section { min-height: 0; overflow-y: auto; padding: 2px 18px 10px; scrollbar-width: none; overscroll-behavior: contain; }
.matchups-section::-webkit-scrollbar, .moves-section::-webkit-scrollbar, .forms-list::-webkit-scrollbar, .ability-list::-webkit-scrollbar { display: none; }
.matchup-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: 18px; }
.matchup-column { min-width: 0; display: flex; flex-direction: column; }
.matchup-group { min-width: 0; padding: 8px 0 7px; border-bottom: 1px solid #e8ede7; }
.matchup-label { display: flex; align-items: center; justify-content: space-between; color: #5f6b67; font-family: "DM Mono", monospace; font-size: 10px; text-transform: uppercase; }
.matchup-label b { color: var(--ink); font-size: 10px; }
.matchup-types { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.matchup-type { padding: 4px 6px; font-size: 8.5px; }
.matchup-empty { min-height: 17px; display: flex; align-items: center; color: #aeb4b0; font-size: 10px; }

.moves-section { min-height: 0; overflow-y: auto; padding: 11px 18px 12px; scrollbar-width: none; overscroll-behavior: contain; }
.move-search { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #d9dcd6; border-radius: 7px; background: white; }
.move-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,124,91,.10); }
.move-search svg { width: 15px; flex: 0 0 auto; fill: none; stroke: #8a9490; stroke-width: 1.8; stroke-linecap: round; }
.move-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.move-search input::placeholder { color: #9ca4a0; }
.move-list { display: grid; grid-template-columns: 1fr; row-gap: 2px; margin-top: 8px; }
.move-item { min-width: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 3px; border: 0; border-bottom: 1px solid #e8ede7; background: transparent; color: #45514d; font-size: 10.5px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.move-item:hover, .move-item:focus-visible { outline: 0; background: #f0f4f1; color: var(--teal); }
.move-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.move-pp { width: 35px; flex: 0 0 35px; margin-left: auto; color: #89938d; font-family: "DM Mono", monospace; font-size: 7.5px; font-weight: 500; text-align: right; white-space: nowrap; }
.move-category { width: 16px; height: 16px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 4px; color: white; }
.move-category svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.move-category.is-physical { background: #bd655d; }
.move-category.is-physical svg path { fill: currentColor; stroke: none; }
.move-category.is-physical svg circle { fill: #bd655d; stroke: none; }
.move-category.is-special { background: #5e8295; }
.move-category.is-status { background: #7d8781; }
.move-category.is-status svg circle:not([r="6"]) { fill: currentColor; stroke: none; }
.move-list.is-moveset { grid-template-columns: 1fr; gap: 5px; }
.move-list.is-moveset .move-item { padding: 6px 7px; border: 1px solid #e1e6df; border-radius: 6px; background: rgba(255,255,255,.64); }
.move-list.is-moveset .move-item:hover { border-color: #b9c9bb; background: #f0f5f1; }
.move-item-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; }
.move-empty { grid-column: 1 / -1; margin: 18px 0; color: #929a96; font-size: 11px; text-align: center; }

.detail-footer { min-width: 0; height: var(--footer-height); display: grid; grid-template-rows: 30px minmax(0, 1fr); overflow: hidden; border-top: 1px solid #e0e8e0; background: var(--card); }
.footer-panel { min-width: 0; overflow: hidden; padding: 0 14px 7px; }
.ability-list, .forms-list { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.ability-chip, .form-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 9px; border: 1px solid #dfe1dc; border-radius: 7px; background: white; color: #45514d; font-size: 10px; font-weight: 650; white-space: nowrap; }
.ability-chip { cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease; }
.ability-chip:hover, .ability-chip:focus-visible { outline: 0; border-color: #aebfb6; background: #f0f5f1; color: var(--teal); }
.ability-chip.is-hidden::after { content: "HIDDEN"; padding: 2px 4px; border-radius: 3px; background: var(--accent-soft); color: var(--accent); font-family: "DM Mono", monospace; font-size: 6px; letter-spacing: .04em; }
.form-chip.is-current { border-color: #b8cbc2; background: #edf4ef; color: var(--teal); }
.form-chip { cursor: pointer; transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; }
.form-chip:hover:not(:disabled) { border-color: #aebfb6; background: #f0f5f1; color: var(--teal); }
.form-chip:focus-visible { outline: 2px solid rgba(79,124,91,.22); outline-offset: 1px; }
.form-chip:disabled { cursor: default; opacity: 1; }
.footer-empty { color: #aeb4b0; font-size: 10px; }

.info-popover { position: fixed; z-index: 100; width: min(310px, calc(100vw - 20px)); padding: 14px; border: 1px solid #cdd9ce; border-radius: 11px; background: rgba(255,255,252,.985); box-shadow: 0 16px 44px rgba(27,39,35,.18); color: var(--ink); }
.info-popover header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.info-popover header strong { font-size: 14px; letter-spacing: -.02em; }
.info-popover header span { color: #7e8984; font-family: "DM Mono", monospace; font-size: 8px; text-transform: uppercase; }
.info-kind { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.info-kind .info-type { padding: 4px 6px; border-radius: 4px; color: white; font-size: 7px; line-height: 1; }
/* The generic `header span` colour above also lands on the category icon span; keep its glyph white. */
.info-popover header span.move-category { color: #fff; }
.info-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 11px 0 0; }
.info-metrics > div { padding: 7px 8px; border: 1px solid #e0e3de; border-radius: 6px; background: #fafbf8; }
.info-metrics dt { color: #89928e; font-family: "DM Mono", monospace; font-size: 7px; letter-spacing: .05em; }
.info-metrics dd { margin: 3px 0 0; font-family: "DM Mono", monospace; font-size: 13px; font-weight: 600; }
.info-description { margin: 11px 0 0; color: #53605b; font-size: 11px; line-height: 1.55; }
.info-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.info-tags span { padding: 4px 6px; border-radius: 5px; background: #edf2ee; color: #5f6e67; font-size: 8px; font-weight: 700; }
.info-loading { margin: 0; color: #7c8782; font-size: 11px; }

.empty-state { padding: 80px 20px; border: 1px dashed #c8d5c9; border-radius: 14px; text-align: center; }
.empty-ball { position: relative; width: 42px; height: 42px; display: block; margin: 0 auto 17px; overflow: hidden; border: 2px solid #9ca5a0; border-radius: 50%; opacity: .65; }
.empty-ball::before { content: ""; position: absolute; inset: 18px 0 auto; border-top: 2px solid #9ca5a0; }
.empty-state h2 { margin: 0; font-size: 19px; }
.empty-state p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }

/* Card-shaped "add another" placeholder shown at the end of each grid (and as the empty state). */
.add-card { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; width: 100%; border: 1px dashed #c6d3c7; border-radius: 14px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 650; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.add-card:hover { border-color: #a6c0aa; background: rgba(79,124,91,.055); color: var(--teal); }
.add-card-ball { position: relative; width: 42px; height: 42px; flex: 0 0 auto; border: 2px solid #9ca5a0; border-radius: 50%; opacity: .7; transition: border-color .16s ease, opacity .16s ease; }
.add-card:hover .add-card-ball { border-color: var(--teal); opacity: 1; }
.add-card-ball::before, .add-card-ball::after { content: ""; position: absolute; left: 50%; top: 50%; background: #9ca5a0; transition: background-color .16s ease, opacity .16s ease; }
.add-card-ball::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.add-card-ball::after { width: 2px; height: 16px; transform: translate(-50%, -50%); opacity: 0; }
.add-card:hover .add-card-ball::before, .add-card:hover .add-card-ball::after { background: var(--teal); }
.add-card:hover .add-card-ball::after { opacity: 1; }
.add-card.is-notes { height: var(--card-height); }
/* Builder cards share a grid row, so stretch to match the neighbouring card's height. */
.add-card.is-builder { align-self: stretch; min-height: 300px; }
.add-card.is-lab { min-height: 316px; }

/* Slightly enlarge the whole Team Builder on desktop, keeping proportions (dropdowns/popups included). */
.builder-view { zoom: 1.08; }
.info-popover.is-scaled { zoom: 1.08; }
.builder-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.builder-intro > div:first-child { min-width: 0; width: auto; flex: 1 1 auto; }
.builder-intro .subtitle { max-width: 690px; }
.builder-teambar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.team-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.team-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border: 1px solid #d6dad3; border-radius: 9px; background: rgba(255,255,255,.7); color: #4f5a56; font-size: 12px; font-weight: 650; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.team-chip:hover { border-color: #b6bdb6; background: #fff; }
.team-chip.is-active { border-color: var(--teal); background: rgba(255,255,255,.7); color: var(--teal); }
.team-chip.is-active:hover { background: #eaf2ee; }
.team-chip-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-chip-format { color: #909991; font-weight: 550; }
.team-chip.is-active .team-chip-format { color: rgba(79,124,91,.64); }
.team-chip-remove { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: #97a09b; }
.team-chip-remove:hover { background: #f2ddd9; color: #a4564e; }
.team-chip-remove svg { width: 9px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.team-chip-add { padding: 0 12px 0 9px; gap: 5px; color: #7a847f; font-weight: 650; }
.team-chip-add svg { width: 13px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.team-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-format-toggle { flex: 0 0 auto; }
.team-tools .handoff-button { height: 34px; padding: 0 14px; }
.builder-toolbar { min-height: 76px; display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.78); box-shadow: 0 5px 24px rgba(55,64,61,.035); }
.builder-toolbar .handoff-button { height: 50px; }
.builder-pokemon-search { position: relative; min-width: 0; display: flex; align-items: center; flex: 1 1 auto; gap: 10px; }
.builder-pokemon-search .search-combobox { flex: 1; }
.builder-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; width: 172px; }
.handoff-button { height: 50px; flex: 0 0 auto; padding: 0 20px; border: 1px solid var(--teal); border-radius: 10px; background: var(--teal); color: white; font-size: 11px; font-weight: 750; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.builder-actions .handoff-button { width: 100%; height: 36px; padding: 0 16px; }
.handoff-button:hover { border-color: #3e684a; background: #3e684a; }
.handoff-button:disabled { cursor: default; opacity: .42; }
.handoff-button.is-secondary { border-color: #cad7cc; background: #fff; color: var(--teal); }
.handoff-button.is-secondary:hover { border-color: var(--teal); background: #eef4f0; }

.team-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.team-modal[hidden] { display: none; }
.team-modal-backdrop { position: absolute; inset: 0; background: rgba(26,36,33,.34); }
.team-modal-card { position: relative; width: min(560px, 100%); max-height: 86vh; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: 0 24px 60px rgba(24,35,32,.28); overflow: hidden; }
.team-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #e8ede7; }
.team-modal-head h2 { margin: 0; font-size: 15px; font-weight: 800; }
.team-modal-close { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #7b857f; cursor: pointer; }
.team-modal-close:hover { background: #f0f2ed; color: var(--ink); }
.team-modal-close svg { width: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.team-modal-body { min-height: 0; overflow-y: auto; padding: 16px 18px 18px; }
.team-modal-hint { margin: 0 0 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.team-modal-textarea { width: 100%; min-height: 250px; resize: vertical; padding: 12px; border: 1px solid #d4d8d2; border-radius: 10px; background: #fbfcfa; color: var(--ink); font-family: "DM Mono", monospace; font-size: 12px; line-height: 1.55; white-space: pre; overflow-wrap: normal; }
.team-modal-textarea:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,124,91,.11); }
.team-modal-code { width: 100%; padding: 14px 16px; border: 1px solid #d4d8d2; border-radius: 10px; background: #fbfcfa; color: var(--ink); font-family: "DM Mono", monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-align: center; user-select: all; -webkit-user-select: all; }
.team-modal-code:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,124,91,.11); }
.team-modal-error { margin: 10px 0 0; color: var(--accent); font-size: 11px; font-weight: 650; min-height: 14px; }
.team-modal-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.team-modal-actions { display: flex; gap: 8px; }
.team-settings-form { display: grid; gap: 16px; }
.team-settings-field { display: grid; gap: 7px; }
.team-settings-field > span { color: #7c8780; font-family: "DM Mono", monospace; font-size: 8px; font-weight: 600; letter-spacing: .08em; }
.team-settings-field > p { margin: -2px 0 2px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.team-settings-field > input { width: 100%; height: 40px; padding: 0 11px; border: 1px solid #d4ddd3; border-radius: 8px; outline: 0; background: #fff; color: var(--ink); font-size: 12px; font-weight: 650; }
.team-settings-field > input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,124,91,.11); }
.team-settings-form .team-modal-actions { justify-content: flex-end; padding-top: 2px; }
.confirm-copy { margin: 0; color: var(--ink); font-size: 12px; line-height: 1.55; }
.confirm-hint { margin: 8px 0 18px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.modal-button.is-danger { border-color: #a64f6f; background: #a64f6f; color: #fff; }
.modal-button.is-danger:hover { border-color: #8e405d; background: #8e405d; }
.format-toggle { display: inline-flex; gap: 3px; padding: 3px; border: 1px solid #d6e0d7; border-radius: 9px; background: #f3f5f1; }
.format-toggle button { padding: 6px 14px; border: 0; border-radius: 6px; background: transparent; color: #5c6763; font-size: 11px; font-weight: 700; cursor: pointer; }
.format-toggle button.is-active { background: #fff; color: var(--teal); box-shadow: 0 1px 3px rgba(40,50,47,.12); }
.modal-button { height: 38px; padding: 0 18px; border: 1px solid var(--teal); border-radius: 9px; background: var(--teal); color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color .15s ease; }
.modal-button:hover { background: #3e684a; }
.modal-button.is-ghost { border-color: #cad7cc; background: #fff; color: #4f5a56; }
.modal-button.is-ghost:hover { background: #f0f2ed; }
.builder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; margin-top: 18px; }
.builder-card { position: relative; z-index: 1; min-width: 0; overflow: visible; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 3px 14px rgba(34,45,43,.045); transition: border-color .18s ease, box-shadow .18s ease; }
.builder-card:hover { border-color: #c8cdc6; box-shadow: var(--shadow); }
.builder-card:has(.builder-picker.is-open) { z-index: 20; }
.builder-card-header { position: relative; min-height: 96px; display: grid; grid-template-columns: minmax(238px,1fr) minmax(260px,1.14fr); align-items: center; gap: 0; padding: 12px 0; border-bottom: 1px solid #e7e9e3; border-radius: 0; background: transparent; }
.builder-identity-group { min-width: 0; display: flex; align-items: center; gap: 5px; padding: 0 5px 0 11px; }
.builder-slot { position: absolute; top: 8px; left: 9px; color: #a1a9a5; font-family: "DM Mono", monospace; font-size: 7px; letter-spacing: .07em; }
.builder-art-wrap { position: relative; width: 48px; height: 62px; overflow: hidden; }
.builder-art { position: absolute; width: 46px; height: 46px; left: 50%; top: 50%; object-fit: contain; filter: drop-shadow(0 5px 4px rgba(32,45,41,.1)); transform: translate(-50%, -50%); }
.builder-identity { min-width: 0; }
.builder-identity small { display: block; max-width: 126px; overflow: hidden; color: #919995; font-family: "DM Mono", monospace; font-size: 7px; letter-spacing: .06em; text-overflow: clip; white-space: nowrap; }
.builder-name-row { display: flex; align-items: center; gap: 5px; }
.builder-name-editor { width: max-content; max-width: 236px; height: 23px; display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; border-radius: 5px; }
.builder-name-editor.is-genderless { max-width: 236px; }
/* Species shown inline after a nickname, same font but unbolded: "Abcd (Garchomp)". */
.builder-name-species { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--muted); font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -.03em; white-space: nowrap; text-overflow: ellipsis; }
.builder-name-species:empty { display: none; }
.builder-name-input { width: var(--identity-name-width, 64px); max-width: 154px; height: 22px; overflow: hidden; padding: 0; border: 0; border-radius: 5px; outline: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 800; line-height: 22px; letter-spacing: -.03em; text-overflow: clip; white-space: nowrap; cursor: text; transition: box-shadow .15s ease, background-color .15s ease; }
.builder-name-editor.is-genderless .builder-name-input { max-width: 178px; }
.builder-name-editor:hover .builder-name-input, .builder-name-editor.is-editing .builder-name-input { background: #fff; box-shadow: 0 0 0 1px #cbd8cd; }
.builder-name-editor.is-editing .builder-name-input:focus { box-shadow: 0 0 0 1px var(--teal), 0 0 0 3px rgba(79,124,91,.10); }
.builder-gender-button { width: 17px; height: 20px; flex: 0 0 17px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; font-family: "DM Mono", monospace; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer; }
.builder-gender-button.is-male { color: #668eaa; }
.builder-gender-button.is-female { color: var(--accent); }
.builder-edit-pencil { display: none; width: 13px; height: 13px; fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.builder-name-editor:hover:not(.is-editing) .builder-gender-symbol { display: none; }
.builder-name-editor:hover:not(.is-editing) .builder-edit-pencil { display: block; }
.builder-name-editor.is-editing .builder-gender-button:hover { background: var(--accent-soft); }
.builder-identity .type-list { margin-top: 6px; }
.builder-remove { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8c9691; opacity: .35; cursor: pointer; }
.builder-remove:hover { background: #f9eaf0; color: #b45f7e; opacity: 1; }
.builder-remove svg { width: 10px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.builder-header-loadout { min-width: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 0 14px; }
.builder-picker { position: relative; min-width: 0; }
.builder-picker-label { display: block; height: 18px; margin-bottom: 3px; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .01em; line-height: 18px; }
.builder-picker-label:empty { display: none; }
.builder-picker-control { position: relative; height: 32px; display: flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid #d5dfd6; border-radius: 7px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.builder-picker-control:hover { border-color: #b8c0ba; }
.builder-picker.is-open .builder-picker-control { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,124,91,.10); }
.builder-picker-control input { min-width: 0; width: 0; flex: 1 1 auto; overflow: hidden; padding: 0; border: 0; outline: 0; background: transparent; color: #34413d; font-size: 9.5px; font-weight: 650; line-height: 20px; text-overflow: clip; white-space: nowrap; }
.builder-picker-control input::placeholder { color: #969f9a; font-weight: 550; }
.builder-picker-control input::-webkit-search-cancel-button { display: none; }
.builder-picker-control > svg { width: 13px; flex: 0 0 auto; fill: none; stroke: #7a8580; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.builder-picker.is-open .builder-picker-control > svg { transform: rotate(180deg); }
.builder-picker-leading { flex: 0 0 auto; display: inline-flex; align-items: center; }
.builder-picker-leading:empty { display: none; }
.builder-picker-leading img { width: 21px; height: 21px; object-fit: contain; }
.builder-picker-selected-meta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; }
.builder-picker-selected-meta:not(:empty) { margin-left: auto; }
.builder-picker-selected-meta:empty { display: none; }
.builder-picker-selected-meta .matchup-type { padding: 3px 4px; font-size: 6px; }
.builder-picker-selected-meta .move-category { width: 14px; height: 14px; border-radius: 3px; }
.builder-picker-selected-meta .move-category svg { width: 10px; height: 10px; }
.builder-picker-selected-meta .move-pp { width: 32px; flex-basis: 32px; font-size: 6.5px; }
.builder-picker-panel { position: absolute; z-index: 80; top: calc(100% + 6px); left: 0; width: max(100%, 220px); overflow: hidden; border: 1px solid #cdd9ce; border-radius: 9px; background: rgba(255,255,253,.995); box-shadow: 0 16px 38px rgba(28,41,38,.16); }
.builder-picker.is-item .builder-picker-panel { left: auto; right: 0; width: min(320px, calc(100vw - 44px)); }
.builder-picker.is-nature .builder-picker-panel { left: 50%; right: auto; transform: translateX(-50%); width: min(318px, calc(100vw - 44px)); }
.builder-picker-list { max-height: 240px; overflow-y: auto; padding: 5px; scrollbar-width: thin; scrollbar-color: #c9cec9 transparent; }
.builder-picker-option { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: #45514d; font-size: 10px; text-align: left; cursor: pointer; }
.builder-picker-option:hover, .builder-picker-option:focus-visible, .builder-picker-option.is-keyboard-active { outline: 0; background: #eaf2eb; color: var(--teal); }
.builder-picker-option.is-selected { background: #e6f0e7; color: var(--teal); }
.builder-picker-option.picker-clear { min-height: 29px; color: #9a645d; font-size: 10px; font-weight: 700; }
.builder-picker-option strong { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.builder-picker-option small { margin-left: auto; color: #929b97; font-family: "DM Mono", monospace; font-size: 7px; text-transform: uppercase; }
.builder-picker-option img { width: 25px; height: 25px; flex: 0 0 auto; object-fit: contain; image-rendering: auto; }
.builder-picker.is-item .builder-picker-option { justify-content: flex-start; }
.builder-picker.is-move .builder-picker-panel { width: 100%; min-width: 250px; }
/* No in-panel search bar for moves, so pull the first option snug under the category divider. */
.builder-picker.is-move .builder-picker-list { padding-top: 2px; }
.builder-picker.is-move .builder-picker-option { min-height: 31px; padding-block: 4px; }
.builder-picker.is-move .builder-picker-option .matchup-type { margin-left: 0; padding: 3px 5px; font-size: 6px; }
.builder-picker.is-move .builder-picker-option .move-pp { width: 36px; flex-basis: 36px; font-size: 7px; }
.builder-picker.is-move .builder-picker-option .move-category { width: 14px; height: 14px; border-radius: 3px; }
.builder-picker.is-move .builder-picker-option .move-category svg { width: 10px; height: 10px; }
/* Move pickers are search fields; drop the chevron so a selected move's type + symbol sit flush right. */
.builder-picker.is-move .builder-picker-control > svg { display: none; }
/* Keep the category glyph white when a move row/option is hovered. */
.move-item:hover .move-category, .builder-picker-option:hover .move-category, .builder-picker-option.is-keyboard-active .move-category { color: #fff; }
.item-categories { display: flex; align-items: center; gap: 3px; overflow-x: auto; padding: 6px 6px 5px; border-bottom: 1px solid #e7e9e4; scrollbar-width: none; }
.item-categories::-webkit-scrollbar { display: none; }
.item-categories button { flex: 0 0 auto; padding: 5px 7px; border: 0; border-radius: 5px; background: transparent; color: #8a938f; font-size: 8px; font-weight: 700; text-transform: capitalize; cursor: pointer; }
.item-categories button:hover { background: #f0f3ef; color: #53615b; }
.item-categories button.is-active { background: #e6f0e7; color: var(--teal); }
.item-panel-search { height: 34px; display: flex; align-items: center; gap: 7px; margin: 6px; padding: 0 9px; border: 1px solid #d6e0d7; border-radius: 7px; background: white; }
.item-panel-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(79,124,91,.10); }
.item-panel-search svg { width: 14px; flex: 0 0 auto; fill: none; stroke: #8a9490; stroke-width: 1.7; stroke-linecap: round; }
.item-panel-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10px; }
.mega-swap { width: 20px; height: 20px; flex: 0 0 auto; display: grid; place-items: center; margin-left: 2px; padding: 0; border: 1px solid #d6ddd8; border-radius: 5px; background: #f5f7f4; color: var(--teal); cursor: pointer; }
.mega-swap:hover, .mega-swap.is-active { border-color: #a9c6ae; background: #e6f1e7; }
.mega-swap svg { width: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* gap:0 keeps the two heading rules as single continuous lines. */
.nature-grid { display: grid; grid-template-columns: 28px repeat(5,minmax(0,1fr)); grid-template-rows: 24px; grid-auto-rows: minmax(29px, auto); gap: 0; padding: 8px; max-height: min(74vh, 520px); overflow-y: auto; scrollbar-width: thin; }
.nature-grid .nature-option { min-width: 0; min-height: 29px; justify-content: center; margin: 0; padding: 4px 2px; border-radius: 0; font-size: 8.5px; font-weight: 650; text-align: center; }
.nature-axis, .nature-axis-corner { min-width: 0; display: grid; place-items: center; color: #8a9490; font-family: "DM Mono", monospace; font-size: 7.4px; font-weight: 600; line-height: 1; }
/* Heading lines: one continuous rule under the top (−) row and beside the left (+) column. */
.nature-axis.is-negative, .nature-axis-corner { border-bottom: 1px solid #cad7cc; }
.nature-axis.is-positive, .nature-axis-corner { border-right: 1px solid #cad7cc; }
.nature-axis.is-positive { padding-right: 4px; color: #5f916b; }
.nature-axis.is-negative { color: #c16d8c; }
.nature-axis-corner { color: #a4aaa7; font-size: 6.5px; }
.picker-empty { margin: 18px 8px; color: #929b97; font-size: 10px; text-align: center; }
.builder-columns { min-width: 0; display: grid; grid-template-columns: minmax(280px,1.35fr) minmax(210px,1fr); border-radius: 0; background: transparent; }
.builder-column { min-width: 0; padding: 13px 14px 14px; border-right: 1px solid #e8e9e4; border-radius: 0; background: transparent; }
.builder-column:last-child { border-right: 0; }
.builder-section-heading { height: 18px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.builder-section-heading h2 { margin: 0; color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .01em; }
.builder-sp-total { color: var(--teal); font-family: "DM Mono", monospace; font-size: 9px; font-weight: 600; }
.builder-column:not(.builder-moves-column) .builder-section-heading { margin-bottom: 7px; }
.builder-stats-column { position: relative; }
.builder-stat-row { min-width: 0; display: grid; grid-template-columns: 31px minmax(60px,1fr) 31px minmax(58px,88px); align-items: center; gap: 6px; min-height: 24px; }
.builder-stat-name { padding-left: 3px; color: #5c6763; font-family: "DM Mono", monospace; font-size: 9px; font-weight: 650; }
.builder-stat-row input[type="range"] { min-width: 0; width: 100%; height: 12px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.builder-stat-row input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: #d6e1d7; }
.builder-stat-row input[type="range"]::-webkit-slider-thumb { width: 9px; height: 9px; margin-top: -3px; appearance: none; border: 0; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 1px rgba(79,124,91,.10); }
.builder-stat-row input[type="range"]::-moz-range-track { height: 3px; border-radius: 3px; background: #d6e1d7; }
.builder-stat-row input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: var(--teal); }
.builder-sp-input { width: 31px; height: 20px; padding: 0 3px; border: 1px solid transparent; border-radius: 5px; outline: 0; background: transparent; color: #65716d; font-family: "DM Mono", monospace; font-size: 10px; font-weight: 550; line-height: 18px; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.builder-sp-input:hover { border-color: #d5dfd6; background: #fff; }
.builder-sp-input:focus { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 2px rgba(79,124,91,.10); }
.has-spread-error .builder-sp-input { border-color: var(--accent); background: #fffafb; box-shadow: 0 0 0 2px rgba(207,107,145,.13); }
.builder-final-stat { width: clamp(30px, var(--final-stat-width, 34%), 100%); max-width: 100%; height: 16px; display: flex; align-items: center; justify-self: start; overflow: hidden; padding: 0 5px; border-radius: 4px; color: var(--card); font-family: "DM Mono", monospace; font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: left; text-shadow: 0 1px 1px rgba(35,47,40,.16); transition: width .16s ease, background-color .16s ease; }
.stat-spread-error { position: absolute; z-index: 75; left: 50%; top: 31px; width: min(220px, calc(100% - 22px)); min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #d995ad; border-radius: 10px; background: #fff9fb; box-shadow: 0 10px 24px rgba(112,53,76,.14); color: #87455f; font-size: 9.5px; font-weight: 650; line-height: 1.35; transform: translate(-50%, -100%); }
.stat-spread-error::after { content: ""; position: absolute; width: 11px; height: 11px; left: 50%; bottom: -6px; border-right: 1px solid #d995ad; border-bottom: 1px solid #d995ad; border-radius: 0 0 3px 0; background: #fff9fb; transform: translateX(-50%) rotate(45deg); }
.stat-spread-error-icon { position: relative; z-index: 1; width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 800; }
.stat-spread-error-text { position: relative; z-index: 1; }
.meta-lookup-btn { padding: 0; border: 0; background: none; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .01em; cursor: pointer; }
.meta-lookup-btn::after { content: ""; display: block; height: 1px; margin-top: 1px; background: currentColor; opacity: .45; }
.meta-lookup-btn:hover { color: #3e684a; }
.meta-popup { position: fixed; z-index: 90; min-width: 232px; overflow: hidden; border: 1px solid #cdd9ce; border-radius: 9px; background: #fffffd; box-shadow: 0 14px 34px rgba(28,41,38,.16); }
.meta-popup[hidden] { display: none; }
.meta-popup-message { margin: 0; padding: 12px 14px; color: #929b97; font-size: 10px; text-align: center; }
.meta-spread-popup { padding: 5px; }
.meta-spread-row { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr) 52px; align-items: center; gap: 4px; padding: 6px 10px; border: 0; border-radius: 5px; background: transparent; color: #45514d; font-family: "DM Mono", monospace; font-size: 11px; text-align: center; cursor: pointer; }
/* border-radius:0 keeps the header underline straight instead of curling at the corners. */
.meta-spread-row.is-head { margin-bottom: 3px; padding-bottom: 7px; border-bottom: 1px solid #e2e5e0; border-radius: 0; color: #99a29d; font-size: 8px; text-transform: uppercase; letter-spacing: .04em; cursor: default; }
.meta-spread-row:not(.is-head):hover { background: #eaf2eb; color: var(--teal); }
.meta-spread-row .meta-pct { color: var(--teal); font-weight: 600; text-align: right; }
.meta-spread-row.is-head .meta-pct { color: #99a29d; font-weight: 500; }
.meta-spread-zero { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #cbd1cc; vertical-align: middle; }
/* Usage percentages inside option lists (ability, popular items, meta moves). */
.option-usage { flex: 0 0 auto; margin-left: auto; padding-left: 6px; color: var(--teal); font-family: "DM Mono", monospace; font-size: 9px; font-weight: 600; }
.builder-picker-list.is-meta-moves .builder-picker-option .matchup-type { margin-left: 8px; }
.builder-picker-list.is-meta-moves .builder-picker-option .option-usage { margin-left: auto; }
.builder-picker-option.is-chosen { background: #eef2ec; }
.builder-picker-option.is-chosen strong { color: #939c97; }
.builder-picker-option.is-chosen::after { content: "✓"; flex: 0 0 auto; margin-left: 6px; color: var(--teal); font-size: 9px; font-weight: 700; }
/* Nature usage ranking below the grid. */
.nature-rank { grid-column: 1 / -1; margin-top: 12px; padding-top: 9px; border-top: 1px solid #e7e9e4; display: flex; flex-direction: column; gap: 2px; }
.nature-rank-head { padding: 0 8px 6px; color: #7f8985; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.nature-rank-row { display: grid; grid-template-columns: 1fr 82px 40px; align-items: center; gap: 6px; padding: 6px 8px; border: 0; border-radius: 5px; background: transparent; color: #45514d; font-size: 10px; text-align: left; cursor: pointer; }
.nature-rank-row:hover, .nature-rank-row.is-peer-hover { background: #eaf2eb; color: var(--teal); }
.nature-rank-row.is-selected { background: #e6f0e7; color: var(--teal); }
.nature-rank-name { font-weight: 650; }
.nature-rank-effect { color: #8a938f; font-family: "DM Mono", monospace; font-size: 8.5px; text-align: center; }
.nature-rank-pct { color: var(--teal); font-family: "DM Mono", monospace; font-size: 9.5px; font-weight: 600; text-align: right; }
.nature-option.is-peer-hover { background: #eaf2eb; color: var(--teal); box-shadow: none; }
.builder-move-row { padding: 0; }
.builder-move-row + .builder-move-row { margin-top: 6px; }
.builder-move-row .builder-picker-control { height: 31px; }
.builder-empty { margin-top: 18px; padding: 80px 20px; border: 1px dashed #c8d5c9; border-radius: 14px; text-align: center; }
.builder-empty h2 { margin: 0; font-size: 19px; }
.builder-empty p { margin: 7px 0 0; color: var(--muted); font-size: 12px; }

@media (max-width: 820px) {
  .app-shell { padding-inline: 20px; }
  .topbar { height: auto; min-height: 68px; grid-template-columns: 1fr auto; }
  .view-tabs { grid-column: 1 / -1; grid-row: 2; justify-content: center; height: 44px; order: 3; }
  main { padding-top: 30px; }
  .controls { align-items: stretch; flex-direction: column; }
  .pokemon-search { width: 100%; max-width: none; flex-basis: auto; }
  .control-divider { width: 100%; height: 1px; margin: 14px 0; }
  .sort-tools { justify-content: flex-end; }
  .pokemon-card.is-expanded { grid-column: span 2; }
  .builder-intro { align-items: flex-start; }
  .builder-toolbar { align-items: stretch; flex-direction: column; }
  .builder-pokemon-search { width: 100%; }
  .handoff-button { width: 100%; }
  .builder-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1120px) {
  .builder-grid { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  :root { --card-height: 390px; }
  .app-shell { padding-inline: 14px; }
  .intro { align-items: flex-start; flex-direction: column; }
  .pokemon-search { flex-direction: column; }
  .search-status { align-self: flex-start; margin: 0 2px; }
  .sort-tools { width: 100%; }
  .sort-menu { flex: 1; }
  .pokemon-grid { grid-template-columns: 1fr; }
  .pokemon-card.is-expanded { height: auto; grid-column: span 1; grid-template-columns: 1fr; }
  .pokemon-card.is-expanded .card-details { height: auto; min-height: var(--card-height); }
  .card-details { border-top: 1px solid #e0e8e0; border-left: 0; }
  .matchup-list { grid-template-columns: 1fr; }
  .builder-intro { flex-direction: column; }
  .builder-card-header { grid-template-columns: 1fr; }
  .builder-header-loadout { grid-column: 1 / -1; width: 100%; }
  .builder-columns { grid-template-columns: 1fr; }
  .builder-column { border-right: 0; border-bottom: 1px solid #e8e9e4; }
  .builder-column:last-child { border-bottom: 0; }
  /* The nature grid is too wide to hang off a picker on narrow screens, so centre it as a popup. */
  .builder-picker.is-nature .builder-picker-panel { position: fixed; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); width: min(318px, calc(100vw - 28px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}