/* The cards carry z-index 1..52 in the board's own stacking context, so paper thrown over the
   board has to clear all of them or it falls behind the table. */
.sol-board > .jj-confetti { z-index: 60; }
.sol-autohint, .sol-largebox { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; white-space: nowrap; }
.sol-autohint input, .sol-largebox input { margin: 0; accent-color: var(--c-primary); cursor: pointer; }
/* display above outranks the UA [hidden] rule, and sizeBoard() hides this one. */
.sol-largebox[hidden] { display: none; }

/* .sol-fstop renders Full screen twice, in the bar and in the row, and exactly one may show:
   the bar's wherever the bar holds it on its one line, the row's everywhere else. */
.sol .sol-fs-top { display: none; }
/* The bar is centred and the page's how-to link sits in the panel's top-right corner, level
   with it. Measured, the two overlap under 930px of window on the page and under 1230px on a
   split panel, where the link rides in the felt's top band. */
@media (min-width: 930px) {
  .sol.sol-fstop .sol-fs-top { display: inline-flex; }
  .sol.sol-fstop .sol-controls .sol-fs { display: none; }
}
@media (max-width: 1229px) {
  html.fills-split .sol.sol-fstop:not(.sol-full) .sol-fs-top { display: none; }
  html.fills-split .sol.sol-fstop:not(.sol-full) .sol-controls .sol-fs { display: inline-flex; }
}
/* The bar's height is in the board's budget — the felt's top band on a filling panel, the
   rows above the felt elsewhere — so this button takes the dial's height and never adds any. */
.sol .sol-bar .sol-fs-top { align-self: stretch; padding: 0 14px; border-radius: 999px; font-size: .85rem; }

/* Klondike on a phone: only the felt runs edge to edge; the rows under it keep the game
   root's inset. sizeBoard() reads the felt's own padding, so this padding is the card size:
   the seven columns are width-limited here.
   The felt's height is a constant of the small viewport (svh), never innerHeight: browser bars
   sliding away must not move it. 200px is what sits above it at its tallest — header band 107,
   two-row bar 87 — so the whole felt is on screen when the page is parked at the game.
   solitaire.js reads this box as feltBox(), and the columns are fitted to it. */
@media (max-width: 640px) {
  .game-root[data-game="solitaire"] .sol:not(.sol-full) .sol-boardwrap {
    margin-inline: -8px; padding-inline: 2px; border-radius: 0;
    height: max(300px, calc(100vh - 200px));
    height: max(300px, calc(100svh - 200px));
    /* Cards carry z-index 1..52; the message below has to sit above all of them. */
    isolation: isolate;
  }
  /* The message overlays the felt and grows upward from its bottom edge: in the flow it would
     move the buttons under a felt whose height is fixed. Messages run to 170 characters, so
     it wraps rather than truncating. */
  .game-root[data-game="solitaire"] .sol:not(.sol-full) { position: relative; }
  .game-root[data-game="solitaire"] .sol:not(.sol-full) .sol-msg {
    position: absolute; left: 12px; right: 12px; margin: -8px 0 0; min-height: 0; z-index: 2;
    transform: translateY(-100%); padding: 6px 12px; border-radius: 12px; pointer-events: none;
    background: rgba(6, 30, 22, .72); color: #fff;
  }
  .game-root[data-game="solitaire"] .sol:not(.sol-full) .sol-msg:empty { display: none; }
  .game-root[data-game="solitaire"] .sol:not(.sol-full) .sol-controls { margin-top: 18px; }
  /* The default purple ring is 1.03–1.8:1 against the felt; the white ring outside it carries
     the selection. Hint's ring is yellow, so selection stays off yellow to keep them apart. */
  .game-root[data-game="solitaire"] .sol-card.sel:not(.hint) {
    box-shadow: 0 0 0 2px var(--c-primary), 0 0 0 4px #fff, 0 3px 10px rgba(0, 20, 10, .5);
  }
}