:root {
    color-scheme: dark;
    --bg: #120f0b;
    --panel: rgba(33, 27, 21, 0.92);
    --panel-solid: #211b15;
    --panel-2: #2c251c;
    --line: rgba(118, 96, 69, 0.6);
    --line-bright: rgba(224, 180, 88, 0.52);
    --text: #f4ead8;
    --muted: #b9ab90;
    --cyan: #e0b458;
    --cyan-2: #c98f3f;
    --violet: #7a5b41;
    --gold: #e0b458;
    --danger: #c45b48;
    --success: #6fa66f;
    --common: #c0b59f;
    --uncommon: #86ba7a;
    --rare: #7ca8d9;
    --epic: #b58ad8;
    --legendary: #f1c768;
    --mythic: #ff65d5;
    --godly: #fff3a4;
    --radius: 18px;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
    font-family: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(208, 151, 70, 0.18), transparent 28rem),
        radial-gradient(circle at 82% 18%, rgba(125, 83, 41, 0.16), transparent 26rem),
        linear-gradient(180deg, #2a2015 0%, #17120d 55%, #0f0c09 100%);
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
}

.is-hidden {
    display: none !important;
}

.ambient {
    position: fixed;
    z-index: 0;
    width: 24rem;
    height: 24rem;
    border-radius: 999px;
    filter: blur(80px);
    opacity: 0.18;
    pointer-events: none;
}

.ambient-one {
    top: -9rem;
    left: -10rem;
    background: #d1a24d;
}

.ambient-two {
    right: -13rem;
    bottom: 7rem;
    background: #80572d;
}

.boot-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.55rem;
    background: #050b13;
    transition: opacity 0.35s ease;
}

.boot-icon {
    width: 82px;
    height: 82px;
    border-radius: 22px;
    box-shadow: 0 0 60px rgba(109, 224, 255, 0.25);
}

.boot-title {
    margin-top: 0.55rem;
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.boot-subtitle {
    color: var(--muted);
    font-size: 0.85rem;
}

.spinner {
    width: 34px;
    height: 34px;
    margin-top: 1rem;
    border: 3px solid rgba(141, 238, 255, 0.15);
    border-top-color: var(--cyan);
    border-radius: 999px;
    animation: spin 0.8s linear infinite;
}

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

.app-shell {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(100%, 1080px);
    min-height: 100vh;
    margin: 0 auto;
    padding-bottom: 88px;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--line);
    background: rgba(5, 11, 19, 0.86);
    backdrop-filter: blur(18px);
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 11px;
}

.brand-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    box-shadow: 0 0 24px rgba(141, 238, 255, 0.18);
}

.brand-block h1 {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.alt1-state {
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.7rem;
}

.alt1-state.is-alt1 {
    color: var(--success);
}

.currency-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 104px;
    justify-content: center;
    padding: 9px 14px;
    border: 1px solid rgba(244, 207, 103, 0.28);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(244, 207, 103, 0.12), rgba(244, 207, 103, 0.04));
    font-weight: 800;
    cursor: pointer;
}

.coin-mark,
.mini-balance span {
    color: var(--gold);
    filter: drop-shadow(0 0 8px rgba(244, 207, 103, 0.5));
}

.main-content {
    padding: 18px;
}

.page {
    display: none;
    animation: page-in 0.24s ease;
}

.page.is-active {
    display: block;
}

@keyframes page-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.hero-card,
.info-card,
.stat-card,
.shop-card,
.pack-tile,
.history-item {
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(16, 31, 48, 0.94), rgba(8, 18, 29, 0.94));
    box-shadow: var(--shadow);
}

.hero-card {
    position: relative;
    overflow: hidden;
    padding: 22px;
    border-radius: 24px;
}

.hero-card::before {
    content: "";
    position: absolute;
    inset: -12rem -9rem auto auto;
    width: 22rem;
    height: 22rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(89, 196, 255, 0.2), transparent 65%);
    pointer-events: none;
}

.eyebrow {
    color: var(--cyan);
    font-size: 0.69rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.profile-row,
.section-heading,
.subheading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-row h2,
.section-heading h2,
.modal-card h2,
.opening-header h2 {
    margin: 5px 0 0;
    font-size: clamp(1.35rem, 5vw, 2rem);
}

.profile-row p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.status-orb {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #4d5b68;
    box-shadow: 0 0 0 6px rgba(77, 91, 104, 0.12);
}

.status-orb.is-tracking {
    background: var(--success);
    box-shadow: 0 0 0 6px rgba(115, 239, 187, 0.12), 0 0 18px rgba(115, 239, 187, 0.7);
}

.status-orb.is-warning {
    background: #f4a340;
    box-shadow: 0 0 0 6px rgba(244, 163, 64, 0.14), 0 0 18px rgba(244, 163, 64, 0.72);
}

.status-orb.is-warning::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(244, 163, 64, 0.7);
    border-radius: inherit;
    animation: pulse-ring 1.2s ease-out infinite;
}

.status-orb.is-tracking::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(115, 239, 187, 0.6);
    border-radius: inherit;
    animation: pulse-ring 1.8s ease-out infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 0.9; }
    80%, 100% { transform: scale(1.8); opacity: 0; }
}

.xp-ring-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin: 30px 0;
}

.xp-ring {
    --progress: 0deg;
    display: grid;
    place-items: center;
    width: 126px;
    height: 126px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: conic-gradient(var(--cyan) var(--progress), rgba(141, 238, 255, 0.08) 0);
    box-shadow: 0 0 45px rgba(89, 199, 255, 0.12);
}

.xp-ring::before {
    content: "";
    position: absolute;
}

.xp-ring-inner {
    display: grid;
    place-content: center;
    width: 106px;
    height: 106px;
    text-align: center;
    border: 1px solid rgba(141, 238, 255, 0.15);
    border-radius: 999px;
    background: #091522;
}

.xp-ring-inner strong {
    font-size: 2rem;
    line-height: 1;
}

.xp-ring-inner span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.69rem;
}

.xp-ring-copy {
    display: grid;
    gap: 4px;
}

.xp-ring-copy > span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.xp-ring-copy strong {
    font-size: 1.35rem;
}

.xp-ring-copy small {
    max-width: 12rem;
    color: var(--muted);
    line-height: 1.4;
}

.primary-button,
.ghost-button,
.rip-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 47px;
    border-radius: 13px;
    font-weight: 900;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, opacity 0.16s ease;
}

.primary-button {
    border: 1px solid rgba(184, 243, 255, 0.58);
    background: linear-gradient(135deg, #1e9cca, #5d51cc);
    box-shadow: 0 12px 30px rgba(39, 131, 191, 0.24);
}

.primary-button:hover:not(:disabled),
.rip-button:hover:not(:disabled) {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.primary-button:active:not(:disabled),
.rip-button:active:not(:disabled) {
    transform: translateY(1px);
}

button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.ghost-button {
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.025);
}

.ghost-button.compact {
    min-height: 38px;
    margin-top: 9px;
    font-size: 0.78rem;
}

.button-icon {
    font-size: 0.76rem;
}

.tracker-button.is-active {
    border-color: rgba(255, 111, 134, 0.42);
    background: linear-gradient(135deg, #8d344a, #5a315e);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.stat-card {
    padding: 15px;
    border-radius: 15px;
}

.stat-card.wide {
    grid-column: 1 / -1;
}

.stat-card span {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.7rem;
}

.stat-card strong {
    font-size: 1.25rem;
}

.info-card {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding: 15px;
    border-radius: 15px;
}

.info-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border: 1px solid rgba(141, 238, 255, 0.3);
    border-radius: 999px;
    color: var(--cyan);
    font-weight: 900;
}

.info-card strong {
    font-size: 0.85rem;
}

.info-card p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.section-heading {
    margin: 3px 0 18px;
}

.mini-balance,
.collection-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.82rem;
}

.shop-list,
.pack-grid {
    display: grid;
    gap: 14px;
}

.shop-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(118px, 34%) 1fr;
    gap: 18px;
    overflow: hidden;
    padding: 17px;
    border-radius: 22px;
}

.shop-card::after {
    content: "";
    position: absolute;
    right: -5rem;
    bottom: -7rem;
    width: 16rem;
    height: 16rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(115, 86, 231, 0.16), transparent 65%);
    pointer-events: none;
}

.shop-pack-art {
    align-self: center;
    width: 100%;
    max-height: 280px;
    object-fit: contain;
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.4));
}

.shop-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.shop-card h3,
.pack-tile h3 {
    margin: 0;
    font-size: 1.15rem;
}

.shop-card p,
.pack-tile p {
    margin: 7px 0 14px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.pack-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.fact-chip {
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: #cce4ef;
    font-size: 0.65rem;
}

.price-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 11px;
    color: var(--gold);
    font-size: 1.2rem;
    font-weight: 900;
}

.buy-pack-button {
    min-height: 42px;
}

.pack-grid {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.pack-tile {
    position: relative;
    overflow: hidden;
    padding: 14px;
    border-radius: 18px;
    text-align: center;
}

.pack-tile img {
    width: min(100%, 150px);
    max-height: 210px;
    margin: 0 auto 8px;
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.42));
}

.pack-tile .primary-button {
    min-height: 39px;
    font-size: 0.76rem;
}

.subheading-row {
    margin: 26px 0 10px;
}

.subheading-row h3 {
    margin: 0;
    font-size: 0.9rem;
}

.history-list {
    display: grid;
    gap: 8px;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 13px;
}

.history-item strong {
    font-size: 0.8rem;
}

.history-item span {
    color: var(--muted);
    font-size: 0.67rem;
}

.empty-state {
    grid-column: 1 / -1;
    padding: 30px 18px;
    border: 1px dashed var(--line-bright);
    border-radius: 18px;
    color: var(--muted);
    text-align: center;
    font-size: 0.8rem;
}

.filter-row {
    display: flex;
    gap: 7px;
    margin: -2px -18px 16px;
    padding: 2px 18px 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.filter-row::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--muted);
    font-size: 0.69rem;
    cursor: pointer;
}

.filter-chip.is-active {
    border-color: rgba(141, 238, 255, 0.45);
    background: rgba(141, 238, 255, 0.1);
    color: var(--text);
}

.album-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.album-stat {
    padding: 12px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    text-align: center;
}

.album-stat span {
    display: block;
    color: var(--muted);
    font-size: 0.68rem;
    margin-bottom: 4px;
}

.album-stat strong {
    font-size: 1rem;
}

.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 13px;
}








































































.bottom-nav {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    min-height: 70px;
    padding: 7px max(7px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(7px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: rgba(5, 11, 19, 0.94);
    backdrop-filter: blur(18px);
}

.nav-button {
    position: relative;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 2px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font-size: 0.63rem;
    cursor: pointer;
}

.nav-button.is-active {
    background: rgba(141, 238, 255, 0.07);
    color: var(--cyan);
}

.nav-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.nav-badge {
    position: absolute;
    top: 2px;
    left: calc(50% + 10px);
    display: grid;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    place-items: center;
    border-radius: 999px;
    background: var(--danger);
    color: white;
    font-size: 0.58rem;
}

.modal-layer,
.pack-opening {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow-y: auto;
    background: rgba(1, 5, 10, 0.78);
    backdrop-filter: blur(12px);
}

.modal-card {
    width: min(100%, 440px);
    padding: 25px;
    border: 1px solid var(--line-bright);
    border-radius: 24px;
    background: linear-gradient(150deg, #102338, #07101b);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
}

.setup-card {
    text-align: center;
}

.setup-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
    border-radius: 20px;
}

.modal-card p {
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.55;
}

.field-label {
    display: block;
    margin: 18px 0 7px;
    color: #c4d5df;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: left;
}

.text-input {
    width: 100%;
    min-height: 48px;
    margin-bottom: 11px;
    padding: 0 14px;
    border: 1px solid var(--line-bright);
    border-radius: 12px;
    background: #050d17;
    color: var(--text);
}

.alt1-install-link {
    display: inline-block;
    margin-top: 15px;
    color: var(--cyan);
    font-size: 0.74rem;
}

.modal-error {
    min-height: 1.2em;
    margin-top: 10px;
    color: var(--danger);
    font-size: 0.72rem;
}

.pack-opening {
    z-index: 120;
    padding: 0;
    background: #02060b;
}

.opening-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 43%, rgba(78, 179, 229, 0.2), transparent 22rem),
        radial-gradient(circle at 62% 54%, rgba(130, 70, 217, 0.17), transparent 28rem),
        #02060b;
}

.opening-backdrop::before {
    content: "";
    position: absolute;
    inset: -50%;
    background-image:
        radial-gradient(circle, rgba(164, 236, 255, 0.7) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(181, 131, 255, 0.5) 0 1px, transparent 1.5px);
    background-position: 0 0, 21px 19px;
    background-size: 57px 57px, 83px 83px;
    opacity: 0.3;
    animation: star-drift 28s linear infinite;
}

@keyframes star-drift {
    to { transform: translate3d(120px, 80px, 0) rotate(4deg); }
}

.opening-content {
    position: relative;
    z-index: 2;
    width: min(100%, 1080px);
    min-height: 100%;
    padding: 18px;
}

.opening-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.icon-button {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

.rip-stage {
    position: relative;
    display: grid;
    min-height: calc(100vh - 110px);
    place-content: center;
    justify-items: center;
}

.pack-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(80vw, 460px);
    aspect-ratio: 1;
    transform: translate(-50%, -56%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(123, 219, 255, 0.25), rgba(120, 81, 220, 0.13) 42%, transparent 72%);
    animation: aura 2.6s ease-in-out infinite alternate;
}

@keyframes aura {
    to { transform: translate(-50%, -56%) scale(1.09); filter: brightness(1.2); }
}

.pack-shell {
    position: relative;
    z-index: 1;
    width: min(58vw, 290px);
    filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.55));
    transform-origin: center;
}

.pack-shell img {
    display: block;
    width: 100%;
}

.tear-strip {
    position: absolute;
    z-index: 3;
    top: 5.2%;
    right: 5.5%;
    left: 5.5%;
    height: 8%;
    border-top: 2px dashed rgba(220, 251, 255, 0.65);
    pointer-events: none;
}

.tear-flap {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    height: 14%;
    background: linear-gradient(180deg, rgba(181, 242, 255, 0.2), rgba(34, 86, 130, 0.3));
    clip-path: polygon(5% 0, 95% 0, 100% 75%, 68% 72%, 58% 87%, 42% 69%, 28% 86%, 0 73%);
    transform-origin: 3% 50%;
}

.pack-shell.is-ripping {
    animation: pack-shake 0.5s ease-in-out;
}

.pack-shell.is-ripping .tear-flap {
    animation: tear-away 1s cubic-bezier(.15,.78,.26,1) forwards;
}

.pack-shell.is-ripping::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 8%;
    left: 12%;
    width: 76%;
    height: 10%;
    background: #02060b;
    clip-path: polygon(0 41%, 15% 54%, 29% 29%, 46% 58%, 61% 34%, 77% 59%, 100% 33%, 100% 100%, 0 100%);
    animation: opening-gap 0.8s 0.28s both;
}

@keyframes pack-shake {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-2deg); }
    45% { transform: rotate(2deg); }
    70% { transform: rotate(-1deg); }
}

@keyframes tear-away {
    0% { transform: translate(0, 0) rotate(0); }
    45% { transform: translate(20%, -16%) rotate(12deg); }
    100% { transform: translate(170%, -85%) rotate(70deg); opacity: 0; }
}

