/* Rabiscolândia: modo Decorar da casa (casa-decorar.js) e o catálogo de móveis (casa-catalogo-ui.js, com as peças .atl-* do Ateliê) */
.casa-deco-rp { position: absolute; inset: 0; z-index: 9; touch-action: none; font-family: var(--texto); cursor: crosshair; }
.casa-deco-rp[hidden] { display: none; }
.cd-topo { position: absolute; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 122px); display: flex; gap: 10px; align-items: center; pointer-events: none; }
.cd-titulo { display: inline-flex; align-items: center; gap: 4px; height: 42px; padding: 0 16px; background: #fff; border: 4px solid var(--tinta); border-radius: 999px; box-shadow: 0 4px 0 var(--tinta); font: 800 21px var(--texto); color: var(--tinta); }
.cd-titulo { color: #6a3fe0; }
/* decorando: o balão da anfitriã desce do alto (a barra de botões fica embaixo) */
.cena-rp.decorando .balao-rp { z-index: 10; top: calc(env(safe-area-inset-top, 0px) + 84px); bottom: auto; transform: translate(-50%, -24px); opacity: 0; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s; }
.cena-rp.decorando .balao-rp.ativo { transform: translate(-50%, 0); opacity: 1; }
.cena-rp.decorando .acao-rp, .cena-rp.decorando .btn-fone-rp, .cena-rp.decorando .rp-toque, .cena-rp.decorando .jd-camada { display: none; }
.cd-dica { position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%); max-width: min(760px, 92vw); padding: 4px 16px 6px; background: rgba(255,255,255,0.95); border: 4px solid var(--tinta); border-radius: 18px; font: 800 17px var(--texto); color: var(--tinta); text-align: center; pointer-events: none; }
.cd-dica:empty { display: none; }
.cd-barra { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.9); border: 4px solid var(--tinta); border-radius: 26px; box-shadow: 0 5px 0 var(--tinta); }
.cd-barra button { width: 74px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; border: 4px solid var(--tinta); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--tinta); font: 800 27px var(--texto); line-height: 1; color: var(--tinta); cursor: pointer; touch-action: manipulation; }
.cd-barra button span { font-size: 13px; margin-top: 3px; }
.cd-barra button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.cd-barra button:disabled { opacity: 0.38; cursor: default; }
.cd-barra .cd-bau { background: #ffe08a; }
.cd-barra .cd-acao { background: #ffcc1f; width: 92px; }
.cd-barra .cd-pronto { background: #58c43a; color: #fff; }
.cd-barra .cd-acao.treme { animation: atl-treme 0.4s; }
.casa-cat-rp { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; background: rgba(40, 20, 80, 0.5); font-family: var(--texto); }
.casa-cat-rp[hidden] { display: none; }
.casa-cat-rp .rf-foco, .casa-cat-rp :focus-visible { outline: 5px solid #ffcc1f; outline-offset: 2px; }
.cc-vista { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: default; background: linear-gradient(160deg, #fff1d6, #ffe3ef 55%, #d6efff); }
.cc-figura { width: min(78%, 300px); aspect-ratio: 1; object-fit: contain; image-rendering: auto; }
.cc-figura:not([src]) { visibility: hidden; }
.cc-sobre { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 12px 10px; text-align: center; }
.cc-nome { font: 800 22px var(--texto); color: var(--tinta); }
.cc-info { font: 700 15px var(--texto); color: #4a3a63; }
.cc-titulo { color: #e0571f; }
.cc-mini { width: 72px; height: 72px; object-fit: contain; }
.cc-vazio { grid-column: 1 / -1; margin: 18px 8px; font: 800 18px var(--texto); color: #4a3a63; }
.cc-mais { flex: none; max-width: 170px; font-size: 16px; }
@media (max-aspect-ratio: 1/1) { .cd-barra button { width: 54px; height: 60px; font-size: 22px; } .cd-barra .cd-acao { width: 64px; } .cd-dica { bottom: 92px; } }
@media (max-height: 520px) and (orientation: landscape) {
  .cd-topo { top: 6px; left: auto; right: 64px; } .cd-titulo { height: 32px; font-size: 16px; border-width: 3px; }
  .cena-rp.decorando .balao-rp { top: 44px; font-size: 15px; padding: 6px 12px 8px; }
  .cd-barra { bottom: 6px; gap: 5px; padding: 4px 6px; border-width: 3px; }
  .cd-barra button { width: 56px; height: 54px; font-size: 21px; border-width: 3px; border-radius: 14px; } .cd-barra button span { font-size: 11px; }
  .cd-barra .cd-acao { width: 68px; }
  .cd-dica { bottom: 72px; font-size: 13px; padding: 2px 10px 3px; border-width: 3px; }
  .casa-cat-rp { align-items: end; }
  .casa-cat-rp .atl-cartao.cc-cartao { position: absolute; top: 54px; bottom: 4px; left: 1vw; width: 98vw; height: auto; margin: 0; } /* abaixo do ✕, da pausa e da ⚙️ da casca */
  .cc-mini { width: 50px; height: 50px; } .cc-nome { font-size: 16px; } .cc-info { font-size: 12px; } .cc-figura { width: min(70%, 170px); }
}
html.modo-tv .cd-barra { transform: translateX(-50%) scale(1.12); transform-origin: bottom center; }