/* =========================================================
   A23 — STYLES
   BUSCAMINAS PUCARÁ
========================================================= */


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

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

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

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

  background:
    #06100c;

  color:
    #f4ead2;

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

  -webkit-tap-highlight-color:
    transparent;

  touch-action:
    manipulation;
}

body {
  min-height:
    100vh;

  min-height:
    100dvh;

  overflow:
    hidden;
}

button,
input {
  font:
    inherit;
}

button {
  border:
    0;

  outline:
    0;

  cursor:
    pointer;
}

button:disabled {
  cursor:
    default;
}

[hidden] {
  display:
    none !important;
}


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

.minesweeper-app {
  width:
    100vw;

  min-height:
    100vh;

  min-height:
    100dvh;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at center,
      #143326 0%,
      #091a13 45%,
      #04100b 100%
    );
}


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

.minesweeper-screen {
  width:
    100%;

  min-height:
    100vh;

  min-height:
    100dvh;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    18px;
}


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

.minesweeper-primary-button,
.minesweeper-secondary-button,
.minesweeper-small-button,
.minesweeper-option-button,
.minesweeper-difficulty-button,
.minesweeper-toggle-button {
  transition:
    transform 0.12s ease,
    border-color 0.12s ease,
    background 0.12s ease,
    opacity 0.12s ease;
}

.minesweeper-primary-button:active,
.minesweeper-secondary-button:active,
.minesweeper-small-button:active,
.minesweeper-option-button:active,
.minesweeper-difficulty-button:active,
.minesweeper-toggle-button:active {
  transform:
    scale(0.97);
}


/* =========================================================
   BOTÓN PRINCIPAL
========================================================= */

.minesweeper-primary-button {
  min-width:
    180px;

  min-height:
    48px;

  padding:
    12px 24px;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.9
    );

  border-radius:
    12px;

  background:
    linear-gradient(
      180deg,
      #30230a 0%,
      #181004 100%
    );

  color:
    #f6d77c;

  font-weight:
    800;

  letter-spacing:
    1px;

  box-shadow:
    0 8px 22px
    rgba(
      0,
      0,
      0,
      0.35
    );
}


/* =========================================================
   BOTÓN SECUNDARIO
========================================================= */

.minesweeper-secondary-button {
  min-width:
    160px;

  min-height:
    44px;

  padding:
    10px 20px;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.48
    );

  border-radius:
    10px;

  background:
    rgba(
      5,
      20,
      14,
      0.88
    );

  color:
    #ead7a2;

  font-weight:
    700;
}


/* =========================================================
   BOTÓN PEQUEÑO
========================================================= */

.minesweeper-small-button {
  min-height:
    34px;

  padding:
    7px 13px;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.48
    );

  border-radius:
    9px;

  background:
    rgba(
      5,
      17,
      12,
      0.9
    );

  color:
    #e9d59f;

  font-size:
    12px;

  font-weight:
    700;

  letter-spacing:
    0.5px;
}


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

.minesweeper-intro-card {
  width:
    min(
      430px,
      92vw
    );

  padding:
    34px 24px 22px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    24px;

  border:
    1px solid
    rgba(
      218,
      178,
      73,
      0.55
    );

  border-radius:
    22px;

  background:
    linear-gradient(
      180deg,
      rgba(
        11,
        31,
        22,
        0.97
      ),
      rgba(
        4,
        15,
        10,
        0.98
      )
    );

  box-shadow:
    0 22px 60px
    rgba(
      0,
      0,
      0,
      0.52
    );
}

.minesweeper-intro-brand {
  text-align:
    center;
}

.minesweeper-intro-title {
  font-size:
    clamp(
      34px,
      8vw,
      54px
    );

  font-weight:
    900;

  letter-spacing:
    2px;

  color:
    #f5d476;
}

.minesweeper-intro-subtitle {
  margin-top:
    4px;

  font-size:
    17px;

  font-weight:
    700;

  letter-spacing:
    7px;

  color:
    #d6b65f;
}

.minesweeper-intro-visual {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      52px
    );

  gap:
    6px;
}

.minesweeper-intro-visual span {
  width:
    52px;

  height:
    52px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      216,
      176,
      72,
      0.4
    );

  border-radius:
    8px;

  background:
    #15281e;

  color:
    #f4d373;

  font-size:
    22px;

  font-weight:
    900;
}

.minesweeper-intro-version {
  font-size:
    11px;

  color:
    rgba(
      235,
      221,
      182,
      0.6
    );
}


/* =========================================================
   START
========================================================= */

.minesweeper-start-card {
  width:
    min(
      900px,
      96vw
    );

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

  overflow:
    auto;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.55
    );

  border-radius:
    20px;

  background:
    rgba(
      6,
      22,
      15,
      0.96
    );

  box-shadow:
    0 20px 54px
    rgba(
      0,
      0,
      0,
      0.45
    );
}

