/* Yubly Live v2.1.0 — Claymorphism — identidade Yubly Hub v2.9.32 */
/* Fatia 1 do Item 1 do plano MVP: paleta roxa + véu roxo */

/* ── Reset isolado ────────────────────────────────────────────── */
#ylive-wrap,
#ylive-wrap *,
#ylive-wrap *::before,
#ylive-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Container principal — full width escapando do tema/Elementor ── */
/* Quando há imagem configurada via yubly_bg_url, ela é injetada como style inline
   e o gradient abaixo vira fallback. O véu roxo (::before) fica por cima dos dois. */
#ylive-wrap {
  background-color: #0d1f3c;
  background-image: linear-gradient(160deg, #0d1f3c 0%, #1a3a6b 60%, #0d2b5e 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
  color-scheme: light;
}

/* ── Véu roxo (assinatura visual do Hub v2.9.32) ──────────────── */
#ylive-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(80,20,140,.45), rgba(40,10,100,.35));
  pointer-events: none;
  z-index: 0;
}

/* Versão atenuada do véu — durante telas de jogo ativo, para não competir com a pergunta */
#ylive-wrap.ylive-jogo-ativo::before {
  background: linear-gradient(135deg, rgba(80,20,140,.18), rgba(40,10,100,.14));
}

/* Garantir que o conteúdo das telas fique acima do véu */
#ylive-wrap > * {
  position: relative;
  z-index: 1;
}

/* ── Isolamento total do tema ─────────────────────────────────── */
html:has(#ylive-wrap) {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}
body:has(#ylive-wrap) {
  margin: 0 !important;
  padding: 0 !important;
  background: #0d1f3c !important;
  overflow-x: hidden;
}

/* Admin bar */
body:has(#ylive-wrap) #wpadminbar { display: none !important; }
html:has(#ylive-wrap) { margin-top: 0 !important; }

/* Ocultar SOMENTE header e footer — não os containers pai do wrap */
body:has(#ylive-wrap) .site-header,
body:has(#ylive-wrap) .site-footer,
body:has(#ylive-wrap) .entry-header,
body:has(#ylive-wrap) .entry-footer,
body:has(#ylive-wrap) nav.main-navigation,
body:has(#ylive-wrap) .generate-back-to-top,
body:has(#ylive-wrap) .elementor-location-header,
body:has(#ylive-wrap) .elementor-location-footer {
  display: none !important;
}

/* Zerar padding e background dos containers do tema */
body:has(#ylive-wrap) main,
body:has(#ylive-wrap) #main,
body:has(#ylive-wrap) #primary,
body:has(#ylive-wrap) #page,
body:has(#ylive-wrap) .site,
body:has(#ylive-wrap) .inside-article,
body:has(#ylive-wrap) article,
body:has(#ylive-wrap) .entry-content,
body:has(#ylive-wrap) .elementor-section-wrap,
body:has(#ylive-wrap) .elementor-widget-container,
body:has(#ylive-wrap) .elementor-column-wrap,
body:has(#ylive-wrap) .elementor-widget-wrap,
body:has(#ylive-wrap) .e-con,
body:has(#ylive-wrap) .e-con-inner {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Telas ────────────────────────────────────────────────────── */
#ylive-wrap .ylive-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 40px 28px;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
#ylive-wrap .ylive-screen.ylive-active { display: flex; }

/* Telas de jogo — stretch full width dentro do wrap */
#ylive-wrap #ylive-s-sala,
#ylive-wrap #ylive-s-lider-jogo,
#ylive-wrap #ylive-s-question,
#ylive-wrap #ylive-s-ranking-inter {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 100%;
  width: 100%;
}
/* ylive-s-question — unificado no bloco acima */

/* ── Botão voltar ─────────────────────────────────────────────── */
#ylive-wrap .ylive-back-hub {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #dab8e8;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 8px 18px;
  cursor: pointer;
  transition: color .15s, background .15s;
  -webkit-appearance: none;
  align-self: flex-start;
}
#ylive-wrap .ylive-back-hub:hover { color: #ffffff; background: rgba(255,255,255,.16); }

/* ── Logo ─────────────────────────────────────────────────────── */
#ylive-wrap .ylive-logo {
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -1px;
  text-shadow: 0 4px 14px rgba(155,92,246,.5);
  text-align: center;
}
#ylive-wrap .ylive-logo-sub {
  font-size: 11px;
  font-weight: 700;
  color: #c8b6e8;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-align: center;
  margin-top: -4px;
}

/* ── Versículo ────────────────────────────────────────────────── */
#ylive-wrap .ylive-verse {
  background: rgba(30,15,60,.45);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 16px 20px;
  text-align: center;
  width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
#ylive-wrap .ylive-verse p  { font-size: 14px; color: #dab8e8; font-style: italic; line-height: 1.7; }
#ylive-wrap .ylive-verse small { font-size: 12px; color: #9B5CF6; margin-top: 6px; display: block; font-weight: 700; }

/* ── Input — fórmula visual do Yubly Hub v2.9.32 ──────────────── */
/* Fundo branco translúcido simulado via inset shadow (não usa background-color
   para preservar o border-radius perfeito). Texto roxo escuro sobre o branco.
   Inclui regras de autofill para evitar fundo amarelo do navegador. */
#ylive-wrap .ylive-input {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.35);
  background: transparent;
  font-size: 16px;
  color: #6D3FAF;
  outline: none;
  -webkit-appearance: none;
  box-shadow: inset 0 0 0 100px rgba(255,255,255,.70), inset 0 2px 4px rgba(0,0,0,.08);
  transition: border-color .15s, box-shadow .15s;
}
#ylive-wrap .ylive-input:-webkit-autofill,
#ylive-wrap .ylive-input:-webkit-autofill:hover,
#ylive-wrap .ylive-input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 100px rgba(255,255,255,.70) !important;
  -webkit-text-fill-color: #6D3FAF !important;
  caret-color: #6D3FAF;
}
#ylive-wrap .ylive-input::placeholder { color: #A78BCA; }
#ylive-wrap .ylive-input:focus {
  border-color: rgba(180,120,255,.7);
  box-shadow: inset 0 0 0 100px rgba(255,255,255,.70), inset 0 2px 4px rgba(0,0,0,.08), 0 0 0 3px rgba(140,80,255,.2);
}

/* ── Botões ───────────────────────────────────────────────────── */
#ylive-wrap .ylive-btn {
  display: block;
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  border: none;
  outline: none;
  -webkit-appearance: none;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  transition: transform .12s, box-shadow .12s;
}
#ylive-wrap .ylive-btn:active { transform: scale(.98); }
#ylive-wrap .ylive-btn-dark {
  background: linear-gradient(135deg, #9B5CF6, #6D28D9);
  box-shadow: 0 6px 20px rgba(155,92,246,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
#ylive-wrap .ylive-btn-dark:hover { box-shadow: 0 8px 28px rgba(155,92,246,.5), inset 0 1px 0 rgba(255,255,255,.2); transform: translateY(-1px); }
#ylive-wrap .ylive-btn-green {
  background: linear-gradient(135deg, #22C55E, #16A34A);
  box-shadow: 0 6px 20px rgba(34,197,94,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
#ylive-wrap .ylive-btn-green:hover { box-shadow: 0 8px 28px rgba(34,197,94,.6), inset 0 1px 0 rgba(255,255,255,.2); transform: translateY(-1px); }
#ylive-wrap .ylive-btn[style*="display:none"], #ylive-wrap .ylive-btn[style*="display: none"] { display: none !important; }

/* ── Pílula de sala ───────────────────────────────────────────── */
#ylive-wrap .ylive-sala-pill {
  background: rgba(155,92,246,.15);
  border: 1px solid rgba(155,92,246,.3);
  color: #dab8e8;
  border-radius: 20px;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 700;
}
#ylive-wrap .ylive-sala-pill strong { color: #fff; }

/* ── Top bar ──────────────────────────────────────────────────── */
#ylive-wrap .ylive-top-bar {
  background: rgba(0,0,0,.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.18);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#ylive-wrap .ylive-top-title { font-size: 19px; font-weight: 800; color: #fff; flex: 1; }
#ylive-wrap .ylive-top-sub   { font-size: 13px; color: #c8b6e8; margin-top: 3px; }
#ylive-wrap .ylive-top-sub strong { color: #dab8e8; }

/* Sprint Avatar — Fatia 5 (continuação): código da sala destacado no header.
   Mesma fonte/peso/tamanho de "Sala:" — apenas cor diferente para destacar. */
#ylive-wrap .ylive-top-codigo {
  color: #fbbf24;
}

/* Sprint Avatar — Fatia 5 (continuação): avatar mini do anfitrião na top-bar */
#ylive-wrap .ylive-host-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  transition: transform .15s ease;
  overflow: visible;
}
#ylive-wrap .ylive-host-avatar:hover { transform: scale(1.08); }
#ylive-wrap .ylive-host-avatar:active { transform: scale(.94); }
#ylive-wrap .ylive-host-avatar:empty {
  background: linear-gradient(135deg, rgba(155,92,246,.5), rgba(109,40,217,.5));
  border: 2px dashed rgba(255,255,255,.3);
}
#ylive-wrap .ylive-host-avatar > .yubly-avatar {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
/* Pequeno badge "editar" — lápis branco em fundo escuro contrastando com o avatar.
   Posicionado fora do círculo do avatar, no canto inferior direito. */
/* Pequeno badge "editar" — fundo branco com lápis cinza escuro,
   stroke-width leve (sem negrito), igual ao padrão do avatar grande do jogador. */
#ylive-wrap .ylive-host-avatar-edit {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 22px; height: 22px;
  background: #ffffff;
  border: 2px solid rgba(20,10,45,.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #374151;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
#ylive-wrap .ylive-host-avatar-edit svg {
  width: 11px; height: 11px;
  display: block;
}

/* ── Body ─────────────────────────────────────────────────────── */
#ylive-wrap .ylive-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}

/* ── Caixas ───────────────────────────────────────────────────── */
#ylive-wrap .ylive-link-box,
#ylive-wrap .ylive-players-box,
#ylive-wrap .ylive-lider-toggle-box {
  background: rgba(30,15,60,.45);
  border-radius: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.2);
}
#ylive-wrap .ylive-link-label,
#ylive-wrap .ylive-box-label {
  font-size: 11px; color: #c8b6e8; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px;
}
#ylive-wrap .ylive-link-url { font-size: 12px; color: #dab8e8; font-weight: 600; word-break: break-all; }

/* ── Ações de link ────────────────────────────────────────────── */
#ylive-wrap .ylive-link-actions { display: flex; gap: 8px; margin-top: 10px; }
#ylive-wrap .ylive-link-btn {
  flex: 1; padding: 10px; border-radius: 10px; font-size: 13px; font-weight: 700;
  cursor: pointer; border: none; -webkit-appearance: none;
  color: #fff !important; -webkit-text-fill-color: #fff;
  transition: opacity .15s, transform .1s;
}
#ylive-wrap .ylive-link-btn:active { transform: scale(.97); }
#ylive-wrap .ylive-copy  { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); }
#ylive-wrap .ylive-copy:hover { background: rgba(255,255,255,.2); }
#ylive-wrap .ylive-share { background: linear-gradient(135deg, #1d7a3e, #25d366); box-shadow: 0 4px 12px rgba(37,211,102,.3); }

/* ── Toggle ───────────────────────────────────────────────────── */
#ylive-wrap .ylive-lider-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#ylive-wrap .ylive-lider-toggle-label { font-size: 14px; font-weight: 700; color: #fff; }
#ylive-wrap .ylive-lider-toggle-hint { font-size: 11px; color: #c8b6e8; margin-top: 2px; }

/* Item 6: input de nome editável quando anfitrião participa como jogador */
#ylive-wrap .ylive-lider-name-row {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
}
#ylive-wrap .ylive-lider-name-input {
  width: 100%;
}
#ylive-wrap .ylive-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
#ylive-wrap .ylive-switch input { opacity: 0; width: 0; height: 0; }
#ylive-wrap .ylive-switch-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: rgba(255,255,255,.15); border-radius: 24px; transition: .25s;
  border: 1px solid rgba(255,255,255,.18);
}
#ylive-wrap .ylive-switch-slider:before {
  content: ''; position: absolute; height: 18px; width: 18px;
  left: 2px; bottom: 2px; background: #fff; border-radius: 50%;
  transition: .25s; box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
#ylive-wrap .ylive-switch input:checked + .ylive-switch-slider {
  background: linear-gradient(135deg, #9B5CF6, #6D28D9);
  border-color: transparent; box-shadow: 0 4px 12px rgba(155,92,246,.4);
}
#ylive-wrap .ylive-switch input:checked + .ylive-switch-slider:before { transform: translateX(20px); }

/* ── Jogadores ────────────────────────────────────────────────── */
#ylive-wrap .ylive-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;          /* mais respiro vertical */
  border-bottom: 1px solid rgba(255,255,255,.06);
  animation: ylive-fi .3s ease;
  min-height: 56px;         /* altura suficiente para .p-info + botão respirarem */
}
#ylive-wrap .ylive-player-row:last-child { border-bottom: none; }

/* Item 10: container do nome/status — flex: 1 para empurrar o kick para a direita. */
#ylive-wrap .ylive-p-info {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

/* Item 10: botão de kick (X) — vermelho sólido para chamar atenção como ação destrutiva.
   Antes era translúcido demais, ficava apagado no fundo escuro do lobby.
   Agora: fundo vermelho mais cheio + ícone branco + borda vermelha clara. */
#ylive-wrap .ylive-p-kick {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(220,38,38,.32);
  border: 1px solid rgba(220,38,38,.6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
  padding: 0;
  font-family: inherit;
}
#ylive-wrap .ylive-p-kick:hover {
  background: rgba(220,38,38,.5);
  border-color: rgba(220,38,38,.85);
  color: #fff;
  transform: scale(1.1);
}
#ylive-wrap .ylive-p-kick:active { transform: scale(.92); }
/* SVG inline tem vertical-align baseline por padrão, criando offset perceptível
   no centro do botão circular. Forçar display:block remove esse offset. */
#ylive-wrap .ylive-p-kick svg { display: block; }

/* Linha do anfitrião (lider-row) — sem botão de kick */
#ylive-wrap .ylive-lider-row .ylive-p-kick { display: none; }
#ylive-wrap .ylive-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #9B5CF6, #6D28D9);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(155,92,246,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
#ylive-wrap .ylive-lider-row .ylive-avatar {
  background: linear-gradient(135deg, #1d6b3e, #0f4a2a);
  box-shadow: 0 4px 12px rgba(29,107,62,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
#ylive-wrap .ylive-p-nm  { font-size: 14px; color: #fff; font-weight: 600; }
#ylive-wrap .ylive-p-ok  { font-size: 11px; color: #c8b6e8; margin-top: 1px; }

/* ── Jogador inativo no lobby (sem ping > 60s) ── */
#ylive-wrap .ylive-player-row.ylive-p-inactive .ylive-avatar {
  background: #555 !important;
  box-shadow: none !important;
  opacity: .6;
}
#ylive-wrap .ylive-player-row.ylive-p-inactive .ylive-p-nm {
  color: #888;
  text-decoration: line-through;
}
#ylive-wrap .ylive-player-row.ylive-p-inactive .ylive-p-ok {
  color: #e57373;
}
#ylive-wrap .ylive-waiting-txt {
  font-size: 13px; color: rgba(255,255,255,.3); font-style: italic;
  text-align: center; padding: 12px 0;
}

/* ── Dots ─────────────────────────────────────────────────────── */
#ylive-wrap .ylive-dots { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
#ylive-wrap .ylive-dots span {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #ffffff; animation: ylive-dot 1.2s infinite;
  box-shadow: 0 0 6px rgba(255,255,255,.5);
}
#ylive-wrap .ylive-dots span:nth-child(2) { animation-delay: .2s; }
#ylive-wrap .ylive-dots span:nth-child(3) { animation-delay: .4s; }

/* ── Espera ───────────────────────────────────────────────────── */
#ylive-wrap .ylive-wait-name {
  font-size: 26px; font-weight: 800; color: #fff; text-align: center;
  text-shadow: 0 4px 12px rgba(155,92,246,.3);
}
#ylive-wrap .ylive-wait-msg { font-size: 15px; color: #c8b6e8; text-align: center; line-height: 1.6; }

/* ── Header pergunta ──────────────────────────────────────────── */
#ylive-wrap .ylive-q-header {
  background: rgba(0,0,0,.3); backdrop-filter: blur(10px);
  padding: 13px 20px; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
#ylive-wrap .ylive-q-num   { font-size: 13px; color: #c8b6e8; font-weight: 600; }
#ylive-wrap .ylive-q-score { font-size: 15px; font-weight: 800; color: #fff; }

/* ── Timer ────────────────────────────────────────────────────── */
#ylive-wrap .ylive-tbar-wrap { height: 5px; background: rgba(255,255,255,.1); }
#ylive-wrap .ylive-tbar {
  height: 5px; background: linear-gradient(90deg, #ffffff, #f0e7ff);
  width: 100%; transition: width 1s linear; box-shadow: 0 0 8px rgba(255,255,255,.7);
}
#ylive-wrap .ylive-tnum {
  text-align: center; font-size: 56px; font-weight: 900; color: #fff;
  padding: 8px 0 4px;
  text-shadow:
    0 0 24px rgba(0,0,0,.7),
    0 0 14px rgba(0,0,0,.6),
    0 4px 12px rgba(0,0,0,.5);
  letter-spacing: -2px;
}

/* ── Dificuldade ──────────────────────────────────────────────── */
#ylive-wrap .ylive-dif-row { text-align: center; padding: 4px 14px; }
#ylive-wrap .ylive-dif-badge {
  font-size: 10px; font-weight: 800; padding: 3px 12px;
  border-radius: 20px; display: inline-block; text-transform: uppercase; letter-spacing: .06em;
}
#ylive-wrap .ylive-dif-facil   { background: rgba(29,107,62,.2);   color: #86efac; border: 1px solid rgba(29,107,62,.3); }
#ylive-wrap .ylive-dif-media   { background: rgba(234,179,8,.15);  color: #fde68a; border: 1px solid rgba(234,179,8,.25); }
#ylive-wrap .ylive-dif-dificil { background: rgba(239,68,68,.15);  color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }

/* ── Top-bar com badges lado a lado (telas de pergunta) ────────
   Usado em ylive-s-question e ylive-s-lider-jogo.
   Centraliza os dois badges (Pergunta X de 10 + Dificuldade)
   em vez de jogar um em cada extremo. */
#ylive-wrap .ylive-top-bar-q {
  justify-content: center;
  gap: 10px;
}

