html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #070f17;
}

#earth-orbit-radio {
  --rr-white: #fffdf4;
  --rr-cream: #f6e7b5;
  --rr-gold: #e8cd82;
  --rr-map: #102626;
  --rr-land: #405a54;
  --rr-gutter: 28px;
  --rr-gap: 16px;
  --rr-map-width: 263px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  color: var(--rr-white);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

#earth-orbit-radio * { box-sizing: border-box; }
#earth-orbit-radio [hidden] { display: none !important; }
#earth-orbit-radio button,
#earth-orbit-radio summary { font: inherit; cursor: pointer; touch-action: manipulation; }
#earth-orbit-radio button { border: 0; -webkit-tap-highlight-color: transparent; }
#earth-orbit-radio :focus-visible { outline: 2px solid var(--rr-cream); outline-offset: 4px; }
#earth-orbit-radio .radio-app { height: 100%; overflow: hidden; }
#earth-orbit-radio .radio-scene {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rr-map-width);
  grid-template-rows: 44px minmax(0, 1fr) auto auto 44px;
  grid-template-areas: "header header" "welcome welcome" "place map" "controls map" "footer footer";
  gap: var(--rr-gap) 24px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: calc(12px + env(safe-area-inset-top, 0px))
    calc(var(--rr-gutter) + env(safe-area-inset-right, 0px))
    env(safe-area-inset-bottom, 0px)
    calc(var(--rr-gutter) + env(safe-area-inset-left, 0px));
  background: #070f17;
}
#earth-orbit-radio:not([data-started]) .radio-scene {
  grid-template-rows: 44px minmax(0, 1fr) auto 44px;
  grid-template-areas: "header header" "welcome welcome" ". map" "footer footer";
}
#earth-orbit-radio:not([data-started]) .radio-place { display: none; }
#earth-orbit-radio .radio-backdrop { position: absolute; inset: -35px; background-size: cover; background-position: center; filter: blur(28px) brightness(.55); z-index: -3; }
#earth-orbit-radio .radio-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.6s ease; z-index: -2; pointer-events: none; }
#earth-orbit-radio .radio-photo.visible { opacity: 1; }
#earth-orbit-radio .radio-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,12,19,.55), transparent 25%, transparent 45%, rgba(3,12,19,.9)); pointer-events: none; z-index: -1; }
#earth-orbit-radio .radio-sparkles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#earth-orbit-radio .radio-header { grid-area: header; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
#earth-orbit-radio .radio-brand { font-size: 12px; font-weight: 500; letter-spacing: .22em; white-space: nowrap; color: var(--rr-cream); }
#earth-orbit-radio .radio-error { font-size: 12px; line-height: 1.5; text-align: right; }
#earth-orbit-radio .radio-welcome { grid-area: welcome; align-self: center; justify-self: center; width: min(390px, 100%); text-align: center; text-shadow: 0 2px 18px #07141a; z-index: 2; }
#earth-orbit-radio .radio-welcome p { margin: 0 0 12px; font-size: 13px; letter-spacing: .14em; }
#earth-orbit-radio .radio-welcome h2 { margin: 0 0 18px; font-size: 36px; line-height: 1.4; letter-spacing: .06em; font-weight: 500; }
#earth-orbit-radio .radio-welcome > span { display: block; font-size: 14px; line-height: 1.9; }
#earth-orbit-radio .radio-start { margin-top: 25px; background: var(--rr-cream); color: #172c29; border-radius: 30px; padding: 14px 22px; min-height: 50px; font-size: 14px; font-weight: 500; text-shadow: none; }
#earth-orbit-radio .radio-start > span { padding-left: 22px; }
#earth-orbit-radio button:disabled { opacity: .65; cursor: wait; }
#earth-orbit-radio .radio-place { grid-area: place; min-width: 0; align-self: end; pointer-events: none; }
#earth-orbit-radio .radio-place-eyebrow { font-size: 11px; letter-spacing: .14em; color: var(--rr-cream); }
#earth-orbit-radio .radio-place h3 { margin: 8px 0; font-size: 30px; line-height: 1.35; font-weight: 500; letter-spacing: .04em; overflow-wrap: anywhere; }
#earth-orbit-radio .radio-song { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.6; }
#earth-orbit-radio .radio-location { display: block; font-size: 11px; line-height: 1.5; margin-top: 8px; color: #d4dfdf; font-variant-numeric: tabular-nums; }
#earth-orbit-radio .radio-bars { display: flex; align-items: center; gap: 3px; height: 16px; flex-shrink: 0; }
#earth-orbit-radio .radio-bars i { width: 2px; height: 3px; background: var(--rr-gold); border-radius: 2px; }
#earth-orbit-radio .radio-controls { grid-area: controls; display: flex; gap: 8px; align-items: center; min-width: 0; z-index: 3; }
#earth-orbit-radio .radio-controls button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border-radius: 25px; background: rgba(15,34,37,.8); color: var(--rr-white); font-size: 12px; white-space: nowrap; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,253,244,.2); }
#earth-orbit-radio .radio-controls .radio-pause { background: var(--rr-cream); color: #142c28; border-color: var(--rr-cream); }
#earth-orbit-radio .radio-controls button > span:first-child { font-size: 17px; line-height: 1; min-width: 15px; text-align: center; }
#earth-orbit-radio .radio-map { grid-area: map; align-self: end; width: 100%; padding: 10px; background: rgba(16,38,38,.88); border: 1px solid rgba(225,234,216,.2); border-radius: 14px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 3; }
#earth-orbit-radio .radio-world { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
#earth-orbit-radio .map-countries path { fill: var(--rr-land); stroke: var(--rr-map); stroke-width: .4; }
#earth-orbit-radio .map-highlight { fill: #819f80; stroke: none; }
#earth-orbit-radio .map-route-past { fill: none; stroke: var(--rr-gold); stroke-width: 1.3; opacity: .8; }
#earth-orbit-radio .map-route-future { fill: none; stroke: var(--rr-white); stroke-width: 1; stroke-dasharray: 2 3; opacity: .5; }
#earth-orbit-radio .map-photo-pins circle { fill: var(--rr-cream); opacity: .38; }
#earth-orbit-radio .map-photo-active { fill: var(--rr-gold); stroke: var(--rr-map); stroke-width: 1; }
#earth-orbit-radio .map-orbit-halo { fill: var(--rr-white); opacity: .18; }
#earth-orbit-radio .map-orbit-point { fill: var(--rr-white); }
#earth-orbit-radio .radio-footer { grid-area: footer; position: relative; display: flex; justify-content: flex-end; align-items: center; min-width: 0; font-size: 11px; line-height: 1.7; color: #c1cfca; z-index: 4; }
#earth-orbit-radio .radio-footer > div { display: flex; align-items: center; gap: 18px; }
#earth-orbit-radio .radio-footer a { color: inherit; }
#earth-orbit-radio .radio-credit,
#earth-orbit-radio .radio-about summary { display: flex; align-items: center; min-height: 44px; white-space: nowrap; }
#earth-orbit-radio .radio-about summary { list-style: none; }
#earth-orbit-radio .radio-about summary::-webkit-details-marker { display: none; }
#earth-orbit-radio .radio-about[open] summary { color: var(--rr-cream); }
#earth-orbit-radio .radio-about > div { position: absolute; right: 0; bottom: calc(100% + 8px); width: min(320px, 100%); padding: 16px; border: 1px solid #536b61; border-radius: 14px; background: #102626; color: var(--rr-white); font-size: 13px; line-height: 1.8; box-shadow: 0 8px 32px #0006; }

