/* PKcard — the cards themselves; shared by the player screen and the stream bar. */
:root {
  --pkc-pink: #ff3d8b; --pkc-cyan: #21d4e8; --pkc-lime: #9be53b; --pkc-amber: #ffb627;
}
.pkc-card {
  --w: 58px;
  width: var(--w); height: calc(var(--w) * 1.48); border-radius: calc(var(--w) * .16);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  position: relative; font-weight: 900; font-size: calc(var(--w) * .44); color: #fff;
  box-shadow: 0 3px 10px #0008; user-select: none; -webkit-user-select: none;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1;
}
.pkc-card::before {
  content: ""; position: absolute; inset: calc(var(--w) * .08);
  border-radius: calc(var(--w) * .1); border: 2px solid #ffffff60;
}
.pkc-card span { position: relative; }
.pkc-pink { background: var(--pkc-pink); }
.pkc-cyan { background: var(--pkc-cyan); color: #062a2e; }
.pkc-lime { background: var(--pkc-lime); color: #203006; }
.pkc-amber { background: var(--pkc-amber); color: #3a2400; }
.pkc-wild { background: conic-gradient(var(--pkc-pink) 0 25%, var(--pkc-cyan) 0 50%, var(--pkc-lime) 0 75%, var(--pkc-amber) 0); text-shadow: 0 1px 3px #000a; }
.pkc-wild[style*="--pkc-ring"] { box-shadow: 0 0 0 4px var(--pkc-ring), 0 3px 10px #0008; }
.pkc-bounce { background: linear-gradient(135deg, #7b5cff, #ff3d8b); }
.pkc-back { background: repeating-linear-gradient(45deg, #2a1f3c 0 7px, #34284b 7px 14px); color: var(--pkc-pink); font-size: calc(var(--w) * .3); }
.pkc-sm { --w: 26px; } .pkc-sm::before { border-width: 1px; }
.pkc-md { --w: 44px; }
.pkc-lg { --w: 84px; }
.pkc-xl { --w: 120px; }
.pkc-playable { cursor: pointer; }
.pkc-bonus { background: linear-gradient(150deg, #ffb627, #ff3d8b 70%); flex-direction: column; gap: 2px; cursor: pointer; }
.pkc-bonus small { position: relative; font-size: calc(var(--w) * .15); font-weight: 800; text-align: center; line-height: 1.05; padding: 0 3px; }