/* Visual inspirado nas janelas de RPG de 16 bits (Dragon Quest, Phantasy Star). */

:root {
  --ceu: #070918;
  --ceu-2: #121a44;
  --janela: #0d1640;
  --janela-2: #16215a;
  --borda: #e9ecff;
  --texto: #eef0ff;
  --suave: #aab1d8;
  --ouro: #ffd25e;
  --ouro-escuro: #c7932a;
  --rosa: #ff6fae;
  --ciano: #5fd4ff;
  --verde: #6fe39a;
  --roxo: #b48cff;
  --raio: 8px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--texto);
  background: radial-gradient(ellipse at 50% -10%, #263a8f 0%, var(--ceu-2) 35%, var(--ceu) 75%) fixed, var(--ceu);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.65;
  min-height: 100vh;
}

/* Linhas de TV de tubo por cima de tudo, bem suaves. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
  z-index: 100;
}

/* Céu estrelado em pixels. */
.estrelas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 140px 90px, #c9d4ff 50%, transparent 51%),
    radial-gradient(2px 2px at 260px 40px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 330px 170px, #ffe9a8 50%, transparent 51%),
    radial-gradient(2px 2px at 90px 210px, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 210px 260px, #c9d4ff 50%, transparent 51%);
  background-size: 380px 300px;
  opacity: .45;
  animation: brilho 6s steps(2) infinite;
}
@keyframes brilho { 50% { opacity: .25; } }

a { color: var(--ouro); }
::selection { background: var(--ouro); color: #1a1a1a; }

h1, h2, h3, .filtro, .menu a, .lingua button, .marca, .titulo-secao, .botao, .ver, .etiqueta {
  font-family: "Pixelify Sans", "Press Start 2P", monospace;
}

/* ---------- a janela de RPG ---------- */
.janela {
  background: linear-gradient(180deg, var(--janela-2), var(--janela));
  border: 3px solid var(--borda);
  border-radius: var(--raio);
  box-shadow:
    0 0 0 3px #05071a,
    inset 0 0 0 2px #05071a,
    0 10px 30px rgba(0, 0, 0, .45);
}

/* ---------- topo ---------- */
.topo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 72px 16px 24px;
}
.heroi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
.retrato { padding: 8px; display: grid; place-items: center; }
.perfil {
  display: block;
  width: 160px;
  height: 160px;
  border-radius: 4px;
  image-rendering: pixelated;
}
.fala { position: relative; padding: 22px 28px 30px; }
.fala h1 {
  margin: 0 0 10px;
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.3rem, 4.5vw, 2.3rem);
  color: var(--ouro);
  text-shadow: 3px 3px 0 #7a2bd6, 6px 6px 0 rgba(0, 0, 0, .5);
  letter-spacing: 2px;
}
.subtitulo {
  margin: 0;
  font-family: "Pixelify Sans", monospace;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.55;
  color: var(--texto);
}
.seta {
  position: absolute;
  right: 18px;
  bottom: 8px;
  color: var(--borda);
  font-size: .8rem;
  animation: piscar 1s steps(1) infinite;
}
@keyframes piscar { 50% { opacity: 0; } }

/* Menu com cursor ▶ estilo RPG */
.menu {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 28px;
  padding: 12px 20px;
}
.menu a, .filtro { position: relative; }
.menu a {
  color: var(--texto);
  text-decoration: none;
  font-size: 1.1rem;
  padding: 2px 0 2px 18px;
}
.menu a::before, .filtro::before, .cartao .ver::before {
  content: "▶";
  position: absolute;
  left: 0;
  font-size: .7em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ouro);
  opacity: 0;
}
.menu a:hover, .menu a:focus-visible { color: var(--ouro); }
.menu a:hover::before, .menu a:focus-visible::before { opacity: 1; animation: piscar 1s steps(1) infinite; }

/* ---------- conteúdo ---------- */
main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 32px; }

.titulo-secao {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.5rem;
  color: var(--ouro);
  margin: 24px 0 18px;
}
.titulo-secao::after {
  content: "";
  flex: 1;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--borda) 0 6px, transparent 6px 12px);
  opacity: .35;
}

