/* Start screen styles: centered vertical stack, arcade look */

/* ── Tighten vertical stack ── */
#maroon-title{ margin-top:0.2em !important; margin-bottom:0.05em !important; }
.maroon-meta{ margin-top:0 !important; margin-bottom:0.1em; }
.links{ margin-bottom:0.15em; }

.start-screen{display:flex;justify-content:center;margin:0.2em 0 0.2em}
.start-screen .start-buttons{display:flex;flex-direction:column;gap:0.6rem;align-items:center}
.start-screen .btn{display:inline-block;padding:0.7rem 1.6rem;font-size:1.05rem;border-radius:10px;border:2px solid rgba(255,220,220,0.08);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));color:#ffdcdc;text-decoration:none;cursor:pointer;min-width:160px;text-align:center}
.start-screen .btn:focus{outline:3px solid rgba(255,80,80,0.18);outline-offset:2px}
.start-screen .btn:hover{box-shadow:0 6px 18px rgba(170,40,40,0.18),0 0 18px rgba(200,40,40,0.06);transform:translateY(-2px)}
.start-screen .btn.start, .start-screen .btn.about{background:linear-gradient(180deg,#3a0000,#220000);border-color:rgba(255,90,90,0.18);font-weight:700}
.start-screen .btn.glitch{position:relative}
/* glitch is handled entirely by JS textContent mutation — no pseudo-elements needed */
@keyframes glitch-top{
	0%{transform:translate(0,0)}
	20%{transform:translate(-2px,-2px)}
	40%{transform:translate(2px,0)}
	60%{transform:translate(-1px,1px)}
	100%{transform:translate(0,0)}
}
@keyframes glitch-bottom{
	0%{transform:translate(0,0)}
	20%{transform:translate(2px,2px)}
	40%{transform:translate(-2px,0)}
	60%{transform:translate(1px,-1px)}
	100%{transform:translate(0,0)}
}
.start-screen .invite-btn{font-weight:600}
@media(max-width:520px){.start-screen .btn{min-width:220px;padding:0.9rem 1.8rem;font-size:1.1rem}}

/* MAROON title meta: small, centered, subtle glow */
.maroon-meta{margin-top:0.08em;text-align:center}
.maroon-meta .maroon-version{
	display:inline-block;
	font-family:'IBM Plex Mono', monospace;
	font-size:0.78rem;
	line-height:1;
	letter-spacing:0.12em;
	text-transform:uppercase;
	color:#ffdcdc;
	opacity:0.95;
	padding:0.06rem 0.45rem;
	border-radius:4px;
	text-shadow:0 0 6px rgba(255,80,80,0.06), 0 0 12px rgba(255,80,80,0.02);
	background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
	pointer-events:none;
}

/* .btn.start glitch is handled entirely by JS textContent mutation — no pseudo-element needed */
.start-screen .btn.start::after{ content: none; }

/* ── AOF TV-signal breakthrough ──────────────────────────── */
.aof-wrap{
  position: fixed;
  bottom: 2.8em;        /* just above footer */
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: auto;
}

.aof-btn{
  background: none;
  border: none;
  padding: 0;
  cursor: none;
  display: block;
  outline: none;
  position: relative;
}
.aof-btn:focus-visible{ outline: 2px solid rgba(255,80,80,0.5); border-radius: 2px; }

/* scanlines overlay */
.aof-btn::after{
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.38) 2px,
    rgba(0,0,0,0.38) 3px
  );
  pointer-events: none;
  z-index: 3;
}

/* binary rain canvas — created by JS, shown on hover */
.aof-binary{
  position: absolute;
  top: 0; left: 0;
  width: 52px; height: 52px;
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  image-rendering: pixelated;
}

