/* === Campo Minado === */
#cmin-wrap {
  font-family: 'Segoe UI', Arial, sans-serif;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px 14px;
  background: #0d1b2a;
  border-radius: 16px;
  color: #e8f0fe;
  position: relative;
}

.cmin-title { font-size: 1.7rem; font-weight: 800; text-align: center; margin: 0 0 6px; color: #fff; }
.cmin-subtitle { text-align: center; color: #90a4ae; margin: 0 0 22px; font-size: .9rem; }
.cmin-section-title {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  color: #546e7a; text-transform: uppercase; margin: 20px 0 10px;
  border-bottom: 1px solid #1e3a5f; padding-bottom: 6px;
}
.cmin-label { display: block; font-size: .82rem; color: #90a4ae; margin-bottom: 6px; }
.cmin-setup-block { margin-bottom: 14px; }
.cmin-counter-row { display: flex; align-items: center; gap: 14px; }
.cmin-counter-btn {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: #1e3a5f; color: #fff; font-size: 1.1rem; cursor: pointer;
  transition: background .15s;
}
.cmin-counter-btn:hover { background: #2a5298; }
.cmin-counter-val { font-size: 1.3rem; font-weight: 700; min-width: 28px; text-align: center; }
.cmin-mine-pct { font-size: .75rem; color: #546e7a; }

.cmin-config-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.cmin-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cmin-name-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.cmin-name-input {
  flex: 1; padding: 7px 10px; border-radius: 8px; border: 1px solid #2a4a6b;
  background: #162234; color: #e8f0fe; font-size: .9rem;
}
.cmin-name-input:focus { outline: none; border-color: #4a90d9; }

.cmin-btn-start {
  width: 100%; padding: 13px; border-radius: 12px; border: none;
  background: linear-gradient(135deg, #7B1FA2, #4A148C);
  color: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer;
  margin-top: 14px; transition: filter .15s;
}
.cmin-btn-start:hover { filter: brightness(1.2); }
.cmin-btn-restart { background: linear-gradient(135deg, #1565C0, #0D47A1) !important; }

/* ── Turn bar ── */
#cmin-turn-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 14px;
  background: #0f1d2d; border-radius: 12px; border: 1px solid #1e3a5f;
}
#cmin-turn-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  background: #fff; box-shadow: 0 0 10px currentColor;
  transition: background .3s;
}
#cmin-turn-info { flex: 1; }
#cmin-turn-name { font-size: 1rem; font-weight: 800; }
#cmin-turn-hint { font-size: .78rem; color: #546e7a; margin-top: 1px; }
#cmin-mines-badge {
  display: flex; align-items: center; gap: 4px;
  font-size: .9rem; font-weight: 700; color: #ef9a9a;
  background: rgba(127,0,0,.25); padding: 4px 10px; border-radius: 20px;
}
.cmin-bomb-icon { font-size: 1.1rem; }

/* ── Grid ── */
#cmin-grid-container {
  position: relative; margin-bottom: 14px;
}
#cmin-grid {
  display: grid;
  gap: 2px;
  /* --cols set inline by JS */
  grid-template-columns: repeat(var(--cols), 1fr);
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
}

.cmin-cell {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  font-weight: 900; line-height: 1;
  user-select: none;
  cursor: pointer;
  transition: filter .1s, background .15s;
}
/* Hidden */
.cmin-hidden {
  background: linear-gradient(145deg, #2e4a6b, #1e3552);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.cmin-hidden:hover { filter: brightness(1.35); }
/* Revealed safe */
.cmin-safe {
  background: #142030;
  cursor: default;
  border: 1px solid rgba(255,255,255,.06);
}
.cmin-safe:hover { filter: none; }
/* Numbers */
.cmin-n1 { color: #64B5F6; }
.cmin-n2 { color: #81C784; }
.cmin-n3 { color: #EF9A9A; }
.cmin-n4 { color: #CE93D8; }
.cmin-n5 { color: #FFAB91; }
.cmin-n6 { color: #4DD0E1; }
.cmin-n7 { color: #E0E0E0; }
.cmin-n8 { color: #9E9E9E; }
/* Mine (hit) */
.cmin-mine {
  background: #7f0000;
  cursor: default; animation: cmin-boom .4s ease-out;
}
.cmin-mine:hover { filter: none; }
@keyframes cmin-boom {
  0%   { transform: scale(1.6); background: #FF6F00; }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); background: #7f0000; }
}
/* Mine revealed at game end (safe mines) */
.cmin-mine-safe { background: #1e2d1e !important; color: #546e7a !important; cursor: default; }
.cmin-mine-safe:hover { filter: none; }

/* ── Event overlay ── */
#cmin-event-msg {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82); border-radius: 8px;
  pointer-events: none; z-index: 10;
}
#cmin-event-icon { font-size: 3.5rem; margin-bottom: 10px; }
#cmin-event-text { font-size: 1.3rem; font-weight: 800; text-align: center; }

/* ── Players strip ── */
#cmin-players-strip {
  display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px;
}
.cmin-ps-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 20px; font-size: .8rem; font-weight: 600;
  background: #0f1d2d; border: 1px solid #1e3a5f; color: #b0bec5;
}
.cmin-ps-dot { width: 9px; height: 9px; border-radius: 50%; }
.cmin-ps-chip.cmin-ps-active { background: #1e3a5f; border-color: #4a90d9; color: #fff; }
.cmin-ps-chip.cmin-ps-elim { opacity: .45; text-decoration: line-through; }

/* ── End screen ── */
#cmin-end-screen { text-align: center; padding: 30px 0; }
#cmin-end-icon { font-size: 4rem; margin-bottom: 10px; }
#cmin-end-title {
  font-size: 1.5rem; font-weight: 900; letter-spacing: .12em; margin-bottom: 8px;
  color: #FDD835; text-shadow: 0 0 20px rgba(253,216,53,.4);
}
#cmin-end-name { font-size: 2rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
#cmin-end-sub { color: #90a4ae; margin-bottom: 28px; font-size: .9rem; }