.pokedex-button{display:inline-flex;align-items:center;gap:8px;border:1px solid #e65c6a88;border-radius:7px;background:#a72c3d30;color:#ffacb4;padding:8px 11px;font-family:inherit;font-weight:700;font-size:11px;letter-spacing:1px;white-space:nowrap;margin-top:-8px;margin-bottom:-8px}.pokedex-button i{width:12px;height:16px;border:2px solid #ff8493;border-radius:3px;box-shadow:inset 0 4px #ff849344}.pokedex-button small{font-size:9px;letter-spacing:0;color:#d5b0b9}.pokedex-button:hover{background:#a72c3d60}.steps{align-items:center}
dialog.pokedex{width:min(1120px,calc(100% - 28px));max-width:1120px;max-height:calc(100dvh - 28px);padding:0;border:2px solid #781c30;border-radius:24px 24px 32px 24px;background:#c83448;color:#fce9e3;box-shadow:0 28px 100px #000a,inset 0 3px #ff9d9977,inset 0 -8px #7e1b34;overflow:auto}.pokedex::backdrop{background:#060b16db;backdrop-filter:blur(8px)}.pokedex button{margin:0;cursor:pointer}.pokedex :focus-visible{outline:3px solid #71d5ff;outline-offset:3px}.dex-hardware{display:flex;align-items:center;gap:18px;padding:22px 26px 20px;border-bottom:7px solid #88253b;box-shadow:0 2px #f96068;background:linear-gradient(110deg,#db4052,#b82e43);position:relative}.dex-lens{display:block;width:62px;height:62px;flex-shrink:0;border:5px solid #f4e4dc;border-radius:50%;background:radial-gradient(circle at 32% 26%,#efffff 0 8%,#82ecff 9% 18%,#26afd9 36%,#12608d 74%);box-shadow:0 2px 0 3px #801b33,inset 0 0 8px #034a79,0 0 20px #69e3ff33}.dex-lights{display:flex;align-self:flex-start;gap:9px;padding-top:6px}.dex-lights i{width:12px;height:12px;background:radial-gradient(circle at 30% 20%,#ffc0bc,#e74b4b 65%);border:1px solid #812132;border-radius:50%;box-shadow:0 2px #791d31}.dex-lights i:nth-child(2){background:radial-gradient(circle at 30% 20%,#fffdc1,#e9bd42 65%)}.dex-lights i:nth-child(3){background:radial-gradient(circle at 30% 20%,#c6ffb5,#55b763 65%)}.dex-brand{margin-left:10px}.dex-brand small{font-size:8px;letter-spacing:2px;color:#ffd4ce}.dex-brand h2{font-size:25px;letter-spacing:5px;margin:4px 0 0;color:#fff0dc}.dex-close{margin-left:auto!important;width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#88253b;border:1px solid #e97579;color:#ffe8df;font-size:19px}.dex-body{display:grid;grid-template-columns:minmax(0,1.08fr) 22px minmax(0,1fr);padding:24px;gap:14px}.dex-hinge{background:linear-gradient(90deg,#8d2238,#ed6271 40%,#c13c50 60%,#701c31);border:1px solid #872338;border-radius:10px;box-shadow:inset 0 22px #b33147,inset 0 -22px #a92d42}.dex-catalog{min-width:0}.dex-counter{display:flex;align-items:center;justify-content:space-between;gap:10px}.dex-counter>span{font-size:10px;letter-spacing:1.5px;font-weight:700}.dex-counter strong{font-size:28px;line-height:1.2}.dex-counter small{font-size:15px;color:#ffd3ce}.dex-catalog progress{display:block;width:100%;height:7px;margin:10px 0 17px;accent-color:#c6efb7;border-radius:5px;background:#8c243b}.dex-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-bottom:12px}.dex-tools input,.dex-tools select{width:100%;min-width:0;border:1px solid #681c30;background:#822237;color:#fff0df;border-radius:6px;font:inherit;font-size:11px;padding:11px 8px}.dex-tools input::placeholder{color:#ebc4bc}.dex-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:7px;height:480px;overflow:auto;padding:10px;border:5px solid #83273b;border-radius:12px;background:#232d32;scrollbar-color:#ab5963 #232d32;box-shadow:inset 0 3px 8px #0006}.dex-entry{display:flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative;min-width:0;min-height:100px;padding:6px 3px 8px;border:1px solid #59635b;border-radius:5px;background:#b5c7a6;color:#233b37;overflow:hidden}.dex-entry[aria-pressed=true]{border-color:#baffdb;box-shadow:inset 0 0 0 2px #2c7767;background:#d3e5bf}.dex-entry:hover{background:#d6e1c3}.dex-entry small{align-self:flex-start;font:700 9px monospace;opacity:.7;padding-left:3px}.dex-entry img{width:65px;height:58px;object-fit:contain;image-rendering:pixelated}.dex-entry.undiscovered img,.dex-silhouette img{filter:brightness(0)}.dex-entry strong{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis}.dex-shiny-mark{position:absolute;right:5px;top:4px;color:#7d5b00;font-size:11px}.dex-caption{font-size:10px!important;line-height:1.6!important;color:#ffe0d3!important;margin:12px 2px 0!important}.dex-no-results{grid-column:1/-1;color:#deebd6;font-size:12px;padding:15px;line-height:1.7}.dex-reader{min-width:0}.dex-detail{max-height:570px;overflow:auto;scrollbar-color:#f58a8c #a32b40;padding-right:5px}.dex-screen{position:relative;border:9px solid #e0dbca;border-bottom-width:23px;border-radius:12px 12px 12px 30px;background:repeating-linear-gradient(0deg,#b8cda9 0 2px,#b5caa6 2px 4px);box-shadow:0 4px #81283a,inset 0 0 15px #264a352d;color:#203e39;text-align:center;padding:12px 14px 9px}.dex-screen-heading{display:flex;justify-content:space-between;font:700 10px monospace;letter-spacing:1px}.dex-portrait{height:142px;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 80%,#3c604322,transparent 63%)}.dex-portrait img{width:155px;height:142px;object-fit:contain;image-rendering:pixelated}.dex-screen h3{font-size:23px;margin:0 0 5px;line-height:1.3}.dex-screen .types{margin:8px 0 5px}.dex-screen .type{font-size:9px}.dex-unknown{font:10px monospace!important;letter-spacing:2px;color:#365348!important;margin:8px 0!important}.dex-screen-dots{position:absolute;bottom:-18px;left:24px;color:#b73a48;font-size:8px;letter-spacing:4px}.dex-readout{margin-top:17px;padding:16px;background:#173f3e;border:3px solid #87243b;border-radius:8px;color:#d8edc5;box-shadow:inset 0 2px 6px #0004;font-family:monospace}.dex-obtained span{display:block;font-size:9px;letter-spacing:1.4px;color:#9ebdb0}.dex-obtained strong{display:block;font-size:14px;margin-top:5px}.dex-obtained small{display:block;color:#9ebdb0;font-size:9px;margin-top:4px}.dex-variant{background:#31594d;border:1px solid #86ad8e;border-radius:4px;padding:7px;color:#f0eab0;font-size:10px;margin-top:12px!important;width:100%}.dex-totals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.dex-bst{padding:10px;background:#254c45;border-radius:4px}.dex-bst span{font-size:8px;display:block;letter-spacing:1px}.dex-bst strong{font-size:27px}.dex-usage-hint{font-size:9px!important;color:#a5c4b5!important;margin:7px 0 12px!important}.dex-stats{display:grid;gap:7px}.dex-stats>div{display:grid;grid-template-columns:65px minmax(0,1fr) 27px;align-items:center;gap:8px;font-size:11px}.dex-stats b{text-align:right}.dex-stats meter{width:100%;height:9px;accent-color:#9dd49d}.dex-stats meter::-webkit-meter-bar{background:#102f31;border:0}.dex-stats meter::-webkit-meter-optimum-value{background:#a6cea1}.dex-readout h4{display:flex;justify-content:space-between;border-top:1px solid #6b918177;padding-top:15px;font-size:11px;margin:16px 0 8px;letter-spacing:1px}.dex-readout h4 small{font-size:9px;color:#9cbaa9}.dex-moves details{border-bottom:1px solid #6b918155;padding:10px 0}.dex-moves summary{display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;font-size:12px;list-style:none}.dex-moves summary:before{content:'+';color:#9fbaa2}.dex-moves details[open] summary:before{content:'−'}.dex-moves summary strong{margin-right:auto}.dex-moves summary span{font-size:9px;color:#b1cdb7}.dex-moves p{color:#d4e6cb!important;font-size:11px!important;line-height:1.6!important;margin:8px 0!important}.dex-moves small{font-size:9px;color:#a8c4b2}.dex-note{font-size:9px!important;color:#a6c0af!important;line-height:1.6!important;margin:12px 0 0!important}.dex-locked{padding:12px 0;text-align:center}.dex-locked strong{font-size:11px;letter-spacing:1px}.dex-locked p{font-size:12px!important;color:#c0d9be!important;line-height:1.7!important}.dex-locked>span{display:block;letter-spacing:10px;color:#8aaf9d}.dex-controls{display:flex;align-items:center;gap:12px;padding:17px 4px 0}.dex-controls button{width:35px;height:32px;border:1px solid #492735;border-bottom:4px solid #472334;background:#283f45;color:#e1e8d6;border-radius:5px}.dex-controls button:disabled{opacity:.45}.dex-controls>span{font-size:8px;letter-spacing:1px}.dex-speaker{width:55px;height:24px;margin-left:auto;background:repeating-linear-gradient(0deg,#792237 0 3px,transparent 3px 7px);transform:skew(-15deg)}
@media(min-width:761px) and (max-width:1100px){.steps{gap:12px;flex-wrap:wrap}.pokedex-button{font-size:10px}}
@media(max-width:760px){.pokedex-button{font-size:10px;padding:6px 8px;margin:0}.pokedex-button small{display:none}.steps{row-gap:12px}.dex-hardware{gap:10px;padding:16px}.dex-lens{width:48px;height:48px}.dex-lights{gap:5px}.dex-lights i{width:8px;height:8px}.dex-brand{margin-left:0}.dex-brand small{font-size:6px;letter-spacing:1px}.dex-brand h2{font-size:18px;letter-spacing:3px}.dex-close{width:32px;height:32px}.dex-body{padding:15px;gap:17px;grid-template-columns:minmax(0,1fr)}.dex-hinge{display:none}.dex-grid{height:260px;grid-template-columns:repeat(4,minmax(0,1fr));padding:7px;gap:5px}.dex-entry{min-height:91px}.dex-entry img{width:58px;height:50px}.dex-entry strong{font-size:9px}.dex-detail{max-height:none;padding-right:0}.dex-reader{border-top:4px solid #93283d;padding-top:20px}.dex-screen{padding-top:10px}.dex-portrait{height:125px}.dex-portrait img{height:125px}.dex-tools{grid-template-columns:minmax(0,1fr) 135px}.dex-counter strong{font-size:23px}.dex-caption{font-size:9px!important}.pokedex{overscroll-behavior:contain}}

.dex-portrait{position:relative}.dex-form-arrow{position:absolute;top:50%;transform:translateY(-50%);left:0;width:32px;height:36px;border:1px solid #5d8065;border-radius:6px;background:#476b4820;color:#294b3e;font-size:16px;box-shadow:0 2px #48614b33}.dex-form-arrow[data-form=next]{left:auto;right:0}.dex-form-arrow:hover{background:#476b4840}.dex-form-label{display:flex;align-items:center;justify-content:center;gap:12px;color:#38543c;font:700 10px monospace;letter-spacing:1px;margin:0 0 9px}.dex-form-label small{font-size:9px;opacity:.7}

/* Let the unknown-entry message wrap and grow without clipping its text. */
.dex-detail:has(.dex-locked){max-height:none;overflow:visible}
.dex-locked{display:grid;gap:12px;min-width:0;line-height:1.7;overflow-wrap:anywhere}
.dex-locked strong,.dex-locked>span{display:block;line-height:1.7}
.dex-locked p{margin:0!important}