/* The radio owns its scroll area; the fishing controls stay outside it. */
.bf-scene-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:none}
.bf-scene-actions button{min-width:44px;min-height:44px}
.bf-scene-actions [data-bf-radio-open]{background:#f1dfb9;border-color:#c6a678;color:#58442f}
.bf-scene-actions [data-bf-radio-open][aria-expanded=true]{background:#77553e;border-color:#62432f;color:#fff6de}
.bf-radio{position:absolute;z-index:8;right:8px;bottom:8px;display:flex;flex-direction:column;width:min(390px,calc(100% - 16px));max-height:calc(100% - 76px);padding:8px 10px;border:7px solid #76533b;border-radius:21px;background:linear-gradient(110deg,#f3e6c9,#dfcba4);box-shadow:0 12px 30px #173b3159,inset 0 0 0 2px #c6ac7f,0 0 0 1px #493525;color:#493b28;font-size:.76rem}
.bf-radio-head{display:flex;flex:none;align-items:center;gap:8px;padding:0 2px 7px;margin-bottom:3px;border-bottom:1px solid #bc9e7066}
.bf-radio-head h2{margin:0;font:700 1.5rem/1 var(--font-title);color:#4d3928;text-shadow:0 1px #fff4d5}
.bf-radio-head h2 span{display:block;font:800 .47rem/1.2 var(--font-body);letter-spacing:.16em;color:#735b3e;margin-top:5px}
.bf-radio-lamp{width:9px;height:9px;flex:none;margin-left:auto;border-radius:50%;background:#82765c;box-shadow:inset 0 1px 3px #4c4235}
.bf-radio[data-state=playing] .bf-radio-lamp{background:#88b84d;box-shadow:0 0 5px #87b14f,inset 0 1px #cae69d}
.bf-radio-body{min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding-block:8px;padding:4px 3px 5px;scrollbar-width:thin;scrollbar-color:#98784e #e4d4b3}
.bf-radio button{min-height:44px;min-width:44px;border:1px solid #b69b71;border-radius:8px;background:linear-gradient(#fff9e8,#ead8b2);font:800 .75rem/1.2 var(--font-body);padding:6px 8px;color:#493b28;box-shadow:inset 0 1px #fffef0,0 2px 0 #aa8e614d}
.bf-radio button:focus-visible{outline-color:#176b73;outline-offset:2px}
.bf-radio-head button{width:44px;flex:none;border-radius:50%;font-size:1.4rem;background:#eadbbb;box-shadow:inset 0 1px #fff7df,0 2px 0 #b29a73;color:#70583d}
.bf-radio-face{display:flex;gap:12px;margin:2px 0 12px}
.bf-radio-speaker{flex:0 0 68px;min-height:68px;align-self:center;border:4px solid #967649;border-radius:50%;background:repeating-linear-gradient(0deg,transparent 0 2px,#58493380 2px 3px),repeating-linear-gradient(90deg,#b6a275 0 2px,#78643f 2px 3px);box-shadow:inset 0 3px 8px #3c302755,0 1px #fff1ce}
.bf-radio-display{flex:1;min-width:0;background:linear-gradient(#344d3f,#263c32);color:#ffe8a9;padding:9px 10px;border:3px solid #a78a58;border-radius:7px;box-shadow:inset 0 3px 6px #11251f99,0 1px #fff1d1}
.bf-radio-display>span{display:block;font-size:.54rem;font-weight:800;letter-spacing:.1em;color:#e5dba6}
.bf-radio-display>strong{display:block;overflow-wrap:anywhere;font-size:.86rem;line-height:1.25;margin-top:3px;min-height:2.5em;text-shadow:0 1px 2px #13251b}
.bf-radio-dial{height:13px;position:relative;border-bottom:1px solid #c4c190;margin-top:6px;background:repeating-linear-gradient(90deg,#c4c19099 0 1px,transparent 1px 9px)}
.bf-radio-dial i{position:absolute;left:24%;top:-2px;height:17px;width:3px;background:#eeb471;box-shadow:0 0 3px #efc98c66}
.bf-radio[data-channel=story] .bf-radio-dial i{left:76%}
.bf-radio[data-power=off] .bf-radio-display{background:#3d4234;color:#e1d5ae}
.bf-radio-channels{display:flex;gap:9px}
.bf-radio-channels button{flex:1;min-height:54px;border-radius:7px 7px 11px 11px;border-bottom:4px solid #ad9164;font-size:.83rem}
.bf-radio-channels button[aria-pressed=true]{background:linear-gradient(#5c7357,#405c45);border-color:#38553e;border-bottom-color:#2b4634;box-shadow:inset 0 2px 3px #253c2b77;color:#fff5d6}
.bf-radio-channels small{display:block;font:400 .66rem/1.3 var(--font-body);margin-top:2px}
.bf-radio-controls{display:flex;gap:6px;margin-top:10px}
.bf-radio-controls button{flex:1;border-radius:6px;box-shadow:0 3px 0 #aa8e61,inset 0 1px #fff4d6}
.bf-radio-controls [data-bf-radio-power]{background:linear-gradient(#d99a70,#c57d54);color:#312518;border-color:#a66b48}
.bf-radio-controls [data-bf-radio-power][aria-pressed=true]{background:linear-gradient(#927351,#725337);color:#fff5d6}
.bf-radio-volume{display:flex;justify-content:center;align-items:center;gap:10px;padding-top:7px;margin-top:11px;border-top:1px solid #bc9e7066;font-weight:800}
.bf-radio-volume button{width:44px;flex:none;border-radius:50%;font-size:1.3rem;background:repeating-conic-gradient(#cfbc97 0deg 10deg,#b7a17b 10deg 20deg);border:4px double #9c845c;box-shadow:inset 0 0 0 3px #e6d6b5,0 2px 3px #6b503233;color:#3a3828}
.bf-radio-volume output{min-width:42px;text-align:center;font-size:.75rem;color:#51412b}
.bf-radio [data-bf-radio-status]{margin:8px 0 0;min-height:2.6em;font-size:.69rem;line-height:1.35;color:#604d33;overflow-wrap:anywhere}
[data-bf-radio-audio]{display:none}
@media(max-width:550px){
  .bf-hud{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
  .bf-location{display:flex;align-items:center;gap:8px;padding:5px 8px;min-height:33px}
  .bf-location small{font-size:.43rem;max-width:72px;line-height:1.2;letter-spacing:.07em}
  .bf-location strong{font-size:1.06rem;min-width:0}
  .bf-location>span{font-size:.6rem;margin:0 0 0 auto;white-space:nowrap}
  .bf-scene-actions{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;max-width:none}
  .bf-scene-actions button{min-width:44px;min-height:44px;padding:5px 3px;font-size:.59rem;line-height:1.2;overflow-wrap:normal}
  .bf-scene-actions [data-bf-evening],.bf-scene-actions [data-bf-calm]{display:block}
  .bf-radio{max-height:calc(100% - 106px);padding:7px 8px;border-width:6px}
  .bf-radio-face{gap:9px}
  .bf-radio-speaker{flex-basis:56px;min-height:56px;border-width:3px}
  .bf-radio-display{padding:8px}
}
/* Keep the HUD usable beside, not underneath, an open radio in short landscape. */
@media(max-height:520px) and (min-width:551px){
  .bf-stage:has(.bf-radio:not([hidden])) .bf-hud{right:57%;display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
  .bf-stage:has(.bf-radio:not([hidden])) .bf-location{display:flex;align-items:center;gap:8px;padding:5px 8px;min-height:33px}
  .bf-stage:has(.bf-radio:not([hidden])) .bf-location small{font-size:.43rem;max-width:72px;line-height:1.2;letter-spacing:.07em}
  .bf-stage:has(.bf-radio:not([hidden])) .bf-location strong{font-size:1rem}
  .bf-stage:has(.bf-radio:not([hidden])) .bf-location>span{font-size:.59rem;margin:0 0 0 auto;white-space:nowrap}
  .bf-stage:has(.bf-radio:not([hidden])) .bf-scene-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .bf-stage:has(.bf-radio:not([hidden])) .bf-scene-actions button{font-size:.6rem;padding:5px 3px}
  .bf-radio{width:54%;max-height:calc(100% - 16px);border-width:6px;padding:5px 8px}
  .bf-radio-head{padding-bottom:5px;margin:0}
  .bf-radio-head h2{font-size:1.3rem}
}
/* Put channel keys first in short scroll windows; the decorative dial follows. */
@media(max-height:520px) and (min-width:551px),(max-height:650px) and (max-width:550px){
  .bf-radio-body{display:flex;flex-direction:column;gap:8px}
  .bf-radio-body>div,.bf-radio-body>p{flex-shrink:0}
  .bf-radio-channels{order:-2}
  .bf-radio-controls{order:-1;margin-top:0}
  .bf-radio-face{margin:0}
}