/* ============================================================================
   Menú principal — ui/menu.js.

   Un menú de juego de PC: la lista a la izquierda sobre la escena 3D, los
   paneles (personalizar / configuración) entrando desde la derecha, y la
   versión abajo a la derecha. Sin esquinas redondeadas y con sombras duras,
   que es el idioma visual del resto del juego (fuente bitmap, --r:0).
   ========================================================================== */

/* El velo: oscurece la franja izquierda para que el texto se lea siempre,
   y deja el centro-derecha casi limpio para que se vea la escena. */
.menu-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(4,7,18,.94) 0%, rgba(4,7,18,.86) 26%, rgba(4,7,18,.42) 52%, rgba(4,7,18,.12) 74%, rgba(4,7,18,.34) 100%),
    radial-gradient(120% 90% at 6% 50%, rgba(10,18,48,.55), transparent 60%);
}

/* Con #overlay porque `#overlay > :not(.scrim){position:relative}` (styles.css)
   le gana en especificidad a una clase suelta y dejaba el menú en 0×0. */
#overlay .menu-root, .menu-root{
  position:absolute; inset:0;
  display:block;                 /* pisa el flex column del .title-wrap viejo */
  padding:0; overflow:hidden; max-height:none;
  pointer-events:none;
}
.menu-root > *{ pointer-events:auto; }

/* ------------------------------------------------------------------- columna */
.menu-side{
  position:absolute; left:0; top:0; bottom:0;
  width:min(94vw, 560px);
  padding:clamp(20px,4vh,54px) clamp(20px,4.5vw,64px);
  padding-top:calc(clamp(20px,4vh,54px) + var(--safe-t));
  padding-bottom:calc(clamp(20px,4vh,54px) + var(--safe-b));
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(18px,3.4vh,40px);
  overflow:auto; scrollbar-width:none;
}
.menu-side::-webkit-scrollbar{ display:none; }

/* --------------------------------------------------------------------- logo */
.menu-side .logo{ text-align:left; flex:0 0 auto; }
/* Una regla dorada en vez del ★ suelto: la fuente bitmap no trae ese glifo y
   el fallback metía una caja de 400px encima del logo. */
.menu-side .logo-rule{
  width:clamp(40px,7vw,86px); height:5px; background:var(--gold);
  box-shadow:0 0 20px rgba(255,211,77,.55); margin-bottom:clamp(10px,1.6vh,18px);
}
/* La letra pixel de siempre con un degradado suave por palabra: arriba de
   blanco a celeste, abajo de dorado a rosa como el sol del fondo
   (render/_title.js). La sombra dura va con filter y no con text-shadow: con
   el relleno transparente, el text-shadow se veía a través de la letra y la
   dejaba hueca. */
