/* /demo/ — a 320x200 VGA-style playfield scaled to the viewport. No dependencies. */

/* Mirror the notch/home-bar insets into custom properties so main.js can read
   them back (getComputedStyle) and fit the canvas inside the safe area on touch.
   With viewport-fit=cover the field reaches the screen edges; these put the safe
   margins back. Off notched devices env(...) is 0, so nothing changes. */
:root {
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #05060a;
  color: #d7d7d7;
  font-family: ui-monospace, "Courier New", Courier, monospace;
  /* The demo owns the viewport; stop the browser from scrolling or zooming. */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* The stage centres the canvas; the integer physical-pixel scale in main.js
   (via scale.js) sizes it, so the leftover viewport is letterboxed by this flex
   centring - black bars like a monitor. Tiny screens fall back to fractional. */
#stage {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keep the flex-centred canvas clear of the notch/home bar. main.js already
     sizes the canvas to the visible area minus these insets on touch, so the
     padding just recentres it inside the safe zone; on non-notched screens the
     insets are 0. */
  padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom)
    var(--safe-area-left);
}

/* The backing store stays 320x200; main.js sets the CSS size. pixelated (with
   crisp-edges as the older-browser fallback) keeps the upscale nearest-neighbour
   instead of the smooth default. */
#screen {
  display: block;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* CRT overlay wrapper (issue #191). Sized to the canvas by main.js (it sets both
   the canvas and this wrapper's CSS size), so the effect painted on ::after
   coincides with the picture. line-height:0 drops the inline gap under the
   canvas; overflow:hidden lets the rounded corners clip the square canvas. */
#screen-wrap {
  position: relative;
  display: block;
  line-height: 0;
  border-radius: clamp(6px, 1.6vmin, 18px);
  overflow: hidden;
}

/* The tube imitation, laid OVER the canvas as a separate layer (not baked into
   the frame - screen.js stays untouched, image-rendering: pixelated on the canvas
   is unaffected). Three cheap, static gradients plus an inset shadow:
     - scanlines: one dark band per buffer row. --crt-period is the CSS height of
       one row (computeCrtLayer in crt.js), set by main.js's fit() at every scale,
       so the bands stay aligned to the 320x200 grid. Default 3px until JS runs.
     - vignette: a radial darkening toward the corners.
     - glow: a faint light bloom at the centre and an inset shadow for the tube
       edge. pointer-events:none so clicks/touches still reach the canvas. */
#screen-wrap.crt-on::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1; /* above the canvas, below #controls (z-index 20) */
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0) calc(var(--crt-period, 3px) * 0.5),
      rgba(0, 0, 0, 0.26) calc(var(--crt-period, 3px) * 0.5),
      rgba(0, 0, 0, 0.26) var(--crt-period, 3px)
    ),
    radial-gradient(
      120% 120% at 50% 50%,
      rgba(0, 0, 0, 0) 55%,
      rgba(0, 0, 0, 0.28) 82%,
      rgba(0, 0, 0, 0.6) 100%
    ),
    radial-gradient(
      80% 60% at 50% 42%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 60%
    );
  box-shadow: inset 0 0 clamp(18px, 5vmin, 54px) rgba(0, 0, 0, 0.5);
}

/* CSS fullscreen fallback for browsers without element requestFullscreen (iOS
   Safari): pin the stage over the whole viewport. main.js toggles this class on
   the same control that drives the native Fullscreen API elsewhere. dvw/dvh
   track the dynamic viewport so mobile browser chrome does not clip it. */
#stage.fs {
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  z-index: 10;
  background: #000;
}

/* Controls, parked in the top-right corner clear of the canvas. Touch-accessible
   (large hit targets), and equally usable with a mouse - no device sniffing. */
#controls {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  gap: 8px;
  /* Sit clear of the top/right safe-area insets so the notch or rounded corner
     never overlaps a button (desktop insets are 0). */
  padding: calc(12px + var(--safe-area-top))
    calc(clamp(12px, 4vw, 40px) + var(--safe-area-right)) 12px 12px;
  z-index: 20; /* above the CSS-fullscreen stage */
}

/* device.js/main.js set the `hidden` attribute on #controls for touch phones;
   make sure that wins over the flex display above. */
#controls[hidden] {
  display: none;
}

#controls button {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #e9e9e9;
  background: rgba(30, 34, 44, 0.6);
  border: 2px solid rgba(190, 200, 220, 0.35);
  border-radius: 10px;
  min-width: 64px;
  min-height: 44px;
  cursor: pointer;
}

#controls button:active {
  background: rgba(120, 130, 150, 0.75);
  transform: translateY(1px);
}