/* ============================================================================
   PERSONALIZAR — ui/charedit.js.

   El editor del muñeco con la ropa del resto del juego: el panel entra desde la
   derecha como el del menú (mp-head / mp-body / mp-foot), herramientas a la
   izquierda, la barra abajo. Fuente bitmap, esquinas rectas, sombras duras y
   el dorado como "esto es lo elegido".
   ========================================================================== */

.ce{
  --ce-pw:min(96vw, 400px);
  position:fixed; inset:0; z-index:26; overflow:hidden;
  background:var(--void0); user-select:none;
}
.ce-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
/* Velo de los bordes: el texto de los paneles se lee sobre cualquier cielo. */
.ce-shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,7,18,.62) 0%, rgba(4,7,18,0) 20%, rgba(4,7,18,0) 58%, rgba(4,7,18,.55) 100%),
    linear-gradient(0deg, rgba(4,7,18,.55) 0%, rgba(4,7,18,0) 24%);
}
.ce-pan{
  position:absolute; background:var(--panel); border:2px solid var(--line);
  box-shadow:var(--shadow);
}
.ce button{ font:inherit; color:inherit; }

/* ---------------------------------------------------------------- ayuda */
.ce-hint{
  left:calc((100vw - var(--ce-pw)) / 2); top:calc(16px + var(--safe-t));
  transform:translateX(-50%); padding:8px 18px; text-align:center;
  pointer-events:none; min-width:min(80vw, 380px); max-width:calc(100vw - var(--ce-pw) - 220px);
}
.ce-hint b{ display:block; font-size:clamp(13px,1.5vw,16px); letter-spacing:.06em; color:var(--gold); font-weight:700; }
.ce-hint small{ display:block; margin-top:3px; font-size:11px; color:var(--dim); letter-spacing:.03em; line-height:1.4; }

/* ---------------------------------------------------------- herramientas */
.ce-tools{
  left:calc(16px + env(safe-area-inset-left, 0px)); top:50%; transform:translateY(-50%);
  padding:8px; display:flex; flex-direction:column; gap:3px; width:90px;
}
.ce-tg{
  font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--dimmer);
  padding:6px 2px 3px; border-bottom:1px solid var(--line); margin-bottom:2px; text-align:center;
}
.ce-tg:first-child{ padding-top:0; }
.ce-tool{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 2px 6px; color:var(--dim); border:2px solid transparent;
  transition:color .1s, background .12s, border-color .12s, transform .1s;
}
.ce-tool svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ce-tool span{ font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.ce-tool:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.ce-tool.on{
  color:var(--gold); background:rgba(255,211,77,.14); border-color:rgba(255,211,77,.7);
  box-shadow:0 0 16px rgba(255,211,77,.22);
}
.ce-tool:active{ transform:translateY(2px); }

/* ------------------------------------------------------------- barra */
.ce-bar{
  left:calc((100vw - var(--ce-pw)) / 2); bottom:calc(16px + var(--safe-b));
  transform:translateX(-50%); padding:8px; display:flex; align-items:center; gap:6px;
  flex-wrap:wrap; justify-content:center; max-width:calc(100vw - var(--ce-pw) - 32px);
}
.ce-bar .btn, .ce-sub .btn{ padding:9px 12px; font-size:12px; white-space:nowrap; }
.ce-sep{ width:2px; align-self:stretch; background:var(--line); margin:0 4px; }
.ce-chk{
  display:inline-flex; align-items:center; gap:8px; padding:9px 12px; font-size:12px;
  border:2px solid var(--line); background:rgba(255,255,255,.04); color:var(--dim); white-space:nowrap;
}
.ce-chk i{ width:14px; height:14px; border:2px solid var(--dimmer); display:inline-block; }
.ce-chk.on{ color:var(--text); border-color:rgba(255,211,77,.6); }
.ce-chk.on i{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 10px rgba(255,211,77,.6); }
.ce-size{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase; padding:0 6px; }
.ce-size[hidden]{ display:none; }
.ce input[type=range]{
  -webkit-appearance:none; appearance:none; width:110px; height:8px;
  background:linear-gradient(90deg, var(--gold-deep), var(--line)); border:1px solid var(--line);
}
.ce input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:18px; background:var(--gold); border:2px solid var(--void0); cursor:pointer;
}
.ce input[type=range]::-moz-range-thumb{ width:12px; height:18px; background:var(--gold); border:2px solid var(--void0); border-radius:0; cursor:pointer; }

