/* ============================================================
   Dirtworm's Games — hub
   Palette lifted from the brass wordmark: #f0cd83 -> #b8862f on #14100c
   ============================================================ */

:root {
  --ink:        #14100c;
  --ink-2:      #1e1811;
  --brass:      #e6bd6d;
  --brass-lit:  #f0cd83;
  --brass-deep: #b8862f;
  --parch:      #e2c894;
  --parch-ink:  #4a3520;
  --muted:      #a8927099;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

  --frame-max: min(92vmin, 780px);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--serif);
  color: var(--brass);
  background:
    radial-gradient(120% 90% at 50% -10%, #241b12 0%, #14100c 55%, #0d0a07 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 3vw, 32px) clamp(12px, 3vw, 28px)
           calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

/* Slow lantern-light wash over the whole page */
.lantern {
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(240, 205, 131, 0.09), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-8%, -6%, 0) scale(1);    }
  to   { transform: translate3d( 8%,  6%, 0) scale(1.15); }
}

/* ---------------- masthead ---------------- */

.masthead {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: clamp(10px, 2vw, 20px);
}

.wordmark {
  display: block;
  width: clamp(230px, 46vw, 380px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
}

.games-word {
  margin: -6px 0 0;
  font-size: clamp(1.1rem, 3.4vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0.62em;
  text-indent: 0.62em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.tagline {
  margin: 0.55em 0 0;
  font-size: clamp(0.82rem, 2.4vw, 0.98rem);
  font-style: italic;
  color: #9c8358;
}

/* ---------------- map ---------------- */

.map-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vw, 22px);
}

.map-frame {
  position: relative;
  width: var(--frame-max);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px #6b4f2a55,
    0 26px 60px -18px rgba(0, 0, 0, 0.85),
    0 0 90px -30px rgba(240, 205, 131, 0.35);
  animation: sway 18s ease-in-out infinite alternate;
}
@keyframes sway {
  from { transform: rotate(-0.35deg) translateY(-3px); }
  to   { transform: rotate( 0.35deg) translateY( 3px); }
}

.map {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: visible;
}

/* Scorched vignette over the parchment */
.burn {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 16px;
  background: radial-gradient(75% 70% at 45% 40%,
    transparent 55%, rgba(60, 34, 10, 0.28) 82%, rgba(24, 12, 4, 0.55) 100%);
  mix-blend-mode: multiply;
}

/* ---------------- map type ---------------- */

.rose-letter,
.start-label,
.start-sub,
.pin-label,
.pin-num,
.pin-note {
  font-family: var(--serif);
  fill: var(--parch-ink);
  paint-order: stroke;
  stroke: #f0e0bb;
  stroke-width: 4;
  stroke-linejoin: round;
}

.rose-letter { font-size: 22px; letter-spacing: 0.08em; opacity: 0.8; }
.start-label { font-size: 24px; letter-spacing: 0.06em; }
.start-sub   { font-size: 17px; font-style: italic; opacity: 0.72; }

.pin-label { font-size: 26px; letter-spacing: 0.03em; }
.pin-note  { font-size: 17px; font-style: italic; opacity: 0.72; }
.pin-num   { font-size: 20px; stroke: none; fill: #3b2a13; letter-spacing: 0.06em; }

/* ---------------- trail ---------------- */

.leg { stroke: #5d431f; stroke-width: 7; opacity: 0.18; }

.leg-dash {
  stroke: var(--brass-deep);
  stroke-width: 6;
  stroke-dasharray: 2 22;
  stroke-linecap: round;
  animation: march 2.4s linear infinite;
}
.leg-dash-faint { stroke: #6b4f2a; opacity: 0.45; animation-duration: 4.5s; }

@keyframes march { to { stroke-dashoffset: -24; } }

.crawler-body { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

/* ---------------- start marker ---------------- */

.start-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 40s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- destinations ---------------- */

.pin {
  cursor: pointer;
  outline: none;
  /* each pin bobs on its own clock; --i is set per pin in app.js */
  animation: bob 5.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.3s);
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.pin-hit { fill: transparent; }

.pin-shadow { fill: rgba(60, 40, 14, 0.28); }

.pin-glow { pointer-events: none; }
.pin-open .pin-glow {
  animation: pulse 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.9);  }
  50%      { opacity: 1;    transform: scale(1.18); }
}

.pin-disc  { fill: url(#brass); stroke: #6b4f2a; stroke-width: 2.5; }
.pin-ring  { fill: none; stroke: #7a5a28; stroke-width: 2; opacity: 0.7; }
.pin-icon  { fill: none; stroke: #4a3512; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }

.pin-locked .pin-disc { fill: url(#brass-dim); opacity: 0.62; }
.pin-locked .pin-icon { opacity: 0.75; }
.pin-locked .pin-label { opacity: 0.72; }

/* Hover / focus / active-in-log states */
.pin:hover  .pin-disc,
.pin:focus-visible .pin-disc,
.pin.is-active .pin-disc { fill: url(#brass); filter: brightness(1.12); }

.pin:hover  .pin-ring,
.pin:focus-visible .pin-ring,
.pin.is-active .pin-ring { stroke: #f0cd83; opacity: 1; }

.pin:focus-visible .pin-focus,
.pin.is-active .pin-focus { opacity: 1; }
.pin-focus {
  opacity: 0;
  fill: none;
  stroke: #f0cd83;
  stroke-width: 2.5;
  stroke-dasharray: 5 6;
}

.pin:hover  .pin-scale,
.pin:focus-visible .pin-scale,
.pin.is-active .pin-scale {
  transform: scale(1.09);
}
.pin-scale {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pin-locked.is-nudged .pin-scale { animation: nudge 420ms ease-in-out; }
@keyframes nudge {
  0%, 100% { transform: translateX(0);    }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX( 5px); }
}

/* ---------------- log panel ---------------- */

.log {
  width: var(--frame-max);
  max-width: 100%;
  padding: clamp(16px, 2.6vw, 24px) clamp(18px, 3vw, 30px);
  border: 1px solid #6b4f2a66;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(240, 205, 131, 0.055), rgba(240, 205, 131, 0.015));
  box-shadow: inset 0 1px 0 rgba(240, 205, 131, 0.12);
  text-align: center;
}

.log-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: #8d764e;
}

.log-title {
  margin: 0.35em 0 0.2em;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  font-weight: 400;
  color: var(--brass-lit);
}

.log-body {
  margin: 0 auto;
  max-width: 56ch;
  font-size: clamp(0.9rem, 2.6vw, 1.02rem);
  line-height: 1.6;
  color: #b9a179;
}

.log-cta {
  display: inline-block;
  margin-top: 1.1em;
  padding: 0.7em 2em;
  border-radius: 999px;
  border: 1px solid #f0cd8355;
  background: linear-gradient(180deg, #f0cd83, #b8862f);
  color: #1c1409;
  font-size: 1.02rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 22px -10px rgba(240, 205, 131, 0.8);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.log-cta:hover,
.log-cta:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 12px 26px -10px rgba(240, 205, 131, 0.95);
}
.log-cta:active { transform: translateY(0); }
.log-cta[hidden] { display: none; }

/* ---------------- foot ---------------- */

.foot {
  position: relative;
  z-index: 1;
  margin-top: clamp(18px, 3vw, 30px);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: #7a663f;
}
.foot p { margin: 0; }

/* ---------------- wide screens: map beside the log ---------------- */

@media (min-width: 1000px) and (min-height: 640px) {
  :root { --frame-max: min(64vh, 680px); }

  body { justify-content: center; padding-top: clamp(12px, 2vh, 26px); }
  .wordmark { width: clamp(230px, 22vw, 320px); }
  .masthead { margin-bottom: clamp(6px, 1.4vh, 16px); }

  .map-wrap {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(24px, 3vw, 46px);
  }
  .log {
    width: min(400px, 34vw);
    text-align: left;
    align-self: center;
  }
  .log-body { margin: 0; }
}

/* ---------------- motion preferences ---------------- */

@media (prefers-reduced-motion: reduce) {
  .lantern, .map-frame, .pin, .start-ring, .compass-star,
  .leg-dash, .pin-open .pin-glow, .waves {
    animation: none !important;
  }
  .crawler { display: none; }
  .pin-scale { transition: none; }
}

/* Compass needle turns very slowly */
.compass-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: rose 90s ease-in-out infinite alternate;
}
@keyframes rose {
  from { transform: rotate(-4deg); }
  to   { transform: rotate( 4deg); }
}

/* Waves breathe */
.waves { animation: swell 7s ease-in-out infinite alternate; }
@keyframes swell {
  from { opacity: 0.32; transform: translateX(0);    }
  to   { opacity: 0.62; transform: translateX(-7px); }
}