.menu-side .logo-text{
  font-size:clamp(34px,6.2vw,72px); line-height:.92; font-weight:700;
  letter-spacing:.02em; text-shadow:none;
  background:linear-gradient(180deg, #ffffff 0%, #e4f1ff 40%, #8cc2ff 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(5px 5px 0 rgba(12,5,32,.9)) drop-shadow(0 0 18px rgba(140,194,255,.28));
}
.menu-side .logo-text span{
  display:block;
  background:linear-gradient(180deg, #ffe27a 0%, #ffb521 45%, #ff6a8a 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,106,138,.35));
}
.menu-side .logo-sub{
  margin-top:10px; color:var(--dim); max-width:34ch;
  font-size:clamp(11px,1.5vw,14px); line-height:1.5;
  border-left:3px solid var(--line); padding-left:10px;
}

/* --------------------------------------------------------------------- lista */
.menu-list{ display:flex; flex-direction:column; gap:2px; flex:0 0 auto; }

.menu-item{
  position:relative; display:grid; align-items:center;
  grid-template-columns:4px 2.6em 1fr auto;
  gap:14px; width:100%; text-align:left;
  padding:clamp(9px,1.5vh,14px) 16px clamp(9px,1.5vh,14px) 0;
  color:rgba(242,246,255,.62);
  background:linear-gradient(90deg, rgba(124,192,255,0) 0%, rgba(124,192,255,0) 100%);
  transition:color .12s linear, background .16s linear, transform .12s ease-out;
  border-top:1px solid transparent; border-bottom:1px solid transparent;
}
.menu-item + .menu-item{ margin-top:-1px; }

.mi-bar{
  display:block; width:4px; height:0; background:var(--gold);
  box-shadow:0 0 14px rgba(255,211,77,.7);
  transition:height .14s ease-out; justify-self:start; align-self:center;
}
.mi-num{
  font-size:clamp(10px,1.2vw,12px); color:var(--dimmer); letter-spacing:.14em;
  transition:color .12s linear;
}
.mi-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mi-label{
  font-size:clamp(19px,2.5vw,30px); font-weight:700; line-height:1.06;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.mi-hint{
  font-size:clamp(10px,1.25vw,12.5px); color:var(--dimmer); letter-spacing:.04em;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .16s ease-out, opacity .16s linear;
}
.mi-chev{ color:var(--gold); opacity:0; transform:translateX(-8px); transition:opacity .14s, transform .14s ease-out; }

.menu-item.on{
  color:#fff;
  background:linear-gradient(90deg, rgba(255,211,77,.16) 0%, rgba(255,211,77,.05) 40%, rgba(255,211,77,0) 90%);
  border-top-color:rgba(255,211,77,.16); border-bottom-color:rgba(255,211,77,.16);
  transform:translateX(6px);
}
.menu-item.on .mi-bar{ height:calc(100% - 6px); }
.menu-item.on .mi-num{ color:var(--gold); }
.menu-item.on .mi-label{ text-shadow:0 0 22px rgba(255,211,77,.35), var(--shadow); }
.menu-item.on .mi-hint{ max-height:2.4em; opacity:1; }
.menu-item.on .mi-chev{ opacity:1; transform:translateX(0); }
.menu-item:active{ transform:translateX(6px) translateY(2px); }
.menu-item:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ---------------------------------------------------------- ayuda de teclas */
.menu-keys{
  display:flex; flex-wrap:wrap; gap:6px 18px; flex:0 0 auto;
  font-size:clamp(9px,1.1vw,11px); color:var(--dimmer); letter-spacing:.08em;
}
.menu-keys span{ display:flex; align-items:center; gap:6px; }
.menu-keys kbd{
  font:inherit; color:var(--dim); background:rgba(255,255,255,.06);
  border:1px solid var(--line); padding:2px 6px; min-width:20px; text-align:center;
}

/* ------------------------------------------- versión / build / notas del parche */
/* La esquina: el botón NOTAS DEL PARCHE con la versión al lado, y la línea de
   build encima de los dos. */
.menu-corner{
  position:absolute; right:clamp(14px,2.4vw,30px);
  bottom:calc(clamp(12px,2vh,22px) + var(--safe-b));
  display:flex; align-items:center; gap:clamp(10px,1.2vw,16px);
}
.menu-version, .menu-build{
  color:var(--dimmer); letter-spacing:.14em; font-size:clamp(10px,1.2vw,13px);
  text-shadow:0 2px 0 rgba(0,0,0,.8); pointer-events:none;
}
.menu-version{ color:var(--dim); }
/* La versión abre los créditos: se puede tocar, pero sigue pareciendo texto. */
button.menu-version{ pointer-events:auto; padding:0; }
button.menu-version:hover, button.menu-version:focus-visible{ color:#fff; outline:none; }
.menu-build{
  position:absolute; right:clamp(14px,2.4vw,30px);
  bottom:calc(clamp(12px,2vh,22px) + var(--safe-b) + 40px);
  font-size:clamp(9px,1.05vw,11px); opacity:.72; letter-spacing:.1em;
}
.menu-notes{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px 7px 10px;
  font-size:clamp(10px,1.1vw,12px); letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); background:rgba(7,11,24,.62);
  border:1px solid var(--line); box-shadow:3px 3px 0 rgba(0,0,0,.6);
  transition:color .12s linear, border-color .12s linear, background .12s linear;
}
.menu-notes::before{
  content:''; width:6px; height:6px; flex:0 0 auto; background:var(--gold);
  box-shadow:0 0 10px rgba(255,211,77,.7);
}
.menu-notes:hover, .menu-notes:focus-visible{
  color:#fff; border-color:var(--gold); background:rgba(255,211,77,.12); outline:none;
}
.menu-notes:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(0,0,0,.6); }

/* ------------------------------------------------------------------- panel */
.menu-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(96vw, 420px);
  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;
  transform:translateX(102%); opacity:0; visibility:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), opacity .18s linear, visibility .22s;
}
.menu-root.panel-open .menu-panel{ transform:none; opacity:1; visibility:visible; }
.menu-root.panel-wide .menu-panel{ width:min(96vw, 470px); }
.menu-panel.reloading{ opacity:.35; pointer-events:none; }

