:root {
  --bg: #f3ecdf;
  --bg-deep: #eadac2;
  --surface: rgba(255, 250, 240, 0.78);
  --surface-strong: rgba(255, 248, 234, 0.94);
  --ink: #1e1b18;
  --muted: #5d534a;
  --accent: #8f3d2f;
  --accent-soft: #d77b56;
  --line: rgba(77, 56, 41, 0.16);
  --shadow: 0 24px 70px rgba(69, 39, 20, 0.14);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(255, 216, 163, 0.75), transparent 35%),
    radial-gradient(circle at bottom right, rgba(196, 227, 214, 0.75), transparent 30%),
    linear-gradient(160deg, var(--bg), var(--bg-deep));
}

.landing-page {
  background:
    radial-gradient(circle at 8% 10%, rgba(88, 43, 17, 0.26), transparent 14%),
    radial-gradient(circle at 92% 12%, rgba(102, 48, 18, 0.22), transparent 16%),
    radial-gradient(circle at 10% 88%, rgba(94, 44, 17, 0.24), transparent 18%),
    radial-gradient(circle at 88% 84%, rgba(84, 38, 14, 0.2), transparent 17%),
    radial-gradient(circle at 50% 0%, rgba(255, 240, 205, 0.18), transparent 26%),
    radial-gradient(circle at top left, rgba(255, 216, 163, 0.75), transparent 35%),
    radial-gradient(circle at bottom right, rgba(196, 227, 214, 0.75), transparent 30%),
    linear-gradient(160deg, #f1e0bf, #dfc393 54%, #c79a63);
}

.landing-page::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.46;
  background:
    radial-gradient(circle at 4% 8%, rgba(58, 23, 9, 0.85), transparent 8%),
    radial-gradient(circle at 96% 10%, rgba(64, 27, 11, 0.82), transparent 10%),
    radial-gradient(circle at 8% 94%, rgba(61, 24, 9, 0.78), transparent 11%),
    radial-gradient(circle at 94% 90%, rgba(66, 29, 12, 0.78), transparent 10%),
    radial-gradient(circle at 50% 102%, rgba(80, 36, 14, 0.42), transparent 14%);
  mix-blend-mode: multiply;
}

.landing-page.all-trails-complete {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 221, 132, 0.18), transparent 16%),
    radial-gradient(circle at 82% 22%, rgba(120, 175, 255, 0.18), transparent 18%),
    radial-gradient(circle at 20% 78%, rgba(133, 111, 255, 0.18), transparent 20%),
    radial-gradient(circle at 78% 80%, rgba(255, 200, 120, 0.16), transparent 18%),
    radial-gradient(circle at 50% 12%, rgba(255, 248, 213, 0.1), transparent 24%),
    linear-gradient(180deg, #071332 0%, #0d2257 48%, #16316b 100%);
}

.landing-page.all-trails-complete::after {
  opacity: 0.72;
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 229, 149, 0.18), transparent 2%),
    radial-gradient(circle at 26% 28%, rgba(255, 239, 188, 0.24), transparent 1.8%),
    radial-gradient(circle at 38% 11%, rgba(255, 226, 128, 0.16), transparent 1.6%),
    radial-gradient(circle at 54% 18%, rgba(255, 244, 204, 0.24), transparent 1.8%),
    radial-gradient(circle at 72% 10%, rgba(255, 226, 128, 0.18), transparent 1.8%),
    radial-gradient(circle at 84% 24%, rgba(255, 244, 204, 0.22), transparent 1.7%),
    radial-gradient(circle at 92% 16%, rgba(255, 226, 128, 0.16), transparent 1.4%),
    radial-gradient(circle at 18% 56%, rgba(255, 239, 188, 0.16), transparent 1.6%),
    radial-gradient(circle at 34% 62%, rgba(255, 226, 128, 0.18), transparent 1.5%),
    radial-gradient(circle at 68% 58%, rgba(255, 244, 204, 0.2), transparent 1.7%),
    radial-gradient(circle at 86% 70%, rgba(255, 226, 128, 0.18), transparent 1.6%),
    radial-gradient(circle at 48% 82%, rgba(255, 239, 188, 0.18), transparent 1.7%),
    radial-gradient(circle at 8% 8%, rgba(3, 10, 29, 0.82), transparent 10%),
    radial-gradient(circle at 94% 10%, rgba(4, 12, 34, 0.8), transparent 10%),
    radial-gradient(circle at 10% 94%, rgba(4, 12, 34, 0.78), transparent 12%),
    radial-gradient(circle at 92% 90%, rgba(3, 10, 29, 0.8), transparent 11%);
  mix-blend-mode: screen;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 92%);
}

a {
  color: inherit;
  text-decoration: none;
}

.shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.landing-page .shell {
  padding-top: 4rem;
  position: relative;
  z-index: 1;
}

.landing-page.all-trails-complete h1,
.landing-page.all-trails-complete .hero-copy,
.landing-page.all-trails-complete .hero-copy b,
.landing-page.all-trails-complete .hero-copy i {
  color: #f4dda0;
}

.hero,
.trail-layout,
.trail-card,
.panel,
.step-card,
.completion-card {
  backdrop-filter: blur(14px);
}

.hero {
  max-width: none;
  padding: 2rem 0 2.5rem;
}

.completion-banner {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  text-align: center;
  border: 2px solid rgba(255, 221, 127, 0.6);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 231, 162, 0.5), transparent 55%),
    linear-gradient(160deg, rgba(10, 26, 68, 0.92), rgba(17, 40, 100, 0.9));
  box-shadow:
    0 18px 40px rgba(10, 23, 59, 0.24),
    inset 0 1px 0 rgba(255, 241, 191, 0.24);
}

.completion-banner h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: #f4dda0;
}

.eyebrow,
.card-kicker,
.meta-label {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  line-height: 0.95;
}

h1 {
  font-size: clamp(3.4rem, 8vw, 6.4rem);
  margin-top: 0.6rem;
}

.hero-copy,
.card-link,
.trail-card p,
.panel p,
.step-card p,
.feedback,
.completion-card p,
.input-help {
  color: var(--muted);
  line-height: 1.65;
}

[data-trail-intro] {
  white-space: pre-line;
}

.trail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.homepage-support-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.homepage-support-button,
a.homepage-support-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  padding: 1rem 1.4rem;
  text-align: center;
  font-family: "VT323", monospace;
  font-size: 1.55rem;
  letter-spacing: 0.03em;
  color: #b14f2c !important;
  background: linear-gradient(180deg, #ffe47c, #f2c64d);
  box-shadow: 0 14px 34px rgba(73, 31, 15, 0.16);
  max-width: min(100%, 360px);
}

.homepage-schedule-button,
a.homepage-schedule-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  padding: 1rem 1.4rem;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #17366f !important;
  background: linear-gradient(180deg, #f3f5fb, #cfd6e4);
  box-shadow: 0 14px 34px rgba(28, 47, 83, 0.16);
  max-width: min(100%, 360px);
  margin-left: auto;
}

.final-darcana-wrap {
  display: flex;
  grid-column: 1 / -1;
  justify-content: center;
  margin: 0.15rem 0 0.35rem;
}

.final-darcana-link {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: min(420px, 92vw);
  padding: 1.15rem 1.1rem 1.35rem;
  text-align: center;
  border: 1px solid rgba(255, 221, 127, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 218, 95, 0.14), transparent 20%),
    radial-gradient(circle at 84% 18%, rgba(255, 218, 95, 0.12), transparent 18%),
    linear-gradient(160deg, rgba(7, 19, 50, 0.96), rgba(17, 40, 100, 0.92) 52%, rgba(10, 26, 68, 0.96));
  box-shadow:
    0 24px 60px rgba(10, 23, 59, 0.32),
    inset 0 1px 0 rgba(255, 241, 191, 0.08);
  overflow: hidden;
}

.final-darcana-aura {
  position: absolute;
  inset: 4% 12% 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 227, 108, 0.92) 0%, rgba(255, 210, 68, 0.52) 42%, rgba(255, 210, 68, 0) 76%);
  filter: blur(24px);
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: final-darcana-pulse 3.2s ease-in-out infinite;
}

.final-darcana-image {
  position: relative;
  z-index: 1;
  display: block;
  width: min(320px, 72vw);
  height: auto;
  filter: drop-shadow(0 0 34px rgba(255, 218, 95, 0.72)) drop-shadow(0 18px 28px rgba(69, 39, 20, 0.2));
}

.final-darcana-caption {
  position: relative;
  z-index: 1;
  color: #f4dda0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
}

.final-darcana-difficulty {
  position: relative;
  z-index: 1;
  color: #f4dda0;
}

.final-darcana-link.trail-complete .trail-stamp {
  top: auto;
  bottom: 1rem;
  right: 1rem;
  color: #f4dda0;
  background: rgba(10, 26, 68, 0.9);
}

@keyframes final-darcana-pulse {
  0% {
    transform: scale(0.94) rotate(0deg);
    opacity: 0.72;
  }

  35% {
    transform: scale(1.05) rotate(8deg);
    opacity: 0.95;
  }

  70% {
    transform: scale(1.12) rotate(-8deg);
    opacity: 0.82;
  }

  100% {
    transform: scale(0.94) rotate(0deg);
    opacity: 0.72;
  }
}

