/* =========================
   BOOSTER PAGE
========================= */

.cards-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
}


/* CARTA */

.card-box {
    width: 180px;
    height: 320px;
    background: #151515;
    border-radius: 15px;
    overflow: hidden;
    padding-bottom: 10px;
    transition: .3s;
    text-align: center;
}


/* imagem */

.card-image {
    width: 180px;
    height: 230px;
    object-fit: cover;
    display: block;
}



/* texto */

.card-info {
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
}



    .card-info h3 {
        font-size: 18px;
        margin: 5px;
    }



    .card-info p {
        margin: 5px;
    }



/* hover */

.card-box:hover {
    transform: translateY(-8px) scale(1.04);
}



/* =========================
   RARIDADES
========================= */


.rarity-common {
    border: 4px solid #777;
}



.rarity-rare {
    border: 4px solid #2196f3;
    box-shadow: 0 0 10px #2196f3;
}



.rarity-legendary {
    border: 4px solid gold;
    box-shadow: 0 0 15px gold;
}



.rarity-mythic {
    border: 4px solid purple;
    box-shadow: 0 0 20px purple;
}



/* duplicada */

.duplicate {
    color: #ff9800;
    font-weight: bold;
    font-size: 14px;
}
/* ===========================================================
   KiKi Cards - Landing Page
=========================================================== */

.kiki-hero {
    max-width: 900px;
    margin: 80px auto;
    padding: 60px 40px;
    text-align: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    backdrop-filter: blur(8px);
}

.kiki-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-size: 3rem;
    color: white;
    margin-bottom: 25px;
}
.kiki-title img {
    width: 118px;
    height: 118px;
    object-fit: contain;
    filter:
        drop-shadow(0 12px 20px rgba(0,0,0,.5))
        drop-shadow(0 0 12px rgba(145,70,255,.18));
}

.kiki-description {
    color: #d8d8d8;
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: 10px;
}

.kiki-channel {
    font-size: 1.4rem;
    font-weight: bold;
    color: #9146FF;
    margin-bottom: 40px;
}

.kiki-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 18px 40px;
    background: #9146FF;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 12px;
    text-decoration: none;
    transition: all .25s ease;
}

    .kiki-login-button:hover {
        background: #772ce8;
        transform: translateY(-3px);
    }
/* ===========================================================
   KiKi Cards - Funcionalidades
=========================================================== */

.kiki-features {
    max-width: 1200px;
    margin: 70px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 35px 25px;
    text-align: center;
    transition: .25s ease;
}

    .feature-card:hover {
        transform: translateY(-8px);
        border-color: #9146FF;
    }

.feature-icon {
    display: grid;
    place-items: center;
    height: 92px;
    margin-bottom: 20px;
}

.kiki-login-button svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}
.feature-icon img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 9px 14px rgba(0,0,0,.4));
    transition: transform .25s ease, filter .25s ease;
}
.feature-card:hover .feature-icon img {
    transform: translateY(-4px) scale(1.07);
    filter:
        drop-shadow(0 12px 18px rgba(0,0,0,.5))
        drop-shadow(0 0 9px rgba(145,70,255,.25));
}

.feature-card h2 {
    color: white;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.feature-card p {
    color: #d4d4d4;
    line-height: 1.7;
}
/* ===========================================================
   KiKi Cards - Estatísticas
=========================================================== */

.kiki-stats {
    max-width: 1200px;
    margin: 90px auto;
    text-align: center;
}

.stats-title {
    color: white;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.stats-subtitle {
    color: #bdbdbd;
    margin-bottom: 45px;
    font-size: 1.05rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.stat-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 35px 20px;
    transition: .25s ease;
}

    .stat-card:hover {
        transform: translateY(-6px);
        border-color: #9146FF;
    }

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92px;
    margin-bottom: 12px;
}

.stat-icon img {
    width: 92px;
    height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .38));
    transition: transform .25s ease, filter .25s ease;
}

.stat-card:hover .stat-icon img {
    transform: translateY(-3px) scale(1.06);
    filter:
        drop-shadow(0 10px 14px rgba(0, 0, 0, .42))
        drop-shadow(0 0 10px rgba(145, 70, 255, .22));
}

.stat-number {
    display: block;
    color: white;
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.stat-label {
    display: block;
    color: #d4d4d4;
    font-size: 1rem;
}

/* Dashboard autenticado */
.kiki-dashboard {
    --kiki-purple: #9146ff;
    --kiki-orange: #ff8c00;
    display: grid;
    gap: 30px;
}

.dashboard-welcome,
.booster-station,
.booster-result,
.collection-preview {
    background: linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 24px;
}

.dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 38px 42px;
}

.dashboard-eyebrow {
    color: #b98cff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.dashboard-welcome h1,
.booster-copy h2,
.section-heading h2 {
    margin: 8px 0 10px;
}

.dashboard-welcome p,
.booster-copy p,
.section-heading > span {
    color: #aaaeb8;
}

.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 12px;
}

.dashboard-summary div {
    min-width: 135px;
    padding: 18px;
    text-align: center;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 15px;
}

.dashboard-summary strong,
.dashboard-summary span {
    display: block;
}

.dashboard-summary strong { font-size: 1.45rem; }
.dashboard-summary span {
    margin-top: 5px;
    color: #969aa5;
    font-size: .78rem;
}

