/* Heavy Metal vibe */
:root{
  --bg:#0b0b0f;
  --fg:#e6e6e6;
  --accent:#ff0044;
  --accent2:#7d00ff;
  --card:#161621;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color:var(--fg);
  background: radial-gradient(1200px 800px at 10% 10%, #161621 0%, rgba(22,22,33,0) 60%),
              radial-gradient(900px 600px at 90% 20%, rgba(125,0,255,0.25) 0%, rgba(0,0,0,0) 65%),
              radial-gradient(1000px 700px at 50% 110%, rgba(255,0,68,0.25) 0%, rgba(0,0,0,0) 60%),
              var(--bg);
  overflow-x:hidden;
}

/* холст для частиц курсора */
#fx-canvas{ position:fixed; inset:0; z-index:20; pointer-events:none; }

/* кастомный курсор (бутылка пива) */
body.fx-enabled{ cursor:none; }
#beer-cursor{
  position:fixed; left:0; top:0; width:36px; height:36px; z-index:30; pointer-events:none; opacity:0; transform:translate(-9999px,-9999px);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  /* Кастомное изображение курсора */
  background-image:url("./assets/images/kursor.webp");
}


.backdrop{
  position:fixed; inset:0; pointer-events:none; opacity:.15;
  background: repeating-linear-gradient( 0deg, #fff2, #fff2 1px, transparent 2px, transparent 4px );
}

.gate{ position:fixed; inset:0; display:grid; place-items:center; z-index:1000;
  background:#000; /* полностью затмевает страницу */
}
.gate-card{ width:min(560px, 92vw); padding:28px 22px; border-radius:14px;
  background:linear-gradient(180deg, #1b1b28, #111118);
  border:1px solid #ffffff1a; box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 80px rgba(255,0,68,.18) inset;
}
.gate-title{ margin:0 0 16px; text-align:center; font-size:clamp(20px, 3.5vw, 28px); color:#fff;
  text-shadow:0 0 10px var(--accent), 0 0 20px var(--accent2);
}
.gate-row{ display:flex; gap:10px; align-items:center; }
.gate-input{ flex:1; padding:12px 14px; border-radius:10px; border:1px solid #ffffff22; background:#0f0f16; color:#fff; }
.gate-error{ margin-top:10px; color:#ff6b6b; text-align:center; }
.hidden{ display:none; }

.container{
  position:relative;
  max-width:100vw;
  margin:0 auto;
  padding:48px 24px 80px;
}

.title{
  margin:0 0 8px; text-align:center; letter-spacing:2px;
  font-size: clamp(36px, 7vw, 72px);
  font-weight:800;
  text-transform:uppercase;
  color:#fff;
  text-shadow:
    0 0 8px var(--accent),
    0 0 18px var(--accent),
    0 0 32px var(--accent2);
}
.subtitle{ display:none; }

.invite-card{
  display:grid; gap:24px; align-items:center; justify-items:center;
  grid-template-columns: 1fr; 
  background:linear-gradient(180deg, #1b1b28, #111118);
  border:1px solid #ffffff14; border-radius:16px; padding:20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 60px rgba(125,0,255,.25) inset;
}

.invite-card img{
  width:auto; max-width:95vw; border-radius:12px; display:block;
  border:1px solid #ffffff22; box-shadow: 0 8px 30px rgba(0,0,0,.6);
  max-height:92vh; height:auto; object-fit:contain; object-position:center; margin: 0 auto;
}

.details{ display:none; }
.details p{ margin:6px 0; }
.details strong{ color:#fff; }

.btn{
  display:inline-block; margin:20px auto 0; padding:12px 20px; cursor:pointer; border:none;
  color:#fff; background:linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius:10px; font-weight:700; letter-spacing:.5px; box-shadow:0 6px 20px rgba(0,0,0,.4);
}
.btn:hover{ filter:brightness(1.05) saturate(1.1); }
.btn.hidden{ display:none; }

@media (min-width: 880px){
  .invite-card{ grid-template-columns: 1fr; }
}