/* Menu do LRV (0.7.8-menu17, 29/10/2026, refeito). Linguagem de jogo de mundo aberto: a cidade ao vivo em tela cheia
   atrás de tudo, abas no topo (Início e os acervos), lista grande em que o item escolhido vira uma barra clara, uma
   linha de descrição do item, a ficha do jogador à direita e o nome do lugar que a câmera mostra. Os acervos têm
   página própria, com a vitrine 360°. Também veste as telas que saem do menu e a pausa. Carregado depois do style.css
   e do abertura.css (cores e fonte de títulos: --lrv-*). Nada aqui some ou se sobrepõe: o painel rola quando a
   janela é pequena (conferido de 390 × 844 a 1920 × 1080, ver docs/MENU-ABERTURA-0.7.8.md). */
:root { --mi-margem: clamp(16px, 2.8vw, 44px); --mi-vivo: var(--lrv-gelo); --mi-ambar: var(--lrv-ambar); }

/* ================================================================================================================
   Moldura e véu
   ================================================================================================================ */
#menu { padding: 0; align-items: stretch; justify-content: stretch; background: none; }
#menu::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 6, 10, .9) 0%, rgba(4, 6, 10, .6) 25%, rgba(4, 6, 10, .1) 45%, rgba(4, 6, 10, 0) 58%, rgba(4, 6, 10, 0) 70%, rgba(4, 6, 10, .55) 100%),
    linear-gradient(0deg, rgba(4, 6, 10, .92) 0%, rgba(4, 6, 10, .45) 14%, rgba(4, 6, 10, 0) 30%),
    linear-gradient(180deg, rgba(4, 6, 10, .78) 0%, rgba(4, 6, 10, 0) 17%); }
#menu.mi-pg-acervo::before { background: linear-gradient(90deg, rgba(4, 6, 10, .9), rgba(4, 6, 10, .74) 55%, rgba(4, 6, 10, .82)); }
#menu::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; box-shadow: inset 0 0 200px rgba(0, 0, 0, .6); }
#menu-cut { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; transition: opacity .2s; pointer-events: none; }
#menu-cut.on { opacity: 1; }
#menu .menu-panel.mi-grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  width: 100%; height: 100%; min-width: 0; max-width: none; max-height: none; margin: 0; padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: none; border: 0; border-radius: 0; box-shadow: none; scrollbar-width: thin; scrollbar-color: rgba(242, 178, 52, .5) transparent; }
#menu.mi-pg-acervo .menu-panel.mi-grid { grid-template-rows: auto minmax(400px, 1fr) auto; }
#menu.mi-pg-acervo .mi-inicio, #menu.mi-pg-inicio .mi-acervo { display: none; }
#menu :is(input, select, button, a):focus-visible { outline: 2px solid var(--lrv-gelo); outline-offset: 3px; }
/* um item aceso por vez: com o mouse sobre a lista, só o item sob o mouse acende; o foco aparece pela barra clara */
#menu .mi-acoes > :is(button, .menu-link):focus-visible, .screen.dim .menu-list > :is(button, .menu-link):focus-visible { outline: none; }

/* ================================================================================================================
   Barra de cima: abas e situação agora
   ================================================================================================================ */
