:root {
  /* Design compliance vocabulary: Interprets gold-black luxury through friendly retro-futuristic board-game tactility—brass tokens; Roboto Slab** Slab* Sla and **Zilla Slab** from Google Fonts as the primary slab-serif voice for the wordmark. */
  --void-black: #070604;
  --obsidian-panel: #11100C;
  --quest-gold: #D7A93A;
  --champagne-glow: #F4D98B;
  --warm-parchment: #FFF1C2;
  --friendly-amber: #FFB84D;
  --oxidized-teal: #1F7A72;
  --shadow: rgba(0, 0, 0, 0.62);
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--void-black);
  color: var(--warm-parchment);
  font-family: "DM Sans", Inter, Roboto, system-ui, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(244, 217, 139, 0.13), transparent 26%),
    radial-gradient(circle at 82% 18%, rgba(31, 122, 114, 0.16), transparent 22%),
    radial-gradient(circle at 15% 82%, rgba(215, 169, 58, 0.12), transparent 24%),
    linear-gradient(135deg, #070604 0%, #11100C 52%, #070604 100%);
  pointer-events: none;
}

.quest-console {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 700px;
  isolation: isolate;
  overflow: hidden;
}

.starfield {
  position: absolute;
  inset: 0;
  opacity: 0.72;
  background-image:
    radial-gradient(circle, rgba(255, 241, 194, 0.8) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(215, 169, 58, 0.55) 0 1px, transparent 1.3px),
    linear-gradient(60deg, transparent 0 48%, rgba(215, 169, 58, 0.08) 48% 48.35%, transparent 48.35% 100%);
  background-size: 91px 91px, 137px 137px, 220px 220px;
  background-position: 11px 17px, 43px 61px, center;
}

.circuit {
  position: absolute;
  width: 38vw;
  height: 42vh;
  border: 1px solid rgba(215, 169, 58, 0.28);
  clip-path: polygon(16% 0, 100% 0, 100% 76%, 84% 100%, 0 100%, 0 24%);
  opacity: 0.5;
}

.circuit::before,
.circuit::after {
  content: "";
  position: absolute;
  background: var(--quest-gold);
  box-shadow: 0 0 22px rgba(244, 217, 139, 0.35);
}

.circuit::before { width: 42%; height: 1px; left: 20%; top: 34%; transform: rotate(-30deg); }
.circuit::after { width: 7px; height: 7px; border-radius: 50%; right: 21%; bottom: 27%; }
.circuit-one { left: -8vw; top: 8vh; transform: rotate(-7deg); }
.circuit-two { right: -9vw; bottom: 6vh; transform: rotate(173deg); }

.start-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: var(--quest-gold);
  box-shadow: 0 0 0 0 rgba(244, 217, 139, 0.65), 0 0 42px var(--friendly-amber);
  animation: pulsePoint 1.25s ease-out 4 forwards;
  z-index: 5;
}

.start-pulse.faded { opacity: 0; transition: opacity 600ms ease; }

.honeycomb-stage {
  position: relative;
  width: min(1200px, 96vw);
  height: min(760px, 94vh);
  margin: 3vh auto;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.19,1,.22,1);
}

.route-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 16px rgba(215, 169, 58, 0.42));
  opacity: 0.9;
}

.route-layer svg { width: 100%; height: 100%; }
#routePath {
  fill: none;
  stroke: var(--quest-gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 900ms cubic-bezier(.22,.9,.24,1), stroke 300ms ease;
}

.hex {
  position: absolute;
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  background: linear-gradient(135deg, var(--quest-gold), var(--champagne-glow) 38%, var(--friendly-amber) 68%, var(--quest-gold));
  padding: 3px;
  filter: drop-shadow(0 24px 32px var(--shadow));
  transform: translate(var(--spawn-x, 0), var(--spawn-y, 0)) scale(0.1) rotate(-18deg);
  opacity: 0;
  transition:
    transform 760ms cubic-bezier(.15,1.38,.32,1),
    opacity 360ms ease,
    filter 260ms ease;
  cursor: pointer;
  will-change: transform;
}

