/* =========================================================
   A15 — STYLES
   PUCARÁ NONOGRAM
========================================================= */


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

* {
  box-sizing: border-box;
}


/* =========================================================
   NONOGRAM 2.1 — SELECTORES INTEGRADOS EN START
========================================================= */

.menu-card { max-height:calc(100dvh - 24px); overflow:auto; }
.menu-card .menu-header { grid-template-columns:150px minmax(0,1fr); gap:28px; }
.menu-card .menu-icon { max-width:150px; }
.menu-card .menu-title-image { max-width:460px; }
.menu-setup { position:relative; display:grid; grid-template-columns:1fr 1.08fr; gap:16px; }
.menu-choice { min-width:0; padding:15px; border:1px solid rgba(212,175,55,.22); border-radius:16px; background:rgba(0,0,0,.18); }
.menu-choice-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; color:var(--gold-light); font-size:11px; font-weight:900; letter-spacing:.13em; }
.menu-choice-heading small { color:var(--text-soft); font-size:9px; letter-spacing:.08em; }
.menu-difficulty-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.menu-difficulty-list .difficulty-card { min-height:55px; padding:9px 12px; border-radius:11px; }
.menu-difficulty-list .difficulty-name { font-size:12px; }
.menu-difficulty-list .difficulty-size { font-size:10px; }
.difficulty-card.is-selected { border-color:#f3d36e; background:linear-gradient(145deg,rgba(45,111,76,.68),rgba(13,48,33,.88)); box-shadow:0 0 0 1px rgba(243,211,110,.18),0 8px 24px rgba(0,0,0,.2); }
.difficulty-card.is-empty { position:relative; }
.difficulty-card.is-empty::after { content:"PRÓX."; position:absolute; top:5px; right:6px; color:rgba(244,215,125,.62); font-size:7px; font-weight:900; letter-spacing:.05em; }
.menu-levels-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.menu-levels-grid .level-card { min-height:55px; padding:6px 4px; border-radius:10px; }
.menu-levels-grid .level-number { font-size:16px; }
.menu-levels-grid .level-name { max-width:100%; overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.level-card.is-selected { border-color:#f3d36e; background:linear-gradient(145deg,rgba(56,130,90,.65),rgba(11,43,29,.92)); box-shadow:0 0 0 1px rgba(243,211,110,.18); transform:translateY(-1px); }
.menu-card .menu-actions { grid-template-columns:1.25fr 1fr 1fr; }
.settings-legal { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 18px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(212,175,55,.18); }
.settings-legal a { color:var(--gold-light); font-size:9px; font-weight:900; letter-spacing:.1em; text-decoration:none; }
.settings-legal a:hover { color:white; text-decoration:underline; text-underline-offset:4px; }
#screen-difficulty,#screen-levels { display:none !important; }

@media (max-width:680px) {
  .menu-card { padding:13px 12px; gap:10px; }
  .menu-card .menu-header { display:grid; grid-template-columns:76px minmax(0,1fr); gap:10px; text-align:left; }
  .menu-card .menu-icon { width:76px; }
  .menu-card .menu-title-image { width:100%; max-width:300px; margin:0; }
  .menu-card .menu-subtitle { font-size:8px; }
  .menu-setup { grid-template-columns:1fr; gap:8px; }
  .menu-choice { padding:9px; border-radius:12px; }
  .menu-choice-heading { margin-bottom:7px; }
  .menu-difficulty-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
  .menu-difficulty-list .difficulty-card { min-height:48px; padding:6px 3px; flex-direction:column; justify-content:center; }
  .menu-difficulty-list .difficulty-name { font-size:9px; }
  .menu-difficulty-list .difficulty-size { font-size:8px; }
  .menu-levels-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
  .menu-levels-grid .level-card { min-height:46px; }
  .menu-levels-grid .level-number { font-size:14px; }
  .menu-levels-grid .level-name { font-size:7px; }
  .menu-card .menu-actions { grid-template-columns:1.2fr 1fr 1fr; gap:5px; }
  .menu-card .menu-actions .btn { min-height:43px; padding:7px 4px; font-size:9px; letter-spacing:.04em; }
  .menu-footer { display:none; }
  .settings-legal { margin-top:8px; padding-top:8px; }
}

@media (max-height:700px) {
  .menu-card .menu-header { grid-template-columns:92px minmax(0,1fr); }
  .menu-card .menu-icon { max-width:92px; }
  .menu-card { padding-top:11px; padding-bottom:11px; gap:8px; }
  .menu-choice { padding-top:8px; padding-bottom:8px; }
  .menu-footer { display:none; }
}


html,
body {
  margin: 0;
  padding: 0;

  width: 100%;
  min-height: 100%;

  background:
    #06100c;

  color:
    #f3ead0;

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

  -webkit-tap-highlight-color:
    transparent;

  overscroll-behavior:
    none;
}


body {
  min-height:
    100dvh;

  overflow:
    hidden;
}


button,
input {
  font:
    inherit;
}


button {
  -webkit-user-select:
    none;

  user-select:
    none;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --bg-main:
    #06100c;

  --bg-panel:
    rgba(
      8,
      24,
      17,
      0.96
    );

  --bg-panel-soft:
    rgba(
      10,
      31,
      22,
      0.92
    );

  --gold:
    #d4af37;

  --gold-light:
    #f3d67a;

  --gold-dark:
    #8e6c18;

  --text-main:
    #f3ead0;

  --text-soft:
    rgba(
      243,
      234,
      208,
      0.72
    );

  --border-soft:
    rgba(
      212,
      175,
      55,
      0.38
    );

  --shadow-main:
    0 20px 60px
    rgba(
      0,
      0,
      0,
      0.55
    );

  --nonogram-cell-size:
    42px;
}


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

.app-shell {
  position:
    relative;

  width:
    100%;

  height:
    100dvh;

  min-height:
    100dvh;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at center,
      #133225 0%,
      #0a1c14 42%,
      #06100c 100%
    );
}


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

.screen {
  position:
    absolute;

  inset:
    0;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  overflow:
    auto;
}


.screen.is-active {
  display:
    flex;
}


/* =========================================================
   TARJETAS BASE
========================================================= */

.intro-card,
.menu-card,
.panel-card {
  width:
    min(
      92vw,
      620px
    );

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

  border-radius:
    24px;

  background:
    linear-gradient(
      180deg,
      rgba(
        15,
        41,
        29,
        0.98
      ),
      rgba(
        5,
        18,
        12,
        0.98
      )
    );

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

  backdrop-filter:
    blur(8px);
}


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

.screen-intro {
  background:
    radial-gradient(
      circle at center,
      rgba(
        36,
        92,
        61,
        0.32
      ),
      transparent 55%
    );
}


.intro-card {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    16px;

  min-height:
    420px;

  padding:
    44px 26px;

  text-align:
    center;
}


.intro-brand,
.menu-brand,
.modal-brand {
  color:
    var(--gold-light);

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    0.34em;

  text-transform:
    uppercase;
}


.intro-title {
  margin:
    0;

  color:
    var(--gold);

  font-size:
    clamp(
      42px,
      10vw,
      82px
    );

  line-height:
    0.95;

  letter-spacing:
    0.06em;

  text-shadow:
    0 0 24px
    rgba(
      212,
      175,
      55,
      0.18
    );
}


.intro-subtitle {
  margin:
    0 0 18px;

  color:
    var(--text-soft);

  font-size:
    17px;
}


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

.btn {
  min-width:
    190px;

  min-height:
    48px;

  padding:
    12px 22px;

  border:
    1px solid
    var(--gold-dark);

  border-radius:
    14px;

  cursor:
    pointer;

  font-weight:
    800;

  letter-spacing:
    0.08em;

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


.btn:active {
  transform:
    scale(0.97);
}


.btn-primary {
  background:
    linear-gradient(
      180deg,
      #f0d36f,
      #b68a24
    );

  color:
    #151008;

  box-shadow:
    0 8px 24px
    rgba(
      212,
      175,
      55,
      0.18
    );
}


.btn-secondary {
  background:
    rgba(
      0,
      0,
      0,
      0.22
    );

  color:
    var(--text-main);
}


.btn:hover,
.control-btn:hover,
.btn-icon:hover,
.difficulty-card:hover,
.level-card:hover {
  filter:
    brightness(1.08);
}


.btn:disabled,
.control-btn:disabled,
.difficulty-card:disabled,
.level-card:disabled {
  opacity:
    0.38;

  cursor:
    default;

  transform:
    none;
}


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

.menu-card {
  display:
    flex;

  flex-direction:
    column;

  gap:
    32px;

  padding:
    38px 30px;
}


.menu-header {
  text-align:
    center;
}


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

  color:
    var(--gold);

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

  letter-spacing:
    0.06em;
}


.menu-actions {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    12px;
}


/* =========================================================
   PANEL
========================================================= */

.panel-card {
  max-height:
    calc(
      100dvh - 40px
    );

  padding:
    24px;

  overflow:
    auto;
}


.panel-card-levels {
  width:
    min(
      94vw,
      760px
    );
}


.panel-header {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  margin-bottom:
    22px;
}


.panel-title {
  margin:
    0;

  color:
    var(--gold);

  font-size:
    25px;

  letter-spacing:
    0.06em;
}


.panel-subtitle {
  margin-top:
    4px;

  color:
    var(--text-soft);

  font-size:
    13px;

  letter-spacing:
    0.12em;
}


.levels-header-text {
  display:
    flex;

  flex-direction:
    column;
}


/* =========================================================
   BOTÓN ICONO
========================================================= */

.btn-icon {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 auto;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    12px;

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

  color:
    var(--gold-light);

  cursor:
    pointer;

  font-size:
    24px;
}


/* =========================================================
   DIFICULTADES
========================================================= */

.difficulty-list {
  display:
    grid;

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

  gap:
    14px;
}


.difficulty-card {
  min-height:
    120px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    18px;

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

  border-radius:
    18px;

  background:
    linear-gradient(
      180deg,
      rgba(
        21,
        56,
        39,
        0.9
      ),
      rgba(
        6,
        19,
        13,
        0.95
      )
    );

  color:
    var(--text-main);

  cursor:
    pointer;

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


.difficulty-card:active {
  transform:
    scale(0.98);
}


.difficulty-card.is-empty {
  opacity:
    0.36;
}


.difficulty-name {
  color:
    var(--gold-light);

  font-size:
    18px;

  font-weight:
    800;

  letter-spacing:
    0.08em;
}


.difficulty-size {
  color:
    var(--text-soft);

  font-size:
    15px;
}


/* =========================================================
   NIVELES
========================================================= */

.levels-grid {
  display:
    grid;

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

  gap:
    12px;
}


.level-card {
  position:
    relative;

  min-height:
    104px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    14px 10px;

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

  border-radius:
    16px;

  background:
    rgba(
      6,
      20,
      14,
      0.92
    );

  color:
    var(--text-main);

  cursor:
    pointer;
}


.level-card.is-completed {
  border-color:
    rgba(
      212,
      175,
      55,
      0.72
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        32,
        72,
        51,
        0.92
      ),
      rgba(
        8,
        25,
        17,
        0.96
      )
    );
}


.level-number {
  color:
    var(--gold-light);

  font-size:
    25px;

  font-weight:
    800;
}


.level-name {
  color:
    var(--text-soft);

  font-size:
    13px;

  text-align:
    center;
}


.level-completed-mark {
  position:
    absolute;

  top:
    8px;

  right:
    10px;

  color:
    var(--gold-light);

  font-size:
    16px;

  font-weight:
    900;
}


.levels-empty {
  grid-column:
    1 / -1;

  padding:
    30px;

  color:
    var(--text-soft);

  text-align:
    center;
}


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

.screen-game {
  padding:
    0;

  overflow:
    hidden;
}


.game-shell {
  width:
    100%;

  height:
    100dvh;

  display:
    grid;

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

  background:
    radial-gradient(
      circle at center,
      #173629 0%,
      #0b1f16 48%,
      #06100c 100%
    );
}


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

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

  display:
    grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:
    center;

  gap:
    12px;

  padding:
    calc(
      8px +
      env(
        safe-area-inset-top
      )
    )
    14px
    8px;

  border-bottom:
    1px solid
    rgba(
      212,
      175,
      55,
      0.22
    );

  background:
    rgba(
      4,
      15,
      10,
      0.92
    );
}


.game-hud-left {
  display:
    flex;

  justify-content:
    flex-start;
}


.game-hud-center {
  min-width:
    110px;

  text-align:
    center;
}


.game-hud-right {
  display:
    flex;

  justify-content:
    flex-end;
}


.hud-level {
  color:
    var(--gold-light);

  font-weight:
    800;

  font-size:
    15px;
}


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

  color:
    var(--text-soft);

  font-size:
    11px;

  letter-spacing:
    0.08em;
}


