/* Steal a FNAF Values */
/* the card lift value only restyles the card itself, not everything inside it */
@property --lift { syntax: "<length>"; inherits: false; initial-value: 0px; }

:root {
  --ink: #0d0812;
  --night: #120a1c;
  --night-2: #1c1030;
  --night-3: #2a1846;
  --purple: #8a17e6;
  --purple-2: #b02cff;
  --slime: #7dff2a;
  --slime-deep: #134200;
  --orange: #ff8a1a;
  --cash: #ffe14a;
  --red: #e22626;
  --muted: #b9a6d6;
  --white: #fff;

  --chunky: "Lilita One", "Impact", sans-serif;
  --pixel: "Silkscreen", monospace;
  --spooky: "Creepster", "Impact", cursive;

  --px-outline:
    2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
    2px 2px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink),
    0 4px 0 var(--ink), 2px 4px 0 var(--ink), -2px 4px 0 var(--ink);

  --ease: cubic-bezier(.22, .9, .3, 1.15);
  --smooth: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scrollbar-gutter: stable; }
body {
  min-height: 100vh;
  background-color: var(--night);
  background-image:
    url("../assets/art/studs.webp"),  /* studded baseplate (tools/make_studs.py) */
    linear-gradient(180deg, #1a0b2e 0, var(--night) 900px);
  background-size: 18px 18px, auto;
  color: var(--white);
  font-family: "Fredoka", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  visibility: visible;  /* index.html hides the page until this stylesheet has loaded */
}
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

/* outlined chunky text */
.ink-text {
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}

/* =========================================================
   Hero — night sky, haunted skyline, stud floor + FNaF path
   ========================================================= */
.hero {
  position: relative;
  height: clamp(420px, 44vw, 530px);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #12061f 0%, #2a0f4d 45%, #5a1a8c 78%, #8a2f7a 100%);
}
.sky {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse 60% 40% at 50% 92%, rgba(255, 138, 26, .55), transparent 70%),
    radial-gradient(1.6px 1.6px at 8% 18%, #fff, transparent 70%),
    radial-gradient(1.2px 1.2px at 17% 42%, #ffffffcc, transparent 70%),
    radial-gradient(2px 2px at 27% 12%, #fff, transparent 70%),
    radial-gradient(1.2px 1.2px at 36% 30%, #ffffffaa, transparent 70%),
    radial-gradient(1.6px 1.6px at 46% 8%, #fff, transparent 70%),
    radial-gradient(1.2px 1.2px at 58% 22%, #ffffffbb, transparent 70%),
    radial-gradient(2px 2px at 66% 40%, #ffffffcc, transparent 70%),
    radial-gradient(1.4px 1.4px at 74% 10%, #fff, transparent 70%),
    radial-gradient(1.2px 1.2px at 91% 34%, #ffffffaa, transparent 70%),
    radial-gradient(1.6px 1.6px at 96% 14%, #fff, transparent 70%);
  animation: twinkle 5s ease-in-out infinite alternate;
  will-change: opacity;
}
@keyframes twinkle { to { opacity: .75; } }
.moon {
  position: absolute; top: 9%; right: 11%;
  width: clamp(70px, 8vw, 116px); aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 38%, rgba(214, 196, 140, .55) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 64%, rgba(214, 196, 140, .5) 0 12%, transparent 13%),
    radial-gradient(circle at 66% 30%, rgba(214, 196, 140, .4) 0 6%, transparent 7%),
    radial-gradient(circle at 40% 40%, #fffdf0, #ffe9a6 70%, #f2cf70);
  box-shadow: 0 0 40px 10px rgba(255, 233, 166, .35), 0 0 120px 40px rgba(255, 233, 166, .15);
}
.moon::after {
  content: ""; position: absolute; inset: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 166, .28), transparent 62%);
  animation: moon-glow 6s ease-in-out infinite alternate;
}
@keyframes moon-glow { from { opacity: .35; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }

/* drifting clouds (pass in front of the moon) */
.clouds { position: absolute; inset: 0 0 35% 0; z-index: -3; pointer-events: none; }
.cloud {
  position: absolute; left: 0;
  width: 460px; height: 96px;
  background:
    radial-gradient(closest-side, rgba(70, 30, 110, .85), transparent) 0 30px / 200px 66px no-repeat,
    radial-gradient(closest-side, rgba(80, 36, 124, .9), transparent) 110px 0 / 230px 90px no-repeat,
    radial-gradient(closest-side, rgba(70, 30, 110, .8), transparent) 250px 24px / 210px 70px no-repeat;
  opacity: .7;
  animation: drift 150s linear infinite;
  will-change: transform;
}
.cloud.c1 { top: 6%; animation-delay: -40s; }
.cloud.c2 { top: 24%; scale: .72; opacity: .5; animation-duration: 110s; animation-delay: -95s; }
.cloud.c3 { top: 13%; scale: .9; animation-duration: 190s; animation-delay: -150s; }
@keyframes drift { from { transform: translateX(-520px); } to { transform: translateX(calc(100vw + 60px)); } }

/* bats */
.bats { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.bat {
  position: absolute; left: 0;
  width: 34px; aspect-ratio: 40 / 22;
  animation: fly 26s linear infinite;
  will-change: transform;
}
.bat svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: #110817; }
.bat .wing { animation: flap .26s ease-in-out infinite alternate; will-change: transform; }
.bat.b1 { top: 14%; animation-delay: -6s; }
.bat.b2 { top: 30%; width: 24px; animation-duration: 34s; animation-delay: -21s; }
.bat.b2 .wing { animation-duration: .2s; }
.bat.b3 { top: 8%; width: 20px; animation-duration: 41s; animation-delay: -33s; }
.bat.b3 .wing { animation-duration: .18s; }
@keyframes flap { to { transform: scaleY(-.55); } }
@keyframes fly {
  0%   { transform: translate(-60px, 0); }
  20%  { transform: translate(20vw, -26px); }
  40%  { transform: translate(40vw, 10px); }
  60%  { transform: translate(60vw, -18px); }
  80%  { transform: translate(80vw, 14px); }
  100% { transform: translate(calc(100vw + 60px), -10px); }
}

/* low fog rolling between the houses */
.fog {
  position: absolute; left: -1400px; right: 0; bottom: 134px; z-index: -2;
  height: 110px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 16% 55% at 12% 70%, rgba(200, 150, 255, .22), transparent 70%),
    radial-gradient(ellipse 14% 45% at 40% 62%, rgba(200, 150, 255, .16), transparent 70%),
    radial-gradient(ellipse 18% 50% at 68% 72%, rgba(200, 150, 255, .2), transparent 70%),
    radial-gradient(ellipse 12% 40% at 90% 60%, rgba(200, 150, 255, .14), transparent 70%);
  background-size: 1400px 100%;
  background-repeat: repeat-x;
  animation: fog 70s linear infinite;
}
@keyframes fog { to { transform: translateX(1400px); } }
/* skyline: a static image + the flickering windows as tiny GPU opacity animations (tools/render_skyline.mjs).
   Sized like the old SVG: cover, anchored bottom-centre. */
.skyline {
  position: absolute; left: 0; right: 0; bottom: 146px; z-index: -2;
  height: 62%;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}
.skyline-in {
  position: absolute; left: 50%; bottom: 0;
  width: max(100cqw, calc(100cqh * 1600 / 260)); aspect-ratio: 1600 / 260;
  translate: -50% 0;
  background: url("../assets/art/skyline.webp") 0 0 / 100% 100% no-repeat;
}
.skyline-in i {
  position: absolute;
  background-image: url("../assets/art/skyline-lights.webp");
  background-repeat: no-repeat;
  animation: flicker 5s steps(1) infinite;
}
@keyframes flicker { 0% { opacity: 1; } 46% { opacity: 1; } 47% { opacity: .25; } 50% { opacity: 1; } 52% { opacity: .4; } 54% { opacity: 1; }
  78% { opacity: 1; } 79% { opacity: .15; } 88% { opacity: .15; } 89% { opacity: 1; } }

.floor {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: 150px;
  background: #ef7a10 url("../assets/art/floor.webp") 50% 0 / auto 100% no-repeat;
}
.floor::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(90, 26, 140, .8), rgba(90, 26, 140, 0) 22%),
    linear-gradient(0deg, var(--night) 0, rgba(18, 10, 28, 0) 34%);
  pointer-events: none;
}

.walkway { position: absolute; left: 0; right: 0; bottom: 103px; height: 0; z-index: -1; pointer-events: none; }
.walker {
  position: absolute; left: 0; bottom: 0;
  width: var(--fw); height: var(--h);
  animation: walk-across var(--dur) linear infinite;
  animation-delay: var(--delay);
  will-change: transform;
}
.walker::before {  /* contact shadow */
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -3px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 30, 10, .55), transparent);
}
.walker .clip { position: absolute; inset: 0; overflow: hidden; }
.sprite {
  position: absolute; left: 0; top: 0;
  width: calc(var(--fw) * var(--frames)); height: var(--h);
  background: var(--img) 0 0 / 100% 100% no-repeat;
  animation: walk-frames var(--cycle) steps(var(--frames)) infinite;
  will-change: transform;
}
@keyframes walk-frames { to { transform: translateX(calc(var(--fw) * var(--frames) * -1)); } }
@keyframes walk-across { from { transform: translateX(var(--from)); } to { transform: translateX(var(--to)); } }

.hero-inner {
  position: absolute; left: 0; right: 0; top: 0; bottom: 140px;
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 30px);
  padding: 0 20px;
}
.logo {
  width: clamp(96px, 12vw, 168px); height: auto; flex: none;
  filter: drop-shadow(0 10px 8px rgba(13, 8, 18, .6)) drop-shadow(0 0 30px rgba(255, 154, 26, .45));
  animation: bob 3.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }
.hero-title { margin: 0; display: flex; flex-direction: column; align-items: flex-start; line-height: .9; }
.t-game {
  font-family: var(--pixel); font-weight: 700;
  font-size: clamp(34px, 5.8vw, 80px);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    4px 0 0 var(--ink), -4px 0 0 var(--ink), 0 4px 0 var(--ink), 0 -4px 0 var(--ink),
    4px 4px 0 var(--ink), -4px -4px 0 var(--ink), 4px -4px 0 var(--ink), -4px 4px 0 var(--ink),
    0 8px 0 #6a1fb0, 4px 8px 0 #6a1fb0, -4px 8px 0 #6a1fb0,
    0 12px 0 var(--ink), 4px 12px 0 var(--ink), -4px 12px 0 var(--ink),
    0 22px 26px rgba(0, 0, 0, .55);
}
.t-sub {
  margin: 6px 0 0 4px;
  font-family: var(--spooky); font-weight: 400;
  font-size: clamp(38px, 5.6vw, 74px);
  letter-spacing: 3px;
  color: var(--slime);
  -webkit-text-stroke: 4px var(--slime-deep); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--slime-deep), 0 0 34px rgba(125, 255, 42, .55);
  transform: rotate(-2deg);
  animation: sway 5s ease-in-out infinite;
}
@keyframes sway { 50% { transform: rotate(-.5deg) translateY(-3px); } }
.stamp {
  position: absolute; top: 18px; left: 20px; margin: 0;
  padding: 7px 12px 6px;
  font-family: var(--pixel); font-weight: 700; font-size: 12px; text-transform: uppercase;
  color: var(--muted);
  background: rgba(13, 8, 18, .55);
  border: 3px solid var(--ink);
  border-radius: 10px;
}
.stamp b { color: #fff; margin-left: 4px; }

/* =========================================================
   Page
   ========================================================= */
.page { position: relative; z-index: 2; padding: 0 clamp(16px, 3vw, 56px) 90px; }

/* ---- the four value factors ---- */
.factors {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  margin: -44px 0 0; padding: 0; list-style: none;
}
.factor {
  --accent: #fff;
  flex: 0 1 300px;
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #33205a, var(--night-2));
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .08), inset 0 -6px 0 rgba(0, 0, 0, .3), 0 7px 0 var(--ink);
  overflow: hidden;
}
.factor::after {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 4px;
  border-radius: 0 0 4px 4px; background: var(--accent);
}
.socket {
  flex: none; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 45%, #2a1846), #160c24 75%);
  border: 3px solid var(--ink);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .35);
}
.socket img { width: 46px; height: 46px; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .5)); }
.f-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.f-text b {
  font-family: var(--pixel); font-weight: 700; font-size: 19px; line-height: 1.1; text-transform: uppercase;
  text-shadow: var(--px-outline);
}
.f-text small { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2; color: #ddd0f2; }
.f-obtainable { --accent: #ffd23a; }
.f-population { --accent: #ffb547; }
.f-demand { --accent: #ff6a2a; }
.f-rarity { --accent: #5ad8ff; }

/* ---- filter deck ---- */
.deck {
  margin: 26px 0 16px;
  padding: 16px;
  background: linear-gradient(180deg, #24163c, var(--night-2));
  border: 4px solid var(--ink);
  border-radius: 20px;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .06), 0 7px 0 var(--ink);
}
.deck-row { display: flex; gap: 12px; }
.field {
  position: relative;
  display: flex; align-items: center;
  height: 54px;
  background: #0f0818;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), inset 0 5px 0 rgba(0, 0, 0, .35);
  transition: box-shadow .2s var(--ease-out);
}
.field:focus-within { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), 0 0 0 3px var(--slime); }
.search { flex: 1; min-width: 0; }
.search svg { width: 22px; height: 22px; margin: 0 4px 0 16px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.8; stroke-linecap: round; }
.search input {
  flex: 1; min-width: 0; height: 100%;
  padding: 0 14px 0 6px;
  background: transparent; border: 0; outline: 0;
  font-size: 18px; font-weight: 600;
}
.search input::placeholder { color: #8a7aa6; }
.search input::-webkit-search-cancel-button { filter: invert(1) brightness(.8); cursor: pointer; }
.select { flex: 0 0 220px; }
.select select {
  width: 100%; height: 100%;
  padding: 0 40px 0 16px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23b9a6d6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 14px 9px;
  border: 0; outline: 0;
  appearance: none;
  font-size: 17px; font-weight: 600;
  cursor: pointer;
}
.select select option { background: #1c1030; color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 6px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  font-family: var(--pixel); font-weight: 700; font-size: 13px; text-transform: uppercase;
  box-shadow: 0 4px 0 var(--ink);
  cursor: pointer;
  transition: transform .45s var(--smooth), box-shadow .45s var(--smooth), opacity .35s, filter .35s;
}
.chip:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
.chip:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--ink); transition-duration: .12s; }
.chip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.chip .n { font-size: 10px; opacity: .75; }
.chips.filtering .chip:not(.on) { opacity: .45; filter: saturate(.4); }
.chips.filtering .chip:not(.on):hover { opacity: 1; filter: none; }
.chip.on { outline: 3px solid #fff; outline-offset: 2px; transform: translateY(-2px); }

.result { margin: 0 0 16px 4px; font-family: var(--pixel); font-size: 13px; color: var(--muted); text-transform: uppercase; }

/* =========================================================
   Mutation / event badges (game colours)
   ========================================================= */
.mut {
  display: inline-flex; align-items: center;
  padding: 4px 9px 3px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  font-family: var(--pixel); font-weight: 700; font-size: 12px; text-transform: uppercase;
  white-space: nowrap;
  background-size: 200% 100%;
  box-shadow: 0 3px 0 var(--ink);
}
.m-all            { background-image: linear-gradient(180deg, #c45bff, var(--purple)); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.m-normal         { background-image: linear-gradient(180deg, #ffffff, #bdb7c9); color: #2b2533; }
.m-gold           { background-image: linear-gradient(180deg, #fff0a0, #ffc928 55%, #e09400); color: #4a2d00; }
.m-diamond        { background-image: linear-gradient(160deg, #e6fdff, #4cd8ff 55%, #a8eeff); color: #06324f; }
.m-neon           { background-image: linear-gradient(180deg, #ecff9e, #73ff00); color: #0f3d00; box-shadow: 0 3px 0 var(--ink), 0 0 14px rgba(115, 255, 0, .6); }
.m-frost          { background-image: linear-gradient(180deg, #ffffff, #9fe3ff); color: #0f3f66; }
.m-dj             { --slide: linear-gradient(90deg, #ff3fd0, #7a3cff, #ff3fd0); --slide-dur: 2.4s; color: #fff; text-shadow: 1px 1px 0 #4a0040; }
.m-blacklight     { background-image: linear-gradient(180deg, #2a0030, #0b000e); color: #ff4ff0; text-shadow: 0 0 6px #ff00e6; box-shadow: 0 3px 0 var(--ink), 0 0 14px rgba(255, 0, 230, .55); }
.m-sandy          { background-image: linear-gradient(180deg, #ffe7c2, #eaa65e); color: #4d2a12; }
.m-omc            { background-image: linear-gradient(180deg, #ff6b6b, #c40000); color: #fff; text-shadow: 1px 1px 0 #4a0000; }
.m-jack-o         { background-image: linear-gradient(180deg, #ffc061, #ff6a00); color: #fff; text-shadow: 1px 1px 0 #6b2a00; }
.m-exclusive      { --slide: linear-gradient(90deg, #ff4f4f, #ffb547, #ffe14a, #5bf07a, #5ad8ff, #c06bff, #ff4f4f); --slide-dur: 3s; color: #fff; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink); }
.m-halloween-2026 { background-image: linear-gradient(180deg, #b02cff, #5b0fae); color: #b8ff3a; text-shadow: 1px 1px 0 var(--ink); }
.m-hoax           { --slide: linear-gradient(90deg, #3a0b5e, #120020 50%, #3a0b5e); --slide-dur: 3s; color: #7dff2a; text-shadow: 1px 0 #ff2bd6, -1px 0 #2bd6ff; }
.m-summer         { background-image: linear-gradient(180deg, #fff27a, #ffa51a); color: #6b2a00; }
.m-christmas      { background-image: repeating-linear-gradient(135deg, #e3262e 0 8px, #fff 8px 11px, #1f9d3a 11px 19px, #fff 19px 22px); background-size: auto; color: #fff; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.m-easter         { background-image: linear-gradient(90deg, #ffc4ec, #c7f0ff, #fff3a8, #c9ffcf); color: #6a2f7a; }
.m-valentine      { background-image: linear-gradient(180deg, #ff9cc2, #ff2b6e); color: #fff; text-shadow: 1px 1px 0 #6b0028; }
.m-anniversary    { --slide: linear-gradient(90deg, #ffe14a, #ff7ad9, #b02cff, #ffe14a); --slide-dur: 3s; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
/* sliding badge gradients: a wide layer behind the text moved by the GPU (animating background-position
   repaints every frame, which is what made Firefox/Zen stutter) */
.m-dj, .m-exclusive, .m-hoax, .m-anniversary { position: relative; isolation: isolate; overflow: hidden; background: none; }
.m-dj::before, .m-exclusive::before, .m-hoax::before, .m-anniversary::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; z-index: -1;
  width: 400%;
  background: var(--slide) 0 0 / 50% 100% repeat-x;
  animation: slide var(--slide-dur) linear infinite;
}
@keyframes slide { to { transform: translateX(-50%); } }
.chip::before { animation: none; }  /* the filter chips stay still (they never visibly slid, and it costs Firefox frames) */

/* =========================================================
   Rarity text
   ========================================================= */
.rarity {
  display: inline-block;
  font-family: var(--pixel); font-weight: 700; font-size: 15px; line-height: 1.15; text-transform: uppercase;
  color: #ccc;
  text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink);
}
.r-common { color: #9dff6b; }
.r-rare { color: #44c3ff; }
.r-epic { color: #c46bff; }
.r-legendary { color: #ffd23a; }
.r-mythic { color: #ff4f4f; }
.r-secret, .r-animatronic-god, .r-exclusive, .r-og {
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(2px 2px 0 var(--ink)) drop-shadow(-1px -1px 0 var(--ink)) drop-shadow(1px -1px 0 var(--ink));
}
.r-secret { background-image: linear-gradient(90deg, #ff2b5e, #ff9a1a, #ffe14a, #ff2b5e); }
.r-animatronic-god { background-image: linear-gradient(90deg, #ff5bd2, #ffe14a, #5bf0ff, #a66bff, #ff5bd2); }
.r-exclusive { background-image: linear-gradient(90deg, #ff4f4f, #ffe14a, #5bf07a, #5ad8ff, #c06bff, #ff4f4f); }
.r-og { background-image: linear-gradient(90deg, #fff6c2, #ffd23a, #b88600, #fff6c2); }

/* =========================================================
   Tier frames (card + inspect window)
   ========================================================= */
.tier-common            { --tier: #9dff6b; --frame: linear-gradient(160deg, #d6ffb4, #49c62a 55%, #1f7a12); }
.tier-rare              { --tier: #44c3ff; --frame: linear-gradient(160deg, #c2ecff, #2ea7f0 55%, #0f5f9e); }
.tier-epic              { --tier: #c46bff; --frame: linear-gradient(160deg, #ecc8ff, #a33cf0 55%, #5b0fae); }
.tier-legendary         { --tier: #ffd23a; --frame: linear-gradient(160deg, #fff6c2, #ffc21a 50%, #d97a00); }
.tier-mythic            { --tier: #ff4f4f; --frame: linear-gradient(160deg, #ffc2c2, #ff3b3b 50%, #9e0000); }
.tier-og                { --tier: #ffd23a; --frame: conic-gradient(#fff6c2, #ffd23a, #b88600, #e6e6e6, #fff6c2); --frame-img: url("../assets/art/frame-og.webp"); }
.tier-secret            { --tier: #ff6a2a; --frame: conic-gradient(#ff2b5e, #ff9a1a, #ffe14a, #ff2b5e, #2a0a14, #ff2b5e); --frame-img: url("../assets/art/frame-secret.webp"); }
.tier-animatronic-god   { --tier: #ff5bd2; --frame: conic-gradient(#ff5bd2, #ffe14a, #5bf0ff, #a66bff, #ff5bd2); --frame-img: url("../assets/art/frame-animatronic-god.webp"); }
.tier-exclusive         { --tier: #5bf07a; --frame: conic-gradient(#ff4f4f, #ffb547, #ffe14a, #5bf07a, #5ad8ff, #c06bff, #ff4f4f); --frame-img: url("../assets/art/frame-exclusive.webp"); }
/* spinning frame: a separate layer the GPU rotates, so the card/window never repaints for it */
.spin { position: absolute; inset: 0; display: none; overflow: hidden; border-radius: inherit; pointer-events: none; }
.spin::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--spin-size, 220%); aspect-ratio: 1;
  background: var(--frame-img) center / 100% 100%;  /* a picture of the gradient (tools/make_frames.py): rotating an image is cheap, a CSS gradient is redrawn every frame in Firefox */
  animation: spin 5s linear infinite;
}
.inspect .spin { --spin-size: 130%; }
.card:hover:is(.tier-og, .tier-secret, .tier-animatronic-god, .tier-exclusive) .spin,
.inspect:is(.tier-og, .tier-secret, .tier-animatronic-god, .tier-exclusive) .spin { display: block; }
@keyframes spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.card .mut::before { animation-play-state: paused; }
/* animated rarity text / badges get their own layer so only they repaint */
.card:hover .mut::before { animation-play-state: running; }

/* =========================================================
   Value cards
   ========================================================= */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 22px; }

.card {
  position: relative;
  display: block;
  width: 100%;
  padding: 5px;
  text-align: center;
  background: var(--frame);
  border: 4px solid var(--ink);
  border-radius: 20px;
  box-shadow: 0 7px 0 var(--ink);
  cursor: pointer;
  --lift: 0px;
  /* flat lift only: a 3D tilt makes Firefox redraw the whole card every frame while anything inside animates */
  transform: translate3d(0, var(--lift), 0);
  transition: transform .6s var(--smooth);
}
/* the hover shadow + glow live on their own layer and fade in (animating box-shadow repaints the whole card) */
.card::after {
  content: ""; position: absolute; inset: -4px; z-index: -1;
  border-radius: inherit;
  box-shadow: 0 16px 0 var(--ink), 0 22px 44px -10px color-mix(in srgb, var(--tier) 70%, transparent);
  opacity: 0;
  transition: opacity .6s var(--smooth);
  pointer-events: none;
}
.card:hover { --lift: -9px; z-index: 2; }
.card:hover::after { opacity: 1; }
.card:active { --lift: -3px; transition-duration: .18s; }
.card:active::after { opacity: .35; transition-duration: .18s; }
.card:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.card-in {
  position: relative;
  display: flex; flex-direction: column;
  height: 100%;
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  background: var(--night-2);
}

/* stage: spotlight, light rays, studded podium */
.stage {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, color-mix(in srgb, var(--tier) 38%, transparent), transparent 70%),
    radial-gradient(circle at 50% 45%, #4a1a80, #1e0d36 72%);
}
.rays {
  position: absolute; inset: -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .075) 0 8deg, transparent 8deg 20deg);
  transition: transform 2.4s var(--smooth);
}
.card:hover .rays { transform: rotate(36deg); }
.podium {  /* studded stand, rendered in-game (tools/voxel_icons.py "stand") */
  position: absolute; left: 50%; bottom: 3%;
  width: 72.5%; aspect-ratio: 768 / 385;
  translate: -50% 10.9%;  /* the image has 42px of shadow below the stand */
  background: url("../assets/art/stand.webp") center / contain no-repeat;  /* shadow baked in */
}
.card .podium { width: 66%; }
.stage img {
  position: absolute; left: 9%; right: 9%; top: 5%; bottom: 19%;
  width: 82%; height: 76%;
  object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .45));
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform .7s var(--smooth), opacity .4s ease;
}
.stage img.ready { opacity: 1; }
.card:hover .stage img { transform: translate3d(0, -6px, 0) scale(1.07); }
.badges { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; z-index: 1; }

/* name plate */
.plate {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex: 1;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, var(--night-3), var(--night-2));
  border-top: 3px solid var(--ink);
}
.name {
  font-family: var(--pixel); font-weight: 700; font-size: 17px; line-height: 1.1;
  text-shadow: var(--px-outline);
  text-wrap: balance;
  margin-bottom: 4px;
}
.plate .rarity { margin-bottom: 8px; }
.billboard { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; }
.bb {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0;
  padding: 6px 4px 7px;
  background: #0f0818;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .05);
}
.bb small { font-family: var(--pixel); font-weight: 700; font-size: 10px; color: var(--muted); text-transform: uppercase; }
.bb b {
  font-family: var(--chunky); font-weight: 400; font-size: 20px; line-height: 1;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
  white-space: nowrap;
}
.bb .income { color: #fce323; }
.bb .cost { color: #73ff00; }

/* factor meters */
.meters {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #140b20;
  border-top: 3px solid var(--ink);
}
.meter { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; padding: 8px 2px 9px; }
.meter + .meter { border-left: 2px solid rgba(0, 0, 0, .55); }
.meter img { width: 26px; height: 26px; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .55)); }
.signal { display: flex; align-items: flex-end; gap: 2px; height: 20px; }
.signal i { width: 5px; border: 1.5px solid var(--ink); border-radius: 2px; background: #3a2a52; }
.signal i:nth-child(1) { height: 6px; }
.signal i:nth-child(2) { height: 9px; }
.signal i:nth-child(3) { height: 12px; }
.signal i:nth-child(4) { height: 15px; }
.signal i:nth-child(5) { height: 19px; }
.signal i.on { background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent); }
.yn {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border: 2px solid var(--ink); border-radius: 6px;
  font-family: var(--pixel); font-weight: 700; font-size: 13px; line-height: 1;
  color: var(--ink);
}
.yn.yes { background: linear-gradient(180deg, #b7ff7a, var(--slime)); }
.yn.no { background: linear-gradient(180deg, #ff8a8a, #ff3b3b); }

.empty {
  grid-column: 1 / -1;
  padding: 48px 20px;
  text-align: center;
  font-family: var(--pixel); font-weight: 700; font-size: 20px; text-transform: uppercase; color: var(--muted);
  background: var(--night-2);
  border: 4px solid var(--ink); border-radius: 20px;
  box-shadow: 0 7px 0 var(--ink);
}

/* =========================================================
   Inspect window
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 30px 18px; }
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(40, 14, 72, .9), rgba(10, 5, 16, .96));
}
.inspect {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);  /* phones: the visible area, not counting the browser bars */
  display: flex;
  padding: 6px;
  background: var(--frame);
  border: 4px solid var(--ink);
  border-radius: 26px;
  box-shadow: 0 10px 0 var(--ink), 0 0 60px color-mix(in srgb, var(--tier) 40%, transparent);
}
.inspect-body {
  position: relative;
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  border: 3px solid var(--ink);
  border-radius: 19px;
  overflow: auto;
  background: var(--night-2);
}
/* the window keeps the preview's size; the info column scrolls on its own when the dropdown opens */
.inspect .stage { aspect-ratio: auto; height: min(560px, calc(100vh - 92px)); border-right: 3px solid var(--ink); }
.inspect .stage img { opacity: 1; top: 8%; }
.inspect .info { contain: size; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #4a3470 transparent; }
.inspect .rays { animation: rays-spin 60s linear infinite; }
.inspect .stage::before {  /* breathing spotlight */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 42%, color-mix(in srgb, var(--tier) 45%, transparent), transparent 70%);
  animation: breathe 4s ease-in-out infinite alternate;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }
@keyframes breathe { from { opacity: .45; } to { opacity: 1; } }
.inspect .badges { left: 14px; right: 14px; top: 14px; }
.inspect .mut { font-size: 14px; padding: 5px 11px 4px; }

.info { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 18px; min-width: 0; }
.info-name {
  margin: 0 56px 2px 0;
  font-family: var(--pixel); font-weight: 700; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.08;
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    3px 3px 0 var(--ink), -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink),
    0 6px 0 var(--ink), 3px 6px 0 var(--ink), -3px 6px 0 var(--ink);
}
.info-name.long { font-size: clamp(20px, 2.2vw, 24px); }
.info .rarity { font-size: 19px; }
.frow {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 5px 12px;
  padding: 6px 12px 7px;
  background: linear-gradient(180deg, #2f1f4d, #1f1433);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3);
}
.frow .socket { width: 40px; height: 40px; grid-row: span 2; }
.frow .socket img { width: 31px; height: 31px; }
.frow.f-obtainable .socket { grid-row: auto; }
.frow b {
  font-family: var(--pixel); font-weight: 700; font-size: 16px; line-height: 1.1; text-transform: uppercase;
  text-shadow: var(--px-outline);
}
.frow .lvl { font-family: var(--pixel); font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--accent); text-shadow: 1px 1px 0 var(--ink); text-align: right; }
.bar { grid-column: 2 / 4; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.bar i { height: 12px; border: 2px solid var(--ink); border-radius: 4px; background: #3a2a52; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.bar i.on { background: var(--accent); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), 0 0 8px color-mix(in srgb, var(--accent) 55%, transparent); }
.pill {
  justify-self: end;
  padding: 5px 12px 4px;
  border: 3px solid var(--ink); border-radius: 10px;
  font-family: var(--pixel); font-weight: 700; font-size: 14px;
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
}
.pill.yes { background: linear-gradient(180deg, #b7ff7a, var(--slime)); }
.pill.no { background: linear-gradient(180deg, #ff8a8a, #ff3b3b); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* obtained from: one row like Obtainable, details in a dropdown */
.f-source { display: block; padding: 0; }
.f-source > summary {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 6px 12px 7px;
  list-style: none; cursor: pointer;
  border-radius: 11px;
}
.f-source > summary::-webkit-details-marker { display: none; }
.f-source > summary:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.f-source .socket { grid-row: auto; }
.pill.via {
  display: inline-flex; align-items: center; gap: 7px;
  text-transform: uppercase;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.pill.via svg { width: 12px; height: 8px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate .3s var(--smooth); }
.f-source > summary:hover .pill.via { transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.f-source[open] .pill.via { transform: translateY(1px); box-shadow: 0 2px 0 var(--ink); }
.f-source[open] .pill.via svg { rotate: 180deg; }
.via-path { background: linear-gradient(180deg, #9dffa9, #4fd86a); }
.via-quest { background: linear-gradient(180deg, #fff08a, #ffd21a); }
.via-doors { background: linear-gradient(180deg, #ffc27a, #ff9a1a); }
.via-craft { background: linear-gradient(180deg, #a8eeff, #5ad8ff); }
.via-event { background: linear-gradient(180deg, #e2b0ff, #c46bff); }
.via-minievent { background: linear-gradient(180deg, #ff9a9a, #ff4646); }
.via-unknown { background: linear-gradient(180deg, #a59cb2, #6b6276); }
.src-list {
  display: flex; flex-direction: column; gap: 8px;
  margin: 0 10px 10px; padding: 10px; list-style: none;
  background: #0f0818;
  border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .4);
}
.f-source[open] .src-list { animation: drop .3s var(--ease-out); }
.f-source.closing .src-list { animation: drop-out .22s var(--ease-out) forwards; }
.f-source.closing .pill.via { transform: none; box-shadow: 0 3px 0 var(--ink); }
.f-source.closing .pill.via svg { rotate: 0deg; }
@keyframes drop { from { opacity: 0; transform: translate3d(0, -8px, 0); } }
@keyframes drop-out { to { opacity: 0; transform: translate3d(0, -8px, 0); } }
.src { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: #1c1030; border-radius: 10px; }
.src-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.src-about { font-family: var(--pixel); font-weight: 700; font-size: 12px; color: #fff; text-transform: uppercase; }
.src .mut { font-size: 11px; padding: 3px 7px 2px; box-shadow: none; }
.src-tag {
  font-family: var(--pixel); font-weight: 700; font-size: 10px; text-transform: uppercase;
  padding: 2px 7px 1px; border-radius: 6px; border: 2px solid var(--ink);
  color: var(--ink); background: #c9b4e4;
}
.src-path .src-tag { background: #4fd86a; }
.src-doors .src-tag { background: #ff9a1a; }
.src-craft .src-tag { background: #5ad8ff; }
.src-event .src-tag { background: #c46bff; }
.src-exclusive .src-tag, .src-robux .src-tag { background: #ffe14a; }
.src-minievent .src-tag { background: #ff5a5a; }
.src-unknown .src-tag { background: #6b6276; color: #fff; }
.src-text { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 15px; line-height: 1.3; color: #eee4fb; }
.src-unknown .src-text { color: var(--muted); }
.stat {
  padding: 8px 14px 9px;
  background: #0f0818;
  border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .4);
}
.stat small { display: block; font-family: var(--pixel); font-weight: 700; font-size: 11px; color: var(--muted); text-transform: uppercase; }
.stat span {
  font-family: var(--chunky); font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1;
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink);
}
.stat .cost { color: #73ff00; }
.stat .income { color: #fce323; }

.exit {
  position: absolute; top: -16px; right: -16px; z-index: 5;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  padding: 0;
  background: linear-gradient(180deg, #ff6464, var(--red) 55%, #a80f0f);
  border: 4px solid var(--ink);
  border-radius: 16px;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25), 0 5px 0 var(--ink);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease-out);
}
.exit:hover { transform: translateY(-3px) rotate(-6deg); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25), 0 8px 0 var(--ink); }
.exit:active { transform: translateY(2px); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25), 0 2px 0 var(--ink); }
.exit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.exit svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; filter: drop-shadow(2px 2px 0 var(--ink)); }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1080px) {
  .factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .deck-row { flex-wrap: wrap; }
  .search { flex: 1 1 100%; }
  .select { flex: 1 1 0; }
  .inspect-body { grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; }  /* rows keep their height and the window scrolls (the stage would otherwise be squashed to fit) */
  .inspect .stage { aspect-ratio: 1 / .82; height: auto; border-right: 0; border-bottom: 3px solid var(--ink); }
  .inspect .info { contain: none; overflow: visible; }
  .inspect .badges { right: 58px; }
}
@media (max-width: 560px) {
  .hero { height: 360px; }
  .hero-inner { flex-direction: column; gap: 6px; bottom: 104px; padding-top: 34px; }
  .hero-title { align-items: center; }
  .t-game { font-size: 30px; }
  .t-sub { margin-left: 0; }
  .logo { width: 70px; }
  .skyline { bottom: 108px; height: 46%; }
  .floor { height: 112px; }
  .walkway { bottom: 77px; }
  .fog { bottom: 100px; height: 80px; }
  .stamp { top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10px; }
  .page { padding: 0 10px 60px; }
  .factors { gap: 10px; margin-top: -34px; }
  .factor { flex: 0 1 calc(50% - 5px); flex-direction: column; text-align: center; gap: 8px; padding: 12px 8px; border-radius: 16px; }
  .socket { width: 50px; height: 50px; }
  .socket img { width: 32px; height: 32px; }
  .f-text { align-items: center; }
  .f-text b { font-size: 14px; }
  .f-text small { font-size: 12px; }
  .deck { padding: 12px; border-radius: 18px; }
  .chips { gap: 7px; }
  .chip { font-size: 11px; padding: 6px 9px 5px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .card { padding: 4px; border-width: 3px; border-radius: 16px; }
  .card::after { inset: -3px; }
  .card-in { border-width: 2px; border-radius: 11px; }
  .badges { left: 5px; right: 5px; top: 5px; }
  .mut { font-size: 9px; padding: 3px 5px 2px; border-width: 2px; border-radius: 6px; box-shadow: 0 2px 0 var(--ink); }
  .plate { padding: 8px 7px 9px; }
  .name { font-size: 13px; }
  .rarity { font-size: 11px; }
  .billboard { gap: 4px; }
  .bb { padding: 5px 2px 6px; border-width: 2px; border-radius: 8px; }
  .bb small { font-size: 8px; }
  .bb b { font-size: 14px; -webkit-text-stroke-width: 2.5px; }
  .meter { gap: 4px; padding: 7px 0 8px; }
  .meter img { width: 18px; height: 18px; }
  .signal { height: 14px; }
  .signal i { width: 4px; border-width: 1px; }
  .signal i:nth-child(1) { height: 4px; }
  .signal i:nth-child(2) { height: 6px; }
  .signal i:nth-child(3) { height: 8px; }
  .signal i:nth-child(4) { height: 11px; }
  .signal i:nth-child(5) { height: 14px; }
  .yn { width: 16px; height: 16px; font-size: 10px; border-radius: 4px; }
  .modal { padding: 22px 10px 12px; }
  .inspect { max-height: calc(100vh - 34px); max-height: calc(100dvh - 34px); border-radius: 22px; padding: 5px; }
  .exit { top: -12px; right: -8px; width: 50px; height: 50px; border-radius: 14px; }
  .info { padding: 16px 14px 18px; gap: 10px; }
}

/* =========================================================
   Dropdowns (js/dropdown.js): the real <select> stays hidden underneath
   ========================================================= */
.dd-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.dd-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: 100%; padding: 0 16px;
  background: none; border: 0; border-radius: inherit;
  font-size: 17px; font-weight: 600; color: #fff; text-align: left;
  cursor: pointer;
}
.dd-btn:focus-visible { outline: none; }
.dd-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-chev { width: 14px; height: 9px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--smooth), stroke .2s; }
.dd-btn:hover .dd-chev { stroke: #fff; }
.dd-btn[aria-expanded="true"] .dd-chev { transform: rotate(180deg); stroke: var(--slime); }
.field.dd-open { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), 0 0 0 3px var(--slime); }
.dd-btn.dd-input { height: 52px; padding: 0 16px; background: #0f0818; }
.dd-btn.dd-input:focus-visible, .dd-btn.dd-input[aria-expanded="true"] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .07), 0 0 0 3px var(--slime); }

.dd-panel {
  position: fixed; z-index: 100;
  display: flex; flex-direction: column; gap: 3px;
  padding: 6px;
  overflow-y: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, #2a1846, #1c1030 60%);
  border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .07), 0 7px 0 var(--ink), 0 22px 40px rgba(0, 0, 0, .5);
  scrollbar-width: thin; scrollbar-color: #4a3470 transparent;
  transform-origin: 50% 0;
  animation: dd-in .26s var(--smooth);
  outline: none;
}
.dd-panel.up { transform-origin: 50% 100%; animation-name: dd-in-up; }
.dd-panel.closing { animation: dd-out .14s ease-in forwards; pointer-events: none; }
@keyframes dd-in { from { opacity: 0; transform: translate3d(0, -8px, 0) scale(.96); } }
@keyframes dd-in-up { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.96); } }
@keyframes dd-out { to { opacity: 0; transform: scale(.97); } }
.dd-opt {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 8px 12px; flex: none;
  border: 2px solid transparent; border-radius: 11px;
  font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 16px; line-height: 1.2; color: #e6dcf5;
  cursor: pointer; user-select: none;
  transition: background .15s, color .15s;
}
.dd-opt.active { background: #3a2a52; color: #fff; }
.dd-opt[aria-selected="true"] {
  color: #fff; text-shadow: 1px 1px 0 var(--ink);
  background: linear-gradient(180deg, #c45bff, var(--purple));
  border-color: var(--ink);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
}
.dd-opt[aria-selected="true"].active { background: linear-gradient(180deg, #d27aff, #9a2df0); }
.dd-opt[aria-disabled="true"] { opacity: .45; cursor: default; }
.dd-check { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--slime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; filter: drop-shadow(1px 1px 0 var(--ink)); }
.dd-opt[aria-selected="true"] .dd-check { opacity: 1; }
@media (max-width: 560px) {
  .dd-opt { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .walkway, .bats { display: none; }
}

/* header animations stop while the header is off screen (set from site.js) */
.hero-off .hero *, .hero-off .hero *::before, .hero-off .hero *::after { animation-play-state: paused !important; }