@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@700;900&family=Orbitron:wght@600;700;900&family=Syne:wght@800&family=Space+Mono:wght@400;700&display=swap');

@property --album-shell-top {
    syntax: '<color>';
    initial-value: #1a2e21;
    inherits: true;
}

@property --album-shell-bottom {
    syntax: '<color>';
    initial-value: #0a0a0a;
    inherits: true;
}

@property --album-shell-accent {
    syntax: '<color>';
    initial-value: #9b1014;
    inherits: true;
}

@property --album-shell-accent-soft {
    syntax: '<color>';
    initial-value: #f3d48d;
    inherits: true;
}

.album-page {
    --album-shell-accent: #9b1014;
    --album-shell-accent-soft: #f3d48d;
    --album-shell-top: #1a2e21;
    --album-shell-bottom: #0a0a0a;
    --album-particle-glow: rgba(0, 255, 153, 0.5);
    --album-header-bg: rgba(18, 38, 28, 0.72);
    --album-header-border: rgba(255, 230, 182, 0.16);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    transition:
        --album-shell-top 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        --album-shell-bottom 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        --album-shell-accent 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        --album-shell-accent-soft 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    background: linear-gradient(to bottom, var(--album-shell-top), var(--album-shell-bottom));
    background-attachment: fixed;
}

.album-page.album-modal-open {
    overflow: hidden;
}

.album-page[data-album-page="login"],
.album-page[data-album-page="register"] {
    background:
        radial-gradient(circle at 50% 18%, rgba(185, 255, 255, 0.52), transparent 18%),
        radial-gradient(circle at 50% 20%, rgba(245, 255, 255, 0.7), transparent 4%),
        repeating-linear-gradient(22deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 16px),
        linear-gradient(135deg, #0797a4 0%, #09b8bd 48%, #067f8f 100%);
    background-attachment: fixed;
}

.album-page[data-album-page="login"] .album-auth,
.album-page[data-album-page="register"] .album-auth {
    min-height: calc(100vh - 70px);
}

.album-page[data-album-page="login"] .album-kicker,
.album-page[data-album-page="login"] .album-panel h1,
.album-page[data-album-page="register"] .album-kicker,
.album-page[data-album-page="register"] .album-panel h1 {
    text-align: center;
}

.album-particles-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.album-particles-layer>canvas {
    filter: drop-shadow(0 0 5px var(--album-particle-glow));
}

.album-auth,
.album-shell {
    width: min(1320px, calc(100% - 24px));
    margin: 0 auto;
}

.album-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 0;
}

.album-logo {
    position: absolute;
    top: 24px;
    left: 24px;
}

.album-logo img {
    width: 58px;
    height: auto;
}

.album-header-logo img {
    height: 45px;
    width: auto;
    object-fit: contain;
}

.album-panel,
.album-pack-panel,
.album-pack-result,
.album-progress-panel {
    background: rgba(255, 250, 238, 0.96);
    border: 1px solid rgba(110, 56, 26, 0.18);
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(34, 8, 8, 0.24);
}

.album-panel {
    width: min(440px, 100%);
    padding: 32px;
    text-align: left;
}

.album-kicker {
    color: #ad6d11;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0;
}

.album-panel h1,
.album-hero h1 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    line-height: 1;
    margin-bottom: 14px;
    color: #3f251b;
    text-shadow: none;
}

.album-muted,
.album-panel p,
.album-pack-panel p {
    color: #6a5046;
    font-size: 1rem;
    line-height: 1.55;
}

.album-form {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.album-form label {
    color: #5b3929;
    font-size: 0.92rem;
    font-weight: 700;
}

.album-form input {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid #d9c5b5;
    border-radius: 8px;
    background: #fffdf8;
    color: #42291f;
    font: inherit;
}

.album-form input:focus {
    outline: none;
    border-color: #c3871f;
    box-shadow: 0 0 0 4px rgba(195, 135, 31, 0.12);
}

.album-button,
.album-nav-button,
.album-page-select {
    font: inherit;
}

.album-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #f3d48d 0%, #d4ae58 100%);
    color: #4e3311;
    cursor: pointer;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(70, 38, 11, 0.16);
    transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
}

.album-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 24px rgba(70, 38, 11, 0.18);
}

.album-button:disabled,
.album-nav-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.album-auth-link {
    margin-top: 20px;
    text-align: center;
}

.album-auth-link a,
.album-header a {
    color: #8a4d18;
    font-weight: 700;
    text-decoration: none;
}

.album-header-nav-link {
    color: #f7e8ce !important;
}

.album-header-action {
    border: 0;
    padding: 0;
    background: transparent;
    color: #f7e8ce;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.album-icon-button {
    width: 54px;
    min-width: 54px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.album-icon-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.album-page.is-capturing-album .album-book-page::before,
.album-page.is-capturing-album .album-sticker-locked-mark::before,
.album-page.is-capturing-album .album-sticker-placeholder-card::before {
    display: none;
}

.album-page.is-capturing-album .album-book-page {
    box-shadow:
        0 10px 24px rgba(41, 10, 10, 0.12),
        inset 0 0 0 1px rgba(122, 70, 39, 0.08);
}

.album-page.is-capturing-album .album-spread-art {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.album-page.is-capturing-album .album-sticker-locked-mark,
.album-page.is-capturing-album .album-sticker-placeholder-card {
    background:
        linear-gradient(135deg, transparent 0 45%, rgba(255, 255, 255, 0.34) 45% 48%, transparent 48% 100%),
        linear-gradient(180deg, rgba(242, 238, 230, 0.98), rgba(224, 219, 209, 0.96) 70%, rgba(255, 255, 255, 0.98) 70%);
}

.album-page.is-capturing-album .album-sticker-locked-mark::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 239, 230, 0.98));
}

/* Garante o tamanho total do album no print/screenshot SOMENTE para paginas que podem expandir */
.album-page.is-capturing-album.is-expandable-page .album-book-page,
.album-page.is-capturing-album.is-expandable-page .album-spread,
.album-page.is-capturing-album.is-expandable-page .album-spread-stage {
    min-height: 980px !important;
    height: 980px !important;
}

.album-page.is-capturing-album.is-expandable-page .album-sticker-grid {
    position: absolute !important;
    inset: 92px 18px 42px !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
}

/* Botão de Alternar Layout do Álbum (Compacto / Completo) */
.album-layout-toggle-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 246, 228, 0.92);
    color: #5d3a16;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(54, 19, 5, 0.16);
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.album-layout-toggle-btn:hover {
    transform: scale(1.08);
    background: #fffdfa;
    color: #8a4d18;
}

.album-layout-toggle-btn:active {
    transform: scale(0.94);
}

/* Esconde o botão de layout no momento do print */
.album-page.is-capturing-album .album-layout-toggle-btn {
    display: none !important;
}

/* Estado de Layout Expandido (Visualização Completa) */
.album-page.is-expanded-layout .album-book-page,
.album-page.is-expanded-layout .album-spread,
.album-page.is-expanded-layout .album-spread-stage {
    min-height: 980px !important;
    height: 980px !important;
}

.album-page.is-expanded-layout .album-sticker-grid {
    position: absolute !important;
    inset: 92px 18px 42px !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
}

/* Alternância dos ícones de expandir/encolher */
.album-page.is-expanded-layout .icon-expand {
    display: none !important;
}

.album-page.is-expanded-layout .icon-collapse {
    display: block !important;
}

.album-message {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    min-width: 300px;
    max-width: 400px;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.album-message.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.album-message-error {
    background: #e63946 !important;
    border: none !important;
    color: #ffffff !important;
}

.album-message-success {
    background: #64bb5d !important;
    border: none !important;
    color: #ffffff !important;
}

.album-message::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 2px solid white;
    border-radius: 50%;
}

.album-message-success::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><polyline points="20 6 9 17 4 12"></polyline></svg>');
}

.album-message-error::before {
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>');
}

.album-message[hidden],
.album-pack-result[hidden] {
    display: none !important;
}

.album-header {
    width: 100%;
    height: 70px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--album-header-bg);
    border-bottom: 1px solid var(--album-header-border);
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
}

.album-header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.album-header nav {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #f7e8ce;
    position: relative;
    z-index: 1;
}

.album-header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #f7e8ce;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.album-header-greeting {
    white-space: nowrap;
}

.album-shell {
    padding: 10px 0 14px;
    text-align: left;
    position: relative;
}

.album-pack-panel,
.album-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Secondary Header (Dashboard) Styling with smooth expansion/collapse transition */
.album-dashboard {
    width: 100%;
    background: rgba(255, 250, 238, 0.98);
    /* Beautiful cream/white background */
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 2;
    margin-bottom: 0;

    /* Animation base properties */
    display: block !important;
    /* Force block to allow transition even when browser toggles hidden */
    height: 56px;
    /* Fixed height for ultra-precise slide animation */
    opacity: 1;
    overflow: hidden;
    border-bottom: 1px solid rgba(110, 56, 26, 0.18);
    transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, border-color 0.35s ease;
}

/* Hidden state transition overrides for smooth slide expansion/collapse */
.album-dashboard[hidden] {
    height: 0 !important;
    opacity: 0 !important;
    border-bottom-color: transparent !important;
}

/* Adjust layout alignment for secondary header */
.album-dashboard .album-dashboard-strip {
    max-width: 1320px;
    width: calc(100% - 40px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 8px 0;
    /* Keep it ultra-compact to avoid increasing height */
}

/* LEFT SIDE: Progress Panel - Centered and matching exactly 40px height */
.album-dashboard .album-progress-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.album-dashboard .album-progress-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 0;
    flex-shrink: 0 !important;
    /* Prevent shrinking in flex layouts */
}

.album-dashboard .album-progress-summary strong {
    color: #532719 !important;
    /* Original dark brown */
    font-size: 1.15rem;
    font-weight: 800;
    text-shadow: none !important;
    line-height: 1;
}

.album-dashboard .album-progress-summary span {
    color: #7a5f4d !important;
    /* Original medium brown */
    font-size: 0.76rem;
    font-weight: 500;
    display: inline-block;
    margin-top: 1px;
    line-height: 1;
}

/* Slim progress bar matching the original brown style */
.album-dashboard .album-progress-track {
    height: 6px !important;
    background: rgba(116, 69, 37, 0.14) !important;
    border-radius: 99px;
    margin: 0 !important;
    flex-shrink: 0 !important;
    /* Prevent shrinking in flex layouts */
}

.album-dashboard .album-progress-track span {
    background: linear-gradient(90deg, #f0d28f, #bc7e26) !important;
}

/* RIGHT SIDE: Pack Panel - Transparent design with high contrast texts */
.album-dashboard .album-pack-panel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    position: relative !important;
    padding: 0 !important;
    padding-right: 60px !important;
    /* Extra padding on the right to perfectly clear the switch button */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 40px !important;
    /* Force matching height */
    width: 100% !important;
    overflow: visible !important;
}

.album-dashboard .album-pack-panel h2 {
    color: #532719 !important;
    /* Elegant dark brown */
    font-size: 1.1rem;
    margin: 0;
    text-shadow: none !important;
    line-height: 1.1;
}

.album-dashboard .album-pack-panel p {
    color: #7a5f4d !important;
    /* Medium brown */
    font-size: 0.75rem;
    margin-top: 2px;
    line-height: 1;
}

.album-dashboard .album-pack-panel-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    /* Same spacing of 10px between elements */
    margin-right: 0 !important;
    /* Overwrite the 28px inline margin */
    height: 40px !important;
}

/* Stats box inside pack panel in light/cream header */
.album-dashboard .album-stats-inline {
    background: rgba(116, 69, 37, 0.06) !important;
    border: 1px solid rgba(110, 56, 26, 0.15) !important;
    width: 100px !important;
    /* Same width as Abrir button */
    height: 40px !important;
    /* Same height */
    padding: 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.album-dashboard .album-stats-inline strong {
    font-size: 1.1rem;
    color: #532719 !important;
    /* Elegant dark brown */
    text-shadow: none !important;
    line-height: 1;
}

.album-dashboard .album-stats-inline span {
    font-size: 0.68rem;
    color: #7a5f4d !important;
    /* Medium brown */
    line-height: 1;
    margin-top: 1px;
}

/* Beautiful button scaling inside header */
.album-dashboard .album-button {
    height: 40px !important;
    /* Same height */
    width: 100px !important;
    /* Same width */
    min-height: 40px !important;
    padding: 0 !important;
    font-size: 0.8rem;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Switch button position relative to modern secondary header container */
.album-dashboard #album-pack-switch-btn {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    /* Matches height for a perfect circle */
    height: 40px !important;
    /* Same height */
    background: rgba(116, 69, 37, 0.08) !important;
    border: 1px solid rgba(110, 56, 26, 0.18) !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #532719 !important;
    /* Matches main brown controls */
    cursor: pointer !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background-color 0.2s, color 0.2s;
}

.album-dashboard #album-pack-switch-btn:hover {
    background: rgba(116, 69, 37, 0.15) !important;
    color: #532719 !important;
}

.album-dashboard #album-pack-switch-btn:hover {
    background: rgba(116, 69, 37, 0.15) !important;
    color: #532719 !important;
}

.album-stats {
    min-width: 190px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 240, 217, 0.18);
    border-radius: 16px;
    background: rgba(56, 8, 11, 0.42);
    text-align: center;
}

.album-stats strong {
    display: block;
    color: #fff7e4;
    font-size: 2rem;
}

.album-stats span,
.album-section-title span {
    color: rgba(255, 245, 226, 0.86);
}

.album-dashboard-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 470px);
    gap: 10px;
    align-items: stretch;
}

.album-progress-panel {
    margin-bottom: 0;
    padding: 10px 16px;
}

.album-progress-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 8px;
}

.album-progress-summary div {
    min-width: 0;
}

.album-progress-summary strong {
    display: block;
    color: #532719;
    font-size: 1.35rem;
    line-height: 1.1;
}

.album-progress-summary span {
    color: #7a5f4d;
    font-size: 0.86rem;
}

.album-progress-track {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(116, 69, 37, 0.14);
}

.album-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f0d28f, #bc7e26);
}

.album-pack-panel,
.album-pack-result {
    margin-bottom: 8px;
    padding: 12px 16px;
}

.album-pack-panel h2,
.album-pack-result h2,
.album-section-title h2 {
    color: #fff4dd;
    font-size: 1.45rem;
    margin: 0 0 6px;
    text-shadow: none;
}

.album-pack-panel {
    background: rgba(69, 9, 13, 0.5);
    border: 1px solid rgba(255, 232, 198, 0.12);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
}

.album-pack-panel h2 {
    color: #fff4dd;
    margin: 0;
}

.album-pack-panel-copy {
    min-width: 0;
}

.album-pack-panel-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.album-stats-inline {
    min-width: 158px;
    padding: 10px 14px;
    border-radius: 12px;
    flex: 0 0 auto;
}

.album-stats-inline strong {
    font-size: 1.45rem;
}

.album-pack-panel p {
    color: rgba(255, 244, 221, 0.82);
}

.album-pack-result h2 {
    color: #5c3619;
}

.album-section-title {
    margin: 8px 0 10px;
}

.album-button-ghost {
    min-height: 44px;
    padding: 0 18px;
    background: rgba(255, 246, 228, 0.9);
    color: #5d3a16;
    white-space: nowrap;
}

.album-nav-button {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #f3d48d 0%, #cfaa54 100%);
    color: #552f10;
    cursor: pointer;
    font-size: 2.1rem;
    line-height: 1;
    box-shadow: 0 12px 24px rgba(54, 19, 5, 0.18);
}

.album-nav-button:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.04);
    box-shadow: 0 16px 26px rgba(54, 19, 5, 0.2);
}

.album-nav-button-side {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
}

.album-nav-button-left {
    left: 0;
}

.album-nav-button-right {
    right: 0;
}

.album-page-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 6px 10px 6px 14px;
    border-radius: 999px;
    background: rgba(255, 246, 228, 0.92);
    color: #5d3a16;
    box-shadow: 0 14px 22px rgba(54, 19, 5, 0.16);
}

.album-page-pill span {
    font-weight: 800;
    white-space: nowrap;
}

.album-page-select {
    min-width: 200px;
    height: 34px;
    border: 1px solid rgba(144, 103, 35, 0.3);
    border-radius: 999px;
    background-color: #fffdfa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%235d3a16' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: #5d3a16;
    padding: 4px 34px 4px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(54, 19, 5, 0.05);
}

.album-page-select:hover {
    border-color: rgba(144, 103, 35, 0.5);
    background-color: #ffffff;
}

.album-page-select:focus {
    border-color: #cfaa54;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(207, 170, 84, 0.25);
}

.album-page-select option {
    font-weight: 600;
    color: #5d3a16;
    background: #fffdfa;
    padding: 8px;
}

.album-book-shell {
    position: relative;
    perspective: 2200px;
    padding: 0 64px;
}

.album-book-stage {
    position: relative;
    min-height: 640px;
    transform-style: preserve-3d;
}

.album-book-stage.is-turning.turn-forward {
    animation: albumPageTurnForward 0.76s ease;
}

.album-book-stage.is-turning.turn-backward {
    animation: albumPageTurnBackward 0.76s ease;
}

.album-book-page {
    position: relative;
    min-height: 640px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--team-page-bg, linear-gradient(180deg, rgba(255, 250, 242, 0.96), rgba(244, 239, 228, 0.92)));
    box-shadow:
        0 42px 80px rgba(41, 10, 10, 0.28),
        inset 0 0 0 1px rgba(122, 70, 39, 0.08);
}

.album-book-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 22%, rgba(255, 255, 255, 0.4), transparent 25%),
        radial-gradient(circle at 85% 18%, rgba(255, 255, 255, 0.2), transparent 25%),
        /* Lombada central sombreada mais escura e realista, sem a linha branca forte */
        linear-gradient(90deg,
            transparent 46%,
            rgba(0, 0, 0, 0.15) 48%,
            rgba(0, 0, 0, 0.38) 49.5%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(0, 0, 0, 0.38) 50.5%,
            rgba(0, 0, 0, 0.15) 52%,
            transparent 54%);
    pointer-events: none;
    z-index: 10;
    /* Renderiza por cima do fundo e figurinhas, simulando o vinco físico real */
}

