* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            #18001f 0%,
            #08000d 45%,
            #000000 100%
        );

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    touch-action: none;
}

body {
    position: relative;
}

#fireworks {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    cursor: crosshair;
}

#chargeUI {
    position: fixed;

    left: 50%;
    bottom: 7%;

    transform: translateX(-50%);

    width: min(500px, 75vw);

    text-align: center;

    pointer-events: none;

    opacity: 0;

    transition: opacity 0.15s ease;

    z-index: 10;
}

#chargeUI.visible {
    opacity: 1;
}

#chargeLabel {
    margin-bottom: 10px;

    color: white;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 4px;

    text-shadow:
        0 0 8px #ff4fd8,
        0 0 20px #ff4fd8;
}

#chargeBar {
    width: 100%;
    height: 10px;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 20px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 10px rgba(255, 60, 220, 0.4),
        inset 0 0 8px rgba(0, 0, 0, 0.8);
}

#chargeProgress {
    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #ff2ca8,
            #ff58e6,
            #ffffff
        );

    box-shadow:
        0 0 10px #ff2ca8,
        0 0 25px #ff2ca8;

    transition: width 0.03s linear;
}

#chargePercent {
    margin-top: 8px;

    color: rgba(255, 255, 255, 0.9);

    font-size: 12px;

    letter-spacing: 2px;
}

#hint {
    position: fixed;

    left: 50%;
    bottom: 2%;

    transform: translateX(-50%);

    color: rgba(255, 255, 255, 0.35);

    font-size: 11px;

    letter-spacing: 2px;

    text-align: center;

    pointer-events: none;

    z-index: 5;

    transition: opacity 1s ease;
}

@media (max-width: 600px) {

    #hint {
        font-size: 9px;
    }

    #chargeLabel {
        font-size: 10px;
        letter-spacing: 3px;
    }

    #chargeBar {
        height: 8px;
    }
}