.mi-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; min-width: 0; padding: clamp(10px, 2vh, 20px) var(--mi-margem) 0; }
.mi-topo-marca { display: none; flex: none; font: 900 28px/1 var(--font); letter-spacing: -.05em; padding-right: 2px;
  background: linear-gradient(180deg, #fff3c4, #f4a52d 60%, #e2582a); -webkit-background-clip: text; background-clip: text; color: transparent; }
#menu.mi-pg-acervo .mi-topo-marca { display: block; }
#mi-abas { display: flex; gap: 3px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
#mi-abas::-webkit-scrollbar { display: none; }
.mi-aba { flex: none; display: inline-flex; align-items: baseline; gap: 7px; margin: 0; padding: 10px 15px 9px; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  font: 700 condensed 16px/1 var(--lrv-titulo); letter-spacing: .08em; text-transform: uppercase; color: #d9dfe6; background: rgba(4, 6, 10, .74); box-shadow: inset 0 -3px 0 transparent;
  transition: background .12s, color .12s, box-shadow .12s; }
.mi-aba-n { display: none; }   /* número solto não diz o que conta */
.mi-aba:hover { color: #fff; background: rgba(24, 30, 40, .9); }
/* só uma coisa acesa na tela: a aba escolhida fica branca com o risco âmbar, sem disputar com o Continuar */
.mi-aba[aria-selected="true"] { color: #fff; box-shadow: inset 0 -3px 0 var(--lrv-ambar); }
.mi-aba:focus-visible { outline: 2px solid var(--lrv-gelo); outline-offset: -2px; }
.mi-aba-novo { align-self: center; padding: 3px 6px 2px; font: 700 10px/1 var(--lrv-titulo); font-style: normal; letter-spacing: .04em; color: #04131a; background: var(--lrv-gelo); }
.mi-topo-status { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px 16px; margin-left: auto; min-width: 0;
  font: 600 condensed 15px/1.2 var(--lrv-titulo); letter-spacing: .08em; text-transform: uppercase; color: #eef1f4; text-shadow: 0 1px 6px #000; }
.mi-topo-status > span { white-space: nowrap; }
.mi-st-nome { color: #fff; font-weight: 700; }
.mi-st-hora { color: var(--lrv-ambar-claro); font-variant-numeric: tabular-nums; }
.mi-st-dinheiro { color: var(--lrv-verde); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ================================================================================================================
   Início: marca, lista, descrição, lugar e ficha
   ================================================================================================================ */
.mi-inicio { display: grid; min-width: 0; padding: clamp(12px, 3vh, 36px) var(--mi-margem) clamp(8px, 1.6vh, 16px);
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr) minmax(270px, 330px); grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "marca saudacao perfil" "acoes saudacao perfil" "descricao plano perfil"; column-gap: clamp(16px, 3vw, 56px); }
.mi-marca { grid-area: marca; min-width: 0; }
#menu .brand.small { margin: 0; text-align: left; }
#menu .brand-mark { font-family: var(--font); font-size: clamp(64px, 7.4vw, 116px); font-weight: 900; line-height: .8; letter-spacing: -.045em; padding: 0 .06em .04em 0;
  background: linear-gradient(180deg, #fff3c4 0%, #ffd45c 26%, #f4a52d 56%, #e2582a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 0 0 #120802) drop-shadow(-2px 0 0 #120802) drop-shadow(0 2px 0 #120802) drop-shadow(4px 5px 0 rgba(0, 0, 0, .5)) drop-shadow(0 12px 26px rgba(0, 0, 0, .55)); }
#menu .brand-sub { margin-top: 10px; font: 700 clamp(13px, 1.25vw, 18px)/1 var(--lrv-titulo); letter-spacing: .42em; color: var(--lrv-papel); text-shadow: 0 2px 10px #000; }
#menu .brand-city { margin-top: 8px; font: 600 11px/1.2 var(--lrv-titulo); letter-spacing: .26em; text-transform: uppercase; color: rgba(244, 239, 230, .72); text-shadow: 0 1px 6px #000; }

/* Lista: barras escuras; a escolhida vira uma barra clara com o texto escuro */
.mi-acoes { grid-area: acoes; align-self: start; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; min-width: 0; margin-top: clamp(14px, 3.4vh, 34px); }
#menu .mi-acoes > * { grid-column: 1 / -1; }
#menu .mi-acoes > .mi-peq { grid-column: auto; }
#menu .mi-acoes > :is(button, .menu-link) { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px;
  width: 100%; min-width: 0; min-height: 46px; margin: 0; padding: 7px 42px 7px 18px; border: 0; border-radius: 0; text-align: left; text-decoration: none; cursor: pointer;
  font: 700 condensed 20px/1.08 var(--lrv-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--lrv-papel);
  background: linear-gradient(90deg, rgba(4, 6, 10, .86), rgba(4, 6, 10, .64)); box-shadow: inset 3px 0 0 rgba(244, 239, 230, .2);
  transform: none; transition: background .12s, color .12s, box-shadow .12s, transform .14s; }
#menu .mi-acoes > :is(button, .menu-link):hover, #menu .mi-acoes:not(:has(> :hover)) > :is(button, .menu-link):focus-visible { color: var(--lrv-tinta); background: var(--lrv-papel); box-shadow: inset 5px 0 0 var(--lrv-ambar); transform: translateX(6px); outline: none; }
#menu .mi-acoes .mi-rotulo { display: block; max-width: 100%; overflow-wrap: anywhere; }
#menu .mi-acoes small { display: none; margin: 0; font: 500 12px/1.3 var(--font); letter-spacing: 0; text-transform: none; color: #aeb8c4; }
#menu .mi-acoes > :is(button, .menu-link):hover small, #menu .mi-acoes:not(:has(> :hover)) > :is(button, .menu-link):focus-visible small { color: #444a53; }
/* principal: Continuar, ou Novo jogo quando não há save */
#menu .mi-acoes > #btn-continue:not(.hidden), #menu .mi-acoes:has(> #btn-continue.hidden) > [data-action="new"], #menu.mi-sem-save .mi-acoes > [data-action="new"] {
  min-height: 62px; margin-bottom: 6px; padding-left: 20px; font-size: 28px; letter-spacing: .08em; color: var(--lrv-tinta);
  background: linear-gradient(100deg, #ffd45c 0%, #f2b234 46%, #e98a2c 100%); box-shadow: 0 10px 30px rgba(242, 178, 52, .2), inset 0 -3px 0 rgba(0, 0, 0, .18); }
#menu .mi-acoes > #btn-continue:not(.hidden):hover, #menu .mi-acoes:not(:has(> :hover)) > #btn-continue:not(.hidden):focus-visible, #menu .mi-acoes:has(> #btn-continue.hidden) > [data-action="new"]:hover, #menu .mi-acoes:has(> #btn-continue.hidden):not(:has(> :hover)) > [data-action="new"]:focus-visible, #menu.mi-sem-save .mi-acoes > [data-action="new"]:hover, #menu.mi-sem-save .mi-acoes:not(:has(> :hover)) > [data-action="new"]:focus-visible {
  background: linear-gradient(100deg, #fff1c0 0%, #ffd45c 50%, #f2a12c 100%); box-shadow: 0 12px 34px rgba(242, 178, 52, .3), inset 0 -3px 0 rgba(0, 0, 0, .18); }
#menu .mi-acoes > #btn-continue:not(.hidden) small, #menu .mi-acoes:has(> #btn-continue.hidden) > [data-action="new"] small, #menu.mi-sem-save .mi-acoes > [data-action="new"] small { display: block; color: rgba(9, 11, 16, .74); font-weight: 600; }
#menu .mi-acoes > #btn-continue:not(.hidden)::after, #menu .mi-acoes:has(> #btn-continue.hidden) > [data-action="new"]::after, #menu.mi-sem-save .mi-acoes > [data-action="new"]::after {
  content: "▶"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 15px; }
/* Linha pequena: Personagens · Controles · Opções · Rever abertura (este só onde o vídeo pode tocar). Barra grande entra no jogo; botão pequeno ajusta ou mostra algo. */
#menu .mi-acoes > .mi-peq { min-height: 40px; margin-top: 6px; padding: 6px 4px; align-items: center; text-align: center;
  font-size: 15px; letter-spacing: .06em; color: #cbd3dc; background: rgba(4, 6, 10, .7); box-shadow: inset 0 -2px 0 rgba(244, 239, 230, .14); }
#menu .mi-acoes > .mi-peq:hover:not(:disabled), #menu .mi-acoes:not(:has(> :hover)) > .mi-peq:focus-visible { transform: translateY(-2px); box-shadow: inset 0 -3px 0 var(--lrv-ambar); }
#menu .mi-acoes > .mi-peq:disabled { opacity: .5; cursor: default; }
#menu .mi-acoes:has(> .mi-rever:not(.hidden)) { grid-template-columns: 1.25fr 1fr .8fr 1.4fr; }
/* Com partida salva, Novo jogo fica por último e separado: é o único item que substitui a partida, e diz isso sem precisar de foco */
#menu:not(.mi-sem-save) .mi-acoes > [data-action="new"] { margin-top: 8px; }
#menu:not(.mi-sem-save) .mi-acoes > [data-action="new"] small { display: block; }
/* A ficha só mostra o que leva a algum lugar; quem chega pela primeira vez vê só como começar */
.mi-convite:has(> .mi-convite-btn:disabled) { display: none; }
#menu.mi-primeira-vez :is(.mi-nome-linha, #mi-aovivo, #mi-salas, .mi-convite) { display: none; }
#menu #menu-save-info { display: none; }
/* Dificuldade: aviso de que a partida salva será substituída, e a trava de 0,4 s contra o duplo clique */
.difficulty-note.mi-nota-alerta { padding: 10px 12px; color: #fff3cf; background: rgba(226, 88, 42, .22); box-shadow: inset 3px 0 0 var(--lrv-ambar); }
.difficulty-list.mi-trava { pointer-events: none; }
#menu .mi-acoes > :is(#btn-hq, #btn-support) { min-height: 36px; font-size: 13px; }
/* botão próprio do personagem local (outra frente): o menu17 o tira da lista; se ficar (script com erro), continua legível */
#menu .mi-acoes > .piloto-local-entry { border: 0 !important; color: var(--lrv-papel) !important; box-shadow: inset 3px 0 0 #68d9d0; }
#menu .mi-acoes > .piloto-local-entry:hover, #menu .mi-acoes:not(:has(> :hover)) > .piloto-local-entry:focus-visible { color: var(--lrv-tinta) !important; }
#menu .mi-acoes > .piloto-local-entry small { display: block; }

/* Identidade do início: contraste local sem cobrir a cidade ou os acervos. */
#menu .mi-inicio .brand-city { color: #e0d9cc; }
#menu .mi-inicio .brand-sub { text-shadow: 0 2px 4px #04060a, 0 6px 18px #04060a; }
#menu .mi-inicio .mi-acoes > :is(button, .menu-link) {
  border-radius: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
#menu .mi-inicio .mi-acoes > :is(button, .menu-link):hover {
  text-shadow: none;
}
/* O foco continua visível mesmo com o mouse parado em outra ação. */
#menu .mi-inicio .mi-acoes > :is(button, .menu-link):focus-visible {
  outline: 3px solid #fff3cf;
  outline-offset: -3px;
  text-shadow: none;
}
#menu .mi-inicio .mi-acoes > #btn-continue:not(.hidden),
#menu .mi-inicio .mi-acoes:has(> #btn-continue.hidden) > [data-action="new"],
#menu.mi-sem-save .mi-inicio .mi-acoes > [data-action="new"] {
  color: #171006;
  font-weight: 800;
  text-shadow: none;
  box-shadow: inset 0 1px 0 #ffe7a0, inset 0 -3px 0 #9b571c, 0 8px 24px rgba(0, 0, 0, .35);
}
#menu .mi-inicio .mi-perfil {
  border-radius: 3px;
  box-shadow: inset 0 3px 0 var(--lrv-gelo), inset 0 0 0 1px rgba(191, 219, 226, .18), 0 12px 30px rgba(0, 0, 0, .28);
}
#menu .mi-inicio :is(.mi-nome-linha label, #mi-progresso li) { color: #c2ccd7; }
#menu .mi-inicio #mi-nome::placeholder { color: #bac4cf; }
#menu .mi-inicio .mi-descricao { color: #edf1f5; border-radius: 3px; }

/* Descrição do item escolhido */
.mi-descricao { grid-area: descricao; align-self: start; min-height: 3.2em; margin: 10px 0 0; padding: 10px 14px; font: 500 14px/1.45 var(--font); color: #e6ebf0;
  background: rgba(4, 6, 10, .82); box-shadow: inset 3px 0 0 var(--lrv-gelo); }
.mi-descricao:empty { visibility: hidden; }

/* Lugar que a câmera mostra (como o nome da região num jogo de mundo aberto) */
#mi-plano { grid-area: plano; align-self: end; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; max-width: 100%;
  margin: 0 0 4px; text-align: right; pointer-events: none; text-shadow: 0 2px 12px #000, 0 0 2px #000; }
#mi-plano .mi-plano-vivo { font: 600 12px/1.2 var(--lrv-titulo); letter-spacing: .22em; text-transform: uppercase; color: var(--lrv-gelo); white-space: nowrap; }
#mi-plano .mi-plano-vivo::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: mi-pulsar 1.6s infinite; }
#mi-plano strong { font: italic 700 condensed clamp(24px, 2.7vw, 42px)/1.02 var(--lrv-titulo); letter-spacing: .01em; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.mi-plano-entra { animation: mi-legenda .9s ease-out both; }
@keyframes mi-legenda { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes mi-pulsar { 50% { opacity: .35; } }
#menu.mi-jogou #mi-plano { display: none; }

/* Cumprimento da primeira abertura (some sozinho), no meio da cidade, entre a lista e a ficha */
#mi-abertura { grid-area: saudacao; align-self: center; justify-self: center; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%;
  text-align: center; pointer-events: none; animation: mi-abertura 4.6s ease-in-out both; }
#mi-abertura strong { font: italic 700 condensed clamp(44px, 5vw, 80px)/1 var(--lrv-titulo); letter-spacing: .01em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff3cf, var(--lrv-ambar) 70%, #e0902a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .9)); }
#mi-abertura span { font-size: 15px; color: #e7ecf3; text-shadow: 0 2px 14px #000, 0 0 3px #000; }
#mi-abertura .mi-abertura-hora { font: 600 12px/1.2 var(--lrv-titulo); letter-spacing: .24em; text-transform: uppercase; color: var(--lrv-gelo); }
@keyframes mi-abertura { 0% { opacity: 0; transform: translateY(10px); } 14%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }

/* Ficha do jogador */
.mi-perfil { grid-area: perfil; align-self: start; justify-self: end; width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: 14px 16px 15px;
  background: linear-gradient(180deg, rgba(4, 6, 10, .9), rgba(4, 6, 10, .78)); border: 0; border-radius: 0; box-shadow: inset 0 3px 0 var(--lrv-gelo); }
.mi-eyebrow { display: block; font: 700 12px/1.2 var(--lrv-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--lrv-gelo); }
.mi-perfil > .mi-eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: var(--lrv-gelo); box-shadow: 0 0 8px var(--lrv-gelo); }
.mi-nome-linha { display: flex; flex-direction: column; gap: 3px; }
.mi-nome-linha label { font: 600 11px/1.2 var(--lrv-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--lrv-apagado); white-space: nowrap; }
#mi-nome { flex: 1; min-width: 0; padding: 3px 0; font: 700 20px/1.2 var(--lrv-titulo); letter-spacing: .02em; color: #fff; background: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); border-radius: 0; outline: none; }
#mi-nome:focus { border-bottom-color: var(--lrv-ambar); }
#mi-nome::placeholder { color: #808a97; font-weight: 500; }
#mi-saudacao { margin: 0; font-size: 13px; line-height: 1.45; color: #d7dde4; }
#mi-progresso { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; margin: 0; padding: 0; list-style: none; }
#mi-progresso li { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 600 10px/1.2 var(--lrv-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--lrv-apagado); }
#mi-progresso strong { font: 700 condensed 18px/1.15 var(--lrv-titulo); letter-spacing: .02em; text-transform: none; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#mi-progresso strong.mi-dinheiro { color: var(--lrv-verde); }
#mi-aovivo { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1);
  font: 600 12px/1.3 var(--lrv-titulo); letter-spacing: .06em; text-transform: uppercase; color: #ccd3dc; }
.mi-vivo-hora { font-weight: 700; color: var(--lrv-ambar-claro); font-variant-numeric: tabular-nums; }
#mi-salas { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.mi-salas-total { width: 100%; color: #e4e9f0; }
.mi-sala, .mi-convite-btn { font: 700 12px/1.2 var(--lrv-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--lrv-gelo); background: rgba(95, 211, 255, .08);
  border: 1px solid rgba(95, 211, 255, .38); border-radius: 0; padding: 7px 10px; cursor: pointer; text-align: left; }
.mi-sala:hover, .mi-sala:focus-visible, .mi-convite-btn:hover:not(:disabled), .mi-convite-btn:focus-visible { color: var(--lrv-tinta); background: var(--lrv-papel); border-color: var(--lrv-papel); outline: none; }
.mi-convite-btn:disabled { opacity: .55; cursor: default; }
.mi-muted { color: var(--lrv-apagado); line-height: 1.45; }
.mi-convite { display: flex; flex-direction: column; gap: 4px; }
.mi-convite-ok { font-size: 11px; line-height: 1.4; color: var(--lrv-apagado); word-break: break-word; }
.mi-convite-ok:empty { display: none; }
.mi-chamado { display: flex; flex-direction: column; gap: 6px; padding: 10px; font-size: 12px; line-height: 1.4; color: #e4e9f0; background: rgba(95, 211, 255, .08);
  border: 1px solid rgba(95, 211, 255, .5); animation: mi-chamado 1.6s ease-in-out 3; }
@keyframes mi-chamado { 50% { box-shadow: 0 0 0 4px rgba(95, 211, 255, .18); } }

/* ================================================================================================================
   Acervos (Garagem, Cidade, Arsenal, Gente): página própria
   ================================================================================================================ */
.mi-acervo { display: grid; min-width: 0; min-height: 0; padding: clamp(10px, 2.4vh, 26px) var(--mi-margem) 8px;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 40%); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "cabeca vitrine" "palco vitrine"; gap: 14px clamp(16px, 2.2vw, 34px); }
.mi-acervo.sem-vitrine { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeca" "palco"; }
/* Personagens: poucos cartões, a escolha é direta; busca, categoria e setas sobram */
.mi-acervo[data-aba="personagens"] :is(.mi-acervo-ferramentas, .mi-acervo-dica) { display: none; }
.mi-acervo-cabeca { grid-area: cabeca; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; min-width: 0; }
.mi-voltar { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; padding: 6px 12px 6px 14px; border: 0; border-radius: 0; cursor: pointer;
  font: 700 condensed 16px/1 var(--lrv-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--lrv-papel); background: rgba(4, 6, 10, .84); box-shadow: inset 3px 0 0 var(--lrv-ambar); }
.mi-voltar:hover, .mi-voltar:focus-visible { color: var(--lrv-tinta); background: var(--lrv-papel); outline: none; }
#mi-acervo-titulo { flex: 1 1 260px; min-width: 0; margin: 0; font: italic 700 condensed clamp(32px, 3.6vw, 56px)/1 var(--lrv-titulo); letter-spacing: .01em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px #000; }
#mi-acervo-titulo small { display: block; margin-top: 6px; font: 500 13px/1.4 var(--font); font-style: normal; letter-spacing: 0; text-transform: none; color: #c3ccd6; }
#mi-palco { grid-area: palco; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; container-type: inline-size; }
/* Ferramentas: busca, categoria, limpar, contagem e setas */
.mi-acervo-ferramentas { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(220px, .8fr) auto; gap: 8px; align-items: center; }
.mi-acervo-busca, .mi-acervo-filtro { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mi-acervo-label { font: 600 11px/1 var(--lrv-titulo); letter-spacing: .12em; text-transform: uppercase; color: #aebdcc; }
.mi-acervo-input, .mi-acervo-select { width: 100%; min-width: 0; height: 36px; padding: 5px 10px; border: 0; border-bottom: 2px solid rgba(160, 180, 200, .3); border-radius: 0;
  font: 500 13px/1.2 var(--font); color: #e6edf3; background: rgba(4, 6, 10, .86); }
.mi-acervo-input:focus, .mi-acervo-select:focus { border-bottom-color: var(--lrv-ambar); }
.mi-acervo-input::placeholder { color: #8e9cab; }
.mi-acervo-select { color-scheme: dark; }
.mi-acervo-ferramentas button { min-height: 36px; padding: 6px 12px; border: 0; border-radius: 0; cursor: pointer; font: 700 12px/1 var(--lrv-titulo); letter-spacing: .08em; text-transform: uppercase;
  color: #e3eaf0; background: rgba(4, 6, 10, .86); }
.mi-acervo-ferramentas button:hover:not(:disabled), .mi-acervo-ferramentas button:focus-visible { color: var(--lrv-tinta); background: var(--lrv-papel); }
.mi-acervo-ferramentas button:disabled { opacity: .4; cursor: default; }
.mi-acervo-resumo { grid-column: 1 / 3; display: flex; align-items: center; gap: 12px; min-width: 0; font: 600 12px/1.2 var(--lrv-titulo); letter-spacing: .06em; text-transform: uppercase; color: #b9c6d2; }
.mi-acervo-posicao { padding-left: 12px; border-left: 1px solid rgba(145, 170, 189, .3); color: var(--lrv-ambar-claro); font-variant-numeric: tabular-nums; }
.mi-acervo-navegacao { grid-column: 3; justify-self: end; display: flex; gap: 4px; }
.mi-acervo-navegacao .mi-acervo-seta { min-width: 38px; font-size: 16px; }
.mi-acervo-ver { white-space: nowrap; }
.mi-acervo-vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; border: 1px dashed rgba(155, 179, 200, .3); background: rgba(4, 6, 10, .8); color: #d8e2ea; }
.mi-acervo-vazio[hidden] { display: none; }
.mi-acervo-vazio span { padding: 0 12px; font-size: 13px; text-align: center; color: #adbdca; }
.mi-acervo-dica { margin: 0; font-size: 11px; color: #94a4b4; }
/* palco estreito (vitrine ao lado numa janela média): a busca ganha a linha inteira e nada do texto de ajuda corta */
@container (max-width: 780px) {
  .mi-acervo-ferramentas { grid-template-columns: minmax(0, 1fr) auto; }
  .mi-acervo-busca { grid-column: 1 / -1; }
  .mi-acervo-filtro { grid-column: 1; }
  .mi-acervo-limpar { grid-column: 2; }
  .mi-acervo-resumo { grid-column: 1; }
  .mi-acervo-navegacao { grid-column: 2; }
}
/* palco de celular: contagem e setas também ganham linha própria (as setas e "Ver seleção" ocupam a largura toda) */
@container (max-width: 560px) {
  .mi-acervo-resumo { grid-column: 1 / -1; }
  .mi-acervo-navegacao { grid-column: 1 / -1; justify-self: stretch; }
  .mi-acervo-navegacao .mi-acervo-ver { flex: 1; }
}
/* Cartões em grade (rola dentro da página) */
.mi-trilho { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(174px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 8px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 2px 6px 12px 2px; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: rgba(242, 178, 52, .5) transparent; }
.mi-trilho::-webkit-scrollbar { width: 6px; } .mi-trilho::-webkit-scrollbar-thumb { background: rgba(242, 178, 52, .45); }
.mi-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; margin: 0; padding: 10px 11px 11px; text-align: left; font: inherit; color: var(--lrv-papel);
  background: linear-gradient(160deg, rgba(17, 23, 33, .95), rgba(6, 9, 14, .95)); border: 1px solid rgba(160, 180, 200, .16); border-radius: 0; box-shadow: none; cursor: default;
  transition: border-color .12s, background .12s, transform .12s, box-shadow .12s; }
.mi-card[role="button"] { cursor: pointer; }
.mi-card[role="button"]:hover { border-color: rgba(244, 239, 230, .62); transform: translateY(-2px); }
.mi-card.on { border-color: var(--lrv-papel); background: linear-gradient(160deg, rgba(44, 38, 22, .97), rgba(10, 12, 16, .97)); box-shadow: inset 0 -4px 0 var(--lrv-ambar), 0 10px 26px rgba(0, 0, 0, .45); }
.mi-card:focus-visible, .mi-card.mi-foco { outline: 2px solid var(--lrv-gelo); outline-offset: -2px; }
.mi-card-cursor:not(.on) { border-color: rgba(95, 211, 255, .7); }
.mi-card[hidden] { display: none !important; }
.mi-card[aria-disabled="true"] { cursor: default; }
.mi-card[aria-disabled="true"]:hover { transform: none; border-color: rgba(160, 180, 200, .16); }
.mi-card-foto { display: block; width: calc(100% + 22px); height: 96px; margin: -10px -11px 6px; object-fit: cover; object-position: 50% 60%; background: #0b1018; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mi-card-veiculo:hover .mi-card-foto, .mi-card-veiculo.on .mi-card-foto { filter: brightness(1.15) saturate(1.1); }
.mi-card-selo { font: 700 10px/1.2 var(--lrv-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--lrv-gelo); }
.mi-card-titulo { font: 700 condensed 17px/1.12 var(--lrv-titulo); letter-spacing: .02em; color: #fff; overflow-wrap: anywhere; }
.mi-card-sub { font-size: 12px; line-height: 1.38; color: #b5c0cc; overflow-wrap: anywhere; }
.mi-card-nota { font-size: 11px; line-height: 1.4; font-style: normal; color: var(--lrv-ambar); }
.mi-card-nota.mi-ir { margin-top: auto; padding-top: 2px; color: var(--lrv-gelo); }
.mi-card[role="button"]:hover .mi-ir { color: #b9f0ff; }
#menu.mi-jogou .mi-ir { display: none; }
.mi-card-veiculo.meu .mi-card-selo { color: var(--lrv-ambar); }
.mi-card-veiculo.meu .mi-card-sub { color: var(--lrv-verde); font-weight: 600; }
.mi-card-destaque { grid-column: span 2; box-shadow: inset 0 3px 0 var(--lrv-ambar); }
.mi-card-breve { border-style: dashed; }
.mi-card.novo { border-color: rgba(95, 211, 255, .6); }
.mi-card.novo .mi-card-selo { color: #8fe8ff; }
.mi-num { font-weight: 800; color: var(--lrv-ambar-claro); font-variant-numeric: tabular-nums; }
.mi-barras { display: grid; gap: 3px; margin-top: 4px; }
.mi-barra { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 6px; font: 600 10px/1 var(--lrv-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--lrv-apagado); }
.mi-barra i { display: block; height: 4px; background: linear-gradient(90deg, var(--lrv-gelo), var(--lrv-ambar)); }
/* Vitrine 360° */
#mi-vitrine { grid-area: vitrine; position: relative; display: grid; grid-template-rows: minmax(200px, 1fr) auto; min-width: 0; min-height: 340px; overflow: hidden;
  border: 1px solid rgba(160, 190, 215, .22); border-radius: 0; background: radial-gradient(ellipse at 50% 42%, #1d3149 0%, #0e1724 58%, #070b12 100%); }
#mi-vitrine.hidden { display: none; }
#mi-vitrine::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(144, 191, 212, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(144, 191, 212, .05) 1px, transparent 1px); background-size: 28px 28px; }
#mi-vitrine.com-foto { background-image: var(--mi-foto), radial-gradient(ellipse at 50% 42%, #1d3149 0%, #0e1724 58%, #070b12 100%); background-size: cover, auto; background-position: center 58%, center; background-repeat: no-repeat; }
.mi-vitrine-legenda { position: absolute; z-index: 1; top: 14px; left: 16px; right: 16px; pointer-events: none; font: 700 11px/1 var(--lrv-titulo); letter-spacing: .22em; color: #a8c4d3; }
.mi-vitrine-legenda b { float: right; color: var(--lrv-ambar-claro); font-weight: 700; }
#mi-vitrine-canvas { position: relative; grid-row: 1; display: block; width: 100%; height: 100%; min-height: 200px; touch-action: pan-y; cursor: grab; }
#mi-vitrine-canvas:active { cursor: grabbing; }
#mi-vitrine-info { position: relative; grid-row: 2; display: flex; flex-direction: column; gap: 4px; min-height: 98px; padding: 12px 16px 14px; pointer-events: none;
  background: rgba(4, 6, 10, .93); border-top: 1px solid rgba(255, 255, 255, .08); text-shadow: none; }
#mi-vitrine-info .mi-eyebrow { font-size: 11px; letter-spacing: .14em; color: var(--lrv-ambar); }
.mi-vitrine-nome { font: 700 condensed clamp(22px, 2vw, 32px)/1.08 var(--lrv-titulo); letter-spacing: .02em; color: #fff; }
.mi-vitrine-sub { font-size: 12px; line-height: 1.4; color: #b8c3cf; }
.mi-vitrine-status { font: 600 11px/1.3 var(--lrv-titulo); letter-spacing: .1em; text-transform: uppercase; color: #8fcfe4; }
.mi-vitrine-controles { position: absolute; z-index: 2; top: 36px; right: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: calc(100% - 24px); }
.mi-vitrine-controles button { min-height: 30px; padding: 6px 10px; border: 0; border-radius: 0; cursor: pointer; font: 700 11px/1 var(--lrv-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--lrv-papel); background: rgba(4, 6, 10, .84); }
.mi-vitrine-controles button:hover:not(:disabled), .mi-vitrine-controles button:focus-visible { color: var(--lrv-tinta); background: var(--lrv-papel); }
.mi-vitrine-controles button:disabled { opacity: .5; cursor: default; }
#mi-vitrine.mi-vitrine-filtrada :is(canvas, #mi-vitrine-info, .mi-vitrine-controles) { visibility: hidden; }
#mi-vitrine.mi-vitrine-filtrada .mi-vitrine-controles { display: none; }
#mi-vitrine.mi-vitrine-filtrada::after { content: "Escolha uma peça nos resultados para abrir a vitrine."; position: absolute; inset: 0; display: grid; place-content: center; padding: 38px; text-align: center; font-size: 13px; line-height: 1.6; color: #a9bfce; }

/* ================================================================================================================
   Rodapé
   ================================================================================================================ */
.mi-rodape { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 20px; min-width: 0; padding: 8px var(--mi-margem) 10px; }
#mi-letreiro { min-width: 0; margin: 0; font: 600 13px/1.4 var(--lrv-titulo); letter-spacing: .05em; color: #c9d2dc; transition: opacity .4s; }
#mi-letreiro::before { content: "▸ "; color: var(--lrv-ambar); }
.mi-fade { opacity: 0 !important; }
.mi-rodape-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 14px; font-size: 11px; color: var(--lrv-apagado); }
#menu .save-info { margin: 0; padding: 0; border: 0; font-size: 11px; color: var(--lrv-apagado); }
#menu .privacy-link { margin: 0; font-size: inherit; color: var(--lrv-apagado); }
#menu .mi-rodape-links .mi-creditos { display: inline-flex; align-items: center; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: none; text-decoration: underline; color: var(--lrv-apagado); background: none; box-shadow: none; }
#menu .mi-rodape-links .mi-creditos:hover, #menu .mi-rodape-links .mi-creditos:focus-visible { color: #fff; background: none; transform: none; }
#menu .version { position: static; font-size: 10px; color: #8d96a3; }
#menu .ad-consent, #menu .ad-slot { grid-column: 1 / -1; }

/* ================================================================================================================
   Entrada do menu depois do carregamento (abertura.js liga body.lrv-entrada por ~2 s)
   ================================================================================================================ */
body.lrv-entrada #menu .mi-topo { animation: mi-de-cima .6s .5s cubic-bezier(.2, .7, .2, 1) both; }
body.lrv-entrada #menu .mi-marca { animation: mi-da-esquerda .7s .5s cubic-bezier(.2, .7, .2, 1) both; }
body.lrv-entrada #menu .mi-acoes > * { animation: mi-da-esquerda .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .62s; }
body.lrv-entrada #menu .mi-acoes > :nth-child(2) { animation-delay: .68s; }
body.lrv-entrada #menu .mi-acoes > :nth-child(3) { animation-delay: .74s; }
body.lrv-entrada #menu .mi-acoes > :nth-child(4) { animation-delay: .8s; }
body.lrv-entrada #menu .mi-acoes > :nth-child(5) { animation-delay: .86s; }
body.lrv-entrada #menu .mi-acoes > :nth-child(n+6) { animation-delay: .92s; }
body.lrv-entrada #menu .mi-perfil { animation: mi-da-direita .7s .7s cubic-bezier(.2, .7, .2, 1) both; }
body.lrv-entrada #menu :is(.mi-descricao, .mi-rodape, #mi-plano) { animation: mi-surge .7s 1s ease-out both; }
@keyframes mi-de-cima { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes mi-da-esquerda { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes mi-da-direita { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes mi-surge { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================================================================
   Telas que saem do menu e a pausa (Dificuldade, Online, Opções, Controles, Créditos, Missões, Pausa, Fim de jogo)
   ================================================================================================================ */
.screen.dim { background: radial-gradient(120% 100% at 30% 30%, rgba(4, 6, 10, .6), rgba(2, 3, 6, .9)); backdrop-filter: blur(6px) saturate(.85); }
.screen.dim > .menu-panel { position: relative; border: 0; border-radius: 0; background: linear-gradient(180deg, rgba(8, 11, 17, .97), rgba(5, 7, 11, .96));
  box-shadow: inset 0 3px 0 var(--lrv-ambar), 0 30px 90px rgba(0, 0, 0, .65); padding: 26px 30px 24px; scrollbar-width: thin; scrollbar-color: rgba(242, 178, 52, .5) transparent; }
.screen.dim .menu-panel h2 { margin: 0 0 16px; font: italic 700 condensed clamp(34px, 3.8vw, 52px)/1 var(--lrv-titulo); letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.screen.dim .menu-panel h3 { font: 700 14px/1.2 var(--lrv-titulo); letter-spacing: .16em; text-transform: uppercase; color: var(--lrv-ambar); }
.screen.dim .menu-list { gap: 4px; }
.screen.dim .menu-list > :is(button, .menu-link) { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; min-height: 46px; margin: 0;
  padding: 9px 18px; border: 0; border-radius: 0; text-align: left; text-decoration: none; cursor: pointer;
  font: 700 condensed 19px/1.1 var(--lrv-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--lrv-papel);
  background: rgba(255, 255, 255, .045); box-shadow: inset 3px 0 0 rgba(244, 239, 230, .2); transform: none; transition: background .12s, color .12s, box-shadow .12s, transform .14s; }
.screen.dim .menu-list > :is(button, .menu-link):hover, .screen.dim .menu-list:not(:has(> :hover)) > :is(button, .menu-link):focus-visible { color: var(--lrv-tinta); background: var(--lrv-papel); box-shadow: inset 5px 0 0 var(--lrv-ambar); transform: translateX(4px); outline: none; }
.screen.dim .menu-list > .piloto-local-entry { border: 0 !important; color: var(--lrv-papel) !important; box-shadow: inset 3px 0 0 #68d9d0; }
.screen.dim .menu-list > .piloto-local-entry:hover, .screen.dim .menu-list:not(:has(> :hover)) > .piloto-local-entry:focus-visible { color: var(--lrv-tinta) !important; }
.screen.dim .menu-list.row { flex-wrap: wrap; gap: 6px; }
.screen.dim .menu-list.row > button { flex: 0 1 auto; min-width: 150px; align-items: center; text-align: center; font-size: 15px; }
.screen.dim .menu-list.row > button:hover, .screen.dim .menu-list.row:not(:has(> :hover)) > button:focus-visible { transform: translateY(-2px); }
.screen.dim [data-action="back"]::before { content: "←"; }
.screen.dim .menu-list > [data-action="back"] { flex-direction: row; align-items: center; gap: 8px; }
.screen.dim .menu-list:not(.row) > [data-action="back"] { justify-content: flex-start; }
.screen.dim .menu-list.row > [data-action="back"], #difficulty .difficulty-list > [data-action="back"] { justify-content: center; }
.screen.dim .save-info { font-size: 13px; color: #c3ccd6; }
.screen.dim a { color: var(--lrv-gelo); }

/* Dificuldade: três cartões lado a lado; Normal é o recomendado */
#difficulty > .menu-panel { width: min(980px, 94vw); }
.difficulty-note { margin: -6px 0 16px; font-size: 14px; color: #c3ccd6; }
#difficulty .difficulty-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#difficulty .difficulty-list > [data-action="back"] { grid-column: 1 / -1; min-height: 44px; margin-top: 4px; align-items: center; font-size: 15px; }
#difficulty .difficulty-list > [data-action^="new-"] { justify-content: flex-start; gap: 10px; min-height: 150px; padding: 18px 18px 16px; }
#difficulty .difficulty-list strong { font: italic 700 condensed 36px/1 var(--lrv-titulo); letter-spacing: .02em; }
#difficulty .difficulty-list span { font: 500 14px/1.45 var(--font); letter-spacing: 0; text-transform: none; color: #c4ccd6; }
#difficulty .difficulty-list > [data-action^="new-"]:hover span, #difficulty .difficulty-list:not(:has(> :hover)) > [data-action^="new-"]:focus-visible span { color: #3a4048; }
#difficulty .difficulty-list > [data-action="new-normal"] { box-shadow: inset 0 3px 0 var(--lrv-ambar); }
#difficulty .difficulty-list > [data-action="new-normal"]::after { content: "Recomendado"; position: absolute; top: 14px; right: 14px; font: 700 10px/1 var(--lrv-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--lrv-ambar); }
#difficulty .difficulty-list > [data-action^="new-"] { position: relative; }

/* Online */
#online > .menu-panel { width: min(640px, 94vw); }
.online-note, .online-hint { font-size: 13px; line-height: 1.55; color: #c3ccd6; }
.online-field span { font: 600 11px/1 var(--lrv-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--lrv-apagado); }
.online-field input { border-radius: 0; border: 0; border-bottom: 2px solid rgba(160, 180, 200, .3); background: rgba(255, 255, 255, .05); color: #fff; font: 700 18px/1.2 var(--lrv-titulo); letter-spacing: .04em; }
.online-field input:focus { border-bottom-color: var(--lrv-ambar); outline: none; }

/* Opções: abas no mesmo padrão do menu */
#options .settings-eyebrow { font: 700 11px/1 var(--lrv-titulo); letter-spacing: .2em; color: var(--lrv-ambar); }
#options .settings-tabs { gap: 3px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
#options .settings-tabs button { padding: 11px 10px 10px; font: 700 condensed 16px/1 var(--lrv-titulo); letter-spacing: .08em; text-transform: uppercase; color: #cdd5de; background: rgba(255, 255, 255, .04); border: 0; border-bottom: 3px solid transparent; }
#options .settings-tabs button:hover { color: #fff; }
#options .settings-tabs [aria-selected=true] { color: var(--lrv-tinta); background: var(--lrv-papel); border-bottom-color: var(--lrv-ambar); }
#options .options select { border-radius: 0; background: #0d131c; border-color: rgba(160, 180, 200, .25); }
#options .camera-presets { border-left-width: 3px; background: rgba(255, 255, 255, .035); }
#options :is(.camera-presets button, .settings-reset) { border-radius: 0; font: 700 12px/1.2 var(--lrv-titulo); letter-spacing: .06em; text-transform: uppercase; }
#options .settings-footer { background: rgba(5, 7, 11, .97); box-shadow: 0 -22px 22px rgba(5, 7, 11, .92); }
/* o formulário ocupa o painel inteiro (antes ficava preso em 340 px, com metade do painel vazia) */
#options .options { width: 100%; }

/* Controles: um bloco por jeito de jogar */
#controls > .menu-panel { width: min(1100px, 94vw); }
#controls .controls-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 12px; }
#controls .controls-grid > div { padding: 12px 16px 14px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 3px 0 rgba(242, 178, 52, .65); }
#controls .controls-grid h3 { margin: 0 0 6px; }
#controls .controls-grid p { margin: 7px 0; font-size: 14px; line-height: 1.5; color: #d9dfe6; }

/* Créditos */
#credits > .menu-panel { width: min(1000px, 94vw); }
#credits .credits p { font-size: 13.5px; line-height: 1.62; color: #d5dce4; }
#credits .credits strong { color: #fff; }
.creditos-garagem { margin: 14px 0; padding: 14px 16px; background: rgba(255, 255, 255, .035); box-shadow: inset 3px 0 0 var(--lrv-ambar); }
.creditos-garagem:empty { display: none; }
.creditos-garagem h3 { margin: 0 0 6px; }
.creditos-garagem > p { margin: 0 0 10px; }
.creditos-garagem ul { columns: 2 320px; column-gap: 28px; margin: 0; padding: 0; list-style: none; }
.creditos-garagem li { break-inside: avoid; margin: 0 0 9px; font-size: 12.5px; line-height: 1.5; color: #cdd5de; overflow-wrap: anywhere; }
.creditos-garagem li strong { display: block; font: 700 14px/1.2 var(--lrv-titulo); letter-spacing: .04em; color: #fff; }
.creditos-garagem li .creditos-alerta { display: block; margin-top: 2px; font-size: 12px; font-style: normal; line-height: 1.45; color: #ffb4a8; }

/* Pausa e missões */
#pause > .menu-panel { min-width: min(440px, 92vw); }
#missions > .menu-panel { width: min(900px, 94vw); }

/* Fim de jogo: título grande em vermelho numa faixa escura, e a cidade perde a cor */
#gameover { background: radial-gradient(120% 100% at 50% 45%, rgba(20, 2, 2, .35), rgba(0, 0, 0, .82)); }
#gameover::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 220px; transform: translateY(-62%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .72) 18%, rgba(0, 0, 0, .72) 82%, transparent); }
#gameover > .menu-panel { text-align: center; background: none; box-shadow: none; }
#gameover h2.danger { font: italic 800 condensed clamp(56px, 9vw, 128px)/1 var(--lrv-titulo); letter-spacing: .02em; color: #e8433a; text-shadow: 3px 3px 0 #000, 0 0 44px rgba(232, 67, 58, .45); }
#gameover .menu-list { align-items: stretch; max-width: 360px; margin: 18px auto 0; }
#app:has(#gameover.active) #game { filter: grayscale(.9) contrast(1.05) brightness(.8); }

/* ================================================================================================================
   Tamanhos de janela
   ================================================================================================================ */
@media (max-width: 1240px) {
  #mi-abertura { display: none; }
}
@media (max-width: 1180px) and (min-width: 901px) {
  .mi-inicio { grid-template-columns: minmax(290px, 380px) minmax(0, 1fr) minmax(250px, 300px); column-gap: clamp(14px, 2.4vw, 32px); }
  .mi-acervo { grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); }
}
@media (max-width: 1040px) and (min-width: 901px) {
  /* a coluna do meio ficaria estreita demais: a ficha desce para o lado da lista e o lugar some */
  .mi-inicio { grid-template-columns: minmax(280px, 1fr) minmax(250px, 300px); grid-template-rows: auto auto auto; grid-template-areas: "marca perfil" "acoes perfil" "descricao perfil"; }
  #mi-plano { display: none; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .mi-topo { padding-top: 10px; }
  .mi-aba { padding: 9px 13px 8px; font-size: 14px; }
  .mi-inicio { padding-top: clamp(10px, 2.2vh, 20px); }
  #menu .brand-mark { font-size: clamp(54px, 6.2vw, 84px); }
  #menu .brand-sub { margin-top: 8px; }
  .mi-acoes { margin-top: 14px; }
  #menu .mi-acoes > :is(button, .menu-link) { min-height: 40px; font-size: 16px; }
  #menu .mi-acoes > #btn-continue:not(.hidden), #menu .mi-acoes:has(> #btn-continue.hidden) > [data-action="new"], #menu.mi-sem-save .mi-acoes > [data-action="new"] { min-height: 54px; font-size: 21px; }
  #menu .mi-acoes > .mi-peq { min-height: 36px; font-size: 13px; }
  .mi-descricao { margin-top: 8px; padding: 8px 12px; font-size: 13px; }
  .mi-perfil { gap: 8px; padding: 12px 14px; }
  #mi-progresso { gap: 7px 12px; }
  #mi-progresso strong { font-size: 15px; }
  #mi-nome { font-size: 18px; }
  .mi-card-foto { height: 82px; }
  #mi-vitrine-info { min-height: 86px; padding: 10px 14px; }
}
@media (max-height: 650px) and (min-width: 901px) {
  #menu .brand-city, .mi-descricao, #mi-plano { display: none; }
  #menu .brand-mark { font-size: 52px; }
  #menu .mi-acoes > :is(button, .menu-link) { min-height: 36px; font-size: 15px; }
  #menu .mi-acoes > #btn-continue:not(.hidden), #menu .mi-acoes:has(> #btn-continue.hidden) > [data-action="new"], #menu.mi-sem-save .mi-acoes > [data-action="new"] { min-height: 48px; font-size: 19px; }
  #mi-saudacao { display: none; }
  #mi-progresso { grid-template-columns: 1fr 1fr 1fr; }
  #menu.mi-pg-acervo .menu-panel.mi-grid { grid-template-rows: auto minmax(360px, 1fr) auto; }
}

/* Celular e janelas estreitas: uma coluna que rola; abas fixas em cima; descrição dentro de cada botão */
@media (max-width: 900px), (max-height: 560px) {
  #menu::before { background: linear-gradient(180deg, rgba(4, 6, 10, .55), rgba(4, 6, 10, .82) 45%, rgba(4, 6, 10, .92)); }
  #menu .menu-panel.mi-grid { display: block; -webkit-overflow-scrolling: touch; }
  .mi-topo { position: sticky; top: 0; z-index: 6; flex-wrap: nowrap; gap: 10px; padding: 8px 12px; background: rgba(4, 6, 10, .94); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
  .mi-topo-marca { display: block; font-size: 24px; }
  .mi-topo-status { display: none; }
  .mi-aba { padding: 10px 12px 9px; font-size: 13px; }
  .mi-inicio { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 8px; }
  .mi-acoes { align-self: stretch; margin-top: 0; }
  #menu .brand-mark { font-size: clamp(62px, 18vw, 84px); }
  #menu .mi-acoes > :is(button, .menu-link) { min-height: 54px; font-size: 17px; }
  #menu .mi-acoes > :is(button, .menu-link):hover, #menu .mi-acoes:not(:has(> :hover)) > :is(button, .menu-link):focus-visible { transform: none; }
  #menu .mi-acoes small { display: block; }
  #menu .mi-acoes > .mi-peq { min-height: 46px; }
  #menu .mi-acoes:has(> .mi-rever:not(.hidden)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mi-rodape-links .mi-creditos { min-height: 44px; }
  .mi-descricao, #mi-plano { display: none; }
  .mi-perfil { justify-self: stretch; margin-top: 0; }
  .mi-acervo { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 8px; }
  .mi-acervo-cabeca { order: 0; }
  #mi-vitrine { order: 1; position: sticky; top: 52px; z-index: 4; min-height: 0; height: min(42vh, 300px); grid-template-rows: minmax(0, 1fr) auto; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
  #mi-vitrine-canvas { min-height: 0; }
  #mi-vitrine-info { min-height: 0; padding: 8px 12px 10px; }
  .mi-vitrine-sub { display: none; }
  .mi-vitrine-controles { top: 32px; }
  #mi-palco { order: 2; }
  .mi-trilho { overflow: visible; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding-bottom: 4px; }
  .mi-card-destaque { grid-column: auto; }
  .mi-acervo-input, .mi-acervo-select { height: 42px; font-size: 14px; }
  .mi-acervo-ferramentas button { min-height: 42px; }
  .mi-acervo-label { min-width: 62px; }
  .mi-acervo-dica { display: none; }
  .mi-rodape { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 16px 18px; }
  .mi-rodape-links { justify-content: flex-start; }
  #menu.mi-pg-acervo .menu-panel.mi-grid { display: block; }
  /* telas que saem do menu: ocupam a tela e rolam */
  .screen.dim > .menu-panel { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 20px 16px 18px; }
  #difficulty .difficulty-list { grid-template-columns: 1fr; }
  #difficulty .difficulty-list > [data-action^="new-"] { min-height: 0; }
  .screen.dim .menu-list.row > button { flex: 1 1 140px; }
}
/* celular em pé: as seis abas em duas linhas de três, sem cortar (sem os números e sem a marca pequena) */
@media (min-width: 901px) and (min-height: 561px) and (max-height: 800px) {
  #app #menu.mi-pg-inicio .menu-panel.mi-grid { display: grid; }   /* o rodapé fica preso embaixo mesmo com a lista mais curta */
}
@media (max-width: 640px) {
  #menu.mi-pg-inicio .mi-inicio nav.mi-acoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #menu.mi-pg-inicio .mi-inicio nav.mi-acoes > .mi-peq { grid-column: auto; }
  .mi-topo { padding: 8px 10px; }
  .mi-topo-marca, .mi-aba-n, .mi-aba-novo { display: none !important; }
  #mi-abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; width: 100%; }
  .mi-aba { justify-content: center; padding: 11px 4px 10px; font-size: 13px; letter-spacing: .06em; }
  .mi-inicio, .mi-acervo { padding-left: 12px; padding-right: 12px; }
  #mi-vitrine { top: 94px; }
}
/* celular deitado: lista e ficha lado a lado */
@media (max-height: 560px) and (min-width: 640px) {
  .mi-inicio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 42%); grid-template-areas: "marca perfil" "acoes perfil"; grid-template-rows: auto auto; gap: 12px 18px; }
  #menu .brand-mark { font-size: 48px; }
  #menu .brand-city { display: none; }
  .mi-acervo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 42%); grid-template-areas: "cabeca vitrine" "palco vitrine"; grid-template-rows: auto auto; }
  #mi-vitrine { top: 54px; height: calc(100dvh - 72px); align-self: start; }
  .mi-vitrine-sub { display: block; }
  .mi-trilho { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* toque: a dica do Esc não serve */
@media (pointer: coarse) { .mi-voltar kbd { display: none; } }

/* Movimento reduzido e texto ampliado */
.reduced-motion #menu *, .reduced-motion #menu *::before, .reduced-motion #menu *::after,
.reduced-motion .screen.dim *, .reduced-motion .screen.dim *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  #menu *, #menu *::before, #menu *::after, .screen.dim * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  #mi-abertura { display: none; }
}
.large-text #menu .mi-acoes > :is(button, .menu-link) { font-size: 20px; }
.large-text #menu .mi-acoes:has(> .mi-rever:not(.hidden)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.large-text #menu .mi-acoes small, .large-text .mi-descricao, .large-text #mi-saudacao, .large-text .mi-card-sub { font-size: 15px; }
.large-text .mi-card-titulo { font-size: 18px; }
/* texto grande também na tela Créditos (antes só o menu e as Opções cresciam) */
.large-text #credits .credits p, .large-text .creditos-garagem li { font-size: 15.5px; }
.large-text .creditos-garagem li strong { font-size: 16px; }
.large-text .creditos-garagem li .creditos-alerta { font-size: 15px; }