/* =========================================================
   BUDAMOTORS GAMES - VIEWPORT FIT V1
   Mobile: H1 + HUD + tablero + controles en un viewport.
   Desktop: HUD lateral cuando aporta altura.
========================================================= */

body.game-fit{
  overflow-x:hidden;
}

.game-fit .pagina{
  min-height:100dvh;
  padding-top:68px;
  padding-bottom:8px;
}

.game-fit h1{
  margin:2px 0 4px;
  font-size:clamp(24px,6.8vw,38px);
  line-height:1.05;
}

.game-fit .subtitulo{
  margin:0 0 7px;
  font-size:clamp(9px,2.6vw,13px);
  line-height:1.15;
}

.game-fit .instrucciones,
.game-fit .volver-inicio{
  display:none;
}

/* HUD común: una sola línea */
.game-fit .panel,
.game-fit .snake-panel{
  width:min(96vw,720px);
  max-width:none;
  margin:5px auto 7px;
  padding:5px 6px;
  gap:4px;
  flex-wrap:nowrap;
  justify-content:space-evenly;
}

.game-fit .panel .dato,
.game-fit .snake-panel .dato{
  min-width:0;
  flex:1 1 0;
}

.game-fit .etiqueta{
  font-size:8px;
  line-height:1;
}

.game-fit .valor{
  margin-top:2px;
  font-size:clamp(14px,4vw,20px);
  line-height:1;
}

.game-fit .panel .boton-matrix,
.game-fit .snake-panel .boton-matrix{
  min-height:38px;
  padding:5px 9px;
  font-size:11px;
  white-space:nowrap;
}

/* ---------- BUSCAMINAS ---------- */
.buscaminas-pagina .niveles{
  margin:4px 0 5px;
  gap:5px;
  flex-wrap:nowrap;
}
.buscaminas-pagina .niveles .boton-matrix{
  flex:1 1 0;
  min-width:0;
  padding:7px 5px;
  font-size:10px;
}
.buscaminas-pagina .zona-tablero{
  overflow:hidden;
  padding:0;
}
.buscaminas-pagina #tablero{
  margin:0 auto;
  padding:3px;
  gap:1px;
}
.buscaminas-pagina .celda{
  width:var(--mine-cell,24px);
  height:var(--mine-cell,24px);
  font-size:calc(var(--mine-cell,24px) * .48);
}
.buscaminas-pagina #mensaje{
  min-height:0;
  height:0;
  overflow:hidden;
  margin:0;
}

/* ---------- 2048 ---------- */
.p2048-pagina .panel-2048{
  margin-top:5px;
}
.p2048-pagina .tablero-2048{
  width:min(94vw, calc(100dvh - 190px), 520px);
  height:min(94vw, calc(100dvh - 190px), 520px);
  padding:5px;
  gap:5px;
}
.p2048-pagina #mensaje2048{
  min-height:0;
  height:0;
  margin:0;
  overflow:hidden;
}

/* ---------- SUDOKU ---------- */
.sudoku-pagina{
  padding-left:4px !important;
  padding-right:4px !important;
}
.sudoku-pagina .sudoku-niveles{
  margin:4px 0 4px;
  gap:5px;
  flex-wrap:nowrap;
}
.sudoku-pagina .sudoku-niveles .boton-matrix{
  flex:1 1 0;
  min-width:0;
  padding:7px 4px;
  font-size:10px;
}
.sudoku-pagina .sudoku-reinicio{
  margin:0 0 4px;
}
.sudoku-pagina .sudoku-reinicio .boton-matrix{
  padding:6px 12px;
  font-size:10px;
}
.sudoku-pagina .sudoku-herramientas{
  margin:0 0 4px;
  gap:5px;
}
.sudoku-pagina .herramienta-btn{
  width:44px;
  height:34px;
  font-size:17px;
}
.sudoku-pagina .sudoku-tablero{
  width:min(94vw, calc(100dvh - 300px), 520px);
}
.sudoku-pagina .sudoku-numeros{
  width:min(94vw, calc(100dvh - 300px), 520px);
  margin-top:4px;
  gap:2px;
}
.sudoku-pagina .sudoku-numero-btn{
  min-height:31px;
  aspect-ratio:auto;
  font-size:14px;
}
.sudoku-pagina .sudoku-comprobacion{
  margin-top:4px;
}
.sudoku-pagina #comprobarBtn{
  padding:6px 10px;
  font-size:10px;
}
.sudoku-pagina .sudoku-limite,
.sudoku-pagina #mensajeSudoku{
  display:none;
}

/* ---------- SNAKE ---------- */
.snake-fit .snake-panel{
  margin-top:4px;
}
.snake-fit .snake-tablero-wrap{
  width:min(94vw, calc(100dvh - 255px), 610px);
}
.snake-fit #snakeMensaje{
  min-height:0;
  height:0;
  margin:0;
  overflow:hidden;
}
.snake-fit .snake-controles{
  width:154px;
  margin:5px auto 0;
  grid-template-columns:repeat(3,46px);
  grid-template-rows:repeat(2,37px);
  gap:4px;
}
.snake-fit .snake-control{
  width:46px;
  height:37px;
  font-size:15px;
}

