/* =========================================================
   A16 — STYLES
   PUCARÁ ROMPECABEZAS
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
  --bg-0:
    #030806;

  --bg-1:
    #07100c;

  --bg-2:
    #0b1711;

  --panel:
    rgba(
      8,
      19,
      14,
      0.94
    );

  --panel-soft:
    rgba(
      12,
      27,
      20,
      0.86
    );

  --gold:
    #d4af37;

  --gold-soft:
    #b8942f;

  --gold-light:
    #f2d675;

  --text:
    #f4f0df;

  --text-soft:
    #bdb7a2;

  --line:
    rgba(
      212,
      175,
      55,
      0.30
    );

  --line-strong:
    rgba(
      212,
      175,
      55,
      0.72
    );

  --danger:
    #a84b4b;

  --success:
    #5d9d69;

  --shadow:
    0 18px 50px
    rgba(
      0,
      0,
      0,
      0.42
    );

  --radius-sm:
    10px;

  --radius-md:
    16px;

  --radius-lg:
    22px;

  --hud-height:
    58px;

  --controls-height:
    66px;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing:
    border-box;
}

html,
body {
  width:
    100%;

  min-width:
    100%;

  height:
    100%;

  min-height:
    100%;

  margin:
    0;

  padding:
    0;
}

html {
  background:
    var(--bg-0);
}

body {
  overflow:
    hidden;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color:
    var(--text);

  background:
    radial-gradient(
      circle at 50% 20%,
      #163225 0%,
      #0a1711 34%,
      #040a07 72%,
      #020503 100%
    );

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;

  overscroll-behavior:
    none;

  user-select:
    none;
}

button,
input {
  font:
    inherit;
}

button {
  -webkit-tap-highlight-color:
    transparent;
}

img {
  display:
    block;

  max-width:
    100%;
}


/* =========================================================
   APP SHELL
========================================================= */

.app-shell {
  position:
    relative;

  width:
    100%;

  height:
    100dvh;

  min-height:
    100vh;

  overflow:
    hidden;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.015
      ),
      transparent 40%
    );
}


/* =========================================================
   PANTALLAS
========================================================= */

.screen {
  position:
    absolute;

  inset:
    0;

  display:
    none;

  width:
    100%;

  height:
    100%;

  opacity:
    0;

  pointer-events:
    none;
}

.screen.is-active {
  display:
    flex;

  opacity:
    1;

  pointer-events:
    auto;
}


/* =========================================================
   BOTONES BASE
========================================================= */

button {
  border:
    0;

  outline:
    none;
}

.ui-button,
.menu-button,
.control-button,
.back-button,
.difficulty-button,
.modal-button {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    46px;

  padding:
    10px 20px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    var(--radius-sm);

  color:
    var(--text);

  background:
    linear-gradient(
      180deg,
      rgba(
        38,
        50,
        41,
        0.98
      ),
      rgba(
        10,
        19,
        14,
        0.98
      )
    );

  box-shadow:
    inset 0 1px 0
      rgba(
        255,
        255,
        255,
        0.05
      ),
    0 6px 18px
      rgba(
        0,
        0,
        0,
        0.28
      );

  font-weight:
    700;

  letter-spacing:
    0.04em;

  cursor:
    pointer;

  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background 120ms ease;
}

.ui-button:hover,
.menu-button:hover,
.control-button:hover,
.back-button:hover,
.difficulty-button:hover,
.modal-button:hover {
  border-color:
    var(--gold-light);

  background:
    linear-gradient(
      180deg,
      rgba(
        53,
        61,
        46,
        0.98
      ),
      rgba(
        15,
        24,
        18,
        0.98
      )
    );
}

.ui-button:active,
.menu-button:active,
.control-button:active,
.back-button:active,
.difficulty-button:active,
.modal-button:active {
  transform:
    translateY(
      1px
    )
    scale(
      0.985
    );
}

button:disabled,
button.is-disabled {
  opacity:
    0.38;

  cursor:
    default;

  pointer-events:
    none;
}


/* =========================================================
   INTRO
========================================================= */

#screen-intro {
  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;

  background:
    radial-gradient(
      circle at center,
      rgba(
        26,
        58,
        42,
        0.92
      ),
      rgba(
        3,
        8,
        6,
        0.98
      )
    );
}

.intro-panel {
  width:
    min(
      520px,
      92vw
    );

  padding:
    40px 28px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    var(--radius-lg);

  text-align:
    center;

  background:
    linear-gradient(
      180deg,
      rgba(
        15,
        31,
        23,
        0.94
      ),
      rgba(
        5,
        12,
        9,
        0.98
      )
    );

  box-shadow:
    var(--shadow);
}

.intro-brand {
  margin:
    0;

  color:
    var(--gold-light);

  font-size:
    clamp(
      34px,
      7vw,
      62px
    );

  font-weight:
    900;

  letter-spacing:
    0.10em;
}

.intro-title {
  margin:
    8px 0 0;

  color:
    var(--text);

  font-size:
    clamp(
      22px,
      4.5vw,
      36px
    );

  font-weight:
    800;

  letter-spacing:
    0.05em;
}

.intro-subtitle {
  margin:
    14px auto 24px;

  max-width:
    390px;

  color:
    var(--text-soft);

  font-size:
    15px;

  line-height:
    1.5;
}

#btn-intro-start {
  min-width:
    190px;
}


