/* Lock and Lay — the battle pass (#1912), both clients: the Reward Road in the Gem Store's look. An indigo stage, a
   header plate with the tier badge and the bar, three rows (Free indigo, Supporter gold, Super pink) under 30 tier
   columns that scroll sideways, reward tiles on their tier's colours (gems.css .t-*), slab buttons, and the claim pop. */
.t-free { --t1: #cfd6ff; --t2: #6f7bd6; --t3: #2c3290; --tb: #e2e6ff; --tl: #dfe3ff; --tg: rgba(111, 123, 214, .5); }
.bpass { --bp-navy: #0a0c33; --bp-pad: 22px; position: relative; display: flex; flex-direction: column; min-height: 100%; margin: -12px -14px -40px; color: #fff; font-family: var(--sans);
  background-color: #130f45; background-image: radial-gradient(90% 460px at 50% 0, #4b38d8 0%, rgba(75, 56, 216, 0) 100%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 16px, transparent 16px 32px), linear-gradient(180deg, #241b7c, #130f45 900px); }
.bpass :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.bpass h3, .bpass h4 { margin: 0; font: 400 20px/1.05 var(--gmf); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); color: #fff; }
.bp-empty { padding: 60px 20px; text-align: center; font: 400 22px var(--gmf); }

/* the slab buttons (gold spends nothing here: it's the membership) */
.bp-slab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 12px; cursor: pointer; font: 400 17px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase;
  color: #3d2600; background: linear-gradient(180deg, #ffe37d, #f7b21a); box-shadow: 0 4px 0 #9c5a05, inset 0 2px 0 rgba(255, 255, 255, .6); }
.bp-slab:hover { filter: brightness(1.06); } .bp-slab:active { transform: translateY(3px); box-shadow: 0 1px 0 #9c5a05; }
.bp-slab.green { color: #fff; background: linear-gradient(180deg, #63d77f, #2f9c4f); box-shadow: 0 4px 0 #1b5e30, inset 0 2px 0 rgba(255, 255, 255, .35); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.bp-slab.pink { color: #fff; background: linear-gradient(180deg, #ff8fd0, #e0389b); box-shadow: 0 4px 0 #8a1459, inset 0 2px 0 rgba(255, 255, 255, .4); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.bp-slab.sm { min-height: 34px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.bp-slab b { padding: 2px 8px; border-radius: 8px; background: rgba(0, 0, 0, .22); font: inherit; }
.bp-slab:disabled { opacity: .6; cursor: default; }

/* the header plate */
.bp-top { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 14px var(--bp-pad); background: linear-gradient(180deg, #5340e0, #3527ad); box-shadow: 0 4px 0 rgba(0, 0, 0, .3); flex-wrap: wrap; }
.bp-lvl { position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; transform: rotate(-6deg); font: 400 30px/1 var(--gmf); color: #3d2600; text-shadow: 0 2px 0 rgba(255, 255, 255, .45);
  background: radial-gradient(circle at 35% 30%, #ffe37d, #f79812 60%, #9c4005); box-shadow: 0 5px 0 #6b3a05, inset 0 0 0 3px rgba(255, 255, 255, .25); }
.bp-lvl small { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(6deg); padding: 3px 7px; border-radius: 7px; background: var(--bp-navy); color: #fff; font: 400 11px var(--gmf); letter-spacing: .08em; text-shadow: none; text-transform: uppercase; }
.bp-title { flex: 1 1 220px; min-width: 0; } .bp-title h3 { font-size: 30px; }
.bp-title small { display: block; margin-top: 4px; font: 500 13px var(--sans); color: rgba(255, 255, 255, .8); }
.bp-bar { flex: 1 1 280px; max-width: 440px; }
.bp-track { height: 22px; border-radius: 12px; background: var(--bp-navy); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .5), 0 0 0 2px #8f9dff; overflow: hidden; }
.bp-track i { display: block; height: 100%; min-width: 22px; border-radius: 12px; background: linear-gradient(180deg, #9df7c0, #22c26b); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5); transition: width .6s cubic-bezier(.2, .9, .3, 1.2); }
.bp-bar-l { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; font: 500 12px var(--sans); color: rgba(255, 255, 255, .82); }
.bp-clock { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--bp-navy); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .45), 0 0 0 2px #8f9dff; font: 400 16px var(--gmf); letter-spacing: .04em; }

/* the road: row headers, then the tier columns */
.bp-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; padding: 20px var(--bp-pad) 10px; align-items: start; }
.bp-road { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; min-width: 0; }
.bp-rows, .bp-col { display: grid; grid-template-rows: 40px repeat(3, 132px); gap: 14px; }
.bp-rowh { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 14px; border-radius: 14px; }
.bp-rowh.spacer { visibility: hidden; }
.bp-rowh b { font: 400 20px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.bp-rowh small { font: 500 12px var(--sans); opacity: .85; }
.bp-rowh.r-free { background: linear-gradient(180deg, #3a35a8, #26227a); box-shadow: 0 4px 0 #120f4a; }
.bp-rowh.r-sup { color: #3d2600; background: linear-gradient(180deg, #ffd35a, #e08a08); box-shadow: 0 4px 0 #7a3f04; } .bp-rowh.r-sup b { text-shadow: 0 2px 0 rgba(255, 255, 255, .45); }
.bp-rowh.r-super { background: linear-gradient(180deg, #ff6fc1, #b4237b); box-shadow: 0 4px 0 #5e0f3f; }
.bp-rowh .bp-lock { top: 10px; right: 10px; }
.bp-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; padding: 0 4px 16px 2px; scrollbar-width: thin; scrollbar-color: #8f9dff transparent; }
.bp-cols { display: flex; gap: 12px; width: max-content; padding: 0 30px 0 2px; }
.bp-col { width: 122px; }
.bp-num { display: grid; place-items: center; border-radius: 12px; background: var(--bp-navy); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .45); font: 400 22px var(--gmf); }
.bp-col.past .bp-num { color: #9df7c0; }
.bp-col.now .bp-num { color: #073d1f; background: linear-gradient(180deg, #9df7c0, #22c26b); box-shadow: 0 4px 0 #0d5e2f; }
.bp-col.next .bp-num { box-shadow: inset 0 3px 0 rgba(0, 0, 0, .45), 0 0 0 2px #8f9dff; }

/* a reward tile */
.bp-cell { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: visible; isolation: isolate;
  background: radial-gradient(circle at 50% 35%, var(--t1), var(--t2) 62%, var(--t3)); box-shadow: 0 4px 0 var(--t3), inset 0 0 0 2px rgba(255, 255, 255, .18), 0 0 18px -4px var(--tg); }
.bp-cell.bp-none { background: none; box-shadow: none; border: 2px dashed rgba(255, 255, 255, .12); }
.bp-col > * { min-width: 0; } .bp-cell { min-width: 0; width: 100%; } .bp-cell > .bp-art, .bp-cell > .bp-pile, .bp-cell > .bp-gift { width: 100%; }
.bp-cell > .bp-art, .bp-cell > .bp-pile, .bp-cell > .bp-gift { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; border-radius: 14px 14px 0 0; }
.bp-art > * { transform: scale(.82); } .bp-art .gm-prop { width: 150%; max-width: none; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .3)); }
.bp-art .gm-ctx { transform: scale(.6); max-width: 160%; } .bp-art .gm-card { transform: scale(.62) rotate(-4deg); width: 150%; } .bp-art .gm-ring { margin: 0; transform: scale(.72); }
.bp-pile svg, .bp-pile .gm-art { width: 72%; height: auto; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
.bp-gift > * { transform: scale(.7); }
.bp-band { position: relative; z-index: 1; display: block; padding: 5px 6px 7px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .4)); text-align: center; }
.bp-band b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 11px/1.15 var(--sans); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.bp-band .bp-gems { display: inline-flex; align-items: center; gap: 4px; font: 400 18px/1 var(--gmf); letter-spacing: .02em; }
.bp-gems .gem-c { width: 18px; height: 16px; }
.bp-cell.got::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 14px; background: rgba(10, 12, 51, .5); }
.bp-cell.later { filter: saturate(.75) brightness(.92); }
.bp-cell.locked { filter: saturate(.55) brightness(.8); }
.bp-cell.ready { box-shadow: 0 4px 0 var(--t3), 0 0 0 3px #fff, 0 0 26px 2px var(--tg); animation: bp-ready 1.6s ease-in-out infinite; }
@keyframes bp-ready { 50% { transform: translateY(-3px); box-shadow: 0 7px 0 var(--t3), 0 0 0 3px #fff, 0 0 34px 6px var(--tg); } }
.bp-ck { position: absolute; z-index: 3; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; background: #22c26b; box-shadow: 0 2px 0 #0d5e2f; }
.bp-ck::before { content: ''; position: absolute; left: 8px; top: 7px; width: 10px; height: 5px; border: 3px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.bp-lock { position: absolute; z-index: 3; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 8px; background: var(--bp-navy, #0a0c33); box-shadow: 0 0 0 2px #ffd36b; }
.bp-lock::before { content: ''; position: absolute; left: 8px; top: 12px; width: 10px; height: 8px; border-radius: 2px; background: #ffd36b; }
.bp-lock::after { content: ''; position: absolute; left: 9px; top: 5px; width: 6px; height: 7px; border: 2px solid #ffd36b; border-bottom: 0; border-radius: 5px 5px 0 0; }
.bp-claim { position: absolute; z-index: 4; left: 50%; bottom: -14px; transform: translateX(-50%); min-height: 30px; padding: 0 14px; border: 0; border-radius: 9px; cursor: pointer; font: 400 14px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #63d77f, #2f9c4f); box-shadow: 0 3px 0 #1b5e30, inset 0 2px 0 rgba(255, 255, 255, .35); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.bp-claim:hover { filter: brightness(1.08); } .bp-claim:disabled { opacity: .6; }

/* the side cards */
.bp-side { display: flex; flex-direction: column; gap: 14px; }
.bp-card { padding: 16px; border-radius: 18px; background: linear-gradient(180deg, #2c2391, #1a1560); box-shadow: 0 5px 0 #0b0838, inset 0 0 0 2px rgba(255, 255, 255, .08); }
.bp-card h4 { margin-bottom: 10px; } .bp-card h4 small { display: block; margin-top: 4px; font: 500 12px var(--sans); text-transform: none; letter-spacing: 0; text-shadow: none; color: rgba(255, 255, 255, .7); }
.bp-card ul { margin: 0 0 12px; padding-left: 18px; font: 500 13px/1.5 var(--sans); } .bp-card p { margin: 0 0 10px; font: 500 13px/1.45 var(--sans); color: rgba(255, 255, 255, .85); }
.bp-up { background: linear-gradient(160deg, #ff6fc1, #7a2bd6 70%); box-shadow: 0 5px 0 #3b0c63; }
.bp-up-btns { display: flex; gap: 10px; } .bp-up-btns .bp-slab { flex: 1; }
.bp-mine.super { background: linear-gradient(160deg, #ff6fc1, #f7b21a); box-shadow: 0 5px 0 #7a3f04; }
.bp-chl { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 10px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.bp-chl-t { flex: 1; min-width: 0; } .bp-chl-t b { display: block; font: 700 13px/1.25 var(--sans); }
.bp-chl-t small { font: 500 11.5px var(--sans); color: rgba(255, 255, 255, .7); }
.bp-pp { display: block; height: 7px; margin: 6px 0 3px; border-radius: 5px; background: var(--bp-navy, #0a0c33); overflow: hidden; } .bp-pp i { display: block; height: 100%; background: #22c26b; }
.bp-xp { flex: none; font: 400 15px var(--gmf); color: #9df7c0; }
.bp-chl.done { background: rgba(34, 194, 107, .18); } .bp-chl.done .bp-xp { color: #fff; }
.bp-giftc { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, #ffb341, #e05a1a); box-shadow: 0 5px 0 #7a2c04; }
.bp-gift.sm { flex: none; width: 70px; height: 70px; display: grid; place-items: center; } .bp-gift.sm > * { transform: scale(.55); }
.bp-foot { margin: 6px var(--bp-pad) 26px; font: 500 12px/1.5 var(--sans); color: rgba(255, 255, 255, .6); }

/* the top bar chip */
.bp-chip { display: inline-flex; align-items: center; gap: 6px; } .bp-chip-t { font: 400 12px var(--gmf); letter-spacing: .06em; text-transform: uppercase; }
.bp-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c26b; box-shadow: 0 0 0 2px #fff, 0 0 8px #22c26b; animation: bp-dot 1.2s ease-in-out infinite; } @keyframes bp-dot { 50% { transform: scale(1.3); } }

/* the claim pop */
.bp-cel { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(10, 12, 51, 0); transition: background .25s; cursor: pointer; }
.bp-cel.on { background: rgba(10, 12, 51, .62); }
.bp-cel-in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; transform: scale(.3); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .2s; text-align: center; }
.bp-cel.on .bp-cel-in { transform: none; opacity: 1; }
.bp-rays { position: absolute; left: 50%; top: 110px; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: -1; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 236, 149, .32) 0 10deg, transparent 10deg 20deg); mask-image: radial-gradient(circle, #000 20%, transparent 68%); animation: bp-spin 9s linear infinite; }
@keyframes bp-spin { to { transform: rotate(360deg); } }
.bp-cel-tile { position: relative; display: grid; place-items: center; width: 220px; height: 220px; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 35%, var(--t1), var(--t2) 62%, var(--t3)); box-shadow: 0 8px 0 var(--t3), 0 0 0 4px #fff, 0 0 60px 10px var(--tg); }
.bp-cel-tile > * { position: absolute; inset: 0; display: grid; place-items: center; } .bp-cel-tile .bp-art > * { transform: scale(1.3); }
.bp-cel h3 { margin-top: 14px; font: 400 40px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .4); }
.bp-cel p { margin: 0; max-width: 340px; font: 700 16px/1.35 var(--sans); color: #fff; text-shadow: 0 2px 3px rgba(0, 0, 0, .5); }

/* narrow (a phone, a small window): the side cards under the road, smaller rows */
@media (max-width: 900px) {
  .bpass { --bp-pad: 14px; }
  .bp-main { grid-template-columns: minmax(0, 1fr); }
  .bp-top { gap: 10px; padding: 12px var(--bp-pad); } .bp-title h3 { font-size: 22px; } .bp-lvl { width: 50px; height: 50px; font-size: 24px; border-radius: 14px; }
  .bp-bar { order: 3; flex-basis: 100%; max-width: none; } .bp-bar-l span + span { display: none; }
  .bp-road { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
  .bp-rows, .bp-col { grid-template-rows: 34px repeat(3, 104px); gap: 12px; }
  .bp-col { width: 96px; } .bp-rowh { padding: 8px; } .bp-rowh b { font-size: 14px; } .bp-rowh small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bp-cell.ready, .bp-dot, .bp-rays { animation: none; } .bp-track i { transition: none; } }
/* v2 (#1912 pictures): the Claim button on the tile's top edge so the name below stays readable; the upgrade buttons
   one per line; the gift card's box in its own square; on the phone the header scrolls with the page (the Shop's own
   bar is the sticky one there) */
.bp-claim { top: -14px; bottom: auto; }
.bp-up-btns { flex-direction: column; } .bp-up-btns .bp-slab { width: 100%; }
.bp-giftc { align-items: center; } .bp-gift.sm { position: relative; width: 76px; height: 76px; overflow: hidden; border-radius: 14px; background: rgba(0, 0, 0, .18); }
.bp-gift.sm > * { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; transform: scale(.6); }
.bp-giftc > div { flex: 1; min-width: 0; } .bp-giftc h4 { margin-bottom: 4px; }
body.mobile .bp-top { position: static; }

/* v3 (#1912 follow-up): easier to get around, cleaner. The tier strip over the road: an arrow each side, a pip a tier
   (gold where you are, green where something waits, lit while it's on screen), and jumps to what's waiting, now, the
   last tier. Slimmer row labels, quieter empty slots, a shorter side. */
.bp-road { grid-template-columns: 112px minmax(0, 1fr); row-gap: 10px; }
.bp-nav { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 16px; background: rgba(10, 12, 51, .55); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .35); }
.bp-arrow { flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; cursor: pointer; font: 400 30px/1 var(--gmf); color: #fff; background: linear-gradient(180deg, #6c5cf0, #4b38d8); box-shadow: 0 3px 0 #241b7c; }
.bp-arrow:hover:not(:disabled) { filter: brightness(1.12); } .bp-arrow:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #241b7c; }
.bp-arrow:disabled { opacity: .3; cursor: default; }
.bp-pips { flex: 1; min-width: 0; display: flex; gap: 3px; }
.bp-pip { flex: 1; min-width: 0; height: 26px; padding: 0; border: 0; border-radius: 7px; cursor: pointer; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75); font: 400 12px/26px var(--gmf); transition: background .15s, transform .15s; }
.bp-pip:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.bp-pip.past { background: rgba(157, 247, 192, .28); color: #fff; }
.bp-pip.seen { box-shadow: inset 0 -3px 0 #8f9dff; }
.bp-pip.now { background: linear-gradient(180deg, #ffe37d, #f79812); color: #3d2600; }
.bp-pip.claim { background: linear-gradient(180deg, #63d77f, #2f9c4f); color: #fff; animation: bp-dot 1.4s ease-in-out infinite; }
.bp-jumps { flex: none; display: flex; gap: 6px; }
.bp-jump { height: 32px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer; font: 400 14px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .12); }
.bp-jump:hover { background: rgba(255, 255, 255, .22); } .bp-jump.claim { background: linear-gradient(180deg, #63d77f, #2f9c4f); box-shadow: 0 3px 0 #1b5e30; }
.bp-rowh { padding: 10px 12px; } .bp-rowh b { font-size: 17px; } .bp-rowh small { font-size: 11px; }
.bp-cell.bp-none { border: 2px dashed rgba(255, 255, 255, .05); }
.bp-foot { margin-top: 0; font-size: 11.5px; color: rgba(255, 255, 255, .5); }
@media (max-width: 900px) {
  .bp-road { grid-template-columns: 84px minmax(0, 1fr); }
  .bp-nav { flex-wrap: wrap; } .bp-arrow { display: none; } .bp-pips { order: 1; flex-basis: 100%; } .bp-pip { height: 22px; font-size: 10px; line-height: 22px; }
  .bp-jumps { order: 2; margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .bp-pip.claim { animation: none; } }

/* the call to action (#1912): the chip in gold and pink with a shine and a badge (NEW, or rewards waiting), the phone's
   chip where the date was, and the once-a-month invite card under the top bar */
.bp-chip { position: relative; }
.bp-chip.lit, #hud .gems-chip.bp-chip.lit { background: linear-gradient(135deg, #ffd35a, #ff6fc1 70%); color: #3d2600; box-shadow: 0 3px 0 #8a1459, 0 0 16px -2px rgba(255, 111, 193, .8); overflow: visible; }
.bp-chip.lit::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%) -150% 0 / 250% 100% no-repeat; animation: bp-shine 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes bp-shine { 60%, 100% { background-position: 150% 0; } }
.bp-badge { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e5293f; color: #fff; font: 400 12px/20px var(--gmf); font-style: normal; letter-spacing: .04em; text-align: center; box-shadow: 0 0 0 2px #fff, 0 2px 0 #7a0f1d; animation: bp-dot 1.4s ease-in-out infinite; }
.bp-badge.new { padding: 0 6px; }
.bp-chip.m { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #6c5cf0, #4b38d8); color: #fff; font: 400 14px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 3px 0 #241b7c; }
.bp-chip.m.hidden { display: none; } .bp-chip.m b { font: inherit; font-size: 16px; }
.bp-invite { position: fixed; z-index: 8500; left: 50%; top: 74px; width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, #5340e0, #b4237b); box-shadow: 0 6px 0 #241b7c, 0 20px 50px -10px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .15); transform: translate(-50%, -16px); opacity: 0; transition: transform .35s cubic-bezier(.2, 1.3, .4, 1), opacity .25s; }
.bp-invite.on { transform: translate(-50%, 0); opacity: 1; }
.bp-invite.m { top: 64px; flex-wrap: wrap; }
.bp-inv-lvl { flex: none; position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; transform: rotate(-6deg); font: 400 24px/1 var(--gmf); color: #3d2600; background: radial-gradient(circle at 35% 30%, #ffe37d, #f79812 60%, #9c4005); box-shadow: 0 4px 0 #6b3a05; }
.bp-inv-lvl small { position: absolute; bottom: -9px; padding: 2px 6px; border-radius: 6px; background: #0a0c33; color: #fff; font: 400 10px var(--gmf); letter-spacing: .06em; text-transform: uppercase; }
.bp-inv-t { flex: 1; min-width: 0; } .bp-inv-t b { display: block; font: 400 19px/1.15 var(--gmf); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.bp-inv-t span { display: block; margin-top: 4px; font: 500 13px/1.35 var(--sans); color: rgba(255, 255, 255, .9); }
.bp-inv-b { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: stretch; } .bp-invite.m .bp-inv-b { flex-direction: row; flex-basis: 100%; } .bp-invite.m .bp-inv-b > * { flex: 1; }
.bp-inv-x { min-height: 30px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .22); color: #fff; font: 600 13px var(--sans); cursor: pointer; } .bp-inv-x:hover { background: rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { .bp-chip.lit::after, .bp-badge { animation: none; } }
/* the phone: the chip lights like the desktop's; the tier strip is two rows of 15 (a touch-sized button rule made 30 in one row overflow) */
.bp-chip.m.lit { background: linear-gradient(135deg, #ffd35a, #ff6fc1 70%); color: #3d2600; box-shadow: 0 3px 0 #8a1459, 0 0 14px -2px rgba(255, 111, 193, .8); overflow: hidden; }
.bp-chip.m.lit { overflow: visible; } .bp-chip.m.lit::after { border-radius: 12px; }
body.mobile .bpass .bp-pips { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 3px; }
body.mobile .bpass .bp-pip { min-width: 0; min-height: 0; width: auto; height: 24px; }
body.mobile .bpass .bp-jump { min-height: 0; height: 32px; }
body.mobile .bpass .bp-pip { padding: 0 !important; width: 100% !important; min-width: 0 !important; font-size: 10px; line-height: 24px; }
/* the desktop invite sits at the foot of the screen, clear of the top bar's urgent banners (dying animals, a paused room) */
body:not(.mobile) .bp-invite { top: auto; bottom: 26px; transform: translate(-50%, 16px); }
body:not(.mobile) .bp-invite.on { transform: translate(-50%, 0); }

/* the PASS chip, v2 (Drew: "pass button needs to look much better"): a deep purple pill with a gold rim, a glossy ticket
   breaking out of its left edge, PASS over a thin bar to the next tier, the tier on a gold tile, the red badge; while a
   badge shows, the rim glows and a shine crosses it. Desktop top bar and the phone's. */
:root #hud .gems-chip.bp-chip, .bp-chip.m, :root #hud .gems-chip.bp-chip:hover { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 5px 0 40px; border: 0; border-radius: 999px; overflow: visible;
  background: linear-gradient(180deg, #4a2a9e, #2a145f); color: #fff; box-shadow: inset 0 0 0 2px #f0b544, inset 0 2px 0 rgba(255, 255, 255, .18), 0 3px 0 #170a38; font: 400 14px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; filter: none; }
:root #hud .gems-chip.bp-chip:hover, .bp-chip.m:hover { filter: brightness(1.12); }
.bp-chip.lit, :root #hud .gems-chip.bp-chip.lit, .bp-chip.m.lit { background: linear-gradient(180deg, #5a32c0, #2f166c); color: #fff; box-shadow: inset 0 0 0 2px #ffd35a, inset 0 2px 0 rgba(255, 255, 255, .2), 0 3px 0 #170a38, 0 0 18px -2px rgba(255, 196, 70, .85); animation: pc-glow 2s ease-in-out infinite; }
@keyframes pc-glow { 50% { box-shadow: inset 0 0 0 2px #ffe58a, inset 0 2px 0 rgba(255, 255, 255, .2), 0 3px 0 #170a38, 0 0 26px 2px rgba(255, 111, 193, .8); } }
.bp-chip .pc-tk { position: absolute; left: -6px; top: 50%; width: 42px; height: 32px; transform: translateY(-52%) rotate(-12deg); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); transition: transform .2s; }
.bp-chip .pc-tk svg { width: 100%; height: 100%; display: block; }
.bp-chip:hover .pc-tk { transform: translateY(-58%) rotate(-6deg) scale(1.06); }
.bp-chip.lit .pc-tk { animation: pc-wiggle 2.4s ease-in-out infinite; } @keyframes pc-wiggle { 0%, 70%, 100% { transform: translateY(-52%) rotate(-12deg); } 78% { transform: translateY(-58%) rotate(-4deg); } 86% { transform: translateY(-52%) rotate(-16deg); } }
.bp-chip .pc-txt { display: flex; flex-direction: column; gap: 4px; min-width: 38px; }
.bp-chip .pc-txt b { font: 400 14px/1 var(--gmf); letter-spacing: .06em; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.bp-chip .pc-bar { display: block; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .45); overflow: hidden; } .bp-chip .pc-bar i { display: block; height: 100%; min-width: 4px; border-radius: 3px; background: linear-gradient(90deg, #9df7c0, #22c26b); }
.bp-chip .pc-tier { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 5px; border-radius: 9px; background: radial-gradient(circle at 35% 30%, #ffe37d, #f79812 70%); color: #3d2600; font: 400 16px/1 var(--gmf); box-shadow: 0 2px 0 #8a4b05, inset 0 1px 0 rgba(255, 255, 255, .6); }
.bp-chip .bp-badge { top: -7px; right: -6px; }
.bp-chip::after, .bp-chip.lit::after { content: none; }
.bp-chip.m { height: 34px; padding-left: 36px; } .bp-chip.m .pc-tk { width: 36px; height: 28px; left: -4px; } .bp-chip.m .pc-tier { min-width: 24px; height: 24px; font-size: 14px; }
.bp-chip.m.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .bp-chip.lit, .bp-chip.lit .pc-tk { animation: none; } }

/* the tier strip, v2 (Drew: "make this cleaner"): one slim track instead of thirty boxes. A line filled green to your tier,
   a small dot a tier (gold where you are, green and pulsing where something waits), numbers every five under the line, a
   soft window over the tiers on screen, quiet arrows and jumps. */
.bp-nav { gap: 10px; padding: 8px 10px; background: rgba(10, 12, 51, .4); box-shadow: none; border-radius: 14px; }
.bp-arrow { width: 32px; height: 32px; border-radius: 10px; font-size: 22px; background: rgba(255, 255, 255, .1); box-shadow: none; }
.bp-arrow:hover:not(:disabled) { background: rgba(255, 255, 255, .2); filter: none; }
.bp-pips { display: none; }
.bp-track2 { position: relative; flex: 1; min-width: 0; height: 34px; margin: 0 8px; cursor: pointer; }
.bp-line { position: absolute; left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
.bp-line i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #22c26b, #9df7c0); }
.bp-view { position: absolute; top: 4px; height: 18px; margin-left: -6px; padding: 0 6px; box-sizing: content-box; border-radius: 9px; background: rgba(143, 157, 255, .16); box-shadow: inset 0 0 0 1.5px rgba(143, 157, 255, .5); pointer-events: none; transition: left .12s, width .12s; }
.bp-dot2 { position: absolute; top: 13px; width: 8px; height: 8px; min-height: 0; margin: -4px 0 0 -4px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, .35); transition: transform .15s; }
.bp-dot2:hover { transform: scale(1.6); }
.bp-dot2.past { background: #9df7c0; }
.bp-dot2.claim { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: #22c26b; box-shadow: 0 0 0 2px #fff, 0 0 10px #22c26b; animation: bp-dot 1.4s ease-in-out infinite; }
.bp-dot2.now { z-index: 1; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: radial-gradient(circle at 35% 30%, #ffe37d, #f79812 70%); box-shadow: 0 0 0 2px #fff, 0 2px 0 #8a4b05; }
.bp-tick { position: absolute; top: 21px; transform: translateX(-50%); font: 400 11px/1 var(--gmf); color: rgba(255, 255, 255, .55); pointer-events: none; }
.bp-jump { height: 30px; padding: 0 10px; font-size: 13px; background: transparent; color: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); }
.bp-jump:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.bp-jump.claim { color: #fff; background: linear-gradient(180deg, #63d77f, #2f9c4f); box-shadow: 0 2px 0 #1b5e30; }
@media (max-width: 900px) { .bp-track2 { order: 1; flex-basis: 100%; margin: 0 6px; } }
body.mobile .bpass .bp-dot2 { min-width: 0 !important; width: 8px !important; padding: 0 !important; }
body.mobile .bpass .bp-dot2.claim { width: 12px !important; } body.mobile .bpass .bp-dot2.now { width: 16px !important; }
@media (prefers-reduced-motion: reduce) { .bp-dot2.claim { animation: none; } .bp-view { transition: none; } }
body.mobile .bpass .bp-dot2 { min-height: 0 !important; height: 8px !important; }
body.mobile .bpass .bp-dot2.claim { height: 12px !important; } body.mobile .bpass .bp-dot2.now { height: 16px !important; }
body.mobile .bpass .bp-jump { min-width: 0; }

/* the phone's PASS chip on a narrow phone (#1993): cash and worth never shrink, so the full chip pushed the level off the edge
   and Settings off screen on anything under about 420px. Below that the chip is the ticket and the tier tile only (the glow
   and the NEW or count badge stay), and it never shrinks under the others. */
.bp-chip.m { flex: none; }
@media (max-width: 420px) { .bp-chip.m { gap: 0; padding-right: 5px; } .bp-chip.m .pc-txt { display: none; } .bp-chip.m .bp-badge { right: 0; } }

/* narrow (#2249): v3's label sizes above came after the narrow block and undid it, so on a phone each label was 116 px
   in its 84 px column and covered a third of tier 1. The narrow sizes again, and a label never spills out of its column. */
@media (max-width: 900px) {
  .bp-rowh { min-width: 0; padding: 8px 6px; overflow: hidden; } .bp-rowh b { font-size: 14px; letter-spacing: 0; } .bp-rowh small { display: none; }
  .bp-rowh .bp-lock { top: 6px; right: 6px; }
}