/* ============================================================
   renai.one — playful arcade of soulmate-finding
   dark-neon emission on grounded-earthy substrate
   ============================================================ */

:root {
  --c-earth-black: #0d0a07;
  --c-umber-shadow: #1f1610;
  --c-tobacco: #3a2818;
  --c-chartreuse: #c7d97a;
  --c-magenta: #ff4fa3;
  --c-amber: #ffb84a;
  --c-cream: #f5ede0;

  --phase: 0;
  --cursor-x: 50vw;
  --cursor-y: 50vh;
  --angle: 0deg;
}

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

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}

html, body {
  background: var(--c-earth-black);
  color: var(--c-cream);
  font-family: "IBM Plex Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
}

body {
  background:
    radial-gradient(ellipse 80vw 60vh at 20% 10%, #2a1e10 0%, transparent 60%),
    radial-gradient(ellipse 60vw 40vh at 80% 95%, #1f1610 0%, transparent 70%),
    var(--c-earth-black);
  background-attachment: fixed;
  position: relative;
}

/* ===== Ambient flare (top-left, 24vw radius) ===== */
.ambient-flare {
  position: fixed;
  top: -8vw;
  left: -8vw;
  width: 48vw;
  height: 48vw;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 30% 30%, rgba(199, 217, 122, 0.35) 0%, rgba(199, 217, 122, 0.12) 18%, transparent 50%),
    radial-gradient(circle at 30% 30%, rgba(255, 79, 163, 0.18) 0%, transparent 30%);
  filter: blur(8px);
  mix-blend-mode: screen;
  animation: ambient-breathe 6s ease-in-out infinite;
}

@keyframes ambient-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* ===== Ambient motes bed (page-wide) ===== */
.motes-bed {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(2px 2px at 15% 22%, rgba(245, 237, 224, 0.6), transparent 60%),
    radial-gradient(2px 2px at 42% 88%, rgba(245, 237, 224, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 30%, rgba(245, 237, 224, 0.6), transparent 60%),
    radial-gradient(2px 2px at 90% 70%, rgba(255, 184, 74, 0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 55%, rgba(245, 237, 224, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 70%, rgba(199, 217, 122, 0.45), transparent 60%);
  mix-blend-mode: screen;
  animation: motes-drift 24s linear infinite;
}

@keyframes motes-drift {
  0% { transform: translateY(0) translateX(0); opacity: 0.85; }
  50% { opacity: 1; }
  100% { transform: translateY(-40px) translateX(8px); opacity: 0.85; }
}

main {
  position: relative;
  z-index: 5;
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 32px 96px;
}

/* ============================================================
   MARQUEE HEADER
   ============================================================ */
.marquee {
  position: relative;
  height: 14vh;
  min-height: 110px;
  margin: 24px 0 48px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--c-earth-black);
  overflow: hidden;
  isolation: isolate;
}

.marquee-ridges {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 14px,
      rgba(199, 217, 122, 0.07) 14px,
      rgba(199, 217, 122, 0.07) 16px,
      transparent 16px,
      transparent 28px,
      rgba(255, 79, 163, 0.05) 28px,
      rgba(255, 79, 163, 0.05) 30px
    );
  z-index: 0;
}

.marquee::before {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: 8px;
  background: conic-gradient(
    from var(--angle),
    transparent 0deg,
    transparent 240deg,
    var(--c-chartreuse) 290deg,
    var(--c-magenta) 340deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: rotate-angle 12s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes rotate-angle {
  to { --angle: 360deg; }
}

.marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(199, 217, 122, 0.06) 0%,
    transparent 30%,
    transparent 70%,
    rgba(255, 79, 163, 0.05) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.wordmark {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  padding: 0 32px;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.wm-text {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  color: var(--c-cream);
  text-shadow:
    0 0 14px rgba(199, 217, 122, 0.5),
    0 0 28px rgba(199, 217, 122, 0.2);
}

.wm-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-chartreuse);
  box-shadow:
    0 0 12px var(--c-chartreuse),
    0 0 24px rgba(199, 217, 122, 0.5);
  animation: dot-pulse 1.8s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.wm-meta {
  margin-left: auto;
  font-family: "Space Mono", "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-amber);
  text-shadow: 0 0 8px rgba(255, 184, 74, 0.4);
  opacity: 0.85;
}

/* ============================================================
   THE DECK
   ============================================================ */
.deck {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 460px);
  gap: 32px;
  margin: 0 auto 64px;
  padding: 48px 24px 56px;
  perspective: 1400px;
  transform-style: preserve-3d;
  transform: rotateX(8deg);

  /* Clay platform */
  background:
    radial-gradient(ellipse 95% 60% at 50% 80%, rgba(255, 184, 74, 0.12) 0%, transparent 70%);
  box-shadow:
    0 80px 80px -40px rgba(255, 184, 74, 0.15),
    0 40px 60px -30px rgba(199, 217, 122, 0.1),
    inset 0 -2px 0 rgba(58, 40, 24, 0.6);
  border-radius: 24px;
}

.deck::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -8px;
  height: 12px;
  background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(255, 184, 74, 0.5) 0%, transparent 70%);
  filter: blur(6px);
  z-index: -1;
}

/* Neon spine */
.spine {
  position: absolute;
  left: calc(60% - 1px);
  top: 8px;
  bottom: 8px;
  width: 2px;
  z-index: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(199, 217, 122, 0.1) 10%, rgba(199, 217, 122, 0.4) 50%, rgba(199, 217, 122, 0.1) 90%, transparent 100%);
  pointer-events: none;
  overflow: visible;
}

