/* The card table shared by Klondike, Spider and FreeCell (frame, header and dialogs come from css/shell.css) */

/* Suit colours. "4 colors" in Settings sets data-suits="four" on <html>: spades black, hearts red, diamonds blue, clubs green. */
:root {
  --suit-0: #17171b;
  --suit-1: #c4161c;
  --suit-2: #c4161c;
  --suit-3: #17171b;
  --card-face: #fffdf8;
  --card-line: #4a3b2a;
  --back-1: #1f4e8c;
  --back-2: #2f6bb5;
  --back: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0 4px, transparent 4px 8px), linear-gradient(145deg, var(--back-1), var(--back-2));
}
html[data-suits="four"] { --suit-2: #1646c8; --suit-3: #12803a; }
html.high-contrast { --suit-1: #b00000; --suit-2: #b00000; --felt: #000; --felt-2: #000; --card-line: #000; --back-1: #000; --back-2: #000;
  --back: repeating-linear-gradient(45deg, #fff 0 3px, #000 3px 9px); }
html.high-contrast[data-suits="four"] { --suit-2: #0033cc; --suit-3: #006b2d; }
.c0 { color: var(--suit-0); }
.c1 { color: var(--suit-1); }
.c2 { color: var(--suit-2); }
.c3 { color: var(--suit-3); }

.board-wrap {
  grid-area: board;
  position: relative;
  min-height: 0;
  margin: 0 12px 12px;
  overflow: hidden;
  border-radius: 20px;
  border: 4px solid var(--board-edge);
  background: radial-gradient(ellipse at 50% 25%, var(--felt), var(--felt-2));
}
html.high-contrast .board-wrap { border-color: #fff; }
.board { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Empty spaces: the deck, the four suit piles and the seven piles */
.slot {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: var(--ch);
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 3px dashed rgba(255, 255, 255, 0.42);
  border-radius: calc(var(--cw) * 0.1);
  background: rgba(0, 0, 0, 0.14);
  color: #fff;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.high-contrast .slot { border-color: #fff; }
.slot .ghost { width: 56%; height: 56%; color: #fff; opacity: 0.4; }

/* Cards */
.card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cw);
  height: var(--ch);
  margin: 0;
  padding: 0;
  font: inherit;
  overflow: hidden;
  background: var(--card-face);
  border: 2px solid var(--card-line);
  border-radius: calc(var(--cw) * 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  touch-action: none;   /* so a finger can drag a card without the page scrolling */
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card svg { display: block; width: 100%; height: 100%; pointer-events: none; }
.card.down {
  background: var(--back);
  box-shadow: inset 0 0 0 3px var(--card-face), inset 0 0 0 5px var(--back-1), 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: default;
}
html.high-contrast .card.down { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px #000, 0 0 0 1px #fff; }
.card.down svg { display: none; }
html.high-contrast .card { border-width: 3px; }
@media (hover: hover) { .card:not(.down):hover { filter: brightness(1.05); } }
.card:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.card.under { box-shadow: none; }

/* "Show where cards can go": the same white dashed ring as a hint's destination, a little softer; the card picked up gets a yellow ring. */
.card.can-go, .slot.can-go { outline: 4px dashed rgba(255, 255, 255, 0.92); outline-offset: 3px; }
.card.can-go { box-shadow: 0 0 14px 3px rgba(255, 255, 255, 0.45); }
.card.picked { outline: 5px solid #ffd400; outline-offset: 1px; box-shadow: 0 0 0 2px #fff, 0 0 16px 4px rgba(255, 212, 0, 0.6); }
html.high-contrast .card.can-go, html.high-contrast .slot.can-go { outline-color: #fff; outline-width: 5px; }
.card.dragging { transition: none; cursor: grabbing; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.5); }
.board.instant .card, .board.instant .slot { transition: none; }

/* Hints sit on dark green felt, so they are bright: a yellow ring on the card to move, a white dashed ring where it goes. */
.card.hint { outline: 5px solid #ffd400; outline-offset: 1px; box-shadow: 0 0 0 2px #fff, 0 0 20px 6px rgba(255, 212, 0, 0.75); animation: hint-pulse 0.9s ease-in-out infinite alternate; }
.slot.hint-to, .card.hint-to { outline: 5px dashed #fff; outline-offset: 3px; }
.card.hint-to { box-shadow: 0 0 16px 4px rgba(255, 255, 255, 0.6); }
.card.shake { animation: shake 0.35s ease; }
@keyframes hint-pulse { from { translate: 0 0; } to { translate: 0 -6px; } }
@keyframes shake {
  0%, 100% { translate: 0 0; }
  25% { translate: -5px 0; }
  75% { translate: 5px 0; }
}

/* Little cards in How to play and on the win screen */
.pic-card, .mini-card {
  position: relative;
  flex: none;
  width: 52px;
  height: 73px;
  background: var(--card-face);
  border: 2px solid var(--card-line);
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.25);
  overflow: visible;
}
.mini-card { width: 58px; height: 81px; }
.pic-card svg, .mini-card svg { display: block; width: 100%; height: 100%; }
.pic-card.pic-back { background: var(--back); box-shadow: inset 0 0 0 2px var(--card-face), inset 0 0 0 3px var(--back-1), 3px 3px 0 rgba(0, 0, 0, 0.25); }

/* Phones */
@media (max-width: 640px) {
  .board-wrap { margin: 0 6px 8px; border-width: 3px; border-radius: 14px; }
}
/* A hint can need two lines on a phone held upright; keep room for both so the board doesn't jump down and up */
@media (max-width: 640px) and (orientation: portrait) and (min-height: 780px) {
  .message { min-height: 3.4em; }
}

/* Not enough height left for a playable board (a small phone with Large or Extra large text, or a phone on its side):
   the page scrolls and the board keeps a proper size, instead of squeezing the cards until they overlap. */
@media (max-width: 640px) and (max-height: 760px) {
  html[data-text="large"] body.game, html[data-text="xl"] body.game { height: auto; min-height: 100dvh; overflow-y: auto; }
  html[data-text="large"] .board-wrap, html[data-text="xl"] .board-wrap { height: 460px; }
}
@media (max-height: 520px) {
  body.game { height: auto; min-height: 100dvh; overflow-y: auto; }
  .board-wrap { height: 440px; }
}