/* Tropa do Manca — vidro líquido sobre azul meia-noite.
   Escuro de propósito: a sala fica aberta ao lado do jogo. */

:root {
  color-scheme: dark;

  /* Cor — neutros tingidos de azul, um acento de ação, ciano só atmosférico/ao vivo */
  --fundo-0: oklch(0.13 0.055 266);
  --fundo-1: oklch(0.17 0.065 264);
  --fundo-video: oklch(0.09 0.03 266);
  --texto: oklch(0.97 0.012 250);
  --texto-2: oklch(0.80 0.035 252);
  --texto-3: oklch(0.66 0.04 255);
  --acao: oklch(0.62 0.2 259);
  --acao-claro: oklch(0.74 0.15 246);
  --acao-escuro: oklch(0.5 0.22 264);
  --ciano: oklch(0.88 0.13 205);
  --ok: oklch(0.86 0.15 172);
  --alerta: oklch(0.84 0.14 78);
  --perigo: oklch(0.7 0.17 22);

  /* Vidro */
  --vidro-tinta: oklch(0.26 0.075 262 / 0.62);
  --vidro-brilho: oklch(1 0 0 / 0.13);
  --vidro-borda: oklch(0.92 0.04 250 / 0.16);
  --vidro-aresta: oklch(1 0 0 / 0.42);
  --vidro-blur: 22px;

  /* Elevação em camadas (sombras tingidas, nunca preto puro) */
  --sombra-1: 0 1px 2px oklch(0.05 0.04 266 / 0.45), 0 4px 12px -4px oklch(0.05 0.04 266 / 0.5);
  --sombra-2: 0 2px 4px oklch(0.05 0.04 266 / 0.35), 0 18px 40px -12px oklch(0.04 0.05 266 / 0.75);
  --sombra-3: 0 3px 8px oklch(0.05 0.04 266 / 0.35), 0 40px 80px -20px oklch(0.03 0.05 266 / 0.85);

  /* Tipo */
  --fonte: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-xs: 0.6875rem;
  --t-sm: 0.8125rem;
  --t-md: 0.9375rem;
  --t-lg: 1.125rem;
  --t-xl: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);

  /* Espaço e raio */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;

  /* Motion */
  --ease-saida: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-mola: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-rapida: 140ms;
  --d-media: 260ms;
  --d-lenta: 520ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo-0);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-feature-settings: "tnum"; letter-spacing: 0.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--acao-claro); outline-offset: 3px; }

/* ── Atmosfera ─────────────────────────────────────────── */
/* Só gradientes estáticos: nada de blur, animação ou blend em tela cheia.
   O site fica aberto ao lado do jogo; cada efeito contínuo rouba GPU dele. */
.atmosfera { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50vmax 50vmax at 8% 0%, oklch(0.42 0.17 262 / 0.55), transparent 70%),
    radial-gradient(42vmax 42vmax at 100% 100%, oklch(0.5 0.14 232 / 0.45), transparent 70%),
    radial-gradient(24vmax 24vmax at 78% 22%, oklch(0.75 0.12 205 / 0.12), transparent 70%),
    radial-gradient(120% 80% at 50% 120%, oklch(0.24 0.11 262 / 0.9), transparent 60%),
    var(--fundo-0);
}

