/* Vento Sul — paleta igual ao app nativo Android */
:root {
  --bg: var(--tg-theme-bg-color, #0d1f2d);
  --text: var(--tg-theme-text-color, #ffffff);
  --primary: var(--tg-theme-button-color, #2e7d32);
  --primary-text: var(--tg-theme-button-text-color, #ffffff);
  --hint: var(--tg-theme-hint-color, #c5d0d8);
  --section: var(--tg-theme-section-bg-color, rgba(20,40,58,0.85));
  --separator: var(--tg-theme-section-separator-color, #1f3148);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  padding-bottom: 60px;
  /* fundo padrão = Aurora (tela inicial da Litorânea/chat).
     Gradient escuro bem leve só pra texto não sumir. */
  background:
    linear-gradient(rgba(13,31,45,0.30), rgba(13,31,45,0.60)),
    url('bg/bg_aurora.webp') center/cover no-repeat fixed,
    var(--bg);
  /* sombra automática nos textos pra ficarem legíveis sobre qualquer fundo */
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}

/* Trocas de fundo por tela */
body.tela-city {
  background:
    linear-gradient(rgba(13,31,45,0.30), rgba(13,31,45,0.65)),
    url('bg/bg_florianopolis.webp') center/cover no-repeat fixed,
    var(--bg);
}
body.tela-praia {
  background:
    linear-gradient(rgba(13,31,45,0.25), rgba(13,31,45,0.60)),
    url('bg/bg_praia_crystal.webp') center/cover no-repeat fixed,
    var(--bg);
}
body.tela-litoranea {
  background:
    linear-gradient(rgba(13,31,45,0.35), rgba(13,31,45,0.70)),
    url('bg/bg_aurora.webp') center/cover no-repeat fixed,
    var(--bg);
}

/* Cabeçalho — 3 colunas: ícones esquerda · logo CENTRO · ícones direita */
#header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 8px 10px;
  gap: 6px;
  background: rgba(10,20,30,0.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.logo { display: none; }   /* logo agora vai pro corpo da Landing, não no header */

/* Botão central do header — bandeira do idioma */
.hbtn.hbtn-lang-center {
  justify-self: center;          /* grid centering (margin auto não funciona em grid item) */
  font-size: 18px;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.28);
}

/* Título "Vento Sul / Descubra o Brasil" no corpo da Landing */
.landing-titulo {
  text-align: center;
  margin: 14px auto 6px;
  max-width: 340px;
}
.landing-titulo h1 {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 3px;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65);
  color: #fff;
}
.landing-titulo .subtitle {
  font-size: 13px;
  margin: 4px 0 0;
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
}

/* Lados do cabeçalho — esquerda e direita */
.header-side {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-shrink: 0;
}
.header-left  { justify-content: flex-start; }
.header-right { justify-content: flex-end; }

/* Compat: estilo antigo (caso versão em cache do HTML pegue) */
.header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}
.hbtn {
  background: rgba(255,255,255,0.14);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  flex-shrink: 0;
}
@media (min-width: 560px) {
  .hbtn { width: 36px; height: 36px; font-size: 14px; }
  .logo { font-size: 16px; letter-spacing: 3px; }
}
.hbtn:hover { background: rgba(255,255,255,0.22); }
.hbtn:active { transform: scale(0.95); }
.hbtn-nav { font-size: 18px; font-weight: 900; }

/* Tema CLARO — invertes as cores */
body.tema-claro {
  --bg: #f4f7fa;
  --text: #1a2530;
  --hint: #4a5560;
  --section: rgba(255,255,255,0.78);
  --separator: #d8dde2;
  text-shadow: none;
  background:
    linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.78)),
    url('bg/bg_aurora.webp') center/cover no-repeat fixed,
    var(--bg);
}
body.tema-claro.tela-city {
  background:
    linear-gradient(rgba(255,255,255,0.50), rgba(255,255,255,0.75)),
    url('bg/bg_florianopolis.webp') center/cover no-repeat fixed,
    var(--bg);
}
body.tema-claro.tela-praia {
  background:
    linear-gradient(rgba(255,255,255,0.50), rgba(255,255,255,0.75)),
    url('bg/bg_praia_crystal.webp') center/cover no-repeat fixed,
    var(--bg);
}
body.tema-claro.tela-litoranea {
  background:
    linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.80)),
    url('bg/bg_aurora.webp') center/cover no-repeat fixed,
    var(--bg);
}
body.tema-claro #header   { background: rgba(255,255,255,0.55); }
body.tema-claro #bottom-bar { background: rgba(255,255,255,0.55); border-top-color: rgba(0,0,0,0.08); }
body.tema-claro #bottom-bar button { color: rgba(0,0,0,0.65); text-shadow: none; }
body.tema-claro .hbtn      { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.10); color: var(--text); text-shadow: none; }
body.tema-claro .card-info,
body.tema-claro .action-btn { background: rgba(255,255,255,0.65); border-color: rgba(0,0,0,0.08); color: var(--text); }
body.tema-claro .dropdown-block select { background: rgba(255,255,255,0.65); color: var(--text); border-color: rgba(0,0,0,0.10); }
body.tema-claro .logo { text-shadow: none; }

