:root{
  --bg:#0b0f12;
  --card:#0f1720;
  --muted:#98a0ad;
  --accent:#2dd4bf;
  --accent-2:#06b6d4;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --max-width:920px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body {height:100%}
body{
  margin:0;
  /* Elimina el destello azul al tocar en móvil */
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(circle at 10% 0%, rgba(45,212,191,0.14) 0, transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(56,189,248,0.16) 0, transparent 55%),
    radial-gradient(circle at 50% 120%, rgba(15,23,42,0.95) 0, transparent 70%),
    linear-gradient(180deg,#05070a 0%, #020308 52%, #05070a 100%);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  font-size:14px;
}

.container{width:100%;max-width:var(--max-width);}

.card{
  width:100%;
  max-width:520px;
  position:relative;
  margin:0 auto;
  display:block;
  gap:0;
  background:
    radial-gradient(circle at top, rgba(45,212,191,0.12) 0, transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.028), rgba(15,23,42,0.96));
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:
    0 22px 70px rgba(2,6,23,0.95),
    0 0 0 1px rgba(15,23,42,0.95),
    inset 0 1px 0 rgba(255,255,255,0.03);
  border:1px solid rgba(148,163,184,0.26);
}
/* sutil marco interno y franja superior que integran el botón de menú con la tarjeta */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:1px solid rgba(148,163,184,0.26);
  opacity:0.45;
  pointer-events:none;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(90deg, rgba(45,212,191,0.16), transparent 35%, transparent 65%, rgba(56,189,248,0.18) 100%);
  opacity:0.35;
  pointer-events:none;
  mix-blend-mode:soft-light;
}

/* Content column */
.content{
  padding:40px 22px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
  text-align:center;
  background:
    radial-gradient(circle at top, rgba(15,23,42,0.94) 0, transparent 48%),
    linear-gradient(180deg, transparent, rgba(15,23,42,0.98));
}

/* header */
.logo{
  display:block;
  width:82px;
  height:82px;
  object-fit:cover;
  border-radius:999px;
  margin:8px auto 12px auto;
  box-shadow:
    0 14px 34px rgba(2,6,23,0.85),
    0 0 0 2px rgba(15,23,42,1),
    0 0 0 3px rgba(45,212,191,0.26),
    inset 0 1px 0 rgba(255,255,255,0.06);
  border:0;
}
.brand{
  margin:0;
  font-size:32px;
  line-height:1;
  text-align:center;
  width:100%;
  font-weight:900;
  /* animated gradient for the title: use larger background-size and animate position */
  background: linear-gradient(90deg, #ffe66d 0%, #ffb703 25%, #22d3ee 50%, #7ee787 75%, #ff9bd6 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 7px 20px rgba(4,20,22,0.7),
    0 1px 0 rgba(255,255,255,0.03),
    0 0 22px rgba(252,211,77,0.12);
  transform: translateY(-2px);
  display:block;
  padding:6px 0 10px 0;
  border-radius:8px;
  letter-spacing:0.7px;
  position:relative;
  /* gentle horizontal shimmer of the gradient */
  animation:brand-color-shift 6s linear infinite;
}
.brand::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:44%;                 /* slightly narrower for better centering */
  height:4px;               /* a touch thicker for visibility on mobile */
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,230,109,0.18), rgba(34,211,238,0.72), rgba(6,182,212,0.0));
  box-shadow:0 8px 22px rgba(34,211,238,0.18), 0 6px 16px rgba(6,182,212,0.35);
  /* animated subtle expand + pulse for emphasis */
  transform-origin:50% 50%;
  animation:brand-underline-pulse 2200ms ease-in-out infinite;
}

/* Keyframes for the underline animation: gentle width/opacity pulse and slow horizontal shimmer */
@keyframes brand-underline-pulse {
  0% {
    width:36%;
    opacity:0.85;
    filter:blur(0px);
    box-shadow:0 6px 14px rgba(6,182,212,0.18), 0 2px 8px rgba(255,230,109,0.06);
  }
  40% {
    width:48%;
    opacity:1;
    filter:blur(.35px);
    box-shadow:0 10px 26px rgba(34,211,238,0.22), 0 4px 12px rgba(255,230,109,0.08);
  }
  70% {
    width:44%;
    opacity:0.95;
    filter:blur(.15px);
    box-shadow:0 8px 20px rgba(34,211,238,0.20), 0 3px 10px rgba(255,230,109,0.07);
  }
  100% {
    width:36%;
    opacity:0.85;
    filter:blur(0px);
    box-shadow:0 6px 14px rgba(6,182,212,0.18), 0 2px 8px rgba(255,230,109,0.06);
  }
}