.album-book-page::after {
    display: none;
}

.album-cover-page {
    background:
        radial-gradient(circle at 50% 18%, rgba(185, 255, 255, 0.3), transparent 28%),
        linear-gradient(135deg, #0797a4 0%, #09b8bd 48%, #067f8f 100%);
}

.album-cover-page::before {
    display: none;
}

.album-cover-spread {
    position: relative;
    z-index: 1;
    min-height: 640px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
}

.album-cover-spread img {
    width: 100%;
    height: 100%;
    /* min-height: 640px; */
    display: block;
    object-fit: cover;
}

.album-spread {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr;
    min-height: 640px;
    padding: 14px 14px 16px;
}

.album-spread-top {
    display: none;
}

.album-page-hero {
    display: none;
}

.album-page-kicker {
    display: none;
}

.album-page-title-wrap {
    display: none;
}

.album-page-title-wrap h3 {
    margin: 0 0 6px;
    color: var(--team-accent, #7b2f1f);
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    line-height: 0.96;
    text-transform: uppercase;
}

.album-page-title-wrap p {
    display: none;
}

.album-spread-stage {
    position: relative;
    min-height: 640px;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
}

.album-spread-art {
    position: relative;
    min-height: 100%;
    border-radius: 18px;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        var(--team-art-image, none),
        var(--team-art-bg, linear-gradient(180deg, #e9ecf2 0%, #d5d9e2 36%, #7cac64 36%, #507741 100%));
    background-size: auto, cover, cover;
    background-position: center, center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.26),
        inset 0 -48px 90px rgba(255, 255, 255, 0.24);
}

.album-spread-art::before {
    display: none;
}

.album-spread-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 35%),
        linear-gradient(180deg, rgba(90, 36, 36, 0.3) 0 19%, transparent 19% 100%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.08) 2px, transparent 2px, transparent 22px);
    mix-blend-mode: screen;
    opacity: 0.22;
}

.album-spread-stage-ribbon {
    position: absolute;
    z-index: 2;
}

.album-spread-stage-ribbon {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: min(92%, 760px);
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, rgba(250, 248, 241, 0.96), rgba(237, 232, 221, 0.96));
    color: var(--team-accent, #7b2f1f);
    font-size: clamp(0.92rem, 1.85vw, 1.45rem);
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    box-shadow: 0 10px 16px rgba(61, 30, 16, 0.08);
}

.album-spread-stage-title {
    min-width: 0;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35em;
    white-space: nowrap;
}

.album-spread-stage-official {
    font-size: 0.62em;
    font-weight: 800;
    text-transform: none;
}

.album-spread-stage-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.album-spread-stage-flag img {
    width: 28px;
    height: 20px;
    display: block;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.album-sticker-grid {
    position: absolute;
    inset: 92px 18px 42px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 180px));
    grid-auto-rows: auto;
    justify-content: center;
    align-content: start;
    gap: 34px 42px;
    align-items: start;
}

.album-sticker-slot {
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.album-sticker-slot.is-owned {
    cursor: pointer;
}

.album-sticker-slot.is-owned:hover {
    transform: translateY(-6px) scale(1.02);
    filter: drop-shadow(0 16px 22px rgba(45, 22, 11, 0.2));
}

.album-sticker-slot.is-owned:hover .album-sticker-frame {
    border-color: rgba(87, 48, 26, 0.88);
}

.album-sticker-slot.is-owned:hover .album-sticker-frame {
    box-shadow:
        0 16px 24px rgba(61, 30, 16, 0.18),
        inset 0 0 0 1px rgba(120, 74, 45, 0.1);
}

.album-sticker-frame {
    position: relative;
    aspect-ratio: 0.72;
    min-height: 0;
    border-radius: 18px;
    border: 3px solid rgba(255, 255, 255, 0.78);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 241, 233, 0.92));
    box-shadow:
        0 14px 22px rgba(25, 15, 10, 0.2),
        inset 0 0 0 2px rgba(255, 255, 255, 0.72);
    overflow: hidden;
}

.album-sticker-frame img,
.album-sticker-placeholder,
.album-sticker-locked-mark {
    width: 100%;
    height: 100%;
    display: block;
}

.album-sticker-frame img {
    object-fit: cover;
    background: rgba(0, 0, 0, 0.04);
}

.album-figurinha-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(38, 22, 18, 0.18), rgba(18, 12, 10, 0.42));
}

.album-figurinha-art>img,
.album-figurinha-art>.album-sticker-placeholder {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.album-figurinha-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 18%, transparent 68%, rgba(0, 0, 0, 0.18) 100%);
    pointer-events: none;
}

.album-figurinha-flag {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.album-figurinha-flag img {
    width: 30px;
    height: 22px;
    display: block;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 8px 12px rgba(23, 12, 8, 0.2);
}

.album-figurinha-ribbon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    min-height: 58px;
    padding: 9px 10px 11px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 239, 230, 0.97));
    border-top: 3px solid var(--figurinha-accent, #7b2f1f);
    box-shadow: 0 -8px 18px rgba(0, 0, 0, 0.08);
}

/* Custom backgrounds for rarity-specific ribbons to align with card rarity colors */
:is(.rarity-comum, .rarity-comum) .album-figurinha-ribbon {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 239, 230, 0.97));
    border-top: 3px solid var(--figurinha-accent, #7b2f1f);
}

:is(.rarity-comum, .rarity-comum) .album-figurinha-ribbon strong {
    color: #3a2318 !important;
}

:is(.rarity-comum, .rarity-comum) .album-figurinha-ribbon span {
    color: #7c6454 !important;
}

:is(.rarity-raro, .rarity-rara) .album-figurinha-ribbon {
    background: linear-gradient(180deg, #f3f4f6 0%, #cbd5e1 50%, #94a3b8 100%);
    border-top: 3px solid #ffffff;
}

:is(.rarity-raro, .rarity-rara) .album-figurinha-ribbon strong {
    color: #0f172a !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
}

:is(.rarity-raro, .rarity-rara) .album-figurinha-ribbon span {
    color: #475569 !important;
}

:is(.rarity-epico, .rarity-epica, .rarity-épico, .rarity-épica, .rarity-prime) .album-figurinha-ribbon {
    background: linear-gradient(180deg, #4c1d95 0%, #2e1065 100%);
    border-top: 3px solid #a855f7;
}

:is(.rarity-epico, .rarity-epica, .rarity-épico, .rarity-épica, .rarity-prime) .album-figurinha-ribbon strong {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:is(.rarity-epico, .rarity-epica, .rarity-épico, .rarity-épica, .rarity-prime) .album-figurinha-ribbon span {
    color: #c084fc !important;
}

:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária, .rarity-legend) .album-figurinha-ribbon {
    background: linear-gradient(180deg, #ffe066 0%, #f5b018 50%, #c48202 100%);
    border-top: 3px solid #fff5b3;
}

:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária, .rarity-legend) .album-figurinha-ribbon strong {
    color: #331e00 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária, .rarity-legend) .album-figurinha-ribbon span {
    color: #593c00 !important;
}

.rarity-alien .album-figurinha-ribbon {
    background: linear-gradient(180deg, #14532d 0%, #064e3b 100%);
    border-top: 3px solid #21d809;
}

.rarity-alien .album-figurinha-ribbon strong {
    color: #51f505 !important;
    text-shadow: 0 1px 3px rgba(81, 255, 12, 1.911);
}

.rarity-alien .album-figurinha-ribbon span {
    color: #4ade80 !important;
}

.album-figurinha-ribbon strong,
.album-figurinha-ribbon span {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
}

.album-figurinha-ribbon strong {
    color: #3a2318;
    font-size: 0.88rem;
    line-height: 1.05;
    font-weight: 900;
    text-transform: uppercase;
}

.album-figurinha-ribbon span {
    color: #7c6454;
    font-size: 0.58rem;
    line-height: 1.05;
    font-weight: 800;
    text-transform: uppercase;
}

/* Proportional scaling for smaller album page grid cards to match the modal's proportions exactly */
.album-sticker-slot .album-figurinha-ribbon {
    min-height: 32px;
    padding: 3px 6px 4px;
    gap: 0px;
    border-top-width: 1.5px;
}

.album-sticker-slot .album-figurinha-ribbon strong {
    font-size: 0.58rem !important;
}

.album-sticker-slot .album-figurinha-ribbon span {
    font-size: 0.4rem !important;
}

.album-sticker-slot .album-figurinha-flag {
    top: 5px;
    right: 5px;
}

.album-sticker-slot .album-figurinha-flag img {
    width: 18px;
    height: 13px;
    border-radius: 3px;
    box-shadow: 0 4px 6px rgba(23, 12, 8, 0.25);
}

.album-sticker-placeholder {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.55), transparent 18%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
    color: var(--team-accent, #7b2f1f);
    font-size: 3.4rem;
    font-weight: 900;
}

.album-sticker-placeholder-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 18px 54px;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.95), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0 24%, transparent 24% 26%, rgba(255, 255, 255, 0.88) 26% 50%, transparent 50% 52%, rgba(255, 255, 255, 0.88) 52% 76%, transparent 76% 78%, rgba(255, 255, 255, 0.88) 78%),
        linear-gradient(180deg, rgba(255, 253, 246, 0.98), rgba(252, 249, 240, 0.96));
    color: rgba(188, 222, 204, 0.92);
    border: 8px solid var(--figurinha-accent, #1a7b4b);
    border-radius: 14px;
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.72),
        inset 0 -14px 0 rgba(0, 0, 0, 0.04);
}

.album-placeholder-number {
    position: relative;
    z-index: 2;
    color: rgba(188, 222, 204, 0.92);
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    line-height: 1;
    font-weight: 900;
    text-shadow: none;
}

.album-placeholder-team {
    position: relative;
    z-index: 2;
    color: var(--figurinha-accent, #1a7b4b);
    font-size: 0.72rem;
    line-height: 1.05;
    font-weight: 900;
    text-transform: uppercase;
}

.album-placeholder-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(23, 12, 8, 0.18);
}

.album-placeholder-flag img {
    width: 24px;
    height: 18px;
    display: block;
    object-fit: cover;
}

.album-pack-summary-media .album-sticker-placeholder-card,
.album-reveal-progress-card .album-sticker-placeholder-card {
    gap: 4px;
    padding: 10px 8px 18px;
    border-width: 4px;
    border-radius: 10px 10px 12px 12px;
}

.album-pack-summary-media .album-sticker-placeholder-card::before,
.album-pack-summary-media .album-sticker-placeholder-card::after,
.album-reveal-progress-card .album-sticker-placeholder-card::before,
.album-reveal-progress-card .album-sticker-placeholder-card::after {
    width: 26px;
    height: 8px;
}

.album-pack-summary-media .album-sticker-placeholder-card::before,
.album-reveal-progress-card .album-sticker-placeholder-card::before {
    top: -4px;
}

.album-pack-summary-media .album-sticker-placeholder-card::after,
.album-reveal-progress-card .album-sticker-placeholder-card::after {
    bottom: -4px;
}

.album-pack-summary-media .album-placeholder-number,
.album-reveal-progress-card .album-placeholder-number {
    font-size: 1.7rem;
}

.album-pack-summary-media .album-placeholder-team,
.album-reveal-progress-card .album-placeholder-team {
    font-size: 0.48rem;
}

.album-pack-summary-media .album-placeholder-flag,
.album-reveal-progress-card .album-placeholder-flag {
    top: 4px;
    right: 4px;
    border-radius: 4px;
}

.album-pack-summary-media .album-placeholder-flag img,
.album-reveal-progress-card .album-placeholder-flag img {
    width: 18px;
    height: 13px;
}

.album-reveal-card .album-placeholder-flag {
    top: 8px;
    right: 8px;
}

.album-reveal-card .album-placeholder-flag img {
    width: 22px;
    height: 16px;
}

.album-sticker-locked-mark {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 18px 18px 62px;
    background:
        radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.68), transparent 28%),
        linear-gradient(180deg, rgba(235, 231, 223, 0.9), rgba(223, 218, 208, 0.92));
    text-align: center;
}

.album-sticker-locked-mark::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 0 44%, rgba(255, 255, 255, 0.28) 44% 47%, transparent 47% 100%),
        radial-gradient(circle at 50% 86%, rgba(255, 255, 255, 0.32), transparent 18%);
    pointer-events: none;
}

.album-sticker-locked-mark::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 239, 230, 0.97));
    border-top: 2px solid rgba(255, 255, 255, 0.72);
}

.album-sticker-locked-mark strong,
.album-sticker-locked-mark span {
    position: relative;
    z-index: 1;
}

.album-sticker-locked-mark strong {
    color: rgba(188, 222, 204, 0.92);
    font-size: clamp(2.1rem, 4vw, 3rem);
    line-height: 1;
    font-weight: 900;
}

.album-sticker-locked-mark span {
    max-width: 100%;
    color: rgba(65, 43, 32, 0.82);
    font-size: 0.82rem;
    line-height: 1.08;
    font-weight: 900;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.album-sticker-slot.is-badge .album-sticker-frame {
    background:
        radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.6), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.92));
}

.album-card-viewer {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: grid;
    place-items: center;
}

.album-card-viewer[hidden] {
    display: none !important;
}

.album-card-viewer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 9, 21, 0.78);
    backdrop-filter: blur(10px);
}

.album-card-viewer-shell {
    position: relative;
    z-index: 1;
    width: min(640px, calc(100vw - 28px));
    /* Increased from 520px */
    padding: 24px;
    border-radius: 24px;
    background:
        linear-gradient(90deg, rgba(5, 10, 20, 0.6), rgba(5, 10, 20, 0.8)),
        var(--card-viewer-bg, linear-gradient(180deg, rgba(26, 40, 74, 0.55), rgba(10, 18, 34, 0.55)));
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.album-card-viewer-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 26%, rgba(255, 255, 255, 0.08), transparent 20rem),
        radial-gradient(circle at 78% 70%, rgba(130, 247, 255, 0.08), transparent 18rem);
    pointer-events: none;
}

.album-card-viewer-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #f4fbff;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}

.album-card-viewer-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.album-card-viewer-content {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 32px;
    /* Increased gap */
    align-items: start;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    /* Slightly larger card */
    justify-items: stretch;
}

.album-card-viewer-media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 20px;
    border: 2px solid rgba(255, 246, 216, 0.84);
    background: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 22px 36px rgba(0, 0, 0, 0.3),
        0 0 28px rgba(240, 198, 82, 0.18);
    justify-self: center;
}

.album-card-viewer-media>img,
.album-card-viewer-media>.album-sticker-placeholder,
.album-card-viewer-media>.album-figurinha-art {
    width: 100%;
    height: 100%;
    display: block;
}

.album-card-viewer-media>img,
.album-card-viewer-media>.album-sticker-placeholder {
    object-fit: cover;
}

.album-card-viewer-media .album-sticker-placeholder {
    font-size: 6rem;
}

.album-card-viewer-info {
    display: grid;
    gap: 16px;
    align-content: start;
    text-align: left;
}

.album-card-viewer-rarity {
    justify-self: start;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff4c7;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.album-card-viewer-kicker {
    color: #fff4c7;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    opacity: 0.8;
}

.album-card-viewer-info h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.5rem, 4.4vw, 2.2rem);
    font-weight: 900;
    line-height: 1.1;
    overflow-wrap: anywhere;
    word-break: normal;
}

.album-card-viewer-meta {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

.album-card-viewer-meta-item {
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.album-card-viewer-meta-label {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.album-card-viewer-team,
.album-card-viewer-value {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.album-card-viewer-quantity {
    color: #4ade80;
    /* Nice green for quantity */
    font-weight: 800;
    font-size: 1.2rem;
}

@media (max-width: 720px) {
    .album-card-viewer-shell {
        width: min(100vw - 20px, 560px);
        padding: 16px;
    }

    .album-card-viewer-content {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .album-card-viewer-media {
        width: min(100%, 240px);
    }

    .album-card-viewer-info {
        gap: 12px;
    }

    .album-card-viewer-info h3 {
        font-size: 1.7rem;
    }
}

.album-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.album-card-grid-small {
    grid-template-columns: repeat(auto-fit, minmax(160px, 190px));
}

.album-card {
    position: relative;
    min-height: 270px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 252, 244, 0.96);
    border: 1px solid rgba(114, 69, 35, 0.1);
}

.album-card-media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.album-card-media>img,
.album-card-media>.album-figurinha-art,
.album-card-media .album-figurinha-art>img,
.album-card-media .album-figurinha-art>.album-sticker-placeholder {
    width: 100%;
    height: 100%;
}

.album-card-media>img,
.album-card-media .album-figurinha-art>img,
.album-card-media .album-figurinha-art>.album-sticker-placeholder {
    object-fit: cover;
    background: rgba(0, 0, 0, 0.04);
}

.album-card-owned {
    box-shadow: 0 14px 24px rgba(68, 33, 12, 0.12);
}

.album-card div:last-child {
    padding: 13px;
}

.album-card span {
    display: block;
    color: #896d5f;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.album-card h3 {
    margin-top: 5px;
    color: #452a1d;
    font-size: 1rem;
    line-height: 1.25;
}

.album-pack-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
}

.album-pack-modal[hidden] {
    display: none !important;
}

.album-pack-modal-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(0, 255, 255, 0.18), transparent 20rem),
        radial-gradient(circle at 20% 80%, rgba(0, 191, 255, 0.18), transparent 20rem),
        rgba(3, 10, 24, 0.82);
    backdrop-filter: blur(18px);
}

.album-pack-modal-shell {
    position: relative;
    z-index: 1;
    width: min(980px, calc(100vw - 40px));
    height: min(88vh, 620px);
    max-height: calc(100vh - 24px);
    padding: 18px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(16, 24, 46, 0.86), rgba(7, 12, 28, 0.9));
    border: 1px solid rgba(120, 235, 255, 0.18);
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.album-pack-modal-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(85, 244, 255, 0.14), transparent 18rem);
    pointer-events: none;
}

.album-pack-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 4;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #dffcff;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
}

