/* Puso Solitaire — Two Shores (v111). Adapted from the package
   style block (~/workspace/puso-games/solitaire/src/style.css).
   Every rule here is scoped to solitaire classes, so nothing leaks
   onto other panels. Board fit is the package fit note: the board
   caps at 760px centred, and at 390px a tableau column is about
   48px wide, above the 44px target. On folded-narrow widths below
   about 340px the same arithmetic gives about 32 to 38px a column:
   honestly below the 44px target, above the 24px minimum, with
   card height still meeting 44px and no horizontal overflow.
   That folded-narrow width is carried as owed Website
   verification, never claimed as a live pass, and the board is
   not shrunk below this fit note to hide it. */
.sol-wrap { max-width: 760px; margin: 0 auto; padding: 8px; color: #fdf6e9; }
.sol-wrap h4 { font-size: 17px; margin: 8px 0 4px; }
.sol-small { font-size: 13px; opacity: .9; }
.sol-status { font-weight: 600; color: #e8b84b; }
.sol-msg { font-size: 14px; }
.sol-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.sol-top { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.sol-foundations { display: flex; gap: 8px; flex: 1; }
.sol-pile, .sol-slot { width: 64px; min-height: 88px; border: 2px dashed rgba(232, 184, 75, .55); border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; padding: 4px; background: rgba(255, 255, 255, .06); }
.sol-pile .sol-card { margin: 0; }
.sol-stockwaste { display: flex; gap: 8px; }
.sol-tableau { display: flex; gap: 6px; }
.sol-column { flex: 1; min-width: 0; }
.sol-card { width: 100%; min-height: 78px; background: #fdf6e9; color: #1d2a4a; border: 2px solid #e8b84b; border-radius: 8px; padding: 4px; text-align: left; cursor: pointer; position: relative; transition: transform .15s ease, outline .15s ease; }
.sol-card:focus-visible, .sol-wrap button:focus-visible, .sol-wrap select:focus-visible { outline: 3px solid #e8b84b; outline-offset: 2px; }
.sol-card.sol-red { color: #c2335a; }
.sol-card.sol-black { color: #1d2a4a; }
.sol-card .sol-rank { font-size: 18px; font-weight: 800; line-height: 1; display: block; }
.sol-card .sol-suit { font-size: 20px; line-height: 1; display: block; }
.sol-card .sol-corner { font-size: 11px; opacity: .7; display: block; }
.sol-card.sol-down { background: repeating-linear-gradient(45deg, #3d1f4a, #3d1f4a 8px, #e86a8a 8px, #e86a8a 10px); color: #fff; min-height: 28px; display: flex; align-items: center; justify-content: center; }
.sol-card.sol-selected { outline: 3px solid #e8b84b; transform: translateY(-3px); }
.sol-card.sol-hint { outline: 3px solid #ff8a6b; }
.sol-card.sol-tab { margin-top: -52px; }
.sol-card.sol-tab:first-child { margin-top: 0; }
.sol-card.sol-tab.sol-down { margin-top: -18px; }
.sol-card.sol-tab.sol-down:first-child { margin-top: 0; }
.sol-card:disabled { cursor: default; opacity: .9; }
.sol-empty { min-height: 88px; width: 100%; border: 2px dashed rgba(255, 255, 255, .35); border-radius: 10px; cursor: pointer; background: transparent; color: inherit; font-size: 12px; }
.sol-pile.sol-dest, .sol-empty.sol-dest { box-shadow: inset 0 0 0 3px #e8b84b; }
/* Light theme: capiz day — pale ivory and gold, dark text. */
.sol-wrap.sol-light { color: #1d2a4a; }
.sol-wrap.sol-light .sol-card { border-color: #8a6a1f; }
/* High contrast: black, white, yellow — never colour alone, symbols stay. */
.sol-wrap.sol-contrast { color: #fff; }
.sol-wrap.sol-contrast .sol-card { border: 3px solid #ffff00; background: #fff; color: #000; }
.sol-wrap.sol-contrast .sol-card.sol-red { color: #a30000; }
.sol-wrap.sol-contrast .sol-pile, .sol-wrap.sol-contrast .sol-slot, .sol-wrap.sol-contrast .sol-empty { border-color: #ffff00; }
/* Large cards: taller cards, larger rank and suit. Width stays column-flexed, so it fits the same widths. */
.sol-wrap.sol-large .sol-card { min-height: 104px; }
.sol-wrap.sol-large .sol-card .sol-rank { font-size: 24px; }
.sol-wrap.sol-large .sol-card .sol-suit { font-size: 26px; }
.sol-wrap.sol-large .sol-card.sol-tab { margin-top: -62px; }
/* Reduced motion: no transitions, no transform lifts. */
.sol-wrap.sol-motion *, .sol-wrap.sol-motion .sol-card { transition: none !important; }
.sol-wrap.sol-motion .sol-card.sol-selected { transform: none; }
/* Narrow widths: tighten gaps and type so 7 columns keep fitting.
   Layout math (board padding plus gaps): 390px gives about 48px
   per column; 360px gives about 43px; 320px gives about 38px;
   below about 340px a column is narrower than the 44px
   tap-width target — height still meets 44px, width does not.
   That folded-narrow limit is recorded in the package deep dive
   and integration notes, not hidden. */
@media (max-width: 360px) {
  .sol-wrap { padding: 0 6px 8px; }
  .sol-tableau { gap: 3px; }
  .sol-top { gap: 6px; }
  .sol-card .sol-rank { font-size: 13px; }
  .sol-card .sol-suit { font-size: 14px; }
  .sol-pile, .sol-slot { width: 42px; }
}
@media (max-width: 520px) {
  .sol-card { min-height: 66px; padding: 3px; }
  .sol-card .sol-rank { font-size: 15px; }
  .sol-card .sol-suit { font-size: 16px; }
  .sol-pile, .sol-slot { width: 48px; min-height: 66px; font-size: 11px; }
  .sol-card.sol-tab { margin-top: -44px; }
}