.mp-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:calc(18px + var(--safe-t)) 20px 14px;
  border-bottom:2px solid var(--line);
  background:linear-gradient(180deg, rgba(124,192,255,.08), transparent);
}
.mp-eyebrow{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.mp-title{ font-size:clamp(17px,2.2vw,22px); font-weight:700; margin-top:4px; letter-spacing:.02em; }
.mp-close{
  width:34px; height:34px; flex:0 0 auto; color:var(--dim);
  border:1px solid var(--line); background:rgba(255,255,255,.04); font-size:15px;
}
.mp-close:hover{ color:#fff; background:rgba(255,77,90,.18); border-color:var(--danger); }

.mp-body{ flex:1 1 auto; overflow:auto; padding:16px 20px; display:flex; flex-direction:column; gap:12px; }
.mp-body::-webkit-scrollbar{ width:8px; }
.mp-body::-webkit-scrollbar-thumb{ background:var(--line); }

.mp-group{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dimmer);
  border-bottom:1px solid var(--line); padding-bottom:6px; margin-top:6px;
}
.mp-group:first-child{ margin-top:0; }

.mp-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:7px 0; min-height:38px;
}
.mp-row-t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mp-row-t b{ font-weight:700; font-size:13px; }
.mp-row-t i{ font-style:normal; font-size:10px; color:var(--dimmer); letter-spacing:.05em; }
.mp-row-c{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }

/* switch */
.sw{
  width:52px; height:26px; border:2px solid var(--line); background:rgba(255,255,255,.05);
  position:relative; flex:0 0 auto; transition:background .14s, border-color .14s;
}
.sw i{
  position:absolute; top:2px; left:2px; width:18px; height:18px; background:var(--dimmer);
  transition:left .14s ease-out, background .14s;
}
.sw.on{ background:rgba(255,211,77,.18); border-color:var(--gold); }
.sw.on i{ left:28px; background:var(--gold); box-shadow:0 0 12px rgba(255,211,77,.6); }

/* selector (límite de fps, modo daltónico) */
.cfg-sel{
  font:inherit; font-size:12px; color:var(--text); background:var(--void1);
  border:1px solid var(--line); border-radius:0; padding:5px 8px; min-width:130px; cursor:pointer;
}
.cfg-sel:focus{ outline:none; border-color:var(--gold); }
.cfg-sel option{ background:var(--void1); color:var(--text); }

/* slider */
.sl{ display:flex; align-items:center; gap:10px; }
.sl output{ width:3ch; text-align:right; font-size:12px; color:var(--dim); }
.sl input[type=range]{
  -webkit-appearance:none; appearance:none; width:130px; height:8px;
  background:linear-gradient(90deg, var(--gold-deep), var(--line)); border:1px solid var(--line);
}
.sl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:20px; background:var(--gold);
  border:2px solid var(--void0); cursor:pointer;
}
.sl input[type=range]::-moz-range-thumb{
  width:14px; height:20px; background:var(--gold); border:2px solid var(--void0); border-radius:0; cursor:pointer;
}

.cfg-lang{ display:inline-flex; }