/* =========================================================
   MENÚ
========================================================= */

#screen-menu {
  align-items:
    center;

  justify-content:
    center;

  padding:
    22px;
}

.menu-panel {
  width:
    min(
      470px,
      92vw
    );

  padding:
    28px;

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

  border-radius:
    var(--radius-lg);

  background:
    var(--panel);

  box-shadow:
    var(--shadow);
}

.menu-title {
  margin:
    0 0 22px;

  color:
    var(--gold-light);

  text-align:
    center;

  font-size:
    28px;

  font-weight:
    800;

  letter-spacing:
    0.06em;
}

.menu-actions {
  display:
    grid;

  gap:
    12px;
}

.menu-button {
  width:
    100%;

  min-height:
    54px;
}


/* =========================================================
   CABECERA DE PANTALLA
========================================================= */

.screen-page {
  flex-direction:
    column;
}

.screen-header {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  flex:
    0 0 auto;

  min-height:
    62px;

  padding:
    10px 18px;

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

  background:
    rgba(
      4,
      10,
      7,
      0.88
    );

  backdrop-filter:
    blur(
      8px
    );
}

.screen-header-title {
  margin:
    0;

  color:
    var(--gold-light);

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

  font-weight:
    800;

  letter-spacing:
    0.04em;
}

.back-button {
  min-width:
    48px;

  min-height:
    40px;

  padding:
    8px 13px;
}


/* =========================================================
   SELECCIÓN DE PUZZLES
========================================================= */

#screen-puzzles {
  flex-direction:
    column;
}

.puzzles-content {
  flex:
    1 1 auto;

  min-height:
    0;

  overflow-y:
    auto;

  padding:
    18px;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--gold-soft)
    transparent;
}

.puzzles-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        190px,
        1fr
      )
    );

  gap:
    16px;

  width:
    min(
      1160px,
      100%
    );

  margin:
    0 auto;
}

.puzzle-card {
  position:
    relative;

  overflow:
    hidden;

  padding:
    0;

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

  border-radius:
    var(--radius-md);

  color:
    var(--text);

  background:
    var(--panel-soft);

  box-shadow:
    0 12px 28px
    rgba(
      0,
      0,
      0,
      0.28
    );

  cursor:
    pointer;

  transition:
    transform 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}

.puzzle-card:hover {
  transform:
    translateY(
      -2px
    );

  border-color:
    var(--line-strong);

  box-shadow:
    0 16px 34px
    rgba(
      0,
      0,
      0,
      0.34
    );
}

.puzzle-card-image {
  width:
    100%;

  aspect-ratio:
    1 / 1;

  object-fit:
    cover;

  background:
    #111;
}

.puzzle-card-body {
  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    9px;

  min-height:
    54px;

  padding:
    10px 12px;
}

.puzzle-card-number {
  color:
    var(--gold);

  font-size:
    12px;

  font-weight:
    800;
}

.puzzle-card-name {
  overflow:
    hidden;

  text-align:
    left;

  font-size:
    14px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.puzzle-card-progress {
  color:
    var(--text-soft);

  font-size:
    12px;

  font-weight:
    700;
}

.puzzle-card.is-completed {
  border-color:
    rgba(
      93,
      157,
      105,
      0.82
    );
}


/* =========================================================
   DIFICULTAD
========================================================= */

#screen-difficulty {
  flex-direction:
    column;
}

.difficulty-content {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex:
    1 1 auto;

  min-height:
    0;

  padding:
    20px;
}

.difficulty-panel {
  width:
    min(
      500px,
      94vw
    );

  padding:
    26px;

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

  border-radius:
    var(--radius-lg);

  background:
    var(--panel);

  box-shadow:
    var(--shadow);
}

#difficulty-puzzle-name {
  margin:
    0 0 20px;

  color:
    var(--gold-light);

  text-align:
    center;

  font-size:
    24px;

  font-weight:
    800;
}

#difficulty-list {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}

.difficulty-button {
  display:
    flex;

  flex-direction:
    column;

  min-height:
    82px;

  gap:
    5px;
}

.difficulty-button.is-completed {
  border-color:
    rgba(
      93,
      157,
      105,
      0.85
    );
}


/* =========================================================
   JUEGO
========================================================= */

#screen-game {
  flex-direction:
    column;

  background:
    linear-gradient(
      180deg,
      rgba(
        2,
        8,
        5,
        0.98
      ),
      rgba(
        4,
        12,
        8,
        0.98
      )
    );
}

.game-shell {
  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  height:
    100%;

  min-height:
    0;
}


/* =========================================================
   HUD
========================================================= */

.game-hud {
  position:
    relative;

  z-index:
    1000;

  display:
    grid;

  grid-template-columns:
    auto minmax(
      0,
      1fr
    ) auto;

  align-items:
    center;

  gap:
    14px;

  flex:
    0 0
    var(--hud-height);

  min-height:
    var(--hud-height);

  padding:
    7px 12px;

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

  background:
    rgba(
      3,
      10,
      7,
      0.96
    );

  box-shadow:
    0 6px 18px
    rgba(
      0,
      0,
      0,
      0.18
    );
}

.game-hud-center {
  min-width:
    0;
}

#hud-puzzle-name {
  overflow:
    hidden;

  color:
    var(--text);

  font-size:
    15px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

