/* ============================================================
   mechproject.css — PS2 Browser-style project detail pages
   v4 — larger scale, gradient-mapped colours, gallery animate
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  background: #000;
  color: #fff;
}

/* Global accent fallback — projects that define --gc-tl in their own <style> block */
html { --acc: var(--gc-tl); }

::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

/* ══════════════════════════════════════════════════════════
   PROJECT TOKENS — set per [data-project]
   --gc-tl/tr/bl/br : corner RGB triplets (the 4 gradient blobs)
   --acc-*          : alias convenience tokens
   ══════════════════════════════════════════════════════════ */
[data-project="mechhead"] {
  /* Corner blob colours (animated background only) */
  --gc-tl:    0, 200, 220;       /* cyan     — top-left  */
  --gc-tr:    140, 60, 220;      /* purple   — top-right */
  --gc-bl:    220, 130, 10;      /* amber    — bot-left  */
  --gc-br:    200, 40, 40;       /* red      — bot-right */

  /* Single UI accent — all coloured UI elements use this */
  --acc:      var(--gc-tl);
  --acc-hex:  #00c8dc;
}

[data-project="nightmare-bar"] {
  --gc-tl:    245, 115, 22;       /* orange      — top-left  */
  --gc-tr:    220, 50,  50;       /* red         — top-right */
  --gc-bl:    180, 60,  10;       /* dark-orange — bot-left  */
  --gc-br:    60,  20,  5;        /* near-black  — bot-right */
  --acc:      var(--gc-tl);
  --acc-hex:  #f57316;
}

[data-project="bo3-maps"] {
  --gc-tl:    132, 204, 22;       /* lime        — top-left  */
  --gc-tr:    60,  160, 10;       /* green       — top-right */
  --gc-bl:    200, 220, 40;       /* yellow-lime — bot-left  */
  --gc-br:    20,  80,  5;        /* dark-green  — bot-right */
  --acc:      var(--gc-tl);
  --acc-hex:  #84cc16;
}

[data-project="dark-matter"] {
  --gc-tl:    16,  185, 129;      /* emerald     — top-left  */
  --gc-tr:    100, 200, 180;      /* teal        — top-right */
  --gc-bl:    10,  120, 80;       /* dark-green  — bot-left  */
  --gc-br:    5,   60,  40;       /* near-black  — bot-right */
  --acc:      var(--gc-tl);
  --acc-hex:  #10b981;
}

[data-project="silent-hill-remaster"] {
  --gc-tl:    148, 163, 184;      /* slate       — top-left  */
  --gc-tr:    80,  100, 130;      /* steel-blue  — top-right */
  --gc-bl:    200, 210, 220;      /* pale-silver — bot-left  */
  --gc-br:    30,  40,  60;       /* deep-navy   — bot-right */
  --acc:      var(--gc-tl);
  --acc-hex:  #94a3b8;
}

[data-project="evil-within-remaster"] {
  --gc-tl:    225, 29,  72;       /* rose-red    — top-left  */
  --gc-tr:    180, 10,  40;       /* crimson     — top-right */
  --gc-bl:    255, 80,  100;      /* pink-red    — bot-left  */
  --gc-br:    80,  5,   20;       /* near-black  — bot-right */
  --acc:      var(--gc-tl);
  --acc-hex:  #e11d48;
}

/* ── Canvas layers ── */
#mp-bg-canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#mp-scanlines {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.10) 2px, rgba(0,0,0,0.10) 4px
  );
}
#mp-orb-canvas {
  position: fixed; inset: 0; z-index: 2;
  mix-blend-mode: screen;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ══ TOP BAR ══ */
.mp-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 4.2rem;
  display: flex; align-items: center;
  padding: 0 3rem;
  background: #000000;
  border-bottom: 1px solid rgba(130, 195, 255, 0.12);
  gap: 2rem;
}

