/* ==========================================================================
   1. GLOBAL SYSTEM PROPERTIES AND VARIABLES
   ========================================================================== */
:root {
  --backrooms-yellow: #e4e6a8;
  --shadow-olive: #5c5531;
  --carpet-brown: #baa977; /* Classic damp warehouse carpet */
  --wall-darker: #dbdda0;
  --ceiling-panels: #cbd199;
  --text-dark: #2b2814;
  --cube-size: 600px; /* Defining locked spatial bounds for a perfect box structure */
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #020202;
  overflow-x: hidden;
  font-family: monospace;
}

/* ==========================================================================
   2. VIEWPORT CAMERA FRAME AND SEAMLESS CUBE ENGINE
   ========================================================================== */
.viewport-camera {
  width: 100vw;
  min-height: 100vh;
  perspective: 900px;
  perspective-origin: 50% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* Container locking the panels together via shared Z dimensions */
.room-3d {
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0px);
  will-change: transform;
}

/* Base style rules mapping all surfaces perfectly flush */
.surface {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  box-sizing: border-box;
  padding: 50px;
  background-color: var(--backrooms-yellow);
  border: 4px solid var(--shadow-olive);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.75); /* Seals corner seams visually */
  color: var(--text-dark);
}

/* ==========================================================================
   3. SEAMLESS GEOMETRY MAPS (A PERFECT CLOSED CUBE)
   ========================================================================== */
/* BACK WALL - Flat plate pushed to rear limit */
.wall-back {
  transform: translateZ(-300px); /* Exactly half of cube-size */
}

/* LEFT WALL - Rotated inward and translated flush along left side */
.wall-left {
  transform: rotateY(90deg) translateZ(-300px);
}

/* RIGHT WALL - Rotated inward and translated flush along right side */
.wall-right {
  transform: rotateY(-90deg) translateZ(-300px);
}

/* CEILING - Flipped flat and pushed upward perfectly */
.ceiling {
  background-color: var(--ceiling-panels);
  transform: rotateX(-90deg) translateZ(-300px);
}

/* FLOOR - Flipped flat and pushed downward perfectly */
.floor {
  background-color: var(--carpet-brown);
  transform: rotateX(90deg) translateZ(-300px);
}

/* ==========================================================================
   4. INTERIOR COMPONENTS AND 3D SWING DOORWAY SYSTEM
   ========================================================================== */
/* The Door Frame housing the portals */
.door-frame {
  position: relative;
  width: 160px;
  height: 240px;
  background-color: #0c0d0a; /* Dark abyss behind opened panels */
  border: 3px solid var(--shadow-olive);
  transform-style: preserve-3d;
  cursor: pointer;
  margin-top: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* The actual moveable Door Leaf swinging inside 3D space */
.door-leaf {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #cdd194;
  border: 2px solid #55502c;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
  z-index: 2;
  
  /* CRUCIAL: Anchors hinge point along left edge */
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Destination label text visible only when door leaf clears away */
.portal-destination {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff3333;
  font-weight: bold;
  font-size: 1.1rem;
  z-index: 1;
}

/* TRIGGER STATE: Swings door open 115 degrees inward on click interaction */
.door-frame.open .door-leaf {
  transform: rotateY(-115deg);
}

.portal-glitch {
  font-size: 0.85rem;
  font-weight: bold;
  letter-spacing: 1px;
}

/* ==========================================================================
   5. STANDARD TEXT GRAPHICS & LIGHT FIXTURES
   ========================================================================== */
.warning-text {
  font-size: 1.4rem;
  font-weight: bold;
  color: #7a2222;
  margin-bottom: 15px;
}

.rec-indicator {
  color: #ff0000;
  font-weight: bold;
  margin: 15px 0;
  animation: pulse 2s infinite;
}

.movement-hint {
  margin-top: 30px; 
  font-size: 0.8rem; 
  opacity: 0.7; 
  color: #bb1515; 
  text-transform: uppercase;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.wall-right ul { list-style-type: none; padding: 0; margin: 0; }
.wall-right li { margin: 10px 0; }
.wall-right a {
  color: #1a5c5a;
  text-decoration: none;
  font-weight: bold;
  border-bottom: 1px dashed var(--text-dark);
}
.wall-right a:hover { color: #7a2222; }

.light-fixture {
  position: absolute;
  top: 40%;
  left: 20%;
  width: 90px;
  height: 18px;
  background-color: #fffde0;
  box-shadow: 0 0 30px #fffee3, inset 0 0 4px #000;
  border-radius: 2px;
  animation: lightFlicker 7s infinite;
}

@keyframes lightFlicker {
  0%, 93%, 97%, 100% { background-color: #fffde0; box-shadow: 0 0 30px #fffee3; }
  94%, 96% { background-color: #4a493b; box-shadow: none; }
}

.vhs-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
  z-index: 9999;
}