@font-face{font-family:'Pixelify Sans';font-weight:400 700;font-display:swap;src:url(assets/fonts/pixelify.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pixelify Sans';font-weight:400 700;font-display:swap;src:url(assets/fonts/pixelify-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'VT323';font-display:swap;size-adjust:135%;src:url(assets/fonts/vt323.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'VT323';font-display:swap;size-adjust:135%;src:url(assets/fonts/vt323-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#030d0a;--bg2:#071712;--glass:rgba(12,38,30,.55);--line:rgba(120,255,200,.12);--line2:rgba(120,255,200,.22);
  --text:#e6f5ee;--muted:#86a89a;--dim:#4f6d61;--em:#34f5a4;--em2:#0fbf7b;--gold:#f2cf6b;--blue:#5bc8ff;
  --display:'Pixelify Sans','Inter Tight',sans-serif;--sans:'Inter Tight','Segoe UI',sans-serif;--mono:'VT323',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--text);background:var(--bg);font:15px/1.5 var(--sans);overflow-x:hidden;overflow-x:clip}
html{overflow-x:clip}
body.is-loading{overflow:hidden}
::selection{background:var(--em);color:var(--bg)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line2);background:transparent;border-radius:999px;padding:10px 16px;transition:background .3s var(--ease),border-color .3s,color .3s,transform .4s var(--ease),opacity .3s}
button:hover{border-color:var(--em);background:rgba(52,245,164,.08)}
button:disabled{cursor:default;opacity:.3;pointer-events:none}
:focus-visible{outline:2px solid var(--em);outline-offset:4px}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
em{font-style:normal;color:var(--em)}
.skip{position:fixed;left:-999px;top:10px;z-index:100;background:var(--em);color:var(--bg);padding:8px 14px;border-radius:99px}.skip:focus{left:10px}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;align-items:flex-end;justify-content:space-between;padding:5vw;transition:clip-path 1.2s var(--ease);clip-path:inset(0 0 0 0)}
body.loaded #loader{clip-path:inset(0 0 100% 0);pointer-events:none}
.loader-ball{width:70px;height:70px;border-radius:50%;border:2px solid var(--em);position:relative;overflow:hidden;animation:spin 1.4s var(--ease) infinite}
.loader-ball::before{content:'';position:absolute;inset:0 0 50%;background:var(--em)}
.loader-ball::after{content:'';position:absolute;left:0;right:0;top:calc(50% - 2px);height:4px;background:var(--bg)}
.loader-ball i{position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px;border-radius:50%;background:var(--bg);border:3px solid var(--em);z-index:2}
.loader-count{text-align:right}
#loader-num{font:800 clamp(80px,16vw,220px)/.8 var(--display);letter-spacing:-.05em;color:var(--text);display:block}
.loader-count small{font:12px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.2em}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- global fx layers ---------- */
#scene{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,6%)}80%{transform:translate(5%,2%)}}
#progress{position:fixed;top:0;left:0;height:2px;width:100%;background:linear-gradient(90deg,var(--em),var(--gold));transform-origin:0 50%;transform:scaleX(0);z-index:70}
#cursor{position:fixed;left:0;top:0;z-index:80;pointer-events:none;mix-blend-mode:difference}
#cursor span{display:block;width:14px;height:14px;margin:-7px;border-radius:50%;background:#fff;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease)}
#cursor.hover span{width:34px;height:34px;margin:-17px}
@media (hover:none){#cursor{display:none}}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px 4vw;mix-blend-mode:normal;transition:transform .6s var(--ease),background .4s}
header.hide{transform:translateY(-110%)}
header.solid{background:rgba(3,13,10,.6);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center}
.brand img{display:block;width:auto;height:clamp(68px,7vw,92px);image-rendering:pixelated;filter:drop-shadow(0 0 13px rgba(52,245,164,.18))}
@keyframes pulse{50%{box-shadow:0 0 34px var(--em)}}
.top-nav{display:flex;gap:6px}
.top-nav a,.top-nav button{font:500 13px var(--sans);padding:9px 16px;border-radius:99px;border:1px solid transparent}
.top-nav a:hover{border-color:var(--line2)}
.bottom-notes i{display:inline-block;width:7px;height:7px;background:var(--em);border-radius:50%;margin-right:9px;box-shadow:0 0 10px var(--em);animation:pulse 2s infinite}

main{position:relative;z-index:1}

/* ---------- hero ---------- */
.hero{min-height:100svh;position:relative;padding:18vh 4vw 6vh;display:flex;flex-direction:column;justify-content:space-between}
.hero-meta{display:flex;gap:28px;font:11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.18em}
.hero-meta span:first-child{color:var(--em)}
.hero-title{font:800 clamp(52px,9.5vw,170px)/.9 var(--display);letter-spacing:-.055em;margin:3vh 0;pointer-events:none;position:relative;z-index:2}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-title .line:nth-child(2){padding-left:12vw}
.hero-title .outline{color:transparent;-webkit-text-stroke:1.5px var(--text);padding-left:4vw}
.hero-title .word{display:inline-block;white-space:nowrap}.hero-title .char{display:inline-block;transform:translateY(110%) rotate(8deg);transition:transform 1.3s var(--ease)}
body.loaded .hero-title .word{display:inline-block;white-space:nowrap}.hero-title .char{transform:none}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;position:relative;z-index:2}
.hero-foot p{max-width:420px;color:var(--muted);margin:0;font-size:16px}
.hero-actions{display:flex;gap:14px;align-items:center}
.cta{position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;padding:20px 30px;border:1px solid var(--em);font-weight:600;font-size:15px;color:var(--bg);background:var(--em)}
.cta:hover{background:var(--em);color:var(--bg)}
.cta-fill{position:absolute;inset:0;background:var(--text);border-radius:50%;transform:translateY(101%) scale(1.4);transition:transform .7s var(--ease)}
.cta:hover .cta-fill{transform:translateY(0) scale(1.4)}
.cta-label,.cta-arrow{position:relative}
.cta-arrow{transition:transform .5s var(--ease)}.cta:hover .cta-arrow{transform:translateX(6px) rotate(-45deg)}
.ghost{padding:20px 26px;font-size:14px}
.ball-hit{position:absolute;right:8vw;top:24vh;width:34vw;height:50vh;border:0;border-radius:50%;background:none!important;z-index:1}
.scroll-hint{position:absolute;left:50%;bottom:3vh;transform:translateX(-50%);font:10px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint span{width:1px;height:48px;background:linear-gradient(var(--em),transparent);animation:drip 2s var(--ease) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:26px 0;background:rgba(3,13,10,.5);backdrop-filter:blur(6px);transform:rotate(-2deg) scale(1.04);margin:6vh 0}
.marquee-track{display:flex;width:max-content;animation:marquee 28s linear infinite}
.marquee span{font:800 clamp(40px,6vw,86px)/1 var(--display);letter-spacing:-.03em;white-space:nowrap;padding-right:.3em;color:transparent;-webkit-text-stroke:1px var(--muted)}
.marquee span:nth-child(odd){color:var(--text);-webkit-text-stroke:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- features ---------- */
.features{padding:14vh 4vw}
.features-title{font:800 clamp(44px,7vw,110px)/.92 var(--display);letter-spacing:-.045em;margin:0 0 8vh}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;perspective:1200px}
.tile{position:relative;overflow:hidden;min-height:380px;padding:34px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(160deg,rgba(18,52,41,.7),rgba(5,18,14,.6));backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:flex-end;transform-style:preserve-3d;transition:transform .6s var(--ease),border-color .4s}
.tile:hover{border-color:var(--line2)}
.tile::after{content:'';position:absolute;inset:0;background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(52,245,164,.16),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.tile:hover::after{opacity:1}
.tile-num{position:absolute;top:28px;left:34px;font:12px var(--mono);color:var(--em)}
.tile h3{font:700 44px var(--display);letter-spacing:-.04em;margin:0 0 10px;transform:translateZ(40px)}
.tile p{color:var(--muted);margin:0;max-width:300px;transform:translateZ(25px)}
.tile-orb{position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--em),transparent 65%);filter:blur(20px);opacity:.55;transition:transform 1s var(--ease)}
.tile-orb.gold{background:radial-gradient(circle at 35% 35%,var(--gold),transparent 65%)}
.tile-orb.blue{background:radial-gradient(circle at 35% 35%,var(--blue),transparent 65%)}
.tile:hover .tile-orb{transform:scale(1.4) translate(-20px,20px)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(60px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}
.bento .reveal:nth-child(2){transition-delay:.12s}.bento .reveal:nth-child(3){transition-delay:.24s}

/* ---------- workspace ---------- */
.workspace{margin:0 4vw;border:1px solid var(--line2);border-radius:30px;background:rgba(6,20,16,.72);backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 40px 120px -30px rgba(52,245,164,.18),inset 0 1px 0 rgba(255,255,255,.05);overflow:visible;scroll-margin-top:90px;position:relative}
.workspace::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from var(--angle,0deg),transparent 0 70%,var(--em) 85%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rotate 6s linear infinite;pointer-events:none}
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes rotate{to{--angle:360deg}}
.workspace-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 26px;border-bottom:1px solid var(--line)}
.workspace-bar>div:first-child{display:flex;align-items:center;gap:12px;min-width:0}
.workspace-bar strong{font:700 15px var(--display);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#file-meta{font:11px var(--mono);color:var(--muted);border-left:1px solid var(--line2);padding-left:12px}
.connection{width:9px;height:9px;background:var(--dim);border-radius:50%;flex:none}
.connection.loaded{background:var(--em);box-shadow:0 0 14px var(--em)}
.file-actions{display:flex;gap:10px}
.file-actions button{font-size:13px}
.primary{background:var(--em);color:var(--bg);border-color:var(--em);font-weight:600}
.primary:hover{background:var(--text);border-color:var(--text);color:var(--bg)}
.editor-layout{display:grid;grid-template-columns:210px minmax(0,1fr) 330px;min-height:640px}
aside{border-right:1px solid var(--line);padding:28px 14px 20px;display:flex;flex-direction:column}
.nav-caption,.section-kicker{font:11px var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--dim);padding:0 12px 12px}
.section-kicker{padding:0;color:var(--em)}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;border:1px solid transparent;border-radius:14px;padding:13px 14px;margin:3px 0;text-align:left;font-size:14px;color:var(--muted);position:relative}
.nav-item>span:first-child{color:var(--dim);transition:color .3s,transform .4s var(--ease)}
.nav-item:hover>span:first-child{transform:scale(1.1)}
.nav-item b{margin-left:auto;font:11px var(--mono);background:rgba(52,245,164,.1);color:var(--em);padding:2px 7px;border-radius:99px}
.nav-item.active{background:rgba(52,245,164,.1);border-color:var(--line2);color:var(--text)}
.nav-item.active>span:first-child{color:var(--em)}
.tiny-gem,.empty-gem{display:block;width:24px;height:24px;transform:rotate(45deg);background:linear-gradient(135deg,var(--em),#064d33);box-shadow:0 0 20px rgba(52,245,164,.5)}
.collection{padding:28px;display:flex;flex-direction:column;min-width:0}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:26px}
.collection h2,.section-heading h2{font:800 clamp(30px,3vw,46px)/1 var(--display);letter-spacing:-.04em;margin:8px 0 0}
.pill{font:11px var(--mono);padding:7px 12px;border:1px solid var(--line2);color:var(--em);border-radius:99px;white-space:nowrap}
#empty-state{text-align:center;margin:auto;padding:40px 0 60px}
.empty-gem{width:70px;height:70px;margin:10px auto 30px;animation:float 4s ease-in-out infinite}
@keyframes float{50%{transform:rotate(45deg) translate(-8px,-8px)}}
#empty-state h3{font:700 24px/1.2 var(--display);letter-spacing:-.02em;margin:0 0 10px}
#empty-state p{color:var(--muted);margin:0 0 26px}
.format-note{font:11px var(--mono);color:var(--dim);margin-top:18px}
.collection-foot{margin-top:auto;padding-top:26px;display:flex;justify-content:space-between;font:11px var(--mono);color:var(--dim)}

/* cards */
.pokemon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;perspective:900px}
.poke-card{position:relative;min-height:190px;padding:14px 10px 16px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(170deg,rgba(24,64,50,.55),rgba(6,20,16,.4));text-align:center;overflow:hidden;transform-style:preserve-3d;transition:transform .5s var(--ease),border-color .3s,box-shadow .4s;animation:cardIn .8s var(--ease) backwards;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) rotateX(-20deg)}}
.poke-card::before{content:'';position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(52,245,164,.22),transparent 50%);opacity:0;transition:opacity .3s}
.poke-card:hover{background:linear-gradient(170deg,rgba(24,64,50,.55),rgba(6,20,16,.4));border-color:var(--line2)}
.poke-card:hover::before{opacity:1}
.poke-card.selected{border-color:var(--em);box-shadow:0 0 0 1px var(--em),0 20px 50px -20px rgba(52,245,164,.6)}
.slot-number{position:absolute;top:12px;left:14px;font:10px var(--mono);color:var(--dim)}
.shiny-mark{position:absolute;right:12px;top:9px;color:var(--gold);text-shadow:0 0 12px var(--gold);animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.4;transform:scale(.8) rotate(20deg)}}
.poke-card img{display:block;width:96px;height:96px;margin:6px auto 4px;object-fit:contain;image-rendering:pixelated;transform:translateZ(40px);filter:drop-shadow(0 12px 10px rgba(0,0,0,.5));transition:transform .5s var(--ease)}
.poke-card:hover img{transform:translateZ(60px) translateY(-6px) scale(1.08);animation:bob 1s ease-in-out infinite alternate}
@keyframes bob{to{translate:0 -5px}}
.poke-card strong{display:block;font:700 15px var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transform:translateZ(20px)}
.poke-card small{display:block;font:11px var(--mono);color:var(--muted);margin-top:4px}
.poke-card.empty-slot{display:grid;place-content:center;border-style:dashed;background:transparent;min-height:190px}
.empty-slot>span{font-size:28px;color:var(--dim)}
.empty-slot small{color:var(--dim)}
.sprite-fallback{display:block;font-size:48px;color:var(--em);margin:20px 0}
.no-results{color:var(--muted);grid-column:1/-1}
#box-toolbar{display:flex;gap:12px;margin-bottom:20px;align-items:end}
#box-toolbar>label{font:11px var(--mono);color:var(--muted)}
.search-label{display:flex;align-items:center;gap:8px;flex:1}
.field input,.field select,.field textarea,#box-select,#search,#bag-search,.stat-table input{width:100%;min-width:0;background:rgba(0,0,0,.3);border:1px solid var(--line2);border-radius:12px;padding:11px 12px;font-size:14px;transition:border-color .3s,box-shadow .3s}
.field textarea:focus,.field input:focus,.field select:focus,#search:focus,#bag-search:focus,.stat-table input:focus{outline:0;border-color:var(--em);box-shadow:0 0 0 4px rgba(52,245,164,.15)}
select option{background:var(--bg2)}
#box-select{display:block;margin-top:5px;min-width:100px}