@keyframes opening-gap {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

.rip-button {
    position: relative;
    z-index: 2;
    width: min(75vw, 290px);
    min-height: 50px;
    margin-top: 19px;
    border: 1px solid rgba(187, 245, 255, 0.75);
    background: linear-gradient(135deg, #168db9, #7051d5);
    box-shadow: 0 13px 35px rgba(68, 154, 219, 0.28);
}

.rip-copy {
    position: relative;
    z-index: 2;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 0.72rem;
}

.reveal-stage {
    display: grid;
    min-height: calc(100vh - 108px);
    align-content: center;
    justify-items: center;
    gap: 18px;
    padding: 24px 0 40px;
}

.reveal-progress {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.card-fan {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(6px, 1.5vw, 14px);
    width: min(100%, 1020px);
    perspective: 1400px;
}














#reveal-next,
#finish-opening {
    width: min(100%, 320px);
}

.toast-stack {
    position: fixed;
    z-index: 200;
    right: 14px;
    bottom: 84px;
    display: grid;
    width: min(calc(100% - 28px), 360px);
    gap: 8px;
    pointer-events: none;
}

.toast {
    padding: 12px 14px;
    border: 1px solid var(--line-bright);
    border-radius: 13px;
    background: rgba(8, 18, 29, 0.96);
    box-shadow: var(--shadow);
    color: #dceaf0;
    font-size: 0.76rem;
    animation: toast-in 0.24s ease both;
}

.toast.is-success {
    border-color: rgba(115, 239, 187, 0.45);
}

.toast.is-error {
    border-color: rgba(255, 111, 134, 0.5);
}

.toast.is-warning {
    border-color: rgba(242, 193, 92, 0.62);
    background: rgba(31, 24, 10, 0.97);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (min-width: 760px) {
    .app-shell {
        padding-bottom: 18px;
    }

    .main-content {
        padding: 26px;
    }

    .bottom-nav {
        position: sticky;
        top: 76px;
        z-index: 19;
        width: fit-content;
        min-height: auto;
        margin: 10px auto 0;
        grid-template-columns: repeat(4, 104px);
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 16px;
    }

    .nav-button {
        min-height: 46px;
        grid-auto-flow: column;
        gap: 7px;
        font-size: 0.72rem;
    }

    .nav-icon {
        font-size: 1rem;
    }

    .hero-card {
        padding: 28px;
    }

    .stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stat-card.wide {
        grid-column: auto;
    }

    .collection-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 720px) {
    .card-fan {
        grid-template-columns: repeat(6, 1fr);
        align-items: start;
        width: min(100%, 560px);
    }

    

    

    
}

@media (max-width: 520px) {
    .shop-card {
        grid-template-columns: 116px 1fr;
        gap: 12px;
        padding: 13px;
    }

    .shop-pack-art {
        max-height: 210px;
    }

    .collection-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opening-content {
        padding: 14px;
    }
}

@media (max-width: 390px) {
    .main-content {
        padding: 13px;
    }

    .topbar {
        padding: 10px 13px;
    }

    .currency-pill {
        min-width: 86px;
        padding: 8px 10px;
    }

    .hero-card {
        padding: 18px;
    }

    .xp-ring-wrap {
        gap: 15px;
    }

    .xp-ring {
        width: 110px;
        height: 110px;
    }

    .xp-ring-inner {
        width: 92px;
        height: 92px;
    }

    .shop-card {
        grid-template-columns: 92px 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
.rarity-spark {
    --spark-color: var(--epic);
    position: fixed;
    z-index: 10;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--spark-color);
    box-shadow: 0 0 14px var(--spark-color);
    pointer-events: none;
    animation: spark-burst 1.2s var(--delay, 0s) ease-out both;
}

.rarity-spark.rarity-legendary {
    --spark-color: var(--legendary);
    width: 9px;
    height: 9px;
}

.rarity-spark.rarity-mythic {
    --spark-color: var(--mythic);
    width: 10px;
    height: 10px;
}

.rarity-spark.rarity-godly {
    --spark-color: var(--godly);
    width: 12px;
    height: 12px;
}

@keyframes spark-burst {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0.2); opacity: 0; }
}

.native-xp-status {
    color: #8deeff !important;
    font-size: 0.7rem !important;
    line-height: 1.35;
}

.native-xp-status.is-warning {
    color: #f4cf67 !important;
}

.native-xp-status.is-live {
    color: #73efbb !important;
}


/* v1.3.0 diagnostics */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-shortcut {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(141, 238, 255, 0.06);
    color: var(--cyan);
    font-weight: 900;
    cursor: pointer;
}

.debug-heading {
    margin-bottom: 16px;
}

.debug-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.debug-summary-card,
.debug-card {
    border: 1px solid var(--line);
    background: linear-gradient(145deg, rgba(16, 31, 48, 0.96), rgba(8, 18, 29, 0.96));
    box-shadow: var(--shadow);
}

.debug-summary-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 13px;
    border-radius: 15px;
}

.debug-summary-card span {
    color: var(--muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.debug-summary-card strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.debug-card {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 18px;
}

.debug-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

.debug-card-heading h3 {
    margin: 4px 0 0;
    font-size: 1rem;
}

.debug-health-dot {
    width: 11px;
    height: 11px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--danger);
    box-shadow: 0 0 0 5px rgba(255, 111, 134, 0.1);
}

.debug-health-dot.is-good {
    background: var(--success);
    box-shadow: 0 0 0 5px rgba(115, 239, 187, 0.1);
}

.debug-kv-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
}

.debug-kv {
    display: grid;
    grid-template-columns: minmax(110px, 0.85fr) minmax(0, 1.15fr);
    gap: 9px;
    padding: 8px 9px;
    border: 1px solid rgba(148, 224, 255, 0.09);
    border-radius: 10px;
    background: rgba(3, 9, 15, 0.35);
    font-size: 0.73rem;
}

.debug-kv span:first-child {
    color: var(--muted);
}

.debug-kv span:last-child {
    overflow-wrap: anywhere;
    color: var(--text);
    text-align: right;
}

.debug-value-good { color: var(--success) !important; }
.debug-value-warn { color: var(--gold) !important; }
.debug-value-bad { color: var(--danger) !important; }

.debug-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.debug-actions .primary-button,
.debug-actions .ghost-button {
    min-height: 39px;
    padding: 8px 10px;
    font-size: 0.72rem;
}

.debug-output {
    max-height: 190px;
    margin: 9px 0 0;
    padding: 11px;
    overflow: auto;
    border: 1px solid rgba(148, 224, 255, 0.12);
    border-radius: 11px;
    background: #030910;
    color: #bdeaff;
    font: 0.68rem/1.5 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.debug-log-output {
    max-height: 330px;
}

.debug-payload-label {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.debug-time {
    color: var(--muted);
    font-size: 0.68rem;
    white-space: nowrap;
}

.debug-help {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.55;
}

@media (min-width: 700px) {
    .debug-summary-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .debug-kv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .debug-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 390px) {
    .debug-shortcut { display: none; }
    .currency-pill { min-width: 88px; }
    .debug-kv { grid-template-columns: 1fr; }
    .debug-kv span:last-child { text-align: left; }
}






.card-detail-card {
    width: min(900px, calc(100vw - 32px));
    max-width: 900px;
    padding: 24px;
}

.card-detail-layout {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 22px;
    align-items: start;
}



.card-detail-info h2 {
    margin: 0 0 8px;
    font-size: 1.8rem;
}

.card-detail-subtitle,
.card-detail-description {
    color: var(--muted);
    line-height: 1.5;
}

.card-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.card-detail-meta span {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.035);
    font-size: 0.72rem;
}

.card-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

@media (max-width: 760px) {
    .album-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-detail-layout {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== */
/* RS3 TCG v1.8.0: Chronicle UI                                                */
/* ========================================================================== */

:root {
    --chronicle-black: #0b0907;
    --chronicle-ink: #15100b;
    --chronicle-panel: #21180f;
    --chronicle-panel-2: #2c2014;
    --chronicle-bronze: #8f6335;
    --chronicle-gold: #e3bd69;
    --chronicle-gold-soft: #f5dc9a;
    --chronicle-blue: #65a9d8;
    --chronicle-green: #79ae76;
    --chronicle-red: #b85b4c;
}

html,
body {
    background: var(--chronicle-black);
}

body {
    background:
        radial-gradient(circle at 12% -5%, rgba(210, 151, 65, 0.25), transparent 30rem),
        radial-gradient(circle at 88% 16%, rgba(68, 111, 145, 0.13), transparent 34rem),
        linear-gradient(135deg, #24180e 0%, #100d0a 48%, #090806 100%);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.ambient {
    opacity: 0.11;
}

.app-shell {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding-bottom: 86px;
}

.desktop-rail {
    display: none;
}

.topbar {
    min-height: 72px;
    border-bottom-color: rgba(227, 189, 105, 0.2);
    background: rgba(13, 10, 8, 0.88);
}

.brand-icon,
.rail-brand img {
    border: 1px solid rgba(227, 189, 105, 0.3);
    background: #100d0a;
    box-shadow: 0 0 24px rgba(227, 189, 105, 0.14);
}

.brand-block h1 {
    color: var(--chronicle-gold-soft);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sound-toggle,
.debug-shortcut {
    display: grid;
    width: 38px;
    min-height: 38px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(227, 189, 105, 0.22);
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    color: var(--chronicle-gold-soft);
    cursor: pointer;
}

.sound-toggle.is-muted {
    color: var(--muted);
    opacity: 0.65;
}

.currency-pill {
    border-color: rgba(227, 189, 105, 0.35);
    background: linear-gradient(180deg, rgba(227, 189, 105, 0.14), rgba(126, 79, 34, 0.06));
    color: var(--chronicle-gold-soft);
}

.main-content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px;
}

.app-creator-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding: 20px 4px 4px;
    border-top: 1px solid rgba(227,189,105,.14);
    color: #8f8371;
    font-size: .68rem;
}
.main-content > .page.is-active {
    align-self: stretch;
    width: 100%;
    margin-bottom: 42px;
}
.app-creator-footer > span { display:flex; align-items:center; gap:5px; }
.app-creator-footer strong { color:#e8d9bc; }
.app-creator-footer .creator-heart { filter:drop-shadow(0 0 7px rgba(224,75,89,.34)); }
.app-creator-footer .creator-coffee {
    color:inherit;
    font-size:.88rem;
    line-height:1;
    text-decoration:none;
    filter:drop-shadow(0 0 7px rgba(227,189,105,.25));
    transition:transform .16s ease,filter .16s ease;
}
.app-creator-footer .creator-coffee:hover { transform:translateY(-1px) rotate(-5deg); filter:drop-shadow(0 0 9px rgba(227,189,105,.48)); }
.app-creator-footer .creator-support-link {
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:#e7c978;
    font-weight:900;
    text-decoration:none;
}
.app-creator-footer .creator-support-link:hover { color:#ffe6a5; }

.hero-card,
.info-card,
.stat-card,
.shop-card,
.pack-tile,
.history-item,
.debug-card,
.debug-summary-card,
.shop-intro {
    border-color: rgba(227, 189, 105, 0.18);
    background:
        linear-gradient(145deg, rgba(45, 32, 20, 0.96), rgba(21, 16, 11, 0.97));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.hero-card {
    min-height: 390px;
    padding: clamp(22px, 4vw, 42px);
    border-radius: 28px;
    background:
        radial-gradient(circle at 84% 12%, rgba(101, 169, 216, 0.14), transparent 22rem),
        radial-gradient(circle at 7% 92%, rgba(227, 189, 105, 0.15), transparent 25rem),
        linear-gradient(135deg, rgba(48, 35, 22, 0.98), rgba(17, 14, 11, 0.98));
}

.hero-card::after {
    content: "CHRONICLE";
    position: absolute;
    right: -0.04em;
    bottom: -0.24em;
    color: rgba(227, 189, 105, 0.035);
    font-family: Georgia, serif;
    font-size: clamp(5rem, 13vw, 10rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    pointer-events: none;
}

.eyebrow {
    color: var(--chronicle-gold);
    letter-spacing: 0.16em;
}

.profile-row h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 6vw, 3.6rem);
    color: #fff8e9;
}

.native-xp-status.is-live {
    color: var(--chronicle-green);
}

.status-orb.is-tracking {
    background: var(--chronicle-green);
    box-shadow: 0 0 22px rgba(121, 174, 118, 0.72);
}

.xp-ring {
    background: conic-gradient(var(--chronicle-gold) var(--xp-progress, 0%), rgba(227, 189, 105, 0.1) 0);
    box-shadow: 0 0 40px rgba(227, 189, 105, 0.09);
}

.xp-ring-inner {
    border-color: rgba(227, 189, 105, 0.12);
    background: #15100c;
}

.primary-button,
.rip-button {
    border-color: #f0d18b;
    background: linear-gradient(135deg, #d8a84d, #8c5c2d);
    color: #180f07;
    box-shadow: 0 10px 24px rgba(186, 126, 49, 0.25);
    font-weight: 900;
}

.primary-button:hover,
.rip-button:hover {
    filter: brightness(1.08);
}

.ghost-button,
.icon-button {
    border-color: rgba(227, 189, 105, 0.24);
    background: rgba(255,255,255,.025);
}

.stat-grid {
    gap: 12px;
}

.stat-card {
    border-radius: 18px;
}

.stat-card strong {
    color: #fff4d8;
}

.section-heading h2 {
    font-family: Georgia, "Times New Roman", serif;
    color: #fff3d7;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.shop-intro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    margin-bottom: 16px;
    padding: 22px;
    border-radius: 22px;
}

.shop-intro h3 {
    margin: 0 0 8px;
    font-family: Georgia, serif;
    font-size: 1.4rem;
}

.shop-intro p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.shop-intro-mark {
    color: var(--chronicle-gold);
    font-size: 4.5rem;
    opacity: 0.36;
}

.shop-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 470px), 1fr));
    gap: 18px;
}

.shop-card {
    min-height: 345px;
    grid-template-columns: minmax(150px, 38%) 1fr;
    gap: 20px;
    padding: 22px;
    border-radius: 26px;
}

.shop-card[data-pack-set="wise_old_man"] {
    border-color: rgba(147, 121, 213, 0.34);
    background:
        radial-gradient(circle at 15% 30%, rgba(132, 99, 205, 0.14), transparent 18rem),
        linear-gradient(145deg, rgba(39, 29, 47, 0.98), rgba(17, 14, 20, 0.98));
}

.shop-card[data-pack-set="origin"] {
    border-color: rgba(227, 189, 105, 0.28);
}


.shop-card[data-pack-set="boss"] {
    border-color: rgba(205, 73, 73, 0.42);
    background:
        radial-gradient(circle at 16% 30%, rgba(187, 47, 47, 0.18), transparent 18rem),
        linear-gradient(145deg, rgba(45, 22, 19, 0.98), rgba(18, 12, 12, 0.98));
}

.shop-card[data-pack-set="boss"] .shop-pack-halo {
    background: radial-gradient(circle, rgba(231, 76, 60, 0.28), transparent 70%);
}

.album-stat.boss {
    border-color: rgba(225, 91, 76, 0.42);
    background: linear-gradient(145deg, rgba(100, 34, 27, 0.22), rgba(255,255,255,0.025));
}



.shop-pack-visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 260px;
}

.shop-pack-halo {
    position: absolute;
    width: 85%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 189, 105, 0.18), transparent 70%);
    filter: blur(8px);
}

.shop-card[data-pack-set="wise_old_man"] .shop-pack-halo {
    background: radial-gradient(circle, rgba(147, 121, 213, 0.26), transparent 70%);
}

.shop-pack-art {
    position: relative;
    z-index: 1;
    max-height: 300px;
    transition: transform 0.28s ease;
}

.shop-card:hover .shop-pack-art {
    transform: translateY(-5px) rotate(-1deg);
}

.shop-card-content h3 {
    font-family: Georgia, serif;
    font-size: 1.7rem;
    color: #fff2d6;
}

.shop-buy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.shop-buy-row .price-row {
    margin: 0;
}

.foil-fact {
    border-color: rgba(118, 207, 233, 0.3);
    color: #bcecff;
}

.pack-grid {
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: 16px;
}

.pack-tile {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
    border-radius: 22px;
}

.pack-tile img {
    flex: 1;
    width: min(100%, 180px);
    max-height: 230px;
}

.album-summary {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.album-stat {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(227, 189, 105, 0.16);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(49, 35, 22, 0.9), rgba(22, 17, 12, 0.94));
    text-align: left;
}

.album-stat.primary {
    background:
        radial-gradient(circle at 100% 0%, rgba(227, 189, 105, 0.12), transparent 11rem),
        linear-gradient(145deg, rgba(52, 36, 21, 0.98), rgba(23, 17, 11, 0.98));
}

.album-stat.foil {
    border-color: rgba(125, 210, 237, 0.28);
    background:
        linear-gradient(120deg, rgba(102, 180, 224, 0.09), rgba(179, 106, 216, 0.08), rgba(220, 182, 88, 0.08)),
        #181410;
}

.album-stat span,
.album-stat small {
    display: block;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.album-stat strong {
    display: block;
    margin: 5px 0 2px;
    color: #fff1d2;
    font-size: 1.15rem;
}

.album-stat small {
    font-size: 0.62rem;
}

.collection-toolbar {
    display: grid;
    grid-template-columns: minmax(210px, 1.8fr) repeat(3, minmax(120px, .8fr)) auto;
    gap: 9px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid rgba(227, 189, 105, 0.14);
    border-radius: 18px;
    background: rgba(11, 9, 7, 0.42);
}

.collection-toolbar label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.collection-toolbar label > span {
    color: var(--muted);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.collection-toolbar input,
.collection-toolbar select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(227, 189, 105, 0.18);
    border-radius: 10px;
    background: #120e0a;
    color: var(--text);
}

.foil-filter {
    align-self: end;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(125, 210, 237, 0.22);
    border-radius: 10px;
    background: rgba(84, 164, 202, 0.06);
    color: #bde9fa;
    cursor: pointer;
}

.foil-filter.is-active {
    background: linear-gradient(110deg, rgba(95, 186, 220, .22), rgba(174, 98, 210, .18), rgba(225, 187, 91, .18));
    box-shadow: 0 0 20px rgba(117, 193, 222, 0.12);
}

.foil-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #72d9ff, #d489ff, #ffe07a);
}

.filter-row {
    margin: 0 0 15px;
    padding: 0 0 4px;
}

.filter-chip {
    border-color: rgba(227, 189, 105, 0.16);
    background: rgba(255,255,255,.025);
}

.filter-chip.is-active {
    border-color: rgba(227, 189, 105, 0.5);
    background: rgba(227, 189, 105, 0.12);
    color: var(--chronicle-gold-soft);
}

.album-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 16px;
}



























.pack-opening {
    background:
        radial-gradient(circle at 50% 42%, rgba(227, 189, 105, 0.11), transparent 24rem),
        rgba(6, 5, 4, 0.94);
}

.opening-content {
    width: min(1280px, 100%);
}

.opening-header h2 {
    font-family: Georgia, serif;
    color: #fff1d1;
}

.pack-shell {
    width: min(52vw, 260px);
}

.rip-stage {
    min-height: calc(100vh - 110px);
}

.reveal-stage {
    min-height: calc(100vh - 110px);
    gap: 14px;
}

.reveal-headline {
    text-align: center;
}

.reveal-headline p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: .75rem;
}

.card-fan {
    width: min(100%, 1150px);
    gap: clamp(8px, 1.4vw, 18px);
}





.reveal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: min(100%, 680px);
}

.reveal-actions > button {
    width: auto;
    min-width: 180px;
}

.rarity-spark.rarity-foil {
    --spark-color: #8ee7ff;
}

.modal-card {
    border-color: rgba(227, 189, 105, 0.28);
    background:
        radial-gradient(circle at 100% 0%, rgba(227, 189, 105, 0.1), transparent 20rem),
        linear-gradient(145deg, #2a1e13, #110e0a);
}

.card-detail-card {
    position: relative;
}

.bottom-nav {
    grid-template-columns: repeat(5, 1fr);
    border-top-color: rgba(227, 189, 105, 0.18);
    background: rgba(12, 10, 8, 0.95);
}

.nav-button.is-active {
    background: rgba(227, 189, 105, 0.1);
    color: var(--chronicle-gold-soft);
}

@media (min-width: 920px) {
    .app-shell {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        min-height: 100vh;
        padding: 0;
    }

    .desktop-rail {
        position: sticky;
        top: 0;
        grid-row: 1;
        display: flex;
        height: 100vh;
        flex-direction: column;
        padding: 20px 14px;
        border-right: 1px solid rgba(227, 189, 105, 0.15);
        background:
            radial-gradient(circle at 30% 0%, rgba(227, 189, 105, 0.12), transparent 18rem),
            rgba(12, 9, 7, 0.92);
        backdrop-filter: blur(16px);
    }

    .rail-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 6px 22px;
    }

    .rail-brand img {
        width: 46px;
        height: 46px;
        border-radius: 13px;
    }

    .rail-brand strong,
    .rail-brand span {
        display: block;
    }

    .rail-brand strong {
        color: #fff0cc;
        letter-spacing: .08em;
    }

    .rail-brand span {
        color: var(--muted);
        font-family: Georgia, serif;
        font-size: .72rem;
    }

    .rail-nav {
        display: grid;
        gap: 7px;
        overflow-y: auto;
        min-height: 0;
        scrollbar-width: thin;
    }

    .rail-button {
        display: grid;
        grid-template-columns: 30px 1fr;
        align-items: center;
        min-height: 48px;
        padding: 0 12px;
        border: 1px solid transparent;
        border-radius: 13px;
        background: transparent;
        color: var(--muted);
        text-align: left;
        cursor: pointer;
    }

    .rail-button span {
        color: var(--chronicle-gold);
        font-size: 1rem;
    }

    .rail-button b {
        font-size: .78rem;
    }

    .rail-button:hover,
    .rail-button.is-active {
        border-color: rgba(227, 189, 105, 0.2);
        background: rgba(227, 189, 105, 0.08);
        color: #fff0d2;
    }

    .rail-footer {
        margin-top: 12px;
        padding: 16px 10px 4px;
        border-top: 1px solid rgba(227, 189, 105, 0.12);
    }

    .rail-footer span,
    .rail-footer small {
        display: block;
    }

    .rail-footer span {
        color: var(--chronicle-gold);
        font-size: .62rem;
        letter-spacing: .14em;
    }

    .rail-footer small {
        margin-top: 4px;
        color: var(--muted);
    }

    .topbar { display: none; }

    .main-content {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        padding: 28px 34px 42px;
    }

    .bottom-nav {
        display: none;
    }
}