.filtros { display: flex; gap: 6px 22px; flex-wrap: wrap; margin-bottom: 26px; }
.filtro {
  background: none;
  border: 0;
  color: var(--suave);
  font-size: 1.1rem;
  padding: 4px 0 4px 18px;
  cursor: pointer;
}
.filtro:hover { color: var(--texto); }
.filtro.ativo { color: var(--ouro); }
.filtro.ativo::before { opacity: 1; }

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 26px;
}

/* Cartão = janela de RPG com uma "tela" de TV em cima */
.cartao {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  padding: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cartao:hover, .cartao:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 0 0 3px #05071a, inset 0 0 0 2px #05071a, 0 0 0 6px var(--ouro), 0 16px 34px rgba(0, 0, 0, .55);
  outline: none;
}

.capa, .miniatura {
  position: relative;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
}
/* brilho de vidro de CRT */
.capa::after, .miniatura::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, .12), transparent 60%),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .45));
  border-radius: inherit;
}
.capa { aspect-ratio: 8 / 7; }
.capa img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }

.corpo { padding: 14px 8px 6px; display: flex; flex-direction: column; flex: 1; }
.corpo h3 { font-size: 1.35rem; line-height: 1.25; margin: 10px 0 8px; color: var(--texto); }
.resumo { color: var(--suave); font-size: .95rem; margin: 10px 0 0; flex: 1; }
.cartao .ver {
  position: relative;
  margin-top: 16px;
  padding-left: 18px;
  color: var(--ouro);
  font-size: 1.05rem;
}
.cartao .ver::before { opacity: 1; }
.cartao:hover .ver::before { animation: piscar .6s steps(1) infinite; }

