/*
 * D-OPCIONES-REDISENO (mesa claude/_CLAUDE_D_OPCIONES_REDISENO_MESA.md) — Opciones, en los dos estilos.
 * Marcado en src/modules/options.ts (vistaOpciones). Sin Tailwind (D-OPC-10): sólo estas clases opc-* y las piezas ui-*.
 *   A · Escritorio del escriba  — pestañas a la izquierda, banda y panel en el centro, explicación a la derecha.
 *   B · Tablero de estandartes  — estandartes arriba, banda a todo lo ancho, tarjetas en rejilla, explicación abajo.
 * Los esqueletos ([data-esqueleto]) los coloca colocarPiezas (src/ui/estilos.ts); los huecos son display:contents y cada
 * pieza lleva su grid-area. Trampa: v2-theme pone la familia a todo con `* { … !important }`: las fuentes van con !important.
 */

/* ───────── Letra propia de Opciones (A-1): EB Garamond por defecto; Pruebas enseña las candidatas ───────── */
.options-rpg-shell {
  --opc-letra: "EB Garamond", Georgia, "Times New Roman", var(--rpg-emoji-stack, "Segoe UI Emoji"), serif;
  --opc-oro: #e9c46a;
  --opc-oro-luz: #fff3c4;
  --opc-tinta: #efe3c6;
  --opc-tinta-2: #b9a986;
  --opc-papel: linear-gradient(180deg, rgba(24, 18, 9, 0.9), rgba(10, 8, 5, 0.94));
  --opc-vista-w: 96px;
  font-size: 15px;
  color: var(--opc-tinta);
}
.options-rpg-shell.options-rpg-shell,
.options-rpg-shell.options-rpg-shell * { font-family: var(--opc-letra) !important; }

