/* Approved COSMO artwork is the actual device frame. All controls are live HTML. */
.dexNative{position:relative;isolation:isolate;width:100%;margin:0;padding:0;border:0;background:transparent;border-radius:12px;overflow:hidden}
.dexNative .dexSrOnly{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.dexStage{position:relative;container-type:inline-size;width:100%;aspect-ratio:3 / 2;isolation:isolate}
.dexPlateDesktop{display:block;width:100%;height:100%;object-fit:contain;border:0;border-radius:0;pointer-events:none;user-select:none}
.dexPlateMobile{display:none}
.dexLeftPanel,.dexRightPanel{position:absolute;inset:0;pointer-events:none}
.dexNativeScreen{position:absolute;left:12.15%;top:30.9%;width:37.15%;pointer-events:auto}
.dexNativeScreen h3{font-size:3.08cqw;line-height:1.1;letter-spacing:-.055cqw;font-weight:650;color:#f7f4ff;margin:0 0 2.16cqw;text-shadow:0 2px 15px #03051c66}
.dexNativeScreen h3>span{color:#b2e33f}
.dexNative .catalogSearchWrap{display:flex;position:relative;width:100%;min-width:0;grid-column:auto;align-items:center}
.dexNative .catalogSearchWrap>.icon{position:absolute;left:1.65cqw;width:2.3cqw;height:2.3cqw;color:#f3effb;z-index:1;pointer-events:none}
.dexNative .catalogSearchWrap input{display:block;width:100%;min-width:0!important;height:5.6cqw;min-height:44px;border:1px solid #aa8cec;border-radius:1.2cqw;padding:1.2cqw 1.4cqw 1.2cqw 5.1cqw;background:linear-gradient(145deg,#141428ed,#101021e8);box-shadow:inset 0 1px 0 #ffffff0b;color:#f2ecff;font-size:1.65cqw;line-height:1.3;letter-spacing:0}
.dexNative .catalogSearchWrap input::placeholder{font-size:1.65cqw;color:#a89ad1;opacity:1}
.dexNative .catalogSearchWrap input:focus-visible{outline:2px solid #c1eb69;outline-offset:3px;box-shadow:0 0 17px #a6ce3933}
.dexNativeFilters{display:grid;grid-template-columns:1fr 1fr;gap:1.25cqw;margin-top:2.2cqw}
.dexNativeFilters label{display:block;min-width:0}
.dexNativeFilters label>span{display:block;margin:0 0 .7cqw;font-size:1.12cqw;letter-spacing:.11cqw;line-height:1.3;color:#d2c5ee}
.dexNative .dexNativeFilters select{display:block;appearance:none;-webkit-appearance:none;width:100%;min-width:0;height:4cqw;min-height:40px;margin:0;padding:.8cqw 3cqw .8cqw 1.7cqw;border:1px solid #a287de;border-radius:.9cqw;color:#f2eafa;background-color:#121327;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23eee5fa' stroke-width='1.7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.3cqw center;background-size:.95cqw .65cqw;font-size:1.55cqw;line-height:1.3;cursor:pointer}
.dexNative .dexNativeFilters option{background:#111528;color:#f7efff}
.dexNative .dexNativeFilters select:focus-visible{outline:2px solid #c1eb69;outline-offset:3px}
.dexNativeCategories{position:absolute;left:61.4%;top:28.2%;width:28.6%;pointer-events:auto}
.dexCategoriesTitle{display:flex;align-items:center;gap:1.2cqw;margin:0 0 1.9cqw}
.dexCategoriesTitle h3{font-size:1.4cqw;font-weight:500;letter-spacing:.14cqw;line-height:1.3;color:#ccbcf4;margin:0}
.dexCategoriesTitle>span{position:relative;flex:1;height:1px;background:#af7bde;opacity:.8}
.dexCategoriesTitle>span::after{content:'';position:absolute;right:0;top:-3px;width:6px;height:6px;border:1px solid #bb90ef;border-radius:50%;background:#0b1026}
.dexNative .tabs{display:grid;grid-template-columns:1fr 1fr;gap:1.3cqw;margin:0;padding:0}
.dexNative .tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8cqw;flex:none;aspect-ratio:1.22;min-width:0;min-height:44px;width:100%;padding:1cqw .5cqw;border:1px solid #ae7eef;border-radius:1.15cqw;background:linear-gradient(130deg,#12132aef,#060d1cef);box-shadow:inset 0 0 20px #6a4fbf08;color:#bfa2ee;font-size:1.6cqw;line-height:1.3;font-weight:400;text-align:center;transition:background .16s,border-color .16s,box-shadow .16s}
.dexNative .tabs button>.dexCategoryIcon{display:block;width:4.3cqw;height:4.3cqw;max-width:none;flex-shrink:0}
.dexNative .tabs button.active{background:radial-gradient(ellipse at 50% 20%,#4563166b,#152409e8 80%);border:2px solid #e2ffb7;color:#c5f73c;box-shadow:inset 0 0 15px #baff5830,0 0 6px #d6ffb3,0 0 18px #a6e94078;font-weight:500}
.dexNative .tabs button:not(.active):hover{border-color:#d5b8ff;color:#e3d3ff;background:linear-gradient(135deg,#2b1b42ee,#10132aef);box-shadow:0 0 12px #b08be53d}
.dexNative .tabs button:focus-visible{outline:2px solid #e8ddff;outline-offset:4px}
.dexNativeReadout{position:absolute;left:20.25%;top:79.3%;width:20.8%;height:3.8%;display:flex;align-items:center;pointer-events:auto;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:1.2cqw;line-height:1;letter-spacing:.04cqw;color:#d6f74e;white-space:nowrap;text-shadow:0 0 5px #b5de1e55}
.dexPaymentNote{margin:9px 1px 0;color:#b4a6c5;font-size:11px;line-height:1.7}
/* Keep the entire open Pokédex horizontal at every viewport width. */
@media(max-width:760px){
 .dexNative{width:calc(100% + 24px);margin-left:-12px;margin-right:-12px;overflow:hidden;border-radius:8px}
 .dexStage{display:block;aspect-ratio:3 / 2}
 .dexPlateDesktop{display:block}
 .dexPlateMobile{display:none}
 .dexLeftPanel,.dexRightPanel{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;overflow:visible}
 .dexNativeScreen{left:12.15%;top:30.9%;width:37.15%}
 .dexNativeScreen h3{font-size:3.08cqw;line-height:1.1;letter-spacing:-.055cqw;margin-bottom:1.5cqw}
 .dexNative .catalogSearchWrap>.icon{left:1.6cqw;width:2.8cqw;height:2.8cqw}
 .dexNative .catalogSearchWrap input{height:7.4cqw;min-height:22px;padding:.65cqw 1.1cqw .65cqw 5.3cqw;font-size:16px;line-height:1.1;border-radius:1.2cqw}
 .dexNative .catalogSearchWrap input::placeholder{font-size:1.65cqw;letter-spacing:0}
 .dexNativeFilters{gap:1.25cqw;margin-top:1.55cqw}
 .dexNativeFilters label>span{font-size:1.35cqw;letter-spacing:.11cqw;line-height:1.3;margin-bottom:.7cqw}
 .dexNative .dexNativeFilters select{height:6.9cqw;min-height:21px;padding:.6cqw 3cqw .6cqw 1.4cqw;font-size:2.55cqw;line-height:1.1;letter-spacing:0;border-radius:.9cqw;background-position:right 1.1cqw center;background-size:1.5cqw 1cqw}
 .dexNativeCategories{left:61.4%;top:28.2%;width:28.6%}
 .dexCategoriesTitle{gap:1.2cqw;margin-bottom:1.45cqw}
 .dexCategoriesTitle h3{font-size:clamp(7px,1.8cqw,13px);letter-spacing:.1cqw;line-height:1.3}
 .dexCategoriesTitle>span::after{top:-2px;width:4px;height:4px}
 .dexNative .tabs{grid-template-columns:1fr 1fr;gap:1.2cqw}
 .dexNative .tabs button{height:11.6cqw;min-height:35px;aspect-ratio:auto;padding:.8cqw .3cqw;border-radius:1.15cqw;font-size:clamp(7px,1.8cqw,13px);gap:1cqw;line-height:1.2}
 .dexNative .tabs button>.dexCategoryIcon{width:4.3cqw;height:4.3cqw}
 .dexNative .tabs button.active{border-width:1px;box-shadow:inset 0 0 5px #baff5825,0 0 3px #d6ffb3,0 0 7px #a6e94066}
 .dexNativeReadout{left:20.25%;top:79.3%;width:20.8%;height:3.8%;font-size:1.55cqw;letter-spacing:0}
 .dexNative :is(input,select,button):focus-visible{outline-width:1px;outline-offset:2px}
 .dexPaymentNote{font-size:10px;margin-top:12px}
}