.minesweeper-start-header {
  padding:
    24px 20px 18px;

  text-align:
    center;

  border-bottom:
    1px solid
    rgba(
      215,
      177,
      73,
      0.25
    );
}

.minesweeper-start-title {
  font-size:
    clamp(
      28px,
      5vw,
      44px
    );

  font-weight:
    900;

  color:
    #f4d576;

  letter-spacing:
    2px;
}

.minesweeper-start-subtitle {
  margin-top:
    4px;

  color:
    #c9ad62;

  font-size:
    13px;

  font-weight:
    700;

  letter-spacing:
    5px;
}

.minesweeper-start-content {
  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.5fr
    )
    minmax(
      240px,
      0.8fr
    );

  gap:
    24px;

  padding:
    22px;
}

.minesweeper-start-section {
  min-width:
    0;
}

.minesweeper-start-section-title {
  margin-bottom:
    12px;

  color:
    #d8bb69;

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    1.4px;
}

.minesweeper-difficulty-grid {
  display:
    grid;

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

  gap:
    10px;
}

.minesweeper-difficulty-button {
  min-height:
    110px;

  padding:
    15px 10px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.28
    );

  border-radius:
    12px;

  background:
    rgba(
      16,
      44,
      31,
      0.72
    );

  color:
    #e7d5a4;
}

.minesweeper-difficulty-button.is-selected {
  border-color:
    #d9b849;

  background:
    linear-gradient(
      180deg,
      rgba(
        69,
        55,
        16,
        0.9
      ),
      rgba(
        28,
        33,
        18,
        0.95
      )
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(
      255,
      221,
      116,
      0.16
    );
}

.minesweeper-difficulty-title {
  font-weight:
    900;

  font-size:
    14px;
}

.minesweeper-difficulty-description {
  font-size:
    11px;

  color:
    rgba(
      235,
      220,
      180,
      0.72
    );
}

.minesweeper-start-info {
  display:
    flex;

  flex-direction:
    column;
}

.minesweeper-start-info-card {
  padding:
    14px;

  margin-bottom:
    15px;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.2
    );

  border-radius:
    12px;

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

.minesweeper-start-info-row {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    8px 0;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );

  font-size:
    13px;
}

.minesweeper-start-info-row:last-child {
  border-bottom:
    0;
}

.minesweeper-start-info-row span {
  color:
    rgba(
      235,
      221,
      182,
      0.68
    );
}

.minesweeper-start-info-row strong {
  color:
    #f2d67e;
}

.minesweeper-start-footer {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    11px;

  padding:
    0 22px 20px;
}

.minesweeper-start-play {
  min-width:
    220px;
}

.minesweeper-start-version {
  font-size:
    10px;

  color:
    rgba(
      235,
      221,
      182,
      0.5
    );
}


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

.minesweeper-game-screen {
  padding:
    8px;
}

.minesweeper-game-shell {
  position:
    relative;

  width:
    min(
      1180px,
      100%
    );

  height:
    calc(
      100dvh - 16px
    );

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.42
    );

  border-radius:
    16px;

  background:
    rgba(
      5,
      18,
      12,
      0.94
    );

  box-shadow:
    0 16px 50px
    rgba(
      0,
      0,
      0,
      0.45
    );
}

.minesweeper-game-header {
  flex:
    0 0 auto;

  min-height:
    46px;

  padding:
    7px 12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  border-bottom:
    1px solid
    rgba(
      215,
      177,
      73,
      0.2
    );
}

.minesweeper-game-brand {
  color:
    #e6c65f;

  font-size:
    13px;

  font-weight:
    900;

  letter-spacing:
    1.1px;
}

.minesweeper-game-header-actions {
  display:
    flex;

  gap:
    7px;
}

.minesweeper-game-main {
  flex:
    1 1 auto;

  min-height:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  padding:
    8px;
}


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

.minesweeper-hud {
  width:
    min(
      720px,
      100%
    );

  flex:
    0 0 auto;

  display:
    grid;

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

  gap:
    7px;

  margin-bottom:
    8px;
}

.minesweeper-hud-item {
  min-height:
    50px;

  padding:
    6px 8px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.22
    );

  border-radius:
    9px;

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

.minesweeper-hud-item span {
  font-size:
    9px;

  font-weight:
    700;

  letter-spacing:
    0.8px;

  color:
    rgba(
      234,
      220,
      182,
      0.64
    );
}

.minesweeper-hud-item strong {
  margin-top:
    2px;

  font-size:
    16px;

  color:
    #f3d476;
}


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

.minesweeper-board-stage {
  flex:
    1 1 auto;

  min-height:
    0;

  width:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    auto;

  padding:
    4px;

  overscroll-behavior:
    contain;
}


