/* ============================================================
   marauders.css: /marauders-map/, the Harry Potter terminal.
   Sister page to /jarvis/ and /holocron/: parchment instead of
   glass, ink instead of light. Footprints walk the corridors,
   the oath reveals the map, and mischief can be managed.
   ============================================================ */

/* these two pages load no shared stylesheet, so they carry their own reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img, svg { display: block; max-width: 100%; }
html.smooth { scroll-behavior: smooth; }   /* added after load, so back/forward restoration is not animated */

.mm {
  --ink:      #2a1c0e;         /* iron gall */
  --ink-2:    #5a4126;
  --parch:    #e8d5ab;
  --parch-2:  #d9c091;
  --burn:     #a8783f;
  --line:     rgba(42, 28, 14, 0.28);

  background: #120c07;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  min-height: 100vh;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
}

/* ───────────── the parchment ───────────── */
.mm-sheet {
  position: relative; z-index: 1;
  max-width: 1280px; margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 3rem) clamp(1.1rem, 4vw, 3rem) 3rem;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--parch) 0%, var(--parch-2) 55%, #c9ad7c 100%);
  box-shadow: 0 40px 90px -40px #000;
  min-height: 100vh;
}
.mm-sheet::before {                    /* fibres and foxing */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(94deg, rgba(120,90,50,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(4deg, rgba(120,90,50,.04) 0 1px, transparent 1px 11px),
    radial-gradient(ellipse 22% 16% at 12% 22%, rgba(150,110,60,.16), transparent 70%),
    radial-gradient(ellipse 18% 14% at 84% 62%, rgba(150,110,60,.14), transparent 70%),
    radial-gradient(ellipse 26% 18% at 62% 92%, rgba(150,110,60,.12), transparent 70%);
}
.mm-sheet::after {                     /* burnt edges */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow:
    inset 0 0 90px 20px rgba(90, 55, 20, .35),
    inset 0 0 22px 4px rgba(60, 32, 10, .45);
}
.mm-inner { position: relative; z-index: 2; }

/* ───────────── header ───────────── */
.mm-top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 2px solid var(--line);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.mm-exit { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); }
.mm-exit:hover { color: #000; }
.mm-exit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

.mm-oath {
  margin: clamp(1.6rem, 5vw, 3rem) 0 0.4rem; text-align: center;
  font-style: italic; font-size: clamp(1rem, 2.4vw, 1.3rem); color: var(--ink-2);
}
.mm-title {
  text-align: center; line-height: 1.05;
  font-size: clamp(2rem, 7vw, 4.6rem); letter-spacing: -0.01em; color: var(--ink);
  text-shadow: 0 1px 0 rgba(255,240,210,.4);
}
.mm-sub {
  text-align: center; margin-top: 0.7rem; max-width: 62ch; margin-inline: auto;
  font-size: 0.98rem; line-height: 1.7; color: var(--ink-2);
}
.mm-makers {
  text-align: center; margin-top: 1.1rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--burn);
}

/* ───────────── the map ───────────── */
.mm-map {
  position: relative; margin: clamp(1.6rem, 4vw, 2.6rem) 0;
  border: 2px solid var(--line); border-radius: 3px;
  padding: clamp(1rem, 3vw, 2rem);
  background:
    repeating-linear-gradient(0deg, rgba(42,28,14,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(42,28,14,.05) 0 1px, transparent 1px 26px);
}
.mm-map-h {
  position: absolute; top: -0.75rem; left: 1.2rem; padding: 0 0.5rem;
  background: var(--parch);
  font-family: "JetBrains Mono", monospace; font-size: 0.6rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2);
}

/* corridors: each room is a doorway on the map */
.mm-rooms {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.mm-room {
  position: relative; display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.85rem 0.95rem;
  border: 1.5px solid var(--line); border-radius: 2px;
  background: rgba(255, 245, 220, .28);
  transition: background .3s, transform .3s, border-color .3s;
}
.mm-room:hover { background: rgba(255, 248, 228, .6); transform: translateY(-3px); border-color: var(--ink); }
.mm-room b { font-size: 1.02rem; font-weight: 700; }
.mm-room span {
  font-family: "JetBrains Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.mm-room::after {                      /* a doorway notch */
  content: ""; position: absolute; left: -1.5px; top: 50%; translate: 0 -50%;
  width: 3px; height: 22px; background: var(--parch-2);
}

/* footprints, walking across the map */
.mm-steps { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mm-steps i {
  position: absolute; width: 9px; height: 13px; border-radius: 50% 50% 46% 46%;
  background: rgba(42, 28, 14, .5);
  opacity: 0;
  animation: mm-walk 9s linear infinite;
}
.mm-steps i:nth-child(odd) { transform: rotate(-8deg); }
.mm-steps i:nth-child(even) { transform: rotate(8deg); margin-left: 13px; }
.mm-steps i:nth-child(1) { top: 14%; left: 6%;  animation-delay: 0s; }
.mm-steps i:nth-child(2) { top: 14%; left: 12%; animation-delay: .45s; }
.mm-steps i:nth-child(3) { top: 15%; left: 18%; animation-delay: .9s; }
.mm-steps i:nth-child(4) { top: 15%; left: 24%; animation-delay: 1.35s; }
.mm-steps i:nth-child(5) { top: 16%; left: 30%; animation-delay: 1.8s; }
.mm-steps i:nth-child(6) { top: 62%; left: 74%; animation-delay: 3.2s; }
.mm-steps i:nth-child(7) { top: 62%; left: 68%; animation-delay: 3.65s; }
.mm-steps i:nth-child(8) { top: 61%; left: 62%; animation-delay: 4.1s; }
.mm-steps i:nth-child(9) { top: 61%; left: 56%; animation-delay: 4.55s; }
.mm-steps i:nth-child(10){ top: 60%; left: 50%; animation-delay: 5s; }
@keyframes mm-walk {
  0%   { opacity: 0; }
  6%   { opacity: .75; }
  34%  { opacity: .5; }
  60%  { opacity: 0; }
  100% { opacity: 0; }
}

/* a labelled figure, standing still */
.mm-you {
  position: absolute; right: 1.2rem; top: -0.75rem; padding: 0 0.5rem;
  background: var(--parch);
  display: flex; align-items: center; gap: 0.4rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.mm-you b { width: 9px; height: 13px; border-radius: 50% 50% 46% 46%; background: rgba(42,28,14,.7); }
@media (max-width: 720px) { .mm-you { display: none; } }

/* ───────────── panels ───────────── */
.mm-cols { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .mm-cols { grid-template-columns: 1fr 1fr; } }
.mm-panel {
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1.5px solid var(--line); border-radius: 2px;
  background: rgba(255, 245, 220, .22);
}
.mm-h {
  font-family: "JetBrains Mono", monospace; font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
}
.mm-list { display: flex; flex-direction: column; gap: 0.55rem; }
.mm-item { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.mm-item i { font-style: italic; color: var(--ink-2); }
.mm-spell { display: flex; flex-direction: column; gap: 0.1rem; }
.mm-spell b { font-size: 1rem; }
.mm-spell span { font-size: 0.84rem; color: var(--ink-2); }

/* ───────────── mischief managed ───────────── */
.mm-manage {
  display: block; margin: clamp(1.6rem, 4vw, 2.4rem) auto 0;
  padding: 0.8rem 1.6rem; border: 2px solid var(--ink); border-radius: 2px;
  background: transparent; color: var(--ink);
  font-family: Georgia, serif; font-style: italic; font-size: 1rem;
  cursor: pointer; transition: background .3s, color .3s;
}
.mm-manage:hover { background: var(--ink); color: var(--parch); }
.mm.is-managed .mm-inner { opacity: 0; transition: opacity 1.1s ease; pointer-events: none; }
.mm-done {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center;
  background: #120c07; opacity: 0; pointer-events: none; transition: opacity 1.1s ease;
  text-align: center; padding: 2rem;
}
.mm.is-managed .mm-done { opacity: 1; pointer-events: auto; }
.mm-done p {
  font-style: italic; font-size: clamp(1.2rem, 4vw, 2.2rem); color: var(--parch);
}
.mm-done a {
  display: inline-block; margin-top: 1.6rem;
  font-family: "JetBrains Mono", monospace; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--burn);
  border-bottom: 1px solid var(--burn); padding-bottom: 2px;
}
.mm-done a:hover { color: var(--parch); border-color: var(--parch); }

@media (prefers-reduced-motion: reduce) { .mm-steps i { animation: none; opacity: .5; } }