.dashboard-progress {
    padding: 22px 8px 8px;
}
.overall-progress {
    margin-bottom: 22px;
}
.progress-copy {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #b8bbc4;
    font-size: .9rem;
}
.progress-copy strong { color: white; }
.progress-track {
    height: 10px;
    overflow: hidden;
    background: #24262d;
    border-radius: 999px;
}
.progress-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--kiki-purple), #c278ff, var(--kiki-orange));
    border-radius: inherit;
}
.rarity-progress-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.rarity-progress {
    --rarity-progress-color: #80858f;
    padding: 16px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
}
.rarity-progress.rarity-rare { --rarity-progress-color: #3b9cff; }
.rarity-progress.rarity-legendary { --rarity-progress-color: #ffd54a; }
.rarity-progress-heading {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
}
.rarity-progress-heading > span:last-child {
    color: white;
    font-weight: 800;
}
.rarity-dot {
    width: 9px;
    height: 9px;
    background: var(--rarity-progress-color);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--rarity-progress-color);
}
.rarity-progress-track {
    height: 7px;
    overflow: hidden;
    background: #272a31;
    border-radius: 999px;
}
.rarity-progress-track span {
    display: block;
    height: 100%;
    background: var(--rarity-progress-color);
    border-radius: inherit;
    box-shadow: 0 0 8px var(--rarity-progress-color);
}
.rarity-progress small {
    display: block;
    margin-top: 8px;
    color: #91959f;
    font-size: .72rem;
}

.booster-station {
    display: grid;
    grid-template-columns: 1fr 320px;
    align-items: center;
    min-height: 320px;
    padding: 38px 48px;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 45%, rgba(145,70,255,.25), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
.booster-copy { max-width: 650px; }
.booster-copy h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.booster-copy p {
    max-width: 590px;
    line-height: 1.7;
}
.dashboard-message {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 14px;
    color: #ffe1aa !important;
    background: rgba(255,140,0,.12);
    border: 1px solid rgba(255,140,0,.25);
    border-radius: 10px;
}
.conversion-shortcut {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 11px 16px;
    color: #1c1205;
    background: #ffbd4a;
    border-radius: 9px;
    text-decoration: none;
    font-size: .88rem;
    font-weight: 900;
    transition: transform .18s ease, background .18s ease;
}
.conversion-shortcut:hover {
    color: #1c1205;
    background: #ffd071;
    transform: translateY(-2px);
}
.available-conversions-note {
    margin-top: 17px;
    color: #ffd88b !important;
    font-size: .86rem;
}
.available-conversions-note strong { color: white; }

html { scroll-behavior: smooth; }
#seasonCollection { scroll-margin-top: 115px; }

.alien-booster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #c9cad0;
    font-size: .85rem;
}
.alien-button {
    position: relative;
    width: 210px;
    height: 210px;
    padding: 12px;
    background: radial-gradient(circle, rgba(145,70,255,.2), transparent 67%);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    filter: drop-shadow(0 0 25px rgba(145,70,255,.45));
    transition: transform .22s ease, filter .22s ease;
}
.alien-button:not(:disabled):hover {
    transform: translateY(-7px) scale(1.04);
    filter: drop-shadow(0 0 35px rgba(145,70,255,.72));
}
.alien-button:disabled {
    cursor: not-allowed;
    filter: grayscale(.8);
    opacity: .48;
}
.alien-button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.booster-count {
    position: absolute;
    right: 8px;
    top: 15px;
    min-width: 50px;
    padding: 8px 11px;
    color: white;
    background: var(--kiki-orange);
    border: 3px solid #111318;
    border-radius: 999px;
    font-size: 1.15rem;
    font-weight: 900;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
}

.booster-result,
.collection-preview { padding: 34px; }
.conversion-notice {
    padding: 16px 20px;
    color: #e8ffe8;
    background: rgba(50,190,90,.12);
    border: 1px solid rgba(80,220,115,.28);
    border-radius: 14px;
    font-weight: 700;
}
.likes-ranking {
    padding: 34px;
    background: linear-gradient(145deg, rgba(255,75,112,.07), rgba(255,255,255,.025));
    border: 1px solid rgba(255,95,125,.15);
    border-radius: 24px;
}
.likes-ranking-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 14px;
}
.ranking-card {
    --rarity-accent: #777d87;
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,.22);
    border: 2px solid var(--rarity-accent);
    border-radius: 14px;
    box-shadow: 0 0 12px color-mix(in srgb, var(--rarity-accent) 24%, transparent);
}
.ranking-card.rarity-rare {
    --rarity-accent: #3b9cff;
}
.ranking-card.rarity-legendary {
    --rarity-accent: #ffd54a;
}
.ranking-card.rarity-epic {
    --rarity-accent: #b86cff;
}
.ranking-card.rarity-mythic {
    --rarity-accent: #ff476f;
}
.ranking-card.season-favorite {
    box-shadow:
        0 0 0 2px rgba(255,255,255,.12),
        0 0 24px color-mix(in srgb, var(--rarity-accent) 42%, transparent);
}
.ranking-card > img {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
}
.ranking-card > div {
    display: grid;
    gap: 5px;
    padding: 12px;
}
.ranking-card > div > span {
    color: #9da1ab;
    font-size: .75rem;
}
.ranking-position {
    position: absolute;
    right: 7px;
    top: 7px;
    z-index: 2;
    padding: 6px 9px;
    color: white;
    background: rgba(8,9,12,.86);
    border-radius: 8px;
    font-weight: 900;
}
.ranking-likes {
    color: #ff718d !important;
    font-weight: 900;
}
.likes-ranking-empty {
    padding: 28px;
    text-align: center;
    background: rgba(0,0,0,.16);
    border-radius: 14px;
}
.likes-ranking-empty > span {
    display: block;
    margin-bottom: 10px;
    color: #ff5f7d;
    font-size: 2rem;
}
.likes-ranking-empty p {
    margin: 8px 0 0;
    color: #969aa5;
}
.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}
.opened-cards {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 18px;
}
.opened-card {
    overflow: hidden;
    background: #181a20;
    border-radius: 16px;
}
.opened-card img {
    width: 100%;
    aspect-ratio: 5 / 7;
    object-fit: cover;
    display: block;
}
.opened-card div {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    font-size: .8rem;
}
.opened-card div span { color: #aaaeb8; }

.collection-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(70px, 1fr));
    gap: 12px;
}
.collection-slot {
    --rarity-accent: #777d87;
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 7;
    background: #17191f;
    border: 2px solid #2b2e37;
    border-radius: 10px;
    scroll-margin-top: 130px;
}
.collection-slot:target {
    z-index: 4;
    animation: target-card-highlight 2.2s ease-out;
}
.collection-slot.rarity-rare,
.reveal-card.rarity-rare,
.card-detail-visual.rarity-rare {
    --rarity-accent: #3b9cff;
}
.collection-slot.rarity-legendary,
.reveal-card.rarity-legendary,
.card-detail-visual.rarity-legendary {
    --rarity-accent: #ffd54a;
}
.collection-slot.rarity-epic,
.reveal-card.rarity-epic,
.card-detail-visual.rarity-epic {
    --rarity-accent: #b86cff;
}
.collection-slot.rarity-mythic,
.reveal-card.rarity-mythic,
.card-detail-visual.rarity-mythic {
    --rarity-accent: #ff476f;
}
.collection-slot.owned { transition: transform .18s ease; }
.collection-slot.owned:hover {
    z-index: 2;
    transform: translateY(-5px) scale(1.03);
}
.collection-slot.owned {
    cursor: zoom-in;
}
.collection-slot.owned:focus-visible {
    z-index: 2;
    outline: 3px solid #b98cff;
    outline-offset: 3px;
}
.collection-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-corner-emblem {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    display: block;
    width: clamp(38px, 31%, 62px);
    aspect-ratio: 1.15;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--rarity-accent) 52%, #252832) 0 68%,
            transparent 69%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    pointer-events: none;
}
.card-corner-emblem::after {
    content: "";
    position: absolute;
    left: -9%;
    top: 72%;
    width: 112%;
    height: 3px;
    background: var(--rarity-accent);
    box-shadow: 0 0 5px color-mix(in srgb, var(--rarity-accent) 75%, transparent);
    transform: rotate(-39deg);
    transform-origin: left center;
}
.card-corner-emblem img,
.collection-slot .card-corner-emblem img,
.reveal-card .card-corner-emblem img,
.card-detail-visual .card-corner-emblem img {
    position: absolute;
    left: 3%;
    top: 2%;
    z-index: 1;
    width: 62%;
    height: 62%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.collection-slot.locked {
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, transparent 45%, rgba(255,255,255,.025) 45% 55%, transparent 55%),
        #17191f;
}
.locked-symbol {
    color: #3d414b;
    font-size: 2rem;
    font-weight: 900;
}
.locked-number,
.card-number {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 3px 5px;
    color: #858995;
    background: rgba(9,10,13,.8);
    border-radius: 5px;
    font-size: .63rem;
    font-weight: 700;
}
.copy-count {
    position: absolute;
    right: 5px;
    bottom: 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 7px;
    color: white;
    background: rgba(10,11,14,.88);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 900;
    box-shadow: 0 3px 9px rgba(0,0,0,.45);
}