/* ── Vidro líquido (sem backdrop-filter: brilho, aresta e profundidade por gradiente) ── */
.vidro {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, var(--vidro-brilho), oklch(1 0 0 / 0.02) 45%, oklch(1 0 0 / 0.05)),
    var(--vidro-tinta);
  border: 1px solid var(--vidro-borda);
  box-shadow:
    inset 0 1px 0 var(--vidro-aresta),
    inset 0 -1px 0 oklch(1 0 0 / 0.07),
    inset 0 0 0 1px oklch(1 0 0 / 0.03),
    inset 0 -18px 30px -18px oklch(0.75 0.12 240 / 0.22),
    var(--sombra-2);
}
/* Reflexo especular fixo no canto superior */
.vidro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at 22% -30%, oklch(1 0 0 / 0.14), transparent 50%);
}
/* Aresta de luz: borda com gradiente, mais forte em cima-esquerda */
.vidro::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(140deg, oklch(1 0 0 / 0.55), oklch(1 0 0 / 0.05) 30%, oklch(1 0 0 / 0) 60%, oklch(0.8 0.1 230 / 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Único vidro com desfoque real: o cartão de entrada (tela parada, sem vídeo). */
.vidro-refrata { -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
.vidro-leve {
  background: oklch(0.15 0.05 264 / 0.8);
  border: 1px solid oklch(1 0 0 / 0.12);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), var(--sombra-1);
}

/* ── Botões ────────────────────────────────────────────── */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 44px; padding: 0 var(--e-5);
  border: 0; border-radius: var(--r-pill);
  font-size: var(--t-md); font-weight: 550; letter-spacing: 0.005em; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: transform var(--d-rapida) var(--ease-saida), background-color var(--d-media), box-shadow var(--d-media) var(--ease-saida), color var(--d-media), opacity var(--d-media);
}
.botao:active { transform: scale(0.97); }
.botao:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.botao-primario {
  color: oklch(0.99 0.005 250);
  background: linear-gradient(180deg, oklch(0.7 0.17 250), var(--acao) 55%, var(--acao-escuro));
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.45),
    inset 0 -2px 6px oklch(0.35 0.2 266 / 0.55),
    0 0 0 1px oklch(0.45 0.2 264 / 0.8),
    0 8px 24px -6px oklch(0.55 0.22 260 / 0.65);
}
.botao-primario:hover { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.55), inset 0 -2px 6px oklch(0.35 0.2 266 / 0.55), 0 0 0 1px oklch(0.55 0.2 260 / 0.9), 0 10px 32px -6px oklch(0.6 0.22 255 / 0.85); transform: translateY(-1px); }
.botao-primario:hover:active { transform: scale(0.97); }
.botao-grande { min-height: 52px; width: 100%; font-size: var(--t-lg); }
.botao-vidro { background: oklch(1 0 0 / 0.07); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16), inset 0 0 0 1px oklch(1 0 0 / 0.1); color: var(--texto); }
.botao-vidro:hover, .botao-vidro[aria-expanded="true"] { background: oklch(1 0 0 / 0.13); }
.botao-icone { width: 44px; min-height: 44px; padding: 0; background: transparent; color: var(--texto-2); }
.botao-icone:hover { background: oklch(1 0 0 / 0.09); color: var(--texto); }
.botao-mini { width: 36px; min-height: 36px; border-radius: 12px; color: var(--texto); }
.botao-mini .ico { width: 16px; height: 16px; }
.botao-parar {
  color: oklch(0.98 0.01 20);
  background: linear-gradient(180deg, oklch(0.66 0.17 22), oklch(0.56 0.19 22));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.4), 0 0 0 1px oklch(0.45 0.16 22 / 0.8), 0 8px 24px -8px oklch(0.6 0.2 22 / 0.6);
}

/* ── Marca ─────────────────────────────────────────────── */
.marca { display: inline-flex; align-items: center; gap: var(--e-3); }
.marca-icone { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: oklch(0.99 0 0);
  background: linear-gradient(150deg, oklch(0.78 0.13 238), var(--acao) 50%, oklch(0.45 0.22 268));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.5), 0 6px 18px -6px oklch(0.6 0.2 255 / 0.9); }
.marca-icone svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marca-texto { font-weight: 650; letter-spacing: -0.01em; font-size: var(--t-lg); }
.marca-pequena .marca-icone { width: 30px; height: 30px; border-radius: 9px; }
.marca-pequena .marca-icone svg { width: 16px; height: 16px; }
.marca-pequena .marca-texto { font-size: var(--t-md); }

/* ── Entrada ───────────────────────────────────────────── */
.entrada { position: relative; z-index: 1; min-height: 100%; display: grid; place-items: center; padding: var(--e-5) var(--e-4); overflow-y: auto; height: 100%; }
.cartao-entrada { width: min(440px, 100%); padding: var(--e-6); border-radius: var(--r-xl); display: grid; gap: var(--e-4);
  animation: surgir var(--d-lenta) var(--ease-saida) both; }
