html, body{
    margin: 0;
    padding: 0;
}

.radio-container {
    width: 100vw;
    height: 100vh;
    background: url(img/radio-background.png) no-repeat center;
    background-size: contain;
    position: relative;
    overflow: hidden;
    background-color: #302010;
    margin: auto;
    background-position: top;
}

/* Área donde vive la aguja (ajusta top/left según el dial de la imagen) */
.dial-area {
    position: absolute;
    top: 276px;
    /* left: 25px; */
    width: 100%;
    height: 30px;
    margin-top: -65px;
}

.dial-window {
    position: relative;
    width: 273px;
    height: 40px;
    left: 66px;
    top: -30px;
    overflow: hidden;
}

.needle {
    position: absolute;
    top: 0;
    width: 2px;     /* Línea fina */
    height: 100%;   /* Solo el alto del dial */
    background: red;
    display: none;  /* Empieza oculta */
    pointer-events: none;
}

/* Evita que el display rompa el JS si no tiene estilo */
.freq-display {
    font-family: monospace;
    color: #333;
    top: 32px;
    position: relative;
    background: white;
    text-align: center;
    margin: 0 auto;
    width: 128px;
}

/* Botón invisible sobre el botón de la imagen para detectar el giro */
.main-knob {
    position: absolute;
    bottom: 180px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    /* border-radius: 50%; */
    cursor: pointer;
    touch-action: none;
    background: url(img/rueda.png);
    background-size: contain;
}

.display-digital {
  position: absolute;
  top: 150px; /* Ajusta según el hueco de la imagen */
  width: 100%;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 24px;
  color: #ffda44;
  text-shadow: 0 0 10px rgba(255, 218, 68, 0.7);
}

/* Botón dorado circular */
.gold-button {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* background: radial-gradient(circle, #d4af37, #aa8507); */
    /* background: transparent; */
    /* border: 2px solid #8a6d05; */
    cursor: pointer;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); */
    background: url(img/power.png);
    background-size: contain;
}

/* LED Apagado (Rojo oscuro) */
.led-off {
    width: 10px; height: 10px;
    border-radius: 50%;
    background-color: #400; /* Rojo muy apagado */
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
    margin-left: 10px;
    display: inline-block;
    margin-left: 12px;
    top: -6px;
    position: relative;
}

/* LED Encendido (Verde) */
.led-on {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 12px;
    top: -6px;
    display: inline-block;
    background-color: #0f0;
    box-shadow: 0 0 8px #0f0, 0 0 15px #0f0;
}

/* La aguja roja oculta por defecto */
.needle {
    position: absolute;
    width: 2px; height: 100%;
    background: red;
    z-index: 5;
}

.power-controls {
    top: 50%;
    position: relative;
    left: 50%;
    margin-left: -15px;
    width: 60px;
    margin-top: -50px;
}