/* (Aumento de fonte agora é via CSS zoom no #app — em app.js) */

.logo {
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 16px;
  color: var(--primary);
}

.lang {
  font-size: 22px;
  cursor: pointer;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.screen { display: none; padding: 12px; }
.screen.active { display: block; }

h2 { font-size: 22px; font-weight: 900; margin: 12px 0; }
h3 { font-size: 14px; font-weight: 700; margin: 16px 0 8px; }
.subtitle { color: var(--hint); font-size: 12px; margin-bottom: 12px; }

/* Carrossel */
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 8px;
  border-radius: 12px;
  margin: 8px 0;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  border-radius: 12px;
  height: 180px;
  background: var(--section);
  background-size: cover;
  background-position: center;
  position: relative;
}
.carousel-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  padding: 8px 12px;
  border-radius: 0 0 12px 12px;
}
.carousel-caption strong { display: block; font-size: 14px; }
.carousel-caption small { font-size: 11px; opacity: 0.8; }

/* Dropdowns */
.dropdown-block { margin: 12px 0; }
.dropdown-block label {
  display: block;
  font-size: 12px;
  color: var(--hint);
  margin-bottom: 4px;
}
.dropdown-block select {
  width: 100%;
  padding: 12px;
  background: rgba(20,40,58,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  font-size: 14px;
}

/* Botões — vidro fosco verde, mesma intensidade do azul "Instalar app" */
.btn-primary {
  width: 100%;
  padding: 14px;
  background: rgba(46,125,50,0.40);
  color: var(--primary-text);
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  margin: 10px 0;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
  transition: transform 0.1s, background 0.15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.btn-primary:hover { background: rgba(46,125,50,0.58); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
/* Variante azul translúcida (Instalar app, GPS, Mic, Cadastrar) */
#btn-install,
#btn-gps-praia,
#btn-gps-perto,
#btn-mic,
#btn-merch-cadastrar {
  background: rgba(25,118,210,0.45);
}
#btn-install:hover,
#btn-gps-praia:hover,
#btn-gps-perto:hover,
#btn-mic:hover,
#btn-merch-cadastrar:hover {
  background: rgba(25,118,210,0.65);
}

/* Action grid (CityHome) */
.action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.action-btn {
  background: rgba(20,40,58,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 14px 6px;
  font-size: 11px;
  cursor: pointer;
  line-height: 1.3;
}

/* Card info */
.card-info {
  background: rgba(20,40,58,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px;
  border-radius: 10px;
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,0.10);
}
.card-info h3 { margin-top: 0; color: var(--primary); }
.card-info p { color: var(--hint); font-size: 12px; line-height: 1.5; }

/* Grid barracas */
.grid-barracas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.barraca-card {
  background: var(--section);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.barraca-card .telhado {
  height: 100px;
  background: #444 center/cover;
  position: relative;
}
.barraca-card .telhado.placeholder::after {
  content: "🏪";
  font-size: 40px;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.barraca-card .info { padding: 8px; }
.barraca-card .nome { font-weight: 700; font-size: 13px; }
.barraca-card .cat { color: var(--hint); font-size: 11px; }
.barraca-card .livre {
  position: absolute;
  top: 6px; right: 6px;
  background: #ffa000;
  color: #000;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
}

/* Banner barraca detalhe */
.banner {
  height: 200px;
  background: var(--section) center/cover;
  border-radius: 12px;
  margin: 0 0 14px;
}
.content { padding: 0 4px; }

/* Lista produtos */
.produto {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: var(--section);
  border-radius: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.produto img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  background: #333;
}
.produto .info { flex: 1; }
.produto .info strong { display: block; font-size: 13px; }
.produto .info small { color: var(--hint); font-size: 11px; }
.produto .preco {
  font-weight: 700;
  color: #4caf50;
  font-size: 13px;
}

/* Lista votados / promos */
.list-card {
  display: flex;
  gap: 10px;
  background: var(--section);
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  align-items: center;
}
.list-card .emoji { font-size: 28px; }
.list-card .info { flex: 1; }
.list-card .info strong { font-size: 13px; }
.list-card .info small { color: var(--hint); font-size: 11px; display: block; }
.list-card .votos {
  color: #ffb300;
  font-weight: 800;
  font-size: 12px;
}

/* Bottom bar — estilo nativo: 5 ícones, Litorânea no centro maior */
#bottom-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(10,20,30,0.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 10;
}
#bottom-bar button {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  /* font-size do botão = base do label, escalado por --fonte-base */
  font-size: clamp(10px, calc(var(--fonte-base, 14px) - 2px), 16px);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  padding: 6px 2px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1 1 0;
  min-width: 0;     /* deixa flex shrink corretamente */
  max-width: 100px;
  overflow: hidden;
}
/* Ícones em em — escalam junto com o font-size do botão (e portanto com zoom do app) */
#bottom-bar .bb-ico {
  font-size: 2.6em;     /* ~36px com fonte 14 (era 2em / 28px) */
  line-height: 1;
}
#bottom-bar .bb-ico-big {
  font-size: 4em;       /* Litorânea central ~56px (era 3em / 42px) */
  line-height: 1;
}
#bottom-bar .bb-lbl {
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#bottom-bar .bb-center { color: var(--primary); font-weight: 700; }
#bottom-bar .bb-center .bb-lbl { color: var(--primary); }
#bottom-bar button.active { color: #4caf50; font-weight: 700; }
#bottom-bar button.active .bb-lbl { color: #4caf50; }

