/* Invaders screens: the title logo, the level title card, pause, results and failed. */

/* ---- title -------------------------------------------------------------- */
/* a soft scrim pooled behind the logo and menu: the battle stays visible round the edges */
.title { background:
  radial-gradient(ellipse 36% 42% at 50% 64%, rgba(4, 5, 12, 0.8), rgba(4, 5, 12, 0.5) 55%, rgba(4, 5, 12, 0) 100%),
  radial-gradient(ellipse 50% 24% at 50% 30%, rgba(4, 5, 12, 0.55), rgba(4, 5, 12, 0) 100%),
  linear-gradient(180deg, rgba(4, 5, 12, 0.5) 0%, rgba(4, 5, 12, 0.05) 45%, rgba(4, 5, 12, 0.72) 100%); }
.title-stack { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.logo { position: relative; margin: 0; font: 900 11rem/1 var(--display); font-stretch: condensed; letter-spacing: 0.12em;
  padding-left: 0.12em; animation: logo-in 0.9s cubic-bezier(0.2, 1.4, 0.3, 1) both, logo-float 6s ease-in-out 0.9s infinite; }
.logo span { display: block; }
.logo-text {
  position: relative; color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, #c9fbff 30%, #46f2ff 52%, #8a5cff 74%, #ff4fd8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0.1rem rgba(10, 0, 40, 0.5);
}
.logo-glow { position: absolute; inset: 0; color: #3fd8ff; filter: blur(1.8rem); opacity: 0.8;
  animation: logo-pulse 2.6s ease-in-out infinite; }
.logo-chroma { position: absolute; inset: 0; opacity: 0.55; mix-blend-mode: screen; animation: chroma 5s steps(1) infinite; }
.logo-chroma.c1 { color: #ff2fd0; transform: translateX(-0.18rem); }
.logo-chroma.c2 { color: #2ff6ff; transform: translateX(0.18rem); animation-delay: -2.5s; }
.logo-shine {
  position: absolute; inset: 0; pointer-events: none; color: transparent;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.7) 50%, transparent 58%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  animation: logo-shine 5s ease-in-out 1.2s infinite;
}
.logo::after { /* scanlines across the letters, a CRT memory */
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 0.22rem, rgba(0, 0, 20, 0.35) 0.22rem 0.36rem);
}
.tagline { margin: 0 0 1.6rem; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(214, 246, 255, 0.86); text-shadow: 0 0.2rem 0.8rem #000; }
.title .hint { position: absolute; bottom: 2.4rem; }
.now-showing { position: absolute; left: 3rem; bottom: 2.2rem; margin: 0; font-size: 1.15rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); text-shadow: 0 0.15rem 0.6rem #000; }
.now-showing span { color: var(--gold); margin-right: 0.4rem; }
@keyframes logo-in { from { opacity: 0; transform: scale(1.5); filter: blur(1rem); } to { opacity: 1; transform: none; filter: none; } }
@keyframes logo-float { 50% { transform: translateY(-0.5rem); } }
@keyframes logo-pulse { 50% { opacity: 0.45; } }
@keyframes logo-shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
@keyframes chroma { 0%, 88%, 100% { translate: 0 0; } 90% { translate: -0.5rem 0.1rem; } 93% { translate: 0.4rem -0.1rem; } }

/* ---- title card (a level loading) ---------------------------------------- */
.card { transition-duration: 0.25s; }
.card::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.75)); }
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; /* letterbox bars */
  background: linear-gradient(180deg, #000 0 6rem, transparent 6rem calc(100% - 6rem), #000 calc(100% - 6rem)); }
.card-body { position: relative; text-align: center; animation: rise 0.6s cubic-bezier(0.2, 1.2, 0.3, 1) both; }
.card-kicker { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent, #fff); }
.card-name { margin: 0.5rem 0 0.6rem; font: 900 8.4rem/1 var(--display); font-stretch: condensed; letter-spacing: 0.06em;
  text-transform: uppercase; text-shadow: 0 0 2.4rem var(--accent, #fff), 0 0.4rem 2rem rgba(0, 0, 0, 0.7); }
.card-line { margin: 0 0 2rem; font-size: 1.8rem; font-weight: 700; font-style: italic; color: rgba(255, 255, 255, 0.85); }
.card-bar { width: 24rem; height: 0.4rem; margin: 0 auto; border-radius: 1rem; overflow: hidden; background: rgba(255, 255, 255, 0.18); }
.card-bar span { display: block; width: 40%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--accent, var(--gold))); animation: sweep 0.9s ease-in-out infinite alternate; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@keyframes rise { from { opacity: 0; transform: translateY(2rem) scale(0.96); } }

/* ---- pause ---------------------------------------------------------------- */
.pause .menu { animation: rise 0.4s ease both; }

/* ---- results and failed --------------------------------------------------- */
.results { gap: 2.6rem; }
.banner { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; text-align: center; }
.banner-kicker { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-dim); }
.banner-title { margin: 0; font: 900 9rem/1 var(--display); font-stretch: condensed; letter-spacing: 0.06em; text-transform: uppercase;
  animation: slam 0.7s cubic-bezier(0.2, 1.5, 0.3, 1) both; }
.won .banner-title { color: transparent; background: linear-gradient(180deg, #fffbe6, #ffe14a 45%, #ff8a1e);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 1.6rem rgba(255, 150, 40, 0.55)); }
.lost .banner-title { color: #ffb1a8; text-shadow: 0 0 2.2rem rgba(255, 50, 40, 0.7), 0 0.5rem 2rem rgba(0, 0, 0, 0.6); }
.stars-big { display: flex; gap: 1.4rem; margin: 0.6rem 0 0.4rem; font-size: 6.4rem; line-height: 1; }
.stars-big i { color: rgba(255, 255, 255, 0.14); transition: none; }
.stars-big i.on { color: rgba(255, 255, 255, 0.14); text-shadow: none; }
.stars-big i.stamp { color: var(--gold); text-shadow: 0 0 1.4rem rgba(255, 190, 60, 0.9), 0 0 3.6rem rgba(255, 120, 30, 0.6);
  animation: stamp 0.5s cubic-bezier(0.2, 1.6, 0.3, 1) both; }
.result-line { display: flex; align-items: baseline; justify-content: center; gap: 1.2rem; margin: 0; }
.result-cap { font-size: 1.4rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim); }
.result-score { font: 900 4.4rem var(--display); font-variant-numeric: tabular-nums; }
.result-best { margin: 0; font-size: 1.7rem; font-weight: 800; color: var(--ink-dim); letter-spacing: 0.06em; }
.result-best.new { opacity: 0; color: #1a1205; background: linear-gradient(180deg, #fff3b8, var(--gold)); padding: 0.3rem 1.4rem;
  border-radius: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; box-shadow: 0 0 2rem rgba(255, 190, 60, 0.7); }
.result-best.new.shown { animation: slam 0.5s cubic-bezier(0.2, 1.5, 0.3, 1) both; }
.results .menu-row { animation: rise 0.5s 0.5s ease both; }
@keyframes slam { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; } }
@keyframes stamp { from { opacity: 0; transform: scale(2.6) rotate(-14deg); } }

@media (prefers-reduced-motion: reduce) {
  .logo, .logo-glow, .logo-shine, .logo-chroma, .banner-title, .card-bar span, .stars-big i.stamp { animation: none; }
  .result-best.new.shown { animation: none; opacity: 1; }
}