.homepage-fireworks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.homepage-fireworks .firework {
  position: absolute;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  background: rgba(255, 236, 161, 0.95);
  box-shadow:
    0 -84px 0 0 rgba(255, 209, 102, 0.95),
    60px -60px 0 0 rgba(255, 126, 182, 0.9),
    84px 0 0 0 rgba(118, 223, 255, 0.95),
    60px 60px 0 0 rgba(181, 255, 147, 0.9),
    0 84px 0 0 rgba(255, 240, 139, 0.92),
    -60px 60px 0 0 rgba(197, 139, 255, 0.9),
    -84px 0 0 0 rgba(255, 166, 107, 0.95),
    -60px -60px 0 0 rgba(255, 223, 127, 0.9);
  filter: drop-shadow(0 0 20px rgba(255, 231, 162, 0.8));
  animation: homepage-firework-burst 2.4s ease-out infinite;
}

.homepage-fireworks .firework::before {
  content: "";
  position: absolute;
  inset: -0.6rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 247, 197, 0.9) 0%, rgba(255, 247, 197, 0) 72%);
}

.homepage-fireworks .firework-one {
  top: 18%;
  left: 16%;
  animation-delay: 0s;
}

.homepage-fireworks .firework-two {
  top: 24%;
  left: 76%;
  animation-delay: 0.7s;
}

.homepage-fireworks .firework-three {
  top: 50%;
  left: 30%;
  animation-delay: 1.4s;
}

.homepage-fireworks .firework-four {
  top: 58%;
  left: 84%;
  animation-delay: 2.1s;
}

.homepage-fireworks .firework-five {
  top: 74%;
  left: 22%;
  animation-delay: 2.8s;
}

.homepage-fireworks .firework-six {
  top: 82%;
  left: 68%;
  animation-delay: 1.1s;
}

@keyframes homepage-firework-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.32);
  }

  45% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(0.92);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.35);
  }
}

.trail-card {
  position: relative;
  overflow: hidden;
  min-height: 270px;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 251, 245, 0.75), rgba(255, 247, 238, 0.96));
  box-shadow: var(--shadow);
  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.trail-card:hover,
.trail-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 28px 80px rgba(69, 39, 20, 0.18);
  border-color: rgba(143, 61, 47, 0.3);
}

.trail-card::after {
  content: "";
  position: absolute;
  inset: auto -18% -16% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  filter: blur(4px);
}

.trail-card h2 {
  font-size: clamp(2.1rem, 4vw, 3rem);
  margin: 0.55rem 0 0.8rem;
}

.trail-difficulty,
.final-darcana-difficulty {
  display: block;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.2;
}

.difficulty-emoji {
  display: inline-block;
  font-size: 3em;
  line-height: 0.8;
  vertical-align: middle;
  margin-left: 0.15em;
}

.trail-card .card-link {
  display: block;
  margin-top: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.trail-card.dawn .trail-difficulty,
.trail-card.dawn .card-link {
  font-family: "Press Start 2P", monospace;
}

.trail-card.circus .trail-difficulty,
.trail-card.circus .card-link {
  font-family: "Comic Sans MS", "Marker Felt", "Trebuchet MS", cursive;
}

.trail-card.ember .trail-difficulty,
.trail-card.ember .card-link {
  font-family: "Cormorant Garamond", serif;
}

.trail-card.tide .trail-difficulty,
.trail-card.tide .card-link {
  font-family: "Copperplate", "Copperplate Gothic Bold", "Boucherie Block", "Chiller", "Creepster", serif;
}

.trail-stamp {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.45rem 0.75rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(12deg);
  opacity: 0.92;
}

.trail-card.trail-complete {
  box-shadow: 0 28px 88px rgba(69, 39, 20, 0.2);
}

.trail-card.ember.trail-complete .trail-stamp {
  color: #ffe49f;
  background: rgba(19, 29, 67, 0.82);
}

.trail-card.dawn.trail-complete .trail-stamp,
.trail-card.ember.trail-complete .trail-stamp,
.trail-card.tide.trail-complete .trail-stamp,
.trail-card.circus.trail-complete .trail-stamp {
  top: auto;
  bottom: 1rem;
  right: 1rem;
}

.trail-card.dawn {
  color: #9dffb0;
  background:
    radial-gradient(circle at top, rgba(84, 255, 138, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(3, 18, 10, 0.98), rgba(1, 6, 4, 0.98) 52%, rgba(2, 17, 9, 0.98));
  border-color: rgba(157, 255, 176, 0.22);
}

.trail-card.dawn h2 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  line-height: 1.25;
  margin-top: 0.9rem;
  color: #caffd3;
}

.trail-card.dawn::before {
  display: none;
}

.trail-card.dawn::after {
  display: none;
}

.trail-card.dawn p,
.trail-card.dawn .card-link,
.trail-card.dawn .trail-difficulty {
  color: rgba(157, 255, 176, 0.82);
}

.trail-card.circus {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.96) 0 10%, transparent 25%),
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.7) 0 8%, transparent 20%),
    linear-gradient(
      135deg,
      rgba(255, 199, 112, 0.95) 0%,
      rgba(255, 146, 205, 0.9) 16%,
      rgba(197, 139, 255, 0.9) 32%,
      rgba(118, 223, 255, 0.92) 50%,
      rgba(126, 255, 228, 0.9) 68%,
      rgba(181, 255, 147, 0.9) 82%,
      rgba(255, 223, 127, 0.95) 100%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08));
  color: #442434;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    0 28px 80px rgba(113, 125, 211, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.trail-card.circus::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.22) 0 8px,
      rgba(255, 255, 255, 0.03) 8px 16px
    ),
    radial-gradient(circle at 74% 24%, rgba(255, 255, 255, 0.44), transparent 0 14%),
    radial-gradient(circle at 18% 80%, rgba(255, 255, 255, 0.34), transparent 0 18%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.trail-card.circus h2 {
  font-family: "Comic Sans MS", "Marker Felt", "Trebuchet MS", cursive;
  letter-spacing: 0.02em;
  color: #5a2140;
}

.trail-card.circus .card-link {
  color: #52213b;
}

.trail-card.circus h2,
.trail-card.circus .card-link,
.trail-card.circus .trail-difficulty {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
}

.trail-card.circus p {
  color: rgba(82, 33, 59, 0.84);
}

.trail-card.circus .trail-difficulty {
  color: rgba(82, 33, 59, 0.84);
}

.trail-card.ember {
  color: #edf4ff;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.92) 0 1px, transparent 1.8px),
    radial-gradient(circle at 34% 68%, rgba(255, 255, 255, 0.78) 0 1.2px, transparent 2px),
    radial-gradient(circle at 78% 24%, rgba(255, 255, 255, 0.9) 0 1.1px, transparent 2px),
    radial-gradient(circle at 66% 56%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 86% 72%, rgba(255, 255, 255, 0.68) 0 1.3px, transparent 2px),
    radial-gradient(circle at 26% 30%, rgba(193, 132, 255, 0.28), transparent 24%),
    radial-gradient(circle at 72% 78%, rgba(170, 120, 255, 0.24), transparent 22%),
    radial-gradient(circle at top right, rgba(113, 145, 255, 0.36), transparent 34%),
    linear-gradient(145deg, rgba(15, 16, 58, 0.96), rgba(33, 27, 96, 0.92) 48%, rgba(10, 10, 42, 0.98));
}

.trail-card.ember p,
.trail-card.ember .card-link,
.trail-card.ember .trail-difficulty {
  color: rgba(237, 244, 255, 0.8);
}

.trail-card.ember::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 18%, rgba(244, 248, 255, 0.5), transparent 0 10%),
    radial-gradient(circle at 48% 40%, rgba(199, 130, 255, 0.16), transparent 20%),
    radial-gradient(circle at 14% 82%, rgba(102, 132, 241, 0.18), transparent 24%),
    radial-gradient(circle at 22% 30%, rgba(255, 255, 255, 0.92) 0 1.5px, transparent 2px),
    radial-gradient(circle at 46% 20%, rgba(255, 255, 255, 0.85) 0 1.4px, transparent 2px),
    radial-gradient(circle at 82% 42%, rgba(255, 255, 255, 0.82) 0 1.4px, transparent 2px),
    radial-gradient(circle at 58% 80%, rgba(255, 255, 255, 0.72) 0 1.4px, transparent 2px),
    radial-gradient(circle at 84% 18%, rgba(103, 128, 245, 0.92) 0 18px, transparent 19px),
    radial-gradient(circle at 84% 18%, rgba(19, 29, 67, 0.88) 0 11px, transparent 12px),
    radial-gradient(circle at 84% 18%, rgba(185, 207, 255, 0.85) 0 3px, transparent 4px);
  pointer-events: none;
}

.trail-card.tide {
  color: #f6ddd7;
  background:
    radial-gradient(circle at top left, rgba(163, 34, 34, 0.48), transparent 32%),
    radial-gradient(circle at 80% 80%, rgba(107, 12, 22, 0.44), transparent 28%),
    linear-gradient(145deg, rgba(20, 11, 14, 0.98), rgba(79, 15, 24, 0.94) 52%, rgba(12, 7, 9, 0.98));
  border-color: rgba(131, 78, 86, 0.24);
}

.trail-card.tide p,
.trail-card.tide .card-link,
.trail-card.tide .trail-difficulty {
  color: rgba(246, 221, 215, 0.82);
}

.trail-card.tide .card-link {
  font-family: "Copperplate", "Copperplate Gothic Bold", "Boucherie Block", "Chiller", "Creepster", serif;
}

.trail-card.tide h2 {
  font-family: "Copperplate", "Copperplate Gothic Bold", "Boucherie Block", "Chiller", "Creepster", serif;
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  letter-spacing: 0.04em;
  color: #ffb2b2;
}