.aof-img{
  display: block;
  width: 52px;
  height: auto;
  opacity: 0.42;
  filter: invert(1) sepia(1) saturate(12) hue-rotate(300deg) contrast(2) brightness(0.7)
          drop-shadow(-4px -2px 0 rgba(0,229,255,0.72)) drop-shadow(4px 2px 0 rgba(255,0,102,0.72));
  mix-blend-mode: screen;
  transition: none;
  will-change: transform, filter, opacity, clip-path;
}

/* hover tease — brighten slightly so user notices it's interactive */
.aof-btn:hover .aof-img,
.aof-btn:focus .aof-img {
  opacity: 0.55;
  filter: invert(1) sepia(1) saturate(16) hue-rotate(300deg) contrast(2.5) brightness(0.9)
          drop-shadow(-5px -2px 0 rgba(0,229,255,0.8)) drop-shadow(5px 2px 0 rgba(255,0,102,0.8));
  cursor: none;
}

/* hover frenzy */
.aof-img.aof-hover-glitch{ animation: aof-hover-glitch 0.1s steps(6) infinite; }
@keyframes aof-hover-glitch{
  0%  { opacity:0.9; filter:invert(1) sepia(1) saturate(20) hue-rotate(300deg) contrast(6)  brightness(2.5) drop-shadow(-9px -3px 0 rgba(0,229,255,1))   drop-shadow(9px 3px 0 rgba(255,0,102,1));   transform:translateX(-5px) skewX(-4deg);  clip-path:inset(5% 0 10% 0); }
  16% { opacity:1;   filter:invert(1) sepia(1) saturate(14) hue-rotate(310deg) contrast(4)  brightness(3.5) drop-shadow(12px 5px 0 rgba(0,229,255,0.9))  drop-shadow(-12px -5px 0 rgba(255,0,102,0.9)); transform:translateX(7px) skewX(5deg);    clip-path:inset(35% 0 0 0); }
  33% { opacity:0.4; filter:invert(1) saturate(0)             contrast(20) brightness(9)   drop-shadow(-18px 0 0 rgba(0,229,255,0.6))   drop-shadow(18px 0 0 rgba(255,0,102,0.6));   transform:translateX(-4px) scaleX(1.06);  clip-path:inset(0 0 45% 0); }
  50% { opacity:1;   filter:invert(1) sepia(1) saturate(20) hue-rotate(290deg) contrast(5)  brightness(3)   drop-shadow(-14px -6px 0 rgba(0,229,255,1))   drop-shadow(14px 6px 0 rgba(255,0,102,1));   transform:translateX(9px) skewX(-6deg);   clip-path:inset(15% 0 20% 0); }
  66% { opacity:0.6; filter:invert(1) sepia(1) saturate(10) hue-rotate(330deg) contrast(9)  brightness(5)   drop-shadow(6px 10px 0 rgba(0,229,255,0.75)) drop-shadow(-6px -10px 0 rgba(255,0,102,0.75)); transform:translateX(-7px) skewX(4deg);  clip-path:inset(0 0 30% 0); }
  83% { opacity:0.9; filter:invert(1) sepia(1) saturate(18) hue-rotate(305deg) contrast(3)  brightness(2)   drop-shadow(-11px -2px 0 rgba(0,229,255,0.95)) drop-shadow(11px 2px 0 rgba(255,0,102,0.95)); transform:translateX(5px) scaleY(1.05);  clip-path:inset(8% 0 8% 0); }
  100%{ opacity:0.9; filter:invert(1) sepia(1) saturate(20) hue-rotate(300deg) contrast(6)  brightness(2.5) drop-shadow(-9px -3px 0 rgba(0,229,255,1))   drop-shadow(9px 3px 0 rgba(255,0,102,1));   transform:translateX(-5px) skewX(-4deg);  clip-path:inset(5% 0 10% 0); }
}

