/* Kings Corner — the cross, the player strip and the hand. Shared table chrome
   (seats, banners, buttons, activity rail) lives in the shell's style.css.
   The cards themselves come from the shared deck sprite — see cards.css. */

.kc-rules { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.7; color: var(--muted, #9DB3A6); }
.kc-rules li { margin: 2px 0; }
.kc-rules b { color: var(--ink, #E8F0EA); }

/* ---- a card face ---- */
/* The faces are the real deck (games/cards.svg): a slot only sizes them and
   carries the shadow. Suit colour stopped being paint we apply — it is in the
   art, which is the point of using a real deck. */
.kc-card, .kc-mini { position: relative; flex: none; border: none; padding: 0; background: none; }
.kc-card { width: 46px; aspect-ratio: 2/3; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.kc-mini { width: 30px; aspect-ratio: 2/3; box-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* ---- the cross: four sides, four corners, the stock in the middle ---- */
/* A 3×3 grid is the layout itself — every pile knows its own cell, so nothing
   here has to care how many piles are live or which corners have opened. */
.kc-cross {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto);
  gap: 6px; margin: 6px 0 10px;
  padding: 10px; border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 15%, #1E3A2C 0%, #14261D 62%, #0F1E17 100%);
  border: 5px solid #23150E; box-shadow: inset 0 0 0 2px #3A2417, inset 0 8px 26px rgba(0,0,0,.45);
}
.kc-pile {
  min-height: 104px; padding: 5px 4px; border-radius: 12px; cursor: pointer; color: inherit;
  background: #16281E; border: 1.5px solid #2C4636;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
/* a corner is a different kind of space — it only ever opens with a King, so it
   reads as an outline until one lands there */
.kc-pile.corner { border-style: dashed; background: #12211A; }
.kc-pile:active { transform: scale(.97); }
/* `hot` = this pile is a legal home for whatever you have armed */
.kc-pile.hot { border-color: #6FBF8B; border-style: solid; box-shadow: 0 0 0 2px rgba(111,191,139,.18); }
.kc-pile.picked { border-color: #C8A44E; box-shadow: 0 0 0 2px rgba(200,164,78,.22); }
.kc-plabel { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #9DB3A6; }
/* base card at the top, exposed card at the bottom: the fan is read downwards,
   the same direction the ranks run. Each card covers the one above it down to
   its index corner, and the exposed card at the bottom shows whole, so the
   strip you can see of a buried card is its rank and suit. */
.kc-fan { display: flex; flex-direction: column; align-items: center; }
.kc-fan .kc-mini + .kc-mini { margin-top: -30px; }
.kc-fan .kc-mini.live { box-shadow: 0 3px 7px rgba(0,0,0,.55); }
.kc-more { font: 700 9px 'Instrument Sans', sans-serif; color: #6C8375; }
.kc-empty { margin: auto; font-size: 10px; color: #6C8375; letter-spacing: .04em; }
.kc-stock { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.kc-back {
  width: 40px; height: 54px; border-radius: 8px; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #24402F 0 6px, #1B3125 6px 12px);
  border: 1.5px solid #35513E; font-size: 20px; color: #7FA98D;
}

/* ---- who is at the table: one strip, not a felt ring ---- */
/* The cross already owns the middle of the screen, so seats sit in a row under
   it where a 4-player table still fits a phone. */
.kc-players { display: flex; gap: 6px; }
.kc-p {
  flex: 1 1 0; min-width: 0; padding: 6px 5px; border-radius: 12px; text-align: center;
  background: #16281E; border: 1.5px solid #2C4636;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.kc-p.on { border-color: #C8A44E; box-shadow: 0 0 0 2px rgba(200,164,78,.2); }
.kc-p.open { opacity: .55; border-style: dashed; }
.kc-pav {
  position: relative; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 800 12px 'Bricolage Grotesque', sans-serif; color: #fff; background: #35513E;
}
.kc-p.t0 .kc-pav { background: #2F63D8; } .kc-p.t1 .kc-pav { background: #D96F23; }
.kc-p.t2 .kc-pav { background: #7C50E0; } .kc-p.t3 .kc-pav { background: #2E9E6B; }
.kc-dchip {
  position: absolute; right: -5px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center; font: 700 9px/1 'Instrument Sans', sans-serif; font-style: normal;
  background: #C8A44E; color: #14231A; border: 1.5px solid #16281E;
}
.kc-pname { max-width: 100%; font-size: 11px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kc-pstat { font-size: 10.5px; color: #9DB3A6; }
.kc-pscore { font: 700 13px 'Bricolage Grotesque', sans-serif; color: #E8F0EA; }

/* ---- the turn's one control ---- */
.kc-panel { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.kc-panel .btn { margin: 0; }
.kc-panel.hint { justify-content: center; }

/* ---- your hand ---- */
.kc-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-cards .kc-card {
  cursor: pointer; transform: translateY(0);
  transition: transform .13s cubic-bezier(.2,.8,.3,1.2), box-shadow .13s, opacity .15s;
}
.kc-cards .kc-card:hover { transform: translateY(-5px); }
.kc-cards .kc-card.sel { transform: translateY(-12px); box-shadow: 0 0 0 2px #C8A44E, 0 10px 18px rgba(0,0,0,.5); }
/* nothing on the table takes this card right now — dim it rather than hide it,
   because next turn it may be the only card that fits */
.kc-cards .kc-card.dead { opacity: .6; filter: grayscale(.65); }

/* a 4-player cross plus a seven-card hand is tight on a phone: the whole table
   steps down a size rather than letting anything overlap */
@media (max-width: 420px) {
  .kc-pile { min-height: 92px; }
  .kc-mini { width: 26px; }
  .kc-fan .kc-mini + .kc-mini { margin-top: -26px; }
  .kc-card { width: 40px; }
  .kc-back { width: 34px; height: 46px; font-size: 17px; }
  .kc-pname { font-size: 10px; }
}
@media (max-width: 340px) {
  .kc-cross { gap: 4px; padding: 7px; }
  .kc-pile { min-height: 82px; }
  .kc-mini { width: 23px; }
  .kc-fan .kc-mini + .kc-mini { margin-top: -23px; }
  .kc-card { width: 35px; }
}

/* the lift and the glow are decoration — stillness if the OS asked for it */
@media (prefers-reduced-motion: reduce) {
  .kc-cards .kc-card, .kc-pile { transition: none; }
  .kc-cards .kc-card:hover { transform: none; }
}

/* ---- standings ---- */
.kc-srow { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #1E3326; }
.kc-srow:last-child { border-bottom: 0; }
.kc-srow b { flex: 1; font-size: 13.5px; }
.kc-tot { font-weight: 700; font-size: 15px; }