/*
 * Relics member app: album, packs (claim, stacks, opening, reveal) and the
 * public album. Builds on rlc-cards.css.
 *
 * Everything is scoped to .rlc-app, which paints its own dark HUD panel so it
 * looks the same inside any WordPress theme. The view is driven by
 * .rlc-app[data-tab] (album | packs) and the pack flow by .rlc-app[data-stage]
 * (shop → pack → reveal → done).
 */

.rlc-app {
    --ink: #e9edf5;
    --ink-2: #a8b3c4;
    --ink-3: #7d8aa0;
    --line: #2c3550;
    --surface: #0f1420;
    --surface-2: #141a27;
    --accent: #8fb6ff;
    --accent-ink: #0b1020;
    --good: #4fe3a1;
    --bad: #ff7a85;
    --gold: #e8c26b;
    --gold-2: #b98a3a;
    --parchment: #f3e6c4;
    --display: 'Cinzel', 'Cormorant SC', 'Trajan Pro', Georgia, 'Times New Roman', serif;

    position: relative;
    isolation: isolate;
    margin: 0 auto;
    padding-bottom: 32px;
    border-radius: 16px;
    background:
        radial-gradient(1200px 700px at 50% -10%, #1b2440 0%, transparent 60%),
        radial-gradient(900px 600px at 100% 110%, #2a1630 0%, transparent 55%),
        #07090d;
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color-scheme: dark;
    text-align: left;
}

.rlc-app *,
.rlc-app *::before,
.rlc-app *::after {
    box-sizing: border-box;
}

/* Neutralise common theme rules for the elements the app uses. */
.rlc-app button {
    margin: 0;
    width: auto;
    min-height: 0;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3;
}

.rlc-app h2,
.rlc-app h3 {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.rlc-app ul { margin: 0; padding: 0; }
.rlc-app p { margin: 0; }

.rlc-app--static { padding: 24px max(16px, 3vw); }

.rlc-notice {
    margin: 0 0 14px;
    color: var(--ink-2);
}

/* ------------------------------------------------------------------ */
/* Banner, tabs, buttons                                              */
/* ------------------------------------------------------------------ */
/* A game-hub header (as in Hearthstone's collection or Marvel Snap):  */
/* the collector's crest and name, stat plaques, then framed tabs     */
/* with an icon and a label. Titles, tabs and buttons use Cinzel.     */

.rlc-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand odds" "stats stats";
    align-items: center;
    gap: 14px 16px;
    padding: 18px max(16px, 3vw) 16px;
    border-radius: 16px 16px 0 0;
    background:
        linear-gradient(90deg, transparent, rgba(232, 194, 107, 0.07) 50%, transparent),
        linear-gradient(180deg, rgba(232, 194, 107, 0.06), transparent 85%);
}

.rlc-bar__brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.rlc-app .rlc-bar__odds { grid-area: odds; }

.rlc-crest {
    position: relative;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background:
        url('../img/emblem.svg') center / 108% auto no-repeat,
        radial-gradient(circle at 50% 35%, #1f2a46, #090c14 72%);
    box-shadow:
        0 0 0 2px #07090d,
        0 0 0 3.5px var(--gold),
        0 0 0 5px rgba(90, 58, 12, 0.9),
        0 0 22px rgba(232, 194, 107, 0.32);
}

.rlc-bar__who {
    display: grid;
    min-width: 0;
}

.rlc-bar__eyebrow {
    color: var(--gold-2);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.rlc-bar__name {
    overflow: hidden;
    color: var(--parchment);
    font-family: var(--display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Stat plaques: a gold edge with clipped corners, number over label. */
.rlc-app .rlc-stats {
    grid-area: stats;
    display: flex;
    gap: 8px;
    margin: 0;
}

.rlc-stat {
    --edge: rgba(232, 194, 107, 0.34);
    --cut: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px 7px;
    background: var(--edge);
    clip-path: var(--cut);
}

.rlc-stat::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: linear-gradient(180deg, #182035, #0b0f19);
    clip-path: var(--cut);
}

.rlc-app .rlc-stat dt {
    margin: 0;
    color: var(--ink-3);
    font-family: var(--display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.rlc-app .rlc-stat dd {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: var(--parchment);
    font-family: var(--display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rlc-stat--shards dd::before,
.rlc-stat--streak dd::before {
    content: "";
    width: 18px;
    height: 18px;
    background: url('../img/shards.svg') center / contain no-repeat;
}

.rlc-stat--streak dd::before {
    content: "🔥";
    width: auto;
    height: auto;
    background: none;
    font-size: 14px;
}

.rlc-stat--streak { --edge: rgba(255, 140, 70, 0.45); }

/* Tabs: framed plaques sitting on a gold rule; the open one lights up. */
.rlc-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 0 max(16px, 3vw);
    border-bottom: 1px solid rgba(232, 194, 107, 0.4);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.rlc-app .rlc-tab {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: -1px;
    padding: 11px 10px 12px;
    border: 1px solid rgba(232, 194, 107, 0.16);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, #161d2e, #0c111b);
    color: var(--ink-3);
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.rlc-tab__icon {
    flex: none;
    width: 20px;
    height: 20px;
}

.rlc-app .rlc-tab:hover {
    border-color: rgba(232, 194, 107, 0.4);
    color: var(--ink);
}

.rlc-app .rlc-tab[aria-selected="true"] {
    border-color: rgba(232, 194, 107, 0.75);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(232, 194, 107, 0.2), transparent 70%),
        linear-gradient(180deg, #1d2234, #0a0d15);
    color: #ffe9b8;
    box-shadow: inset 0 2px 0 var(--gold), 0 -8px 20px -10px rgba(232, 194, 107, 0.6);
    text-shadow: 0 0 12px rgba(232, 194, 107, 0.45);
}

/* A small gem on top of the open tab. */
.rlc-app .rlc-tab[aria-selected="true"]::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 9px;
    height: 9px;
    border: 1px solid #5a3a0c;
    background: linear-gradient(135deg, #fff1c4, var(--gold) 50%, #9a6a1c);
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 0 0 8px rgba(232, 194, 107, 0.8);
}

.rlc-app .rlc-tab[aria-selected="true"] .rlc-tab__icon {
    color: var(--gold);
    filter: drop-shadow(0 0 5px rgba(232, 194, 107, 0.7));
}

/* Count: a red notification gem in the tab's corner. */
.rlc-tab__count {
    position: absolute;
    top: -7px;
    right: 8px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 11px;
    background: radial-gradient(circle at 50% 30%, #ff8a73, #d42c1f 55%, #7a1009);
    box-shadow: 0 0 0 1.5px var(--gold), 0 2px 6px rgba(0, 0, 0, 0.6);
    color: #fff;
    font-family: var(--display);
    font-size: 11px;
    font-weight: 900;
    line-height: 21px;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

.rlc-app .rlc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    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: var(--display);
    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);
}

.rlc-app .rlc-btn:hover { border-color: var(--gold); color: #fff3d1; }

.rlc-app .rlc-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);
}

.rlc-app .rlc-btn--primary:hover { filter: brightness(1.08); color: #2a1a05; }
.rlc-app .rlc-btn--ghost { background: rgba(10, 13, 21, 0.6); }

.rlc-app .rlc-btn[disabled] {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink-3);
    text-shadow: none;
    box-shadow: none;
    cursor: default;
    filter: none;
}

.rlc-app button:focus-visible,
.rlc-app a:focus-visible,
.rlc-switch input:focus-visible + .rlc-switch__track {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.rlc-toast {
    margin: 14px max(16px, 3vw) 0;
    padding: 10px 14px;
    border: 1px solid color-mix(in srgb, var(--bad) 50%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--bad) 12%, transparent);
    color: #ffd9dc;
}

.rlc-toast.is-good {
    border-color: color-mix(in srgb, var(--good) 50%, transparent);
    background: color-mix(in srgb, var(--good) 10%, transparent);
    color: #d6ffeb;
}

/* Section heading: Cinzel in gold between two hairlines with a gem. */
.rlc-app .rlc-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 30px 0 6px;
    color: var(--parchment);
    font-family: var(--display);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
}

.rlc-app .rlc-heading::before,
.rlc-app .rlc-heading::after {
    content: "";
    flex: 0 1 140px;
    height: 7px;
    background:
        linear-gradient(135deg, var(--gold) 50%, transparent 50%) right center / 7px 7px no-repeat,
        linear-gradient(90deg, transparent, rgba(232, 194, 107, 0.75)) left center / calc(100% - 10px) 1px no-repeat;
}

.rlc-app .rlc-heading::after { transform: scaleX(-1); }

/* One tab at a time. */
.rlc-app [data-panel] { display: none; }
.rlc-app[data-tab="album"] [data-panel="album"],
.rlc-app[data-tab="packs"] [data-panel="packs"],
.rlc-app[data-tab="trades"] [data-panel="trades"],
.rlc-app[data-tab="activity"] [data-panel="activity"] {
    display: block;
}

.rlc-app[data-tab="album"] .rlc-album[data-panel="album"] { display: grid; }

/* ------------------------------------------------------------------ */
/* Album                                                              */
/* ------------------------------------------------------------------ */

.rlc-album {
    display: grid;
    gap: 36px;
    padding: 24px max(16px, 3vw) 8px;
}

.rlc-empty {
    max-width: 520px;
    margin: 24px auto;
    color: var(--ink-2);
    text-align: center;
}

.rlc-empty strong { display: block; margin-bottom: 6px; color: var(--parchment); font-family: var(--display); font-size: 19px; }
.rlc-empty .rlc-btn { margin-top: 14px; }

.rlc-public-note {
    padding: 10px 14px;
    border: 1px dashed var(--line);
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 14px;
}

.rlc-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: var(--ink-2);
    font-size: 14px;
}

.rlc-share code {
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
}

.rlc-set__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-bottom: 18px;
}

.rlc-set__title { min-width: 0; }

.rlc-app .rlc-set__title h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--parchment);
    font-family: var(--display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-wrap: balance;
}

.rlc-set__kind,
.rlc-badge {
    padding: 2px 9px;
    border: 1px solid var(--line);
    border-radius: 3px;
    color: var(--ink-2);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rlc-badge--complete { border-color: #3ff0d8; color: #3ff0d8; }
.rlc-badge--master { border-color: #ffb547; color: #ffb547; }

.rlc-set__desc { margin-top: 4px; color: var(--ink-2); font-size: 14px; max-width: 65ch; }

.rlc-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    color: var(--ink-2);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.rlc-progress__bar {
    width: min(220px, 40vw);
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-2);
}

.rlc-progress__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5aa8ff, #3ff0d8);
}

/* Public switch */
.rlc-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink-2);
    font-size: 14px;
    cursor: pointer;
}

.rlc-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.rlc-switch__track {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    border: 1px solid #3a4560;
    border-radius: 999px;
    background: var(--surface-2);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.rlc-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink-3);
    transition: transform 0.2s ease, background 0.2s ease;
}

.rlc-switch input:checked + .rlc-switch__track {
    border-color: var(--good);
    background: color-mix(in srgb, var(--good) 25%, transparent);
}

.rlc-switch input:checked + .rlc-switch__track::after {
    transform: translateX(18px);
    background: var(--good);
}

.rlc-switch input:disabled + .rlc-switch__track { opacity: 0.5; }

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

.rlc-slot {
    position: relative;
    min-width: 0;
}

.rlc-grid .rlc-card { --card-w: 100%; }

.rlc-slot__count {
    position: absolute;
    top: -8px;
    right: -6px;
    z-index: 2;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 800;
    pointer-events: none;
}

.rlc-slot__label {
    margin-top: 8px;
    color: var(--ink-2);
    font-size: 13px;
    text-align: center;
    overflow-wrap: anywhere;
}

.rlc-slot__label b { color: var(--glow, var(--ink)); font-weight: 700; }

.rlc-slot--empty .rlc-slot__shape {
    display: grid;
    place-items: center;
    aspect-ratio: 63 / 88;
    border: 1px dashed #2f3a55;
    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),
        rgba(15, 20, 32, 0.6);
    color: #48557a;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

/* Inspect caption: what you're looking at, shown over the backdrop. */
.rlc-caption {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    width: min(560px, calc(100vw - 32px));
    max-height: min(46vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(15, 20, 32, 0.94);
    color: var(--ink);
    font-size: 14px;
    transform: translateX(-50%);
}

.rlc-caption strong { display: block; font-size: 16px; }
.rlc-caption ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; list-style: none; }

.rlc-caption li {
    padding: 2px 10px;
    border: 1px solid color-mix(in srgb, var(--glow) 55%, transparent);
    border-radius: 999px;
    color: var(--glow);
    font-size: 13px;
    font-weight: 600;
}

.rlc-caption small { display: block; margin-top: 6px; color: var(--ink-2); }

/* ------------------------------------------------------------------ */
/* Packs tab: claim + stacks                                          */
/* ------------------------------------------------------------------ */

.rlc-packs { position: relative; }

.rlc-shop { padding: 24px max(16px, 3vw) 8px; }

.rlc-claim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(90, 168, 255, 0.10), rgba(178, 107, 255, 0.08));
}

.rlc-claim__text { min-width: 0; }
.rlc-claim__text strong { display: block; font-size: 17px; }
.rlc-claim__text span { color: var(--ink-2); font-size: 14px; }

.rlc-streak {
    display: flex;
    gap: 5px;
    margin-top: 8px;
}

.rlc-streak i {
    width: 14px;
    height: 14px;
    border: 1px solid #3a4560;
    border-radius: 4px;
    background: var(--surface-2);
}

.rlc-streak i.is-done { border-color: #3ff0d8; background: #3ff0d8; }
.rlc-streak i.is-bonus { border-color: #c49bff; }
.rlc-streak i.is-bonus.is-done { background: #c49bff; }

.rlc-shop__packs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px;
    padding: 20px 0 24px;
}

.rlc-shop__none {
    margin: 8px auto 0;
    color: var(--ink-2);
    text-align: center;
}

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

.rlc-app .pack-choice[disabled] { cursor: progress; opacity: 0.7; }
.rlc-app .pack-choice .pack { --pack-w: 170px; }

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

.pack-choice__count {
    position: absolute;
    top: -10px;
    right: -12px;
    z-index: 3;
    padding: 2px 10px;
    border-radius: 999px;
    background: #ffb547;
    color: #1a1005;
    font-size: 14px;
    font-weight: 800;
}

.pack-choice__name { color: var(--parchment); font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: 0.04em; }
.pack-choice__meta { color: var(--ink-2); font-size: 13px; text-align: center; line-height: 1.5; }

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

.rlc-app:not([data-stage="shop"]) .rlc-shop { display: none; }
.rlc-app[data-stage="shop"] .rlc-opening { display: none; }

.rlc-opening {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px max(16px, 3vw) 40px;
}

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

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

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

/* ------------------------------------------------------------------ */
/* The pack                                                           */
/*                                                                    */
/* A foil wrapper in its tier's metal (Daily silver, Basic blue,      */
/* Premium purple, Elite gold): light rays behind the YubNub Relics   */
/* logo, a forest silhouette, the tier name in Cinzel, crimped seals. */
/* ------------------------------------------------------------------ */

.rlc-app .pack {
    --rx: 0deg;
    --ry: 0deg;
    --px: 50%;
    --py: 50%;
    --dx: 0;
    --dy: 0;
    --a: 0;
    --sx: 0px;
    --sy: 18px;
    --tear: 0;
    --pack-w: min(300px, 70vw);

    /* Basic (blue) */
    --pack-1: #5bb6ff;
    --pack-2: #1752c9;
    --pack-3: #06194f;
    --pack-hi: #9fd8ff;
    --pack-label: linear-gradient(180deg, #ffffff 15%, #d9ecff 55%, #8fb8e8);

    position: relative;
    width: var(--pack-w);
    aspect-ratio: 0.64;
    perspective: 1000px;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.rlc-app .pack[data-tier="daily"] {
    --pack-1: #e9f1fb;
    --pack-2: #7d90ab;
    --pack-3: #1c2638;
    --pack-hi: #eef6ff;
    --pack-label: linear-gradient(180deg, #ffffff 15%, #e3e9f2 55%, #9aa8bd);
}

.rlc-app .pack[data-tier="premium"] {
    --pack-1: #d394ff;
    --pack-2: #6a24c4;
    --pack-3: #1d0840;
    --pack-hi: #e7c4ff;
    --pack-label: linear-gradient(180deg, #fff6cf 10%, #ffd25c 50%, #d08a1c);
}

.rlc-app .pack[data-tier="elite"] {
    --pack-1: #ffe38f;
    --pack-2: #c98a1c;
    --pack-3: #4a2a05;
    --pack-hi: #fff2bf;
    --pack-label: linear-gradient(180deg, #ffffff 10%, #fff1c4 50%, #f2c766);
}

.pack__rotator {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateY(var(--ry)) rotateX(var(--rx));
}

.pack__body,
.pack__top {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
    container-type: inline-size;
    background:
        /* light rays from behind the logo */
        repeating-conic-gradient(from 0deg at 50% 40%, rgba(255, 255, 255, 0.10) 0 3deg, transparent 3deg 12deg),
        /* faint cracked-foil facets */
        linear-gradient(118deg, transparent 46%, rgba(255, 255, 255, 0.10) 47%, transparent 48%),
        linear-gradient(62deg, transparent 58%, rgba(255, 255, 255, 0.08) 59%, transparent 60%),
        radial-gradient(120% 75% at 50% 40%, var(--pack-1) 0%, var(--pack-2) 42%, var(--pack-3) 100%);
}

/* Foil wrapper sheen: a broad prismatic band that slides with the light. */
.pack__foil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg,
            transparent 20%,
            hsla(320, 100%, 75%, 0.45) 34%,
            hsla(55, 100%, 70%, 0.45) 42%,
            hsla(160, 100%, 65%, 0.45) 50%,
            hsla(220, 100%, 72%, 0.45) 58%,
            transparent 72%);
    background-size: 250% 250%;
    background-position: calc(50% + var(--dx) * 60%) calc(50% + var(--dy) * 60%);
    mix-blend-mode: color-dodge;
    opacity: calc(0.2 + var(--a) * 0.55);
}

/* Crimped, saw-toothed seals at the top and bottom of the wrapper. */
.pack__top {
    top: 0;
    height: 11%;
    transform-origin: 100% 100%;
    transform: translateY(calc(var(--tear) * -4px)) rotate(calc(var(--tear) * -3deg));
    -webkit-mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 9px 6px repeat-x,
        linear-gradient(#000 0 0) 0 5px / 100% calc(100% - 5px) no-repeat;
    mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 9px 6px repeat-x,
        linear-gradient(#000 0 0) 0 5px / 100% calc(100% - 5px) no-repeat;
    transition: transform 0.2s ease;
}

.pack__top::after,
.pack__body::after {
    /* Heat-sealed ridges */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, rgba(0, 0, 0, 0.22) 1px 3px);
}

.pack__top::after { top: 6px; bottom: 18%; }

.pack__body {
    top: 11%;
    bottom: 0;
    box-shadow: var(--sx) var(--sy) 40px -8px rgba(0, 0, 0, 0.7);
    -webkit-mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 9px 6px repeat-x,
        linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 5px) no-repeat;
    mask:
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 9px 6px repeat-x,
        linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 5px) no-repeat;
}

.pack__body::after { bottom: 6px; height: 6%; }

/* Inner gold-edged frame. */
.pack__body::before {
    content: '';
    position: absolute;
    inset: 4% 5% 9%;
    border: 0.8cqw solid rgba(240, 190, 90, 0.85);
    border-radius: 2cqw;
    box-shadow: inset 0 0 0 0.4cqw rgba(30, 16, 2, 0.6), 0 0 0 0.4cqw rgba(30, 16, 2, 0.5), inset 0 0 8cqw rgba(0, 0, 0, 0.35);
}

/* Perforation the member tears along. */
.pack__perf {
    position: absolute;
    top: 11%;
    left: 4%;
    right: 4%;
    height: 0;
    border-top: 2px dashed rgba(255, 255, 255, 0.35);
    transform: translateZ(1px);
}

.pack__tear-glow {
    position: absolute;
    top: calc(11% - 2px);
    left: 0;
    width: calc(var(--tear) * 100%);
    height: 4px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 10px 2px var(--pack-hi), 0 0 28px 6px var(--pack-hi);
    opacity: min(1, calc(var(--tear) * 6));
    transform: translateZ(2px);
}

/* Crinkled foil: a grey relief texture blended into the metal. */
.pack__crinkle {
    position: absolute;
    inset: 0;
    background: url('../img/foil.svg') center / 100% 100% no-repeat;
    mix-blend-mode: soft-light;
    opacity: 0.55;
    pointer-events: none;
}

/* Glow behind the logo, and a scatter of sparkles. */
.pack__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.75) 0 2%, color-mix(in srgb, var(--pack-hi) 70%, transparent) 14%, transparent 46%),
        linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.35) 50%, transparent 53%),
        radial-gradient(circle at 18% 22%, #fff 0 0.5%, transparent 1.2%),
        radial-gradient(circle at 84% 16%, #fff 0 0.4%, transparent 1%),
        radial-gradient(circle at 78% 46%, #fff 0 0.5%, transparent 1.2%),
        radial-gradient(circle at 24% 52%, #fff 0 0.35%, transparent 0.9%),
        radial-gradient(circle at 62% 8%, #fff 0 0.35%, transparent 0.9%),
        radial-gradient(circle at 10% 70%, #fff 0 0.3%, transparent 0.8%),
        radial-gradient(circle at 90% 66%, #fff 0 0.4%, transparent 1%);
    mix-blend-mode: screen;
}

/* Pine silhouette along the bottom, in the tier's darkest tone. */
.pack__forest {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6%;
    height: 30%;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pack-3) 70%, transparent), var(--pack-3));
    -webkit-mask: url('../img/forest.svg') bottom / 100% 100% no-repeat;
    mask: url('../img/forest.svg') bottom / 100% 100% no-repeat;
    opacity: 0.9;
}

/* Mist glowing just above the trees. */
.pack__forest::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--pack-hi) 55%, transparent), transparent 40%);
}

.pack__set {
    position: absolute;
    top: 1.6%;
    left: 8%;
    right: 8%;
    overflow: hidden;
    color: var(--pack-hi);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 3.8cqw;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 0.4cqw 1cqw rgba(0, 0, 0, 0.7);
}

.pack__logo {
    position: absolute;
    top: 8%;
    left: 50%;
    --logo-w: 88cqw;
    transform: translateX(-50%);
    filter: drop-shadow(0 1.5cqw 3cqw rgba(0, 0, 0, 0.55));
}

.pack__tier {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 60%;
    display: grid;
    justify-items: center;
    gap: 1cqw;
    text-align: center;
}

.pack__tier-name {
    position: relative;
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 12.5cqw;
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: pre-line;
    color: transparent;
    -webkit-text-stroke: 2.4cqw #170b02;
    text-shadow: 0 1cqw 0 rgba(0, 0, 0, 0.55), 0 0 4cqw rgba(0, 0, 0, 0.45);
}

.pack__tier-name::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    -webkit-text-stroke: 0;
    text-shadow: none;
    background: var(--pack-label) 0 0 / 100% 0.98em repeat-y; /* the gradient repeats on each line */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pack__count {
    margin-top: 0.6cqw;
    padding: 0.8cqw 3.4cqw;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: var(--pack-hi);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 3.6cqw;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* Gem divider under the tier name. */
.pack__gem {
    position: absolute;
    left: 50%;
    bottom: 8.5%;
    width: 46%;
    height: 7cqw;
    transform: translateX(-50%);
    background:
        linear-gradient(135deg, #eafcff, #6fdcff 30%, #1c74de 70%, #0a2a80) center / 5cqw 7cqw no-repeat,
        linear-gradient(90deg, transparent, #ffd25c 30%, #fff2bf 50%, #ffd25c 70%, transparent) center / 100% 0.6cqw no-repeat;
    -webkit-mask:
        linear-gradient(#000 0 0) center / 100% 0.6cqw no-repeat,
        conic-gradient(from 45deg at 50% 50%, #000 0 0) center / 5cqw 7cqw no-repeat;
    clip-path: polygon(0 45%, 44.5% 45%, 50% 0, 55.5% 45%, 100% 45%, 100% 55%, 55.5% 55%, 50% 100%, 44.5% 55%, 0 55%);
    filter: drop-shadow(0 0 1.5cqw rgba(111, 220, 255, 0.7));
}

.pack__glare {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(farthest-corner circle at var(--px) var(--py), rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(0, 0, 0, 0.3) 90%);
    mix-blend-mode: overlay;
    opacity: calc(0.3 + var(--a) * 0.6);
}

/* Idle "pick me" bob on the Packs tab. */
.pack-choice .pack__rotator { animation: rlc-pack-bob 4s ease-in-out infinite; }
.pack-choice:nth-child(3n+2) .pack__rotator { animation-delay: -1.3s; }
.pack-choice:nth-child(3n+3) .pack__rotator { animation-delay: -2.6s; }

@keyframes rlc-pack-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

/* Opening stage: invite the tear. */
.rlc-opening__pack .pack {
    cursor: grab;
    animation: rlc-pack-enter 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.rlc-opening__pack .pack.is-tearing { cursor: grabbing; }

@keyframes rlc-pack-enter {
    from { opacity: 0; transform: translateY(40px) scale(0.85); }
    to { opacity: 1; transform: none; }
}

.rlc-opening__pack .pack:not(.is-torn) .pack__perf { animation: rlc-perf-pulse 1.6s ease-in-out infinite; }

@keyframes rlc-perf-pulse {
    50% { border-top-color: rgba(255, 255, 255, 0.75); }
}

/* Torn: the strip flies off, then the wrapper drops away. */
.pack.is-torn .pack__top {
    transition: transform 0.7s cubic-bezier(0.3, 0.6, 0.3, 1), opacity 0.7s ease;
    transform: translate(40%, -160%) rotate(22deg);
    opacity: 0;
}

.pack.is-torn .pack__tear-glow { width: 100%; opacity: 0; transition: opacity 0.6s ease 0.2s; }

.pack.is-emptied .pack__rotator {
    transition: transform 0.6s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.6s ease;
    transform: translateY(70%) rotateX(-20deg);
    opacity: 0;
}

/* A shake while the pack "fights back" just before it rips. */
.pack.is-straining .pack__rotator { animation: rlc-strain 0.35s linear; }

@keyframes rlc-strain {
    20% { translate: -2px 0; }
    40% { translate: 2px -1px; }
    60% { translate: -1px 1px; }
    80% { translate: 1px 0; }
}

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

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

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

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

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

.rlc-app[data-stage="reveal"] .rlc-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: rlc-slot-in 0.75s cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
    animation-delay: calc(var(--i) * 0.14s);
}

@keyframes rlc-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: rlc-halo-pulse var(--glow-speed) ease-in-out infinite;
}

@keyframes rlc-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: -50% -58%;
    opacity: 0;
    pointer-events: none;
    animation: rlc-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 rlc-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: rlc-halo-burst 1s ease-out forwards; }

@keyframes rlc-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                                                            */
/* ------------------------------------------------------------------ */

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

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

.rlc-summary h2 { margin: 0 0 12px; color: var(--parchment); font-family: var(--display); font-size: 23px; letter-spacing: 0.05em; }

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

.rlc-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;
}

.rlc-summary__list li small { color: var(--ink-2); font-weight: 500; }

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

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

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

.rlc-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;
}

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

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

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

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

/* ------------------------------------------------------------------ */
/* Odds (dialog and the [relics view="odds"] page)                  */
/* ------------------------------------------------------------------ */

.rlc-odds {
    max-width: 560px;
    width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    color: var(--ink);
}

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

.rlc-odds__table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 14px;
}

.rlc-odds__table caption { padding: 4px 0; color: var(--ink-2); font-size: 13px; text-align: left; }

.rlc-odds__table td {
    padding: 6px 4px;
    border: 0;
    border-bottom: 1px solid #222a3d;
    background: none;
    text-align: left;
}

.rlc-odds__table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rlc-app .rlc-odds__note { margin: 16px 0; color: var(--ink-2); font-size: 13px; }

/* ------------------------------------------------------------------ */
/* Shared bits for Trades and Activity                                */
/* ------------------------------------------------------------------ */

.rlc-app .rlc-subheading {
    margin: 0 0 12px;
    color: var(--gold);
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.rlc-app .rlc-muted { color: var(--ink-2); font-size: 14px; }

.rlc-trades,
.rlc-activity {
    padding: 24px max(16px, 3vw) 8px;
}

.rlc-trades > * + *,
.rlc-activity > * + * { margin-top: 26px; }

/* Event code box (Packs tab) */
.rlc-redeem {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    max-width: 760px;
    margin: 14px auto 0;
    color: var(--ink-2);
    font-size: 14px;
}

.rlc-app .rlc-redeem input,
.rlc-app .rlc-input {
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #3a4560;
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
}

.rlc-app .rlc-redeem input {
    width: 190px;
    max-width: 100%;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rlc-app .rlc-redeem input:focus,
.rlc-app .rlc-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ------------------------------------------------------------------ */
/* Trades tab                                                         */
/* ------------------------------------------------------------------ */

.rlc-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 20px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(63, 240, 216, 0.08), rgba(143, 182, 255, 0.06));
}

.rlc-social__info { display: grid; gap: 2px; min-width: 0; max-width: 60ch; }
.rlc-social__info strong { font-size: 16px; }
.rlc-social__info span { color: var(--ink-2); font-size: 14px; }
.rlc-social__discord { margin-top: 4px; }
.rlc-app .rlc-social__discord a { color: var(--accent); }
.rlc-social__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.rlc-trade-group { display: grid; gap: 12px; }

.rlc-trade {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(15, 20, 32, 0.7);
}

.rlc-trade--proposed,
.rlc-trade--accepted { border-color: #3a4f7a; }
.rlc-trade--completed { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }

.rlc-trade__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.rlc-trade__sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

.rlc-trade__side { min-width: 0; }

.rlc-app .rlc-trade__label {
    margin: 0 0 6px;
    color: var(--ink-3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rlc-item-list { display: flex; flex-wrap: wrap; gap: 6px; }

.rlc-app .rlc-trade__message {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-style: normal;
}

.rlc-trade__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.rlc-gift-list { display: grid; gap: 8px; list-style: none; }

.rlc-gift {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14px;
}

.rlc-gift--in { border-color: color-mix(in srgb, var(--good) 40%, var(--line)); }
.rlc-gift__note { display: block; margin-top: 2px; color: var(--ink); font-style: italic; }
.rlc-gift small { display: block; margin-top: 2px; }

/* An item chip: a card thumbnail or a pack, with its finish. */
.rlc-item {
    --glow: var(--ink-2);
    display: inline-grid;
    grid-template-columns: 36px minmax(0, auto);
    grid-template-rows: auto auto;
    column-gap: 8px;
    align-items: center;
    max-width: 100%;
    padding: 4px 10px 4px 4px;
    border: 1px solid color-mix(in srgb, var(--glow) 45%, transparent);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
    line-height: 1.25;
}

.rlc-app .rlc-item__thumb {
    grid-row: span 2;
    width: 36px;
    height: 36px;
    max-width: none;
    margin: 0;
    border-radius: 5px;
    object-fit: cover;
}

.rlc-item__name { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.rlc-item small { color: var(--glow); font-size: 12px; white-space: nowrap; }
.rlc-item--pack small { color: var(--ink-2); }

/* Mini pack: a small version of the real pack (tier metal, rays, emblem, crimped seals). */
.rlc-item__pack {
    --mp-1: #5bb6ff;
    --mp-2: #1752c9;
    --mp-3: #06194f;
    position: relative;
    display: inline-block;
    grid-row: span 2;
    width: 28px;
    height: 36px;
    margin-left: 4px;
    border-radius: 2px;
    background:
        url('../img/emblem.svg') 50% 34% / 74% auto no-repeat,
        repeating-conic-gradient(from 0deg at 50% 34%, rgba(255, 255, 255, 0.14) 0 4deg, transparent 4deg 14deg),
        radial-gradient(120% 75% at 50% 34%, var(--mp-1), var(--mp-2) 45%, var(--mp-3));
    box-shadow: inset 0 0 0 1px rgba(240, 190, 90, 0.75), inset 0 0 0 2px rgba(30, 16, 2, 0.45);
    -webkit-mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 4px 3px repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 4px 3px repeat-x,
        linear-gradient(#000 0 0) center / 100% calc(100% - 5px) no-repeat;
    mask:
        conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 4px 3px repeat-x,
        conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 4px 3px repeat-x,
        linear-gradient(#000 0 0) center / 100% calc(100% - 5px) no-repeat;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
}

.rlc-item__pack[data-tier="daily"] { --mp-1: #e9f1fb; --mp-2: #7d90ab; --mp-3: #1c2638; }
.rlc-item__pack[data-tier="premium"] { --mp-1: #d394ff; --mp-2: #6a24c4; --mp-3: #1d0840; }
.rlc-item__pack[data-tier="elite"] { --mp-1: #ffe38f; --mp-2: #c98a1c; --mp-3: #4a2a05; }

/* ------------------------------------------------------------------ */
/* Builder dialog                                                     */
/* ------------------------------------------------------------------ */

.rlc-builder {
    width: min(860px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #0b1018;
    color: var(--ink);
}

.rlc-builder::backdrop { background: rgba(3, 5, 9, 0.7); }

.rlc-builder__form {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 34px);
    margin: 0;
}

.rlc-builder__head,
.rlc-builder__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
}

.rlc-builder__head { justify-content: space-between; border-bottom: 1px solid var(--line); }
.rlc-app .rlc-builder__head h2 { font-size: 19px; }

.rlc-builder__body {
    display: grid;
    gap: 14px;
    padding: 16px 18px;
    overflow-y: auto;
}

.rlc-builder__foot {
    justify-content: flex-end;
    border-top: 1px solid var(--line);
    background: rgba(15, 20, 32, 0.9);
}

.rlc-builder__summary { margin-right: auto; color: var(--ink-2); font-size: 14px; }
.rlc-builder__sure { flex-basis: 100%; color: #ffd28a; font-weight: 600; text-align: right; }
.rlc-app .rlc-builder__hint { margin-top: -6px; font-size: 13px; }

.rlc-builder__who { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rlc-builder__who strong { font-size: 17px; }

.rlc-builder__label {
    display: grid;
    gap: 6px;
    width: 100%;
    color: var(--ink-2);
    font-size: 14px;
}

.rlc-member-results { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }

.rlc-app .rlc-member {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.rlc-app .rlc-member:hover { border-color: var(--accent); }
.rlc-app .rlc-member img { width: 28px; height: 28px; max-width: none; margin: 0; border-radius: 50%; }

.rlc-builder__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.rlc-pick {
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.rlc-pick legend { padding: 0 6px; color: var(--ink); font-weight: 700; }

.rlc-pick__list {
    display: grid;
    gap: 6px;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 4px;
}

.rlc-pick__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px;
    border-radius: 8px;
    cursor: pointer;
}

.rlc-pick__row:hover { background: var(--surface-2); }
.rlc-pick__row input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.rlc-pick__row .rlc-item { flex: 1; }

/* Send-or-trade shortcut under the inspect caption. */
.rlc-app .rlc-caption__send { margin-top: 10px; padding: 6px 14px; font-size: 14px; }

/* ------------------------------------------------------------------ */
/* Activity tab                                                       */
/* ------------------------------------------------------------------ */

.rlc-feed { display: grid; gap: 8px; list-style: none; }

.rlc-feed__item {
    --glow: var(--accent);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--glow);
    border-radius: 10px;
    background: rgba(15, 20, 32, 0.7);
}

.rlc-feed__item--set_completed { --glow: #3ff0d8; }
.rlc-feed__item--set_published { --glow: #8fb6ff; }

.rlc-app .rlc-feed__thumb {
    width: 44px;
    height: 44px;
    max-width: none;
    margin: 0;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 0 12px color-mix(in srgb, var(--glow) 50%, transparent);
}

.rlc-feed__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--glow) 15%, transparent);
    color: var(--glow);
    font-size: 20px;
}

.rlc-app .rlc-feed__text { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.rlc-feed__card { color: var(--glow); }

/* ------------------------------------------------------------------ */
/* Dust and crafting                                                  */
/* ------------------------------------------------------------------ */

.rlc-dust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(196, 155, 255, 0.10), rgba(63, 240, 216, 0.06));
}

.rlc-dust__amount {
    color: var(--ink-2);
    font-size: 14px;
    white-space: nowrap;
}

.rlc-dust__amount b {
    color: #e2c9ff;
    font-family: var(--display);
    font-size: 20px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(196, 155, 255, 0.6);
}

.rlc-dust__amount::before {
    content: "";
    display: inline-block;
    width: 30px;
    aspect-ratio: 220 / 224;
    margin-right: 6px;
    vertical-align: -9px;
    background: url('../img/shards.svg') center / contain no-repeat;
}

.rlc-craft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.rlc-craft--slot { justify-content: center; margin-top: 6px; }

.rlc-app .rlc-chip-btn {
    --glow: #c49bff;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--glow) 55%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--glow) 10%, transparent);
    color: var(--ink);
    font: inherit;
    font-family: var(--display);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.rlc-app .rlc-chip-btn:hover:not([disabled]) { background: color-mix(in srgb, var(--glow) 22%, transparent); }
.rlc-app .rlc-chip-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.rlc-app .rlc-chip-btn.is-armed,
.rlc-app .rlc-btn.is-armed { border-color: #ffb547; background: rgba(255, 181, 71, 0.16); color: #ffd28a; }
.rlc-app .is-armed { white-space: normal; line-height: 1.2; }

.rlc-caption li .rlc-chip-btn { margin-left: 6px; padding: 0 8px; }

.rlc-app .rlc-link-btn {
    display: block;
    margin: 4px auto 0;
    padding: 2px 4px;
    border: 0;
    background: none;
    color: #c49bff;
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* Small screens, reduced motion                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 620px) {
    .rlc-bar { gap: 12px; padding-top: 14px; }
    .rlc-crest { width: 46px; height: 46px; }
    .rlc-bar__brand { gap: 11px; }
    .rlc-bar__eyebrow { font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; }
    .rlc-bar__name { font-size: 18px; }
    .rlc-app .rlc-bar__odds { padding: 6px 10px; font-size: 12px; }
    .rlc-app .rlc-stats { gap: 6px; }
    .rlc-stat { padding: 5px 4px 6px; }
    .rlc-app .rlc-stat dd { font-size: 16px; }
    .rlc-app .rlc-stat dt { font-size: 9px; letter-spacing: 0.08em; }
    .rlc-tabs { gap: 4px; }
    .rlc-app .rlc-tab { flex-direction: column; gap: 3px; padding: 9px 2px 8px; font-size: 11px; letter-spacing: 0.06em; }
    .rlc-tab__icon { width: 22px; height: 22px; }
    .rlc-tab__count { top: -6px; right: 4px; }
    .rlc-builder__cols { grid-template-columns: 1fr; }
    .rlc-trade__sides { grid-template-columns: 1fr; }
    .rlc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
    .rlc-reveal-row { --card-w: 42vw; gap: 36px 16px; }
    .rlc-reveal-row[data-count="1"] { --card-w: 70vw; }
    .rlc-shop__packs { gap: 28px; }
    .rlc-app .pack-choice .pack { --pack-w: 140px; }
}

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

.rlc-social__dms { margin-top: 8px; }

/* Sign in with Discord (logged-out view) */
.rlc-app .rlc-btn--discord {
    border-color: #5865f2;
    background: #5865f2;
    color: #fff;
}

.rlc-app .rlc-btn--discord:hover { filter: brightness(1.1); color: #fff; }
.rlc-app .rlc-notice--error { color: #ffd9dc; }

/* ------------------------------------------------------------------ */
/* Daily Dig calendar and waiting rewards (Packs tab)                 */
/*                                                                    */
/* A check-in board like mobile games use: every tile shows its prize */
/* (mini packs, shards), bonus days get gold frames, today's tile     */
/* pulses and claims when tapped, claimed days grey out with a tick.  */
/* ------------------------------------------------------------------ */

.rlc-app .rlc-claim {
    display: grid;
    gap: 14px;
    align-items: stretch;
    justify-content: stretch;
}

.rlc-cal__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 16px;
}

.rlc-cal__titles { display: grid; gap: 2px; min-width: 0; }

.rlc-cal__title {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.03em;
    background: linear-gradient(180deg, #fff6cf 10%, #ffd25c 50%, #c98a26);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7));
}

.rlc-cal__sub { color: var(--ink-2); font-size: 14px; }
.rlc-cal__sub b { color: var(--ink); }

.rlc-cal__pills { display: flex; flex-wrap: wrap; gap: 6px; }

.rlc-cal__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: rgba(15, 20, 32, 0.8);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.rlc-cal__pill b { color: var(--ink); }
.rlc-cal__pill--streak { border-color: rgba(255, 140, 60, 0.6); background: linear-gradient(135deg, rgba(255, 120, 40, 0.18), rgba(15, 20, 32, 0.8)); }
.rlc-cal__pill--ready { border-color: rgba(255, 210, 92, 0.75); color: #ffe59a; }

/* Cycle progress with a marker on every bonus day. */
.rlc-cal__progress {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: #141a29;
    box-shadow: inset 0 0 0 1px #232b42;
}

.rlc-cal__progress > i {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #c98a26, #ffd25c 70%, #fff2bf);
    box-shadow: 0 0 10px rgba(255, 200, 90, 0.5);
}

.rlc-cal__progress > b {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    transform: rotate(45deg);
    border: 1px solid #2e1a05;
    background: #3a2c10;
}

.rlc-cal__progress > b.is-reached { background: #ffd25c; box-shadow: 0 0 8px rgba(255, 210, 92, 0.8); }

/* The board. */
.rlc-app .rlc-cal {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rlc-cal__day { position: relative; margin: 0; padding: 0; }

.rlc-app .rlc-cal__tile {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    width: 100%;
    aspect-ratio: 0.78;
    padding: 6px 3px 7px;
    overflow: hidden;
    border: 1px solid #2a3350;
    border-radius: 12px;
    background: linear-gradient(180deg, #182033, #0c111d);
    color: var(--ink);
    font: inherit;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.rlc-cal__daylabel {
    font-family: 'Cinzel', Georgia, serif;
    color: var(--ink-3);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rlc-cal__art {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 0;
}

.rlc-cal__art .rlc-item__pack { width: 44%; height: auto; aspect-ratio: 0.64; margin: 0; }
.rlc-cal__art .rlc-shard-icon { width: 70%; }

/* A small daily pack tucked into the corner on bonus days. */
.rlc-cal__extra {
    position: absolute;
    left: 12%;
    bottom: 0;
    display: block;
    width: 24%;
    transform: rotate(-12deg);
}

.rlc-cal__extra .rlc-item__pack { width: 100%; height: auto; aspect-ratio: 0.64; margin: 0; }

.rlc-cal__label {
    max-width: 100%;
    overflow: hidden;
    color: var(--ink-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rlc-cal__label.is-shards { color: #e2c9ff; }

/* Bonus days: gold frame and a warm glow; the last day glows most. */
.rlc-cal__day.is-bonus .rlc-cal__tile {
    border-color: rgba(240, 190, 90, 0.75);
    background:
        radial-gradient(90% 60% at 50% 45%, rgba(255, 200, 90, 0.22), transparent 70%),
        linear-gradient(180deg, #2a2213, #100c07);
    box-shadow: inset 0 0 0 1px rgba(30, 16, 2, 0.8), inset 0 0 14px rgba(255, 200, 90, 0.18);
}

.rlc-cal__day.is-bonus .rlc-cal__daylabel { color: #ffd28a; }
.rlc-cal__day.is-bonus .rlc-cal__label { color: #ffe59a; }

.rlc-cal__day.is-grand .rlc-cal__tile {
    border-width: 2px;
    border-color: #ffd25c;
    box-shadow: 0 0 16px rgba(255, 200, 90, 0.45), inset 0 0 18px rgba(255, 200, 90, 0.3);
}

.rlc-cal__day.is-grand .rlc-cal__tile::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 230, 150, 0.25) 25%, transparent 30% 70%, rgba(255, 230, 150, 0.25) 75%, transparent 80%);
    animation: rlc-grand-spin 6s linear infinite;
    pointer-events: none;
}

@keyframes rlc-grand-spin { to { transform: rotate(1turn); } }

/* Claimed: grey with a tick. */
.rlc-cal__day.is-done .rlc-cal__tile > :not(.rlc-cal__check) { filter: grayscale(1) brightness(0.55); }
.rlc-cal__day.is-done .rlc-cal__tile { border-color: #232a3c; background: #0d111a; box-shadow: none; }

.rlc-cal__check {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 46%;
    aspect-ratio: 1;
    transform: translate(-50%, -46%);
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat,
        radial-gradient(circle, #3fbf7a, #1d7a48);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.6);
}

/* Today's prize: a pulsing gold border; tapping it claims. */
.rlc-cal__day.is-claimable .rlc-cal__tile {
    border: 2px solid #ffd25c;
    background:
        radial-gradient(90% 60% at 50% 45%, rgba(255, 220, 120, 0.3), transparent 70%),
        linear-gradient(180deg, #2b2414, #100c07);
    cursor: pointer;
    animation: rlc-claim-pulse 1.4s ease-in-out infinite;
}

.rlc-cal__day.is-claimable .rlc-cal__tile:hover,
.rlc-cal__day.is-claimable .rlc-cal__tile:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.12);
    outline: none;
}

.rlc-cal__day.is-claimable .rlc-cal__label {
    padding: 1px 7px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe48a, #e09a26);
    color: #2a1704;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-overflow: clip;
    text-transform: uppercase;
}

@keyframes rlc-claim-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 92, 0.7), 0 0 10px rgba(255, 210, 92, 0.45); transform: scale(1); }
    50% { box-shadow: 0 0 0 5px rgba(255, 210, 92, 0), 0 0 24px rgba(255, 210, 92, 0.85); transform: scale(1.04); }
}

.rlc-cal__day.is-claiming .rlc-cal__tile { animation: none; opacity: 0.7; cursor: progress; }

/* The next prize after today's claim. */
.rlc-cal__day.is-next .rlc-cal__tile { border-style: dashed; border-color: var(--accent); }
.rlc-cal__day.is-next .rlc-cal__label { color: var(--accent); }

.rlc-app .rlc-cal__note { font-size: 13px; }

/* Shards icon (assets/img/shards.svg). */
.rlc-shard-icon {
    display: inline-block;
    width: 1.4em;
    aspect-ratio: 220 / 224;
    vertical-align: -0.35em;
    background: url('../img/shards.svg') center / contain no-repeat;
}

.rlc-rewards {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 181, 71, 0.6);
    border-radius: 12px;
    background: rgba(255, 181, 71, 0.08);
}

.rlc-rewards__title { color: #ffd28a; }

.rlc-rewards__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rlc-app .rlc-rewards .rlc-item__pack { display: inline-block; flex: 0 0 auto; width: 24px; height: 36px; margin: 0; }
.rlc-rewards__info { display: grid; flex: 1; min-width: 0; }
.rlc-rewards__info small { color: var(--ink-2); }

@media (max-width: 560px) {
    .rlc-app .rlc-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
    .rlc-cal__title { font-size: 21px; }
    .rlc-cal__label { font-size: 10px; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rlc-cal__day.is-claimable .rlc-cal__tile,
    .rlc-cal__day.is-grand .rlc-cal__tile::before { animation: none; }
}

/* ------------------------------------------------------------------ */
/* Vault filters: sets and factions                                    */
/* ------------------------------------------------------------------ */

.rlc-app .rlc-filters { display: grid; gap: 8px; margin: 14px 0 6px; }
.rlc-app .rlc-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.rlc-app .rlc-filters__label {
    min-width: 66px;
    color: var(--gold-2);
    font-family: var(--display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Filter tags: a gold-edged plaque with pointed ends (the edge is the */
/* tag's own background, the fill an inset ::after with the same cut). */
.rlc-app .rlc-filter-chip {
    --chip: var(--gold);
    --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;
    border-radius: 0;
    background: var(--edge);
    clip-path: var(--cut);
    color: var(--ink-2);
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.rlc-app .rlc-filter-chip::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    background: var(--fill);
    clip-path: var(--cut);
}

/* Faction tags lead with a small diamond in the faction colour. */
.rlc-app .rlc-filter-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);
}

.rlc-app .rlc-filter-chip:hover {
    --edge: color-mix(in srgb, var(--chip) 60%, transparent);
    color: var(--ink);
}

.rlc-app .rlc-filter-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);
}

/* clip-path would hide an outline, so focus brightens the edge instead. */
.rlc-app .rlc-filter-chip:focus-visible { outline: 0; --edge: #fff; }

/* A missing Relic's empty slot hints at its faction colour. */
.rlc-app .rlc-slot__shape[style*="--slot-faction"] { border-color: color-mix(in srgb, var(--slot-faction) 65%, transparent); }