/* ==========================================================================
   Main Menu / Splash (index.html)
   ========================================================================== */

.menu-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px 60px;
  position: relative;
}

.menu-sigil {
  width: 84px;
  height: 84px;
  margin-bottom: 22px;
  position: relative;
}
.menu-sigil svg { width: 100%; height: 100%; }

.menu-eyebrow {
  color: var(--pink);
  font-size: 12px;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 600;
}

.menu-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(38px, 7vw, 78px);
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--ink);
  text-shadow: 0 0 30px rgba(255,23,68,0.25);
  margin-bottom: 6px;
}
.menu-title .accent {
  color: var(--red);
  text-shadow: var(--glow-red);
}

.menu-title.glitching {
  animation: title-glitch 3.4s infinite;
}
@keyframes title-glitch {
  0%, 92%, 100% { text-shadow: 0 0 30px rgba(255,23,68,0.25); transform: translate(0,0); }
  93% { text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan); transform: translate(-1px,0); }
  94% { text-shadow: -2px 0 var(--pink), 2px 0 var(--cyan); transform: translate(1px,0); }
  95% { text-shadow: 0 0 30px rgba(255,23,68,0.25); transform: translate(0,0); }
  96% { text-shadow: 2px 0 var(--cyan), -2px 0 var(--pink); transform: translate(1px,-1px); }
  97% { text-shadow: 0 0 30px rgba(255,23,68,0.25); transform: translate(0,0); }
}

.menu-tagline {
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 1.5px;
  max-width: 560px;
  margin-bottom: 46px;
}

.menu-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 980px;
}

.menu-btn {
  position: relative;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--hairline-fill);
  border: 1px solid var(--border-soft);
  padding: 22px 26px;
  min-width: 168px;
  cursor: pointer;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: all .18s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
}
.menu-btn .idx {
  font-size: 10px;
  color: var(--red);
  letter-spacing: 2px;
}
.menu-btn .lbl { font-size: 14.5px; }
.menu-btn:hover {
  border-color: var(--red);
  background: rgba(255,23,68,0.08);
  box-shadow: var(--glow-red);
  transform: translateY(-3px);
}
.menu-btn:nth-child(even):hover { border-color: var(--pink); box-shadow: var(--glow-pink); }
.menu-btn:nth-child(even):hover .idx { color: var(--pink); }

.menu-footer-line {
  margin-top: 54px;
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.menu-footer-line .blink { animation: blink-caret 1.1s step-end infinite; color: var(--red); }
@keyframes blink-caret { 50% { opacity: 0; } }

@media (max-width: 720px) {
  .menu-buttons { gap: 10px; }
  .menu-btn { min-width: 42%; flex: 1 1 42%; padding: 16px 16px; }
}