/* Isolated styles for the Still Online desert sky. No host selectors. */
.sky-dialog {
  --sky-ink: #f4ece7;
  --sky-muted: #d4c4d0;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: var(--sky-ink);
  background: #0c1021;
  font-family: Inter, sans-serif;
  color-scheme: dark;
  overscroll-behavior: contain;
}
.sky-dialog::backdrop { background: transparent; }
.sky-dialog[open] { display: block; }
.sky-dialog [hidden] { display: none !important; }
.sky-dialog *, .sky-dialog *::before, .sky-dialog *::after { box-sizing: border-box; }
.sky-dialog ::selection { color: #171b2a; background: #e6c0b0; }
.sky-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  outline-offset: -6px;
}
.sky-canvas.sky-dragging { cursor: grabbing; }
.sky-canvas:focus-visible { outline: 2px solid #f0c9b4; }
.sky-header {
  position: absolute;
  top: max(25px, env(safe-area-inset-top));
  left: max(32px, env(safe-area-inset-left));
  right: max(32px, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  pointer-events: none;
}
.sky-title {
  margin: 0;
  font-family: Sora, sans-serif;
  font-size: clamp(23px, 2.1vw, 32px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.025em;
}
.sky-description {
  margin: 9px 0 0;
  color: var(--sky-muted);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
}
.sky-button {
  appearance: none;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #827681;
  border-radius: 3px;
  color: var(--sky-ink);
  background: #141626;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
}
.sky-button:hover { border-color: #ead5c9; background: #232032; }
.sky-button:focus-visible, .sky-range:focus-visible { outline: 2px solid #f0c9b4; outline-offset: 5px; }
.sky-close { display: inline-flex; align-items: center; gap: 11px; }
.sky-close svg { width: 16px; height: 16px; flex: none; }
.sky-controls {
  position: absolute;
  left: max(32px, env(safe-area-inset-left));
  right: max(32px, env(safe-area-inset-right));
  bottom: max(26px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 36px;
  pointer-events: none;
}
.sky-explore { max-width: 620px; }
.sky-instructions { margin: 0 0 14px; color: var(--sky-muted); font-size: 13px; line-height: 1.6; }
.sky-reset { background: transparent; }
.sky-adjust { width: min(370px, 42vw); pointer-events: auto; }
.sky-adjust-heading { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 8px; }
.sky-adjust label { color: var(--sky-ink); font-size: 15px; line-height: 1.5; }
.sky-value { color: var(--sky-muted); font-size: 12px; line-height: 1.5; white-space: nowrap; }
.sky-range {
  appearance: none;
  display: block;
  width: 100%;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  accent-color: #edc9b8;
  touch-action: pan-y;
}
.sky-range::-webkit-slider-runnable-track { height: 3px; border: 0; border-radius: 2px; background: linear-gradient(90deg, #e0a695, #b5a7cd 52%, #586887); }
.sky-range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid #141626; background: #f2d7c8; margin-top: -8.5px; }
.sky-range::-moz-range-track { height: 3px; border: 0; border-radius: 2px; background: linear-gradient(90deg, #e0a695, #b5a7cd 52%, #586887); }
.sky-range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; border: 3px solid #141626; background: #f2d7c8; }
.sky-range-labels { display: flex; justify-content: space-between; gap: 16px; color: var(--sky-muted); font-size: 11px; line-height: 1.5; }
.sky-fallback { position: absolute; top: 42%; left: 10%; right: 10%; text-align: center; color: var(--sky-ink); line-height: 1.7; }
.sky-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  .sky-header { top: max(18px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); gap: 14px; }
  .sky-title { max-width: 230px; font-size: 24px; }
  .sky-description { max-width: 220px; font-size: 12px; margin-top: 7px; }
  .sky-close { padding: 11px; }
  .sky-close-text { display: none; }
  .sky-controls { left: max(22px, env(safe-area-inset-left)); right: max(22px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); flex-direction: column; align-items: stretch; gap: 22px; }
  .sky-explore { max-width: none; }
  .sky-instructions { max-width: none; margin: 0 0 12px; font-size: 11px; }
  .sky-keyboard-hint { display: none; }
  .sky-adjust { width: 100%; }
  .sky-adjust label { font-size: 14px; }
  .sky-reset { font-size: 12px; padding: 9px 12px; }
}
@media (max-height: 480px) and (min-width: 601px) {
  .sky-header { top: 16px; }
  .sky-description { display: none; }
  .sky-controls { bottom: 16px; }
  .sky-instructions { margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-dialog *, .sky-dialog *::before, .sky-dialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .sky-button { border: 1px solid ButtonText; }
  .sky-range { appearance: auto; }
  .sky-range::-webkit-slider-thumb { appearance: auto; }
}

/* Direct manipulation controls stay together; the sky keeps the rest of the frame. */
.sky-actions { display:flex; align-items:center; gap:10px; pointer-events:auto; }
.sky-touch-hint { display:none; }
.sky-zoom { display:flex; align-items:center; border:1px solid #827681; border-radius:3px; background:#141626; }
.sky-zoom .sky-button { border:0; padding:10px; background:transparent; }
.sky-zoom .sky-button:hover { background:#292334; }
.sky-zoom svg { display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }
.sky-zoom-value { min-width:40px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; }
@media (pointer:coarse) { .sky-mouse-hint { display:none; } .sky-touch-hint { display:inline; } .sky-keyboard-hint { display:none; } }
@media (max-width:600px) {
  .sky-controls { gap:18px; }
  .sky-actions { justify-content:space-between; gap:7px; }
  .sky-actions>.sky-button { padding:10px 11px; font-size:12px; }
  .sky-zoom .sky-button { min-width:40px; padding:10px; }
  .sky-zoom-value { min-width:34px; font-size:11px; }
  .sky-reset { font-size:11px; }
}

/* The generated landscape is the visual authority for both terrain and sky color. */
.sky-backdrop { position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 50%; user-select:none; pointer-events:none; }
.sky-canvas { z-index:1; }
.sky-meteor-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; background:linear-gradient(0deg,rgba(4,8,18,.72),rgba(4,8,18,0) 34%,rgba(4,8,18,0) 78%,rgba(4,8,18,.26)); }
.sky-header,.sky-controls { z-index:3; }

/* Cross-dissolve through the real station view instead of cutting to a black modal. */
.sky-dialog.sky-arriving[open]{animation:station-to-night 1800ms cubic-bezier(.2,.65,.3,1) both}
.sky-dialog.sky-arriving .sky-header,.sky-dialog.sky-arriving .sky-controls{animation:night-controls 1800ms ease-out both}
@keyframes station-to-night{0%{opacity:0}25%{opacity:.12}65%{opacity:.78}100%{opacity:1}}
@keyframes night-controls{0%,50%{opacity:0}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.sky-dialog.sky-arriving[open],.sky-dialog.sky-arriving .sky-header,.sky-dialog.sky-arriving .sky-controls{animation:none}}

/* A quiet artist mark on the lower landscape, clear of the sky controls. */
.sky-close { margin-left: auto; }
.sky-signature {
  position: absolute; z-index: 3; right: 5%; bottom: max(170px, 20%);
  width: 84px; height: auto; opacity: .32;
  filter: grayscale(1) sepia(.25); pointer-events: none; user-select: none;
}
@media (max-width: 600px) {
  .sky-signature { width: 62px; right: 24px; bottom: 310px; }
}
@media (max-height: 480px) and (min-width: 601px) {
  .sky-signature { width: 56px; bottom: 138px; }
}