/* Production Sprite Tracker application stylesheet: structural base + design-system theme. */
*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#07101c;color:#f7f9ff;font-family:Inter,system-ui,-apple-system,sans-serif}button,input,select{font:inherit}.shell{display:grid;grid-template-columns:235px 1fr;min-height:100vh}.side{position:sticky;top:0;height:100vh;background:#091627;border-right:1px solid #1b3651;padding:18px 14px}.brand{font-weight:900;font-size:1.05rem;padding:8px 8px 20px}.nav{display:grid;gap:5px}.nav button{border:0;background:transparent;color:#93a6bf;text-align:left;padding:11px 12px;border-radius:11px;font-weight:750}.nav button.active,.nav button:hover{background:#142640;color:white}.sidefoot{position:absolute;bottom:15px;left:14px;right:14px}.clock{border:1px solid #25415e;border-radius:12px;padding:9px 10px;margin-top:7px;background:#0d1c2e}.clock small{color:#7f95ae;display:block;font-size:.65rem;text-transform:uppercase}.clock strong{font-variant-numeric:tabular-nums}.main{min-width:0}.top{height:66px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#07101ddd;border-bottom:1px solid #1b3651;backdrop-filter:blur(14px)}.top h1{font-size:1rem}.actions{display:flex;gap:8px;align-items:center}.pill,.btn{border:1px solid #31506f;border-radius:10px;background:#13243a;color:#fff;padding:9px 12px}.btn{cursor:pointer;font-weight:750}.btn.primary{background:#63dff3;color:#07131e;border-color:#7be8f5}.btn.google{background:#fff;color:#222;border-color:#ddd}.btn.danger{color:#ff9eb6}.content{width:min(1320px,calc(100% - 40px));margin:auto;padding:30px 0 70px}.page{display:none}.page.active{display:block}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:#7f96b2;font-weight:900}.hero h2{font-size:clamp(2rem,4.5vw,4.1rem);line-height:.96;letter-spacing:-.05em;margin:8px 0 12px}.muted{color:#91a4bd;line-height:1.55}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.stat,.panel,.family,.listitem{border:1px solid #21405f;background:#0d1a2b;border-radius:16px}.stat{padding:14px}.stat b{font-size:1.45rem}.stat span{display:block;color:#8195ae;font-size:.74rem}.panel{padding:18px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}.toolbar{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin:18px 0}.input,.select{width:100%;border:1px solid #2b4866;background:#0b1828;color:white;border-radius:11px;padding:10px 12px}.chips{display:flex;gap:6px;overflow:auto;margin-bottom:14px}.chip{border:1px solid #294663;background:#0d1a2b;color:#9badc3;border-radius:999px;padding:7px 11px}.chip.active{background:#eef5ff;color:#08121d}.spritegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.family{padding:11px;background:linear-gradient(180deg,#142640,#0c192a)}.family.complete{border-color:#74b5e9}.familybanner{text-align:center;padding:6px;border-radius:8px;background:linear-gradient(90deg,#846027,#1e7075);font-size:.67rem;font-weight:900;margin-bottom:9px}.familyhead{display:flex;justify-content:space-between;gap:8px;margin-bottom:10px}.familyname{font-weight:900}.sub{font-size:.68rem;color:#8094ac}.count{color:#ffe36a;font-weight:900}.variantgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.variant{position:relative;border:2px solid #536984;background:#14243a;border-radius:13px;padding:7px;min-height:185px;text-align:center;color:white;cursor:pointer}.variant.collected,.variant.mastered{border-color:#ffe166;background:radial-gradient(circle at 50% 5%,#5d4930,#3b210f 56%,#191109)}.variant.lost{border-color:#8a526d}.variant img{width:100%;height:108px;object-fit:contain}.lv{position:absolute;top:99px;left:7px;background:#07101c;border:1px solid #aab8c8;border-radius:999px;padding:2px 6px;font-size:.6rem;font-weight:900}.vn{font-size:.75rem;font-weight:900}.vs{font-size:.58rem;font-weight:900;color:#79dfa7;margin-top:4px}.variant.missing .vs{color:#8e9eb1}.list{display:grid;gap:8px}.listitem{padding:13px}.event{display:grid;grid-template-columns:1fr auto;gap:10px}.modal{position:fixed;inset:0;background:#02060dcc;display:none;place-items:center;z-index:50;padding:18px}.modal.open{display:grid}.dialog{width:min(540px,100%);background:#0c192a;border:1px solid #315271;border-radius:18px;padding:18px}.row{display:flex;align-items:center;justify-content:space-between;gap:10px}.fields{display:grid;gap:9px}.seg,.levels{display:grid;gap:6px}.seg{grid-template-columns:repeat(4,1fr)}.levels{grid-template-columns:repeat(5,1fr)}.seg button,.levels button{border:1px solid #31506d;background:#0c1725;color:#a5b6c9;border-radius:9px;padding:8px}.seg button.active,.levels button.active{border-color:#66dfbe;color:white}.importbox{border:1px dashed #42688b;border-radius:13px;padding:18px;text-align:center}.trustbox{border:1px solid #2b4e6e;background:linear-gradient(180deg,#10233a,#0a1727);border-radius:13px;padding:14px}.trustbox p{margin:8px 0 0;color:#b0bfd0;font-size:.82rem;line-height:1.55}.oauthnote{border-left:2px solid #63dff3;padding:7px 9px;color:#91a4bd;font-size:.72rem;line-height:1.45}.oauthnote strong{color:#dce8f5}.roleline{margin-top:12px;padding:10px 11px;border:1px solid #294663;background:#0a1727;border-radius:11px}.rolebadge{border:1px solid #45627e;border-radius:999px;padding:4px 8px;font-size:.67rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.rolebadge.owner{border-color:#ffe166;color:#ffe166;background:#3b2d13}.rolebadge.admin{border-color:#63dff3;color:#8beaf6;background:#102f3b}.rolebadge.user,.rolebadge.loading{color:#a9b8c9;background:#132238}.mobile{display:none}@media(max-width:1050px){.spritegrid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.shell{grid-template-columns:1fr}.side{display:none}.content{width:min(100% - 22px,1320px);padding-bottom:88px}.spritegrid{grid-template-columns:repeat(2,1fr)}.mobile{display:flex;position:fixed;bottom:0;left:0;right:0;background:#091524ee;border-top:1px solid #24405d;padding:6px;z-index:40;overflow:auto}.mobile button{flex:1;min-width:78px;border:0;background:transparent;color:#8598b0;padding:9px 4px;border-radius:9px}.mobile button.active{background:#172a43;color:white}.grid2{grid-template-columns:1fr}}@media(max-width:620px){.spritegrid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.toolbar{grid-template-columns:1fr 1fr}.toolbar .input{grid-column:1/-1}}

