/* ─── Reset & Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --rare-primary:   #7c3aed;
  --rare-light:     #a78bfa;
  --rare-dark:      #3b0764;
  --epic-primary:   #065f46;
  --epic-light:     #34d399;
  --epic-dark:      #022c22;
  --memory-primary: #0e7490;
  --memory-light:   #22d3ee;
  --memory-dark:    #082f49;
  --mythic-primary: #991b1b;
  --mythic-light:   #f87171;
  --mythic-dark:    #450a0a;
  --gold:           #f59e0b;
  --gold-light:     #fde68a;
  --gold-dark:      #92400e;
  --card-w:         300px;
  --card-h:         430px;

  /* ── Design system ── */
  --c-bg:       #08070e;
  --c-surface:  rgba(255,255,255,.042);
  --c-border:   rgba(255,255,255,.08);
  --c-text-1:   rgba(255,255,255,.90);
  --c-text-2:   rgba(255,255,255,.50);
  --c-text-3:   rgba(255,255,255,.26);
  --c-gold:     #c8a05a;
  --c-gold-dim: rgba(176,140,76,.44);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background: #06050f;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Georgia', 'Times New Roman', serif;
}

/* ─── Page Header ──────────────────────────────────────────────────────── */
.page-header {
  text-align: center;
  margin-bottom: 64px;
}
.page-header h1 {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: .25em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-light), var(--gold), #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px #f59e0b88);
}
.page-header p {
  margin-top: 12px;
  font-size: .85rem;
  letter-spacing: .18em;
  color: #6b6b8a;
  text-transform: uppercase;
}

/* ─── Carousel ──────────────────────────────────────────────────────────── */
.carousel {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.carousel-track {
  position: relative;
  width: 100%;
  height: calc(var(--card-h) * 1.2);
  overflow: visible;
}
.carousel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transition:
    transform .65s cubic-bezier(.25, .46, .45, .94),
    opacity   .65s ease,
    filter    .65s ease;
  will-change: transform, opacity, filter;
}
/* Ambient glow ring behind the active card */
.carousel-item.is-active::before {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 34px;
  background: radial-gradient(ellipse 90% 80% at 50% 50%, #f59e0b12, transparent);
  pointer-events: none;
  z-index: -1;
}
/* ─── Nav buttons ────────────────────────────────────────────────────────── */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #ffffff14, #ffffff05);
  border: 1px solid #f59e0b44;
  color: #f59e0bcc;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, border-color .25s, box-shadow .25s, color .25s, transform .25s;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.carousel-btn:hover {
  background: radial-gradient(circle at 38% 38%, #f59e0b22, #f59e0b08);
  border-color: #f59e0b88;
  box-shadow: 0 0 24px #f59e0b44;
  color: var(--gold);
  transform: translateY(-50%) scale(1.08);
}
.carousel-btn:active { transform: translateY(-50%) scale(0.95); }
.carousel-btn--prev  { left: 28px; }
.carousel-btn--next  { right: 28px; }
.carousel-btn svg    { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* ─── Dots ───────────────────────────────────────────────────────────────── */
.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 36px;
}
.carousel-dot {
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background: #f59e0b28;
  border: 1px solid #f59e0b44;
  cursor: pointer;
  transition: all .35s ease;
}
.carousel-dot.is-active {
  background: var(--gold);
  box-shadow: 0 0 8px #f59e0baa;
  width: 24px;
}
.carousel-dot:hover:not(.is-active) { background: #f59e0b55; }

/* ─── Scene / Flip Container ───────────────────────────────────────────── */
.scene {
  width: var(--card-w);
  height: var(--card-h);
  perspective: 1200px;
  -webkit-perspective: 1200px;
  cursor: pointer;
  animation: float 5s ease-in-out infinite;
}
.scene:nth-child(2)  { animation-delay: -0.5s;  }
.scene:nth-child(3)  { animation-delay: -1s;    }
.scene:nth-child(4)  { animation-delay: -1.5s;  }
.scene:nth-child(5)  { animation-delay: -2s;    }
.scene:nth-child(6)  { animation-delay: -2.5s;  }
.scene:nth-child(7)  { animation-delay: -3s;    }
.scene:nth-child(8)  { animation-delay: -3.5s;  }
.scene:nth-child(9)  { animation-delay: -4s;    }
.scene:nth-child(10) { animation-delay: -4.5s;  }

@keyframes float {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-10px); }
}

.card-flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.4, 0, .2, 1);
}
.scene:hover .card-flipper,
.scene.flipped .card-flipper {
  transform: rotateY(180deg);
}
/* Touch devices don't have real hover — iOS Safari (and other touch UAs)
   leave :hover "stuck" on an element after a tap until something else is
   tapped, which would otherwise keep a card's back showing even once the
   `flipped` class is removed. The mobile JS already sets an explicit inline
   transform that overrides this regardless, but this keeps the CSS itself
   honest on any device that reports no real hover capability. */
@media (hover: none) {
  .scene:hover:not(.flipped) .card-flipper {
    transform: rotateY(0deg);
  }
}

/* ─── Card Face (shared) ───────────────────────────────────────────────── */
.card-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.card-back {
  transform: rotateY(180deg);
}

/* ══════════════════════ RARE CARD ══════════════════════════════════════ */
.rare .card-face {
  background:
    linear-gradient(160deg, #1a0d2e 0%, #0d0618 60%, #1a0d2e 100%);
  border: 2px solid #7c3aed88;
  box-shadow:
    0 0 0 1px #f59e0b33,
    inset 0 0 40px #7c3aed22,
    0 0 40px #7c3aed55,
    0 0 80px #7c3aed22;
}
.rare .card-front::before {
  background:
    linear-gradient(180deg, #7c3aed44 0%, transparent 30%),
    repeating-linear-gradient(90deg, #f59e0b08 0px, transparent 1px, transparent 30px, #f59e0b08 31px);
}
.rare .accent-color  { color: var(--rare-light); }
.rare .glow-color    { text-shadow: 0 0 16px var(--rare-light); }
.rare .rarity-badge  { background: linear-gradient(135deg, var(--rare-dark), var(--rare-primary)); border-color: var(--rare-light); color: var(--rare-light); }
.rare .back-rarity   { color: var(--rare-light); text-shadow: 0 0 40px var(--rare-primary), 0 0 80px var(--rare-primary); }
.rare .ornament-line { background: linear-gradient(90deg, transparent, var(--rare-primary), var(--rare-light), var(--rare-primary), transparent); }

/* ══════════════════════ EPIC CARD ══════════════════════════════════════ */
.epic .card-face {
  background:
    linear-gradient(160deg, #071f16 0%, #040e0b 60%, #071f16 100%);
  border: 2px solid #065f4688;
  box-shadow:
    0 0 0 1px #f59e0b33,
    inset 0 0 40px #065f4622,
    0 0 40px #34d39955,
    0 0 80px #065f4622;
}
.epic .accent-color  { color: var(--epic-light); }
.epic .glow-color    { text-shadow: 0 0 16px var(--epic-light); }
.epic .rarity-badge  { background: linear-gradient(135deg, var(--epic-dark), var(--epic-primary)); border-color: var(--epic-light); color: var(--epic-light); }
.epic .back-rarity   { color: var(--epic-light); text-shadow: 0 0 40px var(--epic-primary), 0 0 80px var(--epic-primary); }
.epic .ornament-line { background: linear-gradient(90deg, transparent, var(--epic-primary), var(--epic-light), var(--epic-primary), transparent); }

/* ══════════════════════ MEMORY CARD ════════════════════════════════════ */
.memory .card-face {
  background:
    linear-gradient(160deg, #071e26 0%, #030d12 60%, #071e26 100%);
  border: 2px solid #0e749088;
  box-shadow:
    0 0 0 1px #f59e0b33,
    inset 0 0 40px #0e749022,
    0 0 40px #22d3ee55,
    0 0 80px #0e749022;
}
.memory .accent-color  { color: var(--memory-light); }
.memory .glow-color    { text-shadow: 0 0 16px var(--memory-light); }
.memory .rarity-badge  { background: linear-gradient(135deg, var(--memory-dark), var(--memory-primary)); border-color: var(--memory-light); color: var(--memory-light); }
.memory .back-rarity   { color: var(--memory-light); text-shadow: 0 0 40px var(--memory-primary), 0 0 80px var(--memory-primary); }
.memory .ornament-line { background: linear-gradient(90deg, transparent, var(--memory-primary), var(--memory-light), var(--memory-primary), transparent); }

/* ══════════════════════ MYTHIC CARD ════════════════════════════════════ */
.mythic .card-face {
  background:
    linear-gradient(160deg, #1c0606 0%, #0d0303 60%, #1c0606 100%);
  border: 2px solid #99181888;
  box-shadow:
    0 0 0 1px #f59e0b55,
    inset 0 0 40px #99181822,
    0 0 50px #f8717155,
    0 0 100px #99181833;
}
.mythic .accent-color  { color: var(--mythic-light); }
.mythic .glow-color    { text-shadow: 0 0 16px var(--mythic-light); }
.mythic .rarity-badge  { background: linear-gradient(135deg, var(--mythic-dark), var(--mythic-primary)); border-color: var(--mythic-light); color: var(--mythic-light); }
.mythic .back-rarity   { color: var(--mythic-light); text-shadow: 0 0 40px var(--mythic-primary), 0 0 80px var(--mythic-primary); }
.mythic .ornament-line { background: linear-gradient(90deg, transparent, var(--mythic-primary), var(--mythic-light), var(--mythic-primary), transparent); }

/* ─── Shared front layout ──────────────────────────────────────────────── */
.card-front {
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 10px;
  height: 100%;
}
.card-front::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.card-front > * { position: relative; z-index: 1; }

/* ─── Gold corner ornaments ──────────────────────────────────────────── */
.corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.corner {
  position: absolute;
  width: 32px;
  height: 32px;
}
.corner svg { width: 100%; height: 100%; }
.corner--tl { top: 6px;    left: 6px;    }
.corner--tr { top: 6px;    right: 6px;   transform: scaleX(-1); }
.corner--bl { bottom: 6px; left: 6px;    transform: scaleY(-1); }
.corner--br { bottom: 6px; right: 6px;   transform: scale(-1);  }

/* ─── Illustration Area ────────────────────────────────────────────────── */
.illustration-area {
  width: 100%;
  height: 165px;
  border-radius: 10px;
  border: 1px solid #f59e0b44;
  background:
    linear-gradient(135deg, #ffffff08 0%, #ffffff03 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.illustration-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, #ffffff04 0px, transparent 1px, transparent 20px, #ffffff04 21px);
}
.illustration-area .placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.8rem;
  line-height: 1;
  opacity: .18;
  z-index: 1;
}
.illustration-area .placeholder-text {
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ffffff30;
  font-family: 'Arial', sans-serif;
}

/* ─── Card Header (title row) ─────────────────────────────────────────── */
.card-header {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.card-title-area {
  flex: 1;
  height: 22px;
  border-radius: 4px;
  background: #ffffff0a;
  border-bottom: 1px solid #f59e0b44;
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.card-title-area .ph-line {
  width: 70%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #f59e0b55, transparent);
}
.cost-gem {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fde68a, var(--gold), var(--gold-dark));
  border: 1px solid #fde68a88;
  box-shadow: 0 0 8px #f59e0b88;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  color: #1c0a00;
  font-weight: bold;
  letter-spacing: .05em;
  flex-shrink: 0;
}

/* ─── Divider ─────────────────────────────────────────────────────────── */
.ornament-line {
  height: 1px;
  border-radius: 1px;
  flex-shrink: 0;
}

/* ─── Description Area ────────────────────────────────────────────────── */
.description-area {
  flex: 1;
  border-radius: 8px;
  background: #ffffff06;
  border: 1px solid #f59e0b1a;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-height: 0;
}
.ph-text {
  height: 3px;
  border-radius: 2px;
  background: #ffffff18;
}
.ph-text.w-full  { width: 100%; }
.ph-text.w-80    { width: 80%; }
.ph-text.w-60    { width: 60%; }
.ph-text.w-90    { width: 90%; }

/* ─── Footer ──────────────────────────────────────────────────────────── */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.rarity-badge {
  font-size: .55rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
}
.stat-orbs {
  display: flex;
  gap: 6px;
}
.stat-orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff0d;
  border: 1px solid #f59e0b44;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-orb span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b44;
  display: block;
}

/* ─── BACK SIDE ───────────────────────────────────────────────────────── */
.card-back-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  position: relative;
}

.card-back-inner::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 10px;
  border: 1px solid #f59e0b33;
  pointer-events: none;
}
.card-back-inner::after {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 8px;
  border: 1px solid #f59e0b1a;
  pointer-events: none;
}

.back-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  border-radius: 18px;
}
.back-watermark-suit {
  font-size: 18rem;
  line-height: 1;
  opacity: .045;
  user-select: none;
}

.back-rarity {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  position: relative;
  z-index: 1;
}

.back-divider {
  width: 80px;
  height: 1px;
  position: relative;
  z-index: 1;
}

.back-only-one {
  font-size: .65rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  position: relative;
  z-index: 1;
  opacity: .9;
  text-shadow: 0 0 10px var(--gold);
}

/* suit echoes */
.suit-echo {
  position: absolute;
  font-size: .95rem;
  line-height: 1;
  opacity: .35;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 4px currentColor);
}
.suit-echo--tl { top: 44px;  left: 12px;  }
.suit-echo--br { bottom: 44px; right: 12px; transform: rotate(180deg); }

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  :root { --card-w: 260px; --card-h: 375px; }
  .page-header { margin-bottom: 40px; }
}
@media (max-width: 400px) {
  :root { --card-w: 230px; --card-h: 335px; }
}

/* ─── Filled illustration ─────────────────────────────────────────────── */
.illustration-area--filled {
  padding: 0;
  border-color: #f59e0b66;
  box-shadow:
    0 4px 24px #00000066,
    inset 0 0 0 1px #f59e0b22;
  overflow: hidden;
}
.card-illustration {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transform: scale(1.06);
  transition: transform .4s ease;
}
.scene:hover .card-illustration {
  transform: scale(1.1);
}

/* ─── Filled title ─────────────────────────────────────────────────────── */
.card-title-area--filled {
  background: transparent;
  border-bottom: none;
  justify-content: center;
}
.card-title-text {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 45%, #fde68a 75%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 6px #f59e0b88);
  white-space: nowrap;
}
.card-title-text--sm {
  font-size: .63rem;
  letter-spacing: .13em;
}

/* ─── Filled description ───────────────────────────────────────────────── */
.description-area--filled {
  justify-content: center;
  gap: 0;
  text-align: center;
  padding: 10px 14px;
}
.card-desc-text {
  font-size: .68rem;
  line-height: 1.55;
  color: #e8d9b0;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  margin: 0;
  padding: 3px 0;
}
.card-desc-text + .card-desc-text {
  border-top: 1px solid #f59e0b11;
  margin-top: 4px;
  padding-top: 7px;
}
.card-desc-text--highlight {
  color: var(--gold-light);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: .63rem;
  text-transform: uppercase;
  text-shadow: 0 0 10px #f59e0b66;
}

/* ─── Hint label ──────────────────────────────────────────────────────── */
.hint {
  margin-top: 56px;
  font-size: .72rem;
  letter-spacing: .18em;
  color: #3a3a55;
  text-transform: uppercase;
  text-align: center;
}


/* ─── Scroll indicator ───────────────────────────────────────────────── */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 1;
  animation: scrollBounce 2.5s ease-in-out infinite;
}
.scroll-label {
  font-size: .52rem;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: #f59e0b66;
  font-family: 'Arial', sans-serif;
}
.scroll-chevron {
  width: 16px;
  height: 16px;
  border-right: 1.5px solid #f59e0b66;
  border-bottom: 1.5px solid #f59e0b66;
  transform: rotate(45deg);
}
@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0);    opacity: .4; }
  50%       { transform: translateX(-50%) translateY(10px); opacity: .85; }
}

/* ─── Collection section ─────────────────────────────────────────────── */
.collection-section {
  width: 100%;
  padding: 80px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.section-header {
  text-align: center;
  margin-bottom: 64px;
  width: 100%;
  padding: 0 24px;
}
.section-title {
  font-size: clamp(1.3rem, 3.5vw, 2rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-light), var(--gold), #d97706);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px #f59e0b88);
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: normal;
  margin: 0;
}
.section-subtitle {
  margin-top: 14px;
  font-size: .8rem;
  letter-spacing: .16em;
  color: #6b6b8a;
  text-transform: uppercase;
  font-style: italic;
}
.section-divider {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f59e0b66, transparent);
  margin: 18px auto 0;
}

/* ─── Hero responsive ────────────────────────────────────────────────── */
@media (max-width: 580px) {
  .hero-ece    { letter-spacing: .06em; }
  .hero-line1  { letter-spacing: .2em; }
}
@media (max-width: 400px) {
  .hero-ece    { font-size: 4.5rem; }
}