/* Portrait phones: one row of thumb controls, with the map above on the right. */
@media (max-width: 700px) and (orientation: portrait) {
  #earth-orbit-radio { --rr-gutter: 18px; --rr-gap: 12px; --rr-map-width: clamp(140px, 43vw, 220px); }
  #earth-orbit-radio .radio-scene { column-gap: 14px; grid-template-areas: "header header" "welcome welcome" "place map" "controls controls" "footer footer"; }
  #earth-orbit-radio .radio-error { font-size: 11px; }
  #earth-orbit-radio .radio-welcome h2 { font-size: 30px; }
  #earth-orbit-radio .radio-place h3 { font-size: 22px; margin-block: 6px; }
  #earth-orbit-radio .radio-song { font-size: 12px; gap: 6px; }
  #earth-orbit-radio .radio-location { margin-top: 6px; }
  #earth-orbit-radio .radio-controls { gap: 8px; }
  #earth-orbit-radio .radio-controls button { flex: 1; padding: 10px 8px; gap: 6px; }
  #earth-orbit-radio .radio-map { padding: 8px; border-radius: 12px; }
  #earth-orbit-radio .radio-footer { justify-content: center; }
}

/* Wide, short viewports keep the welcome and controls beside the map. */
@media (orientation: landscape) and (max-height: 600px) {
  #earth-orbit-radio { --rr-gutter: 22px; --rr-gap: 8px; --rr-map-width: clamp(170px, 27vw, 245px); }
  #earth-orbit-radio .radio-scene { padding-top: env(safe-area-inset-top, 0px); column-gap: 22px; }
  #earth-orbit-radio:not([data-started]) .radio-scene { grid-template-rows: 44px minmax(0, 1fr) 44px; grid-template-areas: "header header" "welcome map" "footer footer"; }
  #earth-orbit-radio:not([data-started]) .radio-map { align-self: end; }
  #earth-orbit-radio .radio-welcome { max-width: 360px; }
  #earth-orbit-radio .radio-welcome p { margin-bottom: 6px; font-size: 11px; }
  #earth-orbit-radio .radio-welcome h2 { margin-bottom: 8px; font-size: 28px; }
  #earth-orbit-radio .radio-welcome > span { font-size: 12px; line-height: 1.7; }
  #earth-orbit-radio .radio-start { margin-top: 14px; min-height: 44px; padding: 11px 18px; font-size: 13px; }
  #earth-orbit-radio .radio-place h3 { margin-block: 5px; font-size: 24px; }
  #earth-orbit-radio .radio-location { margin-top: 4px; }
  #earth-orbit-radio .radio-controls button { padding: 10px 12px; }
  #earth-orbit-radio .radio-footer > div { gap: 20px; }
}

@media (max-width: 360px) and (orientation: portrait) {
  #earth-orbit-radio { --rr-gutter: 14px; --rr-map-width: 140px; }
  #earth-orbit-radio .radio-scene { column-gap: 10px; }
  #earth-orbit-radio .radio-place h3 { font-size: 20px; }
  #earth-orbit-radio .radio-controls button { font-size: 11px; gap: 4px; }
}

@media (max-height: 520px) and (orientation: portrait) {
  #earth-orbit-radio { --rr-gap: 8px; }
  #earth-orbit-radio .radio-welcome p { margin-bottom: 8px; }
  #earth-orbit-radio .radio-welcome h2 { margin-bottom: 10px; font-size: 28px; }
  #earth-orbit-radio .radio-start { margin-top: 16px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  #earth-orbit-radio .radio-photo { transition: none; }
}