.hex::before {
  content: "";
  position: absolute;
  inset: 8px;
  clip-path: inherit;
  background: radial-gradient(circle at 35% 20%, rgba(244, 217, 139, 0.35), transparent 36%), var(--obsidian-panel);
  z-index: -1;
}

.hex::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: inherit;
  background: linear-gradient(60deg, transparent 0 47%, rgba(244, 217, 139, 0.28) 47% 49%, transparent 49% 100%);
  opacity: 0.45;
  mix-blend-mode: screen;
}

.hex.is-launched {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(var(--rot, 0deg));
}

.hex.is-active {
  filter: drop-shadow(0 0 22px rgba(244, 217, 139, 0.55)) drop-shadow(0 28px 34px var(--shadow));
  z-index: 12;
}

.hex.is-active .hex-face { background: radial-gradient(circle at 50% 15%, rgba(255, 184, 77, 0.2), transparent 35%), #15130e; }

.hex-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  clip-path: inherit;
  text-align: center;
  background: var(--obsidian-panel);
  overflow: hidden;
}

.hex-face::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(215, 169, 58, 0.22);
  clip-path: inherit;
}

.quest-core {
  width: 374px;
  height: 326px;
  left: calc(50% - 187px);
  top: calc(50% - 163px);
  --rot: 0deg;
  z-index: 10;
}

