@font-face {
    font-family: 'PokemonClassic';
    src: url('/fonts/Pokemon%20Classic.ttf') format('truetype');
    
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0 !important; 
    padding: 0 !important; 
    box-sizing: border-box !important;
}

html, body {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    position: relative !important;
    background-color: #FAF4ED !important;
    user-select: none !important;

    cursor: url("/pkmn/decor/pikacursor.png") 16 12, auto !important;
}

button, a, input, .menu-txt-row, .pkmn-clickable-asset {
    cursor: url("/pkmn/decor/pikacursor.png") 16 12, auto !important;
}

.pkmn-global-bg {
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important;
    width: 100% !important; 
    height: 100% !important; 
    object-fit: fill !important;
    z-index: 1 !important; 
    pointer-events: none !important;
}

.pkmn-universe-stage {
    position: relative !important; 
    width: 100% !important; 
    height: 100% !important;
    max-height: 100vh !important; 
    z-index: 3 !important; 
    overflow: hidden !important;
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important;
}

.pkmn-back-wrapper { 
    position: absolute !important; 
    bottom: 1vh !important; 
    left: 47.2vw !important; 
    z-index: 9999 !important; 
}
.pkmn-back-wrapper:hover { 
    transform: scale(1.08) !important; 
    filter: drop-shadow(0px 0px 8px rgba(118, 122, 168, 0.6)) !important; 
}
.pkmn-back-img { 
    display: block !important; 
    width: 105px !important; 
    height: auto !important; 
}

.pkmn-header-area {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important; 
}
.pkmn-title-box {
    display: contents !important;
}

/* 1) THE WELCOME BANNER IMAGE (TITLE) */
.pkmn-welcome-banner { 
    position: absolute !important;
    top: 4vh !important; 
    left: 50% !important;
    transform: translateX(-50%) !important; 
    width: 420px !important; 
    height: auto !important; 
    display: block !important; 
    image-rendering: pixelated !important; 
    z-index: 5 !important;
}

.pkmn-sub-marquee-text {
    position: absolute !important;
    top: 14.5vh !important; 
    left: 50% !important;
    transform: translateX(-50%) !important; 
    
    /* 🎯 FONT-FAMILY CORRECTION: Swapped to your custom pixel font face identifier! */
    font-family: 'PokemonClassic', monospace !important; 
    
    font-size: 8.5px !important;
    color: #767AA8 !important; 
    border: 2px #FFFFFF !important;
    text-align: center !important; 
    line-height: 1.6 !important;
    max-width: 440px !important; 
    word-wrap: break-word !important;
    z-index: 5 !important;
}

/* ==========================================================================
   🌸 SANGA TRAINER PROFILE PORTAL: COORDENADAS FIXAS E BLINDADAS
   ========================================================================== */
.asset-profile {
    position: absolute !important;
    /* 📐 Suas coordenadas exatas do Photoshop */
    top: 1.5vh !important;       
    right: 23vw !important;      
    width: 200px !important;     
    height: 200px !important;    
    z-index: 5 !important;
    display: block !important;
}

/* 🧱 SWELLED STATE: Faz a pfp crescer e brilhar em rosa ao passar o mouse */
.asset-profile.image-swelled img,
.asset-profile:hover img {
    transform: scale(1.08) !important;
    filter: drop-shadow(0px 0px 12px rgba(214, 139, 201, 0.7)) !important;
}

/* 🖼️ IMAGEM INTERNA DA SANGA (PRESERVA SEU DESIGN) */
.sanga-pfp-node {
    width: 200px !important;     /* Força a largura de 200px fixa de segurança */
    height: 200px !important;    /* Força a altura de 200px fixa de segurança */
    border-radius: 50% !important;
    object-fit: cover !important; 
    display: block !important; 
    border: 1px dashed #767AA8 !important; /* Sua borda tracejada de 1px */
    box-shadow: 0px 4px 10px rgba(0,0,0,0.15) !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease !important;
}


.pkmn-stamps-row {
    display: flex !important; 
    align-items: center !important; 
    gap: 6px !important; 
    margin-top: 20.5vh !important;
}
.pkmn-stamps-row img { 
    height: 22px !important; 
    width: auto !important; 
    display: block !important; 
    image-rendering: pixelated !important; 
}

.pkmn-central-layout-grid {
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    width: 100% !important; 
    margin-top: 2.5vh !important; 
    position: relative !important; 
    height: 42vh !important;
}

.menu-backdrop-shell {
    position: absolute !important; 
    top: 5% !important; 
    left: 30% !important;
    width: 440px !important; 
    height: 100% !important; 
    display: block !important;
    
}
.menu-frame-bg { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: fill !important; 
    display: block !important; 

}

.menu-scroll-viewport {
    position: absolute !important; 
    top: 20% !important; 
    left: 20% !important;
    width: 65% !important; 
    height: 65% !important; 
    
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    display: flex !important; 
    flex-direction: column !important; 
    gap: 14px !important;
    scrollbar-width: none !important; 
    -ms-overflow-style: none !important; 
    padding-right: 4px !important;
    
    align-items: flex-start !important; 
    
    z-index: 99999 !important; 
}

.menu-scroll-viewport::-webkit-scrollbar { display: none !important; }

.menu-txt-row {
    display: flex !important; 
    align-items: center !important; 
    gap: 8px !important; 
    width: max-content !important;
    text-decoration: none !important; 
    transition: transform 0.2s ease !important;
    pointer-events: auto !important; 
    position: relative !important;
    z-index: 100000 !important;
}

.menu-bullet-pokeball { 
    width: 14px !important; 
    height: 14px !important; 
    display: block !important; 
    image-rendering: pixelated !important; 
}

