* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  width:100%; height:100%;
  background:#fff;
  overflow:hidden;
  /* Prevent iOS bounce scroll */
  position:fixed;
  touch-action:none;
}

canvas {
  display:block;
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
}

#ui {
  position:absolute;
  top:0; left:0; right:0; bottom:0; /* fallback per browser datati */
  inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  pointer-events:none;
  padding-top: max(4vh, env(safe-area-inset-top, 16px));
}

.club-name {
  font-family:"Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 5vw, 2.6rem);
  font-weight:900;
  letter-spacing:.12em;
  color:#0a2a6e;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 1.2s ease, transform 1.2s ease;
  text-shadow: 0 0 20px #fff, 0 0 40px #fff;
  text-align:center;
  padding:0 16px;
}

.tagline {
  margin-top:8px;
  font-family:"Raleway", Arial, sans-serif;
  font-weight:300;
  font-size: clamp(.65rem, 2.5vw, .95rem);
  letter-spacing:.35em;
  color:#3a7bd5;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(12px);
  transition:opacity 1s ease .5s, transform 1s ease .5s;
  text-shadow: 0 0 15px #fff, 0 0 30px #fff;
  text-align:center;
  padding:0 16px;
}

.enter-btn {
  margin-top:20px;
  padding:12px 32px;
  border:2px solid #0a2a6e;
  background:rgba(255,255,255,0.88);
  color:#0a2a6e;
  font-family:"Raleway", Arial, sans-serif;
  font-size: clamp(.75rem, 2.5vw, .85rem);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  pointer-events:all;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .9s ease 1s, transform .9s ease 1s, background .3s, color .3s;
  -webkit-appearance:none;
  border-radius:0;
  min-height:44px;
}

/* Secondo pulsante: bordo azzurro */
.enter-btn--secondary {
  border-color:#3a7bd5;
  color:#3a7bd5;
}

/* Hover: sfondo giallo, testo blu scuro, bordo invariato */
.enter-btn:hover,
.enter-btn:active {
  background:#f5c400;
  color:#0a2a6e;
}

.visible { opacity:1 !important; transform:translateY(0) !important; }