/* ─── Scroll scene + sticky stage ────────────────────────────────────── */
.scroll-scene {
  position: relative;
  height: 320vh;
}
.sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ─── Persistent background layers (inside sticky-stage) ─────────────── */
.stage-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bg-layer {
  position: absolute;
  inset: 0;
  transition: opacity 0.75s ease;
}
/* Blackout overlay — ramps opaque during ECE.AI → terminal transition */
.stage-blackout {
  position: absolute; inset: 0; z-index: 16;
  background: #000; opacity: 0; pointer-events: none;
}
.bg-base {
  background: #06050f;
  opacity: 1;
}
.bg-rare-layer {
  background:
    radial-gradient(ellipse 110% 70% at 50% 82%, #4c1d9550, transparent 70%),
    radial-gradient(ellipse 55% 40% at 18% 18%, #3b1a6e30, transparent),
    radial-gradient(ellipse 60% 30% at 82% 14%, #7c3aed1a, transparent);
  opacity: 0;
}
.bg-epic-layer {
  background:
    radial-gradient(ellipse 110% 70% at 50% 82%, #06503d50, transparent 70%),
    radial-gradient(ellipse 55% 40% at 18% 18%, #0a2e1e30, transparent),
    radial-gradient(ellipse 60% 30% at 82% 14%, #065f461a, transparent);
  opacity: 0;
}
.bg-memory-layer {
  background:
    radial-gradient(ellipse 110% 70% at 50% 82%, #0e749055, transparent 70%),
    radial-gradient(ellipse 55% 40% at 18% 18%, #0a2e4030, transparent),
    radial-gradient(ellipse 60% 30% at 82% 14%, #164e631a, transparent);
  opacity: 0;
}
.bg-mythic-layer {
  background:
    radial-gradient(ellipse 110% 70% at 50% 82%, #991b1b55, transparent 70%),
    radial-gradient(ellipse 55% 40% at 18% 18%, #4a0c0c30, transparent),
    radial-gradient(ellipse 60% 30% at 82% 14%, #7f1d1d1a, transparent),
    radial-gradient(ellipse 45% 25% at 62% 48%, #92400e16, transparent);
  opacity: 0;
}

/* ─── Stage content layers ────────────────────────────────────────────── */
.stage-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}
.stage-hero {
  z-index: 2;
  padding: 60px 24px 100px;
}
.stage-cards {
  z-index: 3;
}
.stage-cards .section-header {
  margin-bottom: 40px;
}
.stage-eceai {
  z-index: 4;
}
.stage-eceai::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 50% 30%, rgba(245,158,11,.065) 0%, transparent 65%),
    radial-gradient(ellipse 42% 50% at 12% 78%, rgba(124,58,237,.055) 0%, transparent 58%),
    radial-gradient(ellipse 42% 50% at 88% 78%, rgba(124,58,237,.055) 0%, transparent 58%);
}

/* ─── Active card rarity glow — front face enhanced ──────────────────── */
.carousel-item.is-active.rarity-rare   .card-face.card-front {
  box-shadow:
    0 0 0 1px #f59e0b44,
    inset 0 0 50px #7c3aed33,
    0 0 80px #7c3aed88,
    0 0 150px #7c3aed33;
}
.carousel-item.is-active.rarity-epic   .card-face.card-front {
  box-shadow:
    0 0 0 1px #f59e0b44,
    inset 0 0 50px #065f4633,
    0 0 80px #34d39977,
    0 0 150px #065f4633;
}
.carousel-item.is-active.rarity-memory .card-face.card-front {
  box-shadow:
    0 0 0 1px #f59e0b44,
    inset 0 0 50px #0e749033,
    0 0 80px #22d3ee77,
    0 0 150px #0e749033;
}
.carousel-item.is-active.rarity-mythic .card-face.card-front {
  box-shadow:
    0 0 0 1px #f59e0b55,
    inset 0 0 50px #99181833,
    0 0 80px #f8717166,
    0 0 150px #99181833;
}

/* ─── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .scene, .hero-ece, .scroll-indicator { animation: none !important; }
  .carousel-item, .bg-layer           { transition-duration: 0.01ms !important; }
}

/* ═══ ECE.AI STAGE ═══════════════════════════════════════════════════ */

/* ── Main liquid glass panel ─────────────────────────────────── */
.eceai-panel {
  position: relative;
  width: 82vw;
  max-width: 1100px;
  height: 74vh;
  background: rgba(8,5,20,.68);
  backdrop-filter: blur(60px) saturate(160%) brightness(1.05);
  -webkit-backdrop-filter: blur(60px) saturate(160%) brightness(1.05);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 36px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 80px rgba(245,158,11,.09),
    0 0 160px rgba(124,58,237,.07),
    0 50px 100px rgba(0,0,0,.75),
    0 0 0 1px rgba(124,58,237,.1),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.38),
    inset 0 40px 80px rgba(124,58,237,.05);
  filter: drop-shadow(0 0 44px rgba(245,158,11,.1));
}
.eceai-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.05) 12%,
    rgba(245,158,11,.22) 40%,
    rgba(255,225,130,.3) 50%,
    rgba(245,158,11,.22) 60%,
    rgba(255,255,255,.05) 88%,
    transparent 100%
  );
  z-index: 20;
  pointer-events: none;
}
.eceai-panel::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 340px; height: 340px;
  background: radial-gradient(circle at 60% 35%, rgba(124,58,237,.1) 0%, transparent 58%);
  pointer-events: none;
}

/* Moving glass shine sweep */
.eceai-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.eceai-shine::before {
  content: '';
  position: absolute;
  top: -20%; left: -75%;
  width: 45%; height: 140%;
  background: linear-gradient(
    108deg,
    transparent 25%,
    rgba(255,255,255,.016) 38%,
    rgba(255,255,255,.042) 50%,
    rgba(255,255,255,.016) 62%,
    transparent 75%
  );
  transform: skewX(-10deg);
  animation: glassShine 18s ease-in-out infinite;
}
@keyframes glassShine {
  0%      { left: -75%; opacity: 1; }
  28%,100%{ left: 145%; opacity: 1; }
}

/* ── Title area ──────────────────────────────────────────────── */
.eceai-title-area {
  flex-shrink: 0;
  padding: 54px 40px 40px;
  text-align: center;
  position: relative;
}
.eceai-title-area::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(124,58,237,.12),
    rgba(245,158,11,.16),
    rgba(255,255,255,.06),
    rgba(245,158,11,.16),
    rgba(124,58,237,.12),
    transparent
  );
}
.eceai-eyebrow {
  font-size: .66rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(245,158,11,.35);
  margin-bottom: 20px;
}
.eceai-title {
  font-size: clamp(3rem, 7vw, 5.2rem);
  letter-spacing: .24em;
  font-weight: normal;
  line-height: 1;
  background: linear-gradient(160deg,
    #b45309 0%, #fde68a 26%, #f59e0b 48%, #fbbf24 66%, #d97706 84%, #fde68a 100%
  );
  background-size: 280% 280%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 0 28px rgba(245,158,11,.32))
    drop-shadow(0 0 60px rgba(245,158,11,.14));
  animation: eaiTitleShimmer 7s ease-in-out infinite;
}
@keyframes eaiTitleShimmer {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.eceai-title-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,.55), transparent);
  margin: 26px auto 0;
  animation: dividerPulse 4.5s ease-in-out infinite alternate;
}
@keyframes dividerPulse {
  from { width: 38px; opacity: .5; box-shadow: none; }
  to   { width: 76px; opacity: 1; box-shadow: 0 0 10px rgba(245,158,11,.28); }
}

/* ── Chat area ──────────────────────────────────────────────── */
.eceai-chat {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.chat-msgs {
  flex: 1;
  min-height: 0;
  padding: 30px 42px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,158,11,.16) transparent;
}
.chat-msgs::-webkit-scrollbar { width: 3px; }
.chat-msgs::-webkit-scrollbar-thumb {
  background: rgba(245,158,11,.22);
  border-radius: 2px;
}

.chat-bubble {
  max-width: 68%;
  animation: bubbleIn .45s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   filter: blur(0);   }
}
.chat-ai   { align-self: flex-start; }
.chat-user { align-self: flex-end; }

.chat-bubble-sender {
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #f59e0b;
  opacity: .36;
  margin-bottom: 7px;
  padding-left: 5px;
}
.chat-user .chat-bubble-sender {
  text-align: right;
  padding-left: 0; padding-right: 5px;
  color: #a78bfa;
}

.chat-bubble-body {
  padding: 17px 24px;
  font-size: .93rem;
  line-height: 1.82;
  letter-spacing: .022em;
}
.chat-ai .chat-bubble-body {
  background: linear-gradient(140deg, rgba(22,13,50,.88) 0%, rgba(14,9,34,.9) 100%);
  border: 1px solid rgba(124,58,237,.22);
  color: #d2cae2;
  border-radius: 5px 24px 24px 24px;
  box-shadow:
    0 10px 36px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.025) inset,
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.2);
}
.chat-user .chat-bubble-body {
  background: linear-gradient(140deg, rgba(30,17,4,.88) 0%, rgba(20,12,3,.9) 100%);
  border: 1px solid rgba(245,158,11,.24);
  color: #fde68a;
  border-radius: 24px 5px 24px 24px;
  text-align: right;
  box-shadow:
    0 10px 36px rgba(0,0,0,.3),
    0 0 0 1px rgba(255,255,255,.025) inset,
    inset 0 1px 0 rgba(245,158,11,.1),
    inset 0 -1px 0 rgba(0,0,0,.2);
}
.chat-highlight {
  display: block;
  color: #f59e0b;
  font-weight: bold;
  letter-spacing: .1em;
  margin-top: 11px;
  text-shadow:
    0 0 16px rgba(245,158,11,.4),
    0 0 40px rgba(245,158,11,.18);
}

/* Typing indicator */
.chat-typing { align-self: flex-start; }
.chat-typing-label {
  font-size: .58rem;
  letter-spacing: .16em;
  color: #a78bfa;
  opacity: .36;
  margin-bottom: 7px;
  padding-left: 5px;
}
.chat-typing-dots {
  display: flex;
  gap: 6px;
  padding: 17px 24px;
  background: linear-gradient(140deg, rgba(22,13,50,.88) 0%, rgba(14,9,34,.9) 100%);
  border: 1px solid rgba(124,58,237,.22);
  border-radius: 5px 24px 24px 24px;
  width: fit-content;
  box-shadow: 0 10px 36px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
}
.chat-typing-dots span {
  width: 7px; height: 7px;
  background: rgba(167,139,250,.7);
  border-radius: 50%;
  animation: typingDot 1.3s ease-in-out infinite;
}
.chat-typing-dots span:nth-child(2) { animation-delay: .22s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .44s; }
@keyframes typingDot {
  0%,60%,100% { transform: translateY(0);   opacity: .25; }
  30%         { transform: translateY(-6px); opacity: 1; }
}

/* Question buttons */
.chat-qs {
  flex-shrink: 0;
  padding: 18px 38px 36px;
  border-top: 1px solid rgba(245,158,11,.07);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chat-q-btn {
  font-family: inherit;
  font-size: .73rem;
  letter-spacing: .05em;
  color: rgba(196,181,253,.88);
  background: rgba(124,58,237,.09);
  border: 1px solid rgba(124,58,237,.22);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background .22s, border-color .22s, color .22s,
              transform .18s cubic-bezier(0.16,1,0.3,1), box-shadow .22s;
  white-space: nowrap;
}
.chat-q-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.055) 0%, transparent 55%);
  border-radius: 999px;
  pointer-events: none;
}
.chat-q-btn:hover:not(:disabled):not(.used) {
  background: rgba(124,58,237,.19);
  border-color: rgba(167,139,250,.52);
  color: #ede9fe;
  transform: translateY(-3px);
  box-shadow:
    0 8px 26px rgba(124,58,237,.24),
    0 0 0 1px rgba(167,139,250,.14);
}
.chat-q-btn:active:not(:disabled):not(.used) {
  transform: translateY(-1px) scale(.97);
  box-shadow: 0 3px 10px rgba(124,58,237,.14);
  transition-duration: .08s;
}
.chat-q-btn:disabled, .chat-q-btn.used {
  opacity: .15; cursor: default; pointer-events: none; transform: none;
}

@media (max-width: 960px) {
  .eceai-panel { width: 92vw; border-radius: 30px; }
  .eceai-title-area { padding: 40px 28px 32px; }
  .chat-msgs { padding: 24px 28px 14px; }
  .chat-bubble { max-width: 82%; }
  .chat-bubble-body { padding: 14px 19px; font-size: .88rem; }
  .chat-qs { padding: 14px 24px 28px; }
}
@media (max-width: 600px) {
  .eceai-panel { width: 97vw; border-radius: 24px; height: 80vh; }
  .eceai-title-area { padding: 30px 18px 24px; }
  .eceai-title { letter-spacing: .13em; }
  .chat-msgs { padding: 18px 16px 10px; }
  .chat-bubble { max-width: 90%; }
  .chat-bubble-body { padding: 12px 16px; font-size: .84rem; }
  .chat-qs { padding: 12px 16px 26px; gap: 8px; }
  .chat-q-btn { font-size: .68rem; padding: 9px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .eceai-shine::before, .eceai-title,
  .eceai-title-divider, .chat-bubble { animation: none !important; }
}

/* ═══ TERMINAL / FINALE SECTION ══════════════════════════════════════ */
.terminal-section {
  position: fixed; inset: 0; z-index: 50;
  background: #000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.terminal-section.glow-wake { opacity: 1; pointer-events: auto; }
/* Scanline overlay */
.term-scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 10;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.09) 3px, rgba(0,0,0,.09) 4px
  );
}
/* Noise grain */
.term-noise {
  position: absolute; inset: 0; pointer-events: none; z-index: 9;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}
/* Vignette — darkens edges, no green, reveals with glow-wake */
.terminal-section::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 78% 78% at 50% 50%, transparent 30%, rgba(0,0,0,.82) 100%);
  pointer-events: none; z-index: 6;
  opacity: 0;
  transition: opacity 1.8s ease-out;
}
.terminal-section.glow-wake::after { opacity: 1; }
/* Terminal text body */
.term-body {
  position: relative; z-index: 5;
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: clamp(36px,7vh,80px) clamp(28px,9vw,140px) clamp(28px,4vh,48px);
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(.9rem,1.9vw,1.12rem);
  line-height: 1.85;
  color: #00ff4c;
  filter: drop-shadow(0 0 10px rgba(0,255,70,.14));
  scrollbar-width: thin;
  scrollbar-color: rgba(0,200,55,.1) transparent;
}
.term-body::-webkit-scrollbar { width: 3px; }
.term-body::-webkit-scrollbar-thumb { background: rgba(0,200,55,.1); }

/* ── Line types ── */
.term-line { display: block; margin: 0; white-space: pre-wrap; }
.term-line.boot {
  color: rgba(0,218,62,.78);
  font-size: .85em;
  text-shadow: 0 0 11px rgba(0,218,62,.54), 0 0 28px rgba(0,218,62,.20);
}
.term-line.msg {
  color: #00ff4c;
  text-shadow:
    0 0 9px rgba(0,255,70,.98),
    0 0 24px rgba(0,255,70,.44),
    0 0 54px rgba(0,255,70,.17);
}
.term-line.em {
  color: #d8ff55;
  text-shadow:
    0 0 12px rgba(190,255,70,1.0),
    0 0 32px rgba(190,255,70,.65),
    0 0 72px rgba(190,255,70,.25);
}
.term-line.closing {
  color: #55ffb8;
  text-shadow:
    0 0 12px rgba(70,255,170,1.0),
    0 0 32px rgba(70,255,170,.55),
    0 0 70px rgba(70,255,170,.22);
}
.term-line.sig {
  color: #ffe84a;
  text-shadow:
    0 0 12px rgba(255,228,55,1.0),
    0 0 32px rgba(255,228,55,.58),
    0 0 72px rgba(255,228,55,.24);
}
.term-line.blank { display: block; height: 1.1em; }
/* Cursor */
.term-cursor {
  display: inline-block;
  width: .6em; height: 1.1em;
  background: #00ff4c;
  margin-left: 2px;
  vertical-align: text-bottom;
  box-shadow: 0 0 11px rgba(0,255,70,1.0), 0 0 27px rgba(0,255,70,.70), 0 0 50px rgba(0,255,70,.32);
  animation: termBlink .65s step-end infinite;
}
@keyframes termBlink {
  0%,46%  { opacity: 1; }
  50%,96% { opacity: 0; }
  100%    { opacity: 1; }
}
@keyframes termHintPulse {
  0%, 100% { opacity: .44; }
  50%       { opacity: .88; }
}
.term-hint {
  display: block;
  text-align: center;
  margin-top: 2.4em;
  color: rgba(196,162,84,.84);
  font-size: .84em;
  letter-spacing: .14em;
  text-shadow: 0 0 18px rgba(198,148,56,.28);
  animation: termHintPulse 3s ease-in-out infinite;
}

/* ── Section glitch ── */
@keyframes sectionGlitch {
  0%,100% { filter: none; transform: none; }
  14%     { filter: hue-rotate(10deg) saturate(2) brightness(1.25); transform: translateX(-2px); }
  28%     { filter: none; transform: translateX(2px); }
  42%     { filter: hue-rotate(-6deg) saturate(1.6); transform: translateX(-1px); }
  56%     { filter: none; transform: none; }
  70%     { filter: brightness(1.35); }
  85%     { filter: none; }
}
.terminal-section.glitching { animation: sectionGlitch .32s steps(1) forwards; }

/* ── SON full-screen ── */
@keyframes sonReveal {
  from { transform: scale(.96); filter: blur(10px); }
  to   { transform: scale(1);   filter: blur(0); }
}
.term-son {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 1.1s ease;
}
.term-son.visible { opacity: 1; pointer-events: auto; }
.term-son-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(5rem, 18vw, 14rem);
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1;
  background: linear-gradient(
    to right,
    #6a4c1c 0%,
    #6a4c1c 14%,
    #a87c38 24%,
    #d4a84e 34%,
    #eacc76 43%,
    #f6edc8 47%,
    #f8f4ee 50%,
    #f6edc8 53%,
    #eacc76 57%,
    #d4a84e 66%,
    #a87c38 76%,
    #6a4c1c 86%,
    #6a4c1c 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 0 52px rgba(198,148,56,.26))
    drop-shadow(0 3px 14px rgba(0,0,0,.82));
  user-select: none;
}
.term-son.visible .term-son-text {
  animation:
    sonReveal      1.4s cubic-bezier(.16,1,.3,1) 0s   both,
    eceGoldShimmer 16s  ease-in-out              0.8s infinite;
}

/* ── Responsive ── */
@media (max-width: 560px) {
  .term-body { padding: 32px 22px 24px; font-size: .88rem; }
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .terminal-section.glitching { animation: none !important; transform: none !important; }
  .term-cursor { animation: none !important; opacity: 1; box-shadow: none; }
  .term-hint   { animation: none !important; opacity: .56; }
  .term-son.visible .term-son-text { animation: none; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GAME SCREENS
══════════════════════════════════════════════════════════════════════════ */
body { overflow: hidden; }

.game-screen {
  position: fixed; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .65s ease;
  z-index: 1;
}
.game-screen.active { opacity: 1; pointer-events: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 1 — HERO
══════════════════════════════════════════════════════════════════════════ */

/* ── Entry keyframes ── */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}
@keyframes eceReveal {
  from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   filter: blur(0);   }
}
/* Metal reflection — rests at deep antique gold, then a thin bright sweep
   passes through once per cycle. Gradient endpoints are identical (#5a3e14)
   so the loop is seamless. */
@keyframes eceGoldShimmer {
  0%    { background-position:  8% center; }   /* resting: deep antique gold */
  93%   { background-position:  8% center; }   /* hold */
  96.5% { background-position: 36% center; }   /* thin bright sweep */
  100%  { background-position:  8% center; }   /* return */
}
@keyframes heroDividerReveal {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes heroScrollEntry {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: .20; transform: translateY(0); }
}
@keyframes heroScrollBreathe {
  0%, 100% { opacity: .18; transform: translateY(0);   }
  50%      { opacity: .50; transform: translateY(6px); }
}
/* Atmospheric nebula drift — almost imperceptible, 54s per half-cycle */
@keyframes heroNebulaShift {
  0%   { transform: translate(  0%,    0%) scale(1.000); }
  28%  { transform: translate( 1.4%, -0.9%) scale(1.016); }
  56%  { transform: translate(-0.9%,  1.2%) scale(0.993); }
  100% { transform: translate( 0.7%,  0.3%) scale(1.005); }
}
/* Ambient gold glow behind the title — breathes very gently */
@keyframes heroGlowBreathe {
  0%, 100% { opacity: .76; transform: translate(-50%,-50%) scale(.97); }
  50%      { opacity: 1.0; transform: translate(-50%,-50%) scale(1.00); }
}

/* ── Screen base ── */
#screen-intro {
  background: var(--c-bg);
  overflow: hidden;
}

/* Canvas — powered by level1-bg.js via #intro-canvas */
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
  will-change: transform;
  transform: translate(
    calc(var(--prlx-x, 0) * 10px),
    calc(var(--prlx-y, 0) *  6px)
  );
}

/* Ambient depth — organic, barely visible, breathes dimensional warmth */
.hero-bg {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 56% 48% at 50% 50%, rgba(16, 9,34,.09) 0%, transparent 56%),
    radial-gradient(ellipse 36% 46% at 17% 38%, rgba(11, 7,22,.05) 0%, transparent 50%),
    radial-gradient(ellipse 32% 40% at 83% 60%, rgba(9,  5,18,.05) 0%, transparent 48%),
    radial-gradient(ellipse 26% 34% at 50% 94%, rgba(12, 6,16,.06) 0%, transparent 46%);
  will-change: transform;
  transform: translate(
    calc(var(--prlx-x, 0) * 5px),
    calc(var(--prlx-y, 0) * 3px)
  );
}

/* Atmospheric nebula layer — slowly drifts, adds deep-space depth */
.hero-nebula {
  position: absolute; inset: -22%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 54% at 60% 44%, rgba(34,12,68,.054) 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 26% 68%, rgba(56,24, 6,.042) 0%, transparent 58%),
    radial-gradient(ellipse 46% 36% at 74% 20%, rgba(14, 8,48,.034) 0%, transparent 54%),
    radial-gradient(ellipse 36% 28% at 14% 36%, rgba(40,12,60,.026) 0%, transparent 50%);
  animation: heroNebulaShift 54s ease-in-out infinite alternate;
  will-change: transform;
}

/* Cinematic vignette — draws the eye toward center */
.hero-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(
    ellipse 76% 72% at 50% 50%,
    transparent 26%,
    rgba(5,4,12,.70) 68%,
    rgba(3,2, 8,.97) 100%
  );
}

/* Content — absolute fill, same as canvas/bg/vignette layers above it.
   inset: 0 guarantees the flex container matches the viewport exactly so
   align-items: center is a true 50 % horizontal centre on every screen. */
.hero-content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(24px, 4vh, 52px) 0;
}

/* ── Eyebrow ── */
.hero-eyebrow {
  font-family: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-size: clamp(8px, .9vw, 10.5px);
  font-weight: 400;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: rgba(200,162,88,.80);
  text-shadow: 0 0 18px rgba(200,162,88,.22);
  margin-bottom: clamp(48px, 7vh, 84px);
  opacity: 0;
  animation: heroReveal 1.0s var(--ease-out) .10s both;
}

