/* ============================================================
   SCENE LAYOUT
   Pixel art diorama: background + Minitel overlay + live screen
   Both images are 2400x1792, designed to composite together.
   ============================================================ */

:root {
  /* Screen cutout coordinates (% of the full 2400x1792 image) */
  /* Expanded to fill the transparent cutout fully with no gap */
  --screen-top: 9.0%;
  --screen-left: 19.8%;
  --screen-width: 60.4%;
  --screen-height: 62.5%;

  /* Native aspect ratio of both images */
  --scene-aspect: 2400 / 1792;
}

/* Full viewport scene */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0a0810;
}

/* ============================================================
   SCENE FRAME
   Both images and the screen share this coordinate space.
   Sized to cover the viewport while maintaining aspect ratio.
   ============================================================ */

.scene-frame {
  position: absolute;
  /* Cover the viewport, centered */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Always cover viewport while preserving aspect ratio */
  width: max(100vw, 100vh * (2400 / 1792));
  height: max(100vh, 100vw * (1792 / 2400));
}

/* ============================================================
   BACKGROUND: Pixel art French room
   ============================================================ */

.scene-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/images/scene-background.jpg') center / cover no-repeat;
  image-rendering: pixelated;
}

/* ============================================================
   MINITEL OVERLAY
   Pixel art terminal with transparent screen cutout
   ============================================================ */

.minitel-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url('../assets/images/minitel-overlay.png') center / cover no-repeat;
  image-rendering: pixelated;
}

/* ============================================================
   LIVE SCREEN
   Positioned to align with the transparent screen cutout
   ============================================================ */

.minitel-screen {
  position: absolute;
  top: var(--screen-top);
  left: var(--screen-left);
  width: var(--screen-width);
  height: var(--screen-height);
  z-index: 1;
  overflow: hidden;
  border-radius: 10px;
  background: #020202;
}

/* ============================================================
   DESK SURFACE (not needed -- it's in the background image)
   ============================================================ */

.desk-surface {
  display: none;
}

/* ============================================================
   FUNCTION KEYS
   Hover-reveal over the keyboard area of the pixel art
   ============================================================ */

/* Hidden on desktop — navigate via on-screen menu items or keyboard shortcuts.
   Mobile bottom bar is enabled in responsive.css */
.function-keys {
  display: none;
}