* { margin:0; padding:0; box-sizing:border-box; }
/* фирменный небесный: градиент как на главной (sky #A6CAF0 -> soft #e8f2fc) */
html { background:#e8f2fc; }
body { font-family:'Nunito',system-ui,sans-serif; color:#1E3955; -webkit-font-smoothing:antialiased; overflow-x:hidden;
    background:linear-gradient(180deg,#a6caf0 0%,#cbe0f6 340px,#e8f2fc 720px); min-height:100vh; }
a { color:#2b6dff; text-decoration:none; }
a:hover { color:#1b4cd6; }
::selection { background:#cfe3ff; }
@keyframes floatY { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@keyframes blobDrift1 { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(70px,44px) scale(1.14); } }
@keyframes blobDrift2 { 0%,100% { transform:translate(0,0) scale(1.06); } 50% { transform:translate(-80px,56px) scale(.94); } }
@keyframes twinkle { 0%,100% { opacity:0; transform:scale(.4); } 50% { opacity:.85; transform:scale(1); } }
@keyframes fadeUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
@keyframes veilIn { from { opacity:0; } to { opacity:1; } }
@keyframes ballWobble { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-16deg); } 75% { transform:rotate(16deg); } }
/* лоадер перехода (из макета): вуаль с качающимся покеболом при навигации по дексу */
.loadveil { position:fixed; inset:0; z-index:80; background:rgba(232,242,252,.72); backdrop-filter:blur(10px);
    display:none; align-items:center; justify-content:center; flex-direction:column; gap:18px; animation:veilIn .25s ease both; }
.loadveil.on { display:flex; }
.loadveil .ball { width:74px; height:74px; border-radius:50%;
    background:linear-gradient(180deg,#6db3f2 0%,#2b6dff 46%,#2c3550 46%,#2c3550 54%,#fff 54%);
    box-shadow:0 18px 40px rgba(44,53,80,.25), inset 0 0 0 4px rgba(44,53,80,.9); position:relative;
    animation:ballWobble .9s ease-in-out infinite; }
.loadveil .ball::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:22px; height:22px; border-radius:50%; background:#fff;
    box-shadow:inset 0 0 0 5px #2c3550, 0 0 0 4px #fff, 0 0 22px 4px rgba(120,170,255,.9); }
.loadveil .lbl { font-size:13px; font-weight:900; letter-spacing:2.4px; color:#7c8bad; text-transform:uppercase; }
@keyframes popIn { from { opacity:0; transform:scale(.94) translateY(16px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes artInA { from { opacity:0; transform:scale(.9) rotate(-4deg); filter:blur(18px); } to { opacity:1; transform:scale(1) rotate(0deg); filter:blur(0) drop-shadow(0 30px 40px rgba(38,55,100,.22)); } }
@keyframes artInB { from { opacity:0; transform:scale(.9) rotate(4deg); filter:blur(18px); } to { opacity:1; transform:scale(1) rotate(0deg); filter:blur(0) drop-shadow(0 30px 40px rgba(38,55,100,.22)); } }
.bgfx { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.bgfx .b1 { position:absolute; top:-180px; left:-140px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, var(--accent-faint) 0%, rgba(255,255,255,0) 68%); animation:blobDrift1 26s ease-in-out infinite; }
.bgfx .b2 { position:absolute; top:30%; right:-220px; width:760px; height:760px; border-radius:50%; background:radial-gradient(circle, rgba(148,187,255,.16) 0%, rgba(255,255,255,0) 66%); animation:blobDrift2 34s ease-in-out infinite; }
.bgfx .tw { position:absolute; width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px rgba(160,196,255,.8); animation:twinkle 8s ease-in-out infinite; }
.page { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; padding:0 30px 90px; }
.page > * { width:100%; max-width:1240px; }
header.site { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:26px 2px 8px; animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both; }
.brand { display:flex; align-items:center; gap:13px; color:inherit; }
/* покебол в фирменном голубом верхе */
.pokeball { width:42px; height:42px; border-radius:50%; background:linear-gradient(180deg,#6db3f2 0%,#2b6dff 46%,#2c3550 46%,#2c3550 54%,#fff 54%); box-shadow:0 8px 20px rgba(44,53,80,.22), inset 0 0 0 3px rgba(44,53,80,.9); position:relative; animation:floatY 7s ease-in-out infinite; flex:0 0 auto; }
.pokeball::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 3.5px #2c3550, 0 0 0 3px #fff, 0 0 14px 2px rgba(120,170,255,.7); }
.brand b { font-family:'Baloo 2',sans-serif; font-size:27px; font-weight:800; color:#1f2a44; line-height:1; display:block; }
.brand small { font-size:11.5px; font-weight:800; letter-spacing:2.6px; color:#93a3c2; text-transform:uppercase; margin-top:3px; display:block; }
.hdr-right { display:flex; gap:10px; align-items:center; }
.searchbtn { display:flex; align-items:center; gap:10px; padding:11px 16px; border:1px solid rgba(150,170,210,.35); border-radius:999px; background:rgba(255,255,255,.65); backdrop-filter:blur(14px); cursor:pointer; box-shadow:0 10px 28px rgba(38,55,100,.08); color:#6a7ba0; font:700 14px 'Nunito',sans-serif; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.searchbtn:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 16px 36px rgba(38,55,100,.14); }
.searchbtn .key { font-size:11px; font-weight:800; color:#9aa9c8; border:1px solid rgba(150,170,210,.4); border-radius:7px; padding:2px 7px; background:rgba(255,255,255,.7); }
.playbtn { padding:11px 22px; border-radius:999px; background:linear-gradient(135deg,#3b7dd8,#2a5fae); color:#fff !important; font-weight:800; font-size:14px; box-shadow:0 10px 24px rgba(59,125,216,.35); transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.playbtn:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 16px 34px rgba(59,125,216,.45); }
.pnav { display:flex; align-items:center; justify-content:space-between; margin:12px 0 20px; animation:fadeUp .7s .08s cubic-bezier(.22,1,.36,1) both; }
.pnav a { display:flex; align-items:center; gap:9px; padding:10px 17px; border-radius:999px; background:rgba(255,255,255,.72); backdrop-filter:blur(12px); box-shadow:0 8px 22px rgba(38,55,100,.09); font-size:14px; font-weight:800; color:#4e5f85; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.pnav a:hover { box-shadow:0 14px 30px rgba(38,55,100,.15); transform:translateY(-2px); }
main { display:flex; flex-direction:column; gap:26px; }
.card { border-radius:28px; background:rgba(255,255,255,.66); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.85); box-shadow:0 22px 55px rgba(38,55,100,.09); padding:26px 28px; transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 32px 70px rgba(38,55,100,.13); }
.card h2 { font-family:'Baloo 2',sans-serif; font-size:21px; font-weight:800; color:#1f2a44; margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:26px; animation:fadeUp .8s .1s cubic-bezier(.22,1,.36,1) both; }
.sp4 { grid-column:span 4; } .sp5 { grid-column:span 5; } .sp7 { grid-column:span 7; } .sp8 { grid-column:span 8; } .sp12 { grid-column:span 12; }
/* hero */
.hero { display:grid; grid-template-columns:minmax(320px,1.02fr) 1fr; gap:30px; border-radius:34px; background:rgba(255,255,255,.66); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.85); box-shadow:0 30px 70px rgba(38,55,100,.1), inset 0 1px 0 rgba(255,255,255,.9); padding:36px; overflow:hidden; animation:fadeUp .8s .12s cubic-bezier(.22,1,.36,1) both; }
.hero-art { position:relative; min-height:400px; display:flex; align-items:center; justify-content:center; border-radius:26px; background:linear-gradient(165deg,rgba(255,255,255,.5),rgba(240,246,255,.25)); overflow:hidden; }
.hero-art .glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, var(--accent-soft) 0%, rgba(255,255,255,0) 68%); filter:blur(6px); }
/* левитация на обёртке, вход (scale+rotate+blur, как в макете) - на самой картинке */
.hero-art .artwrap { position:relative; width:min(360px,62vw); height:min(360px,62vw); animation:floatY 6.5s ease-in-out infinite; }
.hero-art img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 30px 40px rgba(38,55,100,.22)); animation:artInA .9s cubic-bezier(.22,1,.36,1) both; }
.hero-art img.flipb { animation-name:artInB; }
/* фолбэк на старые jpg с белой подложкой: multiply вместо тени (drop-shadow рисовал бы прямоугольник;
   multiply требует отсутствия transform-изоляции - поэтому floatY живёт на .artwrap) */
.hero-art img.jpgfall { mix-blend-mode:multiply; filter:none; animation:none; }
/* канвас амбиент-частиц типа (рисует dex.js) */
.hero-art canvas.fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-art .shadow { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); width:46%; height:26px; border-radius:50%; background:radial-gradient(ellipse, rgba(38,55,100,.14) 0%, rgba(255,255,255,0) 70%); }
.shinybtn { position:absolute; top:14px; right:14px; display:flex; align-items:center; gap:8px; padding:9px 15px; border:1px solid rgba(150,170,210,.4); border-radius:999px; background:rgba(255,255,255,.8); color:#6a7ba0; font:800 13px 'Nunito',sans-serif; cursor:pointer; backdrop-filter:blur(10px); box-shadow:0 8px 20px rgba(38,55,100,.1); transition:all .3s ease; }
.shinybtn.on { background:linear-gradient(135deg,#ffe9a8,#ffd45e); color:#7a5b00; border-color:#f0c94a; }
.hero-info { display:flex; flex-direction:column; justify-content:center; gap:17px; min-width:0; }
.dexno { display:flex; align-items:baseline; gap:14px; }
.dexno b { font-family:'Baloo 2',sans-serif; font-size:19px; font-weight:800; color:#9aa9c8; letter-spacing:1px; }
.dexno span { font-size:13px; font-weight:800; color:#b0bdd8; text-transform:uppercase; letter-spacing:1.8px; }
.dexno .lgnd { color:#c9a227; }
h1 { font-family:'Baloo 2',sans-serif; font-size:clamp(40px,4.6vw,60px); font-weight:800; line-height:1; color:#1f2a44; letter-spacing:-.5px; }
.types { display:flex; gap:10px; flex-wrap:wrap; }
.tp { display:inline-flex; align-items:center; gap:7px; padding:7px 16px; border-radius:999px; color:#fff; font-size:13.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; }
.tp i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.85); }
.tps { display:inline-block; padding:4px 11px; border-radius:999px; color:#fff; font-size:12px; font-weight:800; }
.flavor { font-size:16px; line-height:1.65; font-weight:600; color:#5a6a8f; max-width:46ch; }
.seclbl { font-size:11.5px; font-weight:900; letter-spacing:2.2px; color:#9aa9c8; text-transform:uppercase; margin-bottom:9px; }
.abils { display:flex; gap:10px; flex-wrap:wrap; }
/* кнопки форм (Обычная/Мега...) */
.fbtns { display:flex; gap:8px; flex-wrap:wrap; }
.fbtn { padding:8px 16px; border:1px solid rgba(150,170,210,.4); border-radius:999px; background:rgba(255,255,255,.8); color:#4e5f85; font:800 13px 'Nunito',sans-serif; cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .35s ease, color .35s ease, border-color .35s ease; }
.fbtn:hover { transform:translateY(-2px); }
.fbtn.on { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 8px 18px var(--accent-glow); }
.ab { display:flex; align-items:center; gap:9px; padding:9px 16px; border-radius:16px; background:rgba(255,255,255,.8); border:1px solid rgba(150,170,210,.3); font-size:14px; font-weight:800; color:#3c4c72; cursor:pointer; box-shadow:0 6px 16px rgba(38,55,100,.06); transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.ab:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(38,55,100,.13); }
.ab .hid { font-size:10.5px; font-weight:900; letter-spacing:1px; text-transform:uppercase; color:#b06fc4; background:rgba(196,130,220,.14); border-radius:999px; padding:3px 9px; }
/* stats */
.stat-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; }
.stat-head h2 { margin:0; }
.stat-head .tot { font-size:14px; font-weight:800; color:#9aa9c8; }
.stat-head .tot b { color:#3c4c72; font-size:17px; }
.strow { display:grid; grid-template-columns:96px 40px 1fr; align-items:center; gap:14px; margin-bottom:13px; }
.strow .lb { font-size:12.5px; font-weight:900; letter-spacing:.6px; color:#7c8bad; text-transform:uppercase; }
.strow .vl { font-family:'Baloo 2',sans-serif; font-size:17px; font-weight:800; color:#2b3a5c; text-align:right; }
.strow .track { height:11px; border-radius:999px; background:rgba(150,170,210,.18); overflow:hidden; }
.strow .fill { height:100%; border-radius:999px; }
.radar-wrap { display:flex; align-items:center; justify-content:center; }
.radar-wrap svg { width:100%; max-width:330px; overflow:visible; }
/* profile mini-cards */
.mini { border-radius:18px; background:rgba(255,255,255,.7); border:1px solid rgba(150,170,210,.25); padding:13px 15px; }
.mini .k { font-size:11px; font-weight:900; letter-spacing:1px; color:#9aa9c8; text-transform:uppercase; }
.mini .v { font-family:'Baloo 2',sans-serif; font-size:24px; font-weight:800; color:#2b3a5c; margin-top:2px; }
.mini .v small { font-size:14px; color:#9aa9c8; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kv { display:flex; justify-content:space-between; align-items:baseline; border-top:1px dashed rgba(150,170,210,.35); padding-top:13px; margin-top:14px; }
.kv .k { font-size:13px; font-weight:900; letter-spacing:.6px; color:#7c8bad; text-transform:uppercase; }
.kv .v { font-size:15px; font-weight:800; color:#2b3a5c; }
.gender { display:flex; height:12px; border-radius:999px; overflow:hidden; background:rgba(150,170,210,.18); margin-top:8px; }
.gender .m { background:linear-gradient(90deg,#5aa2e8,#7cbcf5); }
.gender .f { background:linear-gradient(90deg,#f58cb4,#f8aec9); }
.gender-lbl { display:flex; justify-content:space-between; font-size:13px; font-weight:800; margin-top:5px; }
.gender-lbl .m { color:#4a90d8; } .gender-lbl .f { color:#e8709e; }
/* effectiveness */
.effrow { display:flex; align-items:flex-start; gap:10px; margin-bottom:9px; flex-wrap:wrap; }
.effk { min-width:48px; text-align:center; font-family:'Baloo 2',sans-serif; font-weight:800; border-radius:10px; padding:3px 8px; color:#fff; font-size:14px; }
/* evolution */
.evo { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.evo-arrow { display:flex; align-items:center; padding:0 6px; }
.evo-stage { display:flex; flex-direction:column; gap:12px; }
.evo-node { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 18px 12px; border:2px solid rgba(150,170,210,.25); border-radius:22px; background:rgba(255,255,255,.75); box-shadow:0 8px 22px rgba(38,55,100,.07); transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease; }
.evo-node:hover { transform:translateY(-5px) scale(1.03); box-shadow:0 18px 38px rgba(38,55,100,.14); }
.evo-node.cur { border-color:var(--accent); background:var(--accent-tint); }
.evo-node img { width:76px; height:76px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(0 8px 12px rgba(38,55,100,.16)); }
.evo-node .nm { font-size:14.5px; font-weight:800; color:#2b3a5c; }
.evo-node .cond { font-size:11.5px; font-weight:800; color:var(--accent-dark); background:var(--accent-tint); border-radius:999px; padding:3px 10px; max-width:170px; text-align:center; }
.noevo { text-align:center; font-size:15px; font-weight:700; color:#9aa9c8; padding:14px 0; }
/* locations */
.locs { display:flex; gap:9px; flex-wrap:wrap; }
.loc { display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid rgba(150,170,210,.3); font-size:13px; font-weight:800; color:#4e5f85; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.loc i { font-style:normal; font-size:11.5px; font-weight:700; color:#9aa9c8; }
.loc:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(38,55,100,.1); }
.nolocs { font-size:14.5px; font-weight:700; color:#9aa9c8; line-height:1.6; }
/* learnset */
.mv-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.mv-head h2 { margin:0; }
.mv-tabs { display:flex; gap:6px; background:rgba(150,170,210,.14); border-radius:999px; padding:4px; flex-wrap:wrap; }
.mv-tabs button { padding:7px 15px; border:none; border-radius:999px; background:transparent; color:#6a7ba0; font:800 13px 'Nunito',sans-serif; cursor:pointer; transition:background .3s ease, color .3s ease; }
.mv-tabs button.on { background:#fff; color:#2b3a5c; box-shadow:0 4px 12px rgba(38,55,100,.12); }
.mv-tabs button i { font-style:normal; opacity:.55; font-size:11.5px; }
.mv-pane { max-height:320px; overflow-y:auto; padding:2px; display:none; }
.mv-pane.on { display:block; }
.mv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:9px; }
.mv { display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:14px; background:rgba(255,255,255,.75); border:1px solid rgba(150,170,210,.25); transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease; cursor:pointer; }
.mv:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(38,55,100,.1); }
/* кликабельный попап описания (атаки/абилки): висит, пока не закроют крестиком или повторным кликом */
.popover { position:absolute; z-index:60; max-width:340px; min-width:220px; border-radius:18px; background:rgba(255,255,255,.97);
    border:1px solid rgba(150,170,210,.4); box-shadow:0 24px 60px rgba(30,45,90,.25); padding:14px 34px 13px 16px; animation:popIn .25s cubic-bezier(.22,1,.36,1) both; }
.popover .pt { font-family:'Baloo 2',sans-serif; font-size:16px; font-weight:800; color:#1f2a44; margin-bottom:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.popover .pm { font-size:12px; font-weight:800; color:#7c8bad; margin-bottom:6px; }
.popover .pd { font-size:13.5px; font-weight:600; line-height:1.5; color:#3c4c72; }
.popover .pclose { position:absolute; top:8px; right:8px; width:26px; height:26px; border:none; border-radius:50%; background:rgba(150,170,210,.16); color:#6a7ba0; font-size:14px; font-weight:800; cursor:pointer; }
.mv .lv { font-size:10.5px; font-weight:900; color:var(--accent-dark); background:var(--accent-tint); border-radius:8px; padding:3px 7px; white-space:nowrap; }
.mv .dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.mv .nm { font-size:13.5px; font-weight:800; color:#3c4c72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mv-none { font-size:14.5px; font-weight:700; color:#9aa9c8; padding:10px 0; }
/* CTA */
.cta { border-radius:28px; padding:30px; text-align:center; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); box-shadow:0 22px 55px var(--accent-glow); }
.cta b { font-family:'Baloo 2',sans-serif; font-size:24px; font-weight:800; display:block; margin-bottom:6px; }
.cta p { font-weight:700; opacity:.92; margin-bottom:16px; }
.cta a { display:inline-block; padding:12px 34px; border-radius:999px; background:#fff; color:#2b3a5c; font-weight:900; font-size:15px; box-shadow:0 12px 28px rgba(0,0,0,.18); transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.cta a:hover { transform:translateY(-3px) scale(1.04); color:#1f2a44; }
footer { margin-top:40px; text-align:center; font-size:12.5px; font-weight:700; color:#b0bdd8; }
footer a { color:#9aa9c8; }
/* search overlay */
.sov { position:fixed; inset:0; z-index:50; display:none; align-items:flex-start; justify-content:center; padding:7vh 24px 24px; background:rgba(235,241,250,.55); backdrop-filter:blur(18px); animation:veilIn .25s ease both; }
.sov.on { display:flex; }
.sbox { width:100%; max-width:980px; max-height:86vh; display:flex; flex-direction:column; border-radius:30px; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.95); box-shadow:0 40px 100px rgba(30,45,90,.22); overflow:hidden; animation:popIn .4s cubic-bezier(.22,1,.36,1) both; }
.sbox .shead { padding:22px 24px 14px; display:flex; flex-direction:column; gap:12px; border-bottom:1px solid rgba(150,170,210,.22); }
.sbox input { flex:1; border:none; outline:none; background:transparent; font:800 19px 'Nunito',sans-serif; color:#25304a; }
.srow { display:flex; align-items:center; gap:13px; }
.sclose { width:34px; height:34px; border:none; border-radius:50%; background:rgba(150,170,210,.16); color:#6a7ba0; font-size:16px; font-weight:800; cursor:pointer; }
.chips { display:flex; gap:7px; flex-wrap:wrap; }
.chip { padding:6px 13px; border:1px solid rgba(150,170,210,.35); border-radius:999px; background:rgba(255,255,255,.7); color:#4e5f85; font:800 12.5px 'Nunito',sans-serif; cursor:pointer; transition:all .25s ease; }
.chip.on { background:#3b7dd8; border-color:#3b7dd8; color:#fff; }
.sres { flex:1; overflow-y:auto; padding:20px 24px 24px; }
.sres .sum { font-size:12px; font-weight:800; color:#9aa9c8; margin-bottom:12px; }
.sgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.scard { display:flex; flex-direction:column; align-items:center; gap:5px; padding:15px 10px 12px; border:1px solid rgba(150,170,210,.25); border-radius:20px; background:rgba(255,255,255,.8); transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.scard:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 16px 32px rgba(38,55,100,.13); }
.scard img { width:64px; height:64px; object-fit:contain; image-rendering:pixelated; }
.scard .no { font-size:11px; font-weight:900; color:#b0bdd8; letter-spacing:.8px; }
.scard .nm { font-size:13.5px; font-weight:800; color:#2b3a5c; text-align:center; }
/* dex index page */
.gen-title { font-family:'Baloo 2',sans-serif; font-size:23px; font-weight:800; color:#1f2a44; margin:26px 0 14px; }
/* mobile */
@media (max-width:900px) {
    .page { padding:0 12px 60px; }
    .hero { grid-template-columns:1fr; padding:22px; gap:16px; }
    .hero-art { min-height:280px; }
    .hero-info { gap:13px; }
    .sp4, .sp5, .sp7, .sp8 { grid-column:span 12; }
    .grid { gap:16px; }
    main { gap:16px; }
    .card { padding:20px 16px; border-radius:22px; }
    header.site { flex-wrap:wrap; }
    .brand b { font-size:22px; }
    .searchbtn span.txt { display:none; }
    .pnav a { font-size:12.5px; padding:8px 13px; }
    .strow { grid-template-columns:82px 36px 1fr; gap:9px; }
}