#hud-difficulty {
  margin-top:
    2px;

  color:
    var(--gold);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.05em;
}

.game-hud-right {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    12px;

  color:
    var(--text-soft);

  font-size:
    13px;

  font-weight:
    700;
}

#hud-progress,
#hud-time {
  min-width:
    54px;

  text-align:
    center;
}


/* =========================================================
   STAGE
========================================================= */

#puzzle-stage {
  position:
    relative;

  flex:
    1 1 auto;

  min-height:
    0;

  overflow:
    hidden;

  touch-action:
    none;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(
        26,
        55,
        40,
        0.40
      ),
      rgba(
        5,
        12,
        8,
        0.18
      ) 56%,
      rgba(
        0,
        0,
        0,
        0.14
      )
    );
}


/* =========================================================
   TABLERO
========================================================= */

#puzzle-board-wrapper {
  position:
    absolute;

  left:
    50%;

  top:
    45%;

  transform:
    translate(
      -50%,
      -50%
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}

#puzzle-board {
  position:
    relative;

  width:
    500px;

  height:
    500px;

  overflow:
    visible;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    4px;

  background:
    repeating-linear-gradient(
      45deg,
      rgba(
        255,
        255,
        255,
        0.018
      ) 0,
      rgba(
        255,
        255,
        255,
        0.018
      ) 8px,
      rgba(
        0,
        0,
        0,
        0.03
      ) 8px,
      rgba(
        0,
        0,
        0,
        0.03
      ) 16px
    ),
    #09120e;

  box-shadow:
    inset 0 0 0 2px
      rgba(
        0,
        0,
        0,
        0.32
      ),
    0 16px 35px
      rgba(
        0,
        0,
        0,
        0.35
      );

  pointer-events:
    none;
}


/* =========================================================
   BANDEJA
========================================================= */

#pieces-tray {
  position:
    absolute;

  left:
    16px;

  right:
    16px;

  bottom:
    12px;

  min-height:
    110px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.18
    );

  border-radius:
    var(--radius-md);

  background:
    linear-gradient(
      180deg,
      rgba(
        7,
        18,
        13,
        0.74
      ),
      rgba(
        3,
        9,
        6,
        0.88
      )
    );

  box-shadow:
    inset 0 1px 0
    rgba(
      255,
      255,
      255,
      0.025
    );

  pointer-events:
    none;
}


/* =========================================================
   PIEZAS
========================================================= */

.puzzle-piece {
  position:
    absolute;

  transform-origin:
    center center;

  cursor:
    grab;

  will-change:
    left,
    top,
    transform;

  touch-action:
    none;

  pointer-events:
    auto;

  transition:
    transform 100ms ease,
    filter 100ms ease;
}

.puzzle-piece svg {
  display:
    block;

  width:
    100%;

  height:
    100%;

  overflow:
    visible;

  pointer-events:
    none;

  filter:
    drop-shadow(
      0 4px 4px
      rgba(
        0,
        0,
        0,
        0.40
      )
    );
}

.puzzle-piece-outline {
  stroke:
    rgba(
      246,
      226,
      157,
      0.45
    );

  stroke-width:
    1.1;
}

.puzzle-piece:hover {
  filter:
    brightness(
      1.05
    );
}

.puzzle-piece.is-dragging {
  transform:
    scale(
      1.04
    );

  cursor:
    grabbing;

  filter:
    brightness(
      1.08
    );
}

.puzzle-piece.is-dragging svg {
  filter:
    drop-shadow(
      0 10px 9px
      rgba(
        0,
        0,
        0,
        0.52
      )
    );
}

.puzzle-piece.is-placed {
  cursor:
    default;

  pointer-events:
    none;

  transition:
    transform 150ms ease;
}

.puzzle-piece.is-placed .puzzle-piece-outline {
  stroke:
    rgba(
      255,
      255,
      255,
      0.12
    );

  stroke-width:
    0.7;
}

.puzzle-piece.is-hint {
  animation:
    puzzle-hint-pulse
    0.45s ease-in-out
    infinite alternate;
}


/* =========================================================
   ANIMACIÓN PISTA
========================================================= */

@keyframes puzzle-hint-pulse {
  from {
    filter:
      brightness(
        1
      )
      drop-shadow(
        0 0 3px
        rgba(
          212,
          175,
          55,
          0.35
        )
      );
  }

  to {
    filter:
      brightness(
        1.24
      )
      drop-shadow(
        0 0 12px
        rgba(
          242,
          214,
          117,
          0.95
        )
      );
  }
}


/* =========================================================
   CONTROLES INFERIORES
========================================================= */

.game-controls {
  position:
    relative;

  z-index:
    1000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  flex:
    0 0
    var(--controls-height);

  min-height:
    var(--controls-height);

  padding:
    8px 12px;

  border-top:
    1px solid
    var(--line);

  background:
    rgba(
      3,
      10,
      7,
      0.96
    );
}

.control-button {
  min-width:
    110px;

  min-height:
    44px;

  padding:
    8px 14px;

  font-size:
    12px;
}


/* =========================================================
   MODALES
========================================================= */

.modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    5000;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  background:
    rgba(
      0,
      0,
      0,
      0.76
    );

  backdrop-filter:
    blur(
      8px
    );
}

.modal.is-open {
  display:
    flex;
}

