/*
 * Relics preview page ([relics view="preview"]): page layout, tabs and the
 * pack-opening stage. The cards, the pack itself and the Daily Dig board are
 * styled by the plugin's own rlc-cards.css and rlc-app.css (the page sits in
 * .rlc-app), so they never need copying.
 */

/*
 * Relics preview: page base and the Rarities, Factions, Card guide and Vault
 * views. Cards themselves come from relics-cards.css (a copy of the
 * plugin's rlc-cards.css); the pack opener from pack.css.
 */

:root {
    --page: #07090d;
    --ink: #e9edf5;
    --ink-2: #a8b3c4;
    --ink-3: #7d8aa0;
    --line: #2c3550;
    --panel: #0f1420;
    --accent: #8fb6ff;
    --card-w: clamp(220px, 24vw, 300px);
    color-scheme: dark;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1200px 700px at 50% -10%, #1b2440 0%, transparent 60%),
        radial-gradient(900px 600px at 100% 110%, #2a1630 0%, transparent 55%),
        var(--page);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

.intro {
    max-width: 760px;
    margin: 0 auto;
    padding-block: 48px 8px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    text-align: center;
}

.intro__logo { display: flex; justify-content: center; margin: 0 0 18px; }
.intro__logo .rlc-logo { --logo-w: min(300px, 80vw); }

.intro__eyebrow {
    margin: 0 0 6px;
    color: var(--accent);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.intro h1 { margin: 0 0 10px; font-family: 'Cinzel', Georgia, serif; color: #f3e6c4; font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: 0.04em; text-wrap: balance; }
.intro p { margin: 0 0 12px; color: var(--ink-2); line-height: 1.6; }

.motion-btn {
    margin-top: 4px;
    padding: 9px 18px;
    border: 1px solid #3a4560;
    border-radius: 999px;
    background: #141a27;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr));
    justify-items: center;
    gap: 56px 32px;
    max-width: 1400px;
    margin: 0 auto;
    padding-block: 40px 96px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.slot__label { max-width: var(--card-w); text-align: center; }
.slot__label strong { display: block; font-size: 15px; font-weight: 600; }
.slot__label span { color: var(--ink-2); font-size: 13px; line-height: 1.45; }

.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding-block: 32px 96px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.tag {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}

.tag--warn { border-color: #6b5a2a; color: #f0c86a; }

/* ------------------------------------------------------------------ */
/* Factions                                                            */
/* ------------------------------------------------------------------ */

.faction-list { display: grid; gap: 28px; }

.faction {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 22px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--f1);
    border-radius: 16px;
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--f1) 16%, transparent), transparent 55%),
        var(--panel);
}

.faction .rlc-card { --card-w: 220px; }
.faction__body { min-width: 0; }
.faction__body > h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 4px; font-family: 'Cinzel', Georgia, serif; color: #f3e6c4; font-size: 24px; }
.faction__code { color: var(--ink-3); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; }
.faction__flavour { margin: 0 0 14px; color: var(--ink-2); font-style: italic; }

.faction dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 18px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.faction dt { color: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 2px; }
.faction dd { margin: 0; color: var(--ink); }

/* ------------------------------------------------------------------ */
/* Card guide                                                          */
/* ------------------------------------------------------------------ */

.guide {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.guide__card { position: sticky; top: 90px; justify-self: center; width: 100%; max-width: 340px; margin-bottom: 24px; }
.guide__card .rlc-card { --card-w: 100%; cursor: default; }
.guide__pins { position: absolute; inset: 0; pointer-events: none; }

.guide__pin {
    position: absolute;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid #0b1020;
    border-radius: 50%;
    background: #ffd25e;
    color: #0b1020;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.guide__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: pin; }

.guide__list li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--panel);
}

.guide__list li::before {
    counter-increment: pin;
    content: counter(pin);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffd25e;
    color: #0b1020;
    font-size: 13px;
    font-weight: 800;
}

.guide__list strong { display: block; margin-bottom: 2px; font-size: 15px; }
.guide__list p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.guide__list small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 12px; }

.guide__rule {
    margin: 28px 0 0;
    padding: 14px 16px;
    border: 1px dashed #4a5578;
    border-radius: 12px;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.55;
}

.icon-key {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    margin-top: 28px;
}

.icon-key h3 { grid-column: 1 / -1; margin: 10px 0 0; font-size: 16px; }

.icon-key__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    font-size: 13px;
    line-height: 1.45;
}

