/* ==========================================================================
   Nooremberg — pixel-art portfolio.
   Modern CSS, JRPG soul.
   ========================================================================== */

:root {
  /* Night palette (default) */
  --bg-deep: #0f0a18;
  --bg: #1a1230;
  --bg-2: #2c1d4a;
  --ink: #f1f2da;
  --ink-dim: #c8c4a8;
  --ink-mute: #847d96;

  --c-pink: #ff77a8;
  --c-purple: #7c3f58;
  --c-peach: #ffce96;
  --c-mint: #7db890;
  --c-gold: #ffd966;
  --c-blue: #5fcde4;
  --c-red: #ff4f78;

  --rarity-common: #c8c4a8;
  --rarity-rare: #5fcde4;
  --rarity-epic: #ff77a8;
  --rarity-legendary: #ffd966;

  --shadow-pixel: 4px 4px 0 0 rgba(0,0,0,0.35);
  --shadow-pixel-hover: 6px 6px 0 0 rgba(0,0,0,0.45);
  --shadow-glow: 0 0 24px rgba(255,119,168,0.35);

  --radius: 0;
  --pad: 1rem;

  --font-display: "Press Start 2P", ui-monospace, monospace;
  --font-body: "VT323", ui-monospace, "Courier New", monospace;

  --t-fast: 120ms;
  --t-mid: 240ms;
  --t-slow: 480ms;

  --vh: 100vh;
}

[data-theme="day"] {
  --bg-deep: #ffce96;
  --bg: #fff4d3;
  --bg-2: #f1f2da;
  --ink: #2c1d4a;
  --ink-dim: #3a2858;
  --ink-mute: #6a5a8a;
  --c-pink: #c2185b;
  --c-purple: #7c3f58;
  /* Darken accents so titles/labels stay readable on cream backgrounds */
  --c-peach: #b8492a;   /* terracotta — was #ffce96 */
  --c-gold:  #8a6300;   /* dark amber — was #ffd966 */
  --c-mint:  #2d6a3f;   /* forest    — was #7db890 */
  --c-blue:  #0f5f80;   /* deep ocean — was #5fcde4 */
  --c-red:   #c0294f;
  --shadow-pixel: 4px 4px 0 0 rgba(44,29,74,0.25);
  --shadow-pixel-hover: 6px 6px 0 0 rgba(44,29,74,0.35);
}

/* Day-mode element fixes for spots where accent colors are used as
   BACKGROUNDS (so the dark-on-dark text from the new palette would clash). */
[data-theme="day"] .chip.active { color: var(--bg); }
[data-theme="day"] .card-rarity { color: var(--bg); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.4;
  -webkit-font-smoothing: none;
  font-smooth: never;
  image-rendering: pixelated;
  overflow-x: hidden;
}

img, .pixelated {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

a {
  color: var(--c-blue);
  text-decoration: none;
  border-bottom: 2px dotted currentColor;
  transition: color var(--t-fast);
}
a:hover { color: var(--c-pink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: normal;
  letter-spacing: 0.02em;
  margin: 0 0 1rem;
  line-height: 1.4;
}
h1 { font-size: clamp(1.4rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1rem, 2.4vw, 1.4rem); }
h3 { font-size: clamp(0.85rem, 1.6vw, 1rem); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ==========================================================================
   Background layers — parallax pixel sky, scanlines, particles
   ========================================================================== */

.world-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(124,63,88,0.6), transparent 60%),
    radial-gradient(ellipse at 80% 30%, rgba(95,205,228,0.18), transparent 55%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 60%, var(--bg-2) 100%);
}
[data-theme="day"] .world-bg {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,206,150,1), transparent 60%),
    radial-gradient(ellipse at 80% 0%, rgba(125,184,144,0.5), transparent 50%),
    linear-gradient(180deg, #ffe4b5 0%, #fff4d3 60%, #f1f2da 100%);
}

.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
.star {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--ink);
  box-shadow: 0 0 4px var(--ink);
  animation: twinkle 3s infinite ease-in-out;
}
[data-theme="day"] .stars { display: none; }

.cloud {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.25));
  animation: drift linear infinite;
  font-size: clamp(2rem, 6vw, 4rem);
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.06) 3px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode: multiply;
}

.crt-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 51;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
}

/* Spawned particle squares (legacy charm) */
.particle {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  animation: particle-rise 5s linear forwards;
}

