:root {
  --demo-viewport-height: 100vh;
  --demo-nav-height: calc(40px + env(safe-area-inset-top, 0px));
  --demo-safe-bottom: env(safe-area-inset-bottom, 0px);
  --demo-game-height: calc(var(--demo-viewport-height) - var(--demo-nav-height) - var(--demo-safe-bottom));
}
@supports (height: 100dvh) {
  :root { --demo-viewport-height: 100dvh; }
}
.demo-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(40px + env(safe-area-inset-top, 0px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
  overflow-x: auto;
  background: #181019f2;
  color: #d9c3cc;
  font: 11px/1.4 -apple-system, BlinkMacSystemFont, sans-serif;
  backdrop-filter: blur(8px);
}
.demo-topbar a { color: #efb2c4; text-decoration: none; white-space: nowrap; padding-block: 4px; }
.demo-topbar a:focus-visible { outline: 2px solid #ffb1bf; outline-offset: 2px; }
/* Decorative overflow must never become a scroll offset when a control receives focus. */
html[data-demo-layout] #stage,
html[data-demo-layout] #game-shell { overflow: clip; }
html[data-demo-layout="game"] { overflow: clip; }
html[data-demo-layout="game"] body {
  display: flex;
  justify-content: center;
  height: var(--demo-viewport-height);
  overflow: clip;
  padding: var(--demo-nav-height) env(safe-area-inset-right, 0px) var(--demo-safe-bottom) env(safe-area-inset-left, 0px);
}
html[data-demo-layout="game"] #game-shell {
  flex: none;
  width: min(100%, calc(var(--demo-game-height) * .5625));
  height: 100%;
  margin: 0 auto;
}
@media (orientation: landscape) and (max-height: 500px) {
  html[data-demo-layout="game"] #game-shell { width: 100%; }
}
html[data-demo-layout="game"] #game-shell:fullscreen { width: 100vw; height: 100dvh; }
/* The game locks the root scroll; showcase pages must restore the document scroller. */
html[data-demo-layout="showcase"] {
  height: auto;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  scroll-padding-top: calc(var(--demo-nav-height) + 12px);
}
html[data-demo-layout="showcase"] body {
  height: auto;
  min-height: var(--demo-viewport-height);
  overflow: visible;
}
html[data-demo-layout="showcase"] .preview-layout {
  padding-top: calc(var(--demo-nav-height) + 24px);
  padding-bottom: calc(24px + var(--demo-safe-bottom));
  padding-left: max(28px, env(safe-area-inset-left, 0px));
  padding-right: max(28px, env(safe-area-inset-right, 0px));
}
@media (max-width: 700px) {
  html[data-demo-layout="showcase"] .preview-layout {
    padding-top: calc(var(--demo-nav-height) + 20px);
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  html[data-demo-layout="showcase"] #game-shell {
    width: min(100%, 337px, calc((var(--demo-game-height) - 24px) * .5625));
  }
}
@media (max-width: 360px) { .demo-topbar { gap: 8px; font-size: 10px; } }