/* =========================================================
   DUEL. — painel de lobbies (partilhado por todos os jogos)
   Usa as variáveis de tema definidas por cada jogo
   (--panel, --border, --blue, --green, --red, --muted…).
   ========================================================= */
.lobby{
  max-width:1180px;margin:0 auto 48px;padding:0 22px;
  font-family:'Inter',system-ui,sans-serif;color:var(--text);
}
.lobby-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 14px}
.lobby-head h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600}

.lobby-conn{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted-2)}
.lobby-conn i{width:8px;height:8px;border-radius:50%;background:var(--muted-2);transition:.2s}
.lobby-conn.online{color:var(--green)}
.lobby-conn.online i{background:var(--green);box-shadow:0 0 8px var(--green)}
.lobby-conn.offline{color:var(--red)}
.lobby-conn.offline i{background:var(--red)}

.lobby-mine{margin-bottom:14px}
.lobby-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}

.lobby-card{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;
}
.lobby-card.mine{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.lobby-card .who{display:flex;align-items:center;gap:9px;flex:1;min-width:130px}
.lobby-card .ava{font-size:22px;line-height:1}
.lobby-card .nm{font-weight:600;font-size:14px}
.lobby-card .player-profile{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.lobby-card .player-profile small{color:var(--muted-2);font-size:10px;font-weight:500}
.lobby-card .player-profile:hover{color:var(--blue)}
.lobby-card .tag{
  font-size:10px;color:var(--blue);border:1px solid var(--blue);border-radius:6px;
  padding:1px 5px;margin-left:4px;text-transform:uppercase;letter-spacing:.5px;
}
.lobby-card .stake{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:var(--green)}
.lobby-card .lb-meta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;border-radius:999px;padding:4px 11px;
  border:1px solid var(--border);color:var(--muted);background:var(--input);
}
.lobby-card .lb-meta::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--muted-2)}
.lobby-card .lb-meta[data-side="cara"]{color:#f3b23d;border-color:rgba(243,178,61,.5)}
.lobby-card .lb-meta[data-side="cara"]::before{background:#f3b23d;border-radius:50%}
.lobby-card .lb-meta[data-side="coroa"]{color:#a06bff;border-color:rgba(160,107,255,.5)}
.lobby-card .lb-meta[data-side="coroa"]::before{background:#a06bff;border-radius:2px;transform:rotate(45deg)}
.lobby-card .acts{display:flex;gap:8px;margin-left:auto}
.lobby-card button{
  border:none;border-radius:8px;padding:9px 16px;font-family:inherit;
  font-weight:600;font-size:13px;cursor:pointer;transition:.15s;
}
.lobby-card .lb-join{background:var(--blue);color:#fff}
.lobby-card .lb-join:hover{background:var(--blue-hover)}
.lobby-card .lb-join:disabled{opacity:.45;cursor:not-allowed}
.lobby-card .lb-bot{background:var(--tile);color:var(--text)}
.lobby-card .lb-bot:hover{background:var(--tile-hover)}
.lobby-card .lb-cancel{background:transparent;color:var(--muted);border:1px solid var(--border)}
.lobby-card .lb-cancel:hover{color:var(--red);border-color:var(--red)}

.lobby-wait{color:var(--muted-2);font-size:13px;margin-top:8px;padding-left:4px}
.lobby-wait.playing{font-size:14px;color:var(--muted)}
.lobby-empty{
  color:var(--muted-2);font-size:14px;border:1px dashed var(--border);border-radius:12px;
  padding:24px;text-align:center;grid-column:1 / -1;
}
.lobby-empty b{color:var(--muted)}

@media(max-width:760px){
  .lobby{padding:0 14px}
}