:root{
  --bg-deep:#161029;
  --bg-panel:#221a3d;
  --bg-panel-2:#2b2150;
  --accent-gold:#f4b942;
  --accent-teal:#5fd0c7;
  --accent-magenta:#e0546b;
  --text-light:#f1ead9;
  --text-dim:#a89bc4;
  --line:#3d3168;
  --px:8px;
}

*{box-sizing:border-box;}

/* Prevent any element from exceeding viewport width */
img, .sprite, .dialogue img, .hero img, .quest img, .savepoint img, .back-to-top {
  max-width: 100%;
  height: auto;
}

/* Ensure page never scrolls horizontally */
html, body {
  overflow-x: hidden;
}

html{scroll-behavior:smooth; overflow-x:hidden;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .glitch::before, .glitch::after{display:none;}
  .shooting-star{display:none !important;}
  .crt-scanline{display:none !important;}
  [data-reveal]{opacity:1 !important; transform:none !important;}
  .back-to-top{opacity:0 !important; pointer-events:none !important;}
}

body{
  margin:0;
  background:var(--bg-deep);
  color:var(--text-light);
  font-family:'Space Mono', monospace;
  line-height:1.6;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle at 20% 10%, #2c2354 0%, transparent 40%),
    radial-gradient(circle at 85% 30%, #23335a 0%, transparent 35%);
}

h1,h2,h3, .pixel-font{
  font-family:'Press Start 2P', monospace;
  line-height:1.5;
}

a{color:inherit;}

/* ── Scroll Progress Bar ─────────────────────────────────────────── */
.progress-bar{
  position:fixed; top:0; left:0; z-index:100;
  height:3px;
  background:linear-gradient(90deg, var(--accent-teal), var(--accent-gold), var(--accent-magenta));
  width:0%;
  transition:width 0.1s linear;
  box-shadow:0 0 8px var(--accent-teal);
}

/* ── CRT Overlay ─────────────────────────────────────────────────── */
.crt-overlay{
  pointer-events:none;
  position:fixed; inset:0; z-index:50;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.12) 0px,
    rgba(0,0,0,0.12) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode:multiply;
  opacity:.35;
}

.crt-scanline{
  pointer-events:none;
  position:fixed; inset:0; z-index:51;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(95, 208, 199, 0.03) 49.9%,
    rgba(95, 208, 199, 0.08) 50%,
    rgba(244, 185, 66, 0.08) 50.1%,
    transparent 100%
  );
  background-size:100% 4px;
  animation:scanline 8s linear infinite;
}
@keyframes scanline{
  0%{transform:translateY(-100%);}
  100%{transform:translateY(100vh);}
}

/* ── Glitch ──────────────────────────────────────────────────────── */
.glitch{
  position:relative;
  display:inline-block;
}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
}
.glitch::before{
  animation:glitch-1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  color:var(--accent-teal);
  z-index:-1;
}
.glitch::after{
  animation:glitch-2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  color:var(--accent-magenta);
  z-index:-2;
}
@keyframes glitch-1{
  0%{ clip-path:inset(40% 0 61% 0); transform:translate(-2px, -2px); }
  20%{ clip-path:inset(92% 0 1% 0); transform:translate(2px, 2px); }
  40%{ clip-path:inset(43% 0 1% 0); transform:translate(-2px, 2px); }
  60%{ clip-path:inset(25% 0 58% 0); transform:translate(2px, -2px); }
  80%{ clip-path:inset(54% 0 7% 0); transform:translate(-2px, -2px); }
  100%{ clip-path:inset(58% 0 43% 0); transform:translate(2px, 2px); }
}
@keyframes glitch-2{
  0%{ clip-path:inset(27% 0 58% 0); transform:translate(2px, -2px); }
  20%{ clip-path:inset(5% 0 58% 0); transform:translate(-2px, 2px); }
  40%{ clip-path:inset(54% 0 7% 0); transform:translate(2px, 2px); }
  60%{ clip-path:inset(73% 0 9% 0); transform:translate(-2px, -2px); }
  80%{ clip-path:inset(40% 0 58% 0); transform:translate(2px, 2px); }
  100%{ clip-path:inset(1% 0 99% 0); transform:translate(-2px, -2px); }
}