.hud-time {
  min-width:
    64px;

  color:
    var(--text-main);

  font-size:
    17px;

  font-weight:
    800;

  font-variant-numeric:
    tabular-nums;

  text-align:
    right;
}


/* =========================================================
   ÁREA DE TABLERO
========================================================= */

.game-main {
  min-height:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  padding:
    12px;
}


.nonogram-board-wrapper {
  width:
    100%;

  height:
    100%;

  min-height:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    auto;

  touch-action:
    none;
}


.nonogram-board {
  position:
    relative;

  width:
    max-content;

  height:
    max-content;

  flex:
    0 0 auto;

  padding:
    5px;

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

  border-radius:
    12px;

  background:
    rgba(
      2,
      10,
      6,
      0.92
    );

  box-shadow:
    0 14px 36px
    rgba(
      0,
      0,
      0,
      0.48
    );

  touch-action:
    none;

  user-select:
    none;
}


/* =========================================================
   PISTAS
========================================================= */

.nonogram-clue-corner {
  min-width:
    calc(
      var(
        --nonogram-cell-size
      ) *
      1.5
    );

  min-height:
    calc(
      var(
        --nonogram-cell-size
      ) *
      1.5
    );
}


.nonogram-row-clue,
.nonogram-column-clue {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--text-main);

  font-weight:
    800;

  font-size:
    clamp(
      10px,
      calc(
        var(
          --nonogram-cell-size
        ) *
        0.32
      ),
      17px
    );

  transition:
    opacity 140ms ease,
    color 140ms ease;
}