.icon-key__item b { display: block; font-size: 14px; }
.icon-key__item span { color: var(--ink-2); }
.icon-key__item .icon-key__disc { color: #1d1408; }
.icon-key__item em { color: var(--ink-3); }

.icon-key__disc {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 30%, #ffd88a, #e5862b 72%);
    color: #1d1408;
}

.icon-key__disc--ability { background: radial-gradient(circle at 38% 30%, #ead9ff, #9a74e0 72%); }
.icon-key__disc svg { width: 64%; height: 64%; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ */
/* Daily Dig (the board itself comes from css/daily.css)               */
/* ------------------------------------------------------------------ */

.wrap--dig { max-width: 760px; }
.rlc-app .rlc-muted { color: var(--ink-2); }
.dig-status { min-height: 1.5em; margin: 14px 0 0; color: #ffe59a; font-weight: 600; text-align: center; }

.dig-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px;
    border: 1px dashed var(--line);
    border-radius: 12px;
}

.dig-tools__label { color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.dig-tools .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* Vault                                                               */
/* ------------------------------------------------------------------ */

.filters { display: grid; gap: 8px; margin: 0 0 24px; }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filters__label { min-width: 70px; color: #b98a3a; font-family: 'Cinzel', Georgia, serif; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

/* Filter tags, as in the plugin: a gold edge (the tag's background) and an inset fill, both cut with pointed ends. */
.chip {
    --chip: #e8c26b;
    --edge: rgba(232, 194, 107, 0.26);
    --fill: linear-gradient(180deg, #161d2d, #0c111b);
    --cut: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 18px;
    border: 0;
    background: var(--edge);
    clip-path: var(--cut);
    color: var(--ink-2);
    font: inherit;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.chip::after { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--fill); clip-path: var(--cut); }
.chip--faction::before { content: ""; width: 8px; height: 8px; background: var(--chip); transform: rotate(45deg); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.chip:hover { --edge: color-mix(in srgb, var(--chip) 60%, transparent); color: var(--ink); }
.chip[aria-pressed="true"] { --edge: var(--chip); --fill: linear-gradient(180deg, color-mix(in srgb, var(--chip) 38%, #0c111b), color-mix(in srgb, var(--chip) 14%, #0c111b)); color: #fff8e6; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.chip:focus-visible { outline: 0; --edge: #fff; }

.vset { margin: 0 0 40px; }
.vset__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0 0 6px; }
.vset__head h2 { margin: 0; font-family: 'Cinzel', Georgia, serif; color: #f3e6c4; font-size: 22px; letter-spacing: 0.04em; }
.vset__desc { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; }
.vset__progress { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--ink-2); font-size: 13px; }
.vset__bar { width: min(220px, 50vw); height: 6px; border-radius: 999px; background: #1a2236; overflow: hidden; }
.vset__bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fb6ff, #7ff0c8); }

.vgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 26px 18px;
}

.vslot { display: grid; justify-items: center; gap: 8px; min-width: 0; text-align: center; }
.vslot .rlc-card { --card-w: 100%; max-width: 210px; }
.vslot__label { color: var(--ink-2); font-size: 13px; }
.vslot__label b { color: var(--glow, var(--ink)); }

.vslot__empty {
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 210px;
    aspect-ratio: 63 / 88;
    border: 1px dashed color-mix(in srgb, var(--slot-faction, #2f3a55) 70%, transparent);
    border-radius: 4.5% / 3.2%;
    background: repeating-radial-gradient(circle at 50% 50%, rgba(143, 182, 255, 0.05) 0 2px, transparent 2px 14px);
    color: var(--ink-3);
    font-size: 20px;
    font-weight: 800;
}

.vnone { padding: 40px 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--ink-2); text-align: center; }
.vnone strong { display: block; margin-bottom: 12px; color: var(--ink); }

@media (max-width: 720px) {
    .faction { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .faction__body { width: 100%; }
    .guide { grid-template-columns: minmax(0, 1fr); }
    .guide__card { position: relative; top: 0; max-width: 300px; }
    .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
}


/*
 * Relics pack opening. Builds on site.css (page base) and relics-cards.css (cards).
 *
 * Stages are driven by body[data-stage]: shop → pack → reveal → done.
 * The pack uses the same spring variables as cards (--rx, --ry, --px, --py,
 * --a) via Relics.attach(), plus --tear (0..1) while it is being torn.
 */

body {
    overflow-x: hidden;
}

/* ------------------------------------------------------------------ */
/* Top bar and generic buttons                                        */
/* ------------------------------------------------------------------ */

/* Paints the phone's status-bar band so nothing scrolls under it. */
body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 31;
    height: env(safe-area-inset-top, 0px);
    background: #07090d;
}

.topbar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding-block: 12px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    background: rgba(7, 9, 13, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.topbar__brand {
    color: #f3e6c4;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.topbar__brand small {
    margin-left: 4px;
    color: #b98a3a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* The same framed plaques as the member page's tabs (plugin 1.0.0-beta.10). */
.topbar__views {
    display: inline-flex;
    gap: 5px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 6px 2px;
}

.topbar__view {
    position: relative;
    flex: none;
    white-space: nowrap;
    padding: 7px 14px;
    border: 1px solid rgba(232, 194, 107, 0.18);
    border-radius: 6px;
    background: linear-gradient(180deg, #161d2e, #0c111b);
    color: var(--ink-3);
    font: inherit;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.topbar__view:hover { border-color: rgba(232, 194, 107, 0.45); color: var(--ink); }

.topbar__view[aria-selected="true"] {
    border-color: rgba(232, 194, 107, 0.8);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(232, 194, 107, 0.22), transparent 70%),
        linear-gradient(180deg, #1d2234, #0a0d15);
    color: #ffe9b8;
    box-shadow: inset 0 2px 0 #e8c26b, 0 0 14px -4px rgba(232, 194, 107, 0.55);
}

.topbar__view:focus-visible,
.topbar__btn:focus-visible,
.btn:focus-visible {
    outline: 2px solid #e8c26b;
    outline-offset: 2px;
}

/* One view at a time (views: pack, rarities, factions, guide, vault). */
body:not([data-view="pack"]) [data-view-panel="pack"],
body:not([data-view="rarities"]) [data-view-panel="rarities"],
body:not([data-view="factions"]) [data-view-panel="factions"],
body:not([data-view="guide"]) [data-view-panel="guide"],
body:not([data-view="dig"]) [data-view-panel="dig"],
body:not([data-view="vault"]) [data-view-panel="vault"] {
    display: none;
}

.topbar__btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border: 1px solid rgba(232, 194, 107, 0.38);
    border-radius: 6px;
    background: linear-gradient(180deg, #1b2235, #0e131e);
    color: #efe3c6;
    font: inherit;
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px rgba(0, 0, 0, 0.35);
}

.topbar__btn:hover,
.btn:hover { border-color: #e8c26b; color: #fff3d1; }

.btn--primary {
    border-color: #f5d68a;
    background: linear-gradient(180deg, #f8dd92 0%, #dba845 50%, #ad7620 100%);
    color: #2a1a05;
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 0 rgba(90, 50, 5, 0.35), 0 3px 12px rgba(217, 164, 65, 0.3);
}

.btn--primary:hover { filter: brightness(1.08); color: #2a1a05; }

.stage {
    position: relative;
    min-height: calc(100vh - 60px);
}

/* ------------------------------------------------------------------ */
/* Stage visibility                                                   */
/* ------------------------------------------------------------------ */

.shop,
.opening {
    transition: opacity 0.45s ease, transform 0.45s ease;
}

body:not([data-stage="shop"]) .shop {
    position: absolute;
    inset: 0 0 auto;
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
}

body[data-stage="shop"] .opening {
    display: none;
}

.opening {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px 120px;
}

.opening__pack,
.opening__hint,
.opening__tear-btn {
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.opening__hint {
    margin: 26px 0 10px;
    color: var(--ink-2);
    text-align: center;
}

.opening__tear-btn {
    padding: 8px 16px;
    border: 1px solid #3a4560;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    cursor: pointer;
}

body[data-stage="reveal"] .opening__pack,
body[data-stage="done"] .opening__pack {
    display: none;
}

body[data-stage="reveal"] .opening__hint,
body[data-stage="reveal"] .opening__tear-btn,
body[data-stage="done"] .opening__hint,
body[data-stage="done"] .opening__tear-btn {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Shop                                                               */
/* ------------------------------------------------------------------ */

.shop__packs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 24px 24px 96px;
}

.pack-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.pack-choice .pack {
    --pack-w: 190px;
}

.pack-choice:focus-visible .pack__body {
    outline: 3px solid var(--pack-hi);
    outline-offset: 6px;
}

.pack-choice__name { font-size: 17px; font-weight: 650; }
.pack-choice__meta { color: var(--ink-2); font-size: 14px; text-align: center; line-height: 1.5; }

/* ------------------------------------------------------------------ */
/* Reveal                                                             */
/* ------------------------------------------------------------------ */

.reveal-row {
    --card-w: min(250px, 27vw);
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 44px 36px;
    margin-top: 20px;
}

.reveal-row[data-count="1"] { --card-w: min(300px, 70vw); }

body[data-stage="reveal"] .reveal-row,
body[data-stage="done"] .reveal-row {
    display: flex;
}

.reveal-hint {
    display: none;
    margin: 34px 0 0;
    color: var(--ink-2);
}

body[data-stage="reveal"] .reveal-hint { display: block; }

.reveal-slot {
    --glow: #cfd8e6;
    --glow-size: 0.6;
    --glow-speed: 2.4s;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: slot-in 0.75s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
    animation-delay: calc(var(--i) * 0.14s);
}

@keyframes slot-in {
    from { opacity: 0; transform: translateY(120px) scale(0.6) rotate(calc(var(--i) * 6deg - 6deg)); }
    to { opacity: 1; transform: none; }
}

/* Anticipation glow behind face-down cards; rarer tiers glow bigger. */
.reveal-slot__halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--card-w) * (1.25 + var(--glow-size)));
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow) 0%, color-mix(in srgb, var(--glow) 35%, transparent) 30%, transparent 68%);
    /* translate (not transform) so the spin/pulse can't rotate the offset */
    translate: -50% -58%;
    opacity: 0.35;
    filter: blur(6px);
    pointer-events: none;
    animation: halo-pulse var(--glow-speed) ease-in-out infinite;
}

@keyframes halo-pulse {
    50% { opacity: 0.75; scale: 1.08; }
}

/* Light rays for Epic and Legendary. */
.reveal-slot__rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--card-w) * 2.4);
    aspect-ratio: 1;
    display: none;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--glow) 55%, transparent) 0deg 6deg, transparent 6deg 22deg);
    -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%);
    mask: radial-gradient(circle, #000 18%, transparent 62%);
    /* translate (not transform) so the spin/pulse can't rotate the offset */
    translate: -50% -58%;
    opacity: 0;
    pointer-events: none;
    animation: rays-spin 14s linear infinite;
    transition: opacity 0.6s ease;
}

.reveal-slot[data-tier="3"] .reveal-slot__rays,
.reveal-slot[data-tier="4"] .reveal-slot__rays { display: block; opacity: 0.35; }

@keyframes rays-spin {
    to { rotate: 360deg; }
}

.reveal-slot[data-tier="0"] { --glow-size: 0;   --glow-speed: 3s; }
.reveal-slot[data-tier="1"] { --glow-size: 0.2; --glow-speed: 2.6s; }
.reveal-slot[data-tier="2"] { --glow-size: 0.4; --glow-speed: 2.1s; }
.reveal-slot[data-tier="3"] { --glow-size: 0.6; --glow-speed: 1.6s; }
.reveal-slot[data-tier="4"] { --glow-size: 0.85; --glow-speed: 1.1s; }

/* Face-down cards lift toward you on hover. */
.reveal-slot:not(.is-revealed) .rlc-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.reveal-slot:not(.is-revealed):hover .rlc-card {
    transform: translateY(-10px) scale(1.03);
}

.reveal-slot:not(.is-revealed):hover .reveal-slot__halo {
    opacity: 0.95;
}

/* The back of a face-down card picks up its rarity colour. */
.reveal-slot .rlc-card__back {
    box-shadow:
        0 0 0 0.6cqw var(--glow),
        0 0 calc(4px + var(--glow-size) * 30px) color-mix(in srgb, var(--glow) 70%, transparent);
}

/* After the flip, the glow settles to a soft rim. */
.reveal-slot.is-revealed .reveal-slot__halo {
    animation: halo-burst 1s ease-out forwards;
}

@keyframes halo-burst {
    0% { opacity: 1; scale: 0.9; }
    35% { opacity: 1; scale: 1.25; }
    100% { opacity: 0.32; scale: 1; }
}

.reveal-slot.is-revealed .reveal-slot__rays { opacity: 0.55; }

.reveal-slot__label {
    min-height: 44px;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;
}

.reveal-slot.is-revealed .reveal-slot__label {
    opacity: 1;
    transform: none;
}

.reveal-slot__rarity {
    display: block;
    color: var(--glow);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-shadow: 0 0 12px color-mix(in srgb, var(--glow) 60%, transparent);
}

.reveal-slot__finish { color: var(--ink-2); font-size: 14px; }

/* ------------------------------------------------------------------ */
/* Summary                                                            */
/* ------------------------------------------------------------------ */

.summary {
    display: none;
    margin-top: 40px;
    text-align: center;
    animation: slot-in 0.6s ease both;
    --i: 0;
}

body[data-stage="done"] .summary { display: block; }

.summary h2 { margin: 0 0 12px; font-family: 'Cinzel', Georgia, serif; color: #f3e6c4; font-size: 23px; letter-spacing: 0.05em; }

.summary__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
}

.summary__list li {
    padding: 5px 12px;
    border: 1px solid color-mix(in srgb, var(--glow) 55%, transparent);
    border-radius: 999px;
    color: var(--glow);
    font-size: 14px;
    font-weight: 600;
}

.summary__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.summary__tip { margin: 16px 0 0; color: var(--ink-2); font-size: 14px; }

/* ------------------------------------------------------------------ */
/* Effects                                                            */
/* ------------------------------------------------------------------ */

.fx {
    position: fixed;
    inset: 0;
    z-index: 45;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.flash {
    position: fixed;
    inset: 0;
    z-index: 44;
    background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), var(--flash, #fff) 0%, transparent 60%);
    opacity: 0;
    pointer-events: none;
}

.flash.is-on {
    animation: flash 0.9s ease-out;
}

@keyframes flash {
    0% { opacity: 0; }
    12% { opacity: 0.55; }
    100% { opacity: 0; }
}

.stage.is-shaking {
    animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes shake {
    15% { translate: -6px 2px; }
    30% { translate: 5px -3px; }
    45% { translate: -4px 1px; }
    60% { translate: 3px -1px; }
    80% { translate: -1px 0; }
}

/* ------------------------------------------------------------------ */
/* Odds dialog and demo bar                                           */
/* ------------------------------------------------------------------ */

.odds {
    max-width: 560px;
    width: calc(100vw - 32px);
    padding: 24px;
    border: 1px solid #2c3550;
    border-radius: 14px;
    background: #0f1420;
    color: var(--ink);
}

.odds::backdrop { background: rgba(0, 0, 0, 0.6); }
.odds h2 { margin: 0 0 14px; font-size: 20px; }
.odds h3 { margin: 18px 0 6px; font-size: 15px; }

.odds table { width: 100%; border-collapse: collapse; font-size: 14px; }
.odds th, .odds td { padding: 6px 4px; border-bottom: 1px solid #222a3d; text-align: left; }
.odds td:last-child, .odds th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.odds__note { margin: 16px 0; color: var(--ink-2); font-size: 13px; }

.devbar {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: calc(100vw - 24px);
    padding: 8px 14px;
    border: 1px solid #2c3550;
    border-radius: 999px;
    background: rgba(15, 20, 32, 0.92);
    color: var(--ink-2);
    font-size: 13px;
    transform: translateX(-50%);
}

.devbar select {
    padding: 4px 8px;
    border: 1px solid #3a4560;
    border-radius: 6px;
    background: #141a27;
    color: var(--ink);
    font: inherit;
}

@media (max-width: 620px) {
    .topbar__views { order: 3; width: 100%; justify-content: flex-start; }
    .topbar__view { flex: none; }
    .reveal-row { --card-w: 42vw; gap: 36px 16px; }
    .reveal-row[data-count="1"] { --card-w: 70vw; }
    .shop__packs { gap: 28px; }
    .pack-choice .pack { --pack-w: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    .pack-choice .pack__rotator,
    .reveal-slot,
    .reveal-slot__halo,
    .reveal-slot__rays,
    .stage.is-shaking { animation: none; }
}


/* ------------------------------------------------------------------ */
/* Inside the plugin: the page sits in .rlc-app so the plugin's pack   */
/* and Daily Dig styles apply. Undo the member app's panel look.       */
/* ------------------------------------------------------------------ */

.rlc-app.rlc-preview {
    min-height: 100vh;
    margin: 0;
    padding-bottom: 0;
    border-radius: 0;
    background: transparent;
    font-size: inherit;
    line-height: inherit;
}

.rlc-preview .faction__none {
    display: grid;
    place-items: center;
    width: 220px;
    max-width: 100%;
    aspect-ratio: 63 / 88;
    border: 1px dashed var(--line, #2c3550);
    border-radius: 10px;
    color: var(--ink-3, #7d8aa0);
    font-size: 13px;
    text-align: center;
}