/* Self-hosted splash/title-screen styles, shared verbatim between index.html
   (the real game) and debug-title.html (the standalone debug page for the
   game-title screen) via <link>, so the debug page can never drift out of
   sync with what actually ships. Loaded as an external stylesheet instead of
   inlined - still render-blocking in <head>, so it paints before any app JS
   just like the old inline <style> did, just without duplicating ~300 lines
   of CSS into a second file. */
:root {
  --color-bg: #121212;
  --color-white: #ffffff;
  --color-white-soft: #f0f0f0;
  --color-black: #000000;
  --color-shadow-soft: rgba(0, 0, 0, 0.5);
  --color-accent-red: #ff000089;
  --color-accent-cyan: #4ee1ff;
  --color-forge-shadow: #991010;
}
@font-face {
  font-family: "Orbitron";
  src: url("fonts/Orbitron-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "RussoOne";
  src: url("fonts/RussoOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Momo Trust Display";
  src: url("fonts/MomoTrustDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
.goat-bee-splash-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  color: var(--color-white);
  font-family: system-ui, -apple-system, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 500ms ease;
}
.goat-bee-splash-screen[hidden] {
  display: none;
}
.goat-bee-splash-screen--fade-out {
  opacity: 0;
  pointer-events: none;
}
.goat-bee-splash-screen__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-inline: 1.5rem;
  text-align: center;
  animation: goat-bee-zoom-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.goat-bee-splash-screen__logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.goat-bee-splash-screen__glow {
  position: absolute;
  width: min(52vw, 280px);
  height: min(52vw, 280px);
  overflow: visible;
  pointer-events: none;
}
.goat-bee-splash-screen__glow polygon {
  fill: none;
  stroke: var(--color-accent-red);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 6px var(--color-accent-red)) drop-shadow(0 0 22px var(--color-accent-red));
  opacity: 0.55;
  animation: goat-bee-glow-pulse 3.2s ease-in-out infinite;
}
.goat-bee-splash-screen__logo {
  position: relative;
  top: 0.75rem;
  width: min(34vw, 180px);
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(2px 4px 6px var(--color-black));
}
#goat-bee-splash-screen .goat-bee-splash-screen__title {
  font-family: "Orbitron", sans-serif;
}
.goat-bee-splash-screen__title {
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  margin: 0;
  letter-spacing: 0.15em;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 2px 10px var(--color-shadow-soft);
}
.goat-bee-splash-screen__subtitle {
  font-size: clamp(0.8rem, 3vw, 1rem);
  margin: 0;
  opacity: 0.7;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-white-soft);
}
#game-title-screen .goat-bee-splash-screen__title {
  font-family: "RussoOne", sans-serif;
  font-weight: normal;
  font-size: clamp(2rem, 8vw, 3rem);
}
/* Centered on the whole content stack (logo + title), not just the logo -
   its bottom edge deliberately reaches past the logo toward the title text,
   sitting behind it (z-index: -1 against .goat-bee-splash-screen__content's
   stacking context, so it stays behind the text and logo regardless of
   their own positioning) rather than being confined to a tight box around
   the logo alone the way the studio screen's triangle is.
   Positioning lives on this wrap (inset:0 + flex-centering, no transform);
   the pulse animation lives on the square itself. Centering the square
   directly with left/top:50% + transform:translate(-50%,-50%) doesn't
   compose with goat-bee-glow-pulse's own transform:scale(...) - a CSS
   animation replaces the whole transform value on the animated element,
   it doesn't add to whatever was already there, so the translate offset
   would vanish the instant the animation starts (this is exactly what
   happened on the first attempt: the square jumped down-right by ~half
   its own size, because the translate offset that carried the centering
   dropped out the moment the animation ran). */
