/* ── Lanyard v2: graded holo card ───────────────────────────────
   A trading card sealed in a grading slab, hanging from a woven
   lanyard. Markup lives in the sidebar; physics in lanyard-v2.js.
   The slab is drawn at a fixed 288 × 464 and scaled with --s.
   --------------------------------------------------------------- */

.lanyard-v2 {
  --sw: 288;           /* slab width  (px, read by lanyard-v2.js) */
  --sh: 464;           /* slab height */
  --slot: 8;           /* slab top → top edge of the slot */
  --hook: 82;          /* top of the sleeve → slot */
  --rope: -22;         /* where the strap ends, relative to the top of this block */
  --s: 1;              /* overall scale */
  --thick: 16px;       /* slab thickness */

  --acr-body: rgba(196, 208, 226, 0.1);
  --acr-frost: rgba(168, 182, 204, 0.16);
  --acr-line: rgba(38, 50, 74, 0.3);
  --acr-light: rgba(255, 255, 255, 0.85);
  --shadow: rgba(18, 26, 48, 0.3);
  --strap-shadow: 0.2;

  position: relative;
  width: 100%;
  height: 550px;
  margin-bottom: 20px;
  overflow: visible;    /* the slab may swing out over the main column */
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
}
[data-theme="dark"] .lanyard-v2 {
  --acr-body: rgba(214, 226, 246, 0.035);
  --acr-frost: rgba(214, 226, 246, 0.065);
  --acr-line: rgba(0, 0, 0, 0.55);
  --acr-light: rgba(255, 255, 255, 0.5);
  --shadow: rgba(0, 0, 0, 0.75);
  --strap-shadow: 0.55;
}

