@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/outfit-400.ttf") format("truetype"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/outfit-500.ttf") format("truetype"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/outfit-700.ttf") format("truetype"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/outfit-900.ttf") format("truetype"); }

:root {
  --paper: #f0f0f0;
  --white: #ffffff;
  --black: #121212;
  --red: #d02020;
  --blue: #1040c0;
  --yellow: #f0c020;
  --muted: #e0e0e0;
  --border: 4px solid var(--black);
  --shadow-sm: 4px 4px 0 var(--black);
  --shadow-md: 6px 6px 0 var(--black);
  --shadow-lg: 8px 8px 0 var(--black);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; background: var(--paper); }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--black); background: var(--paper); font-family: "Outfit", Arial, sans-serif; font-weight: 500; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 88px;
  border-bottom: var(--border);
  background: var(--white);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 32px;
  border-right: var(--border);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-decoration: none;
}

.shape-logo { position: relative; display: block; width: 58px; height: 34px; }
.shape-logo i { position: absolute; display: block; width: 25px; height: 25px; border: 2px solid var(--black); }
.logo-circle { left: 0; top: 4px; border-radius: 50%; background: var(--red); }
.logo-square { left: 17px; top: 4px; background: var(--blue); }
.shape-logo .logo-triangle { left: 34px; top: 3px; width: 27px; height: 27px; border: 0; background: var(--yellow); clip-path: polygon(50% 0, 0 100%, 100% 100%); }

.header-actions { display: flex; align-items: stretch; }
.dex-range { display: flex; align-items: center; padding: 0 28px; border-left: var(--border); font-size: .72rem; font-weight: 700; letter-spacing: .15em; }
.help-button {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 28px;
  border: 0;
  border-left: var(--border);
  background: var(--yellow);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}
.help-button b { display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid var(--black); border-radius: 50%; background: var(--white); font-size: 1rem; box-shadow: 3px 3px 0 var(--black); }
.help-button:hover b { transform: translateY(-2px); }
.help-button:active b { transform: translate(2px, 2px); box-shadow: none; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(420px, 42%);
  min-height: 610px;
  border-bottom: var(--border);
  background: var(--white);
}

.hero-copy { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 7vw, 104px) clamp(28px, 6vw, 96px); }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow-square { width: 14px; height: 14px; background: var(--red); box-shadow: 4px 4px 0 var(--black); }
.hero h1 { margin: 0; font-size: clamp(4.6rem, 7vw, 8rem); font-weight: 900; letter-spacing: -.075em; line-height: .82; text-transform: uppercase; }
.hero h1 span { display: block; white-space: nowrap; }
.hero h1 em { color: var(--red); font-style: normal; }
.hero-bottom { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-top: 48px; padding-top: 26px; border-top: 4px solid var(--black); }
.hero-bottom p { max-width: 420px; margin: 0; font-size: 1.1rem; line-height: 1.55; }
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  padding: 15px 19px;
  border: 2px solid var(--black);
  background: var(--yellow);
  box-shadow: var(--shadow-sm);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.hero-cta span { font-size: 1.15rem; }
.hero-cta:hover { transform: translateY(-3px); }
.hero-cta:active { transform: translate(3px, 3px); box-shadow: none; }

