:root {

  /* MODO CLARO */

  --bg:
    linear-gradient(
      180deg,
      #dfeccf 0%,
      #cfe0bb 100%
    );

  --panel:
    rgba(255,255,255,0.15);

  --panel-border:
    rgba(255,255,255,0.25);

  --board:
    rgba(255,255,255,0.08);

  --cell:
    #9d7748;

  --cell-dark:
    #7f5f37;

  --revealed:
    #efe5d0;

  --text:
    #2b2b2b;

  --shadow:
    rgba(0,0,0,0.18);

  --glass:
    blur(12px);
}

body.dark {

  /* MODO OSCURO */

  --bg:
    linear-gradient(
      180deg,
      #162018 0%,
      #243328 100%
    );

  --panel:
    rgba(30,30,30,0.35);

  --panel-border:
    rgba(255,255,255,0.08);

  --board:
    rgba(255,255,255,0.04);

  --cell:
    #5d4330;

  --cell-dark:
    #493424;

  --revealed:
    #9f8c77;

  --text:
    #f2f2f2;

  --shadow:
    rgba(0,0,0,0.4);
}

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

body {

  font-family:
    Arial,
    sans-serif;

  background:
    var(--bg);

  color:
    var(--text);

  min-height:
    100vh;

  transition:
    background 0.35s ease,
    color 0.35s ease;

  overflow-x: hidden;
}

.app {

  width: 100%;
  max-width: 720px;

  margin: auto;

  padding:
    16px;
}

/* =========================
   TOPBAR
========================= */

.topbar {

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 18px;

  overflow: hidden;
}

/* =========================
   BRAND
========================= */

.brand {

  display: flex;

  align-items: center;

  gap: 12px;
}

/* =========================
   LOGO
========================= */

.logo {

  width: 82px;

  height: 82px;

  object-fit: contain;

  display: block;

  border-radius: 22px;

}

/* =========================
   TITLE
========================= */

.title {

  font-family:
    "Baloo 2",
    cursive;

  font-size:
    clamp(35px, 6vw, 44px);

  font-weight:
    800;

  line-height: 1;

  letter-spacing:
    -0.5px;
    
  margin-top:2.5%;

  color:
    var(--text);

  text-shadow:
    0 3px 6px rgba(0,0,0,0.16);
}

/* =========================
   THEME BUTTON
========================= */

.theme-btn {

  width: 52px;
  height: 52px;

  border-radius: 50%;

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

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.04)
    );

  backdrop-filter:
    var(--glass);

  -webkit-backdrop-filter:
    var(--glass);

  box-shadow:
    0 4px 12px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.25);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.3s ease;

  font-size: 0;
  color: transparent;
}

.theme-btn:hover {

  transform:
    scale(1.05);
}

.theme-btn::before {

  content: "";

  width: 24px;
  height: 24px;

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      #ffffff 50%,
      #111111 50%
    );

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

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

.game-panel {

  background:
    var(--panel);

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

  backdrop-filter:
    var(--glass);

  -webkit-backdrop-filter:
    var(--glass);

  border-radius:
    28px;

  padding:
    18px;

  box-shadow:
    0 8px 24px var(--shadow);
}

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

.stats {

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 18px;
}

.stat-box,
.restart-btn {

  flex: 1;

  min-height: 58px;

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

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      var(--cell),
      var(--cell-dark)
    );

  box-shadow:
    0 4px 10px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.15);

  display: flex;
  align-items: center;
  justify-content: center;

  color: white;

  font-weight: bold;

  font-size: 18px;
}

.restart-btn {

  max-width: 72px;

  font-size: 24px;

  cursor: pointer;

  transition:
    transform 0.2s ease;
}

.restart-btn:hover {

  transform:
    scale(1.06);
}

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

.board {

  width: 100%;

  max-width: 100vw;

  aspect-ratio: 1 / 1;

  display: grid;

  gap: 3px;

  background:
    var(--board);

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

  border-radius:
    22px;

  padding:
    6px;

  overflow: hidden;
}

/* =========================
   CELLS
========================= */

.cell {

  width: 100%;

  aspect-ratio: 1 / 1;

  border-radius:
    8px;

  background:
    linear-gradient(
      145deg,
      var(--cell),
      var(--cell-dark)
    );

  box-shadow:
    0 2px 6px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.12);

  display: flex;
  align-items: center;
  justify-content: center;

  user-select: none;

  font-weight: bold;

  font-size:
    clamp(13px, 4vw, 22px);

  color:
    #ffffff;

  transition:
    transform 0.12s ease,
    background 0.2s ease;
}

.cell:hover {

  transform:
    scale(1.04);
}

.cell.revealed {

  background:
    var(--revealed);

  color:
    #222;
}

.cell img {

  width:
    clamp(14px, 58%, 28px);

  height:
    clamp(14px, 58%, 28px);

  object-fit: contain;
}

/* =========================
   DIFFICULTY BUTTONS
========================= */

.difficulty-buttons {

  display: flex;

  gap: 10px;

  margin-top: 18px;

  flex-wrap: wrap;
}

.difficulty-buttons button {

  flex: 1;

  min-width: 120px;

  min-height: 52px;

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

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      var(--cell),
      var(--cell-dark)
    );

  color:
    white;

  font-weight:
    bold;

  font-size:
    15px;

  box-shadow:
    0 4px 10px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,0.12);

  cursor: pointer;

  transition:
    transform 0.18s ease;
}

.difficulty-buttons button:hover {

  transform:
    translateY(-2px);
}

.message-box {

  margin-top: 16px;

  padding: 16px;

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.18),
      rgba(255,255,255,0.08)
    );

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

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  color:
    var(--text);

  text-align: center;

  font-weight: 700;

  font-size:
    18px;

  animation:
    fadeIn 0.25s ease;
}

.hidden {

  display: none;
}

@keyframes fadeIn {

  from {

    opacity: 0;

    transform:
      translateY(8px);
  }

  to {

    opacity: 1;

    transform:
      translateY(0);
  }
}

/* =========================
   DESKTOP
========================= */

@media (min-width: 768px) {

  .app {

    padding: 24px;
  }

  .cell {

    font-size: 20px;
  }

}

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

@media (max-width: 768px) {

  button[data-size="16"] {

    display: none;
  }

  .app {

    padding: 10px;
  }

  .game-panel {

    padding: 14px;
  }

  .board {

    gap: 2px;

    padding: 5px;
  }

  .cell {

    border-radius: 6px;

    font-size:
      clamp(12px, 3.8vw, 18px);
  }

  .cell img {

    width:
      clamp(12px, 52%, 22px);

    height:
      clamp(12px, 52%, 22px);
  }
}