/* A Yggdrasil: tema principal (cinza claro, preto e verde musgo; titulos pesados com borda "estourada").
   O Livezinha usa um tema escuro e quente (body.tema-livezinha). Nada de estilo inline: tudo aqui. */
@font-face { font-family:"Anton"; src:url("/assets/fonts/anton.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Dosis"; src:url("/assets/fonts/dosis.woff") format("woff"); font-weight:200 800; font-style:normal; font-display:swap; }
@font-face { font-family:"Playfair Display"; src:url("/assets/fonts/playfair.woff") format("woff"); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Playfair Display"; src:url("/assets/fonts/playfair-italic.woff") format("woff"); font-weight:400 900; font-style:italic; font-display:swap; }

:root {
  --bg:#e2cfae; --bg-grad:radial-gradient(ellipse 120% 90% at 50% 15%,#efe0c2 0%,#e2cfae 48%,#cbb590 100%); --ink:#000002; --moss:#86963f; --on-accent:#000002; --muted:#4a4a4a;
  --card:rgba(255,255,255,.4); --line:rgba(0,0,2,.35); --danger:#8a2c1f; --ok:#4d5a1a;
  --display:"Anton","Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --body:"Dosis",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Playfair Display",Georgia,serif;
  --rough:url(#rough); --rough-lg:url(#rough-lg); --rough-soft:url(#rough-soft);
  color-scheme:light;
}
body.tema-livezinha {
  --bg:#14100d; --bg-grad:none; --ink:#f2e6d6; --moss:#d9a577; --on-accent:#14100d; --muted:#b9a995;
  --card:rgba(242,230,214,.06); --line:rgba(242,230,214,.3); --danger:#e58a7c; --ok:#d9a577;
  --display:"Playfair Display",Georgia,serif; --rough:none; --rough-lg:none; --rough-soft:none;
  color-scheme:dark;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg) var(--bg-grad) fixed; color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.45; }
a { color:inherit; }
.defs { position:absolute; width:0; height:0; overflow:hidden; }
main { max-width:1100px; margin:0 auto; padding:16px 16px 120px; }
main.narrow { max-width:480px; }
main.wide { max-width:none; }

h1, h2, h3 { font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:1.02; margin:0; filter:var(--rough); }
body.tema-livezinha h1, body.tema-livezinha h2, body.tema-livezinha h3 { text-transform:none; font-weight:500; }
h1 { font-size:clamp(38px,6vw,64px); margin:8px 0 6px; }
h2 { font-size:clamp(26px,3.6vw,38px); margin:22px 0 10px; }
h3 { font-size:1.5rem; margin:0 0 6px; }
.sub { color:var(--muted); margin:0 0 22px; font-size:1.1rem; }
.muted { color:var(--muted); }
.kicker { font:800 13px var(--body); text-transform:uppercase; letter-spacing:.12em; }

/* Textura de granulado sobre o fundo (atras do conteudo) */
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:url("/assets/img/grain.png"); opacity:.55; }

/* Navegacao: pilula fixa no canto inferior direito. Fechada mostra so "A Yggdrasil" (leva para o inicio) e a alca;
   a alca abre/fecha o menu arrastando para a esquerda (ou por clique). */
.top { position:fixed; z-index:10; bottom:16px; right:16px; max-width:calc(100vw - 24px); display:flex; align-items:center; background:var(--bg); border:3px solid var(--ink); border-radius:28px; padding:6px 6px 6px 16px; box-shadow:0 6px 0 var(--ink); }
.brand { font:400 22px var(--display); text-transform:uppercase; text-decoration:none; white-space:nowrap; padding-right:8px; }
body.tema-livezinha .brand { font-weight:500; text-transform:none; }
.nav-wrap { overflow:hidden; width:0; transition:width .28s ease; flex:none; }
.nav-wrap.dragging { transition:none; }
.nav { display:flex; gap:6px 12px; align-items:center; flex-wrap:nowrap; white-space:nowrap; padding:0 6px 0 4px; width:max-content; }
.nav a, .nav .muted { font:800 15px var(--body); text-transform:uppercase; text-decoration:none; }
.nav a:not(.btn):hover { color:var(--moss); background:var(--ink); border-radius:999px; padding:2px 8px; }
.nav-toggle { flex:none; width:34px; height:34px; padding:0; margin-left:2px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--bg); border:2px solid var(--ink); cursor:grab; touch-action:none; line-height:1; }
.nav-toggle:hover { background:var(--moss); color:var(--on-accent); border-color:var(--ink); }
.nav-toggle svg { width:18px; height:18px; transition:transform .28s ease; }
.top[data-open="1"] .nav-toggle svg { transform:rotate(180deg); }
.nav-toggle.dragging { cursor:grabbing; }
@media (max-width:560px) { .nav .nav-name { display:none; } }

