/* Rotor block, lampboard, keyboard, plugboard */

.rotors,
.lampboard,
.keyboard,
.plugboard,
.machine-line {
  position: relative;
  z-index: 2;
}

.rotor-settings {
  position: absolute;
  top: 318px;
  left: 50%;
  z-index: 12;
  width: 760px;
  min-height: 0;
  padding: 24px 30px 14px;
  transform: translateX(-50%);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.82);
  color: #ffffff;
  text-align: center;
}

.rotor-settings[hidden] {
  display: none;
}

.rotor-settings-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #ffffff;
  font-family: "Courier New", monospace;
  font-size: 0.96rem;
}

.rotor-settings-table td {
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  text-align: center;
}

.rotor-settings-table select {
  min-width: 74px;
  padding: 5px;
  border: 1px solid #7a7a7a;
  background: #efefef;
  color: #111111;
  font-family: Tahoma, sans-serif;
  font-size: 0.92rem;
  cursor: pointer;
}

.rotor-settings-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.rotor-settings-actions button {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #808080;
  border-radius: 4px;
  background: #e8e8e8;
  color: #111111;
  font-family: Tahoma, sans-serif;
  font-size: 0.86rem;
  cursor: pointer;
}

.rotor-settings-actions button:hover {
  background: #ffffff;
}

.rotors {
  position: absolute;
  --rotors-width: 360px;
  --rotors-height: 280px;
  --rotors-offset-x: 0px;
  --rotors-offset-y: 20px;
  --rotor-top: 56px;
  --rotor-1-x: 76px;
  --rotor-1-offset-y: -15px;
  --rotor-1-width: 33px;
  --rotor-1-height: 178px;
  --rotor-1-window-top: 60px;
  --rotor-2-x: 180px;
  --rotor-2-offset-y: -15px;
  --rotor-2-width: 33px;
  --rotor-2-height: 178px;
  --rotor-2-window-top: 60px;
  --rotor-3-x: 283px;
  --rotor-3-offset-y: -15px;
  --rotor-3-width: 33px;
  --rotor-3-height: 178px;
  --rotor-3-window-top: 60px;
  --rotor-strip-width: 42px;
  --rotor-strip-height: 178px;
  left: 50%;
  top: 0;
  width: var(--rotors-width);
  min-height: 0;
  height: var(--rotors-height);
  margin: 0;
  padding: 0;
  display: block;
  cursor: pointer;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: translateX(calc(-50% + var(--rotors-offset-x))) translateY(var(--rotors-offset-y));
}

.rotors::before {
  display: none;
}

.rotors::after {
  display: none;
}

.rotors-template-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.rotor {
  position: absolute;
  --rotor-width: var(--rotor-strip-width);
  --rotor-height: var(--rotor-strip-height);
  --rotor-window-top: 60px;
  width: var(--rotor-width);
  height: var(--rotor-height);
  top: var(--rotor-top);
  left: var(--rotor-1-x);
  display: grid;
  grid-template-rows: 44px 58px 44px;
  align-content: start;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  box-sizing: border-box;
  transform: translateZ(0);
}

#rotor1 {
  --rotor-width: var(--rotor-1-width);
  --rotor-height: var(--rotor-1-height);
  --rotor-window-top: var(--rotor-1-window-top);
  left: var(--rotor-1-x);
  top: calc(var(--rotor-top) + var(--rotor-1-offset-y));
}

#rotor2 {
  --rotor-width: var(--rotor-2-width);
  --rotor-height: var(--rotor-2-height);
  --rotor-window-top: var(--rotor-2-window-top);
  left: var(--rotor-2-x);
  top: calc(var(--rotor-top) + var(--rotor-2-offset-y));
}

#rotor3 {
  --rotor-width: var(--rotor-3-width);
  --rotor-height: var(--rotor-3-height);
  --rotor-window-top: var(--rotor-3-window-top);
  left: var(--rotor-3-x);
  top: calc(var(--rotor-top) + var(--rotor-3-offset-y));
}

