/* Gato de Cartola — teatro de mágica à meia-noite: breu de veludo, papel de vela, ouro de olho de gato
   e o vinho da cortina. Os nomes das variáveis vêm do tema antigo (feltro, madeira, osso, latão). */
/* IM Fell English (SIL Open Font License), hospedada no próprio site */
@font-face { font-family: 'IM Fell English'; src: url('/fonts/im-fell-english-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IM Fell English'; src: url('/fonts/im-fell-english-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'IM Fell English SC'; src: url('/fonts/im-fell-english-sc-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --feltro: #17111d;   /* breu de veludo: fundo */
  --feltro-2: #211829;
  --feltro-3: #2c2036;
  --madeira: #1d1424;  /* veludo: painéis */
  --madeira-2: #2d2036;
  --madeira-3: #46324f;
  --osso: #ece2d0;     /* papel de vela: texto */
  --osso-2: #b5a9bd;   /* névoa */
  --osso-3: #857a8f;
  --latao: #e2b84a;    /* olho de gato: destaque */
  --latao-2: #f3d27a;
  --cortina: #6b2238;  /* vinho da cortina */
  --lua: #e9dcb8;
  --sangue: #cf5a54;
  --musgo: #8fb59b;
  --ametista: #a08fd6;
  --display: 'IM Fell English', 'Iowan Old Style', Georgia, serif;
  --serif: 'Spectral', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --r-peq: 6px;
  --r-med: 10px;
  --sombra: 0 18px 40px -18px rgb(0 0 0 / .7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--feltro);
  color: var(--osso);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body::before { /* noite: luar no alto, névoa embaixo e um grão de papel antigo */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(ellipse 60% 45% at 82% -8%, rgb(233 220 184 / .07), transparent 70%),
    radial-gradient(ellipse 70% 40% at 10% 105%, rgb(107 34 56 / .22), transparent 70%),
    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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app { position: relative; z-index: 1; min-height: 100%; }
body.desconectado::after {
  content: 'Sem conexão com o servidor. Tentando reconectar…';
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 100;
  background: var(--sangue); color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 13px;
}

a { color: var(--latao-2); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; letter-spacing: 0; }
p { margin: 0 0 .7em; }
:focus-visible { outline: 2px solid var(--latao-2); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--latao); color: var(--madeira); }
[hidden] { display: none !important; }

/* ——— Botões e campos ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 600 14px/1 var(--sans); color: var(--osso); text-decoration: none; cursor: pointer;
  background: var(--madeira-2); border: 1px solid var(--madeira-3); border-radius: var(--r-peq);
  padding: 10px 16px; min-height: 40px; transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn:hover { background: var(--madeira-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn-primario { background: var(--latao); border-color: var(--latao); color: var(--madeira); }
.btn-primario:hover { background: var(--latao-2); border-color: var(--latao-2); }
.btn-fantasma { background: transparent; border-color: transparent; color: var(--osso-2); }
.btn-fantasma:hover { background: rgb(255 255 255 / .06); color: var(--osso); }
.btn-fantasma[aria-pressed="true"] { color: var(--latao-2); }
.btn-perigo { background: var(--sangue); border-color: var(--sangue); color: #fff; }
.btn-grande { padding: 14px 22px; font-size: 15px; min-height: 48px; }
.btn-pequeno { padding: 6px 10px; min-height: 30px; font-size: 13px; }
.btn-icone {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-peq);
  background: transparent; border: 0; color: var(--osso-2); cursor: pointer; font-size: 16px; list-style: none;
}
.btn-icone:hover { background: rgb(255 255 255 / .07); color: var(--osso); }
.btn-icone.pequeno { width: 24px; height: 24px; font-size: 12px; }
summary.btn-icone::-webkit-details-marker, summary.btn::-webkit-details-marker { display: none; }
summary { cursor: pointer; }
summary.btn { list-style: none; }

.campo {
  width: 100%; font: 400 15px/1.4 var(--sans); color: var(--osso);
  background: rgb(0 0 0 / .25); border: 1px solid var(--madeira-3); border-radius: var(--r-peq);
  padding: 10px 12px; transition: border-color .15s;
}
.campo:focus { border-color: var(--latao); outline: none; }
.campo::placeholder { color: var(--osso-3); }
textarea.campo { resize: vertical; }
.campo.mono, .editor-compendio { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 13px; }
select.campo { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--osso-2) 50%), linear-gradient(135deg, var(--osso-2) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
select.campo option { background: var(--madeira); }

.form { display: grid; gap: 16px; }
.rotulo { display: grid; gap: 6px; font-weight: 600; font-size: 13px; color: var(--osso-2); }
.rotulo small { font-weight: 400; }
.ajuda { color: var(--osso-3); font-size: 13px; margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
legend { font-weight: 600; font-size: 13px; color: var(--osso-2); padding: 0; margin-bottom: 8px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; padding: 12px; border-radius: var(--r-med); background: rgb(0 0 0 / .2); }
.check input { margin-top: 4px; accent-color: var(--latao); width: 18px; height: 18px; flex: none; }
.check span { display: grid; gap: 4px; }
.check small { color: var(--osso-3); line-height: 1.5; }
details > summary { color: var(--osso-2); font-weight: 600; font-size: 13px; }
details[open] > summary { margin-bottom: 12px; }
.limites { display: grid; gap: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 13px/1 var(--sans); color: var(--osso-2); background: transparent; cursor: pointer;
  border: 1px solid var(--madeira-3); border-radius: 999px; padding: 8px 13px;
}
.chip:hover { color: var(--osso); border-color: var(--osso-3); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--latao); border-color: var(--latao); color: var(--madeira); font-weight: 600; }
.chips-pequenos .chip { padding: 6px 10px; font-size: 12px; }

.segmentado { display: flex; background: rgb(0 0 0 / .25); border: 1px solid var(--madeira-3); border-radius: var(--r-peq); padding: 3px; }
.segmentado label { flex: 1; cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado span { display: block; text-align: center; padding: 8px 6px; border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--osso-2); }
.segmentado input:checked + span { background: var(--madeira-3); color: var(--osso); }
.segmentado input:focus-visible + span { outline: 2px solid var(--latao-2); }

.barra { height: 6px; background: rgb(0 0 0 / .35); border-radius: 99px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--latao); border-radius: inherit; transition: width .6s ease; }

/* ——— Modal e avisos ——— */
.modal-fundo { position: fixed; inset: 0; z-index: 50; background: rgb(10 7 13 / .72); display: grid; place-items: center; padding: 20px; animation: fade .18s ease; backdrop-filter: blur(2px); }
.modal-fundo.saindo { animation: fade .18s ease reverse forwards; }
.modal {
  width: 100%; max-height: calc(100dvh - 40px); display: flex; flex-direction: column;
  background: var(--madeira); border: 1px solid var(--madeira-3); border-radius: 14px; box-shadow: var(--sombra);
  animation: subir .22s cubic-bezier(.2, .9, .3, 1.1);
}
.modal-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px 24px; }
.modal-topo h2 { font-size: 22px; }
.modal-corpo { padding: 12px 24px 20px; overflow: auto; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--madeira-2); }
@keyframes fade { from { opacity: 0; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px) scale(.98); } }

#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 8px; }
.toast { background: var(--madeira-2); border: 1px solid var(--madeira-3); border-left: 4px solid var(--latao); padding: 12px 16px; border-radius: var(--r-peq); box-shadow: var(--sombra); max-width: 380px; animation: subir .2s ease; }
.toast-erro { border-left-color: var(--sangue); }
.toast.saindo { opacity: 0; transform: translateX(20px); transition: .3s; }

.menu { position: relative; }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; display: grid; padding: 6px;
  background: var(--madeira); border: 1px solid var(--madeira-3); border-radius: var(--r-med); box-shadow: var(--sombra);
}
.menu-lista > * { all: unset; display: block; padding: 10px 12px; border-radius: var(--r-peq); cursor: pointer; font-size: 14px; color: var(--osso); }
.menu-lista > *:hover, .menu-lista > *:focus-visible { background: var(--madeira-2); }
.menu-lista .perigo { color: #f08b7c; }

/* ——— Lobby ——— */
.lobby, .pagina-livro { max-width: 1120px; margin: 0 auto; padding: 0 28px 60px; }
.topo-lobby { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
.marca { display: inline-flex; align-items: center; gap: 11px; color: var(--osso); text-decoration: none; font: 400 23px/1 'IM Fell English SC', var(--display); letter-spacing: .02em; }
.marca img { border-radius: 9px; box-shadow: 0 0 0 1px rgb(233 220 184 / .12); }
.topo-acoes { display: flex; gap: 6px; }

.heroi { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 40px; align-items: center; padding: 48px 0 56px; }
.heroi h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.06; letter-spacing: -.02em; font-weight: 600; max-width: 15ch; }
.heroi-texto > p { font-size: 18px; color: var(--osso-2); max-width: 54ch; margin: 22px 0 28px; }
.heroi-acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.heroi-dados svg { width: 100%; max-width: 340px; display: block; margin-left: auto; overflow: visible; }
.deco-d20 polygon:first-child { fill: var(--latao); stroke: var(--madeira); stroke-width: 3; stroke-linejoin: round; }
.deco-d20 .aresta { fill: none; stroke: rgb(29 20 36 / .55); stroke-width: 2.5; }
.deco-d20 text { font: 700 34px var(--serif); fill: var(--madeira); }
.deco-d6 rect { fill: var(--osso); stroke: var(--madeira); stroke-width: 3; }
.deco-d6 circle { fill: var(--sangue); }
.heroi-dados .deco-d20 { animation: pousar 1.1s cubic-bezier(.2, 1.4, .4, 1) both; transform-box: fill-box; }
@keyframes pousar { from { transform: translate(260px, -120px) rotate(260deg); opacity: 0; } }

.aviso-config { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 24px 28px; margin-bottom: 40px; border-radius: 14px; background: var(--madeira); border: 1px solid var(--latao); }
.aviso-config h2 { font-size: 22px; margin-bottom: 6px; }
.aviso-config p { color: var(--osso-2); margin: 0; max-width: 62ch; }

.bloco { margin-bottom: 48px; }
.bloco-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgb(236 226 208 / .12); margin-bottom: 4px; }
.bloco-topo h2 { font-size: 26px; }
.bloco-ajuda { color: var(--osso-3); font-size: 13px; margin: 10px 0 8px; }
.lista { display: grid; }
.vazio { padding: 28px 0; display: grid; gap: 14px; justify-items: start; color: var(--osso-2); max-width: 60ch; }

