/* ===== Progression (DESIGN.md §15): status bar, hub, rewards, popups ===== */

/* ---- reward icons / chips / thumbnails ---- */
.ri { display: inline-flex; width: 1.35em; height: 1.35em; flex: none; vertical-align: middle; }
.ri svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 .06em 0 rgba(0, 0, 0, .35)); }
.ri-item { width: auto; height: auto; }
.rchip { display: inline-flex; align-items: center; gap: .25em; padding: .1em .6em .1em .3em; border-radius: 1em; font-family: var(--font-display); font-size: .85em; line-height: 1.2;
    background: rgba(12, 6, 26, .62); border: .12em solid rgba(255, 255, 255, .12); white-space: nowrap; }
.rchip b { font-weight: 400; }
.rchip-bolts b { color: var(--yellow); } .rchip-xp b { color: #7ddcf9; } .rchip-pass b { color: #c9a6ff; }
.rchip.big { font-size: 1.35em; }
.rchip-item { padding: .15em .7em .15em .2em; border-color: var(--rc); } .rchip-item .thumb { width: 2.3em; height: 2.3em; border-width: .12em; box-shadow: none; }
.rchip-item b { color: var(--rc); }

.thumb { --rc: #B9ACD6; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 4.4em; height: 4.4em; flex: none; overflow: hidden; border-radius: .85em;
    border: .16em solid var(--rc); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 38%, #2a1450), #170c2e 82%);
    box-shadow: 0 .18em 0 var(--ink), inset 0 0 .7em color-mix(in srgb, var(--rc) 35%, transparent); }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.thumb-part { width: 84%; height: 84%; }
.thumb-frame .np { font-size: .62em; max-width: 92%; }
.thumb-title { font-family: var(--font-display); font-size: .62em; text-transform: uppercase; text-align: center; color: var(--rc); line-height: 1.1; padding: 0 .3em; max-width: 100%; white-space: normal !important; overflow: hidden; word-break: break-word; text-shadow: 0 .1em 0 var(--ink); }
.rar-dot { display: inline-block; width: .7em; height: .7em; border-radius: 50%; background: var(--rc); border: .1em solid var(--ink); margin-right: .35em; vertical-align: middle; }

/* ---- level badge ---- */
.lvl-badge { position: relative; display: inline-grid; place-items: center; width: 2.6em; height: 2.6em; flex: none; }
.lvl-gear { position: absolute; inset: 0; filter: drop-shadow(0 .1em 0 rgba(0, 0, 0, .4)); }
.lvl-gear svg { width: 100%; height: 100%; display: block; }
.lvl-badge b { position: relative; font-family: var(--font-display); font-weight: 400; font-size: .98em; line-height: 1; color: #fff; -webkit-text-stroke: .12em var(--ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--ink); }
.lvl-badge[data-digits="2"] b { font-size: .86em; } .lvl-badge[data-digits="3"] b { font-size: .68em; }
.lvl-badge.bump { animation: lvBump .7s var(--ease-spring); }
@keyframes lvBump { 0% { transform: scale(1); } 30% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
.lvl-badge.xl { width: 7.5em; height: 7.5em; font-size: 1em; } .lvl-badge.xl b { font-size: 3em; }
.lvl-badge.xl[data-digits="2"] b { font-size: 2.6em; } .lvl-badge.xl[data-digits="3"] b { font-size: 2em; }
.lvl-badge.xl .lvl-gear { animation: spin 14s linear infinite; }
.lvl-badge.xl .lvl-gear svg { filter: drop-shadow(0 0 .6em rgba(255, 210, 63, .7)); }

/* ---- status bar (menu top + hub header) ---- */
.statusbar { display: flex; align-items: center; gap: .55em; min-width: 0; padding: .2em .8em .2em .25em; border-radius: 2em; background: rgba(21, 12, 42, .86); border: .15em solid var(--ink);
    box-shadow: 0 .2em 0 var(--ink), inset 0 .1em 0 rgba(255, 255, 255, .1); font-size: 1em; }
.statusbar[role="button"] { cursor: pointer; transition: transform .12s var(--ease-spring), filter .15s; touch-action: none; }
.statusbar[role="button"]:hover { transform: translateY(-.08em); filter: brightness(1.1); }
.statusbar .lvl-badge { margin: -.45em 0 -.45em -.55em; width: 2.9em; height: 2.9em; z-index: 1; }
.sb-mid { flex: 1 1 0; min-width: 3em; }
.sb-bar { position: relative; height: 1.25em; border-radius: 1em; background: #0c0618; border: .13em solid var(--ink); overflow: hidden; }
.sb-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 1em; transition: width .7s var(--ease-out);
    background: repeating-linear-gradient(-45deg, #2EC4F1 0 .6em, #1a9fd0 .6em 1.2em); background-size: 200% 100%; animation: stripes 1.2s linear infinite; }
.sb-xp { position: absolute; inset: 0; display: grid; place-items: center; font-size: .72em; font-weight: 800; letter-spacing: .03em; color: #fff; text-shadow: 0 .08em 0 var(--ink), 0 0 .2em var(--ink); }
.sb-bolts { display: flex; align-items: center; gap: .3em; flex: none; font-family: var(--font-display); color: var(--yellow); text-shadow: 0 .08em 0 var(--ink); font-size: 1.05em; }
.sb-bolts .ri { width: 1.4em; height: 1.4em; }
.sb-bolts.gain { animation: boltsGain .6s var(--ease-spring); }
@keyframes boltsGain { 40% { transform: scale(1.25); filter: brightness(1.4); } }

/* menu top bar sits between the two corner buttons */
#scr-menu { --cf: clamp(14px, 2.6cqmin, 26px); }
.menu-top { position: absolute; z-index: 4; top: 2.5cqmin; left: calc(2.5cqmin + var(--cf) * 3.5); right: calc(2.5cqmin + var(--cf) * 3.5); height: calc(var(--cf) * 2.9);
    display: flex; align-items: center; justify-content: center; font-size: calc(var(--cf) * .86); pointer-events: none; }
.menu-top .statusbar { pointer-events: auto; width: 100%; max-width: 21em; }
.menu-top .sb-xp { display: none; }
.menu-top .sb-bar { height: 1em; }
.has-top .menu-stage { margin-top: calc(var(--cf) * 3.2); }
#scr-menu .menu-stage { margin-top: calc(var(--cf) * 3.1); }
.short #scr-menu .menu-stage { margin-top: calc(var(--cf) * 2.9); }

/* menu MISSIONS button + badge */
.menu-buttons .row.prog .btn { font-size: 1.1em; padding: .45em .3em; }
.portrait .menu-buttons .row.prog .btn { font-size: 1em; }
.short .menu-buttons .row.prog .btn { font-size: .9em; padding: .35em .3em; }
.mission-btn .ico svg { filter: none; }
.menu-badge { position: absolute; top: -.85em; right: .6em; min-width: 1.8em; height: 1.8em; padding: 0 .4em; display: grid; place-items: center; border-radius: 1em; font-style: normal;
    font-family: var(--font-display); font-size: .85em; color: #fff; background: var(--red); border: .2em solid var(--ink); box-shadow: 0 .15em 0 var(--ink); animation: badgePulse 1.4s ease-in-out infinite; pointer-events: none; }
@keyframes badgePulse { 50% { transform: scale(1.18); } }
.btn.green .menu-badge { color: #fff; }

/* ---- hub shell ---- */
.pg { font-size: clamp(12px, 2.5cqmin, 26px); }
.portrait .pg { font-size: clamp(13px, 3.7cqw, 24px); }
#scr-progress.active { display: flex; justify-content: center; }
.pg-wrap { display: flex; flex-direction: column; gap: .7em; width: min(100%, 64em); height: 100%; min-height: 0; padding: 2.2cqmin 3cqmin 0; }
.pg-head { display: flex; align-items: center; gap: .9em; flex: none; }
.pg-back { flex: none; font-size: .9em; }
.pg-head .statusbar { flex: 1 1 0; max-width: 34em; margin-left: auto; font-size: 1.05em; }
.pg-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45em; flex: none; }
.pg-tab { position: relative; font-size: .88em; padding: .5em .3em; gap: .4em; --c: #4a2d7c; --cd: #2e1a55; --tc: var(--text); box-shadow: 0 .22em 0 var(--ink), inset 0 .1em 0 rgba(255, 255, 255, .2); min-width: 0; }
.pg-tab.on { --c: var(--yellow); --cd: var(--yellow-d); --tc: var(--ink); box-shadow: 0 .32em 0 var(--ink), 0 .55em .8em rgba(0, 0, 0, .45), inset 0 .12em 0 rgba(255, 255, 255, .45); }
.pg-tabs.has-event { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3em; }
.pg-tabs.has-event .pg-tab { padding-left: .15em; padding-right: .15em; gap: .25em; font-size: .8em; }
.pg-tab[hidden] { display: none; }
.pg-tab .ri { width: 1.25em; height: 1.25em; display: inline-flex; flex: none; } .pg-tab .ri svg { width: 100%; height: 100%; }
.pg-tab[data-tab="event"] { --c: #b4510a; --cd: #6e2d05; --tc: #ffe2bd; }
.pg-tab[data-tab="event"].on { --c: #ff8a2b; --cd: #c45a0a; --tc: var(--ink); }
.pg-tab[data-tab="event"] .pg-dot { background: var(--red); }
.pg-tab .ico { width: 1.25em; height: 1.25em; display: inline-flex; flex: none; } .pg-tab .ico svg { width: 100%; height: 100%; }
.pg-tab > span.fit { min-width: 0; max-width: 100%; }
.pg-dot { position: absolute; top: -.55em; right: -.2em; min-width: 1.7em; height: 1.7em; padding: 0 .35em; display: none; place-items: center; border-radius: 1em; background: var(--red); color: #fff; border: .15em solid var(--ink);
    font-style: normal; font-size: .7em; font-family: var(--font-display); animation: badgePulse 1.4s ease-in-out infinite; }
.pg-tab.has-dot .pg-dot { display: grid; }
.pg-scroll { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: .5em .6em 2em; margin: 0 -.6em; scrollbar-width: thin; scrollbar-color: var(--purple) rgba(12, 6, 26, .55); }
.pg-scroll::-webkit-scrollbar, .pass-track::-webkit-scrollbar, .lk-chips::-webkit-scrollbar { width: .55em; height: .55em; }
.pg-scroll::-webkit-scrollbar-track, .pass-track::-webkit-scrollbar-track { background: rgba(12, 6, 26, .55); border-radius: 1em; }
.pg-scroll::-webkit-scrollbar-thumb, .pass-track::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--purple), var(--purple-d)); border: .1em solid var(--ink); border-radius: 1em; }
.pg-panel { min-height: 100%; }
.pg .navt.kbd-focus { outline: .22em solid #fff; outline-offset: .12em; animation: pulseRing 1s ease-in-out infinite; }
.pg-sh { display: flex; align-items: center; justify-content: space-between; gap: .6em; flex-wrap: wrap; margin: 1em 0 .55em; }
.pg-sh:first-child { margin-top: .2em; }
.pg-sh h3 { margin: 0; font-size: 1.15em; color: var(--yellow); -webkit-text-stroke: .08em var(--ink); paint-order: stroke fill; text-shadow: 0 .09em 0 var(--ink); line-height: 1.1; }
.pg-sh.small { margin: 0 0 .5em; } .pg-sh.small h3 { font-size: 1em; }
.pg-sh-r { display: flex; gap: .4em; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: .35em; padding: .22em .75em; border-radius: 1em; font-size: .78em; font-weight: 800; color: var(--text-dim);
    background: rgba(12, 6, 26, .65); border: .12em solid var(--ink); white-space: nowrap; }
.pill .ico { display: inline-flex; width: 1.15em; height: 1.15em; } .pill .ico svg { width: 100%; height: 100%; }
.pill.off { color: #ff9a9a; }
.pill.big { font-size: 1.1em; color: var(--yellow); font-family: var(--font-display); } .pill.big .ri { width: 1.3em; height: 1.3em; }
.pg-note { text-align: center; color: var(--text-dim); font-size: .88em; margin: .7em 0; line-height: 1.3; text-wrap: balance; }
.pg-note.good { color: var(--green); font-weight: 800; }

/* generic bar */
.bar { flex: 1; min-width: 0; height: .95em; background: #0c0618; border: .13em solid var(--ink); border-radius: 1em; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 1em; transition: width .6s var(--ease-out);
    background: repeating-linear-gradient(-45deg, var(--dc, var(--cyan)) 0 .6em, color-mix(in srgb, var(--dc, var(--cyan)) 78%, #000) .6em 1.2em); background-size: 200% 100%; animation: stripes 1.2s linear infinite; }

/* ---- missions ---- */
.gift-banner { display: flex; align-items: center; gap: .8em; padding: .6em .9em; margin-bottom: .6em; border-radius: 1em; border: .17em solid var(--yellow); box-shadow: 0 .22em 0 var(--ink), 0 0 1em rgba(255, 210, 63, .3);
    background: linear-gradient(90deg, rgba(255, 210, 63, .22), rgba(255, 77, 109, .16)); animation: readyGlow 1.8s ease-in-out infinite; }
.gift-banner .ri { width: 2.4em; height: 2.4em; animation: giftWobble 2s ease-in-out infinite; }
@keyframes giftWobble { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-9deg); } 20% { transform: rotate(8deg); } 30% { transform: rotate(0); } }
.gb-t { flex: 1; min-width: 0; font-family: var(--font-display); text-transform: uppercase; font-size: 1.05em; text-shadow: 0 .08em 0 var(--ink); }
.gift-open { font-size: .95em; flex: none; }
.mgrid { display: grid; gap: .7em; }
.mgrid.daily, .mgrid.weekly { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mgrid.miles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portrait .mgrid.daily, .portrait .mgrid.weekly, .portrait .mgrid.miles { grid-template-columns: minmax(0, 1fr); }
.short.landscape .mgrid.weekly { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcard { --dc: var(--green); position: relative; display: flex; flex-direction: column; gap: .4em; min-width: 0; padding: .65em .8em .7em 1.1em; overflow: hidden;
    background: linear-gradient(180deg, rgba(62, 32, 104, .94), rgba(34, 17, 60, .94)); border: .16em solid var(--ink); border-radius: 1em; box-shadow: 0 .25em 0 var(--ink); }
.mcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .5em; background: var(--dc); }
.mcard.easy { --dc: var(--green); } .mcard.medium { --dc: var(--yellow); } .mcard.hard { --dc: var(--coral); } .mcard.weekly { --dc: var(--cyan); } .mcard.bonus { --dc: var(--purple); }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: .5em; min-height: 1.2em; }
.mc-diff { font-family: var(--font-display); font-size: .7em; letter-spacing: .12em; color: var(--dc); text-shadow: 0 .08em 0 var(--ink); }
.mc-ready { font-family: var(--font-display); font-size: .65em; letter-spacing: .08em; color: var(--ink); background: var(--yellow); padding: .1em .6em; border-radius: 1em; border: .1em solid var(--ink); animation: badgePulse 1.2s ease-in-out infinite; }
.mc-text { font-weight: 800; line-height: 1.22; min-height: 2.44em; text-wrap: balance; display: flex; align-items: center; }
.mc-prog { display: flex; align-items: center; gap: .55em; }
.mc-num { font-family: var(--font-display); font-size: .78em; color: var(--text-dim); min-width: 3.2em; text-align: right; white-space: nowrap; }
.mcard .bar { --dc: var(--dc); }
.mc-foot { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.mc-rewards { display: flex; gap: .3em; flex-wrap: wrap; min-width: 0; }
.mc-rewards .rchip { font-size: .78em; }
.mc-actions { display: flex; align-items: center; gap: .45em; margin-left: auto; }
.mc-actions .claim { font-size: .88em; padding: .4em 1em; }
.mc-actions .reroll { font-size: .62em; } .mc-actions .reroll.disabled { opacity: .55; }
.mc-done { display: inline-flex; align-items: center; gap: .3em; color: var(--green); font-family: var(--font-display); font-size: .8em; text-transform: uppercase; }
.mc-done .ico { width: 1.2em; height: 1.2em; display: inline-flex; } .mc-done .ico svg { width: 100%; height: 100%; }
.mcard.ready { border-color: var(--yellow); animation: readyGlow 1.8s ease-in-out infinite; }
@keyframes readyGlow { 50% { box-shadow: 0 .25em 0 var(--ink), 0 0 1.1em rgba(255, 210, 63, .55); } }
.mcard.claimed { filter: saturate(.55) brightness(.8); }
.mcard.claimed .bar i { animation: none; }
.mcard.just { animation: claimPop .75s var(--ease-spring); }
@keyframes claimPop { 0% { transform: scale(1); filter: brightness(1); } 25% { transform: scale(1.06); filter: brightness(1.7); } 100% { transform: scale(1); filter: saturate(.55) brightness(.8); } }
.mcard.swap { animation: swapIn .55s var(--ease-out); }
@keyframes swapIn { from { transform: rotateX(80deg) translateY(.6em); opacity: 0; } to { transform: none; opacity: 1; } }
.mcard.bonus { background: linear-gradient(180deg, rgba(86, 46, 148, .95), rgba(42, 20, 76, .95)); flex-direction: row; align-items: center; gap: .8em; }
.mcard.bonus .bonus-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4em; }
.bonus-chest { flex: none; } .bonus-chest .ri { width: 3.2em; height: 3.2em; }
.mcard.bonus.ready .bonus-chest .ri { animation: giftWobble 1.6s ease-in-out infinite; }
.mile { --rc: #B9ACD6; display: flex; align-items: center; gap: .7em; padding: .6em .8em; border-radius: 1em; background: rgba(21, 12, 42, .78); border: .15em solid var(--ink); box-shadow: 0 .2em 0 var(--ink); min-width: 0; }
.mile-ico { flex: none; width: 2.6em; height: 2.6em; display: grid; place-items: center; border-radius: 50%; background: #2e1a55; border: .13em solid var(--ink); }
.mile-ico .ri { width: 1.7em; height: 1.7em; } .mile-ico .ico { display: inline-flex; width: 1.4em; height: 1.4em; color: var(--ink); } .mile-ico .ico svg { width: 100%; height: 100%; }
.mile.done .mile-ico { background: var(--green); }
.mile-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2em; }
.mile-title { color: var(--rc); font-size: 1.02em; text-shadow: 0 .08em 0 var(--ink); }
.mile-desc { font-size: .8em; color: var(--text-dim); line-height: 1.2; }
.mile .bar { --dc: var(--rc); }
.mile.done .mc-num { color: var(--green); }

/* ---- pass ---- */
.pass-head { display: grid; gap: .5em .9em; align-items: center; padding: .7em .9em; border-radius: 1em; border: .16em solid var(--ink); box-shadow: 0 .25em 0 var(--ink);
    background: linear-gradient(180deg, rgba(86, 46, 148, .95), rgba(40, 20, 72, .95)); grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico main tier" "bar bar bar" "all all all"; }
.landscape .pass-head { grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1.5fr) auto; grid-template-areas: "ico main tier bar all"; }
.ph-ico { grid-area: ico; } .ph-ico .ri { width: 3em; height: 3em; }
.ph-main { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: .15em; }
.ph-title { font-size: 1.4em; color: var(--yellow); -webkit-text-stroke: .07em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); line-height: 1.1; }
.ph-sub { display: flex; align-items: center; gap: .35em; color: var(--text-dim); font-size: .85em; font-weight: 800; }
.ph-sub .ico { display: inline-flex; width: 1.1em; height: 1.1em; } .ph-sub .ico svg { width: 100%; height: 100%; }
.ph-tier { grid-area: tier; display: flex; align-items: baseline; gap: .3em; }
.ph-tier small { font-family: var(--font-display); font-size: .7em; letter-spacing: .1em; color: var(--text-dim); }
.ph-tier b { font-size: 2.2em; line-height: 1; color: #fff; text-shadow: 0 .06em 0 var(--ink); } .ph-tier span { color: var(--text-dim); font-weight: 800; }
.ph-bar { grid-area: bar; display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.ph-bar .bar { flex: none; height: 1.1em; --dc: var(--purple); }
.pass-head.maxed .bar { --dc: var(--yellow); }
.ph-num { font-size: .8em; color: var(--text-dim); font-weight: 800; text-align: center; }
.ph-btns { grid-area: all; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5em; min-width: 0; }
.pass-head .claim-all { font-size: .95em; padding: .5em 1.2em; min-width: 9em; }
.pass-head .pass-ad { font-size: .9em; }
.pass-head.themed { box-shadow: 0 .25em 0 var(--ink), inset .45em 0 0 var(--pass-accent, transparent); }
.pass-head.themed .ph-title { color: var(--pass-accent, var(--yellow)); }
.pass-head.themed .bar { --dc: var(--pass-accent, var(--purple)); }
.pass-trackwrap { position: relative; margin: .5em -.6em 0; }
.pass-track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.2em, #000 calc(100% - 1.2em), transparent); mask-image: linear-gradient(90deg, transparent, #000 1.2em, #000 calc(100% - 1.2em), transparent); display: flex; overflow-x: auto; overflow-y: hidden; padding: .4em .6em 1.2em; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--purple) rgba(12, 6, 26, .55); cursor: grab; }
.tier { position: relative; flex: none; width: 6.4em; display: flex; flex-direction: column; align-items: stretch; gap: .45em; }
.rail { position: relative; height: 2.3em; display: flex; align-items: center; justify-content: center; }
.rail::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: .55em; margin-top: -.27em; background: #0c0618; border-block: .12em solid var(--ink); }
.tier:first-child .rail::before { left: 50%; } .tier:last-child .rail::before { right: 50%; }
.tier.reached .rail::before, .tier.claimable .rail::before, .tier.claimed .rail::before { background: repeating-linear-gradient(-45deg, var(--green) 0 .5em, var(--green-d) .5em 1em); }
.tier.next .rail::before { background: linear-gradient(90deg, var(--green), #0c0618 60%); }
.tn { position: relative; z-index: 1; min-width: 2.1em; height: 2.1em; padding: 0 .3em; display: grid; place-items: center; border-radius: 50%; font-size: .9em; background: #3a2266; border: .16em solid var(--ink); color: var(--text-dim); box-shadow: 0 .12em 0 var(--ink); }
.tier.reached .tn, .tier.claimed .tn { background: var(--green); color: var(--ink); }
.tier.claimable .tn { background: var(--yellow); color: var(--ink); animation: badgePulse 1.2s ease-in-out infinite; }
.tr-rw { flex: 1; min-height: 7.2em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; margin: 0 .35em; padding: .55em .3em; border-radius: .9em; background: rgba(21, 12, 42, .78); border: .16em solid var(--ink); box-shadow: 0 .22em 0 var(--ink); min-width: 0; }
.tier.big .tr-rw { background: linear-gradient(180deg, rgba(70, 36, 116, .9), rgba(28, 14, 50, .9)); }
.tier.final .tr-rw { border-color: var(--yellow); box-shadow: 0 .22em 0 var(--ink), 0 0 1em rgba(255, 210, 63, .4); }
.tr-bolts { display: flex; flex-direction: column; align-items: center; gap: .15em; font-family: var(--font-display); color: var(--yellow); }
.tr-bolts .ri { width: 2.2em; height: 2.2em; } .tr-bolts b { font-weight: 400; font-size: 1.05em; text-shadow: 0 .08em 0 var(--ink); }
.tr-item { display: flex; flex-direction: column; align-items: center; gap: .2em; max-width: 100%; min-width: 0; }
.tr-item .thumb { width: 3.6em; height: 3.6em; } .tr-item small { max-width: 6em; font-size: .7em; font-weight: 800; text-align: center; line-height: 1.1; overflow-wrap: anywhere; }
.tier:not(.reached):not(.claimed):not(.claimable) .tr-rw { opacity: .8; }
.tier.claimed .tr-rw { opacity: .55; filter: saturate(.6); }
.ts { align-self: center; display: inline-flex; align-items: center; justify-content: center; min-height: 1.7em; font-family: var(--font-display); font-size: .78em; text-transform: uppercase; }
.ts .ico, .ts-lock .ico { display: inline-flex; width: 1.4em; height: 1.4em; } .ts .ico svg { width: 100%; height: 100%; }
.ts-ok { color: var(--green); } .ts-lock { color: var(--text-dim); opacity: .7; }
.ts-claim { padding: .25em .9em; border-radius: 1em; background: linear-gradient(180deg, #ffe27a, var(--yellow-d)); color: var(--ink); border: .14em solid var(--ink); box-shadow: 0 .14em 0 var(--ink); animation: badgePulse 1.2s ease-in-out infinite; }
.tier.claimable { cursor: pointer; } .tier.claimable .tr-rw { border-color: var(--yellow); box-shadow: 0 .22em 0 var(--ink), 0 0 .9em rgba(255, 210, 63, .5); }
.tier.just .tr-rw { animation: claimPop .75s var(--ease-spring); }
.track-nav { position: absolute; top: 5.4em; z-index: 3; font-size: .7em; } .track-nav.l { left: .2em; } .track-nav.r { right: .2em; }
@media (pointer: coarse) { .track-nav { display: none; } }

/* ---- shop ---- */
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: .5em; flex-wrap: wrap; margin-bottom: .6em; }
.shop-banner { display: flex; align-items: center; gap: .8em; padding: .6em .9em; margin-bottom: .7em; border-radius: 1em; background: rgba(21, 12, 42, .78); border: .15em dashed rgba(255, 255, 255, .25); }
.shop-banner.good { border-color: var(--green); flex-direction: column; text-align: center; gap: .2em; }
.shop-banner.good b { color: var(--green); font-size: 1.2em; }
.shop-banner .sb-t { flex: 1; display: flex; flex-direction: column; gap: .15em; min-width: 0; } .shop-banner b { font-size: 1.05em; } .shop-banner .sb-t span, .shop-banner.good > span { color: var(--text-dim); font-size: .86em; }
.shop-banner > .btn { font-size: .85em; flex: none; }
.shop-grid { display: grid; gap: 1em; align-items: start; }
.landscape .shop-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.7fr); }
.daily-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em; }
.scard { --rc: #B9ACD6; position: relative; display: flex; flex-direction: column; gap: .45em; min-width: 0; padding: .5em; border-radius: 1em; border: .17em solid var(--rc);
    background: linear-gradient(180deg, rgba(62, 32, 104, .95), rgba(28, 14, 50, .95)); box-shadow: 0 .25em 0 var(--ink), 0 0 1em color-mix(in srgb, var(--rc) 22%, transparent); }
.scard.featured { border-width: .22em; box-shadow: 0 .25em 0 var(--ink), 0 0 1.3em color-mix(in srgb, var(--rc) 45%, transparent); }
.sc-prev { position: relative; aspect-ratio: 1.1; border-radius: .7em; overflow: hidden; border: .12em solid var(--ink); touch-action: pan-x pan-y;
    background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rc) 50%, #1b0e34), #120a26 72%); }
.featured .sc-prev { aspect-ratio: 1; }
.landscape .daily-grid .sc-prev { aspect-ratio: 1.5; }
.short .daily-grid .sc-prev, .short .featured .sc-prev { aspect-ratio: 1.6; }
.sc-prev::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 9%; height: 3%; border-radius: 1em; background: radial-gradient(ellipse, rgba(255, 255, 255, .25), transparent 70%); pointer-events: none; }
.cp { position: absolute; inset: 0; }
.cp canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp.xl, .cp.md { position: relative; inset: auto; }
.cp-np, .cp-icon { display: grid; place-items: center; }
.cp-icon canvas { position: relative !important; inset: auto !important; width: 62% !important; height: auto !important; max-height: 82%; filter: drop-shadow(0 .35em .4em rgba(0, 0, 0, .55)); animation: iconFloat 3s ease-in-out infinite; }
@keyframes iconFloat { 50% { transform: translateY(-.25em) rotate(3deg); } }
.cp-inset { position: absolute; right: .35em; bottom: .35em; width: 46%; aspect-ratio: 1; display: grid; place-items: center; border-radius: .7em; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc, #fff) 45%, #3a2370), #231245 90%); border: .14em solid var(--rc, #fff); box-shadow: 0 .2em .5em rgba(0, 0, 0, .5); pointer-events: none; }
.cp-inset canvas { position: static !important; width: 88% !important; height: auto !important; max-height: 92%; }
.cp-wiggle canvas { animation: iconWiggle .5s ease; }
@keyframes iconWiggle { 30% { transform: scale(1.2) rotate(-10deg); } 60% { transform: scale(1.1) rotate(8deg); } }
.cp-plate { font-size: 1.15em; max-width: 92%; display: flex; justify-content: center; }
.sc-rar, .sc-disc, .sc-type { position: absolute; z-index: 2; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .62em; line-height: 1.1; pointer-events: none; }
.sc-rar { top: .55em; left: .55em; padding: .2em .7em; border-radius: 1em; background: var(--rc); color: var(--ink); border: .12em solid var(--ink); }
.sc-disc { top: .5em; right: .5em; padding: .25em .7em; border-radius: .6em; background: var(--coral); color: #fff; border: .14em solid var(--ink); font-family: var(--font-display); font-size: .8em; transform: rotate(6deg); box-shadow: 0 .12em 0 var(--ink); }
.sc-type { bottom: .55em; left: .55em; color: var(--text-dim); text-shadow: 0 .08em 0 var(--ink); }
.sc-name { text-align: center; font-size: .95em; line-height: 1.15; padding: 0 .2em; text-shadow: 0 .07em 0 var(--ink); }
.featured .sc-name { font-size: 1.15em; }
.sc-tag { text-align: center; font-size: .68em; letter-spacing: .12em; font-weight: 800; color: var(--yellow); margin-top: -.3em; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: .4em; min-height: 2.4em; }
.sc-price { display: flex; align-items: center; gap: .3em; font-family: var(--font-display); color: var(--yellow); text-shadow: 0 .08em 0 var(--ink); }
.sc-price .ri { width: 1.35em; height: 1.35em; } .sc-price s { color: var(--text-dim); font-size: .72em; opacity: .8; }
.scard.poor .sc-price b { color: #ff9a9a; }
.sc-foot .buy { font-size: .82em; padding: .4em 1em; margin-left: auto; }
.sc-owned { display: flex; align-items: center; justify-content: center; gap: .4em; width: 100%; color: var(--green); font-family: var(--font-display); text-transform: uppercase; font-size: .85em; }
.sc-owned .ico { display: inline-flex; width: 1.3em; height: 1.3em; } .sc-owned .ico svg { width: 100%; height: 100%; }
.scard.owned { filter: saturate(.7); }
.scard.owned .sc-prev { opacity: .85; }

/* ---- locker ---- */
.pg-locker { display: grid; gap: .9em; align-items: start; }
.landscape .pg-locker { grid-template-columns: minmax(0, .75fr) minmax(0, 1.65fr); }
.lk-prev { display: flex; flex-direction: column; align-items: center; gap: .6em; min-width: 0; padding: .6em; border-radius: 1em; border: .16em solid var(--ink); box-shadow: 0 .25em 0 var(--ink);
    background: radial-gradient(ellipse at 50% 100%, rgba(155, 92, 255, .4), transparent 70%), rgba(21, 12, 42, .8); }
.landscape .lk-prev { position: sticky; top: 0; }
.lk-stage { position: relative; width: 100%; aspect-ratio: 1.15; max-height: 26em; touch-action: pan-x pan-y; }
.portrait .lk-stage { aspect-ratio: auto; height: 21cqh; max-width: 22em; }
.short .lk-stage { aspect-ratio: auto; height: 36cqh; }
.lk-bot { position: absolute; inset: 0; }
.lk-stage .menu-ground { left: 6%; right: 6%; bottom: 9%; }
.lk-plate { font-size: 1.25em; max-width: 100%; display: flex; justify-content: center; }
.lk-list { min-width: 0; }
.lk-chips { display: flex; gap: .4em; overflow-x: auto; padding: .1em .1em .8em; margin-bottom: -.4em; touch-action: pan-x; scrollbar-width: none; }
.lk-chip { flex: 1 0 auto; flex-direction: column; gap: .05em; font-size: .8em; padding: .45em .7em; --c: #4a2d7c; --cd: #2e1a55; --tc: var(--text); min-width: 5em; box-shadow: 0 .2em 0 var(--ink), inset 0 .1em 0 rgba(255, 255, 255, .2); }
.lk-chip.on { --c: var(--yellow); --cd: var(--yellow-d); --tc: var(--ink); }
.lk-chip small { font-family: var(--font-ui); font-weight: 800; font-size: .78em; opacity: .8; letter-spacing: .03em; }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6em, 1fr)); gap: .65em; margin-top: .6em; }
.landscape .lk-grid { grid-template-columns: repeat(auto-fill, minmax(8.6em, 1fr)); gap: .75em; }
.lk-tile .thumb-paint img, .lk-tile .thumb-pose img { transform: scale(1.15); transform-origin: 50% 62%; }
.landscape .lk-name { font-size: .78em; }
.portrait .lk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lk-tile { --rc: #B9ACD6; position: relative; display: flex; flex-direction: column; align-items: center; gap: .3em; min-width: 0; padding: .4em .4em .45em; border-radius: .9em; background: rgba(21, 12, 42, .78);
    border: .15em solid var(--ink); box-shadow: 0 .2em 0 var(--ink); cursor: pointer; transition: transform .12s var(--ease-spring); }
.lk-tile:hover { transform: translateY(-.1em) scale(1.03); }
.lk-tile .thumb { width: 100%; height: auto; aspect-ratio: 1; }
.lk-name { max-width: 100%; font-size: .72em; font-weight: 800; text-align: center; color: var(--text); }
.lk-tile.on { border-color: var(--green); box-shadow: 0 .2em 0 var(--ink), 0 0 .9em rgba(91, 227, 125, .5); }
.lk-eq { position: absolute; top: -.45em; right: -.45em; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: var(--ink); border: .13em solid var(--ink); z-index: 2; }
.lk-eq .ico { display: inline-flex; width: 70%; height: 70%; } .lk-eq .ico svg { width: 100%; height: 100%; }

/* ---- FX layer ---- */
.fx-confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 110; pointer-events: none !important; }
.fly-text { position: absolute; z-index: 120; display: flex; align-items: center; gap: .25em; pointer-events: none !important; font-family: var(--font-display); font-size: clamp(16px, 3cqmin, 38px); color: #fff;
    -webkit-text-stroke: .1em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); animation: flyUp 1.3s cubic-bezier(.2, .7, .3, 1) both; white-space: nowrap; }
.fly-text .ri { width: 1.3em; height: 1.3em; } .fly-text b { font-weight: 400; }
.fly-text.bolts b { color: var(--yellow); } .fly-text.xp b { color: #7ddcf9; } .fly-text.pass b { color: #c9a6ff; }
@keyframes flyUp { 0% { transform: translate(-50%, 0) scale(.4); opacity: 0; } 15% { transform: translate(-50%, -.6em) scale(1.25); opacity: 1; } 30% { transform: translate(-50%, -1em) scale(1); } 100% { transform: translate(-50%, -3.4em) scale(1); opacity: 0; } }
.fx-rise { animation: fxRise .5s var(--ease-spring) both; }
@keyframes fxRise { from { transform: translateY(1em) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- celebration popups ---- */
.fx-modal { isolation: isolate; width: min(94%, 30em); overflow: visible; }
.fx-modal.fx-level { width: min(94%, 26em); }
.fx-rays { position: absolute; z-index: -1; left: 50%; top: 40%; width: 90em; height: 90em; margin: -45em 0 0 -45em; pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(255, 210, 63, .22) 0 6deg, transparent 6deg 18deg); animation: spin 26s linear infinite;
    -webkit-mask-image: radial-gradient(circle, #000 0, transparent 38%); mask-image: radial-gradient(circle, #000 0, transparent 38%); }
.fx-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: .7em; text-align: center; min-width: 0; }
.fx-title { font-size: 2.4em !important; line-height: 1.05; margin: 0; }
.fx-sub { font-weight: 800; color: var(--text-dim); min-height: 1em; font-size: .9em; } .fx-sub.wide { max-width: 24em; line-height: 1.25; text-wrap: balance; }
.fx-badgewrap { padding: .4em; }
.fx-rewards { display: flex; flex-wrap: wrap; gap: .7em; justify-content: center; align-items: center; min-height: 3em; }
.fx-item { display: flex; flex-direction: column; align-items: center; gap: .2em; max-width: 12em; } .fx-item .thumb { width: 5.4em; height: 5.4em; } .fx-item b { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; }
.fx-item small { color: var(--text-dim); font-size: .8em; font-weight: 800; }
.fx-body > .btn, .fx-btns .btn { min-width: 11em; }
.fx-btns { display: flex; gap: .6em; flex-wrap: wrap; justify-content: center; }
.fx-unlocks { display: flex; flex-wrap: wrap; gap: .8em; justify-content: center; max-width: 100%; }
.fx-unlock { --rc: #B9ACD6; display: flex; flex-direction: column; align-items: center; gap: .3em; min-width: 0; }
.fx-unlock .cp { width: 13em; height: 12em; border-radius: 1em; border: .17em solid var(--rc); overflow: hidden; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rc) 55%, #1b0e34), #120a26 75%); box-shadow: 0 0 1.4em color-mix(in srgb, var(--rc) 55%, transparent); }
.fx-unlock .cp.md { width: 8.5em; height: 8em; }
.fx-uname { font-size: 1.25em; color: var(--rc); text-shadow: 0 .08em 0 var(--ink); max-width: 11em; }
.fx-utype { color: var(--text-dim); font-weight: 800; letter-spacing: .04em; } .fx-udup { color: var(--yellow); font-weight: 800; }
.fx-lines { display: flex; flex-direction: column; align-items: center; gap: .55em; }
.fx-line { display: flex; align-items: center; gap: .6em; } .fx-line .rchip { font-size: 1.15em; } .fx-line-l { color: var(--text-dim); font-size: .85em; font-weight: 800; }
.short .tr-rw { min-height: 5.2em; }
.short .fx-title { font-size: 1.7em !important; } .short .fx-badgewrap .lvl-badge.xl { width: 5em; height: 5em; } .short .fx-badgewrap .lvl-badge.xl b { font-size: 2em; }
.short .fx-unlock .cp { width: 9em; height: 7.5em; }
.short .fx-body { gap: .4em; }

/* confirm purchase */
.confirm-modal { width: min(94%, 34em); }
.cf-title { font-size: 1.9em !important; }
.cf-body { --rc: #B9ACD6; display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 1em; align-items: center; }
.portrait .cf-body { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.cf-prev .cp { width: 11em; height: 10em; border-radius: 1em; border: .17em solid var(--rc); overflow: hidden; background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rc) 50%, #1b0e34), #120a26 75%); }
.short .cf-prev .cp { width: 8em; height: 7em; } .short .cf-body { grid-template-columns: 8em minmax(0, 1fr); }
.cf-info { display: flex; flex-direction: column; gap: .5em; min-width: 0; width: 100%; }
.cf-name { font-size: 1.4em; color: var(--rc); text-shadow: 0 .08em 0 var(--ink); }
.cf-type { color: var(--text-dim); font-weight: 800; }
.cf-bal { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.cf-bal > div { display: flex; flex-direction: column; gap: .15em; padding: .4em .6em; border-radius: .8em; background: rgba(12, 6, 26, .6); border: .12em solid var(--ink); }
.cf-bal span { font-size: .72em; color: var(--text-dim); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.cf-bal b { display: flex; align-items: center; justify-content: center; gap: .3em; font-family: var(--font-display); font-weight: 400; color: var(--yellow); font-size: 1.1em; }
.cf-btns { display: flex; gap: .7em; justify-content: center; flex-wrap: wrap; } .cf-btns .btn { flex: 1 1 8em; }

/* login gift */
.login-modal { width: min(94%, 44em); }
.lg-title { font-size: 2.2em !important; }
.lg-sub { text-align: center; color: var(--text-dim); font-weight: 800; margin-top: -.3em; }
.lg-body { padding-top: .7em !important; }
.lg-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5em; }
.portrait .lg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .portrait .lg-day.big { grid-column: span 2; }
.lg-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; min-height: 7.6em; padding: .5em .2em; min-width: 0;
    border-radius: .9em; background: rgba(12, 6, 26, .6); border: .15em solid var(--ink); box-shadow: 0 .2em 0 var(--ink); }
.lg-n { font-family: var(--font-display); font-size: .72em; letter-spacing: .06em; color: var(--text-dim); max-width: 100%; }
.lg-rw { display: flex; flex-direction: column; align-items: center; gap: .25em; min-width: 0; max-width: 100%; font-family: var(--font-display); color: var(--yellow); }
.lg-rw .ri { width: 2em; height: 2em; } .lg-rw .thumb { width: 3.6em; height: 3.6em; } .lg-rw small { font-size: .62em; font-weight: 800; text-align: center; max-width: 100%; }
.lg-day.big { background: linear-gradient(180deg, rgba(120, 70, 190, .7), rgba(40, 20, 76, .8)); border-color: var(--purple); }
.lg-day.current { border-color: var(--yellow); background: linear-gradient(180deg, rgba(255, 210, 63, .25), rgba(12, 6, 26, .6)); z-index: 1; }
.lg-day.current.hl { animation: lgPulse 1.1s ease-in-out infinite; }
@keyframes lgPulse { 50% { transform: scale(1.07); box-shadow: 0 .2em 0 var(--ink), 0 0 1.1em rgba(255, 210, 63, .7); } }
.lg-day.claimed:not(.current) { opacity: .6; }
.lg-check { position: absolute; top: -.4em; right: -.4em; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--green); color: var(--ink); border: .13em solid var(--ink); display: none; place-items: center; }
.lg-check svg { width: 70%; height: 70%; }
.lg-day.claimed:not(.current) .lg-check, .lg-day.got .lg-check { display: grid; }
.lg-day.got { animation: claimPop .7s var(--ease-spring); }
.short .lg-day { min-height: 5.6em; } .short .login-modal .lg-title { font-size: 1.6em !important; }

@media (prefers-reduced-motion: reduce) {
    .fx-rays, .lvl-badge.xl .lvl-gear, .gift-banner, .mcard.ready { animation: none; }
}

.fx-modal { display: flex; max-height: 96%; }
.fx-body { min-height: 0; max-height: 100%; }
.fx-unlocks { overflow-y: auto; min-height: 0; padding: .4em; margin: -.4em; scrollbar-width: thin; touch-action: pan-y; }
.fx-modal.fx-unlocked.multi { width: min(94%, 40em); }
.fx-unlocked.multi .fx-title { font-size: 1.8em !important; }
.short .cf-prev .cp-inset { width: 38%; }

/* ---- rewarded ads (opt-in; DESIGN.md 15.8) ---- */
.bv-tag { flex: none; display: inline-flex; align-items: center; gap: .2em; padding: .05em .4em .05em .2em; border-radius: 1em; background: var(--ink); color: #fff; font-size: .62em; line-height: 1.3; letter-spacing: .06em; }
.bv-tag b { font-family: var(--font-display); font-weight: 400; }
.bv-tag .bv-ico { display: inline-flex; width: 1.5em; height: 1.5em; } .bv-tag .bv-ico svg { width: 100%; height: 100%; display: block; }
.btn.bvbtn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-width: 44px; width: max-content; transition: opacity .3s; }
/* No percentage max-widths inside the button: `.btn > span { max-width: 100% }` is a cyclic percentage in a shrink-to-fit parent,
   which some engines (Safari / Firefox / mobile webviews) resolve to 0, collapsing the AD badge + label into an empty yellow square. */
.btn.bvbtn > span, .btn.bvbtn .bv-l, .btn.bvbtn .bv-sub { max-width: none; }
.btn.bvbtn > .bv-tag { display: inline-flex; flex: none; }
.btn.bvbtn .bv-txt { display: flex; flex-direction: column; align-items: flex-start; flex: none; line-height: 1.05; }
.btn.bvbtn .bv-l { white-space: nowrap; }
.btn.bvbtn .bv-sub { font-size: .62em; font-weight: 700; opacity: .85; white-space: nowrap; }
.btn.bvbtn.bv-wait { opacity: 0; pointer-events: none; }
.btn.bvbtn.round { padding: .4em; border-radius: 50%; aspect-ratio: 1; position: relative; }
.btn.bvbtn.round .bv-tag { position: absolute; right: -.5em; bottom: -.45em; font-size: .5em; }
.btn.bvbtn.round .ico { display: flex; width: 1.3em; height: 1.3em; } .btn.bvbtn.round .ico svg { width: 100%; height: 100%; }
.mc-actions .btn.bvbtn.reroll { font-size: .8em; padding: .25em .6em; gap: .35em; } .btn.bvbtn.reroll .ico { display: flex; width: 1.3em; height: 1.3em; } .btn.bvbtn.reroll .ico svg { width: 100%; height: 100%; }
.pill .bv-tag { font-size: .8em; margin-left: .3em; }
.shop-crate { display: flex; align-items: center; gap: .8em; padding: .55em .9em; margin-bottom: .7em; border-radius: 1em; border: .17em solid var(--yellow); background: linear-gradient(90deg, rgba(255, 210, 63, .18), rgba(155, 92, 255, .16)); box-shadow: 0 .22em 0 var(--ink); }
.shop-crate .ri { flex: none; width: 2.4em; height: 2.4em; } .shop-crate .ri svg { width: 100%; height: 100%; }
.shop-crate .sb-t { flex: 1; display: flex; flex-direction: column; min-width: 0; } .shop-crate b { font-size: 1.05em; } .shop-crate .sb-t span { color: var(--text-dim); font-size: .86em; }
.shop-crate .crate-ok { flex: none; width: 1.6em; height: 1.6em; color: var(--green); } .shop-crate .crate-ok svg { width: 100%; height: 100%; }
.shop-crate > .btn { font-size: .9em; flex: none; max-width: 58%; }
.shop-crate > .btn.bvbtn .bv-txt { min-width: 0; overflow: hidden; }
.shop-crate.done { border-color: rgba(255, 255, 255, .25); background: rgba(21, 12, 42, .6); box-shadow: none; filter: saturate(.6); }
.lg-btns { display: flex; align-items: stretch; gap: .6em; }
.lg-btns > .btn:first-child { flex: 3 1 0; min-width: 0; } .lg-btns > .btn.bvbtn { flex: 2 1 0; font-size: .9em; padding: .3em .5em; }
.rw-bv { display: flex; align-items: center; justify-content: space-between; gap: .6em; min-height: 2em; min-width: 0; }
.rw-bv .btn.bvbtn { font-size: .8em; padding: .25em .8em; }
.rw-bv .rw-bv-note { color: var(--text-dim); font-size: .8em; font-weight: 700; min-width: 0; flex: 1; text-align: left; white-space: nowrap; }
.rw-bv.done .rw-bv-note { color: var(--yellow); font-family: var(--font-display); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .btn.bvbtn { transition: none; } }
.rw-bv { transition: opacity .3s; } .rw-bv.bv-hold { opacity: 0; pointer-events: none; }

/* ---- limited-time event (data/events.js): menu ribbon + missions-tab hunt ---- */
.menu-ribbon { position: absolute; top: -.8em; left: .5em; display: inline-flex; align-items: center; gap: .3em; padding: .12em .6em .12em .3em; border-radius: 1em; font-style: normal; transform: rotate(-4deg);
    background: linear-gradient(180deg, #ff9a3c, #e8620f); border: .17em solid var(--ink); box-shadow: 0 .14em 0 var(--ink); pointer-events: none; white-space: nowrap; }
.menu-ribbon .ico { display: inline-flex; width: 1.35em; height: 1.35em; } .menu-ribbon .ico svg { width: 100%; height: 100%; filter: none; }
.menu-ribbon b { font-family: var(--font-display); font-size: .6em; letter-spacing: .08em; color: #fff; text-shadow: 0 .09em 0 var(--ink); }
.ev-section { --evc: #ff8a2b; margin-bottom: .6em; padding: .7em; border-radius: 1.1em; border: .17em solid var(--evc); box-shadow: 0 .22em 0 var(--ink), 0 0 1.1em color-mix(in srgb, var(--evc) 35%, transparent);
    background: radial-gradient(120% 90% at 10% 0%, rgba(255, 138, 43, .2), transparent 60%), linear-gradient(180deg, rgba(48, 20, 64, .95), rgba(24, 10, 40, .95)); }
.ev-head { display: flex; align-items: center; gap: .8em; flex-wrap: wrap; margin-bottom: .6em; }
.ev-ico { flex: none; } .ev-ico .ri { width: 3.2em; height: 3.2em; display: block; animation: giftWobble 3s ease-in-out infinite; } .ev-ico .ri svg { width: 100%; height: 100%; }
.ev-titles { flex: 1 1 10em; min-width: 0; }
.ev-tag { font-family: var(--font-display); font-size: .66em; letter-spacing: .16em; color: var(--evc); text-shadow: 0 .08em 0 var(--ink); }
.ev-title { font-size: 1.4em; line-height: 1.05; color: #ffd9a8; -webkit-text-stroke: .08em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); }
.ev-sub { font-size: .82em; color: var(--text-dim); line-height: 1.25; text-wrap: balance; }
.ev-side { display: flex; gap: .4em; flex-wrap: wrap; }
.ev-count { color: var(--evc); font-family: var(--font-display); }
.mgrid.evgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portrait .mgrid.evgrid { grid-template-columns: minmax(0, 1fr); }
.short.landscape .mgrid.evgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mcard.evc { --dc: var(--rc, #ff8a2b); }
.evc-row { display: flex; gap: .7em; align-items: stretch; min-width: 0; }
.evc-item { flex: none; width: 4.6em; display: flex; flex-direction: column; align-items: center; gap: .25em; padding: .3em .2em .25em; border-radius: .8em; background: rgba(12, 6, 26, .6); border: .13em solid var(--rc, var(--ink)); }
.evc-item .cthumb, .evc-item > *:first-child { width: 100%; }
.evc-item small { max-width: 100%; font-size: .62em; font-weight: 800; color: var(--rc, var(--text-dim)); text-align: center; line-height: 1.1; }
.evc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3em; justify-content: center; }
.evc-main .mc-text { min-height: 0; }
.mcard.evc.ready { border-color: var(--rc, var(--yellow)); }
.mcard.evc .bar { --dc: var(--evc, #ff8a2b); }

.fx-usub { color: var(--text); font-weight: 700; font-size: .85em; text-align: center; opacity: .9; }

/* five tabs (event running) on a narrow stage: only the open tab keeps its label, the others shrink to their icon */
@container stage (max-width: 560px) {
    .pg-tabs.has-event { display: flex; }
    .pg-tabs.has-event .pg-tab { flex: 1 1 0; }
    .pg-tabs.has-event .pg-tab.on { flex: 2.6 1 0; }
    .pg-tabs.has-event .pg-tab:not(.on) > span.fit { display: none; }
}

/* pass header on narrow landscape stages: two rows (title / tier on top, bar below) so the title keeps its width */
@container stage (max-width: 760px) {
    .landscape .pass-head { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ico main tier all" "bar bar bar all"; }
}

/* online builds: progression is server-owned; while the server is unreachable the hub is read-only from the cache */
.pg-offline { margin: .2em auto .3em; padding: .35em .9em; max-width: 40em; border-radius: .7em; text-align: center; font-size: .85em; line-height: 1.25;
    color: var(--text); background: rgba(255, 210, 63, .14); border: .1em solid var(--yellow); }