/* ============ Rommé — cards & table ============ */
/* Reuses the Stammtisch wood table (scene.css). Adds playing cards, hand fan,
   stock/discard, meld area and the action bar. */

.kn-romme { display: flex; flex-direction: column; gap: var(--kn-gap); }

/* opponent (Helga) strip */
.kn-romme-opp {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: var(--kn-radius);
  background: linear-gradient(#6c4427, #4a2c19); border: 1px solid #34200f; color: #f6ead8;
  box-shadow: var(--kn-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.08);
}
.kn-romme-opp .kn-voxhead { width: 40px; height: 40px; flex: none; }
.kn-romme-opp[data-mood] .kn-vox-eye { }
.kn-romme-opp-info { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.kn-romme-opp-name { font-family: var(--kn-font-head); font-size: 1.05rem; }
.kn-romme-opp-status { color: #ead2ac; font-size: 0.84rem; min-height: 1.1em; }
.kn-romme-fan-mini { display: flex; }
.kn-romme-fan-mini .kn-card-back { width: 22px; height: 31px; margin-left: -15px; border-radius: 4px; }
.kn-romme-fan-mini .kn-card-back:first-child { margin-left: 0; }

/* the felt centre: stock + discard */
.kn-romme-mid {
  display: flex; align-items: center; justify-content: center; gap: clamp(14px, 5vw, 40px);
  padding: clamp(12px, 3vw, 22px);
  border-radius: var(--kn-radius);
  background: radial-gradient(130% 120% at 50% 20%, #1d8474, #0b4a40);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,0.28), inset 0 8px 26px rgba(0,0,0,0.4);
}
.kn-pile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kn-pile-label { color: #eafff9; font-size: 0.78rem; }
.kn-pile.kn-drawable { cursor: pointer; }
.kn-pile.kn-drawable .kn-card, .kn-pile.kn-drawable .kn-card-back { transition: transform 0.12s ease; }
.kn-pile.kn-drawable:hover .kn-card, .kn-pile.kn-drawable:hover .kn-card-back { transform: translateY(-5px); }
.kn-pile-stack { position: relative; }
.kn-pile-stack .kn-card-back:not(:first-child) { position: absolute; top: -2px; left: 2px; }

/* meld area (laid-down melds, both players) */
.kn-romme-melds { display: flex; flex-wrap: wrap; gap: 10px; min-height: 56px; padding: 8px; }
.kn-meld {
  display: flex; padding: 5px 6px; border-radius: 8px;
  background: rgba(0,0,0,0.06); border: 1px solid var(--kn-border);
}
.kn-meld.kn-meld-mine { background: color-mix(in srgb, var(--kn-accent) 9%, transparent); }
.kn-meld.kn-meld-target { outline: 2px solid var(--kn-gold); cursor: pointer; }
.kn-meld .kn-card { width: clamp(30px, 6vw, 40px); margin-left: -12px; }
.kn-meld .kn-card:first-child { margin-left: 0; }
.kn-meld-empty { color: var(--kn-muted); align-self: center; font-size: 0.85rem; padding: 0 8px; }

/* player hand — light overlap so every card is easy to click on desktop */
.kn-romme-hand { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; padding-top: 6px; min-height: 80px; }
.kn-romme-hand .kn-card { margin-left: -6px; }
.kn-romme-hand .kn-card:first-child { margin-left: 0; }
.kn-romme-hand .kn-card:hover { transform: translateY(-8px); z-index: 6; }
.kn-romme-hand .kn-card.kn-card-sel { transform: translateY(-14px); z-index: 7; }
@media (max-width: 560px) {
  .kn-romme-hand .kn-card { --cw: clamp(34px, 8.5vw, 46px); margin-left: -12px; }
}

/* action bar */
.kn-romme-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.kn-romme-hint { color: var(--kn-muted); font-size: 0.85rem; flex-basis: 100%; text-align: center; min-height: 1.1em; }

/* ---- a playing card ---- */
.kn-card {
  --cw: clamp(40px, 8vw, 52px);
  position: relative; flex: none;
  width: var(--cw); height: calc(var(--cw) * 1.4);
  border-radius: 6px;
  background: linear-gradient(157deg, #fffdf7, #f1ead7);
  border: 1px solid #d6cbb2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.28);
  color: #2a2317; cursor: pointer;
  font-family: var(--kn-font-body);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.kn-card.red { color: #c0473b; }
.kn-card-rank { position: absolute; top: 3px; left: 5px; font-weight: 700; font-size: calc(var(--cw) * 0.3); line-height: 1; }
.kn-card-suit { position: absolute; bottom: 2px; right: 5px; font-size: calc(var(--cw) * 0.32); }
.kn-card-mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * 0.52); }
.kn-card.joker { background: linear-gradient(157deg, #fff, #efe7ff); color: var(--kn-accent-dark); }
.kn-card.joker .kn-card-mid { font-size: calc(var(--cw) * 0.6); }
.kn-card-sel { outline: 2px solid var(--kn-gold); }
.kn-card-hl { outline: 2px solid var(--kn-good); animation: kn-point 0.8s ease-in-out infinite; }

/* card back */
.kn-card-back {
  --cw: clamp(40px, 8vw, 52px);
  width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: 6px; flex: none;
  border: 1px solid #3a2414;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 5px, transparent 5px 10px),
    linear-gradient(150deg, #2b5249, #1c3a33);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}