/* Reset básico e Configuração de Scroll Suave */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: #0a0a0a; color: #f0f0f0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow-x: hidden; }

/* Navbar */
.navbar { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    background-color: rgba(10, 10, 10, 0.9); 
    backdrop-filter: blur(10px); 
    z-index: 500; 
    border-bottom: 1px solid #222; 
    min-height: 65px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.nav-links a { color: #fff; text-decoration: none; margin: 0 15px; font-size: 1.1rem; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; transition: color 0.3s; }
.nav-links a:hover { color: #888; }
.nav-links .social-link { display: none; }

/* Botão Hamburger */
.hamburger { display: none; }

/* Hero */
.hero { height: 100vh; display: flex; justify-content: center; align-items: center; background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%); padding-top: 60px; }
.logo-container { text-align: center; }
.main-logo { max-width: 450px; width: 100%; height: auto; filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1)); transition: transform 0.5s ease; }
.main-logo:hover { transform: scale(1.05); }
.catchphrase { margin-top: 20px; font-size: 1.5rem; color: #888; text-transform: uppercase; letter-spacing: 6px; font-style: italic; text-shadow: 0 0 10px rgba(0, 0, 0, 0.8); }

/* --- BANNER PROMOCIONAL --- */
.promo-section { width: 100%; display: flex; justify-content: center; padding: 4rem 2rem 2rem 2rem; }
.promo-container { position: relative; width: 100%; max-width: 1024px; aspect-ratio: 1024 / 500; border-radius: 8px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.8); border: 1px solid #333; background-color: #050505; }
.promo-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.promo-container:hover .promo-img { transform: scale(1.03); }
.promo-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.6) 45%, rgba(5,5,5,0) 100%); display: flex; flex-direction: column; justify-content: center; padding: 4rem; pointer-events: none; }
.promo-badge { color: #ff3333; font-size: 1rem; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 0.5rem; text-shadow: 0 0 10px rgba(255, 51, 51, 0.3); }
.promo-title { color: #fff; font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; text-shadow: 0 0 20px rgba(0,0,0,0.8); }
.promo-desc { color: #ccc; font-size: 1.1rem; max-width: 450px; line-height: 1.6; margin-bottom: 2rem; }

/* Sobrescreve o alinhamento do botão da Google Play apenas dentro do banner promo */
.promo-overlay .promo-play-btn { align-self: flex-start; margin-top: 0; pointer-events: auto; }

/* Seções Genéricas */
.section { padding: 6rem 2rem; min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.bg-darker { background-color: #050505; }
.section-title { font-size: 2.5rem; text-transform: uppercase; letter-spacing: 4px; margin-bottom: 3rem; text-align: center; color: #fff; }

/* Carrossel de Jogos */
.carousel-wrapper { position: relative; max-width: 1200px; width: 100%; display: flex; align-items: center; justify-content: center; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.8); color: white; border: 1px solid #333; font-size: 2rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; z-index: 10; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; }
.carousel-btn:hover { background-color: #fff; color: #000; }
.left-btn { left: -70px; }
.right-btn { right: -70px; }
.games-grid { display: flex; gap: 40px; overflow-x: auto; scroll-behavior: smooth; padding: 20px 0; width: 100%; scrollbar-width: none; scroll-snap-type: x mandatory;}
.games-grid::-webkit-scrollbar { display: none; }
.game-card { flex: 0 0 calc(33.333% - 27px); cursor: pointer; border-radius: 8px; overflow: hidden; background-color: #111; transition: transform 0.3s ease, box-shadow 0.3s ease; scroll-snap-align: center; position: relative; }
.game-card.active-card { border: 2px solid #555; transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8); background-color: #151515; }
.game-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.8); background-color: #151515; }
.img-wrapper { width: 100%; aspect-ratio: 3 / 4; overflow: hidden; position: relative; background-color: #050505; }
.game-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.5s ease; }
.game-card:hover img { transform: scale(1.08); }
.game-title { text-align: center; padding: 1.5rem; font-size: 1.2rem; color: #ddd; letter-spacing: 1px; width: 100%; display: block; }

/* Tag SOON */
.soon-badge { position: absolute; top: 15px; right: 15px; background-color: #ff3333; color: #fff; padding: 6px 12px; font-size: 0.85rem; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; border-radius: 4px; z-index: 5; box-shadow: 0 4px 15px rgba(0,0,0,0.8); }
.swipe-indicator { display: none; }

/* Painel Expansível de Detalhes */
.details-panel { width: 100%; max-width: 1200px; margin-top: 3rem; background-color: #111; border-radius: 8px; border: 1px solid #222; display: none; opacity: 0; transform: translateY(-20px); transition: opacity 0.4s ease, transform 0.4s ease; position: relative; box-shadow: 0 20px 40px rgba(0,0,0,0.6); grid-column: 1 / -1; overflow: hidden;}
.details-panel.show { opacity: 1; transform: translateY(0); }
.close-panel-btn { position: absolute; top: 15px; right: 25px; color: #aaa; font-size: 32px; font-weight: bold; cursor: pointer; transition: color 0.2s; z-index: 100;}
.close-panel-btn:hover { color: #fff; }
.panel-content { display: flex; flex-direction: column; padding: 3rem; gap: 3rem; }
.game-details-top-row { display: flex; gap: 3rem; align-items: stretch; }
#panel-img { width: 300px; border-radius: 8px; object-fit: contain; aspect-ratio: 3 / 4; box-shadow: 0 10px 20px rgba(0,0,0,0.5); flex-shrink: 0; }
.panel-info { flex: 1; display: flex; flex-direction: column; }
#panel-title { font-size: 2.5rem; margin-bottom: 1rem; color: #fff; }
#panel-desc { font-size: 1.15rem; line-height: 1.6; color: #bbb; }

/* Info Boxes e Tags */
.info-box { margin-top: 1.5rem; padding: 1rem; background-color: rgba(255, 255, 255, 0.03); border-radius: 0 4px 4px 0; display: none; }
.info-box h4 { color: #ddd; font-size: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; }
.objective-box { border-left: 4px solid #888; }
.location-box { border-left: 4px solid #555; }
.info-box p { font-size: 0.95rem; color: #aaa; line-height: 1.5; }
.location-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.loc-tag { background: #222; color: #ddd; padding: 4px 10px; font-size: 0.75rem; border-radius: 4px; border: 1px solid #444; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;}
.loc-tag.warning { color: #d16b27; border-color: #663110; background: rgba(209, 107, 39, 0.1); }

/* Monstro 3D */
.monster-section { display: none; width: 100%; background-color: #151515; border-radius: 8px; padding: 2rem; gap: 2rem; align-items: center; border: 1px solid #333; box-shadow: inset 0 0 50px rgba(0,0,0,0.8); }
.monster-3d-container { flex: 1; min-height: 350px; width: 100%; }
model-viewer { display: block; width: 100%; height: 100%; min-height: 350px; outline: none; --poster-color: transparent; }
.monster-lore { flex: 1; display: flex; flex-direction: column; }
.monster-lore h3 { color: #ff3333; font-size: 1.8rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 2px; }
#panel-lore-text { font-size: 1.1rem; line-height: 1.6; color: #ccc; margin-bottom: 1.5rem; }
.danger-box { padding: 1rem; background-color: rgba(255, 0, 0, 0.05); border-left: 4px solid #ff3333; border-radius: 0 4px 4px 0; }
.danger-box h4 { color: #fff; font-size: 1.2rem; margin-bottom: 0.5rem; text-transform: uppercase; }
#panel-danger-level { color: #ff3333; font-weight: 900; }
#panel-danger-desc { font-size: 0.95rem; color: #aaa; font-style: italic; line-height: 1.4; }

/* Carrossel de Screenshots */
.screenshot-section { width: 100%; max-width: 100%; margin: 3rem auto 2rem auto; display: none; position: relative; }
.screenshot-title { color: #ff3333; font-size: 1.2rem; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; text-align: center; margin-bottom: 1rem; }
.gallery-container { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 65px; }
.gallery-wrapper { width: 100%; border-radius: 8px; background-color: #050505; border: 1px solid #333; box-shadow: 0 15px 35px rgba(0,0,0,0.8); overflow: hidden; }
.screenshot-img-container { display: flex; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.screenshot-img-container::-webkit-scrollbar { display: none; }
.screenshot-static-img { flex: 0 0 100%; width: 100%; max-height: 55vh; object-fit: contain; scroll-snap-align: center; filter: brightness(0.85); transition: filter 0.3s ease; display: block; cursor: zoom-in; }
.screenshot-static-img:hover { filter: brightness(1); }

.gal-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.8); color: white; border: 1px solid #444; font-size: 1.5rem; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; z-index: 10; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; }
.gal-btn:hover { background-color: #fff; color: #000; }
.gal-left-btn { left: 0; }
.gal-right-btn { right: 0; }

@media(min-width: 768px) { .screenshot-section { max-width: 950px; } }

/* Botões Play e Pre-register */
.play-btn { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; align-self: center; margin-top: 2rem; cursor: pointer; transition: transform 0.3s ease, filter 0.3s ease; text-decoration: none; gap: 8px; }
.play-btn img { height: 60px; width: auto; display: block; object-fit: contain; }
.play-btn:hover { transform: scale(1.05); filter: drop-shadow(0 0 15px rgba(255,255,255,0.15)); }
.preregister-label { font-size: 0.9rem; color: #ff3333; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; text-shadow: 0 0 10px rgba(255, 51, 51, 0.4); }
.play-btn.disabled { background-color: #222; color: #888; padding: 15px 40px; border-radius: 4px; font-weight: bold; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 1px; cursor: not-allowed; pointer-events: none; transform: none; filter: none; border: 1px solid #333; gap: 0; }

/* --- LIGHTBOX (MODAL TELA CHEIA) --- */
.lightbox { display: none; position: fixed; z-index: 999999; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); align-items: center; justify-content: center; }
.lightbox.active { display: flex; }
.lightbox-img { max-width: 90%; max-height: 85vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.9); animation: fadeInLightbox 0.3s ease; }
.lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 45px; font-weight: bold; cursor: pointer; transition: color 0.3s; z-index: 10; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.lightbox-close:hover { color: #ff3333; }
.lightbox-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); color: white; border: none; font-size: 2rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: all 0.3s; z-index: 10; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.lightbox-btn:hover { background: #ff3333; }
.lightbox-left { left: 25px; }
.lightbox-right { right: 25px; }
@keyframes fadeInLightbox { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* About Us */
.about-container { max-width: 800px; text-align: center; width: 100%; }
.about-text { font-size: 1.2rem; line-height: 1.8; color: #bbb; }

/* Contact */
.contact-container { max-width: 600px; width: 100%; }
.contact-form { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-form input, .contact-form textarea { width: 100%; padding: 1rem; background-color: #111; border: 1px solid #333; color: #fff; font-family: inherit; border-radius: 4px; transition: border-color 0.3s; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: #666; }
.submit-btn { padding: 1rem; background-color: #fff; color: #000; border: none; border-radius: 4px; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s; }
.submit-btn:hover { background-color: #ccc; }

/* Footer */
footer { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 2rem; background-color: #000; color: #555; border-top: 1px solid #111; }
.social-link { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; transition: transform 0.3s ease; }
.social-icon { width: 22px; height: 22px; object-fit: contain; opacity: 0.6; transition: all 0.3s ease; }
.nav-links .social-link { margin-left: 5px; }
.nav-links .social-link:hover .social-icon { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5)); }
.footer-socials .social-icon { width: 32px; height: 32px; opacity: 0.4; }
.footer-socials .social-link:hover .social-icon { opacity: 1; transform: scale(1.15) translateY(-3px); filter: drop-shadow(0 0 10px rgba(255, 51, 51, 0.8)); }

/* Animações */
.fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* --- RESPONSIVIDADE --- */
@media (max-width: 1350px) { 
    .left-btn { left: 10px; } 
    .right-btn { right: 10px; } 
}

@media (max-width: 900px) {
    .games-grid { display: flex; flex-direction: row; padding: 20px 5%; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .game-card { flex: 0 0 85%; max-width: 350px; scroll-snap-align: center; }
    .carousel-btn { display: none; }
    .swipe-indicator { display: block; position: absolute; bottom: -30px; left: 50%; color: #666; font-size: 0.75rem; letter-spacing: 2px; font-weight: bold; white-space: nowrap; animation: swipeSideToSide 2.5s infinite ease-in-out; transition: opacity 0.5s ease; }
    .swipe-indicator.fade-out { opacity: 0 !important; pointer-events: none; }
    @keyframes swipeSideToSide { 0% { transform: translateX(calc(-50% - 15px)); opacity: 0.5; } 50% { transform: translateX(calc(-50% + 15px)); opacity: 1; color: #ff3333; } 100% { transform: translateX(calc(-50% - 15px)); opacity: 0.5; } }
    .game-details-top-row { flex-direction: column; text-align: center; align-items: center; }
    #panel-img { width: 100%; max-width: 250px; }
    .monster-section { flex-direction: column; padding: 1.5rem; }
    .monster-3d-container { flex: none; width: 100%; min-height: 300px; margin-bottom: 1rem; }
    .info-box { border-left: none; border-top: 4px solid; border-radius: 0 0 4px 4px; }
    .location-tags { justify-content: center; }
    .screenshot-section { max-width: 90%; }
}

@media (max-width: 768px) {
    .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 50px; height: 50px; background: transparent; border: none; cursor: pointer; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 99999; -webkit-tap-highlight-color: transparent; padding: 0; }
    .hamburger span { width: 30px; height: 3px; background: #fff; transition: 0.3s; margin: 0 auto; pointer-events: none; }
    .hamburger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); background: #ff3333; }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background: #ff3333; }

    .nav-links { position: fixed; top: 0; right: -100vw; width: 100vw; height: 100vh; background-color: rgba(5, 5, 5, 0.98); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; transition: right 0.4s ease-in-out; z-index: 99990; padding: 0; }
    .nav-links.active { right: 0; }
    .nav-links a { font-size: 2rem; margin: 0; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; }
    .nav-links.active a { opacity: 1; transform: translateY(0); }
    .nav-links.active a:nth-child(1) { transition-delay: 0.1s; }
    .nav-links.active a:nth-child(2) { transition-delay: 0.2s; }
    .nav-links.active a:nth-child(3) { transition-delay: 0.3s; }
    .nav-links.active a:nth-child(4) { transition-delay: 0.4s; }
    .nav-links.active a:nth-child(5) { transition-delay: 0.5s; }
    .nav-links .social-link { display: inline-flex; }
    .social-icon { width: 35px; height: 35px; }

    .catchphrase { font-size: 1rem; letter-spacing: 4px; margin-top: 15px; }

    .gallery-container { padding: 0; } 
    .gal-btn { display: none; }
    .screenshot-static-img { max-height: 35vh; } 
    
    .lightbox-btn { width: 40px; height: 40px; font-size: 1.5rem; background: rgba(0,0,0,0.5); }
    .lightbox-left { left: 10px; }
    .lightbox-right { right: 10px; }
    .lightbox-close { top: 15px; right: 20px; font-size: 35px; }
    .lightbox-img { max-width: 100%; max-height: 70vh; }

    /* Responsivo do Banner Promocional */
    .promo-section { padding: 4rem 1rem 2rem 1rem; } /* Mais espaço em cima pra afastar do Header */
    .promo-container { aspect-ratio: auto; height: 65vh; }
    .promo-overlay { background: linear-gradient(to top, rgba(5,5,5,1) 0%, rgba(5,5,5,0.6) 60%, rgba(5,5,5,0) 100%); padding: 2rem; justify-content: flex-end; }
    .promo-title { font-size: 2rem; }
    .promo-desc { font-size: 1rem; margin-bottom: 1.5rem; }
    
    .promo-overlay .promo-play-btn { align-self: center; margin-top: 1rem; }

    .play-btn { margin-top: 1.5rem; width: auto; }
    .play-btn img { height: 45px; }
    .play-btn.disabled { font-size: 0.9rem; padding: 12px 15px; width: 100%; max-width: 280px; }
}