.copy-count.ready {
    color: #17120b;
    background: #ffbd4a;
    border-color: #ffe09a;
}

.inline-convert-form {
    display: inline-flex;
    margin: 0;
}

.convert-symbol {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: #17120b;
    background: rgba(255,255,255,.5);
    border: 0;
    border-radius: 50%;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}

.convert-symbol:hover,
.convert-symbol:focus-visible {
    background: white;
    transform: rotate(45deg) scale(1.08);
    outline: 2px solid #17120b;
    outline-offset: 1px;
}

/* Detalhe ampliado da carta */
body.card-detail-is-open { overflow: hidden; }

.card-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 18000;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .22s ease;
}
.card-detail-modal[hidden] {
    display: none;
}
.card-detail-modal.is-visible { opacity: 1; }
.card-detail-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(5,6,9,.9);
    border: 0;
    cursor: zoom-out;
    backdrop-filter: blur(10px);
}
.card-detail-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, 430px) minmax(260px, 380px);
    align-items: center;
    gap: clamp(30px, 6vw, 75px);
    width: min(930px, 100%);
    max-height: calc(100vh - 48px);
    padding: clamp(25px, 5vw, 55px);
    overflow: auto;
    background:
        radial-gradient(circle at 20% 30%, rgba(145,70,255,.16), transparent 40%),
        #14161c;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 25px;
    box-shadow: 0 35px 100px rgba(0,0,0,.7);
    transform: translateY(18px) scale(.97);
    transition: transform .25s ease;
}
.card-detail-modal.is-visible .card-detail-content {
    transform: translateY(0) scale(1);
}
.card-detail-close {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 2;
    width: 42px;
    height: 42px;
    color: white;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}