/* =========================================================
   BOARD
========================================================= */

.minesweeper-board {
  --minesweeper-columns:
    9;

  display:
    grid;

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

  gap:
    2px;

  width:
    min(
      92vw,
      720px
    );

  max-height:
    100%;

  aspect-ratio:
    var(
      --minesweeper-columns
    ) / 9;

  padding:
    5px;

  border:
    1px solid
    rgba(
      217,
      183,
      80,
      0.45
    );

  border-radius:
    10px;

  background:
    #07120d;

  box-shadow:
    inset 0 0 26px
    rgba(
      0,
      0,
      0,
      0.45
    );
}


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

.minesweeper-cell {
  position:
    relative;

  min-width:
    0;

  min-height:
    0;

  aspect-ratio:
    1 / 1;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.06
    );

  border-radius:
    4px;

  user-select:
    none;

  -webkit-user-select:
    none;

  touch-action:
    manipulation;

  font-size:
    clamp(
      10px,
      2.3vw,
      21px
    );

  font-weight:
    900;

  line-height:
    1;
}

.minesweeper-cell.is-hidden {
  background:
    linear-gradient(
      145deg,
      #264535,
      #132a20
    );

  border-top-color:
    rgba(
      255,
      255,
      255,
      0.15
    );

  border-left-color:
    rgba(
      255,
      255,
      255,
      0.1
    );

  border-right-color:
    rgba(
      0,
      0,
      0,
      0.4
    );

  border-bottom-color:
    rgba(
      0,
      0,
      0,
      0.5
    );
}

.minesweeper-cell.is-hidden:hover {
  background:
    linear-gradient(
      145deg,
      #315a45,
      #183326
    );
}

.minesweeper-cell.is-revealed {
  background:
    #d8d0b8;

  border-color:
    #aea58d;
}

.minesweeper-cell.is-empty {
  background:
    #d5ccb3;
}

.minesweeper-cell.is-flagged {
  background:
    linear-gradient(
      145deg,
      #3b3420,
      #211c10
    );

  color:
    #f4cf59;
}

.minesweeper-cell.is-mine {
  background:
    #3a3027;

  color:
    #17110d;
}

.minesweeper-cell.is-exploded {
  background:
    #a62b23;

  color:
    #fff2d9;

  box-shadow:
    inset 0 0 12px
    rgba(
      255,
      210,
      90,
      0.5
    );
}

.minesweeper-cell-symbol {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    100%;

  height:
    100%;
}

.minesweeper-flag-symbol {
  color:
    #f0c640;

  text-shadow:
    0 1px 2px
    rgba(
      0,
      0,
      0,
      0.7
    );
}

.minesweeper-mine-symbol {
  color:
    #17110d;
}


/* =========================================================
   NÚMEROS
========================================================= */

.minesweeper-cell.number-1 {
  color:
    #1452b7;
}

.minesweeper-cell.number-2 {
  color:
    #217538;
}

.minesweeper-cell.number-3 {
  color:
    #b62b28;
}

.minesweeper-cell.number-4 {
  color:
    #27217a;
}

.minesweeper-cell.number-5 {
  color:
    #7c241f;
}

.minesweeper-cell.number-6 {
  color:
    #16787f;
}

.minesweeper-cell.number-7 {
  color:
    #181818;
}

.minesweeper-cell.number-8 {
  color:
    #676767;
}


/* =========================================================
   STATUS
========================================================= */

.minesweeper-game-status {
  flex:
    0 0 auto;

  min-height:
    24px;

  margin-top:
    5px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  color:
    rgba(
      238,
      222,
      182,
      0.75
    );

  font-size:
    11px;
}


/* =========================================================
   PAUSA
========================================================= */

.minesweeper-pause-overlay {
  position:
    absolute;

  inset:
    0;

  z-index:
    50;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    18px;

  background:
    rgba(
      2,
      8,
      5,
      0.82
    );

  backdrop-filter:
    blur(
      4px
    );
}

.minesweeper-pause-card {
  width:
    min(
      340px,
      90vw
    );

  padding:
    28px 18px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    12px;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.5
    );

  border-radius:
    16px;

  background:
    #081b12;
}

.minesweeper-pause-title {
  margin-bottom:
    7px;

  color:
    #f0d06e;

  font-size:
    27px;

  font-weight:
    900;

  letter-spacing:
    3px;
}


/* =========================================================
   RESULT
========================================================= */

.minesweeper-result-shell {
  width:
    min(
      900px,
      96vw
    );

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

  overflow:
    auto;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.48
    );

  border-radius:
    18px;

  background:
    rgba(
      6,
      21,
      14,
      0.97
    );
}