/* ── Title cluster ── */
.hero-title-group {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: clamp(44px, 6.5vh, 76px);
  position: relative;
  will-change: transform;
  transform: translate(
    calc(var(--prlx-x, 0) * 2.5px),
    calc(var(--prlx-y, 0) * 1.5px)
  );
}

/* Atmospheric depth behind the type */
.hero-title-group::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: min(680px, 94vw);
  height: min(520px, 82vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    rgba(4, 2, 14, .44) 0%,
    rgba(3, 2,  9, .18) 42%,
    transparent 66%
  );
  pointer-events: none;
  z-index: -1;
}

/* Ambient gold glow — breathes very slowly, almost imperceptibly */
.hero-title-group::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: min(760px, 108vw);
  height: min(420px, 62vh);
  transform: translate(-50%, -50%) scale(.97);
  background: radial-gradient(
    ellipse 100% 100% at 50% 50%,
    rgba(188,142,50,.066) 0%,
    rgba(156,114,38,.032) 34%,
    rgba(116, 84,24,.012) 58%,
    transparent 72%
  );
  pointer-events: none;
  z-index: -1;
  animation: heroGlowBreathe 13s ease-in-out infinite;
}

.hero-iyiki {
  font-family: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-size: clamp(12px, 1.7vw, 18px);
  font-weight: 400;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: rgba(255,255,255,.76);
  text-shadow: 0 1px 16px rgba(255,255,255,.12);
  margin: 0 0 clamp(10px, 1.4vh, 18px);
  opacity: 0;
  animation: heroReveal 1.0s var(--ease-out) .20s both;
}

/* ── ECE — brushed premium metal ── */
.hero-ece {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(92px, 18vw, 210px);
  font-weight: 400;
  letter-spacing: .14em;
  line-height: .88;
  margin: 0 0 clamp(12px, 1.6vh, 20px);

  /*
   * Richer anisotropic brushed gold: deeper shadow at edges, additional
   * intermediate stops for smoother transitions, slightly cooler return
   * side for authentic metallic directionality. Endpoints are identical
   * (#5a3e14) so the shimmer loop restart is invisible.
   */
  background: linear-gradient(
    to right,
    #5a3e14  0%,
    #6a4c1c 12%,
    #8c6428 20%,
    #a87c38 26%,
    #c49240 32%,
    #d4a84e 36%,
    #e2be68 42%,
    #eacc76 45%,
    #f4e8c0 48%,
    #f8f4ee 50%,
    #f4e8c0 52%,
    #eacc76 55%,
    #d4a84e 63%,
    #ba8630 72%,
    #986a28 78%,
    #7a5620 84%,
    #6a4c1c 88%,
    #5a3e14 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 1px 18px rgba(68,40,10,.24),
    0 3px 42px rgba(46,24, 4,.14);

  opacity: 0;
  animation:
    eceReveal      1.3s var(--ease-out) .30s both,
    eceGoldShimmer 18s  ease-in-out    1.0s infinite;
}

.hero-sub {
  font-family: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-size: clamp(10px, 1.15vw, 13px);
  font-weight: 400;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: rgba(255,255,255,.64);
  text-shadow: 0 1px 14px rgba(255,255,255,.08);
  margin: 0;
  opacity: 0;
  animation: heroReveal 1.0s var(--ease-out) .45s both;
}

/* ── Animated divider ── */
.hero-divider {
  width: clamp(44px, 7vw, 72px);
  height: 1px;
  margin: clamp(36px, 5.5vh, 52px) auto;
  transform-origin: center;
  background: linear-gradient(
    to right,
    transparent,
    rgba(176,140,76,.46) 28%,
    rgba(198,164,98,.58) 50%,
    rgba(176,140,76,.46) 72%,
    transparent
  );
  opacity: 0;
  animation: heroDividerReveal 1.0s var(--ease-out) .60s both;
}

/* ── Glass button ── */
.hero-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 52px;
  font-family: system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 100px;
  background: rgba(255,255,255,.052);
  -webkit-backdrop-filter: blur(28px) saturate(160%) brightness(1.04);
  backdrop-filter: blur(28px) saturate(160%) brightness(1.04);
  box-shadow:
    inset 0  1.5px 0 rgba(255,255,255,.16),
    inset 0 -1px   0 rgba(0,0,0,.12),
    inset 0 0 24px  rgba(255,255,255,.024),
    0 0  0 1px rgba(255,255,255,.055),
    0 8px 32px rgba(0,0,0,.20),
    0 2px  8px rgba(0,0,0,.10),
    0 20px 60px rgba(0,0,0,.10);
  overflow: hidden;
  transition:
    background    .38s ease,
    border-color  .38s ease,
    box-shadow    .38s ease,
    color         .38s ease,
    transform     .28s cubic-bezier(.16,1,.3,1);
  opacity: 0;
  animation: heroReveal 1.0s var(--ease-out) .70s both;
}

/* Hero button's own ::before/::after glass-sweep were replaced by the
   shared .gold-cta shimmer (see the shared gold-button system near the end
   of this file) now that #btn-start carries that class — the gold
   ::before/::after fully override these, so the old ones were removed
   rather than left as dead/conflicting rules. */
.hero-btn:hover {
  /* background/border-color/color/box-shadow now come from .gold-cta:hover
     (later in the cascade, same specificity, wins for those properties) —
     this rule's `transform` is the one thing .gold-cta never touches, so
     the lift-on-hover motion stays exactly as it was. */
  transform: translateY(-2px);
}

.hero-btn:active {
  transform: translateY(0) scale(.974);
  background: rgba(255,255,255,.036);
  transition-duration: .08s;
  transition-timing-function: cubic-bezier(.34,1.56,.64,1);
}

/* ── Breathing scroll indicator ── */
.hero-scroll {
  position: absolute;
  bottom: clamp(22px, 3.5vh, 36px);
  left: 0; right: 0;
  text-align: center;
  pointer-events: none;
}

.hero-scroll-inner {
  display: inline-block;
  font-family: system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.35);
  opacity: 0;
  animation:
    heroScrollEntry   1.0s ease-out    1.10s forwards,
    heroScrollBreathe 3.4s ease-in-out 1.25s infinite;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-iyiki, .hero-ece, .hero-sub,
  .hero-divider, .hero-btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-ece { background-position: 50% center; }
  .hero-canvas, .hero-bg, .hero-nebula, .hero-title-group {
    transform: none !important;
    animation: none !important;
  }
  .hero-title-group::after { animation: none !important; opacity: .58; }
  .hero-scroll-inner {
    animation: none !important;
    opacity: .28 !important;
    transform: none !important;
  }
}

/* ── Mobile ── */
@media (max-width: 500px) {
  .hero-ece   { letter-spacing: .10em; }
  .hero-iyiki { letter-spacing: .40em; }
}

/* ── Map Screen ───────────────────────────────────────────────────────── */
#screen-map { background: #07061a; overflow: hidden; }

/* Blurred ambient background — same map image scaled and darkened */
#screen-map::before {
  content: '';
  position: absolute; inset: -12%;
  background: url('../assets/map/memory-atlas.png') center/cover no-repeat;
  filter: blur(55px) brightness(.18) saturate(.6);
  /* sits below .map-bg due to DOM order */
}

/* Foreground — sharp, fully visible map */
.map-bg {
  position: absolute; inset: 0;
  background: url('../assets/map/memory-atlas.png') center/contain no-repeat;
  background-color: transparent;
}

/* Vignette over the whole composite */
.map-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 28%, rgba(4,3,18,.48) 100%),
    linear-gradient(180deg, rgba(4,3,18,.28) 0%, transparent 18%, transparent 82%, rgba(4,3,18,.32) 100%),
    linear-gradient(90deg, rgba(4,3,18,.22) 0%, transparent 12%, transparent 88%, rgba(4,3,18,.22) 100%);
  pointer-events: none;
}

/* HUD */
.map-hud {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  z-index: 30;
  background: linear-gradient(175deg, rgba(14,10,32,.97) 0%, rgba(6,4,16,.99) 100%);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(245,158,11,.32);
  border-radius: 16px; padding: 12px 30px;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(245,158,11,.07),
    0 8px 40px rgba(0,0,0,.85),
    0 2px 10px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(245,158,11,.22),
    inset 0 -1px 0 rgba(0,0,0,.65);
  white-space: nowrap;
}
.map-hud-title {
  font-size: .56rem; letter-spacing: .52em; text-transform: uppercase;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  opacity: .72;
}
.map-hud-progress {
  font-size: .9rem; letter-spacing: .06em;
  color: #fde68a; margin-top: 4px;
  text-shadow: 0 0 14px rgba(245,158,11,.38);
}
.map-hud-pips {
  display: flex; gap: 9px; justify-content: center; margin-top: 8px;
}
.map-hud-pip {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: background .4s, box-shadow .4s;
}
.map-hud-pip.done {
  background: radial-gradient(circle, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 0 10px rgba(245,158,11,.72), 0 0 4px rgba(245,158,11,.5), inset 0 1px 0 rgba(255,255,255,.3);
}

/* Quest Pins */
.quest-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 20; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .45s cubic-bezier(.16,1,.3,1), filter .35s;
  user-select: none;
}
.quest-pin:hover { transform: translate(-50%, -100%) scale(1.08); }
.quest-pin.done { filter: brightness(.6) saturate(.4); }
.quest-pin.done .pin-bubble::after {
  content: '✓'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #00ff88;
  background: rgba(0,0,0,.52); border-radius: 50%;
}

/* Gem circle */
.pin-bubble {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  transition: box-shadow .5s ease, filter .4s ease;
}
/* Inner gem glint — top-left light refraction */
.pin-bubble::before {
  content: '';
  position: absolute;
  top: 13%; left: 16%;
  width: 38%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.55) 0%, rgba(255,255,255,.0) 100%);
  transform: rotate(-30deg);
  pointer-events: none; z-index: 2;
}

/* ── Rarity fills — magical stone aesthetic ── */
.pin-rare .pin-bubble {
  background:
    radial-gradient(ellipse 68% 52% at 32% 27%, rgba(220,200,255,.5) 0%, transparent 58%),
    radial-gradient(circle at 50% 50%, #c084fc 0%, #9333ea 32%, #7c3aed 58%, #5b21b6 82%, #3b1080 100%);
  border: 2.5px solid rgba(216,180,254,.92);
  box-shadow:
    0 0 0 1px rgba(139,92,246,.22),
    0 0 18px 4px rgba(139,92,246,.52),
    0 0 48px 10px rgba(124,58,237,.18),
    0 6px 22px rgba(0,0,0,.78),
    0 2px 6px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -8px 16px rgba(59,16,128,.5);
}
.pin-epic .pin-bubble {
  background:
    radial-gradient(ellipse 68% 52% at 32% 27%, rgba(167,243,208,.48) 0%, transparent 58%),
    radial-gradient(circle at 50% 50%, #4ade80 0%, #22c55e 30%, #16a34a 58%, #15803d 82%, #14532d 100%);
  border: 2.5px solid rgba(74,222,128,.9);
  box-shadow:
    0 0 0 1px rgba(34,197,94,.22),
    0 0 18px 4px rgba(34,197,94,.5),
    0 0 48px 10px rgba(22,163,74,.18),
    0 6px 22px rgba(0,0,0,.78),
    0 2px 6px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -8px 16px rgba(20,83,45,.55);
}
.pin-memory .pin-bubble {
  background:
    radial-gradient(ellipse 68% 52% at 32% 27%, rgba(186,230,253,.48) 0%, transparent 58%),
    radial-gradient(circle at 50% 50%, #38bdf8 0%, #0ea5e9 30%, #0891b2 58%, #0e7490 82%, #083344 100%);
  border: 2.5px solid rgba(56,189,248,.9);
  box-shadow:
    0 0 0 1px rgba(14,165,233,.22),
    0 0 18px 4px rgba(34,211,238,.5),
    0 0 48px 10px rgba(14,116,144,.18),
    0 6px 22px rgba(0,0,0,.78),
    0 2px 6px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -8px 16px rgba(8,51,68,.55);
}
.pin-mythic .pin-bubble {
  background:
    radial-gradient(ellipse 68% 52% at 32% 27%, rgba(254,202,202,.48) 0%, transparent 58%),
    radial-gradient(circle at 50% 50%, #f87171 0%, #ef4444 30%, #dc2626 58%, #b91c1c 82%, #7f1d1d 100%);
  border: 2.5px solid rgba(252,129,129,.92);
  box-shadow:
    0 0 0 1px rgba(34,211,238,.22),
    0 0 18px 4px rgba(248,113,113,.52),
    0 0 48px 10px rgba(185,28,28,.18),
    0 6px 22px rgba(0,0,0,.78),
    0 2px 6px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -8px 16px rgba(127,29,29,.55);
}

/* ── Hover: bloom intensifies per rarity ── */
.quest-pin.pin-rare:hover   .pin-bubble { box-shadow: 0 0 0 1px rgba(139,92,246,.3), 0 0 26px 6px rgba(139,92,246,.7), 0 0 64px 14px rgba(124,58,237,.28), 0 8px 28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -8px 16px rgba(59,16,128,.5); }
.quest-pin.pin-epic:hover   .pin-bubble { box-shadow: 0 0 0 1px rgba(34,197,94,.3),  0 0 26px 6px rgba(34,197,94,.7),  0 0 64px 14px rgba(22,163,74,.28),  0 8px 28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -8px 16px rgba(20,83,45,.55); }
.quest-pin.pin-memory:hover .pin-bubble { box-shadow: 0 0 0 1px rgba(14,165,233,.3), 0 0 26px 6px rgba(34,211,238,.7), 0 0 64px 14px rgba(14,116,144,.28), 0 8px 28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -8px 16px rgba(8,51,68,.55); }
.quest-pin.pin-mythic:hover .pin-bubble { box-shadow: 0 0 0 1px rgba(34,211,238,.3),  0 0 26px 6px rgba(248,113,113,.7), 0 0 64px 14px rgba(185,28,28,.28),  0 8px 28px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -8px 16px rgba(127,29,29,.55); }

/* ── Suit icon — metallic gold ── */
.pin-suit {
  font-size: 2.2rem; line-height: 1; color: #e6c36d;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 5px rgba(230,195,109,.35));
  position: relative; z-index: 3;
  transition: filter .5s ease;
}
.quest-pin:hover .pin-suit {
  animation: suitGlowPulse 2s ease-in-out infinite;
}
@keyframes suitGlowPulse {
  0%,100% { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 5px rgba(230,195,109,.35)); }
  50%     { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)) drop-shadow(0 0 11px rgba(230,195,109,.75)); }
}

/* ── Stem — golden anchor ── */
.pin-stem {
  width: 2px; height: 18px;
  background: linear-gradient(180deg, rgba(230,195,109,.7) 0%, rgba(230,195,109,.0) 100%);
  border-radius: 2px;
}

/* ── Label — engraved typography ── */
.pin-name {
  margin-top: 6px;
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 700; color: #e2b96c;
  text-shadow: 0 1px 6px rgba(0,0,0,.98), 0 0 10px rgba(226,185,108,.38);
  white-space: nowrap;
  transition: color .4s ease, text-shadow .4s ease;
}
.quest-pin:hover .pin-name {
  color: #fde68a;
  text-shadow: 0 1px 6px rgba(0,0,0,.98), 0 0 18px rgba(245,158,11,.65);
}

/* Ece Marker */
@keyframes eceFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.ece-marker {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 22; pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
  transition: left .85s cubic-bezier(.25,.46,.45,.94), top .85s cubic-bezier(.25,.46,.45,.94), transform .55s ease;
}
.ece-marker.ece-facing-right { transform: translate(-50%, -100%) rotate(3deg); }
.ece-marker.ece-facing-left  { transform: translate(-50%, -100%) rotate(-3deg); }
.ece-marker-avatar {
  width: 62px; height: 62px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 2px rgba(245,158,11,.28), 0 0 22px rgba(245,158,11,.55), 0 4px 16px rgba(0,0,0,.75);
  animation: eceFloat 3s ease-in-out infinite;
}
.ece-marker-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.15); }
.ece-marker-stem { width: 4px; height: 15px; background: linear-gradient(180deg, rgba(245,158,11,.75) 0%, rgba(245,158,11,.08) 100%); border-radius: 2px; }
.ece-marker-label {
  font-size: .6rem; letter-spacing: .22em; color: var(--gold); text-transform: uppercase;
  text-shadow: 0 0 8px rgba(245,158,11,.5), 0 1px 4px rgba(0,0,0,.9);
  margin-top: 3px;
}

