body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: #1a1a2e; font-family: 'Segoe UI', sans-serif; user-select: none; -webkit-user-select: none; }
#game-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
.screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.9); color: #fff; z-index: 100; pointer-events: auto; }
#loading-screen, #start-screen { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)), url('car2.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }
#settings-screen { background: rgba(0, 0, 0, 0.95); }
.settings-container { background: rgba(255, 255, 255, 0.05); border: 2px solid #00d2ff; border-radius: 12px; padding: 30px; width: 80%; max-width: 500px; display: flex; flex-direction: column; gap: 25px; }
.settings-section h2 { color: #00d2ff; font-size: 18px; border-bottom: 1px solid rgba(0, 210, 255, 0.3); padding-bottom: 5px; margin-bottom: 15px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.setting-row label { font-size: 14px; color: #ccc; }
input[type=range] { width: 200px; cursor: pointer; }
.lang-options { display: flex; gap: 15px; justify-content: center; }
.lang-btn { background: rgba(0, 0, 0, 0.5); border: 1px solid #00d2ff; color: #fff; padding: 10px 20px; cursor: pointer; transition: 0.3s; }
.lang-btn:hover, .lang-btn.active { background: #00d2ff; color: #000; }
.back-btn { margin-top: 30px; padding: 15px 40px; background: transparent; border: 2px solid #ff3333; color: #ff3333; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.back-btn:hover { background: #ff3333; color: #fff; }
body.lang-ar .settings-container, body.lang-ar #start-screen, body.lang-ar #game-over-screen { direction: rtl; }
body.lang-ar .setting-row { flex-direction: row-reverse; }
.screen.active { display: flex; }
.game-hud { position: absolute; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
.game-hud.visible { opacity: 1; }
#hud-top-left { top: 20px; left: 20px; display: flex; flex-direction: column; gap: 10px; }
#health-container { width: 250px; }
.health-header { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 12px; color: #00d2ff; font-weight: bold; text-shadow: 0 0 5px rgba(0,210,255,0.5); }
#health-bar-bg { width: 100%; height: 12px; background: rgba(0, 0, 0, 0.5); border: 1px solid #00d2ff; border-radius: 6px; overflow: hidden; }
#health-bar-fill { width: 100%; height: 100%; background: linear-gradient(90deg, #00d2ff, #00ff64); transition: width 0.3s ease-out; }
#level-hud { top: 20px; right: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.hud-box { background: rgba(0, 0, 0, 0.7); border-right: 4px solid #00d2ff; padding: 8px 15px; display: flex; flex-direction: column; align-items: flex-end; min-width: 100px; }
.hud-label { font-size: 10px; color: #aaa; letter-spacing: 1px; }
#level-value, #target-value { font-size: 24px; font-weight: bold; color: #fff; }
#speedometer-hud { bottom: 20px; right: 20px; width: 140px; height: 140px; border-radius: 50%; background: rgba(0,0,0,0.8); border: 2px solid #00d2ff; display: flex; align-items: center; justify-content: center; }
.gauge-svg { position: absolute; width: 100%; height: 100%; transform: rotate(140deg); }
.gauge-bg { fill: none; stroke: rgba(255,255,255,0.1); stroke-width: 8; }
.gauge-active { fill: none; stroke: #00d2ff; stroke-width: 8; stroke-dasharray: 440; stroke-dashoffset: 440; stroke-linecap: round; transition: stroke-dashoffset 0.1s; }
.needle { position: absolute; width: 3px; height: 50px; background: #ff0055; bottom: 50%; transform-origin: bottom center; transition: transform 0.1s; z-index: 5; }
.speed-content { text-align: center; z-index: 6; }
.speed-value-main { font-size: 32px; font-weight: bold; color: #fff; display: block; }
.speed-unit { font-size: 10px; color: #00d2ff; }
#rocket-hud { bottom: 40px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); padding: 10px 25px; border-radius: 30px; border: 2px solid #ff3333; display: flex; align-items: center; gap: 15px; }
.rocket-icon { height: 25px; filter: drop-shadow(0 0 5px #ff3333); }
.rocket-info { display: flex; flex-direction: column; }
#rocket-count { font-size: 22px; font-weight: bold; color: #fff; }
.rocket-label { font-size: 9px; color: #ff3333; }
.device-options { display: flex; gap: 30px; margin-top: 40px; }
.device-card { background: rgba(255, 255, 255, 0.05); border: 2px solid #00d2ff; border-radius: 12px; padding: 40px 20px; width: 200px; text-align: center; cursor: pointer; transition: 0.3s transform, 0.3s background; pointer-events: auto; }
.device-card:hover { transform: scale(1.1); background: rgba(0, 210, 255, 0.15); }
.device-card .icon { margin-bottom: 20px; display: flex; align-items: center; justify-content: center; height: 80px; }
.device-icon { max-width: 100%; max-height: 100%; object-fit: contain; }
.mobile-ui { display: none; position: absolute; bottom: 0; left: 20px; right: 20px; height: auto; padding-bottom: 20px; pointer-events: none; z-index: 50; }
.mobile-ui.active { display: flex; justify-content: space-between; align-items: flex-end; }
.left-cluster { pointer-events: auto; display: flex; flex-direction: row; gap: 20px; align-items: flex-end; }
.right-cluster { pointer-events: auto; display: flex; flex-direction: column; gap: 20px; align-items: flex-end; }
.action-row, .main-row { display: flex; flex-direction: row; gap: 15px; align-items: flex-end; }
.m-btn { width: 75px; height: 75px; background: rgba(255, 255, 255, 0.1); border: 3px solid #00d2ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #00d2ff; font-size: 14px; backdrop-filter: blur(5px); transition: transform 0.1s; }
.m-btn:active { transform: scale(0.95); background: rgba(0, 210, 255, 0.3); }
.m-btn.accel { background: rgba(0, 255, 100, 0.1); border-color: #00ff64; color: #00ff64; width: 90px; height: 90px; }
.m-btn.accel:active { background: rgba(0, 255, 100, 0.3); }
.m-btn.action { border-color: #ff3333; color: #ff3333; height: 50px; border-radius: 25px; padding: 0 20px; width: auto; min-width: 60px; }
.m-btn.action:active { background: rgba(255, 51, 51, 0.3); }
#loading-bar-container { width: 60%; height: 15px; border: 1px solid #00d2ff; margin: 20px; }
#loading-bar { width: 0%; height: 100%; background: #00d2ff; }
#score-hud { color: #fff; font-size: 20px; font-family: monospace; background: rgba(0,0,0,0.5); padding: 8px; border-left: 4px solid #00d2ff; }
.button-group { display: flex; flex-direction: column; gap: 15px; align-items: center; }
button { background: rgba(0, 0, 0, 0.6); border: 2px solid #00d2ff; color: #fff; padding: 15px 40px; font-size: 18px; font-family: 'Segoe UI', sans-serif; font-weight: bold; cursor: pointer; transition: 0.3s; min-width: 250px; }
button:hover { background: #00d2ff; color: #000; transform: scale(1.05); }