.linha-mesa, .linha-livro { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid rgb(236 226 208 / .08); }
.linha-mesa-principal { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.linha-mesa-principal:hover h3 { color: var(--latao-2); }
.linha-mesa h3, .linha-livro h3 { font-size: 20px; margin-bottom: 4px; }
.linha-sub { color: var(--osso-2); margin: 0; font-size: 14px; }
.linha-meta { color: var(--osso-3); margin: 4px 0 0; font-size: 13px; }
.sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--osso-3); margin: 0 10px; vertical-align: middle; }
.linha-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.quando { color: var(--osso-3); font-size: 13px; margin-right: 8px; }

.livro-lombada {
  flex: none; width: 46px; height: 62px; border-radius: 3px 6px 6px 3px; display: grid; place-items: end center; padding-bottom: 8px;
  background: linear-gradient(90deg, var(--madeira-3) 0 6px, var(--madeira-2) 6px); border: 1px solid var(--madeira-3);
  font: 700 10px/1 var(--sans); color: var(--latao); text-transform: lowercase;
}
.status-pronto .livro-lombada { background: linear-gradient(90deg, #8a6a2c 0 6px, var(--latao) 6px); color: var(--madeira); border-color: var(--latao); }
.livro-info { flex: 1; min-width: 0; }
.livro-estado { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; margin-top: 8px; max-width: 560px; font-size: 13px; }
.estado-rotulo { font-weight: 600; color: var(--latao-2); }
.status-erro .estado-rotulo { color: #f08b7c; }
.status-pronto .estado-rotulo { color: var(--musgo); }
.livro-estado .barra { min-width: 120px; }
.estado-msg { grid-column: 1 / -1; color: var(--osso-3); }
.estado-uso { grid-column: 1 / -1; color: var(--osso-3); font-size: 12px; }

.rodape-lobby { color: var(--osso-3); font-size: 13px; border-top: 1px solid rgb(236 226 208 / .08); padding-top: 20px; }
.convite-rede strong { color: var(--osso); font-weight: 600; }

.opcoes-livros { display: grid; gap: 8px; }
.opcao-livro { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: var(--r-peq); background: rgb(0 0 0 / .2); cursor: pointer; }
.opcao-livro input { accent-color: var(--latao); width: 18px; height: 18px; }
.opcao-livro span { display: grid; }
.opcao-livro small { color: var(--osso-3); }
.opcao-livro.desativada { opacity: .5; cursor: not-allowed; }
.linha-teste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.resultado-teste { margin: 0; font-size: 13px; color: var(--osso-2); }
.resultado-teste.ok { color: var(--musgo); }
.resultado-teste.erro { color: #f08b7c; }

/* ——— Página do livro ——— */
.livro-cabeca { padding: 20px 0 30px; max-width: 70ch; }
.livro-cabeca h1 { font-size: 40px; margin-bottom: 10px; }
.livro-cabeca p { color: var(--osso-2); }
.livro-grade { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.livro-grade > aside { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow: auto; }
.sumario { display: grid; gap: 2px; font-size: 13px; }
.sumario a { color: var(--osso-2); text-decoration: none; padding: 5px 8px; border-radius: 4px; }
.sumario a:hover { background: rgb(255 255 255 / .05); color: var(--osso); }
.sumario a.sub { padding-left: 20px; font-size: 12px; }
.editor-compendio { min-height: 70vh; }
.painel-busca h2 { font-size: 18px; margin-bottom: 10px; }
.resultados-busca { display: grid; gap: 10px; margin-top: 12px; }
.trecho { background: rgb(0 0 0 / .2); border-radius: var(--r-peq); padding: 10px 12px; font-size: 13px; }
.trecho p { margin: 8px 0 0; white-space: pre-wrap; color: var(--osso-2); }
.trecho-ref { font-weight: 700; color: var(--latao-2); font-size: 12px; display: inline-flex; gap: 8px; }
.trecho-ref span { color: var(--osso-3); font-weight: 500; }

/* ——— Prosa (narração e compêndio) ——— */
.prosa { font-family: var(--serif); font-size: 18px; line-height: 1.68; color: var(--osso); }
.prosa p { margin: 0 0 .85em; }
.prosa p:last-child { margin-bottom: 0; }
.prosa strong { color: #f6ecd5; font-weight: 600; }
.prosa em { color: #ddd2b9; }
.prosa h2, .prosa h3, .prosa h4, .prosa h5 { margin: 1.2em 0 .5em; }
.prosa h2 { font-size: 1.6em; } .prosa h3 { font-size: 1.3em; } .prosa h4 { font-size: 1.1em; }
.prosa ul, .prosa ol { margin: 0 0 .9em; padding-left: 1.3em; }
.prosa li { margin: .25em 0; }
.prosa li::marker { color: var(--latao); }
.prosa blockquote { margin: 0 0 .9em; padding: .2em 0 .2em 1em; border-left: 3px solid var(--latao); color: var(--osso-2); font-style: italic; }
.prosa hr { border: 0; height: 1px; background: rgb(236 226 208 / .15); margin: 1.4em 0; }
.prosa code { font-family: ui-monospace, Consolas, monospace; font-size: .85em; background: rgb(0 0 0 / .3); padding: 1px 5px; border-radius: 4px; }
.prosa pre { background: rgb(0 0 0 / .3); padding: 12px; border-radius: var(--r-peq); overflow: auto; font-size: 13px; }
.prosa .tabela { overflow-x: auto; margin: 0 0 1em; }
.prosa table { border-collapse: collapse; font-family: var(--sans); font-size: 14px; min-width: 60%; }
.prosa th, .prosa td { border-bottom: 1px solid rgb(236 226 208 / .12); padding: 6px 12px 6px 0; text-align: left; vertical-align: top; }
.prosa th { color: var(--latao-2); font-weight: 600; }
.prosa .pag { font: 600 .7em/1 var(--sans); color: var(--osso-3); background: rgb(0 0 0 / .25); padding: 2px 5px; border-radius: 3px; vertical-align: .15em; }
.prosa-pequena { font-size: 15px; line-height: 1.6; }
.compendio { max-width: 72ch; }
.compendio > h2:first-child { display: none; }
.livro-grade.sem-busca { grid-template-columns: 220px minmax(0, 1fr); }

/* ——— Mesa ——— */
.mesa {
  --amb: var(--feltro);
  height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); overflow: hidden;
  background: radial-gradient(ellipse 90% 70% at 50% 40%, color-mix(in srgb, var(--amb) 70%, transparent), transparent), var(--feltro);
  transition: background 1.2s ease;
}
.amb-taverna { --amb: #3a2a16; } .amb-cidade { --amb: #23323a; } .amb-floresta { --amb: #1b3d1f; }
.amb-masmorra, .amb-caverna { --amb: #1a1f1e; } .amb-montanha { --amb: #2a3236; } .amb-mar { --amb: #11314a; }
.amb-deserto { --amb: #4a3518; } .amb-neve { --amb: #2c3e4c; } .amb-castelo { --amb: #2f2a33; }
.amb-templo { --amb: #3b3220; } .amb-batalha { --amb: #47201b; } .amb-misterio { --amb: #1c2238; }
.amb-terror { --amb: #2b0f12; } .amb-magia { --amb: #2c2148; } .amb-futurista { --amb: #0f3440; } .amb-calmo { --amb: #211829; }

.mesa-topo {
  /* sem overflow: hidden aqui, senão os menus do topo (Mesa, som, idioma) ficam cortados; quem recorta é o fundo */
  position: relative; isolation: isolate; z-index: 30;
  display: flex; align-items: center; gap: 16px; padding: 10px 16px; min-height: 60px;
  background: var(--madeira); border-bottom: 1px solid var(--madeira-3); box-shadow: 0 6px 18px -10px rgb(0 0 0 / .7);
}
.voltar { display: grid; place-items: center; flex: none; border-radius: 8px; }
.mesa-titulos { min-width: 0; flex: 1; }
.mesa-nome { font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mesa-cena { display: flex; gap: 12px; font-size: 13px; color: var(--osso-2); white-space: nowrap; overflow: hidden; }
.cena-titulo { color: var(--latao-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.cena-local { color: var(--osso-3); }
.presenca { display: flex; flex: none; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-left: -6px;
  background: var(--madeira-3); color: var(--osso-3); font: 700 11px/1 var(--sans);
  border: 2px solid var(--madeira); box-shadow: inset 0 0 0 2px rgb(0 0 0 / .15);
}
.avatar.online { background: var(--cor); color: var(--madeira); }
.mesa-acoes { display: flex; align-items: center; gap: 2px; flex: none; }
.so-movel { display: none; }
.menu-lista > .so-movel { display: none; }

.mesa-corpo { display: grid; grid-template-columns: 270px minmax(0, 1fr) 340px; min-height: 0; }
.mesa-grupo, .mesa-painel { background: rgb(29 20 36 / .55); overflow: auto; min-height: 0; }
.mesa-grupo { border-right: 1px solid rgb(0 0 0 / .35); padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; }
.mesa-painel { border-left: 1px solid rgb(0 0 0 / .35); display: flex; flex-direction: column; }
.painel-titulo { font-size: 17px; padding: 0 4px; }

.ficha-mini {
  all: unset; box-sizing: border-box; display: grid; gap: 8px; cursor: pointer; padding: 12px;
  border-radius: var(--r-med); background: var(--madeira); border: 1px solid var(--madeira-2); border-left: 3px solid var(--cor);
  transition: border-color .15s, transform .15s;
}
.ficha-mini:hover { border-color: var(--madeira-3); border-left-color: var(--cor); }
.ficha-mini:focus-visible { outline: 2px solid var(--latao-2); }
.ficha-mini.minha { background: var(--madeira-2); }
.ficha-mini.morto { opacity: .5; filter: grayscale(.8); }
.ficha-mini-topo { display: flex; gap: 10px; align-items: center; }
.ficha-token { width: 34px; height: 34px; border-radius: 50%; background: var(--cor); color: var(--madeira); display: grid; place-items: center; font: 700 12px/1 var(--sans); flex: none; }
.ficha-nomes { display: grid; min-width: 0; }
.ficha-nomes strong { font: 600 16px/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-nomes small { color: var(--osso-3); font-size: 12px; }
.ficha-conceito { margin: 0; color: var(--osso-2); font-size: 12.5px; line-height: 1.4; }
.recurso { display: grid; gap: 3px; font-size: 12px; }
.recurso-topo { display: flex; justify-content: space-between; color: var(--osso-2); }
.recurso-topo span:last-child { font-variant-numeric: tabular-nums; color: var(--osso); font-weight: 600; }
.recurso-barra { height: 5px; background: rgb(0 0 0 / .4); border-radius: 99px; overflow: hidden; }
.recurso-barra span { display: block; height: 100%; background: var(--ametista); border-radius: inherit; transition: width .5s ease; }
.recurso.hp .recurso-barra span { background: var(--musgo); }
.recurso.hp.critico .recurso-barra span { background: var(--sangue); }
.condicoes { display: flex; flex-wrap: wrap; gap: 4px; }
.condicao { font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 99px; background: rgb(207 90 84 / .2); color: #f2a598; }
.premissa { margin-top: auto; padding: 12px 4px 0; border-top: 1px solid rgb(236 226 208 / .08); }
.premissa h3 { font-size: 14px; color: var(--osso-2); margin-bottom: 6px; }
.premissa p { font: italic 14px/1.5 var(--serif); color: var(--osso-2); margin: 0; }

/* centro */
.mesa-centro { display: flex; flex-direction: column; min-height: 0; position: relative; }
.narrativa-rolagem { flex: 1; overflow-y: auto; scroll-behavior: auto; }
.narrativa-coluna { max-width: 760px; margin: 0 auto; padding: 32px 28px 20px; }
.carregar-antes { display: flex; margin: 0 auto 20px; }
.narrativa { display: flex; flex-direction: column; gap: 18px; }

.msg-mestre { animation: aparecer .3s ease; }
.msg-mestre .prosa { max-width: 68ch; }
.cursor { display: inline-block; width: .5em; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--latao); animation: piscar 1s steps(2) infinite; border-radius: 1px; }
@keyframes piscar { 50% { opacity: 0; } }
@keyframes aparecer { from { opacity: 0; } }

.msg-jogador { align-self: flex-end; max-width: min(560px, 86%); padding: 10px 14px; border-radius: 12px 12px 3px 12px; background: rgb(29 20 36 / .75); border: 1px solid var(--madeira-2); border-right: 3px solid var(--cor); }
.msg-jogador:not(.minha) { align-self: flex-start; border-radius: 12px 12px 12px 3px; border-right: 1px solid var(--madeira-2); border-left: 3px solid var(--cor); }
.msg-autor { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--osso-3); margin-bottom: 3px; flex-wrap: wrap; }
.msg-autor strong { color: var(--cor); font-size: 13px; }
.msg-jogador p { margin: 0; white-space: pre-wrap; }
.msg-jogador.sub-fala p { font-family: var(--serif); font-size: 17px; font-style: italic; }
.msg-jogador.sub-ooc { background: transparent; border-style: dashed; }
.msg-jogador.sub-ooc p { color: var(--osso-2); font-size: 14px; }
.selo { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: rgb(255 255 255 / .07); color: var(--osso-2); }

.msg-sistema { align-self: center; font-size: 12.5px; color: var(--osso-3); text-align: center; max-width: 90%; }
.msg-sistema strong { color: var(--osso-2); }
.msg-sistema span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--osso-3); margin-right: 8px; vertical-align: middle; }
.icone-ficha span::before { background: var(--musgo); }
.icone-diario span::before { background: var(--latao); }
.icone-combate span::before { background: var(--sangue); }
.icone-entrou span::before { background: var(--ametista); }

.msg-cena { padding: 28px 0 6px; animation: aparecer .8s ease; }
.msg-cena h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.015em; line-height: 1.1; }
.msg-cena p { margin: 8px 0 0; color: var(--osso-3); font-size: 14px; }
.msg-cena::after { content: ''; display: block; width: 64px; height: 3px; background: var(--latao); margin-top: 16px; border-radius: 2px; }
.msg-cena.abertura h2 { font-size: clamp(32px, 4.6vw, 48px); }
/* ilustrações de cena */
.mesa-fundo-cena { position: absolute; inset: 0; z-index: -1; opacity: .38; pointer-events: none; overflow: hidden; }
.mesa-fundo-cena::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--madeira) 0%, rgb(0 0 0 / .25) 45%, var(--madeira) 100%); }
.mesa-fundo-cena svg, .cena-arte svg { width: 100%; height: 100%; display: block; }
.msg-cena.com-arte { padding-top: 18px; }
.cena-arte { aspect-ratio: 10 / 3; border-radius: var(--r-med); overflow: hidden; margin-bottom: 16px; box-shadow: 0 14px 30px -18px rgb(0 0 0 / .9); border: 1px solid rgb(255 255 255 / .06); }
.arte-chama { transform-box: fill-box; transform-origin: 50% 100%; animation: chama 1.4s ease-in-out infinite alternate; }
.arte-brilho { animation: brilhar 2.6s ease-in-out infinite alternate; }
@keyframes chama { from { transform: scaleY(.9) scaleX(1.04); } to { transform: scaleY(1.08) scaleX(.95); } }
@keyframes brilhar { from { opacity: .2; } to { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .arte-chama, .arte-brilho { animation: none; } }
.msg-cena .cena-premissa { font: italic 18px/1.55 var(--serif); color: var(--osso-2); max-width: 60ch; margin-top: 14px; }

.msg-erro { border: 1px solid var(--sangue); background: rgb(207 90 84 / .12); border-radius: var(--r-med); padding: 12px 16px; display: flex; gap: 14px; align-items: center; justify-content: space-between; }
.msg-erro p { margin: 0; color: #f6c0b6; }

/* dados */
.msg-dados { align-self: center; width: min(460px, 100%); }
.rolagem { background: var(--madeira); border: 1px solid var(--madeira-3); border-radius: 14px; padding: 12px 16px 10px; box-shadow: var(--sombra); }
.rolagem.secreta { background: rgb(29 20 36 / .5); border-style: dashed; box-shadow: none; padding: 10px 16px; }
.rolagem.critico { border-color: var(--latao); box-shadow: 0 0 0 1px var(--latao), 0 0 28px -6px rgb(226 184 74 / .55); }
.rolagem.desastre { border-color: var(--sangue); }
.rolagem-cabeca { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.rolagem-quem { font-weight: 700; color: var(--osso); }
.rolagem-motivo { color: var(--osso-2); flex: 1; }
.rolagem-cd { font-size: 12px; font-weight: 700; color: var(--latao-2); background: rgb(226 184 74 / .12); padding: 2px 8px; border-radius: 99px; }
.rolagem-corpo { display: flex; align-items: center; gap: 14px; margin: 8px 0 4px; }
.rolagem-dados { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; }
.rolagem-mod { font: 600 18px/1 var(--sans); color: var(--osso-2); margin-left: 2px; }
.rolagem-total { font: 700 40px/1 var(--serif); color: var(--osso); font-variant-numeric: tabular-nums; display: grid; justify-items: end; }
.rolagem-total small { font: 700 11px/1 var(--sans); color: var(--latao-2); margin-top: 4px; }
.rolagem.desastre .rolagem-total small { color: #f08b7c; }
.rolagem.critico .rolagem-total { color: var(--latao-2); }
.rolagem-expr { font-size: 11.5px; color: var(--osso-3); }

.dado { width: 44px; height: 44px; overflow: visible; }
.dado .face { fill: var(--osso); stroke: var(--madeira); stroke-width: 4; stroke-linejoin: round; }
.dado .aresta { fill: none; stroke: rgb(29 20 36 / .3); stroke-width: 3; stroke-linejoin: round; }
.dado text { font: 700 36px var(--serif); fill: var(--madeira); }
.dado.maximo .face { fill: var(--latao); }
.dado.minimo .face { fill: var(--sangue); }
.dado.minimo text { fill: #fff; }
.dado.descartado { opacity: .3; }
.dado.sucesso .face { fill: var(--musgo); }
.dado.falhou { opacity: .55; }
.dado.explosao { filter: drop-shadow(0 0 4px var(--latao)); }
.rolando .dado { animation: tombar .75s cubic-bezier(.25, 1.3, .5, 1) both; animation-delay: calc(var(--i, 0) * 70ms); transform-origin: center; transform-box: fill-box; }
.rolando .rolagem-total { animation: aparecer .3s ease .55s both; }
@keyframes tombar {
  0% { transform: translate(-40px, -26px) rotate(-320deg) scale(.6); opacity: 0; }
  60% { transform: translate(3px, 2px) rotate(16deg) scale(1.06); opacity: 1; }
  100% { transform: none; }
}

/* pedidos de teste */
.msg-pedido { align-self: center; width: min(460px, 100%); text-align: left; }
.pedido-chamada { font-size: 12px; color: var(--osso-3); margin: 0 0 6px; }
.msg-pedido.meu .pedido-chamada { color: var(--latao-2); font-weight: 600; }
.pedido { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-med); border: 1px dashed var(--madeira-3); background: rgb(29 20 36 / .5); }
.pedido-texto { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.pedido-texto > span:not(.rolagem-cd):not(.rolagem-expr) { color: var(--osso-2); }
.pedido-acao { display: flex; gap: 8px; }
.expr-pedido, .expr-livre { font: 600 14px/1 ui-monospace, Consolas, monospace; color: var(--osso); background: rgb(0 0 0 / .3); border: 1px solid var(--madeira-3); border-radius: var(--r-peq); padding: 8px 10px; min-width: 0; }
.expr-pedido:focus, .expr-livre:focus { border-color: var(--latao); outline: none; }

.pendentes { max-width: 760px; width: 100%; margin: 0 auto; padding: 0 28px; display: grid; gap: 8px; }
.pendentes:empty { display: none; }
.pendentes .pedido.destaque { border: 1px solid var(--latao); background: var(--madeira); animation: chamar 2.4s ease-in-out infinite; }
@keyframes chamar { 50% { box-shadow: 0 0 0 4px rgb(226 184 74 / .18); } }
.aguardando { font-size: 13px; color: var(--osso-3); display: flex; gap: 10px; align-items: center; justify-content: space-between; }

.status-mestre { max-width: 760px; width: 100%; margin: 0 auto; padding: 4px 28px 8px; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--osso-2); }
.status-mestre .digitando { color: var(--osso-3); margin-left: auto; }
.pena { width: 10px; height: 10px; border-radius: 50%; background: var(--latao); animation: pulsar 1.2s ease-in-out infinite; flex: none; }
@keyframes pulsar { 50% { transform: scale(.55); opacity: .5; } }
.ir-fim { position: absolute; left: 50%; transform: translateX(-50%); bottom: 150px; z-index: 5; font: 600 13px/1 var(--sans); background: var(--latao); color: var(--madeira); border: 0; border-radius: 99px; padding: 9px 16px; cursor: pointer; box-shadow: var(--sombra); }

.rodada { max-width: 760px; width: 100%; margin: 0 auto; padding: 0 28px 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--osso-2); }
.marca-acao { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--madeira-3); color: var(--osso-3); }
.marca-acao.feita { background: var(--musgo); border-color: var(--musgo); color: var(--madeira); font-weight: 600; }

/* compositor */
.compositor { max-width: 760px; width: 100%; margin: 0 auto; padding: 10px 28px 18px; }
.compositor-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.modos { display: flex; gap: 2px; background: rgb(0 0 0 / .3); padding: 3px; border-radius: var(--r-peq); }
.modo { font: 600 12.5px/1 var(--sans); color: var(--osso-3); background: transparent; border: 0; padding: 8px 12px; border-radius: 4px; cursor: pointer; }
.modo:hover { color: var(--osso); }
.modo[aria-selected="true"] { background: var(--madeira-3); color: var(--osso); }
.bandeja { display: flex; gap: 2px; align-items: center; }
.dado-btn { all: unset; cursor: pointer; padding: 3px; border-radius: 6px; display: grid; }
.dado-btn .dado { width: 28px; height: 28px; transition: transform .2s; }
.dado-btn .dado text { font-size: 34px; }
.dado-btn:hover .dado { transform: rotate(-14deg) scale(1.1); }
.dado-btn:focus-visible { outline: 2px solid var(--latao-2); }
.expr-livre { width: 82px; margin-left: 6px; padding: 7px 8px; font-size: 13px; }
.compositor-linha { display: flex; gap: 8px; align-items: flex-end; background: var(--madeira); border: 1px solid var(--madeira-3); border-radius: 14px; padding: 8px 8px 8px 14px; transition: border-color .15s; }
.compositor-linha:focus-within { border-color: var(--latao); }
.compositor[data-modo="ooc"] .compositor-linha { border-style: dashed; }
.entrada { flex: 1; resize: none; border: 0; background: transparent; color: var(--osso); font: 400 16px/1.5 var(--sans); padding: 6px 0; max-height: 220px; min-height: 26px; }
.compositor[data-modo="fala"] .entrada { font: italic 17px/1.5 var(--serif); }
.entrada:focus { outline: none; }
.entrada::placeholder { color: var(--osso-3); }
.mic { width: 40px; height: 40px; }
.mic svg { width: 20px; height: 20px; }
.mic.gravando { color: var(--sangue); animation: pulsar 1s infinite; }
.enviar { min-height: 40px; border-radius: 10px; }

/* painel direito */
.abas { display: flex; gap: 2px; padding: 12px 12px 0; border-bottom: 1px solid rgb(0 0 0 / .3); position: sticky; top: 0; background: var(--madeira); z-index: 2; }
.aba { font: 600 13px/1 var(--sans); color: var(--osso-3); background: transparent; border: 0; padding: 10px 10px 12px; cursor: pointer; border-bottom: 2px solid transparent; }
.aba:hover { color: var(--osso); }
.aba[aria-selected="true"] { color: var(--osso); border-bottom-color: var(--latao); }
.painel-conteudo { padding: 16px; overflow: auto; flex: 1; }
.painel-conteudo > div > * + * { margin-top: 14px; }
.diario-grupo h3 { font-size: 15px; color: var(--osso-2); margin: 18px 0 8px; }
.diario-item { padding: 10px 0; border-bottom: 1px solid rgb(236 226 208 / .06); }
.diario-topo { display: flex; gap: 8px; align-items: center; }
.diario-topo strong { font: 600 15px/1.3 var(--serif); flex: 1; }
.diario-item p { margin: 4px 0 0; font-size: 13.5px; color: var(--osso-2); line-height: 1.5; }
.selo-concluida, .selo-aliado { background: rgb(134 174 126 / .2); color: var(--musgo); }
.selo-hostil, .selo-morto, .selo-falhou { background: rgb(207 90 84 / .2); color: #f2a598; }
.selo-ativa { background: rgb(226 184 74 / .16); color: var(--latao-2); }

.combate-rodada { font: 600 18px/1 var(--serif); margin: 0 0 12px; }
.iniciativa { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.combatente { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--r-med); background: var(--madeira); border: 1px solid var(--madeira-2); }
.combatente.vez { border-color: var(--latao); box-shadow: inset 3px 0 0 var(--latao); }
.combatente.tipo-inimigo .ini { background: rgb(207 90 84 / .25); color: #f2a598; }
.combatente.derrotado { opacity: .4; text-decoration: line-through; }
.ini { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--madeira-3); font: 700 15px/1 var(--serif); flex: none; }
.combatente-info { flex: 1; display: grid; gap: 5px; min-width: 0; }
.combatente-info strong { font-size: 14px; }
.links-compendio { display: flex; flex-wrap: wrap; gap: 6px; }
.cronica h3 { font-size: 15px; color: var(--osso-2); margin-bottom: 8px; }
.cronica section + section { margin-top: 22px; }
.uso p { font-size: 13px; color: var(--osso-3); }

/* ficha completa */
.ficha { display: grid; gap: 18px; }
.ficha-cabeca .ficha-conceito { font: italic 18px/1.4 var(--serif); color: var(--osso-2); margin: 0; }
.ficha-linha { margin: 6px 0 0; font-size: 13px; color: var(--osso-3); }
.ficha-recursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.ficha-recursos .recurso { font-size: 13px; }
.ficha-secao h3 { font-size: 15px; color: var(--latao-2); margin-bottom: 8px; }
.atributos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.atributo { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--r-med); background: rgb(0 0 0 / .22); }
.atributo span { font-size: 12px; color: var(--osso-3); text-align: center; }
.atributo strong { font: 700 22px/1 var(--serif); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--osso-3); }
.kv dd { margin: 0; }
.lista-ficha { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: 14px; }
.lista-ficha li::marker { color: var(--latao); }
.link-convite { display: flex; gap: 10px; align-items: center; background: rgb(0 0 0 / .25); border-radius: var(--r-peq); padding: 8px 8px 8px 12px; }
.link-convite code { flex: 1; font-size: 14px; color: var(--latao-2); overflow-wrap: anywhere; }

/* ——— Responsivo ——— */
@media (max-width: 1180px) {
  .mesa-corpo { grid-template-columns: 240px minmax(0, 1fr) 300px; }
  .livro-grade { grid-template-columns: 200px minmax(0, 1fr); }
  .painel-busca { grid-column: 1 / -1; position: static !important; }
}
@media (max-width: 960px) {
  .so-movel { display: inline-flex; }
  .mesa-corpo { grid-template-columns: minmax(0, 1fr); position: relative; }
  .mesa-grupo, .mesa-painel {
    position: absolute; top: 0; bottom: 0; z-index: 10; width: min(340px, 88vw); background: var(--madeira);
    transition: transform .25s ease; box-shadow: var(--sombra);
  }
  .mesa-grupo { left: 0; transform: translateX(-102%); }
  .mesa-painel { right: 0; transform: translateX(102%); }
  .mesa.ver-grupo .mesa-grupo, .mesa.ver-painel .mesa-painel { transform: none; }
  .heroi { grid-template-columns: 1fr; padding-top: 20px; }
  .heroi-dados { display: none; }
  .livro-grade { grid-template-columns: 1fr; }
  .livro-grade > aside:first-child { display: none; }
}
@media (max-width: 640px) {
  .lobby, .pagina-livro { padding: 0 16px 40px; }
  .grade-2 { grid-template-columns: 1fr; }
  .linha-mesa, .linha-livro { flex-wrap: wrap; }
  .linha-acoes { width: 100%; justify-content: flex-end; }
  .aviso-config { flex-direction: column; align-items: flex-start; }
  .mesa-topo { gap: 8px; padding: 8px 10px; }
  .presenca, .mesa-cena .cena-local, .so-desktop { display: none !important; }
  .menu-lista > .so-movel { display: block; }
  .mesa-nome { font-size: 16px; }
  .mesa-acoes .btn { padding: 8px; font-size: 13px; }
  .narrativa-coluna, .compositor, .pendentes, .status-mestre, .rodada { padding-left: 14px; padding-right: 14px; }
  .prosa { font-size: 17px; }
  .bandeja .dado-btn:nth-child(n+5):not(:nth-child(6)) { display: none; }
  .modal-corpo { padding: 10px 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ——— Modo online: login, conta, legal, administração ——— */
.login { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 440px); gap: 56px; align-items: center; max-width: 1120px; margin: 0 auto; padding: 40px 28px; }
.login-texto .marca { margin-bottom: 48px; }
.login-texto h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.06; letter-spacing: -.02em; max-width: 16ch; }
.login-texto p { font-size: 18px; color: var(--osso-2); max-width: 52ch; margin-top: 20px; }
.login-caixa { background: var(--madeira); border: 1px solid var(--madeira-3); border-radius: 16px; padding: 28px; display: grid; gap: 14px; box-shadow: var(--sombra); }
.login-caixa h2 { font-size: 24px; }
.btn-google { background: var(--osso); color: var(--madeira); border-color: var(--osso); gap: 10px; }
.btn-google:hover { background: #fff; }
.login-ou { display: flex; align-items: center; gap: 12px; color: var(--osso-3); font-size: 13px; }
.login-ou::before, .login-ou::after { content: ''; flex: 1; height: 1px; background: var(--madeira-3); }
.login-msg { margin: 0; font-size: 14px; color: var(--osso-2); }
.login-msg.ok { color: var(--musgo); }
.login-msg.erro { color: #f08b7c; }
.login-caixa .ajuda a { color: var(--osso-2); }
.login-caixa .link { background: none; border: 0; padding: 0; color: var(--latao-2); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
.login-caixa .link:hover { color: var(--osso); }
.login-caixa .link:focus-visible { outline: 2px solid var(--latao-2); outline-offset: 3px; border-radius: 3px; }
.login-trocar { margin: 0; font-size: 14px; color: var(--osso-3); }
.linha-plano { font-size: 14px; color: var(--osso-2); margin: -10px 0 26px; }
.linha-plano strong { color: var(--latao-2); }
.lista-plano { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 14px; color: var(--osso-2); }
.lista-plano li::marker { color: var(--latao); }
.rodape-links { display: flex; gap: 20px; flex-wrap: wrap; }
.rodape-links a { color: var(--osso-3); }
.legal { max-width: 70ch; padding: 10px 0 60px; }
.legal h1 { display: none; }
.admin-titulo { font-size: 36px; margin: 10px 0 24px; }
.admin-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 40px; }
.admin-bloco { background: var(--madeira); border: 1px solid var(--madeira-2); border-radius: 12px; padding: 16px 18px; display: grid; gap: 4px; }
.admin-rotulo { font-size: 13px; color: var(--osso-3); }
.admin-bloco strong { font: 600 30px/1.1 var(--serif); }
.admin-sub { font-size: 12.5px; color: var(--osso-3); margin-bottom: 4px; }
.admin-modelos { grid-column: 1 / -1; }
.tabela-admin { overflow-x: auto; }
.tabela-admin table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-admin th, .tabela-admin td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid rgb(236 226 208 / .08); vertical-align: middle; }
.tabela-admin th { font-size: 12.5px; color: var(--osso-3); font-weight: 600; }
.tabela-admin td.num { font-variant-numeric: tabular-nums; }
.tabela-admin small { color: var(--osso-3); }
.tabela-admin tr.bloqueado { opacity: .5; }
.bloco-topo .campo { max-width: 280px; }
.campo-pequeno { padding: 6px 30px 6px 10px; font-size: 13px; width: auto; }
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
  .login-texto .marca { margin-bottom: 24px; }
}

/* ——— Falar a ação (aperte para falar) ——— */
.fala { max-width: 760px; width: calc(100% - 56px); margin: 0 auto 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 14px; background: var(--madeira); border: 1px solid var(--madeira-3); box-shadow: var(--sombra); animation: subir .18s ease; }
.fala.ouvindo { border-color: var(--sangue); }
.fala.revisando { border-color: var(--latao); }
.fala-ponto { width: 12px; height: 12px; border-radius: 50%; background: var(--sangue); flex: none; animation: pulsar 1s ease-in-out infinite; }
.fala-nivel { width: 64px; height: 6px; border-radius: 99px; background: rgb(0 0 0 / .4); overflow: hidden; flex: none; }
.fala-nivel span { display: block; height: 100%; background: var(--musgo); transform-origin: left; transform: scaleX(.08); transition: transform .08s linear; }
.fala-texto { flex: 1; min-width: 160px; font: italic 17px/1.45 var(--serif); color: var(--osso); }
.fala.vazio .fala-texto, .fala.transcrevendo .fala-texto { font: 400 14px/1.4 var(--sans); color: var(--osso-2); font-style: normal; }
.fala-dica { font-size: 12.5px; color: var(--osso-3); }
.fala-revisao { display: flex; gap: 10px; align-items: baseline; flex: 1 1 100%; }
.fala-revisao q { quotes: '“' '”'; }
.fala-botoes { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.fala-contador { font-size: 13px; color: var(--latao-2); font-variant-numeric: tabular-nums; margin-right: 4px; }
.mic { touch-action: none; user-select: none; -webkit-user-select: none; }
.mic.gravando { color: #fff; background: var(--sangue); border-radius: 50%; animation: none; box-shadow: 0 0 0 6px rgb(207 90 84 / .25); }
.selo-voz { background: rgb(134 174 126 / .18); color: var(--musgo); }
@media (max-width: 640px) { .fala { width: calc(100% - 28px); } .mic { width: 48px; height: 48px; } }
input[type="range"] { accent-color: var(--latao); }

/* ——— É a sua vez ——— */
.aviso-vez { max-width: 760px; width: calc(100% - 56px); margin: 0 auto 8px; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--osso-2); }
.aviso-vez.outros { padding: 0 2px; }
.aviso-vez.outros span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--latao); margin-right: 8px; vertical-align: middle; }
.aviso-vez.minha { padding: 12px 16px; border-radius: 14px; background: linear-gradient(90deg, rgb(226 184 74 / .16), rgb(226 184 74 / .04)); border: 1px solid var(--latao); animation: subir .25s ease; }
.aviso-vez.minha strong { display: block; font: 600 18px/1.25 var(--serif); color: var(--latao-2); }
.aviso-vez.minha span { font-size: 13px; color: var(--osso-2); }
.vez-icone { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--latao); position: relative; }
.vez-icone::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--madeira); box-shadow: 0 0 0 0 rgb(226 184 74 / .6); animation: chamar 1.8s ease-in-out infinite; }
.compositor.sua-vez .compositor-linha { border-color: var(--latao); box-shadow: 0 0 0 3px rgb(226 184 74 / .14); }
.mic.chamando:not(.gravando) { color: var(--madeira); background: var(--latao); border-radius: 50%; animation: chamar 1.8s ease-in-out infinite; }
.ficha-mini { position: relative; }
.ficha-mini.na-vez { border-color: var(--latao); box-shadow: 0 0 0 1px var(--latao); }
.marca-vez { position: absolute; top: -9px; right: 10px; font: 700 10.5px/1 var(--sans); background: var(--latao); color: var(--madeira); padding: 4px 8px; border-radius: 99px; }
@media (max-width: 640px) { .aviso-vez { width: calc(100% - 28px); } .aviso-vez.minha strong { font-size: 16px; } }

/* ——— Narração em voz ——— */
.narrando { max-width: 760px; width: calc(100% - 56px); margin: 0 auto 6px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--osso-2); }
.narrando .btn { margin-left: auto; }
.onda { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.onda i { width: 3px; height: 100%; background: var(--latao); border-radius: 2px; animation: onda 1s ease-in-out infinite; }
.onda i:nth-child(2) { animation-delay: .15s; } .onda i:nth-child(3) { animation-delay: .3s; } .onda i:nth-child(4) { animation-delay: .45s; }
@keyframes onda { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (max-width: 640px) { .narrando { width: calc(100% - 28px); } }

/* ——— Mundos: abas do lobby, galeria, página do mundo e editor ——— */
.heroi-compacto { padding: 32px 0 36px; grid-template-columns: 1fr; }
.heroi-compacto .heroi-dados { display: none; }
.heroi-compacto h1 { font-size: clamp(32px, 4.4vw, 50px); max-width: 17ch; }
.abas-lobby { display: flex; gap: 4px; border-bottom: 1px solid rgb(236 226 208 / .12); margin-bottom: 26px; overflow-x: auto; scrollbar-width: none; }
.aba-lobby { font: 600 15px/1 var(--sans); color: var(--osso-3); text-decoration: none; padding: 14px 16px 13px; border-bottom: 2px solid transparent; white-space: nowrap; }
.aba-lobby:hover { color: var(--osso); }
.aba-lobby[aria-current="page"] { color: var(--latao-2); border-bottom-color: var(--latao); }
.bloco-botoes { display: flex; gap: 8px; flex-wrap: wrap; }

.filtros { display: grid; gap: 12px; margin: 16px 0 22px; }
.filtros .campo { max-width: 420px; }
.grade-mundos { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 30px 22px; margin-top: 18px; transition: opacity .2s; }
.grade-mundos.carregando { opacity: .55; }
.grade-mundos > .vazio { grid-column: 1 / -1; }
.cartao-mundo { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; border-radius: var(--r-med); }
.cartao-mundo:focus-visible { outline: 2px solid var(--latao-2); outline-offset: 6px; }
/* capa em pé, como um livro na estante */
.capa-mundo, .mundo-capa { aspect-ratio: 2 / 3; background: var(--madeira-2); border-radius: 6px 10px 10px 6px; overflow: hidden; position: relative;
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 14px 30px -12px rgb(0 0 0 / .7), 0 4px 10px -4px rgb(0 0 0 / .5); }
.capa-mundo::before, .mundo-capa::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 7px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .35), rgb(255 255 255 / .08) 60%, rgb(0 0 0 / 0)); }
.cartao-mundo .capa-mundo { transition: transform .2s ease, box-shadow .2s ease; }
.cartao-mundo:hover .capa-mundo { transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 22px 40px -14px rgb(0 0 0 / .8), 0 6px 14px -6px rgb(0 0 0 / .5); }
.capa-mundo svg, .mundo-capa svg, .miniatura svg { width: 100%; height: 100%; display: block; }
.capa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cartao-corpo { padding: 0 2px; display: grid; gap: 4px; }
.cartao-corpo h3 { font-size: 17px; line-height: 1.2; }
.cartao-resumo { margin: 0; color: var(--osso-2); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .cartao-mundo .capa-mundo { transition: none; } .cartao-mundo:hover .capa-mundo { transform: none; } }
.cartao-meta { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--osso-3); font-size: 12.5px; }
.cartao-meta span:first-child { text-transform: capitalize; }
.cartao-selos { display: flex; gap: 6px; min-height: 0; }
.cartao-selos:empty { display: none; }
.selo-oficial { background: var(--latao); color: var(--madeira); }
.selo-publico { background: rgb(134 174 126 / .2); color: var(--musgo); }
.selo-alerta { background: rgb(207 90 84 / .25); color: #f2a598; }
.selo-privado { background: rgb(155 138 208 / .18); color: #cbbff0; margin-left: 4px; }

.mesa-miniatura { flex: none; width: 112px; border-radius: var(--r-peq); overflow: hidden; }
.miniatura { aspect-ratio: 16 / 9; }

.pagina-mundo { max-width: 1040px; margin: 0 auto; padding: 0 28px 70px; }
.mundo-topo { display: grid; grid-template-columns: clamp(220px, 28vw, 320px) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: end; padding: 34px 0 10px; margin-bottom: 40px; }
.mundo-cabecalho { display: grid; gap: 10px; align-content: end; }
.mundo-tagline { margin: 0; font: italic 400 20px/1.4 var(--serif); color: var(--latao-2); max-width: 46ch; }
@media (max-width: 720px) {
  .mundo-topo { grid-template-columns: 1fr; justify-items: start; padding-top: 18px; }
  .mundo-topo .mundo-capa { width: min(260px, 70vw); justify-self: center; }
}
.mundo-cabecalho h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.02; letter-spacing: -.02em; max-width: 18ch; }
.mundo-autor { margin: 0; color: var(--latao-2); font-size: 13px; font-weight: 600; }
.mundo-resumo { margin: 0; font: 400 19px/1.5 var(--serif); color: var(--osso); max-width: 60ch; }
.mundo-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.voltar-link { color: var(--osso-2); font-size: 13px; text-decoration: none; justify-self: start; }
.voltar-link::before { content: '‹ '; }
.voltar-link:hover { color: var(--osso); }
.mundo-conteudo { display: grid; gap: 40px; max-width: 760px; }
.mundo-secao h2 { font-size: 26px; margin-bottom: 12px; }
.mundo-secao > p { font: 400 17px/1.65 var(--serif); color: var(--osso); margin: 0 0 12px; }
.lista-aventuras { display: grid; gap: 14px; }
.aventura { padding: 18px 20px; border-left: 3px solid var(--latao); background: rgb(0 0 0 / .18); border-radius: 0 var(--r-med) var(--r-med) 0; }
.aventura h3 { font-size: 21px; margin-bottom: 6px; }
.aventura p { margin: 0; color: var(--osso-2); }
.objetivos { margin: 10px 0 0; padding-left: 18px; color: var(--osso-2); font-size: 14px; }
.segredo { margin-top: 12px; font-size: 14px; }
.segredo summary { cursor: pointer; color: var(--ametista); font-weight: 600; }
.segredo p { margin-top: 8px; color: #d9d0f4; }
.grade-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.ficha-pronta { padding: 16px; border-radius: var(--r-med); background: var(--madeira); border: 1px solid var(--madeira-3); display: grid; gap: 6px; align-content: start; }
.ficha-pronta h3 { font-size: 19px; }
.ficha-pronta p { margin: 0; font-size: 13.5px; color: var(--osso-2); }
.ficha-atributos { display: flex; gap: 4px; flex-wrap: wrap; }
.ficha-atributos span { display: grid; justify-items: center; min-width: 44px; padding: 4px 5px; border-radius: var(--r-peq); background: rgb(0 0 0 / .25); }
.ficha-atributos small { font-size: 10.5px; color: var(--osso-3); }
.ficha-atributos strong { font: 700 17px/1.1 var(--serif); color: var(--latao-2); }
.lista-nomes { margin: 0; display: grid; grid-template-columns: minmax(130px, 220px) 1fr; gap: 10px 22px; }
.lista-nomes dt { font: 600 16px/1.4 var(--serif); color: var(--osso); }
.lista-nomes dd { margin: 0; color: var(--osso-2); }

.opcoes-aventura { display: grid; gap: 8px; }
.opcao-aventura { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--r-peq); background: rgb(0 0 0 / .2); cursor: pointer; }
.opcao-aventura input { accent-color: var(--latao); width: 18px; height: 18px; margin-top: 3px; flex: none; }
.opcao-aventura span { display: grid; gap: 3px; }
.opcao-aventura small { color: var(--osso-3); }

.editor-topo { padding: 26px 0 18px; display: grid; gap: 8px; }
.editor-topo h1 { font-size: clamp(30px, 4vw, 44px); }
.gerar-ia { padding: 20px 22px; border-radius: 14px; background: var(--madeira); border: 1px solid var(--latao); margin-bottom: 30px; }
.gerar-ia h2 { font-size: 22px; }
.gerar-linha { display: grid; gap: 10px; margin-top: 10px; }
.gerar-controles { display: flex; gap: 10px; flex-wrap: wrap; }
.gerar-controles .campo { width: auto; flex: 1; min-width: 180px; }
.editor-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }
.editor-lateral { position: sticky; top: 16px; display: grid; gap: 12px; padding: 18px; border-radius: 14px; background: rgb(0 0 0 / .2); }
.editor-lateral h2 { font-size: 20px; }
.editor-previa .mundo-capa { width: min(220px, 100%); margin: 0 auto; }
.enviar-capa { display: grid; gap: 8px; justify-items: start; }
.enviar-capa .ajuda { margin: 0; font-size: 12.5px; }
.controles-poster { display: grid; gap: 12px; }
.controles-poster[hidden] { display: none; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.enviar-capa:focus-within label.btn { outline: 2px solid var(--latao-2); outline-offset: 2px; }
.chips .chip[aria-pressed="false"] { background: transparent; }
.lista-editavel { display: grid; gap: 12px; }
.item-editavel { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-peq); background: rgb(0 0 0 / .18); }
.item-editavel > .btn { justify-self: end; }
.lista-editavel > .btn { justify-self: start; }

@media (max-width: 860px) {
  .editor-grade { grid-template-columns: 1fr; }
  .editor-lateral { position: static; order: -1; }
  .lista-nomes { grid-template-columns: 1fr; gap: 2px; }
  .lista-nomes dd { margin-bottom: 10px; }
  .mesa-miniatura { width: 72px; }
  .heroi-compacto .heroi-dados { display: none; }
}

/* ——— Diamantes, Pro e imagens da IA ——— */
.diamante { display: inline-block; width: 11px; height: 11px; background: #7fd3e8; transform: rotate(45deg); border-radius: 2px; margin: 0 7px 1px 2px; box-shadow: 0 0 0 2px rgb(127 211 232 / .18); vertical-align: middle; }
.linha-plano { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; color: var(--osso-2); }
.linha-plano a { color: var(--latao-2); margin-left: 6px; }
.saldo-diamantes { color: var(--osso); font-size: 17px; }
.chip-diamantes { display: inline-flex; align-items: center; flex: none; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgb(0 0 0 / .3); border: 1px solid rgb(127 211 232 / .3); font: 700 14px/1 var(--sans); color: var(--osso); }
.chip-diamantes.acabando { border-color: var(--sangue); color: #f6c0b6; }
.msg-diamantes { flex-direction: column; align-items: flex-start; border-color: rgb(127 211 232 / .45); background: rgb(127 211 232 / .07); }
.msg-diamantes p { color: var(--osso); }
.acoes-diamantes { display: flex; flex-wrap: wrap; gap: 8px; }
.anuncio-teste { display: grid; gap: 10px; justify-items: start; }
.anuncio-contador { font: 700 22px/1 var(--serif); color: var(--latao-2); }

.pagina-pro { max-width: 860px; }
.estado-pro { margin: 6px 0 0; padding: 10px 14px; border-radius: var(--r-med); background: rgb(0 0 0 / .22); color: var(--osso); justify-self: start; }
.tabela-planos { margin: 22px 0 26px; }
.tabela-planos th[scope="row"] { text-align: left; font-weight: 600; color: var(--osso); }
.tabela-planos .col-pro { color: var(--latao-2); }
.tabela-planos thead .col-pro { font: 700 18px/1 var(--serif); }
.acoes-pro { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 36px; }
.linha-codigo { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; max-width: 620px; }
.linha-codigo > .campo { flex: 1; min-width: 200px; }
.linha-codigo .rotulo { width: 100px; }
.linha-codigo .rotulo .campo { width: 100%; }
.celula-plano { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.celula-plano small { color: var(--osso-3); }

.cena-arte { position: relative; }
.cena-foto { aspect-ratio: 3 / 2; max-height: 460px; }
.imagem-cena { width: 100%; height: 100%; object-fit: cover; display: block; animation: aparecer .8s ease; }
.mesa-fundo-cena .imagem-cena { filter: saturate(.8); }
.pintando { position: absolute; right: 12px; bottom: 10px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; background: rgb(0 0 0 / .55); color: var(--osso); animation: brilhar 1.4s ease-in-out infinite alternate; }
.previa-imagem img { width: 100%; border-radius: var(--r-peq); margin-top: 10px; }
@media (max-width: 860px) { .chip-diamantes { padding: 5px 9px 5px 6px; font-size: 13px; } }

/* Loja de diamantes */
.pacotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 4px; }
.pacote { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 16px 18px; border-radius: 12px; cursor: pointer;
  background: var(--madeira); border: 1px solid var(--madeira-3); color: var(--osso); font: inherit; transition: border-color .15s, transform .15s; }
.pacote:hover:not(:disabled) { border-color: var(--latao-2); transform: translateY(-1px); }
.pacote:focus-visible { outline: 2px solid var(--latao-2); outline-offset: 2px; }
.pacote:disabled { opacity: .6; cursor: progress; }
.pacote-qtd { font-size: 22px; font-weight: 700; color: var(--latao-2); }
.pacote-preco { font-size: 17px; }
.pacote-unid { font-size: 12.5px; color: var(--osso-3); }
@media (prefers-reduced-motion: reduce) { .pacote { transition: none; } .pacote:hover:not(:disabled) { transform: none; } }
@media (max-width: 520px) {
  .grade-mundos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .cartao-corpo h3 { font-size: 15px; }
  .cartao-resumo { font-size: 12.5px; }
}

/* Seletor de idioma (engrenagem) */
.seletor-idioma { position: relative; }
.seletor-idioma > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 12px; border-radius: 10px; line-height: 1; }
.seletor-idioma[open] > summary { background: var(--madeira-2); }
.topo-acoes .seletor-idioma, .mesa-acoes .seletor-idioma { margin: 0; align-self: center; }
.seletor-idioma > summary::-webkit-details-marker { display: none; }
.seletor-idioma .idioma-sigla { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.seletor-idioma .menu-lista { position: absolute; right: 0; top: calc(100% + 6px); min-width: 170px; z-index: 60; display: grid; padding: 6px;
  background: var(--madeira); border: 1px solid var(--madeira-3); border-radius: var(--r-med); box-shadow: 0 16px 40px -12px rgb(0 0 0 / .7); }
.seletor-idioma .menu-lista button { text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--osso); font: inherit; cursor: pointer; }
.seletor-idioma .menu-lista button:hover, .seletor-idioma .menu-lista button:focus-visible { background: var(--madeira-2); outline: none; }
.seletor-idioma .menu-lista button.ativo { color: var(--latao-2); font-weight: 700; }
.seletor-idioma .menu-lista button.ativo::after { content: ' ✓'; }
.seletor-idioma.flutuante { position: fixed; top: 14px; right: 14px; z-index: 70; }
.seletor-idioma.flutuante > summary { background: rgb(23 17 29 / .75); backdrop-filter: blur(6px); }

/* ——— Herói: o gato na beira do palco, contra a lua ——— */
.heroi-compacto.com-gato { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); align-items: end; padding-bottom: 0; border-bottom: 1px solid rgb(233 220 184 / .12); }
.heroi-compacto.com-gato .heroi-texto { padding-bottom: 40px; }
.heroi-gato { position: relative; align-self: end; aspect-ratio: 1; width: 100%; display: flex; align-items: flex-end; clip-path: inset(-200px -200px 0 -200px); cursor: default; }
.heroi-gato::before { /* a lua, se pondo atrás da linha do palco */
  content: ''; position: absolute; left: 4%; right: 2%; top: 10%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #f6eed8, var(--lua) 55%, #cdbd95);
  box-shadow: 0 0 90px 14px rgb(233 220 184 / .13);
}
.heroi-gato .gato-vivo { position: relative; z-index: 2; display: block; width: 100%; height: auto; margin-bottom: -2%; overflow: visible; }
/* a cartola: cumprimenta quando o mouse passa (ou ao tocar, no celular) */
.gato-vivo .cartola { transform-box: view-box; transform-origin: 85px 40px; transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.heroi-gato:hover .cartola, .heroi-gato.cumprimenta .cartola { transform: translate(-3px, -9px) rotate(-16deg); }
/* névoa: faixas que atravessam devagar só o disco da lua, na frente dela e atrás do gato */
.heroi-gato .nevoa { position: absolute; left: 4%; right: 2%; top: 10%; aspect-ratio: 1; border-radius: 50%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 7% at 50% 50%, rgb(150 136 160 / .42), transparent 72%) 0 8% / 200% 100% no-repeat,
    radial-gradient(ellipse 26% 5% at 50% 50%, rgb(150 136 160 / .34), transparent 72%) 100% -14% / 180% 100% no-repeat;
}
/* poucas estrelas que piscam fora de compasso */
.heroi-gato .estrelas { position: absolute; inset: -6% -8% 40% -30%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1.4px 1.4px at 8% 30%, #f3e8cc, transparent), radial-gradient(1px 1px at 22% 8%, #f3e8cc, transparent),
    radial-gradient(1.2px 1.2px at 40% 18%, #f3e8cc, transparent), radial-gradient(1px 1px at 96% 12%, #f3e8cc, transparent),
    radial-gradient(1.6px 1.6px at 14% 62%, #f3e8cc, transparent), radial-gradient(1px 1px at 88% 40%, #f3e8cc, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .heroi-gato::before { animation: lua-nasce 2.2s cubic-bezier(.2, .7, .2, 1) both; }
  .heroi-gato .gato-vivo { animation: aparece 1.4s .9s ease-out both; }
  .heroi-gato .nevoa { animation: nevoa 28s ease-in-out infinite alternate; }
  .heroi-gato .estrelas { animation: cintila 5.5s ease-in-out infinite alternate; }
}
@keyframes lua-nasce { from { transform: translateY(38%); filter: brightness(.6); } to { transform: none; filter: none; } }
@keyframes aparece { from { opacity: 0; } }
@keyframes nevoa { from { background-position: 0 8%, 100% -14%; } to { background-position: 100% 8%, 0 -14%; } }
@keyframes cintila { 0% { opacity: .35; } 45% { opacity: .9; } 100% { opacity: .5; } }
.heroi-compacto h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.04; }
@media (max-width: 720px) {
  .heroi-compacto.com-gato { grid-template-columns: 1fr 118px; gap: 14px; }
  .heroi-compacto.com-gato .heroi-texto { padding-bottom: 26px; }
  .heroi-compacto.com-gato .heroi-texto > p { font-size: 16px; }
  .heroi-gato { grid-row: 1; grid-column: 2; align-self: start; margin-top: 4px; clip-path: none; }
  .heroi-gato .estrelas, .heroi-gato .nevoa { display: none; }
  .heroi-gato::before { top: 12%; left: 4%; right: 4%; }
  .heroi-compacto.com-gato .heroi-texto { grid-row: 1; grid-column: 1 / -1; }
  .heroi-compacto.com-gato h1 { padding-right: 124px; }
}
h1, h2 { text-wrap: balance; }
.marca span { white-space: nowrap; }
@media (max-width: 560px) {
  .topo-lobby { flex-wrap: wrap; row-gap: 6px; padding: 16px 0 10px; }
  .topo-lobby .topo-acoes { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .topo-lobby .topo-acoes .btn { padding: 8px 10px; }
  .marca { font-size: 21px; }
}

/* ——— Holofote: uma luz de palco acompanha o cursor sobre as capas ——— */
.cartao-mundo .capa-mundo::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 35%), rgb(255 236 200 / .30), rgb(255 236 200 / .08) 28%, transparent 55%);
  mix-blend-mode: screen; }
.cartao-mundo:hover .capa-mundo::after { opacity: 1; }
/* brilho de vela no botão principal */
.btn-primario { transition: background .15s, border-color .15s, transform .1s, box-shadow .3s; }
.btn-primario:hover { box-shadow: 0 0 0 1px rgb(243 210 122 / .35), 0 6px 26px -6px rgb(226 184 74 / .55); }

/* ——— Comunidade: Instagram e Discord ——— */
.comunidade { margin: 56px 0 8px; padding: 32px; border: 1px solid rgb(233 220 184 / .12); border-radius: 16px;
  background: radial-gradient(ellipse 60% 80% at 100% 0%, rgb(107 34 56 / .28), transparent 70%), var(--madeira);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 28px; align-items: start; }
.comunidade-texto h2 { font-size: 34px; margin-bottom: 10px; }
.comunidade-texto p { color: var(--osso-2); margin: 0; max-width: 42ch; }
.comunidade-cartoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.comunidade-cartao { display: flex; gap: 14px; padding: 18px; border-radius: 12px; background: var(--feltro-2); border: 1px solid rgb(233 220 184 / .08); }
.comunidade-icone { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgb(226 184 74 / .12); color: var(--latao); }
.comunidade-icone svg { width: 24px; height: 24px; }
.comunidade-corpo { min-width: 0; }
.comunidade-corpo h3 { font-size: 22px; }
.comunidade-corpo p { margin: 4px 0 0; color: var(--osso-2); font-size: 14px; }
.comunidade-corpo .comunidade-nome { color: var(--latao); font-size: 13px; font-weight: 600; margin-top: 2px; }
.comunidade-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.comunidade-status { display: block; margin-top: 8px; font-size: 13px; color: var(--musgo); }
.comunidade-status:empty { display: none; }
.link-recompensa { color: var(--latao); }
@media (max-width: 860px) { .comunidade { grid-template-columns: 1fr; padding: 22px; } }
@media (max-width: 560px) { .comunidade-cartoes { grid-template-columns: 1fr; } }

/* ——— Som ambiente: botão no topo e controles ——— */
.seletor-som { position: relative; align-self: center; }
.seletor-som > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border-radius: 10px; cursor: pointer; color: var(--osso-2); }
.seletor-som > summary::-webkit-details-marker { display: none; }
.seletor-som > summary:hover, .seletor-som[open] > summary { color: var(--osso); background: var(--madeira-2); }
.seletor-som > summary svg { width: 20px; height: 20px; }
.seletor-som-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 250px; padding: 14px 16px; border-radius: 12px;
  background: var(--madeira); border: 1px solid rgb(233 220 184 / .14); box-shadow: var(--sombra); }
