body{ background:var(--bg); color:var(--text); }

/* ================== LAYOUT GERAL ================== */

.lobby{ margin-top:14px; }
.lobby-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.lobby-title h1{ margin:0; font-size:22px; letter-spacing:.4px; }

.lobby-main{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:16px;
  margin-top:14px;
  align-items:start;
}
@media (max-width: 980px){
  .lobby-main{ grid-template-columns:1fr; }
}

/* ================== PLAYERS STRIP ================== */

.players-strip{
  margin-top:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
  display:flex;
  gap:12px;
  overflow-x:auto;
}

.player-chip{
  min-width:96px;
  max-width:110px;
  text-align:center;
}

.player-name{
  margin-top:8px;
  font-weight:700;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.status-badge{
  margin:6px auto 0;
  animation: tgPulse 1.15s ease-in-out infinite;
  display:inline-block;
  padding:4px 10px;
  border-radius:10px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.4px;
  line-height:1;
}

/* (keyframes tgPulse definido mais abaixo para reutilizar em botões/CTAs) */

.status-safe{ background:#1bbf52; color:#071b0e; }
.status-nom{ background:#e23b3b; color:#fff; }
.status-pov{ background:#1fb3c1; color:#062126; }
.status-imune{ background:linear-gradient(180deg, #ffe88a, #d7a700); color:#1b1300; }
.status-elimtribe{ background:linear-gradient(180deg, #ff6b6b, #c91f1f); color:#fff; }
.status-elim{ background:#6b6b6b; color:#fff; }
.status-lider{ background:#7c3aed; color:#fff; }

/* ================== AVATAR THUMB ================== */

.avatar-thumb{
  width:76px;
  height:126px;
  margin:0 auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}
.avatar-thumb:not(.tg-avatar-framed) img,
.avatar-thumb:not(.tg-avatar-framed) canvas{
  position:absolute;
  top:0; left:0;
  width:240px;
  height:470px;
  transform: scale(0.6632) translate(-60px, -10px);
  transform-origin: top left;
  pointer-events:none;
}

/* ================== MOBILE TUNING (LOBBY) ================== */
@media (max-width: 560px){
  .players-strip .avatar-thumb:not(.tg-avatar-framed) img,
  .players-strip .avatar-thumb:not(.tg-avatar-framed) canvas{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}



/* ================== TABS ================== */

.tabs{ display:flex; gap:10px; align-items:center; }
.tab{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:#fff;
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  position:relative;
}
.tab.active{ background:rgba(255,255,255,.10); }
.tab:disabled{ opacity:.5; cursor:not-allowed; }

/* ✅ bolinha notificação (2x maior + piscando cinza <-> gradiente) */
.notif-dot{
  width:16px;
  height:16px;
  border-radius:50%;
  display:none;
  position:relative;
  flex:0 0 auto;

  /* estado "cinza" */
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(140,140,140,.35));
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}

/* camada gradiente que pisca via opacity */
.notif-dot::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background: linear-gradient(90deg, rgba(255,200,0,.95), rgba(155,70,255,.95));
  box-shadow: 0 0 18px rgba(255,200,0,.30), 0 0 18px rgba(155,70,255,.18);
  opacity:0;
}

.notif-dot.on{
  display:inline-block;
  animation: tgDotPulse 1.15s infinite ease-in-out;
}

.notif-dot.on::before{
  animation: tgDotBlink 1.15s infinite ease-in-out;
}

/* leve "pulsada" */
@keyframes tgDotPulse{
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  50%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* pisca cinza <-> gradiente */
@keyframes tgDotBlink{
  0%   { opacity:0; }
  40%  { opacity:1; }
  60%  { opacity:1; }
  100% { opacity:0; }
}

/* ================== CHAT ================== */

.chat{
  margin-top:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
}

.chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.pager{ display:flex; align-items:center; gap:8px; }
.btn.tiny{ padding:6px 10px; border-radius:10px; }

/* ================== PM HEADER ================== */

.pm-head{ display:flex; align-items:center; gap:10px; max-width:100%; }
.pm-select{
  min-width: 240px;
  max-width: 340px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:#fff;
  outline:none;
}
.pm-select:focus{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

/* melhora legibilidade do dropdown (nem todo browser aplica, mas ajuda) */
.pm-select option{
  background:#0f0f14;
  color:#fff;
}

.messages{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#messages .message{
  display:flex;
  gap:12px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}

#messages .message .meta{
  display:flex;
  gap:10px;
  align-items:baseline;
  font-size:12px;
  opacity:.85;
  margin-bottom:6px;
}
#messages .message .meta .who{
  font-weight:700;
  letter-spacing:.2px;
  font-size:14px;
  opacity:1;
}
#messages .message .time{
  color:rgba(255,255,255,.65);
}
#messages .message .body{
  font-size:14px;
  line-height:1.35;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

/* avatar mini */
.avatar-mini{
  width:52px;
  height:52px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  flex:0 0 auto;
  position:relative;
}

/* chat avatar: sempre frame 12, menor no lado da mensagem */
.avatar-mini.tg-chat-avatar{
  width:44px;
  height:44px;
}
@media (max-width:560px){
  .avatar-mini.tg-chat-avatar{
    width:50px;
    height:50px;
  }
}
.avatar-mini:not(.tg-avatar-framed) img,
.avatar-mini:not(.tg-avatar-framed) canvas{
  position:absolute;
  top:0; left:0;
  width:240px;
  height:470px;
  /* Fallback antigo (apenas quando o frame não foi aplicado via JS) */
  transform: scale(0.325) translate(-40px, -42px);
  transform-origin: top left;
  pointer-events:none;
}

/* composer */
.composer{ margin-top:12px; display:flex; gap:8px; }
.composer input{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:#fff;
  outline:none;
}

/* ================== SYSTEM MESSAGE ================== */

#messages .message.system{
  position: relative;
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.045)) padding-box,
    linear-gradient(90deg, rgba(255,200,0,.95), rgba(155,70,255,.95)) border-box;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
#messages .message.system .meta,
#messages .message.system .body{
  /* Contraste: em fundos escuros o texto preto ficava ilegível */
  color:rgba(255,255,255,.92);
}
#messages .message.system .sys-block{ padding:2px 0; }
#messages .message.system .sys-top{
  font-size:15px;
  font-weight:800;
  letter-spacing:.2px;
}
#messages .message.system .sys-small{
  font-size:12px;
  opacity:.92;
  margin-top:6px;
}

/* ================== PANEL ================== */

.panel{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  padding:14px;
  min-height:260px;
}
.panel-title{ font-size:18px; font-weight:900; margin:0 0 6px; }
.panel-sub{ color:rgba(255,255,255,.75); font-size:13px; }

.panel-timer{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  border-radius:14px;
  padding:10px 12px;
}

.panel-actions{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ================== ROLETAS: PICKLIST BONITA (voto/indicar/dar ficha) ================== */

.panel-block{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  border-radius:16px;
  padding:12px;
}

.picklist{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:8px;
}
@media (max-width: 420px){
  .picklist{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.pick{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#fff;
  border-radius:12px;
  padding:10px 10px;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.pick:hover{
  background:rgba(255,255,255,.07);
}
.pick:active{
  transform: scale(.98);
}

.pick.selected{
  border:1px solid transparent;
  background:
    linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)) padding-box,
    linear-gradient(90deg, rgba(255,200,0,.95), rgba(155,70,255,.95)) border-box;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}

.btn.wide{
  width:100%;
}

/* CTA centralizada (ex.: FAZER DESAFIO) */
.btn.cta{
  max-width: 340px;
  margin: 0 auto;
  display:block;
}

/* Pulsação (usa também nas badges) */
.btn.pulse{
  animation: tgPulse 1.15s ease-in-out infinite;
}

@keyframes tgPulse{
  0%{ transform: scale(1); filter: brightness(1); }
  50%{ transform: scale(1.05); filter: brightness(1.08); }
  100%{ transform: scale(1); filter: brightness(1); }
}

/* ================== MENU DO JOGADOR (perfil / PM) ================== */

.player-menu{
  position:fixed;
  z-index:9999;
  min-width:220px;
  padding:8px;
  border-radius:14px;
  background:rgba(10,10,14,.92);
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  transform: translateY(8px);
}

.player-menu-item{
  width:100%;
  text-align:left;
  border:0;
  border-radius:10px;
  padding:10px 12px;
  font-weight:800;
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}

.player-menu-item + .player-menu-item{ margin-top:6px; }
.player-menu-item:hover{ background:rgba(255,255,255,.11); }

/* ================== ILHA: VOTAÇÃO (1 por linha + avatar) ================== */

.picklist.vote-picklist{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pick.vote-row{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:10px 12px;
}

.pick .pick-avatar{
  width:34px;
  height:34px;
  border-radius:10px;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  position:relative;
}

.pick .pick-avatar img{
  position:absolute;
  top:0; left:0;
  width:var(--tg-avatar-w);
  height:var(--tg-avatar-h);
  left:50%;
  transform:translateX(-50%) scale(0.072);
  transform-origin:top center;
  pointer-events:none;
}

.pick .pick-name{
  flex:1 1 auto;
  min-width:0;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ====== Extra status badges (Casa / futuro) ====== */
.status-prova {
  background: linear-gradient(180deg, rgba(80,160,255,0.95), rgba(30,90,170,0.95));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.status-veto {
  background: linear-gradient(180deg, rgba(200,120,255,0.95), rgba(120,60,200,0.95));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.status-vetada {
  background: linear-gradient(180deg, rgba(255,210,110,0.95), rgba(200,130,40,0.95));
  color: #1a1208;
  border: 1px solid rgba(0,0,0,0.15);
}
.status-stack { display:flex; flex-direction:column; gap:4px; align-items:center; }
.badge-jury {
  display:inline-block;
  font-weight:800;
  font-size:11px;
  padding:2px 8px;
  border-radius:999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color:#fff;
}


/* =========================
   ÍDOLO (Ilha) - Modal + Inventário
   ========================= */

.idol-modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
}

.idol-card{
  position: relative;
  width: min(560px, 92vw);
  border-radius: 18px;
  padding: 18px 18px 16px 18px;
  background: linear-gradient(180deg, rgba(24,24,24,.92), rgba(10,10,10,.95));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
  color: #fff;
}

.idol-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.idol-h{
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 14px;
  opacity: .95;
}

.idol-x{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  color:#fff;
  border-radius:12px;
  width:40px;
  height:40px;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
}

.idol-hint{
  opacity:.9;
  font-size: 13px;
  margin-bottom: 12px;
}

.idol-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.idol-tabs{ display:flex; gap:10px; margin-bottom: 10px; }
.idol-tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:#fff;
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.4px;
}
.idol-tab.on{
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.06);
}
.idol-spots{ display:grid; grid-template-columns: 1fr; gap:10px; }
.idol-spot{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:#fff;
  padding:12px 12px;
  border-radius:14px;
  cursor:pointer;
  text-align:left;
  font-weight:700;
}

/* Inventário (painel) */
.idol-inv-list{ display:flex; flex-direction:column; gap:10px; margin-top: 10px; }
.idol-inv-item{
  position: relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.idol-inv-item::before{
  content:'';
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 55%);
  pointer-events:none;
}
.idol-inv-item::after{
  content:'';
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 20%, var(--idol-accent, #ffffff), transparent 62%);
  opacity:.65;
  filter: blur(18px);
  pointer-events:none;
}
.idol-inv-icon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}
.idol-inv-icon::after{
  content:'';
  position:absolute;
  inset:-60%;
  background: radial-gradient(circle at 50% 50%, var(--idol-accent, rgba(255,255,255,.6)), transparent 60%);
  opacity:.55;
  filter: blur(18px);
  animation: idolPulse 1.8s ease-in-out infinite;
}
.idol-inv-img{
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
  position:relative;
  z-index:2;
}

.idol-inv-meta{ flex: 1; position:relative; z-index:2; }
.idol-chip{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset, 0 0 18px rgba(0,0,0,.18);
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 11px;
  margin: 0 6px;
}

/* quando o item define --idol-accent, usa a cor no chip */
.idol-inv-item .idol-chip{
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset, 0 0 22px rgba(0,0,0,.22), 0 0 24px color-mix(in srgb, var(--idol-accent, #fff) 35%, transparent);
}
.idol-sub{ opacity:.9; font-size: 12px; }

.btn.idol-use{ position:relative; z-index:2; }

/* Modal FOUND (imagem + texto, estilo da print) */
.idol-found-card{
  text-align:center;
  padding: 22px 22px 18px 22px;
}
.idol-found-imgwrap{
  position: relative;
  width: 220px;
  height: 150px;
  margin: 0 auto 12px auto;
  display:grid;
  place-items:center;
}
.idol-found-imgwrap::before{
  content:'';
  position:absolute;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, var(--idol-accent, #ffd700), transparent 64%);
  filter: blur(22px);
  opacity: .85;
  animation: idolPulse 1.6s ease-in-out infinite;
}
.idol-found-img{
  width: 120px;
  height: 120px;
  image-rendering: pixelated;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.55));
  position:relative;
  z-index:2;
}
.idol-found-chip{
  position:absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  font-weight: 900;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 11px;
  z-index:3;
}
.idol-found-title{
  font-weight: 1000;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-size: 16px;
  margin-top: 6px;
}
.idol-found-msg{
  opacity:.92;
  font-size: 13px;
  line-height: 1.45;
  margin: 10px auto 14px auto;
  max-width: 440px;
}
.btn.idol-found-ok{
  border-radius: 14px;
  padding: 12px 16px;
}

/* animação de pulso */
@keyframes idolPulse{
  0%{ transform: scale(.96); opacity:.55; }
  50%{ transform: scale(1.03); opacity:.95; }
  100%{ transform: scale(.96); opacity:.55; }
}

@media (min-width: 561px)
{
/* =====================================================
   AVATAR RENDER — HARDENING (GLOBAL)
   Motivo: regras genéricas de responsividade (ex.: width:100%, object-fit, transform:none)
   podem sobrescrever o crop do avatar (240x470) e causar o avatar “andar”/cortar no PC.
   Esta seção força o padrão correto dentro de .avatar-thumb em qualquer contexto.
   ===================================================== */

.avatar-thumb:not(.tg-avatar-framed) > img,
.avatar-thumb:not(.tg-avatar-framed) > canvas,
.avatar-thumb:not(.tg-avatar-framed) img.avatar,
.avatar-thumb:not(.tg-avatar-framed) canvas.avatar,
.avatar-thumb:not(.tg-avatar-framed) img#avatar,
.avatar-thumb:not(.tg-avatar-framed) canvas#avatar{
  width:240px !important;
  height:470px !important;
  max-width:none !important;
  max-height:none !important;
  min-width:240px !important;
  min-height:470px !important;
  object-fit:unset !important;
  image-rendering:auto;
}

/* Reaplica o crop padrão do lobby se algum CSS zerar transform */
.avatar-thumb:not(.tg-avatar-framed) > img,
.avatar-thumb:not(.tg-avatar-framed) > canvas{
  transform-origin: top left !important;
  transform: scale(0.6632) translate(-60px, -10px) !important;
}

}


.lobby-top-actions{ display:flex; align-items:center; gap:10px; }