.minesweeper-result-header {
  padding:
    20px;

  text-align:
    center;

  border-bottom:
    1px solid
    rgba(
      215,
      177,
      73,
      0.2
    );
}

.minesweeper-result-brand {
  color:
    #d5b85e;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    1px;
}

.minesweeper-result-title {
  margin-top:
    4px;

  color:
    #f0d06f;

  font-size:
    24px;

  font-weight:
    900;

  letter-spacing:
    2px;
}

.minesweeper-result-content {
  padding:
    18px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    16px;
}

.minesweeper-result-message {
  padding:
    10px 16px;

  border-radius:
    10px;

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

  font-weight:
    900;

  text-align:
    center;
}

.minesweeper-result-message.is-win {
  color:
    #f4d575;
}

.minesweeper-result-message.is-loss {
  color:
    #e37a67;
}

.minesweeper-result-stats {
  width:
    min(
      640px,
      100%
    );

  display:
    grid;

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

  gap:
    8px;
}

.minesweeper-result-stat {
  padding:
    9px 6px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    3px;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.2
    );

  border-radius:
    9px;

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

.minesweeper-result-stat span {
  font-size:
    9px;

  color:
    rgba(
      235,
      220,
      180,
      0.62
    );
}

.minesweeper-result-stat strong {
  color:
    #efd073;

  font-size:
    14px;
}

.minesweeper-result-board-wrap {
  width:
    100%;

  display:
    flex;

  justify-content:
    center;

  overflow:
    auto;
}

.minesweeper-result-board {
  width:
    min(
      80vw,
      620px
    );
}

.minesweeper-result-actions {
  display:
    flex;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    10px;
}


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

.minesweeper-settings-card {
  width:
    min(
      760px,
      96vw
    );

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

  overflow:
    auto;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.5
    );

  border-radius:
    18px;

  background:
    rgba(
      6,
      21,
      14,
      0.97
    );
}

.minesweeper-settings-header {
  padding:
    20px;

  text-align:
    center;

  border-bottom:
    1px solid
    rgba(
      215,
      177,
      73,
      0.2
    );
}

.minesweeper-settings-title {
  color:
    #efd071;

  font-size:
    25px;

  font-weight:
    900;

  letter-spacing:
    2px;
}

.minesweeper-settings-subtitle {
  margin-top:
    4px;

  color:
    #bda35c;

  font-size:
    11px;

  letter-spacing:
    2px;
}

.minesweeper-settings-content {
  display:
    grid;

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

  gap:
    14px;

  padding:
    16px;
}

.minesweeper-settings-section {
  padding:
    14px;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.18
    );

  border-radius:
    12px;

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

.minesweeper-settings-section-title {
  margin-bottom:
    10px;

  color:
    #d7b962;

  font-size:
    12px;

  font-weight:
    800;

  letter-spacing:
    1px;
}

.minesweeper-settings-options {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;
}

.minesweeper-option-button {
  min-height:
    38px;

  padding:
    8px 12px;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.25
    );

  border-radius:
    8px;

  background:
    #14291f;

  color:
    #ddcca0;

  font-size:
    11px;

  font-weight:
    700;
}

.minesweeper-option-button.is-selected {
  border-color:
    #d6b74d;

  background:
    #403513;

  color:
    #f2d471;
}

.minesweeper-settings-list {
  display:
    flex;

  flex-direction:
    column;
}

.minesweeper-settings-row {
  min-height:
    43px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.05
    );

  font-size:
    12px;
}

.minesweeper-settings-row:last-child {
  border-bottom:
    0;
}

.minesweeper-toggle-button {
  min-width:
    54px;

  min-height:
    30px;

  border:
    1px solid
    rgba(
      215,
      177,
      73,
      0.24
    );

  border-radius:
    16px;

  background:
    #252521;

  color:
    #bcb6a3;

  font-size:
    10px;

  font-weight:
    900;
}

.minesweeper-toggle-button.is-on {
  background:
    #433711;

  border-color:
    #d6b548;

  color:
    #f1d16a;
}

.minesweeper-settings-volume {
  margin-top:
    10px;

  display:
    grid;

  grid-template-columns:
    auto 1fr auto;

  align-items:
    center;

  gap:
    10px;

  font-size:
    11px;
}

.minesweeper-settings-volume input {
  width:
    100%;
}

.minesweeper-settings-footer {
  padding:
    0 16px 16px;

  display:
    flex;

  justify-content:
    center;
}


/* =========================================================
   TABLET / MOBILE PORTRAIT
========================================================= */

