.industrial-level-page {
  --industrial-ink: #070d13;
  --industrial-wall-deep: #0c141c;
  --industrial-wall: #172733;
  --industrial-wall-panel: #213845;
  --industrial-steel-dark: #121f29;
  --industrial-steel-mid: #334c5c;
  --industrial-steel-light: #7c929d;
  --industrial-edge: #6ee8f5;
  --industrial-edge-dim: #284b57;
  --industrial-warning: #ffd166;
  --industrial-heat: #ff8a3d;
}

.industrial-level-page .office-backdrop {
  inset: 0 0 56px;
  background:
    linear-gradient(rgba(110, 232, 245, 0.066) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 232, 245, 0.06) 1px, transparent 1px),
    radial-gradient(circle at 18% 22%, rgba(110, 232, 245, 0.14), transparent 20%),
    radial-gradient(circle at 67% 30%, rgba(255, 209, 102, 0.1), transparent 18%),
    linear-gradient(180deg, #263f4c 0%, #172733 52%, #0c141c 100%);
  background-size: 34px 34px, 34px 34px, auto, auto, auto;
}

.industrial-backdrop-vignette,
.industrial-wall-bay,
.industrial-column,
.industrial-pipe,
.industrial-cable-run,
.industrial-vent {
  position: absolute;
  pointer-events: none;
}

.industrial-backdrop-vignette {
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 30%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 16% 84%, rgba(0, 0, 0, 0.3)),
    linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.56));
}

.industrial-wall-bay {
  z-index: 0;
  border: 5px solid #213743;
  border-radius: 7px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #203743, #14242f);
  background-size: 30px 30px, 30px 30px, auto;
  box-shadow:
    inset 0 0 0 5px rgba(0, 0, 0, 0.18),
    9px 11px 0 rgba(0, 0, 0, 0.24);
  opacity: 0.72;
}

.industrial-wall-bay::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 16px;
  height: 18px;
  border: 3px solid #0d171f;
  background:
    repeating-linear-gradient(90deg, rgba(110, 232, 245, 0.54) 0 16px, transparent 16px 28px),
    #172733;
}

.industrial-wall-bay::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  height: 10px;
  background:
    repeating-linear-gradient(90deg, var(--industrial-warning) 0 18px, transparent 18px 34px);
  opacity: 0.62;
}

.bay-a {
  left: 58px;
  top: 82px;
  width: 410px;
  height: 176px;
}

.bay-b {
  left: 718px;
  top: 70px;
  width: 548px;
  height: 226px;
  opacity: 0.58;
}

.bay-c {
  left: 2190px;
  top: 78px;
  width: 560px;
  height: 188px;
  opacity: 0.66;
}

.bay-d {
  left: 3340px;
  top: 92px;
  width: 480px;
  height: 172px;
  opacity: 0.5;
}

.industrial-column {
  z-index: 0;
  top: -18px;
  bottom: 66px;
  width: 31px;
  border: 4px solid #0d171f;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 28% 72%, rgba(0, 0, 0, 0.24)),
    repeating-linear-gradient(180deg, #516a77 0 34px, #273d4a 34px 44px);
  box-shadow:
    inset 0 -6px 0 rgba(0, 0, 0, 0.28),
    7px 9px 0 rgba(0, 0, 0, 0.22);
  opacity: 0.62;
}

.column-a { left: 650px; }
.column-b { left: 1868px; }
.column-c { left: 3170px; opacity: 0.5; }
.column-d { left: 4020px; opacity: 0.38; }

.industrial-pipe {
  z-index: 0;
  height: 18px;
  border: 4px solid #0d171f;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent 52%),
    #657f8b;
  box-shadow:
    inset 0 -5px 0 rgba(0, 0, 0, 0.26),
    6px 7px 0 rgba(0, 0, 0, 0.22);
  opacity: 0.66;
}

.pipe-long {
  left: -34px;
  top: 52px;
  width: 1660px;
}

.pipe-short {
  left: 1980px;
  top: 170px;
  width: 1100px;
  height: 13px;
  opacity: 0.48;
}

.pipe-third {
  left: 3020px;
  top: 70px;
  width: 760px;
  height: 14px;
  opacity: 0.44;
}

.industrial-cable-run {
  z-index: 0;
  height: 20px;
  border: 4px solid #0d171f;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, #121e27 0 38px, #314654 38px 44px),
    #172630;
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.28);
}

