/* Lo que está siempre en pantalla. El aspecto sale de mirar Slime Keyboard Escape y Sprint League, y de las escenas
   aprobadas (Proyectos/arte-3d/escenas): botones cuadrados de color con una calcomanía que se asoma, su nombre y su tecla;
   botones redondos arriba; contadores en pastillas de color con el ícono grande; la velocidad mediana, como en Slime,
   sobre la ficha de nivel con su riel; y la misión en una tarjeta chica y oscura que no tapa.
   Todo se mide en em: la letra de #hud sigue el lado corto de la pantalla (el menor entre el alto y el ancho), con un piso de 10 px:
   en el marco de Poki seguía solo el alto y quedaba chica; así en un celular, de pie o acostado, se achica entera sin tocar nada. */
#hud {
  font-size: clamp(10px, min(1.72vh, 1.06vw), 24px); letter-spacing: 0.02em;
  --tinta: var(--ink); --radio: 1.25em; --radio-chico: 0.7em; --borde: 0.24em;
}
/* La tecla de cada cosa: una ficha blanca en la esquina. */
#hud kbd {
  position: absolute; right: -0.6em; bottom: -0.45em; min-width: 1.5em; height: 1.5em; padding: 0 0.3em; border-radius: 0.8em; background: #fff;
  color: var(--tinta); border: 0.18em solid var(--tinta); font: inherit; font-size: 0.82em; display: grid; place-items: center; box-sizing: content-box; line-height: 1; -webkit-text-stroke: 0;
}

