:root{
  --bg:#0f1720;
  --card:#0b1220;
  --accent:#ffcf4b;
  --muted:#94a3b8;
}

*{box-sizing:border-box}
html,body,#app{height:100%;margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg),#071019 120%);
  color:white;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

#scene{
  width:100%;
  max-width:520px;
  height:calc(100vh - 40px);
  max-height:720px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:14px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(2,6,23,0.6);
  padding:18px;
}

#skeleton{
  width:62%;
  max-width:380px;
  user-select:none;
  pointer-events:none;
  transform-origin:center bottom;
  transition:transform 220ms cubic-bezier(.2,.9,.2,1);
  filter:drop-shadow(0 10px 20px rgba(0,0,0,0.6));
}

#skeleton.play{
  transform: translateY(-6px) rotate(-6deg) scale(1.02);
}

#dootBtn{
  position:absolute;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(180deg,var(--accent),#ffb84d);
  border:0;
  color:#08101a;
  font-weight:700;
  padding:12px 18px;
  border-radius:10px;
  box-shadow:0 6px 16px rgba(255,197,88,0.18);
  font-size:16px;
  touch-action:manipulation;
  min-width:88px;
}

#controls{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:8px;
  align-items:center;
}

.toggle{
  display:flex;
  gap:6px;
  align-items:center;
  background:rgba(255,255,255,0.03);
  padding:6px 8px;
  border-radius:8px;
  font-size:13px;
  color:var(--muted);
}

.toggle input{ width:18px; height:18px; accent-color:var(--accent) }

#particles{
  position:absolute;
  top:6%;
  right:4%;
  width:40%;
  height:40%;
  pointer-events:none;
  overflow:visible;
}
.particle{
  position:absolute;
  width:10px;height:10px;
  background:var(--accent);
  border-radius:4px;
  opacity:0;
  transform:translateY(0) scale(0.6) rotate(0deg);
  will-change:transform,opacity;
  box-shadow:0 4px 12px rgba(255,200,70,0.12);
}
@media (max-width:420px){
  #skeleton{ width:78% }
  #dootBtn{ font-size:15px; padding:10px 14px; bottom:16px }
}