:root{
  --green:#42C920;
  --green-soft:#9dff87;
  --green-dim:#174d11;
  --green-dark:#092006;
  --black:#000;
  --panel:#020702;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  background:#000;
  color:var(--green);
  font-family:"Courier New",monospace;
  overflow-x:hidden;
}

body{
  min-height:100vh;
}


/* =========================================================
   NAVBAR
========================================================= */

.tetris-navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;

  height:60px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 22px;

  background:rgba(0,0,0,.97);

  border-bottom:1px solid var(--green);

  z-index:1000;
}

.tetris-brand{
  color:var(--green);

  text-decoration:none;

  font-weight:900;
  font-size:20px;

  letter-spacing:3px;

  text-shadow:
    0 0 7px rgba(66,201,32,.75);
}

.tetris-user{
  position:relative;
}

.tetris-user-btn{
  border:1px solid var(--green);

  background:#000;
  color:var(--green);

  padding:9px 13px;

  font-family:inherit;
  font-weight:700;

  cursor:pointer;
}

.tetris-user-menu{
  display:none;

  position:absolute;

  right:0;
  top:calc(100% + 8px);

  min-width:180px;

  border:1px solid var(--green);

  background:#000;
}

.tetris-user-menu.show{
  display:block;
}

.tetris-user-menu a{
  display:block;

  color:var(--green);

  text-decoration:none;

  padding:12px 14px;
}

.tetris-user-menu a:hover{
  background:var(--green);
  color:#000;
}


/* =========================================================
   PAGE
========================================================= */

.tetris-page{
  width:100%;
  max-width:1050px;

  margin:0 auto;

  padding:88px 16px 42px;
}

.tetris-header{
  text-align:center;

  margin-bottom:20px;
}

.tetris-header h1{
  margin:0;

  font-size:clamp(30px,5vw,50px);

  letter-spacing:4px;

  text-shadow:
    0 0 6px var(--green),
    0 0 18px rgba(66,201,32,.55);
}

.tetris-header p{
  margin:8px 0 0;

  opacity:.65;

  letter-spacing:1px;
}


/* =========================================================
   LAYOUT
========================================================= */

.tetris-layout{
  width:100%;

  display:grid;

  grid-template-columns:
    145px
    minmax(260px,400px)
    145px;

  gap:15px;

  justify-content:center;
  align-items:center;
}

.tetris-side{
  min-height:460px;

  display:flex;
  flex-direction:column;

  justify-content:center;

  gap:12px;
}

.panel-box{
  padding:13px 10px;

  border:1px solid rgba(66,201,32,.62);

  background:var(--panel);

  text-align:center;

  box-shadow:
    inset 0 0 12px rgba(66,201,32,.04);
}

.panel-label{
  display:block;

  margin-bottom:7px;

  font-size:11px;

  opacity:.58;

  letter-spacing:1px;
}

.panel-box strong{
  display:block;

  font-size:20px;

  letter-spacing:1px;
}


/* =========================================================
   GAME
========================================================= */

.game-shell{
  position:relative;

  width:100%;

  aspect-ratio:1 / 2;

  border:1px solid var(--green);

  background:#000;

  box-shadow:
    0 0 15px rgba(66,201,32,.35),
    inset 0 0 24px rgba(66,201,32,.06);

  overflow:hidden;
}

#tetrisCanvas{
  display:block;

  width:100%;
  height:100%;

  background:#000;
}

.game-message{
  position:absolute;

  top:45%;
  left:0;
  right:0;

  text-align:center;

  font-size:clamp(16px,3vw,26px);

  font-weight:900;

  letter-spacing:2px;

  color:var(--green-soft);

  text-shadow:
    0 0 8px var(--green),
    0 0 18px rgba(66,201,32,.85);

  pointer-events:none;
}


/* =========================================================
   NEXT PIECE
========================================================= */

.next-box{
  padding-bottom:8px;
}

#nextCanvas{
  display:block;

  width:100%;
  max-width:130px;

  aspect-ratio:1;

  margin:0 auto;

  background:#000;

  border:1px solid rgba(66,201,32,.22);
}


/* =========================================================
   CONTROLS
========================================================= */

.side-controls{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:8px;
}

