:root {
  --felt: #126b45;
  --felt-dark: #0b5134;
  --cream: #f4f0e4;
  --ink: #1b1f23;
  --accent: #f2c14e;
  --danger: #b3261e;
  --card-w: clamp(48px, 6vw, 76px);
  --card-h: calc(var(--card-w) * 1.4);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #081f17; color: var(--cream); min-height: 100vh; }
button, input { font: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; padding: .62rem .9rem; font-weight: 700; }
button:disabled { opacity: .45; cursor: not-allowed; }
.primary { background: var(--accent); color: #1f1a0d; }
.hidden { display: none !important; }
.panel { width: min(520px, calc(100% - 32px)); margin: 10vh auto 0; padding: 28px; background: #f7f4ea; color: var(--ink); border-radius: 18px; box-shadow: 0 20px 60px #0007; }
.lobby-panel h1 { margin-top: 0; font-size: 2rem; }
.lobby-panel label { display: grid; gap: 6px; font-weight: 700; }
.lobby-panel input { width: 100%; padding: .8rem; border: 1px solid #bbb; border-radius: 10px; margin-top: 4px; }
.lobby-actions { display: grid; gap: 14px; margin-top: 18px; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
#gameCode { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.subtle { color: #666; }
.error { color: var(--danger); min-height: 1.2em; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 14px; background: #071a13; position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 10px #0005; }
.game-code { text-align: center; }
.top-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.top-actions button { padding: .45rem .65rem; font-size: .9rem; }
.status-bar { min-height: 42px; padding: 10px 14px; text-align: center; background: #103f2e; font-weight: 700; }
.table-area { min-height: calc(100vh - 150px); padding: 16px; background: radial-gradient(circle at center, #178456, var(--felt) 52%, var(--felt-dark)); position: relative; }
.players-grid { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.player-board { background: #073b2988; border: 3px solid transparent; border-radius: 16px; padding: 10px; transition: .2s; position: relative; }
.player-board.active { border-color: var(--accent); box-shadow: 0 0 0 3px #f2c14e44, 0 0 26px #f2c14e66; }
.player-board.me { background: #0a4932cc; }
.player-board.disconnected { opacity: .6; }
.player-title { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.player-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cards-grid { width: max-content; display: grid; grid-template-columns: repeat(3, var(--card-w)); grid-template-rows: repeat(3, var(--card-h)); gap: 6px; margin: 0 auto; }
.card { width: var(--card-w); height: var(--card-h); border-radius: 9px; background: white; color: #111; border: 1px solid #d5d5d5; box-shadow: 0 3px 8px #0005; position: relative; display: flex; align-items: center; justify-content: center; font-weight: 900; user-select: none; transition: transform .18s ease, opacity .18s ease; }
.card.red { color: #b21f24; }
.card .corner { position: absolute; top: 4px; left: 5px; display: grid; line-height: .9; font-size: .82em; }
.card .big { font-size: clamp(1.2rem, 2vw, 1.8rem); }
.card.joker { background: linear-gradient(135deg,#fff,#ece9ff); color: #5037a5; text-align: center; font-size: .8rem; }
.card-back { background: repeating-linear-gradient(45deg,#173a66 0 7px,#234e83 7px 14px); color: #fff; border: 4px solid #eee; }
.card-back span { font-size: .72rem; letter-spacing: .1em; transform: rotate(-20deg); }
.card.slot-empty { visibility: hidden; }
.card.selectable { cursor: pointer; outline: 2px solid #ffffff77; }
.card.drop-target { outline: 3px dashed var(--accent); outline-offset: 1px; }
.center-piles { display: flex; justify-content: center; align-items: end; gap: 20px; margin: 18px 0 4px; }
.pile-wrap { text-align: center; min-width: calc(var(--card-w) + 8px); }
.pile { margin: auto; }
.pile[draggable="true"] { cursor: grab; }
.footer-bar { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 10px 14px; background: #071a13; min-height: 58px; }
#scoreboard { display: flex; gap: 10px; flex-wrap: wrap; font-size: .85rem; }
.score-chip { background: #ffffff14; padding: 6px 9px; border-radius: 999px; }
.score-chip.winner { background: #f2c14e; color: #191405; font-weight: 900; }
.toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: #111e; color: white; padding: 10px 14px; border-radius: 10px; z-index: 100; box-shadow: 0 5px 24px #0007; }
.flying-card { position: fixed !important; z-index: 200; margin: 0 !important; pointer-events: none; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .25s linear; }
.match-remove { animation: slideAway .7s ease forwards; }
@keyframes slideAway { 0% { transform: translateY(0) scale(1); opacity: 1; } 45% { transform: translateY(28px) scale(.92); opacity: 1; } 100% { transform: translateY(120px) scale(.72); opacity: 0; } }
.flip-anim { animation: flip .42s ease; }
@keyframes flip { 0%{ transform: rotateY(0) } 50%{ transform: rotateY(90deg) } 100%{ transform: rotateY(0) } }
.voice-stage { display: none; }
@media (max-width: 950px) {
  .players-grid { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
  .topbar { grid-template-columns: 1fr auto; }
  .game-code { grid-row: 2; grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :root { --card-w: clamp(42px, 13vw, 62px); }
  .players-grid { grid-template-columns: 1fr; }
  .topbar { position: static; }
  .top-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .table-area { padding: 10px; }
  .player-board:not(.me) .cards-grid { --card-w: clamp(34px, 10vw, 48px); }
}

.mini-action { margin-top: 6px; padding: .35rem .5rem; font-size: .75rem; }

/* Table seating layout -----------------------------------------------------
   Each client sees themselves front-and-center, with the remaining players
   arranged around the far and side edges of the felt. */
@media (min-width: 951px) {
  .table-area {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(70px, .35fr) minmax(300px, 1.45fr) minmax(70px, .35fr) minmax(190px, 1fr);
    grid-template-rows: auto auto auto;
    gap: 18px 12px;
    align-items: center;
    min-height: calc(100vh - 150px);
  }

  .players-grid { display: contents; }
  .player-board { min-width: 0; justify-self: center; }

  .player-board:not(.me) {
    --card-w: clamp(38px, 4.25vw, 58px);
    padding: 8px;
  }

  .player-board.me {
    --card-w: clamp(62px, 6.8vw, 92px);
    grid-column: 2 / 5;
    grid-row: 3;
    justify-self: center;
    padding: 12px 18px 16px;
    border-radius: 20px;
  }

  .player-board.me .player-title {
    justify-content: center;
    gap: 18px;
    font-size: clamp(1.05rem, 1.7vw, 1.45rem);
    text-align: center;
  }

  .player-board.me .cards-grid { gap: 8px; }

  .seat-top-left   { grid-column: 1 / 3; grid-row: 1; }
  .seat-top-center { grid-column: 3;     grid-row: 1; }
  .seat-top-right  { grid-column: 4 / 6; grid-row: 1; }
  .seat-mid-left   { grid-column: 1 / 3; grid-row: 2; }
  .seat-mid-right  { grid-column: 4 / 6; grid-row: 2; }

  .center-piles {
    grid-column: 3;
    grid-row: 2;
    margin: 0;
    align-self: center;
    justify-self: center;
    z-index: 2;
  }
}


/* v1.3: SVG card art + compact, tablet-friendly sizing ------------------ */
.card.card-art {
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: 0 2px 6px #0005;
}
.card.card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.card.card-back { background: transparent; border: 0; }
.card.source-selected {
  outline: 4px solid var(--accent);
  outline-offset: 2px;
  transform: translateY(-2px);
}

/* Keep the whole table closer to a common laptop/iPad landscape footprint.
   Cards stop growing on large monitors instead of scaling indefinitely. */
@media (min-width: 951px) {
  .table-area {
    width: min(1180px, 100%);
    margin: 0 auto;
    min-height: 0;
    padding: 12px 16px 14px;
    grid-template-columns: minmax(155px, 1fr) minmax(34px, .18fr) minmax(250px, 1.18fr) minmax(34px, .18fr) minmax(155px, 1fr);
    grid-template-rows: auto auto auto;
    gap: 10px 8px;
  }
  .player-board:not(.me) {
    --card-w: clamp(34px, 3.7vw, 46px);
    padding: 6px 7px 7px;
    border-radius: 12px;
  }
  .player-board:not(.me) .cards-grid { gap: 4px; }
  .player-board:not(.me) .player-title {
    margin-bottom: 5px;
    font-size: clamp(.72rem, 1vw, .86rem);
  }
  .player-board.me {
    --card-w: clamp(54px, 5.5vw, 68px);
    padding: 8px 12px 10px;
    border-radius: 15px;
  }
  .player-board.me .cards-grid { gap: 5px; }
  .player-board.me .player-title {
    margin-bottom: 6px;
    font-size: clamp(.92rem, 1.25vw, 1.08rem);
  }
  .center-piles { gap: 12px; }
  .center-piles .card { --card-w: clamp(46px, 4.5vw, 58px); }
  .pile-wrap { min-width: 66px; font-size: .82rem; }
  .status-bar { min-height: 36px; padding: 7px 12px; font-size: .92rem; }
  .footer-bar { min-height: 48px; padding: 7px 12px; }
}

/* iPad portrait / smaller tablets: compact two-column boards, with the
   local board full-width so it remains the visual focus. */
@media (min-width: 601px) and (max-width: 950px) {
  :root { --card-w: clamp(44px, 7vw, 56px); }
  .table-area { min-height: 0; padding: 10px 12px; }
  .players-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .player-board { padding: 7px; border-radius: 12px; }
  .player-board:not(.me) { --card-w: clamp(34px, 5.2vw, 44px); }
  .player-board.me {
    --card-w: clamp(48px, 7vw, 58px);
    grid-column: 1 / -1;
    justify-self: center;
    width: max-content;
    max-width: 100%;
  }
  .cards-grid { gap: 4px; }
  .player-title { margin-bottom: 5px; font-size: .82rem; }
  .center-piles { margin: 10px 0 2px; gap: 12px; }
  .topbar { padding: 7px 10px; gap: 8px; }
  .top-actions button { padding: .38rem .5rem; font-size: .8rem; }
  .status-bar { min-height: 34px; padding: 6px 10px; font-size: .87rem; }
  .footer-bar { padding: 7px 10px; min-height: 46px; }
}

@media (max-width: 600px) {
  .card.card-art { border-radius: 7px; }
  .center-piles { gap: 10px; }
}

/* v1.4: larger opponent cards, less dead space --------------------------
   Keep the overall table footprint from v1.3, but spend more of each
   opponent panel on the cards themselves instead of padding/header space. */
@media (min-width: 951px) {
  .player-board:not(.me) {
    --card-w: clamp(39px, 4.05vw, 52px);
    padding: 3px 4px 4px;
    border-radius: 10px;
  }
  .player-board:not(.me) .cards-grid {
    gap: 3px;
  }
  .player-board:not(.me) .player-title {
    margin: 0 1px 3px;
    min-height: 0;
    line-height: 1.05;
    font-size: clamp(.69rem, .9vw, .80rem);
  }
  .player-board:not(.me) .player-title span {
    font-size: .88em;
    white-space: nowrap;
  }
}

@media (min-width: 601px) and (max-width: 950px) {
  .player-board:not(.me) {
    --card-w: clamp(38px, 5.8vw, 48px);
    padding: 3px 4px 4px;
  }
  .player-board:not(.me) .cards-grid { gap: 3px; }
  .player-board:not(.me) .player-title {
    margin-bottom: 3px;
    line-height: 1.05;
    font-size: .76rem;
  }
}

@media (max-width: 600px) {
  .player-board:not(.me) {
    --card-w: clamp(38px, 11vw, 52px);
    padding: 4px;
  }
  .player-board:not(.me) .cards-grid { gap: 3px; }
  .player-board:not(.me) .player-title { margin-bottom: 3px; }
}

/* v1.5: let the actual card geometry define each grid cell -----------------
   v1.4 reduced panel padding but the 3x3 grid was still reserving oversized
   row tracks.  That left each SVG sitting at the top of a tall green slot.
   Use the playing-card aspect ratio directly and let rows size to the cards. */
.cards-grid {
  grid-template-rows: none;
  grid-auto-rows: auto;
  align-items: start;
  align-content: start;
}
.card {
  height: auto;
  aspect-ratio: 5 / 7;
  min-height: 0;
}
.card.card-art img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

@media (min-width: 951px) {
  .player-board.me {
    --card-w: clamp(64px, 6.2vw, 78px);
  }
  .player-board.me .cards-grid { gap: 6px; }

  .player-board:not(.me) {
    --card-w: clamp(44px, 4.6vw, 58px);
  }
  .player-board:not(.me) .cards-grid { gap: 4px; }
}

@media (min-width: 601px) and (max-width: 950px) {
  .player-board.me { --card-w: clamp(54px, 8.5vw, 66px); }
  .player-board:not(.me) { --card-w: clamp(42px, 6.5vw, 54px); }
}

@media (max-width: 600px) {
  .player-board.me { --card-w: clamp(48px, 15vw, 62px); }
  .player-board:not(.me) { --card-w: clamp(40px, 12vw, 50px); }
}