/* ===== BASE ===== */
body {
margin:0;
background:#000;
color:#00ff41;
font-family:Courier New, monospace;
}

/* ===== BANNER ===== */
.banner img {
width:100%;
height:120px;
object-fit:cover;
image-rendering:pixelated;
border-bottom:3px solid #00ff41;
}

/* ===== MENU ===== */
.menu {
display:flex;
flex-wrap:wrap;
justify-content:center;
background:#001100;
border-bottom:2px solid #00ff41;
}

.menu a {
padding:10px 15px;
border-right:1px solid #00ff41;
}

/* ===== CONTENT ===== */
.content {
padding:20px;
display:flex;
justify-content:center;
}

/* ===== XP WINDOW ===== */
.xp-window {
border:3px double #00ff41;
box-shadow:0 0 20px #00ff41;
max-width:700px;
width:100%;
background:#000;
}

.xp-title {
background:linear-gradient(#003300,#001100);
padding:6px;
font-weight:bold;
}

.xp-body {
padding:12px;
}

/* ===== INTRO ===== */
.intro {
position:fixed;
inset:0;
background:#000;
color:#00ff41;
padding:20px;
pointer-events:none;
opacity:0;
}

/* ===== SCANLINES ===== */
body::after {
content:"";
position:fixed;
inset:0;
pointer-events:none;
background:repeating-linear-gradient(
to bottom,
rgba(0,0,0,0.15),
rgba(0,0,0,0.15) 1px,
transparent 1px,
transparent 3px
);
}

/* ===== BLINK ===== */
.blink {
animation:blink 1s steps(1) infinite;
}
@keyframes blink {
50% { opacity:0; }
}