/* ─── RESET & BASE ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --felt:      #1a5c2a;
  --felt-dark: #123d1c;
  --felt-rim:  #0d2e14;
  --gold:      #e8c96a;
  --gold-dark: #c4a030;
  --red:       #d63031;
  --black:     #1a1a2e;
  --card-bg:   #fefefe;
  --card-sh:   rgba(0,0,0,.45);
  --ui-bg:     rgba(0,0,0,.72);
  --text:      #f0ead6;
  --text-dim:  #a0997c;
  --safe:      #00b894;
  --warn:      #fdcb6e;
  --danger:    #e17055;
  --radius:    10px;
  --radius-lg: 16px;
  --transition:.18s ease;
}

html, body { height: 100%; overflow: hidden; font-family: 'Segoe UI', system-ui, sans-serif; background: #0a1a10; color: var(--text); }
button { cursor: pointer; border: none; outline: none; font-family: inherit; }
input  { font-family: inherit; outline: none; border: none; }
.hidden { display: none !important; }

/* ─── SCREENS ──────────────────────────────────────────────────────────────── */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .3s; overflow-y: auto; }
.screen.active { opacity: 1; pointer-events: all; }

/* ─── LOBBY ────────────────────────────────────────────────────────────────── */
.lobby-bg {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 50% 60%, #1e6b34 0%, #0d2e14 60%, #060f09 100%);
}
.lobby-container {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px 16px; gap: 20px;
}
.logo { text-align: center; }
.logo-icon { font-size: 56px; display: block; filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)); animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.logo h1 { font-size: 2.2rem; font-weight: 800; color: var(--gold); letter-spacing: .04em; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.logo-sub { color: var(--text-dim); font-size: .9rem; margin-top: 4px; }

.card-panel {
  background: var(--ui-bg); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg);
  padding: 24px; width: 100%; max-width: 380px; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.input-group { margin-bottom: 16px; }
.input-group label { display: block; font-size: .8rem; color: var(--text-dim); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.input-group input, .code-input {
  width: 100%; padding: 12px 14px; background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.15); border-radius: var(--radius);
  color: var(--text); font-size: 1rem; transition: var(--transition);
}
.input-group input:focus, .code-input:focus { border-color: var(--gold); background: rgba(255,255,255,.1); }
.code-input { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

.lobby-actions { display: flex; flex-direction: column; gap: 10px; }
.join-row { display: flex; gap: 8px; }
.join-row .code-input { flex: 1; }
.divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.divider span { font-size: .75rem; color: var(--text-dim); white-space: nowrap; }
.divider::before, .divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }

/* ─── BUTTONS ──────────────────────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 20px; border-radius: var(--radius); font-size: 1rem; font-weight: 700;
  transition: var(--transition); letter-spacing: .02em;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; box-shadow: 0 4px 16px rgba(46,204,113,.3); }
.btn-primary:hover { background: linear-gradient(135deg, #3de080, #2ecc71); box-shadow: 0 6px 20px rgba(46,204,113,.4); }
.btn-primary:disabled { background: #555; box-shadow: none; opacity: .6; cursor: not-allowed; }
.btn-secondary { background: rgba(255,255,255,.1); color: var(--text); border: 1.5px solid rgba(255,255,255,.2); }
.btn-secondary:hover { background: rgba(255,255,255,.18); }
.btn-secondary:disabled { opacity: .4; cursor: not-allowed; }
.btn-warn { background: linear-gradient(135deg, var(--warn), #e6b800); color: #1a1a00; }
.btn-icon { background: rgba(255,255,255,.08); color: var(--text); width: 40px; height: 40px; border-radius: 8px; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.btn-icon:hover { background: rgba(255,255,255,.15); }

.error-msg { color: var(--danger); font-size: .85rem; text-align: center; margin-top: 8px; padding: 8px; background: rgba(231,76,60,.15); border-radius: 8px; }
.lobby-hint { color: var(--text-dim); font-size: .8rem; text-align: center; }

.reconnect-section { margin-top: 8px; }

/* ─── ROOM ─────────────────────────────────────────────────────────────────── */
#screen-room { background: linear-gradient(180deg, #0d2e14 0%, #0a1a10 100%); }
.room-header {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: rgba(0,0,0,.4); border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: 0; z-index: 10;
}
.room-title { flex: 1; text-align: center; }
.room-title span { display: block; font-size: .7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .08em; }
.room-title strong { font-size: 1.4rem; color: var(--gold); letter-spacing: .18em; }

.room-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.player-list { display: flex; flex-direction: column; gap: 8px; }
.player-slot {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  transition: var(--transition);
}
.player-slot.host { border-color: rgba(232,201,106,.3); background: rgba(232,201,106,.07); }
.player-slot.empty { border-style: dashed; opacity: .4; }
.player-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: 800; }
.player-slot-name { flex: 1; font-weight: 600; }
.player-slot-tag { font-size: .7rem; color: var(--gold); font-weight: 600; background: rgba(232,201,106,.15); padding: 2px 8px; border-radius: 20px; }