.game-title-screen__glow-square-wrap {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.game-title-screen__glow-square {
  height: min(50vw, 280px);
  border: 1.5px solid var(--color-accent-cyan);
  box-shadow:
    0 0 6px var(--color-accent-cyan),
    0 0 22px var(--color-accent-cyan);
  opacity: 0.55;
  animation: goat-bee-glow-pulse 3.2s ease-in-out infinite;
}
.game-title-screen__logo {
  width: min(42vw, 200px);
  max-height: 200px;
  object-fit: contain;
}
.game-title-screen__forge {
  font-family: "Momo Trust Display", sans-serif;
  font-weight: 400;
  font-size: 0.8em;
  display: inline-block;
  color: #63636388;
}
.game-title-screen__glitch {
  position: relative;
  display: inline-block;
  color: var(--color-accent-red);
  text-shadow: 0 0 6px var(--color-accent-red);
  animation: game-title-glitch-jitter 1.4s infinite steps(1, end);
}
.game-title-screen__glitch::before,
.game-title-screen__glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: transparent;
}
.game-title-screen__glitch::before {
  color: var(--color-accent-cyan);
  opacity: 0;
  animation: game-title-glitch-slice-1 1.4s infinite steps(1, end);
}
.game-title-screen__glitch::after {
  color: var(--color-accent-red);
  opacity: 0;
  animation: game-title-glitch-slice-2 1.4s infinite steps(1, end);
}
/* Two short bursts per 1.4s loop (around 15% and 55%) rather than one
   burst near the end - the game-title screen is only on screen for
   about 1.2-1.7s total, so a burst placed late in a longer cycle would
   rarely get seen before the screen fades out. */
@keyframes game-title-glitch-jitter {
  0%, 14%, 20%, 54%, 61%, 100% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(-2px, 1px);
  }
  16% {
    transform: translate(2px, -1px);
  }
  17%, 19% {
    transform: translate(1px, 1px);
  }
  18% {
    transform: translate(-2px, 0);
  }
  55% {
    transform: translate(2px, -1px);
  }
  56%, 59% {
    transform: translate(-2px, 1px);
  }
  58% {
    transform: translate(1px, 0);
  }
}
@keyframes game-title-glitch-slice-1 {
  0%, 13%, 21%, 53%, 62%, 100% {
    opacity: 0;
  }
  14% {
    opacity: 1;
    clip-path: inset(10% 0 65% 0);
    transform: translate(-3px, 0);
  }
  16% {
    opacity: 1;
    clip-path: inset(55% 0 20% 0);
    transform: translate(3px, 0);
  }
  18% {
    opacity: 1;
    clip-path: inset(30% 0 45% 0);
    transform: translate(-2px, 0);
  }
  20% {
    opacity: 1;
    clip-path: inset(70% 0 5% 0);
    transform: translate(2px, 0);
  }
  54% {
    opacity: 1;
    clip-path: inset(20% 0 55% 0);
    transform: translate(3px, 0);
  }
  57% {
    opacity: 1;
    clip-path: inset(60% 0 10% 0);
    transform: translate(-3px, 0);
  }
  60% {
    opacity: 1;
    clip-path: inset(5% 0 80% 0);
    transform: translate(2px, 0);
  }
}
@keyframes game-title-glitch-slice-2 {
  0%, 14%, 22%, 54%, 63%, 100% {
    opacity: 0;
  }
  15% {
    opacity: 1;
    clip-path: inset(60% 0 15% 0);
    transform: translate(3px, 0);
  }
  17% {
    opacity: 1;
    clip-path: inset(15% 0 60% 0);
    transform: translate(-3px, 0);
  }
  19% {
    opacity: 1;
    clip-path: inset(40% 0 35% 0);
    transform: translate(2px, 0);
  }
  21% {
    opacity: 1;
    clip-path: inset(5% 0 75% 0);
    transform: translate(-2px, 0);
  }
  55% {
    opacity: 1;
    clip-path: inset(50% 0 25% 0);
    transform: translate(-3px, 0);
  }
  58% {
    opacity: 1;
    clip-path: inset(10% 0 65% 0);
    transform: translate(3px, 0);
  }
  61% {
    opacity: 1;
    clip-path: inset(65% 0 5% 0);
    transform: translate(-2px, 0);
  }
}
@keyframes goat-bee-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@keyframes goat-bee-glow-pulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.96);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.04);
  }
}