.entrada-titulo { margin: var(--e-3) 0 0; font-size: var(--t-xl); line-height: 1.06; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance;
  background: linear-gradient(180deg, oklch(0.99 0.005 250), oklch(0.82 0.06 245)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.entrada-sub { margin: 0; color: var(--texto-2); text-wrap: pretty; }
.campo { display: grid; gap: var(--e-2); margin-top: var(--e-2); }
.campo-rotulo { font-size: var(--t-sm); font-weight: 550; color: var(--texto-2); }
.campo input {
  height: 52px; padding: 0 var(--e-4); border-radius: var(--r-md); font-size: var(--t-lg);
  background: oklch(0.1 0.04 266 / 0.55); border: 1px solid oklch(1 0 0 / 0.12);
  box-shadow: inset 0 2px 6px oklch(0.03 0.04 266 / 0.6), 0 1px 0 oklch(1 0 0 / 0.08);
  transition: border-color var(--d-media), box-shadow var(--d-media);
}
.campo input::placeholder { color: var(--texto-3); }
.campo input:focus { outline: none; border-color: var(--acao-claro); box-shadow: inset 0 2px 6px oklch(0.03 0.04 266 / 0.6), 0 0 0 4px oklch(0.62 0.2 259 / 0.28); }
.campo-erro { margin: calc(var(--e-2) * -1) 0 0; min-height: 1.2em; font-size: var(--t-sm); color: var(--perigo); }
.entrada-specs { list-style: none; margin: var(--e-2) 0 0; padding: var(--e-4) 0 0; border-top: 1px solid oklch(1 0 0 / 0.08);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-2) var(--e-4); font-size: var(--t-sm); color: var(--texto-3); }
.entrada-specs .mono { color: var(--texto); }
@keyframes surgir { from { opacity: 0; transform: translateY(14px) scale(0.985); } }

/* ── Sala ──────────────────────────────────────────────── */
.sala { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto 1fr; padding: var(--e-3); gap: var(--e-3); }
.topo { display: flex; align-items: center; gap: var(--e-4); min-height: 56px; padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-radius: var(--r-lg); }
.membros { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: var(--e-1); overflow-x: auto; scrollbar-width: none; min-width: 0; }
.membro { display: inline-flex; align-items: center; gap: var(--e-2); padding: 4px 12px 4px 4px; border-radius: var(--r-pill); font-size: var(--t-sm); white-space: nowrap;
  background: oklch(1 0 0 / 0.05); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.07); transition: opacity var(--d-media), background var(--d-media); animation: surgir var(--d-media) var(--ease-saida) both; }
.membro[data-transmitindo] { background: oklch(0.62 0.2 259 / 0.2); box-shadow: inset 0 0 0 1px oklch(0.74 0.15 246 / 0.45); }
.membro[data-offline] { opacity: 0.55; }
.membro-eu { font-weight: 600; }
.membro .ico { width: 14px; height: 14px; color: var(--ciano); }
.avatar { --h: 250; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; font-size: 11px; font-weight: 700; color: oklch(0.99 0 0);
  background: linear-gradient(150deg, oklch(0.75 0.13 var(--h)), oklch(0.5 0.18 calc(var(--h) + 18)));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.45); position: relative; }
.avatar[data-estado]::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--fundo-1); background: var(--ok); }
.avatar[data-estado="offline"]::after { background: var(--alerta); }

.status { display: inline-flex; align-items: center; gap: var(--e-2); height: 40px; padding: 0 var(--e-4); border-radius: var(--r-pill); background: oklch(0.08 0.03 266 / 0.4); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08); font-size: var(--t-xs); color: var(--texto-2); white-space: nowrap; }
.status-ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--alerta); box-shadow: 0 0 0 3px oklch(0.84 0.14 78 / 0.2); }
.status[data-estado="conectado"] .status-ponto { background: var(--ok); box-shadow: 0 0 0 3px oklch(0.86 0.15 172 / 0.18), 0 0 10px oklch(0.86 0.15 172 / 0.7); }
.status[data-estado="conectando"] .status-ponto, .status[data-estado="reconectando"] .status-ponto { animation: piscar 1.1s ease-in-out infinite; }
.status-conta { color: var(--texto-3); }
@keyframes piscar { 50% { opacity: 0.3; } }

/* ── Palco ─────────────────────────────────────────────── */
.palco { --cols: 1; --rows: 1; position: relative; min-height: 0; display: grid; gap: var(--e-3); padding-bottom: 84px;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); }
.palco.foco { grid-template-columns: minmax(0, 1fr) clamp(180px, 18vw, 300px); grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); }
.palco.foco .tela { grid-column: 2; }
.palco.foco .tela[data-foco] { grid-column: 1; grid-row: 1 / span var(--rows); }
.palco.foco.so-uma .tela[data-foco] { grid-column: 1 / -1; }

