.elementor-66 .elementor-element.elementor-element-11005a6{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;}.elementor-66 .elementor-element.elementor-element-11005a6:not(.elementor-motion-effects-element-type-background), .elementor-66 .elementor-element.elementor-element-11005a6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-17137d5 ) 0%, var( --e-global-color-ba89c8c ) 100%);}.elementor-66 .elementor-element.elementor-element-d97756c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-66 .elementor-element.elementor-element-31698b4{text-align:center;}.elementor-66 .elementor-element.elementor-element-31698b4 .elementor-heading-title{font-family:"Cinzel", Sans-serif;font-size:35px;font-weight:700;line-height:1.5em;letter-spacing:1px;color:var( --e-global-color-0bf2708 );}.elementor-66 .elementor-element.elementor-element-dc43bbf{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-66 .elementor-element.elementor-element-5bc518a .elementor-menu-toggle{margin:0 auto;background-color:var( --e-global-color-secondary );}.elementor-66 .elementor-element.elementor-element-5bc518a .elementor-nav-menu .elementor-item{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-66 .elementor-element.elementor-element-5bc518a .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-0bf2708 );fill:var( --e-global-color-0bf2708 );}.elementor-66 .elementor-element.elementor-element-5bc518a .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-66 .elementor-element.elementor-element-5bc518a .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-primary );}.elementor-66 .elementor-element.elementor-element-5bc518a .e--pointer-framed .elementor-item:before,
					.elementor-66 .elementor-element.elementor-element-5bc518a .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-primary );}.elementor-66 .elementor-element.elementor-element-5bc518a{--e-nav-menu-divider-content:"";--e-nav-menu-divider-style:solid;--e-nav-menu-divider-color:var( --e-global-color-primary );}.elementor-66 .elementor-element.elementor-element-5bc518a div.elementor-menu-toggle{color:var( --e-global-color-0bf2708 );}.elementor-66 .elementor-element.elementor-element-5bc518a div.elementor-menu-toggle svg{fill:var( --e-global-color-0bf2708 );}.elementor-66 .elementor-element.elementor-element-3fdb7c9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-66 .elementor-element.elementor-element-d97756c{--width:25%;}.elementor-66 .elementor-element.elementor-element-dc43bbf{--width:70%;}.elementor-66 .elementor-element.elementor-element-3fdb7c9{--width:25%;}}/* Start custom CSS for heading, class: .elementor-element-31698b4 */.elementor-66 .elementor-element.elementor-element-31698b4 {
    font-family: 'Cinzel', serif;
    color: #7fdcff;
    letter-spacing: 1px;
    text-shadow:
        0 0 6px rgba(127, 220, 255, 0.65),
        0 0 14px rgba(127, 220, 255, 0.35);
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-5bc518a *//* Persona 1 Menu Styling */

.p1-menu a {
    font-family: '176MKSD AL' !important;
    
    color: #b18cff !important;
    
    letter-spacing: 1px;
    
    font-size: 20px;
    
    text-transform: uppercase;
    
    transition: all 0.3s ease;
}

/* Hover Effect */

.p1-menu a:hover {
    color: #ffffff !important;
    
    text-shadow:
        0 0 5px #b18cff,
        0 0 10px #b18cff;
}
/* =========================
   PERSONA 2 MAIN MENU
========================= */

.p2-menu > a,
.p2-menu > a.elementor-item {
    font-family: 'FOT-RodinCattleya Pro EB' !important;

    color: #ff8c42 !important;

    font-size: 20px !important;

    letter-spacing: 1px;

    font-weight: 700;

    transition: all 0.3s ease;
}

/* Hover */

.p2-menu > a:hover,
.p2-menu > a.elementor-item:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 5px #ff8c42,
        0 0 10px #ff8c42;
}


/* =========================
   INNOCENT SIN
========================= */

.p2is-menu a {
    font-family: 'Fontsona 2 Innocent Sin' !important;

    color: #ff5b5b !important;

    font-size: 18px !important;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.3s ease;
}

/* Hover */

.p2is-menu a:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 5px #ff5b5b,
        0 0 10px #ff5b5b;
}


/* =========================
   ETERNAL PUNISHMENT
========================= */

.p2ep-menu a {
    font-family: 'Fontsona 2 Innocent Sin' !important;

    color: #ff5b5b !important;

    font-size: 18px !important;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: all 0.3s ease;
}

/* Hover */

.p2ep-menu a:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 5px #9b59ff,
        0 0 10px #9b59ff;
}
    color: #ffffff !important;
    text-shadow:
        0 0 5px #3bbcff,
        0 0 10px #3bbcff;
}

    color: #ffffff !important;
    text-shadow:
        0 0 5px #7fdcff,
        0 0 10px #7fdcff,
        0 0 15px #7fdcff;
}

/* =====================================================
   PERSONA 3 MAIN MENU
===================================================== */

li.p3-menu > a,
li.p3-menu > a.elementor-item,
li.p3-menu > a.elementor-item-active,
li.p3-menu.current-menu-item > a,
li.p3-menu.current-menu-ancestor > a,
li.p3-menu.current-menu-parent > a {

    font-family: 'Persona 3 Font', 'Orbitron', sans-serif !important;

    color: #7fdcff !important;

    font-size: 20px !important;

    letter-spacing: 2px !important;

    text-transform: uppercase !important;

    font-weight: normal !important;

    text-shadow: 0 0 6px #7fdcff !important;

    transition: all 0.3s ease !important;
}

/* Hover */

li.p3-menu > a:hover {

    color: #ffffff !important;

    text-shadow:
        0 0 5px #7fdcff,
        0 0 10px #7fdcff,
        0 0 15px #7fdcff !important;
}



/* =====================================================
   PERSONA 3 VANILLA
===================================================== */

li.p3vanilla-menu > a {

    font-family: 'Persona 3 Font', 'Orbitron', sans-serif !important;

    color: #7fdcff !important;

    font-size: 18px !important;

    letter-spacing: 1.5px !important;

    text-transform: uppercase !important;

    text-shadow: 0 0 4px #7fdcff !important;

    transition: all 0.3s ease !important;
}

/* Hover */

li.p3vanilla-menu > a:hover {

    color: #ffffff !important;

    text-shadow:
        0 0 5px #7fdcff,
        0 0 10px #7fdcff !important;
}



/* =====================================================
   PERSONA 3 FES
===================================================== */

li.p3fes-menu > a {

    font-family: 'Persona 3 Font', 'Orbitron', sans-serif !important;

    color: #5ecbff !important;

    font-size: 18px !important;

    letter-spacing: 1.5px !important;

    text-transform: uppercase !important;

    text-shadow: 0 0 4px #5ecbff !important;

    transition: all 0.3s ease !important;
}

/* Hover */

li.p3fes-menu > a:hover {

    color: #ffffff !important;

    text-shadow:
        0 0 5px #5ecbff,
        0 0 10px #5ecbff !important;
}



/* =====================================================
   PERSONA 3 PORTABLE
===================================================== */

li.p3p-menu > a {

    font-family: 'Persona 3 Portable Font', sans-serif !important;

    color: #7fdcff !important;

    font-size: 18px !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    transition: all 0.3s ease !important;
}

/* Hover */

li.p3p-menu > a:hover {

    color: #ff66cc !important;

    text-shadow:
        0 0 5px #ff66cc,
        0 0 10px #ff66cc,
        0 0 15px #ff66cc !important;
}



/* =====================================================
   PERSONA 3 RELOAD
===================================================== */

li.p3reload-menu > a {

    font-family: 'Persona 3 Reload Font', sans-serif !important;

    color: #00a6ff !important;

    font-size: 18px !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;

    transition: all 0.3s ease !important;
}

/* Hover */

li.p3reload-menu > a:hover {

    color: #ffffff !important;

    text-shadow:
        0 0 5px #00a6ff,
        0 0 10px #00a6ff,
        0 0 15px #00a6ff !important;
}
/* =====================================================
   PERSONA 3 DROPDOWN IMAGE PANELS
===================================================== */

/* Shared Persona 3 submenu panel base */

li.p3vanilla-menu > a,
li.p3fes-menu > a,
li.p3p-menu > a,
li.p3reload-menu > a {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;

    min-width: 340px !important;
    min-height: 90px !important;

    display: flex !important;
    align-items: center !important;
    padding-left: 22px !important;

    background-image: none !important;
    border: 1px solid rgba(127, 220, 255, 0.55) !important;

    box-shadow:
        0 0 10px rgba(127, 220, 255, 0.45),
        inset 0 0 18px rgba(0, 166, 255, 0.18) !important;

    transition: all 0.35s ease !important;
}

/* Image layer base */

li.p3vanilla-menu > a::before,
li.p3fes-menu > a::before,
li.p3p-menu > a::before,
li.p3reload-menu > a::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -2 !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;

    filter: brightness(0.85) contrast(1.08) saturate(1.1) !important;

    transition:
        transform 0.45s ease,
        filter 0.45s ease !important;
}

/* Blue glass overlay */

li.p3vanilla-menu > a::after,
li.p3fes-menu > a::after,
li.p3p-menu > a::after,
li.p3reload-menu > a::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(0, 20, 40, 0.70),
            rgba(0, 90, 140, 0.28),
            rgba(0, 10, 25, 0.55)
        ) !important;

    transition: opacity 0.35s ease !important;
}

/* =====================================================
   INDIVIDUAL IMAGES
===================================================== */

