* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

:root{
  --red: #ff3b3b;
  --panel: rgba(0,0,0,.35);
  --border: rgba(255,0,0,.35);
  --neon: #39ff14;
}

body {
  font-family: system-ui, sans-serif;
  background: #000 url('scary_alleyway.jpeg') center/cover fixed no-repeat;
  color: var(--red);
}

body, button, input, p, h1, h2, h3, h4, .label, .msg {
  color: var(--red);
  text-shadow: 0 0 6px rgba(255,0,0,0.25);
}

.scene { display: none; min-height: 100vh; }
.scene.active { display: grid; place-items: center; padding: 24px; }

.intro-wrap { text-align:center; display:grid; gap:12px; }
.spooky {
  font-family: "Creepster", cursive;
  font-size: clamp(42px, 10vw, 110px);
  color: var(--red);
  text-shadow: 0 0 14px rgba(255,0,0,.6);
}
.intro-blurb { font-size:14px; opacity:.9; }

#canvas-holder {
  width: min(92vw, 900px);
  height: 600px;
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
}

.ghost-btn {
  border:1px solid var(--border);
  background: var(--panel);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  text-transform:lowercase;
}
.ghost-btn:hover { background: rgba(255,0,0,.1); }
.ghost-btn[disabled] { opacity:.4; cursor:default; }

.fab {
  position:fixed; bottom:24px; right:24px;
  width:48px; height:48px;
  border-radius:50%; border:1px solid var(--border);
  background:var(--panel); display:grid; place-items:center;
}

.choice-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  width:min(92vw,900px);
}
.choice { border:1px solid var(--border); border-radius:12px; overflow:hidden; background: transparent; }
.choice-pad { background:#000; padding:8px; } /* black padding */
.choice .thumb { width:100%; height:220px; object-fit:cover; border-radius:8px; display:block; }
.choice .label { padding:10px; }

.object-card { width:min(92vw,900px); display:grid; grid-template-columns:1fr 220px; gap:16px; }
.object-visual, .object-actions { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; }

.object-frame { position:relative; width:100%; height:360px; border-radius:12px; overflow:hidden; background:#111; }
.object-img { width:100%; height:100%; object-fit:cover; }
.object-img.contain { object-fit:contain; background:#0e0e0e; }

.tiny-hint {
  font-size: 12px;
  opacity: .9;
  margin: 6px 0 10px;
  text-shadow: 0 0 6px rgba(255,0,0,0.25);
}

.overlay-digit {
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:clamp(60px,12vw,140px);
  color:var(--neon);
  text-shadow:
    0 0 8px rgba(57,255,20,1),
    0 0 18px rgba(57,255,20,0.95),
    0 0 36px rgba(57,255,20,0.9),
    0 0 72px rgba(57,255,20,0.8),
    0 0 120px rgba(57,255,20,0.7);
  opacity:0; transition:opacity .25s;
}
.overlay-digit.show { opacity:1; }

.magnifier-frame { cursor: crosshair; }
.lens {
  position:absolute; width:120px; height:120px;
  border-radius:50%; border:3px solid var(--neon);
  box-shadow:0 0 24px rgba(57,255,20,.95),0 0 48px rgba(57,255,20,.7);
  mix-blend-mode:screen; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
}
.guide{
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:160px; height:160px; border-radius:50%;
  border:2px dashed rgba(255,0,0,.45);
  box-shadow: 0 0 22px rgba(255,0,0,.25) inset;
  pointer-events:none;
  transition: opacity .25s ease;
}
.guide.hide{ opacity:0; }

.watch-frame { position:relative; }
.watch-fog {
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255, calc(var(--fog,1)*0.6)), rgba(0,0,0,0) 60%),
    radial-gradient(circle at 30% 70%, rgba(255,255,255, calc(var(--fog,1)*0.3)), rgba(0,0,0,0) 70%);
}

.key-wrap { inset:0; display:grid; place-items:center; transform:rotate(calc(var(--rot,0)*1deg)); }
.key-img { width:80%; height:80%; object-fit:contain; }

.keypad { width:min(92vw,420px); background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; }
.keypad .display { background:#111; border:1px solid var(--border); padding:10px; font-size:28px; letter-spacing:6px; }
.keypad .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:10px 0; }
.keypad .pad { background:rgba(255,0,0,.1); border:1px solid var(--border); padding:12px; }

.ending-frame { position:relative; width:min(92vw,900px); height:420px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.ending-img { width:100%; height:100%; object-fit:cover; }
.ending-overlay-text{
  position:absolute; inset:auto 0 0 0;
  padding:16px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  text-align:center;
  font-size:14px;
  letter-spacing:.4px;
}

.sound-fab { position:fixed; bottom:24px; left:24px; display:inline-flex; gap:8px; background:var(--panel); border:1px solid var(--border); padding:8px; border-radius:12px; }
#toggle-sound.music-on{
  box-shadow:
    0 0 8px rgba(57,255,20,0.9),
    0 0 18px rgba(57,255,20,0.8),
    0 0 36px rgba(57,255,20,0.6);
  animation: pulseNeon 1.4s ease-in-out infinite;
  border-color: rgba(57,255,20,.65);
}
@keyframes pulseNeon{
  0%,100%{ transform: scale(1); box-shadow: 0 0 8px rgba(57,255,20,0.8), 0 0 18px rgba(57,255,20,0.7), 0 0 36px rgba(57,255,20,0.5); }
  50%{ transform: scale(1.03); box-shadow: 0 0 16px rgba(57,255,20,1), 0 0 28px rgba(57,255,20,0.95), 0 0 64px rgba(57,255,20,0.8); }
}

@media (max-width: 760px){
  .object-card { grid-template-columns:1fr; }
}