/* Badge "Pergunta X de 10" — segue o mesmo padrão visual dos badges
   de dificuldade (fundo translúcido + texto da família + borda sutil),
   mas em rosa-violeta para diferenciar como informação contextual. */
#ylive-wrap .ylive-q-pill {
  font-size: 13px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 20px;
  background: rgba(199,125,216,.18);
  color: #e9b8f0;
  border: 1px solid rgba(199,125,216,.3);
  display: inline-block;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* Dificuldade dentro do top-bar-q — mesmo tamanho do q-pill */
#ylive-wrap .ylive-top-bar-q .ylive-dif-badge {
  font-size: 13px;
  font-weight: 800;
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .04em;
}

/* ── Texto da pergunta ────────────────────────────────────────── */
#ylive-wrap .ylive-qtext {
  margin: 8px 14px 12px; padding: 20px 18px; font-size: 18px; color: #fff;
  text-align: center; line-height: 1.5; background: rgba(30,15,60,.45);
  border-radius: 18px; border: 1px solid rgba(255,255,255,.18); min-height: 90px;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.2);
}

/* ── Opções ───────────────────────────────────────────────────── */
#ylive-wrap .ylive-opts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0;
  margin-top: 8px;
}
#ylive-wrap .ylive-opt {
  padding: 12px 8px; border-radius: 14px; font-size: 17px; font-weight: 800;
  color: #fff !important; -webkit-text-fill-color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  min-height: clamp(80px, 42vw, 150px);
  user-select: none; transition: transform .1s, opacity .2s;
  box-shadow: 0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
#ylive-wrap .ylive-opt:active { transform: scale(.95); }
#ylive-wrap .ylive-shape { font-size: 18px; }
#ylive-wrap .ylive-a { background: linear-gradient(145deg, #e8394a, #b91c2c); }
#ylive-wrap .ylive-b { background: linear-gradient(145deg, #2563b0, #1a4a8a); }
#ylive-wrap .ylive-c { background: linear-gradient(145deg, #e65100, #bf360c); }
#ylive-wrap .ylive-d { background: linear-gradient(145deg, #1d6b3e, #0f4a2a); }
#ylive-wrap .ylive-opt.ylive-correct {
  outline: 3px solid rgba(255,255,255,.8); outline-offset: -3px;
  filter: brightness(1.2); box-shadow: 0 0 24px rgba(255,255,255,.3), 0 6px 16px rgba(0,0,0,.3);
}
#ylive-wrap .ylive-opt.ylive-wrong   { opacity: .2; }
#ylive-wrap .ylive-opt.ylive-blocked { pointer-events: none; }