/* Persona 3 Vanilla */
li.p3vanilla-menu > a::before {
    background-image: url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-193137.jpg") !important;
    background-position: center center !important;
}

/* Persona 3 FES */
li.p3fes-menu > a::before {
    background-image: url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-193429.jpg") !important;
    background-position: center center !important;
}

/* Persona 3 Portable */
li.p3p-menu > a::before {
    background-image: url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-193656.jpg") !important;
    background-position: center center !important;
}

/* Persona 3 Reload */
li.p3reload-menu > a::before {
    background-image: url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-193930.jpg") !important;
    background-position: center center !important;
}

/* =====================================================
   HOVER EFFECTS
===================================================== */

li.p3vanilla-menu > a:hover,
li.p3fes-menu > a:hover,
li.p3p-menu > a:hover,
li.p3reload-menu > a:hover {
    transform: none !important;
    color: #ffffff !important;

    box-shadow:
        0 0 14px rgba(127, 220, 255, 0.8),
        0 0 28px rgba(0, 166, 255, 0.45),
        inset 0 0 22px rgba(127, 220, 255, 0.22) !important;
}

li.p3vanilla-menu > a:hover::before,
li.p3fes-menu > a:hover::before,
li.p3p-menu > a:hover::before,
li.p3reload-menu > a:hover::before {
    transform: scale(1.07) !important;
    filter: brightness(1.08) contrast(1.15) saturate(1.2) !important;
}

li.p3vanilla-menu > a:hover::after,
li.p3fes-menu > a:hover::after,
li.p3p-menu > a:hover::after,
li.p3reload-menu > a:hover::after {
    opacity: 0.72 !important;
}

/* Portable gets pink hover identity */

li.p3p-menu > a:hover {
    box-shadow:
        0 0 14px rgba(255, 102, 204, 0.85),
        0 0 28px rgba(255, 102, 204, 0.45),
        inset 0 0 22px rgba(255, 102, 204, 0.22) !important;
}

/* Reload gets sharper electric-blue hover */

li.p3reload-menu > a:hover {
    box-shadow:
        0 0 14px rgba(0, 166, 255, 0.9),
        0 0 32px rgba(0, 166, 255, 0.55),
        inset 0 0 22px rgba(0, 166, 255, 0.25) !important;
}
/* =====================================================
   PERSONA 3 UI PATTERN: MOON / GRID / PULSE
===================================================== */

/* Subtle grid + scanline overlay */

li.p3vanilla-menu > a,
li.p3fes-menu > a,
li.p3p-menu > a,
li.p3reload-menu > a {
    background-image:
        linear-gradient(rgba(127, 220, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 220, 255, 0.08) 1px, transparent 1px) !important;

    background-size: 18px 18px !important;

    animation: p3-soft-pulse 3.5s ease-in-out infinite !important;
}

/* Small moon/circle accent on the right */

li.p3vanilla-menu > a span::after,
li.p3fes-menu > a span::after,
li.p3p-menu > a span::after,
li.p3reload-menu > a span::after {
    content: "" !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;

    width: 26px !important;
    height: 26px !important;

    transform: translateY(-50%) !important;

    border: 1px solid rgba(127, 220, 255, 0.6) !important;
    border-radius: 50% !important;

    box-shadow:
        0 0 8px rgba(127, 220, 255, 0.7),
        inset 0 0 10px rgba(127, 220, 255, 0.25) !important;

    opacity: 0.55 !important;
}

/* Pulse animation */

@keyframes p3-soft-pulse {
    0% {
        box-shadow:
            0 0 10px rgba(127, 220, 255, 0.45),
            inset 0 0 18px rgba(0, 166, 255, 0.18);
    }

    50% {
        box-shadow:
            0 0 18px rgba(127, 220, 255, 0.85),
            0 0 32px rgba(0, 166, 255, 0.35),
            inset 0 0 26px rgba(127, 220, 255, 0.28);
    }

    100% {
        box-shadow:
            0 0 10px rgba(127, 220, 255, 0.45),
            inset 0 0 18px rgba(0, 166, 255, 0.18);
    }
}
/* =====================================================
   FORCE PERSONA 3 TOP-LEVEL MENU TO MATCH VANILLA/FES
===================================================== */

.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu > a,
.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu > a.elementor-item,
.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu > a.has-submenu,
.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu.current-menu-item > a,
.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu.current-menu-ancestor > a,
.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu.current-menu-parent > a {
    font-family: 'Persona 3 Font', 'Orbitron', sans-serif !important;
    color: #7fdcff !important;
    font-size: 20px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    font-weight: normal !important;
    text-shadow:
        0 0 5px #7fdcff,
        0 0 10px #7fdcff !important;
    transition: all 0.3s ease !important;
}

/* Persona 3 top-level hover */

.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu > a:hover,
.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu > a.elementor-item:hover,
.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu > a.has-submenu:hover {
    color: #ffffff !important;
    text-shadow:
        0 0 5px #7fdcff,
        0 0 10px #7fdcff,
        0 0 15px #7fdcff !important;
}

/* Persona 3 dropdown arrow color */

.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu > a .sub-arrow,
.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu > a .sub-arrow i,
.elementor-widget-nav-menu .elementor-nav-menu > li.p3-menu > a .sub-arrow svg {
    color: #7fdcff !important;
    fill: #7fdcff !important;
}
/* =====================================================
   PERSONA HEADER: 3 x 2 GRID MENU
===================================================== */

.elementor-widget-nav-menu .elementor-nav-menu {
    display: grid !important;
    grid-template-columns: repeat(3, auto) !important;
    grid-template-rows: repeat(2, auto) !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: 34px !important;
    row-gap: 18px !important;
    flex-wrap: unset !important;
}

.elementor-widget-nav-menu .elementor-nav-menu > li {
    white-space: nowrap !important;
    text-align: center !important;
}

/* Remove excessive link padding so grid stays clean */

.elementor-widget-nav-menu .elementor-nav-menu > li > a {
    padding-left: 6px !important;
    padding-right: 6px !important;
    justify-content: center !important;
}

/* Optional: hide divider lines if they are causing spacing problems */

.elementor-widget-nav-menu .elementor-nav-menu > li:not(:last-child)::after {
    display: none !important;
}
/* =====================================================
   PERSONA 1 MAIN MENU
===================================================== */

li.p1-menu > a,
li.p1-menu > a.elementor-item,
li.p1-menu.current-menu-item > a,
li.p1-menu.current-menu-ancestor > a {
    font-family: 'Persona 1 Font', serif !important;
    color: #b18cff !important;
    font-size: 20px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 5px #b18cff !important;
    transition: all 0.3s ease !important;
}

li.p1-menu > a:hover {
    color: #ffffff !important;
    text-shadow:
        0 0 5px #b18cff,
        0 0 10px #b18cff !important;
}


/* =====================================================
   PERSONA 2 MAIN MENU
===================================================== */

li.p2-menu > a,
li.p2-menu > a.elementor-item,
li.p2-menu > a.has-submenu,
li.p2-menu.current-menu-item > a,
li.p2-menu.current-menu-ancestor > a,
li.p2-menu.current-menu-parent > a {
    font-family: 'Persona 2 Font', sans-serif !important;
    color: #ff8c42 !important;
    font-size: 20px !important;
    letter-spacing: 1.2px !important;
    text-transform: none !important;
    font-weight: normal !important;
    transition: all 0.3s ease !important;
}

li.p2-menu > a:hover {
    color: #ffffff !important;
    text-shadow:
        0 0 5px #ff8c42,
        0 0 10px #ff8c42 !important;
}

/* Persona 2 orange dropdown arrow */

li.p2-menu > a .sub-arrow,
li.p2-menu > a .sub-arrow i,
li.p2-menu > a .sub-arrow svg {
    color: #ff8c42 !important;
    fill: #ff8c42 !important;
}


/* =====================================================
   PERSONA 2: INNOCENT SIN + ETERNAL PUNISHMENT
===================================================== */

