/* Página inicial: uma tela só, a ilha no fim de tarde e o Patrão (21/10/2026) */
:root { --laranja: #E8590C; --laranja2: #F7883A; --tinta: #FFF7EE; --escuro: #3a1505; --vidro: rgba(40, 14, 4, .38); }
@font-face { font-family: "Luckiest Guy"; src: url(fontes/luckiest-guy.ttf) format("truetype"); font-display: swap; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinta); background: #2c5a63;
  overscroll-behavior: none; }
a { color: var(--tinta); }

.cena { position: fixed; inset: -40px; background: url(img/ilha_larga.webp) center 60% / cover no-repeat;
  transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.cena::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 38%, transparent 35%, rgba(60,18,4,.55) 100%),
              linear-gradient(180deg, transparent 55%, rgba(40,12,3,.55)); }

.marca { position: fixed; top: 18px; left: 22px; display: flex; gap: 14px; align-items: center; z-index: 3; }
.nome { font-weight: 900; letter-spacing: 3px; font-size: 14px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.placa { padding: 4px 10px; background: var(--tinta); color: #6E2A0A; font-weight: 900; font-size: 12px;
  letter-spacing: 1.5px; transform: rotate(-2deg); box-shadow: 2px 3px 0 rgba(60,18,4,.8); }

.patrao { position: fixed; left: 50%; bottom: 36vh; transform: translateX(-50%); width: min(54vh, 78vw);
  display: flex; flex-direction: column; align-items: center; z-index: 2; user-select: none; }
#rosto { width: 100%; height: auto; cursor: pointer;
  filter: drop-shadow(0 14px 18px rgba(60,18,4,.55)) drop-shadow(0 0 1.5px rgba(40,12,3,.9));
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
.patrao.treme #rosto { animation: treme .3s; }
@keyframes treme { 25% { transform: rotate(-1.5deg); } 75% { transform: rotate(1.5deg); } }

.balao { position: absolute; bottom: 99%; z-index: 4; max-width: min(340px, 80vw); padding: 12px 16px; border-radius: 20px;
  background: #fff; color: #2a1206; font-weight: 800; font-size: 17px; line-height: 1.3; text-align: center;
  box-shadow: 0 4px 0 var(--escuro), 0 0 0 3px var(--escuro); transition: opacity .25s, transform .25s; white-space: normal; }
.balao::after { content: ""; position: absolute; left: 50%; bottom: -15px; margin-left: -11px; border: 11px solid transparent;
  border-top: 15px solid #fff; filter: drop-shadow(0 3px 0 var(--escuro)); }
.balao.some { opacity: 0; transform: scale(.9) translateY(6px); pointer-events: none; }
.balao.fala { animation: pula .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes pula { from { transform: scale(.6); } to { transform: scale(1); } }

.base { position: fixed; left: 0; right: 0; bottom: 34px; display: flex; flex-direction: column; align-items: center;
  gap: 10px; z-index: 3; padding: 0 16px; }
.misterio { margin: 0 0 4px; text-align: center; font-family: "Luckiest Guy", Impact, sans-serif; font-weight: 400;
  font-size: clamp(24px, 3.6vw, 38px); line-height: 1.05; letter-spacing: 1px; color: var(--tinta);
  text-shadow: 0 3px 0 #6E2A0A, 0 0 18px rgba(60,18,4,.55); -webkit-text-stroke: 1px #6E2A0A; }
.misterio em { font-style: normal; color: #FFB27A; }
.misterio span { display: block; margin-top: 8px; font-family: system-ui, sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: .3px; -webkit-text-stroke: 0; text-shadow: 0 1px 6px rgba(0,0,0,.6); }

.email { display: flex; width: min(420px, 92vw); background: var(--vidro); border: 1.5px solid rgba(255,247,238,.55);
  border-radius: 999px; padding: 4px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.email input { flex: 1; min-width: 0; font: inherit; color: var(--tinta); background: transparent; border: 0; padding: 10px 16px; }
.email input::placeholder { color: rgba(255,247,238,.7); }
.email input:focus { outline: none; }
.email button { font: inherit; font-size: 20px; font-weight: 900; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--laranja); color: var(--tinta); cursor: pointer; box-shadow: 0 3px 0 var(--escuro); }
.email button:disabled { opacity: .6; cursor: wait; }
.armadilha { position: absolute !important; left: -9999px; width: 1px; height: 1px; }
.aceite { display: flex; gap: 8px; align-items: center; font-size: 13px; opacity: .9; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.aceite input { width: 16px; height: 16px; accent-color: var(--laranja); }
.resposta { margin: 0; min-height: 1.2em; font-size: 14px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.6); }

.redes { display: flex; gap: 14px; margin-top: 4px; }
.redes a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vidro);
  border: 1.5px solid rgba(255,247,238,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .15s, background .15s; }
.redes a:hover, .redes a:focus-visible { transform: translateY(-3px) scale(1.08); background: var(--laranja); }
.redes svg { width: 21px; height: 21px; fill: var(--tinta); }

.rodape { position: fixed; bottom: 8px; left: 0; right: 0; text-align: center; font-size: 11px; opacity: .65; z-index: 3; }

@media (max-aspect-ratio: 4/5) {
  .cena { background-image: url(img/ilha_alta.webp); background-position: center 42%; }
  .marca { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* celular (21/10): o Patrão cabe entre o nome e a frase; o balão fica fixo embaixo do nome, sempre visível */
  .patrao { top: max(100px, 17dvh); bottom: auto; left: 0; right: 0; margin: 0 auto; transform: none;
    width: min(40dvh, 72vw); }
  /* balão colado no chapéu (21/10/2026) */
  .balao { bottom: 82%; width: max-content; max-width: 86vw; font-size: 15px; }
  .base { bottom: 28px; gap: 8px; }
  .misterio { font-size: clamp(22px, 6.4vw, 30px); }
  .misterio span { font-size: 13px; }
}
@media (max-aspect-ratio: 4/5) and (max-height: 700px) {
  .patrao { width: min(31dvh, 58vw); top: max(96px, 14dvh); }
  .misterio span br { display: none; }
}
@keyframes pula-cel { from { transform: translateX(-50%) scale(.6); } to { transform: translateX(-50%) scale(1); } }
@media (max-height: 560px) { .misterio, .aceite { display: none; } .patrao { bottom: 22vh; } }
@media (prefers-reduced-motion: reduce) { .cena { transition: none; } .balao.fala, .patrao.treme #rosto { animation: none; } }

/* celular com o teclado aberto: só o Patrão, o balão e o campo, na área visível acima do teclado (21/10/2026) */
body.digitando .marca, body.digitando .misterio, body.digitando .redes, body.digitando .rodape, body.digitando .resposta:empty { display: none; }
body.digitando .patrao { top: calc(var(--vt, 0px) + var(--vh, 100dvh) * .20); bottom: auto;
  width: min(calc(var(--vh, 100dvh) * .42), 62vw); }
body.digitando .base { top: calc(var(--vt, 0px) + var(--vh, 100dvh) - 112px); bottom: auto; gap: 6px; }
body.digitando .balao { font-size: 14px; padding: 9px 12px; }
body.digitando .cena::after { background: rgba(30,10,3,.35); }
body.digitando .aceite { display: flex !important; font-size: 12px; }
body.digitando .balao { bottom: 84%; }