.control-btn,
.action-btn,
.matrix-btn{
  appearance:none;

  border:1px solid var(--green);

  background:#000;
  color:var(--green);

  font-family:inherit;
  font-weight:900;

  cursor:pointer;

  transition:
    background .15s,
    color .15s,
    box-shadow .15s,
    transform .08s;
}

.control-btn{
  min-height:58px;

  font-size:24px;
}

.action-btn{
  min-height:58px;

  padding:10px 6px;

  font-size:12px;
}

.drop-btn{
  min-height:76px;
}

.control-btn:hover,
.action-btn:hover,
.matrix-btn:hover{
  background:var(--green);

  color:#000;

  box-shadow:
    0 0 12px rgba(66,201,32,.85);
}

.control-btn:active,
.action-btn:active{
  transform:scale(.96);
}


/* =========================================================
   BOTTOM
========================================================= */

.bottom-actions{
  display:flex;

  justify-content:center;

  gap:10px;

  margin-top:20px;
}

.matrix-btn{
  display:inline-block;

  min-width:150px;

  padding:10px 18px;

  text-align:center;

  text-decoration:none;
}

.instructions{
  text-align:center;

  margin-top:20px;

  font-size:12px;

  line-height:1.7;

  opacity:.55;
}


/* =========================================================
   MODAL
========================================================= */

.matrix-modal{
  position:fixed;

  inset:0;

  display:none;

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

  padding:20px;

  background:rgba(0,0,0,.84);

  z-index:5000;
}

.matrix-modal.show{
  display:flex;
}

.matrix-modal-box{
  position:relative;

  width:min(90vw,470px);

  padding:36px 24px;

  border:1px solid var(--green);

  background:#000;

  text-align:center;

  box-shadow:
    0 0 18px rgba(66,201,32,.7),
    0 0 45px rgba(66,201,32,.25);
}

.matrix-modal-box h2{
  margin:0 0 14px;

  color:var(--green);

  letter-spacing:2px;

  text-shadow:
    0 0 9px var(--green);
}

.matrix-modal-box p{
  margin:0;

  color:var(--green-soft);

  line-height:1.5;
}

.matrix-modal-close{
  position:absolute;

  top:6px;
  right:10px;

  border:0;

  background:none;

  color:var(--green);

  font-size:28px;

  cursor:pointer;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:760px){

  .tetris-page{
    padding-left:6px;
    padding-right:6px;
  }

  .tetris-layout{
    grid-template-columns:
      68px
      minmax(220px,1fr)
      68px;

    gap:5px;
  }

  .tetris-side{
    min-height:380px;

    gap:6px;
  }

  .panel-box{
    padding:8px 4px;
  }

  .panel-label{
    font-size:8px;
  }

  .panel-box strong{
    font-size:11px;
  }

  .control-btn{
    min-height:48px;

    font-size:18px;
  }

  .action-btn{
    min-height:48px;

    padding:4px 2px;

    font-size:8px;
  }

  .drop-btn{
    min-height:62px;
  }

  #nextCanvas{
    max-width:60px;
  }

}

@media(max-width:460px){

  .tetris-navbar{
    padding:0 10px;
  }

  .tetris-brand{
    font-size:15px;
  }

  .tetris-layout{
    grid-template-columns:
      56px
      minmax(200px,1fr)
      56px;
  }

  .side-controls{
    grid-template-columns:1fr;
  }

  .bottom-actions{
    flex-direction:column;

    align-items:center;
  }

}