@media (min-width: 920px) {
    .rail-wallet {
        display: grid;
        grid-template-columns: 34px minmax(0,1fr);
        align-items: center;
        gap: 9px;
        min-height: 58px;
        padding: 9px 11px;
        border: 1px solid rgba(227,189,105,.28);
        border-radius: 14px;
        color: #fff0cc;
        background: linear-gradient(135deg,rgba(227,189,105,.17),rgba(227,189,105,.05));
        text-align: left;
        cursor: pointer;
    }
    .rail-wallet-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:#f1cb70; background:rgba(227,189,105,.11); }
    .rail-wallet-icon .ui-icon { width:19px; height:19px; }
    .rail-wallet > .rail-wallet-copy { display:grid; gap:2px; min-width:0; }
    .rail-wallet small { color:var(--muted); font-size:.57rem; }
    .rail-wallet strong { color:var(--chronicle-gold-soft); font-size:.92rem; }
    .rail-wallet-top { margin:0 0 10px; }
    .rail-profile-card {
        display:grid;
        grid-template-columns:34px minmax(0,1fr);
        align-items:center;
        gap:9px;
        margin-top:auto;
        min-height:58px;
        padding:9px 11px;
        border:1px solid rgba(227,189,105,.2);
        border-radius:14px;
        color:#fff0cc;
        background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(227,189,105,.035));
        text-decoration:none;
        overflow:hidden;
    }
    .rail-profile-card:hover { border-color:rgba(227,189,105,.42); background:rgba(227,189,105,.075); }
    .rail-profile-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:#f1cb70; background:rgba(227,189,105,.09); overflow:hidden; }
    .rail-profile-icon img { width:100%; height:100%; object-fit:cover; object-position:center; }
    .rail-profile-icon .ui-icon { width:19px; height:19px; }
    .rail-profile-card > span:last-child { display:grid; gap:2px; min-width:0; }
    .rail-profile-card small { color:var(--muted); font-size:.57rem; }
    .rail-profile-name { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--chronicle-gold-soft); font-size:.82rem; line-height:1.35; transform-origin:left center; }
    .rail-account-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
    .rail-account-actions a,.rail-account-actions button { min-height:34px; display:grid; place-items:center; padding:0 7px; border:1px solid rgba(227,189,105,.12); border-radius:9px; color:var(--muted); background:rgba(255,255,255,.02); font-size:.58rem; font-weight:800; cursor:pointer; }
    .rail-account-actions a:hover,.rail-account-actions button:hover { color:#fff0cc; border-color:rgba(227,189,105,.3); }
    .rail-account-actions .rail-discord-link {
        grid-column:1/-1;
        display:flex;
        gap:6px;
        color:#dfe2ff;
        border-color:rgba(112,124,255,.26);
        background:linear-gradient(135deg,rgba(88,101,242,.17),rgba(88,101,242,.055));
    }
    .rail-account-actions .rail-discord-link:hover { color:#fff; border-color:rgba(135,145,255,.52); background:rgba(88,101,242,.18); }
    .rail-account-actions .rail-discord-link span { color:inherit; font-size:.68rem; }
}

@keyframes rs3tcg-username-sparkle {
    0%,100% { text-shadow:0 0 4px currentColor,0 0 10px currentColor; filter:brightness(1); }
    24% { text-shadow:-4px -2px 2px #fff,0 0 9px currentColor,0 0 18px currentColor; filter:brightness(1.12); }
    52% { text-shadow:5px 1px 2px #fff,0 0 12px currentColor,0 0 24px currentColor; filter:brightness(1.28); }
    76% { text-shadow:1px -5px 2px #fff,0 0 8px currentColor,0 0 17px currentColor; filter:brightness(1.08); }
}
@keyframes rs3tcg-username-shimmer {
    0% { background-position:0% 50%; text-shadow:0 0 5px rgba(255,255,255,.2); }
    50% { background-position:100% 50%; text-shadow:0 0 12px rgba(255,255,255,.65); }
    100% { background-position:0% 50%; text-shadow:0 0 5px rgba(255,255,255,.2); }
}
@keyframes rs3tcg-username-pulse {
    0%,100% { transform:scale(1); filter:brightness(1); }
    50% { transform:scale(1.045); filter:brightness(1.2); }
}
@keyframes rs3tcg-username-rainbow {
    0% { color:#ff5fa2; text-shadow:0 0 10px #ff5fa2; }
    20% { color:#ffdf6b; text-shadow:0 0 10px #ffdf6b; }
    40% { color:#72f1b8; text-shadow:0 0 10px #72f1b8; }
    60% { color:#67d8ff; text-shadow:0 0 10px #67d8ff; }
    80% { color:#a78bfa; text-shadow:0 0 10px #a78bfa; }
    100% { color:#ff5fa2; text-shadow:0 0 10px #ff5fa2; }
}
@keyframes rs3tcg-username-float {
    0%,100% { transform:translateY(0); }
    50% { transform:translateY(-2px); }
}
@keyframes rs3tcg-username-aura {
    0%,100% { text-shadow:0 0 5px currentColor,0 0 12px currentColor; filter:brightness(1); }
    50% { text-shadow:0 0 8px #fff,0 0 17px currentColor,0 0 28px currentColor; filter:brightness(1.24); }
}
@keyframes rs3tcg-username-twinkle {
    0%,100% { text-shadow:-3px 0 2px #fff,0 0 8px currentColor; }
    33% { text-shadow:3px -2px 2px #fff,0 0 14px currentColor; }
    66% { text-shadow:0 3px 2px #fff,0 0 10px currentColor; }
}

@media (max-width: 1050px) {
    .album-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .collection-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .collection-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .main-content > .page.is-active { margin-bottom:30px; }
    .app-creator-footer { align-items:flex-start; flex-direction:column; margin-top:auto; padding-inline:2px; }
    .app-creator-footer > span { flex-wrap:wrap; }
}

@media (max-width: 720px) {
    .main-content {
        padding: 14px;
    }

    .hero-card {
        min-height: auto;
        padding: 20px;
    }

    .shop-intro-mark {
        display: none;
    }

    .shop-card {
        grid-template-columns: 120px minmax(0, 1fr);
        min-height: 0;
        padding: 14px;
    }

    .shop-pack-visual {
        min-height: 210px;
    }

    .shop-buy-row {
        align-items: stretch;
        flex-direction: column;
    }

    .album-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .album-stat.primary {
        grid-column: 1 / -1;
    }

    .collection-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .foil-filter {
        width: 100%;
    }

    .album-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .card-fan {
        grid-template-columns: repeat(6, 1fr);
    }

    .reveal-actions {
        flex-wrap: wrap;
    }

    .reveal-actions > button {
        min-width: min(44vw, 220px);
    }
}

@media (max-width: 430px) {
    .shop-card {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .shop-pack-visual {
        min-height: 170px;
    }

    .collection-toolbar {
        grid-template-columns: 1fr;
    }

    .collection-search {
        grid-column: auto;
    }

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

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

@media (min-width: 760px) and (max-width: 919px) {
    .bottom-nav {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        margin: 0;
        grid-template-columns: repeat(5, 1fr);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
    }
}

.opening-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 620px);
}

.opening-summary > div {
    padding: 12px;
    border: 1px solid rgba(227, 189, 105, 0.16);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    text-align: center;
}

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

.opening-summary span {
    color: var(--muted);
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.opening-summary strong {
    margin-top: 4px;
    color: #fff0ce;
}

.opening-summary .foil-summary {
    border-color: rgba(115, 211, 241, .3);
    background: linear-gradient(110deg, rgba(89,185,222,.1), rgba(175,100,211,.08), rgba(225,186,91,.08));
}

.fan-disclaimer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 30px;
    padding: 14px 2px;
    border-top: 1px solid rgba(227, 189, 105, 0.12);
    color: var(--muted);
    font-size: .68rem;
}

.fan-disclaimer strong {
    color: var(--chronicle-gold-soft);
}

@media (max-width: 620px) {
    .fan-disclaimer {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}

/* ========================================================================== */
/* RS3 TCG v1.9.0: Shop-first player shell                                    */
/* ========================================================================== */

body.modal-open {
    overflow: hidden;
}

.background-tracker-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 14px 0 20px;
    padding: 13px 15px;
    border: 1px solid rgba(227, 189, 105, 0.18);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(39, 29, 19, 0.92), rgba(18, 14, 10, 0.96));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.background-tracker-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.background-tracker-main .status-orb {
    flex: 0 0 auto;
}

.background-tracker-main strong {
    display: block;
    color: var(--chronicle-gold-soft);
    font-size: 0.86rem;
}

.background-tracker-main p,
.background-tracker-main small {
    display: block;
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.69rem;
    line-height: 1.35;
}

.background-tracker-main .native-xp-status.is-live {
    color: var(--chronicle-green);
}

.background-tracker-main .native-xp-status.is-warning {
    color: #e5a061;
}

.bottom-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-detail-close {
    z-index: 20;
    display: grid;
    width: 42px;
    min-height: 42px;
    place-items: center;
    border-color: rgba(227, 189, 105, 0.45);
    background: rgba(15, 11, 8, 0.94);
    color: #fff4d7;
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
}

.card-detail-close:hover,
.card-detail-close:focus-visible {
    border-color: var(--chronicle-gold-soft);
    background: rgba(86, 57, 28, 0.98);
}

.card-detail-modal,
#card-detail-modal {
    z-index: 260;
}

.card-detail-card {
    isolation: isolate;
}



@media (max-width: 680px) {
    .background-tracker-card {
        align-items: stretch;
        flex-direction: column;
    }

    .background-tracker-card .ghost-button {
        width: 100%;
    }
}








.collection-pagination {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 22px 0 6px;
    color: var(--muted);
    font-size: .74rem;
}

.collection-pagination .primary-button {
    width: min(100%, 320px);
}


/* v2.0.1 card-layout repair ------------------------------------------------ */
.card-code,
#card-detail-code {
    display: none !important;
}





















































.card-detail-description {
    white-space: pre-wrap;
}

.album-grid {
    grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
}

@media (max-width: 680px) {
    .album-grid {
        grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    }

    
}

/* v2.1.0 pack-opening system ---------------------------------------------- */
.pack-stack-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-content: stretch;
    justify-items: stretch;
    width: 100%;
}

.pack-stack-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 220px;
}

.pack-count-badge {
    position: absolute;
    z-index: 4;
    top: 4px;
    right: 4px;
    min-width: 42px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 224, 151, 0.48);
    border-radius: 999px;
    background: rgba(13, 10, 7, 0.94);
    color: #fff0c6;
    box-shadow: 0 8px 18px rgba(0,0,0,.36);
    font-size: .72rem;
    font-weight: 900;
}

.pack-stack-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
}

.pack-stack-actions button {
    min-width: 0;
    padding-inline: 8px;
}

.pack-stack-actions button:disabled {
    opacity: .34;
    cursor: not-allowed;
}

.opening-batch-label {
    position: relative;
    z-index: 3;
    margin-top: 13px;
    color: #d8c5a3;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#opening-batch-progress {
    margin-left: 5px;
    color: var(--chronicle-gold-soft, #efd59b);
    font-weight: 900;
}

/* The wrapper is physically layered: cards behind the foil, a seam across
   the top, then two body halves that crumple away after the seal tears. */
.pack-shell {
    width: min(54vw, 280px);
    aspect-ratio: 0.67;
    perspective: 1100px;
    filter: drop-shadow(0 30px 30px rgba(0, 0, 0, 0.58));
}

.wrapper-body,
.wrapper-body > img,
.wrapper-gloss,
.wrapper-crinkle,
.wrapper-half,
.opening-slit,
.pack-seam,
.tear-strip,
.tear-flap,
.pack-card-stack {
    position: absolute;
}

.wrapper-body {
    inset: 0;
    z-index: 4;
    overflow: hidden;
    transform-origin: 50% 92%;
    backface-visibility: hidden;
}

.wrapper-body > img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.wrapper-gloss {
    inset: 2% 4%;
    z-index: 2;
    border-radius: 8% / 5%;
    background:
        linear-gradient(104deg, transparent 0 28%, rgba(255,255,255,.19) 36%, transparent 45% 64%, rgba(255,255,255,.08) 72%, transparent 80%),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 20% 78%, rgba(0,0,0,.24));
    mix-blend-mode: screen;
    opacity: .78;
    pointer-events: none;
}

.wrapper-crinkle {
    z-index: 3;
    width: 2px;
    height: 78%;
    top: 12%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.28), rgba(0,0,0,.28), transparent);
    opacity: .4;
    transform: rotate(4deg);
}

.wrapper-crinkle-a { left: 23%; }
.wrapper-crinkle-b { right: 19%; transform: rotate(-5deg); }

.pack-seam {
    z-index: 10;
    top: 5.4%;
    left: 5%;
    width: 90%;
    height: 9%;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.34);
    border-bottom: 1px solid rgba(0,0,0,.4);
    background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(0,0,0,.14));
    box-shadow: inset 0 1px rgba(255,255,255,.14), inset 0 -1px rgba(0,0,0,.25);
    pointer-events: none;
}

.pack-seam span {
    position: absolute;
    inset: 50% 0 auto;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(255,244,214,.8) 0 6px, transparent 6px 10px);
}

.tear-strip {
    z-index: 12;
    top: 4.6%;
    left: 4%;
    width: 92%;
    height: 11%;
    border: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
    transform-origin: 0 50%;
    pointer-events: none;
}

.tear-strip::before {
    content: "";
    position: absolute;
    left: 0;
    top: 54%;
    width: 0;
    height: 3px;
    background:
        repeating-linear-gradient(90deg, #f3e8cf 0 5px, #6e5c42 5px 7px, transparent 7px 10px);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
}

.tear-grip {
    position: absolute;
    right: -10px;
    top: 26%;
    width: 22px;
    height: 48%;
    border-radius: 3px 10px 10px 3px;
    background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.38), rgba(0,0,0,.18));
    box-shadow: 2px 4px 8px rgba(0,0,0,.38);
}

.tear-flap {
    z-index: 11;
    top: 0;
    left: 1.5%;
    width: 97%;
    height: 16%;
    transform-origin: 5% 72%;
    clip-path: polygon(1% 0, 99% 0, 98% 74%, 88% 68%, 80% 82%, 69% 69%, 59% 86%, 48% 70%, 37% 84%, 27% 68%, 16% 81%, 2% 70%);
    background:
        linear-gradient(100deg, rgba(255,255,255,.12), transparent 32%, rgba(255,255,255,.16) 55%, transparent 78%),
        rgba(58, 44, 28, .42);
    backdrop-filter: brightness(1.08);
    pointer-events: none;
}

.opening-slit {
    z-index: 8;
    top: 11.5%;
    left: 12%;
    width: 76%;
    height: 5%;
    border-radius: 50%;
    background: radial-gradient(ellipse, #020100 0 48%, rgba(0,0,0,.75) 49% 62%, transparent 68%);
    opacity: 0;
    transform: scaleX(.08) scaleY(.3);
    pointer-events: none;
}

.pack-card-stack {
    z-index: 3;
    left: 50%;
    bottom: 8%;
    width: 62%;
    aspect-ratio: 218 / 293;
    transform: translate(-50%, 14%) scale(.78);
    opacity: 0;
    pointer-events: none;
}

.pack-card-stack img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 12px 20px rgba(0,0,0,.45);
}

.pack-card-stack img:nth-child(1) { transform: translate(-5px, 5px) rotate(-2deg); }
.pack-card-stack img:nth-child(2) { transform: translate(4px, 2px) rotate(1.5deg); }
.pack-card-stack img:nth-child(3) { transform: none; }
.pack-card-stack img:nth-child(4) { transform: translate(-2px, -2px) rotate(-.8deg); }
.pack-card-stack img:nth-child(5) { transform: translate(2px, -4px) rotate(.7deg); }

.wrapper-half {
    z-index: 9;
    top: 13%;
    bottom: 0;
    width: 50%;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(25,17,10,.6));
}

.wrapper-half-left { left: 0; transform-origin: 100% 30%; }
.wrapper-half-right { right: 0; transform-origin: 0 30%; }

.pack-shell.is-ripping {
    animation: realistic-wrapper-grip .34s cubic-bezier(.2,.8,.2,1) both;
}

.pack-shell.is-ripping .tear-strip::before {
    animation: realistic-seam-rip .72s steps(13, end) .18s forwards;
}

.pack-shell.is-ripping .tear-grip {
    animation: realistic-grip-pull .76s cubic-bezier(.15,.68,.18,1) .12s forwards;
}

.pack-shell.is-ripping .tear-flap {
    animation: realistic-foil-peel 1.02s cubic-bezier(.18,.72,.19,1) .48s forwards;
}

.pack-shell.is-ripping .wrapper-body {
    animation: realistic-wrapper-tension .8s ease .12s both;
}

.pack-shell.is-opened .opening-slit {
    animation: realistic-slit-open .45s cubic-bezier(.2,.8,.2,1) forwards;
}

.pack-shell.is-opened .wrapper-half {
    opacity: .82;
}

.pack-shell.is-opened .wrapper-half-left {
    animation: realistic-left-crumple .76s cubic-bezier(.15,.75,.2,1) .18s forwards;
}

.pack-shell.is-opened .wrapper-half-right {
    animation: realistic-right-crumple .76s cubic-bezier(.15,.75,.2,1) .18s forwards;
}

.pack-shell.is-extracted .pack-card-stack {
    animation: realistic-card-extract .62s cubic-bezier(.14,.82,.2,1) forwards;
}

.pack-shell.is-extracted .wrapper-body {
    animation: realistic-wrapper-collapse .65s cubic-bezier(.2,.7,.2,1) forwards;
}

@keyframes realistic-wrapper-grip {
    0% { transform: rotate(0) scale(1); }
    20% { transform: rotate(-1.4deg) scale(.992, 1.008); }
    52% { transform: rotate(1.1deg) scale(1.008, .994); }
    100% { transform: rotate(-.4deg) scale(.995, 1.005); }
}

@keyframes realistic-seam-rip {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes realistic-grip-pull {
    0% { transform: translateX(0) rotate(0); }
    35% { transform: translateX(24%) rotate(-6deg); }
    100% { transform: translateX(520%) translateY(-32%) rotate(-28deg); opacity: 0; }
}

@keyframes realistic-foil-peel {
    0% { transform: none; filter: brightness(1); }
    25% { transform: translate(3%, -5%) rotate(5deg) skewX(-4deg); }
    62% { transform: translate(30%, -28%) rotate(23deg) skewX(-9deg); }
    100% { transform: translate(120%, -105%) rotate(74deg) scale(.76); opacity: 0; filter: brightness(1.35); }
}

@keyframes realistic-wrapper-tension {
    0%, 100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
    44% { clip-path: polygon(0 0,100% 0,98% 100%,2% 100%); transform: scaleX(.985); }
    70% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); transform: scaleX(1.01); }
}

@keyframes realistic-slit-open {
    from { opacity: 0; transform: scaleX(.08) scaleY(.3); }
    to { opacity: 1; transform: scaleX(1) scaleY(1); }
}

@keyframes realistic-left-crumple {
    0% { transform: none; opacity: .82; }
    55% { transform: translate(-9%, 5%) rotateY(24deg) rotateZ(-4deg) skewY(3deg); }
    100% { transform: translate(-34%, 28%) rotateY(62deg) rotateZ(-18deg) scale(.82); opacity: 0; }
}

