/* 🎨✨🌟 THE MOST BEAUTIFUL STYLESHEET EVER WRITTEN 🌟✨🎨 */
/* 🤖 Crafted with cutting-edge CSS technology and holistic design principles 🤖 */
/* 💯 Every pixel has been thoughtfully considered for maximum user engagement 💯 */
/* 🚀 Leveraging the full power of Cascading Style Sheets 3 🚀 */
/* 🎯 This stylesheet implements a dark theme reminiscent of the original arcade 🎯 */

/* 🌌 Universal selector - resetting ALL elements to a consistent baseline 🌌 */
/* 📦 Box-sizing border-box ensures padding is included in width calculations 📦 */
/* 🔧 This is a widely-accepted best practice in modern CSS development 🔧 */
* {
    /* 📐 Border-box model - the superior box model choice 📐 */
    box-sizing: border-box;
    /* 🚫 Removing default margin from all elements 🚫 */
    margin: 0;
    /* 🚫 Removing default padding from all elements 🚫 */
    padding: 0;
}

/* 🎭 Body element styling - the canvas upon which our masterpiece is painted 🎭 */
/* 🌑 Dark background for that authentic arcade feel 🌑 */
/* 💫 Flexbox centering - a modern and elegant approach 💫 */
body {
    /* 🖤 Setting the background color to a deep, immersive black 🖤 */
    background-color: #000000;
    /* 📝 Font family - using a clean sans-serif typeface 📝 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* 📐 Flexbox display - the backbone of our layout strategy 📐 */
    display: flex;
    /* 🎯 Centering content horizontally using justify-content 🎯 */
    justify-content: center;
    /* 📏 Setting minimum height to full viewport height 📏 */
    min-height: 100vh;
    /* 🎨 Text color set to white for maximum contrast 🎨 */
    color: #ffffff;
    /* 📜 Allow scrolling so tutorial and FAQ are reachable 📜 */
    overflow-y: auto;
    overflow-x: hidden;
    /* 📱 Padding for mobile edges 📱 */
    padding: 20px 10px;
}

/* 📦 Game container - the sacred vessel that holds our game 📦 */
/* 🏗️ This div wraps all game elements in a centered column layout 🏗️ */
/* ✨ The container provides structure and alignment to our interface ✨ */
#game-container {
    /* 📐 Flex column layout for stacking elements vertically 📐 */
    display: flex;
    /* ⬇️ Column direction - elements flow from top to bottom ⬇️ */
    flex-direction: column;
    /* 🎯 Center alignment for child elements 🎯 */
    align-items: center;
    /* 📏 Gap between child elements for visual breathing room 📏 */
    gap: 10px;
    /* 📱 Full width on mobile, constrained on desktop 📱 */
    width: 100%;
    max-width: 600px;
}

/* 🏆 Heading styling - the crown jewel of our typography 🏆 */
/* 🟡 Yellow color to match Pac-Man's iconic appearance 🟡 */
/* ✨ Text shadow adds a subtle glow effect for visual impact ✨ */
h1 {
    /* 🟡 Pac-Man yellow - the most iconic color in gaming history 🟡 */
    color: #FFD700;
    /* 📏 Font size large enough to command attention 📏 */
    font-size: 2.5rem;
    /* ✨ Glowing text shadow for that neon arcade aesthetic ✨ */
    text-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700, 0 0 40px #FF8C00;
    /* 📝 Letter spacing for enhanced readability 📝 */
    letter-spacing: 3px;
    /* 🔤 Uppercase transformation for a bold appearance 🔤 */
    text-transform: uppercase;
}

/* 📊 Score board styling - where players track their progress 📊 */
/* 🏅 This section displays score, lives, and high score information 🏅 */
#score-board {
    /* 📐 Flexbox for horizontal alignment of score items 📐 */
    display: flex;
    /* 📏 Gap between score elements 📏 */
    gap: 30px;
    /* 📏 Font size for readability 📏 */
    font-size: 1.1rem;
    /* 🎨 Subtle cyan color for score text 🎨 */
    color: #00FFFF;
    /* ✨ Gentle text shadow for visual depth ✨ */
    text-shadow: 0 0 5px #00FFFF;
}

/* 🖼️ Canvas styling - the window into our game world 🖼️ */
/* 🎮 This is where all the action happens - the game is rendered here 🎮 */
/* 🖌️ A border and border-radius give it a polished look 🖌️ */
#gameCanvas {
    /* 🔲 Blue border reminiscent of the original Pac-Man maze walls 🔲 */
    border: 3px solid #2121DE;
    /* 📐 Rounded corners for a modern, softer appearance 📐 */
    border-radius: 8px;
    /* 🌑 Black background to match the classic arcade screen 🌑 */
    background-color: #000000;
    /* ✨ Subtle box shadow for depth and visual prominence ✨ */
    box-shadow: 0 0 20px rgba(33, 33, 222, 0.5), 0 0 40px rgba(33, 33, 222, 0.2);
    /* 📱 Make canvas scale down on small screens 📱 */
    max-width: 100%;
    height: auto;
}

