/* Separate top-layer dialog: no selectors alter the table, cards or game controls. */
#maintenance-notice {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(480px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow: auto;
  padding: 32px;
  border: 2px solid var(--theme-metal, #d8b879);
  border-radius: 20px;
  background: var(--theme-deep, #492b19);
  color: var(--theme-light, #fff4cf);
  box-shadow: 0 24px 80px #0008, inset 0 0 0 5px #ffffff08;
  font: 16px/1.5 system-ui, sans-serif;
  text-align: center;
}
#maintenance-notice::backdrop { background: #07120ed9; }
#maintenance-notice .maintenance-eyebrow { margin: 0 32px 8px; font-size: 13px; color: var(--theme-muted, #ebd8b4); letter-spacing: .08em; }
#maintenance-notice h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.3; }
#maintenance-notice p { margin-block: 12px; }
#maintenance-notice .maintenance-count { display: flex; align-items: baseline; justify-content: center; gap: 8px; color: var(--theme-metal, #d8b879); }
#maintenance-notice .maintenance-count[hidden] { display: none; }
#maintenance-notice .maintenance-count strong { font: 700 64px/1.1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
#maintenance-notice .maintenance-context { color: var(--theme-muted, #ebd8b4); }
#maintenance-notice button { appearance: none; cursor: pointer; font: inherit; min-height: 44px; touch-action: manipulation; }
#maintenance-notice .maintenance-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; font-size: 26px; line-height: 1; }
#maintenance-notice .maintenance-action { display: block; width: 100%; margin-top: 20px; padding: 10px 20px; border: 1px solid var(--theme-metal, #d8b879); border-radius: 10px; background: var(--theme-light, #fff4cf); color: var(--theme-deep, #492b19); font-weight: 700; }
#maintenance-notice button:focus-visible { outline: 3px solid var(--theme-light, #fff4cf); outline-offset: 3px; }
#maintenance-notice button:active { opacity: .78; }
#maintenance-notice .maintenance-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-height: 450px) {
  #maintenance-notice { padding: 20px 32px; }
  #maintenance-notice .maintenance-eyebrow { margin-top: 0; }
  #maintenance-notice .maintenance-count strong { font-size: 48px; }
  #maintenance-notice .maintenance-action { margin-top: 12px; }
}