/* =========================================================
   VIEWPORT FIT / NUEVA DISPOSICIÓN
========================================================= */
.tetris-stage{
  width:100%;
  display:grid;
  grid-template-columns:145px minmax(260px,400px) 145px;
  grid-template-areas:"hud board controls";
  gap:12px;
  align-items:center;
  justify-content:center;
}
.tetris-hud{
  grid-area:hud;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tetris-stage .game-shell{grid-area:board}
.tetris-controls{
  grid-area:controls;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}
.tetris-controls .rotate-btn,
.tetris-controls .down-btn,
.tetris-controls .drop-btn{
  grid-column:1/-1;
}
.tetris-controls .drop-btn{min-height:58px}

@media(max-width:760px){
  .tetris-page{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
    padding:59px 4px 3px;
  }
  .tetris-header{
    margin-bottom:4px;
  }
  .tetris-header h1{
    font-size:clamp(22px,7vw,31px);
    line-height:1;
  }
  .tetris-header p{
    display:none;
  }
  .tetris-stage{
    height:calc(100dvh - 100px);
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:
      "hud"
      "board"
      "controls";
    gap:3px;
  }
  .tetris-hud{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1.15fr;
    gap:3px;
  }
  .tetris-hud .panel-box{
    min-height:36px;
    padding:3px 2px;
  }
  .tetris-hud .panel-label{
    margin-bottom:2px;
    font-size:7px;
  }
  .tetris-hud .panel-box strong{
    font-size:10px;
  }
  .tetris-hud #nextCanvas{
    width:38px;
    height:38px;
    max-width:38px;
  }
  .tetris-stage .game-shell{
    width:auto;
    height:100%;
    max-height:100%;
    aspect-ratio:1/2;
    margin:0 auto;
  }
  .tetris-controls{
    width:100%;
    grid-template-columns:repeat(5,1fr);
    gap:3px;
  }
  .tetris-controls .rotate-btn,
  .tetris-controls .down-btn,
  .tetris-controls .drop-btn{
    grid-column:auto;
  }
  .tetris-controls .control-btn,
  .tetris-controls .action-btn,
  .tetris-controls .drop-btn{
    min-height:37px;
    height:37px;
    padding:2px;
    font-size:8px;
  }
  .bottom-actions,
  .instructions{
    display:none;
  }
}

@media(min-width:900px) and (min-height:650px){
  .tetris-page{
    height:100dvh;
    overflow:hidden;
    padding-top:66px;
    padding-bottom:3px;
  }
  .tetris-header{
    margin-bottom:3px;
  }
  .tetris-header h1{
    font-size:29px;
  }
  .tetris-header p{
    margin-top:3px;
    font-size:10px;
  }
  .tetris-stage{
    height:calc(100dvh - 115px);
    grid-template-columns:150px auto 150px;
  }
  .tetris-stage .game-shell{
    width:auto;
    height:100%;
  }
  .bottom-actions,
  .instructions{
    display:none;
  }
}


@media(max-width:760px){
  .tetris-page{
    width:100% !important;
    max-width:100vw !important;
    padding-left:8px !important;
    padding-right:8px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .tetris-header,
  .tetris-stage,
  .tetris-hud,
  .tetris-stage .game-shell,
  .tetris-controls{
    margin-left:auto !important;
    margin-right:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .tetris-stage,
  .tetris-hud,
  .tetris-controls{width:100% !important}

  .bottom-actions{
    display:flex !important;
    justify-content:center;
    width:100%;
    margin:3px auto 0 !important;
  }

  .bottom-actions #restartBtn{display:none !important}

  .bottom-actions a.matrix-btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:auto !important;
    min-width:105px;
    min-height:27px;
    padding:3px 13px !important;
    font-size:8px !important;
  }
}


@media(max-width:760px){

  /*
    El stage anterior ocupaba casi toda la altura restante.
    Dejamos ahora un espacio reservado para INICIO.
  */
  .tetris-stage{
    height:
      calc(
        100dvh -
        142px
      ) !important;

    max-height:
      calc(
        100dvh -
        142px
      ) !important;
  }


  .bottom-actions{
    position:relative !important;

    display:flex !important;

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

    width:100% !important;

    height:36px !important;

    margin:
      9px
      auto
      3px !important;

    padding:0 !important;

    overflow:visible !important;

    flex-shrink:0 !important;
  }


  .bottom-actions #restartBtn{
    display:none !important;
  }


  .bottom-actions a.matrix-btn{
    position:relative !important;

    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;

    font-size:9px !important;

    box-sizing:border-box !important;

    overflow:visible !important;
  }

}


/*
  En dispositivos especialmente bajos reducimos un poco más
  el tablero, pero nunca recortamos el botón.
*/
@media(max-width:760px) and (max-height:760px){

  .tetris-stage{
    height:
      calc(
        100dvh -
        134px
      ) !important;

    max-height:
      calc(
        100dvh -
        134px
      ) !important;
  }

  .bottom-actions{
    margin-top:6px !important;
  }

  .bottom-actions a.matrix-btn{
    height:31px !important;
    min-height:31px !important;
  }

}