/* Demo del Cañón Rojo · las pantallas de FUERA de la partida (splash, título y sus Ajustes, crear personaje, carga, cuenta
   de la web, preguntas, fin de la demo y error: ui/pantallas.js, ui/crear.js) con el lenguaje de Brawl Stars (sale de
   diseno/mockups/fuentes/kit.css): texto gordo con contorno negro (Lilita One), botones con bisel, paneles redondeados.
   Móvil en horizontal con raíz de diseño 844 × 390 px CSS: 1 rem = 10 px ahí y todo escala con la pantalla.
   LA INTERFAZ DE LA PARTIDA no está aquí: es client/js/demo/interfaz/** con css/interfaz*.css (clases ix-). La interfaz
   clásica que vivía en esta hoja (HUD, botones de combate, placas, diálogo, tienda, bolsa, pausa) y sus hojas demo-red.css,
   demo-grupo.css y demo-mapa.css se borraron el 2026-10-02; de demo-red.css queda aquí lo de crear personaje y el hueco de
   la píldora EN VIVO. */
:root {
  --tinta: #0a0a1c; --tinta-suave: rgba(10, 10, 28, .72);
  --horda: #e8322a; --horda-sombra: #a8161c; --hierro: #5d6275; --oro: #ffc93a; --oro-sombra: #d8891c;
  --amarillo: #ffde3b; --verde: #7dff5a; --azul: #7cc6ff; --rojo: #ff6a5c; --morado: #d9a6ff; --naranja: #ffab3d; --gris: #b9c0d8;
  --guerrero: #e36b2c; --mago: #39b8ff; --picaro: #a35cff;
  --sa-l: env(safe-area-inset-left, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-t: env(safe-area-inset-top, 0px);
  font-size: clamp(7px, min(2.564vh, 1.185vw), 15px);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a0f14; color: #fff; font-family: 'Lilita One', 'Nunito', system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; }

.lienzo-juego { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.oculto { display: none !important; }
.desliza { overflow: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.ico { display: inline-block; width: 1em; height: 1em; line-height: 0; flex: none; }
.ico svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* texto de Brawl: blanco, contorno negro y sombra debajo */
.t, .bo, .pl-nombre, .pl-nv, .nivel-escudo, .titulo-logo, .cinta {
  -webkit-text-stroke: .19em var(--tinta); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--tinta);
}
.texto { font-family: 'Nunito', sans-serif; font-weight: 800; line-height: 1.3; }

/* ---------------------------------------------------------------- botones (r-boton del kit) */
.bo { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  height: 4rem; min-width: 4rem; padding: 0 1.8rem .3rem; border: .25rem solid var(--tinta); border-radius: 1.1rem;
  font-family: 'Lilita One', sans-serif; font-size: 1.7rem; color: #fff; white-space: nowrap; letter-spacing: .02em;
  --b1: #9ed3ff; --b2: #3f9dff; --b3: #1f78f0; --b4: #0f4bb8;
  background: linear-gradient(180deg, var(--b1) 0%, var(--b2) 42%, var(--b3) 100%);
  box-shadow: inset 0 -.5rem 0 var(--b4), inset 0 .2rem 0 rgba(255, 255, 255, .6), 0 .3rem 0 var(--tinta), 0 .6rem .8rem rgba(0, 0, 0, .28);
  transition: transform .06s; }
.bo::before { content: ''; position: absolute; z-index: -1; left: .5rem; right: .5rem; top: .3rem; height: 38%; border-radius: .8rem .8rem 1.2rem 1.2rem / .8rem .8rem .6rem .6rem; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .06)); pointer-events: none; }
.bo:active, .bo.pulsado { transform: translateY(.2rem); box-shadow: inset 0 -.2rem 0 var(--b4), inset 0 .2rem 0 rgba(255, 255, 255, .5), 0 .1rem 0 var(--tinta); }
.bo .ico { font-size: 2.2rem; filter: drop-shadow(0 .2rem 0 rgba(0, 0, 0, .35)); }
.bo small { font-size: .62em; opacity: .95; }
.bo.amarillo { --b1: #fff38a; --b2: #ffd81f; --b3: #ffb800; --b4: #d98200; }
.bo.verde { --b1: #c6ff8a; --b2: #6fe03a; --b3: #3bb81c; --b4: #1f7d12; }
.bo.rojo { --b1: #ffb09a; --b2: #ff5a45; --b3: #e3281c; --b4: #92110b; }

.bo.gris { --b1: #dfe4f2; --b2: #a3abc6; --b3: #7c84a2; --b4: #4a5170; }
.bo.oscuro { --b1: #6a7398; --b2: #434b72; --b3: #343b5e; --b4: #1d2240; }
.bo.blanco { --b1: #ffffff; --b2: #f2f6ff; --b3: #d8e2f7; --b4: #97a5c8; color: #1d2447; -webkit-text-stroke-width: 0; text-shadow: none; }
.bo.s { height: 3.2rem; min-width: 3.2rem; padding: 0 1.3rem .3rem; font-size: 1.35rem; border-radius: .9rem; box-shadow: inset 0 -.4rem 0 var(--b4), inset 0 .2rem 0 rgba(255, 255, 255, .6), 0 .25rem 0 var(--tinta), 0 .4rem .6rem rgba(0, 0, 0, .25); }
.bo.l { height: 5.2rem; padding: 0 2.6rem .5rem; font-size: 2.3rem; border-width: .3rem; border-radius: 1.4rem; box-shadow: inset 0 -.6rem 0 var(--b4), inset 0 .3rem 0 rgba(255, 255, 255, .6), 0 .4rem 0 var(--tinta), 0 .8rem 1rem rgba(0, 0, 0, .3); }
.bo.xl { height: 6.4rem; padding: 0 3.6rem .7rem; font-size: 3.1rem; border-width: .35rem; border-radius: 1.7rem; box-shadow: inset 0 -.8rem 0 var(--b4), inset 0 .3rem 0 rgba(255, 255, 255, .65), 0 .5rem 0 var(--tinta), 0 1rem 1.4rem rgba(0, 0, 0, .32); }
.bo.icono { padding: 0 0 .3rem; width: 4rem; }
.bo.icono.s { width: 3.2rem; } .bo.icono.l { width: 5.2rem; }
.bo.icono .ico { font-size: 2.6rem; } .bo.icono.s .ico { font-size: 2rem; }
.bo:disabled { filter: grayscale(.85) brightness(.85); }

/* paneles, cintas, etiquetas */
.panel { position: relative; border: .25rem solid var(--tinta); border-radius: 1.6rem; padding: 1rem 1.2rem;
  background: linear-gradient(180deg, #333d70 0%, #262e5a 45%, #1d2349 100%);
  box-shadow: inset 0 .2rem 0 rgba(255, 255, 255, .16), inset 0 -.3rem 0 rgba(0, 0, 0, .25), 0 .4rem 0 var(--tinta), 0 .8rem 1.6rem rgba(0, 0, 0, .4); }
.panel.claro { background: linear-gradient(180deg, #fffaf0 0%, #fff1d8 60%, #f5dfb8 100%); color: #3a2414; box-shadow: inset 0 -.3rem 0 #d8b88a, 0 .4rem 0 var(--tinta), 0 .8rem 1.6rem rgba(0, 0, 0, .4); }
.panel-cab { margin: -1rem -1.2rem 1rem; padding: .7rem 1.2rem .8rem; border-radius: 1.3rem 1.3rem 0 0; border-bottom: .25rem solid var(--tinta); display: flex; align-items: center; gap: .8rem;
  background: linear-gradient(180deg, #ff7a5c 0%, #e8322a 55%, #b8201a 100%); box-shadow: inset 0 .2rem 0 rgba(255, 255, 255, .35); }
.panel-cab.azul { background: linear-gradient(180deg, #5aa2ff, #2f6bff 55%, #1c3fa8); }
.panel-cab.oro { background: linear-gradient(180deg, #fff09a, #ffcc2e 55%, #d8891c); }
.cinta { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 3.4rem; padding: 0 2.8rem .2rem; z-index: 1; font-size: 2rem; --c1: #ff7a5c; --c2: #e8322a; --c3: #a8161c; }
.cinta::before { content: ''; position: absolute; inset: 0; z-index: -1; border-top: .25rem solid var(--tinta); border-bottom: .25rem solid var(--tinta); background: linear-gradient(180deg, var(--c1), var(--c2) 60%, var(--c3)); box-shadow: inset 0 .2rem 0 rgba(255, 255, 255, .35); }
.cinta::after { content: ''; position: absolute; z-index: -2; left: -1.6rem; right: -1.6rem; top: .7rem; bottom: -.7rem; background: var(--c3); filter: brightness(.7);
  clip-path: polygon(0 0, 2.2rem 0, 2.2rem 100%, 0 100%, 1.2rem 50%, 0 0, 100% 0, calc(100% - 1.2rem) 50%, 100% 100%, calc(100% - 2.2rem) 100%, calc(100% - 2.2rem) 0); }
.cinta.oro { --c1: #fff09a; --c2: #ffcc2e; --c3: #d8891c; }
.cinta.azul { --c1: #5aa2ff; --c2: #2f6bff; --c3: #1c3fa8; }
.cinta.verde { --c1: #b6ff8a; --c2: #4fd04a; --c3: #237a1c; }
.cinta.oscura { --c1: #4a5277; --c2: #2c3354; --c3: #161a33; }
.etiqueta { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .8rem .1rem; border-radius: 1rem; border: .2rem solid var(--tinta); background: #2c3354; font: 1.1rem 'Lilita One', sans-serif; color: #fff; white-space: nowrap; box-shadow: inset 0 .15rem 0 rgba(255, 255, 255, .2); }
.etiqueta.amarillo { background: linear-gradient(#fff38a, #ffc21a); color: #3a1c00; } .etiqueta.verde { background: linear-gradient(#9dff6a, #3bb81c); color: #0f3a08; }
.etiqueta.rojo { background: linear-gradient(#ff7a5c, #e3281c); } .etiqueta.azul { background: linear-gradient(#6fc3ff, #2a7ff0); }
.rayos { position: absolute; left: 50%; top: 50%; width: 46rem; height: 46rem; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; animation: girar 14s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(255, 244, 170, .55) 0deg 9deg, rgba(255, 244, 170, 0) 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .8) 30%, transparent 70%); mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .8) 30%, transparent 70%); }
@keyframes girar { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* escudo de nivel (r-nivel del kit) */
.nivel-escudo { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 3.1rem; padding-bottom: .3rem; z-index: 1; font: 1.5rem 'Lilita One', sans-serif; color: #fff; --n1: #ff9a7a; --n2: #e8322a; --n3: #9a1418; }
.nivel-escudo::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--tinta); clip-path: polygon(50% 0, 100% 17%, 100% 66%, 50% 100%, 0 66%, 0 17%); }
.nivel-escudo::after { content: ''; position: absolute; inset: .25rem .25rem .3rem; z-index: -1; clip-path: polygon(50% 0, 100% 17%, 100% 66%, 50% 100%, 0 66%, 0 17%); background: linear-gradient(180deg, var(--n1) 0%, var(--n2) 50%, var(--n3) 100%); }
.nivel-escudo.oro { --n1: #fff4a0; --n2: #ffc21a; --n3: #d07a00; } .nivel-escudo.gris { --n1: #cfd5e6; --n2: #8a92b0; --n3: #545b7a; }
.nivel-escudo.l { width: 4rem; height: 4.5rem; font-size: 2.1rem; }
/* barras (r-barra del kit) */
.barra { position: relative; height: 1.6rem; border: .2rem solid var(--tinta); border-radius: .7rem; overflow: hidden; background: linear-gradient(180deg, #1a1430 0%, #2c2344 100%); box-shadow: inset 0 .2rem .3rem rgba(0, 0, 0, .55); --f1: #b8ff7a; --f2: #5ee02c; --f3: #2fb418; }
.barra > i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; background: linear-gradient(180deg, var(--f1) 0%, var(--f2) 45%, var(--f3) 100%); box-shadow: inset 0 -.2rem 0 rgba(0, 0, 0, .18), inset 0 .2rem 0 rgba(255, 255, 255, .35); }
.barra > s { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; background: linear-gradient(180deg, #fff, #ffe7a8); opacity: .85; transition: transform .45s ease-in .25s; }
.barra > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 1.1rem/1 'Lilita One', sans-serif; color: #fff; font-weight: normal; padding-bottom: .1rem; -webkit-text-stroke: .2em var(--tinta); paint-order: stroke fill; }

/* ---------------------------------------------------------------- pantallas de menú */
.pantalla { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; overflow: hidden; }
.pantalla.sale { opacity: 0; transition: opacity .3s; }
.pantalla.entra { animation: entra .35s ease both; }
@keyframes entra { from { opacity: 0; } }
.fondo-rojo { background-color: #c8261e; background-image: var(--trama), radial-gradient(ellipse 70% 80% at 50% 45%, #ff7a4a 0%, #ec3f2a 40%, #b31d1a 75%, #7c0f14 100%); background-size: 12rem 12rem, 100% 100%; }
.fondo-oscuro { background-color: #151a36; background-image: var(--trama), radial-gradient(ellipse 70% 80% at 50% 45%, #5a2f4a 0%, #3a1e3a 50%, #1a0f1e 100%); background-size: 12rem 12rem, 100% 100%; }
:root { --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23000' fill-opacity='.07'%3E%3Cpath d='M20 12 L28 20 L20 28 L12 20Z'/%3E%3Cpath d='M80 72 L88 80 L80 88 L72 80Z'/%3E%3Cpath d='M78 14 C84 14 90 20 90 26 L84 24 L80 30 L76 24 L70 26 C70 20 72 14 78 14Z'/%3E%3Cpath d='M18 74 C24 74 30 80 30 86 L24 84 L20 90 L16 84 L10 86 C10 80 12 74 18 74Z'/%3E%3C/g%3E%3C/svg%3E"); }

/* splash del juego */
.splash-juego { background-color: #7c0f14; }
.titulo-logo { font: 9rem/1 'Lilita One', sans-serif; letter-spacing: .03em; color: #ffd21f; margin: 0; -webkit-text-stroke-width: .12em; text-shadow: 0 .06em 0 #b85a00, 0 .1em 0 var(--tinta), 0 0 3rem rgba(255, 190, 30, .45); transform: rotate(-3deg); }
.titulo-lema { font-size: 2.2rem; margin-top: -.6rem; transform: rotate(-3deg); }
.splash-juego .titulo-logo { animation: logo .9s cubic-bezier(.2, 1.6, .4, 1) both; }
.splash-juego .titulo-lema { animation: entra .5s .5s both; }
@keyframes logo { from { transform: rotate(-3deg) scale(.2); opacity: 0; } }

/* título */
.titulo .escaparate { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; }
.titulo-cabeza { position: absolute; top: calc(2.2rem + var(--sa-t)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.titulo-cabeza .titulo-logo { font-size: 7.6rem; }
.titulo-pie { position: absolute; bottom: calc(2rem + var(--sa-b)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.titulo-pie .fila { display: flex; gap: 1rem; align-items: center; }
.titulo-info { font-size: 1.5rem; }
.titulo-version { position: absolute; right: calc(1.2rem + var(--sa-r)); bottom: calc(.8rem + var(--sa-b)); font: 800 1.1rem 'Nunito', sans-serif; opacity: .7; }
.titulo-esquina { position: absolute; left: calc(1.2rem + var(--sa-l)); bottom: calc(1.2rem + var(--sa-b)); display: flex; gap: .8rem; }
.suelo-titulo { position: absolute; left: 50%; bottom: -30%; width: 140%; height: 70%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, rgba(255, 160, 100, .35), rgba(90, 10, 20, 0) 60%); pointer-events: none; }

/* crear personaje */
.cr { display: block; }
.cr .escaparate { position: absolute; left: 30%; width: 40%; top: 0; bottom: 0; }
.cr-cab { position: absolute; top: calc(1.2rem + var(--sa-t)); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.cr-volver { position: absolute; left: calc(1.4rem + var(--sa-l)); top: calc(1.2rem + var(--sa-t)); }
.cr-izq { position: absolute; left: calc(1.4rem + var(--sa-l)); top: 6rem; bottom: 1.4rem; width: 26rem; display: flex; flex-direction: column; gap: .8rem; }
.cr-der { position: absolute; right: calc(1.4rem + var(--sa-r)); top: 6rem; bottom: 1.4rem; width: 27rem; display: flex; flex-direction: column; gap: .7rem; }
.cr-rotulo { font-size: 1.5rem; margin-bottom: -.2rem; }
.cr-razas { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.cr-carta { position: relative; border: .25rem solid var(--tinta); border-radius: 1.2rem; padding: .6rem .8rem .7rem; text-align: left; overflow: hidden;
  background: linear-gradient(180deg, #4b5a9a 0%, #2e3767 60%, #232a52 100%); box-shadow: inset 0 .2rem 0 rgba(255, 255, 255, .22), 0 .3rem 0 var(--tinta); transition: transform .08s; }
.cr-carta b { display: block; font: 1.7rem 'Lilita One', sans-serif; -webkit-text-stroke: .19em var(--tinta); paint-order: stroke fill; }
.cr-carta small { display: block; font: 800 1rem/1.15 'Nunito', sans-serif; color: #dfe6ff; margin-top: .1rem; }
.cr-carta .piel { position: absolute; right: .6rem; top: .6rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: .2rem solid var(--tinta); }
.cr-carta.sel { background: linear-gradient(180deg, #ff9a6a 0%, #e8322a 60%, #a8161c 100%); box-shadow: 0 0 0 .3rem #ffe14a, 0 0 0 .55rem var(--tinta), 0 0 1.8rem .6rem rgba(255, 214, 40, .45); transform: translateY(-.15rem); }
.cr-sexo { display: flex; gap: .7rem; }
.cr-sexo .bo { flex: 1; }
.cr-nombre-fila { display: flex; gap: .6rem; align-items: center; }
.cr-nombre { flex: 1; min-width: 0; height: 4rem; font: 1.8rem 'Lilita One', sans-serif; color: #1d2447; padding: 0 1rem; border: .25rem solid var(--tinta); border-radius: 1rem; background: linear-gradient(#ffffff, #e8eefc); box-shadow: inset 0 .3rem .3rem rgba(0, 0, 0, .12), 0 .3rem 0 var(--tinta); outline: none; user-select: text; -webkit-user-select: text; }
.cr-nombre:focus { box-shadow: inset 0 .3rem .3rem rgba(0, 0, 0, .12), 0 .3rem 0 var(--tinta), 0 0 0 .3rem #ffe14a; }
.cr-clase { display: flex; align-items: center; gap: .9rem; padding: .5rem .8rem; }
.cr-clase .ico { font-size: 4.2rem; filter: drop-shadow(0 .2rem 0 rgba(0, 0, 0, .35)); }
.cr-clase div { min-width: 0; }
.cr-clase b { font-size: 1.9rem; }
.cr-clase .etiqueta { margin-top: .3rem; height: 1.8rem; font-size: 1rem; }
.cr-frase { font: 800 1.15rem/1.3 'Nunito', sans-serif; color: #fff; text-shadow: 0 .1rem 0 #000; min-height: 4.4rem; }
.cr-habs { display: flex; gap: .4rem; }
.cr-habs .ico { font-size: 3rem; border-radius: 50%; border: .2rem solid var(--tinta); background: radial-gradient(circle at 50% 30%, #8fcaff, #3d8bff 45%, #1f58c8 85%); padding: .35rem; width: 3.4rem; height: 3.4rem; }
.cr-jugar { margin-top: auto; align-self: flex-end; }
.cr-error { min-height: 1.5rem; font: 800 1.1rem/1.2 'Nunito', sans-serif; color: #ffb3a8; text-shadow: 0 .1rem 0 #000; }
.cr-error:empty { display: none; }
.cr-girar { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); font: 800 1.1rem 'Nunito', sans-serif; opacity: .75; pointer-events: none; text-shadow: 0 .1rem 0 #000; }

/* carga */
.carga { background-color: #3a0f14; }
.carga-cab { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.carga-zona { font-size: 4.6rem; color: #ffd21f; -webkit-text-stroke: .12em var(--tinta); paint-order: stroke fill; text-shadow: 0 .06em 0 #b85a00, 0 .1em 0 var(--tinta); }
.carga-barra { width: 46rem; height: 2rem; border: .3rem solid var(--tinta); border-radius: 1.2rem; background: #2a0f14; overflow: hidden; box-shadow: 0 .3rem 0 var(--tinta); }
.carga-barra i { display: block; height: 100%; background: linear-gradient(#fff38a, #ffd21f 50%, #ffb000); transform-origin: left; transform: scaleX(0); transition: transform .25s; }
.carga-consejo { max-width: 56rem; text-align: center; font: 800 1.4rem/1.35 'Nunito', sans-serif; text-shadow: 0 .1rem 0 #000; min-height: 4rem; }
.carga-consejo b { color: var(--amarillo); font-family: 'Lilita One', sans-serif; font-weight: 400; }
.carga .retrato { width: 9rem; height: 9rem; }

/* retratos */
.retrato { position: relative; width: 5.6rem; height: 5.6rem; border: .25rem solid var(--tinta); border-radius: 1.3rem; overflow: hidden; flex: none;
  background: radial-gradient(circle at 50% 30%, #ff9a7a, #e8322a 60%, #a8161c); box-shadow: inset 0 .2rem 0 rgba(255, 255, 255, .35), 0 .3rem 0 var(--tinta); }
.retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.retrato::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 .2rem rgba(255, 255, 255, .28); pointer-events: none; }
.retrato > .ico { position: absolute; inset: 12%; width: 76%; height: 76%; }

/* el temblor de «no vale» (el nombre al crear personaje) */
@keyframes no { 25% { transform: translateX(-.5rem); } 75% { transform: translateX(.5rem); } }

/* la placa de la vista previa del nombre, al crear personaje («Así te verán los demás») */
.placa { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; white-space: nowrap; will-change: transform; }
.placa > * { flex: none; }

.pl-nombre { font: 1.25rem 'Lilita One', sans-serif; color: #fff; }

.pl-fila { display: flex; align-items: center; gap: .2rem; }

.pl-nv { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: .2rem solid var(--tinta); background: linear-gradient(#5a6390, #2c3354); font: 1rem 'Lilita One', sans-serif; }
.placa .barra { width: 7rem; height: 1.3rem; border-width: .2rem; border-radius: .6rem; }
.placa .barra > b { font-size: .95rem; }

/* crear personaje: el nombre (lo ven los demás) y su vista previa, con la placa azul de aliado */
.cr-nombre-caja { display: flex; flex-direction: column; gap: .5rem; }
.cr-nombre-ok { display: none; }
.cr-nombre.no { animation: no .3s; }
.cr-pista { font: 800 1.05rem/1.2 'Nunito', sans-serif; color: #ffe14a; text-shadow: 0 .1rem 0 #000; }
.cr-pista:empty { display: none; }
.cr-previa { display: flex; align-items: center; gap: 1rem; min-height: 3.4rem; }
.cr-previa .placa { position: static; transform: none; will-change: auto; }
.cr-previa small { font: 800 1.05rem/1.2 'Nunito', sans-serif; color: #ffe6d8; text-shadow: 0 .1rem 0 #000; }
.placa.aliado .pl-cab { display: flex; align-items: center; gap: .2rem; }
.placa.aliado .pl-nombre { color: var(--aliado); max-width: 17rem; overflow: hidden; text-overflow: ellipsis; }
.placa.aliado .pl-nv { background: linear-gradient(#8fd0ff, #2a7ff0); }
.placa.aliado .barra { width: 7rem; --f1: #b8ecff; --f2: #45b6ff; --f3: #1f7fe8; }
/* en el móvil, al escribir: la caja del nombre arriba, sobre un velo (el teclado tapa la mitad de abajo) */
.cr.escribe::after { content: ''; position: absolute; inset: 0; z-index: 29; background: rgba(12, 6, 20, .66); }
.cr-nombre-caja.escribe { position: fixed; z-index: 30; left: 50%; top: calc(1rem + var(--vivo-alto) + var(--sa-t)); transform: translateX(-50%); width: 50rem; padding: .8rem 1.2rem 1rem;
  border-radius: 1.6rem; border: .25rem solid var(--tinta); background: linear-gradient(180deg, #333d70 0%, #262e5a 45%, #1d2349 100%); box-shadow: 0 .4rem 0 var(--tinta), 0 .8rem 1.6rem rgba(0, 0, 0, .45); }
.cr-nombre-caja.escribe .cr-nombre-ok { display: inline-flex; }

/* ventanas (los Ajustes del título, la cuenta, las preguntas) */
.ventana-fondo { position: absolute; inset: 0; pointer-events: auto !important; background: radial-gradient(ellipse at 50% 50%, rgba(6, 10, 30, .3), rgba(4, 6, 20, .65)); animation: entra .2s ease both; }
.ventana { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: auto !important; animation: ventana .28s cubic-bezier(.2, 1.4, .4, 1) both; max-height: calc(100% - 2rem); display: flex; flex-direction: column; }
@keyframes ventana { from { transform: translate(-50%, -46%) scale(.85); opacity: 0; } }
.ventana .cerrar { position: absolute; right: -1rem; top: -1rem; z-index: 3; }
/* el rótulo de una sección dentro de una ventana */
.dl-seccion { margin: .6rem 0 .3rem; font: 1.3rem 'Lilita One', sans-serif; color: #7a4a22; text-transform: uppercase; letter-spacing: .04em; }

/* los Ajustes del título (ui/pantallas.js ajustesTitulo) */
.pausa-ventana { width: 56rem; padding: 0; }
.pausa-ventana .panel-cab { margin: 0; }
.pausa-cuerpo { display: flex; gap: 1.4rem; padding: 1.2rem 1.4rem 1.4rem; min-height: 0; }
.pausa-botones { width: 18rem; display: flex; flex-direction: column; gap: .8rem; }
.pausa-botones .bo { width: 100%; }
.ajustes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .9rem; overflow: auto; }
.ajuste { display: flex; align-items: center; gap: .9rem; }
.ajuste > span { width: 11rem; font-size: 1.5rem; display: flex; align-items: center; gap: .5rem; }
.ajuste > span .ico { font-size: 2.2rem; }
.opciones { display: flex; gap: .4rem; flex: 1; }
.opciones .bo { flex: 1; padding: 0 .6rem .3rem; }
.deslizador { flex: 1; position: relative; height: 3.4rem; display: flex; align-items: center; touch-action: none; cursor: pointer; }
.deslizador .riel { position: absolute; left: 0; right: 0; height: 1.4rem; border-radius: .7rem; border: .2rem solid var(--tinta); background: #1a1430; overflow: hidden; }
.deslizador .riel i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left; background: linear-gradient(#fff38a, #ffd21f 50%, #ffb000); }
.deslizador .pomo { position: absolute; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; border: .25rem solid var(--tinta); background: radial-gradient(circle at 50% 35%, #fff, #d8e2f7); box-shadow: 0 .2rem 0 var(--tinta); }
.deslizador b { position: absolute; right: -4.6rem; width: 4rem; font-size: 1.4rem; text-align: right; }
.ajuste.con-num { padding-right: 4.6rem; }

/* cuenta de la web y personajes para continuar (mismo panel que los Ajustes) */
.cuenta-ventana { width: 54rem; padding: 0; }
.cuenta-ventana .panel-cab { margin: 0; }
.cuenta-cuerpo { display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1.4rem 1.4rem; min-height: 0; overflow: auto; }
.cuenta-cuerpo p { margin: 0; font-size: 1.25rem; }
.cuenta-codigo { text-transform: uppercase; letter-spacing: .25em; text-align: center; }
.cuenta-aviso { min-height: 1.5rem; font-size: 1.15rem; color: #ffb3a8; text-shadow: 0 .1rem 0 #000; }
.cuenta-quien { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.7rem; }
.pj-lista { display: flex; flex-direction: column; gap: .6rem; }
.pj-fila { display: flex; align-items: center; gap: .8rem; padding: .5rem .7rem .6rem; }
.pj-fila .pj-elegir { flex: 1; min-width: 0; display: flex; align-items: center; gap: .9rem; text-align: left; color: inherit; }
.pj-fila .nivel-escudo { flex: none; }
.pj-fila .pj-datos { min-width: 0; }
.pj-fila b { display: flex; align-items: center; gap: .6rem; }
.pj-fila small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* pregunta de sí o no (p. ej. crear sin conexión con la web) y la espera de la web antes del título */
.pantalla.pregunta { z-index: 40; }
.pregunta-ventana { width: 50rem; padding: 0; }
.pregunta-ventana .panel-cab { margin: 0; }
.pregunta-cuerpo { display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem 1.6rem 1.6rem; min-height: 0; overflow: auto; }
.pregunta-cuerpo p { margin: 0; font-size: 1.4rem; text-shadow: 0 .1rem 0 #000; }
.pregunta-cuerpo .pregunta-aviso { color: #ffe14a; font-size: 1.25rem; }
.pregunta-botones { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 1rem; margin-top: .4rem; }
.conectando .titulo-logo { font-size: 7.6rem; }
/* fin de la demo */
.fin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; pointer-events: auto !important; background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(255, 122, 74, .82) 0%, rgba(200, 38, 30, .88) 45%, rgba(90, 10, 20, .95) 100%); animation: entra .8s ease both; }
.fin .rayos { width: 70rem; height: 70rem; top: 38%; }
.fin .grande { position: relative; font: 5rem/1 'Lilita One', sans-serif; color: #ffd21f; -webkit-text-stroke: .14em var(--tinta); paint-order: stroke fill; text-shadow: 0 .06em 0 #b85a00, 0 .12em 0 var(--tinta); text-align: center; }
.fin .sub { position: relative; font-size: 1.8rem; text-align: center; }
.fin-stats { position: relative; display: flex; gap: .8rem; }
.fin-stat { width: 11.5rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .7rem .5rem .8rem; border-radius: 1.4rem; border: .25rem solid var(--tinta); background: linear-gradient(180deg, #4b5a9a 0%, #2e3767 60%, #232a52 100%); box-shadow: 0 .3rem 0 var(--tinta); animation: ventana .4s cubic-bezier(.2, 1.4, .4, 1) both; }
.fin-stat .ico { font-size: 3.4rem; }
.fin-stat b { font-size: 2.4rem; }
.fin-stat small { font: 900 1rem 'Nunito', sans-serif; color: #dfe6ff; text-align: center; }
.fin-continuara { position: relative; font: 3rem 'Lilita One', sans-serif; color: #fff; letter-spacing: .06em; -webkit-text-stroke: .14em var(--tinta); paint-order: stroke fill; text-shadow: 0 .1em 0 var(--tinta); animation: aviso 99s ease both; }
.fin .fila { position: relative; display: flex; gap: 1rem; }
.error-caja { max-width: 70rem; max-height: 60%; font: 1.1rem monospace; white-space: pre-wrap; background: rgba(0, 0, 0, .5); padding: 1rem; border-radius: 1rem; }

/* pantalla demasiado estrecha (móvil en vertical) */
.girar-movil { position: fixed; inset: 0; z-index: 99; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: #7c0f14; text-align: center; padding: 2rem; font-size: 2.2rem; pointer-events: auto; }
/* (solo con el dedo como puntero: en un PC, media ventana de un portátil —683 × 768— es «vertical» y no hay móvil que girar) */
@media (orientation: portrait) and (max-width: 700px) and (pointer: coarse) { .girar-movil { display: flex; } }
@media (orientation: portrait) and (max-width: 700px) { :root { font-size: clamp(7px, 2.4vw, 12px); } }

/* ---------------------------------------------------------------- el hueco de la píldora «EN VIVO» del desarrollo en vivo (tools/demo-vivo.js,
   del coordinador: arriba en el centro). <html class="con-vivo"> lo pone principal.js; la interfaz de la partida lee --vivo-alto */
:root { --vivo-alto: 0px; --aliado: #8fd8ff; }
.con-vivo { --vivo-alto: 26px; }
.con-vivo .cr-cab { top: calc(32px + var(--sa-t)); }
.con-vivo .cr-cab .cinta { height: 2.8rem; padding: 0 2rem .2rem; font-size: 1.5rem; }
.con-vivo .titulo-cabeza { top: calc(2.2rem + var(--vivo-alto) + var(--sa-t)); }
.con-vivo .ventana { top: calc(50% + var(--vivo-alto) / 2); max-height: calc(100% - 2rem - var(--vivo-alto)); }

/* El botón de la cámara ya no va en el HUD (Iván, 2026-10-01): la vista, «Seguir» y «Girar» se eligen en Ajustes → Controles;
   los gestos y las teclas (Y, U, H) siguen igual. El botón lo monta control/camara-piezas.js: aquí solo se esconde. */
.cam-boton { display: none !important; }