@media (
  max-width: 760px
) {
  .minesweeper-screen {
    padding:
      8px;
  }

  .minesweeper-start-content {
    grid-template-columns:
      1fr;

    gap:
      16px;

    padding:
      15px;
  }

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

  .minesweeper-difficulty-button {
    min-height:
      70px;
  }

  .minesweeper-settings-content {
    grid-template-columns:
      1fr;
  }

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

  .minesweeper-hud {
    gap:
      4px;
  }

  .minesweeper-hud-item {
    min-height:
      43px;

    padding:
      4px;
  }

  .minesweeper-hud-item span {
    font-size:
      8px;
  }

  .minesweeper-hud-item strong {
    font-size:
      13px;
  }
}


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

@media (
  max-height: 650px
) and (
  orientation: landscape
) {
  .minesweeper-game-screen {
    padding:
      3px;
  }

  .minesweeper-game-shell {
    width:
      100%;

    height:
      calc(
        100dvh - 6px
      );

    border-radius:
      10px;
  }

  .minesweeper-game-header {
    min-height:
      34px;

    padding:
      3px 8px;
  }

  .minesweeper-game-brand {
    font-size:
      10px;
  }

  .minesweeper-small-button {
    min-height:
      27px;

    padding:
      4px 9px;

    font-size:
      9px;
  }

  .minesweeper-game-main {
    padding:
      3px 6px;
  }

  .minesweeper-hud {
    width:
      min(
        620px,
        96%
      );

    margin-bottom:
      3px;

    gap:
      3px;
  }

  .minesweeper-hud-item {
    min-height:
      34px;

    padding:
      2px 4px;

    border-radius:
      6px;
  }

  .minesweeper-hud-item span {
    font-size:
      7px;
  }

  .minesweeper-hud-item strong {
    margin-top:
      0;

    font-size:
      11px;
  }

  .minesweeper-board-stage {
    padding:
      1px;
  }

  .minesweeper-board {
    max-width:
      94vw;

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

    width:
      auto;

    height:
      100%;

    padding:
      3px;

    gap:
      1px;
  }

  .minesweeper-cell {
    border-radius:
      2px;

    font-size:
      clamp(
        8px,
        2.1vh,
        15px
      );
  }

  .minesweeper-game-status {
    min-height:
      17px;

    margin-top:
      1px;

    font-size:
      8px;
  }
}


/* =========================================================
   START / SETTINGS LANDSCAPE BAJO
========================================================= */

@media (
  max-height: 650px
) and (
  orientation: landscape
) {
  .minesweeper-start-card,
  .minesweeper-settings-card,
  .minesweeper-result-shell {
    max-height:
      calc(
        100dvh - 8px
      );
  }

  .minesweeper-start-header {
    padding:
      10px;
  }

  .minesweeper-start-title {
    font-size:
      25px;
  }

  .minesweeper-start-content {
    padding:
      10px;

    gap:
      10px;
  }

  .minesweeper-difficulty-button {
    min-height:
      74px;
  }

  .minesweeper-start-footer {
    padding:
      0 10px 10px;
  }

  .minesweeper-settings-header {
    padding:
      10px;
  }

  .minesweeper-settings-content {
    gap:
      8px;

    padding:
      8px;
  }

  .minesweeper-settings-section {
    padding:
      9px;
  }
}


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

   30 columnas necesitan celdas compactas.
========================================================= */

.minesweeper-board[data-columns="30"] {
  width:
    min(
      96vw,
      1080px
    );

  aspect-ratio:
    30 / 16;
}

.minesweeper-board[data-columns="30"]
.minesweeper-cell {
  font-size:
    clamp(
      7px,
      1.55vw,
      16px
    );

  border-radius:
    2px;
}


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

.minesweeper-board[data-columns="16"] {
  width:
    min(
      88vw,
      680px
    );

  aspect-ratio:
    1 / 1;
}


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

.minesweeper-board[data-columns="9"] {
  width:
    min(
      78vw,
      520px
    );

  aspect-ratio:
    1 / 1;
}


/* =========================================================
   ACCESIBILIDAD
========================================================= */

.minesweeper-cell:focus-visible,
.minesweeper-primary-button:focus-visible,
.minesweeper-secondary-button:focus-visible,
.minesweeper-small-button:focus-visible,
.minesweeper-option-button:focus-visible,
.minesweeper-difficulty-button:focus-visible,
.minesweeper-toggle-button:focus-visible {
  outline:
    2px solid
    #f3d16d;

  outline-offset:
    2px;
}


/* =========================================================
   REDUCIR ANIMACIÓN SEGÚN SISTEMA
========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}

/* =========================================================
   INTRO + START PREMIUM 2026
========================================================= */

