/* Full-screen scale texture — viewport-wide, not tied to 900px content columns. */
:root {
  --scale-bg-w: 688;
  --scale-bg-h: 1504;
  /* Vertical stretch hides status bar baked into scalebackground.jpg (screenshot source). */
  --scale-bg-stretch-y: 1.05;
}

html {
  margin: 0;
  padding: 0;
  min-height: 100%;
  isolation: auto !important;
  background-color: #0a0a0a;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

html,
body {
  width: 100%;
  max-width: 100%;
}

body {
  background-color: transparent !important;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #0a0a0a;
  background-image: url("/scalebackground.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: max(100%, calc(100dvh * var(--scale-bg-w) / var(--scale-bg-h))) auto;
  transform: scaleY(var(--scale-bg-stretch-y));
  transform-origin: center bottom;
}

/* Phone only: widen the scale texture ~20% (clipped — no horizontal page pan) */
@media (max-width: 768px) {
  body {
    touch-action: pan-y;
  }

  html::before {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: translateX(-50%) scaleX(1.2) scaleY(var(--scale-bg-stretch-y));
    transform-origin: center bottom;
    background-image: url("/scalebackground.jpg");
    background-size: max(100%, calc(100dvh * var(--scale-bg-w) / var(--scale-bg-h))) auto;
    background-position: center center;
  }
}