* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #05070d;
  overflow: hidden;
  font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", system-ui, sans-serif;
  color: #e8eef8;
  -webkit-font-smoothing: antialiased;
}

/* Fixed shell so the stage sizes correctly even when the page is embedded
   and the body has no intrinsic height. */
#shell {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #14203a 0%, #05070d 70%);
}

#stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 90px rgba(40, 90, 180, 0.25), 0 0 0 1px rgba(255,255,255,0.05);
  overflow: hidden;
}

/* The in-canvas reticle replaces the pointer, but only once you're flying -
   on the menus you still need to see where you're clicking. */
#stage.playing { cursor: none; }

#scene, #display {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* #scene is the offscreen 2D render target; hidden when WebGL post is active */
#scene { z-index: 1; }
#display { z-index: 2; }
#stage.gl #scene { visibility: hidden; }
#stage.nogl #display { display: none; }

#chrome {
  position: absolute; z-index: 5;
  top: 10px; right: 12px;
  display: flex; gap: 6px;
  opacity: 0.28;
  transition: opacity 140ms ease;
}
#stage:hover #chrome { opacity: 0.9; }

#chrome button {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 5px 9px;
  color: #cfe0ff;
  background: rgba(8, 14, 28, 0.72);
  border: 1px solid rgba(150, 190, 255, 0.35);
  border-radius: 2px;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#chrome button:hover { background: rgba(60, 110, 210, 0.55); color: #fff; }
#chrome button.off { color: #7c8habb; opacity: 0.5; }

/* ---------------------------------------------------------------- radio *
   The YouTube player stays visible and interactive (that's what the embed
   terms ask for, and you can see what's playing). Sized in % of the stage
   so it scales with everything else. */
#radio {
  position: absolute; z-index: 4;
  left: 1%; bottom: 1.6%;
  width: 16.5%; min-width: 150px;
  background: rgba(6, 10, 22, 0.82);
  border: 1px solid rgba(150, 190, 255, 0.3);
  border-radius: 3px;
  overflow: hidden;
  opacity: 0.62;
  transition: opacity 140ms ease;
}
#radio:hover { opacity: 1; }
#radio.tucked #yt-player { display: none; }

#radio-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 5px 4px 7px;
  font-size: 10px; letter-spacing: 0.14em;
  color: #cfe0ff;
  border-bottom: 1px solid rgba(150, 190, 255, 0.18);
}
#radio.tucked #radio-head { border-bottom: 0; }
#radio-label {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#radio-head button {
  flex: none;
  font-family: inherit; font-size: 9px; letter-spacing: 0.12em;
  padding: 2px 5px;
  color: #cfe0ff;
  background: rgba(30, 61, 143, 0.5);
  border: 1px solid rgba(150, 190, 255, 0.3);
  border-radius: 2px;
  cursor: pointer;
}
#radio-head button:hover { background: rgba(78, 134, 255, 0.65); color: #fff; }

#yt-player, iframe#yt-player, #yt-player iframe {
  display: block;
  width: 100%;
  height: auto;          /* beats the width/height attrs YT stamps on */
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (max-width: 620px) {
  #radio { width: 40%; }
}