/* Cards: crisp paper cards on a deep-green harbor felt. Shared by solitaire, Arena tables and practice. */
:root {
  --pc-paper: #fffdf8; --pc-paper-lo: #efe9dc; --pc-red: #c8323c; --pc-black: #1d2430;
  --pc-back: #1f6f78; --pc-back-lo: #12474d; --pc-gold: #e8b64c; --pc-select: #3fd3b4;
  --pc-felt-hi: #1d5b4a; --pc-felt: #0f3a30; --pc-felt-lo: #072019;
  --pc-joker: #7a4fc4; --pc-on-gold: #241a05; --pc-ink: #eef6f1; --pc-ink-soft: #ffffffcc; --pc-slot: #ffffff73;
  --pc-w: 3.6rem;
}
.pc {
  --w: var(--pc-w);
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--w); height: calc(var(--w) * 1.4); min-height: 0; padding: 0;
  border: 1px solid rgb(0 0 0 / .18); border-radius: calc(var(--w) * .1);
  background: linear-gradient(160deg, var(--pc-paper), var(--pc-paper-lo));
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 2px 4px rgb(0 0 0 / .28);
  font: 700 calc(var(--w) * .3) / 1 var(--font); color: var(--pc-black); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), opacity 140ms var(--ease);
}
.pc-sm { --w: calc(var(--pc-w) * .7); }
.pc-lg { --w: calc(var(--pc-w) * 1.25); }
.pc-red { color: var(--pc-red); }
.pc-joker { color: var(--pc-joker); }
.pc-corner { position: absolute; top: 6%; left: 8%; display: grid; justify-items: center; line-height: .95; font-size: calc(var(--w) * .26); }
.pc-corner b { font-weight: 800; }
.pc-corner i { font-style: normal; font-size: .9em; }
.pc-joker .pc-corner { font-size: calc(var(--w) * .17); }
.pc-pip { font-size: calc(var(--w) * .55); transform: translate(8%, 10%); }
.pc-sm .pc-pip { font-size: calc(var(--w) * .42); }
.pc-back {
  background:
    repeating-linear-gradient(45deg, rgb(255 255 255 / .08) 0 4px, transparent 4px 9px),
    linear-gradient(160deg, var(--pc-back), var(--pc-back-lo));
  border: 2px solid var(--pc-paper);
}
button.pc { cursor: pointer; }
button.pc:hover:not(:disabled) { transform: translateY(-3px); }
button.pc:active:not(:disabled) { transform: translateY(-1px) scale(.98); }
button.pc:disabled { cursor: default; }
.pc-selected { transform: translateY(-.6rem); box-shadow: 0 0 0 3px var(--pc-select), 0 6px 12px rgb(0 0 0 / .35); }
button.pc.pc-selected:hover:not(:disabled) { transform: translateY(-.7rem); }
.pc-dim { opacity: .55; filter: saturate(.6); }
.pc:focus-visible { outline: 3px solid var(--pc-select); outline-offset: 2px; }
.pc-felt {
  border-radius: var(--radius); padding: var(--s4);
  background: radial-gradient(120% 90% at 50% 20%, var(--pc-felt-hi), var(--pc-felt) 55%, var(--pc-felt-lo));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), inset 0 10px 30px rgb(0 0 0 / .35);
  color: var(--pc-ink);
}
@media (prefers-reduced-motion: reduce) { .pc { transition: none; } }