.album-pack-modal-close:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.album-pack-modal-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
    padding: 12px 16px;
}

.album-pack-energy {
    position: absolute;
    inset: auto;
    border-radius: 50%;
    filter: blur(12px);
    opacity: 0.6;
    animation: albumEnergyFloat 5.2s linear infinite;
}

.album-pack-energy-a {
    width: 260px;
    height: 260px;
    top: 10%;
    left: 8%;
    background: rgba(0, 225, 255, 0.22);
}

.album-pack-energy-b {
    width: 340px;
    height: 340px;
    right: 6%;
    bottom: 16%;
    background: rgba(0, 120, 255, 0.18);
    animation-duration: 6.4s;
}

.album-pack-energy-c {
    width: 180px;
    height: 180px;
    top: 18%;
    right: 22%;
    background: rgba(125, 255, 251, 0.24);
    animation-duration: 4.8s;
}

.album-pack-cinematic,
.album-pack-reveal {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.album-pack-cinematic[hidden],
.album-pack-reveal[hidden] {
    display: none !important;
}

.album-pack-cinematic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    min-height: 0;
    height: 100%;
}

.album-pack-modal-kicker {
    margin: 0;
    color: #82f7ff;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.album-pack-cinematic h2,
.album-pack-reveal h2 {
    margin: 0;
    color: #f4feff;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    line-height: 1;
    text-shadow: 0 0 32px rgba(95, 245, 255, 0.28);
    font-weight: 700 !important;
}

.album-pack-modal-copy {
    margin: 0;
    color: rgba(223, 250, 255, 0.82);
    font-size: 0.96rem;
    max-width: 520px;
    min-height: 0;
}

.album-pack-reveal-head .album-pack-modal-copy {
    font-size: 0.88rem !important;
    color: #8faeb4 !important;
    font-family: 'Outfit', 'Inter', sans-serif !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
}

.album-pack-object {
    position: relative;
    width: clamp(170px, 28vh, 240px);
    aspect-ratio: 0.68;
    display: grid;
    place-items: center;
    transform-origin: center;
    margin-top: 2px;
}

.album-pack-object::before,
.album-pack-object::after {
    content: '';
    position: absolute;
    inset: 10% -10%;
    background: radial-gradient(circle, rgba(102, 247, 255, 0.42), transparent 60%);
    opacity: 0.55;
    filter: blur(16px);
}

.album-pack-object::after {
    inset: 18% -26%;
    background: linear-gradient(90deg, transparent, rgba(137, 244, 255, 0.82), transparent);
    opacity: 0.28;
}

.album-pack-object-core {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    box-shadow:
        0 0 0 2px rgba(154, 244, 255, 0.42),
        0 0 42px rgba(74, 240, 255, 0.42),
        0 18px 40px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.album-pack-object-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album-pack-seal {
    position: absolute;
    inset: 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    pointer-events: none;
}

.album-pack-rip {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 6px;
    transform: translateX(-50%) scaleY(0);
    transform-origin: center top;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(121, 248, 255, 0.3), rgba(255, 255, 255, 0.95));
    filter: blur(1px);
    opacity: 0;
    pointer-events: none;
}

.album-pack-modal-stage.is-active .album-pack-object {
    animation: albumPackHover 2.4s ease-in-out infinite;
}

.album-pack-modal-stage.is-zooming .album-pack-object {
    animation: albumPackZoom 0.6s ease forwards;
}

.album-pack-modal-stage.is-shaking .album-pack-object {
    animation: albumPackShake 0.72s linear infinite;
}

.album-pack-modal-stage.is-bursting .album-pack-object {
    animation: albumPackBurst 0.7s ease forwards;
}

.album-pack-modal-stage.is-bursting .album-pack-rip {
    transform: translateX(-50%) scaleY(1);
    opacity: 1;
    transition: transform 0.28s ease, opacity 0.2s ease;
}

.album-pack-modal-stage.is-bursting::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(210, 253, 255, 0.88) 0, rgba(113, 244, 255, 0.28) 22%, transparent 44%);
    animation: albumFlashBurst 0.72s ease forwards;
    pointer-events: none;
}

.album-pack-reveal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-items: center;
    justify-items: center;
    align-content: stretch;
    gap: 12px;
    min-height: 0;
    height: 100%;
}

.album-pack-reveal.is-showing-summary {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: stretch;
    gap: 12px;
    min-height: 0;
    height: 100%;
}

.album-pack-reveal-head {
    text-align: center;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    min-height: 0;
}

.album-pack-reveal.is-showing-summary .album-pack-reveal-head {
    max-width: 760px;
    gap: 6px;
}

.album-pack-reveal.is-showing-summary .album-pack-modal-kicker {
    font-size: 0.78rem;
}

.album-pack-reveal.is-showing-summary h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
}

.album-pack-reveal-stage {
    width: 100%;
    max-width: 320px;
    min-height: 0;
    height: 100%;
    display: grid;
    place-items: center;
    overflow: visible;
    padding-bottom: 8px;
}

.album-pack-reveal.is-showing-summary .album-pack-reveal-stage {
    display: none;
}

.album-pack-reveal-active {
    width: 100%;
    display: grid;
    place-items: center;
}

.album-pack-reveal-progress {
    width: 100%;
    max-width: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
    margin-top: 4px;
}

.album-reveal-progress-card {
    width: 46px;
    height: 58px;
    border-radius: 14px;
    border: 1px solid rgba(106, 236, 255, 0.22);
    background:
        linear-gradient(180deg, rgba(20, 37, 70, 0.9), rgba(5, 16, 36, 0.96));
    color: rgba(217, 252, 255, 0.76);
    font: inherit;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.album-reveal-progress-card.is-revealed {
    background:
        linear-gradient(180deg, rgba(103, 246, 255, 0.34), rgba(47, 119, 255, 0.28)),
        linear-gradient(180deg, rgba(20, 37, 70, 0.9), rgba(5, 16, 36, 0.96));
    color: #f3feff;
    box-shadow:
        0 0 18px rgba(84, 237, 255, 0.24),
        inset 0 0 0 1px rgba(129, 241, 255, 0.18);
}

.album-pack-reveal.is-showing-summary .album-pack-reveal-progress {
    display: none;
}

.album-pack-summary {
    width: 100%;
    max-width: 700px;
    padding: 16px 18px 18px;
    border-radius: 20px;
    background: rgba(8, 18, 40, 0.72);
    border: 1px solid rgba(103, 236, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    margin-top: 2px;
    overflow: auto;
}

.album-pack-reveal.is-showing-summary .album-pack-summary {
    max-width: 980px;
    max-height: 100%;
    padding: 18px 24px;
    border-radius: 24px;
}

.album-pack-summary h3 {
    margin: 0 0 12px;
    color: #f4feff;
    font-size: 1.1rem;
    text-align: center;
}

.album-pack-reveal.is-showing-summary .album-pack-summary h3 {
    margin-bottom: 14px;
    font-size: 1.28rem;
}

.album-pack-summary-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .album-pack-summary-grid {
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .album-pack-summary-grid {
        gap: 8px;
    }
}

.album-pack-reveal.is-showing-summary .album-pack-summary-grid {
    gap: 14px;
}

.album-pack-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(16, 32, 62, 0.72);
    border: 1px solid rgba(103, 236, 255, 0.12);
}

.album-pack-reveal.is-showing-summary .album-pack-summary-card {
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
}

.album-pack-summary-media {
    width: 70px;
    height: 92px;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.album-pack-reveal.is-showing-summary .album-pack-summary-media {
    width: 88px;
    height: 116px;
    border-radius: 14px;
}

.album-pack-summary-media>img,
.album-pack-summary-media>.album-sticker-placeholder,
.album-pack-summary-media>.album-figurinha-art,
.album-pack-summary-media .album-figurinha-art>img,
.album-pack-summary-media .album-figurinha-art>.album-sticker-placeholder {
    width: 100%;
    height: 100%;
}

.album-pack-summary-media>img,
.album-pack-summary-media>.album-sticker-placeholder,
.album-pack-summary-media .album-figurinha-art>img,
.album-pack-summary-media .album-figurinha-art>.album-sticker-placeholder {
    object-fit: cover;
}

.album-pack-summary-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.album-pack-summary-info strong {
    color: #f3feff;
    font-size: 0.98rem;
    line-height: 1.15;
}

.album-pack-reveal.is-showing-summary .album-pack-summary-info strong {
    font-size: 1.12rem;
}

.album-pack-summary-info span {
    color: rgba(201, 244, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.album-pack-reveal.is-showing-summary .album-pack-summary-info span {
    font-size: 0.84rem;
}

.album-pack-summary-status {
    padding: 6px 16px !important;
    border-radius: 6px !important;
    font-style: normal !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border: 1px solid transparent !important;
    display: inline-block !important;
}

.album-pack-reveal.is-showing-summary .album-pack-summary-status {
    padding: 6px 16px !important;
    font-size: 0.75rem !important;
}

.album-pack-summary-status.is-new {
    background: rgba(43, 209, 216, 0.08) !important;
    border: 1px solid rgba(43, 209, 216, 0.3) !important;
    color: #2bd1d8 !important;
    box-shadow: 0 0 10px rgba(43, 209, 216, 0.05) !important;
}

.album-pack-summary-status.is-duplicate {
    background: rgba(184, 134, 11, 0.12) !important;
    border: 1px solid rgba(184, 134, 11, 0.45) !important;
    color: #ffd27a !important;
    box-shadow: 0 0 10px rgba(184, 134, 11, 0.05) !important;
}

.album-reveal-card {
    perspective: 1600px;
    width: min(100%, 214px);
    height: min(100%, 292px);
    min-height: 0;
    aspect-ratio: 0.72;
}

.album-reveal-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
}

.album-reveal-card.is-revealed .album-reveal-card-inner {
    transform: rotateY(180deg);
}

.album-reveal-card.is-visible {
    animation: albumRevealCardEnter 0.42s ease;
}

.album-reveal-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 22px;
    overflow: hidden;
}

.album-reveal-card-back {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 30%, rgba(111, 246, 255, 0.25), transparent 26%),
        linear-gradient(180deg, rgba(20, 37, 70, 0.95), rgba(5, 16, 36, 0.98));
    border: 1px solid rgba(106, 236, 255, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.album-reveal-card-back-core {
    width: 78%;
    height: 78%;
    display: grid;
    place-items: center;
    border-radius: 20px;
    background:
        linear-gradient(160deg, rgba(0, 241, 255, 0.22), rgba(66, 129, 255, 0.18)),
        rgba(255, 255, 255, 0.06);
    color: #d9fcff;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(110, 239, 255, 0.18);
}

.album-reveal-card-back-core span {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.album-reveal-card-back-core strong {
    font-size: 2rem;
}

.album-reveal-card-front {
    transform: rotateY(180deg);
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 241, 233, 0.92));
    border: 3px solid rgba(255, 255, 255, 0.78);
    box-shadow:
        0 14px 22px rgba(25, 15, 10, 0.2),
        inset 0 0 0 2px rgba(255, 255, 255, 0.72);
}

.album-reveal-card-front>.album-figurinha-art {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.album-reveal-card-front .album-sticker-placeholder-card {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
}

.album-reveal-card-media {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(210, 247, 255, 0.88), rgba(179, 227, 255, 0.76));
}

.album-reveal-card-media>img,
.album-reveal-card-media>.album-sticker-placeholder,
.album-reveal-card-media>.album-figurinha-art,
.album-reveal-card-media .album-figurinha-art>img,
.album-reveal-card-media .album-figurinha-art>.album-sticker-placeholder {
    width: 100%;
    height: 100%;
}

.album-reveal-card-media>img,
.album-reveal-card-media>.album-sticker-placeholder,
.album-reveal-card-media .album-figurinha-art>img,
.album-reveal-card-media .album-figurinha-art>.album-sticker-placeholder {
    object-fit: cover;
}

.album-reveal-card-media .album-sticker-placeholder {
    font-size: 5rem;
}

.album-reveal-card-info {
    flex: 0 0 auto;
    padding: 9px 12px 10px;
    display: grid;
    place-items: center;
}

.album-reveal-card-info span {
    display: block;
    color: #3f7a8a;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.album-pack-reveal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 0;
    flex-wrap: wrap;
}

.album-pack-reveal.is-showing-summary .album-pack-reveal-actions {
    margin-top: 0;
}

.album-quantity {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    background: linear-gradient(180deg, #f2d48c 0%, #d6a84e 100%);
    color: #4e3210;
    font-size: 0.9rem;
    font-weight: 800;
    box-shadow: 0 10px 14px rgba(45, 25, 7, 0.14);
    z-index: 10;
}

.rarity-rara,
.rarity-raro {
    border-color: rgba(203, 213, 225, 0.85);
}

/* Base holográfica para todas as cartas especiais */
.album-sticker-slot.is-owned:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-sticker-frame,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-card-media,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-pack-summary-media,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-reveal-card-front,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion).album-card-viewer-media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.album-sticker-slot.is-owned:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-sticker-frame::before,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-card-media::before,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-pack-summary-media::before,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-reveal-card-front::before,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion).album-card-viewer-media::before,
.album-sticker-slot.is-owned:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-sticker-frame::after,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-card-media::after,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-pack-summary-media::after,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-reveal-card-front::after,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion).album-card-viewer-media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: inherit;
    border: 0;
    box-shadow: none;
    transform: translateZ(0);
}

/* Animações e tamanhos holográficos base para ::before (Sweep) */
.album-sticker-slot.is-owned:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-sticker-frame::before,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-card-media::before,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-pack-summary-media::before,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-reveal-card-front::before,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion).album-card-viewer-media::before {
    background-size: 240% 240%;
    mix-blend-mode: screen;
    opacity: 0.34;
    animation: albumRareHoloSweep 8s linear infinite;
}

/* Animações e tamanhos holográficos base para ::after (Lines) */
.album-sticker-slot.is-owned:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-sticker-frame::after,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-card-media::after,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-pack-summary-media::after,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion) .album-reveal-card-front::after,
:is(.rarity-rara, .rarity-raro, .rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien, .rarity-retro-champion).album-card-viewer-media::after {
    background-size: 72px 72px, 100% 100%, 100% 100%;
    mix-blend-mode: screen;
    opacity: 0.22;
    animation: albumRareHoloLines 4.8s linear infinite;
}

/* Gradiente holográfico específico da Rara (Multicolor/Azul) */
.album-sticker-slot.is-owned:is(.rarity-rara, .rarity-raro) .album-sticker-frame::before,
:is(.rarity-rara, .rarity-raro) .album-card-media::before,
:is(.rarity-rara, .rarity-raro) .album-pack-summary-media::before,
:is(.rarity-rara, .rarity-raro) .album-reveal-card-front::before,
:is(.rarity-rara, .rarity-raro).album-card-viewer-media::before {
    background:
        linear-gradient(115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.18) 24%,
            rgba(240, 240, 245, 0.55) 35%,
            rgba(255, 255, 255, 0.68) 45%,
            rgba(220, 225, 235, 0.6) 56%,
            rgba(255, 255, 255, 0.55) 66%,
            rgba(255, 255, 255, 0.16) 76%,
            transparent 100%);
}

.album-sticker-slot.is-owned:is(.rarity-rara, .rarity-raro) .album-sticker-frame::after,
:is(.rarity-rara, .rarity-raro) .album-card-media::after,
:is(.rarity-rara, .rarity-raro) .album-pack-summary-media::after,
:is(.rarity-rara, .rarity-raro) .album-reveal-card-front::after,
:is(.rarity-rara, .rarity-raro).album-card-viewer-media::after {
    background:
        repeating-linear-gradient(28deg,
            rgba(255, 255, 255, 0) 0 8px,
            rgba(255, 255, 255, 0.2) 9px 10px,
            rgba(100, 248, 255, 0.22) 11px 13px,
            rgba(255, 112, 239, 0.16) 14px 17px),
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at 82% 74%, rgba(98, 241, 255, 0.28), transparent 30%);
}

@keyframes albumRareHoloSweep {
    0% {
        background-position: 0% 0%;
        opacity: 0.48;
    }

    100% {
        background-position: 240% 240%;
        opacity: 0.48;
    }
}

@keyframes albumRareHoloLines {
    0% {
        background-position: 0 0, center, center;
    }

    100% {
        background-position: 72px 72px, center, center;
    }
}

/* PRIME HOLOGRAPHIC OVERRIDES (PURPLE/LILAC SWEEPS) */
.album-sticker-slot.is-owned:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-sticker-frame::before,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-card-media::before,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-pack-summary-media::before,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-reveal-card-front::before,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime).album-card-viewer-media::before {
    background: linear-gradient(115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.15) 24%,
            rgba(223, 76, 255, 0.55) 35%,
            rgba(255, 140, 255, 0.6) 45%,
            rgba(168, 85, 247, 0.55) 56%,
            rgba(255, 255, 255, 0.15) 76%,
            transparent 100%);
}

.album-sticker-slot.is-owned:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-sticker-frame::after,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-card-media::after,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-pack-summary-media::after,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-reveal-card-front::after,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime).album-card-viewer-media::after {
    background:
        repeating-linear-gradient(28deg,
            rgba(255, 255, 255, 0) 0 8px,
            rgba(255, 255, 255, 0.18) 9px 10px,
            rgba(223, 76, 255, 0.25) 11px 13px,
            rgba(168, 85, 247, 0.2) 14px 17px),
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.38), transparent 24%),
        radial-gradient(circle at 82% 74%, rgba(223, 76, 255, 0.32), transparent 30%);
}

/* LEGEND HOLOGRAPHIC OVERRIDES (GOLD/AMBER SWEEPS) */
.album-sticker-slot.is-owned:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-retro-champion) .album-sticker-frame::before,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-retro-champion) .album-card-media::before,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-retro-champion) .album-pack-summary-media::before,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-retro-champion) .album-reveal-card-front::before,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-retro-champion).album-card-viewer-media::before {
    background: linear-gradient(115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.18) 24%,
            rgba(255, 215, 0, 0.58) 35%,
            rgba(255, 245, 180, 0.65) 45%,
            rgba(229, 178, 37, 0.58) 56%,
            rgba(255, 255, 255, 0.15) 76%,
            transparent 100%);
}

