/*
 * 30 Second Genius — Solitaire board that fits a 320 px phone (stage 3a).
 * Plain CSS loaded after dist/styles.css, so these rules win over the prebuilt ones.
 * Sizes follow the board width (cqw = 1% of the board), so seven columns always fit.
 */

.winnable-text {
  margin-top: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
}

.solitaire-board {
  min-width: 0;
  max-width: 54rem;
  margin: 0 auto;
  container-type: inline-size;
  /* Quick taps never zoom the page on iPhone. */
  touch-action: manipulation;
}

/* The board always fits now, so nothing needs to scroll sideways or clip the "You won!" banner. */
.solitaire-shell {
  overflow: visible;
}

/* Once every card is on the suit piles the columns are empty and short: keep room for the banner. */
.solitaire-shell:has(.winner-banner:not([hidden])) {
  min-height: 16rem;
}

.top-row,
.tableau-row {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: clamp(3px, 1.4cqw, 12px);
}

.tableau-row {
  margin-top: clamp(10px, 2.5cqw, 18px);
}

.card-slot,
.playing-card {
  /* A double tap sends a card to its pile (5a), never zooms the page on iPhone. */
  touch-action: manipulation;
  min-height: 0;
  aspect-ratio: 5 / 7;
  border-radius: clamp(4px, 1.1cqw, 10px);
}

.card-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.playing-card {
  overflow: hidden;
  border-width: clamp(1px, 0.25cqw, 2px);
  padding: clamp(2px, 0.8cqw, 8px);
  /* P8 (7c #4): 18 px from a 340 px board (a 375 px phone), never under 16 px (a 320 px phone). */
  font-size: clamp(16px, 5.3cqw, 24px);
  -webkit-tap-highlight-color: transparent;
}

/* Rank on top, suit right under it: the part that stays visible when cards overlap. */
.card-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1;
}

.card-rank {
  letter-spacing: -0.06em;
}

.card-suit-large {
  position: absolute;
  right: clamp(2px, 0.8cqw, 8px);
  bottom: clamp(2px, 0.8cqw, 8px);
  font-size: clamp(15px, 6.5cqw, 40px);
  line-height: 1;
}

.foundation-label {
  min-height: 0;
  font-size: clamp(16px, 6cqw, 36px);
}

/*
 * Columns: JS gives each card how many face-down (--down) and face-up (--up) cards lie above it.
 * Face-up cards stay 48 px apart (P8 on a phone, P11 on a computer), so every one of them is a tap target that high.
 */
.tableau-column {
  --down-gap: clamp(8px, 2.4cqw, 20px);
  --up-gap: 48px;
  min-height: 0;
  /* Room for the last card: its offset on top, plus one card height (140% of the width) below. */
  padding-top: calc(var(--down, 0) * var(--down-gap) + var(--up, 0) * var(--up-gap));
  padding-bottom: 140%;
}

.tableau-column.empty {
  padding: 0;
}

.tableau-card {
  top: calc(var(--down, 0) * var(--down-gap) + var(--up, 0) * var(--up-gap));
}

.tableau-card.face-down,
.tableau-card.face-down + .tableau-card.face-down {
  min-height: 0;
}

/* Selected card: a thick yellow frame with a dark edge, so it shows on white cards and on the dark board. */
.playing-card.selected {
  z-index: 1;
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
  box-shadow: 0 0 0 6px var(--color-text);
}

/*
 * Hint (P7): the card to move, where it goes, or the stack to draw from, with a
 * 4 px dark-green ring (the status line says it in words too). A 2 px light-green
 * gap keeps it off the card's edge, and a 2 px light-green rim keeps it off the
 * dark board (dark green on the board alone is only 2.1:1; on light green 7.2:1).
 * It blinks twice (about 1.2 s), then stays until the next move.
 */
.playing-card.hinted,
.card-slot.hinted,
.playing-card.hint-target,
.card-slot.hint-target {
  --hint-ring: 0 0 0 2px var(--color-ok-bg), 0 0 0 6px var(--color-ok), 0 0 0 8px var(--color-ok-bg);
  box-shadow: var(--hint-ring);
  animation: sol-hint-blink 0.6s ease-in-out 2;
}

