/* ──────────────────────────────────────────────────────────────
   Pipo Guru · Design System v2 — "nível Duolingo".
   Energia, cor e leveza: bordas grossas 2px, botões 3D em caps,
   sidebar lúdica, stat bar gamificada, right rail com missões,
   modais de celebração em cor cheia e placeholders de arte.
   Vale para todo o produto: app do criador, palco e participante.
   ────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,700;0,800;0,900;1,900&display=swap');

:root {
  /* núcleo roxo (marca) */
  --primary: #7C6FF6;
  --primary-hover: #6B5CF0;
  --primary-sombra: #5A4CD9;
  --primary-suave: #F2F0FF;
  --primary-texto: #6D5FE8;

  /* paleta gamificada (acentos vivos, estilo Duolingo) */
  --gamo-verde: #58CC02;   --gamo-verde-sombra: #46A302;
  --gamo-azul: #1CB0F6;    --gamo-azul-sombra: #1899D6;
  --gamo-amarelo: #FFC800; --gamo-amarelo-sombra: #E6AC00;
  --gamo-laranja: #FF9600; --gamo-laranja-sombra: #E08000;
  --gamo-vermelho: #FF4B4B;--gamo-vermelho-sombra: #E03E3E;

  /* superfícies */
  --bg: #FFFFFF;
  --bg-suave: #FBFAFF;
  --surface: #FFFFFF;
  --stage-bg: #322D59;
  --stage-card: #3E3870;
  --text: #4B4A5E;
  --muted: #9C9AAF;
  --border: #E8E5F4;
  --border-forte: #D9D4F0;

  /* semânticas */
  --success: #58CC02;
  --error: #FF4B4B;
  --warning: #FF9600;
  --info: #1CB0F6;

  /* opções de resposta (cor + forma, nunca só cor) */
  --opt-a: #F06292; --opt-a-sombra: #D14B7B;
  --opt-b: #1CB0F6; --opt-b-sombra: #1899D6;
  --opt-c: #FFC800; --opt-c-sombra: #E6AC00;
  --opt-d: #58CC02; --opt-d-sombra: #46A302;
  --opt-e: #9C7BF7; --opt-e-sombra: #7F5FD9;
  --opt-f: #35C4C8; --opt-f-sombra: #2AA3A7;

  /* gradientes de festa */
  --grad-super: linear-gradient(90deg, #40C4F5, #8C6FF6 55%, #F062C0);
  --grad-noite: linear-gradient(135deg, #17494D, #232E66 48%, #4A2A78);

  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 16px; --radius-xl: 24px;
  --shadow: 0 10px 26px rgb(90 76 217 / .08);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 700 17px/1.55 'Nunito', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primary-texto); }
