@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=VT323&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root { --green: #00ff41; --red: #ff2222; --yellow: #ffe600; }

html, body { width: 100%; height: 100%; overflow: hidden; }

body { background: #000; color: var(--green); font-family: 'Inter', sans-serif; height: 100vh; width: 100vw; }

#landing { position: fixed; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; z-index: 100; transition: opacity 0.6s ease; }
#landing.fade-out { opacity: 0; pointer-events: none; }
.landing-inner { text-align: center; }

#enterBtn { font-family: 'Inter', sans-serif; font-size: 2.2rem; font-weight: 600; letter-spacing: 0.25em; background: transparent; color: #fff; border: none; cursor: pointer; transition: opacity 0.2s; padding: 0; outline: none; text-transform: uppercase; }
#enterBtn:hover { opacity: 0.5; }
#enterBtn:active { transform: scale(0.96); }

#main { position: fixed; inset: 0; }
#main.hidden { display: none; }

#bgVideo { position: fixed; top: 50%; left: 50%; min-width: 100vw; min-height: 100vh; width: 100vw; height: 100vh; transform: translate(-50%, -50%); object-fit: cover; object-position: center; z-index: 0; }

#overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.25); z-index: 1; }

#terminal { position: fixed; inset: 0; z-index: 10; display: flex; align-items: stretch; justify-content: center; padding: 8px; }

#termBody { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 12px 10px 24px; font-size: 2.2rem; line-height: 1.22; text-align: center; }

#output { display: block; width: 100%; max-width: 100%; }

.row-cell { display: block; width: 100%; text-align: center; padding: 1px 0; }

#output .line { display: inline; white-space: normal; overflow-wrap: anywhere; word-break: break-word; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
#output br { display: none; }

.line.label { color: #fff; font-size: 0.85em; font-weight: 600; display: inline; opacity: 0.5; }
.line.value { color: #fff; font-size: 1em; display: inline; }
.line.warn { color: var(--yellow); display: block; grid-column: 1 / -1; font-size: 1.1em; margin-top: 6px; }
.line.danger { color: var(--red); text-shadow: 0 0 10px var(--red), 1px 1px 0 #000; font-size: 1.4em; font-weight: 600; display: block; grid-column: 1 / -1; margin-top: 8px; }
.line.divider { display: none; }
.line.section-head { display: none; }

.particle { position: fixed; pointer-events: none; z-index: 9999; color: var(--green); font-family: monospace; font-size: 16px; font-weight: bold; line-height: 1; text-shadow: none; animation: particleFall var(--dur) ease-in forwards; user-select: none; }

@keyframes particleFall {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.1); }
}

#cursor { animation: blink 0.75s step-start infinite; color: var(--green); }
@keyframes blink { 50% { opacity: 0; } }

#main::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: 20; }