/* Mobile / viewport fixes */
/* ── RESPONSIVE MOBILE: vaso y personajes ──────────────────────────── */
@media screen and (max-width: 500px){
  body.mobile-mode #main-container{
    width:100vw !important;
    height:auto !important;
    min-height:260px;
  }
  body.mobile-mode #cup-wrapper{
    width:clamp(130px, 38vw, 175px) !important;
  }
  body.mobile-mode .char-container{
    width:clamp(80px, 24vw, 115px) !important;
  }
  body.mobile-mode #char-left{
    left:clamp(30px, 8vw, 65px) !important;
  }
  body.mobile-mode #char-right{
    right:clamp(30px, 8vw, 65px) !important;
  }
}
@media screen and (max-width: 380px){
  body.mobile-mode #cup-wrapper{
    width:clamp(110px, 35vw, 145px) !important;
  }
  body.mobile-mode .char-container{
    width:clamp(65px, 20vw, 95px) !important;
  }
  body.mobile-mode #char-left{
    left:clamp(20px, 5vw, 45px) !important;
  }
  body.mobile-mode #char-right{
    right:clamp(20px, 5vw, 45px) !important;
  }
}

/* ── MOBILE VIEWPORT FIXES ─────────────────────────────────────────
   Fixes barra del navegador en Chrome/Safari móvil
   dvh = dynamic viewport height (descuenta la barra del nav)
   safe-area-inset = espacio para el notch / home indicator
─────────────────────────────────────────────────────────────────── */
@supports (height: 100dvh){
  body{ height:100dvh !important; }
  .modal{ max-height:100dvh; }
  #orientation-warning,#loading-screen,#black-shroud,#game-cover,#start-menu{
    height:100dvh !important;
  }
}
/* Fallback para navegadores sin dvh: usa la variable JS --dvh */
@supports not (height: 100dvh){
  body{ height:calc(var(--dvh, 100vh) * 1px) !important; }
}
/* Modal content max-height adaptada al viewport real */
.modal-content{
  max-height:calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
/* Scroll suave en iOS */
.modal,.modal-content,.shop-grid,.inv-grid{
  -webkit-overflow-scrolling:touch;
}
/* Previene zoom accidental en inputs iOS */
input,select,textarea{
  font-size:max(16px,1em) !important;
}
/* Orientation landscape en móvil — reducir elementos */
@media screen and (max-height:450px) and (orientation:landscape){
  body.mobile-mode #cup-wrapper{width:120px;}
  body.mobile-mode .char-container{width:80px;}
  body.mobile-mode #top-bar{display:none;}
  body.mobile-mode .stat-card{min-width:52px;padding:1px 3px;}
  body.mobile-mode .stat-card span{font-size:8px;}
}