.mp-back {
  display: flex; align-items: center; gap: 0.6rem;
  color: rgba(var(--gc-tl), 1);
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.07em;
  text-shadow:
    -2px -2px 0 #000,  2px -2px 0 #000,
    -2px  2px 0 #000,  2px  2px 0 #000,
    0 0 12px rgba(var(--gc-tl), 0.5);
  transition: color 0.28s ease, text-shadow 0.28s ease;
}
.mp-back:hover {
  color: #fff;
  text-shadow:
    -2px -2px 0 #000,  2px -2px 0 #000,
    -2px  2px 0 #000,  2px  2px 0 #000,
    0 0 18px rgba(var(--gc-tl), 1);
}

.mp-topbar__title {
  flex: 1;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  color: #e8c84a;
  text-align: center;
  text-shadow:
    -2px -2px 0 #000,  2px -2px 0 #000,
    -2px  2px 0 #000,  2px  2px 0 #000,
    0 0 20px rgba(232,200,74,0.55);
}

.mp-topbar__grade {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1.0rem;
  color: rgba(var(--gc-tl), 1);
  letter-spacing: 0.07em;
  white-space: nowrap;
  text-shadow:
    -2px -2px 0 #000,  2px -2px 0 #000,
    -2px  2px 0 #000,  2px  2px 0 #000,
    0 0 12px rgba(var(--gc-tl), 0.7);
}

/* ══ LAYOUT ══ */
.mp-layout {
  position: fixed;
  top: 4.2rem; bottom: 3rem; left: 0; right: 0;
  z-index: 10;
  display: flex;
  overflow: hidden;
  isolation: isolate;
}

.mp-left {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ══ GALLERY ══ */
.mp-gallery-section {
  flex-shrink: 0;
  padding: 1.6rem 2rem 0.6rem;
}

.mp-gallery-heading {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--gc-tl), 1);
  margin-bottom: 0.9rem;
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000,
    0 0 10px rgba(var(--gc-tl), 0.55);
}

.mp-gallery-wrap { position: relative; isolation: isolate; }

.mp-gallery {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0.5rem 0.2rem 1rem;   /* vertical room for expanded cards */
  align-items: center;
}
.mp-gallery::-webkit-scrollbar { display: none; }

.mp-gallery-card {
  flex-shrink: 0;
  width: 230px; height: 145px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  position: relative;
  border: 2px solid rgba(var(--gc-tl), 0.22);
  background: #0a0a14;
  /* transition for hover expand */
  transition:
    width 0.32s cubic-bezier(0.25,0.46,0.45,0.94),
    height 0.32s cubic-bezier(0.25,0.46,0.45,0.94),
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
  z-index: 1;
}

.mp-gallery-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: brightness(0.82) saturate(1.1);
  transition: filter 0.28s ease;
  pointer-events: none;
}

/* Hover EXPAND */
.mp-gallery-card:hover,
.mp-gallery-card:focus-visible {
  width: 320px; height: 200px;
  border-color: rgba(var(--gc-tl), 1);
  box-shadow:
    0 0 0 1px rgba(var(--gc-tl), 0.6),
    0 0 22px rgba(var(--gc-tl), 0.55),
    0 0 50px rgba(var(--gc-tl), 0.20);
  transform: translateY(-8px);
  z-index: 10;
  outline: none;
}
.mp-gallery-card:hover img,
.mp-gallery-card:focus-visible img {
  filter: brightness(1.05) saturate(1.4);
}

/* Active card (selected in lightbox) */
.mp-gallery-card.active {
  border-color: rgba(var(--gc-tl), 0.9);
  box-shadow: 0 0 18px rgba(var(--gc-tl), 0.4), 0 0 5px rgba(var(--gc-tl), 0.7) inset;
}

/* Gallery arrow buttons */
.mp-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 20;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(var(--gc-tl), 0.35);
  color: rgba(var(--gc-tl), 1);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.mp-gallery-arrow:hover,
