/* EFM frontend 3.1.0. Original visual structure and colors retained.
 * Paths below are relative to res/, NOT to index.html.
 */
@font-face {
    font-family: "MiniSystem";
    src: url("../fonts/minisystem.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
html, body { width: 100%; height: 100%; margin: 0; }
body { font-family: Verdana, sans-serif; background: #151822; color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #00aaff #0f1622; }
a { color: #00aaff; }
#content {
    position: fixed;
    inset: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    background: #151822 url("bg.png") center center / cover no-repeat;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}
#content > * { flex-shrink: 0; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; border: 0;
}
.ui-text, .ui-text2, .ui-title {
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.5px;
    max-width: calc(100vw - 24px);
}
.ui-text, .ui-title { font-size: clamp(14px, 1.2vw, 18px); padding: 4px 0; margin: 1px 0; text-align: center; }
.ui-text2 { font-size: clamp(14px, 1.2vw, 15px); text-align: left; padding: 0; margin: 0; }
.ui-title { color: #00aaff; font-weight: bold; }
#uiColumn { width: min(450px, 90vw); margin: 0 auto; display: flex; flex-direction: column; gap: 25px; }
#mybgplayerui { display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 100%; }
img.play { width: 170px; height: auto; cursor: pointer; }
img.play:focus-visible { outline: 3px solid #00aaff; outline-offset: 5px; border-radius: 4px; }
#vu-meter { width: min(400px, calc(100vw - 32px)); max-width: 100%; height: 95px; display: block; margin-top: 20px; background: transparent; }
.player-status { font-size: 12px; line-height: 1.4; min-height: 1.4em; text-align: center; color: #cbd5e1; margin: 10px 12px 0; }
[data-player-state="retrying"] .player-status,
[data-player-state="offline"] .player-status,
[data-player-state="blocked"] .player-status { color: #ffcc80; }
.metadata-status { font-size: 12px; line-height: 1.4; text-align: center; color: #ffcc80; width: min(450px, 90vw); margin: -15px 0 0; }
.metadata-status:empty { display: none; }
#divider, .divider-red, .divider-white, .divider-purple { width: 100%; height: 2px; flex-shrink: 0; }
#divider { background: #00aaff; box-shadow: 0 0 6px #00aaff, 0 0 12px rgba(0,170,255,.7), 0 0 18px rgba(0,170,255,.4); }
.divider-red { background: #ff3b3b; box-shadow: 0 0 4px rgba(255,59,59,.6), 0 0 10px rgba(255,59,59,.3); }
.divider-white { background: #fff; box-shadow: 0 0 6px #ffffff, 0 0 12px rgba(0,170,255,.7), 0 0 18px rgba(0,170,255,.4); }
.divider-purple { background: #8a00c4; box-shadow: 0 0 6px #8a00c4, 0 0 12px rgba(0,170,255,.7), 0 0 18px rgba(0,170,255,.4); }
#logo, #cover { width: min(450px, 50vw); height: auto; display: block; }
#logo { margin: 20px 0 5px; }
#cover { margin: 5px 0; }
#historyWrapper { width: min(450px, 50vw); height: auto; display: flex; flex-direction: column; align-items: stretch; overflow: visible; }
#songHistory { width: 100%; height: auto; font-family: monospace; font-size: clamp(12px, 1.1vw, 16px); line-height: 1.4; color: #fff; white-space: normal; overflow-wrap: anywhere; }
.history-line { margin: 0; }
#songWrapper {
    box-sizing: border-box;
    width: min(450px, 90vw);
    height: auto;
    display: block;
    background: #0b0f14 url("../RDSEFM/bgim3.jpg");
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid #00aaff;
    padding: 2px 6px;
    box-shadow: inset 0 0 8px rgba(0,170,255,.15), 0 0 10px rgba(0,170,255,.25), 0 0 20px rgba(0,170,255,.15);
}
#songTitle {
    display: inline-block;
    font-family: "MiniSystem", monospace;
    font-size: 17px;
    color: #fff;
    letter-spacing: 2px;
    white-space: nowrap;
    padding-left: 100%;
    animation: scrollText 20s linear infinite;
    will-change: transform;
    text-shadow: 0 0 4px rgba(255,255,255,.6), 0 0 8px rgba(0,170,255,.4);
}
@keyframes scrollText { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
html.is-page-hidden #songTitle { animation-play-state: paused; }
.partner-banner { display: block; max-width: calc(100vw - 24px); }
.partner-banner img { display: block; max-width: 100%; height: auto; border: 0; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #0f1622; }
::-webkit-scrollbar-thumb { background: #00aaff; border-radius: 20px; box-shadow: 0 0 5px #00aaff, 0 0 10px #00aaff, 0 0 20px rgba(0,170,255,.5); }
::-webkit-scrollbar-thumb:hover { background: #33c3ff; }
@media (max-width: 600px) {
    .ui-text, .ui-text2 { font-size: 14px; letter-spacing: 0.3px; }
}
@media (max-width: 768px) {
    #logo, #cover { width: 70vw; max-width: 360px; }
    #mybgplayerui { width: 100%; }
    img.play { width: 42vw; max-width: 160px; min-width: 110px; }
    #songWrapper, #historyWrapper { width: 93vw; max-width: 360px; }
    #songTitle { font-size: 20px; letter-spacing: 1px; }
}
@media (prefers-reduced-motion: reduce) {
    #songTitle { animation: none; transform: none; padding-left: 0; white-space: normal; overflow-wrap: anywhere; will-change: auto; }
    #songWrapper { white-space: normal; }
}