h1, h2, h3 { line-height: 1.2; font-weight: 900; color: #3C3A4E; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }

/* rótulo de seção em caps (padrão Duolingo p/ títulos pequenos) */
.rotulo, .h-secao {
  font-size: 13px; font-weight: 900; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* chip de ícone: caixinha colorida que unifica emojis de estilos
   variados (o truque Duolingo — o container dá a coerência) */
.ico-chip {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 13px;
  background: var(--chip, var(--primary-suave)); font-size: 24px; line-height: 1;
}

/* ── Botões 3D (afundam ao clicar) ─────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--radius-lg); cursor: pointer;
  font: 800 14px 'Nunito', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  padding: 12px 24px; text-decoration: none;
  background: var(--primary); color: #fff; box-shadow: 0 4px 0 var(--primary-sombra);
  transition: filter .12s, transform .05s, box-shadow .05s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 0 4px 0 var(--primary-sombra); }
.btn.sec { background: #fff; color: var(--primary-texto); border: 2px solid var(--border); box-shadow: 0 4px 0 var(--border); }
.btn.sec:hover { background: var(--bg-suave); filter: none; }
.btn.sec:disabled { box-shadow: 0 4px 0 var(--border); }
.btn.ghost { background: transparent; color: var(--muted); box-shadow: none; text-transform: none; letter-spacing: 0; padding: 8px 12px; }
.btn.ghost:hover { background: var(--primary-suave); color: var(--primary-texto); filter: none; }
.btn.ghost:active { transform: none; }
.btn.danger { background: var(--gamo-vermelho); box-shadow: 0 4px 0 var(--gamo-vermelho-sombra); }
.btn.danger:disabled { box-shadow: 0 4px 0 var(--gamo-vermelho-sombra); }
.btn.verde { background: var(--gamo-verde); box-shadow: 0 4px 0 var(--gamo-verde-sombra); }
.btn.azul { background: var(--gamo-azul); box-shadow: 0 4px 0 var(--gamo-azul-sombra); }
.btn.claro { background: #fff; color: var(--festa-texto, var(--primary-texto)); box-shadow: 0 4px 0 rgb(0 0 0 / .18); }
.btn.super { background: var(--grad-super); box-shadow: 0 4px 0 #B44FC4; }
.btn.lg { padding: 15px 26px; font-size: 16px; width: 100%; border-radius: 16px; }
.btn.sm { padding: 8px 16px; font-size: 13px; }

/* ── Formulários ───────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.campo span { font-size: 12px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel],
textarea, select {
  border: 2px solid var(--border); border-radius: 12px;
  padding: 11px 14px; font: 700 16px 'Nunito', system-ui, sans-serif; background: var(--bg-suave);
  color: var(--text); width: 100%; transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--gamo-azul); background: #fff; box-shadow: 0 0 0 4px #1cb0f622;
}
input::placeholder, textarea::placeholder { color: #B9B6CC; font-weight: 700; }
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Cartões ───────────────────────────────────────────────── */
.card { background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.card.press {
  border-width: 2px 2px 4px; cursor: pointer;
  transition: transform .06s, border-color .12s, background .12s;
}
.card.press:hover { background: var(--bg-suave); border-color: var(--border-forte); }
.card.press:active { transform: translateY(2px); border-bottom-width: 2px; }
.wrap { max-width: 1024px; margin: 0 auto; padding: 24px 16px; }
.center { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 16px; text-align: center; background: var(--bg-suave); }
.muted { color: var(--muted); }
.erro { color: var(--error); font-weight: 800; }

/* ── Header simples (telas sem sidebar: participante, palco…) ─ */
.header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fffffff2; backdrop-filter: blur(8px); border-bottom: 2px solid var(--border);
  padding: 10px 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 30;
}
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; color: var(--primary); font-size: 22px; text-decoration: none; }
.logo img { height: 38px; display: block; }

/* ══ SHELL DO APP (sidebar + main + right rail) ═══════════════
   Desktop: sidebar fixa à esquerda, conteúdo central, rail à direita.
   Mobile: sidebar vira barra fixa no rodapé (só ícones), rail empilha. */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 256px; flex-shrink: 0; border-right: 2px solid var(--border);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--bg);
}
.sidebar .logo { font-size: 26px; margin: 4px 8px 18px; }
.nav-item {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 9px 10px; border: 2px solid transparent; border-radius: 14px;
  font-size: 14px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  color: #777588; transition: background .12s, color .12s, transform .08s; cursor: pointer;
  background: transparent; font-family: inherit; text-align: left; width: 100%;
}
.nav-item .ico {
  display: grid; place-items: center; flex-shrink: 0; position: relative;
  width: 42px; height: 42px; border-radius: 13px; background: var(--bg-suave);
  font-size: 24px; line-height: 1; transition: background .12s, transform .12s;
}
.nav-item .ico img, .nav-item .ico .arte-ico { width: 28px !important; height: 28px !important; font-size: 24px !important; }
.nav-item:hover { background: var(--bg-suave); }
.nav-item:hover .ico { background: var(--primary-suave); transform: rotate(-4deg) scale(1.05); }
.nav-item.ativo { background: var(--primary-suave); border-color: #C9C2FF; color: var(--primary-texto); }
.nav-item.ativo .ico { background: #fff; }

/* Seletor de idioma (bandeirinhas CSS, estilo Duolingo) — usado em
   /participar (footer, sem conta) e na seção Idioma de /conta. */
.idiomas-app { display: flex; gap: 6px; padding: 4px 10px 10px; }
.idiomas-app a { padding: 4px; border-radius: 10px; border: 2px solid transparent; line-height: 0; transition: transform .1s; }
.idiomas-app a:hover { transform: translateY(-2px); }
.idiomas-app a.on { border-color: #C9C2FF; background: var(--primary-suave); }
.bandeira {
  width: 30px; height: 22px; border-radius: 6px; flex-shrink: 0; position: relative;
  overflow: hidden; box-shadow: inset 0 0 0 1px #00000014; display: inline-block;
}
.bandeira.b-pt { background: #009C3B; }
.bandeira.b-pt::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 13px; height: 13px;
  background: #FFDF00; transform: translate(-50%, -50%) rotate(45deg); border-radius: 2px;
}
.bandeira.b-pt::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  background: #002776; transform: translate(-50%, -50%); border-radius: 50%;
}
.bandeira.b-en { background: repeating-linear-gradient(180deg, #E64C3C 0 3px, #fff 3px 6px); }
.bandeira.b-en::before { content: ''; position: absolute; left: 0; top: 0; width: 14px; height: 11px; background: #3C5BA0; }
.bandeira.b-es { background: linear-gradient(180deg, #C60B1E 0 25%, #FFC400 25% 75%, #C60B1E 75%); }

/* Roadmap Pipo: item "sobre o produto" — destacado, acima do Sair */
.nav-item.produto {
  background: linear-gradient(135deg, #F2F0FF, #E9E5FF);
  border: 2px dashed #C9C2FF; color: var(--primary-texto); margin-bottom: 6px;
}
.nav-item.produto .ico { background: #fff; }
.nav-item.produto:hover { background: linear-gradient(135deg, #ECE8FF, #DFD9FF); }
.nav-item.produto:hover .ico { transform: translateY(-2px) rotate(-8deg); }
.nav-item.produto.ativo { border-style: solid; border-color: var(--primary); }
.sidebar .resto { flex: 1; }

/* ── Sidebar recolhível: mais espaço útil de tela, fica só ícone ──
   Estado persiste em localStorage; a classe .sb-recolhida é aplicada
   no <html> por um script inline antes do paint (evita flash). */
.sidebar-topo { display: flex; justify-content: center; margin: 6px 4px 18px; }
.logo-mini { display: none; }
.logo-mini img { height: 34px; width: 34px; object-fit: contain; display: block; }
/* Pílula sentada em cima da linha que separa a sidebar do conteúdo —
   cor da marca pra ficar óbvio que clica. É irmã da sidebar (não filha),
   position: fixed alinhado ao viewport (a sidebar é sticky/100vh, então
   "fixed" acompanha do mesmo jeito) — assim nunca fica sujeita ao
   overflow-x: hidden da sidebar e nunca corta pela metade. */
.sidebar-toggle {
  position: fixed; top: 26px; left: 256px; transform: translateX(-50%); z-index: 65;
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; border: 2px solid #fff;
  background: var(--primary); color: #fff; font-size: 14px; font-weight: 900; line-height: 1;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px #3c3a4e33;
  transition: background .12s;
}
.sidebar-toggle:hover { background: var(--primary-texto); }
html.sb-recolhida .sidebar-toggle { left: 84px; }

html.sb-recolhida .sidebar { width: 84px; }
html.sb-recolhida .logo-full { display: none; }
html.sb-recolhida .logo-mini { display: block; }
html.sb-recolhida .nav-item { justify-content: center; gap: 0; padding: 9px; }
html.sb-recolhida .nav-item .txt { display: none; }
html.sb-recolhida .nav-item.tem-badge .ico::after {
  content: ''; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px;
  border-radius: 50%; background: #E64C3C; border: 2px solid #fff;
}

/* usa o espaço: conteúdo ancorado perto do menu, rail respira à direita */
.shell-main { flex: 1; min-width: 0; display: flex; justify-content: flex-start; gap: clamp(28px, 3.5vw, 52px); padding: 0 clamp(24px, 3vw, 48px) 48px clamp(24px, 2.5vw, 40px); background: var(--bg); }
.coluna { width: 100%; max-width: 840px; }
.coluna.larga { max-width: 1280px; }
.rail { width: 350px; flex-shrink: 0; display: flex; flex-direction: column; gap: 18px; padding-top: 18px; }
.rail .card { padding: 20px 22px; }

.coluna { padding-top: 26px; }

/* Sidebar recolhida libera 172px (256px → 84px) — sem isso o conteúdo
   só desliza pra esquerda e sobra um vão em branco à direita. Cresce
   o mesmo tanto que a sidebar encolheu, mantendo a proporção com o
   rail. Só no layout de desktop lado-a-lado (acima de 1380px); abaixo
   disso o rail já empilha e .coluna vira max-width:none — não mexe
   nesse caso pra não quebrar o responsivo de tablet/mobile. */
@media (min-width: 1381px) {
  html.sb-recolhida .coluna { max-width: 1012px; }
  html.sb-recolhida .coluna.larga { max-width: 1452px; }
}

/* Barra da jornada (abertura): progresso das 100 missões + prêmios */
.jornada {
  display: flex; gap: 18px; align-items: center; text-decoration: none;
  background: linear-gradient(135deg, #FFF4CC, #FFE9A8); border: 2px solid #F5D876;
  border-bottom-width: 4px; border-radius: 20px; padding: 18px 24px; margin-bottom: 34px;
  transition: transform .12s, box-shadow .12s;
}
.jornada:hover { transform: translateY(-2px); box-shadow: 0 10px 26px #e6ac0033; }
.jornada .num { font-size: 34px; font-weight: 900; color: #9C7500; line-height: 1; }
.jornada .num em { font-style: normal; font-size: 17px; color: #B99420; }
.jornada .rot-j { font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: #7A6300; margin: 2px 0 8px; }
.jornada .meio { flex: 1; min-width: 0; }
.jornada .trilho-j { position: relative; height: 16px; border-radius: 8px; background: #fff; overflow: visible; }
.jornada .feito-j { height: 100%; border-radius: 8px; background: var(--gamo-amarelo); min-width: 10px; transition: width .5s; }
.jornada .marco {
  position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 19px; line-height: 1;
  filter: grayscale(1) opacity(.55);
}
.jornada .marco.vivo { filter: none; transform: translate(-50%, -52%) scale(1.2); }
.jornada .bt-j { flex-shrink: 0; }
@media (max-width: 880px) {
  .jornada { flex-wrap: wrap; gap: 12px; padding: 16px 18px; }
  .jornada .mascote-j { display: none; }
  .jornada .bt-j { width: 100%; }
}
.stat-bloco {
  --cor: var(--primary); --fundo: var(--primary-suave);
  flex: 1; min-width: 108px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--fundo); border: 2px solid var(--cor); border-bottom-width: 4px; border-radius: 16px;
  padding: 12px 10px 9px; text-decoration: none; cursor: default;
}
.stat-bloco .ico { font-size: 30px; line-height: 1; }
.stat-bloco b { font-size: 22px; line-height: 1.1; color: var(--cor); }
.stat-bloco b em { font-style: normal; font-size: 13px; opacity: .75; }
.stat-bloco small { font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--cor); opacity: .85; }
.stat-bloco.roxo { --cor: var(--primary-texto); --fundo: var(--primary-suave); }
.stat-bloco.azul { --cor: #147FB5; --fundo: #E3F4FE; }
.stat-bloco.vermelho { --cor: #D03A3A; --fundo: #FFE9E9; }
.stat-bloco.dourado { --cor: #9C7500; --fundo: #FFF4CC; cursor: pointer; transition: transform .12s; }
.stat-bloco.dourado:hover { transform: translateY(-2px) rotate(-1deg); }
.stat-bloco.dourado .ico { animation: medalha-balanca 3s ease-in-out infinite; }
@keyframes medalha-balanca { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }

/* barra de progresso chunky (missões, onboarding…) */
.prog { display: flex; align-items: center; gap: 10px; }
.prog .trilho { flex: 1; height: 16px; border-radius: 8px; background: var(--border); overflow: hidden; }
.prog .feito {
  height: 100%; border-radius: 8px; background: var(--gamo-amarelo);
  transition: width .5s cubic-bezier(.22, 1, .36, 1); min-width: 0;
}
.prog .feito.verde { background: var(--gamo-verde); }
.prog .premio { font-size: 24px; line-height: 1; flex-shrink: 0; }
.prog .txt { font-size: 12px; font-weight: 900; color: var(--muted); min-width: 44px; text-align: center; }

/* missão (linha do rail) */
.missao { display: flex; gap: 14px; align-items: center; padding: 12px 0; }
.missao + .missao { border-top: 2px solid var(--bg-suave); }
.missao .ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 14px; background: var(--bg-suave);
  font-size: 26px; line-height: 1;
}
.missao .ico img, .missao .ico .arte-ico { width: 30px !important; height: 30px !important; }
.missao .info { flex: 1; min-width: 0; }
.missao .info b { display: block; font-size: 15px; color: #3C3A4E; margin-bottom: 6px; }

/* ── Selos e badges ────────────────────────────────────────── */
.badge { padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.badge.roxo { background: var(--primary-suave); color: var(--primary-texto); }
.badge.azul { background: #E3F4FE; color: #147FB5; }
.badge.verde { background: #E9F8DC; color: #3E8F02; }
.badge.vermelho { background: #FFE9E9; color: #D03A3A; }
.badge.amarelo { background: #FFF4CC; color: #9C7500; }
.selo-super {
  display: inline-block; padding: 2px 10px; border-radius: 8px;
  background: var(--grad-super); color: #fff;
  font-style: italic; font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

/* Cards de estatística (modelo "Partida terminada!" do Duolingo) */
.stat-cards { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.stat-card { --cor: var(--primary); border: 2px solid var(--cor); border-radius: 16px; overflow: hidden; min-width: 132px; background: #fff; text-align: center; }
.stat-card .topo { background: var(--cor); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; }
.stat-card .valor { color: var(--cor); font-weight: 900; font-size: 24px; padding: 12px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.stat-card.amarela { --cor: var(--gamo-amarelo-sombra); }
.stat-card.teal { --cor: #2AA3A7; }
.stat-card.verde { --cor: var(--gamo-verde); }
.stat-card.azul { --cor: var(--gamo-azul); }
.stat-card.laranja { --cor: var(--gamo-laranja); }
.stat-card.roxa { --cor: var(--primary); }

/* Abas (caps + sublinhado grosso, estilo Duolingo) */
.abas { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.abas a {
  padding: 10px 18px; text-decoration: none; font-size: 13px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  border-bottom: 4px solid transparent; margin-bottom: -2px;
}
.abas a.ativa { color: var(--gamo-azul); border-bottom-color: var(--gamo-azul); }
.abas a:hover { color: var(--gamo-azul-sombra); }

/* KPI (painel do dono) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.kpi { background: #fff; border: 2px solid var(--border); border-bottom-width: 4px; border-radius: var(--radius-lg); padding: 18px 16px; text-align: center; }
.kpi .ico { font-size: 28px; display: block; margin-bottom: 4px; }
.kpi b { display: block; font-size: 30px; color: #3C3A4E; }
.kpi span { font-size: 12px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ── Modal de celebração em cor cheia (estilo Duolingo) ────── */
.veu {
  position: fixed; inset: 0; z-index: 80; background: #3c3a4e80; backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 16px; overflow: auto;
}
.veu.aberto { display: flex; }
.modal-festa {
  width: 100%; max-width: 440px; border-radius: var(--radius-xl); padding: 34px 28px;
  background: var(--festa, #2EC4B6); color: #fff; text-align: center;
  animation: festa-entra .35s cubic-bezier(.22, 1.4, .36, 1);
}
.modal-festa h2 { color: #fff; font-size: 22px; margin: 14px 0 6px; }
.modal-festa p { font-weight: 700; opacity: .92; margin: 0 0 20px; }
.modal-festa.roxa { --festa: #7C6FF6; --festa-texto: #6D5FE8; }
.modal-festa.teal { --festa: #2EC4B6; --festa-texto: #1E9C90; }
.modal-festa.laranja { --festa: #FF9600; --festa-texto: #E08000; }
@keyframes festa-entra { from { transform: scale(.85) translateY(18px); opacity: 0; } }

/* painel escuro em gradiente (promo / momentos "super") */
.painel-noite { background: var(--grad-noite); border-radius: var(--radius-lg); color: #fff; padding: 22px; }
.painel-noite h2, .painel-noite h3 { color: #fff; }

/* ── Placeholder de arte (troque soltando o arquivo em /assets/arte) ── */
.arte {
  margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 10px; text-align: center;
  background: repeating-linear-gradient(45deg, #F6F4FF, #F6F4FF 12px, #EFEBFF 12px, #EFEBFF 24px);
  border: 2px dashed #C9C2FF; border-radius: 16px; color: #8B7FE0; overflow: hidden;
}
.arte .arte-emoji { font-size: clamp(22px, 38%, 44px); line-height: 1.2; }
.arte b { font-size: 11px; letter-spacing: .04em; word-break: break-all; }
.arte small { font-size: 10px; font-weight: 700; color: #A79DFA; line-height: 1.35; }
.arte-ico { display: inline-grid; place-items: center; line-height: 1; cursor: help; }

/* ── Código da sessão ──────────────────────────────────────── */
.codigo-input {
  font-size: 40px; font-weight: 900; letter-spacing: .3em; text-align: center; padding: 14px;
  color: var(--primary-texto); border-radius: 16px !important;
}
.codigo-badge {
  display: inline-flex; align-items: center; gap: 12px; background: var(--stage-bg); color: #fff;
  border-radius: var(--radius-md); padding: 8px 16px; font-weight: 800; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
}
.codigo-badge b { font-size: 22px; letter-spacing: .2em; color: #CBC3FF; }
.codigo-hero { background: #fff; border: 2px solid var(--border); border-radius: 24px; padding: 32px; text-align: center; }
.codigo-hero .num { font-size: 56px; font-weight: 900; letter-spacing: .2em; margin: 8px 0 16px; color: var(--primary-texto); }

/* ── Botões de resposta do participante (cor + forma) ──────── */
.opcao {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px;
  border: 0; border-radius: 18px; padding: 12px 18px; cursor: pointer;
  color: #fff; font: 800 19px 'Nunito', system-ui, sans-serif; text-align: left;
  transition: transform .06s, box-shadow .06s, opacity .15s, filter .12s;
}
.opcao:hover { filter: brightness(1.05); }
.opcao:active { transform: translateY(4px); box-shadow: 0 0 0 transparent !important; }
.opcao .forma { font-size: 24px; }
.opcao.sel { outline: 4px solid #fff; outline-offset: -7px; }
.opcao:disabled { opacity: .45; cursor: not-allowed; }
.op0 { background: var(--opt-a); box-shadow: 0 4px 0 var(--opt-a-sombra); }
.op1 { background: var(--opt-b); box-shadow: 0 4px 0 var(--opt-b-sombra); }
.op2 { background: var(--opt-c); box-shadow: 0 4px 0 var(--opt-c-sombra); }
.op3 { background: var(--opt-d); box-shadow: 0 4px 0 var(--opt-d-sombra); }
.op4 { background: var(--opt-e); box-shadow: 0 4px 0 var(--opt-e-sombra); }
.op5 { background: var(--opt-f); box-shadow: 0 4px 0 var(--opt-f-sombra); }
.vf-btn {
  flex: 1; border: 0; border-radius: 20px; color: #fff; font: 900 22px 'Nunito', sans-serif;
  padding: 40px 16px; cursor: pointer; transition: transform .06s, box-shadow .06s, filter .12s;
}
.vf-btn:hover { filter: brightness(1.05); }
.vf-btn:active { transform: translateY(5px); box-shadow: 0 0 0 transparent !important; }

/* ── Palco (projeção): gradiente vibrante + brilhos (vibe Super) ── */
.stage {
  min-height: 100vh; color: #fff; display: flex; flex-direction: column;
  background:
    radial-gradient(760px 460px at 8% -8%, #2ec4b636, transparent 64%),
    radial-gradient(860px 560px at 108% 110%, #f062c02e, transparent 62%),
    radial-gradient(500px 320px at 88% -4%, #8c6ff640, transparent 60%),
    linear-gradient(155deg, #114B50 0%, #222F6A 48%, #4B2B79 100%);
}
.stage-titulo { font-size: clamp(40px, 6vw, 80px); font-weight: 900; text-align: center; margin: 0; text-shadow: 0 4px 26px #00000052; text-wrap: balance; }
.stage .muted { color: #C9C6E8; }
.stage h1, .stage h2, .stage h3 { color: #fff; }

/* cartão de vidro fosco (conteúdo sobre o gradiente) */
.stage-card {
  background: #ffffff12; border: 2px solid #ffffff1f; border-radius: 20px;
  padding: 18px 22px; backdrop-filter: blur(8px);
}
.stage .codigo-badge { background: #ffffff14; border: 2px solid #ffffff26; backdrop-filter: blur(8px); }

/* Mascote em cena (slides de conteúdo no palco): halo suave pulsando +
   faíscas flutuando — sem feixe duro, sem brilho estourado. */
.palco-holofote { position: relative; display: grid; place-items: center; margin-bottom: 4px; padding: 30px 60px 14px; }
.palco-holofote .feixe {
  position: absolute; width: min(360px, 46vh); aspect-ratio: 1; border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #8c7bff4d 0%, #f062c01f 45%, transparent 68%);
  animation: halo-pulsa 4.5s ease-in-out infinite;
}
@keyframes halo-pulsa { 50% { transform: scale(1.14); opacity: .75; } }
.palco-holofote::before, .palco-holofote::after {
  position: absolute; font-size: 26px; pointer-events: none; opacity: .75;
  animation: faisca-flutua 3.8s ease-in-out infinite;
}
.palco-holofote::before { content: '✨'; left: 12%; top: 16%; }
.palco-holofote::after { content: '⭐'; right: 10%; bottom: 22%; font-size: 20px; animation-delay: 1.7s; }
@keyframes faisca-flutua {
  50% { transform: translateY(-12px) rotate(18deg) scale(1.15); opacity: 1; }
}
.palco-holofote img {
  position: relative; filter: drop-shadow(0 16px 32px #00000052);
  animation: holofote-flutua 3.6s ease-in-out infinite;
}
@keyframes holofote-flutua { 50% { transform: translateY(-10px) rotate(2deg); } }

/* ── Barras de resultado ───────────────────────────────────── */
.barra-linha { display: flex; align-items: center; gap: 16px; margin: 14px 0; }
.barra-forma { width: 42px; font-size: 32px; text-align: center; }
.barra-trilho { flex: 1; background: #ffffff1f; border-radius: 10px; height: 46px; overflow: hidden; position: relative; }
.claro .barra-trilho { background: var(--primary-suave); }
.barra-fill { height: 100%; border-radius: 10px; transition: width .5s cubic-bezier(.22, 1, .36, 1); display: flex; align-items: center; padding: 0 10px; font-weight: 800; white-space: nowrap; }
.barra-rotulo { display: flex; justify-content: space-between; font-size: 17px; font-weight: 800; margin-bottom: 2px; }
/* No palco (telão, visto de longe): tudo maior. Escopado em .stage pra
   não vazar pro relatório, que reusa .barra-rotulo com bg claro. */
.stage .barra-rotulo { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 4px; }
.correta-marca { color: var(--success); font-weight: 900; }

/* ── Nuvem de palavras ─────────────────────────────────────── */
.nuvem { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; justify-content: center; padding: 12px; line-height: 1.05; max-width: 100%; }
.nuvem span {
  font-weight: 900; display: inline-block; transition: font-size .3s;
  animation: nuvem-pop .45s cubic-bezier(.2, 1.5, .4, 1) backwards;
  text-shadow: 0 3px 16px #00000033;
  max-width: 100%; overflow-wrap: break-word; word-break: break-word;
}
@keyframes nuvem-pop { from { transform: scale(.2); opacity: 0; } }
.nuvem .top {
  border: 3px solid currentColor; border-radius: 999px;
  padding: .02em .5em .06em; background: #ffffff12;
}
.nuvem .top i { font-style: normal; font-size: .48em; margin-right: .3em; vertical-align: .28em; }

/* Escalas no palco: barra grossa com o Pipo na ponta */
.esc-trilho { position: relative; height: 42px; border-radius: 21px; background: #ffffff1c; }
.esc-fill { position: relative; height: 100%; border-radius: 21px; transition: width .5s cubic-bezier(.22, 1, .36, 1); }
.esc-pipo {
  position: absolute; right: -8px; top: 50%; transform: translateY(-56%); height: 68px;
  filter: drop-shadow(0 4px 10px #00000055); transition: right .2s;
}

/* ── Placar ────────────────────────────────────────────────── */
.placar { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 520px; }
.placar li {
  display: flex; justify-content: space-between; align-items: center; font-size: 18px;
  background: #ffffff12; border: 2px solid #ffffff1c; backdrop-filter: blur(6px);
  border-radius: var(--radius-md); padding: 10px 16px; margin-bottom: 8px;
}
.placar li:first-child { background: var(--primary); box-shadow: 0 4px 0 var(--primary-sombra); }
.claro .placar li, .placar.claro li { background: #fff; border: 2px solid var(--border); box-shadow: none; color: var(--text); }
.claro .placar li:first-child, .placar.claro li:first-child { background: var(--primary-suave); border-color: #DDD7FF; }
.placar .rank { font-weight: 900; font-size: 18px; margin-right: 10px; }

/* ── Pódio ─────────────────────────────────────────────────── */
.podio { display: flex; align-items: flex-end; justify-content: center; gap: 24px; }
.podio .col { display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0; transition: opacity .7s, transform .7s; transform: translateY(14px); }
.podio .col.mostra { opacity: 1; transform: none; }
.podio .base {
  width: 116px; border-radius: 14px 14px 0 0; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10px; color: #fff; font-weight: 900; font-size: 24px;
}
.podio .p1 .base { height: 170px; background: var(--primary); }
.podio .p2 .base { height: 120px; background: #A79DFA; }
.podio .p3 .base { height: 90px; background: #C9C2FF; color: var(--stage-bg); }

/* ── Timer ─────────────────────────────────────────────────── */
.timer { font-weight: 900; font-variant-numeric: tabular-nums; color: var(--primary-texto); }
.stage .timer { color: #fff; }
.timer.aviso { color: var(--warning) !important; animation: pulsa 1s infinite; }
@keyframes pulsa { 50% { opacity: .55; } }

/* ── Grids e cards de resposta aberta ──────────────────────── */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cards-abertos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); width: 100%; }
.cards-abertos .card-txt { background: #ffffff12; border: 2px solid #ffffff1c; backdrop-filter: blur(6px); color: #fff; border-radius: var(--radius-md); padding: 18px 20px; font-size: 24px; font-weight: 700; }

/* ── Novas dinâmicas (telão): pin, grid 2x2, mural, ranking ── */
@keyframes rank-entra { from { opacity: 0; transform: translateY(26px) scale(.88); } }

.pin-palco {
  position: relative; max-width: min(860px, 92vw); max-height: 56vh;
  border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px #00000055;
  display: inline-block; line-height: 0;
}
.pin-palco img { max-width: 100%; max-height: 56vh; display: block; }
.pin-overlay { position: absolute; inset: 0; }
.pin-overlay svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin-ponto {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px #00000066; animation: pop-pin .3s ease-out backwards;
}
@keyframes pop-pin { from { transform: translate(-50%, -50%) scale(0); } }

.grid2x2-wrap { width: min(560px, 82vw, 56vh); }
.grid2x2 {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 18px;
  background: #ffffff10; border: 2px solid #ffffff26;
}
.grid2x2::before, .grid2x2::after {
  content: ''; position: absolute; background: #ffffff2e;
}
.grid2x2::before { left: 50%; top: 0; bottom: 0; width: 2px; }
.grid2x2::after { top: 50%; left: 0; right: 0; height: 2px; }
.g2-quad { position: absolute; font-size: 17px; font-weight: 900; color: #C9C6E8; opacity: .8; padding: 8px 12px; }
.g2-q0 { left: 0; top: 0; } .g2-q1 { right: 0; top: 0; text-align: right; }
.g2-q2 { left: 0; bottom: 0; } .g2-q3 { right: 0; bottom: 0; text-align: right; }
.g2-eixo { position: absolute; font-size: 18px; font-weight: 900; color: #EDEBFF; }
.g2-ex { bottom: -28px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.g2-ey { left: -12px; top: 50%; transform: rotate(-90deg) translateX(50%); transform-origin: left center; white-space: nowrap; }
.g2-item { position: absolute; transform: translate(-50%, -50%); cursor: pointer; z-index: 2; }
.g2-ponto {
  display: block; width: 20px; height: 20px; border-radius: 50%; margin: 0 auto;
  border: 3px solid #fff; box-shadow: 0 3px 10px #00000066; animation: pop-pin .4s ease-out backwards;
}
.g2-rotulo {
  display: block; font-size: clamp(16px, 1.8vw, 22px); font-weight: 900; color: #fff;
  text-shadow: 0 2px 8px #000000aa; white-space: nowrap; text-align: center; margin-top: 3px;
}
.g2-disp {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  opacity: 0; transition: opacity .25s;
}
.g2-disp.mostra { opacity: .55; }
.g2-item.aberto .g2-ponto { outline: 3px solid #FFC800; }

.mural-digitada {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 940px; width: 100%;
}
.mural-chip {
  background: #ffffff12; border: 2px solid #ffffff22; color: #EDEBFF;
  border-radius: 999px; padding: 11px 24px; font-size: 22px; font-weight: 800;
  animation: pop-pin .3s ease-out backwards;
}

/* ── Tabelas ───────────────────────────────────────────────── */
table.tab { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 2px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.tab th, .tab td { text-align: left; padding: 13px 16px; border-bottom: 2px solid var(--primary-suave); font-size: 16px; }
.tab tr:last-child td { border-bottom: 0; }
.tab th { color: var(--muted); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; background: var(--bg-suave); }

/* ── Banner de conexão ─────────────────────────────────────── */
.conexao { position: fixed; top: 0; left: 0; right: 0; z-index: 50; text-align: center; color: #fff; font-size: 14px; font-weight: 800; padding: 5px; display: none; }
.conexao.off { display: block; background: var(--warning); }

/* ── Menu da conta (dropdown de header simples) ────────────── */
.menu-user { position: relative; }
.menu-user summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 14px; padding: 8px 16px; border-radius: 12px;
  border: 2px solid var(--border); background: #fff; color: var(--text);
  transition: border-color .12s;
}
.menu-user summary::-webkit-details-marker { display: none; }
.menu-user summary:hover, .menu-user[open] summary { border-color: var(--primary); color: var(--primary-texto); }
.menu-user .itens {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; z-index: 60;
  background: #fff; border: 2px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column;
}
.menu-user .itens a {
  padding: 10px 14px; border-radius: 10px; font-weight: 800; font-size: 14px;
  color: var(--text); text-decoration: none;
}
.menu-user .itens a:hover { background: var(--primary-suave); color: var(--primary-texto); }

/* ── FABs de suporte/bug ───────────────────────────────────── */
.fabs { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 70; }
.fab {
  /* círculo perfeito: sem a sombra dura de 4px (esticava o botão) */
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 22px; display: grid; place-items: center; color: #fff;
  background: var(--primary); box-shadow: 0 8px 20px #3c3a4e40;
  transition: transform .12s, filter .12s;
}
.fab:hover { transform: scale(1.08); filter: brightness(1.05); }
.fab:active { transform: scale(.96); }
.fab.bug { background: var(--opt-a); }

/* Sino de notificações (topo da pilha de FABs) */
.sino-wrap { position: relative; }
.fab.sino { background: var(--gamo-amarelo); }
.sino-badge {
  position: absolute; top: -8px; right: -8px; min-width: 26px; height: 26px;
  display: grid; place-items: center; padding: 0 6px;
  background: var(--gamo-vermelho); color: #fff; border: 2.5px solid #fff;
  border-radius: 999px; font: 900 14px 'Nunito', sans-serif;
  box-shadow: 0 2px 8px #ff4b4b59;
}
/* Enquanto houver não lida: o número "pinga" um anel e o sino balança
   de tempos em tempos — impossível não ver, sem ser irritante. */
.fab.sino.tem-novas { animation: sino-toca 3.4s ease-in-out infinite; }
@keyframes sino-toca {
  0%, 14%, 100% { transform: rotate(0); }
  3% { transform: rotate(-14deg); } 6% { transform: rotate(11deg); }
  9% { transform: rotate(-7deg); } 12% { transform: rotate(4deg); }
}
.fab.sino.tem-novas .sino-badge { animation: sino-ping 2.2s ease-out infinite; }
@keyframes sino-ping {
  0% { box-shadow: 0 0 0 0 #ff4b4b7d; }
  70%, 100% { box-shadow: 0 0 0 13px #ff4b4b00; }
}
.sino-painel {
  display: none; position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(350px, calc(100vw - 40px)); max-height: 420px; overflow-y: auto;
  background: #fff; border: 2px solid var(--border); border-radius: 18px;
  box-shadow: 0 18px 44px #3c3a4e2b; padding: 10px; text-align: left;
}
.sino-painel.aberto { display: block; }
/* rodapé discreto do sino: arquivo de comunicados do time */
.sino-arquivo {
  display: block; margin: 6px 4px 2px; padding: 9px 12px; border-top: 2px solid var(--bg-suave);
  font-size: 13px; font-weight: 800; color: var(--muted); text-decoration: none;
  text-align: center; border-radius: 0 0 12px 12px; transition: color .12s, background .12s;
}
.sino-arquivo:hover { color: var(--primary-texto); background: var(--primary-suave); }
.notif { display: flex; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: inherit; align-items: flex-start; }
.notif:hover { background: var(--bg-suave); }
.notif.nova { background: var(--primary-suave); }
.notif .emo {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 20px; background: var(--bg-suave);
}
.notif.nova .emo { background: #fff; }
.notif b { display: block; font-size: 14px; color: #3C3A4E; line-height: 1.35; }
.notif .corpo { display: block; font-size: 13px; font-weight: 700; color: var(--muted); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif small { font-size: 11px; font-weight: 900; color: #B9B6CC; text-transform: uppercase; letter-spacing: .05em; }
.notif .notif-x {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: #C9C6D8; font-size: 13px; font-weight: 900; line-height: 1;
  display: grid; place-items: center; transition: background .12s, color .12s;
}
.notif .notif-x:hover { background: #FFE9E9; color: var(--gamo-vermelho); }

/* ── Responsivo do shell ───────────────────────────────────── */
@media (max-width: 1120px) { .rail { display: none; } }
@media (max-width: 880px) {
  .shell { flex-direction: column; }
  .sidebar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; width: 100%;
    flex-direction: row; justify-content: space-around; align-items: center;
    border-right: 0; border-top: 2px solid var(--border); padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom)); z-index: 60; overflow: visible;
  }
  .sidebar { overflow-x: auto; }
  /* No mobile a sidebar é sempre a barra inferior cheia -- ignora o
     estado "recolhida" (que é conceito só de desktop, persiste via
     localStorage e não deve encolher a barra aqui). */
  html.sb-recolhida .sidebar { width: 100%; }
  .sidebar .sidebar-topo, .sidebar .resto, .sidebar-toggle, .nav-item.some-mob { display: none; }
  .idiomas-app { padding: 4px 2px; align-items: center; }
  .nav-item { width: auto; padding: 5px; border-radius: 12px; flex-shrink: 0; }
  .nav-item .ico { width: 40px; height: 40px; font-size: 23px; }
  .nav-item span.txt { display: none; }
  .shell-main { padding: 0 14px 96px; }
  .stat-fita { gap: 8px; }
  .stat-bloco { min-width: 72px; padding: 9px 6px 7px; }
  .stat-bloco .ico { font-size: 24px; }
  .stat-bloco b { font-size: 18px; }
  .fabs { bottom: 84px; }
}