/* realm/css/sky.css — THE SKY module (time-of-day + weather).
   Self-contained: pairs with js/sky.js; removing both leaves the realm as-is.
   Layering: tint & weather sit between the starfield (z0) and the realm UI
   (#wallet-view z100). Chrome stays under the drawer line (<440). */

#sky-tint {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  transition: opacity 1.2s ease;
}
#sky-wx {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  width: 100%; height: 100%;
}
#warp-canvas { transition: opacity 1.2s ease; }

/* ── the sky orb — a glass ball that IS the sky in miniature ── */
#sky-orb {
  position: fixed; right: 22px; bottom: 22px; z-index: 419;
  width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(10,16,28,0.4);
  border: 1px solid rgba(190,210,235,0.28);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#sky-orb canvas { width: 38px; height: 38px; display: block; margin: 3px auto; border-radius: 50%; }
#sky-orb:hover { transform: translateY(-2px); border-color: rgba(245,216,140,0.5); box-shadow: 0 10px 24px rgba(0,0,0,0.5), 0 0 16px rgba(245,197,66,0.18); }
#sky-orb.sky-orb-on { border-color: rgba(245,197,66,0.65); box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 22px rgba(245,197,66,0.3); }
body.ncp-nav-open #sky-orb { opacity: 0; pointer-events: none; }

/* ── sky mode: the realm recedes, only the sky (and the orb) remain ── */
body.sky-open #wallet-view,
body.sky-open #action-detail-view,
body.sky-open #rlm-topleft,
body.sky-open #rlm-claim-pill,
body.sky-open #rn-cr,
body.sky-open .ncp-nav-toggle {
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity .5s ease;
}
#wallet-view, #rlm-topleft, #rlm-claim-pill, #rn-cr, .ncp-nav-toggle { transition: opacity .5s ease; }

/* ── the dial + chips (quiet, centered, nothing else on screen) ── */
#sky-ui { position: fixed; inset: 0; z-index: 430; pointer-events: none; }
#sky-ui[hidden] { display: none; }

#sky-dial {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  width: min(640px, 92vw); aspect-ratio: 640 / 150; pointer-events: auto;
  animation: skyRise .5s cubic-bezier(0.2,0.8,0.28,1) both;
}
#sky-dial svg { position: relative; width: 100%; height: 100%; display: block;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,0.5)); }
#sky-handle {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; cursor: grab; touch-action: none; pointer-events: auto;
  background: radial-gradient(circle at 38% 32%, #ffe9a8, #f5c542 62%, #c8922a);
  border: 2px solid rgba(255,255,255,0.55); outline: none;
  box-shadow: 0 0 26px rgba(245,197,66,0.9), 0 0 6px rgba(245,197,66,0.8), 0 3px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.5);
}
#sky-handle:active { cursor: grabbing; }
#sky-handle.sky-moon {
  background: radial-gradient(circle at 38% 32%, #ffffff, #cfd8ea 62%, #8f9cb8);
  box-shadow: 0 0 24px rgba(207,216,234,0.85), 0 0 6px rgba(207,216,234,0.7), 0 3px 10px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
}
#sky-time {
  position: absolute; left: 50%; top: -40px; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(16,24,40,0.7), rgba(8,13,24,0.75));
  border: 1px solid rgba(245,216,140,0.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: #f5d97a; text-shadow: 0 0 10px rgba(245,197,66,0.35);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  pointer-events: none; white-space: nowrap;
}

/* ── the weather bar — TOP of the sky, far from the dial. Round glass keys
      with hand-drawn line icons; the active one wears a gold hairline. ── */
#sky-wxbar {
  position: absolute; left: 50%; top: 40px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; pointer-events: auto;
  padding: 9px 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(16,24,40,0.5), rgba(8,13,24,0.55));
  border: 1px solid rgba(200,216,240,0.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 14px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
  animation: skyDrop .5s cubic-bezier(0.2,0.8,0.28,1) both;
}
.sky-wxbtn {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 28%, rgba(255,255,255,0.09), rgba(255,255,255,0.015) 55%), rgba(12,19,33,0.4);
  border: 1px solid rgba(200,216,240,0.2); color: rgba(215,228,246,0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  transition: color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sky-wxbtn svg { width: 21px; height: 21px; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sky-wxbtn svg .f { fill: currentColor; stroke: none; }
.sky-wxbtn:hover { color: #fff; border-color: rgba(220,232,250,0.5); transform: translateY(-2px); }
.sky-wxbtn.on {
  color: #f5d97a; border-color: rgba(245,197,66,0.75);
  box-shadow: 0 0 16px rgba(245,197,66,0.3), inset 0 1px 0 rgba(255,255,255,0.14);
}
.sky-wx-div { width: 1px; height: 22px; background: rgba(200,216,240,0.18); margin: 0 2px; }
@keyframes skyDrop { from { opacity: 0; transform: translateX(-50%) translateY(-14px); } }
@keyframes skyDropM { from { opacity: 0; transform: translateY(-14px); } }

/* LIVE + ✓ — the dial's own bar, same glass grade as the weather keys */
.sky-dialbar {
  position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; pointer-events: auto;
}
.sky-livepill {
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, rgba(16,24,40,0.7), rgba(8,13,24,0.75));
  border: 1px solid rgba(200,216,240,0.28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: rgba(225,236,250,0.85);
  box-shadow: 0 8px 22px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.sky-livepill:hover { color: #fff; border-color: rgba(220,232,250,0.55); transform: translateY(-1px); }
.sky-livepill.on { color: #241a04; background: linear-gradient(180deg, #f5cf6b, #dfa843); border-color: #f5c542; box-shadow: 0 0 18px rgba(245,197,66,0.45), 0 8px 22px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.4); }
.sky-done {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(16,24,40,0.7), rgba(8,13,24,0.75));
  border: 1px solid rgba(245,216,140,0.45); color: #f5d97a; font-size: 14px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sky-done:hover { color: #fff; border-color: #f5c542; transform: translateY(-1px); box-shadow: 0 0 16px rgba(245,197,66,0.35), 0 8px 22px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.16); }



@keyframes skyRise { from { opacity: 0; transform: translateX(-50%) translateY(14px); } }

/* ── mobile ── */
@media (max-width: 640px) {
  #sky-orb { left: 16px; right: auto; bottom: 16px; }   /* Zo 0724: phones move the weather orb to the LEFT corner (was colliding with the roam's ⛶ / TUNE IN on the right) */
  /* lift the dial clear of the orb — at midnight the handle rides the arc's
     far right, straight into the orb's corner otherwise */
  /* the weather bar lies FLAT across the top — one full-width row, buttons
     spread evenly (no wrap, no second storey) */
  #sky-wxbar {
    top: 20px; left: 3vw; right: 3vw; transform: none;
    flex-wrap: nowrap; justify-content: space-evenly; gap: 4px;
    padding: 8px 6px; border-radius: 20px;
    animation-name: skyDropM;   /* the base drop keyframe re-centres via translateX — not here */
  }
  .sky-wxbtn { width: 38px; height: 38px; }
  #sky-dial { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  #sky-dial, #sky-wxbar { animation: none; }
  #sky-tint, #warp-canvas { transition: none; }
}