/* ---------- fonts: self-hosted Google Fonts, latin subset (versioned names, cached immutable) ---------- */
@font-face { font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/archivo-black-v23-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/barlow-condensed-700-v13-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/barlow-condensed-800-v13-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Black Ops One"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/black-ops-one-v21-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Orbitron"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/orbitron-v35-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Share Tech Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/share-tech-mono-v16-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --mx: 0.5;
  --my: 0.5;
  --orange: #ff4d00;
  --hair: #ff6a1a;
  --purple: #7b2d9e;
  --scan: #00ffd5;
  --void: #07040a;
  --fire: #ff2a00;
  --water: #19b7ff;
  --earth: #c47a3a;
  --wind: #e8fff8;
  --love: #ff2a6d;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--void);
  color: #f4efe8;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

#kiosk {
  display: block;
  position: fixed;
  inset: 0;
  color: inherit;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 80%, #3a120866 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, #4a186866 0%, transparent 46%),
    radial-gradient(ellipse at 50% 50%, #1a0a18 0%, #07040a 70%);
}
#kiosk.aziz::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 8%, #fff 0%, #ffe9a088 28%, transparent 62%),
    #fff2;
  pointer-events: none;
  z-index: 35;
  mix-blend-mode: overlay;
}

/* ---------- canvas / atmosphere ---------- */
#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.diva {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 70vmin;
  height: 70vmin;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #1a0820, #ff6a1a, #3a1860, #00e5ff, #ff6a1a, #1a0820);
  filter: blur(48px) saturate(1.15);
  opacity: 0.28;
  animation: spin 22s linear infinite, breathe 5s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe {
  0%, 100% { opacity: 0.32; scale: 1; }
  50% { opacity: 0.5; scale: 1.08; }
}

/* ---------- flying cabs (NYC 2263) ---------- */
.taxis {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
}
.cab {
  position: absolute;
  left: 0;
  top: 16%;
  height: 96px;
  width: auto;
  max-width: 360px;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px #000c);
  will-change: transform;
}