@keyframes realistic-right-crumple {
    0% { transform: none; opacity: .82; }
    55% { transform: translate(9%, 6%) rotateY(-24deg) rotateZ(4deg) skewY(-3deg); }
    100% { transform: translate(34%, 30%) rotateY(-62deg) rotateZ(18deg) scale(.82); opacity: 0; }
}

@keyframes realistic-card-extract {
    0% { transform: translate(-50%, 14%) scale(.78); opacity: 0; }
    18% { opacity: 1; }
    68% { transform: translate(-50%, -44%) scale(.98); opacity: 1; }
    100% { transform: translate(-50%, -62%) scale(1.04); opacity: 1; }
}

@keyframes realistic-wrapper-collapse {
    0% { transform: scale(1); opacity: 1; }
    56% { transform: scale(.94, .78) translateY(13%); opacity: .76; }
    100% { transform: scale(.72, .42) translateY(70%); opacity: 0; }
}

/* Opening cards use the exact display footprint approved in the reference:
   218 × 293 at full desktop size, scaling only when the viewport requires it. */
.card-fan {
    --opening-card-width: clamp(164px, 17vw, 218px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(10px, 1.25vw, 16px);
    width: min(100%, 1180px);
}









.opening-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 840px);
}

@media (max-width: 720px) {
    .pack-stack-actions {
        grid-template-columns: 1fr;
    }

    .card-fan {
        --opening-card-width: min(218px, 72vw);
        display: flex;
    }

    .opening-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pack-shell.is-ripping::after {
    content: none;
}


/* Bulk shop purchasing ----------------------------------------------------- */
.shop-purchase-panel {
    display: grid;
    gap: 11px;
    margin-top: auto;
    padding-top: 3px;
}

.shop-price-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.shop-price-summary .price-row {
    margin: 0;
}

.shop-price-summary .price-row small {
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
}

.affordable-count {
    color: var(--muted);
    font-size: 0.7rem;
    text-align: right;
}

.shop-purchase-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(58px, 1fr)) minmax(108px, 1.35fr);
    gap: 7px;
}

.bulk-buy-button {
    min-height: 39px;
    padding: 0 9px;
    border: 1px solid rgba(216, 177, 90, 0.3);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
    color: #eadbbd;
    font-size: 0.7rem;
    font-weight: 850;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.bulk-buy-button:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(239, 194, 92, 0.75);
    background: rgba(216, 161, 64, 0.13);
}

.bulk-buy-button.is-primary {
    border-color: rgba(224, 180, 88, 0.62);
    background: linear-gradient(135deg, rgba(213, 162, 67, 0.24), rgba(132, 84, 34, 0.19));
}

.buy-max-button {
    border-color: rgba(224, 180, 88, 0.72);
    background: linear-gradient(135deg, #d6a447, #9d652b);
    color: #1b1208;
    box-shadow: 0 8px 20px rgba(189, 132, 43, 0.2);
}

.buy-max-button span {
    display: inline-block;
    margin-left: 3px;
    padding: 2px 5px;
    border-radius: 999px;
    background: rgba(24, 15, 7, 0.14);
    font-size: 0.64rem;
}

.bulk-buy-button:disabled {
    cursor: not-allowed;
    opacity: 0.34;
}

@media (max-width: 760px) {
    .shop-purchase-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .buy-max-button {
        grid-column: span 3;
    }
}

/* ========================================================================== */
/* RS3 TCG v2.2.1: Storefront cleanup                                         */
/* ========================================================================== */

.shop-page {
    padding-top: 2px;
}

.storefront-grid {
    margin-top: 0;
}

.vault-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 2px 0 18px;
    padding: 0 2px 12px;
    border-bottom: 1px solid rgba(227, 189, 105, 0.13);
}

.vault-toolbar h2 {
    margin: 3px 0 0;
    color: #fff3d7;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.45rem, 3.6vw, 2.15rem);
}

.debug-tracker-card {
    margin: 0 0 12px;
    padding: 11px 13px;
    border-radius: 14px;
    box-shadow: none;
}

.debug-tracker-label {
    display: block;
    margin-bottom: 2px;
    color: var(--chronicle-gold);
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.diagnostic-disclaimer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 8px 11px;
    border: 1px solid rgba(227, 189, 105, 0.1);
    border-radius: 11px;
    background: rgba(255,255,255,0.018);
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.35;
}

.diagnostic-disclaimer strong {
    flex: 0 0 auto;
    color: var(--chronicle-gold-soft);
}

.shop-card {
    overflow: visible;
    isolation: isolate;
}

.shop-card:hover,
.shop-card:focus-within {
    z-index: 20;
}

.shop-purchase-panel {
    position: relative;
}

.shop-purchase-control {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.shop-purchase-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.shop-buy-primary,
.shop-buy-more {
    min-height: 43px;
}

.shop-buy-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 142px;
    padding: 0 13px;
    border: 1px solid rgba(224, 180, 88, 0.36);
    border-radius: 11px;
    color: #ead9b6;
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}

.shop-buy-primary {
    min-height: 43px;
    border: 1px solid rgba(224, 180, 88, 0.68);
    background: linear-gradient(135deg, #d7a64b, #95602b);
    color: #1b1107;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 9px 20px rgba(189, 132, 43, 0.2);
}

.shop-buy-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 0 16px;
    border-radius: 11px;
    font-size: 0.8rem;
}

.shop-purchase-control.is-open .shop-buy-more {
    border-color: rgba(239,194,92,.72);
    color: #fff0c8;
    background: rgba(216,161,64,.14);
    box-shadow: inset 0 0 0 1px rgba(255,225,153,.08);
}

.shop-buy-primary:hover:not(:disabled),
.shop-buy-primary:focus-visible,
.shop-buy-more:hover:not(:disabled),
.shop-buy-more:focus-visible {
    filter: brightness(1.08);
}


.shop-buy-primary:disabled,
.shop-buy-more:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.shop-purchase-flyout {
    position: absolute;
    right: 0;
    bottom: calc(100% + 9px);
    z-index: 60;
    width: min(390px, calc(100vw - 54px));
    padding: 10px;
    border: 1px solid rgba(224, 180, 88, 0.34);
    border-radius: 14px;
    background:
        radial-gradient(circle at 80% 0%, rgba(224,180,88,.1), transparent 13rem),
        rgba(17, 13, 9, 0.985);
    box-shadow: 0 20px 45px rgba(0,0,0,.52);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(11px) scale(0.97);
    transform-origin: bottom right;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}


.purchase-flyout-label {
    display: block;
    margin: 0 0 7px 2px;
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.shop-purchase-flyout .shop-purchase-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(58px, 1fr));
    gap: 7px;
}

.shop-purchase-flyout .buy-max-button {
    grid-column: 1 / -1;
}

.shop-purchase-flyout .bulk-buy-button {
    min-height: 37px;
}

.custom-buy-form {
    display: grid;
    gap: 7px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(224, 180, 88, 0.16);
}

.custom-buy-label {
    color: var(--muted);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.custom-buy-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
}

.custom-buy-input {
    width: 100%;
    min-width: 0;
    min-height: 39px;
    padding: 0 11px;
    border: 1px solid rgba(224, 180, 88, 0.24);
    border-radius: 10px;
    color: #fff3d2;
    background: rgba(255, 255, 255, 0.035);
    font-variant-numeric: tabular-nums;
}

.custom-buy-input:focus {
    border-color: rgba(224, 180, 88, 0.68);
    box-shadow: 0 0 0 3px rgba(224, 180, 88, 0.09);
}