.trail-card.tide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(188, 193, 201, 0.34) 0 2px,
      transparent 2px 38px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(188, 193, 201, 0.32) 0 2px,
      transparent 2px 64px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 32px,
      rgba(188, 193, 201, 0.3) 32px 34px,
      transparent 34px 96px
    );
  background-size: 100% 38px, 64px 76px, 96px 76px;
  background-position: 0 0, 0 0, 0 38px;
  pointer-events: none;
}

.trail-card.tide::after {
  display: none;
}


.trail-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1rem;
  border-radius: 32px;
  border: 1px solid var(--line);
  background: rgba(255, 249, 241, 0.48);
  box-shadow: var(--shadow);
}

.panel,
.step-card,
.completion-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: 0 16px 48px rgba(75, 48, 32, 0.09);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.5rem;
}

.trail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-weight: 700;
}

.trail-title {
  max-width: 760px;
}

.trail-title h1 {
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  margin-top: 0.5rem;
}

.progress-pip {
  min-width: 86px;
  padding: 0.65rem 0.9rem;
  border-radius: 999px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  text-align: center;
  font-weight: 700;
}

.progress-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(83, 62, 45, 0.1);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition: width 220ms ease;
}

.prompt-list,
.hint-list {
  padding-left: 1rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.prompt-list li + li,
.hint-list li + li {
  margin-top: 0.5rem;
}

.main-column {
  display: flex;
  flex-direction: column;
}

.step-card,
.completion-card {
  padding: 1.5rem;
}

.step-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.step-card h2,
.completion-card h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  margin-bottom: 0.85rem;
}

.answer-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.2rem;
}

label {
  font-weight: 700;
}

input,
textarea {
  width: 100%;
  border: 1px solid rgba(81, 60, 46, 0.22);
  border-radius: var(--radius-md);
  padding: 0.95rem 1rem;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 253, 249, 0.95);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,
textarea:focus {
  outline: 2px solid rgba(143, 61, 47, 0.22);
  border-color: rgba(143, 61, 47, 0.42);
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

button,
.ghost-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.9rem 1.2rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease, background 180ms ease;
}

button:hover,
button:focus-visible,
.ghost-button:hover,
.ghost-button:focus-visible {
  transform: translateY(-2px);
}