.mp-foot{
  display:flex; gap:10px; padding:14px 20px calc(16px + var(--safe-b));
  border-top:2px solid var(--line); background:rgba(7,11,24,.9);
}
.mp-foot .btn{ flex:1 1 0; height:44px; font-size:15px; }

/* personalizar: la cabeza arriba, los campos abajo */
.mp-custom{ gap:14px; }
.mp-custom .face-picker{ width:100%; }
.mp-custom .fp-view{ width:100%; height:clamp(150px,22vh,210px); }
/* La lista de rasgos cede altura para que el color entre sin scrollear el panel. */
.mp-custom .fp-rows{ max-height:clamp(120px,24vh,220px); }
/* El panel ya dice "Tu personaje" en la cabecera: el título interno sobraba. */
.mp-custom .fp-head .eyebrow{ display:none; }
.mp-custom .fp-head{ justify-content:flex-end; }
.mp-fields{ display:flex; flex-direction:column; gap:12px; }

/* Los sliders de la cara vienen del navegador: acá se visten como los del
   juego, que es lo único que separa un panel propio de un formulario. */
.menu-panel input[type=range]{
  -webkit-appearance:none; appearance:none; height:6px;
  background:linear-gradient(90deg, var(--gold-deep), var(--line));
  border:1px solid var(--line);
}
.menu-panel input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:16px; background:var(--gold);
  border:2px solid var(--void0); cursor:pointer;
}
.menu-panel input[type=range]::-moz-range-thumb{
  width:12px; height:16px; background:var(--gold); border:2px solid var(--void0);
  border-radius:0; cursor:pointer;
}
.menu-panel .fp-rows label{ padding:1px 0; }
.menu-panel .fp-rows input[type=color]{ border:1px solid var(--line); }

/* Con un panel abierto, la esquina no compite con sus botones (ni los tapa). */
.menu-root.panel-open .menu-corner,
.menu-root.panel-open .menu-build{ opacity:0; visibility:hidden; transition:opacity .15s linear, visibility .15s; }

/* ---------------------------------------------------------------- créditos */
.cr{ gap:10px; }
.cr-item{ display:flex; flex-direction:column; gap:3px; }
.cr-item b{ font-weight:700; font-size:13px; }
.cr-item span{ font-size:12px; color:var(--dim); }
.cr-item i{ font-style:normal; font-size:10px; color:var(--dimmer); letter-spacing:.03em; line-height:1.45; }

/* ------------------------------------------------------- notas del parche */
/* Lista de parches a la izquierda y el elegido a la derecha; cada sección
   lleva el color de su tipo en --k. */
.menu-root.panel-notes .menu-panel{ width:min(96vw, 880px); }

.pn{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:minmax(220px, 300px) 1fr; grid-template-rows:minmax(0, 1fr);
}
.pn-list{
  list-style:none; overflow:auto; position:relative; touch-action:pan-y;
  border-right:2px solid var(--line); background:rgba(4,7,18,.35);
}
.pn-list::-webkit-scrollbar, .pn-detail::-webkit-scrollbar{ width:8px; }
.pn-list::-webkit-scrollbar-thumb, .pn-detail::-webkit-scrollbar-thumb{ background:var(--line); }
.pn-cap{
  padding:12px 16px 10px; border-bottom:1px solid var(--line);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer);
}
.pn-item{
  position:relative; display:grid; grid-template-columns:2.2em 1fr; align-items:baseline;
  gap:4px 10px; width:100%; text-align:left;
  padding:11px 14px 11px 16px; border-bottom:1px solid rgba(43,58,99,.55);
  color:var(--dim); transition:background .12s linear, color .12s linear;
}
.pn-item:hover{ background:rgba(255,255,255,.04); color:var(--text); }
.pn-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.pn-item.on{
  color:#fff;
  background:linear-gradient(90deg, rgba(255,211,77,.16), rgba(255,211,77,.04) 60%, transparent);
}
.pn-item.on::before{
  content:''; position:absolute; left:0; top:6px; bottom:6px; width:4px;
  background:var(--gold); box-shadow:0 0 14px rgba(255,211,77,.7);
}
.pn-num{ grid-row:1 / span 3; font-size:17px; font-weight:700; letter-spacing:.04em; color:var(--dimmer); }
.pn-item.on .pn-num{ color:var(--gold); }
.pn-date{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dimmer); }
.pn-name{ font-size:13px; font-weight:700; line-height:1.3; }
.pn-chip{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }

.pn-detail{ overflow:auto; padding:18px 24px 26px; touch-action:pan-y; }
.pn-back{
  display:none; align-items:center; gap:6px; margin-bottom:14px; padding:6px 10px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line); background:rgba(255,255,255,.04);
}
.pn-back:hover{ color:#fff; border-color:var(--gold); }
.pn-eyebrow{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.pn-title{
  font-size:clamp(20px,2.4vw,28px); font-weight:700; line-height:1.12;
  margin:6px 0 12px; text-shadow:var(--shadow);
}
.pn-intro{
  font-size:13px; line-height:1.6; color:var(--dim);
  border-left:3px solid var(--gold); padding-left:12px;
}
.pn-sec{ margin-top:20px; }
.pn-tag{
  display:inline-block; padding:4px 9px;
  font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--void0); background:var(--k); box-shadow:3px 3px 0 rgba(0,0,0,.6);
}
.pn-sec ul{ list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:9px; }
.pn-sec li{ position:relative; padding-left:17px; font-size:13px; line-height:1.6; color:var(--text); }
.pn-sec li::before{ content:''; position:absolute; left:1px; top:.62em; width:6px; height:6px; background:var(--k); }
.pn-sec li b, .pn-intro b{ font-weight:700; color:#fff; }
.pn-k-new{ --k:var(--gold); }
.pn-k-party{ --k:var(--p6); }
.pn-k-play{ --k:var(--accent); }
.pn-k-look{ --k:var(--p7); }
.pn-k-music{ --k:var(--p4); }
.pn-k-bye{ --k:var(--danger); }
.pn-k-bye li{ color:var(--dim); }
.pn-fixes{
  margin-top:24px; padding-top:10px; border-top:1px dashed var(--line);
  font-size:11px; letter-spacing:.06em; color:var(--dimmer);
}

/* -------------------------------------------------------------- responsive */
@media (max-width:820px){
  .menu-side{ width:100%; justify-content:flex-start; padding-top:calc(24px + var(--safe-t)); }
  .menu-panel{ width:100%; border-left:0; }
  .menu-build{ display:none; }
  /* Notas en una columna: la lista y, al tocar un parche, su detalle. */
  .menu-root.panel-notes .menu-panel{ width:100%; }
  .pn{ grid-template-columns:1fr; }
  .pn-list{ border-right:0; }
  .pn.reading .pn-list, .pn:not(.reading) .pn-detail{ display:none; }
  .pn-back{ display:inline-flex; }
}
@media (max-height:520px){
  .menu-side .logo-sub{ display:none; }
  .menu-keys{ display:none; }
}

/* El contador de ping/fps se puede apagar desde Configuración. */
body.hide-netstat #netstat{ display:none !important; }

/* En el menú principal la esquina superior derecha queda para el panel. */
body.menu-open #netstat,
body.menu-open #langbar{ display:none !important; }

/* --------------------------------------------- menú de Esc (ui/pausemenu.js) */
/* La misma lista y los mismos paneles, sobre el minijuego. Arriba del HUD, los
   toasts y la píldora de idioma; abajo de la cortina (.wipe, 45). */
#pausemenu{ position:fixed; inset:0; z-index:40; }
#pausemenu[hidden]{ display:none; }
/* Más parejo que el del título: atrás hay un juego, no una escena de fondo. */
.pause-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(4,7,18,.94) 0%, rgba(4,7,18,.84) 32%, rgba(4,7,18,.6) 62%, rgba(4,7,18,.5) 100%);
}
/* La tabla del final necesita más ancho que la configuración. */
.pause-menu.panel-stats .menu-panel{ width:min(96vw, 640px); }
.pm-note{ font-size:10px; letter-spacing:.06em; color:var(--dimmer); }