body { margin: 0; overflow: hidden; }
#game-container { width: 100vw; height: 100vh; position: relative; background-color: #1a1a2e; }
#game-canvas { display: block; width: 100%; height: 100%; }
#ui-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: white; font-family: 'Segoe UI', Arial, sans-serif; pointer-events: none; }
#hud { position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; gap: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); font-size: 1.8em; }
#food-container { display: flex; align-items: center; gap: 10px; }
#powerup-timer { background-color: #FFD700; color: #4B0082; padding: 5px 15px; border-radius: 20px; font-size: 0.8em; font-weight: bold; animation: pulse 1s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.screen { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: rgba(26, 26, 46, 0.85); pointer-events: all; opacity: 1; transition: opacity 0.5s; }
.screen.hidden { opacity: 0; pointer-events: none; }
.screen h1 { font-size: 5em; margin-bottom: 0.2em; text-shadow: 3px 3px 0px #9370DB, 6px 6px 0px #FFD700; }
.screen p { font-size: 1.2em; margin-bottom: 1em; max-width: 400px; }
.screen .sound-notice { font-size: 0.9em; color: #ccc; margin-top: 1.5em; }
.screen button { padding: 15px 40px; font-size: 1.5em; background: linear-gradient(45deg, #FFD700, #f0e68c); color: #4B0082; border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s ease; }
.screen button:hover { transform: scale(1.05); }
#character-selection { display: flex; gap: 30px; margin-bottom: 2em; }
.character-option { padding: 20px; border: 3px solid #6c757d; border-radius: 15px; cursor: pointer; transition: all 0.3s ease; background-color: rgba(0,0,0,0.2); }
.character-option:hover { background-color: rgba(255,255,255,0.1); }
.character-option.selected { border-color: #FFD700; transform: scale(1.1); box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); }
.char-name { font-size: 1.2em; font-weight: bold; margin-bottom: 10px; }
.char-preview-cat, .char-preview-dog { width: 80px; height: 80px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.char-preview-cat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23444444'%3E%3Crect x='30' y='40' width='40' height='20' rx='10'/%3E%3Ccircle cx='50' cy='25' r='15'/%3E%3Cpath d='M40 10 L45 20 L35 20 Z'/%3E%3Cpath d='M60 10 L65 20 L55 20 Z'/%3E%3C/g%3E%3C/svg%3E"); }
.char-preview-dog { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23aa7356'%3E%3Crect x='30' y='40' width='40' height='20' rx='5'/%3E%3Crect x='45' y='20' width='30' height='20' rx='5'/%3E%3Crect x='40' y='30' width='10' height='15'/%3E%3Crect x='70' y='30' width='10' height='15'/%3E%3C/g%3E%3C/svg%3E"); }
.loader { border: 8px solid #f3f3f3; border-top: 8px solid #FFD700; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }