/* Confraria de RPG's: design system (tokens, base, componentes, movimento) e páginas do site.
   A tela de login usa só CSS/auth.css e não depende deste arquivo. */

/* fontes do próprio site (fontes/LEIAME.txt): Outfit nos títulos, Manrope no texto */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fontes/outfit-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../fontes/outfit-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fontes/manrope-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(../fontes/manrope-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------ tokens
   Base preta, branca e cinza; cor só para estados (perigo, sucesso, aviso, informação). */
:root {
    color-scheme: light;
    --fonte: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fonte-titulo: 'Outfit', 'Manrope', system-ui, sans-serif;
    --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --bg: #f4f4f3;
    --superficie: #ffffff;
    --superficie-2: #efefee;
    --superficie-3: #e6e6e4;
    --borda: #e2e2df;
    --borda-forte: #bdbdb9;
    --texto: #111111;
    --texto-2: #474747;
    --texto-3: #6e6e6e;
    --acento: #111111;
    --acento-hover: #2e2e2e;
    --acento-suave: #ebebe9;
    --acento-texto: #ffffff;
    --inverso: #111111;
    --inverso-texto: #ffffff;

    --perigo: #c0352d;
    --perigo-suave: #fbeceb;
    --sucesso: #1f7f4a;
    --sucesso-suave: #e5f3eb;
    --aviso: #a86a12;
    --aviso-suave: #fbf0dc;
    --info: #2563c9;
    --info-suave: #e6eefb;

    --sombra: 0 1px 2px rgba(17, 17, 17, .06);
    --sombra-media: 0 4px 16px rgba(17, 17, 17, .08), 0 1px 3px rgba(17, 17, 17, .06);
    --sombra-alta: 0 24px 60px rgba(17, 17, 17, .18), 0 4px 14px rgba(17, 17, 17, .08);
    --vidro: rgba(244, 244, 243, .78);

    --raio: 14px;
    --raio-sm: 9px;
    --raio-lg: 20px;
    --raio-pilula: 999px;

    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-saida: cubic-bezier(.4, 0, 1, 1);
    --transicao: var(--dur-1) var(--ease);
    --foco: 0 0 0 2px var(--superficie), 0 0 0 4px var(--texto);

    /* nomes antigos usados por outras páginas */
    --panel: var(--superficie);
    --text: var(--texto);
    --muted: var(--borda);
    --border: var(--borda);
    --container-bg: var(--superficie-2);
    --character-bg: var(--superficie);
    --form-bg: var(--superficie);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #09090a;
    --superficie: #121214;
    --superficie-2: #1a1a1d;
    --superficie-3: #232327;
    --borda: #26262b;
    --borda-forte: #44444b;
    --texto: #f3f3f4;
    --texto-2: #b3b3b8;
    --texto-3: #8b8b92;
    --acento: #f3f3f4;
    --acento-hover: #ffffff;
    --acento-suave: #222226;
    --acento-texto: #0b0b0c;
    --inverso: #f3f3f4;
    --inverso-texto: #0b0b0c;

    --perigo: #f2695f;
    --perigo-suave: #2b1514;
    --sucesso: #49c785;
    --sucesso-suave: #10261a;
    --aviso: #e7b04a;
    --aviso-suave: #2a2010;
    --info: #6aa1ff;
    --info-suave: #121d33;

    --sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra-media: 0 6px 20px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .4);
    --sombra-alta: 0 28px 70px rgba(0, 0, 0, .65), 0 4px 16px rgba(0, 0, 0, .45);
    --vidro: rgba(9, 9, 10, .74);
}

/* ------------------------------------------------------------------ base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--fonte);
    font-size: 15px;
    font-weight: 450;
    line-height: 1.55;
    color: var(--texto);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

main { flex: 1; }

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.015em;
    text-wrap: balance;
}
h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem); letter-spacing: -.025em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.12rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 .8em; }
small { font-size: .82em; }

a {
    color: var(--texto);
    text-decoration: underline;
    text-decoration-color: var(--borda-forte);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--transicao), color var(--transicao);
}
a:hover { text-decoration-color: currentColor; }

:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--texto);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { color: var(--inverso-texto); background: var(--inverso); }

img, svg, video, canvas { max-width: 100%; }

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* pular direto para o conteúdo (teclado) */
.pular {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 8px 14px;
    color: var(--inverso-texto);
    background: var(--inverso);
    border-radius: var(--raio-sm);
}
.pular:focus { top: 12px; }