/* Pintura y material: suben encima de la barra mientras su herramienta está puesta. */
.ce-sub{
  left:calc((100vw - var(--ce-pw)) / 2); bottom:calc(84px + var(--safe-b));
  transform:translateX(-50%); padding:10px 12px; display:none; gap:8px; align-items:center;
  flex-wrap:wrap; justify-content:center; max-width:calc(100vw - var(--ce-pw) - 32px);
}
.ce-sub.show{ display:flex; animation:ceSubIn .22s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes ceSubIn{ from{ opacity:0; transform:translate(-50%, 12px); } }
.ce-sw{ width:26px; height:26px; border:2px solid rgba(0,0,0,.55); padding:0; cursor:pointer; transition:transform .1s; }
.ce-sw:hover{ transform:translateY(-2px); }
.ce-sw.on{ outline:2px solid var(--gold); outline-offset:2px; transform:translateY(-2px); }
.ce-sw.erase{ background:repeating-linear-gradient(45deg, #ddd 0 5px, #888 5px 10px); }
.ce-sub input[type=color]{ width:34px; height:28px; padding:0; border:2px solid var(--line); background:none; cursor:pointer; }
.ce-fin{
  padding:8px 12px; font-size:12px; border:2px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--dim); text-transform:uppercase; letter-spacing:.04em;
}
.ce-fin:hover{ color:var(--text); }
.ce-fin.on{ color:#3a2500; background:var(--gold); border-color:var(--gold); }

/* ------------------------------------------------------------- panel */
.ce-panel{
  position:absolute; top:0; right:0; bottom:0; width:var(--ce-pw);
  background:linear-gradient(180deg, rgba(10,15,34,.97), rgba(7,11,24,.97));
  border-left:2px solid var(--line); box-shadow:-18px 0 44px rgba(0,0,0,.55);
  display:flex; flex-direction:column;
  transition:transform .2s ease-in;
}
.ce-panel .mp-body{ gap:10px; }
.ce-panel .mp-foot .btn{ font-size:14px; }
.ce-panel .btn.gold{ letter-spacing:.06em; }
.ce-prow{ display:flex; gap:8px; align-items:stretch; }
.ce-sel{ flex:1 1 auto; min-width:0; }
.ce-prow .btn{ flex:0 0 auto; padding:8px 14px; font-size:13px; }
.ce-pose{ min-width:0; padding:6px 8px; text-transform:none; letter-spacing:0; }
.ce-panel .skins{ gap:6px; }
.ce-panel .skin{ width:28px; height:28px; }
.ce-panel .field input{ padding:9px 12px; }

/* Partes: la lista del menú en chico (barra dorada, número, icono). */
.ce-cats{ display:flex; flex-direction:column; gap:1px; }
.ce-cat{
  display:grid; grid-template-columns:4px 2.2em 24px 1fr; align-items:center; gap:10px;
  padding:5px 10px 5px 0; text-align:left; color:rgba(242,246,255,.62);
  border-top:1px solid transparent; border-bottom:1px solid transparent;
  transition:color .1s, background .14s, transform .1s;
}
.ce-cat .mi-bar{ height:0; }
.ce-cat-n{ font-size:10px; color:var(--dimmer); letter-spacing:.14em; }
.ce-cat svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ce-cat-l{ font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.ce-cat:hover{ color:#fff; }
.ce-cat.on{
  color:#fff; transform:translateX(4px);
  background:linear-gradient(90deg, rgba(255,211,77,.16) 0%, rgba(255,211,77,.05) 45%, rgba(255,211,77,0) 90%);
  border-top-color:rgba(255,211,77,.16); border-bottom-color:rgba(255,211,77,.16);
}
.ce-cat.on .mi-bar{ height:calc(100% - 4px); }
.ce-cat.on .ce-cat-n, .ce-cat.on svg{ color:var(--gold); }

/* Accesorios: la lista para ponerlos y quitarlos, con la ropa de los botones de material. */
.ce-wear{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.ce-wear[hidden]{ display:none; }
.ce-wb{
  display:flex; align-items:center; gap:7px; padding:5px 7px; min-width:0; text-align:left;
  border:2px solid var(--line); background:rgba(255,255,255,.04); color:var(--dim);
  font-size:11px; text-transform:uppercase; letter-spacing:.03em; transition:color .1s, transform .1s;
}
.ce-wb span{ line-height:1.15; min-width:0; }
.ce-wb svg{ width:20px; height:20px; flex:0 0 20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ce-wb:hover{ color:var(--text); transform:translateY(-1px); }
.ce-wb.on{ color:#3a2500; background:var(--gold); border-color:var(--gold); }
.ce-wear:not([hidden]){ animation:ceFade .25s both; }
/* Cara: el botón que la sortea de nuevo, a la derecha de la palabra y solo con Cara elegida. */
.ce-catrow{ position:relative; display:flex; flex-direction:column; }
.ce-rand{ position:absolute; right:6px; top:4px; bottom:4px; padding:0 12px; font-size:12px; }
.ce-rand[hidden]{ display:none; }

/* ---------------------------------------------------------- entrada / salida */
.ce.ce-in .ce-panel{ animation:cePanelIn .6s .05s cubic-bezier(.2,1.1,.3,1) both; }
.ce.ce-in .ce-tools{ animation:ceToolsIn .55s .2s cubic-bezier(.2,1.25,.3,1) both; }
.ce.ce-in .ce-bar{ animation:ceBarIn .55s .3s cubic-bezier(.2,1.25,.3,1) both; }
.ce.ce-in .ce-hint{ animation:ceHintIn .5s .38s cubic-bezier(.2,1.25,.3,1) both; }
.ce.ce-in .ce-cat{ animation:ceCatIn .4s cubic-bezier(.2,1.3,.3,1) both; }
.ce.ce-in .ce-catrow:nth-child(1) .ce-cat{ animation-delay:.32s; }
.ce.ce-in .ce-catrow:nth-child(2) .ce-cat{ animation-delay:.37s; }
.ce.ce-in .ce-catrow:nth-child(3) .ce-cat{ animation-delay:.42s; }
.ce.ce-in .ce-catrow:nth-child(4) .ce-cat{ animation-delay:.47s; }
.ce.ce-in .ce-catrow:nth-child(5) .ce-cat{ animation-delay:.52s; }
.ce.ce-in .ce-catrow:nth-child(6) .ce-cat{ animation-delay:.57s; }
.ce.ce-in .ce-catrow:nth-child(7) .ce-cat{ animation-delay:.62s; }
.ce.ce-in .ce-shade{ animation:ceFade .8s both; }
@keyframes cePanelIn{ from{ transform:translateX(105%); } }
@keyframes ceToolsIn{ from{ transform:translate(-170%, -50%); } }
@keyframes ceBarIn{ from{ transform:translate(-50%, 240%); } }
@keyframes ceHintIn{ from{ transform:translate(-50%, -260%); } }
@keyframes ceCatIn{ from{ opacity:0; transform:translateX(40px); } }
@keyframes ceFade{ from{ opacity:0; } }

.ce.ce-out .ce-panel{ transform:translateX(105%); }
.ce.ce-out .ce-tools{ transform:translate(-170%, -50%); transition:transform .18s ease-in; }
.ce.ce-out .ce-bar, .ce.ce-out .ce-sub{ transform:translate(-50%, 240%); transition:transform .18s ease-in; }
.ce.ce-out .ce-hint{ transform:translate(-50%, -260%); transition:transform .18s ease-in; }

/* La cortina de entrada y salida (y el menú o lobby que se va y vuelve con
   ella) vive en wipe.css: la comparten otros cambios de pantalla. */
/* Mientras está abierto, la esquina superior derecha es del panel. */
body.ce-open #netstat, body.ce-open #langbar{ display:none !important; }

/* -------------------------------------------------------------- lobby */
.lobby-custom{
  width:100%; padding:12px 14px; font-size:14px; letter-spacing:.08em;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.lobby-custom svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* -------------------------------------------------------------- responsive */
@media (max-width:820px){
  .ce{ --ce-pw:100vw; }
  .ce-panel{ top:auto; height:46vh; width:100%; border-left:0; border-top:2px solid var(--line); }
  .ce.ce-in .ce-panel{ animation-name:cePanelUp; }
  .ce.ce-out .ce-panel{ transform:translateY(105%); }
  @keyframes cePanelUp{ from{ transform:translateY(105%); } }
  .ce-tools{ top:calc(70px + var(--safe-t)); left:8px; transform:none; flex-direction:row; flex-wrap:wrap; width:auto; max-width:calc(100vw - 16px); }
  .ce.ce-in .ce-tools{ animation-name:ceFade; }
  .ce-tg, .ce-tool span{ display:none; }
  .ce-hint{ left:50%; max-width:calc(100vw - 16px); top:calc(8px + var(--safe-t)); }
  /* Con left:50% el ancho disponible era la mitad de la pantalla y la barra se apilaba en columna. */
  .ce-bar, .ce-sub{ left:8px; right:8px; transform:none; max-width:none; gap:4px; padding:6px; }
  .ce-bar{ bottom:calc(46vh + 8px); }
  .ce-sub{ bottom:calc(46vh + 62px); }
  .ce-sub.show{ animation-name:ceFade; }
  .ce-bar .btn, .ce-sub .btn, .ce-chk{ padding:7px 8px; font-size:11px; }
  .ce-sep{ display:none; }
  .ce.ce-in .ce-bar{ animation-name:ceFade; }
  .ce.ce-out .ce-bar, .ce.ce-out .ce-sub{ transform:translateY(240%); }
}

/* ------------------------------------------------- rueda de bailes (B) */
/* Mantener B: los bailes en círculo alrededor del muñeco, cada uno con su
   frame de la mitad; el que apunta el mouse se marca en dorado. */
.ce-wheel{ position:absolute; inset:0; z-index:5; background:rgba(4,7,18,.45); }
.ce-wheel[hidden]{ display:none; }
.ce-wheel-ring{
  position:absolute; left:calc((100vw - var(--ce-pw)) / 2); top:50%; width:0; height:0;
  --r:min(36vh, 300px, calc((100vw - var(--ce-pw)) / 2 - 70px));
}
/* La misma rueda en el tablero y los juegos (ui/dancewheel.js): centrada; se
   elige el baile que queda donde está el cursor. */
.dance-wheel{ position:fixed; inset:0; z-index:40; cursor:default; background:rgba(4,7,18,.35); }
.dance-wheel[hidden]{ display:none; }
.dance-wheel-ring{ position:absolute; left:50%; top:50%; width:0; height:0; --r:min(34vh, 300px); }
.ce-wi{
  position:absolute; left:calc(var(--c) * var(--r)); top:calc(var(--s) * var(--r));
  transform:translate(-50%, -50%); width:104px; padding:4px 4px 6px; text-align:center;
  background:var(--panel); border:2px solid var(--line); box-shadow:var(--shadow); cursor:pointer;
}
.ce-wi img{ display:block; width:88px; height:88px; margin:0 auto 4px; image-rendering:pixelated; }
.ce-wi span{ display:block; font-size:10px; line-height:1.25; letter-spacing:.03em; color:var(--text); }
.ce-wi.on, .ce-wi:hover{ border-color:var(--gold); }
.ce-wi.on span, .ce-wi:hover span{ color:var(--gold); }