/* auth.css — telas de login, cadastro, conta e administração.
   Reaproveita as variáveis de tema definidas em style.css (:root). */

.auth-body {
    display: block;
    align-items: initial;
    justify-content: initial;
    padding: 0;
}

/* O reprodutor (.app) deixa de depender do flex-center do body. */
.auth-body .app {
    margin: 32px auto;
    padding: 0 16px;
}

/* ------------------------------------------------------------- topo/nav */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.brand {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    text-decoration: none;
}

.brand-name {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--ink);
}

.brand-tagline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.who {
    color: var(--muted);
    font-size: 14px;
    white-space: nowrap;
}

.who b {
    color: var(--amber);
    font-weight: 600;
}

/* ------------------------------------------------ menu suspenso genérico */
/* Usado pelo hambúrguer do topo E pelo menu de ações de cada linha das
   listagens (ver dropdown.js) — um componente só, reaproveitado. */

[data-dropdown] {
    position: relative;
}

.hamburger-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.hamburger-btn span {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
}

.hamburger-btn:hover {
    border-color: var(--amber);
}

.kebab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.kebab-btn:hover {
    border-color: var(--amber);
    color: var(--amber);
}

.dropdown-panel {
    display: none;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    z-index: 100;
}

.dropdown-panel.is-open {
    display: flex;
}

.dropdown-panel form {
    margin: 0;
}

.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border-radius: 6px;
    color: var(--ink);
    text-decoration: none;
    font: inherit;
    font-size: 14px;
    background: none;
    border: none;
    cursor: pointer;
}

.dropdown-item:hover {
    background: var(--panel-2);
    color: var(--amber);
}

.dropdown-item--danger:hover {
    color: var(--check);
}

.topnav-guest {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 14px;
}

.topnav-guest a {
    color: var(--muted);
    text-decoration: none;
}

.topnav-guest a:hover {
    color: var(--ink);
}

/* ------------------------------------------------------------- página */

.page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.pagefoot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 24px;
    border-top: 1px solid var(--line);
}

.pagefoot .credit a {
    color: var(--muted);
    text-decoration: underline;
}

.pagefoot .credit a:hover {
    color: var(--amber);
}

.page h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    margin: 0 0 4px;
}

.page .subtitle {
    color: var(--muted);
    margin: 0 0 24px;
}

/* Telas de login/cadastro: título e subtítulo centralizados acima do
   cartão estreito (o card em si continua com texto alinhado à esquerda —
   só o cabeçalho da página centraliza). */
.auth-page {
    text-align: center;
}

.auth-page .card {
    text-align: left;
}

/* --------------------------------------------------------- cartão/form */

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px;
}

.card--narrow {
    max-width: 420px;
    margin: 24px auto 0;
}

.field {
    margin-bottom: 16px;
}

.field label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}

.field input[type=text],
.field input[type=email],
.field input[type=password],
.field select {
    width: 100%;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    padding: 10px 12px;
    font: inherit;
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--amber);
}

.field .hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.checkbox-row input {
    width: 16px;
    height: 16px;
    accent-color: var(--amber);
}

.checkbox-row label {
    margin: 0;
    font-size: 14px;
    color: var(--ink);
}

/* ------------------------------------------------------------- botões */

