/* Jogo Leve — Quatro em Linha. Dark, high-contrast, sized for a 320px-wide phone. */

.jl-quatro-linha {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0b0e13;
  color: #e8eef6;
  overflow: hidden;
}

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

/* ---- the HUD ---- */
.jl-ql-hud {
  display: flex;
  gap: 16px;
  padding: 2px 2px 8px;
}
.jl-ql-stat { display: flex; align-items: baseline; gap: 6px; }
.jl-ql-lab {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7d8ea3;
}
.jl-ql-val {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #ffd54f;
}

/* ---- the drop buttons, aligned with the grid below ---- */
.jl-ql-cols {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 0 2px;
}
.jl-ql-colbtn {
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: #172029;
  color: #56657a;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.jl-ql-colbtn:active:not(:disabled) { background: #22303e; }
.jl-ql-colbtn:disabled { opacity: .35; cursor: default; }
.jl-ql-colbtn:focus-visible { outline: 2px solid #ffd54f; outline-offset: 2px; }

/* ---- the grid ---- */
/* THE BOARD WRAPPER OWNS THE SIZE, so the button row and the cells are always the same width.
   Sizing them as independent siblings made the buttons span the page while the board was capped
   by its height, on a wide screen. */
.jl-ql-board {
  flex: 0 1 auto;
  width: 100%;
  max-width: min(100%, 460px);
  aspect-ratio: 7 / 6.6;
  max-height: 64vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.jl-ql-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 4px;
  padding: 4px 2px 2px;
  min-height: 0;
}

.jl-ql-cell {
  border-radius: 50%;
  background: #10161d;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55);
  position: relative;
}

/* THE TWO COLOURS. Blue for you, red for the machine — the same pair the game's own branding
   uses, and the pair that survives the most common colour-vision deficiency (blue/red is
   distinguishable where red/green is not). */
.jl-ql-you { background: #2f7fd4; box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .35), 0 0 0 2px #4b9be0; }
.jl-ql-ai { background: #d9534f; box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .35), 0 0 0 2px #e8736f; }

/* The winning four pulse once, then hold. `prefers-reduced-motion` removes the animation in
   the media query at the bottom. */
.jl-ql-win { animation: jl-ql-winpulse .6s ease-out 2; box-shadow: 0 0 0 3px #ffd54f, 0 0 16px #ffd54f; }
@keyframes jl-ql-winpulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.jl-ql-status {
  margin: 8px 0 0;
  text-align: center;
  font-size: 13px;
  min-height: 18px;
  color: #a8b8cc;
}

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

.jl-ql-levels { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.jl-ql-lv {
  flex: 1 1 0; min-height: 44px;
  border: 1px solid #2b3948; border-radius: 9px;
  background: #141b24; color: #c3d0e0;
  font-size: 13px; font-weight: 650; cursor: pointer;
}
.jl-ql-lv.on { border-color: #ffd54f; color: #ffd54f; background: #1d2530; }

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

@media (prefers-reduced-motion: reduce) {
  .jl-ql-win { animation: none; }
}

/* A phone in landscape has little height: the board takes what is left and the HUD shrinks. */
@media (max-height: 460px) {
  .jl-ql-grid { max-height: none; flex: 1 1 auto; min-height: 0; }
  .jl-ql-hud { padding-bottom: 4px; }
  .jl-ql-status { margin-top: 4px; }
}