.hero-art { position: relative; min-height: 610px; overflow: hidden; border-left: var(--border); background: var(--blue); isolation: isolate; }
.dot-pattern { position: absolute; inset: 0; z-index: -3; opacity: .18; background-image: radial-gradient(#fff 2px, transparent 2px); background-size: 22px 22px; }
.art-number { position: absolute; top: 24px; right: 28px; color: var(--white); font-size: .8rem; font-weight: 700; letter-spacing: .18em; }
.shape { position: absolute; border: 4px solid var(--black); }
.shape-red-circle { z-index: -1; top: 11%; left: 8%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: var(--red); }
.shape-yellow-square { z-index: -2; right: -12%; bottom: 4%; width: 55%; aspect-ratio: 1; background: var(--yellow); transform: rotate(45deg); }
.shape-black-bar { z-index: -1; top: 25%; right: -4%; width: 54%; height: 44px; background: var(--black); transform: rotate(-36deg); }
.shape-white-circle { z-index: -1; left: -9%; bottom: -12%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: var(--white); }
.showcase-pokemon { position: absolute; object-fit: contain; filter: drop-shadow(10px 10px 0 rgba(18,18,18,.72)); transition: transform .25s ease-out; }
.hero-art:hover .showcase-pokemon { transform: translateY(-6px); }
.showcase-pikachu { z-index: 4; left: 21%; top: 12%; width: 60%; height: 70%; }
.showcase-bulbasaur { z-index: 3; left: -6%; bottom: 5%; width: 38%; height: 40%; }
.showcase-charmander { z-index: 3; right: -4%; bottom: 1%; width: 38%; height: 43%; }
.art-caption { position: absolute; z-index: 6; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: var(--border); border-left: var(--border); background: var(--white); }
.art-caption b { font-size: 2rem; font-weight: 900; letter-spacing: -.05em; }
.art-caption span { font-size: .62rem; font-weight: 700; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }

.play-section { position: relative; padding: 78px 28px 86px; border-bottom: var(--border); background: var(--yellow); }
.section-marker { position: absolute; top: 22px; left: max(28px, calc((100% - 1240px) / 2)); display: flex; align-items: center; gap: 8px; }
.section-marker span:nth-child(1) { width: 14px; height: 14px; border-radius: 50%; background: var(--red); }
.section-marker span:nth-child(2) { width: 14px; height: 14px; background: var(--blue); }
.section-marker span:nth-child(3) { width: 0; height: 0; border-right: 8px solid transparent; border-bottom: 14px solid var(--black); border-left: 8px solid transparent; }

.game-shell { width: min(1240px, 100%); margin: 0 auto; border: var(--border); background: var(--white); box-shadow: var(--shadow-lg); }
.game-topbar { display: grid; grid-template-columns: 1fr auto; border-bottom: var(--border); background: var(--black); color: var(--white); }
.round-label { display: flex; align-items: center; gap: 20px; padding: 18px 24px; }
.round-label span { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.round-label strong { font-size: 1.8rem; font-weight: 900; line-height: 1; }
.stat-grid { display: grid; grid-template-columns: repeat(2, 130px); border-left: var(--border); color: var(--black); }
.stat-grid div { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-left: 2px solid var(--black); background: var(--yellow); }
.stat-grid div:first-child { border-left: 0; background: var(--blue); color: var(--white); }
.stat-grid b { font-size: 1.65rem; font-weight: 900; }
.stat-grid span { font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.generation-filter { display: grid; grid-template-columns: 190px minmax(0, 1fr) 125px; border-bottom: var(--border); background: var(--paper); }
.filter-title { display: flex; flex-direction: column; justify-content: center; padding: 16px 20px; background: var(--black); color: var(--white); }
.filter-title span { font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.filter-title strong { margin-top: 2px; font-size: 1.05rem; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; }
.generation-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; }
.generation-options button { min-width: 42px; height: 42px; padding: 0 10px; border: 2px solid var(--black); border-radius: 0; background: var(--white); box-shadow: 3px 3px 0 var(--black); font-size: .72rem; font-weight: 900; cursor: pointer; transition: transform .18s ease-out, box-shadow .18s ease-out, background .18s ease-out; }
.generation-options button:hover { transform: translateY(-2px); }
.generation-options button:active { transform: translate(2px, 2px); box-shadow: none; }
.generation-options button[aria-pressed="true"] { background: var(--blue); color: var(--white); }
.generation-options .generation-all { min-width: 58px; text-transform: uppercase; }
.generation-options .generation-all[aria-pressed="true"] { background: var(--yellow); color: var(--black); }
.pool-size { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: var(--border); background: var(--yellow); }
.pool-size b { font-size: 1.45rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.pool-size span { margin-top: 4px; font-size: .58rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

.guess-area { padding: 30px 28px 16px; }
.guess-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.step-number { display: grid; flex: 0 0 auto; width: 48px; height: 48px; place-items: center; border: 3px solid var(--black); background: var(--red); color: var(--white); box-shadow: var(--shadow-sm); font-size: .82rem; font-weight: 900; transform: rotate(-6deg); }
.guess-heading > div { display: flex; align-items: baseline; gap: 16px; }
.guess-heading small { font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.guess-heading h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; text-transform: uppercase; }

.guess-form { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 14px; }
.search-wrap { position: relative; }
.search-wrap input { width: 100%; height: 62px; padding: 0 20px 0 58px; border: 3px solid var(--black); border-radius: 0; outline: none; background: var(--paper); font-size: 1rem; font-weight: 700; transition: background .2s ease-out, box-shadow .2s ease-out; }
.search-wrap input:focus { background: var(--white); box-shadow: inset 6px 0 0 var(--blue); }
.search-icon { position: absolute; z-index: 2; top: 20px; left: 21px; width: 18px; height: 18px; border: 3px solid var(--black); border-radius: 50%; pointer-events: none; }
.search-icon::after { content: ""; position: absolute; right: -7px; bottom: -4px; width: 9px; height: 3px; background: var(--black); transform: rotate(45deg); }

.guess-button, .new-round-button, .dialog-primary { border: 3px solid var(--black); border-radius: 0; background: var(--red); color: var(--white); box-shadow: var(--shadow-sm); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: transform .2s ease-out, box-shadow .2s ease-out, filter .2s ease-out; }
.guess-button { padding: 0 22px; font-size: .82rem; }
.guess-button span, .new-round-button span, .dialog-primary span { display: inline-block; margin-left: 14px; font-size: 1.1rem; }
.guess-button:hover, .new-round-button:hover, .dialog-primary:hover { transform: translateY(-3px); filter: brightness(.96); }
.guess-button:active, .new-round-button:active, .dialog-primary:active { transform: translate(3px, 3px); box-shadow: none; }
.guess-button:disabled { cursor: not-allowed; filter: grayscale(1); }

.suggestions { position: absolute; z-index: 30; top: calc(100% + 7px); left: 0; width: 100%; max-height: 328px; overflow-y: auto; border: 3px solid var(--black); background: var(--white); box-shadow: var(--shadow-md); }
.suggestion { display: flex; align-items: center; width: 100%; padding: 7px 14px; border: 0; border-bottom: 2px solid var(--black); background: var(--white); text-align: left; cursor: pointer; }
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion.active { background: var(--yellow); }
.suggestion img { width: 48px; height: 48px; object-fit: contain; }
.suggestion strong { margin-left: 9px; font-weight: 900; }
.suggestion small { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.form-message { min-height: 21px; margin: 7px 2px 0; color: var(--red); font-size: .82rem; font-weight: 700; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 13px 28px; border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); background: var(--muted); font-size: .72rem; }
.legend > strong { margin-right: 6px; letter-spacing: .14em; text-transform: uppercase; }
.legend > span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border: 2px solid var(--black); border-radius: 50%; }
.legend-dot.exact { background: var(--blue); }
.legend-dot.close { background: var(--yellow); }
.legend-dot.miss { background: var(--red); }
.legend-hint { margin-left: auto; font-weight: 700; text-transform: uppercase; }

.table-wrap { overflow-x: auto; background: var(--white); }
.guess-table { width: 100%; min-width: 1220px; border-collapse: collapse; table-layout: fixed; }
.guess-table th { height: 52px; padding: 0 8px; border-right: 2px solid var(--black); border-bottom: 3px solid var(--black); background: var(--paper); font-size: .66rem; font-weight: 900; letter-spacing: .065em; text-transform: uppercase; }
.guess-table th:first-child { width: 188px; background: var(--yellow); }
.guess-table th:nth-child(5) { width: 155px; }
.guess-table th:nth-child(7) { width: 130px; }
.guess-table th:last-child { border-right: 0; }
.guess-table td { height: 104px; padding: 7px; border-right: 2px solid var(--black); border-bottom: 2px solid var(--black); text-align: center; }
.guess-table tr:last-child td { border-bottom: 0; }
.guess-table td:last-child { border-right: 0; }

.empty-row td { height: 210px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.empty-state strong { margin-top: 9px; font-size: 1.05rem; font-weight: 900; text-transform: uppercase; }
.empty-state small { font-size: .75rem; }
.empty-composition { position: relative; display: block; width: 64px; height: 52px; }
.empty-composition::before { content: ""; position: absolute; left: 0; top: 10px; width: 35px; height: 35px; border: 3px solid var(--black); border-radius: 50%; background: var(--red); }
.empty-composition i { position: absolute; right: 0; top: 0; width: 34px; height: 34px; border: 3px solid var(--black); background: var(--blue); transform: rotate(15deg); }
.empty-composition b { position: absolute; z-index: 2; right: 12px; bottom: 0; width: 0; height: 0; border-right: 15px solid transparent; border-bottom: 26px solid var(--yellow); border-left: 15px solid transparent; filter: drop-shadow(2px 2px 0 var(--black)); }

.pokemon-cell { display: flex; align-items: center; gap: 9px; text-align: left; }
.pokemon-cell img { width: 73px; height: 73px; object-fit: contain; filter: drop-shadow(5px 5px 0 rgba(18,18,18,.25)); }
.pokemon-cell strong { display: block; font-size: .9rem; font-weight: 900; line-height: 1.05; text-transform: uppercase; }
.pokemon-cell small { display: block; margin-top: 5px; font-size: .66rem; font-weight: 700; letter-spacing: .08em; }

.result-cell { position: relative; overflow: hidden; color: var(--white); font-size: .82rem; font-weight: 900; isolation: isolate; }
.result-cell::before { content: ""; position: absolute; inset: 7px; z-index: -1; border: 3px solid var(--black); background: var(--cell-color); box-shadow: 3px 3px 0 var(--black); }
.result-cell.exact { --cell-color: var(--blue); }
.result-cell.close { --cell-color: var(--yellow); color: var(--black); }
.result-cell.miss { --cell-color: var(--red); }
.result-cell.neutral { --cell-color: var(--muted); color: var(--black); }
.color-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.color-label i { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--black); border-radius: 50%; background: var(--swatch); box-shadow: 2px 2px 0 var(--black); }
.result-cell .arrow { display: block; margin-top: 2px; font-size: 1.2rem; line-height: .75; }
.result-cell .subvalue { display: block; margin-top: 3px; font-size: .64rem; opacity: .9; }

.guess-row { animation: row-in .28s ease-out both; }
.guess-row td { opacity: 0; animation: cell-in .25s ease-out forwards; }
.guess-row td:nth-child(2) { animation-delay: .04s; }
.guess-row td:nth-child(3) { animation-delay: .08s; }
.guess-row td:nth-child(4) { animation-delay: .12s; }
.guess-row td:nth-child(5) { animation-delay: .16s; }
.guess-row td:nth-child(6) { animation-delay: .2s; }
.guess-row td:nth-child(7) { animation-delay: .24s; }
.guess-row td:nth-child(8) { animation-delay: .28s; }
.guess-row td:nth-child(9) { animation-delay: .32s; }
.guess-row td:nth-child(10) { animation-delay: .36s; }
@keyframes row-in { from { transform: translateY(-8px); } }
@keyframes cell-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

.win-panel { position: relative; display: grid; grid-template-columns: 150px 1fr auto; align-items: center; min-height: 160px; overflow: hidden; border-top: var(--border); background: var(--red); color: var(--white); }
.win-panel::after { content: ""; position: absolute; top: -55px; right: 24%; width: 140px; height: 140px; border: 4px solid var(--black); border-radius: 50%; background: var(--yellow); opacity: .35; }
.win-panel[hidden] { display: none; }
.win-art { position: relative; z-index: 2; align-self: stretch; border-right: var(--border); background: var(--yellow); }
.win-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(6px 6px 0 rgba(18,18,18,.35)); }
.win-copy { position: relative; z-index: 2; padding: 22px; }
.win-kicker { font-size: .66rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.win-panel h2 { margin: 4px 0 2px; font-size: 1.8rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; text-transform: uppercase; }
.win-panel p { margin: 0; font-size: .86rem; }
.new-round-button { position: relative; z-index: 2; margin: 24px; padding: 15px 18px; background: var(--white); color: var(--black); white-space: nowrap; }

.data-band { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: var(--border); background: var(--white); }
.data-band > div { position: relative; display: flex; flex-direction: column; min-height: 190px; justify-content: center; padding: 28px 34px; border-right: var(--border); transition: transform .2s ease-out; }
.data-band > div:hover { transform: translateY(-5px); }
.data-band > div:nth-child(2) { background: var(--yellow); }
.data-band > div:nth-child(3) { background: var(--red); color: var(--white); }
.data-band > div:last-child { border-right: 0; background: var(--blue); color: var(--white); }
.data-band span { position: absolute; top: 16px; right: 18px; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.data-band b { font-size: clamp(2.2rem, 4vw, 4.2rem); font-weight: 900; letter-spacing: -.06em; line-height: .9; text-transform: uppercase; }
.data-band small { margin-top: 12px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.help-dialog { width: min(560px, calc(100% - 28px)); padding: 36px; border: 4px solid var(--black); border-radius: 0; color: var(--black); background: var(--white); box-shadow: var(--shadow-lg); }
.help-dialog::backdrop { background: rgba(18,18,18,.78); }
.dialog-close { position: absolute; top: 0; right: 0; display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-bottom: 3px solid var(--black); border-left: 3px solid var(--black); background: var(--yellow); font-size: 1.6rem; font-weight: 900; cursor: pointer; }
.dialog-shapes { position: relative; display: block; width: 96px; height: 58px; margin-bottom: 20px; }
.dialog-shapes i, .dialog-shapes b, .dialog-shapes span { position: absolute; display: block; width: 45px; height: 45px; border: 3px solid var(--black); }
.dialog-shapes i { left: 0; top: 5px; border-radius: 50%; background: var(--red); }
.dialog-shapes b { left: 30px; top: 5px; background: var(--blue); transform: rotate(12deg); }
.dialog-shapes span { left: 58px; top: 2px; border: 0; background: var(--yellow); clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.dialog-kicker { font-size: .68rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.help-dialog h2 { max-width: 440px; margin: 7px 0 16px; font-size: clamp(2.1rem, 6vw, 3.4rem); font-weight: 900; letter-spacing: -.06em; line-height: .86; text-transform: uppercase; }
.help-dialog p { line-height: 1.55; }
.help-dialog ul { display: grid; gap: 0; margin: 24px 0; padding: 0; border: 3px solid var(--black); list-style: none; }
.help-dialog li { display: flex; align-items: center; gap: 12px; padding: 13px; border-bottom: 2px solid var(--black); }
.help-dialog li:last-child { border-bottom: 0; }
.help-dialog .legend-dot { width: 17px; height: 17px; }
.dialog-note { padding-top: 16px; border-top: 3px solid var(--black); font-size: .8rem; }
.dialog-primary { width: 100%; padding: 15px; margin-top: 5px; }

footer { display: grid; grid-template-columns: 1fr minmax(280px, 2fr) 1fr; align-items: center; gap: 20px; min-height: 130px; padding: 28px 34px; background: var(--black); color: var(--white); }
.footer-brand { font-size: 1.25rem; font-weight: 900; letter-spacing: .14em; text-decoration: none; }
.footer-brand span { margin-left: 8px; color: var(--red); }
footer p { max-width: 620px; margin: 0 auto; color: #bcbcbc; font-size: .7rem; text-align: center; }
.footer-edition { justify-self: end; font-size: .64rem; font-weight: 700; letter-spacing: .13em; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { min-height: 560px; }
  .hero-art { min-height: 500px; border-top: var(--border); border-left: 0; }
  .data-band { grid-template-columns: repeat(2, 1fr); }
  .data-band > div:nth-child(2) { border-right: 0; }
  .data-band > div:nth-child(-n+2) { border-bottom: var(--border); }
}

@media (max-width: 700px) {
  :root { --border: 2px solid var(--black); --shadow-sm: 3px 3px 0 var(--black); --shadow-md: 4px 4px 0 var(--black); --shadow-lg: 5px 5px 0 var(--black); }
  .site-header { height: 70px; }
  .brand { gap: 10px; padding: 0 14px; border-right: 0; font-size: 1rem; }
  .shape-logo { width: 46px; transform: scale(.8); transform-origin: left center; }
  .dex-range, .help-button > span { display: none; }
  .help-button { padding: 0 16px; border-left: var(--border); }
  .help-button b { width: 35px; height: 35px; box-shadow: 3px 3px 0 var(--black); }
  .hero-copy { min-height: 490px; padding: 54px 20px 46px; }
  .eyebrow { margin-bottom: 24px; font-size: .63rem; letter-spacing: .12em; }
  .hero h1 { font-size: clamp(2.75rem, 13.3vw, 4.5rem); line-height: .83; }
  .hero-bottom { display: block; margin-top: 34px; padding-top: 20px; border-top-width: 3px; }
  .hero-bottom p { font-size: 1rem; }
  .hero-cta { margin-top: 24px; }
  .hero-art { min-height: 380px; }
  .showcase-pikachu { left: 18%; top: 8%; width: 65%; height: 71%; }
  .showcase-bulbasaur { left: -10%; width: 42%; }
  .showcase-charmander { right: -8%; width: 43%; }
  .art-caption { padding: 10px 12px; }
  .art-caption b { font-size: 1.5rem; }
  .play-section { padding: 62px 12px 68px; }
  .section-marker { left: 14px; top: 18px; }
  .game-topbar { grid-template-columns: 1fr; }
  .round-label { justify-content: space-between; padding: 16px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); border-top: var(--border); border-left: 0; }
  .stat-grid div { min-height: 64px; }
  .generation-filter { grid-template-columns: 1fr auto; }
  .filter-title { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; padding: 12px 14px; }
  .generation-options { gap: 7px; padding: 13px 12px; }
  .generation-options button { min-width: 38px; height: 38px; padding: 0 7px; box-shadow: 2px 2px 0 var(--black); }
  .generation-options .generation-all { min-width: 52px; }
  .pool-size { min-width: 78px; padding: 8px; }
  .pool-size b { font-size: 1.2rem; }
  .guess-area { padding: 24px 14px 12px; }
  .guess-heading { align-items: flex-start; }
  .guess-heading > div { display: block; }
  .guess-heading h2 { margin-top: 3px; }
  .guess-form { grid-template-columns: 1fr; }
  .guess-button { height: 56px; }
  .legend { gap: 12px; padding: 13px 14px; }
  .legend > strong { width: 100%; }
  .legend-hint { width: 100%; margin-left: 0; padding-top: 3px; }
  .guess-table { min-width: 1160px; }
  .empty-row td { height: 190px; }
  .win-panel { grid-template-columns: 108px 1fr; }
  .win-art { min-height: 130px; }
  .win-copy { padding: 16px; }
  .win-panel h2 { font-size: 1.25rem; }
  .new-round-button { grid-column: 1 / -1; margin: 0; border-right: 0; border-bottom: 0; border-left: 0; }
  .data-band > div { min-height: 145px; padding: 24px 18px; }
  .data-band b { font-size: 2.2rem; }
  .help-dialog { padding: 28px 20px 22px; }
  footer { grid-template-columns: 1fr; gap: 14px; padding: 30px 20px; text-align: center; }
  .footer-brand, .footer-edition { justify-self: center; }
}

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

/* Multi-mode menu and round flow */
[hidden] { display: none !important; }
.start-menu { background: var(--white); }
.menu-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 190px; border-bottom: var(--border); background: var(--black); color: var(--white); }
.menu-hero > div:first-child { display: flex; flex-direction: column; justify-content: center; padding: 34px 38px; }
.menu-kicker { font-size: .68rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.menu-hero h2 { margin: 6px 0 10px; font-size: clamp(2.4rem, 5vw, 4.7rem); font-weight: 900; letter-spacing: -.065em; line-height: .86; text-transform: uppercase; }
.menu-hero p { max-width: 580px; margin: 0; color: #d6d6d6; }
.menu-stats { display: grid; grid-template-columns: repeat(2, 145px); border-left: var(--border); color: var(--black); }
.menu-stats div { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 2px solid var(--black); background: var(--yellow); }
.menu-stats div:first-child { border-left: 0; background: var(--blue); color: var(--white); }
.menu-stats b { font-size: 3rem; font-weight: 900; line-height: 1; }
.menu-stats span { margin-top: 8px; font-size: .63rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.mode-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: var(--border); }
.mode-card { position: relative; min-height: 238px; padding: 24px 20px 20px; overflow: hidden; border: 0; border-right: 3px solid var(--black); background: var(--paper); text-align: left; cursor: pointer; isolation: isolate; transition: transform .18s ease-out, background .18s ease-out, color .18s ease-out; }
.mode-card:last-child { border-right: 0; }
.mode-card:hover { background: var(--yellow); }
.mode-card[aria-pressed="true"] { background: var(--blue); color: var(--white); }
.mode-card[aria-pressed="true"]::after { content: "AUSGEWÄHLT"; position: absolute; right: -35px; top: 22px; width: 130px; padding: 5px 0; background: var(--yellow); color: var(--black); font-size: .52rem; font-weight: 900; letter-spacing: .12em; text-align: center; transform: rotate(45deg); }
.mode-number { display: block; font-size: .62rem; font-weight: 900; letter-spacing: .14em; }
.mode-shape { position: relative; display: block; width: 48px; height: 48px; margin: 25px 0 20px; border: 3px solid var(--black); background: var(--red); box-shadow: 4px 4px 0 var(--black); }
.mode-shape.circle { border-radius: 50%; }
.mode-shape.square { background: var(--yellow); transform: rotate(10deg); }
.mode-shape.triangle { border: 0; background: var(--red); clip-path: polygon(50% 0, 0 100%, 100% 100%); filter: drop-shadow(4px 4px 0 var(--black)); box-shadow: none; }
.mode-shape.bars { border: 0; background: repeating-linear-gradient(90deg, var(--red) 0 9px, transparent 9px 15px); box-shadow: none; }
.mode-shape.custom { border-radius: 50%; background: var(--yellow); }
.mode-shape.custom::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--black); font-size: 2rem; font-style: normal; font-weight: 900; }
.mode-card[aria-pressed="true"] .mode-shape { border-color: var(--black); }
.mode-card strong { display: block; font-size: 1.35rem; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; }
.mode-card p { min-height: 43px; margin: 7px 0 15px; font-size: .77rem; line-height: 1.4; }
.mode-card small { font-size: .6rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.custom-panel { border-bottom: var(--border); background: var(--yellow); }
.custom-heading { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 3px solid var(--black); }
.custom-heading span { font-size: .62rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.custom-heading h3 { margin: 2px 0 0; font-size: 1.55rem; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; }
.custom-heading > strong { padding: 8px 11px; border: 2px solid var(--black); background: var(--white); box-shadow: 3px 3px 0 var(--black); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.custom-groups { display: grid; grid-template-columns: repeat(3, 1fr); }
.custom-groups fieldset { min-width: 0; margin: 0; padding: 18px; border: 0; border-right: 2px solid var(--black); border-bottom: 2px solid var(--black); }
.custom-groups fieldset:nth-child(3n) { border-right: 0; }
.custom-groups fieldset:nth-last-child(-n+3) { border-bottom: 0; }
.custom-groups legend { padding: 0; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.custom-groups fieldset > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.custom-groups label { position: relative; cursor: pointer; }
.custom-groups input { position: absolute; opacity: 0; pointer-events: none; }
.custom-groups label span { display: block; padding: 8px 10px; border: 2px solid var(--black); background: var(--white); box-shadow: 2px 2px 0 var(--black); font-size: .68rem; font-weight: 700; }
.custom-groups input:checked + span { background: var(--blue); color: var(--white); }
.custom-groups input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 3px; }
.custom-message { min-height: 22px; margin: 0; padding: 0 22px 14px; color: var(--red); font-size: .76rem; font-weight: 900; }
.menu-generations { background: var(--white); }
.menu-start { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 28px; background: var(--paper); }
.menu-start > div { display: flex; flex-direction: column; }
.menu-start > div span { font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.menu-start > div strong { margin-top: 3px; font-size: 1.2rem; font-weight: 900; }
.start-button, .winner-primary, .winner-secondary { padding: 17px 22px; border: 3px solid var(--black); border-radius: 0; box-shadow: var(--shadow-sm); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.start-button { min-width: 230px; background: var(--red); color: var(--white); }
.start-button span, .winner-primary span, .winner-secondary span { margin-left: 15px; font-size: 1.1rem; }
.start-button:hover, .winner-primary:hover, .winner-secondary:hover { transform: translateY(-3px); }
.start-button:active, .winner-primary:active, .winner-secondary:active { transform: translate(3px, 3px); box-shadow: none; }
.start-button:disabled { cursor: not-allowed; filter: grayscale(1); transform: none; }

.round-settings { display: grid; grid-template-columns: 1fr 1fr auto; border-bottom: var(--border); background: var(--paper); }
.round-settings > div { display: flex; flex-direction: column; justify-content: center; min-height: 70px; padding: 12px 20px; border-right: 2px solid var(--black); }
.round-settings span { font-size: .58rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.round-settings strong { margin-top: 2px; font-size: 1.05rem; font-weight: 900; text-transform: uppercase; }
.round-settings button { padding: 0 23px; border: 0; border-left: 2px solid var(--black); background: var(--yellow); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.round-settings button:hover { background: var(--red); color: var(--white); }
.legend-dot.neutral { background: var(--muted); }
.guess-table th:first-child { width: 190px; }
.guess-table th { min-width: 118px; }
.guess-table th:nth-child(5), .guess-table th:nth-child(7) { width: auto; }
.cell-value { display: block; overflow-wrap: anywhere; line-height: 1.1; }
.cell-value .roman { display: block; font-size: 1.2rem; }
.cell-value small { display: block; margin-top: 3px; font-size: .6rem; }
.guess-row.restored td { opacity: 1; animation: none; }

.winner-screen { position: relative; min-height: 700px; overflow: hidden; background: var(--blue); color: var(--white); isolation: isolate; }
.winner-pattern { position: absolute; inset: 0; z-index: -4; opacity: .18; background-image: radial-gradient(#fff 2px, transparent 2px); background-size: 24px 24px; }
.winner-circle, .winner-square, .winner-triangle { position: absolute; z-index: -2; display: block; border: 4px solid var(--black); }
.winner-circle { left: -80px; top: -90px; width: 310px; height: 310px; border-radius: 50%; background: var(--red); }
.winner-square { right: -100px; bottom: -110px; width: 330px; height: 330px; background: var(--yellow); transform: rotate(24deg); }
.winner-triangle { right: 9%; top: 8%; width: 0; height: 0; border: 0; border-right: 80px solid transparent; border-bottom: 140px solid var(--red); border-left: 80px solid transparent; filter: drop-shadow(7px 7px 0 var(--black)); transform: rotate(18deg); }
.winner-copy { position: absolute; z-index: 3; top: 40px; left: 44px; max-width: 55%; }
.winner-kicker { display: inline-block; padding: 7px 10px; border: 3px solid var(--black); background: var(--yellow); color: var(--black); box-shadow: 4px 4px 0 var(--black); font-size: .67rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.winner-copy h2 { margin: 18px 0 6px; font-size: clamp(3rem, 7vw, 6.7rem); font-weight: 900; letter-spacing: -.075em; line-height: .82; text-transform: uppercase; text-shadow: 6px 6px 0 var(--black); }
.winner-copy p { margin: 0; font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.winner-art { position: absolute; inset: 105px 15% 95px; display: grid; place-items: center; }
.winner-art img { position: relative; z-index: 2; width: min(510px, 75vw); height: min(510px, 62vh); object-fit: contain; filter: drop-shadow(14px 14px 0 rgba(18,18,18,.7)); animation: winner-in .55s cubic-bezier(.2,.8,.2,1) both; }
.winner-burst { position: absolute; width: 430px; height: 430px; border: 5px solid var(--black); border-radius: 50%; background: var(--yellow); box-shadow: 14px 14px 0 var(--black); animation: burst-in .5s ease-out both; }
.winner-actions { position: absolute; z-index: 4; right: 34px; bottom: 32px; display: flex; gap: 14px; }
.winner-primary { background: var(--red); color: var(--white); }
.winner-secondary { background: var(--white); color: var(--black); }
@keyframes winner-in { from { opacity: 0; transform: translateY(35px) scale(.82) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes burst-in { from { transform: scale(.3) rotate(-25deg); } to { transform: none; } }

.leave-dialog { width: min(520px, calc(100% - 28px)); padding: 32px; border: 4px solid var(--black); border-radius: 0; background: var(--white); box-shadow: var(--shadow-lg); }
.leave-dialog::backdrop { background: rgba(18,18,18,.78); }
.leave-dialog h2 { margin: 7px 0 10px; font-size: 2.5rem; font-weight: 900; letter-spacing: -.055em; line-height: .9; text-transform: uppercase; }
.leave-dialog > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.leave-dialog button { min-height: 52px; border: 3px solid var(--black); border-radius: 0; background: var(--paper); box-shadow: 3px 3px 0 var(--black); font-weight: 900; text-transform: uppercase; cursor: pointer; }
.leave-dialog button:last-child { background: var(--red); color: var(--white); }

@media (max-width: 1050px) {
  .mode-grid { grid-template-columns: repeat(3, 1fr); }
  .mode-card { border-bottom: 3px solid var(--black); }
  .mode-card:nth-child(3) { border-right: 0; }
  .mode-card:nth-child(n+4) { border-bottom: 0; }
  .mode-card:last-child { border-right: 3px solid var(--black); }
}

@media (max-width: 700px) {
  .menu-hero { grid-template-columns: 1fr; }
  .menu-hero > div:first-child { padding: 27px 20px; }
  .menu-hero h2 { font-size: 2.7rem; }
  .menu-stats { grid-template-columns: repeat(2, 1fr); min-height: 105px; border-top: var(--border); border-left: 0; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 170px; padding: 20px; border-right: 0 !important; border-bottom: 2px solid var(--black) !important; }
  .mode-card:last-child { border-bottom: 0 !important; }
  .mode-shape { width: 38px; height: 38px; margin: 17px 0 13px; }
  .mode-card p { min-height: 0; margin: 5px 0 10px; }
  .custom-heading { align-items: flex-start; padding: 18px 14px; }
  .custom-heading h3 { font-size: 1.2rem; }
  .custom-groups { grid-template-columns: 1fr; }
  .custom-groups fieldset { border-right: 0; border-bottom: 2px solid var(--black) !important; }
  .custom-groups fieldset:last-child { border-bottom: 0 !important; }
  .menu-start { align-items: stretch; flex-direction: column; padding: 20px 14px; }
  .start-button { min-width: 0; }
  .round-settings { grid-template-columns: 1fr 1fr; }
  .round-settings > div { padding: 10px 12px; }
  .round-settings button { grid-column: 1 / -1; min-height: 48px; border-top: 2px solid var(--black); border-left: 0; }
  .winner-screen { min-height: 660px; }
  .winner-copy { top: 25px; left: 20px; max-width: calc(100% - 40px); }
  .winner-copy h2 { margin-top: 15px; font-size: clamp(2.7rem, 14vw, 4.7rem); }
  .winner-art { inset: 150px 5% 160px; }
  .winner-art img { width: 82vw; height: 380px; }
  .winner-burst { width: 280px; height: 280px; }
  .winner-actions { right: 16px; bottom: 18px; left: 16px; flex-direction: column; }
  .winner-actions button { width: 100%; }
  .winner-circle { width: 210px; height: 210px; }
  .winner-square { width: 220px; height: 220px; }
  .leave-dialog { padding: 26px 20px; }
  .leave-dialog h2 { font-size: 2rem; }
  .leave-dialog > div { grid-template-columns: 1fr; }
}