/* Cantinho da calma: tela de desenho livre. */
.calma { display: flex; flex-direction: column; gap: 26px; }
.calma-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.calma-antes { display: flex; flex-direction: column; gap: 4px; }

.calma-mesa { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; }
.calma-ferramentas { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 14px; }
.grupo-calma { display: flex; flex-direction: column; gap: 6px; }
.rotulo-calma { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: var(--apagado); }
.pinceis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pincel {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: 14px; cursor: pointer;
  border: 2px solid transparent; background: var(--suave); font-weight: 800; font-size: 12.5px; color: var(--tinta); text-align: left;
  transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1);
}
.pincel span { font-size: 18px; }
.pincel.ativo { border-color: var(--destaque); background: #fff; transform: translateY(-2px) rotate(-2deg); box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.4); }
.cores-calma { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.cor-calma { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); cursor: pointer; padding: 0; position: relative; }
.cor-calma.ativa { box-shadow: 0 0 0 3px var(--tinta); transform: scale(1.12); }
.cor-livre { display: flex; align-items: center; justify-content: center; background: conic-gradient(#F28AAE, #F7D046, #9EE6DF, #8EC9F5, #B79CF0, #F28AAE); font-weight: 800; color: #fff; overflow: hidden; }
.cor-livre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.grupo-calma input[type=range] { accent-color: var(--destaque); width: 100%; }
.papeis { display: flex; gap: 8px; flex-wrap: wrap; }
.papel { width: 38px; height: 38px; border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.12); cursor: pointer; }
.papel.ativo { border-color: var(--destaque); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--destaque); }

.calma-centro { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.calma-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.calma-acoes .botao { min-height: 40px; }
.calma-acoes .ligado { background: #DDF1FF; border-color: #8EC9F5; }
.ideia-desenho { margin: 0; font-size: 24px; padding: 8px 16px; border-radius: 16px; background: #FFF6CC; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.4); transform: rotate(-0.6deg); }
.efeitos-ativos .ideia-desenho { animation: ideia-entra 0.5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ideia-entra { from { transform: scale(0.7) rotate(-6deg); opacity: 0; } }

.tela-arte {
  position: relative; width: min(100%, calc((100vh - 60px) * 0.8)); margin: 0 auto; aspect-ratio: 900 / 1125;
  background: var(--papel, #fff); border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 0 #eee, 0 4px 0 #e2dbd0, 0 22px 34px -18px rgba(0, 0, 0, 0.55);
}
.papel-kraft { background-image: radial-gradient(rgba(90, 60, 20, 0.14) 1px, transparent 1.3px); background-size: 6px 6px; }
.papel-creme { background-image: radial-gradient(rgba(150, 120, 80, 0.1) 1px, transparent 1.3px); background-size: 9px 9px; }
.tela-palco, .tela-palco canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tela-palco canvas { touch-action: none; cursor: crosshair; }
.centro-mandala { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 2px dashed rgba(120, 100, 140, 0.45); pointer-events: none; }
.com-simetria::before, .com-simetria::after { content: ''; position: absolute; pointer-events: none; background: rgba(120, 100, 140, 0.12); }
.com-simetria::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.com-simetria::after { top: 50%; left: 0; right: 0; height: 1px; }

/* bolha de respiração: 4s inspira, 6s solta */
.bolha-respirar { position: absolute; right: 14px; top: 14px; width: 92px; height: 92px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.bolha { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9), rgba(142, 201, 245, 0.55) 55%, rgba(183, 156, 240, 0.45)); box-shadow: 0 6px 20px rgba(63, 102, 168, 0.25); animation: bolha 10s ease-in-out infinite; }
.bolha-respirar span:not(.bolha) { position: relative; font-family: 'Kalam', cursive; font-size: 20px; color: #2F4B7C; }
.txt-inspira { animation: txt-inspira 10s infinite; }
.txt-solta { position: absolute !important; animation: txt-solta 10s infinite; }
@keyframes bolha { 0% { transform: scale(0.55); } 40% { transform: scale(1); } 100% { transform: scale(0.55); } }
@keyframes txt-inspira { 0%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes txt-solta { 0%, 38% { opacity: 0; } 42%, 98% { opacity: 1; } 100% { opacity: 0; } }

/* galeria */
.quadros { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px; padding-top: 6px; }
.quadro-arte { margin: 0; display: flex; flex-direction: column; gap: 6px; transform: rotate(var(--rot)); transition: transform 0.3s cubic-bezier(.3, 1.6, .5, 1); }
.quadro-arte:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); }
.abrir-arte { padding: 8px; border: 0; border-radius: 4px; cursor: pointer; background: #8E6232; box-shadow: inset 0 0 0 3px #6E4A22, 0 12px 18px -10px rgba(0, 0, 0, 0.55); }
.abrir-arte img { display: block; width: 100%; aspect-ratio: 900 / 1125; object-fit: cover; background: #fff; box-shadow: inset 0 0 0 6px #FFFDF8; border: 6px solid #FFFDF8; }
.quadro-arte figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 18px; }
.quadro-botoes { display: flex; gap: 12px; }
.efeitos-ativos .calma.chegando .quadro-arte { animation: quadro-pendura 0.7s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes quadro-pendura { from { transform: translateY(-40px) rotate(-12deg); opacity: 0; } }

@media (max-width: 900px) {
  .calma-mesa { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .calma-ferramentas { position: static; gap: 10px; padding: 14px !important; }
  /* no celular as ferramentas viram fileiras que deslizam pro lado */
  .pinceis, .cores-calma { display: flex; overflow-x: auto; gap: 6px; padding: 4px 2px 6px; scrollbar-width: none; }
  .pinceis::-webkit-scrollbar, .cores-calma::-webkit-scrollbar { display: none; }
  .pincel { flex: 0 0 auto; }
  .cor-calma { flex: 0 0 34px; width: 34px; height: 34px; }
  .tela-arte { width: 100%; }
  .calma-acoes .botao { min-height: 38px; padding: 0 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .bolha { animation-duration: 10s; } }

/* barra de ações fica numa régua clara, legível em qualquer estética (inclusive as escuras) */
.calma-acoes { background: var(--cartao, #FBF7EC); padding: 8px; border-radius: 14px; border: 1px solid var(--borda-premium, rgba(0,0,0,.1)); box-shadow: 0 10px 22px -16px rgba(0,0,0,.5); }
.calma-acoes .botao-claro { color: var(--tinta) !important; }