/* ── Barra inferior jogador ───────────────────────────────────── */
#ylive-wrap .ylive-pbar {
  background: rgba(0,0,0,.3); backdrop-filter: blur(10px);
  padding: 11px 20px; display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(255,255,255,.18); margin-top: auto;
}
#ylive-wrap .ylive-pname { font-size: 13px; color: #c8b6e8; }
#ylive-wrap .ylive-ppts  { font-size: 14px; font-weight: 800; color: #fff; }

/* ── Feedback ─────────────────────────────────────────────────── */
#ylive-wrap .ylive-fb-icon { font-size: 72px; text-align: center; }
#ylive-wrap .ylive-fb-res  { font-size: 28px; font-weight: 900; color: #fff; text-align: center; text-shadow: 0 4px 12px rgba(0,0,0,.3); }
#ylive-wrap .ylive-fb-pts  {
  font-size: 52px; font-weight: 900; color: #ffffff; text-align: center;
  text-shadow:
    0 0 24px rgba(0,0,0,.7),
    0 0 14px rgba(0,0,0,.6),
    0 4px 12px rgba(0,0,0,.5);
  letter-spacing: -2px;
}
#ylive-wrap .ylive-fb-ref  {
  font-size: 13px; color: #dab8e8; font-style: italic;
  background: rgba(30,15,60,.45); border: 1px solid rgba(255,255,255,.18);
  padding: 10px 16px; border-radius: 12px; text-align: center; width: 100%;
}
#ylive-wrap .ylive-fb-tot    { font-size: 16px; color: #c8b6e8; text-align: center; }
#ylive-wrap .ylive-fb-podio  {
  font-size: 18px; font-weight: 800; color: #fff; text-align: center;
  background: rgba(155,92,246,.25); border: 1px solid rgba(155,92,246,.55);
  border-radius: 14px; padding: 12px 20px; width: 100%; animation: ylive-pop .4s ease;
  box-shadow: 0 0 0 1px rgba(155,92,246,.25), 0 0 12px rgba(155,92,246,.2);
}

/* ── Painel líder ─────────────────────────────────────────────── */
#ylive-wrap .ylive-lider-qtext {
  font-size: 24px; font-weight: 700; color: #fff; text-align: center;
  line-height: 1.4; background: rgba(30,15,60,.45);
  border: 1px solid rgba(255,255,255,.18); border-radius: 16px;
  padding: 20px; width: 100%; box-sizing: border-box;
  box-shadow: 0 0 40px rgba(155,92,246,.45), 0 0 12px rgba(155,92,246,.25), inset 0 1px 0 rgba(255,255,255,.1);
}
#ylive-wrap .ylive-lider-timer-row { display: flex; align-items: center; gap: 10px; }
#ylive-wrap .ylive-lider-timer-row .ylive-tbar-wrap { flex: 1; border-radius: 4px; overflow: hidden; }
#ylive-wrap .ylive-tnum-sm { font-size: 28px; font-weight: 900; color: #fff; min-width: 38px; text-align: right; }
#ylive-wrap .ylive-resp-pill {
  text-align: center; font-size: 14px; color: #ffffff;
  background: rgba(30,15,60,.45); border-radius: 10px;
  padding: 8px 16px; border: 1px solid rgba(255,255,255,.18);
}
#ylive-wrap .ylive-resp-pill span { font-size: 18px; font-weight: 800; color: #fff; }

/* ── Ranking ao vivo ──────────────────────────────────────────── */
#ylive-wrap .ylive-lider-ranking { display: flex; flex-direction: column; gap: 6px; flex: 1; }
#ylive-wrap .ylive-lr-item {
  display: flex; align-items: center; gap: 8px;
  background: rgba(30,15,60,.45); border-radius: 12px; padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
#ylive-wrap .ylive-lr-pos   { font-size: 16px; min-width: 26px; text-align: center; }
#ylive-wrap .ylive-lr-name  { flex: 1; font-size: 14px; color: #fff; font-weight: 600; }
#ylive-wrap .ylive-lr-score { font-size: 14px; font-weight: 800; color: #ffffff; }

/* ── Ranking entre perguntas ──────────────────────────────────── */
#ylive-wrap .ylive-inter-ranking { display: flex; flex-direction: column; gap: 8px; width: 100%; flex: 1; }
#ylive-wrap .ylive-ir-item {
  display: flex; align-items: center; gap: 10px;
  background: rgba(30,15,60,.45); border-radius: 14px; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), background .3s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#ylive-wrap .ylive-ir-item.ylive-ir-up,
#ylive-wrap .ylive-lr-item.ylive-ir-up   { background: rgba(29,107,62,.45);  border-color: rgba(29,107,62,.5); }
#ylive-wrap .ylive-ir-item.ylive-ir-down,
#ylive-wrap .ylive-lr-item.ylive-ir-down { background: rgba(239,68,68,.45); border-color: rgba(239,68,68,.5); }
#ylive-wrap .ylive-ir-pos   { font-size: 22px; min-width: 34px; text-align: center; }
#ylive-wrap .ylive-ir-name  { flex: 1; font-size: 15px; color: #fff; font-weight: 600; }
#ylive-wrap .ylive-ir-score { font-size: 15px; font-weight: 800; color: #ffffff; }
#ylive-wrap .ylive-ir-delta,
#ylive-wrap .ylive-lr-delta { font-size: 13px; font-weight: 800; min-width: 24px; text-align: right; }
#ylive-wrap .ylive-ir-delta.up,
#ylive-wrap .ylive-lr-delta.up   { color: #86efac; }
#ylive-wrap .ylive-ir-delta.down,
#ylive-wrap .ylive-lr-delta.down { color: #fca5a5; }
#ylive-wrap .ylive-inter-next { text-align: center; font-size: 15px; color: #c8b6e8; padding: 8px 0; }
#ylive-wrap .ylive-inter-next strong { color: #fff; font-size: 18px; }
#ylive-wrap .ylive-inter-podio {
  font-size: 18px; font-weight: 800; color: #fff; text-align: center;
  background: rgba(155,92,246,.25); border: 1px solid rgba(155,92,246,.55);
  border-radius: 14px; padding: 12px 20px; margin-bottom: 10px; animation: ylive-pop .4s ease;
  box-shadow: 0 0 0 1px rgba(155,92,246,.25), 0 0 12px rgba(155,92,246,.2);
}

/* ── Ranking final ────────────────────────────────────────────── */
#ylive-wrap .ylive-rank-title {
  font-size: 26px; font-weight: 900; color: #fff; text-align: center;
  text-shadow: 0 4px 14px rgba(155,92,246,.4);
}
#ylive-wrap #ylive-rank-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
#ylive-wrap .ylive-rank-item {
  display: flex; align-items: center; gap: 12px;
  background: rgba(30,15,60,.45); border-radius: 14px; padding: 13px 15px;
  border: 1px solid rgba(255,255,255,.18); width: 100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#ylive-wrap .ylive-rank-me {
  border: 1px solid rgba(155,92,246,.6); background: rgba(30,15,60,.45);
  box-shadow: 0 0 0 1px rgba(155,92,246,.35), 0 0 16px rgba(155,92,246,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
#ylive-wrap .ylive-rank-pos { font-size: 24px; min-width: 32px; text-align: center; }
#ylive-wrap .ylive-rank-nm  {
  flex: 1; font-size: 15px; color: #fff; font-weight: 600;
  /* Item 5: truncate para abrir espaço para a coluna de acertos */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Item 5: coluna de acertos no ranking final */
#ylive-wrap .ylive-rank-hits {
  font-size: 13px;
  font-weight: 700;
  color: #c8b6e8;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}
#ylive-wrap .ylive-rank-pt  { font-size: 15px; font-weight: 800; color: #ffffff; flex-shrink: 0; }
#ylive-wrap .ylive-rank-end { text-align: center; padding: 8px; width: 100%; }
#ylive-wrap .ylive-rank-end p     { font-size: 14px; color: #c8b6e8; font-style: italic; }
#ylive-wrap .ylive-rank-end small { font-size: 12px; color: #9B5CF6; font-weight: 700; }
#ylive-wrap .ylive-rank-meu-resultado {
  background: rgba(30,15,60,.45); border: 1px solid rgba(155,92,246,.6);
  border-radius: 18px; padding: 20px; text-align: center; width: 100%; margin-bottom: 4px;
  box-shadow: 0 0 0 1px rgba(155,92,246,.35), 0 8px 24px rgba(155,92,246,.3), inset 0 1px 0 rgba(255,255,255,.12);
}
#ylive-wrap .ylive-rank-meu-resultado .ylive-meu-pos   { font-size: 52px; }
#ylive-wrap .ylive-rank-meu-resultado .ylive-meu-nome  { font-size: 20px; font-weight: 800; color: #fff; margin-top: 4px; }
#ylive-wrap .ylive-rank-meu-resultado .ylive-meu-pts   {
  font-size: 34px; font-weight: 900; color: #ffffff; margin-top: 2px;
  text-shadow:
    0 0 18px rgba(0,0,0,.7),
    0 0 10px rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.4);
}
/* Item 5: linha de acertos no card pessoal */
#ylive-wrap .ylive-rank-meu-resultado .ylive-meu-hits {
  font-size: 14px; font-weight: 700; color: #d4c5e8; margin-top: 4px;
}

/* ── Botões líder-jogador ─────────────────────────────────────── */
#ylive-wrap .ylive-lider-resp-label {
  font-size: 11px; font-weight: 800; color: #c8b6e8;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
#ylive-wrap .ylive-lider-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
#ylive-wrap .ylive-lider-opt {
  padding: 12px 8px; border-radius: 14px; font-size: 17px; font-weight: 800;
  color: #fff !important; -webkit-text-fill-color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  min-height: clamp(80px, 42vw, 150px);
  user-select: none; transition: transform .1s, opacity .2s;
  box-shadow: 0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
#ylive-wrap .ylive-lider-opt:active { transform: scale(.96); }
#ylive-wrap .ylive-lider-opt.ylive-lider-blocked { pointer-events: none; }
#ylive-wrap .ylive-lider-opt.ylive-correct { outline: 3px solid rgba(255,255,255,.7); outline-offset: -3px; filter: brightness(1.2); }
#ylive-wrap .ylive-lider-opt.ylive-wrong  { opacity: .2; }
#ylive-wrap .ylive-lider-feedback {
  font-size: 13px; font-weight: 700; text-align: center;
  padding: 8px 12px; border-radius: 10px; margin-top: 6px;
}
#ylive-wrap .ylive-lider-feedback.correto { background: rgba(29,107,62,.2);  color: #86efac; border: 1px solid rgba(29,107,62,.3); }
#ylive-wrap .ylive-lider-feedback.errou   { background: rgba(239,68,68,.15); color: #fca5a5; border: 1px solid rgba(239,68,68,.25); }

