:root {
    --page-bg: #F3EADB;  
}

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

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--page-bg);
    font-family: sans-serif;
}

.radio {
    position: relative;
    width: 95vw;
    max-width: 420px;
    aspect-ratio: 768 / 1152; 
    background: url("/static/radio-bg.png") center / contain no-repeat;
}

.screen-text {
    position: absolute;
    width: 40%;
    left: 56%;
    top: 28%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffbf00;
    font-size: 0.6rem;
    line-height: 1.2rem;
    font-family: 'Courier New', Courier, monospace;
    text-shadow:
    0 0 1px #ffbf00,
    0 0 2px #ffbf00,
    0 0 3px #ff8000;
}

#station-name, #station-country {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scroll-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.scroll-text {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
}

.scrolling {
    animation: scrollText 8s linear infinite;
    animation-delay: 2s;
}

@keyframes scrollText {
    0% { transform: translateX(0); }
    10% { transform: translateX(0); }
    90% { transform: translateX(-100%); }
    100% { transform: translateX(-100%); }
}

.btn {
    position: absolute;
    width: 8%;
    border: none;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
    opacity: 0;
}

#playPauseBtn { left: 45%; top: 42.5%; }
#nextBtn      { left: 67%; top: 42.5%; }

.pause-indicator {
    position: absolute;
    bottom: 61.5%;
    right: 52.5%;
    width: 20px;
    height: 20px;
    text-align: center;
    color: #ffbf00;
    font-size: 0.4rem;
    line-height: 1.2rem;
    text-shadow: 
    0 0 1px #ffbf00,
    0 0 2px #ffbf00,
    0 0 3px #ff8000;
}

.btn svg {
    width: 100%;
    height: 100%;
    fill: #ffffffcc;
}

.intro-message {
    font-size: 0.6rem;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-top: 4px;
}