.modal-card {
  width:
    min(
      480px,
      94vw
    );

  max-height:
    90dvh;

  overflow-y:
    auto;

  padding:
    24px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    var(--radius-lg);

  background:
    linear-gradient(
      180deg,
      rgba(
        17,
        34,
        25,
        0.98
      ),
      rgba(
        5,
        12,
        8,
        0.99
      )
    );

  box-shadow:
    var(--shadow);
}

.modal-title {
  margin:
    0 0 18px;

  color:
    var(--gold-light);

  text-align:
    center;

  font-size:
    24px;

  font-weight:
    800;
}

.modal-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  justify-content:
    center;

  gap:
    10px;

  margin-top:
    18px;
}

.modal-button {
  min-width:
    130px;
}


/* =========================================================
   PREVIEW
========================================================= */

.preview-image-shell {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  width:
    100%;

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

  border-radius:
    var(--radius-md);

  background:
    #020403;
}

#preview-image {
  width:
    min(
      68vh,
      100%
    );

  aspect-ratio:
    1 / 1;

  object-fit:
    contain;
}


/* =========================================================
   VICTORIA
========================================================= */

.victory-card {
  text-align:
    center;
}

#victory-puzzle-name {
  margin:
    0 0 10px;

  color:
    var(--text);

  font-size:
    22px;

  font-weight:
    800;
}

.victory-time-label {
  color:
    var(--text-soft);

  font-size:
    13px;
}

#victory-time {
  margin-top:
    4px;

  color:
    var(--gold-light);

  font-size:
    32px;

  font-weight:
    900;
}


/* =========================================================
   SETTINGS
========================================================= */

.settings-list {
  display:
    grid;

  gap:
    12px;
}

.setting-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    16px;

  min-height:
    48px;

  padding:
    10px 12px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.18
    );

  border-radius:
    var(--radius-sm);

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );
}

.setting-row label {
  color:
    var(--text);

  font-weight:
    700;
}

.setting-row input[type="checkbox"] {
  width:
    22px;

  height:
    22px;

  accent-color:
    var(--gold);
}


/* =========================================================
   STATS
========================================================= */

.stats-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    10px;
}

.stats-item {
  padding:
    14px 8px;

  border:
    1px solid
    rgba(
      212,
      175,
      55,
      0.20
    );

  border-radius:
    var(--radius-sm);

  text-align:
    center;

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );
}

.stats-label {
  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--text-soft);

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.04em;
}

.stats-value {
  color:
    var(--gold-light);

  font-size:
    22px;

  font-weight:
    900;
}


/* =========================================================
   TOAST
========================================================= */

#toast {
  position:
    fixed;

  left:
    50%;

  bottom:
    calc(
      var(--controls-height) +
      18px
    );

  z-index:
    9000;

  min-width:
    180px;

  max-width:
    min(
      80vw,
      420px
    );

  padding:
    10px 16px;

  border:
    1px solid
    var(--line-strong);

  border-radius:
    999px;

  color:
    var(--text);

  text-align:
    center;

  background:
    rgba(
      4,
      12,
      8,
      0.96
    );

  box-shadow:
    0 10px 30px
    rgba(
      0,
      0,
      0,
      0.45
    );

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translate(
      -50%,
      10px
    );

  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

#toast.is-visible {
  opacity:
    1;

  transform:
    translate(
      -50%,
      0
    );
}


/* =========================================================
   SCROLLBARS
========================================================= */

::-webkit-scrollbar {
  width:
    8px;

  height:
    8px;
}

::-webkit-scrollbar-track {
  background:
    transparent;
}

::-webkit-scrollbar-thumb {
  border-radius:
    999px;

  background:
    rgba(
      212,
      175,
      55,
      0.38
    );
}


/* =========================================================
   TABLET / MÓVIL VERTICAL
========================================================= */

@media (
  max-width: 760px
) {

  :root {
    --hud-height:
      56px;

    --controls-height:
      64px;
  }


  .game-hud {
    gap:
      8px;

    padding:
      6px 8px;
  }


  .game-hud-right {
    gap:
      5px;

    font-size:
      11px;
  }


  #hud-progress,
  #hud-time {
    min-width:
      46px;
  }


  #puzzle-board-wrapper {
    top:
      40%;
  }


  #pieces-tray {
    left:
      8px;

    right:
      8px;

    bottom:
      8px;

    min-height:
      122px;
  }


  .game-controls {
    gap:
      5px;

    padding:
      7px 6px;
  }


  .control-button {
    min-width:
      0;

    flex:
      1 1 0;

    padding:
      7px 5px;

    font-size:
      10px;
  }


  .puzzles-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap:
      10px;
  }


  .puzzles-content {
    padding:
      10px;
  }


  .puzzle-card-body {
    grid-template-columns:
      auto 1fr;

    gap:
      5px 7px;
  }


  .puzzle-card-progress {
    grid-column:
      2;
  }


  #difficulty-list {
    grid-template-columns:
      1fr;
  }


  .difficulty-button {
    min-height:
      64px;
  }


  .stats-grid {
    grid-template-columns:
      1fr;
  }
}


/* =========================================================
   PANTALLAS BAJAS / LANDSCAPE ANDROID
========================================================= */