/* New keyframes for a slow color shift across the title gradient */
@keyframes brand-color-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.subtitle{
  margin:0;
  color:#cbd5f5;
  font-size:14px;
  font-weight:600;
  text-align:center;
  opacity:0.94;
  letter-spacing:0.25px;
  max-width:360px;
}

/* Prominent unframed tagline under the brand title */
.tagline{
  margin:6px 0 0 0;
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:1.6px;
  text-align:center;
  text-transform:uppercase;
  display:block;
  width:100%;
  max-width:420px;
  line-height:1;
  -webkit-text-stroke:0.6px rgba(0,0,0,0.25); /* subtle edge for contrast */
  text-shadow: 0 6px 18px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.02);
  margin-left:auto;
  margin-right:auto;
  padding:0;
  background:transparent; /* ensure no surrounding box */
  border-radius:0;
  pointer-events:none;
}

/* actions */
.actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
  width:100%;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}

/* base button */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.04);
  background:var(--glass);
  color:inherit;
  cursor:pointer;
  font-weight:700;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease, background .12s ease;
  min-height:48px;
  justify-content:center;
  width:100%;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  outline:none;
}

/* Desactiva el borde/animación azul de enfoque en todos los botones principales */
button,
.btn,
.btn-primary,
.back,
.btn-join,
.verify-btn,
.btn-google {
  outline:none;
}

button:focus,
.btn:focus,
.btn-primary:focus,
.back:focus,
.btn-join:focus,
.verify-btn:focus,
.btn-google:focus {
  outline:none;
}

