:root{
  --primary:#ff4fd8;
  --secondary:#7c5cff;
  --gold:#ffd166;
  --cyan:#58e1ff;
  --mint:#7bffb3;
  --accent2:#ffc8ef;
  --text:#ffffff;
  --glass:rgba(18,10,34,.30);
  --glow:rgba(255,79,216,.45);
  --ticker-duration:72s;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;width:1920px;height:1080px;overflow:hidden;background:transparent !important;
  color:var(--text);
  font-family:"Trebuchet MS","Segoe UI","Microsoft YaHei","PingFang SC",Arial,sans-serif;
}
.stage{position:relative;width:1920px;height:1080px;overflow:hidden;background:transparent !important;}
.stage-grid{
  position:absolute;inset:0;opacity:.07;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:72px 72px;
}
.frame{position:absolute;inset:18px;border-radius:36px;pointer-events:none;}
.frame-1{
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 28px var(--glow), inset 0 0 46px color-mix(in srgb, var(--secondary) 28%, transparent);
}
.frame-2{inset:28px;border:1px solid rgba(255,255,255,.05);}
.light-sweep{
  position:absolute;pointer-events:none;filter:blur(70px);opacity:.28;border-radius:999px;
}
.sweep-1{width:320px;height:320px;left:-80px;top:-30px;background:color-mix(in srgb, var(--primary) 70%, transparent);animation:float1 12s ease-in-out infinite;}
.sweep-2{width:360px;height:300px;right:-110px;top:80px;background:color-mix(in srgb, var(--secondary) 70%, transparent);animation:float2 14s ease-in-out infinite;}
.sweep-3{width:340px;height:300px;right:40px;bottom:-120px;background:color-mix(in srgb, var(--cyan) 62%, transparent);animation:float3 13s ease-in-out infinite;}
.spotlight{
  position:absolute;top:-40px;width:340px;height:620px;opacity:.15;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.8), transparent 78%);
  clip-path:polygon(50% 0%, 85% 0%, 100% 100%, 0% 100%, 15% 0%);
  filter:blur(32px);
}
.spotlight.left{left:250px;transform:rotate(-8deg);animation:swivelL 8s ease-in-out infinite;}
.spotlight.right{right:250px;transform:rotate(8deg);animation:swivelR 8s ease-in-out infinite;}
.stars{
  position:absolute;inset:0;opacity:.22;pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.88) 1px, transparent 1.6px),
    radial-gradient(circle, color-mix(in srgb, var(--gold) 90%, white) 1px, transparent 1.6px),
    radial-gradient(circle, color-mix(in srgb, var(--cyan) 88%, white) 1px, transparent 1.6px);
  background-size:170px 170px, 230px 230px, 190px 190px;
  background-position:0 0, 60px 40px, 120px 110px;
  animation:starsMove 26s linear infinite;
}
.stage-orbs{
  position:absolute;left:450px;top:18px;width:980px;height:230px;pointer-events:none;opacity:.18;filter:blur(36px);
  background:
    radial-gradient(circle at 10% 55%, var(--gold) 0%, transparent 18%),
    radial-gradient(circle at 35% 45%, var(--primary) 0%, transparent 18%),
    radial-gradient(circle at 60% 48%, var(--cyan) 0%, transparent 18%),
    radial-gradient(circle at 85% 52%, var(--secondary) 0%, transparent 18%);
}
.module-card{
  position:absolute;
}
.shell-card{
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  background-color:var(--glass);border:1px solid rgba(255,255,255,.16);border-radius:24px;overflow:hidden;
  box-shadow:0 12px 36px rgba(0,0,0,.22), inset 0 0 22px rgba(255,255,255,.05), 0 0 26px color-mix(in srgb, var(--primary) 8%, transparent);
  backdrop-filter:blur(14px);
}
.shell-card::before{
  content:"";position:absolute;inset:6px;border-radius:18px;border:1px solid rgba(255,255,255,.10);pointer-events:none;
}
.shell-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.07), transparent 44%);
  opacity:.68;
}
.glitter-text{
  background:linear-gradient(90deg, #fff7c5 0%, var(--accent2) 25%, #a7ebff 50%, #dac5ff 75%, #ffffff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 14px color-mix(in srgb, var(--primary) 28%, transparent);
  animation:glitterMove 6s linear infinite;
}
.ultra-num{
  background:linear-gradient(90deg, #ffffff, #dff9ff, #fff0ae, #ffffff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.module-title{
  font-size:17px;font-weight:900;letter-spacing:2px;color:var(--gold);margin-bottom:12px;
  text-shadow:0 0 12px color-mix(in srgb, var(--gold) 28%, transparent);
}
.small-title{font-size:14px;margin-bottom:6px;}
.top-bar{
  width:1844px;height:78px;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;transform-origin:left top;
}
.brand-left,.brand-center{display:flex;align-items:center;gap:14px;}
.live-badge{
  width:78px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:19px;font-weight:900;letter-spacing:2px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));box-shadow:0 0 24px color-mix(in srgb, var(--primary) 32%, transparent);
}
.brand-title{font-size:30px;font-weight:900;letter-spacing:2px;}
.brand-subtitle{font-size:14px;opacity:.86;margin-top:4px;}
.pill{
  height:36px;display:inline-flex;align-items:center;padding:0 18px;border-radius:999px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);font-size:14px;font-weight:700;
}
.skin-pill{background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--secondary) 18%, transparent));}
.countdown-box{width:286px;padding:16px 18px 18px;transform-origin:left top;}
.countdown-value{
  font-size:48px;font-weight:900;letter-spacing:3px;color:var(--cyan);
  text-shadow:0 0 26px color-mix(in srgb, var(--cyan) 22%, transparent), 0 0 10px rgba(255,255,255,.20);
}
.welcome-box{
  width:730px;padding:18px 24px;text-align:center;transform-origin:left top;
}
.welcome-line1{font-size:24px;font-weight:900;letter-spacing:3px;}
.welcome-line2{font-size:36px;font-weight:900;margin-top:4px;text-shadow:0 0 22px color-mix(in srgb, var(--primary) 22%, transparent);}
.welcome-line3{font-size:16px;opacity:.92;margin-top:4px;}
.members-layer{position:absolute;left:0;top:0;width:1920px;height:330px;pointer-events:none;}
.member-card{
  position:absolute;width:192px;min-height:96px;padding:10px 12px 10px 86px;border-radius:20px;
  background:linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 24px rgba(0,0,0,.18), 0 0 18px color-mix(in srgb, var(--primary) 10%, transparent);
  backdrop-filter:blur(12px);
}
.member-card::before{content:"";position:absolute;inset:6px;border-radius:14px;border:1px solid rgba(255,255,255,.08);}
.member-avatar{
  position:absolute;left:10px;top:10px;width:64px;height:64px;border-radius:18px;object-fit:cover;
  border:2px solid rgba(255,255,255,.20);box-shadow:0 0 14px color-mix(in srgb, var(--primary) 18%, transparent);
}
.member-number{
  display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:900;background:linear-gradient(135deg,var(--gold),#fff1b8);color:#28112e;
}
.member-name{
  margin-top:6px;font-size:22px;font-weight:900;letter-spacing:1px;
  text-shadow:0 0 12px color-mix(in srgb, var(--secondary) 18%, transparent);
}
.member-target{margin-top:4px;font-size:13px;font-weight:800;color:var(--mint);}
.notice-box{width:290px;padding:18px;transform-origin:left top;}
.notice-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;}
.notice-list li{padding:11px 12px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:15px;}
.progress-box{width:300px;padding:18px;transform-origin:left top;}
.goal-row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:21px;font-weight:900;}
.goal-track{width:100%;height:14px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden;}
.goal-fill{
  height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,var(--primary),var(--gold),var(--cyan));
  box-shadow:0 0 18px color-mix(in srgb, var(--primary) 20%, transparent);transition:width .35s ease;
}
.leaderboard-box{width:320px;padding:18px;transform-origin:left top;}
.leaderboard-list{display:flex;flex-direction:column;gap:10px;}
.rank-item{
  display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:11px 12px;border-radius:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);
}
.rank-no{
  width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--gold),var(--primary));
  color:#280d2a;font-weight:900;
}
.rank-name{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-value{font-size:16px;font-weight:900;color:var(--cyan);}
.ticker-box{
  width:1840px;height:82px;transform-origin:left top;
}
.ticker-viewport{height:100%;display:flex;align-items:center;overflow:hidden;position:relative;padding:0 18px;}
.ticker-track{
  display:inline-flex;align-items:center;gap:52px;white-space:nowrap;will-change:transform;
  animation:tickerScroll var(--ticker-duration) linear infinite;
  font-size:25px;font-weight:900;letter-spacing:.8px;
}
.ticker-item{display:inline-flex;align-items:center;gap:14px;}
.ticker-dot{width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 14px var(--gold);}
.ticker-text{display:inline-block;}
.ticker-style-0{font-family:"Impact","Microsoft YaHei",sans-serif;color:#ffe8a0;text-shadow:0 0 12px color-mix(in srgb, var(--gold) 25%, transparent);}
.ticker-style-1{font-family:"Georgia","Microsoft YaHei",serif;color:#ffb0e7;text-shadow:0 0 12px color-mix(in srgb, var(--primary) 25%, transparent);}
.ticker-style-2{font-family:"Verdana","Microsoft YaHei",sans-serif;color:#a8e7ff;text-shadow:0 0 12px color-mix(in srgb, var(--cyan) 25%, transparent);}
.ticker-style-3{font-family:"Trebuchet MS","Microsoft YaHei",sans-serif;color:#f2e1ff;text-shadow:0 0 12px color-mix(in srgb, var(--secondary) 25%, transparent);}

.event-popup{
  position:absolute;width:760px;min-height:280px;transform-origin:left top;
  padding:28px 26px 32px;border-radius:34px;text-align:center;overflow:hidden;opacity:0;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)), var(--glass);
  border:1px solid rgba(255,255,255,.24);box-shadow:0 34px 96px rgba(0,0,0,.38), 0 0 44px color-mix(in srgb, var(--primary) 20%, transparent);
  backdrop-filter:blur(18px);
}
.event-popup.show{animation:popupShow 5.4s ease-in-out forwards;}
.event-popup.borderless{
  background:transparent;border:none;box-shadow:none;backdrop-filter:none;padding:8px 10px 14px;
}
.event-popup.borderless .popup-halo,
.event-popup.borderless .popup-ring,
.event-popup.borderless .popup-shine,
.event-popup.borderless .popup-side{opacity:.75;}
.event-popup.borderless .popup-inner-clean{
  background:transparent;
}
.popup-halo{
  position:absolute;inset:-50px;filter:blur(54px);opacity:.28;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--gold) 78%, transparent), transparent 34%),
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--primary) 88%, transparent), transparent 28%),
    radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--cyan) 88%, transparent), transparent 28%);
}
.popup-ring{
  position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.18);border-radius:50%;
  transform:translate(-50%,-50%);
  animation:pulseRing 3.2s ease-in-out infinite;
}
.popup-ring.r1{width:320px;height:320px;}
.popup-ring.r2{width:420px;height:420px;animation-delay:.5s;}
.popup-ring.r3{width:520px;height:520px;animation-delay:1s;}
.popup-shine{
  position:absolute;inset:-80px;background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.18), transparent 60%);
  animation:shine 3.6s linear infinite;
}
.popup-side{
  position:absolute;top:50%;width:180px;height:180px;filter:blur(42px);opacity:.22;border-radius:50%;
}
.popup-side.side-l{left:-40px;transform:translateY(-50%);background:color-mix(in srgb, var(--primary) 80%, transparent);}
.popup-side.side-r{right:-40px;transform:translateY(-50%);background:color-mix(in srgb, var(--cyan) 80%, transparent);}
.popup-media-wrap{position:relative;display:flex;justify-content:center;align-items:center;height:184px;margin-bottom:6px;}
.popup-media{
  max-width:280px;max-height:184px;object-fit:contain;filter:drop-shadow(0 8px 20px rgba(255,255,255,.18));
}
.popup-emoji{position:relative;font-size:54px;line-height:1;}
.popup-title{position:relative;margin-top:8px;font-size:38px;font-weight:900;letter-spacing:2px;}
.popup-name{position:relative;margin-top:8px;font-size:48px;font-weight:900;text-shadow:0 0 24px color-mix(in srgb, var(--primary) 24%, transparent);}
.popup-sub{position:relative;margin-top:6px;font-size:22px;font-weight:800;opacity:.94;}
.hearts-layer,.confetti-layer,.spark-layer,.ribbon-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.heart,.confetti,.spark,.ribbon{position:absolute;bottom:-40px;opacity:0;}
.heart{animation:heartFloat 5.3s linear forwards;text-shadow:0 0 12px color-mix(in srgb, var(--primary) 65%, transparent);}
.confetti{animation:confettiFall 4s ease-out forwards;}
.spark{animation:sparkRise 1.8s ease-out forwards;}
.ribbon{animation:ribbonBurst 2.5s ease-out forwards;}
.hidden{display:none !important;}