.album-sticker-slot.is-owned:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-retro-champion) .album-sticker-frame::after,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-retro-champion) .album-card-media::after,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-retro-champion) .album-pack-summary-media::after,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-retro-champion) .album-reveal-card-front::after,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-retro-champion).album-card-viewer-media::after {
    background:
        repeating-linear-gradient(28deg,
            rgba(255, 255, 255, 0) 0 8px,
            rgba(255, 255, 255, 0.2) 9px 10px,
            rgba(255, 215, 0, 0.28) 11px 13px,
            rgba(229, 178, 37, 0.22) 14px 17px),
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at 82% 74%, rgba(255, 204, 0, 0.32), transparent 30%);
}

/* ALIEN HOLOGRAPHIC OVERRIDES (GREEN/MATRIX SWEEPS) */
.album-sticker-slot.is-owned.rarity-alien .album-sticker-frame::before,
.rarity-alien .album-card-media::before,
.rarity-alien .album-pack-summary-media::before,
.rarity-alien .album-reveal-card-front::before,
.rarity-alien.album-card-viewer-media::before {
    background: linear-gradient(115deg,
            transparent 0%,
            rgba(255, 255, 255, 0.18) 24%,
            rgba(0, 255, 102, 0.58) 35%,
            rgba(200, 255, 220, 0.65) 45%,
            rgba(34, 197, 94, 0.58) 56%,
            rgba(255, 255, 255, 0.15) 76%,
            transparent 100%) !important;
}

.album-sticker-slot.is-owned.rarity-alien .album-sticker-frame::after,
.rarity-alien .album-card-media::after,
.rarity-alien .album-pack-summary-media::after,
.rarity-alien .album-reveal-card-front::after,
.rarity-alien.album-card-viewer-media::after {
    background:
        repeating-linear-gradient(28deg,
            rgba(255, 255, 255, 0) 0 8px,
            rgba(255, 255, 255, 0.2) 9px 10px,
            rgba(0, 255, 102, 0.28) 11px 13px,
            rgba(34, 197, 94, 0.22) 14px 17px),
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at 82% 74%, rgba(0, 255, 102, 0.32), transparent 30%) !important;
}

.rarity-alien {
    border-color: rgba(74, 222, 128, 0.6);
}

.rarity-epica,
.rarity-épica,
.rarity-prime {
    border-color: rgba(180, 105, 231, 0.6);
}

.rarity-lendaria,
.rarity-lendária,
.rarity-legend {
    border-color: rgba(215, 169, 57, 0.7);
}

/* Correção de borda e efeito de glow no hover personalizado por raridade */
.album-sticker-slot.is-owned:is(.rarity-rara, .rarity-raro) .album-sticker-frame {
    border-color: rgba(226, 232, 240, 0.9) !important;
}

