/* ==========================================================
   OFICINA CÓSMICA — editor de planeta do diretor
   Estúdio 3 colunas: toolbox | palco | ajustes.
   Sem scroll em telas ≥1024px.
   ========================================================== */

.e-estudio {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: calc(100vh - 108px);
  /* respiro do resto da página — mantém o conteúdo longe das bordas */
  padding: 4px 2px 0;
}

/* ---------- Topo ---------- */
.e-est-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: linear-gradient(90deg, #150a3a, #0e0620);
  box-shadow: 0 8px 20px #0006;
  flex-wrap: wrap;
}
.e-est-marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.e-est-marca > .ico { width: 32px; height: 32px; flex-shrink: 0; }
.e-est-marca small { display: block; font: 900 10px Nunito; letter-spacing: .2em; color: var(--gold); }
.e-est-marca b { display: block; font: 800 15px Nunito; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.e-est-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: #1a0f2e;
  color: #fff;
  font: 800 12px Nunito;
  white-space: nowrap;
}
.e-est-tag .ico { width: 16px; height: 16px; }
.e-est-tag i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); }
.e-est-spacer { flex: 1; }
.e-est-icbtn {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: #1a0f2e;
  cursor: pointer;
  color: #fff;
  transition: background .15s, transform .1s;
}
.e-est-icbtn .ico { width: 22px; height: 22px; }
.e-est-icbtn:hover { background: #2a1a5e; transform: translateY(-1px); }
.e-est-salvar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px; height: 40px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  background: var(--green);
  color: #0e2016;
  font: 900 14px Nunito;
  cursor: pointer;
  transition: transform .1s, filter .15s;
}
.e-est-salvar .ico { width: 20px; height: 20px; }
.e-est-salvar:hover { transform: translateY(-1px); filter: brightness(1.05); }
.e-est-salvar:active { transform: translateY(0); }

/* ---------- Corpo (3 colunas) ---------- */
.e-est-corpo {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: stretch;
}

