/* Inkweavers Battle Pass — active client-only presentation for Patch 2.9. */
:root {
    --ink-paper: #f3f0e8;
    --ink-paper-deep: #ddd8cc;
    --ink-black: #101318;
    --ink-black-soft: #262a30;
    --ink-blue: #164ec6;
    --ink-blue-bright: #1f63ee;
    --ink-lime: #a7b72d;
    --ink-seal: #ad2826;
    --ink-line: rgba(16, 19, 24, 0.32);
    --ink-serif: 'Cinzel', Georgia, serif;
    --ink-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
    --ink-copy: 'Exo 2', sans-serif;
}

#battle-pass-widget {
    --bp-widget-background-image: url('../Loading Screen/Inkweaver Kagome Client Background.png');
    border: 1px solid rgba(244, 241, 231, 0.72);
    border-radius: 0;
    clip-path: polygon(0 3px, 72% 0, 74% 3px, 100% 1px, 99% 96%, 62% 100%, 0 97%);
    background: var(--bp-widget-background-image) 64% 34% / cover no-repeat;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.68), inset 0 -3px 0 var(--ink-blue);
}

#battle-pass-widget:hover {
    border-color: #fff;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.75), 0 0 0 2px rgba(22, 78, 198, 0.55), inset 0 -4px 0 var(--ink-blue-bright);
}

#battle-pass-widget .bp-bottom-title,
#battle-pass-widget .bp-bottom-season,
#battle-pass-widget .bp-bottom-progress-info {
    font-family: var(--ink-serif);
    letter-spacing: 0.06em;
}

#battle-pass-widget .bp-bottom-icon {
    color: #fff;
    background: var(--ink-blue);
    font-family: var(--ink-serif);
    transform: rotate(-2deg);
}

#battle-pass-widget .bp-bottom-progress-fill {
    background: linear-gradient(90deg, var(--ink-blue), #4f82f2);
    box-shadow: 0 0 14px rgba(31, 99, 238, 0.7);
}

#bp-modal.bp-modal {
    background: rgba(5, 7, 10, 0.86);
    backdrop-filter: blur(10px) saturate(0.72);
    -webkit-backdrop-filter: blur(10px) saturate(0.72);
    animation: ink-overlay-in 180ms ease-out;
}

#bp-modal.bp-modal.active {
    align-items: center;
    justify-content: center;
}

#bp-modal .bp-modal-container {
    --bp-header-background-image: url('../Loading Screen/Inkweaver Kagome Client Background.png');
    width: calc(100% - 34px);
    max-width: 1900px;
    height: 970px;
    max-height: calc(100% - 34px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 0;
    clip-path: polygon(0 4px, 13% 0, 14% 3px, 45% 0, 46% 4px, 78% 1px, 79% 5px, 100% 2px, 99.8% 96%, 87% 100%, 55% 97%, 21% 100%, 0 98%);
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.93), rgba(232, 229, 220, 0.94)),
        repeating-linear-gradient(4deg, rgba(19, 22, 26, 0.025) 0 1px, transparent 1px 8px);
    color: var(--ink-black);
    box-shadow: 0 42px 110px rgba(0, 0, 0, 0.78), 0 0 0 4px rgba(16, 19, 24, 0.38);
    isolation: isolate;
    animation: ink-shell-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#bp-modal .bp-modal-container::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.52;
    background:
        radial-gradient(circle at 5% 6%, rgba(22, 78, 198, 0.9) 0 2px, transparent 3px),
        radial-gradient(circle at 93% 79%, rgba(167, 183, 45, 0.72) 0 2px, transparent 3px),
        repeating-linear-gradient(84deg, transparent 0 76px, rgba(16, 19, 24, 0.025) 77px 78px);
}

#bp-modal .bp-modal-container::after {
    content: '';
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 184px;
    height: 22px;
    z-index: 1;
    pointer-events: none;
    background: var(--ink-blue);
    opacity: 0.92;
    transform: rotate(-0.35deg);
    clip-path: polygon(0 38%, 8% 22%, 19% 48%, 34% 20%, 49% 52%, 63% 19%, 81% 45%, 100% 27%, 100% 74%, 78% 66%, 62% 88%, 43% 62%, 24% 82%, 0 68%);
}