.album-sticker-slot.is-owned:is(.rarity-rara, .rarity-raro):hover .album-sticker-frame {
    border-color: #ffffff !important;
    box-shadow: 0 16px 24px rgba(226, 232, 240, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

.album-sticker-slot.is-owned:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-sticker-frame {
    border-color: rgba(180, 105, 231, 0.85) !important;
}

.album-sticker-slot.is-owned:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime):hover .album-sticker-frame {
    border-color: rgba(223, 76, 255, 0.95) !important;
    box-shadow: 0 16px 24px rgba(180, 105, 231, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

.album-sticker-slot.is-owned:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-sticker-frame {
    border-color: transparent !important;
}

.album-sticker-slot.is-owned:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend):hover .album-sticker-frame {
    border-color: transparent !important;
    box-shadow: 0 16px 24px rgba(229, 178, 37, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

.album-sticker-slot.is-owned.rarity-alien .album-sticker-frame {
    border-color: rgba(74, 222, 128, 0.85) !important;
    animation: alienRadioactiveGlow 2.5s infinite ease-in-out !important;
}

/* ==========================================
   STYLING FOR RETRO & RETRO-GOLD RARITIES
   ========================================== */
.rarity-retro {
    border-color: rgba(196, 134, 76, 0.6);
}

.rarity-retro-champion {
    border-color: rgba(234, 179, 8, 0.7);
}

/* Card Slot Borders for Retro */
.album-sticker-slot.is-owned.rarity-retro .album-sticker-frame {
    border-color: rgba(196, 134, 76, 0.8) !important;
}

.album-sticker-slot.is-owned.rarity-retro:hover .album-sticker-frame {
    border-color: rgba(235, 172, 108, 0.95) !important;
    box-shadow: 0 16px 24px rgba(196, 134, 76, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

/* Card Slot Borders for Retro Gold */
.album-sticker-slot.is-owned.rarity-retro-champion .album-sticker-frame {
    border-color: #ffd700 !important;
}

.album-sticker-slot.is-owned.rarity-retro-champion:hover .album-sticker-frame {
    border-color: #ffd700 !important;
    box-shadow: 0 16px 24px rgba(255, 215, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

/* Modals & Viewer shadows for Retro */
.album-card-viewer-media.rarity-retro {
    border-color: rgba(196, 134, 76, 0.8) !important;
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.3), 0 0 28px rgba(196, 134, 76, 0.25) !important;
}

.album-card-viewer-media.rarity-retro-champion {
    border-color: #ffd700 !important;
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.3), 0 0 35px rgba(255, 215, 0, 0.38) !important;
}

/* Pack opening reveal front border styles for Retro */
:is(.rarity-retro) .album-reveal-card-front {
    border-color: rgba(196, 134, 76, 0.8) !important;
}

:is(.rarity-retro-champion) .album-reveal-card-front {
    border-color: #ffd700 !important;
}

:is(.rarity-retro) .album-reveal-card-info {
    background: linear-gradient(135deg, #3d2319 0%, #1c0e09 100%) !important;
    border-top: 1px solid rgba(196, 134, 76, 0.3) !important;
}

:is(.rarity-retro-champion) .album-reveal-card-info {
    background: linear-gradient(135deg, #451a03 0%, #1c0e09 100%) !important;
    border-top: 1px solid rgba(234, 179, 8, 0.4) !important;
}

.album-card-viewer-rarity.rarity-retro {
    background: rgba(196, 134, 76, 0.15) !important;
    color: #e3a876 !important;
    border: 1px solid rgba(196, 134, 76, 0.3) !important;
}

.album-card-viewer-rarity.rarity-retro-champion {
    background: rgba(234, 179, 8, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(234, 179, 8, 0.4) !important;
}



/* Customizações de bordas e shadows das modais por raridade */
.album-card-viewer-media:is(.rarity-rara, .rarity-raro) {
    border-color: rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.3), 0 0 28px rgba(226, 232, 240, 0.28) !important;
}

.album-card-viewer-media:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) {
    border-color: rgba(180, 105, 231, 0.85) !important;
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.3), 0 0 28px rgba(180, 105, 231, 0.28) !important;
}

.album-card-viewer-media:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) {
    border-color: transparent !important;
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.3), 0 0 28px rgba(229, 178, 37, 0.15) !important;
}

.album-card-viewer-media.rarity-alien {
    border-color: rgba(74, 222, 128, 0.85) !important;
    animation: alienRadioactiveGlow 2.5s infinite ease-in-out !important;
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.3), 0 0 45px rgba(0, 255, 102, 0.5) !important;
}

:is(.rarity-rara, .rarity-raro) .album-reveal-card-front {
    border-color: rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 18px 48px rgba(226, 232, 240, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-reveal-card-front {
    border-color: rgba(180, 105, 231, 0.85) !important;
    box-shadow: 0 18px 48px rgba(180, 105, 231, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-reveal-card-front {
    border-color: transparent !important;
    box-shadow: 0 18px 48px rgba(229, 178, 37, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

.rarity-alien .album-reveal-card-front {
    border-color: rgba(74, 222, 128, 0.85) !important;
    animation: alienRadioactiveGlow 2.5s infinite ease-in-out !important;
    box-shadow: 0 18px 48px rgba(74, 222, 128, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

/* Efeito de tempestade de raios Alien (Lightning Storm Overlay) */
.rarity-alien .album-figurinha-art::after,
.rarity-alien .album-card-viewer-media::after,
.rarity-alien .album-reveal-card-front::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg,
            transparent 43%,
            rgba(255, 255, 255, 0.95) 45%,
            rgba(0, 255, 102, 0.98) 48%,
            rgba(255, 255, 255, 1) 50%,
            rgba(0, 255, 102, 0.98) 52%,
            rgba(167, 255, 220, 0.95) 55%,
            transparent 57%);
    background-size: 250% 250%;
    mix-blend-mode: screen;
    animation: alienLightningStorm 3.2s infinite steps(1) !important;
    opacity: 0;
}

@keyframes alienRadioactiveGlow {

    0%,
    100% {
        border-color: rgba(74, 222, 128, 0.85) !important;
        box-shadow:
            0 8px 24px rgba(0, 255, 102, 0.35),
            0 0 46px rgba(0, 255, 102, 0.2),
            inset 0 0 12px rgba(167, 255, 220, 0.2) !important;
    }

    50% {
        border-color: rgba(0, 255, 102, 1) !important;
        box-shadow:
            0 16px 45px rgba(0, 255, 102, 0.9),
            0 0 35px rgba(0, 255, 102, 0.6),
            inset 0 0 22px rgba(167, 255, 220, 0.4) !important;
    }
}

@keyframes alienLightningStorm {

    0%,
    90%,
    94%,
    98%,
    100% {
        opacity: 0;
        background-position: 0% 0%;
        filter: hue-rotate(0deg) brightness(1);
    }

    91% {
        opacity: 0.95;
        background-position: 30% 10%;
        filter: hue-rotate(15deg) brightness(2) drop-shadow(0 0 20px #00ff66);
    }

    92% {
        opacity: 0.4;
        background-position: 10% 40%;
        filter: hue-rotate(-10deg) brightness(1.4);
    }

    93% {
        opacity: 0.98;
        background-position: 80% 60%;
        filter: hue-rotate(20deg) brightness(2.4) drop-shadow(0 0 30px #00ff66);
    }

    95% {
        opacity: 0.15;
        background-position: 50% 50%;
    }

    96% {
        opacity: 0.9;
        background-position: -20% 90%;
        filter: hue-rotate(-5deg) brightness(1.8) drop-shadow(0 0 25px #00ff66);
    }

    97% {
        opacity: 0.25;
        background-position: 10% 20%;
    }
}

/* Customizações do rótulo e barra de informações por raridade na revelação */
:is(.rarity-rara, .rarity-raro) .album-reveal-card-info {
    background: linear-gradient(180deg, #f3f4f6 0%, #cbd5e1 100%) !important;
    border-top: 2px solid rgba(226, 232, 240, 0.9) !important;
}

:is(.rarity-rara, .rarity-raro) .album-reveal-card-info span {
    color: #475569 !important;
}

:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-reveal-card-info {
    background: linear-gradient(180deg, #4c1d95 0%, #2e1065 100%) !important;
    border-top: 2px solid rgba(180, 105, 231, 0.8) !important;
}

:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-reveal-card-info span {
    color: #c084fc !important;
}

:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-reveal-card-info {
    background: linear-gradient(180deg, #ffe066 0%, #f5b018 50%, #c48202 100%) !important;
    border-top: 2px solid rgba(229, 178, 37, 0.9) !important;
}

:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-reveal-card-info span {
    color: #473000 !important;
}

.rarity-alien .album-reveal-card-info {
    background: linear-gradient(180deg, #14532d 0%, #064e3b 100%) !important;
    border-top: 2px solid rgba(30, 230, 3, 0.2) !important;
}

.rarity-alien .album-reveal-card-info span {
    color: #4eee04 !important;
}

/* Emblemas de raridade da modal de detalhes */
.album-card-viewer-rarity.rarity-comum {
    background: rgba(74, 57, 35, 0.58) !important;
    color: #fff4c7 !important;
}

.album-card-viewer-rarity:is(.rarity-rara, .rarity-raro) {
    background: linear-gradient(180deg, #f3f4f6 0%, #cbd5e1 100%) !important;
    color: #0f172a !important;
    border: 1px solid #94a3b8 !important;
}

.album-card-viewer-rarity:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) {
    background: linear-gradient(180deg, #4c1d95 0%, #2e1065 100%) !important;
    color: #c084fc !important;
    border: 1px solid #a855f7 !important;
}

.album-card-viewer-rarity:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) {
    background: linear-gradient(180deg, #ffe066 0%, #f5b018 50%, #c48202 100%) !important;
    color: #331e00 !important;
    border: 1px solid #fff5b3 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

.album-card-viewer-rarity.rarity-alien {
    background: linear-gradient(180deg, #14532d 0%, #064e3b 100%) !important;
    color: #4ade80 !important;
    border: 1px solid #4ade80 !important;
}

@keyframes albumPageTurnForward {
    0% {
        transform: rotateY(0deg) translateX(0);
        filter: drop-shadow(0 40px 80px rgba(41, 10, 10, 0.28));
    }

    49% {
        transform: rotateY(-18deg) translateX(10px);
        filter: drop-shadow(10px 40px 84px rgba(41, 10, 10, 0.34));
    }

    50% {
        transform: rotateY(18deg) translateX(-10px);
    }

    100% {
        transform: rotateY(0deg) translateX(0);
        filter: drop-shadow(0 40px 80px rgba(41, 10, 10, 0.28));
    }
}

@keyframes albumPageTurnBackward {
    0% {
        transform: rotateY(0deg) translateX(0);
        filter: drop-shadow(0 40px 80px rgba(41, 10, 10, 0.28));
    }

    49% {
        transform: rotateY(18deg) translateX(-10px);
        filter: drop-shadow(-10px 40px 84px rgba(41, 10, 10, 0.34));
    }

    50% {
        transform: rotateY(-18deg) translateX(10px);
    }

    100% {
        transform: rotateY(0deg) translateX(0);
        filter: drop-shadow(0 40px 80px rgba(41, 10, 10, 0.28));
    }
}

@keyframes albumEnergyFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(18px, -16px, 0) scale(1.08);
    }
}

@keyframes albumPackHover {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.015);
    }
}

@keyframes albumPackZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

@keyframes albumPackShake {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1.08);
    }

    20% {
        transform: translate(-3px, 2px) rotate(-1deg) scale(1.08);
    }

    40% {
        transform: translate(3px, -2px) rotate(1deg) scale(1.08);
    }

    60% {
        transform: translate(-2px, -1px) rotate(-1deg) scale(1.08);
    }

    80% {
        transform: translate(2px, 2px) rotate(1deg) scale(1.08);
    }

    100% {
        transform: translate(0, 0) rotate(0deg) scale(1.08);
    }
}

@keyframes albumPackBurst {
    0% {
        transform: scale(1.08);
        filter: brightness(1);
    }

    100% {
        transform: scale(1.18);
        filter: brightness(1.4);
        opacity: 0;
    }
}

@keyframes albumFlashBurst {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes albumRevealCardEnter {
    0% {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 980px) {
    .album-header {
        height: auto;
        min-height: 70px;
        padding: 10px 16px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .album-header-center {
        position: static;
        transform: none;
        order: 3;
        width: 100%;
        flex-wrap: wrap;
    }

    .album-dashboard-strip {
        grid-template-columns: 1fr;
    }

    .album-book-shell {
        padding: 0 50px;
    }

    .album-pack-modal-shell {
        width: min(960px, calc(100vw - 28px));
        height: min(88vh, 600px);
        padding: 18px;
    }

    .album-pack-summary-grid {
        gap: 8px;
    }

    .album-pack-reveal.is-showing-summary .album-pack-summary {
        max-width: 640px;
    }

    .album-pack-reveal.is-showing-summary .album-pack-summary-media {
        width: 88px;
        height: 116px;
    }

    .album-page-pill {
        justify-content: center;
        flex-wrap: wrap;
    }

    .album-page-select {
        min-width: min(320px, 100%);
        width: 100%;
    }

    .album-book-page,
    .album-book-stage,
    .album-cover-spread,
    .album-cover-spread img {
        min-height: 760px;
    }

    .album-spread {
        min-height: 760px;
        padding: 20px 20px 22px;
    }

    .album-page-hero {
        max-width: 100%;
    }

    .album-spread-top {
        flex-direction: column;
        align-items: stretch;
    }

    .album-spread-stage {
        min-height: 1220px;
    }

    .album-sticker-grid {
        inset: 88px 16px 36px;
    }

    .album-sticker-grid {
        grid-template-columns: repeat(3, minmax(132px, 176px));
        gap: 28px 30px;
    }
}

@media (max-width: 720px) {
    .album-panel {
        padding: 24px;
    }

    .album-header {
        padding: 10px 16px;
    }

    .album-header-center {
        gap: 10px;
    }

    .album-pack-panel,
    .album-section-title {
        align-items: stretch;
        flex-direction: column;
    }

    .album-pack-panel-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .album-book-shell {
        padding: 0 44px;
    }

    .album-progress-summary {
        grid-template-columns: 1fr;
    }

    .album-pack-panel .album-button {
        width: 100%;
    }

    .album-nav-button {
        width: 44px;
        height: 44px;
        font-size: 1.8rem;
    }

    .album-pack-modal-shell {
        width: min(100vw - 18px, 720px);
        height: min(90vh, 580px);
        min-height: 0;
        padding: 14px;
    }

    .album-pack-modal-stage {
        height: 100%;
        min-height: 0;
        padding: 8px 0;
    }

    .album-pack-cinematic h2,
    .album-pack-reveal h2 {
        font-size: clamp(1.8rem, 8vw, 2.6rem);
    }

    .album-pack-object {
        width: min(200px, 30vh, 58vw);
        margin-top: 4px;
    }

    .album-pack-reveal-stage {
        max-width: 320px;
        min-height: 0;
        height: 100%;
    }

    .album-reveal-card {
        width: min(100%, 204px);
        height: min(100%, 282px);
        min-height: 0;
    }

    .album-pack-reveal-progress {
        max-width: 320px;
        gap: 10px;
    }

    .album-reveal-progress-card {
        width: 44px;
        height: 58px;
    }

    .album-pack-summary {
        padding: 14px;
    }

    .album-pack-summary-card {
        gap: 10px;
    }

    .album-pack-summary-media {
        width: 58px;
        height: 78px;
    }

    .album-pack-reveal.is-showing-summary .album-pack-summary {
        max-width: 100%;
        padding: 16px;
    }

    .album-pack-reveal.is-showing-summary .album-pack-summary-card {
        gap: 10px;
        padding: 12px;
    }

    .album-pack-reveal.is-showing-summary .album-pack-summary-media {
        width: 58px;
        height: 78px;
    }

    .album-pack-reveal.is-showing-summary h2 {
        font-size: 2rem;
    }

    .album-book-page,
    .album-book-stage,
    .album-cover-spread,
    .album-cover-spread img {
        min-height: 920px;
    }

    .album-spread {
        min-height: 920px;
    }

    .album-page-title-wrap h3 {
        font-size: 2rem;
    }

    .album-page-hero {
        gap: 10px;
    }

    .album-spread-stage {
        min-height: 1540px;
    }

    .album-spread-stage-ribbon {
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.3rem;
        padding: 8px 12px;
    }

    .album-sticker-grid {
        inset: 88px 14px 18px;
        grid-template-columns: repeat(2, minmax(120px, 168px));
        justify-content: center;
        gap: 14px;
    }

    .album-sticker-frame {
        min-height: 0;
    }
}


.album-greeting-clickable {
    cursor: pointer;
    transition: color 0.2s ease, text-decoration 0.2s ease, opacity 0.2s ease;
}

.album-greeting-clickable:hover {
    color: #ffd27a;
    text-decoration: underline;
    opacity: 0.9;
}

/* ==========================================================================
   PREMIUM PACK OPENING STYLING UPGRADES
   ========================================================================== */

/* Enhanced 3D and perspective container */
.album-reveal-card {
    perspective: 1600px;
    width: min(100%, 220px) !important;
    height: min(100%, 300px) !important;
    transition: filter 0.4s ease;
}

.album-reveal-card-inner {
    border-radius: 24px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(103, 236, 255, 0.05);
}

.album-reveal-card-front {
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #e3f8ff 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.6),
        0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

/* Base holographic dynamic light overlay */
.album-reveal-card-front::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0.35) 55%,
            rgba(255, 255, 255, 0) 70%);
    background-size: 250% 250%;
    background-position: -120% -120%;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: background-image 0.1s ease;
}

/* Automatic sweep animation on initial flip/reveal */
.album-reveal-card.is-revealed .album-reveal-card-front::after {
    animation: holographicShineSweep 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes holographicShineSweep {
    0% {
        background-position: -150% -150%;
    }

    100% {
        background-position: 150% 150%;
    }
}

/* Interactive Cursor Lighting on Hover */
.album-reveal-card.is-revealed:hover .album-reveal-card-front::after {
    animation: none !important;
    background: radial-gradient(circle at var(--shimmer-x, 50%) var(--shimmer-y, 50%),
            rgba(255, 255, 255, 0.48) 0%,
            rgba(255, 255, 255, 0.12) 35%,
            rgba(255, 255, 255, 0) 65%) !important;
}

/* Rarity-specific Styling, Gradients, and Auras */

/* COMUM (Common) */
.album-reveal-card:is(.rarity-comum, .rarity-comum) {
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.35),
        0 0 15px rgba(255, 255, 255, 0.08) !important;
}

.album-reveal-card:is(.rarity-comum, .rarity-comum) .album-reveal-card-front {
    border: 2px solid rgba(220, 225, 230, 0.75) !important;
}

/* RARO (Rare) */
.album-reveal-card:is(.rarity-raro, .rarity-rara) {
    animation: rarityRarePulse 3.5s ease-in-out infinite alternate !important;
}

.album-reveal-card:is(.rarity-raro, .rarity-rara) .album-reveal-card-front {
    border: 2px solid rgba(0, 204, 255, 0.95) !important;
    box-shadow:
        inset 0 0 12px rgba(0, 204, 255, 0.25),
        0 0 25px rgba(0, 204, 255, 0.25) !important;
}

.album-reveal-card:is(.rarity-raro, .rarity-rara) .album-reveal-card-info span {
    color: #00d2ff !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5) !important;
    font-weight: 800 !important;
}

@keyframes rarityRarePulse {
    0% {
        filter: drop-shadow(0 0 10px rgba(0, 191, 255, 0.45));
    }

    100% {
        filter: drop-shadow(0 0 24px rgba(0, 191, 255, 0.9));
    }
}

/* LENDÁRIO (Legendary) */
.album-reveal-card:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária, .rarity-legend) {
    animation: rarityLegendaryPulse 2.8s ease-in-out infinite alternate !important;
}

.album-reveal-card:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária, .rarity-legend) .album-reveal-card-front {
    border: 2.5px solid rgba(255, 204, 0, 1) !important;
    box-shadow:
        inset 0 0 16px rgba(255, 204, 0, 0.35),
        0 0 35px rgba(255, 204, 0, 0.35) !important;
}

.album-reveal-card:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária, .rarity-legend) .album-reveal-card-info span {
    color: #ffc400 !important;
    text-shadow: 0 0 12px rgba(255, 196, 0, 0.7) !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
}

@keyframes rarityLegendaryPulse {
    0% {
        filter: drop-shadow(0 0 12px rgba(255, 179, 0, 0.5));
        transform: scale(1.0);
    }

    100% {
        filter: drop-shadow(0 0 32px rgba(255, 215, 0, 1));
        transform: scale(1.025);
    }
}

/* Epico (Epic) Support */
.album-reveal-card:is(.rarity-epico, .rarity-epica, .rarity-épico, .rarity-épica, .rarity-prime) {
    animation: rarityEpicPulse 3.2s ease-in-out infinite alternate !important;
}

.album-reveal-card:is(.rarity-epico, .rarity-epica, .rarity-épico, .rarity-épica, .rarity-prime) .album-reveal-card-front {
    border: 2.2px solid rgba(223, 76, 255, 0.95) !important;
    box-shadow:
        inset 0 0 14px rgba(223, 76, 255, 0.3),
        0 0 28px rgba(223, 76, 255, 0.3) !important;
}

.album-reveal-card:is(.rarity-epico, .rarity-epica, .rarity-épico, .rarity-épica, .rarity-prime) .album-reveal-card-info span {
    color: #e54cff !important;
    text-shadow: 0 0 10px rgba(229, 76, 255, 0.6) !important;
    font-weight: 850 !important;
}

@keyframes rarityEpicPulse {
    0% {
        filter: drop-shadow(0 0 10px rgba(223, 76, 255, 0.45));
    }

    100% {
        filter: drop-shadow(0 0 26px rgba(223, 76, 255, 0.85));
    }
}

/* Staggered Fade-In Cascade Animation for Pack Summary Cards */
.album-pack-summary-card {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
    animation: summaryCardEntrance 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* Generate staggered delays for up to 6 cards */
.album-pack-summary-card:nth-child(1) {
    animation-delay: 0.1s !important;
}

.album-pack-summary-card:nth-child(2) {
    animation-delay: 0.25s !important;
}

.album-pack-summary-card:nth-child(3) {
    animation-delay: 0.4s !important;
}

.album-pack-summary-card:nth-child(4) {
    animation-delay: 0.55s !important;
}

.album-pack-summary-card:nth-child(5) {
    animation-delay: 0.7s !important;
}

.album-pack-summary-card:nth-child(6) {
    animation-delay: 0.85s !important;
}

@keyframes summaryCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Summary Hover Glow States */
.album-pack-summary-card {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.album-pack-summary-card:hover {
    transform: translateY(-6px) scale(1.03) !important;
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(103, 236, 255, 0.08) !important;
    border-color: rgba(103, 236, 255, 0.35) !important;
}

.album-pack-summary-card:is(.rarity-raro, .rarity-rara):hover {
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(0, 191, 255, 0.35) !important;
    border-color: rgba(0, 204, 255, 0.7) !important;
}

.album-pack-summary-card:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária):hover {
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(255, 215, 0, 0.45) !important;
    border-color: rgba(255, 204, 0, 0.7) !important;
}

/* Beautiful custom statuses for the Summary */
.album-pack-summary-status {
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.2s ease !important;
}

.album-pack-summary-status.is-new {
    background: linear-gradient(135deg, rgba(63, 196, 122, 0.28) 0%, rgba(35, 162, 92, 0.35) 100%) !important;
    color: #a7ffd1 !important;
    border: 1px solid rgba(143, 240, 181, 0.35) !important;
    z-index: 5;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.35) 45%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0.35) 55%,
            rgba(255, 255, 255, 0) 70%);
    background-size: 250% 250%;
    background-position: -120% -120%;
    pointer-events: none;
    transition: background-image 0.1s ease;
}

/* Automatic sweep animation on initial flip/reveal */
.album-reveal-card.is-revealed .album-reveal-card-front::after {
    animation: holographicShineSweep 1.6s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes holographicShineSweep {
    0% {
        background-position: -150% -150%;
    }

    100% {
        background-position: 150% 150%;
    }
}

/* Interactive Cursor Lighting on Hover */
.album-reveal-card.is-revealed:hover .album-reveal-card-front::after {
    animation: none !important;
    background: radial-gradient(circle at var(--shimmer-x, 50%) var(--shimmer-y, 50%),
            rgba(255, 255, 255, 0.48) 0%,
            rgba(255, 255, 255, 0.12) 35%,
            rgba(255, 255, 255, 0) 65%) !important;
}

/* Rarity-specific Styling, Gradients, and Auras */

/* COMUM (Common) */
.album-reveal-card:is(.rarity-comum, .rarity-comum) {
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.35),
        0 0 15px rgba(255, 255, 255, 0.08) !important;
}

.album-reveal-card:is(.rarity-comum, .rarity-comum) .album-reveal-card-front {
    border: 2px solid rgba(220, 225, 230, 0.75) !important;
}

/* RARO (Rare) */
.album-reveal-card:is(.rarity-raro, .rarity-rara) {
    animation: rarityRarePulse 3.5s ease-in-out infinite alternate !important;
}

.album-reveal-card:is(.rarity-raro, .rarity-rara) .album-reveal-card-front {
    border: 2px solid rgba(0, 204, 255, 0.95) !important;
    box-shadow:
        inset 0 0 12px rgba(0, 204, 255, 0.25),
        0 0 25px rgba(0, 204, 255, 0.25) !important;
}

.album-reveal-card:is(.rarity-raro, .rarity-rara) .album-reveal-card-info span {
    color: #00d2ff !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.5) !important;
    font-weight: 800 !important;
}

@keyframes rarityRarePulse {
    0% {
        filter: drop-shadow(0 0 10px rgba(0, 191, 255, 0.45));
    }

    100% {
        filter: drop-shadow(0 0 24px rgba(0, 191, 255, 0.9));
    }
}

/* LENDÁRIO (Legendary) */
.album-reveal-card:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária) {
    animation: rarityLegendaryPulse 2.8s ease-in-out infinite alternate !important;
}

.album-reveal-card:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária) .album-reveal-card-front {
    border: 2.5px solid rgba(255, 204, 0, 1) !important;
    box-shadow:
        inset 0 0 16px rgba(255, 204, 0, 0.35),
        0 0 35px rgba(255, 204, 0, 0.35) !important;
}

.album-reveal-card:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária) .album-reveal-card-info span {
    color: #ffc400 !important;
    text-shadow: 0 0 12px rgba(255, 196, 0, 0.7) !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
}

@keyframes rarityLegendaryPulse {
    0% {
        filter: drop-shadow(0 0 12px rgba(255, 179, 0, 0.5));
        transform: scale(1.0);
    }

    100% {
        filter: drop-shadow(0 0 32px rgba(255, 215, 0, 1));
        transform: scale(1.025);
    }
}

/* Epico (Epic) Support */
.album-reveal-card:is(.rarity-epico, .rarity-epica, .rarity-épico, .rarity-épica) {
    animation: rarityEpicPulse 3.2s ease-in-out infinite alternate !important;
}

.album-reveal-card:is(.rarity-epico, .rarity-epica, .rarity-épico, .rarity-épica) .album-reveal-card-front {
    border: 2.2px solid rgba(223, 76, 255, 0.95) !important;
    box-shadow:
        inset 0 0 14px rgba(223, 76, 255, 0.3),
        0 0 28px rgba(223, 76, 255, 0.3) !important;
}

.album-reveal-card:is(.rarity-epico, .rarity-epica, .rarity-épico, .rarity-épica) .album-reveal-card-info span {
    color: #e54cff !important;
    text-shadow: 0 0 10px rgba(229, 76, 255, 0.6) !important;
    font-weight: 850 !important;
}

@keyframes rarityEpicPulse {
    0% {
        filter: drop-shadow(0 0 10px rgba(223, 76, 255, 0.45));
    }

    100% {
        filter: drop-shadow(0 0 26px rgba(223, 76, 255, 0.85));
    }
}

/* Staggered Fade-In Cascade Animation for Pack Summary Cards */
.album-pack-summary-card {
    opacity: 0;
    transform: translateY(24px) scale(0.95);
    animation: summaryCardEntrance 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* Generate staggered delays for up to 6 cards */
.album-pack-summary-card:nth-child(1) {
    animation-delay: 0.1s !important;
}

.album-pack-summary-card:nth-child(2) {
    animation-delay: 0.25s !important;
}

.album-pack-summary-card:nth-child(3) {
    animation-delay: 0.4s !important;
}

.album-pack-summary-card:nth-child(4) {
    animation-delay: 0.55s !important;
}

.album-pack-summary-card:nth-child(5) {
    animation-delay: 0.7s !important;
}

.album-pack-summary-card:nth-child(6) {
    animation-delay: 0.85s !important;
}

@keyframes summaryCardEntrance {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Summary Hover Glow States */
.album-pack-summary-card {
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.album-pack-summary-card:hover {
    transform: translateY(-6px) scale(1.03) !important;
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(103, 236, 255, 0.08) !important;
    border-color: rgba(103, 236, 255, 0.35) !important;
}

.album-pack-summary-card:is(.rarity-raro, .rarity-rara):hover {
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(0, 191, 255, 0.35) !important;
    border-color: rgba(0, 204, 255, 0.7) !important;
}

.album-pack-summary-card:is(.rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária):hover {
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.45),
        0 0 30px rgba(255, 215, 0, 0.45) !important;
    border-color: rgba(255, 204, 0, 0.7) !important;
}

/* Beautiful custom statuses for the Summary */
.album-pack-summary-status {
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    transition: transform 0.2s ease !important;
}

.album-pack-summary-status.is-new {
    background: linear-gradient(135deg, rgba(63, 196, 122, 0.28) 0%, rgba(35, 162, 92, 0.35) 100%) !important;
    color: #a7ffd1 !important;
    border: 1px solid rgba(143, 240, 181, 0.35) !important;
    box-shadow:
        0 0 10px rgba(63, 196, 122, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.album-pack-summary-status.is-duplicate {
    background: linear-gradient(135deg, rgba(239, 190, 74, 0.24) 0%, rgba(200, 150, 40, 0.28) 100%) !important;
    color: #ffebbc !important;
    border: 1px solid rgba(255, 217, 125, 0.25) !important;
    box-shadow:
        0 0 10px rgba(239, 190, 74, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   AAA CINEMATIC FULLSCREEN & OVERRIDE STYLING
   ========================================================================== */

/* 1. Complete cleanup of floating decorative shapes */
.album-pack-energy,
.album-pack-energy-a,
.album-pack-energy-b,
.album-pack-energy-c {
    display: none !important;
}

.album-pack-modal-backdrop {
    background: radial-gradient(
        circle at center,
        #011A2A 0%,
        #000611 100%
    ) !important;
    backdrop-filter: blur(28px) !important;
}

.album-pack-modal-shell {
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.album-pack-modal-shell::before {
    display: none !important;
}

/* 3. Sleek cyber-minimal close button */
.album-pack-modal-close {
    top: 24px !important;
    right: 28px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e5f8ff !important;
    font-size: 1.5rem !important;
    width: 48px !important;
    height: 48px !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
}

.album-pack-modal-close:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: scale(1.05) !important;
}

/* Intro do pacote */
.album-pack-modal-stage.phase-intro {
    padding: clamp(28px, 6vh, 70px) 24px 40px !important;
}

.album-pack-modal-stage.phase-intro::before {
    content: '';
    position: absolute;
    width: min(580px, 74vw);
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(85, 238, 255, 0.12) 0 16%,
            rgba(35, 125, 180, 0.08) 34%,
            rgba(35, 125, 180, 0.035) 52%,
            transparent 76%);
    filter: blur(18px);
    opacity: 0.58;
    pointer-events: none;
}

.album-pack-modal-stage.phase-intro .album-pack-cinematic {
    max-width: 520px !important;
    gap: 18px !important;
    justify-content: center !important;
    transform: translateY(-8px);
}

.album-pack-modal-stage.phase-intro .album-pack-modal-kicker {
    padding: 6px 12px;
    border: 1px solid rgba(117, 240, 255, 0.28);
    border-radius: 999px;
    background: rgba(20, 38, 68, 0.42);
    color: #8ff5ff;
    box-shadow: 0 0 24px rgba(85, 238, 255, 0.12);
}

.album-pack-modal-stage.phase-intro .album-pack-cinematic > .album-pack-modal-kicker {
    display: none !important;
}

.album-pack-modal-stage.phase-intro .album-pack-cinematic h2 {
    display: none !important;
}

.album-pack-modal-stage.phase-intro .album-pack-cinematic h2 {
    margin: 0 0 24px !important;
    font-size: clamp(2.25rem, 5vw, 4rem) !important;
    letter-spacing: 0 !important;
    text-shadow:
        0 10px 34px rgba(85, 238, 255, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.18);
}

.album-pack-modal-stage.phase-intro .album-pack-object {
    width: clamp(190px, 24vw, 280px) !important;
    margin-top: 0 !important;
    filter: drop-shadow(0 28px 42px rgba(0, 0, 0, 0.42));
}

.album-pack-modal-stage.phase-intro .album-pack-object::before {
    inset: 5% -24% 12%;
    background: radial-gradient(circle, rgba(88, 238, 255, 0.45), rgba(21, 126, 184, 0.16) 38%, transparent 68%);
    opacity: 0.85;
    filter: blur(20px);
}

.album-pack-modal-stage.phase-intro .album-pack-object::after {
    inset: 22% -34%;
    opacity: 0.2;
}

.album-pack-modal-stage.phase-intro .album-pack-object-core {
    border-radius: 22px !important;
    border: 1px solid rgba(218, 252, 255, 0.32);
    box-shadow:
        0 0 0 2px rgba(125, 242, 255, 0.28),
        0 0 44px rgba(74, 240, 255, 0.34),
        0 18px 54px rgba(0, 0, 0, 0.45) !important;
}

.album-pack-modal-stage.phase-intro .album-pack-seal {
    inset: 12px;
    border-color: rgba(255, 255, 255, 0.28);
}

.album-pack-modal-stage.phase-intro .album-pack-modal-copy {
    min-height: 18px;
    color: rgba(219, 250, 255, 0.68);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.album-pack-modal:not([hidden]) .album-pack-modal-backdrop {
    animation: albumPackModalBackdropIn 0.48s ease both;
}

.album-pack-modal:not([hidden]) .album-pack-modal-shell {
    animation: albumPackModalShellIn 0.54s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.album-pack-modal-stage.phase-intro .album-pack-cinematic h2 {
    animation: albumPackIntroTitleIn 0.62s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both;
}

.album-pack-modal-stage.phase-intro.is-active .album-pack-object {
    animation: albumPackIntroObjectIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both,
        albumPackHover 2.4s ease-in-out 0.82s infinite !important;
}

.album-button.is-opening-pack {
    pointer-events: none;
    filter: brightness(1.12);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 0 24px rgba(255, 210, 122, 0.42) !important;
}

@keyframes albumPackModalBackdropIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes albumPackModalShellIn {
    from {
        opacity: 0;
        transform: scale(0.985);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes albumPackIntroTitleIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes albumPackIntroObjectIn {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 4. Elegant Glowing Capsule Indicators (replaces square numbers) */
.album-reveal-progress-card {
    width: 24px !important;
    height: 6px !important;
    border-radius: 999px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.16) !important;
    box-shadow: none !important;
    color: transparent !important;
    overflow: hidden !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    padding: 0 !important;
}

.album-reveal-progress-card span {
    display: none !important;
}

.album-reveal-progress-card.is-revealed {
    width: 36px !important;
    background: #00d2ff !important;
    box-shadow:
        0 0 14px rgba(0, 210, 255, 0.8),
        0 0 4px rgba(0, 210, 255, 0.4) !important;
}

/* 5. AAA Golden Cyber action buttons */
.album-pack-reveal-actions .album-button,
.album-pack-reveal-actions button {
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 14.5px 36px !important;
    border-radius: 999px !important;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, filter 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* Default outline style for reveal and summary buttons */
#album-pack-next-card,
#album-pack-show-summary {
    background: rgba(16, 24, 48, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

#album-pack-next-card:hover:not(:disabled),
#album-pack-show-summary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) scale(1.02) !important;
}

/* Gold style for concluding button */
#album-pack-finish {
    background: linear-gradient(135deg, #ffd27a 0%, #b8860b 100%) !important;
    border: 1px solid rgba(255, 210, 122, 0.4) !important;
    color: #0b1122 !important;
    box-shadow:
        0 0 15px rgba(255, 210, 122, 0.25),
        0 8px 24px rgba(184, 134, 11, 0.25) !important;
}

#album-pack-finish:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffe09e 0%, #cf9b17 100%) !important;
    box-shadow:
        0 0 25px rgba(255, 210, 122, 0.4),
        0 12px 32px rgba(184, 134, 11, 0.4) !important;
    transform: translateY(-2px) scale(1.02) !important;
    filter: brightness(1.1) !important;
}

.album-pack-reveal-actions .album-button:disabled,
.album-pack-reveal-actions button:disabled {
    opacity: 0.3 !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* 6. Translucent Glass Summary Card Container */
.album-pack-summary {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 16px 0 !important;
    position: relative !important;
}

.album-pack-summary::before {
    display: none !important;
}

.album-pack-summary h3 {
    display: none !important;
}

.album-pack-summary h3::before,
.album-pack-summary h3::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    max-width: 80px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 100%);
    box-shadow: 0 0 8px rgba(43, 209, 216, 0.5);
}

.album-pack-reveal.is-showing-summary .album-pack-summary-grid {
    padding: 40px 0;
}

/* 7. Hide duplicate/cluttered text descriptions in summary cards */
.album-pack-summary-info {
    display: none !important;
}

/* 8. Modern clean scale for card visual in summary cards with correct absolute positioning & sizing */
.album-pack-reveal.is-showing-summary .album-pack-summary-media {
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
    width: 156px !important;
    height: 208px !important;
    border-radius: 18px !important;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(0, 214, 255, 0.55) !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Individual card tilt rules matching the fan mockup */
.album-pack-summary-card:nth-child(1) .album-pack-summary-media {
    transform: rotate(-3.5deg) translateY(6px) !important;
}

.album-pack-summary-card:nth-child(2) .album-pack-summary-media {
    transform: translateY(-4px) !important;
}

.album-pack-summary-card:nth-child(3) .album-pack-summary-media {
    transform: rotate(3.5deg) translateY(6px) !important;
}

.album-pack-summary-grid[data-card-count="4"] .album-pack-summary-card:nth-child(1) .album-pack-summary-media {
    transform: rotate(-2.2deg) translateY(5px) !important;
}

.album-pack-summary-grid[data-card-count="4"] .album-pack-summary-card:nth-child(2) .album-pack-summary-media,
.album-pack-summary-grid[data-card-count="4"] .album-pack-summary-card:nth-child(3) .album-pack-summary-media {
    transform: translateY(0) !important;
}

.album-pack-summary-grid[data-card-count="4"] .album-pack-summary-card:nth-child(4) .album-pack-summary-media {
    transform: rotate(2.2deg) translateY(5px) !important;
}

.album-pack-summary-grid[data-card-count="5"] .album-pack-summary-card:nth-child(1) .album-pack-summary-media {
    transform: rotate(-2.2deg) translateY(6px) !important;
}

.album-pack-summary-grid[data-card-count="5"] .album-pack-summary-card:nth-child(2) .album-pack-summary-media,
.album-pack-summary-grid[data-card-count="5"] .album-pack-summary-card:nth-child(3) .album-pack-summary-media,
.album-pack-summary-grid[data-card-count="5"] .album-pack-summary-card:nth-child(4) .album-pack-summary-media {
    transform: translateY(0) !important;
}

.album-pack-summary-grid[data-card-count="5"] .album-pack-summary-card:nth-child(5) .album-pack-summary-media {
    transform: rotate(2.2deg) translateY(6px) !important;
}

/* Proportional scaling and styling overrides for cards rendered inside the package summary */
.album-pack-summary-media .album-figurinha-art {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.album-pack-summary-media .album-figurinha-ribbon {
    min-height: 28px !important;
    padding: 2px 4px 3px !important;
    gap: 0px !important;
    border-top-width: 1.5px !important;
}

.album-pack-summary-media .album-figurinha-ribbon strong {
    font-size: 0.52rem !important;
    line-height: 1.1 !important;
}

.album-pack-summary-media .album-figurinha-ribbon span {
    font-size: 0.36rem !important;
    line-height: 1.1 !important;
}

.album-pack-summary-media .album-figurinha-flag img {
    width: 20px !important;
    height: 14px !important;
    border-radius: 3px !important;
    top: 4px !important;
    right: 4px !important;
}

.album-pack-summary-media .album-sticker-placeholder {
    font-size: 2rem !important;
    border-radius: 18px !important;
}

.album-pack-summary-media .album-placeholder-number {
    font-size: 2.2rem !important;
}

.album-pack-summary-media .album-placeholder-team {
    font-size: 0.65rem !important;
}

.album-pack-summary-card {
    padding: 0 !important;
    gap: 16px !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    outline: none !important;
}

.album-pack-summary-card:hover {
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
}

.album-pack-summary-card:is(.rarity-raro, .rarity-rara, .rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária, .rarity-epica, .rarity-epico, .rarity-pica, .rarity-pico, .rarity-prime):hover {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
}

.album-pack-summary-card:hover .album-pack-summary-media {
    transform: scale(1.08) rotate(0deg) translateY(-8px) !important;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 0 32px rgba(0, 214, 255, 0.8) !important;
    z-index: 100 !important;
}

.album-pack-reveal.is-showing-summary .album-pack-summary-grid {
    gap: 24px !important;
}

/* Overrides para melhor legibilidade das caixas de mensagem no login e outras telas claras */
.album-message-error {
    background: #fee2e2 !important;
    border: 1px solid #fca5a5 !important;
    color: #991b1b !important;
}

.album-message-success {
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #166534 !important;
}

/* ==========================================================================
   INVENTORY BAR STYLES
   ========================================================================== */
.album-inventory-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    /* Deixa clicar através quando invisível */
}

/* Oculta o inventario durante a abertura de pacotes */
.album-modal-open .album-inventory-container {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none !important;
}

.album-inventory-trigger {
    background: linear-gradient(180deg, rgba(20, 10, 10, 0.8), rgba(0, 0, 0, 0.95));
    border: 1px solid rgba(255, 210, 122, 0.4);
    border-bottom: none;
    padding: 8px 24px;
    border-radius: 12px 12px 0 0;
    color: #ffd27a;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.5);
}

.album-inventory-trigger:hover {
    background: linear-gradient(180deg, rgba(40, 20, 20, 0.9), rgba(10, 5, 5, 1));
}

.album-inventory-container.is-pinned .album-inventory-trigger {
    border-color: rgba(255, 210, 122, 0.8) !important;
    box-shadow: 0 -4px 20px rgba(255, 210, 122, 0.25), 0 -4px 15px rgba(0, 0, 0, 0.5) !important;
}

.album-inventory-container.is-pinned .album-inventory-trigger svg {
    transform: none !important;
    /* Keep the pushpin icon upright */
}

.album-inventory-trigger svg {
    transition: transform 0.3s ease;
}

.album-inventory-container.is-open .album-inventory-trigger svg {
    transform: rotate(180deg);
}

.album-inventory-bar {
    width: 100%;
    background: linear-gradient(180deg, rgba(25, 15, 15, 0.95), rgba(10, 5, 5, 1));
    border-top: 1px solid rgba(255, 210, 122, 0.3);
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    pointer-events: auto;
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1), padding 0.4s ease;
    box-shadow: inset 0 20px 20px -20px rgba(0, 0, 0, 0.8);
}

.album-inventory-container.is-open .album-inventory-bar {
    height: 160px;
    padding: 15px 10px;
}

.inventory-nav-btn {
    background: rgba(255, 210, 122, 0.15);
    border: 1px solid rgba(255, 210, 122, 0.4);
    color: #ffd27a;
    font-size: 2rem;
    width: 40px;
    height: 80px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.inventory-nav-btn:hover {
    background: rgba(255, 210, 122, 0.3);
    transform: scale(1.05);
}

.inventory-nav-btn:active {
    transform: scale(0.95);
}

.album-inventory-list {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 10px 15px 10px;
    flex-grow: 1;
    scroll-behavior: smooth;
    scrollbar-width: auto;
    scrollbar-color: rgba(255, 210, 122, 0.4) rgba(0, 0, 0, 0.2);
}

.album-inventory-list::-webkit-scrollbar {
    height: 16px;
}

.album-inventory-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.album-inventory-list[style*="--retro-marker-percent"]::-webkit-scrollbar-track {
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0.25) calc(var(--retro-marker-percent) - 4px),
            rgba(255, 210, 122, 0.35) calc(var(--retro-marker-percent) - 3px),
            #ffd27a calc(var(--retro-marker-percent) - 1.5px),
            #ffd27a calc(var(--retro-marker-percent) + 1.5px),
            rgba(255, 210, 122, 0.35) calc(var(--retro-marker-percent) + 3px),
            rgba(0, 0, 0, 0.25) calc(var(--retro-marker-percent) + 4px),
            rgba(0, 0, 0, 0.25) 100%);
}

.album-inventory-list::-webkit-scrollbar-thumb {
    background: rgba(255, 210, 122, 0.4);
    border-radius: 4px;
}

.album-inventory-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 210, 122, 0.6);
}

.inv-card {
    position: relative;
    width: 80px;
    height: 112px;
    /* Proporção aproximada das cartas */
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    --inv-rarity-color: #ffd27a;
    --inv-rarity-glow: rgba(255, 210, 122, 0.4);
    --inv-rarity-inner: rgba(255, 255, 255, 0.25);
}

.inv-card::before,
.inv-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
}

.inv-card::before {
    z-index: 1;
    background: linear-gradient(130deg, transparent 0 34%, rgba(255, 255, 255, 0.58) 44%, transparent 55% 100%);
    mix-blend-mode: screen;
}

.inv-card::after {
    z-index: 2;
    inset: 3px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.inv-card:is(.rarity-raro, .rarity-rara) {
    --inv-rarity-color: #d9e1ec;
    --inv-rarity-glow: rgba(217, 225, 236, 0.48);
    --inv-rarity-inner: rgba(246, 249, 255, 0.72);
    border-color: var(--inv-rarity-color);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 8px 18px var(--inv-rarity-glow), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.inv-card:is(.rarity-raro, .rarity-rara)::before {
    opacity: 0.26;
}

.inv-card.rarity-prime {
    --inv-rarity-color: #a855f7;
    --inv-rarity-glow: rgba(168, 85, 247, 0.58);
    --inv-rarity-inner: rgba(216, 180, 254, 0.78);
    border-color: var(--inv-rarity-color);
    box-shadow: 0 0 0 1px rgba(216, 180, 254, 0.45), 0 0 18px var(--inv-rarity-glow), 0 4px 10px rgba(0, 0, 0, 0.5);
}

.inv-card.rarity-prime::before,
.inv-card.rarity-prime::after {
    opacity: 0.58;
}

.inv-card.rarity-prime::after {
    border-color: var(--inv-rarity-inner);
}

.inv-card.rarity-legend {
    --inv-rarity-color: #f6c84c;
    --inv-rarity-glow: rgba(246, 200, 76, 0.62);
    --inv-rarity-inner: rgba(255, 232, 142, 0.9);
    border-color: var(--inv-rarity-color);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 20px var(--inv-rarity-glow), 0 4px 10px rgba(0, 0, 0, 0.55);
}

.inv-card.rarity-legend::before,
.inv-card.rarity-legend::after {
    opacity: 0.68;
}

.inv-card.rarity-legend::after {
    border-color: var(--inv-rarity-inner);
}

.inv-card.rarity-alien {
    --inv-rarity-color: #4ade80;
    --inv-rarity-glow: rgba(74, 222, 128, 0.6);
    --inv-rarity-inner: rgba(167, 255, 220, 0.88);
    border-color: var(--inv-rarity-color);
    box-shadow: 0 0 0 1px rgba(167, 255, 220, 0.55), 0 0 22px var(--inv-rarity-glow), 0 4px 10px rgba(0, 0, 0, 0.55);
}

.inv-card.rarity-alien::before {
    opacity: 0.72;
    background:
        radial-gradient(circle at 30% 18%, rgba(130, 255, 205, 0.65), transparent 24%),
        linear-gradient(130deg, transparent 0 32%, rgba(202, 255, 235, 0.66) 44%, transparent 58% 100%);
}

.inv-card.rarity-alien::after {
    opacity: 0.7;
    border-color: var(--inv-rarity-inner);
}

.inv-card:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: var(--inv-rarity-color);
    box-shadow: 0 8px 15px var(--inv-rarity-glow);
    z-index: 2;
}

.inv-card-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e63946;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1a1a1a;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.inv-card-name {
    position: absolute;
    top: 100%;
    left: -20%;
    right: -20%;
    margin-top: 6px;
    text-align: center;
    font-size: 0.6rem;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    pointer-events: none;
    z-index: 10;
}

.inv-card:is(.rarity-prime, .rarity-legend, .rarity-alien):hover {
    filter: saturate(1.18) brightness(1.08);
}

.inv-card.is-locked {
    filter: grayscale(100%) opacity(0.5);
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.1);
}

.inv-card.is-locked:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.inv-card-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Drag and Drop Styles */

.is-dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

body.is-dragging-card .album-sticker-slot.is-locked {
    position: relative;
    cursor: copy;
}

.album-sticker-grid {
    position: absolute;
    inset: 58px 18px 20px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 180px));
    grid-auto-rows: auto;
    justify-content: center;
    align-content: start;
    gap: 24px 32px;
    align-items: start;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    padding: 34px 6px 0 0;
}

.album-sticker-grid::-webkit-scrollbar {
    width: 6px;
}

.album-sticker-grid::-webkit-scrollbar-track {
    background: transparent;
}

.album-sticker-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 99px;
}

.album-sticker-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

body.is-dragging-card .album-sticker-slot.is-locked::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px dashed rgba(255, 210, 122, 0.4);
    border-radius: 8px;
    pointer-events: none;
    z-index: 10;
    transition: all 0.2s ease;
}

.album-sticker-slot.is-drag-hover::after {
    border-color: #ffd27a !important;
    background: rgba(255, 210, 122, 0.1);
    box-shadow: 0 0 15px rgba(255, 210, 122, 0.4);
}

/* Particle Animation */
.paste-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    animation: particle-burst 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes particle-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.inv-card-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    padding: 18px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0 0 4px 4px;
    pointer-events: none;
    line-height: 1.1;
    z-index: 1;
}

.inv-card-meta-name {
    font-size: 8px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.inv-card-meta-team {
    font-size: 6px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    margin-top: 1px;
}

/* ==========================================================================
   VISUAL OVERHAUL: PRIME & LEGEND CARDS
   ========================================================================== */

/* Brilho aumentado nos hologramas Prime, Lendários e Alien */
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-alien) .album-sticker-frame::before,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-alien) .album-card-media::before,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-alien) .album-pack-summary-media::before,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-alien) .album-reveal-card-front::before,
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-alien).album-card-viewer-media::before {
    opacity: 0.58 !important;
}

:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-sticker-frame::before,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-card-media::before,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-pack-summary-media::before,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-reveal-card-front::before,
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend).album-card-viewer-media::before {
    opacity: 0.72 !important;
}

