/* Global & Reset */ @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Open+Sans:wght@400;700&display=swap'); :root { --cartoon-blue: #64B5F6; /* Light Blue */ --cartoon-green: #81C784; /* Light Green */ --cartoon-yellow: #FFD54F; /* Light Yellow */ --cartoon-pink: #F48FB1; /* Light Pink */ --cartoon-purple: #BA68C8; /* Light Purple */ --dark-gray: #333; --medium-gray: #555; --light-gray: #eee; --white: #fff; --text-dark: #333; --text-light: #f5f5f5; --bg-gradient-start: #BBDEFB; /* Lighter Blue */ --bg-gradient-end: #E0F2F7; /* Even Lighter Blue */ --modal-bg: #FFE0B2; /* Light Orange/Cream */ --button-primary: #FFB74D; /* Orange */ --button-secondary: #AED581; /* Green */ --shadow-color: rgba(0, 0, 0, 0.2); --border-color: #795548; /* Brownish */ } * { box-sizing: border-box; } body, html { margin: 0; padding: 0; height: 100%; width: 100%; font-family: 'Open Sans', sans-serif; color: var(--text-dark); overflow: hidden; /* Prevent scrolling on main body */ position: relative; min-height: 100vh; } /* Body Border Effect */ body::before { content: ''; position: fixed; top: 0px; left: 0px; right: 5px; bottom: 0px; border: 0px solid var(--border-color); border-radius: 15px; box-shadow: 0 4px 10px var(--shadow-color); z-index: 0; } /* Main Game Container */ .game-wrapper { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; padding: 0px; overflow-y: auto; } /* Header & Main Buttons (Login/Register removed) */ .header-content { width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 2px; position: relative; z-index: 100; } h1 { font-family: 'Fredoka One', cursive; text-align: center; font-size: 50px; color: var(--cartoon-purple); text-shadow: 2px 2px 0px var(--cartoon-pink), 4px 4px 0px rgba(0,0,0,0.1); margin: 0 0 0px 0; line-height: 1; padding-bottom: 5px; letter-spacing: 2px; }