.spine::after {
  content: "";
  position: absolute;
  left: -3px;
  width: 8px;
  height: 24px;
  background: radial-gradient(ellipse 50% 100% at 50% 50%, var(--c-chartreuse) 0%, rgba(199, 217, 122, 0.4) 40%, transparent 80%);
  filter: blur(2px);
  animation: spine-pulse 4.7s linear infinite;
}

@keyframes spine-pulse {
  0% { top: -10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}

/* ===== CARD ===== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, #f5ede0 0%, #ebe0cf 100%);
  border-radius: 6px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform:
    translateZ(calc(var(--z, 0) * 1px))
    translateY(calc(sin(var(--phase) * 6.2832 + var(--bob, 0) * 6.2832) * 6px))
    rotateX(-8deg);
  box-shadow:
    0 30px 80px -20px rgba(199, 217, 122, 0.27),
    0 8px 12px rgba(255, 79, 163, 0.13),
    0 2px 4px rgba(0, 0, 0, 0.4);
  transition: filter 0.5s ease, box-shadow 0.5s ease;
  isolation: isolate;
  --card-angle: 0deg;
  --proximity: 1;
}

.card::before {
  /* paper hand-laid texture overlay */
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(circle at 30% 40%, rgba(58, 40, 24, 0.04) 0px, rgba(58, 40, 24, 0.04) 1px, transparent 1px, transparent 5px),
    repeating-radial-gradient(circle at 70% 70%, rgba(58, 40, 24, 0.03) 0px, rgba(58, 40, 24, 0.03) 1px, transparent 1px, transparent 7px);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: 0.7;
}

.card::after {
  /* border-animate: traveling chartreuse trace */
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;
  border-radius: 6px;
  background: conic-gradient(
    from var(--card-angle),
    transparent 0deg,
    transparent 270deg,
    var(--c-chartreuse) 320deg,
    var(--c-chartreuse) 355deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: card-rotate-angle 6s linear infinite;
  pointer-events: none;
  z-index: 5;
}

@property --card-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}

@keyframes card-rotate-angle {
  to { --card-angle: 360deg; }
}