.neon-hover{transition:all 0.2s;}
.neon-hover:hover{
  text-shadow:0 0 8px var(--accent-teal), 0 0 16px var(--accent-teal), 0 0 24px var(--accent-magenta);
}

/* ── Pixel Corners & Border ──────────────────────────────────────── */
.pixel-corners{
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px))
  );
}

.pixel-border{
  border:3px solid var(--line);
  background:var(--bg-panel);
}

/* ── Navigation ──────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,48px);
  background:rgba(22,16,41,.9);
  backdrop-filter:blur(4px);
  border-bottom:3px solid var(--line);
}
.nav__logo{font-size:clamp(11px,2vw,14px); color:var(--accent-gold); letter-spacing:1px;}
.nav__links{
  display:flex; gap:clamp(10px,2vw,22px);
  font-size:11px; list-style:none; margin:0; padding:0;
  transition:transform 0.3s ease, opacity 0.3s ease;
}
.nav__links a{
  text-decoration:none; color:var(--text-dim);
  transition:color .15s, text-shadow .15s;
  position:relative;
}
.nav__links a::after{
  content:'';
  position:absolute; bottom:-3px; left:0; width:0; height:2px;
  background:var(--accent-teal);
  transition:width 0.2s ease;
}
.nav__links a:hover::after,
.nav__links a:focus-visible::after{width:100%;}
.nav__links a:hover, .nav__links a:focus-visible{
  color:var(--accent-teal);
  text-shadow:0 0 4px var(--accent-teal);
}

/* ── Hamburger ───────────────────────────────────────────────────── */
.nav__toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:36px; height:36px;
  background:transparent;
  border:2px solid var(--accent-teal);
  cursor:pointer;
  padding:6px;
  z-index:42;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.nav__toggle:hover,
.nav__toggle:focus-visible{
  border-color:var(--accent-gold);
  box-shadow:0 0 10px var(--accent-teal);
  outline:none;
}
.nav__toggle span{
  display:block;
  width:100%; height:2px;
  background:var(--text-light);
  transition:transform 0.3s ease, opacity 0.3s ease;
  transform-origin:center;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.nav__toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

@media (max-width:640px){
  .nav__toggle{display:flex;}
  .nav__links{
    position:fixed; top:0; right:-220px; z-index:41;
    flex-direction:column;
    gap:0;
    min-width:220px; height:100vh;
    background:rgba(22,16,41,.97);
    backdrop-filter:blur(8px);
    padding:80px 32px 32px;
    opacity:0;
    border-left:3px solid var(--line);
    transition: right 0.3s ease, opacity 0.3s ease;
  }
  .nav__links--open{
    right:0;
    opacity:1;
  }
  .nav__links li{border-bottom:1px solid var(--line);}
  .nav__links a{
    display:block;
    padding:16px 0;
    font-size:13px;
  }
  body.nav-open{overflow:hidden;}
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{
  min-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(24px,6vw,60px) 20px;
  position:relative;
  overflow:hidden;
}
.hero__coin{
  font-size:10px; color:var(--accent-gold);
  letter-spacing:2px;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50%{opacity:0;} }

.sprite{
  image-rendering:pixelated;
  margin:18px auto 10px;
  display:block;
  transition:transform 0.3s ease, filter 0.3s ease;
}
.sprite:hover{
  transform:scale(1.12) translateY(-4px);
  filter:drop-shadow(0 0 8px var(--accent-teal)) drop-shadow(0 0 20px var(--accent-magenta));
}

.hero__title{
  font-size:clamp(22px,6vw,44px);
  color:var(--text-light);
  text-shadow:
    var(--mouse-shadow-x, 4px) var(--mouse-shadow-y, 4px) 0 var(--accent-magenta),
    var(--mouse-glow-x, 0px) var(--mouse-glow-y, 0px) 20px rgba(95, 208, 199, 0.25);
  margin:10px 0 4px;
  transition:text-shadow 0.08s ease-out;
}
.hero__subtitle{
  font-family:'Press Start 2P',monospace;
  font-size:clamp(10px,2vw,13px);
  color:var(--accent-teal);
  margin:0 0 26px;
}
.hero__desc{max-width:600px; color:var(--text-dim); font-size:14px; margin-bottom:30px;}
.hero__actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  font-family:'Press Start 2P',monospace;
  font-size:12px;
  padding:16px 26px;
  background:var(--accent-gold);
  color:#241a06;
  border:none;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  box-shadow:6px 6px 0 var(--accent-magenta);
  transition:transform .12s, box-shadow .12s, text-shadow .12s, background .12s;
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  opacity:0;
  transition:opacity 0.3s;
}
.btn:hover::before{opacity:1;}
.btn:hover, .btn:focus-visible{
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--accent-magenta), 0 0 16px var(--accent-gold);
  text-shadow:0 0 8px rgba(244, 185, 66, 0.8);
  outline:none;
}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--accent-magenta);}
.btn--ghost{
  background:transparent;
  color:var(--accent-teal);
  box-shadow:6px 6px 0 var(--bg-panel-2);
  border:2px solid var(--accent-teal);
}
.btn--ghost:hover{
  box-shadow:8px 8px 0 var(--bg-panel-2), 0 0 20px var(--accent-teal);
  text-shadow:0 0 12px var(--accent-teal);
  background:rgba(95, 208, 199, 0.06);
}

