*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;font-family:Arial,sans-serif}#gameCanvas{display:block;width:100%;height:100vh}#ui{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#timer{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:15px 30px;border-radius:10px;font-size:24px;font-weight:700}#friendCounter{position:absolute;top:80px;left:50%;transform:translate(-50%);background:#000000b3;color:#fff;padding:10px 20px;border-radius:10px;font-size:18px}#interactionPrompt{position:absolute;bottom:200px;left:50%;transform:translate(-50%);background:#ffc800e6;color:#000;padding:15px 30px;border-radius:10px;font-size:18px;font-weight:700;display:none;pointer-events:none;border:3px solid #ffaa00;box-shadow:0 0 20px #ffc80080;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:translate(-50%) scale(1)}50%{transform:translate(-50%) scale(1.05)}}#dialogue{position:absolute;bottom:100px;left:50%;transform:translate(-50%);background:#000000e6;color:#fff;padding:20px 30px;border-radius:15px;font-size:16px;max-width:500px;text-align:center;display:none;pointer-events:auto}#dialogue .npc-name{font-weight:700;color:#fc0;margin-bottom:10px}#dialogue button{margin-top:15px;padding:10px 20px;background:#fc0;border:none;border-radius:5px;cursor:pointer;font-size:14px;font-weight:700}#dialogue button:hover{background:#fd0}.popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000f2;color:#fff;padding:40px 60px;border-radius:20px;text-align:center;display:none;pointer-events:auto}.popup h2{font-size:36px;margin-bottom:20px}.popup button{margin:10px;padding:15px 30px;background:#4caf50;border:none;border-radius:10px;cursor:pointer;font-size:16px;font-weight:700;color:#fff}.popup button:hover{background:#45a049}.popup button.secondary{background:#666}.popup button.secondary:hover{background:#777}#loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;color:#fff;padding:40px 60px;border-radius:20px;text-align:center;font-size:24px}.modal{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:2000;pointer-events:auto}.modal .modal-content{background:#1e1e1efa;max-width:600px;width:90%;border:3px solid #ffcc00;color:#fff;padding:30px;border-radius:15px;text-align:center;box-shadow:0 10px 30px #00000080;min-width:400px}.modal .modal-title{color:#fff;margin-top:0;margin-bottom:20px}.control-section{background:#ffffff1a;padding:15px;border-radius:10px;margin-bottom:20px}.control-title{color:#fff;display:block;font-size:18px;margin-bottom:10px}.control-parent{text-align:left;color:#ddd}.control-list{margin:8px 0}.control-list-span{font-weight:700}.button-list{margin:15px 0}.modal h2{font-size:28px;margin-bottom:25px;color:#fc0}.modal .instructions{text-align:left;margin-bottom:25px}.modal .instructions p{margin-bottom:15px;font-size:16px;line-height:1.6}.modal .instructions ul{padding-left:20px;margin-bottom:15px}.modal .instructions li{margin-bottom:8px;font-size:15px}.modal button{padding:15px 40px;background:#fc0;border:none;border-radius:10px;cursor:pointer;font-size:18px;font-weight:700;color:#000;transition:all .3s;margin-top:10px}.modal button:hover{background:#fd0;transform:scale(1.05);box-shadow:0 0 20px #ffcc0080}.pause-button{position:fixed;bottom:20px;right:20px;width:60px;height:60px;background:#000c;border:3px solid #ffcc00;border-radius:50%;cursor:pointer;pointer-events:auto;z-index:1000;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 4px 10px #00000080}.pause-button:hover{background:#000000f2;transform:scale(1.1);box-shadow:0 6px 15px #ffcc0080;border-color:#fd0}.pause-button:active{transform:scale(.95)}.pause-button .icon{font-size:28px;-webkit-user-select:none;user-select:none;transition:transform .2s}.pause-button.muted .icon{transform:scale(.9)}.mt-3{margin-top:30px}#mobileModal .modal-content{background:#1e1e1efa;max-width:500px;width:80%;border:3px solid #ff3300;color:#fff;padding:30px;border-radius:15px;text-align:center;box-shadow:0 10px 30px #00000080}#mobileModal h2{color:#f60;font-size:24px;margin-bottom:15px}#mobileModal p{margin-bottom:20px;font-size:16px;line-height:1.5}#mobileModal button{background:#f30;color:#fff;padding:12px 30px;font-size:16px}#mobileModal button:hover{background:#f40;transform:scale(1.05);box-shadow:0 0 20px #ff330080}.button-full button{width:100%;padding:10px;margin-top:20px;font-size:16px}.button-row{display:flex;gap:12px}.button-row button{flex:1;padding:10px;font-size:16px}@keyframes muteButtonPulse{0%,to{box-shadow:0 4px 10px #00000080}50%{box-shadow:0 4px 20px #ffcc00b3}}.pause-button:hover{animation:muteButtonPulse 2s ease-in-out infinite}