/* Peaks solitaire */
.cs-stage { --pc-w: 3.4rem; }
.cs-board { display: grid; gap: var(--s3); padding: var(--s3); width: min(100%, 44rem); margin-inline: auto; }
.cs-tableau {
  position: relative; width: 100%; margin-inline: auto; container-type: inline-size;
  /* Height-bound too: the tableau, stock row and tools must fit above the fold (and the phone tab bar). */
  max-width: min(100%, calc(max(7rem, 100dvh - 32rem - var(--cs-reserve, 0rem)) * var(--board-ratio)));
}
@media (max-width: 700px) { .cs-tableau { max-width: min(100%, calc(max(5.5rem, 100dvh - 28.5rem - var(--cs-reserve, 0rem)) * var(--board-ratio))); } }
/* The Daily's streak track sits between the stats and the felt, so it needs its own room. */
.cs-stage:has(.daily-track) { --cs-reserve: 3rem; }
/* Full screen: the felt spans the display and the tableau takes the height app.js leaves above the stock and tools. */
:root[data-focus] .cs-board { width: 100%; }
:root[data-focus] .cs-tableau { max-width: min(100%, calc(var(--fit-h, 60dvh) * var(--board-ratio))); }
@media (orientation: landscape) and (max-height: 520px) {
  .cs-board { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .cs-tableau { max-width: min(100%, calc(6rem * var(--board-ratio))); }
}
.cs-slot { position: absolute; width: calc(200% / var(--cols)); height: auto; }
.cs-slot .pc { --w: calc(200cqw / var(--cols) - 2px); }
.cs-slot.is-covered .pc { pointer-events: auto; }
.cs-slot.is-shaking .pc { animation: cs-shake 280ms var(--ease); }
.cs-slot.is-hint .pc, .cs-stock.is-hint .pc { box-shadow: 0 0 0 3px var(--pc-gold), 0 0 18px var(--pc-gold); }
.pc.cs-fits { box-shadow: 0 0 0 2px rgb(63 211 180 / .75), 0 2px 4px rgb(0 0 0 / .28); }
.cs-foot { display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.cs-highlight { margin-left: 0; min-height: var(--control); white-space: nowrap; }
.cs-stock { position: relative; padding: 0; border: 0; background: none; min-height: 0; cursor: pointer; }
.cs-stock:disabled { cursor: default; opacity: .6; }
.cs-stock-empty { display: grid; place-items: center; width: var(--pc-w); height: calc(var(--pc-w) * 1.4);
  border: 2px dashed var(--pc-slot); border-radius: calc(var(--pc-w) * .1); font-size: .75rem; color: var(--pc-ink-soft); }
.cs-stock-count { position: absolute; right: -.4rem; bottom: -.4rem; min-width: 1.5rem; padding: .1rem .35rem; border-radius: 999px;
  background: var(--pc-gold); color: var(--pc-on-gold); font: 800 .8rem/1.2 var(--font); }
.cs-pile { min-width: calc(var(--pc-w) * 1.25); min-height: calc(var(--pc-w) * 1.75); display: grid; place-items: center; }
.cs-pile-top { animation: cs-land 180ms var(--ease); }
.cs-streak { display: grid; justify-items: center; color: var(--pc-ink-soft); font-size: .75rem; min-width: 3rem; }
.cs-streak strong { font-size: 1.4rem; color: var(--pc-ink); }
.cs-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.cs-tool {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; padding: 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink);
  font: var(--weight-label) var(--text-sm) / 1 var(--font); cursor: pointer;
}
.cs-tool:disabled { opacity: .45; cursor: default; }
@media (max-width: 420px) {
  .cs-tools { gap: .25rem; }
  .cs-tool, .cs-tools .hint-button { min-height: 2.1rem; padding: 0 .6rem; font-size: var(--text-xs); }
}
@media (max-width: 340px) { .cs-tool, .cs-tools .hint-button { padding: 0 .4rem; gap: .2rem; } }
/* Short screens: a slimmer stock row leaves the tableau room to breathe. */
@media (max-height: 700px) {
  .cs-board { gap: var(--s2); padding: var(--s2); }
  .cs-foot { --pc-w: 2.4rem; }
  .cs-foot .pc-lg { --w: var(--pc-w); }
  .cs-pile { min-height: calc(var(--pc-w) * 1.4); }
}
.cs-stock.is-low .cs-stock-count { background: var(--red); color: var(--on-accent); }
.cs-stuck { display: grid; gap: var(--s2); justify-items: center; text-align: center; margin: 0 auto; max-width: 30rem;
  padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.cs-stuck p { margin: 0; font-size: var(--text-sm); }
.cs-stuck-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.cs-stuck-actions button { display: inline-flex; align-items: center; gap: var(--s2); }
.coach-cards { display: grid; gap: var(--s2); justify-items: center; --pc-w: 3.2rem; }
.coach-cards-row { display: flex; align-items: flex-start; justify-content: center; gap: var(--s2); }
.coach-cards figure { display: grid; justify-items: center; gap: var(--s1); margin: 0; font-size: var(--text-2xs); color: var(--muted); }
.coach-cards figure.is-pile { font-weight: 800; color: var(--ink); }
.coach-cards-arrow { align-self: center; font-size: 1.2rem; opacity: .7; }
.coach-cards-wrap { display: flex; align-items: center; gap: var(--s1); font-size: var(--text-xs); color: var(--muted); margin: 0; --pc-w: 2.4rem; }
@keyframes cs-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes cs-land { from { transform: translateY(-.6rem) scale(1.06); opacity: .4; } }
@media (max-width: 480px) { .cs-stage { --pc-w: 2.8rem; } .cs-board { padding: var(--s2); } }
@media (prefers-reduced-motion: reduce) { .cs-pile-top, .cs-slot.is-shaking .pc { animation: none; } }

/* Hub card: a fanned hand on the felt. */
.hub-art.cs-hub-art { position: relative; display: grid; place-items: center; padding: var(--s4); border-radius: 0; container-type: size; }
.cs-hub-card {
  position: absolute; left: 50%; top: 58%; translate: -50% -50%;
  rotate: calc((var(--k) - 2) * 14deg); transform-origin: 50% 130%;
}
.cs-hub-card .pc { --w: 22cqh; }