/* 03:17 ROOM 01 refresh
   Portrait-first stage shared by desktop and mobile. */

#inGame.lab-layout {
  display: block;
  width: min(680px, calc(100% - 28px));
  max-width: 680px;
  margin: 0 auto;
  min-height: auto;
}

#inGame .lab-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 0 32px;
}

/* Inventory/sidebar is no longer part of ROOM 01. Keep the DOM hidden so the
   preserved puzzle engine can still update its legacy progress elements. */
#inGame .lab-side,
#inGame .sidebar-wing,
#inGame .sidebar-dim {
  display: none !important;
}

#labScene {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid #30414d;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(2, 8, 12, .03), rgba(2, 7, 11, .22)),
    url('/gameImgs/PlayerGame/file_000000005b6882069e14811f3d1529c7.png') center 18% / cover no-repeat;
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, .34),
    inset 0 -70px 100px rgba(0, 0, 0, .48),
    0 18px 46px rgba(0, 0, 0, .28);
}

#labScene::before,
#labScene::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#labScene::before {
  background:
    radial-gradient(circle at 16% 67%, rgba(255, 181, 83, .11), transparent 24%),
    radial-gradient(circle at 52% 20%, rgba(113, 199, 239, .06), transparent 30%),
    radial-gradient(ellipse at center, transparent 54%, rgba(0, 0, 0, .26) 100%);
}

#labScene::after {
  opacity: .11;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
}

#labScene > * {
  z-index: 2;
}

#labScene .lab-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 15% 68%, rgba(255, 177, 71, .12), transparent 22%);
}

/* The new artwork already contains these objects. */
#labScene .board,
#labScene .periodic,
#labScene .desk,
#labScene .exit-door {
  display: none !important;
}

/* Environmental inspection points. */
#labScene .hotspot {
  position: absolute;
  z-index: 5;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(207, 237, 255, .82);
  border-radius: 50%;
  background: rgba(4, 15, 24, .66);
  color: rgba(239, 249, 255, .92);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: .72;
  box-shadow: 0 0 0 3px rgba(5, 18, 28, .28), 0 0 10px rgba(139, 211, 255, .08);
  animation: room1Pulse 3s infinite;
  transition: opacity .16s ease, transform .16s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#labScene .hotspot:hover {
  opacity: 1;
  transform: scale(1.08);
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(5, 18, 28, .34), 0 0 15px rgba(154, 220, 255, .18);
}

#labScene .hotspot:active {
  transform: scale(.95);
}

@keyframes room1Pulse {
  50% { box-shadow: 0 0 0 5px rgba(5, 18, 28, 0), 0 0 12px rgba(139, 211, 255, .07); }
}

/* Portrait coordinates retuned from the annotated screenshot. */
#labScene .h-chart    { left: 8.3%; top: 32.0%; }
#labScene .h-photo    { left: 22.8%; top: 34.4%; }
#labScene .h-board    { left: 45.5%; top: 40.6%; }
#labScene .h-clock    { left: 71.3%; top: 39.1%; }
#labScene .h-desk     { left: 32.2%; top: 74.7%; }
#labScene .h-terminal { left: 25.7%; top: 70.9%; }
#labScene .h-trash    { left: 66.6%; top: 70.9%; }

/* Cabinet puzzles use numbered controls instead of magnifying glasses. */
#labScene .cab-spot {
  position: absolute;
  z-index: 6;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(179, 213, 233, .72);
  border-radius: 50%;
  background: rgba(6, 17, 25, .82);
  color: #d8ebf6;
  font: 800 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(4, 14, 21, .36), 0 0 11px rgba(115, 191, 231, .10);
  transition: transform .16s ease, border-color .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}

#labScene .cab-spot:hover {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: #f1fbff;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(4, 14, 21, .40), 0 0 16px rgba(139, 211, 255, .17);
}

#labScene .cab-spot:active {
  transform: translate(-50%, -50%) scale(.96);
}

/* 03/04 stay where they are; 01/02/05 follow the annotated targets. */
#labScene .cab-hotspot-1 { left: 77.9%; top: 58.6%; }
#labScene .cab-hotspot-2 { left: 86.0%; top: 58.6%; }
#labScene .cab-hotspot-3 { left: 79.0%; top: 66.6%; }
#labScene .cab-hotspot-4 { left: 86.2%; top: 67.9%; }
#labScene .cab-hotspot-5 { left: 57.6%; top: 71.3%; }

/* The original engine toggles .open after a cabinet is solved. */
#labScene .cab-spot.open {
  border-color: #67e28e;
  background: rgba(8, 43, 22, .88);
  color: #9bf3b6;
  box-shadow: 0 0 0 3px rgba(18, 83, 42, .34), 0 0 15px rgba(77, 222, 126, .28);
}

#inGame .narration {
  margin-top: 12px;
  border-color: #2d3d49;
  background: linear-gradient(180deg, rgba(7, 14, 20, .97), rgba(5, 10, 15, .98));
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

#inGame .game-actions {
  margin-top: 10px;
}

.bwing-confirm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.bwing-confirm button {
  min-height: 46px;
  border-radius: 7px;
  font-weight: 800;
  cursor: pointer;
}

.bwing-yes {
  border: 1px solid #2ea043;
  background: #238636;
  color: #fff;
}

.bwing-no {
  border: 1px solid #46515f;
  background: #161b22;
  color: #c9d1d9;
}

@media (max-width: 800px) {
  #inGame.lab-layout {
    width: 100%;
    max-width: none;
    padding: 0 10px;
  }

  #inGame .lab-main {
    padding: 10px 0 24px;
  }

  #labScene {
    aspect-ratio: 4 / 5;
    border-radius: 10px;
    background-position: center 18%;
  }

  #labScene .hotspot {
    width: 23px;
    height: 23px;
    font-size: 11px;
    box-shadow: 0 0 0 2px rgba(5, 18, 28, .32), 0 0 8px rgba(139, 211, 255, .08);
  }

  #labScene .cab-spot {
    width: 29px;
    height: 29px;
    font-size: 9px;
    box-shadow: 0 0 0 2px rgba(4, 14, 21, .34), 0 0 8px rgba(115, 191, 231, .08);
  }

  #inGame .narration {
    font-size: 13px;
  }
}