@media (
  max-height: 650px
)
and (
  orientation: landscape
) {

  :root {
    --hud-height:
      48px;

    --controls-height:
      54px;
  }


  .game-hud {
    min-height:
      48px;

    padding:
      4px 8px;
  }


  #hud-puzzle-name {
    font-size:
      13px;
  }


  #hud-difficulty {
    font-size:
      9px;
  }


  .game-hud-right {
    font-size:
      10px;
  }


  .back-button {
    min-height:
      34px;

    padding:
      5px 9px;
  }


  #puzzle-board-wrapper {
    top:
      44%;

    left:
      44%;
  }


  #pieces-tray {
    left:
      auto;

    right:
      8px;

    top:
      8px;

    bottom:
      8px;

    width:
      22%;

    min-width:
      128px;

    min-height:
      0;
  }


  .game-controls {
    min-height:
      54px;

    padding:
      5px 8px;
  }


  .control-button {
    min-height:
      38px;

    min-width:
      92px;

    padding:
      5px 9px;

    font-size:
      10px;
  }


  .modal-card {
    max-height:
      86dvh;

    padding:
      16px;
  }


  .modal-title {
    margin-bottom:
      10px;

    font-size:
      20px;
  }


  #preview-image {
    width:
      min(
        62vh,
        100%
      );
  }


  .puzzles-content {
    padding:
      10px 14px;
  }


  .puzzles-grid {
    grid-template-columns:
      repeat(
        auto-fit,
        minmax(
          150px,
          1fr
        )
      );

    gap:
      10px;
  }
}


/* =========================================================
   PANTALLAS MUY PEQUEÑAS
========================================================= */

@media (
  max-width: 390px
) {

  .intro-panel,
  .menu-panel,
  .difficulty-panel,
  .modal-card {
    padding:
      18px;
  }


  .intro-brand {
    font-size:
      34px;
  }


  .intro-title {
    font-size:
      21px;
  }


  .screen-header {
    padding:
      8px 10px;
  }


  .screen-header-title {
    font-size:
      17px;
  }


  .puzzle-card-name {
    font-size:
      12px;
  }


  .control-button {
    font-size:
      9px;
  }
}


/* =========================================================
   SAFE AREA ANDROID / IOS
========================================================= */

.game-hud {
  padding-top:
    max(
      7px,
      env(
        safe-area-inset-top
      )
    );
}

.game-controls {
  padding-bottom:
    max(
      8px,
      env(
        safe-area-inset-bottom
      )
    );
}


