/* ============================================
   Kaseora — Pixel Art Theme Layer
   Uses actual pixel art images with retro UI styling
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
    --pixel: 2px;
}

/* ============ PIXEL TYPOGRAPHY ============ */
.hero-badge,
.section-title,
.world-status,
.news-category,
.badge,
.footer-col h4 {
    font-family: 'Press Start 2P', monospace;
    letter-spacing: 0.05em;
}

.hero-badge { font-size: 0.5rem; line-height: 1.8; }
.section-title { font-size: 0.6rem; line-height: 1.6; }
.world-status { font-size: 0.5rem; }
.news-category { font-size: 0.48rem; line-height: 1.8; }
.footer-col h4 { font-size: 0.6rem; line-height: 1.6; }
.badge { font-size: 0.48rem; line-height: 1.8; }

/* ============ PIXEL BORDERS & CARDS ============ */
.feature-card,
.race-card,
.world-card,
.news-card,
.your-world-card,
.join-world-card,
.auth-card,
.settings-panel,
.stat-card {
    border-radius: 0 !important;
    border-width: 2px;
    border-style: solid;
    position: relative;
}

/* Pixel corner notches */
.feature-card::after,
.race-card::after,
.world-card::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    background: var(--bg-darkest);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 2;
}

.section-dark .feature-card::after {
    background: var(--bg-dark);
}

/* ============ PIXEL BUTTONS ============ */
.btn {
    border-radius: 0 !important;
    text-transform: uppercase;
    image-rendering: pixelated;
}

.btn-play {
    font-size: 0.95rem;
    padding: 16px 36px;
    letter-spacing: 0.08em;
    border: 2px solid #2ecc71;
    box-shadow:
        4px 4px 0 rgba(0,0,0,0.4),
        inset 0 -3px 0 rgba(0,0,0,0.2),
        0 0 20px rgba(39, 174, 96, 0.3);
    transition: all 0.15s;
}

.btn-play:hover {
    transform: translate(-2px, -2px);
    box-shadow:
        6px 6px 0 rgba(0,0,0,0.4),
        inset 0 -3px 0 rgba(0,0,0,0.2),
        0 0 30px rgba(39, 174, 96, 0.4);
}

.btn-play:active {
    transform: translate(2px, 2px);
    box-shadow:
        2px 2px 0 rgba(0,0,0,0.4),
        inset 0 -1px 0 rgba(0,0,0,0.2);
}

.btn-primary {
    border: 2px solid var(--gold);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}

.btn-primary:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
}

.btn-ghost {
    border-width: 2px;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}

.btn-ghost:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}

.btn-sm {
    border-radius: 0 !important;
}

/* ============ HEADER ============ */
.site-header {
    background: linear-gradient(180deg, rgba(10, 11, 15, 0.97) 0%, rgba(10, 11, 15, 0.88) 100%);
    border-bottom: 2px solid var(--border);
}

.logo-icon {
    border-radius: 0 !important;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
    image-rendering: pixelated;
}

.nav-link { border-radius: 0; }

/* ============ HERO ============ */
.hero {
    position: relative;
    min-height: 90vh;
    overflow: hidden;
}

.hero-illustration {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    image-rendering: pixelated;
    z-index: 1;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(10, 11, 15, 0.3) 0%,
            rgba(10, 11, 15, 0.1) 20%,
            rgba(10, 11, 15, 0.15) 50%,
            rgba(10, 11, 15, 0.7) 80%,
            rgba(10, 11, 15, 1) 100%
        ),
        radial-gradient(ellipse at center 40%, rgba(201, 168, 76, 0.06) 0%, transparent 60%);
    z-index: 2;
}

.hero-content { z-index: 5; }

.hero h1 {
    font-size: 3.8rem;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.8), 0 0 40px rgba(0,0,0,0.5);
}

.hero h1 span {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.7));
}

.hero-desc {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.8);
}

.hero-badge {
    background: rgba(10, 11, 15, 0.75);
    border: 2px solid rgba(201, 168, 76, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 0 !important;
}

/* Floating pixel embers */
.hero-embers {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.ember {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--gold);
    border-radius: 0;
    animation: float-ember linear infinite;
    opacity: 0;
}

@keyframes float-ember {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.3; }
    100% { transform: translateY(-200px) translateX(30px); opacity: 0; }
}

.ember:nth-child(1) { left: 10%; animation-duration: 6s; animation-delay: 0s; bottom: 30%; }
.ember:nth-child(2) { left: 25%; animation-duration: 8s; animation-delay: 1s; bottom: 25%; width: 3px; height: 3px; }
.ember:nth-child(3) { left: 40%; animation-duration: 5s; animation-delay: 2s; bottom: 35%; }
.ember:nth-child(4) { left: 55%; animation-duration: 7s; animation-delay: 0.5s; bottom: 28%; width: 3px; height: 3px; }
.ember:nth-child(5) { left: 70%; animation-duration: 6s; animation-delay: 3s; bottom: 32%; }
.ember:nth-child(6) { left: 85%; animation-duration: 9s; animation-delay: 1.5s; bottom: 20%; }
.ember:nth-child(7) { left: 15%; animation-duration: 7s; animation-delay: 4s; bottom: 22%; width: 3px; height: 3px; }
.ember:nth-child(8) { left: 60%; animation-duration: 5.5s; animation-delay: 2.5s; bottom: 38%; }
.ember:nth-child(9) { left: 35%; animation-duration: 8s; animation-delay: 3.5s; bottom: 26%; }
.ember:nth-child(10) { left: 80%; animation-duration: 6.5s; animation-delay: 0.8s; bottom: 30%; width: 3px; height: 3px; }
.ember:nth-child(11) { left: 48%; animation-duration: 7.5s; animation-delay: 1.2s; bottom: 24%; }
.ember:nth-child(12) { left: 92%; animation-duration: 5s; animation-delay: 4.5s; bottom: 34%; }

