/* MePixa! — site styles (light theme) */

/* Escala tonal tirada do próprio logo: o cinza do wordmark é #58585a
 * (amostrado do PNG). Os tons abaixo são o mesmo cinza neutro clareado,
 * mantendo o leve viés azul do original (o B fica 2~5 acima do R/G).
 * Entre parênteses, o contraste sobre o branco (AA pede 4.5:1 para texto). */
:root {
  --mp-orange: #fe6000;        /* o laranja da marca: preenchimentos e traços */
  --mp-orange-rgb: 254, 96, 0; /* o mesmo, para os rgba() com transparência */
  --mp-orange-hover: #e05500;
  /* O laranja da marca sobre branco dá 3.0:1 — pouco para texto miúdo.
     Este é o mesmo matiz escurecido: 5.1:1 no branco e 4.6:1 sobre o creme
     do badge. Vale só para TEXTO pequeno em fundo claro; preenchimentos,
     bordas e o traço dos títulos seguem no laranja vivo da marca.
     Para voltar ao vivo: troque por var(--mp-orange) aqui. */
  --mp-orange-text: #be4800;
  --mp-heading: #58585a;   /* o cinza do logo          (7.1:1) */
  --mp-text: #6e6e71;      /* corpo de texto           (5.1:1) */
  --mp-text-soft: #8a8a8f; /* apoio: legendas, rodapé  (3.4:1) */
  --mp-bg: #ffffff;
  --mp-bg-alt: #f7f7f8;
  --mp-border: #e8e8ea;

  /* alinha os utilitários do Bootstrap à mesma escala */
  --bs-body-color: var(--mp-text);
  --bs-heading-color: var(--mp-heading);
  --bs-emphasis-color: var(--mp-heading);
  --bs-border-color: var(--mp-border);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;   /* altura da navbar + folga */
  color-scheme: light only;   /* opt out of browser auto-dark rendering */
  background-color: var(--mp-bg);
}

body {
  background-color: var(--mp-bg);
  color: var(--mp-text);
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, .navbar-brand {
  font-weight: 800;
  color: var(--mp-heading);
}

/* Com a escala mais fechada, a hierarquia vem sobretudo do peso e do
   tamanho — então os títulos precisam de um respiro maior em volta. */
h1, h2 { letter-spacing: -0.015em; }

.text-orange { color: var(--mp-orange); }

/* o .text-secondary do Bootstrap tem tom azulado próprio; puxa para a
   nossa escala para não destoar do cinza do logo */
.text-secondary { color: var(--mp-text) !important; }

.text-soft { color: var(--mp-text-soft); }

/* ---------- Navbar ---------- */
.navbar {
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--mp-border);
}

/* O PNG do logo tem margem interna: a tinta ocupa só 65% da altura do
   arquivo. Por isso a altura aqui é maior do que parece — 56px de caixa
   dão ~36px de wordmark visível. */
.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-brand img {
  height: 56px;
  width: auto;
}

@media (max-width: 575.98px) {
  .navbar-brand img { height: 46px; }
}

.navbar .nav-link {
  font-weight: 700;
  color: var(--mp-heading);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--mp-orange);
}

/* ---------- Buttons ---------- */
.btn-mepixa {
  background-color: var(--mp-orange);
  border-color: var(--mp-orange);
  color: #fff;
  font-weight: 700;
}

.btn-mepixa:hover,
.btn-mepixa:focus {
  background-color: var(--mp-orange-hover);
  border-color: var(--mp-orange-hover);
  color: #fff;
}

/* O rótulo é texto, então segue o laranja de texto — mesma regra do gênero
   e do selo. Na página escura a variável volta ao laranja vivo (jogo.css). */
.btn-outline-mepixa {
  border: 2px solid var(--mp-orange-text);
  color: var(--mp-orange-text);
  font-weight: 700;
}

.btn-outline-mepixa:hover,
.btn-outline-mepixa:focus {
  background-color: var(--mp-orange-text);
  color: #fff;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;   /* recorta o carrossel de fundo nos limites do header */
  background-color: var(--mp-bg-alt);   /* aparece um instante antes do 1º slide decodificar */
  padding-top: 104px;   /* acomoda a navbar fixa mais alta */
}

/* Carrossel de fundo: puramente decorativo (aria-hidden no HTML), sem
   nenhum controle. Os slides ficam empilhados e o JS troca .is-active
   entre eles; sem JS, só o primeiro (marcado no HTML) fica visível. */
.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease;
}

.hero-carousel-slide.is-active {
  opacity: 1;
}

/* Escurece o fundo de forma pareja para o texto branco (com sombra) se
   manter legível nas três cenas, que vão de bem claras a bem escuras. */
.hero-carousel-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 7, 10, 0.78) 0%, rgba(8, 7, 10, 0.62) 45%, rgba(8, 7, 10, 0.82) 100%);
}

.hero > .container {
  position: relative;
  z-index: 1;
}

.hero-logo {
  max-width: min(440px, 85%);
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.55));
}

.hero .tagline {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}

/* Texto sobre foto: branco com sombra borrada, não a escala de cinzas do
   resto do site (que só funciona sobre o fundo claro das outras seções). */
.hero .tagline,
.hero .lead {
  color: #fff;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ---------- Sections ---------- */
.section-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--mp-orange);
  margin-top: 0.6rem;
}

.section-title.text-center-line::after {
  margin-left: auto;
  margin-right: auto;
}

.section-alt { background-color: var(--mp-bg-alt); }

/* ---------- Game cards ---------- */
.game-card {
  background-color: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  height: 100%;
}

.game-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(43, 43, 46, 0.12);
  border-color: rgba(var(--mp-orange-rgb), 0.55);
}

.game-card .card-img-top {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.game-card .card-body p { color: var(--mp-text); }

/* o .h5 do Bootstrap traz peso 500; com a escala de cinzas mais fechada
   o título do card precisa do peso cheio para se destacar da descrição */
.game-card h3 {
  color: var(--mp-heading);
  font-weight: 800;
}

.game-card .genre {
  color: var(--mp-orange-text);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.badge-status {
  background-color: rgba(var(--mp-orange-rgb), 0.1);
  color: var(--mp-orange-text);
  border: 1px solid rgba(var(--mp-orange-rgb), 0.45);
  font-weight: 700;
}

/* ---------- Sobre: print do jogo antigo ---------- */
.about-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--mp-border);
  box-shadow: 0 14px 36px rgba(43, 43, 46, 0.14);
}

.about-shot figcaption {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--mp-text);   /* legenda ainda é texto de leitura: fica no tom do corpo */
  text-align: center;
}

/* o convite pra jogar o original no itch.io, em linha própria sob a legenda */
.about-shot .shot-play {
  display: block;
  margin-top: 0.35rem;
  font-style: normal;
  font-weight: 700;
  color: var(--mp-orange-text);
  text-decoration: none;
}

.about-shot .shot-play:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
footer {
  background-color: var(--mp-bg-alt);
  border-top: 1px solid var(--mp-border);
  color: var(--mp-text);
}

/* mesma compensação de margem interna da navbar */
footer img { height: 44px; width: auto; }

/* ---------- Language dropdown ---------- */
#langMenu .dropdown-item.active {
  background-color: var(--mp-orange);
  color: #fff;
}