.card.is-near::after {
  animation-duration: 2.2s;
  background: conic-gradient(
    from var(--card-angle),
    transparent 0deg,
    transparent 250deg,
    var(--c-magenta) 280deg,
    var(--c-magenta) 295deg,
    transparent 305deg,
    var(--c-chartreuse) 320deg,
    var(--c-chartreuse) 355deg,
    transparent 360deg
  );
}

.card.is-near {
  filter: brightness(1.05);
  box-shadow:
    0 40px 100px -20px rgba(199, 217, 122, 0.45),
    0 12px 18px rgba(255, 79, 163, 0.27),
    0 2px 4px rgba(0, 0, 0, 0.4);
}

.card-paper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 184, 74, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(58, 40, 24, 0.06) 0%, transparent 60%);
  z-index: 1;
}

/* ===== Silhouettes (CSS clip-path archetypes) ===== */
.card-silhouette {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 55%;
  background: var(--c-tobacco);
  z-index: 3;
}

.sil-librarian {
  clip-path: polygon(50% 0%, 70% 10%, 75% 30%, 78% 50%, 70% 70%, 72% 100%, 28% 100%, 30% 70%, 22% 50%, 25% 30%, 30% 10%);
}
.sil-bus {
  clip-path: polygon(5% 40%, 12% 25%, 88% 25%, 95% 40%, 95% 80%, 85% 80%, 85% 90%, 75% 90%, 75% 80%, 25% 80%, 25% 90%, 15% 90%, 15% 80%, 5% 80%);
}
.sil-bento {
  clip-path: polygon(8% 20%, 92% 20%, 92% 80%, 8% 80%, 8% 20%, 50% 20%, 50% 80%, 8% 80%, 8% 50%, 92% 50%);
  background:
    linear-gradient(90deg, var(--c-tobacco) 49.5%, transparent 49.5%, transparent 50.5%, var(--c-tobacco) 50.5%),
    linear-gradient(0deg, var(--c-tobacco) 49.5%, transparent 49.5%, transparent 50.5%, var(--c-tobacco) 50.5%),
    var(--c-tobacco);
}
.sil-radio {
  clip-path: polygon(10% 30%, 90% 30%, 90% 85%, 10% 85%);
}
.sil-radio::after {
  content: "";
  position: absolute;
  top: -20%;
  left: 45%;
  width: 4%;
  height: 30%;
  background: var(--c-tobacco);
}
.sil-kettle {
  clip-path: polygon(28% 35%, 30% 25%, 70% 25%, 72% 35%, 80% 40%, 80% 80%, 75% 90%, 25% 90%, 20% 80%, 20% 40%);
}
.sil-bicycle {
  clip-path: polygon(8% 70%, 18% 60%, 28% 70%, 28% 80%, 18% 90%, 8% 80%, 30% 70%, 70% 70%, 72% 80%, 82% 60%, 92% 70%, 92% 80%, 82% 90%, 72% 80%);
}
.sil-potter {
  clip-path: polygon(35% 25%, 65% 25%, 70% 45%, 80% 55%, 75% 80%, 25% 80%, 20% 55%, 30% 45%);
}
.sil-locksmith {
  clip-path: polygon(40% 20%, 60% 20%, 65% 35%, 65% 55%, 75% 60%, 75% 85%, 25% 85%, 25% 60%, 35% 55%, 35% 35%);
}
.sil-cat {
  clip-path: polygon(28% 35%, 32% 25%, 38% 32%, 62% 32%, 68% 25%, 72% 35%, 75% 55%, 75% 80%, 25% 80%, 25% 55%);
}
.sil-tofu {
  clip-path: polygon(15% 30%, 85% 30%, 85% 80%, 15% 80%);
}
.sil-stamp {
  clip-path: polygon(20% 30%, 80% 30%, 80% 70%, 60% 70%, 60% 85%, 40% 85%, 40% 70%, 20% 70%);
}
.sil-window {
  clip-path: polygon(15% 20%, 85% 20%, 85% 85%, 15% 85%, 15% 20%, 50% 20%, 50% 85%, 15% 85%, 15% 50%, 85% 50%);
  background:
    linear-gradient(90deg, var(--c-tobacco) 49%, transparent 49%, transparent 51%, var(--c-tobacco) 51%),
    linear-gradient(0deg, var(--c-tobacco) 49%, transparent 49%, transparent 51%, var(--c-tobacco) 51%),
    var(--c-tobacco);
}
.sil-noodle {
  clip-path: polygon(20% 45%, 80% 45%, 78% 75%, 22% 75%);
}
.sil-noodle::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 25%;
  height: 12%;
  background:
    repeating-linear-gradient(45deg, var(--c-tobacco) 0px, var(--c-tobacco) 2px, transparent 2px, transparent 6px);
}
.sil-lantern {
  clip-path: polygon(30% 25%, 70% 25%, 75% 35%, 75% 70%, 70% 80%, 30% 80%, 25% 70%, 25% 35%);
}
.sil-bath {
  clip-path: polygon(15% 45%, 85% 45%, 80% 80%, 20% 80%);
}
.sil-bath::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  top: 30%;
  height: 8%;
  background:
    radial-gradient(circle at 20% 50%, var(--c-tobacco) 30%, transparent 30%),
    radial-gradient(circle at 50% 50%, var(--c-tobacco) 30%, transparent 30%),
    radial-gradient(circle at 80% 50%, var(--c-tobacco) 30%, transparent 30%);
}