/* ---------- botones cuadrados: la calcomanía se asoma por arriba, el nombre pisa el borde de abajo */
#hud .boton {
  position: relative; width: 5.5em; height: 5.5em; border-radius: var(--radio); background: var(--color); border: var(--borde) solid var(--tinta);
  box-shadow: 0 0.36em 0 var(--tinta), inset 0 0 0 0.2em #ffffffb8, inset 0 -0.62em 0 0.2em #00000030;
  display: block; pointer-events: auto; transition: transform .1s; font-size: 1em;
}
/* El brillo del botón: una media luna clara arriba. */
#hud .boton::before { content: ''; position: absolute; left: 0.5em; right: 0.5em; top: 0.44em; height: 36%; border-radius: 0.8em 0.8em 2.4em 2.4em / 0.8em 0.8em 1em 1em; background: linear-gradient(#ffffff8c, #ffffff14); }
#hud .boton:hover { transform: translateY(-0.15em) scale(1.05); }
#hud .boton:active { transform: translateY(0.2em); box-shadow: 0 0.14em 0 var(--tinta), inset 0 0 0 0.2em #ffffffb8; }
#hud .boton > i { position: absolute; left: 50%; top: -0.95em; width: 4.9em; height: 4.9em; margin-left: -2.45em; display: block; transform: rotate(-4deg); filter: drop-shadow(0 0.2em 0 #1b174066); }
#hud .boton > i svg, #hud .redondo > i svg, #hud .pastilla > i svg { width: 100%; height: 100%; display: block; overflow: visible; }
#hud .boton > b { position: absolute; left: -1em; right: -1em; bottom: -0.2em; text-align: center; font-size: 1.08em; line-height: 1.2; white-space: nowrap; }
#hud .boton > kbd { right: -1.35em; bottom: auto; top: 2.5em; }
#hud .boton > u {
  position: absolute; right: -0.6em; top: -0.6em; min-width: 1.5em; height: 1.5em; border-radius: 0.8em; background: #ff3d3d; color: #fff;
  border: 0.18em solid var(--tinta); font-size: 0.9em; display: none; place-items: center; text-decoration: none; padding: 0 0.12em;
}
#hud .boton.alert > u { display: grid; animation: pop .5s ease-in-out infinite alternate; }
#hud .boton.alert > i { animation: nudge 1.6s ease-in-out infinite; }
/* El reloj de la cinta ×2: una chapita arriba del botón. */
#hud .boton > small { position: absolute; left: 50%; top: -1.55em; transform: translateX(-50%); padding: 0 0.55em 0.08em; border-radius: 0.8em; background: var(--verde); border: 0.18em solid var(--tinta); font-size: 0.95em; line-height: 1.35; color: #fff; white-space: nowrap; z-index: 1; }
#hud .boton > small:empty { display: none; }
#hud .boton.on { --color: var(--verde) !important; animation: late .5s ease-in-out infinite alternate; }
@keyframes late { from { box-shadow: 0 0.36em 0 var(--tinta), inset 0 0 0 0.2em #ffffffb8, 0 0 0 0 #fff36b; } to { box-shadow: 0 0.36em 0 var(--tinta), inset 0 0 0 0.2em #ffffffb8, 0 0 0 0.3em #fff36b; } }
#hud .boton.off { filter: grayscale(.75) brightness(.86); }
#hud .boton.off > small { background: var(--gris); }

/* ---------- botones redondos: oscuros, para que el dibujo de color resalte */
#hud .redondo {
  position: relative; width: 3.7em; height: 3.7em; border-radius: 50%; background: var(--noche); border: var(--borde) solid var(--tinta);
  box-shadow: 0 0.26em 0 var(--tinta), inset 0 0 0 0.16em #ffffff40, inset 0 0.5em 0 0 #ffffff1c; display: grid; place-items: center; pointer-events: auto; transition: transform .1s; font-size: 1em;
}
#hud .redondo:hover { transform: scale(1.1) rotate(-4deg); }
#hud .redondo:active { transform: translateY(0.14em); }
#hud .redondo > i { display: block; width: 2.75em; height: 2.75em; filter: drop-shadow(0 0.12em 0 #0000004d); }
#hud .redondo.off { filter: saturate(.55); }
#hud .fila { display: flex; gap: 1em; }

/* ---------- arriba a la izquierda: las victorias, la sala y quién entra y sale */
#tl { position: absolute; left: 1.6em; top: 1.5em; display: flex; flex-direction: column; align-items: flex-start; gap: 0.8em; }
#tl #winsBox { margin-left: 0.6em; }
#players { font-size: 1.1em; display: flex; align-items: center; }
#players::before { content: ''; width: 0.75em; height: 0.75em; margin-right: 0.5em; border-radius: 50%; background: #4dff88; box-shadow: 0 0 0 0.2em var(--tinta); }
/* Quién entra y quién se va. */
#feed { display: flex; flex-direction: column; gap: 0.15em; font-size: 1em; }
#feed div { animation: feed 5s ease-out forwards; white-space: nowrap; -webkit-text-stroke: 0.28em var(--tinta); paint-order: stroke fill; }
#feed div b { color: #baffcb; font-weight: inherit; } #feed div.out b { color: #ffc0c8; }

/* ---------- los contadores: pastillas de color con el ícono grande pisando el borde */
#hud .pastilla {
  --c1: #56c2ff; --c2: #1f86e6;
  position: relative; height: 2.35em; min-width: 6.2em; padding: 0 1.1em 0.06em 2.7em; border-radius: 1.2em; background: linear-gradient(var(--c1), var(--c2));
  border: 0.2em solid var(--tinta); box-shadow: 0 0.22em 0 var(--tinta), inset 0 0.2em 0 #ffffff80, inset 0 -0.24em 0 #00000029;
  display: flex; align-items: center; justify-content: center; font-size: 1.3em; box-sizing: border-box; color: #fff;
}
#hud .pastilla.oro { --c1: #ffc53d; --c2: #f07f10; }
#hud .pastilla > i { position: absolute; left: -0.75em; top: 50%; width: 3.3em; height: 3.3em; display: block; transform: translateY(-54%) rotate(-8deg); filter: drop-shadow(0 0.12em 0 #1b174059); }
#winsBox.bump { animation: bump .3s ease-out; transform-origin: center; }
/* Los potenciadores prendidos, abajo, con su reloj: laten. */
#boosts { display: flex; gap: 0.6em; font-size: 1em; }
#boosts:empty { display: none; }
#boosts span { display: flex; align-items: center; gap: 0.25em; padding: 0.06em 0.8em 0.16em 0.3em; border-radius: 1em; background: var(--verde); border: 0.18em solid var(--tinta); box-shadow: 0 0.18em 0 var(--tinta), inset 0 0.16em 0 #ffffff66; color: #fff; white-space: nowrap; animation: late2 1.2s ease-in-out infinite; }
#boosts span.wins { background: var(--amarillo); }
#boosts .ic { width: 1.6em; height: 1.6em; }
#boosts b { font-weight: inherit; }
@keyframes late2 { 50% { filter: brightness(1.2); } }

