/* ====== Casca ====== */
.lobby-shell{ padding:20px; }
.lobby-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.lobby-head .tags{ gap:10px; }
.linkchip{ background:var(--brand-50); border-color:var(--brand); color:var(--brand); }

/* ====== Barra de progresso (ocupação) ====== */
.progress{
  width:100%; height:12px; border-radius:999px;
  background:#f1f5f9; border:1px solid var(--line); overflow:hidden; margin:12px 0 10px;
}
.progress__bar{
  height:100%;
  background:linear-gradient(90deg, var(--brand), var(--brand-600));
  width:0%; transition:width .3s ease;
}

/* ====== Countdown ====== */
.countdown{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.countdown[hidden]{ display:none; }
.countdown__label{ color:var(--muted); }
.countdown__pill{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:28px; padding:0 10px; border-radius:999px;
  background:var(--brand-50); border:1px solid var(--line); color:var(--brand-700); font-weight:800;
}

/* ====== Lista de usuários ====== */
.users{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:12px; margin-top:12px;
}
.user{
  display:flex; gap:12px; align-items:center; padding:12px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.04); transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
}
.user:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.08); border-color:#dfe3ea; }
.user__avatar{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:800;
  background:#fff; border:1px solid var(--line); color:var(--brand-700);
}
.user__main{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.user__name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user__meta{ display:flex; gap:8px; align-items:center; color:var(--muted); font-size:.9rem; flex-wrap:wrap; }
.badge{ padding:2px 8px; border-radius:999px; border:1px solid var(--line); background:#fff; font-weight:600; font-size:.8rem; }

/* ====== Dicas ====== */
.tips{ display:grid; gap:8px; margin:16px 0 0; color:var(--muted); }
.tips__item{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  box-shadow:0 4px 16px rgba(0,0,0,.04);
}

/* ====== Toast ====== */
.toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:#ffffff; border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  color:var(--ink); padding:10px 14px; border-radius:12px;
}
.toast[hidden]{ display:none; }

/* ====== Skeleton ====== */
@keyframes pulse{0%{opacity:.85}50%{opacity:.45}100%{opacity:.85}}
.user--skeleton{ height:64px; animation:pulse 1.2s ease-in-out infinite }

/* ====== Responsivo ====== */
@media (max-width:600px){
  .users{ grid-template-columns:1fr; }
}

/* ====== Modal de Regras (visual alinhado ao global) ====== */
.modal{ position:fixed; inset:0; display:none; z-index:50; }
.modal.is-open{ display:block; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(17,24,39,.45); backdrop-filter: blur(4px); }
.modal__dialog{
  position:relative; z-index:51; width:min(680px, 92vw); max-height:85vh;
  margin:6vh auto; padding:0; border-radius:16px; border:1px solid var(--line); background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.45); display:flex; flex-direction:column; animation:modalIn .18s ease-out; outline:none;
}
@keyframes modalIn{ from{ transform:translateY(10px); opacity:.0 } to{ transform:translateY(0); opacity:1 } }
.modal__header{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.modal__title{ margin:0; font-size:18px; }
.modal__close{
  appearance:none; border:1px solid var(--line); background:#fff;
  border-radius:10px; padding:6px 10px; cursor:pointer;
}
.modal__close:hover{ filter:brightness(.97); }
.modal__content{ padding:14px 16px; overflow:auto; }
.modal__footer{ padding:12px 16px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.rules-list{ margin:0 0 10px 1.2rem; padding:0; line-height:1.5; }
.rules-note{ margin:10px 0 0; color:var(--muted); }
.rules-full{ margin-left:.5rem; text-decoration:underline; }
.no-scroll{ overflow:hidden; }