* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
body, html { width: 100%; height: 100%; overflow: hidden; background-color: #000; font-family: 'Exo 2', sans-serif; }

#gameCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

/* CRT Overlay */
.crt-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 2px, 3px 100%; z-index: 9; pointer-events: none; opacity: 0.8;
}

.hidden { display: none !important; }
#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }

/* Top HUD */
#top-hud {
    position: absolute; top: 20px; left: 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.hud-box {
    background: rgba(10, 20, 30, 0.7); backdrop-filter: blur(5px);
    border: 1px solid #4a90e2; padding: 10px; border-radius: 5px; width: 200px;
}
.hud-label { font-family: 'Share Tech Mono', monospace; color: #fff; font-size: 14px; margin-bottom: 5px; }
.bar-bg { width: 100%; height: 12px; background: #111; border: 1px solid #333; }
.bar-fill { height: 100%; width: 100%; transition: width 0.2s; }
.bar-fill.blue { background: #00bfff; box-shadow: 0 0 10px #00bfff; }
.bar-fill.green { background: #00ff00; box-shadow: 0 0 10px #00ff00; }

/* Task Panel */
#task-panel {
    position: absolute; top: 20px; right: 20px;
    background: rgba(10, 20, 30, 0.8); border-left: 3px solid #ffcc00;
    padding: 15px; width: 250px; color: #fff; font-family: 'Share Tech Mono', monospace;
}
.panel-header { font-size: 18px; color: #ffcc00; margin-bottom: 10px; text-shadow: 0 0 5px #ffcc00; }
#task-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.task-item { font-size: 14px; display: flex; align-items: center; gap: 10px; }
.task-item .check { width: 12px; height: 12px; border: 1px solid #888; display: inline-block; }
.task-item.done { color: #888; text-decoration: line-through; }
.task-item.done .check { background: #00ff00; border-color: #00ff00; }
.task-progress { width: 100%; height: 15px; border: 1px solid #555; background: #222; }
#task-bar-fill { width: 0%; height: 100%; background: #00ff00; box-shadow: 0 0 10px #00ff00; transition: width 0.3s; }

/* Emergency Alert */
#emergency-alert {
    position: absolute; top: 100px; left: 50%; transform: translateX(-50%);
    text-align: center; font-family: 'Share Tech Mono', monospace;
    animation: flash 1s infinite alternate;
}
.warning-banner { background: #FF1744; color: #fff; padding: 10px 30px; font-size: 24px; border: 2px solid #fff; box-shadow: 0 0 20px #FF1744; }
#emergency-timer { font-size: 40px; color: #FF1744; text-shadow: 0 0 10px #FF1744; margin-top: 5px; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0.5; } }

/* Role Alert */
#role-alert {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; z-index: 50; animation: fadeOut 3s forwards 2s;
}
#role-title { font-family: 'Share Tech Mono', monospace; font-size: 60px; text-shadow: 2px 2px 0 #000, 0 0 20px; }
#role-desc { font-size: 20px; color: #fff; }
.role-crew #role-title { color: #00bfff; }
.role-saboteur #role-title { color: #FF1744; }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }

/* Mobile Controls */
#mobile-controls {
    position: absolute; bottom: 20px; left: 0; width: 100%;
    display: flex; justify-content: space-between; padding: 0 20px;
    pointer-events: auto;
}
#joystick-zone { width: 120px; height: 120px; }
#joystick-base {
    width: 120px; height: 120px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.3);
    position: relative;
}
#joystick-stick {
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255,255,255,0.5); position: absolute;
    top: 35px; left: 35px; box-shadow: 0 0 10px rgba(255,255,255,0.5);
    pointer-events: none;
}

.control-zone.right { display: flex; gap: 15px; flex-wrap: wrap-reverse; justify-content: flex-end; max-width: 250px; }
.action-btn {
    width: 70px; height: 70px; border-radius: 50%; border: 2px solid #fff;
    color: #fff; font-family: 'Share Tech Mono', monospace; font-size: 14px;
    cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: transform 0.1s;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.action-btn:active { transform: scale(0.9); }
.action-btn:disabled { opacity: 0.3; filter: grayscale(1); }
.action-btn.blue { background: rgba(0, 191, 255, 0.6); border-color: #00bfff; }
.action-btn.red { background: rgba(255, 23, 68, 0.6); border-color: #FF1744; }
.action-btn.orange { background: rgba(255, 152, 0, 0.6); border-color: #ff9800; }

/* Mini Games & Overlays */
#minigame-overlay, #meeting-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); backdrop-filter: blur(10px);
    display: flex; justify-content: center; align-items: center;
    z-index: 100; pointer-events: auto;
}
.minigame-box, .meeting-box {
    background: #1a1a2e; border: 2px solid #4a90e2; border-radius: 10px;
    padding: 20px; text-align: center; box-shadow: 0 0 30px rgba(74,144,226,0.3);
}
.minigame-box h2, .meeting-box h2 { color: #00bfff; font-family: 'Share Tech Mono', monospace; margin-bottom: 5px; text-shadow: 0 0 10px #00bfff; }
.meeting-sub { color: #88ccff; font-size: 14px; margin-bottom: 20px; letter-spacing: 2px; }
.close-btn { margin-top: 15px; padding: 10px 30px; background: #FF1744; color: #fff; border: none; cursor: pointer; font-family: 'Share Tech Mono'; box-shadow: 0 0 15px #FF1744; }

/* Sci-fi Panel Hologram */
.sci-fi-panel {
    background: rgba(0, 20, 40, 0.9); border: 2px solid #00bfff;
    box-shadow: 0 0 30px rgba(0, 191, 255, 0.4), inset 0 0 20px rgba(0, 191, 255, 0.2);
    position: relative; overflow: hidden;
}
.sci-fi-panel::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(0, 191, 255, 0.1), transparent);
    animation: scan 3s infinite linear; pointer-events: none;
}
@keyframes scan { 100% { left: 200%; } }

.crew-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.vote-btn {
    background: rgba(0, 40, 80, 0.8); color: #fff; border: 1px solid #0077cc; padding: 15px;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    font-family: 'Share Tech Mono'; font-size: 16px; border-radius: 5px; transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.vote-btn:hover { background: rgba(0, 80, 150, 0.9); box-shadow: 0 0 15px #00bfff; border-color: #00bfff; transform: scale(1.05); }
.vote-btn.voted { border-color: #00ff00; background: rgba(0, 100, 0, 0.8); box-shadow: 0 0 20px #00ff00; }
.vote-btn.dead { opacity: 0.4; pointer-events: none; text-decoration: line-through; color: #FF1744; border-color: #FF1744; background: #220000; }
.skip-btn { background: transparent; color: #aaa; border: 2px solid #555; padding: 12px 40px; font-family: 'Share Tech Mono'; cursor: pointer; border-radius: 5px; transition: 0.2s; }
.skip-btn:hover { background: #333; color: #fff; border-color: #fff; }

/* Start Menu, Briefing & Game Over */
#start-menu, #briefing-overlay, #game-over-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="%23000005"/><circle cx="10%" cy="20%" r="2" fill="white"/><circle cx="80%" cy="30%" r="1" fill="white"/><circle cx="40%" cy="80%" r="1.5" fill="white"/></svg>'), radial-gradient(circle, rgba(10,20,40,1) 0%, rgba(0,0,0,1) 100%);
    display: flex; justify-content: center; align-items: center; z-index: 200;
}
.menu-box, .briefing-box, .game-over-box {
    background: rgba(10,20,30,0.8); border: 2px solid #4a90e2; padding: 40px;
    border-radius: 10px; text-align: center; color: white; width: 90%; max-width: 500px;
    backdrop-filter: blur(5px); box-shadow: 0 0 40px rgba(74,144,226,0.5);
}
.briefing-box, .game-over-box { max-width: 600px; }
.menu-box h1, .briefing-box h1, .game-over-box h1 { font-family: 'Share Tech Mono', monospace; font-size: 40px; color: #fff; margin-bottom: 10px; text-shadow: 0 0 10px #4a90e2; }
.menu-box h1 span { color: #4a90e2; }
.menu-box p, #game-over-desc { color: #aaa; margin-bottom: 30px; font-size: 18px; }
#briefing-content { text-align: left; font-size: 18px; line-height: 1.6; margin-bottom: 30px; color: #ccc; }
#briefing-content ul { padding-left: 20px; margin-top: 10px; }
#briefing-content li { margin-bottom: 10px; }
#briefing-content .highlight-blue { color: #00bfff; font-weight: bold; }
#briefing-content .highlight-red { color: #FF1744; font-weight: bold; }

.style-btn { background: #222; border: 1px solid #555; color: #fff; padding: 10px 20px; font-family: 'Share Tech Mono'; cursor: pointer; transition: 0.2s; }
.style-btn.active { background: #4a90e2; box-shadow: 0 0 15px #4a90e2; }
.start-btn { width: 100%; background: #00ff00; color: #000; border: none; padding: 15px; font-family: 'Share Tech Mono'; font-size: 24px; cursor: pointer; margin-top: 20px; font-weight: bold; box-shadow: 0 0 20px #00ff00; transition: transform 0.1s; }
.start-btn:hover { background: #00cc00; transform: scale(1.05); }
.controls-info { margin-top: 20px; font-size: 14px; color: #888; }

/* Objective Hint */
#objective-hint {
    position: absolute; top: 120px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 191, 255, 0.2); border: 1px solid #00bfff; padding: 10px 20px;
    border-radius: 20px; color: #fff; font-family: 'Share Tech Mono'; font-size: 16px;
    display: flex; align-items: center; gap: 10px; box-shadow: 0 0 15px rgba(0,191,255,0.4);
    animation: bounceHint 2s infinite; pointer-events: none;
}
@keyframes bounceHint { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -10px); } }

@media (max-width: 700px) {
    #top-hud { top: 10px; left: 10px; transform: scale(0.7); transform-origin: top left; }
    #task-panel { top: 10px; right: 10px; transform: scale(0.65); transform-origin: top right; }
    
    #objective-hint { top: 70px; font-size: 12px; padding: 5px 10px; }

    #joystick-zone, #joystick-base { width: 100px; height: 100px; }
    #joystick-stick { width: 40px; height: 40px; top: 30px; left: 30px; }
    
    .control-zone.right { max-width: 140px; gap: 8px; justify-content: flex-end; }
    .action-btn { width: 55px; height: 55px; font-size: 10px; }
    
    .menu-box, .briefing-box { padding: 20px; }
    .menu-box h1, .briefing-box h1 { font-size: 28px; }
    #briefing-content { font-size: 14px; }
}