root {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 20;
}

.hype-wrap {
    position: absolute;
    top: 160px;
    bottom: 55px;
    right: 1650px;
    width: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hype-track {
    flex: 1;
    width: 20px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
}

.hype-fill {
    width: 100%;
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hype-fill-empty { background-color: rgba(167,139,250,0.40); }
.hype-fill-low   { background-color: rgba(96,165,250,0.70); }
.hype-fill-mid   { background-color: rgba(52,211,153,0.80); }

.hype-fill-high {
    background-color: rgba(251,191,36,0.90);
    animation: hype-high-pulse 0.4s ease-in-out infinite alternate;
}

@keyframes hype-high-pulse {
    0%   { background-color: rgba(251,191,36,0.70); }
    100% { background-color: rgba(251,191,36,1.00); }
}

.hype-fill-max {
    background-color: rgba(239,68,68,0.90);
    animation: hype-max-pulse 0.25s ease-in-out infinite alternate;
}

@keyframes hype-max-pulse {
    0%   { background-color: rgba(239,68,68,0.80); }
    100% { background-color: rgba(251,191,36,1.00); }
}

.hype-bubble {
    position: absolute;
    left: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.30);
    animation-name: bubble-rise;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
}

@keyframes bubble-rise {
    0%   { transform: translateY(0px); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translateY(-40px); opacity: 0; }
}

.hype-mult-label {
    position: absolute;
    top: -14px;
    left: -10px;
    font-size: 10px;
    font-weight: 900;
    color: rgba(255,255,255,0.80);
    pointer-events: none;
}

/* SCREEN SHAKE */
.hype-wrap.shake-small  { animation: shake-small  0.25s ease-out; }
.hype-wrap.shake-medium { animation: shake-medium 0.35s ease-out; }
.hype-wrap.shake-strong { animation: shake-strong 0.45s ease-out; }
.hype-wrap.shake-insane { animation: shake-insane 0.55s ease-out; }

@keyframes shake-small {
    0%,100% { transform: translate(0,0); }
    25%     { transform: translate(-2px, 1px); }
    50%     { transform: translate(2px, -1px); }
    75%     { transform: translate(-1px, 2px); }
}
@keyframes shake-medium {
    0%,100% { transform: translate(0,0); }
    20%     { transform: translate(-4px, 2px) rotate(-0.3deg); }
    40%     { transform: translate(4px,-3px) rotate(0.3deg); }
    60%     { transform: translate(-3px, 3px) rotate(-0.2deg); }
    80%     { transform: translate(3px,-2px) rotate(0.2deg); }
}
@keyframes shake-strong {
    0%,100% { transform: translate(0,0); }
    15%     { transform: translate(-6px, 3px) rotate(-0.5deg); }
    30%     { transform: translate(6px,-4px) rotate(0.5deg); }
    45%     { transform: translate(-5px, 5px) rotate(-0.4deg); }
    60%     { transform: translate(5px,-4px) rotate(0.4deg); }
    75%     { transform: translate(-3px, 2px); }
    90%     { transform: translate(2px,-2px); }
}
@keyframes shake-insane {
    0%,100% { transform: translate(0,0); }
    10%     { transform: translate(-9px, 5px) rotate(-0.7deg); }
    20%     { transform: translate(9px,-6px) rotate(0.7deg); }
    30%     { transform: translate(-8px, 7px) rotate(-0.6deg); }
    40%     { transform: translate(8px,-6px) rotate(0.6deg); }
    50%     { transform: translate(-6px, 5px) rotate(-0.4deg); }
    60%     { transform: translate(6px,-5px) rotate(0.4deg); }
    70%     { transform: translate(-4px, 3px); }
    80%     { transform: translate(3px,-3px); }
    90%     { transform: translate(-1px, 1px); }
}