/* Datos y acciones en píxeles CSS: conservan su tamaño al reducir el dibujo. */
#panel-juego{display:contents}
#datos-juego{order:-1}
#campo-juego{position:relative;flex:none;overflow:hidden;max-width:100%;background:#171522;border-radius:4px;box-shadow:0 10px 28px #0005}
#campo-juego #lienzo{position:absolute;max-width:none;max-height:none;margin:0;aspect-ratio:auto;border-radius:0;box-shadow:none}
#datos-juego,#acciones-juego{width:100%;max-width:480px;flex:none}
#datos-juego[hidden],#acciones-juego[hidden]{display:none}
#datos-juego{height:138px;overflow:auto;background:#201e30;border:2px solid #79617c;padding:6px 8px;color:#f2ede4}
.datos-resumen{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:4px 8px;min-width:0;height:55px;overflow:auto}
.datos-resumen>span{display:flex;flex-direction:column;flex-shrink:0;max-width:100%}
.datos-resumen small{font:400 20px/1.1 var(--letra-bela);color:#cfbed9}
.datos-resumen strong{font:400 28px/1.15 var(--letra-bela);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.datos-resumen strong[data-largo]{white-space:nowrap;overflow-wrap:normal}
.datos-resumen strong[data-largo="1"]{font-size:22px}
.datos-resumen strong[data-largo="2"]{font-size:18px}
.vidas-corazones{display:flex;align-items:center;gap:4px;min-height:33px}
.vidas-corazones svg{width:22px;height:22px;flex:none;fill:#e24a5a;shape-rendering:crispEdges}
.vidas-corazones .corazon-vacio{fill:#65525e}
.vidas-corazones .brillo-corazon{fill:#f58a94}
.vidas-corazones{flex-wrap:nowrap;min-width:0;overflow:hidden}
.vidas-corazones[data-total="4"]{gap:2px}
.vidas-corazones[data-total="4"] svg{width:18px;height:18px}
.vidas-corazones .vidas-cuenta{font:400 28px/1 var(--letra-bela);font-variant-numeric:tabular-nums;white-space:nowrap}
/* Avisos largos se consultan dentro de su espacio; nunca empujan el campo. */
.datos-aviso{font:400 24px/1.2 var(--letra-bela);margin:4px 0 0;padding-top:4px;border-top:1px solid #79617c;height:63px;overflow:auto;white-space:pre-line;overflow-wrap:anywhere}
#datos-juego[data-tono=peligro]{border-color:#ffb3a3}
#datos-juego[data-tono=peligro] .datos-aviso{color:#ffb3a3}
#datos-juego[data-tono=premio] .datos-aviso{color:#b9e7c9}
#acciones-juego{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:114px;grid-template-rows:108px;gap:12px;padding:3px}
#acciones-juego button{min-width:44px;min-height:72px;padding:6px 4px;font:400 24px/1.15 var(--letra-bela);white-space:pre-line;overflow-wrap:anywhere}
#acciones-juego .accion-ancha{grid-column:1/-1}
#acciones-juego .mando-mantenido{min-height:80px;touch-action:none}
#acciones-juego .mando-arrastre{position:relative;touch-action:none;border-style:dashed;font-size:20px;overflow:hidden}
#acciones-juego .mando-arrastre[data-arrastrando="true"]::after{content:'';position:absolute;left:var(--dedo-x);top:var(--dedo-y);width:14px;height:14px;transform:translate(-50%,-50%);border:2px solid currentColor;pointer-events:none}
#acciones-juego[data-perfil="batbela-tactil"]{grid-template-columns:minmax(0,1fr) 116px}
#datos-juego[data-perfil="batbela-tactil"] .datos-resumen{display:flex;flex-wrap:nowrap;height:33px;align-items:center}
#datos-juego[data-perfil="batbela-tactil"] .datos-resumen>span{flex-shrink:0}
#datos-juego[data-perfil="batbela-tactil"] .datos-resumen small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#datos-juego[data-perfil="batbela-tactil"] .datos-aviso{height:85px;font-size:20px;line-height:1.3}
#acciones-juego[data-columnas="3"]{grid-template-columns:1fr 1fr 1.3fr}
/* Selección y acción comparten las mismas reservas, incluso sin botones. */
#acciones-juego[data-filas="2"]{grid-template-rows:repeat(2,48px)}
#acciones-juego[data-filas="2"] button{min-height:48px;padding:0 4px;font-size:20px;line-height:1}
.en-partida #barra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:3px}
.en-partida #barra button{min-width:44px;min-height:48px;max-width:none;padding:6px 4px;font-size:24px;white-space:normal;overflow:visible;text-overflow:clip}
.en-partida #boton-jugador,.en-partida #boton-ajustes,.en-partida #boton-ranking{display:none}
#capa-pausa button,#ayuda-pausa{font-size:24px}
#capa-pausa .menu-pausa{grid-template-columns:1fr}
#capa-pausa .menu-pausa button{padding:8px 4px;overflow-wrap:anywhere}
#estado-conexion:empty{display:none}
.en-partida #estado-conexion{display:block;height:20px;min-height:20px;overflow:auto}
#barra.barra-prueba{display:flex;flex-wrap:wrap;gap:12px}
#barra.barra-prueba #etiqueta-prueba{min-width:100px}
@media(max-width:520px){
  #escena{gap:6px}
}
@media(max-width:340px){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}#datos-juego{padding:4px 6px}}
@media(orientation:landscape) and (max-height:520px){
  #escena.en-partida{--panel-lateral:1;--ancho-panel-juego:272px;display:grid;grid-template-columns:minmax(0,1fr) var(--ancho-panel-juego);grid-template-rows:minmax(0,1fr) 114px 54px 20px;align-items:start;gap:8px;width:100%;max-width:none;height:100%}
  .en-partida #campo-juego{grid-column:1;grid-row:1/5;align-self:center;justify-self:center}
  .en-partida #datos-juego{grid-column:2;grid-row:1;min-height:0;max-height:100%}
  .en-partida #acciones-juego{grid-column:2;grid-row:2;min-height:0;max-height:100%;overflow-y:auto}
  .en-partida #barra{grid-column:2;grid-row:3}
  .en-partida #estado-conexion{grid-column:2;grid-row:4}
}
/* Con espacio de escritorio, el panel ocupa una columna propia. Su contenido
   nunca resta altura al campo ni lo redimensiona al cambiar una fase. */
@media(min-width:900px) and (min-height:560px){
  #escena.en-partida{--panel-lateral:1;--escritorio-juego:1;--ancho-panel-juego:320px;display:grid;grid-template-columns:minmax(0,1fr) var(--ancho-panel-juego);grid-template-rows:minmax(0,1fr);gap:24px;width:100%;max-width:1000px;height:min(880px,calc(var(--alto-visible,100dvh) - 32px));align-items:start}
  .en-partida #campo-juego{grid-column:1;grid-row:1;align-self:center;justify-self:end}
  .en-partida #panel-juego{grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:16px;height:100%;min-height:0;overflow-y:auto;padding:4px;scrollbar-gutter:stable}
  .en-partida #datos-juego{height:auto;min-height:284px;overflow:visible;padding:10px}
  .en-partida #datos-juego .datos-resumen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(55px,auto);align-content:start;align-items:start;height:auto;min-height:118px;overflow:visible;gap:8px}
  .en-partida #datos-juego .datos-resumen>span{min-width:0}
  /* La primera columna es la de los puntos: la que crece. */
  .en-partida #datos-juego .datos-resumen[data-columnas="3"]{grid-template-columns:minmax(0,1.3fr) minmax(0,1.1fr) minmax(0,.9fr)}
  .en-partida #datos-juego .datos-resumen small{position:static;width:auto;height:auto;clip-path:none;overflow:visible}
  .en-partida #datos-juego .datos-aviso{height:auto;min-height:120px;overflow:visible;font-size:24px;line-height:1.2}
  .en-partida #acciones-juego{height:auto;grid-template-rows:108px}
  .en-partida #acciones-juego:empty{display:none}
  .en-partida #acciones-juego[data-filas="2"]{grid-template-rows:repeat(2,72px)}
  .en-partida #acciones-juego[data-filas="2"] button{min-height:72px;padding:4px;font-size:24px;line-height:1.15}
  .en-partida #barra{margin-top:auto;width:100%;flex:none}
  .en-partida #estado-conexion{height:auto;overflow:visible;flex:none}
  .en-partida #estado-conexion:empty{display:none}
}
/* El canto de la pantalla es del sistema: en Android, deslizar desde el borde
   es «atrás» (unos 20-30 px). Los mandos que se arrastran o se mantienen se
   separan del canto para que el pulgar no empiece nunca en esa franja. */
@media (pointer:coarse){
  .en-partida #acciones-juego{padding-left:18px;padding-right:18px}
}
@media (pointer:coarse) and (max-width:340px){
  .en-partida #acciones-juego{padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right))}
}

/* Fila estable: cabe en la reserva actual y no reduce el campo. */
.datos-estado{margin:2px 0 0;height:40px;font:400 16px/20px var(--letra-bela);white-space:pre-line;overflow:auto}
.datos-estado[hidden]{display:none}
#datos-juego[data-perfil="batbela-tactil"] .datos-estado:not([hidden])+.datos-aviso{height:43px}
#acciones-juego[data-perfil="batbela-tactil"]:has(.accion-ancha){grid-template-rows:repeat(3,minmax(44px,auto));height:168px;gap:12px;overflow-y:auto}
#acciones-juego[data-perfil="batbela-tactil"] .accion-ancha{min-height:44px;font-size:16px;padding:4px}
#ayuda-pausa{white-space:pre-line}