:root {
  --game-world-clock-height: calc(34px + env(safe-area-inset-top, 0px));
}

html[data-game-world-clock="active"] {
  scroll-padding-top: calc(var(--game-world-clock-height) + 12px);
}

/* The strip owns real layout space; it never floats over the first controls.
   Other sticky UI can use --game-world-clock-height as its top offset. */
.game-world-clock {
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 1200;
  display: block;
  flex: 0 0 auto;
  grid-column: 1 / -1;
  width: 100%;
  height: var(--game-world-clock-height);
  min-height: var(--game-world-clock-height);
  margin: 0;
  padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px));
  border: 0;
  border-bottom: 1px solid #d5ddd1;
  border-radius: 0;
  background: #f4f5ec;
  color: #365247;
  box-shadow: 0 1px 3px #25392e08;
  font: 500 12px/1.2 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  letter-spacing: normal;
  isolation: isolate;
}

.game-world-clock-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 33px;
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
}

.game-world-clock-symbol { flex: 0 0 15px; color: #877437; font: 18px/1 Georgia, serif; text-align: center; }
.game-world-clock[data-phase="night"] .game-world-clock-symbol { color: #607a97; }
.game-world-clock-label { flex: 0 0 auto; font-size: 11px; }
.game-world-clock-time { flex: 0 0 auto; color: #294739; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .035em; }
.game-world-clock-phase { flex: 0 0 auto; color: #4f6255; }
.game-world-clock-calendar { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #697566; }
.game-world-clock-calendar:not(:empty)::before { content: "·"; margin-right: 10px; }
.game-world-clock-season { flex: 0 0 auto; padding: 3px 7px; border-radius: 5px; background: #e6ebdc; color: #5c7051; font-size: 10px; }
.game-world-clock-season:empty { display: none; }
.game-world-clock-status { flex: 0 0 auto; color: #766343; font-size: 11px; }
.game-world-clock-status:empty { display: none; }
.game-world-clock[data-state="offline"] .game-world-clock-time,
.game-world-clock[data-state="reconnecting"] .game-world-clock-time { color: #73694e; }

@media (max-width: 700px) {
  .game-world-clock { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
  .game-world-clock-inner { gap: 8px; }
  .game-world-clock-calendar { display: none; }
}

@media (max-width: 420px) {
  .game-world-clock-inner { gap: 7px; }
  .game-world-clock-season { display: none; }
  .game-world-clock:not([data-state="live"]) .game-world-clock-phase { display: none; }
}

@media print {
  .game-world-clock { position: static; box-shadow: none; }
}

/* Existing game HUDs use viewport positioning; keep their controls below the
   shared strip. Dialogs retain their own scrolling headers and stacking. */
html[data-game-world-clock="active"] .mv-react-shell { top: calc(var(--game-world-clock-height) + 10px); }
html[data-game-world-clock="active"] :is(.mmo-map-stage, .mmo-battle-stage) { top: var(--game-world-clock-height); }
html[data-game-world-clock="active"] .mmo-map-stage .map-avatar-presence-hud { top: calc(var(--game-world-clock-height) + 12px); }
html[data-game-world-clock="active"] .mmo-map-time-hud { top: calc(var(--game-world-clock-height) + 52px); }
html[data-game-world-clock="active"] .mmo-battle-hud { top: calc(var(--game-world-clock-height) + 14px); }
html[data-game-world-clock="active"] :is(.avatar-maker-stage-panel, .avatar-studio-preview) { top: calc(var(--game-world-clock-height) + 12px); }
html[data-game-world-clock="active"] :is(.builder-pager, .sidebar) { top: var(--game-world-clock-height); }
html[data-game-world-clock="active"] .sidebar { height: calc(100vh - var(--game-world-clock-height)); }
html[data-game-world-clock="active"] :is(body.mmo-reset-body > main, body.has-react-shell.mmo-reset-body > main, .mmo-reset-stage, body.mmo-battle-body > main, .mmo-battle-page) { min-height: calc(100vh - var(--game-world-clock-height)); }
html[data-game-world-clock="active"] .game-stage-focus-body .pac-maze-stage { height: calc(100vh - var(--game-world-clock-height)); }
html[data-game-world-clock="active"] .house-time,
html[data-game-world-clock="embedded"] .game-world-clock { display: none; }
@media (max-width: 760px) {
  html[data-game-world-clock="active"] .avatar-studio-preview { top: calc(var(--game-world-clock-height) + 8px); }
}
@media (max-width: 720px) {
  html[data-game-world-clock="active"] .mv-react-shell { top: calc(var(--game-world-clock-height) + 8px); }
}
@media (max-width: 700px) {
  html[data-game-world-clock="active"] .mmo-battle-hud { top: calc(var(--game-world-clock-height) + 8px); }
}