/* Action grid — cards coloridos como o nativo */
.action-btn {
  background: rgba(20,40,58,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 18px 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}
.action-btn:active { transform: scale(0.96); }
.action-btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.action-btn[data-acao="feira"]        { border-left: 4px solid #ff6f00; }
.action-btn[data-acao="mais_votados"] { border-left: 4px solid #fdd835; }
.action-btn[data-acao="promocoes"]    { border-left: 4px solid #e91e63; }
.action-btn[data-acao="praias"]       { border-left: 4px solid #03a9f4; }
.action-btn[data-acao="caca"]         { border-left: 4px solid #8bc34a; }
.action-btn[data-acao="coletiva"]     { border-left: 4px solid #9c27b0; }
.action-btn[data-acao="wallet"]       { border-left: 4px solid #4caf50; }
.action-btn[data-acao="trilhas"]      { border-left: 4px solid #795548; }

/* Loader */
.loading { text-align: center; padding: 40px; color: var(--hint); }

/* Carrossel primário dos parceiros — estilo destaque com glow dourado */
.carousel-primary-wrap {
  margin: 8px 0 12px;
  padding: 12px;
  background: rgba(255,213,79,0.08);
  border: 1px solid rgba(255,213,79,0.30);
  border-radius: 14px;
}
.carousel-primary-wrap h3 {
  font-size: 13px; font-weight: 700;
  color: #ffd54f;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.carousel-primary-wrap .carousel-item {
  height: 220px !important;     /* maior que o carrossel secundário */
  box-shadow: 0 6px 18px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,213,79,0.30);
}
.carousel-primary-wrap .carousel-caption {
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  padding: 10px 14px;
}
.carousel-primary-wrap .carousel-caption strong {
  font-size: 16px;
  color: #ffd54f;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}

/* Notificações — toggles de categoria */
.notif-cat {
  display: flex; align-items: center; gap: 12px;
  background: rgba(20,40,58,0.50);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
}
.notif-cat .nc-ico { font-size: 24px; line-height: 1; }
.notif-cat .nc-text { flex: 1; }
.notif-cat .nc-text strong { display: block; font-size: 14px; }
.notif-cat .nc-text small { font-size: 11px; color: var(--hint); }
.notif-toggle {
  width: 44px; height: 24px;
  background: rgba(255,255,255,0.18);
  border-radius: 12px;
  position: relative; flex-shrink: 0;
  transition: background 0.2s;
}
.notif-toggle::after {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: left 0.2s;
}
.notif-cat.ativa .notif-toggle { background: rgba(76,175,80,0.7); }
.notif-cat.ativa .notif-toggle::after { left: 23px; }

/* Modal genérico (transferir, etc) */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  backdrop-filter: blur(6px);
}
.modal {
  background: rgba(20,40,58,0.95);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 14px;
  padding: 18px;
  width: 100%;
  max-width: 380px;
}
.modal h3 { margin: 0 0 12px; }
.modal label { display: block; font-size: 12px; color: var(--hint); margin: 8px 0 4px; }
.modal input {
  width: 100%; padding: 10px; box-sizing: border-box;
  background: rgba(255,255,255,0.08); color: var(--text);
  border: 1px solid rgba(255,255,255,0.20); border-radius: 8px;
  font-size: 14px;
}

/* Leaflet ajustes pra ficar com o tema escuro */
#leaflet-mapa .leaflet-container { background: #14283a; }
#leaflet-mapa .leaflet-tile { filter: brightness(0.85) contrast(1.05); }

/* ⭐ Botão estrela de favorito */
.fav-star {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: #ffd54f;
  font-size: 22px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  transition: transform 0.1s, background 0.15s;
}
.fav-star:hover { background: rgba(255,255,255,0.20); }
.fav-star:active { transform: scale(0.92); }
.fav-star.ativo {
  background: rgba(255,213,79,0.30);
  border-color: rgba(255,213,79,0.70);
}
.city-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
}
.cidade-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.cidade-row select { height: 44px; }

/* Card de favorito na lista */
.fav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20,40,58,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px;
  margin: 6px 0;
  cursor: pointer;
}
.fav-item:hover { background: rgba(20,40,58,0.65); }
.fav-item .fav-thumb {
  width: 50px; height: 50px;
  border-radius: 8px;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.fav-item .fav-text { flex: 1; min-width: 0; }
.fav-item .fav-text strong { display: block; font-size: 14px; }
.fav-item .fav-text small { font-size: 11px; color: var(--hint); }
.fav-item .fav-rm {
  background: none; border: none; color: rgba(229,57,53,0.80);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
}

/* ─────────────────────────────────────────────────────────────
 * PRAIAS HUB — destaque grande + categorias de comércio
 * ───────────────────────────────────────────────────────────── */
.praias-destaque {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.praias-destaque::-webkit-scrollbar { height: 4px; }
.praia-card-grande {
  flex: 0 0 78%;
  scroll-snap-align: start;
  background: rgba(20,40,58,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 14px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover !important;
  background-position: center !important;
  position: relative;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.praia-card-grande::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(transparent 30%, rgba(0,0,0,0.78));
  border-radius: 14px;
  pointer-events: none;
}
.praia-card-grande > * { position: relative; z-index: 1; }
.praia-card-grande strong { font-size: 16px; }
.praia-card-grande small { color: rgba(255,255,255,0.85); font-size: 12px; }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 8px 0 4px;
}
@media (max-width: 480px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}
.cat-btn {
  background: rgba(20,40,58,0.50);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text);
  padding: 14px 4px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transition: transform 0.1s, background 0.15s;
}
.cat-btn:hover { background: rgba(20,40,58,0.70); transform: translateY(-2px); }
.cat-btn[data-cat="comida"]   { border-bottom: 4px solid #ff6f00; }
.cat-btn[data-cat="estadia"]  { border-bottom: 4px solid #1976d2; }
.cat-btn[data-cat="mercado"]  { border-bottom: 4px solid #4caf50; }
.cat-btn[data-cat="lanche"]   { border-bottom: 4px solid #fdd835; }
.cat-btn[data-cat="farmacia"] { border-bottom: 4px solid #e91e63; }
.cat-btn.ativa {
  background: rgba(46,125,50,0.45);
  border-color: rgba(46,125,50,0.85);
}

/* Canvas de malha de pontos+linhas — só aparece na Litorânea */
#lit-malha {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: none;
  opacity: 0.85;
  mix-blend-mode: screen;
}
body.tela-litoranea #lit-malha { display: block; }
/* Conteúdo do app fica acima do canvas */
#app { position: relative; z-index: 2; }

/* ─────────────────────────────────────────────────────────────
 * LITORÂNEA — chat estilo bolha
 * ───────────────────────────────────────────────────────────── */
.lit-hero, .aurora-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.lit-avatar {
  font-size: 56px;
  line-height: 1;
  background: rgba(3,169,244,0.20);
  border: 2px solid rgba(3,169,244,0.40);
  border-radius: 50%;
  width: 72px; height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-shadow: 0 0 18px rgba(3,169,244,0.6);
}
.aurora-avatar {
  font-size: 50px;
  background: rgba(186,104,200,0.20);
  border: 2px solid rgba(186,104,200,0.40);
  border-radius: 50%;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  text-shadow: 0 0 18px rgba(186,104,200,0.7);
}
.lit-titulo h2, .aurora-titulo h2 { margin: 0 0 2px 0; }
.lit-titulo .subtitle, .aurora-titulo .subtitle { margin: 0; }
.cerebro-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.cerebro-badge.llama {
  background: rgba(76,175,80,0.30);
  border-color: rgba(76,175,80,0.60);
  color: #c8f0cc;
}
.cerebro-badge.falando {
  animation: pulse-fala 1.2s ease-in-out infinite;
}
@keyframes pulse-fala {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(76,175,80,0); }
}

.chat-area {
  background: rgba(20,40,58,0.40);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 12px;
  min-height: 200px;
  max-height: 45vh;
  overflow-y: auto;
  margin: 12px 0 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  z-index: 3;     /* acima da malha animada */
}
/* Esconde área de resposta legada (compat com app.js antigo) */
#resposta-litoranea { display: none !important; }
/* Litorânea hero: avatar + título compactos no PC */
.lit-hero, .aurora-hero { margin-bottom: 10px; }
.chat-msg {
  display: flex;
  margin: 8px 0;
}
.chat-msg.user { justify-content: flex-end; }
.chat-msg .balao {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  line-height: 1.4;
  font-size: 13px;
  text-shadow: none;
}
.chat-msg.lit .balao {
  background: rgba(3,169,244,0.25);
  border: 1px solid rgba(3,169,244,0.45);
  color: #e1f5fe;
  border-top-left-radius: 4px;
}
.chat-msg.user .balao {
  background: rgba(76,175,80,0.30);
  border: 1px solid rgba(76,175,80,0.50);
  color: #f1f8e9;
  border-top-right-radius: 4px;
}
.chat-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.chip {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { background: rgba(255,255,255,0.18); }
.chat-input {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.chat-input input {
  flex: 1;
  padding: 12px 14px;
  background: rgba(20,40,58,0.55);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 22px;
  font-size: 14px;
}
.chat-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-btn-send {
  background: rgba(46,125,50,0.55);
  border-color: rgba(46,125,50,0.75);
}

/* ─────────────────────────────────────────────────────────────
 * AURORA — aventura RPG (mapa + classes + stats)
 * ───────────────────────────────────────────────────────────── */
.aurora-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
}
.aurora-tab {
  flex: 1;
  background: rgba(20,40,58,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text);
  padding: 10px 6px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.aurora-tab.active {
  background: rgba(186,104,200,0.30);
  border-color: rgba(186,104,200,0.65);
  font-weight: 700;
}

.aurora-mapa {
  position: relative;
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.aurora-mapa-fundo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transition: background 0.4s ease;
}
.aurora-mapa[data-era="passado"] .aurora-mapa-fundo {
  background:
    linear-gradient(135deg, rgba(80,50,20,0.35), rgba(120,80,40,0.15)),
    url('bg/bg_cafe_praia.webp') center/cover no-repeat;
}
.aurora-mapa[data-era="presente"] .aurora-mapa-fundo {
  background:
    linear-gradient(135deg, rgba(20,80,40,0.30), rgba(40,140,80,0.15)),
    url('bg/bg_florianopolis.webp') center/cover no-repeat;
}
.aurora-mapa[data-era="futuro"] .aurora-mapa-fundo {
  background:
    linear-gradient(135deg, rgba(180,40,180,0.40), rgba(40,180,255,0.30)),
    url('bg/bg_aurora.webp') center/cover no-repeat;
}
.aurora-mapa-titulo {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.aurora-classes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.aurora-classe {
  background: rgba(20,40,58,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  padding: 12px 4px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.3;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  transition: transform 0.1s, background 0.15s;
}
.aurora-classe:hover { background: rgba(186,104,200,0.20); }
.aurora-classe.selecionada {
  background: rgba(186,104,200,0.40);
  border-color: rgba(186,104,200,0.85);
  transform: scale(1.04);
}

.aurora-stats {
  background: rgba(20,40,58,0.45);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px;
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.aurora-stats .stat {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
}
.aurora-stats .stat > span:first-child { width: 70px; }
.aurora-stats .stat .pct { width: 36px; text-align: right; font-weight: 700; }
.aurora-stats .bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
}
.aurora-stats .bar .fill {
  height: 100%;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────────────────────
 * DESKTOP (≥ 768px) — mantém o layout compacto do celular,
 * só desenha o app como uma "janela de celular" centralizada.
 * Largura máx 460px. Botões/fonte continuam tamanho mobile.
 * ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  body {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: 0;
    min-height: 100vh;
  }
  #app {
    max-width: 460px;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0,0,0,0.45);
    background: rgba(13,31,45,0.18);
    border-left: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
  }
  #main { flex: 1; }
  #bottom-bar {
    position: sticky;
    bottom: 0;
    left: auto;
    right: auto;
  }

  /* (botões translúcidos já são globais; só preciso do centering aqui) */
}

/* Landing — TODOS os elementos da coluna alinhados na MESMA largura,
   centralizados. Aplica em qualquer tamanho de tela ≥ 480px (PWA
   instalada usa janela menor que 768, então não dá pra restringir
   só ao desktop). No mobile estreito (<480px) ocupa full-width. */
/* Landing — coluna centralizada com TUDO no MESMO tamanho.
   Aplica em qualquer largura: flex column no #screen-landing,
   align-items center, e cada filho com max-width 340px. */
#screen-landing.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#screen-landing > * {
  width: 100%;
  max-width: 340px;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}
#screen-landing > #install-block { padding: 0; }
#screen-landing > #install-block > .btn-primary {
  width: 100%;
  box-sizing: border-box;
}
#screen-landing .carousel { max-width: 100%; }   /* carrossel full no mobile */
@media (min-width: 480px) {
  #screen-landing .carousel { max-width: 340px; }
}