/* Game UI Styles */

/* Racer card components */
.racer-card {
    margin-bottom: 8px;
    padding: 8px;
    background-color: rgba(30, 41, 59, 0.8);
    border-left: 3px solid;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.racer-card.player {
    border-color: #3b82f6;
    background-color: rgba(30, 41, 59, 0.95);
}

.racer-card.eliminated {
    opacity: 0.5;
    position: relative;
}

/* Top info section */
.racer-name {
    color: attr(data-color color);
}

/* Fallback for browsers that don't support attr() for color */
[data-color] {
    color: #f59e0b; /* Default color */
}

[data-color="#ffffff"] { color: #ffffff; }
[data-color="#f59e0b"] { color: #f59e0b; }
[data-color="#f97316"] { color: #f97316; }
[data-color="#ef4444"] { color: #ef4444; }
[data-color="#22c55e"] { color: #22c55e; }
[data-color="#3b82f6"] { color: #3b82f6; }
[data-color="#a855f7"] { color: #a855f7; }
[data-color="#ec4899"] { color: #ec4899; }
[data-color="#eab308"] { color: #eab308; }
[data-color="#84cc16"] { color: #84cc16; }
[data-color="#14b8a6"] { color: #14b8a6; }
[data-color="#6366f1"] { color: #6366f1; }

.speed-info {
    font-size: 0.75rem;
}

.speed-hidden {
    visibility: hidden;
}

/* Sub info section */
.sub-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 0.6rem;
    color: #cbd5f5;
    margin: 2px 0 4px 0;
}

.xp-badge {
    font-size: 0.55rem;
}

.lap-info {
    color: #facc15;
    font-weight: bold;
}

.ammo-container {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.ammo-icon {
    margin-left: 2px;
    font-size: 0.9rem;
}

.ammo-active {
    opacity: 1;
}

.ammo-inactive {
    opacity: 0.25;
}

.ammo-disabled {
    opacity: 0.2;
}

.oil-container {
    margin-left: 6px;
}

.oil-icon {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 2px;
    border-radius: 50%;
    background: #0b0b0b;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.oil-active {
    opacity: 1;
}

.oil-inactive {
    opacity: 0.3;
}

.oil-disabled {
    opacity: 0.2;
}

/* Health and nitro bars */
.hp-track {
    width: 100%;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.nitro-track {
    margin-top: 4px;
    background-color: rgba(56, 189, 248, 0.15);
}

.hp-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.2s, background-color 0.2s;
}

/* HP renkleri (CSP uyumlu, inline style yok) */
.hp-safe { background-color: #22c55e; }
.hp-warn { background-color: #f59e0b; }
.hp-critical { background-color: #ef4444; }

.hp-fill[data-health-color="#ef4444"] { background-color: #ef4444; }
.hp-fill[data-health-color="#f59e0b"] { background-color: #f59e0b; }
.hp-fill[data-health-color="#22c55e"] { background-color: #22c55e; }

.hp-fill-0 { width: 0%; }
.hp-fill-5 { width: 5%; }
.hp-fill-10 { width: 10%; }
.hp-fill-15 { width: 15%; }
.hp-fill-20 { width: 20%; }
.hp-fill-25 { width: 25%; }
.hp-fill-30 { width: 30%; }
.hp-fill-35 { width: 35%; }
.hp-fill-40 { width: 40%; }
.hp-fill-45 { width: 45%; }
.hp-fill-50 { width: 50%; }
.hp-fill-55 { width: 55%; }
.hp-fill-60 { width: 60%; }
.hp-fill-65 { width: 65%; }
.hp-fill-70 { width: 70%; }
.hp-fill-75 { width: 75%; }
.hp-fill-80 { width: 80%; }
.hp-fill-85 { width: 85%; }
.hp-fill-90 { width: 90%; }
.hp-fill-95 { width: 95%; }
.hp-fill-100 { width: 100%; }

.nitro-fill {
    height: 100%;
    box-shadow: 0 0 6px;
}

.nitro-fill[data-nitro-color="#0ea5e9"] { background-color: #0ea5e9; box-shadow: 0 0 6px #0ea5e9; }
.nitro-fill[data-nitro-color="#38bdf8"] { background-color: #38bdf8; box-shadow: 0 0 6px #38bdf8; }
.nitro-fill[data-nitro-color="#7dd3fc"] { background-color: #7dd3fc; box-shadow: 0 0 6px #7dd3fc; }

.nitro-fill-0 { width: 0%; }
.nitro-fill-5 { width: 5%; }
.nitro-fill-10 { width: 10%; }
.nitro-fill-15 { width: 15%; }
.nitro-fill-20 { width: 20%; }
.nitro-fill-25 { width: 25%; }
.nitro-fill-30 { width: 30%; }
.nitro-fill-35 { width: 35%; }
.nitro-fill-40 { width: 40%; }
.nitro-fill-45 { width: 45%; }
.nitro-fill-50 { width: 50%; }
.nitro-fill-55 { width: 55%; }
.nitro-fill-60 { width: 60%; }
.nitro-fill-65 { width: 65%; }
.nitro-fill-70 { width: 70%; }
.nitro-fill-75 { width: 75%; }
.nitro-fill-80 { width: 80%; }
.nitro-fill-85 { width: 85%; }
.nitro-fill-90 { width: 90%; }
.nitro-fill-95 { width: 95%; }
.nitro-fill-100 { width: 100%; }

/* Fire button */
#fire-btn.active {
    opacity: 1;
    pointer-events: auto;
}

#fire-btn.inactive {
    opacity: 0.35;
    pointer-events: none;
}

/* Race lights and starter UI */
.lights-container {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s, transform 0.3s;
}

.lights-container.visible {
    opacity: 1;
    transform: scale(1);
}

.lights-container.hidden {
    opacity: 0;
}

.go-text {
    opacity: 0;
    transition: opacity 0.3s;
}

.go-text.visible {
    opacity: 1;
}

/* Qualifying UI Elements */
.qualifying-overlay {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.95);
    padding: 15px 30px;
    border-radius: 10px;
    border: 2px solid #facc15;
    z-index: 1000;
    text-align: center;
    transition: all 0.3s ease;
}

.qualifying-overlay.minimized {
    top: 10px;
    background: rgba(15, 23, 42, 0.85);
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid #facc15;
}

.qualifying-title {
    color: #facc15;
    font-size: 1.2rem;
    font-weight: bold;
}

.qualifying-subtitle {
    color: #fff;
    font-size: 0.9rem;
    margin-top: 5px;
}

.qualifying-timer {
    color: #22c55e;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 10px;
}

.qualifying-timer.minimized {
    font-size: 1.3rem;
    margin-top: 0;
}

.qualifying-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qualifying-complete {
    color: #22c55e;
    font-size: 1.5rem;
    font-weight: bold;
}

.qualifying-time {
    color: #fff;
    font-size: 2.5rem;
    font-weight: bold;
    margin-top: 15px;
}

.qualifying-waiting {
    color: #94a3b8;
    font-size: 1rem;
    margin-top: 15px;
}

/* Qualifying Results */
.qualifying-results-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(15, 23, 42, 0.98);
    padding: 30px 40px;
    border-radius: 15px;
    border: 2px solid #facc15;
    z-index: 1000;
    text-align: center;
    min-width: 350px;
}

.qualifying-results-title {
    color: #facc15;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.qualifying-results-list {
    text-align: left;
}

.qualifying-position {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    margin: 5px 0;
    border-radius: 5px;
}

.qualifying-position.p1 {
    background: rgba(250, 204, 21, 0.2);
    border: 1px solid #facc15;
}

.qualifying-position.player {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid #3b82f6;
}

.qualifying-position-name {
    font-weight: bold;
}

.qualifying-position-name.p1 {
    color: #facc15;
}

.qualifying-position-name.other {
    color: #fff;
}

.qualifying-position-time {
    color: #22c55e;
    font-family: monospace;
}

.qualifying-countdown {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-top: 20px;
}

/* Race Results */
.racer-standings {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.racer-name-colored[data-color="#ffffff"] { color: #ffffff; }
.racer-name-colored[data-color="#f59e0b"] { color: #f59e0b; }
.racer-name-colored[data-color="#f97316"] { color: #f97316; }
.racer-name-colored[data-color="#ef4444"] { color: #ef4444; }
.racer-name-colored[data-color="#22c55e"] { color: #22c55e; }
.racer-name-colored[data-color="#3b82f6"] { color: #3b82f6; }
.racer-name-colored[data-color="#a855f7"] { color: #a855f7; }
.racer-name-colored[data-color="#ec4899"] { color: #ec4899; }
.racer-name-colored[data-color="#eab308"] { color: #eab308; }
.racer-name-colored[data-color="#84cc16"] { color: #84cc16; }
.racer-name-colored[data-color="#14b8a6"] { color: #14b8a6; }
.racer-name-colored[data-color="#6366f1"] { color: #6366f1; }

.status-text {
    font-weight: bold;
}

.status-completed {
    color: #22c55e;
}

.status-racing {
    color: #94a3b8;
}

/* Race Terminated */
.leaver-name {
    color: #ef4444;
}

.win-forfeit {
    margin-bottom: 10px;
    color: #22c55e;
}

.race-canceled {
    margin-bottom: 10px;
    color: #94a3b8;
}

.reward-text {
    font-size: 1.2rem;
}

.gold-amount {
    color: #ffd700;
    font-weight: bold;
}

.xp-amount {
    color: #fff;
    font-weight: bold;
}

.no-reward-text {
    font-size: 0.9rem;
    color: #ef4444;
}

.rank-highlight {
    color: var(--accent);
}

/* Footer display states */
.footer-visible {
    display: flex;
}

.footer-hidden {
    display: none;
}

/* Elimination warning */
.eliminated-title {
    color: #ef4444;
}

/* Display visibility classes */
.display-block {
    display: block !important;
}

.display-none {
    display: none !important;
}

.display-flex {
    display: flex !important;
}

/* Specific element visibility */
.popup-visible {
    display: block !important;
}

.popup-hidden {
    display: none !important;
}

.overlay-visible {
    display: block !important;
}

.overlay-hidden {
    display: none !important;
}

.reward-visible {
    display: block !important;
}

.reward-hidden {
    display: none !important;
}

.lobby-visible {
    display: block !important;
}

.lobby-hidden {
    display: none !important;
}

.countdownP-visible {
    display: block !important;
}

.countdownP-hidden {
    display: none !important;
}

.warningCountDiv-visible {
    display: block !important;
}

.warningCountDiv-hidden {
    display: none !important;
}

/* Dynamic element styles */
.font-size-small {
    font-size: 0.9rem !important;
}

.font-size-normal {
    font-size: 1rem !important;
}

.font-size-large {
    font-size: 1.5rem !important;
}

/* Title specific styles */
.title-size-normal {
    font-size: 1.2rem !important;
}

.title-size-large {
    font-size: 1.5rem !important;
}

/* Element specific styles */
#site-footer.footer-visible {
    display: flex !important;
}

#site-footer.footer-hidden {
    display: none !important;
}

#afk-warning-popup.popup-visible {
    display: block !important;
}

#afk-warning-popup.popup-hidden {
    display: none !important;
}

#qualifying-overlay.overlay-visible {
    display: block !important;
}

#qualifying-overlay.overlay-hidden {
    display: none !important;
}

#reward-display.reward-visible {
    display: block !important;
}

#reward-display.reward-hidden {
    display: none !important;
}

#matchmaking-lobby.lobby-visible {
    display: flex !important;
}

#matchmaking-lobby.lobby-hidden {
    display: none !important;
}

/* Store-specific styles */
.store-modal-visible {
    display: flex !important;
}

.store-modal-hidden {
    display: none !important;
}

.vehicle-preview-container {
    background: #1e293b;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stats-note {
    font-size: 0.8rem;
    color: #64748b;
    text-align: center;
    margin-top: 10px;
}

.section-heading {
    color: #fff;
    margin-bottom: 10px;
}

.section-heading-spaced {
    color: #fff;
    margin: 20px 0 10px;
}

.color-grid-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.color-grid {
    margin-bottom: 12px;
}

.custom-color-picker {
    width: 48px;
    height: 48px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.item-description {
    font-size: 0.7rem;
    color: #64748b;
    margin-bottom: 5px;
}

.gold-coin-grayscale {
    filter: grayscale(1);
}

.price-unavailable {
    color: #ef4444;
}

.price-equipped {
    color: #22c55e;
}

/* Color swatch backgrounds */
.color-ef4444 { background: #ef4444; }
.color-3b82f6 { background: #3b82f6; }
.color-f59e0b { background: #f59e0b; }
.color-22c55e { background: #22c55e; }
.color-a855f7 { background: #a855f7; }
.color-ec4899 { background: #ec4899; }
.color-ffffff { background: #ffffff; }
.color-000000 { background: #000000; }

/* Neon text colors */
.neon-red { color: #ff0000; }
.neon-green { color: #00ff00; }
.neon-blue { color: #0088ff; }