/* Coordinates measured on the 1200×800 and 720×1080 source photographs.
   The image and all controls share the same aspect-ratio container. */
.radio{width:min(100%,1200px)}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
main{width:100%;margin-top:auto;flex-shrink:0}
/* Remove the empty strip below the photographed feet without moving hitboxes. */
.radio-wrap{display:flow-root;overflow:hidden}.radio{margin-bottom:-3.25%}
.radio{-webkit-user-select:none;user-select:none}
.radio input{-webkit-user-select:text;user-select:text}
/* Shared frame keeps the two photo layouts centered. */
.radio-wrap{position:relative;width:min(100%,1200px);margin:auto}
.display>.note{flex:0 0 auto;align-self:stretch;margin:5px 0 0;text-align:right;font:400 clamp(6px,.65vw,8px)/1.2 Arial,sans-serif;color:#174d25;text-shadow:none}
.version{position:absolute;left:41.2%;top:22.3%;font:400 clamp(6px,.75vw,9px)/1 Arial,sans-serif;color:#c5c5c5;white-space:nowrap;pointer-events:none}
/* Cut out only the photographic backdrop, exposing the exact page gray. */
html,body{background-color:#7f7f7f}
.radio{-webkit-mask:url('radio-landscape-mask.svg') center/100% 100% no-repeat;mask:url('radio-landscape-mask.svg') center/100% 100% no-repeat}
.screen{background:linear-gradient(135deg,#4aff72,#40e560)}
/* Cover the complete photographed LCD, including its right luminous edge. */
@media(min-width:701px){.screen{left:9.2%;width:43%;}}
.hot{top:63.75%;width:9.67%;height:12%;padding:0;touch-action:manipulation}
.fav{left:8.58%}.play{left:19%}.prev{left:29.42%}
.next{left:39.83%}.stop{left:50.25%}.pause{left:60.67%}
/* Cover the lamp baked into the photo, then draw its actual playback state. */
.play::before{content:"";position:absolute;left:26%;width:48%;top:78%;height:23%;background:linear-gradient(#181a19,#161817);border-radius:4px;pointer-events:none}
.play::after{content:"";position:absolute;left:40%;width:20%;top:88%;height:3%;min-height:1px;border-radius:3px;background:#444b46;box-shadow:0 1px 1px #080a09;pointer-events:none}
.radio.playing .play{box-shadow:none}
.playing .play::after{background:#caffcd;box-shadow:0 0 3px 2px #4cff69,0 0 8px 4px #16d63b}
.volume{left:28.25%;top:81.25%;width:32.5%;height:5%;opacity:1;touch-action:none;user-select:none;cursor:ew-resize;outline-offset:3px}
.volume{background:linear-gradient(#991b14,#b72c20,#8e1c16);border-radius:6px}
.volume::before{content:"";position:absolute;inset:-10px 0}
.volume-track{position:absolute;inset:26% 0;border-radius:20px;background:#111;box-shadow:inset 0 2px 4px #000;border:1px solid #777;pointer-events:none}
.volume-knob{position:absolute;left:var(--volume,70%);top:50%;width:10%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #aaa;background:conic-gradient(#eee,#777,#fff,#888,#eee);box-shadow:0 2px 4px #000;pointer-events:none}
.volume-value{display:none;position:absolute;bottom:110%;left:var(--volume,70%);transform:translateX(-50%);white-space:nowrap;background:#092b12;color:#dcffe0;padding:3px 6px;border-radius:4px;font-size:12px;pointer-events:none}
.volume:focus-visible{outline:2px solid white}.volume:focus-visible .volume-value,.volume.dragging .volume-value,.volume:hover .volume-value{display:block}
.volume-panel{position:absolute;left:24.4%;top:79.4%;width:40.2%;height:8.6%;background:#a82019;border-radius:4px;z-index:7;pointer-events:none}
.volume-panel svg{position:absolute;top:50%;transform:translateY(-50%);width:5%;height:40%;fill:none;stroke:#f5dfda;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.volume-panel .quiet{left:3%}.volume-panel .loud{right:3%}
.volume{left:28.8%;width:31.4%;background:#a82019;outline:none}
.volume:focus-visible{outline:none}
.volume.keyboard-focus .volume-track{box-shadow:0 0 0 2px #f5dfda,inset 0 2px 4px #000}
.mute{left:67.4%;top:81.9%;width:3.3%;height:5%}
.hot[aria-pressed=true]{box-shadow:inset 0 -3px #25ff50}
.display .station{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;font-size:clamp(16px,1.9vw,26px);line-height:1;margin-top:.6%}
.display .top,.display .meta,.display .status{flex-shrink:0}
@media(max-width:700px){
 .radio{width:min(100%,520px)}
 .radio-wrap{width:min(100%,520px)}
 body{padding-bottom:env(safe-area-inset-bottom,0px)}
 .radio{margin-bottom:-6.8%}
 .display>.note{font-size:clamp(5px,1.45vw,7px);margin-top:3px}
 .version{left:50%;top:13.1%;font-size:clamp(4px,1.15vw,6px)}
 .radio{-webkit-mask-image:url('radio-portrait-mask.svg');mask-image:url('radio-portrait-mask.svg')}
 .hot{top:71.2%;width:12.78%;height:9.82%}
 .fav{left:8.33%}.play{left:22.36%}.prev{left:36.39%}
 .next{left:50.42%}.stop{left:64.44%}.pause{left:78.47%}
 .play::before{top:76%;height:23%}
 .play::after{top:82.5%}
 .volume{left:28.47%;top:85.2%;width:36.25%;height:3.7%}
 .volume-panel{left:26.5%;top:83.3%;width:40.2%;height:6.8%}
 .volume-panel svg{width:7%;height:35%;top:55%}
 .volume-panel .quiet{left:2%}.volume-panel .loud{right:2%}
 .volume{left:31%;width:31.1%}
 .volume-knob{width:13%}
 .mute{left:69.8%;top:85.2%;width:5%;height:3.7%}
 .screen{left:10.8%;top:17.8%;width:78.4%;height:22.5%}
 .display{padding:1.8% 2.8%!important}
 .display .searchrow input{font-size:16px}
 .display .station{font-size:clamp(14px,4.2vw,20px)}
}
/* The footer stays in flow so scrolling stations never cover it. */
.screen.display{padding-bottom:2px!important}

/* Mobile LCD gains 243 source pixels; all other photo parts retain their scale. */
@media(max-width:700px){
 .radio{aspect-ratio:720/1323;background-image:url('radio-portrait-tall.svg');-webkit-mask:none;mask:none}
 .version{top:10.69388%}
 .screen{top:14.53061%;height:36.73469%}
 .hot{top:76.48980%;height:8.01633%}
 .volume{top:87.91837%;height:3.02041%}
 .volume-panel{top:86.36735%;height:5.55102%}
 .mute{top:87.91837%;height:3.02041%}
 .display .searchrow{height:25px}
}