/* inspector */
.inspector{border-left:1px solid var(--line);padding:26px 22px;position:relative;isolation:isolate;background:rgba(0,0,0,.18)}
.inspector::before{content:'';border-top-right-radius:30px;position:absolute;left:0;right:0;top:0;height:380px;z-index:-1;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.18) 2px 3px),linear-gradient(rgba(52,245,164,.07) 1px,transparent 1px) 0 0/100% 16px,linear-gradient(90deg,rgba(52,245,164,.07) 1px,transparent 1px) 0 0/16px 100%;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.inspector-heading{display:flex;justify-content:space-between;font:11px var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.inspector-heading>span{color:var(--gold)}
.detail-empty{text-align:center;padding-top:140px}
.detail-empty>span{font-size:46px;color:var(--em);display:inline-block;animation:float2 3s ease-in-out infinite}
@keyframes float2{50%{transform:translateY(-10px)}}
.detail-empty h3{font:700 18px var(--display);margin:14px 0 6px}
.detail-empty p{font-size:13px;color:var(--muted);padding:0 20px}
.pokemon-hero{text-align:center;margin:12px 0 18px;padding:14px 0;position:relative;animation:heroIn .8s var(--ease)}
@keyframes heroIn{from{opacity:0;transform:scale(.9)}}
.pokemon-hero::before{content:'';position:absolute;left:50%;top:14px;width:150px;height:150px;margin-left:-75px;border-radius:50%;border:1px dashed var(--line2);animation:spin 20s linear infinite}
.pokemon-hero::after{content:'';position:absolute;left:50%;top:44px;width:90px;height:90px;margin-left:-45px;border-radius:50%;background:radial-gradient(var(--em),transparent 70%);opacity:.35;filter:blur(16px);z-index:-1}
.pokemon-hero img{width:150px;height:150px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 14px 12px rgba(0,0,0,.6));animation:float2 3s ease-in-out infinite;position:relative}
.pokemon-hero h3{font:800 28px var(--display);letter-spacing:-.03em;margin:4px 0 10px}
.type-tag{display:inline-block;font:11px var(--mono);border:1px solid var(--line2);color:var(--em);border-radius:99px;padding:4px 11px;margin:0 3px}
.detail-tabs{display:flex;margin-bottom:20px;border-bottom:1px solid var(--line)}
.detail-tabs button{flex:1;position:relative;border:0;background:none;padding:10px 2px 13px;font-size:12px;white-space:nowrap;color:var(--muted);transition:color .3s}
.detail-tabs button:hover{color:var(--text)}
.detail-tabs button::after{content:'';position:absolute;left:18%;right:18%;bottom:-1px;height:3px;border-radius:2px;background:var(--em);box-shadow:0 0 10px var(--em),0 0 22px rgba(52,245,164,.45);transform:scaleX(0);transition:transform .35s var(--ease)}
.detail-tabs button:hover::after{transform:scaleX(.35);opacity:.5}
.detail-tabs button.active{color:var(--em);font-weight:600;text-shadow:0 0 14px rgba(52,245,164,.55)}
.detail-tabs button.active::after{transform:scaleX(1);opacity:1;animation:tab-line .45s var(--ease)}
@keyframes tab-line{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.detail-tabs button.active::after{animation:none}}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 10px}
.field{display:flex;flex-direction:column;gap:7px;font:11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.field.full{grid-column:1/-1}
.shiny-toggle{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;cursor:pointer;transition:border-color .3s}
.shiny-toggle:hover{border-color:var(--gold)}
.shiny-toggle span{color:var(--gold);margin-right:8px}
.shiny-toggle input{appearance:none;width:46px;height:26px;border-radius:99px;background:var(--dim);position:relative;cursor:pointer;transition:background .3s}
.shiny-toggle input::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text);transition:transform .4s var(--ease)}
.shiny-toggle input:checked{background:var(--gold);box-shadow:0 0 18px rgba(242,207,107,.5)}
.shiny-toggle input:checked::after{transform:translateX(20px)}
.field-help{font-size:12px;color:var(--dim);margin-top:16px}
.stat-table{width:100%;border-collapse:collapse;font-size:13px}
.stat-table th{text-align:left;font:10px var(--mono);color:var(--dim);font-weight:400;padding-bottom:10px;text-transform:uppercase}
.stat-table td{padding:4px 3px}
.stat-table input{width:64px;padding:8px}
.moves-list{padding:0;list-style:none;margin:0}
.moves-list li{display:flex;justify-content:space-between;padding:14px 16px;margin-bottom:8px;border:1px solid var(--line);border-radius:14px;font-size:14px;transition:transform .4s var(--ease),border-color .3s}
.moves-list li:hover{transform:translateX(6px);border-color:var(--em)}
.moves-list small{font:11px var(--mono);color:var(--muted)}