/* signal states toggled by JS */
.aof-img.sig-noise{ animation: sig-noise 0.09s steps(2) infinite; }
.aof-img.sig-lock{  animation: sig-lock  0.68s steps(7) forwards; }
.aof-img.sig-clear{ animation: sig-clear 0.85s steps(6) infinite; }
.aof-img.sig-drop{  animation: sig-drop  0.35s steps(4) forwards; }
.aof-img.sig-explode{ animation: sig-explode 0.75s steps(8) forwards; pointer-events:none; }

/* heavy color static */
@keyframes sig-noise{
  0%  { opacity:0.22; filter:invert(1) sepia(1) saturate(20) hue-rotate(290deg) contrast(8) brightness(3) drop-shadow(-9px -3px 0 rgba(0,229,255,0.95)) drop-shadow(9px 3px 0 rgba(255,0,102,0.95)); transform:translateX(-4px) scaleY(1.04) skewX(-2deg); clip-path:inset(10% 0 20% 0); }
  50% { opacity:0.06; filter:invert(1) sepia(1) saturate(4)  hue-rotate(320deg) contrast(3) brightness(0.3) saturate(0) drop-shadow(7px 5px 0 rgba(0,229,255,0.5)) drop-shadow(-7px -5px 0 rgba(255,0,102,0.5)); transform:translateX(3px) scaleY(0.96) skewX(1deg); clip-path:inset(35% 0 5% 0); }
}

/* choppy lock-on with maroon fighting through */
@keyframes sig-lock{
  0%  { opacity:0.05; filter:invert(1) sepia(1) saturate(20) hue-rotate(240deg) contrast(10) brightness(3) drop-shadow(-12px -4px 0 rgba(0,229,255,0.9)) drop-shadow(12px 4px 0 rgba(255,0,102,0.9));   clip-path:inset(45% 0 45% 0); transform:translateX(-8px) skewX(-4deg); }
  14% { opacity:0.4;  filter:invert(1) sepia(1) saturate(16) hue-rotate(310deg) contrast(4)  brightness(1.8) drop-shadow(-8px -3px 0 rgba(0,229,255,0.8)) drop-shadow(8px 3px 0 rgba(255,0,102,0.8)); clip-path:inset(15% 0 25% 0); transform:translateX(6px); }
  28% { opacity:0.03; filter:invert(1) sepia(1) saturate(2)  hue-rotate(0deg)   contrast(9)  brightness(3) saturate(0) drop-shadow(10px 2px 0 rgba(0,229,255,0.3)) drop-shadow(-10px -2px 0 rgba(255,0,102,0.3)); clip-path:inset(0 0 68% 0); transform:translateX(-11px) skewX(5deg); }
  42% { opacity:0.65; filter:invert(1) sepia(1) saturate(12) hue-rotate(305deg) contrast(3)  brightness(1.2) drop-shadow(-6px -2px 0 rgba(0,229,255,0.75)) drop-shadow(6px 2px 0 rgba(255,0,102,0.75)); clip-path:inset(0 0 0 0); transform:translateX(4px); }
  57% { opacity:0.05; filter:invert(1) sepia(1) saturate(18) hue-rotate(270deg) contrast(10) brightness(2.8) drop-shadow(-10px -5px 0 rgba(0,229,255,0.85)) drop-shadow(10px 5px 0 rgba(255,0,102,0.85)); clip-path:inset(38% 0 12% 0); transform:translateX(-7px) skewX(-3deg); }
  71% { opacity:0.78; filter:invert(1) sepia(1) saturate(9)  hue-rotate(308deg) contrast(2.5) brightness(0.9) drop-shadow(-4px -2px 0 rgba(0,229,255,0.7)) drop-shadow(4px 2px 0 rgba(255,0,102,0.7)); clip-path:inset(0 0 0 0); transform:translateX(1px); }
  85% { opacity:0.5;  filter:invert(1) sepia(1) saturate(15) hue-rotate(300deg) contrast(5)  brightness(2) drop-shadow(-5px -2px 0 rgba(0,229,255,0.8)) drop-shadow(5px 2px 0 rgba(255,0,102,0.8));   clip-path:inset(4% 0 4% 0); transform:translateX(-2px); }
  100%{ opacity:0.88; filter:invert(1) sepia(1) saturate(12) hue-rotate(300deg) contrast(2)  brightness(0.7) drop-shadow(-3px -1px 0 rgba(0,229,255,0.65)) drop-shadow(3px 1px 0 rgba(255,0,102,0.65)); clip-path:inset(0 0 0 0); transform:translateX(0) skewX(0); }
}