/* ── Animações ────────────────────────────────────────────────── */
@keyframes ylive-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40%           { transform: translateY(-5px); opacity: 1; }
}
@keyframes ylive-fi {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ylive-pop {
  0%  { transform: scale(.85); opacity: 0; }
  70% { transform: scale(1.05); }
  100%{ transform: scale(1); opacity: 1; }
}


/* ── QR Code protagonista ─────────────────────────────────────── */
#ylive-wrap .ylive-qr-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(30,15,60,.45);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 20px;
  padding: 20px 16px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
#ylive-wrap .ylive-qr-box {
  width: 200px;
  height: 200px;
  background: #fff;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
#ylive-wrap .ylive-qr-box img { display: block; }
#ylive-wrap .ylive-qr-label {
  margin-top: 12px;
  font-size: 15px;
  color: #dab8e8;
  font-weight: 600;
  letter-spacing: .04em;
}
#ylive-wrap .ylive-qr-label strong {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .14em;
}
#ylive-wrap .ylive-share-row {
  display: flex;
  gap: 10px;
  width: 100%;
}
#ylive-wrap .ylive-share-row .ylive-link-btn {
  flex: 1;
}

/* ── Layout unificado das telas de pergunta ──────────────────── */

/* Timer unificado — número grande + barra */
#ylive-wrap .ylive-unified-timer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}
#ylive-wrap .ylive-tnum-big {
  font-size: 42px;
  font-weight: 900;
  color: #fff;
  min-width: 52px;
  text-align: center;
  line-height: 1;
  text-shadow:
    0 0 20px rgba(0,0,0,.7),
    0 0 12px rgba(0,0,0,.6),
    0 2px 8px rgba(0,0,0,.5);
}
#ylive-wrap .ylive-unified-timer .ylive-tbar-wrap {
  flex: 1;
}

/* Dificuldade com label */
#ylive-wrap .ylive-dif-label {
  font-size: 12px;
  font-weight: 600;
  color: #c8b6e8;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ylive-s-question agora usa top-bar + body como o anfitrião */
/* Texto da pergunta — jogador (ylive-qtext dentro de body) */
#ylive-wrap #ylive-s-question .ylive-qtext {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  background: rgba(30,15,60,.45);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 20px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 0 40px rgba(155,92,246,.45), 0 0 12px rgba(155,92,246,.25), inset 0 1px 0 rgba(255,255,255,.1);
}

/* Formas geométricas ocultas — no contexto de grupo pequeno o texto é suficiente */
#ylive-wrap .ylive-shape,
#ylive-wrap .ylive-lider-opt .ylive-shape {
  display: none;
}
/* ══════════════════════════════════════════════════════════════
   YUBLY LIVE — DESKTOP RESPONSIVO
   v2.0.7 — adicionado sobre a base v2.0.6
   ══════════════════════════════════════════════════════════════ */

/* ── Full width no desktop ───────────────────────────────────── */
@media (min-width: 501px) {
  #ylive-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Telas centralizadas — max 480px */
  #ylive-wrap .ylive-screen {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 24px;
  }

  /* Telas full width — conteúdo centralizado internamente */
  #ylive-wrap #ylive-s-sala,
  #ylive-wrap #ylive-s-lider-jogo,
  #ylive-wrap #ylive-s-question,
  #ylive-wrap #ylive-s-ranking-inter {
    max-width: 100%;
    width: 100%;
    padding: 0;
    align-self: stretch;
  }

  /* Limita conteúdo interno das telas full no desktop */
  #ylive-wrap #ylive-s-sala .ylive-top-bar,
  #ylive-wrap #ylive-s-sala .ylive-body,
  #ylive-wrap #ylive-s-lider-jogo .ylive-top-bar,
  #ylive-wrap #ylive-s-lider-jogo .ylive-body,
  #ylive-wrap #ylive-s-question .ylive-top-bar,
  #ylive-wrap #ylive-s-question .ylive-body,
  #ylive-wrap #ylive-s-ranking-inter .ylive-top-bar,
  #ylive-wrap #ylive-s-ranking-inter .ylive-body {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

    /* ylive-s-question — alinhamento via ylive-body acima */
}

/* ── Tablet (768px) ──────────────────────────────────────────── */
@media (min-width: 768px) {
  #ylive-wrap .ylive-screen {
    max-width: 540px;
    padding: 40px 32px;
  }

  /* ylive-s-question 768 — alinhamento via ylive-body acima */

  #ylive-wrap #ylive-s-sala .ylive-top-bar,
  #ylive-wrap #ylive-s-sala .ylive-body,
  #ylive-wrap #ylive-s-lider-jogo .ylive-top-bar,
  #ylive-wrap #ylive-s-lider-jogo .ylive-body,
  #ylive-wrap #ylive-s-question .ylive-top-bar,
  #ylive-wrap #ylive-s-question .ylive-body,
  #ylive-wrap #ylive-s-ranking-inter .ylive-top-bar,
  #ylive-wrap #ylive-s-ranking-inter .ylive-body {
    max-width: 600px;
  }

  #ylive-wrap .ylive-qtext {
    font-size: 20px;
  }
}

/* ── Tela de loading — preparando pergunta ───────────────────── */
#ylive-wrap #ylive-s-loading {
  justify-content: center;
  gap: 12px;
}
/* Spinner CSS — bolinhas em círculo matemático perfeito */
#ylive-wrap .ylive-loading-spinner {
  position: relative;
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
}
#ylive-wrap .ylive-loading-spinner .ylive-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255,255,255,.6);
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -5px;
  animation: ylive-dot-fade 1.2s linear infinite;
  transform-origin: 5px 33px;
}
#ylive-wrap .ylive-loading-spinner .ylive-dot:nth-child(1) { transform: rotate(0deg);   animation-delay: 0s;     }
#ylive-wrap .ylive-loading-spinner .ylive-dot:nth-child(2) { transform: rotate(45deg);  animation-delay: -1.05s; }
#ylive-wrap .ylive-loading-spinner .ylive-dot:nth-child(3) { transform: rotate(90deg);  animation-delay: -0.9s;  }
#ylive-wrap .ylive-loading-spinner .ylive-dot:nth-child(4) { transform: rotate(135deg); animation-delay: -0.75s; }
#ylive-wrap .ylive-loading-spinner .ylive-dot:nth-child(5) { transform: rotate(180deg); animation-delay: -0.6s;  }
#ylive-wrap .ylive-loading-spinner .ylive-dot:nth-child(6) { transform: rotate(225deg); animation-delay: -0.45s; }
#ylive-wrap .ylive-loading-spinner .ylive-dot:nth-child(7) { transform: rotate(270deg); animation-delay: -0.3s;  }
#ylive-wrap .ylive-loading-spinner .ylive-dot:nth-child(8) { transform: rotate(315deg); animation-delay: -0.15s; }
@keyframes ylive-dot-fade {
  0%   { opacity: 1;    }
  100% { opacity: 0.15; }
}
#ylive-wrap .ylive-loading-title {
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  letter-spacing: .02em;
  text-shadow:
    0 0 18px rgba(0,0,0,.7),
    0 0 10px rgba(0,0,0,.5),
    0 2px 8px rgba(0,0,0,.4);
}
#ylive-wrap .ylive-loading-sub {
  font-size: 16px;
  font-weight: 700;
  color: #c8b6e8;
  text-align: center;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Feedback — redesign ─────────────────────────────────────── */

/* Ícone de erro — X vermelho CSS */
#ylive-wrap #ylive-fb-icon.ylive-fb-wrong-icon {
  font-size: 0;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(220,38,38,.2);
  border: 3px solid #dc2626;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
  position: relative;
}
#ylive-wrap #ylive-fb-icon.ylive-fb-wrong-icon::before,
#ylive-wrap #ylive-fb-icon.ylive-fb-wrong-icon::after {
  content: '';
  position: absolute;
  width: 36px; height: 4px;
  background: #dc2626;
  border-radius: 2px;
}
#ylive-wrap #ylive-fb-icon.ylive-fb-wrong-icon::before { transform: rotate(45deg);  }
#ylive-wrap #ylive-fb-icon.ylive-fb-wrong-icon::after  { transform: rotate(-45deg); }

/* Ícone de acerto — emoji grande */
#ylive-wrap #ylive-fb-icon.ylive-fb-correct-icon {
  font-size: 64px;
  text-align: center;
  line-height: 1;
  animation: ylive-pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ylive-pop {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}

/* Contador ao vivo — destaque */
#ylive-wrap .ylive-fb-wait {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(30,15,60,.45);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 10px 20px;
  width: 100%;
}
#ylive-wrap .ylive-fb-wait-label {
  font-size: 13px;
  color: rgba(255,255,255,.6);
}
#ylive-wrap .ylive-fb-wait-nums {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}

/* Ocultar referência bíblica no feedback quando vazia */
#ylive-wrap #ylive-fb-ref:empty { display: none; }

/* Espaço entre PERGUNTA X DE 10 e ranking parcial */
#ylive-wrap #ylive-loading-top3 { margin-top: 24px; }

/* ── Desktop: ajuste de espaçamento nas telas de jogo ───────── */
@media (min-width: 600px) {
  #ylive-wrap #ylive-s-lider-jogo .ylive-body,
  #ylive-wrap #ylive-s-question .ylive-body {
    gap: 8px;
  }
  #ylive-wrap #ylive-s-lider-jogo .ylive-unified-timer,
  #ylive-wrap #ylive-s-question .ylive-unified-timer {
    margin-top: 4px;
  }
  #ylive-wrap .ylive-lider-opts,
  #ylive-wrap .ylive-opts {
    margin-top: 4px;
  }
}

/* Subtítulo do Yubly Live — tela de entrada do jogador */
#ylive-wrap .ylive-logo-sub {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: -8px;
}

/* Versículos removidos — ocultar se ainda existirem */
#ylive-wrap .ylive-verse { display: none !important; }

/* ── Home — 4 blocos espaçados ─────────────────────────────── */
/* ── Home — duas zonas dentro do container ───────────────────── */

/* Tela: ocupa a viewport inteira, sem padding extra */
#ylive-wrap #ylive-s-home {
  justify-content: center;
  padding: 0;
  gap: 0;
}