.primary-button {
  color: #fffaf7;
  background: linear-gradient(135deg, var(--accent), #ad5736);
}

.secondary-button,
.ghost-button {
  color: var(--ink);
  background: rgba(117, 89, 66, 0.1);
}

.feedback {
  min-height: 1.8rem;
  font-weight: 600;
}

.feedback[data-state="success"] {
  color: #2f6a3f;
}

.feedback[data-state="error"] {
  color: #a13521;
}

.trail-theme-dawn {
  --accent: #8c4c22;
  --accent-soft: #ca7f46;
}

.circus-page::before {
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
}

.circus-page {
  --bg: #fff4f8;
  --bg-deep: #eef9ff;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.88);
  --ink: #4b2342;
  --muted: rgba(86, 43, 73, 0.82);
  --line: rgba(255, 255, 255, 0.36);
  --shadow: 0 24px 70px rgba(114, 125, 211, 0.18);
  --accent: #a54573;
  --accent-soft: #5bc6df;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.95) 0 8%, transparent 22%),
    radial-gradient(circle at 82% 14%, rgba(255, 255, 255, 0.78) 0 7%, transparent 19%),
    radial-gradient(circle at 74% 78%, rgba(255, 255, 255, 0.42) 0 10%, transparent 26%),
    linear-gradient(
      115deg,
      rgba(255, 199, 112, 0.94) 0%,
      rgba(255, 146, 205, 0.9) 16%,
      rgba(197, 139, 255, 0.9) 32%,
      rgba(118, 223, 255, 0.92) 50%,
      rgba(126, 255, 228, 0.9) 68%,
      rgba(181, 255, 147, 0.9) 82%,
      rgba(255, 223, 127, 0.94) 100%
    );
  font-family: "Comic Sans MS", "Marker Felt", "Trebuchet MS", cursive;
}

.technical-support-page {
  --bg: #f2d790;
  --bg-deep: #d56b3e;
  --surface: rgba(246, 233, 190, 0.82);
  --surface-strong: rgba(247, 239, 205, 0.95);
  --ink: #4b2a1d;
  --muted: #694833;
  --line: rgba(92, 60, 36, 0.24);
  --shadow: 0 22px 56px rgba(96, 62, 31, 0.18);
  --accent: #b14f2c;
  --accent-soft: #6c8150;
  background:
    radial-gradient(circle at 14% 16%, rgba(250, 239, 180, 0.62), transparent 18%),
    radial-gradient(circle at 84% 20%, rgba(145, 164, 92, 0.28), transparent 22%),
    radial-gradient(circle at 76% 78%, rgba(103, 140, 129, 0.22), transparent 20%),
    linear-gradient(160deg, #f2d790, #e6a85c 42%, #cf6b3b 100%);
}

.technical-support-layout {
  grid-template-columns: minmax(0, 1fr);
}

.technical-support-card {
  max-width: 900px;
  margin: 0 auto;
  gap: 1.4rem;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(247, 239, 205, 0.96), rgba(234, 205, 146, 0.92));
  border: 1px solid rgba(122, 86, 48, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 223, 0.44),
    0 18px 46px rgba(95, 60, 29, 0.16);
}

.technical-support-video-frame {
  padding: 0;
  border-radius: 26px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.technical-support-video {
  display: block;
  width: min(100%, 720px);
  margin: 0 auto;
  border-radius: 20px;
  background: #130d0a;
}

.technical-support-copy {
  max-width: 720px;
  margin: 0 auto;
}

.technical-support-link {
  color: #8a3d21;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.technical-support-page .back-link {
  color: #b14f2c;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.technical-support-page .final-return-button,
.technical-support-page .galaxy-return-button {
  color: #b14f2c;
  background: linear-gradient(180deg, #ffe47c, #f2c64d);
}

.technical-support-page .final-return-button::after,
.technical-support-page .galaxy-return-button::after {
  display: none;
}

.reception-page {
  --bg: #d8dde8;
  --bg-deep: #b7c1d6;
  --surface: rgba(244, 247, 252, 0.78);
  --surface-strong: rgba(248, 250, 255, 0.95);
  --ink: #17366f;
  --muted: #27457a;
  --line: rgba(35, 63, 116, 0.2);
  --shadow: 0 22px 56px rgba(27, 44, 78, 0.18);
  --accent: #17366f;
  --accent-soft: #748aa8;
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.48), transparent 18%),
    radial-gradient(circle at 84% 16%, rgba(255, 255, 255, 0.38), transparent 20%),
    linear-gradient(160deg, #eef2f8, #d3dae7 46%, #b8c3d8 100%);
}

.reception-layout {
  grid-template-columns: minmax(0, 1fr);
}

.reception-card {
  max-width: 880px;
  margin: 0 auto;
  background:
    linear-gradient(180deg, rgba(248, 250, 255, 0.96), rgba(223, 230, 242, 0.92));
  border: 1px solid rgba(41, 69, 124, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 20px 48px rgba(29, 47, 82, 0.14);
}

.reception-page .back-link {
  color: #17366f;
  background: transparent;
  box-shadow: none;
  padding: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  font-weight: 700;
}

.reception-card h2 {
  color: #17366f;
  font-size: clamp(3rem, 6vw, 4.6rem);
}

.reception-video-frame {
  margin: 0 auto 1.75rem;
  width: 720px;
  max-width: 100%;
}

.reception-video {
  display: block;
  width: 720px;
  height: 405px;
  margin: 0 auto;
  border-radius: 20px;
  background: #0f1730;
  object-fit: cover;
}

.reception-date-label {
  margin: 0 0 0.8rem;
  color: #17366f;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.75rem;
  font-weight: 700;
}

.reception-schedule-list {
  margin: 1.25rem 0 0;
  padding-left: 1.35rem;
  color: #17366f;
  line-height: 1.85;
  font-size: 1.32rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
}

.reception-schedule-list li + li {
  margin-top: 0.45rem;
}

.reception-schedule-list b {
  color: #102a59;
}

.technical-support-vt323,
.technical-support-vt323 .step-card,
.technical-support-vt323 .technical-support-copy,
.technical-support-vt323 .feedback,
.technical-support-vt323 .primary-button,
.technical-support-vt323 .back-link {
  font-family: "VT323", monospace;
}

.technical-support-vt323 .step-card {
  font-size: 1.55rem;
}

.technical-support-vt323 h2 {
  font-family: "VT323", monospace;
  font-size: clamp(2.8rem, 7vw, 4.8rem);
  line-height: 1;
  letter-spacing: 0.03em;
}

.technical-support-vt323 .back-link,
.technical-support-vt323 .primary-button {
  font-size: 1.45rem;
  letter-spacing: 0.03em;
}

.circus-layout {
  background: rgba(255, 255, 255, 0.14);
}

.circus-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.58));
  border-color: rgba(255, 255, 255, 0.34);
}

.circus-card h2,
.circus-card h3,
.circus-card p,
.circus-card .input-help,
.circus-card .feedback,
.circus-card .meta-label,
.circus-card .step-meta,
.circus-card label {
  color: #ffffff;
}

.circus-choice-block {
  margin-top: 1.5rem;
}

.circus-choice-row {
  justify-content: flex-start;
}

.circus-gate-scene {
  margin-top: 1.6rem;
}

.circus-gate-highlight {
  color: #ffe65f !important;
}

.circus-gate-image img {
  width: 25%;
  max-width: 240px;
  margin: 0 auto;
}

.circus-page .prompt-image img[src*="circus-dirby-aethelred.png"] {
  width: 25%;
  max-width: 240px;
  margin: 0 auto;
}

.circus-page .prompt-image img[src*="circus-dance-of-furtune.png"] {
  width: 25%;
  max-width: 240px;
  margin: 0 auto;
}

.circus-dance-performer-image img {
  width: 25%;
  max-width: 240px;
  margin: 0 auto;
}

.circus-final-image img {
  width: 40%;
  max-width: 360px;
  margin: 0 auto;
}

.circus-yellow-accent {
  color: #ffe65f;
}

.circus-card .circus-yellow-accent,
.circus-card .circus-yellow-accent b,
.circus-card label.circus-yellow-accent {
  color: #ffe65f !important;
}

.circus-card a.circus-yellow-accent,
.circus-card a.circus-yellow-accent:visited {
  color: #ffe65f !important;
  text-decoration: underline;
}

.circus-section-label {
  font-size: 110%;
}

.circus-dance-begin {
  margin-top: 1.5rem;
}

.circus-entry-feedback {
  text-align: center;
  font-size: 1.08rem;
}

.circus-continue-button {
  border-radius: 20px;
  font-size: 2em;
  line-height: 1.2;
  padding: 1rem 1.4rem;
  text-align: center;
  color: #3f1d40;
  background:
    linear-gradient(
      115deg,
      rgba(255, 199, 112, 0.98) 0%,
      rgba(255, 146, 205, 0.96) 16%,
      rgba(197, 139, 255, 0.96) 32%,
      rgba(118, 223, 255, 0.98) 50%,
      rgba(126, 255, 228, 0.96) 68%,
      rgba(181, 255, 147, 0.96) 82%,
      rgba(255, 223, 127, 0.98) 100%
    );
  box-shadow:
    0 16px 34px rgba(116, 78, 177, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.circus-kirby-form {
  margin-top: 1.5rem;
}

.circus-kirby-form[data-solved="true"] {
  gap: 0.1rem;
}

.circus-kirby-form[data-solved="true"] .feedback {
  min-height: 0;
  margin: 0;
}

.circus-kirby-outro {
  margin-top: 0.2rem;
}

.circus-kirby-outro > p:first-child {
  margin-top: 0;
}

.circus-pet-outro {
  margin-top: 1.5rem;
}

.circus-inner-card {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.18);
}

.circus-page .hint-toggle {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.16);
}

.circus-page .hint-toggle summary {
  color: #ffe65f;
}

.circus-final-hints .hint-toggle {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
}

.circus-page .final-return-button {
  font-size: 2em;
  padding: 1rem 1.4rem;
  border-radius: 20px;
}

.final-darcana-page {
  --bg: #08163f;
  --bg-deep: #132a73;
  --surface: rgba(244, 228, 184, 0.82);
  --surface-strong: rgba(250, 239, 206, 0.94);
  --ink: #463114;
  --muted: rgba(70, 49, 20, 0.88);
  --line: rgba(126, 91, 33, 0.22);
  --shadow: 0 24px 70px rgba(86, 55, 14, 0.18);
  --accent: #9d6a10;
  --accent-soft: #e6bf67;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 218, 95, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 26%, rgba(255, 218, 95, 0.78) 0 1.5px, transparent 3px),
    radial-gradient(circle at 74% 16%, rgba(255, 218, 95, 0.92) 0 2px, transparent 3px),
    radial-gradient(circle at 81% 23%, rgba(255, 218, 95, 0.75) 0 1.5px, transparent 3px),
    radial-gradient(circle at 88% 74%, rgba(255, 218, 95, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 82%, rgba(255, 218, 95, 0.7) 0 1.5px, transparent 3px),
    radial-gradient(circle at 26% 78%, rgba(255, 218, 95, 0.88) 0 2px, transparent 3px),
    radial-gradient(circle at 20% 86%, rgba(255, 218, 95, 0.68) 0 1.5px, transparent 3px),
    radial-gradient(circle at 52% 10%, rgba(255, 218, 95, 0.82) 0 2px, transparent 3px),
    radial-gradient(circle at 55% 88%, rgba(255, 218, 95, 0.66) 0 1.5px, transparent 3px),
    radial-gradient(circle at 14% 18%, rgba(255, 231, 162, 0.08), transparent 12%),
    radial-gradient(circle at 82% 22%, rgba(255, 231, 162, 0.08), transparent 14%),
    radial-gradient(circle at 80% 78%, rgba(255, 231, 162, 0.08), transparent 12%),
    linear-gradient(160deg, #061332, #10265f 46%, #1f3f8f);
}

.final-darcana-page .race-layout {
  background: rgba(244, 228, 184, 0.34);
}

.final-darcana-page .galaxy-card {
  background:
    linear-gradient(180deg, rgba(255, 245, 216, 0.96), rgba(239, 221, 173, 0.92));
}

.final-darcana-page::before {
  opacity: 0.08;
  background-image:
    linear-gradient(rgba(255, 218, 95, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 218, 95, 0.08) 1px, transparent 1px);
}

.final-darcana-card {
  background:
    linear-gradient(180deg, rgba(255, 245, 216, 0.96), rgba(239, 221, 173, 0.92));
  border-color: rgba(154, 110, 38, 0.28);
  box-shadow:
    0 24px 70px rgba(86, 55, 14, 0.14),
    inset 0 1px 0 rgba(255, 252, 240, 0.54);
}

.final-darcana-page h1,
.final-darcana-page h2,
.final-darcana-page h3,
.final-darcana-page .back-link,
.final-darcana-page .progress-pip,
.final-darcana-page label {
  color: #5b4315;
}

.final-darcana-page .trail-title h1,
.final-darcana-page .trail-title .back-link,
.final-darcana-return-button {
  color: #f4dda0;
}

.final-darcana-card h2,
.final-darcana-card h3,
.final-darcana-card label,
.final-darcana-card .meta-label,
.final-darcana-card .step-meta,
.final-darcana-card .back-link,
.final-darcana-card .progress-pip {
  color: #18264f;
}

.final-darcana-card p,
.final-darcana-card .feedback,
.final-darcana-card .input-help,
.final-darcana-card .button-row + .feedback {
  color: #22376d;
}

.final-darcana-hints {
  margin-top: 1.25rem;
}

.final-darcana-hint-group + .final-darcana-hint-group {
  margin-top: 1.35rem;
}

.final-darcana-section-toggle > summary {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #18264f;
  background: rgba(255, 247, 227, 0.55);
}

.final-darcana-section-toggle > .hint-stack {
  padding: 0.8rem 0.85rem 0.2rem;
}

.final-darcana-page .hint-toggle {
  border: 2px solid rgba(24, 38, 79, 0.5);
  box-shadow: inset 0 0 0 1px rgba(12, 27, 67, 0.08);
}

.final-darcana-page .final-darcana-section-toggle {
  border-color: rgba(24, 38, 79, 0.7);
}

.final-darcana-page .hint-stack .hint-toggle {
  border-color: rgba(24, 38, 79, 0.62);
  background: rgba(255, 251, 240, 0.5);
}

.final-darcana-page .hint-toggle[open] summary {
  border-bottom: 1px solid rgba(24, 38, 79, 0.28);
}

.final-darcana-card input,
.final-darcana-card textarea {
  color: #18264f;
  background: rgba(255, 251, 238, 0.96);
  border-color: rgba(154, 110, 38, 0.24);
}

.final-darcana-card input.locked-answer,
.final-darcana-card textarea.locked-answer {
  color: #18264f;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(210, 232, 255, 0.98), rgba(176, 214, 255, 0.96));
  border-color: rgba(126, 174, 231, 0.9);
}

.final-darcana-return-button {
  border-radius: 22px;
  font-size: 2.1rem;
  font-weight: 900;
  text-align: center;
  justify-content: center;
  min-width: min(100%, 420px);
}

.circus-page input,
.circus-page textarea {
  color: #2e1833;
  background: rgba(255, 255, 255, 0.96);
}

.circus-page input.locked-answer,
.circus-page textarea.locked-answer {
  color: #ffffff;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(232, 191, 76, 0.98), rgba(186, 136, 24, 0.96));
  border-color: rgba(255, 221, 127, 0.92);
}

.circus-page h1,
.circus-page h2,
.circus-page h3,
.circus-page h4,
.circus-page .back-link,
.circus-page .progress-pip,
.circus-page .primary-button,
.circus-page .secondary-button,
.circus-page .ghost-button,
.circus-page label,
.circus-page p,
.circus-page input,
.circus-page textarea,
.circus-page summary,
.circus-page li,
.circus-page span,
.circus-page div {
  font-family: "Comic Sans MS", "Marker Felt", "Trebuchet MS", cursive;
}

.circus-crystal-game {
  margin-top: 1.5rem;
  display: grid;
  justify-items: center;
  gap: 1rem;
}

.circus-crystal-wrap {
  display: grid;
  justify-items: center;
}

.circus-crystal-ball {
  position: relative;
  display: grid;
  place-items: center;
  width: min(72vw, 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.9), transparent 0 16%),
    radial-gradient(circle at 50% 58%, rgba(173, 255, 245, 0.9), rgba(110, 152, 255, 0.68) 42%, rgba(171, 108, 255, 0.76) 70%, rgba(255, 160, 214, 0.74) 100%);
  border: 10px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.46),
    0 22px 56px rgba(118, 78, 177, 0.28);
}

.circus-crystal-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.42), transparent 58%);
  pointer-events: none;
}

