/* Ajustes de maquetación de Kuboplay sobre el juego original.
   Se cargan después del <style> del juego, así que no hay que tocar el HTML de upstream.
   Solo afectan a la pantalla de título (.title): el resto de pantallas se queda igual. */
#ov .title{
  text-align:center;
  align-items:center;
  width:100%;
  max-width:420px;
  min-height:100%;
  justify-content:safe center;
  padding-bottom:0;
}
#ov .title h1{margin:0 0 2px}
#ov .title .sub{margin:0 0 10px}
#ov .title button{width:100%;max-width:320px}
#ov .title .tiny{margin-top:16px;margin-bottom:0}
/* El título va sobre el campo: sombra dura para que el texto se lea encima del césped. */
#ov .title .sub,#ov .title .tiny{text-shadow:1px 1px 0 #1d1b26,-1px 1px 0 #1d1b26,1px -1px 0 #1d1b26,-1px -1px 0 #1d1b26}
#ov .title .warn{margin:0}
/* Horizontal bajo (móvil tumbado): el título ocupaba casi toda la altura. */
@media (orientation:landscape) and (max-height:520px){
  #ov .title{gap:8px}
  #ov .title h1{font-size:30px}
  #ov .title .sub{font-size:15px;margin:0 0 4px}
  #ov .title .big{font-size:17px;padding:7px}
  #ov .title .tiny{margin-top:8px}
}

/* ---- Ergonomía (1.1.1) ----
   Diana mínima de 44x44 px (Apple HIG / WCAG 2.5.5) y suelo de tamaño de letra.
   Los dos botones de esquina (sonido y pausa) no crecen de tamaño visible: se les
   amplía solo la zona que responde al dedo con un ::after, así no tapan el marcador. */
#bSnd,#bPause{position:absolute}
#bSnd::after,#bPause::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46px;height:46px}
#bSnd{font-size:15px;padding:4px 9px;opacity:.75}
#bPause{font-size:15px;padding:3px 10px;opacity:.85}
/* Botones y campos de las pantallas: alto mínimo de dedo. */
#ov button,#panel button,#dlg button{min-height:44px}
#ov .big{min-height:48px}
#ov input,#ov select{min-height:44px}
#bM{min-height:44px;padding:9px 14px;font-size:15px}
.mini{font-size:14px;min-height:44px}
/* Suelo de tamaño de letra en los textos pequeños. */
.chip{font-size:12px;padding:1px 6px}
#ov small,.card small{font-size:13px}
#ov .fcard small,#ov .fcard i{font-size:12px}
#ov .pity small{font-size:12px}
#ov .tiny{font-size:13.5px}
.sb{font-size:13px}
.mz,.dx{font-size:12px}
#mpad button{font-size:15px}
/* #ov tiene 12 px de relleno arriba y 24 abajo (hueco para desplazar en las
   pantallas largas), así que el bloque de título quedaba 6 px por encima del
   centro. En la pantalla de título se igualan los dos lados. */
#ov:has(> .title){padding-bottom:calc(var(--sb) + 12px)}
/* En el móvil el cuadro de texto salía pegado abajo (bottom: --sb + 10px) y
   tapaba la cruceta (que llega hasta --sb + 182px) y los botones A y B, así
   que para pasar el texto había que tocar justo encima de los controles. Con
   los controles en pantalla el cuadro se sube por encima de su franja; el
   alto se limita para que no se salga por arriba en apaisado. En el escritorio
   y en las escenas sin controles no cambia nada. */
@media (pointer:coarse){
  #pad:not(.hide) ~ #dlg{
    bottom:calc(var(--sb) + 190px);
    max-height:calc(100% - var(--sb) - var(--st) - 200px);
    overflow:auto;
  }
}