/* RDE // KONTRAKT — main menu: NO SIGNAL boot, CRT glitch, terminal chrome.
 * Overrides the #title / .t-* block of style.css (the pause menu keeps the old button style).
 * Pure CSS, no images (the server's CSP only allows 'self'). Driven by js/ui/titlefx.js. */
#title {
  --neon: #ff1a2e; --neon-d: #9d0b1b; --cy: #00f0ff; --mg: #ff2bd6;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(60, 0, 8, .10) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .94) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 30%, rgba(0, 0, 0, .15) 70%, rgba(0, 0, 0, .6));
  font-family: var(--f-mono);
  overflow: hidden;
}
#title::before { display: none; }

/* ------------------------------------------------------------------ CRT layers */
.t-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.t-fx i { position: absolute; inset: 0; display: block; }
.fx-vig { background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .75) 100%); }
.fx-scan { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.fx-noise {
  opacity: .07; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .9) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .6) 0 1px, transparent 1px 5px);
  animation: t-noise .35s steps(4) infinite;
}
@keyframes t-noise { 0% { background-position: 0 0, 0 0; } 25% { background-position: 3px -2px, -4px 1px; } 50% { background-position: -5px 4px, 2px -3px; } 75% { background-position: 2px 5px, 5px 2px; } 100% { background-position: 0 0, 0 0; } }
.fx-roll {
  height: 22vh; inset: auto 0 auto 0; top: -25vh;
  background: linear-gradient(180deg, transparent, rgba(255, 40, 60, .07) 45%, rgba(255, 255, 255, .06) 50%, rgba(255, 40, 60, .07) 55%, transparent);
  animation: t-roll 7s linear infinite;
}
@keyframes t-roll { 0% { transform: translateY(0); } 100% { transform: translateY(150vh); } }
.fx-rgb { background: linear-gradient(90deg, rgba(255, 0, 40, .05), transparent 18%, transparent 82%, rgba(0, 240, 255, .05)); mix-blend-mode: screen; }

/* ------------------------------------------------------------------ terminal chrome */
.t-bar {
  position: absolute; left: 0; right: 0; z-index: 6; display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 16px; font: 400 11px var(--f-mono); letter-spacing: 2px; text-transform: none; color: rgba(255, 90, 100, .75);
  pointer-events: none; white-space: nowrap; overflow: hidden;
}
.t-top { top: 0; border-bottom: 1px solid rgba(255, 26, 46, .22); background: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent); }
.t-bot { bottom: 0; border-top: 1px solid rgba(255, 26, 46, .22); background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent); color: rgba(255, 255, 255, .32); }
.t-live b { color: #fff; font-weight: 400; text-shadow: 0 0 8px var(--neon); }
.t-live::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px var(--neon); animation: t-blink 1.2s steps(2) infinite; }
@keyframes t-blink { 50% { opacity: .15; } }