/* trainer */
#trainer-form{max-width:440px;padding-top:10px}
#trainer-form .field{margin-bottom:20px}
#trainer-form input{font-size:18px;padding:14px}
.trainer-card{position:relative;overflow:hidden;padding:22px 24px 20px;margin-bottom:28px;border-radius:24px;display:flex;flex-direction:column;gap:18px;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0) 0 0/10px 10px,conic-gradient(from 200deg at 80% 40%,transparent,rgba(120,255,220,.14),rgba(255,210,120,.12),rgba(180,140,255,.12),transparent 60%),linear-gradient(135deg,#0f7a52,#063826 55%,#0b2c22);border:1px solid var(--line2);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);transform-style:preserve-3d;transition:transform .5s var(--ease)}
.trainer-card::before{content:'';position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border-radius:50%;border:26px solid rgba(255,255,255,.07)}
.trainer-card::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);transform:translateX(var(--sheen,-100%));transition:transform .2s}
.trainer-card small{font:11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.trainer-card strong{font:800 42px var(--display);letter-spacing:-.03em}

/* notes, footer */
.bottom-notes{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:30px;font:11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
footer{position:relative;z-index:1;padding:12vh 4vw 30px;overflow:hidden}
.footer-big{display:flex;justify-content:center;padding:20px 4vw 45px;overflow:hidden}
.footer-big img{display:block;width:min(28vw,290px);height:auto;image-rendering:pixelated;opacity:.14;filter:saturate(.7) drop-shadow(0 0 25px rgba(52,245,164,.2));transition:opacity .5s,filter .5s,transform .7s var(--ease)}
.footer-big:hover img{opacity:.28;filter:saturate(1) drop-shadow(0 0 36px rgba(52,245,164,.38));transform:scale(1.015)}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px;margin-top:20px;font-size:13px;color:var(--muted)}
.footer-row small{color:var(--dim)}

/* toast, dialogs */
#toast{position:fixed;left:50%;bottom:30px;z-index:85;transform:translate(-50%,150%);max-width:min(560px,90vw);padding:14px 22px;border-radius:99px;background:var(--em);color:var(--bg);font-weight:500;font-size:14px;transition:transform .7s var(--ease);box-shadow:0 20px 50px -10px rgba(52,245,164,.5)}
#toast.visible{transform:translate(-50%,0)}
#toast.error{background:#ff6b6b;box-shadow:0 20px 50px -10px rgba(255,107,107,.5)}
body.busy{cursor:progress}
body.busy .workspace{opacity:.7}
dialog{width:min(560px,92vw);border:1px solid var(--line2);border-radius:28px;padding:38px;background:rgba(7,23,18,.92);backdrop-filter:blur(20px);color:var(--text);box-shadow:0 40px 100px rgba(0,0,0,.6)}
dialog[open]{animation:dlg .7s var(--ease)}
@keyframes dlg{from{opacity:0;transform:translateY(40px) scale(.95)}}
dialog::backdrop{background:rgba(1,6,4,.7);backdrop-filter:blur(8px)}
dialog h2{font:800 36px var(--display);letter-spacing:-.04em;margin:8px 0 10px}
dialog p,dialog li{color:var(--muted)}
dialog li{margin-bottom:8px}
dialog h3{font:11px var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--dim);margin:26px 0 10px}
.dialog-close{position:absolute;right:20px;top:20px;width:40px;height:40px;padding:0;font-size:20px}
.dialog-close:hover{transform:rotate(90deg)}
.drop-zone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px;border:1.5px dashed var(--line2);border-radius:20px;cursor:pointer;margin-top:20px;transition:border-color .3s,background .3s,transform .4s var(--ease)}
.drop-zone:hover,.drop-zone.drag{border-color:var(--em);background:rgba(52,245,164,.06);transform:scale(1.02)}
.drop-zone span{font-size:30px;color:var(--em)}
.drop-zone small{color:var(--muted)}
.drop-zone input{position:absolute;opacity:0;width:1px;height:1px}
#local-files{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow:auto}
.local-file{display:flex;justify-content:space-between;border-radius:14px;padding:13px 16px;text-align:left;font-size:13px}
.local-file small{font:11px var(--mono);color:var(--muted)}
.dialog-note{font-size:12px}
.path{font:12px var(--mono);background:rgba(0,0,0,.35);padding:12px;border-radius:10px;color:var(--em)!important;word-break:break-all}

