/* Landing page. Loads after base.css, which supplies the tokens, reset,
   background and card chrome. */

.card {
  max-width: 620px;
}

.card__body {
  padding: 34px 34px 30px;
}

.card__foot {
  padding: 13px 34px;
}

/* Prompt lines */
.prompt {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  animation: fade-in 600ms var(--ease-smooth) 180ms both;
}

.prompt--muted {
  margin: 34px 0 14px;
  color: var(--text-dim);
}

.prompt__sigil {
  color: var(--accent-lime);
  margin-right: 8px;
}

/* Handle */
.handle {
  position: relative;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: clamp(2.1rem, 9vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  background: linear-gradient(
    100deg,
    var(--accent-cyan) 0%,
    #818cf8 45%,
    var(--accent-violet) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation:
    rise 700ms var(--ease-smooth) 120ms both,
    shimmer 8s linear infinite;
}

/* Glitch layers, drawn only while hovered */
.handle::before,
.handle::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  pointer-events: none;
}

.handle:hover::before {
  opacity: 0.85;
  animation: glitch-a 480ms steps(2, end) infinite;
}

.handle:hover::after {
  opacity: 0.85;
  animation: glitch-b 620ms steps(2, end) infinite;
}

.tagline {
  margin: 0;
  max-width: 44ch;
  font-size: 1.05rem;
  color: var(--text-secondary);
  animation: fade-in 700ms var(--ease-smooth) 300ms both;
}

/* Stack chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  animation: fade-in 700ms var(--ease-smooth) 420ms both;
}

.chips li {
  padding: 4px 11px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-chip);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  transition: color var(--duration-short) var(--ease-smooth),
    border-color var(--duration-short) var(--ease-smooth);
}

.chips li:hover {
  color: var(--accent-cyan);
  border-color: var(--border-hover);
}

/* Games menu — one row per game, each linking into its own directory. */
.menu {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-chip);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--duration-short) var(--ease-smooth),
    background var(--duration-short) var(--ease-smooth),
    transform var(--duration-short) var(--ease-smooth);
  /* Staggered per item just below, so the list deals itself out. */
  animation: rise 600ms var(--ease-smooth) both;
}

.menu__item:nth-child(1) { animation-delay: 480ms; }
.menu__item:nth-child(2) { animation-delay: 560ms; }
.menu__item:nth-child(3) { animation-delay: 640ms; }

.menu__item:hover,
.menu__item:focus-visible {
  border-color: var(--border-hover);
  background: rgba(34, 211, 238, 0.07);
  transform: translateX(3px);
  outline: none;
}

.menu__icon {
  flex: none;
  font-size: 1.25rem;
  line-height: 1;
  /* Emoji sit high in their box; nudge them back onto the text baseline. */
  transform: translateY(1px);
}

.menu__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.menu__name {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.menu__desc {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  /* Long descriptions truncate rather than wrapping the row to two lines. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__arrow {
  margin-left: auto;
  padding-left: 8px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  transition: color var(--duration-short) var(--ease-smooth);
}

.menu__item:hover .menu__arrow,
.menu__item:focus-visible .menu__arrow {
  color: var(--accent-cyan);
}

/* ASCII monster — the landing page shows the games menu instead, but 404.html
   still draws it. */
.monster {
  margin: 0;
  font-family: var(--font-mono);
  /* Scales with the card so the art never wraps on narrow screens */
  font-size: clamp(0.44rem, 2.1vw, 0.78rem);
  line-height: 1.15;
  text-align: center;
  white-space: pre;
  overflow: hidden;
  background: linear-gradient(
    100deg,
    var(--accent-cyan) 0%,
    #818cf8 45%,
    var(--accent-violet) 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.28));
  animation:
    fade-in 900ms var(--ease-smooth) 540ms both,
    shimmer 8s linear infinite,
    float 6s ease-in-out infinite;
}

.cursor {
  width: 8px;
  height: 15px;
  background: var(--accent-cyan);
  animation: blink 1.1s steps(1, end) infinite;
}

/* Animation Keyframes */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes glitch-a {
  0% { transform: translate(0); clip-path: inset(0 0 82% 0); }
  50% { transform: translate(-3px, -1px); clip-path: inset(28% 0 44% 0); }
  100% { transform: translate(2px, 1px); clip-path: inset(66% 0 8% 0); }
}

@keyframes glitch-b {
  0% { transform: translate(0); clip-path: inset(58% 0 22% 0); }
  50% { transform: translate(3px, 1px); clip-path: inset(12% 0 70% 0); }
  100% { transform: translate(-2px, -1px); clip-path: inset(38% 0 40% 0); }
}

/* Responsive Design */
@media (max-width: 560px) {
  .card__body {
    padding: 26px 22px 24px;
  }

  .card__foot {
    padding: 12px 22px;
  }

  .tagline {
    font-size: 0.98rem;
  }
}

/* Accessibility - Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .monster {
    transform: none;
  }

  .handle:hover::before,
  .handle:hover::after {
    opacity: 0;
  }
}