/* Mongo Quest: retro-design (camada print + mapa de fases 16-bit). Sem JS, sem CDN. */
@font-face { font-family: "Bungee Shade"; src: url(fonts/bungee-shade-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Bungee"; src: url(fonts/bungee-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Overpass"; font-weight: 400; src: url(fonts/overpass-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Overpass"; font-weight: 700; src: url(fonts/overpass-latin-700-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Overpass Mono"; src: url(fonts/overpass-mono-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Courier Prime"; font-weight: 700; src: url(fonts/courier-prime-latin-700-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Press Start 2P"; src: url(fonts/press-start-2p-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url(fonts/pixelify-sans-latin-400-normal.woff2) format("woff2"); font-display: swap; }

:root {
  color-scheme: light dark;
  --bg: light-dark(#F2E8D5, #14121A);
  --panel: light-dark(#FFFBF2, #1E1B26);
  --ink: light-dark(#1B1B1F, #F2E8D5);
  --muted: light-dark(#6B6355, #A39BB0);
  --edge: light-dark(#1B1B1F, #4A4458);
  --shadow: light-dark(#1B1B1F, #050407);
  --board: #0E0D12;
  --cream: #F2E8D5;
  --red: light-dark(#E4352B, #FF5A4E);
  --blue: light-dark(#1F5FAF, #4D8DFF);
  --green: light-dark(#1E9E5A, #2FD483);
  --coin: light-dark(#F7B500, #FFC93C);
  --dot: light-dark(#d9ccb2, #2a2633);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.5px);
  background-size: 16px 16px;
  color: var(--ink);
  font: 400 17px/1.55 "Overpass", sans-serif;
}
a { color: var(--blue); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* nav bar (print) */
.bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 16px; background: var(--board); color: var(--cream);
  font: 700 13px "Courier Prime", monospace; text-transform: uppercase; letter-spacing: .15em;
}
.bar a { color: var(--cream); text-decoration: none; border-bottom: 2px solid transparent; }
.bar a:hover { border-bottom-color: #FFC93C; }
.status { color: #FF5A4E; white-space: nowrap; }
.status i { font-style: normal; animation: blink 1s steps(1) infinite; }

/* hero */
.hero { max-width: 1160px; margin: 0 auto; padding: 32px 16px 12px; }
.kicker {
  margin: 0 0 8px; color: var(--muted);
  font: 700 13px "Courier Prime", monospace; text-transform: uppercase; letter-spacing: .15em;
}
.hero h1 { margin: 0; font: 400 clamp(28px, 6vw, 46px)/1.1 "Bungee", sans-serif; overflow-wrap: anywhere; }
.hero h1.shade { font: 400 clamp(46px, 11vw, 100px)/1 "Bungee Shade", sans-serif; color: var(--green); }
.sub { margin: 12px 0 0; color: var(--muted); font-style: italic; max-width: 70ch; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 20px 16px 32px; }

/* panel / artigo */
.panel {
  background: var(--panel); border: 3px solid var(--edge); border-radius: 10px;
  box-shadow: 5px 5px 0 var(--shadow);
}
.post { padding: 28px clamp(16px, 4vw, 32px); max-width: 860px; }
.post > :first-child { margin-top: 0; }
.post h2 {
  margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 3px solid var(--edge);
  font: 400 clamp(18px, 3vw, 22px)/1.3 "Bungee", sans-serif;
}
.post h3 { margin: 28px 0 8px; font: 700 19px/1.35 "Overpass", sans-serif; }
.post h4 {
  margin: 0 0 8px; font: 400 13px/1.4 "Bungee", sans-serif;
  text-transform: uppercase; letter-spacing: .08em;
}
.post ul, .post ol { padding-left: 24px; }
.post li { margin: 4px 0; }
code {
  font: 400 14px "Overpass Mono", monospace; padding: 1px 5px;
  border: 1px solid var(--edge); border-radius: 4px; background: var(--bg);
  overflow-wrap: anywhere;
}
pre {
  margin: 16px 0; padding: 16px; overflow-x: auto;
  background: var(--board); color: var(--cream);
  border: 3px solid var(--edge); border-radius: 10px; box-shadow: 5px 5px 0 var(--shadow);
  font: 400 14px/1.5 "Overpass Mono", monospace; white-space: pre;
}
pre code { padding: 0; border: 0; background: none; color: inherit; overflow-wrap: normal; }

/* blocos de destaque */
aside { margin: 20px 0; padding: 16px 20px; border: 3px solid var(--edge); border-radius: 10px; background: var(--bg); }
aside > :first-child { margin-top: 0; }
aside > :last-child { margin-bottom: 0; }
.goal { border-left: 12px solid var(--blue); }
.trap { position: relative; padding-top: 30px; overflow: hidden; }
.trap::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 14px;
  background: repeating-linear-gradient(-45deg, var(--coin) 0 10px, #1B1B1F 10px 20px);
}
.answer {
  padding: 8px 12px; border-left: 6px solid var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent); border-radius: 0 6px 6px 0;
}
.table { overflow-x: auto; margin: 16px 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { border: 2px solid var(--edge); padding: 8px 10px; text-align: left; vertical-align: top; }
th { font: 400 13px "Bungee", sans-serif; letter-spacing: .04em; background: var(--bg); }

/* botões e paginação */
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px; max-width: 860px; }
.btn {
  display: inline-block; padding: 10px 20px; border: 3px solid var(--edge); border-radius: 999px;
  background: var(--coin); color: #1B1B1F; text-decoration: none;
  font: 400 14px "Bungee", sans-serif; box-shadow: 0 5px 0 var(--shadow);
}
.btn.ghost { background: var(--panel); color: var(--ink); }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(5px); box-shadow: none; }

/* mapa de fases (16-bit) */
.map { margin-bottom: 32px; }
.map-title, .legend { font: 400 8px/2 "Press Start 2P", monospace; color: var(--muted); margin: 0 0 12px; }
.stages {
  list-style: none; margin: 0; padding: 20px 16px; display: flex; flex-wrap: wrap; gap: 20px 28px;
  background: var(--board); border: 3px solid var(--edge); border-radius: 10px; box-shadow: 5px 5px 0 var(--shadow);
}
.stages li { position: relative; }
.stages li:not(:last-child)::after {  /* caminho pontilhado até a próxima fase */
  content: ""; position: absolute; top: 50%; left: calc(100% + 4px); width: 20px;
  border-top: 4px dotted #C2C3C7;
}
.stage {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 4px solid #000; color: #FFF1E8; text-decoration: none;
  font: 400 16px "Press Start 2P", monospace; box-shadow: inset -4px -4px 0 rgb(0 0 0 / .35), inset 4px 4px 0 rgb(255 255 255 / .25);
}
.stage:hover { filter: brightness(1.15); }
.s0 { background: #008751; color: #008751; }
.s1 { background: #1D2B53; color: #29ADFF; }
.s2 { background: #7E2553; color: #FF77A8; }
.stage.s0, .stage.s1, .stage.s2 { color: #FFF1E8; }
.legend { margin-top: 12px; }
.legend span { background: none; margin-left: 12px; }
.legend span:first-child { margin-left: 0; }

/* janela RPG + menu de inventário (16-bit) */
.window {
  padding: 20px; border-radius: 8px; color: #FFF1E8;
  background: linear-gradient(#2E66D1, #1C3A8C);
  border: 3px solid #C9E4FF; box-shadow: 0 0 0 3px #0B1640, inset 0 0 0 2px #63A4FF, 5px 5px 0 6px var(--shadow);
  max-width: 860px;
}
.window h2 { margin: 0 0 12px; font: 400 20px "Pixelify Sans", sans-serif; text-shadow: 2px 2px 0 #0B1640; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu a {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  padding: 8px 12px; color: #FFF1E8; text-decoration: none; border-radius: 4px;
}
.menu b { font: 400 8px "Press Start 2P", monospace; color: #F5C842; }
.menu em { font-style: normal; visibility: hidden; color: #F5C842; }
.menu a:hover, .menu a:focus-visible { background: linear-gradient(90deg, #C98A16, transparent); }
.menu a:hover em, .menu a:focus-visible em { visibility: visible; animation: blink 1s steps(1) infinite; }

.foot {
  max-width: 1160px; margin: 0 auto; padding: 0 16px 32px; color: var(--muted);
  font: 700 13px "Courier Prime", monospace; text-transform: uppercase; letter-spacing: .15em;
}

@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
@media (max-width: 520px) { .stages { gap: 16px 24px; } .stages li:not(:last-child)::after { width: 16px; } }