* {
    margin: 0; padding: 0; box-sizing: border-box; user-select: none;
}

body, html {
    width: 100%; height: 100%; overflow: hidden;
    background-color: #000;
    font-family: 'Share Tech Mono', monospace;
}

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

/* UI Layer */
#ui-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; pointer-events: none;
    background: radial-gradient(circle, transparent 70%, rgba(0, 17, 51, 0.8) 100%);
}

/* Typography & Glows */
.glow-text {
    color: #00FFCC; text-shadow: 0 0 10px #00FFCC, 0 0 20px #00FFCC;
}
.red-text {
    color: #FF1744; text-shadow: 0 0 10px #FF1744, 0 0 20px #FF1744;
}

/* Top HUD */
#top-hud {
    position: absolute; top: 20px; left: 0; width: 100%;
    display: flex; justify-content: space-around; align-items: flex-start;
    padding: 0 50px;
}

.gauge-box {
    background: rgba(0, 20, 40, 0.8);
    border: 2px solid #00FFCC;
    border-radius: 5px;
    padding: 10px 20px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.3), inset 0 0 10px rgba(0, 255, 204, 0.1);
}

.gauge-title { color: #88bbdd; font-size: 14px; margin-bottom: 5px; letter-spacing: 2px; }
.gauge-value { font-family: 'Orbitron', sans-serif; font-size: 28px; color: #00FFCC; margin-bottom: 5px; }
.gauge-bar-bg { width: 150px; height: 10px; background: #001122; border: 1px solid #004466; border-radius: 5px; overflow: hidden; }
#depth-bar, #speed-bar { height: 100%; background: #00FFCC; box-shadow: 0 0 10px #00FFCC; transition: width 0.2s; }

.alert-box {
    background: rgba(0, 255, 204, 0.1);
    border: 2px dashed #00FFCC;
    color: #00FFCC;
    padding: 10px 30px;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    border-radius: 5px;
    animation: pulseAlert 2s infinite;
}

@keyframes pulseAlert {
    0% { opacity: 0.8; box-shadow: 0 0 5px #00FFCC; }
    50% { opacity: 1; box-shadow: 0 0 20px #00FFCC; }
    100% { opacity: 0.8; box-shadow: 0 0 5px #00FFCC; }
}

/* Crosshair */
#crosshair {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    color: rgba(0, 255, 204, 0.5);
    font-size: 40px; font-weight: bold;
    pointer-events: none;
}
#crosshair .dot { width: 4px; height: 4px; background: #FF1744; border-radius: 50%; margin: 0 20px; box-shadow: 0 0 5px #FF1744; }

/* Bottom HUD */
#bottom-hud {
    position: absolute; bottom: 20px; left: 0; width: 100%;
    display: flex; justify-content: space-between; align-items: flex-end;
    padding: 0 50px; pointer-events: auto;
}

.hud-panel {
    background: rgba(0, 20, 40, 0.85);
    border: 2px solid #005577;
    border-top: 4px solid #00FFCC;
    padding: 15px; border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.8);
}
.panel-title { color: #88bbdd; font-size: 14px; margin-bottom: 10px; border-bottom: 1px solid #005577; padding-bottom: 5px; }

/* Sonar Panel */
.sonar-container { position: relative; width: 150px; height: 150px; border-radius: 50%; border: 3px solid #00FFCC; overflow: hidden; background: #001122; box-shadow: 0 0 20px rgba(0,255,204,0.3); }
#sonarCanvas { position: absolute; top: 0; left: 0; }
.sonar-sweep {
    position: absolute; top: 0; left: 75px; width: 75px; height: 75px;
    background: linear-gradient(to right, rgba(0,255,204,0), rgba(0,255,204,0.5));
    transform-origin: bottom left;
    animation: sweep 4s linear infinite;
}
@keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Weapons Panel */
.torpedo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.tube { width: 40px; height: 40px; border: 2px solid #555; border-radius: 50%; background: #222; position: relative; }
.tube.ready { border-color: #00FFCC; background: radial-gradient(circle, #006655, #002222); box-shadow: 0 0 10px rgba(0,255,204,0.5); }
.tube.ready::after { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background: #00FFCC; border-radius: 50%; box-shadow: 0 0 5px #00FFCC; }

.action-btn {
    background: rgba(255, 23, 68, 0.2); border: 2px solid #FF1744; color: #FF1744;
    padding: 10px; width: 100%; font-family: 'Orbitron', sans-serif; font-size: 16px;
    cursor: pointer; transition: all 0.2s; border-radius: 3px;
    text-shadow: 0 0 5px #FF1744; box-shadow: 0 0 10px rgba(255,23,68,0.3);
}
.action-btn:hover { background: rgba(255, 23, 68, 0.5); }
.action-btn:active { transform: scale(0.95); }

/* Status Panel */
.status-panel { width: 250px; }
.health-text { font-family: 'Orbitron', sans-serif; font-size: 24px; color: #00FFCC; text-align: right; margin-bottom: 5px; }
.health-bar-bg { width: 100%; height: 20px; background: #111; border: 2px solid #555; margin-bottom: 15px; }
#health-bar { width: 100%; height: 100%; background: #00FFCC; box-shadow: 0 0 10px #00FFCC; transition: width 0.3s; }
.kills-text { font-size: 16px; color: #88bbdd; }

/* Menus */
#start-menu, #end-screen {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 10, 20, 0.9);
    display: flex; justify-content: center; align-items: center; z-index: 100;
}

.menu-box {
    background: linear-gradient(135deg, rgba(0, 30, 60, 0.9), rgba(0, 10, 20, 0.9));
    border: 2px solid #00FFCC;
    padding: 50px; text-align: center;
    box-shadow: 0 0 50px rgba(0,255,204,0.2), inset 0 0 20px rgba(0,255,204,0.1);
    max-width: 600px; width: 90%; border-radius: 10px;
}

.menu-box h1 {
    font-family: 'Orbitron', sans-serif; font-size: 48px; color: #fff; margin-bottom: 20px;
    text-shadow: 0 0 20px #00FFCC;
}
.menu-box h1 span { color: #00FFCC; }
.menu-box p { font-size: 18px; color: #88bbdd; margin-bottom: 30px; }

.start-btn {
    background: rgba(0, 255, 204, 0.2); color: #00FFCC; border: 2px solid #00FFCC;
    padding: 15px 40px; font-family: 'Orbitron', sans-serif; font-size: 24px;
    cursor: pointer; transition: all 0.2s; border-radius: 5px;
    box-shadow: 0 0 15px rgba(0,255,204,0.4);
}
.start-btn:hover { background: rgba(0, 255, 204, 0.5); box-shadow: 0 0 25px rgba(0,255,204,0.6); }
.start-btn:active { transform: scale(0.95); }

.red-btn { border-color: #FF1744; color: #FF1744; background: rgba(255,23,68,0.2); box-shadow: 0 0 15px rgba(255,23,68,0.4); }
.red-btn:hover { background: rgba(255,23,68,0.5); box-shadow: 0 0 25px rgba(255,23,68,0.6); }

.controls-info { margin-top: 30px; padding-top: 20px; border-top: 1px solid #005577; font-size: 14px; }
.controls-info p { margin-bottom: 5px; color: #6699aa; }

#damage-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 50%, rgba(255,0,0,0.8) 100%);
    opacity: 0; pointer-events: none; z-index: 5; transition: opacity 0.2s;
}

/* Mobile Controls */
#mobile-controls {
    position: absolute; top: 55%; left: 0; width: 100%;
    transform: translateY(-50%);
    display: none; justify-content: space-between; align-items: center;
    padding: 0 20px; pointer-events: none; z-index: 20;
}

#joystick-zone {
    width: 120px; height: 120px; position: relative; pointer-events: auto;
}
#joystick-base {
    width: 100px; height: 100px; background: rgba(0, 255, 204, 0.05);
    border: 2px solid rgba(0, 255, 204, 0.3); border-radius: 50%;
    position: absolute; bottom: 0; left: 0;
}
#joystick-stick {
    width: 40px; height: 40px; background: rgba(0, 255, 204, 0.5);
    border-radius: 50%; position: absolute; top: 30px; left: 30px;
    box-shadow: 0 0 10px #00FFCC; pointer-events: none;
}

#throttle-controls {
    display: flex; flex-direction: column; gap: 10px; pointer-events: auto;
}

.mobile-btn {
    width: 50px; height: 50px; background: rgba(0, 20, 40, 0.7);
    border: 2px solid #00FFCC; border-radius: 50%; color: #00FFCC;
    font-family: 'Orbitron', sans-serif; font-size: 20px; font-weight: bold;
    box-shadow: 0 0 10px rgba(0,255,204,0.3); outline: none; cursor: pointer;
}
.mobile-btn:active { background: rgba(0, 255, 204, 0.3); transform: scale(0.9); }

/* Responsive */
@media (max-width: 800px) {
    #mobile-controls { display: flex; }
    
    #top-hud { padding: 5px; flex-wrap: wrap; }
    .alert-box { order: -1; width: 100%; text-align: center; margin-bottom: 5px; padding: 5px; font-size: 14px; letter-spacing: 1px; }
    .gauge-box { padding: 5px; flex: 1; margin: 0 2px; }
    .gauge-title { font-size: 10px; margin-bottom: 2px; }
    .gauge-value { font-size: 16px; margin-bottom: 2px; }
    .gauge-bar-bg { width: 100%; height: 6px; }
    
    #bottom-hud { padding: 5px; flex-wrap: wrap; justify-content: space-between; gap: 5px; bottom: 5px; }
    .hud-panel { padding: 8px; border-width: 1px; border-top-width: 2px; }
    .panel-title { font-size: 11px; margin-bottom: 5px; }
    
    .sonar-panel { flex: 0 0 48%; max-width: 140px; }
    .weapons-panel { flex: 0 0 48%; max-width: 140px; }
    .status-panel { flex: 0 0 100%; width: 100%; margin-top: 2px; padding: 5px 10px; }
    
    .sonar-container { width: 80px; height: 80px; margin: 0 auto; border-width: 2px; }
    .sonar-sweep { width: 40px; height: 40px; left: 40px; }
    #sonarCanvas { transform: scale(0.533); transform-origin: top left; }
    
    .torpedo-grid { gap: 5px; margin-bottom: 5px; }
    .tube { width: 25px; height: 25px; border-width: 1px; }
    .tube.ready::after { top: 4px; left: 4px; right: 4px; bottom: 4px; }
    
    .action-btn { padding: 8px; font-size: 14px; margin-top: 5px;}
    
    .health-text { font-size: 18px; margin-bottom: 2px; text-align: left; float: right; }
    .status-panel .panel-title { display: inline-block; margin-bottom: 0; }
    .health-bar-bg { height: 10px; margin-bottom: 2px; clear: both;}
    .kills-text { font-size: 12px; }
    
    .menu-box { padding: 25px 15px; }
    .menu-box h1 { font-size: 28px; margin-bottom: 15px; }
    .menu-box p { font-size: 14px; margin-bottom: 20px; }
    .start-btn { padding: 10px 25px; font-size: 18px; }
    
    .controls-info { font-size: 11px; margin-top: 15px; padding-top: 10px; }
}