.circus-crystal-input {
  position: relative;
  z-index: 1;
  width: 58%;
}

.circus-crystal-input input {
  text-align: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.86);
  color: #4b2342;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  box-shadow: 0 8px 24px rgba(91, 52, 122, 0.18);
}

.circus-crystal-base {
  width: min(42vw, 180px);
  height: 32px;
  margin-top: -10px;
  border-radius: 999px 999px 18px 18px;
  background:
    linear-gradient(180deg, rgba(142, 59, 100, 0.92), rgba(81, 29, 79, 0.98));
  box-shadow: 0 12px 24px rgba(91, 52, 122, 0.2);
}

.circus-crystal-feedback {
  text-align: center;
  max-width: 28rem;
  font-size: 1rem;
}

.circus-crystal-feedback[data-state="higher"] {
  color: #57ff7d;
}

.circus-crystal-feedback[data-state="lower"] {
  color: #ff9b3d;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.trail-theme-ember {
  --accent: #963f2d;
  --accent-soft: #d57d4d;
}

.trail-theme-tide {
  --accent: #2f6774;
  --accent-soft: #68a5bc;
}

.race-page {
  --bg: #081229;
  --bg-deep: #111f4b;
  --surface: rgba(10, 19, 46, 0.78);
  --surface-strong: rgba(15, 26, 63, 0.94);
  --ink: #edf4ff;
  --muted: rgba(222, 232, 255, 0.76);
  --line: rgba(156, 179, 255, 0.2);
  --shadow: 0 24px 70px rgba(2, 6, 17, 0.36);
  --accent: #87a7ff;
  --accent-soft: #d8b6ff;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.92) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 72%, rgba(255, 255, 255, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.9) 0 1.2px, transparent 2px),
    radial-gradient(circle at 74% 60%, rgba(255, 255, 255, 0.75) 0 1.1px, transparent 2px),
    radial-gradient(circle at 92% 80%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 26%, rgba(208, 114, 255, 0.32), transparent 19%),
    radial-gradient(circle at 72% 74%, rgba(184, 110, 255, 0.3), transparent 18%),
    radial-gradient(circle at 50% 16%, rgba(227, 131, 255, 0.2), transparent 15%),
    radial-gradient(circle at 84% 34%, rgba(131, 118, 255, 0.22), transparent 16%),
    radial-gradient(circle at 34% 82%, rgba(173, 97, 255, 0.18), transparent 14%),
    radial-gradient(circle at top right, rgba(114, 145, 255, 0.28), transparent 34%),
    radial-gradient(circle at bottom left, rgba(180, 141, 255, 0.26), transparent 30%),
    linear-gradient(160deg, #090824, #22114f 52%, #14092f);
}

.tower-page {
  --bg: #1c0b0f;
  --bg-deep: #430d17;
  --surface: rgba(232, 234, 238, 0.82);
  --surface-strong: rgba(244, 246, 249, 0.95);
  --ink: #53222a;
  --muted: rgba(83, 34, 42, 0.82);
  --line: rgba(128, 108, 112, 0.22);
  --shadow: 0 24px 70px rgba(63, 44, 49, 0.16);
  --accent: #c74b54;
  --accent-soft: #f08a5d;
  background:
    radial-gradient(circle at top left, rgba(181, 35, 48, 0.22), transparent 30%),
    radial-gradient(circle at bottom right, rgba(93, 12, 22, 0.3), transparent 32%),
    linear-gradient(160deg, #17070b, #3c0b14 55%, #120609);
}

.tower-layout {
  background: rgba(25, 7, 12, 0.45);
}

.tower-card {
  background:
    linear-gradient(180deg, rgba(245, 246, 248, 0.95), rgba(219, 223, 229, 0.9));
}

.tower-page .race-layout {
  background: rgba(255, 255, 255, 0.1);
}

.tower-page .galaxy-card {
  background:
    linear-gradient(180deg, rgba(245, 246, 248, 0.95), rgba(219, 223, 229, 0.9));
}

.tower-page .constellation-card {
  border-color: rgba(128, 108, 112, 0.22);
  background: rgba(241, 243, 247, 0.88);
}

.tower-page .constellation-card[data-locked="true"] {
  border-color: rgba(214, 132, 151, 0.8);
  background: linear-gradient(180deg, rgba(255, 233, 238, 0.94), rgba(241, 205, 214, 0.88));
  box-shadow: inset 0 0 0 1px rgba(231, 170, 184, 0.24);
}

.tower-hero img {
  max-width: 260px;
  margin: 0 auto;
}

.tower-devils-image img {
  max-width: 520px;
}

.tower-video-small video {
  width: 360px;
  max-width: 360px;
  height: 0;
  margin: 0 auto;
}

.tower-continue-button {
  border: 1px solid rgba(255, 221, 127, 0.65);
  box-shadow: inset 0 0 0 1px rgba(255, 243, 204, 0.14);
}

.tower-page .galaxy-advance-row .primary-button {
  border-radius: 16px;
  padding: 1rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #fff6f2;
  background:
    linear-gradient(180deg, rgba(255, 213, 225, 0.24), transparent 28%),
    linear-gradient(135deg, #8d1f35, #bf3c52 52%, #761427);
  border: 1px solid rgba(255, 214, 224, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 243, 0.45),
    0 10px 24px rgba(66, 9, 21, 0.28);
}

.tower-page .galaxy-advance-row .primary-button:hover,
.tower-page .galaxy-advance-row .primary-button:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 224, 233, 0.32), transparent 30%),
    linear-gradient(135deg, #a32740, #cf4a61 52%, #87192f);
}

.tower-page input,
.tower-page textarea {
  color: #111111;
}

.tower-page label,
.tower-page .feedback {
  font-size: 1rem;
}

.tower-page .feedback[data-state="success"] {
  color: #5d2d8a;
}

.tower-page input.locked-answer {
  color: #111111;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(255, 224, 230, 0.98), rgba(241, 182, 195, 0.96));
  border-color: rgba(214, 132, 151, 0.94);
}

.tower-page input.error-answer {
  color: #111111;
  background: linear-gradient(180deg, rgba(255, 221, 231, 0.98), rgba(255, 186, 206, 0.95));
  border-color: rgba(224, 80, 130, 0.9);
}

.tower-hints {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.tower-page .tower-hints .hint-toggle {
  border-color: rgba(214, 132, 151, 0.6);
  background: linear-gradient(180deg, rgba(255, 236, 240, 0.96), rgba(243, 206, 214, 0.92));
}

.tower-page .tower-hints .hint-toggle summary,
.tower-page .tower-hints .hint-toggle p {
  color: #53222a;
}

.tower-solved-note {
  margin-top: 1rem;
}

.tower-terminal {
  margin-top: 1.1rem;
  min-height: 0;
}

.tower-page .terminal-line {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.tower-page .back-link,
.tower-page .progress-pip {
  color: rgba(232, 234, 238, 0.92);
}

.tower-page .progress-pip {
  color: #6d1f2c;
}

.tower-paper-display {
  display: grid;
  gap: 1rem;
  margin-top: 1.35rem;
}

.tower-paper-sheet {
  padding: 1.35rem;
  border-radius: 18px;
  border: 1px solid rgba(122, 56, 45, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 245, 229, 0.98), rgba(244, 227, 205, 0.96));
  color: #35231b;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  transform: rotate(-1deg);
}

.tower-paper-sheet:nth-child(2) {
  transform: rotate(1deg);
}

.tower-paper-sheet h2,
.tower-paper-sheet p {
  color: #35231b;
}

.tower-paper-sheet h2 {
  margin-bottom: 0.7rem;
}

.tower-paper-kicker {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b4a30;
}

.tower-hanged-game {
  transform: none;
}

.tower-paper-subtitle {
  margin: 0 0 1.3rem;
  color: #876b53;
  line-height: 1.55;
}

.tower-hanged-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 1.5rem;
  align-items: center;
}

.tower-hanged-gallows {
  width: 100%;
  aspect-ratio: 1 / 1;
}

.tower-hanged-word {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 1.2rem;
  overflow-x: auto;
  padding-bottom: 4px;
}

.tower-hanged-slot {
  width: 42px;
  height: 52px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-bottom: 3px solid #2f2925;
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #2f2925;
}

.tower-hanged-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.tower-hanged-form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 16px;
  border: 2px solid #2f2925;
  border-radius: 12px;
  background: #fffdf7;
  color: #18130f;
  font: inherit;
  font-size: 1rem;
  text-transform: uppercase;
}

.tower-hanged-form .primary-button,
.tower-hanged-form .ghost-button {
  border-radius: 12px;
}

.tower-hanged-reset {
  color: #fffaf7;
  background: #2f2925;
}

.tower-hanged-status {
  min-height: 32px;
  margin: 18px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #2f2925;
}

.tower-hanged-status.win {
  color: #5d2d8a;
}

.tower-hanged-status.lose {
  color: #ad2f31;
}

.tower-hanged-rules {
  margin: 18px 0 0;
  color: #8b4a30;
  line-height: 1.5;
}

.tower-pentordle-game {
  transform: none !important;
}

.tower-pentordle-boards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.tower-pentordle-board {
  padding: 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(122, 56, 45, 0.18);
  background: rgba(255, 252, 247, 0.78);
}

.tower-pentordle-board h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  line-height: 1.1;
  color: #7a362d;
}

