@layer components {
  .gate {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--block-space);
  }

  .gate-terminal {
    max-width: 28rem;
    width: 100%;
    background: oklch(5% 0 0);
    border: 2px solid oklch(var(--lch-lime));
    padding: calc(var(--block-space) * 1.5);
    box-shadow: 0 0 20px oklch(72% 0.19 149 / 0.2);
  }

  .gate-header {
    margin-block-end: var(--block-space);
    font-family: var(--font-mono);
    color: oklch(var(--lch-lime));
    font-size: 0.85rem;
  }

  .gate-cursor {
    animation: blink 1s step-end infinite;
  }

  .gate-text {
    font-family: var(--font-mono);
    color: oklch(var(--lch-lime));
    font-size: 0.85rem;
    margin-block-end: var(--block-space);

    & strong {
      color: oklch(var(--lch-yellow));
    }
  }

  .gate-error {
    font-family: var(--font-mono);
    color: oklch(var(--lch-red));
    font-size: 0.85rem;
    margin-block-end: var(--block-space);
  }

  .captcha-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-block-end: var(--block-space);
    background: oklch(20% 0 0);
    border: 2px solid oklch(30% 0 0);
    padding: 4px;
  }

  .captcha-cell {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1;
    border: 2px solid transparent;
    transition: border-color 100ms;

    &:hover {
      border-color: oklch(var(--lch-cyan) / 0.5);
    }
  }

  .captcha-cell--selected {
    border-color: oklch(var(--lch-lime));

    & .captcha-check {
      opacity: 1;
    }
  }

  .captcha-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }

  .captcha-check {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: oklch(var(--lch-lime));
    border-radius: 50%;
    opacity: 0;
    transition: opacity 100ms;

    &::after {
      content: "";
      position: absolute;
      top: 5px;
      left: 8px;
      width: 5px;
      height: 10px;
      border: solid oklch(5% 0 0);
      border-width: 0 2.5px 2.5px 0;
      transform: rotate(45deg);
    }
  }

  .gate-btn {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    width: 100%;
    padding: 0.75em;
    background: oklch(var(--lch-lime));
    color: oklch(5% 0 0);
    border: none;
    cursor: pointer;
    letter-spacing: 0.1em;

    &:hover {
      background: oklch(80% 0.19 149);
    }

    &:active {
      background: oklch(60% 0.19 149);
    }
  }
}