.nonogram-row-clue {
  min-width:
    calc(
      var(
        --nonogram-cell-size
      ) *
      1.5
    );

  padding-right:
    8px;
}


.nonogram-column-clue {
  min-height:
    calc(
      var(
        --nonogram-cell-size
      ) *
      1.5
    );

  padding-bottom:
    7px;
}


.nonogram-row-clue-content {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;

  width:
    100%;
}


.nonogram-column-clue-content {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    2px;

  height:
    100%;
}


.nonogram-clue-number {
  display:
    inline-block;

  min-width:
    0.8em;

  text-align:
    center;
}


.nonogram-row-clue.is-solved,
.nonogram-column-clue.is-solved {
  color:
    rgba(
      212,
      175,
      55,
      0.42
    );

  opacity:
    0.62;
}


/* =========================================================
   CELDAS
========================================================= */

.nonogram-cell {
  position:
    relative;

  width:
    var(
      --nonogram-cell-size
    );

  height:
    var(
      --nonogram-cell-size
    );

  min-width:
    0;

  min-height:
    0;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-right:
    1px solid
    rgba(
      22,
      33,
      27,
      0.62
    );

  border-bottom:
    1px solid
    rgba(
      22,
      33,
      27,
      0.62
    );

  border-radius:
    0;

  background:
    linear-gradient(
      180deg,
      #e9dfc5,
      #cfc3a8
    );

  color:
    #142118;

  cursor:
    pointer;

  font-size:
    calc(
      var(
        --nonogram-cell-size
      ) *
      0.62
    );

  font-weight:
    700;

  line-height:
    1;

  touch-action:
    none;

  user-select:
    none;

  appearance:
    none;

  transition:
    background 80ms ease,
    transform 80ms ease;
}