.tower-pentordle-board-note {
  margin: 0 0 0.7rem;
  min-height: 1.2rem;
  font-size: 0.92rem;
  font-weight: 800;
  color: #5d2d8a;
}

.tower-pentordle-grid {
  display: grid;
  gap: 0.35rem;
}

.tower-pentordle-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.25rem;
}

.tower-pentordle-cell {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(47, 41, 37, 0.18);
  background: rgba(255, 255, 255, 0.7);
  color: #2f2925;
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
}

.tower-pentordle-cell.correct {
  background: #2f6f43;
  border-color: #2f6f43;
  color: #fffdf7;
}

.tower-pentordle-cell.present {
  background: #d4af37;
  border-color: #c49917;
  color: #2f2925;
}

.tower-pentordle-cell.absent {
  background: #7e695d;
  border-color: #6f5b50;
  color: #fffdf7;
}

.tower-pentordle-board.solved {
  box-shadow: inset 0 0 0 2px rgba(93, 45, 138, 0.2);
}

.tower-pentordle-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.tower-pentordle-form input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 16px;
  border: 2px solid #2f2925;
  border-radius: 12px;
  background: #fffdf7;
  color: #18130f;
  font: inherit;
  font-size: 1rem;
  text-transform: uppercase;
}

.tower-pentordle-form .primary-button,
.tower-pentordle-form .ghost-button {
  border-radius: 12px;
}

.tower-pentordle-reset {
  color: #fffaf7;
  background: #2f2925;
}

.tower-pentordle-meta,
.tower-pentordle-status {
  margin: 0.9rem 0 0;
  color: #7a362d;
  line-height: 1.5;
}

.tower-pentordle-status {
  min-height: 1.6rem;
  font-weight: 700;
}

.tower-pentordle-status.win {
  color: #5d2d8a;
}

.tower-pentordle-status.lose {
  color: #ad2f31;
}

.tower-murdle-game {
  transform: none !important;
}

.tower-murdle-hero {
  margin-bottom: 1rem;
}

.tower-murdle-eyebrow {
  margin: 0 0 0.4rem;
  color: #8b4a30;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tower-murdle-intro {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgba(212, 185, 141, 0.72);
  border-radius: 8px;
  background: rgba(255, 250, 240, 0.9);
}

.tower-murdle-intro p {
  margin: 0;
}

.tower-murdle-intro p + p {
  margin-top: 0.9rem;
}

.tower-murdle-suspects {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.tower-murdle-suspect-card,
.tower-murdle-panel {
  background: #fffaf0;
  border: 1px solid #d4b98d;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(57, 38, 20, 0.12);
}

.tower-murdle-suspect-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  min-height: 124px;
  padding: 14px;
}

.tower-murdle-portrait {
  align-self: center;
  aspect-ratio: 1;
  background: #f4dfb7;
  border: 1px solid #cda86d;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 3.8rem;
  line-height: 1;
}

.tower-murdle-suspect-card h3 {
  margin: 0 0 5px;
  font-size: 1.15rem;
  color: #1f1a17;
}

.tower-murdle-suspect-card p {
  margin: 0;
  color: #6d625d;
  font-size: 0.88rem;
  line-height: 1.38;
}

.tower-murdle-shell {
  display: grid;
  gap: 18px;
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: start;
}

.tower-murdle-panel {
  padding: 16px;
}

.tower-murdle-note {
  color: #6d625d;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  margin: -4px 0 12px;
}