.btn {
    display: inline-block;
    background: var(--amber);
    color: #1a1400;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.btn:hover {
    filter: brightness(1.06);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn--danger {
    background: transparent;
    color: var(--check);
    border: 1px solid var(--check);
}

.btn--danger:hover {
    background: var(--check);
    color: #fff;
    filter: none;
}

.btn--sm {
    padding: 6px 12px;
    font-size: 13px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.form-aside {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--muted);
}

.form-aside a {
    color: var(--amber);
    text-decoration: none;
}

/* --------------------------------------------------------------- flash */

.flash {
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 14px;
    border: 1px solid transparent;
}

.flash-success {
    background: rgba(80, 200, 120, 0.12);
    border-color: rgba(80, 200, 120, 0.4);
    color: #9be7b4;
}

.flash-error {
    background: rgba(224, 82, 82, 0.12);
    border-color: rgba(224, 82, 82, 0.4);
    color: #f0a3a3;
}

.flash-info {
    background: var(--amber-dim);
    border-color: rgba(245, 165, 36, 0.4);
    color: #f5c877;
}

.errors {
    list-style: none;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 8px;
    background: rgba(224, 82, 82, 0.12);
    border: 1px solid rgba(224, 82, 82, 0.4);
    color: #f0a3a3;
    font-size: 14px;
}

.errors li + li {
    margin-top: 4px;
}

/* ------------------------------------------------- listas responsivas */
/*
 * Componente padrão do projeto para QUALQUER listagem (partidas, usuários,
 * o que vier depois). Substitui <table> por um grid de divs porque tabela
 * HTML força rolagem horizontal quando o conteúdo não cabe — aqui a gente
 * nunca deixa isso acontecer: colunas de menor prioridade somem conforme o
 * espaço encolhe, e abaixo de 700px a lista inteira vira cartões
 * empilhados (rótulo + valor), sem tabela nenhuma.
 *
 * Uso: .list > (.list-head + .list-row*), cada um com o mesmo número de
 * .list-cell na mesma ordem. O layout de colunas (grid-template-columns)
 * é definido por listagem via um modificador (ex.: .list--games). Cada
 * .list-cell que pode sumir leva data-priority="3" ou "4" (quanto maior,
 * primeiro a sumir) e data-label="Nome da coluna" (usado só no modo
 * cartão). A célula de ações fica sempre visível — é só o botão "⋮".
 */

.list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 12px;
    /* Sem overflow:hidden aqui de propósito — isso cortava o menu suspenso
       das linhas (o dropdown de ações some pra fora da lista quando aberto
       perto do final da tela). O arredondado fica só no primeiro/último
       filho, abaixo. */
}

.list > *:first-child {
    border-radius: 12px 12px 0 0;
}

.list > *:last-child {
    border-radius: 0 0 12px 12px;
}

.list-head,
.list-row {
    display: grid;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
}

.list-head {
    background: var(--panel-2);
    color: var(--muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.list-row {
    border-top: 1px solid var(--line);
    font-size: 14px;
}

.list-row:hover {
    background: var(--panel-2);
}

.list-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-cell--menu {
    display: flex;
    justify-content: flex-end;
    overflow: visible;
}

.list-cell-sub {
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Prioridade: colunas menos essenciais somem primeiro conforme o espaço
   encolhe. Cada listagem decide, via data-priority, o que é dispensável. */
@media (max-width: 1100px) {
    .list [data-priority="4"] { display: none; }
}
@media (max-width: 900px) {
    .list [data-priority="3"] { display: none; }
}

/* Abaixo de 700px: cartão empilhado por registro, tudo visível de novo
   (espaço vertical é barato; espaço horizontal é o que não sobra). */
@media (max-width: 700px) {
    .list-head {
        display: none;
    }
    .list-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        position: relative;
        padding: 16px 44px 16px 16px;
    }
    .list-row [data-priority] {
        display: block !important;
        white-space: normal;
    }
    .list-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        margin-bottom: 2px;
    }
    .list-cell--primary {
        font-size: 15px;
        font-weight: 600;
    }
    .list-cell--primary::before {
        display: none;
    }
    .list-cell--menu {
        position: absolute;
        top: 12px;
        right: 12px;
    }
}

/* Larguras de coluna por listagem (o grid muda de contagem de colunas
   junto com as mesmas quebras de prioridade acima, senão sobra trilho
   vazio no lugar da coluna escondida). */

.list--games .list-head,
.list--games .list-row {
    grid-template-columns: 1fr 110px 1fr 130px 44px;
}
@media (max-width: 1100px) {
    .list--games .list-head, .list--games .list-row { grid-template-columns: 1fr 110px 44px; }
}
@media (max-width: 900px) {
    .list--games .list-head, .list--games .list-row { grid-template-columns: 1fr 44px; }
}

.list--users .list-head,
.list--users .list-row {
    grid-template-columns: 1fr 100px 90px 110px 44px;
}
@media (max-width: 1100px) {
    .list--users .list-head, .list--users .list-row { grid-template-columns: 1fr 100px 90px 44px; }
}
@media (max-width: 900px) {
    .list--users .list-head, .list--users .list-row { grid-template-columns: 1fr 44px; }
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge--admin {
    background: var(--amber-dim);
    color: var(--amber);
}

.badge--user {
    background: var(--panel-2);
    color: var(--muted);
}

.badge--on {
    background: rgba(80, 200, 120, 0.14);
    color: #9be7b4;
}

.badge--off {
    background: rgba(224, 82, 82, 0.14);
    color: #f0a3a3;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* ------------------------------------------------------------- modal */
/* Componente padrão pra confirmação destrutiva E pra "ver detalhes" de
   qualquer registro de lista (ver modal.js). */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8, 11, 18, 0.72);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal-overlay.is-open {
    display: flex;
}

.modal-box {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    max-width: 460px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.modal-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
}

.modal-close {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    flex-shrink: 0;
}

.modal-close:hover {
    color: var(--ink);
}

.modal-body {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.6;
}

.modal-body p {
    margin: 0;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 18px;
    margin: 0;
}

.detail-list dt {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.detail-list dd {
    margin: 0;
}

/* ------------------------------------------------- popup de ajuda/notação */

code {
    font-family: 'JetBrains Mono', monospace;
    background: var(--panel-2);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.92em;
    color: var(--amber);
}

.help-subhead {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    color: var(--ink);
    margin: 18px 0 8px;
}

.modal-body .detail-list:first-of-type {
    margin-top: 0;
}

.help-example {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0 0 8px;
    color: var(--ink);
}

.help-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--amber-dim);
    border: 1px solid rgba(245, 165, 36, 0.4);
    color: var(--amber);
    font: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}

.help-btn:hover {
    border-color: var(--amber);
    background: rgba(245, 165, 36, 0.22);
}

/* --------------------------------------------------- tabuleiro editável */

.sq.selected::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--amber);
    opacity: .38;
}