li.p2is-menu > a,
li.p2ep-menu > a {
    font-family: 'ISEP Font', sans-serif !important;
    color: #ff8c42 !important;
    font-size: 18px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

li.p2is-menu > a:hover,
li.p2ep-menu > a:hover {
    color: #ffffff !important;
    text-shadow:
        0 0 5px #ff8c42,
        0 0 10px #ff8c42 !important;
}
/* =====================================================
   PERSONA 4 MAIN MENU
===================================================== */

li.p4-menu > a,
li.p4-menu > a.elementor-item,
li.p4-menu > a.has-submenu,
li.p4-menu.current-menu-item > a,
li.p4-menu.current-menu-ancestor > a,
li.p4-menu.current-menu-parent > a {

    font-family: 'PERSONA 4 GOLDEN FONT', 'Arial Black', sans-serif !important;

    color: #ffd800 !important;

    font-size: 20px !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    font-weight: 900 !important;

    text-shadow:
        2px 2px 0 #000000,
        0 0 6px #ffd800 !important;

    transition: all 0.3s ease !important;
}

/* Hover */

li.p4-menu > a:hover {

    color: #ffffff !important;

    text-shadow:
        2px 2px 0 #000000,
        0 0 5px #ffd800,
        0 0 12px #ffd800 !important;
}


/* Persona 4 yellow dropdown arrow */

li.p4-menu > a .sub-arrow,
li.p4-menu > a .sub-arrow i,
li.p4-menu > a .sub-arrow svg {

    color: #ffd800 !important;

    fill: #ffd800 !important;
}



/* =====================================================
   PERSONA 4 GOLDEN
===================================================== */

li.p4golden-menu > a {

    font-family: 'PERSONA 4 GOLDEN FONT', 'Arial Black', sans-serif !important;

    color: #ffd800 !important;

    font-size: 18px !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    font-weight: 900 !important;

    text-shadow:
        2px 2px 0 #000000,
        0 0 5px #ffd800 !important;

    transition: all 0.3s ease !important;
}

/* Hover */

li.p4golden-menu > a:hover {

    color: #ffffff !important;

    text-shadow:
        2px 2px 0 #000000,
        0 0 5px #ffd800,
        0 0 12px #ffd800 !important;
}



/* =====================================================
   PERSONA 4 REVIVAL
===================================================== */

li.p4revival-menu > a {

    font-family: 'PERSONA 4 REVIVAL FONT', 'Arial Black', sans-serif !important;

    color: #fff200 !important;

    font-size: 18px !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;

    font-weight: 900 !important;

    transform: skew(-6deg) !important;

    text-shadow:
        2px 2px 0 #000000,
        0 0 5px #fff200 !important;

    transition: all 0.3s ease !important;
}

/* Hover */

li.p4revival-menu > a:hover {

    color: #ffffff !important;

    text-shadow:
        2px 2px 0 #000000,
        0 0 5px #fff200,
        0 0 12px #fff200 !important;
}
/* =====================================================
   PERSONA 5 MAIN MENU
===================================================== */

li.p5-menu > a,
li.p5-menu > a.elementor-item,
li.p5-menu > a.has-submenu,
li.p5-menu.current-menu-item > a,
li.p5-menu.current-menu-ancestor > a,
li.p5-menu.current-menu-parent > a {
    font-family: 'PERSONA 5 FONT', 'Arial Black', sans-serif !important;
    color: #ff0033 !important;
    font-size: 21px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    transform: skew(-8deg) rotate(-1deg) !important;
    display: inline-block !important;
    text-shadow:
        2px 2px 0 #000000,
        0 0 7px #ff0033 !important;
    transition: all 0.25s ease !important;
}

li.p5-menu > a:hover {
    color: #ffffff !important;
    transform: skew(-8deg) rotate(-3deg) scale(1.08) !important;
    text-shadow:
        2px 2px 0 #000000,
        0 0 8px #ff0033,
        0 0 16px #ff0033 !important;
}

/* Persona 5 red dropdown arrow */

li.p5-menu > a .sub-arrow,
li.p5-menu > a .sub-arrow i,
li.p5-menu > a .sub-arrow svg {
    color: #ff0033 !important;
    fill: #ff0033 !important;
}


/* =====================================================
   PERSONA 5 ROYAL
===================================================== */

li.p5r-menu > a {
    font-family: 'PERSONA 5 ROYAL FONT', 'Arial Black', sans-serif !important;
    color: #ff0033 !important;
    background: #111111 !important;
    font-size: 18px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    transform: skew(-7deg) !important;
    display: inline-block !important;
    padding: 8px 14px !important;
    text-shadow:
        2px 2px 0 #000000,
        0 0 7px #ff0033 !important;
    transition: all 0.25s ease !important;
}

li.p5r-menu > a:hover {
    color: #ffffff !important;
    background: #ff0033 !important;
    transform: skew(-7deg) scale(1.08) !important;
    text-shadow:
        2px 2px 0 #000000,
        0 0 8px #ffffff,
        0 0 16px #ffffff !important;
}
/* =====================================================
   PERSONA 4 MAIN MENU (REVISED)
===================================================== */

li.p4-menu > a,
li.p4-menu > a.elementor-item,
li.p4-menu > a.has-submenu,
li.p4-menu.current-menu-item > a,
li.p4-menu.current-menu-ancestor > a,
li.p4-menu.current-menu-parent > a {

    font-family: 'PERSONA 4 FONT', sans-serif !important;

    color: #ffe100 !important;

    font-size: 20px !important;

    letter-spacing: 0.5px !important;

    text-transform: uppercase !important;

    font-weight: 700 !important;

    text-shadow:
        0 0 6px #ffe100,
        0 0 12px #ffe100 !important;

    transition: all 0.3s ease !important;
}

/* Hover */

li.p4-menu > a:hover {

    color: #ffffff !important;

    text-shadow:
        0 0 6px #ffe100,
        0 0 14px #ffe100,
        0 0 22px #ffe100 !important;
}

/* Yellow dropdown arrow */

li.p4-menu > a .sub-arrow,
li.p4-menu > a .sub-arrow i,
li.p4-menu > a .sub-arrow svg {

    color: #ffe100 !important;

    fill: #ffe100 !important;
}
/* =====================================================
   CUSTOM HOVER ANIMATIONS PER PERSONA GAME
===================================================== */

/* Smooth base animation */
li.p1-menu > a,
li.p2-menu > a,
li.p3-menu > a,
li.p4-menu > a,
li.p5-menu > a {
    transition:
        transform 0.25s ease,
        text-shadow 0.25s ease,
        color 0.25s ease,
        filter 0.25s ease !important;
}


/* PERSONA 1 - occult pulse */
li.p1-menu > a:hover {
    transform: scale(1.08) !important;
    filter: brightness(1.25) !important;
    text-shadow:
        0 0 6px #b18cff,
        0 0 14px #b18cff,
        0 0 24px #7b4cff !important;
}


/* PERSONA 2 - rumor signal flicker */
li.p2-menu > a:hover {
    transform: translateY(-2px) scale(1.05) !important;
    filter: brightness(1.2) contrast(1.1) !important;
    text-shadow:
        2px 0 0 #ff3b00,
        -2px 0 0 #ffbf75,
        0 0 12px #ff8c42 !important;
}


/* PERSONA 3 - digital blue scan glow */
li.p3-menu > a:hover {
    transform: scale(1.06) translateY(-1px) !important;
    filter: brightness(1.25) !important;
    text-shadow:
        0 -2px 0 #d8f8ff,
        0 0 8px #7fdcff,
        0 0 18px #00a6ff,
        0 0 28px #00a6ff !important;
}


/* PERSONA 4 - TV pop bounce */
li.p4-menu > a:hover {
    transform: scale(1.08) rotate(-1deg) !important;
    filter: brightness(1.3) saturate(1.25) !important;
    text-shadow:
        0 0 6px #fff200,
        0 0 14px #ffe100,
        0 0 24px #ffd800 !important;
}


/* PERSONA 5 - rebel slash hit */
li.p5-menu > a:hover {
    transform: skew(-10deg) rotate(-4deg) scale(1.12) !important;
    filter: brightness(1.3) contrast(1.25) !important;
    text-shadow:
        3px 3px 0 #000000,
        -2px -2px 0 #ffffff,
        0 0 10px #ff0033,
        0 0 20px #ff0033 !important;
}
/* =====================================================
   THEMED DROPDOWN BACKGROUNDS
===================================================== */

/* Base dropdown styling */

.elementor-nav-menu--dropdown,
.elementor-nav-menu .sub-menu {
    border: none !important;
    padding: 10px !important;
    backdrop-filter: blur(6px);
}


/* =====================================================
   PERSONA 1 DROPDOWN
===================================================== */

li.p1-menu .sub-menu {
    background:
        linear-gradient(
            180deg,
            rgba(40, 0, 70, 0.92),
            rgba(15, 0, 30, 0.96)
        ) !important;

    border: 1px solid #b18cff !important;

    box-shadow:
        0 0 12px #b18cff,
        0 0 24px rgba(177, 140, 255, 0.5) !important;
}


/* =====================================================
   PERSONA 2 DROPDOWN
===================================================== */

li.p2-menu .sub-menu {
    background:
        linear-gradient(
            180deg,
            rgba(55, 25, 0, 0.94),
            rgba(20, 8, 0, 0.97)
        ) !important;

    border: 1px solid #ff8c42 !important;

    box-shadow:
        0 0 12px #ff8c42,
        0 0 24px rgba(255, 140, 66, 0.45) !important;
}


/* =====================================================
   PERSONA 3 DROPDOWN
===================================================== */

li.p3-menu .sub-menu {
    background:
        linear-gradient(
            180deg,
            rgba(0, 40, 70, 0.90),
            rgba(0, 12, 25, 0.96)
        ) !important;

    border: 1px solid #7fdcff !important;

    box-shadow:
        0 0 12px #7fdcff,
        0 0 28px rgba(127, 220, 255, 0.45) !important;
}


/* =====================================================
   PERSONA 4 DROPDOWN
===================================================== */

li.p4-menu .sub-menu {
    background:
        linear-gradient(
            180deg,
            rgba(60, 55, 0, 0.92),
            rgba(25, 20, 0, 0.96)
        ) !important;

    border: 1px solid #ffe100 !important;

    box-shadow:
        0 0 12px #ffe100,
        0 0 24px rgba(255, 225, 0, 0.45) !important;
}


/* =====================================================
   PERSONA 5 DROPDOWN
===================================================== */

li.p5-menu .sub-menu {
    background:
        linear-gradient(
            180deg,
            rgba(30, 0, 0, 0.95),
            rgba(0, 0, 0, 0.98)
        ) !important;

    border: 1px solid #ff0033 !important;

    box-shadow:
        0 0 14px #ff0033,
        0 0 32px rgba(255, 0, 51, 0.5) !important;

    transform: skew(-4deg);
}
/* =====================================================
   PERSONA 2 - INNOCENT SIN BACKGROUND
===================================================== */

li.p2is-menu > a {

    font-family: 'ISEP Font', sans-serif !important;

    color: #ff8c42 !important;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.55),
            rgba(0, 0, 0, 0.55)
        ),
        url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/p2tatsuya.jpg") !important;

    background-size: cover !important;

    background-position: left center !important;

    background-repeat: no-repeat !important;

    min-width: 320px !important;

    min-height: 90px !important;

    display: flex !important;

    align-items: center !important;

    padding-left: 20px !important;

    text-transform: uppercase !important;

    letter-spacing: 1px !important;

    text-shadow:
        0 0 5px #ff8c42,
        0 0 10px #000000 !important;

    border: 1px solid rgba(255, 140, 66, 0.45) !important;

    box-shadow:
        0 0 12px rgba(255, 140, 66, 0.35) !important;

    overflow: hidden !important;

    transition: all 0.3s ease !important;
}

   /* Hover Effect */

