/* ============================================================
   ôn.de — escuro, grade, painel de instrumento.
   referência de linguagem: ui8.ai/forge (fundo #141414, rótulos
   técnicos nos cantos, canvas que se dá zoom).
   a cor de destaque é o coral da marca, o mesmo do ô.
   ============================================================ */

:root{
  --fundo:    #141414;
  --fundo-2:  #1c1c1c;
  --fundo-3:  #252525;
  --borda:    #2b2b2b;
  --tinta:    #f0f0f0;
  --tinta-2:  #7a7a7a;
  --tinta-3:  #565656;

  --coral:    #FA8D85;
  --salvia:   #8DA599;

  --barra-h:  4.6rem;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: -apple-system, system-ui, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{
  margin:0; padding:0;
  height:100%;
  background:var(--fundo);
  overflow:hidden;
  overscroll-behavior:none;
}

body{
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.45;
  color:var(--tinta);
  -webkit-font-smoothing:antialiased;
}

button,input{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }

/* ---------------- o mapa ---------------- */

.tela{
  position:fixed; inset:0;
  width:100%; height:100%;
  touch-action:none;
  z-index:0;
}

/* ---------------- esqueleto ---------------- */

.app{
  position:relative; z-index:2;
  height:100dvh;
  display:flex; flex-direction:column;
  pointer-events:none;
}
.app button,.app input,.app label,.app a,.painel,.cena{ pointer-events:auto; }

.topo{
  display:flex; align-items:center; gap:.9rem;
  padding:calc(1.1rem + env(safe-area-inset-top)) 1.3rem .8rem;
}

.marca{
  font-family:var(--sans);
  font-size:1.15rem;
  /* o nome do projeto é ÔN.DE — tudo junto, sem espaço nenhum entre as letras */
  letter-spacing:0;
}
.marca i{ font-style:normal; color:var(--coral); }
.marca b{ font-weight:400; color:var(--coral); }

.selo{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.62rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--tinta-2);
  border:1px solid var(--borda);
  border-radius:999px;
  padding:.4rem .8rem;
  white-space:nowrap;
  transition:color .3s, border-color .3s;
}
.selo.perto{ color:var(--coral); border-color:rgba(250,141,133,.45); }

.som{
  font-family:var(--mono);
  font-size:.62rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--tinta-2);
  border:1px solid var(--borda);
  border-radius:999px;
  padding:.4rem .8rem;
  transition:color .25s, border-color .25s;
}
.som[data-mudo="1"]{ color:var(--tinta-3); }

/* ---------------- rótulos dos cantos ---------------- */

.cantos{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.canto{
  position:absolute;
  font-family:var(--mono);
  font-size:.58rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--tinta-3);
  white-space:nowrap;
}
.ce{ left:1.3rem;  top:calc(50% - 3.5rem); transform:rotate(-90deg); transform-origin:left center; }
.cd{ right:1.3rem; top:calc(50% - 3.5rem); transform:rotate(90deg);  transform-origin:right center; }
.be{ left:1.3rem;  bottom:calc(var(--barra-h) + 1.4rem + env(safe-area-inset-bottom)); }
.bd{ right:1.3rem; bottom:calc(var(--barra-h) + 1.4rem + env(safe-area-inset-bottom)); }

@media (max-width:420px){
  .ce,.cd{ display:none; }
}

/* com painel aberto, os rótulos de baixo saem da frente */
.canto{ transition:opacity .35s ease; }
a.canto{ pointer-events:auto; text-decoration:none; transition:color .3s, opacity .35s ease; }
a.canto:hover{ color:var(--coral); }
body.com-painel .be,
body.com-painel .bd{ opacity:0; }

/* ---------------- vistas ---------------- */

.miolo{ flex:1; position:relative; overflow:hidden; }

.vista{ display:none; height:100%; }
.vista.ativa{ display:block; }

.vista#vista-aqui{ display:none; }
.vista#vista-aqui.ativa{ display:flex; flex-direction:column; }

.cena{
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:1.2rem; text-align:center;
  padding:1.4rem;
  animation:sobe .55s cubic-bezier(.2,.8,.3,1) both;
}
/* o resultado ocupa a metade de baixo: em cima fica o mapa,
   com o seu quadrado aceso à vista */
.cena-baixo{
  flex:0 1 auto;
  margin-top:auto;
  max-height:68%;
  justify-content:flex-start;
  align-items:stretch;
  text-align:left;
  overflow-y:auto;
  padding:2.6rem 1.3rem 1rem;
  background:linear-gradient(to bottom, rgba(20,20,20,0), rgba(20,20,20,.9) 9%, var(--fundo) 22%);
}

