/* Base dark/futuristico */
body { font-family:'Orbitron', sans-serif; background:#0d0d0d; color:#00ffcc; margin:0; padding:0; }
header { text-align:center; padding:50px; background:linear-gradient(90deg,#0ff,#00f); color:white; }
.cards { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; padding:50px 20px; }
.card { background:#111; border:2px solid #00ffcc; border-radius:15px; width:300px; text-align:center; padding:20px; transition: transform 0.3s, box-shadow 0.3s; }
.card:hover { transform:translateY(-10px); box-shadow:0 10px 25px #00ffccaa; }
.btn { padding:10px 25px; border-radius:25px; background:#00ffcc; color:#111; cursor:pointer; font-weight:bold; transition:0.3s; }
.btn:hover { background:#0ff; }
input[type=password] { padding:10px; border-radius:10px; border:none; width:80%; margin-bottom:10px; text-align:center; }

/* Overlay full-screen */
#overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.95); display:none;
    justify-content:center; align-items:center; z-index:999; flex-direction:column; overflow:hidden;
}
#overlayMeme, #overlaySecret { width:100%; height:100%; display:flex; justify-content:center; align-items:center; }
#overlaySecret.hidden { display:none; }

#overlayImg { max-width:90%; max-height:90%; border:4px solid #00ffcc; border-radius:10px; }

/* Rullino segreto */
#secretScroll { width:90%; height:220px; overflow:hidden; display:flex; align-items:center; border:2px solid #00ffcc; border-radius:10px; }
.scrollTrack { display:flex; gap:20px; animation: scrollLinear 15s linear infinite; }
.scrollTrack img { height:200px; border:2px solid #00ffcc; border-radius:10px; }
@keyframes scrollLinear { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* Footer */
footer { text-align:center; padding:20px; background:#111; border-top:2px solid #00ffcc; }