#bp-modal .bp-modal-header,
#bp-modal .bp-modal-progress-header,
#bp-modal .bp-modal-body,
#bp-modal .bp-modal-footer {
    position: relative;
    z-index: 2;
}

#bp-modal .bp-modal-header {
    flex: 0 0 250px;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 18px;
    padding: 34px 46px 26px;
    border: 0;
    background:
        linear-gradient(90deg, rgba(247, 245, 238, 0.99) 0%, rgba(247, 245, 238, 0.95) 37%, rgba(247, 245, 238, 0.56) 55%, rgba(247, 245, 238, 0.03) 80%),
        var(--bp-header-background-image) 62% 37% / cover no-repeat;
    overflow: hidden;
}

#bp-modal .bp-modal-header::after {
    content: '';
    position: absolute;
    left: -1%;
    right: -1%;
    bottom: -5px;
    height: 22px;
    background: var(--ink-black);
    clip-path: polygon(0 31%, 9% 8%, 16% 37%, 27% 4%, 38% 30%, 51% 10%, 63% 40%, 74% 7%, 86% 32%, 100% 12%, 100% 71%, 91% 85%, 77% 61%, 62% 88%, 49% 65%, 34% 91%, 18% 64%, 0 87%);
}

#bp-modal .bp-operation-insignia {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    margin-top: 14px;
    object-fit: contain;
    filter: saturate(1.25) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2));
}

#bp-modal .bp-modal-title-section {
    max-width: 780px;
    gap: 4px;
}

#bp-modal .bp-modal-title {
    display: block;
    margin: 0;
    color: var(--ink-black);
    font-family: var(--ink-display);
    font-size: clamp(3.2rem, 5.1vw, 6.5rem);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    text-shadow: 3px 2px 0 rgba(22, 78, 198, 0.14);
    transform: skewX(-4deg);
}

#bp-modal .bp-modal-title-mark { display: block; }

#bp-modal .bp-modal-title-label {
    display: block;
    margin: 2px 0 11px 4px;
    color: var(--ink-black-soft);
    font-family: var(--ink-serif);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.5em;
    line-height: 1;
    text-transform: uppercase;
    transform: skewX(4deg);
}

#bp-modal .bp-modal-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    color: var(--ink-black);
    font-family: var(--ink-serif);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

#bp-modal .bp-modal-subtitle::before {
    content: '墨';
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 2px solid var(--ink-seal);
    color: var(--ink-seal);
    font-family: Georgia, serif;
    font-size: 0.76rem;
    transform: rotate(-4deg);
}

#bp-modal .bp-modal-close {
    width: 52px;
    height: 52px;
    margin: -16px -16px 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 0;
    background: rgba(16, 19, 24, 0.9);
    color: #fff;
    font-family: var(--ink-copy);
    font-size: 1.4rem;
    box-shadow: 5px 5px 0 rgba(22, 78, 198, 0.55);
}

#bp-modal .bp-modal-close:hover { background: var(--ink-seal); transform: rotate(2deg); }

#bp-modal .bp-modal-progress-header {
    flex: 0 0 106px;
    display: grid;
    grid-template-columns: 92px minmax(260px, 1fr) minmax(180px, auto) 150px minmax(180px, 230px);
    align-items: center;
    margin: -10px 28px 0;
    padding: 8px 18px;
    border: 0;
    color: #fff;
    background: var(--ink-black);
    clip-path: polygon(0 8%, 4% 1%, 28% 5%, 47% 0, 72% 6%, 100% 2%, 99% 93%, 71% 100%, 44% 95%, 18% 100%, 1% 93%);
}

#bp-modal .bp-command-cell {
    min-width: 0;
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

#bp-modal .bp-command-cell:last-child { border-right: 0; }

#bp-modal .bp-level-readout {
    width: 62px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    color: #fff;
    font-family: var(--ink-serif);
    font-size: 1.36rem;
    font-weight: 700;
    transform: rotate(-1deg);
    box-shadow: 4px 4px 0 var(--ink-blue);
}

#bp-modal .bp-modal-progress-info { width: 100%; }

#bp-modal .bp-modal-progress-label {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, 0.64);
    font-family: var(--ink-serif);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#bp-modal .bp-modal-progress-value,
