/* =========================================
   Rocket Toast - Game Page Cozy CSS 
   ========================================= */

/* Importing your chosen cozy fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,700&family=Outfit:wght@700;800');

.game-page {
    /* Overriding the font variables to use our cozy choices */
    --game-font-base: 'DM Sans', sans-serif;
    --game-font-heading: 'Outfit', sans-serif;
    --game-font-button: 'DM Sans', sans-serif;
    
    /* Cozy styling tokens */
    --border-radius-lg: 16px;
    --border-radius-pill: 50px;
}
.game-page p {
    font-weight: 300;
}
.game-page strong {
    font-weight: 700;
}

/* --- Minimal Header --- */
.game-page .minimal-header {
    /* Adds a soft, frosted glass effect behind the nav */
    backdrop-filter: blur(8px);
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
    border-bottom: none !important; /* Softens the hard line */
    padding: 1.5rem 0;
}

.game-page .minimal-header a {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.game-page .minimal-header a:hover {
    opacity: 1 !important;
    transform: translateX(-3px); /* Gentle nudge back to studio */
}

/* --- Game Hero --- */
.game-page .game-hero::before {
    /* Warms up the dark overlay to blend better with the game's background color */
    background: linear-gradient(
        to bottom, 
        var(--game-bg) 0%, 
        rgba(0,0,0,0.4) 50%, 
        var(--game-bg) 100%
    ) !important;
    opacity: 0.95;
}

.game-page .game-title {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); /* Soft, diffused text shadow */
    letter-spacing: -0.02em; 
}

.game-page .game-tagline {
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* --- Buttons --- */
.game-page .btn-game-primary {
    border-radius: var(--border-radius-pill) !important; /* Forces the pill shape */
    padding: 0.8rem 2.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.game-page .btn-game-primary:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* --- Feature Blocks --- */
.game-page .feature-block {
    border-bottom: none !important; /* Removes the harsh dividing line */
    padding: 5rem 0;
}

/* Gives the feature images a playful, tactile feel */
.game-page .feature-block img {
    border-radius: var(--border-radius-lg) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    border: 4px solid var(--game-accent) !important; /* Thicker, friendlier border */
    transition: transform 0.4s ease;
}

.game-page .feature-block:hover img {
    transform: scale(1.02); /* Gentle pop and tilt on hover */
}

.game-page .feature-block h2 {
    font-weight: 800;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

/* Adds a soft underline accent to feature headings using the game's accent color */
.game-page .feature-block h2::after {
    content: '';
    position: absolute;
    width: 30%;
    height: 4px;
    background-color: var(--game-accent);
    bottom: -8px;
    left: 0;
    border-radius: 4px;
    opacity: 0.5;
}

.game-page .feature-block p {
    line-height: 1.8;
}

/* --- Bottom CTA & Footer --- */
.game-page .text-center[style*="background-color"] {
    /* Softens the CTA background box and rounds it out */
    background-color: rgba(0,0,0,0.12) !important; 
    border-radius: var(--border-radius-lg);
    margin: 2rem;
}

.game-page footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}