body { animation: bg-flash 7s steps(1, end) infinite; cursor: crosshair; }
.rainbow-title { background: red; color: blue; animation: title-colors .45s steps(1, end) infinite; }
.spin { animation: spin 5s linear infinite; }
.blink { animation: blink .35s steps(1, end) infinite; }
.wobble { animation: wobble 1.3s ease-in-out infinite alternate; }
.ad { margin: 14px auto; padding: 12px; width: 85%; border: 9px ridge yellow; background: #00ffff; color: #ff0000; font-size: 22px; }
.meter { width: 78%; height: 28px; margin: 5px auto; border: 7px ridge #ff00ff; background: #000; text-align: left; }
#meter-fill { width: 99%; height: 100%; background: repeating-linear-gradient(90deg, red 0 12px, yellow 12px 24px, lime 24px 36px, blue 36px 48px); animation: meter 1.7s steps(5, end) infinite; }
.retro-box { border: 10px ridge #ff00ff; background: #ffff00; padding: 12px; margin: 16px auto; width: 88%; }
.cursor-star { position: fixed; z-index: 9999; pointer-events: none; font-size: 22px; color: #ff00ff; text-shadow: 2px 2px yellow; animation: star-pop .8s ease-out forwards; }
button, input, textarea { font-family: "Comic Sans MS", cursive; font-size: 17px; }
@keyframes bg-flash { 0%,100% { background-color: #79ff00; } 25% { background-color: #00ffff; } 50% { background-color: #ffff00; } 75% { background-color: #ff66cc; } }
@keyframes title-colors { 0% { color: blue; background: red; } 33% { color: lime; background: purple; } 66% { color: yellow; background: blue; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { visibility: hidden; } }
@keyframes wobble { from { transform: rotate(-2deg) skew(-4deg); } to { transform: rotate(2deg) skew(4deg); } }
@keyframes meter { 0% { width: 2%; } 30% { width: 99%; } 60% { width: 17%; } 100% { width: 120%; } }
@keyframes star-pop { to { opacity: 0; transform: translateY(-35px) rotate(180deg) scale(2); } }
@media (max-width: 680px) { .ad { width: 90%; font-size: 16px; } .retro-box { width: auto; } }