/* UI Controls for Game Preview */
.ctrl-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 10px auto 40px auto;
  pointer-events: none;
}

.ctrl-ui-top {
  display: flex;
  width: 580px;
  justify-content: space-between;
}

.ctrl-ui-bottom {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.ctrl-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ctrl-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.key-wrap {
  position: relative;
  width: 46px;
  height: 46px;
}

.key-wrap.spacebar-wrap {
  width: 180px;
}

.ctrl-key {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f1f3 100%);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.03),
    0 1px 3px rgba(0, 0, 0, 0.06),
    inset 0 -4px 0 rgba(0, 0, 0, 0.15),
    inset 0 1px 0 #ffffff;
  color: #5a5a5b;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 500;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.ctrl-key.spacebar {
  width: 180px;
}

.text-anno {
  position: absolute;
  font-size: 14px;
  line-height: 1;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #8e8e93;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

.text-anno::before {
  content: "";
  position: absolute;
  border: 0 solid #b0b0b5;
}

/* Move Annotation */
.anno-move {
  top: 100%;
  left: 50%;
  padding-top: 10px;
  padding-left: 20px;
}
.anno-move::before {
  top: 0;
  left: 0;
  width: 14px;
  height: 16px;
  border-left-width: 1.5px;
  border-bottom-width: 1.5px;
  border-bottom-left-radius: 4px;
}

/* Jump Annotation */
.anno-jump {
  bottom: 100%;
  left: 25%;
  padding-bottom: 10px;
  padding-left: 20px;
}
.anno-jump::before {
  bottom: 0;
  left: 0;
  width: 14px;
  height: 16px;
  border-left-width: 1.5px;
  border-top-width: 1.5px;
  border-top-left-radius: 4px;
}

/* Dash Annotation */
.anno-dash {
  bottom: 100%;
  right: 50%;
  padding-bottom: 10px;
  padding-right: 20px;
}
.anno-dash::before {
  bottom: 0;
  right: 0;
  width: 14px;
  height: 16px;
  border-right-width: 1.5px;
  border-top-width: 1.5px;
  border-top-right-radius: 4px;
}

/* Punch Annotation */
.anno-punch {
  bottom: 100%;
  left: 50%;
  padding-bottom: 10px;
  padding-left: 20px;
}
.anno-punch::before {
  bottom: 0;
  left: 0;
  width: 14px;
  height: 16px;
  border-left-width: 1.5px;
  border-top-width: 1.5px;
  border-top-left-radius: 4px;
}

/* Restart Annotation */
.anno-restart {
  top: 100%;
  left: 50%;
  padding-top: 10px;
  padding-left: 20px;
}
.anno-restart::before {
  top: 0;
  left: 0;
  width: 14px;
  height: 16px;
  border-left-width: 1.5px;
  border-bottom-width: 1.5px;
  border-bottom-left-radius: 4px;
}

/* Ghost Typing Animation */
@keyframes auto-press-light {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.03),
      0 1px 3px rgba(0, 0, 0, 0.06),
      inset 0 -4px 0 rgba(0, 0, 0, 0.15),
      inset 0 1px 0 #ffffff;
  }
  50% {
    transform: translateY(4px);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.02),
      0 1px 1px rgba(0, 0, 0, 0.04),
      inset 0 0 0 rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    background: #e8e8ed;
  }
}

@keyframes auto-press-dark {
  0%,
  100% {
    transform: translateY(0);
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.2),
      0 1px 3px rgba(0, 0, 0, 0.3),
      inset 0 -4px 0 rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  50% {
    transform: translateY(4px);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.2),
      0 1px 1px rgba(0, 0, 0, 0.3),
      inset 0 0 0 rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
    background: linear-gradient(180deg, #3a3a3c 0%, #202022 100%);
  }
}

.game-preview:hover .ctrl-key.auto-press-1 {
  animation: auto-press-light 0.2s ease 0s;
}
.game-preview:hover .ctrl-key.auto-press-2 {
  animation: auto-press-light 0.2s ease 0.15s;
}
.game-preview:hover .ctrl-key.auto-press-3 {
  animation: auto-press-light 0.2s ease 0.3s;
}
.game-preview:hover .ctrl-key.auto-press-4 {
  animation: auto-press-light 0.2s ease 0.45s;
}
.game-preview:hover .ctrl-key.auto-press-5 {
  animation: auto-press-light 0.2s ease 0.6s;
}
.game-preview:hover .ctrl-key.auto-press-6 {
  animation: auto-press-light 0.2s ease 0.75s;
}
.game-preview:hover .ctrl-key.auto-press-7 {
  animation: auto-press-light 0.2s ease 0.9s;
}
.game-preview:hover .ctrl-key.auto-press-8 {
  animation: auto-press-light 0.2s ease 1.05s;
}

/* Dark Mode overrides */
@media (prefers-color-scheme: dark) {
  .ctrl-key {
    background: linear-gradient(180deg, #48484a 0%, #2c2c2e 100%);
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.2),
      0 1px 3px rgba(0, 0, 0, 0.3),
      inset 0 -4px 0 rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: #e5e5ea;
  }
  .text-anno {
    color: #9898a0;
  }
  .text-anno::before {
    border-color: #5a5a5f;
  }
  .game-preview:hover .ctrl-key.auto-press-1 {
    animation-name: auto-press-dark;
  }
  .game-preview:hover .ctrl-key.auto-press-2 {
    animation-name: auto-press-dark;
  }
  .game-preview:hover .ctrl-key.auto-press-3 {
    animation-name: auto-press-dark;
  }
  .game-preview:hover .ctrl-key.auto-press-4 {
    animation-name: auto-press-dark;
  }
  .game-preview:hover .ctrl-key.auto-press-5 {
    animation-name: auto-press-dark;
  }
  .game-preview:hover .ctrl-key.auto-press-6 {
    animation-name: auto-press-dark;
  }
  .game-preview:hover .ctrl-key.auto-press-7 {
    animation-name: auto-press-dark;
  }
  .game-preview:hover .ctrl-key.auto-press-8 {
    animation-name: auto-press-dark;
  }
}