/* ───────── Encaje: la raíz llena el cuerpo del sitio; los esqueletos son rejillas ───────── */
.sitio-raiz[data-sitio="opciones"] .sitio-cuerpo { min-height: 0; }
.options-rpg-shell.opc-rejilla { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.options-rpg-shell [data-esqueleto][hidden], .options-rpg-shell .opc-almacen { display: none !important; }
.opc-esqueleto { flex: 1; min-height: 0; display: grid; gap: 12px; }
.opc-hueco { display: contents; }
.opc-esqueleto .opc-pestanas { grid-area: pestanas; }
.opc-esqueleto .opc-banda { grid-area: banda; }
.opc-esqueleto .opc-contenido { grid-area: paneles; }
.opc-esqueleto .opc-explica { grid-area: explica; }

/* A · Escritorio del escriba */
.opc-esqueleto--escritorio {
  grid-template-columns: 196px minmax(0, 1fr) 280px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "pestanas banda explica" "pestanas paneles explica";
}
/* B · Tablero de estandartes */
.opc-esqueleto--tablero {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: "pestanas" "banda" "paneles" "explica";
  gap: 10px;
}

/* ───────── Pestañas ───────── */
.opc-pestanas { display: flex; min-width: 0; }
.opc-pestana {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; text-align: left;
  color: var(--opc-tinta); background: transparent; border: 1px solid transparent;
  transition: color var(--ui-transicion), background var(--ui-transicion), border-color var(--ui-transicion), transform var(--ui-transicion);
}
.opc-pestana__texto { font-size: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.opc-pestana:hover { color: var(--opc-oro-luz); }
.opc-pestana:focus-visible { outline: 2px solid var(--opc-oro); outline-offset: 2px; }

/* A: columna de placas, la activa en oro */
.opc-esqueleto--escritorio .opc-pestanas {
  flex-direction: column; gap: 5px; padding: 12px 10px; border-radius: 6px;
  background: var(--opc-papel); border: 1px solid var(--ui-linea); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35);
}
.opc-esqueleto--escritorio .opc-pestana { padding: 8px 10px; border-radius: 5px; }
.opc-esqueleto--escritorio .opc-pestana:hover { border-color: rgba(233, 196, 106, 0.45); background: rgba(60, 44, 12, 0.3); }
.opc-esqueleto--escritorio .opc-pestana--activa,
.opc-esqueleto--escritorio .opc-pestana--activa:hover {
  color: #1b1406; border-color: var(--opc-oro);
  background: linear-gradient(180deg, #ffe7a1, #c8963a); box-shadow: 0 0 14px rgba(233, 196, 106, 0.35);
}

/* B: estandartes de tela colgados de la cabecera; el activo baja y brilla */
.opc-esqueleto--tablero .opc-pestanas { flex-direction: row; justify-content: center; gap: 8px; padding-top: 2px; }
.opc-esqueleto--tablero .opc-pestana {
  flex: 0 1 140px; flex-direction: column; justify-content: flex-start; gap: 6px; padding: 10px 8px 22px; text-align: center;
  background: linear-gradient(180deg, #5a1e14, #36110b 70%, #210906); border-color: rgba(233, 196, 106, 0.4);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 50% 100%, 0 86%);
}
/* la barra de oro de la que cuelga (::after: ::before es el destello de ui-destello) */
.opc-esqueleto--tablero .opc-pestana::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 0; height: 6px; border-radius: 3px;
  background: linear-gradient(180deg, #ffe7a1, #9a6a1c);
}
.opc-esqueleto--tablero .opc-pestana__texto { font-size: 14px; }
.opc-esqueleto--tablero .opc-pestana--activa {
  transform: translateY(6px); color: var(--opc-oro-luz);
  background: linear-gradient(180deg, #8a2c1b, #561a10 70%, #2c0d07);
  box-shadow: 0 0 18px rgba(233, 196, 106, 0.45);
}

/* El icono pintado (familia opciones_*) con su hueco: el emoji de hoy dentro de un marco */
.opc-icono {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: var(--opc-icono-tam, 32px); height: var(--opc-icono-tam, 32px); border-radius: 7px; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(243, 223, 160, 0.22), rgba(10, 8, 5, 0.75) 72%);
  border: 1px solid rgba(200, 168, 96, 0.5); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.75);
}
.opc-icono__respaldo { font-size: calc(var(--opc-icono-tam, 32px) * 0.55); line-height: 1; }
.opc-icono__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.opc-esqueleto--escritorio .opc-pestana__icono { --opc-icono-tam: 30px; }
.opc-esqueleto--tablero .opc-pestana__icono { --opc-icono-tam: 40px; }

/* ───────── Banda de la pestaña (G3 en pausa: degradado cálido mientras no haya banda pintada) ───────── */
.opc-banda {
  position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 18px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(200, 168, 96, 0.35);
  background:
    linear-gradient(90deg, rgba(10, 8, 5, 0.92) 0%, rgba(10, 8, 5, 0.6) 55%, rgba(10, 8, 5, 0.25) 100%),
    var(--opc-banda, radial-gradient(ellipse at 80% 30%, rgba(200, 140, 50, 0.35), transparent 60%)),
    linear-gradient(120deg, #2a1a0b, #120c06 60%, #1c120a);
  background-size: cover; background-position: center 40%;
}
.opc-esqueleto--escritorio .opc-banda { min-height: 76px; }
.opc-esqueleto--tablero .opc-banda { min-height: 96px; justify-content: center; text-align: center; }
.opc-banda__icono .opc-icono { --opc-icono-tam: 50px; }
.opc-banda__titulo { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--opc-oro-luz);
  text-shadow: 0 0 12px rgba(233, 196, 106, 0.3), 0 2px 0 #000; }
.opc-banda__lema { margin: 2px 0 0; font-size: 15px; font-style: italic; color: var(--opc-tinta-2); }

/* ───────── El panel ───────── */
.opc-contenido {
  min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 16px; border-radius: 6px;
  scrollbar-width: thin; scrollbar-color: rgba(200, 168, 96, 0.4) transparent;
}
.opc-esqueleto--escritorio .opc-contenido { background: var(--opc-papel); border: 1px solid var(--ui-linea); }
.opc-esqueleto--tablero .opc-contenido { background: linear-gradient(180deg, rgba(14, 10, 6, 0.9), rgba(8, 6, 4, 0.94)); border: 1px solid rgba(200, 168, 96, 0.35);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.4); }
.opc-panel[hidden] { display: none !important; }
.opc-rejilla-ajustes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-content: start; }
.opc-esqueleto--tablero .opc-rejilla-ajustes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opc-ajuste--ancho { grid-column: 1 / -1; }
.opc-ajuste--alto { grid-row: span 2; }
/* B: las tarjetas en cinta oscura (sin el marco de oro de A) */
.opc-esqueleto--tablero .ui-ajuste { background: linear-gradient(180deg, rgba(34, 14, 10, 0.88), rgba(14, 8, 6, 0.92)); border-color: rgba(233, 196, 106, 0.3); }
.opc-esqueleto--tablero .ui-ajuste::before { border-color: rgba(233, 196, 106, 0.12); }
.opc-esqueleto--tablero .ui-ajuste .ui-esquina { display: none; }

/* Controles sueltos de Opciones */
.opc-select {
  min-width: 0; max-width: 100%; padding: 6px 30px 6px 10px; border-radius: 5px; cursor: pointer; font-size: 14px;
  color: var(--opc-tinta); border: 1px solid #5b4626; appearance: none; -webkit-appearance: none;
  background: linear-gradient(45deg, transparent 50%, var(--opc-oro) 50%) right 14px center / 6px 6px no-repeat,
              linear-gradient(135deg, var(--opc-oro) 50%, transparent 50%) right 9px center / 6px 6px no-repeat,
              linear-gradient(180deg, #1c150b, #120d07);
}
.opc-select:focus-visible { outline: 2px solid var(--opc-oro); outline-offset: 2px; }
.opc-select option { background: #140f08; color: var(--opc-tinta); }
.opc-campos { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.opc-campo-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--opc-tinta-2); }
.opc-campo { padding: 5px 8px; border-radius: 5px; border: 1px solid #5b4626; background: #120d07; color: var(--opc-tinta); font-size: 14px; }
.opc-campo--numero { width: 96px; }
.opc-boton-pequeno { align-self: flex-start; padding: 5px 12px; font-size: 13px; text-transform: none; letter-spacing: 0.02em; }
.options-rpg-shell .ui-boton { text-transform: none; letter-spacing: 0.03em; font-size: 14px; font-weight: 600; }
.opc-boton--aviso { color: #ffd9cf; border-color: rgba(220, 90, 60, 0.55); }
.opc-enlace { padding: 0; border: 0; background: none; cursor: pointer; color: var(--opc-oro); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.opc-enlace:hover { color: var(--opc-oro-luz); }
.opc-banderas { display: flex; gap: 8px; }
.opc-bandera {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 6px; cursor: pointer; font-size: 18px;
  color: var(--opc-tinta); background: rgba(0, 0, 0, 0.4); border: 1px solid #5b4626;
}
.opc-bandera span { font-size: 14px; }
.opc-bandera--activa { border-color: var(--opc-oro); box-shadow: 0 0 0 1px var(--opc-oro), 0 0 12px rgba(233, 196, 106, 0.35); }

/* Efectos visuales: tres llamas (grande, mediana, apagada) en el selector */
.opc-niveles .ui-selector__opcion { display: inline-flex; align-items: center; gap: 6px; }
.opc-llama { display: inline-block; width: 12px; height: 14px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 70%, #fff3c4, #f0a040 45%, #b0401a 80%); }
.opc-llama--suaves { transform: scale(0.75); opacity: 0.85; }
.opc-llama--minimos { transform: scale(0.6); background: radial-gradient(circle at 50% 70%, #6a5a44, #3c3226 70%); }

/* Tarjetas con vista previa en grupo */
.opc-tarjetas { display: grid; gap: 10px; width: 100%; }
.opc-tarjetas--2 { grid-template-columns: repeat(2, minmax(0, 170px)); }
.opc-tarjetas--3 { grid-template-columns: repeat(3, minmax(0, 150px)); }
.opc-tarjeta__nombre { font-size: 13px; text-align: center; color: var(--opc-tinta); }
.opc-letra-diario__muestra { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px; border-radius: 4px; font-size: 17px; color: #3a2a12;
  background: linear-gradient(180deg, #efe0bd, #d9c398); }
.options-rpg-shell .opc-letra-diario--mano .opc-letra-diario__muestra { font-family: "IM Fell English", "Times New Roman", serif !important; font-style: italic; }
.options-rpg-shell .opc-letra-diario--normal .opc-letra-diario__muestra { font-family: var(--ui-fuente-texto) !important; font-size: 14px; }

/* ───────── Aspecto: subpestañas y filas «captura A · nombre · captura B» (A-1) ───────── */
.opc-subpestanas { flex-wrap: wrap; margin-bottom: 10px; }
.options-rpg-shell .opc-subpestana { padding: 6px 14px; font-size: 14px; text-transform: none; letter-spacing: 0.03em; }
.opc-sub[hidden] { display: none !important; }
/* D-PULIDOS-31 D-P31-3 — fila compacta «nombre · captura A · captura B», dos pantallas por fila; el nombre, pegado a sus capturas */
.opc-estilos-cabeza, .opc-estilos-filas {
  display: grid; column-gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr) var(--opc-vista-w) var(--opc-vista-w));
}
.opc-estilos-filas > .opc-estilo-fila:nth-child(2n) > .opc-estilo-fila__nombre { padding-left: 14px; }
/* donde no caben dos con su nombre entero (la ventana de antes del mundo: «Ayuntamiento» se cortaba), una pantalla por fila */
.opc-sub { container-type: inline-size; }
@container (max-width: 620px) {
  .opc-estilos-cabeza, .opc-estilos-filas { grid-template-columns: minmax(0, 1fr) var(--opc-vista-w) var(--opc-vista-w); }
  .opc-estilos-cabeza span:nth-child(n + 4) { display: none; }
  .opc-estilos-filas > .opc-estilo-fila:nth-child(2n) > .opc-estilo-fila__nombre { padding-left: 0; }
}
.opc-estilos-filas { row-gap: 8px; }
.opc-estilos-cabeza { margin-bottom: 4px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ui-acento); text-align: center; }
.opc-estilo-fila { display: contents; }
.opc-estilo-fila__nombre { align-self: center; text-align: right; font-size: 15px; line-height: 1.2; color: var(--opc-tinta); }
.opc-estilo-vista { padding: 3px; }
.opc-esqueleto--tablero { --opc-vista-w: 128px; }

/* ───────── Sonido: la consola del juglar ───────── */
.opc-sonido { display: flex; flex-direction: column; gap: 10px; }
.opc-mezcla { display: flex; flex-direction: column; padding: 6px 14px; }
.opc-canal {
  display: grid; align-items: center; gap: 12px; padding: 9px 2px;
  grid-template-columns: 40px minmax(130px, 0.9fr) minmax(0, 1.6fr) auto 40px;
  border-bottom: 1px solid rgba(200, 168, 96, 0.14);
}
.opc-canal:last-of-type { border-bottom: 0; }
.opc-canal__icono { --opc-icono-tam: 38px; }
.opc-canal__texto { display: flex; flex-direction: column; min-width: 0; }
.opc-canal__nombre { font-size: 17px; font-weight: 600; letter-spacing: 0.04em; color: var(--opc-oro-luz); }
.opc-canal__linea { font-size: 13px; color: var(--opc-tinta-2); line-height: 1.25; }
.opc-canal__pct { text-align: right; font-variant-numeric: tabular-nums; font-size: 16px; color: var(--opc-oro); }
.opc-callar {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 17px; line-height: 1;
  border: 1px solid #5b4626; background: radial-gradient(circle at 50% 35%, #2c2216, #120d07);
}
.opc-callar[aria-pressed="true"] { border-color: rgba(220, 90, 60, 0.7); box-shadow: 0 0 10px rgba(220, 90, 60, 0.35); }
.opc-callar:focus-visible { outline: 2px solid var(--opc-oro); outline-offset: 2px; }

/* ───────── Ayuda: el hada y los lanzadores ───────── */
.opc-ayuda { display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-areas: "hada ajustes" "hada lanzadores"; gap: 12px; align-items: start; }
.opc-hada { grid-area: hada; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.opc-hada img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 4px; }
.opc-hada figcaption { font-size: 14px; font-style: italic; text-align: center; color: var(--opc-tinta-2); }
.opc-ayuda__ajustes { grid-area: ajustes; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opc-lanzadores { grid-area: lanzadores; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opc-lanzador { display: flex; align-items: flex-start; gap: 10px; padding: 12px; text-align: left; cursor: pointer; color: var(--opc-tinta);
  transition: border-color var(--ui-transicion), box-shadow var(--ui-transicion); }
.opc-lanzador:hover, .opc-lanzador:focus-visible { border-color: var(--ui-acento-suave); box-shadow: 0 0 16px rgba(200, 168, 96, 0.2); outline: none; }
.opc-lanzador .ui-esquina { width: 16px; height: 16px; }
.opc-lanzador__icono { font-size: 22px; line-height: 1; }
.opc-lanzador__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.opc-lanzador__titulo { font-size: 16px; font-weight: 600; color: var(--opc-oro-luz); }
.opc-lanzador__linea { font-size: 13px; color: var(--opc-tinta-2); line-height: 1.3; }

/* ───────── Cuenta: héroe y cuenta ───────── */
.opc-cuenta { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.opc-columna { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.opc-columna__titulo { margin: 0; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--opc-oro); }
/* D-PULIDOS-31 D-P31-2 — fuera el «Retrato del héroe» (.opc-avatar*): la columna «Tu héroe» se queda con el perfil en farmeo */
.opc-farmeo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 6px; border: 1px dashed rgba(200, 168, 96, 0.35); }
.opc-farmeo__rotulo { font-size: 14px; color: var(--opc-tinta-2); }
.opc-farmeo__perfil { font-size: 15px; font-weight: 600; color: var(--opc-oro-luz); }
.opc-salir { align-self: flex-start; color: #ffe2d8; border-color: rgba(220, 90, 60, 0.7); background: linear-gradient(180deg, #5a1a10, #2c0b06); }
.opc-salir:hover { border-color: #f08060; }

/* ───────── Pruebas ───────── */
.opc-pruebas { display: flex; flex-direction: column; gap: 8px; }
.opc-prueba { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; border: 1px solid rgba(200, 168, 96, 0.3); background: rgba(0, 0, 0, 0.35); }
.opc-prueba__rotulo { min-width: 12rem; font-weight: 600; color: var(--opc-tinta); }
.opc-prueba__nota { font-size: 13px; color: var(--opc-tinta-2); }
.opc-muestras { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 6px; border: 1px solid rgba(200, 168, 96, 0.3); }
.opc-muestras-letra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opc-muestra-letra {
  display: flex; flex-direction: column; gap: 6px; padding: 12px; text-align: left; cursor: pointer; border-radius: 6px;
  color: var(--opc-tinta); border: 1px solid #4a3920; background: var(--opc-papel);
}
.options-rpg-shell .opc-muestra-letra, .options-rpg-shell .opc-muestra-letra * { font-family: var(--opc-letra-muestra) !important; }
.opc-muestra-letra--activa { border-color: var(--opc-oro); box-shadow: 0 0 0 1px var(--opc-oro), 0 0 14px rgba(233, 196, 106, 0.35); }
.opc-muestra-letra__nombre { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ui-acento); }
.opc-muestra-letra__titulo { font-size: 20px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--opc-oro-luz); }
.opc-muestra-letra__texto { font-size: 15px; line-height: 1.35; }
.opc-muestra-letra__cifras { font-size: 15px; color: var(--opc-oro); }

/* ───────── La explicación (D-OPC-8): columna en A, tira en B ───────── */
.opc-explica { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow: hidden; padding: 16px; }
.opc-explica__emblema { width: 56px; height: 56px; align-self: center; }
.opc-explica__vista { display: block; }
.opc-explica__vista[hidden] { display: none; }
.opc-explica__titulo { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: 0.06em; color: var(--opc-oro-luz); text-align: center; }
.opc-explica__texto { margin: 0; font-size: 15px; line-height: 1.45; color: var(--opc-tinta); overflow-y: auto; }
.opc-explica__ambito { margin: 0; font-size: 13px; font-style: italic; color: var(--ui-acento); }
.opc-explica__ambito:empty { display: none; }
.opc-esqueleto--tablero .opc-explica {
  flex-direction: row; align-items: center; gap: 12px; padding: 8px 14px; min-height: 52px;
  background: linear-gradient(90deg, rgba(54, 17, 11, 0.92), rgba(20, 9, 6, 0.92)); border-color: rgba(233, 196, 106, 0.35);
}
.opc-esqueleto--tablero .opc-explica .ui-esquina,
.opc-esqueleto--tablero .opc-explica__vista { display: none !important; }
.opc-esqueleto--tablero .opc-explica__emblema { width: 32px; height: 32px; flex: none; }
.opc-esqueleto--tablero .opc-explica__titulo { flex: none; font-size: 16px; text-align: left; }
.opc-esqueleto--tablero .opc-explica__texto { flex: 1; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.opc-esqueleto--tablero .opc-explica__ambito { flex: none; }

/* ───────── 1366×768 (escenario de unos 530 px útiles): todo un poco más prieto ───────── */
@media (max-width: 1500px), (max-height: 860px) {
  .options-rpg-shell { font-size: 14px; --opc-vista-w: 84px; }
  .opc-esqueleto--escritorio { grid-template-columns: 172px minmax(0, 1fr) 232px; gap: 10px; }
  .opc-esqueleto--escritorio .opc-banda { min-height: 62px; padding: 8px 14px; }
  .opc-esqueleto--tablero .opc-banda { min-height: 70px; padding: 8px 14px; }
  .opc-esqueleto--tablero { --opc-vista-w: 104px; }
  .opc-banda__icono .opc-icono { --opc-icono-tam: 40px; }
  .opc-banda__titulo { font-size: 20px; }
  .opc-banda__lema { font-size: 14px; }
  .opc-pestana__texto { font-size: 14px; }
  .opc-esqueleto--tablero .opc-pestana { padding: 8px 6px 18px; }
  .opc-esqueleto--tablero .opc-pestana__icono { --opc-icono-tam: 32px; }
  .opc-contenido { padding: 10px 12px; }
  .ui-ajuste { padding: 9px 11px; }
  .options-rpg-shell .ui-ajuste__linea { font-size: 12px; }
  .opc-canal { padding: 6px 2px; }
  .opc-hada img { aspect-ratio: 1; }
  .opc-ayuda { grid-template-columns: 130px minmax(0, 1fr); }
  .opc-explica { padding: 12px; }
  .opc-explica__emblema { width: 44px; height: 44px; }
}

/* ───────── Estrecho / móvil (<1000 px): pestañas en una fila de iconos, una columna, la explicación como tira ───────── */
@media (max-width: 1000px) {
  .opc-esqueleto--escritorio, .opc-esqueleto--tablero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "pestanas" "banda" "paneles" "explica";
  }
  .opc-esqueleto .opc-pestanas { flex-direction: row; justify-content: flex-start; gap: 6px; padding: 4px; overflow-x: auto; clip-path: none; }
  .opc-esqueleto .opc-pestana { flex: none; padding: 4px; min-width: 44px; min-height: 44px; justify-content: center; clip-path: none; transform: none; }
  .opc-esqueleto .opc-pestana__texto { display: none; }
  .opc-esqueleto .opc-pestana::after { display: none; }
  .opc-esqueleto .opc-banda { min-height: 0; padding: 8px 12px; }
  .opc-rejilla-ajustes, .opc-esqueleto--tablero .opc-rejilla-ajustes, .opc-ayuda__ajustes, .opc-lanzadores, .opc-cuenta, .opc-muestras-letra { grid-template-columns: minmax(0, 1fr); }
  .opc-ayuda { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ajustes" "lanzadores" "hada"; }
  .opc-hada { display: none; }
  .opc-estilos-cabeza, .opc-estilos-filas { grid-template-columns: minmax(0, 1fr) var(--opc-vista-w) var(--opc-vista-w); }
  .opc-estilos-filas > .opc-estilo-fila:nth-child(2n) > .opc-estilo-fila__nombre { padding-left: 0; }
  .opc-estilos-cabeza span:nth-child(n + 4) { display: none; }
  .opc-canal { grid-template-columns: 34px minmax(0, 1fr) auto 36px; }
  .opc-canal__texto { grid-column: 2 / span 3; }
  .opc-canal .ui-deslizador { grid-column: 1 / span 3; }
  .opc-canal__linea { display: none; }
  .opc-esqueleto .opc-explica { flex-direction: row; align-items: center; padding: 8px 12px; }
  .opc-esqueleto .opc-explica__vista, .opc-esqueleto .opc-explica__emblema, .opc-esqueleto .opc-explica .ui-esquina { display: none !important; }
  .opc-esqueleto .opc-explica__titulo { display: none; }
  .opc-esqueleto .opc-explica__texto { font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .opc-tarjetas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opc-tarjetas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ───────── La ventana de antes del mundo (D-SEL3-2 con la vista única, D-OPC-9) ───────── */
.opc-previas-capa { position: fixed; inset: 0; z-index: 10070; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.62); }
.opc-previas {
  width: min(960px, 100%); height: min(620px, 92vh); display: flex; flex-direction: column; gap: 10px; padding: 16px 18px;
  color: var(--ui-tinta-0, #f1e3c4); background: linear-gradient(180deg, rgba(20, 15, 8, 0.98), rgba(10, 8, 5, 0.98));
  border: 1px solid rgba(200, 168, 96, 0.55); border-radius: 10px;
}
.opc-previas__cabecera { display: flex; align-items: center; gap: 10px; }
.opc-previas__titulo { flex: 1; margin: 0; font-family: "Cinzel", Georgia, serif !important; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase; color: #ffe7a1; }
.opc-previas__cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.opc-previas .opc-esqueleto--escritorio { grid-template-columns: 170px minmax(0, 1fr) 230px; }

/* ───────── Efectos mínimos y movimiento reducido ───────── */
body.ui-efectos-reducidos :is(.opc-pestana, .opc-lanzador) { transition: none; }
body.ui-efectos-reducidos .opc-esqueleto--tablero .opc-pestana--activa { box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.opc-pestana, .opc-lanzador) { transition: none; }
}