/* =========================================================================
   THE MINDGAMER — menu de seleção de jogos
   Paleta amostrada de bg.png: base quase-preta azulada + índigo + periwinkle.

   ESCALA: --u vale 1px do mockup de referência (img/, 1672×941). Todas as
   medidas abaixo são as coordenadas lidas direto do mockup, multiplicadas por
   --u. A unidade acompanha o lado que limita a tela, então em 16:9 a página
   bate com o mockup pixel a pixel, e em outras proporções a sobra vira espaço
   (horizontal entre o texto e a personagem, vertical em volta do destaque).
   ========================================================================= */

:root {
  --u: min(calc(100vw / 1672), calc(100vh / 941));

  /* base */
  --bg-0:      #03040b;
  --bg-1:      #070a19;

  /* tinta */
  --ink-0:     #f1f4ff;
  --ink-1:     #d5ddf7;
  --ink-2:     #a9b6de;
  --ink-3:     #7d8bb6;

  /* acento */
  --accent-lo: #3d68dc;
  --accent:    #86a8ff;
  --accent-hi: #dfe9ff;

  /* vidro */
  --line:      rgb(160 185 255 / 0.30);
  --line-hi:   rgb(150 178 255 / 0.95);

  /* Founder: a única cor quente da interface (ver FOUNDER.md) */
  --founder:   #e2c48d;

  /* tipografia */
  --font-brand: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

/* hidden sempre vence: componentes com display próprio (o selo, por exemplo) somem */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-serif);
  font-size: calc(20 * var(--u));
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

/* =========================================================== cenário / fundo */

.stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; }

.stage__bg {
  position: absolute; inset: 0;
  background: url("assets/site/bg.webp") center / cover no-repeat;
  transform: scale(1.03);
  filter: brightness(0.9) saturate(0.95);
}

/* tipografia fantasma: fica ATRÁS da personagem, na área do céu que ela
   deixa livre. Encostada no canto direito e sangrando pra fora. */
.stage__ghost {
  position: absolute;
  top: calc(145 * var(--u));
  left: calc(100% - 445 * var(--u));
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: calc(150 * var(--u));
  line-height: 0.87;
  white-space: nowrap;
  color: rgb(170 190 255 / 0.30);
  transform: scaleX(0.9);
  transform-origin: left top;
  user-select: none;
  pointer-events: none;
}

/* MIND aberto e GAMER apertado: a Playfair tem o GAMER bem mais largo que o
   MIND, e sem isso o R some inteiro pra fora da tela */
.stage__ghost span { display: block; letter-spacing: 0.08em; }
.stage__ghost span + span { margin-left: calc(15 * var(--u)); letter-spacing: -0.02em; }

/* véu de luz entre ela e o fundo: separa a personagem do cenário */
.stage__haze {
  position: absolute; inset: 0;
  background:
    radial-gradient(34% 50% at 64% 30%, rgb(150 185 255 / 0.16), transparent 70%),
    radial-gradient(40% 50% at 92% 70%, rgb(110 150 255 / 0.10), transparent 70%);
}

/* A personagem ocupa a metade direita com a cabeça encostando no topo, como
   no mockup: 77% da altura, sangrando pela borda direita, puxada um pouco pro
   centro pra abrir o "MIND GAMER" atrás dela. A arte
   original termina cortada embaixo, então a base dela esvai no fundo. */
.stage__figure {
  position: absolute;
  top: 1.3vh;
  right: 0;
  height: min(77vh, calc(724 * var(--u)));
  width: auto;
  max-width: none;
  translate: calc(10.2% - 55 * var(--u)) 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
          mask-image: linear-gradient(180deg, #000 74%, transparent 99%);
  filter:
    saturate(0.94)
    drop-shadow(calc(-14 * var(--u)) 0 calc(40 * var(--u)) rgb(3 4 11 / 0.55));
}

/* scrim: piso de contraste pro texto, independente da arte do fundo */
.stage__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(4 6 16 / 0.72) 0%, rgb(4 6 16 / 0.50) 24%,
                           rgb(4 6 16 / 0.14) 44%, rgb(4 6 16 / 0) 58%),
    linear-gradient(0deg,  rgb(4 6 16 / 0.78) 0%, rgb(4 6 16 / 0.32) 22%,
                           rgb(4 6 16 / 0) 44%),
    linear-gradient(180deg, rgb(4 6 16 / 0.35) 0%, rgb(4 6 16 / 0) 14%);
}