.mp-gallery-arrow:focus-visible {
  background: rgba(var(--gc-tl), 0.22);
  border-color: rgba(var(--gc-tl), 1);
  box-shadow: 0 0 14px rgba(var(--gc-tl), 0.45);
  outline: none;
}
.mp-gallery-arrow--left  { left:  -0.6rem; }
.mp-gallery-arrow--right { right: -0.6rem; }

.mp-gallery-divider {
  flex-shrink: 0;
  height: 1px; margin: 0 2rem;
  background: linear-gradient(90deg, transparent, rgba(var(--gc-tl), 0.28), transparent);
}

/* ══ BODY TEXT ══ */
.mp-body {
  flex: 1 1 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 1.8rem 2.4rem 2.4rem 2rem;
  scrollbar-width: none;
}
.mp-body::-webkit-scrollbar { display: none; }

.mp-section__label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.80rem;
  letter-spacing: 0.22em;
  color: rgba(var(--gc-tl), 1);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000,
    0 0 10px rgba(var(--gc-tl), 0.5);
}

.mp-section__title {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 1.1rem;
  text-shadow:
    -2px -2px 0 #000,  2px -2px 0 #000,
    -2px  2px 0 #000,  2px  2px 0 #000;
}

.mp-section__body {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  line-height: 1.8;
  color: rgba(230,235,245,0.88);
  margin-bottom: 1.8rem;
  overflow: hidden; /* contain floated inline images */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.75),  1px -1px 0 rgba(0,0,0,0.75),
    -1px  1px 0 rgba(0,0,0,0.75),  1px  1px 0 rgba(0,0,0,0.75);
}
.mp-section__body p  { margin-bottom: 1.1rem; }
.mp-section__body ul { padding-left: 1.6rem; margin-bottom: 1.1rem; }
.mp-section__body li { margin-bottom: 0.7rem; }

/* strong highlights cycle through the 4 gradient colours via nth-of-type */
.mp-section__body strong {
  font-weight: 700;
  color: rgba(var(--gc-tl), 1);
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000,
    0 0 7px rgba(var(--gc-tl), 0.45);
}

.mp-section {
  margin-bottom: 2.6rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(var(--gc-tl), 0.22);
  transition: border-color 0.28s ease;
}
.mp-section:hover {
  border-left-color: rgba(var(--gc-tl), 0.65);
}

.mp-video {
  position: relative;
  width: 100%; padding-bottom: 56.25%;
  border-radius: 5px; overflow: hidden;
  border: 1px solid rgba(var(--gc-tl), 0.22);
  margin-bottom: 1.6rem;
  box-shadow: 0 0 28px rgba(0,0,0,0.65);
}
.mp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* YouTube thumbnail fallback */
.mp-video--thumb {
  display: block;
  text-decoration: none;
  cursor: pointer;
}
.mp-video__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 5px;
  transition: filter 0.32s ease;
}
.mp-video--thumb:hover .mp-video__thumb { filter: brightness(0.6); }
.mp-video__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.9rem;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.mp-video--thumb:hover .mp-video__overlay { opacity: 1; }
.mp-video__play svg { width: 64px; height: 64px; filter: drop-shadow(0 0 12px rgba(var(--gc-tl), 0.8)); }
.mp-video__yt-badge {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: rgb(var(--gc-tl));
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
               0 0 14px rgba(var(--gc-tl), 0.6);
}

.mp-video-caption {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  color: rgba(200,215,230,0.45);
  margin-top: 0.5rem;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.5),  1px -1px 0 rgba(0,0,0,0.5),
    -1px  1px 0 rgba(0,0,0,0.5),  1px  1px 0 rgba(0,0,0,0.5);
}

/* Local video embed (no YouTube) */
.mp-video-local-wrap {
  width: 100%;
  margin-bottom: 1.2rem;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(var(--gc-tl), 0.22);
  box-shadow: 0 0 28px rgba(0,0,0,0.65);
}
.mp-video-local {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  background: #000;
}

