/* style.css for Miss Omnia site */
:root{
  --panel-bg: #000000;
  --btn-bg: #ffffff;
  --btn-text: #000000;
  --accent1: #7c3aed; /* purple */
  --accent2: #facc15; /* yellow */
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: white;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  min-height:100vh;
}
.topnav{
  background: var(--panel-bg);
  padding:12px 16px;
  text-align:center;
}
.topnav a{
  color: white;
  margin: 0 14px;
  text-decoration:none;
  font-weight:700;
}
.header{
  text-align:center;
  padding:32px 12px 8px;
}
h1.title{
  margin:8px 0 4px;
  font-size:2.6rem;
  color:white;
}
.container{
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  padding:28px;
}
.card{
  background: var(--panel-bg);
  padding:18px;
  border-radius:12px;
  width:220px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  text-align:center;
}
.card h2{margin:6px 0 12px;font-size:1.25rem}
.btn{
  background: var(--btn-bg);
  color: var(--btn-text);
  border: none;
  padding:10px 14px;
  margin:8px 6px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}
.btn:hover{transform:translateY(-2px); transition:0.15s}
.small{font-size:0.9rem;padding:8px 10px}

.footer{opacity:0.9;text-align:center;padding:24px 8px;font-size:0.95rem}

/* Game area */
.game-area{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:24px;
}
.centered{max-width:900px;margin:0 auto;text-align:center}

/* Reaction styles */
.reaction-box{
  width:220px;height:120px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.3rem;cursor:pointer; user-select:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.3);
}

/* Simon styles */
.simon-board{display:flex;gap:12px;justify-content:center;margin-top:12px}
.simon-pad{width:110px;height:110px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#111;cursor:pointer;user-select:none}
.simon-pad.green{background:#16a34a}
.simon-pad.red{background:#ef4444}
.simon-pad.yellow{background:#f59e0b}
.simon-pad.blue{background:#3b82f6}

/* Catch styles */
.catch-stage{position:relative;height:360px;background:linear-gradient(#08121a, rgba(0,0,0,0.3));border-radius:12px;overflow:hidden}
.player{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:100px;height:28px;background:#111;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700}
.falling{position:absolute;font-size:28px;top:8px;left:50%;transform:translateX(-50%);}

/* responsive */
@media (max-width:640px){ .card{width:90%} .simon-pad{width:80px;height:80px} }