/* só para leitores de tela */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ cabeçalho do site */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--vidro);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--borda);
}
header .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    min-height: 64px;
}
header .logo {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--texto);
}
header .logo a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}
/* marca da Confraria: d20 claro no tema escuro e preto no claro (contraste) */
.marca-confraria {
    flex: none;
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: brightness(0);
}
[data-theme="dark"] .marca-confraria { filter: none; }
.marca-mini { display: inline-flex; flex: none; }
.marca-mini .marca-confraria { width: 26px; height: 26px; }

/* logo do RPG no topo da mesa e do painel; sem logo fica o nome do jogo */
.logo-rpg { display: flex; align-items: center; min-width: 0; }
.logo-rpg-img { display: block; max-height: 40px; max-width: 220px; object-fit: contain; }
.logo-rpg.com-logo h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.logo-rpg-acoes { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.logo-rpg-acoes label { cursor: pointer; }
.nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 12px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto-2);
    text-decoration: none;
    border-radius: var(--raio-pilula);
    transition: background-color var(--transicao), color var(--transicao);
}
.nav-links a:hover { color: var(--texto); background: var(--superficie-2); }
.nav-links a[aria-current="page"] { color: var(--texto); background: var(--superficie-3); }

/* rodapé */
footer {
    padding: 22px 0 28px;
    font-size: .84rem;
    color: var(--texto-3);
    border-top: 1px solid var(--borda);
}
footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
footer p { margin: 0; }

/* ------------------------------------------------------------------ formulários */
form {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 24px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
}
.form-group {
    margin-bottom: 16px;
    text-align: left;
}
.form-group label,
#addRelationForm label,
.campo-rotulo {
    display: block;
    margin-bottom: 6px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--texto);
}
.form-dica {
    display: block;
    margin-top: 6px;
    font-size: .8rem;
    color: var(--texto-3);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
    width: 100%;
    min-height: 44px;
    padding: 10px 13px;
    font: inherit;
    font-size: .95rem;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-sm);
    transition: border-color var(--transicao), box-shadow var(--transicao), background-color var(--transicao);
}
textarea {
    min-height: 120px;
    line-height: 1.5;
    resize: vertical;
}
select {
    padding-right: 36px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
}
input:hover,
textarea:hover,
select:hover { border-color: var(--texto-3); }
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--texto);
    box-shadow: 0 0 0 3px var(--acento-suave);
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] { accent-color: var(--texto); }
::placeholder { color: var(--texto-3); opacity: 1; }

/* ------------------------------------------------------------------ botões */
button { font-family: inherit; }

.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-jogos,
.btn-danger,
#showFormBtn,
#criarJogos button,
#addRelationForm button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 18px;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .005em;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--raio-pilula);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transicao), border-color var(--transicao), color var(--transicao), transform var(--dur-1) var(--ease), box-shadow var(--transicao);
}
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-jogos:active,
.btn-danger:active { transform: scale(.97); }
.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn .icone,
.btn-secondary .icone,
.btn-ghost .icone,
.btn-danger .icone { width: 18px; height: 18px; flex: none; }

