.welcome-clock { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; width: max-content; max-width: 100%; margin-top: 18px; padding: 10px 18px 10px 10px; border: 1px solid rgba(172,215,232,.35); border-radius: 18px; background: rgba(5,22,39,.72); box-shadow: 0 8px 24px rgba(0,0,0,.18); color: #f1f8ff; }
.clock-face { position: relative; flex: 0 0 86px; width: 86px; height: 86px; border: 3px solid #96b2c3; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #637887, #263f50); box-shadow: inset 0 0 0 3px #132e40, 0 3px 8px #0005; }
.clock-face span { position: absolute; font-size: 13px; line-height: 1; color: #eff6fa; }
.clock-twelve { top: 6px; left: 50%; transform: translateX(-50%); }.clock-three { right: 6px; top: 50%; transform: translateY(-50%); }.clock-six { bottom: 5px; left: 50%; transform: translateX(-50%); }.clock-nine { left: 6px; top: 50%; transform: translateY(-50%); }
.clock-hand { position: absolute; left: calc(50% - 1px); bottom: 50%; width: 2px; border-radius: 2px; transform-origin: bottom center; background: #e9f4fa; }.clock-hour { height: 22px; width: 3px; left: calc(50% - 1.5px); }.clock-minute { height: 29px; }.clock-second { height: 31px; width: 1px; background: #64dce7; }.clock-pin { position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #e6f5fb; }
.clock-readout { display: flex; flex-direction: column; gap: 5px; }.clock-readout time { font-size: clamp(22px, 2.1vw, 30px); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 1px; }.clock-readout span { font-size: 11px; color: #bfd9e7; }
@media (max-width: 480px) { .welcome-clock { gap: 12px; padding-right: 12px; }.clock-face { width: 74px; height: 74px; flex-basis: 74px; } }