.menu-label-link {
    font-family: 'PokemonClassic', monospace !important; 
    font-size: 13px !important;
    color: #767AA8 !important; 
    text-transform: lowercase !important; 
    white-space: nowrap !important;
    transition: color 0.2s ease !important;
}

.menu-a-btn-flash {
    width: 20px !important; 
    height: 20px !important; 
    display: none; 
    image-rendering: pixelated !important; 
    margin-left: 0 !important; 
    animation: aBtnBlinkEngine 0.6s step-end infinite !important;
}

@keyframes aBtnBlinkEngine { 50% { opacity: 0; } }

.menu-txt-row.text-highlighted .menu-label-link { color: #D48BC9 !important; }
.menu-txt-row.text-highlighted .menu-a-btn-flash { display: block !important; }
.menu-txt-row.text-highlighted { transform: translateX(4px) !important; }

.hex-girl-big-asset {
    position: absolute !important; 
    right: 45vw !important; 
    bottom: -4vh !important; 
    width: 175px !important; 
    height: auto !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    
    /* 🎯 SOLUÇÃO CRÍTICA 1: Faz o mouse atravessar a Hex Girl grande e ler o menu atrás! */
    pointer-events: none !important; 
    z-index: 15 !important;
}
.hex-girl-big-asset img { width: 300% !important; display: block !important; image-rendering: pixelated !important; }
.hex-girl-big-asset:hover { 
    transform: scale(1.08) rotate(2deg) !important; 
    filter: drop-shadow(0px 0px 12px rgba(212, 139, 201, 0.7)) !important; 
}

.pkmn-side-monitors-container {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; pointer-events: none !important;
}

.pkmn-clickable-asset {
    position: absolute !important; 
    pointer-events: auto !important;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease !important;
    z-index: 20 !important; /* Mantém as capas em uma camada clicável limpa */
}
.pkmn-clickable-asset img { display: block !important; height: auto !important;}

.pkmn-clickable-asset.image-swelled {
    transform: scale(1.10) !important; 
    filter: drop-shadow(0px 0px 10px rgba(118, 122, 168, 0.5)) !important;
}
.pkmn-clickable-asset:hover {
    transform: scale(1.10) !important; 
    filter: drop-shadow(0px 0px 10px rgba(212, 139, 201, 0.5)) !important;
}

.asset-journey { top: -23vh !important; left: 13vw !important; width: 130px !important; }
.asset-favorites { bottom: -2vh !important; left: 6vw !important; width: 160px !important; }
.asset-collection { top: 47vh !important; left: 2vw !important; width: 140px !important; }

.asset-guides { top: -23vh !important; right: 12vw !important; width: 120px !important; }
.asset-unite { bottom: 2vh !important; right: 18.5vw !important; width: 160px !important; }
.asset-gallery { top: 45vh !important; right: 17vw !important; width: 110px !important; }

.healball-line { 
    position: absolute !important;
    bottom: 210px !important; 
    left: 30% !important; 
    width: 40% !important; 
    height: 20px !important; 
    object-fit: cover !important; 
    display: block !important; 
    image-rendering: pixelated !important; 
    z-index: 2 !important;
    
    /* 🎯 SOLUÇÃO CRÍTICA 2: Faz o mouse ignorar as linhas do rodapé que subiram */
    pointer-events: none !important; 
}

.types-line { 
    position: absolute !important;
    bottom: 160px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important; 
    width: auto !important; 
    max-width: 50% !important; 
    height: 25px !important; 
    display: block !important; 
    image-rendering: pixelated !important; 
    z-index: 2 !important;
    
    /* 🎯 SOLUÇÃO CRÍTICA 3: Impede o bloqueio do mouse nas energias de TCG */
    pointer-events: none !important; 
}

.hex-girl-smol-asset {
    position: absolute !important; 
    bottom: 190px !important;  
    left: 47% !important; 
    width: 110px !important; 
    height: auto !important; 
    display: block !important;
    z-index: 25 !important; 
    
    /* Faz o mouse ignorar a Hex Maniac pequenininha */
    pointer-events: none !important; 
}
.hex-girl-smol-asset img { 
    width: 100% !important; 
    display: block !important; 
}

.pkmn-footer-divider-area {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100px !important;
    pointer-events: none !important; 
}

/* ==========================================================================
   🔊 PIXEL ART MUSIC BOX: DESIGN E POSICIONAMENTO
   ========================================================================== */
.pkmn-music-box-asset {
    position: absolute !important;
    /* 📐 COORDENADAS: Ajuste o topo ou esquerda para sentar onde preferir no seu design */
    top: 5vh !important;
    left: 2vw !important;
    width: 170px !important; /* Calibrado para pixelart micro sutil */
    height: auto !important;
    z-index: 9999 !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.2s ease !important;
    filter: drop-shadow(0px 0px 4px rgba(118, 122, 168, 0.4)) !important;
}

.pkmn-music-box-asset img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* 🚀 HOVER: Sutil pulsação e brilho pastel combinando com a página */
.pkmn-music-box-asset:hover {
    transform: scale(1.10) !important;
    filter: drop-shadow(0px 0px 10px rgba(214, 139, 201, 0.6)) !important;
}

/* ♬ PULSAÇÃO DE ATIVADO: Adiciona um efeito neon pálido quando a música estiver tocando */
.pkmn-music-box-asset.music-box-playing {
    animation: musicBoxPulseGlow 2s ease-in-out infinite alternate !important;
}
@keyframes musicBoxPulseGlow {
    0% { filter: drop-shadow(0px 0px 6px rgba(118, 122, 168, 0.5)); }
    100% { filter: drop-shadow(0px 0px 14px rgba(214, 139, 201, 0.8)); }
}