/* principal: preto no claro, branco no escuro */
.btn,
.btn-primary,
.btn-jogos,
#showFormBtn,
#criarJogos button,
#addRelationForm button {
    color: var(--acento-texto);
    background: var(--acento);
}
.btn:hover,
.btn-primary:hover,
.btn-jogos:hover,
#showFormBtn:hover,
#criarJogos button:hover,
#addRelationForm button:hover {
    color: var(--acento-texto);
    background: var(--acento-hover);
    box-shadow: var(--sombra-media);
}
/* secundário: contorno */
.btn-secondary {
    color: var(--texto);
    background: var(--superficie);
    border-color: var(--borda-forte);
}
.btn-secondary:hover {
    color: var(--texto);
    background: var(--superficie-2);
    border-color: var(--texto-3);
}
/* fantasma: sem fundo, para ações de menor peso */
.btn-ghost {
    color: var(--texto-2);
    background: transparent;
}
.btn-ghost:hover { color: var(--texto); background: var(--superficie-2); }
/* excluir: vermelho só aqui (estado de perigo) */
.btn-danger {
    color: var(--perigo);
    background: transparent;
    border-color: color-mix(in srgb, var(--perigo) 45%, transparent);
}
.btn-danger:hover { color: #fff; background: var(--perigo); border-color: var(--perigo); }
.btn-sm { min-height: 34px; padding: 6px 13px; font-size: .82rem; }
.btn-bloco { width: 100%; }

/* botão só de ícone (redondo) */
.btn-icone {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--texto-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--raio-pilula);
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao), transform var(--dur-1) var(--ease);
}
.btn-icone:hover { color: var(--texto); background: var(--superficie-2); }
.btn-icone:active { transform: scale(.94); }
.btn-icone .icone { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ mensagens de retorno */
.message {
    max-width: 460px;
    margin: 0 auto 16px;
    padding: 11px 14px;
    font-size: .9rem;
    font-weight: 600;
    border: 1px solid currentColor;
    border-radius: var(--raio-sm);
    animation: entrar var(--dur-2) var(--ease) both;
}
.message.error { color: var(--perigo); background: var(--perigo-suave); border-color: color-mix(in srgb, var(--perigo) 30%, transparent); }
.message.success { color: var(--sucesso); background: var(--sucesso-suave); border-color: color-mix(in srgb, var(--sucesso) 30%, transparent); }
.message[hidden] { display: none; }

/* ------------------------------------------------------------------ selos e chips */
.selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 2px 10px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--texto-2);
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
}
.selo-forte { color: var(--inverso-texto); background: var(--inverso); border-color: var(--inverso); }

/* ------------------------------------------------------------------ menu contextual (botão ⋯) */
.menu { position: relative; }
.menu-lista {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 210px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    transform-origin: top right;
    animation: menu-abrir var(--dur-2) var(--ease) both;
}
.menu-lista[hidden] { display: none; }
.menu-lista button,
.menu-lista a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    text-align: left;
    color: var(--texto);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--raio-sm);
    cursor: pointer;
}
.menu-lista button:hover,
.menu-lista a:hover,
.menu-lista button:focus-visible { background: var(--superficie-2); outline: none; }
.menu-lista .icone { width: 18px; height: 18px; color: var(--texto-2); }
.menu-lista .menu-perigo { color: var(--perigo); }
.menu-lista .menu-perigo .icone { color: var(--perigo); }
.menu-lista hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--borda); }
.menu-lista form { all: unset; display: block; }

/* ------------------------------------------------------------------ janelas (dialog) */
dialog.janela {
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100dvh - 32px);
    padding: 0;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-alta);
    overflow: auto;
}
dialog.janela[open] { animation: janela-abrir var(--dur-3) var(--ease) both; }
dialog.janela::backdrop {
    background: rgba(8, 8, 9, .5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: fundo-abrir var(--dur-2) var(--ease) both;
}
.janela-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 6px;
}
.janela-topo h2 { margin: 0; font-size: 1.2rem; }
.janela-corpo { padding: 10px 20px 4px; }
.janela-corpo form {
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
}
.janela-rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px 20px;
}

/* nova ficha: criação guiada ou manual */
.criacao-opcoes { display: grid; gap: 10px; }
.criacao-opcao {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    font: inherit;
    text-align: left;
    color: var(--texto);
    background: var(--superficie-2);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    cursor: pointer;
}
.criacao-opcao:hover,
.criacao-opcao:focus-visible { border-color: var(--texto-2); outline: none; }
.criacao-opcao strong { font-size: 1rem; }
.criacao-opcao span { color: var(--texto-2); font-size: .88rem; line-height: 1.4; }

/* ------------------------------------------------------------------ registro, recuperação, convite e erro */
.auth-section { padding: 56px 0 72px; }
.auth-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 32px 64px;
    align-items: start;
}
.auth-texto h1 { margin-bottom: .4em; }
.auth-texto p { max-width: 46ch; color: var(--texto-2); font-size: 1.02rem; }
.auth-section form { margin: 0; text-align: left; box-shadow: var(--sombra-media); }
.auth-section form button[type="submit"] { width: 100%; margin-top: 4px; }
.auth-links { margin: 16px 0 0; font-size: .9rem; color: var(--texto-2); }
.auth-links p { margin: 0 0 6px; }

