/* demoscene-recomp - the demo pages: a DOS window round the picture, a control
 * panel, a status readout and the NFO. Loaded after bbs.css.
 *
 * THE PICTURE: 320x200 (or 640x200, 320x400) shown at 4:3, as a VGA monitor
 * showed it - every box here is 4:3 and the canvas is STRETCHED into it
 * (object-fit: fill, the default), pixelated, unfiltered. "CRT picture" (#stage.crt)
 * is the only thing that ever changes how it looks, and it is off by default. */
.deck {
  display: grid; gap: 1.2em 28px; padding: 1.4em 16px 1.6em;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "pic" "ctl" "stat" "nfo";
  max-width: 760px; margin: 0 auto;
}
.head { grid-area: head; } .pic { grid-area: pic; } .ctl { grid-area: ctl; } .stat { grid-area: stat; } .nfo { grid-area: nfo; }
.deck > .box { margin: 0; }
.ctl, .stat, .nfo { margin-top: .4em !important; }

/* canvas size outside fullscreen: the 4:3 box that fits the column (phone) or
   the space left of the side panel (desktop) */
canvas#screen, canvas.remaster { display: block; aspect-ratio: 4 / 3; image-rendering: pixelated; background: #000;
  width: calc(100vw - 32px); max-width: 100%; }
/* the AI Remaster's canvas (remaster.js) has the box's device pixels: drawn at
   that size, not scaled up */
canvas.remaster { image-rendering: auto; }
#stage canvas[hidden] { display: none !important; }
@media (min-width: 1000px) {
  .deck {
    max-width: none; align-items: start; justify-content: center;
    grid-template-columns: minmax(340px, 420px) auto;
    grid-template-areas: "head pic" "ctl pic" "stat pic" "nfo pic" ". pic";
    grid-template-rows: auto auto auto auto 1fr;
  }
  canvas#screen, canvas.remaster { width: min(calc(100vw - 420px - 28px - 32px), calc((100vh - 6em) * 4 / 3)); max-width: none; }
}

/* a phone held LANDSCAPE: the picture is exactly the visible screen's height
   with Safari's bars hidden (100lvh: fixed, so nothing resizes as the bars
   come and go), the 4:3 picture centred on black,
   and the page snaps to it - scroll it into view and it fits the screen */
@media (orientation: landscape) and (max-height: 540px) and (pointer: coarse) {
  html { scroll-snap-type: y proximity; }
  /* the black reaches both screen edges (out of the page's column), so no
     page background or stars show beside the picture */
  #stage { scroll-snap-align: start; width: 100vw; margin-left: calc(50% - 50vw); }
  canvas#screen, canvas.remaster { height: 100lvh; width: auto; max-width: 100%; margin: 0 auto; }
  /* the AI Remaster's canvas spans the screen's width: the engine letterboxes
     a 4:3 part on black itself, and draws its wide parts (the VR corridor,
     the chess game) across the whole screen */
  canvas.remaster { width: 100%; aspect-ratio: auto; }
}

/* the note a phone gets for ticking Fullscreen (unreal_web.js): a box in
   the page's look, centred over a dimmed page */
.fs-pop { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .6); }
.fs-pop[hidden] { display: none; }
.fs-pop .box { background: var(--page); max-width: 34em; margin: 0; }
.fs-pop .ok { text-align: right; }
.fs-pop button { font: inherit; color: inherit; background: none; border: 1px solid currentColor; padding: .2em 1.5ch; cursor: pointer; }
html[data-look="modern"] .fs-pop .box { background: var(--card); }
html[data-look="modern"] .fs-pop button { border-color: var(--edge); border-radius: 6px; background: var(--card2); padding: 6px 16px; }

/* ---- the picture: no frame round it, just the 4:3 picture on black */
.win { position: relative; }

/* the stage sits ABOVE the page CRT overlay (z-index 1000) */
#stage { position: relative; z-index: 1001; background: #000; }
#stage .tube { display: block; position: relative; }

/* ---- fullscreen: the STAGE, not the canvas (the browser forces a fullscreen
   element to fill the screen); the canvas is the largest 4:3 box that fits,
   centred on black. Unchanged from the plain page. */