.rotor::before,
.rotor::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.rotor::before {
  display: block;
  left: 50%;
  top: 0;
  z-index: 0;
  width: var(--rotor-width);
  height: 100%;
  transform: translateX(-50%);
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      rgba(4, 4, 4, 0.98) 0%,
      rgba(31, 31, 31, 0.96) 16%,
      rgba(143, 143, 138, 0.76) 48%,
      rgba(28, 28, 28, 0.96) 84%,
      rgba(4, 4, 4, 0.98) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 14%,
      rgba(0, 0, 0, 0.12) 100%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 8px 0 10px rgba(0, 0, 0, 0.56),
    inset -8px 0 10px rgba(0, 0, 0, 0.56),
    0 10px 12px rgba(0, 0, 0, 0.34);
}

.rotor::after {
  display: none;
}

.letter {
  position: relative;
  z-index: 2;
  width: var(--rotor-width);
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #edeae1;
  font-family: "Tahoma", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.85),
    0 0 6px rgba(255, 255, 255, 0.12);
}

button.letter {
  cursor: pointer;
  justify-self: center;
}

.next-letter,
.previous-letter {
  color: rgba(222, 220, 214, 0.58);
}

.current-letter {
  width: var(--rotor-width);
  height: 58px;
  justify-self: center;
  align-self: center;
  transform: translateY(-6px);
  justify-self: center;
  border: 0;
  background: transparent;
  color: #efece2;
  font-size: 1.9rem;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.9),
    0 0 7px rgba(255, 255, 255, 0.16);
}

.next-letter:hover {
  background: transparent;
}

.previous-letter:hover {
  background: transparent;
}

.current-letter:hover {
  background: transparent;
}

.rotor.is-stepping::before {
  animation: gear-tick 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rotor.is-stepping {
  animation: rotor-window-step 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes gear-tick {
  0% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.72;
  }
}

@keyframes rotor-window-step {
  0% {
    transform: translateY(0) translateZ(0);
  }

  48% {
    transform: translateY(2px) translateZ(0);
  }

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

.machine-line {
  width: 100%;
  height: 12px;
  margin: 8px 0;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(3, 3, 3, 0.96) 0 19%,
      rgba(184, 163, 102, 0.9) 19% 23%,
      rgba(3, 3, 3, 0.96) 23% 71%,
      rgba(184, 163, 102, 0.9) 71% 75%,
      rgba(3, 3, 3, 0.96) 75% 100%
    );
  opacity: 1;
  box-shadow:
    0 0 5px 3px rgba(0, 0, 0, 0.32),
    inset 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -2px 3px rgba(0, 0, 0, 0.74);
}

.keyboard + .machine-line {
  margin-top: auto;
}

.lampboard {
  --lampboard-width: 830px;
  --lampboard-height: 280px;
  --lampboard-offset-x: 0px;
  --lampboard-offset-y: 300px;
  --lampboard-margin-top: 0px;
  --lampboard-row-1-width: calc(100% - 90px);
  --lampboard-row-1-offset-x: 0px;
  --lampboard-row-1-offset-y: 40px;
  --lampboard-row-2-width: calc(100% - 176px);
  --lampboard-row-2-offset-x: 0px;
  --lampboard-row-2-offset-y: 60px;
  --lampboard-row-3-width: calc(100% - 98px);
  --lampboard-row-3-offset-x: 0px;
  --lampboard-row-3-offset-y: 80px;
  position: absolute;
  z-index: 3;
  left: 50%;
  width: var(--lampboard-width);
  height: var(--lampboard-height);
  margin: 0;
  top: calc(var(--lampboard-margin-top) + var(--lampboard-offset-y));
  padding: 22px 24px 14px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: url("/assets/text-mode/media/latun.png") center / 100% 100% no-repeat;
  box-shadow: none;
  transform: translateX(calc(-50% + var(--lampboard-offset-x)));
}

.lampboard::before,
.keyboard::before,
.plugboard::before {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
}

.lampboard::before {
  display: none;
}

.lampboard + .machine-line {
  display: none;
}

.keyboard {
  --keyboard-width: 830px;
  --keyboard-height: 270px;
  --keyboard-offset-x: 2px;
  --keyboard-offset-y: 582px;
  --keyboard-margin-top: 0px;
  --keyboard-content-top: 46px;
  --keyboard-content-bottom: 20px;
  --keyboard-row-1-width: calc(100% - 50px);
  --keyboard-row-1-offset-x: 0px;
  --keyboard-row-1-offset-y: 20px;
  --keyboard-row-2-width: calc(100% - 124px);
  --keyboard-row-2-offset-x: 0px;
  --keyboard-row-2-offset-y: 10px;
  --keyboard-row-3-width: calc(100% - 50px);
  --keyboard-row-3-offset-x: 0px;
  --keyboard-row-3-offset-y: -4px;
  position: absolute;
  z-index: 3;
  left: 50%;
  width: var(--keyboard-width);
  height: var(--keyboard-height);
  margin: 0;
  top: calc(var(--keyboard-margin-top) + var(--keyboard-offset-y));
  padding: var(--keyboard-content-top) 24px var(--keyboard-content-bottom);
  box-sizing: border-box;
  border: 1px solid rgba(57, 47, 34, 0.88);
  border-radius: 0 0 4px 4px;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.05), transparent 24%),
    linear-gradient(100deg, rgba(255, 255, 255, 0.045), transparent 24% 76%, rgba(0, 0, 0, 0.38)),
    #070707 url("/assets/text-mode/media/pechatalka.png") center / cover no-repeat;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -18px 26px rgba(0, 0, 0, 0.28);
  transform: translateX(calc(-50% + var(--keyboard-offset-x)));
}