/* ── Modals ───────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.74);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }

@keyframes modalIn {
  from { transform: translateY(22px) scale(.97); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

/* ── Question Modal ───────────────────────────────────────────────────── */
.modal-question-panel {
  position: relative;
  width: min(540px, 92vw);
  background: rgba(6,3,16,.96);
  border: 1px solid rgba(245,158,11,.22);
  border-radius: 28px; padding: 44px 42px;
  box-shadow:
    0 0 0 1px rgba(245,158,11,.06),
    0 0 90px rgba(245,158,11,.08),
    0 36px 90px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 60px rgba(100,60,200,.04);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  animation: modalIn .45s cubic-bezier(.16,1,.3,1) both;
}
.modal-close-btn {
  position: absolute; top: 18px; right: 18px;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.38); border-radius: 50%; cursor: pointer;
  font-size: .65rem; display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, border-color .2s;
}
.modal-close-btn:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.22); }
.mq-eyebrow {
  font-size: .5rem; letter-spacing: .50em; text-transform: uppercase;
  color: rgba(245,158,11,.48); margin-bottom: 10px;
}
.mq-title {
  font-size: clamp(1.25rem, 3vw, 1.85rem); letter-spacing: .16em; font-weight: normal;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 45%, #fde68a 72%, #d97706 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(245,158,11,.22));
  margin: 0 0 24px;
}
.mq-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,.28), transparent);
  margin: 0 0 24px;
}
.mq-question {
  font-size: clamp(.9rem, 2.1vw, 1.05rem); color: #ccc8e0; line-height: 1.78; margin: 0 0 26px;
}
.mq-input-wrap { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
.mq-text-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(167,139,250,.22);
  border-radius: 12px; padding: 14px 20px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: .92rem; color: #ece9ff; letter-spacing: .04em;
  outline: none; transition: border-color .25s, box-shadow .25s, background .25s;
}
.mq-text-input:focus {
  background: rgba(255,255,255,.06);
  border-color: rgba(167,139,250,.48);
  box-shadow: 0 0 0 3px rgba(124,58,237,.09), 0 0 20px rgba(124,58,237,.08);
}
.mq-text-input.input-wrong {
  border-color: rgba(248,113,113,.65);
  box-shadow: 0 0 0 3px rgba(248,113,113,.12);
  animation: inputShake .45s ease-out;
}
.mq-text-input.input-correct {
  border-color: rgba(110,255,168,.6);
  box-shadow: 0 0 0 3px rgba(110,255,168,.12);
}
.mq-text-input:disabled { opacity: .65; cursor: default; }
@keyframes inputShake {
  0%,100% { transform: translateX(0); }
  14%     { transform: translateX(-8px); }
  28%     { transform: translateX(7px); }
  42%     { transform: translateX(-6px); }
  57%     { transform: translateX(5px); }
  71%     { transform: translateX(-3px); }
  85%     { transform: translateX(2px); }
}
.mq-submit-btn {
  padding: 13px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: .85rem; letter-spacing: .15em; text-transform: uppercase;
  background: rgba(124,58,237,.12);
  border: 1px solid rgba(124,58,237,.28);
  color: rgba(196,181,253,.88); border-radius: 12px;
  cursor: pointer; transition: background .22s, border-color .22s, color .22s, box-shadow .22s;
}
.mq-submit-btn:hover {
  background: rgba(124,58,237,.24); border-color: rgba(167,139,250,.55);
  color: #ede9fe; box-shadow: 0 0 22px rgba(124,58,237,.18);
}
.mq-submit-btn:disabled { opacity: .4; cursor: default; }
.modal-question-panel.quest-final .mq-submit-btn {
  background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.28); color: rgba(253,230,138,.85);
}
.modal-question-panel.quest-final .mq-submit-btn:hover {
  background: rgba(245,158,11,.22); border-color: rgba(245,158,11,.5); color: #fde68a;
}
.modal-question-panel.quest-final .mq-text-input { border-color: rgba(245,158,11,.22); }
.modal-question-panel.quest-final .mq-text-input:focus { border-color: rgba(245,158,11,.5); box-shadow: 0 0 0 3px rgba(245,158,11,.08); }
.mq-result { margin-top: 16px; font-size: .86rem; text-align: center; min-height: 20px; }
.mq-result.correct { color: #6effa8; }
.mq-result.wrong   { color: #ff9090; }

/* ── Verified / success state ──────────────────────────────────────── */
.mq-verified {
  display: none;
  flex-direction: column; align-items: center;
  gap: 5px; padding: 8px 0 2px; margin-top: 4px;
}
.modal-question-panel.panel-verified .mq-context,
.modal-question-panel.panel-verified .mq-question,
.modal-question-panel.panel-verified .mq-input-wrap,
.modal-question-panel.panel-verified .mq-result { display: none; }
.modal-question-panel.panel-verified .mq-verified { display: flex; }

.mq-vrf-icon {
  font-size: 1.7rem; line-height: 1; color: #6effa8;
  filter: drop-shadow(0 0 10px rgba(110,255,168,.5));
  animation: mqFadeUp .4s ease-out both, mqIconGlow 2.5s .6s ease-in-out infinite;
}
.mq-vrf-tag {
  font-size: .44rem; letter-spacing: .52em; text-transform: uppercase;
  color: rgba(110,255,168,.4); margin: 5px 0 13px;
  animation: mqFadeUp .4s .14s ease-out both;
}
.mq-vrf-msg1 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: .9rem; letter-spacing: .04em; text-align: center;
  color: #b2f5d4; line-height: 1.55;
  animation: mqFadeUp .45s .30s ease-out both;
}
.mq-vrf-msg2 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: .76rem; letter-spacing: .2em; text-transform: uppercase;
  color: #6effa8; text-shadow: 0 0 10px rgba(110,255,168,.38);
  margin-top: 3px;
  animation: mqFadeUp .45s .58s ease-out both;
}
@keyframes mqFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mqIconGlow {
  0%,100% { filter: drop-shadow(0 0 10px rgba(110,255,168,.5)); }
  50%     { filter: drop-shadow(0 0 20px rgba(110,255,168,.85)); }
}
/* Gold tint for final quest */
.modal-question-panel.quest-final .mq-vrf-icon { color: #fbbf24; filter: drop-shadow(0 0 10px rgba(251,191,36,.5)); }
.modal-question-panel.quest-final .mq-vrf-tag  { color: rgba(251,191,36,.4); }
.modal-question-panel.quest-final .mq-vrf-msg1 { color: #fde68a; }
.modal-question-panel.quest-final .mq-vrf-msg2 { color: #f59e0b; text-shadow: 0 0 10px rgba(245,158,11,.4); }
/* panel shake on wrong answer */
@keyframes panelShake {
  0%,100% { transform: translateX(0); }
  12%     { transform: translateX(-12px); }
  25%     { transform: translateX(10px); }
  37%     { transform: translateX(-8px); }
  50%     { transform: translateX(7px); }
  62%     { transform: translateX(-4px); }
  75%     { transform: translateX(3px); }
  87%     { transform: translateX(-1px); }
}
.modal-question-panel.panel-shake { animation: panelShake .45s ease-out; }
@keyframes panelFlashCorrect {
  0%,100% { box-shadow: 0 0 80px rgba(245,158,11,.09), 0 30px 80px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07); }
  50%     { box-shadow: 0 0 80px rgba(110,255,168,.45), 0 0 40px rgba(110,255,168,.25), 0 30px 80px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07); }
}
.modal-question-panel.panel-flash-correct { animation: panelFlashCorrect .5s ease-out; }
.mq-continue-btn {
  display: none; margin: 18px auto 0;
  padding: 11px 34px;
  font-family: 'Georgia', serif; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #1c0a00; border: none; border-radius: 4px; cursor: pointer;
  box-shadow: 0 0 20px rgba(245,158,11,.38);
  transition: transform .2s, box-shadow .2s;
}
.mq-continue-btn:hover { transform: scale(1.05); box-shadow: 0 0 32px rgba(245,158,11,.58); }
.mq-continue-btn.show { display: block; }

/* ── Card Collection Modal ────────────────────────────────────────────── */
.card-modal-panel {
  position: relative;
  width: min(920px, 96vw); max-height: 92vh;
  background: #06050f;
  border: 1px solid rgba(245,158,11,.15);
  border-radius: 26px; padding: 28px 20px 24px;
  box-shadow: 0 0 80px rgba(245,158,11,.07), 0 40px 100px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn .4s cubic-bezier(.16,1,.3,1) both;
}
.card-modal-panel.rarity-rare   { background: linear-gradient(160deg, #0e0622 0%, #06050f 55%); border-color: rgba(167,139,250,.2); box-shadow: 0 0 80px rgba(124,58,237,.1),  0 40px 100px rgba(0,0,0,.9); }
.card-modal-panel.rarity-epic   { background: linear-gradient(160deg, #001708 0%, #06050f 55%); border-color: rgba(52,211,153,.2);  box-shadow: 0 0 80px rgba(6,95,70,.1),    0 40px 100px rgba(0,0,0,.9); }
.card-modal-panel.rarity-memory { background: linear-gradient(160deg, #001520 0%, #06050f 55%); border-color: rgba(34,211,238,.2);  box-shadow: 0 0 80px rgba(14,116,144,.1), 0 40px 100px rgba(0,0,0,.9); }
.card-modal-panel.rarity-mythic { background: linear-gradient(160deg, #1c0404 0%, #06050f 55%); border-color: rgba(248,113,113,.2); box-shadow: 0 0 80px rgba(153,27,27,.14), 0 40px 100px rgba(0,0,0,.9); }
/* suppress the amber glow ring (looks brownish) inside the dark game modal */
#modal-cards .carousel-item.is-active::before { display: none; }

.card-modal-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px; flex-shrink: 0; padding-right: 110px;
}
.card-modal-badge {
  font-size: .52rem; letter-spacing: .2em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 20px; border: 1px solid; font-weight: 700;
}
.card-modal-title {
  font-size: clamp(.95rem, 2.3vw, 1.3rem); letter-spacing: .18em; font-weight: normal;
  background: linear-gradient(135deg, #fde68a, #f59e0b, #d97706);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  flex: 1;
}
.card-modal-hint {
  font-size: .62rem; letter-spacing: .09em; color: #38385a;
  text-transform: uppercase; text-align: center; margin-bottom: 4px; flex-shrink: 0;
}
/* Mobile-only swipe/tap hint — shown instead of the keyboard hint at <=480px */
.card-modal-hint-mobile { display: none; }
.card-modal-close {
  position: absolute; top: 20px; right: 20px;
  padding: 8px 20px;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.28);
  color: var(--gold); border-radius: 20px; cursor: pointer;
  transition: background .2s, box-shadow .2s;
}
.card-modal-close:hover { background: rgba(245,158,11,.2); box-shadow: 0 0 16px rgba(245,158,11,.28); }
.cm-carousel-wrap {
  flex: 1; min-height: 0;
  position: relative;
  display: flex; flex-direction: column; align-items: center;
}
.cm-carousel-wrap .carousel { width: 100%; }

/* ── Celebration (overlay — sits above map, below terminal) ──────────── */
#screen-celebration {
  background: radial-gradient(ellipse at 50% 44%, #1a0800 0%, #000 65%);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  z-index: 5;
}
#screen-celebration.active {
  animation: celShake .5s ease-out both, celGoldenGlow 4.8s ease-out both;
}
@keyframes celShake {
  0%,100% { transform: translate(0,0) scale(1); }
  12%      { transform: translate(-6px,-4px) scale(1.01); }
  25%      { transform: translate(6px,4px)  scale(1.01); }
  37%      { transform: translate(-5px,3px)  scale(1.02); }
  50%      { transform: translate(5px,-3px)  scale(1.02); }
  62%      { transform: translate(-3px,2px)  scale(1.02); }
  75%      { transform: translate(3px,-2px)  scale(1.02); }
  87%      { transform: translate(-1px,1px)  scale(1.01); }
}
@keyframes celGoldenGlow {
  0%   { box-shadow: inset 0 0 0   0   rgba(245,158,11,0); }
  18%  { box-shadow: inset 0 0 220px 60px rgba(245,158,11,.38); }
  55%  { box-shadow: inset 0 0 280px 90px rgba(245,158,11,.22); }
  100% { box-shadow: inset 0 0 80px  20px rgba(245,158,11,.06); }
}
.cel-number {
  font-size: clamp(7rem, 28vw, 20rem); letter-spacing: .08em; line-height: 1;
  background: linear-gradient(160deg, #fde68a 0%, #f59e0b 25%, #fbbf24 50%, #fde68a 70%, #d97706 90%, #fde68a 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 60px rgba(245,158,11,.9)) drop-shadow(0 0 140px rgba(245,158,11,.5));
  animation: heroGoldShimmer 3s ease-in-out infinite, celIn 1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes celIn {
  from { transform: scale(.3); opacity: 0; filter: blur(20px); }
  60%  { filter: blur(0); }
  to   { transform: scale(1); opacity: 1; }
}
.cel-message {
  font-size: clamp(.95rem, 2.8vw, 1.6rem); letter-spacing: .24em; text-transform: uppercase;
  color: #fde68a; text-shadow: 0 0 28px rgba(245,158,11,.55);
  margin-top: 14px;
  animation: celFadeUp 1.1s .5s ease-out both;
}
.cel-sub {
  font-size: .76rem; letter-spacing: .12em; color: #6b6b8a;
  font-style: italic; margin-top: 8px;
  animation: celFadeUp 1.1s 1.1s ease-out both;
}
@keyframes celFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cel-particle {
  position: absolute;
  animation: celFall linear both;
}
@keyframes celFall {
  from { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  to   { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── Final Quest Pin ──────────────────────────────────────────────────── */
.pin-final .pin-bubble {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  border: 2px solid rgba(255,255,255,.45);
  width: 76px; height: 76px;
  box-shadow: 0 0 20px rgba(245,158,11,.65), 0 4px 20px rgba(0,0,0,.7);
  animation: finalPinPulse 2.2s ease-in-out infinite;
}
@keyframes finalPinPulse {
  0%,100% { box-shadow: 0 0 20px rgba(245,158,11,.65), 0 4px 20px rgba(0,0,0,.7); }
  50%     { box-shadow: 0 0 48px rgba(245,158,11,.92), 0 0 0 8px rgba(245,158,11,.2), 0 4px 20px rgba(0,0,0,.7); }
}
.pin-final .pin-suit { font-size: 2.1rem; color: #1c0a00; }
.pin-final .pin-name { color: #fde68a; text-shadow: 0 0 8px rgba(245,158,11,.65), 0 1px 5px rgba(0,0,0,.9); font-size: .7rem; }
.pin-final { transform: translate(-50%,-100%) scale(1.18); }
.pin-final:hover { transform: translate(-50%,-100%) scale(1.3); }
@keyframes pinUnlockAnim {
  0%   { transform: translate(-50%,-100%) scale(0); opacity: 0; filter: blur(8px); }
  70%  { filter: blur(0); }
  100% { transform: translate(-50%,-100%) scale(1.18); opacity: 1; }
}
.pin-final.unlocking { animation: pinUnlockAnim .75s cubic-bezier(.16,1,.3,1) both; }

/* ── Question modal context line ──────────────────────────────────────── */
.mq-context {
  font-size: .78rem; letter-spacing: .05em;
  color: rgba(160,130,240,.6); font-style: italic;
  margin: 0 0 18px; line-height: 1.7;
}
.modal-question-panel.quest-final .mq-context { color: rgba(245,158,11,.58); }
.modal-question-panel.quest-final .mq-eyebrow { color: rgba(245,158,11,.72); letter-spacing: .5em; }
.modal-question-panel.quest-final .mq-title   { font-size: clamp(1.4rem, 3.4vw, 2.1rem); }

/* ══ Section 3 — Memory Map ════════════════════════════════════════════ */

/* Kill stale pseudo-element from old map design */
#screen-map::before { content: none !important; }

/* Screen — flex column: header stacks above the framed map shell */
#screen-map {
  background: #04030b;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 18px);
  padding: clamp(14px, 2.4vh, 28px) 0;
}

/* ── Header (above the frame, never inside it) ── */
.map-header {
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}
.map-header::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 140px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse 40% 100% at 33% 50%, rgba(34,211,238,.038) 0%, transparent 100%),
    radial-gradient(ellipse 40% 100% at 67% 50%, rgba(139,92,246,.038) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}
#screen-map.active .map-header {
  animation: mmHeaderIn .92s cubic-bezier(.16,1,.3,1) both;
}
@keyframes mmHeaderIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
.mm-eyebrow {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(7px, .80vw, 9px);
  letter-spacing: .44em;
  text-transform: uppercase;
  color: rgba(200,162,88,.66);
  margin: 0 0 8px;
}
.mm-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(18px, 2.8vw, 32px);
  font-weight: 400;
  letter-spacing: .14em;
  margin: 0 0 9px;
  background: linear-gradient(90deg,
    rgba(175,138,66,.78) 0%,
    rgba(255,240,170,.96) 28%,
    rgba(215,172,92,.90) 50%,
    rgba(255,240,170,.96) 72%,
    rgba(175,138,66,.78) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: mmTitleShimmer 9s ease-in-out infinite;
}
@keyframes mmTitleShimmer {
  0%, 100% { background-position: 0% center; }
  50%       { background-position: 100% center; }
}
.mm-desc {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(10px, .96vw, 12px);
  letter-spacing: .05em;
  color: rgba(255,255,255,.42);
  margin: 0 0 3px;
}
.mm-hint {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(7px, .80vw, 9px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  margin: 0;
}

/* ── Map shell — sized container for frame + viewport ──────────────────
   The shell defines the dimensions. The frame and viewport both fill it.
   Width uses min() so the 16/7 aspect ratio is never taller than 78 vh.
─────────────────────────────────────────────────────────────────────── */
.map-shell {
  position: relative;
  flex-shrink: 0;
  width: min(88vw, 1500px, calc(78vh * 16 / 7));
  aspect-ratio: 16 / 7;
}

/* ── Decorative frame — NEVER moves, NEVER transforms ──────────────────
   Sits at z-index 4, above the viewport (z-index 1) and all map content.
   Built entirely from CSS: corner brackets via multi-stop background,
   faint full-perimeter border via box-shadow, inner vignette via ::after.
   pointer-events: none so clicks pass through to the viewport.
─────────────────────────────────────────────────────────────────────── */
.map-frame {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;

  /* Corner L-bracket ornaments — outer set */
  background:
    /* TL H */ linear-gradient(90deg,  rgba(198,160,86,.64) 0%, transparent 100%) top    left  / 44px 1px   no-repeat,
    /* TL V */ linear-gradient(180deg, rgba(198,160,86,.64) 0%, transparent 100%) top    left  / 1px   44px  no-repeat,
    /* TR H */ linear-gradient(270deg, rgba(198,160,86,.64) 0%, transparent 100%) top    right / 44px 1px   no-repeat,
    /* TR V */ linear-gradient(180deg, rgba(198,160,86,.64) 0%, transparent 100%) top    right / 1px   44px  no-repeat,
    /* BL H */ linear-gradient(90deg,  rgba(198,160,86,.64) 0%, transparent 100%) bottom left  / 44px 1px   no-repeat,
    /* BL V */ linear-gradient(0deg,   rgba(198,160,86,.64) 0%, transparent 100%) bottom left  / 1px   44px  no-repeat,
    /* BR H */ linear-gradient(270deg, rgba(198,160,86,.64) 0%, transparent 100%) bottom right / 44px 1px   no-repeat,
    /* BR V */ linear-gradient(0deg,   rgba(198,160,86,.64) 0%, transparent 100%) bottom right / 1px   44px  no-repeat;

  /* Perimeter border + vignette + outer shadow */
  box-shadow:
    inset 0 0 0 1px rgba(198,160,86,.22),
    inset 0 0 70px rgba(0,0,0,.42),
    0 18px 80px rgba(0,0,0,.52),
    0 0 0 1px rgba(0,0,0,.26);
}

/* Inner corner brackets (inset 9px) — second ring, dimmer */
.map-frame::before {
  content: '';
  position: absolute;
  inset: 9px;
  pointer-events: none;
  background:
    linear-gradient(90deg,  rgba(198,160,86,.26) 0%, transparent 100%) top    left  / 22px 1px   no-repeat,
    linear-gradient(180deg, rgba(198,160,86,.26) 0%, transparent 100%) top    left  / 1px   22px  no-repeat,
    linear-gradient(270deg, rgba(198,160,86,.26) 0%, transparent 100%) top    right / 22px 1px   no-repeat,
    linear-gradient(180deg, rgba(198,160,86,.26) 0%, transparent 100%) top    right / 1px   22px  no-repeat,
    linear-gradient(90deg,  rgba(198,160,86,.26) 0%, transparent 100%) bottom left  / 22px 1px   no-repeat,
    linear-gradient(0deg,   rgba(198,160,86,.26) 0%, transparent 100%) bottom left  / 1px   22px  no-repeat,
    linear-gradient(270deg, rgba(198,160,86,.26) 0%, transparent 100%) bottom right / 22px 1px   no-repeat,
    linear-gradient(0deg,   rgba(198,160,86,.26) 0%, transparent 100%) bottom right / 1px   22px  no-repeat;
}

/* Slow metallic shimmer sweeping across the frame surface */
.map-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 35%,
    rgba(255,240,180,.028) 45%,
    rgba(255,240,180,.052) 50%,
    rgba(255,240,180,.028) 55%,
    transparent 65%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: mapFrameShimmer 12s ease-in-out infinite alternate;
}
@keyframes mapFrameShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -100% 0; }
}

/* Mobile-only "drag to explore" affordance — hidden by default so it never
   appears on desktop; shown and positioned in the mobile media query. */
.map-drag-hint { display: none; }

/* ── Map viewport — clips all moving content inside the frame ───────────
   position: absolute; inset: 0 makes it fill the shell exactly.
   ONLY .map-stage (the child) receives CSS transform. This element never moves.
─────────────────────────────────────────────────────────────────────── */
.map-viewport {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.map-viewport.is-dragging { cursor: grabbing; }

/* Page-level pull-to-refresh guard — added to <html> only while the Memory
   Atlas screen is active (js/memory-map.js), removed the instant it isn't,
   so no other screen's scrolling is affected. */
html.atlas-guard {
  overscroll-behavior-y: contain;
}

/* ── Map stage — ONLY element that receives transform: translate3d / scale ── */
.map-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px;
  height: 1200px;    /* JS updates this after the map image loads */
  transform-origin: 0 0;
  will-change: transform;
}

/* ── Map base — to swap the map, change only the img src in index.html ── */
.map-base {
  position: absolute;
  inset: 0;
  line-height: 0;
}

/* FINAL MEMORY ATLAS ASSET — change only img src in index.html to swap the map */
.map-img {
  display: block;
  width: 2000px;
  height: auto;
  max-width: none;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Pins layer — fills stage, above map image, below frame */
.map-pins {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Mobile — portrait viewport instead of a shrunk landscape frame.
   Width and height are independent (no aspect-ratio): the map image is
   wider than this box and pans/covers inside it via the existing JS
   pan/zoom system (getMinScale already computes a COVER fit from whatever
   box size .map-viewport actually measures, so no letterboxing occurs and
   no JS changes were needed for this). Height uses svh so iOS Safari's
   dynamic toolbar can't shrink the frame out from under the layout. */
@media (max-width: 600px) {
  .map-shell {
    width: 90vw;
    height: 58svh;
    aspect-ratio: unset;
  }
  .map-frame {
    background:
      linear-gradient(90deg,  rgba(198,160,86,.58) 0%, transparent 100%) top    left  / 26px 1px   no-repeat,
      linear-gradient(180deg, rgba(198,160,86,.58) 0%, transparent 100%) top    left  / 1px   26px  no-repeat,
      linear-gradient(270deg, rgba(198,160,86,.58) 0%, transparent 100%) top    right / 26px 1px   no-repeat,
      linear-gradient(180deg, rgba(198,160,86,.58) 0%, transparent 100%) top    right / 1px   26px  no-repeat,
      linear-gradient(90deg,  rgba(198,160,86,.58) 0%, transparent 100%) bottom left  / 26px 1px   no-repeat,
      linear-gradient(0deg,   rgba(198,160,86,.58) 0%, transparent 100%) bottom left  / 1px   26px  no-repeat,
      linear-gradient(270deg, rgba(198,160,86,.58) 0%, transparent 100%) bottom right / 26px 1px   no-repeat,
      linear-gradient(0deg,   rgba(198,160,86,.58) 0%, transparent 100%) bottom right / 1px   26px  no-repeat;
  }
  .map-frame::before {
    inset: 5px;
    background:
      linear-gradient(90deg,  rgba(198,160,86,.22) 0%, transparent 100%) top    left  / 14px 1px   no-repeat,
      linear-gradient(180deg, rgba(198,160,86,.22) 0%, transparent 100%) top    left  / 1px   14px  no-repeat,
      linear-gradient(270deg, rgba(198,160,86,.22) 0%, transparent 100%) top    right / 14px 1px   no-repeat,
      linear-gradient(180deg, rgba(198,160,86,.22) 0%, transparent 100%) top    right / 1px   14px  no-repeat,
      linear-gradient(90deg,  rgba(198,160,86,.22) 0%, transparent 100%) bottom left  / 14px 1px   no-repeat,
      linear-gradient(0deg,   rgba(198,160,86,.22) 0%, transparent 100%) bottom left  / 1px   14px  no-repeat,
      linear-gradient(270deg, rgba(198,160,86,.22) 0%, transparent 100%) bottom right / 14px 1px   no-repeat,
      linear-gradient(0deg,   rgba(198,160,86,.22) 0%, transparent 100%) bottom right / 1px   14px  no-repeat;
  }
}

/* ── Premium RPG memory nodes (injected by JS) ──────────────────────────
   .map-pin: 52×52 anchor, transform-centered on the x,y coordinate.
   .mp-node: visual container — receives the floating animation.
   All ring / core elements centered inside .mp-node with margin offsets.
─────────────────────────────────────────────────────────────────────── */
.map-pin {
  position: absolute;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 5;
  user-select: none;
  -webkit-user-select: none;
}
.mp-node {
  position: relative;
  width: 52px;
  height: 52px;
  animation: mpFloat 3.6s ease-in-out infinite;
}
@keyframes mpFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* Shared centering for all child rings */
.mp-ripple,
.mp-ring,
.mp-inner,
.mp-bloom,
.mp-core {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
}

/* Outward expanding ripples — two offset for continuous cascade */
.mp-ripple {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border: 1px solid rgba(198,160,86,.28);
  animation: mpRippleExpand 3.4s ease-out infinite;
}
.mp-ripple.mp-ripple2 {
  animation-delay: 1.7s;
}
@keyframes mpRippleExpand {
  0%   { transform: scale(1);    opacity: .52; }
  65%  { transform: scale(2.08); opacity: 0;   }
  100% { transform: scale(2.08); opacity: 0;   }
}

/* Outer decorative ring */
.mp-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid rgba(198,160,86,.48);
  box-shadow:
    0 0 10px rgba(198,160,86,.16),
    inset 0 0 8px rgba(198,160,86,.06);
  transition: border-color .22s, box-shadow .22s, opacity .22s;
  animation: mpRingBreath 4.2s ease-in-out infinite;
}
@keyframes mpRingBreath {
  0%, 100% { opacity: .48; }
  50%       { opacity: .76; }
}

/* Inner ring */
.mp-inner {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 1px solid rgba(198,160,86,.56);
  transition: border-color .22s;
}

/* Soft bloom glow behind core */
.mp-bloom {
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  background: radial-gradient(circle, rgba(198,160,86,.38) 0%, rgba(198,160,86,.08) 55%, transparent 70%);
  filter: blur(3px);
  transition: transform .22s ease, background .22s;
}

/* Gold core */
.mp-core {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: radial-gradient(circle at 35% 30%, #fffbc0 0%, #d4a830 50%, #8a6010 100%);
  box-shadow:
    0 0 0 1.5px rgba(198,160,86,.44),
    0 0 8px  rgba(198,160,86,.72),
    0 0 18px rgba(198,160,86,.36),
    0 0 32px rgba(198,160,86,.12),
    0 2px 5px rgba(0,0,0,.65);
  transition: transform .22s ease, box-shadow .22s ease, background .22s;
  z-index: 2;
}

/* Hover */
.map-pin:hover .mp-core {
  transform: scale(1.42);
  box-shadow:
    0 0 0 2px   rgba(198,160,86,.56),
    0 0 14px    rgba(198,160,86,.92),
    0 0 28px    rgba(198,160,86,.52),
    0 0 50px    rgba(198,160,86,.18),
    0 2px 6px   rgba(0,0,0,.70);
}
.map-pin:hover .mp-ring {
  border-color: rgba(198,160,86,.80);
  box-shadow:
    0 0 18px rgba(198,160,86,.34),
    inset 0 0 12px rgba(198,160,86,.12);
  animation: none;
  opacity: 1;
}
.map-pin:hover .mp-bloom {
  transform: scale(1.55);
  background: radial-gradient(circle, rgba(198,160,86,.58) 0%, rgba(198,160,86,.12) 55%, transparent 70%);
}
.map-pin:hover .mp-inner { border-color: rgba(198,160,86,.80); }

/* Active / selected */
.map-pin.pin-active .mp-core {
  transform: scale(1.28);
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ffe98a 40%, #d4a830 100%);
  box-shadow:
    0 0 0 2px   rgba(255,240,160,.42),
    0 0 16px    rgba(198,160,86,.92),
    0 0 34px    rgba(198,160,86,.50),
    0 2px 6px   rgba(0,0,0,.70);
}
.map-pin.pin-active .mp-ring {
  border-color: rgba(255,240,160,.50);
  animation: none;
  opacity: 1;
}
.map-pin.pin-active .mp-bloom {
  transform: scale(1.65);
  background: radial-gradient(circle, rgba(255,230,100,.44) 0%, transparent 70%);
}

/* Selection ripple — single outward burst on click */
.map-pin.pin-ripple::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(198,160,86,.80);
  animation: mpSelectBurst .72s ease-out forwards;
  pointer-events: none;
}
@keyframes mpSelectBurst {
  0%   { transform: scale(1);   opacity: .88; }
  100% { transform: scale(3.8); opacity: 0;   }
}

/* ── Cartographic region labels — anchored in stage, zoom with map ──── */
.map-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.map-region {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(14px, 1.6vw, 22px);
  font-weight: 400;
  letter-spacing: .44em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* Slow left → right → left metallic shimmer */
  background: linear-gradient(90deg,
    rgba(148,114,42,.72)  0%,
    rgba(255,244,170,.95) 28%,
    rgba(218,178,80,.90)  50%,
    rgba(255,244,170,.95) 72%,
    rgba(148,114,42,.72) 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: regionLabelShimmer 6s ease-in-out infinite;
  /* Warm glow + dark shadow — no excessive bloom */
  filter:
    drop-shadow(0 0 4px rgba(198,160,86,.20))
    drop-shadow(0 2px 6px rgba(0,0,0,.90));
}
@keyframes regionLabelShimmer {
  0%, 100% { background-position: 0%   center; }
  50%       { background-position: 100% center; }
}

/* ── Memory Atlas cartographic title — over the sea ─────────────────── */
.map-atlas-title {
  position: absolute;
  left: 50%;
  top: 76%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
  white-space: nowrap;
}
.mat-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .30em;
  text-transform: uppercase;
  margin: 0 0 8px;
  background: linear-gradient(90deg,
    rgba(152,118,44,.68) 0%,
    rgba(255,244,170,.96) 28%,
    rgba(210,170,78,.90)  50%,
    rgba(255,244,170,.96) 72%,
    rgba(152,118,44,.68) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: matShimmer 8s ease-in-out infinite;
  filter:
    drop-shadow(0 0 16px rgba(198,160,86,.24))
    drop-shadow(0 3px 8px rgba(0,0,0,.88));
}
@keyframes matShimmer {
  0%, 100% { background-position: 0% center; }
  50%       { background-position: 100% center; }
}
.mat-sub {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 9.5px;
  letter-spacing: .20em;
  color: rgba(198,160,86,.50);
  margin: 0 0 4px;
  text-shadow: 0 1px 5px rgba(0,0,0,.84);
}
.mat-hint {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 7.5px;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,.80);
}

/* ── Development: coordinate picker (DEBUG_COORDINATE_PICKER) ────────── */
.mm-debug-marker {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,48,48,.92);
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  z-index: 30;
  pointer-events: none;
  box-shadow:
    0 0 0 4px rgba(255,48,48,.28),
    0 2px 6px rgba(0,0,0,.70);
}
#mm-debug-badge {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8,6,20,.94);
  border: 1px solid rgba(198,160,86,.48);
  border-radius: 8px;
  color: rgba(198,160,86,.94);
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  letter-spacing: .06em;
  padding: 8px 18px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .28s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,.60);
}
#mm-debug-badge.mm-debug-badge--visible { opacity: 1; }

/* ══ Memory gallery overlay ═════════════════════════════════════════════
   Full-screen overlay. .mg-backdrop darkens+blurs the map behind it.
   .mg-panel is the centered premium glass gallery window.
   z-index 20 puts it above the map frame (z-index 10) and pins (z-index 5).
════════════════════════════════════════════════════════════════════════ */
#memory-detail {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 1.8vh, 22px) clamp(8px, 1.6vw, 18px);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity .38s ease;
}
#memory-detail.popup-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Backdrop ── */
.mg-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(1,0,10,.86);
  -webkit-backdrop-filter: blur(22px) brightness(.68) saturate(1.3);
  backdrop-filter: blur(22px) brightness(.68) saturate(1.3);
}

/* ── Glass panel ── */
.mg-panel {
  position: relative;
  z-index: 2;
  width: min(880px, 90vw);
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg,
    rgba(16,10,40,.97) 0%,
    rgba(9,6,24,.98)   40%,
    rgba(5,4,17,.99)   70%,
    rgba(3,2,13,1.00) 100%
  );
  border: 1px solid rgba(198,160,86,.26);
  border-radius: 26px;
  box-shadow:
    0 0 0 1px rgba(198,160,86,.08),
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(0,0,0,.45),
    0 0 90px rgba(139,92,246,.13),
    0 0 110px rgba(34,211,238,.07),
    0 40px 80px rgba(0,0,0,.82),
    0 80px 130px rgba(0,0,0,.52);
  transform: translateY(20px) scale(.96);
  transition: transform .46s cubic-bezier(.16,1,.3,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(198,160,86,.14) transparent;
}
.mg-panel::-webkit-scrollbar       { width: 3px; }
.mg-panel::-webkit-scrollbar-thumb { background: rgba(198,160,86,.20); border-radius: 2px; }

/* Animated top-edge reflection sweep */
@keyframes mgPanelReflect {
  0%   { background-position: -80% center; }
  45%  { background-position: 220% center; }
  100% { background-position: 220% center; }
}
.mg-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent            0%,
    rgba(198,160,86,.16) 18%,
    rgba(255,248,160,.54) 50%,
    rgba(198,160,86,.16) 82%,
    transparent           100%
  );
  background-size: 55% 100%;
  background-repeat: no-repeat;
  animation: mgPanelReflect 13s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
  border-radius: 26px 26px 0 0;
}

/* Ambient purple + cyan bloom — sits BEHIND the header/photo/caption.
   .mg-panel establishes its own stacking context (position + z-index), so
   z-index: -1 here is scoped to that context and can't escape below the
   panel itself. Without a z-index, this pseudo-element (last in paint order
   among the panel's z-index:auto children) rendered ON TOP of .mg-frame —
   the "blue square" over the photo before/while it loaded. */
.mg-panel::after {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 380px; height: 380px;
  background:
    radial-gradient(circle at 65% 28%, rgba(139,92,246,.13) 0%, transparent 52%),
    radial-gradient(circle at 14% 76%, rgba(34,211,238,.08) 0%, transparent 52%),
    radial-gradient(circle at 42% 88%, rgba(198,160,86,.04) 0%, transparent 52%);
  pointer-events: none;
  z-index: -1;
}

#memory-detail.popup-open .mg-panel {
  transform: translateY(0) scale(1);
}

/* ── Panel header ── */
.mg-header {
  padding: clamp(20px, 2.8vh, 32px) clamp(22px, 3vw, 36px) clamp(14px, 1.8vh, 22px);
  text-align: center;
  position: relative;
  flex-shrink: 0;
}

.mg-close {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 16px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 7.5px;
  letter-spacing: .30em;
  text-transform: uppercase;
  background: rgba(198,160,86,.08);
  border: 1px solid rgba(198,160,86,.26);
  color: rgba(198,160,86,.74);
  border-radius: 20px;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, color .2s;
  z-index: 3;
}
.mg-close:hover {
  background: rgba(198,160,86,.18);
  box-shadow: 0 0 16px rgba(198,160,86,.28);
  color: rgba(255,244,170,.92);
}
.mg-close:active { transform: scale(.96); transition-duration: .08s; }

.mg-eyebrow {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(6.5px, .72vw, 8.5px);
  letter-spacing: .52em;
  text-transform: uppercase;
  color: rgba(198,160,86,.46);
  margin: 0 0 14px;
}

@keyframes mgTitleShimmer {
  0%, 100% { background-position: 0% center; }
  50%       { background-position: 100% center; }
}
.mg-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 2.8vw, 36px);
  font-weight: 400;
  letter-spacing: .06em;
  margin: 0 0 7px;
  background: linear-gradient(90deg,
    rgba(152,116,44,.88) 0%,
    rgba(255,244,170,.98) 26%,
    rgba(222,182,82,.94)  50%,
    rgba(255,244,170,.98) 74%,
    rgba(152,116,44,.88) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: mgTitleShimmer 11s ease-in-out infinite;
  filter:
    drop-shadow(0 0 22px rgba(198,160,86,.10))
    drop-shadow(0 2px 8px rgba(0,0,0,.82));
}

.mg-location {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(7px, .74vw, 9px);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  margin: 0;
}

.mg-header-line {
  margin-top: clamp(12px, 1.8vh, 20px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(198,160,86,.10),
    rgba(255,255,255,.04),
    rgba(198,160,86,.10),
    transparent
  );
}

/* ── Media row: [prev] [frame-wrap] [next] ── */
.mg-media-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 18px);
  padding: 0 clamp(12px, 1.8vw, 24px) clamp(12px, 1.8vh, 22px);
  flex-shrink: 0;
}

