.arkride-global-clock {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 10000;
  width: min(166px, calc(100vw - 18px));
  user-select: none;
  font-family: "Roboto Mono", "Courier New", monospace;
}

.arkride-global-clock__shell {
  appearance: none;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.92);
  cursor: pointer;
  padding: 0;
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(234, 240, 248, 0.98), rgba(212, 223, 237, 0.97));
  box-shadow:
    11px 11px 22px rgba(160, 174, 194, 0.28),
    -10px -10px 19px rgba(255, 255, 255, 0.98),
    inset 5px 5px 10px rgba(205, 215, 228, 0.74),
    inset -5px -5px 10px rgba(255, 255, 255, 0.98);
  color: #172842;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-radius 0.18s ease;
}

.arkride-global-clock__shell:hover,
.arkride-global-clock__shell:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    13px 13px 24px rgba(157, 171, 191, 0.3),
    -10px -10px 19px rgba(255, 255, 255, 1),
    inset 5px 5px 10px rgba(205, 215, 228, 0.72),
    inset -5px -5px 10px rgba(255, 255, 255, 0.99);
}

.arkride-global-clock__shell:active {
  transform: translateY(1px);
  box-shadow:
    inset 5px 5px 10px rgba(193, 204, 220, 0.84),
    inset -5px -5px 10px rgba(255, 255, 255, 0.99);
}

.arkride-global-clock__compact,
.arkride-global-clock__expanded {
  position: relative;
  overflow: hidden;
  display: grid;
  justify-items: center;
  text-align: center;
  border-radius: inherit;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), transparent 40%),
    linear-gradient(160deg, rgba(243, 247, 252, 0.98), rgba(221, 230, 241, 0.98));
}

.arkride-global-clock__compact::before,
.arkride-global-clock__expanded::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.arkride-global-clock__compact {
  gap: 2px;
  padding: 10px 11px 8px;
}

.arkride-global-clock__expanded {
  gap: 6px;
  padding: 13px 11px 11px;
}

.arkride-global-clock__label {
  position: relative;
  z-index: 1;
  font-size: 0.46rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6f84a1;
  text-shadow: none;
}

.arkride-global-clock__time {
  position: relative;
  z-index: 1;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #16263f;
  text-shadow: none;
}

.arkride-global-clock__compact .arkride-global-clock__time {
  font-size: 0.82rem;
}

.arkride-global-clock__expanded .arkride-global-clock__time {
  font-size: 0.8rem;
}

.arkride-global-clock__date {
  position: relative;
  z-index: 1;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #607592;
  text-shadow: none;
}

.arkride-global-clock__dial {
  position: relative;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(236, 242, 249, 0.98), rgba(214, 224, 237, 0.96));
  box-shadow:
    inset 6px 6px 10px rgba(203, 214, 228, 0.78),
    inset -6px -6px 10px rgba(255, 255, 255, 0.98),
    0 6px 13px rgba(123, 143, 170, 0.18);
}

.arkride-global-clock__dial::before,
.arkride-global-clock__dial::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center bottom;
  background: #6d83a4;
  border-radius: 999px;
}

.arkride-global-clock__dial::before {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -92%) rotate(18deg);
}

.arkride-global-clock__dial::after {
  width: 2px;
  height: 8px;
  transform: translate(-50%, -86%) rotate(102deg);
}

.arkride-global-clock__dial-core {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(145deg, #5f77a0, #8ba2c7);
  box-shadow:
    0 0 0 3px rgba(235, 241, 248, 0.9),
    0 3px 6px rgba(110, 132, 162, 0.18);
}

.arkride-global-clock__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 0.8rem;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7d91ae;
}

.arkride-global-clock.is-online .arkride-global-clock__meta::before,
.arkride-global-clock.is-offline .arkride-global-clock__meta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.64);
}

.arkride-global-clock.is-online .arkride-global-clock__meta::before {
  background: #5cc78f;
}

.arkride-global-clock.is-offline .arkride-global-clock__meta::before {
  background: #ff8a7a;
}

.arkride-global-clock__toggle-glyph {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(240, 245, 251, 0.96), rgba(221, 230, 241, 0.98));
  box-shadow:
    4px 4px 8px rgba(174, 187, 205, 0.24),
    -3px -3px 6px rgba(255, 255, 255, 0.96),
    inset 2px 2px 5px rgba(209, 219, 232, 0.72),
    inset -2px -2px 5px rgba(255, 255, 255, 0.98);
}

.arkride-global-clock__toggle-glyph::before,
.arkride-global-clock__toggle-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #607592;
}

.arkride-global-clock__toggle-glyph::before {
  width: 8px;
  height: 2px;
}

.arkride-global-clock__toggle-glyph::after {
  width: 2px;
  height: 8px;
}

.arkride-global-clock.is-expanded .arkride-global-clock__toggle-glyph::after {
  opacity: 0;
}

.arkride-global-clock.is-collapsed .arkride-global-clock__compact {
  display: grid;
}

.arkride-global-clock.is-collapsed .arkride-global-clock__expanded {
  display: none;
}

.arkride-global-clock.is-expanded .arkride-global-clock__compact {
  display: none;
}

.arkride-global-clock.is-expanded .arkride-global-clock__expanded {
  display: grid;
}

.arkride-global-clock.is-expanded .arkride-global-clock__shell {
  border-radius: 22px;
}

@media (max-width: 640px) {
  .arkride-global-clock {
    top: 10px;
    right: 10px;
    width: min(147px, calc(100vw - 14px));
  }

  .arkride-global-clock__compact {
    padding: 9px 10px 7px;
  }

  .arkride-global-clock__expanded {
    padding: 11px 10px 10px;
  }

  .arkride-global-clock__compact .arkride-global-clock__time {
    font-size: 0.76rem;
  }
}