/* ------------------------------------------------------------------ início: seus jogos */
main > .container {
    padding-top: 40px;
    padding-bottom: 64px;
}
.titulo-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 28px;
}
.titulo-pagina h1 { margin: 0; }
.titulo-pagina p { margin: 4px 0 0; color: var(--texto-3); font-size: .92rem; }
.titulo-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* criar jogo (formulário dentro da janela) */
#criarJogos .form-group:last-of-type { margin-bottom: 4px; }

/* grade de campanhas: capa, nome, descrição e ações */
.game-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.game-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
    animation: entrar var(--dur-3) var(--ease) both;
    animation-delay: calc(var(--i, 0) * 50ms);
}
.game-card:hover {
    transform: translateY(-2px);
    border-color: var(--borda-forte);
    box-shadow: var(--sombra-media);
}
.jogo-capa {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--superficie-2);
    border-radius: calc(var(--raio-lg) - 1px) calc(var(--raio-lg) - 1px) 0 0;
}
.jogo-capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
}
.game-card:hover .jogo-capa img { transform: scale(1.025); }
/* sem capa: espaço neutro com o contorno de uma imagem */
.jogo-capa-vazia {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--texto-3);
    background:
        linear-gradient(var(--superficie-2), var(--superficie-2)) padding-box,
        repeating-linear-gradient(135deg, var(--borda) 0 1px, transparent 1px 12px);
}
.jogo-capa-vazia span {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 600;
}
.jogo-capa-vazia .icone { width: 28px; height: 28px; opacity: .7; }
.jogo-corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 20px;
}
.jogo-cabeca {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.game-card h2 {
    margin: 0;
    font-size: 1.28rem;
}
.game-card h2 a { color: var(--texto); text-decoration: none; }
.game-card h2 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.game-card h2 a:focus-visible { outline: none; }
.game-card:has(h2 a:focus-visible) { box-shadow: var(--foco); }
.jogo-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: .8rem;
    color: var(--texto-3);
    list-style: none;
}
.jogo-meta li + li::before { content: '\00B7'; margin-right: 6px; }
.jogo-papel { font-weight: 700; color: var(--texto); }
.jogo-descricao {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: .9rem;
    color: var(--texto-2);
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.game-card-acoes {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 10px;
}
.game-card-acoes > a { flex: 1 1 150px; }
.game-card-acoes form {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}
.jogo-cabeca .menu { position: relative; z-index: 2; margin: -6px -8px 0 0; }

.vazio {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 64px 24px;
    text-align: center;
    color: var(--texto-2);
    background: var(--superficie);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio-lg);
}
.vazio p { max-width: 52ch; margin: 0; }

/* envio de capa */
.capa-area {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    color: var(--texto-3);
    background: var(--superficie-2);
    border: 1.5px dashed var(--borda-forte);
    border-radius: var(--raio);
    cursor: pointer;
    transition: border-color var(--transicao), background-color var(--transicao);
}
.capa-area:hover,
.capa-area.arrastando { color: var(--texto); border-color: var(--texto); background: var(--acento-suave); }
.capa-area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.capa-area .capa-convite {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 16px;
    font-size: .88rem;
    font-weight: 600;
    text-align: center;
}
.capa-area .capa-convite small { font-weight: 500; color: var(--texto-3); }
.capa-area .icone { width: 30px; height: 30px; }
.capa-area input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.capa-info { min-height: 1.4em; margin: 10px 0 0; font-size: .82rem; color: var(--texto-3); }
.capa-info.erro { color: var(--perigo); font-weight: 600; }
.capa-progresso {
    height: 6px;
    margin-top: 10px;
    overflow: hidden;
    background: var(--superficie-3);
    border-radius: var(--raio-pilula);
}
.capa-progresso[hidden] { display: none; }
.capa-progresso i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--texto);
    border-radius: inherit;
    transition: width var(--dur-2) linear;
}
.janela-rodape .esquerda { margin-right: auto; }

