/* ===== Reset & Body ===== */
body {
  margin: 0;
  font-family: 'Arial', sans-serif;
  overflow-x: hidden;
  color: white;
  text-align: center;
  position: relative;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-position: center;
}

/* ===== Video Background ===== */
#bgVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* ===== Overlay ===== */
body::before {
  content: "";
  position: fixed;
  top:0; left:0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.35);
  z-index: -1;
}

/* ===== Login Screen ===== */
#loginScreen {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  background: rgba(0,0,0,0.85);
  z-index: 2;
}

#loginScreen input, #loginScreen button {
  padding: 12px;
  margin-top: 10px;
  border-radius: 8px;
  border:none;
  font-size: 16px;
}

#loginScreen button {
  background:#00ffcc;
  color:#000;
  cursor:pointer;
}

/* ===== Generator Container ===== */
#generator { display:none; z-index:1; }

/* ===== Container ===== */
.container {
  max-width: 450px;
  margin: 50px auto;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  padding: 25px 20px;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ===== Headings ===== */
h1 { color:#00ffcc; margin-bottom:10px; text-shadow: 0 0 15px #00ffcc, 0 0 30px #00ffcc; }
p { margin:5px 0; }

/* ===== Select & Button ===== */
select, button {
  width:90%; padding:12px; margin-top:10px;
  border-radius:12px; border:none; font-weight:bold; outline:none;
  transition:0.3s; font-size:16px;
}
select { background: rgba(0,0,0,0.7); color:#00ffcc; }
select option { background:#111; color:#00ffcc; }
select:hover { background: rgba(0,255,204,0.2); }
button { background:#00ffcc; color:#000; cursor:pointer; box-shadow:0 5px 15px rgba(0,255,204,0.4); }
button:hover { background:#00cc99; transform: translateY(-2px); }

/* ===== Results ===== */
.results { margin-top:20px; }
.results h3 { color:#fffc00; text-shadow:0 0 10px #fffc00, 0 0 20px #fffc00; }
.results p { font-weight:bold; font-size:16px; margin:4px 0; opacity:0; transform:translateY(10px); text-shadow:0 0 5px #00ffcc, 0 0 10px #00ffcc; }

/* ===== Result Glow Pop Animation ===== */
@keyframes popGlow {
  0% { opacity:0; transform:translateY(20px) scale(0.8); text-shadow:0 0 5px #00ffcc,0 0 10px #00ffcc; }
  50% { opacity:1; transform:translateY(0px) scale(1.05); text-shadow:0 0 10px #00ffcc,0 0 20px #00ffcc; }
  100% { opacity:1; transform:translateY(0px) scale(1); text-shadow:0 0 5px #00ffcc,0 0 10px #00ffcc; }
}
.result-1 { animation: popGlow 0.6s ease forwards; }
.result-2 { animation: popGlow 0.7s ease forwards; }
.result-3 { animation: popGlow 0.8s ease forwards; }
.result-4 { animation: popGlow 0.9s ease forwards; }
.result-5 { animation: popGlow 1s ease forwards; }
.result-6 { animation: popGlow 1.1s ease forwards; }

/* ===== PC Section ===== */
#pcSection { margin-top:15px; background: rgba(255,255,255,0.05); padding:10px; border-radius:10px; }

/* ===== Footer ===== */
footer { margin-top:30px; font-size:14px; opacity:0.8; }
footer img { width:120px; margin-bottom:5px; }