.tower-murdle-clues {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.tower-murdle-clues li {
  list-style: none;
  background: #fbf3e5;
  border-left: 4px solid #b98124;
  border-radius: 6px;
}

.tower-murdle-clue-toggle {
  width: 100%;
  padding: 10px 10px 10px 12px;
  border: 0;
  background: transparent;
  color: #1f1a17;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}

.tower-murdle-clue-toggle.done {
  color: #6d625d;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.tower-murdle-clue-alert {
  color: #9c2f23;
}

.tower-murdle-tools {
  margin-top: 14px;
}

.tower-murdle-tool {
  border-radius: 8px;
  border: 1px solid #b9894a;
  background: #fff7e7;
  color: #1f1a17;
}

.tower-murdle-stack {
  display: grid;
  gap: 14px;
}

.tower-murdle-logic-section {
  overflow-x: auto;
}

.tower-murdle-matrix {
  display: grid;
  grid-template-columns: 126px repeat(9, 56px);
  width: max-content;
}

.tower-murdle-group,
.tower-murdle-column,
.tower-murdle-label,
.tower-murdle-section,
.tower-murdle-cell {
  border: 1px solid #d4b98d;
}

.tower-murdle-group,
.tower-murdle-column {
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 6px;
  text-align: center;
  background: #eed9b4;
  color: #1f1a17;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
}

.tower-murdle-group {
  background: #dfc390;
  color: #4a3320;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tower-murdle-label {
  display: grid;
  align-items: center;
  background: #fbf3e5;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.15;
  padding: 7px;
  text-align: left;
  color: #1f1a17;
}

.tower-murdle-label-tight {
  font-size: 90%;
}

.tower-murdle-section {
  display: grid;
  align-items: center;
  background: #ead2a5;
  color: #5d3c20;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 7px;
  text-transform: uppercase;
}

.tower-murdle-cell {
  height: 56px;
  width: 56px;
}

.tower-murdle-block-top {
  border-top: 3px solid #56514c;
}

.tower-murdle-block-right {
  border-right: 3px solid #56514c;
}

.tower-murdle-block-bottom {
  border-bottom: 3px solid #56514c;
}

.tower-murdle-block-left {
  border-left: 3px solid #56514c;
}

.tower-murdle-mark {
  appearance: none;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: #fffaf0;
  color: #6d625d;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 900;
  transform: none;
  transition: background 120ms ease, color 120ms ease;
  box-shadow: none;
}

.tower-murdle-mark:hover,
.tower-murdle-mark:focus-visible {
  transform: none;
  box-shadow: none;
  outline: none;
}

.tower-murdle-mark:not(.no):not(.auto-no):not(.yes):hover,
.tower-murdle-mark:not(.no):not(.auto-no):not(.yes):focus-visible {
  background: #fffaf0;
  color: transparent;
}

.tower-murdle-mark.no {
  background: #f3d8d1;
  color: #9c2f23;
}

.tower-murdle-mark.auto-no {
  background: #ece9e3;
  color: #77716b;
}

.tower-murdle-mark.yes {
  background: #e5d9f6;
  color: #5d2d8a;
}

.tower-murdle-accuse {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tower-murdle-accuse label {
  color: #6d625d;
  display: grid;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tower-murdle-accuse select {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid #d4b98d;
  border-radius: 8px;
  background: #fffdf7;
  color: #1f1a17;
}

.tower-murdle-accuse select.answer-correct {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #e5d9f6;
  border-color: #6c34a1;
  color: #4a216f;
  font-weight: 800;
  background-image: none;
  padding-right: 10px;
}

.tower-murdle-accuse select.answer-wrong {
  border-color: #9c2f23;
  color: #9c2f23;
  font-weight: 800;
}

.tower-murdle-submit {
  grid-column: 1 / -1;
}

.tower-murdle-result {
  margin-top: 12px;
  min-height: 48px;
  padding: 12px;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1.42;
}

.tower-murdle-result:empty {
  display: none;
}

.tower-murdle-result.win {
  background: #e5d9f6;
  color: #4a216f;
}

.tower-murdle-result.miss {
  background: #f3d8d1;
  color: #82251c;
}

.tower-murdle-outro {
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(122, 56, 45, 0.28);
}

.tower-murdle-outro p {
  color: #35231b;
}

.tower-skull-prompt {
  margin-top: 1.35rem;
}

.tower-skull-prompt p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.tower-death-quote {
  margin: 1rem 0 1.2rem;
  color: #ff3b3b;
  font-family: "Chiller", "Creepster", serif;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-shadow: 0 4px 18px rgba(85, 0, 0, 0.35);
}

.tower-death-quote span {
  color: inherit;
}

.tower-death-scene {
  margin-top: 1.2rem;
}

.tower-death-scene p {
  color: #ff4a4a;
  font-family: "Chiller", "Creepster", serif;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.tower-death-button {
  font-family: "Chiller", "Creepster", serif;
}

.tower-death-list {
  margin: 1rem 0 1.2rem;
  padding-left: 2rem;
  list-style: none;
  color: #ff4a4a;
  font-family: "Chiller", "Creepster", serif;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.7;
}

.tower-death-list li + li {
  margin-top: 0.7rem;
}

.tower-death-scene .tower-hints,
.tower-death-scene .tower-hints summary,
.tower-death-scene .tower-hints p {
  font-family: "Manrope", sans-serif;
  color: var(--ink);
  letter-spacing: normal;
  text-shadow: none;
}

.tower-death-scene .tower-hints p {
  line-height: 1.65;
}

.tower-beer-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.2rem 0;
}

.tower-beer-card {
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 213, 154, 0.26);
  background:
    linear-gradient(180deg, rgba(82, 22, 29, 0.9), rgba(54, 12, 20, 0.92));
  box-shadow: 0 14px 28px rgba(12, 4, 8, 0.24);
}

.tower-beer-card h2 {
  font-size: 1.55rem;
  color: #fff4de;
  margin-bottom: 0.45rem;
}

.tower-beer-card p {
  margin: 0;
  color: rgba(255, 235, 214, 0.78);
}

.tower-beer-badge {
  display: inline-block;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6de8f, #bf8b1b);
  color: #3a2304 !important;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.race-page::before {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

.race-layout {
  background: rgba(7, 14, 34, 0.4);
}

.race-layout-single {
  grid-template-columns: minmax(0, 1fr);
}

.galaxy-card {
  background:
    linear-gradient(180deg, rgba(9, 17, 42, 0.88), rgba(12, 23, 54, 0.78));
}

.galaxy-hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.3rem;
}

.galaxy-tarot-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px solid rgba(156, 179, 255, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  text-decoration: none;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.galaxy-tarot-card:hover,
.galaxy-tarot-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(210, 176, 255, 0.38);
  box-shadow: 0 18px 38px rgba(17, 8, 45, 0.34);
  background: rgba(255, 255, 255, 0.06);
}

.galaxy-tarot-card[data-locked="true"] {
  border-color: rgba(237, 195, 92, 0.72);
  background: linear-gradient(180deg, rgba(111, 85, 18, 0.28), rgba(170, 127, 24, 0.18));
}

.galaxy-tarot-card[data-locked="true"] h3,
.galaxy-tarot-card[data-locked="true"] .galaxy-card-answer,
.galaxy-tarot-card[data-locked="true"] .galaxy-card-answer span {
  color: #ffde7a;
}

.galaxy-tarot-image {
  margin: 0;
  width: min(100%, 180px);
}

.galaxy-tarot-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(156, 179, 255, 0.18);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

.galaxy-tarot-card[data-locked="true"] .galaxy-tarot-image img {
  filter: grayscale(1);
}

.galaxy-complete-stamp {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  z-index: 2;
  padding: 0.35rem 0.7rem;
  border: 2px solid #ffde7a;
  border-radius: 999px;
  background: rgba(64, 42, 5, 0.72);
  color: #ffde7a;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    0 0 0 1px rgba(255, 243, 204, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.galaxy-tarot-card h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.galaxy-card-answer {
  margin: 0;
  text-align: center;
  line-height: 1.45;
}

.galaxy-card-answer {
  font-weight: 800;
  color: #ffde7a;
}

.galaxy-form {
  gap: 1.2rem;
}

.constellation-card {
  padding: 1.2rem;
  border: 1px solid rgba(156, 179, 255, 0.18);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.03);
}

.constellation-card[data-locked="true"] {
  border-color: rgba(237, 195, 92, 0.75);
  background:
    linear-gradient(180deg, rgba(111, 85, 18, 0.42), rgba(170, 127, 24, 0.24));
  box-shadow: inset 0 0 0 1px rgba(255, 224, 139, 0.16);
}

.constellation-card[data-error="true"] {
  border-color: rgba(255, 133, 164, 0.88);
  background:
    linear-gradient(180deg, rgba(120, 24, 62, 0.32), rgba(255, 166, 202, 0.18));
}

.constellation-card h3 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin: 0.2rem 0 0.75rem;
}

.hint-stack {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 1rem 0 1.15rem;
}

.hint-toggle {
  border: 1px solid rgba(156, 179, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.hint-toggle summary {
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 1rem;
  font-weight: 800;
  font-size: 0.98rem;
  color: inherit;
}

.hint-toggle summary::-webkit-details-marker {
  display: none;
}

.hint-toggle[open] summary {
  border-bottom: 1px solid rgba(156, 179, 255, 0.16);
}

.hint-toggle p {
  margin: 0;
  padding: 0.95rem 1rem 1rem;
  font-size: 0.94rem;
  line-height: 1.55;
}

.prompt-image {
  margin: 1rem 0 1.1rem;
}

.prompt-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(156, 179, 255, 0.18);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}

.prompt-image video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(156, 179, 255, 0.18);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
  background: rgba(0, 0, 0, 0.35);
}

.race-page .prompt-image img[src*="galaxy-moon-book.png"] {
  width: 25%;
  max-width: 160px;
  margin: 0 auto;
}

.star-riddle-image {
  justify-self: end;
  align-self: center;
}

.star-riddle-image img {
  width: min(100%, 162px);
  max-width: 162px;
  margin: 0;
}

.race-prize-video video {
  width: 280px;
  max-width: 280px;
  height: 498px;
  object-fit: cover;
  margin: 0 auto;
}

.race-page input,
.race-page textarea {
  color: #111111;
}

.race-page input.locked-answer {
  color: #111111;
  font-weight: 800;
  background: linear-gradient(180deg, rgba(255, 229, 148, 0.96), rgba(226, 186, 74, 0.96));
  border-color: rgba(255, 221, 127, 0.92);
}

.race-page input.error-answer {
  color: #111111;
  background: linear-gradient(180deg, rgba(255, 221, 231, 0.98), rgba(255, 186, 206, 0.95));
  border-color: rgba(224, 80, 130, 0.9);
}

.moon-solved-callout {
  margin-top: 1rem;
  font-size: 125%;
  font-weight: 700;
  color: #f8d36c;
}

[data-moon-calendar] {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.45rem;
}

[data-moon-calendar] .moon-calendar-cell:first-child {
  grid-column: 4;
}

.moon-calendar-cell {
  position: relative;
}

.moon-calendar-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.moon-calendar-panel {
  margin: 1.2rem 0 1.35rem;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid rgba(128, 144, 212, 0.22);
  background:
    radial-gradient(circle at top, rgba(157, 112, 255, 0.18), transparent 32%),
    linear-gradient(160deg, rgba(12, 21, 46, 0.95), rgba(22, 36, 78, 0.93));
  box-shadow:
    0 16px 34px rgba(8, 14, 31, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.moon-calendar-panel-minimal {
  padding: 0.9rem;
}

.logic-grid-panel {
  margin: 1.2rem 0 1.35rem;
  padding: 1rem;
  border-radius: 18px;
}

.logic-grid-table {
  display: grid;
  gap: 0.45rem;
}

.logic-grid-cell {
  position: relative;
}

.logic-grid-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.logic-grid-box {
  position: relative;
  min-width: 0;
  width: 100%;
  min-height: 56px;
  display: grid;
  place-items: center;
  padding: 0.2rem;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}

.logic-grid-box:hover,
.logic-grid-box:focus-visible {
  box-shadow: none;
  outline: none;
}

.logic-grid-mark {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: 1.65rem;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.logic-grid-toggle:checked + .logic-grid-box .logic-grid-mark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.logic-grid-header,
.logic-grid-row-header,
.logic-grid-corner {
  display: grid;
  place-items: center;
  min-height: 56px;
  padding: 0.35rem 0.45rem;
  text-align: center;
  border-radius: 12px;
  font-weight: 700;
}

.logic-grid-table-royal {
  grid-template-columns: minmax(130px, 1.35fr) repeat(5, minmax(0, 1fr));
}

.logic-grid-table-tower {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.royal-logic-grid-panel {
  border: 1px solid rgba(80, 255, 137, 0.18);
  background:
    radial-gradient(circle at top, rgba(57, 184, 114, 0.12), transparent 36%),
    linear-gradient(160deg, rgba(4, 18, 8, 0.96), rgba(8, 28, 14, 0.94));
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(104, 255, 167, 0.06);
}

.royal-logic-grid-panel .logic-grid-header,
.royal-logic-grid-panel .logic-grid-row-header,
.royal-logic-grid-panel .logic-grid-corner {
  border: 1px solid rgba(80, 255, 137, 0.18);
  background: rgba(80, 255, 137, 0.08);
  color: #8df7a2;
}

.royal-logic-grid-panel .logic-grid-box {
  border: 1px solid rgba(80, 255, 137, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.royal-logic-grid-panel .logic-grid-box:hover,
.royal-logic-grid-panel .logic-grid-box:focus-visible {
  border-color: rgba(80, 255, 137, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.royal-logic-grid-panel .logic-grid-mark {
  color: #e7d158;
  text-shadow:
    0 0 12px rgba(231, 209, 88, 0.55),
    0 0 20px rgba(111, 94, 13, 0.28);
}

.royal-logic-grid-panel .logic-grid-toggle:checked + .logic-grid-box {
  border-color: rgba(231, 209, 88, 0.52);
  background:
    radial-gradient(circle at center, rgba(231, 209, 88, 0.12), transparent 68%),
    rgba(255, 255, 255, 0.04);
}

.tower-logic-grid-panel {
  border: 1px solid rgba(121, 62, 60, 0.22);
  background:
    radial-gradient(circle at top, rgba(160, 89, 83, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(232, 226, 221, 0.96), rgba(214, 203, 198, 0.94));
  box-shadow:
    0 16px 34px rgba(49, 20, 20, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.tower-logic-grid-panel .logic-grid-box {
  border: 1px solid rgba(121, 62, 60, 0.2);
  background: rgba(255, 255, 255, 0.42);
}

.tower-logic-grid-panel .logic-grid-box:hover,
.tower-logic-grid-panel .logic-grid-box:focus-visible {
  border-color: rgba(121, 62, 60, 0.2);
  background: rgba(255, 255, 255, 0.42);
}

.tower-logic-grid-panel .logic-grid-mark {
  color: #7c242f;
  text-shadow:
    0 0 10px rgba(124, 36, 47, 0.22),
    0 0 18px rgba(124, 36, 47, 0.12);
}

.tower-logic-grid-panel .logic-grid-toggle:checked + .logic-grid-box {
  border-color: rgba(124, 36, 47, 0.48);
  background:
    radial-gradient(circle at center, rgba(190, 108, 116, 0.16), transparent 68%),
    rgba(255, 255, 255, 0.42);
}

.moon-calendar-day {
  position: relative;
  min-width: 0;
  width: 100%;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(166, 182, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #edf4ff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}

.moon-calendar-day:hover,
.moon-calendar-day:focus-visible {
  border-color: rgba(166, 182, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  outline: none;
}

.moon-calendar-mark {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(0.6);
  color: #c28cff;
  font-size: 1.65rem;
  font-weight: 900;
  text-shadow:
    0 0 12px rgba(194, 140, 255, 0.78),
    0 0 24px rgba(99, 41, 180, 0.46);
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.moon-calendar-toggle:checked + .moon-calendar-day {
  border-color: rgba(194, 140, 255, 0.72);
  background:
    radial-gradient(circle at center, rgba(128, 62, 198, 0.3), transparent 68%),
    rgba(255, 255, 255, 0.08);
}

.moon-calendar-toggle:checked + .moon-calendar-day .moon-calendar-mark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 640px) {
  .moon-calendar-panel {
    padding: 0.85rem;
  }

  .moon-calendar-weekdays,
  [data-moon-calendar] {
    gap: 0.28rem;
  }

  .moon-calendar-weekdays span {
    font-size: 0.7rem;
  }

  .moon-calendar-day {
    min-height: 42px;
    border-radius: 10px;
    font-size: 15px;
  }

  .moon-calendar-mark {
    font-size: 1.45rem;
  }
}

[data-moon-number-stage] {
  margin-top: 2rem;
}

.race-page button:disabled {
  cursor: default;
  opacity: 0.88;
  transform: none;
  background: linear-gradient(135deg, rgba(223, 188, 92, 0.95), rgba(181, 136, 28, 0.95));
  color: #1d1605;
}

.galaxy-advance-row {
  margin-top: 0.4rem;
}

.galaxy-advance-row .primary-button:disabled {
  background: rgba(141, 156, 204, 0.32);
  color: rgba(237, 244, 255, 0.72);
}

.number-summary p,
.prompt-block {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink);
}

.celestial-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.celestial-gallery .prompt-image {
  margin: 0;
}

.galaxy-gallery-card {
  padding: 0.85rem;
  border: 1px solid rgba(255, 221, 127, 0.55);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(29, 20, 54, 0.46), rgba(17, 12, 34, 0.34));
  box-shadow: inset 0 0 0 1px rgba(255, 245, 204, 0.08);
}

.galaxy-gallery-card img {
  border-color: rgba(255, 221, 127, 0.4);
}

.galaxy-gallery-card figcaption {
  margin-top: 0.55rem;
  text-align: center;
  font-size: clamp(1.4rem, 2.3vw, 1.9rem);
  font-weight: 700;
  color: #ffde7a;
}

.prize-note {
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 221, 127, 0.55);
  border-radius: 16px;
  color: #231805;
  background: linear-gradient(180deg, rgba(255, 232, 164, 0.96), rgba(226, 186, 74, 0.94));
  box-shadow: inset 0 0 0 1px rgba(255, 245, 204, 0.35);
  line-height: 1.6;
  font-weight: 700;
}

.final-return-row {
  justify-content: center;
  margin-top: 1.5rem;
}

.final-return-button {
  position: relative;
  justify-content: center;
  min-width: min(100%, 360px);
  padding: 1.15rem 1.8rem;
  font-size: 1.05rem;
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(255, 221, 127, 0.18);
}

.race-final-return-button {
  border-radius: 22px;
  font-size: calc(1.05rem * 1.33);
  font-weight: 900;
}

.galaxy-return-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  min-width: min(100%, 360px);
  border-radius: 22px;
  font-size: calc(1rem * 1.5);
  padding: 1rem 1.45rem;
  text-align: center;
}

@media (max-width: 760px) {
  .galaxy-hub {
    grid-template-columns: 1fr;
  }

  .galaxy-tarot-image {
    width: min(100%, 220px);
  }
}

.final-return-button::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% -35%;
  width: 32%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0)
  );
  animation: shimmer-slide 2.8s linear infinite;
}

@keyframes shimmer-slide {
  from {
    left: -35%;
  }

  to {
    left: 120%;
  }
}

.magician-page {
  margin: 0;
  min-height: 100vh;
  color: #9dffb0;
  font-family: "VT323", monospace;
  background:
    radial-gradient(circle at top, rgba(84, 255, 138, 0.1), transparent 25%),
    linear-gradient(180deg, #03120a, #010604 50%, #021109);
}

.magician-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: linear-gradient(rgba(157, 255, 176, 0.15) 1px, transparent 1px);
  background-size: 100% 4px;
}

.magician-shell {
  width: min(960px, calc(100% - 1rem));
  margin: 0 auto;
  padding: 1rem 0 2rem;
}

.magician-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.arcade-link,
.magician-page .progress-pip {
  color: #9dffb0;
  border-color: rgba(157, 255, 176, 0.28);
  background: rgba(7, 31, 17, 0.9);
}

.magician-screen {
  padding: 1.5rem;
  border: 2px solid rgba(157, 255, 176, 0.28);
  border-radius: 18px;
  background: rgba(2, 10, 5, 0.92);
  box-shadow: 0 0 0 1px rgba(77, 168, 101, 0.2), 0 24px 70px rgba(0, 0, 0, 0.45);
}

.magician-screen h1,
.choice-prompt {
  font-family: "Press Start 2P", monospace;
}

.magician-screen h1 {
  margin: 0 0 1rem;
  font-size: clamp(1.4rem, 4vw, 2.3rem);
  line-height: 1.5;
  color: #dbffe2;
}

.magician-ascii {
  margin: 0 0 1rem;
  color: #ffe99a;
  font-size: clamp(0.52rem, 1.5vw, 0.85rem);
  line-height: 1.1;
  white-space: pre;
  text-shadow: 0 0 8px rgba(255, 233, 154, 0.35);
}

.terminal-log {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 140px;
}

.terminal-line {
  margin: 0;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.35;
  color: #9dffb0;
}

.choice-panel,
.terminal-form {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(157, 255, 176, 0.28);
}

.choice-prompt {
  margin: 0 0 1rem;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #ffe99a;
}

.arcade-row {
  gap: 0.9rem;
}

.arcade-button {
  color: #04170c;
  background: linear-gradient(180deg, #aaffb9, #5fe876);
  box-shadow: 0 0 0 1px rgba(170, 255, 185, 0.26);
  font-family: "VT323", monospace;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.35;
}

.arcade-continue {
  min-width: min(100%, 540px);
  padding: 1rem 1.5rem;
}

.arcade-button:hover,
.arcade-button:focus-visible {
  background: linear-gradient(180deg, #d0ffd8, #7eff95);
}

.magician-page .terminal-form label,
.magician-page .terminal-form .feedback,
.magician-page .terminal-form .input-help {
  color: #9dffb0;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.35;
}

.magician-page .terminal-form input {
  color: #9dffb0;
  background: rgba(3, 22, 11, 0.95);
  border-color: rgba(157, 255, 176, 0.3);
  font-size: 1.35rem;
}

.magician-page .terminal-form input.locked-answer {
  color: #1e1500;
  background: linear-gradient(180deg, rgba(255, 229, 148, 0.96), rgba(226, 186, 74, 0.96));
}

.magician-page .terminal-form input.error-answer {
  color: #ffd8e1;
  background: rgba(74, 12, 31, 0.92);
  border-color: rgba(255, 121, 157, 0.9);
}

.magician-page .feedback[data-state="success"] {
  color: #ffe99a;
}

.terminal-success-accent {
  color: #ffe99a;
}

.magician-page .feedback[data-state="error"] {
  color: #ff8dab;
}

.magician-page .hint-toggle summary,
.magician-page .hint-toggle p {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.35;
}

.magician-page [data-emperor-first] {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.35;
  font-family: "VT323", monospace;
  padding: 1rem 1.2rem;
}

.magician-page .prize-note {
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.35;
}

.magician-page .final-return-button {
  border-radius: 18px;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.35;
  padding: 0.9rem 1.4rem;
  color: #04170c;
  background: linear-gradient(180deg, #aaffb9, #5fe876);
  box-shadow: 0 0 0 1px rgba(170, 255, 185, 0.26);
}

.magician-page .final-return-button::after {
  display: block;
}

.terminal-emphasis {
  font-style: italic;
}

.emperor-options {
  flex-direction: column;
}

.hidden {
  display: none;
}

[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .trail-grid,
  .trail-layout {
    grid-template-columns: 1fr;
  }

  .tower-hanged-layout {
    grid-template-columns: 1fr;
  }

  .tower-pentordle-boards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tower-murdle-shell,
  .tower-murdle-suspects {
    grid-template-columns: 1fr;
  }

  .celestial-gallery {
    grid-template-columns: 1fr;
  }

  .trail-header {
    flex-direction: column;
  }

  .magician-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .shell {
    width: min(100% - 1rem, 1180px);
    padding-bottom: 2rem;
  }

  .landing-page .shell {
    padding-top: 2rem;
  }

  .tower-pentordle-boards {
    grid-template-columns: 1fr;
  }

  .tower-murdle-suspect-card {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .tower-murdle-portrait {
    font-size: 3rem;
  }

  .tower-murdle-accuse {
    grid-template-columns: 1fr;
  }

  .trail-card,
  .panel,
  .step-card,
  .completion-card {
    border-radius: 22px;
  }

  .trail-layout {
    padding: 0.8rem;
    border-radius: 24px;
  }

  .button-row {
    flex-direction: column;
  }

  button,
  .ghost-button {
    width: 100%;
    justify-content: center;
  }
}