/* Transição suave de transform no hover geral dos frames */
.album-sticker-frame {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Efeito de flutuação e rotação 3D ao passar o mouse nas cartas especiais */
.album-sticker-slot.is-owned:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime, .rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend, .rarity-alien):hover .album-sticker-frame {
    transform: translateY(-8px) scale(1.05) rotate(1.5deg);
    z-index: 10;
}

/* Moldura e Glow Neon */
.album-sticker-slot.is-owned:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-sticker-frame,
.album-pack-summary-card:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-pack-summary-media,
.album-reveal-card:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-reveal-card-front,
.album-card-viewer-media:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) {
    border-color: rgba(223, 76, 255, 0.85) !important;
    box-shadow:
        0 14px 28px rgba(180, 105, 231, 0.25),
        0 0 16px rgba(223, 76, 255, 0.15),
        inset 0 0 12px rgba(100, 248, 255, 0.2) !important;
}

/* Modais e cartas abertas ao passar o mouse */
.album-sticker-slot.is-owned:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime):hover .album-sticker-frame {
    border-color: rgba(100, 248, 255, 0.95) !important;
    box-shadow:
        0 20px 32px rgba(180, 105, 231, 0.35),
        0 0 24px rgba(100, 248, 255, 0.4),
        inset 0 0 18px rgba(223, 76, 255, 0.3) !important;
}

