/* =============================================
   TETRIS NES — style.css  (responsive + gamepad)
   ============================================= */

:root {
  --black:    #080810;
  --red:      #e8001c;
  --red-sh:   #900010;
  --yellow:   #f5c400;
  --yellow-sh:#9a7c00;
  --blue:     #1034a6;
  --cyan:     #00e8ff;
  --green:    #00d060;
  --gray:     #484860;
  --gray-lt:  #8888a8;
  --white:    #e8e8f8;
  --border:   #5050a0;

  --I: #00e8ff; --O: #f5c400; --T: #c000e8;
  --S: #00d060; --Z: #e8001c; --L: #ff6800; --J: #1034a6;

  --font: 'Press Start 2P', monospace;
  --cell: 30px;

  /* Botonera */
  --pad-h: 220px;   /* altura de la gamepad en móvil portrait */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { background: #06060f; }

body {
  width: 100%; min-height: 100vh;
  background: transparent;
  font-family: var(--font);
  color: var(--white);
  overflow: hidden;
  image-rendering: pixelated;
  /* evita scroll accidental en touch */
  touch-action: none;
}

/* ── Z-INDEX STACK ──────────────────────────
   1  → canvas arcade-bg
   2  → scanlines
   3  → vignette
   10 → screens
   60 → overlay board
   100→ gamepad
──────────────────────────────────────────── */

#arcade-bg {
  position: fixed; inset: 0; z-index: 1;
  width: 100%; height: 100%; display: block;
}
.scanlines {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 2;
  background: repeating-linear-gradient(
    to bottom, transparent, transparent 2px,
    rgba(0,0,0,0.13) 2px, rgba(0,0,0,0.13) 4px
  );
}
.vignette {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 3;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,0.78) 100%);
}

.screen {
  display: none;
  position: fixed; inset: 0; z-index: 10;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.screen.active { display: flex; }

/* ─────────────────────────────────────────
   TITLE SCREEN
───────────────────────────────────────── */
.title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: powerOn 0.5s ease-out both;
  padding: 16px;
}

@keyframes powerOn {
  from { opacity:0; transform:scaleY(0.04); filter:brightness(3); }
  60%  { opacity:1; transform:scaleY(1.02); }
  to   { transform:scaleY(1); filter:brightness(1); }
}

.nes-logo {
  display: flex; gap: 5px;
  filter: drop-shadow(0 0 20px rgba(0,232,255,0.4));
}
.nes-logo span {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; font-size: 24px;
  border: 3px solid currentColor;
  position: relative;
  animation: logoFloat 2.4s ease-in-out infinite;
}
.nes-logo span::after {
  content:''; position:absolute;
  top:3px; left:3px; right:3px; height:8px;
  background:rgba(255,255,255,0.2);
}
.l-t  { color:var(--I); animation-delay:0s;   background:rgba(0,232,255,.15); }
.l-e  { color:var(--O); animation-delay:.12s; background:rgba(245,196,0,.15); }
.l-t2 { color:var(--Z); animation-delay:.24s; background:rgba(232,0,28,.15); }
.l-r  { color:var(--S); animation-delay:.36s; background:rgba(0,208,96,.15); }
.l-i  { color:var(--T); animation-delay:.48s; background:rgba(192,0,232,.15); }
.l-s  { color:var(--L); animation-delay:.60s; background:rgba(255,104,0,.15); }

@keyframes logoFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}

.subtitle { font-size:10px; color:var(--yellow); letter-spacing:4px; }

.title-controls {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 20px; border: 2px solid var(--gray);
  padding: 14px 20px; background: rgba(0,0,0,0.55);
}
.ctrl-item {
  display: flex; align-items: center; gap: 8px;
  font-size: 7px; color: var(--gray-lt);
}
.key {
  background: var(--gray); color: var(--white);
  padding: 3px 6px; font-size: 6px; min-width: 28px;
  text-align: center; border-bottom: 3px solid #28283a;
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   GAME LAYOUT — DESKTOP
───────────────────────────────────────── */
.game-layout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px;
}