.minesweeper-premium-kicker {
  color: #d8b44c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.minesweeper-intro-card {
  position: relative;
  isolation: isolate;
  width: min(490px, 92vw);
  padding: 28px 28px 20px;
  gap: 15px;
  overflow: hidden;
  border: 1px solid rgba(247, 202, 83, 0.78);
  background:
    radial-gradient(circle at 50% 43%, rgba(193, 130, 24, 0.20), transparent 34%),
    linear-gradient(145deg, rgba(16, 43, 30, 0.98), rgba(2, 13, 9, 0.99));
  box-shadow:
    0 28px 75px rgba(0, 0, 0, 0.62),
    inset 0 0 0 2px rgba(255, 220, 113, 0.06),
    inset 0 0 48px rgba(209, 153, 34, 0.07);
}

.minesweeper-intro-card::before,
.minesweeper-start-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(218, 177, 70, 0.14);
  border-radius: 15px;
}

.minesweeper-intro-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 9vw, 58px);
  line-height: .95;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff2b8 0%, #e6bd50 46%, #9b6616 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.7));
}

.minesweeper-intro-subtitle {
  color: #f0cc66;
  font-size: 14px;
  letter-spacing: 9px;
}

.minesweeper-intro-visual {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
}

.minesweeper-intro-visual::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(240, 195, 76, .42);
  border-radius: 50%;
  box-shadow: 0 0 45px rgba(231, 165, 36, .18), inset 0 0 28px rgba(231, 165, 36, .10);
}

.minesweeper-intro-orbit {
  position: absolute;
  inset: 4px;
  border: 1px dashed rgba(230, 185, 69, .25);
  border-radius: 50%;
  animation: minesweeper-premium-spin 22s linear infinite;
}

.minesweeper-intro-mine {
  width: 185px;
  height: 185px;
  object-fit: contain;
  filter: drop-shadow(0 15px 18px rgba(0, 0, 0, .68));
  animation: minesweeper-mine-float 3.2s ease-in-out infinite;
}

.minesweeper-intro-flag {
  position: absolute;
  right: -5px;
  bottom: 8px;
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 8px 7px rgba(0,0,0,.58));
  transform: rotate(7deg);
}

.minesweeper-intro-legend {
  margin-top: -5px;
  color: rgba(238, 215, 153, .76);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2.1px;
}

.minesweeper-intro-card .minesweeper-primary-button {
  min-width: 235px;
  box-shadow: 0 8px 26px rgba(0,0,0,.38), 0 0 22px rgba(221,169,43,.10);
}

.minesweeper-start-card {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  border-color: rgba(234, 191, 75, .68);
  background:
    radial-gradient(circle at 50% -25%, rgba(185, 126, 26, .25), transparent 42%),
    linear-gradient(150deg, rgba(11, 37, 25, .99), rgba(2, 14, 9, .99));
  box-shadow: 0 24px 64px rgba(0,0,0,.56), inset 0 0 0 2px rgba(255,220,105,.04);
}

.minesweeper-start-header {
  min-height: 118px;
  padding: 13px 22px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  background: linear-gradient(180deg, rgba(1,12,8,.56), rgba(14,42,28,.15));
}

.minesweeper-start-emblem {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(203,145,29,.18), transparent 68%);
}

.minesweeper-start-emblem img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.55));
}

.minesweeper-start-brand { text-align: left; }

.minesweeper-start-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 5vw, 45px);
  line-height: 1;
  background: linear-gradient(180deg, #fff0ac, #d9a936 62%, #9b6718);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.7));
}

.minesweeper-start-content { padding-top: 18px; }

