/*
 * Korttipelien yhteinen pöytä (kortit/kortit.js): huopa, kortit, tyhjät paikat, vihje ja nosto. Vain .hdp-kortit-
 * luokat. Mitat (--cw, --ch, --cr) ja kuvat (--hdp-felt, --hdp-back, --face) asettaa kortit.js, koska polut tulevat
 * palvelimen asetuksista. Pelin omat tarkennukset game.css:ssä (.hdpeli[data-game="x"] .hdp-kortit-…).
 */
.hdp-kortit-board {
  position: relative; height: 560px; border-radius: 14px; overflow: hidden; touch-action: pan-y;
  background: #1e5c3d var(--hdp-felt) 0 0 / 420px repeat;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 20px 60px rgba(0, 0, 0, .18);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.hdp-kortit-slot {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: var(--cr);
  border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(0, 0, 0, .14); display: grid; place-items: center;
  color: rgba(255, 255, 255, .28); font: 700 calc(var(--cw) * .32)/1 "Montserrat", "Segoe UI", system-ui, sans-serif;
}
.hdp-kortit-slot[data-label]::after { content: attr(data-label); }
.hdp-kortit-slot.is-stock { cursor: pointer; }
/* Pakan kääntö: tyhjä pakka, jonka poistopinossa on kortteja. */
.hdp-kortit-slot.is-recycle::after {
  content: ""; width: 42%; aspect-ratio: 1; border: 3px solid rgba(255, 255, 255, .55); border-radius: 50%;
  border-top-color: transparent; transform: rotate(35deg);
}
.hdp-kortit-slot.is-hint { border-color: #f4ba6c; box-shadow: 0 0 0 3px #f4ba6c; }
.hdp-kortit-card {
  position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: var(--cr);
  background: #fff var(--face) center / 100% 100% no-repeat; touch-action: none; will-change: transform;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .35); transform-origin: 50% 50%;
}
.hdp-kortit-card.is-down { background: #8f1d1f var(--hdp-back) center / 100% 100% no-repeat; }
.hdp-kortit-card.is-movable { cursor: pointer; }
.hdp-kortit-card.is-lifted { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 12px 24px rgba(0, 0, 0, .35); }
.hdp-kortit-card.is-hint { box-shadow: 0 0 0 3px #f4ba6c, 0 6px 18px rgba(0, 0, 0, .35); }
@media (max-width: 559px) {
  /* Puhelimessa pöytä ulottuu reunasta reunaan, jotta kortit ovat mahdollisimman isoja. */
  .hdp-kortit-board { border-radius: 0; }
}