/* ── Solitaire (docs/49_GAMES.md) ────────────────────────────────────
   Loaded from src/pages/games/solitaire.astro. The cards are our own CSS:
   a face is a rounded button with the rank and suit character, a back is a
   crossed pattern in the brand navy. */
.gsol {
  --cw: clamp(40px, calc((min(100vw, 760px) - 3rem) / 7 - 6px), 92px);
  --ch: calc(var(--cw) * 1.4);
  --fan-y: calc(var(--ch) * .24);
  --felt: var(--ice-palette-forest-700);
  --face: #fff;
  --red: var(--ice-palette-crimson-600);
  --black: var(--ice-palette-ink-900);
  --back: var(--ice-palette-navy-800);
  --back-line: var(--ice-palette-navy-700);
  --slot-line: rgba(255, 255, 255, .45);
}
[data-theme='dark'] .gsol {
  --felt: var(--ice-palette-graphite-850);
  --face: var(--ice-palette-graphite-100);
  --red: var(--ice-palette-crimson-700);
  --black: var(--ice-palette-graphite-950);
  --back: var(--ice-palette-navy-700);
  --back-line: var(--ice-palette-navy-900);
}
.gsol__auto[hidden] { display: none; }
.gsol__table { padding: .6rem; border-radius: 10px; background: var(--felt); user-select: none; -webkit-user-select: none; max-width: 760px; margin-inline: auto; }
.gsol__top, .gsol__tableau { display: grid; grid-template-columns: repeat(7, var(--cw)); gap: 6px; justify-content: center; }
.gsol__top { margin-bottom: .6rem; }
.gsol__pile, .gsol__col { position: relative; width: var(--cw); height: var(--ch); }
.gsol__col { height: calc(var(--ch) + var(--fan-y) * var(--depth, 0)); min-height: calc(var(--ch) * 2.2); }
.gsol__slot, .gsol__card {
  position: absolute; left: 0; top: 0;
  width: var(--cw); height: var(--ch);
  padding: 0; border-radius: calc(var(--cw) * .1);
  font: 700 calc(var(--cw) * .3)/1 var(--ice-font-primary, sans-serif);
  touch-action: none;
  cursor: pointer;
}
.gsol__slot { border: 2px dashed var(--slot-line); background: transparent; color: var(--slot-line); }
.gsol__stock.has-cards { border: 1px solid var(--back-line); background: repeating-linear-gradient(45deg, var(--back) 0 6px, var(--back-line) 6px 8px); }
.gsol__card { border: 1px solid rgba(0, 0, 0, .35); background: var(--face); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); text-align: left; }
.gsol__col .gsol__card { top: calc(var(--fan-y) * var(--y, 0)); }
.gsol__waste .gsol__card { left: calc(var(--cw) * .22 * var(--fan, 0)); }
.gsol__waste { width: calc(var(--cw) * 1.44); }
.gsol__card.is-red { color: var(--red); }
.gsol__card.is-black { color: var(--black); }
.gsol__card.is-down { background: repeating-linear-gradient(45deg, var(--back) 0 6px, var(--back-line) 6px 8px); cursor: default; }
.gsol__card:disabled { cursor: default; }
.gsol__corner { position: absolute; top: .18em; left: .2em; display: grid; justify-items: center; line-height: .95; }
.gsol__corner i { font-style: normal; font-size: .85em; }
.gsol__pip { position: absolute; right: .15em; bottom: .05em; font-size: 1.6em; line-height: 1; }
.gsol__card.is-picked { outline: 3px solid var(--ice-palette-terracotta-300); outline-offset: -1px; }
.gsol__card:focus-visible, .gsol__slot:focus-visible { outline: 3px solid var(--ice-palette-terracotta-300); outline-offset: 1px; z-index: 5; }
.gsol__card.is-dragging { z-index: 50; box-shadow: 0 8px 18px rgba(0, 0, 0, .35); }
@media (max-width: 480px) {
  .gsol__table { padding: .4rem .25rem; }
  .gsol__top, .gsol__tableau { gap: 4px; }
  .gsol { --cw: calc((100vw - 3.2rem) / 7 - 4px); }
  .gsol__waste { width: var(--cw); }
  .gsol__waste .gsol__card { left: calc(var(--cw) * .14 * var(--fan, 0)); }
}