@media (max-width:1100px){.editor-layout{grid-template-columns:minmax(0,1fr)}.editor-layout>*{min-width:0}aside{border-right:0;border-bottom:1px solid var(--line)}aside nav{display:flex;flex-wrap:wrap;gap:6px}.inspector{border-left:0;border-top:1px solid var(--line)}.bento{grid-template-columns:1fr}.tile{min-height:260px}}
@media (max-width:700px){.top-nav{display:none}.hero-title .line:nth-child(2){padding-left:0}.workspace{margin:0 2vw}.workspace-bar{flex-direction:column;align-items:flex-start}.ball-hit{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.hero-title .word{display:inline-block;white-space:nowrap}.hero-title .char{transform:none}}
.lang-switch{display:flex;gap:2px;padding:3px;border:1px solid var(--line2);border-radius:99px}
.lang-switch button{border:0;padding:6px 11px;font:600 11px var(--mono);letter-spacing:.08em;color:var(--muted)}
.lang-switch button[aria-pressed="true"]{background:var(--em);color:var(--bg)}
@media (max-width:700px){.lang-switch{margin-left:auto;margin-right:0}}

/* Species picker for empty team and box slots. */
#add-dialog{max-height:90dvh;overflow-y:auto;width:min(640px,94vw)}
.species-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:230px;overflow-y:auto;margin:16px 0;overscroll-behavior:contain}
.species-choice{display:flex;align-items:center;gap:5px;padding:6px;text-align:left;border:1px solid var(--line);border-radius:12px;min-height:64px;min-width:0}
.species-choice img{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.species-choice span{font-size:12px;overflow-wrap:anywhere}.species-choice small{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.species-choice.selected{border-color:var(--accent,#76e8b5);background:#64dfad20}
#add-error{color:#ff8383;font-size:12px}#add-submit{width:100%;min-height:44px}#add-dialog .field.full{grid-column:1/-1}
@media(max-width:540px){.species-results{grid-template-columns:repeat(2,minmax(0,1fr))}#add-dialog{padding:25px 20px}#add-dialog h2{font-size:28px}#add-dialog input,#add-dialog select{font-size:16px}}


/* Dark native controls, including modal scroll areas. */
:root{color-scheme:dark;scrollbar-color:#25664f #071710;scrollbar-width:thin}
*{scrollbar-color:#25664f #071710;scrollbar-width:thin}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#071710;border-radius:12px}::-webkit-scrollbar-thumb{background:#25664f;border:2px solid #071710;border-radius:12px}::-webkit-scrollbar-thumb:hover{background:#3a9874}::-webkit-scrollbar-corner{background:#071710}
input[type=number]{appearance:textfield;-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.editable-moves li{display:block;padding:0;overflow:hidden}.editable-moves li>button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:16px;text-align:left;border:0;border-radius:inherit}.editable-moves li>button:hover{background:#37efaa15}.editable-moves small{white-space:nowrap}
#move-dialog{max-height:85dvh;overflow:auto}#move-results{max-height:42dvh;overflow:auto;display:grid;gap:8px;margin-top:18px}.move-choice{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:13px 16px}.move-choice small{display:block;color:var(--muted);font-size:11px;margin-top:4px}

.field textarea{resize:vertical;font:13px var(--sans,inherit);text-transform:none;letter-spacing:0;color:inherit}
.care-card{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;gap:12px;font-size:13px}
.care-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.care-card dt{font:11px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;align-self:center}
.care-card dd{margin:0;text-align:right;overflow-wrap:anywhere}
.btn-heal{border:1px solid var(--em);color:var(--em);border-radius:99px;padding:9px 14px;font-size:13px;transition:background .3s,color .3s}
.btn-heal:hover:not(:disabled){background:var(--em);color:var(--bg)}
.btn-heal:disabled{opacity:.35;cursor:default}
.care-card+.field{margin-top:18px}
.pick{position:relative;display:block}
#box-toolbar .pick{display:inline-block;min-width:150px}
.pick-btn span:only-child{padding:4px 0}
.pick-btn{display:flex;align-items:center;gap:8px;width:100%;background:rgba(0,0,0,.3);border:1px solid var(--line2);border-radius:12px;padding:6px 12px;min-height:44px;font-size:14px;text-transform:none;letter-spacing:0;text-align:left;transition:border-color .3s}
.pick-btn:hover,.pick-btn:focus-visible{border-color:var(--em);outline:0}
.pick-btn span,.pick-list span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-btn::after{content:'▾';color:var(--muted)}
.pick img{width:30px;height:30px;image-rendering:pixelated;flex:none}
.pick-none{width:30px;flex:none}
.pick-list{position:absolute;z-index:30;top:100%;left:0;min-width:100%;width:max-content;max-width:260px;max-height:420px;overflow:auto;margin-top:6px;padding:6px;background:#07130f;border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.pick-list button{display:flex;align-items:center;gap:8px;width:100%;border:0;border-radius:10px;padding:3px 8px;font-size:13px;text-transform:none;letter-spacing:0;text-align:left;color:var(--text,inherit)}
.pick-list button:hover,.pick-list button.selected{background:rgba(52,245,164,.12);color:var(--em)}
.field input[type=date]{color-scheme:dark}

/* Type colors shared by move choices and equipped moves. */
[data-move-type="NORMAL"]{--move-color:#b2aa8a}[data-move-type="FIRE"]{--move-color:#f58a46}[data-move-type="WATER"]{--move-color:#599cf0}[data-move-type="GRASS"]{--move-color:#77c653}[data-move-type="ELECTRIC"]{--move-color:#ebce4d}[data-move-type="ICE"]{--move-color:#80d5dc}[data-move-type="FIGHTING"]{--move-color:#e56559}[data-move-type="POISON"]{--move-color:#bb72db}[data-move-type="GROUND"]{--move-color:#d6ad66}[data-move-type="FLYING"]{--move-color:#a59bec}[data-move-type="PSYCHIC"]{--move-color:#ee74a7}[data-move-type="BUG"]{--move-color:#afc74c}[data-move-type="ROCK"]{--move-color:#c1ab6b}[data-move-type="GHOST"]{--move-color:#9580cc}[data-move-type="DRAGON"]{--move-color:#867cf2}[data-move-type="DARK"]{--move-color:#ae9390}[data-move-type="STEEL"]{--move-color:#a1b6cb}[data-move-type="FAIRY"]{--move-color:#e7a2cc}
.move-choice[data-move-type],.editable-moves li>button[data-move-type]:not([data-move-type=""]){background:color-mix(in srgb,var(--move-color,#879d90) 23%,#07130f);border-color:color-mix(in srgb,var(--move-color,#879d90) 48%,#07130f);color:#f4f8f5;transition:background .2s,border-color .2s}
.move-choice[data-move-type]:hover,.editable-moves li>button[data-move-type]:not([data-move-type=""]):hover{background:color-mix(in srgb,var(--move-color) 36%,#07130f);border-color:var(--move-color)}
.move-choice[data-move-type] small,.editable-moves [data-move-type]:not([data-move-type=""]) small{color:color-mix(in srgb,var(--move-color) 30%,#edf5ef)}
.move-choice[data-move-type]:focus-visible,.editable-moves [data-move-type]:focus-visible{outline:2px solid var(--move-color,#34f5a4);outline-offset:3px}

/* Attacken: Kategorie, knalligere Typfarben, Typ-Animationen */
[data-move-type="NORMAL"]{--move-color:#c9c2a0}[data-move-type="FIRE"]{--move-color:#ff7a2e}[data-move-type="WATER"]{--move-color:#3d8bff}[data-move-type="GRASS"]{--move-color:#5fd63a}[data-move-type="ELECTRIC"]{--move-color:#ffd21f}[data-move-type="ICE"]{--move-color:#6ee6f0}[data-move-type="FIGHTING"]{--move-color:#ff4b3e}[data-move-type="POISON"]{--move-color:#c35cf0}[data-move-type="GROUND"]{--move-color:#e8b050}[data-move-type="FLYING"]{--move-color:#9b8cff}[data-move-type="PSYCHIC"]{--move-color:#ff5c9d}[data-move-type="BUG"]{--move-color:#b5d624}[data-move-type="ROCK"]{--move-color:#cfae55}[data-move-type="GHOST"]{--move-color:#8f6bff}[data-move-type="DRAGON"]{--move-color:#7462ff}[data-move-type="DARK"]{--move-color:#a88272}[data-move-type="STEEL"]{--move-color:#a9c4de}[data-move-type="FAIRY"]{--move-color:#ff9bd6}
.editable-moves li,.move-choice{border-radius:14px}
.move-choice[data-move-type],.editable-moves li>button[data-move-type]:not([data-move-type=""]){position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(100deg,color-mix(in srgb,var(--move-color) 38%,#07130f),color-mix(in srgb,var(--move-color) 12%,#07130f) 70%);border-color:color-mix(in srgb,var(--move-color) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--move-color) 25%,transparent)}
.move-choice[data-move-type]:hover,.editable-moves li>button[data-move-type]:not([data-move-type=""]):hover{background:linear-gradient(100deg,color-mix(in srgb,var(--move-color) 52%,#07130f),color-mix(in srgb,var(--move-color) 20%,#07130f) 70%);box-shadow:0 0 22px color-mix(in srgb,var(--move-color) 35%,transparent)}
.move-choice[data-move-type]::before,.editable-moves li>button[data-move-type]::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;transition:opacity .3s}
.move-choice[data-move-type]:hover::before,.editable-moves li>button[data-move-type]:hover::before{opacity:.95}
/* Feuer: flackernde Glut steigt auf */
[data-move-type="FIRE"]::before{background:radial-gradient(60% 90% at 88% 130%,#ffcf4a 0,#ff6a1f 35%,transparent 70%),radial-gradient(40% 70% at 70% 140%,#ff9d2e 0,transparent 70%),radial-gradient(30% 60% at 96% 120%,#ffe07a 0,transparent 70%);animation:fire-flicker 1.6s ease-in-out infinite alternate}
@keyframes fire-flicker{0%{transform:translateY(4px) scaleY(.92);filter:brightness(.9)}35%{transform:translateY(-2px) scaleY(1.05);filter:brightness(1.15)}70%{transform:translateY(1px) scaleY(.97)}100%{transform:translateY(-4px) scaleY(1.1);filter:brightness(1.25)}}
/* Wasser: laufende Wellen */
[data-move-type="WATER"]::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='24' viewBox='0 0 120 24'%3E%3Cpath d='M0 12 Q15 2 30 12 T60 12 T90 12 T120 12 V24 H0Z' fill='%236fb4ff' fill-opacity='.45'/%3E%3C/svg%3E") repeat-x left bottom/120px 24px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='24' viewBox='0 0 90 24'%3E%3Cpath d='M0 14 Q11 6 22 14 T45 14 T67 14 T90 14 V24 H0Z' fill='%233d8bff' fill-opacity='.55'/%3E%3C/svg%3E") repeat-x left bottom/90px 24px;animation:water-wave 5s linear infinite}
@keyframes water-wave{to{background-position:120px bottom,-90px bottom}}
/* Elektro: Blitzeinschläge */
[data-move-type="ELECTRIC"]::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cpath d='M24 0 L6 34 H18 L12 60 L34 22 H22 Z' fill='%23fff3a0'/%3E%3C/svg%3E") no-repeat 86% 50%/22px 34px,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='60' viewBox='0 0 40 60'%3E%3Cpath d='M24 0 L6 34 H18 L12 60 L34 22 H22 Z' fill='%23ffd21f'/%3E%3C/svg%3E") no-repeat 64% 30%/14px 22px,radial-gradient(70% 120% at 85% 50%,rgba(255,230,90,.55),transparent 70%);animation:zap 3.2s steps(1) infinite}
@keyframes zap{0%,100%{opacity:.12}8%{opacity:1}11%{opacity:.2}14%{opacity:.95}20%{opacity:.12}55%{opacity:.12}58%{opacity:.8}62%{opacity:.12}}
/* Eis: Glitzern, Pflanze: Blätterwind, Psycho: Pulsringe, Geist: Nebel */
[data-move-type="ICE"]::before{background:linear-gradient(115deg,transparent 35%,rgba(220,255,255,.55) 45%,transparent 55%) no-repeat -120% 0/60% 100%;animation:ice-shine 3.5s ease-in-out infinite}
@keyframes ice-shine{60%,100%{background-position:220% 0}}
[data-move-type="GRASS"]::before{background:radial-gradient(6px 3px at 20% 30%,#b6ff8a 60%,transparent 70%),radial-gradient(5px 2.5px at 55% 70%,#7fe052 60%,transparent 70%),radial-gradient(6px 3px at 85% 40%,#b6ff8a 60%,transparent 70%);background-size:140px 60px;animation:leaves 6s linear infinite}
@keyframes leaves{to{background-position:140px 30px,140px -30px,140px 20px}}
[data-move-type="PSYCHIC"]::before{background:repeating-radial-gradient(circle at 90% 50%,rgba(255,120,180,.35) 0 2px,transparent 3px 16px);animation:psy 2.8s ease-in-out infinite}
@keyframes psy{50%{transform:scale(1.12);opacity:.9}}
[data-move-type="GHOST"]::before{background:radial-gradient(50% 80% at 80% 60%,rgba(160,120,255,.5),transparent 70%);animation:ghost 4s ease-in-out infinite alternate}
@keyframes ghost{to{transform:translateX(-30%);opacity:.25}}
.move-choice>span,.move-choice>small,.editable-moves li>button>*{position:relative}
.move-choice small @media (prefers-reduced-motion:reduce){.move-choice[data-move-type]::before,.editable-moves li>button[data-move-type]::before{animation:none}}
.editable-moves li>button>span:first-child{white-space:nowrap;display:flex;align-items:center;min-width:0}
[data-move-type="FIRE"]::before{opacity:.75}
/* Kopf: Raster-Hintergrund mit Holo-Scanlines */
.pokemon-hero.dex{margin:6px 0 18px;padding:0}
.pokemon-hero.dex::before,.pokemon-hero.dex::after{display:none}
.dex-screen{position:relative;height:170px;display:grid;place-items:center;background:radial-gradient(closest-side circle at 50% 50%,rgba(52,245,164,.22),transparent)}
.dex-screen img{width:140px;height:140px}
.move-class{display:inline-grid;place-items:center;width:26px;height:20px;border-radius:5px;margin-right:10px;vertical-align:middle;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 3px rgba(0,0,0,.4)}
.move-class svg{width:15px;height:15px}
.move-choice small .move-class{margin:0 0 0 8px}
.move-class[data-class="physical"]{background:linear-gradient(#e2502c,#b02a14)}
.move-class[data-class="special"]{background:linear-gradient(#4a6fd8,#27408f)}
.move-class[data-class="status"]{background:linear-gradient(#8b958f,#56605b)}

.player-info{margin-top:28px}.player-info h3{font-size:15px;margin:22px 0 14px}.player-facts{display:grid;grid-template-columns:minmax(110px,1fr) minmax(0,1.4fr);gap:12px 18px;font-size:13px;line-height:1.5}.player-facts dt{color:var(--muted)}.player-facts dd{margin:0;overflow-wrap:anywhere}.player-more{margin-top:25px;padding-top:16px;border-top:1px solid var(--line)}.player-more summary{cursor:pointer;font-size:13px;color:var(--text)}


.pi-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pi-tile{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(52,245,164,.04)}
.pi-tile small,.pi-row small{display:block;font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pi-tile strong{display:block;font:700 22px var(--display);letter-spacing:-.02em;margin-top:4px;color:var(--em)}
.pi-tile span{font-size:11px;color:var(--muted)}
.pi-rows{margin-top:10px;border:1px solid var(--line);border-radius:14px}
.pi-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 16px;min-height:44px}
.pi-row+.pi-row{border-top:1px solid var(--line)}
.pi-row strong{font-size:13px;font-weight:600;text-align:right;overflow-wrap:anywhere}
.pi-starter{display:flex;align-items:center;gap:4px}.pi-starter img{width:36px;height:36px;margin:-8px 0;image-rendering:pixelated}
.pi-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pi-chip{padding:6px 12px;border:1px solid var(--line);border-radius:10px;font-size:12px;color:var(--muted)}
.pi-chip.on{border-color:var(--line2);color:var(--em);background:rgba(52,245,164,.08)}
.tc-top{display:flex;justify-content:space-between;align-items:center;position:relative}
.tc-id{font:600 12px var(--mono);letter-spacing:.12em;padding:4px 10px;border-radius:8px;background:rgba(0,0,0,.28);color:#d8ffe9}
.tc-body{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative}
.trainer-card .tc-info strong{display:block;font:800 38px/1 var(--display);letter-spacing:-.03em;margin-bottom:14px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.tc-stats{display:flex;gap:22px;margin:0}
.tc-stats dt{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.tc-stats dd{margin:2px 0 0;font:700 17px var(--display);color:#eafff4}
.tc-partner{width:150px;height:150px;margin:-40px -20px -34px 0;image-rendering:pixelated;filter:drop-shadow(0 10px 10px rgba(0,0,0,.5));animation:float2 3s ease-in-out infinite;flex:none}
.tc-badges{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.25);position:relative}
.tc-badge{width:100%;max-width:34px;aspect-ratio:1;justify-self:center;object-fit:contain;image-rendering:pixelated;filter:brightness(0) opacity(.35);transition:transform .3s var(--ease)}
.tc-badge.on{filter:drop-shadow(0 0 6px rgba(255,255,255,.35)) drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.tc-badge.on:hover{transform:scale(1.2) rotate(-8deg)}
@media (prefers-reduced-motion:reduce){.tc-partner{animation:none}}
#bag-panel{width:100%}
.bag-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:8px}
.bag-pockets{display:flex;flex-wrap:wrap;gap:6px}
.bag-pockets button{display:flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);font-size:13px;text-transform:none;letter-spacing:0;transition:color .2s,border-color .2s,background .2s}
.bag-pockets button small{font:10px var(--mono);padding:1px 6px;border-radius:6px;background:rgba(255,255,255,.06)}
.bag-pockets button:hover{color:var(--text);border-color:var(--line2)}
.bag-pockets button.active{color:var(--em);border-color:var(--em);background:rgba(52,245,164,.08)}
#bag-search{flex:0 1 220px;min-width:160px;color:var(--text);padding:8px 12px}
.bag-category h3{font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.bag-category ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.bag-category li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(52,245,164,.03);font-size:12px;text-align:center;transition:transform .25s var(--ease),border-color .25s,background .25s}
.bag-category li:hover{transform:translateY(-3px);border-color:var(--line2);background:rgba(52,245,164,.08)}
.bag-category img,.bag-placeholder{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.bag-category li:hover img{animation:float2 1.6s ease-in-out infinite}
.bag-placeholder{display:grid;place-items:center;font:700 20px var(--display);color:var(--muted)}
.bag-category li strong{position:absolute;top:8px;right:9px;font:600 11px var(--mono);color:var(--em)}
.bag-add{padding:7px 12px;border:1px dashed var(--em);border-radius:10px;background:rgba(52,245,164,.06);color:var(--em);font-size:13px;text-transform:none;letter-spacing:0}
.bag-add:hover{background:rgba(52,245,164,.16)}
#bag-dialog{width:min(680px,94vw);max-height:88dvh;overflow:auto}
.bag-add-bar{display:flex;gap:10px;align-items:center;margin:12px 0}
.bag-add-bar input{background:rgba(0,0,0,.3);border:1px solid var(--line2);border-radius:12px;padding:9px 12px;color:var(--text);font-size:14px}
#bag-add-search{flex:1}.bag-add-bar label{display:flex;align-items:center;gap:8px;font:11px var(--mono);text-transform:uppercase;color:var(--muted)}#bag-add-qty{width:80px}
.bag-add-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;max-height:48dvh;overflow:auto}
.bag-add-list button{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;border:1px solid var(--line);border-radius:12px;background:rgba(52,245,164,.03);color:var(--text);font-size:12px;text-transform:none;letter-spacing:0}
.bag-add-list button:hover{border-color:var(--line2);background:rgba(52,245,164,.1)}
.bag-add-list img{width:40px;height:40px;image-rendering:pixelated}
.bag-add-list button.added{animation:bagAdded .6s var(--ease)}
@keyframes bagAdded{40%{transform:scale(.92);border-color:var(--em);background:rgba(52,245,164,.25)}}
.nav-svg{width:16px;height:16px;vertical-align:-3px}
.flag-burst{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;gap:22px;pointer-events:none;animation:flagFade 1.9s var(--ease) forwards}
.flag-burst::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,rgba(1,8,6,.55),rgba(1,8,6,.2) 60%,transparent);backdrop-filter:blur(3px);animation:flagDim 1.9s ease forwards}
.flag-cloth{position:relative;display:flex;width:min(300px,60vw);aspect-ratio:5/3;perspective:600px;animation:flagFly 1.9s cubic-bezier(.2,.9,.2,1) forwards;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.flag-cloth i{flex:1;margin-right:-1.5px;padding-right:1.5px;background-origin:border-box;background-repeat:no-repeat;animation:flagWave 1s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -70ms)}
.flag-cloth i:first-child{border-radius:6px 0 0 6px}.flag-cloth i:last-child{border-radius:0 6px 6px 0}
.flag-cloth::after{content:'';position:absolute;inset:0;border-radius:6px;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%) -200% 0/250% 100% no-repeat;animation:flagShine 1.1s .45s ease forwards;mix-blend-mode:overlay}
.flag-ring{position:absolute;width:120px;height:120px;border-radius:50%;border:2px solid var(--em);opacity:0;animation:flagRing 1s .15s ease-out forwards}
.flag-burst strong{position:relative;font:800 30px var(--display);letter-spacing:-.03em;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.6);animation:flagText 1.9s var(--ease) forwards}
@keyframes flagFly{0%{transform:translate(var(--fx),var(--fy)) scale(.08) rotateY(-540deg) rotateZ(-20deg);opacity:0}12%{opacity:1}45%{transform:translate(0,0) scale(1.06) rotateY(0) rotateZ(-3deg)}55%{transform:scale(1) rotateZ(0)}80%{transform:scale(1);opacity:1}100%{transform:translate(var(--fx),var(--fy)) scale(.05) rotateZ(12deg);opacity:0}}
@keyframes flagWave{from{transform:translateY(-5px) scaleY(1.02);filter:brightness(1.12)}to{transform:translateY(5px) scaleY(.98);filter:brightness(.82)}}
@keyframes flagShine{to{background-position:200% 0}}
@keyframes flagRing{0%{transform:scale(.3);opacity:.9}100%{transform:scale(4.5);opacity:0;border-width:0}}
@keyframes flagText{0%,30%{opacity:0;transform:translateY(16px);letter-spacing:.2em}50%,78%{opacity:1;transform:none;letter-spacing:-.03em}100%{opacity:0;transform:translateY(-10px)}}
@keyframes flagDim{0%,100%{opacity:0}25%,75%{opacity:1}}
@keyframes flagFade{to{visibility:hidden}}
.move-choice>canvas.movefx,.editable-moves li>button>canvas.movefx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;border-radius:inherit}
.move-choice[data-move-type]::before,.editable-moves li>button[data-move-type]::before{opacity:.3}
.move-choice[data-move-type]:hover,.editable-moves li>button[data-move-type]:not([data-move-type=""]):hover{box-shadow:0 0 28px color-mix(in srgb,var(--move-color) 55%,transparent),inset 0 0 18px color-mix(in srgb,var(--move-color) 35%,transparent);transform:translateY(-1px)}
.bag-del{position:absolute;top:6px;left:6px;width:22px;height:22px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,90,90,.45);border-radius:7px;background:rgba(40,6,6,.7);color:#ff8a8a;font-size:14px;line-height:1;opacity:0;transition:opacity .2s,background .2s}
.bag-category li:hover .bag-del,.bag-del:focus-visible{opacity:1}.bag-del:hover{background:#c0392b;color:#fff}
.release-btn{display:block;margin:26px auto 0;padding:9px 16px;border:1px solid rgba(255,90,90,.35);border-radius:12px;background:transparent;color:#ff8a8a;font-size:13px;text-transform:none;letter-spacing:0;transition:background .2s,color .2s,border-color .2s}
.release-btn:hover{background:rgba(192,57,43,.9);border-color:#e74c3c;color:#fff}
/* Bestätigungsdialog */
dialog.ask{padding:0;border:0;background:none;color:var(--text);max-width:min(420px,92vw);overflow:visible}
dialog.ask::backdrop{background:rgba(1,8,6,.7);backdrop-filter:blur(6px);animation:askFade .25s ease}
.ask-card{--c:var(--em);position:relative;padding:34px 28px 24px;text-align:center;background:linear-gradient(160deg,rgba(14,44,34,.96),rgba(4,16,12,.98));border:1px solid color-mix(in srgb,var(--c) 45%,transparent);border-radius:20px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 30px 80px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--c) 22%,transparent);animation:askIn .45s var(--ease);overflow:hidden}
.ask.danger .ask-card{--c:#ff5a6e}
.ask-card::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.ask-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--c),transparent);animation:askScan 2.4s linear infinite}
.ask-sprite,.ask-icon{width:96px;height:96px;margin:-6px auto 12px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 28%,transparent),transparent 70%)}
.ask-sprite img{width:96px;height:96px;image-rendering:pixelated;animation:askShake 1.6s ease-in-out infinite}
.ask-icon{font:700 44px var(--display);color:var(--c);text-shadow:0 0 18px var(--c)}
.ask h4{margin:0 0 8px;font:700 24px var(--display);letter-spacing:.02em}
.ask p{margin:0 0 22px;color:var(--muted);font:14px/1.5 var(--sans)}
.ask-actions{display:flex;gap:10px;justify-content:center}
.ask-actions button{flex:1;padding:12px 16px;border-radius:12px;font:600 16px var(--display);cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.ask-no{background:rgba(255,255,255,.04);color:var(--text);border:1px solid var(--line2)}
.ask-no:hover{background:rgba(255,255,255,.09)}
.ask-yes{background:var(--c);color:#04110c;border:0;box-shadow:0 0 24px color-mix(in srgb,var(--c) 45%,transparent)}
.ask-yes:hover{transform:translateY(-2px);box-shadow:0 0 36px color-mix(in srgb,var(--c) 70%,transparent)}
.ask-actions button:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.ask.out .ask-card{animation:askOut .22s ease forwards}
.ask.out::backdrop{opacity:0;transition:opacity .22s}
@keyframes askIn{from{opacity:0;transform:scale(.8) translateY(20px);filter:blur(6px)}60%{transform:scale(1.03)}to{opacity:1;transform:none;filter:none}}
@keyframes askOut{to{opacity:0;transform:scale(.9) translateY(10px)}}
@keyframes askFade{from{opacity:0}}
@keyframes askScan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes askShake{0%,100%{transform:rotate(0)}10%{transform:rotate(-6deg)}20%{transform:rotate(6deg)}30%{transform:rotate(-3deg)}40%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.ask-card,.ask-card::after,.ask-sprite img{animation:none}}
.bag-plus{position:absolute;bottom:6px;right:6px;width:22px;height:22px;display:grid;place-items:center;padding:0;border:1px solid rgba(52,245,164,.45);border-radius:7px;background:rgba(4,30,20,.75);color:var(--em);font-size:16px;line-height:1;opacity:0;transition:opacity .2s,background .2s,transform .15s}
.bag-category li:hover .bag-plus,.bag-plus:focus-visible{opacity:1}
.bag-plus:hover{background:var(--em);color:#04110c;transform:scale(1.1)}
.bag-add-list button{position:relative;overflow:visible}
.bag-owned{position:absolute;top:6px;right:8px;font:normal 14px var(--mono);color:var(--em)}
.bag-float{position:absolute;left:50%;top:30%;font:700 20px var(--display);color:var(--em);text-shadow:0 0 12px var(--em);pointer-events:none;animation:bagFloat .9s var(--ease) forwards}
@keyframes bagFloat{from{opacity:1;transform:translate(-50%,0) scale(.6)}30%{transform:translate(-50%,-14px) scale(1.2)}to{opacity:0;transform:translate(-50%,-40px) scale(1)}}
.collection-foot{display:none}
.footer-big{align-items:center;gap:clamp(24px,5vw,72px)}
.footer-big:hover img{opacity:.14;filter:saturate(.7) drop-shadow(0 0 25px rgba(52,245,164,.2));transform:none}
.footer-big img:hover{opacity:.55;filter:saturate(1) drop-shadow(0 0 36px rgba(52,245,164,.38));transform:scale(1.015)}
.footer-game img{width:min(25vw,250px)!important}