/* Botoes */
button, .btn { font:800 16px var(--body); text-transform:uppercase; cursor:pointer; color:var(--on-accent); background:var(--moss); border:3px solid var(--moss); border-radius:18px; padding:8px 20px; text-decoration:none; display:inline-block; }
.btn { filter:var(--rough); }
button:hover, .btn:hover { background:transparent; color:var(--ink); border-color:var(--ink); }
button.ghost, .btn.ghost { background:transparent; color:var(--ink); border-color:var(--ink); }
button.ghost:hover, .btn.ghost:hover { background:var(--ink); color:var(--bg); }
button.danger { background:transparent; border-color:var(--danger); color:var(--danger); }
button.small, .btn.small { padding:3px 12px; font-size:14px; border-width:2px; border-radius:14px; }
button:disabled { opacity:.5; cursor:default; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline:3px solid var(--moss); outline-offset:2px; }

/* Formularios */
form.stack { display:grid; gap:12px; }
label { display:grid; gap:4px; font-weight:600; }
input[type=text], input[type=email], input[type=password], input[type=number], select { font:inherit; color:var(--ink); background:var(--card); border:2px solid var(--ink); border-radius:12px; padding:9px 12px; width:100%; }
.checks { display:flex; gap:14px; flex-wrap:wrap; border:0; padding:0; margin:0; }
.checks label { display:flex; gap:6px; align-items:center; }
.msg { border:2px solid var(--ink); border-radius:14px; padding:10px 14px; margin:0 0 12px; }
.msg.err { border-color:var(--danger); color:var(--danger); }
.msg.ok { border-color:var(--ok); color:var(--ok); }

