/* TV screen. Sized in vmin so it scales from a laptop to a 4K TV. */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, var(--felt-light), var(--felt) 45%, var(--felt-dark) 100%);
  color: var(--ink);
  font-family: var(--font);
}
#app { height: 100%; }
button { font-family: inherit; cursor: pointer; }
.splash { height: 100%; display: grid; place-items: center; font-size: 6vmin; font-weight: 800; opacity: 0.6; }

/* ---------- Lobby ---------- */
.lobby { display: grid; grid-template-columns: 38% 1fr; height: 100%; gap: 3vmin; padding: 4vmin; }
.join-panel {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 3vmin;
  padding: 4vmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2vmin;
}
.logo { font-size: 7vmin; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.logo span { color: var(--gold); }
.tagline { color: var(--muted); font-size: 2.2vmin; margin-top: -1vmin; }
.qr { background: #fff; padding: 1.5vmin; border-radius: 2vmin; width: 30vmin; height: 30vmin; }
.qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.join-url { font-size: 2.2vmin; color: var(--muted); }
.join-url b { color: var(--ink); }
.room-code { font-size: 11vmin; font-weight: 800; letter-spacing: 0.15em; color: var(--gold); line-height: 1; }
.room-label { text-transform: uppercase; letter-spacing: 0.3em; font-size: 1.8vmin; color: var(--muted); }

.lobby-main { display: flex; flex-direction: column; gap: 3vmin; min-height: 0; }
.section-title { font-size: 2.2vmin; text-transform: uppercase; letter-spacing: 0.25em; color: var(--muted); margin: 0 0 1.5vmin; }
.players { display: flex; flex-wrap: wrap; gap: 1.5vmin; min-height: 9vmin; }
.player-chip {
  display: flex; align-items: center; gap: 1.2vmin;
  background: rgba(255, 255, 255, 0.1);
  padding: 1vmin 2vmin 1vmin 1vmin;
  border-radius: 99px;
  font-size: 2.6vmin;
  font-weight: 600;
  animation: pop 0.35s ease;
}
.player-chip.offline { opacity: 0.5; }
.player-chip .x { background: none; border: 0; color: var(--muted); font-size: 2.4vmin; padding: 0 0 0 0.5vmin; }
.avatar {
  width: 5vmin; height: 5vmin; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 2.4vmin;
  background: var(--gold); color: var(--felt-dark);
  flex: none;
}
.avatar.bot { background: #9fb3c8; }
.team0 .avatar { background: var(--team0); color: #fff; }
.team1 .avatar { background: var(--team1); color: #fff; }
.empty-players { color: var(--muted); font-size: 2.6vmin; padding: 2vmin 0; }

.games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8vmin; overflow: auto; }
.game-tile {
  background: rgba(0, 0, 0, 0.25);
  border: 0.4vmin solid transparent;
  border-radius: 2vmin;
  padding: 2vmin;
  text-align: left;
  color: var(--ink);
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.game-tile:hover { transform: translateY(-0.4vmin); }
.game-tile.selected { border-color: var(--gold); background: rgba(245, 196, 81, 0.14); }
.game-tile.soon { opacity: 0.45; cursor: default; }
.game-tile .emoji { font-size: 4vmin; }
.game-tile .name { font-size: 2.8vmin; font-weight: 700; margin-top: 0.5vmin; }
.game-tile .desc { font-size: 1.7vmin; color: var(--muted); margin-top: 0.5vmin; line-height: 1.3; }
.game-tile .count { font-size: 1.6vmin; color: var(--gold); margin-top: 1vmin; font-weight: 600; }
.lobby-actions { display: flex; gap: 2vmin; align-items: center; }
.btn {
  border: 0; border-radius: 99px; padding: 1.6vmin 3.6vmin;
  font-size: 2.6vmin; font-weight: 700;
  background: rgba(255, 255, 255, 0.14); color: var(--ink);
}
.btn.primary { background: var(--gold); color: var(--felt-dark); }
.btn:disabled { opacity: 0.4; cursor: default; }
.hint { color: var(--muted); font-size: 2vmin; }

/* ---------- Game ---------- */
.game { display: grid; grid-template-columns: 1fr 24vw; height: 100%; }
.table-area { position: relative; display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 2vmin; padding: 2vmin 3vmin 0; }
.topbar .title { font-size: 3vmin; font-weight: 800; }
.topbar .code { margin-left: auto; color: var(--muted); font-size: 2vmin; }
.topbar .code b { color: var(--gold); letter-spacing: 0.1em; }
.status {
  margin: 1.5vmin auto 0;
  padding: 1.2vmin 3vmin;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 99px;
  font-size: 3vmin;
  font-weight: 600;
  text-align: center;
  max-width: 90%;
  min-height: 6vmin;
}
.table { position: relative; flex: 1; margin: 2vmin 4vmin 4vmin; }
.felt {
  position: absolute; inset: 9% 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.15));
  box-shadow: inset 0 0 0 1vmin rgba(0, 0, 0, 0.18), inset 0 0 6vmin rgba(0, 0, 0, 0.35), 0 0 0 1.2vmin #5b3a1e, 0 0 0 1.6vmin #3e2713;
}
.center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; gap: 3vmin; align-items: flex-end; justify-content: center;
}
.center.corner { left: 0; top: 0; transform: none; }
.center.corner .card { --cw: 7vmin; }
.center.corner .suit-badge { width: 9vmin; height: 9vmin; font-size: 6vmin; }
.pile { display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
.pile .label { font-size: 2vmin; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pile .cards { display: flex; gap: 0.8vmin; }
.pile .cards.fan .card + .card { margin-left: -5vmin; }
.pile .card { --cw: 8.5vmin; }
.pile.big .card { --cw: 10vmin; }
.suit-badge { font-size: 8vmin; line-height: 1; background: var(--card-face); width: 11vmin; height: 11vmin; border-radius: 50%; display: grid; place-items: center; color: var(--black); box-shadow: 0 1vmin 2vmin rgba(0,0,0,0.3); }
.suit-badge .suit-red { color: var(--red); }

.seat {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.8vmin;
  transition: opacity 0.3s;
  z-index: 2;
}
.seat.dimmed { opacity: 0.45; }
.nameplate {
  display: flex; align-items: center; gap: 1vmin;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 99px;
  padding: 0.6vmin 2vmin 0.6vmin 0.6vmin;
  border: 0.35vmin solid transparent;
  white-space: nowrap;
}
.seat.active .nameplate { border-color: var(--gold); box-shadow: 0 0 3vmin rgba(245, 196, 81, 0.55); animation: pulse 1.6s infinite; }
.nameplate .who { display: flex; flex-direction: column; line-height: 1.1; }
.nameplate .nm { font-size: 2.3vmin; font-weight: 700; }
.nameplate .sub { font-size: 1.6vmin; color: var(--muted); }
.badges { display: flex; gap: 0.6vmin; flex-wrap: wrap; justify-content: center; }
.badge { background: var(--gold); color: var(--felt-dark); font-size: 1.4vmin; font-weight: 800; padding: 0.3vmin 1vmin; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.05em; }
.note { font-size: 1.9vmin; font-weight: 600; background: var(--card-face); color: var(--felt-dark); padding: 0.4vmin 1.4vmin; border-radius: 1vmin; animation: pop 0.25s ease; }
.minihand { display: flex; height: 6.5vmin; }
.minihand .card { --cw: 4.6vmin; }
.minihand .card + .card { margin-left: -3.4vmin; }
.showhand { display: flex; gap: 0.5vmin; }
.showhand .card { --cw: 6.5vmin; }
.chipstack { font-size: 1.9vmin; font-weight: 700; background: #fff; color: #222; border-radius: 99px; padding: 0.3vmin 1.2vmin; border: 0.4vmin dashed var(--red); }
.played { position: absolute; transform: translate(-50%, -50%); z-index: 1; animation: deal 0.3s ease; }
.played .card { --cw: 9vmin; }

.sidebar { background: rgba(0, 0, 0, 0.28); padding: 3vmin 2.5vmin; display: flex; flex-direction: column; gap: 3vmin; overflow: hidden; }
.score-row { display: flex; flex-direction: column; gap: 0.6vmin; margin-bottom: 1.6vmin; }
.score-row .top { display: flex; justify-content: space-between; font-size: 2.2vmin; font-weight: 600; gap: 1vmin; }
.score-row .val { font-size: 3vmin; font-weight: 800; color: var(--gold); }
.score-row .sub { font-size: 1.6vmin; color: var(--muted); }
.bar { height: 1.2vmin; background: rgba(255, 255, 255, 0.12); border-radius: 99px; overflow: hidden; }
.bar > div { height: 100%; background: var(--gold); border-radius: 99px; transition: width 0.6s ease; }
.score-row.t0 .bar > div { background: var(--team0); }
.score-row.t1 .bar > div { background: var(--team1); }
.log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.8vmin; font-size: 1.8vmin; color: var(--muted); }
.log li:last-child { color: var(--ink); }

/* Overlays */
.overlay {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(5, 25, 15, 0.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vmin;
  animation: fade 0.3s ease;
}
.overlay h1 { font-size: 6vmin; margin: 0; text-align: center; max-width: 80%; }
.overlay .sub { color: var(--muted); font-size: 2.4vmin; }
.show-grid { display: flex; gap: 4vmin; }
.show-box { background: rgba(0, 0, 0, 0.35); padding: 2.5vmin; border-radius: 2vmin; min-width: 26vmin; }
.show-box h3 { margin: 0 0 1.5vmin; font-size: 2.4vmin; }
.show-box .cards { display: flex; gap: 0.5vmin; margin-bottom: 1.5vmin; }
.show-box .card { --cw: 6vmin; }
.show-box .line { display: flex; justify-content: space-between; font-size: 1.9vmin; color: var(--muted); }
.show-box .total { font-size: 3vmin; font-weight: 800; color: var(--gold); margin-top: 1vmin; }

/* Klondike */
.klondike { position: absolute; inset: 2vmin 3vmin; display: flex; flex-direction: column; gap: 3vmin; }
.k-row { display: flex; gap: 1.6vmin; align-items: flex-start; }
.k-row .card { --cw: 10.5vmin; }
.k-waste { display: flex; }
.k-waste .card + .card { margin-left: -7.5vmin; }
.k-spacer { flex: 1; }
.k-tableau { display: grid; grid-template-columns: repeat(7, 10.5vmin); gap: 1.6vmin; flex: 1; }
.k-col { position: relative; }
.k-col .card { --cw: 10.5vmin; position: absolute; left: 0; }
.k-colnum { position: absolute; top: -3vmin; left: 0; right: 0; text-align: center; font-size: 1.8vmin; color: var(--muted); font-weight: 700; }
.k-count { font-size: 1.6vmin; color: var(--muted); text-align: center; margin-top: 0.5vmin; }

#toast {
  position: fixed; left: 50%; bottom: 4vmin; transform: translate(-50%, 200%);
  background: #fff; color: #222; padding: 1.4vmin 3vmin; border-radius: 99px; font-size: 2.2vmin; font-weight: 600;
  transition: transform 0.3s ease; z-index: 50;
}
#toast.show { transform: translate(-50%, 0); }

@keyframes pop { from { transform: scale(0.7); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes deal { from { transform: translate(-50%, -50%) scale(0.6) rotate(-8deg); opacity: 0; } }
@keyframes pulse { 50% { box-shadow: 0 0 1vmin rgba(245, 196, 81, 0.3); } }

/* Canasta */
.cn { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1.5vmin; }
.cn-team { flex: 1; background: rgba(0, 0, 0, 0.2); border-radius: 2vmin; padding: 1.4vmin 2vmin; display: flex; flex-direction: column; gap: 1vmin; min-height: 0; border-left: 0.6vmin solid var(--team0); }
.cn-team.team1 { border-left-color: var(--team1); }
.cn-head { display: flex; align-items: center; gap: 1.5vmin; font-size: 2.2vmin; }
.cn-score { color: var(--gold); font-weight: 800; font-size: 2.8vmin; }
.cn-red3 { display: flex; gap: 0.4vmin; margin-left: auto; }
.cn-red3 .card { --cw: 3.6vmin; }
.cn-melds { display: flex; gap: 1.4vmin; align-items: flex-start; flex-wrap: wrap; overflow: hidden; }
.cn-meld { display: flex; flex-direction: column; align-items: center; gap: 0.5vmin; }
.cn-fan { display: flex; flex-direction: column; }
.cn-fan .card { --cw: 7vmin; }
.cn-fan .card + .card { margin-top: -7.3vmin; }
.cn-stack { position: relative; padding: 0 0.6vmin 0.6vmin 0; }
.cn-stack .card { --cw: 7vmin; box-shadow: 0.3vmin 0.3vmin 0 #ddd, 0.6vmin 0.6vmin 0 #bbb, 0 1vmin 2vmin rgba(0,0,0,0.4); }
.cn-stack.natural .card { outline: 0.4vmin solid var(--red); }
.cn-stack.mixed .card { outline: 0.4vmin solid #1d1f24; }
.cn-star { position: absolute; left: 50%; bottom: -0.4vmin; transform: translateX(-50%); white-space: nowrap; font-size: 1.3vmin; font-weight: 800; background: var(--gold); color: var(--felt-dark); padding: 0.2vmin 0.8vmin; border-radius: 99px; }
.cn-stack.mixed .cn-star { background: #1d1f24; color: var(--gold); }
.cn-mlabel { font-size: 1.5vmin; color: var(--muted); font-weight: 600; }
.cn-mid { display: flex; align-items: center; justify-content: center; gap: 4vmin; padding: 0.5vmin 0; }
.cn-mid .pile .card { --cw: 8vmin; }
.cn-mid .cards.frozen .card { transform: rotate(90deg); box-shadow: 0 0 0 0.5vmin #9fd8ff, 0 0 3vmin rgba(159, 216, 255, 0.7); }
.cn-seats { display: grid; grid-template-columns: 1fr 1fr; gap: 1vmin 2vmin; }
.seat-inline.active .nameplate { border-color: var(--gold); box-shadow: 0 0 3vmin rgba(245, 196, 81, 0.55); }
.seat-inline.team0 .avatar { background: var(--team0); color: #fff; }
.seat-inline.team1 .avatar { background: var(--team1); color: #fff; }
.cn-dot { width: 1.6vmin; height: 1.6vmin; border-radius: 50%; background: var(--team0); }
.team1 .cn-dot { background: var(--team1); }
.self-join { font-size: 1.7vmin; color: var(--muted); text-decoration: underline; opacity: 0.8; }