[x-cloak] {
  display: none !important;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  justify-content: center;
}

main {
  font-size: 1.25rem;
  width: 300px;
}
.create-form {
  display: grid;
}

.create-form input {
  margin-bottom: 1rem;
}

.create-button {
  border: none;
  background: black;
  color: white;
  padding: 0.25rem 0rem;
  border-radius: 0.25rem;
  font-size: 1.25rem;
  cursor: pointer;
}

input {
  font-size: 1.25rem;
}

.level {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
.level .spacer {
  height: 0.5rem;
}

.icon {
  height: 20px;
  width: 20px;
  translate: 0 3px;
}

.error {
  color: #e44;
}

.captcha {
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 74px;
  font-size: 1rem;
  padding: 0 1rem;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.08);
}

.captcha div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.captcha .captcha-info {
  flex-direction: column;
  gap: 0;
  font-size: 0.65rem;
  color: #777;
}

.captcha .checkbox {
  height: 28px;
  width: 28px;
}
.captcha .checkbox[x-state="unchecked"],
.captcha .checkbox[x-state="open"] {
  border: 2px solid #c1c1c1;
  border-radius: 2px;
  background: white;
  cursor: pointer;
}

.captcha .checkbox[x-state="unchecked"]:hover {
  border: 2px solid #a1a1a1;
}

.captcha .checkbox[x-state="loading"] {
  background: #1972e7;
  border: none;
  border-radius: 100%;
}

.captcha .checkbox[x-state="solved"],
.captcha[data-solved="true"] .checkbox:not([x-state="open"]) {
  background: url("./assets/check.png");
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
}
.captcha img {
  float: right;
}

.captcha-model-container {
  position: relative;
}

.captcha-model {
  position: absolute;
  translate: 3rem -60%;
  border: 1px solid rgb(204, 204, 204);
  box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px;
  background-color: white;
  padding: 0.5rem;
  z-index: 100;
}

.captcha-model:has(.four-by-four) {
  /* may i be forgiven for my sins */
  width: 401px;
}

.captcha-model:has(.canvas) {
  width: 418px;
}

.captcha-model:has(.multiple-choice) {
  width: 600px;
}

.captcha-model:has(.single-input) {
  width: 400px;
}

.captcha-model:has(.chess-board) {
  width: 400px;
}