.keyboard::before {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.03),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

#keyboard-board {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.keyboard + .machine-line {
  display: none;
}

.plugboard {
  --plugboard-ledge-width: 100%;
  --plugboard-ledge-height: 44px;
  --plugboard-ledge-offset-y: -40px;
  --plugboard-ledge-offset-x: 0px;
  --plugboard-offset-x: 0px;
  --plugboard-offset-y: 892px;
  position: absolute;
  z-index: 3;
  left: 50%;
  width: 790px;
  height: 270px;
  margin: 0;
  top: 0;
  padding: 52px 44px 28px;
  box-sizing: border-box;
  border: 1px solid rgba(57, 47, 34, 0.88);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, 0.025), transparent 22%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0.42)),
    linear-gradient(100deg, rgba(255, 255, 255, 0.02), transparent 20% 74%, rgba(0, 0, 0, 0.54)),
    #040404 url("/assets/text-mode/media/metallic-texture.jpg") center / 100% 100% no-repeat;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.03),
    inset 0 -24px 34px rgba(0, 0, 0, 0.5),
    inset 18px 0 24px rgba(0, 0, 0, 0.18),
    inset -18px 0 24px rgba(0, 0, 0, 0.18),
    0 18px 30px rgba(0, 0, 0, 0.36),
    0 34px 56px rgba(0, 0, 0, 0.22);
  transform: translateX(calc(-50% + var(--plugboard-offset-x))) translateY(var(--plugboard-offset-y));
}

.plugboard::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 20%, rgba(0, 0, 0, 0.16) 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.02),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.plugboard::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--plugboard-ledge-offset-y);
  width: var(--plugboard-ledge-width);
  height: var(--plugboard-ledge-height);
  transform: translateX(calc(-50% + var(--plugboard-ledge-offset-x)));
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(64, 43, 24, 0.66), rgba(18, 11, 7, 0.78)),
    url("/assets/text-mode/media/wood-board-h.jpg") center / cover no-repeat;
  box-shadow:
    inset 0 1px rgba(255, 244, 214, 0.08),
    inset 0 -10px 18px rgba(0, 0, 0, 0.28),
    0 12px 18px rgba(0, 0, 0, 0.26);
  pointer-events: none;
}