/* Container principal: limita a 480px, ocupa a altura da viewport */
#ylive-wrap #ylive-s-home .ylive-home-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  padding: 0 28px;
}

/* Zona 1 — topo: altura fixa, botão alinhado à esquerda */
#ylive-wrap #ylive-s-home .ylive-home-top {
  padding: 16px 0;
  flex-shrink: 0;
}

/* Zona 2 — corpo: ocupa o restante, centraliza conteúdo */
#ylive-wrap #ylive-s-home .ylive-home-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-bottom: 40px;
}

/* Botão Hub dentro da zona topo */
#ylive-wrap #ylive-s-home .ylive-back-hub {
  position: static;
}

/* Desktop: logo mantém o tamanho do mobile, ajusta apenas o botão */
@media (min-width: 501px) {
  #ylive-wrap .ylive-home-logo {
    width: 240px;
    height: auto;
    margin-bottom: -48px;
  }
  #ylive-wrap .ylive-btn-primary-lg {
    max-width: 100%;
  }
}
/* Bloco 1 — Logo */
/* IMPORTANTE: width fixo + height auto para respeitar a proporção natural
   do PNG carregado pelo admin. Forçar aspect-ratio 1/1 cria espaço vazio
   no quadrado quando a imagem original não é quadrada.
   margin-bottom negativo compensa o padding transparente embutido no PNG —
   permite que a tagline "encoste" no desenho real, não no bounding box do arquivo. */
#ylive-wrap .ylive-home-logo {
  width: 240px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(180,100,255,.6)) drop-shadow(0 4px 32px rgba(155,92,246,.5));
  margin-bottom: -48px;
  display: block;
}
/* Bloco 2 — Tagline colada no logo, com mesma fórmula visual do Hub */
#ylive-wrap .ylive-home-titulo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 44px;
}
#ylive-wrap .ylive-home-titulo-wrap .ylive-logo {
  margin: 0;
}
#ylive-wrap .ylive-home-sub {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 0 0 12px rgba(160,100,255,.5), 0 1px 3px rgba(0,0,0,.3);
  margin: 0;
}
/* Bloco 3 — Descrição com espaço proporcional antes do botão */
#ylive-wrap .ylive-home-desc {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  text-align: center;
  line-height: 1.6;
  max-width: 280px;
  margin: 0 auto 52px;
}
/* Bloco 4 — Botão */
#ylive-wrap .ylive-btn-primary-lg {
  background: linear-gradient(135deg, #22C55E, #16A34A);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  padding: 16px 40px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  width: 100%;
  box-shadow: 0 6px 24px rgba(34,197,94,.45);
  transition: transform .1s, box-shadow .1s;
  letter-spacing: .02em;
}
#ylive-wrap .ylive-btn-primary-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(34,197,94,.6);
}
#ylive-wrap .ylive-btn-primary-lg:active { transform: scale(.97); }

/* ── Loading no botão — portado do Yubly Hub v2.9.32 ──────────── */
/* Aplica ao clicar em "Criar sala", "Iniciar Quiz" ou "Entrar na sala".
   Esconde o texto e desenha um spinner girando no centro do botão.
   Bloqueia cliques duplos enquanto a requisição AJAX está em voo. */
@keyframes ylive-spin {
  to { transform: rotate(360deg); }
}
#ylive-wrap .ylive-btn.ylive-btn-loading,
#ylive-wrap .ylive-btn-primary-lg.ylive-btn-loading {
  opacity: .85;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
#ylive-wrap .ylive-btn.ylive-btn-loading::after,
#ylive-wrap .ylive-btn-primary-lg.ylive-btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ylive-spin 650ms linear infinite;
}

/* ── Tela de aguardando — sala de espera ────────────────────── */
#ylive-wrap #ylive-s-aguardando {
  padding: 0;
}
#ylive-wrap .ylive-aguard-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  padding: 40px 24px;
  gap: 0;
}
#ylive-wrap .ylive-aguard-nome {
  font-size: 36px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  letter-spacing: -.5px;
  margin-bottom: 20px;
}
#ylive-wrap .ylive-aguard-status {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  text-align: center;
  margin-bottom: 4px;
}
#ylive-wrap .ylive-aguard-msg {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  text-align: center;
  margin-bottom: 32px;
}
#ylive-wrap .ylive-aguard-counter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(30,15,60,.45);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 16px 24px;
  width: 100%;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 24px;
}
#ylive-wrap .ylive-aguard-counter-icon {
  font-size: 20px;
}
#ylive-wrap .ylive-aguard-counter-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,.6);
}

/* ── Botão encerrar ─────────────────────────────────────────── */
#ylive-wrap .ylive-btn-encerrar {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  color: #fca5a5;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
  transition: background .15s;
}
#ylive-wrap .ylive-btn-encerrar:hover {
  background: rgba(239,68,68,.25);
}

/* Item 3: botão warning para modal de voltar ao lobby
   Estilo similar ao encerrar mas em laranja (alerta sem ser destrutivo). */
#ylive-wrap .ylive-btn-warning {
  background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.4);
  color: #fbbf24;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 14px;
  cursor: pointer;
  width: 100%;
  transition: background .15s, border-color .15s, color .15s;
}
#ylive-wrap .ylive-btn-warning:hover {
  background: rgba(245,158,11,.32);
  border-color: rgba(245,158,11,.6);
  color: #fff;
}

/* Ações do jogador no ranking — dois botões empilhados */
#ylive-wrap #ylive-rank-jogador-acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

/* ── Tela de despedida ──────────────────────────────────────── */
#ylive-wrap .ylive-despedida-icon {
  font-size: 48px;
  margin-bottom: 20px;
}
#ylive-wrap .ylive-despedida-titulo {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  margin-bottom: 12px;
}
#ylive-wrap .ylive-despedida-msg {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  text-align: center;
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto 32px;
}

/* ── Tela de desconexão (Fase 6) ────────────────────────────── */
#ylive-wrap .ylive-kicked-icon {
  font-size: 48px;
  margin-bottom: 20px;
}
#ylive-wrap .ylive-kicked-titulo {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
  margin-bottom: 8px;
}
#ylive-wrap .ylive-kicked-msg {
  font-size: 15px;
  color: rgba(255,255,255,.65);
  text-align: center;
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto 20px;
}
#ylive-wrap .ylive-kicked-status {
  font-size: 14px;
  color: rgba(255,255,255,.4);
  text-align: center;
  margin-bottom: 28px;
}

/* ── QR layout 3 colunas ────────────────────────────────────── */
#ylive-wrap .ylive-qr-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
#ylive-wrap .ylive-qr-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#ylive-wrap .ylive-qr-side {
  width: 48px;
  flex-shrink: 0;
}
#ylive-wrap .ylive-qr-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#ylive-wrap .ylive-icon-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
  padding: 0;
}
#ylive-wrap .ylive-icon-btn:hover {
  background: rgba(255,255,255,.2);
}
#ylive-wrap .ylive-icon-btn svg {
  width: 22px;
  height: 22px;
  color: rgba(255,255,255,.85);
  stroke: rgba(255,255,255,.85);
}

/* ── Emoji pensativo — erro ─────────────────────────────────── */
#ylive-wrap #ylive-fb-icon.ylive-fb-pensativo {
  font-size: 64px;
  text-align: center;
  line-height: 1;
  display: block;
  animation: ylive-balanço .6s cubic-bezier(.36,.07,.19,.97) both;
  transform-origin: bottom center;
}
@keyframes ylive-balanço {
  0%   { transform: scale(0) rotate(-10deg); }
  40%  { transform: scale(1.15) rotate(8deg); }
  60%  { transform: scale(0.95) rotate(-5deg); }
  80%  { transform: scale(1.05) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── Palminhas subindo — ranking final ──────────────────────── */
#ylive-wrap .ylive-palmas-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}
#ylive-wrap .ylive-palma {
  position: absolute;
  bottom: -60px;
  animation: ylive-sobe-palma 2.2s ease-out forwards;
  opacity: 0;
  user-select: none;
}
@keyframes ylive-sobe-palma {
  0%   { transform: translateY(0) scale(.8);   opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: .9; }
  100% { transform: translateY(-110vh) scale(1.1); opacity: 0; }
}

/* ── QR Code na tela do jogador ─────────────────────────────── */
#ylive-wrap .ylive-jogador-qr-wrap {
  width: 100%;
  margin-bottom: 16px;
}
#ylive-wrap .ylive-jogador-qr-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(30,15,60,.45);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 16px;
}
#ylive-wrap .ylive-jogador-qr-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#ylive-wrap .ylive-qr-box-sm {
  width: 182px !important;
  height: 182px !important;
  border-radius: 0px !important;
}
#ylive-wrap .ylive-qr-label-sm {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  font-weight: 600;
  letter-spacing: .08em;
}
#ylive-wrap .ylive-qr-label-sm strong {
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .12em;
}

/* ── QR label na sala de espera ─────────────────────────────── */
#ylive-wrap .ylive-aguard-qr-label {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: .03em;
}

/* ── Label QR Code ─────────────────────────────────────────── */
#ylive-wrap .ylive-qr-scan-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.5);
  text-align: center;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

/* ══════════════════════════════════════════════════════════════
   Yubly Live — Animações coreografadas de entrada
   Fatia 4 do Item 1 do plano MVP. Portado do Yubly Hub v2.9.32.
   Aplicadas só em telas grandes (home, jogador, sala, aguardando,
   ranking, despedida, kicked). NÃO aplicadas nas telas de fluxo
   rápido entre perguntas (loading, question, feedback, ranking-inter).
   ══════════════════════════════════════════════════════════════ */

