body { margin: 0; background: #050505; color: white; font-family: 'Consolas', monospace; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; }
#game-container { position: relative; border: 4px solid #444; box-shadow: 0 0 100px rgba(0,0,0,1); }
#ui { position: absolute; top: 20px; left: 20px; pointer-events: none; }
.task-header { font-size: 12px; color: #39FF14; margin-bottom: 5px; }
.task-bar { width: 350px; height: 18px; background: rgba(50,50,50,0.8); border: 2px solid #555; border-radius: 4px; }
#task-progress { width: 0%; height: 100%; background: linear-gradient(90deg, #1f930a, #39FF14); transition: 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
#role-text { font-size: 32px; font-weight: bold; margin-top: 10px; text-transform: uppercase; letter-spacing: 2px; }
#room-name { font-size: 14px; color: #888; background: rgba(0,0,0,0.5); padding: 5px; border-radius: 4px; display: inline-block; }

#action-prompt { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); background: white; color: black; padding: 10px 20px; font-weight: bold; border-radius: 5px; animation: pulse 1s infinite; }
@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }

#cooldown-circle { position: absolute; bottom: 40px; right: 40px; width: 80px; height: 80px; border-radius: 50%; border: 4px solid red; display: flex; justify-content: center; align-items: center; font-size: 30px; font-weight: bold; background: rgba(255,0,0,0.2); }

#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 100; }
#overlay.hidden { display: none; }
#status-msg { font-size: 80px; margin-bottom: 20px; }
button { padding: 15px 40px; font-size: 20px; cursor: pointer; background: white; border: none; font-weight: bold; }
canvas { display: block; }