/* ---------- arriba a la derecha: los botones redondos, los tres premios, la misión y, con Tab, las posiciones */
#tr { position: absolute; right: 1.4em; top: 1.3em; display: flex; flex-direction: column; align-items: flex-end; gap: 1.05em; }
/* Los premios: cuadrados de color con su dibujo, su reloj abajo y una marca roja cuando hay algo para abrir (entonces laten). */
#tr .premios { display: flex; gap: 0.9em; }
#hud .premio { position: relative; width: 4.5em; height: 4.5em; border-radius: var(--radio); background: var(--color); border: var(--borde) solid var(--tinta); pointer-events: auto; font-size: 1em;
  box-shadow: 0 0.34em 0 var(--tinta), inset 0 0 0 0.2em #ffffffb8, inset 0 -0.5em 0 0.2em #00000030; display: grid; place-items: center; transition: transform .1s; }
#hud .premio::before { content: ''; position: absolute; inset: 0.3em; border-radius: 0.8em; background: conic-gradient(#ffffff66 calc(var(--parte, 0) * 1turn), transparent 0); }
#hud .premio > i { position: relative; display: block; width: 3.4em; height: 3.4em; margin-top: -0.7em; filter: drop-shadow(0 0.16em 0 #1b174066); }
#hud .premio > i svg { width: 100%; height: 100%; display: block; overflow: visible; }
#hud .premio .reloj { position: absolute; left: 50%; bottom: -0.75em; transform: translateX(-50%); font-size: 0.95em; white-space: nowrap; padding: 0.02em 0.5em 0.1em; border-radius: 0.6em; background: var(--noche); border: 0.16em solid var(--tinta); }
#hud .premio .marca { position: absolute; right: -0.55em; top: -0.55em; min-width: 1.5em; height: 1.5em; border-radius: 0.8em; background: #ff3d3d; border: 0.16em solid var(--tinta); display: none; place-items: center; font-size: 0.9em; padding: 0 0.15em; }
#hud .premio > kbd { right: auto; left: -0.6em; bottom: auto; top: -0.5em; }
#hud .premio.listo { animation: listo 1s ease-in-out infinite; }
#hud .premio.listo .reloj { background: var(--verde); }
#hud .premio.listo .marca { display: grid; }
#hud .premio:hover { transform: scale(1.07); }
#hud .premio:active { transform: scale(0.93); }
@keyframes listo { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-8deg) scale(1.08); } 30% { transform: rotate(7deg) scale(1.08); } 45% { transform: rotate(0) scale(1); } }
/* La misión: chica, oscura y sin marco, para que no tape. */
#afueraInfo { display: flex; align-items: center; gap: 0.4em; max-width: 17em; padding: 0.25em 0.75em 0.3em 0.35em; border-radius: 0.9em; background: #1b1740b3; color: #fff; font-size: 0.92em; line-height: 1.15; }
#afueraInfo[hidden] { display: none; }
#afueraInfo > i { display: block; width: 1.9em; height: 1.9em; flex: none; }
#afueraInfo > i svg { width: 100%; height: 100%; display: block; }
#mision { width: 15.5em; padding: 0.4em 0.75em 0.55em; border-radius: 0.9em; background: #1b1740b3; color: #fff; margin-top: 0.4em; }
#mision .cabecera { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6em; font-size: 1em; -webkit-text-stroke-width: 0.24em; }
#world { color: #ffd84a; }
#misN { color: #fff; }
#pasos { display: flex; gap: 0.22em; margin-top: 0.42em; }
#pasos i { flex: 1; height: 0.4em; border-radius: 0.2em; background: #ffffff33; }
#pasos i.hecho { background: var(--barra); }
#pasos i.aca { background: #ff5fa8; animation: throb .6s ease-in-out infinite alternate; }

