:root{font-family:Arial,Helvetica,sans-serif;color:#f5f8ff;background:#071b42;color-scheme:dark;--yellow:#ffe222;--cyan:#00a7f5;--navy:#07152c}*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 85% 58%,#057df1a0,transparent 65%),linear-gradient(125deg,#071b42,#0757bd 70%,#07357e);background-attachment:fixed}button,input,a,summary{-webkit-tap-highlight-color:transparent}button,a,summary{touch-action:manipulation}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:5px}[hidden]{display:none!important}.site-shell{max-width:900px;width:calc(100% - 32px);margin:0 auto;padding:16px 0 24px}.top-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:76px;border:2px solid var(--cyan);border-radius:28px;background:#05152beF;overflow:hidden}.nav-button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;background:none;color:#d1e2ff;font-size:15px;font-weight:700;min-width:0}.nav-button+.nav-button:before{position:absolute;content:"";width:1px;height:42px;background:#1677b1;left:0;top:15px}.nav-icon{height:24px;line-height:24px;font-size:24px;font-weight:400}.live-dot{font-size:20px}.nav-button.active{color:var(--yellow)}.nav-button.active:after{content:"";position:absolute;bottom:3px;width:70px;max-width:65%;height:3px;background:var(--yellow)}.nav-button:hover{background:#0b345c}.brand{text-align:center;padding:18px 0 22px}.brand img{display:block;width:290px;max-width:75%;height:auto;max-height:180px;object-fit:contain;margin:0 auto 12px;border-radius:12px}.brand h1{color:var(--yellow);font-size:36px;margin:0 0 8px;letter-spacing:.02em}.brand p{margin:0;font-size:13px;color:#c2d5f3;letter-spacing:.07em}.players-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.radio-card{min-width:0;text-align:center;border:1.5px solid var(--cyan);border-radius:20px;background:linear-gradient(145deg,#061b35,#020f24);padding:18px 13px 14px;box-shadow:0 12px 28px #001b3a30}.station-cover{display:block;width:210px;max-width:78%;height:auto;aspect-ratio:1;object-fit:contain;background:white;border-radius:7px;margin:0 auto 12px}.radio-card h2{font-size:23px;margin:0 0 14px;line-height:1.2}.now-playing{text-align:left;position:relative;border:1px solid var(--cyan);border-radius:14px;padding:12px;min-height:106px;background:#020d20}.eyebrow{display:block;font-size:10px;color:#91aacb;letter-spacing:.09em;margin:0 54px 7px 0}.now-playing strong{display:block;min-height:35px;color:#20a5ff;font-size:15px;line-height:1.2;overflow-wrap:anywhere;padding-right:4px}.stream-label{display:block;font-size:11px;margin-top:7px;color:#d6e4f8}.live-badge{position:absolute;right:10px;top:9px;background:var(--yellow);color:#061323;font-size:11px;font-weight:700;border-radius:6px;padding:6px 10px}.transport{display:flex;justify-content:center;align-items:center;gap:28px;margin:16px 0 0}.transport button{width:76px;height:76px;border-radius:50%;background:#03132c;display:grid;place-items:center;transition:background .2s,transform .2s}.transport button:hover{background:#113961;transform:translateY(-2px)}.play-button{border:3px solid var(--yellow);color:var(--yellow);font-size:32px}.play-button span{margin-left:4px}.stop-button{border:3px solid #bed7ff;color:#dfebff;font-size:29px}.player-state{min-height:15px;font-size:11px;color:#69b6ff;margin:9px 0 10px;line-height:1.4}.is-playing .play-button{box-shadow:0 0 18px #ffe22235}.volume{display:flex;align-items:center;gap:10px;padding:0 12px;margin:0 0 17px}.volume>span{font-size:19px;white-space:nowrap}.volume input{width:100%;min-width:0;accent-color:var(--yellow);cursor:pointer}.volume output{font-size:10px;min-width:27px;color:#bdcff0}.recent{border:1.5px solid var(--cyan);border-radius:14px;overflow:hidden;text-align:left}.radio-card[data-station=greek] .recent{border-color:#ff9300}.recent summary{display:flex;justify-content:space-between;align-items:center;gap:5px;list-style:none;cursor:pointer;padding:15px 12px;color:#20adff;font-size:11px;font-weight:700;letter-spacing:.02em}.recent summary::-webkit-details-marker{display:none}.radio-card[data-station=greek] .recent summary{color:#ff9800}.recent[open] summary>span{transform:rotate(180deg)}.metadata-state{font-size:11px;color:#a2b5cd;padding:0 12px;line-height:1.4}.history{padding:0 12px;list-style:none;margin:0}.history li{display:flex;align-items:center;gap:10px;border-top:1px solid #28415c;padding:10px 0;font-size:12px;line-height:1.4;overflow-wrap:anywhere}.history img{width:39px;height:39px;object-fit:cover;background:white;border-radius:4px;flex-shrink:0}.content-panel{background:#04152cec;border:1px solid var(--cyan);border-radius:20px;padding:28px;margin-bottom:20px;line-height:1.8}.content-panel h2{color:var(--yellow);margin-top:0}.content-panel p{white-space:pre-line}.content-panel a{color:#9ed7ff}.social-link{display:flex;justify-content:space-between;margin-top:18px;padding:17px;background:#102c4d;border:1px solid #23709c;border-radius:12px;color:white!important;text-decoration:none}.content-panel details{border-top:1px solid #254967;margin-top:24px;padding-top:16px}.content-panel summary{color:var(--yellow);cursor:pointer}.content-panel #terms h2{font-size:18px;margin-top:20px}.privacy-link{display:inline-block;margin-top:20px;font-size:13px}.listening-bar{position:sticky;bottom:12px;z-index:3;display:flex;gap:12px;align-items:center;background:#05152cf5;border:1px solid var(--cyan);border-radius:16px;padding:14px;margin-top:22px;box-shadow:0 8px 30px #0005}.listening-bar>div{flex:1;min-width:0}.listening-bar strong,.listening-bar div span{display:block;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.listening-bar div span{color:#acc9ef;margin-top:5px}.listening-bar button{color:var(--yellow);background:none;border:1px solid #315675;border-radius:8px;padding:10px;font-size:12px}.listening-dot{width:9px;height:9px;background:var(--yellow);border-radius:50%;flex-shrink:0}footer{text-align:center;color:#a9c6ea;font-size:11px;margin-top:24px}dialog{padding:0;width:min(540px,calc(100vw - 24px));height:min(760px,calc(100dvh - 32px));max-height:none;border:1.5px solid var(--cyan);border-radius:20px;background:#07152c;color:white;box-shadow:0 24px 100px #000a;overflow:hidden}dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}.chat-heading{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;gap:15px;border-bottom:1px solid #23466a;flex-shrink:0}.chat-status{color:var(--yellow);font-size:10px;letter-spacing:.08em}.chat-heading h2{font-size:17px;margin:6px 0 0}#chat-close{width:46px;height:46px;flex-shrink:0;border:2px solid var(--yellow);border-radius:12px;background:var(--yellow);color:#06152b;font-size:36px;line-height:1;font-weight:700}#chat-close:hover{background:white;border-color:white}#chat-frame{display:block;width:100%;flex:1;min-height:0;border:0;background:#07152c}.chat-foot{padding:12px 16px;font-size:11px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid #23466a;color:#b1c7e6}.chat-foot a{color:var(--yellow)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:600px){.site-shell{width:calc(100% - 20px);padding-top:10px}.top-nav{height:66px;border-radius:20px}.nav-button{font-size:12px}.nav-icon{font-size:21px}.nav-button+.nav-button:before{top:12px;height:36px}.brand{padding:18px 0}.brand h1{font-size:29px}.brand img{max-height:140px}.players-grid{grid-template-columns:1fr;gap:18px}.radio-card{padding:18px 14px}.station-cover{width:210px}.content-panel{padding:20px}.listening-bar{gap:8px}.listening-bar button{padding:9px 7px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Header-only logo treatment; station artwork remains unchanged. */
.brand img{border-radius:0;width:clamp(230px,38vw,390px);max-width:90%;height:auto;max-height:none;aspect-ratio:4/3;object-fit:contain;margin:-22px auto -20px}
.brand{overflow:hidden;padding:12px 0 22px}.brand h1{font-size:clamp(26px,3.6vw,36px)}
html{overflow-x:clip}img,iframe{max-width:100%}.site-shell{width:min(900px,calc(100% - 32px))}main,.page,.players-grid,.radio-card{min-width:0}.top-nav{width:100%}.content-panel{overflow-wrap:anywhere}
@media(min-width:1600px){.site-shell{width:min(1080px,calc(100% - 64px))}}
@media(max-width:600px){.site-shell{width:calc(100% - 20px)}.brand img{width:280px;max-width:85%;margin:-18px auto -16px}.brand{padding:8px 0 18px}}
@media(max-width:350px){.site-shell{width:calc(100% - 14px)}.top-nav{height:60px}.nav-button{font-size:10px;gap:3px}.nav-icon{font-size:19px}.radio-card{padding-inline:10px}.radio-card h2{font-size:21px}.volume{padding-inline:3px}.transport{gap:22px}.listening-bar{flex-wrap:wrap}}

.brand img{aspect-ratio:auto;width:clamp(230px,38vw,390px);margin:8px auto 14px;height:auto}
@media(max-width:600px){.brand img{width:280px;max-width:85%;margin:12px auto 12px}}

/* Let station and album artwork sit directly on the navy player. */
.station-cover{background:transparent}
.history img{background:transparent}

/* Floating chat keeps page controls available and never dims the site. */
#chat-dialog{position:fixed;z-index:1000;margin:0;left:max(8px,calc(100vw - 556px));top:16px;width:min(540px,calc(100vw - 16px));height:min(700px,calc(100dvh - 32px));max-height:calc(100dvh - 16px)}
#chat-dialog .chat-heading{cursor:grab;touch-action:none;user-select:none}
#chat-dialog.is-dragging .chat-heading{cursor:grabbing}
#chat-dialog.is-dragging iframe{pointer-events:none}

/* Compact desktop proportions, preserving readable mobile controls. */
@media(min-width:761px){
 .site-shell{width:min(820px,calc(100% - 40px));padding-top:12px}
 .top-nav{height:64px;border-radius:24px}
 .nav-button{font-size:13px;gap:4px}
 .nav-icon{height:22px;line-height:22px;font-size:22px}
 .nav-button+.nav-button:before{height:34px;top:13px}
 .brand{padding:8px 0 18px}
 .brand img{width:300px;margin:4px auto 10px}
 .brand h1{font-size:30px}
 .radio-card{padding:14px 12px 12px}
 .station-cover{width:180px;margin-bottom:10px}
 .radio-card h2{font-size:21px;margin-bottom:12px}
 .now-playing{min-height:96px;padding:10px}
 .transport{margin-top:12px;gap:25px}
 .transport button{width:66px;height:66px}
 .play-button{font-size:28px}.stop-button{font-size:26px}
 .volume{margin-bottom:13px}
}

.recent-heading{margin:0;padding:15px 12px;color:#20adff;font-size:11px;font-weight:700;letter-spacing:.02em}
.radio-card[data-station=greek] .recent-heading{color:#ff9800}
#chat-dialog{width:min(420px,calc(100vw - 16px));height:min(740px,calc(100dvh - 32px));left:max(8px,calc(100vw - 436px));border-radius:20px}

/* Extended heartbeat and compact playback indicators. */
.brand{position:relative;isolation:isolate}
.brand img{position:relative;z-index:1}
.brand h1,.brand .station-prompt{position:relative;z-index:1}
.brand .station-prompt{margin:8px 0 0;font-size:12px;color:#d2e3ff;letter-spacing:.08em}
.brand-pulse{position:absolute;z-index:0;pointer-events:none;left:0;top:72px;width:100%;height:54px;overflow:visible}
.brand-pulse path{fill:none;stroke:#ffe222;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 4px #ffe222aa)}
.playback-indicator{display:flex;justify-content:center;align-items:center;gap:15px;min-height:32px;margin:7px 0 8px}
.playback-indicator .player-state{margin:0;min-height:0}
.mini-eq{height:22px;display:flex;align-items:flex-end;gap:4px;width:50px;flex-shrink:0}
.mini-eq i{display:block;width:5px;height:3px;border-radius:1px;background:#6c85a3;transform-origin:bottom}
.is-playing .mini-eq i{height:20px;background:#ffe222;animation:b19-eq .75s ease-in-out infinite alternate}
.is-playing .mini-eq i:nth-child(2){animation-delay:-.4s;animation-duration:.58s}
.is-playing .mini-eq i:nth-child(3){animation-delay:-.2s;animation-duration:.89s}
.is-playing .mini-eq i:nth-child(4){animation-delay:-.55s;animation-duration:.66s}
.is-playing .mini-eq i:nth-child(5){background:#1aa5ff;animation-delay:-.3s;animation-duration:.81s}
.is-playing .mini-eq i:nth-child(6){background:#1aa5ff;animation-delay:-.6s;animation-duration:.52s}
@keyframes b19-eq{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
@media(max-width:600px){.brand-pulse{top:68px;height:42px}.brand-pulse path{stroke-width:4}}
@media(prefers-reduced-motion:reduce){.is-playing .mini-eq i{animation:none;height:12px}.is-playing .mini-eq i:nth-child(2n){height:20px}}

/* Refined blue backdrop: soft light around the brand, deep navy edges. */
:root{background:#020b24}
body{background:radial-gradient(ellipse 560px 350px at 50% 190px,#0872d666,transparent 75%),radial-gradient(ellipse 900px 1000px at 50% 52%,#063d9b 0%,#041e58 58%,#020b24 100%);background-attachment:fixed}
.top-nav{background:linear-gradient(135deg,#05162d,#020d20);box-shadow:0 8px 24px #0004}
.radio-card{background:linear-gradient(145deg,#061b35,#020f24 80%);box-shadow:0 14px 32px #0005,inset 0 1px 0 #ffffff05}
.content-panel{box-shadow:0 14px 32px #0004}
@media(max-width:600px){body{background:radial-gradient(ellipse 360px 280px at 50% 170px,#0872d655,transparent 75%),radial-gradient(ellipse at 50% 40%,#06337d,#020b24 95%);background-attachment:fixed}}

/* Play toggles to Pause; yellow identifies the current transport state. */
.radio-card .play-button{border-color:#f5f8ff;color:#f5f8ff}
.radio-card .stop-button{border-color:var(--yellow);color:var(--yellow)}
.radio-card.is-playing .play-button{border-color:var(--yellow);color:var(--yellow)}
.radio-card.is-playing .stop-button{border-color:#f5f8ff;color:#f5f8ff}
.radio-card.is-playing .play-button span{margin-left:0}