/* ------------------------------------------------------------------ content */
.t-inner { z-index: 4; padding: 0 20px; }
.t-inner.tear { animation: t-tear .22s steps(2) 1; }
@keyframes t-tear {
  0% { transform: translateX(0) skewX(0); filter: none; }
  20% { transform: translateX(-9px) skewX(3deg); filter: drop-shadow(5px 0 0 rgba(0, 240, 255, .7)) drop-shadow(-5px 0 0 rgba(255, 43, 214, .6)); }
  45% { transform: translateX(11px) skewX(-4deg); }
  70% { transform: translateX(-4px) skewX(1deg); filter: drop-shadow(-4px 0 0 rgba(0, 240, 255, .6)); }
  100% { transform: translateX(0) skewX(0); filter: none; }
}
.t-brand { font: 500 12px var(--f-mono); letter-spacing: 9px; color: var(--red2); text-shadow: 0 0 12px rgba(255, 26, 46, .6); min-height: 1.2em; }
.t-brand::before { content: '[ '; opacity: .6; } .t-brand::after { content: ' ]'; opacity: .6; }
.t-sub { font: 400 13px var(--f-mono); letter-spacing: 7px; color: #6ee89a; text-shadow: 0 0 10px rgba(95, 211, 141, .45); }
.t-sub::before { content: '> '; color: var(--neon); }
.t-sub::after { content: '_'; margin-left: 4px; color: var(--neon); animation: t-blink 1s steps(2) infinite; }

/* the logo: red neon + two colour-split ghosts that tear sideways */
#title h1.glitch {
  position: relative; color: var(--neon); margin: 16px 0 10px; animation: none;
  text-shadow: 0 0 18px rgba(255, 26, 46, .85), 0 0 60px rgba(255, 26, 46, .5), 0 0 140px rgba(255, 0, 20, .35), 0 10px 40px rgba(0, 0, 0, .9);
  animation: t-logo-flick 5.5s infinite;
}
#title h1.glitch::before, #title h1.glitch::after {
  content: attr(data-text); position: absolute; inset: 0; padding: inherit; text-align: inherit; text-shadow: none; pointer-events: none;
  mix-blend-mode: screen; clip-path: inset(0 0 100% 0);
}
#title h1.glitch::before { color: var(--cy); animation: t-g1 3.1s infinite steps(1); }
#title h1.glitch::after { color: var(--mg); animation: t-g2 2.3s infinite steps(1); }
@keyframes t-g1 {
  0%, 62%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  63% { clip-path: inset(8% 0 62% 0); transform: translate(-14px, 0); }
  65% { clip-path: inset(48% 0 22% 0); transform: translate(10px, 2px); }
  67% { clip-path: inset(75% 0 4% 0); transform: translate(-6px, -1px); }
  69% { clip-path: inset(0 0 100% 0); }
  88% { clip-path: inset(30% 0 50% 0); transform: translate(16px, 0); }
  90% { clip-path: inset(0 0 100% 0); }
}
@keyframes t-g2 {
  0%, 40%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  41% { clip-path: inset(58% 0 12% 0); transform: translate(12px, 0); }
  43% { clip-path: inset(12% 0 70% 0); transform: translate(-9px, 1px); }
  45% { clip-path: inset(0 0 100% 0); }
  77% { clip-path: inset(40% 0 38% 0); transform: translate(-18px, 0); }
  79% { clip-path: inset(82% 0 0 0); transform: translate(7px, 0); }
  81% { clip-path: inset(0 0 100% 0); }
}
@keyframes t-logo-flick { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .35; } 92% { opacity: 1; } 94% { opacity: .6; } 95% { opacity: 1; } }
/* burst (class set by titlefx.js now and then, and on hover over the logo): everything goes wrong at once */
#title h1.glitch.burst { animation: t-burst .09s steps(2) infinite; }
#title h1.glitch.burst::before { animation: t-g1b .12s steps(1) infinite; }
#title h1.glitch.burst::after { animation: t-g2b .1s steps(1) infinite; }
@keyframes t-burst { 0% { transform: translate(0) skewX(0); } 50% { transform: translate(-6px, 2px) skewX(-6deg); } 100% { transform: translate(7px, -2px) skewX(5deg); } }
@keyframes t-g1b { 0% { clip-path: inset(10% 0 55% 0); transform: translate(-22px, 0); } 33% { clip-path: inset(55% 0 15% 0); transform: translate(18px, 3px); } 66% { clip-path: inset(30% 0 40% 0); transform: translate(-12px, -2px); } 100% { clip-path: inset(0 0 70% 0); transform: translate(24px, 0); } }
@keyframes t-g2b { 0% { clip-path: inset(60% 0 8% 0); transform: translate(20px, 0); } 33% { clip-path: inset(5% 0 80% 0); transform: translate(-24px, -2px); } 66% { clip-path: inset(40% 0 30% 0); transform: translate(14px, 2px); } 100% { clip-path: inset(75% 0 0 0); transform: translate(-16px, 0); } }

