/* CASA CASINHA — EXPLORAR
   Ambientes montados. Cada um é uma composição de verdade, com os
   objetos nos lugares onde foram postos — não é card de catálogo. */

.abertura{ padding-top:var(--cc-s4); }
.abertura .titulo{ margin-top:var(--cc-s1); }
.abertura .regua{ margin-top:var(--cc-s4); }

/* ------------------------------------------------------- a composição
   Caixa de 100 x 133 unidades. Tudo dentro dela é posicionado em % —
   os mesmos números que o banco vai guardar em collage_items. */

.composicao{
  display:block;          /* alguns são <span> dentro de <a>: precisam de caixa */
  position:relative;
  width:100%;
  aspect-ratio:100 / 133;
  overflow:hidden;   /* objeto que sai pela beirada é cortado pela página */
}
.composicao__achatada{ width:100%; height:100%; object-fit:contain; }

/* área marcada à mão sobre colagem achatada: invisível até o toque */
.composicao__ponto{
  position:absolute; padding:0; border:0;
  background:transparent;
  transition:background .16s var(--cc-ease), outline-color .16s var(--cc-ease);
  outline:2px dashed transparent;
}
.composicao__ponto:hover,
.composicao__ponto:focus-visible{
  background:rgba(40,120,216,.14);
  outline-color:var(--cc-blue);
}

.composicao__peca{
  position:absolute;
  display:block;
  padding:0;
  transform-origin:50% 50%;
}
.composicao__peca .desenho{ width:100%; height:100%; }

/* na versão grande as peças respondem ao toque */
.composicao--grande .composicao__achatada{ width:100%; height:100%; object-fit:contain; }

/* área marcada à mão sobre colagem achatada: invisível até o toque */
.composicao__ponto{
  position:absolute; padding:0; border:0;
  background:transparent;
  transition:background .16s var(--cc-ease), outline-color .16s var(--cc-ease);
  outline:2px dashed transparent;
}
.composicao__ponto:hover,
.composicao__ponto:focus-visible{
  background:rgba(40,120,216,.14);
  outline-color:var(--cc-blue);
}

.composicao__peca{ transition:transform .16s var(--cc-ease); }
.composicao--grande .composicao__peca:hover,
.composicao--grande .composicao__peca:focus-visible{ transform:var(--giro) scale(1.04); }

/* ---------------------------------------------------------- universos */

.universos{ padding-top:var(--cc-s5); }

.universo{
  display:block;
  width:100%;
  text-align:left;
  text-decoration:none;
  color:var(--cc-ink);
  margin-bottom:var(--cc-s6);
}
.universo__quadro{
  position:relative;
  width:var(--larg, 86%);
  margin-left:var(--desl, 0);
  transition:transform .2s var(--cc-ease);
}
.universo:hover .universo__quadro,
.universo:focus-visible .universo__quadro{ transform:rotate(-1deg); }

.universo__legenda{
  display:block;
  margin-top:var(--cc-s3);
  padding-top:var(--cc-s2);
  border-top:2px solid var(--cc-ink);
}
.universo__num{ display:block; }
.universo__nome{
  display:block;
  font-family:var(--cc-font-display); font-weight:700;
  font-size:var(--cc-step-2); line-height:1.12;
  margin-top:2px;
}
.universo__sub{
  display:block;
  font-family:var(--cc-font-mono); font-size:var(--cc-step-1);
  color:var(--cc-ink-60);
  margin-top:6px;
}
.universo__ver{ display:inline-flex; flex-direction:column; margin-top:var(--cc-s2); color:var(--cc-blue); }
.universo__ver .gesto--sublinhado{ height:6px; }

/* ----------------------------------------------------------- ambiente */

.ambiente{ padding-top:var(--cc-s3); }
.voltar{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px;
  font-family:var(--cc-font-mono); font-size:var(--cc-step-1);
  color:var(--cc-ink);
  margin-bottom:var(--cc-s3);
}
.voltar .gesto--seta{ transform:rotate(180deg); }

.ambiente .titulo{ margin-top:var(--cc-s1); }
.ambiente .composicao{ margin-top:var(--cc-s5); }
#ambiente-legenda{ margin-top:var(--cc-s3); }

.ambiente__acoes{ margin-top:var(--cc-s4); }
.ambiente__pecas{ margin-top:var(--cc-s5); }

.ambiente__lista{ list-style:none; margin:var(--cc-s3) 0 0; padding:0; }
.ambiente__lista li{ border-top:var(--cc-line); }
.ambiente__lista li:last-child{ border-bottom:var(--cc-line); }
.ambiente__item{
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center; gap:var(--cc-s2);
  width:100%;
  padding:12px 0;
  text-align:left;
}
.ambiente__item .desenho{ width:100%; max-height:52px; }
.ambiente__item-nome{
  font-family:var(--cc-font-display); font-weight:600;
  font-size:17px; line-height:1.25;
}
.ambiente__item-meta{
  display:block;
  font-family:var(--cc-font-mono); font-size:12px; color:var(--cc-ink-60);
  margin-top:2px;
}
.ambiente__item-preco{ font-family:var(--cc-font-mono); font-size:var(--cc-step-1); color:var(--cc-red); }
.ambiente__item-preco--vago{ color:var(--cc-ink-40); }

@media (min-width:760px){
  .universos, .ambiente{ max-width:720px; margin-left:auto; margin-right:auto; }
}


/* --------------------------------------------------- fundo do ambiente
   A cor é escolhida na colagem, nos bastidores, e vem por style inline.
   Aqui mora só o que a cor exige: o recorte precisa de uma folga pra não
   encostar na beirada colorida, e sobre fundo escuro a tinta preta some
   — quem estiver por cima vira papel. */
.composicao[style*="background"]{ padding:var(--cc-s2); }
.composicao[data-escuro]{ color:var(--cc-paper); }
.composicao[data-escuro] .composicao__ponto:hover,
.composicao[data-escuro] .composicao__ponto:focus-visible{
  background:rgba(246,240,229,.18);
  outline-color:var(--cc-paper);
}