/* Explode Blocos — the play column only. The frame lives in `_shared/chrome.css`. */

.jl-explode-blocos {
  --jl-bg: #0e1116;
  --jl-fg: #e9eef5;
  --jl-line: #232c36;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--jl-bg);
  color: var(--jl-fg);
  overflow: hidden;
  touch-action: manipulation;
  /* A-1: the five colours. Dark, saturated hues chosen to stay distinguishable on a cheap
     LCD, each paired with a distinct glyph in the markup so colour is never the only signal. */
  --c0: #3b82f6;   /* azul    */
  --c1: #22c55e;   /* verde   */
  --c2: #ef4444;   /* vermelho*/
  --c3: #eab308;   /* amarelo */
  --c4: #a855f7;   /* roxo    */
}

.jl-explode-blocos *,
.jl-explode-blocos *::before,
.jl-explode-blocos *::after { box-sizing: border-box; margin: 0; padding: 0; }

.jl-exb-col {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ---- HUD --------------------------------------------------------------- */
.jl-exb-hud {
  flex: 0 0 auto;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
}

.jl-exb-lv {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .72;
  white-space: nowrap;
}

.jl-exb-stat { display: flex; align-items: baseline; gap: 5px; }

.jl-exb-lab {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .62;
}

.jl-exb-val {
  font-size: 15px;
  font-weight: 800;
  /* A-2: tabular numerals so the score does not shift width as it grows. */
  font-variant-numeric: tabular-nums;
}

/* The undo button. Hidden entirely at zero rather than shown disabled — a dead control
   invites a tap that does nothing. */
.jl-exb-undo {
  margin-left: auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--jl-line);
  border-radius: 8px;
  background: #1a222c;
  color: var(--jl-fg);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.jl-exb-undo[hidden] { display: none; }
.jl-exb-undo:active { transform: scale(.96); }
.jl-exb-undo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jl-exb-undo:disabled { opacity: .45; cursor: default; }

/* ---- the board and its meter ------------------------------------------ */
.jl-exb-mid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  /* The board above, the column meter below — the order of the spec's layout diagram. */
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 8px 8px;
  /* THE BOARD IS CENTRED, NOT LEFT-ALIGNED. On a landscape or tablet viewport the board is
     width-limited, and without this it sat against the left edge with two thirds of the screen
     empty — which reads as a layout bug rather than as a portrait game on a wide screen. */
  justify-content: center;
}

/* PR-5 / A-3: ten bars in the same order as the columns. aria-hidden — it duplicates the
   board, and reading ten values aloud is noise.
   
   A HORIZONTAL STRIP BELOW THE BOARD, which is what the spec's own layout diagram shows:
       │  Column meter ▁▂▃▄▅▆▇ — per-column remaining │  24px strip, one bar per column
   Built as a vertical strip on the LEFT, the ten bars stacked into one grey column that read as
   a scrollbar rather than as a meter — one column sampled every ~40px, the other nine invisible.
   Each bar's HEIGHT now shows how full its column is, and the bars line up under the columns. */
.jl-exb-meter {
  flex: 0 0 24px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--gap, 2px);
  /* The width comes from the board, set in JS, so each bar sits under its column. `width:100%`
     here overrode that and stretched the ten bars across the whole container — 125px bars over
     30px cells. */
  padding: 0 0 4px;
}

.jl-exb-mbar {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  position: relative;
  background: rgba(255, 255, 255, .05);
  border-radius: 2px;
  overflow: hidden;
  /* The fill grows from the BOTTOM, like the blocks it counts. */
  display: flex;
  align-items: flex-end;
}

.jl-exb-mfill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #4b5563;
  border-radius: 2px;
  transition: height 160ms ease-out;
}

.jl-exb-board {
  position: relative;
  /* Grows to its width limit but never past it; `margin:0 auto` keeps it centred when the
     column is wider than the grid. */
  flex: 0 1 auto;
  min-width: 0;
  /* Height is derived from the cell size so the grid never overflows its column. */
  height: calc(var(--rows, 14) * var(--cell, 28px) + (var(--rows, 14) - 1) * var(--gap, 2px));
  align-self: flex-start;
}

/* R1/R2: absolutely positioned cells moved by transform, never top/left. */
.jl-exb-cell {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell, 28px);
  height: var(--cell, 28px);
  border: 0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* I2: the whole cell is the tap target, so the glyph stays small and the target does not. */
  font-size: calc(var(--cell, 28px) * 0.46);
  line-height: 1;
  color: rgba(255, 255, 255, .92);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  /* R5: falls and clears animate via transform. */
  transition: transform 180ms ease-out, background-color 120ms linear, opacity 120ms linear;
  will-change: transform;
}

.jl-exb-cell:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.jl-exb-empty {
  background: rgba(255, 255, 255, .035);
  color: transparent;
  cursor: default;
}

.jl-exb-c0 { background: var(--c0); }
.jl-exb-c1 { background: var(--c1); }
.jl-exb-c2 { background: var(--c2); }
.jl-exb-c3 { background: var(--c3); color: #1a1400; }
.jl-exb-c4 { background: var(--c4); }

/* PR-7 / R4: the group preview is a CLASS, so it is one style recalculation rather than 140
   inline writes. */
.jl-exb-cell.jl-exb-hl {
  filter: brightness(1.45);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}

/* ---- the bonus chip (M5) ---------------------------------------------- */
.jl-exb-bonus {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 17px;
  font-weight: 800;
  color: #06222a;
  background: #FFD54F;
  padding: 5px 14px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

.jl-exb-bonus[hidden] { display: none; }

/* ---- the veil --------------------------------------------------------- */
.jl-exb-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #0e1116;
}

.jl-exb-veil[hidden] { display: none; }

.jl-exb-box { width: 100%; max-width: 340px; text-align: center; }

.jl-exb-box h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: 10px;
}

.jl-exb-sub {
  font-size: 15px;
  line-height: 1.5;
  opacity: .88;
  margin-bottom: 16px;
}

.jl-exb-left {
  font-size: 13px;
  opacity: .7;
  margin: -10px 0 16px;
}

.jl-exb-rec {
  font-size: 15px;
  font-weight: 800;
  color: #FFD54F;
  margin: -8px 0 16px;
}

.jl-exb-go {
  display: inline-block;
  min-width: 150px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  background: #2b6cb0;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.jl-exb-go:active { transform: scale(.97); }
.jl-exb-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- reduced motion (A-5/R5) ------------------------------------------ */
/* Falls, clears and the meter all become instant. The game plays identically; it simply
   stops moving. */
@media (prefers-reduced-motion: reduce) {
  .jl-exb-cell { transition: none; }
  .jl-exb-mfill { transition: none; }
  .jl-exb-go:active { transform: none; }
  .jl-exb-undo:active { transform: none; }
}

/* ---- small screens (SH-21: 320px) ------------------------------------- */
@media (max-width: 359px) {
  .jl-exb-hud { gap: 9px; padding: 0 6px; height: 36px; }
  .jl-exb-lab { font-size: 9px; }
  .jl-exb-val { font-size: 14px; }
  .jl-exb-meter { flex: 0 0 20px; }
  .jl-exb-mid { padding: 0 5px 5px; gap: 4px; }
}