/* Two-column video grid */
.mp-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 700px) {
  .mp-video-grid { grid-template-columns: 1fr; }
}

/* Callout */
.mp-callout {
  border-left: 3px solid rgba(var(--acc), 1);
  padding: 0.9rem 1.2rem;
  background: rgba(var(--acc), 0.09);
  border-radius: 0 5px 5px 0;
  margin: 1rem 0 1.2rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(var(--acc), 0.95);
  line-height: 1.7;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.65),  1px -1px 0 rgba(0,0,0,0.65),
    -1px  1px 0 rgba(0,0,0,0.65),  1px  1px 0 rgba(0,0,0,0.65);
}
.mp-callout strong {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.80rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--acc), 1);
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000,
    0 0 10px rgba(var(--acc), 0.55);
}

/* ══ RIGHT SIDEBAR ══ */
.mp-right {
  flex-shrink: 0;
  width: clamp(280px, 30vw, 400px);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  background: transparent;
  border-left: none;
  padding: 1.8rem 1.6rem 3rem 1.4rem;
  scrollbar-width: none;
}
.mp-right::-webkit-scrollbar { display: none; }

.mp-right__header {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.80rem;
  letter-spacing: 0.22em;
  color: #e8c84a;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000,
    0 0 14px rgba(232,200,74,0.55);
  margin-bottom: 1.1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(232,200,74,0.22);
}

.mp-info-list { list-style: none; margin-bottom: 1.4rem; }
.mp-info-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-family: 'Nunito', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
}
.mp-info-list__key {
  color: rgba(200,210,220,0.5);
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.6),  1px -1px 0 rgba(0,0,0,0.6),
    -1px  1px 0 rgba(0,0,0,0.6),  1px  1px 0 rgba(0,0,0,0.6);
}
.mp-info-list__val {
  color: #fff; text-align: right;
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000;
}

/* Grade bar */
.mp-grade-wrap { margin-bottom: 1.5rem; padding-top: 1.4rem; padding-bottom: 1.4rem; }
.mp-grade-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.80rem;
  letter-spacing: 0.14em;
  color: #e8c84a;
  text-transform: uppercase;
  margin-bottom: 0.42rem;
  display: flex; justify-content: space-between;
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000;
}
.mp-grade-right {
  display: flex; align-items: center; gap: 0.5rem;
}
.mp-grade-pct {
  color: rgba(var(--acc), 1);
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000,
    0 0 10px rgba(var(--acc), 0.65);
}
.mp-grade-class {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.mp-grade-track {
  width: 100%; height: 10px;
  background: rgba(255,255,255,0.07);
  border-radius: 5px; overflow: visible;
  border: 1px solid rgba(var(--gc-tl), 0.18);
}
.mp-grade-fill {
  height: 100%; width: 0%;
  border-radius: 5px;
  /* Gradient across the bar using all 4 project colours */
  background: rgba(var(--acc), 1);
  box-shadow: 0 0 14px rgba(var(--acc), 0.75), 0 0 4px rgba(var(--acc), 1) inset;
  transition: width 1.4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes grade-pulse {
  0%   { box-shadow: 0 0 6px rgba(var(--acc), 0.5),  0 0 2px rgba(var(--acc), 1) inset; }
  50%  { box-shadow: 0 0 26px rgba(var(--acc), 1),   0 0 10px #fff inset; }
  100% { box-shadow: 0 0 6px rgba(var(--acc), 0.5),  0 0 2px rgba(var(--acc), 1) inset; }
}
.mp-grade-fill.pulsing { animation: grade-pulse 1.6s ease-in-out infinite; }

/* ══ TAGS — SVG marquee animated outline ══ */
.mp-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }

.mp-tag {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.80rem;
  letter-spacing: 0.05em;
  padding: 0.32rem 0.8rem;
  border-radius: 0px;
  cursor: default;
  color: rgba(var(--acc), 0.90);
  background: transparent;
  border: none;
  position: relative;
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000;
}

/* SVG marquee outline injected by JS sits as first child */
.mp-tag > svg.mp-tag-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* The animated rect stroke */
.mp-tag > svg.mp-tag-outline rect {
  fill: none;
  stroke: rgba(var(--acc), 0.75);
  stroke-width: 1;
  animation: tag-marquee var(--tag-dash-dur, 3s) linear infinite;
}

@keyframes tag-marquee {
  to { stroke-dashoffset: 0; }
}

.mp-tag:hover > svg.mp-tag-outline rect {
  stroke: rgba(200, 240, 255, 1.0);
  filter: drop-shadow(0 0 4px rgba(var(--acc), 0.7));
}

/* Divider + links */
.mp-right-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--acc), 0.22) 50%,
    transparent
  );
  margin: 1rem 0;
}