@keyframes sobe{
  from{ opacity:0; transform:translateY(1.2rem); }
  to  { opacity:1; transform:none; }
}

/* ---------------- a pergunta ---------------- */

.pergunta{
  margin:0;
  font-size:3.6rem; line-height:1; letter-spacing:-.03em;
}
.pergunta i{ font-style:normal; color:var(--coral); }

.chamada{
  margin:0; max-width:22rem;
  color:var(--tinta-2); font-size:1rem; line-height:1.5;
}
.chamada-peq{
  margin:0 0 1rem;
  font-size:.88rem; line-height:1.55; color:var(--tinta-2);
}
.pe{ margin-top:1.4rem; }

.dica{
  margin:0;
  font-family:var(--mono);
  font-size:.6rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--tinta-3);
}

/* ---------------- as três palavras ---------------- */

.etiqueta{
  margin:0 0 .9rem;
  font-family:var(--mono);
  font-size:.62rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--tinta-2);
}
.etiqueta.espaco{ margin-top:2.2rem; }

.palavras{ display:flex; flex-direction:column; gap:0; margin-bottom:1.6rem; }
.palavra{
  font-size:2.9rem; line-height:1.06; letter-spacing:-.035em;
  animation:entra .6s cubic-bezier(.2,.9,.3,1) both;
}
.palavra:nth-child(1){ animation-delay:.06s; }
.palavra:nth-child(2){ animation-delay:.18s; }
.palavra:nth-child(3){ animation-delay:.30s; }
@keyframes entra{
  from{ opacity:0; transform:translateY(.7rem); filter:blur(6px); }
  to  { opacity:1; transform:none; filter:none; }
}
.palavras.pequenas .palavra{ font-size:2rem; }

.fora{
  margin:0 0 1.2rem; padding:.9rem 1.1rem;
  background:var(--fundo-2); border:1px solid var(--borda);
  border-radius:.9rem; font-size:.88rem; color:var(--tinta-2);
}

/* ---------------- dados ---------------- */

.dados{ margin:0 0 1.4rem; }
.dados div{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.7rem 0;
  border-bottom:1px solid var(--borda);
}
.dados dt{
  font-family:var(--mono);
  font-size:.58rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--tinta-3); flex:0 0 auto;
}
.dados dd{ margin:0; text-align:right; font-size:.95rem; font-family:var(--mono); }
.dados div:last-child{ border-bottom:0; }

/* ---------------- botões ---------------- */

.acoes{ display:flex; flex-direction:column; gap:.5rem; }

.acao{
  width:100%;
  padding:.95rem 1.3rem;
  border-radius:999px;
  background:var(--fundo-3);
  border:1px solid var(--borda);
  color:var(--tinta);
  font-family:var(--mono);
  font-size:.68rem; text-transform:uppercase; letter-spacing:.18em;
  transition:transform .2s, background .25s, border-color .25s;
}
.acao:active{ transform:scale(.975); }
.acao.forte{
  background:var(--coral); border-color:var(--coral); color:#141414;
}
.acao.leve{ background:transparent; border-color:transparent; color:var(--tinta-3); }

.cena .acao{ width:auto; min-width:16rem; }

/* ---------------- painéis (achar, casa, ajustes) ---------------- */

.vista:not(#vista-aqui) .painel{
  height:100%;
  overflow-y:auto;
  padding:1.2rem 1.3rem calc(var(--barra-h) + 2rem + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom, rgba(20,20,20,.86), rgba(20,20,20,.97) 12%);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  animation:sobe .5s cubic-bezier(.2,.8,.3,1) both;
}

/* ---------------- achar ---------------- */

.busca{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.2rem; }
.campo-busca{
  width:100%; padding:1rem 1.2rem;
  border:1px solid var(--borda); border-radius:1rem;
  background:var(--fundo-2);
  font-size:1.05rem; outline:none;
  transition:border-color .25s;
}
.campo-busca:focus{ border-color:var(--coral); }
.campo-busca::placeholder{ color:var(--tinta-3); }

.erro-busca{
  margin:0 0 1.2rem; padding:.9rem 1.1rem;
  background:var(--fundo-2);
  border:1px solid var(--borda); border-left:2px solid var(--coral);
  border-radius:.7rem; font-size:.88rem; color:var(--tinta-2);
}
.achado{ animation:sobe .45s ease both; }

