/* scenes/firstnight.css -- the beginner guide's day: a sky that follows the clock, stars at night, the clock itself. */
.gscene-firstnight .gscene-stage, .gscene-firstnight .gscroll-sticky { background: #0b1230; }
.gscene-firstnight .gscene-stage { height: clamp(380px, 64vh, 620px); }
.fn-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--fn-top, #3f86d8) 0%, var(--fn-bottom, #a9d8f5) 78%, var(--fn-bottom, #a9d8f5) 100%); }
.fn-stars { position: absolute; inset: 0 0 35% 0; opacity: var(--fn-stars, 0);
  background:
    radial-gradient(1.5px 1.5px at 8% 20%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 48%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 36% 12%, #dfe8ff 50%, transparent 51%), radial-gradient(1px 1px at 55% 34%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 40%, #cfe0ff 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 70%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 62% 62%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 93% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 45% 78%, #dfe8ff 50%, transparent 51%); }
.gscene-firstnight .stage-canvas { z-index: 1; }
.fn-hud { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: flex; align-items: center; gap: 10px; pointer-events: none;
  padding: 7px 14px 7px 8px; border-radius: 16px; background: rgba(8, 12, 24, 0.66); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; }
.fn-dial { position: relative; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none;
  background: conic-gradient(from 0deg, #ffd34d 0 62%, #1a2347 62% 95%, #f39a6b 95% 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25); }
.fn-dial i { position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; margin-top: -1px; background: #fff; border-radius: 2px; transform-origin: 0 50%; }
.fn-time { display: flex; flex-direction: column; line-height: 1.15; }
.fn-time b { font: 800 0.92rem var(--display); }
.fn-time small { font: 700 0.78rem var(--display); color: #d6def0; }
.fn-is-night .fn-time small { color: #ffcf8a; }
@media (max-width: 600px) { .fn-hud { left: 10px; bottom: 10px; padding: 5px 10px 5px 6px; } .fn-dial { width: 24px; height: 24px; } .fn-dial i { width: 10px; } }