:root{
  --discord:#5865F2;
  --bg1:#060712;
  --bg2:#071029;
  --muted: rgba(255,255,255,0.78);
  --glass: rgba(255,255,255,0.03);
  --max-width:1080px;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:"Inter","Segoe UI",Roboto,system-ui,-apple-system,"Helvetica Neue",Arial;-webkit-font-smoothing:antialiased;}
body{
  background:
    radial-gradient(900px 500px at 12% 8%, rgba(88,101,242,0.11), transparent),
    radial-gradient(700px 400px at 86% 86%, rgba(0,255,153,0.03), transparent),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  min-height:100vh;
}

/* glow */
.glow{
  position:fixed; left:-120px; top:-160px; width:640px;height:640px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(88,101,242,0.95), rgba(88,101,242,0.35) 30%, transparent 60%);
  filter: blur(64px); opacity:0.35; pointer-events:none; z-index:0;
}

/* container / card */
.container{
  width:min(var(--max-width),96%);
  max-width:var(--max-width);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:26px;
  box-shadow: 0 12px 50px rgba(0,0,0,0.6);
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:20px;
  align-items:center;
  z-index:1;
}
@media (min-width:960px){ .container{ grid-template-columns: 360px 1fr 300px; } }

/* logo panel */
.logo-panel{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:6px 8px; min-width:0; }

/* e-wrap scales and remains square */
.e-wrap{
  width:100%;
  max-width:140px;
  aspect-ratio:1/1;
  border-radius:18px;
  display:grid;
  place-items:center;
  padding:12px;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  transition: transform .35s cubic-bezier(.2,.9,.2,1);
  position:relative;
  min-width:0;
  overflow:visible;
}
.e-wrap:hover{ transform: translateY(-6px) rotate(-3deg) scale(1.02); }

/* logo instance (SVG file via <img>) */
.eseg-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
  z-index:1;
}

/* full-cover pulse overlay on the e-wrap (scales perfectly with the logo container) */
.eseg-pulse{
  position:absolute; inset:0; border-radius:inherit;
  z-index:2; pointer-events:none; mix-blend-mode:screen;
  background: radial-gradient(circle at 30% 25%, rgba(88,101,242,0.28), rgba(88,101,242,0.05) 35%, transparent 60%);
  opacity:0.9;
  transition: opacity 320ms linear;
  animation: esegPulseOverlay 5.6s ease-in-out infinite;
}
@keyframes esegPulseOverlay{
  0%   { transform: scale(1); opacity:0.88; filter: none; }
  30%  { transform: scale(1.02); opacity:0.96; filter: saturate(1.02); background: radial-gradient(circle at 30% 25%, rgba(88,101,242,0.40), rgba(88,101,242,0.08) 35%, transparent 60%); }
  55%  { transform: scale(1.04) rotate(-0.3deg); opacity:1; filter: saturate(1.04); }
  100% { transform: scale(1); opacity:0.88; filter: none; }
}

/* titles */
.title-block h1{ margin:0; font-size:1.28rem; color:#fff; letter-spacing:-0.4px; }
.title-block .brand{ color: var(--discord); font-weight:700; }
.lead{ margin:6px 0 12px; color:var(--muted); font-size:0.98rem; line-height:1.35; max-width:420px; }

/* info panel */
.info-panel{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:6px 8px; min-width:0; }
.tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:8px 12px; border-radius:999px; font-weight:700; color:var(--muted);
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.25); font-size:0.88rem;
}

/* discord ornament + playful float & glow */
/* container for the discord image — glow uses ::after so it scales with container */
.discord-ornament{
  margin-top:6px;
  opacity:0.99;
  position:relative; /* for ::after glow */
  min-width:0;
  display:block;
  z-index:3;
}

/* the discord image */
.discord-img{
  width:84px;
  height:auto;
  display:block;
  transform-origin:center;
  filter: drop-shadow(0 8px 18px rgba(88,101,242,0.12));
  animation: discordFloatPlayful 5.6s cubic-bezier(.22,.9,.38,.95) infinite;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), filter 200ms linear;
  position:relative;
  z-index:4;
}

/* soft pulsing glow behind the discord image (scales reliably) */
.discord-ornament::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 150%;
  height: 150%;
  border-radius: 40%;
  background: radial-gradient(circle at 40% 35%, rgba(88,101,242,0.24), rgba(88,101,242,0.06) 35%, transparent 70%);
  filter: blur(18px) saturate(1.05);
  opacity: 0.06;
  pointer-events: none;
  z-index: 2;
  animation: discordGlow 5.6s ease-in-out infinite;
}

/* playful float: stronger bob + tiny rotation and skew + micro-hue wobble */
@keyframes discordFloatPlayful {
  0%   { transform: translateY(0) rotate(0deg) skewY(0deg) scale(1) filter: hue-rotate(0deg); }
  18%  { transform: translateY(-8px) rotate(-0.9deg) skewY(-0.8deg) scale(1.06); filter: hue-rotate(6deg); }
  36%  { transform: translateY(-4px) rotate(-0.45deg) skewY(-0.4deg) scale(1.03); filter: hue-rotate(2.4deg); }
  50%  { transform: translateY(0) rotate(0deg) skewY(0deg) scale(1); filter: hue-rotate(0deg); }
  72%  { transform: translateY(-6px) rotate(0.6deg) skewY(0.4deg) scale(1.04); filter: hue-rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg) skewY(0deg) scale(1); filter: hue-rotate(0deg); }
}

