/*
 * Joe's Solitaire — Klondike styles (loads after joe-games.css).
 * Cream #FAF3E7, maroon #7B2D26, gold #C98A2D, charcoal #2B2320.
 * Headings: Rokkitt. Body: Nunito Sans. All classes prefixed jsol-.
 *
 * Container-relative sizing throughout (the v1.0.2 rule): the board
 * is width: 100% of the game card (capped at 720px); the 7 columns
 * are 1fr grid tracks with percentage gaps; cards are width: 100% of
 * their column with aspect-ratio 5/7; the vertical overlap of stacked
 * cards uses percentage margins (which resolve against the column
 * width); and card type uses cqw units against the board container.
 * No vw/vh anywhere, so the game stays playable at 320px wide.
 * Shared pieces (.jg-game card, .jg-btn, .joe-nickname-bar,
 * .jg-lb-title) come from joe-games.css.
 */

/* ---------- HUD: moves / time / games won ---------- */

.jsol-hud {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 6px;
  width: 100%;
  max-width: 520px;
}

.jsol-stat {
  flex: 1;
  min-width: 0;
  text-align: center;
  background: #FFF9EF;
  border: 1px solid #e0d0ab;
  border-radius: 10px;
  padding: 8px 4px;
  font-size: 0.75rem;
  color: #5c5148;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.jsol-stat strong {
  display: block;
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.3rem;
  color: #7B2D26;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- message line ---------- */

.jsol-message {
  min-height: 1.4em;
  text-align: center;
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #7B2D26;
  margin: 2px 0 8px;
}

/* ---------- board layout ---------- */

.jsol-board {
  container-type: inline-size;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: #476b4a;
  background: linear-gradient(160deg, #52784f, #3f6042);
  border: 2px solid #7B2D26;
  border-radius: 14px;
  padding: 2.2%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.jsol-toprow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.8%;
  margin-bottom: 3.5%;
}

/* The foundations wrapper dissolves so its four slots land in grid
 * columns 4-7, directly above tableau columns 4-7. */
.jsol-foundations { display: contents; }

.jsol-topspacer { aspect-ratio: 5 / 7; }

.jsol-tableau {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.8%;
  align-items: start;
}

/* ---------- slots ---------- */

.jsol-slot {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  background: rgba(250, 243, 231, 0.10);
  box-shadow: inset 0 0 0 2px rgba(250, 243, 231, 0.28);
}

.jsol-col {
  position: relative;
  min-height: 40px;
}

/* Empty-column outline behind the cards. */
.jsol-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 5 / 7;
  border-radius: 8px;
  background: rgba(250, 243, 231, 0.10);
  box-shadow: inset 0 0 0 2px rgba(250, 243, 231, 0.28);
}

.jsol-fghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5.2cqw;
  color: rgba(43, 35, 32, 0.35);
}

.jsol-fghost.jsol-red { color: rgba(154, 59, 38, 0.40); }

.jsol-recycle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6cqw;
  font-weight: 700;
  color: rgba(250, 243, 231, 0.75);
  cursor: pointer;
}

/* Stock count badge. */
.jsol-stock::after {
  content: attr(data-count);
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 1.5em;
  padding: 1px 4px;
  border-radius: 999px;
  background: #C98A2D;
  color: #2B2320;
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}

.jsol-stock:not([data-count])::after { display: none; }

/* ---------- cards ---------- */

.jsol-card {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 7;
  border-radius: 7px;
  background: #FFFDF8;
  border: 1px solid #b9a888;
  box-shadow: 0 1px 2px rgba(43, 35, 32, 0.35);
  cursor: pointer;
  font-family: Nunito Sans, Verdana, sans-serif;
  z-index: 1;
}

/* Stacking overlap: the percentage margin resolves against the
 * column width, so strips scale with the board. A card sitting on a
 * face-down card leaves a thin strip of the back showing; a card on
 * a face-up card leaves room for its rank corner. */
.jsol-card.jsol-tight { margin-top: -118%; }
.jsol-card.jsol-loose { margin-top: -88%; }

.jsol-corner {
  position: absolute;
  top: 4%;
  left: 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.02;
  font-weight: 800;
}

.jsol-rank { font-size: 15px; font-size: 3.9cqw; }
.jsol-suit { font-size: 13px; font-size: 3.3cqw; }

.jsol-pip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-size: 6.6cqw;
  opacity: 0.9;
}

.jsol-red { color: #9A3B26; }
.jsol-black { color: #2B2320; }

/* Face-down: maroon back with a subtle woven pattern and inner frame. */
.jsol-card.jsol-down {
  background:
    repeating-linear-gradient(45deg, rgba(201, 138, 45, 0.20) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(-45deg, rgba(201, 138, 45, 0.20) 0 4px, transparent 4px 8px),
    #7B2D26;
  border-color: #5d2019;
  box-shadow: inset 0 0 0 3px #7B2D26, inset 0 0 0 5px rgba(250, 243, 231, 0.55),
    0 1px 2px rgba(43, 35, 32, 0.35);
  cursor: default;
}

.jsol-stock .jsol-card.jsol-down,
.jsol-waste .jsol-card { cursor: pointer; }

/* A gentle stack shadow so the waste reads as a pile. */
.jsol-waste .jsol-card {
  box-shadow: 2px 2px 0 rgba(250, 243, 231, 0.35), 4px 4px 0 rgba(43, 35, 32, 0.18),
    0 1px 2px rgba(43, 35, 32, 0.35);
}

.jsol-card.jsol-selected {
  outline: 3px solid #C98A2D;
  outline-offset: 1px;
  box-shadow: 0 4px 10px rgba(43, 35, 32, 0.45);
  z-index: 3;
}

@keyframes jsol-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 138, 45, 0.0), 0 1px 2px rgba(43, 35, 32, 0.35); }
  50% { box-shadow: 0 0 0 4px rgba(201, 138, 45, 0.55), 0 1px 2px rgba(43, 35, 32, 0.35); }
}

.jsol-card.jsol-hint,
.jsol-stock.jsol-hint {
  animation: jsol-pulse 0.7s ease-in-out 3;
}

@keyframes jsol-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.jsol-card.jsol-shake { animation: jsol-shake 0.16s ease-in-out 2; }

/* ---------- controls ---------- */

.jsol-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 12px auto 0;
  width: 100%;
  max-width: 720px;
}

.jsol-controls .jg-btn { min-height: 44px; }

/* ---------- end panel ---------- */

.jsol-end {
  margin: 12px auto 0;
  width: 100%;
  max-width: 520px;
  text-align: center;
  background: #FFF9EF;
  border: 1px solid #e0d0ab;
  border-radius: 12px;
  padding: 16px;
}

.jsol-end[hidden] { display: none; }

.jsol-end-title {
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #7B2D26;
  margin: 0 0 6px;
}

.jsol-joe-line {
  font-family: Rokkitt, Georgia, serif;
  font-size: 1.12rem;
  color: #2B2320;
  margin: 0 0 8px;
}

.jsol-final {
  font-weight: 700;
  color: #5c5148;
  margin: 0 0 12px;
}

/* ---------- small screens ---------- */

@media (max-width: 400px) {
  .jsol-stat strong { font-size: 1.1rem; }
  .jsol-message { font-size: 0.98rem; }
  .jsol-controls .jg-btn { min-height: 48px; }
}