/* ==========================================================================
   HUD — fixed top bar
   ========================================================================== */

.hud {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(15,10,24,0.92);
  border-bottom: 3px solid var(--c-pink);
  backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.5rem 1rem;
}
[data-theme="day"] .hud {
  background: rgba(255,244,211,0.92);
  border-bottom-color: var(--c-purple);
}

.hud-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.hud .stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.hud .stat .label { color: var(--ink-mute); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }
.hud .stat .value { color: var(--c-gold); font-family: var(--font-display); font-size: 0.7rem; }

.hud .heart {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 2px;
  background: var(--c-red);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hud .heart.empty { background: var(--ink-mute); opacity: 0.4; }

.hud-spacer { flex: 1; }

.hud-btn {
  font-family: var(--font-display);
  font-size: 0.55rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-2);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-pixel);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.hud-btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-pixel-hover); background: var(--c-pink); color: #fff; }
.hud-btn:active { transform: translate(2px,2px); box-shadow: 0 0 0 0 transparent; }

/* ==========================================================================
   Generic pixel container / panel
   ========================================================================== */

.panel {
  position: relative;
  background: var(--bg);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-pixel);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.panel.is-light { background: var(--bg-2); }
.panel.is-accent { border-color: var(--c-pink); }
.panel.is-gold { border-color: var(--c-gold); }

.panel-title {
  display: inline-block;
  position: absolute;
  top: -0.85rem;
  left: 1rem;
  background: var(--bg);
  padding: 0 0.5rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--c-gold);
  text-transform: uppercase;
}
.panel.is-accent > .panel-title { color: var(--c-pink); }

.section {
  max-width: 1200px;
  margin: 3rem auto;
  padding: 0 1rem;
}

.section-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.section-header h2 {
  margin: 0;
  color: var(--c-pink);
  text-shadow: 3px 3px 0 var(--bg-deep);
}
.section-header .sub {
  color: var(--ink-mute);
  font-size: 1rem;
  font-family: var(--font-body);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  max-width: 1200px;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
}

.hero-avatar {
  position: relative;
  display: flex;
  justify-content: center;
}
/* Soft moonlight spotlight behind the avatar so dark hair doesn't disappear
   into the dark background. Day mode uses a warm sunbeam instead. */
.hero-avatar::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(255,206,150,0.28) 0%,
    rgba(255,119,168,0.18) 35%,
    rgba(95,205,228,0.10) 60%,
    transparent 75%
  );
  z-index: 0;
  pointer-events: none;
  animation: glow-pulse 4s ease-in-out infinite;
}
[data-theme="day"] .hero-avatar::before {
  background: radial-gradient(
    circle at center,
    rgba(255,206,150,0.55) 0%,
    rgba(255,217,102,0.30) 40%,
    transparent 75%
  );
}
.hero-avatar img {
  position: relative; /* sit above the spotlight */
  z-index: 1;
  width: 200px;
  height: 200px;
  object-fit: contain;
  /* Pixel-art rim outline (4 cardinal drop-shadows) so the silhouette
     stays readable on any background, plus the original drop. */
  filter:
    drop-shadow( 2px  0   0 var(--c-purple))
    drop-shadow(-2px  0   0 var(--c-purple))
    drop-shadow( 0    2px 0 var(--c-purple))
    drop-shadow( 0   -2px 0 var(--c-purple))
    drop-shadow( 4px  4px 0 rgba(0,0,0,0.45));
  animation: bob 2.4s ease-in-out infinite;
  cursor: pointer;
  transition: transform var(--t-fast);
}
.hero-avatar img:hover { transform: scale(1.04); }
.hero-avatar .platform {
  position: absolute;
  bottom: -10px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 16px;
  background:
    repeating-linear-gradient(90deg, var(--c-purple) 0 12px, var(--bg-2) 12px 24px);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-pixel);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 2.8rem);
  color: var(--c-peach);
  text-shadow:
    3px 3px 0 var(--c-purple),
    6px 6px 0 var(--bg-deep);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.hero-tag {
  font-size: 1.1rem;
  color: var(--ink-dim);
  margin-bottom: 1rem;
}
.hero-tag .blink { animation: blink 1s steps(2) infinite; color: var(--c-pink); }