li.p2is-menu > a:hover {

    color: #ffffff !important;

    transform: scale(1.03) !important;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.25)
        ),
        url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/p2tatsuya.jpg") !important;

    background-size: 105% !important;

    background-position: left center !important;

    box-shadow:
        0 0 14px #ff8c42,
        0 0 28px rgba(255, 140, 66, 0.45) !important;

    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #ff8c42,
        0 0 18px #ff8c42 !important;
}
/* =====================================================
   PERSONA 2 - ETERNAL PUNISHMENT BACKGROUND
===================================================== */

li.p2ep-menu > a {
    font-family: 'ISEP Font', sans-serif !important;
    color: #ff8c42 !important;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.50),
            rgba(0, 0, 0, 0.50)
        ),
        url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-191023.jpg") !important;

    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;

    min-width: 320px !important;
    min-height: 90px !important;

    display: flex !important;
    align-items: center !important;
    padding-left: 20px !important;

    text-transform: uppercase !important;
    letter-spacing: 1px !important;

    text-shadow:
        0 0 5px #ff8c42,
        0 0 10px #000000 !important;

    border: 1px solid rgba(255, 140, 66, 0.45) !important;

    box-shadow:
        0 0 12px rgba(255, 140, 66, 0.35) !important;

    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* Hover Effect */

li.p2ep-menu > a:hover {
    color: #ffffff !important;
    transform: scale(1.03) !important;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.25),
            rgba(0, 0, 0, 0.25)
        ),
        url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-191023.jpg") !important;

    background-size: 105% !important;
    background-position: center top !important;

    box-shadow:
        0 0 14px #ff8c42,
        0 0 28px rgba(255, 140, 66, 0.45),
        0 0 18px rgba(255, 80, 180, 0.35) !important;

    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #ff8c42,
        0 0 18px #ff66cc !important;
}
/* =====================================================
   PERSONA 2 DROPDOWN UPGRADE:
   cinematic zoom + accent bars + rumor glitch
===================================================== */

/* Shared base for Innocent Sin + Eternal Punishment */

li.p2is-menu > a,
li.p2ep-menu > a {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transform: none !important;
}

/* Accent bars */

li.p2is-menu > a {
    border-left: 5px solid #ff3b2f !important;
}

li.p2ep-menu > a {
    border-left: 5px solid #ff66cc !important;
}

/* Innocent Sin image layer */

li.p2is-menu > a::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
        url("PASTE-TATSUYA-IMAGE-URL-HERE") !important;
    background-size: cover !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    z-index: -2 !important;
    transition: transform 0.35s ease, filter 0.35s ease !important;
}

/* Eternal Punishment image layer */

li.p2ep-menu > a::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.50)),
        url("PASTE-MAYA-IMAGE-URL-HERE") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    z-index: -2 !important;
    transition: transform 0.35s ease, filter 0.35s ease !important;
}

/* Remove old direct background so ::before handles the image */

li.p2is-menu > a,
li.p2ep-menu > a {
    background-image: none !important;
}

/* Cinematic image zoom only */

li.p2is-menu > a:hover,
li.p2ep-menu > a:hover {
    transform: none !important;
}

li.p2is-menu > a:hover::before,
li.p2ep-menu > a:hover::before {
    transform: scale(1.08) !important;
    filter: brightness(1.18) contrast(1.12) !important;
}

/* Rumor glitch overlay */

li.p2is-menu > a::after,
li.p2ep-menu > a::after {
    content: attr(title) !important;
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: transparent !important;
    text-shadow:
        2px 0 0 rgba(255, 60, 0, 0),
        -2px 0 0 rgba(255, 190, 100, 0) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    transition: text-shadow 0.2s ease !important;
}

/* Glitch activates on hover */

li.p2is-menu > a:hover::after,
li.p2ep-menu > a:hover::after {
    animation: p2-rumor-glitch 0.35s steps(2, end) 1 !important;
    text-shadow:
        2px 0 0 rgba(255, 60, 0, 0.75),
        -2px 0 0 rgba(255, 190, 100, 0.65) !important;
}

/* Keep actual text readable */

li.p2is-menu > a:hover,
li.p2ep-menu > a:hover {
    color: #ffffff !important;
    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #ff8c42,
        0 0 18px #ff66cc !important;
}

/* Rumor glitch keyframes */

@keyframes p2-rumor-glitch {
    0% {
        transform: translateY(-50%) translateX(0);
        opacity: 0.4;
    }

    25% {
        transform: translateY(-50%) translateX(-2px);
        opacity: 1;
    }

    50% {
        transform: translateY(-50%) translateX(2px);
        opacity: 0.8;
    }

    75% {
        transform: translateY(-50%) translateX(-1px);
        opacity: 1;
    }

    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 0;
    }
}
/* =====================================================
   PERSONA 3 DROPDOWN - CLEAN GRID + MOON OVERLAY
===================================================== */

/* Make Persona 3 dropdown able to hold decorative overlays */

li.p3-menu .sub-menu {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;

    background-image:
        linear-gradient(rgba(127, 220, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 220, 255, 0.08) 1px, transparent 1px) !important;

    background-size: 22px 22px !important;

    animation: p3-dropdown-pulse 3.5s ease-in-out infinite !important;
}

/* Moon circle on the upper-right of the dropdown */

li.p3-menu .sub-menu::after {
    content: "" !important;

    position: absolute !important;

    right: 18px !important;
    top: 18px !important;

    width: 46px !important;
    height: 46px !important;

    border-radius: 50% !important;

    border: 2px solid rgba(127, 220, 255, 0.65) !important;

    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255, 255, 255, 0.75),
            rgba(127, 220, 255, 0.25) 35%,
            rgba(0, 80, 140, 0.05) 70%
        ) !important;

    box-shadow:
        0 0 10px rgba(127, 220, 255, 0.9),
        0 0 24px rgba(0, 166, 255, 0.45),
        inset 0 0 12px rgba(127, 220, 255, 0.45) !important;

    opacity: 0.65 !important;

    pointer-events: none !important;

    z-index: 5 !important;
}

/* Keep menu links above the grid, but below/around the moon */

li.p3-menu .sub-menu li,
li.p3-menu .sub-menu li > a {
    position: relative !important;
    z-index: 3 !important;
}

/* Gentle Dark Hour pulse */

@keyframes p3-dropdown-pulse {
    0% {
        box-shadow:
            0 0 12px rgba(127, 220, 255, 0.5),
            inset 0 0 18px rgba(0, 166, 255, 0.15);
    }

    50% {
        box-shadow:
            0 0 20px rgba(127, 220, 255, 0.9),
            0 0 36px rgba(0, 166, 255, 0.35),
            inset 0 0 28px rgba(127, 220, 255, 0.25);
    }

    100% {
        box-shadow:
            0 0 12px rgba(127, 220, 255, 0.5),
            inset 0 0 18px rgba(0, 166, 255, 0.15);
    }
}
/* =====================================================
   FIX PERSONA 3 DROPDOWN WIDTH + KEEP MOON/GRID EFFECT
===================================================== */

/* Force Persona 3 dropdown back into a compact panel */

li.p3-menu > ul.sub-menu {
    width: 370px !important;
    min-width: 370px !important;
    max-width: 370px !important;

    padding: 10px !important;

    background-color: rgba(0, 12, 25, 0.95) !important;

    background-image:
        linear-gradient(rgba(127, 220, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 220, 255, 0.08) 1px, transparent 1px) !important;

    background-size: 22px 22px !important;

    border: 1px solid #7fdcff !important;

    box-shadow:
        0 0 14px rgba(127, 220, 255, 0.85),
        0 0 28px rgba(0, 166, 255, 0.35),
        inset 0 0 18px rgba(127, 220, 255, 0.18) !important;

    overflow: hidden !important;

    position: absolute !important;
    box-sizing: border-box !important;

    animation: p3-dropdown-pulse 3.5s ease-in-out infinite !important;
}

/* Make each Persona 3 submenu image panel fit the compact dropdown */

li.p3-menu > ul.sub-menu > li > a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

/* Moon stays inside the dropdown box */

li.p3-menu > ul.sub-menu::after {
    content: "" !important;

    position: absolute !important;

    right: 16px !important;
    top: 14px !important;

    width: 42px !important;
    height: 42px !important;

    border-radius: 50% !important;

    border: 2px solid rgba(127, 220, 255, 0.65) !important;

    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255, 255, 255, 0.75),
            rgba(127, 220, 255, 0.25) 35%,
            rgba(0, 80, 140, 0.05) 70%
        ) !important;

    box-shadow:
        0 0 10px rgba(127, 220, 255, 0.9),
        0 0 24px rgba(0, 166, 255, 0.45),
        inset 0 0 12px rgba(127, 220, 255, 0.45) !important;

    opacity: 0.55 !important;

    pointer-events: none !important;

    z-index: 8 !important;
}

