/* Menú de pausa (pausa.mjs, plan 062 §4t): por encima de todo el juego (CEF 20, editor 27, chat 28–29, diálogos
 * 30–31) y por debajo del lanzador (40) y del aviso «gira el móvil» (50). Paleta del lanzador (launcher.css) y
 * tarjeta de los diálogos: gunmetal, acero y el degradado amarillo-naranja de SRP. A la izquierda la marca, el estado
 * AFK y continuar / salir; a la derecha los ajustes por pestañas. Cabe en un móvil apaisado de 360 px de alto. */

#pausa {
  position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box; color: var(--srp-white); font: 15px/1.45 Muller, Roboto, system-ui, sans-serif;
  background: radial-gradient(120% 100% at 50% 40%, rgba(12, 14, 16, .5), rgba(12, 14, 16, .88));
  user-select: none; -webkit-user-select: none; animation: pausa-velo .18s ease-out;
}
#pausa[hidden] { display: none; }
/* El desenfoque se recalcula con cada fotograma del juego: solo con ratón (PC), no en los móviles */
@media (hover: hover) and (pointer: fine) { #pausa { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } }

.pausa-tarjeta {
  display: grid; grid-template-columns: 250px minmax(0, 1fr); width: min(780px, 100%); height: min(470px, 100%);
  overflow: hidden; outline: none; background: var(--srp-gunmetal); border: 1px solid var(--srp-steel-16);
  border-radius: var(--card-radius); box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
  animation: pausa-entrar .24s cubic-bezier(.2, .8, .2, 1);
}

/* ---- columna de la marca ---- */
.pausa-lado {
  display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 20px; border-right: 1px solid var(--srp-steel-12);
  background: linear-gradient(165deg, rgba(255, 201, 60, .12), rgba(255, 106, 0, .04) 40%, transparent 70%), var(--srp-black-35);
}
.pausa-marca { display: flex; align-items: center; gap: 12px; }
.pausa-marca img { width: 40px; height: 40px; filter: drop-shadow(0 4px 12px rgba(255, 106, 0, .4)); }
.pausa-marca b { display: block; font-size: 17px; letter-spacing: .02em; }
.pausa-marca span { display: block; font-size: 12.5px; color: var(--srp-steel); }
.pausa-afk {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  font-size: 13px; color: var(--srp-warning); background: rgba(255, 178, 55, .12); border: 1px solid rgba(255, 178, 55, .3);
}
.pausa-afk b { letter-spacing: .1em; }
.pausa-afk span { color: var(--srp-white-82); font-variant-numeric: tabular-nums; }
.pausa-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--srp-warning); animation: pausa-latido 1.6s ease-out infinite; }
.pausa-nota { margin: 0; font-size: 12.5px; color: var(--srp-steel); }
.pausa-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.pausa-pista { margin: 0; text-align: center; font-size: 11.5px; color: var(--srp-steel-80); }
.pausa-pista kbd { padding: 1px 6px; border-radius: 5px; font: inherit; border: 1px solid var(--srp-steel-25); }
@media (pointer: coarse) { .pausa-pista { display: none; } }

/* ---- botones (los del lanzador) ---- */
.pausa-btn {
  font: inherit; font-weight: 700; padding: 11px 18px; border-radius: 27px; cursor: pointer; color: var(--srp-white);
  background: var(--srp-gunmetal-70); border: 1px solid rgba(151, 162, 171, .3); transition: border-color .15s, filter .15s;
}
.pausa-btn:hover { border-color: rgba(255, 201, 60, .5); }
.pausa-btn.primario {
  color: var(--srp-black); border-color: transparent; box-shadow: 0 6px 18px rgba(255, 106, 0, .25);
  background: linear-gradient(90deg, var(--srp-primary), var(--srp-secondary));
}
.pausa-btn.primario:hover { filter: brightness(1.06); }
.pausa-btn.armado { color: var(--srp-danger-text); border-color: rgba(199, 44, 63, .55); background: rgba(199, 44, 63, .14); }
.pausa-btn.pequeno { align-self: flex-start; margin-top: 14px; padding: 7px 16px; font-size: 13px; }
.pausa-btn:focus-visible, .pausa-pestanas button:focus-visible, .pausa-opciones button:focus-visible { outline: 2px solid var(--srp-primary); outline-offset: 2px; }

/* ---- ajustes ---- */
.pausa-ajustes { display: flex; flex-direction: column; min-height: 0; }
.pausa-pestanas { display: flex; gap: 18px; padding: 14px 22px 0; border-bottom: 1px solid var(--srp-steel-12); }
.pausa-pestanas button {
  font: inherit; font-size: 14px; font-weight: 700; padding: 8px 2px 10px; margin-bottom: -1px; cursor: pointer;
  color: var(--srp-steel); background: none; border: 0; border-bottom: 2px solid transparent;
}
.pausa-pestanas button[aria-selected="true"] { color: var(--srp-primary); border-bottom-color: var(--srp-primary); }
.pausa-panel {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
  padding: 4px 22px 18px; scrollbar-width: thin; scrollbar-color: var(--srp-steel-25) transparent;
}
.pausa-panel[hidden] { display: none; }
.pausa-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--srp-steel-12); }
label.pausa-fila { cursor: pointer; }
.pausa-texto { min-width: 0; }
.pausa-texto b { display: block; font-size: 14.5px; font-weight: 600; }
.pausa-texto span { display: block; font-size: 12px; color: var(--srp-steel); }
.pausa-seccion { margin: 14px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--srp-steel); }

