/* =========================================================
   Revira como app: botão "Instalar" do topo, seção "Jogar pelo celular" do Sobre
   e a demonstração animada (porte do DemoDeInstalacao do PUBLIX).
   Só variáveis do projeto fora do celular; funciona nos temas pet, pixel e museu.
   ========================================================= */

/* ---------- botão do topo ---------- */
.topo-instalar {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 999px; padding: 7px 12px 7px 10px;
  background: rgba(255, 255, 255, .1); color: var(--topo-texto);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
  font-weight: 700; font-size: 14px; line-height: 1; white-space: nowrap;
  transition: background .2s;
}
.topo-instalar:hover { background: rgba(255, 255, 255, .2); }
.topo-instalar svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 480px) {
  .topo-instalar { padding: 8px; }
  .topo-instalar-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
[data-tema="pixel"] .topo-instalar { box-shadow: inset 0 0 0 2px rgba(243, 248, 230, .5); font-family: var(--serif); letter-spacing: .04em; }

/* ---------- seção do Sobre e cartão ---------- */
.sobre-instalar { margin-top: 34px; }
.sobre .sobre-instalar h2 { margin-top: 0; }
.di-cartao {
  display: flex; flex-direction: column; gap: 16px;
  background: var(--superficie); padding: clamp(16px, 3vw, 22px);
  border-radius: var(--raio); box-shadow: inset 0 0 0 1px var(--linha);
}
[data-tema="pixel"] .sobre .di-cartao { box-shadow: 4px 4px 0 #5b2d4c, inset 0 0 0 3px #5b2d4c; }
.di-modal .di-cartao { background: transparent; padding: 0; box-shadow: none; }
.di-intro { margin: 0; font-size: 16px !important; color: var(--tinta-2); }
.di-aviso { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 15px !important; color: var(--tinta);
  background: color-mix(in srgb, var(--laranja) 16%, transparent); box-shadow: inset 3px 0 0 var(--laranja); }
.di-aviso-slot:empty { display: none; }
.di-instalar-ja svg { width: 18px; height: 18px; }
.di-comp { border-top: 1px solid var(--linha); padding-top: 12px; }
.di-link { border: 0; background: none; padding: 4px 0; font-weight: 700; font-size: 15px; color: var(--titulo); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.di-pc { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; }
.di-pc svg, .di-txt svg { width: 15px; height: 15px; display: inline; vertical-align: -3px; }

/* ---------- modal ---------- */
.di-modal { width: min(94vw, 720px); }
.di-modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.di-modal-cab h2 { margin: 0; font: 700 24px/1.2 var(--serif); color: var(--titulo); }
.di-fechar { width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%; background: rgba(40, 73, 90, .1); color: var(--titulo); font-size: 24px; line-height: 1; }
.di-fechar:hover { background: rgba(40, 73, 90, .18); }

/* ---------- demonstração ---------- */
.di-demo { container-type: inline-size; display: flex; flex-direction: column; gap: 14px; }
.di-abas { display: flex; gap: 4px; align-self: flex-start; padding: 4px; border-radius: 12px; background: color-mix(in srgb, var(--linha) 70%, transparent); }
.di-abas button { border: 0; border-radius: 9px; padding: 7px 14px; background: transparent; font-weight: 700; font-size: 14px; color: var(--tinta-2); transition: background .2s, color .2s; }
.di-abas button[aria-selected="true"] { background: var(--ativo-fundo); color: var(--ativo-texto); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.di-abas button:not([aria-selected="true"]):hover { color: var(--titulo); }
.di-nota { margin: -4px 0 0; font-size: 15px !important; color: var(--titulo); }
.di-lado { display: flex; flex-direction: column; align-items: center; gap: 20px; }
@container (min-width: 34rem) { .di-lado { flex-direction: row; align-items: flex-start; } }
.di-passos { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.di-passos ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.di-passos ol button {
  display: flex; gap: 12px; width: 100%; text-align: left; border: 0; border-radius: 10px;
  padding: 9px 12px; background: transparent; font-size: 15px; line-height: 1.4; color: var(--tinta-2);
  transition: background .2s, color .2s;
}
.di-passos ol button:hover { background: color-mix(in srgb, var(--linha) 45%, transparent); }
.di-passos ol button.atual { background: color-mix(in srgb, var(--destaque) 12%, transparent); color: var(--tinta); }
.di-passos ol button.atual strong { color: var(--titulo); }
.di-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: color-mix(in srgb, var(--linha) 80%, transparent); color: var(--tinta-2); transition: background .2s, color .2s; }
.atual .di-n { background: var(--destaque); color: var(--destaque-texto); }
.di-txt { min-width: 0; overflow-wrap: anywhere; }
.di-controles { display: flex; gap: 8px; padding: 0 12px; }
.di-ctl { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; padding: 6px 11px; background: transparent;
  font-weight: 700; font-size: 13px; color: var(--titulo); box-shadow: inset 0 0 0 1.5px var(--linha); }
.di-ctl:hover { background: color-mix(in srgb, var(--linha) 45%, transparent); }
.di-ctl svg { width: 14px; height: 14px; }
/* no pixel a --linha é escura (é a cor do contorno): trilho e números claros, para ler */
[data-tema="pixel"] .di-abas { background: rgba(91, 45, 76, .12); box-shadow: inset 0 0 0 2px #5b2d4c; }
[data-tema="pixel"] .di-abas button:not([aria-selected="true"]) { color: #5b2d4c; }
[data-tema="pixel"] .di-n { background: rgba(91, 45, 76, .12); color: #5b2d4c; }
[data-tema="pixel"] .atual .di-n { background: var(--destaque); color: var(--destaque-texto); }
[data-tema="pixel"] :is(.di-passos ol button:hover, .di-ctl:hover) { background: rgba(91, 45, 76, .08); }
[data-tema="pixel"] .di-ctl { box-shadow: inset 0 0 0 2px #5b2d4c; }
@media (pointer: coarse) { .di-abas button, .di-ctl { padding-top: 10px; padding-bottom: 10px; } }

/* ---------- o celular (cores de aparelho, iguais em todos os temas) ---------- */
/* os raios levam !important para o tema pixel (que zera todos) não quadrar o aparelho */
.di-cel {
  position: relative; flex: none; width: 212px; height: 430px;
  border: 6px solid #2a2b33; border-radius: 34px !important; background: #000;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6);
  font: 400 10px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  color: #fff; text-transform: none; letter-spacing: normal; user-select: none;
}
.di-cel * { box-sizing: border-box; }
.di-vidro { position: absolute; inset: 0; overflow: hidden; border-radius: 28px !important; }
.di-camera { position: absolute; top: 8px; left: 50%; z-index: 40; transform: translateX(-50%); background: #000; border-radius: 999px !important; width: 64px; height: 16px; }
.di-cel[data-plataforma="android"] .di-camera { width: 12px; height: 12px; }
.di-tela { position: relative; height: 100%; background: #1d3542; }
.di-cel b, .di-cel strong { font-weight: 700; }
.di-cel small { display: block; font-size: 8px; color: rgba(255, 255, 255, .5); }
.di-cel .di-ico { width: 12px; height: 12px; flex: none; }
.di-icone { display: block; border-radius: 22% !important; object-fit: cover; flex: none; }
.di-i5 { width: 20px; height: 20px; } .di-i6 { width: 24px; height: 24px; } .di-i8 { width: 32px; height: 32px; }
.di-i9 { width: 36px; height: 36px; } .di-i12 { width: 48px; height: 48px; }
.di-forte { font-weight: 700; }
.di-azul { color: #0a84ff; }

/* toque: bolinha que aparece e pulsa sobre o alvo */
.di-toque {
  position: absolute; z-index: 30; width: 28px; height: 28px; pointer-events: none;
  border-radius: 50% !important; border: 2px solid rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .35);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .15);
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.5); opacity: 0; transition: all .3s;
}
.di-toque.on { transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); opacity: 1; }

/* a página do Revira dentro do navegador */
.di-pagina { height: 100%; display: flex; flex-direction: column; background: #FDFBE4; color: #1d3542; }
.di-pag-topo { display: flex; align-items: center; gap: 6px; padding: 7px 9px; background: #28495A; color: #FDFBE4; font: 500 10px/1 Georgia, serif; }
.di-pag-topo b { font-weight: 800; }
.di-pag-corpo { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 0; }
.di-pag-kicker { height: 5px; width: 38%; border-radius: 3px !important; background: #F2A35E; }
.di-pag-tit { height: 11px; width: 72%; border-radius: 3px !important; background: #1d3542; opacity: .85; }
.di-pag-tit.di-curto { width: 48%; background: #F2606B; opacity: 1; }
.di-pag-cartas { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.di-pag-carta { aspect-ratio: 4 / 5; border-radius: 7px !important; box-shadow: inset 0 0 0 2px rgba(253, 251, 228, .6); }
.di-pag-carta.di-c { background: linear-gradient(135deg, #F2606B, #c2434e); }
.di-pag-carta.di-l { background: linear-gradient(135deg, #F2A35E, #d98a43); }
.di-pag-carta.di-v { background: linear-gradient(135deg, #2A9D8F, #1f7a6f); }
.di-pag-carta.di-o { background: linear-gradient(135deg, #31586b, #1d3542); }

/* camadas que entram e saem */
.di-cel [data-vis] { transition: opacity .3s, transform .5s cubic-bezier(.2, .8, .2, 1); }

/* iPhone */
.di-ios-pag { height: 100%; padding: 28px 0 48px; background: #28495A; }
.di-ios-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center; gap: 6px; padding: 0 8px 4px; background: rgba(31, 32, 38, .96); }
.di-end { flex: 1; min-width: 0; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 999px !important;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.di-android .di-end { justify-content: flex-start; padding: 0 10px; }
.di-mais { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50% !important; background: rgba(255, 255, 255, .1); font-size: 14px; font-weight: 700; transition: background .2s; }
.di-mais.hl { background: rgba(255, 255, 255, .3); }
.di-mais .di-ico { width: 16px; height: 16px; }
.di-ios-menu {
  position: absolute; right: 8px; bottom: 56px; z-index: 10; width: 128px; padding: 4px;
  border-radius: 12px !important; background: #2c2d35; box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
  transform-origin: bottom right; transform: scale(.75); opacity: 0; pointer-events: none;
}
.di-ios-menu.on, .di-and-menu.on { transform: none; opacity: 1; }
.di-ios-menu > div { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 8px !important; transition: background .2s; }
.di-cel .hl { background: rgba(255, 255, 255, .15); }
.di-folha {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; padding: 12px 12px 20px;
  border-radius: 16px 16px 0 0 !important; background: #2c2d35; transform: translateY(100%);
}
.di-folha.on { transform: none; }
.di-alca { width: 32px; height: 4px; margin: 0 auto 8px; border-radius: 999px !important; background: rgba(255, 255, 255, .25); }
.di-folha-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.di-linha { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 6px !important; transition: background .2s; }
.di-dialogo-ios { position: absolute; inset: 0; z-index: 10; padding: 32px 12px 0; background: #1c1c22; transform: translateY(100%); pointer-events: none; }
.di-dialogo-ios.on { transform: none; }
.di-dlg-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.di-dlg-cab .di-azul { padding: 0 4px; border-radius: 4px !important; transition: background .2s; }
.di-caixa { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px !important; background: rgba(255, 255, 255, .05); }
.di-dlg-app > div { flex: 1; }
.di-dlg-app b { display: block; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.di-dlg-app small { padding-top: 4px; }
.di-dlg-chave { justify-content: space-between; margin-top: 8px; }
.di-chave { width: 28px; height: 16px; padding: 2px; display: flex; justify-content: flex-end; border-radius: 999px !important; background: #34c759; }
.di-chave span { width: 12px; height: 12px; border-radius: 50% !important; background: #fff; }

/* Android */
.di-and-barra { position: absolute; left: 0; right: 0; top: 0; z-index: 5; height: 56px; display: flex; align-items: flex-end; gap: 6px; padding: 0 8px 8px; background: #202124; }
.di-android .di-mais { background: transparent; }
.di-android .di-mais.hl { background: rgba(255, 255, 255, .25); }
.di-and-pag { height: 100%; padding-top: 56px; }
.di-and-menu {
  position: absolute; top: 48px; right: 6px; z-index: 10; width: 144px; padding: 4px 0;
  border-radius: 8px !important; background: #2d2e31; box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
  transform-origin: top right; transform: scale(.75); opacity: 0; pointer-events: none;
}
.di-and-menu > div { display: flex; align-items: center; gap: 8px; padding: 6px 12px; transition: background .2s; }
.di-and-veu { position: absolute; inset: 0; z-index: 10; display: flex; align-items: flex-end; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; }
.di-and-veu.on { opacity: 1; }
.di-and-dlg { width: 100%; padding: 12px 12px 20px; border-radius: 16px 16px 0 0 !important; background: #2d2e31; transform: translateY(100%); transition: transform .5s; }
.di-and-veu.on .di-and-dlg { transform: none; }
.di-and-dlg > b { display: block; margin-bottom: 4px; }
.di-and-dlg .di-folha-cab { margin-bottom: 12px; }
.di-and-botoes { display: flex; justify-content: flex-end; align-items: center; gap: 12px; font-weight: 700; }
.di-and-botoes .di-azul { color: #8ab4f8; padding: 4px 8px; }
.di-instalar { padding: 4px 12px; border-radius: 999px !important; background: #8ab4f8; color: #202124; transition: transform .2s; }
.di-instalar.hl { background: #8ab4f8; transform: scale(.95); }

/* tela de início, com o ícone do Revira surgindo no fim da grade */
.di-inicio { position: absolute; inset: 0; z-index: 10; padding: 32px 12px 0; background: linear-gradient(#2b2f6b, #3b2a5e 50%, #151626); opacity: 0; pointer-events: none; }
.di-inicio.on { opacity: 1; }
.di-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; }
.di-app-ico { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.di-quadro { width: 100%; aspect-ratio: 1; border-radius: 22% !important; opacity: .85; }
.di-rotulo { width: 75%; height: 4px; border-radius: 3px !important; background: rgba(255, 255, 255, .3); }
.di-novo .di-quadro { opacity: 1; transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .5s; }
.di-novo.on .di-quadro { transform: scale(1); }
.di-rotulo-txt { font-size: 7px; line-height: 1; color: #fff; opacity: 0; transition: opacity .3s; }
.di-novo.on .di-rotulo-txt { opacity: 1; }
.di-novo[data-vis] { transition: none; }

/* o app aberto pelo ícone: tela cheia, sem barra do navegador */
.di-app {
  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: #FDFBE4; color: #1d3542; transform: scale(.5); opacity: 0; pointer-events: none;
}
.di-app.on { transform: none; opacity: 1; }
.di-app-nome { font: 500 14px/1 Georgia, serif; }
.di-app-nome b { font-weight: 800; }
.di-app-sub { font-size: 9px; color: rgba(29, 53, 66, .6); }

@media (prefers-reduced-motion: reduce) { .di-cel *, .di-cel [data-vis] { transition: none !important; } }

/* ---------- botão de som do topo (js/som.js) ---------- */
.topo-som {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 999px; padding: 0;
  background: rgba(255, 255, 255, .1); color: var(--topo-texto);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); transition: background .2s, opacity .2s;
}
.topo-som svg { width: 18px; height: 18px; }
.topo-som[aria-pressed="false"] { opacity: .6; }
@media (hover: hover) { .topo-som:hover { background: rgba(255, 255, 255, .2); } }
[data-tema="pixel"] .topo-som { box-shadow: inset 0 0 0 2px rgba(243, 248, 230, .5); }
/* mesmo botão na barra da partida e dos minijogos */
.btn-som { display: inline-grid; place-items: center; padding: 0; }
.btn-som svg { width: 20px; height: 20px; }
.btn-som[aria-pressed="false"] { opacity: .6; }