/* Twinkling stars */
.hero-stars {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    animation: twinkle ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.9; }
}

.star:nth-child(1) { top: 5%; left: 8%; animation-duration: 3s; }
.star:nth-child(2) { top: 12%; left: 22%; animation-duration: 4s; animation-delay: 1s; }
.star:nth-child(3) { top: 8%; left: 35%; animation-duration: 2.5s; animation-delay: 0.5s; }
.star:nth-child(4) { top: 15%; left: 48%; animation-duration: 3.5s; animation-delay: 2s; }
.star:nth-child(5) { top: 6%; left: 62%; animation-duration: 4.5s; animation-delay: 0.8s; }
.star:nth-child(6) { top: 18%; left: 75%; animation-duration: 3s; animation-delay: 1.5s; }
.star:nth-child(7) { top: 10%; left: 88%; animation-duration: 5s; animation-delay: 3s; }
.star:nth-child(8) { top: 3%; left: 52%; animation-duration: 3.8s; animation-delay: 0.3s; }

/* Hero stats pixel style */
.hero-stats {
    border-top: 2px dashed var(--border);
    padding-top: 32px;
}

.hero-stat-value {
    font-family: 'Press Start 2P', monospace;
    font-size: 1.2rem;
}

.hero-stat-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.45rem;
    letter-spacing: 0.12em;
}

/* ============ FEATURE CARDS ============ */
.feature-card {
    transition: all 0.2s;
}

.feature-card::before {
    height: 2px;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}

.feature-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 1.6rem;
    position: relative;
    image-rendering: pixelated;
}

.feature-icon-wrap::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 0;
    border: 2px solid var(--border);
}

.feature-icon-wrap img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
    mix-blend-mode: lighten;
}

.icon-build { background: linear-gradient(135deg, rgba(41, 128, 185, 0.15), rgba(41, 128, 185, 0.05)); }
.icon-war { background: linear-gradient(135deg, rgba(192, 57, 43, 0.15), rgba(192, 57, 43, 0.05)); }
.icon-ally { background: linear-gradient(135deg, rgba(39, 174, 96, 0.15), rgba(39, 174, 96, 0.05)); }
.icon-race { background: linear-gradient(135deg, rgba(142, 68, 173, 0.15), rgba(142, 68, 173, 0.05)); }
.icon-world { background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.05)); }
.icon-trophy { background: linear-gradient(135deg, rgba(201, 168, 76, 0.15), rgba(201, 168, 76, 0.05)); }

/* ============ RACE CARDS ============ */
.race-card {
    padding: 20px 12px 24px;
    transition: all 0.2s;
    overflow: hidden;
}

.race-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold);
    box-shadow: 0 6px 0 rgba(0,0,0,0.3), 0 0 20px var(--gold-glow);
}

.race-portrait {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
    min-height: 160px;
    image-rendering: pixelated;
}

.race-portrait img {
    max-height: 160px;
    width: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.6));
    transition: transform 0.3s;
    mix-blend-mode: lighten;
}

.race-card:hover .race-portrait img {
    transform: scale(1.08);
}

/* Idle breathing animation for race sprites */
@keyframes idle-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.race-portrait img {
    animation: idle-breathe 3s ease-in-out infinite;
}

.race-card:nth-child(2) .race-portrait img { animation-delay: 0.4s; }
.race-card:nth-child(3) .race-portrait img { animation-delay: 0.8s; }
.race-card:nth-child(4) .race-portrait img { animation-delay: 1.2s; }
.race-card:nth-child(5) .race-portrait img { animation-delay: 1.6s; }

.race-portrait-placeholder {
    width: 120px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: 0.3;
    border: 2px dashed var(--border);
}

.race-card h3 {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.6rem;
    line-height: 1.6;
    margin-bottom: 8px;
    color: var(--gold);
}

.race-card p {
    font-size: 0.8rem;
    line-height: 1.5;
}

