/* Locker Room + Motion Bucks additions to the shared top nav (motions-nav-v1.css), plus the two sheets any
   page can open from it: the Motion Bucks store and sign-in. Loaded after motions-nav-v1.css on every page
   that carries the nav. Behaviour: motions-locker-nav-v1.js. Concepts: design/locker-room-concepts 01, 06.
   Immutable under /assets/*: a change ships as -v2, never an edit to this file once deployed. */

:root{
  --lr-ink:#221a5c;            /* headings, the deep navy-violet of the concepts */
  --lr-ink-2:#4a4275;          /* body copy */
  --lr-violet:#7b3cf0;
  --lr-pink:#ec3fc8;
  --lr-grad:linear-gradient(100deg,#f04bc4 0%,#b145ee 52%,#7b3cf0 100%);
  --lr-gold:linear-gradient(180deg,#ffe58a 0%,#ffd259 48%,#f5b93c 100%);
  --lr-green:#1fa874;
  --lr-glass:rgba(255,255,255,.42);
  --lr-glass-hi:rgba(255,255,255,.72);
  --lr-line:rgba(255,255,255,.75);
  --lr-shadow:0 18px 50px rgba(40,24,110,.18), 0 2px 6px rgba(40,24,110,.08);
  --lr-display:'Bungee', 'Inter', system-ui, sans-serif;
}

/* ---- launch flag (fail closed): nothing of the economy shows until motions-locker-nav-v1.js has read the
   catalog's currency.enabled and set <html data-economy="on">. Off, no JS, or a failed load: the nav is the plain
   one. (The pill appears once the module has run; that small late reveal is the price of failing closed.) ---- */
html:not([data-economy="on"]) :is(.nav__locker, .nav__mobile-locker, .nav__wallet, .game-tile__badge){ display:none !important; }

/* ---- the Motion Bucks icon: ONE image (locker-core-v1.js#BUCKS_ICON, tools/bucks-icon.py); <img class="mb"> ---- */
.mb{ display:inline-block; width:1.15em; height:1.15em; flex:none; vertical-align:-.2em; object-fit:contain; user-select:none; }

/* ---- nav: Locker Room pill (after "Ads for businesses") ---- */
.nav .nav__locker{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 16px 0 13px; border-radius:999px;
  background:var(--lr-grad); color:#fff; font-weight:600; font-size:14px;
  box-shadow:0 6px 18px rgba(150,60,230,.35), inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1.5px rgba(255,255,255,.35);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease;
}
.nav .nav__locker svg{ width:20px; height:20px; }
.nav .nav__locker:hover{ color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px rgba(150,60,230,.45), inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1.5px rgba(255,255,255,.45); }
.nav .nav__locker[aria-current="page"]{ box-shadow:0 0 0 3px rgba(255,255,255,.65), 0 8px 22px rgba(150,60,230,.42); }
.nav__locker-new{
  position:absolute; top:-9px; right:-6px; padding:2px 6px; border-radius:999px;
  background:#ff3b5c; color:#fff; font:800 9px/1.2 Inter,system-ui,sans-serif; letter-spacing:.04em;
  box-shadow:0 2px 6px rgba(255,59,92,.45); border:1.5px solid #fff;
}
.nav__locker-new[hidden]{ display:none; }
.nav.is-scrolled .nav__locker, .nav.is-scrolled .nav__locker:hover{ color:#fff; }

/* ---- nav: Motion Bucks chip + profile, pinned to the right edge ---- */
.nav__wallet{
  position:absolute; right:clamp(18px,2.6vw,40px); top:calc(var(--nav-y) - 9px);
  display:flex; align-items:center; gap:14px;
}
.nav .bucks-chip{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 6px 0 7px; border-radius:999px;
  background:var(--lr-gold); color:var(--lr-ink); font:800 17px/1 Inter,system-ui,sans-serif; letter-spacing:-.01em;
  box-shadow:0 6px 16px rgba(220,150,20,.32), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(200,120,0,.2), 0 0 0 1.5px rgba(255,255,255,.7);
  transition:transform .18s cubic-bezier(.2,.7,.3,1);
}
.nav .bucks-chip:hover{ color:var(--lr-ink); transform:translateY(-1px); }
.nav .bucks-chip .mb{ width:30px; height:30px; }
.bucks-chip__n{ min-width:2ch; font-variant-numeric:tabular-nums; }
/* odometer roll (motions-locker-nav-v1.js rollNumber): one clipped column per digit */
.mb-rolling{ display:inline-flex; height:1.2em; line-height:1.2em; overflow:hidden; vertical-align:bottom; }
.mb-col{ display:inline-block; height:1.2em; overflow:hidden; }
.mb-digits{ display:flex; flex-direction:column; will-change:transform; }
.mb-digits>span{ display:block; height:1.2em; line-height:1.2em; text-align:center; }
.bucks-chip__plus{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,.55); font-size:19px; font-weight:800; line-height:1; color:var(--lr-ink);
  box-shadow:inset 0 0 0 1px rgba(160,100,0,.18);
}
.nav .nav__profile{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.62); color:var(--lr-ink);
  box-shadow:0 4px 16px rgba(40,24,110,.12), inset 0 0 0 1.5px rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.nav .nav__profile svg{ width:22px; height:22px; }
.nav .nav__profile:hover{ color:var(--lr-violet); }
.nav__profile-initial{ font:800 17px/1 Inter,system-ui,sans-serif; }
.nav__menu{
  position:absolute; right:0; top:54px; min-width:200px; padding:8px; display:grid; gap:2px;
  border-radius:18px; background:rgba(250,247,255,.97); border:1px solid #fff;
  box-shadow:0 14px 40px rgba(40,24,110,.18);
}
.nav__menu[hidden]{ display:none; }
.nav .nav__menu p{ margin:4px 10px 8px; font:600 13px Inter,system-ui,sans-serif; color:var(--lr-ink-2); }
.nav .nav__menu a, .nav .nav__menu button{
  display:flex; align-items:center; min-height:40px; padding:0 12px; border-radius:12px;
  font:500 14px Inter,system-ui,sans-serif; color:var(--lr-ink); text-align:left; width:100%;
}
.nav .nav__menu a:hover, .nav .nav__menu button:hover{ background:#efe7fc; color:var(--lr-violet); }

/* The chip, pill and profile hold their own colours when the nav goes white over art. */
.nav.is-scrolled .bucks-chip, .nav.is-scrolled .bucks-chip:hover{ color:var(--lr-ink); }
.nav.is-scrolled .nav__profile{ color:var(--lr-ink); }

/* When the right column runs out of room (narrower desktops, a long balance), motions-locker-nav-v1.js measures
   and steps down: first the social icons go (they are in the footer and the mobile menu too), then the pill
   drops its label to just the hanger. */
.nav.nav--fit1 .nav__side--right .nav__social{ display:none; }
.nav.nav--fit1 .nav__side--right{ gap:18px; }
.nav.nav--fit2 .nav__locker{ width:40px; padding:0; justify-content:center; }
.nav.nav--fit2 .nav__locker .nav__locker-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.nav.nav--fit2 .bucks-chip{ font-size:15px; }
.nav.nav--fit2 .nav__wallet{ gap:10px; }
@media (max-width:1100px) and (min-width:641px) and (min-aspect-ratio:3/4){
  .nav{ gap:clamp(14px,2.4vw,28px); }
  .nav__side{ gap:clamp(12px,1.8vw,22px); }
  .nav .bucks-chip__plus{ display:none; }
}

/* Phones and portrait tablets: hamburger left, mark centred, chip + profile right (concept 09). */
@media (max-width:640px), (max-aspect-ratio:3/4){
  .nav .nav__mobile{ left:12px; right:auto; }
  .nav .nav__mobile-links{ left:0; right:auto; }
  .nav__wallet{ top:10px; right:12px; gap:8px; }
  .nav .bucks-chip{ height:40px; font-size:16px; padding:0 4px 0 5px; gap:6px; }
  .nav .bucks-chip .mb{ width:28px; height:28px; }
  .nav .bucks-chip__plus{ width:26px; height:26px; font-size:17px; }
  .nav .nav__profile{ width:40px; height:40px; }
  .nav .logo{ margin-right:96px; } /* the mark sits centred in the room left of the wallet */
  .nav__menu{ top:48px; }
  .nav .nav__mobile-links a.nav__mobile-locker{ background:var(--lr-grad); color:#fff; font-weight:600; margin-bottom:4px; }
}
@media (max-width:380px){
  .nav .logo img, .nav .logo .logo__white{ width:96px; }
  .nav .bucks-chip__plus{ display:none; }
}

/* ---- homepage: "new skins" badge on the three games with Locker Room skins ---- */
.game-tile__badge{
  position:absolute; z-index:2; top:6%; left:-4%; display:inline-flex; align-items:center; gap:4px;
  padding:4px 9px 4px 7px; border-radius:999px; pointer-events:none;
  background:linear-gradient(180deg,#fff2b0,#ffd457); color:#3b2a07;
  font:700 11px/1 Inter,system-ui,sans-serif; letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 3px 10px rgba(120,80,0,.28), inset 0 0 0 1px rgba(255,255,255,.75);
  transform:rotate(-2deg);
}
.game-tile__badge svg{ width:11px; height:11px; color:#e39b00; }
.game-tile__visual{ position:relative; display:block; }
@media (max-width:640px), (max-aspect-ratio:3/4){
  .game-tile__badge{ font-size:9px; padding:3px 6px 3px 5px; top:2%; left:-3%; }
  .game-tile__badge svg{ width:9px; height:9px; }
}

/* ---- shared sheets: one glass dialog style for the Bucks store, sign-in, confirm and "almost there" ---- */
.lr-sheet{
  border:0; padding:0; margin:auto; background:transparent; color:var(--lr-ink);
  max-width:min(960px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:visible;
  font-family:Inter,system-ui,sans-serif;
}
.lr-sheet::backdrop{ background:rgba(60,70,140,.28); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.lr-sheet__panel{
  position:relative; max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain;
  padding:34px 30px 26px; border-radius:34px;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(240,236,255,.82));
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:0 30px 80px rgba(40,24,110,.28), inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(24px) saturate(1.3); backdrop-filter:blur(24px) saturate(1.3);
}
.lr-sheet[open] .lr-sheet__panel{ animation:lr-sheet-in .32s cubic-bezier(.2,.9,.3,1.15); }
@keyframes lr-sheet-in{ from{ opacity:0; transform:translateY(14px) scale(.97); } }
@media (prefers-reduced-motion:reduce){ .lr-sheet[open] .lr-sheet__panel{ animation:none; } }
.lr-close{
  position:absolute; top:18px; right:18px; z-index:3; display:grid; place-items:center;
  width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--lr-ink); box-shadow:0 4px 14px rgba(40,24,110,.14);
}
.lr-close svg{ width:20px; height:20px; }
.lr-close:hover{ color:var(--lr-violet); }
.lr-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:54px;
  padding:0 22px; border:0; border-radius:999px; cursor:pointer; text-decoration:none;
  font:700 19px/1.1 Inter,system-ui,sans-serif; letter-spacing:-.01em;
  transition:transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s ease, filter .16s ease;
}
.lr-btn:active{ transform:scale(.98); }
.lr-btn[disabled]{ cursor:default; transform:none; }
.lr-btn--primary{ background:var(--lr-grad); color:#fff; box-shadow:0 10px 26px rgba(170,60,230,.35), inset 0 1px 0 rgba(255,255,255,.4); }
.lr-btn--primary:hover:not([disabled]){ filter:brightness(1.06); }
.lr-btn--ghost{ background:#fff; color:var(--lr-ink); box-shadow:0 6px 18px rgba(40,24,110,.10), inset 0 0 0 1.5px rgba(120,100,200,.16); }
.lr-btn--ghost:hover:not([disabled]){ box-shadow:0 8px 22px rgba(40,24,110,.14), inset 0 0 0 1.5px rgba(123,60,240,.4); }
.lr-btn--muted{ background:rgba(200,200,225,.45); color:#8a86a8; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7); }
.lr-btn .mb{ width:28px; height:28px; }
.lr-btn svg.lr-play{ width:20px; height:20px; }
.lr-msg{ min-height:1.2em; margin:10px 0 0; text-align:center; font-size:14px; color:#b4235a; }
.lr-msg.is-ok{ color:var(--lr-green); }
.lr-link{ border:0; background:none; padding:0; cursor:pointer; color:var(--lr-violet); font:600 15px Inter,system-ui,sans-serif; text-decoration:underline; text-underline-offset:3px; }

/* hidden means hidden, whatever display a component sets */
.lr-sheet [hidden], .lr-page [hidden]{ display:none !important; }

/* ---- the Motion Bucks store (concept 06, founder round 1: "cooler") ----
   A glossy game store: a hero icon in a slow ray burst, five packs whose art is a heap of the icon growing with the
   pack (no chests, boxes or mystery containers), the dollar price as the buy button, the bonus, MOST POPULAR /
   BEST VALUE ribbons, then what you can get and the trust line. Motion: the panel scales in (house sheet), the hero
   pops, the cards rise in a 50ms stagger and each heap pours in (icons drop with a small overshoot, 28ms apart).
   Reduced motion: the sheet fades, nothing moves. */
.bucks-store{ width:min(1000px, calc(100vw - 24px)); max-width:min(1000px, calc(100vw - 24px)); }
.bucks-store .lr-sheet__panel{ padding:0 30px 24px; text-align:center; overflow-x:hidden;
  background:radial-gradient(120% 60% at 50% 0%, rgba(196,160,255,.55), rgba(255,255,255,0) 60%), linear-gradient(180deg,rgba(255,255,255,.9),rgba(240,236,255,.86)); }
.bucks-store__head{ position:relative; padding-top:10px; }
.bucks-store__hero{ position:relative; margin:4px auto 2px; width:132px; height:132px; display:grid; place-items:center; }
.bucks-store__hero img{ position:relative; width:118px; height:118px; filter:drop-shadow(0 14px 18px rgba(120,40,220,.38)); }
.bucks-store__rays{ position:absolute; inset:-46px; border-radius:50%; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(255,214,90,.42) 0deg 7deg, rgba(255,214,90,0) 7deg 22deg);
  -webkit-mask:radial-gradient(circle, #000 18%, transparent 68%); mask:radial-gradient(circle, #000 18%, transparent 68%);
  animation:bucks-rays 28s linear infinite; }
@keyframes bucks-rays{ to{ rotate:360deg; } }
.bucks-store h2{ margin:0; font:400 clamp(30px,4.4vw,46px)/1 var(--lr-display); color:var(--lr-ink); letter-spacing:.01em; }
.bucks-store__lede{ margin:8px 0 10px; font:500 19px/1.3 Inter,system-ui,sans-serif; color:var(--lr-ink); }
.bucks-store__have{ display:inline-flex; align-items:center; gap:7px; margin:0 0 14px; padding:6px 14px 6px 8px; border-radius:999px;
  background:var(--lr-gold); color:var(--lr-ink); font:600 15px/1 Inter,system-ui,sans-serif;
  box-shadow:0 6px 16px rgba(220,150,20,.25), inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 1.5px rgba(255,255,255,.7); }
.bucks-store__have .mb{ width:24px; height:24px; }
.bucks-store__have b{ font-weight:800; font-variant-numeric:tabular-nums; }

.bucks-packs{ list-style:none; margin:0; padding:18px 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; align-items:end; }
.bucks-pack{
  position:relative; display:flex; flex-direction:column; align-items:center; width:100%;
  padding:0 0 12px; border-radius:24px; cursor:pointer; color:var(--lr-ink); overflow:visible;
  background:linear-gradient(180deg,#fff 0%,rgba(250,247,255,.96) 100%); border:0;
  box-shadow:0 10px 26px rgba(60,30,140,.12), inset 0 0 0 1.5px rgba(255,255,255,.95), inset 0 -3px 0 rgba(120,90,220,.08);
  font-family:Inter,system-ui,sans-serif;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
.bucks-pack:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(110,50,220,.2), inset 0 0 0 1.5px #fff; }
.bucks-pack:active{ transform:translateY(-1px) scale(.98); }
.bucks-pack:focus-visible{ outline:3px solid var(--lr-violet); outline-offset:3px; }
.bucks-pack[disabled]{ cursor:progress; }
.bucks-pack.is-popular{ box-shadow:0 16px 36px rgba(230,60,190,.28), inset 0 0 0 2.5px #ef4fc3; background:linear-gradient(180deg,#fff2fb,#ffe6f6); }
.bucks-pack.is-best{ box-shadow:0 16px 36px rgba(230,160,20,.3), inset 0 0 0 2.5px #f4b52e; background:linear-gradient(180deg,#fffaf0,#fff1d2); }
.bucks-pack__ribbon{
  position:absolute; z-index:6; top:-12px; left:50%; translate:-50% 0; padding:6px 14px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(90deg,#f04bc4,#c03ff0); color:#fff; font:800 12px/1 Inter,system-ui,sans-serif; letter-spacing:.06em;
  box-shadow:0 6px 14px rgba(220,60,200,.38), inset 0 1px 0 rgba(255,255,255,.4);
}
.is-best .bucks-pack__ribbon{ background:linear-gradient(90deg,#ffb11b,#ff7a1a); box-shadow:0 6px 14px rgba(240,140,20,.4), inset 0 1px 0 rgba(255,255,255,.45); }
/* the art: a spotlight on a little stage, the heap standing on it */
.bucks-pack__art{ position:relative; display:block; width:100%; height:158px; border-radius:24px 24px 50% 50% / 24px 24px 18px 18px; overflow:hidden;
  background:radial-gradient(80% 70% at 50% 92%, rgba(255,214,96,.55), rgba(255,214,96,0) 70%), linear-gradient(180deg,#6a3bdc 0%,#3b1f9a 100%); }
.is-popular .bucks-pack__art{ background:radial-gradient(80% 70% at 50% 92%, rgba(255,214,96,.6), rgba(255,214,96,0) 70%), linear-gradient(180deg,#d63fc0 0%,#6a1fae 100%); }
.is-best .bucks-pack__art{ background:radial-gradient(85% 75% at 50% 92%, rgba(255,230,120,.75), rgba(255,214,96,0) 72%), linear-gradient(180deg,#ff9f2e 0%,#9a2fbf 100%); }
.bucks-pack__glow{ position:absolute; left:50%; bottom:6px; width:78%; height:22px; translate:-50% 0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(20,6,60,.45), rgba(20,6,60,0)); }
.bucks-pack__coin{ position:absolute; left:var(--x); bottom:calc(12px + var(--y)); width:52px; height:52px; margin-left:-26px;
  rotate:var(--r); scale:var(--s); filter:drop-shadow(0 5px 5px rgba(20,6,60,.45)); user-select:none; }
.bucks-packs > li:first-child .bucks-pack__coin{ width:78px; height:78px; margin-left:-39px; rotate:-8deg; }
.bucks-pack__shine{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.35) 48%, rgba(255,255,255,0) 60%); translate:-120% 0; }
.bucks-pack:hover .bucks-pack__shine{ transition:translate .7s cubic-bezier(.2,.7,.3,1); translate:120% 0; }
.bucks-pack__amt{ display:flex; align-items:center; gap:6px; margin-top:12px; font:800 24px/1.1 Inter,system-ui,sans-serif; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.bucks-pack__amt .mb{ width:26px; height:26px; }
.bucks-pack__bonus{ margin-top:4px; padding:3px 10px; border-radius:999px; background:rgba(31,168,116,.12); color:#14895c; font:800 12px/1.3 Inter,system-ui,sans-serif; letter-spacing:.03em; text-transform:uppercase; }
.bucks-pack__bonus.is-none{ background:rgba(120,100,200,.08); color:var(--lr-ink-2); }
.bucks-pack__buy{ margin-top:10px; min-width:76%; padding:9px 12px; border-radius:999px; background:var(--lr-grad); color:#fff;
  font:800 19px/1 Inter,system-ui,sans-serif; font-variant-numeric:tabular-nums; box-shadow:0 8px 18px rgba(170,60,230,.32), inset 0 1px 0 rgba(255,255,255,.4); }
.is-best .bucks-pack__buy{ background:linear-gradient(100deg,#ffb11b,#ff6a3d); box-shadow:0 8px 18px rgba(240,120,20,.35), inset 0 1px 0 rgba(255,255,255,.45); }
.bucks-pack.is-bought .bucks-pack__art{ animation:bucks-bought .6s cubic-bezier(.2,.7,.3,1); }
@keyframes bucks-bought{ 30%{ filter:brightness(1.45) saturate(1.2); } }
.bucks-fly{ position:fixed; z-index:20; pointer-events:none; margin:0; filter:drop-shadow(0 6px 8px rgba(20,6,60,.35)); will-change:transform; }

/* opening: the hero pops, the cards rise one after another, each heap pours in from above */
.bucks-store.is-pouring .bucks-store__hero img{ animation:bucks-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes bucks-pop{ from{ opacity:0; transform:scale(.4) rotate(-18deg); } }
.bucks-store.is-pouring .bucks-packs > li{ animation:bucks-rise .38s cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(80ms + var(--i) * 50ms); }
@keyframes bucks-rise{ from{ opacity:0; transform:translateY(18px); } }
.bucks-store.is-pouring .bucks-pack__coin{ animation:bucks-pour .42s cubic-bezier(.34,1.56,.64,1) both; animation-delay:calc(220ms + var(--i, 0) * 50ms + var(--k) * 28ms); }
.bucks-packs > li{ --i:0; }
@keyframes bucks-pour{ from{ opacity:0; transform:translateY(-90px); } 60%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .bucks-store__rays{ animation:none; }
  .bucks-store.is-pouring .bucks-store__hero img, .bucks-store.is-pouring .bucks-packs > li, .bucks-store.is-pouring .bucks-pack__coin,
  .bucks-pack.is-bought .bucks-pack__art{ animation:none; }
  .bucks-pack:hover .bucks-pack__shine{ transition:none; }
}

.bucks-store__get{ margin:24px 0 14px; display:flex; align-items:center; gap:16px; font:800 22px Inter,system-ui,sans-serif; color:var(--lr-ink); }
.bucks-store__get::before, .bucks-store__get::after{ content:""; flex:1; height:1px; background:rgba(80,70,140,.18); }
.bucks-store__items{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:34px; flex-wrap:wrap; }
.bucks-store__items li{ display:grid; justify-items:center; gap:10px; }
.bucks-store__items .lr-art{ width:178px; height:174px; border-radius:16px; }
.bucks-store__items span{ display:inline-flex; align-items:center; gap:8px; font:700 16px Inter,system-ui,sans-serif; }
.bucks-store__items .mb{ width:22px; height:22px; }
.bucks-store__trust{ margin:22px 0 0; padding-top:16px; border-top:1px solid rgba(80,70,140,.14); display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; font:500 15px Inter,system-ui,sans-serif; color:var(--lr-ink); }
.bucks-store__trust span{ display:inline-flex; align-items:center; gap:9px; }
.bucks-store__trust svg{ width:22px; height:22px; color:var(--lr-ink); }
.bucks-store__secure{ margin:12px 0 0; font:500 14px Inter,system-ui,sans-serif; color:var(--lr-ink-2); display:inline-flex; align-items:center; gap:8px; }
.bucks-store__secure svg{ width:16px; height:16px; }
@media (max-width:760px){
  .bucks-store .lr-sheet__panel{ padding:0 14px 20px; border-radius:28px; }
  .bucks-store__hero{ width:100px; height:100px; }
  .bucks-store__hero img{ width:88px; height:88px; }
  .bucks-store__lede{ font-size:16px; margin-bottom:8px; }
  .bucks-packs{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; }
  .bucks-packs > li:last-child{ grid-column:1 / -1; }
  .bucks-pack__art{ height:118px; }
  .bucks-pack__coin{ width:42px; height:42px; margin-left:-21px; }
  .bucks-packs > li:first-child .bucks-pack__coin{ width:60px; height:60px; margin-left:-30px; }
  .bucks-pack__amt{ font-size:21px; }
  .bucks-pack__buy{ font-size:17px; }
  .bucks-store__items{ gap:12px; }
  .bucks-store__items .lr-art{ width:100px; height:100px; }
  .bucks-store__items span{ font-size:13px; }
  .bucks-store__trust{ font-size:13px; }
}
}

/* ---- sign-in (the shared Motions account, the same steps as Fly a blimp) ---- */
.lr-signin{ width:min(440px, calc(100vw - 24px)); }
.lr-signin h2{ margin:0 0 8px; font:400 30px/1 var(--lr-display); }
.lr-signin p{ margin:0 0 16px; font:500 15px/1.45 Inter,system-ui,sans-serif; color:var(--lr-ink-2); }
.lr-signin label.lr-agree{ display:flex; gap:10px; align-items:flex-start; margin:0 0 16px; font:500 14px/1.4 Inter,system-ui,sans-serif; color:var(--lr-ink-2); text-align:left; }
.lr-signin label.lr-agree input{ margin-top:2px; width:18px; height:18px; accent-color:var(--lr-violet); }
.lr-signin form{ display:flex; gap:8px; margin-top:10px; }
.lr-signin input[type=email], .lr-signin input[inputmode=numeric]{
  flex:1; min-width:0; height:50px; padding:0 18px; border-radius:999px; border:1.5px solid rgba(120,100,200,.25);
  background:#fff; font:500 16px Inter,system-ui,sans-serif; color:var(--lr-ink);
}
.lr-signin form .lr-btn{ width:auto; min-height:50px; font-size:15px; padding:0 18px; }
.lr-signin form[hidden]{ display:none; }

/* ---- the card art box shared by the Locker Room, store and sheets: game backdrop behind the render ---- */
.lr-art{ position:relative; overflow:hidden; display:block; background:var(--lr-scene, #20184a); }
.lr-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:50% 100%; }
.lr-art[data-shape="wide"] img{ object-fit:contain; object-position:50% 50%; }
.lr-art[data-shape="wide"][data-game="moon-jump"] img{ object-fit:contain; inset:8% 4%; width:92%; height:84%; }
.lr-art[data-shape="tall"] img{ inset:auto 0 0; height:96%; }
/* A full-scene thumbnail (data-fit="cover": a frame of the 3D preview stage, L12) fills its box, whatever the shape. */
.lr-art[data-fit="cover"][data-shape] img{ inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.lr-art[data-game="moon-jump"]{
  --lr-scene:
    radial-gradient(ellipse 70% 28% at 50% 104%, #8d8a99 0 55%, #5e5b6c 56% 75%, transparent 76%),
    radial-gradient(1.4px 1.4px at 18% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 72% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 40%, #dcd6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 46%, #dcd6ff 50%, transparent 51%),
    radial-gradient(circle at 76% 18%, rgba(120,90,255,.55), transparent 45%),
    linear-gradient(180deg,#2a1f6e 0%,#16103f 70%,#0e0a2b 100%);
}
.lr-art[data-shape="wide"][data-game="moon-jump"]{ --lr-scene:
    radial-gradient(1.4px 1.4px at 14% 24%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 80% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 56% 78%, #dcd6ff 50%, transparent 51%),
    radial-gradient(circle at 70% 30%, rgba(120,90,255,.5), transparent 50%),
    linear-gradient(180deg,#2a1f6e 0%,#16103f 100%); }
.lr-art[data-game="rail-runner"]{
  --lr-scene:
    linear-gradient(98deg, transparent 47.2%, rgba(255,255,255,.75) 47.4% 48.6%, transparent 48.8%) 0 100% / 100% 42% no-repeat,
    linear-gradient(82deg, transparent 51.2%, rgba(255,255,255,.75) 51.4% 52.6%, transparent 52.8%) 0 100% / 100% 42% no-repeat,
    repeating-linear-gradient(180deg, #b9875a 0 5px, #d9b083 5px 13px) 0 100% / 100% 42% no-repeat,
    linear-gradient(180deg,#8fd1ff 0%,#cdeaff 45%,#f4e6cf 58%);
}
.lr-art[data-game="rally-riot"]{
  --lr-scene:
    linear-gradient(180deg, transparent 62%, #2e8c97 62%, #1f6f7c 100%),
    radial-gradient(circle at 68% 40%, #ffe6a1 0 7%, transparent 8%),
    linear-gradient(180deg,#ff9e7a 0%,#ffb88c 38%,#ffcf9a 62%);
}

/* ---- toasts ---- */
.lr-toasts{ position:fixed; z-index:2147483000; left:50%; bottom:24px; translate:-50% 0; display:grid; gap:8px; justify-items:center; pointer-events:none; }
.lr-toast{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px;
  background:#1f1850; color:#fff; font:600 15px Inter,system-ui,sans-serif; box-shadow:0 10px 30px rgba(20,10,60,.35);
  animation:lr-toast-in .28s cubic-bezier(.2,.9,.3,1.2); transition:opacity .35s ease, translate .35s ease;
}
.lr-toast .mb{ width:20px; height:20px; }
.lr-toast a{ pointer-events:auto; color:#ffd65a; font-weight:800; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.lr-toast.is-bad{ background:#8f1d45; }
.lr-toast.is-out{ opacity:0; translate:0 8px; }
@keyframes lr-toast-in{ from{ opacity:0; translate:0 12px; } }
@media (prefers-reduced-motion:reduce){ .lr-toast{ animation:none; transition:none; } }

/* ---- banner (back from Bucks checkout) ---- */
.lr-banner{
  position:fixed; z-index:60; top:calc(var(--nav-y) + 58px); left:50%; translate:-50% 0; width:max-content; max-width:calc(100vw - 24px);
  display:flex; align-items:center; gap:12px; padding:10px 10px 10px 18px; border-radius:20px;
  background:linear-gradient(180deg,#f0fff8,#dcf7ea); color:#0f5a3c; border:1.5px solid #fff;
  font:500 15px/1.35 Inter,system-ui,sans-serif; box-shadow:0 14px 34px rgba(20,90,60,.22);
}
.lr-banner.is-bad{ background:#fff0f4; color:#8f1d45; }
.lr-banner > span{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lr-banner .mb{ width:24px; height:24px; }
.lr-banner__x{ display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; background:rgba(255,255,255,.8); color:inherit; cursor:pointer; flex:none; }
.lr-banner__x svg{ width:14px; height:14px; }
.lr-banner[hidden]{ display:none; }
@media (max-width:640px), (max-aspect-ratio:3/4){ .lr-banner{ top:70px; font-size:14px; } }