/* Book a lane: controls, the 3D floor, the side-to-side picker. */
.ln{padding:120px 0 140px}
.ln-head{margin-bottom:40px}
.ln-head .sub{margin-bottom:0}

/* controls */
.ctl{display:flex;flex-direction:column;gap:22px;margin-bottom:34px}
.ctl-row{display:flex;flex-wrap:wrap;gap:22px 34px;align-items:flex-end}
.ctl-blk{display:flex;flex-direction:column;gap:10px}
.ctl-blk.grow{flex:1;min-width:220px}
.lbl{font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.lbl em{font-style:normal;letter-spacing:.04em;text-transform:none;font-weight:600;color:#ffd59a;margin-left:8px}
.dates{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.dates::-webkit-scrollbar{display:none}
.date{flex:0 0 66px;border:1px solid var(--line);border-radius:14px;background:var(--coal);color:var(--cream);font:inherit;cursor:pointer;padding:8px 2px 10px;text-align:center;transition:all .2s}
.date .w{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.date .n{display:block;font-size:24px;font-weight:900;line-height:1.1;font-variation-settings:'wdth' 115}
.date .m{display:block;font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
.date[aria-pressed="true"]{background:var(--red);border-color:var(--red);box-shadow:0 0 22px var(--glow)}
.date[aria-pressed="true"] .w,.date[aria-pressed="true"] .m{color:rgba(255,255,255,.85)}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;background:var(--coal);padding:4px}
.seg button{border:0;background:transparent;color:var(--dim);font:inherit;font-weight:800;font-size:14px;padding:10px 16px;border-radius:999px;cursor:pointer;white-space:nowrap}
.seg button small{font-weight:600;color:var(--faint);margin-left:6px}
.seg button[aria-pressed="true"]{background:var(--red);color:#fff;box-shadow:0 0 18px var(--glow)}
.seg button[aria-pressed="true"] small{color:rgba(255,255,255,.85)}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--coal)}
.stepper button{width:46px;height:46px;border:0;background:transparent;color:var(--cream);font-size:22px;cursor:pointer;border-radius:50%}
.stepper button:hover{color:var(--neon)}
.stepper button[disabled]{opacity:.3}
.stepper output{min-width:46px;text-align:center;font-size:24px;font-weight:900;font-variation-settings:'wdth' 120}
.rate-now{margin:0;font-size:15px;color:var(--dim);padding:12px 0}
.rate-now b{color:var(--cream)}
.times{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin;scrollbar-color:var(--char) transparent}
.tm{flex:none;border:1px solid var(--line);border-radius:14px;background:var(--coal);color:var(--cream);font:inherit;cursor:pointer;padding:9px 14px 10px;text-align:left;transition:all .2s;min-width:86px}
.tm b{display:block;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.tm small{display:block;font-size:11.5px;color:#7af0a0;margin-top:2px}
.tm.low small{color:#ffc675}
.tm.none{opacity:.35;cursor:not-allowed}
.tm.none small{color:var(--faint)}
.tm[aria-pressed="true"]{background:var(--red);border-color:var(--red);box-shadow:0 0 22px var(--glow)}
.tm[aria-pressed="true"] small{color:rgba(255,255,255,.9)}

/* ─── the stage ─── */
.stage{--lw:132px;--tilt:63deg;position:relative;height:clamp(460px,64vh,660px);overflow:hidden;background:#070505;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.stage.drag{cursor:grabbing}
.sky{position:absolute;inset:0 0 auto;height:52%;overflow:hidden}
.sky-sign{position:absolute;inset:-10% -5% 0;background:url(../img/hero.jpg) center 12%/cover;opacity:.38;filter:saturate(1.1);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent);
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.floor{position:absolute;inset:0;perspective:900px;perspective-origin:50% 34%;transition:perspective-origin .9s cubic-bezier(.2,.8,.2,1)}
.floor.sway-l{perspective-origin:44% 34%}
.floor.sway-r{perspective-origin:56% 34%}
.track{position:absolute;left:50%;bottom:-4%;height:1100px;transform-style:preserve-3d;transform-origin:0 100%;
  transition:transform .85s cubic-bezier(.22,.8,.2,1)}
.lane{position:absolute;top:0;bottom:0;width:var(--lw);transform-style:preserve-3d}
.bed{position:absolute;inset:0 15px;border-radius:2px;
  background:
    linear-gradient(180deg,rgba(7,5,5,.92) 0%,rgba(7,5,5,.35) 30%,rgba(255,60,60,.06) 70%,rgba(255,230,200,.12) 100%),
    linear-gradient(90deg,transparent 46%,rgba(255,70,70,.18) 50%,transparent 54%),
    repeating-linear-gradient(90deg,#c99158 0 5px,#bb8249 5px 6px,#d39d63 6px 11px,#b57c44 11px 12px);
  transition:filter .6s,box-shadow .6s}
.gut{position:absolute;top:0;bottom:0;width:13px;background:linear-gradient(90deg,#151112,#2a2324 50%,#151112);border-radius:7px;transition:box-shadow .6s,background .6s}
.gut.l{left:1px}.gut.r{right:1px}
.marks{position:absolute;left:15px;right:15px;bottom:18%;height:80px}
.marks i{position:absolute;bottom:0;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:18px solid rgba(40,20,10,.75)}
.dots{position:absolute;left:15px;right:15px;bottom:7%;height:6px}
.dots i{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(40,20,10,.7)}
.foul{position:absolute;left:0;right:0;bottom:3%;height:3px;background:rgba(20,10,8,.9)}

/* billboards stand up off the lane */
.bb{position:absolute;left:50%;transform-origin:50% 100%;transform:translateX(-50%) rotateX(calc(var(--tilt) * -1));backface-visibility:hidden}
.pins{top:-1px;width:92px}
.pins svg{display:block;width:100%;filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
.mask{top:-10px;width:118px;transform:translateX(-50%) rotateX(calc(var(--tilt) * -1)) translateY(-80px)}
.mask div{background:#0c0909;border:1px solid #241c1d;border-radius:8px;text-align:center;padding:6px 0 8px;font-weight:900;font-size:40px;line-height:1;
  font-variation-settings:'wdth' 120;color:rgba(251,246,238,.35);transition:color .5s,text-shadow .5s}
.crew{bottom:21%;width:128px;text-align:center;pointer-events:none}
.crew .av{display:flex;justify-content:center;margin-bottom:6px}
.crew .av span{width:26px;height:26px;border-radius:50%;margin:0 -4px;display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff;
  border:2px solid #0b0809;box-shadow:0 4px 10px rgba(0,0,0,.6);opacity:0;transform:translateY(10px) scale(.6);transition:opacity .45s,transform .45s cubic-bezier(.3,1.4,.4,1)}
.crew .tag{display:inline-block;max-width:126px;background:rgba(11,8,9,.88);border:1px solid var(--line);border-radius:9px;padding:5px 8px;
  font-size:10.5px;font-weight:800;line-height:1.25;color:var(--cream);opacity:0;transform:translateY(8px);transition:opacity .4s .12s,transform .4s .12s}
.crew .tag small{display:block;font-weight:600;color:var(--faint);font-size:9.5px}
.crew.in .av span{opacity:1;transform:none}
.crew.in .tag{opacity:1;transform:none}
.open-tag{bottom:23%;font-size:10.5px;font-weight:900;letter-spacing:.24em;text-transform:uppercase;color:rgba(122,240,160,.85);text-shadow:0 0 10px rgba(75,227,122,.6);
  opacity:0;transition:opacity .5s}
.lane.free .open-tag{opacity:1}

.lane.busy .bed{filter:brightness(.42) saturate(.75)}
.lane.party .bed{filter:brightness(.45) saturate(.6) sepia(.3) hue-rotate(-20deg)}
.lane.party .crew .tag{border-color:rgba(255,182,72,.5)}
.lane.sel .bed{filter:none;box-shadow:inset 0 0 0 2px rgba(255,59,66,.9),inset 0 0 60px rgba(255,40,50,.35)}
.lane.sel .gut{background:linear-gradient(90deg,#3a0d10,#ff3b42 50%,#3a0d10);box-shadow:0 0 18px var(--neon),0 0 40px var(--red)}
.lane.sel .mask div{color:#ffe4e4;text-shadow:0 0 6px #fff,0 0 16px var(--neon),0 0 34px var(--red)}
.lane.sel.busy .bed,.lane.sel.party .bed{filter:brightness(.6);box-shadow:inset 0 0 0 2px rgba(255,182,72,.8)}
.lane.sel.busy .gut,.lane.sel.party .gut{background:linear-gradient(90deg,#2a1c08,#ffb648 50%,#2a1c08);box-shadow:0 0 14px #ffb648}

.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 75% 90% at 50% 72%,transparent 50%,rgba(7,5,5,.8) 100%),linear-gradient(180deg,rgba(7,5,5,.5),transparent 18%)}
.nav-arrow{position:absolute;top:56%;z-index:5;width:54px;height:54px;border-radius:50%;border:1px solid var(--line);background:rgba(11,8,9,.75);
  backdrop-filter:blur(6px);color:var(--cream);font-size:30px;line-height:1;cursor:pointer;transition:all .2s}
.nav-arrow:hover{border-color:var(--neon);box-shadow:0 0 20px var(--glow);color:#fff}
.nav-arrow.l{left:max(16px,3vw)}.nav-arrow.r{right:max(16px,3vw)}
.picker{position:absolute;left:50%;bottom:10px;z-index:6;transform:translateX(-50%);display:flex;align-items:center;gap:14px;pointer-events:none}
.picker .pk-l,.picker .pk-r{color:var(--neon);font-size:18px;text-shadow:0 0 10px var(--neon);animation:nudge 1.6s ease-in-out infinite}
.picker .pk-r{animation-direction:reverse}
@keyframes nudge{50%{transform:translateX(-5px)}}
.pk-mid{min-width:140px;text-align:center;background:rgba(11,8,9,.88);backdrop-filter:blur(8px);border:1px solid rgba(255,59,66,.7);border-radius:16px;
  padding:8px 18px 9px;box-shadow:0 0 30px rgba(237,28,36,.35)}
.pk-mid small{display:block;font-size:10px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.pk-mid b{display:block;font-size:34px;font-weight:900;line-height:1;font-variation-settings:'wdth' 125;color:#fff;text-shadow:0 0 14px var(--glow)}
.pk-mid span{display:block;font-size:12px;color:var(--dim);margin-top:2px;white-space:nowrap}
.picker.taken .pk-mid{border-color:rgba(255,182,72,.7);box-shadow:0 0 26px rgba(255,182,72,.25)}
.picker.taken b{text-shadow:none;color:#ffc675}
.picker.flash .pk-mid{animation:flash .5s}
@keyframes flash{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:none}}

/* the plain version: all lanes at a glance */
.mini{display:grid;grid-template-columns:repeat(24,1fr);gap:5px;margin:22px 0 10px}
.mini button{height:44px;border-radius:8px;border:1px solid var(--line);background:rgba(75,227,122,.14);color:var(--cream);font:inherit;font-size:11px;font-weight:800;cursor:pointer;padding:0;transition:all .2s}
.mini button.busy{background:rgba(251,246,238,.05);color:var(--faint)}
.mini button.party{background:rgba(255,182,72,.12);color:#ffc675}
.mini button.sel{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 0 16px var(--glow)}
.legend{display:flex;flex-wrap:wrap;gap:18px;font-size:12.5px;color:var(--faint)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .f{background:rgba(75,227,122,.5)}.legend .b{background:rgba(251,246,238,.15)}.legend .p{background:rgba(255,182,72,.5)}.legend .s{background:var(--red)}

/* sticky go bar */
.go-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(11,8,9,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.go-in{width:var(--col);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.go-sum{font-size:15px;color:var(--dim)}
.go-sum b{color:var(--cream);font-weight:800}
.go-sum .amt{font-size:22px;font-weight:900;color:#fff;font-variation-settings:'wdth' 115;margin-left:6px}
#goBtn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none}

/* checkout details step */
.fields.one{display:grid;gap:12px}
.fields.one label{display:block;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.fields.one input{width:100%;font:inherit;font-size:16px;color:var(--cream);background:var(--night);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.fields.one input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(237,28,36,.2)}
.dtoggle{bottom:calc(86px + env(safe-area-inset-bottom))}

@media(max-width:760px){
  .stage{--lw:108px;height:470px}
  .mini{grid-template-columns:repeat(12,1fr)}
  .nav-arrow{width:44px;height:44px;font-size:24px;top:50%}
  .go-in{flex-direction:column;align-items:stretch;gap:10px}
  .go-sum{font-size:14px;text-align:center}
  .crew{width:110px}.crew .tag{max-width:108px}
  .dtoggle{top:76px;bottom:auto;left:auto;right:16px;padding:7px 11px 7px 8px;font-size:10.5px}
  .pk-mid b{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.track,.floor,.sky-sign{transition:none}}

/* Thursday jam: lanes 12–13 become a stage with a little band on it */
.band{left:100%;bottom:22%;width:calc(var(--lw) * 2 - 6px);opacity:0;transition:opacity .7s;pointer-events:none}
.band svg{display:block;width:100%;filter:drop-shadow(0 0 14px rgba(179,140,255,.35))}
.lane.jam .band{opacity:1}
.lane.jam .band .bob{animation:groove 1.1s ease-in-out infinite}
.lane.jam .band .bob.b2{animation-delay:.3s}
@keyframes groove{50%{transform:translateY(-2px)}}
.lane.jam .bed{filter:brightness(.38) saturate(.5);box-shadow:inset 0 0 50px rgba(179,140,255,.35)}
.lane.jam .mask div{color:#d9c8ff;text-shadow:0 0 12px #b38cff}
.lane.jam .gut{background:linear-gradient(90deg,#1b1230,#b38cff 50%,#1b1230);box-shadow:0 0 14px rgba(179,140,255,.6)}
.picker.stagepk .pk-mid{border-color:rgba(179,140,255,.8);box-shadow:0 0 26px rgba(179,140,255,.35)}
.mini button.jam{background:rgba(179,140,255,.18);color:#d9c8ff}
.legend .j{background:rgba(179,140,255,.6)}
.ver{display:flex;gap:6px;margin-top:18px}
.ver a{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.ver a.on{background:var(--cream);color:var(--night);border-color:var(--cream)}