/* Keep dropdown links above the grid background */

li.p3-menu > ul.sub-menu > li,
li.p3-menu > ul.sub-menu > li > a {
    position: relative !important;
    z-index: 3 !important;
}
/* =====================================================
   PERSONA 3 DARK HOUR HOVER EFFECT
   Green supernatural hover + moon phase changes
===================================================== */

/* Dark Hour green hover for each Persona 3 submenu item */

li.p3vanilla-menu > a:hover,
li.p3fes-menu > a:hover,
li.p3p-menu > a:hover,
li.p3reload-menu > a:hover {
    color: #d8fff1 !important;

    box-shadow:
        0 0 12px rgba(0, 255, 157, 0.9),
        0 0 26px rgba(0, 255, 157, 0.45),
        inset 0 0 28px rgba(0, 255, 157, 0.25) !important;

    border-color: #00ff9d !important;

    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #00ff9d,
        0 0 18px #00ff9d !important;
}

/* Green Dark Hour overlay on hovered image */

li.p3vanilla-menu > a:hover::after,
li.p3fes-menu > a:hover::after,
li.p3p-menu > a:hover::after,
li.p3reload-menu > a:hover::after {
    opacity: 0.82 !important;

    background:
        linear-gradient(
            90deg,
            rgba(0, 35, 25, 0.82),
            rgba(0, 255, 157, 0.28),
            rgba(0, 10, 20, 0.70)
        ) !important;
}

/* Slightly more haunted image treatment on hover */

li.p3vanilla-menu > a:hover::before,
li.p3fes-menu > a:hover::before,
li.p3p-menu > a:hover::before,
li.p3reload-menu > a:hover::before {
    transform: scale(1.07) !important;

    filter:
        brightness(0.95)
        contrast(1.2)
        saturate(1.1)
        hue-rotate(95deg) !important;
}


/* =====================================================
   MOON PHASE SYSTEM
   Vanilla = New Moon
   FES = Crescent / Half Moon
   Portable = Gibbous
   Reload = Full Moon
===================================================== */

/* Default moon before hover */

li.p3-menu > ul.sub-menu::after {
    transition:
        background 0.35s ease,
        box-shadow 0.35s ease,
        opacity 0.35s ease,
        transform 0.35s ease !important;
}

/* Vanilla hover: New Moon */

li.p3-menu > ul.sub-menu:has(li.p3vanilla-menu > a:hover)::after {
    opacity: 0.75 !important;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 15, 20, 0.95) 0%,
            rgba(0, 25, 30, 0.95) 58%,
            rgba(0, 255, 157, 0.45) 62%,
            rgba(0, 255, 157, 0.08) 72%
        ) !important;

    box-shadow:
        0 0 8px rgba(0, 255, 157, 0.7),
        0 0 20px rgba(0, 255, 157, 0.35),
        inset 0 0 10px rgba(0, 255, 157, 0.3) !important;
}

/* FES hover: Crescent / Half Moon */

li.p3-menu > ul.sub-menu:has(li.p3fes-menu > a:hover)::after {
    opacity: 0.85 !important;

    background:
        radial-gradient(
            circle at 35% 50%,
            rgba(210, 255, 240, 0.95) 0%,
            rgba(0, 255, 157, 0.55) 36%,
            rgba(0, 25, 30, 0.98) 38%,
            rgba(0, 25, 30, 0.98) 70%
        ) !important;

    box-shadow:
        0 0 10px rgba(0, 255, 157, 0.85),
        0 0 24px rgba(0, 255, 157, 0.45),
        inset 0 0 12px rgba(210, 255, 240, 0.35) !important;
}

/* Portable hover: Gibbous Moon */

li.p3-menu > ul.sub-menu:has(li.p3p-menu > a:hover)::after {
    opacity: 0.9 !important;

    background:
        radial-gradient(
            circle at 42% 50%,
            rgba(220, 255, 245, 0.95) 0%,
            rgba(0, 255, 157, 0.55) 55%,
            rgba(0, 25, 30, 0.96) 58%,
            rgba(0, 25, 30, 0.96) 72%
        ) !important;

    box-shadow:
        0 0 12px rgba(0, 255, 157, 0.9),
        0 0 28px rgba(0, 255, 157, 0.5),
        0 0 18px rgba(255, 102, 204, 0.35),
        inset 0 0 14px rgba(220, 255, 245, 0.4) !important;
}

/* Reload hover: Full Moon */

li.p3-menu > ul.sub-menu:has(li.p3reload-menu > a:hover)::after {
    opacity: 1 !important;

    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255, 255, 255, 0.98),
            rgba(210, 255, 245, 0.95) 35%,
            rgba(0, 255, 157, 0.45) 68%,
            rgba(0, 90, 70, 0.12) 78%
        ) !important;

    box-shadow:
        0 0 14px rgba(220, 255, 245, 0.95),
        0 0 32px rgba(0, 255, 157, 0.65),
        0 0 48px rgba(0, 255, 157, 0.35),
        inset 0 0 14px rgba(255, 255, 255, 0.65) !important;

    transform: scale(1.08) !important;
}
/* =====================================================
   PERSONA 3 DARK HOUR COLOR FIX
   Green hover for Vanilla/FES/Reload
   Pink accent only for Portable
===================================================== */

/* Vanilla, FES, Reload: green Dark Hour image treatment only */

li.p3vanilla-menu > a:hover::before,
li.p3fes-menu > a:hover::before,
li.p3reload-menu > a:hover::before {
    transform: scale(1.07) !important;

    filter:
        brightness(0.95)
        contrast(1.2)
        saturate(0.9)
        sepia(0.25)
        hue-rotate(55deg) !important;
}

/* Portable: keeps pink/green identity */

li.p3p-menu > a:hover::before {
    transform: scale(1.07) !important;

    filter:
        brightness(1.03)
        contrast(1.18)
        saturate(1.35)
        hue-rotate(95deg) !important;
}


/* =====================================================
   DARK HOUR HOVER BOX SHADOW FIX
===================================================== */

/* Vanilla, FES, Reload = green only */

li.p3vanilla-menu > a:hover,
li.p3fes-menu > a:hover,
li.p3reload-menu > a:hover {
    color: #d8fff1 !important;

    box-shadow:
        0 0 12px rgba(0, 255, 157, 0.9),
        0 0 26px rgba(0, 255, 157, 0.45),
        inset 0 0 28px rgba(0, 255, 157, 0.25) !important;

    border-color: #00ff9d !important;

    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #00ff9d,
        0 0 18px #00ff9d !important;
}

/* Portable = green plus pink identity */

li.p3p-menu > a:hover {
    color: #ffffff !important;

    box-shadow:
        0 0 12px rgba(0, 255, 157, 0.75),
        0 0 24px rgba(0, 255, 157, 0.35),
        0 0 18px rgba(255, 102, 204, 0.55),
        inset 0 0 28px rgba(255, 102, 204, 0.25) !important;

    border-color: #ff66cc !important;

    text-shadow:
        0 0 5px #ffffff,
        0 0 10px #ff66cc,
        0 0 18px #00ff9d !important;
}


/* =====================================================
   MOON PHASE COLORS
   New Moon stays dark
   Visible phases become sickly yellow-green
===================================================== */

/* Vanilla hover: New Moon — stays dark */

li.p3-menu > ul.sub-menu:has(li.p3vanilla-menu > a:hover)::after {
    opacity: 0.78 !important;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 12, 14, 0.98) 0%,
            rgba(0, 20, 18, 0.98) 56%,
            rgba(180, 255, 60, 0.45) 61%,
            rgba(180, 255, 60, 0.10) 73%
        ) !important;

    box-shadow:
        0 0 8px rgba(180, 255, 60, 0.55),
        0 0 18px rgba(0, 255, 157, 0.35),
        inset 0 0 10px rgba(180, 255, 60, 0.25) !important;
}

/* FES hover: Crescent / Half Moon — sickly yellow-green */

li.p3-menu > ul.sub-menu:has(li.p3fes-menu > a:hover)::after {
    opacity: 0.9 !important;

    background:
        radial-gradient(
            circle at 35% 50%,
            rgba(224, 255, 92, 0.98) 0%,
            rgba(180, 255, 60, 0.88) 34%,
            rgba(30, 55, 20, 0.98) 37%,
            rgba(0, 20, 16, 0.98) 72%
        ) !important;

    box-shadow:
        0 0 10px rgba(224, 255, 92, 0.9),
        0 0 24px rgba(180, 255, 60, 0.6),
        0 0 34px rgba(0, 255, 157, 0.28),
        inset 0 0 12px rgba(224, 255, 92, 0.45) !important;
}

/* Portable hover: Gibbous Moon — yellow-green moon + pink accent glow */

li.p3-menu > ul.sub-menu:has(li.p3p-menu > a:hover)::after {
    opacity: 0.94 !important;

    background:
        radial-gradient(
            circle at 42% 50%,
            rgba(236, 255, 115, 0.98) 0%,
            rgba(190, 255, 65, 0.92) 55%,
            rgba(20, 45, 18, 0.96) 58%,
            rgba(0, 20, 16, 0.96) 74%
        ) !important;

    box-shadow:
        0 0 12px rgba(224, 255, 92, 0.95),
        0 0 28px rgba(180, 255, 60, 0.55),
        0 0 18px rgba(255, 102, 204, 0.45),
        inset 0 0 14px rgba(236, 255, 115, 0.45) !important;
}

