/* FLOOPS — "Available FLOOPS" gallery (floops.html). Loaded after site.css (fonts, tokens, the .cap header capsule).
   Near-black, hairlines, white type; colour lives only in the renders, the gold 1/1 rim and the fur covers. */

html.gal-page { --deep: #050406; --accent: #fff; background: #050406; }
html.gal-page body { background: #050406; color: #f2f0f4; font-size: 16px; }
:root {
  --g-card: #0d0c10; --g-card-2: #121116;
  --g-line: rgba(255, 255, 255, .08); --g-line-2: rgba(255, 255, 255, .14);
  --g-ink: #f4f2f6; --g-ink-2: rgba(244, 242, 246, .62); --g-ink-3: rgba(244, 242, 246, .4);
  --g-gold: #e3c37a; --g-gold-2: #f6e2a8;
  --g-r: 16px;
}
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 12px; background: #fff; color: #000; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* background: faint fur drawn once into a canvas, vignette over it */
.gfur { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.gglow { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(1100px 700px at 50% 0%, rgba(120, 80, 170, .10), transparent 70%), radial-gradient(1400px 900px at 50% 50%, transparent 30%, rgba(0, 0, 0, .78) 100%); }

/* header: the home capsule + the chenille logo as the way back to the pile */
.gtop { background: linear-gradient(to bottom, rgba(5, 4, 6, .82), rgba(5, 4, 6, 0)); }
.gtop__brand { display: block; width: 116px; line-height: 0; opacity: .92; transition: opacity .25s var(--ease-soft); }
.gtop__brand:hover { opacity: 1; }
.gtop__brand img { width: 100%; height: auto; }
.cap .cap__a[aria-current="page"] { color: #fff; background-color: rgba(255, 255, 255, .1); }
.cap .cap__a[aria-current="page"]::after { opacity: .95; transform: none; }
@media (max-width: 560px) { .gtop__brand { display: none; } }

/* hero */
.gal { position: relative; z-index: 1; max-width: 1480px; margin: 0 auto; padding: calc(var(--header-h) + 40px) var(--gutter) 96px; }
.ghero { padding: 8px 0 26px; }
.ghero__eyebrow { margin: 0 0 14px; font: 600 11px/1 var(--f-body); letter-spacing: .34em; text-transform: uppercase; color: var(--g-ink-3); }
.ghero__h { margin: 0; font: 600 clamp(40px, 6.2vw, 84px)/.98 var(--f-display); letter-spacing: -.015em; color: var(--g-ink);
  font-variation-settings: 'SOFT' 100, 'WONK' 0, 'opsz' 144; }
.ghero__h em { font-style: italic; font-weight: 500; color: #fff; }
.ghero__count { margin: 18px 0 0; font: 500 15px/1.4 var(--f-body); color: var(--g-ink-2); letter-spacing: .01em; }
.ghero__count b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-block; }
.ghero__count b.is-tick { animation: gTick .5s var(--ease); }
@keyframes gTick { 30% { transform: translateY(-3px); color: var(--g-gold-2); } }

/* sticky toolbar: tier chips + Available / All, both as black fur-rimmed capsules (.cap rim from src/page/caprim.js)
   with a soft lighter pill that slides under the active button (JS: placePill) */
.gbar { position: sticky; top: calc(var(--header-h) - 6px); z-index: 20; margin: 0 calc(var(--gutter) * -1) 18px; padding: 12px var(--gutter); }
.gbar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(5, 4, 6, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--g-line); opacity: 0; transition: opacity .3s var(--ease-soft); }
.gbar.is-stuck::before { opacity: 1; }
.gbar__in { display: flex; align-items: center; gap: 22px; justify-content: space-between; }
.gcaps.cap, .gseg.cap { --cap-h: 46px; display: flex; align-items: center; padding: 0 5px; flex: none; }
.gcaps.cap { flex: 0 1 auto; min-width: 0; }
.gchips { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; height: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; border-radius: 99px; --fl: 0px; --fr: 0px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%); }
.gchips::-webkit-scrollbar { display: none; }
.gchips.fade-l { --fl: 28px; }
.gchips.fade-r { --fr: 28px; }

/* the sliding pill (one per capsule) */
.gpill { position: absolute; left: 0; top: 5px; height: calc(100% - 10px); width: 0; border-radius: 99px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .09));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 4px 14px -6px rgba(0, 0, 0, .9);
  opacity: 0; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s var(--ease-soft), background .4s var(--ease-soft); }
