body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #1a1a1a;
    color: #0f0; /* Green text */
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden; /* Prevent scrollbar if things overflow */
}

h1 {
    margin-bottom: 40px;
    color: #0c0; /* Darker green */
    text-shadow: 0 0 5px #0f0;
    text-align: center;
}

.battery-container {
    width: 150px;
    height: 300px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.battery-outline {
    width: 100px;
    height: 250px;
    border: 5px solid #0f0; /* Green outline */
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse; /* Fill from bottom */
    transition: border-color 0.5s, box-shadow 0.5s; /* Smooth transition for overcharge */
}

.battery-cap {
    width: 40px;
    height: 15px;
    background-color: #0f0; /* Green cap */
    border-radius: 5px;
    position: absolute;
    top: -20px; /* Position above the outline */
    left: 50%;
    transform: translateX(-50%);
    transition: background-color 0.5s; /* Smooth transition for overcharge */
}

.battery-level {
    width: 100%;
    height: 0%; /* Start empty */
    background-color: #0f0; /* Green fill */
    transition: height 0.1s linear, background-color 0.5s; /* Smooth transition for filling up to 100% and color change */
    position: absolute;
    bottom: 0;
    left: 0;
}

.percentage-display {
    font-size: 2em;
    color: #0f0; /* Green text */
    text-shadow: 0 0 8px #0f0;
    min-height: 1.5em; /* Reserve space to prevent layout shifts */
}
/* Controls */
.controls {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}
.controls button {
    background: #111;
    color: #0f0;
    border: 1px solid #0f0;
    padding: 10px 12px;
    border-radius: 6px;
    min-width: 88px;
    touch-action: manipulation;
}
.controls button:active {
    transform: scale(0.98);
}

/* Styles for overcharging state (over 100%) */
.battery-outline.overcharged {
    border-color: #ff0000; /* Red border */
    box-shadow: 0 0 20px red; /* Red glow */
}
.battery-outline.overcharged .battery-cap {
     background-color: #ff0000; /* Red cap */
}

.battery-level.overcharged {
    background-color: #ff0000; /* Red fill */
    animation: pulsate 0.5s infinite alternate;
}

@keyframes pulsate {
    from { opacity: 1; }
    to { opacity: 0.8; }
}

/* Styles for Absolute Infinity state */
.battery-outline.infinite {
    border-color: #ffffff;
    box-shadow: 0 0 50px cyan, 0 0 30px magenta, 0 0 10px yellow;
}
.battery-outline.infinite .battery-cap {
    background-color: #ffffff;
}
.battery-level.infinite {
    background-color: #ffffff; /* White fill */
    animation: none; /* Stop pulsating or rainbow */
    height: 100% !important; /* Ensure fill is full even if it went over */
    opacity: 1; /* Ensure opacity is 1 */
}

.percentage-display.infinite {
    color: #ffffff;
    text-shadow: 0 0 15px #ffffff;
}

/* Styles for Rainbow state (past 1e+308) */
.battery-outline.rainbow {
    animation: rainbow-border 5s linear infinite; /* Rainbow border */
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.7), 0 0 30px rgba(255, 127, 0, 0.7), 0 0 40px rgba(255, 255, 0, 0.7),
                0 0 50px rgba(0, 255, 0, 0.7), 0 0 60px rgba(0, 0, 255, 0.7), 0 0 70px rgba(75, 0, 130, 0.7), 0 0 80px rgba(143, 0, 255, 0.7);
}
.battery-outline.rainbow .battery-cap {
    animation: rainbow-background 5s linear infinite; /* Rainbow cap */
}
.battery-level.rainbow {
    animation: rainbow-background 5s linear infinite; /* Rainbow fill */
    height: 100% !important; /* Ensure fill is full in rainbow state */
    opacity: 1; /* Ensure opacity is 1, stopping pulse */
}

@keyframes rainbow-background {
    0% { background-color: #ff0000; } /* Red */
    14% { background-color: #ff7f00; } /* Orange */
    28% { background-color: #ffff00; } /* Yellow */
    42% { background-color: #00ff00; } /* Green */
    57% { background-color: #0000ff; } /* Blue */
    71% { background-color: #4b0082; } /* Indigo */
    85% { background-color: #8a2be2; } /* Violet */
    100% { background-color: #ff0000; } /* Red */
}

@keyframes rainbow-border {
    0% { border-color: #ff0000; }
    14% { border-color: #ff7f00; }
    28% { border-color: #ffff00; }
    42% { border-color: #00ff00; }
    57% { border-color: #0000ff; }
    71% { border-color: #4b0082; }
    85% { border-color: #8a2be2; }
    100% { border-color: #ff0000; }
}

/* Glitch stages */
.glitch1 .battery-outline,
.glitch1 .percentage-display { animation: jitter1 0.12s infinite; }
@keyframes jitter1 { 0%{ transform: translate(0,0)} 50%{ transform: translate(0.5px,-0.5px)} 100%{ transform: translate(0,0)} }

.glitch2 .battery-outline,
.glitch2 .percentage-display { animation: jitter2 0.1s infinite; filter: contrast(1.1) saturate(1.1); }
@keyframes jitter2 { 0%{ transform: translate(0,0) rotate(0deg)} 50%{ transform: translate(1px,-1px) rotate(0.2deg)} 100%{ transform: translate(0,0) rotate(0deg)} }

.glitch3 .battery-outline,
.glitch3 .percentage-display { animation: jitter3 0.08s infinite; filter: hue-rotate(10deg) contrast(1.15); }
@keyframes jitter3 { 0%{ transform: translate(0,0)} 33%{ transform: translate(-1px,1px)} 66%{ transform: translate(2px,-1px)} 100%{ transform: translate(0,0)} }

.glitch4 .battery-outline,
.glitch4 .percentage-display { animation: jitter4 0.06s infinite; filter: hue-rotate(25deg) contrast(1.2) saturate(1.2); }
@keyframes jitter4 { 0%{ transform: translate(0,0) scale(1)} 50%{ transform: translate(2px,-2px) scale(1.01)} 100%{ transform: translate(0,0) scale(1)} }

.glitch5 .battery-outline,
.glitch5 .percentage-display { animation: jitter5 0.05s infinite; filter: hue-rotate(45deg) contrast(1.3) saturate(1.3) blur(0.3px); }
@keyframes jitter5 { 0%{ transform: translate(0,0) skew(0deg)} 50%{ transform: translate(3px,-3px) skew(0.4deg)} 100%{ transform: translate(0,0) skew(0deg)} }