/* ============================================================
   BLACKWOOD MANOR — Player 2: The Forbidden Attic
   The room art (assets/img/p2-bg.jpg) already contains the dollhouse, the
   candelabra's seven unlit candles, the framed chart, the open spell book and
   the steamer trunk as real photographed props. Everything below is a thin,
   precisely-positioned overlay: flames, rune-tile buttons, real chart text,
   and digit readouts.
   ============================================================ */

.p2 .room {
  background: url("../img/p2-bg.jpg") center / cover no-repeat, #0d1016;
}

/* ---------- séance candelabra: invisible hotspots + flame glow over each baked candle ---------- */
.candle { position: absolute; cursor: pointer; border-radius: 40%; transition: background .2s ease; }
.candle:hover { background: rgba(242,177,84,.08); }
.candle::before {
  content: ""; position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
  width: 14px; height: 20px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: transparent; opacity: 0; transition: opacity .2s ease;
}
.candle.on::before {
  background: radial-gradient(circle at 50% 70%, #fff2c2, var(--glow-amber) 55%, transparent 75%);
  opacity: 1;
  box-shadow: 0 0 18px 6px rgba(242,177,84,.65);
  animation: flame-flicker 1.6s ease-in-out infinite;
}
@keyframes flame-flicker { 0%,100% { transform: translateX(-50%) scaleY(1); } 50% { transform: translateX(-50%) scaleY(1.15); } }
.candle-one   { left: 380px; top: 298px; width: 22px; height: 100px; }
.candle-two   { left: 399px; top: 275px; width: 22px; height: 110px; }
.candle-three { left: 417px; top: 290px; width: 22px; height: 100px; }
.candle-four  { left: 447px; top: 260px; width: 22px; height: 130px; }
.candle-five  { left: 479px; top: 275px; width: 22px; height: 110px; }
.candle-six   { left: 497px; top: 290px; width: 22px; height: 100px; }
.candle-seven { left: 524px; top: 298px; width: 22px; height: 100px; }

.candle-status {
  position: absolute; left: 320px; top: 397px; width: 260px; text-align: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .12em;
  color: var(--glow-blood);
  text-shadow: 0 0 4px #000, 0 0 4px #000, 0 1px 2px #000;
  background: rgba(5, 4, 3, .55);
  border-radius: 4px;
  padding: 3px 6px;
}
.candle-status.online { color: var(--glow-green); }

.lantern-note { position: absolute; left: 330px; top: 425px; width: 235px; padding: 8px 10px; text-align: center; }
.witching-hour { font-family: var(--font-mono); font-size: 19px; letter-spacing: .12em; color: var(--paper-ink); }
.lantern-caption { margin-top: 4px; font-size: 9px; font-style: italic; color: #5a4f3a; }

/* ---------- spirit alphabet chart: real text overlaid on the framed chart, dark until powered ---------- */
.alphabet-chart {
  position: absolute; left: 430px; top: 88px; width: 148px; height: 165px;
  overflow: hidden; border-radius: 2px;
}
.alphabet-dark {
  position: absolute; inset: 0; background: rgba(5, 4, 3, .95);
  transition: background 1s ease; z-index: 1;
}
.alphabet-chart.lit .alphabet-dark { background: rgba(5, 4, 3, .08); }
.alphabet-grid {
  position: absolute; inset: 5px;
  column-count: 2; column-gap: 6px;
}
.alphabet-grid .cell {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; line-height: 1.16;
  color: #1c170f;
  padding: 0 2px;
}
.alphabet-grid .n { opacity: .75; }

/* ---------- spell book: rune tiles on the open table below the book ---------- */
#bookKeys { position: absolute; left: 558px; top: 615px; width: 320px; height: 36px; display: flex; gap: 6px; }
.book-key {
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  color: #e8dcb8;
  background: radial-gradient(circle at 35% 30%, #3c2f22, #17110a 80%);
  border: 1px solid #000;
  box-shadow: 0 3px 0 #08060a, inset 0 1px 1px rgba(255,255,255,.1);
  transition: transform .06s ease, box-shadow .06s ease, color .12s ease;
}
.book-key:hover { color: var(--glow-green); }
.book-key:active { transform: translateY(2px); box-shadow: 0 1px 0 #08060a; }

.book-readout {
  position: absolute; left: 588px; top: 585px; width: 260px; text-align: center;
  font-family: var(--font-mono); font-size: 18px; letter-spacing: .28em;
  color: var(--glow-green); text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 8px rgba(89,255,156,.5);
}
.book-clear {
  position: absolute; left: 663px; top: 657px; width: 110px; padding: 4px 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .16em;
  color: #cfc3d2; background: rgba(20,15,12,.75);
  border: 1px solid #000; border-radius: 4px; cursor: pointer;
}

.trapdoor-note { position: absolute; left: 580px; top: 678px; width: 260px; padding: 5px 10px; text-align: center; }
.souls-weight { font-family: var(--font-mono); font-size: 12px; color: var(--paper-ink); }
.souls-weight strong { font-size: 18px; }

/* ---------- steamer trunk: 3-digit combo near the lock hardware ---------- */
.trunk-row { position: absolute; left: 1025px; top: 462px; display: flex; gap: 8px; }
.combo-dial {
  width: 40px; height: 54px;
  border-radius: 5px;
  background: rgba(10,7,4,.88);
  border: 1px solid #000;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.9);
  color: var(--glow-amber);
  text-shadow: 0 0 8px rgba(242,177,84,.8);
  font-family: var(--font-mono);
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.whisper-note { position: absolute; left: 985px; top: 528px; width: 200px; padding: 7px 10px; text-align: center; }
.trunk-whisper { font-family: var(--font-mono); font-size: 11px; color: var(--paper-ink); font-style: italic; }

/* ---------- keypad: a physical puzzle box sitting on the attic floor ---------- */
.p2 .keypad-wrap { left: 330px; top: 495px; width: 220px; }
.p2 .keypad {
  background: linear-gradient(180deg, #4a4030, #2c2418);
  border: 3px solid #1a140c;
  box-shadow: 0 14px 26px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
}
.p2 .keypad .readout { color: var(--glow-amber); text-shadow: 0 0 8px rgba(242,177,84,.7); }

.p2 .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, 1deg));
}