*{box-sizing:border-box}html{background:#07111f;color:#edf6ff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{margin:0;min-height:100vh;background:radial-gradient(circle at 15% -10%,#17325d 0,transparent 34%),linear-gradient(#07111f,#091525);padding-bottom:86px}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:max(16px,env(safe-area-inset-top)) 18px 12px;background:rgba(7,17,31,.88);backdrop-filter:blur(18px);border-bottom:1px solid #22344e}.eyebrow{font-size:10px;letter-spacing:.18em;color:#7fb6ff}.topbar h1{font-size:25px;margin:2px 0 0}.topbar h1 span{color:#58d8ff}.iconBtn{width:42px;height:42px;border-radius:14px;border:1px solid #345071;background:#11233b;color:#fff;font-size:24px;transition:transform .15s ease,background .2s ease}
.iconBtn:active{transform:scale(.88)}
.iconBtn.spinning{animation:iconSpin .8s linear infinite}
@keyframes iconSpin{to{transform:rotate(360deg)}}main{max-width:1100px;margin:auto;padding:16px}.hero{display:flex;align-items:center;gap:15px;justify-content:space-between;background:linear-gradient(135deg,#122945,#0b1b30);border:1px solid #294767;border-radius:18px;padding:15px;margin-bottom:14px}.hero>div:first-child{flex:1}.progressText{font-size:13px;color:#bcd0e7}.progress{height:9px;background:#06101c;border-radius:99px;overflow:hidden;margin-top:9px}.progress div{height:100%;width:0;background:linear-gradient(90deg,#4abaff,#7be7ff);transition:.25s}.hero #percent{font-size:25px;font-weight:800;color:#6be1ff}.controls{background:#0d1d31;border:1px solid #223b58;border-radius:18px;padding:13px;margin-bottom:14px}input,select{width:100%;color:#ecf6ff;background:#091827;border:1px solid #2b4766;border-radius:13px;padding:12px;font-size:15px;transition:border-color .18s ease,box-shadow .18s ease}
input:focus,select:focus{outline:none;border-color:#63c5ff;box-shadow:0 0 0 3px rgba(99,197,255,.22)}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7fb6ff 50%),linear-gradient(135deg,#7fb6ff 50%,transparent 50%);background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 13px) calc(50% - 3px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}#search{margin-bottom:10px}.filterGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.tabs{display:flex;gap:7px;overflow:auto;margin-top:10px;padding-bottom:2px}.tab{white-space:nowrap;border:1px solid #2b4766;background:#10233a;color:#bcd0e7;padding:9px 13px;border-radius:99px;transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease}.tab.active{color:#07111f;background:#63dfff;border-color:#63dfff;font-weight:800}.tab:active{transform:scale(.94)}.status{text-align:center;color:#9eb6d0;padding:10px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card{position:relative;overflow:hidden;background:linear-gradient(155deg,#112844,#0a1728);border:1px solid #294767;border-radius:17px;min-height:242px;box-shadow:0 10px 25px rgba(0,0,0,.22);transition:border-color .25s ease,box-shadow .25s ease,transform .15s ease;animation:cardIn .45s cubic-bezier(.16,.84,.44,1) both;animation-delay:var(--stagger,0ms)}.card:active{transform:scale(.97)}.card.owned{border-color:#52db9b;box-shadow:0 0 0 1px rgba(82,219,155,.24),0 10px 25px rgba(0,0,0,.22)}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.photo{height:142px;background:#07121f;display:flex;align-items:center;justify-content:center;overflow:hidden}.photo img{width:100%;height:100%;object-fit:contain}.photo .fallback{font-size:52px;color:#2a4766}.cardBody{padding:10px}.name{font-weight:800;font-size:15px;line-height:1.2;min-height:36px}.sub{font-size:11px;color:#9fb5cc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.chip{font-size:10px;padding:4px 7px;border-radius:99px;background:#1a3553;color:#d6e9fb}.cardActions{position:absolute;right:7px;top:7px;display:flex;gap:5px}.round{width:34px;height:34px;border:1px solid #3b5874;background:rgba(4,14,25,.86);color:#fff;border-radius:50%;font-size:16px;transition:transform .15s ease,background .2s ease,border-color .2s ease}.round:active{transform:scale(.85)}.round.on{background:#54dea0;color:#052116;border-color:#54dea0}.round.fav.on{background:#ffd66b;color:#4c3400;border-color:#ffd66b}.round.bump{animation:roundBump .38s cubic-bezier(.34,1.56,.64,1)}
@keyframes roundBump{0%{transform:scale(1)}40%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}.bottomBar{position:fixed;z-index:12;bottom:0;left:0;right:0;display:flex;gap:9px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(7,17,31,.94);backdrop-filter:blur(16px);border-top:1px solid #263c55}.bottomBar button,.restoreLabel{flex:1;text-align:center;border:1px solid #315272;background:#10243c;color:#eaf6ff;padding:11px;border-radius:13px;font-weight:700;font-size:13px;transition:transform .15s ease,background .2s ease}.bottomBar button:active,.restoreLabel:active{transform:scale(.95)}.restoreLabel input{display:none}dialog{width:min(94vw,620px);max-height:88vh;border:1px solid #355879;border-radius:22px;background:#091827;color:#edf6ff;padding:0;overflow:auto;opacity:1;transform:scale(1) translateY(0);transition:opacity .22s ease,transform .22s ease,overlay .22s ease allow-discrete,display .22s ease allow-discrete}dialog[open]{opacity:1;transform:scale(1) translateY(0)}@starting-style{dialog[open]{opacity:0;transform:scale(.94) translateY(10px)}}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(4px);opacity:1;transition:opacity .22s ease,overlay .22s ease allow-discrete,display .22s ease allow-discrete}@starting-style{dialog[open]::backdrop{opacity:0}}.closeBtn{position:sticky;float:right;top:10px;right:10px;z-index:3;width:39px;height:39px;border-radius:50%;border:1px solid #385775;background:#0d2138;color:#fff;font-size:24px;transition:transform .15s ease,background .2s ease}.closeBtn:active{transform:scale(.85) rotate(90deg)}.detailHero{padding:20px;text-align:center;background:linear-gradient(150deg,#16365b,#0a1728)}.detailHero img{width:180px;height:180px;object-fit:contain}.detailHero h2{margin:8px 0 3px}.detailHero .jp{color:#9fb7cf;font-size:13px}.detailSection{padding:15px 18px;border-top:1px solid #203852}.detailSection h3{font-size:13px;letter-spacing:.08em;color:#72dcff;margin:0 0 10px}.infoGrid,.statsGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.infoBox,.statBox{background:#0f243b;border:1px solid #294865;border-radius:12px;padding:10px}.infoBox span,.statBox span{display:block;color:#8fa9c1;font-size:10px}.infoBox strong,.statBox strong{display:block;margin-top:4px;font-size:13px}.moves{display:flex;flex-direction:column;gap:8px}.move{display:flex;gap:10px;align-items:center;background:#0e2137;border:1px solid #294865;padding:9px;border-radius:12px}.move img{width:58px;height:46px;object-fit:contain;border-radius:8px;background:#07111f}.moveTitle{font-weight:800;font-size:13px}.moveMeta{font-size:10px;color:#9db3c9;margin-top:3px}.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,14px) scale(.94);opacity:0;pointer-events:none;display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,#eaf7ff,#d9edff);color:#07111f;padding:11px 16px;border-radius:14px;font-weight:700;font-size:13px;box-shadow:0 14px 30px rgba(0,0,0,.35);z-index:30;transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .22s ease}
.toast::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#1fae6a;color:#fff;font-size:11px;font-weight:900;flex:none}
.toast.error{background:linear-gradient(135deg,#ffe7e3,#ffd7d0)}
.toast.error::before{content:"!";background:#e5483b}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1)}@media(min-width:700px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.filterGrid{grid-template-columns:repeat(4,1fr)}}
.specialBadges{position:absolute;left:7px;top:7px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:calc(100% - 92px)}
.specialBadge{display:inline-flex;align-items:center;border-radius:999px;padding:5px 8px;font-size:9px;font-weight:900;letter-spacing:.04em;line-height:1;border:1px solid rgba(255,255,255,.28);box-shadow:0 3px 10px rgba(0,0,0,.35);white-space:nowrap}
.heroBadge{background:linear-gradient(135deg,#ffd75f,#ff914d);color:#402000}
.basaraBadge{background:linear-gradient(135deg,#9c6cff,#4fd7ff);color:#071527}
.detailSpecials{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:10px 0}

.variantSummary{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:10px;color:#a9bfd4}
.variantDot{width:10px;height:10px;border-radius:50%;opacity:.28;border:1px solid rgba(255,255,255,.35)}
.variantDot.on{opacity:1;box-shadow:0 0 8px currentColor}
.variantDot.magma{background:#e5483b;color:#e5483b}
.variantDot.metal{background:#c8d2dc;color:#c8d2dc}
.variantDot.crystal{background:#ff78c8;color:#ff78c8}
.variantNote{margin:-2px 0 12px;color:#9eb6ce;font-size:12px;line-height:1.4}
.heroVariantGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.heroVariant{display:flex;align-items:center;gap:8px;min-height:58px;border-radius:13px;border:1px solid #31506d;background:#0d2137;color:#eaf5ff;padding:9px;text-align:left}
.heroVariant .variantColor{width:12px;height:38px;border-radius:99px;flex:none}
.heroVariant span:nth-child(2){min-width:0;flex:1}
.heroVariant strong,.heroVariant small{display:block}
.heroVariant small{color:#9db4ca;margin-top:3px;font-size:10px}
.heroVariant>b{font-size:17px}
.heroVariant.magma .variantColor{background:#e5483b}
.heroVariant.metal .variantColor{background:linear-gradient(#eef4f8,#8f9da9)}
.heroVariant.crystal .variantColor{background:linear-gradient(#ff9bd7,#e957ad)}
.heroVariant.magma.on{border-color:#e5483b;background:rgba(229,72,59,.17)}
.heroVariant.metal.on{border-color:#dbe4eb;background:rgba(200,210,220,.14)}
.heroVariant.crystal.on{border-color:#ff78c8;background:rgba(255,120,200,.16)}
@media(max-width:420px){.heroVariantGrid{grid-template-columns:1fr}}

.loadSentinel{height:54px;display:flex;align-items:center;justify-content:center}
.loadSentinel[hidden]{display:none}
.loadSentinel span{width:24px;height:24px;border:3px solid rgba(255,255,255,.16);border-top-color:rgba(255,255,255,.72);border-radius:50%;animation:dexSpin .7s linear infinite}
@keyframes dexSpin{to{transform:rotate(360deg)}}
.grid{content-visibility:auto;contain-intrinsic-size:1200px}
.card{contain:layout paint style}

.lazyPlayerImage{opacity:0;transition:opacity .16s ease}
.lazyPlayerImage[src]{opacity:1}
@media (prefers-reduced-motion:reduce){.lazyPlayerImage{transition:none}}

.topActions{display:flex;align-items:center;gap:9px}
.connectionBadge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:62px;padding:7px 9px;border-radius:999px;
  font-size:10px;font-weight:900;letter-spacing:.09em;
  color:#8ef0c0;background:rgba(36,190,118,.14);
  border:1px solid rgba(70,224,153,.28)
}
.connectionBadge.offline{
  color:#ffd37e;background:rgba(255,168,39,.12);
  border-color:rgba(255,190,76,.3)
}
@media(max-width:720px){
  .filterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:390px){
  .filterGrid{grid-template-columns:1fr}
}

.photo{
  background:
    radial-gradient(circle at 50% 35%,rgba(111,192,255,.18),transparent 42%),
    linear-gradient(145deg,rgba(15,42,68,.95),rgba(5,18,32,.95));
}
.lazyPlayerImage{
  opacity:0;
  transform:scale(.985);
  transition:opacity .14s ease,transform .18s ease;
  will-change:opacity;
}
.lazyPlayerImage[src]{
  opacity:1;
  transform:scale(1);
}
.imageDownloadPanel{
  position:fixed;left:12px;right:12px;bottom:76px;z-index:25;
  padding:11px 13px;border-radius:14px;
  background:rgba(5,17,31,.94);backdrop-filter:blur(14px);
  border:1px solid rgba(129,204,255,.22);
  box-shadow:0 10px 35px rgba(0,0,0,.34);
  font-size:12px;font-weight:800;
}
.imageDownloadTrack{
  height:5px;margin-top:8px;border-radius:999px;
  background:rgba(255,255,255,.1);overflow:hidden;
}
#imageDownloadBar{
  width:0;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#3ea8ff,#8de7ff);
  transition:width .12s linear;
}
.bottomBar{
  overflow-x:auto;
  justify-content:flex-start;
}
.bottomBar>*{flex:0 0 auto}
@media(prefers-reduced-motion:reduce){
  .lazyPlayerImage{transition:none}
}

.appSplash{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(34,125,193,.28),transparent 34%),
    linear-gradient(160deg,#071a30,#040c17 72%);
  transition:opacity .28s ease,visibility .28s ease;
}
.appSplash.hide{opacity:0;visibility:hidden;pointer-events:none}
.appSplash img{
  width:min(42vw,220px);height:auto;border-radius:24%;
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.42));
}
.appSplashTitle{
  margin-top:22px;font-size:clamp(28px,8vw,46px);font-weight:900;
  letter-spacing:-.04em;color:#f5fbff;
}
.appSplashSub{
  margin-top:7px;font-size:12px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:#78d8ff;
}

.codexSection{background:linear-gradient(180deg,rgba(28,86,132,.22),rgba(8,18,32,.2));border:1px solid rgba(85,185,255,.22)}
.sectionTitleRow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.officialBadge{font-size:10px;font-weight:900;letter-spacing:.08em;padding:6px 8px;border-radius:999px;background:#e8f7ff;color:#084873;white-space:nowrap}
.characterDescription{font-size:15px;line-height:1.65;margin:14px 0 18px;color:#eef7ff}
.codexGrid{margin-bottom:14px}
.codexEmpty{padding:14px;border-radius:14px;background:rgba(255,255,255,.055);color:#bac9d8;line-height:1.5}
.officialLink{display:inline-flex;margin-top:14px;color:#67caff;font-weight:800;text-decoration:none}
.timelineBlock{margin-top:14px}
.timelineBlock>span{display:block;font-size:10px;font-weight:900;letter-spacing:.1em;color:#92a9bd;margin-bottom:8px}
.timelineChips{display:flex;flex-wrap:wrap;gap:8px}
.timelineChips b{font-size:12px;padding:7px 10px;border-radius:999px;background:rgba(61,165,255,.13);border:1px solid rgba(61,165,255,.26);color:#d7f1ff}

.previewBanner{margin:18px auto 0;max-width:1180px;padding:13px 16px;border:1px solid rgba(95,190,255,.25);border-radius:16px;background:linear-gradient(135deg,rgba(34,117,177,.18),rgba(5,23,40,.9));display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.previewBanner strong{font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:#e8f7ff;color:#084873;padding:6px 9px;border-radius:999px}
.previewBanner span{font-size:13px;color:#c9d9e7}
.translationNote{margin-top:14px;padding:12px 13px;border-left:3px solid #63c5ff;background:rgba(99,197,255,.08);border-radius:0 12px 12px 0;color:#c8dce9;font-size:12px;line-height:1.5}

.trackerSummary{max-width:1180px;margin:14px auto 0;display:grid;grid-template-columns:minmax(250px,2fr) repeat(3,minmax(110px,1fr));gap:10px}
.trackerCard,.trackerMini{border:1px solid rgba(98,190,255,.18);background:rgba(6,21,37,.78);border-radius:17px;color:#eef8ff;box-shadow:0 10px 28px rgba(0,0,0,.16)}
.trackerCard{appearance:none;text-align:left;padding:15px;display:flex;align-items:center;gap:12px;cursor:pointer}
.trackerCard b{margin-left:auto;color:#77d5ff;font-size:12px}
.trackerIcon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#2e9ce2,#155b96);box-shadow:0 8px 18px rgba(20,113,177,.3)}
.trackerCard small,.trackerMini small{display:block;font-size:9px;letter-spacing:.12em;color:#8faabd;font-weight:900}
.trackerCard strong{display:block;margin-top:3px;font-size:17px}
.trackerMini{padding:14px;display:flex;flex-direction:column;justify-content:center}
.trackerMini strong{font-size:23px;margin-top:5px}
.profileReady{display:inline-flex;margin-bottom:7px;padding:4px 7px;border-radius:999px;background:rgba(88,205,255,.13);border:1px solid rgba(88,205,255,.24);font-size:8px;font-weight:900;letter-spacing:.1em;color:#9ee3ff}
.trackerDialog{width:min(760px,94vw);max-height:88vh}
.trackerHero{display:flex;align-items:center;gap:18px;margin:8px 0 18px}
.trackerHero h2{margin:4px 0 4px;font-size:28px}
.trackerHero p{margin:0;color:#a9bdcb}
.trackerRing{--pct:0;width:104px;height:104px;flex:0 0 104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#57c8ff calc(var(--pct)*1%),rgba(255,255,255,.08) 0);position:relative;animation:ringPop .5s cubic-bezier(.16,.84,.44,1)}
@keyframes ringPop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
.trackerRing:before{content:"";position:absolute;inset:10px;border-radius:50%;background:#081a2b}
.trackerRing span{position:relative;font-weight:900;font-size:22px}
.trackerStatGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px}
.trackerStatGrid>div{padding:13px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.trackerStatGrid small{display:block;color:#91a9ba;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.trackerStatGrid strong{display:block;margin-top:5px;font-size:22px}
.trackerRow{margin:13px 0}
.trackerRowTop{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px}
.trackerRowTop span{color:#9db4c5;white-space:nowrap}
.trackerTrack{height:7px;margin-top:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.trackerTrack i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#3da9ef,#83e3ff)}
@media(max-width:720px){
  .trackerSummary{grid-template-columns:1fr 1fr}
  .trackerMain{grid-column:1/-1}
  .trackerSummary .trackerMini:last-child{grid-column:1/-1}
  .trackerStatGrid{grid-template-columns:1fr 1fr}
  .trackerHero{align-items:flex-start}
}

/* === V13 UX polish === */
.trackerCard{transition:transform .15s ease,border-color .2s ease}
.trackerCard:active{transform:scale(.98)}
.trackerMini{transition:transform .15s ease}
.heroVariant{transition:transform .15s ease,border-color .2s ease,background .2s ease}
.heroVariant:active{transform:scale(.97)}

@keyframes skeletonShine{0%{background-position:160% 0}100%{background-position:-60% 0}}

.skeletonCard{position:relative;overflow:hidden;background:linear-gradient(155deg,#112844,#0a1728);border:1px solid #223a58;border-radius:17px;min-height:242px}
.skeletonCard::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);background-size:200% 100%;animation:skeletonShine 1.4s ease-in-out infinite}

img.lazyPlayerImage:not([src]){background:linear-gradient(100deg,rgba(255,255,255,.02) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.02) 70%);background-size:200% 100%;animation:skeletonShine 1.3s ease-in-out infinite;display:block;width:100%;height:100%}

.appSplash img{animation:splashPulse 1.8s ease-in-out infinite}
@keyframes splashPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

@media(prefers-reduced-motion:reduce){
  .card,.trackerRing,.round.bump,.skeletonCard::after,img.lazyPlayerImage:not([src]),.appSplash img,.iconBtn.spinning,.loadSentinel span{animation:none}
  dialog,dialog::backdrop{transition:none}
  .card:active,.round:active,.tab:active,.trackerCard:active,.bottomBar button:active,.restoreLabel:active,.heroVariant:active,.closeBtn:active,.iconBtn:active{transform:none}
}