.nonogram-cell:active {
  transform:
    scale(0.94);
}


.nonogram-cell.is-filled {
  background:
    linear-gradient(
      145deg,
      #171b18,
      #050706
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(
      212,
      175,
      55,
      0.2
    );

  color:
    var(--gold);
}


.nonogram-cell.is-crossed {
  background:
    linear-gradient(
      180deg,
      #e8dec4,
      #c9bea4
    );

  color:
    rgba(
      81,
      73,
      57,
      0.7
    );

  font-weight:
    500;
}


.nonogram-cell.is-hint {
  animation:
    nonogram-hint-pulse
    700ms ease;
}


.nonogram-board.is-disabled
.nonogram-cell {
  cursor:
    default;
}


/* =========================================================
   SEPARADORES DE GRILLA
========================================================= */

.nonogram-cell:nth-child(5n) {
  /* El separador fuerte real se agrega
     más adelante por JS si hace falta
     para tamaños 10/15/20. */
}


/* =========================================================
   CONTROLES DE JUEGO
========================================================= */

.game-controls {
  display:
    grid;

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

  gap:
    8px;

  padding:
    9px 10px
    calc(
      9px +
      env(
        safe-area-inset-bottom
      )
    );

  border-top:
    1px solid
    rgba(
      212,
      175,
      55,
      0.2
    );

  background:
    rgba(
      4,
      15,
      10,
      0.95
    );
}


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

  padding:
    8px 6px;

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

  border-radius:
    12px;

  background:
    rgba(
      16,
      38,
      27,
      0.92
    );

  color:
    var(--text-main);

  cursor:
    pointer;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    0.03em;
}


.control-btn.is-active {
  border-color:
    var(--gold);

  background:
    linear-gradient(
      180deg,
      #d9b64b,
      #9d751c
    );

  color:
    #141007;
}


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

.modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;
}


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


.modal-backdrop {
  position:
    absolute;

  inset:
    0;

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

  backdrop-filter:
    blur(5px);
}


.modal-card {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      92vw,
      430px
    );

  max-height:
    calc(
      100dvh - 40px
    );

  overflow:
    auto;

  padding:
    28px;

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

  border-radius:
    22px;

  background:
    linear-gradient(
      180deg,
      #102c1e,
      #06120c
    );

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

  text-align:
    center;
}


.modal-card-settings {
  text-align:
    left;
}


.modal-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    22px;
}


.modal-title {
  margin:
    8px 0 14px;

  color:
    var(--gold);

  font-size:
    27px;

  letter-spacing:
    0.05em;
}


.modal-header
.modal-title {
  margin:
    0;
}


.modal-puzzle-name {
  color:
    var(--text-main);

  font-size:
    20px;

  font-weight:
    700;
}


.modal-stats {
  margin:
    24px 0;
}


