/*
 * VALDRAGON IMPERIAL DARK - Familia de Autenticacao (Decisao do Dono, 2026-09-26)
 *
 * Canvas obsidiana (#0a0a12), superficies por contraste (#101018 / #12121c),
 * bordas hairline ultra discretas rgba(200, 155, 60, 0.22), botoes forjados escuros
 * com acento dourado/ambar (#c89b3c) e tipografia canonica (Marcellus + Open Sans).
 * ZERO madeira, ZERO pergaminho, ZERO botoes vermelhos, ZERO caixas dentro de caixas.
 */

:root {
    --auth-bg-deep: #0a0a12;
    --auth-bg-subtle: #07070d;
    --auth-surface: #101018;
    --auth-surface-raised: #141420;
    --auth-surface-hover: #1c1c2a;
    --auth-gold: #c89b3c;
    --auth-gold-light: #f5dfa0;
    --auth-gold-cta: #d4a747;
    --auth-border-subtle: rgba(200, 155, 60, 0.20);
    --auth-border-focus: #c89b3c;
    --auth-text-primary: #e8d5a0;
    --auth-text-secondary: #c8ba9d;
    --auth-text-muted: #8f836f;
    --auth-font-title: 'Marcellus', Georgia, serif;
    --auth-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* TEMAS-OFICIAIS-01: cores que estavam fixas, mesmo valor (Imperial escuro). */
    --auth-page-bg: radial-gradient(circle at 50% 30%, #12121e 0%, #0a0a12 60%, #050508 100%);
    --auth-card-shadow: 0 20px 48px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.02);
    --auth-title-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    --auth-placeholder: #5c5548;
    --auth-focus-ring: rgba(200, 155, 60, 0.35);
    --auth-autofill-bg: #07070d;
    --auth-btn-bg: linear-gradient(180deg, #2a2217 0%, #17130d 100%);
    --auth-btn-bg-hover: linear-gradient(180deg, #382d1f 0%, #201a12 100%);
    --auth-btn-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
    --auth-btn-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    --auth-btn-shadow-hover: 0 6px 20px rgba(200, 155, 60, 0.25), 0 0 12px rgba(200, 155, 60, 0.15);
    --auth-btn-text-hover: #ffffff;
    --auth-btn-text: #f5dfa0;
    --auth-erro-bg: rgba(90, 20, 15, 0.35);
    --auth-erro-borda: rgba(180, 50, 40, 0.4);
    --auth-erro-texto: #fbd0cd;
    --auth-ok-bg: rgba(20, 60, 30, 0.35);
    --auth-ok-borda: rgba(50, 160, 80, 0.4);
    --auth-ok-texto: #c8f5d0;
}

body,
.register-page-shell,
body.tibia-layout {
    background: var(--auth-page-bg) !important;
    color: var(--auth-text-primary) !important;
    font-family: var(--auth-font-body) !important;
    min-height: 100vh !important;
    margin: 0 !important;
}

/*
 * TCD-PORTAL-CLASSICO-01 (D-09): `register-page.css` (layout antigo com arte)
 * ainda carrega e fixa a altura do painel na proporcao da moldura
 * (`height: var(--auth-h)`, 720px ou mais) e corta a rolagem da pagina. Sem a
 * arte, o cartao cresce com o formulario e a pagina rola.
 * REMOVE-LEGACY: sair de `register-page.css` nas telas de conta.
 */
.register-page-shell {
    overflow: visible !important;
}

.register-form-panel {
    height: auto !important;
    aspect-ratio: auto !important;
}

/* Ocultar quaisquer cantoneiras antigas de imagem ou molduras cenograficas de madeira */
.register-page-corner,
.register-page-shell::before,
.register-form-frame,
.register-visual-panel {
    display: none !important;
}

/* Layout limpo e moderno centralizado */
.register-layout {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: calc(100vh - 40px) !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding: 24px 16px !important;
}

.register-form-panel,
.tibia-register-layout,
.tibia-register-wrapper {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    min-height: 0 !important;
}

/* Painel de formulario = surface dark limpa (como VS Code / Diablo 3) */
.register-form-content,
.tibia-register-card,
.tibia-register-panel {
    background: var(--auth-surface) !important;
    border: 1px solid var(--auth-border-subtle) !important;
    border-radius: 6px !important;
    box-shadow: var(--auth-card-shadow) !important;
    padding: 32px 28px !important;
    color: var(--auth-text-primary) !important;
}

/* Cabecalho de Titulo */
.register-form-heading,
.tibia-register-header {
    background: transparent !important;
    border-bottom: 1px solid var(--auth-border-subtle) !important;
    border-radius: 0 !important;
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
    text-align: center !important;
}

.register-form-heading span,
.tibia-register-header span {
    display: block !important;
    color: var(--auth-text-muted) !important;
    font-family: var(--auth-font-body) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    background: none !important;
    border: none !important;
    clip-path: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.register-form-heading h1,
.register-form-heading h2,
.tibia-register-header h1,
.tibia-register-header h2,
.tibia-register-title {
    color: var(--auth-gold-light) !important;
    font-family: var(--auth-font-title) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    margin: 0 !important;
    text-shadow: var(--auth-title-shadow) !important;
}

.register-form-heading::after {
    display: none !important;
}

/* Textos e Labels funcionais */
.register-field-group label,
.register-form label,
.tibia-form-group label,
.tibia-register-panel label {
    display: block !important;
    color: var(--auth-text-secondary) !important;
    font-family: var(--auth-font-body) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
}

.register-help-text,
.register-form p,
.register-field-hint,
.tibia-form-hint,
.tibia-register-intro {
    color: var(--auth-text-muted) !important;
    font-family: var(--auth-font-body) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.tibia-dropcap {
    display: inline !important;
    font-size: inherit !important;
    color: inherit !important;
    font-family: inherit !important;
}

/* Inputs escuros estilo VS Code / Diablo */
.register-input-wrap,
.register-form input:not([type='hidden']):not([type='checkbox']),
.register-form select,
.tibia-form-group input,
.tibia-register-panel input:not([type='hidden']):not([type='checkbox']) {
    background: var(--auth-bg-subtle) !important;
    border: 1px solid var(--auth-border-subtle) !important;
    border-radius: 4px !important;
    color: var(--auth-text-primary) !important;
    font-family: var(--auth-font-body) !important;
    /* FUNIL-ATIVACAO-01: 16px evita o zoom automatico do iOS no foco e 44px
       e o alvo minimo de toque. */
    font-size: 16px !important;
    min-height: 44px !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.register-input-wrap {
    display: flex !important;
    align-items: center !important;
    padding: 0 4px !important;
}

.register-input-wrap input,
/* UX-23: a regra generica de campo tem mais especificidade e devolvia a borda
   ao campo dentro do grupo (borda dupla). */
.register-form .register-input-wrap input:not([type='hidden']):not([type='checkbox']) {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 8px 10px !important;
    width: 100% !important;
}

.register-input-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--auth-gold) !important;
    padding-left: 8px !important;
    font-size: 16px !important;
}

.register-form input::placeholder,
.tibia-form-group input::placeholder,
.tibia-register-panel input::placeholder {
    color: var(--auth-placeholder) !important;
}

.register-input-wrap:focus-within,
.register-form input:focus-visible,
.tibia-form-group input:focus,
.tibia-register-panel input:focus-visible {
    border-color: var(--auth-border-focus) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px var(--auth-focus-ring) !important;
}

/* Previne que o autofill do navegador quebre a paleta dark com amarelo ou branco.
   Os seletores repetem o do bloco de inputs: sem isso o `box-shadow: none`
   dele vence e o amarelo nativo aparece. `:autofill` fica em regra propria
   porque um seletor desconhecido invalida a lista inteira. */
.register-form input:not([type='hidden']):not([type='checkbox']):-webkit-autofill,
.register-form input:not([type='hidden']):not([type='checkbox']):-webkit-autofill:hover,
.register-form input:not([type='hidden']):not([type='checkbox']):-webkit-autofill:focus,
.register-form input:not([type='hidden']):not([type='checkbox']):-webkit-autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--auth-autofill-bg) inset !important;
    -webkit-text-fill-color: var(--auth-text-primary) !important;
    caret-color: var(--auth-text-primary) !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.register-form input:not([type='hidden']):not([type='checkbox']):autofill,
.register-form input:not([type='hidden']):not([type='checkbox']):autofill:hover,
.register-form input:not([type='hidden']):not([type='checkbox']):autofill:focus,
.register-form input:not([type='hidden']):not([type='checkbox']):autofill:active {
    box-shadow: 0 0 0 1000px var(--auth-bg-subtle) inset !important;
    -webkit-text-fill-color: var(--auth-text-primary) !important;
    caret-color: var(--auth-text-primary) !important;
}

/* Acesso pela conta Valdracon (Google e demais provedores): botao secundario,
   fica abaixo do dourado de envio na hierarquia. */
.register-identity {
    margin: 4px 0 14px;
}

.register-identity-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    border: 1px solid var(--auth-border-subtle);
    border-radius: 4px;
    background: var(--auth-bg-subtle);
    color: var(--auth-text-primary);
    font-family: var(--auth-font-body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}

.register-identity-button:hover,
.register-identity-button:focus-visible {
    border-color: #4285f4;
    background: rgba(66, 133, 244, 0.08);
    color: var(--auth-text-primary);
    outline: none;
    box-shadow: 0 0 10px rgba(66, 133, 244, 0.15);
}

.register-identity-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    color: var(--auth-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.register-identity-divider::before,
.register-identity-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--auth-border-subtle);
}

/* Botoes de Acao - Metal Ouro/Ambar Forjado Escuro (NUNCA vermelho, NUNCA azul) */
.register-submit-button,
.register-submit,
.tibia-btn-submit,
.tibia-register-submit,
.classic-btn--primary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    background: var(--auth-btn-bg) !important;
    border: 1px solid var(--auth-gold) !important;
    border-radius: 4px !important;
    color: var(--auth-btn-text) !important;
    /* Botao e controle: fonte funcional (AGENTS.md secao 12). */
    font-family: var(--auth-font-body) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    min-height: 44px !important;
    cursor: pointer !important;
    box-shadow: var(--auth-btn-shadow) !important;
    text-shadow: var(--auth-btn-text-shadow) !important;
    transition: all 0.15s ease !important;
    margin-top: 16px !important;
}