/* Race hover accent colors */
.race-card[data-race="humans"]:hover { border-color: #4466aa; box-shadow: 0 6px 0 rgba(0,0,0,0.3), 0 0 20px rgba(68,102,170,0.3); }
.race-card[data-race="humans"]:hover h3 { color: #6688cc; }
.race-card[data-race="elves"]:hover { border-color: #44aa66; box-shadow: 0 6px 0 rgba(0,0,0,0.3), 0 0 20px rgba(68,170,102,0.3); }
.race-card[data-race="elves"]:hover h3 { color: #66cc88; }
.race-card[data-race="dark-elves"]:hover { border-color: #8844aa; box-shadow: 0 6px 0 rgba(0,0,0,0.3), 0 0 20px rgba(136,68,170,0.3); }
.race-card[data-race="dark-elves"]:hover h3 { color: #aa66cc; }
.race-card[data-race="dwarves"]:hover { border-color: #aa8833; box-shadow: 0 6px 0 rgba(0,0,0,0.3), 0 0 20px rgba(170,136,51,0.3); }
.race-card[data-race="dwarves"]:hover h3 { color: #ccaa44; }
.race-card[data-race="ogres"]:hover { border-color: #7a9a4a; box-shadow: 0 6px 0 rgba(0,0,0,0.3), 0 0 20px rgba(122,154,74,0.3); }
.race-card[data-race="ogres"]:hover h3 { color: #9abb66; }

/* ============ WORLD CARDS ============ */
.world-banner {
    position: relative;
    overflow: hidden;
    image-rendering: pixelated;
}

.world-banner-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
    transition: transform 0.4s;
}

.world-card:hover .world-banner-img {
    transform: scale(1.05);
}

.world-banner::after {
    z-index: 1;
}

.world-name {
    z-index: 2;
    font-family: 'Press Start 2P', monospace;
    font-size: 0.7rem;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.8);
}

/* ============ NEWS CARDS ============ */
.placeholder-icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    opacity: 0.5;
    image-rendering: pixelated;
}

/* ============ PIXEL DIVIDERS ============ */
.pixel-divider {
    width: 100%;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        var(--gold-dark) 0px,
        var(--gold-dark) 8px,
        transparent 8px,
        transparent 16px
    );
    opacity: 0.3;
}

/* ============ SCANLINE OVERLAY ============ */
.scanlines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    mix-blend-mode: multiply;
}

/* ============ CTA SECTION ============ */
.cta-pixel {
    position: relative;
    overflow: hidden;
}

.cta-pixel::before,
.cta-pixel::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(
        90deg,
        var(--gold) 0px,
        var(--gold) 12px,
        transparent 12px,
        transparent 24px
    );
    opacity: 0.4;
}

.cta-pixel::before { top: 0; }
.cta-pixel::after { bottom: 0; }

/* ============ FOOTER ============ */
.site-footer {
    border-top: 2px solid var(--border);
}

/* ============ FORMS ============ */
.form-input,
.form-textarea,
.form-select {
    border-radius: 0;
    border-width: 2px;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    box-shadow: 0 0 0 2px var(--gold-glow);
}

.auth-card {
    border-radius: 0 !important;
}

/* ============ SCROLL REVEAL ============ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* Heading gold override for pixel theme */
.heading-gold {
    color: var(--gold-light);
    text-shadow: 3px 3px 0 rgba(0,0,0,0.8);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .races-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .race-portrait img {
        max-height: 120px;
    }
}

/* ============ BLACK BG REMOVAL ============ */
.logo-icon img {
    mix-blend-mode: lighten;
}

.placeholder-icon-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    image-rendering: pixelated;
    mix-blend-mode: lighten;
}

/* ============ USER DROPDOWN ============ */
.nav-user-dropdown {
    position: relative;
}

.nav-user-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 2px solid var(--border);
    color: var(--text-primary);
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    border-radius: 0;
}

.nav-user-toggle:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.nav-user-dropdown.open .nav-user-toggle {
    border-color: var(--gold);
    color: var(--gold);
}

.nav-caret {
    font-size: 0.6rem;
    transition: transform 0.2s;
}

.nav-user-dropdown.open .nav-caret {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
    z-index: 1000;
    padding: 6px 0;
}

.nav-user-dropdown.open .nav-dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 10px 16px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
    transition: all 0.15s;
}

.dropdown-item:hover {
    background: rgba(201, 168, 76, 0.1);
    color: var(--gold);
}

.dropdown-item.active {
    color: var(--gold);
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 12px;
}

.dropdown-logout {
    color: #e74c3c;
}

.dropdown-logout:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #ff6b6b;
}

.nav-play-btn {
    margin-left: 4px;
}

@media (max-width: 768px) {
    .hero { min-height: 80vh; }
    .hero h1 { font-size: 2.4rem; }
    .hero-stat-value { font-size: 0.9rem; }
    .hero-stat-label { font-size: 0.4rem; }
    .btn-play { font-size: 0.85rem; padding: 14px 24px; }
    .races-grid { grid-template-columns: repeat(2, 1fr); }
    .race-portrait img { max-height: 100px; }
    .race-card h3 { font-size: 0.5rem; }
    .scanlines { display: none; }
    .nav-dropdown-menu { right: auto; left: 0; }
    .nav-user-dropdown.open .nav-dropdown-menu { position: static; box-shadow: none; border: none; border-top: 1px solid var(--border); }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.8rem; }
    .hero-stat-value { font-size: 0.75rem; }
    .hero-stats { gap: 16px; }
    .race-portrait img { max-height: 80px; }
}