#bp-modal .bp-access-state,
#bp-modal .bp-command-cost {
    color: #fff;
    font-family: var(--ink-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

#bp-modal .bp-access-state,
#bp-modal .bp-command-cost { text-transform: uppercase; }
#bp-modal .bp-access-state i,
#bp-modal .bp-command-cost i { margin-right: 8px; color: var(--ink-lime); }
#bp-modal .bp-access-state.is-active { color: #fff; }

#bp-modal .bp-modal-progress-bar {
    height: 7px;
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.08);
}

#bp-modal .bp-modal-progress-fill {
    border-radius: 0;
    background: linear-gradient(90deg, var(--ink-blue), var(--ink-blue-bright), var(--ink-lime));
    box-shadow: 0 0 14px rgba(31, 99, 238, 0.58);
}

#bp-modal .bp-claim-all-btn,
#bp-modal .bp-unlock-premium-btn {
    min-height: 48px;
    border-radius: 0;
    font-family: var(--ink-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#bp-modal .bp-claim-all-btn {
    width: 100%;
    border: 1px solid #fff;
    background: var(--ink-seal);
    color: #fff;
    box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.16);
}

#bp-modal .bp-claim-all-btn:hover:not(:disabled) { background: #c73733; transform: translateY(-1px); }

#bp-modal .bp-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 50px;
    align-items: stretch;
    gap: 10px;
    margin: 14px 28px 0;
    padding: 9px;
    border: 1px solid var(--ink-line);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.44);
    box-shadow: inset 0 0 0 5px rgba(16, 19, 24, 0.05);
    overflow: hidden;
}

#bp-modal .bp-rail-button {
    border: 0;
    border-radius: 0;
    background: var(--ink-black);
    color: #fff;
    font-size: 1.45rem;
    clip-path: polygon(0 5%, 88% 0, 100% 50%, 88% 100%, 0 95%);
}

#bp-modal .bp-rail-button:last-child { transform: scaleX(-1); }
#bp-modal .bp-rail-button:last-child i { transform: scaleX(-1); }
#bp-modal .bp-rail-button:hover { background: var(--ink-blue); }

#bp-modal .bp-reward-rail-viewport {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--ink-blue) rgba(16, 19, 24, 0.12);
    scroll-behavior: smooth;
}

#bp-modal .bp-rewards-track {
    min-width: max-content;
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 8px 3px 11px;
}

#bp-modal .bp-rewards-track::before { display: none; }

#bp-modal .bp-reward-item {
    position: relative;
    width: 194px;
    min-width: 194px;
    min-height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 76px;
    border: 1px solid rgba(16, 19, 24, 0.42);
    border-radius: 0;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(225, 221, 210, 0.96)),
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(16, 19, 24, 0.03) 8px 9px);
    clip-path: polygon(1% 1%, 51% 0, 99% 2%, 100% 95%, 73% 98%, 31% 97%, 0 100%, 0 5%);
    box-shadow: 0 9px 16px rgba(25, 28, 34, 0.18);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

#bp-modal .bp-reward-item:hover { transform: translateY(-4px) rotate(-0.25deg); box-shadow: 0 14px 22px rgba(25, 28, 34, 0.24); }
#bp-modal .bp-reward-item:has(.bp-reward-node.available) { box-shadow: 0 0 0 3px var(--ink-blue), 0 14px 24px rgba(22, 78, 198, 0.25); }
#bp-modal .bp-reward-item:has(.bp-reward-node.claimed) { opacity: 0.78; }

#bp-modal .bp-reward-node {
    width: 100%;
    height: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: radial-gradient(circle at 50% 38%, rgba(22, 78, 198, 0.12), transparent 58%);
    box-shadow: none;
    overflow: hidden;
}

#bp-modal .bp-reward-node::before {
    content: attr(data-tier);
    position: absolute;
    top: 8px;
    left: 10px;
    z-index: 3;
    padding: 3px 8px;
    border: 0;
    background: var(--ink-black);
    color: #fff;
    font-family: var(--ink-serif);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

