/* Jogo Leve — Paciência. A green felt table, white cards, sized for a 320px phone. */

.jl-paciencia {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at 50% 0%, #14351f 0%, #0b1a10 70%);
  color: #eaf3ec;
  overflow: hidden;
}

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

.jl-pac-hud { display: flex; gap: 14px; padding: 2px 2px 8px; }
.jl-pac-stat { display: flex; align-items: baseline; gap: 6px; }
.jl-pac-lab { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #79a98a; }
.jl-pac-val { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: #ffd54f; }

/* ---- the top row: stock, waste, foundations ---- */
/* THE TOP ROW IS SIZED BY CARD HEIGHT, NOT BY PAGE WIDTH. Six equal columns across a 1280px
   window made each slot ~200px wide, and a 5:7 aspect ratio then made them 280px tall — the row
   took half the screen and pushed the tableau off the bottom. A fixed card height, with the
   width following from the aspect ratio, keeps the same layout on any viewport. */
.jl-pac-top {
  display: grid;
  grid-template-columns: repeat(6, var(--jl-pac-cardw));
  justify-content: center;
  gap: 6px;
  padding: 0 2px 10px;
  flex: 0 0 auto;
}

.jl-pac-col { --jl-pac-cardh: clamp(54px, 13vh, 84px); --jl-pac-cardw: calc(var(--jl-pac-cardh) * 5 / 7); }

.jl-pac-slot {
  position: relative;
  aspect-ratio: 5 / 7;
  width: var(--jl-pac-cardw);
  border-radius: 6px;
  border: 1.5px dashed #2c5a3c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}

.jl-pac-empty { font-size: 15px; color: #2f6042; line-height: 1; }

.jl-pac-stock-empty { opacity: .55; }

/* A selected pile or card gets a gold ring, the same cue in every region. */
.jl-pac-sel { box-shadow: 0 0 0 2.5px #ffd54f; }

/* A column that would accept the current selection is faintly outlined, so a tap has a visible
   target rather than being a guess. */
.jl-pac-target { background: rgba(255, 213, 79, .06); border-radius: 8px; }

/* ---- cards ---- */
.jl-pac-card {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 6px;
  background: #f7f9f7;
  border: 1px solid #c9d3cb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}

.jl-pac-red { color: #c62828; }
.jl-pac-black { color: #1a1f1c; }
.jl-pac-r { font-size: clamp(11px, 3.6vw, 17px); font-weight: 800; }
.jl-pac-s { font-size: clamp(12px, 4vw, 19px); }

/* THE BACK is a green lattice, not a flat colour: on a green table a flat back reads as an empty
   slot at a glance, and the two must never be confused. */
.jl-pac-back {
  background:
    repeating-linear-gradient(45deg, #1e4d33 0 5px, #245c3d 5px 10px);
  border-color: #163b27;
}

/* ---- the tableau ---- */
/* THE BOARD IS SEVEN CARD-WIDTHS WIDE and centred, so the cards are the same size as in the top
   row and the fan does not stretch to the page width. */
.jl-pac-board {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(7, var(--jl-pac-cardw));
  justify-content: center;
  gap: 5px;
  padding: 0 2px;
  min-height: 0;
  align-items: start;
  overflow: hidden;
}

/* A BOARD COLUMN IS A PLAIN COLUMN, NOT A CARD. It inherited the slot's 5:7 aspect ratio, so
   each column was as tall as one card and the grid distributed the spare height as staggered
   row starts — the columns marched down the page instead of sitting on one baseline. */
.jl-pac-board > .jl-pac-col {
  padding: 0;
  min-height: 0;
  aspect-ratio: auto;
  height: auto;
  align-self: start;
  width: var(--jl-pac-cardw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* THE OVERLAP IS THE WHOLE LAYOUT PROBLEM. Cards in a column stack with a NEGATIVE top margin so
   a full column fits in the space available, and the fan must stay readable at 320px. A fixed
   overlap cannot do both, so it is expressed in terms of the card height with a floor. */
.jl-pac-board .jl-pac-card + .jl-pac-card { margin-top: -78%; }
.jl-pac-board .jl-pac-card { width: 100%; flex: 0 0 auto; }

/* A face-down card may hide its rank, but its DEPTH still has to be readable, so the fan is
   tight for backs and slightly looser where a rank is showing. */
.jl-pac-emptyslot {
  max-width: var(--jl-pac-cardw);
  aspect-ratio: 5 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1.5px dashed #2c5a3c;
  font-size: 16px;
  color: #2f6042;
  width: 100%;
}

/* ---- the veil ---- */
.jl-pac-veil {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 12, 8, .96);
  z-index: 5;
}
.jl-pac-veil[hidden] { display: none; }
.jl-pac-box { width: 100%; max-width: 320px; text-align: center; }
.jl-pac-box h2 { margin: 0 0 8px; font-size: 22px; }
.jl-pac-sub { margin: 0 0 16px; font-size: 13px; color: #8fb59c; line-height: 1.5; }
.jl-pac-go {
  width: 100%; min-height: 48px;
  border: 0; border-radius: 11px;
  background: #ffd54f; color: #10161d;
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.jl-pac-go:active { background: #e8bf3d; }
.jl-pac-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* AN ILLEGAL MOVE SHAKES the board once. Colour alone would not reach a player who cannot see
   it, and a silent refusal reads as a broken tap. */
.jl-paciencia.jl-pac-nope .jl-pac-board { animation: jl-pac-shake .22s ease-in-out; }
@keyframes jl-pac-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .jl-paciencia.jl-pac-nope .jl-pac-board { animation: none; }
}

@media (max-height: 460px) {
  .jl-pac-hud { padding-bottom: 4px; }
  .jl-pac-top { padding-bottom: 6px; }
}