.vazio { place-self: center; grid-column: 1 / -1; grid-row: 1 / -1; width: min(460px, 100%); padding: var(--e-7) var(--e-6); border-radius: var(--r-xl); text-align: center; display: grid; justify-items: center; gap: var(--e-3); animation: surgir var(--d-lenta) var(--ease-saida) both; }
.vazio h2 { margin: var(--e-2) 0 0; font-size: 1.5rem; letter-spacing: -0.025em; font-weight: 600; }
.vazio p { margin: 0 0 var(--e-3); color: var(--texto-2); text-wrap: pretty; max-width: 34ch; }
.vazio-icone { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--acao-claro);
  background: oklch(0.62 0.2 259 / 0.14); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2), inset 0 0 0 1px oklch(0.74 0.15 246 / 0.3), 0 0 40px -6px oklch(0.62 0.2 259 / 0.6); }
.vazio-icone svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Tela (tile) ───────────────────────────────────────── */
.tela { position: relative; min-width: 0; min-height: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--fundo-video);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08), var(--sombra-2); animation: surgir var(--d-lenta) var(--ease-saida) both; outline: none; }
.tela::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transition: box-shadow var(--d-media) var(--ease-saida);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.12); }
.tela[data-estado="ao-vivo"]::after { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.14), inset 0 0 0 1px oklch(0.88 0.13 205 / 0.28); }
.tela[data-foco]::after { box-shadow: inset 0 0 0 2px oklch(0.74 0.15 246 / 0.7); }
.tela-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--fundo-video); }
.tela[data-propria] .tela-video { opacity: 0.92; }

.tela-estado { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--e-3); color: var(--texto-2); font-size: var(--t-sm); text-align: center; padding: var(--e-4);
  background: radial-gradient(60% 60% at 50% 50%, oklch(0.2 0.07 262 / 0.75), oklch(0.09 0.03 266 / 0.92)); transition: opacity var(--d-media); }
.tela[data-estado="ao-vivo"] .tela-estado { opacity: 0; pointer-events: none; }
.tela[data-estado="pausada"] .spinner { display: none; }
.tela[data-estado="pausada"] .tela-estado { cursor: pointer; }
.spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid oklch(1 0 0 / 0.12); border-top-color: var(--acao-claro); animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(1turn); } }

.tela-acoes { position: absolute; top: var(--e-3); right: var(--e-3); display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: opacity var(--d-media) var(--ease-saida), transform var(--d-media) var(--ease-saida); }
.tela:hover .tela-acoes, .tela:focus-within .tela-acoes, .tela[data-toque] .tela-acoes { opacity: 1; transform: none; }
.tela[data-propria] [data-acao="som"] { display: none; }
.tela[data-estado="sem-previa"] .spinner { display: none; }
.tela[data-estado="sem-previa"] .tela-estado { cursor: pointer; }
.tela[data-propria] .ao-vivo { display: inline-flex; }
.tela-volume { position: absolute; top: 56px; right: var(--e-3); padding: var(--e-2) var(--e-3); border-radius: var(--r-pill); }
.tela-volume input { width: 120px; accent-color: var(--acao-claro); }

.tela-rodape { position: absolute; left: var(--e-3); right: var(--e-3); bottom: var(--e-3); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-2); pointer-events: none; }
.tela-nome { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; padding: 4px 12px 4px 4px; border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 550; }
.tela-nome-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-vivo { display: none; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--ciano); }
.ao-vivo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 8px var(--ciano); animation: piscar 1.6s ease-in-out infinite; }
.tela[data-estado="ao-vivo"] .ao-vivo { display: inline-flex; }
.tela-telemetria { padding: 5px 10px; border-radius: var(--r-pill); font-size: 10.5px; color: var(--texto-2); white-space: nowrap; opacity: 0; transition: opacity var(--d-media); }
.tela-telemetria:empty { display: none; }
.tela:hover .tela-telemetria, .tela:focus-within .tela-telemetria, .tela[data-foco] .tela-telemetria, .tela[data-toque] .tela-telemetria { opacity: 1; }

/* ── Doca ──────────────────────────────────────────────── */
.doca { position: fixed; z-index: 5; left: 50%; bottom: max(var(--e-4), env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--e-2); padding: 6px; border-radius: var(--r-pill); box-shadow: inset 0 1px 0 var(--vidro-aresta), inset 0 -1px 0 oklch(1 0 0 / 0.07), var(--sombra-3);
  animation: subir var(--d-lenta) var(--ease-mola) both 120ms; }