/* holding — slow lazy version of hover glitch, loops */
@keyframes sig-clear{
  0%  { opacity:0.72; filter:invert(1) sepia(1) saturate(14) hue-rotate(300deg) contrast(3.5) brightness(1.4) drop-shadow(-5px -2px 0 rgba(0,229,255,0.82)) drop-shadow(5px 2px 0 rgba(255,0,102,0.82)); transform:translateX(-2px) skewX(-1deg);  clip-path:inset(3% 0 5% 0); }
  16% { opacity:0.82; filter:invert(1) sepia(1) saturate(11) hue-rotate(308deg) contrast(2.5) brightness(1.8) drop-shadow(6px 3px 0 rgba(0,229,255,0.75)) drop-shadow(-6px -3px 0 rgba(255,0,102,0.75)); transform:translateX(3px) skewX(2deg);   clip-path:inset(18% 0 0 0); }
  33% { opacity:0.45; filter:invert(1) saturate(2) hue-rotate(300deg) contrast(6)  brightness(2.5) drop-shadow(-7px 0 0 rgba(0,229,255,0.55)) drop-shadow(7px 0 0 rgba(255,0,102,0.55));             transform:translateX(-2px) scaleX(1.02); clip-path:inset(0 0 22% 0); }
  50% { opacity:0.78; filter:invert(1) sepia(1) saturate(14) hue-rotate(296deg) contrast(3)   brightness(1.6) drop-shadow(-6px -3px 0 rgba(0,229,255,0.8)) drop-shadow(6px 3px 0 rgba(255,0,102,0.8));  transform:translateX(4px) skewX(-2deg);  clip-path:inset(8% 0 10% 0); }
  66% { opacity:0.6;  filter:invert(1) sepia(1) saturate(9)  hue-rotate(315deg) contrast(4.5) brightness(2.2) drop-shadow(3px 5px 0 rgba(0,229,255,0.6))  drop-shadow(-3px -5px 0 rgba(255,0,102,0.6));  transform:translateX(-3px) skewX(1deg);  clip-path:inset(0 0 15% 0); }
  83% { opacity:0.75; filter:invert(1) sepia(1) saturate(12) hue-rotate(303deg) contrast(2.8) brightness(1.3) drop-shadow(-4px -1px 0 rgba(0,229,255,0.78)) drop-shadow(4px 1px 0 rgba(255,0,102,0.78)); transform:translateX(2px) scaleY(1.02);  clip-path:inset(4% 0 4% 0); }
  100%{ opacity:0.72; filter:invert(1) sepia(1) saturate(14) hue-rotate(300deg) contrast(3.5) brightness(1.4) drop-shadow(-5px -2px 0 rgba(0,229,255,0.82)) drop-shadow(5px 2px 0 rgba(255,0,102,0.82)); transform:translateX(-2px) skewX(-1deg);  clip-path:inset(3% 0 5% 0); }
}