/* ---------- giant chromatic scream ---------- */
.yell {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.yell .y {
  grid-area: 1 / 1;
  font-family: "Black Ops One", sans-serif;
  font-size: clamp(4.8rem, 20vw, 17rem);
  line-height: 0.8;
  letter-spacing: 0.02em;
  white-space: nowrap;
  animation: drift 12s ease-in-out infinite;
}
.yell .cyan { color: #18e8ff; opacity: 0.28; translate: -10px -6px; animation-delay: -2s; }
.yell .mag  { color: #ff2ad0; opacity: 0.28; translate: 10px 5px;  animation-delay: -6s; }
.yell .org  { color: #ff4d00; opacity: 0.38; }

.tunnel {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  perspective: 480px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tunnel span {
  grid-area: 1 / 1;
  font-family: "Black Ops One", sans-serif;
  font-size: clamp(3rem, 14vw, 11rem);
  letter-spacing: 0.12em;
  color: transparent;
  -webkit-text-stroke: 2px #ff6a1acc;
  animation: tunnel 7.2s linear infinite;
  transform: translateZ(-900px);
}
.tunnel span:nth-child(1) { animation-delay: 0s; }
.tunnel span:nth-child(2) { animation-delay: -0.9s; }
.tunnel span:nth-child(3) { animation-delay: -1.8s; }
.tunnel span:nth-child(4) { animation-delay: -2.7s; }
.tunnel span:nth-child(5) { animation-delay: -3.6s; }
.tunnel span:nth-child(6) { animation-delay: -4.5s; }
.tunnel span:nth-child(7) { animation-delay: -5.4s; }
.tunnel span:nth-child(8) { animation-delay: -6.3s; }

@keyframes tunnel {
  0%   { transform: translateZ(-900px); opacity: 0; }
  18%  { opacity: 0.7; }
  70%  { opacity: 0.35; }
  100% { transform: translateZ(380px); opacity: 0; }
}

@keyframes drift {
  0%, 100% { transform: translateX(-4%) scale(1); }
  50%      { transform: translateX(4%) scale(1.04); }
}

/* ---------- random stamps ---------- */
.stamps em {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: rotate(var(--r));
  opacity: var(--o);
  font-family: "Black Ops One", sans-serif;
  font-size: clamp(14px, 3.2vw, 52px);
  color: var(--hair);
  pointer-events: none;
  mix-blend-mode: screen;
  white-space: nowrap;
  z-index: 4;
  letter-spacing: 0.08em;
}

/* ---------- HUD ---------- */
.hud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 22px 12px;
  font-family: Orbitron, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  background: linear-gradient(#000c, transparent);
  text-transform: uppercase;
}
.hud-left { display: flex; flex-direction: column; gap: 2px; }
.hud-left b { color: var(--orange); font-size: 13px; letter-spacing: 0.28em; }
.hud-left span { opacity: 0.65; font-family: "Share Tech Mono", monospace; letter-spacing: 0.12em; }
.hud-mid {
  justify-self: center;
  color: var(--scan);
  text-shadow: 0 0 12px var(--scan);
  font-weight: 700;
  font-size: 12px;
}
.hud-right {
  justify-self: end;
  font-family: "Share Tech Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: #ffe7c4;
}
/* ---------- four stones ---------- */
.el {
  position: absolute;
  z-index: 18;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: Orbitron, sans-serif;
  font-size: 10px;
  letter-spacing: 0.4em;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
  transition: transform 0.35s, filter 0.35s;
}
.el i {
  display: none;
}
.el img {
  height: clamp(96px, 16vh, 180px);
  width: auto;
  display: none;
  filter:
    drop-shadow(0 0 10px currentColor)
    drop-shadow(0 10px 16px #000e);
  pointer-events: none;
}
.el canvas.stone-3d {
  position: relative;
  top: auto;
  left: auto;
  translate: none;
  display: block;
  height: clamp(96px, 16vh, 180px);
  width: auto;
  filter:
    drop-shadow(0 0 10px currentColor)
    drop-shadow(0 10px 16px #000e);
  pointer-events: none;
  opacity: 1;
}
.el.mesh-on img { display: none; }
.el:not(.mesh-on) img { display: block; }
.el:not(.mesh-on) canvas.stone-3d { display: none; }
.el.on canvas.stone-3d,
.el.on img {
  filter:
    drop-shadow(0 0 18px currentColor)
    drop-shadow(0 0 32px #ffe14a88)
    brightness(1.15);
}
.el span {
  text-shadow: 0 0 12px currentColor;
}
.el.fire  { top: 12%; left: 2.5%; color: var(--fire); }
.el.wind  { top: 12%; right: 2.5%; color: var(--wind); }
.el.earth { bottom: 40px; left: 2.5%; color: var(--earth); }
.el.water { bottom: 40px; right: 2.5%; color: var(--water); }
.el.fire i {
  background: radial-gradient(circle at 40% 70%, #ffef6a, #ff4d00 45%, #7a0000 80%, transparent 82%);
  animation: flicker 0.35s infinite;
  box-shadow: 0 0 24px #ff4d00cc;
}
.el.water i {
  background: radial-gradient(circle at 30% 30%, #fff, #19b7ff 40%, #004e8a 75%);
  border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%;
  animation: blob 3.5s ease-in-out infinite;
  box-shadow: 0 0 24px #19b7ffaa;
}
.el.earth i {
  background:
    radial-gradient(circle at 30% 30%, #e8c090, transparent 40%),
    radial-gradient(circle at 70% 80%, #6b3a12, #c47a3a 50%, #3a1e08);
  box-shadow: 0 0 18px #c47a3a88;
  animation: rumble 2.8s ease-in-out infinite;
}
.el.wind i {
  border: 2px dashed #e8fff8aa;
  background: conic-gradient(from 0deg, transparent 0 60%, #e8fff855 75%, transparent);
  animation: spin 4s linear infinite;
  box-shadow: 0 0 18px #e8fff866;
}
.el:hover { transform: translateY(-6px); }
.el:focus-visible,
.card:focus-visible,
.slot:focus-visible,
.holo:focus-visible,
.fifth:focus-visible {
  outline: 2px solid var(--scan);
  outline-offset: 4px;
}
.el.on { transform: translateY(-8px); }
.el.on i {
  filter: brightness(1.35);
  box-shadow: 0 0 28px currentColor, 0 0 48px currentColor;
  scale: 1.18;
}
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: brightness(1); }
  50% { transform: scale(1.08) rotate(3deg); filter: brightness(1.3); }
}
@keyframes blob {
  0%, 100% { border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%; }
  50% { border-radius: 40% 60% 40% 60% / 55% 45% 55% 45%; }
}
@keyframes rumble {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 1px); }
}
#kiosk.aligned .fifth span {
  opacity: 1;
  transform: scale(1.25);
  animation: beat 0.7s ease-in-out infinite;
}

/* ---------- stage / holos / card ---------- */
.stage {
  position: absolute;
  inset: 8% 0 11%;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  gap: 12px;
  padding-inline: 24px;
  pointer-events: none;
  perspective: 1200px;
}
.holo {
  pointer-events: auto;
  cursor: pointer;
}

.holo {
  width: 100%;
  /* Screenshots hug the page edges so the card gets the middle. */
  max-width: min(400px, 26vw);
  justify-self: center;
  transform-style: preserve-3d;
}
.holo.left {
  justify-self: start;
  margin-left: 0;
  transform: rotateY(calc(8deg + (var(--mx) - 0.5) * 6deg)) rotateZ(-2deg);
  animation: floaty 7s ease-in-out infinite;
}
.holo.right {
  justify-self: end;
  margin-right: 0;
  transform: rotateY(calc(-8deg + (var(--mx) - 0.5) * 6deg)) rotateZ(2deg);
  animation: floaty 8s ease-in-out infinite 1.2s;
}
.holo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--scan) 55%, transparent);
  box-shadow:
    0 30px 60px #000a,
    0 0 40px color-mix(in srgb, var(--scan) 25%, transparent),
    inset 0 0 40px #00ffd518;
  background: #000;
}
.holo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.35) contrast(1.12);
  display: block;
}
.holo.right img { object-position: 42% 38%; }
.holo.left img { object-position: 50% 45%; }

.holo-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    calc(var(--mx) * 180deg + var(--my) * 90deg),
    #ff00aa33,
    #00ffff22 35%,
    #ffaa0040 70%,
    transparent
  );
  mix-blend-mode: color-dodge;
  pointer-events: none;
}
.holo-scan {
  position: absolute;
  left: 0; right: 0;
  height: 28%;
  background: linear-gradient(transparent, #00ffd555, transparent);
  animation: sweep 2.8s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes sweep {
  from { top: -30%; }
  to   { top: 110%; }
}
.brackets::before,
.brackets::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--scan);
  pointer-events: none;
}
.brackets::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.brackets::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.holo figcaption {
  margin-top: 8px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--scan);
  text-align: center;
  text-shadow: 0 0 8px var(--scan);
}

@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

/* fifth element heart-number */
.fifth {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 14;
  width: auto;
  min-width: 108px;
  height: 88px;
  padding: 0 8px;
  translate: -50% 0;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  filter: blur(0.2px);
  animation: beat 1.15s ease-in-out infinite;
}
.fifth::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, #ff2a6d88, transparent 65%);
}
.fifth span {
  font-family: "Black Ops One", sans-serif;
  font-size: 56px;
  white-space: nowrap;
  color: var(--love);
  text-shadow: 0 0 24px #ff2a6d, 0 0 60px #ff4d00;
  line-height: 1;
  z-index: 1;
}
.fifth small {
  font-size: 0.38em;
  vertical-align: super;
  line-height: 0;
}
@keyframes beat {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 0.9; }
}

/* ---------- the pass ---------- */
.card-wrap {
  position: relative;
  z-index: 12;
  transform-style: preserve-3d;
  pointer-events: none;
  isolation: isolate;
}
.card {
  display: block;
  color: inherit;
  text-decoration: none;
  width: min(46vw, 68vh, 760px);
  transform-style: preserve-3d;
  transform:
    rotateY(calc((var(--mx) - 0.5) * -32deg))
    rotateX(calc((0.5 - var(--my)) * 18deg));
  transition: transform 80ms linear;
  filter: drop-shadow(0 18px 26px #000d);
  position: relative;
  pointer-events: auto;
  cursor: pointer;
}

.pass-shell {
  position: relative;
  container-type: inline-size;
  background:
    linear-gradient(90deg, #6a7078 0 clamp(8px, 2.2cqw, 14px), transparent clamp(8px, 2.2cqw, 14px)),
    linear-gradient(180deg, #d0d5dc 0%, #8a9098 42%, #5c626a 100%);
  padding: clamp(6px, 1.4cqw, 10px) clamp(8px, 1.5cqw, 12px) 18px clamp(10px, 2.4cqw, 16px);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 #fff8,
    inset 0 -2px 6px #0005,
    0 0 0 1px #2a2e32,
    0 0 0 clamp(4px, 0.7cqw, 7px) #07040a,
    0 10px 18px #000d;
}
.pass-btn {
  position: absolute;
  left: 4px;
  bottom: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3a0, #f0c000 42%, #b8860b);
  box-shadow: inset 0 -4px 6px #0004, 0 2px 0 #fff4, 0 4px 10px #0006;
}
.pass-toggle {
  position: absolute;
  left: 24px;
  bottom: 4px;
  width: 14px;
  height: 8px;
  background: #eee;
  border-radius: 1px;
  box-shadow: inset 0 0 0 1px #0005;
}

.pass-id {
  height: auto;
  aspect-ratio: 1.72 / 1;
  background: #fff;
  border-radius: 1px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #1113, 0 2px 8px #0004;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Everything inside is sized in em off this, so the card scales like a
     printed card and its contents always fit the fixed aspect ratio. */
  font-size: 4cqw;
}

.id-title {
  font-family: "Archivo Black", "Arial Black", Impact, sans-serif;
  font-weight: 400;
  font-size: 1.55em;
  letter-spacing: 0.02em;
  text-align: center;
  color: #1a2060;
  padding: 0.04em 0.16em 0;
  line-height: 0.9;
  white-space: nowrap;
  flex: 0 0 auto;
}

.id-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 0.45fr 0.55fr;
  gap: 0.5em;
  padding: 0 0.5em 0.25em;
  align-items: stretch;
}

.id-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25em;
  min-height: 0;
}
.id-photos figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  min-height: 0;
  position: relative;
}
.id-photos img {
  width: 100%;
  flex: 1;
  min-height: 0;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  object-position: 50% 12%;
  display: block;
  background: #111;
}
.id-photos span {
  font-family: "Share Tech Mono", monospace;
  font-weight: 700;
  font-size: 0.5em;
  letter-spacing: 0.08em;
  text-align: center;
  color: #fff;
  background: #111;
  border: 0;
  padding: 0.125em 0;
  line-height: 1.35;
}

