* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg:#0b0b14;
  --bg2:#12101f;
  --purple:#a855f7;
  --cyan:#22d3ee;
  --text:#e8e6f5;
  --muted:#9a94b8;
}

body{
  background: radial-gradient(circle at 20% 20%, #1a1633, #0b0b14 60%);
  color:var(--text);
  font-family:'Segoe UI', system-ui, sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  position:relative;
}

.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 2px, transparent 4px);
  opacity:0.5;
}

.glow-orb{
  position:fixed; border-radius:50%; filter:blur(80px); opacity:0.35; z-index:0;
}
.orb1{ width:400px; height:400px; background:var(--purple); top:-100px; left:-100px; }
.orb2{ width:350px; height:350px; background:var(--cyan); bottom:-100px; right:-100px; }

.wrap{ position:relative; z-index:1; width:100%; max-width:640px; padding:32px 20px; }

.hero{
  background:rgba(18,16,31,0.7);
  border:1px solid rgba(168,85,247,0.25);
  border-radius:20px;
  padding:40px 32px;
  text-align:center;
  backdrop-filter:blur(6px);
  box-shadow:0 0 60px rgba(168,85,247,0.15);
}

.art{ position:relative; display:flex; justify-content:center; margin-bottom:12px; }
.logo-image{ width:min(100%, 320px); height:auto; filter:drop-shadow(0 0 20px rgba(34,211,238,0.45)); }

.title{
  font-size:2rem; letter-spacing:2px; margin:16px 0 8px;
  background:linear-gradient(90deg, var(--purple), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-transform:uppercase;
}
.blink{ animation:blink 1s step-start infinite; color:var(--cyan); }
@keyframes blink{ 50%{ opacity:0; } }

.subtitle{ color:var(--muted); font-size:0.95rem; margin-bottom:28px; line-height:1.5; }

.timer-box{ margin-bottom:32px; }
.timer-label{ font-size:0.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.timer{ display:flex; justify-content:center; gap:14px; margin-bottom:16px; }
.unit{
  background:rgba(255,255,255,0.04); border:1px solid rgba(168,85,247,0.3);
  border-radius:12px; padding:10px 16px; min-width:64px;
}
.unit span{ display:block; font-size:1.6rem; font-weight:700; color:var(--cyan); font-family:monospace; }
.unit small{ display:block; font-size:0.65rem; color:var(--muted); text-transform:uppercase; margin-top:2px; }

.bar-outer{ height:8px; border-radius:6px; background:rgba(255,255,255,0.06); overflow:hidden; }
.bar-inner{
  height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg, var(--purple), var(--cyan));
  transition:width 1s linear;
}

.contact{ margin-bottom:20px; }
.contact-label{ font-size:0.85rem; color:var(--muted); margin-bottom:14px; }
.contact-links{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 20px;
  border-radius:30px; text-decoration:none; font-weight:600; font-size:0.9rem;
  color:#fff; transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.telegram{ background:#229ED9; box-shadow:0 4px 14px rgba(34,158,217,0.4); }
.bale{ background:#3AC97C; box-shadow:0 4px 14px rgba(58,201,124,0.4); }

.retry-section{ margin-bottom:28px; }
.retry-button{
  display:inline-flex; align-items:center; justify-content:center; padding:10px 24px;
  border-radius:30px; text-decoration:none; font-weight:600; font-size:0.9rem;
  color:#fff; background:linear-gradient(90deg, var(--purple), var(--cyan));
  box-shadow:0 4px 14px rgba(34,211,238,0.35);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.retry-button:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(34,211,238,0.45); }
.auto-redirect{ margin-top:16px; }
.auto-redirect-label{ font-size:0.8rem; color:var(--muted); margin-bottom:10px; }
.redirect-progress-outer{ height:8px; border-radius:6px; background:rgba(255,255,255,0.06); overflow:hidden; }
.redirect-progress-inner{
  height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg, var(--purple), var(--cyan));
  transition:width 1s linear;
}

.footer-note{ font-size:0.75rem; color:var(--muted); margin-top:12px; }

@media (max-width:480px){
  .hero{ padding:28px 18px; }
  .title{ font-size:1.5rem; }
  .unit{ min-width:52px; padding:8px 10px; }
}