/* ---------- TOOLBOX (esquerda) ---------- */
.e-est-tool {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px 8px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: #1a0f2e;
  align-items: center;
}
.e-tool-grp {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: 100%;
}
.e-tool-rotulo {
  font: 900 9px Nunito; letter-spacing: .12em;
  color: #b8c2ff;
  text-transform: uppercase;
}
.e-tool-tipos { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.e-tool-tipo {
  position: relative;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  background: #12082b;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.e-tool-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.e-tool-tipo-ic { display: block; width: 26px; height: 26px; color: #b8c2ff; }
.e-tool-tipo-ic .ico { width: 100%; height: 100%; }
.e-tool-tipo:hover { background: #2a1a5e; transform: translateY(-1px); }
.e-tool-tipo.on { background: var(--gold); border-color: var(--ink); }
.e-tool-tipo.on .e-tool-tipo-ic { color: #1a0f2e; }

.e-tool-bot {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  border: 2px solid var(--ink);
  background: #12082b;
  color: #fff;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.e-tool-bot .ico { width: 24px; height: 24px; }
.e-tool-bot:hover { background: #2a1a5e; transform: translateY(-1px); }

/* ---------- PALCO (centro) ---------- */
.e-est-palco {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 30%, #2a1a5e 0%, #150a3a 45%, #05010f 100%);
  box-shadow: inset 0 0 90px #6b3dff22;
  overflow: hidden;
  min-height: 320px;
}
.e-est-palco::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff9 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 12%, #fff7 50%, transparent 50%),
    radial-gradient(2px 2px at 32% 78%, #9ff4ff88 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 88% 68%, #ffe07a88 50%, transparent 50%),
    radial-gradient(1px 1px at 56% 38%, #fff 50%, transparent 50%),
    radial-gradient(1px 1px at 18% 62%, #fff 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 66% 88%, #ff7ac888 50%, transparent 50%);
}
/* A prévia ocupa TODO o palco: 100% da largura e da altura disponíveis.
   O canvas do three.js preenche tudo (o `tamanho()` agora olha clientWidth E clientHeight). */
.e-previa {
  position: absolute;
  inset: 0;
}
.e-previa canvas { display: block; width: 100% !important; height: 100% !important; }

/* ---------- AJUSTES (direita) ---------- */
.e-est-ajustes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: #1a0f2e;
}
.e-aj-grp { display: flex; flex-direction: column; gap: 10px; }
.e-aj-rotulo {
  font: 900 9px Nunito; letter-spacing: .12em;
  color: #b8c2ff;
  text-transform: uppercase;
}

/* Bolha de cor: um único círculo clicável com o hex embaixo */
.e-aj-cor {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #12082b;
  cursor: pointer;
  user-select: none;
}
.e-aj-cor input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; padding: 0; border: none; }
.e-aj-cor-bolha {
  display: block;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 3px #ffffff22;
  flex-shrink: 0;
}
.e-aj-cor-num { font: 900 12px Nunito; color: #fff; letter-spacing: .05em; }

.e-aj-cor-linha { display: flex; align-items: stretch; gap: 8px; }
.e-aj-cor-linha .e-aj-cor { flex: 1; }
.e-aj-cor-linha.off { opacity: .5; }
.e-aj-cor-linha.off:hover { opacity: .8; }

/* Toggle switch (reutiliza o estilo global `.sw` mas com respiro) */
.e-aj-toggle {
  display: grid; place-items: center;
  width: 52px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #12082b;
  cursor: pointer;
  position: relative;
}
.e-aj-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.e-aj-toggle i {
  display: block; width: 30px; height: 18px; border-radius: 999px;
  background: #3a2580;
  position: relative;
  transition: background .15s;
}
.e-aj-toggle i::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; transition: left .15s;
}
.e-aj-toggle input:checked ~ i { background: var(--green); }
.e-aj-toggle input:checked ~ i::after { left: 14px; }

/* Anel: um card que mostra o anel quando ligado */
.e-aj-anel {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #12082b;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}
.e-aj-anel input { position: absolute; opacity: 0; pointer-events: none; }
.e-aj-anel-fig {
  position: relative;
  width: 40px; height: 40px;
  flex-shrink: 0;
}
.e-aj-anel-fig::before {
  content: "";
  position: absolute; inset: 8px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--ink);
  transition: filter .15s;
}
.e-aj-anel-fig::after {
  content: "";
  position: absolute; left: -4px; right: -4px; top: 50%;
  height: 6px; margin-top: -3px;
  border-radius: 50%;
  border: 3px solid #1a0f2e;
  background: transparent;
  transform: rotate(-18deg);
  opacity: 0;
  transition: opacity .15s;
}
.e-aj-anel.on { background: #2a1a5e; }
.e-aj-anel.on .e-aj-anel-fig::after { opacity: 1; }
.e-aj-anel-txt { font: 800 13px Nunito; color: #fff; }

/* Brasão — rodapé da coluna direita */
.e-aj-brasao {
  margin-top: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: #0e0620;
}
.e-aj-brasao-emb {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--c);
  border: 3px solid var(--ink);
  box-shadow: 0 0 16px var(--c);
}
.e-aj-brasao-emb .ico { width: 22px; height: 22px; }
.e-aj-brasao-nome {
  font: 800 13px Nunito; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1;
}

/* Erro fora da moldura */
.e-estudio .a-erro { margin: 0; min-height: 0; }

/* ==========================================================
   RESPONSIVO
   ========================================================== */

/* Tablet largo: reduz a coluna direita */
@media (max-width: 1024px) {
  .e-est-corpo { grid-template-columns: 72px minmax(0, 1fr) 190px; }
}

/* Tablet / celular grande: vira 1 coluna empilhada, mas o palco continua largo */
@media (max-width: 840px) {
  .e-estudio { min-height: 0; }
  .e-est-corpo { grid-template-columns: 1fr; gap: 10px; }
  .e-est-tool {
    flex-direction: row;
    justify-content: flex-start;
    padding: 8px 10px;
    gap: 12px;
  }
  .e-tool-grp { flex-direction: row; width: auto; gap: 6px; align-items: center; }
  .e-tool-tipos { flex-direction: row; }
  .e-est-ajustes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .e-est-ajustes .e-aj-grp:first-child { grid-column: 1 / -1; }
  .e-aj-brasao { grid-column: 1 / -1; margin-top: 0; }
  .e-est-palco { min-height: 380px; }
}

/* Celular: tudo empilhado, botões maiores */
@media (max-width: 560px) {
  .e-est-topo { padding: 8px 10px; }
  .e-est-marca b { max-width: 140px; font-size: 14px; }
  .e-est-tag { font-size: 11px; padding: 3px 8px; }
  .e-est-salvar span { display: none; }
  .e-est-salvar { width: 40px; justify-content: center; padding: 0; }
  .e-est-ajustes { grid-template-columns: 1fr; }
  .e-est-palco { min-height: 320px; }
}