/* =========================================================
   REDUCIR ANIMACIONES
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

    scroll-behavior:
      auto !important;
  }
}

/* ROMPECABEZAS 2.0 — INTRO Y START PREMIUM */
.screen-intro,.screen-menu {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,2.5vw,28px);
  background:
    radial-gradient(circle at 18% 30%,rgba(29,98,68,.34),transparent 36%),
    linear-gradient(135deg,#010704,#0a281b 58%,#010704);
}
.intro-card {
  position:relative;
  isolation:isolate;
  width:min(96vw,1120px);
  aspect-ratio:16/9;
  max-height:92dvh;
  overflow:hidden;
  border:1px solid rgba(239,198,70,.72);
  border-radius:clamp(16px,2vw,28px);
  background:#020604;
  box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 45px rgba(209,164,31,.1);
}
.intro-hero-image { position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover; }
.intro-shade { position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(1,7,4,.96) 0%,rgba(1,7,4,.72) 42%,rgba(1,7,4,.12) 75%),linear-gradient(0deg,rgba(0,0,0,.8),transparent 48%); }
.intro-content { display:flex;align-items:flex-start;justify-content:center;flex-direction:column;width:52%;height:100%;padding:clamp(28px,6vw,76px); }
.intro-content .intro-brand { color:#e7c44f;font-size:clamp(15px,2vw,25px);font-weight:900;letter-spacing:.32em; }
.intro-content .intro-title { margin:8px 0;color:#fff1c2;font-family:Georgia,serif;font-size:clamp(36px,5vw,74px);line-height:.95;letter-spacing:.02em;text-shadow:0 8px 28px #000; }
.intro-content .intro-subtitle { margin:12px 0 28px;color:#e2d7ba;font-size:clamp(13px,1.6vw,19px);letter-spacing:.08em; }
.intro-content .btn { min-width:min(280px,80vw);min-height:56px;box-shadow:0 12px 34px rgba(214,168,39,.26); }
.intro-edition { margin-top:18px;color:rgba(255,238,183,.48);font-size:9px;font-weight:800;letter-spacing:.17em; }
.menu-card {
  width:min(94vw,920px);
  padding:clamp(22px,4vw,44px);
  border:1px solid rgba(234,194,66,.62);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(8,31,21,.98),rgba(2,11,7,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.65),inset 0 0 70px rgba(35,115,79,.1);
}
.menu-card .menu-header { display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(22px,4vw,48px); }
.menu-gallery { position:relative;min-height:300px; }
.menu-gallery img { position:absolute;width:62%;aspect-ratio:4/3;object-fit:cover;border:3px solid #d3aa37;border-radius:14px;box-shadow:0 18px 34px rgba(0,0,0,.48); }
.menu-gallery img:nth-child(1){left:2%;top:12%;transform:rotate(-8deg)}
.menu-gallery img:nth-child(2){right:1%;top:2%;transform:rotate(7deg)}
.menu-gallery img:nth-child(3){left:20%;bottom:0;z-index:2;transform:rotate(-1deg)}
.menu-copy { text-align:left; }
.menu-brand { color:#e1bd4a;font-size:13px;font-weight:900;letter-spacing:.3em; }
.menu-card .menu-title { margin:8px 0;color:#fff0bd;font-family:Georgia,serif;font-size:clamp(35px,4vw,58px);line-height:1;letter-spacing:0;text-align:left; }
.menu-subtitle { margin:15px 0 0;color:#c9c0a6;font-size:12px;letter-spacing:.06em; }
.menu-card .menu-actions { display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:10px;margin-top:28px; }
.menu-card .menu-actions .btn { min-width:0;width:100%;min-height:54px; }
.asset-back { width:48px;height:48px;padding:0;border:0;background:transparent;overflow:hidden; }
.asset-back img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.5)); }
.game-controls { grid-template-columns:1fr 1fr 1fr 1fr;align-items:center; }
.control-btn.asset-control { height:52px;min-height:52px;padding:0;border:0;background:transparent;overflow:hidden; }
.control-btn.asset-control img { display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(0,0,0,.45)); }
@media(max-width:680px){
  .intro-card{width:100%;height:min(88dvh,760px);aspect-ratio:auto}.intro-hero-image{object-position:64% center}.intro-shade{background:linear-gradient(0deg,#010704 4%,rgba(1,7,4,.9) 42%,rgba(1,7,4,.15) 80%)}.intro-content{align-items:center;justify-content:flex-end;width:100%;padding:28px 18px;text-align:center}.intro-content .intro-title{font-size:clamp(34px,11vw,52px)}
  .menu-card{max-height:calc(100dvh - 20px);padding:18px 14px;overflow:auto}.menu-card .menu-header{grid-template-columns:1fr;gap:12px}.menu-gallery{min-height:190px}.menu-gallery img{width:48%}.menu-gallery img:nth-child(3){left:27%}.menu-copy{text-align:center}.menu-card .menu-title{text-align:center;font-size:38px}.menu-card .menu-actions{grid-template-columns:1fr;margin-top:18px}.menu-card .menu-actions .btn{min-height:47px}
  .game-controls{gap:3px}.control-btn.asset-control{height:44px;min-height:44px}
}
@media(max-height:620px) and (orientation:landscape){.intro-card{width:min(90vw,880px)}.intro-content{padding:20px 38px}.intro-content .intro-subtitle{margin-bottom:12px}.intro-content .btn{min-height:43px}.intro-edition{display:none}.menu-card{padding:14px 22px}.menu-gallery{min-height:190px}.menu-card .menu-title{font-size:36px}.menu-card .menu-actions{margin-top:14px}}

/* ROMPECABEZAS 2.1 — botones y configuración premium */
.btn,.menu-card .menu-actions .btn {
  border:1px solid rgba(237,198,70,.72);
  border-radius:13px;
  background:linear-gradient(145deg,#173f2d,#071c13 70%);
  color:#ffe99c;
  font-weight:900;
  letter-spacing:.075em;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 10px 22px rgba(0,0,0,.28);
  transition:transform .16s ease,border-color .16s ease,filter .16s ease;
}
.btn-primary,.menu-card .menu-actions .btn-primary {
  background:linear-gradient(145deg,#dcb842,#8f6816);
  color:#09140e;
  border-color:#ffe58d;
}
.btn:hover { transform:translateY(-2px);border-color:#ffe28a;filter:brightness(1.1); }
.btn:active { transform:translateY(0) scale(.98); }
.modal-card-settings {
  width:min(92vw,590px);
  max-height:88dvh;
  overflow:auto;
  padding:24px;
  border:1px solid rgba(235,195,64,.68);
  border-radius:22px;
  background:linear-gradient(145deg,#0c2b1e,#03110b 76%);
  box-shadow:0 28px 80px rgba(0,0,0,.7),inset 0 0 55px rgba(44,128,88,.1);
}
.modal-card-settings .modal-header { padding-bottom:14px;border-bottom:1px solid rgba(221,181,56,.22); }
.settings-list { display:grid;gap:9px;margin-top:16px; }
.setting-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  min-height:55px;
  padding:10px 14px;
  border:1px solid rgba(219,180,56,.19);
  border-radius:13px;
  background:rgba(0,0,0,.18);
}
.setting-label { color:#f6e4aa;font-size:12px;font-weight:900;letter-spacing:.06em; }
.premium-select {
  min-width:150px;
  padding:10px 34px 10px 12px;
  border:1px solid rgba(234,196,72,.52);
  border-radius:10px;
  background:#092117;
  color:#ffe9a1;
  font-weight:800;
}
.setting-row input[type="checkbox"] { width:42px;height:23px;accent-color:#d9b33c; }
.setting-row-slider { grid-template-columns:145px minmax(120px,1fr); }
.setting-row input[type="range"] { width:100%;accent-color:#d9b33c; }
.settings-legal { display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:17px;padding-top:17px;border-top:1px solid rgba(221,181,56,.22); }
.settings-legal a { padding:9px 14px;border:1px solid rgba(220,180,55,.28);border-radius:10px;color:#e9ce75;font-size:10px;font-weight:900;letter-spacing:.08em;text-decoration:none; }
.settings-legal a:hover { color:white;border-color:#f0cf67;background:rgba(221,178,50,.1); }
@media(max-width:520px){.modal-card-settings{padding:16px 12px}.setting-row{min-height:49px;padding:8px 10px}.setting-row-slider{grid-template-columns:1fr}.premium-select{min-width:130px}.settings-legal a{flex:1;text-align:center}}

/* ROMPECABEZAS 2.2 — identidad oficial */
.intro-hero-image { object-position:center; }
.intro-shade { background:linear-gradient(90deg,rgba(1,7,4,.76) 0%,rgba(1,7,4,.38) 43%,rgba(1,7,4,.04) 76%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 52%); }
.menu-icon-stage { display:flex;align-items:center;justify-content:center;min-height:320px; }
.menu-gallery.menu-icon-stage img.menu-game-icon {
  position:relative;
  inset:auto;
  width:min(100%,330px);
  aspect-ratio:1;
  object-fit:contain;
  border:0;
  border-radius:24px;
  transform:none;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.55));
  box-shadow:none;
}
@media(max-width:680px){.menu-icon-stage{min-height:210px}.menu-gallery.menu-icon-stage img.menu-game-icon{width:min(62vw,220px)}.intro-shade{background:linear-gradient(0deg,#010704 2%,rgba(1,7,4,.82) 42%,rgba(1,7,4,.04) 82%)}}

/* ROMPECABEZAS 2.3 — pantallas internas y área de juego */
#screen-puzzles,#screen-difficulty { padding:clamp(10px,2vw,22px);background:radial-gradient(circle at 50% 10%,rgba(22,78,53,.34),transparent 42%),#020805; }
.panel-card {
  display:flex;
  flex-direction:column;
  width:min(96vw,1180px);
  max-height:calc(100dvh - 28px);
  margin:auto;
  overflow:hidden;
  border:1px solid rgba(231,191,61,.58);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(8,30,20,.98),rgba(2,10,7,.98));
  box-shadow:0 25px 70px rgba(0,0,0,.62);
}
.panel-header {
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  align-items:center;
  gap:14px;
  flex:0 0 auto;
  padding:14px 18px;
  border-bottom:1px solid rgba(220,181,57,.2);
  background:rgba(1,10,6,.72);
}
.panel-title { margin:0;color:#ffe69a;font-family:Georgia,serif;font-size:clamp(21px,2.6vw,32px);letter-spacing:.035em; }
.panel-subtitle { margin-top:3px;color:#bdb49b;font-size:12px; }
.panel-card .puzzles-grid {
  grid-template-columns:repeat(5,minmax(150px,1fr));
  gap:12px;
  width:100%;
  padding:16px;
  overflow:auto;
}
.puzzles-categories {
  display:flex;
  justify-content:center;
  gap:10px;
  padding:12px 16px 0;
  flex:0 0 auto;
}
.category-button {
  min-width:170px;
  padding:11px 18px;
  border:1px solid rgba(224,184,58,.38);
  border-radius:12px;
  background:linear-gradient(145deg,#123b29,#061b12);
  color:#cfc7af;
  font-size:12px;
  font-weight:900;
  letter-spacing:.1em;
  cursor:pointer;
  transition:.16s ease;
}
.category-button small { margin-left:8px;color:#e8c858; }
.category-button:hover,.category-button.is-active {
  color:#fff0ae;
  border-color:#f0cf67;
  background:linear-gradient(145deg,#286347,#0d2a1d);
  box-shadow:0 0 18px rgba(224,181,52,.14),inset 0 1px rgba(255,255,255,.08);
}
.panel-card .puzzle-card { min-width:0; }
#screen-difficulty .panel-card { width:min(92vw,760px); }
#screen-difficulty #difficulty-puzzle-name { margin:2px 0 0;text-align:left;font-size:14px; }
#screen-difficulty #difficulty-list { padding:22px; }
.difficulty-card {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  min-height:115px;
  gap:6px;
  padding:14px;
  border:1px solid rgba(224,184,58,.42);
  border-radius:15px;
  background:linear-gradient(145deg,#16432e,#061b12 74%);
  color:#f9e7aa;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 22px rgba(0,0,0,.28);
  cursor:pointer;
  transition:.16s ease;
}
.difficulty-card:hover { transform:translateY(-3px);border-color:#f2d36b;filter:brightness(1.08); }
.difficulty-card .difficulty-name { color:#ffe78e;font-size:17px;font-weight:900;letter-spacing:.08em; }
.difficulty-card .difficulty-size { color:white;font-size:15px;font-weight:800; }
.difficulty-card .difficulty-pieces { color:#bdb49b;font-size:11px;font-weight:700; }
.game-main { display:flex;flex:1 1 auto;min-height:0;overflow:hidden; }
.game-main #puzzle-stage { width:100%;height:100%; }
#puzzle-board { border:2px solid rgba(235,194,65,.72);background:repeating-linear-gradient(45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 10px,rgba(0,0,0,.05) 10px,rgba(0,0,0,.05) 20px),#0b2117;box-shadow:inset 0 0 0 3px rgba(0,0,0,.32),0 18px 42px rgba(0,0,0,.5),0 0 22px rgba(210,166,36,.1); }
#pieces-tray { min-height:120px;border-color:rgba(220,181,57,.35);background:linear-gradient(180deg,rgba(12,43,29,.88),rgba(2,13,8,.96)); }
.game-controls { flex:0 0 var(--controls-height);min-height:var(--controls-height); }
.control-btn:not(.asset-control) {
  min-height:46px;
  border:1px solid rgba(231,191,62,.64);
  border-radius:12px;
  background:linear-gradient(145deg,#17442f,#061b12);
  color:#ffe897;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
}
@media(max-width:900px){.panel-card .puzzles-grid{grid-template-columns:repeat(3,minmax(140px,1fr))}}
@media(max-width:600px){#screen-puzzles,#screen-difficulty{padding:6px}.panel-card{max-height:calc(100dvh - 12px);border-radius:14px}.panel-header{grid-template-columns:48px 1fr;padding:8px 10px}.puzzles-categories{gap:6px;padding:8px 8px 0}.category-button{min-width:0;flex:1;padding:9px 5px;font-size:10px}.panel-card .puzzles-grid{grid-template-columns:repeat(2,minmax(125px,1fr));gap:7px;padding:8px}.puzzle-card-body{padding:7px 8px}.puzzle-card-name{font-size:11px}#screen-difficulty #difficulty-list{padding:10px;gap:7px}.difficulty-card{min-height:85px;padding:8px}.difficulty-card .difficulty-name{font-size:13px}.difficulty-card .difficulty-size{font-size:12px}#pieces-tray{left:6px;right:6px;bottom:5px;min-height:92px}.game-controls{min-height:54px;flex-basis:54px}}

/* ROMPECABEZAS 2.4 — escala de tablero y piezas */
#puzzle-board-wrapper { top:39%; }
.puzzle-piece:not(.is-placed):not(.is-dragging) {
  transform:scale(.78);
  transform-origin:center;
  filter:drop-shadow(0 6px 7px rgba(0,0,0,.42));
}
.puzzle-piece.is-dragging,.puzzle-piece.is-placed {
  transform:scale(1);
  transition:transform .13s ease;
}
@media(max-width:680px){#puzzle-board-wrapper{top:40%}.puzzle-piece:not(.is-placed):not(.is-dragging){transform:scale(.72)}}

/* ROMPECABEZAS 2.5 — carrusel de piezas */
#pieces-tray { pointer-events:auto;touch-action:pan-y; }
.puzzle-piece.is-tray-page-hidden { display:none !important; }
.tray-nav { position:absolute;bottom:67px;z-index:120;width:42px;height:58px;border:1px solid rgba(240,199,65,.72);border-radius:12px;background:linear-gradient(145deg,#214d36,#071b12);color:#ffe178;font-family:Georgia,serif;font-size:38px;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.1); }
.tray-nav-prev { left:27px; }
.tray-nav-next { right:27px; }
.tray-nav:hover:not(:disabled) { filter:brightness(1.18);transform:scale(1.04); }
.tray-nav:disabled { opacity:.28;cursor:default; }
.tray-page { position:absolute;right:80px;bottom:17px;z-index:120;padding:3px 8px;border-radius:8px;background:rgba(2,12,8,.82);color:#e7ca70;font-size:10px;font-weight:900;pointer-events:none; }
@media(max-width:600px){.tray-nav{bottom:48px;width:34px;height:48px;font-size:31px}.tray-nav-prev{left:12px}.tray-nav-next{right:12px}.tray-page{right:54px;bottom:8px}}

/* ROMPECABEZAS 2.6 — cierres premium */
.premium-close {
  position:relative;
  flex:0 0 42px;
  width:42px;
  height:42px;
  min-width:42px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(241,202,72,.78);
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#276149 0,#0c3323 46%,#03140d 100%);
  color:transparent;
  font-size:0;
  cursor:pointer;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16),inset 0 -3px 7px rgba(0,0,0,.45),0 7px 16px rgba(0,0,0,.42),0 0 0 3px rgba(180,137,27,.09);
  transition:transform .16s ease,filter .16s ease,border-color .16s ease;
}
.premium-close::before,.premium-close::after {
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,#b27d18,#ffe58a 48%,#a66f10);
  box-shadow:0 1px 2px rgba(0,0,0,.7),0 0 5px rgba(255,215,95,.2);
}
.premium-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.premium-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.premium-close:hover { transform:scale(1.07);filter:brightness(1.18);border-color:#ffe786; }
.premium-close:active { transform:scale(.95); }
.premium-close:focus-visible { outline:2px solid #ffe68b;outline-offset:3px; }
@media(max-width:520px){.premium-close{flex-basis:36px;width:36px;height:36px;min-width:36px}.premium-close::before,.premium-close::after{width:17px}}

/* ROMPECABEZAS 2.7 — ajuste final Android vertical */
@media(max-width:430px){
  .intro-card{width:calc(100% - 14px);height:calc(100dvh - 16px);max-height:none}
  .intro-content{padding:24px 14px 30px;overflow:hidden}
  .intro-content .intro-title{width:100%;font-size:clamp(27px,8.2vw,35px);line-height:1;letter-spacing:-.015em;white-space:nowrap}
  .intro-content .intro-brand{font-size:14px;letter-spacing:.25em}
  .intro-content .intro-subtitle{font-size:12px;line-height:1.35}
  .intro-content .btn{min-width:min(250px,78vw);min-height:52px}
  .menu-card{width:calc(100% - 14px);max-height:calc(100dvh - 16px)}
  .menu-card .menu-title{font-size:clamp(29px,8.4vw,35px);white-space:nowrap}
  .panel-title{font-size:clamp(19px,6.2vw,27px)}
  .puzzles-categories{position:sticky;top:0;z-index:5;background:#06170f}
}