/* ===================================================================
   CINEMA SLAUGHTER — RESOLUTION FRAME (fixed-canvas letterbox scaler)
   The game can run at a locked logical resolution that scales to fit any
   window, with film-black bars filling the rest — the authentic PC-game
   framebuffer feel. "Fit Window" removes the lock and fills fluidly.
   Loaded LAST so its layout overrides win.
   =================================================================== */

/* frame = the whole window; stage = the (optionally fixed) game canvas */
#res-frame {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: #000;
  /* subtle projector falloff on the letterbox so bars don't read as dead space */
  background-image: radial-gradient(120% 120% at 50% 50%, #0a090b 0%, #000 78%);
}
#res-stage { position: absolute; inset: 0; width: 100%; height: 100%; container-type: size; }
#res-stage > #root, #res-frame > #root { height: 100%; }

/* ---- LOCKED: fixed pixel canvas, centered + scaled by resolution.js ---- */
body.res-locked #res-stage {
  inset: auto; left: 50%; top: 50%;
  transform-origin: center center;
  /* the bezel that separates canvas from the black bars */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blood, #c91414) 30%, #000),
              0 40px 120px -30px rgba(0,0,0,.9);
}
body.res-locked #root { height: 100%; }
/* under lock the app fills the fixed stage instead of the live viewport */
body.res-locked .cs-root { height: 100%; min-height: 0; }
/* menus can exceed the frame — let them scroll INSIDE the canvas, not letterbox */
body.res-locked .menu-root { height: 100%; min-height: 0; overflow-y: auto; }

/* ---- Options › Display: resolution segmented control ---- */
.res-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.res-seg button {
  font-family: 'Space Mono', monospace; font-size:calc((12px) * var(--text-scale,1)); letter-spacing: .06em;
  padding: 8px 12px; border-radius: 4px; color: color-mix(in srgb, var(--bone) 70%, transparent);
  background: rgba(0,0,0,.34); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bone) 16%, transparent);
  transition: background .12s, color .12s, box-shadow .12s, transform .08s; cursor: pointer;
}
.res-seg button:hover { color: var(--bone); box-shadow: inset 0 0 0 1px var(--blood); }
.res-seg button:active { transform: translateY(1px); }
.res-seg button.on {
  color: var(--ink); background: var(--chroma-c);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--chroma-c) 55%, #000);
}
.res-seg button .rs-sub { display: block; font-size:calc((9px) * var(--text-scale,1)); letter-spacing: .04em; opacity: .7; margin-top: 2px; }