*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Page / Scene ── */
body {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0a07;
  font-family: 'Georgia', 'Times New Roman', serif;
  overflow: hidden;
}

.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* Stone-wall vignette */
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, transparent 40%, #000 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.01) 0px, rgba(255,255,255,0.01) 1px, transparent 1px, transparent 60px),
    linear-gradient(180deg, #1a1208 0%, #0d0a07 100%);
  width: 100vw;
  min-height: 100dvh;
  justify-content: center;
}

/* ── Candle Atmosphere ── */
.candle {
  position: fixed;
  bottom: 0;
  width: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.candle-left  { left: 6vw; }
.candle-right { right: 6vw; }

.candle::after {
  content: '';
  display: block;
  width: 18px;
  height: 100px;
  background: linear-gradient(180deg, #c8a96e 0%, #8c6a34 60%, #5a3f1a 100%);
  border-radius: 3px 3px 2px 2px;
}

.flame {
  width: 12px;
  height: 20px;
  background: radial-gradient(ellipse at 50% 80%, #fff8d0 0%, #ffb300 40%, #ff6600 70%, transparent 100%);
  border-radius: 50% 50% 30% 30%;
  animation: flicker 1.8s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
  filter: blur(0.5px);
  box-shadow: 0 0 8px 4px rgba(255,180,0,0.35), 0 0 22px 8px rgba(255,100,0,0.15);
}

@keyframes flicker {
  0%   { transform: scaleX(1)   scaleY(1)    rotate(-1deg); opacity: 0.95; }
  30%  { transform: scaleX(0.9) scaleY(1.05) rotate(2deg);  opacity: 1;    }
  60%  { transform: scaleX(1.1) scaleY(0.97) rotate(-2deg); opacity: 0.9;  }
  100% { transform: scaleX(0.95)scaleY(1.02) rotate(1deg);  opacity: 0.98; }
}

/* ── Lock Wrap ── */
.lock-wrap {
  position: relative;
  width: 520px;
  max-width: 94vw;
}

canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  background: transparent;
}

/* ── Overlay (start / game-over) ── */
.overlay {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 78.8%; /* 520px circle in 660px canvas */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(5, 3, 1, 0.78);
  backdrop-filter: blur(2px);
}
.overlay.hidden { display: none; }

.overlay-inner {
  text-align: center;
  padding: 20px;
  max-width: 300px;
}

.overlay-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 5px;
  color: #c9953a;
  text-shadow: 0 0 18px rgba(201,149,58,0.6);
  margin-bottom: 14px;
  font-family: 'Georgia', serif;
}

.overlay-sub {
  font-size: 13px;
  color: #a89070;
  line-height: 1.7;
  margin-bottom: 22px;
}

.hl-blue { color: #5bb8ff; font-weight: bold; }
.hl-red  { color: #ff5555; font-weight: bold; }

/* ── PICK Button ── */
.pick-btn {
  cursor: pointer;
  border: none;
  letter-spacing: 3px;
  font-family: 'Georgia', serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a0f00;
  background: linear-gradient(180deg, #f0c94a 0%, #c47f0a 50%, #8c5500 100%);
  padding: 12px 32px;
  border-radius: 4px;
  box-shadow:
    0 2px 0 #3d2200,
    0 4px 14px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,220,0.4);
  transition: transform 0.07s, box-shadow 0.07s;
  text-transform: uppercase;
}
.pick-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 #3d2200, 0 2px 8px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,220,0.2);
}

.hit-btn {
  font-size: 18px;
  padding: 14px 48px;
  letter-spacing: 4px;
}

.mouse-icon { font-style: normal; font-size: 16px; }