.mg-nav {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(5,4,18,.86);
  border: 1px solid rgba(198,160,86,.22);
  color: rgba(198,160,86,.76);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: background .18s, border-color .18s, color .18s, box-shadow .18s, opacity .22s;
}
.mg-nav:hover {
  background: rgba(198,160,86,.13);
  border-color: rgba(198,160,86,.50);
  color: rgba(255,244,170,.94);
  box-shadow: 0 0 16px rgba(198,160,86,.28), 0 0 32px rgba(198,160,86,.08);
}
.mg-nav:active { transform: scale(.93); transition-duration: .08s; }
.mg-nav.hidden { opacity: 0; pointer-events: none; }

/* Frame-wrap: centers the adaptive frame */
.mg-frame-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Frame: JS sets width+height inline to match each photo's natural ratio.
   CSS defaults are a sensible landscape fallback before the first image loads.
   Transitions animate the resize when switching between photos. */
.mg-frame {
  position: relative;
  /* default size — JS overrides per image via inline style */
  width: min(700px, 64vw);
  height: min(430px, 46vh);
  flex-shrink: 0;
  background: rgba(3,2,13,.96);
  border: 1px solid rgba(198,160,86,.20);
  border-radius: 5px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(198,160,86,.05),
    inset 0 0 50px rgba(3,2,13,.60),
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 22px rgba(139,92,246,.07),
    0 0 22px rgba(34,211,238,.04),
    0 16px 50px rgba(0,0,0,.72);
  transition:
    width  280ms cubic-bezier(.25,.1,.25,1),
    height 280ms cubic-bezier(.25,.1,.25,1);
}

/* Media container fills the frame */
.mg-media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .22s ease;
}
.mg-media.mg-fading { opacity: 0; }

/* Images fill the frame; object-fit:contain preserves the full photo */
.mg-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.mg-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: rgba(2,1,9,.96);
}

/* Missing-media placeholder */
.mg-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  font-family: system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: rgba(255,255,255,.14);
  padding: 32px;
  text-align: center;
}

/* Corner accent overlays — warm gold L-shapes */
.mg-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 2;
}
.mg-corner--tl { top: 0;    left: 0;  border-top:    1.5px solid rgba(198,160,86,.70); border-left:  1.5px solid rgba(198,160,86,.70); }
.mg-corner--tr { top: 0;    right: 0; border-top:    1.5px solid rgba(198,160,86,.70); border-right: 1.5px solid rgba(198,160,86,.70); }
.mg-corner--bl { bottom: 0; left: 0;  border-bottom: 1.5px solid rgba(198,160,86,.70); border-left:  1.5px solid rgba(198,160,86,.70); }
.mg-corner--br { bottom: 0; right: 0; border-bottom: 1.5px solid rgba(198,160,86,.70); border-right: 1.5px solid rgba(198,160,86,.70); }

/* ── Footer: dots + counter + caption ── */
.mg-footer {
  padding: 0 clamp(16px, 2.6vw, 32px) clamp(18px, 2.6vh, 28px);
  text-align: center;
  flex-shrink: 0;
}

.mg-progress-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  min-height: 18px;
}

.mg-dots {
  display: flex;
  gap: 7px;
  align-items: center;
}
.mg-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(198,160,86,.22);
  cursor: pointer;
  transition: background .22s, transform .22s, box-shadow .22s;
}
.mg-dot:hover { background: rgba(198,160,86,.48); }
.mg-dot.mg-dot--active {
  background: rgba(198,160,86,.88);
  transform: scale(1.40);
  box-shadow: 0 0 6px rgba(198,160,86,.38);
}

.mg-counter {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 9px;
  letter-spacing: .28em;
  color: rgba(255,255,255,.26);
  margin: 0;
  white-space: nowrap;
}

/* Gold hairline divider above caption */
.mg-sep {
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,160,86,.30), transparent);
  margin: 0 auto 14px;
}

@keyframes mgCaptionShimmer {
  0%, 100% { background-position: 0% center; }
  50%       { background-position: 100% center; }
}

@keyframes mgCaptionEntrance {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.mg-caption {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 1.38vw, 18.5px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.82;
  background: linear-gradient(90deg,
    rgba(196,152,62,.82)  0%,
    rgba(248,234,148,.96) 50%,
    rgba(196,152,62,.82) 100%
  );
  background-size: 200% auto;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: rgba(214,172,76,.84);
  text-shadow:
    0 0 22px rgba(198,160,86,.16),
    0 1px 5px rgba(0,0,0,.68);
  margin: 0 auto;
  max-width: 520px;
  transition: opacity 700ms ease;
}

#memory-detail.popup-open .mg-caption {
  animation:
    mgCaptionShimmer 13s ease-in-out infinite,
    mgCaptionEntrance 640ms cubic-bezier(.22,1,.36,1) 160ms both;
}