.mp-links { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.6rem; }
.mp-link {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: rgba(var(--gc-tl), 1);
  text-decoration: none;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(var(--gc-tl), 0.38);
  border-radius: 4px;
  background: rgba(var(--gc-tl), 0.07);
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000,
    0 0 7px rgba(var(--gc-tl), 0.5);
  transition: background 0.22s ease, box-shadow 0.22s ease;
}
.mp-link:hover,
.mp-link:focus-visible {
  background: rgba(var(--gc-tl), 0.18);
  box-shadow: 0 0 16px rgba(var(--gc-tl), 0.35);
  outline: none;
}

/* ══ LIGHTBOX ══ */
.mp-lightbox {
  display: flex;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.90);
  backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mp-lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mp-lightbox img {
  max-width: 90vw; max-height: 80vh;
  border-radius: 5px;
  border: 1px solid rgba(var(--gc-tl), 0.4);
  box-shadow: 0 0 50px rgba(var(--acc), 0.25), 0 0 15px rgba(var(--acc), 0.12);
  transform: scale(0.93);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.35s ease;
}
.mp-lightbox.open img {
  transform: scale(1);
  opacity: 1;
}
.mp-lightbox__close {
  position: absolute; top: 1.2rem; right: 1.6rem;
  background: none; border: none;
  color: rgba(var(--gc-tl), 1); font-size: 2rem; cursor: pointer;
  text-shadow:
    -2px -2px 0 #000,  2px -2px 0 #000,
    -2px  2px 0 #000,  2px  2px 0 #000,
    0 0 12px rgba(var(--gc-tl), 0.8);
  line-height: 1;
}
.mp-lightbox__caption {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  color: rgba(200,215,230,0.65);
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000;
}
.mp-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(var(--gc-tl), 0.35);
  color: rgba(var(--gc-tl), 1); font-size: 1.6rem;
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.22s ease;
}
.mp-lightbox__nav:hover,
.mp-lightbox__nav:focus-visible { background: rgba(var(--gc-tl), 0.22); outline: none; }
.mp-lightbox__nav--prev { left: 1.4rem; }
.mp-lightbox__nav--next { right: 1.4rem; }

/* ══ FOOTER NAV ══ */
.mp-footnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 3rem; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem;
  background: #000000;
  border-top: 1px solid rgba(130, 195, 255, 0.10);
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
}
.mp-footnav a {
  color: rgba(var(--gc-tl), 1);
  text-decoration: none;
  display: flex; align-items: center; gap: 0.5rem;
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000,
    0 0 10px rgba(var(--gc-tl), 0.55);
  transition: color 0.28s ease, text-shadow 0.28s ease;
}
.mp-footnav a:hover,
.mp-footnav a:focus-visible {
  color: #fff;
  text-shadow:
    -1px -1px 0 #000,  1px -1px 0 #000,
    -1px  1px 0 #000,  1px  1px 0 #000,
    0 0 18px rgba(var(--gc-tl), 1);
  outline: none;
}
.mp-footnav__center {
  color: rgba(200,210,220,0.55);
  font-size: 0.80rem;
  letter-spacing: 0.14em;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.4),  1px -1px 0 rgba(0,0,0,0.4),
    -1px  1px 0 rgba(0,0,0,0.4),  1px  1px 0 rgba(0,0,0,0.4);
}