@keyframes ylive-logo-in {
  from { opacity: 0; transform: scale(.75); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ylive-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ylive-slide-down {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {

  /* ── Home ─────────────────────────────────────────────────── */
  #ylive-wrap #ylive-s-home.ylive-active .ylive-back-hub {
    animation: ylive-slide-down 380ms cubic-bezier(.25,.8,.25,1) both;
  }
  #ylive-wrap #ylive-s-home.ylive-active .ylive-home-logo {
    animation: ylive-logo-in 420ms cubic-bezier(.34,1.4,.64,1) both;
    animation-delay: 80ms;
  }
  #ylive-wrap #ylive-s-home.ylive-active .ylive-home-titulo-wrap {
    animation: ylive-fade-up 320ms ease-out both;
    animation-delay: 220ms;
  }
  #ylive-wrap #ylive-s-home.ylive-active .ylive-home-desc {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 320ms;
  }
  #ylive-wrap #ylive-s-home.ylive-active .ylive-btn-primary-lg {
    animation: ylive-fade-up 320ms ease-out both;
    animation-delay: 420ms;
  }

  /* ── Jogador (entrada via link) ───────────────────────────── */
  #ylive-wrap #ylive-s-jogador.ylive-active .ylive-logo {
    animation: ylive-logo-in 420ms cubic-bezier(.34,1.4,.64,1) both;
  }
  #ylive-wrap #ylive-s-jogador.ylive-active .ylive-logo-sub {
    animation: ylive-fade-up 280ms ease-out both;
    animation-delay: 140ms;
  }
  #ylive-wrap #ylive-s-jogador.ylive-active .ylive-jogador-qr-wrap {
    animation: ylive-fade-up 320ms ease-out both;
    animation-delay: 220ms;
  }
  #ylive-wrap #ylive-s-jogador.ylive-active .ylive-input {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 320ms;
  }
  #ylive-wrap #ylive-s-jogador.ylive-active #ylive-btn-entrar {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 420ms;
  }

  /* ── Sala do anfitrião (lobby) ────────────────────────────── */
  #ylive-wrap #ylive-s-sala.ylive-active .ylive-top-bar {
    animation: ylive-slide-down 380ms cubic-bezier(.25,.8,.25,1) both;
  }
  #ylive-wrap #ylive-s-sala.ylive-active .ylive-qr-hero {
    animation: ylive-fade-up 320ms ease-out both;
    animation-delay: 200ms;
  }
  #ylive-wrap #ylive-s-sala.ylive-active .ylive-lider-toggle-box {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 320ms;
  }
  #ylive-wrap #ylive-s-sala.ylive-active .ylive-players-box {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 420ms;
  }
  #ylive-wrap #ylive-s-sala.ylive-active #ylive-btn-iniciar {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 520ms;
  }

  /* ── Lobby do jogador (aguardando) ────────────────────────── */
  #ylive-wrap #ylive-s-aguardando.ylive-active .ylive-aguard-nome {
    animation: ylive-fade-up 360ms cubic-bezier(.34,1.4,.64,1) both;
  }
  #ylive-wrap #ylive-s-aguardando.ylive-active .ylive-aguard-status {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 160ms;
  }
  #ylive-wrap #ylive-s-aguardando.ylive-active .ylive-aguard-msg {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 260ms;
  }
  #ylive-wrap #ylive-s-aguardando.ylive-active .ylive-aguard-counter {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 380ms;
  }

  /* ── Ranking final ────────────────────────────────────────── */
  #ylive-wrap #ylive-s-ranking.ylive-active .ylive-rank-title {
    animation: ylive-slide-down 420ms cubic-bezier(.25,.8,.25,1) both;
  }
  #ylive-wrap #ylive-s-ranking.ylive-active #ylive-rank-list {
    animation: ylive-fade-up 360ms ease-out both;
    animation-delay: 220ms;
  }
  #ylive-wrap #ylive-s-ranking.ylive-active .ylive-rank-end {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 380ms;
  }
  #ylive-wrap #ylive-s-ranking.ylive-active #ylive-btn-jogar-novamente,
  #ylive-wrap #ylive-s-ranking.ylive-active #ylive-btn-encerrar-sala,
  #ylive-wrap #ylive-s-ranking.ylive-active #ylive-rank-jogador-acoes,
  #ylive-wrap #ylive-s-ranking.ylive-active #ylive-ranking-aguarde {
    animation: ylive-fade-up 320ms ease-out both;
    animation-delay: 480ms;
  }

  /* ── Despedida ────────────────────────────────────────────── */
  #ylive-wrap #ylive-s-despedida.ylive-active .ylive-despedida-icon {
    animation: ylive-logo-in 420ms cubic-bezier(.34,1.4,.64,1) both;
  }
  #ylive-wrap #ylive-s-despedida.ylive-active .ylive-despedida-titulo {
    animation: ylive-fade-up 320ms ease-out both;
    animation-delay: 200ms;
  }
  #ylive-wrap #ylive-s-despedida.ylive-active .ylive-despedida-msg {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 320ms;
  }
  #ylive-wrap #ylive-s-despedida.ylive-active #ylive-btn-despedida-hub {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 440ms;
  }

  /* ── Tela de queda de conexão (kicked / aguardando reentrada) ─ */
  #ylive-wrap #ylive-s-kicked.ylive-active .ylive-kicked-icon {
    animation: ylive-logo-in 420ms cubic-bezier(.34,1.4,.64,1) both;
  }
  #ylive-wrap #ylive-s-kicked.ylive-active .ylive-kicked-titulo {
    animation: ylive-fade-up 320ms ease-out both;
    animation-delay: 200ms;
  }
  #ylive-wrap #ylive-s-kicked.ylive-active .ylive-kicked-msg {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 320ms;
  }
  #ylive-wrap #ylive-s-kicked.ylive-active .ylive-kicked-status {
    animation: ylive-fade-up 300ms ease-out both;
    animation-delay: 440ms;
  }
}

/* ══════════════════════════════════════════════════════════════
   Yubly Live — Fase de leitura (Item 2 do plano MVP)
   Abordagem leve: durante os primeiros 4s da pergunta, esconde
   as opções e mostra "Leia atentamente. 3, 2, 1, VAI!" no lugar.
   Tudo controlado pela classe .ylive-q-in-reading no #ylive-s-question.
   ══════════════════════════════════════════════════════════════ */

/* Estado padrão: bloco de leitura escondido, opções visíveis */
#ylive-wrap .ylive-reading-block {
  display: none !important;
}

/* Quando a fase de leitura está ativa na tela do JOGADOR: */
#ylive-wrap #ylive-s-question.ylive-q-in-reading .ylive-opts {
  display: none !important;
}
#ylive-wrap #ylive-s-question.ylive-q-in-reading .ylive-reading-block {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 16px 16px;
  margin-top: 4px;
}

/* Mesma lógica para a tela do ANFITRIÃO-JOGADOR: */
#ylive-wrap #ylive-s-lider-jogo.ylive-q-in-reading #ylive-lider-resp-area {
  display: none !important;
}
#ylive-wrap #ylive-s-lider-jogo.ylive-q-in-reading .ylive-reading-block {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 16px 16px;
  margin-top: 4px;
}

/* Mensagem "Leia a pergunta atentamente" */
#ylive-wrap .ylive-reading-msg {
  font-size: 14px;
  font-weight: 700;
  color: #c8b6e8;
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Número grande do countdown (3, 2, 1) e o "VAI!" */
#ylive-wrap .ylive-reading-num {
  font-size: 96px;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  line-height: 1;
  letter-spacing: -3px;
  text-shadow:
    0 0 28px rgba(0,0,0,.8),
    0 0 16px rgba(0,0,0,.6),
    0 4px 14px rgba(0,0,0,.5);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estado especial "VALENDO!" — mesmo visual dos números (branco + halo
   escuro), só diferenciado pelo tamanho de fonte por ter mais letras. */
#ylive-wrap .ylive-reading-num.ylive-reading-go {
  font-size: 56px;
  letter-spacing: 1px;
}

/* Animação de pulse a cada troca de número — JS força re-trigger */
@keyframes ylive-reading-pulse {
  0%   { transform: scale(.6); opacity: 0; }
  50%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
#ylive-wrap .ylive-reading-num.ylive-reading-trigger {
  animation: ylive-reading-pulse 0.45s cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════════════════════════════════════════════════════
   Item 2 — Animação cascata das opções na saída da fase de leitura
   Quando o overlay sai, cada opção entra com fade + slide pequeno,
   uma após a outra. Total: ~400ms para todas aparecerem.
   ══════════════════════════════════════════════════════════════ */

@keyframes ylive-opt-cascade-in {
  0%   { opacity: 0; transform: translateY(12px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Trigger: animação só dispara quando a tela perde a classe de leitura.
   Para reativar a cada nova pergunta, JS força re-trigger removendo e
   adicionando a classe `ylive-opt-cascade-on` quando passa de reading
   para playing. */
#ylive-wrap #ylive-s-question.ylive-opt-cascade-on .ylive-opt {
  animation: ylive-opt-cascade-in .35s cubic-bezier(.34,1.36,.64,1) both;
}
#ylive-wrap #ylive-s-question.ylive-opt-cascade-on .ylive-opt:nth-child(1) { animation-delay: 0ms;   }
#ylive-wrap #ylive-s-question.ylive-opt-cascade-on .ylive-opt:nth-child(2) { animation-delay: 80ms;  }
#ylive-wrap #ylive-s-question.ylive-opt-cascade-on .ylive-opt:nth-child(3) { animation-delay: 160ms; }
#ylive-wrap #ylive-s-question.ylive-opt-cascade-on .ylive-opt:nth-child(4) { animation-delay: 240ms; }

/* Mesma animação para anfitrião-jogador */
#ylive-wrap #ylive-s-lider-jogo.ylive-opt-cascade-on .ylive-lider-opt {
  animation: ylive-opt-cascade-in .35s cubic-bezier(.34,1.36,.64,1) both;
}
#ylive-wrap #ylive-s-lider-jogo.ylive-opt-cascade-on .ylive-lider-opt:nth-child(1) { animation-delay: 0ms;   }
#ylive-wrap #ylive-s-lider-jogo.ylive-opt-cascade-on .ylive-lider-opt:nth-child(2) { animation-delay: 80ms;  }
#ylive-wrap #ylive-s-lider-jogo.ylive-opt-cascade-on .ylive-lider-opt:nth-child(3) { animation-delay: 160ms; }
#ylive-wrap #ylive-s-lider-jogo.ylive-opt-cascade-on .ylive-lider-opt:nth-child(4) { animation-delay: 240ms; }

/* ══════════════════════════════════════════════════════════════
   Item 3 — Painel de Moderação (cápsula incluindo FAB)
   Estrutura: container fixo no canto inferior direito.
   Direita fixa, esquerda cresce quando aberto.
   Fundo translúcido aparece com a expansão, criando sensação
   de "cápsula abrindo".
   FAB mantém identidade própria (gradient roxo cheio) dentro.
   ══════════════════════════════════════════════════════════════ */

#ylive-wrap .ylive-mod-container {
  position: fixed;
  right: 16px;
  bottom: 20px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;  /* alinha tudo à direita — FAB fica fixo */
  gap: 0;                     /* gap controlado por margin nos botões */
  padding: 0;
  border-radius: 28px;        /* metade da altura — pill */
  background: transparent;
  border: 1px solid transparent;
  z-index: 9000;
  transition: padding .25s cubic-bezier(.34,1.56,.64,1),
              gap .25s cubic-bezier(.34,1.56,.64,1),
              background .25s ease-out,
              border-color .25s ease-out,
              box-shadow .25s ease-out;
  animation: ylive-fab-in .35s cubic-bezier(.34,1.56,.64,1);
}

/* Quando aberto: cápsula ganha fundo, padding e os botões aparecem */
#ylive-wrap .ylive-mod-container.ylive-mod-open {
  padding: 0 6px 0 12px;
  gap: 8px;
  background: rgba(30,15,60,.85);
  border-color: rgba(155,92,246,.4);
  box-shadow:
    0 8px 28px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── FAB (botão joystick) — mantém identidade própria ── */
#ylive-wrap .ylive-fab-mod {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9B5CF6, #6D28D9);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(109,40,217,.5),
    0 0 0 1px rgba(155,92,246,.4),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .15s, box-shadow .15s;
  flex-shrink: 0;
  padding: 0;
}
#ylive-wrap .ylive-fab-mod:hover {
  transform: scale(1.05);
}
#ylive-wrap .ylive-fab-mod:active {
  transform: scale(.94);
}

