/* Tetris · piel Revista. Papel, Gloock y Geologica. */

body.game-mode {
  margin: 0;
  background: var(--c-bg) !important;
  background-image: none !important;
  color: var(--c-text);
  font-family: var(--f-text);
}

.tetris-shell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

/* El tablero y sus controles son una superficie de juego táctil. */
#game-native-area,
#tetris-game-wrapper,
#tetris-container,
#tetris,
#controls-mobile,
.control-btn,
.control-btn-alt {
  touch-action: none;
}

/* Desktop: el panel va al lado, así que el alto descuenta título y bajada
   (van arriba del marco) y la barra, no el panel. */
.tetris-shell {
  --frame-max-h: calc(
    100dvh
    - var(--header-layout-h)
    - var(--tap)
    - var(--fs-label) * var(--lh-label)
    - var(--fs-game) * var(--lh-game)
    - var(--sp-4)
    - 2 * var(--fs-lead) * var(--lh-lead)
    - var(--tap)
    - var(--fs-small) * var(--lh-small)
    - var(--sp-8)
    - var(--sp-12)
    - var(--sp-4)
  );
}

body:has(.tetris-shell) .game-note {
  padding: 0 !important;
  margin: 0 !important;
}

body:has(.tetris-shell) .game-bottom-bar {
  margin-top: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

@media (min-width: 1024px) {
  body:has(.tetris-shell) .game-bottom-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
  }
  body:has(.tetris-shell) .game-shell-actions {
    width: 100% !important;
    order: 1;
  }
  body:has(.tetris-shell) .game-credits {
    order: 2;
    white-space: nowrap;
  }
}

body:has(.tetris-shell) main.game-ui-app {
  padding-bottom: 0;
}

#tetris-game-wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
  width: 100%;
}

#tetris-game-wrapper > .game-ui-surface-frame,
#tetris-game-wrapper > #tetris-container {
  grid-column: 1 / 9;
  grid-row: 1;
  justify-self: center;
  width: min(calc((var(--frame-max-h) - 2px) / 2 + 2px), 100%);
  height: var(--frame-max-h);
  max-height: var(--frame-max-h);
  aspect-ratio: auto;
  min-width: 0;
  padding: 0;
  border: var(--rule);
  background: var(--c-bg-print);
  box-shadow: none;
  overflow: hidden;
}

#tetris-game-wrapper > .game-ui-surface-frame #tetris-container {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.game-sidebar.right {
  grid-column: 9 / 13;
  grid-row: 1;
  align-self: start;
  min-width: 0;
}

canvas#tetris,
#hold-canvas,
.next-queue canvas {
  display: block;
  image-rendering: auto !important;
  background: transparent;
  border: 0;
  box-shadow: none;
}

canvas#tetris {
  display: block;
  width: 100% !important;
  height: 100% !important;
  image-rendering: auto !important;
}

.game-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
  grid-area: side;
}

.tetris-meta {
  margin: 0;
  color: var(--c-text);
  font: 500 var(--fs-label)/var(--lh-label) var(--f-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

h1.game-title {
  margin: 0 0 var(--sp-4);
  color: var(--c-text);
  font: 400 var(--fs-game)/var(--lh-game) var(--f-display);
}

#hold-canvas,
.next-queue canvas:not(#next-0) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.glass-panel,
.game-ui-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

h2.panel-title,
.tetris-shell .stat-label,
.tetris-shell .panel-title {
  margin: 0;
  color: var(--c-text);
  font: 500 var(--fs-label)/var(--lh-label) var(--f-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stat-value {
  color: var(--c-text);
  font: 400 var(--fs-data)/var(--lh-data) var(--f-display);
  font-variant-numeric: tabular-nums;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  margin: 0;
}

#controls-mobile {
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-2);
  width: 100%;
  margin-top: var(--sp-4);
}

.control-btn,
.control-btn-alt {
  min-height: var(--tap);
  border: var(--rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--c-text);
  font: 500 var(--fs-ui)/var(--lh-ui) var(--f-text);
}

.control-btn:first-child,
.d-pad .control-btn:first-child { border-left: 0; }

.control-btn-alt.drop {
  grid-column: auto;
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-on-accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.game-sidebar .lines-stat,
.lines-stat,
.high-score { display: none !important; }

@media (max-width: 1023px) {
  #tetris-game-wrapper { display: flex; flex-direction: column; }
  .game-sidebar.right {
    order: 1;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    border-top: var(--rule);
    border-bottom: var(--rule);
    gap: 0;
  }
  .game-sidebar .stats { display: contents; }
  .data-cell,
  .game-sidebar .stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    min-height: var(--panel-h);
    padding: var(--sp-3) var(--sp-4);
    border-left: var(--rule);
    position: static !important;
    margin: 0 !important;
  }
  .data-cell { border-left: 0; }
  #tetris-container,
  #tetris-game-wrapper > .game-ui-surface-frame { order: 2; grid-row: auto; width: min(100%, calc(var(--frame-max-h) / 2)); justify-self: start; align-self: center; }
  #controls-mobile { display: grid; order: 3; }
}

@media (max-width: 760px) {
  .tetris-shell {
    --frame-max-h: calc(100dvh - var(--header-layout-h) - var(--tap) - var(--tap) - var(--fs-label) * var(--lh-label) - var(--fs-game) * var(--lh-game) - var(--panel-h) - 3 * var(--fs-data) - var(--tap) - var(--tap) - var(--sp-4));
    padding: 0;
    gap: 0;
  }
  h1.game-title { margin: 0 !important; }
  #tetris-container,
  #tetris-game-wrapper > .game-ui-surface-frame { max-height: var(--frame-max-h); }
  #controls-mobile { margin-top: 0; }
  .control-btn,
  .control-btn-alt { min-height: var(--tap); }
}


@media (min-width: 1024px) {
  .tetris-shell .game-sidebar.right { gap: 0; border-top: var(--rule); border-bottom: var(--rule); }
  .tetris-shell .game-sidebar .stats { display: contents; }
  .tetris-shell .data-cell, .tetris-shell .stat-item { padding: var(--sp-3) var(--sp-4); }
  .tetris-shell .stat-item { border-top: var(--rule); }
}

@media (max-width: 1023px) {
  #tetris-game-wrapper > #tetris-container {
    width: min(100%, calc(var(--frame-max-h) / 2));
    justify-self: center;
    height: auto;
    aspect-ratio: 1 / 2;
  }
}