@media (prefers-reduced-motion: reduce) {
  #memory-detail.popup-open .mg-caption {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* ── Mobile safety ── */
@media (max-width: 700px) {
  .mg-panel {
    width: min(98vw, 100%);
    border-radius: 20px;
    max-height: 90vh;
  }
  .mg-header    { padding: 18px 16px 12px; }
  .mg-close     { top: 12px; right: 12px; padding: 5px 13px; }
  .mg-media-row { gap: 6px; padding: 0 6px 12px; }
  .mg-nav       { width: 34px; height: 34px; font-size: 20px; }
  .mg-footer    { padding: 0 12px 16px; }
}

/* ── Continue button ── */
.mm-continue-btn {
  position: absolute;
  bottom: clamp(14px, 2vh, 26px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  padding: 11px 28px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(8px, .92vw, 10.5px);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 100px;
  overflow: hidden;
  transition: background .26s, border-color .26s, color .26s, transform .18s;
  white-space: nowrap;
  /* base color/border/background/box-shadow now come from the shared
     .gold-cta class (see near the end of this file) */
}
.mm-continue-btn:hover {
  /* background/border-color/color come from .gold-cta:hover */
  transform: translateX(-50%) translateY(-1px);
}
.mm-continue-btn:active { transform: translateX(-50%) scale(.97); transition-duration: .08s; }

/* Gold shimmer — shared by Level I title and constellation text */
@keyframes heroGoldShimmer {
  0%, 100% { background-position: 0%   50%; }
  50%       { background-position: 100% 50%; }
}

/* ══ Level I — Celestial Archive ════════════════════════════════════════ */

#screen-level1 { background: #020008; overflow: hidden; }

.l1-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
  will-change: transform;
  transform: translate(
    calc(var(--prlx-x, 0) * 4px),
    calc(var(--prlx-y, 0) * 2.5px)
  );
}

.l1-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 28%, rgba(1,0,6,.68) 100%),
    linear-gradient(180deg, rgba(1,0,6,.52) 0%, transparent 22%, transparent 78%, rgba(1,0,6,.60) 100%),
    linear-gradient(90deg,  rgba(1,0,6,.30) 0%, transparent 16%, transparent 84%, rgba(1,0,6,.30) 100%);
}

.l1-layout {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 32px 20px; box-sizing: border-box;
}

/* ── Header ─────────────────────────────────────────────── */
.l1-header { text-align: center; margin-bottom: 40px; }

.l1-brand {
  display: block;
  font-size: .44rem; letter-spacing: .72em; text-transform: uppercase;
  color: rgba(245,158,11,.42); margin-bottom: 9px;
}
.l1-chapter {
  display: block;
  font-size: .54rem; letter-spacing: .5em; text-transform: uppercase;
  color: rgba(255,255,255,.26); margin-bottom: 16px;
}
.l1-main-title {
  display: block;
  font-size: clamp(1.4rem, 3.6vw, 2.2rem); letter-spacing: .14em;
  text-transform: uppercase; font-weight: normal;
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 38%, #fde68a 65%, #d97706 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 20px rgba(245,158,11,.32));
  animation: heroGoldShimmer 6s ease-in-out infinite;
  margin-bottom: 18px;
}
.l1-progress {
  font-size: clamp(.82rem, 2vw, 1.05rem); letter-spacing: .22em;
  color: rgba(245,158,11,.65);
  text-shadow: 0 0 12px rgba(245,158,11,.22);
}

/* Divider */
.l1-divider {
  width: 220px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,158,11,.18), transparent);
  margin-bottom: 48px;
}

/* ── Constellation Nodes ─────────────────────────────────── */
.l1-nodes {
  display: flex; gap: 34px; justify-content: center;
  flex-wrap: nowrap; margin-bottom: 44px;
}

.l1-node {
  position: relative;
  width: 108px; height: 108px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px;
  background: radial-gradient(circle at 40% 33%, rgba(255,255,255,.055) 0%, rgba(0,0,0,.72) 100%);
  border: 1.5px solid;
  cursor: pointer; font-family: inherit; overflow: visible;
  transition: transform .48s cubic-bezier(.16,1,.3,1), box-shadow .48s ease, opacity .38s;
}
/* Inner gem glint */
.l1-node::before {
  content: '';
  position: absolute; top: 13%; left: 16%;
  width: 34%; height: 20%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.18) 0%, transparent 100%);
  transform: rotate(-26deg); pointer-events: none; z-index: 2;
}
.l1-node:hover { transform: translateY(-7px) scale(1.09); }
.l1-node:focus-visible { outline: 2px solid rgba(255,255,255,.35); outline-offset: 6px; }

/* Done badge */
.l1-node-done {
  display: none;
  position: absolute; top: 5px; right: 5px;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(0,0,0,.85);
  font-size: .56rem; color: #6effa8;
  align-items: center; justify-content: center;
  text-shadow: 0 0 8px rgba(110,255,168,.7);
}
.l1-node.done          { opacity: .5; }
.l1-node.done .l1-node-icon  { color: rgba(230,195,109,.55); }
.l1-node.done .l1-node-done  { display: flex; }

.l1-node-icon {
  font-size: 1.85rem; line-height: 1; color: #e6c36d;
  filter: drop-shadow(0 0 5px rgba(230,195,109,.4));
  position: relative; z-index: 1;
  transition: color .4s, filter .4s;
}
.l1-node-label {
  font-size: .5rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.38); font-weight: 700;
  position: relative; z-index: 1; transition: color .4s;
}
.l1-node:hover .l1-node-icon  { color: #fde68a; filter: drop-shadow(0 0 9px rgba(245,158,11,.65)); }
.l1-node:hover .l1-node-label { color: rgba(255,255,255,.72); }
.l1-node.done:hover .l1-node-icon { color: rgba(230,195,109,.65); filter: none; }

/* ── Per-rarity borders + bloom ── */
.l1-node[data-rarity="rare"] {
  border-color: rgba(167,139,250,.48);
  box-shadow: 0 0 22px rgba(124,58,237,.20), 0 0 58px rgba(124,58,237,.07),
              0 5px 20px rgba(0,0,0,.72), inset 0 0 18px rgba(124,58,237,.08);
}
.l1-node[data-rarity="rare"]:hover {
  border-color: rgba(196,173,255,.8);
  box-shadow: 0 0 38px rgba(139,92,246,.50), 0 0 80px rgba(124,58,237,.18),
              0 9px 32px rgba(0,0,0,.78), inset 0 0 24px rgba(124,58,237,.14);
}
.l1-node.done[data-rarity="rare"] {
  box-shadow: 0 0 14px rgba(124,58,237,.12), 0 4px 16px rgba(0,0,0,.65);
}

.l1-node[data-rarity="epic"] {
  border-color: rgba(52,211,153,.44);
  box-shadow: 0 0 22px rgba(5,150,105,.20), 0 0 58px rgba(5,150,105,.07),
              0 5px 20px rgba(0,0,0,.72), inset 0 0 18px rgba(5,150,105,.08);
}
.l1-node[data-rarity="epic"]:hover {
  border-color: rgba(110,231,183,.8);
  box-shadow: 0 0 38px rgba(52,211,153,.46), 0 0 80px rgba(5,150,105,.16),
              0 9px 32px rgba(0,0,0,.78), inset 0 0 24px rgba(5,150,105,.13);
}
.l1-node.done[data-rarity="epic"] {
  box-shadow: 0 0 14px rgba(5,150,105,.11), 0 4px 16px rgba(0,0,0,.65);
}

.l1-node[data-rarity="memory"] {
  border-color: rgba(34,211,238,.44);
  box-shadow: 0 0 22px rgba(8,145,178,.20), 0 0 58px rgba(8,145,178,.07),
              0 5px 20px rgba(0,0,0,.72), inset 0 0 18px rgba(8,145,178,.08);
}
.l1-node[data-rarity="memory"]:hover {
  border-color: rgba(103,232,249,.8);
  box-shadow: 0 0 38px rgba(34,211,238,.46), 0 0 80px rgba(8,145,178,.16),
              0 9px 32px rgba(0,0,0,.78), inset 0 0 24px rgba(8,145,178,.13);
}
.l1-node.done[data-rarity="memory"] {
  box-shadow: 0 0 14px rgba(8,145,178,.11), 0 4px 16px rgba(0,0,0,.65);
}

.l1-node[data-rarity="mythic"] {
  border-color: rgba(248,113,113,.44);
  box-shadow: 0 0 22px rgba(34,211,238,.20), 0 0 58px rgba(34,211,238,.07),
              0 5px 20px rgba(0,0,0,.72), inset 0 0 18px rgba(34,211,238,.08);
}
.l1-node[data-rarity="mythic"]:hover {
  border-color: rgba(252,165,165,.8);
  box-shadow: 0 0 38px rgba(248,113,113,.46), 0 0 80px rgba(34,211,238,.16),
              0 9px 32px rgba(0,0,0,.78), inset 0 0 24px rgba(34,211,238,.13);
}
.l1-node.done[data-rarity="mythic"] {
  box-shadow: 0 0 14px rgba(34,211,238,.11), 0 4px 16px rgba(0,0,0,.65);
}

/* ── Footer Buttons ──────────────────────────────────────── */
.l1-footer {
  display: flex; gap: 14px; justify-content: center;
  opacity: 0; pointer-events: none;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease;
}
.l1-footer.visible {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.l1-footer-btn {
  padding: 10px 28px; border-radius: 4px; cursor: pointer;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  transition: all .22s ease;
}
.l1-footer-btn--collection {
  background: transparent;
  border: 1px solid rgba(245,158,11,.28); color: rgba(245,158,11,.65);
}
.l1-footer-btn--collection:hover {
  background: rgba(245,158,11,.09); border-color: rgba(245,158,11,.58); color: var(--gold);
  box-shadow: 0 0 18px rgba(245,158,11,.2);
}
.l1-footer-btn--chapter2 {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none; color: #1c0a00;
  box-shadow: 0 0 22px rgba(245,158,11,.30);
}
.l1-footer-btn--chapter2:hover {
  transform: translateY(-2px); box-shadow: 0 0 36px rgba(245,158,11,.52);
}

/* ══ Section 2 — Memory Core — PREMIUM POLISH ══════════════════════════
   All l1-* IDs and data-rarity attributes preserved for game.js.
   Rarity scheme: Rare=Emerald · Epic=Royal Purple · Memory=Crimson · Mythic=Azure
   Must stay AFTER Level I block to win the cascade.
═══════════════════════════════════════════════════════════════════════ */

#screen-level1 {
  background: #07060f;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vh, 22px);
  padding: clamp(14px, 2.2vh, 28px) 0;
}

/* ── Header ── */
.mc2-header {
  flex-shrink: 0;
  text-align: center;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.mc2-eyebrow {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(7px, .78vw, 9px);
  letter-spacing: .46em;
  text-transform: uppercase;
  color: rgba(200,162,88,.56);
  margin: 0 0 7px;
}
.mc2-screen-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 3.2vw, 38px);
  font-weight: 400;
  letter-spacing: .08em;
  color: rgba(255,255,255,.90);
  margin: 0 0 7px;
  text-shadow: 0 0 44px rgba(200,162,88,.07);
}
.mc2-subtitle {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(8px, .84vw, 10px);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255,255,255,.20);
  margin: 0;
}

/* ── Constellation container ── */
.mc2-constellation {
  position: relative;
  flex-shrink: 0;
  width: min(560px, 68vw, calc(60vh * 5 / 4));
  aspect-ratio: 5 / 4;
  will-change: transform;
  transform: translate(
    calc(var(--prlx-x, 0) * 8px),
    calc(var(--prlx-y, 0) * 5px)
  );
}

.mc2-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}

.mc2-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* ── Memory nodes — .l1-node.mc2-node specificity 0,2,0 beats .l1-node 0,1,0 ── */
.l1-node.mc2-node {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  transform: translate(-50%, -50%);
  will-change: transform;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  --nd: clamp(70px, 7.6vw, 92px);
  width: var(--nd);
  height: var(--nd);
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}
.l1-node.mc2-node:focus-visible .mc2-glass {
  outline: 2px solid rgba(255,255,255,.28);
  outline-offset: 5px;
}

/* ── Glass orb — premium material quality ── */
.mc2-glass {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Internal gradient — glass has internal depth variation */
  background: linear-gradient(
    148deg,
    rgba(255,255,255,.082) 0%,
    rgba(255,255,255,.028) 52%,
    rgba(0,0,0,.08) 100%
  );
  /* Thicker, more visible rim */
  border: 1.5px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(32px) saturate(170%) brightness(1.08);
  backdrop-filter: blur(32px) saturate(170%) brightness(1.08);
  box-shadow:
    /* Top specular rim */
    inset 0 2px 0 rgba(255,255,255,.24),
    /* Bottom edge shadow */
    inset 0 -2px 0 rgba(0,0,0,.22),
    /* Inner depth */
    inset 0 6px 22px rgba(0,0,0,.22),
    inset 0 -4px 14px rgba(0,0,0,.12),
    /* Outer shadow */
    0 14px 52px rgba(0,0,0,.44),
    0 4px 12px rgba(0,0,0,.28);
  overflow: hidden;
  transition:
    background   .36s ease,
    border-color .36s ease,
    box-shadow   .36s ease,
    transform    .20s ease;
  /* Idle breathing — stagger per rarity */
  animation: mc2IdleBreathe 5s ease-in-out infinite;
}

/* Staggered idle breathing so nodes feel organic */
.l1-node.mc2-node[data-rarity="rare"]   .mc2-glass { animation-delay:  0s;    }
.l1-node.mc2-node[data-rarity="epic"]   .mc2-glass { animation-delay: -1.25s; }
.l1-node.mc2-node[data-rarity="memory"] .mc2-glass { animation-delay: -2.50s; }
.l1-node.mc2-node[data-rarity="mythic"] .mc2-glass { animation-delay: -3.75s; }

@keyframes mc2IdleBreathe {
  0%, 100% { transform: scale(1);     }
  50%       { transform: scale(1.010); }
}

/* Top-left specular arc — primary internal reflection */
.mc2-glass::before {
  content: '';
  position: absolute;
  top: 7%; left: 11%;
  width: 44%; height: 21%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.30) 0%, rgba(255,255,255,.05) 58%, transparent 100%);
  transform: rotate(-28deg);
  pointer-events: none;
  z-index: 3;
}

/* Bottom-right counter-reflection — secondary glass depth cue */
.mc2-glass::after {
  content: '';
  position: absolute;
  bottom: 6%; right: 9%;
  width: 30%; height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.10) 0%, transparent 100%);
  transform: rotate(-28deg);
  pointer-events: none;
  z-index: 1;
}

/* Swirl light — rotates inside orb on hover, clipped by overflow:hidden on .mc2-glass */
@keyframes mc2SwirlRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.mc2-swirl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.06) 30%,
    transparent 55%
  );
  opacity: 0;
  transition: opacity .38s ease;
  animation: mc2SwirlRotate 5s linear infinite;
  pointer-events: none;
  z-index: 3;
}
.l1-node.mc2-node:hover .mc2-swirl { opacity: 1; }

/* ── Rarity glow disc (inner luminance) ──
   Colors driven by window.RARITY_CONFIG in game.js — update there, not here.
   Rare=139,92,246(purple)  Epic=34,197,94(green)  Memory=34,211,238(cyan)  Mythic=239,68,68(red)
── */
.mc2-glow {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
}
.l1-node.mc2-node[data-rarity="rare"]   .mc2-glow { background: radial-gradient(circle, rgba(139,92,246,.52)  0%, rgba(139,92,246,.12)  55%, transparent 75%); }
.l1-node.mc2-node[data-rarity="epic"]   .mc2-glow { background: radial-gradient(circle, rgba(34,197,94,.48)  0%, rgba(34,197,94,.10)  55%, transparent 75%); }
.l1-node.mc2-node[data-rarity="memory"] .mc2-glow { background: radial-gradient(circle, rgba(34,211,238,.48)   0%, rgba(34,211,238,.10)   55%, transparent 75%); }
.l1-node.mc2-node[data-rarity="mythic"] .mc2-glow { background: radial-gradient(circle, rgba(239,68,68,.48)  0%, rgba(239,68,68,.10)  55%, transparent 75%); }

/* ── Rarity symbol — always visible
   Locked: engraved silver  |  Hover: warm gold (300ms)  |  Done: permanent gold
── */
.l1-node.mc2-node .mc2-icon {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 2.8vw, 30px);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 1;
  line-height: 1;
  /* Engraved silver — embossed appearance */
  color: rgba(185,192,210,.56);
  text-shadow:
    0  1px 0 rgba(255,255,255,.13),
    0 -1px 0 rgba(0,0,0,.32),
    0  0  6px rgba(0,0,0,.08);
  transition:
    color       .30s ease,
    text-shadow .30s ease,
    filter      .30s ease;
}

/* Hover → warm gold (symbol only; glass takes rarity color) */
.l1-node.mc2-node:hover .mc2-icon {
  color: #d4a847;
  text-shadow:
    0  1px 0 rgba(255,240,170,.22),
    0 -1px 0 rgba(0,0,0,.24),
    0  0 16px rgba(212,168,71,.50);
  filter: drop-shadow(0 0 8px rgba(212,168,71,.38));
}

/* Done → permanent warm gold */
.l1-node.mc2-node.done .mc2-icon {
  color: #c8a050;
  text-shadow:
    0  1px 0 rgba(255,240,170,.20),
    0 -1px 0 rgba(0,0,0,.20),
    0  0 18px rgba(200,160,80,.58);
  filter: drop-shadow(0 0 10px rgba(200,160,80,.44));
}

/* Label — hidden when locked, fades in when done */
.l1-node.mc2-node .mc2-label {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(6px, .68vw, 8px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255,255,255,.50);
  position: absolute;
  bottom: 17%;
  left: 0; right: 0;
  text-align: center;
  z-index: 2;
  opacity: 0;
  transition: opacity .48s ease .10s;
}
.l1-node.mc2-node.done .mc2-label { opacity: 1; }

.l1-node.mc2-node .l1-node-done { display: none !important; }

/* ── Hover — one rarity color for all glass elements ── */

.l1-node.mc2-node:hover .mc2-glow,
.l1-node.mc2-node.done  .mc2-glow { opacity: 1; }

/* Rare: Emerald Green */
.l1-node.mc2-node[data-rarity="rare"]:hover .mc2-glass {
  background: linear-gradient(148deg, rgba(139,92,246,.11) 0%, rgba(139,92,246,.034) 55%, rgba(0,0,0,.07) 100%);
  border-color: rgba(139,92,246,.56);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 6px 22px rgba(0,0,0,.18),
    0 0 34px rgba(139,92,246,.52),
    0 0 76px rgba(139,92,246,.20),
    0 14px 46px rgba(0,0,0,.34);
  animation: none;
  transform: scale(1.07);
}

/* Epic: Royal Purple */
.l1-node.mc2-node[data-rarity="epic"]:hover .mc2-glass {
  background: linear-gradient(148deg, rgba(34,197,94,.11) 0%, rgba(34,197,94,.030) 55%, rgba(0,0,0,.07) 100%);
  border-color: rgba(34,197,94,.60);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 6px 22px rgba(0,0,0,.18),
    0 0 34px rgba(34,197,94,.54),
    0 0 76px rgba(34,197,94,.20),
    0 14px 46px rgba(0,0,0,.34);
  animation: none;
  transform: scale(1.07);
}

/* Memory: Crimson Red */
.l1-node.mc2-node[data-rarity="memory"]:hover .mc2-glass {
  background: linear-gradient(148deg, rgba(34,211,238,.11) 0%, rgba(34,211,238,.030) 55%, rgba(0,0,0,.07) 100%);
  border-color: rgba(34,211,238,.56);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 6px 22px rgba(0,0,0,.18),
    0 0 34px rgba(34,211,238,.52),
    0 0 76px rgba(34,211,238,.20),
    0 14px 46px rgba(0,0,0,.34);
  animation: none;
  transform: scale(1.07);
}

/* Mythic: Azure Blue */
.l1-node.mc2-node[data-rarity="mythic"]:hover .mc2-glass {
  background: linear-gradient(148deg, rgba(239,68,68,.11) 0%, rgba(239,68,68,.030) 55%, rgba(0,0,0,.07) 100%);
  border-color: rgba(239,68,68,.60);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 6px 22px rgba(0,0,0,.18),
    0 0 34px rgba(239,68,68,.54),
    0 0 76px rgba(239,68,68,.20),
    0 14px 46px rgba(0,0,0,.34);
  animation: none;
  transform: scale(1.07);
}

