/* Solitaire: a card table in a quiet club room. Deep teal baize, ivory cards with a serif rank, a navy back with a
   fine diamond lattice. The page around the table takes the baize colour so the cards are the only light thing. */
:root { --page: #173c41; --card: #1f4a50; --ink: #f1ede2; --soft: #b9c9c6; --line: #2f6066; --field: #123236; --act: #f1ede2; --on-act: #173c41; --stop: #ffb4a8;
  --ivory: #fbf8ef; --red: #b3261e; --black: #15171a; --back: #1d2e5a; --wide: 760px; color-scheme: dark; }
.top { justify-content: space-between; align-items: baseline; }
.score { color: var(--soft); font-size: 15px; }
.table { --gap: clamp(4px, 1.4vw, 10px); display: grid; gap: 14px; user-select: none; -webkit-user-select: none; }
.upper, .cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--gap); }
.slot { aspect-ratio: 5 / 7; border-radius: 6px; border: 1.5px dashed rgb(241 237 226 / .28); position: relative; min-height: 0; padding: 0; background: transparent; }
.stock { cursor: pointer; }
.stock.empty::after { content: "↻"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--soft); font-size: clamp(16px, 5vw, 30px); }
.found:empty::after { content: "A"; position: absolute; inset: 0; display: grid; place-items: center; color: rgb(241 237 226 / .3); font: 700 clamp(14px, 4vw, 26px) Georgia, serif; }
.slot > .c { position: absolute; inset: 0; }
.waste .c.fan1 { left: 18%; } .waste .c.fan2 { left: 36%; }
.col { display: grid; align-content: start; min-height: 60vw; max-height: none; }
@media (min-width: 760px) { .col { min-height: 420px; } }
.col > .c + .c { margin-top: calc(-140% + var(--show, 38%)); }
.col > .c.down + .c { --show: 12%; }
.c { aspect-ratio: 5 / 7; width: 100%; border-radius: 6px; background: var(--ivory); color: var(--black); border: 1px solid #c9c1aa; box-shadow: 0 1px 3px rgb(0 0 0 / .45); position: relative;
  padding: 0; min-height: 0; display: block; font-family: Georgia, "Times New Roman", serif; cursor: pointer; }
.c.red { color: var(--red); }
.c .r { position: absolute; left: 7%; top: 3%; font-size: clamp(11px, 3.4vw, 21px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.c .s1 { position: absolute; right: 7%; top: 4%; font-size: clamp(10px, 3vw, 18px); line-height: 1; }
.c .s2 { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); font-size: clamp(18px, 6.5vw, 40px); line-height: 1; }
.c.down { background-color: var(--back); border: 2px solid var(--ivory); cursor: default;
  background-image: repeating-linear-gradient(45deg, rgb(255 255 255 / .12) 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, rgb(255 255 255 / .12) 0 1px, transparent 1px 6px); }
.c.down > * { display: none; }
.c.nope { animation: nope .25s; }
@keyframes nope { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .c.nope { animation: none; outline: 3px solid var(--stop); } }
.c:focus-visible, .stock:focus-visible { outline: 3px solid #f2c94c; outline-offset: 1px; }
.tools { align-items: center; } .tools .chips { margin-left: auto; }
.won { background: var(--ivory); color: var(--black); border: 0; } .won button { justify-self: start; background: var(--back); color: #fff; }
footer a { color: var(--ink); }