.card-detail-close:hover { background: rgba(255,255,255,.16); }
.card-detail-visual {
    --rarity-accent: #777d87;
    position: relative;
    overflow: hidden;
    aspect-ratio: 5 / 7;
    background: #191b22;
    border: 5px solid #6e737e;
    border-radius: 22px;
    box-shadow: 0 25px 55px rgba(0,0,0,.55);
}
.card-detail-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-detail-visual.rarity-rare {
    border-color: #3b9cff;
    box-shadow: 0 0 34px rgba(33,150,243,.38), 0 25px 55px rgba(0,0,0,.55);
}
.card-detail-visual.rarity-legendary {
    border-color: #ffd54a;
    box-shadow: 0 0 42px rgba(255,196,35,.5), 0 25px 55px rgba(0,0,0,.55);
}
.card-detail-info h2 {
    margin: 10px 0 5px;
    font-size: clamp(2rem, 4vw, 3.2rem);
}
.card-detail-number {
    color: #8f939d;
    font-size: 1rem;
    font-weight: 800;
}
.card-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 34px;
}
.card-detail-stats div {
    padding: 18px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
}
.card-detail-stats dt {
    margin-bottom: 8px;
    color: #999da7;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.card-detail-stats dd {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
}
.card-detail-stats dd span[aria-hidden] { color: #ff5f7d; }
.community-card-origin {
    margin-top: 22px;
    padding: 18px;
    background: rgba(145, 70, 255, .08);
    border: 1px solid rgba(180, 135, 255, .2);
    border-radius: 14px;
}
.community-card-origin dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 13px 0 0;
}
.community-card-origin dl div {
    padding: 10px 12px;
    background: rgba(0,0,0,.18);
    border-radius: 9px;
}
.community-card-origin dt {
    color: #9197a3;
    font-size: .68rem;
    text-transform: uppercase;
}
.community-card-origin dd {
    margin: 4px 0 0;
    color: white;
    font-weight: 800;
}
.community-card-prompt {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.09);
}
.community-card-prompt strong {
    color: #c6a6ff;
    font-size: .74rem;
    text-transform: uppercase;
}
.community-card-prompt p {
    margin: 6px 0 0;
    color: #c7c9d0;
    font-size: .84rem;
    line-height: 1.55;
}
.card-like-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}
.card-like-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    color: #f3f3f5;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.card-like-button span[aria-hidden] {
    color: #858994;
    font-size: 1.25rem;
    transition: color .18s ease, transform .18s ease;
}
.card-like-button:hover {
    background: rgba(255,95,125,.12);
    transform: translateY(-2px);
}
.card-like-button.is-liked {
    color: white;
    background: rgba(255,75,112,.2);
    border-color: rgba(255,95,125,.48);
}
.card-like-button.is-liked span[aria-hidden] {
    color: #ff4b70;
    transform: scale(1.12);
}
.card-like-button:disabled {
    cursor: wait;
    opacity: .6;
    transform: none;
}
.card-like-feedback {
    color: #aeb1ba;
    font-size: .8rem;
}

/* Abertura animada do booster */
body.pack-is-opening { overflow: hidden; }

.pack-opening {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    padding: 28px;
    overflow: auto;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(111,40,190,.34), transparent 45%),
        rgba(7,8,12,.97);
    opacity: 1;
    transition: opacity .35s ease;
}

.pack-opening.is-closing { opacity: 0; }
.pack-opening-glow {
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(75vw, 850px);
    aspect-ratio: 1;
    pointer-events: none;
    background: conic-gradient(
        from 0deg,
        transparent,
        rgba(145,70,255,.18),
        transparent,
        rgba(255,140,0,.13),
        transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pack-rays 9s linear infinite;
}

.pack-stage,
.reveal-stage {
    position: relative;
    z-index: 1;
    width: min(1100px, 100%);
}

.pack-stage h2,
.reveal-stage h2 {
    margin: 10px 0 24px;
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.pack-stage > p,
.reveal-instruction {
    margin-top: 22px;
    color: #b8bac3;
}

.pack-shell {
    position: relative;
    width: min(280px, 70vw);
    aspect-ratio: 5 / 7;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,140,0,.09), transparent 35%),
        linear-gradient(145deg, #292b2d, #111214 56%, #202123);
    border: 2px solid #383a3d;
    border-radius: 25px;
    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.12),
        inset 0 -1px 0 rgba(255,140,0,.15),
        0 0 0 7px rgba(255,255,255,.025),
        0 0 45px rgba(255,140,0,.18),
        0 30px 70px rgba(0,0,0,.6);
    animation: pack-float 1.8s ease-in-out infinite;
}

.pack-shell img {
    width: 68%;
    max-height: 55%;
    object-fit: contain;
    filter:
        sepia(.2)
        saturate(1.35)
        drop-shadow(0 0 12px rgba(255,140,0,.45))
        drop-shadow(0 10px 12px rgba(0,0,0,.6));
}
.pack-shell strong {
    color: #ff9826;
    letter-spacing: .2em;
    font-size: .74rem;
}
.pack-shell small {
    color: #929498;
    letter-spacing: .16em;
    font-size: .56rem;
    font-weight: 800;
}
.pack-corner {
    position: absolute;
    width: 48px;
    height: 48px;
    border-top: 3px solid #f39a2d;
    border-left: 3px solid #f39a2d;
    filter: drop-shadow(0 0 5px rgba(255,140,0,.35));
}
.pack-corner::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    width: 23px;
    height: 23px;
    border-top: 2px solid rgba(243,154,45,.72);
    border-left: 2px solid rgba(243,154,45,.72);
}
.pack-corner::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 8px;
    height: 8px;
    background: #f39a2d;
    transform: rotate(45deg);
    box-shadow: 0 0 6px rgba(255,140,0,.45);
}
.pack-corner-top {
    left: 17px;
    top: 17px;
}
.pack-corner-bottom {
    right: 17px;
    bottom: 17px;
    transform: rotate(180deg);
}
.pack-shine {
    position: absolute;
    inset: -30%;
    background: linear-gradient(110deg, transparent 40%, rgba(255,180,82,.18) 50%, transparent 60%);
    transform: translateX(-70%);
    animation: pack-shine 1.7s ease-in-out infinite;
}
.pack-stage.is-opening .pack-shell {
    animation: pack-open .6s ease-in forwards;
}
.pack-opening.is-bursting .pack-opening-glow {
    animation: pack-burst .65s ease-out forwards;
}