/* La tabla de posiciones (Tab): un panel oscuro con letra blanca, las dos listas una debajo de la otra. */
#rank { width: 16.6em; padding: 0.5em 0.5em 0.6em; border-radius: 1em; background: var(--noche); border: var(--borde) solid var(--tinta); box-shadow: 0 0.3em 0 var(--tinta), inset 0 0 0 0.14em #ffffff33; color: #fff; display: flex; flex-direction: column; gap: 0.5em; animation: cae .18s ease-out; }
@keyframes cae { from { transform: translateY(-0.6em) scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
#rank section { min-width: 0; }
#rank h4 { margin: 0 0 0.2em 0.1em; display: flex; align-items: center; gap: 0.4em; font-size: 1em; font-weight: inherit; letter-spacing: 0.04em; color: #ffd84a; -webkit-text-stroke-width: 0; }
#rank h4 span { -webkit-text-stroke-width: 0.22em; }
#rank h4 .ic { width: 1.6em; height: 1.6em; }
#rank div { display: flex; align-items: center; gap: 0.45em; padding: 0.06em 0.45em 0.1em 0.2em; border-radius: 0.7em; font-size: 0.95em; line-height: 1.4; }
#rank div em { flex: none; width: 1.55em; height: 1.55em; border-radius: 50%; background: #ffffff24; font-style: normal; font-size: 0.86em; display: grid; place-items: center; }
#rank div.p1 em { background: #ffd23a; color: var(--tinta); } #rank div.p2 em { background: #dfe6f5; color: var(--tinta); } #rank div.p3 em { background: #ff9f5c; color: var(--tinta); }
#rank div span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rank div b { color: #9dffb0; font-weight: inherit; }
/* El jugador, resaltado. */
#rank div.me { background: var(--amarillo); color: var(--tinta); box-shadow: 0 0 0 0.14em var(--tinta); }
#rank div.me b { color: var(--tinta); }
#rank div.me em { background: var(--tinta); color: #ffd84a; }

/* ---------- arriba al centro: la meta, grande y en pocas palabras, y cómo en una línea chica (sim/guia.js) */
#meta { position: absolute; left: 50%; top: 1.2em; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: max-content; max-width: min(36em, calc(100% - 44em)); }
#meta.vacia { display: none; }
#meta .cartel { position: relative; padding: 0.3em 1.2em 0.4em; border-radius: 0.7em; background: var(--naranja); border: var(--borde) solid var(--tinta);
  box-shadow: 0 0.3em 0 var(--tinta), inset 0 0.22em 0 #ffffff66, inset 0 -0.3em 0 #00000026; font-size: 1.85em; line-height: 1.12; text-align: center; color: #fff; }
#meta .cartel .paso { display: inline-block; margin-right: 0.4em; padding: 0 0.4em; border-radius: 0.4em; background: #ffe45c; color: var(--tinta); -webkit-text-stroke: 0; font-size: 0.62em; vertical-align: 0.2em; }
#meta .cartel small { display: block; font-size: 0.5em; color: #fff3b0; letter-spacing: 0.06em; margin-bottom: -0.05em; }
#meta .cartel .ic { width: 1.1em; height: 1.1em; }
#meta.chica .cartel { font-size: 1.35em; padding: 0.25em 1em 0.3em; background: var(--noche); }
#meta .ayuda { margin-top: 0.55em; padding: 0.15em 0.9em 0.22em; border-radius: 0.5em; background: #1b1740c0; font-size: 1.1em; text-align: center; }
#meta .ayuda:empty { display: none; }
#meta .ayuda .ic { width: 1.3em; height: 1.3em; }
#meta.cambia .cartel { animation: cambia .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cambia { 0% { transform: scale(.6) translateY(-0.6em); opacity: 0; } 100% { transform: none; opacity: 1; } }
#meta .lista { margin-top: 0.45em; display: flex; flex-direction: column; gap: 0.25em; align-items: stretch; min-width: 16em; }
#meta .lista:empty { display: none; }
#meta .lista div { display: grid; grid-template-columns: 1.6em 1fr 4.4em; align-items: center; gap: 0.45em; padding: 0.1em 0.6em 0.15em 0.3em; border-radius: 0.5em; background: #1b174099; font-size: 0.92em; }
#meta .lista .ic { width: 1.5em; height: 1.5em; }
#meta .lista span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#meta .lista i { position: relative; height: 0.55em; border-radius: 0.3em; background: #ffffff33; overflow: hidden; }
#meta .lista i b { position: absolute; inset: 0 auto 0 0; background: var(--barra); }
/* Los carteles de logro: dorados, con un brillo que los cruza y chispas; bajan de a uno debajo de los premios. */
#logrosCaja { position: absolute; right: 1.4em; top: 17em; display: flex; flex-direction: column; gap: 0.5em; align-items: flex-end; z-index: 2; }
.logro { position: relative; display: flex; align-items: center; gap: 0.6em; padding: 0.4em 1.1em 0.45em 0.5em; border-radius: 0.8em; overflow: hidden;
  background: linear-gradient(#ffe36a, #f2a51c); color: var(--tinta); border: var(--borde) solid var(--tinta); box-shadow: 0 0 0 0.16em #fff6c8, 0 0.3em 0 0.16em var(--tinta), 0 0 2em 0.3em #ffd23c99;
  animation: logroEntra .7s cubic-bezier(.3, 1.6, .5, 1); white-space: nowrap; }
.logro.sale { transition: transform .35s, opacity .35s; transform: translateY(-1.5em) scale(.9); opacity: 0; }
.logro::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3em; left: -4em; background: linear-gradient(100deg, transparent, #ffffffcc, transparent); animation: brillo 1.4s .4s ease-in-out 2; }
@keyframes brillo { to { left: 110%; } }
@keyframes logroEntra { 0% { transform: translateY(-3em) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.logro > .ic { width: 2.8em; height: 2.8em; flex: none; animation: gira 0.9s ease-out; }
@keyframes gira { from { transform: rotate(-200deg) scale(.3); } }
.logro small { display: block; font-size: 0.8em; color: #fff; letter-spacing: 0.06em; }
.logro b { display: block; font-weight: inherit; font-size: 1.35em; line-height: 1.05; }
.logro span { display: block; font-size: 0.95em; color: #7a3d00; }
.logro span .ic { width: 1.2em; height: 1.2em; }
.logro em { display: block; font-style: normal; font-size: 0.85em; color: #fff; margin-top: 0.15em; }
.chispa { position: absolute; width: 0.55em; height: 0.55em; border-radius: 0.12em; pointer-events: none; }
.moneda-vuela { position: fixed; z-index: 60; width: 2.4em; height: 2.4em; pointer-events: none; font-size: clamp(10px, min(1.72vh, 1.06vw), 24px); }
.moneda-vuela .ic { width: 100%; height: 100%; vertical-align: 0; }
/* Un aviso grande en el medio: algo que no se puede, o algo que se ganó. */
#aviso { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%) scale(.9); font-size: 3em; opacity: 0; white-space: nowrap; transition: opacity .25s, transform .25s; text-align: center; pointer-events: none; }
#aviso.ve { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#aviso small { display: block; font-size: 0.42em; color: #fff; }
#aviso .ic { width: 1em; height: 1em; }
/* El aviso de ALT para soltar el mouse: siempre a la vista en computadora, abajo a la derecha. */
#altAviso { position: absolute; right: 1.4em; bottom: 1.3em; padding: 0.15em 0.6em 0.22em; border-radius: 0.5em; background: #1b1740b0; font-size: 1em; white-space: nowrap; display: none; }
#altAviso.ve { display: block; }
#altAviso.fuerte { background: var(--rojo); animation: late .6s ease-in-out infinite alternate; font-size: 1.2em; }
#altAviso b { display: inline-block; padding: 0 0.35em; margin-right: 0.4em; border-radius: 0.25em; background: #fff; color: var(--tinta); -webkit-text-stroke: 0; font-weight: inherit; }
/* Lo que se carga jugando (el aura Relámpago de la guía): oscuro, con su barra; late. */
#carga { display: none; align-items: center; gap: 0.5em; padding: 0.2em 0.9em 0.3em 0.3em; border-radius: 0.8em; background: #1b1740d8; border: 0.18em solid #4fc3ff; box-shadow: 0 0 0.9em #4fc3ff88; }
#carga.ve { display: flex; animation: late2 1.4s ease-in-out infinite; }
#carga > i { display: block; width: 2.3em; height: 2.3em; filter: brightness(0.45) drop-shadow(0 0 0.3em #4fc3ff); }
#carga > i svg { width: 100%; height: 100%; display: block; }
#carga .nombre { font-size: 0.95em; white-space: nowrap; }
#carga .barra { position: relative; width: 11em; height: 0.8em; margin-top: 0.2em; border-radius: 0.4em; background: #ffffff2a; overflow: hidden; }
#carga .barra b { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #4fc3ff, #fff38a); }

/* ---------- los botones que aparecen de a poco (sim/guia.js, botones): entran con un salto y un "¡NUEVO!" que late */
#hud .oculto { display: none !important; }
#hud .entra { animation: entra .6s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes entra { 0% { transform: scale(0) rotate(-25deg); } 100% { transform: none; } }
#hud .nuevo { position: absolute; left: 50%; top: -1.25em; transform: translateX(-50%); padding: 0.02em 0.45em 0.1em; border-radius: 0.5em; font-size: 0.85em; white-space: nowrap;
  background: #ff3d3d; color: #fff; border: 0.16em solid var(--tinta); display: none; animation: nuevoLate 0.8s ease-in-out infinite; z-index: 2; }
#hud .conNuevo .nuevo { display: block; }
#hud .conNuevo { box-shadow: 0 0.36em 0 var(--tinta), inset 0 0 0 0.2em #ffffffb8, 0 0 1.3em 0.35em #ffe45c !important; }
@keyframes nuevoLate { 50% { transform: translateX(-50%) scale(1.15); } }
/* Con la pantalla del trofeo o la del cofre abierta (ui/premio.js, ui/revelar.js), lo que podría verse por detrás se esconde. */
body.cubierto #top, body.cubierto #aviso, body.cubierto #toasts, body.cubierto #logrosCaja, body.cubierto #meta { display: none; }
/* Celular de pie: arriba no entra la meta entre las victorias y los botones; va debajo de la columna de la derecha, a todo lo ancho,
   y los carteles de logro, más abajo. */
@media (max-aspect-ratio: 3/4) {
  #meta { top: 17.6em; width: calc(100% - 3em); max-width: calc(100% - 3em); }
  #meta .cartel { font-size: 1.55em; }
  #logrosCaja { top: 27em; }
}

/* ---------- a la izquierda: lo que más se usa */
#side { position: absolute; left: 1.4em; top: 50%; transform: translateY(-42%); display: flex; flex-direction: column; align-items: flex-start; gap: 1.9em; }

/* ---------- abajo al centro: las vidas, la velocidad (mediana, como en Slime) y el nivel */
#speed { position: absolute; left: 50%; bottom: 1.2em; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.3em; }
#spRow { position: relative; display: flex; align-items: center; gap: 0.55em; }
#hud .shoe { display: block; width: 3.1em; height: 3.1em; transform: rotate(-12deg); filter: drop-shadow(0 0.16em 0 #1b17404d); }
#hud .shoe svg { width: 100%; height: 100%; display: block; overflow: visible; }
#spNum { font-size: 3.9em; line-height: 1; min-width: 1em; text-align: center; -webkit-text-stroke: 0.2em var(--tinta); }
#spNum.tick { animation: tick .12s ease-out; }
@keyframes tick { from { transform: scale(1.14); } to { transform: scale(1); } }
#spTxt { font-size: 1.35em; align-self: flex-end; margin: 0 0 0.55em 0.15em; }
#mults { list-style: none; margin: 0 0 0 0.5em; padding: 0; font-size: 1em; line-height: 1.2; -webkit-text-stroke: 0.28em var(--tinta); paint-order: stroke fill; }
#mults li { display: flex; gap: 0.4em; white-space: nowrap; }
#mults b { font-weight: inherit; }
#mults .m1 span { color: #6fe6d0; } #mults .m2 span { color: #8dff7a; } #mults .m3 span { color: #dfa0ff; }
/* Las vidas: corazones a la izquierda de la velocidad. No corren la fila cuando aparecen. */
#lives { position: absolute; right: 100%; top: 50%; margin-right: 1.3em; transform: translateY(-46%); display: flex; align-items: center; gap: 0.12em; }
#lives i { display: block; width: 2.5em; height: 2.5em; filter: drop-shadow(0 0.14em 0 #1b17404d); }
#lives i svg { width: 100%; height: 100%; display: block; overflow: visible; vertical-align: 0; }
#lives i.vacio { transform: scale(.86); }
#lives i.pierde { animation: pierde .5s ease-out; }
#lives i.gana { animation: bump .35s ease-out; }
#lives b { font-size: 1.8em; margin-left: 0.2em; -webkit-text-stroke-width: 0.24em; }
@keyframes pierde { 0% { transform: scale(1.7) rotate(-14deg); filter: brightness(2.2); } 45% { transform: scale(.7) rotate(8deg); } 100% { transform: scale(.86); } }
#nivel { display: flex; align-items: center; }
#nivel .ficha {
  width: 4em; height: 4em; border-radius: 50%; background: var(--naranja); border: var(--borde) solid var(--tinta); display: grid; place-items: center;
  font-size: 1.2em; z-index: 1; box-shadow: 0 0.24em 0 var(--tinta), inset 0 0 0 0.16em #ffffff80; box-sizing: border-box; line-height: 0.9; text-align: center;
}
#nivel .ficha small { display: block; font-size: 0.6em; }
#lvl.riel {
  position: relative; width: 41.5em; height: 3.25em; margin-left: -1.2em; border-radius: 0 1.65em 1.65em 0; background: var(--noche);
  border: var(--borde) solid var(--tinta); box-shadow: 0 0.26em 0 var(--tinta); overflow: hidden; box-sizing: border-box; padding: 0; display: block; font-size: 1em;
}
#lvl.riel i { position: absolute; inset: 0; }
#lvl.riel i u { display: block; height: 100%; width: 0; background: var(--barra); box-shadow: inset 0 0.3em 0 #ffffff59, inset 0 -0.3em 0 #c96a0040; border-right: 0.16em solid var(--tinta); transition: width .12s; }
#lvl.riel > span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.25em; z-index: 1; }

/* ---------- lo que se puede usar al lado y lo que viene de atrás */
#prompt.accion {
  position: absolute; left: 50%; bottom: 11.4em; transform: translateX(-50%); display: flex; align-items: center; gap: 0.6em; padding: 0.4em 0.9em 0.45em 0.45em;
  background: var(--noche); border: var(--borde) solid var(--tinta); border-radius: var(--radio-chico); box-shadow: 0 0.26em 0 var(--tinta), inset 0 0 0 0.14em #ffffff33; font-size: 1.25em; white-space: nowrap; pointer-events: auto;
}
#prompt.accion kbd { position: static; width: 1.7em; height: 1.7em; min-width: 0; padding: 0; border-radius: 0.4em; border: 0; box-shadow: 0 0.2em 0 #b9b9c6; font-size: 1em; }
#prompt.accion .ic { width: 1.3em; height: 1.3em; }
/* Algo te corre de atrás: qué es y a cuántos metros viene. La barra se vacía a medida que se acerca. */
#chase { position: absolute; left: 50%; bottom: 9.8em; transform: translateX(-50%); display: flex; align-items: center; gap: 0.6em; padding: 0.25em 0.9em 0.32em; border-radius: 1.2em; background: var(--rojo); border: var(--borde) solid var(--tinta); box-shadow: 0 0.24em 0 var(--tinta), inset 0 0.2em 0 #ffffff59; font-size: 1.1em; white-space: nowrap; }
#chase b { font-weight: inherit; }
#chase i { width: 10em; height: 0.85em; border-radius: 0.5em; background: #1b1740; border: 0.14em solid var(--tinta); overflow: hidden; }
#chase i u { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff3048, #ffd23a, #4dff88); background-size: 10em 100%; }
#chase.near { animation: throb .25s ease-in-out infinite alternate; }

/* ---------- avisos y números que flotan */
#toasts .toast { font-size: 1.7em; -webkit-text-stroke: 0.26em var(--tinta); paint-order: stroke fill; }
#hud .fl { font-size: 2em; -webkit-text-stroke: 0.26em var(--tinta); paint-order: stroke fill; }
#hud .fl.gold { font-size: 2.7em; }
/* Con una ventana abierta se esconde lo que quedaría tapado a medias: lo de la derecha, la meta, la velocidad de abajo y el
   contador de victorias (ya está en la cabecera de la tienda). */
body[data-panel] #tr, body[data-panel] #meta, body[data-panel] #speed, body[data-panel] #logrosCaja, body[data-panel="shop"] #tl { display: none; }
/* El aviso de que el salto que viene es el súper salto: va pegado bajo el muñeco. */
#combo { position: absolute; transform: translate(-50%, 0); font-size: 1.7em; color: #ffe45c; white-space: nowrap; animation: pop .25s ease-in-out infinite alternate; }
.options .creditos { margin: 10px 4px 0; font-size: 11px; line-height: 1.35; opacity: .6; text-align: center; }

/* El cartel antes de un video con premio (ui/anuncio.js). El botón de seguir sin verlo es igual de grande que el del video. */
#ofertaVideo { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #1b174099; pointer-events: auto; }
#ofertaVideo .caja { width: min(30em, 92vw); background: #fff8ec; border: 0.24em solid var(--ink); border-radius: 1.2em; box-shadow: 0 .4em 0 var(--ink); padding: 1.2em 1.4em 1.4em; text-align: center; color: var(--ink); }
#ofertaVideo h2 { margin: 0 0 .3em; font-size: 1.7em; }
#ofertaVideo .premio { margin: 0 0 1em; font-size: 1.3em; font-weight: 800; color: #c2410c; }
#ofertaVideo .botones { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
#ofertaVideo .botones .btn { width: 100%; min-height: 3.2em; display: flex; align-items: center; justify-content: center; gap: .4em; font-size: 1.15em; }
#ofertaVideo .no { background: var(--gris); }
#ofertaVideo .si { background: var(--violeta); }

/* ---------- a la derecha, abajo: las ofertas con video (2.1, solo donde hay videos con premio: Playgama y Poki) */
#ofertas { position: absolute; right: 1.4em; bottom: 5.6em; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75em; }
#ofertas[hidden] { display: none; }
#hud .oferta { position: relative; display: grid; grid-template-columns: 3em auto; column-gap: 0.45em; align-items: center; min-width: 11.5em; padding: 0.25em 0.9em 0.35em 0.35em;
  border-radius: 1em; background: #5d5a86; border: var(--borde) solid var(--tinta); box-shadow: 0 0.3em 0 var(--tinta), inset 0 0.2em 0 #ffffff59; pointer-events: auto; font: inherit; color: #fff; text-align: left; cursor: pointer; transition: transform .1s; }
#hud .oferta.listo { background: var(--naranja); animation: late2 1.6s ease-in-out infinite; }
#hud .oferta[data-oferta="speed"].listo { background: var(--azul); }
#hud .oferta[data-oferta="wins"].listo { background: var(--violeta); }
#hud .oferta > .ic { grid-row: 1 / 3; width: 3em; height: 3em; filter: drop-shadow(0 0.14em 0 #1b174066); }
#hud .oferta > b { font-weight: inherit; font-size: 1.12em; line-height: 1.05; white-space: nowrap; }
#hud .oferta > span { font-size: 0.92em; line-height: 1.1; white-space: nowrap; display: flex; align-items: center; gap: 0.25em; }
#hud .oferta > span .ic { width: 1.25em; height: 1.25em; }
#hud .oferta:hover { transform: scale(1.05); }
body[data-panel] #ofertas, body.cubierto #ofertas { display: none; }
/* En celular, a mitad de altura: abajo a la derecha está el botón de saltar. */
body.tactil #ofertas { bottom: auto; top: 46%; transform: translateY(-50%); }
/* 2.1: con la barra del Relámpago o un ×2 prendido, el cartel de usar (E) sube para no quedar tapado ("E See trails" quedaba detrás). */
#hud:has(#carga.ve) #prompt.accion, #hud:has(#boosts span) #prompt.accion { bottom: 14.6em; }
#hud:has(#carga.ve):has(#boosts span) #prompt.accion { bottom: 17.4em; }