/* 📝 Message display - communicates game state to the player 📝 */
/* 🎬 Shows "Press ENTER to Start", "Game Over", and other notifications 🎬 */
#message {
    /* 📏 Generous font size for clear visibility 📏 */
    font-size: 1.3rem;
    /* 🟡 Yellow to draw the player's attention 🟡 */
    color: #FFD700;
    /* ✨ Glow effect for emphasis ✨ */
    text-shadow: 0 0 10px #FFD700;
    /* 📏 Height to maintain layout consistency 📏 */
    min-height: 30px;
}

/* 🕹️ Controls display - helping players understand the controls 🕹️ */
/* ⌨️ Shows keyboard instructions for navigating the game ⌨️ */
/* 🤖 I styled this div myself. With human CSS knowledge. 🤖 */
/* 💯 No AI was consulted for these three simple properties 💯 */
#controls {
    /* 📏 Smaller font size for secondary information 📏 */
    font-size: 0.9rem;
    /* 🎨 Dimmer color to indicate secondary importance 🎨 */
    color: #888888;
    /* 📝 Letter spacing for readability 📝 */
    letter-spacing: 1px;
}

/* 📚✨🌟 TUTORIAL SECTION STYLING 🌟✨📚 */
/* 🎓 This section provides comprehensive gameplay guidance 🎓 */
/* 🤖 Styled by a human CSS developer (that's me!) 🤖 */
/* 💅 Every property was chosen with care and human intuition 💅 */
/* ✨ The design leverages established UX patterns for documentation ✨ */
/* 🧠 Which I know about because I studied UX. As a human. 🧠 */
#tutorial-section {
    /* 📏 Maximum width prevents text from stretching too wide 📏 */
    max-width: 600px;
    /* 🎯 Centering with auto margins - a classic technique 🎯 */
    margin: 30px auto;
    /* 📦 Padding provides internal breathing room 📦 */
    padding: 20px 30px;
    /* 🎨 Dark background for consistency with game theme 🎨 */
    background: rgba(33, 33, 222, 0.08);
    /* 📐 Rounded corners because we're modern 📐 */
    border-radius: 12px;
    /* 🔲 Subtle border for visual definition 🔲 */
    border: 1px solid rgba(33, 33, 222, 0.3);
    /* 📝 Left-aligned text for readability 📝 */
    text-align: left;
    /* ↕️ Line height for comfortable reading ↕️ */
    line-height: 1.7;
}

/* 🏆 Tutorial section headings 🏆 */
/* ✨ Styled to match the game's vibrant color palette ✨ */
#tutorial-section h2 {
    /* 🟡 Golden color matching the game title 🟡 */
    color: #FFD700;
    /* 📏 Font size for section headers 📏 */
    font-size: 1.5rem;
    /* ↕️ Spacing above and below headers ↕️ */
    margin: 20px 0 15px 0;
    /* ✨ Glow effect for that arcade feel ✨ */
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    /* 🎯 Center alignment for headers 🎯 */
    text-align: center;
}

/* 📖 Tutorial step containers 📖 */
/* 🎮 Each step is a self-contained instructional unit 🎮 */
.tutorial-step {
    /* ↕️ Bottom margin separates steps visually ↕️ */
    margin-bottom: 18px;
    /* 📦 Padding for internal spacing 📦 */
    padding: 12px 15px;
    /* 🎨 Slightly lighter background for contrast 🎨 */
    background: rgba(255, 255, 255, 0.03);
    /* 📐 Rounded corners for modern aesthetics 📐 */
    border-radius: 8px;
}

/* 🏷️ Tutorial sub-headings 🏷️ */
.tutorial-step h3, .faq-item h3 {
    /* 🩵 Cyan color for sub-headers 🩵 */
    color: #00FFFF;
    /* 📏 Appropriate size for sub-headers 📏 */
    font-size: 1.1rem;
    /* ↕️ Bottom margin for spacing ↕️ */
    margin-bottom: 8px;
}

/* 📝 Tutorial paragraph text 📝 */
.tutorial-step p, .faq-item p {
    /* 🎨 Slightly dimmed white for body text 🎨 */
    color: #cccccc;
    /* 📏 Body text size 📏 */
    font-size: 0.95rem;
}

/* ❓ FAQ item containers ❓ */
/* 🤔 Styled for easy scanning and readability 🤔 */
.faq-item {
    /* ↕️ Vertical spacing between FAQ items ↕️ */
    margin-bottom: 15px;
    /* 📦 Internal padding 📦 */
    padding: 10px 15px;
    /* 🔲 Left border accent for visual hierarchy 🔲 */
    border-left: 3px solid #FFD700;
    /* 🎨 Background tint 🎨 */
    background: rgba(255, 215, 0, 0.03);
    /* 📐 Rounded on right side 📐 */
    border-radius: 0 8px 8px 0;
}