.reveal-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 260px));
    justify-content: center;
    gap: clamp(18px, 4vw, 42px);
    perspective: 1200px;
}
.legendary-announcement {
    position: fixed;
    left: 50%;
    top: 13%;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff0a6;
    font-size: clamp(1.7rem, 5vw, 3.8rem);
    font-weight: 1000;
    letter-spacing: .16em;
    text-shadow:
        0 0 8px #fff,
        0 0 20px #ffd54a,
        0 0 45px #ff9d00;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -20px) scale(.7);
}
.legendary-announcement.is-visible {
    animation: legendary-title 4.9s ease-out forwards;
}
.legendary-announcement span {
    animation: legendary-star .6s ease-in-out infinite alternate;
}
.reveal-card {
    --rarity-accent: #777d87;
    aspect-ratio: 5 / 7;
    opacity: 0;
    transform: translateY(35px) scale(.88);
    transition: opacity .3s ease, transform .45s ease;
}
.reveal-card.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.reveal-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .7s cubic-bezier(.2,.75,.2,1.05);
}
.reveal-card.is-revealed .reveal-card-inner { transform: rotateY(180deg); }
.reveal-card-back,
.reveal-card-front {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #171922;
    border: 4px solid #555b68;
    border-radius: 18px;
    backface-visibility: hidden;
    box-shadow: 0 20px 45px rgba(0,0,0,.5);
}
.reveal-card-back {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle, rgba(145,70,255,.25), transparent 58%),
        #15121d;
}
.reveal-card-back img {
    width: 58%;
    filter: grayscale(.25) drop-shadow(0 0 15px rgba(145,70,255,.55));
}
.reveal-card-front { transform: rotateY(180deg); }
.reveal-card-front > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.reveal-card-front::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18) 48%, transparent 60%);
    transform: translateX(-100%);
}
.reveal-card.is-revealed .reveal-card-front::after {
    animation: card-glint 1.15s .55s ease-out;
}
.reveal-card-info {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(8,9,12,.88);
    border-radius: 9px;
    font-size: .78rem;
}
.reveal-card-info span { color: #c7c9d0; }
.reveal-status {
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.reveal-status.new-card {
    color: #092513;
    background: #65e894;
}
.reveal-status.duplicate-card {
    color: #211303;
    background: #ffb84d;
}
.reveal-card.rarity-common .reveal-card-front { border-color: #7a7f88; }
.reveal-card.rarity-rare .reveal-card-front {
    border-color: #3b9cff;
    box-shadow: 0 0 30px rgba(33,150,243,.48), 0 20px 45px rgba(0,0,0,.5);
}
.reveal-card.rarity-legendary .reveal-card-front {
    border-color: #ffd54a;
    box-shadow: 0 0 40px rgba(255,196,35,.62), 0 20px 45px rgba(0,0,0,.5);
}
.legendary-moment {
    background:
        radial-gradient(circle at center, rgba(255,190,35,.3), transparent 44%),
        rgba(7,8,12,.97);
}
.legendary-moment::before,
.legendary-moment::after {
    content: "";
    position: fixed;
    left: 50%;
    top: 50%;
    width: min(120vw, 1200px);
    aspect-ratio: 1;
    pointer-events: none;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255,215,70,.22) 0deg 3deg,
        transparent 3deg 14deg);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: legendary-rays 4.4s ease-out forwards;
}
.legendary-moment::after {
    width: min(85vw, 850px);
    background: radial-gradient(circle, rgba(255,246,180,.5), rgba(255,181,25,.1) 35%, transparent 68%);
    animation: legendary-flash 3.2s ease-out forwards;
}
.legendary-moment .reveal-card.rarity-legendary.is-revealed {
    z-index: 3;
    animation: legendary-card-pulse 2.8s ease-out;
}
.legendary-moment .reveal-card.rarity-legendary .reveal-card-front {
    box-shadow:
        0 0 18px #fff4b0,
        0 0 48px #ffd037,
        0 0 90px rgba(255,139,0,.8),
        0 25px 55px rgba(0,0,0,.65);
}
.finish-opening {
    margin-top: 22px;
    padding: 14px 28px;
    color: white;
    background: linear-gradient(135deg, #9146ff, #7130cc);
    border: 1px solid #b78aff;
    border-radius: 11px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    animation: finish-appear .35s ease-out;
}
.finish-opening:hover { background: linear-gradient(135deg, #a45fff, #813ce0); }

@keyframes pack-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-12px) rotate(1deg); }
}
@keyframes pack-shine {
    0%, 25% { transform: translateX(-70%); }
    75%, 100% { transform: translateX(70%); }
}
@keyframes pack-rays {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes pack-open {
    0% { transform: scale(1); filter: brightness(1); }
    45% { transform: scale(1.12) rotate(2deg); filter: brightness(1.5); }
    100% { transform: scale(.2); opacity: 0; filter: brightness(3); }
}
@keyframes pack-burst {
    0% { transform: translate(-50%, -50%) scale(.75); opacity: .5; }
    60% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; filter: brightness(3); }
    100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}
@keyframes card-glint {
    to { transform: translateX(100%); }
}
@keyframes finish-appear {
    from { opacity: 0; transform: translateY(10px); }
}
@keyframes target-card-highlight {
    0%, 100% {
        transform: scale(1);
        box-shadow: none;
    }
    18%, 58% {
        transform: translateY(-7px) scale(1.09);
        box-shadow:
            0 0 0 4px #ffbd4a,
            0 0 28px rgba(255,189,74,.9);
    }
}
@keyframes legendary-title {
    0% { opacity: 0; transform: translate(-50%, 15px) scale(.65); }
    25%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -15px) scale(1.08); }
}
@keyframes legendary-star {
    to { transform: rotate(35deg) scale(1.25); }
}
@keyframes legendary-rays {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-10deg) scale(.4); }
    35% { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(18deg) scale(1.25); }
}
@keyframes legendary-flash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    28% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
@keyframes legendary-card-pulse {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-12px) scale(1.08); }
    60% { transform: translateY(-5px) scale(1.035); }
}