.modal-stat {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.modal-stat-label {
  color:
    var(--text-soft);

  font-size:
    13px;
}


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

  font-size:
    28px;

  font-variant-numeric:
    tabular-nums;
}


.modal-actions {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    10px;
}


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

.settings-list {
  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;
}


.setting-row {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  padding:
    10px 12px;

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

  border-radius:
    13px;

  background:
    rgba(
      0,
      0,
      0,
      0.16
    );
}


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

  font-weight:
    700;
}


.setting-row input {
  width:
    20px;

  height:
    20px;

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


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

.stats-grid {
  display:
    grid;

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

  gap:
    10px;
}


.stats-card {
  min-height:
    96px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  padding:
    10px;

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

  border-radius:
    14px;

  background:
    rgba(
      0,
      0,
      0,
      0.16
    );
}


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

  font-size:
    11px;

  text-align:
    center;
}


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

  font-size:
    22px;
}


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

.toast {
  position:
    fixed;

  left:
    50%;

  bottom:
    calc(
      78px +
      env(
        safe-area-inset-bottom
      )
    );

  z-index:
    1500;

  max-width:
    min(
      86vw,
      360px
    );

  padding:
    10px 16px;

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

  border-radius:
    999px;

  background:
    rgba(
      3,
      14,
      9,
      0.96
    );

  color:
    var(--text-main);

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

  opacity:
    0;

  pointer-events:
    none;

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

  transition:
    opacity 160ms ease,
    transform 160ms ease;

  text-align:
    center;

  font-size:
    13px;
}


.toast.is-visible {
  opacity:
    1;

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


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

@keyframes nonogram-hint-pulse {

  0% {
    box-shadow:
      0 0 0 0
      rgba(
        243,
        214,
        122,
        0.8
      );
  }

  50% {
    box-shadow:
      0 0 0 8px
      rgba(
        243,
        214,
        122,
        0.15
      );
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(
        243,
        214,
        122,
        0
      );
  }

}


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

@media (
  max-width: 680px
) {

  .screen {
    padding:
      14px;
  }


  .intro-card,
  .menu-card,
  .panel-card {
    width:
      100%;
  }


  .intro-card {
    min-height:
      380px;

    padding:
      34px 18px;
  }


  .menu-card {
    padding:
      28px 18px;
  }


  .panel-card {
    padding:
      18px;
  }


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


  .difficulty-card {
    min-height:
      84px;

    flex-direction:
      row;

    justify-content:
      space-between;

    padding:
      16px 20px;
  }


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


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


  .game-main {
    padding:
      8px;
  }


  .game-controls {
    gap:
      6px;

    padding-left:
      7px;

    padding-right:
      7px;
  }


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

    font-size:
      10px;
  }

}


/* =========================================================
   MOBILE MUY ANGOSTO
========================================================= */

@media (
  max-width: 390px
) {

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

    padding-left:
      8px;

    padding-right:
      8px;
  }


  .btn-icon {
    width:
      38px;

    height:
      38px;
  }


  .hud-time {
    font-size:
      15px;
  }


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


  .toast {
    bottom:
      calc(
        118px +
        env(
          safe-area-inset-bottom
        )
      );
  }

}


/* =========================================================
   LANDSCAPE BAJO
========================================================= */

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

  .screen {
    padding:
      8px;
  }


  .intro-card {
    min-height:
      0;

    width:
      min(
        560px,
        72vw
      );

    padding:
      18px 26px;

    gap:
      9px;
  }


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


  .intro-subtitle {
    margin-bottom:
      6px;

    font-size:
      14px;
  }


  .menu-card {
    width:
      min(
        620px,
        78vw
      );

    padding:
      18px 24px;

    gap:
      18px;
  }


  .menu-title {
    font-size:
      36px;
  }


  .menu-actions {
    display:
      grid;

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

    width:
      100%;
  }


  .menu-actions
  .btn {
    min-width:
      0;

    width:
      100%;
  }


  .panel-card {
    max-height:
      calc(
        100dvh - 16px
      );
  }


  .difficulty-list {
    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }


  .difficulty-card {
    min-height:
      92px;
  }


  .game-hud {
    min-height:
      52px;
  }


  .game-main {
    padding:
      5px;
  }


  .game-controls {
    padding-top:
      5px;

    padding-bottom:
      calc(
        5px +
        env(
          safe-area-inset-bottom
        )
      );
  }


  .control-btn {
    min-height:
      36px;
  }

}


/* =========================================================
   NONOGRAM 2.0 — INTRO Y START PREMIUM
========================================================= */