.room-info { text-align: center; color: var(--text-dim); font-size: .85rem; }
#btn-start { margin-top: auto; }

/* ─── CHAT ─────────────────────────────────────────────────────────────────── */
.chat-area { background: rgba(0,0,0,.3); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.07); }
.chat-messages { height: 120px; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; scroll-behavior: smooth; }
.chat-msg { font-size: .82rem; line-height: 1.4; }
.chat-msg .from { font-weight: 700; color: var(--gold); margin-right: 4px; }
.chat-msg.system { color: var(--text-dim); font-style: italic; }
.chat-input-row { display: flex; border-top: 1px solid rgba(255,255,255,.07); }
.chat-input-row input { flex: 1; padding: 10px 12px; background: transparent; color: var(--text); font-size: .85rem; }
.chat-input-row input::placeholder { color: var(--text-dim); }

/* ─── GAME SCREEN ──────────────────────────────────────────────────────────── */
#screen-game {
  background: radial-gradient(ellipse at 50% 50%, var(--felt) 0%, var(--felt-dark) 60%, var(--felt-rim) 100%);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Opponents */
.opponents-area { display: flex; justify-content: space-around; padding: 8px 8px 0; gap: 6px; flex-wrap: wrap; }
.opponent-slot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(0,0,0,.45); border: 1.5px solid rgba(255,255,255,.12); border-radius: 10px;
  padding: 8px 12px; min-width: 80px; position: relative; transition: var(--transition);
}
.opponent-slot.active-turn { border-color: var(--gold); box-shadow: 0 0 14px rgba(232,201,106,.4); }
.opponent-slot.disconnected { opacity: .4; }
.opponent-avatar { font-size: 1.6rem; }
.opponent-name { font-size: .72rem; font-weight: 700; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opponent-cards { display: flex; gap: -4px; }
.mini-card { width: 18px; height: 26px; background: #1a3aff; border-radius: 3px; border: 1px solid rgba(255,255,255,.3); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.opponent-card-count { font-size: .7rem; color: var(--text-dim); }

/* Table */
.table-area {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px; gap: 8px;
}
.table-felt {
  width: 100%; max-width: 420px;
  background: rgba(0,0,0,.25); border-radius: 80px;
  border: 3px solid rgba(255,255,255,.06);
  padding: 18px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 130px; justify-content: center; box-shadow: inset 0 2px 20px rgba(0,0,0,.4);
}
.pile-area { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pile-cards { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; min-height: 80px; align-items: center; }
.pile-label { font-size: .75rem; color: var(--gold); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.table-message { color: rgba(255,255,255,.5); font-size: .85rem; text-align: center; font-style: italic; }

.action-buttons { display: flex; gap: 10px; width: 100%; max-width: 280px; }
.action-buttons .btn { flex: 1; padding: 11px 0; font-size: .95rem; }

.turn-indicator { font-size: .8rem; color: var(--text-dim); text-align: center; min-height: 20px; }
.turn-indicator.my-turn { color: var(--gold); font-weight: 700; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }

/* ─── SWIPE-UP CARD DRAWER ───────────────────────────────────────────────────── */
.my-area {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(10,24,14,.97);
  border-top: 2px solid rgba(255,255,255,.12);
  border-radius: 18px 18px 0 0;
  padding: 0 8px 16px;
  /* height controlled by JS via max-height transition */
  max-height: 160px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.32,1,.55,1);
}
.my-area.expanded {
  max-height: 78vh;
  overflow: hidden;
}

/* Swipe handle pill */
.swipe-handle {
  display: flex; flex-direction: column; align-items: center;
  gap: 5px; padding: 10px 0 6px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none;
  flex-shrink: 0;
}
.swipe-bar {
  width: 38px; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.22);
  transition: background .2s, transform .2s;
}
.my-area.expanded .swipe-bar { background: var(--gold); }
.swipe-hint {
  font-size: .68rem; color: var(--text-dim);
  letter-spacing: .03em;
  transition: opacity .25s;
}
.my-area.expanded .swipe-hint { opacity: 0; height: 0; overflow: hidden; }

/* Info row */
.my-info {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 4px 6px; font-size: .8rem;
  flex-shrink: 0;
}
#my-name-display { font-weight: 700; color: var(--gold); }
#my-card-count { color: var(--text-dim); }

/* Cards grid */
.my-cards {
  display: flex; flex-wrap: wrap; gap: 6px;
  justify-content: center;
  align-content: flex-start;
  padding: 6px 4px 70px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.my-cards::-webkit-scrollbar { display: none; }

/* Visually indicate cards aren't clickable when it's not your turn */
.my-cards.not-my-turn .card {
  cursor: default;
  filter: grayscale(.25) brightness(.85);
}
.my-cards.not-my-turn .card:hover { transform: none; }

/* Collapsed state: no need to scroll, single row, hide overflow cleanly */
.my-area:not(.expanded) .my-cards {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
  justify-content: flex-start;
}

/* Dim overlay behind drawer when expanded */
.my-area-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 49;
}
.my-area-overlay.active { display: block; }

/* ─── CARDS ────────────────────────────────────────────────────────────────── */
.card {
  width: 50px; height: 72px; border-radius: 7px;
  background: var(--card-bg); border: 1.5px solid #ddd;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; box-shadow: 0 3px 8px var(--card-sh);
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative; flex-shrink: 0;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 8px 18px var(--card-sh); }
.card.selected { transform: translateY(-12px); box-shadow: 0 12px 24px rgba(46,204,113,.5); border-color: var(--safe); }
.card.pile-card { cursor: default; width: 44px; height: 64px; }
.card .rank { font-size: 1.05rem; font-weight: 800; line-height: 1; }
.card .suit { font-size: .85rem; line-height: 1.2; }
.card.red { color: var(--red); }
.card.black { color: #111; }
.card .corner-tl, .card .corner-br { position: absolute; display: flex; flex-direction: column; align-items: center; font-size: .6rem; font-weight: 800; line-height: 1; }
.card .corner-tl { top: 3px; left: 5px; }
.card .corner-br { bottom: 3px; right: 5px; transform: rotate(180deg); }

/* Card back (for mini cards) */
.card-back {
  width: 44px; height: 64px; border-radius: 7px;
  background: linear-gradient(135deg, #1a3aff, #0026cc);
  border: 2px solid rgba(255,255,255,.3); box-shadow: 0 3px 8px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}

/* ─── GAME CHAT FLOAT ──────────────────────────────────────────────────────── */
.btn-chat-toggle {
  position: absolute; right: 12px; top: 8px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%; width: 36px; height: 36px; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.btn-chat-toggle.has-unread::after {
  content:''; position: absolute; top: 4px; right: 4px;
  width: 8px; height: 8px; background: var(--danger); border-radius: 50%;
}
.game-chat {
  position: fixed; bottom: 180px; right: 12px; z-index: 100;
  width: 260px; background: rgba(10,20,10,.95); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.game-chat.hidden { display: none; }
.game-chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-weight: 700; font-size: .85rem;
}
#btn-close-chat { background: transparent; color: var(--text-dim); font-size: 1rem; }
.game-chat .chat-messages { height: 180px; }


/* ─── RESULT ───────────────────────────────────────────────────────────────── */
#screen-result {
  background: radial-gradient(ellipse at 50% 40%, #1e4a2a 0%, #0d2014 70%, #060a07 100%);
  align-items: center; justify-content: center;
}
.result-container { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 30px 20px; width: 100%; max-width: 380px; }
.result-container h2 { font-size: 2rem; color: var(--gold); text-align: center; }
.rankings-list { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.rank-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius);
}
.rank-item.rank-1 { background: rgba(232,201,106,.15); border-color: rgba(232,201,106,.4); }
.rank-item.rank-2 { background: rgba(192,192,192,.1); border-color: rgba(192,192,192,.3); }
.rank-item.rank-3 { background: rgba(205,127,50,.1); border-color: rgba(205,127,50,.3); }
.rank-badge { font-size: 1.6rem; min-width: 36px; text-align: center; }
.rank-name { flex: 1; font-weight: 700; }
.rank-label { font-size: .8rem; color: var(--text-dim); }

/* ─── SCROLLBAR ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }

/* ─── MOBILE FINE-TUNING ────────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .card { width: 44px; height: 64px; }
  .logo h1 { font-size: 1.8rem; }
}
/* ─── ADDITIONAL STYLES ──────────────────────────────────────────────────────── */

/* Player slots in waiting room */
.player-slot {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.06); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 8px;
}
.player-slot.you { border: 1px solid var(--gold); }
.player-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--gold); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; flex-shrink: 0;
}
.player-name { flex: 1; font-weight: 500; }
.player-status { font-size: 1rem; }

/* Opponents area */
.opponents-area {
  display: flex; gap: 8px; padding: 8px 12px;
  overflow-x: auto; flex-shrink: 0;
}
.opponent-slot {
  background: rgba(0,0,0,.45); border-radius: var(--radius);
  padding: 8px 12px; min-width: 100px; text-align: center;
  border: 2px solid transparent; transition: border var(--transition);
}
.opponent-slot.active-turn { border-color: var(--gold); }
.opp-name { font-size: .8rem; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.opp-count { font-size: .75rem; color: var(--text-dim); margin-top: 4px; }
.card-fan { display: flex; align-items: center; position: relative; height: 40px; }

/* Card styles */
.card {
  display: inline-flex; flex-direction: column;
  justify-content: space-between; align-items: center;
  width: 52px; height: 76px; border-radius: 6px;
  background: var(--card-bg); color: #111;
  box-shadow: 0 2px 8px var(--card-sh);
  padding: 4px; font-weight: 700; font-size: 1rem;
  user-select: none; flex-shrink: 0;
  transition: transform .15s, box-shadow .15s;
}
.card.red { color: var(--red); }
.card.clickable { cursor: pointer; }
.card.clickable:hover { transform: translateY(-6px); }
.card.selected { transform: translateY(-14px); box-shadow: 0 6px 20px rgba(232,201,106,.6); outline: 2px solid var(--gold); }
.card-rank { font-size: .85rem; align-self: flex-start; }
.card-suit { font-size: 1.1rem; }
.card-back {
  background: repeating-linear-gradient(45deg,#1a3a50,#1a3a50 5px,#1e4a66 5px,#1e4a66 10px);
  border: 2px solid #0d2233;
}
.card-overflow { font-size: .75rem; color: var(--text-dim); margin-left: 4px; }

/* My cards area — defined above in swipe drawer section */

/* Pile area */
.pile-area { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pile-cards { display: flex; align-items: center; min-height: 80px; position: relative; }
.pile-label { font-size: .8rem; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }

/* Turn indicator */
.turn-indicator {
  text-align: center; font-size: .9rem; color: var(--text-dim);
  padding: 6px; border-radius: var(--radius); margin-top: 4px;
}
.turn-indicator.my-turn { color: var(--gold); font-weight: 700; }

/* Table message (finished players) */
.table-message {
  text-align: center; font-size: .8rem; color: var(--text-dim);
  padding: 4px 12px; display: none;
}

/* Rankings */
.rankings-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.rank-item {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,.07); border-radius: var(--radius);
  padding: 14px 20px;
}
.rank-item.rank-1 { background: rgba(232,201,106,.18); border: 1px solid var(--gold); }
.rank-badge { font-size: 1.5rem; }
.rank-name { flex: 1; font-size: 1.1rem; font-weight: 600; }
.rank-pos { color: var(--text-dim); }

/* Chat messages */
.chat-msg { padding: 4px 0; font-size: .85rem; line-height: 1.4; }
.chat-msg.system { color: var(--text-dim); font-style: italic; }
.chat-msg strong { color: var(--gold); }



/* Reconnect section */
.reconnect-section { margin-top: 8px; }

/* Error message */
.error-msg { color: var(--danger); font-size: .85rem; text-align: center; padding: 6px 0; }

/* Game chat floating */
.game-chat {
  position: fixed; bottom: 70px; right: 12px;
  width: min(320px, calc(100vw - 24px));
  background: rgba(10,20,16,.95); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg);
  z-index: 100; display: flex; flex-direction: column;
}
.game-chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-weight: 600; font-size: .9rem;
}
.btn-chat-toggle {
  position: fixed; bottom: 16px; right: 16px;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gold); color: #000; font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.4); z-index: 101;
  display: flex; align-items: center; justify-content: center;
}