/* etiquetas de tipo e situação */
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta {
  font-size: .85rem;
  padding: 1px 10px;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: rgba(0, 0, 0, .25);
}
.tipo-port { color: var(--ciano); }
.tipo-traducao { color: var(--verde); }
.tipo-romhack { color: var(--rosa); }
.tipo-emulador { color: var(--roxo); }
.tipo-ferramenta { color: #ffa94d; }
.status-concluido { color: var(--verde); }
.status-em-andamento { color: var(--ouro); }
.status-pausado { color: var(--suave); }

/* consoles como etiquetas de cartucho */
.plataforma { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.console {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  color: #fff;
  background: #3b3f5c;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35);
}
.console.md { background: #1c1c1c; box-shadow: inset 0 -2px 0 #d0021b; }
.console.snes { background: #5b4a9e; }
.console.sms { background: #b3122a; }
.console.amiga { background: #e66b1e; }
.console.gba { background: #4a3fb3; }
.console.msx { background: #2d6fb5; }
.console.web { background: #2b7a5f; }
.seta-console { color: var(--ouro); font-size: .65rem; }

.vazio { text-align: center; color: var(--suave); }

/* ---------- sobre ---------- */
.sobre { margin-top: 64px; padding: 24px 28px; }
.sobre h2 { font-size: 1.4rem; color: var(--ouro); margin: 0 0 8px; }
.sobre p { margin: 0 0 10px; }
.aviso { color: var(--suave); font-size: .92rem; }

footer { text-align: center; color: var(--suave); font-size: .85rem; padding: 28px 16px 44px; }

/* ---------- botões ---------- */
.links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.botao {
  display: inline-block;
  background: linear-gradient(180deg, #ffe08a, var(--ouro));
  color: #241a00;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 7px 16px 9px;
  border-radius: 6px;
  box-shadow: inset 0 -4px 0 var(--ouro-escuro), 0 3px 0 #05071a;
  transition: transform .1s;
}
.botao:hover { filter: brightness(1.08); }
.botao:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 var(--ouro-escuro), 0 1px 0 #05071a; }

/* ---------- botões de língua ---------- */
.lingua {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 10;
}
.lingua button {
  font-size: .9rem;
  background: var(--janela);
  color: var(--suave);
  border: 2px solid var(--borda);
  border-radius: 6px;
  padding: 3px 10px;
  cursor: pointer;
}
.lingua button.ativo { background: var(--ouro); color: #241a00; border-color: var(--ouro); }

/* ---------- página do projeto ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 130px 0 16px;
}
.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ouro);
  font-size: 1.2rem;
  font-weight: 600;
}
.marca img { border: 2px solid var(--borda); border-radius: 4px; image-rendering: pixelated; }
.voltar { color: var(--suave); text-decoration: none; font-family: "Pixelify Sans", monospace; font-size: 1.05rem; }
.voltar:hover { color: var(--ouro); }

.projeto-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  margin-top: 12px;
}
.projeto-info { padding: 24px 26px; }
.projeto-topo h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.2;
  color: var(--ouro);
  text-shadow: 3px 3px 0 #7a2bd6;
  margin: 12px 0 12px;
}
.projeto-capa {
  display: block;
  width: 100%;
  border: 3px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 0 0 3px #05071a, 0 14px 34px rgba(0, 0, 0, .5);
  image-rendering: pixelated;
  background: #000;
}
.resumo-grande { font-size: 1.08rem; color: var(--texto); margin: 14px 0 0; }

.colunas {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
  margin-top: 44px;
}
.texto p { color: var(--suave); margin: 0 0 16px; font-size: 1.02rem; }
.texto p:first-child::first-letter {
  float: left;
  font-family: "Press Start 2P", monospace;
  font-size: 2.2rem;
  line-height: 1;
  margin: 6px 10px 0 0;
  color: var(--ouro);
}
.destaques { padding: 20px 22px; align-self: start; }
.destaques h2, .bloco h2 { font-size: 1.3rem; color: var(--ouro); margin: 0 0 12px; }
.destaques ul { margin: 0; padding: 0; list-style: none; }
.destaques li { position: relative; padding-left: 20px; margin-bottom: 10px; }
.destaques li::before { content: "▶"; position: absolute; left: 0; top: .2em; font-size: .7em; color: var(--ouro); }

.bloco { margin-top: 48px; }
.video {
  width: 100%;
  max-width: 780px;
  display: block;
  border: 3px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 0 0 3px #05071a;
  background: #000;
}

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 20px;
}
.galeria figure { margin: 0; }
.miniatura {
  display: block;
  width: 100%;
  padding: 0;
  border: 3px solid var(--borda);
  box-shadow: 0 0 0 3px #05071a;
  cursor: zoom-in;
  aspect-ratio: 8 / 7;
  transition: transform .15s;
}
.miniatura:hover, .miniatura:focus-visible { transform: scale(1.03); border-color: var(--ouro); outline: none; }
.miniatura img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.galeria figcaption { color: var(--suave); font-size: .9rem; margin-top: 8px; }

.ampliada {
  max-width: min(96vw, 1100px);
  background: var(--janela);
  border: 3px solid var(--borda);
  border-radius: var(--raio);
  padding: 12px;
  color: var(--texto);
  cursor: zoom-out;
}
.ampliada::backdrop { background: rgba(3, 4, 14, .88); }
.ampliada img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; image-rendering: pixelated; border-radius: 4px; }
.ampliada p { text-align: center; margin: 10px 0 0; font-family: "Pixelify Sans", monospace; font-size: 1.1rem; }

@media (max-width: 760px) {
  .topo { padding-top: 64px; }
  .heroi { grid-template-columns: minmax(0, 1fr); }
  .retrato { justify-self: center; }
  .perfil { width: 128px; height: 128px; }
  .projeto-topo, .colunas { grid-template-columns: minmax(0, 1fr); }
  .projeto-capa { order: -1; }
  .barra { padding-right: 120px; }
  .marca span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- ROM necessária para o patch ---------- */
.requer {
  margin-top: 18px;
  padding: 12px 14px;
  border: 2px dashed rgba(233, 236, 255, .35);
  border-radius: 6px;
  font-size: .9rem;
  color: var(--suave);
}
.requer-titulo { margin: 0 0 6px; color: var(--texto); font-weight: 600; }
.requer ul { margin: 0 0 8px; padding-left: 18px; }
.requer li { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .82rem; overflow-wrap: anywhere; }
.como-aplicar { margin: 0; }

/* ---------- página História: cada marco é uma "fase" ---------- */
.historia-heroi { margin-top: 28px; }
.marcos { list-style: none; margin: 56px 0 0; padding: 0; position: relative; }
/* trilha pontilhada ligando as fases, como num mapa de RPG */
.marcos::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--ouro) 0 8px, transparent 8px 16px);
  opacity: .35;
}
.marco-fase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  margin-bottom: 56px;
}
.marco-fase::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: var(--ouro);
  border: 3px solid #05071a;
  box-shadow: 0 0 0 2px var(--ouro);
}
.marco-fase:last-child::before { background: var(--rosa); box-shadow: 0 0 0 2px var(--rosa); }
.marco-fase:nth-child(even) .marco-texto-lado { order: 2; }

.marco-cabeca { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; }
.marco-numero {
  font-family: "Press Start 2P", monospace;
  font-size: .7rem;
  color: var(--suave);
}
.marco-quando {
  font-family: "Pixelify Sans", monospace;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ouro);
}
.marco-texto { margin: 0; padding: 18px 22px; font-size: 1.02rem; }

.marco-figura { margin: 0; }
.marco-tela {
  position: relative;
  background: #000;
  border: 3px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 0 0 3px #05071a, 0 14px 30px rgba(0, 0, 0, .5);
  overflow: hidden;
  aspect-ratio: 8 / 7;
}
.marco-tela::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, .12), transparent 60%),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, .45));
}
.marco-tela img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; }
.marco-figura figcaption { color: var(--suave); font-size: .9rem; margin-top: 10px; }
.marco-link { font-family: "Pixelify Sans", monospace; text-decoration: none; white-space: nowrap; }
.marco-link:hover { text-decoration: underline; }