.sq.legal-target::after {
    content: "";
    position: absolute;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: rgba(20, 20, 20, .38);
}

.sq.legal-capture::after {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    border: 3px solid rgba(20, 20, 20, .45);
    background: transparent;
}

.builder-layout {
    display: grid;
    /* Proporção relativa (estilo "colunas" do Bootstrap: 4/10 pro
       tabuleiro, 6/10 pros dados da partida) em vez de pixel fixo — escala
       de verdade com a largura disponível, não só em pontos de quebra
       específicos. minmax(0, ...) evita que qualquer lado force rolagem
       horizontal enquanto encolhe. No mobile vira uma coluna só (ver
       media query abaixo), já que lado a lado não cabe direito numa tela
       de celular de qualquer forma. */
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 720px) {
    .builder-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.builder-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
}

.builder-move-input {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.builder-move-input input {
    flex: 1;
    min-width: 0;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    padding: 10px 12px;
    font: inherit;
}

.builder-move-input input:focus {
    outline: none;
    border-color: var(--amber);
}

.builder-status {
    min-height: 20px;
    font-size: 13px;
    margin-top: 8px;
}

.builder-status.error {
    color: var(--check);
}

.builder-status.ok {
    color: #9be7b4;
}

.builder-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.mode-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.mode-card {
    display: block;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    text-decoration: none;
    color: var(--ink);
    transition: border-color .15s ease;
}

.mode-card:hover {
    border-color: var(--amber);
}

.mode-card .mode-icon {
    font-size: 28px;
    margin-bottom: 10px;
    display: block;
}

.mode-card h3 {
    margin: 0 0 6px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
}

.mode-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
}

.builder-textarea {
    width: 100%;
    min-height: 140px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    padding: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    resize: vertical;
}

.builder-textarea:focus {
    outline: none;
    border-color: var(--amber);
}

/* ------------------------------------------------------------- instalador */

.install-steps {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.install-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--panel);
    border: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.install-step.is-active {
    border-color: var(--amber);
    color: var(--ink);
}

.install-step.is-done {
    color: #9be7b4;
}

.install-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--panel-2);
    font-size: 11px;
    font-weight: 700;
}

.install-step.is-active .install-step-num {
    background: var(--amber);
    color: #1a1400;
}

.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.check-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--panel-2);
    border: 1px solid var(--line);
}

.check-item.check-fail {
    border-color: rgba(224, 82, 82, 0.5);
}

.check-item.check-warn {
    border-color: rgba(245, 165, 36, 0.5);
}

.check-icon {
    font-size: 18px;
    line-height: 1.3;
}

.check-detail {
    color: var(--muted);
    font-size: 13px;
}

.sample-game-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 12px;
    cursor: pointer;
}

.sample-game-option:hover {
    border-color: var(--amber);
}

.sample-game-option input {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    accent-color: var(--amber);
    flex-shrink: 0;
}

.sample-game-option span {
    display: block;
}

.sample-game-meta {
    display: block;
    color: var(--amber);
    font-size: 12px;
    margin: 2px 0 6px;
}

.sample-game-summary {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

/* --------------------------------------------------------------- home */

.home-hero {
    text-align: center;
    max-width: 560px;
    margin: 64px auto;
    padding: 0 16px;
}

.home-hero h1 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 36px;
    margin: 0 0 8px;
}

.home-hero-note {
    color: var(--muted);
    font-size: 14px;
    margin: 24px 0;
}