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

        body, html { 
            width: 100%; 
            height: 100%; 
            overflow: hidden; 
            background: #000; 
            font-family: system-ui, -apple-system, sans-serif; 
            color: #fff;
        }
        
        #globe-container { 
            width: 100vw; 
            height: 100vh; 
            position: absolute; 
            top: 0; 
            left: 0; 
        }
        
        #ui {
            position: absolute; 
            bottom: 20px; 
            left: 20px;
            background:transparent; 
            backdrop-filter: blur(12px);
            border:transparent ; 
            
           
            width: 320px; 
            z-index: 10;
            box-shadow: 0 20px 40px rgba(0,0,0,0.6);
        }

        #header{
            top: 20px; 
            left: 20px;
            background:rgba(255, 255, 255, 0.15);
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        h1 { 
            font-size: 1.1rem; 
            margin-bottom: 4px; 
            color: #00ff00; 
            letter-spacing: 1px; 
            
           
        }

        #top-row{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 0;
        }

        p.subtitle { 
            font-size: 0.75rem; 
            color: #888; 
            margin-bottom: 15px; 
            text-transform: uppercase; 
        }
        
        #city-info{
            background-color: rgba(255, 255, 255, 0.95);
            color: black;
            border-bottom-right-radius: 12px;
            border-bottom-left-radius: 12px;
            
        }

        #station-list{
max-height: 50vh;
            overflow-y: auto;
        }

        #station-list::-webkit-scrollbar{
            width: 8px;
            height: 95%;
        }

        #station-list::-webkit-scrollbar-track{
            background:transparent;
        }

        #station-list::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.3);
border-radius: 4px;
}

#station-list::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.6);
}

        #city-name { 
            font-size: 0.75rem; 
            color: #888; 
            
            text-transform: uppercase; 
            
            padding-bottom: 8px; 
            padding-left:20px ;
        }
        
        #player{
            display: block; 
            width: 100%; 
            text-align: left;
            
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: rebeccapurple; 
            padding: 14px 14px; 
        
           background-color: darkred;
            border-radius: 20px;
            font-size: 1rem; 
            transition: all 0.2s ease;
            margin-top: 10px;
        }

        #player-info{
            text-align: left;
           
        }

        #player-station{
            font-size: 1.1rem;
            font-weight: bold;
            color: #00ff00;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
           
        }

        

        #player-freq-loc{
            font-size: 0.85rem;
            color: #888;
            margin-top: 4px;
            
        }

        #player-freq{
            color: #aaa;
            font-weight: bold;
            margin-right: 6px;
        }

        #player-controls{
            display: flex;
            align-items: center;
            gap: 15px;
            padding-left:10px ;
            padding-right: 20px;
        }

         .buttons {
            background: transparent;
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            font-size: 2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
            margin-bottom: 5px;
        }

        .buttons:hover{
            color:#00ff00;
            
        }

        .form-btn{
            border: none;
            border-color: transparent;
            box-shadow:0px 1px 3px rgba(0,0,0, 0.3);
            cursor: pointer;
            font-size: 1rem;
        }

        .form-btn:hover{
            box-shadow:0px 2px 5px rgba(0,0,0, 0.3);
        }

        #volume-slider {
            flex-grow: 1;
            cursor: pointer;
            accent-color: #00ff00;
            border: none;
            border-color: transparent;
        }

        .station-btn {
            display: block; 
            width: 100%; 
            text-align: left;
            
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #000; 
            padding: 14px 14px; 
            border-top: 1px solid rgba(0,0,0,0.2);
         
           
            cursor: pointer; 
            font-size: 1rem; 
            transition: all 0.2s ease;
        }

        #btn-row{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            color: black;
            
            
        }

        #default-actions{
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
        }

        .actions-group{
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            flex: 1;
        }

        .search-icon-left{
            position: absolute;
            left: 12px;
            color: #666;
            font-size: 0.8rem;
            pointer-events: none;
        }

        #close-search{
            margin-top: 10px;
            right: 5px;
            background: none;
            border: none;
            color: #aaa;
            cursor: pointer;
            transition: color 0.2s;

        }

        #close-search:hover{
            color: #000;
        }

        .station-btn:hover { background: lightgray; color: #000; border-top: 1px solid rgba(255, 255, 255, 0.95); }
        
        #player-bar {
            position: absolute; 
            bottom: 25px; 
            left: 50%; 
            transform: translateX(-50%);
            background: rgba(15, 15, 22, 0.9); 
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px 24px; 
            border-radius: 30px; 
            display: flex; 
            align-items: center; 
            gap: 20px; 
            z-index: 10;
        }

        #now-playing { 
            font-size: 0.85rem; 
            color: #aaa; 
            max-width: 220px; 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
        }

        audio { 
            height: 32px; 
            outline: none; 
            filter: invert(1) hue-rotate(180deg); 
        }
    
        #search-input{
            width: 100%;
            margin-top: 15px;
            padding: 10px 14px;
            background: transparent;
            color: black;
            font-size: 0.9rem;
            outline: none;
            transition: border-color 0.2s;
            border: none;
        }

        #search-input:focus{
            border-bottom: 1px solid rgba(0,0,0, 0.5) ;
            border-color: black;
        }

        #search-input::placeholder{
            color: #666;
        }


        #search-container{
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            width: 100%;
            padding: 10px 14px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 0.9rem;
            outline: none;
            transition: border-color 0.2s;

        }
@keyframes spinCrosshair{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

#crosshair{
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 70px;
    height: 70px;
    border: 2px dashed rgba(255,255,255,0.6);
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    animation: spinCrosshair 10s linear infinite;

    transition: border-color 0.2s, transform 0.2s;
    
}

#crosshair.locked{
    border-color: #00ffcc;
    border-style: solid;

    border-width: 3px;
    transform: translate(-50%, -50%) scale(1.1);
}

.station-btn{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.eq-bars{
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.station-btn.active .eq-bars{
    display: flex;
}

.eq-bar{
    width: 3px;
    background-color: #000000;
    animation: eq-bounce 0.8s infinite ease-in-out;
}

.eq-bar:nth-child(1){animation-delay: 0.0s;}
.eq-bar:nth-child(2){animation-delay: 0.2s;}
.eq-bar:nth-child(3){animation-delay: 0.4s;}

@keyframes eq-bounce{
    0%, 100% {height: 4px;}
    50% {height: 14px;}
}

        @media (max-width: 768px) {
    #ui {
        position: absolute;
        display: flex;
        flex-direction: column;
        bottom: 0;
        left: 0;
        width: 100%; /* Spans full width */
        max-height: 55vh; /* Takes up bottom half of the screen */
        overflow: hidden;
        border-radius: 20px 20px 0 0; /* Rounds only top corners */
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    #header {
        flex-shrink: 0;
    }

    #city-info {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
    }

    #station-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    #btn-row {
        flex-shrink: 0;
    }

    
}