@keyframes ylive-fab-in {
  0%   { opacity: 0; transform: scale(.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Botões secundários (pause, encerrar) ── */
/* Estado fechado: width 0, sem opacity, sem padding — invisíveis */
#ylive-wrap .ylive-mod-btn {
  width: 0;
  height: 44px;
  border-radius: 50%;
  background: rgba(40,20,80,.7);
  border: 1px solid rgba(155,92,246,.35);
  color: #c8a8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: width .25s cubic-bezier(.34,1.56,.64,1),
              opacity .2s ease-out,
              background .15s,
              border-color .15s,
              color .15s,
              transform .12s;
}
/* Estado aberto: width volta para 44px, fica clicável */
#ylive-wrap .ylive-mod-container.ylive-mod-open .ylive-mod-btn {
  width: 44px;
  opacity: 1;
  pointer-events: auto;
}
#ylive-wrap .ylive-mod-btn:hover {
  background: rgba(60,30,110,.85);
  border-color: rgba(155,92,246,.6);
  color: #fff;
  transform: scale(1.06);
}
#ylive-wrap .ylive-mod-btn:active { transform: scale(.92); }

/* Variante destrutiva — encerrar partida */
#ylive-wrap .ylive-mod-btn-danger {
  border-color: rgba(220,38,38,.5);
  color: #f87171;
}
#ylive-wrap .ylive-mod-btn-danger:hover {
  background: rgba(80,20,30,.85);
  border-color: rgba(220,38,38,.7);
  color: #fff;
}

/* Variante warning — voltar ao lobby (laranja/amarelo de alerta sem ser destrutivo) */
#ylive-wrap .ylive-mod-btn-warning {
  border-color: rgba(245,158,11,.5);
  color: #fbbf24;
}
#ylive-wrap .ylive-mod-btn-warning:hover {
  background: rgba(80,50,10,.85);
  border-color: rgba(245,158,11,.7);
  color: #fff;
}

/* Cascata de entrada dos botões — direita pra esquerda (mais perto do FAB primeiro) */
#ylive-wrap .ylive-mod-container.ylive-mod-open .ylive-mod-btn:nth-child(1) {
  transition-delay: .18s;    /* mais à esquerda — vem por último */
}
#ylive-wrap .ylive-mod-container.ylive-mod-open .ylive-mod-btn:nth-child(2) {
  transition-delay: .12s;
}
#ylive-wrap .ylive-mod-container.ylive-mod-open .ylive-mod-btn:nth-child(3) {
  transition-delay: .06s;
}
#ylive-wrap .ylive-mod-container.ylive-mod-open .ylive-mod-btn:nth-child(4) {
  transition-delay: .02s;    /* mais perto do FAB — vem primeiro */
}

/* ══════════════════════════════════════════════════════════════
   Modal de confirmação — encerrar partida
   Coerente com a paleta do app (roxo + dark + glow)
   ══════════════════════════════════════════════════════════════ */
#ylive-wrap .ylive-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 9300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: ylive-fade-in .2s ease-out;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#ylive-wrap .ylive-confirm-box {
  background: linear-gradient(180deg, #1e0d3d, #14082d);
  border: 1px solid rgba(155,92,246,.4);
  border-radius: 20px;
  padding: 28px 24px 22px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 16px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(155,92,246,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation: ylive-confirm-pop .35s cubic-bezier(.34,1.56,.64,1);
}
#ylive-wrap .ylive-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(220,38,38,.18);
  border: 1px solid rgba(220,38,38,.4);
  color: #f87171;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
#ylive-wrap .ylive-confirm-title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 22px;
  letter-spacing: .01em;
}
#ylive-wrap .ylive-confirm-text {
  font-size: 14px;
  color: #c8b6e8;
  line-height: 1.5;
  margin-bottom: 20px;
}
#ylive-wrap .ylive-confirm-actions {
  display: flex;
  gap: 10px;
}
#ylive-wrap .ylive-confirm-actions .ylive-btn {
  flex: 1;
}

/* Variante neutra (cinza) — usada no botão Cancelar do modal de confirmação.
   Diferencia visualmente da ação destrutiva (vermelho cheio).
   Hierarquia: ação destrutiva = vermelho preenchido, escape = neutro discreto. */
#ylive-wrap .ylive-btn-neutral {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: #d4c5e8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
#ylive-wrap .ylive-btn-neutral:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
  color: #fff;
  transform: translateY(-1px);
}

@keyframes ylive-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes ylive-confirm-pop {
  0%   { opacity: 0; transform: scale(.85); }
  100% { opacity: 1; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════
   Item 3 — Overlay de pausa
   Tela translúcida sobre o jogo quando o anfitrião pausa.
   Visível para todos (anfitrião + jogadores).
   ══════════════════════════════════════════════════════════════ */
#ylive-wrap .ylive-pause-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,5,25,.82);
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  animation: ylive-fade-in .25s ease-out;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#ylive-wrap .ylive-pause-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: ylive-pause-pop .4s cubic-bezier(.34,1.56,.64,1);
}
#ylive-wrap .ylive-pause-icon {
  color: #c8a8f0;
  filter: drop-shadow(0 4px 24px rgba(155,92,246,.5));
  animation: ylive-pause-pulse 1.8s ease-in-out infinite;
}
#ylive-wrap .ylive-pause-title {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.5px;
  text-shadow:
    0 0 24px rgba(0,0,0,.6),
    0 4px 14px rgba(0,0,0,.5);
}
#ylive-wrap .ylive-pause-sub {
  font-size: 14px;
  color: #c8b6e8;
  font-weight: 500;
}
@keyframes ylive-pause-pop {
  0%   { opacity: 0; transform: scale(.85); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ylive-pause-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .65; transform: scale(.94); }
}

/* ══════════════════════════════════════════════════════════════
   Item 11 — Botão de saída do jogador (X no topo direito)
   Discreto, dentro de bolinha laranja (warning). Só para jogador.
   ══════════════════════════════════════════════════════════════ */
#ylive-wrap .ylive-player-exit {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(245,158,11,.18);
  border: 1px solid rgba(245,158,11,.4);
  color: #fbbf24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 8800;
  font-family: inherit;
  padding: 0;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
  animation: ylive-fab-in .35s cubic-bezier(.34,1.56,.64,1);
}
#ylive-wrap .ylive-player-exit:hover {
  background: rgba(245,158,11,.32);
  border-color: rgba(245,158,11,.6);
  color: #fff;
  transform: scale(1.06);
}
#ylive-wrap .ylive-player-exit:active { transform: scale(.92); }

/* ══════════════════════════════════════════════════════════════
   Item 9 do Sprint 2 — Modal de Configurações
   Caixa maior que confirm-box (mais largura, slider + toggle).
   Slider customizado de 5 pontos.
   ══════════════════════════════════════════════════════════════ */
#ylive-wrap .ylive-config-box {
  background: linear-gradient(180deg, #1e0d3d, #14082d);
  border: 1px solid rgba(155,92,246,.4);
  border-radius: 20px;
  padding: 26px 24px 22px;
  max-width: 440px;
  width: 100%;
  box-shadow:
    0 16px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(155,92,246,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
  animation: ylive-confirm-pop .35s cubic-bezier(.34,1.56,.64,1);
}

#ylive-wrap .ylive-config-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 22px;
  text-align: center;
  letter-spacing: .01em;
}

/* Item 9 — Cada configuração agrupada em uma "caixinha" (card).
   Fundo levemente mais escuro que o modal, borda sutil, padding interno.
   Padrão de mercado (iOS/Android settings) — agrupa visualmente campos
   relacionados e escala bem quando novas configs forem adicionadas. */
#ylive-wrap .ylive-config-card {
  background: rgba(20,8,45,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 16px 16px;
  margin-bottom: 14px;
}
#ylive-wrap .ylive-config-card:last-of-type {
  margin-bottom: 22px;
}

#ylive-wrap .ylive-config-card-label {
  font-size: 11px;
  font-weight: 700;
  color: #c8b6e8;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ── Slider de dificuldade ── */
#ylive-wrap .ylive-config-slider {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px 6px;
  user-select: none;
}
#ylive-wrap .ylive-config-slider-track {
  position: absolute;
  left: 4px;
  right: 4px;
  top: calc(50% + 3px);
  height: 3px;
  background: rgba(255,255,255,.14);
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}
#ylive-wrap .ylive-config-slider-dot {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.22);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
  z-index: 1;
}
#ylive-wrap .ylive-config-slider-dot:hover {
  transform: scale(1.18);
  border-color: rgba(155,92,246,.6);
}
#ylive-wrap .ylive-config-slider-dot.ylive-active {
  width: 22px;
  height: 22px;
  background: #fff;
  border-color: #9B5CF6;
  box-shadow:
    0 0 0 4px rgba(155,92,246,.25),
    0 0 16px rgba(155,92,246,.6),
    0 4px 10px rgba(0,0,0,.4);
}
#ylive-wrap .ylive-config-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #c8b6e8;
  margin-top: 8px;
  font-weight: 600;
}

/* ── Toggle de som dentro do card ── */
#ylive-wrap .ylive-config-sound-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 0;
}
#ylive-wrap .ylive-config-sound-text {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   Item 4 — Pílulas de jogadores no lobby do jogador comum
   Mostra quem mais está na sala. Cria sensação de "turma esperando".
   Wrap natural: em sala muito grande, vira múltiplas linhas sem rolagem.
   ══════════════════════════════════════════════════════════════ */