/* Reload hover: Full Moon — sickly yellow-green full moon */

li.p3-menu > ul.sub-menu:has(li.p3reload-menu > a:hover)::after {
    opacity: 1 !important;

    background:
        radial-gradient(
            circle at 35% 35%,
            rgba(255, 255, 185, 0.98),
            rgba(224, 255, 92, 0.96) 34%,
            rgba(180, 255, 60, 0.75) 62%,
            rgba(80, 120, 25, 0.35) 78%
        ) !important;

    box-shadow:
        0 0 14px rgba(255, 255, 185, 0.95),
        0 0 32px rgba(180, 255, 60, 0.7),
        0 0 48px rgba(0, 255, 157, 0.35),
        inset 0 0 14px rgba(255, 255, 185, 0.65) !important;

    transform: scale(1.08) !important;
}
/* =====================================================
   PERSONA 4 DROPDOWN IMAGE PANELS
   Midnight Channel / TV Pop Style
===================================================== */

/* Shared Persona 4 submenu panel base */

li.p4vanilla-menu > a,
li.p4golden-menu > a,
li.p4revival-menu > a {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;

    min-width: 340px !important;
    min-height: 90px !important;

    display: flex !important;
    align-items: center !important;
    padding-left: 22px !important;

    background-image: none !important;

    border: 1px solid rgba(255, 225, 0, 0.65) !important;

    box-shadow:
        0 0 10px rgba(255, 225, 0, 0.55),
        inset 0 0 18px rgba(255, 225, 0, 0.16) !important;

    transition: all 0.3s ease !important;
}

/* Image layer base */

li.p4vanilla-menu > a::before,
li.p4golden-menu > a::before,
li.p4revival-menu > a::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -2 !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;

    filter:
        brightness(0.9)
        contrast(1.1)
        saturate(1.15) !important;

    transition:
        transform 0.4s ease,
        filter 0.4s ease !important;
}

/* Yellow TV overlay */

li.p4vanilla-menu > a::after,
li.p4golden-menu > a::after,
li.p4revival-menu > a::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.62),
            rgba(255, 225, 0, 0.18),
            rgba(0, 0, 0, 0.45)
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.08) 0px,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 2px,
            transparent 4px
        ) !important;

    transition: opacity 0.3s ease, background 0.3s ease !important;
}

/* =====================================================
   INDIVIDUAL PERSONA 4 IMAGES
===================================================== */

/* Persona 4 Vanilla */
li.p4vanilla-menu > a::before {
    background-image: url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-205701.jpg") !important;
    background-position: right center !important;
}

/* Persona 4 Golden */
li.p4golden-menu > a::before {
    background-image: url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-210130.jpg") !important;
    background-position: center center !important;
}

/* Persona 4 Revival */
li.p4revival-menu > a::before {
    background-image: url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-205903.jpg") !important;
    background-position: center center !important;
}

/* =====================================================
   TEXT STYLING
===================================================== */

/* Persona 4 Vanilla */
li.p4vanilla-menu > a {
    font-family: 'PERSONA 4 FONT', 'Arial Black', sans-serif !important;

    color: #ffe100 !important;

    font-size: 18px !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    font-weight: 900 !important;

    text-shadow:
        2px 2px 0 #000000,
        0 0 6px #ffe100 !important;
}

/* Persona 4 Golden */
li.p4golden-menu > a {
    font-family: 'PERSONA 4 GOLDEN FONT', 'Arial Black', sans-serif !important;

    color: #ffe100 !important;

    font-size: 18px !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    font-weight: 900 !important;

    text-shadow:
        2px 2px 0 #000000,
        0 0 6px #ffe100 !important;
}

/* Persona 4 Revival */
li.p4revival-menu > a {
    font-family: 'PERSONA 4 REVIVAL FONT', 'Arial Black', sans-serif !important;

    color: #fff200 !important;

    font-size: 18px !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;

    font-weight: 900 !important;

    transform: skew(-5deg) !important;

    text-shadow:
        2px 2px 0 #000000,
        0 0 6px #fff200 !important;
}

/* =====================================================
   HOVER EFFECTS: MIDNIGHT CHANNEL POP
===================================================== */

li.p4vanilla-menu > a:hover,
li.p4golden-menu > a:hover,
li.p4revival-menu > a:hover {
    color: #ffffff !important;

    border-color: #fff200 !important;

    box-shadow:
        0 0 14px rgba(255, 242, 0, 0.9),
        0 0 28px rgba(255, 225, 0, 0.5),
        inset 0 0 24px rgba(255, 225, 0, 0.25) !important;

    text-shadow:
        2px 2px 0 #000000,
        0 0 8px #ffffff,
        0 0 16px #fff200 !important;
}

/* Image zoom on hover */

li.p4vanilla-menu > a:hover::before,
li.p4golden-menu > a:hover::before,
li.p4revival-menu > a:hover::before {
    transform: scale(1.07) !important;

    filter:
        brightness(1.08)
        contrast(1.2)
        saturate(1.35) !important;
}

/* Brighter TV overlay on hover */

li.p4vanilla-menu > a:hover::after,
li.p4golden-menu > a:hover::after,
li.p4revival-menu > a:hover::after {
    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.42),
            rgba(255, 242, 0, 0.25),
            rgba(0, 0, 0, 0.35)
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.12) 0px,
            rgba(255, 255, 255, 0.12) 1px,
            transparent 2px,
            transparent 4px
        ) !important;
}

/* =====================================================
   EXTRA P4 PERSONALITY
===================================================== */

/* Golden gets extra rainbow-pop warmth */

li.p4golden-menu > a:hover {
    box-shadow:
        0 0 14px rgba(255, 242, 0, 0.95),
        0 0 24px rgba(255, 225, 0, 0.55),
        0 0 18px rgba(0, 200, 255, 0.28),
        inset 0 0 24px rgba(255, 225, 0, 0.28) !important;
}

/* Revival gets cleaner modern remake punch */

li.p4revival-menu > a:hover {
    transform: skew(-5deg) scale(1.03) !important;

    box-shadow:
        0 0 14px rgba(255, 242, 0, 0.95),
        0 0 28px rgba(255, 225, 0, 0.5),
        0 0 18px rgba(255, 255, 255, 0.35),
        inset 0 0 24px rgba(255, 225, 0, 0.25) !important;
}
/* =====================================================
   FIX PERSONA 4 VANILLA DROPDOWN IMAGE
===================================================== */

li.p4vanilla-menu > a::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -2 !important;

    background-image: url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-205701.jpg") !important;
    background-size: cover !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;

    filter:
        brightness(0.9)
        contrast(1.1)
        saturate(1.2) !important;

    transition:
        transform 0.4s ease,
        filter 0.4s ease !important;
}

/* Make sure Vanilla panel has enough space for the image */

li.p4vanilla-menu > a {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;

    min-width: 340px !important;
    min-height: 90px !important;

    display: flex !important;
    align-items: center !important;
    padding-left: 22px !important;

    background-image: none !important;
}
/* =====================================================
   PERSONA 4 CRT / HALFTONE / TV FLICKER EFFECT
===================================================== */

/* Make the Persona 4 dropdown behave like a TV screen */

li.p4-menu > ul.sub-menu {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;

    animation: p4-tv-flicker 3.8s infinite steps(2, end) !important;
}

/* CRT scanlines + halftone dot overlay on the whole dropdown */

li.p4-menu > ul.sub-menu::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    z-index: 8 !important;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.10) 0px,
            rgba(255, 255, 255, 0.10) 1px,
            transparent 2px,
            transparent 5px
        ),
        radial-gradient(
            circle,
            rgba(255, 242, 0, 0.22) 1px,
            transparent 1.8px
        ) !important;

    background-size:
        100% 5px,
        9px 9px !important;

    mix-blend-mode: screen !important;

    opacity: 0.32 !important;
}

/* Subtle yellow TV glow overlay */

li.p4-menu > ul.sub-menu::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    z-index: 7 !important;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 242, 0, 0.20),
            rgba(255, 225, 0, 0.08) 45%,
            rgba(0, 0, 0, 0.25) 100%
        ) !important;

    opacity: 0.45 !important;

    animation: p4-yellow-glow-flicker 2.6s infinite ease-in-out !important;
}

/* Keep actual menu links above their background layers but below CRT overlay */

li.p4-menu > ul.sub-menu > li,
li.p4-menu > ul.sub-menu > li > a {
    position: relative !important;
    z-index: 5 !important;
}

/* Stronger CRT pop when hovering a submenu item */

li.p4vanilla-menu > a:hover,
li.p4golden-menu > a:hover,
li.p4revival-menu > a:hover {
    filter: brightness(1.15) saturate(1.25) !important;
}

/* Tiny TV jitter on hover */

li.p4vanilla-menu > a:hover,
li.p4golden-menu > a:hover,
li.p4revival-menu > a:hover {
    animation: p4-hover-jitter 0.22s steps(2, end) 1 !important;
}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes p4-tv-flicker {
    0%, 100% {
        filter: brightness(1) contrast(1);
    }

    8% {
        filter: brightness(1.08) contrast(1.08);
    }

    9% {
        filter: brightness(0.92) contrast(1.15);
    }

    10% {
        filter: brightness(1.05) contrast(1.05);
    }

    55% {
        filter: brightness(1.02) contrast(1.02);
    }

    56% {
        filter: brightness(0.96) contrast(1.08);
    }

    57% {
        filter: brightness(1.04) contrast(1.04);
    }
}