/* signal drops — chromatic split widens as it breaks apart */
@keyframes sig-drop{
  0%  { opacity:0.88; filter:invert(1) sepia(1) saturate(12) hue-rotate(300deg) contrast(2)   brightness(0.7) drop-shadow(-3px -1px 0 rgba(0,229,255,0.65)) drop-shadow(3px 1px 0 rgba(255,0,102,0.65));  clip-path:inset(0 0 0 0); transform:translateX(0); }
  20% { opacity:0.6;  filter:invert(1) sepia(1) saturate(20) hue-rotate(260deg) contrast(6)   brightness(2.5) drop-shadow(-10px -4px 0 rgba(0,229,255,0.9)) drop-shadow(10px 4px 0 rgba(255,0,102,0.9));  clip-path:inset(0 0 40% 0); transform:translateX(8px) skewX(3deg); }
  55% { opacity:0.1;  filter:invert(1) sepia(1) saturate(6)  hue-rotate(320deg) contrast(10)  brightness(3.5) saturate(0) drop-shadow(-14px -6px 0 rgba(0,229,255,0.4)) drop-shadow(14px 6px 0 rgba(255,0,102,0.4)); clip-path:inset(42% 0 42% 0); transform:translateX(-7px) skewX(-4deg); }
  100%{ opacity:0.08; filter:invert(1) sepia(1) saturate(12) hue-rotate(300deg) contrast(2)   brightness(0.7) drop-shadow(-1px 0px 0 rgba(0,229,255,0.1)) drop-shadow(1px 0px 0 rgba(255,0,102,0.1));  clip-path:inset(0 0 0 0); transform:translateX(0); }
}

/* click explosion — chromatic split blows apart */
@keyframes sig-explode{
  0%  { opacity:0.88; filter:invert(1) sepia(1) saturate(12) hue-rotate(300deg) contrast(2)  brightness(0.7) drop-shadow(-3px -1px 0 rgba(0,229,255,0.65)) drop-shadow(3px 1px 0 rgba(255,0,102,0.65));  transform:scale(1)    rotate(0deg)   skewX(0deg); clip-path:inset(0 0 0 0); }
  12% { opacity:1;    filter:invert(1) sepia(1) saturate(20) hue-rotate(290deg) contrast(3)  brightness(2) drop-shadow(-10px -4px 0 rgba(0,229,255,0.95)) drop-shadow(10px 4px 0 rgba(255,0,102,0.95));    transform:scale(1.4)  rotate(-3deg)  skewX(-6deg); clip-path:inset(5% 0 5% 0); }
  25% { opacity:0.7;  filter:invert(1) sepia(1) saturate(0)  hue-rotate(0deg)   contrast(20) brightness(8) drop-shadow(-18px -8px 0 rgba(0,229,255,0.7)) drop-shadow(18px 8px 0 rgba(255,0,102,0.7));    transform:scale(2.2)  rotate(5deg)   skewX(10deg);  clip-path:inset(0 0 0 0); }
  37% { opacity:1;    filter:invert(1) sepia(1) saturate(20) hue-rotate(310deg) contrast(4)  brightness(3) drop-shadow(-22px -10px 0 rgba(0,229,255,1)) drop-shadow(22px 10px 0 rgba(255,0,102,1));    transform:scale(1.8)  rotate(-8deg)  skewX(-12deg); clip-path:inset(20% 0 20% 0); }
  50% { opacity:0.5;  filter:invert(1) sepia(1) saturate(6)  hue-rotate(180deg) contrast(15) brightness(6) drop-shadow(-30px -15px 0 rgba(0,229,255,0.8)) drop-shadow(30px 15px 0 rgba(255,0,102,0.8));    transform:scale(3.5)  rotate(12deg)  skewX(8deg);   clip-path:inset(0 0 50% 0); }
  62% { opacity:0.9;  filter:invert(1) sepia(1) saturate(20) hue-rotate(300deg) contrast(5)  brightness(4) drop-shadow(-40px -20px 0 rgba(0,229,255,0.9)) drop-shadow(40px 20px 0 rgba(255,0,102,0.9));    transform:scale(5)    rotate(-6deg)  skewX(-5deg);  clip-path:inset(30% 0 30% 0); }
  75% { opacity:0.3;  filter:invert(0) sepia(1) saturate(20) hue-rotate(300deg) contrast(10) brightness(8) drop-shadow(-60px -30px 0 rgba(0,229,255,0.6)) drop-shadow(60px 30px 0 rgba(255,0,102,0.6));    transform:scale(8)    rotate(2deg)   skewX(2deg);   clip-path:inset(10% 0 10% 0); }
  100%{ opacity:0;    filter:invert(0) sepia(0) saturate(0)  hue-rotate(0deg)   contrast(1)  brightness(10) drop-shadow(-80px -40px 0 rgba(0,229,255,0)) drop-shadow(80px 40px 0 rgba(255,0,102,0));   transform:scale(14)   rotate(0deg)   skewX(0deg);   clip-path:inset(0 0 0 0); }
}

