/* OrbitDoku v17.44.4 · Interfaz dedicada a teléfonos en formato retrato.
   La orientación se solicita en el manifiesto; este CSS aprovecha el alto real.
   No modifica lógica, casillas ni eventos táctiles. */
@media (max-width:600px) and (orientation:portrait) {
  html,body{overflow-x:hidden!important;overscroll-behavior-x:none!important;}
  .app.orbit-fitted:has(.board-shell){
    box-sizing:border-box!important;width:100%!important;max-width:540px!important;
    height:var(--orbit-visible-height,100svh)!important;
    max-height:var(--orbit-visible-height,100svh)!important;
    margin-inline:auto!important;
    padding:calc(3px + env(safe-area-inset-top,0px))
            max(6px,env(safe-area-inset-right,0px))
            calc(7px + env(safe-area-inset-bottom,0px))
            max(6px,env(safe-area-inset-left,0px))!important;
    display:flex!important;flex-direction:column!important;
    justify-content:flex-start!important;
    overflow:hidden!important;
    gap:0!important;
  }
  /* Reservar una pequeña franja para Inicio y Niveles.
     El título ya no se solapa con esos accesos a 320px. */
  .app.orbit-fitted:has(.board-shell)>header{
    width:100%;flex:0 0 auto!important;
    min-height:0!important;
    padding:36px 4px 5px!important;
    margin:0 0 5px!important;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .app.orbit-fitted:has(.board-shell)>header .logo-line{order:0;gap:3px!important;}
  .app.orbit-fitted:has(.board-shell)>header .eyebrow{
    order:1;display:block!important;max-width:95%;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
    font-size:8px!important;line-height:1.2!important;letter-spacing:.05em!important;
    margin:3px 0 0!important;
  }
  .app.orbit-fitted:has(.board-shell)>header .subtitle{display:none!important;}
  .app.orbit-fitted:has(.board-shell)>header .hero-planet{
    width:31px!important;height:31px!important;flex:0 0 31px!important;
  }
  .app.orbit-fitted:has(.board-shell)>header h1{
    font-size:clamp(24px,7.4vw,31px)!important;line-height:1!important;
  }
  .app.orbit-fitted:has(.board-shell)>header .back-menu{
    display:inline-flex!important;top:3px!important;left:5px!important;min-width:68px!important;
    min-height:32px!important;padding:7px 9px!important;font-size:11px!important;
  }
  .app.orbit-fitted:has(.board-shell)>.panel{
    box-sizing:border-box;flex:0 0 auto!important;
    width:100%;max-width:100%;min-height:0!important;
    margin-top:auto!important;margin-bottom:auto!important;
    padding:7px 7px 8px!important;
  }
  .app.orbit-fitted:has(.board-shell) .meta{margin:0 2px 5px!important;}
  .app.orbit-fitted:has(.board-shell) .rules-mini{margin-bottom:5px!important;}
  .app.orbit-fitted:has(.board-shell) .board-shell{
    display:block;width:var(--orbit-board-size)!important;
    height:var(--orbit-board-size)!important;
    max-width:100%!important;aspect-ratio:1!important;
    margin-inline:auto!important;flex:0 0 auto!important;
  }
  .app.orbit-fitted:has(.board-shell) .board-shell .grid{
    width:100%!important;height:100%!important;aspect-ratio:1!important;
  }
  .app.orbit-fitted:has(.board-shell) .board-swipe-help{
    margin:6px 2px 0!important;min-height:13px!important;
    font-size:10px!important;line-height:1.2!important;
  }
  .app.orbit-fitted:has(.board-shell) .msg{
    min-height:18px!important;max-height:35px!important;
    margin:5px 2px 2px!important;font-size:11px!important;
    line-height:1.25!important;overflow:hidden!important;
  }
  .app.orbit-fitted:has(.board-shell) .buttons{margin-top:6px!important;gap:8px!important;}
  .app.orbit-fitted:has(.board-shell) .buttons .button{
    min-height:46px!important;padding:9px 8px!important;
    font-size:12px!important;border-radius:12px!important;
  }
}
/* Teléfonos con altura reducida: priorizar el tablero y los botones. */
@media(max-width:600px) and (orientation:portrait) and (max-height:690px){
  .app.orbit-fitted:has(.board-shell)>header{
    padding-top:31px!important;padding-bottom:2px!important;margin-bottom:3px!important;
  }
  .app.orbit-fitted:has(.board-shell)>header .hero-planet{width:27px!important;height:27px!important;flex-basis:27px!important;}
  .app.orbit-fitted:has(.board-shell)>header .eyebrow{display:none!important;}
  .app.orbit-fitted:has(.board-shell)>.panel{padding:5px 5px 6px!important;}
  .app.orbit-fitted:has(.board-shell) .rules-mini{margin-bottom:3px!important;}
  .app.orbit-fitted:has(.board-shell) .board-swipe-help{margin-top:4px!important;}
  .app.orbit-fitted:has(.board-shell) .msg{margin-top:3px!important;}
  .app.orbit-fitted:has(.board-shell) .buttons{margin-top:4px!important;}
  .app.orbit-fitted:has(.board-shell) .buttons .button{min-height:44px!important;}
}
/* Dispositivos realmente compactos: si el tablero bajaría de 230 px, permitir
   desplazamiento vertical en vez de esconder botones o reducir más las casillas. */
@media(max-width:600px) and (orientation:portrait){
  .app.orbit-fitted.orbit-scroll:has(.board-shell){
    overflow-y:auto!important;overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start!important;
  }
  .app.orbit-fitted.orbit-scroll:has(.board-shell)>.panel{
    margin-top:4px!important;margin-bottom:12px!important;
  }
}
/* La franja superior del selector debe permanecer en una sola fila. */
@media(max-width:600px){
  .orbit-test-levels{top:calc(5px + env(safe-area-inset-top,0px))!important;
    right:calc(8px + env(safe-area-inset-right,0px))!important;
    min-height:32px!important;}
}