/* Layout: red header band with yellow stripe and pill tabs; one view at a time; a meadow scene hero where capture orbs release Pokémon */
:root{
  --bg:#eef0fb; --surface:#ffffff; --surface-2:#e4e7f8; --ink:#141a46; --muted:#555c86; --line:#d3d8f1;
  --red:#cc0000; --red-hot:#ff0000; --red-deep:#990000; --yellow:#ffde00; --gold:#b3a125; --yellow-soft:#fff6b3; --blue:#3b4cca; --blue-ink:#3b4cca; --band:#3b4cca; --band-deep:#26328f; --navy:#1c2470; --on-red:#ffffff;
  --good:#1f9d55; --warn:#d48b00; --bad:#d9302a;
  --sky-1:#8fb8ff; --sky-2:#e3ecff; --g1:#5cb85a; --g2:#3e9e43; --g3:#2b7f34; --sun:#ffd84a;
  --shadow:0 2px 0 rgba(20,33,61,.1), 0 10px 26px -14px rgba(20,33,61,.35);
  --f-display:"Bagel Fat One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Figtree",ui-rounded,"Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:20px;
  --t-normal:#8d8a68; --t-fighting:#c0352c; --t-flying:#7d6ee0; --t-poison:#9a42a8; --t-ground:#b4862f; --t-rock:#a0903d;
  --t-bug:#86a01c; --t-ghost:#5f4d92; --t-steel:#7479a0; --t-fire:#ec6a1f; --t-water:#3f7ee0; --t-grass:#4ea83a;
  --t-electric:#f2c200; --t-psychic:#ea4f80; --t-ice:#62c8c4; --t-dragon:#5a46dc; --t-dark:#5a463b; --t-fairy:#de72bf;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0c1036; --surface:#161c52; --surface-2:#202866; --ink:#eef1ff; --muted:#a3acd3; --line:#2a3670;
  --red:#e01414; --red-hot:#ff3b3b; --red-deep:#8a0000; --yellow:#ffde00; --gold:#c9b53a; --yellow-soft:#4a420a; --blue:#6f7ef5; --blue-ink:#a3adff; --band:#2e3ba8; --band-deep:#1a2273; --navy:#0b1040; --on-red:#ffffff;
  --good:#46d17f; --warn:#f5b52e; --bad:#ff6b5e;
  --sky-1:#16205a; --sky-2:#3b4aa0; --g1:#2f6e3a; --g2:#24592e; --g3:#1a4523; --sun:#f3f0d6;
  --shadow:0 2px 0 rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.7); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0c1036; --surface:#161c52; --surface-2:#202866; --ink:#eef1ff; --muted:#a3acd3; --line:#2a3670;
  --red:#e01414; --red-hot:#ff3b3b; --red-deep:#8a0000; --yellow:#ffde00; --gold:#c9b53a; --yellow-soft:#4a420a; --blue:#6f7ef5; --blue-ink:#a3adff; --band:#2e3ba8; --band-deep:#1a2273; --navy:#0b1040; --on-red:#ffffff;
  --good:#46d17f; --warn:#f5b52e; --bad:#ff6b5e;
  --sky-1:#16205a; --sky-2:#3b4aa0; --g1:#2f6e3a; --g2:#24592e; --g3:#1a4523; --sun:#f3f0d6;
  --shadow:0 2px 0 rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.7); color-scheme:dark}

[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--band)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px;border-radius:10px}
h1,h2,h3{text-wrap:balance;margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* Header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--band);color:var(--on-red);border-bottom:6px solid var(--yellow);box-shadow:0 6px 0 rgba(20,33,61,.08)}
.top .wrap{display:flex;align-items:center;gap:12px 16px;padding-block:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;margin-right:auto}
.brand svg{width:38px;height:38px;flex:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25));transition:transform .4s}
.brand:hover svg{transform:rotate(30deg) scale(1.08)}
.brand b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1;text-shadow:0 3px 0 var(--band-deep)}
.brand small{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-weight:800}
.tools{display:flex;gap:6px}
.iconbtn{background:rgba(255,255,255,.16);border:0;border-radius:999px;color:var(--on-red);padding:7px 13px;font-size:.8rem;font-weight:800;cursor:pointer}
.iconbtn:hover{background:rgba(255,255,255,.28)}
nav.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;width:100%;padding-bottom:2px}
nav.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:0;text-decoration:none;display:inline-block;background:rgba(0,0,0,.18);color:var(--on-red);font-weight:800;font-size:.95rem;padding:8px 16px;border-radius:999px;cursor:pointer;transition:background .15s, transform .15s}
.tab:hover{background:rgba(0,0,0,.24)}
.tab[aria-current="page"]{background:var(--yellow);color:#14213d;box-shadow:0 3px 0 var(--band-deep);transform:translateY(-1px)}

main{padding-block:26px 56px;min-height:60vh}
.view{display:flex;flex-direction:column;gap:24px}
.view.enter{animation:viewIn .35s ease-out}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}}

/* Shared */
.eyebrow{font-size:.74rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-ink)}
.hl{color:var(--blue-ink)}
.h2{color:var(--blue-ink)}
.h-display{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,5vw,3.4rem);line-height:1;letter-spacing:.005em}
.h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.35rem,3vw,1.85rem);line-height:1.1}
.lede{color:var(--muted);max-width:60ch;margin:8px 0 0;font-size:1.06rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2.5px solid #14213d;background:var(--yellow);color:#14213d;font-weight:900;padding:10px 18px;border-radius:999px;cursor:pointer;box-shadow:0 4px 0 #14213d;transition:transform .12s, box-shadow .12s;text-decoration:none;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 #14213d}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #14213d}
.btn.red{background:var(--red);color:#fff}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}
.btn.small{padding:6px 13px;font-size:.84rem;box-shadow:0 3px 0 #14213d}
.btn.ghost.small{box-shadow:0 3px 0 var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.panel{background:var(--surface);border:2.5px solid color-mix(in srgb,var(--blue) 22%,var(--line));border-radius:var(--r);padding:18px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:flex;flex-direction:column;gap:4px;font-size:.74rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);min-width:0}
.input,.select{border:2.5px solid var(--line);background:var(--surface);border-radius:14px;padding:10px 12px;font-size:1rem;font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0;min-width:0;width:100%}
.input:focus,.select:focus{border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 18%,transparent);outline:none}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--tc,var(--t-normal));text-shadow:0 1px 0 rgba(0,0,0,.28);white-space:nowrap}
.chip.lt{color:#14213d;text-shadow:none}
.chips{display:flex;gap:5px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--yellow);color:#14213d;border:2px solid #14213d}
.badge.myth{background:#d9ddff}
.badge.gold{background:var(--gold);color:#fff;border-color:#14213d}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);background:var(--navy);color:#fff;padding:11px 20px;border-radius:999px;font-weight:800;z-index:70;transition:transform .3s cubic-bezier(.3,1.4,.5,1);max-width:calc(100% - 32px);text-align:center;border:2.5px solid var(--yellow)}
.toast.on{transform:translate(-50%,0)}
.toast{top:calc(env(safe-area-inset-top,0px) + 74px);bottom:auto;transform:translate(-50%,-260%);visibility:hidden;border-radius:16px;font-size:.92rem;line-height:1.35;padding:10px 16px;width:max-content;max-width:min(92vw,560px);box-shadow:0 6px 0 rgba(20,33,61,.18);border:2px solid var(--yellow)}
.toast.on{transform:translate(-50%,0);visibility:visible}

/* Picture: sprite over a type-tinted monogram fallback */
.pic{position:relative;container-type:inline-size;aspect-ratio:1;width:100%;max-width:100%;display:grid;place-items:center}
.pic .mono{position:absolute;inset:12%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tc) 50%, #fff), var(--tc) 72%);color:#fff;font-family:var(--f-display);font-size:30cqi;text-shadow:0 2px 0 rgba(0,0,0,.25);box-shadow:inset 0 -6px 0 rgba(0,0,0,.12);transition:opacity .2s}
.pic img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .25s}
.pic img.ok{opacity:1}
.pic:has(img.ok) .mono{opacity:0}
.pic.px img{image-rendering:pixelated}
.pic.xs{width:36px;flex:none}

/* Capture orb release */
.rel{position:relative;display:grid;place-items:center;width:100%}
.rel>.rel-mon{grid-area:1/1;position:relative;z-index:2;width:100%;animation:emerge .75s .95s cubic-bezier(.3,1.45,.5,1) both}
.rel-orb{position:absolute;left:50%;top:50%;width:36%;translate:-50% -50%;z-index:3;animation:orbDrop .55s cubic-bezier(.25,.9,.4,1.25) both, orbWobble .38s .55s ease-in-out, orbGone .01s 1.5s forwards}
.rel-orb svg{display:block;width:100%;overflow:visible}
.rel-orb .facet{transform-box:fill-box;transform-origin:center;animation:shard .55s .9s cubic-bezier(.2,.7,.3,1) forwards}
.rel-orb .core{transform-box:fill-box;transform-origin:center;animation:core .3s .72s ease-in forwards}
.rel-flash{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:radial-gradient(circle,#fff 0 28%,var(--yellow) 52%,transparent 70%);opacity:0;z-index:1;pointer-events:none;animation:flash .7s .88s ease-out both}
.rel-spark{position:absolute;inset:0;pointer-events:none;z-index:1}
.rel-spark i{position:absolute;left:50%;top:50%;width:7px;height:26px;margin:-13px 0 0 -3.5px;border-radius:4px;background:var(--yellow);opacity:0;animation:spark .6s .9s ease-out both}
.rel-spark i:nth-child(even){background:#fff;height:16px}
@keyframes orbDrop{0%{transform:translateY(-190%) rotate(-260deg) scale(.55);opacity:0}15%{opacity:1}70%{transform:translateY(10%) rotate(14deg) scale(1.05)}85%{transform:translateY(-6%) rotate(-4deg)}100%{transform:none}}
@keyframes orbWobble{25%{transform:rotate(-16deg)}50%{transform:rotate(12deg)}75%{transform:rotate(-6deg)}}
@keyframes orbGone{to{visibility:hidden}}
@keyframes shard{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.6);opacity:0}}
@keyframes core{50%{transform:scale(1.5)}100%{transform:scale(.2);opacity:0}}
@keyframes flash{0%{opacity:1;transform:scale(.2)}100%{opacity:0;transform:scale(3.4)}}
@keyframes spark{0%{opacity:1;transform:rotate(var(--a)) translateY(-14px) scaleY(.3)}100%{opacity:0;transform:rotate(var(--a)) translateY(-150px) scaleY(1)}}
@keyframes emerge{0%{opacity:0;transform:scale(.12);filter:brightness(0) invert(1) drop-shadow(0 0 16px #fff)}45%{opacity:1;transform:scale(1.14);filter:brightness(0) invert(1) drop-shadow(0 0 22px #fff)}100%{opacity:1;transform:none;filter:none}}
.now .rel-flash,.now .rel-spark i{animation-delay:0s}

/* Type particles */
.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx i{position:absolute;left:var(--x);width:var(--s);height:var(--s);background:var(--pc,var(--tc));opacity:0;animation:var(--an) var(--d) var(--dl) infinite linear}
.fx .ember{bottom:-10%;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.fx .bubble{bottom:-10%;background:transparent;border:2px solid var(--pc,var(--tc));border-radius:50%}
.fx .leaf{top:-10%;border-radius:0 80% 0 80%}
.fx .snow{top:-10%;border-radius:50%;background:#fff;box-shadow:0 0 6px var(--pc,var(--tc))}
.fx .ring{bottom:-10%;background:transparent;border:2px solid var(--pc,var(--tc));border-radius:50%}
.fx .wisp{bottom:-10%;border-radius:50%;filter:blur(3px)}
.fx .star{bottom:-10%;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)}
.fx .spark{top:var(--y);clip-path:polygon(40% 0,100% 0,55% 45%,85% 45%,20% 100%,40% 55%,10% 55%)}
.fx .dust{top:var(--y);border-radius:50%}
.fx .glint{top:var(--y);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
@keyframes rise{0%{opacity:0;transform:translate(0,0) rotate(-45deg)}15%{opacity:.85}100%{opacity:0;transform:translate(var(--sw),-520px) rotate(200deg)}}
@keyframes fall{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:.9}100%{opacity:0;transform:translate(var(--sw),520px) rotate(320deg)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:.9;transform:scale(1.2) translateX(var(--sw))}}

/* Hero meadow */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:center}
.hero .stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px}
.hero .stats div{font-size:.8rem;color:var(--muted);font-weight:800}
.hero .stats b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.75rem;color:var(--ink);line-height:1}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.meadowcard{border:3px solid #14213d;border-radius:28px;overflow:hidden;box-shadow:7px 7px 0 var(--blue);background:var(--surface)}
.meadow{position:relative;aspect-ratio:5/4;max-width:100%;background:linear-gradient(var(--sky-1),var(--sky-2) 78%);overflow:hidden}
.meadow .sunball{position:absolute;top:9%;right:11%;width:15%;aspect-ratio:1;border-radius:50%;background:var(--sun);box-shadow:0 0 0 10px color-mix(in srgb,var(--sun) 30%,transparent),0 0 60px var(--sun)}
.meadow .cloud{position:absolute;height:9%;background:#fff;border-radius:999px;opacity:.9;animation:drift linear infinite}
.meadow .cloud::before,.meadow .cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.meadow .cloud::before{width:45%;aspect-ratio:1;left:18%;bottom:30%}
.meadow .cloud::after{width:30%;aspect-ratio:1;left:50%;bottom:40%}
@keyframes drift{from{transform:translateX(-30vw)}to{transform:translateX(110vw)}}
.meadow .layer{position:absolute;left:-4%;width:108%;display:block;transform-origin:50% 100%}
.meadow .l1{bottom:22%;height:30%;color:var(--g1);animation:sway 6s ease-in-out infinite}
.meadow .l2{bottom:9%;height:30%;color:var(--g2);animation:sway 4.5s ease-in-out infinite reverse;z-index:1}
.meadow .ground{position:absolute;inset:auto 0 0;height:12%;background:var(--g3);z-index:3}
.meadow .l3{bottom:6%;height:24%;color:var(--g3);animation:sway 3.6s ease-in-out infinite;z-index:3}
.meadow.rustle .l3,.meadow.rustle .l2{animation:rustle .45s ease-in-out}
@keyframes sway{0%,100%{transform:skewX(0)}50%{transform:skewX(2.5deg)}}
@keyframes rustle{20%{transform:translateX(-10px) skewX(-6deg)}50%{transform:translateX(9px) skewX(6deg)}80%{transform:translateX(-4px)}}
.meadow .spot{position:absolute;left:50%;bottom:11%;width:50%;translate:-50% 0;z-index:2;border:0;background:none;padding:0;cursor:pointer}
.meadow .spot:hover .rel-mon{animation:none}
.meadow .spot:hover .pic{animation:hop .55s}
.meadow .night-stars{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 20% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 25%,#fff,transparent),radial-gradient(1px 1px at 40% 35%,#fff,transparent),radial-gradient(1px 1px at 85% 10%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 40%,#fff,transparent);opacity:var(--stars,0)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .meadow{--stars:.9}}
:root[data-theme="dark"] .meadow{--stars:.9}
.encbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-top:3px solid #14213d;flex-wrap:wrap}
.encbar .tag{font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--red-hot)}
.encbar .nm{font-family:var(--f-display);font-size:1.45rem;line-height:1.05}
@keyframes hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-12%)}65%{transform:translateY(0)}82%{transform:translateY(-4%)}}

/* Dex controls & grid */
.controls{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:10px}
.typebar{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:thin}
.typebar .chip{border:0;cursor:pointer;padding:7px 13px;font-size:.72rem;opacity:.5;transition:opacity .15s, transform .15s}
.typebar .chip:hover{opacity:.85}
.typebar .chip[aria-pressed="true"]{opacity:1;transform:translateY(-2px);box-shadow:0 3px 0 rgba(0,0,0,.3)}
.typebar .chip.all{--tc:var(--blue);color:#fff}
.count{font-size:.92rem;color:var(--muted);font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:16px}
.card{position:relative;background:var(--surface);border:2.5px solid var(--line);border-radius:var(--r);padding:0 0 14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;overflow:hidden;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s, border-color .15s, box-shadow .15s;animation:cardIn .4s both}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.96)}}
.card .top{position:relative;background:radial-gradient(circle at 50% 75%, color-mix(in srgb,var(--tc) 45%,var(--surface)) 0 38%, color-mix(in srgb,var(--tc) 22%,var(--surface)) 39% 100%);padding:10px 12px 0;border-bottom:2.5px solid var(--line)}
.card .no{font-family:var(--f-mono);font-size:.74rem;font-weight:700;color:var(--ink);opacity:.7}
.card .bst{position:absolute;top:9px;right:12px;font-family:var(--f-mono);font-size:.7rem;font-weight:700;color:var(--ink);opacity:.7}
.card .pic{width:76%;margin:0 auto}
.card .body{padding:0 12px;display:flex;flex-direction:column;gap:6px}
.card .nm{font-weight:900;font-size:1.04rem;line-height:1.15}
.card .star{position:absolute;top:8px;left:50%;translate:-50% 0;font-size:.62rem}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.6),transparent 42%),linear-gradient(115deg,transparent 25%,rgba(255,60,170,.22),rgba(60,200,255,.22),rgba(255,225,0,.22),transparent 75%);background-size:100% 100%,200% 200%;background-position:0 0,var(--mx,50%) var(--my,50%);mix-blend-mode:overlay}
.card:hover{border-color:var(--blue);box-shadow:0 14px 28px -14px rgba(20,33,61,.55)}
.card:hover::after{opacity:1}
.card:hover .pic{animation:hop .55s}
.more{display:flex;justify-content:center;padding-top:8px}
.empty{padding:44px 16px;text-align:center;color:var(--muted)}
.empty b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.45rem;color:var(--ink)}