/* tela preta de "início de fase", para os marcos sem imagem */
.tela-fase {
  aspect-ratio: 8 / 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #000;
  border: 3px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 0 0 3px #05071a, 0 14px 30px rgba(0, 0, 0, .5);
  text-align: center;
  padding: 16px;
}
.tela-fase-numero {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(1.1rem, 3vw, 1.8rem);
  color: #fff;
}
.tela-fase-quando {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(.7rem, 1.6vw, .95rem);
  color: var(--ouro);
  animation: piscar 1.2s steps(1) infinite;
}

.fim { text-align: center; margin: 24px 0 16px; }
.continua {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(.9rem, 2.4vw, 1.3rem);
  color: var(--ouro);
  margin: 0 0 22px;
}

@media (max-width: 760px) {
  .marcos::before, .marco-fase::before { display: none; }
  .marco-fase { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .marco-fase:nth-child(even) .marco-texto-lado { order: 0; }
}
.historia-heroi .subtitulo { font-family: "Inter", system-ui, sans-serif; font-size: clamp(1rem, 2vw, 1.2rem); }
body, h1, h2, h3, button, a { font-variant-ligatures: none; }

/* ---------- versões extras de um patch ---------- */
.variante { padding: 22px 26px; }
.variante > p { color: var(--suave); }
.passos { margin: 6px 0 4px; padding-left: 22px; }
.passos li { margin-bottom: 6px; }
.passos li::marker { color: var(--ouro); font-weight: 600; }
.variante .galeria { margin-top: 20px; }

/* ---------- tutorial do MD Tracker ---------- */
.tut { max-width: 1040px; }
.tut-heroi { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 28px; align-items: center; padding: 28px 30px; margin-top: 12px; }
.tut-selo { margin: 0; font-family: "Press Start 2P", monospace; font-size: .7rem; color: var(--ciano); letter-spacing: .1em; }
.tut-heroi h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.15; color: var(--ouro); text-shadow: 3px 3px 0 #7a2bd6; margin: 10px 0 12px; }
.tut-heroi .subtitulo { margin: 0; }
.tut-heroi-img, .tut-tela img { display: block; width: 100%; height: auto; border-radius: 18px; border: 3px solid #05071a; box-shadow: 0 0 0 3px var(--borda), 0 14px 30px rgba(0, 0, 0, .5); background: #0f1118; }
.botao-2 { background: linear-gradient(180deg, #e9ecff, #b9c0e8); box-shadow: inset 0 -4px 0 #8890bd, 0 3px 0 #05071a; }
.tut-sumario { padding: 20px 26px; margin-top: 30px; }
.tut-sumario h2 { margin: 0 0 8px; color: var(--ouro); font-size: 1.3rem; }
.tut-sumario ol { margin: 0; padding-left: 26px; columns: 2 260px; column-gap: 30px; }
.tut-sumario li { break-inside: avoid; margin: 3px 0; }
.tut-sumario li::marker { color: var(--ouro); font-family: "Pixelify Sans", monospace; }
.tut-sumario a { color: var(--texto); text-decoration: none; }
.tut-sumario a:hover { color: var(--ouro); }
.licao { margin-top: 34px; padding: 22px 26px 24px; scroll-margin-top: 16px; }
.licao-cabeca { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.licao-num { font-family: "Press Start 2P", monospace; font-size: .62rem; color: #241a00; background: var(--ouro); padding: 5px 8px 4px; border-radius: 4px; box-shadow: 0 2px 0 #05071a; white-space: nowrap; }
.licao h2 { margin: 0; font-size: 1.45rem; color: var(--texto); }
.licao h3 { margin: 18px 0 6px; font-size: 1.1rem; color: var(--ciano); }
.licao-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.com-fig .licao-corpo { grid-template-columns: minmax(0, 1fr) 230px; }
.licao-texto > :first-child { margin-top: 0; }
.licao-texto p, .licao-texto li { color: #dfe3ff; }
.licao-texto ul, .licao-texto ol { padding-left: 22px; }
.licao-texto li { margin: 4px 0; }
.licao-texto li::marker { color: var(--ouro); }
.licao-figs { display: flex; flex-direction: column; gap: 18px; }
.tut-fig { margin: 0; }
.tut-tela { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.tut-fig figcaption { font-size: .85rem; color: var(--suave); margin-top: 8px; text-align: center; }
.licao kbd { display: inline-block; min-width: 1.6em; text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .85em; line-height: 1.3; padding: 1px 6px; border-radius: 5px; background: #20294f; color: var(--texto); border: 1px solid #4b5694; box-shadow: 0 2px 0 #05071a; white-space: nowrap; }
.licao code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .9em; background: rgba(5, 7, 26, .55); color: var(--ciano); padding: 1px 5px; border-radius: 4px; }
.nota { border-left: 3px solid var(--ouro); padding: 6px 12px; background: rgba(255, 210, 94, .07); border-radius: 0 6px 6px 0; }
.anatomia { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.5rem; background: #0f1118; border: 2px solid #2b3042; border-radius: 8px; padding: 10px 18px; display: inline-block; margin: 4px 0 6px; letter-spacing: .04em; }
.a-n { color: #8fd0ff; } .a-i { color: #f3b45c; } .a-v { color: #7fd8a8; } .a-x { color: #f290bd; } .a-y { color: #d9a7f5; }
.licao-texto li > .a-n, .licao-texto li > .a-i, .licao-texto li > .a-v, .licao-texto li > .a-x, .licao-texto li > .a-y { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; }
.tabela-rolar { overflow-x: auto; margin: 10px 0; }
.tut-tabela { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tut-tabela th { text-align: left; font-family: "Pixelify Sans", monospace; font-weight: 600; color: var(--ouro); padding: 6px 10px; border-bottom: 2px solid rgba(233, 236, 255, .35); }
.tut-tabela td { padding: 6px 10px; border-bottom: 1px solid rgba(233, 236, 255, .12); vertical-align: top; color: #dfe3ff; }
.tut-tabela td:first-child { white-space: nowrap; }
.tut-tabela .nw { white-space: nowrap; color: var(--suave); }
.teclado-pc { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; overflow-x: auto; padding-bottom: 4px; }
.teclado-pc .fila { display: flex; gap: 4px; }
.teclado-pc .fila + .fila { padding-left: 18px; }
.tecla { flex: none; width: 40px; padding: 4px 0 3px; text-align: center; border-radius: 6px; background: #e8e9ef; color: #12141b; box-shadow: 0 3px 0 #05071a; }
.tecla.preta { background: #12141b; color: #e8e9ef; border: 1px solid #4b5694; }
.tecla b { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .95rem; }
.tecla small { display: block; font-size: .68rem; opacity: .75; }
@media (max-width: 720px) {
  .tut-heroi { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .tut-heroi-img { max-width: 220px; margin: 0 auto; }
  .com-fig .licao-corpo { grid-template-columns: minmax(0, 1fr); }
  .licao-figs { flex-direction: row; justify-content: center; }
  .licao-figs .tut-fig { max-width: 230px; flex: 1; }
  .licao { padding: 18px 16px 20px; }
  .anatomia { font-size: 1.2rem; }
}