.screen-intro {
  padding: clamp(8px, 2vw, 22px);
  background:
    radial-gradient(circle at 50% 25%, rgba(213,174,54,.18), transparent 38%),
    linear-gradient(145deg,#020805,#071a12 52%,#020805);
}

.intro-card {
  position:relative;
  isolation:isolate;
  width:min(96vw,1180px);
  min-height:0;
  aspect-ratio:3 / 2;
  max-height:94dvh;
  padding:0;
  gap:0;
  overflow:hidden;
  border:1px solid rgba(242,201,84,.75);
  border-radius:clamp(14px,2vw,28px);
  background:#030504;
  box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 0 1px rgba(255,231,150,.12),0 0 55px rgba(197,146,24,.12);
}

.intro-poster { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.intro-overlay { position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 50%,rgba(1,5,3,.2) 66%,rgba(1,5,3,.92) 100%); }
.intro-cta { position:absolute; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; padding:clamp(18px,3vw,38px); text-align:center; }
.premium-kicker { color:#f4d77d; font-size:clamp(9px,1vw,13px); font-weight:900; letter-spacing:.28em; text-shadow:0 2px 8px #000; }
.intro-cta .intro-subtitle { margin:0; color:#fff3cc; font-size:clamp(12px,1.4vw,17px); text-shadow:0 2px 9px #000; }
.intro-cta .btn { min-width:min(270px,80vw); min-height:52px; border-color:#f2cd67; box-shadow:0 12px 34px rgba(213,166,39,.28); }
.intro-version { color:rgba(255,240,195,.6); font-size:9px; font-weight:800; letter-spacing:.18em; }

.screen-menu {
  background:
    radial-gradient(circle at 25% 45%,rgba(23,92,61,.4),transparent 40%),
    linear-gradient(135deg,#020805,#092319 56%,#020805);
}

.menu-card {
  position:relative;
  width:min(94vw,940px);
  padding:clamp(22px,4vw,46px);
  gap:28px;
  overflow:hidden;
  border-color:rgba(236,195,74,.65);
  background:linear-gradient(145deg,rgba(7,28,19,.98),rgba(2,11,7,.98));
  box-shadow:0 28px 80px rgba(0,0,0,.65),inset 0 0 70px rgba(21,83,57,.12);
}
.menu-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 20%,rgba(255,223,119,.055) 48%,transparent 70%); }
.menu-header { display:grid; grid-template-columns:minmax(190px,.72fr) minmax(300px,1.28fr); align-items:center; gap:clamp(22px,5vw,56px); text-align:left; }
.menu-icon { width:100%; max-width:270px; aspect-ratio:1; object-fit:contain; filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)); }
.menu-brand-copy { min-width:0; }
.menu-title-image { display:block; width:100%; max-width:570px; height:auto; margin:10px 0 4px; filter:drop-shadow(0 8px 15px rgba(0,0,0,.45)); }
.menu-subtitle { margin:8px 0 0; color:var(--text-soft); font-size:clamp(12px,1.5vw,16px); letter-spacing:.08em; text-transform:uppercase; }
.menu-actions { position:relative; display:grid; grid-template-columns:1.25fr 1fr 1fr; width:100%; gap:12px; }
.menu-actions .btn { width:100%; min-width:0; min-height:58px; }
.menu-footer { display:flex; justify-content:center; flex-wrap:wrap; gap:10px 28px; padding-top:18px; border-top:1px solid rgba(216,178,61,.2); color:rgba(243,234,208,.55); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.menu-footer span::before { content:"◆"; margin-right:8px; color:var(--gold); font-size:7px; }

@media (max-width:680px) {
  .intro-card { width:100%; height:min(88dvh,760px); aspect-ratio:auto; }
  .intro-poster { object-position:58% center; }
  .intro-overlay { background:linear-gradient(180deg,rgba(0,0,0,.06) 35%,rgba(1,5,3,.9) 78%,#010503 100%); }
  .intro-cta { padding:22px 16px 25px; }
  .intro-cta .intro-subtitle { max-width:320px; }
  .menu-card { width:100%; max-height:calc(100dvh - 24px); padding:20px 16px; gap:17px; overflow:auto; }
  .menu-header { display:flex; align-items:center; flex-direction:column; gap:8px; text-align:center; }
  .menu-icon { width:min(34vw,150px); }
  .menu-title-image { width:min(78vw,420px); margin:0 auto; }
  .menu-subtitle { margin-top:2px; font-size:10px; }
  .menu-actions { grid-template-columns:1fr; gap:8px; }
  .menu-actions .btn { min-height:48px; }
  .menu-footer { gap:7px 14px; padding-top:12px; font-size:8px; }
}

@media (max-height:650px) and (orientation:landscape) {
  .intro-card { width:min(88vw,900px); aspect-ratio:3 / 2; }
  .intro-cta { gap:5px; padding:12px 20px; }
  .intro-cta .intro-subtitle,.premium-kicker { display:none; }
  .intro-cta .btn { min-height:42px; }
  .menu-card { width:min(92vw,900px); padding:14px 22px; gap:12px; }
  .menu-header { grid-template-columns:120px 1fr; gap:24px; }
  .menu-icon { max-width:120px; }
  .menu-title-image { max-width:400px; }
  .menu-actions .btn { min-height:44px; }
  .menu-footer { padding-top:9px; }
}

/* NONOGRAM 2.1 — selectores integrados (capa final) */
.menu-card{max-height:calc(100dvh - 24px);overflow:auto}
.menu-card .menu-header{grid-template-columns:150px minmax(0,1fr);gap:28px}
.menu-card .menu-icon{max-width:150px}.menu-card .menu-title-image{max-width:460px}
.menu-setup{position:relative;display:grid;grid-template-columns:1fr 1.08fr;gap:16px}
.menu-choice{min-width:0;padding:15px;border:1px solid rgba(212,175,55,.22);border-radius:16px;background:rgba(0,0,0,.18)}
.menu-choice-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;color:var(--gold-light);font-size:11px;font-weight:900;letter-spacing:.13em}
.menu-choice-heading small{color:var(--text-soft);font-size:9px;letter-spacing:.08em}
.menu-difficulty-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.menu-difficulty-list .difficulty-card{min-height:55px;padding:9px 12px;border-radius:11px}.menu-difficulty-list .difficulty-name{font-size:12px}.menu-difficulty-list .difficulty-size{font-size:10px}
.difficulty-card.is-selected{border-color:#f3d36e;background:linear-gradient(145deg,rgba(45,111,76,.68),rgba(13,48,33,.88));box-shadow:0 0 0 1px rgba(243,211,110,.18),0 8px 24px rgba(0,0,0,.2)}
.difficulty-card.is-empty{position:relative}.difficulty-card.is-empty::after{content:"PRÓX.";position:absolute;top:5px;right:6px;color:rgba(244,215,125,.62);font-size:7px;font-weight:900;letter-spacing:.05em}
.menu-levels-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.menu-levels-grid .level-card{min-height:55px;padding:6px 4px;border-radius:10px}.menu-levels-grid .level-number{font-size:16px}.menu-levels-grid .level-name{max-width:100%;overflow:hidden;font-size:8px;text-overflow:ellipsis;white-space:nowrap}
.level-card.is-selected{border-color:#f3d36e;background:linear-gradient(145deg,rgba(56,130,90,.65),rgba(11,43,29,.92));box-shadow:0 0 0 1px rgba(243,211,110,.18);transform:translateY(-1px)}
.menu-card .menu-actions{grid-template-columns:1.25fr 1fr 1fr}
.settings-legal{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(212,175,55,.18)}.settings-legal a{color:var(--gold-light);font-size:9px;font-weight:900;letter-spacing:.1em;text-decoration:none}.settings-legal a:hover{color:white;text-decoration:underline;text-underline-offset:4px}
#screen-difficulty,#screen-levels{display:none!important}
@media(max-width:680px){.menu-card{padding:13px 12px;gap:10px}.menu-card .menu-header{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;text-align:left}.menu-card .menu-icon{width:76px}.menu-card .menu-title-image{width:100%;max-width:300px;margin:0}.menu-card .menu-subtitle{font-size:8px}.menu-setup{grid-template-columns:1fr;gap:8px}.menu-choice{padding:9px;border-radius:12px}.menu-choice-heading{margin-bottom:7px}.menu-difficulty-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.menu-difficulty-list .difficulty-card{min-height:48px;padding:6px 3px;flex-direction:column;justify-content:center}.menu-difficulty-list .difficulty-name{font-size:9px}.menu-difficulty-list .difficulty-size{font-size:8px}.menu-levels-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.menu-levels-grid .level-card{min-height:46px}.menu-levels-grid .level-number{font-size:14px}.menu-levels-grid .level-name{font-size:7px}.menu-card .menu-actions{grid-template-columns:1.2fr 1fr 1fr;gap:5px}.menu-card .menu-actions .btn{min-height:43px;padding:7px 4px;font-size:9px;letter-spacing:.04em}.menu-footer{display:none}.settings-legal{margin-top:8px;padding-top:8px}}
@media(max-height:700px){.menu-card .menu-header{grid-template-columns:92px minmax(0,1fr)}.menu-card .menu-icon{max-width:92px}.menu-card{padding-top:11px;padding-bottom:11px;gap:8px}.menu-choice{padding-top:8px;padding-bottom:8px}.menu-footer{display:none}}

/* NONOGRAM 2.2 — assets de juego y HUD premium */
.hud-asset-button {
  width:54px;
  height:44px;
  padding:0;
  overflow:hidden;
  border:0;
  background:transparent;
}
.hud-asset-button img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.48));
}
.game-controls {
  grid-template-columns:1.25fr .68fr 1.25fr 1.25fr;
  align-items:center;
  gap:7px;
  padding-top:6px;
  padding-bottom:calc(6px + env(safe-area-inset-bottom));
}
.control-btn.asset-control {
  min-width:0;
  height:52px;
  min-height:52px;
  padding:0;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
}
.asset-control img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.5));
}
.asset-control-square img {
  margin:auto;
  width:52px;
}
.control-btn.asset-control.is-active {
  border-color:#f3d36e;
  background:rgba(224,183,56,.08);
  box-shadow:0 0 0 1px rgba(255,228,139,.18),0 0 18px rgba(230,184,45,.25);
}
.control-btn.asset-control:active img {
  transform:translateY(1px) scale(.97);
}
.victory-crown {
  display:block;
  width:min(110px,28vw);
  height:auto;
  margin:0 auto 5px;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.48));
}
@media(max-width:680px) {
  .game-hud { min-height:58px; padding-right:8px; padding-left:8px; }
  .hud-asset-button { width:48px; height:39px; }
  .game-controls { grid-template-columns:1.24fr .62fr 1.2fr 1.24fr; gap:3px; padding-right:4px; padding-left:4px; }
  .control-btn.asset-control { height:44px; min-height:44px; border-radius:9px; }
  .asset-control-square img { width:44px; }
}

