/* Instalar o jogo (instalar.js): o botao nas telas de entrada e o guia de cada aparelho. Cores proprias: vale na tela
   do codigo de acesso (sem o app.css) e no jogo. Os botoes zeram o estilo de "button" da tela do codigo de acesso. */
[data-instalar][hidden] { display: none !important; }
.inst {
  display: flex; align-items: stretch; margin: 12px 0; border: 1px solid rgba(240, 196, 106, .6); border-radius: 10px;
  background: linear-gradient(180deg, rgba(64, 46, 16, .94), rgba(32, 24, 12, .94));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45) inset, 0 8px 24px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 150, 40, .12);
  overflow: hidden; text-align: left; backdrop-filter: blur(3px);
}
.inst button { font: inherit; letter-spacing: 0; }
.inst .inst-b {
  flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; width: auto; margin: 0; padding: 10px 6px 10px 12px;
  border: 0; border-radius: 0; background: none; color: #f8dc96; text-align: left; cursor: pointer;
}
.inst .inst-b:hover { background: rgba(240, 196, 106, .1); }
.inst .inst-b:focus-visible, .inst .inst-x:focus-visible { outline: 2px solid #f0c46a; outline-offset: -3px; }
.inst-ic { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 9px; background: #d8a64a; color: #1d1606; stroke-width: 2.1; }
.inst-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.inst-t b { font: 700 15px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fbe3a6; }
.inst-t small { margin-top: 2px; font: 500 12.5px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #c9b48a; }
.inst .inst-x {
  flex: none; display: grid; place-items: center; width: 40px; margin: 0; padding: 0; border: 0; border-left: 1px solid rgba(240, 196, 106, .22);
  border-radius: 0; background: none; color: #a8946e; cursor: pointer;
}
.inst .inst-x:hover { background: rgba(255, 255, 255, .06); color: #f3e2bc; }
.inst-x .inst-svg { width: 16px; height: 16px; }
.inst-feito { align-items: center; gap: 12px; padding: 10px 12px; border-color: rgba(111, 192, 122, .6); background: linear-gradient(180deg, rgba(22, 52, 30, .94), rgba(14, 32, 20, .94)); }
.inst-feito .inst-ic { background: #6fc07a; color: #0c2412; }
.inst-feito .inst-t b { color: #c9f0cf; }

/* ---- guia (iPhone/iPad, menu do navegador, "use o Chrome/Edge") ---- */
.inst-bg {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(6, 5, 9, .74); backdrop-filter: blur(3px); animation: inst-in .16s ease-out;
}
.inst-dlg {
  position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 18px 18px 16px; border: 1px solid rgba(216, 166, 74, .55); border-radius: 14px; background: #15121b; color: #ece4d2;
  box-shadow: 0 24px 70px #000d, 0 0 0 1px #000 inset; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: left;
}
.inst-dlg button { width: auto; margin: 0; letter-spacing: 0; font: inherit; }
.inst-dlg .inst-fx {
  position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: #9a8f7c; cursor: pointer;
}
.inst-dlg .inst-fx:hover { background: rgba(255, 255, 255, .07); color: #ece4d2; }
.inst-fx .inst-svg { width: 18px; height: 18px; }
.inst-h { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.inst-h img { flex: none; width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 2px 10px #000a; }
.inst-h h2 { margin: 0; font: 700 18px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #f0c46a; letter-spacing: .01em; }
.inst-dlg .inst-intro { margin: 12px 0 4px; color: #c9bea9; font-size: 14px; }
.inst-passos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.inst-passos li {
  display: grid; grid-template-columns: 24px 60px 1fr; align-items: center; gap: 10px; padding: 9px 10px;
  border: 1px solid #2c2530; border-radius: 10px; background: #1c1824;
}
.inst-passos li.feito { border-color: rgba(111, 192, 122, .4); background: rgba(24, 44, 30, .55); }
.inst-n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #d8a64a; color: #1d1606;
  font: 800 13px/1 system-ui, sans-serif;
}
.inst-n .inst-svg { width: 15px; height: 15px; stroke-width: 3; }
.feito .inst-n { background: #6fc07a; color: #0c2412; }
.inst-pi { display: grid; place-items: center; width: 60px; height: 44px; border-radius: 11px; background: #f2f2f7; color: #0a84ff; }
.inst-pi .inst-svg { width: 26px; height: 26px; }
/* icones do Android e do PC: o cinza escuro dos menus do navegador */
.inst-menu, .inst-menu3, .inst-instalar, .inst-instalar-pc, .inst-navegador, .inst-favorito, .inst-menu-mac, .inst-dock { background: #2b2f3a; color: #e8eaf0; }
.inst-favorito { color: #f5c542; }
/* o botao do aparelho: "Adicionar" azul do iPhone, "Instalar" pilula do Android */
.inst-pill { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0a84ff; font: 700 11.5px/1 system-ui, -apple-system, sans-serif; letter-spacing: -.01em; }
.inst-confirmar.inst-android { background: #2b2f3a; }
.inst-android .inst-pill { padding: 6px 7px; border-radius: 99px; background: #a8c7fa; color: #062e6f; font-size: 11px; }
.inst-pt { display: flex; flex-direction: column; min-width: 0; color: #ece4d2; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.inst-pt small { margin-top: 2px; color: #a99f8b; font-size: 12.5px; line-height: 1.35; }
.inst-passos .inst-copiar, .inst-passos .inst-url { grid-column: 1 / -1; margin-top: 2px; }
.inst-dlg .inst-copiar {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 12px;
  border: 1px solid rgba(216, 166, 74, .45); border-radius: 8px; background: rgba(216, 166, 74, .08); color: #f0c46a; font-weight: 600; cursor: pointer;
}
.inst-dlg .inst-copiar:hover { background: rgba(216, 166, 74, .16); }
.inst-copiar .inst-svg { width: 18px; height: 18px; }
.inst-url { box-sizing: border-box; width: 100%; padding: 10px; border: 1px solid #4a3c33; border-radius: 8px; background: #0e0c12; color: #ece4d2; font: 600 14px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 0; text-transform: none; text-align: left; }
.inst-dlg .inst-nota { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid #d8a64a; border-radius: 4px; background: rgba(216, 166, 74, .07); color: #d6ccb8; font-size: 13px; }
.inst-dlg .inst-ok {
  display: block; width: 100%; margin-top: 14px; padding: 11px; border: 0; border-radius: 8px; background: #d8a64a; color: #1d1606;
  font-weight: 700; cursor: pointer;
}
.inst-dlg .inst-ok:hover { background: #f0c46a; }
@keyframes inst-in { from { opacity: 0; } to { opacity: 1; } }
/* celular: o guia sobe de baixo, como as folhas do iPhone e do Android */
@media (max-width: 520px) {
  .inst-bg { align-items: flex-end; padding: 0; }
  .inst-dlg {
    width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 16px 16px 0 0; border-bottom: 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); animation: inst-sobe .2s ease-out;
  }
  @keyframes inst-sobe { from { transform: translateY(24px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .inst-bg, .inst-dlg { animation: none; } }