:root{
    color-scheme:dark;
    --bg:#028feb;
    --panel:#074fba;
    --panel2:#0b63d8;
    --line:#2bc8ff;
    --cyan:#00e7ff;
    --pink:#ff2eea;
    --green:#67ff50;
    --yellow:#ffef5a;
    --orange:#ff8b2d;
    --rare:#4DA8FF;
    --epic:#B55EFF;
    --legendary:#F4A62A;
    --mythic:#FFE04C;
    --special:#5dffe4;
    --text:#f8fbff;
    --muted:#b7c3ff;
    --danger:#ff4d6d;
    --disabled-red:#ff6a7f;
    --radius:8px;
    --page-gutter:24px;
    --topbar-height:114px;
    --topbar-offset:calc(var(--page-gutter) + var(--topbar-height));
    font-family:Inter, "Segoe UI", system-ui, sans-serif;
}
*{
    box-sizing:border-box;
}
body{
    position:relative;
    min-height:100vh;
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at 52% 46%, rgba(50,202,255,.72), transparent 34rem),
        linear-gradient(180deg, #0b5ec5 0%, #0397f4 34%, #17c2ff 100%);
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(0,73,178,.84), rgba(0,104,211,.42) 12%, transparent 25%, transparent 75%, rgba(0,104,211,.42) 88%, rgba(0,73,178,.84)),
        repeating-linear-gradient(0deg, transparent 0 38px, rgba(181,244,255,.18) 38px 40px, transparent 40px 82px),
        radial-gradient(circle at 54% 16%, rgba(255,255,255,.18), transparent 26rem);
    background-size:
        auto,
        auto,
        auto;
    background-position:
        center,
        center,
        center;
    opacity:.82;
}
body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(159,238,255,.6) 0 2px, transparent 2px 10px),
        linear-gradient(180deg, rgba(159,238,255,.38) 0 2px, transparent 2px 10px),
        repeating-linear-gradient(180deg, transparent 0 54px, rgba(255,255,255,.2) 54px 57px, transparent 57px 108px);
    background-size:138px 100%, 138px 100%, 100% 100%;
    background-position:left top, right top, center;
    background-repeat:no-repeat, no-repeat, repeat;
    -webkit-mask-image:linear-gradient(90deg, #000 0 8%, rgba(0,0,0,.9) 12%, transparent 21% 79%, rgba(0,0,0,.9) 88%, #000 100%);
    mask-image:linear-gradient(90deg, #000 0 8%, rgba(0,0,0,.9) 12%, transparent 21% 79%, rgba(0,0,0,.9) 88%, #000 100%);
    opacity:.44;
}
button,
input,
select{
    font:inherit;
}
button{
    border:0;
}
.scanlines{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:5;
    opacity:.12;
    background:repeating-linear-gradient(
        180deg,
        rgba(255,255,255,.06) 0,
        rgba(255,255,255,.06) 1px,
        transparent 1px,
        transparent 5px
    );
}
.siteShell{
    position:relative;
    z-index:1;
    width:min(1600px,100%);
    margin:0 auto;
    padding:24px;
}
.siteShell::before{
    content:"";
    position:fixed;
    left:0;
    right:0;
    top:0;
    z-index:85;
    height:var(--page-gutter);
    pointer-events:none;
    background:
        linear-gradient(90deg, rgba(0,73,178,.96), rgba(0,104,211,.92) 18%, rgba(3,151,244,.92) 50%, rgba(0,104,211,.92) 82%, rgba(0,73,178,.96)),
        linear-gradient(180deg, #0b5ec5, #0397f4);
}
.siteFooter{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:18px auto 0;
    padding:14px 4px 2px;
    color:#fff;
    font-size:13px;
    font-weight:900;
    text-shadow:0 2px 6px rgba(0,40,120,.45);
}
.footerCopyright{
    letter-spacing:.02em;
}
.footerLinks{
    display:flex;
    align-items:center;
    gap:10px;
}
.footerLinks button{
    padding:8px 10px;
    border-radius:var(--radius);
    background:rgba(0,72,176,.42);
    color:#fff;
    font-size:12px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:.04em;
    box-shadow:
        inset 0 0 0 1px rgba(163,238,255,.34),
        0 8px 18px rgba(0,42,120,.18);
    cursor:pointer;
    transition:transform .14s ease, filter .14s ease, background .14s ease;
}
.footerLinks button:hover{
    background:rgba(0,116,235,.62);
    filter:brightness(1.08);
    transform:translateY(-1px);
}
.footerLinks button:active{
    transform:translateY(1px);
}
.topBar,
.trackerDeck{
    border:1px solid rgba(155,234,255,.42);
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(9,94,207,.86), rgba(8,39,122,.88));
    box-shadow:
        0 20px 50px rgba(0,42,120,.34),
        inset 0 1px rgba(255,255,255,.2),
        inset 0 0 34px rgba(0,231,255,.08);
}
.topBar{
    position:sticky;
    top:var(--page-gutter);
    z-index:100;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    min-height:88px;
    padding:10px 14px;
    background:linear-gradient(180deg, #0756c4, #062b81);
    backdrop-filter:blur(14px);
}
.brandMark{
    display:inline-flex;
    align-items:center;
    flex:1 1 auto;
    min-width:220px;
    color:var(--text);
    text-decoration:none;
}
.brandMark img{
    width:min(760px, 100%);
    height:auto;
    max-height:92px;
    object-fit:contain;
    object-position:left center;
    display:block;
}
.eyebrow,
.sectionLabel{
    margin:0 0 8px;
    color:var(--cyan);
    font-size:12px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
}
h2{
    margin:0;
    line-height:.95;
    letter-spacing:0;
}
h2{
    font-size:30px;
}
.appGrid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-top:0;
}
.trackerDeck{
    position:relative;
    padding:0 18px 18px;
    border-top:0;
    border-radius:0 0 var(--radius) var(--radius);
}
.topProfile{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    min-width:0;
}
.redbullButton{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:7px 12px 7px 8px;
    border-radius:var(--radius);
    background:linear-gradient(180deg, #eefaff 0%, #55cdfb 42%, #0771dc 100%);
    color:#ffffff;
    font-size:13px;
    font-weight:950;
    line-height:1;
    text-decoration:none;
    text-shadow:0 1px 0 rgba(0,45,132,.34);
    white-space:nowrap;
    box-shadow:
        0 5px 0 rgba(0,44,130,.36),
        0 12px 22px rgba(0,54,148,.24),
        inset 0 1px rgba(255,255,255,.58),
        inset 0 0 0 1px rgba(255,255,255,.28);
    transition:filter .14s ease, transform .14s ease, box-shadow .14s ease;
}
.redbullButton img{
    width:22px;
    height:36px;
    object-fit:contain;
    filter:drop-shadow(0 3px 4px rgba(0,35,100,.35));
}
.redbullButton:hover{
    filter:brightness(1.1);
    transform:translateY(-1px);
}
.redbullButton:active{
    transform:translateY(2px);
    box-shadow:
        0 2px 0 rgba(0,44,130,.4),
        inset 0 1px rgba(255,255,255,.35);
}
.redbullButton[aria-disabled="true"]{
    cursor:not-allowed;
    filter:grayscale(.2) brightness(.92);
    opacity:.75;
}
.discordButton{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 13px;
    border-radius:var(--radius);
    background:linear-gradient(180deg, #7b8cff 0%, #5865f2 54%, #3440b8 100%);
    color:#fff;
    font-size:13px;
    font-weight:950;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:
        0 5px 0 rgba(34,42,126,.42),
        0 12px 22px rgba(0,54,148,.24),
        inset 0 1px rgba(255,255,255,.28),
        inset 0 0 0 1px rgba(255,255,255,.14);
    transition:filter .14s ease, transform .14s ease, box-shadow .14s ease;
}
.discordButton img{
    width:34px;
    height:34px;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 3px 4px rgba(0,35,100,.3));
}
.discordButton:hover{
    filter:brightness(1.12);
    transform:translateY(-1px);
}
.discordButton:active{
    transform:translateY(2px);
    box-shadow:
        0 2px 0 rgba(34,42,126,.46),
        inset 0 1px rgba(255,255,255,.18);
}
.discordButton[aria-disabled="true"]{
    cursor:not-allowed;
    filter:grayscale(.15) brightness(.92);
    opacity:.75;
}
.profileStatus{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:170px;
    padding:8px 12px;
    border-radius:var(--radius);
    background:rgba(0,84,190,.34);
    box-shadow:inset 0 0 0 1px rgba(170,237,255,.16);
}
.profileStatus span{
    color:var(--cyan);
    font-size:10px;
    font-weight:950;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.profileStatus strong{
    max-width:220px;
    overflow:hidden;
    font-size:20px;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.profileStatus small{
    display:none;
    margin-top:0;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
}
.profileMenu,
.seasonMenu{
    position:relative;
}
.profileMenu summary,
.seasonMenu summary{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-width:118px;
    padding:12px 18px;
    border-radius:var(--radius);
    background:linear-gradient(180deg, #2d88ff, #173fba);
    color:var(--text);
    font-weight:950;
    cursor:pointer;
    list-style:none;
    box-shadow:
        0 5px 0 rgba(0,0,0,.28),
        0 12px 22px rgba(0,54,148,.28),
        inset 0 1px rgba(255,255,255,.22),
        inset 0 0 0 1px rgba(255,255,255,.14);
}
.profileMenu summary::-webkit-details-marker,
.seasonMenu summary::-webkit-details-marker{
    display:none;
}
.profileMenu summary::after,
.seasonMenu summary::after{
    content:"";
    width:10px;
    height:10px;
    border-right:3px solid currentColor;
    border-bottom:3px solid currentColor;
    transform:rotate(45deg) translateY(-2px);
    transition:transform .16s ease;
}
.profileMenu[open] summary::after,
.seasonMenu[open] summary::after{
    transform:rotate(225deg) translate(-1px,-1px);
}
.profileMenuPanel,
.seasonMenuPanel{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    z-index:20;
    width:280px;
    min-width:250px;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px;
    border:1px solid rgba(155,234,255,.28);
    border-radius:var(--radius);
    background:#073b9c;
    box-shadow:0 20px 50px rgba(0,31,94,.38);
}
.seasonMenuPanel{
    left:0;
    right:auto;
    width:100%;
    min-width:0;
}
.menuGroupLabel{
    padding:2px 4px 0;
    color:var(--cyan);
    font-size:11px;
    font-weight:950;
    letter-spacing:.16em;
    text-transform:uppercase;
}
.menuDivider{
    height:1px;
    margin:2px 0;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
}
.profileMenuPanel button,
.seasonMenuPanel button,
.dialogActions button,
.profileList button{
    min-height:44px;
    padding:10px 14px;
    border-radius:var(--radius);
    background:#126bda;
    color:var(--text);
    font-weight:900;
    cursor:pointer;
    box-shadow:
        0 4px 0 rgba(0,0,0,.28),
        inset 0 1px rgba(255,255,255,.18),
        inset 0 0 0 1px rgba(255,255,255,.12);
}
.profileMenuPanel button:hover,
.seasonMenuPanel button:hover,
.dialogActions button:hover,
.profileList button:hover{
    transform:translateY(-1px);
    filter:brightness(1.13);
}
.profileMenu summary:active,
.seasonMenu summary:active,
.profileMenuPanel button:active,
.seasonMenuPanel button:active,
.dialogActions button:active,
.profileList button:active{
    transform:translateY(2px);
    box-shadow:
        0 2px 0 rgba(0,0,0,.32),
        inset 0 1px rgba(255,255,255,.12),
        inset 0 0 0 1px rgba(255,255,255,.12);
}
button.danger,
.danger{
    background:linear-gradient(180deg, #ff4d6d, #b82143) !important;
}
.statsDeck{
    padding:0;
}
.statsDeck{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(210px, .34fr);
    gap:18px;
    align-items:end;
}
.statsGrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:28px;
    row-gap:4px;
}
.statBox{
    min-height:38px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:5px 0;
    border-bottom:1px solid rgba(145,229,255,.24);
    color:#fff;
    background:transparent;
}
.statBox span{
    display:inline-flex;
    align-items:center;
    color:#fff;
    font-size:16px;
    font-weight:950;
    text-transform:none;
    letter-spacing:0;
    text-shadow:0 1px 0 rgba(0,43,132,.28);
}
.statBox strong{
    display:inline-block;
    margin-top:0;
    color:#fff;
    font-size:22px;
    font-weight:950;
    line-height:1;
    text-align:right;
    white-space:nowrap;
    text-shadow:0 1px 0 rgba(0,43,132,.28);
}
.spriteTimer{
    min-height:82px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    padding:12px 14px;
    border:1px solid rgba(166,242,255,.34);
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(33,206,255,.26), rgba(4,73,177,.7));
    box-shadow:
        0 5px 0 rgba(0,52,145,.34),
        inset 0 1px rgba(255,255,255,.22),
        inset 0 0 20px rgba(0,231,255,.1);
}
.spriteTimer span,
.spriteTimer small{
    color:#dff9ff;
    font-size:11px;
    font-weight:950;
    letter-spacing:.08em;
    line-height:1;
    text-transform:uppercase;
}
.spriteTimer strong{
    color:#fff;
    font-size:27px;
    font-weight:950;
    line-height:1;
    text-shadow:0 2px 0 rgba(0,54,150,.44);
    white-space:nowrap;
}
.spriteTimer small{
    color:#fff36a;
    font-size:10px;
}
.trackerDeck{
    min-height:420px;
}
.trackerSticky{
    position:sticky;
    top:var(--topbar-offset);
    z-index:90;
    margin:0 -18px;
    padding:7px 30px 10px 18px;
    border-bottom:1px solid rgba(155,234,255,.32);
    background:linear-gradient(180deg, #0749b2, #062a80);
    box-shadow:
        0 14px 22px rgba(0,43,132,.62),
        0 0 0 1px rgba(155,234,255,.08);
}
.trackerSticky::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-1px;
    height:1px;
    pointer-events:none;
    background:#0749b2;
}
.trackerSticky::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-18px;
    height:18px;
    pointer-events:none;
    background:linear-gradient(180deg, #062a80 0%, rgba(6,42,128,.96) 45%, rgba(6,42,128,0) 100%);
}
.trackerGrid{
    overflow-x:visible;
    overflow-y:visible;
    padding:10px 0 8px 0;
    max-height:none;
}
.trackerDeck[data-profile-loaded="false"] .trackerGrid{
    filter:blur(1.4px);
    opacity:.74;
    pointer-events:none;
    user-select:none;
}
.trackerDeck[data-profile-loaded="false"] .spriteCard,
.trackerDeck[data-profile-loaded="false"] .familyCell{
    cursor:not-allowed;
}
.noProfileNotice{
    position:fixed;
    left:50%;
    top:50%;
    z-index:95;
    width:min(420px, calc(100vw - 36px));
    display:none;
    transform:translate(-50%,-50%);
    padding:18px 20px;
    border:1px solid rgba(180,244,255,.56);
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(14,145,239,.94), rgba(7,79,186,.94));
    color:#fff;
    text-align:center;
    pointer-events:none;
    box-shadow:
        0 18px 42px rgba(0,42,120,.36),
        inset 0 1px rgba(255,255,255,.34);
}
.trackerDeck[data-profile-loaded="false"] .noProfileNotice{
    display:grid;
    gap:6px;
}
.noProfileNotice strong{
    font-size:20px;
    line-height:1.05;
    font-weight:950;
    text-transform:uppercase;
    text-shadow:0 2px 0 rgba(0,48,132,.38);
}
.noProfileNotice span{
    color:#dff9ff;
    font-size:13px;
    font-weight:850;
}
body.exportingImage .appGrid{
    padding:18px;
    background:#063da5;
}
body.exportingImage .siteShell{
    padding:18px;
    background:#063da5;
}
body.exportingImage .topBar{
    position:relative;
    top:auto;
    justify-content:center;
}
body.exportingImage .brandMark{
    flex:0 1 auto;
    justify-content:center;
}
body.exportingImage .brandMark img{
    object-position:center;
}
body.exportingImage .topProfile,
body.exportingImage .footerLinks,
body.exportingImage .backToTop,
body.exportingImage .abilityPreview,
body.exportingImage .noProfileNotice{
    display:none !important;
}
body.exportingImage .siteFooter{
    justify-content:center;
    padding:16px 0 0;
}
body.exportingImage .footerCopyright{
    font-size:15px;
}
body.exportingImage .trackerGrid{
    overflow:visible;
}
.gridHeader,
.spriteRow{
    display:grid;
    grid-template-columns:minmax(190px, 240px) repeat(var(--variant-count, 8), minmax(118px, 1fr));
    gap:8px;
    min-width:0;
    align-items:stretch;
}
.trackerDeck[data-variant-count="3"] .gridHeader,
.trackerDeck[data-variant-count="3"] .spriteRow{
    grid-template-columns:minmax(190px, 240px) repeat(3, minmax(112px, calc((100% - 240px - 64px) / 8)));
}
.trackerDeck[data-variant-count="8"] .gridHeader,
.trackerDeck[data-variant-count="8"] .spriteRow{
    grid-template-columns:minmax(190px, 240px) repeat(8, minmax(112px, 1fr));
}
.gridHeader{
    padding-top:10px;
}
.gridHeader > div,
.variantToggle{
    min-height:54px;
    border-radius:var(--radius);
    display:flex;
    flex-direction:column;
    gap:3px;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:900;
    background:#1d70df;
    box-shadow:
        0 5px 0 rgba(0,0,0,.24),
        0 10px 18px rgba(0,0,0,.22),
        inset 0 1px rgba(255,255,255,.2),
        inset 0 0 0 1px rgba(255,255,255,.12);
    transition:filter .14s ease, transform .14s ease, box-shadow .14s ease;
}
.variantToggle:hover{
    filter:brightness(1.12);
    transform:translateY(-1px);
}
.variantToggle:active{
    transform:translateY(2px);
    box-shadow:
        0 2px 0 rgba(0,0,0,.28),
        inset 0 1px rgba(255,255,255,.12),
        inset 0 0 0 1px rgba(255,255,255,.12);
}
.variantToggle span{
    max-width:100%;
    overflow:hidden;
    font-size:14px;
    line-height:1;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.variantToggle[data-variant-type="normal"],
.variantToggle[data-variant-type="base"]{
    background:linear-gradient(180deg, #687188, #30384b);
}
.variantToggle[data-variant-type="gold"]{
    background:linear-gradient(180deg, #ffd75a, #98671a);
    color:#1d1607;
}
.variantToggle[data-variant-type="gummy"]{
    background:linear-gradient(180deg, #ff9ce7, #8e3d86);
}
.variantToggle[data-variant-type="galaxy"]{
    background:linear-gradient(180deg, #725cff, #25195f);
}
.variantToggle[data-variant-type="holofoil"]{
    background:linear-gradient(180deg, #c4fff6, #497bcf);
    color:#101932;
}
.variantToggle[data-variant-type="cube"]{
    background:linear-gradient(180deg, #b37cff, #552591);
}
.variantToggle[data-variant-type="gem"]{
    background:linear-gradient(180deg, #f3fbff, #6a9ec9);
    color:#101932;
}
.variantToggle[data-variant-type="quack"]{
    background:linear-gradient(180deg, #fff06d, #df8f1f);
    color:#201807;
}
.variantToggle[data-variant-type="cheatmaster"]{
    background:linear-gradient(180deg, #88ff9c, #246b3f);
    color:#071b0d;
}
.seasonPickerCell{
    padding:6px 12px;
    align-items:center !important;
    justify-content:center !important;
}
.seasonMenu summary{
    min-width:214px;
    min-height:42px;
    justify-content:center;
    gap:14px;
    padding:10px 14px;
    font-size:13px;
}
.seasonMenuPanel button{
    min-height:34px;
    padding:8px 10px;
    text-align:left;
}
.seasonMenuPanel button[data-active="true"]{
    background:#1e79ec;
    box-shadow:
        0 4px 0 rgba(0,0,0,.28),
        inset 0 0 0 2px rgba(255,255,255,.2);
}
.variantToggle small{
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
    color:#cfd7ff;
}
.variantToggle[data-variant-type="gold"] small,
.variantToggle[data-variant-type="holofoil"] small,
.variantToggle[data-variant-type="gem"] small,
.variantToggle[data-variant-type="quack"] small{
    color:rgba(16,25,50,.76);
}
.variantToggle[data-variant-type="cheatmaster"] small{
    color:rgba(7,27,13,.76);
}
.variantToggle[data-disabled="true"]{
    background:linear-gradient(180deg, #5b6070, #303444);
    color:#d9def0;
}
.variantToggle[data-disabled="true"] small{
    color:var(--disabled-red);
}
.spriteRow{
    padding:10px 0;
    border-top:1px solid rgba(145,229,255,.18);
}
.familyCell{
    position:relative;
    min-height:167px;
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(30,115,219,.34), rgba(11,59,150,.42));
    color:var(--text);
    text-align:center;
    box-shadow:
        0 5px 0 rgba(0,30,96,.24),
        inset 0 1px rgba(255,255,255,.18),
        inset 0 0 0 1px rgba(161,234,255,.14);
    transition:filter .14s ease, transform .14s ease, box-shadow .14s ease;
}
.familyMain{
    position:absolute;
    inset:0;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    padding:42px 14px 40px;
    border-radius:var(--radius);
    background:transparent;
    color:inherit;
    text-align:center;
    cursor:pointer;
}
.familyCell:hover{
    filter:brightness(1.1);
    transform:translateY(-1px);
}
.familyCell:active{
    transform:translateY(2px);
    box-shadow:
        0 2px 0 rgba(0,0,0,.28),
        inset 0 1px rgba(255,255,255,.08),
        inset 0 0 0 1px rgba(255,255,255,.06);
}
.familyCell[data-disabled="true"]{
    background:rgba(125,130,150,.12);
    color:#d9def0;
}
.familyCell[data-complete="true"]{
    box-shadow:
        0 5px 0 rgba(0,0,0,.22),
        inset 0 0 0 2px var(--yellow),
        inset 0 1px rgba(255,255,255,.12);
}
.familyName{
    font-size:21px;
    font-weight:950;
    padding:0 30px;
    text-align:center;
    -webkit-text-stroke:1px #00123f;
    paint-order:stroke fill;
    text-shadow:none;
}
.familyStatus{
    position:absolute;
    right:10px;
    bottom:10px;
    min-width:72px;
    display:inline-flex;
    justify-content:center;
    padding:3px 7px;
    border-radius:5px;
    background:rgba(103,255,80,.12);
    color:#dbffe5;
    font-size:10px;
    font-weight:950;
    letter-spacing:.12em;
}
.familyCell[data-disabled="true"] .familyStatus{
    background:rgba(255,77,109,.14);
    color:var(--disabled-red);
}
.familyMastered{
    display:none;
    position:absolute;
    left:10px;
    top:10px;
    justify-content:center;
    padding:3px 8px;
    border-radius:5px;
    background:rgba(255,224,92,.16);
    color:var(--yellow);
    font-size:9px;
    font-weight:950;
    line-height:1;
    letter-spacing:.12em;
    text-shadow:0 1px 0 rgba(0,0,0,.5);
}
.familyCell[data-complete="true"] .familyMastered{
    display:inline-flex;
}
.abilityButton{
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:3;
    width:28px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:6px;
    background:linear-gradient(180deg, #2dd7ff, #086ed9);
    color:#fff;
    cursor:pointer;
    box-shadow:
        0 3px 0 rgba(0,44,130,.48),
        0 8px 16px rgba(0,91,214,.28),
        inset 0 1px rgba(255,255,255,.34);
}
.abilityButton:hover,
.abilityButton:focus,
.abilityButton:focus-visible{
    filter:brightness(1.16);
}
.abilityIcon{
    width:16px;
    height:16px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#fff;
    color:#0756c4;
    font-size:12px;
    font-weight:950;
    line-height:1;
    font-style:italic;
}
.abilityPreview{
    position:fixed;
    left:50%;
    top:50%;
    z-index:120;
    width:min(520px, calc(100vw - 40px));
    min-height:218px;
    display:grid;
    grid-template-columns:150px 1fr;
    gap:18px;
    align-items:center;
    padding:20px;
    border:2px solid rgba(214,252,255,.86);
    border-radius:var(--radius);
    background:#0b82e8;
    background-image:linear-gradient(180deg, #30d4ff 0%, #0b82e8 42%, #064db9 100%);
    color:#061438;
    text-align:left;
    opacity:1;
    pointer-events:none;
    transform:translate(-50%,-50%);
    box-shadow:
        0 28px 70px rgba(0,20,82,.62),
        0 0 0 4px rgba(0,42,132,.44),
        inset 0 1px rgba(255,255,255,.5);
}
.abilityPreview[hidden]{
    display:none;
}
.abilityPreview img{
    width:144px;
    height:174px;
    object-fit:contain;
    filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));
}
.abilityDataText{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}
.abilityDataText strong{
    color:#fff;
    font-size:30px;
    line-height:1;
    font-weight:950;
    text-shadow:0 2px 0 rgba(0,45,132,.38);
}
.abilityDataText em{
    width:max-content;
    min-width:82px;
    display:inline-flex;
    justify-content:center;
    padding:4px 9px;
    border-radius:6px;
    color:#fff;
    font-size:14px;
    font-style:normal;
    font-weight:950;
    letter-spacing:.08em;
    text-transform:uppercase;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.abilityRarity.rare{
    background:linear-gradient(15deg, #5AB8FF 0%, #3D9CFF 45%, #256DFF 100%);
}
.abilityRarity.epic{
    background:linear-gradient(15deg, #C57CFF 0%, #A04DFF 45%, #6E28FF 100%);
}
.abilityRarity.legendary{
    background:linear-gradient(15deg, #FFD36A 0%, #FFB129 45%, #F28400 100%);
    color:#1b1b1b;
}
.abilityRarity.mythic{
    background:linear-gradient(15deg, #FFF0A8 0%, #FFD95E 45%, #D8A300 100%);
    color:#1b1b1b;
}
.abilityRarity.special{
    background:linear-gradient(15deg, #5dffe4 0%, #8dff9a 20%, #fff36a 40%, #ffc45f 60%, #ff7af1 80%, #8e7cff 100%);
    color:#101932;
}
.abilityDataText span{
    color:#061438;
    font-size:16px;
    line-height:1.2;
    font-weight:850;
}
.spriteCard{
    position:relative;
    width:100%;
    min-height:167px;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    gap:3px;
    padding:8px 8px 6px;
    border-radius:var(--radius);
    color:var(--text);
    background:linear-gradient(180deg, rgba(31,111,216,.28), rgba(9,49,139,.34));
    cursor:pointer;
    box-shadow:
        0 5px 0 rgba(0,30,96,.24),
        0 10px 18px rgba(0,42,132,.18),
        inset 0 1px rgba(255,255,255,.18),
        inset 0 0 0 1px rgba(161,234,255,.14);
    transition:filter .14s ease, box-shadow .14s ease;
}
.spriteCard:hover{
    filter:brightness(1.12);
}
.spriteCard:active{
    box-shadow:
        0 2px 0 rgba(0,0,0,.28),
        inset 0 1px rgba(255,255,255,.08),
        inset 0 0 0 1px rgba(255,255,255,.08);
}
.spriteCard img{
    width:100%;
    height:126px;
    max-height:calc(100% - 34px);
    flex:0 1 auto;
    object-fit:contain;
    margin-top:1px;
    filter:grayscale(.85) brightness(.78) drop-shadow(0 7px 8px rgba(0,0,0,.3));
    transform-origin:50% 70%;
    transition:filter .14s ease;
}
.spriteCard[data-available="true"]:hover img{
    animation:spriteHoverPop .46s cubic-bezier(.2,.82,.3,1) both;
}
.spriteCard[data-available="true"]:active img{
    animation:none;
    transform:scale(.98) translateY(2px);
}
.spriteVariantName{
    display:none;
}
.spriteRarity{
    position:relative;
    z-index:1;
    min-width:78px;
    max-width:100%;
    min-height:21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:3px 7px;
    border-radius:6px;
    color:#fff;
    font-size:10px;
    font-weight:950;
    letter-spacing:.05em;
    text-transform:uppercase;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.spriteRarity.rare{
    background:linear-gradient(15deg, #5AB8FF 0%, #3D9CFF 45%, #256DFF 100%);
}
.spriteRarity.epic{
    background:linear-gradient(15deg, #C57CFF 0%, #A04DFF 45%, #6E28FF 100%);
}
.spriteRarity.legendary{
    background:linear-gradient(15deg, #FFD36A 0%, #FFB129 45%, #F28400 100%);
    color:#1b1b1b;
}
.spriteRarity.mythic{
    background:linear-gradient(15deg, #FFF0A8 0%, #FFD95E 45%, #D8A300 100%);
    color:#1b1b1b;
}
.spriteRarity.special{
    background:linear-gradient(15deg, #5dffe4 0%, #8dff9a 20%, #fff36a 40%, #ffc45f 60%, #ff7af1 80%, #8e7cff 100%);
    color:#101932;
}
.spriteCard[data-state="disabled"]::after{
    content:"DISABLED";
    position:absolute;
    left:50%;
    top:50%;
    min-width:118px;
    padding:3px 6px;
    transform:translate(-50%,-50%) rotate(-28deg);
    border:2px solid rgba(255,255,255,.86);
    border-radius:4px;
    background:rgba(10,13,34,.76);
    color:var(--disabled-red);
    font-size:13px;
    font-weight:950;
    letter-spacing:.12em;
}
.spriteBadge,
.masteredBadge{
    position:absolute;
    right:8px;
    top:8px;
    z-index:2;
    width:26px;
    height:26px;
    display:grid;
    place-items:center;
    border-radius:7px;
    opacity:0;
    transition:opacity .15s ease;
    box-shadow:
        0 7px 14px rgba(0,0,0,.35),
        inset 0 0 0 1px rgba(255,255,255,.38);
}
.spriteBadge{
    background:var(--green);
    color:#09230c;
}
.masteredBadge{
    background:var(--yellow);
    color:#2d2400;
}
.foundIcon{
    width:20px;
    height:20px;
    color:#000;
}
.masteredIcon{
    width:22px;
    height:22px;
}
.spriteCard[data-state="found"]{
    box-shadow:
        0 5px 0 rgba(0,0,0,.22),
        0 10px 18px rgba(0,0,0,.2),
        inset 0 0 0 2px var(--green);
}
.spriteCard[data-state="found"] .spriteBadge{
    opacity:1;
}
.spriteCard[data-state="found"] img,
.spriteCard[data-state="mastered"] img{
    filter:drop-shadow(0 7px 8px rgba(0,0,0,.3));
}
.spriteCard[data-state="mastered"]{
    box-shadow:
        0 5px 0 rgba(0,0,0,.22),
        0 10px 18px rgba(0,0,0,.2),
        inset 0 0 0 2px var(--yellow);
}
.spriteCard[data-state="mastered"] .masteredBadge{
    opacity:1;
}
.spriteCard[data-state="disabled"]{
    background:rgba(255,77,109,.12);
    filter:grayscale(.65) brightness(.72);
}
.spriteCard[data-state="unavailable"]{
    background:rgba(255,255,255,.018);
    cursor:default;
    justify-content:center;
    padding:8px;
    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        inset 0 0 0 1px rgba(255,255,255,.045);
}
.spriteCard[data-state="unavailable"]:hover{
    filter:none;
}
.spriteCard[data-state="unavailable"] img{
    filter:brightness(.34) contrast(1.15) drop-shadow(0 7px 8px rgba(0,0,0,.3));
}
@keyframes spriteHoverPop{
    0%{
        transform:scale(1) rotate(0deg) translateY(0);
    }
    36%{
        transform:scale(1.1) rotate(-2deg) translateY(-4px);
    }
    62%{
        transform:scale(1.07) rotate(1.5deg) translateY(-3px);
    }
    100%{
        transform:scale(1.08) rotate(0deg) translateY(-3px);
    }
}
.pixelIcon{
    width:62px;
    height:62px;
    background:var(--accent);
    box-shadow:
        12px 0 var(--accent),
        0 12px var(--accent),
        24px 12px #fff,
        36px 12px var(--pink),
        12px 24px var(--accent),
        24px 36px var(--accent);
}
dialog{
    width:min(520px,92vw);
    border:1px solid rgba(255,255,255,.16);
    border-radius:var(--radius);
    background:var(--panel2);
    color:var(--text);
    box-shadow:0 30px 80px rgba(0,0,0,.55);
}
dialog::backdrop{
    background:rgba(0,0,0,.68);
    backdrop-filter:blur(6px);
}
.dialogBody{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.dialogBody h2{
    font-size:28px;
}
.dialogActions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
.legalInfo{
    display:flex;
    flex-direction:column;
    gap:12px;
    color:#fff;
    font-size:14px;
    line-height:1.55;
}
.legalInfo p{
    margin:0;
}
.legalInfo ul{
    margin:0;
    padding-left:20px;
}
.legalIntro{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:12px;
    border-radius:var(--radius);
    background:rgba(0,80,190,.38);
    box-shadow:inset 0 0 0 1px rgba(168,238,255,.24);
}
.legalIntro strong{
    font-size:22px;
}
.legalIntro span{
    color:#e7f6ff;
}
.legalScroll{
    max-height:min(56vh,430px);
    overflow:auto;
    padding-right:6px;
}
.field{
    display:flex;
    flex-direction:column;
    gap:8px;
    color:var(--muted);
    font-weight:900;
}
.field input{
    width:100%;
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius);
    padding:12px 14px;
    background:#090d25;
    color:var(--text);
}
.profileList{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.imageExportPreview{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.imageExportPreview p{
    margin:0;
    color:#fff;
    font-size:14px;
    font-weight:850;
    line-height:1.35;
}
.imageExportPreview img{
    width:100%;
    max-height:58vh;
    object-fit:contain;
    border-radius:var(--radius);
    background:#063da5;
    box-shadow:inset 0 0 0 1px rgba(155,234,255,.34);
}
.backToTop{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:70;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:linear-gradient(180deg, #2dd7ff, #086ed9 58%, #0646a5);
    color:#ffffff;
    cursor:pointer;
    box-shadow:
        0 5px 0 rgba(0,44,130,.52),
        0 12px 30px rgba(0,91,214,.34),
        inset 0 1px rgba(255,255,255,.38),
        inset 0 0 0 1px rgba(173,246,255,.34);
    transition:filter .14s ease, transform .14s ease, box-shadow .14s ease;
}
.backToTop span{
    width:13px;
    height:13px;
    border-left:3px solid currentColor;
    border-top:3px solid currentColor;
    transform:translateY(3px) rotate(45deg);
}
.backToTop:hover{
    filter:brightness(1.18);
    transform:translateY(-1px);
}
.backToTop:active{
    transform:translateY(3px);
    box-shadow:
        0 2px 0 rgba(0,44,130,.55),
        0 8px 18px rgba(0,91,214,.3),
        inset 0 1px rgba(255,255,255,.2),
        inset 0 0 0 1px rgba(173,246,255,.24);
}
@media (max-width:980px){
    .appGrid{
        grid-template-columns:1fr;
    }
    .topBar,
    .topProfile{
        align-items:stretch;
    }
    .topBar{
        flex-direction:column;
    }
    .topProfile{
        width:100%;
    }
    .profileStatus{
        flex:1;
    }
}
@media (max-width:620px){
    :root{
        --page-gutter:10px;
        --topbar-height:0px;
    }
    .siteShell{
        padding:10px;
    }
    .siteShell::before{
        display:none;
    }
    .siteFooter{
        flex-direction:column;
        justify-content:center;
        gap:10px;
        padding:14px 0 4px;
        text-align:center;
    }
    .footerLinks{
        justify-content:center;
        flex-wrap:wrap;
    }
    .topBar{
        position:relative;
        top:auto;
        gap:10px;
        min-height:0;
        padding:8px;
    }
    .brandMark{
        min-width:0;
        justify-content:center;
    }
    .brandMark img{
        width:min(100%, 520px);
        max-height:56px;
        object-position:center;
    }
    .topProfile{
        display:grid;
        grid-template-columns:48px 48px minmax(0, 1fr) 106px;
        align-items:stretch;
        gap:8px;
    }
    .redbullButton{
        min-width:0;
        min-height:44px;
        justify-content:center;
        padding:6px;
    }
    .redbullButton span{
        display:none;
    }
    .redbullButton img{
        width:20px;
        height:34px;
    }
    .discordButton{
        min-width:0;
        min-height:44px;
        justify-content:center;
        padding:6px;
    }
    .discordButton img{
        width:34px;
        height:34px;
    }
    .discordButton > span:last-child{
        display:none;
    }
    .profileStatus{
        min-width:0;
        width:100%;
        padding:6px 8px;
    }
    .profileStatus span{
        font-size:9px;
        letter-spacing:.12em;
    }
    .profileStatus strong{
        max-width:100%;
        font-size:15px;
    }
    .profileMenu summary{
        min-width:0;
        width:100%;
        min-height:44px;
        padding:10px 12px;
    }
    .trackerDeck{
        padding:10px;
    }
    .trackerSticky{
        position:relative;
        top:auto;
        z-index:10;
        margin:-10px -10px 0;
        padding:10px;
    }
    .noProfileNotice{
        position:absolute;
        top:242px;
        left:50%;
        z-index:18;
        width:calc(100% - 28px);
        max-width:420px;
        transform:translateX(-50%);
        padding:16px 14px;
        background:linear-gradient(180deg, #19a7ff 0%, #0c6fe0 55%, #0847b4 100%);
        box-shadow:
            0 12px 28px rgba(0,37,112,.44),
            0 4px 0 rgba(0,44,130,.38),
            inset 0 1px rgba(255,255,255,.42),
            inset 0 0 0 1px rgba(196,249,255,.34);
    }
    .noProfileNotice strong{
        font-size:17px;
    }
    .noProfileNotice span{
        font-size:12px;
    }
    .trackerSticky::before{
        display:none;
    }
    .trackerSticky::after{
        display:none;
    }
    .statsDeck{
        grid-template-columns:1fr;
        gap:8px;
    }
    .statsGrid{
        grid-template-columns:1fr 1fr;
        column-gap:12px;
        row-gap:0;
    }
    .statBox{
        min-height:30px;
        padding:5px 0;
    }
    .statBox span{
        font-size:12px;
    }
    .statBox strong{
        font-size:16px;
    }
    .spriteTimer{
        min-height:46px;
        display:grid;
        grid-template-columns:1fr auto;
        column-gap:10px;
        row-gap:2px;
        padding:8px 10px;
        align-items:center;
        text-align:left;
    }
    .spriteTimer span,
    .spriteTimer small{
        font-size:9px;
    }
    .spriteTimer strong{
        grid-row:1 / span 2;
        grid-column:2;
        font-size:18px;
    }
    .gridHeader{
        grid-template-columns:1fr !important;
        gap:8px;
        padding-top:10px;
    }
    .seasonPickerCell{
        min-height:50px;
        padding:5px;
    }
    .seasonMenu,
    .seasonMenu summary{
        width:100%;
    }
    .seasonMenu summary{
        min-width:0;
    }
    .variantToggle{
        display:none;
    }
    .spriteRow{
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
        gap:8px;
        padding:8px 0;
    }
    .familyCell{
        grid-column:1 / -1;
        min-height:86px;
    }
    .familyMain{
        padding:28px 42px;
    }
    .familyName{
        font-size:22px;
    }
    .abilityPreview{
        width:min(326px, calc(100vw - 40px));
        min-height:132px;
        grid-template-columns:82px 1fr;
        gap:12px;
        padding:12px;
        pointer-events:auto;
    }
    .abilityPreview img{
        width:78px;
        height:98px;
    }
    .abilityDataText strong{
        font-size:19px;
    }
    .abilityDataText em{
        font-size:11px;
    }
    .abilityDataText span{
        font-size:12px;
    }
    .spriteCard{
        min-height:134px;
        padding:24px 6px 6px;
    }
    .spriteCard img{
        height:86px;
        max-height:86px;
    }
    .spriteVariantName{
        position:absolute;
        left:6px;
        top:6px;
        z-index:1;
        max-width:calc(100% - 38px);
        display:block;
        overflow:hidden;
        color:#dff9ff;
        font-size:9px;
        font-weight:950;
        line-height:1;
        text-overflow:ellipsis;
        text-transform:uppercase;
        white-space:nowrap;
        -webkit-text-stroke:.55px #00123f;
        paint-order:stroke fill;
        text-shadow:none;
    }
    .spriteCard[data-variant-type="normal"] .spriteVariantName,
    .spriteCard[data-variant-type="base"] .spriteVariantName{
        color:#eef4ff;
    }
    .spriteCard[data-variant-type="gold"] .spriteVariantName{
        color:#ffdc3f;
    }
    .spriteCard[data-variant-type="gummy"] .spriteVariantName{
        color:#ff77df;
    }
    .spriteCard[data-variant-type="galaxy"] .spriteVariantName{
        color:#8d72ff;
    }
    .spriteCard[data-variant-type="holofoil"] .spriteVariantName{
        color:#9ff9ff;
    }
    .spriteCard[data-variant-type="cube"] .spriteVariantName{
        color:#bd74ff;
    }
    .spriteCard[data-variant-type="gem"] .spriteVariantName{
        color:#d7f0ff;
    }
    .spriteCard[data-variant-type="quack"] .spriteVariantName{
        color:#fff04a;
    }
    .spriteCard[data-variant-type="cheatmaster"] .spriteVariantName{
        color:#72ff8c;
    }
    .spriteRarity{
        min-width:0;
        width:100%;
        font-size:9px;
        padding:3px 4px;
    }
    .profileMenu{
        width:auto;
        min-width:0;
    }
    .profileMenuPanel{
        width:min(280px, calc(100vw - 28px));
        min-width:0;
        right:0;
    }
}