html,body,#app{height:100%;overflow:hidden}
*{box-sizing:border-box}
#bg-music{display:none}
body{
  margin:0;
  font-family:"宋体","Microsoft YaHei","微软雅黑","SimSun",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB",sans-serif;
  color:#fff;
  background:#000;
  -webkit-tap-highlight-color:transparent;
}
.bg-video{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.1) contrast(1.05) brightness(1.05);
}
.overlay{
  position:relative;
  z-index:5;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2vh 8vw 6vh;
  text-align:center;
  pointer-events:none;
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .6s ease,transform .6s ease;
}
.main-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3vh;
  transform:translateY(-8vh);
}
/* Music Control Button */
.music-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  z-index: 100;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}

.music-icon {
  width: 20px;
  height: 20px;
  fill: #fff;
  animation: musicRotate 3s linear infinite;
  animation-play-state: paused;
}

.music-btn.playing .music-icon {
  animation-play-state: running;
}

/* Diagonal line for muted state */
.music-line {
  position: absolute;
  width: 2px;
  height: 28px;
  background: #fff;
  transform: rotate(45deg);
  display: block;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.music-btn.playing .music-line {
  display: none;
}

@keyframes musicRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.overlay.ready{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.logo{
  position:absolute;
  top:6vh;
  left:50%;
  transform:translateX(-50%);
  width:40vw;
  max-width:180px;
  min-width:120px;
  margin-bottom:0;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.4));
}
.headline{
  line-height:2;
  font-weight:700;
  text-shadow:0 2px 12px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.35);
  margin-bottom:4vh;
}
.headline .line{
  font-size:7vw;
  font-weight:800;
  letter-spacing:.06em;
  font-family:"Microsoft YaHei","微软雅黑","SimSun","宋体",sans-serif;
  background-image:
    linear-gradient(180deg,#fffad1 0%,#ffd46b 40%,#ffb000 65%,#b06300 100%),
    linear-gradient(100deg,transparent 0%,rgba(255,255,255,.95) 40%,transparent 80%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:100% 100%,30% 100%;
  background-position:0 0,-120% 0;
  text-shadow:
    0 1px 0 rgba(255,225,160,.75),
    0 2px 2px rgba(145,75,0,.45),
    0 6px 14px rgba(0,0,0,.35),
    0 0 22px rgba(255,200,100,.45);
  will-change:background-position,filter;
}
.headline .line:first-child{
  letter-spacing:.08em;
  color: #ffffff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  text-shadow: 0 2px 4px #d81e06;
  filter:drop-shadow(0 4px 8px rgba(216, 30, 6, 0.6));
}
.headline .line:nth-child(2), .headline .line:nth-child(3){
  text-shadow:
    0 1px 0 rgba(255,225,160,.9),
    0 2px 0 rgba(145,75,0,.6),
    0 3px 1px rgba(120,60,0,.6),
    0 5px 8px rgba(0,0,0,.4),
    0 8px 16px rgba(0,0,0,.48),
    0 0 22px rgba(255,200,100,.55);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.3));
}
.overlay.ready .headline .line{
  animation:goldSweep 1.8s ease-out both;
}
@keyframes goldSweep{
  0%{background-position:0 0,-120% 0;filter:brightness(1)}
  35%{filter:brightness(1.12)}
  100%{background-position:0 0,220% 0;filter:brightness(1.06)}
}
.headline .line{
  background-image:
    radial-gradient(60% 90% at 50% 0%,rgba(255,255,255,.65),rgba(255,255,255,0) 70%),
    linear-gradient(100deg,transparent 0%,rgba(255,255,255,.95) 40%,transparent 80%),
    linear-gradient(180deg,#fffad1 0%,#ffd46b 40%,#ffb000 65%,#b06300 100%);
  background-size:100% 55%,30% 100%,100% 100%;
  background-position:0 0,-120% 0,0 0;
}

@keyframes goldSweep{
  0%{background-position:0 0,-120% 0,0 0;filter:brightness(1)}
  35%{filter:brightness(1.12)}
  100%{background-position:0 0,220% 0,0 0;filter:brightness(1.06)}
}
.start-btn{
  appearance:none;
  border:0;
  padding:1.2rem 3.2rem;
  border-radius:999px;
  background:
    radial-gradient(85% 140% at 50% 18%,rgba(255,255,255,.9),rgba(255,255,255,0) 46%),
    radial-gradient(85% 100% at 50% 85%,rgba(140,16,16,.35),rgba(140,16,16,0) 60%),
    linear-gradient(180deg,#ff5a5e 0%,#ff3b30 35%,#d81e06 65%,#8a0e0e 100%);
  color:#fff;
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:.25em;
  font-family:"Microsoft YaHei","微软雅黑","SimSun","宋体",sans-serif;
  box-shadow:
    0 16px 36px rgba(216,30,6,.35),
    0 6px 16px rgba(0,0,0,.35),
    inset 0 2px 10px rgba(255,255,255,.7),
    inset 0 -10px 20px rgba(120,16,16,.5);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .3s ease;
}
.start-btn::before{
  content:"";
  position:absolute;
  left:-30%;
  top:0;
  width:30%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  transform:skewX(-20deg);
  animation:shine 2.2s linear infinite;
}
.start-btn::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(2px 2px at 18% 40%,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(2px 2px at 72% 60%,rgba(255,255,255,.8),transparent 60%);
  opacity:.35;
  animation:glitter 3s ease-in-out infinite;
  pointer-events:none;
}
.start-btn:hover{transform:translateY(-1px) scale(1.03)}
.start-btn:active{transform:translateY(0) scale(.98)}
@keyframes shine{0%{left:-30%}50%{left:120%}100%{left:120%}}
@keyframes glitter{0%,100%{opacity:.4}50%{opacity:.85}}
.loader{
  position:fixed;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  transition:opacity .4s ease,visibility .4s ease;
}
.loader.hidden{opacity:0;visibility:hidden}
.loader-inner{
  width:72vw;
  max-width:420px;
  text-align:center;
}
.bar{
  height:10px;
  width:100%;
  border-radius:999px;
  background:rgba(255,255,255,.2);
  overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.bar span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#ff6b6b,#ff2d2d 60%,#ffc371);
  box-shadow:0 0 16px rgba(255,90,90,.6);
  transition:width .2s ease;
}
.percent{
  margin-top:.9rem;
  font-size:1rem;
  letter-spacing:.1em;
  opacity:.9;
}
.particles{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:radial-gradient(ellipse at 50% 120%, rgba(255,255,255,.1), transparent 60%);
}
.particles::before,.particles::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.8),transparent 60%),
                   radial-gradient(2px 2px at 70% 60%,rgba(255,255,255,.7),transparent 60%),
                   radial-gradient(2px 2px at 40% 80%,rgba(255,255,255,.8),transparent 60%),
                   radial-gradient(2px 2px at 80% 20%,rgba(255,255,255,.7),transparent 60%),
                   radial-gradient(2px 2px at 10% 70%,rgba(255,255,255,.65),transparent 60%);
  animation:twinkle 3s ease-in-out infinite;
}
.particles::after{
  filter:hue-rotate(15deg) brightness(1.3);
  animation-duration:5s;
  opacity:.7;
}
@keyframes twinkle{
  0%,100%{opacity:.35;transform:translateY(0)}
  50%{opacity:.9;transform:translateY(-4px)}
}
@media (min-width:768px){
  .logo{max-width:220px}
  .headline .line{font-size:36px}
  .main-cta{transform:translateY(-10vh)}
}