/* ==========================================================================
   Solitaire — only what's unique to this game.
   Card sizes are set by game.js through --cw (card width).
   ========================================================================== */

.game[data-game="solitaire"] {
  --game-color: var(--cat-classic);
  max-width: 820px;
}
.game[data-game="solitaire"] .game__stage {
  min-height: 420px;
  touch-action: none;
  background:
    radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.07) 1px, transparent 0) 0 0 / 16px 16px,
    #2F7A6F;
}

.sc-board {
  position: relative;
  width: 100%;
  min-height: 420px;
  -webkit-user-select: none;
  user-select: none;
}

/* Empty-pile outlines */
.sc-slot {
  position: absolute;
  left: 0; top: 0;
  width: var(--cw);
  aspect-ratio: 5 / 7;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px dashed rgb(255 255 255 / 0.4);
  border-radius: calc(var(--cw) * 0.1);
  background: rgb(0 0 0 / 0.08);
  color: rgb(255 255 255 / 0.5);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--cw) * 0.32);
}
button.sc-slot { cursor: pointer; }
.sc-slot:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

/* Cards */
.sc-card {
  position: absolute;
  left: 0; top: 0;
  width: var(--cw);
  aspect-ratio: 5 / 7;
  padding: 0;
  border: 2px solid var(--ink-900);
  border-radius: calc(var(--cw) * 0.1);
  background: #FBF7F0;
  color: var(--ink-900);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.25);
  cursor: grab;
  touch-action: none;
  transition: transform 0.18s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.sc-card.is-red { color: #C8432A; }
.sc-card.is-dragging { transition: none; cursor: grabbing; box-shadow: 0 12px 24px rgb(0 0 0 / 0.35); }
.sc-board.is-dealing .sc-card { transition-duration: 0.45s; }
.sc-card:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

.sc-face { position: absolute; inset: 0; display: block; }
.sc-corner {
  position: absolute;
  left: 7%; top: 4%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: calc(var(--cw) * 0.22);
  line-height: 0.95;
  text-align: center;
}
.sc-corner--end { left: auto; top: auto; right: 7%; bottom: 4%; transform: rotate(180deg); }
.sc-pip {
  position: absolute;
  left: 50%; top: 54%;
  translate: -50% -50%;
  font-size: calc(var(--cw) * 0.5);
  line-height: 1;
}

/* Face-down: tomato back with a little clock */
.sc-card.is-down { cursor: default; }
.sc-card.is-down .sc-face {
  border-radius: calc(var(--cw) * 0.08);
  background:
    radial-gradient(circle at 50% 50%, #FBF7F0 0 16%, transparent 17%),
    radial-gradient(circle at 50% 50%, #1B2A41 0 20%, transparent 21%),
    repeating-linear-gradient(45deg, #E8553D 0 6px, #D54A33 6px 12px);
}
.sc-card.is-down .sc-face > * { display: none; }

.sc-card.is-nope { animation: nope 0.3s; }
@keyframes nope { 25% { translate: -5px 0; } 75% { translate: 5px 0; } }
.sc-card.is-bounce .sc-face { animation: card-bounce 0.35s var(--ease-spring); }
@keyframes card-bounce { 40% { transform: scale(1.12); } }
.sc-board.is-won .sc-card { animation: won-hop 0.6s var(--ease-spring); }
@keyframes won-hop { 50% { translate: 0 -12px; } }

/* Small screens: tighter corner text */
@media (max-width: 480px) {
  .sc-corner { font-size: calc(var(--cw) * 0.26); left: 5%; }
  .sc-corner--end { display: none; }
  .sc-pip { top: 60%; font-size: calc(var(--cw) * 0.46); }
}

/* Undo / New deal bar */
.sc-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-top: var(--outline) solid var(--line);
  background: var(--bg-sunken);
}
.sc-bar .btn { min-height: 44px; font-size: 1rem; padding-inline: var(--space-4); }
.sc-bar .btn svg { width: 18px; height: 18px; }
.sc-bar .btn:disabled { opacity: 0.45; pointer-events: none; }