*{box-sizing:border-box}html,body{margin:0;background:#7f7f7f;color:#061b0b;font-family:Arial,sans-serif}body{min-height:100vh;padding:18px}.radio{position:relative;margin:auto;width:min(96vw,1200px);aspect-ratio:3/2;background:url(facade-0.webp) center/contain no-repeat}.screen{position:absolute;left:9.2%;top:28.5%;width:42.4%;height:30.4%;padding:1.2%;background:linear-gradient(135deg,rgba(74,255,114,.94),rgba(64,229,96,.96));border-radius:1.2%;box-shadow:inset 0 0 20px #083b13;font-family:"Courier New",monospace;overflow:hidden}.top{display:flex;justify-content:space-between;font-size:clamp(10px,1vw,16px);font-weight:700}.station{font-size:clamp(24px,3.5vw,54px);font-weight:900;line-height:1;margin-top:2%}.meta{font-size:clamp(11px,1.35vw,20px);font-weight:700;min-height:1.2em}.status{font-size:clamp(9px,1vw,15px);margin:.5% 0 1.5%}.searchrow{display:flex;gap:1%;height:15%}.searchrow input{flex:1;min-width:0;border:1px solid #164d22;border-radius:6px;background:#c7ffd2;padding:0 2%;font-size:clamp(11px,1.25vw,18px)}button{cursor:pointer}.screenbtn{border:0;border-radius:5px;background:#07571a;color:#d8ffe0;font-weight:800;padding:0 2%;font-size:clamp(9px,1vw,14px)}.results{margin-top:1.2%;max-height:26%;overflow:auto}.results button{display:flex;justify-content:space-between;width:100%;border:1px solid #19823a;background:#07571a;color:#d8ffe0;padding:1% 2%;font-size:clamp(9px,.9vw,13px)}.hot{position:absolute;background:transparent;border:0;color:transparent;z-index:5}.hot:focus-visible{outline:3px solid #fff;outline-offset:-3px}.fav{left:8.2%;top:64.5%;width:11.5%;height:12.5%}.play{left:20%;top:64.5%;width:11.5%;height:12.5%}.prev{left:31.8%;top:64.5%;width:11.5%;height:12.5%}.next{left:43.6%;top:64.5%;width:11.5%;height:12.5%}.stop{left:55.4%;top:64.5%;width:11.5%;height:12.5%}.pause{left:67.2%;top:64.5%;width:11.5%;height:12.5%}.volume{position:absolute;left:30%;top:83.1%;width:31%;z-index:6;accent-color:#ddd}.mute{position:absolute;left:66%;top:81.5%;width:5%;height:6%;border:0;background:transparent;color:transparent;z-index:6}.playing .play{box-shadow:inset 0 -5px 0 #25ff50}.note{text-align:center;color:#eee;font-size:12px;margin:4px 0 0;text-shadow:0 1px 2px #333}
@media(max-width:700px){body{padding:6px}.radio{width:min(98vw,520px);aspect-ratio:2/3;background-image:url(facade-1.webp)}.screen{left:11.2%;top:18.2%;width:77.7%;height:21.5%;padding:2.2%}.top{font-size:clamp(8px,2.4vw,12px)}.station{font-size:clamp(24px,8vw,42px);margin-top:1%}.meta{font-size:clamp(10px,3.2vw,15px)}.status{font-size:clamp(8px,2.5vw,12px)}.searchrow{height:17%}.searchrow input{font-size:16px}.screenbtn{font-size:11px}.results{max-height:24%}.results button{font-size:10px;padding:2%}.fav{left:8.3%;top:71.2%;width:14.2%;height:9.2%}.play{left:22.7%;top:71.2%;width:14.2%;height:9.2%}.prev{left:37.1%;top:71.2%;width:14.2%;height:9.2%}.next{left:51.5%;top:71.2%;width:14.2%;height:9.2%}.stop{left:65.9%;top:71.2%;width:14.2%;height:9.2%}.pause{left:80.3%;top:71.2%;width:14.2%;height:9.2%}.volume{left:30%;top:88.5%;width:35%}.mute{left:69%;top:86.7%;width:8%;height:5%}.note{font-size:10px}}

/* v3.1 screen layout fix: keep station results visible */
.display{display:flex;flex-direction:column;overflow:hidden}
.display .station{font-size:clamp(22px,2.7vw,42px);margin-top:1%;line-height:.95}
.display .meta{font-size:clamp(10px,1.05vw,16px);min-height:1em}
.display .status{font-size:clamp(9px,.85vw,13px);margin:.2% 0 .7%}
.display .searchrow{height:13%;min-height:30px;flex:0 0 auto}
.display .results{margin-top:.7%;max-height:none;min-height:0;flex:1 1 auto;overflow-y:auto;scrollbar-gutter:stable}
.display .results button{min-height:28px;padding:.5% 2%;flex:0 0 auto}
@media(max-width:700px){.display .station{font-size:clamp(21px,8vw,36px)}.display .searchrow{min-height:34px}.display .results button{min-height:32px}}

/* v3.2 mobile LCD: compact text, physical transport buttons are the main controls */
@media(max-width:700px){
 .display{padding:3.2% 4.5% 3%!important}
 .display .top{font-size:clamp(8px,2.4vw,11px);line-height:1}
 .display .station{font-size:clamp(18px,5.6vw,27px);line-height:.92;margin-top:1%}
 .display .meta{font-size:clamp(9px,2.7vw,12px);line-height:1;min-height:0}
 .display .status{font-size:clamp(8px,2.3vw,10px);line-height:1;margin:.4% 0 1%}
 .display .searchrow{height:12%;min-height:25px}
 .display .searchrow input{font-size:11px;padding:0 2%}
 .display .screenbtn{font-size:8px;padding:0 2%}
 .display .results{margin-top:.6%;font-size:9px}
 .display .results button{min-height:22px;font-size:9px;padding:1px 2%}
}

/* v3.3 volume control aligned with the photographed physical slider */
.volume{left:36.2%;top:84.35%;width:27.2%;height:3.4%;opacity:0;cursor:ew-resize;z-index:8}
@media(max-width:700px){.volume{left:28.5%;top:91.1%;width:43%;height:3.8%;opacity:0}}