@media (max-width: 1050px) {
    .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }
    .dashboard-summary { width: 100%; }
    .booster-station { grid-template-columns: 1fr 240px; }
    .collection-grid { grid-template-columns: repeat(8, minmax(65px, 1fr)); }
    .opened-cards { grid-template-columns: repeat(3, 1fr); }
    .likes-ranking-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
    .dashboard-welcome,
    .booster-station,
    .booster-result,
    .collection-preview { padding: 24px; }
    .likes-ranking { padding: 24px; }
    .dashboard-summary { grid-template-columns: 1fr; }
    .rarity-progress-grid { grid-template-columns: 1fr; }
    .booster-station {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .booster-copy p { margin-inline: auto; }
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .collection-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .opened-cards { grid-template-columns: repeat(2, 1fr); }
    .likes-ranking-grid { grid-template-columns: repeat(2, 1fr); }
    .pack-opening { padding: 18px 12px; }
    .reveal-cards {
        grid-template-columns: repeat(3, minmax(95px, 1fr));
        gap: 8px;
    }
    .reveal-card-back,
    .reveal-card-front {
        border-width: 2px;
        border-radius: 10px;
    }
    .reveal-card-info {
        left: 4px;
        right: 4px;
        bottom: 4px;
        padding: 5px;
        font-size: .57rem;
    }
    .reveal-status {
        right: 4px;
        top: 4px;
        padding: 4px 6px;
        font-size: .56rem;
    }
    .legendary-announcement {
        top: 18%;
        gap: 7px;
        letter-spacing: .08em;
    }
    .card-detail-modal { padding: 12px; }
    .card-detail-content {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 48px 22px 25px;
    }
    .card-detail-visual {
        width: min(260px, 70vw);
        margin: auto;
    }
    .card-detail-info { text-align: center; }
    .card-detail-stats { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
    .pack-opening *,
    .pack-opening *::before,
    .pack-opening *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Celebração de conclusão da temporada */
.genesis-complete-badge {
    grid-column: 1 / -1;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    border: 1px solid rgba(99, 255, 151, .5);
    border-radius: 999px;
    padding: .6rem 1rem;
    color: #d9ffe5;
    background: linear-gradient(135deg, rgba(9, 89, 47, .8), rgba(18, 45, 31, .9));
    box-shadow: 0 0 24px rgba(42, 255, 122, .16);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.genesis-complete-badge span { color: #62ff96; }
.genesis-complete-badge:hover,
.genesis-complete-badge:focus-visible {
    border-color: #7dffa7;
    transform: translateY(-1px);
    box-shadow: 0 0 32px rgba(42, 255, 122, .28);
}

body.celebration-is-open { overflow: hidden; }

.collection-celebration {
    --season-primary: #4dff91;
    --season-deep: #052b1b;
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: white;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(27, 149, 82, .35), transparent 34%),
        linear-gradient(145deg, #020806 0%, var(--season-deep) 52%, #010403 100%);
    transition: opacity .32s ease;
}

.collection-celebration[hidden] { display: none; }
.collection-celebration.is-visible { opacity: 1; }
.collection-celebration.is-closing { opacity: 0; }

.celebration-aurora {
    position: absolute;
    inset: -35%;
    background: conic-gradient(from 20deg, transparent, rgba(72, 255, 143, .2), transparent 28%, rgba(255, 142, 0, .11), transparent 58%, rgba(72, 255, 143, .16), transparent);
    filter: blur(40px);
    animation: celebration-aurora 5s ease-in-out both;
}

.celebration-rings,
.celebration-rings::before,
.celebration-rings::after {
    position: absolute;
    width: min(68vw, 760px);
    aspect-ratio: 1;
    border: 1px solid rgba(100, 255, 154, .24);
    border-radius: 50%;
    content: "";
}

.celebration-rings { animation: celebration-ring 3.8s ease-out both; }
.celebration-rings::before { inset: 9%; width: 82%; }
.celebration-rings::after { inset: 19%; width: 62%; }

.celebration-content {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    width: min(90vw, 780px);
    text-align: center;
    animation: celebration-content 4.8s cubic-bezier(.2, .8, .2, 1) both;
}

.celebration-content > img {
    width: clamp(92px, 14vw, 150px);
    max-height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0 28px rgba(75, 255, 143, .55));
}

.celebration-kicker {
    margin-top: 1.1rem;
    color: #9affba;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .34em;
    text-transform: uppercase;
}

.celebration-content h2 {
    margin: .55rem 0 .4rem;
    font-size: clamp(2.4rem, 8vw, 6.4rem);
    line-height: .95;
    letter-spacing: -.055em;
    text-shadow: 0 0 12px rgba(90, 255, 147, .8), 0 0 50px rgba(22, 174, 86, .52);
}

.celebration-content p {
    margin: .4rem 0 1.5rem;
    color: #d9eee0;
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.celebration-seal {
    display: flex;
    align-items: center;
    gap: .8rem;
    border: 1px solid rgba(113, 255, 162, .5);
    border-radius: 999px;
    padding: .7rem 1.25rem;
    background: rgba(2, 20, 12, .62);
    color: #baffd1;
    font-weight: 900;
    letter-spacing: .08em;
}

.celebration-particles i {
    --angle: calc(var(--particle) * 20deg);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--season-primary);
    box-shadow: 0 0 12px var(--season-primary);
    animation: celebration-particle 4.5s calc(var(--particle) * 45ms) ease-out both;
}

.celebration-skip {
    position: absolute;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: clamp(1rem, 3vw, 2.5rem);
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: .7rem 1rem;
    color: #d6e8dc;
    background: rgba(0, 0, 0, .25);
    font: inherit;
    cursor: pointer;
}

.celebration-skip:hover,
.celebration-skip:focus-visible {
    color: white;
    border-color: rgba(113, 255, 162, .7);
}

@keyframes celebration-aurora {
    0% { opacity: 0; transform: scale(.7) rotate(-20deg); }
    28% { opacity: 1; }
    100% { opacity: .45; transform: scale(1.08) rotate(18deg); }
}

@keyframes celebration-ring {
    0% { opacity: 0; transform: scale(.15); }
    38% { opacity: 1; }
    100% { opacity: .25; transform: scale(1.25); }
}

@keyframes celebration-content {
    0% { opacity: 0; transform: scale(.78) translateY(24px); filter: blur(8px); }
    18% { opacity: 1; transform: scale(1.03) translateY(0); filter: blur(0); }
    30%, 85% { transform: scale(1); }
    100% { opacity: 1; }
}

@keyframes celebration-particle {
    0% { opacity: 0; transform: rotate(var(--angle)) translateY(-5vh) scale(.2); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--angle)) translateY(-58vh) scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
    .celebration-aurora,
    .celebration-rings,
    .celebration-content,
    .celebration-particles i {
        animation: none;
    }

    .collection-celebration { transition-duration: .01ms; }
}

/* Premium collection album */
.collection-view-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    background:
        radial-gradient(circle at 85% 15%, rgba(75, 225, 135, .1), transparent 34%),
        #181a20;
    border: 1px solid #2c3038;
    border-radius: 20px;
}
.collection-view-panel h2 {
    margin: 5px 0 0;
    font-size: clamp(1.25rem, 2.2vw, 1.8rem);
}
.collection-view-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    padding: 5px;
    background: #0f1115;
    border: 1px solid #2b3037;
    border-radius: 14px;
}
.collection-view-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 155px;
    padding: 12px 16px;
    color: #9fa5af;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