/* ===== Card text ===== */
.card-title {
  position: relative;
  z-index: 4;
  margin: 0 16px 8px;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-style: normal;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--c-cream);
  mix-blend-mode: difference;
  line-height: 1.15;
  text-align: center;
}

.card-lore {
  position: relative;
  z-index: 4;
  margin: 0 18px 12px;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--c-tobacco);
  text-align: left;
  height: 100px;
  overflow: hidden;
}

.card-meta {
  position: relative;
  z-index: 4;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-family: "Space Mono", "Courier New", monospace;
  font-style: normal;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--c-cream);
  background: linear-gradient(180deg, rgba(13, 10, 7, 0.92) 0%, rgba(13, 10, 7, 1) 100%);
  text-align: center;
  text-shadow: 0 0 6px rgba(199, 217, 122, 0.4);
  border-top: 1px solid rgba(199, 217, 122, 0.2);
}

/* ===== Lens flare ===== */
.flare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 1.2s ease;
  mix-blend-mode: screen;
}

.card.is-visible .flare {
  opacity: 0.8;
}

.card.is-near .flare {
  opacity: 1;
  filter: brightness(1.4);
}

.flare::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 35%;
  width: 30%;
  height: 30%;
  background:
    radial-gradient(circle, rgba(199, 217, 122, 0.95) 0%, rgba(199, 217, 122, 0.4) 18%, transparent 50%);
  filter: blur(1px);
  animation: flare-flicker 280ms steps(2) infinite;
}

.flare::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 35%;
  width: 30%;
  height: 30%;
  background:
    linear-gradient(0deg, transparent 47%, rgba(199, 217, 122, 0.6) 49%, rgba(199, 217, 122, 0.6) 51%, transparent 53%),
    linear-gradient(90deg, transparent 47%, rgba(199, 217, 122, 0.6) 49%, rgba(199, 217, 122, 0.6) 51%, transparent 53%),
    linear-gradient(45deg, transparent 48%, rgba(255, 79, 163, 0.4) 49.5%, rgba(255, 79, 163, 0.4) 50.5%, transparent 52%),
    linear-gradient(135deg, transparent 48%, rgba(255, 79, 163, 0.4) 49.5%, rgba(255, 79, 163, 0.4) 50.5%, transparent 52%),
    linear-gradient(22deg, transparent 49%, rgba(199, 217, 122, 0.3) 50%, transparent 51%),
    linear-gradient(67deg, transparent 49%, rgba(199, 217, 122, 0.3) 50%, transparent 51%);
  filter: blur(1.2px);
  transform: translate(8%, 8%);
}