/* ── Stars ───────────────────────────────────────────────────────── */
.stars{
  position:absolute; inset:0; overflow:hidden;
}
.star-far{animation:twinkle-far 6s ease-in-out infinite;}
.star-mid{animation:twinkle-mid 5s ease-in-out infinite;}
.star-near{animation:twinkle-near 4s ease-in-out infinite;}
@keyframes twinkle-far{
  0%,100%{opacity:0.2; transform:translateY(0);}
  50%{opacity:0.5; transform:translateY(-8px);}
}
@keyframes twinkle-mid{
  0%,100%{opacity:0.4; transform:translateY(0);}
  50%{opacity:0.7; transform:translateY(-12px);}
}
@keyframes twinkle-near{
  0%,100%{opacity:0.6; transform:translateY(0);}
  50%{opacity:1; transform:translateY(-16px);}
}

/* ── Shooting Stars ──────────────────────────────────────────────── */
.shooting-star{
  position:absolute;
  width:3px; height:3px;
  background:var(--text-light);
  border-radius:50%;
  box-shadow:0 0 6px 2px rgba(244,185,66,0.6);
}
@keyframes shoot{
  0%{transform:translateX(0) translateY(0) scale(1); opacity:1;}
  10%{opacity:1; box-shadow:0 0 12px 4px rgba(244,185,66,0.8);}
  30%{transform:translateX(-180px) translateY(120px) scale(0.6); opacity:0.7;}
  100%{transform:translateX(-400px) translateY(280px) scale(0.1); opacity:0;}
}

/* ── Floating Particles ──────────────────────────────────────────── */
.particles{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  overflow:hidden;
}
@keyframes float-particle{
  0%,100%{transform:translateY(0) translateX(0); opacity:0.1;}
  25%{transform:translateY(-30px) translateX(10px); opacity:0.2;}
  50%{transform:translateY(-60px) translateX(-5px); opacity:0.15;}
  75%{transform:translateY(-20px) translateX(15px); opacity:0.2;}
}

/* ── Sections ────────────────────────────────────────────────────── */
section{
  padding:80px clamp(18px,6vw,60px);
  position:relative;
  z-index:2;
}
.section__eyebrow{
  font-size:10px; color:var(--accent-gold); letter-spacing:2px; margin-bottom:14px;
}
.section__title{
  font-size:clamp(18px,3.4vw,26px);
  margin:0 0 34px;
  color:var(--text-light);
}
.container{max-width:1080px; margin:0 auto;}

