/* Additional styles for nicer look */
:root {
  --bg: #0b1220;
  --panel: #0a0f1a;
  --panel-border: #132033;
  --text: #e6edf6;
  --muted: #9fb1c9;
  --accent: #22c55e; /* green from logo */
  --accent-2: #2563eb; /* royal blue from logo */
}

html, body { height: 100% }
body {
  background: radial-gradient(1200px 800px at 20% -10%, #071022, var(--bg) 60%);
  color: var(--text);
}
.container { backdrop-filter: saturate(1.1); }
h1 { letter-spacing: 0.5px }
#joinForm input { background:#0a1324; color:var(--text); border:1px solid var(--panel-border) }
button { background: linear-gradient(180deg, var(--accent), #16a34a); color: #051b0c; font-weight:700 }
button:hover { filter: brightness(1.05) }
.panel { background:var(--panel); border-color:var(--panel-border) }
.name { color: var(--muted) }
.bar { background: #0e1729 }
.marble { background: var(--accent-2); box-shadow: 0 1px 0 0 rgba(255,255,255,.2) inset, 0 0 0 2px #1d4ed8 inset }
.timer { color: #fde68a }

/* Banner styles */
.banner { width:100%; background:#000; display:flex; justify-content:center; }
.banner img { width:100%; height:auto; object-fit:contain; display:block; }

/* Brand area tweaks for new logo */
.brand .logo { border-radius:12px; box-shadow: 0 0 30px rgba(34,197,94,.25) }

/* Social link in header */
.brand .social-link {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  border: 1px solid var(--panel-border);
  padding: 6px 10px;
  border-radius: 999px;
}
.brand .social-link:hover { filter: brightness(1.1) }