.dialogue {
  position: relative;
  background: var(--bg-2);
  border: 3px solid var(--ink);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-pixel);
  margin-bottom: 1rem;
  min-height: 5rem;
}
.dialogue::before {
  content: "";
  position: absolute;
  left: -16px; top: 1.25rem;
  width: 0; height: 0;
  border: 8px solid transparent;
  border-right-color: var(--ink);
}
.dialogue::after {
  content: "";
  position: absolute;
  left: -10px; top: 1.4rem;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-right-color: var(--bg-2);
}
.dialogue .typed::after {
  content: "▋";
  color: var(--c-pink);
  animation: blink 0.7s steps(2) infinite;
  margin-left: 2px;
}
.dialogue-controls {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.9rem;
  color: var(--ink-mute);
}
.dialogue-dots span {
  width: 8px; height: 8px;
  background: var(--ink-mute);
  display: inline-block;
  margin-right: 4px;
  border: 1px solid var(--ink);
}
.dialogue-dots span.on { background: var(--c-pink); }

.social-row {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.5rem;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg);
  border: 3px solid var(--ink);
  padding: 0.5rem 0.75rem;
  box-shadow: var(--shadow-pixel);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.55rem;
  text-transform: uppercase;
  border-bottom-style: solid;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.social-btn:hover {
  transform: translate(-2px,-2px);
  box-shadow: var(--shadow-pixel-hover);
  background: var(--c-pink);
  color: #fff;
}

/* ==========================================================================
   Main menu — game-style tile grid
   ========================================================================== */

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem auto 3rem;
  max-width: 1200px;
  padding: 0 1rem;
}
.menu-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-pixel);
  padding: 1rem;
  text-align: left;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  border-bottom-style: solid;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  overflow: hidden;
}
.menu-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(255,119,168,0.15) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-mid);
}
.menu-tile:hover {
  transform: translate(-3px,-3px);
  box-shadow: var(--shadow-pixel-hover);
  border-color: var(--c-pink);
}
.menu-tile:hover::after { opacity: 1; }

.menu-tile .icon {
  font-size: 2rem;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.4));
}
.menu-tile .title {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--c-gold);
}
.menu-tile .desc { font-size: 1rem; color: var(--ink-dim); }
.menu-tile .arrow {
  position: absolute;
  right: 0.75rem; bottom: 0.75rem;
  color: var(--c-pink);
  font-family: var(--font-display);
  font-size: 0.6rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.menu-tile:hover .arrow { opacity: 1; transform: translateX(0); }

/* ==========================================================================
   Skill cards (trading-card style)
   ========================================================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

.card {
  --rarity: var(--rarity-common);
  position: relative;
  perspective: 1000px;
  height: 340px;
  cursor: pointer;
}
.card-inner {
  position: relative;
  width: 100%; height: 100%;
  transition: transform var(--t-slow);
  transform-style: preserve-3d;
}
.card.is-flipped .card-inner { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 3px solid var(--rarity);
  box-shadow: var(--shadow-pixel);
  background: linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
}
.card-face.back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--bg-2) 0%, var(--bg) 100%);
  padding: 1rem 1rem 2.2rem; /* extra bottom space so text never collides with "back" hint */
  font-size: 1rem;
  line-height: 1.35;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-face.back > p {
  /* Long lore safety: take remaining space, clip what doesn't fit, fade the bottom. */
  flex: 1 1 auto;
  min-height: 0;
  margin: 0.5rem 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 85%, transparent 100%);
}

.card-rarity {
  position: absolute;
  top: -10px; right: -10px;
  background: var(--rarity);
  color: #1a1230;
  font-family: var(--font-display);
  font-size: 0.5rem;
  padding: 4px 6px;
  text-transform: uppercase;
  border: 2px solid #1a1230;
  z-index: 2;
}

.card-art {
  height: 140px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, rgba(255,119,168,0.1), rgba(95,205,228,0.1));
  border: 2px dashed var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  overflow: hidden;
  position: relative;
}
.card-art img {
  width: 80px; height: 80px;
  object-fit: contain;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.5));
  animation: bob 3s ease-in-out infinite;
}