/* Selector segmentado */
.pausa-opciones { display: flex; flex-shrink: 0; gap: 2px; padding: 3px; border-radius: 999px; background: var(--srp-black-35); border: 1px solid var(--srp-steel-16); }
.pausa-opciones button {
  font: inherit; font-size: 13px; font-weight: 600; min-width: 44px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  color: var(--srp-white-82); background: none; border: 0; transition: color .15s;
}
.pausa-opciones button:hover { color: var(--srp-white); }
.pausa-opciones button[aria-pressed="true"] {
  color: var(--srp-black); background: linear-gradient(90deg, var(--srp-primary), var(--srp-secondary)); box-shadow: 0 3px 10px rgba(255, 106, 0, .3);
}

/* Interruptor: pista amarilla encendido y acero apagado, como los del panel «Chat de voz» de la app */
.pausa-interruptor {
  appearance: none; -webkit-appearance: none; position: relative; flex-shrink: 0; width: 44px; height: 24px; margin: 0;
  border-radius: 12px; cursor: pointer; background: var(--srp-steel-25); transition: background .18s;
}
.pausa-interruptor::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--srp-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .18s;
}
.pausa-interruptor:checked { background: var(--srp-primary); }
.pausa-interruptor:checked::after { transform: translateX(20px); }
.pausa-interruptor:focus-visible { outline: 2px solid var(--srp-primary); outline-offset: 2px; }

/* Volumen: la parte llena con el degradado de SRP (--valor la pone pausa.mjs) */
.pausa-volumen { display: flex; flex-shrink: 0; align-items: center; gap: 10px; }
.pausa-volumen output { min-width: 42px; text-align: right; font-size: 13px; color: var(--srp-white-82); font-variant-numeric: tabular-nums; }
.pausa-volumen input {
  appearance: none; -webkit-appearance: none; width: 150px; height: 6px; margin: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(90deg, var(--srp-primary), var(--srp-secondary)) 0 / var(--valor, 100%) 100% no-repeat, var(--srp-steel-25);
}
.pausa-volumen input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--srp-white); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.pausa-volumen input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--srp-white); }
.pausa-volumen input:disabled, .pausa-interruptor:disabled { opacity: .45; cursor: default; }

.pausa-aviso {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 12.5px; color: var(--srp-warning);
  background: rgba(255, 178, 55, .1); border: 1px solid rgba(255, 178, 55, .25);
}
.pausa-aviso[hidden] { display: none; }

/* ---- controles de PC (controles-panel.mjs; también en la tarjeta del lanzador, con las filas de arriba) ---- */
.ctl-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) 124px 124px; align-items: center; gap: 8px; padding: 6px 0;
  font-size: 14px; border-bottom: 1px solid var(--srp-steel-12);
}
.ctl-tecla {
  font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 8px; border-radius: 8px; cursor: pointer;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--srp-white);
  background: var(--srp-black-35); border: 1px solid var(--srp-steel-16); transition: border-color .15s;
}
.ctl-tecla:hover { border-color: rgba(255, 201, 60, .5); }
.ctl-tecla:focus-visible { outline: 2px solid var(--srp-primary); outline-offset: 2px; }
.ctl-tecla.vacia { color: var(--srp-steel-80); }
.ctl-tecla.esperando {
  color: var(--srp-black); border-color: transparent; background: linear-gradient(90deg, var(--srp-primary), var(--srp-secondary));
}
.ctl-tecla:disabled { cursor: default; color: var(--srp-steel); border-color: var(--srp-steel-12); }
.ctl-nota { margin: 12px 0 0; font-size: 12px; color: var(--srp-steel); }
.ctl-plegable summary { padding: 12px 0 4px; font-size: 14.5px; font-weight: 600; cursor: pointer; color: var(--srp-primary); }

@keyframes pausa-velo { from { opacity: 0; } }
@keyframes pausa-entrar { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes pausa-latido { 0% { box-shadow: 0 0 0 0 rgba(255, 178, 55, .55); } 100% { box-shadow: 0 0 0 8px rgba(255, 178, 55, 0); } }
@media (prefers-reduced-motion: reduce) { #pausa, .pausa-tarjeta, .pausa-punto { animation: none; } }

/* Móvil apaisado (unos 360 px de alto) */
@media (max-height: 430px) {
  #pausa { padding: 8px; }
  .pausa-tarjeta { grid-template-columns: 215px minmax(0, 1fr); }
  .pausa-lado { gap: 9px; padding: 14px 16px; }
  .pausa-marca img { width: 32px; height: 32px; }
  .pausa-marca b { font-size: 15.5px; }
  .pausa-nota { font-size: 12px; }
  .pausa-btn { padding: 9px 16px; }
  .pausa-pestanas { padding: 8px 18px 0; }
  .pausa-panel { padding: 2px 18px 12px; }
  .pausa-fila { padding: 9px 0; }
  .pausa-volumen input { width: 120px; }
  .ctl-fila { grid-template-columns: minmax(0, 1fr) 108px 108px; padding: 4px 0; font-size: 13px; }
}
/* Ventana estrecha: una sola columna */
@media (max-width: 560px) {
  .pausa-tarjeta { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pausa-lado { border-right: 0; border-bottom: 1px solid var(--srp-steel-12); }
  .pausa-acciones { flex-direction: row; }
  .pausa-acciones .pausa-btn { flex: 1; }
  .ctl-fila { grid-template-columns: minmax(0, 1fr) 96px 96px; }
}