@keyframes p4-yellow-glow-flicker {
    0%, 100% {
        opacity: 0.38;
    }

    50% {
        opacity: 0.58;
    }

    52% {
        opacity: 0.30;
    }

    55% {
        opacity: 0.62;
    }
}

@keyframes p4-hover-jitter {
    0% {
        transform: translateX(0);
    }

    35% {
        transform: translateX(-1px);
    }

    70% {
        transform: translateX(1px);
    }

    100% {
        transform: translateX(0);
    }
}
/* =====================================================
   FIX PERSONA 4 DROPDOWN WIDTH + KEEP CRT EFFECT
===================================================== */

/* Force Persona 4 dropdown into a compact panel */

li.p4-menu > ul.sub-menu {
    width: 370px !important;
    min-width: 370px !important;
    max-width: 370px !important;

    padding: 10px !important;

    position: absolute !important;
    overflow: hidden !important;
    isolation: isolate !important;

    background-color: rgba(35, 32, 0, 0.96) !important;

    border: 1px solid #ffe100 !important;

    box-shadow:
        0 0 14px rgba(255, 225, 0, 0.85),
        0 0 28px rgba(255, 225, 0, 0.45),
        inset 0 0 18px rgba(255, 225, 0, 0.18) !important;

    box-sizing: border-box !important;

    animation: p4-tv-flicker 3.8s infinite steps(2, end) !important;
}

/* Make each Persona 4 submenu panel fit inside the dropdown */

li.p4-menu > ul.sub-menu > li > a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
}

/* Keep menu items positioned correctly */

li.p4-menu > ul.sub-menu > li,
li.p4-menu > ul.sub-menu > li > a {
    position: relative !important;
    z-index: 5 !important;
}

/* CRT scanline + halftone overlay contained inside dropdown */

li.p4-menu > ul.sub-menu::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    z-index: 8 !important;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.08) 0px,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 2px,
            transparent 5px
        ),
        radial-gradient(
            circle,
            rgba(255, 242, 0, 0.18) 1px,
            transparent 1.8px
        ) !important;

    background-size:
        100% 5px,
        9px 9px !important;

    mix-blend-mode: screen !important;

    opacity: 0.25 !important;
}

/* Yellow TV glow overlay contained inside dropdown */

li.p4-menu > ul.sub-menu::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    z-index: 7 !important;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 242, 0, 0.18),
            rgba(255, 225, 0, 0.06) 45%,
            rgba(0, 0, 0, 0.18) 100%
        ) !important;

    opacity: 0.38 !important;

    animation: p4-yellow-glow-flicker 2.6s infinite ease-in-out !important;
}
/* =====================================================
   PERSONA 5 DROPDOWN IMAGE PANELS
   Calling Card / Rebel Comic Style
===================================================== */

/* Force Persona 5 dropdown into a sharp compact panel */

li.p5-menu > ul.sub-menu {
    width: 370px !important;
    min-width: 370px !important;
    max-width: 370px !important;

    padding: 10px !important;

    position: absolute !important;
    overflow: hidden !important;
    isolation: isolate !important;

    background:
        linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.98),
            rgba(45, 0, 0, 0.96),
            rgba(0, 0, 0, 0.98)
        ) !important;

    border: 2px solid #ff0033 !important;

    box-shadow:
        0 0 14px rgba(255, 0, 51, 0.95),
        0 0 30px rgba(255, 0, 51, 0.55),
        6px 6px 0 #000000 !important;

    box-sizing: border-box !important;

    transform: skew(-3deg) !important;
}

/* Counter-skew the actual text/panels so they stay readable */

li.p5-menu > ul.sub-menu > li {
    transform: skew(3deg) !important;
}

/* Shared Persona 5 submenu panel base */

li.p5vanilla-menu > a,
li.p5r-menu > a {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;

    min-width: 0 !important;
    width: 100% !important;
    min-height: 100px !important;

    display: flex !important;
    align-items: center !important;
    padding-left: 24px !important;

    background-image: none !important;

    border: 1px solid rgba(255, 0, 51, 0.75) !important;

    box-shadow:
        inset 0 0 18px rgba(255, 0, 51, 0.18),
        4px 4px 0 rgba(0, 0, 0, 0.85) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease !important;
}

/* Image layer base */

li.p5vanilla-menu > a::before,
li.p5r-menu > a::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -2 !important;

    background-size: cover !important;
    background-repeat: no-repeat !important;

    filter:
        brightness(0.82)
        contrast(1.2)
        saturate(1.2) !important;

    transition:
        transform 0.35s ease,
        filter 0.35s ease !important;
}

/* Red-black slash overlay */

li.p5vanilla-menu > a::after,
li.p5r-menu > a::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -1 !important;

    background:
        linear-gradient(
            115deg,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.62) 34%,
            rgba(255, 0, 51, 0.28) 35%,
            rgba(255, 0, 51, 0.18) 48%,
            rgba(0, 0, 0, 0.64) 49%,
            rgba(0, 0, 0, 0.42) 100%
        ),
        repeating-linear-gradient(
            -18deg,
            rgba(255, 255, 255, 0.10) 0px,
            rgba(255, 255, 255, 0.10) 2px,
            transparent 3px,
            transparent 9px
        ) !important;

    opacity: 0.92 !important;

    transition:
        opacity 0.25s ease,
        background 0.25s ease !important;
}

/* =====================================================
   INDIVIDUAL PERSONA 5 IMAGES
===================================================== */

/* Persona 5 Vanilla */
li.p5vanilla-menu > a::before {
    background-image: url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-213233.jpg") !important;
    background-position: center center !important;
}

/* Persona 5 Royal */
li.p5r-menu > a::before {
    background-image: url("https://persona.webtasticalchemy.com/wp-content/uploads/2026/05/Screenshot-2026-05-10-213516.jpg") !important;
    background-position: center center !important;
}

/* =====================================================
   TEXT STYLING
===================================================== */

/* Persona 5 Vanilla */

li.p5vanilla-menu > a {
    font-family: 'PERSONA 5 FONT', 'Arial Black', sans-serif !important;

    color: #ff0033 !important;

    font-size: 20px !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    font-weight: 900 !important;

    transform: skew(-7deg) !important;

    text-shadow:
        2px 2px 0 #000000,
        -1px -1px 0 #ffffff,
        0 0 8px #ff0033 !important;
}

/* Persona 5 Royal */

li.p5r-menu > a {
    font-family: 'PERSONA 5 ROYAL FONT', 'Arial Black', sans-serif !important;

    color: #ffffff !important;

    font-size: 20px !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    font-weight: 900 !important;

    transform: skew(-7deg) !important;

    text-shadow:
        2px 2px 0 #000000,
        -1px -1px 0 #ff0033,
        0 0 8px #ffffff !important;
}

/* =====================================================
   HOVER EFFECTS: CALLING CARD IMPACT
===================================================== */

li.p5vanilla-menu > a:hover,
li.p5r-menu > a:hover {
    color: #ffffff !important;

    transform:
        skew(-7deg)
        translateX(6px)
        scale(1.03) !important;

    border-color: #ffffff !important;

    box-shadow:
        0 0 12px rgba(255, 0, 51, 0.95),
        0 0 26px rgba(255, 0, 51, 0.55),
        inset 0 0 22px rgba(255, 255, 255, 0.22),
        6px 6px 0 #000000 !important;

    text-shadow:
        3px 3px 0 #000000,
        -2px -2px 0 #ffffff,
        0 0 10px #ff0033,
        0 0 20px #ff0033 !important;

    animation: p5-card-hit 0.22s steps(2, end) 1 !important;
}

/* Image zoom / punch */

li.p5vanilla-menu > a:hover::before,
li.p5r-menu > a:hover::before {
    transform: scale(1.1) !important;

    filter:
        brightness(1.08)
        contrast(1.35)
        saturate(1.35) !important;
}

/* White flash slash on hover */

li.p5vanilla-menu > a:hover::after,
li.p5r-menu > a:hover::after {
    background:
        linear-gradient(
            115deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.55) 30%,
            rgba(255, 255, 255, 0.85) 31%,
            rgba(255, 255, 255, 0.45) 38%,
            rgba(255, 0, 51, 0.35) 39%,
            rgba(255, 0, 51, 0.18) 52%,
            rgba(0, 0, 0, 0.58) 53%,
            rgba(0, 0, 0, 0.40) 100%
        ),
        repeating-linear-gradient(
            -18deg,
            rgba(255, 255, 255, 0.14) 0px,
            rgba(255, 255, 255, 0.14) 2px,
            transparent 3px,
            transparent 8px
        ) !important;

    opacity: 1 !important;
}

/* Royal gets a more premium white/red glow */

li.p5r-menu > a:hover {
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.85),
        0 0 24px rgba(255, 0, 51, 0.65),
        inset 0 0 22px rgba(255, 255, 255, 0.22),
        6px 6px 0 #000000 !important;
}

/* =====================================================
   PERSONA 5 DROPDOWN UI ACCENTS
===================================================== */

/* Tiny red corner slash */

