@font-face{font-family:PokemonDS;src:url('./fonts/pokemon-ds.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
#pokedex-view{--paper:#fafafa;--ink:#555;--red:#ec3038;--green:#22b579;position:absolute;top:0;left:50%;transform:translateX(-50%);width:var(--dex-width);height:var(--dex-height);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;background:#101a1e;color:var(--ink);font:400 24px/1.08 PokemonDS,monospace;z-index:2}
#pokedex-view button{font:inherit;color:inherit;cursor:pointer}
#pokedex-view button:focus-visible{outline:3px solid #eeb632;outline-offset:-3px}
#pokedex-view button:hover:not(:disabled){filter:brightness(.95)}
#pokedex-view button:disabled{opacity:.45}
.dex-half{position:relative;container-type:inline-size;min-width:0;overflow:hidden;background-color:var(--paper);background-image:linear-gradient(to right,#aaa 1px,transparent 1px),linear-gradient(to bottom,#aaa 1px,transparent 1px);background-size:15.625% 10.416667%}
.dex-crop{display:block;image-rendering:pixelated;pointer-events:none}
.dex-crop[data-native-touch]{pointer-events:auto;cursor:pointer}
.dex-cover{background:#e72d2f;color:#fafafa}
.dex-spine{position:absolute;inset:0 25%;background:#242424}
.dex-cover-emblem{position:absolute;left:18%;top:30%;width:64%;height:auto}
.dex-cover-cap{position:absolute;top:0;left:25%;width:50%;height:20%;background:#242424;border-radius:0 0 50% 50%/0 0 20% 20%}
#pokedex-view .dex-title{position:absolute;left:4%;right:4%;top:9%;text-align:center;font:400 13cqw/1.1 PokemonDS,monospace;color:#ffce41;text-shadow:2px 0 #242424,-2px 0 #242424,0 2px #242424;white-space:nowrap}
.dex-counts{position:absolute;left:11%;right:4%;top:41%;display:grid;grid-template-columns:1fr 1fr;gap:12%;text-align:right;font-size:7cqw}
.dex-counts strong{display:block;border-top:3px dotted #fff;margin-top:6px;font:inherit;font-size:9cqw;padding-top:4px}
.dex-region-switch{position:absolute;left:6%;right:6%;top:80.5%;height:9%;background:#242424;display:flex;align-items:center;justify-content:center;gap:10px}
#pokedex-view .dex-region-switch button{padding:3px;border:0;background:none;color:#fff;font-size:5cqw}
#pokedex-view .dex-region-switch [aria-pressed=true]{color:#b6cbff;text-decoration:underline;text-underline-offset:5px}
.dex-section-title{position:absolute;left:0;right:0;top:0;height:5.3%;display:flex;align-items:center;padding:0 2%;background:var(--red);border-right:8px solid #961a29;border-bottom:4px solid #961a29;color:#fff;font-size:7cqw}
.dex-large{position:absolute;left:11%;top:8%;width:80%;height:auto;image-rendering:pixelated}
.dex-info-row{position:absolute;left:3%;right:3%;top:58%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3%;align-items:center}
.dex-name{background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px #bec6ce;min-width:0;font-size:6.2cqw}
.dex-name>div{padding:4% 2%;background:var(--red);color:#fff;overflow-wrap:anywhere}
.dex-name>span{display:block;text-align:right;padding:4% 3%;font-size:5.4cqw}
.dex-type{display:inline-block;margin:0 3px 4px 0;padding:2px 4px;border:3px ridge #e5eb92;background:#cbd02c;color:#252c10;font-size:5cqw}
.dex-measures{min-width:0}
.dex-measures dl{margin:0;padding:3px 4px;background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px #bec6ce;font-size:5.7cqw}
.dex-measures dl>div{display:flex;justify-content:space-between;gap:4px}
.dex-measures dl>div+div{border-top:2px dotted #a2adbb}
.dex-measures dd{margin:0;white-space:nowrap}
#pokedex-view .dex-description{position:absolute;left:2.4%;right:2%;top:78%;bottom:2%;display:flex;align-items:center;justify-content:center;text-align:center;padding:2% 4%;border:5px ridge var(--red);background:var(--paper);box-shadow:3px 3px #bec6ce;font-size:5.4cqw;line-height:1.08;white-space:pre-line;overflow:auto}
.dex-rail{position:absolute;left:0;top:0;bottom:0;width:9%;padding-top:4%;text-align:center;background:linear-gradient(to right,var(--red) 35%,#961a29 35%);border-right:3px solid #555;color:#fff;font-size:4cqw}
.dex-grid{position:absolute;left:9%;right:11%;top:1.3%;bottom:15.5%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr))}
#pokedex-view .dex-cell{position:relative;min-width:0;padding:4% 6%;border:0;border-right:1px solid #aaa;border-bottom:1px solid #aaa;border-radius:0;background:var(--paper);color:#858585;font-size:5.1cqw;display:flex;justify-content:flex-end;align-items:flex-start;line-height:1}
#pokedex-view .dex-cell[aria-pressed=true]{outline:3px solid var(--red);outline-offset:-3px;color:#555}
.dex-cell img{position:absolute;width:58%;height:auto;left:21%;bottom:1%;image-rendering:pixelated}
.dex-selected-name{position:absolute;left:16%;right:18%;bottom:11.8%;height:4.4%;background:#606060;border:3px ridge #bec6ce;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fafafa;font-size:5.4cqw}
.dex-scroll{position:absolute;right:1%;top:1.5%;bottom:10%;width:9%;display:flex;flex-direction:column;align-items:center}
#pokedex-view .dex-scroll button{font:20px/1 monospace;padding:2px;width:100%;border:0;background:none;color:#576aff;text-shadow:1px 1px #596f8b;min-height:30px}
.dex-scroll>div{position:relative;flex:1;width:28%;background:#a3b3c8;border-left:2px solid #596f8b;border-right:2px solid #596f8b}
.dex-scroll i{position:absolute;left:-48%;right:-48%;height:35%;background:#576aff;border:3px ridge #a7b7df}
.dex-controls{position:absolute;left:0;right:0;bottom:1%;height:8.4%;display:grid;grid-template-columns:1.05fr .8fr 1.55fr .95fr;gap:3px;padding:3px;background:linear-gradient(#4e59ff 0 48%,#253082 48% 100%)}
#pokedex-view .dex-controls button{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;padding:0 1px;border:0;border-radius:5px;background:linear-gradient(#fafafa 0 48%,#cbd5de 48% 57%,#99a9b7 57% 100%);color:#17232b;font-size:clamp(18px,5.4cqw,32px);white-space:nowrap;line-height:1}
#pokedex-view .dex-controls .selected{box-shadow:inset 0 0 0 3px var(--red)}
.dex-controls.cover-controls{grid-template-columns:1fr 1.25fr .95fr}
.dex-controls.area-controls{grid-template-columns:.9fr .9fr 1.05fr 1.15fr}
#pokedex-view kbd{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:18px;height:25px;padding:0 3px;margin-bottom:3px;border:1px solid #8b99a4;border-bottom:2px solid #8b99a4;border-radius:5px;background:linear-gradient(#f9fafb,#d4dce2);box-shadow:0 3px 0 #64727d,inset 0 1px 0 #f9fafb;color:#17232b;font:500 11px/1 Arial,sans-serif}
#pokedex-view .dex-enter{gap:3px;min-width:44px;justify-content:space-between}
#pokedex-view .dex-enter span{font:16px/1 Arial,sans-serif}
.dex-area .dex-section-title{background:var(--green);border-color:#4e806b}
.dex-map-fill{position:absolute;left:26%;right:2%;top:7%;bottom:2%;background:repeating-linear-gradient(#3ccb87 0 3px,#28bb78 3px 6px);border:4px ridge #4e806b;border-radius:6px}
.dex-map{position:absolute;left:27%;top:32%;width:71%;height:auto}
.dex-time-label{position:absolute;left:1%;top:7%;width:26%;padding:3% 1%;text-align:center;background:var(--paper);border:3px solid #555;border-top:5px solid var(--green);font-size:5.4cqw}
.dex-small-mon{position:absolute;left:1%;top:44%;width:26%;background:var(--paper);border:3px solid #555;text-align:center;font-size:5.2cqw}
.dex-small-mon img{display:block;width:72%;height:auto;margin:-5% auto -4%;image-rendering:pixelated}
.dex-small-mon span{display:block;padding:3% 0;border-top:2px dotted #a2adbb}
.dex-unknown{position:absolute;left:35%;right:8%;top:45%;height:5.2%;display:flex;align-items:center;justify-content:center;background:linear-gradient(to right,#22b579 0 10%,#fafafa 10% 90%,#22b579 90%);border:3px solid #4e806b;border-radius:4px;text-align:center;font-size:5cqw}
.dex-area-regions{position:absolute;left:27%;right:2%;top:1.5%;display:flex;align-items:center;gap:5px}
#pokedex-view .dex-area-regions button{flex:1;min-width:0;padding:5px 2px;border:3px ridge #bec6ce;border-radius:0;background:#fafafa;font-size:5cqw;color:#17232b}
.dex-time-picker{position:absolute;left:0;top:28%;width:26%;background:var(--paper);border:3px solid #555;padding:4% 2% 3%;text-align:center;font-size:5cqw}
.dex-time-picker>div{display:flex;justify-content:center;align-items:center;gap:4px;border-bottom:2px dotted #bec6ce;padding-bottom:8%}
#pokedex-view .dex-time-picker>button{display:block;width:74%;padding:0;margin:8px auto 0;border:0;background:none;border-radius:0}
.dex-time-picker canvas{width:100%;height:auto}
.dex-area-results{position:absolute;left:31%;right:12%;top:14%;bottom:11.5%;background:var(--paper);border:6px ridge var(--green);border-radius:4px;display:flex;align-items:center}
.dex-area-options{width:100%;height:auto}
#pokedex-view[data-page=area] .dex-scroll{top:10%}
@container(min-width:480px){#pokedex-view kbd{min-width:28px;height:32px;font-size:12px;padding:0 5px}#pokedex-view .dex-enter{min-width:64px}#pokedex-view .dex-enter span{font-size:19px}}
@container(min-width:600px){#pokedex-view kbd{min-width:32px;height:38px;font-size:14px}#pokedex-view .dex-enter{min-width:72px}}
/* Keep both halves inside the same 4:3 game stage on narrow displays too. */
@media(max-width:600px){#pokedex-view{gap:4px}#pokedex-view .dex-controls{gap:1px;padding:1px}#pokedex-view .dex-controls button{gap:1px}#pokedex-view kbd{min-width:12px;height:16px;padding:0 1px;font-size:8px}#pokedex-view .dex-enter{min-width:30px}#pokedex-view .dex-enter span{font-size:10px}.dex-info-row{top:56%}}

#pokedex-view .dex-show-all{width:100%;border:2px solid var(--red);border-radius:0;background:var(--paper);padding:5% 2%;font-size:6cqw}
#pokedex-view .dex-area-regions [aria-pressed=true]{background:#8199aa}
@container(max-width:350px){#pokedex-view .dex-controls button[data-dex-action=details]{gap:1px}#pokedex-view .dex-enter{min-width:36px;padding:0 2px;gap:1px;font-size:10px}#pokedex-view .dex-enter span{font-size:12px}}

.dex-loading{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#fafafa;color:#555}

body[data-pokedex-open="true"] #mp-names,body[data-pokedex-open="true"] #mp-chat,body[data-pokedex-open="true"] #scene-chat{visibility:hidden}