/* =========================================================
   DESKTOP: paneles a los laterales para maximizar altura tablero
========================================================= */
@media (min-width: 900px) and (min-height: 650px){

  .game-fit .pagina{
    padding-top:70px;
  }

  .game-fit h1{
    font-size:30px;
    margin:0 0 5px;
  }

  .game-fit .subtitulo{
    margin-bottom:6px;
  }

  .p2048-pagina,
  .snake-fit{
    display:grid;
    grid-template-columns:minmax(150px,220px) minmax(380px,620px);
    grid-template-areas:
      "title title"
      "subtitle subtitle"
      "panel board";
    align-items:center;
    justify-content:center;
    column-gap:14px;
  }

  .p2048-pagina h1,
  .snake-fit h1{grid-area:title}
  .p2048-pagina .subtitulo,
  .snake-fit .subtitulo{grid-area:subtitle}

  .p2048-pagina .panel-2048,
  .snake-fit .snake-panel{
    grid-area:panel;
    width:100%;
    flex-direction:column;
    align-self:center;
    gap:12px;
    padding:14px 10px;
  }

  .p2048-pagina .tablero-2048,
  .snake-fit .snake-tablero-wrap{
    grid-area:board;
    width:min(74vh,620px);
    height:auto;
  }

  .snake-fit .snake-controles{
    position:fixed;
    right:18px;
    bottom:18px;
  }

  .buscaminas-pagina .panel{
    width:auto;
  }
}

@media (max-width: 700px){
  .game-fit .navbar{
    height:52px;
  }
  .game-fit .pagina{
    padding-top:59px;
  }
  .game-fit .logo{
    font-size:14px;
  }
  .game-fit .usuario-btn{
    padding:7px 9px;
    font-size:10px;
  }
}

@media (max-height: 700px) and (max-width: 700px){
  .game-fit h1{font-size:22px}
  .game-fit .subtitulo{display:none}
  .sudoku-pagina .sudoku-tablero{
    width:min(84vw, calc(100dvh - 245px));
  }
  .snake-fit .snake-tablero-wrap{
    width:min(82vw, calc(100dvh - 210px));
  }
}


@media(max-width:700px){
  .game-fit .pagina,
  .game-fit .juego-contenedor{
    width:100% !important;
    max-width:100vw !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:8px !important;
    padding-right:8px !important;
    overflow-x:hidden !important;
  }

  .game-fit h1,
  .game-fit .subtitulo{
    width:100%;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center;
  }

  .game-fit .panel,
  .game-fit .snake-panel,
  .p2048-pagina .panel-2048{
    width:calc(100vw - 24px) !important;
    max-width:720px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    transform:none !important;
    left:auto !important;
    right:auto !important;
  }

  .buscaminas-pagina .niveles,
  .buscaminas-pagina .zona-tablero,
  .buscaminas-pagina #tablero,
  .p2048-pagina .tablero-2048,
  .sudoku-pagina .sudoku-niveles,
  .sudoku-pagina .sudoku-reinicio,
  .sudoku-pagina .sudoku-herramientas,
  .sudoku-pagina .sudoku-tablero,
  .sudoku-pagina .sudoku-numeros,
  .sudoku-pagina .sudoku-comprobacion,
  .snake-fit .snake-tablero-wrap,
  .snake-fit .snake-controles{
    margin-left:auto !important;
    margin-right:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .buscaminas-pagina .zona-tablero{
    width:100%;
    display:flex;
    justify-content:center;
  }

  .sudoku-pagina .sudoku-tablero,
  .sudoku-pagina .sudoku-numeros{
    max-width:calc(100vw - 16px) !important;
  }

  .game-fit .volver-inicio{
    display:flex !important;
    justify-content:center;
    align-items:center;
    width:100%;
    margin:5px auto 0 !important;
    padding:0 !important;
  }

  .game-fit .volver-inicio .boton-matrix,
  .game-fit .volver-inicio a{
    min-height:32px;
    padding:5px 16px !important;
    font-size:9px !important;
    line-height:1;
    width:auto !important;
    min-width:105px;
    max-width:160px;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media(max-width:700px) and (max-height:720px){
  .game-fit .volver-inicio{margin-top:3px !important}
  .game-fit .volver-inicio .boton-matrix,
  .game-fit .volver-inicio a{
    min-height:27px;
    padding:3px 12px !important;
    font-size:8px !important;
  }
}

@media(max-width:700px){

  .game-fit .volver-inicio{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:100% !important;

    margin:
      11px
      auto
      4px !important;

    padding:0 !important;
  }

  .game-fit .volver-inicio .boton-matrix,
  .game-fit .volver-inicio a{
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:auto !important;
    min-width:112px !important;

    height:34px !important;
    min-height:34px !important;

    margin:0 auto !important;

    padding:
      0
      17px !important;

    line-height:1 !important;

    text-align:center !important;
    vertical-align:middle !important;

    font-size:9px !important;

    box-sizing:border-box !important;
  }

}


/* En pantallas bajas seguimos dejando una separación visible */
@media(max-width:700px) and (max-height:720px){

  .game-fit .volver-inicio{
    margin-top:8px !important;
  }

  .game-fit .volver-inicio .boton-matrix,
  .game-fit .volver-inicio a{
    height:31px !important;
    min-height:31px !important;

    padding:
      0
      14px !important;
  }

}