.plugboard-bolt {
  position: absolute;
  z-index: 4;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 245, 222, 0.92) 0 10%, rgba(217, 198, 150, 0.78) 11% 24%, rgba(114, 93, 63, 0.96) 25% 64%, rgba(28, 22, 17, 0.98) 65% 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.34),
    inset 0 -2px 3px rgba(0, 0, 0, 0.54),
    0 1px 0 rgba(255, 236, 193, 0.18),
    0 3px 6px rgba(0, 0, 0, 0.42);
}

.plugboard-bolt::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(18, 14, 10, 0.92), rgba(63, 49, 35, 0.82));
  box-shadow: 0 1px rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%) rotate(var(--bolt-angle, -26deg));
}

.plugboard-bolt--tl {
  --bolt-offset-x: 0px;
  --bolt-offset-y: -40px;
  --bolt-angle: -28deg;
  left: 14px;
  top: 14px;
  transform: translate(var(--bolt-offset-x), var(--bolt-offset-y));
}

.plugboard-bolt--tr {
  --bolt-offset-x: 0px;
  --bolt-offset-y: -40px;
  --bolt-angle: 22deg;
  right: 14px;
  top: 14px;
  transform: translate(var(--bolt-offset-x), var(--bolt-offset-y));
}

.plugboard-bolt--bl {
  --bolt-offset-x: 0px;
  --bolt-offset-y: 0px;
  --bolt-angle: 30deg;
  left: 14px;
  bottom: 14px;
  transform: translate(var(--bolt-offset-x), var(--bolt-offset-y));
}

.plugboard-bolt--br {
  --bolt-offset-x: 0px;
  --bolt-offset-y: 0px;
  --bolt-angle: -20deg;
  right: 14px;
  bottom: 14px;
  transform: translate(var(--bolt-offset-x), var(--bolt-offset-y));
}

.plugboard-wires {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

#plugboard-board {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 46px;
  padding-inline: 18px;
}

.plug-wire {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.plug-wire-shadow {
  stroke: rgba(0, 0, 0, 0.88);
  stroke-width: 16px;
  opacity: 0.92;
  filter: drop-shadow(0 9px 7px rgba(0, 0, 0, 0.74));
}

.plug-wire-body {
  stroke: color-mix(in srgb, var(--wire-color, #d6c07b) 82%, black 18%);
  stroke-width: 9px;
  opacity: 0.94;
}

.plug-wire-highlight {
  stroke: rgba(230, 216, 166, 0.16);
  stroke-width: 2px;
  opacity: 0.46;
}

.plug-wire-node {
  fill: #050505;
  stroke: var(--wire-color, #d6c07b);
  stroke-width: 2px;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.74));
}

.plug-wire-group.is-new {
  animation: none;
}

@keyframes wire-settle {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.board-row {
  display: flex;
  justify-content: flex-start;
}

.lampboard .board-row:nth-child(2),
.keyboard .board-row:nth-child(2) {
  padding-left: 0;
}

.lampboard .board-row:nth-child(3),
.keyboard .board-row:nth-child(3) {
  padding-left: 0;
}

.lampboard .board-row {
  width: var(--lampboard-row-1-width);
  margin: 0 auto;
  justify-content: space-between;
  transform: translate(var(--lampboard-row-1-offset-x), var(--lampboard-row-1-offset-y));
}

.lampboard .board-row:nth-child(2) {
  width: var(--lampboard-row-2-width);
  margin-top: 0;
  transform: translate(var(--lampboard-row-2-offset-x), var(--lampboard-row-2-offset-y));
}

.lampboard .board-row:nth-child(3) {
  width: var(--lampboard-row-3-width);
  margin-top: 0;
  transform: translate(var(--lampboard-row-3-offset-x), var(--lampboard-row-3-offset-y));
}

.keyboard .board-row {
  width: var(--keyboard-row-1-width);
  margin: 0 auto;
  justify-content: space-between;
  transform: translate(var(--keyboard-row-1-offset-x), var(--keyboard-row-1-offset-y));
}

.keyboard .board-row:nth-child(2) {
  width: var(--keyboard-row-2-width);
  margin-top: 0;
  transform: translate(var(--keyboard-row-2-offset-x), var(--keyboard-row-2-offset-y));
}

.keyboard .board-row:nth-child(3) {
  width: var(--keyboard-row-3-width);
  margin-top: 0;
  transform: translate(var(--keyboard-row-3-offset-x), var(--keyboard-row-3-offset-y));
}

.plugboard .board-row:nth-child(2) {
  padding-left: 0;
}

.plugboard .board-row:nth-child(3) {
  padding-left: 0;
}

.lamp,
.key-button,
.plug-button {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 3px;
  border-radius: 50%;
  font-family: Tahoma, sans-serif;
  transform: translateZ(0);
}

.board-letter {
  position: relative;
  z-index: 2;
}

.lamp {
  width: 40px;
  height: 40px;
  margin: 6px 12px;
  overflow: hidden;
  border: 2px solid rgba(105, 79, 31, 0.9);
  color: #4b391b;
  font-size: 12pt;
  font-weight: 700;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 245, 203, 0.42) 0 11%, rgba(136, 104, 40, 0.45) 12% 32%, rgba(68, 46, 16, 0.8) 33% 54%, rgba(219, 197, 138, 0.9) 55% 72%, rgba(109, 81, 35, 0.92) 73% 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.28),
    inset 0 -6px 10px rgba(65, 43, 13, 0.46),
    0 3px 6px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px rgba(255, 244, 195, 0.35);
  cursor: default;
}

.lamp:disabled {
  opacity: 1;
}

.lamp::before,
.lamp::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.lamp::before {
  inset: 6px;
  z-index: 0;
  background:
    radial-gradient(circle at 48% 44%, rgba(255, 249, 215, 0.42) 0 18%, rgba(171, 137, 60, 0.42) 19% 56%, rgba(77, 53, 17, 0.94) 76% 100%);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.26),
    inset 0 -4px 6px rgba(0, 0, 0, 0.36);
}

