/* View 2: standing in front of the lanes. Bigger lanes, a lower camera, the room's
   people at the foul line and the scoring monitors hanging overhead. */
.stage.v2{--tilt:77deg;height:clamp(520px,74vh,760px);background:#060404}
.v2 .sky{height:44%}
.v2 .sky-sign{opacity:.3;background-position:center 8%}
.v2 .floor{perspective:1150px;perspective-origin:50% 31%}
.v2 .floor.sway-l{perspective-origin:46% 31%}
.v2 .floor.sway-r{perspective-origin:54% 31%}
.v2 .track{height:2000px;bottom:-2%;transition:transform 1s cubic-bezier(.22,.8,.2,1)}

/* the lane itself, more like maple under house lights */
.v2 .bed{inset:0 calc(var(--lw) * .12);
  background:
    linear-gradient(180deg,rgba(6,4,4,.96) 0%,rgba(6,4,4,.55) 22%,rgba(255,240,220,.04) 55%,rgba(255,236,210,.16) 100%),
    linear-gradient(90deg,rgba(255,255,255,0) 30%,rgba(255,250,240,.10) 48%,rgba(255,250,240,.16) 50%,rgba(255,250,240,.10) 52%,rgba(255,255,255,0) 70%),
    linear-gradient(90deg,transparent 47%,rgba(255,60,60,.22) 50%,transparent 53%),
    repeating-linear-gradient(90deg,#cf9a62 0 4px,#c08a52 4px 5px,#d8a56c 5px 9px,#ba8149 9px 10px,#d29e66 10px 14px,#b47b44 14px 15px)}
.v2 .gut{width:calc(var(--lw) * .1);background:linear-gradient(90deg,#0e0b0c,#3b3436 30%,#1b1718 55%,#0e0b0c);border-radius:999px}
.v2 .gut.l{left:calc(var(--lw) * .015)}.v2 .gut.r{right:calc(var(--lw) * .015)}
.v2 .lane::before{content:'';position:absolute;top:0;bottom:0;right:calc(var(--lw) * -.01);width:calc(var(--lw) * .02);background:#100c0d}
.v2 .marks{left:calc(var(--lw) * .12);right:calc(var(--lw) * .12);bottom:20%}
.v2 .dots,.v2 .foul{left:calc(var(--lw) * .12);right:calc(var(--lw) * .12)}
.v2 .foul{background:rgba(12,6,5,.95);height:5px}
.v2 .pins{width:calc(var(--lw) * .7)}
.v2 .mask{width:calc(var(--lw) * .92)}
.v2 .mask div{font-size:30px}
.v2 .lane{transition:opacity .8s}
.v2 .lane.far{opacity:.12}

/* lit lanes and the one you're on: a light pool, not a neon tube */
.v2 .lane.busy .bed{filter:brightness(.62) saturate(.85)}
.v2 .lane.party .bed{filter:brightness(.6) saturate(.7) sepia(.25)}
.v2 .lane.sel .bed{filter:brightness(1.12);box-shadow:inset 0 0 0 2px rgba(255,59,66,.75),inset 0 -120px 160px rgba(255,60,60,.25)}
.v2 .lane.sel .gut{background:linear-gradient(90deg,#2a0a0c,#c92a31 45%,#2a0a0c);box-shadow:0 0 14px rgba(255,59,66,.6)}
.v2 .lane.free:not(.sel) .bed{filter:brightness(.95)}

/* people at the foul line */
.v2 .crew{bottom:3.5%;width:calc(var(--lw) * 1.04)}
.v2 .crew svg{display:block;width:100%;overflow:visible}
.v2 .crew .p{opacity:0;transform:translateX(-26px);transition:opacity .55s var(--d),transform .7s cubic-bezier(.2,.9,.25,1.1) var(--d)}
.v2 .crew.in .p{opacity:1;transform:none}
.v2 .crew.in .p{animation:idle 3.6s ease-in-out infinite;animation-delay:calc(var(--d) + .8s)}
@keyframes idle{50%{transform:translateY(-1.2px)}}
.v2 .open-tag{bottom:6%;font-size:12px}
.v2 .band{bottom:17%;width:calc(var(--lw) * 2 - 8px)}

/* overhead scoring monitors, hung just in front of you */
.monitors{position:absolute;top:10px;left:50%;z-index:4;display:flex;width:calc(var(--lw) * 24);transition:transform 1s cubic-bezier(.22,.8,.2,1);pointer-events:none}
.mon{flex:0 0 var(--lw);height:78px;margin:0;padding:0 4px;position:relative;transition:opacity .8s}
.mon::before{content:'';position:absolute;left:50%;top:-10px;width:2px;height:10px;background:#333}
.mon b,.mon .who,.mon small{position:relative;z-index:1;display:block;text-align:center}
.mon::after{content:'';position:absolute;inset:0 6px;border-radius:8px;background:linear-gradient(180deg,#141a2b,#0b0e18);border:2px solid #222;box-shadow:0 8px 20px rgba(0,0,0,.6)}
.mon b{font-size:22px;font-weight:900;line-height:1;padding-top:8px;color:#9fb4ff;font-variation-settings:'wdth' 120}
.mon .who{font-size:11px;font-weight:800;margin-top:5px;color:#e8ecff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 12px}
.mon small{font-size:10px;color:#7d88aa}
.mon.free .who{color:#7af0a0}
.mon.party .who{color:#ffc675}
.mon.jam::after{background:linear-gradient(180deg,#261a40,#120c22)}
.mon.jam .who{color:#d9c8ff}
.mon.sel::after{border-color:#ff3b42;box-shadow:0 0 22px rgba(255,59,66,.55),0 8px 20px rgba(0,0,0,.6)}
.mon.sel b{color:#fff;text-shadow:0 0 10px var(--neon)}
.mon.far{opacity:.12}
.haze{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 35% at 50% 34%,rgba(255,60,60,.12),transparent 70%)}
.v2 .vignette{background:radial-gradient(ellipse 80% 95% at 50% 75%,transparent 55%,rgba(6,4,4,.85) 100%),linear-gradient(180deg,rgba(6,4,4,.35),transparent 20%)}
.v2 .picker{bottom:14px}
@media(max-width:760px){
  .stage.v2{height:560px}
  .mon{height:66px}.mon b{font-size:18px}
}