/* Jogo Leve — Campo Minado. A dark field, raised tiles, numbers in the classic colours. */

.jl-campo-minado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0d1210;
  color: #e6efe8;
  overflow: hidden;
}

.jl-cm-col {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 6px 6px 8px;
}

.jl-cm-hud { display: flex; gap: 14px; padding: 2px 2px 6px; justify-content: center; }
.jl-cm-stat { display: flex; align-items: baseline; gap: 5px; }
.jl-cm-lab { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #77988a; }
.jl-cm-val { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: #ffd54f; }

.jl-cm-moderow { display: flex; justify-content: center; padding-bottom: 8px; }
.jl-cm-mode {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid #2b4437;
  background: #16211b;
  color: #b6cdc1;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
/* THE FLAG MODE IS A MODE, so it is a toggle with a pressed state, not a button that does
   something once. The colour change is the only cue that a tap will now flag rather than open. */
.jl-cm-mode.on { border-color: #ffd54f; color: #10161d; background: #ffd54f; }
.jl-cm-mode:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* THE GRID IS SQUARE AND CAPPED. Column count is set inline by the game; the rows follow from
   the cell count. `min()` keeps it inside a short landscape viewport. */
.jl-cm-grid {
  flex: 0 1 auto;
  display: grid;
  gap: 3px;
  width: min(100%, 62vh, 440px);
  margin: 0 auto;
  aspect-ratio: 1;
  min-height: 0;
}

.jl-cm-cell {
  border: 0;
  padding: 0;
  border-radius: 4px;
  background: linear-gradient(180deg, #2a3f34 0%, #1e2d25 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  font-size: clamp(9px, 2.6vh, 16px);
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}
.jl-cm-cell:not(.jl-cm-open):active { background: #35503f; }
.jl-cm-cell:focus-visible { outline: 2px solid #ffd54f; outline-offset: 1px; }

/* An opened cell is FLAT, not raised — the depth is the cue that separates open from closed, and
   it survives a greyscale screen where the background colours would not. */
.jl-cm-open {
  background: #111815;
  box-shadow: inset 0 0 0 1px #1e2a24;
  cursor: default;
}

.jl-cm-flag { background: linear-gradient(180deg, #4a3a16 0%, #33280f 100%); font-size: clamp(10px, 2.4vh, 15px); }
.jl-cm-mine { background: #5a1f1f; }

/* THE CLASSIC NUMBER COLOURS, which players already read without a legend. Each is checked for
   contrast on the dark opened tile. */
.jl-cm-n1 { color: #6fb8ff; }
.jl-cm-n2 { color: #6ddc8c; }
.jl-cm-n3 { color: #ff8a7a; }
.jl-cm-n4 { color: #b48cff; }
.jl-cm-n5 { color: #ffb74d; }
.jl-cm-n6 { color: #4dd0c4; }
.jl-cm-n7 { color: #e8e8e8; }
.jl-cm-n8 { color: #9aa5a0; }

/* ---- the veil ---- */
.jl-cm-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(7, 11, 9, .96);
  z-index: 5;
}
.jl-cm-veil[hidden] { display: none; }
.jl-cm-box { width: 100%; max-width: 320px; text-align: center; }
.jl-cm-box h2 { margin: 0 0 8px; font-size: 21px; }
.jl-cm-sub { margin: 0 0 16px; font-size: 13px; color: #8fae9f; line-height: 1.5; }

.jl-cm-levels { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.jl-cm-lv {
  flex: 1 1 0; min-height: 44px;
  border: 1px solid #2b4437; border-radius: 9px;
  background: #14201a; color: #c3d6cc;
  font-size: 13px; font-weight: 650; cursor: pointer;
}
.jl-cm-lv.on { border-color: #ffd54f; color: #ffd54f; background: #1d2b23; }

.jl-cm-go {
  width: 100%; min-height: 48px;
  border: 0; border-radius: 11px;
  background: #ffd54f; color: #10161d;
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.jl-cm-go:active { background: #e8bf3d; }
.jl-cm-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-height: 460px) {
  .jl-cm-grid { width: min(100%, 68vh, 360px); }
  .jl-cm-mode { min-height: 34px; }
}