/* Modal */
dialog.mon{border:0;padding:0;background:transparent;max-width:min(920px,calc(100vw - 24px));width:100%;color:var(--ink)}
dialog.mon::backdrop{background:rgba(13,19,48,.62);backdrop-filter:blur(4px)}
dialog.mon[open] .sheet{animation:sheetIn .35s cubic-bezier(.3,1.3,.5,1)}
@keyframes sheetIn{from{transform:translateY(30px) scale(.96);opacity:0}}
.sheet{background:var(--surface);border:3px solid #14213d;border-radius:28px;box-shadow:8px 8px 0 var(--blue);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);overflow:hidden;max-height:calc(100dvh - 32px)}
.sheet .left{position:relative;background:radial-gradient(circle at 50% 46%, color-mix(in srgb,var(--tc) 55%, var(--surface)) 0 30%, color-mix(in srgb,var(--tc) 25%, var(--surface)) 31% 100%);padding:26px 22px;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;overflow:hidden;border-right:3px solid #14213d}
.sheet .left .rel{width:min(100%,310px)}
.sheet .left .row{position:relative;z-index:2;justify-content:center}
.sheet .right{padding:24px;overflow:auto;display:flex;flex-direction:column;gap:16px;position:relative}
.sheet .no{font-family:var(--f-mono);font-weight:700;color:var(--muted);font-size:.9rem}
.sheet h2{font-family:var(--f-display);font-weight:400;font-size:clamp(1.9rem,4.4vw,2.6rem);line-height:1}
.sheet .genus{font-weight:800;color:var(--muted)}
.shinytag{position:absolute;top:14px;left:14px;z-index:3}
.closex{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:2.5px solid var(--ink);background:var(--surface);cursor:pointer;font-size:1.05rem;font-weight:900;z-index:4}
.closex:hover{background:var(--yellow);color:#14213d}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.facts div{background:var(--surface-2);border-radius:14px;padding:9px 11px;font-size:.68rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.facts b{display:block;font-family:var(--f-mono);font-size:1rem;color:var(--ink);letter-spacing:0;text-transform:none}
.stats{display:grid;grid-template-columns:62px 36px minmax(0,1fr);gap:7px 10px;align-items:center;font-size:.85rem}
.stats .lbl{font-weight:900;color:var(--blue-ink)}
.stats .v{font-family:var(--f-mono);font-weight:700;text-align:right}
.bar{height:11px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--bc);width:var(--w);animation:grow .8s cubic-bezier(.3,1.2,.5,1) both;animation-delay:var(--bd,0s)}
@keyframes grow{from{width:0}}
.sec{display:flex;flex-direction:column;gap:8px}
.mrow{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;align-items:start;font-size:.8rem}
.mrow b{font-family:var(--f-mono);padding-top:2px}
.mrow b.bad{color:var(--bad)} .mrow b.good{color:var(--good)}
.evo{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.evo .stage{display:flex;flex-direction:column;gap:4px}
.evo button{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;border:2px solid var(--line);font-weight:800;font-size:.85rem;background:var(--surface)}
.evo button:hover{border-color:var(--ink)}
.evo button.cur{background:var(--yellow);color:#14213d;border-color:#14213d}
.evo .arr{font-weight:900;color:var(--muted);font-size:1.1rem}
.meter{display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:800}
.meter .bar{flex:1}
.meter .bar i{background:linear-gradient(90deg,var(--gold),var(--yellow))!important}
.navrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* Who's That */
.gamewrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.gstage{position:relative;aspect-ratio:1;max-width:100%;border:3px solid #14213d;border-radius:30px;overflow:hidden;box-shadow:7px 7px 0 var(--blue);background:var(--blue);display:grid;place-items:center}
.gstage .rays{position:absolute;inset:-45%;background:repeating-conic-gradient(from 0deg,var(--yellow) 0deg 9deg,#ffe066 9deg 18deg);animation:spin 36s linear infinite}
.gstage.lose .rays{background:repeating-conic-gradient(from 0deg,#5d6aa0 0deg 9deg,#7380b8 9deg 18deg)}
.gstage .monwrap{position:relative;z-index:1;width:76%}
.gstage.hidden .pic img{filter:brightness(0) drop-shadow(0 6px 0 rgba(0,0,0,.15))}
.gstage.hidden .pic .mono{filter:brightness(0)}
.gstage .pic img,.gstage .pic .mono{transition:filter .45s}
.gstage.revealed .monwrap .pic{animation:pop .55s cubic-bezier(.3,1.6,.5,1)}
.gstage .q{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:var(--red-hot);color:#fff;font-family:var(--f-display);padding:7px 18px;border-radius:999px;font-size:1.15rem;white-space:nowrap;z-index:3;border:2.5px solid #14213d}
@keyframes pop{0%{transform:scale(.6)}100%{transform:none}}
.clues{position:relative;z-index:1;width:84%;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:2.5px solid #14213d;border-radius:20px;padding:16px}
.clue{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:.9rem;align-items:center}
.clue span{color:var(--muted);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:900}
.shape{display:flex;align-items:flex-end;gap:6px;height:70px}
.shape i{flex:1;background:var(--blue);border-radius:6px 6px 2px 2px;height:var(--h)}
.shape-l{display:flex;gap:6px;font-size:.6rem;font-weight:900;color:var(--muted)}
.shape-l span{flex:1;text-align:center}
@keyframes spin{to{transform:rotate(360deg)}}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt{border:2.5px solid var(--ink);background:var(--surface);border-radius:16px;padding:14px 12px;font-weight:900;font-size:1.02rem;cursor:pointer;box-shadow:0 4px 0 var(--ink);text-align:left;display:flex;gap:10px;align-items:center;transition:transform .1s}
.opt kbd{font-family:var(--f-mono);font-size:.72rem;background:var(--surface-2);border-radius:6px;padding:2px 6px;color:var(--muted)}
.opt:hover:not([disabled]){transform:translateY(-2px)}
.opt.right{background:var(--good);color:#fff}
.opt.right kbd,.opt.wrong kbd{background:rgba(255,255,255,.25);color:#fff}
.opt.wrong{background:var(--bad);color:#fff;animation:shake .35s}
.opt[disabled]{cursor:default}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.score{display:flex;gap:12px}
.score div{flex:1;background:var(--surface);border:2.5px solid color-mix(in srgb,var(--blue) 35%,var(--line));border-radius:16px;padding:10px 12px;font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.score b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.9rem;color:var(--ink);letter-spacing:0;line-height:1.1}
.score b.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.35);color:var(--red)}}
.verdict{min-height:1.6em;font-weight:900;font-size:1.12rem}
.verdict.good{color:var(--good)} .verdict.bad{color:var(--bad)}

/* Autocomplete */
.ac{position:relative}
.ac ul{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:2.5px solid var(--ink);border-radius:16px;list-style:none;margin:0;padding:6px;z-index:20;box-shadow:var(--shadow);max-height:330px;overflow:auto}
.ac li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;cursor:pointer;font-weight:800}
.ac li small{margin-left:auto;font-family:var(--f-mono);color:var(--muted)}
.ac li.on{background:var(--yellow-soft)}
.ac li.none{color:var(--muted);cursor:default}

/* Daily */
.dailyhead{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:end}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.8rem;font-weight:800;color:var(--muted)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:4px}
.boardwrap{overflow-x:auto;padding-bottom:6px}
.board{display:grid;grid-template-columns:minmax(150px,1.6fr) repeat(5,minmax(70px,1fr));gap:6px}
@media (max-width:600px){.board{grid-template-columns:48px repeat(5,minmax(0,1fr));gap:4px}.board .cell.name span{display:none}.board .hd:first-child{visibility:hidden}.board .cell{font-size:.72rem;padding:4px 2px}.board .hd{font-size:.62rem}}
.board .hd{font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.cell{border-radius:12px;padding:10px 6px;font-weight:900;font-size:.85rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;background:var(--surface-2);color:var(--ink);animation:flip .5s both}
.cell small{font-family:var(--f-mono);font-size:.7rem;font-weight:700}
.cell.y{background:var(--good);color:#fff} .cell.p{background:var(--warn);color:#14213d} .cell.n{background:var(--surface-2);color:var(--muted)}
.cell.name{flex-direction:row;justify-content:flex-start;gap:8px;text-align:left;background:var(--surface);border:2.5px solid var(--line);animation:none}
.arrow{font-size:1.15rem;line-height:1}
@keyframes flip{from{transform:rotateX(90deg);opacity:0}to{transform:none;opacity:1}}
.slots{display:flex;gap:6px}
.slots i{width:24px;height:9px;border-radius:999px;background:var(--line)}
.slots i.used{background:var(--blue)}
.result{display:grid;grid-template-columns:170px minmax(0,1fr);gap:20px;align-items:center;border:3px solid #14213d;box-shadow:6px 6px 0 var(--blue);position:relative;overflow:hidden}
.result .relbox{position:relative}
.sharetext{white-space:pre-wrap;font-family:var(--f-mono);font-size:.8rem;background:var(--surface-2);padding:10px;border-radius:10px;margin:0;width:100%;border:0;resize:none;color:var(--ink)}

/* Team */
.teamgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.slot{position:relative;background:var(--surface);border:2.5px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-height:200px;justify-content:center;overflow:hidden}
.slot.filled{border-color:var(--blue);box-shadow:4px 4px 0 #14213d;background:radial-gradient(circle at 50% 38%, color-mix(in srgb,var(--tc) 28%,var(--surface)) 0 34%, var(--surface) 35%)}
.slot .monbtn{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.slot .rel,.slot .monbtn>.pic{width:96px}
.slot .nm{font-weight:900}
.slot .rm{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--surface);cursor:pointer;font-weight:900;color:var(--muted);z-index:3}
.slot .rm:hover{border-color:var(--bad);color:var(--bad)}
.slot.empty{border-style:dashed;color:var(--muted);font-weight:800}
.slot.empty svg{width:46px;opacity:.35;filter:grayscale(1)}
.teamlayout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:start}
.threat{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,1fr) 84px;gap:7px 10px;align-items:center;font-size:.82rem}
.threat .h{font-size:.64rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dots{display:flex;gap:3px;flex-wrap:wrap}
.dots i{width:12px;height:12px;border-radius:50%;background:var(--surface-2)}
.dots.w i.on{background:var(--red-hot)} .dots.r i.on{background:var(--blue)}
.pill{font-size:.66rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 8px;text-align:center}
.pill.bad{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
.pill.warn{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.pill.good{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.pill.mid{background:var(--surface-2);color:var(--muted)}
.cover .chip.off{opacity:.22}
.note{font-size:.86rem;color:var(--muted)}
.teamstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.teamstats div{background:var(--surface-2);border-radius:14px;padding:9px 11px;font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.teamstats b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.3rem;color:var(--ink);letter-spacing:0;text-transform:none;line-height:1.15}

/* Quiz */
.quiz{max-width:760px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.progress{height:14px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:2.5px solid #14213d}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--yellow));transition:width .4s}
.qcard{background:var(--surface);border:3px solid #14213d;border-radius:28px;box-shadow:7px 7px 0 var(--blue);padding:26px;display:flex;flex-direction:column;gap:16px;animation:qIn .4s cubic-bezier(.3,1.3,.5,1);position:relative;overflow:hidden}
@keyframes qIn{from{transform:translateX(30px) rotate(1deg);opacity:0}}
.qcard .qn{font-family:var(--f-mono);font-weight:700;color:var(--muted);font-size:.85rem}
.answers{display:grid;gap:10px}
.answer{border:2.5px solid var(--line);background:var(--bg);border-radius:16px;padding:14px 16px;text-align:left;font-weight:800;font-size:1.03rem;cursor:pointer;transition:border-color .12s, transform .12s, background .12s}
.answer:hover{border-color:var(--blue);transform:translateX(6px);background:var(--yellow-soft)}
.qresult{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:24px;align-items:center;position:relative;z-index:1}

footer{background:var(--band-deep);color:#c9d0ee;padding-block:26px 36px;font-size:.84rem;border-top:6px solid var(--yellow)}
footer .wrap{display:flex;flex-direction:column;gap:6px}
footer b{color:#fff}

canvas#fx{position:fixed;inset:0;pointer-events:none;z-index:60;width:100%;height:100%}


/* Wordmark */
.brand svg.wordmark{display:block;height:62px;width:auto;overflow:visible;filter:none}
.wordmark text{font-family:var(--f-display);font-weight:400}
.brand:hover .wordmark{animation:wiggle .5s}
@keyframes wiggle{30%{transform:rotate(-2deg)}60%{transform:rotate(1.5deg)}}

/* Catch scene */
.meadow .wild{position:absolute;left:50%;bottom:12%;width:46%;translate:-50% 0;z-index:2;border:0;background:none;padding:0;cursor:pointer}
.meadow .wild.appear{animation:popUp .6s cubic-bezier(.3,1.5,.5,1) both}
.meadow .wild.idle .pic{animation:breathe 3.2s ease-in-out infinite}
@keyframes popUp{0%{transform:translateY(55%) scale(.85);opacity:0}100%{transform:none;opacity:1}}
@keyframes breathe{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-2%) scaleY(1.02)}}
.meadow .ball{position:absolute;left:0;top:0;z-index:5;pointer-events:none;will-change:transform}
.meadow .ball svg{display:block;width:100%;overflow:visible}
.meadow .ball .facet{transform-box:fill-box;transform-origin:center}
/* custom orb artwork */
.orbimgwrap{width:100%;aspect-ratio:1}
.orbimgwrap img,img.orbimg{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.meadow .ball.burst .orbimgwrap{animation:imgBurst .45s forwards}
.rel-orb .orbimgwrap{animation:imgBurst .4s .86s forwards}
@keyframes imgBurst{to{transform:scale(1.7);opacity:0}}
.bagbtn img.orbimg{width:24px;height:24px}
.bagitem img.orbimg{width:44px;height:44px}
.caughtdot img.orbimg{width:16px;height:16px}
.slot.empty img.orbimg{width:46px;height:46px;opacity:.35;filter:grayscale(1)}
.tc-orb img.orbimg{width:22px;height:22px}
.tc-empty img.orbimg{width:70px;height:70px}
.medal .hex img.orbimg{width:30px;height:30px;position:relative;z-index:1}
.meadow .ball.burst .facet{transform-box:fill-box;transform-origin:center;animation:shard .55s cubic-bezier(.2,.7,.3,1) forwards}
.meadow .ball.burst .core{transform-box:fill-box;transform-origin:center;animation:core .3s ease-in forwards}
.meadow .ball.locked svg{animation:lockGlow 1.6s ease-in-out infinite}
@keyframes lockGlow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 10px var(--yellow))}}
.meadow .fxdot{position:absolute;z-index:6;pointer-events:none;border-radius:50%}
.meadow .fxflash{background:radial-gradient(circle,#fff 0 25%,var(--yellow) 50%,transparent 70%)}
.meadow .fxstar{background:var(--yellow);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);border-radius:0}
.meadow .shadow{position:absolute;left:50%;bottom:10%;width:30%;height:5%;translate:-50% 0;border-radius:50%;background:rgba(0,0,0,.18);z-index:2;filter:blur(2px)}
.encmsg{font-weight:800;color:var(--muted);font-size:.9rem}
.caughtdot{position:absolute;top:8px;right:10px;width:16px;height:16px;z-index:2}
.card .caughtdot{top:28px}

/* Trading cards */
.tcg{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.tcgcard{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:4px;font-size:.66rem;font-weight:800;color:var(--muted);text-align:center;transition:transform .15s}
.tcgcard img{width:100%;aspect-ratio:63/88;object-fit:cover;border-radius:6px;background:var(--surface-2);box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.tcgcard:hover{transform:translateY(-4px) rotate(-1.5deg)}
.tcgcard:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.zoom{position:fixed;inset:0;z-index:80;background:rgba(10,14,48,.82);display:grid;place-items:center;padding:24px;cursor:zoom-out;backdrop-filter:blur(4px)}
.zoom .holo{position:relative;width:min(380px,82vw);aspect-ratio:63/88;border-radius:16px;overflow:hidden;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .1s;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);animation:zoomIn .35s cubic-bezier(.3,1.4,.5,1)}
.zoom .holo img{width:100%;height:100%;object-fit:cover;display:block}
.zoom .holo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 40%),linear-gradient(115deg,transparent 20%,rgba(255,60,170,.25),rgba(60,200,255,.25),rgba(255,225,0,.25),transparent 80%);background-size:100% 100%,250% 250%;background-position:0 0,var(--mx,50%) var(--my,50%);mix-blend-mode:color-dodge;opacity:.55;pointer-events:none}
.zoom .cap{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;translate:-50% 0;color:#fff;font-weight:800;text-align:center;max-width:90%}
@keyframes zoomIn{from{transform:scale(.6) rotate(-6deg);opacity:0}}

/* Cry jukebox */
.crygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
.crytile{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:center;text-align:left;background:var(--surface);border:2.5px solid color-mix(in srgb,var(--blue) 18%,var(--line));border-radius:16px;padding:8px 10px 8px 6px;cursor:pointer;transition:transform .12s,border-color .12s}
.crytile:hover{transform:translateY(-2px);border-color:var(--blue)}
.crytile .nm{font-weight:900;font-size:.88rem;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crytile .no{font-family:var(--f-mono);font-size:.68rem;color:var(--muted)}
.crytile .pic{width:44px}
.crytile.playing{background:var(--blue);border-color:var(--blue);color:#fff}
.crytile.playing .no{color:#dfe3ff}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;margin-left:6px;vertical-align:middle}
.eq i{width:3px;background:currentColor;border-radius:2px;height:30%;animation:eq .6s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.15s}.eq i:nth-child(3){animation-delay:.3s}
@keyframes eq{50%{height:100%}}
.np{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:40;width:min(680px,calc(100% - 24px));background:var(--band-deep);color:#fff;border:3px solid var(--yellow);border-radius:22px;padding:10px 14px;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transition:transform .3s cubic-bezier(.3,1.3,.5,1),opacity .2s}
.np.off{transform:translateY(150%);opacity:0;pointer-events:none}
.np .pic{width:52px}
.np .nm{font-family:var(--f-display);font-size:1.15rem;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.np .sub{font-size:.72rem;opacity:.8;font-weight:700}
.np .prog{height:6px;border-radius:99px;background:rgba(255,255,255,.2);overflow:hidden;margin-top:6px}
.np .prog i{display:block;height:100%;width:0;background:var(--yellow)}
.np .ctl{display:flex;gap:6px;align-items:center}
.np .ctl button{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-weight:900;cursor:pointer;font-size:.95rem}
.np .ctl button:hover{background:rgba(255,255,255,.3)}
.np .ctl button.main{background:var(--yellow);color:#14213d;width:44px;height:44px}
.np input[type=range]{width:80px;accent-color:var(--yellow)}
.cryplay{position:relative;z-index:2;width:42%;aspect-ratio:1;border-radius:50%;border:4px solid #14213d;background:var(--red-hot);color:#fff;font-family:var(--f-display);font-size:clamp(1rem,3vw,1.4rem);cursor:pointer;box-shadow:0 6px 0 #14213d;display:grid;place-items:center;text-align:center;line-height:1.05;padding:10px}
.cryplay:active{transform:translateY(4px);box-shadow:0 2px 0 #14213d}
.cryplay.pulse{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 6px 0 #14213d,0 0 0 18px color-mix(in srgb,var(--yellow) 45%,transparent)}}
.audnote{background:var(--yellow-soft);border:2px solid var(--gold);border-radius:14px;padding:10px 14px;font-weight:700;font-size:.9rem}

.sr-tag{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* v4: scroll + modal */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

html{overflow-x:clip}
body{overflow-x:visible}
dialog.mon{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet{max-height:none;overflow:clip}
.sheet .right{overflow:visible}
.closex{position:sticky;top:12px;right:auto;align-self:flex-end;margin-bottom:-56px;flex:none}
@media (min-width:861px){.sheet .left{position:sticky;top:0;align-self:start;min-height:min(620px,calc(100dvh - 30px))}}
/* wordmark */
.brand svg.wordmark{height:66px}
.wordmark text{font-family:"Luckiest Guy",var(--f-display)}
/* explore */
.explore{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:900;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.explore .select{width:auto;padding:6px 10px;font-size:.92rem}
/* encounter bar + bag */
.encbar{flex-direction:column;align-items:stretch}
.encrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bag{display:flex;gap:6px;flex-wrap:wrap}
.bagbtn{display:flex;align-items:center;gap:6px;border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 10px 3px 4px;cursor:pointer;font-size:.74rem;font-weight:800;color:var(--muted)}
.bagbtn svg{width:24px;height:24px}
.bagbtn b{color:var(--ink);margin-right:4px}
.bagbtn.on{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 12%,var(--surface));color:var(--ink)}
.bagbtn[disabled]{opacity:.4;cursor:not-allowed}
/* trainer card */
.tcard{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);border:3px solid #14213d;border-radius:26px;overflow:hidden;box-shadow:7px 7px 0 var(--gold);background:linear-gradient(135deg,var(--band) 0%,var(--band-deep) 100%);color:#fff}
.tc-main{padding:20px 22px;display:flex;flex-direction:column;gap:12px;position:relative}
.tc-head{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.tc-head .tc-orb svg{width:22px;height:22px;display:block}
.tc-id{margin-left:auto;color:#dfe3ff;letter-spacing:.06em}
.tc-name input{all:unset;font-family:"Luckiest Guy",var(--f-display);font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.1;color:#fff;width:100%;border-bottom:2px dashed rgba(255,255,255,.35);padding-bottom:2px;cursor:text}
.tc-name input::placeholder{color:rgba(255,255,255,.55)}
.tc-name input:focus{border-bottom-color:var(--yellow)}
.tc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tc-stats div{background:rgba(255,255,255,.1);border-radius:12px;padding:8px 10px;font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#cfd5ff}
.tc-stats b{display:block;font-size:1.25rem;color:#fff;letter-spacing:0}
.tc-prog{height:14px;border-radius:99px;background:rgba(255,255,255,.15);overflow:hidden;border:2px solid rgba(0,0,0,.25)}
.tc-prog span{display:block;height:100%;background:linear-gradient(90deg,var(--yellow),#fff07a);border-radius:99px}
.tc-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.8rem;font-weight:700;color:#cfd5ff}
.tc-side{position:relative;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 50% 45%,rgba(255,222,0,.35),transparent 65%);border-left:3px dashed rgba(255,255,255,.2)}
.tc-side .pic{width:min(200px,80%)}
.tc-cap{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:.66rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.tc-cap b{display:block;font-family:"Luckiest Guy",var(--f-display);font-size:1.2rem;letter-spacing:.02em;color:#fff;text-transform:none}
.tc-empty{display:flex;flex-direction:column;align-items:center;gap:8px;font-weight:800;opacity:.7}
.tc-empty svg{width:70px}
.minegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px}
.bagview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bagitem{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:var(--surface-2);border-radius:16px;padding:12px 8px;font-weight:800;font-size:.85rem}
.bagitem svg{width:44px}
.bagitem b{font-size:1.2rem}
.bagitem small{display:block;color:var(--muted);font-size:.7rem}
.regions{display:flex;flex-direction:column;gap:6px}
.regrow{all:unset;cursor:pointer;display:grid;grid-template-columns:130px minmax(0,1fr) 74px;gap:10px;align-items:center;font-size:.84rem;font-weight:800;padding:3px 6px;border-radius:10px}
.regrow:hover{background:var(--surface-2)}
.regrow:focus-visible{outline:3px solid var(--yellow)}
.regrow .rc{text-align:right;color:var(--muted);font-size:.78rem}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.medal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;opacity:.45;filter:grayscale(1)}
.medal.on{opacity:1;filter:none}
.medal .hex{width:62px;aspect-ratio:1/1.1;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--mc);display:grid;place-items:center;font-family:var(--f-display);font-size:1.5rem;color:#fff;position:relative}
.medal .hex::after{content:"";position:absolute;inset:5px;clip-path:inherit;border:0;background:linear-gradient(160deg,rgba(255,255,255,.45),transparent 55%)}
.medal .hex svg{width:30px;position:relative;z-index:1}
.medal.on .hex{animation:medalIn .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes medalIn{from{transform:scale(.4) rotate(-30deg)}}
.medal b{font-size:.82rem;font-weight:900;line-height:1.15}
.medal small{font-size:.68rem;color:var(--muted);line-height:1.2}
.colgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.ctile{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:8px 6px;cursor:pointer;text-align:center}
.ctile .pic{width:70%}
.ctile:not(.got) .pic img,.ctile:not(.got) .pic .mono{filter:brightness(0);opacity:.18}
.ctile.got{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--yellow) 22%,var(--surface)),var(--surface) 60%)}
.ctile:hover{border-color:var(--blue);transform:translateY(-2px)}
.ctile .cn{font-size:.66rem;color:var(--muted)}
.ctile .cnm{font-size:.78rem;font-weight:900;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctile:not(.got) .cnm{color:var(--muted)}
.ctile .sh{position:absolute;top:6px;right:8px;color:var(--gold);font-weight:900}
.savebox{display:flex;flex-direction:column;gap:12px}

/* simplicity pass */
.trainerbtn{background:var(--yellow);color:#14213d;box-shadow:0 2px 0 var(--band-deep)}
.trainerbtn:hover{background:#fff07a}
.trainerbtn .tb-l{opacity:.7;font-weight:800}
.trainerbtn b{letter-spacing:.06em}
.returning{margin:12px 0 0;font-size:.92rem;color:var(--muted);font-weight:600}
.linkbtn{all:unset;cursor:pointer;color:var(--blue-ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.linkbtn:focus-visible{outline:3px solid var(--yellow)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red-hot);border:2px solid #fff;margin-left:6px;vertical-align:top;box-shadow:0 0 0 0 rgba(255,0,0,.6);animation:dotPulse 1.8s infinite}
.dot[hidden]{display:none}
@keyframes dotPulse{70%{box-shadow:0 0 0 7px rgba(255,0,0,0)}100%{box-shadow:0 0 0 0 rgba(255,0,0,0)}}
.cdhr{border:0;border-top:2.5px dashed var(--line);margin:6px 0;width:100%}
.cdh3{font-size:1.05rem;font-weight:900;margin:0}
.codeuse .field{min-width:min(100%,200px)}
.codeuse .btn{flex:1 0 auto}
.welcome{align-items:stretch;gap:12px}
.wl-orb{width:70px;margin:0 auto;animation:orbWobble 1.2s ease-in-out 2}
.wl-orb svg{width:100%;display:block}
.steps{list-style:none;counter-reset:s;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:10px}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:2px 10px;align-items:center}
.steps li::before{content:counter(s);grid-row:span 2;width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-size:1rem}
.steps b{font-weight:900}
.steps span{color:var(--muted);font-size:.9rem;grid-column:2}
.bottomnav{display:none}
dialog.sheetdlg{border:0;padding:0;margin:auto auto 0;width:100%;max-width:560px;background:transparent;color:var(--ink);max-height:85dvh}
dialog.sheetdlg::backdrop{background:rgba(13,19,48,.55);backdrop-filter:blur(3px)}
.sheet2{background:var(--surface);border:3px solid #14213d;border-bottom:0;border-radius:26px 26px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;animation:sheetUp .3s cubic-bezier(.3,1.2,.5,1)}
@keyframes sheetUp{from{transform:translateY(100%)}}
.sheethead{display:flex;justify-content:space-between;align-items:center}
.sheethead .closex{position:static;margin:0}
.playgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.playitem{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:16px;border:2.5px solid var(--line);background:var(--bg);text-decoration:none;color:var(--ink);position:relative}
.playitem:hover{border-color:var(--blue)}
.playitem b{font-weight:900}
.playitem span{font-size:.8rem;color:var(--muted);font-weight:700}
.playitem .dot{position:absolute;top:10px;right:10px;margin:0}
.settingsrow{justify-content:center}
@media (max-width:860px){
  nav.tabs{display:none}
  #soundBtn,#themeBtn{display:none}
  .top .wrap{flex-wrap:nowrap}
  .trainerbtn{padding:8px 12px;font-size:.78rem}
  .trainerbtn .tb-l{display:inline;opacity:1}.trainerbtn b.num{display:none}
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .bottomnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--band-deep);border-top:4px solid var(--yellow);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
  .bottomnav a,.bottomnav button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;color:#cfd5ff;font-size:.7rem;font-weight:800;padding:6px 0;border-radius:14px;position:relative}
  .bottomnav svg{width:24px;height:24px}
  .bottomnav [aria-current="page"]{color:#14213d;background:var(--yellow)}
  .bottomnav .dot{position:absolute;top:4px;left:calc(50% + 8px);margin:0}
  .bottomnav a:focus-visible,.bottomnav button:focus-visible{outline:3px solid #fff}
  .np{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 80px)}
}

/* habitats */
.meadow .cloud,.meadow .cloud::before,.meadow .cloud::after{background:var(--cloud,#fff)}
.habdeco,.lakewater,.habfx,.wipe{position:absolute;pointer-events:none}
.habdeco{inset:0;display:none}
.lakewater{left:-2%;right:-2%;bottom:15%;height:17%;display:none;z-index:1;background:linear-gradient(#7cc4ff,#2f6fd0);overflow:hidden}
.lakewater::after{content:"";position:absolute;inset:0 -60px;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.55) 22px 40px,transparent 40px 70px);height:3px;top:30%;box-shadow:0 18px 0 rgba(255,255,255,.35);animation:waves 4s linear infinite}
@keyframes waves{to{transform:translateX(70px)}}
.habfx{inset:0;overflow:hidden;z-index:4}
.hp{position:absolute;left:var(--x);border-radius:50%;opacity:0;animation:var(--an) var(--d) var(--dl) linear infinite}
.hp.pollen{--an:hfloat;top:var(--y);width:5px;height:5px;background:#fff;box-shadow:0 0 6px #fff}
.hp.glint{--an:htwinkle;top:calc(60% + var(--y) * .2);width:6px;height:6px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);border-radius:0}
.hp.ember{--an:hrise;bottom:-5%;width:6px;height:6px;background:#ffb347;box-shadow:0 0 8px #ff6a00}
.hp.dust{--an:htwinkle;top:var(--y);width:4px;height:4px;background:#c9c2a8}
.hp.firefly{--an:htwinkle;top:calc(30% + var(--y) * .6);width:6px;height:6px;background:#fff59a;box-shadow:0 0 10px 3px #ffe14d}
.hp.snow{--an:hfall;top:-5%;width:7px;height:7px;background:#fff;box-shadow:0 0 4px rgba(255,255,255,.9)}
.hp.rain{--an:hrain;top:-10%;width:2px;height:22px;border-radius:2px;background:linear-gradient(transparent,rgba(220,235,255,.85))}
.hp.spark{--an:htwinkle;top:var(--y);width:9px;height:9px;background:#ffd6ea;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);border-radius:0}
.mist{position:absolute;left:-40%;width:180%;height:14%;top:var(--top);background:radial-gradient(ellipse at center,rgba(220,220,255,.35),transparent 70%);filter:blur(6px);animation:mist var(--d) var(--dl,0s) ease-in-out infinite alternate}
@keyframes mist{to{transform:translateX(18%)}}
@keyframes hfloat{0%,100%{opacity:0;transform:translate(0,0)}30%,70%{opacity:.85}50%{transform:translate(var(--sw),-30px)}}
@keyframes htwinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.15) translateX(var(--sw))}}
@keyframes hrise{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--sw),-420px)}}
@keyframes hfall{0%{opacity:0;transform:translate(0,0)}10%{opacity:.95}100%{opacity:.4;transform:translate(var(--sw),460px)}}
@keyframes hrain{0%{opacity:0;transform:translate(0,0) rotate(12deg)}10%{opacity:1}100%{opacity:.6;transform:translate(-60px,480px) rotate(12deg)}}
.meadow.hab-lake{--sky-1:#7ab9ff;--sky-2:#dcf0ff}
.meadow.hab-lake .lakewater{display:block}
.meadow.hab-lake .l1{opacity:0}
.meadow.hab-volcano{--sky-1:#ff6a3d;--sky-2:#ffd28a;--sun:#fff0b8;--cloud:#ffc6a1;--g1:#7a4a3a;--g2:#5e3527;--g3:#3d2219}
.meadow.hab-volcano .habdeco{display:block}
.meadow.hab-volcano .habdeco::before{content:"";position:absolute;left:4%;width:60%;bottom:26%;height:48%;background:linear-gradient(#5a2c22,#2b1510);clip-path:polygon(0 100%,38% 10%,46% 18%,54% 8%,62% 14%,100% 100%)}
.meadow.hab-volcano .habdeco::after{content:"";position:absolute;left:22%;width:26%;bottom:62%;height:16%;background:radial-gradient(ellipse at 50% 100%,#ffcc4d,#ff5a1f 45%,transparent 70%);filter:blur(4px);animation:glow 2.4s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.55}}
.meadow.hab-cave{--sky-1:#26222f;--sky-2:#4f4861;--g1:#6b6458;--g2:#57503f;--g3:#3f3a30}
.meadow.hab-cave .sunball,.meadow.hab-cave .cloud,.meadow.hab-cave .night-stars{display:none}
.meadow.hab-cave .habdeco{display:block;background:radial-gradient(ellipse 72% 86% at 50% 82%,transparent 62%,#17141f 63%)}
.meadow.hab-cave .habdeco::before{content:"";position:absolute;left:0;right:0;top:0;height:16%;background:linear-gradient(135deg,#17141f 25%,transparent 25.5%) 0 0/44px 44px,linear-gradient(225deg,#17141f 25%,transparent 25.5%) 0 0/44px 44px}
.meadow.hab-night{--sky-1:#0f0c2a;--sky-2:#3a2b62;--sun:#f5f1d8;--cloud:#4f477e;--g1:#2f4a4a;--g2:#24393a;--g3:#182828;--stars:.95}
.meadow.hab-night .sunball{width:11%;box-shadow:inset -10px -6px 0 rgba(0,0,0,.18),0 0 40px rgba(245,241,216,.6)}
.meadow.hab-snow{--sky-1:#9fc3e8;--sky-2:#f1f7ff;--sun:#fffbe8;--g1:#e6f0fa;--g2:#d1e2f2;--g3:#b8cfe6}
.meadow.hab-snow .habdeco{display:block;background:radial-gradient(ellipse 60% 30% at 20% 100%,#fff 98%,transparent 100%) 0 0/100% 100% no-repeat,radial-gradient(ellipse 55% 26% at 85% 100%,#f4f9ff 98%,transparent 100%)}
.meadow.hab-storm{--sky-1:#353d58;--sky-2:#7e88a6;--cloud:#9aa3bd;--g1:#4f8f4a;--g2:#3c7438;--g3:#2a5a29}
.meadow.hab-storm .sunball{display:none}
.meadow.hab-storm .habdeco{display:block;background:#fff;opacity:0;animation:lightning 6s infinite}
@keyframes lightning{0%,88%,92%,96%,100%{opacity:0}90%,94%{opacity:.75}}
.meadow.hab-sky{--sky-1:#3f9cff;--sky-2:#e8f5ff}
.meadow.hab-sky .habdeco{display:block;background:radial-gradient(ellipse 14% 5% at 18% 40%,#fff 95%,transparent),radial-gradient(ellipse 10% 4% at 70% 52%,#fff 95%,transparent),radial-gradient(ellipse 8% 3% at 40% 20%,rgba(255,255,255,.85) 95%,transparent)}
.meadow.hab-dusk{--sky-1:#4b2e8f;--sky-2:#f4a3c4;--sun:#ffd2e6;--cloud:#f7c5dc;--g1:#5c8f62;--g2:#477650;--g3:#335a3b}
.meadow.hab-dusk .sunball{width:22%;top:30%;right:38%;box-shadow:0 0 70px 20px rgba(255,190,220,.6)}
/* encounter flash */
.wipe{inset:0;z-index:8;opacity:0}
.wipe.go{animation:encFlash .78s linear forwards}
@keyframes encFlash{0%{opacity:1;background:#fff;clip-path:inset(0)}9%{opacity:0}17%{opacity:1;background:#fff}26%{opacity:0;clip-path:inset(0)}32%{opacity:1;background:#141a46;clip-path:inset(0)}100%{opacity:1;background:#141a46;clip-path:inset(50% 0 50% 0)}}
.meadow .wild.appear.late{animation-delay:.55s}
/* dialogue box */
.dlgbox{position:relative;border-top:3px solid #14213d;background:var(--surface);padding:10px 12px;min-height:66px}
.dlgbox::before{content:"";position:absolute;inset:7px;border:2.5px solid var(--blue);border-radius:10px;pointer-events:none}
.dlgbox p{margin:0;padding:6px 34px 6px 12px;font-family:"Pixelify Sans",var(--f-mono);font-weight:500;font-size:1.12rem;line-height:1.35;color:var(--ink);min-height:1.35em}
.dlgbox .caret{position:absolute;right:22px;bottom:14px;font-size:.7rem;color:var(--red-hot);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.meadowcard.big .encbar{border-top:3px dashed var(--line)}



.footcontact a{color:var(--yellow);font-weight:800}
.chip{font-size:max(.7rem,12px)}
.movebtn small.ko{color:var(--bad);font-weight:900}
.bagbtn span{white-space:normal;line-height:1.15}
.areabtn.locked{opacity:.75;cursor:pointer}
.throwmeter{display:inline-flex;gap:3px;vertical-align:middle;margin-left:6px}
.throwmeter i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);border:1.5px solid #fff}
.throwmeter i.f{background:var(--yellow)}
.hint-pulse{animation:hintp 1s ease-in-out infinite}
@keyframes hintp{50%{transform:scale(1.06);box-shadow:0 0 0 5px color-mix(in srgb,var(--yellow) 60%,transparent)}}
.partner.sleepy{filter:saturate(.4) brightness(.95)}
dialog#avDlg{width:min(900px,calc(100vw - 24px))}
@media (min-width:861px){.toast{top:calc(env(safe-area-inset-top,0px) + 150px)}}


/* second simplicity pass */
.filtbtn{align-self:end;justify-self:start}
.controls:not(.open) .morefilt{display:none}
.controls{grid-template-columns:minmax(0,1fr) auto}
.controls.open{grid-template-columns:minmax(0,2fr) auto repeat(3,minmax(0,1fr))}
@media (max-width:860px){.controls.open{grid-template-columns:minmax(0,1fr) auto}.controls.open .morefilt{grid-column:1/-1}}
.savebox.nocode>*:not(.nocode-msg){display:none!important}
.savebox:not(.nocode) .nocode-msg{display:none}
.nocode-msg{margin:0;font-weight:800}
.regdet summary{cursor:pointer;list-style:none}
.regdet summary::after{content:" ▾";font-size:.8em;color:var(--muted)}
.badgemore{margin-top:12px}
.avmore{margin-top:4px}
details.seo-more{margin-top:18px;border-top:2.5px dashed var(--line);padding-top:12px}
details.seo-more>summary{cursor:pointer;font-weight:900;color:var(--blue-ink);list-style:none}
details.seo-more>summary::after{content:" ▾"}
details.seo-more .seo-copy{border-top:0;margin-top:8px;padding-top:0}
.monmore{display:inline-block}
.monmore>summary{list-style:none;cursor:pointer;font-weight:800;font-size:.85rem;padding:6px 12px;border:2px solid var(--line);border-radius:999px;display:inline-block}
.monmore[open]>summary{margin-bottom:6px}
/* readability floor */
.pill,.board .hd,.tc-edit,.teamth .h,#threat .h,.cryitem .no,.ltile span,.ltile i,.plus,.sr-tag,.tc-stats div,.dexlist .chip{font-size:max(.7rem,11.5px)!important}
.chip{font-size:max(.7rem,11.5px)}
/* big screen play mode */
.fsbtn{position:absolute;top:10px;right:10px;z-index:8;border:2px solid #14213d;background:rgba(255,255,255,.92);color:#14213d;font:inherit;font-weight:900;font-size:.8rem;padding:6px 12px;border-radius:999px;cursor:pointer;box-shadow:0 3px 0 rgba(20,33,61,.25)}
.fsbtn:hover{background:var(--yellow)}

body.playmode{overflow:hidden;background:#14213d}
body.playmode header,body.playmode .bottomnav,body.playmode footer,body.playmode .toast-stub,body.playmode #view-catch>div:first-child,body.playmode .catchside,body.playmode .catchtools,body.playmode .np{display:none!important}
body.playmode .meadowcard.big{position:fixed;z-index:65;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100vw,calc((100dvh - 290px) * 16 / 11));min-width:min(100vw,360px);border-radius:0;border:0;box-shadow:none;display:flex;flex-direction:column;overflow:hidden}
body.playmode .meadowcard.big .meadow{flex:none;aspect-ratio:16/11}
body.playmode .meadowcard.big .encbar{flex:1;overflow:auto;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
@media (max-width:860px){body.playmode .meadowcard.big{width:100vw}body.playmode .meadowcard.big .meadow{aspect-ratio:5/4}}
body.playmode main>*:not(#view-catch),body.playmode #view-catch>*:not(.catchlayout),body.playmode .catchmain>*:not(.meadowcard){display:none!important}
body.playmode .meadowcard.big .encbar{justify-content:flex-start;gap:12px;flex-wrap:nowrap}
body.playmode .meadowcard.big .dlgbox{flex:none}

/* saving clarity */
.codehow{margin:8px 0;padding-left:22px;display:flex;flex-direction:column;gap:6px;line-height:1.45}
.codehow b{color:var(--blue-ink)}
.codeno{margin:4px 0 0}
.cddet{margin-top:10px}
.cddet>summary{cursor:pointer;font-weight:900;color:var(--blue-ink)}
.cdgrown{margin-top:12px}
.privnote{background:color-mix(in srgb,var(--warn) 18%,var(--surface));border:2px solid var(--warn);border-radius:12px;padding:8px 12px;font-weight:800}
.privbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:69;display:flex;align-items:center;gap:10px;background:#14213d;color:#fff;border:2px solid var(--yellow);border-radius:16px;padding:8px 10px 8px 14px;width:max-content;max-width:calc(100vw - 24px);font-weight:800;font-size:.9rem;box-shadow:0 6px 0 rgba(0,0,0,.2)}
.privbar .closex{position:static;width:30px;height:30px}
@media (min-width:861px){.privbar{bottom:24px}}
.installbtn[hidden]{display:none}
.sharecard img{display:block;width:100%;border-radius:16px;border:3px solid #14213d;margin:10px 0}
.tc-acts{gap:8px;margin-top:10px}.tc-acts .tc-btn{margin-top:0}
.meadow.isnight{--sky-1:#0c1246;--sky-2:#3a4688;--stars:1;--sun:#f3f0d6}
.meadow.isnight .sunball{box-shadow:inset -8px -5px 0 rgba(0,0,0,.15),0 0 40px rgba(245,241,216,.55)}
.stchip{margin-left:6px;font-size:max(.6rem,11px);font-weight:900;padding:1px 6px;border-radius:6px;color:#fff;vertical-align:middle}
.stchip.slp{background:#8f5bd6}.stchip.par{background:#d4a400;color:#14213d}
.movebtn.stmove{--tc:#8f5bd6}
.stoneic{width:18px;height:18px;vertical-align:-3px}
.bagitem .stoneic{width:40px;height:40px}
.evohow{margin:6px 0 0}

/* gyms */
.gbadges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.gbadge{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:2px solid var(--line)}
.gbadge svg{width:18px;height:18px;fill:var(--line)}
.gbadge.on{background:var(--tc);border-color:#14213d}
.gbadge.on svg{fill:#fff}
.tcg-b .gbadge{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.tcg-b .gbadge svg{fill:rgba(255,255,255,.35)}
.tcg-b .gbadge.on{background:var(--tc);border-color:#fff}.tcg-b .gbadge.on svg{fill:#fff}
.gymnext{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:16px;border:2px solid var(--line);background:color-mix(in srgb,var(--tc) 12%,var(--surface))}
.gymnext small{display:block;color:var(--muted);font-weight:700;font-size:.8rem}
.gymnext .warnline{color:var(--warn)}
.gav{width:56px}
.leader{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:2px;width:64px}
.leader .avatar{width:56px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.25))}
.leader span{font-weight:900;font-size:.72rem;background:#14213d;color:var(--yellow);padding:1px 8px;border-radius:99px}
.leader[hidden]{display:none}

/* trading */
dialog#tradeDlg{width:min(620px,calc(100vw - 24px))}
.tbig{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.tpair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;margin:12px 0}
.tpair.one{grid-template-columns:minmax(0,220px)}
.tarrow{font-size:2rem;font-weight:900;color:var(--blue-ink)}
.tcardt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border:2.5px solid var(--line);border-radius:18px;background:var(--surface-2);text-align:center}
.tcardt .pic{width:110px}
.twho{display:flex;align-items:center;gap:6px;font-size:.85rem}
.twho .avatar{width:30px}
.tcode b{letter-spacing:.12em}
.twait{display:flex;align-items:center;gap:8px}
.spin{width:16px;height:16px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--blue);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
button.playitem{font:inherit;text-align:left;cursor:pointer;color:inherit}

/* contrast fixes */
.chip:not(.lt){background:color-mix(in srgb,var(--tc,var(--t-normal)) 70%,#0b0f2e)}
.encbar .tag{color:var(--red)}
:root[data-theme="dark"] .encbar .tag{color:#ff6b6b}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .encbar .tag{color:#ff6b6b}}
.badge.gold{color:#14213d}
.medal{opacity:1;filter:none}.medal:not(.on) .hex{opacity:.4;filter:grayscale(1)}.medal:not(.on) b{color:var(--muted)}
.pill.warn{color:#7a4f00}.pill.bad{color:#a5221d}
.gymnext .warnline{color:#7a4f00}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--good:#16804a}}
:root[data-theme="light"]{--good:#16804a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pill.warn,:root:not([data-theme="light"]) .gymnext .warnline{color:#f5b52e}:root:not([data-theme="light"]) .pill.bad{color:#ff6b5e}}
:root[data-theme="dark"] .pill.warn,:root[data-theme="dark"] .gymnext .warnline{color:#f5b52e}:root[data-theme="dark"] .pill.bad{color:#ff6b5e}
.gstage .q{background:var(--red)}
.typebar .chip{opacity:1}.typebar .chip[aria-pressed="true"]{box-shadow:0 0 0 3px var(--yellow),0 3px 0 rgba(0,0,0,.3)}

/* showpiece trainer card */
.tc-who{grid-template-columns:140px minmax(0,1fr)}
.tc-since{font-size:.8rem;font-weight:700;color:#cfd5ff;margin-top:4px}
.tc-big{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center}
.tc-ring{--p:0;width:118px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--yellow) calc(var(--p)*1%),rgba(255,255,255,.15) 0);position:relative}
.tc-ring>div{width:86px;aspect-ratio:1;border-radius:50%;background:var(--band-deep);display:flex;flex-direction:column;align-items:center;justify-content:center}
.tc-ring b{font-size:1.5rem;color:#fff;line-height:1}.tc-ring small{font-size:.66rem;font-weight:800;color:#cfd5ff}
.tc-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tc-nums div{background:rgba(255,255,255,.1);border-radius:12px;padding:8px 10px;font-size:.7rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:#cfd5ff}
.tc-nums b{display:block;font-size:1.35rem;color:#fff;letter-spacing:0}.tc-nums b small{font-size:.8rem;color:#cfd5ff}
.tc-case{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;background:rgba(0,0,0,.18);border-radius:16px;padding:10px;border:2px solid rgba(255,255,255,.12)}
.tcb{display:flex;flex-direction:column;align-items:center;gap:3px}
.tcb svg{width:100%;max-width:40px;aspect-ratio:1;padding:6px;border-radius:50%;background:rgba(255,255,255,.1);fill:rgba(255,255,255,.3);box-sizing:border-box}
.tcb.on svg{background:color-mix(in srgb,var(--tc) 75%,#0b0f2e);fill:#fff;box-shadow:0 0 0 2px #fff,0 0 14px color-mix(in srgb,var(--tc) 70%,transparent)}
.tcb small{font-size:max(.55rem,10px);font-weight:800;color:#cfd5ff;text-transform:uppercase}
.tc-show{background:var(--yellow)!important;color:#14213d!important}
.tc-cap .lv{font-family:var(--f-mono);font-size:.8em;color:var(--yellow)}
.peds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:10px}
.ped{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;border:0;background:radial-gradient(ellipse at 50% 92%,color-mix(in srgb,var(--tc) 45%,transparent) 0 30%,transparent 60%);cursor:pointer;padding:4px 4px 0;font:inherit;color:inherit;animation:pedIn .5s var(--d,0ms) both cubic-bezier(.3,1.4,.5,1)}
.ped .pic{width:100%;max-width:110px;filter:drop-shadow(0 6px 0 rgba(20,33,61,.15));transition:transform .2s}
.ped:hover .pic{transform:translateY(-4px) scale(1.04)}
.pbase{width:100%;background:linear-gradient(#e9ecfb,#cfd5f2);border:2.5px solid #14213d;border-radius:12px;padding:6px 4px;display:flex;flex-direction:column;align-items:center;color:#14213d}
.pbase b{font-size:.82rem;line-height:1.1;text-align:center}.pbase small{font-size:.72rem;font-weight:800;color:#3b4cca}
.ped.shiny .pbase{background:linear-gradient(#fff6b8,#ffde00)}
.pshine{position:absolute;top:2px;right:8px;color:#e6b800;font-size:1.2rem;animation:twinkle 1.6s ease-in-out infinite}
.ped.empty{cursor:default;opacity:.5;background:none;min-height:140px}
@keyframes pedIn{from{opacity:0;transform:translateY(16px)}}
@keyframes twinkle{50%{opacity:.3;transform:scale(.8)}}
.pgrid .ctile .scn{position:absolute;top:4px;left:6px;background:var(--red);color:#fff;font-weight:900;font-size:.75rem;border-radius:99px;width:20px;height:20px;display:grid;place-items:center}
dialog.showdlg{border:0;padding:0;width:min(980px,calc(100vw - 16px));max-height:calc(100dvh - 16px);border-radius:28px;background:radial-gradient(circle at 50% 0%,#5566e0,#1c2470 60%,#0b1036);color:#fff;overflow:auto}
dialog.showdlg::backdrop{background:rgba(5,8,30,.85)}
.show{position:relative;padding:26px 22px 22px;display:flex;flex-direction:column;gap:18px}
.show .closex{position:absolute;top:14px;right:14px}
.showtop{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;align-items:center}
.showav{animation:pedIn .6s both cubic-bezier(.3,1.4,.5,1)}
.showname{font-family:"Luckiest Guy",var(--f-display);font-size:clamp(2rem,6vw,3.4rem);margin:2px 0;color:#fff;line-height:1}
.showstats{display:flex;gap:14px;flex-wrap:wrap;font-weight:800;color:#cfd5ff}.showstats b{color:var(--yellow);font-size:1.2rem}
.showcase2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.showcase2 .pbase{background:rgba(255,255,255,.92)}
.showcase-case{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;max-width:560px;margin-inline:auto;width:100%}
.showfoot{text-align:center;margin:0;color:#cfd5ff;font-weight:700}.showfoot b{color:#fff}
@media (max-width:760px){.peds{grid-template-columns:repeat(3,minmax(0,1fr))}.tc-who{grid-template-columns:96px minmax(0,1fr)}.tc-big{grid-template-columns:minmax(0,1fr)}.tc-ring{margin-inline:auto}.showtop{grid-template-columns:90px minmax(0,1fr)}.tc-case{gap:3px;padding:8px}}
.show .closex{color:#14213d;background:#fff}
@media (max-width:760px){.tcb small{display:none}}

/* world features */
:root{--mapland:#7cc36a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--mapland:#2f6e3a}}
:root[data-theme="dark"]{--mapland:#2f6e3a}
.rmap{position:relative;width:100%;aspect-ratio:16/8;margin-top:10px;border-radius:18px;background:linear-gradient(#5aa9ec,#3f7ee0);border:2.5px solid #14213d;overflow:hidden}
.mapbg{position:absolute;inset:0;width:100%;height:100%}
.mnode{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;cursor:pointer;padding:0;font:inherit}
.mnode .dot{width:30px;height:30px;border-radius:50%;background:var(--mc);border:3px solid #14213d;display:grid;place-items:center;font-size:.8rem;box-shadow:0 3px 0 rgba(0,0,0,.25);overflow:hidden}
.mnode .dot img{width:34px;height:34px;object-fit:contain}
.mnode.cur .dot{width:40px;height:40px;background:var(--yellow);box-shadow:0 0 0 4px rgba(255,255,255,.7),0 3px 0 rgba(0,0,0,.25);animation:mbob 1.6s ease-in-out infinite}
.mnode.locked .dot{background:#9aa0b8;filter:grayscale(1)}
.mnode .ml{font-size:max(.62rem,11px);font-weight:900;background:rgba(20,33,61,.82);color:#fff;padding:1px 6px;border-radius:8px;white-space:nowrap}
.mnode.locked .ml{opacity:.75}
.mnode .gi{font-style:normal;color:#ffde00}.mnode .gi.won{color:#7dffb0}
.mnode .ri{font-style:normal;background:#ff3b3b;color:#fff;border-radius:50%;padding:0 5px;animation:mbob .8s infinite}
@keyframes mbob{50%{transform:translateY(-3px)}}
@media (max-width:600px){.rmap{aspect-ratio:4/3}.mnode .ml{font-size:10.5px}}
.wxline{margin-top:4px}.roamline{color:var(--red)}
.musbtn{position:absolute;top:10px;left:10px;z-index:8;border:2px solid #14213d;background:rgba(255,255,255,.92);color:#14213d;font:inherit;font-weight:900;font-size:.75rem;padding:5px 10px;border-radius:999px;cursor:pointer}
.musbtn{width:38px;height:38px;padding:0;display:grid;place-items:center;font-size:1.05rem;border-radius:50%}
.meadow.battle .musbtn{left:auto;right:136px}
.meadow .partner.follow{display:block;left:6%;bottom:6%;width:15%;animation:fbob 1.2s ease-in-out infinite}
.meadow.exploring .partner.follow{display:block}
@keyframes fbob{50%{transform:scaleX(-1) translateY(-6%)}0%,100%{transform:scaleX(-1)}}
.swirl{position:absolute;inset:-20%;z-index:20;pointer-events:none;background:conic-gradient(from 0deg,#14213d 0 25%,transparent 0 50%,#14213d 0 75%,transparent 0);animation:swirl .6s ease-in forwards}
@keyframes swirl{0%{opacity:0;transform:rotate(0) scale(.2)}40%{opacity:.85}100%{opacity:0;transform:rotate(540deg) scale(2.2)}}
.league{border:2.5px solid #14213d;border-radius:16px;padding:12px;margin-bottom:14px;background:linear-gradient(135deg,#ffde00,#ffb800);color:#14213d;display:flex;flex-direction:column;gap:8px}
.league .eyebrow{color:#14213d}
.lgsteps{display:flex;gap:6px}.lgs{width:38px;opacity:.45}.lgs.done{opacity:1;filter:grayscale(.6)}.lgs.now{opacity:1;transform:scale(1.15)}
.hofe{padding:10px 0;border-top:2px dashed var(--line)}
.hofteam{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:8px}
.hofteam>div{display:flex;flex-direction:column;align-items:center;text-align:center;font-weight:800}
.hofteam .pic{width:72px}.hofteam small{font-size:.75rem}
.hofpanel{background:linear-gradient(135deg,color-mix(in srgb,#ffde00 22%,var(--surface)),var(--surface))}
.centre{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;align-items:center}
.centreav{width:110px}
.egg{display:inline-block;width:40px}.egg svg{width:100%}
.egg.big{width:120px;margin:16px auto;display:block}
.eggbox{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.eggbox .pic{width:160px}
.bic{width:1.3em;height:1.3em;vertical-align:-.28em;margin-right:4px}
.cover{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0}
.cover.battle{inset:-45%;background:conic-gradient(#14213d 0 25%,#0b1036 0 50%,#14213d 0 75%,#0b1036 0)}
.cover.fade{background:#0b1036}
.meadow .partner{will-change:transform}
.nextbox{margin-top:12px;padding:14px;border-radius:16px;border:2.5px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;gap:10px}
.nextbox.caught{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,var(--surface))}
.nextbox.lost{border-color:var(--warn)}
.nextbox p{margin:0;font-weight:700;line-height:1.4}
.nextbtn{font-size:1.05rem;padding:12px 20px;animation:nextIn .5s .8s both cubic-bezier(.3,1.5,.5,1),nextPulse 1.6s 2.2s ease-in-out 3}
@keyframes nextIn{from{opacity:0;transform:translateY(8px) scale(.95)}}
@keyframes nextPulse{50%{transform:scale(1.05);box-shadow:0 0 0 6px color-mix(in srgb,var(--yellow) 60%,transparent)}}
@media (max-width:600px){.nextbox .nextbtn{width:100%}}
@media (prefers-reduced-motion:reduce){.nextbtn{animation:none}}
/* trainer character */
.avatar{display:block;width:100%;height:auto}
.tc-who{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:center}
.tc-av{position:relative;border:0;padding:0;background:none;cursor:pointer;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.tc-av:hover{box-shadow:0 0 0 4px var(--yellow)}
.tc-edit{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:var(--yellow);color:#14213d;font-size:.62rem;font-weight:900;padding:2px 8px;border-radius:99px;border:2px solid #14213d}
.tc-title{margin-top:6px;font-weight:900;color:var(--yellow);font-size:.9rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tc-btn{margin-top:10px;background:#fff;color:#14213d}
.tb-av{display:inline-block;width:26px;height:26px;margin:-4px 2px -4px -6px;vertical-align:middle}
.tb-av .avatar{width:26px;height:26px}
.avcd{max-width:860px}
.avgrid{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:20px;margin-top:10px}
.avleft{display:flex;flex-direction:column;align-items:center;gap:12px;position:sticky;top:0;align-self:start}
.avprev{width:100%;max-width:220px;filter:drop-shadow(0 6px 0 rgba(20,33,61,.15))}
.avopts{display:flex;flex-direction:column;gap:12px;max-height:min(58vh,520px);overflow:auto;padding-right:4px}
.avrow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center}
.avrow>span{font-weight:900;font-size:.86rem}
.sws{display:flex;flex-wrap:wrap;gap:8px}
.sw{width:34px;height:34px;border-radius:50%;background:var(--c);border:3px solid var(--line);cursor:pointer;padding:0}
.sw.on{border-color:#14213d;box-shadow:0 0 0 3px var(--yellow)}
.avopts .chips{display:flex;flex-wrap:wrap;gap:6px}
.avchip{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 12px;font-weight:800;font-size:.84rem;cursor:pointer;color:var(--ink);font-family:inherit}
.avchip.on{background:var(--yellow);border-color:#14213d;color:#14213d}
.avchip:disabled{opacity:.5;cursor:not-allowed}
.avsave{margin-top:14px}
@media (max-width:700px){.avgrid{grid-template-columns:minmax(0,1fr)}.avleft{position:static}.avprev{max-width:150px}.avopts{max-height:none;overflow:visible}.avrow{grid-template-columns:minmax(0,1fr)}.tc-who{grid-template-columns:84px minmax(0,1fr)}}
/* trainer page */
.trpartner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:center}
.trpartner .tpart{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--tc) 45%,var(--surface)) 0 40%,transparent 41%);display:grid;place-items:center;padding:10px}
.trpartner .tpart .pic{width:min(100%,260px)}
.trpartner h2 .lv,.pmini .lv{font-family:var(--f-mono);font-size:.8em;color:var(--muted);margin-left:4px}
.trbars{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.trbars .lbl{display:flex;justify-content:space-between;font-size:.78rem;font-weight:800;color:var(--muted)}
.meter2{height:12px;border-radius:99px;background:var(--surface-2);border:1.5px solid #14213d;overflow:hidden}
.meter2 i{display:block;height:100%;border-radius:99px}
.trstats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:8px 0}
.trstats div{background:var(--surface-2);border-radius:10px;padding:6px;text-align:center;font-size:.68rem;font-weight:800;color:var(--muted)}
.trstats b{display:block;font-size:1rem;color:var(--ink);font-family:var(--f-mono)}
.trhead{justify-content:space-between;align-items:end;margin-bottom:12px}
.trgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.trtile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:8px 8px 10px;cursor:pointer;text-align:center;color:var(--ink);font:inherit}
.trtile:hover{border-color:var(--blue)}
.trtile.cur{border-color:#14213d;background:color-mix(in srgb,var(--yellow) 30%,var(--surface))}
.trtile .pic{width:76px}
.trtile b{font-size:.84rem;font-weight:900;line-height:1.1}
.trtile .tl{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);font-weight:700}
.trtile .mini{width:100%;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.trtile .mini i{display:block;height:100%}
.trtile .ptag{position:absolute;top:6px;left:6px;font-size:.6rem;font-weight:900;background:#14213d;color:var(--yellow);padding:2px 6px;border-radius:6px}
.xpbar{display:block;height:6px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:6px}
.xpbar i{display:block;height:100%;background:var(--blue)}
.pstat{font-size:.78rem;font-weight:800;color:var(--muted);align-self:center}
@media (max-width:760px){.trpartner{grid-template-columns:minmax(0,1fr)}.trpartner .tpart .pic{width:min(60%,200px)}.trstats{grid-template-columns:repeat(3,minmax(0,1fr))}.trhead{flex-direction:column;align-items:stretch}}
/* explore + battle */
.meadow.exploring .wild,.meadow.exploring .shadow{display:none}
.meadow .partner{position:absolute;left:3%;bottom:2%;width:34%;z-index:4;display:none;transform:scaleX(-1)}
.meadow.battle .partner{display:block}
.meadow .partner.in .pic{animation:slideIn .55s cubic-bezier(.3,1.3,.5,1) .35s both}
@keyframes slideIn{from{transform:translateX(70%);opacity:0}}
.meadow.battle .wild{left:68%;width:34%;bottom:30%}
.meadow.battle .shadow{left:68%;bottom:28%;width:24%}
.tufts{position:absolute;inset:0;z-index:5;pointer-events:none}
.tuft{all:unset;position:absolute;width:14%;aspect-ratio:3/2;translate:-50% -50%;cursor:pointer;pointer-events:auto;--tuft:var(--g1)}
.tuft svg{width:100%;display:block;filter:drop-shadow(0 3px 0 rgba(0,0,0,.22));transition:transform .15s;transform-origin:50% 100%}
.tuft:hover:not([disabled]) svg{transform:translateY(-4px) scale(1.06)}
.tuft.hot{--tuft:var(--g2)}
.tuft.hot svg{animation:tuftRustle .55s ease-in-out infinite}
.tuft.hot::after{content:"!";position:absolute;left:50%;top:-30%;translate:-50% 0;font-family:"Pixelify Sans",var(--f-mono);font-weight:700;color:#fff;background:var(--red-hot);border:2px solid #14213d;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-size:.8rem;animation:bump 1s ease-in-out infinite}
@keyframes tuftRustle{25%{transform:rotate(-7deg) translateX(-2px)}75%{transform:rotate(7deg) translateX(2px)}}
.tuft.searching svg{animation:tuftRustle .16s 4}
.tuft.done{cursor:default;opacity:.4}
.tuft.done svg{transform:scaleY(.45)}
.tuft.done::after{display:none}
.tuft:focus-visible{outline:3px solid var(--yellow);border-radius:8px}
.hud{position:absolute;z-index:6;background:var(--surface);border:3px solid #14213d;border-radius:14px;padding:7px 12px 8px;min-width:150px;max-width:48%;box-shadow:0 4px 0 rgba(20,26,70,.35);font-size:.85rem;color:var(--ink)}
.hud b{font-weight:900;font-size:.95rem}
.hud .lv{font-family:"Pixelify Sans",var(--f-mono);font-size:.78rem;color:var(--muted);font-weight:600}
.whud{left:4%;top:6%}
.phud{right:4%;bottom:7%}
.hud .owned svg,.hud .owned img{width:14px;height:14px;vertical-align:-2px;margin-left:5px;display:inline-block}
.hpbar{display:flex;align-items:center;gap:6px;margin-top:5px}
.hpbar span{font-size:.6rem;font-weight:900;background:#14213d;color:var(--yellow);padding:1px 5px;border-radius:5px}
.hpbar i{flex:1;height:9px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1.5px solid #14213d;display:block}
.hpbar em{display:block;height:100%;transition:width .55s ease,background .3s}
.phud small{display:block;text-align:right;color:var(--muted);font-size:.72rem;margin-top:2px}
.meadow .fxhit{border-radius:50%;background:radial-gradient(circle,#fff 0 18%,var(--hc) 45%,transparent 70%)}
.dmgnum{position:absolute;z-index:7;font-family:"Pixelify Sans",var(--f-mono);font-weight:700;font-size:1.35rem;color:#fff;text-shadow:0 2px 0 #14213d,0 0 6px #14213d;pointer-events:none}
.dmgnum.se{color:var(--yellow)}
.areas{display:flex;gap:6px;flex-wrap:wrap}
.areabtn{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 12px 5px 8px;font-weight:800;font-size:.8rem;cursor:pointer;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.areabtn::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--ac);border:1.5px solid #14213d}
.areabtn.locked{opacity:.55;cursor:not-allowed;padding-left:12px}.areabtn.locked::before{display:none}
.trackline{margin-top:8px}.linkbtn{background:none;border:0;padding:0;color:var(--blue-ink);font-weight:800;text-decoration:underline;cursor:pointer;font:inherit}
.areabtn[aria-pressed="true"]{border-color:#14213d;background:var(--yellow);color:#14213d}
.areabtn.hab-meadow{--ac:#4ea83a}.areabtn.hab-lake{--ac:#3f7ee0}.areabtn.hab-volcano{--ac:#ec6a1f}.areabtn.hab-cave{--ac:#8a7d5a}.areabtn.hab-night{--ac:#5f4d92}.areabtn.hab-snow{--ac:#9fd6f0}.areabtn.hab-storm{--ac:#f2c200}.areabtn.hab-sky{--ac:#7d6ee0}.areabtn.hab-dusk{--ac:#ea4f80}
.moves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.movebtn{border:2.5px solid #14213d;border-radius:14px;background:color-mix(in srgb,var(--tc) 22%,var(--surface));padding:8px 10px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:2px;box-shadow:0 3px 0 #14213d;color:var(--ink);font:inherit;transition:transform .1s}
.movebtn b{font-weight:900;font-size:.9rem}
.movebtn small{font-size:.7rem;font-weight:800;color:var(--muted)}
.movebtn.se small{color:var(--good)}.movebtn.nve small{color:var(--warn)}.movebtn.ne small{color:var(--bad)}
.movebtn:hover:not([disabled]){transform:translateY(-2px)}
.movebtn[disabled]{opacity:.5;cursor:default}
.encrow.actions{justify-content:flex-start}
.tipline{flex:1;min-width:180px;margin:0}
.pmini{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;margin:8px 0}
.pmini .pic{width:72px}
.pmini b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.3rem;line-height:1.1;margin-bottom:4px}
.pmini small{display:block;color:var(--muted);font-weight:700;margin-top:4px}
.pmoves{list-style:none;padding:0;margin:0 0 10px;display:flex;flex-direction:column;gap:6px}
.pmoves li{display:flex;justify-content:space-between;align-items:center}
.pmoves small{color:var(--muted);font-weight:700}
.starters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.startercard{border:2.5px solid var(--line);border-radius:18px;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tc) 30%,var(--surface)),var(--surface) 70%);padding:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--ink);font:inherit;transition:transform .12s}
.startercard:hover{border-color:#14213d;transform:translateY(-3px)}
.startercard .pic{width:90%}
.startercard b{font-weight:900}
dialog#partnerDlg{width:min(760px,calc(100vw - 24px))}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;max-height:55dvh;overflow:auto;padding:2px}
.ctile.cur{border-color:var(--yellow);box-shadow:0 0 0 3px var(--yellow)}
@media (max-width:560px){
  .moves{gap:6px}
  .movebtn{padding:7px 8px}
  .movebtn b{font-size:.8rem}
  .movebtn small{font-size:.62rem}
  .hud{min-width:0;padding:5px 8px 6px;font-size:.72rem;border-width:2.5px}
  .hud b{font-size:.8rem}
  .tuft{width:18%}
  .starters{gap:6px}
}

/* pokémon of the day */
.potd{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);border:3px solid #14213d;border-radius:28px;overflow:hidden;box-shadow:7px 7px 0 var(--gold);background:var(--surface)}
.potd-art{position:relative;overflow:hidden;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--tc) 55%,var(--surface)) 0 32%,color-mix(in srgb,var(--tc) 22%,var(--surface)) 33% 100%);border-right:3px solid #14213d;min-height:280px}
.potd-art .pic{width:min(100%,280px);position:relative;z-index:1}
.potd-art .pic img.ok{animation:breathe 3.2s ease-in-out infinite}
.potd-tag{position:absolute;top:14px;left:14px;z-index:2}
.potd-info{padding:24px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.potd-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:800;color:var(--muted)}
.potd-facts{margin:4px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.potd-facts li{position:relative;padding-left:22px;line-height:1.5}
.potd-facts li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:11px;background:var(--tc);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.potd-bonus{margin:0;font-weight:800;color:var(--blue-ink)}
.potdmini{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center}
.potdmini .pic{width:64px}
.potdmini b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.3rem;line-height:1.1}
.potdmini small{color:var(--muted);font-weight:700}
/* catch page */
.catchlayout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
.catchmain,.catchside{display:flex;flex-direction:column;gap:16px;min-width:0}
.meadowcard.big .meadow{aspect-ratio:16/11}
.catchtools{justify-content:space-between}
.todaystats{display:flex;gap:8px}
.todaystats div{background:var(--surface);border:2px solid var(--line);border-radius:12px;padding:6px 12px;font-size:.66rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.todaystats b{display:block;font-size:1.1rem;color:var(--ink);letter-spacing:0}
.recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.ltiles{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.ltile{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface-2);border:2px solid transparent;border-radius:12px;padding:7px 2px;text-align:center}
.ltile span{font-size:.58rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ltile b{font-family:var(--f-display);font-weight:400;font-size:1.05rem;color:var(--ink)}
.ltile small{display:none}
.ltile .plus{font-style:normal;font-size:.56rem;font-weight:900;color:var(--blue-ink);text-transform:uppercase;letter-spacing:.06em}
.ltile.done{background:color-mix(in srgb,var(--good) 18%,var(--surface));}
.ltile.done b{color:var(--good)}
.ltile.today{border-color:var(--red-hot);background:var(--yellow-soft);animation:bump 1.2s ease-in-out infinite}
.ltile:last-child b{color:var(--gold)}
.missions{display:flex;flex-direction:column;gap:10px}
.mission{border:2px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:7px;background:var(--surface)}
.mission.ready{border-color:var(--good);background:color-mix(in srgb,var(--good) 8%,var(--surface))}
.mission.claimed{opacity:.6}
.mtop{display:flex;justify-content:space-between;gap:10px;font-size:.9rem}
.mtop .num{color:var(--muted);font-size:.8rem;white-space:nowrap}
.mbar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.mbar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--yellow));border-radius:99px}
.mfoot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mfoot small{color:var(--muted);font-weight:700;font-size:.74rem}
.earn ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:.88rem;color:var(--muted)}
.earn li b{display:block;color:var(--ink)}
.berrybtn svg{width:22px;height:22px}
.berrybtn.on{border-color:#ff5fa2;background:color-mix(in srgb,#ff5fa2 14%,var(--surface))}
/* trainer code dialog */
dialog.codedlg{border:0;padding:0;background:transparent;width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;color:var(--ink)}
dialog.codedlg::backdrop{background:rgba(13,19,48,.62);backdrop-filter:blur(4px)}
.cd{position:relative;background:var(--surface);border:3px solid #14213d;border-radius:26px;box-shadow:7px 7px 0 var(--gold);padding:24px;display:flex;flex-direction:column;gap:12px;animation:sheetIn .35s cubic-bezier(.3,1.3,.5,1)}
.cd p{margin:0;line-height:1.55}
.cd .closex{position:absolute;top:14px;right:14px;margin:0}
.cd .codebox{align-self:flex-start}
.cd #cdImg img{width:100%;border-radius:14px;border:2px solid var(--line);display:block;margin-bottom:8px}
.cdchk{display:flex;gap:8px;align-items:center;font-weight:800;font-size:.9rem;cursor:pointer}
.cdchk input{width:20px;height:20px;accent-color:var(--blue)}

.codewrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.codebox{display:flex;flex-direction:column;gap:2px;background:var(--band-deep);color:#fff;border:3px solid var(--yellow);border-radius:16px;padding:10px 18px}
.codebox span{font-size:.66rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.codebox b{font-size:1.6rem;letter-spacing:.12em}
.cloudst{margin:10px 0 0}
.cloudst.saved{color:var(--good)}
.cloudst.error{color:var(--bad)}
.codeuse{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:14px}
.codeuse .input{letter-spacing:.12em;text-transform:uppercase}
.adv summary{cursor:pointer;font-weight:800;color:var(--muted);font-size:.9rem}


@media (max-width:860px){
  .hero,.gamewrap,.teamlayout{grid-template-columns:minmax(0,1fr)}
  .hero .meadowcard{order:-1}
  .catchlayout{grid-template-columns:minmax(0,1fr)}
  .potd{grid-template-columns:minmax(0,1fr)}
  .potd-art{border-right:0;border-bottom:3px solid #14213d;min-height:220px}
  .potd-art .pic{width:min(70%,220px)}
  .meadowcard.big .meadow{aspect-ratio:5/4}
  .tcard,.minegrid{grid-template-columns:minmax(0,1fr)}
  .tc-side{border-left:0;border-top:3px dashed rgba(255,255,255,.2);min-height:200px}
  .sheet{overflow:clip}
  .closex{position:fixed;top:calc(20px + env(safe-area-inset-top,0px));right:calc(20px + env(safe-area-inset-right,0px));margin:0;box-shadow:0 3px 0 #14213d}

  .sheet{grid-template-columns:minmax(0,1fr);overflow:auto}
  .sheet .left{border-right:0;border-bottom:3px solid #14213d}
  .sheet .left .rel{width:min(64%,250px)}
  .sheet .right{overflow:visible}
  .controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .controls .field:first-child{grid-column:1/-1}
  .teamgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .result,.qresult{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
  .result .relbox{width:170px}
  .qresult .relbox{width:220px}
  .result .row,.qresult .row{justify-content:center}
}
@media (max-width:440px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .opts{grid-template-columns:minmax(0,1fr)}
  .threat{grid-template-columns:78px minmax(0,1fr) minmax(0,1fr) 70px}
  .facts,.teamstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand b{font-size:1.35rem}
  .brand svg.wordmark{height:52px}
  .tc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .regrow{grid-template-columns:96px minmax(0,1fr) 64px}
  .bagview{grid-template-columns:repeat(3,minmax(0,1fr))}
  .colgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .np{grid-template-columns:44px minmax(0,1fr) auto;gap:8px}
  .np input[type=range]{display:none}
  .np .pic{width:44px}
  .crygrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .stats{gap:14px}
  .hero .stats b{font-size:1.35rem}
  .hero .cta .btn{flex:1}
}
@media (hover:none){.card{transform:none}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rel-orb,.rel-flash,.rel-spark,.fx{display:none}
}
.swpanel{margin-top:10px}
.swgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.swcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px 10px;border:2px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;font:inherit;color:var(--ink);text-align:center;transition:transform .15s,border-color .15s}
.swcard img{width:64px;height:64px;object-fit:contain}
.swcard b{font-size:.82rem;line-height:1.15}
.swcard .swlv{font-size:.7rem;color:var(--muted);font-weight:700}
.swcard small{font-size:.68rem;font-weight:800;color:var(--muted)}
.swcard .swgood{color:var(--good)}
.swcard.strong{border-color:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent)}
.swcard:not(:disabled):hover{transform:translateY(-2px);border-color:var(--ink)}
.swcard:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
.swhp{display:block;width:80%;height:6px;border-radius:9px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden;margin:3px 0 1px}
.swhp em{display:block;height:100%;border-radius:9px}
.swdot{color:#f5b301;font-size:.85em}
@media (min-width:760px){.swgrid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.swcard{transition:none}}
.evobox{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;margin:12px 0;padding:10px 12px;border:2px dashed var(--line);border-radius:16px;background:color-mix(in srgb,var(--blue) 5%,var(--surface))}
.evobox.ready{border:2px solid var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface));animation:nextIn .4s ease-out}
.evopics{display:flex;align-items:center;gap:2px}
.evopics .pic,.evoto{width:48px;flex:none}.evoto .pic{width:48px}
.evoarr{font-weight:900;color:var(--muted)}
.evoto.mystery img{filter:brightness(0);opacity:.55}
.evotxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.evotxt b{font-size:.95rem}
.evobox.ready .evotxt b{color:var(--good)}
.evotxt span{font-size:.85rem;display:flex;gap:6px;align-items:center}
.evotxt small{font-size:.78rem;color:var(--muted);font-weight:700}
.evotxt .stoneic{width:18px;height:18px;flex:none}
.evobar{display:block;height:8px;border-radius:9px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden;max-width:260px}
.evobar em{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--good));border-radius:9px}
.evoacts{grid-column:1/-1}
.evoacts:empty{display:none}
.evoacts .stoneic,.evoitem .stoneic{width:16px;height:16px;vertical-align:-3px}
.evonone{margin:10px 0}
.evopanel{border:2px solid var(--good)}
.evolist{display:grid;gap:8px;margin-top:8px}
.evoitem{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border:2px solid var(--line);border-radius:14px;background:var(--surface)}
.evoitem .pic{width:52px}
.evoitem b{display:block;font-size:.9rem}
.evoitem small{color:var(--muted);font-weight:700;font-size:.76rem}
.evotag{display:inline-block;margin-top:2px;font-size:.66rem;font-weight:900;color:#fff;background:var(--good);border-radius:999px;padding:1px 8px}
@media (min-width:760px){.evolist{grid-template-columns:repeat(2,minmax(0,1fr))}#evoPanelC .evolist{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.evobox.ready{animation:none}}
dialog.evodlg{border:0;border-radius:24px;padding:0;width:min(440px,calc(100vw - 32px));background:var(--surface);color:var(--ink)}
dialog.evodlg::backdrop{background:rgba(10,14,40,.82)}
.evocd{text-align:center;padding:22px 20px 20px}
.evocd .h2{min-height:2.6em}
.evostage{position:relative;width:200px;height:200px;margin:8px auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,color-mix(in srgb,var(--blue) 18%,transparent),transparent 70%)}
.evostage .pic{width:170px}
.evostage.morph .pic img{filter:brightness(0) invert(1) drop-shadow(0 0 12px #9fd3ff)}
.evostage.morph{background:radial-gradient(circle,#bfe3ff,transparent 70%)}
.evostage.flash::after{content:"";position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(circle,#fff,transparent 70%);animation:evoFlash .35s ease-out}
@keyframes evoFlash{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.4)}}
.evob.reveal{animation:pop .55s cubic-bezier(.3,1.6,.5,1)}
.evosub{min-height:1.4em}
@media (prefers-reduced-motion:reduce){.evostage.flash::after,.evob.reveal{animation:none}}
.nextbox.gymwon{border-color:var(--good);background:color-mix(in srgb,var(--good) 12%,var(--surface))}
.wonmsg{margin:0 0 10px;font-size:1rem}
.wonmsg>b{display:block;font-size:1.15rem;color:var(--good);margin-bottom:6px}
.rewards{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 10px}
.rwlab{font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.rwi{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 6px;border-radius:999px;background:var(--surface);border:2px solid var(--line);font-weight:800;font-size:.82rem}
.rwi .gbadge{width:22px;height:22px}
.rwi .stoneic{width:18px;height:18px}
.bigline{font-weight:800;margin:6px 0 10px}
.nextcard{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;background:var(--surface);border:2px dashed var(--line);margin:4px 0 2px}
.nextcard .gav{width:52px;flex:none}
.nextcard b{display:block}
.nextcard small{display:block;color:var(--muted);font-weight:700;font-size:.8rem}
.nextcard .eyebrow{display:block;margin:0 0 1px}

/* ---------- site pages ---------- */
.seo-copy{max-width:76ch;display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:22px;border-top:2.5px dashed color-mix(in srgb,var(--blue) 25%,var(--line));color:var(--ink)}
.seo-copy p{margin:0;line-height:1.65}
.seo-copy a{color:var(--blue-ink);font-weight:800}
.faq{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.faq h3{font-size:1.02rem;font-weight:900;margin:10px 0 0}
.faq p{color:var(--muted)}
.footnav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px}
.footnav a{color:#fff;font-weight:800;text-decoration:none}
.footnav a:hover{text-decoration:underline;color:var(--yellow)}
.pp{display:flex;flex-direction:column;gap:20px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:.85rem;font-weight:800;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--blue-ink);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.pp-head{display:flex;flex-direction:column;gap:6px}
.pp-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center;background:var(--surface);border:3px solid #14213d;border-radius:28px;box-shadow:7px 7px 0 var(--blue);overflow:hidden}
.pp-art{background:radial-gradient(circle at 50% 46%,color-mix(in srgb,var(--tc) 55%,var(--surface)) 0 30%,color-mix(in srgb,var(--tc) 25%,var(--surface)) 31% 100%);padding:24px;display:flex;flex-direction:column;gap:12px;align-items:center;border-right:3px solid #14213d;height:100%;justify-content:center}
.pp-art .pic{width:min(100%,320px)}
.pp-info{padding:24px;display:flex;flex-direction:column;gap:10px}
.pp-info .no{font-family:var(--f-mono);font-weight:700;color:var(--muted)}
.pp-info .genus{font-weight:800;color:var(--muted)}
.pp-lede{margin:4px 0;font-size:1.04rem;line-height:1.6}
.pp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pp-cols .panel,.pp>.panel{display:flex;flex-direction:column;gap:10px}
.pp .panel p{margin:0;line-height:1.6}
.stattable{width:100%;border-collapse:collapse;font-size:.9rem}
.stattable th{text-align:left;font-weight:900;color:var(--blue-ink);padding:5px 8px 5px 0;width:78px}
.stattable td{padding:5px 6px}
.stattable td.num{width:44px;text-align:right;font-weight:700}
.stattable .tot th,.stattable .tot td{border-top:2px solid var(--line);padding-top:8px}
.barcell{width:100%}
.evo a{display:inline-block;padding:5px 12px;border-radius:999px;border:2px solid var(--line);font-weight:800;color:var(--ink);text-decoration:none;background:var(--surface)}
.evo a:hover{border-color:var(--blue)}
.evo .evocur{display:inline-block;padding:5px 12px;border-radius:999px;border:2px solid #14213d;background:var(--yellow);color:#14213d;font-weight:800}
.pp-pn{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pp-pn a{font-weight:900;color:var(--blue-ink);text-decoration:none;padding:10px 14px;border:2.5px solid var(--line);border-radius:14px;background:var(--surface)}
.pp-pn a:hover{border-color:var(--blue)}
.regnav{display:flex;flex-wrap:wrap;gap:8px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 132px);z-index:5;background:var(--bg);padding-block:8px}
.regnav a{font-weight:900;text-decoration:none;color:#fff;background:var(--blue);padding:6px 14px;border-radius:999px;font-size:.88rem}
.regnav a:hover{background:var(--band-deep)}
.dexreg{display:flex;flex-direction:column;gap:10px;scroll-margin-top:200px}
.dexreg h2 small{font-family:var(--f-body);font-size:.85rem;color:var(--muted);font-weight:700;margin-left:6px}
.dexlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.dexlist a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;background:var(--surface);border:2px solid var(--line);text-decoration:none;color:var(--ink);font-size:.9rem}
.dexlist a:hover{border-color:var(--blue)}
.dexlist .num{font-size:.72rem;color:var(--muted)}
.dexlist b{font-weight:900;margin-right:auto}
.dexlist .chip{font-size:max(.7rem,11.5px);padding:2px 7px}
.dexlist.small{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.dexlist.small a{font-weight:800}
@media (max-width:860px){
  .pp-top,.pp-cols{grid-template-columns:minmax(0,1fr)}
  .pp-art{border-right:0;border-bottom:3px solid #14213d}
  .pp-art .pic{width:min(70%,260px)}
  .regnav{top:calc(env(safe-area-inset-top,0px) + 120px)}
}
.stattable .bar{display:block}
.pp .mrow{grid-template-columns:128px minmax(0,1fr)}
.pp .meter{display:flex;align-items:center;gap:10px;font-weight:800}
.pp .meter .bar{display:block}

.parents{display:flex;flex-direction:column;gap:10px;max-width:76ch}
.parents h2{margin-top:10px}
.parents p,.parents li{line-height:1.6}
.pplist{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.codehow{margin:8px 0;padding-left:22px;display:flex;flex-direction:column;gap:6px;line-height:1.45}
.codehow b{color:var(--blue-ink)}
.delbox{padding:14px;border:2.5px dashed var(--line);border-radius:16px}
.tchart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tchart{border-collapse:separate;border-spacing:2px;font-size:.78rem;min-width:760px}
.tchart th{padding:2px;font-weight:800}
.tchart th .chip{font-size:max(.6rem,10.5px);padding:2px 5px;display:inline-block;min-width:54px;text-align:center}
.tchart thead th .chip{min-width:0;writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 2px}
.tchart .corner{font-size:.65rem;color:var(--muted);vertical-align:bottom;text-align:left}
.tchart td{width:34px;height:30px;text-align:center;font-weight:900;border-radius:6px;background:var(--surface-2)}
.tchart td.x2{background:#157a40;color:#fff}.tchart td.xh{background:#e7a63a;color:#14213d}.tchart td.x0{background:#14213d;color:#fff}
.tchart a{text-decoration:none}
.tlegend{margin-top:12px}.tlegend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:4px}
.tlegend i.x2{background:#157a40}.tlegend i.xh{background:#e7a63a}.tlegend i.x0{background:#14213d}
.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.typecard{display:flex;flex-direction:column;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--tc) 70%,#0b0f2e);text-decoration:none;border:2px solid #14213d}
.pp a.typecard,.typecard b,.typecard span{color:#fff}
.typecard b{font-size:1.05rem}.typecard span{font-size:.8rem;opacity:.9;font-weight:700}
.pp a{color:var(--blue-ink)}

.chip:not(.lt){background:color-mix(in srgb,var(--tc,var(--t-normal)) 70%,#0b0f2e)}
.dexlist .note{color:var(--muted)}
.typecard[href*="electric"],.typecard[href*="ice"],.typecard[href*="fairy"]{background:color-mix(in srgb,var(--tc) 50%,#0b0f2e)}
.typecard span{opacity:1}