.table {
  width: min(560px, 100%);
  container-type: inline-size;
  touch-action: none;
}

.toprow, .tableau {
  display: grid;
  gap: 4px;
  align-items: start;
}

.toprow, .tableau { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tableau { margin-top: 12px; }

.slot, .col { border-radius: 12%; position: relative; min-width: 0; }
.slot { aspect-ratio: 5 / 7; }
.slot:empty, .col:empty, .slot:has(.ghost) {
  box-shadow: inset 0 0 0 2px rgba(240, 193, 74, .38);
  background: rgba(0, 0, 0, .16);
}
.col:empty { aspect-ratio: 5 / 7; }

.pcard {
  appearance: none;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 7;
  padding: 0;
  border: 0;
  border-radius: 12%;
  position: relative;
  background: linear-gradient(180deg, #fffaf4, #f3e4d2);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
  color: #1b140f;
  cursor: pointer;
}

.col .pcard + .pcard { margin-top: -88%; }
.pcard.red { color: #d0123c; }
.pcard.down {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .4), transparent 34%),
    repeating-linear-gradient(135deg, #e23d8c 0 8px, #b41d68 8px 16px);
  box-shadow: inset 0 0 0 3px rgba(255, 224, 138, .75), 0 2px 0 rgba(0, 0, 0, .25);
  cursor: pointer;
}
.pcard.recycle {
  background: transparent;
  color: #ffe08a;
  font-family: Fredoka, sans-serif;
  font-size: clamp(18px, 5cqi, 32px);
  box-shadow: inset 0 0 0 2px rgba(240, 193, 74, .5);
}
.pcard.picked { outline: 3px solid #ffe08a; outline-offset: -3px; }
.pcard .corner {
  position: absolute;
  top: 4%;
  left: 8%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: .9;
  font-family: Fredoka, sans-serif;
  font-size: clamp(11px, 3cqi, 18px);
}
.pcard .corner i, .pcard em { font-style: normal; }
.pcard em {
  position: absolute;
  right: 10%;
  bottom: 8%;
  font-size: clamp(16px, 4.6cqi, 28px);
}
.ghost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(18px, 5cqi, 32px);
  opacity: .35;
  pointer-events: none;
}
.ghost.red { color: #ff8ab0; }
.ghost.black { color: #d9d0c6; }

.floater {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .35));
}
.floater .pcard { width: 100%; aspect-ratio: 5 / 7; height: auto; }
.floater .pcard + .pcard { margin-top: -88%; }
.floater .corner { font-size: 14px; }
.floater em { font-size: 22px; }