#ylive-wrap .ylive-aguard-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  /* margin-top negativa "come" parte do margin-bottom do .ylive-aguard-counter (24px),
     deixando ~18px efetivos no topo, equivalentes ao espaçamento abaixo. */
  margin: -6px 0 18px;
  max-width: 100%;
}

#ylive-wrap .ylive-aguard-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 8px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #d4c5e8;
  white-space: nowrap;
  animation: ylive-pill-in .35s cubic-bezier(.34,1.4,.64,1) both;
}

/* Ícone de silhueta de pessoa em cada pílula — comunica "ser humano na sala" */
#ylive-wrap .ylive-aguard-pill svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  display: block;
  color: #c8b6e8;
}

/* Pílula do anfitrião — fundo roxo + ícone dourado para destaque */
#ylive-wrap .ylive-aguard-pill-host {
  background: rgba(155,92,246,.18);
  border-color: rgba(155,92,246,.38);
  color: #fff;
}
#ylive-wrap .ylive-aguard-pill-host svg {
  color: #fbbf24;
}

/* Pílula do próprio jogador — fundo verde sutil + ícone branco */
#ylive-wrap .ylive-aguard-pill-self {
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.38);
  color: #fff;
}
#ylive-wrap .ylive-aguard-pill-self svg {
  color: #fff;
}

@keyframes ylive-pill-in {
  0%   { opacity: 0; transform: scale(.7) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ════════════════════════════════════════════════════════════════
   Sprint Avatar — Fatia 5
   Avatar grande clicável no lobby do jogador + modal de seleção
   ════════════════════════════════════════════════════════════════ */

/* Avatar do jogador no lobby — grande, centralizado, clicável */
#ylive-wrap .ylive-aguard-avatar {
  display: block;
  margin: 0 auto 16px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  /* Tamanho controlado via inline style pelo JS quando renderizar.
     Default: 120px. Mobile: 100px. */
  width: 120px;
  height: 120px;
  transition: transform .18s cubic-bezier(.34,1.4,.64,1);
}
#ylive-wrap .ylive-aguard-avatar:hover { transform: scale(1.06); }
#ylive-wrap .ylive-aguard-avatar:active { transform: scale(.95); }
#ylive-wrap .ylive-aguard-avatar:empty {
  /* Fallback enquanto o avatar não carrega — bolinha cinza neutra */
  background: linear-gradient(135deg, rgba(155,92,246,.3), rgba(109,40,217,.3));
  border: 2px dashed rgba(255,255,255,.2);
}
#ylive-wrap .ylive-aguard-avatar > .yubly-avatar {
  /* Engine retorna <span class="yubly-avatar"> — ocupa 100% do botão */
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Hint visual sutil de "clicável" — pequeno ícone de edição no canto */
#ylive-wrap .ylive-aguard-avatar::after {
  content: '✎';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9B5CF6, #6D28D9);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(20,10,45,.95);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  pointer-events: none;
}

@media (max-width: 480px) {
  #ylive-wrap .ylive-aguard-avatar {
    width: 100px;
    height: 100px;
    margin-bottom: 14px;
  }
  #ylive-wrap .ylive-aguard-avatar::after {
    width: 28px; height: 28px;
    font-size: 13px;
  }
}

/* ── Modal de seleção do avatar (espelha visual do Hub adaptado ao Live) ── */
#ylive-wrap .ylive-av-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(8, 4, 20, .78);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 20px;
  animation: ylive-av-fade .18s ease;
}
#ylive-wrap .ylive-av-modal-overlay.open { display: flex; }
#ylive-wrap .ylive-av-modal-box {
  background: linear-gradient(180deg, #2a1f4a, #1a1530);
  border: 1px solid rgba(155,92,246,.35);
  border-radius: 18px;
  padding: 28px 24px 22px;
  max-width: 420px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  position: relative;
  animation: ylive-av-pop .26s cubic-bezier(.34,1.4,.64,1);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
#ylive-wrap .ylive-av-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #d4c5e8;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  padding: 0;
}
#ylive-wrap .ylive-av-modal-close:hover {
  background: rgba(255,255,255,.16);
  color: #fff;
}

#ylive-wrap .ylive-av-modal-box h2 {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin: 0 0 18px;
  letter-spacing: .3px;
}

#ylive-wrap .ylive-av-preview-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

#ylive-wrap .ylive-av-section-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 10px;
}

/* Sprint Avatar — Fatia 7
   Carrosséis horizontais para personagens e cores. Scroll livre (sem snap).
   Setas visíveis só em desktop (CSS hint). Mobile usa gesto natural. */

/* Wrapper do carrossel — relativo para posicionar setas */
#ylive-wrap .ylive-av-carousel {
  position: relative;
  margin-bottom: 22px;
}

/* Linha de personagens — flex horizontal scrollável */
#ylive-wrap .ylive-av-chars {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 8px;
  padding: 4px 4px 8px;        /* padding inferior para a sombra do hover não ser cortada */
  scrollbar-width: thin;       /* Firefox */
  scrollbar-color: rgba(255,255,255,.2) transparent;
  -webkit-overflow-scrolling: touch;
}
#ylive-wrap .ylive-av-chars::-webkit-scrollbar { height: 6px; }
#ylive-wrap .ylive-av-chars::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2);
  border-radius: 3px;
}
#ylive-wrap .ylive-av-chars::-webkit-scrollbar-track { background: transparent; }

#ylive-wrap .ylive-av-char-btn {
  flex: 0 0 64px;            /* largura fixa — não estica para preencher */
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 2px solid transparent;
  cursor: pointer;
  padding: 4px;
  transition: border-color .15s, background .15s, transform .12s;
  font-family: inherit;
}
#ylive-wrap .ylive-av-char-btn:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-2px);
}
#ylive-wrap .ylive-av-char-btn.selected {
  border-color: #fbbf24;
  background: rgba(251,191,36,.12);
}
#ylive-wrap .ylive-av-char-btn img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

/* Linha de cores — também horizontal */
#ylive-wrap .ylive-av-colors {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 10px;
  padding: 6px 4px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
  -webkit-overflow-scrolling: touch;
}
#ylive-wrap .ylive-av-colors::-webkit-scrollbar { height: 6px; }
#ylive-wrap .ylive-av-colors::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2);
  border-radius: 3px;
}
#ylive-wrap .ylive-av-colors::-webkit-scrollbar-track { background: transparent; }

#ylive-wrap .ylive-av-color-btn {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s, border-color .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  font-family: inherit;
}
#ylive-wrap .ylive-av-color-btn:hover { transform: scale(1.12); }
#ylive-wrap .ylive-av-color-btn.selected {
  border-color: #fff;
  transform: scale(1.12);
  box-shadow: 0 0 0 3px rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.4);
}
/* Branco precisa de borda para ficar visível no fundo escuro do modal */
#ylive-wrap .ylive-av-color-btn[data-color-slug="branco"] {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.25);
}

/* Setas do carrossel — só desktop (>= 768px). Em mobile, o gesto natural basta. */
#ylive-wrap .ylive-av-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(20,10,45,.92);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  cursor: pointer;
  z-index: 2;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  transition: background .15s, transform .12s;
}
#ylive-wrap .ylive-av-arrow:hover {
  background: rgba(155,92,246,.6);
  transform: translateY(-50%) scale(1.08);
}
#ylive-wrap .ylive-av-arrow.left  { left: -4px; }
#ylive-wrap .ylive-av-arrow.right { right: -4px; }
#ylive-wrap .ylive-av-arrow svg { width: 14px; height: 14px; }
@media (min-width: 768px) {
  #ylive-wrap .ylive-av-arrow.visible { display: inline-flex; }
}

/* Botões de ação dentro do modal */
#ylive-wrap .ylive-av-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
#ylive-wrap .ylive-av-modal-actions .ylive-btn {
  flex: 1;
  padding: 12px 16px;
}

@keyframes ylive-av-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ylive-av-pop {
  0%   { opacity: 0; transform: scale(.85) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 480px) {
  #ylive-wrap .ylive-av-modal-box {
    padding: 22px 16px 18px;
  }
  #ylive-wrap .ylive-av-color-btn {
    width: 34px; height: 34px;
  }
}

/* ════════════════════════════════════════════════════════════════
   Sprint Avatar — Fatia 7
   Mini-avatares em listas, pílulas, rankings.
   Wrap .ylive-avatar-mini garante alinhamento consistente.
   ════════════════════════════════════════════════════════════════ */

#ylive-wrap .ylive-avatar-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Fallback bolinha-com-letra (usada quando avatar não está disponível).
   Tamanho controlado por inline style para casar com o size passado.
   Font-size também é inline (proporcional ao tamanho). */
#ylive-wrap .ylive-avatar-mini-fallback {
  border-radius: 50%;
  background: linear-gradient(135deg, #9B5CF6, #6D28D9);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
}

/* No ranking final/intermediário: espaçamento adequado entre avatar e texto */
#ylive-wrap .ylive-rank-item .ylive-avatar-mini,
#ylive-wrap .ylive-lr-item   .ylive-avatar-mini {
  margin: 0 8px 0 4px;
}

/* No header "meu resultado": avatar maior, layout vertical */
#ylive-wrap .ylive-rank-meu-resultado {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(155,92,246,.18);
  border: 1px solid rgba(155,92,246,.4);
  border-radius: 14px;
  margin-bottom: 14px;
}
#ylive-wrap .ylive-rank-meu-resultado .ylive-meu-pos {
  font-size: 28px;
  font-weight: 900;
  color: #fbbf24;
  flex-shrink: 0;
  min-width: 40px;
}
#ylive-wrap .ylive-rank-meu-resultado .ylive-meu-info {
  flex: 1;
}
#ylive-wrap .ylive-rank-meu-resultado .ylive-meu-nome {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
}
#ylive-wrap .ylive-rank-meu-resultado .ylive-meu-pts {
  font-size: 14px;
  color: #fbbf24;
  font-weight: 700;
}
#ylive-wrap .ylive-rank-meu-resultado .ylive-meu-hits {
  font-size: 12px;
  color: rgba(255,255,255,.65);
}

/* Pílula — ajusta padding agora que tem mini-avatar (que tem tamanho próprio) */
#ylive-wrap .ylive-aguard-pill .ylive-avatar-mini {
  width: 22px;
  height: 22px;
}

/* Substitui bolinha antiga .ylive-avatar (com letra) na lista do anfitrião:
   o yliveAvatarMini agora retorna um <span class="ylive-avatar-mini">
   (que tem o próprio tamanho 36px definido inline). Limpamos o estilo antigo
   se vier por engano. */
#ylive-wrap .ylive-player-row .ylive-avatar-mini {
  margin-right: 0;  /* gap do flex já cuida */
}