@keyframes glitterMove{0%{background-position:0% 50%;}100%{background-position:220% 50%;}}
@keyframes float1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(44px,-20px) scale(1.08);}}
@keyframes float2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-28px,26px) scale(1.05);}}
@keyframes float3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(22px,-20px) scale(1.06);}}
@keyframes swivelL{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(-1deg);}}
@keyframes swivelR{0%,100%{transform:rotate(8deg);}50%{transform:rotate(1deg);}}
@keyframes starsMove{from{background-position:0 0,60px 40px,120px 110px;}to{background-position:220px 220px,360px 240px,300px 420px;}}
@keyframes tickerScroll{from{transform:translateX(1920px);}to{transform:translateX(-100%);}}
@keyframes popupShow{
  0%{opacity:0;transform:scale(.92);}
  10%{opacity:1;transform:scale(1);}
  86%{opacity:1;transform:scale(1);}
  100%{opacity:0;transform:scale(.97);}
}
@keyframes pulseRing{0%,100%{opacity:.30;transform:translate(-50%,-50%) scale(.96);}50%{opacity:.56;transform:translate(-50%,-50%) scale(1.03);}}
@keyframes shine{from{transform:translateX(-120%);}to{transform:translateX(120%);}}
@keyframes heartFloat{
  0%{transform:translateY(0) scale(.8) rotate(0deg);opacity:0;}
  12%{opacity:.95;}
  100%{transform:translateY(-960px) scale(1.4) rotate(18deg);opacity:0;}
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:0;}
  10%{opacity:1;}
  100%{transform:translateY(-560px) translateX(var(--drift)) rotate(760deg);opacity:0;}
}
@keyframes sparkRise{
  0%{transform:translateY(0) scale(.8);opacity:0;}
  20%{opacity:1;}
  100%{transform:translateY(-120px) translateX(var(--dx)) scale(1.2);opacity:0;}
}
@keyframes ribbonBurst{
  0%{transform:translateY(0) translateX(0) rotate(0deg) scale(.7);opacity:0;}
  15%{opacity:1;}
  100%{transform:translateY(-260px) translateX(var(--dx)) rotate(var(--rot)) scale(1.1);opacity:0;}
}