/* ══════════════════════════════════════════════════════════
   MILESTONE ORB BULLETS
   .mp-milestones ul > li  — each li gets an animated orb
   Colour driven by --gc-tl (same as page accent)
   ══════════════════════════════════════════════════════════ */

.mp-milestones {
  margin: 1.4rem 0 1.8rem;
}

.mp-milestones ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.82rem;
}

.mp-milestones li {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.3vw, 1.05rem);
  line-height: 1.55;
  color: rgba(230,235,245,0.90);
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.75),  1px -1px 0 rgba(0,0,0,0.75),
    -1px  1px 0 rgba(0,0,0,0.75),  1px  1px 0 rgba(0,0,0,0.75);
  /* slide-in on load */
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.mp-milestones li.ms-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── The orb bullet ── */
.mp-milestones li .ms-orb {
  flex-shrink: 0;
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255,255,255,0.95) 0%,
    rgba(var(--gc-tl), 1) 45%,
    rgba(var(--gc-tl), 0.3) 100%
  );
  box-shadow:
    0 0 6px  2px rgba(var(--gc-tl), 0.75),
    0 0 14px 3px rgba(var(--gc-tl), 0.35),
    0 0 0 1px rgba(var(--gc-tl), 0.18);
  animation: ms-orb-pulse 2.4s ease-in-out infinite;
}

/* stagger pulse timing per child so they don't all pulse in unison */
.mp-milestones li:nth-child(1)  .ms-orb { animation-delay: 0.00s; }
.mp-milestones li:nth-child(2)  .ms-orb { animation-delay: 0.20s; }
.mp-milestones li:nth-child(3)  .ms-orb { animation-delay: 0.40s; }
.mp-milestones li:nth-child(4)  .ms-orb { animation-delay: 0.60s; }
.mp-milestones li:nth-child(5)  .ms-orb { animation-delay: 0.80s; }
.mp-milestones li:nth-child(6)  .ms-orb { animation-delay: 1.00s; }
.mp-milestones li:nth-child(7)  .ms-orb { animation-delay: 1.20s; }
.mp-milestones li:nth-child(8)  .ms-orb { animation-delay: 1.40s; }
.mp-milestones li:nth-child(9)  .ms-orb { animation-delay: 1.60s; }
.mp-milestones li:nth-child(10) .ms-orb { animation-delay: 1.80s; }

@keyframes ms-orb-pulse {
  0%   {
    box-shadow:
      0 0 5px  2px rgba(var(--gc-tl), 0.65),
      0 0 12px 3px rgba(var(--gc-tl), 0.25),
      0 0 0 1px rgba(var(--gc-tl), 0.15);
    transform: scale(1);
  }
  45%  {
    box-shadow:
      0 0 9px  3px rgba(var(--gc-tl), 1),
      0 0 22px 6px rgba(var(--gc-tl), 0.55),
      0 0 0 1px rgba(var(--gc-tl), 0.35);
    transform: scale(1.22);
  }
  100% {
    box-shadow:
      0 0 5px  2px rgba(var(--gc-tl), 0.65),
      0 0 12px 3px rgba(var(--gc-tl), 0.25),
      0 0 0 1px rgba(var(--gc-tl), 0.15);
    transform: scale(1);
  }
}

/* Orb tail — a short glowing streak to the right of the orb */
.mp-milestones li .ms-orb::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(
    90deg,
    rgba(var(--gc-tl), 0.70) 0%,
    rgba(var(--gc-tl), 0.0)  100%
  );
  animation: ms-tail-pulse 2.4s ease-in-out infinite;
}