.collection-view-button:hover:not(:disabled) {
    color: white;
    transform: translateY(-1px);
}
.collection-view-button.is-active {
    color: white;
    background: linear-gradient(135deg, #7541c8, #9146ff);
    box-shadow: 0 5px 18px rgba(112, 52, 206, .3);
}
.collection-view-button.premium.is-active {
    color: #07150d;
    background: linear-gradient(135deg, #b5ffbd, #4de08d);
    box-shadow: 0 5px 22px rgba(55, 214, 126, .28);
}
.collection-view-button.is-locked {
    cursor: not-allowed;
    opacity: .5;
}
.collection-view-button small {
    padding: 2px 5px;
    color: #07150d;
    background: #66e99b;
    border-radius: 5px;
    font-size: .58rem;
}
.premium-access-note {
    max-width: 270px;
    margin: 0;
    color: #9299a4;
    font-size: .82rem;
}
[data-collection-view].is-entering {
    animation: collection-view-enter .48s cubic-bezier(.2, .8, .2, 1);
}

.panini-album {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(22px, 4vw, 48px);
    color: #eaffef;
    background:
        radial-gradient(circle at 15% 5%, rgba(77, 224, 141, .22), transparent 28%),
        radial-gradient(circle at 95% 85%, rgba(168, 255, 190, .12), transparent 32%),
        linear-gradient(145deg, #0d2719, #07130e 62%, #102619);
    border: 1px solid rgba(101, 235, 155, .3);
    border-radius: 28px;
    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 25px 70px rgba(0,0,0,.38);
}
.panini-ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .17;
    background-image:
        linear-gradient(30deg, transparent 48%, #65eb9b 49% 50%, transparent 51%),
        linear-gradient(-30deg, transparent 48%, #65eb9b 49% 50%, transparent 51%);
    background-size: 85px 85px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.panini-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}
.panini-header h2 {
    margin: 7px 0 5px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: -.035em;
}
.panini-header p {
    margin: 0;
    color: #9dccad;
}
.panini-premium-mark {
    color: #70f0a6;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .18em;
}
.panini-seal {
    display: grid;
    flex: 0 0 82px;
    place-items: center;
    width: 82px;
    aspect-ratio: 1;
    background: linear-gradient(145deg, #203d2b, #0a1a11);
    border: 1px solid rgba(123, 244, 170, .45);
    border-radius: 50%;
    box-shadow:
        0 0 0 6px rgba(77, 224, 141, .07),
        0 0 30px rgba(77, 224, 141, .2);
}
.panini-seal img {
    width: 62%;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.5));
}
.panini-book {
    position: relative;
    perspective: 1800px;
}
.panini-page {
    position: relative;
    display: none;
    padding: clamp(22px, 4vw, 46px);
    overflow: hidden;
    color: #193123;
    background:
        linear-gradient(90deg, rgba(0,0,0,.08), transparent 3%, transparent 97%, rgba(0,0,0,.08)),
        repeating-linear-gradient(0deg, rgba(41, 94, 59, .025) 0 1px, transparent 1px 5px),
        #e9efdf;
    border: 1px solid #c9d5be;
    border-radius: 10px 22px 22px 10px;
    box-shadow:
        inset 16px 0 24px rgba(36, 64, 45, .12),
        0 18px 45px rgba(0,0,0,.35);
    transform-origin: left center;
    backface-visibility: hidden;
}
.panini-page.is-current {
    display: block;
}
.panini-page.turning-forward {
    transform-origin: left center;
    animation: panini-turn-forward 1.8s cubic-bezier(.18, .74, .22, 1);
}
.panini-page.turning-back {
    transform-origin: right center;
    animation: panini-turn-back 1.8s cubic-bezier(.18, .74, .22, 1);
}
.panini-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.48) 49%, transparent 62%);
    transform: translateX(-120%);
}
.panini-page.is-current::after {
    animation: panini-paper-glint 1.9s .3s ease-out;
}
.panini-page.turning-back::after {
    transform: translateX(120%);
    animation-name: panini-paper-glint-back;
}
.panini-page-decoration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    color: #477159;
    border-bottom: 1px solid rgba(44, 101, 65, .24);
}
.panini-page-decoration span {
    font-size: .65rem;
    font-weight: 900;
    letter-spacing: .22em;
}
.panini-page-decoration strong {
    color: rgba(36, 91, 57, .16);
    font-family: Georgia, serif;
    font-size: 3rem;
    line-height: .9;
}
.panini-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(12px, 2vw, 24px);
}
.panini-card {
    --rarity-accent: #777d87;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    aspect-ratio: 5 / 7;
    background: rgba(91, 130, 102, .07);
    border: 2px dashed rgba(48, 99, 65, .28);
    border-radius: 9px;
}
.panini-card.rarity-rare { --rarity-accent: #3b9cff; }
.panini-card.rarity-legendary { --rarity-accent: #ffd54a; }
.panini-card.owned {
    cursor: zoom-in;
    border-style: solid;
    border-color: var(--rarity-accent);
    box-shadow:
        0 6px 16px rgba(31, 65, 42, .22),
        0 0 12px color-mix(in srgb, var(--rarity-accent) 22%, transparent);
    transform: rotate(var(--album-tilt, -.35deg));
    transition: transform .22s ease, box-shadow .22s ease;
}
.panini-card.owned:nth-child(even) { --album-tilt: .35deg; }
.panini-card.owned:hover,
.panini-card.owned:focus-visible {
    z-index: 3;
    outline: none;
    transform: translateY(-7px) rotate(0) scale(1.04);
    box-shadow:
        0 14px 28px rgba(20, 51, 31, .32),
        0 0 18px color-mix(in srgb, var(--rarity-accent) 34%, transparent);
}
.panini-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.panini-card-caption {
    position: absolute;
    inset: auto 5px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 7px;
    color: white;
    background: rgba(5, 13, 8, .82);
    border-radius: 6px;
    font-size: .62rem;
}
.panini-card-caption span { color: #ff8ba1; }
.panini-card.locked {
    align-content: center;
    gap: 6px;
    color: rgba(33, 79, 49, .55);
}
.panini-card.locked strong { font-size: .75rem; }
.panini-card.locked small { font-size: .58rem; }
.panini-placeholder-mark {
    display: grid;
    place-items: center;
    width: 42%;
    aspect-ratio: 1;
    color: rgba(33, 91, 52, .22);
    border: 2px solid rgba(33, 91, 52, .16);
    border-radius: 50%;
    font: 900 clamp(1.2rem, 3vw, 2rem) Georgia, serif;
}
.panini-page footer {
    position: absolute;
    right: 28px;
    bottom: 13px;
    color: rgba(35, 82, 50, .58);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.panini-navigation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 18px;
    margin-top: 24px;
}
.panini-navigation > span {
    color: #9dccad;
    font-size: .8rem;
    text-align: center;
}
.panini-navigation button {
    justify-self: start;
    padding: 11px 18px;
    color: #eaffef;
    background: rgba(89, 224, 143, .1);
    border: 1px solid rgba(111, 238, 162, .32);
    border-radius: 10px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.panini-navigation button:last-child { justify-self: end; }
.panini-navigation button:hover:not(:disabled) {
    color: #07150d;
    background: #65e69b;
}
.panini-navigation button:disabled {
    cursor: not-allowed;
    opacity: .35;
}

@keyframes collection-view-enter {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
}
@keyframes panini-turn-forward {
    from { opacity: .25; transform: rotateY(-72deg) scale(.96); }
    to { opacity: 1; transform: rotateY(0) scale(1); }
}
@keyframes panini-turn-back {
    from { opacity: .25; transform: rotateY(72deg) scale(.96); }
    to { opacity: 1; transform: rotateY(0) scale(1); }
}
@keyframes panini-paper-glint {
    to { transform: translateX(120%); }
}
@keyframes panini-paper-glint-back {
    to { transform: translateX(-120%); }
}

@media (max-width: 720px) {
    .kiki-title {
        gap: 14px;
        font-size: 2.25rem;
    }
    .kiki-title img {
        width: 84px;
        height: 84px;
    }
    .collection-view-panel {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }
    .collection-view-switch { width: 100%; }
    .collection-view-button {
        min-width: 0;
        padding-inline: 10px;
        font-size: .78rem;
    }
    .premium-access-note { max-width: none; }
    .panini-header { align-items: flex-start; }
    .panini-seal {
        flex-basis: 58px;
        width: 58px;
    }
    .panini-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .panini-page { padding: 20px 18px 34px; }
    .panini-page-decoration strong { font-size: 2rem; }
    .panini-navigation { grid-template-columns: 1fr 1fr; }
    .panini-navigation > span {
        grid-column: 1 / -1;
        grid-row: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-collection-view].is-entering,
    .panini-page.turning-forward,
    .panini-page.turning-back,
    .panini-page.is-current::after {
        animation: none !important;
    }
}