:root{--bg-deep:#1a2030;--bg-mid:#252b3d;--bg-soft:#303851;--frame-red:#c93b3b;--frame-red-dark:#8b1d1d;--frame-red-light:#e85a5a;--lcd-green:#9bbc0f;--lcd-green-dark:#0f380f;--lcd-green-mid:#306230;--ink:#e8eef7;--ink-soft:#9aa6c2;--ink-dim:#5e6a85;--gold:#f0c419;--shadow-step:0 4px 0 #0a0d18, 0 8px 0 rgba(0,0,0,.4)}*{box-sizing:border-box}::selection{background:var(--gold);color:#2a1a08}html,body{background:var(--bg-deep);color:var(--ink);min-height:100vh;margin:0;padding:0;font-family:VT323,monospace;font-size:20px;overflow-x:hidden}body{background:radial-gradient(ellipse at 20% 0%, rgba(201,59,59,.12), transparent 50%), radial-gradient(ellipse at 80% 100%, rgba(155,188,15,.08), transparent 50%), var(--bg-deep);background-attachment:fixed;position:relative}body:before{content:"";pointer-events:none;z-index:9999;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 3px);position:fixed;top:0;bottom:0;left:0;right:0}.app{max-width:1200px;margin:0 auto;padding:32px 24px 80px;position:relative}.dex-shell{margin-bottom:36px;position:relative}.dex-shell-frame{background:linear-gradient(180deg, var(--frame-red-light), var(--frame-red) 50%, var(--frame-red-dark));border:4px solid #2a0808;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;padding:24px 32px;display:grid;position:relative;box-shadow:inset 0 4px rgba(255,255,255,.18),inset 0 -4px rgba(0,0,0,.3),0 6px #0a0d18,0 12px 32px rgba(0,0,0,.5)}.dex-led-cluster{grid-template-columns:auto auto auto auto;align-items:center;gap:10px;display:grid}.dex-led{border:3px solid #2a0808;border-radius:50%;box-shadow:inset 2px 2px rgba(255,255,255,.4),inset -2px -2px rgba(0,0,0,.3),0 0 12px}.dex-led--big{color:#3a8de8;background:radial-gradient(circle at 30% 30%,#aee2ff,#3a8de8 60%,#1c4a8a);width:56px;height:56px;animation:2.4s ease-in-out infinite ledPulse}.dex-led--sm{width:16px;height:16px}.dex-led--red{color:#ff5252;background:#ff5252}.dex-led--yellow{color:#f0c419;background:#f0c419;animation:1.6s ease-in-out .2s infinite ledPulse}.dex-led--green{color:#5cb84a;background:#5cb84a;animation:1.6s ease-in-out .4s infinite ledPulse}@keyframes ledPulse{0%,to{filter:brightness()}50%{filter:brightness(1.4)}}.dex-title-block{text-align:left}.dex-eyebrow{letter-spacing:2px;color:#2a0808;background:rgba(255,255,255,.2);margin-bottom:8px;padding:4px 8px;font-family:"Press Start 2P",monospace;font-size:9px;display:inline-block}.dex-title{color:#fff8dc;letter-spacing:2px;text-shadow:3px 3px #2a0808,-1px -1px #ff8a8a;margin:0;font-family:"Press Start 2P",monospace;font-size:32px;line-height:1}.dex-sub{color:rgba(255,248,220,.85);letter-spacing:1px;margin-top:8px;font-size:16px}.dex-corner-bolts{grid-template-columns:1fr 1fr;align-content:space-between;align-self:stretch;gap:8px;display:grid}.dex-corner-bolts span{background:radial-gradient(circle at 30% 30%,#888,#333);border:2px solid #2a0808;border-radius:50%;width:14px;height:14px;position:relative}.dex-corner-bolts span:after{content:"";background:linear-gradient(45deg,transparent 45%,#1a1a1a 45%,#1a1a1a 55%,transparent 55%);position:absolute;top:3px;bottom:3px;left:3px;right:3px}.controls{grid-template-columns:320px 1fr;align-items:start;gap:16px;margin-top:20px;display:grid}.search-wrap{background:var(--lcd-green);border:3px solid var(--lcd-green-dark);padding:0;position:relative;box-shadow:inset 0 0 0 2px rgba(15,56,15,.3),inset 2px 2px rgba(255,255,255,.2),0 4px #0a0d18}.search-icon{color:var(--lcd-green-dark);font-family:"Press Start 2P",monospace;font-size:22px;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search{width:100%;color:var(--lcd-green-dark);letter-spacing:1px;text-transform:uppercase;background:0 0;border:none;outline:none;padding:14px 14px 14px 40px;font-family:VT323,monospace;font-size:22px}.search::placeholder{color:var(--lcd-green-mid)}.search-clear{background:var(--lcd-green-dark);color:var(--lcd-green);cursor:pointer;border:none;width:28px;height:28px;font-family:inherit;font-size:22px;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.type-filters{flex-wrap:wrap;gap:8px;display:flex}.type-pill{letter-spacing:1px;background:var(--pill-bg,var(--bg-soft));color:var(--pill-fg,var(--ink));cursor:pointer;border:3px solid #0a0d18;padding:8px 12px;font-family:"Press Start 2P",monospace;font-size:9px;transition:transform 80ms,box-shadow 80ms;position:relative;top:0;box-shadow:inset 2px 2px rgba(255,255,255,.25),inset -2px -2px rgba(0,0,0,.25),0 3px #0a0d18}.type-pill:hover{transform:translateY(-1px)}.type-pill:active{top:2px;box-shadow:inset 2px 2px rgba(0,0,0,.25),0 1px #0a0d18}.type-pill--active{outline:3px solid var(--gold);outline-offset:2px}.type-pill--all{color:#2a0808;background:#fff8dc}.loading{text-align:center;color:var(--ink-dim);grid-column:1/-1;padding:80px 24px}.loading-msg{letter-spacing:2px;font-family:"Press Start 2P",monospace;font-size:11px;animation:1s ease-in-out infinite hintBlink}.grid{width:100%;position:relative}.grid--has-focus .card-wrap:not(.card-wrap--focused){opacity:.35;filter:saturate(.5);pointer-events:none;transform:scale(.96)}.focus-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:5;background:rgba(10,13,24,.7);animation:.25s ease-out fadeIn;position:fixed;top:0;bottom:0;left:0;right:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.card-wrap{transform-style:preserve-3d;perspective:1200px;transition:opacity .3s,filter .3s;position:absolute}.card-wrap--enter{animation:.7s cubic-bezier(.2,.9,.3,1.2) backwards cardEnter}@keyframes cardEnter{0%{opacity:0;transform:translateY(40px)rotateX(-30deg)}to{opacity:1;transform:translateY(0)rotateX(0)}}.card-wrap--focused{z-index:10}.card-3d{width:100%;height:100%;transform-style:preserve-3d;cursor:grab;-webkit-user-select:none;user-select:none;animation:5s ease-in-out infinite cardIdle;position:relative}.card-wrap--focused .card-3d{touch-action:none;animation:none}.card-wrap--focused{z-index:20;width:min(380px,78vw);height:min(532px,109.2vw);margin:0;animation:.45s cubic-bezier(.2,.9,.3,1.2) focusPop;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes focusPop{0%{opacity:.4;transform:translate(-50%,-50%)scale(.7)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes cardIdle{0%,to{transform:rotateX(2deg)rotateY(-3deg)}25%{transform:rotateX(-3deg)rotateY(2deg)}50%{transform:rotateX(2deg)rotateY(4deg)}75%{transform:rotateX(-2deg)rotateY(-3deg)}}.card-wrap--dragging .card-3d{cursor:grabbing}@media (hover:hover) and (pointer:fine){.card-wrap:not(.card-wrap--focused):hover .card-3d{transition:transform .35s cubic-bezier(.2,.9,.3,1.2);animation-play-state:paused;transform:rotateX(-8deg)rotateY(8deg)translateZ(20px)}.card-3d:hover .foil{opacity:.7}}.card-face{-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--bg-mid);border:4px solid #0a0d18;flex-direction:column;display:flex;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,255,255,.04),inset 4px 4px rgba(255,255,255,.05),inset -4px -4px rgba(0,0,0,.3)}.card-face--front{background:linear-gradient(180deg, var(--bg-soft), var(--bg-mid));gap:10px;padding:12px;transform:translateZ(3px)}.card-face--back{background:linear-gradient(180deg, var(--bg-soft), var(--bg-deep));gap:8px;padding:12px;transform:rotateY(180deg)translateZ(3px)}.card-edge{background:linear-gradient(90deg,#1a0808,#3a1010,#1a0808);position:absolute}.card-edge--top{transform-origin:top;height:6px;top:0;left:0;right:0;transform:rotateX(90deg)}.card-edge--bottom{transform-origin:bottom;height:6px;bottom:0;left:0;right:0;transform:rotateX(-90deg)}.card-edge--left{transform-origin:0;width:6px;top:0;bottom:0;left:0;transform:rotateY(-90deg)}.card-edge--right{transform-origin:100%;width:6px;top:0;bottom:0;right:0;transform:rotateY(90deg)}.card-header{background:var(--type-bg,#444);color:#fff;text-shadow:2px 2px rgba(0,0,0,.4);border:3px solid #0a0d18;justify-content:space-between;align-items:baseline;padding:6px 10px;font-family:"Press Start 2P",monospace;display:flex;box-shadow:inset 2px 2px rgba(255,255,255,.25),inset -2px -2px rgba(0,0,0,.25)}.card-num{letter-spacing:1px;opacity:.85;font-size:9px}.card-name{letter-spacing:1px;font-size:13px}.card-portrait{background:var(--lcd-green);box-shadow:inset 0 0 0 2px var(--lcd-green-dark), inset 4px 4px 0 rgba(15,56,15,.3);border:3px solid #0a0d18;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.card-portrait-bg{background-image:repeating-linear-gradient(0deg,rgba(15,56,15,.15) 0,rgba(15,56,15,.15) 2px,transparent 2px,transparent 6px),radial-gradient(circle at 50% 60%,transparent 30%,rgba(15,56,15,.4) 100%);position:absolute;top:0;bottom:0;left:0;right:0}.card-sprite{z-index:1;filter:drop-shadow(3px 3px rgba(15,56,15,.5));object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:88%;max-width:220px;height:88%;max-height:220px;position:relative}.card-wrap--focused .card-sprite{max-width:280px;max-height:280px}.card-portrait-frame{pointer-events:none;border:1px solid var(--lcd-green-dark);position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 0 12px rgba(15,56,15,.4)}.card-meta{justify-content:space-between;align-items:center;gap:8px;padding:4px 2px;display:flex}.card-category{color:var(--ink-soft);letter-spacing:1px;font-family:"Press Start 2P",monospace;font-size:8px}.card-types{gap:4px;display:flex}.type-badge{letter-spacing:1px;border:2px solid #0a0d18;padding:4px 6px;font-family:"Press Start 2P",monospace;font-size:8px}.card-flavor{color:var(--ink-soft);border:2px dashed rgba(154,166,194,.3);min-height:50px;padding:8px 10px;font-size:16px;font-style:italic;line-height:1.2;overflow:hidden}.back-grid{flex-direction:column;flex:1;gap:8px;display:flex;overflow:hidden}.back-section{background:rgba(10,13,24,.3);border:2px solid rgba(255,255,255,.06);padding:6px 8px}.back-section-title{color:var(--gold);letter-spacing:1px;margin-bottom:6px;font-family:"Press Start 2P",monospace;font-size:8px}.data-row{justify-content:space-between;padding:1px 0;font-size:16px;line-height:1.1;display:flex}.data-row span{color:var(--ink-dim);letter-spacing:1px;align-self:center;font-family:"Press Start 2P",monospace;font-size:7px}.data-row b{color:var(--ink);font-weight:400}.stat{grid-template-columns:28px 1fr 28px;align-items:center;gap:6px;margin-bottom:3px;display:grid}.stat-label{color:var(--ink-soft);letter-spacing:1px;font-family:"Press Start 2P",monospace;font-size:7px}.stat-bar{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.08);height:8px;position:relative;overflow:hidden}.stat-bar-fill{background:linear-gradient(90deg, var(--lcd-green-dark) 0%, var(--lcd-green) 100%);height:100%;transition:width .6s cubic-bezier(.2,.9,.3,1.2);box-shadow:inset 0 -2px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.3)}.stat-value{color:var(--ink);text-align:right;font-family:"Press Start 2P",monospace;font-size:8px}.habitat-row{align-items:center;gap:8px;display:flex}.habitat-icon{color:var(--type-bg);text-shadow:2px 2px rgba(0,0,0,.4);font-size:22px}.habitat-name{color:var(--ink);font-size:16px;line-height:1}.habitat-region{color:var(--ink-dim);letter-spacing:1px;margin-top:3px;font-family:"Press Start 2P",monospace;font-size:7px}.evo-chain{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.evo-step{color:var(--ink-soft);letter-spacing:1px;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.08);padding:4px 6px;font-family:"Press Start 2P",monospace;font-size:8px}.evo-step--current{background:var(--type-bg);color:#fff;border-color:var(--gold);text-shadow:1px 1px rgba(0,0,0,.4)}.evo-arrow{color:var(--gold);font-size:12px}.foil{pointer-events:none;opacity:0;mix-blend-mode:color-dodge;background:radial-gradient(circle at var(--foil-x,50%) var(--foil-y,50%), rgba(255,255,255,.4) 0%, rgba(255,200,100,.2) 25%, transparent 60%), repeating-linear-gradient(115deg, rgba(255,0,150,.18) 0px, rgba(255,200,0,.18) 8px, rgba(0,200,255,.18) 16px, rgba(120,0,255,.18) 24px);transition:opacity .3s;position:absolute;top:0;bottom:0;left:0;right:0}.card-hint{color:var(--gold);letter-spacing:1px;white-space:nowrap;text-shadow:2px 2px #0a0d18;-webkit-user-select:none;user-select:none;font-family:"Press Start 2P",monospace;font-size:8px;animation:1.4s ease-in-out infinite hintBlink;position:absolute;bottom:-28px;left:50%;transform:translate(-50%)}@keyframes hintBlink{0%,to{opacity:1}50%{opacity:.5}}.empty{text-align:center;color:var(--ink-dim);padding:80px 24px}.empty-icon{color:var(--frame-red);font-size:64px}.empty-msg{letter-spacing:2px;margin-top:12px;font-family:"Press Start 2P",monospace;font-size:14px}.empty-sub{margin-top:6px;font-size:18px}.dex-footer{background:var(--bg-mid);color:var(--ink-soft);letter-spacing:1px;border:3px solid #0a0d18;flex-wrap:wrap;align-items:center;gap:24px;margin-top:60px;padding:14px 20px;font-family:"Press Start 2P",monospace;font-size:9px;display:flex;box-shadow:inset 2px 2px rgba(255,255,255,.04),0 4px #0a0d18}.dex-footer-status{color:var(--lcd-green);align-items:center;gap:8px;margin-left:auto;display:inline-flex}.dex-footer-dot{background:var(--lcd-green);width:10px;height:10px;box-shadow:0 0 8px var(--lcd-green);animation:1.2s infinite ledPulse;display:inline-block}.grid-sentinel{text-align:center;min-height:80px;color:var(--ink-dim);letter-spacing:1px;margin-top:24px;padding:24px;font-family:"Press Start 2P",monospace;font-size:10px}.grid-sentinel--loading:after{content:"▸ LOADING...";animation:1s ease-in-out infinite hintBlink}.grid-sentinel--error{color:var(--frame-red);cursor:pointer}.grid-sentinel--error:after{content:"▸ FAILED — TAP TO RETRY"}@media (max-width:760px){.dex-shell-frame{grid-template-columns:1fr;gap:16px}.dex-corner-bolts{display:none}.dex-title{font-size:22px}.controls{grid-template-columns:1fr}.card-wrap--focused{transform:translate(-50%,-50%)scale(1)}}body.overlay-active{overflow:hidden}body.overlay-active>#root,body.overlay-active>.mute-toggle,body.overlay-active>.copyright-banner{display:none!important}.start-overlay{z-index:200;background:radial-gradient(ellipse at 50% 40%, rgba(155,188,15,.1), transparent 60%), var(--bg-deep);cursor:pointer;width:100%;height:100vh;flex-direction:column;justify-content:center;align-items:center;gap:18px;height:100dvh;animation:.4s ease-out fadeIn;display:flex;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.start-overlay:after{content:"";pointer-events:none;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 3px);position:absolute;top:0;bottom:0;left:0;right:0}.start-overlay-title{letter-spacing:4px;color:var(--gold);text-shadow:4px 4px #2a0808,-1px -1px #fff8dc;font-family:"Press Start 2P",monospace;font-size:36px;animation:1.1s ease-in-out infinite hintBlink}.start-overlay-sub{letter-spacing:2px;color:var(--ink-soft);font-family:"Press Start 2P",monospace;font-size:11px}.start-overlay-skip{letter-spacing:1px;background:var(--bg-mid);color:var(--ink-soft);cursor:pointer;border:3px solid #0a0d18;margin-top:24px;padding:8px 14px;font-family:"Press Start 2P",monospace;font-size:9px;box-shadow:inset 2px 2px rgba(255,255,255,.08),0 3px #0a0d18}.start-overlay-skip:hover{color:var(--ink)}.start-overlay-skip:active{transform:translateY(2px);box-shadow:0 1px #0a0d18}.start-overlay--leaving{pointer-events:none;animation:.3s ease-in forwards startOverlayLeave}@keyframes startOverlayLeave{to{opacity:0;transform:scale(1.04)}}@media (max-width:760px){.start-overlay-title{letter-spacing:2px;font-size:22px}.start-overlay-sub{font-size:9px}}.mute-toggle{z-index:150;letter-spacing:1px;color:var(--lcd-green);background:var(--lcd-green-dark);cursor:pointer;border:3px solid #0a0d18;padding:10px 14px;font-family:"Press Start 2P",monospace;font-size:10px;transition:transform 80ms,box-shadow 80ms;position:fixed;bottom:20px;right:20px;box-shadow:inset 2px 2px rgba(255,255,255,.12),inset -2px -2px rgba(0,0,0,.3),0 3px #0a0d18,0 0 16px rgba(155,188,15,.35)}.mute-toggle:hover{transform:translateY(-1px)}.mute-toggle:active{transform:translateY(2px);box-shadow:0 1px #0a0d18}.mute-toggle--muted{color:var(--ink-dim);background:var(--bg-mid);box-shadow:inset 2px 2px rgba(255,255,255,.05),inset -2px -2px rgba(0,0,0,.3),0 3px #0a0d18}@media (max-width:760px){.mute-toggle{padding:8px 10px;bottom:12px;right:12px}}.copyright-banner{z-index:140;letter-spacing:1px;color:var(--ink-soft);background:var(--bg-mid);pointer-events:none;border:3px solid #0a0d18;max-width:340px;padding:10px 14px;font-family:"Press Start 2P",monospace;font-size:8px;position:fixed;bottom:20px;left:20px;box-shadow:inset 2px 2px rgba(255,255,255,.05),inset -2px -2px rgba(0,0,0,.3),0 3px #0a0d18}@media (max-width:760px){.copyright-banner{max-width:calc(100vw - 24px);padding:8px 10px;font-size:7px;bottom:12px;left:12px}}