.mp-milestones li:nth-child(1)  .ms-orb::after { animation-delay: 0.00s; }
.mp-milestones li:nth-child(2)  .ms-orb::after { animation-delay: 0.20s; }
.mp-milestones li:nth-child(3)  .ms-orb::after { animation-delay: 0.40s; }
.mp-milestones li:nth-child(4)  .ms-orb::after { animation-delay: 0.60s; }
.mp-milestones li:nth-child(5)  .ms-orb::after { animation-delay: 0.80s; }
.mp-milestones li:nth-child(6)  .ms-orb::after { animation-delay: 1.00s; }
.mp-milestones li:nth-child(7)  .ms-orb::after { animation-delay: 1.20s; }
.mp-milestones li:nth-child(8)  .ms-orb::after { animation-delay: 1.40s; }
.mp-milestones li:nth-child(9)  .ms-orb::after { animation-delay: 1.60s; }
.mp-milestones li:nth-child(10) .ms-orb::after { animation-delay: 1.80s; }

@keyframes ms-tail-pulse {
  0%   { opacity: 0.5; width: 14px; }
  45%  { opacity: 1;   width: 26px; }
  100% { opacity: 0.5; width: 14px; }
}

/* Stat cards — sidebar */
.mp-stat-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 1.4rem;
}

.mp-stat-card {
  background: rgba(var(--gc-tl), 0.07);
  border: 1px solid rgba(var(--gc-tl), 0.22);
  border-radius: 5px;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.mp-stat-card__val {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: rgba(var(--gc-tl), 1);
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000,
    0 0 10px rgba(var(--gc-tl), 0.55);
}

.mp-stat-card__label {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(200,210,220,0.5);
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.6), 1px -1px 0 rgba(0,0,0,0.6),
    -1px  1px 0 rgba(0,0,0,0.6), 1px  1px 0 rgba(0,0,0,0.6);
}

/* ── Inline images ─────────────────────────────────────────────────────────── */

/* ─── Inline Image System ──────────────────────────────────────────────────── */
/* Base — shared by all variants */
.mp-inline-img {
  display: block;
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(var(--gc-tl), 0.22);
  margin: 1rem 0;
}
.mp-inline-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.32s ease, transform 0.32s ease;
  filter: brightness(0.88) saturate(1.05);
}
.mp-inline-img:hover img {
  filter: brightness(1.05) saturate(1.3);
  transform: scale(1.015);
}
.mp-inline-img__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.4rem 0.7rem;
  background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 100%);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: rgba(var(--gc-tl), 0.75);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease;
}
.mp-inline-img:hover .mp-inline-img__caption { opacity: 1; }
/* Expand icon hint */
.mp-inline-img::after {
  content: '⤢';
  position: absolute;
  top: 0.5rem; right: 0.6rem;
  font-size: 0.85rem;
  color: rgba(var(--gc-tl), 0.0);
  transition: color 0.28s ease;
  pointer-events: none;
  line-height: 1;
}
.mp-inline-img:hover::after { color: rgba(var(--gc-tl), 0.8); }

/* BANNER — full section width, viewport-scaled height.
   Use for hero/establishing shots at the top of a section. */
.mp-inline-img--banner {
  width: 100%;
  height: clamp(200px, 38vh, 480px);
  margin: 1.2rem 0 1.4rem;
  clear: both;
}

/* WIDE — floats right, landscape ratio, ~45% of column.
   Use for wide screenshots (cityscapes, arenas, environments). */
.mp-inline-img--wide {
  width: clamp(220px, 44%, 420px);
  aspect-ratio: 16 / 9;
  float: right;
  margin: 0.2rem 0 0.8rem 1.4rem;
  clear: none;
  flex-shrink: 0;
}
.mp-inline-img--wide-left {
  width: clamp(220px, 44%, 420px);
  aspect-ratio: 16 / 9;
  float: left;
  margin: 0.2rem 1.4rem 0.8rem 0;
  clear: none;
  flex-shrink: 0;
}

/* SQUARE — floats right, 1:1 ratio, medium size.
   Use for character/object model shots beside text. */
