/* ============================================================
   BLACKWOOD MANOR — Player 1: The Séance Parlor
   The room art (assets/img/p1-bg.jpg) already contains the clock, the
   cabinet's blank medallions, the scale's trinkets, the cipher wheel and
   the fireplace as real photographed props. Everything below is a thin,
   precisely-positioned overlay: hands, glyph icons, hotspots and readouts.
   ============================================================ */

.p1 .room {
  background: url("../img/p1-bg.jpg") center / cover no-repeat, #140d16;
}

/* ---------- clock: hands + digital controls overlaid on the real clock face ---------- */
.clock-hands {
  position: absolute; left: 217px; top: 16px; width: 296px; height: 296px;
  pointer-events: none;
}
.clock-hands svg { width: 100%; height: 100%; }
.hand { stroke: #241a12; stroke-width: 5; stroke-linecap: round; transform-origin: 148px 148px; transition: transform .3s ease; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
.minute-hand { stroke-width: 3.5; }
.hub { fill: #241a12; }

.clock-controls {
  position: absolute; left: 235px; top: 328px; width: 265px;
  display: flex; justify-content: center; gap: 20px;
}
.clock-group { text-align: center; }
.clock-label { display: block; font-size: 10px; letter-spacing: .2em; color: var(--wood-300); margin-bottom: 3px; }
.clock-readout {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--glow-amber);
  text-shadow: 0 0 10px rgba(242,177,84,.7);
  background: rgba(8, 5, 3, .82);
  border-radius: 5px;
  border: 1px solid #000;
  padding: 2px 0;
  width: 62px;
  margin: 0 auto 6px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.9);
}
.clock-btns { display: flex; gap: 5px; justify-content: center; }
.clock-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 7px;
  color: #ece3d2;
  background: radial-gradient(circle at 35% 30%, #5a4a60, #201a26 80%);
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow: 0 3px 0 #08060a, inset 0 1px 1px rgba(255,255,255,.12);
  cursor: pointer;
}
.clock-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #08060a; }
.clock-btn:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; }

.clock-note { position: absolute; left: 245px; top: 403px; width: 160px; padding: 6px 8px; text-align: center; }
.clock-note-label { display: block; font-size: 9px; letter-spacing: .12em; font-style: italic; color: var(--wood-300); margin-bottom: 3px; }
.cipher-strip { font-family: var(--font-mono); font-size: 15px; letter-spacing: .05em; }

/* ---------- spirit cabinet: glyph icons over the blank carved medallions ---------- */
.symbol-lock { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.glyph-slot {
  position: absolute;
  top: 139px;
  width: 88px; height: 88px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .2s ease;
}
.glyph-slot:nth-child(1) { left: 752px; }
.glyph-slot:nth-child(2) { left: 839px; }
.glyph-slot:nth-child(3) { left: 926px; }
.glyph-slot:nth-child(4) { left: 1013px; }
.glyph-slot:hover { box-shadow: inset 0 0 0 3px rgba(242,177,84,.35); }
.glyph-slot .glyph { width: 54px; height: 54px; fill: none; stroke: #e4d4a8; stroke-width: 3; opacity: .95; filter: drop-shadow(0 0 5px rgba(0,0,0,.85)); }
.symbol-lock.solved .glyph-slot { box-shadow: inset 0 0 0 3px rgba(89,255,156,.55); }
.symbol-lock.solved .glyph { stroke: var(--glow-green); filter: drop-shadow(0 0 6px rgba(89,255,156,.7)); }

.diary-note { position: absolute; left: 415px; top: 428px; width: 290px; padding: 10px 16px 8px; text-align: center; }
.diary-title { font-weight: 700; letter-spacing: .16em; font-size: 12px; margin-bottom: 6px; }
.candle-diagram { display: flex; justify-content: center; gap: 7px; margin-bottom: 6px; }
.candle-diagram .f {
  width: 21px; height: 38px; border-radius: 3px;
  border: 2px solid #6b5f45;
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--font-mono); font-size: 8px;
  padding-bottom: 2px;
  color: #6b5f45;
  background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(107,95,69,.15) 4px 8px);
}
.candle-diagram .f.hot {
  background: #c0392b; border-color: #7e2418; color: #ffe9d8;
  box-shadow: inset 0 0 8px rgba(0,0,0,.35);
}
.diary-note-caption { font-size: 10px; font-style: italic; opacity: .75; }

