*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:"Microsoft YaHei",sans-serif;
}

/* 五彩斑斓的黑 */
body{
    background:
        radial-gradient(circle at 20% 20%, rgba(255,0,100,.25), transparent 25%),
        radial-gradient(circle at 80% 20%, rgba(0,255,255,.25), transparent 25%),
        radial-gradient(circle at 20% 80%, rgba(255,255,0,.2), transparent 25%),
        radial-gradient(circle at 80% 80%, rgba(0,255,0,.2), transparent 25%),
        #050505;
}

.panel{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    color:white;
    z-index:100;
}

.panel h1{
    font-size:48px;
}

.panel h2{
    font-size:18px;
    opacity:.8;
}

footer{
    position:fixed;
    bottom:10px;
    width:100%;
    text-align:center;
    color:white;
    opacity:.7;
}

#scene{
    width:100%;
    height:100%;
    position:relative;
}

#ball{
    width:128px;
    height:128px;
    border-radius:50%;
    position:absolute;
    left:200px;
    top:200px;

    overflow:hidden;
    
    touch-action:none;
    user-select:none;

    background:
    linear-gradient(135deg,#ffcf4d,#ff7b00);

    cursor:grab;

    box-shadow:
    0 15px 40px rgba(0,0,0,.4),
    inset 10px 10px 20px rgba(255,255,255,.2);
}

#ball img{
    width:100%;
    height:100%;
    object-fit:cover;

    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
}

#effects{
    position:absolute;
    inset:0;
    pointer-events:none;

    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
}

/* 汪字效果 */

.wang{
    position:absolute;
    color:white;
    font-size:32px;
    font-weight:bold;

    text-shadow:
    0 0 10px white,
    0 0 20px hotpink;

    animation:wangPop .8s ease-out forwards;
}

@keyframes wangPop{
    from{
        opacity:1;
        transform:translateY(0) scale(.5);
    }

    to{
        opacity:0;
        transform:translateY(-80px) scale(1.5);
    }
}