/* NONOGRAM 2.3 — tablero legible y figura visible */
.nonogram-board {
  padding:7px;
  border-color:rgba(242,202,74,.72);
  background:linear-gradient(145deg,#03130c,#010704);
  box-shadow:0 18px 44px rgba(0,0,0,.55),0 0 28px rgba(202,159,34,.08);
}
.nonogram-cell {
  border-right-color:rgba(28,46,36,.72);
  border-bottom-color:rgba(28,46,36,.72);
  background:linear-gradient(145deg,#f3ead3,#cfc2a3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.nonogram-cell:hover {
  background:linear-gradient(145deg,#fff7df,#ded0ae);
  box-shadow:inset 0 0 0 2px rgba(220,173,48,.5);
}
.nonogram-cell.is-filled {
  background:
    radial-gradient(circle at 32% 25%,rgba(66,151,104,.62),transparent 42%),
    linear-gradient(145deg,#176443,#062b1c 72%);
  box-shadow:
    inset 0 0 0 2px rgba(244,205,83,.88),
    inset 0 0 14px rgba(0,0,0,.45),
    0 0 8px rgba(229,187,55,.18);
}
.nonogram-cell.is-filled::after {
  content:"";
  position:absolute;
  inset:24%;
  border-radius:50%;
  background:rgba(255,224,117,.68);
  box-shadow:0 0 10px rgba(242,196,58,.58);
}
.nonogram-cell.is-crossed {
  background:linear-gradient(145deg,#e5dbc1,#bcae8d);
  color:#702d25;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  font-weight:900;
}
.nonogram-row-clue,
.nonogram-column-clue {
  color:#fff0bd;
  text-shadow:0 2px 5px rgba(0,0,0,.8);
}
@media(max-width:680px) {
  .nonogram-board { padding:4px; }
  .nonogram-cell.is-filled::after { inset:28%; }
}

/* NONOGRAM 2.4 — tutorial y revelación */
.victory-preview {
  --preview-size:5;
  display:grid;
  grid-template-columns:repeat(var(--preview-size),1fr);
  width:min(210px,54vw);
  aspect-ratio:1;
  gap:1px;
  margin:12px auto;
  padding:6px;
  border:1px solid rgba(239,199,72,.55);
  border-radius:10px;
  background:#06120d;
}
.victory-preview i { display:block; min-width:0; background:rgba(227,216,186,.14); }
.victory-preview i.is-filled { background:linear-gradient(145deg,#e7c44e,#2d8b5e); box-shadow:0 0 5px rgba(232,194,61,.28); }
.tutorial-card { width:min(92vw,520px); text-align:center; }
.tutorial-card p { margin:8px auto; max-width:430px; color:var(--text-soft); line-height:1.5; }
.tutorial-card p strong { color:#fff1bd; }
.tutorial-example {
  display:grid;
  grid-template-columns:repeat(5,42px);
  justify-content:center;
  gap:3px;
  margin:18px auto;
}
.tutorial-example span,.tutorial-example b {
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border:1px solid rgba(218,180,57,.42);
  background:#d8ccb0;
  color:#71372d;
  font-size:22px;
}
.tutorial-example b { background:linear-gradient(145deg,#247752,#082e20); box-shadow:inset 0 0 0 2px #d6ad38; }
.tutorial-card .btn { width:100%; margin-top:16px; }
@media(max-width:480px) {
  .tutorial-example { grid-template-columns:repeat(5,34px); }
  .tutorial-example span,.tutorial-example b { width:34px;height:34px;font-size:18px; }
}