.puzzle-lock-link {
  text-decoration: underline;
}

.puzzle-locks-locked {
  color: red;
}

#interface:has(#sidebar.collapsed) .puzzle-lock {
  width: 100%;
}

.puzzle-lock {
  --lock-primary-color-r: 255;
  --lock-primary-color-g: 255;
  --lock-primary-color-b: 255;
  --lock-primary-color-100: rgb(var(--lock-primary-color-r), var(--lock-primary-color-g), var(--lock-primary-color-b));
  --lock-primary-color-50: rgba(var(--lock-primary-color-r), var(--lock-primary-color-g), var(--lock-primary-color-b), 0.5);
  --lock-primary-color-25: rgba(var(--lock-primary-color-r), var(--lock-primary-color-g), var(--lock-primary-color-b), 0.25);
  --lock-secondary-color-r: 0;
  --lock-secondary-color-g: 0;
  --lock-secondary-color-b: 0;
  --lock-secondary-color-100: rgb(var(--lock-secondary-color-r), var(--lock-secondary-color-g), var(--lock-secondary-color-b));
  --lock-secondary-color-50: rgba(var(--lock-secondary-color-r), var(--lock-secondary-color-g), var(--lock-secondary-color-b), 0.5);
  --lock-secondary-color-25: rgba(var(--lock-secondary-color-r), var(--lock-secondary-color-g), var(--lock-secondary-color-b), 0.25);
  --lock-primary-font: inherit;
  --lock-secondary-font: inherit;
  --lock-text-color: white;
  --zoom-level: 1;
  --lock-font-size: calc(var(--zoom-level) * 2rem);
  --glow-size-regular: 5px;
  --glow-size-large: calc(var(--glow-size-regular) * 2);
  --glow-size-small: calc(var(--glow-size-regular) / 2);
  width: calc(100% - var(--sidebar-width));
  left: 0;
  height: 100%;
  position: absolute;
  z-index: 2;
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7098039216);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  font-family: var(--lock-primary-font);
  --puzzle-lock-button-color: white;
}
.puzzle-lock .attempts-label {
  color: red;
  padding: 1rem;
}
.puzzle-lock .puzzle-lock-interactions {
  position: absolute;
  right: 0;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5882352941);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transform: translateX(5px);
  z-index: 1;
}
.puzzle-lock .puzzle-lock-interactions .puzzle-lock-buttons {
  display: flex;
  flex-direction: column;
}
.puzzle-lock .puzzle-lock-interactions .puzzle-lock-buttons button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--puzzle-lock-button-color);
  font-size: 4rem;
  padding: 1rem;
  transition: text-shadow 0.2s ease-in-out;
}
.puzzle-lock .puzzle-lock-interactions .puzzle-lock-buttons button:hover {
  text-shadow: 0 0 var(--glow-size-large) var(--puzzle-lock-button-color);
  box-shadow: none;
}
.puzzle-lock .puzzle-lock-interactions .puzzle-lock-buttons button:active, .puzzle-lock .puzzle-lock-interactions .puzzle-lock-buttons button:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
.puzzle-lock .puzzle-lock-inner {
  display: flex;
  flex-direction: column;
  max-width: calc(12 * var(--lock-font-size));
  border: 2px solid var(--lock-primary-color-100);
  border-radius: 1rem;
  padding: calc(0.5 * var(--lock-font-size));
  background-color: rgba(0, 0, 0, 0.7098039216);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.puzzle-lock .puzzle-lock-inner p.notes {
  color: var(--lock-text-color);
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;
  opacity: 0.8;
}
.puzzle-lock .puzzle-lock-inner h1 {
  color: var(--lock-text-color);
  font-size: calc(1 * var(--lock-font-size));
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0;
  text-shadow: 0 0 var(--glow-size-regular) var(--lock-text-color);
  border: none;
}

#interface {
  position: relative;
}

