@font-face {font-family:Space;src:url('/fonts/body.ttf') format('truetype');font-display:swap}
@font-face {font-family:Chakra;src:url('/fonts/display.ttf') format('truetype');font-weight:700;font-display:swap}

:root {
  color-scheme:dark;
  --paper:#f0f1fa;
  --muted:#a2a6ba;
  --border:#2a2e3b;
  --acid:#c5ff50;
  --accent:#a89aff;
  --wash:rgba(124,92,233,.24);
  --line:rgba(175,153,255,.23);
  font:16px/1.45 Space,system-ui,sans-serif;
  background:#080a12;
  color:var(--paper);
}
* {box-sizing:border-box}
body {margin:0;min-height:100vh;background:radial-gradient(ellipse at 14% 55%,#171322 0,transparent 51%),#080a12}
.layout-pulled {--accent:#d3f580;--wash:rgba(164,190,65,.19);--line:rgba(202,224,133,.24)}
a {color:inherit;text-underline-offset:.24em}
a:focus-visible,summary:focus-visible,button:focus-visible,.card-view:focus-visible {outline:2px solid #9be9fa;outline-offset:4px}
.bar-inner,main,footer {max-width:1224px;margin-inline:auto;padding-inline:clamp(20px,5vw,68px)}
.topbar {border-bottom:1px solid var(--border);background:#0b0d15}
.bar-inner {min-height:75px;display:flex;align-items:center;justify-content:space-between}
.wordmark {display:flex;align-items:center;gap:9px;font:700 20px/.92 Chakra,system-ui,sans-serif;letter-spacing:-.045em;text-decoration:none}
.wordmark small {display:block;margin:5px 0 0 1px;color:#b9bac9;font:600 8px/1 system-ui,sans-serif;letter-spacing:.23em}
.header-link {font-size:14px;color:#c9cbd7;text-decoration:none}
.header-link span {margin-left:5px;color:var(--acid)}
.header-link:hover,.secondary:hover,.credit:hover,footer a:hover {color:white}
.showcase {display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(36px,6.8vw,96px);align-items:center;padding-block:clamp(38px,7vh,80px)}
.display {margin:0;min-width:0}
.stage {
  position:relative;isolation:isolate;display:grid;place-items:center;padding:58px 26px 34px;overflow:hidden;
  border:1px solid var(--border);border-radius:16px;
  background:radial-gradient(ellipse at 48% 52%,var(--wash),transparent 65%),#11121b;
}
.stage::before {
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(circle,#a7a2c854 .7px,transparent .9px);background-size:17px 17px;
  mask-image:linear-gradient(135deg,#000,transparent 57%,#0009);
}
.stage::after {
  content:"";position:absolute;z-index:-1;left:14%;right:14%;bottom:4%;height:11%;border-radius:50%;
  background:radial-gradient(ellipse,#000b,transparent 68%);filter:blur(7px);
}
.stage-key {position:absolute;left:19px;right:19px;top:17px;display:flex;justify-content:space-between;align-items:center;color:#c2bdd3;font:10px/1.2 ui-monospace,monospace;letter-spacing:.14em}
.orbit {position:absolute;z-index:-1;width:76%;aspect-ratio:1.07;border:1px solid var(--line);border-radius:50%;transform:rotate(-24deg);pointer-events:none}
.orbit::before,.orbit::after {content:"";position:absolute;border:1px solid var(--line);border-radius:50%}
.orbit::before {inset:8% -15%;border-style:dashed;opacity:.65}
.orbit::after {inset:24% -33%}
.card-view {
  position:relative;width:min(79%,340px);aspect-ratio:63/88;border-radius:4%;
  perspective:1000px;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;
}
.card-view[role=button] {cursor:grab}
.card-view[data-dragging] {cursor:grabbing}
.card-view:has(.collector) {aspect-ratio:389/542}
.card-surface {
  position:absolute;inset:0;isolation:isolate;overflow:hidden;border-radius:4%;background:#12131b;
  box-shadow:0 18px 32px -8px #000c,0 0 0 1px #ede9ff20;
  transform:rotateX(var(--pitch,0deg)) rotateY(var(--yaw,0deg));
  transition:transform .3s cubic-bezier(.2,.75,.2,1);
}
.card-view[data-lit] .card-surface {transition-duration:85ms;will-change:transform}
.card-face {display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
/* Both public collector posters carry a 389 × 542 card centred at (915,312)
   on a 1200 × 630 print. Undo the poster rotation around that same centre. */
.collector .card-face {
  position:absolute;width:calc(1200 / 389 * 100%);height:calc(630 / 542 * 100%);
  left:calc(50% - 915 / 389 * 100%);top:calc(50% - 312 / 542 * 100%);
  max-width:none;transform-origin:76.25% 49.52381%;transform:rotate(4deg);
}
.layout-pulled .collector .card-face {transform:rotate(-6.5deg)}
.foil-strip {
  position:absolute;inset:0 auto auto 0;width:800%;height:100%;display:none;max-width:none;pointer-events:none;user-select:none;
  transform:translateX(var(--frame,-50%));
}
.foil-strip[data-ready] {display:block}
.foil-blend {transform:translateX(var(--frame-next,-37.5%));opacity:var(--frame-mix,.5)}
.reflection {
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .22s;
  background:radial-gradient(ellipse at var(--light-x,45%) var(--light-y,35%),#fff8,transparent 58%);mix-blend-mode:screen;
}
.collector .reflection {
  background:
    radial-gradient(ellipse at var(--light-x,45%) var(--light-y,35%),#fff8,transparent 48%),
    linear-gradient(115deg,transparent 17%,#7fc8f3 30%,#c9abff 43%,#e7de86 53%,#91edd9 64%,transparent 77%) var(--light-x,50%) var(--light-y,50%)/220% 160%;
  mix-blend-mode:screen;
}
.card-view[data-lit] .collector .reflection {opacity:.31}
figcaption {min-height:31px;padding-top:10px;text-align:center;color:var(--muted);font-size:12px}
.view-controls {display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}
.motion-toggle,.details-jump {display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:7px;color:var(--paper);font:600 13px/1.25 Space,system-ui,sans-serif}
.motion-toggle {margin-top:5px;padding:0 12px;border:1px solid var(--line);border-radius:7px;background:#191b26;cursor:pointer}
.motion-toggle svg {color:var(--accent)}
.motion-toggle[aria-pressed="true"] {border-color:var(--accent)}
.motion-toggle[hidden],.details-jump {display:none}
.motion-status:not(:empty) {display:block;margin:4px auto 0;color:#c9cbd7;line-height:1.3}
.interaction-hint,.keyboard-hint,.interactive .still-hint {display:none}
.interactive .interaction-hint {display:inline}
.interactive .display:has(.card-view:focus-visible) .keyboard-hint {display:inline}
.interactive .display:has(.card-view:focus-visible) .interaction-hint {display:none}
.kicker,.set-label,.badges,.print-facts dt,footer {font-family:ui-monospace,monospace}
.kicker {display:flex;gap:9px;align-items:center;margin:0 0 14px;color:var(--accent);font-size:12px;line-height:1.3;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.signal {width:9px;height:9px;background:var(--accent);transform:rotate(-14deg);box-shadow:2px 2px 0 #080a12,3px 3px 0 var(--accent)}
h1 {margin:0;color:#f5f4fa;font:700 clamp(40px,5.6vw,84px)/.97 Chakra,system-ui,sans-serif;letter-spacing:-.05em;overflow-wrap:anywhere;text-wrap:balance}
.set-label {margin:18px 0 0;color:#c5c7d7;font-size:14px}
.set-label span {padding-inline:4px;color:#6c7082}
.badges {display:flex;flex-wrap:wrap;gap:8px;margin-top:21px}
.badges span {border:1px solid #3a394b;border-radius:5px;background:#14151e;padding:5px 9px;font-size:11px;letter-spacing:.04em}
.badges .rarity {color:var(--accent);border-color:var(--line);background:color-mix(in srgb,var(--wash) 52%,#11121a)}
.print-facts {display:flex;flex-wrap:wrap;gap:15px 28px;margin:25px 0;padding-block:16px;border-block:1px solid var(--border)}
.print-facts dt {color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em}
.print-facts dd {margin:4px 0 0;font-size:15px}
.actions {display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px}
.primary {display:inline-flex;align-items:center;gap:14px;padding:12px 17px;border-radius:6px;color:#161c11;background:var(--acid);font-weight:700;text-decoration:none}
.primary:hover {background:#d4ff7d}
.secondary,.credit {color:#bbbfd0;font-size:13px}
.credit {display:inline-block;margin-top:18px}
details {margin-top:24px;border-top:1px solid var(--border)}
summary {padding:12px 0;color:#d0d2df;font-size:14px;cursor:pointer}
details p {margin:0 0 10px;color:#b6b9c9;font-size:14px}
footer {display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--border);padding-block:16px;color:#969aae;font-size:11px}
footer a {text-decoration:none}
@media(max-width:720px), (max-width:1000px) and (max-height:520px) and (pointer:coarse) {
  body {--masthead:calc(50px + env(safe-area-inset-top,0px))}
  .bar-inner {padding-top:env(safe-area-inset-top,0px);min-height:var(--masthead)}
  main {padding-left:max(7px,env(safe-area-inset-left,0px));padding-right:max(7px,env(safe-area-inset-right,0px))}
  .showcase {max-width:620px;margin:auto;grid-template-columns:1fr;gap:0;padding:0 0 30px}
  .display {
    min-height:calc(100vh - var(--masthead) - 1px);min-height:calc(100svh - var(--masthead) - 1px);
    display:grid;grid-template-rows:1fr auto;gap:0;padding:6px 0 max(4px,env(safe-area-inset-bottom,0px));
  }
  .stage {padding:28px 7px 14px;border-radius:12px}
  .stage-key {top:10px;left:12px;right:12px;font-size:9px}
  .card-view {
    width:100%;
    width:min(100%,calc((100svh - var(--masthead) - 134px - env(safe-area-inset-bottom,0px)) * .7159));
  }
  figcaption {padding:6px 4px 0}
  .details-jump {display:inline-flex;color:#d2d4e2;text-decoration:none}
  .details-jump span {color:var(--accent)}
  .motion-toggle {margin-top:0}
  .view-controls {margin-top:2px}
  .info {padding:24px max(12px,3vw) 0;border-top:1px solid var(--border)}
  .kicker {margin-bottom:9px}
  h1 {font-size:clamp(36px,9vw,53px)}
  .set-label {margin-top:10px}
  .badges {margin-top:12px}
  .print-facts {margin:15px 0;padding-block:11px}
}
@media(max-width:1000px) and (orientation:landscape) and (max-height:520px) and (pointer:coarse) {
  .display {grid-template-columns:minmax(0,1fr) minmax(108px,30%);grid-template-rows:1fr;align-items:center}
  .stage {align-self:stretch;padding:22px 16px 8px}
  .card-view {width:min(100%,calc((100svh - var(--masthead) - 56px) * .7159))}
  .view-controls {flex-direction:column;gap:0}
}
@media(prefers-reduced-motion:reduce) {
  .card-surface,.card-view[data-lit] .card-surface {transform:none;transition:none;will-change:auto}
  .reflection {transition:none}
}