/* ── Section Dividers ────────────────────────────────────────────── */
.section-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:12px 20px;
  position:relative;
  z-index:2;
}
.section-divider__line{
  flex:1;
  max-width:120px;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.section-divider__icon{
  font-size:12px;
  color:var(--accent-gold);
  animation:divider-pulse 2.5s ease-in-out infinite;
}
@keyframes divider-pulse{
  0%,100%{opacity:0.4; transform:scale(1);}
  50%{opacity:1; transform:scale(1.15);}
}

/* ── Reveal Animations ───────────────────────────────────────────── */
/* Content is visible by default (no-JS fallback).
   Only hidden when JS confirms it can animate — see initReveal() */
.js-enabled [data-reveal]{
  opacity:0;
  transform:none;
  transition:opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-enabled [data-reveal].revealed{
  opacity:1;
  transform:translateY(0);
}

.js-enabled [data-reveal-stagger] > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.js-enabled [data-reveal].revealed [data-reveal-stagger] > *{
  opacity:1;
  transform:translateY(0);
}

/* ── Dialogue ────────────────────────────────────────────────────── */
.dialogue{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start;
  padding:28px clamp(18px,4vw,36px);
}
.dialogue__text p{margin:0 0 14px; font-size:14.5px; color:var(--text-dim);}
.dialogue__text strong{color:var(--accent-teal);}
@media (max-width:640px){
  .dialogue{grid-template-columns:1fr; text-align:center;}
  .dialogue__avatar{margin:0 auto;}
}

/* ── Typewriter ──────────────────────────────────────────────────── */
.typewriter-cursor{
  display:inline-block;
  color:var(--accent-teal);
  animation:typewriter-blink 0.7s steps(1) infinite;
  margin-left:2px;
  font-weight:700;
}
@keyframes typewriter-blink{
  0%,100%{opacity:0;}
  50%{opacity:1;}
}

/* ── Skills Grid ─────────────────────────────────────────────────── */
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.item{
  padding:20px; position:relative;
  transition:all .3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow:hidden;
}
.item::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, transparent 60%, rgba(95, 208, 199, 0.05));
  opacity:0;
  transition:opacity 0.3s;
}
.item:hover::before{opacity:1;}
.item:hover{
  box-shadow:0 0 20px rgba(95, 208, 199, 0.25), inset 0 0 12px rgba(95, 208, 199, 0.08);
  transform:translateY(-4px) scale(1.02);
  border-color:var(--accent-teal);
}
.item__icon{font-size:20px; margin-bottom:10px; color:var(--accent-gold); display:inline-block;}
.item__name{
  font-family:'Press Start 2P'; font-size:11px; margin:0 0 6px; color:var(--text-light);
}
.item__level{
  font-size:8px; color:var(--accent-magenta); margin-bottom:10px;
  opacity:0.6;
  transition:opacity 0.3s, transform 0.3s;
}
.item:hover .item__level{
  opacity:1;
  transform:scale(1.1);
}
.xp-track{
  height:10px; background:var(--bg-deep); border:2px solid var(--line);
  position:relative;
  overflow:hidden;
}
.xp-track::after{
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 8px,
    rgba(255,255,255,0.05) 8px,
    rgba(255,255,255,0.05) 10px
  );
  pointer-events:none;
}
.xp-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent-teal), var(--accent-gold));
  transition:width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  position:relative;
}
.xp-fill::after{
  content:'';
  position:absolute; right:0; top:0; bottom:0; width:8px;
  background:rgba(255,255,255,0.25);
  filter:blur(2px);
}

/* ── Quest Cards ─────────────────────────────────────────────────── */
.quest{
  padding:24px; margin-bottom:22px;
  display:grid; grid-template-columns:120px 1fr; gap:22px; align-items:start;
  transition:all .3s cubic-bezier(0.22, 1, 0.36, 1);
  position:relative;
}
.quest--media{
  grid-template-columns:260px 1fr;
}
.quest:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(95, 208, 199, 0.2), 0 0 20px rgba(224, 84, 107, 0.12);
  border-color:var(--accent-teal);
}
@media (max-width:600px){ .quest{grid-template-columns:1fr;} }
.quest__tag{
  font-family:'Press Start 2P'; font-size:10px; color:var(--bg-deep);
  background:var(--accent-teal); padding:6px 8px; display:inline-block; margin-bottom:10px;
}
.quest__title{
  font-family:'Press Start 2P'; font-size:14px; margin:0 0 10px; color:var(--text-light);
}
.quest__link{
  color:inherit; text-decoration:none;
  transition:color 0.2s, text-shadow 0.2s;
}
.quest__link:hover{
  color:var(--accent-teal);
  text-shadow:0 0 8px var(--accent-teal);
}
.quest__desc{color:var(--text-dim); font-size:14px; margin:0 0 12px;}
.quest__stack{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; font-size:11px;}
.quest__stack li{
  background:var(--bg-panel-2); border:2px solid var(--line);
  padding:4px 8px; color:var(--accent-gold);
  transition:all 0.2s;
}
.quest:hover .quest__stack li{
  border-color:var(--accent-teal);
}
.quest__thumb{
  width:100%; aspect-ratio:1/1; background:var(--bg-panel-2);
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--line);
  transition:border-color 0.3s, transform 0.3s;
  overflow:hidden;
}
.quest__thumb img{
  width:100%; height:100%; object-fit:cover;
  image-rendering:pixelated;
}
.quest:hover .quest__thumb{
  border-color:var(--accent-gold);
  transform:scale(1.03);
}
.quest:hover .quest__gallery-item{
  border-color:var(--accent-teal);
  box-shadow:0 0 18px rgba(95, 208, 199, 0.35);
}
.quest:hover .quest__gallery-label{
  color:var(--accent-teal);
}

