:root{--font: "Nunito", system-ui, -apple-system, sans-serif;--bg: #0f0f14;--bg-2: #16161f;--card: #1c1c28;--card-2: #23232f;--line: rgba(255, 255, 255, .08);--text: #f4f4f7;--muted: #9a9aae;--accent: #7c5cff;--accent-2: #ff5ca8;--gold: #ffce4f;--safe-b: env(safe-area-inset-bottom);--safe-t: env(safe-area-inset-top)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100dvh}body{font-family:var(--font);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.app{max-width:480px;margin:0 auto;min-height:100dvh;position:relative;background:radial-gradient(120% 60% at 100% 0%,rgba(124,92,255,.18),transparent 60%),radial-gradient(120% 50% at 0% 5%,rgba(255,92,168,.14),transparent 55%),var(--bg)}.page{padding:calc(var(--safe-t) + 18px) 18px calc(96px + var(--safe-b)) 18px;min-height:100dvh}.screen-title{font-size:30px;font-weight:900;letter-spacing:-.5px}.muted{color:var(--muted)}.row{display:flex;align-items:center;gap:10px}.between{display:flex;align-items:center;justify-content:space-between}.search{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 16px;margin-top:14px}.search input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:16px;font-weight:600}.search input::placeholder{color:var(--muted)}.chips{display:flex;gap:9px;overflow-x:auto;padding:16px 0 4px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;padding:9px 16px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:800;font-size:14px;color:var(--muted);white-space:nowrap}.chip.on{background:var(--accent);color:#fff;border-color:transparent}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.tile{position:relative;aspect-ratio:1;border-radius:20px;background:linear-gradient(160deg,var(--card-2),var(--card));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden}.tile img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}.tile .favdot{position:absolute;top:8px;right:8px;width:22px;height:22px;display:flex;align-items:center;justify-content:center}.tile-label{position:absolute;left:0;right:0;bottom:0;font-size:11px;font-weight:800;text-align:center;padding:16px 4px 7px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav{position:fixed;left:50%;transform:translate(-50%);bottom:calc(14px + var(--safe-b));width:min(440px,calc(100% - 28px));display:flex;justify-content:space-around;align-items:center;background:#1c1c28d1;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:22px;padding:10px 8px;z-index:50;box-shadow:0 18px 40px #00000073}.nav button{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:10px;font-weight:800;padding:4px 14px;border-radius:14px}.nav button.on{color:#fff}.nav .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;border-radius:16px;font-weight:900;font-size:16px;background:var(--accent);color:#fff}.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--text)}.btn.pink{background:var(--accent-2)}.btn:disabled{opacity:.45}.detail-stage{position:relative;border-radius:28px;padding:28px;background:radial-gradient(80% 70% at 50% 30%,rgba(124,92,255,.3),transparent 70%),var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;aspect-ratio:1}.detail-stage img{width:76%;height:76%;object-fit:contain;filter:drop-shadow(0 22px 34px rgba(0,0,0,.5))}.stat-row{display:flex;gap:10px;margin-top:16px}.stat{flex:1;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;text-align:center}.stat b{font-size:20px;display:block}.stat span{font-size:12px;color:var(--muted);font-weight:700}.iconbtn{width:44px;height:44px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}.kb{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:12px;max-height:240px;overflow-y:auto}.kb .key{aspect-ratio:1;border-radius:14px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}.kb .key img{width:78%;height:78%;object-fit:contain}.tray{display:flex;gap:8px;flex-wrap:wrap;min-height:64px;background:var(--card);border:1px dashed var(--line);border-radius:16px;padding:12px;margin:12px 0}.tray .slot{width:48px;height:48px;border-radius:12px;background:var(--card-2);display:flex;align-items:center;justify-content:center}.tray .slot img{width:80%;height:80%;object-fit:contain}.field{width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--text);font-family:inherit;font-size:16px;font-weight:700;outline:none}.packcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin-top:12px}.packcard .strip{display:flex;gap:6px;margin-top:10px}.packcard .strip img{width:40px;height:40px;object-fit:contain}.empty{text-align:center;padding:60px 20px;color:var(--muted)}.empty img{width:96px;height:96px;object-fit:contain;opacity:.85;margin-bottom:12px}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}