/* Paineis e listas */
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.card { background:var(--card); border:3px solid var(--ink); border-radius:20px; padding:16px; min-width:0; }
.card p { margin:0 0 10px; }
.card.off { opacity:.55; }
.tag { display:inline-block; font:800 12px var(--body); text-transform:uppercase; letter-spacing:.08em; padding:2px 10px; border-radius:99px; border:2px solid var(--ink); }
.tag.warn { color:var(--danger); border-color:var(--danger); }
.tabs { display:flex; gap:8px; margin:0 0 16px; flex-wrap:wrap; }
.tabs button { background:transparent; color:var(--ink); border-color:var(--ink); }
.tabs button[aria-selected=true] { background:var(--moss); color:var(--on-accent); border-color:var(--moss); }
.row { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 0; border-top:2px dashed var(--line); }
.row:first-child { border-top:0; }
.row .grow { flex:1 1 220px; min-width:0; overflow-wrap:anywhere; }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.chip { display:inline-flex; gap:6px; align-items:center; font-size:.85rem; border:2px solid var(--ink); border-radius:99px; padding:1px 4px 1px 10px; }
.chip button { padding:0 7px; border-radius:99px; font-size:.85rem; line-height:1.4; border-width:0; }
.linkbox { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85rem; padding:10px; border:2px dashed var(--ink); border-radius:12px; overflow-wrap:anywhere; margin:8px 0; }
.stats { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.stats .card { flex:1 1 150px; }
.stats strong { font:400 2rem var(--display); display:block; }
.audit { font-size:.9rem; }
.audit code { overflow-wrap:anywhere; }
progress { width:100%; max-width:420px; height:12px; margin-top:6px; accent-color:var(--moss); }
footer { max-width:1100px; margin:0 auto; padding:0 16px 32px; color:var(--muted); font-size:.9rem; }

/* Arte dos reinos (duas cores, granulada) */
.art { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:14px; border:2px solid var(--ink); margin:0 0 14px; }
.hub-banner { aspect-ratio:16/6; max-height:340px; object-position:50% 35%; border-width:3px; border-radius:20px; margin-bottom:18px; }

/* Pagina inicial */
.mast { padding:4px 0 6px; }
.mast h1 { font-size:100px; white-space:nowrap; margin:0; line-height:.9; overflow:hidden; letter-spacing:-.005em; }
.mast h1 { filter:var(--rough-lg); }
.mast h1 span { display:inline-block; }
.mast h1 em { font-style:normal; color:var(--moss); }
.sub-bar { display:block; width:100%; margin:14px 0 0; padding:10px 18px; background:var(--ink); color:var(--moss); border-radius:18px; text-align:center; overflow:hidden; font:800 20px var(--body); text-transform:uppercase; }
.sub-bar span { display:inline-block; white-space:nowrap; filter:var(--rough-soft); }
.sub-bar br { display:none; }
@media (max-width:700px) { .sub-bar br { display:inline; } }
.panel-wide { position:relative; isolation:isolate; margin-top:16px; background:rgba(0,0,2,.05); border-radius:26px; padding:clamp(16px,3vw,34px); }
.panel-wide::before { content:""; position:absolute; inset:0; border:5px solid var(--ink); border-radius:26px; filter:var(--rough); pointer-events:none; z-index:-1; }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:18px 36px; align-items:end; margin-bottom:26px; }
.intro h2 { margin:6px 0 0; font-size:clamp(28px,4vw,48px); }
.intro p { margin:0; }
.welcome { font-size:clamp(26px,3vw,36px); margin:0 0 8px; }
.intro .btn { margin-top:16px; font-size:20px; padding:10px 30px; }
@media (max-width:760px) { .intro { grid-template-columns:1fr; } }
.hubs { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.hub-card { display:flex; flex-direction:column; border-radius:22px; padding:22px; min-height:260px; text-decoration:none; transition:transform .15s; border:3px solid transparent; }
.hub-card:hover { transform:translateY(-4px) rotate(-.4deg); }
.hub-card .art { border-color:var(--card-ink, #000002); }
.hub-card .tag { border:0; padding:0; letter-spacing:.12em; align-self:flex-start; }
.hub-card h3 { font-size:clamp(30px,3.4vw,44px); margin:6px 0; overflow-wrap:anywhere; }
.hub-card p { font-size:17px; margin:0 0 12px; }
.hub-card .go { margin-top:auto; font:800 15px var(--body); text-transform:uppercase; }
.hub-card.off { opacity:.55; }
.c-ferramentas { background:#000002; color:#e4e4e4; --card-ink:#86963f; } .c-ferramentas .tag, .c-ferramentas .go { color:#86963f; }
.c-livezinha { background:#14100d; color:#f2e6d6; --card-ink:#d9a577; background-image:radial-gradient(circle at 80% 10%,rgba(217,165,119,.25),transparent 55%); }
.c-livezinha .tag, .c-livezinha .go { color:#d9a577; } .c-livezinha h3 { font-family:var(--serif); font-weight:500; text-transform:none; filter:none; }
.c-rpg { background:#86963f; color:#000002; --card-ink:#000002; }
.c-charlinho { background:var(--bg); color:#000002; border:3px dashed #000002; --card-ink:#000002; }
.hint { margin:22px 4px 0; font-size:.95rem; color:var(--muted); }

/* Pagina inicial em tela de computador: tudo cabe na janela, sem rolar */
@media (min-width:900px) and (min-height:520px) {
  .pagina-inicial main { height:100vh; height:100dvh; max-width:none; padding:12px 16px 84px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
  .pagina-inicial .mast { flex:none; padding:0; }
  .pagina-inicial .sub-bar { margin-top:8px; padding:6px 18px; border-radius:16px; }
  .pagina-inicial .panel-wide { flex:1 1 0; min-height:0; margin-top:0; display:flex; flex-direction:column; padding:clamp(10px,2vh,22px) clamp(14px,1.8vw,28px); border-radius:22px; }
  .pagina-inicial .panel-wide::before { border-width:4px; border-radius:22px; }
  .pagina-inicial .intro { flex:none; margin-bottom:clamp(8px,1.6vh,16px); gap:8px 28px; }
  .pagina-inicial .intro h2 { font-size:clamp(20px,3.6vh,38px); margin-top:2px; }
  .pagina-inicial .intro p { font-size:clamp(14px,1.9vh,18px); line-height:1.3; }
  .pagina-inicial .welcome { font-size:clamp(20px,3vh,30px); margin-bottom:4px; }
  .pagina-inicial .intro .btn { margin-top:8px; font-size:clamp(15px,2.2vh,20px); padding:6px 24px; }
  .pagina-inicial .kicker { font-size:11px; }
  .pagina-inicial .hubs { flex:1 1 0; min-height:0; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
  .pagina-inicial .hub-card { min-height:0; padding:clamp(10px,1.8vh,18px); border-radius:18px; }
  .pagina-inicial .hub-card .art { flex:1 1 0; min-height:40px; height:0; aspect-ratio:auto; margin-bottom:clamp(6px,1.2vh,12px); }
  .pagina-inicial .hub-card h3 { font-size:clamp(20px,3.6vh,38px); margin:2px 0; }
  .pagina-inicial .hub-card p { font-size:clamp(13px,1.8vh,17px); line-height:1.25; margin:0 0 6px; }
  .pagina-inicial .hub-card .go { padding-top:0; font-size:14px; }
  .pagina-inicial .hub-card .tag { font-size:11px; }
}
@media (min-width:900px) and (min-height:520px) and (max-height:700px) {
  .pagina-inicial .hub-card p { display:none; }
}
.checkline { display:flex; gap:8px; align-items:center; }
.stack input[type=number] { max-width:140px; }
.checks input[type=number] { width:100px; }
.checks select { width:auto; }

/* Conta e verificacao de e-mail */
input.codigo { text-align:center; font:700 2rem var(--body); letter-spacing:.5em; padding-left:.9em; }
.secao { margin:0 0 34px; }
.secao h2 { margin-bottom:6px; }

/* Selo Call / Live do Livezinha (pisca): pilula clara com borda em degrade. Usado na pagina inicial e no app. */
.lz-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 12px 3px 9px; border-radius:999px; font:800 13px var(--body); letter-spacing:.04em; text-transform:uppercase; flex:none; border:2px solid; animation:lz-blink 1.3s ease-in-out infinite; }
/* Call = verde da sala de voz; Live = vermelho do "AO VIVO" (mesmas cores do Livezinha) */
.lz-badge.call { background:#1d3a22; border-color:#6bbd6e; color:#c4f2c6; --glow:107,189,110; }
.lz-badge.live { background:#d6314f; border-color:#ff8a9e; color:#fff; --glow:214,49,79; }
.lz-badge.mini { position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); padding:0 6px 0 4px; font-size:9px; gap:3px; border-width:1.5px; }
.lz-badge.mini svg { width:10px; height:10px; }
@keyframes lz-blink { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(var(--glow),.0); } 50% { opacity:.55; box-shadow:0 0 10px 2px rgba(var(--glow),.85); } }
@media (prefers-reduced-motion:reduce) { .lz-badge { animation:none; box-shadow:0 0 8px 1px rgba(var(--glow),.7); } }


.hub-card { position:relative; }
.hub-card .lz-badge { position:absolute; top:14px; right:14px; z-index:2; font-size:15px; }

/* Olhinho de senha */
.pw-wrap { position:relative; display:block; width:100%; }
.pw-wrap input { padding-right:46px; }
.pw-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:8px; background:transparent; color:var(--ink); cursor:pointer; opacity:.75; }
.pw-eye:hover { opacity:1; background:rgba(0,0,0,.08); }

/* Bolinha da call de voz (em cima do menu A Yggdrasil) */
.lz-bubble { position:absolute; right:4px; bottom:calc(100% + 14px); display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.lz-bubble[hidden] { display:none; }
.lzb-btn { position:relative; width:54px; height:54px; padding:0; display:grid; place-items:center; line-height:0; border-radius:50%; background:var(--moss); color:var(--on-accent); border:3px solid var(--ink); box-shadow:0 5px 0 var(--ink); animation:lzb-pulse 2.4s ease-in-out infinite; cursor:pointer; }
.lzb-btn:hover { background:var(--moss); color:var(--on-accent); border-color:var(--ink); transform:translateY(-1px); }
.lzb-btn.off { background:#d6314f; color:#fff; animation:none; }
.lzb-btn svg { display:block; }
.lzb-btn .n { position:absolute; right:-6px; top:-6px; min-width:20px; height:20px; padding:0 5px; box-sizing:border-box; border-radius:10px; background:var(--ink); color:var(--bg); font:800 12px/20px var(--body); text-align:center; }
@keyframes lzb-pulse { 0%,100% { box-shadow:0 5px 0 var(--ink), 0 0 0 0 rgba(107,189,110,.55); } 50% { box-shadow:0 5px 0 var(--ink), 0 0 0 10px rgba(107,189,110,0); } }
.lzb-card { width:min(320px, calc(100vw - 32px)); max-height:min(70vh,520px); display:flex; flex-direction:column; background:#1b1511; color:#f2e6d6; border:2px solid var(--ink); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.45); overflow:hidden; }
.lzb-card[hidden] { display:none; }
.lzb-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:12px 14px 8px; }
.lzb-head a { color:var(--sun, #d9a577); font-size:14px; }
.lzb-list { flex:1; min-height:0; overflow:auto; padding:2px 10px; display:grid; gap:6px; align-content:start; }
.lzb-p { padding:6px 6px 8px; border-radius:12px; background:rgba(242,230,214,.05); outline:2px solid transparent; }
.lzb-p.speaking { outline-color:#6bbd6e; }
.lzb-p .row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.lzb-p .row .lz-av { width:28px; height:28px; font-size:12px; flex:none; display:grid; place-items:center; border-radius:50%; overflow:hidden; color:#14100d; font-weight:800; }
.lzb-p .row .lz-av img { width:100%; height:100%; object-fit:cover; }
.lzb-p .row .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.lzb-p .ic { color:#ff8d9b; display:inline-flex; }
.lzb-p .vol-row .vol-ctl { gap:6px; }
.lzb-p .vol-mute { flex:none; width:26px; height:26px; padding:0; border:0; border-radius:8px; display:grid; place-items:center; line-height:0; background:rgba(242,230,214,.1); color:#f2e6d6; cursor:pointer; }
.lzb-p .vol-range { flex:1; min-width:70px; appearance:none; -webkit-appearance:none; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--moss) var(--fill,100%),rgba(242,230,214,.2) var(--fill,100%)); padding:0; border:0; width:auto; }
.lzb-p .vol-range::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#f2e6d6; border:2px solid var(--moss); cursor:pointer; }
.lzb-p .vol-range::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:#f2e6d6; border:2px solid var(--moss); cursor:pointer; }
.lzb-p .vol-pct { flex:none; width:38px; text-align:right; font-size:12px; color:#cdbfae; }
.lzb-ctl { display:flex; justify-content:center; gap:10px; padding:12px; border-top:1px solid rgba(242,230,214,.12); background:#110d0a; }
.lzb-c { width:46px; height:46px; padding:0; display:grid; place-items:center; line-height:0; border-radius:14px; background:#2c231c; color:#e9dccb; border:0; cursor:pointer; }
.lzb-c:hover { background:#3a2e25; color:#e9dccb; border:0; }
.lzb-c.off { background:rgba(214,49,79,.22); color:#ff8d9b; }
.lzb-c.hang { background:#d6314f; color:#fff; width:58px; }
.lzb-c.hang svg { transform:rotate(135deg); }
.lzb-c svg { display:block; }
.lzb-p .vol-ctl { display:flex; align-items:center; }
.lzb-p .vol-row { display:block; }

/* Player do YouTube (assistir/ouvir juntos): fora da tela quando so toca o som; sobre o espaco do palco no modo video */
.lz-party-player { position:fixed; left:-10000px; top:0; width:200px; height:200px; overflow:hidden; z-index:5; border-radius:12px; background:#000; }
.lz-party-player.shown { z-index:20; }
.lz-party-player iframe { width:100%; height:100%; border:0; display:block; }
.lzb-now { display:flex; align-items:center; gap:6px; padding:8px 12px; border-top:1px solid rgba(242,230,214,.12); }
.lzb-now .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.lzb-now button { display:grid; place-items:center; width:30px; height:30px; padding:0; border-radius:50%; background:#3a2e25; color:var(--ink); }