/* ── Done states — rarity color persists ── */
.l1-node.mc2-node[data-rarity="rare"].done .mc2-glass {
  border-color: rgba(139,92,246,.40);
  background: linear-gradient(148deg, rgba(139,92,246,.07) 0%, rgba(255,255,255,.022) 55%, rgba(0,0,0,.08) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 6px 22px rgba(0,0,0,.18),
    0 0 26px rgba(139,92,246,.30),
    0 0 56px rgba(139,92,246,.11),
    0 14px 44px rgba(0,0,0,.34);
}
.l1-node.mc2-node[data-rarity="epic"].done .mc2-glass {
  border-color: rgba(34,197,94,.38);
  background: linear-gradient(148deg, rgba(34,197,94,.06) 0%, rgba(255,255,255,.020) 55%, rgba(0,0,0,.08) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 6px 22px rgba(0,0,0,.18),
    0 0 26px rgba(34,197,94,.30),
    0 0 56px rgba(34,197,94,.11),
    0 14px 44px rgba(0,0,0,.34);
}
.l1-node.mc2-node[data-rarity="memory"].done .mc2-glass {
  border-color: rgba(34,211,238,.40);
  background: linear-gradient(148deg, rgba(34,211,238,.07) 0%, rgba(255,255,255,.020) 55%, rgba(0,0,0,.08) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 6px 22px rgba(0,0,0,.18),
    0 0 26px rgba(34,211,238,.30),
    0 0 56px rgba(34,211,238,.11),
    0 14px 44px rgba(0,0,0,.34);
}
.l1-node.mc2-node[data-rarity="mythic"].done .mc2-glass {
  border-color: rgba(239,68,68,.40);
  background: linear-gradient(148deg, rgba(239,68,68,.07) 0%, rgba(255,255,255,.020) 55%, rgba(0,0,0,.08) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 6px 22px rgba(0,0,0,.18),
    0 0 26px rgba(239,68,68,.30),
    0 0 56px rgba(239,68,68,.11),
    0 14px 44px rgba(0,0,0,.34);
}

/* ── All-done: collective breathing replaces idle breathing ── */
.mc2-constellation.mc2-all-done .l1-node.mc2-node:not(:hover) .mc2-glass {
  animation: mc2Breathe 4.4s ease-in-out infinite;
}
.mc2-constellation.mc2-all-done .l1-node.mc2-node[data-rarity="rare"]   .mc2-glass { animation-delay:  0s;   }
.mc2-constellation.mc2-all-done .l1-node.mc2-node[data-rarity="epic"]   .mc2-glass { animation-delay: -1.1s; }
.mc2-constellation.mc2-all-done .l1-node.mc2-node[data-rarity="memory"] .mc2-glass { animation-delay: -2.2s; }
.mc2-constellation.mc2-all-done .l1-node.mc2-node[data-rarity="mythic"] .mc2-glass { animation-delay: -3.3s; }

@keyframes mc2Breathe {
  0%, 100% { transform: scale(1);     }
  50%       { transform: scale(1.040); }
}

/* ── Progress ── */
.mc2-progress-wrap {
  flex-shrink: 0;
  text-align: center;
  position: relative;
  z-index: 2;
}
.mc2-progress-label {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(7px, .76vw, 9px);
  letter-spacing: .40em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
  margin: 0 0 5px;
}
#l1-progress {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(11px, 1.3vw, 14px);
  letter-spacing: .14em;
  color: rgba(255,255,255,.50);
  text-shadow: none;
  margin: 0 0 10px;
}
.mc2-bar {
  width: clamp(100px, 15vw, 180px);
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 0 auto;
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.mc2-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(198,160,86,.24), rgba(198,160,86,.66));
  border-radius: 1px;
  transition: width .92s cubic-bezier(.16,1,.3,1), background 1.1s ease;
  position: relative;
  overflow: hidden;
}
.mc2-bar-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: rgba(255,255,255,.36);
  animation: mc2BarShine 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mc2BarShine {
  from { left: -40%; }
  to   { left: 140%; }
}
.mc2-bar-fill--complete {
  background: linear-gradient(90deg, rgba(200,158,72,.54), rgba(240,198,96,.92), rgba(200,158,72,.54));
}

/* ── Footer — game.js adds .visible when completedQuests.length >= 4 ── */
#l1-footer {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: none;
  position: relative;
  z-index: 2;
}
#l1-footer.visible {
  display: flex;
  animation: mc2FooterIn .84s var(--ease-out) both;
}
@keyframes mc2FooterIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Footer buttons */
.l1-footer-btn {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(8px, .88vw, 10px);
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  border-radius: 10px;
  cursor: pointer;
  width: min(280px, 78%);
  padding: 13px 20px;
  border: 1px solid;
  transition: background .22s, border-color .22s, color .22s, transform .18s, box-shadow .22s;
}
.mc2-btn-outline {
  background: rgba(255,255,255,.038);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.50);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 4px 18px rgba(0,0,0,.18);
}
.mc2-btn-outline:hover {
  background: rgba(255,255,255,.068);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 8px 28px rgba(0,0,0,.22);
}
.mc2-btn-primary {
  /* Base colors/shimmer now come from the shared .gold-cta class (see near
     the end of this file) — this rule only keeps the positioning context
     the pseudo-elements need. */
  position: relative;
  overflow: hidden;
}
.mc2-btn-primary:hover {
  /* background/border-color/color/box-shadow come from .gold-cta:hover */
  transform: translateY(-2px);
}
.mc2-btn-primary:active {
  transform: translateY(0) scale(.974);
  transition-duration: .08s;
  transition-timing-function: cubic-bezier(.34,1.56,.64,1);
}
.mc2-btn-outline:active {
  transform: translateY(0) scale(.974);
  transition-duration: .08s;
}

/* ── Memory Core reduced-motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  .l1-canvas, .mc2-constellation { transform: none !important; }
  .mc2-swirl { animation: none !important; opacity: 0 !important; }
  .mc2-glass { animation: none !important; }
  .mc2-bar-fill::after { animation: none !important; }
}

/* ── Question modal — premium glass, rarity-aware ── */
#modal-question .modal-question-panel {
  max-width: 400px;
  width: calc(100vw - 48px);
  background: rgba(8,6,18,.96);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: clamp(28px, 4.2vw, 38px) clamp(26px, 3.8vw, 36px);
  box-shadow:
    0 36px 90px rgba(0,0,0,.64),
    0 0 0 .5px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(44px) saturate(155%);
  backdrop-filter: blur(44px) saturate(155%);
  text-align: center;
  position: relative;
}
#modal-question .modal-question-panel::before,
#modal-question .modal-question-panel::after { display: none; }

/* Per-rarity border + ambient glow */
#modal-question .modal-rarity-rare   { border-color: rgba(139,92,246,.30);  box-shadow: 0 36px 90px rgba(0,0,0,.62), 0 0 70px rgba(139,92,246,.08),  0 0 0 .5px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.07); }
#modal-question .modal-rarity-epic   { border-color: rgba(34,197,94,.30);  box-shadow: 0 36px 90px rgba(0,0,0,.62), 0 0 70px rgba(34,197,94,.08),  0 0 0 .5px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.07); }
#modal-question .modal-rarity-memory { border-color: rgba(34,211,238,.30);   box-shadow: 0 36px 90px rgba(0,0,0,.62), 0 0 70px rgba(34,211,238,.08),   0 0 0 .5px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.07); }
#modal-question .modal-rarity-mythic { border-color: rgba(239,68,68,.30);  box-shadow: 0 36px 90px rgba(0,0,0,.62), 0 0 70px rgba(239,68,68,.08),  0 0 0 .5px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.07); }

/* Close button */
#modal-question .modal-close-btn {
  position: absolute;
  top: 14px; right: 14px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.44);
  font-size: 10px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .20s, color .20s;
}
#modal-question .modal-close-btn:hover { background: rgba(255,255,255,.11); color: rgba(255,255,255,.78); }

/* A. Rarity symbol */
#modal-question .mq-symbol {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 2.8vw, 26px);
  color: rgba(185,192,210,.58);
  text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 -1px 0 rgba(0,0,0,.28);
  margin: 0 0 10px;
  line-height: 1;
  transition: color .32s ease, text-shadow .32s ease, filter .32s ease;
}
#modal-question .mq-symbol--done {
  color: #c8a050;
  text-shadow: 0 1px 0 rgba(255,240,170,.18), 0 -1px 0 rgba(0,0,0,.20), 0 0 16px rgba(200,160,80,.50);
  filter: drop-shadow(0 0 10px rgba(200,160,80,.40));
}

/* B. Eyebrow */
#modal-question .mq-eyebrow {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(7px, .72vw, 8.5px);
  letter-spacing: .48em;
  text-transform: uppercase;
  color: rgba(200,162,88,.58);
  margin: 0 0 10px;
  text-align: center;
}

/* C. Archive title — override outer gradient text */
#modal-question .mq-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 1.9vw, 20px);
  font-weight: 400;
  letter-spacing: .07em;
  color: rgba(255,255,255,.88);
  margin: 0 0 16px;
  text-align: center;
  background: none;
  -webkit-text-fill-color: rgba(255,255,255,.88);
  filter: none;
}

/* D. Divider */
#modal-question .mq-divider {
  width: 28px; height: 1px;
  background: rgba(200,162,88,.26);
  margin: 0 auto 16px;
  transition: background .30s;
}
#modal-question .modal-rarity-rare   .mq-divider { background: rgba(139,92,246,.36);  }
#modal-question .modal-rarity-epic   .mq-divider { background: rgba(34,197,94,.36);  }
#modal-question .modal-rarity-memory .mq-divider { background: rgba(34,211,238,.36);   }
#modal-question .modal-rarity-mythic .mq-divider { background: rgba(239,68,68,.36);  }

/* E. Helper sentence */
#modal-question .mq-context {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(9px, .84vw, 10px);
  letter-spacing: .08em;
  color: rgba(255,255,255,.30);
  font-style: normal;
  text-align: center;
  margin: 0 0 13px;
}

/* F. Question */
#modal-question .mq-question {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 400;
  line-height: 1.62;
  color: rgba(255,255,255,.80);
  text-align: center;
  margin: 0 0 20px;
}

/* G+H. Input + submit button */
#modal-question .mq-input-wrap { display: flex; flex-direction: column; gap: 8px; }
#modal-question .mq-text-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.044);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(13px, 1.3vw, 15px);
  color: rgba(255,255,255,.88);
  text-align: left;
  outline: none;
  transition: border-color .20s, background .20s, box-shadow .20s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
#modal-question .mq-text-input::placeholder { color: rgba(255,255,255,.24); font-style: normal; }
#modal-question .mq-text-input:focus {
  background: rgba(255,255,255,.064);
  border-color: rgba(255,255,255,.18);
}
/* Per-rarity focus ring */
#modal-question .modal-rarity-rare   .mq-text-input:focus { border-color: rgba(139,92,246,.55);  box-shadow: 0 0 0 3px rgba(139,92,246,.08),  inset 0 1px 0 rgba(255,255,255,.04); }
#modal-question .modal-rarity-epic   .mq-text-input:focus { border-color: rgba(34,197,94,.55);  box-shadow: 0 0 0 3px rgba(34,197,94,.08),  inset 0 1px 0 rgba(255,255,255,.04); }
#modal-question .modal-rarity-memory .mq-text-input:focus { border-color: rgba(34,211,238,.55);   box-shadow: 0 0 0 3px rgba(34,211,238,.08),   inset 0 1px 0 rgba(255,255,255,.04); }
#modal-question .modal-rarity-mythic .mq-text-input:focus { border-color: rgba(239,68,68,.55);  box-shadow: 0 0 0 3px rgba(239,68,68,.08),  inset 0 1px 0 rgba(255,255,255,.04); }

#modal-question .mq-text-input.input-wrong {
  border-color: rgba(240,80,80,.55);
  background: rgba(34,211,238,.05);
  animation: mc2InputShake .36s ease;
}
#modal-question .mq-text-input.input-correct {
  border-color: rgba(88,188,126,.44);
  background: rgba(88,188,126,.05);
}

#modal-question .mq-submit-btn {
  width: 100%;
  padding: 12px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(9px, .88vw, 10.5px);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: background .22s, border-color .22s, color .22s, transform .18s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#modal-question .mq-submit-btn:hover {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  transform: translateY(-1px);
}
#modal-question .mq-submit-btn:active  { transform: scale(.97); transition-duration: .08s; }
#modal-question .mq-submit-btn:disabled { opacity: .34; cursor: default; transform: none; }

/* I. Error message + hint */
#modal-question .mq-result {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(9px, .84vw, 10.5px);
  letter-spacing: .06em;
  text-align: center;
  margin: 10px 0 0;
  color: rgba(255,255,255,.36);
}
#modal-question .mq-result.wrong { color: rgba(240,95,95,.82); }

#modal-question .mq-hint-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(8.5px, .82vw, 10px);
  letter-spacing: .06em;
  text-align: center;
  color: rgba(255,255,255,.28);
  margin: 5px 0 0;
  display: none;
}
#modal-question .mq-hint-text.visible { display: block; }

/* Verified section — hidden until panel-verified class added */
#modal-question .mq-verified {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 6px 0;
}
#modal-question .modal-question-panel.panel-verified .mq-eyebrow,
#modal-question .modal-question-panel.panel-verified .mq-title,
#modal-question .modal-question-panel.panel-verified .mq-divider,
#modal-question .modal-question-panel.panel-verified .mq-context,
#modal-question .modal-question-panel.panel-verified .mq-question,
#modal-question .modal-question-panel.panel-verified .mq-input-wrap,
#modal-question .modal-question-panel.panel-verified .mq-result,
#modal-question .modal-question-panel.panel-verified .mq-hint-text { display: none; }
#modal-question .modal-question-panel.panel-verified .mq-verified {
  display: flex;
  animation: mc2FadeUp .48s ease both;
}

#modal-question .mq-vrf-tag {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(6.5px, .68vw, 8px);
  letter-spacing: .50em;
  text-transform: uppercase;
  color: rgba(200,162,88,.60);
  margin: 0 0 8px;
}
#modal-question .mq-vrf-archive {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 400;
  letter-spacing: .06em;
  color: rgba(255,255,255,.84);
  margin: 0 0 14px;
}
#modal-question .mq-vrf-msg1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(12px, 1.3vw, 14px);
  font-style: normal;
  letter-spacing: .04em;
  color: rgba(255,255,255,.58);
  margin: 0 0 5px;
}
#modal-question .mq-vrf-msg2 {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(7px, .70vw, 8px);
  letter-spacing: .46em;
  text-transform: uppercase;
  color: rgba(200,162,88,.72);
  text-shadow: 0 0 10px rgba(200,162,88,.26);
  margin: 0;
}

/* Continue button — base layout/position here; gold color treatment comes
   from the shared #modal-question .mq-continue-btn.gold-cta override near
   the end of this file (needs the ID-scoped selector to outrank this rule). */
#modal-question .mq-continue-btn {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(9px, .88vw, 10.5px);
  letter-spacing: .26em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .40s ease, background .22s, color .22s, transform .18s;
}
#modal-question .mq-continue-btn.show { opacity: 1; pointer-events: auto; }
#modal-question .mq-continue-btn:hover {
  transform: translateY(-1px);
}
#modal-question .mq-continue-btn:active { transform: scale(.97); transition-duration: .08s; }

/* Shake + flash animations */
#modal-question .modal-question-panel.panel-shake { animation: mc2PanelShake .40s ease; }
@keyframes mc2PanelShake {
  0%,100% { transform: translateX(0); }
  18%     { transform: translateX(-10px); }
  54%     { transform: translateX(8px); }
  82%     { transform: translateX(-4px); }
}
#modal-question .modal-question-panel.panel-flash-correct { animation: mc2PanelFlash .5s ease-out; }
@keyframes mc2PanelFlash {
  0%,100% { opacity: 1; }
  50%     { opacity: .94; filter: brightness(1.06); }
}
#modal-question .modal-question-panel.quest-final .mq-eyebrow { color: rgba(248,113,113,.66); }
#modal-question .modal-question-panel.quest-final .mq-title   { font-size: clamp(16px, 2.2vw, 22px); }
@keyframes mc2InputShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  60%     { transform: translateX(5px); }
  80%     { transform: translateX(-3px); }
}
@keyframes mc2FadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* Mobile */
@media (max-width: 600px) {
  .mc2-constellation { width: min(92vw, calc(62vh * 5 / 4)); }
  .l1-node.mc2-node { --nd: clamp(62px, 18vw, 76px); }
}

/* ── Level II — placeholder ───────────────────────────────────────────── */
#screen-level2 {
  background: #0a0613;
  display: flex; align-items: center; justify-content: center;
}
.l2-placeholder { text-align: center; }
.l2-title {
  font-size: clamp(1.4rem, 4vw, 2.2rem); letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold, #f59e0b); margin-bottom: 14px;
}
.l2-sub {
  font-size: .82rem; letter-spacing: .14em; color: rgba(255,255,255,.35);
}

/* ── Completion Modal eyebrow ─────────────────────────────────────────── */
/* ── Completion Modal ─────────────────────────────────────────────────── */
.completion-panel {
  width: min(440px, 92vw);
  background: rgba(8,6,18,.96);
  border: 1px solid rgba(198,160,86,.22);
  border-radius: 20px;
  padding: clamp(36px, 4vw, 48px) clamp(28px, 3.5vw, 40px);
  text-align: center;
  box-shadow:
    0 0 80px rgba(198,160,86,.06),
    0 40px 90px rgba(0,0,0,.80),
    inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  backdrop-filter: blur(40px) saturate(150%);
  animation: modalIn .4s cubic-bezier(.16,1,.3,1) both;
}
.completion-eyebrow {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(7px, .72vw, 8.5px);
  letter-spacing: .48em;
  text-transform: uppercase;
  color: rgba(198,160,86,.56);
  margin: 0 0 18px;
  text-align: center;
}
.completion-icon {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: rgba(198,160,86,.80);
  margin: 0 0 18px;
  line-height: 1;
  filter: drop-shadow(0 0 14px rgba(198,160,86,.42));
}
.completion-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 400;
  letter-spacing: .06em;
  color: rgba(255,255,255,.88);
  margin: 0 0 14px;
  background: none;
  -webkit-text-fill-color: rgba(255,255,255,.88);
}
.completion-desc {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(.78rem, 1.3vw, .88rem);
  letter-spacing: .04em;
  color: rgba(255,255,255,.48);
  margin: 0 0 5px;
}
.completion-desc2 {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(.68rem, 1vw, .75rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(198,160,86,.50);
  margin: 0;
}
.completion-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198,160,86,.22), transparent);
  margin: 24px 0;
}
.completion-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comp-btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(8.5px, .88vw, 10px);
  letter-spacing: .28em;
  text-transform: uppercase;
  border: 1px solid;
  transition: background .22s, border-color .22s, color .22s, transform .18s, box-shadow .22s;
}
.comp-btn--secondary {
  background: rgba(255,255,255,.042);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.56);
}
.comp-btn--secondary:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.17);
  color: rgba(255,255,255,.80);
}
.comp-btn--primary {
  /* Base colors/shimmer now come from the shared .gold-cta class (see near
     the end of this file) — this rule only keeps the positioning context
     the pseudo-elements need. */
  position: relative;
  overflow: hidden;
}
.comp-btn--primary:hover {
  /* background/border-color/color/box-shadow come from .gold-cta:hover */
  transform: translateY(-1px);
}
.comp-btn--primary:active,
.comp-btn--secondary:active { transform: scale(.97); transition-duration: .08s; }

