/* V326 unified canvas: desktop 1600x900, landscape 844x390, portrait 390x844. */
:root {
  --jueshi-desktop-canvas-width: 1600px;
  --jueshi-desktop-canvas-height: 900px;
  --jueshi-landscape-canvas-width: 844px;
  --jueshi-landscape-canvas-height: 390px;
  --jueshi-portrait-canvas-width: 390px;
  --jueshi-portrait-canvas-height: 844px;
}

html[data-jueshi-layout="desktop"] body,
html[data-jueshi-layout="desktop"] .site-shell,
html[data-jueshi-layout="desktop"] .screen-stack {
  width: 100%;
  max-width: none;
  margin-inline: auto;
}

html[data-jueshi-layout="desktop"] .screen-stage {
  box-sizing: border-box;
  display: grid;
  place-items: center;
}

html[data-jueshi-layout="desktop"] .screen-stage > .screen-viewport-content {
  width: min(100vw, var(--jueshi-desktop-canvas-width), calc((100dvh - var(--section-nav-clearance, 80px)) * 16 / 9)) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-width: var(--jueshi-desktop-canvas-width) !important;
  max-height: var(--jueshi-desktop-canvas-height) !important;
  margin: auto !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
}

html[data-jueshi-layout="desktop"] .screen-stage > .jueshi-1340-section-frame {
  width: min(100vw, var(--jueshi-desktop-canvas-width), calc((100dvh - var(--section-nav-clearance, 80px)) * 16 / 9)) !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  max-width: var(--jueshi-desktop-canvas-width) !important;
  max-height: var(--jueshi-desktop-canvas-height) !important;
  margin: auto 0 !important;
  inset: var(--section-nav-clearance, 80px) auto 0 50% !important;
  transform: translateX(-50%) !important;
  transform-origin: 50% 50% !important;
}

html[data-jueshi-layout="phone-landscape"] {
  --phone-viewport-height: var(--jueshi-landscape-canvas-height);
  --section-canvas-width: var(--jueshi-landscape-canvas-width);
  width: var(--jueshi-landscape-canvas-width);
  min-width: var(--jueshi-landscape-canvas-width);
  overflow-x: hidden;
}

html[data-jueshi-layout="phone-landscape"] body,
html[data-jueshi-layout="phone-landscape"] .site-shell,
html[data-jueshi-layout="phone-landscape"] .screen-stack {
  box-sizing: border-box;
  width: var(--jueshi-landscape-canvas-width) !important;
  min-width: var(--jueshi-landscape-canvas-width) !important;
  max-width: var(--jueshi-landscape-canvas-width) !important;
  margin-inline: auto !important;
}

html[data-jueshi-layout="phone-landscape"] .screen-stage {
  box-sizing: border-box;
  width: var(--jueshi-landscape-canvas-width) !important;
  height: var(--jueshi-landscape-canvas-height) !important;
  min-height: var(--jueshi-landscape-canvas-height) !important;
  max-height: var(--jueshi-landscape-canvas-height) !important;
  margin-inline: auto !important;
}

html[data-jueshi-layout="phone-landscape"] .screen-stage > .screen-viewport-content,
html[data-jueshi-layout="phone-landscape"] .screen-stage > .jueshi-1340-section-frame {
  transform-origin: 50% 50% !important;
}

html[data-jueshi-layout="phone-portrait"] {
  --phone-viewport-height: var(--jueshi-portrait-canvas-height);
  --section-canvas-width: var(--jueshi-portrait-canvas-width);
  width: var(--jueshi-portrait-canvas-width);
  min-width: var(--jueshi-portrait-canvas-width);
  overflow-x: hidden;
}

html[data-jueshi-layout="phone-portrait"] body,
html[data-jueshi-layout="phone-portrait"] .site-shell,
html[data-jueshi-layout="phone-portrait"] .screen-stack {
  box-sizing: border-box;
  width: var(--jueshi-portrait-canvas-width) !important;
  min-width: var(--jueshi-portrait-canvas-width) !important;
  max-width: var(--jueshi-portrait-canvas-width) !important;
  margin-inline: auto !important;
}

html[data-jueshi-layout="phone-portrait"] .screen-stage {
  box-sizing: border-box;
  width: var(--jueshi-portrait-canvas-width) !important;
  height: var(--jueshi-portrait-canvas-height) !important;
  min-height: var(--jueshi-portrait-canvas-height) !important;
  max-height: var(--jueshi-portrait-canvas-height) !important;
  margin-inline: auto !important;
}

html[data-jueshi-layout="phone-portrait"] .screen-stage > .screen-viewport-content {
  transform-origin: 50% 50% !important;
}

@supports not (height: 100dvh) {
  html[data-jueshi-layout="desktop"] .screen-stage > .screen-viewport-content,
  html[data-jueshi-layout="desktop"] .screen-stage > .jueshi-1340-section-frame {
    width: min(100vw, var(--jueshi-desktop-canvas-width), calc((100vh - var(--section-nav-clearance, 80px)) * 16 / 9)) !important;
  }
}