/**
 * Funful Games - Premium Cozy Snug Visuals & Animations
 * Designed with a stunning, high-fidelity Nintendo-style playful theme.
 */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Outfit:wght@400;600;800&display=swap');

:root {
    /* Fonts */
    --ff-font-headings: 'Fredoka', sans-serif;
    --ff-font-body: 'Outfit', sans-serif;
    
    /* Cozy Color Palette */
    --ff-bg-cream: #faf7f2;       /* Warm Cozy Cream Base */
    --ff-border-dark: #18181b;     /* Slate-Dark Solid Outlines */
    
    /* Playful Pastels */
    --ff-mint: #dcfce7;           /* Cozy Mint Green */
    --ff-mint-dark: #16a34a;
    --ff-lavender: #f3e8ff;       /* Cozy Lavender */
    --ff-lavender-dark: #9333ea;
    --ff-peach: #ffe4e6;          /* Cozy Rose Peach */
    --ff-peach-dark: #e11d48;
    --ff-skyblue: #e0f2fe;        /* Cozy Sky Blue */
    --ff-skyblue-dark: #0284c7;
    --ff-yellow: #fef9c3;         /* Canary Yellow */
    --ff-yellow-dark: #ca8a04;
    
    /* Shadows */
    --ff-shadow-soft: 0 10px 0 var(--ff-border-dark);
    --ff-shadow-puffy: 0 18px 0 var(--ff-border-dark);
}

/* ---------------------------------------------------- */
/* Particle Background Canvas Overlay                  */
/* ---------------------------------------------------- */
#funful-canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, #faf8f5 0%, #f4eee1 100%);
}

/* Base Body Styles */
body {
    background: transparent !important;
    position: relative;
    z-index: 1;
    font-family: var(--ff-font-body) !important;
    color: #27272a !important;
    overflow-x: hidden;
}