.panel {
  width: 148px;
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 6px;
}

.nes-box {
  background: rgba(0,0,0,0.6);
  border: 3px solid var(--border);
  padding: 8px 10px 10px;
  position: relative;
}
.nes-box::before {
  content:''; position:absolute;
  top:3px; left:3px; right:3px; height:4px;
  background:rgba(255,255,255,0.06);
}
.box-label { font-size:7px; color:var(--gray-lt); letter-spacing:1px; margin-bottom:6px; }
.score-val { font-size:15px; letter-spacing:2px; color:var(--white); line-height:1.4; }
.hi-val    { color:var(--yellow); }
.hi-box    { border-color:var(--yellow-sh); }
.hi-box .box-label { color:var(--yellow); }

.nes-btn {
  font-family: var(--font); font-size:8px; letter-spacing:1px;
  border:none; cursor:pointer; padding:10px 14px;
  text-transform:uppercase; position:relative; top:0;
  transition:top 0.06s, box-shadow 0.06s;
  width:100%; text-align:center; image-rendering:pixelated;
  -webkit-tap-highlight-color: transparent;
}
.nes-btn:active { top:3px; box-shadow:none !important; }

.btn-red    { background:var(--red);    color:#fff; box-shadow:0 4px 0 var(--red-sh); }
.btn-yellow { background:var(--yellow); color:var(--black); box-shadow:0 4px 0 var(--yellow-sh); }
.btn-gray   { background:var(--gray);   color:var(--white); box-shadow:0 4px 0 #282838; }
.music-btn  { font-size:9px; }

/* ── BOARD ── */
.board-outer  { flex-shrink:0; }

.board-bezel {
  background:#000;
  border:5px solid var(--gray);
  box-shadow:
    0 0 0 2px var(--black),
    0 0 0 5px var(--border),
    0 0 0 7px var(--black),
    0 0 40px rgba(0,232,255,0.15),
    inset 0 0 30px rgba(0,0,0,0.9);
  position:relative;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(10, var(--cell));
  grid-template-rows: repeat(20, var(--cell));
  width:  calc(var(--cell) * 10);
  height: calc(var(--cell) * 20);
}

/* ── CELLS ── */
.cell {
  width:var(--cell); height:var(--cell);
  border:1px solid rgba(255,255,255,0.025);
}
.cell.filled {
  border:1px solid rgba(255,255,255,0.3);
  position:relative;
}
.cell.filled::before {
  content:''; position:absolute;
  top:2px; left:2px; right:2px; height:7px;
  background:rgba(255,255,255,0.32);
}
.cell.filled::after {
  content:''; position:absolute;
  bottom:2px; right:2px; width:7px; height:7px;
  background:rgba(0,0,0,0.4);
}

.cell.t-I { background:var(--I); box-shadow:0 0 6px rgba(0,232,255,.5) inset; }
.cell.t-O { background:var(--O); box-shadow:0 0 6px rgba(245,196,0,.5) inset; }
.cell.t-T { background:var(--T); box-shadow:0 0 6px rgba(192,0,232,.5) inset; }
.cell.t-S { background:var(--S); box-shadow:0 0 6px rgba(0,208,96,.5) inset; }
.cell.t-Z { background:var(--Z); box-shadow:0 0 6px rgba(232,0,28,.5) inset; }
.cell.t-L { background:var(--L); box-shadow:0 0 6px rgba(255,104,0,.5) inset; }
.cell.t-J { background:var(--J); box-shadow:0 0 6px rgba(16,52,166,.5) inset; }

.cell.ghost {
  background:transparent !important;
  border:2px solid rgba(255,255,255,0.2) !important;
  box-shadow:none !important;
}
.cell.ghost::before, .cell.ghost::after { display:none; }

@keyframes lineClear {
  0%   { background:#fff; border-color:#fff; }
  40%  { background:var(--yellow); }
  100% { opacity:0; }
}
.cell.clearing { animation:lineClear 0.28s ease forwards; }

/* ── NEXT PIECE (desktop) ── */
.next-grid {
  display:grid;
  grid-template-columns:repeat(4,24px);
  grid-template-rows:repeat(4,24px);
  margin:6px auto 0;
  width:96px; height:96px;
}
.next-grid .cell { width:24px; height:24px; }

/* ── PAUSE OVERLAY ── */
.board-bezel.is-paused::after {
  content:'PAUSE';
  position:absolute; inset:0;
  background:rgba(0,0,0,0.82);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); font-size:22px;
  color:var(--yellow); text-shadow:0 0 24px var(--yellow);
  letter-spacing:6px; z-index:50;
  animation:blink 0.9s step-end infinite;
}

/* ── GAME OVER OVERLAY ── */
.overlay {
  position:absolute; inset:0; z-index:60;
  background:rgba(0,0,0,0.88);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:16px; animation:fadeIn 0.25s ease;
}
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.overlay-title {
  font-size:16px; color:var(--red);
  text-shadow:0 0 16px var(--red);
  letter-spacing:4px;
  animation:blink 0.7s step-end infinite;
}
.overlay-score {
  font-size:9px; color:var(--yellow);
  letter-spacing:2px; line-height:2; text-align:center;
}
.overlay .nes-btn { width:180px; font-size:8px; }

/* ─────────────────────────────────────────
   GAMEPAD TÁCTIL
   Oculto en desktop, visible en touch
───────────────────────────────────────── */
.gamepad {
  display: none;  /* se activa via media query */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--pad-h);
  background: rgba(8,8,18,0.92);
  border-top: 3px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,232,255,0.1);
  flex-direction: column;
  user-select: none;
}