/* ── TV Shutdown Transition ───────────────────────────────────────────── */
#tv-shutdown {
  position: fixed; inset: 0; z-index: 100;
  display: none; pointer-events: none;
}
#tv-shutdown.active { display: block; }
.tv-bar--top {
  position: absolute; top: 0; left: 0; right: 0; height: 50%;
  background: #000; transform: scaleY(0); transform-origin: top center;
}
.tv-bar--bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background: #000; transform: scaleY(0); transform-origin: bottom center;
}
.tv-line {
  position: absolute; left: 0; right: 0; top: calc(50% - 1px);
  height: 2px; opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(200,220,255,.92) 25%, #fff 50%, rgba(200,220,255,.92) 75%, transparent 100%);
}
/* animations only fire when .active is present */
#tv-shutdown.active .tv-bar--top   { animation: tvBarClose .85s .06s cubic-bezier(.22,.61,.36,1) forwards; }
#tv-shutdown.active .tv-bar--bottom { animation: tvBarClose .85s .06s cubic-bezier(.22,.61,.36,1) forwards; }
#tv-shutdown.active .tv-line        { animation: tvLine 1.1s .86s ease-out forwards; }
@keyframes tvBarClose {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
@keyframes tvLine {
  0%   { opacity: 1;  height: 3px; }
  45%  { opacity: .85; height: 1.5px; }
  80%  { opacity: .4;  height: 1px; }
  100% { opacity: 0;   height: 0; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  :root { --card-w: 250px; --card-h: 360px; }
  .map-hud { padding: 8px 18px; }
  .modal-question-panel { padding: 28px 20px; }
  .card-modal-panel { padding: 20px 12px 16px; }
  .completion-panel { padding: 32px 22px; }
}

/* ══ Memory Atlas Polish ═════════════════════════════════════════════════ */

/* Atmosphere canvas — background layer, full screen, behind map shell */
.map-atmo-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none; display: block;
}

/* Memory progress counter in map header */
.mm-progress-counter {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: clamp(7px, .74vw, 9px);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(198,160,86,.44);
  margin: 5px 0 0;
  transition: color .5s, text-shadow .5s;
}
.mm-progress-counter.mm-all-found {
  color: rgba(198,160,86,.88);
  text-shadow: 0 0 16px rgba(198,160,86,.32);
}

/* Node hover tooltip — museum label style */
.mp-tooltip {
  position: absolute;
  bottom: calc(100% + 13px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  white-space: nowrap;
  pointer-events: none;
  background: rgba(4,2,14,.94);
  border: 1px solid rgba(198,160,86,.32);
  border-radius: 7px;
  padding: 5px 13px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 12;
  box-shadow: 0 5px 20px rgba(0,0,0,.64), 0 0 0 1px rgba(198,160,86,.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.mp-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(198,160,86,.32);
  pointer-events: none;
}
.mp-tooltip-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11.5px;
  letter-spacing: .05em;
  color: rgba(255,244,160,.92);
}
.mp-tooltip-loc {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 7.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(198,160,86,.54);
}
.map-pin:hover .mp-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Visited pin — warmer glow, calmer pulse, richer gold center */
@keyframes mpCoreBreath {
  0%, 100% {
    box-shadow: 0 0 0 1.5px rgba(198,160,86,.44),
      0 0 8px  rgba(198,160,86,.72),
      0 0 18px rgba(198,160,86,.36),
      0 0 32px rgba(198,160,86,.12),
      0 2px 5px rgba(0,0,0,.65);
  }
  50% {
    box-shadow: 0 0 0 2px   rgba(245,210,110,.64),
      0 0 16px rgba(240,200,100,.90),
      0 0 34px rgba(198,160,86,.52),
      0 0 58px rgba(198,160,86,.22),
      0 2px 5px rgba(0,0,0,.65);
  }
}
.map-pin.pin-visited .mp-core {
  background: radial-gradient(circle at 35% 30%, #fff9e6 0%, #ecc868 42%, #a07828 100%);
  animation: mpCoreBreath 4.4s ease-in-out infinite;
}
.map-pin.pin-visited .mp-ring {
  border-color: rgba(240,200,100,.70);
  box-shadow: 0 0 16px rgba(198,160,86,.30), inset 0 0 10px rgba(198,160,86,.12);
}
.map-pin.pin-visited .mp-inner { border-color: rgba(240,200,100,.80); }
.map-pin.pin-visited .mp-ripple {
  border-color: rgba(198,160,86,.40);
  animation-duration: 5.4s;
}

/* Opening pulse burst on pin click — fires before modal opens */
@keyframes mpOpenBurst {
  0%   { transform: scale(1);   opacity: .86; }
  100% { transform: scale(4.6); opacity: 0;   }
}
.map-pin.pin-opening::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,240,130,.80);
  animation: mpOpenBurst .60s ease-out forwards;
  pointer-events: none;
  z-index: 12;
}

/* Close pulse — gentle outward ring when modal closes */
@keyframes mpClosePulse {
  0%   { transform: scale(1);   opacity: .58; }
  100% { transform: scale(3.2); opacity: 0;   }
}
.map-pin.pin-close-pulse::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(198,160,86,.62);
  animation: mpClosePulse .76s ease-out forwards;
  pointer-events: none;
  z-index: 12;
}

/* .mm-continue-btn is unconditionally gold now via the shared .gold-cta
   class, so the old "gold only once all memories are visited" reward state
   is gone — js/memory-map.js still toggles .mm-all-visited (harmless, just
   an inert class with no matching rule left) rather than touching that
   file for a purely cosmetic cleanup. */

/* Photo crossfade — slight scale-out on fade */
.mg-media {
  transition: opacity .26s ease, transform .26s ease;
}
.mg-media.mg-fading {
  transform: scale(.968);
}

/* Map intro — pins start hidden, stagger-revealed via JS */
.map-pin.pin-intro-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .map-atmo-canvas                   { display: none !important; }
  .mp-tooltip                        { transition: opacity .10s ease !important; transform: translateX(-50%) !important; }
  .map-pin.pin-visited .mp-core      { animation: none !important; }
  .map-pin.pin-opening::before       { display: none !important; }
  .map-pin.pin-close-pulse::after    { display: none !important; }
  .mg-media                          { transition: opacity .18s ease !important; transform: none !important; }
  .mg-media.mg-fading                { transform: none !important; }
  .map-pin.pin-intro-hidden          { opacity: 1 !important; pointer-events: auto !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE CARD COLLECTION (<=480px) — iPhone-class phones only.
   Desktop card sizing, the fanned 3D carousel and modal composition above
   are untouched; everything here is scoped to this single breakpoint.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── 1/2/3. Real responsive card size, content-driven, not ratio-locked.
     Width and height are set independently (per corrective-pass spec) —
     height no longer derives from a fixed aspect ratio, so the card can be
     genuinely taller without forcing the width to grow with it.
     .illustration-area is a % of --card-h via calc(), so "restore the
     illustration" and "make the card taller" are the SAME lever now instead
     of fighting each other. */
  :root {
    --card-w: clamp(258px, 80vw, 320px);
    --card-h: clamp(430px, 62svh, 560px);
  }
  .carousel-track { height: calc(var(--card-h) + 26px); }

  /* ── Remove nav arrows — swipe replaces them, no reserved space ───────── */
  .carousel-btn { display: none !important; }

  /* ── Premium, fast slide transition (transforms + opacity only) ───────── */
  .carousel-item {
    transition: transform .34s cubic-bezier(.22, .61, .36, 1), opacity .34s ease;
    /* Explicit (the default anyway) so this element is never treated as a
       3D participant — it only ever gets translate3d/scale, never rotateY.
       .scene (one level in) is the sole place perspective/preserve-3d live;
       keeping this ancestor plainly "flat" isolates that local 3D context
       from the continuous per-frame transform changes happening here during
       a drag, instead of leaving it to engine-default inference. */
    transform-style: flat;
    -webkit-transform-style: flat;
  }

  /* ── Card internal layout — illustration gets ~40% of the card (the
     "upper 38–45%" target), text gets real room instead of a squeezed
     strip. Sizes were checked against the longest real Epic/Memory copy
     (4 desc lines + highlight) at the clamp's SMALLEST card-h. ── */
  .card-front            { padding: 12px; gap: 7px; }
  .illustration-area     { height: calc(var(--card-h) * 0.40); }
  .card-header           { gap: 8px; }
  .card-title-area       { height: 22px; }
  .cost-gem              { width: 25px; height: 25px; font-size: .58rem; }
  .card-title-text       { font-size: .74rem; letter-spacing: .12em; }
  .card-title-text--sm   { font-size: .60rem; letter-spacing: .08em; }
  .description-area      { padding: 9px 11px; gap: 3px; }
  .card-desc-text        { font-size: .68rem; line-height: 1.42; padding: 1px 0; }
  .rarity-badge          { font-size: .52rem; padding: 3px 8px; }
  .stat-orbs             { gap: 5px; }
  .stat-orb              { width: 18px; height: 18px; }
  .stat-orb span         { width: 6px; height: 6px; }
  .corner                { width: 26px; height: 26px; }
  .suit-echo             { font-size: .8rem; }
  .suit-echo--tl         { top: 36px; left: 10px; }
  .suit-echo--br         { bottom: 36px; right: 10px; }
  .card-back-inner       { padding: 18px; gap: 12px; }

  /* ── Modal budget: dvh instead of vh, so the taller card gets the real
     iOS Safari visible height rather than the pre-toolbar-collapse height
     (using the static 92vh here could clip the bottom of a tall card behind
     Safari's chrome). Header/hint made a touch more compact to give the
     card more of that budget. ── */
  .card-modal-panel   { max-height: 94dvh; padding: 22px 12px 14px; }
  .card-modal-header  { padding-right: 82px; margin-bottom: 5px; }
  .card-modal-title   { font-size: clamp(.72rem, 3.6vw, .92rem); letter-spacing: .1em; }
  .card-modal-badge   { font-size: .46rem; padding: 3px 8px; }
  .card-modal-close   {
    top: 14px; right: 14px;
    min-width: 44px; min-height: 40px;
    padding: 9px 15px;
    display: flex; align-items: center; justify-content: center;
  }
  .card-modal-hint        { display: none; }
  .card-modal-hint-mobile {
    display: block;
    font-size: .58rem; letter-spacing: .05em; color: #4a4a6e;
    text-transform: none; text-align: center; margin-bottom: 2px; flex-shrink: 0;
  }
  .carousel-dots { margin-top: 20px; }

  /* ── 7. Touch manners: no text/callout selection, no image ghost-drag,
     let the page still pan vertically while our JS owns horizontal drag ── */
  .carousel-track, .scene {
    touch-action: pan-y;
  }
  .scene, .card-face {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
  }
  .card-illustration {
    -webkit-user-drag: none;
    pointer-events: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE MEMORY ATLAS (<=480px) — map drag affordance + photo modal.
   The portrait .map-shell sizing lives in the existing @media(max-width:600px)
   block above (edited in place, alongside the map-frame corner brackets it
   already overrode). Desktop map/modal composition is untouched.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── One-time "drag to explore" affordance, faded out by JS on first
     pointerdown on the map. Lives inside .map-frame (decorative, pointer-
     events:none already), so it never steals a touch from the map itself. ── */
  .map-drag-hint {
    display: block;
    position: absolute;
    left: 50%; bottom: 14px;
    transform: translateX(-50%);
    z-index: 5;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 9.5px;
    letter-spacing: .1em;
    color: rgba(255,244,214,.82);
    background: rgba(5,4,18,.56);
    border: 1px solid rgba(198,160,86,.30);
    border-radius: 20px;
    padding: 6px 14px;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1;
    transition: opacity .5s ease;
  }
  .map-drag-hint--hidden { opacity: 0; }

  /* ── 5. Remove photo nav arrows — swipe replaces them, flex reclaims
     the space automatically since .mg-frame-wrap is flex:1 ── */
  .mg-nav { display: none !important; }

  /* ── 6. Direction-aware slide to go with the existing crossfade. JS sets
     --mg-dir to -1/1 on #mg-media right before adding .mg-fading; desktop
     never sets that variable so its plain scale-fade (from the shared rule
     above) is unaffected. ── */
  .mg-media {
    transition: opacity .24s ease, transform .24s ease;
  }
  .mg-media.mg-fading {
    transform: translateX(calc(var(--mg-dir, 0) * -22px)) scale(.96);
  }

  /* ── 7. Counter: existing warm gold accent, a bit more contrast, still
     modest in size ── */
  .mg-counter {
    color: rgba(214,178,96,.92);
    font-size: 10px;
  }

  /* ── 8. Blue-square image fade-in (also applies on desktop via the
     unscoped rule below) + tappable close button + dvh safe-area ── */
  .mg-panel { max-height: 90dvh; }
  .mg-close {
    min-width: 44px;
    min-height: 40px;
    display: flex; align-items: center; justify-content: center;
  }
}

/* ── Image fade-in on load (fixes the abrupt pop-in / blue-square-adjacent
   flash) — applies on both desktop and mobile, per the actual bug fix. ── */
.mg-media img {
  opacity: 0;
  transition: opacity .28s ease;
}
.mg-media img.mg-img-ready {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   CORRECTIVE PASS — iPhone 13 (<=480px)
   1) Memory Atlas: bigger/taller map, header pulled up out of the wasted
      centered empty space above it.
   2) Question modal: the actual iOS zoom-on-focus fix (input font-size),
      plus a keyboard-open safety net.
   Desktop is untouched — nothing here has a desktop-width counterpart to
   override; these are new, more specific rules layered on top.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Atlas: bigger, taller, dominant — and pulled toward the top instead
     of dead-centered with the continue button, which was wasting space
     above the title. .mm-continue-btn stays position:absolute (untouched),
     so it isn't part of this flex flow and keeps its own clearance. ── */
  #screen-map {
    justify-content: flex-start;
    padding-top: clamp(30px, 6svh, 50px);
    gap: 8px;
  }
  .map-shell {
    width: 92vw;
    height: 64svh;
  }

  /* ── Question modal input: this is the actual fix for iOS Safari's
     zoom-on-focus — it triggers whenever a focused input's computed
     font-size is under 16px, and the desktop rule here was 13–15px
     (clamp(13px, 1.3vw, 15px), resolving to its 13px floor on a 390px
     viewport). Desktop keeps that smaller size; only this override changes. ── */
  #modal-question .mq-text-input {
    font-size: 16px;
  }
  /* Safety net so scrollIntoView() has a scrollable ancestor to work with
     if the keyboard would otherwise cover the question/verify button —
     desktop never triggers the focus handler that uses this. */
  .modal-overlay {
    overflow-y: auto;
  }
}

/* The Atlas continue button's gold treatment now comes from the shared
   .gold-cta system (universal, not mobile-scoped — see near the end of
   this file), which is also why it's no longer only gold on mobile. */

/* ══════════════════════════════════════════════════════════════════════════
   SHARED PREMIUM GOLD BUTTON — .gold-cta
   One visual system for every primary call-to-action on the site:
     • Hero "Başla"                          (.hero-btn.gold-cta)
     • Question success "Koleksiyonu Gör"    (.mq-continue-btn.gold-cta,
                                                all four rarities — one DOM
                                                element, text set by JS)
     • Completion modal "Sıradaki Bölüme Geç" (.comp-btn--primary.gold-cta)
     • Completed Memory Core "Sıradaki Bölüme Geç"
                                              (.mc2-btn-primary.gold-cta)
     • Memory Atlas "Hikâyeyi Tamamla"        (.mm-continue-btn.gold-cta)

   Each button keeps its OWN size/padding/position/typography/layout rules —
   this class only supplies color, border, glow and the shimmer sweep, and
   deliberately never sets `position`, `width`, `padding` or `transform`, so
   it can never fight a button's real layout, centering or press-animation.
   Every button already declares its own `position: relative` (or `absolute`
   for the Atlas button) and `overflow: hidden` — required for the
   pseudo-elements below to clip to that button's own box.

   Applies on mobile AND desktop identically; nothing here is media-queried.
═══════════════════════════════════════════════════════════════════════════ */
.gold-cta {
  color: rgba(255, 248, 222, .96);
  border-color: rgba(226, 186, 108, .68);
  background:
    linear-gradient(160deg, rgba(255,236,180,.16) 0%, rgba(198,160,86,.10) 45%, rgba(120,90,40,.14) 100%),
    rgba(20, 16, 8, .55);
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.30),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 4px 18px rgba(0,0,0,.30),
    0 0 22px rgba(198,160,86,.20);
}
/* Glossy highlight across the upper portion — a static gradient, no cost */
.gold-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.20) 0%, transparent 55%);
  pointer-events: none;
}
/* Slow shimmer sweep — translateX-only, clipped by the button's own
   overflow:hidden, so this never repaints anything, just recomposites a
   layer. Only animates while its screen/modal is actually .active, and is
   skipped entirely under reduced-motion. */
.gold-cta::after {
  content: '';
  position: absolute;
  top: -20%; bottom: -20%;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,250,224,.34) 50%, transparent 100%);
  transform: translateX(0);
  pointer-events: none;
}
:is(.game-screen.active, .modal-overlay.active) .gold-cta::after {
  animation: goldCtaShimmer 4.6s ease-in-out infinite;
}
@keyframes goldCtaShimmer {
  0%, 15%   { transform: translateX(0); }
  55%, 100% { transform: translateX(340%); }
}
.gold-cta:hover {
  background:
    linear-gradient(160deg, rgba(255,236,180,.22) 0%, rgba(198,160,86,.14) 45%, rgba(120,90,40,.18) 100%),
    rgba(24, 19, 10, .55);
  border-color: rgba(226, 186, 108, .92);
  color: rgba(255, 252, 235, 1);
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.34),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 4px 18px rgba(0,0,0,.30),
    0 0 30px rgba(198,160,86,.32);
}
/* Deliberately no `transform` here — each button's own :active rule already
   has the right press motion (some need translateX(-50%)/translateY to
   preserve centering); this only unifies the press COLOR across all five. */
.gold-cta:active {
  background:
    linear-gradient(160deg, rgba(255,230,170,.26) 0%, rgba(198,160,86,.18) 45%, rgba(110,82,36,.22) 100%),
    rgba(16, 13, 7, .60);
}
@media (prefers-reduced-motion: reduce) {
  .gold-cta::after { animation: none !important; }
}

/* The question-success button sits behind an ID-scoped selector
   (#modal-question .mq-continue-btn, specificity 1-1-0) which otherwise
   outranks the plain .gold-cta class — matching that specificity here
   (1-2-0) is what lets the shared gold treatment actually win. */
#modal-question .mq-continue-btn.gold-cta {
  color: rgba(255, 248, 222, .96);
  background:
    linear-gradient(160deg, rgba(255,236,180,.16) 0%, rgba(198,160,86,.10) 45%, rgba(120,90,40,.14) 100%),
    rgba(20, 16, 8, .55);
  border-color: rgba(226, 186, 108, .68);
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.30),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 4px 18px rgba(0,0,0,.30),
    0 0 22px rgba(198,160,86,.20);
}
#modal-question .mq-continue-btn.gold-cta:hover {
  color: rgba(255, 252, 235, 1);
  background:
    linear-gradient(160deg, rgba(255,236,180,.22) 0%, rgba(198,160,86,.14) 45%, rgba(120,90,40,.18) 100%),
    rgba(24, 19, 10, .55);
  border-color: rgba(226, 186, 108, .92);
  box-shadow:
    inset 0 1px 0 rgba(255,244,214,.34),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 4px 18px rgba(0,0,0,.30),
    0 0 30px rgba(198,160,86,.32);
}
#modal-question .mq-continue-btn.gold-cta:active {
  background:
    linear-gradient(160deg, rgba(255,230,170,.26) 0%, rgba(198,160,86,.18) 45%, rgba(110,82,36,.22) 100%),
    rgba(16, 13, 7, .60);
}

/* Redundant collection-inspection button on the COMPLETED Memory Core
   screen — the completion modal already offers "Kartları İncele", so this
   footer only needs its one primary action once all four are done.
   .mc2-footer is a flex row with a gap, so removing this from layout
   (rather than just hiding visually) closes the gap instead of leaving a
   blank slot next to the remaining button. */
#btn-l1-collection {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD FLIP — mobile/touch hard guarantee against front-face bleed
   The structural CSS above (.card-face backface-visibility:hidden + webkit
   prefix, .card-flipper preserve-3d, front at rotateY(0), back at
   rotateY(180)) is already spec-correct. iOS Safari's WebKit compositor can
   still, under some conditions, paint a rotated-away 3D face anyway — a
   known engine-level inconsistency, not something fixable by CSS 3D
   properties alone. `visibility` is a completely different rendering path
   (it removes an element from paint entirely, independent of any 3D
   transform math), so toggling it is a hard guarantee regardless of what
   the compositor does with the rotation.

   The swap uses `transition-delay` at exactly half of the flipper's .75s
   rotation, symmetrically in both directions, so a face only disappears
   once the OTHER face has already rotated past the edge-on midpoint —
   never a flash, never both hidden, never both visible.
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .card-front {
    visibility: visible;
    transition: visibility 0s linear .375s;
  }
  .card-back {
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear .375s;
  }
  .scene.flipped .card-front {
    visibility: hidden;
    pointer-events: none;
  }
  .scene.flipped .card-back {
    visibility: visible;
    pointer-events: auto;
  }
}