/* ------------------------------------------------------------------ menu */
.t-menu { position: relative; gap: 12px; margin-top: 44px; padding: 22px 26px; }
.t-menu::before, .t-menu::after { content: ''; position: absolute; width: 18px; height: 18px; border: 0 solid var(--neon); opacity: .85; filter: drop-shadow(0 0 6px var(--neon)); }
.t-menu::before { left: 0; top: 0; border-width: 2px 0 0 2px; }
.t-menu::after { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.t-menu button {
  position: relative; overflow: hidden; width: 340px; padding: 14px 18px 14px 40px; text-align: left;
  background: rgba(8, 8, 12, .72); border: 1px solid rgba(255, 26, 46, .28); color: #d9d4c8; cursor: pointer;
  font: 500 16px var(--f-mono); letter-spacing: 6px; text-transform: uppercase; outline: none;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.t-menu button::before { content: '>'; position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--neon); opacity: .35; transition: transform .12s, opacity .12s; }
.t-menu button::after { content: ''; position: absolute; top: 0; bottom: 0; width: 38%; left: -50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); }
.t-menu button:hover, .t-menu button:focus-visible, .t-menu button:focus {
  background: rgba(255, 26, 46, .88); border-color: var(--neon); color: #fff; letter-spacing: 6px;
  box-shadow: 0 0 0 1px rgba(255, 26, 46, .5), 0 0 28px rgba(255, 26, 46, .55), inset 0 0 22px rgba(255, 255, 255, .08);
  text-shadow: 3px 0 0 rgba(0, 240, 255, .75), -3px 0 0 rgba(255, 43, 214, .6);
  animation: t-btn-glitch .38s steps(1) 1;
}
.t-menu button:hover::before, .t-menu button:focus::before { opacity: 1; color: #fff; transform: translate(6px, -50%); }
.t-menu button:hover::after, .t-menu button:focus::after { animation: t-sweep .55s ease-out 1; }
.t-menu button:active { transform: scale(.985); }
@keyframes t-sweep { from { left: -50%; } to { left: 120%; } }
@keyframes t-btn-glitch {
  0% { transform: translateX(-5px); clip-path: inset(0 0 55% 0); } 14% { transform: translateX(6px); clip-path: inset(40% 0 0 0); }
  28% { transform: translateX(-3px); clip-path: inset(0); } 42% { transform: translateX(4px) skewX(-8deg); } 56% { transform: translateX(0); }
  70% { transform: translateX(-2px); text-shadow: -4px 0 0 rgba(0, 240, 255, .8), 4px 0 0 rgba(255, 43, 214, .7); } 100% { transform: none; clip-path: inset(0); }
}
.t-foot { margin-top: 30px; font: 400 11px var(--f-mono); color: rgba(255, 255, 255, .26); letter-spacing: 2px; }

/* the menu fades in line by line once the boot screen is gone */
#title.ready .t-brand, #title.ready h1.glitch, #title.ready .t-sub, #title.ready .t-menu button, #title.ready .t-foot { animation-fill-mode: both; }
#title.ready .t-menu button { animation: t-in .45s steps(6) both; }
#title.ready .t-menu button:nth-child(2) { animation-delay: .10s; } #title.ready .t-menu button:nth-child(3) { animation-delay: .20s; } #title.ready .t-menu button:nth-child(4) { animation-delay: .30s; }
@keyframes t-in { 0% { opacity: 0; transform: translateX(-30px); } 60% { opacity: 1; transform: translateX(8px); } 100% { opacity: 1; transform: none; } }
#title.ready .t-brand, #title.ready .t-sub, #title.ready .t-foot { animation: t-fadein .8s steps(8) both; }
@keyframes t-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ boot: NO SIGNAL → RECONNECTING TO ARCHITECT */
#t-boot { display: none; position: absolute; inset: 0; z-index: 20; background: #020203; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font: 400 14px var(--f-mono); text-align: center; }
#title.booting #t-boot { display: flex; }
#t-boot::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); pointer-events: none; animation: t-noise .2s steps(3) infinite; }
.b-nosig { font: 700 clamp(34px, 7vw, 84px) var(--f-mono); letter-spacing: 14px; color: var(--neon); text-shadow: 4px 0 0 rgba(0, 240, 255, .6), -4px 0 0 rgba(255, 43, 214, .5), 0 0 40px rgba(255, 26, 46, .7); animation: t-nosig .9s steps(1) infinite; }
@keyframes t-nosig { 0% { opacity: 1; transform: none; } 12% { opacity: .2; transform: translateX(-10px) skewX(6deg); } 14% { opacity: 1; transform: translateX(8px); } 50% { opacity: 1; transform: none; } 56% { opacity: .5; } 58% { opacity: 1; transform: translateX(-5px); } 100% { opacity: 1; transform: none; } }
.b-rec { letter-spacing: 6px; color: rgba(255, 90, 100, .85); font-size: 13px; }
.b-dots::after { content: ''; animation: t-dots 1.2s steps(1) infinite; }
@keyframes t-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.b-log { margin: 14px 0 0; min-height: 5.4em; width: min(520px, 86vw); text-align: left; color: #6ee89a; font: 400 12px/1.8 var(--f-mono); letter-spacing: 1px; text-shadow: 0 0 8px rgba(95, 211, 141, .4); white-space: pre; }
.b-bar { width: min(520px, 86vw); height: 3px; background: rgba(255, 26, 46, .18); }
.b-bar i { display: block; height: 100%; width: 0; background: var(--neon); box-shadow: 0 0 14px var(--neon); }
.b-skip { position: absolute; bottom: 24px; font-size: 10px; letter-spacing: 4px; color: rgba(255, 255, 255, .25); }
/* CRT power-on flash when the boot screen leaves */
#title.poweron::after { content: ''; position: absolute; inset: 0; z-index: 30; pointer-events: none; background: #fff; animation: t-poweron .5s ease-out forwards; }
@keyframes t-poweron { 0% { opacity: .95; clip-path: inset(49% 0 49% 0); } 35% { opacity: .7; clip-path: inset(0); } 100% { opacity: 0; clip-path: inset(0); } }

@media (max-width: 720px) {
  .t-menu button { width: min(300px, 82vw); letter-spacing: 4px; font-size: 14px; }
  .t-bar span:first-child { overflow: hidden; text-overflow: ellipsis; }
  .t-sub { letter-spacing: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-noise, .fx-roll, #title h1.glitch, #title h1.glitch::before, #title h1.glitch::after, .t-live::before, .t-sub::after, .b-nosig { animation: none !important; }
  #title.ready .t-menu button, #title.ready .t-brand, #title.ready .t-sub, #title.ready .t-foot { animation: none !important; }
}