/* full-screen crimson flash on click */
.aof-flash{
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, #ff1a1a 0%, #2a0000 60%, transparent 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.12s ease-in;
}
.aof-flash.aof-flash-active{
  animation: aof-flash-burst 0.85s ease-out forwards;
}
@keyframes aof-flash-burst{
  0%  { opacity: 0; }
  15% { opacity: 0.85; }
  50% { opacity: 0.6; }
  100%{ opacity: 0; }
}

/* ── Full-site click glitch ───────────────────────────── */
#site-glitch-wrap{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 8000;
  overflow: hidden;
}
#sgc{
  position: absolute; inset: 0;
  background: rgba(0,229,255,0.13);
  mix-blend-mode: screen;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}
#sgm{
  position: absolute; inset: 0;
  background: rgba(255,0,102,0.13);
  mix-blend-mode: screen;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}
#site-static{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  mix-blend-mode: screen;
}
#sgc.sg-active{
  opacity: 1;
  animation: sgc-anim 0.09s steps(4) infinite;
}
#sgm.sg-active{
  opacity: 1;
  animation: sgm-anim 0.09s steps(4) infinite;
}
#site-static.sg-active{ opacity: 0.22; }
body.site-glitching{ animation: body-glitch 0.1s steps(5) infinite; }
@keyframes sgc-anim{
  0%  { transform:translateX(-10px);              clip-path:inset(10% 0 45% 0); }
  25% { transform:translateX(-18px) skewX(-1deg); clip-path:inset(55% 0 8%  0); }
  50% { transform:translateX(-7px);               clip-path:inset(25% 0 30% 0); }
  75% { transform:translateX(-14px) skewX(0.5deg);clip-path:inset(70% 0 3%  0); }
  100%{ transform:translateX(-10px);              clip-path:inset(10% 0 45% 0); }
}
@keyframes sgm-anim{
  0%  { transform:translateX(10px);               clip-path:inset(45% 0 10% 0); }
  25% { transform:translateX(7px);                clip-path:inset(8%  0 55% 0); }
  50% { transform:translateX(18px)  skewX(1deg);  clip-path:inset(30% 0 25% 0); }
  75% { transform:translateX(14px)  skewX(-0.5deg);clip-path:inset(3%  0 70% 0); }
  100%{ transform:translateX(10px);               clip-path:inset(45% 0 10% 0); }
}
@keyframes body-glitch{
  0%  { filter:contrast(1.9) brightness(1.15) hue-rotate(4deg);  transform:translateX(-3px) skewX(-0.3deg); }
  20% { filter:contrast(2.8) brightness(1.5)  hue-rotate(-6deg); transform:translateX(5px)  skewX(0.5deg); }
  40% { filter:contrast(1.3) brightness(0.88) hue-rotate(10deg); transform:translateX(-2px); }
  60% { filter:contrast(3.2) brightness(1.7)  hue-rotate(-4deg); transform:translateX(6px)  skewX(-0.5deg); }
  80% { filter:contrast(1.6) brightness(1.1)  hue-rotate(2deg);  transform:translateX(-5px) skewX(0.3deg); }
  100%{ filter:contrast(1.9) brightness(1.15) hue-rotate(4deg);  transform:translateX(-3px) skewX(-0.3deg); }
}