/* a linha fina da borda esquerda, de onde a aba do rail nasce */
.stage__spine {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(42 * var(--u));
  width: 1px;
  background: linear-gradient(180deg, rgb(160 185 255 / 0.10), rgb(160 185 255 / 0.34) 30%,
                                      rgb(160 185 255 / 0.34) 70%, rgb(160 185 255 / 0.10));
}

/* ================================================================== barra topo */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 3;
  height: calc(104 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(52 * var(--u)) 0 calc(59 * var(--u));
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(17 * var(--u));
  color: inherit;
  text-decoration: none;
}

.brand__mark {
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
  object-fit: contain;
  filter: drop-shadow(0 0 calc(10 * var(--u)) rgb(120 165 255 / 0.6));
}

.brand__name {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: calc(28 * var(--u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-0);
  text-shadow: 0 0 calc(18 * var(--u)) rgb(120 160 255 / 0.35);
}

.account {
  display: inline-flex;
  align-items: center;
  gap: calc(22 * var(--u));
  height: calc(52 * var(--u));
  margin-top: calc(6 * var(--u));
  padding: 0 calc(34 * var(--u)) 0 calc(27 * var(--u));
  border-radius: calc(14 * var(--u));
  background: linear-gradient(180deg, rgb(36 46 96 / 0.55), rgb(14 19 46 / 0.62));
  border: 1px solid rgb(150 180 255 / 0.38);
  box-shadow: inset 0 1px 0 rgb(200 215 255 / 0.10);
  backdrop-filter: blur(10px);
  font-size: calc(21 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.account__xp { color: var(--ink-1); }

/* agrupa o botão de mensagens e a pílula da conta no canto direito.
   Mensagens é global de propósito: a hora em que mais se precisa delas é
   esperando partida, então não podem viver dentro de uma tela só. */
.topbar__end {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
}

.messages {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  margin-top: calc(6 * var(--u));
  padding: 0;
  border: 1px solid rgb(150 180 255 / 0.38);
  border-radius: calc(14 * var(--u));
  background: linear-gradient(180deg, rgb(36 46 96 / 0.55), rgb(14 19 46 / 0.62));
  box-shadow: inset 0 1px 0 rgb(200 215 255 / 0.10);
  backdrop-filter: blur(10px);
  color: var(--ink-1);
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}

.messages:hover { border-color: rgb(175 200 255 / 0.9); color: var(--ink-0); }

.messages__icon { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }

.messages__badge {
  position: absolute;
  top: calc(-8 * var(--u));
  right: calc(-8 * var(--u));
  display: grid;
  place-items: center;
  min-width: calc(25 * var(--u));
  height: calc(25 * var(--u));
  padding: 0 calc(6 * var(--u));
  border-radius: 99px;
  border: calc(1.6 * var(--u)) solid rgb(8 11 28);
  background: linear-gradient(180deg, #7b9dff, #3f63d8);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: calc(15 * var(--u));
  line-height: 1;
  box-shadow: 0 0 calc(12 * var(--u)) rgb(90 130 255 / 0.75);
}

/* ======================================================================= rail */

.rail {
  position: fixed;
  z-index: 4;
  left: calc(42 * var(--u));
  top: calc(134 * var(--u));
  width: calc(74 * var(--u));
  height: calc(462 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(32.5 * var(--u));
  isolation: isolate;
}

.rail__shape {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 calc(10 * var(--u)) rgb(100 140 255 / 0.20));
}

.rail__item {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(60 * var(--u));
  height: calc(91 * var(--u));
  border-radius: calc(12 * var(--u));
}

/* os ícones têm respiro diferente dentro do PNG (o selo e o perfil têm anel
   e pontas em volta), então cada um diz o próprio tamanho em --icon */
.rail__item img {
  width: calc(var(--icon, 32) * var(--u));
  height: calc(var(--icon, 32) * var(--u));
  object-fit: contain;
  opacity: 0.78;
  filter: saturate(0.75);
  transition: opacity .2s var(--ease), filter .2s var(--ease);
}

.rail__item:hover img      { opacity: .9; filter: saturate(.9); }

.rail__item.is-active img  { opacity: 1;
                             filter: drop-shadow(0 0 calc(9 * var(--u)) rgb(130 170 255 / .95)); }

/* o sigilo do Founder fica dourado pra quem é Founder: o próprio jogador vê o
   status toda vez que abre o site */
.rail__item--founder img           { filter: sepia(1) saturate(1.9) hue-rotate(-12deg) brightness(1.08); opacity: .85; }
.rail__item--founder:hover img     { filter: sepia(1) saturate(1.9) hue-rotate(-12deg) brightness(1.08); opacity: 1; }
.rail__item--founder.is-active img { opacity: 1;
                                     filter: sepia(1) saturate(1.9) hue-rotate(-12deg) brightness(1.08)
                                             drop-shadow(0 0 calc(9 * var(--u)) rgb(226 196 141 / .8)); }

/* traço com ponto de luz embaixo do item ativo */
.rail__item.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(50% + 42 * var(--u));
  width: calc(38 * var(--u));
  height: calc(3 * var(--u));
  translate: -50% -50%;
  border-radius: 99px;
  background:
    radial-gradient(closest-side, #fff 45%, transparent) center / calc(7 * var(--u)) 100% no-repeat,
    linear-gradient(90deg, transparent, rgb(150 185 255 / 0.85) 25% 75%, transparent) center / 100% 1px no-repeat;
  filter: drop-shadow(0 0 calc(4 * var(--u)) rgb(140 180 255 / .9));
}

/* rótulo só pra leitor de tela — o rail é só ícone visualmente */
.rail__label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===================================================================== página */

.page {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: calc(104 * var(--u)) 0 calc(61 * var(--u));
}

/* ------------------------------------------------------------------ destaque */

/* margin auto centraliza o destaque no vão entre o topo e a estante;
   o padding de baixo compensa pra ele ficar onde está no mockup */
.hero {
  margin: auto 0 auto calc(185 * var(--u));
  padding-bottom: calc(27 * var(--u));
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin: 0 0 calc(24 * var(--u));
  font-size: calc(18 * var(--u));
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-1);
}

.eyebrow::before {
  content: "";
  width: calc(22 * var(--u));
  height: calc(1.5 * var(--u));
  background: currentColor;
}

.hero__title {
  margin: 0 0 calc(36 * var(--u));
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: calc(80 * var(--u));
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: var(--ink-0);
  text-shadow: 0 0 calc(30 * var(--u)) rgb(130 165 255 / 0.25), 0 4px 30px rgb(3 4 11 / 0.8);
}

/* --------------------------------------------------------------------- nível */

.level {
  display: flex;
  align-items: center;
}

.level__label {
  line-height: 1;
  white-space: nowrap;
  color: var(--ink-0);
}

.level--hero { gap: calc(27 * var(--u)); margin-bottom: calc(44 * var(--u)); }
.level--hero .level__label { font-size: calc(30 * var(--u)); }

.meter {
  display: block;
  flex: none;
  border-radius: calc(3 * var(--u));
  background: rgb(8 12 30 / 0.72);
  box-shadow: inset 0 0 0 1px rgb(150 180 255 / 0.32);
}

.meter i {
  display: block;
  height: 100%;
  width: var(--fill, 50%);
  border-radius: calc(3 * var(--u)) 0 0 calc(3 * var(--u));
  background: linear-gradient(90deg, var(--accent-lo), var(--accent) 65%, var(--accent-hi));
  box-shadow: 0 0 calc(10 * var(--u)) rgb(110 150 255 / 0.6);
}

.meter--account { width: calc(110 * var(--u)); height: calc(15 * var(--u)); }
.meter--hero    { width: calc(287 * var(--u)); height: calc(16 * var(--u)); }
.meter--card    { flex: 1; height: calc(14 * var(--u)); }

/* --------------------------------------------------------------------- botão */

.play {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(321 * var(--u));
  height: calc(78 * var(--u));
  padding: 0 calc(45 * var(--u)) 0 calc(92 * var(--u));
  border: calc(1.5 * var(--u)) solid rgb(125 155 255 / 0.9);
  border-radius: calc(10 * var(--u));
  background:
    radial-gradient(80% 90% at 50% 0%, rgb(90 125 230 / 0.30), transparent 70%),
    linear-gradient(180deg, rgb(38 56 122 / 0.70), rgb(16 24 60 / 0.82));
  color: var(--ink-0);
  font: 400 calc(24 * var(--u))/1 var(--font-serif);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  /* é um link (leva ao jogo), mas o desenho é o do botão: sem sublinhado */
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 0 calc(20 * var(--u)) rgb(80 120 255 / 0.45),
    inset 0 0 calc(24 * var(--u)) rgb(90 130 255 / 0.22);
  transition: border-color .18s var(--ease);
}

.play:hover { border-color: rgb(165 190 255); }

.play__chevron { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }

/* ------------------------------------------------------------------- estante */

.shelf { margin-left: calc(146 * var(--u)); }

.shelf__title {
  display: flex;
  align-items: center;
  gap: calc(19 * var(--u));
  margin: 0 0 calc(26 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-1);
  white-space: nowrap;
}

.shelf__title i {
  display: block;
  width: calc(278 * var(--u));
  height: 1px;
  background: linear-gradient(90deg, rgb(170 195 255 / 0.6), rgb(170 195 255 / 0.25) 70%, transparent);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, calc(334 * var(--u)));
  gap: calc(19 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: relative;
  height: calc(233 * var(--u));
  border-radius: calc(11 * var(--u));
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 62% at 50% 40%, hsl(var(--tint) / 0.16), transparent 72%),
    linear-gradient(180deg, rgb(22 29 62 / 0.74), rgb(9 12 30 / 0.88));
  backdrop-filter: blur(8px);
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgb(2 4 12 / 0.45);
  transition: border-color .2s var(--ease);
}

/* moldura interna fina, como nos cards do mockup */
.card::after {
  content: "";
  position: absolute;
  inset: calc(7 * var(--u));
  border: 1px solid rgb(180 200 255 / 0.07);
  border-radius: calc(7 * var(--u));
  pointer-events: none;
}

.card:hover { border-color: rgb(170 195 255 / 0.55); }

.card.is-current {
  border-color: var(--line-hi);
  background:
    radial-gradient(62% 66% at 50% 40%, hsl(var(--tint) / 0.26), transparent 72%),
    linear-gradient(180deg, rgb(30 42 92 / 0.80), rgb(12 17 44 / 0.90));
  box-shadow:
    0 0 0 1px rgb(120 155 255 / 0.35),
    0 0 calc(26 * var(--u)) rgb(80 120 255 / 0.45),
    inset 0 0 calc(36 * var(--u)) rgb(90 130 255 / 0.18);
}

.card__link {
  position: relative;
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* base escurecida pra o texto do rodapé do card */
.card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgb(8 11 28 / 0.85) 0%, rgb(8 11 28 / 0.4) 30%, transparent 50%);
  pointer-events: none;
}

/* a logo do jogo é a arte do card: ocupa tudo acima da linha de nível */
.card__logo {
  position: absolute;
  top: calc(18 * var(--u));
  left: calc(24 * var(--u));
  width: calc(100% - 48 * var(--u));
  height: calc(150 * var(--u));
  object-fit: contain;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(18 * var(--u)) rgb(3 4 11 / 0.75));
}