/* ─── VOICE CHAT ────────────────────────────────────────────────────────────── */
.btn-mic {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: var(--text);
  font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), transform var(--transition);
  border: 2px solid transparent;
}
.btn-mic:hover { background: rgba(255,255,255,.22); }
.btn-mic.mic-on {
  background: var(--safe); border-color: #00d4a8;
  box-shadow: 0 0 12px rgba(0,184,148,.5);
  animation: micPulse 1.5s ease-in-out infinite;
}
.btn-mic.mic-muted {
  background: var(--danger); border-color: #ff7675;
}
@keyframes micPulse {
  0%,100% { box-shadow: 0 0 8px rgba(0,184,148,.4); }
  50%      { box-shadow: 0 0 18px rgba(0,184,148,.8); }
}

.btn-mic-game {
  position: fixed; top: 12px; left: 12px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.65); color: var(--text); font-size: 1.2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.4); z-index: 201;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,.15);
  transition: all var(--transition);
}
.btn-mic-game.mic-on {
  background: var(--safe); border-color: #00d4a8;
  box-shadow: 0 0 16px rgba(0,184,148,.6);
  animation: micPulse 1.5s ease-in-out infinite;
}
.btn-mic-game.mic-muted {
  background: var(--danger); border-color: #ff7675;
}