.custom-buy-submit {
    min-width: 72px;
    min-height: 39px;
    padding: 0 14px;
    border: 1px solid rgba(224, 180, 88, 0.56);
    border-radius: 10px;
    color: #1b1107;
    background: linear-gradient(135deg, #d7a64b, #95602b);
    font-size: .72rem;
    font-weight: 950;
    cursor: pointer;
}

.custom-buy-submit:disabled,
.custom-buy-input:disabled {
    cursor: not-allowed;
    opacity: .38;
}

.custom-buy-form small {
    color: #8e8069;
    font-size: .62rem;
}

@media (max-width: 760px) {
    .diagnostic-disclaimer {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    .shop-purchase-flyout {
        right: -2px;
        width: min(330px, calc(100vw - 42px));
    }

    .shop-purchase-flyout .shop-purchase-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shop-purchase-flyout .buy-max-button {
        grid-column: 1 / -1;
    }

    .shop-purchase-actions {
        grid-template-columns: minmax(0, 1fr) minmax(142px, auto);
    }
}

@media (max-width: 460px) {
    .shop-purchase-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .shop-buy-more {
        width: 100%;
        min-width: 0;
    }
}

.shop-purchase-control.is-open .shop-purchase-flyout {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}



/* v2.2.3 solid flip architecture ------------------------------------------
   Only the inner rotor turns. Both faces remain fully painted at all times,
   which avoids transparent/hollow frames in Alt1's embedded Chromium. */




















/* Neutralize the legacy face-swapping rules. */










/* Parent movement is separate from the face rotation. */




.sound-voice {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    
}


/* v3.2.1 app command header ---------------------------------------------- */
.topbar {
    position: relative;
    min-height: 86px;
    display: grid;
    grid-template-columns: minmax(210px,1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(246,216,140,.25);
    background:
        radial-gradient(circle at 9% -30%, rgba(227,189,105,.18), transparent 20rem),
        linear-gradient(180deg,rgba(27,20,14,.985),rgba(11,9,7,.97));
    box-shadow: 0 12px 34px rgba(0,0,0,.32);
}
.topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg,transparent,rgba(246,216,140,.58),rgba(101,169,216,.32),transparent);
    pointer-events: none;
}
.brand-block { min-width: 0; display: flex; align-items: center; gap: 13px; }
.brand-crest {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    display: grid; place-items: center;
    border: 1px solid rgba(246,216,140,.36);
    border-radius: 17px;
    background: radial-gradient(circle at 50% 32%,rgba(246,216,140,.15),rgba(10,8,6,.94));
    box-shadow: inset 0 0 0 3px rgba(0,0,0,.2), 0 10px 22px rgba(0,0,0,.34), 0 0 22px rgba(227,189,105,.08);
}
.brand-crest .brand-icon { width: 46px; height: 46px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; object-fit: contain; }
.brand-copy { min-width: 0; }
.brand-owner { display: block; margin-bottom: 4px; color: var(--chronicle-gold); font-size: .59rem; line-height: 1; letter-spacing: .22em; font-weight: 950; }
.brand-title-row { min-width: 0; display: flex; align-items: center; gap: 11px; }
.brand-block h1 { margin: 0; color: #fff5de; font-family: Georgia,"Times New Roman",serif; font-size: 1.42rem; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.alt1-state {
    max-width: 190px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(121,174,118,.24);
    border-radius: 999px;
    color: #9ed39d;
    background: rgba(121,174,118,.07);
    font-size: .58rem;
    font-weight: 750;
}
.alt1-state-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #75c985;
    box-shadow: 0 0 0 3px rgba(117,201,133,.11),0 0 10px rgba(117,201,133,.28);
}
.alt1-state:not(.is-alt1) { color: var(--muted); border-color: rgba(227,189,105,.18); background: rgba(255,255,255,.025); }
.alt1-state:not(.is-alt1) .status-dot { background: #9c8c73; box-shadow: 0 0 0 3px rgba(156,140,115,.1); }
.topbar-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.topbar-tool-group {
    display: inline-flex;
    align-items: stretch;
    gap: 3px;
    padding: 4px;
    border: 1px solid rgba(227,189,105,.14);
    border-radius: 16px;
    background: rgba(0,0,0,.19);
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.topbar-action,
.sound-toggle,
.debug-shortcut {
    width: auto;
    min-width: 64px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #e9d6ad;
    background: transparent;
    box-shadow: none;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.topbar-action:hover { transform: translateY(-1px); border-color: rgba(246,216,140,.22); background: rgba(227,189,105,.09); }
.topbar-action:focus-visible,
.currency-pill:focus-visible { outline: 2px solid #e5bd67; outline-offset: 2px; }
.topbar-action .action-icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(238,204,126,.18);
    border-radius: 9px;
    color: #e8c97e;
    background: rgba(227,189,105,.055);
}
.ui-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.action-copy { min-width: 0; display: grid; gap: 2px; text-align: left; }
.topbar-action .action-label { color: #f4e5c7; font-size: .64rem; font-weight: 900; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.topbar-action .action-state { color: #8f826e; font-size: .5rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.icon-sound-off { display: none; }
.sound-toggle.is-muted { color: #81786d; opacity: .78; }
.sound-toggle.is-muted .icon-sound-on { display: none; }
.sound-toggle.is-muted .icon-sound-off { display: block; }
.sound-toggle.is-muted .action-icon { color: #9d8f78; border-color: rgba(157,143,120,.15); background: rgba(255,255,255,.025); }
#account-signout:not(.is-hidden) .action-icon { color: #e3a98f; border-color: rgba(216,132,101,.18); background: rgba(216,132,101,.055); }
.currency-pill {
    min-width: 154px;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid rgba(246,216,140,.42);
    border-radius: 16px;
    color: #fff4d2;
    background: linear-gradient(135deg,rgba(216,168,77,.2),rgba(85,55,27,.12));
    box-shadow: inset 0 1px rgba(255,255,255,.05), 0 9px 22px rgba(0,0,0,.22);
    transition: transform .18s ease,border-color .18s ease,background .18s ease;
}
.currency-pill:hover { transform: translateY(-1px); border-color: rgba(255,225,153,.68); background: linear-gradient(135deg,rgba(229,181,89,.26),rgba(93,59,27,.16)); }
.currency-pill .coin-mark { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: #2a1908; background: linear-gradient(135deg,#ffe8ab,#c78a31); box-shadow: inset 0 1px rgba(255,255,255,.45),0 0 17px rgba(227,189,105,.17); }
.currency-pill .coin-mark .ui-icon { width: 20px; height: 20px; stroke-width: 1.7; }
.currency-copy { min-width: 0; display: grid; text-align: left; }
.currency-copy small { color: #b9a17a; font-size: .5rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.currency-copy strong { margin-top: 3px; color: #fff3cd; font-size: 1rem; line-height: 1; font-variant-numeric: tabular-nums; }
.currency-chevron { margin-left: auto; display: grid; color: #987a46; }
.currency-chevron .ui-icon { width: 14px; height: 14px; }

@media (max-width: 1240px) {
    .topbar-action { min-width: 48px; padding-inline: 8px; }
    .topbar-action .action-state { display: none; }
}
@media (max-width: 960px) {
    .topbar { gap: 10px; padding-inline: 12px; }
    .topbar-action { width: 42px; min-width: 42px; min-height: 42px; justify-content: center; padding: 0; }
    .topbar-action .action-copy { display: none; }
    .topbar-action .action-icon { border: 0; background: transparent; }
    .currency-pill { min-width: 112px; min-height: 50px; padding-inline: 8px; }
    .currency-copy small { display: none; }
    .brand-title-row { display: grid; gap: 3px; }
    .alt1-state { max-width: 140px; padding: 0; border: 0; background: transparent; }
}
@media (max-width: 620px) {
    .topbar { grid-template-columns: minmax(0,1fr); gap: 8px; min-height: 126px; padding: 9px; }
    .brand-block { padding-inline: 2px; }
    .topbar-actions { width: 100%; justify-content: space-between; }
    .topbar-tool-group { flex: 1 1 auto; justify-content: space-around; }
    .currency-pill { flex: 0 0 auto; }
}
@media (max-width: 420px) {
    .topbar { min-height: 120px; }
    .brand-crest { width: 46px; height: 46px; border-radius: 13px; }
    .brand-crest .brand-icon { width: 38px; height: 38px; }
    .brand-owner { font-size: .52rem; letter-spacing: .13em; }
    .brand-block h1 { font-size: 1.04rem; }
    .topbar-actions { gap: 4px; }
    .topbar-tool-group { gap: 1px; padding: 3px; }
    .topbar-action { width: 36px; min-width: 36px; min-height: 38px; border-radius: 10px; }
    .topbar-action .action-icon { width: 26px; height: 26px; }
    .topbar-action .ui-icon { width: 17px; height: 17px; }
    .currency-pill { min-width: 86px; min-height: 46px; gap: 6px; padding: 5px 7px; border-radius: 13px; }
    .currency-pill .coin-mark { width: 27px; height: 27px; border-radius: 9px; }
    .currency-pill .coin-mark .ui-icon { width: 17px; height: 17px; }
    .currency-copy strong { font-size: .78rem; }
    .currency-chevron { display: none; }
}

/* v3.0.6 shared-card layout bridge ---------------------------------------
   The public site and Alt1 now use the same 218 × 293 card footprint.
   App layout rules may position cards, but must never stretch or restyle them. */
.album-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 218px));
    justify-content: center;
    align-items: start;
    gap: 22px 18px;
}

.collection-grid .trading-card {
    width: 218px;
    max-width: 100%;
}

.card-fan .trading-card {
    flex: 0 0 var(--opening-card-width, 218px);
    width: var(--opening-card-width, 218px);
    max-width: 100%;
    aspect-ratio: 218 / 293;
    transform: translateY(18px) scale(.94);
}

.card-fan .trading-card.is-face-down {
    transform: translateY(18px) scale(.94);
}

.card-fan .trading-card.is-revealed {
    animation: none !important;
    transform: translateY(0) scale(1);
}

#card-detail-preview .trading-card {
    width: 218px;
    max-width: 100%;
    aspect-ratio: 218 / 293;
}

@media (max-width: 520px) {
    .album-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px 10px;
    }

    .collection-grid .trading-card {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .card-fan .trading-card {
        width: min(218px, 72vw);
        flex-basis: min(218px, 72vw);
    }
}



/* v3.0.15 help / tutorial ------------------------------------------------ */
.quick-help-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(227,189,105,.28);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(48,34,18,.96), rgba(28,20,12,.96));
    box-shadow: var(--shadow);
}

/* v3.1 accounts, sync safety, and cinematic opening --------------------- */
.account-login-note {
    margin: 0 0 4px !important;
    padding: 11px 12px;
    border: 1px solid rgba(111, 177, 220, .24);
    border-radius: 11px;
    color: #a9c8db !important;
    background: rgba(65, 126, 165, .07);
    font-size: .68rem !important;
    line-height: 1.5 !important;
}
.account-password-warning {
    display: grid;
    gap: 4px;
    margin: 2px 0 13px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 174, 75, .48);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(149, 71, 22, .2), rgba(85, 37, 16, .1));
    box-shadow: inset 3px 0 #ffad4a;
    text-align: left;
}
.account-password-warning strong {
    color: #ffd08a;
    font-size: .7rem;
    letter-spacing: .035em;
}
.account-password-warning span {
    color: #d6bea0;
    font-size: .65rem;
    line-height: 1.45;
}
.setup-card .alt1-install-link { display: block; margin-top: 9px; }
.setup-card {
    max-height: calc(100vh - 30px);
    overflow-y: auto;
}
.setup-option-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 10px;
    color: #f2d38a;
    text-align: left;
}
.setup-option-heading span { font-size: .76rem; font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.setup-option-heading small { color: #8d9ead; font-size: .6rem; }
.setup-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 17px 0;
    color: #8295a4;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.setup-divider::before,.setup-divider::after { content:""; flex:1; height:1px; background:rgba(150,184,205,.17); }
.anonymous-choice {
    display: grid;
    gap: 11px;
    padding: 15px;
    border: 1px solid rgba(112,201,187,.28);
    border-radius: 14px;
    background: linear-gradient(145deg,rgba(48,130,119,.1),rgba(22,68,82,.08));
    text-align: left;
}
.anonymous-choice > div { display:grid; gap:4px; }
.anonymous-choice strong { color:#a9eadf; font-size:.73rem; }
.anonymous-choice span { color:#9bafb8; font-size:.65rem; line-height:1.45; }
.anonymous-create-button { width:100%; }
.anonymous-recovery-box { border-top:1px solid rgba(145,188,197,.14); padding-top:10px; }
.anonymous-recovery-box summary { color:#a8d9e2; cursor:pointer; font-size:.67rem; font-weight:850; }
.anonymous-recovery-box .field-label { margin-top:12px; }
.anonymous-recovery-box .ghost-button { width:100%; }
.recovery-code-input { font-family:Consolas,"Courier New",monospace; letter-spacing:.04em; text-transform:uppercase; }
.anonymous-cache-warning {
    margin: 0 !important;
    padding: 10px 11px;
    border: 1px solid rgba(255,174,75,.3);
    border-radius: 10px;
    color: #cbb796 !important;
    background: rgba(131,67,21,.1);
    font-size: .62rem !important;
}
.anonymous-cache-warning strong { color:#ffc77a; }
.anonymous-recovery-layer { z-index:1200; }
.anonymous-recovery-card { width:min(100%,520px); text-align:center; border-color:rgba(112,201,187,.42); }
.recovery-key-mark {
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin:0 auto 14px;
    border:1px solid rgba(138,232,216,.55);
    border-radius:18px;
    color:#06211e;
    background:linear-gradient(145deg,#b5f5e8,#66baa9);
    box-shadow:0 0 30px rgba(102,186,169,.2);
    font-size:1.45rem;
    font-weight:950;
}
.anonymous-recovery-card code {
    display:block;
    margin:18px 0;
    padding:15px 12px;
    overflow-wrap:anywhere;
    border:1px dashed rgba(167,236,224,.55);
    border-radius:12px;
    color:#d4fff7;
    background:rgba(7,36,35,.48);
    font-size:clamp(.78rem,3vw,1rem);
    letter-spacing:.06em;
}
.recovery-key-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.recovery-confirmation {
    display:flex;
    align-items:flex-start;
    gap:9px;
    margin:15px 0 11px;
    color:#c0d4d3;
    text-align:left;
    font-size:.67rem;
    line-height:1.45;
}
.recovery-confirmation input { margin-top:2px; accent-color:#70c9bb; }
.anonymous-recovery-card > .ghost-button { width:100%; }
.anonymous-recovery-card > small { display:block; margin-top:13px; color:#817d75; font-size:.61rem; line-height:1.45; }
.anonymous-settings-card { border-color:rgba(112,201,187,.28); }
.anonymous-settings-actions { display:flex; justify-content:flex-end; gap:9px; flex-wrap:wrap; }

.out-of-sync-layer { z-index: 1100; }
.out-of-sync-card { max-width: 500px; text-align: center; border-color: rgba(238, 132, 83, .55); }
.sync-alert-mark {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 16px;
    border: 2px solid #ff9d68;
    border-radius: 50%;
    color: #1b0e08;
    background: linear-gradient(145deg, #ffd097, #ee774e);
    box-shadow: 0 0 34px rgba(238, 119, 78, .3);
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 950;
}
.sync-alert-detail {
    margin: 17px 0;
    padding: 13px 14px;
    border: 1px solid rgba(238, 132, 83, .24);
    border-radius: 12px;
    color: #dfc5b5;
    background: rgba(69, 30, 18, .24);
    font-size: .72rem;
    line-height: 1.55;
}
.sync-repair-hint {
    display: grid;
    gap: 4px;
    margin: 0 0 17px;
    padding: 12px 14px;
    border: 1px solid rgba(225, 188, 104, .22);
    border-radius: 12px;
    color: #bfb39c;
    background: rgba(225, 188, 104, .06);
    text-align: left;
    font-size: .68rem;
    line-height: 1.5;
}
.sync-repair-hint strong { color: #f1cf78; }
.sync-alert-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sync-alert-actions #out-of-sync-login { grid-column: 1 / -1; }

.setup-guide-layer { z-index: 1120; }
.setup-guide-card {
    width: min(760px, calc(100vw - 28px));
    max-width: 760px;
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    overflow-y: auto;
    border-color: rgba(225, 188, 104, .45);
}
.setup-guide-mark {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
    border: 1px solid rgba(225, 188, 104, .48);
    border-radius: 18px;
    color: #1a1005;
    background: linear-gradient(145deg, #f4d87f, #b97925);
    box-shadow: 0 0 32px rgba(225, 188, 104, .2);
    font-size: 1rem;
    font-weight: 950;
    letter-spacing: .06em;
}
.setup-guide-card > .eyebrow,
.setup-guide-card > h2,
.setup-guide-card > p { text-align: center; }
.setup-guide-card > p {
    max-width: 470px;
    margin-right: auto;
    margin-left: auto;
}
.setup-guide-progress { display:grid;gap:8px;margin:16px 0 13px; }
.setup-guide-progress>strong { color:#e7c873;font-size:.66rem;letter-spacing:.07em;text-align:center;text-transform:uppercase; }
.setup-guide-progress>div { display:grid;grid-template-columns:repeat(4,1fr);gap:7px; }
.setup-guide-progress i { height:4px;border-radius:999px;background:rgba(255,255,255,.09);transition:background .2s ease,box-shadow .2s ease; }
.setup-guide-progress i.is-active { background:#e2bd67;box-shadow:0 0 12px rgba(226,189,103,.27); }
.setup-guide-steps { min-height:300px; }
.setup-guide-step {
    display:none;
    grid-template-columns:minmax(210px,.8fr) minmax(0,1.2fr);
    gap:18px;
    align-items:center;
    min-height:300px;
    padding:16px;
    border:1px solid rgba(225,188,104,.18);
    border-radius:16px;
    background:radial-gradient(circle at 100% 0,rgba(224,184,91,.09),transparent 18rem),rgba(14,10,6,.56);
}
.setup-guide-step.is-active { display:grid;animation:setup-guide-step-in .22s ease both; }
.setup-guide-step-copy { display:flex;gap:12px;align-items:flex-start; }
.setup-guide-step-copy>span {
    display:grid;flex:0 0 auto;width:38px;height:38px;place-items:center;
    border:1px solid rgba(225,188,104,.38);border-radius:12px;color:#f0ce76;
    background:rgba(225,188,104,.08);font-weight:950;
}
.setup-guide-step-copy h3 { margin:1px 0 7px;color:#f5ead2;font-size:1rem; }
.setup-guide-step-copy p { margin:0;color:#aaa08f;font-size:.7rem;line-height:1.55; }
.setup-guide-step-copy strong { color:#ead190; }
.setup-guide-step figure {
    display:grid;gap:8px;justify-items:center;margin:0;padding:12px;
    border:1px solid rgba(111,202,190,.18);border-radius:13px;background:#090806;
}
.setup-guide-step img { display:block;max-width:100%;height:auto;border-radius:4px; }
.setup-guide-step figcaption { color:#8f988f;font-size:.6rem;line-height:1.4;text-align:center; }
.setup-guide-wide-image { grid-column:1/-1; }
.setup-guide-wide-image img { width:100%; }
.setup-guide-navigation { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px; }
.setup-guide-navigation .primary-button { grid-column:2; }
.setup-guide-navigation .ghost-button+.primary-button { grid-column:auto; }
.setup-guide-final { margin-top:12px; }
.setup-guide-final>.primary-button { width:100%; }
.setup-guide-verification {
    display:grid;
    gap:11px;
    margin-bottom:12px;
    padding:13px;
    border:1px solid rgba(225,188,104,.24);
    border-radius:14px;
    background:rgba(8,7,5,.58);
}
.setup-guide-verification-head {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
}
.setup-guide-verification-head>div { display:grid;min-width:0;gap:3px; }
.setup-guide-verification-head strong { color:#f1d17a;font-size:.76rem; }
.setup-guide-verification-head span { color:#8f887c;font-size:.58rem;line-height:1.4; }
.setup-guide-verification-head .ghost-button {
    width:auto;
    min-width:112px;
    min-height:36px;
    justify-self:end;
    padding:8px 12px;
    white-space:nowrap;
    font-size:.62rem;
}
.setup-guide-verification-list {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin:0;
    padding:0;
    list-style:none;
}
.setup-guide-verification-list li {
    display:flex;
    align-items:center;
    gap:8px;
    min-height:34px;
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:10px;
    color:#938d82;
    background:rgba(255,255,255,.025);
    font-size:.61rem;
    line-height:1.35;
}
.setup-guide-verification-list i {
    display:grid;
    flex:0 0 auto;
    width:18px;
    height:18px;
    place-items:center;
    border-radius:50%;
    color:#aaa08f;
    background:rgba(255,255,255,.06);
    font-style:normal;
    font-weight:950;
}
.setup-guide-verification-list li.is-passed {
    border-color:rgba(112,201,187,.25);
    color:#c4ddd8;
    background:rgba(46,113,101,.08);
}
.setup-guide-verification-list li.is-passed i { color:#07120f;background:#70c9bb; }
.setup-guide-verification-list li.is-failed { border-color:rgba(217,108,86,.2);color:#c9a399; }
.setup-guide-verification-list li.is-failed i { color:#f0b4a4;background:rgba(183,65,45,.2); }
.setup-guide-verification-status {
    margin:0;
    color:#9d9588;
    font-size:.62rem;
    line-height:1.45;
}
.setup-guide-verification-status.is-success { color:#7ed7c8; }
.setup-guide-verification-status.is-error { color:#eca994; }
@keyframes setup-guide-step-in { from { opacity:0;transform:translateY(5px); } to { opacity:1;transform:none; } }
.setup-guide-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 13px;
    padding: 13px 14px;
    border: 1px solid rgba(112, 201, 187, .3);
    border-radius: 13px;
    color: #d0e4df;
    background: rgba(46, 113, 101, .11);
    font-size: .69rem;
    line-height: 1.5;
    cursor: pointer;
}
.setup-guide-confirmation input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
    accent-color: #70c9bb;
}
.setup-guide-footnote {
    display: block;
    margin-top: 11px;
    color: #817d75;
    text-align: center;
    font-size: .6rem;
    line-height: 1.45;
}
@media (max-width:620px) {
    .setup-guide-card { width:min(100% - 18px,760px);max-height:calc(100dvh - 18px);padding:17px; }
    .setup-guide-mark { width:48px;height:48px;margin-bottom:10px;border-radius:14px; }
    .setup-guide-step { grid-template-columns:1fr;min-height:0; }
    .setup-guide-steps { min-height:0; }
    .setup-guide-wide-image { grid-column:auto; }
    .setup-guide-verification-list { grid-template-columns:1fr; }
}

.pack-shell {
    position: relative;
    isolation: isolate;
}
.pack-aura {
    animation: pack-aura-breathe 2.4s ease-in-out infinite;
}
.pack-shell.is-ripping {
    filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .62)) drop-shadow(0 0 22px rgba(241, 196, 108, .2));
}
.pack-shell.is-ripping .wrapper-gloss {
    animation: wrapper-light-sweep .82s ease-in-out 2;
}
.pack-shell.is-opened::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 18%;
    right: 18%;
    top: 8%;
    height: 28%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 231, 166, .5), rgba(102, 184, 236, .18) 42%, transparent 72%);
    filter: blur(9px);
    animation: pack-inner-light .8s ease-out both;
    pointer-events: none;
}
.rip-stage.is-impacting .pack-aura {
    animation: pack-aura-impact .78s cubic-bezier(.16,.78,.18,1) both;
}

@keyframes pack-aura-breathe {
    0%,100% { transform: scale(.88); opacity: .38; }
    50% { transform: scale(1.08); opacity: .78; }
}
@keyframes pack-aura-impact {
    0% { transform: scale(.9); opacity: .4; }
    45% { transform: scale(1.42); opacity: 1; }
    100% { transform: scale(1.72); opacity: 0; }
}
@keyframes wrapper-light-sweep {
    0% { opacity: .35; transform: translateX(-12%); }
    50% { opacity: 1; transform: translateX(8%); }
    100% { opacity: .45; transform: translateX(18%); }
}
@keyframes pack-inner-light {
    from { transform: scale(.2); opacity: 0; }
    45% { opacity: 1; }
    to { transform: scale(1.4); opacity: 0; }
}

@media (max-width: 560px) {
    .sync-alert-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pack-aura,
    .pack-shell.is-ripping,
    .pack-shell.is-ripping .wrapper-gloss,
    .pack-shell.is-opened::before { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}
.quick-help-copy h2 { margin: 4px 0 7px; font-size: 1.28rem; }
.quick-help-copy p { margin: 0; color: var(--muted); line-height: 1.5; }
.help-page {
    container: help-page / inline-size;
    max-width: 1180px;
    margin: 0 auto;
}
.help-heading { align-items: flex-start; }
.help-heading h2 { margin-bottom: 5px; }
.help-heading p { max-width: 720px; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.section-heading-actions { display: flex; align-items: center; gap: 8px; }
.help-command-hero,
.help-step-card,
.help-issue-card,
.help-quick-actions,
.help-faq-card {
    border: 1px solid rgba(227,189,105,.17);
    background:
        radial-gradient(circle at 100% 0,rgba(227,189,105,.07),transparent 17rem),
        linear-gradient(145deg,rgba(34,24,16,.97),rgba(15,12,9,.97));
    box-shadow: 0 18px 42px rgba(0,0,0,.24);
}
.help-command-hero {
    display: grid;
    grid-template-columns: minmax(0,1.08fr) minmax(300px,.92fr);
    gap: 24px;
    padding: clamp(20px,3vw,30px);
    border-radius: 24px;
    overflow: hidden;
}
.help-command-copy h3 { max-width: 620px; margin: 11px 0 8px; color: #fff2cf; font-family: Georgia,"Times New Roman",serif; font-size: clamp(1.35rem,2.7vw,2rem); line-height: 1.08; }
.help-command-copy > p { max-width: 650px; margin: 0; color: #a89b88; font-size: .76rem; line-height: 1.58; }
.help-pill {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(227,189,105,.14);
    border: 1px solid rgba(227,189,105,.24);
    color: #f8df9d;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.help-ready-list { display: grid; gap: 8px; margin-top: 18px; }
.help-ready-list > div { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(227,189,105,.12); border-radius: 13px; background: rgba(255,255,255,.022); }
.help-ready-list > div > span { width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(112,201,187,.35); border-radius: 9px; color: #a9eadf; background: rgba(64,156,141,.09); font-size: .68rem; font-weight: 950; }
.help-ready-list p { display: grid; gap: 2px; margin: 0; min-width: 0; }
.help-ready-list strong { color: #f5e6c6; font-size: .71rem; }
.help-ready-list small { color: #8f8372; font-size: .63rem; line-height: 1.4; }
.help-hero-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 18px; }
.help-hero-actions button { min-width: 145px; width: auto; }
.help-example-figure { min-width: 0; margin: 0; display: grid; gap: 10px; align-content: center; }
.help-example-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #9c8d76; font-size: .62rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.help-example-label strong { color: #a9eadf; }
.help-example-figure img {
    width: 100%;
    max-height: 300px;
    display: block;
    object-fit: contain;
    border: 1px solid rgba(227,189,105,.28);
    border-radius: 16px;
    background: rgba(9,6,4,.85);
    box-shadow: 0 12px 24px rgba(0,0,0,.32);
}
.help-example-figure figcaption { color: #817766; font-size: .64rem; line-height: 1.45; }
.help-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 26px 2px 12px; }
.help-section-heading h3 { margin: 4px 0 0; color: #fff0cf; font-size: 1rem; }
.help-section-heading > span { color: #817665; font-size: .65rem; }
.help-steps {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
}
.help-step-card { min-width: 0; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 13px; align-items: start; padding: 18px; border-radius: 18px; }
.help-step-number { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(227,189,105,.35); border-radius: 11px; color: #f1d17c; background: rgba(227,189,105,.08); font-size: .76rem; font-weight: 950; }
.help-step-card h3,.help-issue-card h3,.help-quick-actions h3 { margin: 1px 0 6px; color: #f8e9c8; font-size: .82rem; }
.help-step-card p,.help-issue-card p,.help-quick-actions p { margin: 0; color: #918573; font-size: .67rem; line-height: 1.52; }
.help-column-order { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 12px; }
.help-column-order > * { padding: 6px 4px; border: 1px solid rgba(227,189,105,.14); border-radius: 8px; color: #918573; background: rgba(255,255,255,.022); font-size: .6rem; text-align: center; }
.help-column-order strong { border-color: rgba(112,201,187,.35); color: #a9eadf; background: rgba(64,156,141,.08); }
.help-support-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}
.help-issue-card { min-width: 0; display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 13px; padding: 17px; border-radius: 18px; }
.help-issue-icon { grid-row: 1 / span 2; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(227,189,105,.25); border-radius: 12px; color: #efd080; background: rgba(227,189,105,.07); font-size: .7rem; font-weight: 950; }
.help-issue-card button { justify-self: start; margin-top: 10px; padding: 0; border: 0; color: #d9ba70; background: transparent; font: inherit; font-size: .64rem; font-weight: 900; cursor: pointer; }
.help-issue-card button:hover { color: #ffe3a0; }
.help-quick-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 20px; border-radius: 19px; }
.help-action-buttons { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.help-action-buttons button { width: auto; min-width: 130px; }
.help-faq-card { margin-top: 18px; padding: 20px; border-radius: 20px; }
.help-faq-heading { margin: 0 0 12px; }
.help-faq-list { display: grid; gap: 8px; }
.help-faq-list details { border: 1px solid rgba(227,189,105,.12); border-radius: 13px; background: rgba(255,255,255,.018); }
.help-faq-list summary { position: relative; padding: 13px 42px 13px 14px; color: #e9dab9; font-size: .7rem; font-weight: 850; cursor: pointer; list-style: none; }
.help-faq-list summary::-webkit-details-marker { display: none; }
.help-faq-list summary::after { content: "+"; position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: #d7b665; font-size: 1rem; }
.help-faq-list details[open] summary::after { content: "−"; }
.help-faq-list details p { margin: 0; padding: 0 14px 14px; color: #8f8372; font-size: .66rem; line-height: 1.55; }
@container help-page (max-width: 850px) {
    .help-command-hero { grid-template-columns: 1fr; }
    .help-example-figure { max-width: 620px; }
    .help-steps { grid-template-columns: 1fr; }
}
@container help-page (max-width: 620px) {
    .help-support-grid { grid-template-columns: 1fr; }
    .help-quick-actions { align-items: stretch; flex-direction: column; }
    .help-action-buttons { display: grid; grid-template-columns: 1fr; }
    .help-action-buttons button,.help-hero-actions button { width: 100%; }
    .help-section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
}
@media (min-width: 920px) and (max-width: 1200px) {
    .help-command-hero { grid-template-columns: 1fr; }
    .help-steps { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .help-command-hero { grid-template-columns: 1fr; }
    .help-steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .quick-help-card { flex-direction: column; align-items: flex-start; }
}


/* v3.0.16 dismissible setup reminder ----------------------------------- */
.quick-help-card {
    transition: opacity .18s ease, transform .18s ease, max-height .18s ease, margin .18s ease, padding .18s ease;
}
.quick-help-card.is-dismissing {
    opacity: 0;
    transform: translateY(-6px);
}
.quick-help-dismiss {
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 2;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(227,189,105,.22);
    border-radius: 10px;
    color: #d9c49a;
    background: rgba(10,7,4,.58);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}
.quick-help-dismiss:hover {
    border-color: rgba(246,216,140,.5);
    color: #fff1c4;
    background: rgba(227,189,105,.1);
}
.quick-help-card .quick-help-copy { padding-right: 26px; }
.help-reminder-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
}
@media (max-width: 620px) {
    .help-reminder-card { align-items: flex-start; flex-direction: column; }
}

/* v3.2 command surfaces */
.v32-page-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid rgba(225,188,104,.2);
    border-radius: 22px;
    background:
        radial-gradient(circle at 84% 4%, rgba(225,188,104,.18), transparent 36%),
        linear-gradient(145deg, rgba(34,24,14,.98), rgba(13,10,7,.98));
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.v32-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.025), transparent 65%);
}
.v32-page-hero h2 { margin: 4px 0 7px; font-size: clamp(1.65rem,4vw,2.6rem); }
.v32-page-hero p { max-width: 650px; margin: 0; color: #b9aa91; }
.command-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(108px,1fr)); gap: 9px; min-width: min(100%,410px); }
.command-stats article,
.vault-stat,
.collection-command-stats article {
    border: 1px solid rgba(221,185,102,.14);
    border-radius: 13px;
    background: rgba(8,6,4,.5);
    padding: 12px;
}
.command-stats span,.vault-stat span,.collection-command-stats span { display:block; color:#95866e; font-size:.67rem; letter-spacing:.08em; text-transform:uppercase; }
.command-stats strong,.vault-stat strong,.collection-command-stats strong { display:block; margin:4px 0 1px; color:#f0d58e; font-size:1.2rem; }
.command-stats small { color:#786d5c; font-size:.67rem; }
.seasonal-pack-tag { display:inline-block; margin-right:8px; padding:3px 6px; border:1px solid #8e6933; border-radius:999px; color:#ffd987; font-size:.58rem; letter-spacing:.08em; vertical-align:middle; }
.vault-hero-actions { display:flex; align-items:center; gap:10px; }
.vault-stat { min-width:115px; }
.vault-guidance { display:flex; align-items:center; justify-content:center; gap:10px; margin:4px 0 20px; color:#a99a82; font-size:.76rem; text-transform:uppercase; letter-spacing:.07em; }
.vault-guidance span { display:grid; place-items:center; width:25px; height:25px; border:1px solid #7b6237; color:#ebcb78; border-radius:50%; background:#1e160d; }
.vault-guidance i { width:min(8vw,80px); height:1px; background:linear-gradient(90deg,#5d492b,transparent); }
.collection-command-hero { margin-bottom:10px; }
.collection-completion-ring {
    --collection-progress: 0deg;
    position:relative;
    z-index:1;
    flex:0 0 118px;
    aspect-ratio:1;
    display:grid;
    place-content:center;
    text-align:center;
    border-radius:50%;
    background:conic-gradient(#daba69 var(--collection-progress),rgba(255,255,255,.08) 0);
}
.collection-completion-ring::before { content:""; position:absolute; inset:8px; border-radius:50%; background:#151009; }
.collection-completion-ring strong,.collection-completion-ring span { position:relative; z-index:1; }
.collection-completion-ring strong { color:#f1d488; font-size:1.45rem; }
.collection-completion-ring span { color:#8f816b; font-size:.66rem; text-transform:uppercase; }
.collection-command-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:10px 0 14px; }
.debug-guided-card {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:16px;
    margin-bottom:14px;
    padding:16px;
    border:1px solid rgba(87,193,159,.25);
    border-radius:16px;
    background:linear-gradient(135deg,rgba(22,62,50,.44),rgba(13,18,16,.9));
}
.debug-guided-card h3,.debug-guided-card p { margin:2px 0; }
.debug-guided-card p { color:#9eb8af; font-size:.82rem; }
.debug-guided-icon,.update-mark { display:grid; place-items:center; width:44px; height:44px; border:1px solid #4e9b83; border-radius:50%; color:#9be2cb; font-size:1.25rem; font-weight:900; }
.debug-report-card > p { color:#a99c87; }
.debug-report-form { display:grid; gap:12px; }
.debug-report-form label { display:grid; gap:5px; color:#a99c87; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; }
.debug-report-form select,.debug-report-form textarea { width:100%; border:1px solid rgba(221,185,102,.19); border-radius:10px; background:#0b0806; color:#eee0c8; padding:10px; font:inherit; resize:vertical; }
.debug-report-form small { color:#8ecfb9; }
.app-update-layer { z-index:10000; background:rgba(4,3,2,.86); backdrop-filter:blur(8px); }
.app-update-card { max-width:470px; text-align:center; border-color:rgba(225,188,104,.38); background:radial-gradient(circle at 50% 0,rgba(225,188,104,.18),transparent 42%),#171009; }
.app-update-card .update-mark { margin:0 auto 14px; border-color:#b28a43; color:#f1d17a; animation:update-spin 1.8s linear infinite; }
.update-version-line { display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0; padding:12px; border:1px solid rgba(225,188,104,.15); border-radius:11px; color:#d7c29b; background:rgba(0,0,0,.22); }
@keyframes update-spin { to { transform:rotate(360deg); } }
@media (max-width:760px) {
    .v32-page-hero { align-items:flex-start; flex-direction:column; padding:18px; }
    .command-stats { min-width:0; width:100%; }
    .collection-completion-ring { align-self:center; }
    .collection-command-stats { grid-template-columns:1fr 1fr; }
    .debug-guided-card { grid-template-columns:auto 1fr; }
    .debug-guided-card button { grid-column:1/-1; }
}
@media (max-width:460px) {
    .command-stats { grid-template-columns:1fr; }
    .vault-hero-actions { width:100%; }
    .vault-stat { flex:1; min-width:0; }
    .vault-guidance i { display:none; }
    .vault-guidance { flex-wrap:wrap; justify-content:flex-start; }
}

/* v3.2.3 navigation and optional Shop overview --------------------------- */
.bottom-nav {
    min-height: 78px;
    padding: 7px max(9px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left));
    border-top-color: rgba(232,198,119,.24);
    background:
        radial-gradient(circle at 50% 110%,rgba(219,174,82,.13),transparent 52%),
        rgba(13,10,7,.97);
    box-shadow: 0 -12px 32px rgba(0,0,0,.34);
}
.nav-button {
    min-width: 0;
    min-height: 60px;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: #8f826d;
    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .025em;
    transition: color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}
.nav-button:hover {
    color: #dbc79f;
    background: rgba(227,189,105,.05);
}
.nav-button:focus-visible { outline-offset: 0; }
.nav-button.is-active {
    border-color: rgba(227,189,105,.18);
    color: #f6dd9c;
    background: linear-gradient(180deg,rgba(227,189,105,.13),rgba(227,189,105,.045));
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.nav-icon {
    width: 34px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(227,189,105,.12);
    border-radius: 10px;
    color: #b8a27a;
    background: rgba(255,255,255,.02);
}
.nav-icon .ui-icon { width: 20px; height: 20px; stroke-width: 1.75; }
.nav-button.is-active .nav-icon {
    border-color: rgba(244,207,119,.36);
    color: #f0c86c;
    background: rgba(227,189,105,.1);
    box-shadow: 0 0 16px rgba(227,189,105,.08);
}
.nav-label { line-height: 1; }
.nav-badge {
    top: 3px;
    left: calc(50% + 7px);
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #151009;
    background: linear-gradient(135deg,#efcc72,#b5742f);
    color: #211306;
    font-size: .57rem;
    font-weight: 950;
    box-shadow: 0 4px 10px rgba(0,0,0,.34);
}
@media (max-width: 380px) {
    .bottom-nav { padding-inline: 5px; }
    .nav-button { min-height: 56px; }
    .nav-icon { width: 31px; height: 29px; }
}

@media (min-width: 920px) {
    .topbar {
        display: none !important;
        grid-template-columns: 1fr;
    }

    .topbar .brand-block {
        display: none;
    }

    .topbar-actions {
        grid-column: 1;
        width: 100%;
    }

    .rail-button { grid-template-columns: 32px minmax(0,1fr) auto; column-gap: 7px; }
    .rail-button .rail-icon {
        width: 29px;
        height: 29px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(227,189,105,.12);
        border-radius: 9px;
        color: #bda474;
        background: rgba(255,255,255,.02);
    }
    .rail-button .rail-icon .ui-icon { width: 17px; height: 17px; stroke-width: 1.75; }
    .rail-button:hover .rail-icon,
    .rail-button.is-active .rail-icon {
        border-color: rgba(227,189,105,.3);
        color: #efd083;
        background: rgba(227,189,105,.09);
    }
    .rail-button .rail-count {
        min-width: 24px;
        padding: 4px 6px;
        border: 1px solid rgba(236,194,101,.34);
        border-radius: 999px;
        color: #f5d47f;
        background: rgba(227,189,105,.1);
        font-size: .59rem;
        font-weight: 950;
        line-height: 1;
        text-align: center;
    }
}

.shop-command-copy { position: relative; z-index: 1; }
.shop-overview-toggle,
.shop-overview-restore button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 35px;
    padding: 0 11px;
    border: 1px solid rgba(221,185,102,.18);
    border-radius: 10px;
    color: #b9a785;
    background: rgba(255,255,255,.025);
    font-size: .64rem;
    font-weight: 850;
    cursor: pointer;
    transition: color .18s ease,border-color .18s ease,background .18s ease;
}
.shop-overview-toggle { margin-top: 14px; }
.shop-overview-toggle .ui-icon,
.shop-overview-restore .ui-icon { width: 16px; height: 16px; }
.shop-overview-toggle:hover,
.shop-overview-restore button:hover {
    border-color: rgba(232,198,119,.42);
    color: #f0d797;
    background: rgba(227,189,105,.08);
}
.shop-overview-restore {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin: 0 0 10px;
    color: #877b68;
    font-size: .65rem;
}
.shop-overview-restore button {
    min-height: 33px;
    color: #d6bd85;
}
@media (max-width: 460px) {
    .shop-overview-toggle { width: 100%; }
    .shop-overview-restore { justify-content: space-between; }
}

/* v3.2.5 native split-wrapper opening ------------------------------------ */
.wrapper-split,
.wrapper-piece {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.wrapper-split {
    --wrapper-seam: 10%;
    z-index: 9;
    opacity: 0;
    transform-style: preserve-3d;
}
.wrapper-piece {
    display: block;
    object-fit: contain;
    backface-visibility: hidden;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform,opacity,filter;
}
.wrapper-piece-bottom {
    z-index: 1;
    transform-origin: 50% var(--wrapper-seam);
}
.wrapper-piece-top {
    z-index: 2;
    transform-origin: 6% var(--wrapper-seam);
}
.pack-shell.has-split-wrapper .wrapper-split { opacity: 1; }
.pack-shell.has-split-wrapper .wrapper-body { opacity: 0; pointer-events: none; }
.pack-shell.has-split-wrapper .pack-seam,
.pack-shell.has-split-wrapper .tear-strip,
.pack-shell.has-split-wrapper .tear-flap,
.pack-shell.has-split-wrapper .wrapper-half { display: none; }
.pack-shell .opening-slit { display: none !important; }
.pack-shell.has-split-wrapper.is-ripping .wrapper-piece-top {
    animation: native-wrapper-top-strip-peel 1.08s cubic-bezier(.16,.72,.16,1) .05s forwards;
}
.pack-shell.has-split-wrapper.is-ripping .wrapper-piece-bottom {
    animation: native-wrapper-bottom-tension .82s cubic-bezier(.2,.78,.2,1) forwards;
}
.pack-shell.has-split-wrapper.is-extracted .wrapper-piece-bottom {
    animation: native-wrapper-bottom-release .76s cubic-bezier(.16,.74,.18,1) forwards;
}
.pack-shell.has-split-wrapper.is-extracted .wrapper-split {
    filter: drop-shadow(0 18px 24px rgba(0,0,0,.42));
}

@keyframes native-wrapper-top-strip-peel {
    0% {
        transform: translate3d(0,0,1px) rotateZ(0) rotateY(0) scaleX(1);
        opacity: 1;
        filter: brightness(1);
    }
    16% {
        transform: translate3d(.8%,.25%,5px) rotateZ(.4deg) rotateY(-3deg) scaleX(.995);
        filter: brightness(1.12);
    }
    38% {
        transform: translate3d(14%,.8%,16px) rotateZ(2.5deg) rotateY(-20deg) skewX(-5deg) scaleX(.94);
        filter: brightness(1.24);
    }
    68% {
        transform: translate3d(58%,2.2%,30px) rotateZ(7deg) rotateY(-43deg) skewX(-10deg) scaleX(.78);
        opacity: 1;
        filter: brightness(1.16);
    }
    100% {
        transform: translate3d(132%,5%,42px) rotateZ(14deg) rotateY(-70deg) skewX(-16deg) scaleX(.54);
        opacity: 0;
        filter: brightness(1.28);
    }
}
@keyframes native-wrapper-bottom-tension {
    0%,100% { transform: translate3d(0,0,0) scale(1); filter: brightness(1); }
    28% { transform: translate3d(-.7%,.35%,0) scaleX(.994); }
    56% { transform: translate3d(.8%,1%,0) scale(1.008,.997); filter: brightness(1.08); }
    78% { transform: translate3d(-.25%,1.6%,0) scale(.998,1.004); }
}
@keyframes native-wrapper-bottom-release {
    0% { transform: translate3d(0,0,0) rotate(0) scale(1); opacity: 1; }
    38% { transform: translate3d(0,7%,0) rotate(-1deg) scale(.985,.94); opacity: .96; }
    72% { transform: translate3d(-4%,31%,0) rotate(-5deg) scale(.9,.72); opacity: .68; }
    100% { transform: translate3d(-10%,82%,0) rotate(-12deg) scale(.72,.42); opacity: 0; }
}

/* Cards travel from the extracted stack into their exact face-down reveal
   positions before any reveal controls become available. */
.card-fan.is-preparing-placement > .trading-card {
    opacity: 0;
}
.card-fan.is-placing-cards {
    position: relative;
    z-index: 20;
}
.card-fan.is-placing-cards > .trading-card {
    animation: opening-card-place .82s cubic-bezier(.16,.82,.2,1) var(--place-delay, 0ms) both;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

@keyframes opening-card-place {
    0% {
        transform:
            translate3d(var(--place-start-x, 0), var(--place-start-y, 0), 0)
            scale(var(--place-start-scale, .7))
            rotate(var(--place-rotation, 0deg));
        opacity: 0;
        filter: brightness(.72);
    }
    12% {
        opacity: 1;
    }
    72% {
        transform:
            translate3d(var(--place-mid-x, 0), var(--place-mid-y, -18px), 0)
            scale(1.02)
            rotate(0);
        opacity: 1;
        filter: brightness(1.16);
    }
    88% {
        transform: translateY(12px) scale(.965);
        filter: brightness(1.05);
    }
    100% {
        transform: translateY(18px) scale(.94);
        opacity: 1;
        filter: brightness(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pack-shell.has-split-wrapper.is-ripping .wrapper-piece-top,
    .pack-shell.has-split-wrapper.is-ripping .wrapper-piece-bottom,
    .pack-shell.has-split-wrapper.is-extracted .wrapper-piece-bottom,
    .card-fan.is-placing-cards > .trading-card {
        animation-duration: 1ms !important;
        animation-delay: 0ms !important;
    }
}

/* v3.3.3 app-wide settings ---------------------------------------------- */
.settings-page {
    max-width:1180px;
    min-width:0;
    margin:0 auto;
    container:settings-page / inline-size;
}
.settings-heading { align-items:flex-start; }
.settings-heading h2 { margin-bottom:5px; }
.settings-heading p { max-width:700px; margin:0; color:var(--muted); font-size:.76rem; line-height:1.55; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.settings-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    min-width:0;
    min-height:136px;
    padding:20px;
    border:1px solid rgba(227,189,105,.17);
    border-radius:19px;
    background:radial-gradient(circle at 100% 0,rgba(227,189,105,.07),transparent 16rem),linear-gradient(145deg,rgba(28,21,15,.96),rgba(13,11,9,.96));
    box-shadow:0 16px 38px rgba(0,0,0,.18);
}
.settings-card > * { min-width:0; }
.settings-card-wide { grid-column:1/-1; grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr); }
.settings-card-copy { min-width:0; display:flex; align-items:flex-start; gap:13px; }
.settings-card-copy h3 { margin:1px 0 5px; color:#fff0cf; font-size:.9rem; }
.settings-card-copy p { margin:0; color:#978a76; font-size:.7rem; line-height:1.5; }
.settings-icon {
    flex:0 0 auto;
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border:1px solid rgba(227,189,105,.21);
    border-radius:11px;
    color:#e9c775;
    background:rgba(227,189,105,.07);
    font-size:1rem;
    font-weight:900;
}
.settings-toggle {
    min-width:118px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:6px 7px 6px 12px;
    border:1px solid rgba(160,145,119,.28);
    border-radius:999px;
    color:#a99d89;
    background:rgba(255,255,255,.025);
    cursor:pointer;
}
.settings-toggle .setting-value { font-size:.64rem; font-weight:900; white-space:nowrap; }
.toggle-track { position:relative; width:38px; height:22px; flex:0 0 auto; border-radius:999px; background:#302a22; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.toggle-track i { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#8e8372; transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.settings-toggle.is-on { border-color:rgba(227,189,105,.4); color:#f4d886; background:rgba(227,189,105,.08); }
.settings-toggle.is-on .toggle-track { background:rgba(190,137,52,.42); }
.settings-toggle.is-on .toggle-track i { transform:translateX(16px); background:#ffe29a; box-shadow:0 0 12px rgba(255,211,112,.36); }
.foil-setting-control { display:grid; grid-template-columns:112px minmax(220px,1fr); gap:14px; align-items:center; min-width:0; }
.foil-setting-control label { display:grid; gap:6px; min-width:0; }
.foil-setting-control label > span { color:var(--muted); font-size:.61rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.foil-setting-control select { width:100%; min-width:0; max-width:100%; min-height:44px; padding:0 12px; border:1px solid rgba(227,189,105,.27); border-radius:11px; color:var(--text); background:#120e0a; }
.foil-setting-preview {
    position:relative;
    height:78px;
    overflow:hidden;
    border:1px solid rgba(136,202,255,.4);
    border-radius:12px;
    background:linear-gradient(155deg,#182431,#090d13);
    box-shadow:inset 0 0 22px rgba(70,147,214,.12),0 8px 20px rgba(0,0,0,.25);
}
.foil-setting-preview::before,
.foil-setting-preview::after {
    content:"";
    position:absolute;
    pointer-events:none;
    mix-blend-mode:screen;
    background-repeat:no-repeat;
}
.foil-setting-preview::before {
    inset:-38%;
    background:conic-gradient(from 200deg at 53% 48%,transparent,rgba(74,101,255,.65),rgba(236,66,255,.72),rgba(255,190,88,.55),transparent 43%,rgba(42,225,255,.55),transparent 80%),radial-gradient(circle at 53% 48%,rgba(255,247,209,.8),rgba(156,65,255,.25) 12%,transparent 34%);
    background-repeat:no-repeat;
    animation:settings-cosmic-preview 7s linear infinite;
}
.foil-setting-preview::after {
    inset:0;
    opacity:.16;
    background:linear-gradient(120deg,transparent 20%,#8ff 35%,#f9c 48%,#ffb 62%,transparent 75%);
    background-repeat:no-repeat;
    background-size:250% 250%;
    background-position:0% 0%;
    mix-blend-mode:normal;
    transform:none;
    animation:foilSweep 4s linear infinite;
}
html[data-foil-style="rainbow"] .foil-setting-preview::before {
    inset:0;
    background:linear-gradient(135deg,rgba(255,0,255,.3),rgba(0,255,255,.3),rgba(255,255,0,.3),rgba(255,120,0,.3),rgba(0,255,180,.3),rgba(255,0,255,.3));
    background-repeat:no-repeat;
    background-size:300% 300%;
    animation:settings-rainbow-preview 6s linear infinite;
}
html[data-foil-style="gold"] .foil-setting-preview::before {
    inset:0;
    background:linear-gradient(120deg,rgba(107,67,0,.55),rgba(212,175,55,.7),rgba(116,74,2,.8),rgba(212,175,55,.7),rgba(138,90,0,.55));
    background-repeat:no-repeat;
    background-size:400% 400%;
    animation:settings-rainbow-preview 5s linear infinite;
}
html[data-foil-style="starry"] .foil-setting-preview::before {
    inset:0;
    opacity:.86;
    background:
        radial-gradient(circle at 12% 18%,rgba(255,255,255,.95) 0 1px,transparent 2px),
        radial-gradient(circle at 72% 14%,rgba(128,218,255,.9) 0 1px,transparent 2px),
        radial-gradient(circle at 88% 63%,rgba(255,226,147,.9) 0 1px,transparent 2px),
        radial-gradient(circle at 31% 78%,rgba(195,154,255,.9) 0 1px,transparent 2px),
        radial-gradient(ellipse at 68% 43%,rgba(72,90,255,.38),transparent 44%),
        radial-gradient(ellipse at 31% 72%,rgba(190,68,255,.3),transparent 48%),
        linear-gradient(145deg,#03081e,#0a1a48 48%,#1f0938);
    background-repeat:no-repeat;
    background-size:100% 100%;
    animation:tcg-starry-night 4.8s ease-in-out infinite alternate;
}
html[data-foil-style="black-hole"] .foil-setting-preview::before {
    inset:0;
    opacity:.88;
    background:
        radial-gradient(circle at 50% 48%,#000 0 10%,rgba(0,0,0,.98) 11%,transparent 16%),
        radial-gradient(circle at 50% 48%,transparent 0 15%,rgba(255,238,190,.8) 17%,rgba(128,93,255,.55) 21%,transparent 28%),
        conic-gradient(from 220deg at 50% 48%,transparent,rgba(53,205,255,.48),rgba(128,66,255,.68),rgba(255,111,43,.58),rgba(255,226,128,.72),rgba(61,129,255,.52),transparent 82%),
        radial-gradient(ellipse at 50% 48%,rgba(104,55,217,.4),rgba(5,9,24,.9) 56%,#000);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%,100% 100%,148% 148%,100% 100%;
    animation:tcg-black-hole 7s ease-in-out infinite alternate;
}
html[data-foil-style="christmas"] .foil-setting-preview::before {
    inset:0;
    opacity:.72;
    background:
        radial-gradient(circle at 12% 15%,#fff 0 1px,transparent 2px),
        radial-gradient(circle at 77% 18%,#fff 0 1px,transparent 2px),
        radial-gradient(circle at 28% 72%,#fff 0 1px,transparent 2px),
        radial-gradient(circle at 91% 66%,#fff 0 1px,transparent 2px),
        linear-gradient(120deg,rgba(127,8,22,.82) 0 18%,rgba(10,93,51,.78) 18% 36%,rgba(222,178,57,.68) 36% 43%,rgba(142,10,24,.8) 43% 62%,rgba(8,105,57,.78) 62% 81%,rgba(240,204,91,.68) 81% 88%,rgba(127,8,22,.82) 88% 100%);
    background-repeat:no-repeat;
    background-size:100% 100%;
    animation:tcg-christmas 4.2s ease-in-out infinite alternate;
}
html[data-foil-style="skulls"] .foil-setting-preview::before {
    inset:0;
    opacity:.76;
    background:
        url("../../../assets/img/foil-skulls.svg"),
        radial-gradient(ellipse at 32% 24%,rgba(72,255,172,.34),transparent 42%),
        radial-gradient(ellipse at 72% 72%,rgba(173,72,255,.36),transparent 48%),
        linear-gradient(145deg,#04120f,#13081e 52%,#020809);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 100%;
    animation:tcg-skulls 4.6s ease-in-out infinite alternate;
}
html[data-foil-style="partyhats"] .foil-setting-preview::before {
    inset:0;
    opacity:.86;
    background:
        url("../../../assets/img/foil-icons/partyhat-blue.webp") 8% 8% / 15% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-red.webp") 49% 5% / 11% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-yellow.webp") 89% 16% / 16% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-purple.webp") 27% 27% / 12% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-white.webp") 70% 34% / 11% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-green.webp") 9% 45% / 16% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-red.webp") 52% 51% / 13% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-blue.webp") 92% 58% / 11% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-white.webp") 34% 68% / 15% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-yellow.webp") 76% 77% / 12% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-purple.webp") 12% 86% / 11% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-green.webp") 51% 93% / 16% auto no-repeat,
        url("../../../assets/img/foil-icons/partyhat-red.webp") 94% 94% / 10% auto no-repeat,
        radial-gradient(ellipse at 50% 45%,rgba(255,235,158,.4),transparent 44%),
        linear-gradient(145deg,#15254c,#46185b 52%,#14483e);
    animation:tcg-partyhat-icons 4.4s ease-in-out infinite alternate;
}
html[data-foil-style="halloween-masks"] .foil-setting-preview::before {
    inset:0;
    opacity:.88;
    background:
        url("../../../assets/img/foil-icons/halloween-mask-blue.png") 8% 7% / 13% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-green.webp") 43% 12% / 10% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-red.png") 88% 9% / 15% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-purple.webp") 23% 27% / 11% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-orange.webp") 69% 31% / 14% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-yellow.webp") 7% 43% / 10% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-cyan.webp") 48% 48% / 15% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-blue.png") 92% 51% / 11% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-red.png") 27% 64% / 14% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-green.webp") 72% 69% / 10% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-orange.webp") 10% 80% / 15% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-purple.webp") 51% 86% / 11% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-yellow.webp") 91% 83% / 14% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-cyan.webp") 31% 95% / 10% auto no-repeat,
        url("../../../assets/img/foil-icons/halloween-mask-green.webp") 75% 96% / 12% auto no-repeat,
        radial-gradient(ellipse at 50% 48%,rgba(255,126,47,.3),transparent 42%),
        linear-gradient(145deg,#14081e,#2d0c13 52%,#051d1b);
    animation:tcg-halloween-mask-icons 4.2s ease-in-out infinite alternate;
}
.settings-update-card .ghost-button,.settings-reset-card .ghost-button { min-width:144px; max-width:100%; white-space:normal; }
.settings-discord-card { border-color:rgba(110,122,255,.27); background:radial-gradient(circle at 100% 0,rgba(88,101,242,.13),transparent 16rem),linear-gradient(145deg,rgba(25,22,43,.96),rgba(13,11,20,.96)); }
.discord-settings-icon,.topbar-discord-action .action-icon { color:#cbd0ff; border-color:rgba(118,130,255,.28); background:rgba(88,101,242,.11); }
.discord-app-link { width:auto; min-width:155px; padding-inline:16px; color:#eef0ff; border-color:rgba(118,130,255,.35); background:rgba(88,101,242,.11); text-decoration:none; }
.discord-app-link:hover { border-color:rgba(145,154,255,.62); background:rgba(88,101,242,.18); }
@keyframes settings-cosmic-preview {
    from { transform:rotate(0deg) scale(1); filter:hue-rotate(0deg); }
    to { transform:rotate(360deg) scale(1.08); filter:hue-rotate(22deg); }
}
@keyframes settings-rainbow-preview {
    from { background-position:0% 50%; }
    to { background-position:100% 50%; }
}
html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
}
@container settings-page (max-width:900px) {
    .settings-grid { grid-template-columns:minmax(0,1fr); }
    .settings-card-wide { grid-column:auto; grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); }
}
@container settings-page (max-width:620px) {
    .settings-card,.settings-card-wide { grid-template-columns:minmax(0,1fr); align-items:stretch; }
    .foil-setting-control { grid-template-columns:minmax(0,1fr); }
    .settings-toggle { width:100%; justify-self:stretch; }
    .settings-card > .ghost-button,
    .settings-card > .primary-button { width:100%; min-width:0; white-space:normal; }
    .anonymous-settings-actions { display:grid; grid-template-columns:minmax(0,1fr); }
    .anonymous-settings-actions button { width:100%; }
}
@media (min-width:920px) and (max-width:1220px) {
    .settings-grid { grid-template-columns:minmax(0,1fr); }
    .settings-card-wide { grid-column:auto; grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); }
}
@media (min-width:920px) and (max-width:1040px) {
    .settings-card,.settings-card-wide { grid-template-columns:minmax(0,1fr); align-items:stretch; }
    .foil-setting-control { grid-template-columns:minmax(90px,112px) minmax(0,1fr); }
    .settings-toggle { width:100%; justify-self:stretch; }
    .settings-update-card .ghost-button,
    .settings-reset-card .ghost-button { width:100%; min-width:0; }
}
@media (max-width:760px) {
    .settings-grid { grid-template-columns:1fr; }
    .settings-card,.settings-card-wide { grid-column:auto; grid-template-columns:1fr; align-items:stretch; }
    .settings-toggle { justify-self:stretch; }
}
@media (max-width:480px) {
    .foil-setting-control { grid-template-columns:1fr; }
    .foil-setting-preview { height:68px; }
}

/* v3.4.0 changelog and pack-hover layering */
.pack-grid,.packs-page { overflow:visible; }
.pack-stack-tile { position:relative; isolation:isolate; }
.pack-stack-tile:hover,.pack-stack-tile:focus-within { z-index:300; }
.pack-stack-tile:hover .pack-stack-art { position:relative; z-index:301; filter:drop-shadow(0 20px 32px rgba(0,0,0,.72)); }
.changelog-page { max-width:1050px; }
.changelog-status { margin:8px 0 16px; color:var(--muted); font-size:.72rem; }
.app-changelog-list { display:grid; gap:13px; padding-bottom:80px; }
.app-release-entry { padding:22px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(38,29,20,.94),rgba(14,11,9,.97)); box-shadow:0 14px 34px rgba(0,0,0,.22); }
.app-release-entry.is-latest { border-color:rgba(229,188,91,.48); box-shadow:inset 3px 0 var(--gold),0 14px 34px rgba(0,0,0,.22); }
.app-release-entry header { display:flex; justify-content:space-between; gap:16px; }
.app-release-entry header div { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.app-release-entry header span { color:var(--gold-bright); font-weight:900; }
.app-release-entry header b { padding:3px 7px; border:1px solid rgba(229,188,91,.35); border-radius:999px; color:var(--gold-bright); background:rgba(229,188,91,.08); font-size:.55rem; }
.app-release-entry h3 { width:100%; margin:3px 0; color:var(--cream); font-family:Georgia,"Times New Roman",serif; font-size:1.25rem; }
.app-release-entry time,.app-release-entry p,.app-release-entry li { color:var(--muted); font-size:.7rem; line-height:1.55; }
.app-release-entry ul { display:grid; gap:7px; margin:13px 0 0; padding-left:18px; }
@media (max-width:560px) { .app-release-entry header { flex-direction:column; }.app-release-entry { padding:18px; } }


/* v3.5.8 adaptive multi-row pack opening ---------------------------------
   The reveal stage fits the Alt1 viewport as one self-contained board and
   reflows five cards into 5, 3 + 2, or 2 + 2 + 1 layouts as space changes. */
.pack-opening {
    overflow: hidden;
    overscroll-behavior: none;
}

.opening-content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(1280px, 100%);
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
    padding: clamp(8px, 1.8vh, 18px);
    overflow: hidden;
}

.opening-header {
    min-height: 44px;
}

.rip-stage,
.reveal-stage {
    min-height: 0;
    height: 100%;
}

.rip-stage {
    align-content: center;
    padding-bottom: 8px;
}

.pack-shell {
    width: var(--opening-pack-width, min(52vw, 260px));
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
}

.reveal-stage {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: stretch;
    gap: clamp(5px, 1.1vh, 12px);
    padding: 4px 0 8px;
    overflow: hidden;
}

.reveal-headline {
    align-self: start;
}

.card-fan {
    --opening-card-width: 150px;
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    justify-self: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    column-gap: var(--opening-card-gap, 10px);
    row-gap: var(--opening-card-row-gap, 10px);
    width: min(100%, var(--opening-fan-width, 100%));
    max-width: 100%;
    max-height: var(--opening-fan-height, none);
    min-height: 0;
    overflow: visible;
}

.card-fan .trading-card {
    flex: 0 0 var(--opening-card-width);
    width: var(--opening-card-width);
    max-height: 100%;
    margin: 0;
}

.card-fan .trading-card.is-click-reveal {
    cursor: pointer;
    outline: none;
}

.card-fan .trading-card.is-click-reveal:hover,
.card-fan .trading-card.is-click-reveal:focus-visible {
    filter: none;
    transform: translateY(18px) scale(.94);
}

.card-fan .trading-card.is-click-reveal:focus-visible {
    outline: 2px solid rgba(255,239,191,.86);
    outline-offset: 4px;
    box-shadow: none;
    border-radius: 14px;
}

.reveal-actions {
    position: relative;
    z-index: 30;
    flex-wrap: wrap;
    align-self: end;
    width: min(100%, 720px);
    min-height: 44px;
    padding: 4px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(6, 12, 20, .25), rgba(6, 12, 20, .92));
    backdrop-filter: blur(10px);
}

.reveal-actions > button {
    min-width: min(180px, 42vw);
    min-height: 40px;
}

.opening-summary {
    max-height: 78px;
    overflow: auto;
    padding: 7px;
}

@media (max-height: 700px) {
    .opening-header .eyebrow,
    .reveal-headline p,
    .rip-copy { display: none; }
    .opening-header h2 { margin: 0; font-size: 1.15rem; }
    .reveal-stage { gap: 4px; }
    .opening-summary { max-height: 58px; }
    .reveal-actions > button { min-height: 36px; }
}

@media (max-width: 520px) {
    .opening-content { padding: 8px 5px; }
    .card-fan { gap: var(--opening-card-gap, 5px); }
    .reveal-actions { gap: 5px; }
    .reveal-actions > button { min-width: 0; flex: 1 1 30%; padding-inline: 7px; font-size: .68rem; }
}

/* v3.5.5 adaptive Shop and Pack Vault ------------------------------------
   Commerce pages fit the Alt1 viewport and keep their controls in view.
   Only the product grid scrolls when the window is too small for all items. */
.shop-page.is-active,
.packs-page.is-active {
    height: var(--commerce-page-height, auto);
    min-height: 0;
    overflow: hidden;
}
.shop-page.is-active {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: stretch;
}
.packs-page.is-active {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    align-content: stretch;
}
.shop-page .shop-list,
.packs-page .pack-grid {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
    padding: 2px 7px 18px 2px;
    scrollbar-color: rgba(227,189,105,.35) rgba(255,255,255,.025);
}
.shop-page .shop-list {
    grid-template-columns: repeat(var(--shop-columns, 2), minmax(0, 1fr));
    gap: clamp(9px, 1.5vw, 15px);
}
.shop-page .shop-card {
    min-width: 0;
    min-height: var(--shop-card-min-height, 270px);
    grid-template-columns: minmax(86px, 31%) minmax(0, 1fr);
    gap: var(--shop-card-gap, 15px);
    padding: var(--shop-card-padding, 16px);
    border-radius: 18px;
}
.shop-page .shop-pack-visual {
    min-width: 0;
    align-self: center;
}
.shop-page .shop-pack-art {
    width: 100%;
    max-height: var(--shop-pack-art-height, 175px);
    object-fit: contain;
}
.shop-page .shop-card-content { justify-content: center; }
.shop-page .shop-card h3 { font-size: clamp(.92rem, 1.6vw, 1.12rem); }
.shop-page .shop-card p { margin: 5px 0 9px; font-size: clamp(.62rem, 1vw, .74rem); line-height: 1.4; }
.shop-page .pack-facts { gap: 5px; margin-bottom: 9px; }
.shop-page .fact-chip { padding: 4px 6px; font-size: .56rem; }
.shop-page .shop-purchase-panel { margin-top: auto; }
.shop-page .shop-price-summary { margin-bottom: 6px; }
.shop-page .price-row { margin-bottom: 2px; font-size: 1rem; }
.shop-page .shop-buy-primary,
.shop-page .shop-buy-more { min-height: 38px; }
.shop-page .shop-buy-more { min-width: 118px; padding-inline: 9px; font-size: .64rem; }
.shop-page .shop-purchase-flyout { max-height: min(430px, calc(var(--commerce-page-height, 700px) - 90px)); overflow:auto; }

.packs-page .pack-grid {
    grid-template-columns: repeat(var(--vault-columns, 3), minmax(0, 1fr));
    gap: clamp(9px, 1.5vw, 15px);
}
.packs-page .pack-stack-tile {
    min-width: 0;
    min-height: var(--vault-tile-min-height, 290px);
    padding: clamp(10px, 1.5vw, 15px);
}
.packs-page .pack-stack-art {
    min-height: 0;
    height: var(--vault-pack-art-height, 210px);
}
.packs-page .pack-stack-art img {
    width: 100%;
    height: 100%;
    max-height: var(--vault-pack-art-height, 210px);
    object-fit: contain;
}
.packs-page .pack-tile h3 { font-size: clamp(.88rem, 1.4vw, 1.08rem); }
.packs-page .pack-tile p { margin: 5px 0 10px; font-size: .65rem; line-height: 1.4; }
.packs-page .pack-stack-actions { gap: 6px; }
.packs-page .pack-stack-actions button { min-height: 36px; padding-inline: 5px; font-size: .62rem; }

.shop-page.is-commerce-compact .v32-page-hero,
.packs-page.is-commerce-compact .v32-page-hero {
    gap: 14px;
    margin-bottom: 9px;
    padding: 14px 16px;
    border-radius: 16px;
}
.shop-page.is-commerce-compact .v32-page-hero h2,
.packs-page.is-commerce-compact .v32-page-hero h2 { margin: 2px 0 4px; font-size: 1.35rem; }
.shop-page.is-commerce-compact .v32-page-hero p,
.packs-page.is-commerce-compact .v32-page-hero p { font-size: .66rem; line-height: 1.35; }
.shop-page.is-commerce-compact .command-stats article,
.packs-page.is-commerce-compact .vault-stat { padding: 8px; }
.shop-page.is-commerce-compact .command-stats strong,
.packs-page.is-commerce-compact .vault-stat strong { margin: 2px 0 0; font-size: 1rem; }
.shop-page.is-commerce-compact .quick-help-card { margin-bottom: 9px; padding: 10px 13px; border-radius: 14px; }
.shop-page.is-commerce-compact .quick-help-copy h2 { margin: 2px 0 4px; font-size: .96rem; }
.shop-page.is-commerce-compact .quick-help-copy p { font-size: .62rem; line-height: 1.35; }
.shop-page.is-commerce-compact .shop-overview-restore { margin-bottom: 9px; }
.packs-page.is-commerce-compact .vault-toolbar { margin-bottom: 8px; padding-bottom: 7px; }
.packs-page.is-commerce-compact .vault-toolbar h2 { font-size: 1.25rem; }
.packs-page.is-commerce-compact .vault-guidance { margin: 1px 0 9px; font-size: .61rem; }
.packs-page.is-commerce-compact .vault-guidance span { width: 21px; height: 21px; }

.shop-page.is-commerce-tight .v32-page-hero p,
.shop-page.is-commerce-tight .command-stats small,
.packs-page.is-commerce-tight .v32-page-hero p,
.packs-page.is-commerce-tight .vault-guidance { display: none; }
.shop-page.is-commerce-tight .v32-page-hero,
.packs-page.is-commerce-tight .v32-page-hero { padding: 10px 12px; }
.shop-page.is-commerce-tight .quick-help-card { padding: 8px 11px; }
.shop-page.is-commerce-tight .quick-help-copy p { display:none; }
.shop-page.is-commerce-tight .quick-help-card .ghost-button { min-height:34px; }
.packs-page.is-commerce-tight .vault-toolbar { margin:0 0 6px; }

@media (max-width: 649px) {
    .shop-page .shop-card { grid-template-columns: minmax(88px, 29%) minmax(0, 1fr); }
    .shop-page .shop-buy-more { min-width: 0; }
}
@media (max-width: 430px) {
    .shop-page .shop-card { grid-template-columns: 88px minmax(0, 1fr); }
    .shop-page .shop-card p { display:none; }
    .shop-page .economy-fact { display:none; }
    .packs-page .pack-stack-actions { grid-template-columns: 1fr; }
}

/* v3.5.6 commerce viewport correction ------------------------------------
   Shop and Pack Vault keep one natural page scroll. Cards adapt to the Alt1
   window without creating nested scrollbars, clipped art, or empty page wells. */
/* v3.5.7 Pack Vault alignment recovery:
   .pack-tile previously left justify-content:flex-end behind when it changed
   from flex to grid. Grid therefore shrank to max-content and docked every
   child against the right edge. The base .pack-stack-tile rule now stretches
   its single desktop column across the entire tile. */
.shop-page.is-active,
.packs-page.is-active {
    height: auto;
    min-height: 0;
    overflow: visible;
    align-content: start;
}

.shop-page.is-active {
    grid-template-rows: auto auto auto auto;
}

.packs-page.is-active {
    grid-template-rows: auto auto auto auto;
}

.shop-page .shop-list,
.packs-page .pack-grid {
    min-height: 0;
    overflow: visible;
    padding: 2px 0 max(18px, env(safe-area-inset-bottom));
    overscroll-behavior: auto;
    scrollbar-color: auto;
}

.shop-page .shop-list {
    grid-template-columns: repeat(var(--shop-columns, 2), minmax(0, 1fr));
    align-items: stretch;
}

.shop-page .shop-card {
    width: 100%;
    min-height: 0;
    height: 100%;
    align-items: center;
}

.shop-page .shop-pack-visual {
    width: 100%;
    min-height: 0;
    height: var(--shop-pack-art-height, 185px);
}

.shop-page .shop-pack-art {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: var(--shop-pack-art-height, 185px);
}

.shop-page .shop-card-content {
    align-self: stretch;
    justify-content: center;
}

.shop-page .shop-purchase-flyout {
    max-height: min(430px, calc(100vh - 120px));
}

.packs-page .pack-grid {
    grid-template-columns: repeat(var(--vault-columns, 3), minmax(0, 1fr));
    align-items: stretch;
}

.packs-page .pack-stack-tile {
    min-height: 0;
    height: 100%;
}

.packs-page .pack-stack-art {
    height: var(--vault-pack-art-height, 220px);
    min-height: 0;
}

.packs-page .pack-stack-art img {
    width: auto;
    max-width: 100%;
    height: 100%;
    max-height: var(--vault-pack-art-height, 220px);
}

/* Short windows receive denser cards, but the page itself remains natural. */
.shop-page.is-commerce-tight .shop-card,
.packs-page.is-commerce-tight .pack-stack-tile {
    border-radius: 15px;
}

.shop-page.is-commerce-tight .pack-facts {
    margin-bottom: 6px;
}

.shop-page.is-commerce-tight .shop-buy-primary,
.shop-page.is-commerce-tight .shop-buy-more,
.packs-page.is-commerce-tight .pack-stack-actions button {
    min-height: 35px;
}

@media (min-width: 920px) {
    .shop-page .shop-list,
    .packs-page .pack-grid {
        padding-bottom: 8px;
    }

    .shop-page .shop-card {
        grid-template-columns: minmax(94px, 31%) minmax(0, 1fr);
    }

    .packs-page .pack-stack-actions {
        margin-top: 10px;
    }
}

@media (max-width: 919px) {
    .shop-page.is-active,
    .packs-page.is-active {
        padding-bottom: 18px;
    }

    .shop-page .shop-list,
    .packs-page .pack-grid {
        padding-bottom: 22px;
    }
}

/* Compact Alt1 windows: use horizontal cards instead of towering tiles. */
@media (max-width: 559px) {
    .shop-page .shop-list,
    .packs-page .pack-grid {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .shop-page .shop-card {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 11px;
        min-height: 0;
        padding: var(--shop-card-padding, 12px);
        border-radius: 17px;
    }

    .shop-page .shop-pack-visual {
        height: var(--shop-pack-art-height, 148px);
        align-self: center;
    }

    .shop-page .shop-pack-halo {
        width: 108%;
    }

    .shop-page .shop-card-content {
        align-self: center;
        justify-content: flex-start;
    }

    .shop-page .shop-card-content .eyebrow {
        font-size: .5rem;
        line-height: 1.15;
    }

    .shop-page .shop-card h3 {
        margin-top: 1px;
        font-size: .96rem;
        line-height: 1.05;
    }

    .shop-page .shop-card p {
        display: none;
    }

    .shop-page .pack-facts {
        gap: 4px;
        margin: 6px 0;
    }

    .shop-page .fact-chip {
        padding: 3px 5px;
        font-size: .5rem;
    }

    .shop-page .economy-fact {
        display: none;
    }

    .shop-page .shop-price-summary {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 6px;
        margin-bottom: 6px;
    }

    .shop-page .price-row {
        margin: 0;
        font-size: .92rem;
    }

    .shop-page .price-row small,
    .shop-page .affordable-count {
        font-size: .52rem;
    }

    .shop-page .shop-purchase-actions {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px;
    }

    .shop-page .shop-buy-primary,
    .shop-page .shop-buy-more {
        min-height: 36px;
        border-radius: 10px;
    }

    .shop-page .shop-buy-more {
        min-width: 54px;
        padding-inline: 8px;
    }

    .shop-page .shop-buy-more span {
        font-size: 0;
    }

    .shop-page .shop-buy-more span::after {
        content: "More";
        font-size: .59rem;
    }

    .shop-page .shop-purchase-flyout {
        right: 0;
        left: auto;
        width: min(290px, calc(100vw - 40px));
        max-height: min(390px, calc(100vh - 110px));
    }

    .packs-page .vault-command-hero {
        gap: 10px;
        margin-bottom: 12px;
        padding: 13px 14px;
        border-radius: 18px;
    }

    .packs-page .vault-command-hero h2 {
        margin: 2px 0 0;
        font-size: 1.45rem;
    }

    .packs-page .vault-command-hero p,
    .packs-page .vault-guidance {
        display: none;
    }

    .packs-page .vault-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 7px;
    }

    .packs-page .vault-stat {
        min-width: 0;
        padding: 8px 10px;
        border-radius: 12px;
    }

    .packs-page .vault-stat strong {
        margin-top: 2px;
        font-size: 1rem;
    }

    .packs-page .vault-toolbar {
        margin: 0 0 9px;
        padding: 0 1px 8px;
    }

    .packs-page .vault-toolbar h2 {
        font-size: 1.42rem;
    }

    .packs-page .pack-stack-tile {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-areas:
            "art title"
            "art copy"
            "art actions";
        align-items: center;
        gap: 3px 12px;
        min-height: 0;
        padding: 11px;
        text-align: left;
    }

    .packs-page .pack-stack-art {
        grid-area: art;
        width: 112px;
        height: var(--vault-pack-art-height, 158px);
        align-self: center;
    }

    .packs-page .pack-stack-art img {
        margin: 0;
    }

    .packs-page .pack-count-badge {
        top: 1px;
        right: -2px;
        min-width: 38px;
        padding: 5px 8px;
        font-size: .64rem;
    }

    .packs-page .pack-stack-tile h3 {
        grid-area: title;
        align-self: end;
        margin: 0;
        font-size: .98rem;
        line-height: 1.08;
    }

    .packs-page .pack-stack-tile p {
        grid-area: copy;
        align-self: start;
        margin: 2px 0 7px;
        font-size: .59rem;
        line-height: 1.35;
    }

    .packs-page .pack-stack-actions {
        grid-area: actions;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin: 0;
    }

    .packs-page .pack-stack-actions button {
        min-height: 34px;
        padding-inline: 3px;
        border-radius: 9px;
        font-size: .57rem;
    }
}

@media (max-width: 379px) {
    .shop-page .shop-card {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .shop-page .shop-pack-visual {
        height: 132px;
    }

    .shop-page .foil-fact {
        display: none;
    }

    .packs-page .pack-stack-tile {
        grid-template-columns: 98px minmax(0, 1fr);
        gap: 3px 9px;
    }

    .packs-page .pack-stack-art {
        width: 98px;
        height: 142px;
    }
}

/* True multi-pack reveal board ------------------------------------------ */
.opening-batch-badge {
    position:absolute;
    z-index:30;
    top:-12px;
    right:-14px;
    display:grid;
    min-width:46px;
    min-height:38px;
    padding:5px 9px;
    place-items:center;
    border:1px solid rgba(239,205,124,.62);
    border-radius:999px;
    color:#25170a;
    background:linear-gradient(135deg,#ffe39b,#c98c32);
    box-shadow:0 9px 24px rgba(0,0,0,.34),0 0 22px rgba(227,189,105,.18);
    font-size:.8rem;
    font-weight:950;
}
.pack-shell.is-batch-opening {
    filter:drop-shadow(-8px 8px 0 rgba(66,47,29,.72)) drop-shadow(-15px 15px 0 rgba(32,24,17,.7)) drop-shadow(0 30px 30px rgba(0,0,0,.55));
}
.pack-opening.is-batch-opening {
    place-items:start center;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-y:contain;
}
.pack-opening.is-batch-opening .opening-content {
    grid-template-rows:auto auto;
    height:auto;
    min-height:100vh;
    min-height:100dvh;
    max-height:none;
    overflow:visible;
}
.pack-opening.is-batch-opening .reveal-stage {
    grid-template-rows:auto auto auto auto;
    height:auto;
    min-height:0;
    align-content:start;
    overflow:visible;
    padding:8px 0 28px;
}
.card-fan.is-batch-grid {
    align-content:start;
    align-items:flex-start;
    justify-content:center;
    max-height:none;
    overflow:visible;
    padding:14px 0 20px;
    border:0;
    background:none;
}
.pack-opening.is-batch-opening .reveal-actions {
    align-self:start;
}
.pack-opening.is-batch-opening .opening-summary {
    max-height:none;
    overflow:visible;
}
.opening-card-sequence {
    position:absolute;
    z-index:32;
    top:6px;
    left:6px;
    display:inline-flex;
    min-height:19px;
    padding:3px 6px;
    align-items:center;
    border:1px solid rgba(234,207,147,.34);
    border-radius:999px;
    color:#f1dfb8;
    background:rgba(14,11,8,.86);
    box-shadow:0 4px 12px rgba(0,0,0,.3);
    font-size:.49rem;
    font-weight:900;
    letter-spacing:.05em;
    pointer-events:none;
}
.trading-card.is-revealed > .opening-card-sequence { display:none; }

/* Inline Chronicle Coin balance changes --------------------------------- */
.currency-value-line {
    display: inline-flex;
    min-width: 0;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}
.command-stats .currency-value-line {
    display: inline-flex;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
}
.currency-delta-inline {
    display: inline-block;
    flex: 0 0 auto;
    font-size: .68rem;
    font-weight: 950;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: .015em;
    pointer-events: none;
    animation: currency-delta-fade 2.1s ease both;
}
.command-stats .currency-delta-inline { display: inline-block; }
.currency-delta-inline.is-gain {
    color: #8ee89b;
    text-shadow: 0 0 8px rgba(86,204,106,.28);
}
.currency-delta-inline.is-loss {
    color: #f09a82;
    text-shadow: 0 0 8px rgba(225,111,82,.24);
}
@keyframes currency-delta-fade {
    0% { opacity:0; transform:translateX(-3px); }
    12%,72% { opacity:1; transform:translateX(0); }
    100% { opacity:0; transform:translateX(3px); }
}

/* v3.5.27 self-service RuneMetrics repair */
.runemetrics-repair-card { border-color:rgba(84,196,218,.28); background:radial-gradient(circle at 100% 0,rgba(54,177,207,.12),transparent 18rem),linear-gradient(145deg,rgba(18,27,31,.97),rgba(11,13,13,.97)); }
.runemetrics-repair-actions { display:grid; justify-items:end; gap:10px; min-width:0; }
.runemetrics-repair-actions > span { max-width:440px; color:#9aa9a8; font-size:.66rem; line-height:1.45; text-align:right; }
.runemetrics-repair-actions .ghost-button { min-width:190px; white-space:normal; }
.runemetrics-reset-modal-card { width:min(100%,560px); }
.runemetrics-reset-mark { width:56px; height:56px; display:grid; place-items:center; margin-bottom:12px; border:1px solid rgba(96,215,235,.35); border-radius:16px; color:#8de9f5; background:rgba(40,165,190,.12); font-size:1.35rem; }
.runemetrics-reset-summary { display:grid; gap:4px; margin:15px 0; padding:13px; border:1px solid rgba(227,189,105,.18); border-radius:13px; background:rgba(0,0,0,.18); }
.runemetrics-reset-summary strong { color:#f6dd9a; font-size:.76rem; }
.runemetrics-reset-summary span { color:#9d9382; font-size:.67rem; line-height:1.45; }
.runemetrics-reset-options { display:grid; gap:9px; margin:0; padding:0; border:0; }
.runemetrics-reset-options legend { margin-bottom:7px; color:#c8b995; font-size:.66rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.runemetrics-reset-options label { display:flex; align-items:flex-start; gap:10px; padding:11px; border:1px solid rgba(160,145,119,.2); border-radius:12px; background:rgba(255,255,255,.025); cursor:pointer; }
.runemetrics-reset-options input { margin-top:3px; accent-color:#e3bd69; }
.runemetrics-reset-options span { display:grid; gap:3px; }
.runemetrics-reset-options strong { color:#f0dfb4; font-size:.72rem; }
.runemetrics-reset-options small { color:#948b7d; font-size:.64rem; line-height:1.4; }
.runemetrics-reset-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:8px; }
.runemetrics-reset-footnote { display:block; margin-top:12px; color:#81786b; font-size:.6rem; line-height:1.45; }
.runemetrics-reset-confirmation { text-transform:uppercase; letter-spacing:.16em; font-weight:900; }
@container settings-page (max-width:620px) { .runemetrics-repair-actions { justify-items:stretch; } .runemetrics-repair-actions > span { text-align:left; } .runemetrics-repair-actions .ghost-button { width:100%; min-width:0; } }
@media (max-width:520px) { .runemetrics-reset-actions { display:grid; grid-template-columns:1fr; } .runemetrics-reset-actions button { width:100%; } }

/* Admin / Lead client-only testing sandbox ------------------------------ */
.testing-page { container:testing-page / inline-size; }
.testing-heading { margin-bottom:18px; }
.testing-safety-banner {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    margin-bottom:16px;
    padding:16px;
    border:1px solid rgba(91,211,225,.28);
    border-radius:17px;
    background:linear-gradient(135deg,rgba(24,55,62,.78),rgba(15,18,19,.94));
    box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.testing-safety-banner>span,.testing-icon {
    display:grid;
    place-items:center;
    border:1px solid rgba(104,220,233,.3);
    color:#9beaf2;
    background:rgba(64,180,198,.1);
    font-weight:950;
}
.testing-safety-banner>span { width:50px;height:50px;border-radius:15px;font-size:.67rem;letter-spacing:.12em; }
.testing-safety-banner strong { display:block;color:#eff5e7;font-size:.86rem; }
.testing-safety-banner p { margin:4px 0 0;color:#9ba9a6;font-size:.68rem;line-height:1.5; }
.testing-safety-banner small { padding:7px 10px;border:1px solid rgba(225,190,105,.22);border-radius:999px;color:#e7cc84;background:rgba(206,160,58,.08);font-size:.61rem;font-weight:850;white-space:nowrap; }
.testing-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.testing-card {
    display:grid;
    gap:16px;
    align-content:space-between;
    min-width:0;
    padding:18px;
    border:1px solid rgba(216,183,105,.18);
    border-radius:17px;
    background:linear-gradient(145deg,rgba(29,24,18,.94),rgba(13,12,11,.96));
}
.testing-card-wide { grid-column:1/-1;grid-template-columns:minmax(0,1fr) auto;align-items:center; }
.testing-card-copy { display:flex;gap:12px;align-items:flex-start;min-width:0; }
.testing-icon { flex:0 0 auto;width:40px;height:40px;border-radius:12px;font-size:.72rem; }
.testing-card h3 { margin:1px 0 5px;color:#f3e7ca;font-size:.86rem; }
.testing-card p { margin:0;color:#9d9383;font-size:.67rem;line-height:1.5; }
.testing-button-row { display:flex;flex-wrap:wrap;gap:8px; }
.testing-button-row button { flex:1 1 90px;min-width:0; }
.testing-readonly-chip { justify-self:start;padding:7px 10px;border:1px solid rgba(104,220,233,.2);border-radius:999px;color:#93dce4;background:rgba(64,180,198,.07);font-size:.62rem;font-weight:850; }
@container testing-page (max-width:650px) {
    .testing-safety-banner { grid-template-columns:auto minmax(0,1fr); }
    .testing-safety-banner small { grid-column:1/-1;justify-self:start; }
    .testing-grid { grid-template-columns:1fr; }
    .testing-card-wide { grid-column:auto;grid-template-columns:1fr; }
    .testing-card-wide>button { width:100%; }
}