/* Compact Zombies Radio. Console and expanded monitor reserve top space for it. */
.app{padding-top:max(70px,env(safe-area-inset-top))}
.zb-radio{
  position:fixed;z-index:180;
  top:max(9px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));
  width:min(316px,calc(100vw - 20px));height:44px;
  padding:5px 7px 5px 9px;margin:0;
  display:flex;align-items:center;gap:6px;
  overflow:hidden;white-space:nowrap;
  border:1px solid #567c35;border-radius:5px;
  background:rgba(6,19,12,.97);
  box-shadow:0 3px 14px #000b,inset 0 0 10px #233c1840;
  color:#d9f5ad;font-family:var(--mono);
}
.zb-radio-track{
  min-width:0;flex:1;overflow:hidden;white-space:nowrap;
  color:#d9f5ad;text-decoration:none;font:18px/1 var(--mono);
}
/* Duplicate only when a song title is wider than its available space.
   Moving exactly one title + one gap keeps the marquee seam invisible. */
.zb-radio-ticker{display:inline-flex;align-items:center;gap:24px;width:max-content;white-space:nowrap}
.zb-radio-title-primary,.zb-radio-title-copy{display:inline-block;flex:none;white-space:nowrap}
.zb-radio-title-copy{display:none}
.zb-radio-track.is-scrolling .zb-radio-title-copy{display:inline-block}
.zb-radio-track.is-scrolling .zb-radio-ticker{
  animation:zb-radio-marquee var(--zb-marquee-duration,12s) linear infinite;
}
@keyframes zb-radio-marquee{
  0%,10%{transform:translateX(0)}
  100%{transform:translateX(calc(-1 * var(--zb-marquee-distance,200px)))}
}
.zb-radio-track:hover .zb-radio-ticker,.zb-radio-track:focus-visible .zb-radio-ticker{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .zb-radio-track.is-scrolling .zb-radio-ticker{animation:none}
  .zb-radio-track:focus-visible{overflow-x:auto}
}
.zb-radio-track:hover{text-decoration:underline}
.zb-radio-track:focus-visible,.zb-radio button:focus-visible{outline:2px solid #e4ff9f;outline-offset:-1px}
.zb-radio-actions{display:flex;gap:3px;align-items:center;flex:none;margin:0;padding:0}
.zb-radio button{
  width:27px;height:29px;padding:0;margin:0;
  display:grid;place-items:center;
  font:18px/1 var(--mono);color:#d5efaa;background:#101f0e;
  border:1px solid #436a2c;border-radius:3px;cursor:pointer;
}
.zb-radio button:hover{background:#28421c;border-color:#a1d76f}
.zb-radio button[aria-pressed="true"]{color:#edffc9;border-color:#a2d86e}
.zb-radio-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.zb-radio-transport{position:absolute;top:0;left:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0}
/* The enlarged game is also kept below the reserved 60px radio strip. */
.overlay.visible{padding-top:65px}
.overlay.visible .focus{max-height:calc(100dvh - 85px)}
@media(max-width:800px){
  .app{padding-top:max(60px,env(safe-area-inset-top))}
  .scene{margin-top:0}
  .zb-radio{top:max(5px,env(safe-area-inset-top));right:6px;width:min(292px,calc(100vw - 12px));height:40px;padding:4px 6px}
  .zb-radio-track{font-size:17px}
  .zb-radio button{width:25px;height:26px;font-size:17px}
  .overlay.visible{padding-top:57px}
  .overlay.visible .focus{max-height:calc(100dvh - 73px)}
}
@media(max-width:380px){
  .zb-radio{width:min(275px,calc(100vw - 12px));gap:4px}
  .zb-radio-actions{gap:2px}
  .zb-radio button{width:23px}
  .zb-radio-track{font-size:15px}
}