/* glow pulse syncing */
@keyframes discordGlow {
  0%   { opacity: 0.06; transform: translate(-50%, -50%) scale(1); }
  45%  { opacity: 0.30; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0.06; transform: translate(-50%, -50%) scale(1); }
}

/* hover nudge (desktop) */
.discord-img:hover{
  transform: translateY(-8px) rotate(-1deg) scale(1.08);
  filter: drop-shadow(0 18px 32px rgba(88,101,242,0.18));
}

/* action panel */
.action-panel{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:6px 8px; justify-self:end; min-width:0; }

/* ring (countdown) — outer ring keeps -90deg so conic start is top */
#ring{
  width:150px;
  height:150px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: conic-gradient(var(--discord) calc(var(--pct)*1%), rgba(255,255,255,0.06) 0);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), inset 0 -8px 22px rgba(0,0,0,0.35);
  transform: rotate(-90deg);
  transition: transform .12s ease, background 240ms linear;
  position:relative;
}

/* inner circle is centered with flex column so number + label are perfectly centered together */
.count-inner{
  width:108px;
  height:108px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  transform: rotate(90deg); /* cancel outer -90deg so inner text reads upright */
  z-index:2;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.25);
  text-align:center;
  padding:6px;
  box-sizing:border-box;
}

/* number + label styles */
.count-num{ font-size:2.1rem; font-weight:800; color:white; letter-spacing:-1px; line-height:1; margin:0; display:block; }
.count-sub{ font-size:0.86rem; color:var(--muted); margin:0; line-height:1; opacity:0.95; display:block; }

/* decorative svg behind the ring (if present) */
.ring-decor{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; opacity:0.16; pointer-events:none; }

/* controls */
.controls{ display:flex; gap:10px; flex-direction:column; width:100%; max-width:220px; }
.btn{ padding:12px 14px; font-weight:700; border-radius:12px; border:0; cursor:pointer; transition: transform .12s ease, box-shadow .12s ease; box-shadow: 0 8px 30px rgba(0,0,0,0.45); }
.btn.neutral{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); color:var(--muted); }
.btn.primary{ background: linear-gradient(90deg, var(--discord), #4652e0); color: #fff; box-shadow: 0 12px 36px rgba(88,101,242,0.16); }
.btn:hover{ transform: translateY(-4px); }

/* legal */
.legal{ grid-column: 1 / -1; margin-top:8px; color: rgba(255,255,255,0.5); font-size:0.76rem; }

/* pointer / trail styles */
.pointer-dot, .trail-dot { position: fixed; pointer-events: none; left: 0; top: 0; transform: translate(-50%, -50%); mix-blend-mode: screen; z-index: 9999; will-change: transform, opacity; transition: opacity 350ms linear; }
.pointer-dot{ width:10px;height:10px;border-radius:50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(255,255,255,0.4) 30%, rgba(88,101,242,0.85) 60%); box-shadow:0 6px 18px rgba(88,101,242,0.12); opacity:0.95; }
.trail-dot{ width:16px;height:16px;border-radius:50%; background: rgba(88,101,242,0.18); box-shadow:0 10px 30px rgba(88,101,242,0.06); opacity:0; }

/* responsive / mobile adjustments */
@media (max-width:920px){
  .container{ grid-template-columns: 1fr; gap:14px; padding:18px; }
  .logo-panel{ flex-direction:row; align-items:center; gap:14px; order:1; }
  .info-panel{ order:3; width:100%; align-items:flex-start; }
  .action-panel{ order:2; flex-direction:row; justify-content:space-between; align-items:center; gap:12px; width:100%; }
  .controls{ flex-direction:row; gap:10px; max-width:none; width:auto; }
  .btn{ flex:1; padding:10px; border-radius:10px; font-size:0.95rem; }
  .discord-img{ width:56px; }
  #ring{ width:110px;height:110px; }
  .count-inner{ width:80px;height:80px; }
  .count-num{ font-size:1.25rem; }
  .count-sub{ font-size:0.76rem; }
  .lead{ max-width:100%; font-size:0.95rem; }
  .tags{ overflow:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .tag{ white-space:nowrap; }
  .e-wrap{ max-width:110px; padding:10px; }
  .eseg-logo{ width:100%; height:100%; }
  .legal{ margin-top:8px; order:4; text-align:left; }
}

/* reduced-motion: respect user preference */
@media (prefers-reduced-motion: reduce){
  .discord-img, .glow, .e-wrap, .pointer-dot, .trail-dot, .eseg-pulse, .discord-ornament::after { animation: none !important; transition: none !important; transform: none !important; filter: none !important; }
  .pointer-dot, .trail-dot { display:none; }
}