/* HUD compacto en la gamepad */
.mobile-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 4px;
  border-bottom: 2px solid rgba(80,80,160,0.4);
  gap: 8px;
}
.mobile-hud-left {
  display: flex; flex-direction: column; align-items: flex-start;
}
.mhud-label {
  font-size: 6px; color: var(--gray-lt); letter-spacing: 1px;
}
.mhud-val {
  font-size: 11px; color: var(--white); letter-spacing: 1px;
}

/* Mini preview siguiente pieza */
.mobile-hud-center {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.next-grid-mobile {
  display: grid;
  grid-template-columns: repeat(4, 16px);
  grid-template-rows: repeat(4, 16px);
  width: 64px; height: 64px;
}
.next-grid-mobile .cell { width:16px; height:16px; }

/* Botones sistema (música/pausa/salir) */
.mobile-hud-right {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.pad-sys-btn {
  font-family: var(--font);
  font-size: 8px;
  background: rgba(72,72,96,0.8);
  color: var(--white);
  border: 2px solid var(--gray);
  border-bottom: 3px solid #28283a;
  padding: 4px 8px;
  cursor: pointer;
  min-width: 36px;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.pad-sys-btn:active { transform: translateY(2px); border-bottom-width: 1px; }

/* Área de controles: D-pad + botones acción */
.pad-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px 10px;
  flex: 1;
}

/* ── D-PAD ── */
.dpad {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
}
.dpad-row {
  display: flex; align-items: center; gap: 2px;
}
.dpad-middle { /* fila del medio tiene 3 elementos */ }
.dpad-center {
  width: 44px; height: 44px;
  background: rgba(30,30,50,0.8);
  border: 2px solid var(--gray);
}

.dpad-btn {
  width: 44px; height: 44px;
  background: linear-gradient(to bottom, #3a3a5a, #22223a);
  border: 2px solid var(--border);
  border-bottom: 4px solid #1a1a30;
  color: var(--white);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: filter 0.05s;
  position: relative; top: 0;
}
.dpad-btn:active {
  background: linear-gradient(to bottom, #22223a, #3a3a5a);
  top: 2px;
  border-bottom-width: 2px;
  filter: brightness(1.4);
}

/* ── BOTONES ACCIÓN ── */
.action-btns {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.action-row-top { display: flex; justify-content: flex-end; }
.action-row-bot { display: flex; justify-content: flex-start; padding-left: 20px; }

.action-btn {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  position: relative; top: 0;
  transition: filter 0.05s;
  box-shadow: 0 5px 0 rgba(0,0,0,0.5);
}
.action-btn:active {
  top: 4px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.5);
  filter: brightness(1.3);
}

.btn-label {
  font-family: var(--font);
  font-size: 7px;
  letter-spacing: 1px;
  line-height: 1;
  pointer-events: none;
}

/* B = DROP (amarillo, como Select en NES) */
.btn-b {
  background: radial-gradient(circle at 35% 35%, #ffdf00, #c8a000);
  color: var(--black);
}

/* A = ROTAR (rojo, botón A del NES) */
.btn-a {
  background: radial-gradient(circle at 35% 35%, #ff3355, #c0001c);
  color: #fff;
}

/* ─────────────────────────────────────────
   UTILIDADES
───────────────────────────────────────── */
.hidden { display:none !important; }

@keyframes blink {
  0%,100% { opacity:1; }
  50%      { opacity:0; }
}
.blink { animation:blink 1s step-end infinite; }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */

/* Tablet landscape (≤1024px) */
@media (max-width: 1024px) {
  :root { --cell: 26px; }
  .panel { width: 130px; }
  .score-val { font-size: 13px; }
}

/* Tablet portrait + phones landscape (≤768px) */
@media (max-width: 768px) {
  :root { --cell: 22px; }
  .panel { width: 110px; }
  .score-val { font-size: 11px; }
  .nes-logo span { width:44px; height:44px; font-size:20px; }
}

/* ─────────────────────────────────────────
   MÓVIL PORTRAIT — layout vertical
   El tablero ocupa el ancho, gamepad abajo
───────────────────────────────────────── */
@media (max-width: 600px) and (orientation: portrait) {

  :root {
    --pad-h: 220px;
    /* cell se calcula via JS en setCellSize() */
  }

  .screen#screen-game {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
  }

  .game-layout {
    flex-direction: column;
    align-items: center;
    padding: 3px 0 0;
    gap: 0;
  }
  .panel-left  { display: none; }
  .panel-right { display: none; }

  .board-outer { margin: 0; }

  /* Activar gamepad */
  .gamepad { display: flex; }

  /* Title screen compacto */
  .title-wrap { gap: 16px; }
  .nes-logo span { width:34px; height:34px; font-size:15px; }
  .subtitle { font-size:8px; }
  .title-controls { font-size:6px; padding:10px 14px; gap:6px 14px; }
  .nes-btn { font-size:8px; padding:10px; }
}

/* Landscape en phones — tablero centrado, gamepad a los lados */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  :root {
    --cell: clamp(14px, calc((100vh - 16px) / 20), 24px);
    --pad-h: 0px;
  }

  .game-layout {
    gap: 8px;
    padding: 6px;
  }

  .panel { width: 100px; }
  .score-val { font-size: 10px; }
  .box-label { font-size: 6px; }

  /* Gamepad lateral en landscape: D-pad izq, acciones der */
  .gamepad {
    display: flex;
    position: fixed;
    top: 0; bottom: 0; left: 0; right: 0;
    height: 100%;
    background: transparent;
    border-top: none;
    box-shadow: none;
    pointer-events: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
  }

  .mobile-hud { display: none; }

  .pad-controls {
    pointer-events: all;
    padding: 0;
    width: 100%;
    justify-content: space-between;
  }

  /* Botones sistema flotantes */
  .mobile-hud-right {
    display: flex;
    position: fixed;
    top: 8px; right: 8px;
    flex-direction: row; gap: 4px;
  }
  .mobile-hud-left,
  .mobile-hud-center { display: none; }
}

/* Phones muy pequeños */
@media (max-width: 380px) and (orientation: portrait) {
  :root {
    --cell: clamp(14px, calc((100vw - 8px) / 10), 26px);
    --pad-h: 210px;
  }
  .nes-logo span { width:32px; height:32px; font-size:14px; }
  .dpad-btn, .dpad-center { width:40px; height:40px; }
  .action-btn { width:54px; height:54px; }
}