.minesweeper-difficulty-button {
  position: relative;
  overflow: hidden;
  border-color: rgba(219,176,62,.35);
  background: linear-gradient(160deg, rgba(24,61,42,.9), rgba(7,27,18,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 18px rgba(0,0,0,.16);
}

.minesweeper-difficulty-button::before {
  content: "";
  position: absolute;
  width: 82px;
  height: 82px;
  right: -31px;
  bottom: -34px;
  border: 1px solid rgba(225,182,64,.10);
  border-radius: 50%;
}

.minesweeper-difficulty-button.is-selected {
  border-color: #e1bb4f;
  box-shadow: 0 0 24px rgba(216,166,45,.13), inset 0 0 22px rgba(216,166,45,.08);
}

.minesweeper-start-info-card {
  background: linear-gradient(150deg, rgba(2,15,10,.48), rgba(18,47,32,.45));
  box-shadow: inset 0 0 18px rgba(0,0,0,.18);
}

.minesweeper-secondary-button[data-action="open-settings"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.minesweeper-button-asset {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 7px;
}

@keyframes minesweeper-premium-spin { to { transform: rotate(360deg); } }
@keyframes minesweeper-mine-float {
  0%, 100% { transform: translateY(2px) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1.5deg); }
}

@media (max-width: 680px) {
  .minesweeper-intro-card { padding: 22px 18px 17px; gap: 12px; }
  .minesweeper-intro-visual { width: 190px; height: 190px; }
  .minesweeper-intro-mine { width: 158px; height: 158px; }
  .minesweeper-intro-flag { width: 62px; height: 62px; }
  .minesweeper-start-header { min-height: 94px; padding: 8px 15px; gap: 9px; }
  .minesweeper-start-emblem, .minesweeper-start-emblem img { width: 70px; height: 70px; }
  .minesweeper-start-brand .minesweeper-premium-kicker { letter-spacing: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .minesweeper-intro-orbit,
  .minesweeper-intro-mine { animation: none; }
}

.minesweeper-legal-section {
  grid-column: 1 / -1;
}

.minesweeper-legal-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.minesweeper-legal-links a {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 1px solid rgba(218, 178, 73, .32);
  border-radius: 10px;
  background: rgba(4, 20, 13, .72);
  color: #e5cb7a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .7px;
  text-decoration: none;
}

.minesweeper-legal-links a:hover,
.minesweeper-legal-links a:focus-visible {
  border-color: #e0b94e;
  background: rgba(57, 47, 16, .72);
  color: #fff0ad;
}

@media (max-width: 520px) {
  .minesweeper-legal-links { grid-template-columns: 1fr; }
}

/* =========================================================
   ASSETS PREMIUM EN PARTIDA
========================================================= */

.minesweeper-game-shell {
  border-color: rgba(229, 186, 69, .58);
  background:
    radial-gradient(circle at 50% 30%, rgba(33, 79, 55, .30), transparent 50%),
    linear-gradient(150deg, rgba(6, 27, 18, .98), rgba(1, 12, 8, .99));
  box-shadow: 0 18px 52px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,217,101,.04);
}

.minesweeper-game-header {
  min-height: 58px;
  background: linear-gradient(180deg, rgba(2,14,9,.94), rgba(8,30,20,.90));
}

.minesweeper-game-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  letter-spacing: 1.4px;
}

.minesweeper-game-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.52));
}