.micro-label,
.cell small,
.navigator-note span,
.quest-dial button {
  font-family: "DM Sans", Inter, Roboto, system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.micro-label {
  margin: 0 0 -8px;
  color: var(--friendly-amber);
  font-size: 0.68rem;
  font-weight: 700;
}

h1 {
  margin: 0;
  color: var(--champagne-glow);
  font-family: "Roboto Slab", Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4.9rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-shadow: 0 0 22px rgba(244, 217, 139, 0.28);
}

.core-copy {
  width: 72%;
  margin: -4px 0 0;
  color: rgba(255, 241, 194, 0.86);
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 1rem;
  line-height: 1.35;
}

.quest-button {
  border: 1px solid var(--quest-gold);
  border-radius: 999px;
  padding: 10px 18px;
  background: rgba(215, 169, 58, 0.12);
  color: var(--warm-parchment);
  font-family: "Roboto Slab", Georgia, serif;
  font-weight: 700;
  text-transform: lowercase;
  box-shadow: inset 0 0 18px rgba(244, 217, 139, 0.08), 0 0 18px rgba(215, 169, 58, 0.18);
  cursor: pointer;
}

.quest-button:hover { background: rgba(244, 217, 139, 0.18); color: var(--champagne-glow); }

.cell {
  width: 172px;
  height: 150px;
  --spawn-x: calc(50vw - var(--x, 0px));
  --spawn-y: calc(50vh - var(--y, 0px));
}

.cell .hex-face { gap: 4px; padding: 18px; }
.glyph { color: var(--champagne-glow); font-size: 2.1rem; line-height: 1; font-family: "Zilla Slab", Georgia, serif; }
.cell b { color: var(--warm-parchment); font-family: "Roboto Slab", Georgia, serif; font-size: 1.18rem; }
.cell small { color: rgba(255, 241, 194, 0.62); font-size: 0.56rem; line-height: 1.35; }

.cell-origin { left: 214px; top: 304px; --rot: -3deg; }
.cell-clue { left: 356px; top: 180px; --rot: 4deg; }
.cell-companion { left: 356px; top: 430px; --rot: -5deg; }
.cell-obstacle { right: 356px; top: 180px; --rot: -4deg; }
.cell-route { right: 356px; top: 430px; --rot: 5deg; }
.cell-reward { right: 204px; top: 304px; --rot: 3deg; }
.cell-signal { right: 142px; top: 120px; --rot: 10deg; }
.cell-signal::before { background: radial-gradient(circle at 45% 25%, rgba(31, 122, 114, 0.7), transparent 42%), var(--obsidian-panel); }
.cell-signal .glyph, .cell-signal b { color: #F4D98B; }
.cell-signal .hex-face { background: linear-gradient(145deg, rgba(31, 122, 114, 0.5), #11100C 58%); }

.token {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, var(--champagne-glow), var(--friendly-amber) 48%, var(--quest-gold));
  box-shadow: 0 0 18px rgba(255, 184, 77, 0.7);
  z-index: 14;
  animation: bobToken 2.5s ease-in-out infinite;
}

.token-a { left: 270px; top: 250px; animation-delay: -0.4s; }
.token-b { right: 282px; bottom: 170px; animation-delay: -1.2s; }
.destination-token { right: 270px; top: 372px; transform: scale(0.7); opacity: 0.45; }
.destination-token.arrived { animation: destinationBounce 680ms cubic-bezier(.17,1.6,.35,1) infinite alternate; opacity: 1; }

.navigator-note {
  position: absolute;
  left: 6px;
  bottom: 24px;
  width: min(360px, 33vw);
  padding: 18px 20px;
  border: 1px solid rgba(215, 169, 58, 0.54);
  border-radius: 4px 20px 4px 20px;
  background: linear-gradient(145deg, rgba(255, 241, 194, 0.96), rgba(244, 217, 139, 0.9));
  color: #11100C;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
  transform: rotate(-2deg);
}

.navigator-note::after {
  content: "";
  position: absolute;
  right: 22px;
  top: -12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--quest-gold);
  box-shadow: inset 0 0 0 5px rgba(17, 16, 12, 0.28);
}

.navigator-note span { color: var(--oxidized-teal); font-size: 0.62rem; font-weight: 800; }
.navigator-note p { margin: 8px 0 0; font-family: "Zilla Slab", Georgia, serif; font-size: 1.14rem; line-height: 1.25; }

.quest-dial {
  position: absolute;
  right: 14px;
  bottom: 36px;
  display: grid;
  grid-template-columns: repeat(2, 72px);
  gap: 10px;
  transform: rotate(3deg);
}

.quest-dial button {
  height: 62px;
  border: 1px solid rgba(244, 217, 139, 0.58);
  clip-path: polygon(22% 0, 78% 0, 100% 50%, 78% 100%, 22% 100%, 0 50%);
  background: rgba(17, 16, 12, 0.78);
  color: var(--champagne-glow);
  font-size: 0.63rem;
  font-weight: 800;
  cursor: pointer;
}

.quest-dial button:hover { background: rgba(215, 169, 58, 0.24); color: var(--warm-parchment); }

.springing { animation: springPress 460ms cubic-bezier(.18,1.7,.36,1); }
.stage-rotated { transform: rotate(var(--stage-rotation, 0deg)) scale(1.01); }

@keyframes pulsePoint {
  0% { box-shadow: 0 0 0 0 rgba(244, 217, 139, 0.65), 0 0 42px var(--friendly-amber); transform: scale(0.72); }
  70% { box-shadow: 0 0 0 50px rgba(244, 217, 139, 0), 0 0 28px var(--friendly-amber); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(244, 217, 139, 0), 0 0 18px var(--quest-gold); transform: scale(0.86); }
}

@keyframes bobToken {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -11px; }
}

@keyframes destinationBounce {
  from { transform: translateY(0) scale(0.92); }
  to { transform: translateY(-16px) scale(1.08); }
}

@keyframes springPress {
  0% { scale: 1; }
  38% { scale: 0.88; }
  72% { scale: 1.08; }
  100% { scale: 1; }
}

@media (max-width: 900px) {
  .quest-console { min-height: 760px; overflow: auto; }
  html, body { overflow: auto; }
  .honeycomb-stage { width: 760px; height: 760px; transform: scale(0.78); transform-origin: top center; margin-left: calc((100vw - 760px) / 2); }
  .quest-core { width: 318px; height: 276px; left: 221px; top: 238px; }
  h1 { font-size: 3.1rem; }
  .core-copy { font-size: 0.9rem; }
  .cell { width: 140px; height: 122px; }
  .cell-origin { left: 76px; top: 318px; }
  .cell-clue { left: 196px; top: 196px; }
  .cell-companion { left: 196px; top: 444px; }
  .cell-obstacle { right: 196px; top: 196px; }
  .cell-route { right: 196px; top: 444px; }
  .cell-reward { right: 76px; top: 318px; }
  .cell-signal { right: 74px; top: 124px; }
  .navigator-note { width: 310px; left: 30px; bottom: 22px; }
  .quest-dial { right: 34px; }
}