/* ---- the Gem Store (#629 desktop, #630 phone; redesigned #893 as a game shop): Shop → Gems, the header chip, the
   item detail, the confirm, the checkout sheet and the two celebrations. Both clients. The store is its own vivid
   room inside the panel: an indigo stage, tiles on their tier's colours, slab buttons (yellow spends Gems, green gets
   them) and a chunky display face. ---- */
@font-face { font-family: 'Lilita One'; font-style: normal; font-display: swap; font-weight: 400; src: url('/vendor/fontsource/lilita-one/files/lilita-one-latin-400-normal.woff2') format('woff2'), url('/vendor/fontsource/lilita-one/files/lilita-one-latin-400-normal.woff') format('woff'); }
:root { --gem: #2a7fd9; --gem-2: #5aa9f5; --gem-bg: rgba(42, 127, 217, .08); --gmf: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', var(--sans); }
:root[data-theme="dark"] { --gem: #5aa9f5; --gem-2: #8cc5ff; --gem-bg: rgba(90, 169, 245, .12); }
.gem-i { width: 1em; height: 1em; flex: none; fill: none; stroke: var(--gem); stroke-width: 1.7; stroke-linejoin: round; vertical-align: -.12em; }
.gem-c { width: 1.1em; height: 1em; flex: none; vertical-align: -.14em; }

/* the tiers: one colour each, everywhere (light centre, body, deep edge, border, label, glow) */
.t-uncommon { --t1: #63f0a6; --t2: #15ad68; --t3: #06553a; --tb: #86ffbf; --tl: #93ffc6; --tg: rgba(21, 173, 104, .55); }
.t-rare { --t1: #6ec6ff; --t2: #1e6df2; --t3: #0b2a94; --tb: #93d6ff; --tl: #a3dcff; --tg: rgba(30, 109, 242, .6); }
.t-epic { --t1: #dc92ff; --t2: #8d36f2; --t3: #3e1295; --tb: #e5adff; --tl: #e9baff; --tg: rgba(141, 54, 242, .6); }
.t-legendary { --t1: #ffe37d; --t2: #f79812; --t3: #9c4005; --tb: #ffec95; --tl: #ffe487; --tg: rgba(247, 152, 18, .6); }

/* the stage: edge to edge in the panel, under the Shop's own sticky header */
.gm { --gm-pad: var(--ph-pside, 14px); --gm-pb: 40px; --gm-fg2: rgba(255, 255, 255, .8); --gm-fg3: rgba(255, 255, 255, .6); --gm-navy: #0a0c33;
  display: flex; flex-direction: column; margin: -12px calc(-1 * var(--gm-pad)) calc(-1 * var(--gm-pb)); padding: 0 var(--gm-pad); min-height: 100%; overflow-x: clip; color: #fff;
  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); }
.gm .gm-art { display: block; }
.gm :focus-visible, .gm-cel :focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* the header plate: the store's name, the balance and the green Get Gems; it stays under the shop's sticky header */
.gm-bar { position: sticky; top: calc(var(--ph-h, 0px) - var(--ph-ptop, 18px)); z-index: 4; display: flex; align-items: center; gap: 12px; min-height: 60px; margin: 0 calc(-1 * var(--gm-pad)); padding: 10px var(--gm-pad) 12px; background: linear-gradient(180deg, #5340e0, #3527ad); box-shadow: 0 4px 0 #1c1570, 0 14px 18px -10px rgba(0, 0, 0, .7); }
.gm .gm-title, body.mobile #view .gm .gm-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; margin: 0; font: 400 27px/1 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.gm-title-gem { width: 36px; height: 30px; flex: none; transform: rotate(-10deg); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .3)); }
.gm .gm-bal, .gm-cel .gm-bal { position: relative; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 5px 0 38px; border-radius: 13px; background: var(--gm-navy); box-shadow: inset 0 3px 0 rgba(0, 0, 0, .45), 0 0 0 2px #8f9dff, 0 4px 0 2px rgba(0, 0, 0, .3); font: 400 22px/1 var(--gmf); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.gm-bal-gem { position: absolute; left: -12px; top: 50%; width: 44px; transform: translateY(-52%) rotate(-12deg); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); pointer-events: none; }
.gm-bal-gem .gm-art { width: 44px; height: 37px; }
.gm .gm-bal b, .gm-cel .gm-bal b { font-weight: 400; min-width: 2ch; text-align: right; text-shadow: 0 2px 0 rgba(0, 0, 0, .4); transition: color .3s; }
.gm .gm-bal.neg b { color: #ff8f8f; }
.gm .gm-bal b.counting, .gm-cel .gm-bal b.counting { color: #8dffb0; }
:root .gm .gm-plus, :root .gm-cel .gm-plus { display: inline-flex; align-items: center; gap: 6px; height: 30px; min-height: 0; min-width: 30px; justify-content: center; padding: 0 10px; border: 0; border-radius: 9px; background: linear-gradient(180deg, #6bf592, #25bb55); color: #06310f; font: 400 14px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 3px 0 #0e6e2e, inset 0 2px 0 rgba(255, 255, 255, .5); transition: transform .08s, box-shadow .08s, filter .12s; }
.gm-plus i { font: 400 22px/1 var(--gmf); font-style: normal; margin-top: -2px; }
:root .gm .gm-plus:hover { background: linear-gradient(180deg, #6bf592, #25bb55); color: #06310f; filter: brightness(1.08); }
:root .gm .gm-plus:active { transform: translateY(2px); box-shadow: 0 1px 0 #0e6e2e, inset 0 2px 0 rgba(255, 255, 255, .5); }
.gm.v-gems .gm-plus { display: none; } .gm.v-gems .gm-bar .gm-bal { padding-right: 14px; }

/* the tabs: leaning slabs, the open one white */
.gm-tabs { display: flex; gap: 8px; margin: 16px 0 0; padding: 0 4px; }
:root .gm .gm-tabs button { flex: 0 0 auto; min-height: 36px; margin: 0; padding: 0 18px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .13); color: #fff; font: 400 15px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; transform: skewX(-9deg); box-shadow: 0 3px 0 rgba(0, 0, 0, .32); transition: transform .08s, background .12s; }
.gm-tabs button > span { display: inline-block; transform: skewX(9deg); }
:root .gm .gm-tabs button:hover { background: rgba(255, 255, 255, .24); color: #fff; }
:root .gm .gm-tabs button.on, :root .gm .gm-tabs button.on:hover { background: #fff; color: #2a1f96; }
:root .gm .gm-tabs button:active { transform: skewX(-9deg) translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .32); }
.gm-staff { margin: 12px 0 0; font: 600 12px var(--sans); color: #ffd98a; }
.gm-banner { margin: 14px 0 0; color: var(--ink); background: var(--paper); border-radius: 12px; }
.gm-banner.neg { border-color: var(--brick); }
.gm-banner.region { border-color: var(--amber); }

/* slab buttons: a lip under them, they go down when pressed. Yellow spends Gems, green gets them, glass for the rest */
:root .gm-btn, #modalBox2:has(.gm-cf, .gm-sheet) .actions button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; font: 400 19px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 5px 0 #b56a00, 0 12px 16px -8px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .6); cursor: pointer; transition: transform .08s, box-shadow .08s, filter .12s; }
:root .gm-btn:hover, #modalBox2:has(.gm-cf, .gm-sheet) .actions button[type=submit]:hover { background: linear-gradient(180deg, #ffe763, #ffbd1c); color: #3d2600; filter: brightness(1.07); transform: translateY(-1px); }
:root .gm-btn:active, #modalBox2:has(.gm-cf, .gm-sheet) .actions button:active { transform: translateY(4px); box-shadow: 0 1px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); }
:root .gm-btn.green, :root .gm-btn.green:hover, #modalBox2:has(.gm-cf.short) .actions button[type=submit], #modalBox2:has(.gm-cf.short) .actions button[type=submit]:hover { background: linear-gradient(180deg, #6bf592, #25bb55); color: #06310f; box-shadow: 0 5px 0 #0e6e2e, 0 12px 16px -8px rgba(0, 0, 0, .55), inset 0 2px 0 rgba(255, 255, 255, .5); }
:root .gm-btn.green:active, #modalBox2:has(.gm-cf.short) .actions button[type=submit]:active { box-shadow: 0 1px 0 #0e6e2e, inset 0 2px 0 rgba(255, 255, 255, .5); }
:root .gm-btn.alt, :root .gm-btn.alt:hover, #modalBox2:has(.gm-cf, .gm-sheet) .actions #dlgCancel, #modalBox2:has(.gm-sheet) .actions button[type=submit], #modalBox2:has(.gm-cf:hover, .gm-sheet) .actions #dlgCancel:hover, #modalBox2:has(.gm-sheet) .actions button[type=submit]:hover { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: 0 5px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .45); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
:root .gm-btn.alt:active, #modalBox2:has(.gm-cf:active, .gm-sheet) .actions #dlgCancel:active, #modalBox2:has(.gm-sheet) .actions button[type=submit]:active { box-shadow: 0 1px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .45); }
:root .gm-btn:disabled { filter: grayscale(.85) brightness(.85); opacity: .7; cursor: not-allowed; transform: none; }
:root .gm-btn.sm { min-height: 38px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; gap: 7px; box-shadow: 0 4px 0 #b56a00, inset 0 2px 0 rgba(255, 255, 255, .6); }
:root .gm-btn.sm.green { box-shadow: 0 4px 0 #0e6e2e, inset 0 2px 0 rgba(255, 255, 255, .5); } :root .gm-btn.sm.alt { box-shadow: 0 4px 0 rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(255, 255, 255, .45); }
:root .gm-btn.sm:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .3); }
.gm-btn.sm .gm-btn-p { padding: 4px 7px 3px; } .gm-btn.sm .gm-btn-p .gem-c { width: 16px; height: 15px; }
.gm-btn-p { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 4px; border-radius: 9px; background: rgba(60, 30, 0, .16); font-variant-numeric: tabular-nums; }
.gm-btn-p .gem-c { width: 20px; height: 18px; }

/* tags that hang over a corner: NEW, Today's pick, Best value */
.gm-tag { position: absolute; top: -8px; left: -7px; z-index: 5; padding: 5px 10px 4px; border-radius: 6px; background: linear-gradient(180deg, #ff5b8d, #ff2a66); color: #fff; font: 400 12px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); transform: rotate(-5deg) skewX(-8deg); box-shadow: 0 3px 0 rgba(0, 0, 0, .38); pointer-events: none; }
.gm-tag.new { background: linear-gradient(180deg, #fff06a, #ffcf1f); color: #3d2600; text-shadow: none; }
.gm-tag.big { top: -11px; left: -9px; padding: 7px 14px 6px; border-radius: 8px; font-size: 16px; }

/* today's pick: the hero. Rays behind the picture, a slow light sweep, the picture breaks the frame */
.gm-hero { position: relative; display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); min-height: 244px; margin: 26px 0 0; border-radius: 20px; border: 3px solid var(--tb); background: radial-gradient(70% 110% at 22% 46%, var(--t1) 0%, var(--t2) 52%, var(--t3) 100%); box-shadow: 0 6px 0 rgba(0, 0, 0, .4), 0 22px 34px -14px var(--tg); isolation: isolate; }
.gm-hero-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: 17px; pointer-events: none; }
.gm-hero-fx::before { content: ''; position: absolute; left: 22%; top: 46%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; }
.gm-hero-fx::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, rgba(9, 8, 48, .5) 66%, rgba(9, 8, 48, .62) 100%); }
.gm-hero-fx b { position: absolute; width: 16px; height: 16px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: .92; }
.gm-hero-fx b:nth-of-type(1) { left: 5%; top: 30%; } .gm-hero-fx b:nth-of-type(2) { left: 37%; top: 14%; width: 22px; height: 22px; } .gm-hero-fx b:nth-of-type(3) { left: 39%; top: 72%; width: 12px; height: 12px; } .gm-hero-fx b:nth-of-type(4) { left: 9%; top: 80%; width: 10px; height: 10px; }
.gm-hero-fx i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34) 50%, transparent); transform: translateX(-150%) skewX(-18deg); animation: gm-sweep 6s ease-in-out infinite; z-index: 1; }
@keyframes gm-sweep { 0%, 58% { transform: translateX(-150%) skewX(-18deg); } 88%, 100% { transform: translateX(480%) skewX(-18deg); } }
:root .gm .gm-hero-art { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; cursor: pointer; transition: transform .16s cubic-bezier(.2, .8, .3, 1.3); }
:root .gm .gm-hero-art:hover { background: none; transform: scale(1.04) rotate(-1deg); }
.gm-hero-art .gm-propwrap { overflow: visible; }
.gm-hero-art .gm-prop { width: 132%; max-width: none; margin-top: -9%; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .35)); }
.gm-hero.k-decor .gm-hero-art .gm-prop { width: 116%; margin-top: 0; }
.gm-hero-art > :is(.gm-ctx, .gm-ring, .gm-card, .gm-chip) { margin-top: 0; transform: scale(1.5) rotate(-4deg); }
.gm-hero-art > .gm-ring { transform: scale(1.4); } .gm-hero-art > .gm-ring.lk-fa { transform: scale(1.25); }
.gm-hero-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 50px 18px 18px 4px; }
.gm-timer { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(9, 8, 48, .62); font: 700 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.gm-timer svg { width: 14px; height: 14px; fill: none; stroke: #ffe763; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gm-tier { font: 700 10.5px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--tl); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.gm .gm-hero h3, body.mobile #view .gm .gm-hero h3 { margin: 6px 0 8px; font: 400 32px/1 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); text-wrap: balance; }
.gm-hero p { margin: 0; font: 500 13.5px/1.4 var(--sans); color: rgba(255, 255, 255, .92); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm-hero-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 16px; }

/* the shelf: slanted header strips and tier-coloured tiles */
.gm-sec { margin-top: 28px; --sec: linear-gradient(90deg, #8d36f2, #5b5bff); }
.gm-sec.s-tub { --sec: linear-gradient(90deg, #12b58a, #1f8fd6); } /* the tub setup (#1023) */
.gm-sec.s-wear { --sec: linear-gradient(90deg, #ff3d7f, #c13dff); } .gm-sec.s-name { --sec: linear-gradient(90deg, #1fa2ff, #5b5bff); } .gm-sec.s-room { --sec: linear-gradient(90deg, #ff9a1f, #ff5a3d); }
.gm-sec-h { display: flex; align-items: center; gap: 10px; min-height: 40px; padding-right: 14px; border-radius: 11px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.gm-sec-h.s-packs { margin-top: 22px; --sec: linear-gradient(90deg, #25bb55, #12a3a3); }
.gm .gm-sec-h h4 { align-self: stretch; display: flex; align-items: center; gap: 9px; margin: 0; padding: 0 30px 0 13px; background: var(--sec); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); font: 400 20px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); white-space: nowrap; }
.gm-sec-ic { display: inline-grid; } .gm-sec-ic svg { width: 21px; height: 21px; fill: none; stroke: #fff; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.gm-sec-n { margin-left: auto; font: 700 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gm-fg2); text-align: right; }
.gm-sec-note { margin: 9px 2px 14px; font: 500 12.5px/1.4 var(--sans); color: var(--gm-fg2); }
/* jump rows: pills to a section (under the pick) or to a kind (under a section's heading); a jump lands under the sticky bars */
.gm-jumps { display: flex; gap: 8px; margin: 12px 0 2px; padding: 2px 2px 6px; overflow-x: auto; scrollbar-width: none; } .gm-jumps::-webkit-scrollbar { display: none; }
.gm-jumps.top { margin: 22px 0 -8px; }
:root .gm .gm-jump { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 9px 0 13px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .13); color: #fff; font: 400 14px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); transition: transform .08s, background .12s; }
:root .gm .gm-jump:hover { background: rgba(255, 255, 255, .24); color: #fff; } :root .gm .gm-jump:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.gm-jump b { font-weight: 400; } .gm-jump span { padding: 3px 7px 2px; border-radius: 999px; background: rgba(9, 8, 48, .55); font: 700 11px/1.2 var(--sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.gm-jump .gm-sec-ic svg { width: 17px; height: 17px; }
.gm-sec, .gm-sub { scroll-margin-top: calc(var(--ph-h, 0px) + 66px); }
/* a group's label inside a section (On your name: flairs, badges, frames, cards) */
.gm-sub { display: flex; align-items: center; gap: 9px; margin: 20px 2px 12px; }
.gm-sec-note + .gm-sub { margin-top: 4px; }
.gm-sub b { font: 400 16px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.gm-sub span { padding: 3px 8px 2px; border-radius: 999px; background: rgba(255, 255, 255, .16); font: 700 11px/1.2 var(--sans); color: #fff; font-variant-numeric: tabular-nums; }
.gm-sub::after { content: ''; flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.gm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); grid-auto-rows: 214px; grid-auto-flow: dense; gap: 18px 12px; }
:root .gm .gm-tile { position: relative; display: block; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 16px; background: none; box-shadow: none; color: #fff; font: inherit; text-align: center; cursor: pointer; transition: transform .16s cubic-bezier(.2, .8, .3, 1.3); }
.gm-tile.wide { grid-column: span 2; }
.gm-t-in { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; border: 3px solid var(--tb); background: radial-gradient(120% 78% at 50% 34%, var(--t1) 0%, var(--t2) 48%, var(--t3) 100%); box-shadow: 0 5px 0 rgba(0, 0, 0, .42), 0 14px 18px -10px rgba(0, 0, 0, .7); transition: box-shadow .16s; }
.gm-t-in::before { content: ''; position: absolute; left: 50%; top: 36%; width: 640px; height: 640px; margin: -320px 0 0 -320px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; pointer-events: none; }
.gm-t-in::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: 3; background: linear-gradient(105deg, transparent 15%, rgba(255, 255, 255, .42) 50%, transparent 85%); transform: translateX(-170%) skewX(-16deg); pointer-events: none; }
:root .gm .gm-tile:hover { background: none; color: #fff; transform: translateY(-5px) scale(1.02); box-shadow: none; z-index: 2; }
.gm-tile:hover .gm-t-in { box-shadow: 0 8px 0 rgba(0, 0, 0, .42), 0 22px 26px -10px var(--tg); }
.gm-tile:hover .gm-t-in::after { transform: translateX(300%) skewX(-16deg); transition: transform .65s ease; }
:root .gm .gm-tile:active { transform: translateY(2px) scale(.97); transition-duration: .06s; }
.gm-t-art { position: relative; z-index: 1; flex: 1; min-height: 0; display: grid; place-items: center; }
.gm-t-band { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: -34px; padding: 26px 8px 8px; background: linear-gradient(180deg, rgba(7, 8, 44, 0), rgba(7, 8, 44, .8) 52%); }
.gm-t-name { font: 400 15px/1.06 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.gm-tile.long .gm-t-name { font-size: 13.5px; }
.gm-tile.wide .gm-t-name { font-size: 17px; }
.gm-tile.wide .gm-t-art > :is(.gm-ctx, .gm-ring, .gm-card) { margin-top: -5%; } /* the offsets are in widths, and a wide tile is two */
.gm-tile.wide .gm-t-art > .gm-ctx.chat { transform: scale(1.3) rotate(-4deg); } .gm-tile.wide .gm-t-art > .gm-ctx.board { transform: scale(1.12); } .gm-tile.wide .gm-t-art > .gm-ring { transform: scale(1.12); } .gm-tile.wide .gm-t-art > .gm-ring.lk-fa { transform: none; }
.gm-t-bar { position: relative; z-index: 2; flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; background: var(--gm-navy, #0a0c33); font: 400 18px/1 var(--gmf); font-variant-numeric: tabular-nums; color: #fff; }
.gm-price { display: inline-flex; align-items: center; gap: 6px; }
.gm-price .gem-c { width: 20px; height: 18px; }
.gm-t-bar.own { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #9dffc0; }
.gm-t-bar.on { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(180deg, #6bf592, #25bb55); color: #06310f; }
.gm-ck { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gm-tile.on .gm-t-in { border-color: #8dffb0; box-shadow: 0 5px 0 rgba(0, 0, 0, .42), 0 0 0 3px rgba(107, 245, 146, .45), 0 14px 18px -10px rgba(0, 0, 0, .7); }
.gm-tile.just .gm-t-in { animation: gm-glint .9s ease-out; }
@keyframes gm-glint { from { filter: brightness(1.6); } to { filter: none; } }

/* what's on a tile: each kind where it shows, as big as the tile lets it */
.gm-propwrap { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.gm-propwrap > * { grid-area: 1 / 1; }
.gm-prop { display: block; width: 100%; height: auto; aspect-ratio: 520 / 300; }
.gm-t-art .gm-prop { width: 160%; max-width: none; margin-top: -4%; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .3)); }
.gm-tile.wide .gm-t-art .gm-prop { width: 104%; }
.gm-tile.k-decor .gm-t-art .gm-prop { width: 128%; }
.gm-tile.wide.k-decor .gm-t-art .gm-prop { width: 88%; margin-top: -6%; }
.gm-cel-well .gm-prop { width: 158%; max-width: none; } .gm-cel.k-decor .gm-cel-well .gm-prop, .gm-cf-art.k-decor .gm-prop { width: 124%; }
.gm-propwrap.drawn .gm-propfb { visibility: hidden; }
.gm-wear { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.gm-wear svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
/* a flair: your name in its colour, in a chat bubble of the game's own paper */
.gm-ctx { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 7px 10px; border-radius: 8px; background: var(--paper); border: 1px solid var(--rule); font: 500 13px var(--sans); color: var(--ink); }
.gm-ctx.chat b { white-space: nowrap; } .gm-ctx.chat span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.gm-t-art, .gm-hero-art, .gm-cf-art, .gm-cel-well, .gm-mp-front) > .gm-ctx.chat { position: relative; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 84%; margin-top: -10%; padding: 10px 13px 11px; border: 0; border-radius: 14px 14px 14px 4px; box-shadow: 0 5px 0 rgba(0, 0, 0, .3); transform: rotate(-4deg); }
:is(.gm-t-art, .gm-hero-art, .gm-cf-art, .gm-cel-well, .gm-mp-front) > .gm-ctx.chat b { font: 700 17px/1.15 var(--sans); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
:is(.gm-t-art, .gm-hero-art, .gm-cf-art, .gm-cel-well, .gm-mp-front) > .gm-ctx.chat span { font-size: 11px; max-width: 100%; }
/* a badge: a sticker, your name under it */
:is(.gm-t-art, .gm-hero-art, .gm-cf-art, .gm-cel-well, .gm-mp-front) > .gm-ctx.board { flex-direction: column; gap: 7px; margin-top: -12%; padding: 0; border: 0; background: none; }
.gm-badge { display: inline-grid; place-items: center; } .gm-badge svg, .gm-hatch { width: 26px; height: 26px; display: block; }
:is(.gm-t-art, .gm-hero-art, .gm-cf-art, .gm-cel-well, .gm-mp-front) .gm-badge { width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff 0%, #f1f3ff 62%, #d9def6 100%); box-shadow: 0 5px 0 rgba(0, 0, 0, .3), inset 0 -4px 0 rgba(0, 0, 0, .08); transform: rotate(-8deg); }
:is(.gm-t-art, .gm-hero-art, .gm-cf-art, .gm-cel-well, .gm-mp-front) .gm-badge svg { width: 58px; height: 58px; }
.gm-badge.sm svg { width: 18px; height: 18px; }
.gm-badge-n { font-size: 14px; font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.gm-t-art, .gm-hero-art, .gm-cf-art, .gm-cel-well, .gm-mp-front) .gm-badge-n { padding: 3px 9px; border-radius: 999px; background: var(--paper); color: var(--ink); font: 700 11.5px/1.3 var(--sans); max-width: 104px; }
/* a frame: the ring round your initial */
.gm-ring { display: grid; place-items: center; width: 74px; height: 74px; margin-top: -12%; border-radius: 50%; background: var(--paper-3, #3a352e); color: var(--ink-2); font: 700 28px/1 var(--sans); box-shadow: 0 0 0 6px var(--c), 0 0 0 9px rgba(255, 255, 255, .5), 0 9px 0 6px rgba(0, 0, 0, .28); }
.gm-ring.lk-fa { box-shadow: none; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .26)); } /* a frame with its own picture (#896, items-frames.css): the picture is the ring */
/* a store card: tilted, with its shadow */
.gm-card { display: flex; flex-direction: column; gap: 5px; width: 78%; max-width: 200px; padding: 10px 12px; border-radius: 8px; background: var(--bg); color: var(--ink); border-top: 4px solid var(--ac); box-shadow: 0 6px 0 rgba(0, 0, 0, .3); text-align: left; }
:is(.gm-t-art, .gm-hero-art) > .gm-card { margin-top: -10%; transform: rotate(-5deg); }
.gm-card b { font: 700 13px var(--sans); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-card small { font-size: 11px; color: var(--ac); }
.gm-card i { display: block; height: 5px; border-radius: 3px; background: var(--ac); opacity: .55; }
.gm-card i + i { width: 60%; opacity: .3; }
.gm-card.mini { flex: none; width: 96px; padding: 7px 8px; gap: 4px; box-shadow: none; }
.gm-card.mini b { font-size: 11px; } .gm-card.mini i { height: 4px; }
.gm-card.mini.plain { --bg: var(--paper); --ink: var(--ink-2); --ac: var(--rule-2); }
.gm-card.big { width: 260px; max-width: 86%; gap: 8px; padding: 16px 18px; } .gm-card.big b { font-size: 17px; } .gm-card.big small { font-size: 13px; } .gm-card.big i { height: 7px; }
.gm-scene { width: 86%; max-width: 200px; height: auto; border-radius: 6px; }
.gm-glow { width: 54px; height: 54px; border-radius: 12px; background: #1e1a15; box-shadow: inset 0 0 0 3px var(--c); }
.gm-chip { width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px rgba(255, 255, 255, .5), 0 6px 0 4px rgba(0, 0, 0, .25); }

/* your look (desktop): how others see you, on a little stage. Your picture in its frame, your name as a chat line and
   your store card sit on the game's own paper, so flairs and cards read as they will; a try-on adds its nudge */
.gm-lbl { font: 700 10.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.gm-look { position: relative; display: flex; align-items: stretch; margin: 18px 0 0; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .07)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), 0 4px 0 rgba(0, 0, 0, .28); }
.gm-look > .gm-lbl { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 26px 0 14px; background: linear-gradient(90deg, #ffb31f, #ff7a3d); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); letter-spacing: 0; text-transform: none; }
.gm-look > .gm-lbl b { font: 400 18px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); white-space: nowrap; }
.gm-look > .gm-lbl small { font: 700 9.5px/1.1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: rgba(70, 28, 0, .85); white-space: nowrap; }
.gm-look-row { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px 12px 6px; }
.gm-look-me { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 6px; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .28); }
.gm-look.pulse::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(255, 231, 99, .2); box-shadow: inset 0 0 0 3px #ffe763; opacity: 0; animation: gm-flash .8s ease-out; }
@keyframes gm-flash { from { opacity: 1; } to { opacity: 0; } }
.gm-look-av { flex: none; display: inline-flex; padding: 9px; } /* room for a frame's picture, which reaches past the ring */
.gm-look-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-family: var(--sans); }
.gm-look-who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-look-who small { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-look-try { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px 11px 14px; border-radius: 12px; background: rgba(9, 8, 48, .6); box-shadow: inset 0 0 0 2px var(--tb, #8f9dff); }
.gm-look-try-t { flex: 1; min-width: 0; font: 600 12.5px/1.25 var(--sans); color: rgba(255, 255, 255, .85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-look-try-t b { display: block; font: 400 16px/1.1 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: var(--tl, #fff); overflow: hidden; text-overflow: ellipsis; }
.gm-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-3); color: var(--ink-2); font: 600 14px/1 var(--sans); flex: none; }
.gm-av.sm { width: 26px; height: 26px; font-size: 12px; }
.gm-av.lg { width: 44px; height: 44px; font-size: 18px; }
.gm-av.xl { width: 64px; height: 64px; font-size: 26px; }

/* get Gems: a tile per pack. The pile grows with the pack, the bonus bursts off the corner, the price is the button */
.gm-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; margin-top: 18px; }
.gm-pack { position: relative; min-width: 0; }
.gm-pack.wide { grid-column: span 2; }
.gm-pack.p0, .gm-sheet.p0, .gm-cel-land.p0 { --t1: #6ec6ff; --t2: #1e6df2; --t3: #0b2a94; --tb: #93d6ff; --tg: rgba(30, 109, 242, .6); }
.gm-pack.p1, .gm-sheet.p1, .gm-cel-land.p1 { --t1: #dc92ff; --t2: #8d36f2; --t3: #3e1295; --tb: #e5adff; --tg: rgba(141, 54, 242, .6); }
.gm-pack.p2, .gm-sheet.p2, .gm-cel-land.p2 { --t1: #ff9ad6; --t2: #ee3597; --t3: #86104f; --tb: #ffb8e2; --tg: rgba(238, 53, 151, .6); }
.gm-pack.p3, .gm-sheet.p3, .gm-cel-land.p3 { --t1: #ffb884; --t2: #ff6a2b; --t3: #9d2a08; --tb: #ffcba6; --tg: rgba(255, 106, 43, .6); }
.gm-pack.p4, .gm-sheet.p4, .gm-cel-land.p4 { --t1: #ffe37d; --t2: #f79812; --t3: #9c4005; --tb: #ffec95; --tg: rgba(247, 152, 18, .6); }
.gm-pk-in { position: relative; display: flex; flex-direction: column; align-items: center; height: 100%; overflow: hidden; padding: 12px 10px 14px; border-radius: 18px; border: 3px solid var(--tb); background: radial-gradient(120% 70% at 50% 28%, var(--t1) 0%, var(--t2) 50%, var(--t3) 100%); box-shadow: 0 5px 0 rgba(0, 0, 0, .42), 0 16px 22px -12px var(--tg); }
.gm-pk-in::before { content: ''; position: absolute; left: 50%; top: 68px; width: 640px; height: 640px; margin: -320px 0 0 -320px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; pointer-events: none; }
.gm-pk-art { position: relative; display: grid; place-items: center; width: 100%; height: 116px; }
.gm-pk-art .gm-pile { height: 116px; width: auto; max-width: 100%; overflow: visible; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .22)); }
.gm-pk-txt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; margin-top: 14px; min-width: 0; }
.gm-pk-nick { font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.gm-pk-n { display: flex; align-items: center; gap: 7px; font: 400 30px/1 var(--gmf); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.gm-pk-n .gem-c { width: 26px; height: 24px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.gm-pk-sub { font: 700 12px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.gm-pk-buy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: auto; padding-top: 12px; }
:root .gm .gm-pk-btn { width: 100%; min-height: 46px; font-size: 21px; font-variant-numeric: tabular-nums; }
.gm-pack.wide .gm-pk-in { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); grid-template-rows: 1fr auto; column-gap: 12px; align-items: center; padding: 14px 16px 16px 10px; }
.gm-pack.wide .gm-pk-in::before { left: 24%; top: 50%; }
.gm-pack.wide .gm-pk-art { grid-row: 1 / 3; height: 168px; } .gm-pack.wide .gm-pk-art .gm-pile { height: 168px; }
.gm-pack.wide .gm-pk-txt { align-self: end; margin: 0; }
.gm-pack.wide .gm-pk-n { font-size: 38px; }
.gm-pack.wide .gm-pk-buy { align-self: start; }
.gm-burst { position: absolute; top: -12px; right: -9px; z-index: 4; display: grid; place-content: center; width: 66px; height: 66px; text-align: center; color: #fff; font: 700 9.5px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; transform: rotate(12deg); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .38)); pointer-events: none; }
.gm-burst::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #ff5b8d, #ff2a66); clip-path: polygon(50% 0%, 59.1% 10%, 71.7% 5%, 75.6% 17.9%, 89.1% 18.8%, 86.9% 32.2%, 98.7% 38.9%, 91% 50%, 98.7% 61.1%, 86.9% 67.8%, 89.1% 81.2%, 75.6% 82.1%, 71.7% 95%, 59.1% 90%, 50% 100%, 40.9% 90%, 28.3% 95%, 24.4% 82.1%, 10.9% 81.2%, 13.1% 67.8%, 1.3% 61.1%, 9% 50%, 1.3% 38.9%, 13.1% 32.2%, 10.9% 18.8%, 24.4% 17.9%, 28.3% 5%, 40.9% 10%); }
.gm-burst b { display: block; font: 400 18px/1 var(--gmf); letter-spacing: 0; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.gm-pack.wide .gm-burst { width: 78px; height: 78px; font-size: 11px; } .gm-pack.wide .gm-burst b { font-size: 22px; }
.gm-fn { margin: 16px 2px 0; font: 500 12px var(--sans); color: var(--gm-fg3); }
.gm-dev.link, .gm .gm-dev.link { margin: 0; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; font: 500 11px/1.2 var(--sans); color: #ffe9a6; text-decoration: underline dotted; text-underline-offset: 2px; white-space: nowrap; }
:root .gm-dev.link:hover { background: none; color: #fff; }
.gm-cap { margin: 10px 2px 0; font: 500 12.5px var(--sans); color: var(--gm-fg2); }
.gm-cap.full { color: #ffd98a; }

/* pinned to the bottom of the scrolling panel, on every view of the store. Sticky stops at the panel's bottom padding
   (--gm-pb: 40 px on desktop, 30 in the full panel, 24 on the phone), which the stage's negative margin covers, so the
   footer reaches that far past it and sits on the panel's very edge */
#panel.full .gm { --gm-pb: 30px; }
.gm-foot { position: sticky; bottom: calc(-1 * var(--gm-pb)); z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 calc(-1 * var(--gm-pad)); padding: 9px var(--gm-pad) 10px; background: #0b0a30; box-shadow: 0 -2px 0 rgba(255, 255, 255, .1); font: 500 12px/1.3 var(--sans); color: rgba(255, 255, 255, .78); }
.gm-main { position: relative; z-index: 0; flex: 1 0 auto; padding-bottom: 30px; } /* its own layer: a tag or a lifted tile never climbs over the plate or the footer */
.gm-foot .gem-c { width: 15px; height: 14px; }
.gm-empty { padding: 24px 0; color: var(--gm-fg2); }

/* ---- the item's detail: over the panel on desktop (it covers the panel; the panel's scroll stays where it was), a
   bottom sheet on the phone. The same indigo room; the item on a stage in its tier's colours ---- */
.gm-dv { position: absolute; inset: 0; z-index: 30; display: flex; }
.gm-dv-box { flex: 1; min-width: 0; display: flex; flex-direction: column; color: #fff; 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); }
.gm-dv.enter .gm-dv-box { animation: gm-in .26s cubic-bezier(.2, .7, .3, 1); }
@keyframes gm-in { from { opacity: 0; transform: translateX(28px); } }
.gm-dv-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 26px 14px; background: linear-gradient(180deg, #5340e0, #3527ad); box-shadow: 0 4px 0 #1c1570, 0 14px 18px -10px rgba(0, 0, 0, .7); }
.gm-dv-bal { padding-right: 14px; }
.gm-dv-scroll { flex: 1; min-height: 0; overflow: auto; padding: 22px 26px 22px; }
.gm-stage { position: relative; display: grid; place-items: center; min-height: 290px; overflow: hidden; border-radius: 20px; border: 3px solid var(--tb); background: radial-gradient(90% 95% at 50% 44%, var(--t1) 0%, var(--t2) 50%, var(--t3) 100%); box-shadow: 0 6px 0 rgba(0, 0, 0, .4), 0 22px 34px -14px var(--tg); isolation: isolate; }
.gm-stage::before { content: ''; position: absolute; left: 50%; top: 46%; z-index: -1; width: 1200px; height: 1200px; margin: -600px 0 0 -600px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; pointer-events: none; }
.gm-stage.art { height: clamp(216px, 42vh, 400px); min-height: 0; }
.gm-stage.art .gm-propwrap { grid-template: 100% / 100%; justify-items: center; } /* a definite row, so the picture can take the stage's height */
.gm-stage.art .gm-prop { width: auto; height: 104%; max-width: none; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .35)); }
.gm-dv.k-decor .gm-stage.art .gm-prop { height: 88%; }
.gm-stage.art > :is(.gm-ctx, .gm-ring, .gm-card, .gm-chip) { transform: scale(1.6); }
.gm-stage.looks { place-items: stretch; align-content: center; gap: 8px; padding: 26px 28px; }
.gm-stage .gm-lbl { color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.gm-stage.looks > .gm-lbl:not(:first-child) { margin-top: 8px; }
.gm-stage.looks .gm-card.big { justify-self: center; margin-top: 4px; transform: rotate(-3deg); }
.gm-chat, .gm-brow, .gm-prof { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 rgba(0, 0, 0, .28); font: 500 14px/1.3 var(--sans); min-width: 0; }
.gm-chat > span:last-child { min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gm-chat b { color: var(--ink); }
.gm-brow i { font-style: normal; width: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .gm-brow b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-brow em { font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gm-prof { gap: 16px; padding: 16px; } .gm-prof > .lk-frame, .gm-prof > .pl-frame { margin: 5px; } .gm-prof b { display: block; font-size: 18px; } .gm-prof small { color: var(--ink-3); font-size: 12px; }
/* try it on: your animals as thumbnails with short names; the picked one sits on the tier's colours in a yellow ring */
.gm-strip-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 20px 2px 8px; }
.gm-strip-h .gm-lbl { font: 400 16px/1 var(--gmf); letter-spacing: .04em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.gm-strip-n { font: 500 12px var(--sans); color: rgba(255, 255, 255, .62); }
.gm-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 5px 10px; margin: 0 -5px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
:root .gm .gm-pick { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: rgba(255, 255, 255, .8); font: inherit; transition: transform .12s; }
:root .gm .gm-pick:hover { background: none; color: #fff; transform: translateY(-2px); box-shadow: none; }
:root .gm .gm-pick:active { background: none; transform: scale(.95); box-shadow: none; }
.gm-pick-w { display: grid; place-items: center; width: 68px; height: 68px; overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .3), rgba(255, 255, 255, .09)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 3px 0 rgba(0, 0, 0, .3); }
.gm-pick-w canvas { width: 122px; height: 70px; flex: none; }
.gm .gm-pick.on .gm-pick-w { background: radial-gradient(circle at 50% 40%, var(--t1), var(--t2)); box-shadow: 0 0 0 3px #ffe763, 0 3px 0 3px rgba(0, 0, 0, .3); }
.gm-pick-n { max-width: 74px; font: 600 11.5px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm .gm-pick.on .gm-pick-n { color: #fff; font-weight: 700; }
.gm-dv-txt { margin-top: 20px; }
.gm .gm-dv-txt h3, body.mobile #view .gm .gm-dv-txt h3 { margin: 7px 0 8px; font: 400 32px/1 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.gm-dv-txt p { margin: 0; max-width: 46em; font: 500 14px/1.5 var(--sans); color: rgba(255, 255, 255, .85); }
/* the buy bar: what you have (or what you're short, with the pack that covers it), then the big button */
.gm-dv-bar { position: relative; z-index: 1; padding: 12px 26px 20px; background: #0d0b38; box-shadow: 0 -3px 0 rgba(255, 255, 255, .1); }
.gm-dv-note { margin: 0 0 12px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 500 13px/1.3 var(--sans); color: rgba(255, 255, 255, .8); }
.gm-dv-note b { display: inline-flex; align-items: center; gap: 4px; font: 400 15px/1 var(--gmf); color: #fff; font-variant-numeric: tabular-nums; } .gm-dv-note .gem-c { width: 16px; height: 14px; }
.gm-dv-note.warn { color: #ff9c9c; font-weight: 700; }
.gm-dv-note.short { justify-content: space-between; gap: 8px 12px; } .gm-dv-note.short > span { display: inline-flex; align-items: center; gap: 5px; color: #ffd98a; font-weight: 700; font-size: 14px; }
.gm-dv-acts { display: flex; align-items: center; gap: 10px; }
:root .gm-dv-acts .gm-btn { min-height: 54px; }
:root .gm-dv-acts > .gm-btn:first-child { flex: 1; min-width: 0; font-size: 22px; }
.gm-st { flex: none; display: inline-flex; align-items: center; gap: 7px; font: 400 15px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; color: #9dffc0; white-space: nowrap; }
.gm-st.big { flex: 1; font-size: 20px; } .gm-st.big .gm-ck { width: 20px; height: 20px; }
.gm-dress span { min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* history: one row per entry. Gems in are green with an arrow up, Gems out red with an arrow down */
.gm-sec-h.s-hist { margin-top: 22px; --sec: linear-gradient(90deg, #1fa2ff, #5b5bff); }
.gm-ledger { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.gm-lrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: 'ic what amt' 'ic when after'; column-gap: 12px; row-gap: 3px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.gm-l-ic { grid-area: ic; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .16); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.gm-l-ic svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gm-lrow.in .gm-l-ic { background: linear-gradient(180deg, #6bf592, #25bb55); } .gm-lrow.in .gm-l-ic svg { stroke: #06310f; }
.gm-lrow.out .gm-l-ic { background: linear-gradient(180deg, #ff9a9a, #e3474f); } .gm-lrow.out .gm-l-ic svg { stroke: #4a0509; }
.gm-what { grid-area: what; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px/1.25 var(--sans); color: rgba(255, 255, 255, .82); } .gm-what b { color: #fff; font-weight: 700; }
.gm-when { grid-area: when; font: 500 12px/1.2 var(--sans); color: rgba(255, 255, 255, .6); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gm-amt { grid-area: amt; justify-self: end; font: 400 19px/1 var(--gmf); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.gm-lrow.in .gm-amt { color: #7dfa9f; } .gm-lrow.out .gm-amt { color: #ff9c9c; }
.gm-after { grid-area: after; justify-self: end; display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1.2 var(--sans); color: rgba(255, 255, 255, .62); white-space: nowrap; font-variant-numeric: tabular-nums; } .gm-after .gem-c { width: 13px; height: 12px; }
.gm-ledger .fn-note { margin: 8px 2px 0; font: 500 12px/1.4 var(--sans); color: rgba(255, 255, 255, .62); }
.gm .gm-empty, .gm .gm-ledger .nb-empty, body.mobile #view .gm .gm-empty { padding: 28px 16px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85); font: 500 14px/1.4 var(--sans); font-style: normal; text-align: center; }

/* ---- the game's dialog, dressed as the store while it holds the unlock confirm or the checkout sheet ---- */
#modalBox2:has(.gm-cf, .gm-sheet), body.mobile #modalBox2:has(.gm-cf, .gm-sheet) { color: #fff; border: 0; border-radius: 22px; background-color: #17124f; background-image: radial-gradient(110% 300px 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); box-shadow: 0 0 0 3px #8f9dff, 0 8px 0 3px rgba(0, 0, 0, .45), 0 30px 60px rgba(0, 0, 0, .6); }
#modalBox2:has(.gm-cf, .gm-sheet) h2, body.mobile #modalBox2:has(.gm-cf, .gm-sheet) h2 { margin: 0 0 14px; font: 400 26px/1.08 var(--gmf); letter-spacing: .02em; text-transform: uppercase; text-align: center; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); text-wrap: balance; }
#modalBox2:has(.gm-cf, .gm-sheet) .actions { display: flex; gap: 10px; margin-top: 16px !important; justify-content: stretch !important; } /* over the dialog's inline spacing */
#modalBox2:has(.gm-cf) .actions button[type=submit] { flex: 1; }
#modalBox2:has(.gm-sheet) .actions button { flex: 1; }
/* the unlock confirm: the item on its tier's colours, the price, what you have and what you'll have left (or need) */
.gm-cf { display: flex; flex-direction: column; }
.gm-cf-stage { position: relative; display: grid; place-items: center; height: 172px; overflow: hidden; border-radius: 18px; border: 3px solid var(--tb); background: radial-gradient(90% 100% at 50% 44%, var(--t1) 0%, var(--t2) 52%, var(--t3) 100%); box-shadow: 0 5px 0 rgba(0, 0, 0, .4); isolation: isolate; }
.gm-cf-stage::before { content: ''; position: absolute; left: 50%; top: 46%; z-index: -1; width: 900px; height: 900px; margin: -450px 0 0 -450px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; }
.gm-cf-art { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.gm-cf-art .gm-prop { width: 74%; max-width: 300px; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .3)); }
.gm-cf.k-decor .gm-cf-art .gm-prop { width: 56%; }
.gm-cf-art > :is(.gm-ctx, .gm-ring, .gm-card) { margin-top: 0; }
.gm-cf-art > .gm-card { width: 190px; transform: rotate(-4deg); }
.gm-cf-txt { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; text-align: center; }
.gm-cf-txt b { font: 400 25px/1.05 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.gm-cf-sum { margin-top: 14px; overflow: hidden; border-radius: 14px; background: rgba(9, 8, 48, .6); }
.gm-cf-sum > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; font: 600 13.5px/1.2 var(--sans); color: rgba(255, 255, 255, .8); }
.gm-cf-sum > div + div { border-top: 1px solid rgba(255, 255, 255, .1); }
.gm-cf-sum b { display: inline-flex; align-items: center; gap: 6px; font: 400 17px/1 var(--gmf); font-variant-numeric: tabular-nums; color: #fff; }
.gm-cf-sum .gem-c { width: 18px; height: 16px; }
.gm-cf-sum > .gm-cf-left { padding: 11px 14px; background: rgba(107, 245, 146, .15); color: #fff; } .gm-cf-left b { font-size: 20px; color: #8dffb0; }
.gm-cf-sum > .gm-cf-left.neg { background: rgba(255, 90, 90, .18); } .gm-cf-left.neg b { color: #ffa3a3; }
.gm-cf-note { margin: 12px 2px 0; font: 500 12.5px/1.4 var(--sans); color: rgba(255, 255, 255, .75); text-align: center; }

/* the checkout sheet: the pack on its colours, the price, a big Pay; Stripe's own checkout takes the sheet over */
.gm-sheet { display: flex; flex-direction: column; gap: 14px; min-width: min(360px, 80vw); }
.gm-sh-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; overflow: hidden; padding: 14px 12px 16px; border-radius: 18px; border: 3px solid var(--tb); background: radial-gradient(110% 80% at 50% 34%, var(--t1) 0%, var(--t2) 50%, var(--t3) 100%); box-shadow: 0 5px 0 rgba(0, 0, 0, .4); isolation: isolate; }
.gm-sh-hero::before { content: ''; position: absolute; left: 50%; top: 70px; z-index: -1; width: 900px; height: 900px; margin: -450px 0 0 -450px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; }
.gm-sh-art { display: grid; place-items: center; height: 118px; }
.gm-sh-art .gm-pile { height: 118px; width: auto; overflow: visible; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .22)); }
.gm-sh-n { display: flex; align-items: center; justify-content: center; gap: 8px; font: 700 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.gm-sh-n .gem-c { width: 28px; height: 26px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .3)); }
.gm-sh-n b { font: 400 36px/1 var(--gmf); letter-spacing: 0; font-variant-numeric: tabular-nums; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.gm-sh-sub { font: 700 12.5px/1.2 var(--sans); color: rgba(255, 255, 255, .94); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); text-align: center; }
.gm-sh-hero .gm-burst { top: 6px; right: 6px; }
.gm-sh-body { display: flex; flex-direction: column; gap: 12px; }
.gm-sh-rows { overflow: hidden; border-radius: 14px; background: rgba(9, 8, 48, .6); }
.gm-sh-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 14px; font: 500 13px/1.3 var(--sans); color: rgba(255, 255, 255, .8); }
.gm-sh-rows > div + div { border-top: 1px solid rgba(255, 255, 255, .1); }
.gm-sh-rows > div > :first-child { flex: none; white-space: nowrap; } .gm-sh-rows > div > :last-child { text-align: right; }
.gm-sh-total > span { color: #fff; font-weight: 700; }
.gm-sh-total b { font: 400 28px/1 var(--gmf); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
:root .gm-sh-pay { width: 100%; min-height: 56px; font-size: 23px; font-variant-numeric: tabular-nums; }
.gm-sh-soon { margin: 0; font: 600 12.5px/1.3 var(--sans); color: #ffd98a; text-align: center; }
.gm-sheet .gm-dev.link { align-self: center; }
.gm-sh-fine { margin: 0; font: 500 11.5px/1.45 var(--sans); color: rgba(255, 255, 255, .66); }
.gm-sh-fine a { color: #fff; }
.gm-co-head { display: flex; align-items: center; }
#modalBox2 .gm-co-head .linkish { min-height: 0; padding: 4px 2px; border: 0; background: none; box-shadow: none; color: #fff; font: 700 13.5px var(--sans); text-decoration: underline; text-underline-offset: 3px; }
.gm-co-mount { min-height: 260px; border-radius: 14px; overflow: hidden; background: #fff; }
.gm-co-wait { display: grid; place-items: center; min-height: 260px; color: #5d564c; font: 500 14px var(--sans); } .gm-co-wait.err { color: #8b3a2b; padding: 0 20px; text-align: center; }
.gm-co-secure { margin: 0; font: 500 11.5px/1.4 var(--sans); color: rgba(255, 255, 255, .7); }
.gm-co-done { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 8px; text-align: center; }
#modalBox2 .gm-co-done h3 { margin: 6px 0 0; font: 400 26px/1 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #8dffb0; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.gm-co-done p { margin: 0; font: 500 13.5px/1.4 var(--sans); color: rgba(255, 255, 255, .85); }
.gm-co-spin { width: 30px; height: 30px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .25); border-top-color: #6bf592; animation: gm-spin .9s linear infinite; }
@keyframes gm-spin { to { transform: rotate(360deg); } }
.gm-sheet:has(.gm-sh-co:not([hidden])) { min-width: min(420px, 92vw); }
.gm-sheet:has(.gm-sh-co:not([hidden])) .gm-sh-hero { display: none; } /* the checkout takes the pile's room */

/* ---- the celebrations: one moment each over the dimmed store. Unlocked: rays turn in, the item pops out on its
   tier's colours in a burst of gems, UNLOCKED! lands on top. Gems added: the pile drops in, the amount counts up, gems
   fly into the balance. Transforms and opacity only; none of it with prefers-reduced-motion. ---- */
.gm-cel { position: fixed; inset: 0; z-index: 70; display: grid; align-items: start; justify-items: center; overflow: hidden; padding-top: 11vh; background: rgba(8, 6, 40, .9); color: #fff; animation: gm-fadein .2s ease-out both; }
@keyframes gm-fadein { from { opacity: 0; } }
.gm-cel-land { --tl: #8fc8ff; background: rgba(8, 6, 40, .74); }
.gm-cel .gm-bal-lit { position: fixed; z-index: 74; margin: 0; pointer-events: none; } .gm-cel .gm-bal-lit.noplus { padding-right: 14px; } /* the balance, lit over the dim: the gems fly into it */
.gm-cel-card { --cw: min(360px, calc(100vw - 32px)); position: relative; display: flex; flex-direction: column; align-items: center; width: var(--cw); text-align: center; isolation: isolate; }
.gm-cel[style*="--cx"] .gm-cel-card { position: fixed; left: var(--cx); top: 13vh; margin-left: calc(var(--cw) / -2); }
.gm-cel-rays { position: absolute; left: 50%; top: 178px; z-index: -1; width: 820px; height: 820px; margin: -410px 0 0 -410px; background: repeating-conic-gradient(from 0deg, var(--tl, #ffe763) 0 8deg, transparent 8deg 20deg); -webkit-mask: radial-gradient(circle, #000 12%, transparent 60%); mask: radial-gradient(circle, #000 12%, transparent 60%); opacity: .42; pointer-events: none; animation: gm-rays 1.9s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes gm-rays { from { opacity: 0; transform: scale(.25) rotate(-60deg); } 35% { opacity: .6; } to { opacity: .42; transform: scale(1) rotate(24deg); } }
.gm-cel-word { margin-bottom: 16px; font: 400 54px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: #ffe763; text-shadow: 0 4px 0 #b56a00, 0 9px 0 rgba(0, 0, 0, .35); transform: rotate(-4deg); animation: gm-slam .6s cubic-bezier(.2, .9, .3, 1.2) .3s both; }
@keyframes gm-slam { 0% { opacity: 0; transform: scale(2.6) rotate(-10deg); } 60% { opacity: 1; transform: scale(.9) rotate(-4deg); } 100% { opacity: 1; transform: scale(1) rotate(-4deg); } }
.gm-cel-well { position: relative; display: grid; place-items: center; width: 220px; height: 220px; overflow: hidden; border-radius: 28px; border: 4px solid var(--tb); background: radial-gradient(100% 100% at 50% 42%, var(--t1) 0%, var(--t2) 52%, var(--t3) 100%); box-shadow: 0 8px 0 rgba(0, 0, 0, .42), 0 0 70px var(--tg); isolation: isolate; animation: gm-pop .75s cubic-bezier(.2, .8, .3, 1) both; }
.gm-cel-well::before { content: ''; position: absolute; left: 50%; top: 46%; z-index: -1; width: 700px; height: 700px; margin: -350px 0 0 -350px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; }
@keyframes gm-pop { 0% { opacity: 0; transform: scale(.2) rotate(-14deg); } 55% { opacity: 1; transform: scale(1.12) rotate(4deg); } 78% { transform: scale(.96) rotate(-1deg); } 100% { transform: scale(1) rotate(0); } }
.gm-cel-well .gm-prop { width: 150%; max-width: none; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .32)); }
.gm-cel.k-decor .gm-cel-well .gm-prop { width: 118%; }
.gm-cel-well > :is(.gm-ctx, .gm-ring, .gm-card, .gm-chip) { margin-top: 0; }
.gm-cel-well > .gm-ring { transform: scale(1.5); } .gm-cel-well > .gm-ctx.board { transform: scale(1.3); } .gm-cel-well > .gm-card { width: 170px; transform: rotate(-5deg); }
.gm-cel .gm-tier { margin-top: 18px; animation: gm-fade .4s .5s both; }
.gm-cel .gm-cel-card h3 { margin: 7px 0 6px; font: 400 30px/1.02 var(--gmf); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); animation: gm-fade .4s .56s both; }
.gm-cel p { margin: 0 auto; max-width: 26em; font: 500 13.5px/1.45 var(--sans); color: rgba(255, 255, 255, .88); animation: gm-fade .4s .62s both; }
@keyframes gm-fade { from { opacity: 0; transform: translateY(8px); } }
.gm-cel-act { display: flex; gap: 10px; width: 100%; margin-top: 22px; animation: gm-fade .4s .72s both; }
:root .gm-cel-act .gm-btn { flex: 1; min-width: 0; min-height: 54px; } :root .gm-cel-act .gm-btn.alt { flex: 0 0 auto; } :root .gm-cel-act .gm-btn.alt:only-child { flex: 1; }
.gm-btn > span:not(.gm-btn-p) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gm-cel-land .gm-cel-word { margin-bottom: 4px; font-size: 42px; color: #8dffb0; text-shadow: 0 4px 0 #0e6e2e, 0 9px 0 rgba(0, 0, 0, .35); }
.gm-cel-land .gm-cel-rays { top: 150px; opacity: .3; animation-name: gm-rays-soft; }
@keyframes gm-rays-soft { from { opacity: 0; transform: scale(.25) rotate(-60deg); } 35% { opacity: .42; } to { opacity: .3; transform: scale(1) rotate(24deg); } }
.gm-cel-art { display: grid; place-items: center; height: 160px; }
.gm-cel-art .gm-pile { height: 160px; width: auto; overflow: visible; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .3)); animation: gm-drop .65s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
@keyframes gm-drop { from { opacity: 0; transform: translateY(-46px) scale(.7); } }
.gm-cel-n { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font: 400 58px/1 var(--gmf); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .42); animation: gm-fade .4s .3s both; }
.gm-cel-n .gem-c { width: 46px; height: 42px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); } .gm-cel-n b { font-weight: 400; }
.gm-cel-bal { margin-top: 12px; padding: 8px 16px; border-radius: 999px; background: rgba(9, 8, 48, .78); font: 600 13.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); animation: gm-fade .4s .5s both; }
.gm-cel-bal s { color: rgba(255, 255, 255, .55); } .gm-cel-bal b { color: #8dffb0; }
.gm-fly { position: fixed; z-index: 75; width: 26px; height: 22px; pointer-events: none; }
.gm-fly .gm-art { width: 26px; height: 22px; display: block; }
.gm-fly.star { width: 16px; height: 16px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.gm-bal.land { animation: gm-land 1.5s ease-out .55s; }
@keyframes gm-land { 0%, 100% { transform: none; } 15%, 45%, 75% { transform: scale(1.12); } 30%, 60% { transform: scale(1.03); } }
.gm-cel.calm, .gm-cel.calm * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .gm-hero-fx i, .gm-tile, .gm-t-in::after, .gm-btn, .gm-hero-art, .gm-pick { animation: none !important; transition: none !important; } .gm-cel, .gm-cel *, .gm-dv.enter .gm-dv-box, .gm-dv.enter .gm-dv-scrim, .gm-look.pulse::after, .gm-tile.just .gm-t-in, .gm-bal.land, .gems-chip.up *, .gems-chip.down *, .gm-pill.up *, .gm-pill.down * { animation: none !important; } }

/* the top bar's chip (desktop) and the phone's pill beside "Shop": the gem, the balance in the store's face and a
   green +. It opens the Gem Store (the + goes to Get Gems); the number pops and sparkles when it grows */
#hud .gems-cell.hidden { display: none; }
#hud .gems-chip, .gm-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; min-height: 0; padding: 0 6px 0 10px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #5340e0, #3020a8); color: #fff; font: 400 16.5px/1 var(--gmf); font-variant-numeric: tabular-nums; letter-spacing: .01em; cursor: pointer; box-shadow: inset 0 0 0 1.5px #8f9dff, 0 2px 0 #1c1570; transition: filter .12s, transform .08s; }
:root #hud .gems-chip:hover { background: linear-gradient(180deg, #5340e0, #3020a8); color: #fff; filter: brightness(1.14); }
:root #hud .gems-chip:active { transform: translateY(1px); }
.gc-gem { display: inline-grid; } .gc-gem .gem-c { width: 21px; height: 19px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.gc-n { font-weight: 400; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.gems-chip.neg .gc-n, .gm-pill.neg .gc-n { color: #ffa3a3; }
.gc-plus { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 2px; padding-bottom: 2px; border-radius: 50%; background: linear-gradient(180deg, #6bf592, #25bb55); color: #06310f; font: 400 20px/1 var(--gmf); font-style: normal; box-shadow: 0 2px 0 #0e6e2e, inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform .1s; }
.gems-chip:hover .gc-plus { transform: scale(1.1); }
.gc-spark { position: absolute; inset: 0; pointer-events: none; }
.gc-spark i { position: absolute; width: 11px; height: 11px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; }
.gc-spark i:nth-child(1) { left: 2px; top: -5px; } .gc-spark i:nth-child(2) { left: 46%; top: -8px; width: 14px; height: 14px; } .gc-spark i:nth-child(3) { left: 30%; bottom: -6px; width: 9px; height: 9px; }
.gems-chip.up .gc-n, .gm-pill.up .gc-n { display: inline-block; animation: gm-chip-pop .9s cubic-bezier(.2, .8, .3, 1.2); }
.gems-chip.up .gc-gem, .gm-pill.up .gc-gem { animation: gm-chip-gem .9s ease-out; }
.gems-chip.up .gc-spark i, .gm-pill.up .gc-spark i { animation: gm-chip-spark 1s ease-out both; }
.gems-chip.up .gc-spark i:nth-child(2), .gm-pill.up .gc-spark i:nth-child(2) { animation-delay: .12s; } .gems-chip.up .gc-spark i:nth-child(3), .gm-pill.up .gc-spark i:nth-child(3) { animation-delay: .24s; }
.gems-chip.down .gc-n, .gm-pill.down .gc-n { display: inline-block; animation: gm-chip-dip .6s ease-out; }
@keyframes gm-chip-pop { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes gm-chip-gem { 0%, 100% { transform: none; } 25% { transform: rotate(-18deg) scale(1.25); } 55% { transform: rotate(10deg) scale(1.1); } }
@keyframes gm-chip-spark { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.3) rotate(40deg); } 100% { opacity: 0; transform: scale(.4) rotate(90deg) translateY(-8px); } }
@keyframes gm-chip-dip { 40% { transform: translateY(2px) scale(.92); opacity: .7; } }

/* the phone: the same store; the hero stacks, tiles two across, the detail is a bottom sheet with its buy bar pinned */
body.mobile .gm { --gm-pb: 24px; margin-top: 0; } /* #view pads 14 px at the sides, 24 px at the bottom */
body.mobile .gm-bar { min-height: 54px; gap: 8px; padding: 8px var(--gm-pad) 10px; }
body.mobile #view .gm .gm-title { font-size: 23px; gap: 7px; }
body.mobile .gm-title-gem { width: 30px; height: 25px; }
body.mobile .gm .gm-bal, body.mobile .gm-cel .gm-bal { font-size: 21px; }
body.mobile .gm .gm-plus, body.mobile .gm-cel .gm-plus { width: 32px; height: 32px; padding: 0; border-radius: 10px; }
body.mobile .gm-tabs { gap: 7px; margin-top: 13px; padding: 0 3px; }
body.mobile .gm .gm-tabs button { flex: 1; min-height: 42px; padding: 0 4px; font-size: 14.5px; border-radius: 10px; }
body.mobile .gm-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: 158px auto; min-height: 0; margin-top: 22px; }
body.mobile .gm-hero-fx::before { left: 50%; top: 84px; }
body.mobile .gm-hero-fx b:nth-of-type(1) { left: 12%; top: 22%; } body.mobile .gm-hero-fx b:nth-of-type(2) { left: 80%; top: 30%; } body.mobile .gm-hero-fx b:nth-of-type(3) { left: 74%; top: 12%; } body.mobile .gm-hero-fx b:nth-of-type(4) { left: 20%; top: 38%; }
body.mobile .gm-hero-fx::after { background: linear-gradient(180deg, transparent 34%, rgba(9, 8, 48, .58) 64%, rgba(9, 8, 48, .7) 100%); }
body.mobile .gm-hero-txt { padding: 0 14px 16px; }
body.mobile #view .gm .gm-hero h3 { font-size: 27px; margin: 5px 0 6px; }
body.mobile .gm-hero p { font-size: 13px; }
body.mobile .gm-hero-act { padding-top: 12px; }
body.mobile .gm-hero-art .gm-prop { width: 108%; margin-top: -4%; }
body.mobile .gm-hero.k-decor .gm-hero-art .gm-prop { width: auto; height: 142px; margin-top: 10px; } /* sized by height, inside the picture's 158px row: a tall prop (the tank) stays off the words under it (#930) */
body.mobile .gm-hero-act { width: 100%; flex-wrap: nowrap; }
body.mobile .gm-hero-act .gm-btn { min-height: 52px; padding: 0 14px; } body.mobile .gm-hero-act .gm-buy { flex: 1; }
body.mobile .gm-sec { margin-top: 26px; }
body.mobile .gm .gm-sec-h h4 { font-size: 18px; padding: 0 26px 0 11px; }
body.mobile .gm-sec-n { font-size: 10px; }
body.mobile .gm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 228px; gap: 18px 12px; }
body.mobile .gm-t-name { font-size: 16px; }
body.mobile .gm .gm-tile, body.mobile .gm .gm-hero-art { border-radius: 16px; box-shadow: none; }
body.mobile .gm .gm-tile:hover { transform: none; } body.mobile .gm .gm-tile:active { transform: scale(.96); }
body.mobile .gm-tile:hover .gm-t-in::after { transform: translateX(-170%) skewX(-16deg); transition: none; }
body.mobile .gm .gm-hero-art:hover { transform: none; }
body.mobile .gm-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
body.mobile .gm-burst { right: -5px; } /* inside the page's 14 px edge: nothing may scroll sideways */
body.mobile .gm-pk-n { font-size: 28px; }
body.mobile .gm-pack.wide .gm-pk-txt { margin-top: 44px; } body.mobile .gm-pack.wide .gm-pk-n { font-size: 34px; } /* clear of the burst on the corner */
body.mobile .gm-pack.wide .gm-burst { width: 70px; height: 70px; font-size: 10px; } body.mobile .gm-pack.wide .gm-burst b { font-size: 19px; }
body.mobile .gm .gm-pk-btn { min-height: 50px; }
body.mobile .gm .gm-dev.link { min-height: 24px; }
body.mobile .gm-foot { font-size: 11.5px; }
/* without the 3D model the phone paints the flat coil at the size it shows (as in the Collection): it fills the box */
canvas[data-fill].gm-prop, .gm-pick-w canvas[data-fill] { width: 100% !important; height: 100% !important; max-width: none; margin: 0 !important; aspect-ratio: auto; filter: none; } /* the flat coil paints at the size it shows */
body.mobile .gm-t-art .gm-propwrap:has(canvas[data-fill]) { bottom: 18px; }
body.mobile .gm-hero-art > :is(.gm-ctx, .gm-card, .gm-chip) { transform: scale(1.45) rotate(-4deg); }
body.mobile .gm-hero-art > .gm-ring { transform: scale(1.2); } body.mobile .gm-hero-art > .gm-ring.lk-fa { transform: scale(1.05); }
/* the detail: a sheet from the bottom, the stage on top, the buy bar pinned */
/* the sheet fits the page area between the header and the tab bar (#987): an iPhone clips a fixed sheet to the scroller it
   is drawn in, so one sized to the whole screen lost its buttons behind the tab bar. gemstore.js fitSheet sets the insets. */
body.mobile .gm-dv { position: fixed; inset: var(--gm-dv-t, 0px) 0 var(--gm-dv-b, 0px); z-index: 50; display: block; }
body.mobile .gm-dv-scrim { position: absolute; inset: 0; background: rgba(8, 6, 40, .66); }
body.mobile .gm-dv.enter .gm-dv-scrim { animation: gm-fadein .2s ease-out; }
body.mobile .gm-dv-box { position: absolute; left: 0; right: 0; bottom: 0; height: 90%; height: min(90dvh, calc(100% - 12px - env(safe-area-inset-top))); overflow: hidden; border-radius: 22px 22px 0 0; box-shadow: 0 -3px 0 #8f9dff, 0 -14px 34px rgba(0, 0, 0, .5); }
body.mobile .gm-dv.enter .gm-dv-box { animation: gm-up-in .28s cubic-bezier(.2, .7, .3, 1); }
@keyframes gm-up-in { from { transform: translateY(40px); opacity: .4; } }
body.mobile .gm-dv-grip { flex: none; width: 44px; height: 5px; margin: 9px auto 0; border-radius: 3px; background: rgba(255, 255, 255, .45); }
body.mobile .gm .gm-dv-x, body.mobile .gm .gm-dv-x:hover { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; min-height: 0; padding: 0 0 3px; border: 0; border-radius: 50%; background: rgba(9, 8, 48, .75); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); color: #fff; font: 400 26px/1 var(--sans); }
body.mobile .gm-dv-scroll { padding: 12px 14px 16px; }
body.mobile .gm-stage { min-height: 216px; } body.mobile .gm-stage.art { height: 216px; }
body.mobile .gm-stage.looks { padding: 20px 14px; }
body.mobile #view .gm .gm-dv-txt h3 { font-size: 28px; }
body.mobile .gm-dv-bar { padding: 10px 14px max(14px, calc(14px + env(safe-area-inset-bottom) - var(--gm-dv-b, 0px))); } /* the home bar's room only when nothing stands under the sheet */
body.mobile .gm-dv-acts .gm-btn { padding: 0 14px; }
body.mobile .gm-strip-n { display: none; }
body.mobile .gm-cel { padding-top: 9vh; }
body.mobile .gm-cel-word { font-size: 48px; } body.mobile .gm-cel-land .gm-cel-word { font-size: 38px; }
body.mobile .gm-cel-well { width: 200px; height: 200px; }
body.mobile #modalBox2:has(.gm-cf, .gm-sheet) { border-top: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -3px 0 #8f9dff, 0 -14px 34px rgba(0, 0, 0, .5); }
body.mobile .gm-cf-stage { height: 150px; }
body.mobile .gm-sheet .gm-dev.link { min-height: 36px; }
/* the Shop title's Gem pill (#930): beside the title and its subtitle, which wraps to its left; the bar under them starts below it */
body.mobile #view h2.gm-h2 { display: block; } body.mobile #view h2.gm-h2 .gm-pill { float: right; margin: 13px 0 8px 14px; } body.mobile #view h2.gm-h2 ~ .shop-bar-m { clear: both; }
body.mobile #view .gm-pill, body.mobile #view .gm-pill:hover { height: 40px; padding: 0 7px 0 12px; border-radius: 999px; background: linear-gradient(180deg, #5340e0, #3020a8); color: #fff; font: 400 17px/1 var(--gmf); letter-spacing: .01em; box-shadow: inset 0 0 0 1.5px #8f9dff, 0 3px 0 #1c1570; }
body.mobile #view .gm-pill .gc-plus { width: 26px; height: 26px; }
.shop-cats .gems-tab .gem-i { margin-right: 4px; }
body.mobile .gm-spot { outline-offset: 1px; }
/* the animal card's wardrobe sends you to an item's tile (data-gem-item): it lifts twice in a bright ring */
:root .gm .gm-tile.gm-spot { z-index: 2; outline: 4px solid transparent; outline-offset: 3px; animation: gmspot-tile 2s ease-out both; }
@keyframes gmspot-tile { 0% { outline-color: rgba(255, 231, 99, 0); transform: none; } 12% { outline-color: #ffe763; transform: translateY(-7px) scale(1.05); } 30% { transform: none; } 48% { outline-color: #ffe763; transform: translateY(-5px) scale(1.04); } 66% { outline-color: #ffe763; transform: none; } 100% { outline-color: rgba(255, 231, 99, 0); transform: none; } }
@media (prefers-reduced-motion: reduce) { @keyframes gmspot-tile { 0%, 75% { outline-color: #ffe763; } 100% { outline-color: rgba(255, 231, 99, 0); } } }

/* ---- the Mystery Pack (#923): its card under today's pick, the odds panel, the confirm's picture and the opening.
   Drawn the cheap way: plain gradients, clip-path edges, the shared rays picture; nothing moves but transforms and
   opacities, and nothing on the shelf moves by itself. ---- */
/* the pack: a sealed foil booster, any size by --w (its parts are in em, a tenth of the width) */
.gm-mp-pack { --w: 150px; position: relative; display: block; flex: none; width: var(--w); height: calc(var(--w) * 1.42); font-size: calc(var(--w) / 10); }
.gm-mp-pack::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -.9em; z-index: -1; height: 1.6em; border-radius: 50%; background: radial-gradient(closest-side, rgba(10, 0, 40, .5), transparent); } /* its shadow on the ground */
.gm-mp-pk { position: absolute; inset: 0; display: flex; flex-direction: column; }
.gm-mp-top, .gm-mp-bot { position: relative; flex: none; height: 1.2em; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 .15em, rgba(20, 0, 70, .22) .15em .32em), linear-gradient(90deg, #5fe3ff, #4a7dff 40%, #6b46f2 72%, #4226b8); } /* the crimped ends: ridges over the foil */
.gm-mp-top { clip-path: polygon(0% 48%, 4.55% 0%, 9.09% 48%, 13.64% 0%, 18.18% 48%, 22.73% 0%, 27.27% 48%, 31.82% 0%, 36.36% 48%, 40.91% 0%, 45.45% 48%, 50% 0%, 54.55% 48%, 59.09% 0%, 63.64% 48%, 68.18% 0%, 72.73% 48%, 77.27% 0%, 81.82% 48%, 86.36% 0%, 90.91% 48%, 95.45% 0%, 100% 48%, 100% 100%, 0% 100%); }
.gm-mp-bot { clip-path: polygon(0% 0%, 100% 0%, 100% 52%, 95.45% 100%, 90.91% 52%, 86.36% 100%, 81.82% 52%, 77.27% 100%, 72.73% 52%, 68.18% 100%, 63.64% 52%, 59.09% 100%, 54.55% 52%, 50% 100%, 45.45% 52%, 40.91% 100%, 36.36% 52%, 31.82% 100%, 27.27% 52%, 22.73% 100%, 18.18% 52%, 13.64% 100%, 9.09% 52%, 4.55% 100%, 0% 52%); }
.gm-mp-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55em; overflow: hidden; background: linear-gradient(150deg, #5fe3ff 0%, #4a7dff 32%, #6b46f2 66%, #4226b8 100%); box-shadow: inset 0 0 0 .2em rgba(255, 255, 255, .34), inset 0 -2.2em 2.4em -1.2em rgba(20, 0, 80, .5); }
.gm-mp-shine { position: absolute; inset: -30% -70%; background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, .6) 48.5%, rgba(255, 255, 255, .14) 54%, transparent 61%); pointer-events: none; }
.gm-mp-body > i { position: absolute; width: .9em; height: .9em; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: .92; }
.gm-mp-body > i:nth-of-type(1) { left: 10%; top: 9%; } .gm-mp-body > i:nth-of-type(2) { right: 10%; top: 24%; width: .6em; height: .6em; } .gm-mp-body > i:nth-of-type(3) { left: 14%; bottom: 9%; width: .65em; height: .65em; }
.gm-mp-emb { position: relative; display: grid; place-items: center; width: 5.4em; height: 5.4em; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .4) 52%, rgba(255, 255, 255, 0) 71%); }
.gm-mp-emb .gm-art { display: block; width: 4.5em; height: auto; }
.gm-mp-nm { position: relative; font: 400 1.72em/.94 var(--gmf); letter-spacing: .04em; text-transform: uppercase; text-align: center; color: #fff; text-shadow: 0 .1em 0 rgba(30, 0, 90, .6); }

/* its card in the Shop tab: the pick's layout on the pack's own pink (no tier is pink) */
.gm-mp-hero, .gm-cf-mp { --t1: #ff9ad2; --t2: #e3248f; --t3: #6b0f57; --tb: #ffc0e3; --tl: #ffe0f1; --tg: rgba(227, 36, 143, .6); }
.gm-mp-hero { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); min-height: 0; } /* first on the shelf, above today's pick (#930) */
.gm-mp-hero .gm-hero-fx::before { left: 17%; }
.gm-mp-hero .gm-hero-fx b:nth-of-type(2) { left: 29%; top: 11%; } .gm-mp-hero .gm-hero-fx b:nth-of-type(3) { left: 30%; top: 78%; } /* clear of the words */
.gm-mp-art { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; padding: 26px 0 30px; }
.gm-mp-art .gm-mp-pack { --w: 124px; transform: rotate(-7deg); }
.gm-mp-hero.off .gm-mp-pack { opacity: .55; }
.gm-mp-hero .gm-hero-txt { padding-top: 44px; }
.gm-mp-hero p { display: block; overflow: visible; }
/* the note under the buttons. ".gm-hero p" and the rule above are stronger than a lone class, so these name the card too (#930) */
:root .gm-mp-hero .gm-mp-see { align-self: center; }
.gm-mp-usd { align-self: center; font: 700 12.5px/1.2 var(--sans); color: rgba(255, 255, 255, .92); white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.gm-mp-hero .gm-mp-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; font: 700 13px/1.35 var(--sans); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.gm-mp-hero .gm-mp-note.short { padding: 6px 6px 6px 14px; border-radius: 14px; background: rgba(9, 8, 48, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); } /* short of Gems: how many more, and the pack that covers it, on one plate */
.gm-mp-hero .gm-mp-note.short:not(:has(.gm-btn)) { padding: 9px 14px; }
.gm-mp-hero .gm-mp-note.off { color: #fff3bf; } .gm-mp-hero .gm-mp-note.warn { color: #ffd9d9; }
.gm-mp-hero .gm-mp-note b { display: inline-flex; align-items: center; gap: 4px; font: 400 15px/1 var(--gmf); } .gm-mp-hero .gm-mp-note .gem-c { width: 16px; height: 14px; }
/* See the odds: under the card's two columns, on a dark plate so every number reads */
.gm-mp-odds { position: relative; z-index: 1; grid-column: 1 / -1; margin: 0 12px 12px; padding: 12px 14px 12px; border-radius: 14px; background: rgba(13, 8, 56, .84); }
.gm-mp-odds[hidden] { display: none; }
.gm-mp-odds-h { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 4px; }
.gm-mp-odds-h b { font: 400 17px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.gm-mp-odds-h span { font: 600 12px/1.2 var(--sans); color: rgba(255, 255, 255, .7); }
.gm-mp-tier { margin-top: 7px; border-radius: 11px; background: rgba(255, 255, 255, .09); box-shadow: inset 3px 0 0 var(--t2); }
.gm-mp-tier > summary { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px 0 14px; cursor: pointer; list-style: none; }
.gm-mp-tier > summary::-webkit-details-marker { display: none; }
.gm-mp-tier > summary::before { content: ''; flex: none; width: 8px; height: 8px; border-right: 2.5px solid rgba(255, 255, 255, .75); border-bottom: 2.5px solid rgba(255, 255, 255, .75); transform: rotate(-45deg); transition: transform .12s; }
.gm-mp-tier[open] > summary::before { transform: rotate(45deg); }
.gm-mp-tier .gm-tier { font: 400 16px/1 var(--gmf); letter-spacing: .05em; color: var(--tl); }
.gm-mp-n { min-width: 0; font: 600 12px/1.2 var(--sans); color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.gm-mp-pct { order: 3; margin-left: auto; font: 400 21px/1 var(--gmf); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.gm-mp-tier ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 20px; margin: 0; padding: 2px 14px 12px 32px; list-style: none; }
.gm-mp-tier li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font: 500 12.5px/1.3 var(--sans); color: rgba(255, 255, 255, .9); }
.gm-mp-tier li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-mp-tier li b { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 400 13px/1 var(--gmf); font-variant-numeric: tabular-nums; color: #fff; } .gm-mp-tier li .gem-c { width: 13px; height: 12px; }
.gm-mp-hero .gm-mp-gone, .gm-mp-hero .gm-mp-rules { margin: 14px 4px 4px; font: 600 12.5px/1.45 var(--sans); color: rgba(255, 255, 255, .86); } /* named with the card: ".gm-hero p" outranks a lone class (#930) */
.gm-mp-hero .gm-mp-gone { color: #fff3bf; }
/* the confirm: the pack on its pink */
.gm-cf-mp .gm-mp-pack { --w: 92px; transform: rotate(-6deg); }
.gm-lrow.mp .gm-what b { color: #ffc0e3; } /* History: a pack's row */

/* the opening. The stage is one 3D space (a perspective, kept through the flip): the card starts small behind the
   pack, slides up out of its torn top, comes forward as it spins and lands where it started. Each piece rests in its
   last frame, so with no animation at all (reduced motion, or skipped) the reveal is what shows. */
.gm-mp .gm-cel-card { --cw: min(360px, calc(100vw - 32px)); }
body:not(.mobile) .gm-cel.gm-mp { padding-top: clamp(16px, calc(50vh - 214px), calc(100vh - 640px)); } /* desktop: the middle of the screen, the pack at its centre (#930) */
.gm-mp:not(.done) .gm-mp-reveal { pointer-events: none; } /* its buttons can't be pressed before they show */
.gm-mp-rays { position: absolute; left: 50%; top: 214px; z-index: -1; width: 880px; height: 880px; margin: -440px 0 0 -440px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat, radial-gradient(closest-side, var(--tg) 0%, transparent 72%); opacity: .62; pointer-events: none; animation: gm-mp-rays 1.5s cubic-bezier(.2, .7, .3, 1) 4.79s both; }
@keyframes gm-mp-rays { from { opacity: 0; transform: scale(.3) rotate(-50deg); } to { opacity: .62; transform: scale(1) rotate(0); } }
.gm-mp-word { min-height: 52px; margin-bottom: 12px; font: 400 50px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; color: var(--tl); text-shadow: 0 4px 0 var(--t3), 0 9px 0 rgba(0, 0, 0, .35); transform: rotate(-4deg); animation: gm-slam .6s cubic-bezier(.2, .9, .3, 1.2) 4.85s both; }
.gm-mp.t-legendary .gm-mp-word { font-size: 54px; color: #ffe763; text-shadow: 0 4px 0 #b56a00, 0 9px 0 rgba(0, 0, 0, .35); }
.gm-mp-stage { position: relative; width: 100%; height: 300px; perspective: 900px; transform-style: preserve-3d; }
.gm-mp-flip { position: absolute; left: 50%; top: 50%; width: 216px; height: 290px; margin: -145px 0 0 -108px; transform-style: preserve-3d; animation: gm-mp-path 2.15s linear 2.75s both; }
@keyframes gm-mp-path { 0% { transform: translate3d(0, 8px, -40px) scale(.64); animation-timing-function: cubic-bezier(.3, 0, .2, 1); } 21% { transform: translate3d(0, -52px, -40px) scale(.64); animation-timing-function: ease-in-out; } 31.6% { transform: translate3d(0, -38px, -40px) scale(.64); animation-timing-function: cubic-bezier(.5, 0, .2, 1); } 47.4% { transform: translate3d(0, -112px, -40px) scale(.64); animation-timing-function: cubic-bezier(.4, 0, .5, 1); } 73.7% { transform: translate3d(0, -46px, 140px) scale(1); animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 100% { transform: translate3d(0, 0, 0) scale(1); } } /* a peek, a breath, out, then up at you */
.gm-mp-card { position: absolute; inset: 0; transform-style: preserve-3d; animation: gm-mp-spin 1.13s cubic-bezier(.12, .5, .2, 1) 3.77s both; }
@keyframes gm-mp-spin { from { transform: rotateY(-1620deg); } to { transform: rotateY(0); } } /* four and a half turns: face down to face up */
.gm-mp-face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.gm-mp-front { border: 4px solid var(--tb); background: radial-gradient(100% 82% at 50% 42%, var(--t1) 0%, var(--t2) 52%, var(--t3) 100%); isolation: isolate; }
.gm-mp-front::before { content: ''; position: absolute; left: 50%; top: 46%; z-index: -1; width: 760px; height: 760px; margin: -380px 0 0 -380px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; }
.gm-mp-front .gm-prop { width: 186%; max-width: none; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .32)); }
.gm-mp.k-decor .gm-mp-front .gm-prop { width: 140%; }
.gm-mp-front > :is(.gm-ctx, .gm-ring, .gm-card, .gm-chip) { margin-top: 0; }
.gm-mp-front > .gm-ring { transform: scale(1.5); } .gm-mp-front > .gm-ctx.board { transform: scale(1.3); } .gm-mp-front > .gm-card { width: 170px; transform: rotate(-5deg); }
.gm-mp-front .gm-ring::after { animation: none; transform: rotate(38deg); } /* a Legendary frame's glint stands still on the card, as on the shelf */
.gm-mp-back { transform: rotateY(180deg); border: 4px solid #b9c2ff; background: linear-gradient(140deg, #4a39d6, #1c1578); box-shadow: inset 0 0 0 7px #241b8f, inset 0 0 0 9px rgba(255, 255, 255, .28); }
.gm-mp-back .gm-art { display: block; width: 104px; height: auto; }
.gm-mp-pack.opening { --w: 176px; position: absolute; left: 50%; top: 50%; margin: -119px 0 0 -88px; opacity: 0; animation: gm-mp-drop .3s cubic-bezier(.2, 1.3, .4, 1) both, gm-mp-away .45s cubic-bezier(.5, 0, .8, .4) 3.77s forwards; }
@keyframes gm-mp-drop { from { opacity: 0; transform: translateY(-80px) scale(.7) rotate(-9deg); } to { opacity: 1; transform: none; } }
@keyframes gm-mp-away { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(130px) rotate(9deg) scale(.9); } }
.gm-mp-pack.opening .gm-mp-pk { animation: gm-mp-shake 2s linear .3s; } /* the tease (#930, longer #947): it trembles, goes still and swells as if holding its breath, then shakes harder and harder and tears */
@keyframes gm-mp-shake { 0%, 100% { transform: none; } 5% { transform: translateX(-2px) rotate(-1.5deg); } 10% { transform: translateX(2px) rotate(1.5deg); } 15% { transform: translateX(-2px) rotate(-2deg); } 20% { transform: translateX(3px) rotate(2.5deg); } 25% { transform: translateX(-3px) rotate(-3deg) scale(1.02); } 30% { transform: translateX(3px) rotate(3deg) scale(1.03); } 35% { transform: translateX(-2px) rotate(-1.5deg) scale(1.03); } 40%, 52% { transform: scale(1.05); animation-timing-function: ease-in-out; } 58% { transform: scale(1.08); } 62% { transform: translateX(-4px) rotate(-4deg) scale(1.06); } 66% { transform: translateX(5px) rotate(4.5deg) scale(1.07); } 70% { transform: translateX(-5px) rotate(-5deg) scale(1.08); } 74% { transform: translateX(6px) rotate(5.5deg) scale(1.09); } 78% { transform: translateX(-6px) rotate(-6deg) scale(1.1); } 82% { transform: translateX(7px) rotate(6deg) scale(1.11); } 86% { transform: translateX(-7px) rotate(-6.5deg) scale(1.12); } 90% { transform: translateX(7px) rotate(6deg) scale(1.13); } 94% { transform: translateX(-6px) rotate(-5deg) scale(1.14); } 97% { transform: translateX(4px) rotate(3deg) scale(1.13); } }
.gm-mp-glow { position: absolute; left: 50%; top: 36px; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; background: radial-gradient(closest-side, #fff 0%, var(--tl) 14%, var(--t1) 30%, var(--tg) 52%, transparent 72%); opacity: 0; pointer-events: none; animation: gm-mp-glow 1.81s ease-in-out 2.41s both; } /* light in the tier's colour out of the torn top: the hint before the card */
@keyframes gm-mp-glow { 0% { opacity: 0; transform: scale(.15); } 28% { opacity: .85; transform: scale(.62); } 50% { opacity: .55; transform: scale(.5); } 80% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.gm-mp-pack.opening::after { content: ''; position: absolute; left: 8%; right: 8%; top: 44px; height: 8px; border-radius: 50%; background: radial-gradient(closest-side, #fff, var(--tl) 45%, transparent); opacity: 0; pointer-events: none; animation: gm-mp-seam 1.5s ease-in 1.05s both; } /* a line of light at the seam while it holds its breath (#947) */
@keyframes gm-mp-seam { 0% { opacity: 0; transform: scaleX(.3); } 40% { opacity: .7; transform: scaleX(.8); } 55% { opacity: .35; } 100% { opacity: 1; transform: scaleX(1.1); } }
.gm-mp.wait .gm-mp-pack.opening::after { animation: none; }
.gm-mp-pack.opening .gm-mp-top { transform-origin: 100% 100%; animation: gm-mp-tear .4s cubic-bezier(.4, 0, .7, 1) 2.3s forwards; }
@keyframes gm-mp-tear { 0% { opacity: 1; transform: none; } 38% { opacity: 1; transform: translate(4px, -5px) rotate(13deg); } 100% { opacity: 0; transform: translate(120px, -150px) rotate(75deg); } }
.gm-mp-reveal { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gm-mp .gm-mp-reveal .gm-tier { margin-top: 16px; animation: gm-fade .4s 5.01s both; }
.gm-mp .gm-cel-card .gm-mp-reveal h3 { animation-delay: 5.08s; }
.gm-mp .gm-mp-reveal p { animation-delay: 5.15s; }
.gm-mp-reveal p b { display: inline-flex; align-items: center; gap: 4px; font: 400 15px/1 var(--gmf); color: #fff; vertical-align: -1px; } .gm-mp-reveal p .gem-c { width: 15px; height: 14px; }
.gm-mp .gm-mp-reveal .gm-cel-act { margin-top: 18px; animation-delay: 5.24s; }
:root .gm-mp-again { width: 100%; min-height: 48px; margin-top: 12px; animation: gm-fade .4s 5.33s both; }
.gm-mp-flash { position: fixed; inset: 0; z-index: 3; background: #fff6cf; opacity: 0; pointer-events: none; animation: gm-mp-flash .7s ease-out 4.88s both; } /* a Legendary: the screen blinks gold */
/* the phone: the pack waits to be cut open by hand (#934). While it waits everything after the drop is held (the
   opening's animations are paused, each at its first frame), the pack sways, a dashed line marks the cut and a pair
   of scissors runs along it; the bright line is the cut so far. Nothing here loops for ever. */
.gm-mp.wait { touch-action: none; }
.gm-mp.wait .gm-cel-card * { animation-play-state: paused; }
.gm-mp.wait .gm-mp-pack.opening { animation-play-state: running, paused; }
.gm-mp.wait .gm-mp-pack.opening .gm-mp-pk { animation: gm-mp-idle 1.5s ease-in-out .4s 80; animation-play-state: running; }
@keyframes gm-mp-idle { 0%, 100% { transform: none; } 20% { transform: rotate(-2.5deg); } 40% { transform: rotate(2.5deg); } 60% { transform: rotate(-1.5deg); } 80% { transform: rotate(1deg); } }
.gm-mp-cut { position: absolute; left: 50%; top: 52px; width: 176px; height: 0; margin-left: -88px; pointer-events: none; transition: opacity .15s; }
.gm-mp-cut::before { content: ''; position: absolute; left: -10px; right: -10px; top: -1px; border-top: 2px dashed rgba(255, 255, 255, .95); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)); }
.gm-mp-cut i { position: absolute; left: 0; top: -3px; width: 100%; height: 6px; border-radius: 3px; background: #fff; box-shadow: 0 0 12px 3px #fff, 0 0 26px 6px #8ad8ff; transform-origin: 0 50%; transform: scaleX(0); }
.gm-mp-cut b { position: absolute; left: -26px; top: -15px; width: 30px; height: 30px; }
.gm-mp-cut b svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.gm-mp.wait .gm-mp-stage .gm-mp-cut b { animation: gm-mp-snip 1.7s ease-in-out .5s 70 both; animation-play-state: running; }
@keyframes gm-mp-snip { 0% { opacity: 0; transform: translateX(0); } 14% { opacity: 1; transform: translateX(0); } 74% { opacity: 1; transform: translateX(200px); } 90%, 100% { opacity: 0; transform: translateX(200px); } }
.gm-mp-hint { position: absolute; left: -20px; right: -20px; bottom: -38px; font: 400 17px/1.2 var(--gmf); letter-spacing: .03em; text-transform: uppercase; text-align: center; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); pointer-events: none; transition: opacity .15s; }
.gm-mp.wait .gm-mp-stage .gm-mp-hint { animation: gm-fade .3s .4s both; animation-play-state: running; }
.gm-mp:not(.wait) .gm-mp-cut, .gm-mp:not(.wait) .gm-mp-hint { opacity: 0; }
/* fireworks for an Epic or a Legendary (#930): a shell's trail, the flash where it bursts, and its sparks (glowing streaks that point outward) */
.gm-fly.gm-fw { width: 5px; height: 17px; border-radius: 3px; background: linear-gradient(180deg, #fff, var(--c, #fff) 60%); box-shadow: 0 0 10px 2px var(--c, #fff); }
.gm-fly.gm-fw.trail { width: 4px; height: 24px; } .gm-fly.gm-fw.pop { width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(closest-side, #fff 0%, var(--c, #fff) 34%, transparent 70%); box-shadow: none; }
@keyframes gm-mp-flash { 0% { opacity: 0; } 14% { opacity: .78; } 100% { opacity: 0; } }
.gm-fly.star.gold { background: #ffe763; }

body.mobile .gm-mp-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: 184px auto; }
body.mobile .gm-mp-hero .gm-hero-fx::before { left: 50%; top: 92px; }
body.mobile .gm-mp-hero .gm-hero-fx b:nth-of-type(2) { left: 80%; top: 30%; } body.mobile .gm-mp-hero .gm-hero-fx b:nth-of-type(3) { left: 74%; top: 12%; }
body.mobile .gm-mp-art { padding: 14px 0 6px; } body.mobile .gm-mp-art .gm-mp-pack { --w: 104px; }
body.mobile .gm-mp-hero .gm-hero-txt { padding-top: 0; }
body.mobile .gm-mp-hero .gm-hero-act { flex-wrap: wrap; }
body.mobile .gm-mp-hero .gm-mp-note.short { align-self: stretch; justify-content: space-between; }
body.mobile .gm-mp-hero .gm-hero-act .gm-mp-see { flex: 1 1 100%; min-height: 46px; padding: 0 14px; border-radius: 14px; font-size: 17px; }
body.mobile .gm-mp-odds { margin: 0 10px 10px; padding: 12px 10px; }
body.mobile .gm-mp-tier ul { grid-template-columns: minmax(0, 1fr); padding-left: 30px; }
body.mobile .gm-mp-tier > summary { gap: 8px; padding: 0 10px 0 12px; } body.mobile .gm-mp-n { font-size: 11.5px; }
body.mobile .gm-mp-word { font-size: 46px; } body.mobile .gm-mp.t-legendary .gm-mp-word { font-size: 50px; }

/* Settings → Account → Your Gems (#628) */
.gm-yours { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0; }
.gm-yours .gm-bal { display: inline-flex; align-items: baseline; gap: 6px; }
.gm-yours .gm-bal .gem-i { width: 18px; height: 18px; align-self: center; }
.gm-yours .gm-bal b { font: 600 22px/1 var(--sans); font-variant-numeric: tabular-nums; } .gm-yours .gm-bal span { font-size: 12px; color: var(--ink-3); }
.gm-yours .gm-bal.neg b { color: var(--brick); }
.gm-yours .gm-y-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 160px; font-size: 12.5px; color: var(--ink-2); }
.gm-yours .gm-y-warn { color: var(--brick); }

/* Place it (#830): the card in Shop → Decor pulses */
.gm-spot { outline: 3px solid transparent; outline-offset: 2px; animation: gmspot 2s ease-out both; }
@keyframes gmspot { 0% { outline-color: rgba(224, 165, 47, 0); outline-offset: 10px; } 15%, 30% { outline-color: #e0a52f; outline-offset: 2px; } 45% { outline-offset: 6px; } 60%, 75% { outline-color: #e0a52f; outline-offset: 2px; } 100% { outline-color: rgba(224, 165, 47, 0); outline-offset: 2px; } }
@media (prefers-reduced-motion: reduce) { @keyframes gmspot { 0%, 75% { outline-color: #e0a52f; } 100% { outline-color: rgba(224, 165, 47, 0); } } }

/* a breeder's look where others see it (#631, client/js/looks.js): name flair and badge, the profile frame, the store card theme */
.lk-fl { color: var(--lk); }
.lk-badge { display: inline-grid; place-items: center; margin-left: 3px; vertical-align: -.2em; } .lk-badge svg { width: 1.15em; height: 1.15em; display: block; }
.lk-frame { display: inline-grid; place-items: center; flex: none; border-radius: 50%; box-shadow: 0 0 0 3px var(--lk-ring), 0 0 0 5px color-mix(in srgb, var(--lk-ring) 35%, transparent); }
.ig-ring .lk-frame, .ig-phead > .lk-frame, .prof-head > .lk-frame { margin: 4px; } /* room for the ring beside the profile picture */
/* the thin ring on a list row's avatar (framed(..., true)): a box-shadow takes no room, so the row's grid and flex hold */
.lk-frame.lk-sm { box-shadow: 0 0 0 2px var(--lk-ring); } .ig-person > span.lk-frame.lk-sm { flex: none; display: inline-grid; }
article.st-card.lk-card { background: var(--lk-bg); border-color: var(--lk-ac); border-top: 3px solid var(--lk-ac); color: var(--lk-ink); }
article.st-card.lk-card .st-info b { color: var(--lk-ink); } article.st-card.lk-card .st-info p, article.st-card.lk-card .st-info small { color: color-mix(in srgb, var(--lk-ink) 75%, transparent); }
article.st-card.lk-card .st-av { box-shadow: 0 0 0 2px var(--lk-bg), 0 0 0 3.5px var(--lk-ac); }

/* ---- the weekly shelf (#920): what is on sale this week, and when it changes ---- */
.gm-week { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 16px 0 2px; padding: 9px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 214, 74, .2), rgba(255, 214, 74, .05)); border: 1px solid rgba(255, 214, 74, .5); color: #fff; }
.gm-week b { font: 400 17px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; color: #ffe27a; }
.gm-week span { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(8, 6, 40, .6); font: 700 12px var(--sans); white-space: nowrap; }
.gm-week span svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.gm-week small { flex: 1 1 100%; font-size: 12px; color: rgba(255, 255, 255, .78); }
.gm.phone .gm-week { margin: 14px 12px 0; }
/* ---- seasons (#961): the open season's banner over the shelf, the season mark on a tile's corner, the season line on
   an item's detail. A retired item's mark is grey: its season has ended and nobody can get it any more. ---- */
.gm-season { position: relative; display: flex; align-items: center; gap: 14px; margin: 16px 0 0; padding: 12px 16px 12px 12px; border-radius: 14px; overflow: hidden; color: #fff;
  background: linear-gradient(100deg, #ff7a18, #e0338a 55%, #7a3df0); border: 2px solid rgba(255, 255, 255, .28); box-shadow: 0 4px 0 rgba(8, 6, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.gm-season::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .08) 0 14px, transparent 14px 28px); pointer-events: none; }
.gm-season > * { position: relative; }
.gm-season-n { flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px; background: rgba(8, 6, 40, .55); border: 2px solid rgba(255, 255, 255, .5); transform: rotate(-4deg); }
.gm-season-n small { font: 700 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #ffe27a; margin-top: 7px; }
.gm-season-n b { font: 400 34px/1 var(--gmf); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); margin-bottom: 5px; }
.gm-season-t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gm-season-t b { font: 400 26px/1 var(--gmf); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.gm-season-t small { font: 600 12.5px/1.35 var(--sans); color: rgba(255, 255, 255, .92); }
.gm-season-end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; padding: 8px 12px; border-radius: 12px; background: rgba(8, 6, 40, .6); font: 700 12px/1 var(--sans); white-space: nowrap; }
.gm-season-end svg { display: none; }
.gm-season-end b { font: 400 19px/1 var(--gmf); letter-spacing: .04em; color: #ffe763; font-variant-numeric: tabular-nums; }
.gm-season.last { background: linear-gradient(100deg, #ff3b3b, #ff7a18 60%, #ffb21f); }
.gm-season.last .gm-season-end b { color: #fff; }
.gm-season.off { background: linear-gradient(100deg, #3a3f78, #2a2c5c); }
.gm-season + .gm-week { margin-top: 10px; }
.gm.phone .gm-season { margin: 14px 12px 0; gap: 10px; padding: 10px 12px 10px 10px; flex-wrap: wrap; }
.gm.phone .gm-season-n { width: 50px; height: 50px; border-radius: 12px; } .gm.phone .gm-season-n b { font-size: 27px; } .gm.phone .gm-season-n small { font-size: 8.5px; margin-top: 6px; }
.gm.phone .gm-season-t { flex: 1 1 0; }
.gm.phone .gm-season-t b { font-size: 21px; } .gm.phone .gm-season-t small { font-size: 11.5px; }
.gm.phone .gm-season-end { flex: 1 1 100%; flex-direction: row; justify-content: space-between; align-items: center; padding: 7px 12px; }
.gm.phone .gm-season-end b { font-size: 16px; }
/* a tile's season mark: a small plate in the top right corner (the NEW and pick tags hang over the top left) */
.gm-ssn { position: absolute; top: 7px; right: 7px; z-index: 4; padding: 3px 6px 2px; border-radius: 6px; background: rgba(8, 6, 40, .62); border: 1px solid rgba(255, 255, 255, .3); font: 400 11px/1 var(--gmf); font-style: normal; letter-spacing: .06em; color: #ffe27a; white-space: nowrap; pointer-events: none; }
.gm-ssn.gone { color: #d7dbe6; background: rgba(40, 42, 58, .85); border-color: rgba(255, 255, 255, .4); }
.gm-dv-ssn { display: inline-block; margin: 8px 0 0; padding: 4px 9px 3px; border-radius: 7px; background: linear-gradient(100deg, #ff7a18, #e0338a); font: 400 12.5px/1 var(--gmf); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.gm-dv-txt .gm-tier + .gm-dv-ssn { margin-left: 10px; }
.gm-dv-ssn.gone { background: #555a70; }

/* Redeem a Gem code (#927), under the packs on Get Gems */
.gm-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border: 1px dashed var(--rule-2); border-radius: 10px; }
.gm-code b { display: block; font-size: 14px; } .gm-code small { font-size: 12px; color: var(--ink-3); }
.gm-code-btn { min-height: 36px; padding: 0 14px; border-radius: 8px; font-weight: 600; }

/* the wait for the server (#947): the sealed pack floats and breathes on a soft glow, "Getting your pack..." under it,
   and a light runs along a thin bar. Nothing here ends on its own: the opening (or an error) takes it away. */
.gm-mp-load { cursor: progress; }
body:not(.mobile) .gm-cel.gm-mp-load { padding-top: clamp(16px, calc(50vh - 214px), calc(100vh - 640px)); }
.gm-mp-lstage { position: relative; display: grid; place-items: center; width: 100%; height: 300px; }
.gm-mp-lglow { position: absolute; left: 50%; top: 50%; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 190, 255, .55), rgba(90, 80, 255, .22) 50%, transparent 72%); animation: gm-mp-lpulse 1.6s ease-in-out infinite; }
@keyframes gm-mp-lpulse { 0%, 100% { opacity: .55; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.04); } }
.gm-mp-pack.waiting { --w: 176px; position: relative; animation: gm-mp-drop .3s cubic-bezier(.2, 1.3, .4, 1) both; }
.gm-mp-pack.waiting .gm-mp-pk { animation: gm-mp-float 1.6s ease-in-out .3s infinite; }
@keyframes gm-mp-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
.gm-mp-ltxt { margin-top: 6px; font: 400 22px/1 var(--gmf); letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); }
.gm-mp-ltxt i { font-style: normal; } .gm-mp-ltxt b { font-weight: inherit; animation: gm-mp-dot 1.2s infinite both; } .gm-mp-ltxt b:nth-child(2) { animation-delay: .2s; } .gm-mp-ltxt b:nth-child(3) { animation-delay: .4s; }
@keyframes gm-mp-dot { 0%, 20% { opacity: .15; } 50% { opacity: 1; } 100% { opacity: .15; } }
.gm-mp-lbar { position: relative; width: 160px; height: 6px; margin-top: 16px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .14); }
.gm-mp-lbar i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, #8ad8ff, #fff, #8ad8ff, transparent); animation: gm-mp-lrun 1.1s ease-in-out infinite; }
@keyframes gm-mp-lrun { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .gm-mp-lglow, .gm-mp-pack.waiting, .gm-mp-pack.waiting .gm-mp-pk, .gm-mp-ltxt b, .gm-mp-lbar i { animation: none; } .gm-mp-ltxt b { opacity: 1; } }
/* My items (#945): the count on the tab, the inventory's header, and four tabs that fit a phone */
.gm-tab-n { display: inline-block; min-width: 18px; margin-left: 6px; padding: 2px 5px; border-radius: 999px; background: #ffd64a; color: #2a1f96; font: 700 11px/1 var(--sans); font-style: normal; letter-spacing: 0; vertical-align: 2px; }
.gm-inv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 16px 0 2px; padding: 9px 14px; border-radius: 12px; background: linear-gradient(90deg, rgba(31, 162, 255, .22), rgba(31, 162, 255, .05)); border: 1px solid rgba(120, 200, 255, .5); color: #fff; }
.gm-inv b { font: 400 17px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; color: #bfe6ff; }
.gm-inv span { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(8, 6, 40, .6); font: 700 12px var(--sans); white-space: nowrap; }
.gm-inv small { flex: 1 1 100%; font-size: 12px; color: rgba(255, 255, 255, .78); }
.gm-inv-empty p { margin: 0 0 12px; }
:root .gm.phone .gm-tabs { gap: 5px; padding: 0; }
:root .gm.phone .gm-tabs button { flex: 1 1 auto; padding: 0 7px; font-size: 13px; letter-spacing: .02em; }
/* ---- rack finishes (#1024): the little rack on a tile, and the rack chips on an item's page ---- */
.gm-rackwrap { display: grid; place-items: center; }
.gm-rackwrap .gm-rack { width: 86%; height: auto; max-height: 100%; aspect-ratio: 300 / 220; }
.gm-racks { margin: 0 0 8px; }
.gm-rack-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; max-height: 96px; overflow: auto; }
.gm-rack-chip { padding: 6px 11px 5px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, .28); background: rgba(8, 6, 40, .55); color: #fff; font: 400 13px/1 var(--gmf); letter-spacing: .04em; cursor: pointer; }
.gm-rack-chip.on { background: linear-gradient(180deg, #56e07a, #1fa84a); border-color: #c9ffd6; color: #06280f; }
/* ---- the Random Gift (#1028): its card under the Mystery Pack's (teal and gold, so the two don't blur into one), the
   present itself, the giver's send-off and the receiver's opening. Everything that moves stands still under
   prefers-reduced-motion (the .calm class on the celebration, and the rule at the end). ---- */
.gm-gift-hero, .gm-cf-gift { --t1: #6ff0d6; --t2: #12a89a; --t3: #0a4a5c; --tb: #c9fff2; --tl: #e0fff8; --tg: rgba(18, 168, 154, .6); }
.gm-gift-hero { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); min-height: 0; }
.gm-gift-hero .gm-hero-fx::before { left: 17%; }
.gm-gift-art { position: relative; z-index: 1; display: grid; place-items: center; min-width: 0; padding: 22px 0 26px; }
.gm-gift-box { display: block; width: var(--w, 132px); aspect-ratio: 1; filter: drop-shadow(0 8px 0 rgba(8, 6, 40, .35)); }
.gm-gift-box svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gm-gift-box .gm-gb-lid { transform-box: fill-box; transform-origin: 50% 100%; }
.gm-gift-box.bob { animation: gm-gift-bob 2.6s ease-in-out infinite; }
.gm-gift-box.bob .gm-gb-lid { animation: gm-gift-lid 2.6s ease-in-out infinite; }
@keyframes gm-gift-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes gm-gift-lid { 0%, 62%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-9px) rotate(-7deg); } 78% { transform: translateY(0) rotate(0); } 86% { transform: translateY(-5px) rotate(5deg); } }
.gm-gift-spk { position: absolute; width: 16px; height: 16px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: gm-gift-twk 1.8s ease-in-out infinite; }
.gm-gift-spk.a { left: 14%; top: 16%; } .gm-gift-spk.b { right: 12%; top: 30%; width: 11px; height: 11px; animation-delay: .6s; } .gm-gift-spk.c { left: 22%; bottom: 14%; width: 9px; height: 9px; animation-delay: 1.1s; }
@keyframes gm-gift-twk { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
.gm-gift-btn { background: linear-gradient(180deg, #ffe763, #ffb21f); }
.gm-cf-gift .gm-cf-art .gm-gift-box { --w: 96px; }
.gm.phone .gm-gift-hero { grid-template-columns: minmax(0, 30%) minmax(0, 1fr); } .gm.phone .gm-gift-box { --w: 92px; }
/* the celebration: the present on its own layer, then the card with the item */
/* (the item keeps its own tier colours in the celebration) */
.gm-cel-gift .gm-gift-fly, .gm-cel-gift .gm-gift-drop { position: absolute; left: 50%; top: 96px; z-index: 3; margin-left: -105px; pointer-events: none; } .gm-cel-gift .gm-gift-box { --w: 210px; }
.gm-cel-gift .gm-gift-after { display: flex; flex-direction: column; align-items: center; opacity: 0; transform: scale(.6); }
.gm-cel-gift.landed .gm-gift-after { animation: gm-gift-pop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes gm-gift-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
/* sent: a wobble, a crouch, then away up and to the right, getting smaller */
.gm-cel-gift.send .gm-gift-fly { animation: gm-gift-send 1.4s cubic-bezier(.5, 0, .7, .4) both; }
@keyframes gm-gift-send { 0% { transform: scale(.4); opacity: 0; } 14% { transform: scale(1.08) rotate(-6deg); opacity: 1; } 28% { transform: scale(1) rotate(6deg); } 42% { transform: rotate(-7deg); } 56% { transform: scale(1.08, .88) translateY(10px) rotate(0); } 100% { transform: translate(60vw, -90vh) scale(.25) rotate(40deg); opacity: 0; } }
/* arriving: it drops in, bounces, shakes harder and harder, the lid goes, the present clears away */
.gm-cel-gift.arrive .gm-cel-word { animation: gm-slam .5s cubic-bezier(.2, 1.4, .4, 1) both; margin-bottom: 240px; }
.gm-cel-gift.arrive.landed .gm-cel-word { margin-bottom: 16px; transition: margin .35s ease; }
.gm-cel-gift.arrive .gm-gift-drop { top: 170px; animation: gm-gift-drop 1.7s cubic-bezier(.3, .1, .4, 1) both; }
@keyframes gm-gift-drop { 0% { transform: translateY(-80vh) rotate(-14deg); } 26% { transform: translateY(0) rotate(0) scale(1.12, .86); } 34% { transform: translateY(-34px) scale(.96, 1.06); } 44% { transform: translateY(0) scale(1.06, .94); } 52% { transform: rotate(-7deg); } 60% { transform: rotate(8deg); } 68% { transform: rotate(-10deg); } 76% { transform: rotate(11deg); } 84% { transform: rotate(-12deg) scale(1.05); } 92% { transform: rotate(10deg) scale(1.12); } 100% { transform: scale(1.2); } }
.gm-cel-gift.arrive .gm-gift-drop .gm-gb-lid { animation: gm-gift-off .5s 1.55s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes gm-gift-off { to { transform: translate(60px, -220px) rotate(60deg); opacity: 0; } }
.gm-cel-gift.arrive.landed .gm-gift-drop { animation: gm-gift-clear .35s ease-in both; }
@keyframes gm-gift-clear { from { transform: scale(1.2); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.gm-cel-gift.calm .gm-gift-fly, .gm-cel-gift.calm .gm-gift-drop { display: none; } .gm-cel-gift.calm .gm-gift-after { opacity: 1; transform: none; animation: none; } .gm-cel-gift.calm.arrive .gm-cel-word { margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) { .gm-gift-box.bob, .gm-gift-box.bob .gm-gb-lid, .gm-gift-spk { animation: none !important; } }
/* ---- today's items (#1027): a few that change every day, above the week's shelf; and the mark of an item that never retires ---- */
.gm-daily { margin: 12px 0 4px; padding: 12px 14px 14px; border-radius: 14px; background: linear-gradient(100deg, rgba(47, 208, 255, .2), rgba(122, 61, 240, .16)); border: 2px solid rgba(127, 220, 255, .6); }
.gm-daily-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 12px; color: #fff; }
.gm-daily-h b { font: 400 22px/1 var(--gmf); letter-spacing: .05em; text-transform: uppercase; color: #8fe9ff; text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.gm-daily-h span { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(8, 6, 40, .6); font: 700 12px var(--sans); white-space: nowrap; }
.gm-daily-h span svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.gm-daily-h small { flex: 1 1 100%; font-size: 12px; color: rgba(255, 255, 255, .8); }
.gm-daily-own { margin: 0; font: 600 13px var(--sans); color: rgba(255, 255, 255, .85); }
.gm-tag.today { background: linear-gradient(180deg, #5fe9ff, #1fb8ff); color: #06283a; text-shadow: none; }
.gm-ssn.always { color: #8fe9ff; border-color: rgba(143, 233, 255, .6); }
.gm-dv-ssn.always { background: linear-gradient(100deg, #1fb8ff, #7a3df0); }
.gm.phone .gm-daily { margin: 12px 12px 0; padding: 10px 10px 12px; }

/* ---- the Mystery Pack's opening, louder (#1510). Same timeline as above (the tear at 2.3 s, the card down at 4.9 s);
   what's new: the store goes away behind a dark arena with turning light; the pack and the card are bigger; sparks are
   drawn into the pack while it trembles; the light out of the torn top starts Rare blue and climbs a tier at 2.95 s
   (Epic purple) and again at 3.45 s (Legendary gold), each climb a shockwave, a flash and a shake; the card's face gets
   one shine across it as it lands, and the stage shakes once on a Legendary landing. Only transforms and opacity move;
   each piece plays once; reduced motion and a skip still land on the reveal. ---- */
.gm-cel.gm-mp { background: radial-gradient(120% 90% at 50% 40%, #241056 0%, #120838 46%, #05031a 100%); }
.gm-mp-arena { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.gm-mp-arena i { position: absolute; left: 50%; top: 42%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; opacity: 0; animation: gm-mp-arena 7s linear both; }
@keyframes gm-mp-arena { 0% { opacity: 0; transform: rotate(0) scale(.8); } 12% { opacity: .16; } 60% { opacity: .2; } 100% { opacity: .1; transform: rotate(80deg) scale(1.05); } }
.gm-mp.t-legendary.done .gm-mp-arena i { background-color: transparent; }
/* bigger: the whole stage grows (its own layout is unchanged), with room above and below */
.gm-mp .gm-cel-card { --cw: min(420px, calc(100vw - 32px)); }
.gm-mp-stage { scale: 1.24; margin: 36px 0 30px; }
body.mobile .gm-mp-stage { scale: 1.1; margin: 18px 0 14px; }
/* sparks drawn in while it trembles */
.gm-mp-suck { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.gm-mp-suck i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px #b6a8ff; opacity: 0; animation: gm-mp-suck .9s cubic-bezier(.5, 0, .9, .6) both; }
.gm-mp-suck i:nth-child(1) { --a: 0deg; animation-delay: .5s; } .gm-mp-suck i:nth-child(2) { --a: 140deg; animation-delay: .7s; } .gm-mp-suck i:nth-child(3) { --a: 250deg; animation-delay: .85s; }
.gm-mp-suck i:nth-child(4) { --a: 40deg; animation-delay: 1.05s; } .gm-mp-suck i:nth-child(5) { --a: 200deg; animation-delay: 1.2s; } .gm-mp-suck i:nth-child(6) { --a: 300deg; animation-delay: 1.35s; }
.gm-mp-suck i:nth-child(7) { --a: 95deg; animation-delay: 1.5s; } .gm-mp-suck i:nth-child(8) { --a: 170deg; animation-delay: 1.6s; } .gm-mp-suck i:nth-child(9) { --a: 330deg; animation-delay: 1.7s; } .gm-mp-suck i:nth-child(10) { --a: 20deg; animation-delay: 1.8s; }
@keyframes gm-mp-suck { 0% { opacity: 0; transform: rotate(var(--a)) translateX(230px) scale(1.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(10px) scale(.4); } }
/* the light out of the torn top: Rare blue first, then each climb takes over */
.gm-mp-glow.g0 { background: radial-gradient(closest-side, #fff 0%, #a3dcff 14%, #6ec6ff 30%, rgba(30, 109, 242, .6) 52%, transparent 72%); }
.gm-mp-glow.g1 { background: radial-gradient(closest-side, #fff 0%, #e9baff 14%, #dc92ff 30%, rgba(141, 54, 242, .65) 52%, transparent 72%); }
.gm-mp-glow.g2 { background: radial-gradient(closest-side, #fff 0%, #fff3a8 14%, #ffe37d 30%, rgba(247, 152, 18, .7) 52%, transparent 72%); }
.up1 .gm-mp-glow.g0, .up2 .gm-mp-glow.g0 { animation: gm-mp-glow-a .6s ease-out 2.41s both; }
.up1 .gm-mp-glow.g1 { animation: gm-mp-glow-z 1.27s ease-in-out 2.95s both; }
.up2 .gm-mp-glow.g1 { animation: gm-mp-glow-a .55s ease-out 2.95s both; }
.up2 .gm-mp-glow.g2 { animation: gm-mp-glow-z .77s ease-in-out 3.45s both; }
@keyframes gm-mp-glow-a { 0% { opacity: 0; transform: scale(.15); } 45% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(.9); } }
@keyframes gm-mp-glow-z { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.05); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
/* a climb: a ring that blows out, a flash, and a shake */
.gm-mp-up { position: absolute; left: 50%; top: 36px; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; border: 10px solid #fff; opacity: 0; pointer-events: none; }
.gm-mp-up.u1 { border-color: #e9baff; box-shadow: 0 0 30px 6px #c77dff, inset 0 0 30px 6px #c77dff; animation: gm-mp-wave .65s cubic-bezier(.2, .7, .3, 1) 2.95s both; }
.gm-mp-up.u2 { border-color: #fff3a8; box-shadow: 0 0 40px 10px #ffc93d, inset 0 0 40px 10px #ffc93d; animation: gm-mp-wave .75s cubic-bezier(.2, .7, .3, 1) 3.45s both; }
@keyframes gm-mp-wave { 0% { opacity: 0; transform: scale(.15); } 8% { opacity: 1; transform: scale(.35); } 100% { opacity: 0; transform: scale(2.6); } }
.gm-mp-stage.up1 { animation: gm-mp-shake1 .4s linear 2.95s; }
.gm-mp-stage.up2 { animation: gm-mp-shake1 .4s linear 2.95s, gm-mp-shake2 .5s linear 3.45s; }
@keyframes gm-mp-shake1 { 0%, 100% { translate: 0 0; } 15% { translate: -7px 3px; } 30% { translate: 6px -4px; } 45% { translate: -5px 2px; } 60% { translate: 4px -2px; } 80% { translate: -2px 1px; } }
@keyframes gm-mp-shake2 { 0%, 100% { translate: 0 0; } 12% { translate: -11px 5px; } 24% { translate: 10px -6px; } 36% { translate: -9px 4px; } 50% { translate: 7px -3px; } 66% { translate: -4px 2px; } 82% { translate: 2px -1px; } }
.gm-mp.t-legendary .gm-mp-word { animation: gm-slam .6s cubic-bezier(.2, .9, .3, 1.2) 4.85s both, gm-mp-shake2 .5s linear 4.95s; }
/* the card lands: one shine across its face */
.gm-mp-front::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .75) 48%, rgba(255, 255, 255, .15) 54%, transparent 62%); transform: translateX(-120%); pointer-events: none; animation: gm-mp-shine .8s ease-in-out 4.95s both; }
@keyframes gm-mp-shine { to { transform: translateX(120%); } }
.gm-mp .gm-mp-word { font-size: 60px; } .gm-mp.t-legendary .gm-mp-word { font-size: 66px; }
body.mobile .gm-mp .gm-mp-word { font-size: 48px; } body.mobile .gm-mp.t-legendary .gm-mp-word { font-size: 54px; }
/* the phone waits to be cut: the climbs and the shakes wait too */
.gm-mp.wait .gm-mp-stage { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .gm-mp-arena i, .gm-mp-suck i, .gm-mp-up, .gm-mp-front::after { animation: none; opacity: 0; } .gm-mp-stage { animation: none; } }

/* ---- the pack itself, as a real foil card pack (#1510): a tall pillowed foil wrapper, heat-sealed at both ends with
   ridged crimps and a toothed edge, a tear notch on each side under the top seal, light rolling over the bulge, a
   glossy streak and fine creases near the seals, holographic sheen over the art. The back has the fin seal down the
   middle. Front and back are two faces with their backs hidden, so it can turn in 3D. ---- */
.gm-mp-pack { --w: 150px; height: calc(var(--w) * 1.58); perspective: calc(var(--w) * 6); }
.gm-mp-spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.gm-mp-pk { -webkit-backface-visibility: hidden; backface-visibility: hidden; filter: drop-shadow(0 .4em .55em rgba(8, 0, 40, .5)); }
.gm-mp-rear { rotate: y 180deg; } /* its own property: the shake's transform must not turn it back round */
/* the seals: foil pressed in ridges, lit from above, a toothed cut edge, a dark line where the seal meets the pillow */
.gm-mp-top, .gm-mp-bot { height: 1.5em; background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 .07em, rgba(255, 255, 255, 0) .07em .14em, rgba(30, 10, 80, .28) .14em .2em, rgba(255, 255, 255, 0) .2em .26em),
    linear-gradient(180deg, #e9e6ff 0%, #b6aef0 30%, #7d6fd8 62%, #4b37b4 100%); }
.gm-mp-bot { background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 .07em, rgba(255, 255, 255, 0) .07em .14em, rgba(30, 10, 80, .28) .14em .2em, rgba(255, 255, 255, 0) .2em .26em),
    linear-gradient(0deg, #e9e6ff 0%, #b6aef0 30%, #7d6fd8 62%, #4b37b4 100%); }
.gm-mp-top { clip-path: polygon(0% 22%, 2.5% 0%, 5% 22%, 7.5% 0%, 10% 22%, 12.5% 0%, 15% 22%, 17.5% 0%, 20% 22%, 22.5% 0%, 25% 22%, 27.5% 0%, 30% 22%, 32.5% 0%, 35% 22%, 37.5% 0%, 40% 22%, 42.5% 0%, 45% 22%, 47.5% 0%, 50% 22%, 52.5% 0%, 55% 22%, 57.5% 0%, 60% 22%, 62.5% 0%, 65% 22%, 67.5% 0%, 70% 22%, 72.5% 0%, 75% 22%, 77.5% 0%, 80% 22%, 82.5% 0%, 85% 22%, 87.5% 0%, 90% 22%, 92.5% 0%, 95% 22%, 97.5% 0%, 100% 22%, 100% 100%, 0% 100%); box-shadow: inset 0 -.12em 0 rgba(20, 0, 70, .5); }
.gm-mp-bot { clip-path: polygon(0% 0%, 100% 0%, 100% 78%, 97.5% 100%, 95% 78%, 92.5% 100%, 90% 78%, 87.5% 100%, 85% 78%, 82.5% 100%, 80% 78%, 77.5% 100%, 75% 78%, 72.5% 100%, 70% 78%, 67.5% 100%, 65% 78%, 62.5% 100%, 60% 78%, 57.5% 100%, 55% 78%, 52.5% 100%, 50% 78%, 47.5% 100%, 45% 78%, 42.5% 100%, 40% 78%, 37.5% 100%, 35% 78%, 32.5% 100%, 30% 78%, 27.5% 100%, 25% 78%, 22.5% 100%, 20% 78%, 17.5% 100%, 15% 78%, 12.5% 100%, 10% 78%, 7.5% 100%, 5% 78%, 2.5% 100%, 0% 78%); box-shadow: inset 0 .12em 0 rgba(20, 0, 70, .5); }
/* the pillow: the art's colours under the light that rolls over the bulge, darker at the folded sides and near the seals */
.gm-mp-body { justify-content: space-between; gap: 0; padding: .9em .5em .8em; clip-path: polygon(0 0, 100% 0, 100% 3.5%, 96.5% 5.5%, 100% 7.5%, 100% 100%, 0 100%, 0 7.5%, 3.5% 5.5%, 0 3.5%); /* the tear notches */
  background:
    linear-gradient(90deg, rgba(10, 0, 40, .55) 0%, rgba(10, 0, 40, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(10, 0, 40, .55) 100%),
    linear-gradient(180deg, rgba(10, 0, 40, .4) 0%, rgba(10, 0, 40, 0) 9%, rgba(10, 0, 40, 0) 90%, rgba(10, 0, 40, .45) 100%),
    radial-gradient(ellipse 75% 50% at 48% 44%, #8f5cff 0%, #6a3ef0 38%, #4627c4 70%, #2c168e 100%);
  box-shadow: none; }
.gm-mp-body::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: /* the glossy streak, and creases by the seals */
    linear-gradient(98deg, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, .5) 27%, rgba(255, 255, 255, .12) 31%, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .16) 76%, rgba(255, 255, 255, 0) 80%),
    repeating-linear-gradient(80deg, rgba(255, 255, 255, 0) 0 .9em, rgba(255, 255, 255, .14) .9em 1em, rgba(255, 255, 255, 0) 1em 2.3em) top / 100% 1.4em no-repeat,
    repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0 1.1em, rgba(255, 255, 255, .12) 1.1em 1.2em, rgba(255, 255, 255, 0) 1.2em 2.6em) bottom / 100% 1.3em no-repeat; }
.gm-mp-holo { position: absolute; inset: 0; pointer-events: none; opacity: .3; mix-blend-mode: color-dodge; background: repeating-linear-gradient(125deg, rgba(255, 255, 255, .25) 0 .06em, transparent .06em .42em), conic-gradient(from 210deg at 40% 40%, #ff7bd5, #ffd36e, #7dffb2, #6ec6ff, #c58bff, #ff7bd5); }
.gm-mp-shine { inset: -30% -80%; z-index: 3; }
.gm-mp-brand { position: relative; z-index: 1; padding: .22em .55em; border-radius: .25em; background: rgba(12, 4, 50, .45); font: 800 .58em/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
/* the art: the gem bursting out of a lit window */
.gm-mp-emb { position: relative; z-index: 1; width: 6.2em; height: 6.2em; margin: .1em 0 -.4em; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(205, 230, 255, .6) 28%, rgba(140, 110, 255, .25) 52%, rgba(255, 255, 255, 0) 70%); }
.gm-mp-emb::before { content: ''; position: absolute; inset: -40%; z-index: -1; background: url(/img/gems/rays.png) center / 100% 100% no-repeat; opacity: .55; }
.gm-mp-emb .gm-art { width: 4.6em; filter: drop-shadow(0 .16em 0 rgba(20, 0, 70, .45)); }
.gm-mp-nm { position: relative; z-index: 1; font-size: 1.7em; line-height: .9; color: #fff; text-shadow: 0 .09em 0 #24096e, 0 -.045em 0 #24096e, .055em 0 0 #24096e, -.055em 0 0 #24096e, 0 .22em .3em rgba(20, 0, 70, .5); }
.gm-mp-rib { position: relative; z-index: 1; padding: .3em .7em .32em; border-radius: .25em; background: #ff4fa3; box-shadow: 0 .12em 0 #a3135c; font: 800 .54em/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: #fff; }
.gm-mp-body > i { z-index: 1; } .gm-mp-body > i:nth-of-type(1) { left: 12%; top: 26%; } .gm-mp-body > i:nth-of-type(2) { right: 12%; top: 38%; } .gm-mp-body > i:nth-of-type(3) { left: 15%; bottom: 26%; }
/* the back: the fin seal down the middle, fine print and a code */
.gm-mp-rear .gm-mp-body { justify-content: center; gap: .7em; padding: 1em .9em; background:
    linear-gradient(90deg, rgba(10, 0, 40, .5) 0%, rgba(10, 0, 40, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(10, 0, 40, .5) 100%),
    radial-gradient(ellipse 75% 50% at 52% 46%, #6a44e0 0%, #4a2cc4 55%, #2a168a 100%); }
.gm-mp-nm.sm { font-size: 1em; }
.gm-mp-fine { position: relative; z-index: 3; padding: .4em .5em; border-radius: .25em; background: rgba(12, 4, 50, .55); font: 600 .52em/1.35 var(--sans); text-align: center; color: rgba(255, 255, 255, .88); }
.gm-mp-code { position: relative; z-index: 3; width: 58%; height: 1.5em; border: .2em solid #fff; border-radius: .1em; background: #fff repeating-linear-gradient(90deg, #111 0 .08em, transparent .08em .16em, #111 .16em .22em, transparent .22em .34em, #111 .34em .48em, transparent .48em .56em); }
/* the opening: it spins in, turning twice in 3D as it grows and drops, and lands facing you; the foil shine runs as it turns */
.gm-mp-pack.opening { animation: gm-mp-in .2s ease-out both, gm-mp-away .45s cubic-bezier(.5, 0, .8, .4) 3.77s forwards; }
@keyframes gm-mp-in { from { opacity: 0; } to { opacity: 1; } }
.gm-mp-pack.opening .gm-mp-spin { animation: gm-mp-spinin 1.1s cubic-bezier(.15, .6, .25, 1) both; }
@keyframes gm-mp-spinin { 0% { transform: translateY(-120px) scale(.45) rotateY(-720deg) rotateZ(-12deg); } 70% { transform: translateY(6px) scale(1.04) rotateY(-12deg) rotateZ(2deg); } 100% { transform: none; } }
.gm-mp-pack.opening .gm-mp-shine { animation: gm-mp-foil 1.1s ease-in-out both; }
@keyframes gm-mp-foil { 0% { transform: translateX(-60%); } 35% { transform: translateX(40%); } 36% { transform: translateX(-60%); } 70% { transform: translateX(40%); } 100% { transform: translateX(-10%); } }
.gm-mp-pack.opening .gm-mp-pk:not(.gm-mp-rear) { animation: gm-mp-shake 2s linear .3s; }
.gm-mp.wait .gm-mp-pack.opening .gm-mp-spin, .gm-mp.wait .gm-mp-pack.opening .gm-mp-shine { animation-play-state: running; }
/* the card waits face down behind the pack: its face can't show before the spin turns it */
.gm-mp-front { animation: gm-mp-faceup 4.1s step-end both; }
.gm-mp-back { animation: gm-mp-faceup 2.4s step-end both; } /* and nothing of it shows round the pack while the pack spins in */
@keyframes gm-mp-faceup { from { visibility: hidden; } to { visibility: visible; } }
/* while the server picks: the pack turns slowly in the light, like a pack in a shop window */
.gm-mp-pack.waiting .gm-mp-spin { animation: gm-mp-turn 3.2s linear infinite; }
@keyframes gm-mp-turn { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
/* in the store's card and the confirm it stands still, a little tilted */
@media (prefers-reduced-motion: reduce) { .gm-mp-pack.opening .gm-mp-spin, .gm-mp-pack.opening .gm-mp-shine, .gm-mp-pack.waiting .gm-mp-spin { animation: none; } .gm-mp-front { animation: none; } }
.gm-mp-pack.opening { margin-top: calc(var(--w) * -.79); } /* still centred on the stage at the taller size */
.gm-mp-cut { top: 42px; }
/* the 3D pack (pack3d.js) takes the CSS pack's place once it's drawn; it sits over the card that waits behind it */
.gm-mp-3d { position: absolute; left: 50%; top: 50%; z-index: 2; width: 300px; height: 440px; margin: -220px 0 0 -150px; pointer-events: none; }
.gm-mp.has3d .gm-mp-pack.opening { visibility: hidden; }
.gm-mp.done .gm-mp-3d { display: none; }
/* the Random Gift's note under its buttons (short of Gems, a block) gets the Mystery Pack card's spacing and plate (#1510) */
.gm-gift-hero .gm-mp-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; font: 700 13px/1.35 var(--sans); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.gm-gift-hero .gm-mp-note.short { padding: 6px 6px 6px 14px; border-radius: 14px; background: rgba(4, 30, 40, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); justify-content: space-between; }
.gm-gift-hero .gm-mp-note.short:not(:has(.gm-btn)) { padding: 9px 14px; }
.gm-gift-hero .gm-mp-note.off { color: #fff3bf; } .gm-gift-hero .gm-mp-note.warn { color: #ffd9d9; }
.gm-gift-hero .gm-mp-note b { display: inline-flex; align-items: center; gap: 4px; font: 400 15px/1 var(--gmf); } .gm-gift-hero .gm-mp-note .gem-c { width: 16px; height: 14px; }
.gm-gift-hero .gm-hero-act { gap: 10px 14px; }
body.mobile .gm-gift-hero .gm-mp-note.short { align-self: stretch; }
/* the opening fits the window's height (#1510): the stage grows only where there's room, the whole thing sits a bit
   higher, and a short window can still scroll to Open another */
body:not(.mobile) .gm-cel.gm-mp { padding-top: clamp(8px, calc(50vh - 360px), 120px); padding-bottom: 16px; overflow-y: auto; }
.gm-mp-stage { scale: 1.12; margin: 22px 0 16px; }
.gm-mp .gm-mp-word { margin-bottom: 4px; }
@media (max-height: 860px) { .gm-mp-stage { scale: 1; margin: 6px 0 4px; } .gm-mp .gm-mp-word { font-size: 52px; min-height: 46px; } .gm-mp.t-legendary .gm-mp-word { font-size: 56px; } .gm-mp .gm-mp-reveal .gm-tier { margin-top: 8px; } .gm-mp .gm-mp-reveal .gm-cel-act { margin-top: 12px; } :root .gm-mp-again { margin-top: 8px; } }
@media (max-height: 740px) { .gm-mp-stage { scale: .86; margin: -18px 0 -22px; } .gm-mp .gm-mp-word { font-size: 44px; min-height: 40px; } .gm-mp.t-legendary .gm-mp-word { font-size: 48px; } }
body.mobile .gm-cel.gm-mp { overflow-y: auto; }
/* the pre-roll (#1510): on the computer the pack first takes its time arriving (three slowing turns, the 3D pack's
   own), and everything in gems.css waits for it */
.gm-mp.pre .gm-cel-card *, .gm-mp.pre .gm-mp-arena i { animation-play-state: paused !important; }
/* ripping it by hand on either client (#1510): the 3D pack shows the tear itself; the hint goes once you've started */
.gm-mp.has3d .gm-mp-cut i { display: none; }
.gm-mp.ripping .gm-mp-hint, .gm-mp.ripping .gm-mp-cut b { opacity: 0; transition: opacity .2s; }
.gm-mp.wait:not(.done) { cursor: grab; } .gm-mp.wait.ripping { cursor: grabbing; }
.gm-mp.wait .gm-mp-word { visibility: hidden; } /* the tier is a surprise until it lands */
/* the colour roulette (#1510): the light out of the torn top flicks through Rare blue, Epic purple and Legendary gold,
   slowing, and lands on the tier (gemstore.js roll); then a shockwave in the tier's colour and a shake */
.gm-mp-roll { position: absolute; inset: 0; pointer-events: none; transform-origin: 50% 36px; animation: gm-mp-glow-z 1.81s ease-in-out 2.41s both; }
.gm-mp-roll .gm-mp-glow { animation: none !important; opacity: 0; transform: none; transition: opacity .06s linear; }
.gm-mp-roll .gm-mp-glow.on { opacity: 1; }
.gm-mp-up.uL { border-color: var(--tl); box-shadow: 0 0 34px 8px var(--t2), inset 0 0 34px 8px var(--t2); }
.gm-mp.landed .gm-mp-up.uL { animation: gm-mp-wave .75s cubic-bezier(.2, .7, .3, 1) both; }
.gm-mp.landed .gm-mp-stage { animation: gm-mp-shake1 .4s linear; } .gm-mp.t-legendary.landed .gm-mp-stage { animation: gm-mp-shake2 .5s linear; }
/* the card's spin in colours (#1510): gemstore.js turns the card itself; its back shows a rarity's colour each time it
   comes round, ending on the real one; its face fades in at the end. The light out of the pack is plain white so it
   gives nothing away. */
.gm-mp-roll .gm-mp-glow.gw { background: radial-gradient(closest-side, #fff 0%, #f3efff 16%, rgba(220, 210, 255, .7) 36%, rgba(180, 160, 255, .35) 55%, transparent 72%); }
.gm-mp.jsspin .gm-mp-card { animation: none; }
.gm-mp.jsspin .gm-mp-front { animation: none; visibility: visible; }
.gm-mp-back.c0 { border-color: #a3dcff; background: radial-gradient(90% 70% at 50% 40%, #6ec6ff, #1e6df2 55%, #0b2a94); box-shadow: inset 0 0 0 7px rgba(11, 42, 148, .8), inset 0 0 0 9px rgba(255, 255, 255, .4), 0 0 34px 6px rgba(30, 109, 242, .7); }
.gm-mp-back.c1 { border-color: #e9baff; background: radial-gradient(90% 70% at 50% 40%, #dc92ff, #8d36f2 55%, #3e1295); box-shadow: inset 0 0 0 7px rgba(62, 18, 149, .8), inset 0 0 0 9px rgba(255, 255, 255, .4), 0 0 34px 6px rgba(141, 54, 242, .75); }
.gm-mp-back.c2 { border-color: #fff3a8; background: radial-gradient(90% 70% at 50% 40%, #ffe37d, #f79812 55%, #9c4005); box-shadow: inset 0 0 0 7px rgba(156, 64, 5, .8), inset 0 0 0 9px rgba(255, 255, 255, .45), 0 0 40px 8px rgba(247, 152, 18, .8); }
.gm-mp-back.c0 .gm-art, .gm-mp-back.c1 .gm-art, .gm-mp-back.c2 .gm-art { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .3)); }
/* a face showing a back between flips (#1510): the coloured back, the item hidden */
.gm-mp-front.asback { border-color: #b9c2ff; }
.gm-mp-front.asback > *, .gm-mp-front.asback::after { visibility: hidden; }
.gm-mp-front.asback::before { background: none; }
.gm-mp-front.asback.c0 { border-color: #a3dcff; background: radial-gradient(90% 70% at 50% 40%, #6ec6ff, #1e6df2 55%, #0b2a94); box-shadow: inset 0 0 0 7px rgba(11, 42, 148, .8), inset 0 0 0 9px rgba(255, 255, 255, .4), 0 0 34px 6px rgba(30, 109, 242, .7); }
.gm-mp-front.asback.c1 { border-color: #e9baff; background: radial-gradient(90% 70% at 50% 40%, #dc92ff, #8d36f2 55%, #3e1295); box-shadow: inset 0 0 0 7px rgba(62, 18, 149, .8), inset 0 0 0 9px rgba(255, 255, 255, .4), 0 0 34px 6px rgba(141, 54, 242, .75); }
.gm-mp-front.asback.c2 { border-color: #fff3a8; background: radial-gradient(90% 70% at 50% 40%, #ffe37d, #f79812 55%, #9c4005); box-shadow: inset 0 0 0 7px rgba(156, 64, 5, .8), inset 0 0 0 9px rgba(255, 255, 255, .45), 0 0 40px 8px rgba(247, 152, 18, .8); }
.gm-mp-front.asback::after { content: ''; visibility: visible; position: absolute; inset: 0; transform: none; animation: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cpath d='M12 4h24l10 10H2z' fill='%23fff' opacity='.9'/%3E%3Cpath d='M2 14h44L24 38z' fill='%23fff' opacity='.7'/%3E%3C/svg%3E") center / 104px auto no-repeat; opacity: .9; }
/* while it flips, the word and the lines wait for the face */
.gm-mp.jsspin:not(.done) .gm-mp-word, .gm-mp.jsspin:not(.done) .gm-mp-reveal, .gm-mp.jsspin:not(.done) .gm-mp-flash, .gm-mp.jsspin:not(.done) .gm-mp-rays { visibility: hidden; }
/* the card as a 3D card (#1510): its two faces stand 3 px either side of the middle with five rim layers between, so
   it shows an edge as it turns; a glare runs across whichever face is up (--gx from gemstore.js); and while it spins
   both sides wear a rarity's colour (.asback on the front), until the face comes round */
.gm-mp.jsspin .gm-mp-front { transform: translateZ(3px); }
.gm-mp.jsspin .gm-mp-back { transform: rotateY(180deg) translateZ(3px); }
.gm-mp-rim { position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(90deg, #c9c2ff, #8f86d8 50%, #c9c2ff); pointer-events: none; display: none; }
.gm-mp.jsspin .gm-mp-rim { display: block; }
.gm-mp-rim:nth-child(1) { transform: translateZ(-2.4px); } .gm-mp-rim:nth-child(2) { transform: translateZ(-1.2px); } .gm-mp-rim:nth-child(3) { transform: translateZ(0); } .gm-mp-rim:nth-child(4) { transform: translateZ(1.2px); } .gm-mp-rim:nth-child(5) { transform: translateZ(2.4px); }
.gm-mp-glare { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .5) 47%, rgba(255, 255, 255, .12) 53%, rgba(255, 255, 255, 0) 68%) no-repeat; background-size: 260% 100%; background-position: var(--gx, 120%) 0; mix-blend-mode: screen; opacity: 0; }
.gm-mp.jsspin:not(.done) .gm-mp-glare { opacity: 1; visibility: visible; }
.gm-mp-front.asback > .gm-mp-glare { visibility: visible; }