html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
@supports (height: 100dvh) {
  html, body { height: 100dvh; }   /* track the mobile toolbar collapse */
}
canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  touch-action: none;   /* not inherited — stop double-tap zoom on the canvas */
}

/* Plain mode (phones / portrait / image missing): the wrappers vanish and the
   canvas centers in the window, exactly the pre-cabinet layout. */
#cab {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#cab-screen { display: contents; }
#crt-fx { display: none; }

/* Cabinet mode: #cab is JS-sized to cover the viewport with the photo; the
   glass is a percentage-positioned child; the canvas centers on the glass.
   Only the matching rule's url() is ever fetched, so each device downloads
   one photo. Keep these paths in step with CABINETS in src/cabinet.js. */
body.cab-on #cab {
  inset: auto;
  background-image: url('cab.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* portrait windows (phones, tablets held upright) get the vertical cabinet */
body.cab-on.cab-tall #cab { background-image: url('cab-portrait.webp'); }
/* fractional glass fit rides the K× prescale; bilinear beats pixelated there */
body.cab-on canvas { image-rendering: auto; }
body.cab-on #cab-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: hidden;
  border-radius: 4% / 3%;
  /* powered-CRT glass: darken the photo's off-glass around the raster */
  background: radial-gradient(ellipse at 50% 50%,
    rgba(2, 2, 6, 0.92) 55%, rgba(4, 4, 10, 0.78) 100%);
  box-shadow: 0 0 32px 6px rgba(90, 110, 255, 0.10);
}
body.cab-on #crt-fx {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0, 0, 0, 0.18) 2px, rgba(0, 0, 0, 0.18) 4px
  );
  border-radius: inherit;
}
body.cab-on #crt-fx::before {   /* glass inner shadow */
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 14px 6px rgba(0, 0, 0, 0.8),
              inset 0 0 36px 14px rgba(0, 0, 0, 0.45);
  border-radius: inherit;
}
body.cab-on #crt-fx::after {    /* soft glare high on the glass */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 75% 45% at 38% 22%,
    rgba(255, 255, 255, 0.10) 0%, transparent 65%
  );
  border-radius: inherit;
}