/* Header Styling */
header.site-header {
    background: rgba(250, 247, 242, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 5px solid var(--ff-border-dark) !important;
    z-index: 10;
    padding: 16px 0 !important;
}

header.site-header a {
    font-family: var(--ff-font-headings) !important;
    font-weight: 700 !important;
    color: var(--ff-border-dark) !important;
    transition: transform 0.2s ease;
}

header.site-header a:hover {
    transform: scale(1.05);
}

/* Footer Styling - Premium Cozy Light Theme (Matches Main Theme & Header) */
footer.site-footer, 
.wp-block-template-part.site-footer,
footer {
    background: var(--ff-bg-cream) !important; /* Warm Cozy Cream Base */
    border-top: 5px solid var(--ff-border-dark) !important;
    border-bottom: none !important;
    z-index: 10;
    padding: 30px 0 !important; /* Reduced padding for sleek and compact sizing */
    color: var(--ff-border-dark) !important; /* Dark slate text */
}

/* Compact Footer Space Adjustments to override Gutenberg defaults */
footer .wp-block-group.has-background,
.site-footer .wp-block-group.has-background,
.wp-block-template-part.site-footer .wp-block-group.has-background {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

footer .wp-block-group.alignwide,
.site-footer .wp-block-group.alignwide {
    margin-top: 25px !important;
}


footer.site-footer a,
footer a {
    font-family: var(--ff-font-body) !important;
    font-weight: 600 !important;
    color: #4b5563 !important; /* Muted slate gray */
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

footer.site-footer a:hover,
footer a:hover {
    color: var(--ff-peach-dark) !important; /* Playful red-peach on hover */
    transform: translateX(3px);
}

/* Footer Headings */
footer h3,
footer h3.wp-block-heading,
footer .hostinger-locale {
    font-family: var(--ff-font-headings) !important;
    font-weight: 700 !important;
    color: var(--ff-border-dark) !important; /* Dark Slate heading */
    font-size: 20px !important;
    margin-bottom: 15px !important;
    border-bottom: 2px dashed var(--ff-border-dark);
    padding-bottom: 8px;
    display: inline-block;
}

/* Footer paragraphs/descriptions */
footer p,
footer .has-light-color {
    color: #4b5563 !important; /* Slate gray descriptions */
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Footer newsletter and forms input formatting */
footer input[type="email"],
footer input {
    background: #ffffff !important;
    border: 3px solid var(--ff-border-dark) !important;
    border-radius: 12px !important;
    color: var(--ff-border-dark) !important;
    padding: 10px 14px !important;
    font-family: var(--ff-font-body) !important;
}

footer input:focus {
    border-color: var(--ff-peach-dark) !important;
    outline: none;
}

footer button,
footer button[type="submit"] {
    background: var(--ff-yellow) !important;
    color: var(--ff-border-dark) !important;
    border: 3px solid var(--ff-border-dark) !important;
    font-family: var(--ff-font-headings) !important;
    font-weight: 700 !important;
    border-radius: 50px !important;
    padding: 10px 24px !important;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--ff-border-dark);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

footer button:hover {
    background: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 0 var(--ff-border-dark);
}

/* Social links in footer */
footer .wp-block-social-links a {
    background: transparent !important;
    color: var(--ff-border-dark) !important;
}

footer .wp-block-social-links svg {
    fill: var(--ff-border-dark) !important;
    transition: fill 0.2s ease, transform 0.2s ease;
}

footer .wp-block-social-links a:hover svg {
    fill: var(--ff-peach-dark) !important;
    transform: scale(1.15);
}


/* ---------------------------------------------------- */
/* Cozy & Playful Headings                              */
/* ---------------------------------------------------- */
h1, h2, h3, h4, h5, h6, 
h1.wp-block-heading, 
h2.wp-block-heading, 
.cozy-hero-title,
.cozy-category-title {
    font-family: var(--ff-font-headings) !important;
    font-weight: 700 !important;
    color: var(--ff-border-dark) !important;
    letter-spacing: -0.5px;
    margin-bottom: 20px !important;
}

/* Hero Section */
.cozy-hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg, var(--ff-peach-dark) 0%, var(--ff-lavender-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    padding-bottom: 10px;
    margin-top: 20px !important;
}

.cozy-hero-desc {
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
    max-width: 800px;
    margin: 0 auto !important;
    color: #4b5563 !important;
    font-weight: 500;
}

/* Category Title Overrides */
.cozy-category-title {
    font-size: 2.2rem !important;
    border-bottom: 5px dashed var(--ff-border-dark);
    padding-bottom: 12px;
    display: block;
    width: 100%;
    margin-bottom: 35px !important;
}

/* ---------------------------------------------------- */
/* Tactile Game Cards - Neobrutalist / Switch Vibe      */
/* ---------------------------------------------------- */
.eb-post-grid-posts-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 35px !important;
    margin-bottom: 50px !important;
}

.ebpg-post-grid-column {
    background: #ffffff !important;
    border: 5px solid var(--ff-border-dark) !important;
    border-radius: 32px !important;
    padding: 22px !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: var(--ff-shadow-soft) !important;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Alternating Cozy Pastel Palettes on Card Hover */
.eb-post-grid-posts-wrapper > div:nth-child(5n+1):hover { background: var(--ff-peach) !important; }
.eb-post-grid-posts-wrapper > div:nth-child(5n+2):hover { background: var(--ff-skyblue) !important; }
.eb-post-grid-posts-wrapper > div:nth-child(5n+3):hover { background: var(--ff-lavender) !important; }
.eb-post-grid-posts-wrapper > div:nth-child(5n+4):hover { background: var(--ff-mint) !important; }
.eb-post-grid-posts-wrapper > div:nth-child(5n):hover { background: var(--ff-yellow) !important; }

/* Bouncy Elastic Card Hover State */
.ebpg-post-grid-column:hover {
    transform: translateY(-10px) scale(1.03) !important;
    box-shadow: var(--ff-shadow-puffy) !important;
}

/* Bouncy Card Thumbnail */
.ebpg-entry-thumbnail {
    position: relative;
    border: 4px solid var(--ff-border-dark) !important;
    border-radius: 22px !important;
    overflow: hidden;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 0 rgba(30, 41, 95, 0.05);
}

.ebpg-entry-thumbnail img {
    border-radius: 18px !important;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4/3;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.ebpg-post-grid-column:hover .ebpg-entry-thumbnail img {
    transform: scale(1.1) rotate(2deg) !important;
}

/* Bouncy Cozy Play Overlay Badge */
.ebpg-entry-thumbnail::after {
    content: '🎮';
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 68px;
    height: 68px;
    background: #ffffff;
    border: 4px solid var(--ff-border-dark);
    border-radius: 50%;
    box-shadow: 0 6px 0 var(--ff-border-dark);
    opacity: 0;
    z-index: 5;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.35);
}

.ebpg-post-grid-column:hover .ebpg-entry-thumbnail::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* ---------------------------------------------------- */
/* Playful Game Metadata                                */
/* ---------------------------------------------------- */
.ebpg-entry-title {
    margin-bottom: 10px !important;
}

.ebpg-entry-title a {
    color: var(--ff-border-dark) !important;
    font-family: var(--ff-font-headings) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.ebpg-post-grid-column:hover .ebpg-entry-title a {
    color: var(--ff-border-dark) !important;
}

.ebpg-grid-post-excerpt p {
    color: #4b5563 !important;
    font-family: var(--ff-font-body) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
}

/* Category Badges Custom Styling */
.ebpg-categories-meta {
    margin-bottom: 12px;
}

.ebpg-categories-meta a {
    background: #ffffff !important;
    color: var(--ff-border-dark) !important;
    border: 3px solid var(--ff-border-dark) !important;
    padding: 5px 16px !important;
    border-radius: 50px !important;
    font-family: var(--ff-font-headings) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 0 var(--ff-border-dark);
    display: inline-block;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.eb-post-grid-posts-wrapper > div:nth-child(5n+1) .ebpg-categories-meta a { background: var(--ff-peach) !important; }
.eb-post-grid-posts-wrapper > div:nth-child(5n+2) .ebpg-categories-meta a { background: var(--ff-skyblue) !important; }
.eb-post-grid-posts-wrapper > div:nth-child(5n+3) .ebpg-categories-meta a { background: var(--ff-lavender) !important; }
.eb-post-grid-posts-wrapper > div:nth-child(5n+4) .ebpg-categories-meta a { background: var(--ff-mint) !important; }
.eb-post-grid-posts-wrapper > div:nth-child(5n) .ebpg-categories-meta a { background: var(--ff-yellow) !important; }

.ebpg-categories-meta a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 0 var(--ff-border-dark) !important;
}

/* Play Buttons (Read More) */
.ebpg-readmore-btn {
    margin-top: auto !important;
    padding-top: 10px;
}

.ebpg-readmore-btn a {
    background: var(--ff-yellow) !important;
    color: var(--ff-border-dark) !important;
    border: 4px solid var(--ff-border-dark) !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    font-family: var(--ff-font-headings) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase;
    text-decoration: none !important;
    display: block !important;
    text-align: center;
    box-shadow: 0 4px 0 var(--ff-border-dark) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.ebpg-post-grid-column:hover .ebpg-readmore-btn a {
    background: #ffffff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 7px 0 var(--ff-border-dark) !important;
}

/* ---------------------------------------------------- */
/* Micro-Reveal Animations on Scroll                     */
/* ---------------------------------------------------- */
.funful-reveal {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    transition: opacity 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.1), 
                transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.1);
    will-change: transform, opacity;
}

.funful-reveal.funful-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ---------------------------------------------------- */
/* Responsive Tweaks & Mobile-First Styling             */
/* ---------------------------------------------------- */
.funful-mobile-controls {
    display: none;
    width: 100%;
    margin-top: 15px;
    padding: 10px;
    box-sizing: border-box;
}

/* Beautiful Neobrutalist Mobile Controller Buttons */
.funful-dpad-left-side {
    display: flex;
    gap: 12px;
}

.funful-dpad-right-side {
    display: flex;
}

.funful-dpad-btn {
    width: 60px;
    height: 60px;
    background: #ffffff !important;
    border: 4px solid #18181b !important;
    border-radius: 16px !important;
    font-size: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 0 #18181b !important;
    transition: transform 0.05s ease, box-shadow 0.05s ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.funful-dpad-btn:active {
    transform: translateY(4px) !important;
    box-shadow: 0 1px 0 #18181b !important;
}

/* Specific button color highlights to evoke retro Nintendo console vibes */
.funful-btn-left { background: #e0f2fe !important; } /* Sky Blue */
.funful-btn-right { background: #e0f2fe !important; }
.funful-btn-up { background: #dcfce7 !important; } /* Mint Green */
.funful-btn-down { background: #dcfce7 !important; }
.funful-btn-action { 
    background: #ffe4e6 !important; /* Rose Peach */
    border-radius: 50% !important; /* Circle action buttons */
    width: 66px;
    height: 66px;
}

@media (max-width: 768px) {
    /* Centered Header & Thumb-Friendly Nav for Mobile-First */
    header.site-header .wp-block-group {
        flex-direction: column !important;
        align-items: center !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    header.site-header .logo-wrapper {
        margin-bottom: 12px !important;
    }
    header.site-header nav {
        justify-content: center !important;
        width: 100% !important;
    }
    header.site-header .wp-block-navigation-item {
        margin: 0 8px !important;
    }
    
    /* Reveal and display D-Pad virtual touch controls on mobile viewports */
    .funful-mobile-controls {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    
    /* Touch Highlighting Prevention */
    a, button, .ebpg-post-grid-column, .funful-dpad-btn {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Grid scaling for cozy switch vibe */
    .eb-post-grid-posts-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 0 10px !important;
    }
    
    /* Cozy card scaling */
    .ebpg-post-grid-column {
        border-radius: 24px !important;
        padding: 16px !important;
    }
    
    .cozy-hero-title {
        font-size: 2.8rem !important;
        text-align: center;
    }
    
    .cozy-hero-desc {
        font-size: 1.1rem !important;
        text-align: center;
        padding: 0 10px;
    }
    
    .cozy-category-title {
        font-size: 1.8rem !important;
        margin-bottom: 20px !important;
        text-align: center;
    }
}

/* Mobile-first D-Pad / Controls pad visibility rules */
.funful-controls-pad {
    display: none !important; /* Hide tactile D-pad controls on desktop by default */
}
.instructions-box {
    display: block !important;
}

@media (max-width: 768px) {
    .funful-controls-pad {
        display: flex !important; /* Show D-pad controls on touchscreen mobile devices */
    }
    .instructions-box {
        display: none !important; /* Hide keyboard instructions on touchscreen mobile devices */
    }
}

/* Intercept browser gestures on game canvas */
.funful-canvas-container canvas {
    touch-action: none !important;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Force Gutenberg background color classes in footer to follow the light cream theme */
footer .has-color-2-background-color,
footer .has-background,
.site-footer .has-color-2-background-color,
.site-footer .has-background,
.wp-block-template-part.site-footer .has-color-2-background-color,
.wp-block-template-part.site-footer .has-background {
    background-color: var(--ff-bg-cream) !important;
    background: var(--ff-bg-cream) !important;
}

/* Sleek Compact Header padding adjustments (resolves double-padding spacing issues) */
header.site-header .alignwide,
.site-header .alignwide {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Responsive Homepage Spacings */
@media (max-width: 768px) {
    .cozy-category-section {
        margin-bottom: 30px !important;
    }
    .cozy-hero-section {
        margin-bottom: 30px !important;
        padding-top: 20px !important;
    }
}

/* Compact Title Spacings on Single Game Pages (brings the game up closer to view) */
main.wp-block-group .alignfull.has-text-color {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Responsive Game Card Spacing overrides for mobile */
@media (max-width: 768px) {
    .funful-game-card {
        padding: 15px !important;
        border-radius: 20px !important;
        border-width: 3px !important;
        box-shadow: 4px 4px 0px #18181b !important;
    }
    .funful-game-wrapper {
        padding: 8px 0 !important;
    }
}