.lamp::after {
  top: 6px;
  left: 7px;
  z-index: 1;
  width: 11px;
  height: 7px;
  background: rgba(255, 255, 255, 0.34);
  opacity: 0.62;
}

.lamp.is-lit {
  color: #3e2407;
  background:
    radial-gradient(circle at 50% 50%, #fff9d8 0 26%, #f3cd6f 27% 52%, #9a6d1c 53% 73%, #5c3a0b 74% 100%);
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.46),
    inset 0 -8px 12px rgba(136, 90, 17, 0.64),
    0 0 9px rgba(255, 205, 85, 0.55),
    0 0 22px rgba(255, 183, 41, 0.28),
    0 5px 8px rgba(0, 0, 0, 0.32);
  text-shadow: 0 1px rgba(255, 247, 196, 0.7);
}

.lamp.is-lit::before {
  background:
    radial-gradient(circle at 48% 44%, #fffbd0 0 18%, #f9cc50 19% 42%, #925a12 62%, #1b1205 100%);
}

.lamp.is-fresh {
  animation: lamp-ignite 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lamp-ignite {
  0% {
    transform: translateZ(0) scale(0.9);
    filter: brightness(0.72);
  }

  46% {
    transform: translateZ(0) scale(1.08);
    filter: brightness(1.5);
  }

  100% {
    transform: translateZ(0) scale(1);
    filter: none;
  }
}

.key-button {
  width: 40px;
  height: 40px;
  margin: 0 2px;
  overflow: hidden;
  border: 2px solid #c3bbb0;
  color: #f1eee6;
  font-size: 13pt;
  font-weight: 700;
  background:
    radial-gradient(circle at 34% 24%, #74726b 0 8%, #242424 26%, #050505 61%, #1e1e1d 84%, #050505 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.24),
    inset 0 -8px 12px rgba(0, 0, 0, 0.92),
    0 5px 0 #070707,
    0 11px 15px rgba(0, 0, 0, 0.72);
  cursor: pointer;
  text-shadow:
    0 1px #000000,
    0 0 4px rgba(255, 255, 255, 0.2);
  transition:
    transform 110ms cubic-bezier(0.25, 1, 0.5, 1),
    border-color 120ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 120ms cubic-bezier(0.25, 1, 0.5, 1),
    color 120ms cubic-bezier(0.25, 1, 0.5, 1);
}

.key-button::before,
.key-button::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.key-button::before {
  inset: 4px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.16) 0 6%, transparent 18%),
    radial-gradient(circle at 50% 56%, #161616 0 55%, #020202 100%);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.1),
    inset 0 -5px 7px rgba(0, 0, 0, 0.92);
}

.key-button::after {
  top: 7px;
  left: 10px;
  width: 15px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  filter: blur(0.6px);
  opacity: 0.82;
}

.key-button:hover {
  transform: translateY(-1px);
  border-color: #fff4d2;
  color: #ffffff;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.3),
    inset 0 -8px 12px rgba(0, 0, 0, 0.92),
    0 6px 0 #070707,
    0 13px 16px rgba(0, 0, 0, 0.76);
}

.key-button:active,
.key-button.is-active {
  transform: translateY(4px) scale(0.98);
  border-color: #f6d482;
  color: #f7d889;
  box-shadow:
    inset 0 3px 7px rgba(0, 0, 0, 0.86),
    inset 0 -3px 5px rgba(255, 255, 255, 0.08),
    0 1px 0 #050505,
    0 5px 8px rgba(0, 0, 0, 0.74);
}

.key-button:disabled {
  opacity: 0.86;
  cursor: default;
}

.plug-button {
  --plug-color: #aaaaaa;
  width: 32px;
  height: 32px;
  margin: 0;
  overflow: visible;
  border: 2px solid var(--plug-color);
  color: transparent;
  font-size: 11pt;
  text-shadow: none;
  background:
    radial-gradient(circle at 50% 50%, #e0e0e0 0 3px, #040404 4px 10px, #3e3e3e 11px 14px, #040404 15px 100%);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.14),
    inset 0 -6px 9px rgba(0, 0, 0, 0.92),
    0 6px 10px rgba(0, 0, 0, 0.78);
  cursor: pointer;
  transition:
    transform 130ms cubic-bezier(0.25, 1, 0.5, 1),
    border-color 130ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 130ms cubic-bezier(0.25, 1, 0.5, 1);
}

.plugboard .board-row {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}

.plugboard .board-row:nth-child(2) {
  width: calc(100% - 78px);
  margin: 0 auto;
}

.plugboard .board-row:nth-child(3) {
  width: 100%;
}

.plug-button:hover {
  --plug-color: #ffffff;
  transform: translateY(-1px);
}

.plug-button .board-letter {
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  color: var(--plug-color);
  font-family: "Allerta Stencil", sans-serif;
  font-size: 0.86rem;
  line-height: 1;
  text-shadow: 0 1px rgba(0, 0, 0, 0.88);
}

.plug-button.is-pending {
  --plug-color: #f8b500;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.22),
    inset 0 -4px 7px rgba(0, 0, 0, 0.86),
    0 0 0 3px rgba(248, 181, 0, 0.18),
    0 5px 9px rgba(0, 0, 0, 0.72);
}

.plug-button.is-paired {
  --plug-color: var(--paired-color, #fceabb);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.22),
    inset 0 -4px 7px rgba(0, 0, 0, 0.86),
    0 0 0 3px color-mix(in srgb, var(--paired-color, #fceabb) 22%, transparent),
    0 5px 9px rgba(0, 0, 0, 0.72);
}

.plugboard-active {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -63px;
  width: max-content;
  max-width: calc(100% - 80px);
  margin: 0;
  padding: 5px 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(214, 196, 132, 0.22);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.62);
  color: rgba(255, 255, 255, 0.68);
  font-family: "Courier New", monospace;
  font-size: 0.92rem;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hardware-control,
  .hardware-control::before,
  .hardware-control::after,
  .key-button,
  .plug-button,
  .rotor,
  .rotor::before {
    transition: none;
  }

  .hardware-control.is-kicked,
  .lamp.is-fresh,
  .rotor.is-stepping,
  .rotor.is-stepping::before,
  .plug-wire-group.is-new {
    animation: none;
  }
}