/* Fita / Ribbon das Cartas Prime */
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) .album-figurinha-ribbon {
    background: linear-gradient(135deg, #3b0764 0%, #581c87 50%, #2e0854 100%) !important;
    border-top: 2.5px solid #df4cff !important;
    box-shadow: 0 -2px 10px rgba(223, 76, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Fontes Futuristas e Efeitos de Brilho de Texto (Somente Prime) */
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) :is(.album-figurinha-ribbon strong,
    .album-pack-summary-info strong,
    .album-card-viewer-name,
    .album-card-viewer-rarity) {
    font-family: 'Orbitron', 'Syne', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    color: #ffffff !important;
    text-shadow:
        0 0 4px rgba(223, 76, 255, 0.9),
        0 0 10px rgba(100, 248, 255, 0.5) !important;
}

/* Subtítulos e informações adicionais Prime */
:is(.rarity-epica, .rarity-epico, .rarity-épica, .rarity-épico, .rarity-prime) :is(.album-figurinha-ribbon span,
    .album-pack-summary-info span,
    .album-reveal-card-info span,
    .album-card-viewer-team) {
    font-family: 'Orbitron', 'Syne', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: #82f7ff !important;
    text-shadow: 0 0 3px rgba(100, 248, 255, 0.4) !important;
}


/* --- OVERHAUL CARTAS ALIEN (MATRICIAL/SCI-FI NEON) --- */

/* Moldura e Glow Neon Verde */
.album-sticker-slot.is-owned.rarity-alien .album-sticker-frame,
.album-pack-summary-card.rarity-alien .album-pack-summary-media,
.album-reveal-card.rarity-alien .album-reveal-card-front,
.album-card-viewer-media.rarity-alien {
    border-color: rgba(74, 222, 128, 0.85) !important;
    box-shadow:
        0 14px 28px rgba(74, 222, 128, 0.25),
        0 0 16px rgba(0, 255, 102, 0.15),
        inset 0 0 12px rgba(167, 255, 220, 0.2) !important;
}

/* ULTRA HOVER OVERDRIVE FOR ALIEN STICKER FRAME */
.album-sticker-slot.is-owned.rarity-alien:hover .album-sticker-frame {
    transform: translateY(-16px) scale(1.12) rotate(3deg) !important;
    border-color: #ffffff !important;
    box-shadow:
        0 30px 60px rgba(0, 255, 102, 1),
        0 0 70px rgba(0, 255, 102, 0.9),
        0 0 100px rgba(81, 245, 5, 0.8),
        inset 0 0 35px rgba(255, 255, 255, 0.8) !important;
    filter: brightness(1.2) contrast(1.15) !important;
    z-index: 1000 !important;
    animation: none !important;
}

/* Hyper-charged lightning storm on hover (animates 5.3x faster!) */
.album-sticker-slot.is-owned.rarity-alien:hover .album-figurinha-art::after,
.album-card-viewer-media.rarity-alien:hover::after,
.rarity-alien .album-reveal-card-front:hover::after {
    animation: alienLightningStorm 0.6s infinite steps(1) !important;
    opacity: 0.95 !important;
}

/* Pulsing, glowing ribbon on hover */
.album-sticker-slot.is-owned.rarity-alien:hover .album-figurinha-ribbon {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #064e3b 100%) !important;
    border-top-color: #51f505 !important;
    box-shadow: 0 -4px 20px #51f505, inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
}

.album-sticker-slot.is-owned.rarity-alien:hover .album-figurinha-ribbon strong {
    color: #ffffff !important;
    text-shadow: 0 0 15px #51f505, 0 0 25px #00ff66, 0 0 35px #ffffff !important;
}

/* Fita / Ribbon das Cartas Alien */
.rarity-alien .album-figurinha-ribbon {
    background: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #022c22 100%) !important;
    border-top: 2.5px solid #00ff66 !important;
    box-shadow: 0 -2px 10px rgba(0, 255, 102, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Fontes Sci-Fi e Efeitos de Brilho de Texto Alien (Futurista Verde Neon) */
.rarity-alien :is(.album-figurinha-ribbon strong,
    .album-pack-summary-info strong,
    .album-card-viewer-name,
    .album-card-viewer-rarity) {
    font-family: 'Orbitron', 'Syne', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    color: #ffffff !important;
    text-shadow:
        0 0 4px rgba(0, 255, 102, 0.9),
        0 0 10px rgba(74, 222, 128, 0.5) !important;
}

/* Subtítulos e informações adicionais Alien */
.rarity-alien :is(.album-figurinha-ribbon span,
    .album-pack-summary-info span,
    .album-reveal-card-info span,
    .album-card-viewer-team) {
    font-family: 'Orbitron', 'Syne', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: #4ade80 !important;
    text-shadow: 0 0 60px rgba(0, 255, 102, 0.4) !important;
}


/* --- OVERHAUL CARTAS LEGEND / LENDÁRIA (MAJESTOSO/MONUMENTAL) --- */

/* Moldura e Glow Dourado de Ouro */
.album-sticker-slot.is-owned:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-sticker-frame,
.album-pack-summary-card:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-pack-summary-media,
.album-reveal-card:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-reveal-card-front,
.album-card-viewer-media:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) {
    border-color: rgba(255, 224, 102, 0.9) !important;
    box-shadow:
        0 14px 34px rgba(229, 178, 37, 0.35),
        0 0 20px rgba(229, 178, 37, 0.22),
        inset 0 0 16px rgba(255, 224, 102, 0.2) !important;
}

/* Modais e cartas abertas ao passar o mouse */
.album-sticker-slot.is-owned:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend):hover .album-sticker-frame {
    border-color: #ffffff !important;
    box-shadow:
        0 22px 42px rgba(229, 178, 37, 0.5),
        0 0 32px rgba(255, 224, 102, 0.55),
        inset 0 0 24px rgba(255, 255, 255, 0.3) !important;
}

/* Fita / Ribbon das Cartas Legend (Ouro Real & Imperial Vermelho) */
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) .album-figurinha-ribbon {
    background: linear-gradient(135deg, #111111 0%, #222222 50%, #000000 100%) !important;
    border-top: 3px solid #ffdc52 !important;
    box-shadow: 0 -2px 14px rgba(255, 220, 82, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
}

/* Fontes Clássicas e Monumentais e Efeitos de Brilho Dourado (Somente Legend) */
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) :is(.album-figurinha-ribbon strong,
    .album-pack-summary-info strong,
    .album-card-viewer-name,
    .album-card-viewer-rarity) {
    font-family: 'Cinzel Decorative', 'Cinzel', Georgia, serif !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    color: #ffe066 !important;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(255, 224, 102, 0.6) !important;
}

/* Subtítulos e informações adicionais Legend */
:is(.rarity-lendaria, .rarity-lendario, .rarity-lendária, .rarity-lendário, .rarity-legend) :is(.album-figurinha-ribbon span,
    .album-pack-summary-info span,
    .album-reveal-card-info span,
    .album-card-viewer-team) {
    font-family: 'Cinzel', Georgia, serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    color: #ffffff !important;
    opacity: 0.95 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6) !important;
}

/* ==========================================================================
   LAYOUT CUSTOMIZADO DA SUBCAPA (DELEGAÇÃO EXTRAS)
   ========================================================================== */

.album-subcapa-overlay {
    position: absolute;
    inset: 92px 18px 42px;
    /* Inset idêntico ao .album-sticker-grid padrão! */
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 180px));
    /* Grid idêntico! */
    grid-auto-rows: auto;
    justify-content: center;
    align-content: start;
    gap: 34px 42px;
    /* Gap idêntico! */
    align-items: start;
    box-sizing: border-box;
}

/* Slots na Subcapa: Não forçamos largura nos verticais para eles seguirem exatamente o padrão da página! */
.album-subcapa-overlay .album-sticker-slot.is-vertical {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Slots específicos para grid placement */
.subcapa-slot-xandao {
    grid-column: 1;
    grid-row: 1;
}

/* Bloco de texto da Delegação Extras */
.album-subcapa-custom-text {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    color: #ffffff;
    padding: 10px 5px;
    box-sizing: border-box;
    width: 100%;
    align-self: center;
}

.album-subcapa-custom-text h3 {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    margin: 0 0 10px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.album-subcapa-custom-text p {
    font-size: 12px;
    line-height: 1.6;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    letter-spacing: 0.02em;
}

/* Slot horizontal (Arena) da Subcapa: Spana 2 colunas! */
.subcapa-slot-arena {
    grid-column: 1 / span 2;
    grid-row: 2;
    width: 100%;
    aspect-ratio: 1.58 / 1 !important;
}

.subcapa-slot-arena .album-sticker-frame {
    aspect-ratio: 1.58 / 1 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Outros slots na página da direita */
.subcapa-slot-logo-tdj {
    grid-column: 3;
    grid-row: 1;
}

.subcapa-slot-logo-haxball {
    grid-column: 4;
    grid-row: 1;
}

.subcapa-slot-medalhas {
    grid-column: 3;
    grid-row: 2;
}

.subcapa-slot-logo-olimpiadas {
    grid-column: 4;
    grid-row: 2;
}

/* ==========================================================================
   EFEITOS DE PARTÍCULAS E GLOWS AO REVELAR CARTAS RARAS E SUPERIORES
   ========================================================================== */

/* Partícula de revelação premium */
.reveal-rare-particle {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 0 12px var(--particle-glow, rgba(255, 255, 255, 0.7));
    animation: revealRareParticleAnim 2.2s cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

@keyframes revealRareParticleAnim {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
        opacity: 0;
    }
}

/* Pulso radial de choque na revelação */
.reveal-rare-pulse {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%) scale(0.2);
    animation: revealRarePulseAnim 1.6s cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
}

@keyframes revealRarePulseAnim {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.8);
        opacity: 0;
    }
}

/* Glows dinâmicos de fundo para o container da carta ativa (.album-pack-reveal-active) */
.album-pack-reveal-active {
    position: relative;
}

.album-pack-reveal-active.is-legend-glow::before {
    content: '';
    position: absolute;
    inset: -120px;
    background: radial-gradient(circle, rgba(229, 178, 37, 0.32) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
    animation: packRareBackgroundGlow 2.5s ease-in-out infinite alternate;
}

.album-pack-reveal-active.is-prime-glow::before {
    content: '';
    position: absolute;
    inset: -120px;
    background: radial-gradient(circle, rgba(138, 43, 226, 0.35) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
    animation: packRareBackgroundGlow 2.5s ease-in-out infinite alternate;
}

.album-pack-reveal-active.is-rare-glow::before {
    content: '';
    position: absolute;
    inset: -120px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.18) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
    animation: packRareBackgroundGlow 2.5s ease-in-out infinite alternate;
}

@keyframes packRareBackgroundGlow {
    0% {
        transform: scale(0.92);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* Cinematic Reveal Effects */
.album-reveal-card-inner.is-cinematic-shake {
    animation: cinematicCardShake 0.5s cubic-bezier(.36, .07, .19, .97) both !important;
}

@keyframes cinematicCardShake {
    0% {
        transform: rotateY(180deg) translate(0, 0);
    }

    10% {
        transform: rotateY(180deg) translate(-4px, 3px) scale(1.02);
    }

    20% {
        transform: rotateY(180deg) translate(3px, -2px) scale(1.05);
    }

    30% {
        transform: rotateY(180deg) translate(-5px, -1px) scale(1.08);
    }

    40% {
        transform: rotateY(180deg) translate(2px, 4px) scale(1.08);
    }

    50% {
        transform: rotateY(180deg) translate(-3px, 2px) scale(1.05);
    }

    60% {
        transform: rotateY(180deg) translate(4px, -3px) scale(1.03);
    }

    70% {
        transform: rotateY(180deg) translate(-2px, -4px) scale(1.02);
    }

    80% {
        transform: rotateY(180deg) translate(3px, 2px) scale(1.01);
    }

    90% {
        transform: rotateY(180deg) translate(-1px, -1px) scale(1.005);
    }

    100% {
        transform: rotateY(180deg) translate(0, 0);
    }
}

.cinematic-screen-flash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    animation: cinematicFlashAnim 1.2s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes cinematicFlashAnim {
    0% {
        opacity: 1;
        filter: brightness(1.5) blur(0px);
    }

    100% {
        opacity: 0;
        filter: brightness(1) blur(4px);
    }
}

.reveal-cinematic-shard {
    position: fixed;
    pointer-events: none;
    z-index: 99999;
    background: var(--shard-bg, #ffd700);
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
    box-shadow: 0 0 16px var(--particle-glow, rgba(255, 255, 255, 0.9));
    animation: revealCinematicShardAnim var(--duration, 2.5s) cubic-bezier(0.1, 0.8, 0.25, 1) forwards;
}

@keyframes revealCinematicShardAnim {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.2);
        opacity: 0;
    }

    15% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1.4);
        opacity: 1;
    }

    100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(0);
        opacity: 0;
    }
}

/* Styling for Login and Register pages matching the trades dark glassmorphic theme */
.album-page[data-album-page="login"],
.album-page[data-album-page="register"] {
    background:
        radial-gradient(circle at 50% 15%, rgba(9, 184, 189, 0.12), transparent 45%),
        radial-gradient(circle at 80% 25%, rgba(9, 184, 189, 0.04), transparent 30%),
        repeating-linear-gradient(22deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 16px),
        linear-gradient(180deg, #070b0d 0%, #0b1114 100%) !important;
    background-attachment: fixed;
    color: #e3edf0;
}

.album-page[data-album-page="login"] .album-panel,
.album-page[data-album-page="register"] .album-panel {
    background: rgba(13, 22, 26, 0.65) !important;
    border: 1px solid rgba(43, 209, 216, 0.05) !important;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(12px);
    color: #e3edf0;
}

.album-page[data-album-page="login"] .album-panel h1,
.album-page[data-album-page="login"] .album-panel h2,
.album-page[data-album-page="register"] .album-panel h1 {
    color: #2bd1d8 !important;
    text-shadow: 0 0 10px rgba(43, 209, 216, 0.25) !important;
}

.album-page[data-album-page="login"] .album-kicker,
.album-page[data-album-page="register"] .album-kicker {
    color: #f7e8ce !important;
}

.album-page[data-album-page="login"] .album-muted,
.album-page[data-album-page="register"] .album-muted {
    color: #8faeb4 !important;
}

.album-page[data-album-page="login"] .album-form label,
.album-page[data-album-page="register"] .album-form label {
    color: #2bd1d8 !important;
    font-weight: 700;
}

.album-page[data-album-page="login"] .album-form input,
.album-page[data-album-page="register"] .album-form input {
    background: rgba(13, 22, 26, 0.65) !important;
    border: 1px solid rgba(43, 209, 216, 0.15) !important;
    color: #e3edf0 !important;
    font-size: 0.95rem;
    padding: 10px 12px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.album-page[data-album-page="login"] .album-form input:focus,
.album-page[data-album-page="register"] .album-form input:focus {
    outline: none;
    border-color: #2bd1d8 !important;
    box-shadow: 0 0 0 3px rgba(43, 209, 216, 0.15) !important;
}



.album-page[data-album-page="login"] .album-auth-link,
.album-page[data-album-page="register"] .album-auth-link {
    color: #8faeb4 !important;
}

.album-page[data-album-page="login"] .album-auth-link a,
.album-page[data-album-page="register"] .album-auth-link a {
    color: #2bd1d8 !important;
    transition: color 0.2s ease;
}

.album-page[data-album-page="login"] .album-auth-link a:hover,
.album-page[data-album-page="register"] .album-auth-link a:hover {
    color: #46e3e9 !important;
    text-decoration: underline;
}

.album-page[data-album-page="login"] #album-reset-view h2 {
    text-align: center;
}

.album-page[data-album-page="login"] .album-panel .album-muted,
.album-page[data-album-page="register"] .album-panel .album-muted {
    text-align: center;
}

.album-page[data-album-page="login"] .password-toggle-btn,
.album-page[data-album-page="register"] .password-toggle-btn {
    color: #ffffff !important;
    opacity: 0.75;
}

.album-page[data-album-page="login"] .password-toggle-btn:hover,
.album-page[data-album-page="register"] .password-toggle-btn:hover {
    color: #2bd1d8 !important;
    opacity: 1;
}

/* ==========================================================================
   GOLDEN PACK MODAL ADJUSTMENTS
   ========================================================================== */

/* Aumenta a largura maxima do modal shell e do resumo para o pacote dourado no desktop */
@media (min-width: 992px) {
    .album-pack-modal.is-golden .album-pack-modal-shell {
        width: min(1340px, calc(100vw - 40px)) !important;
        height: min(90vh, 760px) !important;
    }

    .album-pack-modal.is-golden .album-pack-reveal.is-showing-summary .album-pack-summary {
        max-width: 1260px !important;
        max-height: 100% !important;
        overflow: visible !important;
        /* Remove barra de rolagem */
    }
}

/* Garante que se houver espaco vertical suficiente, o resumo também nao tenha rolagem */
.album-pack-modal.is-golden .album-pack-reveal.is-showing-summary .album-pack-summary {
    overflow-y: visible;
}

/* Garante que todas as cartas do pacote dourado fiquem na mesma linha no desktop e tablets */
@media (min-width: 768px) {
    .album-pack-modal.is-golden .album-pack-summary-grid {
        flex-wrap: nowrap !important;
        justify-content: center !important;
    }

    .album-pack-modal.is-golden .album-pack-reveal.is-showing-summary .album-pack-summary-card {
        flex: 0 1 180px !important;
        /* Permite encolher mas limita largura maxima */
        min-width: 130px !important;
    }
}

/* ==========================================================================
   ACHIEVEMENT NOTIFICATION SYSTEM (TOASTS)
   ========================================================================== */

.achievement-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.achievement-toast {
    display: flex;
    align-items: center;
    background: rgba(13, 22, 26, 0.95);
    border: 2px solid #df4cff;
    border-radius: 12px;
    padding: 16px;
    width: 320px;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(223, 76, 255, 0.25),
        inset 0 0 10px rgba(100, 248, 255, 0.15);
    color: #ffffff;
    pointer-events: auto;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;

    transform: translateX(400px) scale(0.9);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
    backdrop-filter: blur(10px);
}

.achievement-toast.show {
    transform: translateX(0) scale(1);
    opacity: 1;
}

.achievement-toast-icon-wrapper {
    background: linear-gradient(135deg, #3b0764 0%, #2e0854 100%);
    border: 1px solid #df4cff;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(223, 76, 255, 0.4);
}

.achievement-toast-icon-wrapper svg {
    width: 24px;
    height: 24px;
    stroke: #ffd700;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
}

.achievement-toast-body {
    flex-grow: 1;
}

.achievement-toast-badge {
    font-family: 'Orbitron', 'Syne', sans-serif;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #ffd700;
    text-transform: uppercase;
    margin-bottom: 2px;
    text-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
}

.achievement-toast-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 3px;
    letter-spacing: 0.02em;
    text-shadow: 0 0 4px rgba(223, 76, 255, 0.4);
}

.achievement-toast-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.3;
    font-weight: 500;
}

