/* ============================================================
   CineJunto — editor de personagem (usado na home e no modal da sala)
   Arquivo próprio: não toca no styles.css do lobby nem no room.css.
   ============================================================ */
.avatar-editor{
  --ae-bg:#0b0e14;
  --ae-surface:#161d28;
  --ae-border:#242d3a;
  --ae-text:#f3f6fb;
  --ae-muted:#8b97ab;
  --ae-accent:#4c8dff;
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start;
}

/* palco do preview: o personagem já aparece sentado, como estará na sala */
.ae-stage{
  position:relative;height:186px;border-radius:14px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#1a2434 0%,#0d1119 55%,#070a10 100%);
  border:1px solid var(--ae-border);
  display:flex;align-items:flex-end;justify-content:center;
}
.ae-glow{
  position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  width:150%;height:120px;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 50% 0%,rgba(120,165,235,.3),transparent 70%);
}
.ae-figure{
  position:absolute;left:8%;right:8%;bottom:34px;top:6px;
  display:flex;align-items:flex-end;justify-content:center;pointer-events:none;
}
.ae-figure .avatar{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center}
.ae-figure .avatar-svg{width:100%;height:100%;overflow:visible}
.ae-chair{
  position:absolute;left:16%;right:16%;bottom:0;height:52px;
  border-radius:9px 9px 4px 4px;
  background:linear-gradient(180deg,#6a1f2b 0%,#4a151f 48%,#2a0c12 100%);
  box-shadow:inset 0 1px 0 rgba(255,180,180,.14), 0 4px 14px rgba(0,0,0,.55);
}
.ae-chair::before{
  content:"";position:absolute;left:14%;right:14%;top:12%;bottom:24%;
  border-radius:5px;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.06));
}

.ae-controls{display:flex;flex-direction:column;gap:13px;min-width:0}
.ae-group{display:flex;flex-direction:column;gap:7px}
.ae-label{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--ae-muted);
}
.ae-label em{
  font-style:normal;letter-spacing:0;text-transform:none;
  font-weight:600;color:var(--ae-text);margin-left:8px;font-size:11.5px;
}
.ae-swatches{display:flex;flex-wrap:wrap;gap:6px}
.ae-sw{
  width:26px;height:26px;border-radius:8px;padding:0;cursor:pointer;
  border:1px solid var(--ae-border);
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.ae-sw:hover{transform:translateY(-2px);border-color:#3d4d66}
.ae-sw.is-on{
  border-color:var(--ae-accent);
  box-shadow:0 0 0 2px rgba(76,141,255,.28);transform:translateY(-2px);
}
.ae-sw-hair{border-radius:50% 50% 40% 40%}
.ae-sw-custom{
  position:relative;overflow:hidden;display:grid;place-items:center;
  background:conic-gradient(from .25turn,#e0603a,#c9a23a,#4cc98a,#3ab6c9,#73a7ff,#8a6ae0,#e05a9c,#e0603a);
}
.ae-sw-custom input{
  position:absolute;inset:-6px;width:150%;height:150%;
  border:0;padding:0;background:transparent;cursor:pointer;opacity:0;
}

.ae-segments{display:flex;gap:5px}
.ae-segments button{
  flex:1;padding:8px 6px;border-radius:9px;cursor:pointer;
  background:linear-gradient(180deg,var(--ae-surface),#101620);
  border:1px solid var(--ae-border);color:var(--ae-muted);
  font-size:11.5px;font-weight:600;transition:.14s;
}
.ae-segments button:hover{color:var(--ae-text);border-color:#3d4d66}
.ae-segments button.is-on{
  border-color:var(--ae-accent);color:var(--ae-text);font-weight:700;
  background:linear-gradient(180deg,#2b4370,#1a2740);
  box-shadow:inset 0 0 0 1px rgba(76,141,255,.35);
}
/* foco de teclado não pode se confundir com "selecionado" */
.avatar-editor button:focus{outline:none}
.avatar-editor button:focus-visible{outline:2px dotted var(--ae-muted);outline-offset:2px}
.ae-random{
  align-self:flex-start;padding:8px 13px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px dashed var(--ae-border);color:var(--ae-muted);
  font-size:11.5px;font-weight:600;transition:.14s;
}
.ae-random:hover{color:var(--ae-text);border-color:var(--ae-accent);border-style:solid}

@media (max-width:560px){
  .avatar-editor{grid-template-columns:1fr;gap:14px}
  .ae-stage{height:170px}
}

/* --- variação compacta, usada dentro do modal de entrada da sala --- */
.avatar-editor.is-compact{grid-template-columns:110px minmax(0,1fr);gap:13px}
.avatar-editor.is-compact .ae-stage{height:140px}
.avatar-editor.is-compact .ae-chair{height:40px}
.avatar-editor.is-compact .ae-figure{bottom:26px}
.avatar-editor.is-compact .ae-sw{width:22px;height:22px;border-radius:7px}
.avatar-editor.is-compact .ae-controls{gap:10px}
.avatar-editor.is-compact .ae-segments button{padding:6px 4px;font-size:11px}

/* --- painel do editor na home --- */
.avatar-panel{margin-bottom:20px}
.avatar-hint{
  margin:-14px 0 18px;font-size:12.5px;line-height:1.55;color:#8b97ab;max-width:560px;
}