/* ── Locked Quest Card ───────────────────────────────────────────── */
.quest--locked{
  opacity:0.7;
  filter:grayscale(0.4);
  transition:all 0.3s ease;
}
.quest--locked:hover{
  opacity:0.85;
  filter:grayscale(0.2);
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(95, 208, 199, 0.08), 0 0 16px rgba(224, 84, 107, 0.05);
  border-color:var(--line);
}
.quest--locked .quest__tag--locked{
  background:var(--bg-panel-2);
  color:var(--text-dim);
}
.quest--locked .quest__title{color:var(--text-dim);}
.quest--locked .quest__desc{color:var(--text-dim); opacity:0.6;}
.quest--locked .quest__stack li{
  background:var(--bg-deep);
  color:var(--text-dim);
  opacity:0.5;
}
.quest--locked:hover .quest__thumb{
  border-color:var(--line);
  transform:scale(1.02);
}

/* ── Quest Media Gallery ─────────────────────────────────────────── */
.quest__gallery{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;
  margin-top:18px;
  width:100%;
}
.quest__gallery-item{
  position:relative;
  border:2px solid var(--line);
  background:var(--bg-deep);
  overflow:hidden;
  transition:all 0.25s ease;
  aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
}
.quest__gallery-item:hover{
  border-color:var(--accent-teal);
  transform:scale(1.05);
  box-shadow:0 0 18px rgba(95, 208, 199, 0.35);
  z-index:3;
}
.quest__gallery-item img{
  width:100%; height:100%; object-fit:cover;
  display:block;
  transition:filter 0.3s;
}
.quest__gallery-item:hover img{
  filter:brightness(1.1);
}

/* ── Pixel Loading Animation ───────────────────────────────────────── */
/* Loader auto-fades after 3s even without JS — graceful degradation */
.quest__gallery-item::before{
  content:'';
  position:absolute; inset:0; z-index:2;
  background:var(--bg-deep);
  display:flex; align-items:center; justify-content:center;
  animation:loader-fadeout 3.5s ease forwards;
  pointer-events:none;
}
.quest__gallery-item::after{
  content:'';
  position:absolute; top:50%; left:50%; z-index:3;
  width:22px; height:22px;
  margin:-11px 0 0 -11px;
  background:var(--accent-gold);
  clip-path:polygon(
    0 2px, 2px 2px, 2px 0,
    calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
    100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
    2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
  );
  animation:loader-fadeout 3.5s ease forwards, pixel-load 0.9s ease-in-out 3.5s;
}
@keyframes loader-fadeout{
  0%{opacity:1;}
  70%{opacity:1;}
  100%{opacity:0; pointer-events:none;}
}
@keyframes pixel-load{
  0%,100%{
    transform:translate(-50%, -50%) scale(1);
    background:var(--accent-gold);
    box-shadow:0 0 0 0 rgba(244,185,66,0.3);
  }
  33%{
    transform:translate(-50%, -50%) scale(1.2);
    background:var(--accent-teal);
    box-shadow:0 0 14px 4px rgba(95,208,199,0.25);
  }
  66%{
    transform:translate(-50%, -50%) scale(1);
    background:var(--accent-magenta);
    box-shadow:0 0 0 0 rgba(224,84,107,0.2);
  }
}
/* When JS marks as loaded — dismiss loader immediately */
.quest__gallery-item.loaded::before,
.quest__gallery-item.loaded::after{
  animation:none;
  opacity:0;
  pointer-events:none;
}
.quest__gallery-item .quest__gallery-label{
  z-index:4;
}
.quest__gallery-label{
  position:absolute; bottom:0; left:0; right:0;
  font-family:'Press Start 2P',monospace;
  font-size:8px; padding:6px 8px;
  background:rgba(22,16,41,0.88);
  color:var(--accent-gold);
  text-align:center;
  letter-spacing:1px;
  backdrop-filter:blur(2px);
}