/* ── Strap ── */
.lz-strap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.lz-strap use { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
/* navy satin ribbon with a gold line woven in along each edge */
.lz-s-base  { stroke: #0c1745; stroke-width: 20; }
.lz-s-gold  { stroke: #e3bf3e; stroke-width: 17; }
.lz-s-fill  { stroke: #1d3389; stroke-width: 14; }
.lz-s-sheen { stroke: url(#lz-sheen); stroke-width: 20; }
.lz-s-hl    { stroke: rgba(255, 255, 255, 0.07); stroke-width: 5; }
.lz-leg--b .lz-s-fill { stroke: #172a73; }   /* the far leg sits in its own shade */
/* the near leg lies on the far one where they meet */
.lz-s-contact { stroke: rgba(0, 0, 0, 0.45); stroke-width: 21; filter: blur(2.5px); }
.lz-strap-shadow {
  filter: blur(6px);
  opacity: var(--strap-shadow);
  transform: translate(9px, 12px);
}
.lz-strap-shadow use { stroke: #000; stroke-width: 18; }

/* ── Hardware: crimp, swivel, hook ── */
.lz-hw {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}
.lz-hw svg { position: absolute; left: -20px; top: -6px; overflow: visible; }
/* the hook passes in front of the slab's top rim, then dips into the slot */
.lz-hw--front svg { clip-path: inset(79px 0 8px 50%); }

/* ── Hanging rig ── */
.lz-hang {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  will-change: transform;
}

.lz-shadow {
  position: absolute;
  left: -144px;
  top: -8px;
  width: 288px;
  height: 464px;
  border-radius: 12px;
  background: var(--shadow);
  filter: blur(16px);
  pointer-events: none;
  will-change: transform;
}

.lz-slab {
  position: absolute;
  left: -144px;
  top: -8px;
  width: 288px;
  height: 464px;
  transform-style: preserve-3d;
  transform-origin: 50% 8px;
  cursor: grab;
  touch-action: pan-y;   /* vertical swipes still scroll the page */
  will-change: transform;
}
.lanyard-v2.is-dragging .lz-slab { cursor: grabbing; }

/* acrylic: two clear sheets, the card suspended between them */
.lz-sheet,
.lz-core,
.lz-glare {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lz-sheet { pointer-events: none; overflow: visible; }
.lz-sheet--front { transform: translateZ(8px); }
.lz-sheet--back  { transform: translateZ(-8px); }

.lz-acr-body  { fill: var(--acr-body); }
.lz-acr-frost { fill: var(--acr-frost); }
.lz-acr-line  { fill: none; stroke: var(--acr-line); stroke-width: 1; }
.lz-acr-light { fill: none; stroke: var(--acr-light); stroke-width: 1; }

.lz-core {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.lz-core--front { transform: translateZ(0.5px); }
.lz-core--back  { transform: rotateY(180deg) translateZ(0.5px); }

.lz-side {
  position: absolute;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.6), rgba(186, 200, 222, 0.5) 44%,
    rgba(96, 110, 136, 0.6) 50%,
    rgba(186, 200, 222, 0.5) 56%, rgba(255, 255, 255, 0.6));
}
.lz-side--l,
.lz-side--r {
  top: 9px;
  bottom: 9px;
  left: 0;
  width: var(--thick);
  transform-origin: 0 50%;
  transform: translateZ(8px) rotateY(90deg);
}
.lz-side--r { left: 100%; }
.lz-side--t,
.lz-side--b {
  left: 9px;
  right: 9px;
  top: 0;
  height: var(--thick);
  transform-origin: 50% 0;
  transform: translateZ(8px) rotateX(-90deg);
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.6), rgba(186, 200, 222, 0.5) 44%,
    rgba(96, 110, 136, 0.6) 50%,
    rgba(186, 200, 222, 0.5) 56%, rgba(255, 255, 255, 0.6));
}
.lz-side--b { top: 100%; }

/* reflections on the plastic: a fixed corner sheen plus a band that
   sweeps across as the slab turns */
.lz-glare {
  border-radius: 9px;
  overflow: hidden;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(8.3px);
  background:
    radial-gradient(120% 60% at 8% 0%, rgba(255, 255, 255, 0.2), transparent 60%),
    linear-gradient(200deg, transparent 72%, rgba(255, 255, 255, 0.07));
}
.lz-glare--back { transform: rotateY(180deg) translateZ(8.3px); }
.lz-glare::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 46%;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, 0.34) 42%, rgba(255, 255, 255, 0.1) 58%, transparent);
  transform: translateX(calc(var(--sweep, -110) * 1%)) skewX(-12deg);
  opacity: var(--glint, 0);
}

/* ── Grading label ── */
.lz-label {
  position: absolute;
  left: 16px;
  top: 26px;
  width: 256px;
  height: 68px;
  padding: 5px 8px 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  column-gap: 8px;
  background: #fff;
  border: 2.5px solid #d3202b;
  border-radius: 3px;
  color: #14161b;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 7.6px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lz-label-lines { display: flex; flex-direction: column; }
.lz-label-grade { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.lz-label-grade b { font-size: 21px; font-weight: 800; line-height: 0.95; letter-spacing: -0.02em; }
.lz-label-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 5.6px;
  letter-spacing: 0.08em;
}
.lz-label-brand { color: #d3202b; font-weight: 800; }
.lz-barcode {
  flex: 1;
  height: 9px;
  background: repeating-linear-gradient(90deg,
    #14161b 0 1px, transparent 1px 2px, #14161b 2px 4px, transparent 4px 5px,
    #14161b 5px 6px, transparent 6px 8.5px, #14161b 8.5px 9.5px, transparent 9.5px 11px);
}

.lz-label--back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 6.4px;
  letter-spacing: 0.14em;
}
.lz-crest { width: auto; height: 44px; -webkit-user-drag: none; }

/* ── The card ── */
.tc {
  position: absolute;
  left: 30px;
  top: 116px;
  width: 228px;
  height: 319px;
  padding: 10px;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(160deg, #fbe67a, #f3d143 40%, #e5bd2c);
  box-shadow: 0 0 0 0.5px rgba(90, 70, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.25);
  color: #10262b;
  font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", var(--font);
  cursor: inherit;
}
.tc-body {
  height: 100%;
  padding: 4px 8px 3px;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  background:
    radial-gradient(60% 40% at 18% 12%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(50% 35% at 86% 58%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(70% 45% at 30% 92%, rgba(62, 168, 150, 0.5), transparent 70%),
    linear-gradient(170deg, #cfeee7, #9ed8cb 55%, #c1e9e0);
  box-shadow: inset 0 0 0 0.5px rgba(16, 80, 72, 0.5);
}

.tc-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  column-gap: 3px;
  height: 21px;
  flex: none;
}
.tc-stage {
  grid-column: 1 / -1;
  font-size: 5.2px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
}
.tc-name {
  font-size: 12.6px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  color: #10262b;
}
.tc-hp { font-size: 9.6px; font-weight: 700; line-height: 1.25; color: #d3202b; }
.tc-type {
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  margin-bottom: 1px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #35b8a4, #14806f);
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 8.4px;
  font-weight: 700;
  line-height: 1;
}
.tc-en {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.4);
}

.tc-art {
  position: relative;
  flex: none;
  height: 132px;
  margin-top: 2px;
  padding: 3px;
  isolation: isolate;
  background: linear-gradient(135deg, #fff3b0, #c59b2c 30%, #f8e287 52%, #a57d17 78%, #f2d96b);
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.45);
}
.tc-art-window { position: relative; height: 100%; overflow: hidden; }
.tc-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 64%;
  transform: scale(1.2);
  transform-origin: 50% 40%;
  -webkit-user-drag: none;
}
.tc-foil,
.tc-stars,
.tc-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* holo only on the background, the way the old cards kept the figure clear */
.tc-foil,
.tc-stars {
  -webkit-mask-image: radial-gradient(34% 88% at 50% 76%, transparent 58%, #000 100%);
          mask-image: radial-gradient(34% 88% at 50% 76%, transparent 58%, #000 100%);
  mix-blend-mode: screen;
}
/* the photo has a pale sky and dark hills: tint by hue so the rainbow
   shows on both, and let one star layer burn in where it is bright */
.tc-foil { mix-blend-mode: color; }
.tc-stars--b { mix-blend-mode: color-dodge; }
.tc-foil {
  background: linear-gradient(115deg,
    #ff5470, #ffcf5c 17%, #6dffa0 34%, #5cc8ff 50%, #b47bff 67%, #ff5470 84%, #ffcf5c);
  background-size: 320% 320%;
  background-position: calc(50% + var(--ty, 0) * 2%) calc(50% + var(--tx, 0) * 2%);
  opacity: calc(0.3 + var(--glint, 0) * 0.3);
}
.tc-stars {
  background-image:
    url("lanyard-v2-stars.svg"),
    repeating-linear-gradient(120deg, #000 0 12%, #fff 20%, #000 28% 40%),
    linear-gradient(120deg, #ff8097, #ffe08a, #8dffb5, #8ad9ff, #cba0ff, #ff8097);
  background-blend-mode: multiply, multiply, normal;
  background-size: 96px 96px, 300% 300%, 400% 400%;
  background-position:
    0 0,
    calc(50% + var(--ty, 0) * 2.2%) calc(50% + var(--tx, 0) * 2.2%),
    calc(50% + var(--ty, 0) * 1.6%) 50%;
}
.tc-stars--b {
  background-image:
    url("lanyard-v2-stars.svg"),
    repeating-linear-gradient(60deg, #000 0 14%, #fff 21%, #000 28% 44%),
    linear-gradient(60deg, #8ad9ff, #cba0ff, #ff8097, #ffe08a, #8dffb5, #8ad9ff);
  background-size: 131px 131px, 300% 300%, 400% 400%;
  background-position:
    47px 23px,
    calc(50% - var(--ty, 0) * 1.9%) calc(50% + var(--tx, 0) * 2.2%),
    calc(50% - var(--ty, 0) * 1.6%) 50%;
}
.tc-shine {
  background: radial-gradient(circle at calc(50% - var(--ty, 0) * 3%) calc(30% - var(--tx, 0) * 3%),
    rgba(255, 255, 255, 0.4), transparent 46%);
  mix-blend-mode: overlay;
  opacity: calc(0.25 + var(--glint, 0) * 0.75);
}

.tc-species {
  flex: none;
  margin: 3px 8px 0;
  padding: 1px 0;
  font-size: 5.6px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(90deg, #c59b2c, #f8e287 22%, #fff3b0 50%, #f8e287 78%, #c59b2c);
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.35);
}

.tc-moves { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tc-move {
  display: grid;
  grid-template-columns: 34px 1fr 24px;
  align-items: center;
  column-gap: 4px;
  padding: 4px 0;
  font-size: 6.6px;
  line-height: 1.28;
}
.tc-move + .tc-move { border-top: 0.5px solid rgba(16, 38, 43, 0.55); }
.tc-cost { display: flex; flex-wrap: wrap; gap: 1.5px; }
.tc-move b { font-size: 10.4px; font-weight: 700; letter-spacing: -0.01em; margin-right: 2px; }
.tc-dmg { font-size: 12px; font-weight: 700; text-align: right; }

.tc-stats {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 2px 0 3px;
  border-top: 1px solid rgba(16, 38, 43, 0.8);
  text-align: center;
}
.tc-stats dt { font-size: 4.8px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.3; }
.tc-stats dd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 10px;
  font-size: 6.4px;
  font-weight: 700;
  line-height: 1;
}
.tc-stats .tc-en { width: 8px; height: 8px; }

.tc-flavor {
  flex: none;
  padding: 2px 4px;
  font-size: 5.9px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  border: 0.5px solid rgba(16, 38, 43, 0.75);
  background: rgba(255, 255, 255, 0.22);
}
.tc-flavor span { font-style: normal; font-weight: 700; white-space: nowrap; }
.tc-foot {
  flex: none;
  display: flex;
  justify-content: space-between;
  padding-top: 2px;
  font-size: 4.4px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* card back */
.tc--back {
  padding: 0;
  background:
    repeating-conic-gradient(from 12deg at 50% 50%, rgba(255, 255, 255, 0.09) 0 9deg, transparent 9deg 18deg),
    radial-gradient(circle at 50% 50%, #5d8df0, #2b4fb8 46%, #16286f 82%);
  box-shadow: inset 0 0 0 9px #1a2f80, inset 0 0 0 10px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
}
.tc-crest {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 6px rgba(6, 14, 48, 0.55));
  -webkit-user-drag: none;
}

/* ── Hint ── */
.lanyard-v2 .lanyard-hint {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.lanyard-v2.is-touched .lanyard-hint { opacity: 0; }

@media (max-width: 400px) {
  .lanyard-v2 {
    --s: 0.9;
    --rope: -20;
    height: 502px;
  }
}

/* throwing the slab must never widen the page.
   clip (not hidden) so the sticky sidebar keeps working */
body { overflow-x: clip; }

/* the strap hangs in front of the header. the site name stays on top of
   it, with a halo in the page colour so it reads over the dark webbing */
.brand {
  position: relative;
  z-index: 2;
  text-shadow: 0 0 2px var(--bg), 0 0 5px var(--bg), 0 0 9px var(--bg);
}