:root{
  --bg:#f7f7f8;--surface:#fff;--surface2:#f0f1f3;--ink:#171719;--muted:#777b84;
  --line:#e4e5e8;--accent:#e31b23;--gap:8px;--card-h:132px;--radius:13px;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
.app-shell{height:100dvh;min-height:320px;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.top-area{flex:0 0 auto;padding:18px 18px 10px;border-bottom:1px solid var(--line);background:rgba(247,247,248,.97);z-index:5}
.hero{max-width:1500px;margin:0 auto 12px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.eyebrow{margin:0 0 4px;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.15em}
h1{margin:0;font-size:clamp(25px,3vw,42px);line-height:1;letter-spacing:-.04em}
.intro{margin:7px 0 0;color:var(--muted);font-size:12px}
.dex-count{min-width:76px;text-align:right;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.dex-count strong{display:block;color:var(--ink);font-size:20px;letter-spacing:-.03em}
.toolbar{max-width:1500px;margin:0 auto;display:flex;align-items:center;gap:8px}
.search-wrap{flex:0 0 min(310px,34vw);height:40px;display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.search-icon{font-size:19px;color:var(--muted)}
.search-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px}
.generation-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:1px}
.generation-filters::-webkit-scrollbar{display:none}
.filter-btn{flex:0 0 auto;height:34px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);cursor:pointer;font-size:11px;font-weight:800;color:var(--ink)}
.filter-btn.active{background:var(--ink);border-color:var(--ink);color:#fff}
.dex-scroller{position:relative;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;padding:10px 14px 18px}
.status,.empty-state{max-width:1500px;margin:0 auto;padding:42px 18px;text-align:center;color:var(--muted)}
.virtual-space{position:relative;max-width:1500px;margin:0 auto}
.virtual-rows{position:absolute;left:0;right:0;top:0;will-change:transform}
.pokemon-row{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap);height:var(--card-h);margin-bottom:var(--gap)}
.pokemon-card{position:relative;min-width:0;height:var(--card-h);padding:8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);display:grid;grid-template-rows:auto 1fr auto;cursor:pointer;text-align:left;overflow:hidden;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.pokemon-card:hover{transform:translateY(-2px);border-color:#cfd1d5;box-shadow:0 7px 22px rgba(0,0,0,.06)}
.pokemon-number{font-size:10px;font-weight:850;letter-spacing:.05em;color:#a0a3aa}
.image-stage{display:grid;place-items:center;min-height:0;position:relative}
.image-stage:before{content:"";position:absolute;width:62px;height:62px;border-radius:50%;background:linear-gradient(145deg,#f7f7f8,#eceef1)}
.pokemon-image{position:relative;z-index:1;width:72px;height:72px;object-fit:contain;image-rendering:auto;transform:translateZ(0)}
.pokemon-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:850;letter-spacing:-.01em}
.pokemon-card.skeleton .pokemon-number,.pokemon-card.skeleton .pokemon-name{color:transparent;background:#eceef1;border-radius:4px}
.pokemon-card.skeleton .pokemon-number{width:38px}.pokemon-card.skeleton .pokemon-name{width:70%;height:12px}
.pokemon-card.skeleton .image-stage:before{animation:pulse 1.2s infinite alternate}
@keyframes pulse{from{opacity:.55}to{opacity:1}}
.empty-state h2{margin:15px 0 5px;font-size:20px}.empty-state p{margin:0;font-size:13px}
.pokeball-mark{width:46px;height:46px;margin:0 auto;border:4px solid #d7d9dd;border-radius:50%;position:relative}.pokeball-mark:before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:#d7d9dd}.pokeball-mark:after{content:"";position:absolute;width:12px;height:12px;left:50%;top:50%;margin:-8px 0 0 -8px;border:4px solid #d7d9dd;border-radius:50%;background:var(--bg)}
@media(max-width:900px){.top-area{padding:12px 10px 8px}.hero{margin-bottom:9px}.intro{display:none}.toolbar{display:block}.search-wrap{width:100%;max-width:none;height:38px;margin-bottom:7px}.generation-filters{width:100%}.dex-scroller{padding:8px 8px 14px}}
@media(max-height:520px){.hero{display:none}.top-area{padding-top:8px}.search-wrap{height:35px}.filter-btn{height:31px}}

/* --- Ikas iframe stability + mobile alignment --- */
html,body{
  height:100%;
  min-height:100%;
  overflow:hidden !important;
  overscroll-behavior:none;
}
body{
  position:fixed;
  inset:0;
}
.app-shell{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
}
.dex-scroller{
  flex:1 1 0;
  height:0;
  min-height:0;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:620px){
  :root{--gap:6px;--card-h:126px;--radius:11px}
  .dex-scroller{padding:7px 7px 12px;scrollbar-gutter:auto}
  .pokemon-row{gap:var(--gap);height:var(--card-h);margin-bottom:var(--gap)}
  .pokemon-card{
    height:var(--card-h);
    padding:7px 4px 8px;
    text-align:center;
    justify-items:center;
    align-items:stretch;
    grid-template-rows:16px 1fr 18px;
  }
  .pokemon-number{
    display:block;
    width:100%;
    text-align:center;
    line-height:16px;
    font-size:9px;
  }
  .image-stage{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .image-stage:before{
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:54px;
    height:54px;
  }
  .pokemon-image{
    display:block;
    width:64px;
    height:64px;
    margin:0 auto;
    object-position:center center;
  }
  .pokemon-name{
    display:block;
    width:100%;
    max-width:100%;
    text-align:center;
    line-height:18px;
    font-size:10px;
    padding:0 1px;
  }
}

@media(max-width:390px){
  :root{--card-h:122px}
  .pokemon-card{padding-left:3px;padding-right:3px}
  .pokemon-image{width:60px;height:60px}
  .image-stage:before{width:50px;height:50px}
  .pokemon-name{font-size:9.5px}
}