#bp-modal .bp-reward-node.locked { opacity: 0.62; }
#bp-modal .bp-reward-node.available { animation: ink-available 2s ease-in-out infinite; }
#bp-modal .bp-reward-node.claimed { background: linear-gradient(160deg, rgba(22, 78, 198, 0.16), rgba(255,255,255,0.18)); }

#bp-modal .bp-reward-image {
    width: 100%;
    height: 100%;
    padding: 34px 12px 8px;
    object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.24));
}

#bp-modal .bp-reward-selection-grid {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 3px;
    padding: 34px 7px 7px;
    box-sizing: border-box;
}

#bp-modal .bp-reward-selection-grid img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    border: 1px solid rgba(16, 19, 24, 0.3);
    border-radius: 0;
}

#bp-modal .bp-reward-currency {
    color: var(--ink-black);
    font-family: var(--ink-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
}

#bp-modal .bp-reward-currency i { color: #b68a27; font-size: 2.7rem; }

#bp-modal .bp-reward-free-badge {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    padding: 5px 6px;
    border: 0;
    border-radius: 0;
    background: var(--ink-blue);
    color: #fff;
    font-family: var(--ink-serif);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-align: center;
    box-shadow: none;
    z-index: 8;
    pointer-events: none;
}

#bp-modal .bp-reward-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    border-top: 2px solid var(--ink-black);
    background: rgba(246, 243, 234, 0.96);
    text-align: left;
}

#bp-modal .bp-reward-tier {
    color: rgba(16, 19, 24, 0.58);
    font-family: var(--ink-serif);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

#bp-modal .bp-reward-name {
    color: var(--ink-black);
    font-family: var(--ink-serif);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.025em;
    text-align: left;
    text-transform: uppercase;
}

#bp-modal .bp-reward-name-tooltip { display: none; }

#bp-modal .bp-modal-footer {
    flex: 0 0 92px;
    display: grid;
    grid-template-columns: minmax(320px, 490px) minmax(220px, 1fr) auto;
    align-items: center;
    gap: 28px;
    margin: 16px 28px 24px;
    padding: 0 24px;
    border: 0;
    background: rgba(246, 243, 234, 0.86);
    box-shadow: 0 -1px 0 var(--ink-line), 0 1px 0 rgba(255,255,255,0.9);
}

#bp-modal .bp-unlock-section { width: 100%; margin: 0; }

#bp-modal .bp-unlock-premium-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 22px;
    border: 0;
    background: var(--ink-seal);
    color: #fff;
    clip-path: polygon(0 8%, 5% 1%, 97% 4%, 100% 88%, 94% 100%, 2% 95%);
    box-shadow: none;
}

#bp-modal .bp-unlock-premium-btn:hover { background: #c73733; transform: translateX(3px); }
#bp-modal .bp-unlock-icon { font-size: 1rem; animation: none; filter: none; }
#bp-modal .bp-unlock-text { flex-direction: row; align-items: center; gap: 10px; }
#bp-modal .bp-unlock-title,
#bp-modal .bp-unlock-cost { color: inherit; font-family: var(--ink-serif); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; }
#bp-modal .bp-unlock-cost::before { content: '·'; margin-right: 10px; }
#bp-modal .bp-unlock-glow { display: none; }
#bp-modal .bp-modal-footer-copy { color: rgba(16, 19, 24, 0.68); font-family: var(--ink-copy); font-size: 0.78rem; line-height: 1.45; }
#bp-modal .bp-track-position { color: var(--ink-black); font-family: var(--ink-serif); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; white-space: nowrap; }

.bp-choice-overlay {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 7, 10, 0.9);
    backdrop-filter: blur(12px);
}

.bp-choice-panel {
    width: min(1480px, 96vw);
    max-height: 94vh;
    overflow: auto;
    padding: 34px;
    border: 1px solid rgba(255,255,255,0.85);
    color: var(--ink-black);
    background: linear-gradient(145deg, #f8f5ec, #ded9cd);
    clip-path: polygon(0 1%, 16% 0, 35% 1%, 62% 0, 100% 1%, 99% 98%, 72% 100%, 39% 98%, 0 100%);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.72), inset 0 0 0 5px rgba(16,19,24,0.06);
}