.captcha-model .model-bottom-bar {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.captcha-model button {
  padding: 0.75rem 2rem;
  border: none;
  background: #1972e7;
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 100ms;
}

.captcha-model button:disabled {
  opacity: 0.5;
}

.captcha-model .header {
  background-color: #1972e7;
  padding: 1.5rem 2rem;
  color: white;
  margin-bottom: 0.35rem;
}

.captcha-model .header :nth-child(2) {
  font-size: 2rem;
  font-weight: 900;
}
.captcha-model .header :nth-child(1),
.captcha-model .header :nth-child(3) {
  font-size: 1rem;
  transition: 100ms;
}

.multiple-choice {
  padding: 0 0.5rem;
  line-height: 1.6;
  font-family: "Times New Roman", serif !important;
}
.multiple-choice,
.multiple-choice label {
  font-family: "Times New Roman", serif !important;
}

.canvas canvas {
  width: 400px;
  height: 400px;
}

.four-by-four {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
}

.four-by-four .cell {
  width: 100%;
  height: 95px;
  width: 95px;
  overflow: hidden;
  transition: scale 100ms ease;
}
.four-by-four .cell.pressed {
  scale: 0.8;
}

.four-by-four .cell img {
  width: 400%;
  height: 400%;
  position: relative;
  cursor: pointer;
  user-select: none;
  user-drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.single-input input {
  width: 100%;
  border: 2px solid #c1c1c1;
  border-radius: 2px;
}

.chess-board {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  grid-template-columns: repeat(8, 1fr);
}

.chess-board .cell {
  width: 100%;
  height: 47.5px;
  width: 47.5px;
  overflow: hidden;
  transition: scale 100ms ease;
}
.chess-board .cell.pressed {
  scale: 0.8;
}

.chess-board .cell img {
  width: 800%;
  height: 800%;
  position: relative;
  cursor: pointer;
  user-select: none;
  user-drag: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.top-padding {
  height: calc(50vh - 167px / 2);
}
.bottom-padding {
  height: 20vh;
}

.try-again {
  text-align: center;
  padding: 0.25rem 0;
  font-size: 1rem;
}

.level5-switches {
  display: flex;
}
.level5-switches[data-collapse] {
  height: 0;
}

.level5-segment1,
.level5-segment3 {
  font-size: 1rem;
}

.level5-segment1 {
  translate: 3.5rem -2.75rem;
}

.level5-segment2 {
  translate: 10.7rem -8rem;
  color: #b44;
  cursor: grab;
}

.level5-segment3 {
  translate: 3.8rem -2.75rem;
}

.money-counter {
  position: fixed;
  top: 1rem;
  left: 1rem;
}

.walkthrough {
  position: fixed;
  top: 1rem;
  right: 1rem;
}

.level9-cell {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 3rem;
}

.level10-cell {
  display: grid;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  background: #efefe6;
  border-radius: 2px;
}

.ghostector {
  display: grid;
  position: fixed;
  width: 192px;
  height: 192px;
  z-index: 1000;
  clip-path: polygon(
    12.5% 0%,
    87.5% 0%,
    100% 12.5%,
    100% 87.5%,
    87.5% 100%,
    12.5% 100%,
    0% 87.5%,
    0% 12.5%
  );
}

.ghostector * {
  grid-row-start: 1;
  grid-column-start: 1;
}

.ghostector-upgrade {
  display: grid;
  position: fixed;
}

.ghostector-upgrade * {
  grid-row-start: 1;
  grid-column-start: 1;
}

.rps {
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.rps-status {
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.rps-status :nth-child(2) {
  font-size: 2rem;
  font-weight: 700;
}

.spin-button {
  width: 100%;
}

* {
  font-family: "Helvetica", "Arial", sans-serif;
  box-sizing: border-box;
}

#boss-ghost-anchor {
  position: fixed;
  top: 0;
  left: 0;
}

.terminal {
  width: 400px;
  height: 400px;
  background: black;
  color: #00ff00;
  padding: 0.5rem;
  overflow: hidden;
}

.terminal pre {
  font-family: monospace;
  margin: 0;
  font-size: 1rem;
  white-space: pre-wrap;
  width: 400px;
  line-height: 1.5;
}

.overlapped {
  display: grid;
  align-items: center;
  justify-content: center;
}

.overlapped * {
  grid-row-start: 1;
  grid-column-start: 1;
}

.access-granted {
  background-color: black;
  border: 2px gray solid;
  font-family: monospace;
  color: #00ff00;
  padding: 1rem;
  text-align: center;
  width: 350px;
  margin: auto;
  font-size: 2rem;
}

.bar {
  border: 1px solid rgb(204, 204, 204);
  height: 2rem;
}

.bar-fill {
  background-color: #1972e7;
  height: 100%;
}

.msgs {
  height: 400px;
  overflow-y: scroll;
  margin-left: 2px;
  text-wrap: wrap;
  width: 400px;
  overflow-wrap: break-word;
  align-items: flex-end;
}

.win {
  width: 200%;
  translate: -25% 0;
  text-align: center;
}

.victory-message {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 9999;
  /* display: grid; */
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.victory-message-animation {
  animation: victory-message-animation 7s;
}

@keyframes victory-message-animation {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
}

.dark-souls-bar {
  width: 100vw;
  display: grid;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #000000cc 10%,
    /* #000000cc, */ #000000cc 90%,
    transparent 100%
  );
  color: yellow;
}

.dark-souls-bar * {
  grid-row-start: 1;
  grid-column-start: 1;
  font-family: serif;
  font-size: 4rem;
  scale: 1 1.5;
}

.echo {
  transform: scale(1.1);
  filter: blur(4px);
  opacity: 0.5;
}

.echo-animation {
  animation: echo-animation 6s;
}

@keyframes echo-animation {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.05, 1.1);
  }
}