.card-name {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--c-peach);
  margin-bottom: 0.25rem;
  text-shadow: 2px 2px 0 var(--bg-deep);
}
.card-type {
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.card-stats { margin-top: auto; }
.stat-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.stat-row .key {
  width: 70px;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-size: 0.8rem;
}
.bar {
  flex: 1;
  height: 10px;
  background: var(--bg-deep);
  border: 2px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.bar > span {
  display: block;
  height: 100%;
  background:
    repeating-linear-gradient(90deg, var(--c-mint) 0 6px, #5a9468 6px 8px);
  width: 0;
  transition: width 1s ease-out;
}
.bar.high > span { background: repeating-linear-gradient(90deg, var(--c-gold) 0 6px, #b89a3a 6px 8px); }
.bar.mid > span { background: repeating-linear-gradient(90deg, var(--c-blue) 0 6px, #3a7a8c 6px 8px); }
.bar.low > span { background: repeating-linear-gradient(90deg, var(--c-pink) 0 6px, #a04068 6px 8px); }

.card-flip-hint {
  position: absolute;
  bottom: 6px; right: 8px;
  font-size: 0.7rem;
  color: var(--ink-mute);
  pointer-events: none;
}

/* Filters */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.chip {
  font-family: var(--font-display);
  font-size: 0.55rem;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.chip:hover { background: var(--c-pink); color: #fff; }
.chip.active { background: var(--c-gold); color: #1a1230; border-color: var(--c-gold); }

/* ==========================================================================
   Quest log (experience timeline)
   ========================================================================== */

.questlog { display: flex; flex-direction: column; gap: 1.25rem; }

.quest {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1rem;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-pixel);
  padding: 1rem;
  background: var(--bg);
  position: relative;
}
.quest::before {
  content: "QUEST";
  position: absolute;
  top: -0.7rem; left: 1rem;
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: var(--c-gold);
  background: var(--bg);
  padding: 0 0.4rem;
}
.quest.completed::before { content: "QUEST · COMPLETE"; color: var(--c-mint); }
.quest.active::before { content: "QUEST · ACTIVE"; color: var(--c-pink); }

/* Legendary quests — highlighted current epic. Wins over .active label. */
.quest.legendary {
  border-color: var(--c-gold);
  box-shadow:
    var(--shadow-pixel),
    0 0 28px rgba(255,217,102,0.35);
  background:
    linear-gradient(160deg, var(--bg) 0%, var(--bg-2) 100%);
}
.quest.legendary::before {
  content: "★ LEGENDARY QUEST · ACTIVE ★";
  color: var(--c-gold);
  letter-spacing: 0.08em;
  animation: blink 1.6s steps(2) infinite;
}
.quest.legendary h3 { color: var(--c-gold); text-shadow: 2px 2px 0 var(--bg-deep); }
.quest.legendary .quest-icon { border-color: var(--c-gold); }
.quest.legendary .badge { border-color: var(--c-pink); color: var(--c-pink); }

/* Emoji-based icons for cards / quests when no PNG is provided. */
.card-art .emoji-icon {
  font-size: 4.2rem;
  line-height: 1;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.5));
  animation: bob 3s ease-in-out infinite;
}
.quest-icon .emoji-icon {
  font-size: 2.4rem;
  line-height: 1;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.4));
}

/* Theme-variant icons (e.g. DeepMask logo): show one per theme. */
.theme-icon {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}
.theme-icon-day { display: none; }
[data-theme="day"] .theme-icon-night { display: none; }
[data-theme="day"] .theme-icon-day   { display: inline-block; }

.quest-icon {
  width: 64px; height: 64px;
  background: var(--bg-2);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.quest-icon img { width: 56px; height: 56px; object-fit: contain; }

.quest h3 {
  margin: 0 0 0.25rem;
  color: var(--c-peach);
  font-size: 0.8rem;
}
.quest .meta {
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
}
.quest .lore { font-size: 1.05rem; color: var(--ink-dim); }

.quest .badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.badge {
  font-family: var(--font-display);
  font-size: 0.5rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg-2);
  border: 2px solid var(--c-gold);
  color: var(--c-gold);
  text-transform: uppercase;
}

.quest .reward {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--c-gold);
}
.quest .reward::before {
  content: "+";
  margin-right: 0.2rem;
}

@media (max-width: 540px) {
  .quest { grid-template-columns: 1fr; }
  .quest-icon { width: 48px; height: 48px; }
}

/* ==========================================================================
   About / dialogue panels
   ========================================================================== */

.lore {
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--ink);
}
.lore b { color: var(--c-peach); }

/* ==========================================================================
   Footer
   ========================================================================== */

footer.foot {
  max-width: 1200px;
  margin: 4rem auto 2rem;
  padding: 1rem;
  text-align: center;
  color: var(--ink-mute);
  font-size: 0.95rem;
}
footer.foot .sig {
  font-family: var(--font-display);
  font-size: 0.55rem;
  color: var(--c-gold);
}

/* ==========================================================================
   Modal / dialog
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fade-in 0.18s ease-out;
}
.modal {
  background: var(--bg);
  border: 4px solid var(--c-pink);
  box-shadow: var(--shadow-pixel);
  max-width: 520px;
  width: 100%;
  padding: 1.5rem;
  position: relative;
  animation: zoom-in 0.22s ease-out;
}
.modal h3 { color: var(--c-pink); margin-top: 0; }
.modal .close {
  position: absolute;
  top: 0.5rem; right: 0.75rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.7rem;
}
.modal .close:hover { color: var(--c-pink); }

/* ==========================================================================
   Toast
   ========================================================================== */

.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 3px solid var(--c-gold);
  box-shadow: var(--shadow-pixel);
  padding: 0.75rem 1rem;
  z-index: 80;
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: var(--c-gold);
  animation: toast-in 0.2s ease-out, toast-out 0.4s ease-in 2.6s forwards;
  white-space: nowrap;
}

/* ==========================================================================
   Secret room (shows when unlocked)
   ========================================================================== */

.secret { display: none; }
body.secret-unlocked .secret { display: block; animation: glow-pulse 1.6s ease-in-out infinite; }

.secret-chest {
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 55;
  font-size: 1.6rem;
  width: 44px; height: 44px;
  border: 2px solid var(--c-gold);
  background: rgba(15,10,24,0.7);
  box-shadow: var(--shadow-pixel);
  border-radius: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--t-fast), transform var(--t-fast);
  display: flex; align-items: center; justify-content: center;
}
.secret-chest:hover { opacity: 1; transform: rotate(-6deg) scale(1.1); }
body.secret-unlocked .secret-chest {
  opacity: 1;
  animation: glow-pulse 1.4s ease-in-out infinite;
}

.achievement-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.achievement {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--bg);
  border: 3px solid var(--ink-mute);
  font-size: 1rem;
}
.achievement.unlocked { border-color: var(--c-gold); }
.achievement .a-icon { font-size: 1.6rem; }
.achievement .a-title { font-family: var(--font-display); font-size: 0.55rem; color: var(--c-gold); margin-bottom: 0.2rem; }
.achievement.locked .a-icon, .achievement.locked .a-title, .achievement.locked .a-desc {
  filter: grayscale(1) brightness(0.6);
}

/* ==========================================================================
   Metal Gear "?!" alert + Snake cameo
   ========================================================================== */

.mgs-alert {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 95;
  width: 96px;
  height: 96px;
  background: #ffd966;
  border: 4px solid #1a1230;
  box-shadow: 6px 6px 0 0 rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: #1a1230;
  font-size: 4rem;
  font-weight: bold;
  animation: mgs-pop 0.18s ease-out forwards, mgs-blink 0.22s steps(2) 0.2s 4;
}
.mgs-alert::before {
  content: "ALERT";
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--c-red);
  background: #1a1230;
  padding: 2px 6px;
  letter-spacing: 0.15em;
  white-space: nowrap;
}
.mgs-alert-fade {
  animation: mgs-fade 0.55s ease-in forwards;
}

@keyframes mgs-pop {
  0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes mgs-blink {
  50% { opacity: 0.35; }
}
@keyframes mgs-fade {
  to { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
}

.mgs-snake-wrap {
  position: fixed;
  bottom: 60px;
  left: -260px;
  z-index: 94;
  pointer-events: none;
  animation: mgs-slither 5s linear forwards;
}
/* Soft jungle-green pool under Snake so boots/feet don't vanish into the dark bg */
.mgs-snake-wrap::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(168, 230, 160, 0.7) 0%,
    rgba(125, 184, 144, 0.45) 40%,
    transparent 72%
  );
  z-index: -1;
  pointer-events: none;
}
.mgs-snake {
  position: relative;
  display: block;
  width: 180px;
  height: auto;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 6px rgba(168, 230, 160, 0.95))
    drop-shadow(0 0 14px rgba(125, 184, 144, 0.75))
    drop-shadow(0 0 28px rgba(74, 158, 95, 0.45))
    drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
@keyframes mgs-slither {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 520px)); }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
}