@media (max-width: 760px) {
    .container { padding: 0 16px; }
    .auth-grade { grid-template-columns: 1fr; }
    .auth-section { padding-top: 28px; }
    main > .container { padding-top: 24px; }
    .titulo-pagina { align-items: stretch; flex-direction: column; }
    .titulo-acoes .btn { flex: 1; }
    .nav-links a { padding: 6px 10px; }
}

/* ------------------------------------------------------------------ página do jogo
   Palco (mesa) à esquerda com a barra de ferramentas no topo; chat à direita, recolhível. */
body:has(main.game-page) { overflow: hidden; }
.game-page {
    display: flex;
    height: 100vh;
    height: 100dvh;
    background: var(--bg);
}
/* no computador a partida ocupa exatamente a tela: o histórico do chat rola no próprio painel
   em vez de esticar a página (em telas largas o mapa 3D ficava com milhares de pixels de altura) */
@media (min-width: 901px) {
    main.game-page { flex: none; min-height: 0; }
    .game-page > * { min-height: 0; }
}
.game-page .left-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 16px;
    overflow: auto;
    overscroll-behavior: contain;
}
/* topo da partida: nome do jogo à esquerda, ferramentas à direita */
.jogo-topo {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}
.game-page .right-panel {
    flex: none;
    width: 380px;
    max-width: 42vw;
    display: flex;
    flex-direction: column;
    transition: width var(--dur-3) var(--ease), opacity var(--dur-2) var(--ease);
}
body.chat-recolhido .game-page .right-panel { width: 0; opacity: 0; overflow: hidden; border: 0; }
.left-panel .container {
    flex: 1 1 200px;
    width: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}
.left-panel .container h1,
.left-panel .container h2 {
    margin: 0;
    overflow: hidden;
    font-size: 1.15rem;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.left-panel .container .selo { flex: none; }

/* barra de ferramentas da partida: grupo de ícones em pílula */
.top-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    padding: 3px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pilula);
    box-shadow: var(--sombra);
}
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    color: var(--texto-2);
    background: transparent;
    border: 0;
    border-radius: var(--raio-pilula);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transicao), color var(--transicao), transform var(--dur-1) var(--ease);
}
.btn-icon:hover { color: var(--texto); background: var(--superficie-2); }
.btn-icon:active { transform: scale(.93); }
.btn-icon.btn-danger { color: var(--perigo); padding: 0; border: 0; }
.btn-icon.btn-danger:hover { color: #fff; background: var(--perigo); }
.top-buttons .btn-icon,
.top-buttons a.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--texto-2);
    background: transparent;
    border: 0;
    border-radius: var(--raio-pilula);
}
.top-buttons .btn-icon:hover,
.top-buttons .btn-icon:focus-visible {
    color: var(--texto);
    background: var(--superficie-2);
    transform: none;
}
.top-buttons .btn-icon.ativo { color: var(--inverso-texto); background: var(--inverso); }
.top-buttons .separador { width: 1px; height: 22px; margin: 0 4px; background: var(--borda); }
.top-buttons .btn-icon .icone { display: block; }
.pm-ico { display: inline-flex; vertical-align: -4px; }
.pm-ico .icone { width: 16px; height: 16px; }
.pm-tema .icone, #theme-toggle .icone { display: block; }

/* gerenciar relações */
#relationManager {
    display: none;
    width: 100%;
    max-width: 420px;
    padding: 18px;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-media);
}
#relationManager h3 {
    margin-bottom: 12px;
    font-size: 1rem;
}
#addRelationForm {
    max-width: none;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}
#addRelationForm select { margin-bottom: 12px; }
#addRelationForm button { width: 100%; }

/* lista de personagens */
#characterContainer {
    max-height: 40vh;
    overflow-y: auto;
    padding: 6px;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    animation: entrar var(--dur-2) var(--ease) both;
}
#characterContainer:empty { display: none; }
.character-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px;
    border-radius: var(--raio-sm);
    transition: background-color var(--transicao);
}
.character-item + .character-item { margin-top: 2px; }
.character-item:hover { background: var(--superficie-2); }
.character-button {
    flex: 1;
    min-height: 40px;
    padding: 8px 10px;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-align: left;
    color: var(--texto);
    background: none;
    border: 0;
    border-radius: var(--raio-sm);
    cursor: pointer;
}
.delete-character {
    flex: none;
    width: 34px;
    height: 34px;
    padding: 0;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    color: var(--texto-3);
    background: none;
    border: 0;
    border-radius: var(--raio-sm);
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao);
}
.delete-character:hover {
    color: var(--perigo);
    background: var(--perigo-suave);
}