.voice-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(0,0,0,.85); backdrop-filter: blur(8px);
  padding: 6px 12px; display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; font-size: .78rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.voice-user {
  display: flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.07); border-radius: 20px;
  padding: 3px 10px;
  transition: background var(--transition);
}
.voice-user.speaking { background: rgba(0,184,148,.25); }
.voice-user .mic-dot { font-size: .85rem; }

/* ─── REMOVED THREES BAR ─────────────────────────────────────────────────────── */
.removed-threes-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  background: rgba(0,0,0,.55); border-radius: 10px;
  padding: 6px 10px; margin-bottom: 8px; font-size: .78rem;
}
.threes-label { color: var(--text-dim); font-size: .75rem; margin-right: 4px; }
.three-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  background: var(--card-bg); color: #1a1a2e;
  border-radius: 6px; padding: 2px 7px; font-weight: 700; font-size: .85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.4); min-width: 32px; line-height: 1.2;
}
.three-chip.red { color: var(--red); }
.three-chip.spade3 { outline: 2px solid var(--gold); box-shadow: 0 0 8px rgba(232,201,106,.5); }
.three-owner { font-size: .6rem; font-weight: 400; color: #555; white-space: nowrap; }


/* ─── SWAP CARD ANIMATION ────────────────────────────────────────────────────── */
@keyframes swapUp {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  40%  { transform: translateY(-60px) scale(1.08); opacity: .85; }
  70%  { transform: translateY(-120px) scale(.9); opacity: .4; }
  100% { transform: translateY(-220px) scale(.7); opacity: 0; }
}
.card.swapping {
  animation: swapUp .45s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
  z-index: 999;
}


.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: max-content;
  max-width: min(88vw, 360px);
  padding: 16px 24px;
  border-radius: 16px;
  font-size: clamp(.9rem, 4vw, 1.05rem);
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  z-index: 9999;
  pointer-events: none;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  opacity: 1;
  animation: toastPop .25s cubic-bezier(.34,1.56,.64,1) both;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.hidden { display: none !important; }
.toast-hide   { opacity: 0 !important; transform: translate(-50%, -50%) scale(.85) !important; }
@keyframes toastPop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1);  }
}
.toast-info    { background: rgba(20,30,40,.94); color: #f0ead6; border: 1.5px solid rgba(255,255,255,.14); }
.toast-error   { background: rgba(160,20,20,.95); color: #fff;    border: 1.5px solid rgba(255,120,120,.4); }
.toast-success { background: rgba(0,120,80,.95);  color: #fff;    border: 1.5px solid rgba(0,255,160,.3);  }