.doca-sep { width: 1px; height: 24px; background: oklch(1 0 0 / 0.12); margin: 0 2px; }
#btn-compartilhar { min-width: 196px; }
#resumo-qualidade { font-size: var(--t-sm); }
@keyframes subir { from { opacity: 0; transform: translate(-50%, 24px) scale(0.96); } }

/* ── Ajustes ───────────────────────────────────────────── */
.ajustes { position: fixed; z-index: 6; left: 50%; bottom: calc(max(var(--e-4), env(safe-area-inset-bottom)) + 72px); transform: translateX(-50%);
  width: min(560px, calc(100vw - 2 * var(--e-4))); max-height: calc(100dvh - 160px); overflow-y: auto; overflow-x: hidden; padding: var(--e-5); border-radius: var(--r-xl);
  display: grid; gap: var(--e-5); --vidro-tinta: oklch(0.19 0.07 263 / 0.9); --vidro-blur: 40px; box-shadow: inset 0 1px 0 var(--vidro-aresta), var(--sombra-3);
  animation: abrir-ajustes var(--d-media) var(--ease-saida) both; transform-origin: 50% 100%; scrollbar-width: thin; }
@keyframes abrir-ajustes { from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(0.97); } }
.ajustes-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.ajustes-topo h2 { margin: 0; font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; }
.ajustes-aviso { margin: 2px 0 0; font-size: var(--t-sm); color: var(--texto-3); }
.ajustes-topo .botao-icone { margin: -8px -8px 0 0; }
.grupo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--e-2); }
.grupo legend { padding: 0; margin-bottom: var(--e-2); display: flex; width: 100%; justify-content: space-between; font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-3); }
.grupo legend output { color: var(--acao-claro); letter-spacing: 0.02em; text-transform: none; font-size: var(--t-sm); }
.grupo-linha { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--e-4); }

.perfis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
.perfil { position: relative; display: grid; gap: 2px; text-align: left; padding: var(--e-3) var(--e-4); border-radius: var(--r-md); border: 0; cursor: pointer;
  background: oklch(1 0 0 / 0.045); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.08); transition: background var(--d-media), box-shadow var(--d-media), transform var(--d-rapida) var(--ease-saida); }
.perfil:hover { background: oklch(1 0 0 / 0.08); }
.perfil:active { transform: scale(0.98); }
.perfil[aria-checked="true"] { background: linear-gradient(180deg, oklch(0.62 0.2 259 / 0.32), oklch(0.62 0.2 259 / 0.16)); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2), inset 0 0 0 1px oklch(0.74 0.15 246 / 0.65), 0 6px 20px -8px oklch(0.6 0.22 258 / 0.7); }
.perfil-nome { font-weight: 600; font-size: var(--t-md); }
.perfil-specs { font-family: var(--mono); font-size: var(--t-xs); color: var(--texto-2); letter-spacing: 0.02em; }
.perfil-desc { font-size: var(--t-xs); color: var(--texto-3); }

.segmentado { display: flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: oklch(0.08 0.03 266 / 0.5); box-shadow: inset 0 1px 3px oklch(0.03 0.04 266 / 0.6), inset 0 0 0 1px oklch(1 0 0 / 0.06); }
.segmentado button { flex: 1; min-height: 36px; padding: 0 var(--e-2); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--texto-2); font-size: var(--t-sm); font-weight: 550; cursor: pointer; white-space: nowrap; transition: background var(--d-media), color var(--d-media), box-shadow var(--d-media); }
.segmentado button:hover { color: var(--texto); }
.segmentado button[aria-checked="true"] { color: var(--texto); background: linear-gradient(180deg, oklch(1 0 0 / 0.2), oklch(1 0 0 / 0.1)); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.3), 0 2px 8px -2px oklch(0.03 0.04 266 / 0.7); }
.segmentado button:disabled { opacity: 0.4; cursor: not-allowed; }