/* modal da ficha (arrastável) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 6%;
    left: 10%;
    width: 55%;
    height: 88%;
    overflow: hidden;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-lg);
    box-shadow: var(--sombra-alta);
    animation: janela-abrir var(--dur-3) var(--ease) both;
}
.modal-header,
.modal-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 6px 10px;
    background: var(--superficie);
    cursor: grab;
}
.modal-header { border-bottom: 1px solid var(--borda); }
.modal-header::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 4px;
    background: var(--borda-forte);
    border-radius: var(--raio-pilula);
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.modal-footer { min-height: 14px; padding: 0; border-top: 1px solid var(--borda); }
.drag-handle {
    position: absolute;
    cursor: grab;
}
.handle-top,
.handle-bottom {
    left: 0;
    width: 100%;
    height: 100%;
}
.handle-top { top: 0; left: 5%; width: 95%; }
.handle-bottom { bottom: 0; }
.handle-left,
.handle-right {
    top: 0;
    width: 10px;
    height: 100%;
}
.handle-left { left: 0; }
.handle-right { right: 0; }
.close {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-family: inherit;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--texto-2);
    background: none;
    border: 0;
    border-radius: var(--raio-pilula);
    cursor: pointer;
    transition: background-color var(--transicao), color var(--transicao);
}
.close:hover {
    color: var(--texto);
    background: var(--superficie-2);
}
.modal-content {
    position: relative;
    width: 100%;
    height: calc(100% - 54px);
}
.modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* botão de tema */
#theme-toggle {
    top: auto !important;
    right: auto !important;
    left: 16px !important;
    bottom: 16px !important;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    font-size: 1rem;
    color: var(--texto) !important;
    background: var(--superficie) !important;
    border: 1px solid var(--borda) !important;
    border-radius: 50% !important;
    box-shadow: var(--sombra) !important;
    cursor: pointer;
    transition: background-color var(--transicao), transform var(--dur-1) var(--ease);
}
#theme-toggle:active { transform: scale(.93); }

/* páginas do site: o botão de tema vira um item do menu */
.nav-links #theme-toggle.tema-texto {
    position: static !important;
    display: inline-flex;
    width: auto;
    height: auto;
    min-height: 36px;
    padding: 6px 12px !important;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto-2) !important;
    background: none !important;
    border: 0 !important;
    border-radius: var(--raio-pilula) !important;
    box-shadow: none !important;
    cursor: pointer;
}
.nav-links #theme-toggle.tema-texto:hover { color: var(--texto) !important; background: var(--superficie-2) !important; }

/* na página do jogo, o botão de tema fica no cabeçalho do chat */
body:has(main.game-page) #theme-toggle {
    top: 9px !important;
    right: 14px !important;
    bottom: auto !important;
    left: auto !important;
    box-shadow: none !important;
}
body.chat-recolhido:has(main.game-page) #theme-toggle { display: none; }

/* recolher o chat (só em telas largas; no celular as abas do rodapé cuidam disso) */
.chat-alternar { display: inline-flex; }
@media (max-width: 900px) { .chat-alternar { display: none !important; } }

