/* ==========================================
   ART ENVIRONMENT, BACKGROUND & LIGHTING
   100% Pure CSS Textures & Scene Props
   ========================================== */

#scene-viewport {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Background Wall & Room Illumination */
.scene-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    circle at var(--light-x) var(--light-y),
    var(--bg-radial-center) 0%,
    var(--bg-radial-outer) 75%
  );
  z-index: 1;
}

/* Overhead Spotlight Beam */
.overhead-spotlight {
  position: absolute;
  top: -15%;
  left: 50%;
  transform: translateX(-50%);
  width: 1400px;
  height: 1400px;
  background: radial-gradient(
    ellipse at center,
    var(--ambient-light-color) 0%,
    transparent 65%
  );
  pointer-events: none;
  opacity: var(--spotlight-intensity);
  z-index: 2;
  transition: opacity 0.4s ease;
}

/* Izakaya Neon Sign ("ラーメン" - Pure CSS Glowing Neon) */
.izakaya-neon {
  position: absolute;
  top: 80px;
  right: 6%;
  z-index: 3;
  font-family: sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 8px;
  writing-mode: vertical-rl;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px var(--neon-glow-color),
    0 0 40px var(--neon-glow-color),
    0 0 80px var(--neon-glow-color);
  opacity: 0.9;
  animation: neon-flicker 5s infinite;
  pointer-events: none;
}

@keyframes neon-flicker {
  0%, 100% { opacity: 0.95; }
  42% { opacity: 0.95; }
  43% { opacity: 0.4; }
  44% { opacity: 0.95; }
  85% { opacity: 0.95; }
  86% { opacity: 0.6; }
  87% { opacity: 0.95; }
}

/* Wooden Izakaya Counter Table (Clean 2D Layering) */
.counter-table {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40vh;
  background-color: var(--table-color-1);
  background-image: 
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.7) 0%,
      rgba(0, 0, 0, 0.2) 15%,
      var(--table-highlight) 85%,
      rgba(255, 255, 255, 0.1) 100%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 180px,
      rgba(0, 0, 0, 0.25) 181px,
      rgba(0, 0, 0, 0.25) 183px
    ),
    repeating-linear-gradient(
      0deg,
      var(--table-grain) 0,
      var(--table-grain) 1px,
      transparent 2px,
      transparent 5px
    );
  border-top: 3px solid rgba(235, 175, 120, 0.3);
  box-shadow: 
    inset 0 15px 30px rgba(0, 0, 0, 0.8),
    0 -8px 25px rgba(0, 0, 0, 0.6);
  z-index: 4;
}

/* Bowl Shadow Cast onto Counter Table */
.bowl-shadow {
  position: absolute;
  bottom: 14vh;
  left: 50%;
  transform: translateX(-50%) scaleY(0.4);
  width: 540px;
  height: 220px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.65) 45%,
    transparent 75%
  );
  filter: blur(14px);
  z-index: 5;
  pointer-events: none;
}