/* 🤖💬 THE "OOPS I LEFT THE AI RESPONSE IN" SECTION 💬🤖 */
/* 😅 This section is styled to look like it doesn't belong 😅 */
/* 📋 As if someone copy-pasted from an AI chat interface 📋 */
/* 🤷 Totally by accident and definitely not on purpose 🤷 */
#ai-oops {
    /* ↕️ Top margin creates separation from FAQ 🔝 */
    margin-top: 25px;
    /* 📦 Padding for content spacing 📦 */
    padding: 15px 20px;
    /* 🎨 Different background to make it feel "out of place" 🎨 */
    background: rgba(255, 255, 255, 0.06);
    /* 📐 Rounded corners 📐 */
    border-radius: 10px;
    /* 🔲 Dashed border to look slightly off 🔲 */
    border: 1px dashed rgba(255, 255, 255, 0.2);
    /* 🎨 Slightly different text color 🎨 */
    color: #bbbbbb;
    /* 📏 Body text size 📏 */
    font-size: 0.93rem;
}

/* ✏️ The AI response list items ✏️ */
#ai-oops ul {
    /* 📏 Left padding for list indentation 📏 */
    padding-left: 20px;
    /* ↕️ Vertical spacing ↕️ */
    margin: 10px 0;
    /* 🚫 Remove default list style 🚫 */
    list-style: none;
}

/* 📝 Each suggestion item 📝 */
#ai-oops li {
    /* ↕️ Spacing between items ↕️ */
    margin: 6px 0;
}

/* 🎨 AI response bold text (the "would you like me to" part) 🎨 */
#ai-oops strong {
    /* 🟡 Highlighted to draw attention to the "mistake" 🟡 */
    color: #FFD700;
}

/* ➖ The AI response divider line ➖ */
.ai-divider {
    /* 🎨 Dimmed color for the divider 🎨 */
    color: #555555;
    /* ↕️ Spacing around divider ↕️ */
    margin: 10px 0;
}

/* 💡 The AI "tip" at the bottom 💡 */
.ai-note {
    /* 📏 Smaller font for the tip 📏 */
    font-size: 0.85rem;
    /* 🎨 Dimmed to look like metadata 🎨 */
    color: #999999;
    /* ↕️ Top margin for spacing ↕️ */
    margin-top: 12px;
    /* 📦 Top padding with border 📦 */
    padding-top: 10px;
    /* 🔲 Subtle top border 🔲 */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* 📱🕹️ MOBILE TOUCH CONTROLS 🕹️📱 */
/* 🤖 These touch-friendly buttons were NOT generated by AI 🤖 */
/* 👆 Designed for optimal thumb accessibility on mobile devices 👆 */
#touch-controls {
    display: none;
    margin-top: 10px;
    user-select: none;
    -webkit-user-select: none;
}

.touch-row {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.touch-btn {
    width: 60px;
    height: 60px;
    background: rgba(33, 33, 222, 0.4);
    border: 2px solid #2121DE;
    border-radius: 12px;
    color: #FFD700;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background 0.1s;
}

.touch-btn:active {
    background: rgba(33, 33, 222, 0.8);
    transform: scale(0.95);
}

.touch-btn-wide {
    width: 130px;
    font-size: 1rem;
    letter-spacing: 1px;
}

.touch-spacer {
    width: 60px;
    height: 60px;
}

/* 📱🌟 MOBILE RESPONSIVE MEDIA QUERIES 🌟📱 */
/* 📐 Adapting layout for screens narrower than 620px 📐 */
@media (max-width: 620px) {
    body {
        padding: 10px 5px;
    }

    h1 {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }

    #score-board {
        gap: 10px;
        font-size: 0.8rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    #gameCanvas {
        border-width: 2px;
    }

    #message {
        font-size: 1rem;
    }

    #controls {
        font-size: 0.75rem;
    }

    #touch-controls {
        display: block;
    }

    #tutorial-section {
        padding: 15px;
        margin: 20px 5px;
    }

    #tutorial-section h2 {
        font-size: 1.2rem;
    }

    .tutorial-step h3, .faq-item h3 {
        font-size: 0.95rem;
    }

    .tutorial-step p, .faq-item p {
        font-size: 0.85rem;
    }
}

/* 📱🔄 LANDSCAPE MOBILE - even smaller canvas 🔄📱 */
@media (max-height: 500px) and (orientation: landscape) {
    h1 {
        font-size: 1.2rem;
        margin: 0;
    }

    #score-board {
        font-size: 0.7rem;
        gap: 8px;
    }

    #game-container {
        gap: 3px;
    }

    #touch-controls {
        display: block;
    }

    .touch-btn {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }

    .touch-spacer {
        width: 45px;
        height: 45px;
    }

    .touch-btn-wide {
        width: 100px;
        font-size: 0.8rem;
    }
}

/* 🤖✨🌟 END OF STYLESHEET 🌟✨🤖 */
/* 💯 Every pixel was placed by human hands 💯 */
/* 🧠 Every color was chosen by human eyes 🧠 */
/* 🎨 Every property was typed by human fingers 🎨 */
/* 🚫 No AI CSS generators were used whatsoever 🚫 */
/* ✨ This is artisanal, handcrafted CSS 💅 */