/* ============================================================
   Campo Minado — tema sunset.
   ============================================================ */

.sj-game-host:has(.cm) {
  --sj-text:           #2d2438;
  --sj-text-dim:       #5d5468;
  --sj-text-mute:      rgba(45, 36, 56, 0.42);
  --sj-bg-card:        rgba(255, 255, 255, 0.85);
  --sj-bg-elev:        rgba(255, 255, 255, 0.7);
  --sj-bg-card-hover:  rgba(255, 255, 255, 0.95);
  --sj-border:         rgba(255, 255, 255, 0.5);
  --sj-border-bright:  rgba(45, 36, 56, 0.18);
  --sj-accent:         #6b5bff;
  --sj-accent-hover:   #5347d6;
  --sj-accent-soft:    rgba(107, 91, 255, 0.12);
  --sj-gold:           #ffd93d;
  --sj-danger:         #ff3355;
  --sj-score-bg:       #fff;
}
.sj-game-host:has(.cm),
body:has(.sj-game-stage) .sj-game-host:has(.cm) {
  background:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.18), transparent 35%),
    radial-gradient(circle at 85% 80%, rgba(107,91,255,0.20), transparent 40%),
    linear-gradient(135deg, #ff7e5f 0%, #feb47b 45%, #ff6b95 100%);
}
.sj-game-stage-frame:has(.cm) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============ Wrapper ============ */
.cm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px;
  height: 100%;
  box-sizing: border-box;
}

/* ============ Jogo ============ */
.cm-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  flex: 1;
  min-height: 0;
}
.cm-game[hidden] { display: none; }

.cm-board-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgba(255, 255, 255, 0.30);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.45),
    0 8px 28px rgba(45, 36, 56, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: 100%;
  max-height: 100%;
  /* Sem scroll: o JS encolhe a célula até caber. Em mobile + nível Difícil
     em portrait, o overlay de rotação cobre. */
  overflow: hidden;
}

.cm-board {
  display: grid;
  /* --cols, --cell setados via JS */
  grid-template-columns: repeat(var(--cols, 9), var(--cell, 32px));
  gap: 2px;
  background: rgba(45, 36, 56, 0.20);
  padding: 2px;
  border-radius: 6px;
}

/* ============ Célula ============ */
.cm-cell {
  width: var(--cell, 32px);
  height: var(--cell, 32px);
  border: 0;
  border-radius: 4px;
  background: linear-gradient(160deg, #fff 0%, #f4f1f9 100%);
  color: transparent;
  font-family: var(--sj-font-mono);
  font-weight: 900;
  font-size: calc(var(--cell, 32px) * 0.55);
  line-height: 1;
  padding: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: grid;
  place-items: center;
  /* Transition em filter (interpolável); background não anima entre gradient e
     cor sólida — viraria um "piscar" abrupto. */
  transition: filter .15s ease, transform .08s;
  box-shadow:
    inset 0 0 0 1px rgba(45, 36, 56, 0.08),
    inset 0 -2px 0 rgba(45, 36, 56, 0.07);
}
.cm-cell:hover:not(.is-revealed):not(:disabled) {
  filter: brightness(0.93);
}
.cm-cell.is-revealed {
  background: rgba(255, 255, 255, 0.55);
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(45, 36, 56, 0.10);
}
.cm-cell.is-flag::after {
  content: '🚩';
  color: initial;
  font-size: calc(var(--cell, 32px) * 0.55);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15));
}
.cm-cell.is-flag.is-wrong::after {
  content: '✕';
  color: var(--sj-danger);
}
.cm-cell.is-mine {
  background: var(--sj-danger);
  color: transparent;
}
.cm-cell.is-mine::after {
  content: '💣';
  /* Cor explícita (#fff): em sistemas sem emoji colorido, o glyph cai pra
     monocromático e herdaria color:transparent da .cm-cell → some. */
  color: #fff;
  font-size: calc(var(--cell, 32px) * 0.6);
}
/* Mina que tinha bandeira: por convenção desse jogo, mostra ✕ branco no
   lugar da bomba (sinaliza "marcada e detonada"). */
.cm-cell.is-mine.was-flagged::after {
  content: '✕';
  color: #fff;
  font-weight: 900;
  font-size: calc(var(--cell, 32px) * 0.55);
}
/* A clicada: destaque com glow + pop inicial. Fundo segue vermelho (com 💣). */
.cm-cell.is-mine.is-detonated {
  z-index: 2;
  box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(255, 51, 85, 0.7);
}
/* Flash 3x — aplicado a todas as minas reveladas no fim do jogo */
.cm-cell.is-mine.is-flashing {
  animation: cm-mine-flash .3s ease-in-out 3;
}
.cm-cell.is-mine.is-detonated.is-flashing {
  animation: cm-detonate .35s ease-out, cm-mine-flash .3s ease-in-out 3;
}
@keyframes cm-mine-flash {
  0%, 100% { background: var(--sj-danger); }
  50%      { background: #fff; }
}
@keyframes cm-detonate {
  0%   { transform: scale(0.55); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.cm-cell.is-revealed.n-0 { color: transparent; }
.cm-cell.n-1 { color: #1976d2; }
.cm-cell.n-2 { color: #388e3c; }
.cm-cell.n-3 { color: #d32f2f; }
.cm-cell.n-4 { color: #7b1fa2; }
.cm-cell.n-5 { color: #c62828; }
.cm-cell.n-6 { color: #00897b; }
.cm-cell.n-7 { color: #2d2438; }
.cm-cell.n-8 { color: #616161; }

/* ============ Mobile ============ */
@media (max-width: 600px) {
  .cm { gap: 8px; padding: 8px; }
  .cm-start { padding: 18px 16px; gap: 14px; }
  .cm-start-title { font-size: 26px; }
  .cm-start-options { gap: 6px; }
  .cm-opt { padding: 10px 6px; }
}