.card__silhouette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  filter:
    drop-shadow(0 0 1px rgb(150 175 255 / 0.30))
    drop-shadow(0 0 calc(12 * var(--u)) rgb(110 140 230 / 0.22));
}

.card--soon {
  background:
    radial-gradient(60% 85% at 58% 26%, rgb(120 140 200 / 0.55), transparent 76%),
    linear-gradient(180deg, rgb(34 42 76 / 0.90), rgb(12 15 32 / 0.94));
}

.card__body {
  position: absolute;
  z-index: 2;
  left: calc(22 * var(--u));
  right: calc(25 * var(--u));
  bottom: calc(18 * var(--u));
}

.level--card { gap: calc(23 * var(--u)); height: calc(20 * var(--u)); }
.level--card .level__label { width: calc(68 * var(--u)); font-size: calc(20 * var(--u)); }

.card__name {
  display: block;
  margin-bottom: calc(18 * var(--u));
  font-size: calc(28 * var(--u));
  line-height: 1;
  color: var(--ink-0);
}

.card__status {
  display: block;
  font-size: calc(15 * var(--u));
  line-height: calc(20 * var(--u));
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ======================================================= retomar partida ===== */

/* Pergunta curta, duas saídas. Sem zoom, sem brilho: o que muda no hover é
   só a borda, igual ao resto da casa. */
.retomar {
  width: min(calc(560 * var(--u)), calc(100vw - 32px));
  min-width: min(340px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: max(24px, calc(34 * var(--u))) max(22px, calc(36 * var(--u))) max(20px, calc(28 * var(--u)));
  border: 1px solid rgb(150 180 255 / 0.55);
  border-radius: max(10px, calc(14 * var(--u)));
  background: linear-gradient(180deg, rgb(22 30 66), rgb(9 12 30));
  color: var(--ink-0);
  font-family: var(--font-serif);
  box-shadow: 0 28px 70px rgb(0 2 8 / 0.7);
}

.retomar::backdrop { background: rgb(2 4 12 / 0.72); backdrop-filter: blur(4px); }

.retomar__fechar {
  position: absolute;
  top: max(10px, calc(14 * var(--u)));
  right: max(10px, calc(14 * var(--u)));
  display: grid;
  place-items: center;
  width: max(34px, calc(44 * var(--u)));
  height: max(34px, calc(44 * var(--u)));
  padding: 0;
  border: 1px solid rgb(150 180 255 / 0.35);
  border-radius: max(8px, calc(10 * var(--u)));
  background: transparent;
  color: var(--ink-1);
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}

.retomar__fechar svg { width: 46%; height: 46%; }

.retomar__fechar:hover { border-color: rgb(180 205 255 / 0.9); color: var(--ink-0); }

.retomar__kicker {
  margin: 0;
  font-size: max(12px, calc(14 * var(--u)));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.retomar__titulo {
  margin: max(8px, calc(10 * var(--u))) 0 max(10px, calc(14 * var(--u)));
  font-size: max(24px, calc(36 * var(--u)));
  font-weight: 400;
  line-height: 1.1;
}

.retomar__texto,
.retomar__nota {
  margin: 0;
  font-size: max(15px, calc(18 * var(--u)));
  line-height: 1.5;
  color: var(--ink-2);
}

.retomar__texto strong { font-weight: 500; color: var(--ink-0); }

.retomar__acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: max(8px, calc(12 * var(--u)));
  margin-top: max(18px, calc(24 * var(--u)));
}

.retomar__btn {
  min-height: max(42px, calc(56 * var(--u)));
  padding: max(8px, calc(10 * var(--u))) max(10px, calc(16 * var(--u)));
  border: 1px solid rgb(150 180 255 / 0.4);
  border-radius: max(8px, calc(10 * var(--u)));
  background: transparent;
  color: var(--ink-1);
  font: 400 max(13px, calc(16 * var(--u)))/1.25 var(--font-serif);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}

.retomar__btn:hover,
.retomar__btn:focus-visible { border-color: rgb(180 205 255 / 0.9); color: var(--ink-0); }

.retomar__btn--principal {
  border-color: rgb(125 155 255 / 0.9);
  background: linear-gradient(180deg, rgb(38 56 122 / 0.85), rgb(16 24 60 / 0.9));
  color: var(--ink-0);
}

.retomar__btn:disabled { opacity: 0.5; cursor: wait; }

.retomar__nota {
  margin-top: max(12px, calc(14 * var(--u)));
  font-size: max(13px, calc(15 * var(--u)));
  color: var(--ink-3);
}

.retomar__nota.is-erro { color: #eba5ad; }

@media (max-width: 460px) {
  .retomar__acoes { grid-template-columns: 1fr; }
}

/* ================================================================ preferências */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =========================================================================
   TELAS ESTREITAS / RETRATO
   Não dá pra manter a composição lado a lado: a personagem vira pano de fundo
   atrás do destaque, a estante rola na horizontal e o rail vira dock embaixo.
   ========================================================================= */

@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  :root { --u: clamp(0.55px, calc(100vw / 620), 1.1px); }

  body { overflow-x: hidden; overflow-y: auto; }

  .stage__figure {
    top: 0;
    right: 50%;
    height: auto;
    width: max(calc(1500 * var(--u)), 150vw);
    translate: 58% 0;
    opacity: .7;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 78%);
            mask-image: linear-gradient(180deg, #000 40%, transparent 78%);
  }

  .stage__ghost, .stage__spine, .rail__shape { display: none; }

  .stage__scrim {
    background:
      linear-gradient(180deg, rgb(4 6 16 / 0.55) 0%, rgb(4 6 16 / 0.15) 22%,
                              rgb(4 6 16 / 0.70) 48%, rgb(4 6 16 / 0.95) 72%);
  }

  .topbar {
    position: absolute;
    flex-wrap: wrap;
    height: auto;
    gap: calc(14 * var(--u));
    padding: calc(24 * var(--u)) calc(26 * var(--u)) 0;
  }

  .account { margin-top: 0; }

  .page {
    height: auto;
    min-height: 100vh;
    padding: max(46vh, calc(300 * var(--u))) 0 calc(150 * var(--u));
  }

  .hero {
    margin: 0 calc(26 * var(--u)) calc(70 * var(--u));
    padding-bottom: 0;
  }

  .hero__title { font-size: calc(64 * var(--u)); white-space: normal; }
  .meter--hero { width: auto; flex: 1; max-width: calc(287 * var(--u)); }
  .play        { width: 100%; justify-content: center; gap: calc(40 * var(--u)); padding: 0; }

  .shelf { margin-left: 0; }
  .shelf__title { padding: 0 calc(26 * var(--u)); }

  .cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(334 * var(--u));
    overflow-x: auto;
    padding: calc(6 * var(--u)) calc(26 * var(--u)) calc(30 * var(--u));
    scroll-snap-type: x mandatory;
    scroll-padding: 0 calc(26 * var(--u));
    scrollbar-width: none;
  }
  .card { scroll-snap-align: start; }

  .rail {
    top: auto;
    bottom: calc(22 * var(--u));
    left: 50%;
    translate: -50% 0;
    width: auto;
    height: auto;
    flex-direction: row;
    gap: calc(8 * var(--u));
    padding: calc(6 * var(--u)) calc(16 * var(--u));
    border-radius: calc(40 * var(--u));
    background: rgb(14 20 48 / 0.72);
    border: 1px solid var(--line);
    backdrop-filter: blur(16px);
  }

  .rail__item { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
  .rail__item.is-active::after { top: calc(50% + 28 * var(--u)); width: calc(28 * var(--u)); }
}

/* =========================================================================
   FONTES LOCAIS (opcional) — tira a dependência de internet

   Passo a passo em assets/fonts/LEIA-ME.txt. Quando os arquivos .woff2
   estiverem naquela pasta, DESCOMENTE este bloco e remova o <link> do Google
   Fonts no index.html. Enquanto estiver comentado, nada muda.

@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/cinzel-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Cinzel";
  src: url("assets/fonts/cinzel-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-italic-400.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
   ========================================================================= */