.mp-inline-img--half {
  width: clamp(160px, 26%, 300px);
  aspect-ratio: 1 / 1;
  float: right;
  margin: 0.2rem 0 0.8rem 1.2rem;
  clear: none;
  flex-shrink: 0;
}
.mp-inline-img--half-left {
  width: clamp(160px, 26%, 300px);
  aspect-ratio: 1 / 1;
  float: left;
  margin: 0.2rem 1.2rem 0.8rem 0;
  clear: none;
  flex-shrink: 0;
}

/* THUMB — floats right, 1:1 ratio, compact size.
   Use for tight spaces like beside individual enemy/item cards. */
.mp-inline-img--thumb {
  width: clamp(100px, 16%, 180px);
  aspect-ratio: 1 / 1;
  float: right;
  margin: 0 0 0.6rem 1rem;
  clear: none;
  flex-shrink: 0;
}
.mp-inline-img--thumb-left {
  width: clamp(100px, 16%, 180px);
  aspect-ratio: 1 / 1;
  float: left;
  margin: 0 1rem 0.6rem 0;
  clear: none;
  flex-shrink: 0;
}

/* BREAK ROW — full-width flex row of 2–4 images.
   Wrap in <div class="mp-inline-break">. */
.mp-inline-break {
  display: flex;
  gap: 0.6rem;
  margin: 1.2rem 0;
  clear: both;
}
.mp-inline-break .mp-inline-img {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  height: clamp(140px, 22vw, 260px);
}

/* BREAK ROW TALL — taller variant for 2-image rows */
.mp-inline-break--tall .mp-inline-img {
  height: clamp(180px, 28vw, 340px);
}

/* Inline lightbox — separate from gallery lightbox */
#mp-inline-lightbox {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(12px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
#mp-inline-lightbox.open {
  opacity: 1; visibility: visible; pointer-events: auto;
}
#mp-inline-lightbox img {
  max-width: 88vw; max-height: 80vh;
  border-radius: 5px;
  border: 1px solid rgba(var(--gc-tl), 0.35);
  transform: scale(0.94); opacity: 0;
  transition: transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.35s ease;
  display: block;
}
#mp-inline-lightbox.open img {
  transform: scale(1); opacity: 1;
}
#mp-inline-lightbox .mp-lightbox__caption {
  margin-top: 0.75rem;
  font-size: 0.72rem; letter-spacing: 0.08em;
  color: rgba(var(--gc-tl), 0.5);
}
/* Inline lightbox buttons */
#ilb-close, #ilb-prev, #ilb-next {
  position: fixed;
  background: none;
  border: none;
  color: rgba(var(--gc-tl), 0.55);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.5rem 0.7rem;
  transition: color 0.28s ease;
  z-index: 1101;
}
#ilb-close:hover, #ilb-prev:hover, #ilb-next:hover {
  color: rgba(var(--gc-tl), 1);
}
#ilb-close {
  top: 1.2rem;
  right: 1.4rem;
  font-size: 1.1rem;
}
#ilb-prev {
  left: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
}
#ilb-next {
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
}

/* Contain floated inline images within enemy grid */
.mp-enemy-grid { overflow: hidden; }

/* ── PS2-style entrance animations ───────────────────────────────────────────
   Mirrors the PS2 menu's smooth opacity 0.5s ease reveal.
   Content fades up gently after the page overlay clears (0.55s).
   Each layer is staggered so it feels like the UI breathing in.
────────────────────────────────────────────────────────────────────────────── */
@keyframes mp-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.mp-topbar {
  animation: mp-rise 0.5s cubic-bezier(0.25,0.46,0.45,0.94) both;
  animation-delay: 0.45s;
}

.mp-left {
  animation: mp-rise 0.5s cubic-bezier(0.25,0.46,0.45,0.94) both;
  animation-delay: 0.55s;
}

.mp-right {
  animation: mp-rise 0.5s cubic-bezier(0.25,0.46,0.45,0.94) both;
  animation-delay: 0.68s;
}