* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: monospace, Arial, sans-serif;
  background-color: #000;
  color: #0f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-weight: 600;
}

/* Header */
header h1 a.top-link {
  color: #0f0;
  font-weight: 600;
  font-size: 1.15em;
  text-decoration: none;
  display: inline-block;
  transition: color 0.1s ease-in-out, text-shadow 0.1s ease-in-out;
}
header h1 a.top-link:hover {
  color: #ff66ff;
  text-shadow:0 0 20px #ff66ff,0 0 40px #ff66ff,0 0 60px #ff66ff;
}

/* Connect Wallet */
.connect-wallet {
  background: none;
  border: 2px solid #0f0;
  color: #0f0;
  border-radius: 12px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1em;
  transition: color 0.1s, box-shadow 0.1s;
}
.connect-wallet:hover {
  color: #ff66ff;
  box-shadow:0 0 30px #ff66ff,0 0 60px #ff66ff,0 0 90px #ff66ff;
}

/* All links hover glow */
a, .copyable, .menu a, .footer-menu a, .users-online a {
  color: #0f0;
  text-decoration: none;
  text-shadow: none;
  display: inline-block;
  transition: color 0.1s ease-in-out, text-shadow 0.1s ease-in-out;
}
a:hover, .copyable:hover, .menu a:hover, .footer-menu a:hover, .users-online a:hover {
  color: #ff66ff;
  text-shadow:0 0 20px #ff66ff,0 0 40px #ff66ff,0 0 60px #ff66ff;
}

/* Menu */
.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin: 1rem 0;
}
.online-bubble {
  width:12px; height:12px;
  background-color:#0f0; border-radius:50%;
  display:inline-block; margin-right:0.5rem;
  animation:pulse 1s infinite;
}
@keyframes pulse {
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.5);opacity:0.6;}
}

/* Main Frame */
.main-frame {
  margin:2rem auto;
  border:2px solid #0f0;
  border-radius:20px;
  padding:2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:70vw;
  max-width:1400px;
  animation: mainFrameGlow 4s linear infinite;
}
@keyframes mainFrameGlow {
  0%,100%{box-shadow:0 0 10px #0f0,0 0 20px #0f0;}
  50%{box-shadow:0 0 20px #0f0,0 0 40px #0f0;}
}

/* Video Frame */
.video-frame {
  width:65%;
  max-width:100%;
  border:2px solid #0f0;
  border-radius:12px;
  margin-bottom:2rem;
  position:relative;
  height:0;
  padding-bottom:36.25%;
  animation: videoGlow 4s linear infinite;
}
.video-frame iframe {
  position:absolute;
  top:0; left:0; width:100%; height:100%; border-radius:12px;
}
@keyframes videoGlow {
  0%{box-shadow:0 0 10px red,0 0 20px orange;}
  14%{box-shadow:0 0 10px orange,0 0 20px yellow;}
  28%{box-shadow:0 0 10px yellow,0 0 20px green;}
  42%{box-shadow:0 0 10px green,0 0 20px blue;}
  57%{box-shadow:0 0 10px blue,0 0 20px indigo;}
  71%{box-shadow:0 0 10px indigo,0 0 20px violet;}
  85%{box-shadow:0 0 10px violet,0 0 20px red;}
  100%{box-shadow:0 0 10px red,0 0 20px orange;}
}

/* Sync Button */
.sync-btn {
  font-size:1em; padding:0.5rem 1rem;
  border:2px solid #0f0; border-radius:12px;
  background:#000; color:#0f0; cursor:pointer;
  font-weight:600;
  animation:videoGlow 4s linear infinite;
  margin-top:2rem;
}

/* CA Address */
.crypto-key-container {
  display:flex; flex-direction:column; align-items:center;
  margin:1rem auto; font-size:0.9rem; position:relative;
}
#copied-msg {color:#ff66ff;margin-bottom:0.5rem;opacity:0;transition:opacity 0.3s ease;}
.copyable {cursor:pointer; text-decoration:underline; color:#0f0;}
.copyable:hover {color:#ff66ff;text-shadow:0 0 20px #ff66ff,0 0 40px #ff66ff,0 0 60px #ff66ff;}

/* Footer menu */
.footer-menu {margin:1rem 0; font-size:1rem;}

/* Social icons */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem; /* extra ruimte boven de icons */
  margin-bottom: 2rem;
}

.social-icons a img {
  width: 24px;
  height: 24px;
  /* compacte paarse glow, permanent */
  filter: drop-shadow(0 0 8px #aa33ff) drop-shadow(0 0 8px #aa33ff) drop-shadow(0 0 8px #aa33ff);
  transition: filter 0.15s ease-in-out;
}

.social-icons a:hover img {
  /* feller paars, zelfde kleur als wallet connect */
  filter: drop-shadow(0 0 16px #aa33ff) drop-shadow(0 0 16px #aa33ff) drop-shadow(0 0 16px #aa33ff);
}

/* Disclaimer */
.disclaimer {max-width:600px;margin:1rem auto;font-size:0.6rem;line-height:1.4;}

/* Responsive */
@media(max-width:768px){
  .menu{flex-direction:column;gap:1rem;}
  .video-frame{width:100%;padding-top:56.25%;}
  .main-frame{padding:2rem;width:95vw;}
}