/* ============================================================
   THE PENNY ENGINE — the (perfect) 2D slot machine, 2.5D.
   We do NOT use the 3D machine: it doubled the 2D one and drew
   a payline bar across the slots. Instead the real, untouched
   2D machine is lifted into the candlelit 3D room (its scene
   hides its own cabinet — see rooms3d/engine.mjs), so the warm
   room shows around the machine for depth, and nothing crosses
   the slots. Keep the 2D game exactly as it was.

   This file ONLY frames the machine into the scene — it builds
   a carved-wood alcove around the cabinet so it reads as a real
   object standing in the candlelit room, and grows it on desktop
   so it fills the view. It never touches the drums/lever/controls.
   ============================================================ */

/* only the room's flat outer background falls away, so the candlelit 3D room
   shows around the machine — the machine itself (cabinet, drums, lever, controls)
   stays whole and untouched, the way the 2D version was. */
body.room3d-engine #screen-engine .pe-room { background: transparent !important; }
body.room3d-engine #screen-engine .pe-canvas { display: block !important; }

/* the rules + ledger scrims become light glass so the warm room reads behind them */
body.room3d-engine #screen-engine .pe-explainer,
body.room3d-engine #screen-engine .pe-end {
  background: rgba(8, 6, 4, 0.55) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ============================================================
   2.5D FRAME — the machine stands IN the candlelit room.
   A built-out carved mahogany surround (the "frame") rings the
   cabinet with real depth, a warm candle rim catches its right
   edge, and a soft shadow grounds it on the floor of the scene.
   ============================================================ */
body.room3d-engine #screen-engine .pe-cab {
  /* lift it forward off the back wall a touch so the frame reads as 3D */
  position: relative;
  z-index: 1;
  /* the carved-wood frame is built out in concentric rings, then deep
     ambient-occlusion + a grounding drop, plus a warm candle bloom on the
     right side where the flame sits in the 3D scene. */
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 170, 0.16),
    inset 0 0 0 3px rgba(0, 0, 0, 0.5),
    /* ---- the built-out frame: dark reveal → mahogany rail → brass bead → outer shadowline ---- */
    0 0 0 7px rgba(0, 0, 0, 0.55),
    0 0 0 17px #2a180d,
    0 0 0 19px #5a3618,
    0 0 0 21px rgba(216, 180, 90, 0.28),
    0 0 0 24px #1d1109,
    /* ---- depth: the whole assembly lifts off the wall and casts down ---- */
    0 30px 70px rgba(0, 0, 0, 0.82),
    /* ---- warm candle bloom catching the right cheek of the frame ---- */
    22px 6px 90px rgba(255, 150, 60, 0.08) !important;
}

/* a faint warm halo bleeds onto the wall behind the frame — the candle's
   throw — so the cabinet feels seated in the room, not pasted on top */
body.room3d-engine #screen-engine .pe-cab::before {
  content: '';
  position: absolute;
  inset: -40px -54px -10px;
  z-index: -2;
  pointer-events: none;
  border-radius: 30px;
  background: radial-gradient(ellipse 70% 64% at 56% 40%, rgba(255, 168, 84, 0.10), rgba(255, 130, 50, 0.03) 52%, transparent 76%);
}

/* the cabinet casts a soft contact shadow onto the floor of the scene,
   so it stands in the room rather than floating */
body.room3d-engine #screen-engine .pe-cab::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -46px;
  width: 90%;
  height: 40px;
  transform: translateX(-50%);
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.28) 52%, transparent 74%);
  filter: blur(2px);
}

/* ---- DESKTOP: let the framed machine fill far more of the screen, but never
   so tall it clips its own controls. The cabinet's height tracks its width
   (the drums canvas is aspect-locked), so we cap the width by the height left
   over after the header — the machine grows to fill the room and stops. ---- */
@media (min-width: 760px) {
  /* size the machine to fill the height left under the shared bar, maximising
     width while the whole cabinet (marquee → base) still fits with no scroll */
  body.room3d-engine #screen-engine .pe-room {
    max-width: min(58rem, calc((100vh - 412px) * 1.62 + 190px));
    padding-bottom: 0.4rem;
  }
  body.room3d-engine #screen-engine .pe-cab {
    max-width: min(58rem, calc((100vh - 412px) * 1.62 + 190px));
  }
  /* the narration rides tight over the marquee so the machine owns the height */
  body.room3d-engine #screen-engine .pe-head { margin-bottom: 0.15rem; }
  body.room3d-engine #screen-engine .pe-boy { min-height: 1.1rem; font-size: 0.8rem; }
}