li.p5-menu > ul.sub-menu::before {
    content: "" !important;

    position: absolute !important;
    right: -22px !important;
    top: -12px !important;

    width: 110px !important;
    height: 34px !important;

    background: #ff0033 !important;

    transform: rotate(-18deg) !important;

    z-index: 9 !important;

    box-shadow:
        0 0 12px rgba(255, 0, 51, 0.9) !important;

    pointer-events: none !important;
}

/* Small white calling-card strip */

li.p5-menu > ul.sub-menu::after {
    content: "TAKE YOUR HEART" !important;

    position: absolute !important;
    right: 8px !important;
    bottom: 6px !important;

    font-family: 'PERSONA 5 FONT', 'Arial Black', sans-serif !important;

    color: #ffffff !important;

    background: #000000 !important;

    border: 1px solid #ffffff !important;

    padding: 2px 6px !important;

    font-size: 9px !important;

    letter-spacing: 1px !important;

    transform: rotate(-4deg) !important;

    z-index: 10 !important;

    text-shadow: none !important;

    pointer-events: none !important;
}

/* =====================================================
   ANIMATION
===================================================== */

@keyframes p5-card-hit {
    0% {
        transform: skew(-7deg) translateX(0) scale(1);
        filter: brightness(1);
    }

    35% {
        transform: skew(-10deg) translateX(8px) scale(1.04);
        filter: brightness(1.35);
    }

    70% {
        transform: skew(-5deg) translateX(3px) scale(1.02);
        filter: brightness(0.95);
    }

    100% {
        transform: skew(-7deg) translateX(6px) scale(1.03);
        filter: brightness(1.1);
    }
}
/* =====================================================
   PERSONA 6 PLACEHOLDER MENU
   Unrevealed / Green Motif / Locked Identity
===================================================== */

li.p6-menu > a,
li.p6-menu > a.elementor-item,
li.p6-menu.current-menu-item > a,
li.p6-menu.current-menu-ancestor > a {
    font-family: 'Arial Black', sans-serif !important;

    color: #4cff88 !important;

    font-size: 18px !important;

    letter-spacing: 1.5px !important;

    text-transform: uppercase !important;

    font-weight: 700 !important;

    opacity: 0.65 !important;

    text-shadow:
        0 0 5px rgba(76, 255, 136, 0.65),
        0 0 12px rgba(76, 255, 136, 0.35) !important;

    filter: blur(0.2px) !important;

    transition: all 0.3s ease !important;
}

/* Hover: mysterious green reveal */

li.p6-menu > a:hover {
    color: #d8ffe4 !important;

    opacity: 1 !important;

    filter: blur(0px) brightness(1.2) !important;

    text-shadow:
        0 0 6px #d8ffe4,
        0 0 14px #4cff88,
        0 0 26px rgba(76, 255, 136, 0.65) !important;
}

/* Optional: make it feel unrevealed */

li.p6-menu > a::after {
    content: " ?";
    color: #4cff88 !important;
    opacity: 0.8 !important;
}/* Persona 6 placeholder menu without underline */

li.p6-menu > a,
li.p6-menu > a.elementor-item,
li.p6-menu.current-menu-item > a,
li.p6-menu.current-menu-ancestor > a {
    font-family: 'Arial Black', sans-serif !important;
    color: #4cff88 !important;
    font-size: 18px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    opacity: 0.65 !important;
    text-shadow:
        0 0 5px rgba(76, 255, 136, 0.65),
        0 0 12px rgba(76, 255, 136, 0.35) !important;
    filter: blur(0.2px) !important;
    transition: all 0.3s ease !important;
}

/* Persona 6 hover */

li.p6-menu > a:hover {
    color: #d8ffe4 !important;
    opacity: 1 !important;
    filter: blur(0px) brightness(1.2) !important;
    text-shadow:
        0 0 6px #d8ffe4,
        0 0 14px #4cff88,
        0 0 26px rgba(76, 255, 136, 0.65) !important;
}

/* Kill Elementor underline/pointer for Persona 6 */

li.p6-menu > a::before,
li.p6-menu > a::after,
li.p6-menu > a.elementor-item::before,
li.p6-menu > a.elementor-item::after {
    display: none !important;
} /* =====================================================
   MOBILE MENU FIX
   Turn desktop 3x2 Persona grid into vertical mobile menu
===================================================== */

@media (max-width: 1024px) {

    /* Mobile dropdown container */
    .elementor-widget-nav-menu .elementor-nav-menu,
    .elementor-widget-wp-widget-nav_menu .menu,
    .elementor-nav-menu--dropdown .elementor-nav-menu {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;

        width: 100% !important;
        max-width: 100% !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 0 !important;
        row-gap: 0 !important;
        column-gap: 0 !important;

        background: #111820 !important;
        padding: 16px 0 !important;
    }

    /* Each main game item */
    .elementor-widget-nav-menu .elementor-nav-menu > li,
    .elementor-nav-menu--dropdown .elementor-nav-menu > li {
        width: 100% !important;
        text-align: center !important;
        white-space: normal !important;
        display: block !important;
    }

    /* Main game links */
    .elementor-widget-nav-menu .elementor-nav-menu > li > a,
    .elementor-nav-menu--dropdown .elementor-nav-menu > li > a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;

        padding: 14px 10px !important;
        margin: 0 auto !important;

        font-size: 20px !important;
        transform: none !important;
    }

    /* Stop Persona 5 from skewing the whole mobile layout */
    li.p5-menu > a,
    li.p5-menu > a:hover {
        transform: none !important;
    }

    /* Submenu dropdowns on mobile */
    .elementor-widget-nav-menu .sub-menu,
    .elementor-nav-menu--dropdown .sub-menu {
        position: static !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        padding: 8px 12px !important;
        margin: 0 !important;

        box-sizing: border-box !important;
    }

    /* Submenu image panels fit mobile width */
    .elementor-widget-nav-menu .sub-menu li > a,
    .elementor-nav-menu--dropdown .sub-menu li > a {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 76px !important;

        box-sizing: border-box !important;
        justify-content: center !important;
        text-align: center !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Prevent dropdowns from flying off-screen */
    li.p2-menu > ul.sub-menu,
    li.p3-menu > ul.sub-menu,
    li.p4-menu > ul.sub-menu,
    li.p5-menu > ul.sub-menu {
        position: static !important;

        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        transform: none !important;
        left: auto !important;
        right: auto !important;

        margin: 0 auto !important;
    }

    /* Keep P5 dropdown readable on mobile */
    li.p5-menu > ul.sub-menu,
    li.p5-menu > ul.sub-menu > li {
        transform: none !important;
    }

    li.p5vanilla-menu > a,
    li.p5r-menu > a,
    li.p5vanilla-menu > a:hover,
    li.p5r-menu > a:hover {
        transform: none !important;
    }
}/* =====================================================
   MOBILE FIX: PERSONA 5 DROPDOWN ARROW POSITION
===================================================== */

@media (max-width: 1024px) {

    /* Make Persona 5 link and arrow sit together */
    li.p5-menu > a,
    li.p5-menu > a.elementor-item,
    li.p5-menu > a.has-submenu {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        width: auto !important;
        margin: 0 auto !important;

        transform: none !important;
    }

    /* Force Persona 5 arrow beside the text */
    li.p5-menu > a .sub-arrow,
    li.p5-menu > a .sub-arrow i,
    li.p5-menu > a .sub-arrow svg {
        position: static !important;
        display: inline-flex !important;

        margin-left: 6px !important;
        margin-right: 0 !important;

        color: #ff0033 !important;
        fill: #ff0033 !important;

        transform: none !important;
    }
}/* =====================================================
   MOBILE FIX: PREVENT HORIZONTAL SCROLL
===================================================== */

@media (max-width: 1024px) {

    html,
    body {
        overflow-x: hidden !important;
    }

    .elementor-location-header,
    .elementor-section,
    .elementor-container,
    .elementor-widget-wrap,
    .elementor-widget-container,
    .elementor-nav-menu,
    .elementor-nav-menu--dropdown,
    .sub-menu {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    li.p2-menu > ul.sub-menu,
    li.p3-menu > ul.sub-menu,
    li.p4-menu > ul.sub-menu,
    li.p5-menu > ul.sub-menu {
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
}/* =====================================================
   PERSONA 4 MAIN MENU - GOLDEN FONT VERSION
===================================================== */

li.p4-menu > a,
li.p4-menu > a.elementor-item,
li.p4-menu > a.has-submenu,
li.p4-menu.current-menu-item > a,
li.p4-menu.current-menu-ancestor > a,
li.p4-menu.current-menu-parent > a {

    font-family: 'PERSONA 4 GOLDEN FONT', 'Arial Black', sans-serif !important;

    color: #ffe100 !important;

    font-size: 20px !important;

    letter-spacing: 0.5px !important;

    text-transform: uppercase !important;

    font-weight: 700 !important;

    text-shadow:
        0 0 6px #ffe100,
        0 0 12px #ffe100 !important;

    transition: all 0.3s ease !important;
}

/* Persona 4 hover */

li.p4-menu > a:hover {
    color: #ffffff !important;

    text-shadow:
        0 0 6px #ffe100,
        0 0 14px #ffe100,
        0 0 22px #ffe100 !important;
}

/* Persona 4 yellow dropdown arrow */

li.p4-menu > a .sub-arrow,
li.p4-menu > a .sub-arrow i,
li.p4-menu > a .sub-arrow svg {
    color: #ffe100 !important;
    fill: #ffe100 !important;
}/* End custom CSS */