.minesweeper-game-brand b { color: #fff0a8; }

.minesweeper-asset-action {
  min-height: 43px;
  padding: 4px 9px 4px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.minesweeper-asset-action img {
  width: 33px;
  height: 33px;
  object-fit: contain;
  border-radius: 7px;
}

.minesweeper-board {
  gap: 3px;
  padding: 7px;
  border: 2px solid rgba(231, 190, 75, .68);
  background: linear-gradient(145deg, #020b07, #0b2117);
  box-shadow: 0 13px 35px rgba(0,0,0,.45), inset 0 0 25px rgba(0,0,0,.52);
}

.minesweeper-cell {
  overflow: hidden;
  border-color: rgba(217,175,62,.18);
  background-color: #10271b;
}

.minesweeper-cell.is-hidden,
.minesweeper-cell.is-flagged {
  background-image: url("assets/casilla/casilla cerrada.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: rgba(240,197,78,.26);
}

.minesweeper-cell.is-hidden:hover {
  background-image:
    linear-gradient(rgba(255,223,117,.10), rgba(255,223,117,.10)),
    url("assets/casilla/casilla cerrada.webp");
  background-position: center;
  background-size: cover;
  filter: brightness(1.12);
}

.minesweeper-cell.is-revealed,
.minesweeper-cell.is-empty {
  background:
    radial-gradient(circle at 35% 28%, rgba(58,116,81,.34), transparent 48%),
    linear-gradient(145deg, #173c2a, #0a2418);
  border-color: rgba(207,166,57,.20);
  box-shadow: inset 0 0 11px rgba(0,0,0,.34);
}

.minesweeper-cell.is-mine,
.minesweeper-cell.is-exploded {
  background: radial-gradient(circle, rgba(180,94,22,.35), #21140d 76%);
}

.minesweeper-cell.is-exploded {
  background: radial-gradient(circle, rgba(255,168,32,.38), #661b13 78%);
  box-shadow: inset 0 0 15px rgba(255,210,90,.58), 0 0 13px rgba(255,76,22,.45);
}

.minesweeper-cell-symbol,
.minesweeper-number-symbol {
  display: block;
  width: 86%;
  height: 86%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.58));
}

.minesweeper-flag-symbol {
  width: 82%;
  height: 82%;
}

.minesweeper-mine-symbol { width: 92%; height: 92%; }

.minesweeper-hud-item {
  border-color: rgba(220,176,57,.30);
  background: linear-gradient(155deg, rgba(14,47,32,.78), rgba(2,17,11,.86));
  box-shadow: inset 0 0 14px rgba(0,0,0,.18);
}

@media (max-width: 560px) {
  .minesweeper-game-header { min-height: 51px; padding: 4px 6px; }
  .minesweeper-game-brand span { display: none; }
  .minesweeper-game-brand img { width: 38px; height: 38px; }
  .minesweeper-game-header-actions { gap: 3px; }
  .minesweeper-asset-action { min-width: 43px; padding: 3px; }
  .minesweeper-asset-action img { width: 34px; height: 34px; }
  .minesweeper-asset-action span { display: none; }
  .minesweeper-board { gap: 2px; padding: 5px; }
}

@media (max-height: 650px) and (orientation: landscape) {
  .minesweeper-game-header { min-height: 39px; }
  .minesweeper-game-brand img { width: 31px; height: 31px; }
  .minesweeper-asset-action { min-height: 31px; }
  .minesweeper-asset-action img { width: 27px; height: 27px; }
}

/* =========================================================
   OVERLAYS DE VICTORIA Y DERROTA
========================================================= */

.minesweeper-result-shell {
  position: relative;
  width: min(1180px, 100%);
  height: calc(100dvh - 16px);
  max-height: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, rgba(32,78,54,.28), transparent 52%),
    linear-gradient(150deg, rgba(6,27,18,.99), rgba(1,12,8,.99));
}

.minesweeper-result-content {
  height: 100%;
  justify-content: center;
  padding: 16px;
  filter: saturate(.72) brightness(.68);
}

.minesweeper-result-stats { flex: 0 0 auto; }

.minesweeper-result-board-wrap {
  flex: 0 1 auto;
  min-height: 0;
}

.minesweeper-result-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(1, 9, 6, .60);
  backdrop-filter: blur(4px);
  animation: minesweeper-overlay-in .36s ease-out both;
}

.minesweeper-result-overlay-card {
  width: min(410px, 91vw);
  padding: 23px 22px 21px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  border: 1px solid rgba(231,188,68,.72);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 31%, rgba(186,126,24,.20), transparent 38%),
    linear-gradient(150deg, rgba(12,42,28,.99), rgba(2,17,11,.99));
  box-shadow: 0 28px 80px rgba(0,0,0,.68), inset 0 0 0 2px rgba(255,219,101,.045);
  text-align: center;
}

.minesweeper-result-overlay.is-loss .minesweeper-result-overlay-card {
  border-color: rgba(239,104,66,.72);
  background:
    radial-gradient(circle at 50% 31%, rgba(180,52,25,.23), transparent 40%),
    linear-gradient(150deg, rgba(44,23,16,.99), rgba(12,12,8,.99));
}

.minesweeper-result-overlay-kicker {
  color: #d8b44c;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 3px;
}

.minesweeper-result-overlay.is-loss .minesweeper-result-overlay-kicker {
  color: #ef8a68;
}

.minesweeper-result-overlay-image {
  width: 116px;
  height: 116px;
  object-fit: contain;
  filter: drop-shadow(0 12px 13px rgba(0,0,0,.60));
}

.minesweeper-result-overlay.is-loss .minesweeper-result-overlay-image {
  width: 130px;
  height: 130px;
}

.minesweeper-result-overlay .minesweeper-result-message {
  min-height: 0;
  margin: -2px 0 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 6vw, 34px);
  line-height: 1.05;
  letter-spacing: .5px;
}

.minesweeper-result-overlay-detail {
  color: rgba(237,219,168,.68);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .9px;
}

.minesweeper-result-overlay .minesweeper-result-actions {
  width: 100%;
  margin-top: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.minesweeper-result-overlay .minesweeper-result-actions button {
  min-width: 0;
}

@keyframes minesweeper-overlay-in {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 520px) {
  .minesweeper-result-overlay-card { padding: 19px 15px 16px; gap: 9px; }
  .minesweeper-result-overlay-image { width: 98px; height: 98px; }
  .minesweeper-result-overlay.is-loss .minesweeper-result-overlay-image { width: 106px; height: 106px; }
  .minesweeper-result-overlay .minesweeper-result-actions { grid-template-columns: 1fr; }
}

@media (max-height: 560px) and (orientation: landscape) {
  .minesweeper-result-overlay-card { width: min(620px, 92vw); padding: 12px 18px; gap: 6px; }
  .minesweeper-result-overlay-image,
  .minesweeper-result-overlay.is-loss .minesweeper-result-overlay-image { width: 70px; height: 70px; }
  .minesweeper-result-overlay .minesweeper-result-actions { grid-template-columns: 1fr 1fr; }
}

/* El tablero principiante aprovecha todo el ancho útil en móvil. */
.minesweeper-board[data-columns="9"] {
  width: min(100%, 520px);
  max-width: 520px;
}

@media (max-width: 560px) {
  .minesweeper-game-main { padding-inline: 3px; }
  .minesweeper-board-stage { padding-inline: 0; }
}
/* Navegación web: Start vuelve al catálogo general de PUCARÁ. */
.minesweeper-site-back {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  text-decoration:none;
}