@import url("../style.css");
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&family=Orbitron:wght@500;700;800&display=swap");

:root {
    --primary-color: #00d4ff;
    --secondary-color: #7dff5d;
    --accent-color: #ff3bc6;
    --dark-color: #040d1d;
    --light-color: #0a162b;
    --text-color: #ddecff;
    --text-light: #9ab9de;
    --border-color: #1f3f67;
    --neon-header-bg: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
    --neon-header-border: #ccddf3;
    --neon-header-text: #16345c;
    --neon-pricing-feature-text: #ffffff;
    --shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 18px 34px rgba(0, 0, 0, 0.45);
}

body {
    font-family: "Exo 2", "Segoe UI", sans-serif;
    color: var(--text-color);
    background:
        linear-gradient(120deg, rgba(0, 212, 255, 0.08) 0%, transparent 38%),
        linear-gradient(-120deg, rgba(255, 59, 198, 0.08) 0%, transparent 38%),
        radial-gradient(circle at 50% -8%, rgba(125, 255, 93, 0.12), transparent 44%),
        #020916;
}

body.home-page {
    color: var(--text-color);
    background:
        linear-gradient(120deg, rgba(0, 212, 255, 0.08) 0%, transparent 38%),
        linear-gradient(-120deg, rgba(255, 59, 198, 0.08) 0%, transparent 38%),
        radial-gradient(circle at 50% -8%, rgba(125, 255, 93, 0.12), transparent 44%),
        #020916;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.6;
    z-index: -1;
}

