/* U-shaped locker room, viewed from the entrance toward the seven-locker back wall. */
.locker-room {
  min-height: 680px;
  perspective: 1200px;
  background:
    linear-gradient(180deg, #070b12 0 13%, #152130 13% 18%, #111a24 18% 41%, #29252a 42% 100%);
}

.locker-room::before {
  z-index: 1;
  background:
    linear-gradient(90deg, #0008, transparent 12% 88%, #0008),
    repeating-linear-gradient(90deg, transparent 0 79px, #ffffff08 80px 81px),
    linear-gradient(180deg, transparent 0 42%, #0007 88% 100%);
}

/* The floor is intentionally plain: it is a room surface, not a field or a wireframe. */
.locker-room::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 320px 0 0;
  background:
    linear-gradient(90deg, #0006, transparent 18% 82%, #0006),
    linear-gradient(180deg, #393439 0, #29262a 36%, #1c1b20 100%);
  box-shadow: inset 0 18px 36px #0009;
  pointer-events: none;
}

.room-sign { z-index: 8; top: 44px; }
.room-lights { z-index: 8; top: 17px; left: 16%; right: 16%; height: 10px; }

/* Distant back wall: seven starters sit together in one straight locker bank. */
.front-lockers {
  z-index: 5;
  top: 159px;
  width: 61%;
  gap: 5px;
  padding: 11px 13px 13px;
  transform: translateX(-50%);
  border: 1px solid #bf8d5d;
  border-bottom: 12px solid #4b2b1c;
  background: linear-gradient(90deg, #4f2f1e, #9f7550 6%, #281710 8% 92%, #9f7550 94%, #4f2f1e);
  box-shadow: 0 16px 25px #000c, inset 0 1px #f4c79666;
}

.front-lockers .locker-slot { min-height: 118px; }

/* Six lockers per wall: the banks run from the viewer toward the rear wall. */
.side-lockers {
  z-index: 5;
  top: 362px;
  display: grid;
  grid-template-rows: 128px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  width: 46%;
  padding: 8px 9px 33px;
  border: 1px solid #a8764c;
  background: linear-gradient(180deg, #6b422a, #2a1811 24% 82%, #8f6442 84% 100%);
  box-shadow: 0 16px 27px #000c;
}

.side-lockers-left {
  left: -2.5%;
  transform: perspective(950px) rotateY(20deg) skewY(-10deg) scaleY(.86);
  transform-origin: left top;
}

.side-lockers-right {
  right: -2.5%;
  transform: perspective(950px) rotateY(-20deg) skewY(10deg) scaleY(.86);
  transform-origin: right top;
}

.side-lockers .locker-slot { min-height: 0; }
.side-lockers .locker-status { top: 8px; font-size: 6px; }
.side-lockers .locker-number { top: 29px; font-size: 23px; }
.side-lockers .locker-name { bottom: 25px; font-size: 7px; }
.side-lockers .locker-rating { bottom: 14px; font-size: 7px; }
.side-lockers .locker-fatigue { bottom: 4px; font-size: 6px; }

/* Low seating follows the two walls; red is reserved for room lighting, not player status. */
.locker-bench {
  z-index: 6;
  bottom: 134px;
  width: 41%;
  height: 41px;
  border-color: #7f5b42;
  background: linear-gradient(#c9a07d, #523426);
  box-shadow: 0 8px 0 #c32b2b, 0 13px 15px #000b;
}
.locker-bench-left { left: 2%; transform: skewY(1.2deg); }
.locker-bench-right { right: 2%; transform: skewY(-1.2deg); }

.clubhouse-floor {
  z-index: 4;
  left: 28%;
  right: 28%;
  bottom: -21px;
  height: 305px;
  transform: none;
  clip-path: polygon(13% 0, 87% 0, 100% 100%, 0 100%);
  background: radial-gradient(ellipse at 50% 60%, #53636c66, transparent 52%);
  box-shadow: none;
}
.clubhouse-floor > span { bottom: 31px; color: #d6dce288; font-size: 17px; }
.floor-logo {
  top: 75px;
  width: 150px;
  height: 150px;
  border-color: #e3dfcf99;
  opacity: .64;
  transform: translateX(-50%);
}

@media (max-width: 760px) {
  .locker-room { min-height: 590px; }
  .room-sign { top: 36px; }
  .front-lockers { top: 133px; width: 80%; padding: 6px; }
  .front-lockers .locker-slot { min-height: 90px; }
  .side-lockers { top: 292px; width: 51%; grid-template-rows: 96px; padding: 5px 4px 24px; }
  .side-lockers-left { left: -8%; transform: perspective(700px) rotateY(14deg) skewY(-7deg) scaleY(.88); }.side-lockers-right { right: -8%; transform: perspective(700px) rotateY(-14deg) skewY(7deg) scaleY(.88); }
  .side-lockers .locker-number { top: 22px; font-size: 16px; }
  .side-lockers .locker-name { bottom: 18px; font-size: 5px; }
  .side-lockers .locker-rating,.side-lockers .locker-fatigue { display: none; }
  .locker-bench { bottom: 103px; height: 28px; }
  .clubhouse-floor { left: 13%; right: 13%; height: 245px; }
  .floor-logo { top: 105px; width: 100px; height: 100px; }
}