/* Sprite design-system theme. */
body{background:radial-gradient(circle at 15% 0,#101b37 0,transparent 32%),#080b14;color:#f7f8ff}body::before,body::after{content:"";position:fixed;width:320px;height:320px;border-radius:50%;filter:blur(110px);opacity:.14;pointer-events:none;z-index:-1}body::before{background:#6c45ff;right:4%;top:8%}body::after{background:#1bd8ff;left:-120px;bottom:5%}.side{background:linear-gradient(180deg,rgba(12,18,34,.97),rgba(8,13,25,.97));border-right-color:rgba(54,220,255,.16);box-shadow:12px 0 50px rgba(0,0,0,.2)}.brand{color:#fff;text-shadow:0 0 24px rgba(54,220,255,.35)}.nav button{transition:background .18s ease,color .18s ease,transform .18s ease}.nav button:hover{transform:translateX(2px)}.nav button.active{background:linear-gradient(90deg,rgba(54,220,255,.15),rgba(168,115,255,.12));box-shadow:inset 0 0 0 1px rgba(54,220,255,.12)}.top{background:rgba(8,11,20,.78);border-bottom-color:rgba(54,220,255,.14);backdrop-filter:blur(18px)}.hero h2{font-weight:900;text-shadow:0 10px 45px rgba(0,0,0,.32)}.eyebrow{color:#36dcff}.muted,.sub{color:#919bb2}.stat,.panel,.family,.listitem{border-color:rgba(255,255,255,.09);background:linear-gradient(160deg,rgba(20,35,59,.94),rgba(11,23,42,.94));box-shadow:0 14px 34px rgba(0,0,0,.18)}.stat{position:relative;overflow:hidden}.stat::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(54,220,255,.06),transparent 42%,rgba(168,115,255,.06));pointer-events:none}.stat b{color:#fff}.stat span{color:#919bb2}.btn,.pill,.input,.select,.chip{border-color:rgba(255,255,255,.12);background:rgba(15,24,42,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.btn{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.btn:hover{transform:translateY(-1px);border-color:rgba(54,220,255,.45)}.btn.primary{background:linear-gradient(135deg,#36dcff,#8feeff);border-color:#9df1ff;color:#07131e;box-shadow:0 8px 25px rgba(54,220,255,.18)}.chip.active{background:#eef5ff;color:#08121d;border-color:#eef5ff}.family{position:relative;overflow:hidden;background:linear-gradient(160deg,#151c2e,#0d1220 70%);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.family:hover{transform:translateY(-2px);border-color:rgba(54,220,255,.22);box-shadow:0 18px 40px rgba(0,0,0,.24)}.family.complete{border-color:rgba(255,212,92,.65);box-shadow:0 0 28px rgba(255,212,92,.12),0 18px 40px rgba(0,0,0,.24)}.familybanner{background:linear-gradient(90deg,#6c45ff,#1bd8ff,#ffd45c,#ff5ccf);color:#07101c;text-shadow:none;letter-spacing:.08em}.count{color:#ffd45c}.variant{--frame-rgb:205,220,242;position:relative;overflow:hidden;border:2px solid rgba(var(--frame-rgb),.58);background:radial-gradient(circle at 50% 4%,rgba(var(--frame-rgb),.16),rgba(13,18,32,.98) 62%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(var(--frame-rgb),.08),0 8px 22px rgba(0,0,0,.2);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.variant:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(var(--frame-rgb),.18),0 12px 28px rgba(0,0,0,.26)}.variant.missing{--frame-rgb:205,220,242}.variant.missing img{filter:grayscale(1) saturate(.35);opacity:.62}.variant.collected{--frame-rgb:255,224,107}.variant.lost{--frame-rgb:255,104,122}.variant.mastered{--frame-rgb:255,70,88;border-color:rgba(var(--frame-rgb),.92);background:radial-gradient(circle at 50% 5%,rgba(255,70,88,.34),#32151d 55%,#130b11);box-shadow:0 0 24px rgba(255,70,88,.2),inset 0 1px 0 rgba(255,255,255,.18)}.variant.mastered::after{content:"";position:absolute;inset:-30% -80%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 49%,transparent 58%);transform:translateX(-45%);animation:master-shine 3.4s ease-in-out infinite;pointer-events:none}@keyframes master-shine{0%,55%{transform:translateX(-45%)}100%{transform:translateX(45%)}}.variant img{animation:sprite-float 4.6s ease-in-out infinite;animation-delay:calc(var(--float-i,0)*-.18s)}@keyframes sprite-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}.lv{border-color:rgba(var(--frame-rgb),.72);box-shadow:0 0 12px rgba(var(--frame-rgb),.12)}.vs{letter-spacing:.06em}.variant.collected .vs{color:#76f0b5}.variant.lost .vs{color:#ff8da0}.variant.mastered .vs{color:#ff8da0}.dialog{background:linear-gradient(160deg,#151c2e,#0d1220);border-color:rgba(54,220,255,.22);box-shadow:0 24px 80px rgba(0,0,0,.62)}.modal{backdrop-filter:blur(8px)}.trustbox{border-color:rgba(54,220,255,.2);background:linear-gradient(160deg,rgba(20,35,59,.98),rgba(11,23,42,.98))}:focus-visible{outline:2px solid #36dcff;outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Private tracker Sprite-card motion language, adapted for the public variant grid. */
.variant{--tilt-x:0deg;--tilt-y:0deg;--shine-x:50%;--shine-y:22%;isolation:isolate;transform:perspective(780px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0);transform-style:preserve-3d;transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .25s ease,box-shadow .25s ease,filter .25s ease;will-change:transform}.variant>*{position:relative;z-index:3}.variant::before,.variant::after{content:"";position:absolute;pointer-events:none;z-index:1}.variant::before{inset:-55% -90%;opacity:0;background:linear-gradient(108deg,transparent 40%,rgba(255,255,255,.22) 49%,rgba(218,198,255,.13) 53%,transparent 62%);transform:translateX(-46%) rotate(8deg)}.variant::after{inset:0;opacity:0;background-image:radial-gradient(circle at 12% 19%,rgba(255,255,255,.95) 0 1.1px,transparent 2.4px),radial-gradient(circle at 82% 17%,rgba(255,255,255,.82) 0 1.1px,transparent 2.4px),radial-gradient(circle at 73% 71%,rgba(255,255,255,.9) 0 1.3px,transparent 2.7px),radial-gradient(circle at 24% 83%,rgba(255,255,255,.68) 0 1.1px,transparent 2.4px),radial-gradient(circle at 46% 38%,rgba(222,203,255,.74) 0 1px,transparent 2.1px);background-size:125px 125px,165px 165px,145px 145px,190px 190px,155px 155px}@media (hover:hover) and (pointer:fine){.variant:hover{transform:perspective(780px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-4px) scale(1.018);filter:brightness(1.06)}.variant:hover img{filter:drop-shadow(0 13px 15px rgba(0,0,0,.48)) brightness(1.05)}}.variant.sprite-level-2{border-color:rgba(123,166,255,.5);box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 0 25px rgba(92,136,255,.11)}.variant.sprite-level-3{border-color:rgba(141,117,255,.56);box-shadow:0 13px 30px rgba(0,0,0,.24),0 0 19px rgba(132,112,255,.18),inset 0 0 30px rgba(132,112,255,.13)}.variant.sprite-level-3::before,.variant.sprite-level-4::before,.variant.sprite-level-5::before{opacity:1;animation:public-sprite-card-shine 5.5s ease-in-out infinite}.variant.sprite-level-4{border-color:rgba(193,109,255,.68);box-shadow:0 14px 32px rgba(0,0,0,.25),0 0 25px rgba(183,76,255,.27),inset 0 0 36px rgba(183,76,255,.17)}.variant.sprite-level-4::after,.variant.sprite-level-5::after{opacity:.72;animation:public-sprite-sparkle-drift 7s linear infinite}.variant.sprite-level-5{border-color:rgba(218,198,255,.84);box-shadow:0 16px 36px rgba(0,0,0,.28),0 0 22px rgba(132,112,255,.42),0 0 42px rgba(183,76,255,.26),inset 0 0 42px rgba(218,198,255,.20)}.variant.sprite-level-5::before{background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.32) 48%,rgba(218,198,255,.24) 54%,transparent 64%);animation-duration:3.8s}.variant.sprite-level-5::after{opacity:.95;animation:public-sprite-sparkle-drift 5.5s linear infinite,public-sprite-sparkle-pulse 2s ease-in-out infinite}.variant.sprite-level-5 img{filter:drop-shadow(0 0 12px rgba(199,180,255,.3))}.variant.sprite-mastered{--frame-rgb:255,70,88;border-color:rgba(255,82,82,.96);background:radial-gradient(circle at var(--shine-x) var(--shine-y),rgba(255,126,126,.22),transparent 26%),linear-gradient(155deg,#411923,#210d16 62%,#10090e);box-shadow:0 16px 36px rgba(0,0,0,.28),0 0 19px rgba(255,71,71,.52),0 0 42px rgba(255,42,42,.28),inset 0 0 34px rgba(255,120,120,.14);animation:public-mastered-pulse 1.9s ease-in-out infinite}.variant.sprite-mastered::before{opacity:1;background:linear-gradient(108deg,transparent 38%,rgba(255,235,235,.42) 49%,rgba(255,100,100,.18) 54%,transparent 64%);animation:public-mastered-shine 2.8s linear infinite}.variant.sprite-mastered::after{opacity:.7;background-image:radial-gradient(circle at 18% 24%,rgba(255,225,225,.88) 0 1.1px,transparent 2.4px),radial-gradient(circle at 78% 18%,rgba(255,150,150,.8) 0 1px,transparent 2.3px),radial-gradient(circle at 70% 75%,rgba(255,225,225,.78) 0 1.2px,transparent 2.5px);background-size:130px 130px,170px 170px,150px 150px;animation:public-sprite-sparkle-drift 6s linear infinite}.variant.sprite-mastered .lv{border-color:rgba(255,95,95,.96);color:#ffd5d5;box-shadow:0 0 14px rgba(255,71,71,.5)}.variant img{position:relative;z-index:2;transform:translateZ(15px);transition:filter .25s ease,transform .25s ease;animation:public-sprite-float 4.6s ease-in-out infinite;animation-delay:calc(var(--float-i,0)*-.18s)}.family.complete{isolation:isolate;overflow:hidden;animation:public-complete-breathe 4.6s ease-in-out infinite}.family.complete::before{content:"";position:absolute;z-index:0;inset:-70% -35%;pointer-events:none;background:conic-gradient(from 20deg,transparent,rgba(54,220,255,.12),transparent,rgba(255,212,92,.16),transparent,rgba(255,92,207,.11),transparent);animation:public-complete-orbit 9s linear infinite}.family.complete>*{position:relative;z-index:1}.familybanner{position:relative;overflow:hidden;background-size:220% 100%;animation:public-family-rainbow 7s linear infinite}.familybanner::after{content:"";position:absolute;inset:-100% -35%;background:linear-gradient(105deg,transparent 43%,rgba(255,255,255,.38) 50%,transparent 57%);animation:public-family-banner-shine 4.8s ease-in-out infinite;pointer-events:none}@keyframes public-sprite-card-shine{0%,25%{transform:translateX(-48%) rotate(8deg)}65%,100%{transform:translateX(48%) rotate(8deg)}}@keyframes public-sprite-sparkle-drift{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:125px 125px,-165px 165px,145px -145px,-190px -190px,155px 155px}}@keyframes public-sprite-sparkle-pulse{0%,100%{opacity:.55}50%{opacity:1}}@keyframes public-mastered-pulse{0%,100%{box-shadow:0 16px 36px rgba(0,0,0,.28),0 0 16px rgba(255,71,71,.5),0 0 34px rgba(255,42,42,.25),inset 0 0 30px rgba(255,120,120,.12)}50%{box-shadow:0 16px 36px rgba(0,0,0,.28),0 0 23px rgba(255,92,92,.85),0 0 50px rgba(255,42,42,.42),inset 0 0 38px rgba(255,155,155,.18)}}@keyframes public-mastered-shine{from{transform:translateX(48%) rotate(8deg)}to{transform:translateX(-48%) rotate(8deg)}}@keyframes public-sprite-float{0%,100%{transform:translateZ(15px) translateY(0)}50%{transform:translateZ(15px) translateY(-4px)}}@keyframes public-complete-breathe{0%,100%{box-shadow:0 0 25px rgba(255,212,92,.14),0 18px 40px rgba(0,0,0,.24)}50%{box-shadow:0 0 33px rgba(54,220,255,.16),0 0 50px rgba(255,92,207,.08),0 18px 40px rgba(0,0,0,.24)}}@keyframes public-complete-orbit{to{transform:rotate(360deg)}}@keyframes public-family-rainbow{0%{background-position:0 50%}100%{background-position:220% 50%}}@keyframes public-family-banner-shine{0%,30%{transform:translateX(-55%) rotate(8deg)}72%,100%{transform:translateX(55%) rotate(8deg)}}@media (pointer:coarse){.variant{will-change:auto;transform:none}.variant:active{transform:scale(.985);filter:brightness(1.08)}.variant img{animation-duration:5.5s}.family.complete{animation-duration:6s}}@media (prefers-reduced-motion:reduce){.variant,.variant::before,.variant::after,.variant img,.family.complete,.family.complete::before,.familybanner,.familybanner::after{animation:none!important;transition:none!important}.variant{transform:none!important}}