/* responsivo */
@media (max-width: 1000px) {
    .modal {
        top: 4%;
        left: 4%;
        width: 92%;
        height: 90%;
    }
}
@media (max-width: 900px) {
    body:has(main.game-page) { overflow: auto; }
    .game-page {
        flex-direction: column;
        height: auto;
    }
    .game-page .left-panel {
        flex: none;
        overflow: visible;
    }
    .game-page .right-panel {
        flex: none;
        width: auto;
        min-width: 0;
        max-width: none;
        height: 70vh;
    }
}
@media (max-width: 600px) {
    body { font-size: 14px; }
    .game-page .left-panel { padding: 10px; }
    .top-buttons { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ aviso de conexão (queda, volta e sessão expirada) */
.conexao-aviso {
    position: fixed;
    top: 12px;
    left: 50%;
    z-index: 10001;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 24px);
    padding: 8px 14px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--inverso-texto);
    background: var(--inverso);
    border-radius: var(--raio-pilula);
    box-shadow: var(--sombra-alta);
    animation: aviso-descer var(--dur-3) var(--ease) both;
}
.conexao-aviso[hidden] { display: none; }
.conexao-ponto {
    width: 9px;
    height: 9px;
    flex: none;
    background: var(--perigo);
    border-radius: 50%;
    animation: conexao-pulso 1s ease-in-out infinite;
}
.conexao-aviso.voltou .conexao-ponto { background: var(--sucesso); animation: none; }
.conexao-aviso.sessao .conexao-ponto { background: var(--aviso); }
@keyframes conexao-pulso { 50% { opacity: .3; } }
.conexao-btn {
    padding: 4px 12px;
    font: inherit;
    font-size: .78rem;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--raio-pilula);
    cursor: pointer;
}
.conexao-btn[hidden] { display: none; }

/* quem está na mesa (chat do jogo e painel do mestre) */
.presenca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; font-size: .76rem; color: var(--texto-2); border-bottom: 1px solid var(--borda); }
.presenca:empty { display: none; }
/* no jogo o botão de tema fica no canto de cima à direita */
.right-panel > .presenca { padding-right: 56px; }
.presenca-rot { font-weight: 700; }
.presenca-rot b { color: var(--texto); }
.presenca-pessoa { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--texto); }
.presenca-pessoa small { font-weight: 500; color: var(--texto-3); }
.presenca-pessoa i { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); }
.presenca-pessoa.online i { background: var(--sucesso); box-shadow: 0 0 0 3px var(--sucesso-suave); }
.presenca-pessoa.ausente i { background: var(--aviso); }
.presenca-pessoa.fora { color: var(--texto-3); }

/* ------------------------------------------------------------------ página Sobre (pública) */
.sobre-abertura {
    padding: 16px 0 36px;
    border-bottom: 1px solid var(--borda);
}
.sobre-abertura h1 { max-width: 18ch; font-size: clamp(2.1rem, 5vw, 3.4rem); }
.sobre-abertura p { max-width: 62ch; font-size: 1.08rem; color: var(--texto-2); }
.sobre-abertura .btn { margin: 6px 8px 0 0; }
.sobre-bloco {
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 12px 48px;
    padding: 32px 0;
    border-bottom: 1px solid var(--borda);
}
.sobre-bloco h2 { margin: 0; }
.sobre-lista { margin: 0; }
.sobre-lista dt { font-weight: 700; }
.sobre-lista dd { max-width: 62ch; margin: 2px 0 16px; color: var(--texto-2); }
.sobre-passos { margin: 0; padding-left: 1.3em; }
.sobre-passos li { margin-bottom: 8px; }
.sobre code {
    padding: 1px 6px;
    font-family: var(--mono);
    font-size: .88em;
    background: var(--superficie-2);
    border-radius: 6px;
}
@media (max-width: 760px) {
    .sobre-bloco { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ avisos flutuantes (toasts) */
.toasts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 10002;
    display: grid;
    gap: 8px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}
.toast {
    padding: 11px 16px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--inverso-texto);
    background: var(--inverso);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    animation: entrar var(--dur-2) var(--ease) both;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.toast.saindo { opacity: 0; transform: translateY(6px); }
.toast-sucesso { border-left: 4px solid var(--sucesso); }
.toast-erro { border-left: 4px solid var(--perigo); }

/* ------------------------------------------------------------------ movimento
   Rápido e funcional; some com a preferência por movimento reduzido. */
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-abrir { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes janela-abrir { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fundo-abrir { from { opacity: 0; } to { opacity: 1; } }
@keyframes aviso-descer { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes girar { to { transform: rotate(360deg); } }

/* páginas entram com um esmaecer curto; navegação entre páginas com transição nativa onde houver */
main { animation: surgir var(--dur-3) var(--ease) both; }
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 180ms; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    @view-transition { navigation: none; }
}