.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.btn .icon{width:18px;height:18px;fill:#fff;opacity:0.95;display:inline-block}

/* Make leading emoji in buttons larger than the text so they stand out */
.btn-emoji{
  display:inline-block;
  font-size:22px;            /* larger than button text */
  line-height:1;
  margin-right:10px;
  transform:translateY(-1px); /* subtle vertical alignment */
  flex-shrink:0;
}

/* keep button text visually balanced */
.btn-text{
  display:inline-block;
  font-size:14px;
  vertical-align:middle;
  font-weight:800;
}

/* Slightly larger emoji on wider screens */
@media (min-width:880px){
  .btn-emoji{ font-size:24px; margin-right:12px; }
  .btn-text{ font-size:15px; }
}

/* Ensure emoji scale a bit on small screens for touch clarity */
@media (max-width:480px){
  .btn-emoji{ font-size:26px; margin-right:10px; }
  .btn-text{ font-size:15px; }
}

/* Discord primary */
.btn-discord{
  background:linear-gradient(90deg,#5b6bf0 0%, #35393f 100%);
  color:#fff;
  box-shadow:0 10px 30px rgba(88,101,242,0.12);
  border:0;
}

/* Generator button 1 — teal accent (distinct from Discord) */
.btn-gen1{
  background: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
  color: #042024;
  font-weight:800;
  border:0;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 0 18px rgba(34,197,163,0.22),
    0 14px 34px rgba(6,182,212,0.26);
  position:relative;
  overflow:hidden;
}

/* Generator button 2 — warm accent (distinct from Discord and gen1) */
.btn-gen2{
  background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
  color:#111;
  font-weight:800;
  border:0;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 0 18px rgba(248,181,71,0.32),
    0 14px 34px rgba(239,68,68,0.30);
  position:relative;
  overflow:hidden;
}

/* Generator button 3 — diamonds (now blue color scheme) */
.btn-gen3{
  background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 60%, #1e3a8a 100%);
  color:#ffffff;
  font-weight:900;
  border:0;
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 0 18px rgba(14,165,233,0.18),
    0 14px 34px rgba(37,99,235,0.22);
  position:relative;
  overflow:hidden;
}

/* outer glow halo around generator buttons */
.btn-gen1::before,
.btn-gen2::before{
  content:"";
  position:absolute;
  inset:-20%;
  border-radius:18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(250,250,250,0.55) 0, transparent 55%),
    radial-gradient(circle at 100% 0%, rgba(255,255,255,0.35) 0, transparent 55%);
  opacity:0.0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.btn-gen1::after,
.btn-gen2::after{
  content:"";
  position:absolute;
  inset:-30%;
  border-radius:22px;
  background:
    radial-gradient(circle, rgba(16,185,129,0.22) 0, transparent 60%);
  mix-blend-mode:screen;
  opacity:0.0;
  pointer-events:none;
  transition:opacity .20s ease;
}

/* Ensure generator buttons keep same sizing/interaction as base .btn */
.btn-gen1, .btn-gen2{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  transition:
    transform .14s ease,
    box-shadow .18s ease,
    opacity .12s ease,
    background .12s ease;
  min-height:48px;
  justify-content:center;
  width:100%;
}

/* hover / active glow behavior */
.btn-gen1:hover,
.btn-gen2:hover{
  transform:translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 0 22px rgba(255,255,255,0.18),
    0 18px 40px rgba(6,182,212,0.38);
}
.btn-gen1:hover::before,
.btn-gen2:hover::before,
.btn-gen1:hover::after,
.btn-gen2:hover::after{
  opacity:1;
}
.btn-gen1:active,
.btn-gen2:active{
  transform:translateY(1px);
  box-shadow:
    0 0 0 1px rgba(15,23,42,0.9),
    0 6px 20px rgba(0,0,0,0.7);
}

/* Improved "Continuar sin Discord" as a subtle secondary filled button */
.btn-continue{
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  color:var(--muted);
  position:relative;
  overflow:hidden;
}
.btn-continue:hover{
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  color:#eafaf8;
  transform:translateY(-2px);
  box-shadow: 0 12px 30px rgba(3,7,18,0.6);
}

/* subtle accent stripe on the left of the continue button for emphasis */
.btn-continue::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  border-top-left-radius:12px;
  border-bottom-left-radius:12px;
}

/* ghost-style link */
.link{
  color:var(--accent);
  text-decoration:none;
  font-size:13px;
  text-align:center;
  display:block;
  margin-top:6px;
}

/* Prominent join Discord button for index page (compact variant) */
.btn-join{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 10px;        /* reduced padding */
  width:auto;              /* don't force full width */
  max-width:320px;
  border-radius:10px;
  background:linear-gradient(90deg,#5865f2 0%, rgba(83,96,242,0.95) 60%, rgba(255,255,255,0.02) 100%);
  color:#fff;
  font-weight:800;
  border:0;
  box-shadow: 0 8px 20px rgba(88,101,242,0.10);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  margin:6px auto;         /* center horizontally */
  font-size:14px;          /* slightly smaller text */
  min-height:40px;         /* smaller touch target but still accessible */
}
.btn-join:active{ transform: translateY(1px) }
.btn-join:hover{
  transform:translateY(-2px);
  box-shadow: 0 12px 30px rgba(88,101,242,0.14);
}
.btn-join .icon {
  width:16px;
  height:16px;
  display:inline-block;
  flex-shrink:0;
  opacity:0.95;
}

/* form */
.form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.checkbox{
  display:flex;
  gap:12px;
  align-items:flex-start;
  color:var(--muted);
  font-size:13px;
}
.checkbox input{width:18px;height:18px;accent-color:var(--accent);margin-top:3px}

/* footer layout */
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
}
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#042024;
  border:0;
  padding:10px 16px;
  border-radius:10px;
  font-weight:800;
  min-width:140px;
  box-shadow: 0 8px 26px rgba(9,75,68,0.12);
}
#adblock-info{
  background:linear-gradient(90deg,#ff3838,#dc2626);
  color:#ffffff;
  box-shadow:0 10px 30px rgba(248,113,113,0.55);
}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none}

.help{
  color:var(--muted);
  font-size:13px;
  text-align:center;
}

/* Mejora visual específica para el enlace de preguntas */
.help a{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
}
.help a:hover{
  text-decoration:underline;
}

/* small helper text under actions for spacing on narrow screens */
.actions + .form{margin-top:6px}

/* responsive / mobile: ensure big touch targets and single-column layout */
@media (max-width:880px){
  .card{max-width:100%; border-radius:12px;}
  .content{padding:16px}
  .actions{gap:10px}
  .btn{min-height:50px;padding:14px; font-size:15px}
  .link{margin-top:8px}
}

