*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#f0f0f0;display:flex;justify-content:center;align-items:center;min-height:100vh}.game-container{background-color:#fff;border-radius:10px;box-shadow:0 4px 6px #0000001a;padding:20px}.game-header{text-align:center;margin-bottom:20px}.header-top{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:10px}.back-to-menu-btn{position:absolute;left:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:0;padding:12px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-decoration:none;border-radius:50%;font-size:14px;font-weight:500;transition:all .3s ease;box-shadow:0 2px 10px #0000001a;width:44px;height:44px}.back-to-menu-btn:hover{transform:translateY(-50%) translateY(-2px);box-shadow:0 4px 15px #0003;background:linear-gradient(135deg,#5a6fd8,#6a4190)}.back-icon{font-size:18px;font-weight:700}.back-text{display:none}.game-header h1{background:linear-gradient(45deg,red,#ff8000,#ff0,#80ff00,#0f0,#00ff80,#0ff,#0080ff,#00f,#8000ff,#f0f,#ff0080);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:rainbow 3s ease infinite;margin-bottom:10px}.score-board{display:flex;justify-content:center;gap:30px;font-size:18px}.score,.high-score{color:#666}.score span,.high-score span{font-weight:700;color:#ff6b6b}.audio-controls{margin-top:15px;display:flex;justify-content:center;align-items:center;gap:15px;flex-wrap:wrap}.audio-btn{background-color:#4caf50;color:#fff;border:none;padding:8px 16px;font-size:14px;border-radius:5px;cursor:pointer;transition:background-color .3s}.audio-btn:hover{background-color:#45a049}.audio-btn.muted{background-color:#f44336}.audio-btn.muted:hover{background-color:#da190b}.volume-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}.volume-label{font-size:12px;font-weight:700;color:#666;min-width:30px;text-align:center}.volume-slider{width:80px;cursor:pointer;-webkit-appearance:none;appearance:none;height:4px;background:#ddd;border-radius:2px;outline:none;flex-shrink:0}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;background:#4caf50;border-radius:50%;cursor:pointer}.volume-slider::-moz-range-thumb{width:16px;height:16px;background:#4caf50;border-radius:50%;cursor:pointer;border:none}.game-area{position:relative;display:flex;gap:20px;align-items:flex-start}#gameCanvas{border:2px solid #ddd;border-radius:5px;background-color:#fafafa}.game-info{display:flex;flex-direction:column;gap:20px}.next-face{background-color:#f8f8f8;border:2px solid #ddd;border-radius:5px;padding:10px;text-align:center;min-width:120px}.controls{background-color:#f8f8f8;border:2px solid #ddd;border-radius:5px;padding:15px;min-width:120px}.controls h3{margin-bottom:10px;color:#666;font-size:16px}.controls p{margin:5px 0;font-size:14px;color:#888}.evolution-guide{background-color:#f8f8f8;border:2px solid #ddd;border-radius:5px;padding:15px;min-width:120px;max-height:400px;overflow-y:auto}.evolution-guide h3{margin-bottom:10px;color:#666;font-size:16px;text-align:center}.evolution-list{display:flex;flex-direction:column;gap:8px}.evolution-item{display:flex;align-items:center;gap:5px;justify-content:center}.evolution-item img{width:25px;height:25px;object-fit:contain}.evolution-item span{font-size:14px;color:#666;font-weight:700}.evolution-item.special{margin-top:10px;padding-top:10px;border-top:2px dashed #ff6b6b}.evolution-item .vanish{color:#ff6b6b;font-size:16px;animation:pulse 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes rainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.next-face p{margin-bottom:10px;font-weight:700;color:#666}.next-face img{width:80px;height:80px;object-fit:contain}.game-over{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:40px;border-radius:10px;box-shadow:0 4px 20px #0000004d;text-align:center;z-index:1000}.game-over h2{color:#ff6b6b;margin-bottom:20px;font-size:32px}.game-over p{font-size:24px;margin-bottom:20px}.share-buttons{display:flex;gap:10px;justify-content:center;margin-bottom:20px;flex-wrap:wrap}.share-btn{background-color:#2196f3;color:#fff;border:none;padding:10px 15px;font-size:14px;border-radius:5px;cursor:pointer;transition:background-color .3s}.share-btn:hover{background-color:#1976d2}#restartBtn{background-color:#4caf50;color:#fff;border:none;padding:12px 24px;font-size:18px;border-radius:5px;cursor:pointer;transition:background-color .3s}#restartBtn:hover{background-color:#45a049}.hidden{display:none}.pause-menu{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;justify-content:center;align-items:center;z-index:1000}.pause-menu:not(.hidden){display:flex}.pause-content{background-color:#fff;padding:40px;border-radius:10px;box-shadow:0 4px 20px #0000004d;text-align:center;max-width:400px;width:90%}.pause-content h2{margin-bottom:15px;color:#333;font-size:28px}.pause-content p{margin-bottom:20px;color:#666;font-size:16px}.pause-info{margin:20px 0;padding:15px;background-color:#f5f5f5;border-radius:8px}.pause-info p{margin:0;font-size:18px;color:#333}.pause-info span{font-weight:700;color:#ff6b6b}.pause-buttons{display:flex;flex-direction:column;gap:12px;margin-top:25px}.pause-btn{padding:12px 24px;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background-color .3s;font-weight:700}.pause-btn.resume{background-color:#4caf50;color:#fff}.pause-btn.resume:hover{background-color:#45a049}.pause-btn.save{background-color:#2196f3;color:#fff}.pause-btn.save:hover{background-color:#1976d2}.pause-btn.load{background-color:#ff9800;color:#fff}.pause-btn.load:hover{background-color:#f57c00}.pause-btn.restart{background-color:#f44336;color:#fff}.pause-btn.restart:hover{background-color:#da190b}.auto-save-notification{background-color:#e3f2fd;border-left:4px solid #2196F3;padding:15px;margin-bottom:20px;border-radius:4px;box-shadow:0 2px 4px #0000001a;z-index:10;position:relative}.auto-save-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:15px}.auto-save-content span{font-size:16px;color:#1565c0;font-weight:500}.auto-save-buttons{display:flex;gap:10px}.auto-save-btn{padding:8px 16px;border:none;border-radius:4px;font-size:14px;cursor:pointer;transition:background-color .3s;font-weight:500}.auto-save-btn.resume{background-color:#4caf50;color:#fff}.auto-save-btn.resume:hover{background-color:#45a049}.auto-save-btn.new{background-color:#9e9e9e;color:#fff}.auto-save-btn.new:hover{background-color:#757575}@media screen and (max-width: 768px){body{padding:10px;align-items:flex-start}.game-container{width:100%;max-width:100%;padding:15px;margin:0}.game-header h1{font-size:24px}.score-board{flex-direction:column;gap:10px;font-size:16px}.audio-controls{flex-direction:column;gap:10px}.volume-controls{flex-direction:column;gap:8px;align-items:center;width:100%}.volume-slider{width:200px;max-width:280px}.volume-label{font-size:14px;margin-bottom:5px}.game-area{flex-direction:column;align-items:center;gap:15px}#gameCanvas{width:100%;max-width:350px;height:auto}.game-info{width:100%;max-width:350px;flex-direction:row;flex-wrap:wrap;justify-content:space-around;gap:10px}.next-face,.controls,.evolution-guide{flex:1;min-width:150px;max-width:none}.evolution-guide{max-height:250px}.game-over{width:90%;max-width:400px;padding:30px 20px}.game-over h2{font-size:24px}.game-over p{font-size:18px}.share-buttons{flex-direction:column;gap:8px}.share-btn{width:100%;padding:12px}.back-to-menu-btn{font-size:12px;padding:8px;gap:0;left:10px;width:32px;height:32px;border-radius:50%;justify-content:center}.back-icon{font-size:16px}.back-text{display:none}.game-header h1{font-size:24px;margin-bottom:10px}}@media screen and (max-width: 480px){.game-container{padding:10px}.game-header h1{font-size:20px}.score-board{font-size:14px}#gameCanvas{max-width:280px}.game-info{max-width:280px;flex-direction:column}.next-face,.controls,.evolution-guide{min-width:auto;width:100%}.controls h3,.evolution-guide h3{font-size:14px}.controls p{font-size:12px}.evolution-guide{max-height:200px}.evolution-item img{width:20px;height:20px}.evolution-item span{font-size:12px}.game-over{padding:20px 15px}.game-over h2{font-size:20px}.game-over p{font-size:16px}.desktop-controls{display:none}.mobile-controls{display:block}.volume-controls{flex-direction:column;gap:6px;width:100%;margin-top:8px}.volume-slider{width:180px;max-width:250px;height:6px}.volume-slider::-webkit-slider-thumb{width:18px;height:18px}.volume-slider::-moz-range-thumb{width:18px;height:18px}.volume-label{font-size:13px;margin-bottom:3px}}@media screen and (min-width: 769px){.desktop-controls{display:block}.mobile-controls{display:none}}.score-submission-section{background:#f0f0f0f2;padding:20px;border-radius:12px;margin:20px 0;border:2px solid #e0e0e0;text-align:center}.score-submission-section h3{font-size:1.2rem;margin-bottom:15px;color:#333;font-weight:700}.player-name-input{margin-bottom:15px}.name-input{width:100%;max-width:300px;padding:10px;font-size:1rem;border:2px solid #ddd;border-radius:6px;background:#fff;color:#333;text-align:center;transition:border-color .3s,box-shadow .3s}.name-input:focus{outline:none;border-color:#4caf50;box-shadow:0 0 8px #4caf504d}.input-hint{display:block;margin-top:5px;font-size:.8rem;color:#666}.submit-score-btn{width:100%;max-width:250px;padding:12px 20px;font-size:1.1rem;background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:700;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}.submit-score-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #4caf5066}.submit-score-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.submission-status{margin-top:10px;font-size:.9rem;min-height:20px;font-weight:700}.submission-status.error{color:#f44336}.submission-status.success{color:#4caf50}.submission-success{margin-top:15px;padding:15px;background:#4caf501a;border-radius:8px;border:1px solid rgba(76,175,80,.3)}.submission-success.hidden{display:none}.view-ranking-btn{margin-top:10px;padding:8px 16px;background:linear-gradient(135deg,#2196f3,#1976d2);color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:.9rem;transition:transform .2s;text-decoration:none;display:inline-block}.view-ranking-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #2196f366}.ranking-banner{background:linear-gradient(135deg,gold,#ff8c00,tomato);border-radius:12px;margin:0 auto 20px;max-width:600px;box-shadow:0 4px 15px #ff8c004d;overflow:hidden;position:relative}.banner-content{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;position:relative;z-index:2}.banner-icon{font-size:2.5rem;margin-right:15px;animation:bounce 2s infinite}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.banner-text{flex:1;text-align:left}.banner-text h3{color:#fff;margin:0 0 5px;font-size:1.4rem;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.banner-text p{color:#ffffffe6;margin:0;font-size:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.banner-link{margin-left:15px}.ranking-link-btn{background:#fff3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);color:#fff;padding:10px 20px;border-radius:25px;text-decoration:none;font-weight:700;font-size:1rem;transition:all .3s ease;display:inline-block;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.ranking-link-btn:hover{background:#ffffff4d;border-color:#ffffff80;transform:translateY(-2px);box-shadow:0 4px 12px #0003}@media screen and (max-width: 768px){.banner-content{flex-direction:column;text-align:center;gap:15px;padding:20px 15px}.banner-text{text-align:center}.banner-text h3{font-size:1.2rem}.banner-text p{font-size:.9rem}.banner-link{margin-left:0}.ranking-link-btn{padding:12px 24px;font-size:1rem}}@media screen and (max-width: 480px){.ranking-banner{margin-bottom:15px}.banner-content{padding:8px 10px;gap:8px;flex-direction:row;align-items:center}.banner-icon{font-size:1.3rem;margin-right:8px}.banner-text{text-align:left;flex:1}.banner-text h3{font-size:.9rem;margin-bottom:1px}.banner-text p{font-size:.7rem;line-height:1.2}.banner-link{margin-left:8px}.ranking-link-btn{padding:6px 12px;font-size:.75rem;border-radius:15px}}@media screen and (max-width: 480px){.score-submission-section{padding:15px;margin:15px 0}.score-submission-section h3{font-size:1.1rem}.name-input{font-size:.9rem;padding:8px}.submit-score-btn{font-size:1rem;padding:10px 15px}}