/* /solitaire/ — Klondike table. Page frame, mode tabs and panels come from
   games.css; the card faces are game art and keep their own paper colours,
   the table chrome reads tokens. Shared by all locales. */

.solitaire-stage {
  --sol-paper: #fffaf2;
  --sol-edge: rgba(42, 30, 64, 0.2);
  --sol-ink: #27223a;
  --sol-red: #d0335f;
  --sol-gold: #c79a45;
  --sol-back-a: color-mix(in oklab, var(--accent) 78%, #3b1d5e);
  --sol-back-b: color-mix(in oklab, var(--violet, #8b5cf6) 70%, #120a26);
  --sol-felt: color-mix(in oklab, var(--accent) 9%, #10101a);
  position: relative;
  inline-size: 100%;
  margin-inline: auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.sol-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

/* ── HUD ─────────────────────────────────────────────────────────────── */
.sol-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2) var(--space-2);
}
.sol-stats { display: flex; gap: clamp(12px, 3vw, 32px); min-inline-size: 0; }
.sol-stat { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.sol-stat > span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
:lang(ar) .sol-stat > span, :lang(hi) .sol-stat > span, :lang(ja) .sol-stat > span, :lang(zh) .sol-stat > span { letter-spacing: 0; font-size: 0.75rem; }
.sol-stat > b {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sol-stat:first-child > b { color: var(--accent); }
.sol-tools { display: flex; gap: var(--space-2); flex: none; }
.sol-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--tap, 44px);
  min-inline-size: var(--tap, 44px);
  padding-inline: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font: 600 var(--step--1) / 1 var(--font-body);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.sol-tool:hover:not(:disabled) { background: var(--surface-3); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.sol-tool:active:not(:disabled) { transform: translateY(1px); }
.sol-tool:disabled { opacity: 0.42; cursor: default; }
.sol-tool > i { color: var(--accent); }
.sol-tool > em {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-end: -7px;
  display: grid;
  place-items: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink, #120a1a);
  font: 700 0.72rem / 1 var(--font-body);
  font-style: normal;
}
.sol-tool > em[hidden] { display: none; }
@media (max-width: 640px) {
  .sol-tool__label { display: none; }
  .sol-tool { padding-inline: 0; }
}

/* ── Table (felt) and board ──────────────────────────────────────────── */
.sol-table {
  position: relative;
  padding: clamp(3px, 1.2vw, 16px);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 62%),
    radial-gradient(100% 100% at 50% 100%, rgba(0, 0, 0, 0.35), transparent 70%),
    var(--sol-felt);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 20px 60px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  isolation: isolate;
}
.sol-board {
  position: relative;
  inline-size: 100%;
  block-size: 480px;
  --cw: 60px;
  --ch: 84px;
}
.sol-slot {
  position: absolute;
  inset-block-start: 0;
  left: 0;
  inline-size: var(--cw);
  block-size: var(--ch);
  border-radius: calc(var(--cw) * 0.09);
  z-index: 0;
  touch-action: pan-y;
}
.sol-slot--stock, .sol-slot--found {
  border: 1.5px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.025);
  display: grid;
  place-items: center;
}
.sol-slot--stock { cursor: pointer; color: rgba(255, 255, 255, 0.45); font-size: calc(var(--ch) * 0.3); }
.sol-slot--stock.spent { color: color-mix(in srgb, var(--coral, #ff7a66) 80%, transparent); border-color: color-mix(in srgb, var(--coral, #ff7a66) 40%, transparent); }
.sol-slot--found > span {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: calc(var(--ch) * 0.36);
  color: rgba(255, 255, 255, 0.13);
}
.sol-slot--col::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: var(--ch);
  border: 1.5px dashed rgba(255, 255, 255, 0.11);
  border-radius: inherit;
  pointer-events: none;
}
.sol-slot.ok { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 35%, transparent); animation: sol-pulse 1.1s var(--ease) infinite; }
.sol-slot--col.ok { box-shadow: none; animation: none; }
.sol-slot--col.ok::before { border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); animation: sol-pulse 1.1s var(--ease) infinite; }
@keyframes sol-pulse { 50% { opacity: 0.55; } }
.sol-count {
  position: absolute;
  inset-block-start: 0;
  left: 0;
  z-index: 400;
  min-inline-size: 22px;
  padding: 2px 6px;
  border: 2px solid var(--sol-felt);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink, #120a1a);
  font: 700 0.7rem / 1.1 var(--font-body);
  text-align: center;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.sol-count[hidden] { display: none; }
.nudge { animation: sol-nudge 0.32s var(--ease); }
@keyframes sol-nudge { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }

/* ── Cards ───────────────────────────────────────────────────────────── */
.sol-card {
  position: absolute;
  top: 0;
  left: 0;
  inline-size: var(--cw);
  block-size: var(--ch);
  perspective: 700px;
  cursor: grab;
  touch-action: none;
  transition: transform 270ms cubic-bezier(0.2, 0.75, 0.25, 1), top 140ms var(--ease);
  will-change: transform;
}
.sol-card.down { cursor: pointer; }
.sol-flip {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.3, 0.7, 0.3, 1);
}
.sol-card.down .sol-flip { transform: rotateY(180deg); }
.sol-face, .sol-back {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--cw) * 0.09);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.22);
  transition: box-shadow 160ms var(--ease);
}
.sol-back { transform: rotateY(180deg); }
.sol-face svg, .sol-back svg { display: block; inline-size: 100%; block-size: 100%; }
.sol-card.picked { top: -6px; }
.sol-card.picked .sol-face { box-shadow: 0 0 0 2px var(--accent), 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 18px rgba(0, 0, 0, 0.45); }
.sol-card.dragging { transition: none; cursor: grabbing; }
.sol-card.dragging .sol-face { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.sol-card.land .sol-face { animation: sol-land 520ms var(--ease); }
@keyframes sol-land {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 90%, transparent), 0 1px 2px rgba(0, 0, 0, 0.5); }
  100% { box-shadow: 0 0 0 12px transparent, 0 1px 2px rgba(0, 0, 0, 0.5); }
}
.sol-board.instant .sol-card, .sol-board.instant .sol-flip { transition: none !important; }

/* ── Auto-complete, toast, cascade, overlay ─────────────────────────── */
.sol-auto {
  position: absolute;
  inset-block-end: clamp(10px, 2vw, 20px);
  inset-inline-start: 50%;
  z-index: 1500;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap, 44px);
  padding-inline: var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink, #120a1a);
  font: 700 var(--step-0) / 1 var(--font-body);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent);
  white-space: nowrap;
  cursor: pointer;
  animation: sol-rise 360ms var(--ease) both;
}
[dir="rtl"] .sol-auto { translate: 50% 0; }
.sol-auto[hidden] { display: none; }
@keyframes sol-rise { from { opacity: 0; transform: translateY(12px); } }
.sol-toast {
  position: absolute;
  inset-block-start: 38%;
  inset-inline: 0;
  z-index: 1600;
  margin-inline: auto;
  inline-size: fit-content;
  max-inline-size: 90%;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  background: rgba(10, 8, 18, 0.82);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--text);
  font: 600 var(--step-1) / 1.2 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.sol-toast.show { animation: sol-toast 1.6s var(--ease) both; }
@keyframes sol-toast { 0% { opacity: 0; transform: scale(0.85); } 12%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-14px); } }
.sol-cascade { position: absolute; inset: 0; z-index: 1700; inline-size: 100%; block-size: 100%; cursor: pointer; touch-action: none; transition: opacity 400ms var(--ease); }
.sol-cascade[hidden] { display: none; }
.sol-cascade.fade { opacity: 0; }
.sol-overlay {
  position: absolute;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgba(8, 6, 14, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: sol-fade 240ms var(--ease) both;
}
.sol-overlay[hidden] { display: none; }
@keyframes sol-fade { from { opacity: 0; } }
.sol-overlay__box {
  inline-size: min(100%, 420px);
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--surface-2) 92%, transparent);
  box-shadow: var(--shadow-3, 0 20px 50px rgba(0, 0, 0, 0.5));
  text-align: center;
}
.sol-overlay__kicker { margin: 0 0 var(--space-2); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
:lang(ar) .sol-overlay__kicker, :lang(hi) .sol-overlay__kicker { letter-spacing: 0; }
.sol-overlay__title { margin: 0; font-family: var(--font-display); font-size: var(--step-3); font-weight: 600; line-height: 1.05; color: var(--text); }
:lang(zh) .sol-overlay__title, :lang(ja) .sol-overlay__title, :lang(hi) .sol-overlay__title, :lang(ar) .sol-overlay__title { font-family: var(--font-body); font-weight: 700; font-size: var(--step-2); line-height: 1.3; }
.sol-overlay__sub { margin: var(--space-3) 0 var(--space-5); color: var(--text-muted); text-wrap: pretty; }
.sol-overlay__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.sol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--tap, 44px);
  padding-inline: var(--space-5);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text);
  font: 600 var(--step-0) / 1 var(--font-body);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.sol-btn:hover { filter: brightness(1.12); }
.sol-btn:active { transform: translateY(1px); }
.sol-btn--primary { border-color: transparent; background: var(--accent); color: var(--accent-ink, #120a1a); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ── Inside the play layer: the table fills the slot ─────────────────── */
.play-slot .solitaire-card { padding: var(--space-2); }
@media (max-width: 480px) { .play-slot .solitaire-card { padding: 4px; } }
.play-slot .solitaire-stage .sol-hud { padding-block: 0 var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .sol-card, .sol-flip, .sol-face, .sol-tool, .sol-btn, .sol-cascade { transition: none; }
  .sol-slot.ok, .sol-slot--col.ok::before, .sol-card.land .sol-face, .sol-auto, .sol-overlay, .nudge { animation: none; }
  .sol-toast.show { animation: none; opacity: 1; }
}