/* Right-side floating menu (polished appearance & animations) */
.side-menu-toggle{
  position:absolute;
  right:16px;
  top:12px;
  z-index:60;
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at top, rgba(45,212,191,0.20) 0, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border:1px solid rgba(148,163,184,0.35);
  color:#e5f9f5;
  cursor:pointer;
  box-shadow:
    0 14px 34px rgba(2,6,23,0.75),
    0 0 0 1px rgba(15,23,42,0.95),
    0 0 20px rgba(45,212,191,0.28);
  transition:
    transform .15s cubic-bezier(.2,.9,.2,1),
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease;
}
.side-menu-toggle:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:
    0 20px 40px rgba(2,6,23,0.85),
    0 0 0 1px rgba(15,23,42,0.9),
    0 0 22px rgba(45,212,191,0.35);
  background:
    radial-gradient(circle at top, rgba(45,212,191,0.30) 0, transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,0.98), rgba(15,23,42,0.96));
}
.side-menu-toggle svg{
  transition:transform .16s cubic-bezier(.2,.9,.2,1), opacity .16s ease;
  opacity:0.9;
}
.side-menu-toggle:hover svg{
  transform:scale(1.06);
  opacity:1;
}
.side-menu-toggle:active{
  transform:translateY(1px) scale(.97);
  box-shadow:
    0 8px 22px rgba(2,6,23,0.7),
    0 0 0 1px rgba(15,23,42,0.9);
}
.side-menu-wrapper{
  position:absolute;
  right:8px;
  top:44px;
  z-index:55;
  pointer-events:none; /* toggled via .show on wrapper */
}
.side-menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,0.45);
  backdrop-filter: blur(4px) saturate(110%);
  opacity:0;
  transition:opacity .18s ease;
  z-index:50;
  pointer-events:none;
  border-radius:0;
}
.side-menu{
  position:relative;
  transform-origin:100% 0;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:8px;
  gap:8px;
  flex-direction:column;
  min-width:190px;
  box-shadow: 0 18px 50px rgba(2,6,23,0.55);
  z-index:60;
  pointer-events:auto;
  opacity:0;
  transform:translateY(-6px) scale(.96);
  transition:opacity .22s cubic-bezier(.2,.9,.2,1), transform .22s cubic-bezier(.2,.9,.2,1);
  display:none;
}
.side-menu.show{
  opacity:1;
  transform:translateY(0) scale(1);
  display:flex;
}
/* staggered item animation for tidy entrance */
.side-item{
  background:transparent;
  border:0;
  text-align:left;
  padding:12px 14px;
  border-radius:10px;
  color:var(--muted);
  cursor:pointer;
  width:100%;
  font-weight:800;
  letter-spacing:0.2px;
  transform:translateY(6px);
  opacity:0;
  transition:transform .28s cubic-bezier(.2,.9,.2,1), opacity .22s ease, background .14s ease;
  display:flex;
  align-items:center;
  gap:8px;
}
.side-menu.show .side-item{ opacity:1; transform:translateY(0); }
.side-item[data-index="0"]{ transition-delay:0s; }
.side-item[data-index="1"]{ transition-delay:.03s; }
.side-item[data-index="2"]{ transition-delay:.06s; }
.side-item[data-index="3"]{ transition-delay:.09s; }
.side-item:hover{
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  color:var(--accent);
}
/* compact adjustments for small screens */
/* Stylish modal close "X" for follow-modal */
#follow-modal .modal-close {
  width:40px;
  height:40px;
  min-width:40px;
  padding:0;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border:0;
  color:#042024;
  box-shadow: 0 8px 26px rgba(6,182,212,0.12), inset 0 1px 0 rgba(255,255,255,0.04);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

/* Bold white X stroke and slight padding so icon sits visually centered */
#follow-modal .modal-close svg {
  width:14px;
  height:14px;
  display:block;
}
#follow-modal .modal-close svg line {
  stroke: #042024;
  stroke-width:2.2;
  stroke-linecap:round;
}

/* Hover/active feedback */
#follow-modal .modal-close:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow: 0 12px 36px rgba(6,182,212,0.18);
}
#follow-modal .modal-close:active {
  transform:translateY(1px) scale(.99);
  opacity:0.95;
}

/* Ensure accessible focus ring */
#follow-modal .modal-close:focus {
  outline:3px solid rgba(45,212,191,0.18);
  outline-offset:3px;
}

/* Keep previous small-screen adjustments */
@media (max-width:480px){
  .side-menu{right:6px; top:56px; min-width:150px; padding:6px}
  .side-menu-toggle{right:10px; top:10px}
}