:root {
  color-scheme: dark;

  --steel: #747774;
  --steel-light: #989b97;
  --steel-dark: #4b4e4b;

  --black: #161716;
  --red: #d44b3e;
  --amber: #f0a43a;

  --panel: #656864;
  --button: #d7d7d0;
  --button-edge: #3a3c39;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
}

html {
  background: #2d302e;
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  overflow: hidden;

  background: #2d302e;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}


/* whole elevator */

.elevator {
  position: relative;

  width: 100vw;
  height: 100vh;
  height: 100dvh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));

  background:
    linear-gradient(
      90deg,
      #323532 0%,
      #4d514d 18%,
      #343734 50%,
      #4a4d49 82%,
      #2f322f 100%
    );
}


/* car */

.car {
  position: relative;

  width: min(1120px, 100%);
  height: min(92dvh, 880px);

  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  grid-template-rows: 92px 1fr;

  overflow: hidden;

  border:
    8px solid
    #3d403d;

  background:
    linear-gradient(
      100deg,
      #777a77,
      #969996 28%,
      #686b68 55%,
      #8b8e8a 78%,
      #666965
    );

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45);
}


/* indicator */

.indicator {
  grid-column: 1 / 2;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;

  border-bottom: 5px solid #454845;

  background: #555855;
}

.indicator::before {
  content: "";

  position: absolute;

  width: 210px;
  height: 54px;

  border: 4px inset #727571;

  background: #101210;
}

.indicator span,
.indicator strong {
  position: relative;
  z-index: 1;

  color: var(--amber);

  font-family:
    "Courier New",
    monospace;

  text-shadow:
    0 0 8px rgba(240, 164, 58, 0.45);
}

.indicator span {
  font-size: 23px;
}

.indicator strong {
  min-width: 50px;

  font-size: 37px;
  font-weight: 400;
  text-align: center;
}


/* opening / doors */

.opening {
  position: relative;

  grid-column: 1 / 2;

  min-width: 0;

  overflow: hidden;

  border-right: 5px solid #424542;

  background: #111;
}

.scene {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  transition:
    background 500ms ease;
}

.scene-copy {
  position: relative;
  z-index: 2;

  margin: 0 0 45px 45px;

  color: white;

  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.65);
}

.scene-copy span {
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.12em;
}

.scene-copy p {
  margin: 6px 0 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(34px, 6vw, 76px);
}


/* floor scenes */

.scene-g {
  background:
    linear-gradient(
      to bottom,
      #d9d2bd 0 15%,
      #eee8d9 15% 72%,
      #b8aa8e 72%
    );
}

.scene-g::before {
  content: "";

  position: absolute;
  left: 12%;
  right: 12%;
  top: 16%;
  bottom: 28%;

  border-left: 10px solid #786b56;
  border-right: 10px solid #786b56;

  background:
    linear-gradient(
      90deg,
      transparent 0 47%,
      #8a7c62 47% 53%,
      transparent 53%
    );
}


.scene-2 {
  background:
    linear-gradient(
      to bottom,
      #dfe7ea 0%,
      #c7d6db 60%,
      #89999d 60%
    );
}

.scene-2::before {
  content: "";

  position: absolute;
  inset: 14% 10% 30%;

  background:
    repeating-linear-gradient(
      90deg,
      #71858c 0 4px,
      transparent 4px 100px
    );

  border-bottom: 16px solid #647b82;
}


.scene-4 {
  background:
    linear-gradient(
      to bottom,
      #f6ebc4 0%,
      #dfcf99 63%,
      #796446 63%
    );
}

.scene-4::before {
  content: "";

  position: absolute;
  left: 13%;
  top: 19%;

  width: 64%;
  height: 34%;

  border: 10px solid #5a462f;

  background:
    linear-gradient(
      #7fa36a 0 40%,
      #b4cf80 40% 70%,
      #6d8f59 70%
    );
}


.scene-7 {
  background:
    linear-gradient(
      to bottom,
      #b2d4e5 0%,
      #d8e6e8 55%,
      #4e7350 55%
    );
}

.scene-7::before {
  content: "";

  position: absolute;
  inset: 6% 6% 18%;

  background:
    radial-gradient(
      ellipse at 15% 80%,
      #375a34 0 14%,
      transparent 15%
    ),
    radial-gradient(
      ellipse at 40% 78%,
      #648748 0 18%,
      transparent 19%
    ),
    radial-gradient(
      ellipse at 74% 82%,
      #2f5632 0 19%,
      transparent 20%
    ),
    radial-gradient(
      ellipse at 90% 75%,
      #789c56 0 15%,
      transparent 16%
    );
}


.scene-12 {
  background:
    linear-gradient(
      to bottom,
      #252a36,
      #424960 55%,
      #161b22 55%
    );
}

.scene-12::before {
  content: "";

  position: absolute;
  inset: 10% 7% 22%;

  background:
    repeating-linear-gradient(
      90deg,
      #151922 0 36px,
      #d5b65c 37px 40px,
      #151922 41px 88px
    );

  opacity: 0.8;
}


.scene-r {
  background:
    linear-gradient(
      to bottom,
      #69a4c7 0 52%,
      #afcdda 52% 57%,
      #778a64 57% 100%
    );
}

.scene-r::before {
  content: "";

  position: absolute;

  left: 8%;
  right: 8%;
  bottom: 14%;

  height: 6px;

  background: #dad4bc;

  box-shadow:
    0 -150px 0 -2px #dad4bc,
    160px -80px 0 -2px #dad4bc;
}


