:root{--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--sp-16: 64px;--sp-20: 80px;--text-2xs: .725rem;--text-xs: .7875rem;--text-sm: .9125rem;--text-base: 1.0375rem;--text-md: 1.1rem;--text-lg: 1.225rem;--text-xl: 1.35rem;--text-2xl: 1.6rem;--text-3xl: 1.975rem;--text-4xl: 2.6rem;--text-5xl: 3.6rem;--radius-xs: 0;--radius-sm: 0;--radius-md: 0;--radius-lg: 0;--radius-xl: 0;--radius-2xl: 0;--radius-full: 9999px;--t-fast: .1s ease;--t-base: .18s ease;--t-slow: .3s ease;--t-spring: .32s cubic-bezier(.34, 1.56, .64, 1);--z-base: 1;--z-dropdown: 50;--z-sticky: 100;--z-tray: 200;--z-modal: 300;--header-height: 64px;--sidebar-width: 268px;--page-max-w: 1480px;--page-pad: var(--sp-6);--bg: #f3f3f6;--bg-card: #ffffff;--bg-elevated: #eaeaee;--bg-input: #eeeef2;--bg-glass: rgba(243, 243, 246, .88);--border: rgba(0, 0, 0, .07);--border-strong: rgba(0, 0, 0, .14);--border-accent: var(--accent);--text-primary: #0d0d12;--text-secondary: #50505f;--text-muted: #94949f;--text-faint: #c0c0cc;--accent: #d4a800;--accent-subtle: rgba(212, 168, 0, .1);--accent-hover: #ebb800;--accent-fg: #0d0d12;--danger: #d43a3a;--danger-subtle: rgba(212, 58, 58, .1);--danger-hover: #bc2e2e;--shadow-xs: 0 1px 2px rgba(0,0,0,.07);--shadow-sm: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);--shadow-md: 0 4px 20px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.06);--shadow-lg: 0 12px 40px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.07);--shadow-xl: 0 24px 64px rgba(0,0,0,.16), 0 8px 20px rgba(0,0,0,.09);--shadow-focus: 0 0 0 3px var(--accent-subtle);--font-display: "Space Grotesk", sans-serif;--font-body: "DM Sans", sans-serif;--white: #fff}[data-theme=dark]{--bg: #0b0b10;--bg-card: #131318;--bg-elevated: #1a1a22;--bg-input: #18181f;--bg-glass: rgba(11, 11, 16, .88);--border: rgba(255, 255, 255, .07);--border-strong: rgba(255, 255, 255, .14);--text-primary: #eeeef4;--text-secondary: #9898b4;--text-muted: #7272a0;--text-faint: #3a3a52;--accent: #f0cc40;--accent-subtle: rgba(240, 204, 64, .12);--accent-hover: #f8d840;--accent-fg: #0b0b10;--shadow-xs: 0 1px 3px rgba(0,0,0,.3);--shadow-sm: 0 2px 10px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2);--shadow-md: 0 4px 24px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);--shadow-lg: 0 12px 48px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.35);--shadow-xl: 0 24px 72px rgba(0,0,0,.72), 0 8px 24px rgba(0,0,0,.45)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{background:var(--bg);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;transition:background var(--t-base),color var(--t-base)}#root{min-height:100vh;display:flex;flex-direction:column}a{color:inherit;text-decoration:none}button{font-family:var(--font-body);cursor:pointer;border:none;background:none;color:inherit;touch-action:manipulation}input,select{font-family:var(--font-body)}img{display:block}a,button,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}@media(hover:none),(pointer:coarse){input,select,textarea{font-size:16px}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-faint);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media(max-width:768px){html{font-size:15px}}@media(max-width:640px){html{font-size:14px}:root{--page-pad: var(--sp-4)}}@media(max-width:480px){html{font-size:13px}:root{--page-pad: var(--sp-4);--header-height: 52px}}@media(max-width:400px){:root{--page-pad: var(--sp-3)}}.units-toggle{position:relative;display:flex;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-full);padding:2px;gap:2px}.units-slider{position:absolute;top:2px;bottom:2px;background:var(--bg-card);border-radius:var(--radius-full);box-shadow:var(--shadow-xs);transition:left var(--t-base),width var(--t-base);pointer-events:none}.units-btn{position:relative;font-size:var(--text-xs);font-weight:600;padding:3px 10px;border-radius:var(--radius-full);color:var(--text-muted);transition:color var(--t-fast);white-space:nowrap}.units-btn.active{color:var(--accent)}:root .type-normal{background:#a8a8782e;color:#6e6e48}:root .type-fire{background:#f080302e;color:#b84800}:root .type-water{background:#6890f02e;color:#1840b8}:root .type-electric{background:#f8d0302e;color:#987000}:root .type-grass{background:#78c8502e;color:#327810}:root .type-ice{background:#98d8d82e;color:#207878}:root .type-fighting{background:#c030282e;color:#b02820}:root .type-poison{background:#a040a02e;color:#902890}:root .type-ground{background:#e0c0682e;color:#806010}:root .type-flying{background:#a890f02e;color:#5040b8}:root .type-psychic{background:#f858882e;color:#b81050}:root .type-bug{background:#a8b8202e;color:#587000}:root .type-rock{background:#b8a0382e;color:#706010}:root .type-ghost{background:#7058982e;color:#503870}:root .type-dragon{background:#7038f82e;color:#4010b8}:root .type-dark{background:#7058482e;color:#403028}:root .type-steel{background:#b8b8d02e;color:#505070}:root .type-fairy{background:#ee99ac2e;color:#b05068}[data-theme=dark] .type-normal{background:#a8a87826;color:#b8b890}[data-theme=dark] .type-fire{background:#f0803026;color:#f09060}[data-theme=dark] .type-water{background:#6890f026;color:#80a8f8}[data-theme=dark] .type-electric{background:#f8d03026;color:#f8d040}[data-theme=dark] .type-grass{background:#78c85026;color:#80d050}[data-theme=dark] .type-ice{background:#98d8d826;color:#90e0e0}[data-theme=dark] .type-fighting{background:#c0302826;color:#e04038}[data-theme=dark] .type-poison{background:#a040a026;color:#c060c0}[data-theme=dark] .type-ground{background:#e0c06826;color:#e8c870}[data-theme=dark] .type-flying{background:#a890f026;color:#a890f8}[data-theme=dark] .type-psychic{background:#f8588826;color:#f870a0}[data-theme=dark] .type-bug{background:#a8b82026;color:#b8c820}[data-theme=dark] .type-rock{background:#b8a03826;color:#c8a840}[data-theme=dark] .type-ghost{background:#70589826;color:#9878c0}[data-theme=dark] .type-dragon{background:#7038f826;color:#9070f8}[data-theme=dark] .type-dark{background:#70584826;color:#988070}[data-theme=dark] .type-steel{background:#b8b8d026;color:#b8b8e0}[data-theme=dark] .type-fairy{background:#ee99ac26;color:#f0a0b8}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pixel-art{image-rendering:pixelated}@keyframes sprite-spin{to{transform:rotate(360deg)}}.filter-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}.toggle-label{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);flex:1}.filter-info-wrap{position:relative;display:inline-flex}.filter-info-icon{width:15px;height:15px;border-radius:var(--radius-full);background:var(--bg-elevated);border:1px solid var(--border-strong);color:var(--text-muted);font-size:9px;font-weight:700;font-family:var(--font-display);display:flex;align-items:center;justify-content:center;cursor:default;flex-shrink:0;line-height:1;transition:background var(--t-fast),color var(--t-fast)}.filter-info-wrap:hover .filter-info-icon{background:var(--accent);border-color:var(--accent);color:var(--white)}.filter-info-tooltip{position:absolute;bottom:calc(100% + 8px);left:0;width:240px;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:var(--sp-3);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.55;box-shadow:var(--shadow-lg);pointer-events:none;opacity:0;transition:opacity var(--t-fast);z-index:var(--z-dropdown);white-space:normal}.filter-info-tooltip:after{content:"";position:absolute;top:100%;left:3px;border:5px solid transparent;border-top-color:var(--border-strong)}.filter-info-tooltip:before{content:"";position:absolute;top:calc(100% - 1px);left:3px;border:5px solid transparent;border-top-color:var(--bg-card);z-index:1}.filter-info-wrap:hover .filter-info-tooltip{opacity:1}.filter-info-tooltip--portal{position:fixed;opacity:1;bottom:auto}@media(max-width:540px){.filter-info-tooltip{left:auto;right:0;max-width:min(240px,calc(100vw - var(--sp-8)))}}.card-sprite-skeleton{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}.card-sprite-skeleton:after{content:"";width:36px;height:36px;border-radius:var(--radius-full);border:3px solid var(--border-strong);border-top-color:var(--accent);animation:sprite-spin .7s linear infinite}.header{position:sticky;top:0;z-index:var(--z-sticky);height:var(--header-height);background:var(--bg-glass);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid var(--border);transition:background var(--t-base)}.header-inner{max-width:var(--page-max-w);margin:0 auto;padding:0 var(--page-pad);height:100%;display:flex;align-items:center;justify-content:space-between}.header-end{display:flex;align-items:center;gap:var(--sp-2)}.theme-toggle.active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}.header-logo{display:flex;align-items:center;gap:var(--sp-2);font-family:"Gochi Hand",var(--font-display);font-size:var(--text-3xl);font-weight:500;letter-spacing:0;color:var(--text-primary);transition:opacity var(--t-fast)}.header-logo:hover{opacity:.7}.logo-mark{height:22px;width:22px;image-rendering:pixelated}.header-nav{display:flex;align-items:center;gap:0;height:100%}.nav-link{display:flex;align-items:center;height:var(--header-height);padding:0 var(--sp-6);border-radius:0;font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);border-bottom:2px solid transparent;white-space:nowrap;transition:color var(--t-fast),border-color var(--t-fast)}.nav-link:hover{color:var(--text-primary)}.nav-link.active{color:var(--text-primary);border-bottom-color:var(--accent);font-weight:600}.nav-short{display:none}.nav-full{display:inline}.theme-toggle{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);border:1px solid var(--border);transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast)}.theme-toggle:hover{color:var(--text-primary);background:var(--bg-elevated);border-color:var(--border-strong)}@media(max-width:600px){.nav-full{display:none}.nav-short{display:inline}.nav-link{padding:0 var(--sp-4);font-size:var(--text-xs)}.header-logo{font-size:var(--text-base)}}@media(max-width:400px){.nav-link{padding:0 var(--sp-3)}}@media(max-width:340px){.logo-mark{display:inline;height:18px;width:18px}.logo-text{display:none}.nav-link{padding:0 var(--sp-2)}.header-end{gap:var(--sp-1)}.theme-toggle{width:32px;height:32px}}@media(max-width:290px){.nav-link{padding:0 var(--sp-1);font-size:9px}.theme-toggle{width:28px;height:28px}.header-end{gap:2px}}.nav-about{display:flex;align-items:center;gap:var(--sp-1);height:36px;padding:0 var(--sp-3);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);border:1px solid var(--border);border-bottom:1px solid var(--border);white-space:nowrap;transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast)}.nav-about:hover{color:var(--text-primary);background:var(--bg-elevated);border-color:var(--border-strong)}.nav-about.active{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}@media(max-width:600px){.nav-about-label{display:none}.nav-about{padding:0 var(--sp-2);width:36px;justify-content:center}}.site-footer{border-top:1px solid var(--border);background:var(--bg);padding:var(--sp-6) var(--page-pad);margin-top:auto}.footer-inner{max-width:var(--page-max-w);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-4)}.footer-legal{grid-column:2;text-align:center}.footer-nav{grid-column:3;justify-self:end}.footer-nav{display:flex;gap:var(--sp-4)}.footer-links{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);justify-content:center}.footer-link{font-size:var(--text-sm);color:var(--text-muted);text-decoration:none;transition:color var(--t-fast)}.footer-link:hover{color:var(--text-primary)}.footer-legal{font-size:var(--text-xs);color:var(--text-muted);line-height:1.5}.app-main{flex:1;display:flex;flex-direction:column}.app-loading{flex:1;display:flex;align-items:center;justify-content:center;min-height:300px}.app-loading:after{content:"";width:32px;height:32px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:app-spin .7s linear infinite}@keyframes app-spin{to{transform:rotate(360deg)}}