.top-bar {
    height: 10px;
    background: linear-gradient(90deg, #00d4ff 0%, #7dff5d 45%, #ff3bc6 100%);
}

.header,
body.home-page .header {
    background: var(--neon-header-bg);
    border-bottom: 1px solid var(--neon-header-border);
}

.logo-img {
    filter: drop-shadow(0 8px 14px rgba(0, 212, 255, 0.14));
}

.nav a,
.nav span,
body.home-page .nav a,
body.home-page .nav span {
    color: var(--neon-header-text);
    font-family: "Orbitron", "Segoe UI", sans-serif;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nav a:hover,
body.home-page .nav a:hover {
    color: #0088bf;
}

.hero-carousel {
    background: linear-gradient(140deg, #001736 0%, #00365a 40%, #00556f 100%);
}

.carousel-content {
    background: linear-gradient(180deg, rgba(3, 8, 22, 0.2) 0%, rgba(3, 8, 22, 0.78) 100%);
}

.carousel-content h2 {
    font-family: "Orbitron", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.carousel-btn {
    border-radius: 8px;
    background: rgba(0, 212, 255, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.5);
    color: #9cecff;
}

.carousel-btn:hover {
    background: rgba(0, 212, 255, 0.3);
}

body.home-page .carousel-btn {
    border-radius: 8px;
    background: rgba(0, 212, 255, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.5);
    color: #9cecff;
}

body.home-page .carousel-btn:hover {
    background: rgba(0, 212, 255, 0.3);
    color: #dff7ff;
}

body.home-page .section.bg-light,
.section.bg-light {
    background: rgba(6, 16, 35, 0.84);
    border-top: 1px solid rgba(0, 212, 255, 0.12);
    border-bottom: 1px solid rgba(0, 212, 255, 0.12);
}

body.home-page .section-title,
.section-title,
body.home-page .pricing-header h3,
.pricing-header h3 {
    font-family: "Orbitron", sans-serif;
    color: #d6ecff;
}

body.home-page .section-subtitle,
body.home-page .feature-card p,
body.home-page .pricing-note,
.section-subtitle,
.feature-card p,
.pricing-note {
    color: #98b8db;
}

body.home-page .feature-card,
body.home-page .pricing-card,
body.home-page .popular-game-card,
body.home-page .section-card,
body.home-page .modal-content,
body.home-page .top-games-list,
body.home-page .stat-card,
.feature-card,
.pricing-card,
.popular-game-card,
.section-card,
.modal-content,
.top-games-list,
.stat-card,
.login-container,
.crianca-card,
.crianca-select-card,
.crianca-access-box,
.conceito-card,
.jogo-card,
.monthly-ranking-card,
.monthly-ranking-stat,
.monthly-ranking-item,
.monthly-ranking-history-item {
    background: linear-gradient(160deg, rgba(9, 21, 44, 0.92), rgba(5, 15, 31, 0.92));
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 8px;
    box-shadow: var(--shadow);
    color: var(--text-color);
}

body.home-page .popular-game-info,
body.home-page .jogo-content,
body.home-page .pricing-features .feature-item,
body.home-page .pricing-footer,
body.home-page .pricing-header,
body.home-page .about-content,
.popular-game-info,
.jogo-content,
.pricing-features .feature-item,
.pricing-footer,
.pricing-header,
.about-content {
    color: var(--text-color);
}

body.home-page .pricing-features .feature-item span,
.pricing-features .feature-item span {
    color: var(--neon-pricing-feature-text);
    font-weight: 600;
}

body.home-page .pricing-features .feature-item.disabled span,
.pricing-features .feature-item.disabled span {
    color: rgba(255, 255, 255, 0.78);
}

body.home-page .popular-game-info h3,
body.home-page .jogo-content h3,
body.home-page .crianca-header h3,
body.home-page .conceito-card h3,
body.home-page .modal-title,
body.home-page .page-title,
body.home-page .section-card h2,
.popular-game-info h3,
.jogo-content h3,
.crianca-header h3,
.conceito-card h3,
.modal-title,
.page-title,
.section-card h2 {
    color: #e6f3ff;
}

body.home-page .popular-game-info p,
body.home-page .jogo-desc,
body.home-page .jogo-conceitos,
body.home-page .game-meta-note,
body.home-page .idade,
body.home-page .text-muted,
body.home-page .empty-state,
body.home-page .crianca-access-title,
body.home-page .daily-limit-label,
body.home-page .price-period,
body.home-page .pricing-note,
.popular-game-info p,
.jogo-desc,
.jogo-conceitos,
.game-meta-note,
.idade,
.text-muted,
.empty-state,
.crianca-access-title,
.daily-limit-label,
.price-period,
.pricing-note {
    color: #9dbce0;
}

body.home-page .popular-game-age,
body.home-page .popular-game-category,
body.home-page .jogo-idade,
body.home-page .jogo-categoria,
.popular-game-age,
.popular-game-category,
.jogo-idade,
.jogo-categoria {
    background: rgba(9, 24, 47, 0.92);
    color: #c7e1ff;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

body.home-page .table,
body.home-page .table th,
body.home-page .table td,
.table,
.table th,
.table td {
    color: #d7ebff;
}

body.home-page .table thead,
body.home-page .table tbody tr:hover,
body.home-page .top-games-list th,
.table thead,
.table tbody tr:hover,
.top-games-list th {
    background: rgba(8, 22, 44, 0.85);
}

body.home-page .table tbody tr,
body.home-page .top-games-list tr,
.table tbody tr,
.top-games-list tr {
    background: rgba(4, 14, 30, 0.52);
}

body.home-page .form-group label,
.form-group label {
    color: #b8d5f8;
}

body.home-page .form-group input,
body.home-page .form-group select,
body.home-page .form-group textarea,
body.home-page .daily-limit-select,
.form-group input,
.form-group select,
.form-group textarea,
.daily-limit-select {
    background: rgba(2, 10, 22, 0.88);
    border: 1px solid rgba(0, 212, 255, 0.26);
    color: #e7f3ff;
}

body.home-page .form-group input::placeholder,
body.home-page .form-group textarea::placeholder,
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #89a8cf;
}

body.home-page .form-group input:focus,
body.home-page .form-group select:focus,
body.home-page .form-group textarea:focus,
body.home-page .daily-limit-select:focus,
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.daily-limit-select:focus {
    outline: none;
    border-color: rgba(125, 255, 93, 0.65);
    box-shadow: 0 0 0 3px rgba(125, 255, 93, 0.13);
}

body.home-page .feature-card h3,
body.home-page .pricing-header .price-amount,
body.home-page .stat-card .stat-value,
.feature-card h3,
.pricing-header .price-amount,
.stat-card .stat-value {
    color: #e8f4ff;
}

body.home-page .feature-card:hover,
body.home-page .pricing-card:hover,
body.home-page .popular-game-card:hover,
.feature-card:hover,
.pricing-card:hover,
.popular-game-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 59, 198, 0.5);
    box-shadow: var(--shadow-hover);
}

.pricing-card.featured {
    border-color: rgba(255, 59, 198, 0.5);
}

.pricing-card.featured-teacher {
    border-color: rgba(125, 255, 93, 0.48);
}

.pricing-badge {
    background: linear-gradient(90deg, #ff3bc6, #00d4ff);
    border-radius: 999px;
    color: #f5fbff;
}

.pricing-badge.teacher-badge {
    background: linear-gradient(90deg, #7dff5d, #00d4ff);
    color: #04201f;
}

.feature-icon {
    color: #00d4ff;
}

.btn,
body.home-page .btn {
    border-radius: 8px;
    font-family: "Orbitron", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid rgba(0, 212, 255, 0.42);
}

.btn-primary,
body.home-page .btn-primary {
    background: linear-gradient(135deg, #008fbf, #00d4ff);
    color: #001022;
}

.btn-primary:hover,
body.home-page .btn-primary:hover {
    background: linear-gradient(135deg, #00a8df, #72eeff);
}

.btn-secondary,
.btn-link,
body.home-page .btn-secondary,
body.home-page .btn-link {
    background: linear-gradient(135deg, rgba(8, 31, 57, 0.94), rgba(6, 22, 43, 0.94));
    color: #d7ecff;
    border: 1px solid rgba(0, 212, 255, 0.35);
}

.btn-secondary:hover,
.btn-link:hover,
body.home-page .btn-secondary:hover,
body.home-page .btn-link:hover {
    background: linear-gradient(135deg, rgba(12, 41, 73, 0.95), rgba(9, 30, 57, 0.95));
    color: #f2f8ff;
}

.nav a.btn-link,
body.home-page .nav a.btn-link {
    color: #e9f5ff;
    border: 1px solid rgba(0, 212, 255, 0.38);
}

.nav a.btn-link:hover,
body.home-page .nav a.btn-link:hover {
    color: #ffffff;
    border-color: rgba(125, 255, 93, 0.55);
}

.modal-scrollable .close {
    background: rgba(3, 13, 28, 0.9);
    color: #c3e4ff;
}

.modal-scrollable .close:hover {
    background: rgba(8, 27, 50, 0.95);
    color: #f6fbff;
}

.alert-success {
    background: rgba(125, 255, 93, 0.15);
    border-color: rgba(125, 255, 93, 0.5);
    color: #cbffc0;
}

.alert-error {
    background: rgba(255, 59, 198, 0.12);
    border-color: rgba(255, 59, 198, 0.45);
    color: #ffb8e9;
}

.footer {
    background: linear-gradient(180deg, #020814 0%, #01040c 100%);
}