:root {
  --ink: #ecf0ff;
  --muted: #98a1bd;
  --surface: #191e2e;
  --surface-2: #22283a;
  --line: rgba(255,255,255,.08);
  --lime: #d8ff70;
  --pink: #ff75c5;
  --blue: #8b9dff;
  --bg: #0d111d;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 100% 0%, #242545 0, transparent 30rem), var(--bg); font-family: Manrope, system-ui, sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(100%, 680px); min-height: 100vh; margin: auto; padding: 18px 16px 36px; overflow: hidden; }
.topbar { display: flex; justify-content: space-between; align-items: center; }
.brand { display: flex; gap: 8px; align-items: center; text-decoration: none; color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.8px; }.brand span span { color: var(--lime); }.brand-mark { display:grid; place-items:center; width: 27px; height:27px; border-radius: 9px; color: #111421; background: var(--lime); font-size: 18px; }
.icon-button, .filter-button { width: 39px; height: 39px; display:grid; place-items:center; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 13px; font-size: 21px; }
.hero { display:flex; justify-content: space-between; gap: 14px; padding: 38px 4px 29px; align-items: flex-end; }.eyebrow { margin: 0 0 7px; color: var(--lime); font: 500 10px/1.2 'DM Mono', monospace; letter-spacing: .13em; }.hero h1, h2 { margin:0; font-size: clamp(34px, 10vw, 48px); line-height: .95; letter-spacing: -2.5px; }.hero em, h2 em { color: var(--lime); font-style: normal; }.collection-orb { flex: 0 0 87px; aspect-ratio:1; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; border-radius:50%; background: conic-gradient(var(--lime) 0deg, #33394c 0deg); }.collection-orb:after { content:""; position:absolute; inset:7px; border-radius:50%; background: var(--bg); }.collection-orb strong,.collection-orb span { z-index:1; }.collection-orb strong { font: 500 19px 'DM Mono'; }.collection-orb span { color:var(--muted); font-size:8px; text-transform:uppercase; }
.summary { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }.summary article { min-height:95px; padding:12px; border:1px solid var(--line); border-radius:18px; background:rgba(35,40,58,.55); }.summary-icon { display:grid; width:25px; height:25px; place-items:center; margin-bottom:7px; border-radius:9px; font-size:14px; }.lime { color:#181c24; background:var(--lime); }.pink { color:#25121f; background:var(--pink); }.blue { color:#151b3a; background:var(--blue); }.summary strong { display:block; font-size:22px; letter-spacing:-1px; }.summary small { color:var(--muted); font-size:10px; }
.primary-nav { display:flex; gap:3px; margin:28px -2px 20px; padding:4px; border-radius:15px; background:rgba(255,255,255,.04); }.nav-item { flex:1; padding:10px 4px; color:var(--muted); background:transparent; border:0; border-radius:11px; font-size:11px; font-weight:700; }.nav-item span { display:block; margin-bottom:3px; font-size:16px; }.nav-item.active { color:var(--ink); background:var(--surface-2); box-shadow:0 3px 10px #05070d55; }
.screen { display:none; }.screen.active { display:block; animation: reveal .22s ease-out; } @keyframes reveal { from { opacity:0; transform:translateY(5px);} }
.toolbar { display:flex; gap:9px; }.search { display:flex; align-items:center; flex:1; gap:8px; padding:0 12px; background:var(--surface); border:1px solid var(--line); border-radius:13px; color:var(--muted); }.search input { width:100%; height:39px; outline:0; border:0; color:var(--ink); background:transparent; font-size:13px; }.search input::placeholder, textarea::placeholder { color:#6d7690; }
.filters { display:grid; gap:10px; padding:15px 0 10px; }.filter-row { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }.filter,.filter-toggle,.group-toggle { flex:0 0 auto; padding:9px 16px; color:var(--muted); border:1px solid var(--line); border-radius:99px; background:transparent; font-size:11px; font-weight:700; }.filter.active { color:#171c26; background:var(--lime); border-color:var(--lime); }.filter b { margin-left:3px; }.filter-controls { gap:12px; }.filter-toggle,.group-toggle { color:var(--ink); background:var(--surface); }.filter-toggle b,.group-toggle b { color:var(--lime); }.group-toggle span { margin-left:3px; color:var(--muted); }.results-label { margin:3px 2px 12px; color:var(--muted); font: 500 10px 'DM Mono', monospace; }
.sprite-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.sprite-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); transition:.18s ease; }.sprite-card.mastered { border-color:rgba(216,255,112,.55); }.sprite-card.lost { border-color:rgba(255,117,197,.55); }.sprite-image-wrap { position:relative; height:145px; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, #3b445e, #1b2030 65%); }.sprite-image-wrap img { width:94%; height:94%; object-fit:contain; filter:drop-shadow(0 8px 11px rgba(0,0,0,.35)); }.sprite-card:not(.owned):not(.mastered) .sprite-image-wrap img { filter:grayscale(1) brightness(.45); }.rarity { position:absolute; top:9px; left:9px; padding:4px 6px; border-radius:6px; background:#0d111dbb; color:var(--blue); font:500 8px 'DM Mono'; text-transform:uppercase; }.card-body { padding:10px 10px 11px; }.sprite-title { display:flex; justify-content:space-between; align-items:center; gap:4px; }.sprite-title strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.3px; }.variant-count { color:var(--muted); font:500 9px 'DM Mono'; }.variant-select { width:100%; margin:8px 0; padding:6px 7px; appearance:none; color:var(--ink); border:1px solid var(--line); outline:0; border-radius:8px; background:var(--surface-2); font-size:9px; }.card-actions { display:grid; grid-template-columns:1fr 1fr 27px; gap:5px; }.status-action { padding:7px 2px; border:0; border-radius:8px; background:#2a3042; color:#b9c1da; font-size:9px; font-weight:800; }.status-action.have.selected { color:#182019; background:var(--lime); }.status-action.master.selected { color:#2b1422; background:var(--pink); }.lost-action { padding:0; border:0; border-radius:8px; background:#2a3042; color:var(--muted); font-size:14px; }.lost-action.selected { color:#311522; background:var(--pink); }
.trade-hero, .activity-heading, .unpublished-heading { padding:9px 2px 23px; }.trade-hero h2, .activity-heading h2, .unpublished-heading h2 { margin-bottom:13px; }.trade-hero > p:not(.eyebrow), .unpublished-heading > p:not(.eyebrow) { max-width:380px; color:var(--muted); font-size:12px; line-height:1.65; }.primary-button,.secondary-button { display:flex; justify-content:space-between; align-items:center; width:100%; padding:13px 14px; border:0; border-radius:13px; background:var(--lime); color:#171c23; font-size:12px; font-weight:800; }.primary-button span,.secondary-button span { font-size:19px; }.trade-hero .primary-button { margin-top:18px; }.friend-code-label { display:block; margin:24px 0 8px; color:var(--muted); font-size:10px; font-weight:800; }.screen textarea, .share-dialog textarea { width:100%; resize:none; padding:12px; outline:0; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font:11px/1.5 'DM Mono', monospace; }.secondary-button { margin-top:9px; background:var(--surface-2); color:var(--ink); border:1px solid var(--line); }.trade-results { margin-top:22px; }.empty-state { display:grid; place-items:center; min-height:160px; padding:22px; text-align:center; color:var(--muted); border:1px dashed #3a435b; border-radius:17px; }.empty-state span { color:var(--lime); font-size:28px; }.empty-state p { max-width:220px; margin:8px 0 0; font-size:11px; line-height:1.5; }.trade-section { margin:19px 0; }.trade-section h3 { display:flex; justify-content:space-between; margin:0 0 9px; font-size:12px; }.trade-section h3 span { color:var(--muted); font:500 10px 'DM Mono'; }.trade-list { display:flex; gap:8px; overflow:auto; padding-bottom:3px; }.trade-pill { flex:0 0 96px; padding:7px; border-radius:12px; background:var(--surface); border:1px solid var(--line); }.trade-pill img { width:56px; height:56px; display:block; margin:auto; object-fit:contain; }.trade-pill b { display:block; overflow:hidden; margin-top:4px; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }.trade-pill small { color:var(--muted); font-size:8px; }.activity-list { display:block; min-height:0; border:0; padding:0; text-align:left; }.activity-list.empty-state { display:grid; min-height:160px; border:1px dashed #3a435b; text-align:center; }.activity-row { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--line); }.activity-row img { width:42px; height:42px; padding:3px; border-radius:11px; object-fit:contain; background:var(--surface); }.activity-row b,.activity-row small { display:block; }.activity-row b { font-size:11px; }.activity-row small { margin-top:3px; color:var(--muted); font-size:9px; }.activity-row time { margin-left:auto; color:var(--muted); font:9px 'DM Mono'; }
.share-dialog { width:min(calc(100% - 32px), 450px); padding:25px; color:var(--ink); border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:0 20px 80px #000a; }.share-dialog::backdrop { background:#060912a8; backdrop-filter:blur(3px); }.share-dialog h2 { margin-bottom:13px; }.share-dialog p:not(.eyebrow) { color:var(--muted); font-size:12px; line-height:1.6; }.close-dialog { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:30px; height:30px; color:var(--ink); border:0; border-radius:10px; background:var(--surface-2); font-size:21px; }.share-dialog .primary-button { margin-top:9px; }.toast { position:fixed; z-index:5; bottom:24px; left:50%; max-width:calc(100% - 30px); padding:10px 13px; color:#101420; border-radius:10px; background:var(--lime); font-size:11px; font-weight:800; opacity:0; transform:translate(-50%,12px); pointer-events:none; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
.sprite-image-wrap { height:135px; }
.trade-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
.trade-pill { min-width:0; }
.variant-badge { position:absolute; z-index:1; right:9px; bottom:8px; padding:4px 6px; border-radius:6px; color:#c6ccdc; background:#0d111dbb; font:500 8px 'DM Mono'; text-transform:uppercase; }
.variant-badge.gold { color:#322400; background:#f5c74f; }.variant-badge.gummy { color:#3e1235; background:#ff9cdb; }.variant-badge.galaxy { color:#f0ddff; background:#6f4eaa; }.variant-badge.holofoil { color:#112a30; background:#a6f7ff; }.variant-badge.gem { color:#1e1345; background:#b7a0ff; }
.variant-name { color:var(--muted); font:500 9px 'DM Mono'; }.card-actions { margin-top:8px; }
.sprite-card.variant-base { background:linear-gradient(155deg, #222a40, #181d2c 72%); }.sprite-card.variant-base .sprite-image-wrap { background:radial-gradient(circle at 50% 34%, #485473, #20263a 66%); }
.sprite-card.variant-gold { background:linear-gradient(155deg, #5b4819, #282316 74%); border-color:rgba(245,199,79,.32); }.sprite-card.variant-gold .sprite-image-wrap { background:radial-gradient(circle at 50% 32%, #917529, #3b311a 66%); }
.sprite-card.variant-gummy { background:linear-gradient(155deg, #562744, #281b31 74%); border-color:rgba(255,156,219,.3); }.sprite-card.variant-gummy .sprite-image-wrap { background:radial-gradient(circle at 50% 32%, #9b4c7f, #462540 66%); }
.sprite-card.variant-galaxy { background:linear-gradient(155deg, #342456, #1c1a3b 74%); border-color:rgba(163,116,255,.33); }.sprite-card.variant-galaxy .sprite-image-wrap { background:radial-gradient(circle at 55% 31%, #7054ac, #292048 66%); }
.sprite-card.variant-holofoil { background:linear-gradient(155deg, #1f505c, #172b39 74%); border-color:rgba(166,247,255,.35); }.sprite-card.variant-holofoil .sprite-image-wrap { background:radial-gradient(circle at 50% 32%, #58a6af, #1f4753 66%); }
.sprite-card.variant-gem { background:linear-gradient(155deg, #47316c, #251f42 74%); border-color:rgba(183,160,255,.35); }.sprite-card.variant-gem .sprite-image-wrap { background:radial-gradient(circle at 50% 32%, #8066aa, #382b59 66%); }
.sprite-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.sprite-card { min-height:156px; border-radius:16px; border-color:transparent; cursor:pointer; isolation:isolate; }
.sprite-card:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }.sprite-card:hover { transform:translateY(-2px); }
.sprite-image-wrap { height:126px; background:transparent !important; }.sprite-image-wrap img { width:91%; height:91%; transition:opacity .18s, filter .18s; }
.sprite-card .card-body { position:absolute; z-index:2; right:0; bottom:0; left:0; padding:25px 8px 10px; background:linear-gradient(transparent,rgba(8,9,20,.72) 52%); }
.sprite-label { display:block; overflow:hidden; color:#f8f7ff; text-align:center; text-overflow:ellipsis; white-space:nowrap; font-size:10px; line-height:1.1; letter-spacing:-.35px; }
.sprite-card .status-badge { position:absolute; z-index:3; top:9px; left:9px; padding:4px 6px; border-radius:7px; color:#171420; background:var(--lime); font:700 7px/1 'DM Mono'; text-transform:uppercase; }
.sprite-card .status-badge.mastered { color:#211a09; background:#ffd84e; }.sprite-card .status-badge.lost { color:#fff5fa; background:#33333b; }
.sprite-card.missing .sprite-image-wrap img { display:block; opacity:.62; filter:grayscale(.34) brightness(.92); }
.sprite-card.owned { border-color:#a6ff46; background:linear-gradient(145deg,#f4df28 0%,#d1c629 48%,#b6dc60 100%); box-shadow:inset 0 0 0 1px #eeff8e, 0 6px 14px rgba(137,204,63,.16); }.sprite-card.owned .card-body { background:linear-gradient(transparent,rgba(56,58,8,.54) 54%); }
.sprite-card.mastered { border-color:#efcf33; background:linear-gradient(145deg,#43227c 0%,#211045 78%); box-shadow:inset 0 0 0 1px #ffd84e, 0 6px 14px rgba(82,34,174,.18); }.sprite-card.mastered .card-body { background:linear-gradient(transparent,rgba(20,7,55,.66) 54%); }
.sprite-card.lost { border-color:transparent; background:linear-gradient(160deg,#ec9b8d 0%,#d9929f 38%,#99c976 100%); }.sprite-card.lost .sprite-image-wrap img { opacity:.46; filter:grayscale(.12) saturate(1.5) blur(.3px); }.sprite-card.lost .card-body { background:linear-gradient(transparent,rgba(36,75,37,.51) 54%); }
.sprite-card.missing.variant-base { background:linear-gradient(145deg,#304a8b,#292467); }.sprite-card.missing.variant-gold { background:radial-gradient(circle at 48% 28%,#dbd148,#645620 70%); }.sprite-card.missing.variant-gummy { background:radial-gradient(circle at 48% 28%,#ec9bbc,#8e4d75 70%); }.sprite-card.missing.variant-galaxy { background:linear-gradient(145deg,#49299c,#260d59 72%); }.sprite-card.missing.variant-holofoil { background:radial-gradient(circle at 37% 24%,#a5ef75 0%,#63d3bc 35%,#6b9ee9 64%,#c96bc4 100%); }.sprite-card.missing.variant-gem { background:radial-gradient(circle at 45% 22%,#c2a2ff,#5945a3 68%); }
.sprite-card.variant-base { background:var(--surface); }.sprite-card.variant-gold { background:linear-gradient(145deg,#F2BE07 0%,#B77400 100%); }.sprite-card.variant-gummy { background:linear-gradient(145deg,#F16C59 0%,#1A8523 100%); }.sprite-card.variant-galaxy { background:linear-gradient(145deg,#621FA1 0%,#1A0B3B 100%); }.sprite-card.variant-holofoil { background:radial-gradient(circle at 32% 18%,#ffb1dc 0%,#e979bd 31%,#9c9be9 58%,#58cfc3 100%); }.sprite-card.variant-gem { background:radial-gradient(circle at 45% 22%,#c2a2ff,#5945a3 68%); }
.sprite-card.missing.variant-base { background:linear-gradient(145deg,#292e3c,#181c28); }.sprite-card.missing.variant-gold { background:linear-gradient(145deg,#69540c,#3e2608); }.sprite-card.missing.variant-gummy { background:linear-gradient(145deg,#75403a,#16481f); }.sprite-card.missing.variant-galaxy { background:linear-gradient(145deg,#3b1765,#130827); }.sprite-card.missing.variant-holofoil { background:linear-gradient(145deg,#6f3f60,#405a75); }.sprite-card.missing.variant-gem { background:linear-gradient(145deg,#59467c,#30264c); }
.sprite-card .card-body,.sprite-card.owned .card-body,.sprite-card.mastered .card-body,.sprite-card.lost .card-body { background:transparent; }
.sprite-card.owned .card-body,.sprite-card.mastered .card-body,.sprite-card.lost .card-body { background:transparent; }
.sprite-card.owned { box-shadow:inset 0 0 0 1px #eeff8e, 0 6px 14px rgba(137,204,63,.16); }.sprite-card.mastered { box-shadow:inset 0 0 0 1px #ffd84e, 0 6px 14px rgba(82,34,174,.18); }.sprite-card.lost { box-shadow:none; }
.sprite-card .status-badge.mastered-lost { color:#fff6cc; background:#4d3b12; border:1px solid #ffd84e; }.sprite-card.mastered-lost { border-color:#ffd84e; box-shadow:inset 0 0 0 1px #ffd84e; }.sprite-card.mastered-lost .sprite-image-wrap img { opacity:.46; filter:grayscale(.12) saturate(1.5) blur(.3px) !important; }
.sprite-card .status-badge.unpublished { color:#d8d1ed; background:#332b4d; border:1px solid #8978b5; }.sprite-card.unpublished { border-color:#66547f; }.sprite-card.unpublished .sprite-image-wrap img { opacity:.42; filter:grayscale(.38) brightness(.82); }
@media (min-width: 650px) { .app-shell { padding:28px 28px 44px; }.sprite-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.sprite-image-wrap { height:160px; }.summary { gap:12px; } }

.sprite-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:10px; }
@media (max-width: 480px) { #sprite-grid { margin-inline:-16px; } }
@media (max-width: 480px) { input, textarea, select { font-size:16px !important; } }
.sprite-card { width:100%; max-width:128px; min-height:0; aspect-ratio: .78; justify-self:center; }
.sprite-image-wrap { position:absolute; inset:0; height:auto; }.sprite-image-wrap img { width:91%; height:82%; align-self:start; margin-top:7px; }
.summary strong span { color:var(--muted); font-size:12px; font-weight:500; letter-spacing:-.4px; }
.player-switch { display:flex; align-items:center; gap:7px; max-width:180px; padding:5px 8px 5px 5px; overflow:hidden; color:var(--ink); border:1px solid var(--line); border-radius:13px; background:var(--surface); font-size:10px; font-weight:800; }.player-switch span:nth-child(2) { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.player-avatar { display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; color:#182019; border-radius:9px; background:var(--lime); font-size:11px; }
.player-select,.player-name-input { width:100%; height:46px; padding:0 12px; outline:0; color:var(--ink); border:1px solid var(--line); border-radius:12px; background:var(--surface); font-size:12px; }.player-select { appearance:auto; }.player-name-input { margin-bottom:9px; }.saved-players { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }.saved-player { display:flex; align-items:center; gap:6px; padding:8px 10px; color:var(--muted); border:1px solid var(--line); border-radius:10px; background:var(--surface-2); font-size:10px; font-weight:700; }.saved-player.active { color:#192119; border-color:var(--lime); background:var(--lime); }.saved-player small { font:500 8px 'DM Mono'; }
.summary { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:26px; }.summary article { min-height:88px; padding:10px; }.summary-icon { width:22px; height:22px; margin-bottom:6px; font-size:12px; }.summary strong { font-size:18px; }.summary strong span { font-size:10px; }.summary small { font-size:9px; }.summary-progress { position:relative; }.progress-icon { color:#14222a; background:#8de6ff; font:700 11px 'DM Mono'; }.progress-track { display:block; width:100%; height:4px; margin-top:6px; overflow:hidden; border-radius:99px; background:#3b4359; }.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:var(--lime); transition:width .2s ease; }.primary-nav { margin-top:22px; }
.status-popover { width:min(calc(100% - 32px),400px); margin:auto; padding:24px; color:var(--ink); border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:0 20px 80px #000a; }.status-popover::backdrop { background:#060912a8; backdrop-filter:blur(3px); }.status-popover h2 { margin-bottom:20px; font-size:27px; line-height:1.05; letter-spacing:-1.3px; }.status-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.status-choice { min-height:50px; padding:10px; color:var(--ink); border:1px solid var(--line); border-radius:13px; background:var(--surface-2); font-size:12px; font-weight:800; }.status-choice.selected { color:#172016; border-color:var(--lime); background:var(--lime); }.status-choice.unowned { grid-column:1 / -1; color:var(--muted); background:transparent; }