/* assets/style.css - Contains all game styles */
body { margin: 0; overflow: hidden; background: #050505; font-family: 'Arial', sans-serif; user-select: none; touch-action: none; }
#game-container { width: 100%; height: 100vh; display: block; }

#ui {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

/* MINI-MAP */
#minimap-container {
    position: absolute; top: 90px; left: 20px; 
    width: 120px; height: 120px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden; z-index: 60;
    display: none;
}
#minimap { width: 100%; height: 100%; display: block; }

/* CARDS */
.card, .shop-card, .ranking-card, .tutorial-card, .error-card {
    background: rgba(20, 20, 20, 0.95); padding: 30px; border-radius: 20px;
    box-shadow: 0 0 50px rgba(0,0,0,0.9); text-align: center; pointer-events: auto;
    border: 2px solid #444; min-width: 320px; color: white;
    backdrop-filter: blur(10px);
    display: flex; flex-direction: column; gap: 15px; align-items: center;
}

/* ERROR MODAL */
.error-card { border-color: #dc3545; z-index: 500; }
.error-card h1 { color: #dc3545; font-size: 35px; margin: 0; }
.error-card p { color: #aaa; margin: 10px 0 0; }
.error-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,1); z-index: 500; align-items: center; justify-content: center; }


/* SHOP MODAL */
.shop-card { border-color: #9d00ff; width: 90%; max-width: 500px; z-index: 200; }
.shop-title { color: #9d00ff; font-size: 30px; text-transform: uppercase; margin: 0; text-shadow: 0 0 10px #9d00ff; }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 10px; }
.shop-item {
    background: rgba(255,255,255,0.05); border: 1px solid #555; padding: 15px; border-radius: 10px;
    cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center;
}
.shop-item:hover { background: rgba(157, 0, 255, 0.2); border-color: #9d00ff; }
.shop-item.disabled { opacity: 0.3; pointer-events: none; filter: grayscale(1); }
.shop-item.selected { background: #ffcc00; color: black; border-color: white; transform: scale(1.05); box-shadow: 0 0 20px #ffcc00; }
.shop-icon { font-size: 24px; margin-bottom: 5px; }
.shop-name { font-size: 12px; font-weight: bold; text-transform: uppercase; }
.shop-price { color: #28a745; font-size: 12px; font-weight: bold; }

/* MAIN MENU */
#main-menu {
    pointer-events: auto; text-align: center; display: flex;
    flex-direction: column; align-items: center; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.9));
    padding-bottom: 10px; box-sizing: border-box;
}

/* --- NEW TITLE STYLES --- */
.logo-container {
    z-index: 1;
    position: relative;
    text-align: center;
    transform: rotate(-3deg);
    margin-top: 80px; 
    margin-bottom: 10px;
    animation: floatLogo 3s ease-in-out infinite;
}

.title-main {
    font-family: 'Titan One', cursive;
    font-size: clamp(60px, 15vw, 120px);
    color: #ffcc00;
    line-height: 0.9;
    text-transform: uppercase;
    text-shadow: 
        4px 4px 0px #000000, 
        12px 12px 0px #333333;
    -webkit-text-stroke: 2px #fff;
}

.title-sub {
    font-family: 'Bangers', cursive;
    font-size: clamp(30px, 8vw, 60px);
    color: #ff0000;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 10px;
    background: rgba(0,0,0,0.7);
    padding: 5px 20px;
    border-radius: 10px;
    display: inline-block;
    transform: rotate(2deg);
    box-shadow: 5px 5px 0px rgba(0,0,0,0.5);
    border: 3px solid #fff;
}

@keyframes floatLogo {
    0% { transform: rotate(-3deg) translateY(0px); }
    50% { transform: rotate(-3deg) translateY(-10px); }
    100% { transform: rotate(-3deg) translateY(0px); }
}
/* --- END NEW TITLE STYLES --- */

.selector-container {
    margin-top: auto; margin-bottom: 20px;
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    background: rgba(0,0,0,0.6); padding: 15px 30px; border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(10px);
    max-width: 95%;
}

.model-selector { display: flex; align-items: center; gap: 15px; }
.arrow-btn { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: white; font-size: 24px; cursor: pointer; padding: 10px 15px; border-radius: 12px; transition: 0.2s; }
.arrow-btn:hover { background: rgba(255,255,255,0.3); border-color: #ffcc00; }
#vehicle-name { font-size: 24px; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.3); font-weight: 800; width: 180px; text-align: center; letter-spacing: 1px; text-transform: uppercase; }

.color-selector { display: flex; gap: 10px; margin-top: 5px; flex-wrap: wrap; justify-content: center; }
.color-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: transform 0.2s; }
.color-dot.selected { transform: scale(1.3); border-color: #ffcc00; box-shadow: 0 0 15px #ffcc00; }

.extra-buttons { display: flex; gap: 8px; margin-top: 5px; width: 100%; justify-content: center; flex-wrap: wrap; }
.btn-icon {
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255,255,255,0.2); 
    color: #ddd; padding: 8px 12px; border-radius: 8px; cursor: pointer; 
    font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
}
.btn-icon:hover { background: rgba(255,255,255,0.25); color: white; border-color: #ffcc00; }

.btn-main {
    background: linear-gradient(45deg, #28a745, #34d058); border: none; 
    padding: 12px 40px; color: white; font-size: 20px; font-weight: 900; cursor: pointer;
    border-radius: 50px; box-shadow: 0 10px 25px rgba(40, 167, 69, 0.4); 
    text-transform: uppercase; width: 100%; margin-top: 5px; letter-spacing: 1px;
    animation: pulse-btn 2s infinite;
}
@keyframes pulse-btn { 0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(40, 167, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); } }

#site-footer { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,0.3); text-transform: uppercase; letter-spacing: 1px; }
#site-footer a { color: rgba(255,255,255,0.6); text-decoration: none; font-weight: bold; transition: 0.2s; }
#site-footer a:hover { color: #ffcc00; text-shadow: 0 0 5px #ffcc00; }

.settings-row { position: absolute; top: 20px; left: 20px; display: flex; gap: 10px; z-index: 60; }
.btn-setting { background: rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.3); color: white; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-setting.off { opacity: 0.5; text-decoration: line-through; color: #aaa; }

#game-over { display: none; width: 90%; max-width: 400px; z-index: 100; }
#game-over h1 { color: #dc3545; font-size: 45px; margin: 0; border: 3px solid #dc3545; padding: 5px 20px; border-radius: 10px; transform: rotate(-3deg); }
#game-over p { margin: 5px 0 0 0; color: #aaa; font-size: 14px; }
#final-score { color: #28a745; font-size: 3em; font-weight: 900; text-shadow: 0 0 10px #000; margin-bottom: 10px; display:block; }
.btn-restart { background: #28a745; border: none; padding: 12px; width: 100%; color: white; font-weight: 900; border-radius: 8px; font-size: 18px; cursor: pointer; text-transform: uppercase; }
.btn-garage { background: #007bff; border: none; padding: 12px; width: 100%; color: white; font-weight: 900; border-radius: 8px; font-size: 18px; cursor: pointer; text-transform: uppercase; }

.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 250; align-items: center; justify-content: center; pointer-events: auto; }
.ranking-list { list-style: none; padding: 0; margin: 15px 0; max-height: 250px; overflow-y: auto; text-align: left; width: 100%; }
.ranking-item { display: flex; justify-content: space-between; border-bottom: 1px solid #333; padding: 8px 0; color: #bbb; }
.close-btn { background: #dc3545; color: white; border: none; padding: 10px; width: 100%; border-radius: 8px; font-weight: bold; cursor: pointer; text-transform: uppercase; margin-top: 10px;}

.tutorial-icon { font-size: 50px; margin: 10px; }
.tutorial-text { font-size: 14px; color: #ccc; margin-bottom: 5px; line-height: 1.4; }

#mobile-controls { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: auto; z-index: 50; }
.control-zone { position: absolute; top: 0; bottom: 0; width: 50%; -webkit-tap-highlight-color: transparent; }
.zone-left { left: 0; } .zone-right { right: 0; }

#hud-top { position: absolute; top: 20px; width: 100%; display: flex; justify-content: space-between; padding: 0 20px; box-sizing: border-box; pointer-events: none; }
#score-box { font-size: 40px; font-weight: 900; color: #85bb65; -webkit-text-stroke: 1.5px black; text-shadow: 3px 3px 0 #000; display: none; }
#wanted-level { font-size: 40px; display: none; }
.star { color: #333; text-shadow: 2px 2px 0 #000; } .star.active { color: #ffcc00; } .star.danger { color: #ff0000; animation: pulse 0.5s infinite; }
#bomb-timer { position: absolute; top: 25%; font-size: 80px; font-weight: 900; color: #ff0000; text-shadow: 0 0 20px red; font-family: monospace; display: none; }