@keyframes flare-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

/* ============================================================
   HEARTH SECTION
   ============================================================ */
.hearth {
  position: relative;
  margin: 96px auto 64px;
  padding: 64px 24px 80px;
  min-height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background:
    linear-gradient(180deg, transparent 0%, rgba(58, 40, 24, 0.3) 100%);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}

.hearth-floor {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(58, 40, 24, 0.5) 0px,
      rgba(58, 40, 24, 0.5) 1px,
      transparent 1px,
      transparent 36px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(58, 40, 24, 0.35) 0px,
      rgba(58, 40, 24, 0.35) 1px,
      transparent 1px,
      transparent 36px
    ),
    linear-gradient(180deg, rgba(31, 22, 16, 0.5) 0%, rgba(255, 184, 74, 0.1) 100%);
  transform: perspective(800px) rotateX(45deg);
  transform-origin: bottom;
  opacity: 0.7;
  z-index: 0;
}

.hearth::after {
  /* border-animate at bottom */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    var(--c-amber) 50%,
    transparent 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: hearth-trace 18s linear infinite;
}

@keyframes hearth-trace {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

.hearth-glyph {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  margin-bottom: 32px;
  animation: glyph-breathe 4.7s ease-in-out infinite;
}

.hearth-glyph .irori {
  fill: none;
  stroke: var(--c-tobacco);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px rgba(199, 217, 122, 0.3));
}

.hearth-glyph .mote-glow {
  fill: var(--c-chartreuse);
  filter: drop-shadow(0 0 6px var(--c-chartreuse));
  animation: mote-pulse 4.7s ease-in-out infinite;
}

.hearth-glyph .mote-glow:nth-of-type(2) {
  animation-delay: 0.6s;
}

.hearth-glyph .mote-glow:nth-of-type(3) {
  animation-delay: 1.2s;
}

@keyframes glyph-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes mote-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.hearth-prose {
  position: relative;
  z-index: 2;
  max-width: 540px;
  margin: 0 auto;
  font-family: "IBM Plex Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--c-cream);
  text-align: left;
}

.hearth-prose p {
  margin-bottom: 18px;
}

.hearth-prose p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   INDEX
   ============================================================ */
.index {
  margin: 64px auto 0;
  max-width: 720px;
  padding: 32px 24px;
}

.index-title {
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--c-chartreuse);
  text-shadow: 0 0 8px rgba(199, 217, 122, 0.5);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(199, 217, 122, 0.25);
}

.index-list {
  list-style: none;
}

.index-list li {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 8px;
  font-family: "Space Mono", "Courier New", monospace;
  font-style: normal;
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--c-cream);
  border-bottom: 1px solid rgba(58, 40, 24, 0.5);
  text-shadow: 0 0 4px rgba(199, 217, 122, 0.2);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.index-list li:hover {
  color: var(--c-chartreuse);
  text-shadow: 0 0 10px rgba(199, 217, 122, 0.55);
}

.ix-no {
  color: var(--c-amber);
  min-width: 40px;
}

.ix-name {
  flex: 1;
}

.ix-prox {
  color: var(--c-tobacco);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  filter: brightness(2.5);
  opacity: 0.7;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  main {
    padding: 0 16px 64px;
  }

  .deck {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 420px);
    gap: 20px;
    padding: 32px 12px 40px;
  }

  .spine {
    left: calc(66.66% - 1px);
  }

  .card-title {
    font-size: 0.95rem;
  }

  .card-lore {
    font-size: 0.72rem;
    height: 90px;
  }
}

@media (max-width: 560px) {
  .deck {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(8, 400px);
    gap: 16px;
  }

  .spine {
    left: calc(50% - 1px);
  }

  .wm-text {
    font-size: 1.4rem;
  }

  .wm-meta {
    font-size: 0.66rem;
  }

  .hearth-prose {
    font-size: 0.88rem;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}