html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.gate-scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.gate-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 0.6s ease;
}

body.zooming .gate-image {
  transform: scale(1.2); /* ズームイン */
}

/* 柵のクリックゾーン（右側40%） */
.enter-zone {
  position: absolute;
  right: 0; top: 0;
  width: 40%;
  height: 100%;
  cursor: pointer;
  transition: background 0.6s ease;
}
.enter-zone:hover {
  background: radial-gradient(circle at 80% 50%, rgba(200,162,74,.12), transparent 60%);
}

/* テキストを画像の上に重ねる */
.screen-header, .prayer-header {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #e6e1dc;
  text-align: center;
}
.screen-header { top: 5%; }
.prayer-header { bottom: 5%; }

.title {
  font-family:'Cinzel', serif;
  color:#c8a24a;
  letter-spacing:0.12em;
}
.divider {
  width:160px;
  height:1px;
  margin:10px auto;
  background:linear-gradient(90deg,transparent,#c8a24a,transparent);
  opacity:.6;
}
.intro {
  font-size: 14px;
  margin-top: 6px;
  letter-spacing: 0.05em;
}
.ritual-nav a {
  color: #e6e1dc;
  text-decoration: none;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid #3a2a2a;
}
.ritual-nav a:hover {
  color: #c8a24a;
  border-color: #c8a24a;
}