.gpill.is-on { opacity: 1; }
.gpill[data-t="one"] { background: linear-gradient(180deg, rgba(246, 226, 168, .26), rgba(216, 179, 99, .13));
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .3), inset 0 0 0 1px rgba(227, 195, 122, .2), 0 4px 16px -6px rgba(227, 195, 122, .35); }
.gcaps.cap .gpill, .gseg.cap > .gpill { position: absolute; z-index: 0; }

.gchip, .gseg__b {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px 0 13px; border: 0; border-radius: 99px;
  background: transparent; color: rgba(255, 255, 255, .66);
  font: 500 13.5px/1 var(--f-body); letter-spacing: .035em; cursor: pointer; white-space: nowrap;
  transition: color .25s var(--ease-soft), background-color .25s var(--ease-soft);
  -webkit-tap-highlight-color: transparent;
}
.gchip i { font-style: normal; font-weight: 500; font-size: 11px; letter-spacing: .02em; color: rgba(255, 255, 255, .34); font-variant-numeric: tabular-nums;
  margin-left: -1px; transition: color .25s var(--ease-soft); }
.gchip[aria-pressed="true"], .gseg__b[aria-pressed="true"] { color: #fff; }
.gchip[aria-pressed="true"] i { color: rgba(255, 255, 255, .58); }
.gchip--one { color: rgba(240, 214, 150, .82); }
.gchip--one[aria-pressed="true"] { color: var(--g-gold-2); }
.gchip--one[aria-pressed="true"] i { color: rgba(246, 226, 168, .62); }

/* the little tier pompom before each label (gold for 1/1, the others whisper) */
.gdot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; color: var(--dc, #fff);
  background: radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .85) 0 18%, currentColor 55%, color-mix(in srgb, currentColor 40%, #000) 100%);
  opacity: .62; transition: transform .45s cubic-bezier(.3, 1.7, .5, 1), opacity .25s var(--ease-soft), box-shadow .3s var(--ease-soft); }
.gdot::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: radial-gradient(circle, currentColor 0 45%, transparent 72%);
  opacity: .35; filter: url(#fz-pom); }
.gchip[data-tier="all"] .gdot { --dc: #e9e4f0; width: 6px; height: 6px; }
.gchip[data-tier="one"] .gdot { --dc: #e3b95c; opacity: 1; width: 9px; height: 9px;
  background: radial-gradient(circle at 36% 30%, #fff6d8 0 16%, #f3d68a 42%, #c3913c 78%, #7a5520 100%);
  box-shadow: 0 0 8px rgba(240, 200, 110, .45); }
.gchip[data-tier="legendary"] .gdot { --dc: #efe4cf; }
.gchip[data-tier="misprint"] .gdot { --dc: #d9c7d6; background: none; border: 1.5px dashed currentColor; width: 9px; height: 9px; box-sizing: border-box; }
.gchip[data-tier="misprint"] .gdot::after { display: none; }
.gchip[data-tier="epic"] .gdot { --dc: #b6a0e2; }
.gchip[data-tier="rare"] .gdot { --dc: #93cbb6; }
.gchip[data-tier="common"] .gdot { --dc: #9d97a6; }
.gchip[aria-pressed="true"] .gdot { opacity: 1; }

/* hover: the label brightens, the pompom puffs up and glows, a tiny fur pompom settles under it (like the header) */
.gchip::after, .gseg__b::after {
  content: ''; position: absolute; left: 50%; bottom: 1px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0 30%, #e9e3f2 60%, rgba(233, 227, 242, 0) 74%);
  filter: url(#fz-pom); opacity: 0; transform: translateY(3px) scale(.3);
  transition: opacity .25s var(--ease-soft), transform .45s cubic-bezier(.3, 1.7, .5, 1); pointer-events: none;
}
@media (hover: hover) {
  .gchip:hover, .gseg__b:hover { color: #fff; }
  .gchip:not([aria-pressed="true"]):hover, .gseg__b:not([aria-pressed="true"]):hover { background-color: rgba(255, 255, 255, .05); }
  .gchip--one:hover { color: var(--g-gold-2); }
  .gchip:hover i { color: rgba(255, 255, 255, .55); }
  .gchip:hover .gdot { opacity: 1; transform: scale(1.3); box-shadow: 0 0 10px color-mix(in srgb, var(--dc, #fff) 55%, transparent); }
  .gchip:not([aria-pressed="true"]):hover::after, .gseg__b:not([aria-pressed="true"]):hover::after { opacity: .9; transform: none; }
}
.gchip:active, .gseg__b:active { transform: scale(.97); }
.gchip:focus, .gseg__b:focus { outline: none; }
.gchip:focus-visible, .gseg__b:focus-visible { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }

/* Available / All: a small matching capsule switch */
.gseg__b { height: 36px; padding: 0 16px; }
.gseg__b[data-avail="1"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #8fe0a8; box-shadow: 0 0 8px rgba(143, 224, 168, .6);
  opacity: .35; transition: opacity .3s var(--ease-soft); }
.gseg__b[data-avail="1"][aria-pressed="true"]::before { opacity: 1; }

/* grid */
.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 40vw, 196px), 1fr)); gap: 16px; outline: none; }
html.g-big .ggrid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.gcard {
  position: relative; border-radius: var(--g-r); background: var(--g-card); border: 1px solid var(--g-line);
  overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 260px;
  transition: border-color .25s var(--ease-soft), transform .35s var(--ease), box-shadow .35s var(--ease);
  animation: gIn .5s var(--ease) backwards;
}
@keyframes gIn { from { opacity: 0; transform: translateY(10px); } }
.gcard:hover { border-color: var(--g-line-2); transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); }
.gcard--one { border-color: transparent; background: linear-gradient(var(--g-card), var(--g-card)) padding-box, linear-gradient(140deg, #f7e3a9, #b58a3c 38%, #f0d38b 62%, #8a6526) border-box; }
.gcard--one:hover { border-color: transparent; box-shadow: 0 18px 44px -22px rgba(227, 195, 122, .35); }
.gcard__media { position: relative; aspect-ratio: 1; overflow: hidden; background: #111014; border-radius: calc(var(--g-r) - 5px); margin: 5px 5px 0; isolation: isolate; }
.gcard__media::before { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 60% at 50% 45%, rgba(255, 255, 255, .045), transparent 70%); }
.gcard__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease-soft), transform 1.2s var(--ease-soft), filter 1.2s var(--ease-soft); }
.gcard__img.is-in { opacity: 1; }
.gcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px 10px 13px; }
.gcard__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13.5px/1.2 var(--f-body); color: var(--g-ink); letter-spacing: .01em; }
.gcard__name--muted { color: var(--g-ink-3); font-weight: 500; }
.gtier { flex: none; height: 21px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 99px; border: 1px solid var(--g-line-2);
  font: 700 9.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--g-ink-2); }
.gtier--legendary { color: #fff; border-color: rgba(255, 255, 255, .5); }
.gtier--misprint { border-style: dashed; }
.gtier--common { color: var(--g-ink-3); border-color: var(--g-line); }
.gtier--one { color: #1a1306; border-color: transparent; background: linear-gradient(120deg, #f3dc9c, #d8b363); }

/* ---------- adopted: drowned in fur ---------- */
.gcard__fur { position: absolute; inset: 0; z-index: 2; background-size: cover; background-position: center; pointer-events: none; }
.gcard__fur.f1 { transform: scaleX(-1); }
.gcard__fur.f2 { transform: scaleY(-1); }
.gcard__fur.f3 { transform: rotate(180deg); }
.gcard__live { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; transition: opacity .3s var(--ease-soft); }
.gnap { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; }
.gcard.is-gone .gnap { opacity: 1; }
.gnap__eyes { position: absolute; left: 50%; top: 44%; width: 40%; transform: translate(-50%, -50%); overflow: visible; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55)); }
.gnap__tag {
  position: absolute; right: 9%; bottom: 10%; padding: 4px 8px 4px 9px; border-radius: 3px;
  background: linear-gradient(180deg, #f3e8d4, #e4d4b9); color: #3a2547;
  font: 700 8.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-5deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 0 2px #ece0ca;
  outline: 1px dashed rgba(90, 58, 110, .55); outline-offset: -3.5px;
  text-shadow: 0 .5px 0 rgba(255, 255, 255, .6);
}
.gnap__tag::before { /* the cross-stitch that sews it onto the fur */
  content: ''; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  background: linear-gradient(45deg, transparent 42%, #e9dcc4 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #e9dcc4 42% 58%, transparent 58%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}
.gcard.is-gone .gcard__img { opacity: 0; }
.gcard.is-gone .gcard__name { color: var(--g-ink-3); }
.gcard.is-gone:hover { transform: none; }
/* the swallow (1.2 s): the FLOOP sinks and dims under the growing pile, then the eyes and the tag surface */
.gcard.is-covering .gcard__img { transform: scale(.93) translateY(2%); filter: brightness(.45) saturate(.7); }
.gcard.is-covering .gnap { opacity: 1; }
.gcard.is-covering .gnap__eyes { animation: gEyes 1.25s var(--ease) both; }
.gcard.is-covering .gnap__tag { animation: gTag 1.25s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes gEyes { 0%, 68% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes gTag { 0%, 78% { opacity: 0; transform: rotate(-16deg) scale(.4); } 100% { opacity: 1; transform: rotate(-5deg) scale(1); } }

/* cards open the detail view */
.gcard { cursor: pointer; }
.gcard:focus { outline: none; }
.gcard:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .75); }
.gcard.is-lifted .gcard__media > * { visibility: hidden; }

/* ---------- detail view (dialog): picture flies in from its card (FLIP), a sewn fabric label beside it ---------- */
html.gdv-open { overflow: hidden; }
.gdv { position: fixed; inset: 0; z-index: 200; --fs: min(calc(100svh - 128px), calc(100vw - 552px), 760px); }
.gdv[hidden] { display: none; }
.gdv__bg { position: absolute; inset: 0; background: rgba(4, 3, 6, .74); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
.gdv__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, rgba(120, 80, 170, .12), transparent 70%); }
.gdv__sheet { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; scrollbar-width: none; }
.gdv__sheet::-webkit-scrollbar { display: none; }
.gdv__grip { display: none; }
.gdv__in { margin: auto; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 3.4vw, 52px); padding: 64px 40px; }
.gdv__fig { position: relative; flex: none; width: var(--fs); aspect-ratio: 1; margin: 0; border-radius: 22px; overflow: hidden; background: #111014;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .06); transform-origin: 0 0; will-change: transform; }
.gdv__fig.is-one { box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 0 1.5px rgba(227, 195, 122, .75), 0 0 60px -20px rgba(227, 195, 122, .35); }
.gdv__fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-select: none; }
.gdv__hi { opacity: 0; transition: opacity .45s var(--ease-soft); }
.gdv__hi.is-in { opacity: 1; }
.gdv__gone { position: absolute; right: 6%; bottom: 7%; padding: 7px 13px 7px 14px; border-radius: 4px;
  background: linear-gradient(180deg, #f3e8d4, #e4d4b9); color: #3a2547;
  font: 700 11px/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
  transform: rotate(-4deg); box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 0 0 2px #ece0ca;
  outline: 1px dashed rgba(90, 58, 110, .55); outline-offset: -4.5px; text-shadow: 0 .5px 0 rgba(255, 255, 255, .6); }
.gdv__gone[hidden] { display: none; }

/* the rarity passport: near-black glass, hairline border, a faint guilloche (two interfering ring fields), cream type;
   gold only for the rare (< 2 %) values and the 1/1s. Bars: fill = how rare the value is (set by detail.js as --f). */
.gdv__tag.pp { --pp-ink: #f3ece0; --pp-ink-2: rgba(243, 236, 224, .62); --pp-ink-3: rgba(243, 236, 224, .38); --pp-line: rgba(243, 236, 224, .1);
  position: relative; flex: none; width: 372px; min-width: 0; padding: 26px 28px 20px; color: var(--pp-ink); border-radius: 18px; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, rgba(26, 23, 31, .92), rgba(11, 10, 14, .94) 60%, rgba(8, 7, 10, .96));
  -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(243, 236, 224, .1), inset 0 1px 0 rgba(255, 255, 255, .06); }
.pp::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background:
    repeating-radial-gradient(circle at -20% 120%, transparent 0 6px, rgba(243, 236, 224, .045) 6px 7px),
    repeating-radial-gradient(circle at 120% -20%, transparent 0 6px, rgba(243, 236, 224, .035) 6px 7px);
  -webkit-mask-image: radial-gradient(120% 70% at 100% 0%, #000 0, rgba(0, 0, 0, .35) 45%, transparent 80%);
  mask-image: radial-gradient(120% 70% at 100% 0%, #000 0, rgba(0, 0, 0, .35) 45%, transparent 80%); }
.pp::after { content: ''; position: absolute; inset: 7px; z-index: -1; pointer-events: none; border-radius: 12px;
  border: 1px dashed rgba(243, 236, 224, .13); }                 /* the stitched inner edge */
.pp.is-one { box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(227, 195, 122, .45), 0 0 70px -30px rgba(227, 195, 122, .4), inset 0 1px 0 rgba(255, 240, 200, .1); }
.pp.is-one::after { border-color: rgba(227, 195, 122, .3); }

.pp__seal { position: absolute; top: 14px; right: 14px; width: 82px; height: 82px; color: rgba(243, 236, 224, .2); transform: rotate(-14deg); pointer-events: none;
  font-family: var(--f-body); font-weight: 700; }
.pp.is-one .pp__seal { color: rgba(227, 195, 122, .42); }
.pp__head { display: flex; align-items: center; gap: 9px; margin: 2px 92px 16px 0; font: 700 9px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--pp-ink-3); white-space: nowrap; overflow: hidden; }
.pp__head i { flex: 0 0 18px; height: 0; border-top: 1px dashed rgba(243, 236, 224, .3); }
.pp .gdv__name { margin: 0 88px 0 0; font: 600 34px/1.02 var(--f-display); letter-spacing: -.01em; color: #fff; font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 144; }
.pp.is-one .gdv__name { color: var(--g-gold-2); }
.pp .gdv__row { display: flex; align-items: center; gap: 10px; margin: 12px 0 18px; }
.pp .gtier--one { color: #1a1306; background: linear-gradient(120deg, #f3dc9c, #d8b363); border-color: transparent; }
.pp .gdv__state { font: 600 10.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--pp-ink-3); }
.pp__body:empty::before { content: 'Reading the passport…'; display: block; font: italic 500 14px/1.4 var(--f-display); color: var(--pp-ink-3); padding: 8px 0 14px; }

/* headline: Top N % + the rank */
.pp__rank { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 0 14px; border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); }
.pp__top { margin: 0; font: 600 52px/.9 var(--f-display); letter-spacing: -.02em; color: #fff; font-variant-numeric: lining-nums tabular-nums; font-variation-settings: 'SOFT' 50, 'opsz' 144; }
.pp__top small { display: block; margin: 0 0 8px; font: 700 9px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: var(--pp-ink-3); }
.pp__top small:last-child { display: inline; font: 500 26px/1 var(--f-display); letter-spacing: 0; text-transform: none; color: var(--pp-ink-2); margin: 0 0 0 2px; }
.pp__pos { margin: 0 0 4px; font: 600 11px/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pp-ink-3); text-align: right; white-space: nowrap; }
.pp__pos b { color: var(--pp-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* the special row (Misprint stitching / Legendary pose) */
.pp__spec { position: relative; margin: 12px 0 0; padding: 11px 14px 11px 14px; border-radius: 10px; font: 600 14px/1.3 var(--f-body); color: var(--g-gold-2);
  background: linear-gradient(100deg, rgba(227, 195, 122, .14), rgba(227, 195, 122, .04)); box-shadow: inset 0 0 0 1px rgba(227, 195, 122, .3); }
.pp__spec span { display: block; margin-bottom: 4px; font: 700 9px/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: rgba(227, 195, 122, .7); }

/* the bars */
.pp__bars { list-style: none; margin: 8px 0 0; padding: 0; }
.pp__t { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; column-gap: 10px; padding: 8px 0 7px; }
.pp__t + .pp__t { border-top: 1px solid rgba(243, 236, 224, .05); }
.pp__k { font: 700 9px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--pp-ink-3); white-space: nowrap; }
.pp__v { justify-self: end; text-align: right; font: 600 13.5px/1.15 var(--f-body); color: var(--pp-ink); }
.pp__v i { font-style: normal; font-size: 10px; color: var(--g-gold); margin-right: 5px; vertical-align: 1px; }
.pp__p { min-width: 40px; text-align: right; font: 500 11.5px/1 var(--f-body); color: var(--pp-ink-3); font-variant-numeric: tabular-nums; }
.pp__bar { grid-column: 1 / -1; position: relative; height: 3px; margin-top: 7px; border-radius: 3px; background: rgba(243, 236, 224, .07); overflow: hidden; }
.pp__bar i { position: absolute; inset: 0; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--f, .1));
  background: linear-gradient(90deg, rgba(243, 236, 224, .32), rgba(243, 236, 224, .78)); }
.pp__t.is-rare .pp__v { color: var(--g-gold-2); }
.pp__t.is-rare .pp__p { color: var(--g-gold); font-weight: 700; }
.pp__t.is-rare .pp__bar i { background: linear-gradient(90deg, #a8833c, #e3c37a 70%, #f6e2a8); box-shadow: 0 0 10px rgba(227, 195, 122, .5); }

/* 1/1: no ordinary traits (they lie: Chrome is all chrome) — a big gold seal, material and story */
.pp__one { display: flex; flex-direction: column; align-items: center; padding: 18px 0 16px; border-top: 1px solid rgba(227, 195, 122, .2); }
.pp__oneseal { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 132px; height: 132px; border-radius: 50%;
  color: #2a1d06; background: radial-gradient(circle at 34% 28%, #fff4cf, #f0d48e 32%, #c99a45 72%, #8f6a26);
  box-shadow: 0 0 0 5px rgba(227, 195, 122, .14), 0 0 0 6px rgba(227, 195, 122, .4), 0 18px 40px -12px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(227, 195, 122, .45),
    inset 0 -6px 14px rgba(110, 72, 14, .45), inset 0 4px 10px rgba(255, 250, 220, .6); }
.pp__oneseal::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 1px dashed rgba(60, 40, 8, .45); }
.pp__oneseal b { font: 600 54px/1 var(--f-display); letter-spacing: -.02em; text-shadow: 0 1px 0 rgba(255, 245, 210, .6); }
.pp__oneseal small { font: 700 10px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; }
.pp__onecap { margin: 14px 0 0; font: 700 9.5px/1 var(--f-body); letter-spacing: .3em; text-transform: uppercase; color: rgba(227, 195, 122, .75); }
.pp__facts { margin: 0; }
.pp__facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0 9px; border-top: 1px solid var(--pp-line); }
.pp__facts dt { font: 700 9px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--pp-ink-3); }
.pp__facts dd { margin: 0; text-align: right; font: 600 14px/1.2 var(--f-body); color: var(--g-gold-2); }
.pp__story { margin: 4px 0 0; padding: 14px 4px 4px; border-top: 1px solid var(--pp-line); font: italic 500 17px/1.38 var(--f-display); color: var(--pp-ink); text-align: center; text-wrap: balance; }

.pp .gdv__care { margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed rgba(243, 236, 224, .1); font: italic 500 11px/1.3 var(--f-display); color: var(--pp-ink-3); text-align: center; letter-spacing: .02em; }

/* opening stagger (replays each time the view opens; the bar fills grow after the row lands) */
.gdv.is-in .pp__body > *, .gdv.is-in .pp__t, .gdv.is-in .pp__facts > div { animation: ppIn .5s var(--ease) both; animation-delay: calc(.16s + var(--i, 0) * 45ms); }
.gdv.is-in .pp__bars, .gdv.is-in .pp__facts { animation: none; }
.gdv.is-in .pp__bar i { animation: ppBar .7s var(--ease) both; animation-delay: calc(.26s + var(--i, 0) * 45ms); }
.gdv.is-in .pp__oneseal { animation: ppSeal .8s cubic-bezier(.3, 1.5, .5, 1) .2s both; }
@keyframes ppIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes ppBar { from { transform: scaleX(0); } }
@keyframes ppSeal { from { opacity: 0; transform: scale(.7) rotate(-20deg); } }

.gdv__x.cap { position: absolute; top: 18px; right: 20px; z-index: 3; --cap-h: 46px; width: 46px; padding: 0; display: grid; place-items: center; border: 0;
  color: rgba(255, 255, 255, .85); cursor: pointer; transition: color .2s var(--ease-soft), transform .35s cubic-bezier(.3, 1.7, .5, 1); }
.gdv__x svg { width: 18px; height: 18px; }
.gdv__x:hover { color: #fff; transform: rotate(90deg); }
.gdv__x:focus { outline: none; }
.gdv__x:focus-visible { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }

/* enter / leave (JS adds .is-in after the first frame; the picture itself is animated by FLIP) */
.gdv__bg, .gdv__x { opacity: 0; transition: opacity .42s var(--ease-soft); }
.gdv__tag { opacity: 0; translate: 0 18px; transition: opacity .45s var(--ease-soft) .12s, translate .6s var(--ease) .1s; }
.gdv.is-in .gdv__bg, .gdv.is-in .gdv__x { opacity: 1; }
.gdv.is-in .gdv__tag { opacity: 1; translate: 0 0; }
.gdv.is-out .gdv__tag { transition-delay: 0s; transition-duration: .22s; }

@media (max-width: 1100px) {
  .gdv { --fs: min(calc(100vw - 420px), calc(100svh - 120px), 640px); }
  .gdv__tag.pp { width: 320px; padding: 24px 22px 18px; }
  .pp .gdv__name { font-size: 28px; }
  .pp__top { font-size: 44px; }
}
/* phones / narrow: a full-screen sheet, picture on top, the label below; swipe down closes */
@media (max-width: 760px) {
  .gdv { --fs: calc(100vw - 32px); }
  .gdv__bg { background: rgba(5, 4, 6, .9); }
  .gdv__in { flex-direction: column; align-items: stretch; justify-content: flex-start; align-self: flex-start; gap: 30px; padding: 66px 16px calc(40px + env(safe-area-inset-bottom)); margin: 0 auto; }
  .gdv__fig { border-radius: 18px; }
  .gdv__tag.pp { width: auto; padding: 24px 20px 18px; }
  .pp__head { margin-right: 76px; letter-spacing: .24em; }
  .pp__seal { width: 70px; height: 70px; top: 12px; right: 12px; }
  .pp .gdv__name { font-size: 30px; }
  .gdv__grip { display: block; position: absolute; left: 50%; top: 12px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(255, 255, 255, .28); z-index: 2; }
  .gdv__x.cap { top: 10px; right: 12px; --cap-h: 42px; width: 42px; }
  .gdv__gone { font-size: 9.5px; padding: 6px 10px 6px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .gdv__tag { translate: none !important; transition: opacity .3s linear !important; }
  .gdv.is-in .pp__body > *, .gdv.is-in .pp__t, .gdv.is-in .pp__facts > div, .gdv.is-in .pp__bar i, .gdv.is-in .pp__oneseal { animation: none !important; }
  .gdv__x:hover { transform: none; }
}

.gempty { margin: 60px 0; text-align: center; color: var(--g-ink-3); font: italic 500 18px/1.4 var(--f-display); }
.gmore { height: 1px; }

@media (max-width: 720px) {
  .gal { padding-top: calc(var(--header-h) + 18px); padding-bottom: 72px; }
  .ghero { padding-bottom: 18px; }
  .ggrid { gap: 10px; }
  .gbar { top: calc(var(--header-h) - 10px); padding-top: 8px; padding-bottom: 8px; }
  .gbar__in { flex-direction: column; align-items: stretch; gap: 10px; }
  .gcaps.cap, .gseg.cap { --cap-h: 42px; padding: 0 4px; }
  .gcaps.cap { flex: none; }
  .gseg.cap { align-self: flex-start; }
  .gchip { height: 34px; padding: 0 12px 0 11px; gap: 7px; font-size: 13px; }
  .gseg__b { height: 34px; padding: 0 14px; font-size: 12.5px; }
  .gpill, .gseg.cap > .gpill { top: 4px; height: calc(100% - 8px); }
  .gcard { --g-r: 13px; contain-intrinsic-size: auto 220px; }
  .gcard__media { margin: 4px 4px 0; }
  .gcard__meta { min-height: 38px; padding: 7px 9px 8px 10px; }
  .gcard__name { font-size: 12.5px; }
  .gtier { height: 19px; padding: 0 6px; font-size: 8.5px; letter-spacing: .1em; }
  .gnap__tag { font-size: 7px; padding: 3px 6px 3px 7px; letter-spacing: .16em; }
}
@media (prefers-reduced-motion: reduce) {
  .gcard, .gcard__img, .gnap__eyes, .gnap__tag { animation: none !important; transition: none !important; }
}

/* site.css sets `main { pointer-events: none }` for the home page's fur; the gallery is fully interactive (owner 2026-10-12: cards didn't open on real clicks) */
main.gal, main.gal * { pointer-events: auto; }
main.gal .gcard__fur, main.gal .gcard__live, main.gal .gnap, main.gal .gpill { pointer-events: none; }

/* the rarity pompom (default trait panel, src/page/pompom.js); ?pp=passport brings back the trait bars */
.gdv__tag.pp.is-pompom { width: 404px; padding: 24px 26px 18px; }
.pp.is-pompom .pp__seal { display: none; }
.pp.is-pompom .pp__head, .pp.is-pompom .gdv__name { margin-right: 0; }
.pp.is-pompom .gdv__row { margin-bottom: 10px; }
.pmp__rank { margin: 0; padding: 10px 0; border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line);
  font: 600 11px/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--pp-ink-3); text-align: center; }
.pmp__rank b { color: var(--pp-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pmp__rank.is-one { color: rgba(227, 195, 122, .8); letter-spacing: .3em; font-size: 9.5px; }
.pmp__stage { margin: 2px -10px 0; }
.pmp { position: relative; padding: 10px 0; border-radius: 18px; outline: none; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.pmp.is-one { cursor: default; }
.pmp:focus-visible { box-shadow: inset 0 0 0 1px rgba(243, 236, 224, .22); }
.pmp canvas { display: block; width: min(340px, 100%); height: auto; margin: 0 auto; }
.pmp__pill, .pmp__lbl { position: absolute; left: 0; top: 0; margin: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; pointer-events: none;
  border-radius: 999px; font-family: var(--f-body); color: var(--pp-ink); background: rgba(14, 12, 18, .9);
  box-shadow: 0 0 0 1px rgba(243, 236, 224, .16), 0 8px 20px -8px #000; transition: opacity .2s; }
.pmp__pill { z-index: 2; padding: 7px 12px; font-size: 12px; font-weight: 600; line-height: 1; }
.pmp__lbl { padding: 5px 9px; font-size: 10.5px; font-weight: 600; line-height: 1; gap: 5px; }
.pmp__pill b, .pmp__lbl b { font-weight: 700; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--pp-ink-3); }
.pmp__lbl b { font-size: 7.5px; letter-spacing: .14em; }
.pmp__pill em, .pmp__lbl em { font-style: normal; }
.pmp__pill span, .pmp__lbl span { color: var(--pp-ink-2); font-variant-numeric: tabular-nums; }
.pmp__pill.is-gold, .pmp__lbl.is-gold { color: var(--g-gold-2); box-shadow: 0 0 0 1px rgba(227, 195, 122, .45), 0 0 16px -5px rgba(227, 195, 122, .45); }
.pmp__pill.is-gold span, .pmp__lbl.is-gold span { color: var(--g-gold); }
.pmp__lbl.is-dim { opacity: .35; }
.pmp__lbl.is-off { opacity: 0; }
.pmp__pill[hidden] { display: none; }
.pmp__all { margin: 2px 0 0; border-top: 1px solid var(--pp-line); }
.pmp__all summary { padding: 10px 0 4px; cursor: pointer; font: 700 9px/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--pp-ink-3); text-align: center; list-style: none; }
.pmp__all summary::-webkit-details-marker { display: none; }
.pmp__all summary::after { content: ' +'; }
.pmp__all[open] summary::after { content: ' −'; }
.pmp__all ul { list-style: none; margin: 6px 0 0; padding: 0; }
.pmp__all li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 5px 0; font: 600 12.5px/1.2 var(--f-body); }
.pmp__all li span { font: 700 8.5px/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--pp-ink-3); }
.pmp__all li b { justify-self: end; font-weight: 600; }
.pmp__all li i { font-style: normal; color: var(--pp-ink-3); font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }
.pmp__all li.is-rare b, .pmp__all li.is-rare i { color: var(--g-gold-2); }
@media (max-width: 1100px) { .gdv__tag.pp.is-pompom { width: 360px; } }
@media (max-width: 760px) {
  .gdv__tag.pp.is-pompom { width: auto; }
  .pmp canvas { width: min(300px, 100%); }
}
@media (prefers-reduced-motion: reduce) { .pmp__pill, .pmp__lbl { transition: none; } }