@import url("game-theme.css");

body.auth-page {
    background:
        radial-gradient(circle at 50% -10%, rgba(117, 101, 78, 0.14), transparent 44%),
        linear-gradient(180deg, var(--ctr-theme-page-top) 0%, var(--ctr-theme-page) 70%);
    color: var(--ctr-theme-text);
}

a,
.auth-recovery-link,
.auth-policy-links a,
.auth-protection-note a {
    color: var(--ctr-theme-accent-bright);
}

a:hover,
.auth-recovery-link:hover,
.auth-protection-note a:hover {
    color: var(--ctr-theme-heading);
}

.auth-tagline,
.legal-panel h1,
.legal-panel h2 {
    color: var(--ctr-theme-heading);
}

.auth-tagline span,
.auth-footer-separator {
    color: var(--ctr-theme-accent);
}

.auth-panel {
    border-color: var(--ctr-theme-border);
    background: linear-gradient(180deg, var(--ctr-theme-surface-raised), var(--ctr-theme-surface));
    color: var(--ctr-theme-text);
    box-shadow: 0 18px 48px var(--ctr-theme-shadow);
}

.auth-panel::before,
.auth-panel::after {
    border-color: var(--ctr-theme-accent);
    background: radial-gradient(circle at 35% 30%, var(--ctr-theme-accent-bright), var(--ctr-theme-border) 62%, var(--ctr-theme-field) 68%);
    box-shadow: 0 0 0 2px var(--ctr-theme-surface);
}

.auth-panel-heading h1,
.auth-field label {
    color: var(--ctr-theme-heading);
}

.auth-heading-star {
    color: var(--ctr-theme-accent);
}

.auth-heading-star::before,
.auth-heading-star::after {
    background: var(--ctr-theme-border-soft);
}

.auth-field input,
.auth-field select,
.auth-field textarea {
    border-color: var(--ctr-theme-border);
    background: var(--ctr-theme-field);
    color: var(--ctr-theme-text);
    box-shadow: inset 0 1px 3px var(--ctr-theme-shadow);
}

.auth-field input:hover,
.auth-field select:hover,
.auth-field textarea:hover,
.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus {
    border-color: var(--ctr-theme-accent-bright);
}

.auth-field-help {
    color: var(--ctr-theme-muted);
}

.auth-age-confirmation input {
    accent-color: var(--ctr-theme-accent);
}

.auth-primary-button {
    border-color: var(--ctr-theme-accent);
    background: linear-gradient(180deg, var(--ctr-theme-button-top), var(--ctr-theme-button-bottom));
    color: var(--ctr-theme-button-text);
    box-shadow: 0 5px 14px var(--ctr-theme-shadow);
}

.auth-secondary-button {
    border-color: var(--ctr-theme-border);
    background: var(--ctr-theme-secondary);
    color: var(--ctr-theme-heading);
    box-shadow: none;
}

.auth-secondary-button:hover {
    border-color: var(--ctr-theme-accent);
    color: var(--ctr-theme-accent-bright);
}

.auth-notice-success {
    border-color: var(--ctr-theme-success);
}

.auth-notice-error {
    border-color: var(--ctr-theme-error);
}

.auth-divider {
    color: var(--ctr-theme-accent);
}

.auth-divider::before,
.auth-divider::after {
    background: var(--ctr-theme-border-soft);
}

.auth-protection-note {
    border-color: var(--ctr-theme-border);
    background: var(--ctr-theme-field);
    color: var(--ctr-theme-muted);
}

.auth-protection-note strong {
    color: var(--ctr-theme-heading);
}

.legal-panel {
    border-color: var(--ctr-theme-border);
    background: linear-gradient(180deg, var(--ctr-theme-surface-raised), var(--ctr-theme-surface));
    color: var(--ctr-theme-text);
    box-shadow: 0 18px 48px var(--ctr-theme-shadow);
}

.legal-heading,
.legal-navigation {
    border-color: var(--ctr-theme-border-soft);
}

.legal-panel a,
.auth-footer-legal a {
    color: var(--ctr-theme-accent-bright);
}

.legal-panel a:hover,
.auth-footer-legal a:hover {
    color: var(--ctr-theme-heading);
}

.auth-footer,
.auth-footer-display {
    color: var(--ctr-theme-muted);
}

@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/google-sans-medium.woff2") format("woff2");
}

.auth-google-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0 0 22px;
    padding: 10px 12px;
    border: 1px solid #747775;
    border-radius: 4px;
    background: #fff;
    color: #1f1f1f;
    font: 500 14px/20px "Google Sans", Arial, sans-serif;
    text-decoration: none;
}

.auth-google-button:hover { background: #f2f2f2; color: #1f1f1f; }
.auth-google-button img { flex-shrink: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-color: var(--ctr-theme-accent);
}