/* =========================================================
   浜辺：バレーボールネット v3
   約30度の斜め配置と、控えめな立体感・遠近感を表現する。
   ========================================================= */

.room-stage[data-scene="beach"] .room-volleynet {
  left: 50.5%;
  top: 55%;
  height: 47%;
  transform:
    translate(-50%, -50%)
    perspective(640px)
    rotateX(2deg)
    rotateY(-12deg)
    rotateZ(-30deg)
    scaleX(.78);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  z-index: 2;
}

.room-stage[data-scene="beach"] .room-volleynet svg {
  height: 100%;
  width: auto;
  display: block;
  overflow: visible;
  filter:
    drop-shadow(12px 10px 8px rgba(70, 59, 38, .29))
    drop-shadow(2px 2px 1px rgba(255, 255, 255, .38));
}

/* 網面そのものにも浅い影を加え、支柱より少し奥に見せる。 */
.room-stage[data-scene="beach"] .room-volleynet .vn-net-plane {
  filter: drop-shadow(3px 2px 2px rgba(77, 76, 67, .16));
}

/* 地面に落ちる2つの影。手前側ほど大きく濃い。 */
.room-stage[data-scene="beach"] .room-volleynet .vn-ground-shadow {
  fill: rgba(87, 70, 39, .16);
  filter: blur(1.4px);
}
.room-stage[data-scene="beach"] .room-volleynet .vn-ground-shadow-near {
  fill: rgba(87, 70, 39, .31);
}

/* 網面の薄い裏地と、右側へわずかに見える厚み。 */
.room-stage[data-scene="beach"] .room-volleynet .vn-net-back {
  fill: rgba(236, 246, 252, .12);
  stroke: rgba(188, 202, 214, .76);
  stroke-width: 1.2;
}
.room-stage[data-scene="beach"] .room-volleynet .vn-net-depth {
  fill: url(#vn-net-depth);
  stroke: rgba(145, 157, 167, .42);
  stroke-width: 1;
}
.room-stage[data-scene="beach"] .room-volleynet .vn-mesh line {
  stroke: rgba(255, 255, 255, .94);
  stroke-width: 1.15;
}
.room-stage[data-scene="beach"] .room-volleynet .vn-cord {
  fill: none;
  stroke: #d4dde4;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* 支柱を円柱状に見せる。 */
.room-stage[data-scene="beach"] .room-volleynet .vn-post {
  fill: url(#vn-post-grad);
  stroke: #7f8b96;
  stroke-width: 1.7;
}
.room-stage[data-scene="beach"] .room-volleynet .vn-post-cap {
  fill: #f7fbfd;
  stroke: #8f9ba5;
  stroke-width: 1.4;
}
.room-stage[data-scene="beach"] .room-volleynet .vn-post-highlight {
  fill: none;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 2;
  stroke-linecap: round;
}
.room-stage[data-scene="beach"] .room-volleynet .vn-post-near {
  filter: drop-shadow(3px 2px 2px rgba(71, 67, 56, .18));
}

/* 上下テープは手前側ほど太く、陰影も強くする。 */
.room-stage[data-scene="beach"] .room-volleynet .vn-tape {
  fill: url(#vn-tape-grad);
  stroke: #aeb9c3;
  stroke-width: 1.5;
  filter: drop-shadow(2px 2px 1px rgba(67, 67, 60, .2));
}
.room-stage[data-scene="beach"] .room-volleynet .vn-tape-near {
  stroke-width: 1.9;
  filter: drop-shadow(3px 3px 2px rgba(67, 67, 60, .24));
}

/* 支柱の足元。手前側を大きくして遠近感を強調する。 */
.room-stage[data-scene="beach"] .room-volleynet .vn-foot {
  fill: #c8b27a;
  stroke: #9b8656;
  stroke-width: 1.4;
}
.room-stage[data-scene="beach"] .room-volleynet .vn-foot-near {
  fill: #bda66a;
  filter: drop-shadow(4px 3px 2px rgba(91, 75, 43, .24));
}

@media (max-width: 390px) {
  .room-stage[data-scene="beach"] .room-volleynet {
    height: 44%;
    transform:
      translate(-50%, -50%)
      perspective(560px)
      rotateX(2deg)
      rotateY(-10deg)
      rotateZ(-30deg)
      scaleX(.73);
  }
}