/* Page Transition Effects */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, #0d2225 0%, #04080a 100%);
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease-in-out;
}

.page-transition-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.page-transition-spinner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px dashed rgba(43, 209, 216, 0.2);
    border-top-color: #2bd1d8;
    animation: spin-page-loader 1s linear infinite;
    box-shadow: 0 0 25px rgba(43, 209, 216, 0.2);
}

@keyframes spin-page-loader {
    to {
        transform: rotate(360deg);
    }
}

/* Unlocked Pack Button Glow & Shimmer Effects */
button#album-open-pack-btn:not(:disabled),
button#album-open-golden-pack-btn:not(:disabled) {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button#album-open-pack-btn:not(:disabled) {
    animation: common-pulse 2s infinite ease-in-out;
}

button#album-open-golden-pack-btn:not(:disabled) {
    animation: golden-pulse 2s infinite ease-in-out;
}

button#album-open-pack-btn:not(:disabled)::after,
button#album-open-golden-pack-btn:not(:disabled)::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 25%;
    height: 200%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: rotate(25deg);
    pointer-events: none;
}

button#album-open-pack-btn:not(:disabled)::after {
    animation: shimmer-swipe 3s infinite ease-in-out;
}

button#album-open-golden-pack-btn:not(:disabled)::after {
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.65) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: shimmer-swipe 2.2s infinite ease-in-out;
}

@keyframes shimmer-swipe {
    0% {
        left: -60%;
    }

    15% {
        left: 140%;
    }

    100% {
        left: 140%;
    }
}

@keyframes common-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(229, 178, 37, 0.25), inset 0 0 5px rgba(229, 178, 37, 0.1);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 20px rgba(229, 178, 37, 0.65), inset 0 0 10px rgba(229, 178, 37, 0.3);
        transform: scale(1.035);
    }
}

@keyframes golden-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(229, 178, 37, 0.35), inset 0 0 5px rgba(229, 178, 37, 0.15);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 22px rgba(229, 178, 37, 0.75), inset 0 0 10px rgba(229, 178, 37, 0.4);
        transform: scale(1.045);
    }
}

/* --- CINEMATIC CARD PASTING EFFECTS (PRIME & LEGEND POWER EFFECTS) --- */

/* 1. Cinematic Screen Shake */
.cinematic-viewport-shake {
    animation: cinematicScreenShake 0.6s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes cinematicScreenShake {

    10%,
    90% {
        transform: translate3d(-2px, 1px, 0) scale(1.002);
    }

    20%,
    80% {
        transform: translate3d(3px, -2px, 0) scale(1.004);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-5px, 3px, 0) scale(1.006);
    }

    40%,
    60% {
        transform: translate3d(5px, -3px, 0) scale(1.006);
    }
}

/* 2. Fullscreen Radial Cinematic Flash */
.cinematic-paste-flash {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    animation: cinematicPasteFlashAnim 1.8s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes cinematicPasteFlashAnim {
    0% {
        opacity: 0.8;
        filter: brightness(2.0) contrast(1.5) blur(0px);
    }

    15% {
        opacity: 1.0;
        filter: brightness(1.5) contrast(1.2) blur(2px);
    }

    100% {
        opacity: 0;
        filter: brightness(1.0) contrast(1.0) blur(10px);
    }
}

/* 3. Screen Spreading Shockwaves */
.cinematic-paste-shockwave {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999998;
    transform: translate(-50%, -50%) scale(0.01);
    opacity: 0;
    border: 3px solid transparent;
    box-shadow: 0 0 40px var(--shockwave-color);
    animation: cinematicPasteShockwaveAnim var(--shockwave-duration, 1.4s) cubic-bezier(0.1, 0.8, 0.15, 1) forwards;
}

@keyframes cinematicPasteShockwaveAnim {
    0% {
        transform: translate(-50%, -50%) scale(0.05);
        opacity: 1;
        border-color: var(--shockwave-color);
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(6.0);
        opacity: 0;
        border-color: transparent;
    }
}

/* 4. Cinematic Light Beams/Ray Trails */
.cinematic-paste-ray {
    position: fixed;
    pointer-events: none;
    z-index: 999997;
    width: var(--ray-width, 6px);
    height: var(--ray-height, 120px);
    background: linear-gradient(to top, transparent, var(--ray-color) 40%, #ffffff 90%, var(--ray-color) 100%);
    border-radius: 4px;
    opacity: 0;
    transform: translate(-50%, -50%) translate(calc(var(--tx) * 0.1), calc(var(--ty) * 0.1)) rotate(var(--angle)) scale(0.1);
    animation: cinematicPasteRayAnim var(--duration, 1.5s) cubic-bezier(0.05, 0.8, 0.1, 1) forwards;
}

@keyframes cinematicPasteRayAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(0px, 0px) rotate(var(--angle)) scale(0.2);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--angle)) scale(1.6);
    }
}

/* 5. Majestic Glow Ring */
.cinematic-paste-glow-ring {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999996;
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
    background: radial-gradient(circle, transparent 40%, var(--ring-glow-color) 70%, transparent 100%);
    animation: cinematicPasteRingAnim 1.6s cubic-bezier(0.1, 0.8, 0.2, 1) forwards;
}

@keyframes cinematicPasteRingAnim {
    0% {
        transform: translate(-50%, -50%) scale(0.05);
        opacity: 0.9;
    }

    100% {
        transform: translate(-50%, -50%) scale(4.5);
        opacity: 0;
    }
}

/* ==========================================================================
   RETRO PACK MODAL ADJUSTMENTS
   ========================================================================== */

/* Aumenta a largura maxima do modal shell e do resumo para o pacote retro no desktop */
@media (min-width: 992px) {
    .album-pack-modal.is-retro-theme .album-pack-modal-shell {
        width: min(1200px, calc(100vw - 40px)) !important;
        height: min(90vh, 760px) !important;
    }

    .album-pack-modal.is-retro-theme .album-pack-reveal.is-showing-summary .album-pack-summary {
        max-width: 1100px !important;
        max-height: 100% !important;
        overflow: visible !important;
    }
}

.album-pack-modal.is-retro-theme .album-pack-reveal.is-showing-summary .album-pack-summary {
    overflow-y: visible;
}

@media (min-width: 768px) {
    .album-pack-modal.is-retro-theme .album-pack-summary-grid {
        flex-wrap: nowrap !important;
        justify-content: center !important;
    }

    .album-pack-modal.is-retro-theme .album-pack-reveal.is-showing-summary .album-pack-summary-card {
        flex: 0 1 180px !important;
        min-width: 130px !important;
    }
}

/* Beautiful retro theme modal backgrounds and energy pulses */
.album-pack-modal.is-retro-theme .album-pack-modal-shell {
    background: radial-gradient(circle at center, #2c1a0e 0%, #150b05 100%) !important;
    border: 2px solid rgba(190, 142, 74, 0.4) !important;
    box-shadow: 0 0 40px rgba(190, 142, 74, 0.25), inset 0 0 100px rgba(0, 0, 0, 0.8) !important;
}

.album-pack-modal.is-retro-theme .album-pack-energy-a {
    background: radial-gradient(circle, rgba(190, 142, 74, 0.15) 0%, transparent 70%) !important;
}

.album-pack-modal.is-retro-theme .album-pack-energy-b {
    background: radial-gradient(circle, rgba(135, 92, 35, 0.15) 0%, transparent 70%) !important;
}

.album-pack-modal.is-retro-theme .album-pack-energy-c {
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%) !important;
}

/* Retro open pack button animation */
button#album-open-retro-pack-btn:not(:disabled) {
    animation: retro-pulse 2s infinite ease-in-out;
}

@keyframes retro-pulse {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(190, 142, 74, 0.4), 0 0 20px rgba(190, 142, 74, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(190, 142, 74, 0.7), 0 0 30px rgba(190, 142, 74, 0.4);
    }
}

/* ==========================================================================
   ROLETA (ROULETTE / SPIN THE WHEEL) STYLING
   ========================================================================== */
@keyframes rouletteFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.album-roulette-layout {
    perspective: 1000px;
}

#album-roulette-modal .album-card-viewer-shell {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 50px rgba(255, 210, 122, 0.15);
}

#album-roulette-modal .tdj-card {
    animation: rouletteCardReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes rouletteCardReveal {
    0% {
        opacity: 0;
        transform: scale(0.3) rotateY(-180deg);
    }

    70% {
        transform: scale(1.05) rotateY(10deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

/* ==========================================================================
   SKEUOMORPHIC 3D PAGE FLIP ANIMATION
   ========================================================================== */
.album-flip-overlay {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    perspective: 2500px;
    backface-visibility: hidden;
    box-sizing: border-box;
}

.flip-panel-left,
.flip-panel-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.flip-panel-left {
    left: 0;
}

.flip-panel-right {
    right: 0;
}

.flip-page-turning {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    perspective: 2500px;
    z-index: 1005;
    box-sizing: border-box;
}

.flip-page-turning.turn-forward-spine {
    left: 50%;
    transform-origin: left center;
}

.flip-page-turning.turn-backward-spine {
    left: 0;
    transform-origin: right center;
}

.flip-page-flipper {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    box-sizing: border-box;
}

/* Precise transform-origin on the flipper itself so it rotates around the book spine */
.flip-page-turning.turn-forward-spine .flip-page-flipper {
    transform-origin: left center;
}

.flip-page-turning.turn-backward-spine .flip-page-flipper {
    transform-origin: right center;
}

.flip-page-turning.turn-forward-spine.do-flip .flip-page-flipper {
    transform: rotateY(-180deg);
}

.flip-page-turning.turn-backward-spine.do-flip .flip-page-flipper {
    transform: rotateY(180deg);
}

.flip-face-front,
.flip-face-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    overflow: hidden;
    background: transparent;
    box-sizing: border-box;
}

.flip-face-back {
    transform: rotateY(180deg);
}

.flip-cloned-content {
    position: absolute !important;
    top: 0 !important;
    left: 0;
    width: 200% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    pointer-events: none;
    box-sizing: border-box;
}

/* Offset full-page width to display the correct halves */
.clip-left .flip-cloned-content {
    left: 0 !important;
}

.clip-right .flip-cloned-content {
    left: -100% !important;
}

/* Page spine shadow overlay on turning page to make it extremely realistic */
.flip-page-flipper::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1010;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, transparent 10%, transparent 90%, rgba(0, 0, 0, 0.1) 100%);
}

/* ==========================================================================
   FINAL OVERRIDES FOR PACK SUMMARY CARDS (CLEAN BACKGROUNDS AND NO OUTLINES)
   ========================================================================== */
[class*="album-pack-summary-card"],
[class*="album-pack-summary-card"]:hover,
[class*="album-pack-summary-card"]:active,
[class*="album-pack-summary-card"]:focus,
.album-pack-summary-card,
.album-pack-summary-card:hover,
.album-pack-summary-card:is(.rarity-raro, .rarity-rara, .rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária, .rarity-epica, .rarity-epico, .rarity-pica, .rarity-pico, .rarity-prime, .rarity-alien, .rarity-comum):hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

[class*="album-pack-summary-card"]:hover,
.album-pack-summary-card:hover,
.album-pack-summary-card:is(.rarity-raro, .rarity-rara, .rarity-lendario, .rarity-lendaria, .rarity-lendário, .rarity-lendária, .rarity-epica, .rarity-epico, .rarity-pica, .rarity-pico, .rarity-prime, .rarity-alien, .rarity-comum):hover {
    transform: none !important;
}

/* Estilos para a página Momentos (Retro) */
.album-book-page.team-22 .album-sticker-grid {
    grid-template-columns: repeat(4, minmax(200px, 250px)) !important;
}


.album-sticker-slot.is-horizontal {
    aspect-ratio: 25/18;
}
.album-sticker-slot.is-horizontal .tdj-card {
    aspect-ratio: 25/18;
}
.album-sticker-slot.is-horizontal .tdj-card-inner {
    aspect-ratio: 25/18;
}


.album-sticker-slot.is-horizontal, .album-sticker-slot.is-horizontal .tdj-card, .album-sticker-slot.is-horizontal .tdj-card-inner { aspect-ratio: 25/18 !important; }


/* Forçar layout horizontal nas cartas */
.album-sticker-slot.is-horizontal {
    aspect-ratio: 25/18 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    position: relative !important;
}
.album-sticker-slot.is-horizontal .album-sticker-placeholder-card,
.album-sticker-slot.is-horizontal .tdj-card,
.album-sticker-slot.is-horizontal .tdj-card-inner,
.album-sticker-slot.is-horizontal .album-sticker-frame {
    aspect-ratio: 25/18 !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


.album-sticker-slot.is-horizontal * { box-sizing: border-box !important; }
.album-sticker-slot.is-horizontal .album-sticker-placeholder-card { padding: 10px !important; }


.album-sticker-slot.is-horizontal .tdj-card, .album-sticker-slot.is-horizontal .tdj-card-inner, .album-sticker-slot.is-horizontal .album-sticker-frame { padding: 0 !important; }

/* Locked mark size adjustments for horizontal cards */
.album-sticker-slot.is-horizontal .album-sticker-locked-mark {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 10px 10px 38px !important;
    gap: 4px !important;
    box-sizing: border-box !important;
}
.album-sticker-slot.is-horizontal .album-sticker-locked-mark::after {
    height: 34px !important;
}
.album-sticker-slot.is-horizontal .album-sticker-locked-mark strong {
    font-size: 1.8rem !important;
}
.album-sticker-slot.is-horizontal .album-sticker-locked-mark span {
    font-size: 0.68rem !important;
    line-height: 1 !important;
}

/* Styling for Horizontal Cards in Reveal, Summary, and Viewer Modals */
.album-reveal-card.is-horizontal {
    width: min(100%, 300px) !important;
    height: min(100%, 220px) !important;
    aspect-ratio: 25/18 !important;
}

.album-pack-reveal.is-showing-summary .album-pack-summary-card.is-horizontal .album-pack-summary-media {
    width: 208px !important;
    height: 156px !important;
    aspect-ratio: 25/18 !important;
}

.album-pack-reveal.is-showing-summary .album-pack-summary-card.is-horizontal {
    flex: 0 1 240px !important;
    min-width: 180px !important;
}

@media (max-width: 768px) {
    .album-pack-reveal.is-showing-summary .album-pack-summary-card.is-horizontal .album-pack-summary-media {
        width: 116px !important;
        height: 88px !important;
    }
    .album-pack-reveal.is-showing-summary .album-pack-summary-card.is-horizontal {
        flex: 0 1 140px !important;
        min-width: 110px !important;
    }
}

@media (max-width: 480px) {
    .album-pack-reveal.is-showing-summary .album-pack-summary-card.is-horizontal .album-pack-summary-media {
        width: 78px !important;
        height: 58px !important;
    }
    .album-pack-reveal.is-showing-summary .album-pack-summary-card.is-horizontal {
        flex: 0 1 100px !important;
        min-width: 80px !important;
    }
}

.album-card-viewer-media.is-horizontal {
    aspect-ratio: 25/18 !important;
    align-self: center !important;
}

#album-roulette-reveal-media:has(.tdj-card.is-horizontal) {
    aspect-ratio: 25/18 !important;
    height: auto !important;
}

#album-card-viewer.is-horizontal #album-card-viewer-name {
    font-family: 'Outfit', 'Inter', 'Segoe UI', 'Roboto', sans-serif !important;
    font-size: clamp(1.15rem, 3vw, 1.45rem) !important;
    font-weight: 800 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.25 !important;
}

/* Horizontal card size overrides for inventory and trade list items */
.inv-card[data-team-id="22"] {
    width: 112px !important;
    height: 80px !important;
}