.register-submit-button:hover,
.register-submit:hover,
.tibia-btn-submit:hover,
.tibia-register-submit:hover {
    background: var(--auth-btn-bg-hover) !important;
    border-color: var(--auth-gold-light) !important;
    box-shadow: var(--auth-btn-shadow-hover) !important;
    color: var(--auth-btn-text-hover) !important;
    transform: translateY(-1px) !important;
}

/* Links secundarios limpos */
.register-links,
.tibia-register-links {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 20px !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--auth-border-subtle) !important;
    background: none !important;
    gap: 12px !important;
}

.register-links a,
.register-link-secondary,
.register-link-tertiary,
.tibia-register-links a {
    color: var(--auth-text-secondary) !important;
    font-family: var(--auth-font-body) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 44px !important;
    transition: color 0.15s ease !important;
}

.register-links a:hover,
.register-link-secondary:hover,
.register-link-tertiary:hover,
.tibia-register-links a:hover {
    color: var(--auth-gold-light) !important;
    text-decoration: underline !important;
}

/* Alertas semanticos sem borda pesada */
.register-alert,
.tibia-alert-success,
.tibia-alert-error {
    border-radius: 4px !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
    margin-bottom: 16px !important;
}

.register-alert-error,
.tibia-alert-error {
    background: var(--auth-erro-bg) !important;
    border: 1px solid var(--auth-erro-borda) !important;
    color: var(--auth-erro-texto) !important;
}