input[type="range"] { width: 100%; height: 28px; accent-color: var(--acao); background: transparent; cursor: pointer; }
#bitrate { -webkit-appearance: none; appearance: none; }
#bitrate::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--acao) var(--p, 30%), oklch(1 0 0 / 0.12) var(--p, 30%)); box-shadow: inset 0 1px 2px oklch(0.03 0.04 266 / 0.6); }
#bitrate::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: oklch(0.98 0.01 250); box-shadow: 0 0 0 4px oklch(0.62 0.2 259 / 0.35), 0 2px 6px oklch(0.03 0.04 266 / 0.6); }
#bitrate::-moz-range-track { height: 6px; border-radius: 3px; background: oklch(1 0 0 / 0.12); }
#bitrate::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--acao); }
#bitrate::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: oklch(0.98 0.01 250); box-shadow: 0 0 0 4px oklch(0.62 0.2 259 / 0.35); }
.auto { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-md);
  background: linear-gradient(180deg, oklch(0.88 0.13 205 / 0.08), oklch(0.88 0.13 205 / 0.03)); box-shadow: inset 0 0 0 1px oklch(0.88 0.13 205 / 0.22), inset 0 1px 0 oklch(1 0 0 / 0.1); }
.auto-selo { flex: none; margin-top: 2px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--fundo-0); background: var(--ciano); box-shadow: 0 0 12px oklch(0.88 0.13 205 / 0.5); }
.auto-texto { display: grid; gap: 2px; }
.auto-texto strong { font-size: var(--t-sm); font-weight: 600; color: var(--texto); }
.dica { margin: 0; font-size: var(--t-xs); color: var(--texto-3); line-height: 1.45; }
.dica-jogo { padding-top: var(--e-4); border-top: 1px solid oklch(1 0 0 / 0.08); }
.dica-jogo strong { color: var(--texto-2); font-weight: 600; }

.chave { display: flex; align-items: flex-start; gap: var(--e-3); cursor: pointer; }
.chave input { position: absolute; opacity: 0; pointer-events: none; }
.chave-trilho { flex: none; width: 44px; height: 26px; border-radius: var(--r-pill); padding: 3px; background: oklch(0.08 0.03 266 / 0.6); box-shadow: inset 0 1px 3px oklch(0.03 0.04 266 / 0.7), inset 0 0 0 1px oklch(1 0 0 / 0.1); transition: background var(--d-media); }
.chave-bola { display: block; width: 20px; height: 20px; border-radius: 50%; background: oklch(0.9 0.02 250); box-shadow: 0 2px 4px oklch(0.03 0.04 266 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.8); transition: transform var(--d-media) var(--ease-mola); }
.chave input:checked + .chave-trilho { background: var(--acao); }
.chave input:checked + .chave-trilho .chave-bola { transform: translateX(18px); background: oklch(1 0 0); }
.chave input:focus-visible + .chave-trilho { outline: 2px solid var(--acao-claro); outline-offset: 3px; }
.chave input:disabled ~ * { opacity: 0.5; }
.chave-texto { display: grid; gap: 2px; }
.chave-texto strong { font-weight: 600; font-size: var(--t-md); }

/* ── Avisos ────────────────────────────────────────────── */
.avisos { position: fixed; z-index: 8; top: 84px; left: 50%; transform: translateX(-50%); display: grid; gap: var(--e-2); justify-items: center; pointer-events: none; width: min(440px, calc(100vw - 32px)); }
.aviso { pointer-events: auto; padding: var(--e-3) var(--e-4); border-radius: var(--r-md); font-size: var(--t-sm); background: oklch(0.22 0.07 263 / 0.96);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2), inset 0 0 0 1px oklch(1 0 0 / 0.1), var(--sombra-2); animation: surgir var(--d-media) var(--ease-saida) both; }
.aviso[data-tipo="erro"] { box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.2), inset 0 0 0 1px oklch(0.7 0.17 22 / 0.6), var(--sombra-2); }
.aviso.saindo { opacity: 0; transform: translateY(-6px); transition: opacity var(--d-media), transform var(--d-media); }

/* ── Responsivo ────────────────────────────────────────── */
@media (max-width: 760px) {
  .topo { flex-wrap: wrap; gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3); }
  .membros { order: 3; width: 100%; margin: 0; }
  .status { margin-left: auto; }
  .marca-pequena .marca-texto { font-size: var(--t-sm); }
  .palco { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: minmax(200px, 1fr); overflow-y: auto; }
  .palco.foco .tela, .palco.foco .tela[data-foco] { grid-column: 1; grid-row: auto; }
  #btn-compartilhar { min-width: 0; }
  #btn-compartilhar span { display: none; }
  #btn-compartilhar { width: 52px; padding: 0; }
  .grupo-linha, .perfis { grid-template-columns: minmax(0, 1fr); }
  .cartao-entrada { padding: var(--e-5); }
  .tela-acoes { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .vidro, .vidro-leve, .aviso, .vidro-refrata { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--fundo-1); }
}