/* ---------------- cartão ---------------- */

.cartao{
  background:var(--fundo-2);
  border:1px solid var(--borda);
  border-radius:1.4rem;
  padding:1.7rem 1.4rem;
  margin-bottom:1.2rem;
  text-align:center;
}
.cartao-titulo{
  margin:0 0 1.2rem;
  font-family:var(--mono);
  font-size:.6rem; text-transform:uppercase; letter-spacing:.18em;
  color:var(--tinta-2); line-height:1.9;
}
.cartao-palavras{ font-size:1.7rem; line-height:1.25; letter-spacing:-.02em; word-break:break-word; }
.cartao-codigo{ margin:.7rem 0 0; font-family:var(--mono); font-size:.72rem; color:var(--tinta-3); }
.cartao-contato{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.5rem; }
.cartao-rotulo{
  font-family:var(--mono);
  font-size:.58rem; text-transform:uppercase; letter-spacing:.18em; color:var(--tinta-3);
}
.cartao-input{
  width:100%; padding:.8rem 1.1rem;
  border:1px solid var(--borda); border-radius:999px;
  background:var(--fundo); text-align:center; font-size:.95rem; outline:none;
}
.cartao-pe{ margin:1.2rem 0 0; font-size:.78rem; color:var(--tinta-3); }

/* ---------------- alternadores ---------------- */

.alternador{
  display:flex; align-items:center; gap:.9rem;
  padding:.95rem 0; border-bottom:1px solid var(--borda);
  font-size:.9rem; color:var(--tinta-2); cursor:pointer;
}
.alternador input{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:2.9rem; height:1.65rem;
  border-radius:999px; background:var(--fundo-3);
  border:1px solid var(--borda);
  position:relative; transition:background .25s, border-color .25s;
}
.alternador input::after{
  content:''; position:absolute; top:.18rem; left:.18rem;
  width:1.15rem; height:1.15rem; border-radius:50%;
  background:var(--tinta-3);
  transition:transform .25s cubic-bezier(.3,1.4,.5,1), background .25s;
}
.alternador input:checked{ background:rgba(250,141,133,.2); border-color:var(--coral); }
.alternador input:checked::after{ transform:translateX(1.25rem); background:var(--coral); }

/* ---------------- barra ---------------- */

.barra{
  position:relative; z-index:3;
  display:flex; gap:.3rem; justify-content:center;
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--fundo) 68%,rgba(20,20,20,0));
  pointer-events:auto;
}
.aba{
  padding:.6rem 1rem;
  border-radius:999px;
  font-family:var(--mono);
  font-size:.64rem; text-transform:uppercase; letter-spacing:.16em;
  color:var(--tinta-3);
  border:1px solid transparent;
  transition:color .25s, border-color .25s, background .25s, transform .2s;
}
.aba:active{ transform:scale(.95); }
.aba.ativa{ color:var(--tinta); border-color:var(--borda); background:var(--fundo-2); }

/* ---------------- aviso ---------------- */

.aviso{
  position:fixed; z-index:40;
  left:50%; bottom:calc(var(--barra-h) + 1.2rem + env(safe-area-inset-bottom));
  transform:translate(-50%,1rem);
  padding:.7rem 1.2rem; border-radius:999px;
  background:var(--tinta); color:var(--fundo);
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s;
  max-width:calc(100vw - 3rem); text-align:center;
}
.aviso.mostra{ opacity:1; transform:translate(-50%,0); }

/* ---------------- tela grande ---------------- */

@media (min-width:900px){
  body{ font-size:18px; }
  .pergunta{ font-size:5rem; }
  .palavra{ font-size:3.4rem; }
  .cena-baixo,.vista:not(#vista-aqui) .painel{
    max-width:34rem; margin-left:2.4rem;
  }
  .cena-baixo{ align-self:flex-start; width:34rem; }
}

/* ---------------- impressão ---------------- */

@media print{
  .tela,.topo,.cantos,.barra,.acoes,.aviso,.chamada-peq,.etiqueta{ display:none !important; }
  .vista{ display:none !important; }
  #vista-casa{ display:block !important; }
  body{ background:#fff; color:#000; }
  .cartao{ border:1px solid #ccc; background:#fff; color:#000; }
  .vista:not(#vista-aqui) .painel{ background:none; backdrop-filter:none; }
}

/* ---------------- menos movimento ---------------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}