.seletor-som.flutuante { position: fixed; top: 14px; right: 92px; z-index: 50; }
.som-controles { display: flex; flex-direction: column; gap: 10px; }
.som-linha { display: flex; align-items: center; gap: 12px; }
.som-volume { flex: 1; accent-color: var(--latao); }
.som-valor { min-width: 3.2em; text-align: right; color: var(--osso-2); font-variant-numeric: tabular-nums; font-size: 14px; }

/* ——— Perfil ——— */
.topo-perfil { display: inline-flex; align-items: center; gap: 10px; }
.topo-foto, .perfil-foto { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--madeira-3); color: var(--osso); font-weight: 700; }
.topo-foto { width: 30px; height: 30px; font-size: 12px; }
.topo-foto img, .perfil-foto img, .avatar.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.com-foto { padding: 0; overflow: hidden; }
.perfil-titulo { font-size: clamp(34px, 4.5vw, 52px); margin: 18px 0 28px; }
.perfil-grade { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.perfil-coluna { display: flex; flex-direction: column; gap: 24px; }
.perfil-cartao { padding: 28px; border-radius: 16px; background: var(--madeira); border: 1px solid rgb(233 220 184 / .1); }
.perfil-cartao h2 { font-size: 26px; margin-bottom: 14px; }
.perfil-cartao > p { margin: 6px 0; }
.perfil-foto-box { display: flex; gap: 22px; align-items: center; margin-bottom: 24px; }
.perfil-foto { width: 112px; height: 112px; font-size: 38px; font-family: var(--display); font-weight: 400;
  box-shadow: 0 0 0 3px var(--feltro), 0 0 0 5px rgb(226 184 74 / .55); }
.perfil-foto-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.perfil-foto-acoes .ajuda { flex-basis: 100%; margin: 4px 0 0; max-width: 40ch; }
.perfil-foto-acoes label.btn { cursor: pointer; }
.perfil-contador { align-self: flex-end; margin-top: -6px; }
.perfil-generos { display: flex; flex-wrap: wrap; gap: 8px; }
.perfil-generos .chip[aria-pressed="true"] { background: var(--latao); color: #1d1424; border-color: var(--latao); }
.perfil-salvar { margin-top: 8px; }
.perfil-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.perfil-excluir { margin-top: 10px; }
.perfil-excluir summary { cursor: pointer; color: var(--osso-3); }
@media (max-width: 860px) { .perfil-grade { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .perfil-foto-box { flex-direction: column; align-items: flex-start; } .perfil-cartao { padding: 20px; } .topo-perfil span:last-child { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

/* ——— Celular: toque, teclado, áreas seguras (entalhe e barra de gestos) ——— */
.mesa { height: var(--altura-util, 100dvh); }
.mic { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.rotulo-btn { display: inline; }
.icone-btn { display: none; width: 20px; height: 20px; flex: none; }
.seletor-som.flutuante > summary { background: rgb(23 17 29 / .75); backdrop-filter: blur(6px); width: 40px; height: 40px; }
.seletor-som.flutuante, .seletor-idioma.flutuante { margin-top: env(safe-area-inset-top); }
.idiomas-lista { display: grid; gap: 6px; }
.idiomas-lista .btn { justify-content: flex-start; }
.idiomas-lista .btn.ativo { border-color: var(--latao); color: var(--latao-2); }

/* qualquer tela de toque: alvos de pelo menos ~40px e campos com 16px (o iPhone dá zoom em campos menores) */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select, .campo, .campo-pequeno, .expr-pedido, .expr-livre { font-size: 16px; }
  .btn-pequeno { min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .btn-icone { width: 40px; height: 40px; }
  .btn-icone.pequeno { width: 34px; height: 34px; }
  .modo { padding: 11px 14px; font-size: 14px; }
  .dado-btn { padding: 5px; }
  .seletor-som > summary { width: 40px; height: 40px; }
  .seletor-idioma > summary { min-height: 40px; }
  .check input { width: 22px; height: 22px; margin-top: 1px; }
  .menu-lista button, .menu-lista a { min-height: 44px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
  input[type=range] { height: 32px; }
  * { -webkit-tap-highlight-color: rgb(226 184 74 / .15); }
}
@media (hover: none) { .so-mouse { display: none !important; } }
@media (hover: hover) { .so-toque { display: none !important; } }

@media (max-width: 640px) {
  /* topo das páginas: marca + som + idioma na primeira linha, o resto embaixo */
  .topo-lobby { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 6px; padding: calc(12px + env(safe-area-inset-top)) 0 8px; }
  .topo-lobby .marca { order: 0; flex: 1; min-width: 0; }
  .topo-lobby .topo-acoes { display: contents; }
  .topo-lobby .seletor-som { order: 1; }
  .topo-lobby .seletor-idioma { order: 2; }
  .topo-lobby::after { content: ''; order: 3; flex-basis: 100%; height: 0; }
  .topo-lobby .topo-acoes > :not(.seletor-som):not(.seletor-idioma) { order: 4; }
  .topo-lobby .topo-acoes > .topo-perfil { margin-left: -10px; }
  .topo-lobby .topo-acoes .btn { padding: 8px 10px; }
  .seletor-idioma > summary { padding: 8px 10px; }

  /* mesa: botões viram ícones; título com mais espaço */
  .mesa-topo { padding: calc(6px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); gap: 6px; min-height: 54px; }
  .mesa-acoes { gap: 0; }
  .mesa-acoes .btn.com-icone, .mesa-acoes summary.com-icone { width: 40px; height: 40px; min-height: 40px; padding: 0; }
  .mesa-acoes .com-icone .rotulo-btn { display: none; }
  .mesa-acoes .com-icone .icone-btn { display: block; }
  .mesa-acoes .seletor-idioma { display: none; }
  .voltar img { width: 28px; height: 28px; }
  .mesa-nome { font-size: 15.5px; }
  .mesa-cena { font-size: 12px; }
  .chip-diamantes { padding: 4px 8px 4px 5px; }

  .compositor { padding-bottom: max(10px, env(safe-area-inset-bottom)); padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .compositor-topo { gap: 6px; }
  .mesa-grupo, .mesa-painel { padding-bottom: env(safe-area-inset-bottom); }

  /* janelas: ocupam a largura toda e sobem da borda de baixo */
  .modal-fundo { padding: 0; place-items: end stretch; }
  .modal { max-height: calc(var(--altura-util, 100dvh) - 12px - env(safe-area-inset-top)); border-radius: 18px 18px 0 0; border-bottom: 0; max-width: none !important; }
  .modal-topo { padding: 14px 12px 4px 18px; }
  .modal-topo h2 { font-size: 20px; }
  .modal-rodape { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); }
  .modal-rodape .btn { flex: 1; }
  .menu-lista { max-height: calc(var(--altura-util, 100dvh) - 90px); overflow: auto; }

  #toasts { left: 12px; right: 12px; bottom: auto; top: calc(62px + env(safe-area-inset-top)); }
  .toast { max-width: none; }
  .seletor-som-menu { width: min(250px, calc(100vw - 24px)); }
  .seletor-som.flutuante { top: 14px; right: 82px; }
}
.som-faixa { display: grid; gap: 4px; }
.som-rotulo { font-size: 13px; color: var(--osso-2); font-weight: 600; }

/* ——— Comunidade ——— */
.mini-foto { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--madeira-3); color: var(--osso); font: 700 11px/1 var(--sans); }
.mini-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.link-jogador { display: inline-flex; align-items: center; gap: 8px; color: var(--osso); text-decoration: none; font-weight: 600; font-size: 14px; min-width: 0; }
.link-jogador span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-jogador:hover span:last-child { color: var(--latao-2); text-decoration: underline; text-underline-offset: 3px; }
.ponto-online { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--musgo, #86ae7e); box-shadow: 0 0 0 3px rgb(134 174 126 / .18); flex: none; }
.subtitulo { font: 600 13px/1.3 var(--sans); color: var(--osso-2); margin: 18px 0 8px; letter-spacing: .01em; }
.selo-vagas { margin-left: 10px; vertical-align: 3px; background: rgb(226 184 74 / .16); color: var(--latao-2); }
.selo-amigo { align-self: center; padding: 6px 12px; font-size: 13px; background: rgb(134 174 126 / .2); color: var(--musgo, #86ae7e); }
.avatar-link { display: inline-flex; border-radius: 50%; }
.avatar-link:focus-visible { outline: 2px solid var(--latao); outline-offset: 2px; }

/* sino */
.sino { position: relative; }
.sino-botao { position: relative; width: 40px; height: 40px; display: inline-grid; place-items: center; list-style: none; cursor: pointer; border-radius: 50%; color: var(--osso-2); }
.sino-botao::-webkit-details-marker { display: none; }
.sino-botao:hover, .sino[open] .sino-botao { color: var(--osso); background: rgb(255 255 255 / .06); }
.sino-botao svg { width: 22px; height: 22px; }
.sino-contador { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center;
  background: var(--cortina); color: #fff; font: 700 10.5px/1 var(--sans); box-shadow: 0 0 0 2px var(--feltro); }
.sino-painel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow: auto;
  background: var(--madeira); border: 1px solid var(--madeira-3); border-radius: 14px; box-shadow: var(--sombra); padding: 8px; }
.sino-titulo { font: 400 20px/1 var(--display); padding: 10px 10px 8px; }
.sino-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.sino-item { display: flex; gap: 10px; padding: 10px; border-radius: 10px; }
.sino-item.nova { background: rgb(226 184 74 / .07); }
.sino-item .mini-foto { width: 34px; height: 34px; font-size: 13px; }
.sino-quem { text-decoration: none; }
.sino-texto { flex: 1; min-width: 0; display: grid; gap: 4px; }
.sino-texto p { margin: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.sino-texto .quando { font-size: 12px; color: var(--osso-3); }
.sino-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sino-acoes:empty { display: none; }
.sino-vazio { padding: 16px 12px; color: var(--osso-2); font-size: 14px; line-height: 1.5; }

/* procurar grupo */
.grupos { display: grid; gap: 18px; padding-top: 18px; }
.cartao-grupo { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; padding: 18px; border-radius: 16px;
  background: var(--madeira); border: 1px solid rgb(233 220 184 / .08); }
.cartao-grupo .miniatura { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; align-self: start; }
.grupo-corpo { display: grid; gap: 10px; min-width: 0; align-content: start; }
.grupo-corpo h3 { font-size: 22px; line-height: 1.15; }
.grupo-corpo .linha-sub a { color: inherit; }
.grupo-descricao { margin: 0; line-height: 1.55; color: var(--osso); white-space: pre-line; overflow-wrap: anywhere; }
.grupo-corpo .chip { cursor: default; padding: 6px 11px; font-size: 12.5px; }
.chip-horario { border-style: dashed; }
.grupo-rodape { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding-top: 10px; border-top: 1px solid rgb(236 226 208 / .08); }
.grupo-vagas { color: var(--latao-2); font-weight: 600; font-size: 14px; }
.grupo-acao { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* crônicas */
.cronicas { display: grid; gap: 22px; padding-top: 18px; }
.cronica { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; padding-bottom: 22px; border-bottom: 1px solid rgb(236 226 208 / .08); }
.cronica .miniatura { border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 4; align-self: start; }
.cronica-corpo { display: grid; gap: 10px; min-width: 0; align-content: start; }
.cronica-topo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--osso-3); }
.cronica-mundo { color: var(--osso-2); font-style: italic; }
.cronica h3 { font: 400 clamp(24px, 3vw, 30px)/1.1 var(--display); }
.cronica-texto { margin: 0; white-space: pre-line; line-height: 1.7; color: var(--osso); max-width: 68ch; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.cronica-texto.aberta { -webkit-line-clamp: unset; display: block; cursor: auto; }
.cronica-texto::first-letter { font: 400 1.9em/1 var(--display); color: var(--latao-2); padding-right: 2px; }
.cronica-rodape { display: flex; align-items: center; gap: 10px; }
.btn-curtir { all: unset; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; cursor: pointer; color: var(--osso-2);
  border: 1px solid var(--madeira-3); font: 600 14px/1 var(--sans); min-height: 22px; }
.btn-curtir span:first-child { font-size: 17px; line-height: 1; }
.btn-curtir:hover { color: var(--osso); border-color: var(--osso-3); }
.btn-curtir.curtido { color: #f2a7b5; border-color: rgb(242 167 181 / .4); background: rgb(107 34 56 / .25); }
.btn-curtir:focus-visible { outline: 2px solid var(--latao); outline-offset: 2px; }
.alternador { display: inline-flex; padding: 3px; border-radius: 99px; background: rgb(0 0 0 / .25); border: 1px solid var(--madeira-3); }
.alternador-opcao { all: unset; padding: 7px 13px; border-radius: 99px; font: 600 13px/1 var(--sans); color: var(--osso-2); cursor: pointer; }
.alternador-opcao[aria-selected="true"] { background: var(--madeira-3); color: var(--osso); }
.alternador-opcao:focus-visible { outline: 2px solid var(--latao); }

/* página de um jogador */
.pagina-social .bloco { margin-top: 34px; }
.jogador-cabeca { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 12px; }
.jogador-foto { width: 128px; height: 128px; font-size: 44px; box-shadow: 0 0 0 4px var(--madeira-2), 0 0 0 5px rgb(226 184 74 / .35); }
.jogador-info { display: grid; gap: 12px; min-width: 0; }
.jogador-nome { font-size: clamp(32px, 4.5vw, 46px); line-height: 1.05; display: flex; align-items: center; gap: 14px; overflow-wrap: anywhere; }
.jogador-nome .ponto-online { width: 12px; height: 12px; }
.jogador-bio { margin: 0; font-size: 17px; line-height: 1.55; color: var(--osso); max-width: 60ch; }
.jogador-info .chip { cursor: default; }
.jogador-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jogador-mundos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; padding-top: 16px; }
.jogador-mundo { display: grid; gap: 6px; padding: 16px; border-radius: 12px; background: var(--madeira); border: 1px solid rgb(233 220 184 / .08); color: var(--osso); text-decoration: none; }
.jogador-mundo strong { font: 400 21px/1.15 var(--display); }
.jogador-mundo span { color: var(--osso-2); font-size: 14px; }
.jogador-mundo:hover strong { color: var(--latao-2); }

/* amigos e pedidos */
.amigos-lista { display: grid; gap: 2px; }
.amigo-linha, .pedido-linha { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid rgb(236 226 208 / .06); }
.amigo-linha .link-jogador { flex: 1; }
.amigo-linha .btn, .pedido-botoes { margin-left: auto; }
.pedido-linha > .ajuda { flex-basis: 100%; margin: 0 0 0 34px; }
.pedido-botoes { display: flex; gap: 6px; }
.perfil-amigos .link-convite { margin: 16px 0 10px; }
.perfil-amigos .link-convite code { font-size: 12px; }
.chamar-amigos { padding-top: 10px; border-top: 1px solid rgb(236 226 208 / .08); }
.chips-escolha .chip.ativo { background: var(--latao); border-color: var(--latao); color: var(--madeira); font-weight: 600; }

@media (max-width: 760px) {
  .cartao-grupo { grid-template-columns: 1fr; padding: 0 0 16px; background: none; border: 0; border-bottom: 1px solid rgb(236 226 208 / .08); border-radius: 0; gap: 14px; }
  .cartao-grupo .miniatura { aspect-ratio: 16 / 7; }
  .grupo-acao { margin-left: 0; width: 100%; }
  .grupo-acao .btn-primario { flex: 1; }
  .cronica { grid-template-columns: 1fr; gap: 12px; }
  .cronica .miniatura { aspect-ratio: 16 / 6; }
  .jogador-cabeca { grid-template-columns: 1fr; justify-items: start; gap: 18px; }
  .jogador-foto { width: 96px; height: 96px; font-size: 34px; }
  .alternador { width: 100%; }
  .alternador-opcao { flex: 1; text-align: center; }
  .bloco-topo:has(.alternador) { flex-wrap: wrap; }
  .sino { position: static; }
  .sino-painel { position: fixed; left: 12px; right: 12px; width: auto; top: calc(118px + env(safe-area-inset-top)); max-height: calc(var(--altura-util, 100dvh) - 140px); }
}
.sino-contador[hidden] { display: none; }