/* Salinha — identidade "sala de estar"
   Casa à noite: madeira escura, luz de abajur, sofá, a TV como palco.
   Terracota = ação/marca · mostarda = quem está falando/luz · creme = texto. */
@font-face { font-family: "Outfit"; src: url("outfit.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fraunces-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fraunces-700i.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  /* madeira, do mais escuro ao mais claro */
  --bg-0: #140f0c;
  --bg-1: #1b1411;
  --bg-2: #241b16;
  --bg-3: #2e231c;
  --bg-4: #3a2c24;
  --hover: #45352b;
  --line: #f4e9dc14;
  --line-hi: #f4e9dc22;
  /* texto */
  --text: #f4e9dc;
  --muted: #c9b5a2;
  --faint: #8c7766;
  /* marca */
  --terracota: #e2673a;
  --terracota-2: #c9452f;
  --terracota-soft: #e2673a26;
  --mostarda: #e8b33c;
  --oliva: #8fa35f;
  --red: #e5574a;
  --red-soft: #e5574a26;
  /* forma */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --avatar-r: 10px;
  --tv: #33261f;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-0);
  color: var(--text);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
::selection { background: var(--terracota); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

button, input, select { font: inherit; color: inherit; }
button {
  cursor: pointer; border: 0; border-radius: 999px; padding: 10px 18px;
  background: var(--bg-4); font-weight: 600; transition: background .15s, transform .1s;
}
button:hover { background: var(--hover); }
button:active { transform: translateY(1px); }
button.primary { background: var(--terracota); color: #fff; }
button.primary:hover { background: #ec7547; }
button.big { padding: 14px 18px; font-size: 16px; }
button:disabled { opacity: .6; cursor: wait; }

input, select {
  width: 100%; background: var(--bg-1); border: 1.5px solid var(--bg-4); border-radius: var(--r-sm);
  padding: 11px 13px; outline: none; transition: border-color .15s;
}
input::placeholder { color: var(--faint); }
input:focus, select:focus { border-color: var(--mostarda); }
input[type=range] { padding: 0; border: 0; background: transparent; accent-color: var(--terracota); }
/* Chave liga/desliga (oval): vazada desligada, cheia ligada */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 42px; height: 24px; padding: 0; margin: 0;
  border-radius: 999px; border: 2px solid #7d6a5c; background: transparent; cursor: pointer;
  transition: background .22s, border-color .22s, box-shadow .22s;
}
input[type=checkbox]::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #9c8676;
  transition: transform .26s cubic-bezier(.3,1.5,.5,1), background .22s, width .16s;
}
input[type=checkbox]:checked { background: var(--terracota); border-color: var(--terracota); box-shadow: 0 0 0 3px #e25d2c22; }
input[type=checkbox]:checked::before { transform: translateX(18px); background: #fff; }
input[type=checkbox]:active::before { width: 17px; }
input[type=checkbox]:checked:active::before { transform: translateX(15px); }
input[type=checkbox]:focus-visible { outline: 2px solid var(--mostarda); outline-offset: 2px; }
input[type=checkbox]:disabled { opacity: .45; cursor: default; }
svg { width: 22px; height: 22px; fill: currentColor; display: block; }
svg[fill="none"] { fill: none; }
a { color: var(--mostarda); }
.muted { color: var(--muted); }

/* rótulos de seção: serifada itálica, minúscula — a "voz" da casa */
.section-label {
  font-family: var(--display); font-style: italic; font-weight: 700; font-size: 15px;
  color: var(--muted); padding: 16px 16px 6px;
}

/* ---------- Entrada ---------- */
.join {
  min-height: 100%; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px 16px;
  background:
    radial-gradient(circle at 85% 8%, #e8b33c2e 0%, transparent 38%),   /* luz do abajur */
    radial-gradient(circle at 10% 100%, #e2673a1f 0%, transparent 45%),
    var(--bg-1);
}
.card {
  width: min(410px, 100%); background: var(--bg-2);
  border: 1.5px solid var(--bg-4); padding: 28px; border-radius: var(--r-lg);
  display: grid; gap: 16px; box-shadow: 0 30px 70px #0009;
}
.brand { display: flex; align-items: center; gap: 14px; }
.wordmark { font-family: var(--display); font-weight: 900; font-size: 36px; letter-spacing: -.02em; line-height: 1; }
.wordmark span, .side-foot span { color: var(--terracota); }
.tagline { font-family: var(--display); font-style: italic; font-weight: 700; color: var(--mostarda); font-size: 16px; margin-top: 4px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
label small { font-weight: 400; color: var(--faint); }
label input, label select { font-weight: 400; font-size: 15px; color: var(--text); }
.err { color: #ff9b8a; min-height: 1em; margin: 0; font-size: 14px; }

/* ---------- App ---------- */

.side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 16px 10px 14px 16px; border-bottom: 1.5px solid var(--bg-3);
}
.room-name { font-family: var(--display); font-weight: 900; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { color: var(--muted); font-size: 12px; margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--oliva); flex: none; }
.status.warn, .empty.warn { color: var(--mostarda); }
.status.warn::before { background: var(--mostarda); }
.icon { padding: 8px; background: transparent; border-radius: var(--r-sm); color: var(--muted); }
.icon:hover { background: var(--bg-3); color: var(--text); }
.icon.sm { padding: 6px; }
.icon.sm svg { width: 18px; height: 18px; }

.people { list-style: none; margin: 0; padding: 0 8px 8px; overflow-y: auto; flex: 1; }
.p-main { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; }
.p-main:hover { background: var(--bg-3); }
.avatar {
  flex: none; width: 34px; height: 34px; border-radius: var(--avatar-r);
  display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 15px;
  box-shadow: 0 0 0 2px transparent; transition: box-shadow .12s;
}
.avatar.sm { width: 38px; height: 38px; }
.person.speaking .avatar { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--mostarda); }
.person.speaking .p-name { color: var(--text); }
.p-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; }
.p-rtt { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.p-icons { display: flex; align-items: center; gap: 4px; color: var(--red); }
.p-icons svg { width: 16px; height: 16px; }
.live { background: var(--terracota); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.p-vol { padding: 4px 12px 10px 52px; font-weight: 500; }
.side-foot {
  display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-top: 1.5px solid var(--bg-3);
  font-family: var(--display); font-weight: 900; font-size: 16px; color: var(--muted);
}
.side-foot small { margin-left: auto; font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--faint); }

/* ---------- Telas: cada transmissão é uma TV na sala ---------- */
.stage {
  position: relative; display: grid; gap: 14px; padding: 16px 16px 0; grid-auto-rows: 1fr; overflow: auto;
  background: radial-gradient(circle at 50% 0%, #e8b33c12 0%, transparent 50%);
}
.stage[data-count="2"], .stage[data-count="3"], .stage[data-count="4"] { grid-template-columns: 1fr 1fr; }
.stage.focused { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.stage.focused .tile:not(.is-focus) { display: none; }
.empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); text-align: center; padding: 24px; }
.empty svg { width: 96px; height: 96px; color: var(--bg-4); }
.empty p { margin: 0; max-width: 340px; font-size: 16px; }
.tile {
  position: relative; background: #000; border-radius: var(--r); overflow: hidden; min-height: 0; display: flex;
  border: 4px solid var(--tv); box-shadow: 0 14px 40px #0008;
}
.tile.is-focus { border-color: #4a372c; }
.tile video { width: 100%; height: 100%; object-fit: contain; background: #000; cursor: zoom-in; }
.tile.is-focus video { cursor: zoom-out; }
.tile::before {
  content: "ao vivo"; position: absolute; top: 10px; left: 10px; z-index: 1;
  background: var(--terracota); color: #fff; font-size: 12px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px;
}
.tile.self::before { content: "você ao vivo"; }
.tile-bar {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 10px; padding: 28px 12px 10px;
  background: linear-gradient(transparent, #000d); opacity: 0; transition: opacity .2s; pointer-events: none;
}
.tile:hover .tile-bar, .tile:focus-within .tile-bar { opacity: 1; }
@media (hover: none) { .tile-bar { opacity: 1; } }
.tile-bar * { pointer-events: auto; }
.tile-name { font-family: var(--display); font-weight: 900; font-size: 16px; white-space: nowrap; }
.tile-stats { flex: 1; font-size: 12px; color: #d8c8b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tile-actions { display: flex; align-items: center; gap: 2px; }
.tile-actions .icon { color: #fff; }
.tile-actions .icon:hover { background: #ffffff1f; }
.tile-vol { width: 80px; }
.tile:fullscreen { border-radius: 0; border: 0; }
.tile:fullscreen .tile-bar { opacity: 0; }
.tile:fullscreen:hover .tile-bar { opacity: 1; }

/* ---------- Chat ---------- */
.chat-label { border-bottom: 1.5px solid var(--bg-3); padding-bottom: 12px; }
.msgs { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; gap: 10px; }
.msg > div { min-width: 0; }
.msg-head { display: flex; gap: 8px; align-items: baseline; }
.msg-head b { font-weight: 700; }
.msg-head time { font-size: 11px; color: var(--faint); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; color: #e6d8c9; }
.msg.sys { color: var(--faint); font-size: 13px; justify-content: center; font-style: italic; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1.5px solid var(--bg-3); }
.chat-form input { background: var(--bg-1); border-radius: 999px; padding-left: 16px; }

/* ---------- Controles ---------- */
.controls {
  justify-self: center; display: flex; gap: 8px; align-items: center;
  margin: 14px 12px calc(16px + var(--safe-b)); padding: 8px;
  background: var(--bg-2); border: 1.5px solid var(--bg-4); border-radius: 999px; box-shadow: 0 12px 34px #0009;
}
.ctl { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; padding: 0; background: var(--bg-4); color: var(--text); }
.ctl:hover { background: var(--hover); }
.ctl.off { background: var(--red-soft); color: var(--red); }
.ctl.on { background: var(--mostarda); color: #3a2604; }
.ctl.danger { background: var(--terracota-2); color: #fff; width: 64px; border-radius: 999px; margin-left: 6px; }
.ctl.danger:hover { background: #d9533c; }
.ctl.disabled { opacity: .4; }

/* ---------- Diálogo ---------- */
dialog {
  background: var(--bg-2); color: var(--text); border: 1.5px solid var(--bg-4); border-radius: var(--r-lg);
  padding: 0; width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 32px); box-shadow: 0 30px 80px #000c;
}
dialog::backdrop { background: #0a0705cc; }
.settings { padding: 22px; display: grid; gap: 18px; }
.settings h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 26px; }
fieldset { border: 1.5px solid var(--bg-4); padding: 14px; margin: 0; display: grid; gap: 12px; border-radius: var(--r); }
legend { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 15px; color: var(--mostarda); padding: 0 6px; }
label.check { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 400; font-size: 14px; cursor: pointer; }
label.check > input[type=checkbox] { order: 9; margin-left: auto; }
.hint { margin: 0; color: var(--faint); font-size: 12px; }
details[open] > :not(summary) { margin-top: 10px; }
details { display: grid; }
summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; }

.toast {
  position: fixed; left: 50%; bottom: calc(104px + var(--safe-b)); transform: translate(-50%, 20px);
  background: var(--bg-3); color: var(--text); padding: 11px 18px; border-radius: var(--r);
  border: 1.5px solid var(--bg-4); box-shadow: 0 12px 40px #000a;
  opacity: 0; pointer-events: none; transition: .2s; max-width: calc(100% - 32px); text-align: center; z-index: 10;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.unlock { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 20; background: var(--terracota); color: #fff; box-shadow: 0 8px 30px #000a; }

/* ---------- Celular ---------- */
@media (max-width: 860px) {
  .stage, .stage[data-count] { grid-template-columns: 1fr; padding: 12px 12px 0; }
  .controls { margin: 8px 8px calc(10px + var(--safe-b)); }
  .ctl { width: 52px; height: 52px; }
  .ctl.danger { width: 60px; }
  .chat-label { display: none; }
}

/* ---------- Conta / login ---------- */
.auth { display: grid; gap: 12px; }
.auth-login { display: grid; gap: 12px; justify-items: center; padding: 16px; border-radius: var(--r); background: var(--bg-1); border: 1.5px dashed var(--bg-4); text-align: center; }
.pitch { margin: 0; font-size: 14px; color: var(--muted); }
.pitch b { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--mostarda); display: block; line-height: 1.1; }
.g-btn { min-height: 44px; display: grid; place-items: center; }
.account { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r); background: var(--bg-1); }
.acc-info { flex: 1; min-width: 0; display: grid; }
.acc-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-info small { color: var(--mostarda); font-family: var(--display); font-style: italic; font-weight: 700; font-size: 13px; }
button.link { background: transparent; color: var(--muted); padding: 6px 10px; font-weight: 500; text-decoration: underline; }
button.link:hover { color: var(--text); background: transparent; }
button.link.small { font-size: 12px; justify-self: end; padding: 2px 6px; color: var(--faint); }

/* ---------- Páginas de texto (privacidade, termos) ---------- */
.doc-page { background: var(--bg-1); }
.doc { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; line-height: 1.65; color: #e6d8c9; }
.doc-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-family: var(--display); font-weight: 900; font-size: 24px; }
.doc a.doc-brand { color: var(--text); }
.doc-brand i { color: var(--terracota); font-style: normal; }
.doc h1 { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 6vw, 42px); color: var(--text); margin: 28px 0 4px; line-height: 1.1; }
.doc h2 { font-family: var(--display); font-weight: 900; font-size: 21px; color: var(--text); margin: 32px 0 8px; }
.doc-date { color: var(--faint); margin: 0 0 24px; }
.doc a { color: var(--mostarda); }
.doc b { color: var(--text); }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc-back { margin-top: 40px; padding-top: 16px; border-top: 1.5px solid var(--bg-3); }
.about { width: min(410px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.about div { display: grid; gap: 2px; text-align: center; padding: 10px 6px; border-radius: var(--r); background: #241b1680; }
.about b { font-family: var(--display); font-weight: 900; color: var(--mostarda); font-size: 16px; }
.about span { font-size: 12px; color: var(--muted); line-height: 1.3; }

/* =================== Efeitos e microinterações =================== */
/* Botão do Google: o iframe dele é de tema claro; sem isso o navegador pinta um fundo branco atrás. */
.g-btn, .g-btn iframe { color-scheme: light; }

.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }

/* Botões: leve "apertar" */
.ctl, button.primary { transition: background .15s, transform .12s cubic-bezier(.3,1.6,.6,1), box-shadow .15s; }
.ctl:active, button.primary:active { transform: scale(.92); }
.ctl.on-soft { background: var(--hover); }

/* Entrar na sala: TV ligando */
.app.tv-on { animation: tv-on .55s cubic-bezier(.2,.8,.2,1); transform-origin: center; }
@keyframes tv-on {
  0% { transform: scale(1, .004); filter: brightness(3); opacity: .6; }
  45% { transform: scale(1, .004); filter: brightness(3); opacity: 1; }
  70% { transform: scale(1, 1.02); filter: brightness(1.4); }
  100% { transform: none; filter: none; }
}

/* Celebração de fundador */
.celebrate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: #0a0705d9; animation: fade-in .25s ease; }
.celebrate.leaving { animation: fade-out .25s ease forwards; }
.celebrate-card {
  width: min(420px, 100%); text-align: center; display: grid; gap: 10px; justify-items: center;
  background: var(--bg-2); border: 1.5px solid var(--bg-4); border-radius: 24px; padding: 30px 24px 24px;
  box-shadow: 0 30px 80px #000c, 0 0 0 6px #e2673a1a; animation: card-pop .55s cubic-bezier(.2,1.4,.4,1);
}
.celebrate-logo { animation: logo-bounce 1.1s cubic-bezier(.3,1.6,.5,1) .15s both; filter: drop-shadow(0 10px 24px #e2673a66); }
.celebrate-kicker { margin: 4px 0 0; font-family: var(--display); font-style: italic; font-weight: 700; color: var(--mostarda); font-size: 18px; }
.celebrate-card h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 9vw, 46px); line-height: 1; }
.celebrate-num { color: var(--terracota); font-variant-numeric: tabular-nums; }
.celebrate-text { margin: 4px 0 10px; color: var(--muted); }
.celebrate-text strong { color: var(--text); }
.celebrate-card button { width: 100%; }
@keyframes card-pop { from { transform: scale(.7) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes logo-bounce { 0% { transform: scale(0) rotate(-20deg); } 60% { transform: scale(1.15) rotate(6deg); } 100% { transform: none; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* Login: conta aparece com um pulinho */
.pop-in { animation: card-pop .5s cubic-bezier(.2,1.4,.4,1); }
.slide-in { animation: slide-up .45s ease .1s both; }
@keyframes slide-up { from { transform: translateY(14px); opacity: 0; } }

/* Avisos no topo do palco */
.announcements { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5; display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100% - 24px); }
.announce {
  display: flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px;
  background: var(--bg-3); border: 1.5px solid var(--bg-4); box-shadow: 0 10px 30px #0009; font-weight: 600; font-size: 14px;
  animation: drop-in .45s cubic-bezier(.2,1.4,.4,1);
}
.announce.leaving { animation: fade-up .4s ease forwards; }
.announce-emoji { font-size: 18px; display: inline-block; animation: wiggle .9s ease .2s; }
@keyframes drop-in { from { transform: translateY(-24px) scale(.8); opacity: 0; } }
@keyframes fade-up { to { transform: translateY(-14px); opacity: 0; } }
@keyframes wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-18deg) scale(1.2); } 50% { transform: rotate(14deg); } 75% { transform: rotate(-8deg); } }

/* Reações */
.react-wrap { position: relative; }
.react-pop {
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; gap: 2px; padding: 6px; border-radius: 999px; background: var(--bg-3); border: 1.5px solid var(--bg-4);
  box-shadow: 0 12px 34px #000a; animation: drop-up .3s cubic-bezier(.2,1.4,.4,1);
}
.react-pop button { background: transparent; padding: 6px 8px; font-size: 24px; line-height: 1; border-radius: 50%; transition: transform .12s; }
.react-pop button:hover { transform: scale(1.3) translateY(-3px); background: transparent; }
@keyframes drop-up { from { transform: translate(-50%, 12px) scale(.85); opacity: 0; } }
.float-emoji {
  position: absolute; bottom: 8px; z-index: 6; pointer-events: none; display: grid; justify-items: center;
  animation: float-up 3.2s cubic-bezier(.2,.6,.3,1) forwards;
}
.float-emoji span { font-size: 42px; filter: drop-shadow(0 4px 10px #0008); }
.float-emoji small { font-size: 11px; font-weight: 700; background: #000a; padding: 1px 8px; border-radius: 999px; margin-top: 2px; }
@keyframes float-up {
  0% { transform: translateY(20px) scale(.4); opacity: 0; }
  12% { transform: translateY(0) scale(1.15); opacity: 1; }
  100% { transform: translate(var(--drift), -70vh) rotate(var(--spin)) scale(.9); opacity: 0; }
}

/* Lista: quem acabou de chegar */
.person.arrived { animation: arrive .7s cubic-bezier(.2,1.4,.4,1); }
.person.arrived .avatar { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--terracota); }
@keyframes arrive { from { transform: translateX(-24px) scale(.9); opacity: 0; } 60% { transform: translateX(4px); } }

/* Chat: mensagens deslizam */
.msg { animation: slide-up .3s ease; }

/* Compartilhar: "escolhendo a tela…" */
.ctl.loading { position: relative; color: transparent; }
.ctl.loading::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 3px solid var(--mostarda); border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Telas: entram como TV ligando, e "sintonizando" com chiado até o vídeo chegar */
.tile-enter { animation: tv-on .5s cubic-bezier(.2,.8,.2,1); }
.tuning-screen {
  position: absolute; inset: 0; z-index: 1; display: none; place-content: center; justify-items: center; gap: 6px; text-align: center;
  background:
    linear-gradient(#0000 50%, #0003 50%) 0 0 / 100% 4px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
    #2a201b;
  animation: static .25s steps(4) infinite;
}
.tuning-screen span { font-family: var(--display); font-weight: 900; font-size: 20px; background: #000b; padding: 4px 14px; border-radius: 999px; }
.tuning-screen small { color: var(--text); background: #000a; padding: 2px 10px; border-radius: 999px; }
.tile.tuning .tuning-screen, .tile.waiting .tuning-screen { display: grid; }
.tile.tuning { min-height: 180px; }
@keyframes static { 0% { background-position: 0 0, 0 0; } 25% { background-position: 0 1px, -40px 20px; } 50% { background-position: 0 2px, 30px -50px; } 75% { background-position: 0 3px, -70px -10px; } 100% { background-position: 0 4px, 10px 60px; } }

/* Tela vazia: mascote dormindo */
.mascot { background: transparent; padding: 0; position: relative; cursor: pointer; border-radius: 24px; }
.mascot:hover { background: transparent; }
.mascot svg { width: 150px; height: auto; display: block; overflow: visible; }
.mascot .m-body { animation: breathe 3.6s ease-in-out infinite; transform-origin: 100px 160px; }
.mascot .m-antennas { animation: antenna 3.6s ease-in-out infinite; transform-origin: 100px 46px; }
.mascot .m-static { fill: #ffffff08; animation: flicker 4s steps(1) infinite; }
.mascot .m-eyes-awake { display: none; }
.mascot.awake .m-eyes-awake { display: inline; }
.mascot.awake .m-eyes-sleep { display: none; }
.mascot.awake .m-body { animation: hop .6s cubic-bezier(.3,1.6,.5,1); }
.mascot.awake .m-static { fill: #e8b33c22; }
.mascot.awake .zzz { opacity: 0; }
.zzz { position: absolute; top: 4px; right: -10px; font-family: var(--display); font-weight: 900; color: var(--muted); transition: opacity .2s; pointer-events: none; }
.zzz i { position: absolute; font-style: normal; opacity: 0; animation: zzz 3.6s ease-in infinite; }
.zzz i:nth-child(1) { font-size: 14px; }
.zzz i:nth-child(2) { font-size: 18px; animation-delay: 1.2s; }
.zzz i:nth-child(3) { font-size: 24px; animation-delay: 2.4s; }
@keyframes zzz { 0% { transform: translate(0, 10px); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(26px, -40px); opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.02, .98); } }
@keyframes antenna { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg); } }
@keyframes flicker { 0%, 100% { fill: #ffffff08; } 48% { fill: #ffffff14; } 50% { fill: #ffffff05; } }
@keyframes hop { 0% { transform: none; } 40% { transform: translateY(-14px) scale(1.04); } 100% { transform: none; } }
.empty-text { transition: opacity .3s, transform .3s; }
.empty-text.swap { opacity: 0; transform: translateY(6px); }

/* Quem prefere menos movimento: tudo parado */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .float-emoji { display: none; }
}

/* Celulares estreitos: 6 controles + sair cabem em 360px */
@media (max-width: 460px) {
  .controls { gap: 5px; padding: 6px; margin: 6px auto calc(8px + var(--safe-b)); max-width: calc(100vw - 12px); }
  .ctl { width: 44px; height: 44px; }
  .ctl svg { width: 20px; height: 20px; }
  .ctl.danger { width: 52px; margin-left: 2px; }
  .ctl.loading::after { inset: 11px; }
}

/* =================== Abertura: a TV liga e dá oi =================== */
.intro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(circle at 50% 42%, #3a2a1f 0%, var(--bg-1) 55%);
  animation: intro-out .45s ease 1.6s forwards;
}
html.no-intro .intro { display: none; }
.intro-tv { position: relative; width: min(190px, 46vw); animation: intro-drop .6s cubic-bezier(.3,1.5,.5,1) both; }
.intro-tv svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 18px 30px #0009); }
.intro .i-antennas { transform-box: fill-box; transform-origin: 50% 100%; animation: intro-wiggle .7s ease .45s; }
.intro .i-static { fill: #ffffff00; animation: intro-static .5s steps(1) .3s; }
.intro .i-flash { opacity: 0; transform-box: fill-box; transform-origin: center; animation: intro-flash .35s ease-out .72s; }
.intro .i-eyes { opacity: 0; transform-box: fill-box; transform-origin: center; animation: intro-eyes-on .25s ease .98s forwards, intro-blink .22s ease 1.38s; }
.i-spark { position: absolute; color: var(--mostarda); font-size: 20px; opacity: 0; animation: intro-spark .7s ease 1.05s; }
.i-spark.s1 { top: 8%; left: -8%; }
.i-spark.s2 { top: -6%; right: 2%; font-size: 26px; animation-delay: 1.15s; }
.i-spark.s3 { bottom: 18%; right: -10%; font-size: 16px; animation-delay: 1.22s; }
.intro-word { font-family: var(--display); font-weight: 900; font-size: 38px; letter-spacing: -.02em; opacity: 0; animation: intro-word .5s ease 1.0s forwards; }
.intro-word span { color: var(--terracota); }

@keyframes intro-drop { from { transform: translateY(-50px) scale(.6); opacity: 0; } 60% { opacity: 1; } }
@keyframes intro-wiggle { 0%, 100% { transform: none; } 30% { transform: rotate(-9deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
@keyframes intro-static { 0% { fill: #ffffff26; } 25% { fill: #ffffff0d; } 50% { fill: #ffffff33; } 75% { fill: #ffffff14; } 100% { fill: #ffffff00; } }
@keyframes intro-flash { 0% { opacity: 1; transform: scale(.1, 1); } 45% { opacity: 1; transform: scale(1, 1); } 100% { opacity: 0; transform: scale(1, 16); } }
@keyframes intro-eyes-on { from { opacity: 0; transform: scaleY(.1); } to { opacity: 1; transform: none; } }
@keyframes intro-blink { 0%, 100% { transform: none; } 50% { transform: scaleY(.1); } }
@keyframes intro-spark { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.2) rotate(40deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }
@keyframes intro-word { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes intro-out { to { opacity: 0; transform: scale(1.06); visibility: hidden; pointer-events: none; } }

/* Depois da abertura, o cartão de entrada sobe */
html:not(.no-intro) .join .card { animation: intro-rise .55s cubic-bezier(.2,1.2,.4,1) 1.65s both; }
html:not(.no-intro) .join .about { animation: intro-rise .55s ease 1.8s both; }
@keyframes intro-rise { from { opacity: 0; transform: translateY(24px) scale(.98); } }

/* =================== Apelido, amigos e convites =================== */
.nick-form { display: grid; gap: 10px; padding: 16px; border-radius: var(--r); background: var(--bg-1); border: 1.5px solid var(--bg-4); }
.nick-title { margin: 0; font-family: var(--display); font-weight: 900; font-size: 22px; text-align: center; }
.nick-input { display: flex; align-items: center; gap: 0; background: var(--bg-0); border: 1.5px solid var(--bg-4); border-radius: var(--r-sm); padding-left: 14px; }
.nick-input:focus-within { border-color: var(--mostarda); }
.nick-input span { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--terracota); }
.nick-input input { border: 0; background: transparent; font-size: 20px; font-weight: 600; padding: 12px 12px 12px 4px; }
.nick-input input:focus { box-shadow: none; }
.nick-hint { margin: 0; font-size: 13px; color: var(--faint); min-height: 1.3em; }
.nick-hint.ok { color: var(--oliva); }
.nick-hint.bad { color: #ff9b8a; }

/* Barra lateral com rolagem única (sala + amigos) */
.side-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px; }
.side-scroll .people { flex: none; overflow: visible; }
.add-friend { display: flex; gap: 6px; padding: 4px 12px 8px; }
.add-friend label { flex: 1; display: flex; align-items: center; background: var(--bg-1); border: 1.5px solid var(--bg-4); border-radius: 999px; padding-left: 12px; min-width: 0; }
.add-friend label:focus-within { border-color: var(--mostarda); }
.add-friend label span { color: var(--terracota); font-weight: 800; }
.add-friend input { border: 0; background: transparent; padding: 8px 8px 8px 2px; font-size: 14px; min-width: 0; }
.add-friend input:focus { box-shadow: none; }
.add-friend button { padding: 8px 14px; font-size: 13px; }
.friend-reqs { display: grid; gap: 6px; padding: 0 12px; }
.req { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--bg-3); font-size: 13px; animation: slide-up .3s ease; }
.req.in { border: 1.5px solid #e8b33c55; }
.req b { color: var(--text); }
.friends { list-style: none; margin: 0; padding: 4px 8px; display: grid; gap: 2px; }
.friend { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); }
.friend:hover { background: var(--bg-3); }
.friend .sm-av { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; display: grid; place-items: center; color: #fff; font-weight: 700; position: relative; flex: none; }
.friend .dot { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; border: 2.5px solid var(--bg-2); background: #6b5a4d; }
.friend.on .dot, .friend.room .dot, .friend.here .dot { background: var(--oliva); }
.friend.room .dot { background: var(--mostarda); }
.friend.off { opacity: .55; }
.f-info { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.f-info b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-info small { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend.here .f-info small { color: var(--oliva); }
.friend.room .f-info small { color: var(--mostarda); }
.f-actions { display: flex; gap: 4px; flex: none; }
.chip { padding: 4px 10px; font-size: 12px; border-radius: 999px; background: var(--bg-4); }
.chip.go { background: var(--terracota); color: #fff; }
.friends-empty { margin: 4px 16px; font-size: 13px; color: var(--faint); }

.side-foot .me-nick { font-family: var(--font); font-weight: 700; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot small { margin-left: auto; }

/* Convite chegando */
.invite-card {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 70; width: min(420px, calc(100% - 24px));
  display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 14px;
  background: var(--bg-2); border: 1.5px solid var(--terracota); border-radius: 18px; box-shadow: 0 20px 60px #000c, 0 0 0 6px #e2673a22;
  animation: drop-in .5s cubic-bezier(.2,1.4,.4,1);
}
.invite-card .avatar { width: 44px; height: 44px; font-size: 18px; animation: wiggle .9s ease .3s; }
.inv-text { display: grid; line-height: 1.3; }
.inv-text b { font-size: 16px; }
.inv-text span { color: var(--muted); font-size: 14px; }
.inv-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.inv-actions button { flex: 1; }

/* Botão vermelho vira "voltar pra casa" fora da sua salinha */
.ctl.danger.home { background: var(--oliva); }
.ctl.danger.home:hover { background: #9db46a; }
.stage.tv-on { animation: tv-on .5s cubic-bezier(.2,.8,.2,1); }
.row-end.left { justify-content: space-between; }

/* =================== Mascote vivo (tela vazia) =================== */
/* Dormindo: bolha de nariz enche e esvazia junto com a respiração */
.mascot .m-eyes-peek { display: none; }
.mascot .m-bubble { transform-box: fill-box; transform-origin: 15% 85%; animation: bubble 3.6s ease-in-out infinite; }
@keyframes bubble { 0%, 100% { transform: scale(.25); } 50% { transform: scale(1.15); } }
.m-pop { position: absolute; left: 60%; top: 52%; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 14px; color: #bfe3ff; opacity: 0; pointer-events: none; }

/* Espiando: abre os olhinhos, olha pro lado e pro outro, volta a dormir */
.mascot.peek .m-eyes-sleep, .mascot.peek .m-bubble-pos, .mascot.peek .zzz { display: none; }
.mascot.peek .m-eyes-peek { display: inline; animation: peek-look 2.4s ease-in-out; }
@keyframes peek-look {
  0% { transform: scaleY(.1); } 8% { transform: none; }
  20%, 38% { transform: translateX(-12px); }
  52%, 70% { transform: translateX(12px); }
  82% { transform: none; } 90% { transform: scaleY(.1); } 100% { transform: scaleY(.1); }
}
.mascot .m-eyes-peek { transform-box: view-box; transform-origin: 100px 95px; }

/* Antena treme (sonhando) */
.mascot.twitch .m-antennas { animation: twitch .6s ease; }
@keyframes twitch { 0%, 100% { transform: none; } 20% { transform: rotate(8deg); } 40% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-3deg); } }

/* Bolha estoura: "plic!" e volta a encher */
.mascot.popb .m-bubble { animation: bubble-pop .5s ease forwards; }
.mascot.popb .m-pop { animation: pop-text .9s ease; }
@keyframes bubble-pop { 0% { transform: scale(1.2); opacity: 1; } 60% { transform: scale(1.7); opacity: .9; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes pop-text { 0% { opacity: 0; transform: translateY(4px) scale(.6); } 30% { opacity: 1; transform: translateY(-6px) scale(1.1); } 100% { opacity: 0; transform: translateY(-18px); } }

/* Espreguiçada */
.mascot.stretch .m-body { animation: stretch 1.2s ease; }
@keyframes stretch { 0%, 100% { transform: none; } 35% { transform: scale(.94, 1.08); } 60% { transform: scale(1.05, .95); } }

/* Acordado pelo clique: sem bolha nem zZz */
.mascot.awake .m-bubble-pos { display: none; }

/* =================== Abertura: espia e depois sorri =================== */
.intro { animation-delay: 2.1s; }
.intro .i-peek { opacity: 0; transform-box: view-box; transform-origin: 100px 95px; animation: intro-peek .62s ease .98s; }
@keyframes intro-peek {
  0% { opacity: 1; transform: scaleY(.1); } 12% { opacity: 1; transform: none; }
  35%, 50% { opacity: 1; transform: translateX(-12px); }
  75%, 92% { opacity: 1; transform: translateX(12px); }
  100% { opacity: 1; transform: none; }
}
.intro .i-eyes { animation: intro-eyes-on .2s ease 1.6s forwards, intro-blink .22s ease 1.95s; }
.i-spark { animation-delay: 1.62s; }
.i-spark.s2 { animation-delay: 1.72s; }
.i-spark.s3 { animation-delay: 1.8s; }
html:not(.no-intro) .join .card { animation-delay: 2.15s; }
html:not(.no-intro) .join .about { animation-delay: 2.3s; }

@media (prefers-reduced-motion: reduce) {
  .mascot .m-bubble { animation: none; transform: scale(.8); }
}

/* Telas baixas: mascote e textos menores para nada ficar atrás dos controles */
.mascot svg { width: clamp(80px, 24vh, 150px); }
@media (max-height: 560px) {
  .empty { gap: 6px; padding: 8px; }
  .empty p { font-size: 14px; }
}

/* =================== App de PC =================== */
.titlebar { display: none; }
.is-desktop .titlebar {
  position: fixed; top: 0; left: 0; right: 0; height: 36px; z-index: 200; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; background: var(--bg-0); border-bottom: 1px solid #ffffff0a; -webkit-app-region: drag; user-select: none;
  font-family: var(--display); font-weight: 900; font-size: 15px; color: var(--muted);
}
.is-desktop .titlebar i { color: var(--terracota); font-style: normal; }
.is-desktop .app { height: calc(100dvh - 36px); margin-top: 36px; }
.is-desktop .join { padding-top: 56px; }
.is-desktop .intro { top: 36px; }
.is-desktop .invite-card, .is-desktop .ctl-banner { top: 52px; }
.desk-login { width: 280px; }

/* =================== Controle remoto =================== */
.ctl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 #e5574a88; animation: ctl-pulse 1.4s ease infinite; flex: none; }
@keyframes ctl-pulse { 70% { box-shadow: 0 0 0 8px #e5574a00; } 100% { box-shadow: 0 0 0 0 #e5574a00; } }

/* Faixa no PC de quem compartilha: sempre visível enquanto alguém controla */
.ctl-banner {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px; border-radius: 999px; background: #2a1712; border: 1.5px solid var(--red); box-shadow: 0 14px 40px #000c;
  animation: drop-in .45s cubic-bezier(.2,1.4,.4,1); font-size: 14px; white-space: nowrap; max-width: calc(100% - 24px);
}
.ctl-banner small { color: var(--faint); }
.ctl-ask .inv-actions.wrap { flex-wrap: wrap; }
.ctl-ask .inv-actions button { flex: 1 1 30%; }
button.primary.alt { background: var(--mostarda); color: #3a2604; }

/* Tela sendo controlada por mim */
.tile.controlling { border-color: var(--terracota); box-shadow: 0 0 0 2px #e2673a66, 0 14px 40px #0009; }
.tile.controlling video { cursor: default; }
.tile.controlling .tile-bar { display: none; }
.ctl-bar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px; border-radius: 999px; background: #000c; font-size: 13px; white-space: nowrap; max-width: calc(100% - 20px);
  opacity: .35; transition: opacity .2s; animation: drop-in .45s cubic-bezier(.2,1.4,.4,1);
}
.ctl-bar:hover { opacity: 1; }
.ctl-pad { color: var(--mostarda); }
.tile-actions .chip.ctl-req { margin-right: 4px; }
.tile-actions .chip:disabled { opacity: .7; }

/* Baixar o app de PC */
.get-app { width: min(410px, 100%); display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r); background: var(--bg-2); border: 1.5px solid var(--bg-4); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.get-app:hover { border-color: var(--terracota); transform: translateY(-1px); }
.get-app[hidden] { display: none; }
.get-app span:last-child { display: grid; line-height: 1.3; }
.get-app small { color: var(--muted); font-size: 12px; }
.get-app-icon { font-size: 26px; }
.get-app-icon svg { width: 26px; height: 26px; }
.get-app.small { width: 100%; padding: 10px 12px; }
html:not(.no-intro) .join .get-app { animation: intro-rise .55s ease 2.4s both; }
.update-card { border-color: var(--mostarda); box-shadow: 0 20px 60px #000c, 0 0 0 6px #e8b33c22; }

/* =================== Volumes, qualidade automática, salas e ligações =================== */
.p-vol { display: grid; gap: 6px; padding: 4px 10px 10px 50px; }
.vol-row { display: grid; grid-template-columns: 62px 1fr 42px; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.vol-row b, .gain-row b { font-variant-numeric: tabular-nums; color: var(--text); font-size: 12px; text-align: right; }
input[type=range].boost { accent-color: var(--mostarda); }
.chip.kick { justify-self: start; background: var(--red-soft); color: #ffb1a8; margin-top: 2px; }
.gain-row { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; }
.mic-meter { display: block; height: 6px; border-radius: 999px; background: var(--bg-0); overflow: hidden; }
.mic-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--oliva), var(--mostarda) 70%, var(--terracota)); transform-origin: left; transform: scaleX(0); transition: transform .06s linear; }
details.adv { display: grid; gap: 10px; }
details.adv[open] > :not(summary) { margin-top: 10px; }
.side-head { position: relative; }
.chip.icon-chip { padding: 4px 8px; }

/* Ligação */
.call-card {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 90; width: min(320px, calc(100% - 32px));
  display: grid; justify-items: center; gap: 6px; padding: 28px 20px 22px; text-align: center;
  background: var(--bg-2); border: 1.5px solid var(--bg-4); border-radius: 24px; box-shadow: 0 30px 80px #000d, 0 0 0 100vmax #0a070580;
  animation: card-pop .45s cubic-bezier(.2,1.4,.4,1);
}
.call-av { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #fff; margin-bottom: 8px; animation: call-pulse 1.6s ease infinite; }
@keyframes call-pulse { 0% { box-shadow: 0 0 0 0 #e2673a88; } 70% { box-shadow: 0 0 0 22px #e2673a00; } 100% { box-shadow: 0 0 0 0 #e2673a00; } }
.call-card b { font-size: 20px; }
.call-text { color: var(--muted); }
.call-actions { display: flex; gap: 24px; margin-top: 14px; }
.call-btn { width: 60px; height: 60px; border-radius: 50%; font-size: 24px; padding: 0; display: grid; place-items: center; }
.call-btn.hang { background: var(--red); color: #fff; }
.call-btn.answer { background: var(--oliva); animation: wiggle 1.2s ease infinite; }

/* App de PC: a janela nunca rola; só as áreas internas (listas, chat) rolam quando precisam */
html.is-desktop, html.is-desktop body { height: 100%; overflow: hidden; }
.is-desktop .join { height: calc(100dvh - 36px); min-height: 0; margin-top: 36px; padding-top: 24px; overflow-y: auto; overflow-x: hidden; }
.is-desktop .app { overflow: hidden; }

/* =================== Saguão, grupos, chat P2P, fotos, digitando, efeitos =================== */
/* Fotos de perfil */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.xs { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.avatar.xxs { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }
.avatar.lg { width: 64px; height: 64px; border-radius: 20px; font-size: 26px; }
.me-av { padding: 0; background: transparent; border-radius: 9px; flex: none; }
.me-av:hover { background: transparent; transform: scale(1.08); }
.me-av .avatar { width: 26px; height: 26px; }
.avatar-edit { display: flex; align-items: center; gap: 14px; }
.avatar-edit .row-end { margin-bottom: 4px; }
.p2p-note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); background: #8fa35f14; border: 1.5px solid #8fa35f40; border-radius: var(--r-sm); padding: 9px 11px; }
.p2p-note b { color: var(--oliva); }

/* Barra lateral com largura ajustável */
.side { position: relative; }
.side-resizer { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; cursor: col-resize; z-index: 6; }
.side-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .15s; }
.side-resizer:hover::after, body.resizing .side-resizer::after { background: var(--mostarda); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { pointer-events: none; }
.p-name small { color: var(--faint); font-weight: 400; }
.p-role { font-size: 13px; }
.p-adm { font-size: 13px; filter: saturate(.7); }
.adm-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.adm-row .chip.kick { margin-top: 0; }

/* Chat minimizado */
.chat-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1.5px solid var(--bg-3); padding-right: 10px; }
.chat-head .chat-label { border: 0; }
.chat-fab {
  position: fixed; right: 18px; bottom: 24px; z-index: 15; display: flex; align-items: center; gap: 8px; padding: 12px 18px;
  background: var(--bg-3); border: 1.5px solid var(--bg-4); box-shadow: 0 12px 34px #000a; animation: drop-in .4s cubic-bezier(.2,1.4,.4,1);
}
.chat-fab:hover { border-color: var(--terracota); }
.chat-fab .badge { background: var(--terracota); color: #fff; font-size: 11px; border-radius: 10px; padding: 0 7px; animation: wiggle .8s ease; }

/* Controles minimizados: só sobram microfone e áudio */
.ctl-mini { width: 30px; height: 30px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--faint); }
.ctl-mini:hover { background: var(--bg-3); color: var(--text); }
.ctl-mini svg { width: 18px; height: 18px; transition: transform .25s; }
.app.ctl-min .ctl-mini svg { transform: rotate(180deg); }
.app.ctl-min .controls > :not(#btnMic):not(#btnDeaf):not(#btnCtlMin) { display: none; }
.app.ctl-min .controls { margin-top: 8px; margin-bottom: calc(8px + var(--safe-b)); padding: 5px; gap: 5px; opacity: .85; }
.app.ctl-min .controls:hover { opacity: 1; }
.app.ctl-min .controls .ctl { width: 38px; height: 38px; }
.app.ctl-min .controls .ctl svg { width: 18px; height: 18px; }
.ctl.locked { background: var(--red-soft); color: var(--red); opacity: .6; cursor: not-allowed; }

/* ⚙ da tela */
.share-wrap { position: relative; display: flex; }
.share-gear {
  position: absolute; right: -5px; bottom: -5px; z-index: 2; width: 23px; height: 23px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; line-height: 1; background: var(--bg-3); color: var(--muted); border: 2px solid var(--bg-2);
  transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .15s;
}
.share-gear:hover, .share-gear.on { background: var(--mostarda); color: #3a2604; transform: rotate(90deg); }
.share-pop {
  position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); z-index: 20; width: 300px;
  display: grid; gap: 10px; padding: 14px; border-radius: var(--r); background: var(--bg-3); border: 1.5px solid var(--bg-4);
  box-shadow: 0 16px 44px #000b; animation: drop-up .3s cubic-bezier(.2,1.4,.4,1);
}
.sp-title { font-family: var(--display); font-weight: 900; font-size: 18px; }
.sp-row { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-1); }
.seg button { flex: 1; padding: 6px 6px; font-size: 12px; font-weight: 600; background: transparent; color: var(--muted); }
.seg button:hover { background: var(--bg-4); color: var(--text); }
.seg button.on { background: var(--terracota); color: #fff; }
.sp-hint { margin: 0; font-size: 11px; color: var(--faint); }

/* Saguão */
.lobby { position: absolute; inset: 0; z-index: 2; overflow-y: auto; padding: 28px clamp(16px, 4vw, 44px) 40px; display: grid; align-content: start; gap: 22px; }
.lobby-head h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(26px, 3.6vw, 38px); line-height: 1.1; letter-spacing: -.01em; animation: slide-up .45s ease both; }
.lobby-head h1 span { color: var(--terracota); }
.lobby-head p { margin: 8px 0 0; color: var(--muted); max-width: 560px; animation: slide-up .45s ease .08s both; }
.groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.g-card {
  --g: var(--terracota); position: relative; display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 22px;
  background: var(--bg-2); border: 1.5px solid var(--bg-4); cursor: pointer; text-align: left; color: var(--text); font-weight: 400;
  transition: transform .2s cubic-bezier(.3,1.5,.5,1), border-color .15s, box-shadow .2s; animation: card-in .5s cubic-bezier(.2,1.3,.4,1) both;
}
.g-card:hover { transform: translateY(-4px) rotate(-.5deg); border-color: var(--g); box-shadow: 0 18px 40px #0009, 0 0 0 4px color-mix(in srgb, var(--g) 22%, transparent); background: var(--bg-2); }
.g-card:focus-visible { outline: 2px solid var(--mostarda); outline-offset: 2px; }
.g-emoji { font-size: 54px; filter: drop-shadow(0 6px 12px #0009); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.g-card:hover .g-emoji { transform: scale(1.18) rotate(-10deg); }
.g-emoji.pop { animation: emoji-pop .45s cubic-bezier(.3,1.6,.5,1); }
.g-card.live .g-emoji { animation: bob 2.2s ease-in-out infinite; }
.g-onair { position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: var(--terracota); color: #fff; font-size: 11px; font-weight: 700; }
.g-onair::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: blink 1.2s ease infinite; }
.g-info { display: grid; min-width: 0; }
.g-info b { font-family: var(--display); font-weight: 900; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-info small { color: var(--faint); font-size: 12px; }
.g-live { display: flex; align-items: center; min-height: 28px; padding-left: 2px; }
.g-live .avatar { margin-right: -6px; border: 2px solid var(--bg-2); animation: bob 2.4s ease-in-out infinite; }
.g-live .avatar:nth-child(2n) { animation-delay: .4s; }
.g-live .avatar:nth-child(3n) { animation-delay: .8s; }
.g-more { margin-left: 12px; color: var(--muted); font-weight: 700; }
.g-quiet { color: var(--faint); font-size: 12px; }
.g-actions { display: flex; align-items: center; gap: 6px; }
.g-actions .icon { margin-left: auto; }
button.g-new { min-height: 250px; place-content: center; justify-items: center; text-align: center; gap: 6px; border-style: dashed; background: transparent; border-radius: 22px; padding: 12px; color: var(--muted); }
button.g-new:hover { background: var(--bg-2); }
button.g-new b { font-family: var(--display); font-weight: 900; font-size: 19px; color: var(--text); }
button.g-new small { font-size: 12px; color: var(--faint); }
.g-new-plus { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 38px; font-weight: 300; background: var(--bg-3); color: var(--terracota); margin-bottom: 4px; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.g-new:hover .g-new-plus { transform: rotate(90deg) scale(1.1); background: var(--terracota); color: #fff; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.95); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes blink { 50% { opacity: .3; } }
@keyframes emoji-pop { 0% { transform: scale(.4) rotate(-30deg); } 70% { transform: scale(1.25) rotate(8deg); } 100% { transform: none; } }

/* Grupos na barra lateral */
.groups-side { list-style: none; margin: 0; padding: 2px 8px 4px; display: grid; gap: 2px; }
.g-row { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: var(--r-sm); cursor: pointer; color: var(--muted); font-weight: 600; font-size: 14px; transition: background .12s; }
.g-row:hover { background: var(--bg-3); color: var(--text); }
.g-row.here { background: var(--terracota-soft); color: var(--text); box-shadow: inset 3px 0 0 var(--terracota); }
.g-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-row-live { display: flex; align-items: center; padding-left: 5px; }
.g-row-live .avatar { margin-left: -5px; border: 2px solid var(--bg-2); }
.g-row-live small { margin-left: 4px; font-size: 11px; color: var(--faint); }
.g-row-new { color: var(--faint); font-weight: 500; }
.g-badge { --g: var(--terracota); width: 40px; height: 40px; border-radius: 13px; flex: none; display: grid; place-items: center; font-size: 22px; background: color-mix(in srgb, var(--g) 32%, var(--bg-3)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--g) 75%, transparent); }
.g-badge.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; }
.g-badge.lg { width: 48px; height: 48px; border-radius: 15px; font-size: 26px; }
.g-badge.ghost { background: var(--bg-3); box-shadow: none; color: var(--terracota); font-weight: 800; font-size: 18px; }
.g-row.live .g-badge { animation: wiggle 2.6s ease infinite; }
.invite-card.ginv .g-badge { animation: wiggle .9s ease .3s; }

/* Janela dos grupos (criar, configurar, convidar) */
.gdlg { width: min(480px, calc(100% - 32px)); }
.gd { position: relative; padding: 22px; display: grid; gap: 14px; }
.gd h2 { margin: 0; padding-right: 30px; font-family: var(--display); font-weight: 900; font-size: 24px; display: flex; align-items: center; gap: 12px; line-height: 1.15; }
.gd-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; padding: 0; font-size: 22px; border-radius: 50%; }
.gd-form { display: grid; gap: 12px; }
.gd-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: -6px; }
.gd-p { margin: -4px 0 0; font-size: 14px; }
.g-card.preview { cursor: default; pointer-events: none; animation: none; width: min(250px, 100%); justify-self: center; }
.emoji-pick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.emoji-pick button { padding: 6px 0; font-size: 21px; line-height: 1.2; background: var(--bg-1); border-radius: 10px; transition: transform .15s cubic-bezier(.3,1.6,.5,1); }
.emoji-pick button:hover { transform: scale(1.12); background: var(--bg-3); }
.emoji-pick button.on { background: var(--terracota-soft); box-shadow: inset 0 0 0 2px var(--terracota); transform: scale(1.08); }
.color-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.color-pick button { width: 30px; height: 30px; padding: 0; border-radius: 50%; transition: transform .15s; }
.color-pick button:hover { transform: scale(1.12); }
.color-pick button.on { box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 5px var(--text); }
.gd-edit summary { font-weight: 600; }
.members, .inv-friends { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.member { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 8px; border-radius: 12px; background: var(--bg-1); }
.member .m-name { flex: 1; min-width: 90px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member .m-name small { color: var(--faint); font-weight: 400; }
.member.off { opacity: .7; }
.role { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--bg-3); }
.role.owner { color: var(--mostarda); }
.role.admin { color: #f3c8a2; }
.m-acts { display: flex; flex-wrap: wrap; gap: 4px; }
.m-acts .chip.kick { margin: 0; }
.gd-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.gd-danger { display: flex; gap: 6px; }
.danger-btn { background: var(--red-soft); color: #ffb1a8; }
.danger-btn:hover { background: var(--red); color: #fff; }
.inv-link { display: grid; gap: 8px; }
.inv-url { font-size: 13px; }

/* Chat: arquivos, imagens, áudios */
.msg.old { animation: none; }
.msg.old .msg-text, .msg.old .msg-file { opacity: .9; }
.hist-note { font-size: 12px; }
.msg-file { margin-top: 4px; }
.msg-img { display: block; max-width: min(240px, 100%); max-height: 260px; border-radius: 12px; cursor: zoom-in; border: 1.5px solid var(--bg-4); background: var(--bg-1); }
.msg-video { display: block; max-width: 100%; max-height: 260px; border-radius: 12px; background: #000; }
.file-card { position: relative; display: flex; align-items: center; gap: 10px; max-width: 260px; padding: 10px 12px; border-radius: 12px; overflow: hidden; background: var(--bg-1); border: 1.5px solid var(--bg-4); color: var(--text); text-decoration: none; }
a.file-card:hover { border-color: var(--terracota); }
.file-card.failed { opacity: .7; }
.file-ico { font-size: 24px; flex: none; }
.file-meta { display: grid; min-width: 0; line-height: 1.3; }
.file-meta b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta small { font-size: 11px; color: var(--faint); }
.file-dl { margin-left: auto; color: var(--mostarda); font-weight: 800; }
.file-bar, .send-progress { display: block; height: 3px; background: var(--bg-3); overflow: hidden; }
.file-bar { position: absolute; left: 0; right: 0; bottom: 0; }
.send-progress { max-width: 240px; margin-top: 6px; border-radius: 3px; }
.file-bar i, .send-progress i { display: block; height: 100%; background: var(--mostarda); transform-origin: left; transform: scaleX(0); transition: transform .15s linear; }
.vn { display: flex; align-items: center; gap: 10px; max-width: 270px; padding: 7px 12px 7px 7px; border-radius: 999px; background: var(--bg-1); border: 1.5px solid var(--bg-4); }
.msg.mine .vn { border-color: #e2673a55; }
.vn-play { width: 34px; height: 34px; flex: none; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--terracota); color: #fff; font-size: 12px; }
.vn.playing .vn-play { animation: call-pulse 1.4s ease infinite; }
.vn-waves { flex: 1; height: 26px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.vn-waves i { flex: 1; min-width: 2px; border-radius: 2px; background: var(--bg-4); transition: background .1s; }
.vn-waves i.on { background: var(--mostarda); }
.vn.playing .vn-waves i.on:last-of-type { animation: bob .5s ease infinite; }
.vn-time { min-width: 30px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 60px 24px 24px; background: #0a0705ee; animation: fade-in .2s ease; cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 100px); border-radius: 14px; box-shadow: 0 30px 80px #000; animation: card-pop .35s cubic-bezier(.2,1.4,.4,1); }
.lb-bar { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
.lb-bar .chip { padding: 8px 14px; font-size: 13px; text-decoration: none; }
.is-desktop .lightbox { top: 36px; }

/* Formulário do chat: anexo, áudio, gravação */
.chat-form { align-items: center; gap: 6px; }
.chat-form input:disabled { opacity: .6; }
.chat-ico { padding: 8px; flex: none; border-radius: 50%; }
.chat-ico svg { width: 20px; height: 20px; }
.rec-ui { display: none; flex: 1; align-items: center; gap: 8px; min-width: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; animation: ctl-pulse 1.2s ease infinite; }
.rec-hint { margin-right: auto; color: var(--faint); font-weight: 400; font-size: 12px; }
.chat-form.recording .rec-ui { display: flex; }
.chat-form.recording #chatInput, .chat-form.recording #btnAttach, .chat-form.recording .chat-send { display: none; }
.chat-form.recording #btnRec { background: var(--terracota); color: #fff; }
.chat.dragging { box-shadow: inset 0 0 0 3px var(--mostarda); }
.chat.dragging .msgs::after { content: "Solta aqui pra mandar 📎"; position: sticky; bottom: 0; align-self: center; padding: 8px 16px; border-radius: 999px; background: var(--mostarda); color: #3a2604; font-weight: 700; }

/* Está digitando… (avatares pulando) */
.typing { display: flex; align-items: center; gap: 9px; min-height: 30px; padding: 4px 14px 0; font-size: 12px; color: var(--muted); animation: slide-up .25s ease; }
.typing-avs { display: flex; padding-left: 4px; }
.typing-avs .avatar { margin-left: -4px; border: 2px solid var(--bg-2); animation: typing-hop .9s ease-in-out infinite; }
.typing-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.typing-dots { display: flex; gap: 3px; flex: none; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--mostarda); animation: typing-dot 1s ease infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-hop { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-6px) rotate(-9deg); } 60% { transform: translateY(0) rotate(6deg); } }
@keyframes typing-dot { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Ligação: chamando (ondas + notinhas) */
.call-av-wrap { position: relative; display: grid; place-items: center; margin-bottom: 8px; }
.call-av-wrap .call-av { margin: 0; position: relative; z-index: 1; }
.call-waves i { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 26px; border: 3px solid var(--terracota); opacity: 0; animation: wave-out 1.8s ease-out infinite; }
.call-waves i:nth-child(2) { animation-delay: .6s; }
.call-waves i:nth-child(3) { animation-delay: 1.2s; }
.call-card.calling .call-av { animation: call-bounce 1s ease-in-out infinite; }
.call-notes i { position: absolute; z-index: 2; font-style: normal; font-size: 20px; opacity: 0; animation: note-fly 2.4s ease-out infinite; }
.call-notes i:nth-child(1) { left: -18px; top: 10px; }
.call-notes i:nth-child(2) { right: -20px; top: 0; animation-delay: .8s; }
.call-notes i:nth-child(3) { right: -6px; bottom: -4px; animation-delay: 1.6s; }
.call-card.ringing .call-av { animation: ring-shake 1.2s ease infinite; }
@keyframes wave-out { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes call-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px) rotate(-4deg); } }
@keyframes ring-shake { 0%, 50%, 100% { transform: none; } 55% { transform: rotate(-10deg) scale(1.05); } 62% { transform: rotate(10deg) scale(1.05); } 69% { transform: rotate(-7deg); } 76% { transform: rotate(5deg); } 83% { transform: none; } }
@keyframes note-fly { 0% { transform: translate(0, 10px) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--x, 0), -50px) rotate(20deg) scale(1.1); opacity: 0; } }

/* Ligação conectou: os dois se encontram no meio 💥 */
.call-fx { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, #e2673a26 0%, transparent 55%); animation: fade-in .2s ease; }
.call-fx > * { grid-area: 1 / 1; }
.call-fx.out { animation: fade-out .45s ease forwards; }
.call-fx .duo { display: flex; gap: 6px; }
.call-fx .duo .avatar { width: 96px; height: 96px; border-radius: 30px; font-size: 40px; box-shadow: 0 20px 50px #000b; }
.call-fx .left { animation: duo-l .9s cubic-bezier(.3,1.5,.5,1) both; }
.call-fx .right { animation: duo-r .9s cubic-bezier(.3,1.5,.5,1) both; }
.call-boom { font-size: 72px; animation: boom .8s cubic-bezier(.3,1.6,.5,1) .45s both; }
.call-fx b { transform: translateY(96px); font-family: var(--display); font-weight: 900; font-size: 32px; text-shadow: 0 6px 22px #000; animation: boom-text .5s cubic-bezier(.2,1.4,.4,1) .55s both; }
@keyframes duo-l { 0% { transform: translateX(-45vw) rotate(-35deg); } 60% { transform: translateX(14px) rotate(8deg); } 100% { transform: none; } }
@keyframes duo-r { 0% { transform: translateX(45vw) rotate(35deg); } 60% { transform: translateX(-14px) rotate(-8deg); } 100% { transform: none; } }
@keyframes boom { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 50% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1.1); opacity: 0; } }
@keyframes boom-text { from { transform: translateY(120px) scale(.6); opacity: 0; } to { transform: translateY(96px); opacity: 1; } }

/* Tchau 👋 */
.bye-fx {
  position: fixed; left: 50%; top: 42%; z-index: 95; transform: translate(-50%, -50%); pointer-events: none;
  display: grid; justify-items: center; gap: 6px; padding: 22px 34px; border-radius: 26px; text-align: center;
  background: var(--bg-2); border: 1.5px solid var(--bg-4); box-shadow: 0 30px 80px #000c;
  animation: bye-in .45s cubic-bezier(.2,1.4,.4,1), fade-out .45s ease 1.55s forwards;
}
.bye-fx > span:last-child { display: grid; }
.bye-fx b { font-family: var(--display); font-weight: 900; font-size: 24px; }
.bye-fx small { color: var(--muted); font-size: 14px; }
.bye-hand { display: inline-block; font-size: 56px; transform-origin: 70% 85%; animation: wave-hand 1s ease-in-out 2; }
.bye-fx.lite { top: auto; bottom: calc(110px + var(--safe-b)); grid-auto-flow: column; align-items: center; gap: 10px; padding: 10px 20px 10px 14px; border-radius: 999px; }
.bye-fx.lite .bye-hand { font-size: 24px; }
.bye-fx.lite b { font-family: var(--font); font-weight: 700; font-size: 15px; }
@keyframes wave-hand { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-22deg); } 40% { transform: rotate(18deg); } 60% { transform: rotate(-12deg); } 80% { transform: rotate(8deg); } }
@keyframes bye-in { from { transform: translate(-50%, -30%) scale(.8); opacity: 0; } }

/* Celular: nada de redimensionar/minimizar (já é em abas) */
@media (max-width: 860px) {
  .side-resizer, #btnChatMin, .chat-fab { display: none !important; }
  .lobby { padding: 18px 14px 24px; }
  .groups-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .g-emoji { font-size: 40px; }
  button.g-new { min-height: 200px; }
  .share-pop { left: 0; transform: none; width: min(300px, calc(100vw - 24px)); animation: none; }
}
@media (max-width: 460px) {
  .share-gear { width: 20px; height: 20px; font-size: 11px; right: -4px; bottom: -4px; }
  .chat-form .chat-send { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .call-fx .left, .call-fx .right, .g-card { animation: none; }
}

/* =================== Arte do grupo: uma salinha (a luz acende quando tem gente) =================== */
.g-art {
  --g: var(--terracota); position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; container-type: inline-size;
  background: color-mix(in srgb, var(--g) 30%, #1a110c); border: 4px solid var(--tv);
  filter: brightness(.62) saturate(.75); transition: filter .5s ease;
}
.g-card:hover .g-art, .g-art.live { filter: none; }
.g-wall { position: absolute; inset: 0 0 26% 0; background:
  radial-gradient(circle, color-mix(in srgb, var(--g) 55%, #fff0) 1.3px, transparent 1.8px) 0 0 / 7cqw 7cqw,
  linear-gradient(color-mix(in srgb, var(--g) 42%, #2a1a12), color-mix(in srgb, var(--g) 26%, #1d130e)); }
.g-window { position: absolute; left: 8%; top: 12%; width: 17%; height: 34%; border-radius: 1.5cqw; background: linear-gradient(#20304a, #3a2a4a); border: .9cqw solid #6b4430; overflow: hidden; }
.g-window i { position: absolute; right: 18%; top: 16%; width: 4cqw; height: 4cqw; border-radius: 50%; background: #f4e9dc; box-shadow: 0 0 3cqw #f4e9dc88; }
.g-window::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 47%, #6b4430 47% 53%, transparent 53%), linear-gradient(transparent 47%, #6b4430 47% 53%, transparent 53%); }
.g-frame {
  position: absolute; left: 50%; top: 7%; width: 24cqw; height: 24cqw; margin-left: -12cqw; display: grid; place-items: center;
  border-radius: 4cqw; background: #f4e9dc; border: 1.3cqw solid #7a4c33; box-shadow: 0 1.5cqw 3cqw #0007; transform-origin: 50% -25%;
}
.g-frame::before { content: ""; position: absolute; top: -9cqw; left: 50%; width: 11cqw; height: 9cqw; margin-left: -5.5cqw; border: .5cqw solid #c9b5a2aa; border-bottom: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.g-frame .g-emoji { font-size: 14cqw; line-height: 1; filter: drop-shadow(0 .8cqw 1cqw #0005); }
.g-card:hover .g-frame { animation: frame-swing 1.4s ease-in-out; }
.g-art.live .g-frame .g-emoji { animation: bob 2.2s ease-in-out infinite; }
.g-lamp { position: absolute; right: 10%; bottom: 22%; width: 1.2cqw; height: 40%; background: #2a1d16; border-radius: 1cqw; }
.g-lamp::after { content: ""; position: absolute; bottom: -1cqw; left: 50%; width: 8cqw; height: 1.8cqw; margin-left: -4cqw; border-radius: 50%; background: #2a1d16; }
.g-shade { position: absolute; top: -6cqw; left: 50%; width: 12cqw; height: 7cqw; margin-left: -6cqw; background: #5a4535; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%); transition: background .4s; }
.g-glow { position: absolute; top: 0; left: 50%; width: 46cqw; height: 46cqw; margin: -18cqw 0 0 -23cqw; border-radius: 50%; background: radial-gradient(circle, #e8b33c66, transparent 62%); opacity: 0; transition: opacity .5s; pointer-events: none; }
.g-art.live .g-shade { background: #e8b33c; }
.g-art.live .g-glow { opacity: 1; animation: lamp-flicker 4s ease-in-out infinite; }
.g-plant { position: absolute; left: 3%; bottom: 17%; font-size: 13cqw; line-height: 1; transform-origin: bottom center; }
.g-card:hover .g-plant { animation: wiggle 1s ease; }
.g-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; border-top: .8cqw solid #3a2416; background: repeating-linear-gradient(90deg, #5d3c28 0 11cqw, #50331f 11cqw 11.6cqw); }
.g-rug { position: absolute; left: 50%; bottom: 3%; width: 66%; height: 10%; margin-left: -33%; border-radius: 50%; background: color-mix(in srgb, var(--g) 55%, #2a1a12); opacity: .7; }
.g-sofa { position: absolute; left: 50%; bottom: 10%; width: 60%; height: 33%; margin-left: -30%; }
.g-back { position: absolute; left: 4%; right: 4%; top: 0; height: 62%; border-radius: 4cqw 4cqw 1.5cqw 1.5cqw; background: color-mix(in srgb, var(--g) 78%, #000); }
.g-seat { position: absolute; left: 4%; right: 4%; bottom: 0; height: 46%; border-radius: 2cqw; background: var(--g); box-shadow: inset 0 -1.5cqw 0 #0002; }
.g-arm { position: absolute; bottom: 0; width: 11%; height: 66%; border-radius: 3cqw; background: color-mix(in srgb, var(--g) 70%, #000); }
.g-arm.l { left: -3%; }
.g-arm.r { right: -3%; }
.g-sitters { position: absolute; left: 10%; right: 10%; bottom: 34%; display: flex; justify-content: center; gap: 1.5cqw; }
.avatar.sitter { width: 11.5cqw; height: 11.5cqw; border-radius: 3.5cqw; font-size: 5.5cqw; border: .6cqw solid #0003; box-shadow: 0 1cqw 2cqw #0006; animation: sit-bob 2.4s ease-in-out infinite; }
.g-cat { position: absolute; left: 22%; bottom: 36%; font-size: 9cqw; line-height: 1; filter: grayscale(.2); }
.g-cat i { position: absolute; font-style: normal; font-family: var(--display); font-weight: 900; color: var(--muted); font-size: 3.5cqw; opacity: 0; animation: zzz 3.4s ease-in infinite; left: 70%; top: -10%; }
.g-cat i + i { animation-delay: 1.7s; }
.g-more-sit { position: absolute; right: 22%; bottom: 46%; background: #000a; color: #fff; font-size: 3.5cqw; font-weight: 700; padding: 0 1.8cqw; border-radius: 99px; }
.g-art .g-onair { z-index: 2; }
@keyframes frame-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(7deg); } 45% { transform: rotate(-5deg); } 70% { transform: rotate(3deg); } }
@keyframes lamp-flicker { 0%, 100% { opacity: 1; } 48% { opacity: .85; } 50% { opacity: 1; } }
@keyframes sit-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2cqw) rotate(-3deg); } }
.g-card.preview .g-art { filter: none; }

/* =================== Janelinha de pergunta (no lugar do pop-up do Windows) =================== */
.ask-dlg { width: min(400px, calc(100% - 32px)); padding: 0; animation: card-pop .4s cubic-bezier(.2,1.4,.4,1); }
.ask { display: grid; justify-items: center; gap: 8px; padding: 24px 20px 14px; text-align: center; }
.ask-emoji { font-size: 44px; line-height: 1; animation: wiggle .9s ease .2s; }
.ask h3 { margin: 4px 0 0; font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1.15; }
.ask p { margin: 0; color: var(--muted); font-size: 14px; }
.ask-choices { display: grid; gap: 8px; width: 100%; margin-top: 10px; }
.ask-choice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); text-align: left; background: var(--bg-3); border: 1.5px solid var(--bg-4); font-weight: 400; }
.ask-choice:hover { border-color: var(--mostarda); background: var(--bg-4); }
.ask-choice.warn:hover { border-color: var(--mostarda); }
.ask-choice.danger { border-color: #e5574a55; }
.ask-choice.danger:hover { background: var(--red-soft); border-color: var(--red); }
.ask-ico { font-size: 22px; flex: none; }
.ask-txt { display: grid; line-height: 1.3; }
.ask-txt b { font-weight: 700; }
.ask-txt small { color: var(--faint); font-size: 12px; }
.ask-cancel { margin-top: 2px; }

/* =================== Menu do botão direito e folha de baixo (celular) =================== */
.ctx-menu { position: fixed; z-index: 130; min-width: 220px; max-width: 290px; display: grid; gap: 2px; padding: 6px; border-radius: var(--r); background: var(--bg-3); border: 1.5px solid var(--bg-4); box-shadow: 0 18px 50px #000c; animation: menu-in .16s ease; }
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.m-title { display: grid; padding: 6px 10px 6px; }
.m-title b { font-family: var(--display); font-weight: 900; font-size: 16px; }
.m-title small { color: var(--faint); font-size: 12px; }
.m-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); background: transparent; text-align: left; font-weight: 500; font-size: 14px; }
.m-item:hover { background: var(--bg-4); }
.m-item.danger { color: #ffb1a8; }
.m-item.danger:hover { background: var(--red-soft); }
.m-ico { width: 20px; text-align: center; flex: none; }
.m-sep { border: 0; border-top: 1.5px solid var(--bg-4); margin: 4px 6px; width: auto; }
.m-el { padding: 4px 10px; }
.more-btn { flex: none; opacity: .55; }
.more-btn:hover { opacity: 1; }
.more-btn svg { width: 18px; height: 18px; }
.friend .more-btn, .g-row .more-btn { opacity: 0; }
.friend:hover .more-btn, .g-row:hover .more-btn, .g-row.here .more-btn { opacity: .7; }
@media (hover: none) { .friend .more-btn, .g-row .more-btn { opacity: .6; } }
.friend, .g-row, .person, .g-card { -webkit-touch-callout: none; user-select: none; }

.sheet-wrap { position: fixed; inset: 0; z-index: 125; display: grid; place-items: center; padding: 16px; background: #0a0705b3; animation: fade-in .2s ease; }
.sheet-wrap.out { animation: fade-out .2s ease forwards; }
.sheet { position: relative; width: min(420px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 18px 16px 16px; border-radius: 22px; background: var(--bg-2); border: 1.5px solid var(--bg-4); box-shadow: 0 30px 80px #000d; animation: card-pop .35s cubic-bezier(.2,1.4,.4,1); }
.sheet-grip { display: none; }
@media (max-width: 860px), (pointer: coarse) {
  .sheet-wrap { place-items: end stretch; padding: 0; }
  .sheet { width: 100%; max-height: 85dvh; border-radius: 22px 22px 0 0; padding: 10px 14px calc(16px + var(--safe-b)); animation: sheet-up .3s cubic-bezier(.2,1,.3,1); }
  .sheet-wrap.out .sheet { animation: sheet-down .2s ease forwards; }
  .sheet-grip { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--bg-4); margin: 0 auto 10px; }
  .sheet-menu .m-item { padding: 13px 10px; font-size: 15px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
.sheet-menu { display: grid; gap: 2px; }

/* Mesa de volumes */
.mixer { display: grid; gap: 12px; }
.mixer h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 22px; }
.mix-row { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r); background: var(--bg-1); }
.mix-row.muted { opacity: .6; }
.mix-who { display: flex; align-items: center; gap: 10px; }
.mix-who b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-row .vol-row { grid-template-columns: 62px 1fr 44px; }
.mode-pick { display: grid; gap: 6px; }
.seg.big button { padding: 9px 6px; font-size: 13px; }
.mode-hint { color: var(--faint); font-size: 12px; }
.notify-list { display: grid; gap: 8px; }
.notif-perm { justify-self: start; margin-top: 4px; }

/* =================== Telas: cartaz "Assistir", controles que somem, zoom =================== */
.tile .tile-bar { opacity: 0 !important; }
.tile:not(.ui) .tile-bar * { pointer-events: none; }
.tile.ui .tile-bar, .tile .tile-bar.ui-always { opacity: 1 !important; }
.tile .tile-bar.ui-always * { pointer-events: auto; }
.tile::before { transition: opacity .3s; }
.tile:not(.ui):not(.poster)::before { opacity: 0; }
.tile video { touch-action: none; transform-origin: 0 0; will-change: transform; }
.tile.zoomed video { cursor: grab; }
.tile.zoomed video:active { cursor: grabbing; }
.zoom-chip { white-space: nowrap; flex: none; background: var(--mostarda); color: #3a2604; font-weight: 700; margin-right: 4px; }
.tile.zoomed .tile-bar .zoom-chip { pointer-events: auto; }
.tile.zoomed:not(.ui) .tile-bar { opacity: 1 !important; background: none; }
.tile.zoomed:not(.ui) .tile-bar > :not(.tile-actions), .tile.zoomed:not(.ui) .tile-actions > :not(.zoom-chip) { visibility: hidden; }
.tile-actions .icon { font-size: 16px; line-height: 1; }
.tile.poster { min-height: 200px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #3a2a1f, #1b1411 75%); }
.poster-in { display: grid; justify-items: center; gap: 8px; padding: 20px; text-align: center; }
.poster-av { position: relative; }
.poster-av .avatar { animation: bob 2.4s ease-in-out infinite; }
.poster-tv { position: absolute; right: -14px; bottom: -8px; font-size: 26px; animation: wiggle 2.4s ease infinite; }
.poster-in b { font-family: var(--display); font-weight: 900; font-size: 19px; }
.poster-in small { color: var(--muted); max-width: 280px; }
.poster-in .primary { margin-top: 6px; padding: 12px 26px; font-size: 16px; box-shadow: 0 10px 30px #e2673a44; animation: call-pulse 2s ease infinite; }

/* =================== Conversas (sala + mensagens diretas) =================== */
.conv-tabs { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; padding: 8px 4px 8px 10px; scrollbar-width: none; }
.conv-tabs::-webkit-scrollbar { display: none; }
.conv-tabs .chat-label { padding: 8px 6px 4px; }
.conv-tab { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; max-width: 170px; }
.conv-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-tab:hover { background: var(--bg-3); color: var(--text); }
.conv-tab.on { background: var(--bg-4); color: var(--text); }
.conv-av { position: relative; display: flex; flex: none; overflow: visible !important; }
.conv-av.on::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--oliva); border: 2px solid var(--bg-2); }
.conv-badge { flex: none; background: var(--terracota); color: #fff; font-size: 10px; border-radius: 9px; padding: 0 6px; }
.conv-x { flex: none; opacity: .5; padding: 0 2px; font-size: 15px; }
.conv-x:hover { opacity: 1; color: var(--text); }
.msg.pending .msg-text { opacity: .65; }
.pending-tag { display: none; font-size: 11px; color: var(--mostarda); }
.msg.pending .pending-tag { display: inline; }
.chat-empty { margin: auto 20px; text-align: center; color: var(--faint); font-size: 14px; }
.chat .msgs[hidden] { display: none; }
.chat-empty:not([hidden]) ~ .chat-form { opacity: .6; }

/* Celular: sem botão de compartilhar (o navegador do celular não deixa); controles cabem melhor */
.share-wrap.no-share { display: none !important; }

/* =================== Celular: controles completos, chat do lado, pessoas na esquerda =================== */
.ctl { position: relative; }
.ctl-badge { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--terracota); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg-2); }
.dev-selects { display: grid; gap: 10px; }
.dev-selects label { gap: 4px; }
.mp-strip, .m-people-btn { display: none; }
@media (max-width: 860px) {
  .controls { gap: 4px; padding: 6px; max-width: calc(100vw - 12px); }
  .controls .ctl { width: 44px; height: 44px; }
  .controls .ctl.danger { width: 54px; margin-left: 2px; }
  .ctl-mini { width: 26px; height: 26px; }
  body[data-tab="stage"] .app.mc-open .chat {
    display: flex; position: fixed; z-index: 12; right: 0; width: min(52vw, 380px);
    top: calc(56px + env(safe-area-inset-top, 0px)); bottom: var(--ctl-h, 80px);
    border-left: 1.5px solid var(--bg-4); border-radius: 18px 0 0 18px; box-shadow: -12px 0 34px #000a; animation: drawer-r .28s cubic-bezier(.2,1,.3,1);
  }
  body[data-tab="stage"] .app.mc-open .stage { margin-right: min(52vw, 380px); }
  body[data-tab="stage"] .app.mc-open .chat .chat-head { display: flex; }
  .m-people-btn { position: absolute; z-index: 8; left: 10px; top: 10px; width: 40px; height: 40px; padding: 0; border-radius: 14px; display: grid; place-items: center; background: #140f0cd9; color: var(--muted); border: 1.5px solid var(--bg-4); }
  .m-people-btn[hidden] { display: none; }
  .m-people-btn.open { color: var(--mostarda); border-color: var(--mostarda); }
  .m-people-btn svg { width: 20px; height: 20px; }
  .app.mp-open .mp-strip {
    display: flex; flex-direction: column; gap: 10px; position: absolute; z-index: 7; left: 10px; top: 58px; max-height: calc(100% - 70px); overflow-y: auto;
    padding: 8px 6px; border-radius: 18px; background: #140f0cd9; border: 1.5px solid var(--bg-4); animation: drawer-l .28s cubic-bezier(.2,1,.3,1); scrollbar-width: none;
  }
}
.m-person { position: relative; display: grid; justify-items: center; gap: 2px; padding: 0; background: transparent; width: 46px; }
.m-person:hover { background: transparent; }
.m-person .avatar { width: 40px; height: 40px; border-radius: 13px; transition: box-shadow .12s; }
.m-person.speaking .avatar { box-shadow: 0 0 0 2px #140f0c, 0 0 0 4px var(--mostarda); }
.m-person small { font-size: 9px; color: var(--muted); max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-mute { position: absolute; top: -4px; right: -2px; font-size: 11px; }
.m-live { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); background: var(--terracota); color: #fff; font-size: 8px; font-weight: 800; padding: 0 4px; border-radius: 6px; }
@keyframes drawer-r { from { transform: translateX(100%); } }
@keyframes drawer-l { from { transform: translateX(-120%); } }
@media (max-width: 400px) {
  .controls .ctl { width: 39px; height: 39px; }
  .controls .ctl svg { width: 19px; height: 19px; }
  .controls .ctl.danger { width: 46px; }
}
@media (max-width: 860px) {
  .app.mc-open .chat-form { gap: 2px; padding: 8px 6px; }
  .app.mc-open .chat-form .chat-ico { padding: 6px; }
  .app.mc-open .chat-form input { padding: 9px 12px; font-size: 14px; min-width: 0; }
  .app.mc-open .chat-send { font-size: 0; width: 40px; height: 40px; padding: 0; flex: none; }
  .app.mc-open .chat-send::after { content: "➤"; font-size: 16px; }
}

/* =================== Barra lateral em blocos (sala / grupos / amigos) =================== */
.side-sec { margin: 10px 8px 0; padding: 2px 0 8px; border-radius: 16px; background: var(--bg-1); border: 1.5px solid var(--bg-3); }
.side-sec + .side-sec { margin-top: 12px; }
.sec-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 8px 12px; }
.sec-ico { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--bg-3); }
.sec-t { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.sec-t b { font-family: var(--display); font-weight: 900; font-size: 16px; }
.sec-t small { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sec-head .chip { flex: none; white-space: nowrap; }
.sec-room { border-color: #8fa35f66; background: linear-gradient(180deg, #8fa35f1c, var(--bg-1) 70%); }
.sec-room .sec-ico { background: #8fa35f33; }
.sec-room .sec-t small { color: var(--oliva); font-weight: 600; }
.sec-groups .sec-ico { background: #e8b33c26; }
.sec-friends .sec-ico { background: #e2673a26; }
.side-sec .people, .side-sec .groups-side, .side-sec .friends { padding-left: 6px; padding-right: 6px; }
.side-sec .add-friend { padding: 0 10px 8px; }
.side-sec .friend-reqs { padding: 0 10px; }
.side-scroll { padding-bottom: 14px; }

/* =================== Sala sem transmissão: a galera no sofá =================== */
.room-scene { display: grid; justify-items: center; width: min(520px, 92vw); }
.scene-person { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0; background: transparent; animation: sit-in .6s cubic-bezier(.3,1.5,.5,1) both; }
.scene-person:hover { background: transparent; transform: translateY(-3px); }
.scene-person .avatar { width: 68px; height: 68px; border-radius: 22px; font-size: 28px; box-shadow: 0 10px 24px #0008; transition: box-shadow .12s; animation: sit-bob 3s ease-in-out infinite; }
.scene-person b { font-size: 12px; font-weight: 700; color: var(--text); background: #0008; padding: 1px 8px; border-radius: 99px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-person.speaking .avatar { box-shadow: 0 0 0 3px var(--bg-1), 0 0 0 6px var(--mostarda), 0 0 26px #e8b33c88; }
@keyframes sit-in { from { transform: translateY(-40px) scale(.6); opacity: 0; } }

/* =================== Opções de som em cartões; X pra fechar =================== */
.mode-cards { display: grid; gap: 8px; }
.mode-card { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r); text-align: left; background: var(--bg-1); border: 1.5px solid var(--bg-4); font-weight: 400; }
.mode-card:hover { background: var(--bg-3); }
.mode-card.on { border-color: var(--terracota); background: var(--terracota-soft); }
.mode-ico { font-size: 22px; flex: none; }
.mode-txt { display: grid; line-height: 1.3; min-width: 0; }
.mode-txt b { font-weight: 700; }
.mode-txt small { color: var(--muted); font-size: 12px; }
.mode-card.on .mode-txt b::after { content: " ✓"; color: var(--terracota); }
.sheet-x, .dlg-x { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: var(--bg-3); color: var(--text); }
.sheet-x:hover, .dlg-x:hover { background: var(--bg-4); }
.settings-head { position: relative; }
.settings-head .dlg-x { top: 0; right: 0; }
.settings { position: relative; }
.mixer h3 { padding-right: 44px; }
.sheet-menu .m-title { padding-right: 44px; }

/* Cartão do grupo: botões nunca quebram em 3 linhas */
.g-actions { flex-wrap: wrap; }
.g-actions .chip { white-space: nowrap; }
@media (max-width: 420px) {
  .groups-grid { grid-template-columns: 1fr; }
}

/* Troca de aba no celular com deslize */
.panel.slide-r { animation: slide-from-r .28s cubic-bezier(.2,1,.3,1); }
.panel.slide-l { animation: slide-from-l .28s cubic-bezier(.2,1,.3,1); }
@keyframes slide-from-r { from { transform: translateX(40%); opacity: 0; } }
@keyframes slide-from-l { from { transform: translateX(-40%); opacity: 0; } }

/* =================== Palco em blocos (estilo Discord) =================== */
.stage[data-count="5"], .stage[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
.stage[data-count="7"], .stage[data-count="8"], .stage[data-count="9"] { grid-template-columns: repeat(3, 1fr); }
.stage.spot { grid-template-columns: repeat(var(--others), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) clamp(86px, 17vh, 150px); grid-auto-rows: 0; }
.stage.spot .tile.is-focus { grid-column: 1 / -1; grid-row: 1; }
.stage.spot .tile:not(.is-focus) { grid-row: 2; min-height: 0; cursor: pointer; }
.stage.spot .tile:not(.is-focus) .tile-bar, .stage.spot .tile:not(.is-focus) .poster-in small, .stage.spot .tile:not(.is-focus) .tuning-screen small { display: none; }
.stage.spot .tile.poster:not(.is-focus) .poster-in { padding: 6px; gap: 4px; }
.stage.spot .tile.poster:not(.is-focus) .poster-in b { font-size: 12px; }
.stage.spot .tile.poster:not(.is-focus) .poster-av { display: none; }
.stage.spot .tile.poster:not(.is-focus) .primary { padding: 6px 12px; font-size: 12px; margin: 0; animation: none; }
.tile.cam-tile::before, .tile.av-tile::before { display: none; }
.tile.cam-tile { cursor: pointer; }
.tile.cam-tile video { object-fit: cover; cursor: pointer; }
.stage.spot .tile.cam-tile.is-focus video { object-fit: contain; }
video.mirror { transform: scaleX(-1); }
.tile.av-tile { cursor: pointer; display: grid; place-items: center; border-color: transparent; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 55%, var(--bg-2)), color-mix(in srgb, var(--c) 25%, var(--bg-1))); }
.tile.av-tile .avatar { width: clamp(44px, 28%, 96px); height: auto; aspect-ratio: 1; border-radius: 50%; font-size: clamp(18px, 3vw, 38px); box-shadow: 0 10px 26px #0006; }
.tile-label { position: absolute; left: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 16px); padding: 3px 10px; border-radius: 9px; background: #000a; color: #fff; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-label svg { width: 14px; height: 14px; }
.tile.cam-tile.speaking, .tile.av-tile.speaking { box-shadow: 0 0 0 3px var(--mostarda), 0 14px 40px #0008; border-color: var(--mostarda); }
.tile.av-tile.speaking .avatar { animation: bob .5s ease-in-out infinite; }
.tile.is-focus { border-color: #5a4334; }
@media (max-width: 860px) {
  .stage.spot { grid-template-columns: repeat(var(--others), minmax(90px, 1fr)); grid-template-rows: minmax(0, 1fr) 96px; overflow-x: auto; }
  .stage.spot .tile.is-focus { grid-column: 1 / -1; }
  .stage:not(.spot)[data-count="2"], .stage:not(.spot)[data-count="3"], .stage:not(.spot)[data-count="4"] { grid-template-columns: 1fr 1fr; }
  .stage:not(.spot)[data-count="5"], .stage:not(.spot)[data-count="6"], .stage:not(.spot)[data-count="7"], .stage:not(.spot)[data-count="8"], .stage:not(.spot)[data-count="9"] { grid-template-columns: 1fr 1fr; }
}

/* =================== Foco da transmissão =================== */
.focus-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.focus-card { padding: 7px 4px; border-radius: 10px; background: var(--bg-1); font-size: 12px; font-weight: 600; color: var(--muted); }
.focus-card b { font-weight: 700; }
.focus-card.on { background: var(--terracota); color: #fff; }

/* =================== O sofá da galera (versão caprichada) =================== */
.room-scene { width: min(640px, 94vw); display: grid; justify-items: center; }
.lounge { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 30px 0 22px; }
.lounge-rug { position: absolute; left: 6%; right: 6%; bottom: 0; height: 42px; border-radius: 50%; background: radial-gradient(ellipse, #e8b33c33, #e2673a1f 55%, transparent 72%); }
.lounge-lamp { position: relative; width: 44px; height: 190px; margin-right: -6px; flex: none; align-self: flex-end; }
.lamp-pole { position: absolute; left: 50%; bottom: 0; width: 5px; height: 150px; margin-left: -2.5px; border-radius: 3px; background: linear-gradient(#5a4535, #3a2a20); }
.lamp-pole::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 34px; height: 8px; margin-left: -17px; border-radius: 50%; background: #3a2a20; }
.lamp-shade { position: absolute; left: 50%; top: 0; width: 46px; height: 38px; margin-left: -23px; background: linear-gradient(#f2c25a, #d99a2b); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); border-radius: 4px; }
.lamp-glow { position: absolute; left: 50%; top: 10px; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%; background: radial-gradient(circle, #e8b33c40, transparent 65%); pointer-events: none; animation: lamp-flicker 5s ease-in-out infinite; }
.lounge-table { position: relative; flex: none; width: 58px; height: 56px; margin-left: -4px; align-self: flex-end; border-radius: 10px 10px 4px 4px; background: linear-gradient(#7a4c33, #5a3826); box-shadow: inset 0 6px 0 #8a5a3e, 0 10px 18px #0006; }
.lounge-table .popcorn { position: absolute; left: 4px; top: -26px; font-size: 26px; animation: wiggle 4s ease-in-out infinite; }
.lounge-table .mug { position: absolute; right: 2px; top: -20px; font-size: 20px; }
.sofa2 { --u: min(108px, 17vw); --person: calc(var(--u) * .78); position: relative; z-index: 1; flex: none; width: calc(var(--n) * var(--u) + 2 * var(--u) * .55); min-width: 290px; max-width: calc(94vw - 110px); padding: 0 calc(var(--u) * .55); }
.sofa2.many { --u: min(84px, 13vw); }
.sofa2-back { position: absolute; left: 6%; right: 6%; bottom: 46px; height: calc(var(--u) * .95); border-radius: 34px 34px 14px 14px;
  background:
    radial-gradient(circle, #0000002e 3px, transparent 4px) 0 0 / calc(var(--u) * .5) 34px,
    linear-gradient(#b14e2c, #8d3a20);
  box-shadow: inset 0 8px 0 #c86440, inset 0 -10px 18px #0003; }
.sofa2-seat { position: absolute; left: 3%; right: 3%; bottom: 14px; height: 50px; display: flex; gap: 3px; padding: 0 6px; z-index: 3; }
.sofa2-seat i { flex: 1; border-radius: 16px 16px 12px 12px; background: linear-gradient(#ef7a4c, #d85a32 60%, #c24d2a); box-shadow: inset 0 5px 0 #f69468, 0 4px 0 #a5401f; }
.sofa2-arm { position: absolute; bottom: 14px; width: calc(var(--u) * .6); height: calc(var(--u) * .95); z-index: 4; border-radius: 26px 26px 14px 14px; background: linear-gradient(90deg, #b3502d, #cf6038 50%, #a9472a); box-shadow: inset 0 7px 0 #e07650, 0 10px 18px #0005; }
.sofa2-arm.l { left: 0; }
.sofa2-arm.r { right: 0; }
.sofa2-legs { position: absolute; left: 4%; right: 4%; bottom: 0; height: 16px; display: flex; justify-content: space-between; z-index: 2; }
.sofa2-legs i { width: 12px; height: 16px; border-radius: 0 0 4px 4px; background: #4a2f1f; }
.sofa2-people { position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--u) * .1); padding-bottom: 40px; }
.sp { position: relative; width: calc(var(--u) * .9); display: grid; justify-items: center; padding: 0; background: transparent; border-radius: 0; }
.sp:hover { background: transparent; }
.sp.arrive { animation: sofa-plop .7s cubic-bezier(.3,1.5,.5,1) both; }
.sp-body { position: absolute; bottom: -2px; left: 50%; width: calc(var(--person) * .95); height: calc(var(--person) * .7); margin-left: calc(var(--person) * -.475); border-radius: 40% 40% 14px 14px; background: linear-gradient(color-mix(in srgb, var(--c) 85%, #fff), var(--c)); box-shadow: inset 0 -6px 0 #0002; }
.sp-head { position: relative; margin-bottom: calc(var(--person) * .45); animation: breathe-head 4s ease-in-out infinite; }
.sp-head .avatar { width: var(--person); height: var(--person); border-radius: 50%; font-size: calc(var(--person) * .4); border: 3px solid #f4e9dc; box-shadow: 0 8px 20px #0007; transition: box-shadow .15s, transform .15s; }
.sp-cam video { width: 100%; height: 100%; object-fit: cover; }
.sp:hover .sp-head .avatar { transform: translateY(-3px) rotate(-3deg); }
.sp.speaking .sp-head .avatar { box-shadow: 0 0 0 4px var(--mostarda), 0 0 30px #e8b33caa; }
.sp.speaking .sp-head { animation: talk-bob .45s ease-in-out infinite; }
.sp-waves { position: absolute; right: -14px; top: 30%; display: none; }
.sp.speaking .sp-waves { display: block; }
.sp-waves i { position: absolute; width: 10px; height: 18px; border: 3px solid var(--mostarda); border-left: 0; border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%; animation: wave-pop .8s ease-out infinite; }
.sp-waves i + i { left: 6px; width: 14px; height: 26px; top: -4px; animation-delay: .2s; }
.sp-badges { position: absolute; top: -8px; right: 0; font-size: 17px; filter: drop-shadow(0 2px 4px #0008); }
.sp-name { position: absolute; z-index: 5; bottom: -34px; max-width: calc(var(--u) * 1.05); padding: 2px 10px; border-radius: 99px; background: #1b1411e6; border: 1.5px solid #f4e9dc22; color: var(--text); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes sofa-plop { 0% { transform: translateY(-80px) scale(.5); opacity: 0; } 60% { transform: translateY(6px) scale(1.05); opacity: 1; } 100% { transform: none; } }
@keyframes breathe-head { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
@keyframes talk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes wave-pop { from { opacity: 1; transform: scale(.6); } to { opacity: 0; transform: scale(1.3); } }
@media (max-width: 520px) {
  .lounge-lamp { display: none; }
  .lounge-table { display: none; }
  .sofa2 { max-width: 94vw; }
}

/* sofá: a galera senta em cima da almofada */
.sofa2-seat { height: 40px; }
.sofa2-people { z-index: 3; padding-bottom: 44px; }
.sp-body { bottom: -6px; }
.sp-name { bottom: -40px; }
.sofa2-back { bottom: 40px; }

.sp.ghost { opacity: .45; filter: grayscale(.6); }
.sp.ghost .sp-name::after { content: " · voltando…"; font-weight: 400; }

.sofa2-people { z-index: 4; padding-bottom: 50px; }
.sofa2-arm { z-index: 5; }
.sp-body { bottom: 0; }
.sp-name { bottom: -42px; z-index: 6; }

.stage.spot { grid-template-rows: minmax(0, 1fr) clamp(64px, 22%, 150px); }
@media (max-width: 860px) { .stage.spot { grid-template-rows: minmax(0, 1fr) clamp(60px, 24%, 110px); } }

/* =================== Celular: blocos quadradinhos e controles redondos =================== */
@media (max-width: 860px) {
  .stage:not(.spot) { grid-auto-rows: auto; align-content: center; }
  .stage:not(.spot) .tile.cam-tile, .stage:not(.spot) .tile.av-tile { aspect-ratio: 1; min-height: 0; }
  .stage:not(.spot)[data-count="1"] .tile.cam-tile, .stage:not(.spot)[data-count="1"] .tile.av-tile { width: min(100%, 360px); justify-self: center; aspect-ratio: 3 / 4; }
  .stage:not(.spot) .tile:not(.cam-tile):not(.av-tile):not(.poster) { aspect-ratio: 16 / 9; min-height: 0; }
  .stage.spot .tile:not(.is-focus) { aspect-ratio: 1; height: 100%; width: auto; justify-self: center; }
  .stage.spot { grid-template-columns: repeat(var(--others), minmax(0, 1fr)); justify-items: center; }
  .stage.spot .tile.is-focus { justify-self: stretch; }
  .tile.av-tile .avatar { width: 42%; }
  .controls { width: calc(100vw - 12px); justify-content: space-between; gap: 2px; padding: 6px 8px; }
  .controls .ctl, .controls .ctl.danger { flex: none; width: clamp(34px, calc((100vw - 80px) / 9), 46px); height: clamp(34px, calc((100vw - 80px) / 9), 46px); border-radius: 50%; margin: 0; }
  .controls .ctl.danger { width: clamp(42px, calc((100vw - 80px) / 7), 58px); border-radius: 999px; }
  .controls .ctl svg { width: 55%; height: 55%; }
  .controls .share-gear { right: -3px; bottom: -3px; }
  .app.ctl-min .controls { width: auto; justify-content: center; gap: 6px; }
}

/* Espelho da própria câmera gira no centro (antes saía do bloco e ficava preto) */
.tile video.mirror, .sp-cam video.mirror { transform-origin: center; transform: scaleX(-1); }

/* Prévia pausada quando você está em outro app */
.tile.paused-preview::after, .sp.paused-preview .sp-head::after {
  content: "⏸  Prévia pausada pra economizar\A sua transmissão continua no ar 📡"; white-space: pre-line; position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; text-align: center; padding: 12px; background: #140f0ce8; color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.5;
}
.sp.paused-preview .sp-head::after { content: "⏸"; border-radius: 50%; font-size: 18px; padding: 0; }

/* PC: blocos de baixo maiores, no formato de tela */
@media (min-width: 861px) {
  .stage.spot { grid-template-rows: minmax(0, 1fr) clamp(120px, 27%, 240px); justify-items: center; }
  .stage.spot .tile:not(.is-focus) { aspect-ratio: 16 / 9; height: 100%; width: auto; max-width: 100%; }
  .stage.spot .tile.is-focus { justify-self: stretch; }
}

/* Pedir pra jogar */
.ctl-fab {
  position: absolute; right: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px;
  border-radius: 999px; background: linear-gradient(135deg, var(--terracota), #f08a3c); color: #fff; font-size: 14px;
  box-shadow: 0 10px 30px #e2673a66, inset 0 -3px 0 #0002; animation: fab-in .5s cubic-bezier(.3,1.5,.5,1), fab-glow 2.4s ease-in-out 1s infinite;
}
.ctl-fab:hover { background: linear-gradient(135deg, #ec7547, #f59a52); transform: translateY(-2px); }
.ctl-fab .fab-ico { font-size: 20px; animation: wiggle 2.4s ease 1.2s infinite; display: inline-block; }
.ctl-fab.waiting { background: var(--bg-3); color: var(--muted); box-shadow: 0 8px 24px #0008; animation: none; }
.ctl-fab.waiting .fab-ico { animation: spin 2s linear infinite; }
.tile.zoomed .ctl-fab, .stage.spot .tile:not(.is-focus) .ctl-fab { display: none; }
@keyframes fab-in { from { transform: scale(.4) translateY(20px); opacity: 0; } }
@keyframes fab-glow { 0%, 100% { box-shadow: 0 10px 30px #e2673a66; } 50% { box-shadow: 0 10px 40px #e8b33caa; } }
@media (max-width: 860px) { .ctl-fab { right: 10px; bottom: 10px; padding: 12px 18px 12px 14px; font-size: 15px; } }

/* Pedido pra jogar (quem transmite escolhe o que libera) */
.allow-row { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.allow-opt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r); text-align: left; background: var(--bg-1); border: 1.5px solid var(--bg-4); font-size: 13px; color: var(--muted); }
.allow-opt.on { border-color: var(--terracota); background: var(--terracota-soft); color: var(--text); }
.allow-ico { font-size: 20px; }
.allow-check { margin-left: auto; font-style: normal; font-weight: 800; color: var(--terracota); opacity: 0; }
.allow-opt.on .allow-check { opacity: 1; }

/* "Pedir pra jogar": pequeno, no canto de cima (não atrapalha a barra da tela cheia) */
.ctl-fab { top: 10px; right: 10px; bottom: auto; padding: 6px 12px 6px 9px; font-size: 12px; gap: 6px; background: #1b1411d9; color: var(--text); border: 1.5px solid #e2673a88; box-shadow: 0 6px 18px #0008; animation: fab-in .5s cubic-bezier(.3,1.5,.5,1); backdrop-filter: none; }
.ctl-fab:hover { background: var(--terracota); color: #fff; transform: none; }
.ctl-fab .fab-ico { font-size: 15px; animation: none; }
@media (max-width: 860px) { .ctl-fab { top: 8px; right: 8px; bottom: auto; padding: 5px 10px 5px 8px; font-size: 12px; } }
.tile:fullscreen .ctl-fab { top: 14px; right: 14px; }

/* =================== Jogar no meu PC =================== */
.mypc-sec { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, #2a1d16, #241b16); border: 1.5px solid var(--bg-4); }
.mypc-head { display: flex; align-items: center; gap: 12px; }
.mypc-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 24px; border-radius: 14px; background: #e8b33c26; }
.mypc-head b { font-family: var(--display); font-weight: 900; font-size: 19px; display: block; }
.mypc-head small { color: var(--muted); font-size: 13px; }
.mypc-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.mypc-dev { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--bg-1); border: 1.5px solid var(--bg-4); text-align: left; font-weight: 400; transition: border-color .15s, transform .15s; }
.mypc-dev:hover { border-color: var(--terracota); transform: translateY(-2px); background: var(--bg-1); }
.mypc-pc { position: relative; width: 54px; height: 38px; flex: none; border-radius: 6px; border: 3px solid #f4e9dc; background: #2a1a12; display: grid; place-items: center; font-size: 16px; }
.mypc-pc i { position: absolute; bottom: -9px; left: 50%; width: 20px; height: 5px; margin-left: -10px; background: #f4e9dc; border-radius: 0 0 4px 4px; }
.mypc-name { flex: 1; min-width: 0; display: grid; }
.mypc-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mypc-name small { color: var(--oliva); font-size: 12px; }
.mypc-go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--terracota); color: #fff; font-size: 14px; }
.mypc-empty { margin: 0; color: var(--faint); font-size: 13px; }

.pcv { position: fixed; inset: 0; z-index: 150; background: #000; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.pcv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.pcv-touch { position: absolute; inset: 0; z-index: 1; touch-action: none; }
.pcv-status { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 16px; background: #1b1411e6; color: var(--text); font-weight: 600; }
.pcv-status[hidden] { display: none; }
.pcv-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--mostarda); border-right-color: transparent; animation: spin .7s linear infinite; }
.pcv-bar { position: absolute; z-index: 4; top: calc(8px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); overflow-x: auto; padding: 5px; border-radius: 18px; background: #1b1411e0; border: 1.5px solid #ffffff14; box-shadow: 0 10px 30px #000a; transition: transform .3s cubic-bezier(.2,1,.3,1), opacity .25s; scrollbar-width: none; }
.pcv-bar::-webkit-scrollbar { display: none; }
.pcv.ui-off .pcv-bar { transform: translate(-50%, -140%); opacity: 0; pointer-events: none; }
.pcv-btn { flex: none; display: grid; justify-items: center; gap: 1px; min-width: 52px; padding: 5px 6px; border-radius: 12px; background: transparent; color: var(--text); font-weight: 600; }
.pcv-btn:hover, .pcv-btn:active { background: #ffffff14; }
.pcv-btn span { font-size: 18px; line-height: 1.1; }
.pcv-btn small { font-size: 9.5px; color: var(--muted); }
.pcv-title { display: grid; padding: 0 8px; min-width: 0; max-width: 170px; line-height: 1.2; }
.pcv-title b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcv-title small { font-size: 10px; color: var(--oliva); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcv-handle { position: absolute; z-index: 4; top: 0; left: 50%; transform: translate(-50%, -120%); width: 64px; height: 22px; padding: 0; border-radius: 0 0 14px 14px; background: #1b1411b3; color: var(--muted); font-size: 14px; opacity: 0; transition: transform .3s, opacity .3s; }
.pcv.ui-off .pcv-handle { transform: translate(-50%, 0); opacity: .55; }
.pcv-kbd { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.pc-screens h3, .pc-keys h3 { margin: 0 0 12px; padding-right: 44px; font-family: var(--display); font-weight: 900; font-size: 22px; }
.pc-screen-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pc-screen { display: grid; gap: 4px; padding: 8px; border-radius: 14px; background: var(--bg-1); border: 2px solid var(--bg-4); text-align: left; font-weight: 400; }
.pc-screen.on { border-color: var(--terracota); }
.pc-screen img, .pc-screen-ph { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: #000; display: grid; place-items: center; font-size: 28px; }
.pc-screen small { color: var(--faint); font-size: 11px; }
.pc-key-grid { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); }
.pc-key { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--bg-1); border: 1.5px solid var(--bg-4); font-weight: 600; }
.pc-key:active { background: var(--terracota); color: #fff; transform: scale(.95); }
.pc-key span { font-size: 20px; }
.pc-key small { font-size: 10.5px; color: var(--muted); text-align: center; }
.pcv .sheet-wrap { z-index: 160; }
/* Monitor virtual no seletor de telas */
.pc-virtual { border-style: dashed; background: linear-gradient(160deg, #e2673a14, transparent 60%), var(--bg-1); }
.pc-virtual.on { border-style: solid; }
.pc-virtual-ph { background: radial-gradient(circle at 50% 40%, #e2673a33, #000 70%); }
.pc-virtual-ph i { font-style: normal; height: 62%; max-width: 86%; display: grid; place-items: center; border: 2px solid var(--terracota); border-radius: 6px; font-size: 18px; box-shadow: 0 0 18px #e2673a55; }
.pc-screens .mode-hint { display: block; margin-top: 12px; }
.pc-vdd-ask { display: grid; gap: 10px; text-align: center; justify-items: center; }
.pc-vdd-ask-art { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 32px; background: linear-gradient(145deg, var(--terracota), #b8452a); box-shadow: 0 8px 22px #e2673a40; }
.pc-vdd-ask h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 21px; }
.pc-vdd-ask p { margin: 0; color: var(--muted); }
.row-btns { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.row-btns button { flex: 1; }
/* Conexão agora (Ajustes do jogo) */
.pc-conn { display: grid; gap: 6px; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--bg-1); border: 1.5px solid var(--bg-4); }
.pc-conn-t { font-size: 13px; }
.pc-conn-row { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline; font-size: 13px; }
.pc-conn-row span { color: var(--faint); }
.pc-conn-row b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pc-conn-row small { grid-column: 1 / -1; color: var(--faint); font-size: 11px; }

.toast { z-index: 210; }
.pcv-title { min-width: 90px; }

.pcv-title { min-width: 110px; max-width: 240px; overflow: hidden; }
.pcv-title small { overflow: hidden; text-overflow: ellipsis; }

/* =================== Meu PC em destaque =================== */
.pc-badge { background: var(--oliva) !important; }
.mypc-sec.big { gap: 16px; padding: 20px 16px; }
.mypc-hero { display: grid; justify-items: center; text-align: center; gap: 8px; }
.mypc-hero h2 { margin: 6px 0 0; font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1.1; }
.mypc-hero p { margin: 0; color: var(--muted); font-size: 14px; max-width: 360px; }
.mypc-hero-pc { position: relative; width: 120px; height: 78px; border-radius: 12px; border: 6px solid #f4e9dc; background: radial-gradient(circle at 50% 40%, #e2673a66, #2a1a12 70%); display: grid; place-items: center; font-size: 34px; animation: bob 3s ease-in-out infinite; box-shadow: 0 16px 40px #0008; }
.mypc-hero-pc i { position: absolute; bottom: -18px; left: 50%; width: 40px; height: 10px; margin-left: -20px; background: #f4e9dc; border-radius: 0 0 8px 8px; }
.mypc-sec.big .mypc-head { display: none; }
.mypc-sec.big .mypc-list { grid-template-columns: 1fr; }
.mypc-sec.big .mypc-dev { padding: 16px; }
.mypc-empty { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.mypc-empty b { color: var(--text); }
.mypc-empty ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.mypc-empty .chip { justify-self: start; text-decoration: none; padding: 8px 14px; }
.sec-pc { border-color: #e8b33c55; background: linear-gradient(180deg, #e8b33c14, var(--bg-1) 70%); }
.sec-pc .sec-ico { background: #e8b33c33; }
.pc-row { width: calc(100% - 12px); margin: 0 6px; background: transparent; text-align: left; font-weight: 600; }
.pc-row .chip { flex: none; }

/* Modo controle no celular: barrinha compacta que não corta */
.ctl-bar.compact { top: 8px; left: 8px; transform: none; opacity: .9; gap: 4px; padding: 4px; max-width: calc(100% - 16px); }
.ctl-bar.compact b { padding: 0 2px; }
.ctl-bar.compact .chip { padding: 6px 9px; font-size: 14px; }
.ctl-bar .chip { white-space: nowrap; }

/* Foto do grupo */
.g-badge.has-photo { overflow: hidden; padding: 0; }
.g-badge img, .g-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-frame.has-photo { padding: 0; overflow: hidden; }
.g-badge.xl { width: 72px; height: 72px; border-radius: 22px; font-size: 38px; }
.gphoto-edit { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--r); background: var(--bg-1); }
.gphoto-edit > div { display: grid; gap: 4px; }
.gphoto-edit small { color: var(--faint); font-size: 12px; }

.pc-vdd { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg-1); border: 1.5px solid var(--bg-4); }
.pc-vdd.on { border-color: var(--oliva); background: #8fa35f14; }
.pc-vdd > div { flex: 1; display: grid; gap: 2px; }
.pc-vdd small { color: var(--faint); font-size: 12px; }
.pc-vdd button { flex: none; }
.vdd-install:empty { display: none; }
.vdd-install .chip { padding: 8px 14px; }

.pcv-video.fill { object-fit: fill; }
/* Motor Turbo: a imagem vem desenhada no canvas; o <video> continua tocando só o som */
.pcv-canvas { display: none; }
.pcv.turbo .pcv-canvas { display: block; }
.pcv.turbo #pcVideo { opacity: 0; }
/* Pré-checagem ao conectar */
.pcv-pre { position: absolute; z-index: 6; top: 64px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 32px)); display: grid; gap: 8px; padding: 14px 16px 10px; border-radius: 18px; background: #1b1411ee; border: 1.5px solid var(--bg-4); box-shadow: 0 14px 40px #000a; animation: prePop .35s cubic-bezier(.2, 1.3, .4, 1) both; backdrop-filter: blur(8px); }
.pcv-pre[hidden] { display: none; }
@keyframes prePop { from { opacity: 0; transform: translate(-50%, -8px) scale(.97); } }
.pcv-pre-t { font-size: 15px; }
.pcv-pre-i { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; padding: 7px 9px; border-radius: 12px; background: #ffffff08; border-left: 3px solid var(--oliva); }
.pcv-pre-i.ok { border-left-color: var(--mostarda); }
.pcv-pre-i.warn { border-left-color: var(--terracota); background: #e2673a14; }
.pcv-pre-i > span { font-size: 20px; line-height: 1.2; text-align: center; }
.pcv-pre-i b { display: block; font-size: 13px; }
.pcv-pre-i small { color: var(--muted); font-size: 12px; }
.pcv-pre-x { text-align: center; color: var(--faint); font-size: 11px; }
.pc-conn-diag { padding: 8px 10px; border-radius: 10px; font-size: 12.5px; background: #8fa35f1f; color: var(--text); }
.pc-conn-diag.warn { background: #e8b33c1f; }
.pc-conn-diag.bad { background: #e2673a26; }

/* Conversa do grupo (rede P2P entre os membros) */
.g-chat { position: relative; }
.g-chat.has-new { border-color: var(--mostarda); color: var(--mostarda); }
.g-new-n, .g-row-new-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--terracota); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.g-row-new-n { margin: 0 4px 0 auto; cursor: pointer; }

/* Celular: a barra de baixo sempre cabe na largura da tela (os botões encolhem juntos em telas estreitas) */
@media (max-width: 860px) {
  .controls { --b: min(46px, calc((100vw - 64px) / 9.4)); max-width: calc(100vw - 12px); box-sizing: border-box; }
  .controls .ctl, .controls .ctl.danger { width: var(--b); height: var(--b); min-width: 0; }
  .controls .ctl.danger { width: calc(var(--b) * 1.25); }
  .app.ctl-min .controls { --b: 44px; }
}
@media (max-width: 400px) {
  .tabs button { white-space: nowrap; padding: 9px 4px; gap: 4px; font-size: 13px; min-width: 0; }
}

/* Celular deitado (tela baixinha): abas finas, pessoas numa coluna à direita, palco com o máximo de altura */
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .tabs { padding-top: 2px; padding-bottom: 2px; }
  .tabs button { padding: 4px 8px; font-size: 13px; }
  .controls { --b: 36px; padding: 4px 8px; }
  .stage { padding-top: 6px !important; }
  .stage.spot { grid-template-columns: minmax(0, 1fr) clamp(64px, 13vw, 110px) !important; grid-template-rows: repeat(var(--others), minmax(0, 1fr)) !important; grid-auto-rows: 0; }
  .stage.spot .tile.is-focus { grid-column: 1 !important; grid-row: 1 / -1 !important; }
  .stage.spot .tile:not(.is-focus) { grid-column: 2 !important; grid-row: auto !important; width: 100% !important; height: auto !important; max-height: 100%; aspect-ratio: 1; align-self: center; }
  .tile.poster .poster-in { gap: 6px; padding: 8px; }
  .tile.poster .poster-in small { display: none; }
  .tile.poster .poster-av { width: 44px; height: 44px; }
  .tile.poster .poster-in b { font-size: 16px; }
}

/* Telas médias (Fold aberto, tablet, janela estreita): nada empurra a página pra fora da tela */
@media (min-width: 861px) {
  .controls { max-width: 100%; flex-wrap: wrap; justify-content: center; }
}

.unverified-tag { display: none; font-size: 11px; color: var(--faint); cursor: help; }
.msg.unverified .unverified-tag { display: inline; }
.msg.unverified .msg-text { opacity: .75; }

/* =================== Página inicial (quem ainda não entrou) =================== */
/* A casa à noite: céu terracota-ameixa no topo, madeira escura embaixo, luz de abajur nos destaques. */
.join.lp {
  display: block; place-items: normal; align-content: normal; gap: 0; height: 100dvh; overflow-y: auto; overflow-x: hidden; padding: 0; scroll-behavior: smooth;
  background: var(--bg-0); --lp-w: 1180px; --plum: #3b1d2e; --night: #22121c;
}
.join.lp[hidden] { display: none; }
.lp .av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font-weight: 800; font-size: 13px; color: #fff; flex: none; }
.lp .av.a1 { background: #5b7fa6; } .lp .av.a2 { background: #b05a7a; } .lp .av.a3 { background: #4f8a7c; } .lp .av.a4 { background: #c9902a; }

/* botões grandes e redondos, estilo "pílula" */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border-radius: 999px;
  font: 700 18px/1 var(--font); text-decoration: none; cursor: pointer; border: 0; transition: transform .2s cubic-bezier(.3,1.6,.5,1), box-shadow .2s, background .2s;
}
.lp-btn svg { width: 22px; height: 22px; fill: currentColor; }
.lp-btn:hover { transform: translateY(-3px); }
.lp-btn-light { background: var(--text); color: #2a1a12; box-shadow: 0 10px 30px #0006; }
.lp-btn-light:hover { box-shadow: 0 14px 34px #e2673a55; color: var(--terracota-2); background: #fff8ef; }
.lp-btn-dark { background: #1b1411; color: var(--text); box-shadow: 0 10px 30px #0005; }
.lp-btn-dark:hover { background: #2a1d17; box-shadow: 0 14px 34px #0008; }
.lp-btn.sm { padding: 10px 20px; font-size: 15px; }

/* ----- topo ----- */
.lp-nav {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 24px; padding: 14px max(20px, calc((100% - var(--lp-w)) / 2));
  transition: background .25s, box-shadow .25s, backdrop-filter .25s;
}
.lp-nav.solid { background: #1b1411e6; backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line-hi); }
.lp-logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 900 26px/1 var(--display); letter-spacing: -.02em; }
.lp-logo i { color: var(--terracota); font-style: normal; }
.lp-links { display: flex; gap: 26px; margin-left: auto; }
.lp-links a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 15px; opacity: .85; }
.lp-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--mostarda); }

/* ----- hero ----- */
.lp-hero {
  position: relative; margin-top: -66px; padding: 120px max(20px, calc((100% - var(--lp-w)) / 2)) 150px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center;
  background:
    radial-gradient(circle at 82% 18%, #e8b33c40 0, transparent 34%),
    radial-gradient(circle at 12% 88%, #e2673a55 0, transparent 42%),
    linear-gradient(160deg, #c9452f 0%, #8e3a3a 32%, var(--plum) 68%, var(--night) 100%);
  overflow: hidden;
}
.lp-stars { position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 12%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 44% 70%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 88% 60%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 8% 64%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 60% 40%, #fff9 50%, transparent 51%);
  background-size: 420px 300px; animation: lp-twinkle 5s ease-in-out infinite alternate;
}
@keyframes lp-twinkle { to { opacity: .2; } }
.lp-hero-text { position: relative; z-index: 2; display: grid; gap: 22px; justify-items: start; }
.lp-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #0000002e; border: 1px solid #ffffff2a; color: #fff; font-weight: 700; font-size: 14px; backdrop-filter: blur(6px); }
.lp-flag { position: relative; width: 26px; height: 18px; border-radius: 4px; flex: none; background: #13985a; overflow: hidden; }
.lp-flag::after { content: ""; position: absolute; inset: 0; margin: auto; width: 76%; height: 76%; background: #f7c600; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.lp-flag::before { content: ""; position: absolute; inset: 0; margin: auto; width: 31%; height: 44%; border-radius: 50%; background: #1e3f8f; z-index: 1; }
.lp-flag.big { width: 120px; height: 84px; border-radius: 14px; }
.lp-hero h1 { margin: 0; font: 900 clamp(44px, 6.2vw, 84px)/.98 var(--display); letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.lp-hero h1 em { display: block; font-style: italic; font-weight: 700; color: #ffd27a; }
.lp-sub { margin: 0; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: #fbe9dd; max-width: 34em; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.lp-cta.center { justify-content: center; }
.lp-small { margin: -6px 0 0; color: #fbe9ddb3; font-size: 14px; }
.lp-wave-bottom { position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; background: var(--bg-0);
  clip-path: polygon(0 60%, 8% 52%, 18% 58%, 30% 44%, 42% 54%, 55% 40%, 68% 52%, 80% 42%, 91% 55%, 100% 46%, 100% 100%, 0 100%); }

/* cena: janela do app */
.lp-scene { position: relative; z-index: 2; animation: lp-float-in 1s cubic-bezier(.2,1,.3,1) both .2s; }
@keyframes lp-float-in { from { opacity: 0; transform: translateY(40px) rotate(2deg) scale(.96); } }
.lp-win { background: #1b1411; border-radius: 22px; border: 1.5px solid #ffffff1c; box-shadow: 0 40px 90px #0009, 0 0 0 8px #ffffff0c; overflow: hidden; transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); transition: transform .6s; }
.lp-scene:hover .lp-win { transform: perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.lp-win-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #241b16; font-size: 13px; color: var(--muted); font-weight: 600; }
.lp-win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a2c24; }
.lp-win-bar i:first-child { background: #e5574a; } .lp-win-bar i:nth-child(2) { background: #e8b33c; } .lp-win-bar i:nth-child(3) { background: #8fa35f; }
.lp-win-bar span { margin-left: 8px; }
.lp-win-body { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; padding: 12px; }

/* o "jogo" passando na tela */
.lp-game { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: linear-gradient(#ff9e6b 0%, #e2673a 38%, #7a2f4a 62%, #2a1426 100%); }
.lp-sun { position: absolute; left: 50%; top: 30%; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-linear-gradient(#ffe08a 0 9%, transparent 9% 13%); box-shadow: 0 0 60px #ffd27a; }
.lp-hills { position: absolute; left: 0; right: 0; top: 40%; height: 22%; background: #4a1f3a; clip-path: polygon(0 100%, 0 60%, 12% 30%, 24% 62%, 38% 20%, 52% 64%, 66% 26%, 80% 58%, 92% 34%, 100% 52%, 100% 100%); }
.lp-road { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: #1d1020; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); overflow: hidden; }
.lp-stripes { position: absolute; left: 50%; top: -100%; width: 6%; height: 300%; transform: translateX(-50%); background: repeating-linear-gradient(#ffd27a 0 18px, transparent 18px 46px); animation: lp-road .5s linear infinite; }
@keyframes lp-road { to { transform: translate(-50%, 46px); } }
.lp-car { position: absolute; left: 50%; bottom: 6%; font-size: clamp(28px, 4vw, 44px); transform: translateX(-50%); animation: lp-steer 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 6px #0008); }
@keyframes lp-steer { 0%, 100% { margin-left: -14%; } 50% { margin-left: 14%; } }
.lp-live { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: var(--terracota); color: #fff; font-weight: 800; font-size: 11px; }
.lp-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #fff; margin-right: 5px; vertical-align: 1px; animation: lp-blink 1.2s infinite; }
@keyframes lp-blink { 50% { opacity: .2; } }
.lp-q { position: absolute; right: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: #000a; color: #fff; font: 700 11px/1.4 var(--font); }
.lp-cursor { position: absolute; left: 30%; top: 55%; display: flex; align-items: flex-start; gap: 2px; animation: lp-cursor 5s ease-in-out infinite; }
.lp-cursor svg { width: 20px; height: 20px; fill: #fff; stroke: #2a1a12; stroke-width: 1.5; }
.lp-cursor b { margin-top: 14px; padding: 2px 8px; border-radius: 8px; background: #b05a7a; color: #fff; font-size: 11px; white-space: nowrap; }
@keyframes lp-cursor { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(120%, -60%); } 60% { transform: translate(60%, 30%); } }

.lp-chatcol { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-width: 0; }
.lp-msg, .lp-typing { display: flex; gap: 8px; align-items: flex-start; opacity: 0; animation: lp-msg-in 9s ease infinite; }
.lp-msg p { margin: 0; padding: 7px 10px; border-radius: 4px 12px 12px 12px; background: #2e231c; font-size: 12.5px; line-height: 1.35; color: var(--text); }
.lp-msg p b { display: block; font-size: 11px; color: var(--mostarda); }
.lp-msg.m1 { animation-delay: .4s; } .lp-msg.m2 { animation-delay: 1.6s; } .lp-msg.m3 { animation-delay: 2.8s; } .lp-typing { animation-delay: 4s; }
@keyframes lp-msg-in { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 6%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.lp-wave { display: inline-flex; gap: 2px; align-items: center; height: 14px; vertical-align: -2px; }
.lp-wave i { width: 3px; border-radius: 2px; background: var(--mostarda); animation: lp-wv .9s ease-in-out infinite; }
.lp-wave i:nth-child(odd) { animation-delay: .2s; } .lp-wave i:nth-child(3n) { animation-delay: .45s; }
@keyframes lp-wv { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.dots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #2e231c; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: lp-dot 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lp-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.lp-people { display: flex; gap: 14px; justify-content: center; padding: 6px 12px 16px; }
.lp-p { display: grid; justify-items: center; gap: 4px; }
.lp-p .av { width: 46px; height: 46px; border-radius: 15px; font-size: 18px; transition: box-shadow .2s; }
.lp-p small { font-size: 11px; color: var(--muted); font-weight: 600; }
.lp-p.talk .av { animation: lp-talk 1.4s ease-in-out infinite; }
.lp-p.talk2 .av { animation: lp-talk 1.4s ease-in-out infinite .7s; }
@keyframes lp-talk { 0%, 100% { box-shadow: 0 0 0 2px #1b1411, 0 0 0 4px #e8b33c00; } 40% { box-shadow: 0 0 0 2px #1b1411, 0 0 0 5px var(--mostarda); } }

.lp-float { position: absolute; font-size: 34px; pointer-events: none; animation: lp-up 5s ease-in infinite; opacity: 0; filter: drop-shadow(0 4px 8px #0006); }
.lp-float.f1 { left: 8%; bottom: 10%; } .lp-float.f2 { left: 30%; bottom: 4%; animation-delay: 1.3s; } .lp-float.f3 { right: 20%; bottom: 12%; animation-delay: 2.4s; } .lp-float.f4 { right: 4%; bottom: 30%; animation-delay: 3.4s; }
@keyframes lp-up { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; transform: translateY(-30px) scale(1.1); } 100% { opacity: 0; transform: translateY(-190px) scale(.9) rotate(12deg); } }
.lp-badge-p2p { position: absolute; left: -18px; top: 64%; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--text); color: #2a1a12; font-weight: 800; font-size: 14px; box-shadow: 0 16px 34px #0007; animation: lp-bob 4s ease-in-out infinite; }
.lp-badge-p2p .dot { width: 10px; height: 10px; border-radius: 50%; background: #3fae6a; box-shadow: 0 0 0 4px #3fae6a33; }
@keyframes lp-bob { 50% { transform: translateY(-10px); } }

/* ----- faixa ----- */
.lp-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; padding: 6px 20px 30px; color: var(--muted); font-weight: 700; font-size: 15px; }

/* ----- recursos ----- */
.lp-main { width: min(var(--lp-w), calc(100% - 40px)); margin: 0 auto; display: grid; gap: 30px; padding: 40px 0 80px; }
.lp-feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 60px; align-items: center; padding: 56px; border-radius: 34px; background: var(--bg-1); border: 1px solid var(--line); }
.lp-feat.flip .lp-feat-text { order: 2; }
.lp-feat:nth-child(2) { background: linear-gradient(135deg, #2a1810, var(--bg-1)); }
.lp-feat:nth-child(4) { background: linear-gradient(135deg, #1d1a22, var(--bg-1)); }
.lp-feat-text { display: grid; gap: 16px; }
.lp-kicker { font: italic 700 18px/1 var(--display); color: var(--terracota); }
.lp-kicker.light { color: #ffd27a; }
.lp h2 { margin: 0; font: 900 clamp(30px, 3.6vw, 48px)/1.05 var(--display); letter-spacing: -.025em; color: var(--text); text-wrap: balance; }
.lp-feat p, .lp-why-head p, .lp-br-band p, .lp-final p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); }
.lp-mock { position: relative; min-height: 300px; display: grid; align-content: center; gap: 12px; }

/* grupos */
.lp-gcard { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; background: var(--bg-2); border: 1.5px solid var(--bg-4); box-shadow: 0 12px 30px #0005; }
.lp-gcard:nth-child(2) { margin-left: 34px; opacity: .8; }
.lp-gcard.hot { border-color: var(--g); animation: lp-hot 3s ease-in-out infinite; }
@keyframes lp-hot { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--g) 25%, transparent), 0 12px 30px #0005; } }
.lp-gcard .ge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 26px; background: color-mix(in srgb, var(--g) 35%, #1b1411); }
.lp-gcard b { display: block; font-size: 17px; }
.lp-gcard small { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.lp-gcard .lv { width: 8px; height: 8px; border-radius: 50%; background: #3fae6a; animation: lp-blink 1.6s infinite; }
.lp-av-row { display: flex; }
.lp-av-row .av { margin-left: -8px; box-shadow: 0 0 0 3px var(--bg-2); }
.lp-av-row .av.pop { animation: lp-pop 3s cubic-bezier(.3,1.8,.5,1) infinite; }
@keyframes lp-pop { 0%, 20% { transform: scale(0); } 35%, 100% { transform: scale(1); } }
.lp-join-toast { justify-self: end; margin-right: 10px; padding: 9px 16px; border-radius: 999px; background: var(--text); color: #2a1a12; font-weight: 700; font-size: 14px; animation: lp-toast 3s ease infinite; }
@keyframes lp-toast { 0%, 25% { opacity: 0; transform: translateY(10px); } 35%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* tela */
.lp-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #0d0a09; border: 8px solid #2e231c; box-shadow: 0 30px 60px #0007; }
.lp-movie { position: absolute; inset: 0; background: linear-gradient(120deg, #2b1830, #5b2a3c 40%, #e2673a 100%); background-size: 200% 200%; animation: lp-pan 8s ease-in-out infinite alternate; }
@keyframes lp-pan { to { background-position: 100% 100%; } }
.lp-bar { position: absolute; bottom: 0; width: 18%; border-radius: 10px 10px 0 0; background: #ffffff1c; animation: lp-eq 2.4s ease-in-out infinite; }
.lp-bar.b1 { left: 12%; height: 40%; } .lp-bar.b2 { left: 41%; height: 64%; animation-delay: .4s; } .lp-bar.b3 { left: 70%; height: 50%; animation-delay: .8s; }
@keyframes lp-eq { 50% { transform: scaleY(.6); transform-origin: bottom; } }
.lp-play { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: #fff2; backdrop-filter: blur(6px); color: #fff; font-size: 26px; }
.lp-specs { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: #000b; backdrop-filter: blur(8px); white-space: nowrap; }
.lp-specs span { padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #c9b5a2; }
.lp-specs span.on { background: var(--terracota); color: #fff; }
.lp-specs i { width: 1px; height: 16px; background: #fff3; margin: 0 3px; }
.lp-viewers { position: absolute; right: -12px; top: -18px; display: flex; align-items: center; padding: 8px 14px 8px 18px; border-radius: 999px; background: var(--text); box-shadow: 0 14px 30px #0007; animation: lp-bob 4.5s ease-in-out infinite; }
.lp-viewers .av { margin-left: -8px; box-shadow: 0 0 0 3px var(--text); }
.lp-viewers small { margin-left: 8px; color: #2a1a12; font-weight: 800; font-size: 13px; }

/* jogar junto */
.lp-ask { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--bg-2); border: 1.5px solid var(--terracota); width: fit-content; box-shadow: 0 12px 30px #0006; animation: lp-shake 4s ease infinite; }
.lp-ask b { display: block; } .lp-ask small { color: var(--muted); }
@keyframes lp-shake { 0%, 8%, 100% { transform: none; } 2% { transform: rotate(-2deg); } 4% { transform: rotate(2deg); } 6% { transform: rotate(-1deg); } }
.lp-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-choices span { padding: 10px 16px; border-radius: 999px; background: var(--bg-3); border: 1.5px solid var(--bg-4); font-weight: 700; font-size: 14px; }
.lp-choices .c1 { animation: lp-pick 6s ease infinite; } .lp-choices .c2 { animation: lp-pick 6s ease infinite 2s; } .lp-choices .c3 { animation: lp-pick 6s ease infinite 4s; }
@keyframes lp-pick { 0%, 30%, 100% { background: var(--bg-3); border-color: var(--bg-4); color: var(--text); } 5%, 25% { background: var(--terracota); border-color: var(--terracota); color: #fff; } }
.lp-pad { justify-self: center; width: min(320px, 90%); }
.lp-pad svg { width: 100%; filter: drop-shadow(0 20px 30px #0008); animation: lp-bob 3.5s ease-in-out infinite; }
.lp-pad .bt { fill: #3a2c24; }
.lp-pad .b1 { animation: lp-press 2.4s infinite; --c: #8fa35f; } .lp-pad .b2 { animation: lp-press 2.4s infinite .6s; --c: #e5574a; } .lp-pad .b3 { animation: lp-press 2.4s infinite 1.2s; --c: #5b7fa6; } .lp-pad .b4 { animation: lp-press 2.4s infinite 1.8s; --c: #e8b33c; }
@keyframes lp-press { 0%, 20%, 100% { fill: #3a2c24; } 6% { fill: var(--c); } }

/* meu PC no celular */
.lp-phone-wrap { justify-items: center; }
.lp-phone { width: min(440px, 100%); padding: 10px; border-radius: 34px; background: #0d0a09; border: 2px solid #3a2c24; box-shadow: 0 30px 60px #0008; transform: rotate(-4deg); animation: lp-tilt 6s ease-in-out infinite; }
@keyframes lp-tilt { 50% { transform: rotate(-1deg) translateY(-6px); } }
.lp-phone-screen { position: relative; aspect-ratio: 2340 / 1080; border-radius: 24px; overflow: hidden; }
.lp-phone-screen .lp-game { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.lp-stick { position: absolute; left: 6%; bottom: 10%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #ffffff26; border: 2px solid #fff4; }
.lp-stick i { position: absolute; left: 50%; top: 50%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: #fff9; transform: translate(-50%, -50%); animation: lp-stick 3.2s ease-in-out infinite; }
@keyframes lp-stick { 0%, 100% { transform: translate(-90%, -50%); } 50% { transform: translate(-10%, -50%); } }
.lp-abxy { position: absolute; right: 6%; bottom: 10%; width: 22%; aspect-ratio: 1; }
.lp-abxy i { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #ffffff33; border: 1.5px solid #fff5; color: #fff; font: 800 11px/1 var(--font); display: grid; place-items: center; font-style: normal; }
.lp-abxy i:nth-child(1) { left: 33%; top: 0; } .lp-abxy i:nth-child(2) { left: 0; top: 33%; } .lp-abxy i:nth-child(3) { right: 0; top: 33%; } .lp-abxy i:nth-child(4) { left: 33%; bottom: 0; animation: lp-tap 1.6s infinite; }
@keyframes lp-tap { 0%, 30%, 100% { background: #ffffff33; } 10% { background: #8fa35f; transform: scale(.9); } }
.lp-fit { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: #000a; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.lp-pc-mini { position: absolute; right: 2%; top: 4%; display: grid; justify-items: center; gap: 2px; padding: 12px 16px; border-radius: 18px; background: var(--bg-2); border: 1.5px solid var(--bg-4); box-shadow: 0 12px 30px #0006; font-size: 30px; animation: lp-bob 4s ease-in-out infinite .5s; }
.lp-pc-mini small { font-size: 12px; color: var(--muted); font-weight: 700; }
.lp-link-line { display: none; }

/* chat */
.lp-chat { padding: 22px; border-radius: 24px; background: var(--bg-2); border: 1.5px solid var(--bg-4); box-shadow: 0 30px 60px #0006; gap: 12px; }
.lp-cm { display: flex; gap: 10px; align-items: flex-end; opacity: 0; animation: lp-msg-in 10s ease infinite; }
.lp-cm p { margin: 0; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--bg-3); font-size: 15px; line-height: 1.35; }
.lp-cm p b { display: block; font-size: 12px; color: var(--mostarda); margin-bottom: 2px; }
.lp-cm.mine { justify-content: flex-end; }
.lp-cm.mine p { background: var(--terracota); color: #fff; border-radius: 16px 16px 4px 16px; }
.lp-cm.r1 { animation-delay: .2s; } .lp-cm.r2 { animation-delay: 1.2s; } .lp-cm.r3 { animation-delay: 2.2s; } .lp-cm.r4 { animation-delay: 3.4s; } .lp-cm.r5 { animation-delay: 4.6s; }
.lp-file { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 16px; background: var(--bg-3); border: 1px solid var(--line-hi); }
.lp-file span { font-size: 26px; } .lp-file b { display: block; font-size: 14px; } .lp-file small { color: var(--muted); font-size: 12px; }
.lp-cm.typing { align-items: center; }
.lp-cm.typing small { color: var(--faint); font-size: 13px; }

/* ----- por que é diferente ----- */
.lp-why { position: relative; padding: 110px max(20px, calc((100% - var(--lp-w)) / 2)); display: grid; gap: 50px;
  background: radial-gradient(circle at 50% 0%, #e2673a33, transparent 50%), linear-gradient(180deg, var(--night), var(--plum) 55%, var(--night)); }
.lp-why-head { display: grid; gap: 18px; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto; }
.lp-why-head h2 { color: #fff; font-size: clamp(34px, 4.6vw, 60px); }
.lp-why-head h2 em { font-style: italic; font-weight: 700; color: #ffd27a; }
.lp-why-head p { color: #f0dccf; }

.lp-p2p { position: relative; width: min(640px, 100%); margin: 0 auto; aspect-ratio: 640 / 300; }
.lp-p2p svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-p2p .ln { fill: none; stroke: url(#lpLine); stroke-width: 4; stroke-linecap: round; opacity: .85; }
.lp-p2p .ln.dash { stroke: #ffffff55; stroke-dasharray: 2 9; stroke-width: 3; }
.lp-p2p .pk { fill: #ffd27a; filter: drop-shadow(0 0 6px #ffd27a); } .lp-p2p .pk.y { fill: #fff; filter: drop-shadow(0 0 6px #fff); }
.lp-node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 4px; }
.lp-node span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 24px; background: var(--text); font-size: 36px; box-shadow: 0 16px 30px #0007; }
.lp-node b { color: #fff; font-size: 14px; white-space: nowrap; }
.lp-node.n1 { left: 18.75%; top: 73%; } .lp-node.n2 { left: 81.25%; top: 73%; } .lp-node.n3 { left: 50%; top: 23%; }
.lp-node.srv { left: 50%; top: -9%; } .lp-node.srv span { width: 46px; height: 46px; border-radius: 14px; font-size: 22px; background: #ffffff22; box-shadow: none; } .lp-node.srv b { font-size: 12px; color: #f0dccfb0; font-weight: 600; }

.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lp-card { padding: 30px; border-radius: 26px; background: #ffffff0d; border: 1px solid #ffffff1c; backdrop-filter: blur(6px); display: grid; gap: 12px; align-content: start; transition: transform .25s, background .25s; }
.lp-card:hover { transform: translateY(-6px); background: #ffffff14; }
.lp-ico { font-size: 40px; }
.lp h3 { margin: 0; font: 900 26px/1.1 var(--display); color: #fff; }
.lp-card p { margin: 0; color: #f0dccf; font-size: 16px; line-height: 1.6; }

.lp-compare { width: min(860px, 100%); margin: 0 auto; border-radius: 24px; overflow: hidden; background: #0000003d; border: 1px solid #ffffff1c; }
.lp-compare .row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; align-items: center; padding: 16px 24px; border-top: 1px solid #ffffff14; }
.lp-compare .row.head { border-top: 0; background: #ffffff0a; }
.lp-compare .row span { color: #f0dccf; font-weight: 600; }
.lp-compare b { font-size: 15px; color: #f0dccf99; }
.lp-compare .row.head b { color: #fff; font-size: 16px; }
.lp-compare b.us { color: #fff; }
.lp-compare .row.head b.us { color: #ffd27a; font-family: var(--display); font-size: 20px; }
.lp-compare b.yes::before { content: "✓ "; color: #6fd394; }
.lp-compare b.no::before { content: "✕ "; color: #ff8f7f; }

/* ----- Brasil ----- */
.lp-br-band { width: min(var(--lp-w), calc(100% - 40px)); margin: 90px auto 0; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; padding: 44px 56px; border-radius: 34px;
  background: linear-gradient(120deg, #13985a26, #f7c60018 50%, #1e3f8f26); border: 1px solid var(--line-hi); }
.lp-br-band > div:last-child { display: grid; gap: 12px; }
.lp-br-art .lp-flag { animation: lp-wave-flag 3s ease-in-out infinite; transform-origin: left center; box-shadow: 0 20px 40px #0006; }
@keyframes lp-wave-flag { 50% { transform: perspective(300px) rotateY(-14deg) skewY(-2deg); } }

/* ----- plataformas ----- */
.lp-plat { width: min(var(--lp-w), calc(100% - 40px)); margin: 0 auto; padding: 100px 0 40px; display: grid; gap: 34px; justify-items: center; text-align: center; }
.lp-plat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: 100%; }
.lp-pcard { display: grid; gap: 14px; justify-items: center; align-content: start; padding: 40px 32px; border-radius: 30px; background: var(--bg-1); border: 1.5px solid var(--bg-4); }
.lp-pcard h3 { color: var(--text); }
.lp-pcard p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 30em; }
.lp-pcard .lp-btn { margin-top: 8px; }
.lp-pcard small { color: var(--faint); font-size: 13px; }
.lp-pcard.win { background: linear-gradient(160deg, #3a1f17, var(--bg-1)); border-color: #e2673a66; }

/* ----- final ----- */
.lp-final { margin: 60px auto 0; padding: 90px 20px 110px; display: grid; gap: 18px; justify-items: center; text-align: center;
  background: radial-gradient(ellipse at 50% 100%, #e2673a44, transparent 60%); }
.lp-final h2 { font-size: clamp(40px, 6vw, 76px); }
.lp-final-logo { width: 120px; height: 120px; animation: lp-bob 3s ease-in-out infinite; filter: drop-shadow(0 20px 30px #e2673a55); }
.lp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 26px max(20px, calc((100% - var(--lp-w)) / 2)) calc(26px + var(--safe-b)); border-top: 1px solid var(--line); color: var(--faint); font-size: 14px; }
.lp-foot .lp-logo { font-size: 20px; }
.lp-foot b { color: var(--muted); }
.lp-foot-links { display: flex; gap: 18px; }
.lp-foot a:not(.lp-logo) { color: var(--muted); }

/* ----- aparecendo ao rolar ----- */
.lp .reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,1,.3,1); }
.lp .reveal.in { opacity: 1; transform: none; }
.lp-cards .lp-card:nth-child(2) { transition-delay: .1s; } .lp-cards .lp-card:nth-child(3) { transition-delay: .2s; }

/* ----- janela de entrar ----- */
.lp-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; }
.lp-modal[hidden] { display: none; }
.lp-modal-bg { position: absolute; inset: 0; background: #0b0807cc; backdrop-filter: blur(6px); animation: fade-in .25s ease; }
.lp-modal .card { position: relative; animation: lp-modal-in .4s cubic-bezier(.2,1.3,.4,1); max-height: calc(100dvh - 32px); overflow-y: auto; }
@keyframes lp-modal-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.lp-modal-x { position: absolute; right: 12px; top: 12px; font-size: 22px; }
.lp-modal-legal { margin: 0; font-size: 12px; color: var(--faint); text-align: center; }
.lp-modal-legal a { color: var(--muted); }

/* aviso do download */
.lp-dl-note { position: fixed; right: 20px; bottom: calc(20px + var(--safe-b)); z-index: 70; display: flex; gap: 14px; align-items: flex-start; max-width: 360px; padding: 18px 18px 18px 20px; border-radius: 22px; background: var(--text); color: #2a1a12; box-shadow: 0 24px 60px #000a; animation: lp-modal-in .45s cubic-bezier(.2,1.3,.4,1); }
.lp-dl-note[hidden] { display: none; }
.lp-dl-ico { font-size: 28px; animation: lp-bob 1.4s ease-in-out infinite; }
.lp-dl-note b { font-size: 16px; }
.lp-dl-note ol { margin: 6px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: #5a4335; }
.lp-dl-note ol b { font-size: 14px; color: #2a1a12; }
.lp-dl-note .icon { color: #2a1a12; flex: none; margin: -6px -6px 0 0; }

/* App de PC: só o cartão de entrar (a vitrine é pro site) */
.lp.desk > :not(.lp-modal) { display: none !important; }
.lp.desk { background: radial-gradient(circle at 85% 8%, #e8b33c2e 0%, transparent 38%), var(--bg-1); }
.lp.desk .lp-modal-bg, .lp.desk .lp-modal-x { display: none; }

/* ----- telas menores ----- */
@media (max-width: 980px) {
  .lp-hero { grid-template-columns: 1fr; padding-top: 110px; padding-bottom: 130px; gap: 56px; text-align: left; }
  .lp-scene { max-width: 640px; width: 100%; justify-self: center; }
  .lp-feat, .lp-feat.flip { grid-template-columns: 1fr; gap: 36px; padding: 36px 26px; }
  .lp-feat.flip .lp-feat-text { order: 0; }
  .lp-cards { grid-template-columns: 1fr; }
  .lp-links { display: none; }
  .lp-nav .lp-btn { margin-left: auto; }
}
@media (max-width: 640px) {
  .lp-hero { padding: 96px 18px 110px; }
  .lp-cta .lp-btn { width: 100%; }
  .lp-win-body { grid-template-columns: 1fr; }
  .lp-chatcol { display: none; }
  .lp-win { transform: none; }
  .lp-scene:hover .lp-win { transform: none; }
  .lp-badge-p2p { left: 10px; top: auto; bottom: -22px; font-size: 13px; }
  .lp-p .av { width: 38px; height: 38px; }
  .lp-feat { padding: 28px 18px; border-radius: 26px; }
  .lp-feat p, .lp-why-head p, .lp-br-band p { font-size: 16px; }
  .lp-gcard:nth-child(2) { margin-left: 14px; }
  .lp-viewers { right: 4px; }
  .lp-specs span { padding: 4px 7px; font-size: 11px; }
  .lp-pc-mini { right: 0; top: -14px; padding: 8px 12px; font-size: 22px; }
  .lp-why { padding: 80px 18px; gap: 40px; }
  .lp-node span { width: 54px; height: 54px; font-size: 26px; border-radius: 18px; }
  .lp-compare .row { grid-template-columns: 1.2fr 1fr 1fr; padding: 12px 14px; gap: 8px; font-size: 13px; }
  .lp-compare b { font-size: 13px; }
  .lp-compare .row span { font-size: 13px; }
  .lp-br-band { grid-template-columns: 1fr; padding: 32px 22px; gap: 22px; margin-top: 60px; }
  .lp-plat-grid { grid-template-columns: 1fr; }
  .lp-pcard { padding: 30px 20px; }
  .lp-dl-note { left: 12px; right: 12px; max-width: none; }
  .lp-strip { gap: 10px 20px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
  .lp .reveal { opacity: 1; transform: none; }
  .lp-msg, .lp-typing, .lp-cm { opacity: 1; }
}

html .join.lp .lp-modal .card { animation: lp-modal-in .4s cubic-bezier(.2,1.3,.4,1); width: min(420px, 100%); }

.lp-car { width: clamp(44px, 6.5vw, 78px); }
.lp-car svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 6px #0009); }
.lp-phone-screen .lp-car { width: 13%; }
.lp-stripes { width: 2.6%; }
.lp-pad svg { height: auto; }
.lp-p2p svg { height: 100%; }
.lp-flag.sm { display: inline-block; width: 20px; height: 14px; vertical-align: -2px; border-radius: 3px; }
.lp-foot-br { display: inline-flex; align-items: center; gap: 6px; }
.lp-flag { display: inline-block; }
.lp-flag.big { display: block; }
.lp-p2p { margin-top: 56px; }
/* Ondinha do áudio: mexe só no desenho (escala), nunca no tamanho — senão a página toda "respira" */
.lp-wave { height: 14px; overflow: hidden; vertical-align: middle; }
.lp-wave i { height: 14px; transform-origin: center; animation-name: lp-wv2; }
@keyframes lp-wv2 { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

/* =================== YouTube junto =================== */
.yt-tile { background: #000; aspect-ratio: 16 / 9; }
.yt-mount, .yt-mount > div, .yt-mount iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-shield { position: absolute; inset: 0; z-index: 1; cursor: default; }
.yt-tile .tile-bar { z-index: 3; }
.yt-hold { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 2; max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; background: #140f0ce6; color: var(--mostarda); font-weight: 700; font-size: 13px; text-align: center; box-shadow: 0 8px 20px #0008; }
.yt-hold[hidden] { display: none; }
.yt-tap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; }
.yt-tap[hidden] { display: none; }
.yt-logo { display: inline-grid; place-items: center; color: #ff3d3d; }
.yt-logo svg { width: 20px; height: 20px; }
.yt-logo.big svg { width: 44px; height: 44px; }
.yt-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.yt-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.yt-name small { color: var(--faint); white-space: nowrap; }
#btnYt.on { color: #ff6b5b; }
.yt-input { width: 100%; font-size: 15px; }
.gd-title { display: flex; align-items: center; gap: 10px; font-size: 18px; }
@media (max-width: 860px) {
  .controls { --b: min(46px, calc((100vw - 64px) / 10.4)); }
  .yt-name small { display: none; }
  .yt-title { max-width: 18ch; }
}
.yt-note { margin: 0; font-size: 13px; color: var(--mostarda); }

/* YouTube junto v2: o vídeo cabe no espaço (sem ficar por baixo dos outros blocos) */
.yt-tile { aspect-ratio: auto; }
.stage:not(.spot) .yt-tile { aspect-ratio: 16 / 9; }
.stage.spot .yt-tile.is-focus { min-height: 0; }
.tile.fake-full { position: fixed !important; inset: 0 !important; z-index: 300; border-radius: 0; width: auto !important; height: auto !important; margin: 0 !important; }

#gdlg.yt-dlg .gd { width: min(720px, calc(100vw - 24px)); }
.yt-search { display: flex; gap: 8px; }
.yt-search input { flex: 1; min-width: 0; }
.yt-hint { margin: 0; color: var(--mostarda); font-size: 13px; }
.yt-hint:empty { display: none; }
.yt-results { display: grid; gap: 8px; max-height: min(46vh, 420px); overflow-y: auto; padding-right: 2px; }
.yt-results:empty { display: none; }
.yt-loading { color: var(--muted); padding: 10px 2px; }
.yt-res { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px; border-radius: 14px; background: var(--bg-1); border: 1px solid var(--line); }
.yt-res:hover { border-color: var(--bg-4); }
.yt-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: #000 center / cover no-repeat; }
.yt-thumb span { position: absolute; right: 5px; bottom: 5px; padding: 1px 6px; border-radius: 6px; background: #000c; color: #fff; font-size: 11px; font-weight: 700; }
.yt-thumb span.live { background: #e5574a; }
.yt-res-info { display: grid; gap: 3px; min-width: 0; }
.yt-res-info b { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-res-info small { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-res-act { display: grid; gap: 6px; }
.yt-res-act button { white-space: nowrap; }
.primary.sm { padding: 7px 12px; font-size: 13px; }
.yt-queue { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.yt-queue:empty { display: none; }
.yt-q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.yt-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.yt-q-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--bg-1); }
.yt-q-n { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--bg-3); font-size: 12px; font-weight: 800; color: var(--muted); flex: none; }
.yt-q-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
@media (max-width: 560px) {
  .yt-res { grid-template-columns: 96px minmax(0, 1fr); }
  .yt-res-act { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}
.tile.fake-full { border: 0 !important; box-shadow: none !important; }

/* Janela do YouTube: do tamanho certo (nada saindo pela direita) */
#gdlg.yt-dlg { width: min(720px, calc(100% - 24px)); }
#gdlg.yt-dlg .gd { width: auto; }
#gdlg.yt-dlg .gd > * { min-width: 0; }

/* Quem controla o vídeo */
.yt-ctl { position: absolute; left: 10px; top: 10px; z-index: 4; padding: 5px 11px; border-radius: 999px; background: #140f0cd9; color: var(--mostarda); font-weight: 800; font-size: 12px; pointer-events: auto; max-width: calc(100% - 70px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-ctl.me { background: var(--mostarda); color: #2a1a12; }
.yt-hold { top: 46px; }
.tile.yt-ctl-on::before { content: "👑"; position: absolute; top: 6px; right: 8px; z-index: 3; font-size: 18px; filter: drop-shadow(0 2px 3px #0009); }

/* Botão "Transmitir" (agrupa tela, câmera e YouTube) — só no celular */
#btnCast { display: none; }
@media (max-width: 860px) {
  .controls #btnCast:not([hidden]) { display: grid; }
  .controls #btnCam, .controls .share-wrap, .controls #btnYt { display: none !important; }
  .controls { --b: min(46px, calc((100vw - 64px) / 9.4)); }
}

.yt-end { border-color: #e5574a88; color: #ff9b8a; }
.yt-end:hover { background: var(--red-soft); }
.yt-ctl { cursor: pointer; }
.yt-ctl::after { content: " ▾"; opacity: .7; }

/* =================== Mini player (música junto) =================== */
.yt-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.yt-mode-b { display: grid; gap: 2px; text-align: left; padding: 10px 14px; border-radius: 14px; background: var(--bg-1); border: 1.5px solid var(--bg-4); color: var(--text); }
.yt-mode-b small { color: var(--faint); font-size: 12px; font-weight: 500; }
.yt-mode-b.on { border-color: var(--terracota); background: var(--terracota-soft); } /* o YouTube pede o player visível com pelo menos 200 px */
.yt-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; flex: none; }
.yt-eq i { width: 3px; height: 4px; border-radius: 2px; background: var(--mostarda); }
.yt-eq i:nth-child(2) { animation-delay: .25s !important; } .yt-eq i:nth-child(3) { animation-delay: .5s !important; }
@media (prefers-reduced-motion: reduce) { .yt-eq i { animation: none !important; } }

/* =================== Player compacto (música) =================== */
.yt-mix-probe { position: fixed; left: -4000px; top: 0; width: 200px; height: 200px; overflow: hidden; pointer-events: none; }
.yt-dock { position: relative; display: grid; border-radius: 18px; background: linear-gradient(160deg, #2e1d17, #1b1411); border: 1.5px solid #ffffff1a; box-shadow: 0 14px 40px #0009; }
.yt-dock-video { position: relative; width: 200px; height: 200px; border-radius: 14px; overflow: hidden; background: #000; flex: none; } /* o YouTube exige o player visível com 200×200 */
.yt-dock .yt-hold { top: 6px; font-size: 11px; padding: 5px 10px; white-space: normal; }
.yt-dock .yt-tap { padding: 8px 14px; font-size: 13px; }
.yt-dock-side { display: grid; gap: 7px; align-content: center; min-width: 0; }
.yt-dock-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.yt-dock-txt { display: grid; min-width: 0; }
.yt-dock-txt b { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-dock-who { color: var(--mostarda); font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yt-dock-prog { height: 5px; border-radius: 3px; background: #ffffff1c; overflow: hidden; }
.yt-dock-prog.seek { cursor: pointer; height: 6px; }
.yt-dock-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--terracota), var(--mostarda)); transition: width .5s linear; }
.yt-dock-ctl { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.yt-b { min-width: 30px; height: 30px; padding: 0 6px; border-radius: 10px; background: transparent; color: var(--text); font-size: 15px; display: inline-grid; place-items: center; }
.yt-b:hover { background: #ffffff14; }
.yt-b.play { width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: #2a1a12; font-size: 14px; }
.yt-b.play:hover { background: #fff; }
.yt-dock-foot { display: flex; align-items: center; gap: 8px; }
.yt-dock-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-right: auto; }
.yt-dock-volw { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.yt-dock-vol { width: 64px; }
.yt-dock.playing .yt-eq i { animation: lp-wv2 .9s ease-in-out infinite; height: 16px; transform-origin: bottom; }
/* fila */
.yt-dock-queue { display: grid; gap: 6px; padding: 10px; border-top: 1px solid #ffffff14; max-height: 240px; overflow-y: auto; }
.yt-dock-queue[hidden] { display: none; }
.yt-dq-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.yt-dq-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 10px; background: #0000002e; }
.yt-dq-row .yt-q-t { font-size: 13px; }
.yt-dq-auto { color: var(--faint); font-size: 11.5px; line-height: 1.4; }
.yt-dq-auto .link { margin-left: 4px; font-size: 11.5px; }

/* PC: cartão "tocando agora" na barra lateral, acima do seu nome */
.yt-dock.pc { margin: 8px 12px; padding: 10px; gap: 10px; grid-template-columns: 1fr; justify-items: center; flex: none; }
.yt-dock.pc .yt-dock-side { width: 100%; }
.yt-dock.pc .yt-dock-video { width: 100%; max-width: 260px; min-width: 200px; }
.app .side { min-width: 0; }
/* Celular: faixa compacta flutuando acima dos botões (arrasta pelo nome) */
.yt-dock.mob { position: fixed; left: 8px; right: 8px; bottom: calc(var(--ctl-h, 92px) + 6px); z-index: 40; padding: 8px; gap: 10px; grid-template-columns: 200px minmax(0, 1fr); animation: lp-modal-in .4s cubic-bezier(.2,1.3,.4,1); }
.yt-dock.mob .yt-dock-queue { grid-column: 1 / -1; }
.yt-dock.mob .yt-dock-vol { width: 54px; }
@media (max-width: 400px) {
  .yt-dock.mob { grid-template-columns: 200px minmax(0, 1fr); left: 4px; right: 4px; padding: 6px; gap: 8px; }
  .yt-b { min-width: 28px; }
  .yt-dock-volw { display: none; }
}
/* "não ouvir": vira uma pílula */
.yt-dock.off { display: inline-flex; border-radius: 999px; }
.yt-dock.off.pc { margin: 8px 12px; }
body > .yt-dock.off { position: fixed; right: 12px; bottom: calc(var(--ctl-h, 92px) + 6px); z-index: 40; }
.yt-dock-back { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: transparent; color: var(--text); font-weight: 700; font-size: 13px; }
.yt-dock.off .yt-eq i { animation: lp-wv2 .9s ease-in-out infinite; height: 16px; transform-origin: bottom; }

/* Celular: música como bloco do palco */
.yt-dock.intile { position: relative; width: 100%; height: 100%; padding: 8px; gap: 10px; grid-template-columns: 200px minmax(0, 1fr); align-content: center; border: 0; border-radius: inherit; box-shadow: none; background: linear-gradient(160deg, #2e1d17, #1b1411); }
.yt-dock.intile .yt-dock-queue { grid-column: 1 / -1; }
.yt-dock-tile { aspect-ratio: auto !important; min-height: 216px; background: #1b1411; cursor: pointer; }
.stage.spot .yt-dock-tile:not(.is-focus) { min-height: 0; }
.stage.spot .yt-dock-tile:not(.is-focus) .yt-dock-side { display: none; }
.stage.spot .yt-dock-tile:not(.is-focus) .yt-dock { grid-template-columns: 1fr; padding: 0; }
.stage.spot .yt-dock-tile:not(.is-focus) .yt-dock-video { width: 100%; height: 100%; border-radius: 0; }
.yt-dock-tile.is-focus .yt-dock.intile { grid-template-columns: minmax(200px, 1fr) minmax(0, 1fr); }
.yt-dock-tile.is-focus .yt-dock-video { width: 100%; height: auto; min-height: 200px; aspect-ratio: 1; max-height: 100%; }
@media (max-width: 400px) { .yt-dock.intile .yt-dock-volw { display: none; } }
@media (orientation: portrait) {
  .yt-dock-tile.is-focus .yt-dock.intile { grid-template-columns: 1fr; align-content: center; gap: 12px; padding: 12px; }
  .yt-dock-tile.is-focus .yt-dock-video { width: 100%; height: auto; aspect-ratio: 16 / 9; min-height: 200px; max-height: none; }
  .yt-dock-tile.is-focus .yt-dock-txt b { font-size: 16px; }
  .yt-dock-tile.is-focus .yt-b { min-width: 40px; height: 40px; font-size: 18px; }
  .yt-dock-tile.is-focus .yt-b.play { width: 52px; height: 52px; }
  .yt-dock-tile.is-focus .yt-dock-ctl { justify-content: center; gap: 8px; }
}
/* música na fileira de baixo: um quadradinho com o player (toque pra trazer pra cima) */
.stage.spot .yt-dock-tile:not(.is-focus) { aspect-ratio: 1 !important; height: 100%; width: auto; min-height: 0; }
.stage.spot .yt-dock-tile:not(.is-focus) .yt-dock.intile { padding: 0; gap: 0; }
.stage.spot .yt-dock-tile:not(.is-focus)::after { content: "🎵"; position: absolute; right: 6px; bottom: 6px; z-index: 4; font-size: 16px; filter: drop-shadow(0 2px 3px #000); pointer-events: none; }
.stage.spot .yt-dock-tile:not(.is-focus) .yt-dock.intile { grid-template-rows: 100%; align-content: stretch; }
.stage.spot .yt-dock-tile:not(.is-focus) .yt-dock-queue { display: none; }

.more-reacts { display: flex; justify-content: space-between; gap: 4px; padding: 4px 2px 8px; }
.more-reacts button { flex: 1; font-size: 24px; padding: 8px 0; border-radius: 12px; background: var(--bg-1); }

/* menos texto */
.msg.sys.hist-note { font-size: 11.5px; opacity: .7; font-style: normal; padding: 4px 0 8px; }
.lobby-head p:empty { display: none; }
@media (max-width: 860px) {
  #app .chat .chat-label { display: inline; }
  #app #btnChatMin { display: grid !important; }
  #app .chat-head { min-height: 34px; padding: 2px 6px 2px 14px; }
}

/* =================== Tutorial =================== */
.tour { position: fixed; inset: 0; z-index: 260; }
.tour-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px #0b0807c4, 0 0 0 3px var(--mostarda); transition: all .3s cubic-bezier(.2,1,.3,1); pointer-events: auto; cursor: pointer; }
.tour-card { position: fixed; display: grid; gap: 6px; padding: 16px 16px 12px; border-radius: 18px; background: var(--text); color: #2a1a12; box-shadow: 0 20px 50px #000a; animation: lp-modal-in .35s cubic-bezier(.2,1.3,.4,1); transition: top .3s, left .3s; }
.tour-card b { font-size: 17px; }
.tour-card p { margin: 0; font-size: 14px; line-height: 1.45; color: #5a4335; }
.tour-n { font-size: 11px; font-weight: 800; color: var(--terracota-2); text-transform: uppercase; letter-spacing: .04em; }
.tour-n:empty { display: none; }
.tour-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tour-off { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6b5243; font-weight: 600; margin-right: auto; cursor: pointer; }
.tour-off input { width: 16px; height: 16px; accent-color: var(--terracota); }
.tour-foot .link { color: #6b5243; font-size: 13px; }
.tour-foot .primary { padding: 8px 16px; }
.tour-again { justify-self: start; margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card { transition: none; animation: none; } }

/* ----- página: YouTube junto ----- */
.lp-sync { gap: 16px; }
.lp-sync-screens { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: end; }
.lp-sync-dev { display: grid; gap: 8px; }
.lp-sync-dev small { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.lp-sync-dev small .av { width: 22px; height: 22px; font-size: 11px; border-radius: 7px; }
.lp-sync-v { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 6px solid #2e231c; box-shadow: 0 20px 40px #0007;
  background: linear-gradient(120deg, #3a1d3c, #b0473b 55%, #ffb36b); background-size: 220% 220%; animation: lp-pan 6s ease-in-out infinite alternate; }
.lp-sync-dev.phone .lp-sync-v { aspect-ratio: 9 / 12; border-radius: 20px; border-width: 7px; }
.lp-sync-play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #ff3d3dd9; color: #fff; font-size: 18px; box-shadow: 0 6px 18px #0007; }
.lp-sync-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 5px; border-radius: 3px; background: #ffffff40; overflow: hidden; }
.lp-sync-bar i { display: block; height: 100%; width: 10%; background: #ff3d3d; animation: lp-sync 8s linear infinite; }
@keyframes lp-sync { to { width: 100%; } }
.lp-sync-badge { justify-self: center; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--text); color: #2a1a12; font-weight: 800; font-size: 13.5px; box-shadow: 0 14px 30px #0007; animation: lp-bob 4s ease-in-out infinite; }
.lp-dot-live { width: 9px; height: 9px; border-radius: 50%; background: #3fae6a; box-shadow: 0 0 0 4px #3fae6a33; animation: lp-blink 1.4s infinite; }
.lp-crown { position: absolute; left: 10px; top: -6px; padding: 6px 12px; border-radius: 999px; background: var(--mostarda); color: #2a1a12; font-weight: 800; font-size: 12.5px; box-shadow: 0 10px 22px #0006; }

/* ----- página: Música junto ----- */
.lp-mp { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 14px; border-radius: 22px; background: linear-gradient(160deg, #2e1d17, #1b1411); border: 1.5px solid #ffffff1a; box-shadow: 0 24px 50px #0008; }
.lp-mp-cover { aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center; font-size: 46px; background: conic-gradient(from 0deg, #e2673a, #e8b33c, #8fa35f, #4f8a7c, #b05a7a, #e2673a); animation: lp-spin 10s linear infinite; box-shadow: inset 0 0 0 26px #1b1411cc; }
.lp-mp-cover span { animation: lp-spin 10s linear infinite reverse; }
@keyframes lp-spin { to { transform: rotate(360deg); } }
.lp-mp-info { display: grid; gap: 6px; min-width: 0; }
.lp-mp-info b { font-size: 16px; }
.lp-mp-info small { color: var(--mostarda); font-weight: 700; font-size: 12px; }
.lp-mp-prog { height: 6px; border-radius: 3px; background: #ffffff1c; overflow: hidden; }
.lp-mp-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--terracota), var(--mostarda)); animation: lp-sync 9s linear infinite; }
.lp-mp-ctl { display: flex; align-items: center; gap: 14px; font-size: 18px; color: var(--text); }
.lp-mp-ctl .pp { width: 38px; height: 38px; border-radius: 50%; background: var(--text); color: #2a1a12; display: grid; place-items: center; font-size: 14px; }
.lp-mp-ctl .eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; margin-left: auto; }
.lp-mp-ctl .eq i { width: 4px; height: 18px; border-radius: 2px; background: var(--mostarda); transform-origin: bottom; animation: lp-wv2 .9s ease-in-out infinite; }
.lp-mp-ctl .eq i:nth-child(2) { animation-delay: .25s; } .lp-mp-ctl .eq i:nth-child(3) { animation-delay: .5s; }
.lp-mp-queue { display: grid; gap: 8px; padding: 14px; border-radius: 18px; background: var(--bg-2); border: 1.5px solid var(--bg-4); }
.lp-mp-queue > b { font-size: 13px; color: var(--muted); }
.lp-mq { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-1); font-size: 14px; opacity: 0; animation: lp-msg-in 9s ease infinite; }
.lp-mq .av { width: 24px; height: 24px; font-size: 11px; border-radius: 8px; }
.lp-mq.r1 { animation-delay: .3s; } .lp-mq.r2 { animation-delay: 1.4s; } .lp-mq.r3 { animation-delay: 2.5s; color: var(--muted); }

/* ----- página: Leve até em PC fraquinho ----- */
.lp-light { width: min(var(--lp-w), calc(100% - 40px)); margin: 30px auto 90px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; padding: 56px; border-radius: 34px;
  background: radial-gradient(circle at 15% 50%, #8fa35f33, transparent 55%), linear-gradient(135deg, #1f2316, var(--bg-1)); border: 1px solid #8fa35f44; }
.lp-light-art { position: relative; display: grid; justify-items: center; gap: 14px; }
.lp-gauge { position: relative; width: min(300px, 100%); }
.lp-gauge svg { width: 100%; height: auto; overflow: visible; }
.lp-gauge path { fill: none; stroke-width: 18; stroke-linecap: round; }
.lp-gauge .g-bg { stroke: #ffffff14; }
.lp-gauge .g-fg { stroke: #8fa35f; stroke-dasharray: 252; stroke-dashoffset: 252; animation: lp-gauge 4s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px #8fa35f88); }
@keyframes lp-gauge { from { stroke-dashoffset: 230; } to { stroke-dashoffset: 196; } }
.lp-gauge-n { position: absolute; left: 0; right: 0; bottom: 4px; display: grid; justify-items: center; }
.lp-gauge-n b { font: 900 34px/1 var(--display); color: #b9d17a; }
.lp-gauge-n small { color: var(--muted); font-weight: 700; }
.lp-pc-old { display: grid; justify-items: center; font-size: 54px; filter: drop-shadow(0 12px 20px #0008); animation: lp-bob 4s ease-in-out infinite; }
.lp-pc-old small { font-size: 13px; color: var(--muted); font-weight: 700; }
.lp-light-text { display: grid; gap: 14px; }
.lp-light-text .lp-kicker { color: #b9d17a; }
.lp-light-text p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); }
.lp-light-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lp-light-list li { position: relative; padding-left: 30px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.lp-light-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #8fa35f; color: #1b1411; font-weight: 900; font-size: 13px; }
.lp-light-list b { color: var(--text); }
@media (max-width: 980px) { .lp-light { grid-template-columns: 1fr; padding: 36px 26px; gap: 30px; } }
@media (max-width: 640px) {
  .lp-light { padding: 28px 18px; margin-bottom: 60px; }
  .lp-mp { grid-template-columns: 90px 1fr; }
  .lp-sync-screens { grid-template-columns: 1.4fr 1fr; }
}

.push-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.push-actions:empty { display: none; }

/* =================== Chat: responder, reagir, buscar =================== */
.msg-quote { display: block; max-width: 100%; margin: 2px 0 4px; padding: 4px 10px; border-left: 3px solid var(--terracota); border-radius: 6px; background: #ffffff0a; color: var(--muted); font-size: 12.5px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-quote b { color: var(--mostarda); font-weight: 700; }
.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.msg-reacts .mr { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--bg-4); font-size: 14px; }
.msg-reacts .mr small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.msg-reacts .mr.mine { border-color: var(--terracota); background: var(--terracota-soft); }
.msg.flash { animation: msg-flash 1.2s ease; }
@keyframes msg-flash { 0%, 40% { background: #e8b33c33; } 100% { background: transparent; } }
.reply-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); background: var(--bg-1); font-size: 13px; color: var(--muted); }
.reply-bar[hidden] { display: none; }
.reply-bar > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar b { color: var(--mostarda); margin-right: 6px; }
.reply-bar small { color: var(--faint); }
.chat-search { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.chat-search[hidden] { display: none; }
.chat-search input { flex: 1; min-width: 0; padding: 7px 12px; font-size: 14px; }
.chat-search small { color: var(--faint); font-size: 12px; white-space: nowrap; }
.msg.search-miss { display: none; }

/* Indicador de conexão */
.p-rtt { display: inline-flex; align-items: center; gap: 6px; }
.p-rtt small { font-size: 11px; color: var(--faint); }
.net-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.net-bars i { width: 3px; border-radius: 1px; background: var(--bg-4); }
.net-bars i:nth-child(1) { height: 4px; } .net-bars i:nth-child(2) { height: 8px; } .net-bars i:nth-child(3) { height: 12px; }
.net-bars.good i { background: #6fd394; }
.net-bars.ok i:nth-child(-n+2) { background: var(--mostarda); }
.net-bars.bad i:nth-child(1) { background: #ff8f7f; }
.tile.net-bad::after { content: "📶"; position: absolute; left: 8px; top: 8px; z-index: 4; padding: 2px 6px; border-radius: 8px; background: #e5574acc; font-size: 12px; pointer-events: none; }

.friend.game .f-info small, .member.game small { color: #8fd18f; }

/* =================== Controle na tela =================== */
.vpad { position: fixed; inset: 0; z-index: 240; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-end; padding: 16px calc(18px + env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) calc(18px + env(safe-area-inset-left, 0px)); user-select: none; -webkit-user-select: none; touch-action: none; }
.vpad > div { pointer-events: none; display: grid; gap: 12px; align-items: end; }
.vpad button, .vpad .vp-stick { pointer-events: auto; touch-action: none; }
.vp-left { justify-items: start; }
.vp-right { justify-items: end; }
.vp-mid { display: flex !important; gap: 10px; align-self: flex-end; margin-bottom: 4px; }
.vp-b { width: 58px; height: 58px; padding: 0; border-radius: 50%; display: grid; place-items: center; font: 800 18px/1 var(--font); color: #fff; background: #ffffff26; border: 2px solid #ffffff59; backdrop-filter: blur(4px); transition: transform .05s, background .05s; }
.vp-b.on { transform: scale(.9); background: #ffffff66; }
.vp-b.small { width: 40px; height: 40px; font-size: 14px; }
.vp-b.a { color: #9be38f; } .vp-b.b { color: #ff8f7f; } .vp-b.x { color: #8fbfff; } .vp-b.y { color: #ffd27a; }
.vp-abxy { position: relative; width: 170px; height: 170px; }
.vp-abxy .vp-b { position: absolute; }
.vp-abxy .y { left: 56px; top: 0; } .vp-abxy .x { left: 0; top: 56px; } .vp-abxy .b { right: 0; top: 56px; } .vp-abxy .a { left: 56px; bottom: 0; }
.vp-stick { position: relative; width: 140px; height: 140px; border-radius: 50%; background: #ffffff1c; border: 2px solid #ffffff4d; backdrop-filter: blur(4px); }
.vp-stick i { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: #ffffff66; box-shadow: 0 4px 12px #0006; transition: transform .06s; }
.vp-dpad { position: relative; width: 132px; height: 132px; }
.vp-dpad .vp-b { position: absolute; width: 44px; height: 44px; border-radius: 10px; font-size: 14px; }
.vp-dpad .up { left: 44px; top: 0; } .vp-dpad .down { left: 44px; bottom: 0; } .vp-dpad .left { left: 0; top: 44px; } .vp-dpad .right { right: 0; top: 44px; }
.vp-shoulder { display: flex; gap: 8px; }
.vp-shoulder .vp-b { width: 64px; height: 40px; border-radius: 12px; font-size: 14px; }
.vpad.full .vp-left, .vpad.full .vp-right { grid-auto-flow: row; }
.vpad.full .vp-stick { width: 118px; height: 118px; }
.vpad.full .vp-stick i { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.vpad.full .vp-abxy { width: 150px; height: 150px; }
.vpad.full .vp-abxy .vp-b { width: 50px; height: 50px; }
.vpad.full .vp-abxy .y { left: 50px; } .vpad.full .vp-abxy .x { top: 50px; } .vpad.full .vp-abxy .b { top: 50px; } .vpad.full .vp-abxy .a { left: 50px; }
@media (max-height: 420px) {
  .vpad { padding-bottom: 10px; }
  .vp-stick { width: 116px; height: 116px; } .vp-stick i { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
  .vp-abxy { width: 140px; height: 140px; } .vp-abxy .vp-b { width: 48px; height: 48px; }
  .vp-abxy .y { left: 46px; } .vp-abxy .x { top: 46px; } .vp-abxy .b { top: 46px; } .vp-abxy .a { left: 46px; }
  .vpad.full .vp-dpad { display: none; }
}
/* controle completo: gatilhos nos cantos de cima, o resto embaixo em fileira (como um controle de verdade) */
.vpad.full .vp-left, .vpad.full .vp-right { display: flex; align-items: flex-end; gap: 12px; }
.vpad.full .vp-right { flex-direction: row-reverse; }
.vpad.full .vp-shoulder { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); }
.vpad.full .vp-left .vp-shoulder { left: calc(16px + env(safe-area-inset-left, 0px)); }
.vpad.full .vp-right .vp-shoulder { right: calc(16px + env(safe-area-inset-right, 0px)); }
.vpad.full .vp-mid { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.vpad.full .vp-dpad { width: 120px; height: 120px; }
.vpad.full .vp-dpad .vp-b { width: 40px; height: 40px; }
.vpad.full .vp-dpad .up, .vpad.full .vp-dpad .down { left: 40px; } .vpad.full .vp-dpad .left, .vpad.full .vp-dpad .right { top: 40px; }
@media (max-height: 420px) {
  .vpad.full .vp-dpad { display: block; width: 102px; height: 102px; }
  .vpad.full .vp-dpad .vp-b { width: 34px; height: 34px; }
  .vpad.full .vp-dpad .up, .vpad.full .vp-dpad .down { left: 34px; } .vpad.full .vp-dpad .left, .vpad.full .vp-dpad .right { top: 34px; }
  .vpad.full .vp-stick { width: 100px; height: 100px; } .vpad.full .vp-stick i { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .vpad.full .vp-abxy { width: 128px; height: 128px; } .vpad.full .vp-abxy .vp-b { width: 42px; height: 42px; font-size: 15px; }
  .vpad.full .vp-abxy .y, .vpad.full .vp-abxy .a { left: 43px; } .vpad.full .vp-abxy .x, .vpad.full .vp-abxy .b { top: 43px; }
}

/* =================== Amigos estilo Discord =================== */
.friend { cursor: pointer; border-radius: 12px; transition: background .12s; }
.friend:hover { background: #ffffff08; }
.friend.active { background: var(--terracota-soft); }
.f-unread { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--terracota); color: #fff; font-size: 11px; font-weight: 800; }
.conv-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-1); }
.conv-head[hidden] { display: none; }
.ch-av { position: relative; flex: none; }
.ch-av .avatar { width: 46px; height: 46px; border-radius: 15px; font-size: 18px; }
.ch-av .dot { position: absolute; right: -2px; bottom: -2px; width: 13px; height: 13px; border-radius: 50%; background: var(--faint); border: 3px solid var(--bg-1); }
.ch-av.on .dot, .ch-av.here .dot, .ch-av.room .dot, .ch-av.game .dot { background: #6fd394; }
.ch-info { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ch-info b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-info small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-info small.game { color: #8fd18f; }
.ch-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 480px) { .ch-actions .chip { padding: 6px 10px; font-size: 12.5px; } }

/* =================== Página: destaque "assistam e ouçam juntos" =================== */
.lp-duo { position: relative; display: grid; gap: 34px; padding: 56px; border-radius: 36px; overflow: hidden;
  background: radial-gradient(circle at 10% 0%, #ff3d3d2e, transparent 45%), radial-gradient(circle at 95% 100%, #e8b33c33, transparent 50%), linear-gradient(160deg, #2a1418, #1b1411 60%);
  border: 1.5px solid #ff6b5b40; box-shadow: 0 40px 90px #0008; }
.lp-duo::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: linear-gradient(120deg, #ff3d3d, #e8b33c, #8fa35f, #ff3d3d); background-size: 300% 300%; animation: lp-pan 8s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .7; }
.lp-duo-head { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto; }
.lp-duo-head h2 { font-size: clamp(32px, 4.4vw, 58px); }
.lp-duo-head h2 em { font-style: italic; font-weight: 700; color: #ffd27a; }
.lp-duo-head p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--muted); }
.lp-new { background: #ff3d3d26; border-color: #ff6b5b66; }
.lp-duo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.lp-duo-card { display: grid; gap: 18px; align-content: start; padding: 26px; border-radius: 28px; background: #00000033; border: 1px solid #ffffff17; transition: transform .3s cubic-bezier(.2,1,.3,1), border-color .3s; }
.lp-duo-card:hover { transform: translateY(-6px); border-color: #ffffff33; }
.lp-duo-tag { display: inline-flex; align-items: center; gap: 10px; font: 900 22px/1 var(--display); color: var(--text); }
.yt-ico { display: inline-grid; place-items: center; width: 34px; height: 24px; border-radius: 8px; background: #ff3d3d; color: #fff; font-size: 12px; font-family: var(--font); }
.yt-ico.mus { width: 30px; height: 30px; border-radius: 50%; font-size: 16px; }
.lp-duo-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lp-duo-list li { position: relative; padding-left: 26px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.lp-duo-list li::before { content: "✓"; position: absolute; left: 0; color: #ffd27a; font-weight: 900; }
/* TV do YouTube */
.lp-tv { display: grid; gap: 12px; }
.lp-tv-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 6px solid #2e231c; box-shadow: 0 24px 50px #0008; }
.lp-tv-scene { position: absolute; inset: 0; background: linear-gradient(#ffb36b, #e2673a 45%, #6b2a46 75%, #2a1426); }
.lp-tv-sun { position: absolute; left: 50%; top: 22%; width: 22%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #ffe08a; box-shadow: 0 0 50px #ffd27a; animation: lp-bob 5s ease-in-out infinite; }
.lp-tv-hill { position: absolute; left: -10%; right: -10%; height: 40%; border-radius: 50% 50% 0 0; }
.lp-tv-hill.h1 { bottom: -12%; background: #4a1f3a; animation: lp-hill 7s ease-in-out infinite alternate; }
.lp-tv-hill.h2 { bottom: -24%; background: #2a1426; left: 20%; animation: lp-hill 9s ease-in-out infinite alternate-reverse; }
@keyframes lp-hill { to { transform: translateX(-6%); } }
.lp-tv-screen .lp-crown { top: 10px; left: 10px; }
.lp-tv-bar { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 999px; background: #000a; color: #fff; font-size: 12px; backdrop-filter: blur(6px); }
.lp-tv-bar i { flex: 1; height: 4px; border-radius: 2px; background: #ffffff40; overflow: hidden; }
.lp-tv-bar b { display: block; height: 100%; width: 30%; background: #ff3d3d; animation: lp-sync 12s linear infinite; }
.lp-tv-viewers { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-tv-dev { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--bg-4); font-size: 12.5px; font-weight: 700; color: var(--muted); }
.lp-tv-dev .av { width: 24px; height: 24px; font-size: 11px; border-radius: 8px; }
.lp-tv-sync { padding: 6px 12px; border-radius: 999px; background: #3fae6a22; border: 1px solid #3fae6a66; color: #8fe0a8; font-weight: 800; font-size: 12.5px; animation: lp-blink 2.4s ease-in-out infinite; }
/* vinil da música */
.lp-vinyl-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.lp-vinyl { position: relative; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, #1b1411 0 3px, #2a201a 3px 5px); box-shadow: 0 20px 40px #0009, inset 0 0 0 2px #ffffff10; animation: lp-spin 6s linear infinite; display: grid; place-items: center; }
.lp-vinyl-label { width: 44%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: conic-gradient(#e2673a, #e8b33c, #8fa35f, #e2673a); }
.lp-np { display: grid; gap: 7px; min-width: 0; }
.lp-np small { color: var(--mostarda); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.lp-np b { font: 900 22px/1.1 var(--display); }
.lp-np-prog { height: 6px; border-radius: 3px; background: #ffffff1c; overflow: hidden; }
.lp-np-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--terracota), var(--mostarda)); animation: lp-sync 10s linear infinite; }
.lp-np-ctl { display: flex; align-items: center; gap: 14px; font-size: 18px; }
.lp-np-ctl .pp { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: #2a1a12; font-size: 14px; }
.lp-np-ctl .eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; margin-left: auto; }
.lp-np-ctl .eq i { width: 4px; height: 20px; border-radius: 2px; background: var(--mostarda); transform-origin: bottom; animation: lp-wv2 .9s ease-in-out infinite; }
.lp-np-ctl .eq i:nth-child(2) { animation-delay: .2s; } .lp-np-ctl .eq i:nth-child(3) { animation-delay: .4s; } .lp-np-ctl .eq i:nth-child(4) { animation-delay: .6s; }
.lp-np-queue { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-np-queue > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--bg-4); font-size: 13px; opacity: 0; animation: lp-msg-in 9s ease infinite; }
.lp-np-queue .av { width: 22px; height: 22px; font-size: 10px; border-radius: 7px; }
.lp-np-queue .q1 { animation-delay: .3s; } .lp-np-queue .q2 { animation-delay: 1.3s; } .lp-np-queue .q3 { animation-delay: 2.3s; padding-left: 12px; color: var(--muted); }
/* tela: chips de qualidade */
.lp-tela-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lp-tela-chips span { padding: 6px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--bg-4); font-size: 13px; font-weight: 700; color: var(--muted); }
.lp-tela-chips span.hot { background: var(--terracota); border-color: var(--terracota); color: #fff; }
.lp-tela-chips i { width: 1px; height: 18px; background: var(--bg-4); margin: 0 4px; }
/* o básico, compactado */
.lp-basics { display: grid; gap: 24px; padding: 44px 48px; border-radius: 30px; background: var(--bg-1); border: 1px solid var(--line); }
.lp-basics h2 { font-size: clamp(26px, 3vw, 38px); }
.lp-basics h2 em { font-style: italic; font-weight: 700; color: var(--mostarda); }
.lp-basics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lp-basics-grid > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--bg-4); }
.lp-basics-grid span { grid-row: span 2; font-size: 26px; }
.lp-basics-grid b { font-size: 15px; }
.lp-basics-grid small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.lp-fystec { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.lp-fystec:hover { color: var(--terracota); }
@media (max-width: 980px) {
  .lp-duo { padding: 34px 22px; }
  .lp-duo-grid { grid-template-columns: 1fr; }
  .lp-basics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lp-duo { padding: 28px 16px; border-radius: 28px; }
  .lp-duo-card { padding: 18px; }
  .lp-vinyl-wrap { grid-template-columns: 104px 1fr; gap: 14px; }
  .lp-np b { font-size: 18px; }
  .lp-basics { padding: 28px 18px; }
  .lp-basics-grid { grid-template-columns: 1fr; }
}

/* =================== Layout estilo Discord: trilho · canais · centro · direita =================== */
#app {
  height: 100dvh; display: grid; background: var(--bg-1); overflow: hidden;
  grid-template-columns: 72px var(--side-w, 240px) minmax(0, 1fr) var(--right-w, 280px);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "rail nav main right";
}
html.is-desktop #app { height: calc(100dvh - 36px); margin-top: 36px; }
#app[data-right="none"] { grid-template-columns: 72px var(--side-w, 240px) minmax(0, 1fr) 0; }
#app[data-right="none"] .right { display: none; }
#app[data-right="chat"] { --right-w: clamp(280px, 26vw, 360px); }
#app.chat-max[data-right="chat"] { --right-w: min(46vw, 640px); }
.m-only { display: none !important; }

/* trilho de grupos */
.rail { grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0; background: var(--bg-0); overflow-y: auto; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail-groups { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rail-sep { display: block; width: 32px; height: 2px; border-radius: 1px; background: var(--bg-3); flex: none; }
.rail-btn { position: relative; width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--text); font-size: 22px; flex: none; transition: border-radius .18s, background .18s, transform .12s; }
.rail-btn:hover { border-radius: 16px; background: var(--bg-3); }
.rail-btn.on { border-radius: 16px; }
.rail-btn::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 0; margin-top: 0; border-radius: 0 4px 4px 0; background: var(--text); transition: height .18s, margin-top .18s; }
.rail-btn:hover::before { height: 20px; margin-top: -10px; }
.rail-btn.unread::before { height: 8px; margin-top: -4px; }
.rail-btn.on::before { height: 36px; margin-top: -18px; }
.rail-home img { width: 30px; height: 30px; }
.rail-home.on { background: var(--terracota); }
.rail-g { background: transparent; overflow: visible; }
.rail-g .g-badge.rb { width: 48px; height: 48px; border-radius: 50%; font-size: 24px; transition: border-radius .18s; overflow: hidden; }
.rail-g:hover .g-badge.rb, .rail-g.on .g-badge.rb { border-radius: 16px; }
.rail-g.voice .g-badge.rb { box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--oliva); }
.rail-add, .rail-pc { color: var(--oliva); font-size: 26px; font-weight: 400; }
.rail-add:hover { background: var(--oliva); color: #fff; }
.rail-pc { font-size: 20px; }
.rail-pc.on { background: var(--oliva); }
.rail-badge { position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; border: 3px solid var(--bg-0); }
.rail-live { position: absolute; right: -6px; top: -4px; font-size: 11px; background: var(--bg-0); border-radius: 8px; padding: 1px 3px; }
.rail-tip { position: fixed; z-index: 300; transform: translateY(-50%); padding: 7px 12px; border-radius: 10px; background: #0b0807; color: var(--text); font-weight: 700; font-size: 14px; box-shadow: 0 8px 24px #000a; pointer-events: none; white-space: nowrap; animation: fade-in .12s ease; }
.rail-tip::before { content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 0; border-right-color: #0b0807; }

/* coluna de canais */
.nav { grid-area: nav; position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--bg-2); }
.nav-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 8px 8px 14px; border-bottom: 1.5px solid var(--bg-3); box-shadow: 0 2px 6px #0003; }
.nav-head .g-badge.xs { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; flex: none; }
.nav-title { flex: 1; min-width: 0; font-family: var(--display); font-weight: 900; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-head .more-btn { opacity: 1 !important; }
.nav-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 8px 12px; }
.nav-sec { display: flex; align-items: center; justify-content: space-between; padding: 14px 6px 4px 8px; color: var(--faint); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.nav-sec:first-child { padding-top: 4px; }
.nav-add { width: 24px; height: 24px; padding: 0; font-size: 18px; line-height: 1; display: grid; place-items: center; }
.chan { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: transparent; color: var(--faint); font-weight: 600; text-align: left; font-size: 15px; }
.chan:hover { background: var(--bg-3); color: var(--muted); }
.chan.on { background: var(--bg-4); color: var(--text); }
.chan.unread { color: var(--text); }
.chan.unread .chan-name { font-weight: 800; }
.chan-ico { width: 20px; flex: none; text-align: center; font-size: 17px; opacity: .8; }
.chan.voice .chan-ico { font-size: 14px; }
.chan-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-lock { font-size: 11px; opacity: .7; }
.chan-n { font-size: 11px; color: var(--oliva); font-weight: 800; }
.chan.here { color: var(--oliva); }
.chan.here.on { color: var(--text); }
.chan-wrap + .chan-wrap { margin-top: 2px; }
.chan-people { list-style: none; margin: 2px 0 6px; padding: 0 0 0 30px; display: grid; gap: 2px; }
.chan-people li { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.chan-people li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar.xxs { width: 22px; height: 22px; border-radius: 7px; font-size: 10px; }
.chan-wrap .people { padding: 2px 0 6px 18px; overflow: visible; flex: none; }
.chan-wrap .people .p-main { padding: 4px 6px; gap: 8px; }
.chan-wrap .people .avatar { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.chan-wrap .people .p-name { font-size: 13.5px; }
.chan-wrap .people .p-rtt { display: none; }
.chan-wrap .people .p-vol { padding: 2px 6px 8px 40px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 700; text-align: left; }
.nav-item:hover { background: var(--bg-3); color: var(--text); }
.nav-item.on { background: var(--bg-4); color: var(--text); }
.ni-ico { font-size: 18px; }
.nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-dm { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.nav-dm:hover { background: var(--bg-3); }
.nav-dm.on { background: var(--bg-4); }
.nav-dm .sm-av { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; position: relative; }
.nav-dm .dot, .lb-friend .dot, .mt-av .dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--bg-2); background: #6b5a4d; }
.nav-dm.on .dot, .nav-dm.here .dot, .nav-dm.room .dot, .nav-dm.game .dot, .lb-friend.on .dot, .lb-friend.room .dot, .lb-friend.here .dot, .lb-friend.game .dot, .mt-av.on .dot, .mt-av.room .dot, .mt-av.here .dot, .mt-av.game .dot { background: #6fd394; }
.nd-name { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.nd-name b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nd-name small { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-empty { margin: 14px 8px; color: var(--faint); font-size: 13px; }

/* voz conectada + sua conta */
.voice-bar { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 10px; border-top: 1.5px solid var(--bg-3); background: #8fa35f14; }
.vb-info { flex: 1; min-width: 0; display: grid; gap: 0; padding: 2px 4px; background: transparent; border-radius: 8px; text-align: left; line-height: 1.25; }
.vb-info:hover { background: transparent; }
.vb-info b { color: #8fd18f; font-size: 13px; }
.vb-info span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-info .status { font-size: 11px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.vb-info .status::before { display: none; }
.vb-btn svg { width: 18px; height: 18px; }
.vb-btn.danger { color: var(--red); }
.vb-btn.danger:hover { background: var(--red-soft); }
.me-panel { display: flex; align-items: center; gap: 8px; padding: 8px; background: #140f0ccc; }
.me-panel .me-av { padding: 0; background: transparent; border-radius: 12px; flex: none; }
.me-panel .me-av .avatar { width: 34px; height: 34px; border-radius: 11px; }
.me-info { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.me-info b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-info small { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-ctl { display: flex; align-items: center; gap: 2px; flex: none; }
.me-pair { display: flex; align-items: center; border-radius: 9px; }
.me-pair:hover { background: var(--bg-3); }
.mc { width: 32px; height: 32px; padding: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; color: var(--muted); }
.mc:hover { background: var(--bg-3); color: var(--text); }
.mc svg { width: 19px; height: 19px; }
.mc.off { color: var(--red); }
.mc.locked { opacity: .6; }
.mc-gear { width: 16px; height: 32px; padding: 0; border-radius: 0 8px 8px 0; display: grid; place-items: center; background: transparent; color: var(--faint); }
.mc-gear:hover { background: var(--bg-4); color: var(--text); }
.mc-gear svg { width: 12px; height: 12px; }
.me-pair .mc { border-radius: 8px 0 0 8px; }
.pop { position: fixed; z-index: 140; width: 300px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 14px; border-radius: 18px; background: var(--bg-2); border: 1.5px solid var(--bg-4); box-shadow: 0 24px 60px #000c; animation: card-pop .25s cubic-bezier(.2,1.4,.4,1); }
.opts { display: grid; gap: 12px; }
.opts h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 17px; padding-right: 40px; }
.opts label { display: grid; gap: 6px; }
.opts .check { display: flex; }
.opts .mic-meter { display: block; height: 6px; border-radius: 3px; background: var(--bg-1); overflow: hidden; }
.opts .mic-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--oliva), var(--mostarda)); transform-origin: left; transform: scaleX(0); }

/* centro */
.main-col { grid-area: main; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.main-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 16px; border-bottom: 1.5px solid var(--bg-3); box-shadow: 0 2px 6px #0003; position: relative; z-index: 3; background: var(--bg-1); }
.main-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.main-title b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-title small { color: var(--faint); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 8px; border-left: 1.5px solid var(--bg-4); }
.main-title small.on, .main-title small.room, .main-title small.here, .main-title small.game { color: #8fd18f; }
.mt-ico { font-size: 20px; color: var(--faint); font-weight: 700; }
.mt-av { position: relative; flex: none; }
.mt-av .avatar { width: 30px; height: 30px; border-radius: 10px; font-size: 13px; }
.mt-av .dot { border-color: var(--bg-1); }
.main-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.main-actions .chip { white-space: nowrap; }
#btnRight { position: relative; }
#btnRight.on { color: var(--text); background: var(--bg-3); }
#btnRight svg, #btnNavOpen svg { width: 22px; height: 22px; }
.dot-badge { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid var(--bg-1); }
.main-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.main-body > .stage { flex: 1; min-height: 0; }
.main-body > .lobby, .main-body > .pc-panel { position: absolute; inset: 0; z-index: 2; overflow-y: auto; background: var(--bg-1); }
.pc-panel { padding: 20px clamp(14px, 3vw, 40px) 32px; }
#app:not(.view-voice) .main-body > .stage, #app:not(.view-voice) .controls { display: none !important; }
#app.view-text .main-body > .chat, #app.view-dm .main-body > .chat { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg-1); border: 0; }
.main-body > .chat .chat-head { display: none; }
.main-body > .chat .msgs { flex: 1; }
.main-col > .controls { flex: none; align-self: center; max-width: calc(100% - 24px); }

/* direita: amigos ou chat da sala */
.right { grid-area: right; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-2); border-left: 1.5px solid var(--bg-3); }
#app[data-right="friends"] .right > .chat, #app[data-right="chat"] .friends-panel { display: none; }
.right > .chat { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg-2); }
.right > .chat .chat-head { display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 6px 8px 6px 14px; border-bottom: 1.5px solid var(--bg-3); }
.chat-title { flex: 1; min-width: 0; font-weight: 800; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#app.chat-max #btnChatMax { color: var(--mostarda); }
.conv-head { display: none !important; }
.friends-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.fp-head { display: flex; align-items: center; gap: 6px; min-height: 52px; padding: 6px 8px 6px 16px; border-bottom: 1.5px solid var(--bg-3); }
.fp-head b { font-family: var(--display); font-weight: 900; font-size: 17px; }
.fp-head small { flex: 1; color: var(--faint); font-size: 12px; }
.fp-head .icon svg { width: 18px; height: 18px; }
.friends-panel .add-friend { padding: 10px 10px 6px; }
.friends-panel .friend-reqs { padding: 0 10px; }
.fp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px; }
.f-sec { list-style: none; padding: 12px 8px 4px; color: var(--faint); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; cursor: default; }
.friends .friend { padding: 7px 8px; gap: 12px; }
.friend .f-av { width: 40px; height: 40px; border-radius: 13px; font-size: 16px; position: relative; flex: none; box-shadow: 0 4px 12px #0005; }
.friend .f-av img { border-radius: inherit; }
.friend .f-av .dot { width: 13px; height: 13px; right: -3px; bottom: -3px; border-width: 3px; }
.friend.off { opacity: .55; }
.friend.off:hover { opacity: 1; }
.f-info b { font-size: 14.5px; }

/* início (lobby) */
.lobby { gap: 26px; }
.lb-sec { display: grid; gap: 12px; animation: slide-up .45s ease both; }
.lb-sec h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.lb-sec h2 small { font-family: var(--font); font-size: 13px; color: var(--faint); font-weight: 700; background: var(--bg-3); border-radius: 999px; padding: 1px 9px; }
.lb-empty { margin: 0; color: var(--faint); }
.lb-friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.lb-friend { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 10px 12px; border-radius: 20px; background: var(--bg-2); border: 1.5px solid var(--bg-3); font-weight: 400; transition: transform .15s, border-color .15s; }
.lb-friend:hover { transform: translateY(-3px); border-color: var(--terracota); background: var(--bg-2); }
.lb-friend .lb-av { position: relative; width: 64px; height: 64px; border-radius: 22px; font-size: 26px; box-shadow: 0 10px 22px #0007; margin-bottom: 4px; }
.lb-friend .lb-av .dot { width: 16px; height: 16px; border-width: 3.5px; }
.lb-friend b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-friend small { font-size: 11.5px; color: var(--faint); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-friend.on small, .lb-friend.room small, .lb-friend.game small { color: #8fd18f; }
.lb-friends.off .lb-friend { opacity: .6; }
.lb-friends.off .lb-friend:hover { opacity: 1; }
.lb-unread { position: absolute; top: 8px; right: 8px; }
.lb-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lb-group { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--g, var(--terracota)) 22%, var(--bg-2)), var(--bg-2) 70%); border: 1.5px solid var(--bg-3); text-align: left; font-weight: 400; transition: transform .15s, border-color .15s; animation: slide-up .45s ease both; }
.lb-group:hover { transform: translateY(-3px); border-color: var(--g, var(--terracota)); }
.lb-group.live { border-color: #8fa35f88; }
.lb-group .g-badge.lg { width: 52px; height: 52px; border-radius: 17px; font-size: 26px; flex: none; }
.lbg-info { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.lbg-info b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbg-info small { color: var(--faint); font-size: 12.5px; }
.lb-group.live .lbg-info small { color: #8fd18f; font-weight: 700; }
.lbg-live { display: flex; }
.lbg-live .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--bg-2); }
.lb-new { background: transparent; border-style: dashed; color: var(--muted); }
.g-badge.ghost { background: var(--bg-3); color: var(--oliva); display: grid; place-items: center; }

/* canais: quem acessa */
.acc-list { display: grid; gap: 4px; max-height: 300px; overflow-y: auto; }
.acc-row { display: flex !important; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--bg-1); font-weight: 600; }
.acc-row small { margin-left: auto; color: var(--faint); }
.acc-row.dim { opacity: .6; }

.scrim { display: none; }

/* ----- Celular: centro em tela cheia, gavetas dos dois lados ----- */
@media (max-width: 860px) {
  #app, #app[data-right] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
  .m-only { display: grid !important; }
  .rail, .nav { position: fixed; top: 0; bottom: 0; z-index: 60; transition: transform .26s cubic-bezier(.2,1,.3,1); }
  .rail { left: 0; width: 72px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-340px); }
  .nav { left: 72px; width: min(calc(100vw - 72px - 44px), 300px); transform: translateX(-400px); padding-top: env(safe-area-inset-top, 0px); }
  .side-resizer { display: none; }
  #app.drawer-left .rail, #app.drawer-left .nav { transform: none; box-shadow: 12px 0 40px #000a; }
  #app .right, #app[data-right="none"] .right { display: flex; position: fixed; top: 0; bottom: 0; right: 0; z-index: 60; width: min(calc(100vw - 44px), 380px); transform: translateX(105%); transition: transform .26s cubic-bezier(.2,1,.3,1); padding-top: env(safe-area-inset-top, 0px); padding-bottom: var(--safe-b); border-left: 0; border-radius: 18px 0 0 18px; overflow: hidden; }
  #app.drawer-right .right { transform: none; box-shadow: -12px 0 40px #000a; }
  #app[data-mright="friends"] .right > .chat { display: none !important; }
  #app[data-mright="chat"] .right > .friends-panel { display: none !important; }
  #app[data-mright="chat"] .right > .chat { display: flex !important; }
  #app[data-mright="friends"] .right > .friends-panel { display: flex !important; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: #0a0705a6; animation: fade-in .2s ease; }
  .scrim[hidden] { display: none; }
  .main-head { padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-left: 8px; padding-right: 8px; gap: 6px; }
  .main-actions .chip { padding: 6px 10px; font-size: 12.5px; }
  .main-title small { display: none; }
  #app.view-text .main-title small, #app.view-dm .main-title small { display: inline; }
  .lobby { padding: 18px 14px 28px; }
  .lb-friends { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .lb-friend { padding: 12px 6px 10px; border-radius: 16px; }
  .lb-friend .lb-av { width: 52px; height: 52px; border-radius: 18px; font-size: 22px; }
  .lb-groups { grid-template-columns: 1fr; }
  .me-panel { padding-bottom: calc(8px + var(--safe-b)); }
  .controls { margin: 6px auto calc(8px + var(--safe-b)); }
  .right > .chat .chat-head #btnChatMax { display: none; }
  .main-body > .chat .chat-form { padding-bottom: calc(10px + var(--safe-b)); }
}
@media (min-width: 861px) and (max-width: 1100px) {
  #app { --side-w: 210px !important; --right-w: 240px; }
  #app[data-right="chat"] { --right-w: 280px; }
}

/* Página inicial: botão do Android (no celular Android ele vem primeiro; no iPhone some) */
.lp-btn svg path { fill: currentColor; }
.lp-and svg { color: #3ddc84; }
.lp-btn-light.lp-and svg { color: #1f9d55; }
html.is-android-ua .lp-cta .lp-and { order: -1; }
html.is-ios-ua [data-dl="android"], html.is-ios-ua .lp-pcard.and { display: none !important; }
@media (max-width: 1100px) and (min-width: 721px) { .lp-plat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Criar grupo: prévia no formato novo (ícone + nome) */
.gnew-prev { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--g, var(--terracota)) 22%, var(--bg-1)), var(--bg-1) 70%); border: 1.5px solid var(--bg-3); }
.gnew-prev .g-badge.xl { width: 64px; height: 64px; border-radius: 20px; font-size: 34px; }
.gnew-prev .g-badge.bump { animation: card-pop .35s cubic-bezier(.2,1.4,.4,1); }

/* Desenhos próprios (Meu PC, sofá) e TVzinha do início */
.art-wrap { display: inline-grid; place-items: center; flex: none; line-height: 0; }
.art-wrap svg { width: 100%; height: 100%; display: block; }
.rail-art { width: 34px; height: 26px; }
.rail-pc { background: var(--bg-2); }
.rail-pc.on, .rail-pc:hover { background: #8fa35f33; }
.rail-pc:hover .art-waves, .pc-chip:hover .art-waves, .mypc-dev:hover .art-waves { animation: art-wave 1s ease infinite; }
@keyframes art-wave { 50% { opacity: .35; } }
.h2-art { width: 30px; height: 23px; }
.mt-art { width: 30px; height: 23px; }
.ni-art { width: 26px; height: 20px; }
.chip-art { width: 22px; height: 17px; margin-right: 2px; }
.pc-chip { display: inline-flex; align-items: center; gap: 6px; }
.home-ico { width: 22px; height: 22px; border-radius: 7px; flex: none; }
.ni-ico.home-ico { width: 22px; height: 22px; }
.mt-home { width: 24px; height: 24px; }
.mypc-art { width: 54px; height: 42px; }
.mypc-hero-art { width: 150px; height: 112px; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 16px 30px #0009); }
.mypc-dev-art { width: 58px; height: 44px; }
.sec-ico .art-wrap { width: 26px; height: 20px; }
.lb-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #6b5a4d; box-shadow: 0 0 0 3px #6b5a4d33; }
.lb-dot.on { background: #6fd394; box-shadow: 0 0 0 3px #6fd39433; animation: lb-pulse 2.4s ease-in-out infinite; }
@keyframes lb-pulse { 50% { box-shadow: 0 0 0 6px #6fd39411; } }

/* Vários jogadores no meu PC */
.ctl-banner { flex-wrap: wrap; }
.ctl-player { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border-radius: 999px; background: #ffffff14; font-size: 13px; }
.ctl-player b { color: var(--mostarda); }
.ctl-x { width: 22px; height: 22px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--muted); font-size: 11px; }
.ctl-x:hover { background: var(--red-soft); color: var(--red); }

/* Botão do chat da sala (canto superior direito) com as não lidas */
#btnChat { position: relative; }
#btnChat svg, #ctlChat svg { width: 22px; height: 22px; }
#btnChat.on { color: var(--text); background: var(--bg-3); }
.num-badge { position: absolute; top: -3px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 10.5px; font-weight: 800; border: 2px solid var(--bg-1); line-height: 1; animation: wiggle .8s ease; }

/* Acesso anual */

/* ---------- Plano: nome com cor e selos ---------- */
.uname { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.badges { display: inline-flex; align-items: center; gap: 3px; flex: none; vertical-align: middle; }
.bdg { display: inline-flex; align-items: center; gap: 5px; font-style: normal; }
.bdg svg { width: 14px; height: 14px; display: block; flex: none; }
.bdg.tier.t5 svg { filter: drop-shadow(0 0 4px #8fd0ffaa); }
.bdg.tier.t4 svg { filter: drop-shadow(0 0 3px #8fe0d288); }
.badges.full { flex-wrap: wrap; gap: 6px; }
.badges.full .bdg { padding: 3px 9px 3px 6px; border-radius: 999px; background: var(--bg-3); border: 1px solid var(--line-hi); font-size: 12px; font-weight: 700; color: var(--text); }
.badges.full .bdg.founder { color: var(--mostarda); border-color: #e8b33c55; }
.badges.full .bdg.tier.t1 { color: #e3a46f; } .badges.full .bdg.tier.t2 { color: #dfe5ec; } .badges.full .bdg.tier.t3 { color: var(--mostarda); }
.badges.full .bdg.tier.t4 { color: #9fe9dc; } .badges.full .bdg.tier.t5 { color: #a8dcff; border-color: #8fd0ff66; }
.plus-mark { color: var(--mostarda); font-family: var(--display); font-weight: 900; margin-left: 1px; }

/* Selinho do plano no painel de baixo: no cantinho da sua foto */
.me-panel { position: relative; }
.me-plan { position: absolute; left: 22px; bottom: 4px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--bg-2); border: 2px solid #140f0c; font-size: 10px; line-height: 1; color: var(--text); box-shadow: 0 2px 6px #0008; }
.me-plan i { display: inline-flex; } .me-plan svg { width: 13px; height: 13px; }
.me-plan.trial { background: #3c4a2a; } .me-plan.trial b { color: #d6e8a8; }
.me-plan.trial.low { background: var(--terracota); animation: plan-pulse 1.6s ease-in-out infinite; } .me-plan.trial.low b { color: #fff; }
.me-plan.basic { padding: 0; width: 20px; background: var(--terracota); color: #fff; animation: plan-pulse 2.4s ease-in-out infinite; }
.me-plan.basic svg { width: 11px; height: 11px; }
@keyframes plan-pulse { 50% { box-shadow: 0 0 0 4px #e2673a33; } }

/* ---------- Tela do plano: convide (destaque) ou Salinha+ ---------- */
.plan-dlg { width: min(470px, calc(100% - 24px)); overflow-y: auto; animation: card-pop .45s cubic-bezier(.2,1.4,.4,1); }
.plan { position: relative; display: grid; gap: 14px; padding: 22px 20px 18px; }
.pl-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--bg-3); color: var(--muted); }
.pl-head { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 0 24px; }
.pl-head h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1.1; }
.pl-head h2 em { font-style: normal; color: var(--terracota); }
.pl-kicker { color: var(--muted); font-size: 13px; }
.pl-lock { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--terracota-soft); color: var(--terracota); animation: lock-wiggle 2.4s ease-in-out .4s infinite; }
.pl-lock svg { width: 28px; height: 28px; }
@keyframes lock-wiggle { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-10deg); } 82% { transform: rotate(9deg); } 90% { transform: rotate(-4deg); } }
.pl-status { display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--bg-1); border: 1.5px solid var(--bg-4); text-align: left; }
.pl-status svg { grid-row: span 2; width: 26px; height: 26px; }
.pl-status b { font-size: 14px; } .pl-status small { color: var(--muted); font-size: 11.5px; }
.pl-status.trial, .pl-status.basic { grid-template-columns: auto; padding: 6px 14px; }
.pl-status.trial b { color: var(--oliva); } .pl-status.trial.low b { color: var(--terracota); }
.pl-status.founder b { color: var(--mostarda); }
.pl-sub { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.pl-sub.center { text-align: center; }
.pl-fine { color: var(--faint); font-size: 11.5px; text-align: center; }
.pl-invite { position: relative; display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: linear-gradient(160deg, #e2673a2e, #e8b33c14 60%, var(--bg-3)); border: 1.5px solid #e2673a77; box-shadow: 0 0 0 4px #e2673a14, 0 14px 40px #e2673a22; }
.pl-ribbon { display: flex; align-items: center; gap: 12px; }
.pl-ribbon b { font-family: var(--display); font-weight: 900; font-size: 46px; line-height: .9; color: var(--mostarda); text-shadow: 0 4px 22px #e8b33c55; animation: ribbon-pop 2.8s ease-in-out infinite; }
.pl-ribbon span { font-weight: 700; font-size: 15px; line-height: 1.25; }
@keyframes ribbon-pop { 0%, 80%, 100% { transform: none; } 88% { transform: scale(1.08) rotate(-2deg); } }
.inv-row { display: flex; gap: 8px; align-items: center; }
.inv-link { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 12px; background: var(--bg-1); border: 1px dashed var(--line-hi); font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
.inv-btns { display: flex; gap: 8px; }
.inv-btns button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.inv-btns .wa { background: #1fa855; } .inv-btns .wa:hover { background: #25c062; }
.inv-btns svg { width: 20px; height: 20px; }
.inv-pending { display: block; margin-top: 6px; color: var(--mostarda); font-size: 12px; }
.ref-prog { display: grid; gap: 6px; }
.ref-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.ref-prog-top b { font-size: 15px; } .ref-prog-top small { color: var(--muted); font-size: 12px; } .ref-prog-top small b { font-size: 12px; color: var(--text); }
.ref-bar { height: 8px; border-radius: 999px; background: var(--bg-1); overflow: hidden; }
.ref-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--terracota), var(--mostarda)); transition: width .8s cubic-bezier(.2,1,.3,1); }
.ref-steps { display: flex; justify-content: space-between; gap: 6px; }
.ref-steps span { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--faint); filter: grayscale(1); opacity: .6; }
.ref-steps span.got { color: var(--text); filter: none; opacity: 1; }
.ref-steps svg { width: 14px; height: 14px; }
.pl-or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; }
.pl-or::before, .pl-or::after { content: ""; flex: 1; height: 1px; background: var(--line-hi); }
.pl-buy { display: grid; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--bg-1); border: 1.5px solid var(--bg-4); }
.pl-buy-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pl-plus { font-family: var(--display); font-weight: 900; font-size: 22px; }
.pl-plus b { color: var(--mostarda); }
.pl-price b { font-size: 22px; font-weight: 800; } .pl-price small { color: var(--muted); }
.pl-anchor { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #8fa35f26; color: #b9cc87; font-size: 11.5px; font-weight: 700; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.perks li { display: flex; align-items: center; gap: 10px; text-align: left; animation: perk-in .45s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i) * 60ms + .1s); }
.perks li > i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--bg-3); color: var(--mostarda); }
.perks li > i svg { width: 18px; height: 18px; }
.perks li span { display: grid; line-height: 1.2; } .perks li b { font-size: 13.5px; } .perks li small { color: var(--faint); font-size: 11.5px; }
@keyframes perk-in { from { opacity: 0; transform: translateX(-10px); } }
.pl-buy .buy { background: linear-gradient(90deg, var(--terracota), #d9822f); box-shadow: 0 8px 24px #e2673a44; }
.pl-gift { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--bg-3); text-align: left; border: 1px solid var(--line-hi); }
.pl-gift:hover { background: var(--hover); }
.pl-gift > i svg { width: 34px; height: 34px; display: block; animation: gift-bob 2.2s ease-in-out infinite; }
.pl-gift span { display: grid; } .pl-gift small { color: var(--muted); font-size: 12px; }
@keyframes gift-bob { 50% { transform: translateY(-3px) rotate(-4deg); } }
.pl-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.pl-code span { flex-basis: 100%; }
.pl-code .code-in { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .08em; }

/* Presentear */
.gift-art svg { width: 64px; height: 64px; display: block; animation: gift-bob 2.2s ease-in-out infinite; }
.gift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.gift-list label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-1); cursor: pointer; }
.gift-list label.off { opacity: .5; cursor: default; }
.gift-list label small { margin-left: auto; color: var(--faint); font-size: 11.5px; }
.gift-list input { accent-color: var(--terracota); width: 18px; height: 18px; }
.gift-total { margin: 0; text-align: center; color: var(--muted); }
.gift-total b { color: var(--text); }

/* Comemoração: Salinha+ e presente aberto */
.plus-card .cc-art svg { width: 84px; height: 84px; display: block; animation: logo-bounce 1.1s cubic-bezier(.3,1.6,.5,1) .15s both; filter: drop-shadow(0 10px 30px #e8b33c66); }
.plus-card h2 { font-size: clamp(28px, 8vw, 38px) !important; }
.perks.unlock-anim { width: 100%; margin: 4px 0 6px; }
.perks.unlock-anim li { animation-delay: calc(var(--i) * 180ms + .5s); }
.perks.unlock-anim .ok { margin-left: auto; font-style: normal; color: var(--oliva); font-weight: 900; animation: ok-pop .4s cubic-bezier(.3,1.8,.5,1) both; animation-delay: calc(var(--i) * 180ms + .8s); }
@keyframes ok-pop { from { transform: scale(0); opacity: 0; } }
.gb-box { padding: 0; background: none; width: 150px; height: 150px; animation: box-shake 1.4s ease-in-out infinite; }
.gb-box svg { width: 100%; height: 100%; overflow: visible; }
.gb-box .gb-lid { transition: transform .6s cubic-bezier(.3,1.5,.5,1); transform-origin: 60px 45px; }
.gb-box.open { animation: none; }
.gb-box.open .gb-lid { transform: translate(18px, -60px) rotate(25deg); }
@keyframes box-shake { 0%, 60%, 100% { transform: none; } 66% { transform: rotate(-6deg); } 72% { transform: rotate(6deg); } 78% { transform: rotate(-4deg); } 84% { transform: rotate(3deg); } }
.gb-acts { display: grid; gap: 8px; width: 100%; }

/* Perfil no topo da conversa */
.dm-hero { flex: none; position: relative; background: var(--bg-1); border-bottom: 1px solid var(--line); }
.dm-cover { height: 96px; overflow: hidden; }
.dm-hero.has-cover .dm-cover { height: 130px; }
.dm-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-id { display: flex; align-items: flex-end; gap: 12px; padding: 0 16px 12px; flex-wrap: wrap; }
.dm-id .avatar.lg { margin-top: -36px; width: 72px; height: 72px; border-radius: 22px; border: 4px solid var(--bg-1); font-size: 28px; }
.dm-names { display: grid; gap: 6px; padding-bottom: 2px; min-width: 0; }
.dm-names > b { font-size: 18px; }
.gift-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.gift-chip svg { width: 16px; height: 16px; display: block; }
@media (max-width: 760px) { .dm-cover { height: 70px; } .dm-hero.has-cover .dm-cover { height: 96px; } .dm-id .avatar.lg { width: 58px; height: 58px; margin-top: -28px; } }

/* Configurações: plano e Salinha+ */
.plan-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.plus-set legend { font-family: var(--display); font-weight: 900; }
.plus-lock { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--terracota-soft); margin-bottom: 10px; }
.plus-lock > i { color: var(--terracota); } .plus-lock svg { width: 22px; height: 22px; display: block; }
.plus-lock span { flex: 1; display: grid; } .plus-lock small { color: var(--muted); font-size: 12px; }
.plus-body { display: grid; gap: 8px; }
.plus-body.locked { opacity: .55; pointer-events: none; }
.cover-edit { height: 90px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; color: #fff9; font-size: 12px; }
.cover-edit img { width: 100%; height: 100%; object-fit: cover; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--c); border: 2px solid transparent; }
.sw.none { background: var(--bg-4); font-size: 11px; color: var(--text); }
.sw.on { border-color: var(--text); box-shadow: 0 0 0 3px var(--bg-2) inset; }
.lp-copy { flex-basis: 100%; text-align: center; color: var(--faint); font-size: 12px; }
.celebrate-text.warn { padding: 10px 12px; border-radius: 12px; background: var(--terracota-soft); color: var(--text); font-size: 13px; }
.celebrate-card .cc-art svg { width: 56px; height: 56px; display: block; color: var(--terracota); }
.celebrate.top { z-index: 70; }

/* Escudo: arquivos e links perigosos */
.file-card.risk-danger { border-color: var(--red); background: linear-gradient(90deg, var(--red-soft), var(--bg-1)); }
.file-card.risk-caution { border-color: var(--mostarda); }
.file-card.risk-blocked { border-color: var(--red); background: var(--red-soft); max-width: 300px; }
.file-card.risk-blocked small { white-space: normal; color: #ffb1a8; }
.risk-note { display: block; max-width: 300px; margin-top: 4px; font-size: 11.5px; line-height: 1.35; color: #e8c779; }
.risk-note.bad { color: #ffb1a8; }
.scam-hint { display: block; margin-top: 4px; padding: 5px 8px; border-radius: 8px; background: var(--red-soft); color: #ffcfc8; font-size: 12px; line-height: 1.35; }
.risk-dlg .ask { gap: 6px; }
.risk-dlg .risk-name, .risk-dlg .risk-host { font-weight: 800; color: var(--text); word-break: break-all; font-size: 16px; }
.risk-dlg .risk-url { font-size: 12px; color: var(--faint); word-break: break-all; }
.risk-dlg .risk-warn { padding: 6px 10px; border-radius: 10px; background: var(--red-soft); color: #ffcfc8; font-size: 13px; }
.risk-dlg .risk-tip { font-size: 12.5px; color: var(--muted); }
.risk-dlg.bad { border-color: var(--red); }
.risk-trust { justify-content: center; font-size: 12.5px; color: var(--muted); }
.ask-choice.danger:disabled { opacity: .5; cursor: not-allowed; }

/* Denunciar / bloquear / moderação */
.rep-dlg { width: min(440px, calc(100% - 24px)); }
.rep { gap: 8px; text-align: left; justify-items: stretch; }
.rep h3, .rep > p, .rep .ask-emoji { text-align: center; justify-self: center; }
.rep-reasons { display: grid; gap: 6px; }
.rep-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--bg-1); border: 1.5px solid var(--bg-4); text-align: left; font-size: 14px; }
.rep-opt.on { border-color: var(--terracota); background: var(--terracota-soft); }
.rep-help { padding: 10px 12px; border-radius: 12px; background: var(--red-soft); font-size: 13px; line-height: 1.4; }
.rep textarea { width: 100%; resize: vertical; }
.rep-proof { font-size: 13px; color: var(--muted); }
.rep-note { color: var(--faint); font-size: 12px; text-align: center; }
.blocked-msg { padding: 4px 12px; color: var(--faint); font-style: italic; }
.mod-dlg { width: min(640px, calc(100% - 24px)); }
.mod-tabs { display: flex; gap: 8px; justify-content: center; }
.mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mod-item { padding: 12px 14px; border-radius: 14px; background: var(--bg-1); border: 1.5px solid var(--bg-4); display: grid; gap: 6px; }
.mod-item.urgent { border-color: var(--red); background: linear-gradient(90deg, var(--red-soft), var(--bg-1)); }
.mod-top { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mod-top small, .mod-ev small { color: var(--faint); }
.mod-item p { margin: 0; font-size: 13.5px; }
.mod-details { color: var(--muted); white-space: pre-wrap; }
.mod-ev { margin: 6px 0 0; padding-left: 16px; font-size: 13px; max-height: 240px; overflow-y: auto; }
.mod-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.safety-link { text-decoration: none; }

/* Configurações em categorias */
dialog.settings-dlg { width: min(860px, calc(100% - 24px)); height: min(640px, calc(100dvh - 32px)); }
.settings-dlg .settings { height: 100%; grid-template-rows: auto 1fr auto; gap: 14px; }
.set-layout { display: grid; grid-template-columns: 210px 1fr; gap: 18px; min-height: 0; }
.set-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; padding-right: 10px; border-right: 1px solid var(--line-hi); }
.set-nav button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: transparent; color: var(--muted); text-align: left; font-weight: 600; font-size: 14px; }
.set-nav button span { width: 20px; display: grid; place-items: center; }
.set-nav button span svg { width: 19px; height: 19px; }
.set-nav button:hover { background: var(--bg-3); color: var(--text); }
.set-nav button.on { background: var(--terracota-soft); color: var(--text); box-shadow: inset 3px 0 0 var(--terracota); }
.set-nav button[hidden] { display: none; }
.set-body { min-height: 0; overflow-y: auto; padding-right: 4px; }
.set-body > section { display: grid; gap: 14px; align-content: start; animation: fade-in .2s ease; }
.set-body > section[hidden] { display: none; }
.set-body h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 22px; }
.set-body .avatar-edit { display: flex; align-items: center; gap: 14px; }
.set-body .avatar-edit > div { display: grid; gap: 8px; }
.set-body .avatar-edit b { font-size: 17px; }
.set-body .plus-set { margin: 0; }
.set-body .get-app { width: 100%; }
#sDevices .dev-selects { display: grid; gap: 10px; }
#sDevices label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.blocked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.blocked-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-1); }
.blocked-list li span { flex: 1; }
.blocked-list li.none { color: var(--faint); font-size: 13px; background: transparent; padding: 0; }
.danger-zone { display: grid; gap: 6px; justify-items: start; margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #e5574a55; background: var(--red-soft); }
.danger-zone small { color: var(--muted); }
.set-foot { padding-top: 10px; border-top: 1px solid var(--line-hi); }
.safety-dlg { width: min(720px, calc(100% - 24px)); }
.safety-dlg .doc { padding: 0; max-width: none; margin: 0; }
@media (max-width: 760px) {
  dialog.settings-dlg { width: calc(100% - 16px); height: min(84dvh, 760px); max-height: 84dvh; border-radius: 22px; }
  .set-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; }
  .set-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0 0 6px; border-right: 0; border-bottom: 1px solid var(--line-hi); scrollbar-width: none; }
  .set-nav button { flex: none; padding: 8px 12px; font-size: 13px; white-space: nowrap; }
  .set-nav button.on { box-shadow: inset 0 -3px 0 var(--terracota); }
}
.set-body .row-end { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.m-ico.svg { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.m-ico.svg svg { width: 18px; height: 18px; }
.m-item:hover .m-ico.svg { color: var(--text); }
.m-item.danger .m-ico.svg { color: #ff9a8f; }

/* Membros do grupo */
.members-panel { display: none; }
#app[data-right="members"] .members-panel { display: flex; }
#app[data-right="members"] .right > .chat, #app[data-right="members"] .friends-panel:not(.members-panel) { display: none; }
#app[data-right="members"] { --right-w: clamp(240px, 22vw, 300px); }
#app[data-right="friends"] .members-panel, #app[data-right="chat"] .members-panel { display: none; }
.mb-list { overflow-y: auto; flex: 1; }
.mb-row { cursor: pointer; }
.mb-row.off { opacity: .55; }
.mb-row.off .dot { background: var(--faint); }
.mb-row.voice small { color: var(--oliva); }
.mb-role { display: inline-flex; margin-left: 4px; color: var(--mostarda); vertical-align: middle; }
.mb-role svg { width: 13px; height: 13px; }
.mb-role.admin { color: var(--muted); }
.mb-btn { display: inline-flex; align-items: center; gap: 4px; width: auto !important; padding: 0 8px; }
.mb-btn span { display: inline-flex; }
.mb-btn svg { width: 18px; height: 18px; fill: none !important; }
.mb-btn small { font-size: 12px; font-weight: 700; }
.mb-btn.on { background: var(--terracota-soft); color: var(--text); }
.mb-sheet h3 { margin: 4px 0 8px; font-family: var(--display); }

/* Emojis no chat */
.chat-form { position: relative; }
.emoji-pop { position: absolute; bottom: calc(100% + 8px); right: 8px; z-index: 40; width: min(340px, calc(100vw - 24px)); display: grid; grid-template-rows: auto 1fr; border-radius: 16px; background: var(--bg-3); border: 1.5px solid var(--bg-4); box-shadow: 0 18px 50px #000c; animation: menu-in .16s ease; overflow: hidden; }
.emo-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line-hi); overflow-x: auto; scrollbar-width: none; }
.emo-tabs button { flex: none; width: 36px; height: 34px; padding: 0; border-radius: 10px; background: transparent; font-size: 18px; opacity: .6; }
.emo-tabs button.on { background: var(--bg-4); opacity: 1; }
.emo-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; max-height: 240px; overflow-y: auto; align-content: start; }
.emo-title { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--muted); padding: 2px 4px 6px; }
.emo { aspect-ratio: 1; padding: 0; border-radius: 10px; background: transparent; font-size: 22px; line-height: 1; }
.emo:hover { background: var(--bg-4); transform: scale(1.12); }
.mb-list { list-style: none; margin: 0; padding: 4px 8px 12px; }
#btnEmoji svg { fill: none; }

/* Lista de amigos/membros: mais espaço pros dados */
.avatar:has(> .dot) { overflow: visible; }
.avatar > img { border-radius: inherit; }
.uname .un-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uname .badges { flex: none; }
.f-info b { display: flex; align-items: center; min-width: 0; }
.f-info b .uname { flex: 0 1 auto; }
.f-info b .mb-role { flex: none; }
.friend { position: relative; }
.friend .f-av .dot { right: -4px; bottom: -4px; }
.f-st { display: flex !important; align-items: center; gap: 4px; min-width: 0; }
.f-st > * { min-width: 0; }
.f-ico { display: inline-flex; flex: none; }
.f-ico svg { width: 13px; height: 13px; }
.f-ch { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-g { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }
.f-game { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-size: inherit; }
.friend.game .f-ch { color: var(--faint); font-weight: 400; }
.game-art { flex: none; width: 46px; height: 22px; border-radius: 6px; overflow: hidden; background: var(--bg-4); box-shadow: 0 2px 8px #0006, inset 0 0 0 1px #ffffff14; }
.game-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-art.mono { display: grid; place-items: center; background: linear-gradient(135deg, var(--gc), color-mix(in srgb, var(--gc) 55%, #000)); color: #fff; font-size: 10.5px; font-weight: 900; letter-spacing: .02em; text-shadow: 0 1px 2px #0007; }
.friend.off .game-art { display: none; }
.f-actions { align-items: center; gap: 6px; }
.f-go, .f-call { width: 30px; height: 30px; padding: 0; border-radius: 50%; display: grid; place-items: center; flex: none; transition: transform .12s, filter .12s; }
.f-go { background: var(--terracota); color: #fff; box-shadow: 0 3px 10px #e0603a55; }
.f-call { background: var(--bg-4); color: var(--muted); }
.f-go:hover, .f-call:hover { transform: scale(1.08); filter: brightness(1.12); }
.f-go svg, .f-call svg { width: 17px; height: 17px; }
.friend > .more-btn { width: 0; padding: 0; margin-left: -6px; overflow: hidden; transition: width .14s, margin .14s, opacity .14s; }
@media (hover: hover) { .friend:hover > .more-btn, .friend > .more-btn:focus-visible { width: 26px; margin-left: 0; opacity: .7; } }
@media (hover: none) { .friend > .more-btn { display: none; } }
#app:not([data-right="members"]) #membersPanel { display: none !important; }
.uname .un-t { flex: 0 1 auto; }
.me-info .badges { display: none; }
.me-info .uname { max-width: 100%; }

/* ---------- Cartão de perfil ---------- */
.pcard { position: fixed; z-index: 130; width: 300px; border-radius: 18px; overflow: hidden; background: var(--bg-2); border: 1.5px solid var(--bg-4); box-shadow: 0 24px 60px #000d; animation: pcard-in .2s cubic-bezier(.2,1.2,.4,1); }
@keyframes pcard-in { from { opacity: 0; transform: scale(.94) translateY(6px); } }
.pc-cover { height: 96px; position: relative; }
.pc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-more { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: #0007; color: #fff; backdrop-filter: blur(6px); }
.pc-more svg { width: 18px; height: 18px; }
.pc-body { padding: 0 16px 16px; display: grid; gap: 8px; }
.pc-av { width: 84px; height: 84px; border-radius: 28px; font-size: 34px; margin-top: -44px; border: 5px solid var(--bg-2); box-shadow: 0 8px 20px #0008; position: relative; }
.pc-av .dot { position: absolute; right: -5px; bottom: -5px; width: 22px; height: 22px; border-radius: 50%; border: 5px solid var(--bg-2); background: #6b5a4d; }
.pc-body.on .pc-av .dot { background: var(--oliva); }
.pc-body.room .pc-av .dot, .pc-body.here .pc-av .dot { background: var(--mostarda); }
.pc-name { font-family: var(--display); font-weight: 900; font-size: 21px; line-height: 1.15; min-width: 0; }
.pc-name .uname { max-width: 100%; }
.pc-name .badges { display: none; }
.pc-box { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg-3); font-size: 13px; }
.pc-st { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 600; }
.pc-dot { width: 9px; height: 9px; border-radius: 50%; background: #6b5a4d; flex: none; }
.pc-body.on .pc-dot { background: var(--oliva); }
.pc-body.room .pc-dot, .pc-body.here .pc-dot { background: var(--mostarda); }
.pc-body.room .pc-st, .pc-body.here .pc-st { color: var(--mostarda); }
.pc-game { display: flex; align-items: center; gap: 10px; }
.pc-game span { display: grid; min-width: 0; }
.pc-game small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.pc-game b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8fd18f; }
.game-art.lg { width: 76px; height: 36px; border-radius: 9px; font-size: 14px; }
.pc-role { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pc-role i { display: inline-flex; color: var(--mostarda); }
.pc-role svg { width: 16px; height: 16px; }
.pc-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-act { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border-radius: 12px; background: var(--bg-4); font-weight: 700; font-size: 13.5px; }
.pc-act i { display: inline-flex; }
.pc-act svg { width: 17px; height: 17px; }
.pc-act.go { background: var(--terracota); color: #fff; }
.pc-act.fill svg { fill: currentColor; }
.pc-act:hover { filter: brightness(1.12); }
.pcard-sheet .pcard { position: static; width: auto; border: 0; box-shadow: none; animation: none; margin: -8px -4px 0; background: transparent; }
.pcard-sheet .pc-av, .pcard-sheet .pc-av .dot { border-color: var(--bg-2); }
.to-profile { cursor: pointer; }
.msg-head b.to-profile:hover .un-t { text-decoration: underline; }

/* ---------- Botões do topo da conversa ---------- */
.call-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 10px; border-radius: 999px; font-weight: 800; font-size: 13px; color: #fff; background: linear-gradient(135deg, #5cb85c, #3d9a4a); box-shadow: 0 4px 14px #3d9a4a55, inset 0 1px 0 #ffffff30; }
.call-btn i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #ffffff26; }
.call-btn svg { width: 13px; height: 13px; fill: currentColor; }
.call-btn:hover { filter: brightness(1.08); box-shadow: 0 6px 18px #3d9a4a77, inset 0 1px 0 #ffffff30; }
.call-btn:hover i { animation: ring .5s ease; }
.call-btn.live { background: linear-gradient(135deg, var(--terracota), #c4502b); box-shadow: 0 4px 14px #e2673a55; }
.call-btn.live i { animation: ring 1.6s ease infinite; }
@keyframes ring { 0%, 100% { rotate: 0deg; } 20% { rotate: -16deg; } 40% { rotate: 14deg; } 60% { rotate: -8deg; } 80% { rotate: 4deg; } }
.ico-chip { display: inline-flex; align-items: center; gap: 6px; }
.ico-chip i { display: inline-flex; }
.ico-chip svg { width: 15px; height: 15px; }
.hd-ico { display: inline-flex; }
.hd-ico svg { width: 19px; height: 19px; }

/* ---------- Animações leves ---------- */
:where(button) { transition: scale .16s cubic-bezier(.3,1.7,.5,1), background-color .15s, color .15s, box-shadow .15s, filter .15s, opacity .15s; }
:where(button):active:not(:disabled) { scale: .93; transition-duration: .06s; }
.friend:active, .g-row:active, .mb-row:active { scale: .985; }
.friend, .g-row { transition: background .12s, scale .14s; }
.view-in { animation: view-in .24s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes view-in { from { opacity: 0; translate: 0 8px; } }
#navBody.view-in { animation-name: nav-in; }
@keyframes nav-in { from { opacity: 0; translate: -10px 0; } }
@media (min-width: 861px) {
  #app { transition: grid-template-columns .28s cubic-bezier(.2,.9,.25,1); }
  #app .right { overflow: hidden; }
  #app[data-right="none"] .right { display: flex; visibility: hidden; transition: visibility 0s .28s; }
  #app .right > * { min-width: 240px; }
  #app:not([data-right="none"]) .right > .friends-panel, #app:not([data-right="none"]) .right > .chat { animation: panel-in .3s cubic-bezier(.2,.9,.25,1) backwards; }
}
@keyframes panel-in { from { opacity: 0; translate: 24px 0; } }
.emoji-pop { transform-origin: bottom right; animation: pcard-in .18s cubic-bezier(.2,1.2,.4,1); }
@media (prefers-reduced-motion: reduce) {
  #app { transition: none !important; }
  .view-in, .pcard, .right > * { animation: none !important; }
}
.pcard-sheet .pc-more { right: auto; left: 8px; }
.call-btn { flex: none; white-space: nowrap; overflow: visible; }
.call-btn:not(:has(span)) { width: 36px; padding: 0; justify-content: center; }
.call-btn:not(:has(span)) i { background: none; }
.call-btn:not(:has(span)) svg { width: 16px; height: 16px; }
.pc-st .f-ico svg { width: 14px; height: 14px; }
.pc-st .f-g { color: var(--faint); font-weight: 500; }
.call-btn:has(span) { min-width: max-content; }
.chan-n.cap { font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--bg-3); color: var(--muted); }
.chan-n.cap.full { background: #e2673a33; color: #ff9a7a; }
.limit-note { display: block; color: var(--faint); font-size: 12px; margin-top: -2px; }
.mb-cap { font-family: var(--font); font-size: 13px; color: var(--faint); font-weight: 700; }

/* Muita gente + alguém transmitindo: os blocos de baixo diminuem juntos e mantêm o formato (sem ficar "fininhos") */
.main-body { container-type: inline-size; }
@media (min-width: 861px) {
  .stage.spot { grid-template-rows: minmax(0, 1fr) clamp(64px, min(27%, calc((100cqw - 40px) / var(--others) * 9 / 16)), 240px); }
  .stage.spot .tile:not(.is-focus) { width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 9; align-self: center; }
}
@media (max-width: 860px) and (orientation: portrait) {
  .stage.spot { grid-template-rows: minmax(0, 1fr) clamp(52px, min(24%, calc((100cqw - 24px) / var(--others))), 110px); }
  .stage.spot .tile:not(.is-focus) { width: 100%; height: auto; max-height: 100%; aspect-ratio: 1; align-self: center; }
}
.stage.spot .tile:not(.is-focus) .tile-name, .stage.spot .tile:not(.is-focus) .name-chip { max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.net-bad::after { left: auto; right: 8px; }

/* ---------- YouTube: controles de quem assiste ---------- */
.yt-volbox { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px 2px 2px; border-radius: 999px; background: #0007; }
.yt-mute { width: 30px; height: 30px; padding: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.yt-mute svg { width: 18px; height: 18px; fill: currentColor; }
.yt-mute.on { color: #ff9a8f; }
.yt-volbox .tile-vol { width: 90px; }
.yt-cc { font-weight: 900; letter-spacing: .03em; }
.yt-cc.on { background: #fff; color: #111; }
.yt-q { display: inline-flex; align-items: center; gap: 5px; }
.yt-q i { display: inline-flex; }
.yt-q svg { width: 14px; height: 14px; fill: currentColor; }
.yt-tile:not(.yt-host) .yt-shield { cursor: pointer; }

/* ---------- Modo foco: a fileira de baixo desliza pra fora e a tela em destaque cresce ---------- */
.stage.spot { transition: grid-template-rows .45s cubic-bezier(.2,.9,.25,1), grid-template-columns .45s cubic-bezier(.2,.9,.25,1), row-gap .45s, column-gap .45s; }
.stage.spot .tile:not(.is-focus) { transition: opacity .3s, translate .45s cubic-bezier(.2,.9,.25,1); }
.stage.spot.cinema { grid-template-rows: minmax(0, 1fr) 0px !important; row-gap: 0; }
.stage.spot.cinema .tile:not(.is-focus) { opacity: 0; translate: 0 30px; pointer-events: none; }
@media (max-width: 960px) and (max-height: 500px) and (orientation: landscape) {
  .stage.spot.cinema { grid-template-rows: repeat(var(--others), minmax(0, 1fr)) !important; grid-template-columns: minmax(0, 1fr) 0px !important; column-gap: 0; }
  .stage.spot.cinema .tile:not(.is-focus) { translate: 30px 0; }
}
.cinema-arrow { position: absolute; z-index: 6; width: 46px; height: 18px; padding: 0; margin-left: -23px; border-radius: 0 0 12px 12px; display: grid; place-items: center; background: var(--tv, #3a2c24); color: var(--muted); opacity: .75; transition: opacity .2s, color .2s, height .2s, top .45s cubic-bezier(.2,.9,.25,1); }
.cinema-arrow:hover { opacity: 1; color: var(--text); height: 22px; }
.cinema-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate .45s cubic-bezier(.2,.9,.25,1); }
.stage.cinema .cinema-arrow svg { rotate: 180deg; }
.stage:not(.spot) .cinema-arrow { display: none; }

/* ---------- Luz ambiente (leve: borra uma imagem pequena e o navegador só estica) ---------- */
.stage > .tile { z-index: 1; }
.amb-clip { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; }
.ambient { position: absolute; pointer-events: none; opacity: 0; filter: blur(16px) saturate(1.7) brightness(1.1); transform-origin: center; transition: opacity .8s; border-radius: 10px; }
.ambient.on { opacity: .5; }
.stage.cinema .ambient.on { opacity: .6; }
.yt-tile { container-type: inline-size; }
.yt-tile .tile-bar { flex-wrap: wrap; row-gap: 6px; }
.yt-tile .tile-bar .yt-name { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.yt-tile .tile-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.yt-tile .tile-actions .chip { white-space: nowrap; }
@container (max-width: 560px) {
  .yt-tile .tile-bar .yt-name { display: none; }
  .yt-tile .tile-actions { justify-content: flex-start; margin-left: 0; width: 100%; }
  .yt-tile .yt-volbox { flex: 1 1 140px; }
  .yt-tile .yt-volbox .tile-vol { flex: 1; width: auto; min-width: 60px; }
}
.stage.spot { overflow: hidden; }
.stage.spot.cinema { padding-bottom: 20px; }

/* Duas coisas grandes lado a lado (YouTube + tela), do mesmo tamanho; a galera numa fileira embaixo */
.stage.spot.duo { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)) !important; }
.stage.spot.duo .tile.is-focus { grid-column: span var(--bigspan) !important; grid-row: 1 !important; }
.stage.spot.duo .tile:not(.is-focus) { grid-column: span 2 !important; grid-row: 2; }
.stage.spot.duo .tile.is-focus .yt-mount, .stage.spot.duo .tile.is-focus video { width: 100%; height: 100%; }
@media (min-width: 861px) {
  .stage.spot.duo { grid-template-rows: minmax(0, 1fr) clamp(64px, min(27%, calc((100cqw - 40px) / var(--bigspan) * 9 / 16)), 220px); }
}
/* Jogo fora da Steam: a capa em pé, como um mini pôster */
.game-art.cover { width: 24px; height: 32px; border-radius: 5px; }
.game-art.cover img { width: 100%; height: 100%; object-fit: cover; }
.game-art.cover.lg { width: 45px; height: 60px; border-radius: 8px; }
.stage.spot.duo .tile.is-focus { width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 9; align-self: center; }
@media (min-width: 861px) {
  .stage.spot.duo { grid-template-rows: auto clamp(64px, calc((100cqw - 40px) / var(--bigspan) * 9 / 16), 200px) !important; align-content: center; }
  .stage.spot.duo.cinema { grid-template-rows: auto 0px !important; }
}

/* ---------- Plano e convites (configurações) ---------- */
.plan-page { display: grid; gap: 12px; }
.pp-hero { position: relative; overflow: hidden; display: grid; gap: 12px; padding: 18px; border-radius: 18px; background: linear-gradient(135deg, #3a2a1f, #241b16); border: 1.5px solid var(--bg-4); }
.pp-hero.founder { background: radial-gradient(circle at 0% 0%, #e8b33c33, transparent 60%), linear-gradient(135deg, #3d2d16, #241b16); border-color: #e8b33c55; }
.pp-hero.plus { background: radial-gradient(circle at 0% 0%, #8fd1ff2a, transparent 60%), linear-gradient(135deg, #22303a, #241b16); }
.pp-hero.trial { background: radial-gradient(circle at 0% 0%, #e2673a33, transparent 60%), linear-gradient(135deg, #3a2419, #241b16); }
.pp-hero-top { display: flex; gap: 14px; align-items: center; }
.pp-hero-top > div { display: grid; gap: 2px; min-width: 0; }
.pp-hero-top small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pp-hero-top b { font-family: var(--display); font-weight: 900; font-size: 22px; }
.pp-hero.founder .pp-hero-top b { color: var(--mostarda); }
.pp-hero-top span:not(.pp-ico) { color: var(--muted); font-size: 13px; }
.pp-ico { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: #0003; box-shadow: inset 0 0 0 1px #ffffff14; }
.pp-ico svg { width: 30px; height: 30px; }
.pp-days { height: 6px; border-radius: 99px; background: #0004; overflow: hidden; }
.pp-days i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--terracota), var(--mostarda)); }
.pp-invite { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--bg-3); border: 1.5px solid #e2673a55; box-shadow: 0 10px 30px #e2673a14; }
.pp-inv-head { display: flex; gap: 14px; align-items: center; }
.pp-inv-head > div { display: grid; gap: 2px; }
.pp-inv-head b { font-size: 15px; }
.pp-inv-head span:not(.pp-big) { color: var(--muted); font-size: 13px; }
.pp-big { flex: none; font-family: var(--display); font-weight: 900; font-size: 34px; line-height: 1; color: var(--mostarda); text-shadow: 0 4px 18px #e8b33c55; }
.pp-invite .inv-row { display: flex; gap: 6px; align-items: center; }
.pp-invite .inv-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chip { display: inline-flex; align-items: center; gap: 6px; background: #25d366; color: #06301a; font-weight: 800; }
.wa-chip i { display: inline-flex; } .wa-chip svg { width: 15px; height: 15px; }
.pp-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-badge { display: grid; justify-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 16px; background: var(--bg-3); border: 1.5px solid var(--bg-4); text-align: center; filter: grayscale(.85); opacity: .75; }
.pp-badge.got { filter: none; opacity: 1; border-color: #e8b33c66; background: linear-gradient(180deg, #e8b33c1a, var(--bg-3)); }
.pp-b-ico { width: 36px; height: 36px; display: grid; place-items: center; }
.pp-b-ico svg { width: 32px; height: 32px; }
.pp-badge small { color: var(--faint); font-size: 11.5px; }
.pp-b-bar { width: 80%; height: 4px; border-radius: 99px; background: #0004; overflow: hidden; }
.pp-b-bar i { display: block; height: 100%; background: var(--mostarda); }
.pp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.pp-plus { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: 16px; background: var(--bg-3); }
.pp-plus > div { display: grid; gap: 2px; }
.pp-plus b em { color: var(--terracota); font-style: normal; }
.pp-plus small, .pp-gift small { color: var(--faint); font-size: 12px; }
.pp-gift { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 16px; background: var(--bg-3); text-align: left; }
.pp-gift i { display: inline-flex; } .pp-gift svg { width: 30px; height: 30px; }
.pp-gift span { display: grid; gap: 2px; }
@media (max-width: 560px) { .pp-badges { gap: 6px; } .pp-badge { padding: 10px 4px; } .pp-invite .inv-row { flex-wrap: wrap; } .pp-invite .inv-link { flex-basis: 100%; } }

/* Janela de convite: rodapé discreto */
.pl-foot { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
.pl-foot .link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pl-foot .link i { display: inline-flex; } .pl-foot .link svg { width: 16px; height: 16px; }
.pl-code[hidden] { display: none !important; }

/* YouTube: volume sempre à mão (quem controla no celular não alcança a barra de baixo) */

/* Nome de exibição */
.pc-handle { color: var(--faint); font-size: 13px; font-weight: 600; margin-top: -6px; }
.dname-edit { display: grid; gap: 6px; margin-top: 14px; }
.dname-edit label { font-weight: 700; display: grid; gap: 2px; }
.dname-edit label small { font-weight: 500; color: var(--faint); font-size: 12px; }
.dname-edit input { flex: 1; min-width: 0; }

/* ---------- Tela de entrar dos apps (Android e PC) ---------- */
.join.app-login { background: radial-gradient(120% 70% at 50% 0%, #e2673a33, transparent 60%), radial-gradient(90% 60% at 100% 100%, #e8b33c1f, transparent 60%), #140f0c; }
.join.app-login .lp-modal-bg { background: transparent; }
.join.app-login #joinCard { background: transparent; border: 0; box-shadow: none; width: min(420px, 100%); padding: 28px 22px calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 22px; }
.join.app-login .brand { flex-direction: column; text-align: center; gap: 12px; }
.join.app-login .brand img { width: 96px; height: 96px; filter: drop-shadow(0 14px 30px #e2673a66); animation: al-bob 3s ease-in-out infinite; }
@keyframes al-bob { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -8px; rotate: 2deg; } }
.join.app-login .wordmark { font-size: 46px; }
.join.app-login .tagline { font-size: 20px; }
.al-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.al-feats li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #ffffff0a; border: 1px solid #ffffff12; color: var(--muted); font-size: 14px; animation: slide-up .5s ease both; }
.al-feats li:nth-child(2) { animation-delay: .08s; } .al-feats li:nth-child(3) { animation-delay: .16s; }
.al-feats li b { color: var(--text); }
.al-feats i { font-style: normal; font-size: 22px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #e2673a22; flex: none; }
.join.app-login .auth { background: transparent; border: 0; padding: 0; }
.join.app-login .pitch { text-align: center; }
.join.app-login .desk-login { width: 100%; height: 56px; font-size: 17px; border-radius: 18px; box-shadow: 0 12px 30px #e2673a55; }
.join.app-login .lp-modal-x { display: none; }
/* Baixar o app (discreto, no pé do menu da esquerda) */
.rail-dl { margin-top: auto; margin-bottom: 6px; width: 40px !important; height: 40px !important; border-radius: 14px; display: grid; place-items: center; color: var(--faint); background: transparent; border: 1.5px dashed var(--bg-4); text-decoration: none; }
.rail-dl svg { width: 20px; height: 20px; }
.rail-dl:hover { color: var(--text); border-color: var(--oliva); background: #8fa35f22; }
.rail-dl[hidden] { display: none !important; }
.join.app-login #gBtn { display: grid; }
.mic-ctl { display: grid; gap: 10px; }
.mic-ctl .check small { color: var(--faint); font-weight: 500; }
.mic-ctl select { width: 100%; }

/* Celular: barra da sala enxuta (chat fica no topo/arrastando; reações ficam no ⋯) e topo do canal sem o nome do grupo */
@media (max-width: 860px) {
  .controls #ctlChat { display: none !important; }
  #app.view-text .main-title small, #app.view-voice .main-title small { display: none; }
}

/* Salinha+ no nome */
.nav-dm.off { opacity: .55; }
.nav-dm.off:hover { opacity: 1; }
.nav-empty .chip { margin-top: 8px; }

/* Salinha+: um "+" dourado discreto no "salinha." da barra de título e um anel dourado em volta do símbolo */
.brand-plus { margin-left: 1px; font-size: .7em; font-weight: 900; color: #e8b33c; line-height: 0; vertical-align: .55em; }
.rail-home.plus::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; padding: 2px; background: conic-gradient(from 210deg, #f6d27a, #c8902a, #fff0c2, #d49a2e, #f6d27a); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
/* Celular: virar a câmera (frente/trás) no seu bloco */
.cam-flip { position: absolute; top: 8px; right: 8px; z-index: 3; width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: #140f0cb3; color: #fff; border: 1px solid #ffffff2e; backdrop-filter: blur(6px); }
.cam-flip svg { width: 22px; height: 22px; }
.cam-flip:active { transform: scale(.9) rotate(-30deg); }

/* Configurações: rótulo com ícone fino */
.set-lab { display: inline-flex; align-items: center; gap: 8px; }
.set-ico svg { width: 17px; height: 17px; opacity: .85; }
/* Caixinha de seleção nossa (a nativa do celular é feia) */
select.fsel-native { display: none !important; }
.fsel { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--r-sm); background: var(--bg-1); border: 1.5px solid var(--bg-4); color: var(--text); font-weight: 400; font-size: 15px; text-align: left; transition: border-color .15s, background .15s; }
.fsel:hover { background: var(--bg-1); border-color: #5b4a3e; }
.fsel:active { transform: none; }
.fsel.open { border-color: var(--mostarda); }
.fsel-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-c svg { width: 18px; height: 18px; opacity: .7; transition: transform .2s; }
.fsel.open .fsel-c svg { transform: rotate(180deg); }
.fsel-wrap { position: fixed; inset: 0; z-index: 1000; }
.fsel-pop { position: fixed; display: grid; gap: 2px; padding: 6px; max-height: min(340px, 60vh); overflow-y: auto; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--bg-4); box-shadow: 0 18px 50px #000b; animation: fsel-in .16s cubic-bezier(.2,.8,.3,1); }
@keyframes fsel-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.fsel-opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; background: transparent; color: var(--text); font-weight: 500; font-size: 15px; text-align: left; }
.fsel-opt:hover { background: var(--bg-3); }
.fsel-opt span { flex: 1; }
.fsel-opt.on { color: var(--mostarda); background: #e8b33c14; }
.fsel-opt svg { width: 18px; height: 18px; }
.fsel-wrap.sheet-like { background: #0a0705aa; animation: fade-in .18s; }
.fsel-wrap.sheet-like .fsel-pop { left: 10px !important; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); top: auto !important; width: auto !important; max-height: 70vh; padding: 10px; border-radius: 20px; animation: fsel-up .22s cubic-bezier(.2,.8,.3,1); }
.fsel-wrap.sheet-like .fsel-opt { padding: 15px 14px; font-size: 16px; }
@keyframes fsel-up { from { transform: translateY(30px); opacity: 0; } }
.yt-rel { display: grid; gap: 8px; margin-top: 8px; }

/* YouTube no palco: o vídeo em cima e o painel (igual ao do mini player) embaixo */
.yt-vtile { display: flex; flex-direction: column; background: #120d0b; aspect-ratio: auto !important; }
.stage:not(.spot) .yt-vtile { min-height: 300px; }
.yt-vbox { position: relative; flex: 1; min-height: 120px; background: #000; overflow: hidden; }
.yt-vbox .yt-mount { position: absolute; inset: 0; }
.yt-vbox .yt-mount > * { width: 100%; height: 100%; }
.yt-vpanel { position: relative; flex: none; padding: 8px 12px 10px; background: linear-gradient(160deg, #2e1d17, #1b1411); border-top: 1px solid #ffffff12; }
.yt-vpanel .yt-dock-side { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prog prog" "head ctl" "foot foot"; gap: 6px 12px; }
.yt-vpanel .yt-dock-prog { grid-area: prog; }
.yt-vpanel .yt-dock-head { grid-area: head; }
.yt-vpanel .yt-dock-ctl { grid-area: ctl; justify-content: flex-end; flex-wrap: nowrap; }
.yt-vpanel .yt-dock-foot { grid-area: foot; }
.yt-vpanel .yt-dock-vol { width: 110px; }
.yt-vpanel .yt-b svg { width: 18px; height: 18px; }
.yt-b.sk { font-size: 11px; font-weight: 800; }
@media (max-width: 640px) {
  .yt-vpanel { padding: 8px 10px; }
  .yt-vpanel .yt-dock-side { grid-template-columns: 1fr; grid-template-areas: "prog" "head" "ctl" "foot"; }
  .yt-vpanel .yt-dock-ctl { justify-content: space-between; }
}
.yt-vtile:fullscreen, .yt-vtile.fake-full { background: #000; }
/* A fila abre por cima (não empurra os botões pra fora) e tem ✕ pra fechar */
.yt-dq-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.yt-dq-head b { margin-right: auto; }
.yt-dq-x { margin-left: 2px; }
.yt-vpanel .yt-dock-queue, .yt-dock.intile .yt-dock-queue { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px); z-index: 6; max-height: min(320px, 60vh); background: #241913; border: 1px solid #ffffff1c; border-radius: 14px; box-shadow: 0 16px 40px #000c; }
.yt-dock.intile .yt-dock-queue { bottom: 8px; top: 8px; max-height: none; }
.yt-b.play svg { width: 20px; height: 20px; margin: auto; }
.yt-vpanel .yt-dock-volw { display: inline-flex !important; }
@media (max-width: 640px) { .yt-vpanel .yt-dock-vol { width: 120px; } }
.yt-dock.intile .yt-dock-queue { align-content: start; }

/* Tela cheia: vídeo na tela toda; o painel flutua por baixo e só aparece ao mexer/tocar (ou no botão do canto) */
.yt-vtile:fullscreen .yt-vbox, .yt-vtile.fake-full .yt-vbox { position: absolute; inset: 0; }
.yt-vtile:fullscreen .yt-vpanel, .yt-vtile.fake-full .yt-vpanel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; border-top: 0; padding: 28px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, #000000d9 45%); transform: translateY(100%); opacity: 0; pointer-events: none; transition: transform .25s ease, opacity .25s; }
.yt-vtile.ui-on:fullscreen .yt-vpanel, .yt-vtile.ui-on.fake-full .yt-vpanel { transform: none; opacity: 1; pointer-events: auto; }
.yt-vtile:fullscreen .yt-vtile:fullscreen /* Fila no celular: folha de baixo do tamanho da tela, sem rolar pro lado */
.sheet .yt-q-sheet { position: static !important; max-height: 55vh; overflow-y: auto; overflow-x: hidden; padding: 4px 0 0; background: none; border: 0; box-shadow: none; }
.yt-dock-queue { overflow-x: hidden; }
.yt-dq-row { min-width: 0; }
.sheet .yt-dq-x { display: none; }
.sheet .yt-q-sheet .yt-dq-head { padding-right: 44px; }
/* Tela cheia: escudo por cima do YouTube (toque = mostra/esconde os nossos controles) */
.yt-fshield { display: none; position: absolute; inset: 0; z-index: 3; }
.yt-vtile:fullscreen .yt-fshield, .yt-vtile.fake-full .yt-fshield { display: block; }
/* Tela cheia sem a API (app Android/iPhone): sai da "caixa" do palco e cobre tudo */
body.yt-ff #mainBody { container-type: normal !important; }
body.yt-ff .tile.fake-full { z-index: 5000 !important; }
body.yt-ff { overflow: hidden; }

/* Configurações da transmissão (estilo Discord) */
.share-pop { width: 360px; max-height: min(80vh, 640px); overflow-y: auto; gap: 8px; padding: 16px; }
.sp-title { text-align: center; font-size: 17px; margin-bottom: 4px; }
.sp-sec { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 6px; }
.sm-list { display: grid; border-radius: 14px; background: var(--bg-2); overflow: hidden; }
.sm-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 0; background: transparent; color: var(--text); text-align: left; font-weight: 400; }
.sm-item + .sm-item { border-top: 1px solid #ffffff0f; }
.sm-item:hover { background: var(--bg-4); }
.sm-ico svg { width: 22px; height: 22px; opacity: .85; }
.sm-txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
.sm-txt b { font-size: 14.5px; font-weight: 700; }
.sm-txt small { font-size: 12px; color: var(--muted); }
.sm-radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #8a7666; transition: border-color .2s, box-shadow .2s, background .2s; }
.sm-item.on .sm-radio { border-color: var(--terracota); background: var(--terracota); box-shadow: inset 0 0 0 4px var(--bg-2); }
.sp-adv { font-size: 12.5px; color: var(--muted); display: grid; gap: 8px; }
.sp-adv summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.sp-audio { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); }
.sp-go { width: 100%; padding: 13px; font-size: 15px; font-weight: 700; margin-top: 6px; }
.yt-res-meta { color: var(--faint) !important; font-size: 11.5px; }
.yt-dq-sub { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.yt-dq-row.again { background: transparent; border: 1px solid #ffffff12; }
.yt-dq-n { flex: none; font-size: 11px; color: var(--mostarda); font-weight: 700; }


/* Baixando o app: cartãozinho animado */
.dl-card { position: fixed; z-index: 400; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 18px; background: linear-gradient(150deg, #3a2419, #1e1612); border: 1px solid #e25d2c55; box-shadow: 0 18px 44px #000b, 0 0 0 4px #e25d2c14; animation: dl-in .45s cubic-bezier(.2,1.5,.4,1); max-width: 320px; }
.dl-card.out { animation: dl-out .35s ease forwards; }
@keyframes dl-in { from { opacity: 0; transform: translateX(-10px) scale(.9); } }
@keyframes dl-out { to { opacity: 0; transform: translateY(6px) scale(.96); } }
.dl-ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--terracota); color: #fff; overflow: hidden; }
.dl-ico svg { width: 22px; height: 22px; animation: dl-bob 1.1s ease-in-out infinite; }
@keyframes dl-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.dl-txt { display: grid; gap: 2px; }
.dl-txt b { font-family: var(--display); font-weight: 900; font-size: 16px; }
.dl-txt small { color: var(--muted); font-size: 12.5px; }
.dl-x { padding: 4px 8px; background: transparent; color: var(--faint); font-size: 13px; }

/* Tela do plano: Salinha+ em cima, convite como alternativa */
.pl-buy.hero { background: linear-gradient(160deg, #3d2a14, #221812 70%); border-color: #e8b33c66; box-shadow: 0 0 0 4px #e8b33c12, 0 14px 40px #00000066; padding: 18px; gap: 14px; }
.pl-buy.hero .pl-plus { font-size: 26px; }
.pl-buy.hero .pl-price b { font-size: 24px; }
.perk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.perk-grid span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #ffffff0a; font-size: 13px; font-weight: 700; animation: perk-in .45s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i) * 50ms + .1s); }
.perk-grid i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--bg-3); color: var(--mostarda); }
.perk-grid i svg { width: 16px; height: 16px; }
.pl-invite.alt { background: var(--bg-1); border-color: var(--bg-4); box-shadow: none; }
.pl-invite .ref-steps, .pl-invite.alt .pl-fine { display: none; }
.pl-invite .inv-btns button { padding: 11px 14px; }
@media (max-width: 420px) { .perk-grid span { font-size: 12px; padding: 7px 8px; } }

/* Excluir conta */
.del-dlg .ask { text-align: left; }
.del-dlg .ask-emoji, .del-dlg h3 { text-align: center; }
.del-warn { margin: 0; }
.del-list { margin: 0; padding: 10px 14px 10px 30px; border-radius: 12px; background: #e0484814; border: 1px solid #e0484840; display: grid; gap: 4px; font-size: 13.5px; }
.del-confirm { gap: 6px; color: var(--text); font-weight: 500; }
.del-dlg .danger-btn { width: 100%; padding: 12px; }
.del-dlg .danger-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Pop-up: adicionar amigo */
.add-dlg { width: min(420px, calc(100% - 24px)); }
.ask.add { position: relative; display: grid; gap: 14px; text-align: center; }
.add .pl-x { position: absolute; top: 12px; right: 12px; }
.ad-ico { justify-self: center; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--terracota-soft); color: var(--terracota); }
.ad-ico svg { width: 30px; height: 30px; }
.add h3 { margin: 0; }
.ad-form { display: flex; gap: 8px; }
.ad-in { flex: 1; display: flex; align-items: center; gap: 2px; padding: 0 12px; border-radius: 999px; background: var(--bg-1); border: 1.5px solid var(--bg-4); }
.ad-in:focus-within { border-color: var(--mostarda); }
.ad-in span { color: var(--terracota); font-weight: 800; font-size: 16px; }
.ad-in input { border: 0; background: transparent; padding: 12px 4px; font-size: 15px; }
.ad-form .primary { padding: 0 18px; }
.ad-mine { justify-self: center; display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--bg-1); color: var(--muted); font-weight: 500; font-size: 13px; }
.ad-mine b { color: var(--mostarda); font-weight: 800; }
.ad-mine small { color: var(--faint); font-size: 11px; text-decoration: underline; }
.ad-mine.ok small { color: #6fcf8f; text-decoration: none; }
.ad-reqs { display: grid; gap: 6px; text-align: left; }
.ad-sec { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.ad-req { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--bg-1); }
.ad-nick { flex: 1; min-width: 0; display: grid; }
.ad-nick b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-nick small { color: var(--muted); font-size: 11.5px; }

/* Plano e convites (configurações): mesmo visual da tela de planos */
.plan-page { display: grid; gap: 12px; }
.plan-page .pl-or { margin: 2px 0; }
.plan-page .pl-invite .ref-steps { display: none; }
.pp-code { display: flex; gap: 8px; align-items: center; }
.pp-code .code-in { max-width: 160px; }

/* Configurações no celular: deslizar troca de aba */
.set-body section.sw-l { animation: sw-l .22s cubic-bezier(.2,.8,.3,1); }
.set-body section.sw-r { animation: sw-r .22s cubic-bezier(.2,.8,.3,1); }
@keyframes sw-l { from { opacity: 0; transform: translateX(28px); } }
@keyframes sw-r { from { opacity: 0; transform: translateX(-28px); } }
.plan-page, .plan-page > * { min-width: 0; }
.plan-page .inv-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.plan-page .inv-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Moderação: preservação de dados */
.mod-holds { display: grid; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--bg-1); text-align: left; }
.mod-holds summary { cursor: pointer; font-weight: 700; }
.mod-hold-form { display: flex; gap: 6px; flex-wrap: wrap; }
.mod-hold-form input { flex: 1 1 140px; padding: 8px 10px; }
.mod-hold { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mod-hold small { flex: 1; color: var(--muted); }

/* Central de Segurança: denúncia sem conta */
.pub-report { margin: 18px 0; padding: 16px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--bg-4); display: grid; gap: 10px; }
.pub-report h3 { margin: 0; }
.pub-report p { margin: 0; color: var(--muted); }
.pub-report form { display: grid; gap: 10px; }
.pub-report textarea { width: 100%; background: var(--bg-1); border: 1.5px solid var(--bg-4); border-radius: var(--r-sm); padding: 11px 13px; color: var(--text); font: inherit; resize: vertical; }
.pub-report button { justify-self: start; }
.pub-msg.ok { color: #6fcf8f; } .pub-msg.err { color: #ff9a8f; }
/* Denúncia: prévia do que vai como prova */
.rep-preview { font-size: 13px; margin: 2px 0 6px; text-align: left; }
.rep-preview summary { cursor: pointer; opacity: .85; }
.rep-preview ul { max-height: 150px; overflow: auto; margin: 6px 0 0; padding-left: 18px; overflow-wrap: anywhere; }
.mod-ev .ev-target { background: #e5574a1f; border-radius: 6px; }

/* Ambiente de teste: entrar sem Google */
.test-login { display: grid; gap: 8px; justify-items: center; }
.test-login small { color: var(--mostarda); font-weight: 600; }
.test-login input { width: 280px; max-width: 100%; padding: 11px 14px; border-radius: 999px; border: 1.5px solid var(--bg-4); background: var(--bg-1); color: var(--text); font: inherit; }

/* =================== Avatar 3D (ambiente de teste) =================== */
.av3-stage { position: absolute; inset: 0; overflow: hidden; }
.av3-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.av3-over { position: absolute; inset: 0; pointer-events: none; }
.av3-over > * { position: absolute; left: 0; top: 0; will-change: transform; }
.av3-bubble { max-width: 220px; padding: 8px 12px; border-radius: 16px; background: #fdfbf7; color: #2a1a12; font-weight: 600; font-size: 13px; box-shadow: 0 6px 18px #0006; opacity: 0; transition: opacity .25s; white-space: normal; text-align: center; }
.av3-bubble.on { opacity: 1; }
.av3-bubble::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.av3-zzz { color: #c9b5a2; font: 700 16px/1 var(--display, Georgia); opacity: 0; letter-spacing: 4px; }
.av3-zzz.on { opacity: 1; animation: av3z 2.4s ease-in-out infinite; }
@keyframes av3z { 50% { margin-top: -10px; } }
.av3-name { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #1b1411cc; color: #f4e9dc; font-size: 12px; font-weight: 600; white-space: nowrap; transition: box-shadow .2s, background .2s; }
.av3-name i { display: none; font-style: normal; }
.av3-name.muted i { display: inline; }
.av3-name.muted i::before { content: '🔇'; font-size: 11px; }
.av3-name.speaking { background: #8fa35f; box-shadow: 0 0 0 3px #8fa35f55, 0 0 16px #8fa35f88; }
.av3-pop { font-size: 34px; opacity: 0; }
/* tela inicial: o boneco */
.av3-home-card { position: relative; height: 290px; margin: 0 0 18px; border-radius: 24px; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, #e2673a33, transparent 60%), radial-gradient(60% 80% at 80% 0%, #e8b33c1f, transparent 70%), var(--bg-1); border: 1.5px solid var(--bg-4); }
.av3-home-stage { position: absolute; inset: 0; }
.av3-home-acts { position: absolute; left: 14px; bottom: 12px; right: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; pointer-events: none; }
.av3-home-acts > * { pointer-events: auto; }
.av3-home-acts small { color: var(--faint); font-size: 11.5px; }
/* sala: a salinha 3D por cima do palco */
.av3-room-box { position: absolute; inset: 0; z-index: 3; background: #1b1411; }
.av3-room-box[hidden] { display: none; }
.av3-switch { position: absolute; top: 12px; right: 12px; z-index: 6; box-shadow: 0 6px 18px #0007; }
.stage.av3-on > .tile { visibility: hidden; }
/* configurações */
.av3-set-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: var(--bg-1); border: 1.5px solid var(--bg-4); }
.av3-set-row > span { font-size: 26px; }
.av3-set-row small { display: block; color: var(--faint); font-size: 12px; }
/* criador do boneco */
.av3-creator { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-columns: 1fr min(440px, 42vw); grid-template-rows: auto 1fr; background: radial-gradient(90% 70% at 30% 60%, #e2673a22, transparent 70%), #1b1411; animation: av3in .35s ease both; }
@keyframes av3in { from { opacity: 0; transform: scale(.98); } }
.av3c-head { grid-column: 1 / -1; position: relative; padding: 18px 64px 6px 22px; }
.av3c-head h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 26px; }
.av3c-head p { margin: 4px 0 0; color: var(--muted); }
.av3c-x { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%; padding: 0; font-size: 18px; }
.av3c-preview { position: relative; min-height: 0; }
.av3c-dice { position: absolute; left: 18px; bottom: 18px; z-index: 2; }
.av3c-hint { position: absolute; right: 18px; bottom: 24px; z-index: 2; color: var(--faint); }
.av3c-side { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; background: #241b16; border-left: 1.5px solid var(--bg-4); border-radius: 22px 0 0 0; }
.av3c-tabs { display: flex; gap: 4px; padding: 10px; overflow-x: auto; border-bottom: 1.5px solid var(--bg-4); }
.av3c-tab { flex: 1 0 auto; display: grid; justify-items: center; gap: 2px; padding: 8px 10px; border-radius: 14px; background: transparent; color: var(--muted); font-weight: 600; }
.av3c-tab span { font-size: 22px; }
.av3c-tab small { font-size: 11px; }
.av3c-tab.on { background: var(--bg-4); color: var(--text); }
.av3c-panel { overflow-y: auto; padding: 8px 16px 16px; display: grid; gap: 16px; align-content: start; }
.av3c-row b { display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.av3c-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.av3c-chip { padding: 8px 13px; border-radius: 999px; background: var(--bg-3, #2e231c); border: 2px solid transparent; font-weight: 600; font-size: 13px; }
.av3c-chip.on { border-color: var(--terracota); background: #e2673a26; }
.av3c-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.av3c-sw { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 3px solid var(--bg-1); box-shadow: 0 0 0 1.5px var(--bg-4); }
.av3c-sw.on { box-shadow: 0 0 0 3px var(--terracota); transform: scale(1.08); }
.av3c-foot { padding: 12px 16px 16px; border-top: 1.5px solid var(--bg-4); }
.av3c-save { width: 100%; padding: 14px; font-size: 16px; }
@media (max-width: 760px) {
  .av3-creator { grid-template-columns: 1fr; grid-template-rows: auto 38vh 1fr; }
  .av3c-head { padding: 14px 60px 2px 16px; }
  .av3c-head h2 { font-size: 21px; }
  .av3c-side { border-left: 0; border-top: 1.5px solid var(--bg-4); border-radius: 22px 22px 0 0; }
  .av3-home-card { height: 250px; }
}
/* Jogar no meu PC: o boneco pegando o controle enquanto conecta */
.pcv-av3 { position: relative; width: 220px; height: 230px; }
.pcv-status:has(.pcv-av3) { flex-direction: column; }
.pcv-status:has(.pcv-av3) .pcv-spin { display: none; }
.pcv-status.av3-bye { animation: av3bye 1.4s ease forwards; }
@keyframes av3bye { 70% { opacity: 1; } 100% { opacity: 0; } }
/* celular em pé: a salinha num quadro quase quadrado no topo (senão sobra chão demais) */
@media (orientation: portrait) and (max-width: 760px) {
  .av3-room-box { bottom: auto; height: min(100%, 108vw); border-radius: 0 0 22px 22px; }
}
@media (orientation: portrait) and (max-width: 760px) {
  .stage.av3-on::after { content: 'Toque nos bonecos 👆 · reaja com 😀 · compartilhe a tela e ela aparece na TV 📺'; position: absolute; top: calc(min(100%, 108vw) + 22px); left: 0; right: 0; z-index: 3; padding: 0 28px; text-align: center; color: var(--faint); font-size: 13px; line-height: 1.5; }
}