/* ── Portrait Media Gallery ─────────────────────────────────────────── */
.quest__gallery--portrait .quest__gallery-item{
  aspect-ratio:9/16;
  background:var(--bg-deep);
}
.quest__gallery--portrait .quest__gallery-item img{
  object-fit:contain;
}
@media (min-width:701px) and (max-width:1100px){
  .quest__gallery--portrait{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .quest__gallery{grid-template-columns:1fr;}
}

/* ── Save Point / Contact ────────────────────────────────────────── */
.savepoint{
  text-align:center; padding:60px clamp(18px,6vw,60px);
  background:var(--bg-panel);
  border-top:3px solid var(--line);
  border-bottom:3px solid var(--line);
}
.savepoint__title{font-size:clamp(16px,3vw,22px); margin-bottom:14px;}
.savepoint__desc{color:var(--text-dim); max-width:460px; margin:0 auto 30px; font-size:14px;}
.savepoint__links{display:flex; flex-wrap:wrap; gap:16px; justify-content:center;}

/* ── Back to Top ─────────────────────────────────────────────────── */
.back-to-top{
  position:fixed; bottom:24px; right:24px; z-index:45;
  font-size:10px;
  padding:14px 18px;
  background:var(--bg-panel);
  color:var(--accent-teal);
  border:2px solid var(--accent-teal);
  cursor:pointer;
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s, background 0.3s;
  box-shadow:0 0 0 transparent;
}
.back-to-top--visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.back-to-top:hover,
.back-to-top:focus-visible{
  background:var(--bg-panel-2);
  box-shadow:0 0 20px var(--accent-teal), 0 0 40px rgba(95, 208, 199, 0.2);
  color:var(--text-light);
  transform:translateY(-2px);
  outline:none;
}
.back-to-top:active{
  transform:translateY(1px);
}

/* ── Footer ──────────────────────────────────────────────────────── */
footer{
  text-align:center; padding:26px;
  font-size:11px;
  color:var(--text-dim);
  position:relative;
  z-index:2;
}
footer p{font-size:9px;}
.heart{
  color:var(--accent-magenta);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:16px;
  font-size:14px;
  animation:heart-holo 3s ease-in-out infinite;
}
@keyframes heart-holo{
  0%{ transform:scaleX(1); opacity:1; text-shadow:0 0 0 transparent; }
  15%{ transform:scaleX(0.2); opacity:0.5; text-shadow:0 0 10px var(--accent-magenta); }
  35%{ transform:scaleX(-1); opacity:0.8; text-shadow:0 0 4px var(--accent-magenta); }
  50%{ transform:scaleX(-1); opacity:1; text-shadow:0 0 0 transparent; }
  65%{ transform:scaleX(-0.2); opacity:0.5; text-shadow:0 0 10px var(--accent-magenta); }
  85%{ transform:scaleX(1); opacity:0.8; text-shadow:0 0 4px var(--accent-magenta); }
  100%{ transform:scaleX(1); opacity:1; text-shadow:0 0 0 transparent; }
}

/* ── Focus ───────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--accent-gold);
  outline-offset:2px;
}

/* ── Parallax ────────────────────────────────────────────────────── */
.parallax-wrapper{
  border:2px solid transparent;
  border-radius:4px;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
  cursor:pointer;
}
.parallax-wrapper:hover{
  border-color:var(--accent-teal);
  box-shadow:0 0 16px var(--accent-teal), 0 0 40px rgba(95, 208, 199, 0.3);
}
.parallax-wrapper:hover .sprite{
  transform:scale(1.12) translateY(-4px);
  filter:drop-shadow(0 0 8px var(--accent-teal)) drop-shadow(0 0 20px var(--accent-magenta));
}
@media (prefers-reduced-motion: reduce){
  .parallax-wrapper{transform:none !important;}
}