.register-alert-success,
.tibia-alert-success {
    background: var(--auth-ok-bg) !important;
    border: 1px solid var(--auth-ok-borda) !important;
    color: var(--auth-ok-texto) !important;
}

/* Termos legais checkbox */
.register-legal-group,
.tibia-legal-terms-box {
    margin: 12px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.register-legal-option,
.tibia-legal-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 12px !important;
    color: var(--auth-text-secondary) !important;
    background: var(--auth-surface-raised) !important;
    border: 1px solid var(--auth-border-subtle) !important;
    border-radius: 4px !important;
    padding: 8px 10px !important;
    cursor: pointer !important;
}

.register-legal-option input,
.tibia-legal-checkbox-label input {
    margin-top: 2px !important;
    accent-color: var(--auth-gold) !important;
}

/* Logo box nos cards */
.tibia-logo-box {
    margin-bottom: 16px !important;
    text-align: center !important;
}

.tibia-game-title {
    color: var(--auth-gold-light) !important;
    font-family: var(--auth-font-title) !important;
    font-size: 24px !important;
    margin: 6px 0 2px !important;
}

.tibia-game-subtitle-main {
    color: var(--auth-text-muted) !important;
    font-size: 12px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

.tibia-game-subtitle {
    display: none !important;
}

@media (max-width: 767.98px) {
    .register-layout {
        padding: 16px 12px !important;
        min-height: 100vh !important;
    }
    
    .register-form-content,
    .tibia-register-card,
    .tibia-register-panel {
        padding: 24px 18px !important;
    }

    .register-submit-button,
    .tibia-btn-submit {
        min-height: 44px !important;
    }
}

/* ============================================================
 * VALDRAGON CLASSICO `valdragon` (TEMAS-OFICIAIS-01, OpenSpec 103)
 * Login, cadastro e senha seguem o tema publico escolhido no Admin.
 * Pergaminho com cartao claro e botao de madeira, como o Classico do jogo.
 * ============================================================ */
body[data-public-theme="valdragon"] {
    --auth-bg-deep: #d9c98f;
    --auth-bg-subtle: #fbf5e2;
    --auth-surface: #f5edd1;
    --auth-surface-raised: #f5edd1;
    --auth-surface-hover: #ebdca8;
    --auth-gold: #7a4c18;
    --auth-gold-light: #8c5a1c; /* titulo sobre creme: ~5:1 */
    --auth-gold-cta: #c89435;
    --auth-border-subtle: rgba(88, 60, 42, 0.45);
    --auth-border-focus: #7a4c18;
    --auth-text-primary: #1b120c;
    --auth-text-secondary: #3a261c;
    --auth-text-muted: #604e38;
    /* Fundo de madeira escura do Valdragon Classico; cartao em pergaminho. */
    --auth-page-bg: radial-gradient(circle at 50% 20%, #2f2017 0%, #1e140e 60%, #140d09 100%);
    --auth-card-shadow: 0 16px 40px rgba(58, 38, 28, 0.35), 0 0 0 1px rgba(88, 60, 42, 0.35);
    --auth-title-shadow: none;
    --auth-placeholder: #7d6a52;
    --auth-focus-ring: rgba(122, 76, 24, 0.45);
    --auth-autofill-bg: #fbf5e2;
    /* Primario de bronze, como `.classic-btn--primary` do jogo (UX-23). */
    --auth-btn-bg: linear-gradient(180deg, #7c5a2b 0%, #543b18 100%);
    --auth-btn-bg-hover: linear-gradient(180deg, #966f36 0%, #684a20 100%);
    --auth-btn-shadow: 0 4px 12px rgba(36, 24, 21, 0.45);
    --auth-btn-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    --auth-btn-shadow-hover: 0 6px 18px rgba(36, 24, 21, 0.5);
    --auth-btn-text-hover: #ffffff;
    --auth-btn-text: #fff4d0;
    --auth-erro-bg: rgba(108, 26, 18, 0.12);
    --auth-erro-borda: rgba(108, 26, 18, 0.55);
    --auth-erro-texto: #6c1a12;
    --auth-ok-bg: rgba(36, 95, 36, 0.12);
    --auth-ok-borda: rgba(36, 95, 36, 0.5);
    --auth-ok-texto: #245f24;
}

body[data-public-theme="valdragon"] .register-identity-button {
    background: #fbf5e2 !important;
    border-color: rgba(88, 60, 42, 0.45) !important;
    color: #1b120c !important;
}

body[data-public-theme="valdragon"] .register-identity-button:hover,
body[data-public-theme="valdragon"] .register-identity-button:focus-visible {
    background: #f5edd1 !important;
    border-color: #1a73e8 !important;
    color: #1b120c !important;
    box-shadow: 0 0 8px rgba(26, 115, 232, 0.25) !important;
}

body[data-public-theme="valdragon"] .register-identity-divider {
    color: #604e38 !important;
}

body[data-public-theme="valdragon"] .register-identity-divider::before,
body[data-public-theme="valdragon"] .register-identity-divider::after {
    border-top-color: rgba(88, 60, 42, 0.35) !important;
}

/* Celular: primario com 48px (Material 3, transportavel ao app). */
@media (max-width: 767.98px) {
    .register-submit-button,
    .register-submit {
        min-height: 48px !important;
    }
}