.industrial-cable-run::before,
.industrial-cable-run::after {
  content: "";
  position: absolute;
  bottom: -42px;
  width: 92px;
  height: 42px;
  border: 6px solid var(--industrial-heat);
  border-top: 0;
  border-radius: 0 0 999px 999px;
  filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, 0.26));
}

.industrial-cable-run::before { left: 22%; }
.industrial-cable-run::after {
  left: 54%;
  border-color: var(--industrial-edge);
  transform: scaleX(0.78);
}

.cable-run-a {
  left: 120px;
  top: 318px;
  width: 970px;
  opacity: 0.62;
}

.cable-run-b {
  left: 2140px;
  top: 306px;
  width: 720px;
  opacity: 0.48;
}

.cable-run-c {
  left: 3250px;
  top: 318px;
  width: 650px;
  opacity: 0.42;
}

.industrial-vent {
  z-index: 0;
  width: 124px;
  height: 38px;
  border: 4px solid #0d171f;
  border-radius: 7px;
  background:
    repeating-linear-gradient(90deg, #83a1aa 0 10px, #263a46 10px 17px),
    #506976;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.24);
}

.vent-a {
  left: 510px;
  top: 136px;
}

.vent-b {
  left: 2630px;
  top: 134px;
  width: 104px;
  opacity: 0.72;
}

.vent-c {
  left: 3500px;
  top: 152px;
  width: 96px;
  opacity: 0.5;
}

.industrial-level-page .wall-light {
  height: 10px;
  border: 3px solid #0d171f;
  border-radius: 999px;
  background: #f2facf;
  box-shadow:
    0 0 24px rgba(232, 245, 200, 0.46),
    8px 11px 0 rgba(0, 0, 0, 0.18);
}

.industrial-level-page .light-a {
  left: 126px;
  top: 36px;
  width: 290px;
}

.industrial-level-page .light-b {
  left: 1360px;
  top: 40px;
  width: 330px;
}

.industrial-level-page .pipe-a,
.industrial-level-page .pipe-b {
  display: none;
}

.industrial-level-page .ticket-board,
.industrial-level-page .wall-panel,
.industrial-level-page .whiteboard,
.industrial-level-page .level-wall-poster,
.industrial-level-page .level-scene-prop,
.industrial-level-page .level-start-prop,
.industrial-level-page .records-stack,
.industrial-level-page .records-cart {
  border-color: #0d171f;
  border-radius: 7px;
  box-shadow:
    7px 9px 0 rgba(0, 0, 0, 0.28),
    inset 0 4px rgba(255, 255, 255, 0.08);
}

.industrial-level-page .ticket-board {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 36%),
    linear-gradient(90deg, rgba(110, 232, 245, 0.26) 0 7px, transparent 7px),
    linear-gradient(180deg, #324b59 0 48%, #14232e 49% 100%);
}

.industrial-level-page .whiteboard {
  border-color: #0d171f;
  background:
    linear-gradient(90deg, rgba(255, 209, 102, 0.52) 0 7px, transparent 7px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.64), transparent 34%),
    linear-gradient(180deg, #f7fbf3, #d7e6e1);
}

.industrial-level-page .wall-panel,
.industrial-level-page .level-scene-prop,
.industrial-level-page .level-start-prop,
.industrial-level-page .records-stack,
.industrial-level-page .records-cart {
  background:
    linear-gradient(135deg, rgba(110, 232, 245, 0.18), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 10px, transparent 10px calc(100% - 10px), rgba(0, 0, 0, 0.22) calc(100% - 10px)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #23394a, #0d151f);
}

.industrial-level-page .records-stack {
  border-width: 4px;
  color: #dff8f5;
}

.industrial-level-page .records-stack b {
  color: #ffd166;
}

.industrial-level-page .records-stack span {
  background: rgba(110, 232, 245, 0.24);
}

.industrial-level-page .records-cart span {
  background:
    repeating-linear-gradient(90deg, #ffd166 0 20px, #5c4324 20px 24px, #f0bd67 24px 44px);
}

.industrial-level-page .server-rack {
  display: block;
  border-color: #0d171f;
  opacity: 0.38;
}

.industrial-level-page .rack-a {
  left: 1700px;
}

.industrial-level-page .rack-b {
  left: 2920px;
  opacity: 0.32;
}

.industrial-level-page .level-wall-poster {
  padding: 13px 78px 13px 15px;
  border: 4px solid #070d13;
  background:
    linear-gradient(90deg, var(--level-accent-b, #ffd166) 0 7px, transparent 7px),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), transparent 38%),
    #f7f4e8;
  transform: rotate(-1deg);
}

.industrial-level-page .level-wall-poster::before {
  width: 10px;
  height: 10px;
  background: #263f4c;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.32),
    0 0 10px rgba(110, 232, 245, 0.24);
}

.industrial-level-page .level-wall-poster::after {
  width: 7px;
  height: 7px;
  background: #ff6b6b;
}

.industrial-level-page .level-wall-poster span {
  border-color: #070d13;
  background: #060a0d;
  color: var(--industrial-edge);
}

.industrial-level-page .level-wall-poster i {
  border-color: #070d13;
  background:
    linear-gradient(180deg, var(--level-accent-b, #ffd166) 0 14px, transparent 14px),
    repeating-linear-gradient(180deg, rgba(17, 25, 35, 0.2) 0 8px, transparent 8px 12px),
    #fff7d6;
}

.industrial-level-page .level-wall-poster.is-nearby {
  filter:
    drop-shadow(0 0 10px rgba(110, 232, 245, 0.54))
    drop-shadow(0 0 18px rgba(255, 209, 102, 0.32));
  box-shadow:
    0 0 0 5px rgba(110, 232, 245, 0.52),
    7px 9px 0 rgba(0, 0, 0, 0.28),
    inset 0 4px rgba(255, 255, 255, 0.08);
}

.industrial-level-page .platform {
  z-index: 6;
  border: 4px solid var(--industrial-ink);
  border-radius: 6px 6px 3px 3px;
  color: rgba(244, 247, 236, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.075) 0 13px, transparent 13px 42px),
    linear-gradient(180deg, #7c929d 0 18%, #4f6978 19% 48%, #263c4a 49% 76%, #121f29 77% 100%);
  box-shadow:
    inset 0 6px 0 rgba(255, 255, 255, 0.13),
    inset 0 -11px 0 rgba(0, 0, 0, 0.28),
    0 -5px 0 rgba(110, 232, 245, 0.18),
    9px 11px 0 rgba(0, 0, 0, 0.34),
    18px 23px 0 rgba(0, 0, 0, 0.12);
}

.industrial-level-page .platform::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: -10px;
  height: 9px;
  border: 3px solid #0d171f;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, var(--industrial-edge) 0 28px, var(--industrial-edge-dim) 28px 46px);
  box-shadow: 0 0 15px rgba(110, 232, 245, 0.38);
}

.industrial-level-page .platform::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -20px;
  height: 20px;
  border: 4px solid var(--industrial-ink);
  border-top: 0;
  background:
    repeating-linear-gradient(90deg, #0d1720 0 22px, #253846 22px 38px);
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.2);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%);
}

.industrial-level-page .platform span {
  left: 12px;
  right: 12px;
  top: auto;
  bottom: 6px;
  width: auto;
  height: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 209, 102, 0.78) 0 16px, transparent 16px 30px);
  opacity: 0.68;
}

.industrial-level-page .platform[data-platform^="floor"] {
  box-shadow:
    inset 0 6px 0 rgba(255, 255, 255, 0.13),
    inset 0 -12px 0 rgba(0, 0, 0, 0.32),
    0 -5px 0 rgba(110, 232, 245, 0.2),
    9px 11px 0 rgba(0, 0, 0, 0.36),
    22px 28px 0 rgba(0, 0, 0, 0.14);
}

.industrial-level-page .platform[data-platform^="mid"],
.industrial-level-page .platform[data-platform^="terminal"],
.industrial-level-page .platform[data-platform^="service"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.085) 0 12px, transparent 12px 38px),
    linear-gradient(180deg, #8299a4 0 18%, #526c7b 19% 48%, #2a4251 49% 76%, #12212c 77% 100%);
}

.industrial-level-page .platform.is-terminal-route {
  border-color: #0d171f;
  border-top-color: #172832;
  box-shadow:
    inset 0 6px 0 rgba(255, 255, 255, 0.14),
    inset 0 -11px 0 rgba(0, 0, 0, 0.28),
    0 -5px 0 rgba(110, 232, 245, 0.36),
    0 0 22px rgba(110, 232, 245, 0.22),
    9px 11px 0 rgba(0, 0, 0, 0.34);
}

.industrial-level-page .platform.is-terminal-route span {
  background:
    repeating-linear-gradient(90deg, var(--industrial-edge) 0 18px, transparent 18px 31px);
}

.industrial-level-page .bridge {
  z-index: 5;
  height: 16px;
  border: 4px solid #0d171f;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 46%),
    repeating-linear-gradient(90deg, rgba(110, 232, 245, 0.34) 0 14px, transparent 14px 26px),
    linear-gradient(180deg, #40596a, #152532);
  opacity: 0.96;
  box-shadow:
    inset 0 -5px 0 rgba(0, 0, 0, 0.24),
    7px 8px 0 rgba(0, 0, 0, 0.26);
  transform: skewX(-12deg);
}

.industrial-level-page .prop-mount {
  height: 28px;
  border: 4px solid #070d13;
  border-radius: 5px 5px 3px 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0 6px, transparent 6px),
    repeating-linear-gradient(90deg, rgba(110, 232, 245, 0.2) 0 18px, transparent 18px 34px),
    linear-gradient(180deg, #637c8c, #2d4655 58%, #12202b);
  box-shadow:
    0 -4px 0 rgba(110, 232, 245, 0.22),
    7px 9px 0 rgba(0, 0, 0, 0.32),
    inset 0 -8px rgba(0, 0, 0, 0.22);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
}

.industrial-level-page .prop-mount::before {
  left: 18px;
  right: 18px;
  bottom: 7px;
  height: 7px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, var(--industrial-warning) 0 12px, transparent 12px 22px);
  opacity: 0.82;
}

.industrial-level-page .prop-mount::after {
  left: 50%;
  bottom: -9px;
  width: 18px;
  height: 11px;
  background: linear-gradient(180deg, #526d83, #182939);
  box-shadow:
    -38px 0 0 #172838,
    38px 0 0 #172838,
    0 11px 0 rgba(0, 0, 0, 0.24);
}

.industrial-level-page .prop-mount-terminal {
  height: 34px;
}

.industrial-level-page .checkpoint-sprite,
.industrial-level-page .terminal-sprite,
.industrial-level-page .door-sprite {
  filter:
    drop-shadow(0 7px 0 rgba(0, 0, 0, 0.24))
    drop-shadow(8px 10px 0 rgba(0, 0, 0, 0.24));
}