/* ---------- weighing scale: invisible hotspots over the baked trinkets ---------- */
.scale-readout {
  position: absolute; left: 10px; top: 250px; width: 130px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--glow-amber); text-shadow: 0 0 6px rgba(0,0,0,.8);
  text-align: center;
}
.trinket {
  position: absolute; cursor: pointer; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(242,177,84,0);
  transition: box-shadow .2s ease, background .2s ease;
}
.trinket:hover { background: rgba(242,177,84,.08); }
.trinket.on { background: rgba(242,177,84,.14); box-shadow: 0 0 22px 6px rgba(242,177,84,.55); }
.trinket-key      { left: 335px; top: 592px; width: 130px; height: 62px; }
.trinket-locket   { left: 158px; top: 572px; width: 148px; height: 82px; }
.trinket-bell     { left: 358px; top: 483px; width: 92px;  height: 112px; }
.trinket-raven    { left: 262px; top: 500px; width: 96px;  height: 82px; }
.trinket-skull    { left: 18px;  top: 542px; width: 122px; height: 120px; }

.drawer-note { position: absolute; left: 8px; top: 645px; width: 155px; padding: 8px 10px 6px; text-align: center; }
.drawer-title { font-weight: 700; letter-spacing: .12em; font-size: 10px; margin-bottom: 4px; }
.drawer-code { font-family: var(--font-mono); font-size: 18px; letter-spacing: .22em; margin-bottom: 3px; }
.drawer-note-caption { font-size: 9px; font-style: italic; opacity: .75; }

/* ---------- ghost alphabet wheel: readouts placed on/near the baked brass disc ---------- */
.cipher-note { position: absolute; left: 925px; top: 490px; width: 135px; padding: 7px 10px; text-align: center; }
.cipher-note-label { display: block; font-size: 8.5px; letter-spacing: .1em; font-style: italic; color: var(--wood-300); margin-bottom: 3px; }
.wheel-ciphertext { font-family: var(--font-mono); font-size: 19px; letter-spacing: .16em; }

.wheel-controls {
  position: absolute; left: 1063px; top: 535px; width: 135px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.wheel-shift-readout { font-family: var(--font-mono); font-size: 11px; color: var(--glow-amber); letter-spacing: .06em; text-shadow: 0 0 6px rgba(0,0,0,.9); }
.wheel-decoded {
  position: absolute; left: 1063px; top: 568px; width: 135px;
  text-align: center;
  font-family: var(--font-mono); font-size: 16px; letter-spacing: .14em;
  color: var(--glow-green); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(89,255,156,.6);
}

.final-note { position: absolute; left: 562px; top: 585px; width: 175px; padding: 8px 12px; text-align: center; }
.final-word-note { font-family: var(--font-mono); font-size: 17px; letter-spacing: .2em; margin-bottom: 3px; color: #ffd9a0; text-shadow: 0 0 10px rgba(255,179,71,.8); }
.final-note-caption { font-size: 9px; font-style: italic; color: #cfc3d2; }
.final-note.revealed { background: none; box-shadow: none; }

/* paper notes read clearly against the dark photo without looking like flat cards */
.p1 .paper-note {
  color: var(--paper-ink);
  background: var(--paper);
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(0,0,0,.6);
  transform: rotate(var(--note-tilt, -2deg));
}
.p1 .cipher-note, .p1 .clock-note { transform: rotate(var(--note-tilt, 0deg)); }
.final-note.revealed .final-word-note,
.final-note.revealed .final-note-caption { color: #ffd9a0; text-shadow: 0 2px 4px rgba(0,0,0,.9); }
.final-note.revealed { background: transparent; box-shadow: none; }

/* ---------- keypad: a physical puzzle box sitting on the table ---------- */
.p1 .keypad-wrap { left: 742px; top: 495px; width: 178px; }
.p1 .keypad {
  background: linear-gradient(180deg, #5a4632, #3a2d1e);
  border: 3px solid #241a10;
  box-shadow: 0 14px 26px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
}