.bp-choice-title { margin: 0; color: var(--ink-black); font-family: var(--ink-display); font-size: 1.8rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.bp-choice-subtitle { margin: 8px 0 20px; color: var(--ink-blue); font-family: var(--ink-copy); font-size: 1rem; }
.bp-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 16px; }
.bp-choice-grid.icons { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.bp-choice-option {
    min-height: 286px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--ink-line);
    border-radius: 0;
    background: rgba(255,255,255,0.55);
    color: var(--ink-black);
    cursor: pointer;
    clip-path: polygon(0 1%, 54% 0, 100% 2%, 99% 98%, 41% 100%, 1% 98%);
}

.bp-choice-option:hover:not(:disabled),
.bp-choice-option:focus-visible { transform: translateY(-3px); border-color: var(--ink-blue); box-shadow: 0 0 0 3px rgba(22,78,198,0.18); outline: none; }
.bp-choice-option:disabled { opacity: 0.34; cursor: not-allowed; filter: grayscale(1); }
.bp-choice-option img { width: 100%; height: 224px; object-fit: cover; border: 0; }
.bp-choice-grid.icons .bp-choice-option { min-height: 248px; }
.bp-choice-grid.icons .bp-choice-option img { height: 188px; object-fit: contain; }
.bp-choice-option span { min-height: 34px; display: flex; align-items: center; color: var(--ink-black); font-family: var(--ink-serif); font-size: 0.68rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.bp-choice-cancel { width: 100%; min-height: 44px; margin-top: 18px; border: 1px solid var(--ink-black); border-radius: 0; background: var(--ink-black); color: #fff; font-family: var(--ink-serif); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; }
.bp-choice-cancel:hover { background: var(--ink-seal); }

@keyframes ink-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ink-shell-in { from { opacity: 0; transform: translateY(18px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes ink-available { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(22,78,198,0.08); } 50% { box-shadow: inset 0 0 32px rgba(22,78,198,0.18); } }

@media (max-height: 820px) {
    #bp-modal .bp-modal-container { height: calc(100% - 28px); max-height: none; }
    #bp-modal .bp-modal-header { flex-basis: 188px; padding-top: 22px; }
    #bp-modal .bp-modal-title { font-size: 4rem; }
    #bp-modal .bp-operation-insignia { width: 56px; height: 56px; flex-basis: 56px; }
}

@media (max-width: 760px) {
    #bp-modal .bp-modal-container { width: calc(100% - 18px); height: calc(100% - 18px); max-height: none; }
    #bp-modal .bp-modal-header { flex-basis: 145px; gap: 10px; padding: 22px 18px 16px; }
    #bp-modal .bp-operation-insignia { display: none; }
    #bp-modal .bp-modal-title { font-size: 2.65rem; }
    #bp-modal .bp-modal-title-label { font-size: 0.66rem; letter-spacing: 0.32em; }
    #bp-modal .bp-modal-progress-header { grid-template-columns: 56px minmax(0, 1fr) 142px; margin-inline: 9px; padding-inline: 10px; }
    #bp-modal .bp-command-access, #bp-modal .bp-command-currency { display: none; }
    #bp-modal .bp-command-cell { padding-inline: 8px; }
    #bp-modal .bp-modal-body { grid-template-columns: 36px minmax(0, 1fr) 36px; margin-inline: 9px; }
    #bp-modal .bp-reward-item { width: 162px; min-width: 162px; }
    #bp-modal .bp-modal-footer { grid-template-columns: 1fr auto; margin: 10px 9px 12px; padding-inline: 12px; }
    #bp-modal .bp-modal-footer-copy { display: none; }
    .bp-choice-overlay { padding: 8px; }
    .bp-choice-panel { width: 98vw; max-height: 97vh; padding: 18px; }
    .bp-choice-grid, .bp-choice-grid.icons { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
    .bp-choice-option, .bp-choice-grid.icons .bp-choice-option { min-height: 218px; padding: 8px; }
    .bp-choice-option img, .bp-choice-grid.icons .bp-choice-option img { height: 164px; }
}

@media (prefers-reduced-motion: reduce) {
    #bp-modal.bp-modal,
    #bp-modal .bp-modal-container,
    #bp-modal .bp-reward-node.available { animation: none !important; }
    #bp-modal .bp-reward-rail-viewport { scroll-behavior: auto; }
}