.id-info {
  display: flex;
  flex-direction: column;
  gap: 0.1875em;
  min-width: 0;
  min-height: 0;
}
.id-name {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 0.9em;
  letter-spacing: 0.1em;
  color: #e2187a;
  line-height: 1;
  flex: 0 0 auto;
}
.id-addr {
  flex: 0 0 auto;
  max-height: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #f0c400;
  border: 0;
  outline: 0;
  color: #c41a1a;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 0.7em;
  letter-spacing: 0.01em;
  line-height: 1.1;
  padding: 0.385em 0.77em;
}
.id-license {
  background: #f0c400;
  border: 0;
  padding: 0.1875em 0.5em 0.25em;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.lic-h {
  background: transparent;
  color: #111;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 0.75em;
  letter-spacing: 0.06em;
  padding: 0;
}
.lic-c {
  background: transparent;
  color: #c41a1a;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 800;
  font-size: 0.75em;
  letter-spacing: 0.04em;
  padding: 0;
  line-height: 1.1;
}
.id-stats {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 0.64em;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  line-height: 1.18;
  flex: 0 0 auto;
}

.id-foot {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-rows: auto auto;
  gap: 0.1875em 0.5em;
  align-items: center;
  background: #2a1868;
  color: #f4efe4;
  padding: 0.3125em 0.5em 0.375em;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  border-top: 0;
}
.ls {
  grid-row: 1;
  font-size: 0.5625em;
  border: 0;
  background: #fff;
  color: #c41a1a;
  font-weight: 700;
  padding: 0.22em 0.67em;
  letter-spacing: 0.12em;
}
.years {
  grid-column: 1 / 3;
  grid-row: 2;
  font-size: 0.4375em;
  letter-spacing: 0.12em;
  color: #f0c400;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
}
.marks {
  grid-column: 3 / 5;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.375em;
  justify-self: end;
}
.marks i {
  display: block;
  font-style: normal;
}
.visa {
  font-family: "Archivo Black", sans-serif;
  font-size: 0.625em;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(180deg, #1a4a9c, #c41a1a);
  padding: 0.1em 0.5em;
  border-radius: 2px;
}
.mc {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 50%, #f0c400 0 0.31em, transparent 0.375em),
    radial-gradient(circle at 65% 50%, #c41a1a 0 0.31em, transparent 0.375em);
  background-color: #fff;
}
.moon {
  width: 0.875em;
  height: 0.875em;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 40%, #2a1868 0 0.31em, #f0c400 0.375em);
}
.nyc {
  grid-row: 2;
  grid-column: 3 / 5;
  font-size: 0.5em;
  letter-spacing: 0.14em;
  text-align: right;
  font-weight: 700;
  color: #f0c400;
}

.slot {
  margin-top: 10px;
  display: block;
  width: 100%;
  border: 0;
  background: none;
  text-align: center;
  font-family: Orbitron, sans-serif;
  font-size: 10px;
  letter-spacing: 0.45em;
  color: var(--orange);
  text-shadow: 0 0 12px var(--orange);
  position: relative;
  pointer-events: auto;
  cursor: pointer;
}
.slot::before {
  content: "";
  display: block;
  width: 70%;
  height: 8px;
  margin: 0 auto 10px;
  border-radius: 4px;
  background: #000;
  box-shadow:
    0 0 0 2px #ff4d00,
    0 0 18px #ff4d00,
    inset 0 3px 4px #000;
  animation: slotglow 1.6s ease-in-out infinite;
}
@keyframes slotglow {
  0%, 100% { box-shadow: 0 0 0 2px #ff4d00, 0 0 10px #ff4d00, inset 0 3px 4px #000; }
  50% { box-shadow: 0 0 0 2px #ffe14a, 0 0 28px #ff4d00, inset 0 3px 4px #000; }
}
.slot.hot::before {
  animation: none;
  box-shadow: 0 0 0 3px #ffe14a, 0 0 36px #ffe14a, inset 0 3px 4px #000;
}

.nameplate {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 52px;
  z-index: 21;
  text-align: center;
  pointer-events: none;
}
.who {
  font-family: "Black Ops One", sans-serif;
  font-size: clamp(22px, 5.2vw, 52px);
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow:
    3px 0 #00f0ff,
    -3px 0 #ff2ad0,
    0 0 24px #ff4d00;
  animation: glitch 3.5s steps(2, end) infinite;
}
.hint {
  margin-top: 4px;
  font-family: Orbitron, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  color: #ffe7c4cc;
}
.hint em { color: var(--orange); font-style: normal; }
/* Touch screens can't drag-and-drop, so the slot is tapped instead. */
.hint .touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint .touch { display: inline; }
  .hint .no-touch { display: none; }
}

.love-burst {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  font-family: "Black Ops One", sans-serif;
  font-size: clamp(22px, 5vw, 54px);
  letter-spacing: 0.18em;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 24px #ff2a6d, 4px 0 #00f0ff, -4px 0 #ff2ad0;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.6);
}
#kiosk.aligned .love-burst {
  animation: lovein 2.8s ease forwards;
}
@keyframes lovein {
  8% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

.boom {
  position: absolute;
  inset: 0;
  z-index: 32;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 50% 55%, #fff 0 8%, #ffe14a 18%, #ff4d00 42%, transparent 70%);
}
.boom.go {
  animation: bada 0.7s ease-out forwards;
}
@keyframes bada {
  0% { opacity: 0; transform: scale(0.2); }
  35% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes glitch {
  0%, 90%, 100% { translate: 0; }
  92% { translate: 3px -1px; }
  94% { translate: -4px 1px; }
  96% { translate: 2px 0; }
}

/* ---------- ticker ---------- */
.ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 22;
  overflow: hidden;
  background: #ff4d00;
  color: #14080a;
  font-family: Orbitron, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  padding: 8px 0;
  box-shadow: 0 -8px 30px #ff4d0066;
}
.track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 28s linear infinite;
  white-space: nowrap;
  padding-left: 2rem;
}
.track span::before {
  content: "◆ ";
  color: #3c1258;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- film overlays ---------- */
.grain, .scanlines, .vignette, .flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.grain {
  z-index: 40;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain 0.22s steps(2) infinite;
  mix-blend-mode: overlay;
}
@keyframes grain { 50% { translate: -2% 1%; } }

.scanlines {
  z-index: 41;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 2px,
    #00000022 3px
  );
  opacity: 0.35;
}
.vignette {
  z-index: 42;
  background: radial-gradient(ellipse at center, transparent 40%, #000a 100%);
}
.flash {
  z-index: 50;
  opacity: 0;
  background: #ff4d00;
}

/* ---------- departing ---------- */
body.departing .card {
  animation: ram 0.72s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
body.departing .flash {
  animation: blast 0.72s forwards;
}
body.departing .yell .y {
  animation: scream 0.72s forwards;
}
@keyframes ram {
  0% { transform: rotateY(0) scale(1); }
  35% { transform: rotateY(12deg) scale(1.15); }
  100% { transform: rotateY(0) scale(22); }
}
@keyframes blast {
  0% { opacity: 0; background: #ff4d00; }
  40% { opacity: 1; background: #ff4d00; }
  100% { opacity: 1; background: #fff; }
}
@keyframes scream {
  to { transform: scale(2.4); opacity: 1; letter-spacing: 0.2em; }
}

@media (max-width: 1100px) {
  html, body {
    height: auto;
    min-height: 100%;
    /* clip, not hidden/auto: a scroll container on body breaks position: sticky */
    overflow: visible;
    overflow-x: clip;
  }
  #kiosk {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "hud hud hud hud"
      "taxi taxi taxi taxi"
      "fire wind earth water"
      "stage stage stage stage"
      "plate plate plate plate"
      "tick tick tick tick";
    inset: auto;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  #field, .diva, .grain, .scanlines, .vignette, .flash, .love-burst, .boom {
    position: fixed;
  }
  .yell, .tunnel, .stamps { display: none; }
  .hud-top {
    grid-area: hud;
    position: sticky;
    top: 0;
    z-index: 30;
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
    padding: 8px 12px;
    background: #07040af2;
  }
  .hud-left span { display: none; }
  .hud-mid { grid-column: 1 / -1; justify-self: center; text-align: center; }
  .hud-right { justify-self: end; }
  .taxis {
    grid-area: taxi;
    position: relative;
    inset: auto;
    height: 84px;
    width: 100%;
  }
  .cab { top: 8px; height: 64px; max-width: 220px; }
  .el {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    justify-self: center;
    margin: 6px 0 2px;
    letter-spacing: 0.12em;
    font-size: 9px;
  }
  .el.fire, .el.wind, .el.earth, .el.water {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  .el.fire { grid-area: fire; }
  .el.wind { grid-area: wind; }
  .el.earth { grid-area: earth; }
  .el.water { grid-area: water; }
  .el img, .el canvas.stone-3d { height: min(16vh, 108px); }
  .stage {
    grid-area: stage;
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    width: 100%;
    padding: 28px 3% 28px;
    perspective: none;
  }
  .card-wrap, .holo.left, .holo.right { width: min(94vw, 640px); max-width: 100%; }
  .card-wrap { flex: 0 0 auto; order: -1; margin-inline: auto; }
  .card { width: 100%; }
  .fifth {
    position: relative;
    left: auto;
    bottom: auto;
    translate: none;
    margin: 0 auto 2px;
    min-width: 0;
    width: auto;
    height: 52px;
    padding: 0 4px;
  }
  .fifth span { font-size: 36px; }
  .pass-shell { padding-bottom: 18px; }
  .pass-id { aspect-ratio: auto; font-size: max(4cqw, 16.5px); }
  .nyc {
    display: block;
    font-size: 0.4em;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .holo { order: 0; }
  .holo.left, .holo.right {
    position: relative;
    margin: 0;
    opacity: 1;
    transform: none;
    justify-self: auto;
  }
  .holo figcaption {
    font-size: 8px;
    letter-spacing: 0.06em;
    white-space: normal;
  }
  .nameplate {
    grid-area: plate;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 12px 14px;
  }
  .hint {
    letter-spacing: 0.06em;
    font-size: 10px;
    line-height: 1.45;
    padding: 0 8px;
  }
  .ticker { grid-area: tick; position: sticky; bottom: 0; }
}

@media (min-width: 1600px) {
  .card { width: min(52vw, 1000px, calc(160vh - 580px)); }
  .stage { padding-inline: 22px; }
  .holo { max-width: min(380px, 20vw); }
  .holo.left { justify-self: start; }
  .holo.right { justify-self: end; }
  .pass-shell {
    padding-top: 4px;
    padding-right: 6px;
    padding-left: 6px;
    background:
      linear-gradient(90deg, #6a7078 0 5px, transparent 5px),
      linear-gradient(180deg, #d0d5dc 0%, #8a9098 42%, #5c626a 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *:not(.cab):not(.track),
  *:not(.cab):not(.track)::before,
  *:not(.cab):not(.track)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}