/* The place it goes: a light-green field too. */
.playing-card.hint-target,
.card-slot.hint-target {
  border-color: var(--color-ok);
  background-color: var(--color-ok-bg);
}

.card-slot.hint-target .foundation-label {
  color: var(--color-ok);
}

/* The ring is never hidden under the next column or the next card in the top row. */
.top-row > .hinted,
.top-row > .hint-target {
  position: relative;
  z-index: 1;
}

.tableau-column:has(.hinted, .hint-target) {
  z-index: 1;
}

@keyframes sol-hint-blink {
  0%, 100% { box-shadow: var(--hint-ring); }
  50% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .playing-card.hinted,
  .card-slot.hinted,
  .playing-card.hint-target,
  .card-slot.hint-target {
    animation: none;
  }
}

/*
 * Phones: the board goes from edge to edge, so the cards get the width.
 * P8 (7c #4): 8 px at the screen edges and 3 px between the columns give a face-up card
 * at least 48 px wide at 375 px (about 40 px at 320 px, where 7 × 48 px cannot fit).
 */
@media (max-width: 639px) {
  .solitaire-main {
    /* P14 (1) / P15 (3): the same room over the card as the other games. */
    padding: 0.75rem 0 1.5rem;
  }

  .solitaire-card {
    padding: 1rem 0;
    border-left-width: 0;
    border-right-width: 0;
    border-radius: 0;
  }

  .solitaire-card header,
  .solitaire-card > section,
  .solitaire-card > details,
  .solitaire-card > p,
  .solitaire-card > div:not(.solitaire-shell) {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  /* 8 px: room for the whole hint ring around the cards at the edge (P7). */
  .solitaire-shell {
    padding: 8px;
    border-radius: 0;
  }

  .top-row,
  .tableau-row {
    gap: 3px;
  }
}


/*
 * 4d: palette A2 instead of the colors in the prebuilt file (src/input.css):
 * dark ink board, white cards, red suits in the app's red, card backs in deep
 * red with a light pattern, the yellow marker for "selected" and the banner.
 */
.solitaire-shell {
  background-color: var(--color-text);
}

.card-slot {
  border-color: color-mix(in srgb, var(--color-card) 40%, transparent);
  background: color-mix(in srgb, var(--color-card) 8%, transparent);
}

.playing-card {
  border-color: var(--color-rule);
  background-color: var(--color-card);
  color: var(--color-text);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--color-text) 22%, transparent);
}

.playing-card.red-card {
  color: var(--color-primary);
}

.playing-card.face-down {
  --stripe: color-mix(in srgb, var(--color-card) 18%, transparent);
  border-color: var(--color-deep);
  background-color: var(--color-deep);
  background-image:
    linear-gradient(45deg, var(--stripe) 25%, transparent 25%, transparent 75%, var(--stripe) 75%),
    linear-gradient(45deg, var(--stripe) 25%, transparent 25%, transparent 75%, var(--stripe) 75%);
}

.foundation-label {
  color: color-mix(in srgb, var(--color-card) 65%, transparent);
}

.card-slot:focus-visible,
.playing-card:focus-visible {
  outline-color: var(--color-highlight);
}

.winner-banner {
  border-color: var(--color-highlight);
  background: color-mix(in srgb, var(--color-text) 95%, transparent);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--color-text) 40%, transparent);
}

/* P14 (4): on a phone "Move to the piles" (and "Finish for me") under the board, in the middle. */
.sol-board-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.sol-board-actions:empty {
  display: none;
}

/* P14 (2): "How to play ▸" — the rules as a calm list under the link. */
.solitaire-card .tsg-howto ul {
  margin-top: 0.25rem;
  padding-left: 1.25rem;
  list-style: disc;
  font-size: 1.125rem;
  line-height: 1.6;
}

.solitaire-card .tsg-howto li + li {
  margin-top: 0.25rem;
}