#stage:fullscreen, #stage.max { display: flex; align-items: center; justify-content: center; background: #000; }
#stage:fullscreen canvas { width: min(100vw, calc(100vh * 4 / 3)); height: min(100vh, calc(100vw * 3 / 4)); aspect-ratio: auto; max-width: none; }
/* without the Fullscreen API (iPhone Safari): the stage covers the viewport */
#stage.max { position: fixed; inset: 0; z-index: 2000; }
#stage.max canvas { width: min(100vw, calc(100dvh * 4 / 3)); height: min(100dvh, calc(100vw * 3 / 4)); aspect-ratio: auto; max-width: none; }
body:has(#stage.max) { background: #000; overflow: hidden; }
/* the AI Remaster fills the whole screen in fullscreen: it letterboxes its
   4:3 scenes itself and draws the wide ones (VR, chess, ...) edge to edge */
#stage:fullscreen canvas.remaster { width: 100vw; height: 100vh; }
#stage.max canvas.remaster { width: 100vw; height: 100dvh; }

/* ---- CRT picture: OPT-IN (#crt), off by default ---------------------------
   scanlines (one per VGA line pair of a 200-line picture) and a soft phosphor
   bloom - on the picture only, no frame, corners or edge shading. */
#stage.crt .tube::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.32) 50%) 0 0 / 100% calc(100% / 200);
}
#stage.crt canvas { filter: brightness(1.18) saturate(1.12) contrast(1.04) blur(.35px); }

/* ---- side panel ----------------------------------------------------------- */
.head { text-align: center; }
.head pre.logo { --max: 1rem; display: inline-block; text-align: left; font-size: min(var(--max), calc((min(100vw, 420px) - 32px) / (var(--cols) * 0.5))); }
.head .sub { margin: .6em 0 0; }
.head .sub .k1 { margin: 0 .5ch; }

.ctl .rows { display: grid; gap: .8em; justify-items: start; }
.ctl .btn { font-size: 1rem; padding: .25em 1.5ch; }
.ctl .lbl { color: var(--w); margin-left: 1ch; }
.ctl .keys { color: var(--w0); }
.ctl .keys b { color: var(--y); font-weight: normal; }

/* the Section menu */
.sel { position: relative; display: inline-block; }
.sel select {
  font: inherit; appearance: none; -webkit-appearance: none; cursor: pointer;
  background: var(--k); color: var(--w); border: calc(1rem / 16) solid var(--c); border-image: linear-gradient(to right, var(--c) 0 6%, var(--c1) 6% 94%, var(--c) 94% 100%) 1; border-radius: 0;
  padding: .2em 3.5ch .2em 1ch; text-shadow: none;
}
.sel select:hover { background: var(--b); }
.sel select option { background: var(--k); color: var(--w0); }
.sel::after { content: "\25BC"; position: absolute; right: 1ch; top: 50%; transform: translateY(-50%); color: var(--w); pointer-events: none; }

/* the status line: a terminal readout */
.term { display: flex; flex-wrap: wrap; gap: 0 1ch; color: var(--g1); min-height: 2.5em; }
.term .pr { color: var(--w0); }
#status { color: var(--w0); font-size: 1rem; font-variant-numeric: tabular-nums; white-space: pre-line; min-height: 1.25em; word-break: break-word; margin-top: .6em; }

.nfo p { margin: .9em 0 0; }
.nfo .note { color: var(--w0); }
@media (max-width: 999px) { .head pre.logo { --max: .6rem; } .head .sub { margin-top: .4em; } }
@media (min-width: 1000px) { .head pre.logo { --max: 1rem; } }


/* ---- pause overlay (unreal_web.js): a tap on the picture pauses; the
   overlay lies on the picture with a camera button in its lower right */
.pause-ui { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .28); cursor: pointer; }
.pause-ui[hidden] { display: none; }
.pause-ui .pause-mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 700 clamp(28px, 6vw, 64px)/1 system-ui, sans-serif; letter-spacing: .1em; color: rgba(255, 255, 255, .85);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6); pointer-events: none;
}
.pause-ui button {
  position: absolute; display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; background: rgba(16, 16, 20, .75);
  color: #fff; cursor: pointer; font: 18px/1 system-ui, sans-serif;
}
.pause-ui button:hover, .pause-ui button:focus-visible { background: rgba(60, 60, 80, .9); outline: none; }
.pause-ui .shot { right: 12px; bottom: 12px; }
.pause-ui .copy { right: 64px; bottom: 12px; }
.pause-ui .unmax { right: 12px; top: 12px; display: none; }
#stage.max .pause-ui .unmax { display: grid; }

/* ---- the AI Remaster's loading bar (remaster.js), under the controls */
.rprog { margin-top: .8em; display: grid; gap: .3em; color: var(--w); }
.rprog[hidden] { display: none; }
.rprog .track { height: .5em; background: var(--b); border: calc(1rem / 16) solid var(--c); }
.rprog .fill { height: 100%; width: 0; background: var(--c1); }
html[data-look="modern"] .rprog { color: var(--fg); font-size: 14px; }
html[data-look="modern"] .rprog .track { height: 6px; border: 0; border-radius: 3px; background: var(--edge); overflow: hidden; }
html[data-look="modern"] .rprog .fill { background: var(--accent); transition: width .15s; }