/* ── Cards ──────────────────────────────────────────────── */
.card {
  width: var(--card-width); height: calc(var(--card-width) * 1.4);
  perspective: 600px; cursor: pointer; flex-shrink: 0;
}
.card--disabled { cursor: default; opacity: 0.8; }
.card--selected { transform: translateY(-6px); filter: drop-shadow(0 4px 8px var(--accent-blue)); }
.card__inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform var(--flip-duration);
  border-radius: var(--card-radius);
}
.card--flipped .card__inner { transform: rotateY(180deg); }
.card__front, .card__back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: var(--card-radius); display: flex;
  flex-direction: column; align-items: center; justify-content: center;
}
.card__back {
  background: var(--card-back); border: 2px solid var(--card-back-pattern);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--card-back-pattern) 4px, var(--card-back-pattern) 5px);
}
.card__hidden-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-main); font-size: 0.42rem; color: var(--text-gold);
  text-align: center; line-height: 1.4; z-index: 2;
  text-shadow: 0 0 6px rgba(0,0,0,0.8); pointer-events: none;
}
.card__front {
  background: var(--card-face); border: 2px solid var(--card-border);
  transform: rotateY(180deg); padding: 3px;
}
.card__front--red { color: var(--card-red); }
.card__front--black { color: var(--card-black); }
.card__rank { font-size: calc(var(--card-width) * 0.35); font-weight: bold; line-height: 1; }
.card__suit { font-size: calc(var(--card-width) * 0.28); line-height: 1; }
.card__corner { position: absolute; font-size: calc(var(--card-width) * 0.18); line-height: 1.1; text-align: center; }
.card__corner--top { top: 2px; left: 3px; }
.card__corner--bottom { bottom: 2px; right: 3px; transform: rotate(180deg); }

/* ── Hand ─────────────────────────────────────────────────── */
.hand {
  background: var(--panel-bg); border: 2px solid var(--panel-border);
  border-radius: 2px; padding: 8px 10px; box-shadow: 4px 4px 0 #000;
}
.hand__label { font-size: 0.44rem; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.05em; margin-bottom: 6px; }
.hand__cards { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }

/* ── Discard control (appears when a hand card is selected) ── */
.hand__discard {
  display: block; margin: 8px auto 0; padding: 5px 14px;
  font-family: var(--font-main); font-size: 0.5rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: #fff; cursor: pointer;
  background: var(--accent-orange); border: 2px solid #000; border-radius: 2px;
  box-shadow: 2px 2px 0 #000;
}
.hand__discard:hover:not(:disabled) { filter: brightness(1.1); }
.hand__discard:active:not(:disabled) { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.hand__discard:disabled { opacity: 0.5; cursor: default; }

/* ── OT card badge ── */
.card-ot-badge {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  background: var(--accent-orange); color: #fff;
  font-family: var(--font-main); font-size: 0.28rem;
  padding: 1px 4px; border-radius: 2px; font-weight: bold;
  letter-spacing: 0.05em;
}