.scene-b1 {
  background:
    linear-gradient(
      to bottom,
      #4e5351,
      #252928 70%
    );
}

.scene-b1::before {
  content: "";

  position: absolute;
  inset: 10% 8%;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 120px,
      rgba(255,255,255,0.06) 120px 122px
    );

  border-bottom:
    4px solid #d9bb36;
}


.scene-b2 {
  background:
    radial-gradient(
      circle at 50% 55%,
      #3a2718 0 12%,
      #21150e 13% 42%,
      #0d0906 72%
    );
}

.scene-b2::before {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 260px;
  height: 260px;

  transform:
    translate(-50%, -50%);

  border:
    2px solid
    rgba(218, 157, 76, 0.25);

  border-radius: 50%;
}


/* doors */

.door {
  position: absolute;
  z-index: 4;

  top: 0;
  bottom: 0;

  width: 50%;

  background:
    linear-gradient(
      100deg,
      #666966,
      #969995 26%,
      #747774 52%,
      #a2a5a1 75%,
      #666966
    );

  transition:
    transform 900ms
    cubic-bezier(.72, 0, .28, 1);

  box-shadow:
    inset 0 0 16px
    rgba(0, 0, 0, 0.18);
}

.door-left {
  left: 0;

  border-right:
    2px solid #333;
}

.door-right {
  right: 0;

  border-left:
    2px solid #333;
}

.door-left .door-seam,
.door-right .door-seam {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 11px;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.2),
      rgba(255,255,255,0.13),
      rgba(0,0,0,0.13)
    );
}

.door-left .door-seam {
  right: 18%;
}

.door-right .door-seam {
  left: 18%;
}

.car.doors-open .door-left {
  transform:
    translateX(-96%);
}

.car.doors-open .door-right {
  transform:
    translateX(96%);
}


/* panel */

.panel {
  grid-column: 2 / 3;
  grid-row: 1 / 3;

  display: flex;
  flex-direction: column;

  padding: 18px 15px;

  border-left:
    1px solid #a5a8a4;

  background:
    linear-gradient(
      100deg,
      #646763,
      #8a8d89 45%,
      #626562
    );
}

.panel-label {
  margin-bottom: 25px;

  color: #282a28;

  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.11em;
  text-align: center;
}

.buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.floor-button {
  appearance: none;

  aspect-ratio: 1;

  border:
    3px outset
    #c6c8c3;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 28%,
      #f1f1ed,
      #bfc0bb 48%,
      #777a76
    );

  color: #20211f;

  font-size: 14px;
  font-weight: bold;

  cursor: pointer;

  box-shadow:
    0 3px 5px rgba(0,0,0,0.28);
}

.floor-button:active {
  border-style: inset;
}

.floor-button.active {
  color: #9e251b;

  box-shadow:
    0 0 0 3px #d94a38,
    0 0 14px rgba(217, 74, 56, 0.55);
}

.door-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

  margin-top: 28px;
}

.door-controls button {
  appearance: none;

  min-height: 42px;

  border:
    2px outset
    #bbbdb8;

  background: #d4d5d0;
  color: #272826;

  font-size: 10px;

  cursor: pointer;
}

.intercom {
  appearance: none;

  margin-top: auto;

  border:
    2px inset
    #7d7f7b;

  padding: 10px 5px;

  background: #4e514e;
  color: #d7d8d3;

  font-size: 8px;
  letter-spacing: 0.08em;

  cursor: pointer;
}

.intercom span {
  display: block;

  margin-bottom: 5px;

  color: #d44838;

  font-size: 13px;
}


/* status */

.status {
  position: absolute;

  left: max(16px, env(safe-area-inset-left));
  bottom: max(12px, env(safe-area-inset-bottom));

  color: rgba(255,255,255,0.52);

  font-family:
    "Courier New",
    monospace;

  font-size: 10px;

  pointer-events: none;
}


/* moving */

.car.moving {
  animation:
    elevator-rattle
    160ms linear infinite;
}

@keyframes elevator-rattle {
  0% {
    transform: translateY(0);
  }

  33% {
    transform: translateY(-1px);
  }

  66% {
    transform: translateY(1px);
  }

  100% {
    transform: translateY(0);
  }
}


/* phone */

@media (max-width: 700px) {
  .elevator {
    padding:
      env(safe-area-inset-top)
      0
      env(safe-area-inset-bottom);
  }

  .car {
    width: 100%;
    height: 100dvh;

    grid-template-columns:
      minmax(0, 1fr)
      86px;

    grid-template-rows:
      74px
      1fr;

    border-width: 0;
  }

  .indicator::before {
    width: 150px;
    height: 45px;
  }

  .indicator strong {
    font-size: 30px;
  }

  .indicator span {
    font-size: 19px;
  }

  .panel {
    padding:
      12px
      8px;
  }

  .panel-label {
    margin-bottom: 16px;

    font-size: 6px;
  }

  .buttons {
    gap: 10px;
  }

  .floor-button {
    font-size: 11px;
  }

  .door-controls {
    margin-top: 18px;
  }

  .door-controls button {
    min-height: 36px;

    padding: 0;

    font-size: 8px;
  }

  .scene-copy {
    margin:
      0
      0
      28px
      22px;
  }

  .scene-copy p {
    font-size:
      clamp(
        31px,
        10vw,
        52px
      );
  }

  .status {
    display: none;
  }
}