.puzzle-lock #number-lock input {
  width: 100%;
  font-size: calc(2 * var(--lock-font-size));
  text-align: center;
  border: 1px solid var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  border-radius: 0;
  margin-bottom: 2rem;
  height: calc(2 * var(--lock-font-size));
  color: var(--lock-primary-color-100);
  text-shadow: 0 0 var(--glow-size-large) var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100), 0 0 var(--glow-size-regular) var(--lock-primary-color-100) inset;
  filter: brightness(1.2);
  pointer-events: none;
}
.puzzle-lock #number-lock input:active, .puzzle-lock #number-lock input:focus {
  outline: none;
  box-shadow: none;
}
.puzzle-lock #number-lock .keypad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: calc(0.5 * var(--lock-font-size));
  justify-items: center;
  align-items: center;
  justify-content: center;
}
.puzzle-lock #number-lock .keypad-grid .keypad-button {
  aspect-ratio: 1;
  font-size: calc(2 * var(--lock-font-size));
  font-family: var(--lock-secondary-font);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  width: calc(3 * var(--lock-font-size));
  height: calc(3 * var(--lock-font-size));
  color: var(--lock-text-color);
  background-color: transparent;
  border: 2px solid var(--lock-primary-color-100);
  border-radius: 5px;
  transition: all 0.1s ease-in-out;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.puzzle-lock #number-lock .keypad-grid .keypad-button:hover {
  box-shadow: 0 0 8px var(--lock-primary-color-100), 0 0 8px var(--lock-primary-color-100) inset;
  background-color: var(--lock-primary-color-25);
}
.puzzle-lock #number-lock .keypad-grid .keypad-button:focus, .puzzle-lock #number-lock .keypad-grid .keypad-button:active {
  box-shadow: 0 0 8px var(--lock-primary-color-100), 0 0 8px var(--lock-primary-color-100) inset;
}
.puzzle-lock #password-lock input {
  width: 100%;
  font-size: calc(2 * var(--lock-font-size));
  text-align: center;
  border: 1px solid var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  border-radius: 0;
  height: calc(2 * var(--lock-font-size));
  color: var(--lock-primary-color-100);
  text-shadow: 0 0 var(--glow-size-large) var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100), 0 0 var(--glow-size-regular) var(--lock-primary-color-100) inset;
  filter: brightness(1.2);
}
.puzzle-lock #password-lock input:active, .puzzle-lock #password-lock input:focus {
  outline: none;
  box-shadow: none;
}
.puzzle-lock #item-lock .item-lock-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  gap: var(--lock-font-size);
}
.puzzle-lock #item-lock .item-lock-items .item-lock-item {
  width: calc(var(--lock-font-size) * 2);
  height: calc(var(--lock-font-size) * 2);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--glow-size-regular);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
}
.puzzle-lock #item-lock .item-lock-items .item-lock-item:not(.has-item) {
  filter: grayscale(1);
}
.puzzle-lock #switches-lock {
  --switch-bg-off: #ff1600;
  --switch-bg-on: var(--lock-secondary-color-100);
}
@keyframes brightness-pulse {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
  100% {
    filter: brightness(1);
  }
}
.puzzle-lock #switches-lock .switches-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.puzzle-lock #switches-lock .switches-container.showSwitches .switch-container .switch-button {
  display: flex;
}
.puzzle-lock #switches-lock .switches-container.showSwitches .switch-container .switch-light {
  width: calc(var(--lock-font-size) / 2);
  height: calc(var(--lock-font-size) / 2);
}
.puzzle-lock #switches-lock .switches-container .switch-container {
  width: calc(2 * var(--lock-font-size));
  height: calc(2 * var(--lock-font-size));
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.puzzle-lock #switches-lock .switches-container .switch-container .switch-light {
  width: calc(var(--lock-font-size));
  height: calc(var(--lock-font-size));
  border-radius: 50%;
  background-color: var(--switch-bg-off);
  border: 2px solid var(--lock-primary-color-100);
  box-shadow: 0 0 3px var(--lock-primary-color-100), 0 0 3px var(--lock-primary-color-100) inset;
  animation: brightness-pulse 5s infinite ease-in-out;
}
.puzzle-lock #switches-lock .switches-container .switch-container .switch-button {
  width: calc(var(--lock-font-size) / 2);
  height: calc(var(--lock-font-size));
  border: 2px solid var(--lock-primary-color-100);
  box-shadow: 0 0 3px var(--lock-primary-color-100), 0 0 3px var(--lock-primary-color-100) inset;
  border-radius: calc(var(--lock-font-size));
  display: none;
  justify-content: center;
  position: relative;
}
.puzzle-lock #switches-lock .switches-container .switch-container .switch-button .switch-dot {
  width: calc(var(--lock-font-size) / 3);
  height: calc(var(--lock-font-size) / 3);
  border-radius: 50%;
  background-color: var(--lock-primary-color-100);
  position: absolute;
  bottom: calc(var(--lock-font-size) / 15);
}
.puzzle-lock #switches-lock .switches-container .switch-container.active .switch-light {
  background-color: var(--switch-bg-on);
}
.puzzle-lock #switches-lock .switches-container .switch-container.active .switch-button .switch-dot {
  bottom: unset;
  top: calc(var(--lock-font-size) / 15);
}
.puzzle-lock #cryptex-lock {
  max-width: none;
}
.puzzle-lock #cryptex-lock .cryptex-container {
  display: flex;
  color: var(--lock-text-color);
  gap: calc(0.5 * var(--lock-font-size));
}
.puzzle-lock #cryptex-lock .cryptex-container .arrow-left,
.puzzle-lock #cryptex-lock .cryptex-container .arrow-right {
  font-size: calc(3 * var(--lock-font-size));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(0, 0, 0, 0.8);
}
.puzzle-lock #cryptex-lock .cryptex-container .arrow-left {
  margin-right: calc(-0.3 * var(--lock-font-size));
}
.puzzle-lock #cryptex-lock .cryptex-container .arrow-right {
  margin-left: calc(-0.3 * var(--lock-font-size));
}
.puzzle-lock #cryptex-lock .cryptex-container .cylinder {
  display: flex;
  flex-direction: column;
}
.puzzle-lock #cryptex-lock .cryptex-container .cylinder .symbol {
  font-size: calc(1.7 * var(--lock-font-size));
  text-align: center;
  color: var(--lock-text-color);
  border: 1px solid var(--lock-text-color);
  width: calc(4 * var(--lock-font-size));
  height: calc(2 * var(--lock-font-size));
  display: flex;
  background-color: var(--lock-primary-color-100);
  text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.puzzle-lock #cryptex-lock .cryptex-container .cylinder .symbol:not(:last-child) {
  border-bottom: 3px solid var(--lock-text-color);
}
.puzzle-lock #cryptex-lock input {
  display: none;
}
.puzzle-lock #password-lock {
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.puzzle-lock #password-lock .sudoku-grid {
  display: grid;
}
.puzzle-lock #password-lock .sudoku-cell {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  font-size: calc(2 * var(--lock-font-size));
  text-align: center;
  border: 1px solid var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  border-radius: 0;
  height: calc(2 * var(--lock-font-size));
  color: var(--lock-text-color);
  text-shadow: 0 0 var(--glow-size-large) var(--lock-text-color);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-text-color), 0 0 var(--glow-size-regular) var(--lock-text-color) inset;
  filter: brightness(1.2);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.puzzle-lock #password-lock .sudoku-cell.isFA {
  font-size: calc(1.2 * var(--lock-font-size));
}
.puzzle-lock #password-lock .sudoku-cell.locked {
  border-color: var(--lock-secondary-color-100);
  background-color: var(--lock-secondary-color-50);
}
.puzzle-lock #password-lock .sudoku-cell:active, .puzzle-lock #password-lock .sudoku-cell:focus {
  outline: none;
  box-shadow: none;
}
.puzzle-lock #image-wheel {
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.puzzle-lock #image-wheel .wheels-container {
  position: relative;
  width: calc(20 * var(--lock-font-size));
  height: calc(20 * var(--lock-font-size));
  display: flex;
  justify-content: center;
  align-items: center;
}
.puzzle-lock #image-wheel .wheels-container .wheel {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid var(--lock-secondary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-secondary-color-100), 0 0 var(--glow-size-regular) var(--lock-secondary-color-100) inset;
  transition: filter 0.3s ease-in-out;
}
.puzzle-lock #image-wheel .wheels-container .wheel:hover {
  filter: brightness(1.2);
}
.puzzle-lock #image-wheel .wheels-container .wheel .wheel-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.puzzle-lock #mastermind-lock {
  color: var(--lock-text-color);
  max-width: unset;
}
.puzzle-lock #mastermind-lock .previous-attempts {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-family: var(--lock-secondary-font);
  max-height: 50vh;
  overflow-y: auto;
}
.puzzle-lock #mastermind-lock .previous-attempts .attempt-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: calc(var(--lock-font-size) / 2);
  border-bottom: 1px solid var(--lock-primary-color-100);
}
.puzzle-lock #mastermind-lock .previous-attempts .attempt-container .mastermind-pip {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(2 * var(--lock-font-size));
  height: calc(1 * var(--lock-font-size));
}
.puzzle-lock #mastermind-lock .previous-attempts .attempt-container .mastermind-pip .pip-inner {
  width: calc(0.5 * var(--lock-font-size));
  height: calc(0.5 * var(--lock-font-size));
  border-radius: 50%;
  border: 2px solid var(--lock-secondary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-secondary-color-100), 0 0 var(--glow-size-regular) var(--lock-secondary-color-100) inset;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(0.35 * var(--lock-font-size));
}
.puzzle-lock #mastermind-lock .current-attempt {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: calc(var(--lock-font-size) / 2);
  font-family: var(--lock-secondary-font);
}
.puzzle-lock #mastermind-lock .current-attempt .mastermind-pip {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(2 * var(--lock-font-size));
  height: calc(2 * var(--lock-font-size));
}
.puzzle-lock #mastermind-lock .current-attempt .mastermind-pip .pip-inner {
  width: calc(1 * var(--lock-font-size));
  height: calc(1 * var(--lock-font-size));
  border-radius: 50%;
  border: 3px solid var(--lock-secondary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-secondary-color-100), 0 0 var(--glow-size-regular) var(--lock-secondary-color-100) inset;
  transition: filter 0.2s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(0.6 * var(--lock-font-size));
}
.puzzle-lock #mastermind-lock .current-attempt .mastermind-pip .pip-inner:hover {
  filter: brightness(1.4);
}
.puzzle-lock #mastermind-lock input {
  width: 100%;
  font-size: calc(2 * var(--lock-font-size));
  text-align: center;
  border: 1px solid var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  border-radius: 0;
  height: calc(2 * var(--lock-font-size));
  color: var(--lock-primary-color-100);
  text-shadow: 0 0 var(--glow-size-large) var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100), 0 0 var(--glow-size-regular) var(--lock-primary-color-100) inset;
  filter: brightness(1.2);
}
.puzzle-lock #mastermind-lock input:active, .puzzle-lock #mastermind-lock input:focus {
  outline: none;
  box-shadow: none;
}
.puzzle-lock #fill-blanks-lock {
  font-size: calc(2 * var(--lock-font-size));
  color: var(--lock-text-color);
  max-width: 75%;
}
.puzzle-lock #fill-blanks-lock span {
  display: inline-block;
  width: calc(var(--lock-font-size));
  min-width: -moz-fit-content;
  min-width: fit-content;
  height: calc(2 * var(--lock-font-size));
  text-align: center;
}
.puzzle-lock #fill-blanks-lock input {
  width: calc(var(--lock-font-size));
  min-width: calc(var(--lock-font-size) * 1.2);
  height: calc(2 * var(--lock-font-size));
  text-align: center;
  color: var(--lock-text-color);
  border: none;
  border-bottom: 1px solid var(--lock-text-color);
  border-radius: 0;
}
.puzzle-lock #fill-blanks-lock input:focus, .puzzle-lock #fill-blanks-lock input:active {
  outline: none;
  box-shadow: none;
}
.puzzle-lock #fill-blanks-lock input::-moz-placeholder {
  color: var(--lock-text-color);
}
.puzzle-lock #fill-blanks-lock input::placeholder {
  color: var(--lock-text-color);
}
.puzzle-lock #fill-blanks-lock .phrase-container {
  display: flex;
  flex-wrap: wrap;
}
.puzzle-lock #mosaic-lock {
  --mosaic-size: 600px;
  max-width: unset;
}
.puzzle-lock #mosaic-lock .mosaic-container {
  width: var(--mosaic-size);
  height: var(--mosaic-size);
  display: grid;
}
.puzzle-lock #mosaic-lock .mosaic-container .tile-container {
  overflow: hidden;
  transition: filter 0.2s;
}
.puzzle-lock #mosaic-lock .mosaic-container .tile-container:hover {
  filter: brightness(1.5);
}
.puzzle-lock #mosaic-lock .mosaic-container .tile-container .mosaic-tile {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: var(--mosaic-size);
  height: var(--mosaic-size);
  pointer-events: none;
}
.puzzle-lock #sound-lock {
  max-width: unset;
}
.puzzle-lock #sound-lock .sequence-container {
  height: calc(8 * var(--lock-font-size));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  justify-content: space-evenly;
  gap: calc(1 * var(--lock-font-size));
  margin: calc(1 * var(--lock-font-size)) 0;
}
.puzzle-lock #sound-lock .sequence-container .chord-container {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(1 * var(--lock-font-size));
  width: calc(1 * var(--lock-font-size));
}
.puzzle-lock #sound-lock .sequence-container .chord-container .chord-dot {
  width: calc(0.5 * var(--lock-font-size));
  height: calc(0.5 * var(--lock-font-size));
  border-radius: 50%;
  background-color: var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  position: absolute;
}
.puzzle-lock #sound-lock .solution-sequence-container {
  color: var(--lock-text-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  justify-content: space-evenly;
}
.puzzle-lock #sound-lock .solution-sequence-container span {
  font-size: calc(1.7 * var(--lock-font-size));
  width: calc(2 * var(--lock-font-size));
  text-align: center;
  border: 1px solid;
  margin: calc(0.2 * var(--lock-font-size));
  border-radius: 50%;
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  text-shadow: 0 0 var(--glow-size-large) var(--lock-primary-color-100);
}
.puzzle-lock #sound-lock input {
  width: 100%;
  font-size: calc(2 * var(--lock-font-size));
  text-align: center;
  border: 1px solid var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  border-radius: 0;
  height: calc(2 * var(--lock-font-size));
  color: var(--lock-primary-color-100);
  text-shadow: 0 0 var(--glow-size-large) var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100), 0 0 var(--glow-size-regular) var(--lock-primary-color-100) inset;
  filter: brightness(1.2);
}
.puzzle-lock #sound-lock input:active, .puzzle-lock #sound-lock input:focus {
  outline: none;
  box-shadow: none;
}
.puzzle-lock #fifteen-lock {
  --mosaic-size: 600px;
  max-width: unset;
}
.puzzle-lock #fifteen-lock .mosaic-container {
  width: var(--mosaic-size);
  height: var(--mosaic-size);
  display: grid;
}
.puzzle-lock #fifteen-lock .mosaic-container .tile-container {
  overflow: hidden;
  transition: filter 0.2s;
}
.puzzle-lock #fifteen-lock .mosaic-container .tile-container:hover {
  filter: brightness(1.5);
}
.puzzle-lock #fifteen-lock .mosaic-container .tile-container .mosaic-tile {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: var(--mosaic-size);
  height: var(--mosaic-size);
  pointer-events: none;
}
.puzzle-lock #four-by-four-lock {
  color: var(--lock-text-color);
  max-width: unset;
}
.puzzle-lock #four-by-four-lock .puzzle-table-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.puzzle-lock #four-by-four-lock .puzzle-table-container .puzzle-row-display-item,
.puzzle-lock #four-by-four-lock .puzzle-table-container .puzzle-col-display-item,
.puzzle-lock #four-by-four-lock .puzzle-table-container .puzzle-item {
  width: calc(2 * var(--lock-font-size));
  height: calc(2 * var(--lock-font-size));
  font-size: calc(1.5 * var(--lock-font-size));
  display: flex;
  justify-content: center;
  align-items: center;
}
.puzzle-lock #four-by-four-lock .puzzle-table-container .puzzle-col-display {
  display: flex;
  flex-direction: row;
}
.puzzle-lock #four-by-four-lock .puzzle-table-container .row-puzzle-container {
  display: flex;
  flex-direction: row;
}
.puzzle-lock #four-by-four-lock .puzzle-table-container .row-puzzle-container .puzzle-row-display {
  display: flex;
  flex-direction: column;
}
.puzzle-lock #four-by-four-lock .puzzle-table-container .row-puzzle-container .puzzle-grid-container {
  display: grid;
}
.puzzle-lock #four-by-four-lock .puzzle-table-container .row-puzzle-container .puzzle-grid-container .puzzle-item {
  --puzzle-item-highlight: var(--lock-primary-color-100);
  border: 1px solid var(--puzzle-item-highlight);
  box-shadow: 0 0 var(--glow-size-regular) var(--puzzle-item-highlight) inset;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.puzzle-lock #four-by-four-lock .puzzle-table-container .row-puzzle-container .puzzle-grid-container .puzzle-item .inner-pawn-image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: 1px solid var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100) inset, 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  transform: scale(0.9);
}
.puzzle-lock #four-by-four-lock .puzzle-table-container .available-pawns {
  display: grid;
  padding: calc(0.5 * var(--lock-font-size));
  padding-bottom: 0;
  min-height: calc(var(--lock-font-size));
  gap: calc(0.3 * var(--lock-font-size));
}
.puzzle-lock #four-by-four-lock .puzzle-table-container .available-pawns .available-pawn {
  width: calc(var(--lock-font-size));
  height: calc(var(--lock-font-size));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100) inset, 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  border-radius: 50%;
}
.puzzle-lock #match-lock {
  max-width: unset;
  color: var(--lock-text-color);
}
.puzzle-lock #match-lock .match-table {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: calc(15 * var(--lock-font-size));
}
.puzzle-lock #match-lock .match-table:has(.is-image) {
  justify-content: space-between;
}
.puzzle-lock #match-lock .match-table .letters-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.puzzle-lock #match-lock .match-table .letters-container span {
  position: absolute;
  font-size: calc(1 * var(--lock-font-size));
  text-shadow: 0 0 var(--glow-size-large) var(--lock-primary-color-100);
  transform: translate(-50%, -50%);
  width: calc(1 * var(--lock-font-size));
  height: calc(1 * var(--lock-font-size));
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid var(--lock-primary-color-100);
}
.puzzle-lock #match-lock .match-table .svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.puzzle-lock #match-lock .match-table .svg-container line {
  filter: drop-shadow(0 0 var(--glow-size-small) black);
}
.puzzle-lock #match-lock .match-table .match-col-right,
.puzzle-lock #match-lock .match-table .match-col-left {
  display: flex;
  flex-direction: column;
  z-index: 2;
  gap: calc(0.3 * var(--lock-font-size));
}
.puzzle-lock #match-lock .match-table .pair-word {
  text-align: right;
}
.puzzle-lock #match-lock .match-table .pair-match {
  text-align: left;
}
.puzzle-lock #match-lock .match-table .pair-word, .puzzle-lock #match-lock .match-table .pair-match {
  font-size: calc(2 * var(--lock-font-size));
  text-shadow: 0 0 var(--glow-size-large) var(--lock-primary-color-100);
}
.puzzle-lock #match-lock .match-table .pair-word.selected, .puzzle-lock #match-lock .match-table .pair-match.selected {
  color: var(--lock-secondary-color-100);
}
.puzzle-lock #match-lock .match-table .pair-word.selected.is-image, .puzzle-lock #match-lock .match-table .pair-match.selected.is-image {
  border-color: var(--lock-secondary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-secondary-color-100), 0 0 var(--glow-size-regular) var(--lock-secondary-color-100) inset;
}
.puzzle-lock #match-lock .match-table .pair-word.is-image, .puzzle-lock #match-lock .match-table .pair-match.is-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: calc(2 * var(--lock-font-size));
  height: calc(2 * var(--lock-font-size));
  border: 1px solid var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100), 0 0 var(--glow-size-regular) var(--lock-primary-color-100) inset;
}
.puzzle-lock #match-lock input {
  font-size: calc(2 * var(--lock-font-size));
  text-align: center;
  border: 1px solid var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  border-radius: 0;
  height: calc(2 * var(--lock-font-size));
  color: var(--lock-primary-color-100);
  text-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100);
  box-shadow: 0 0 var(--glow-size-regular) var(--lock-primary-color-100), 0 0 var(--glow-size-regular) var(--lock-primary-color-100) inset;
  filter: brightness(1.2);
}
.puzzle-lock #match-lock input:active, .puzzle-lock #match-lock input:focus {
  outline: none;
  box-shadow: none;
}/*# sourceMappingURL=module.css.map */