@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik+Glitch&family=Permanent+Marker&display=swap');

/* ==========================================================================
   MLG 360 NO-SCOPE OMEGA OVERLOAD - MAXIMUM RGB & SPINNING APOCALYPSE
   ========================================================================== */

* {
    box-sizing: border-box;
    cursor: crosshair !important;
}

:root {
    --rgb-red: #ff0000;
    --rgb-orange: #ff7700;
    --rgb-yellow: #ffff00;
    --rgb-green: #00ff00;
    --rgb-cyan: #00ffff;
    --rgb-blue: #0033ff;
    --rgb-purple: #9900ff;
    --rgb-pink: #ff007f;
}

/* ================= BACKGROUND RAVE TOTAL & LENS FLARES ================= */
body {
    margin: 0;
    padding: 0;
    background: #020208;
    color: #fff;
    font-family: 'Impact', 'Comic Sans MS', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    /* FOND RGB DISCO STROBOSCOPIQUE */
    animation: discoBg 2s infinite linear;
}

@keyframes discoBg {
    0% { background-color: #0d021a; }
    20% { background-color: #1a0208; }
    40% { background-color: #021a08; }
    60% { background-color: #02141a; }
    80% { background-color: #1a1602; }
    100% { background-color: #0d021a; }
}

/* GRILLE CYBERPUNK QUI DÉFILE SOUS VITESSE LUMIÈRE */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 0, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 128, 0.15) 1px, transparent 1px);
    background-size: 35px 35px;
    animation: gridScroll 1s infinite linear;
    pointer-events: none;
    z-index: 1;
}

@keyframes gridScroll {
    0% { background-position: 0 0; }
    100% { background-position: 35px 35px; }
}

/* DOUBLE BALAYAGE LASER TRIPLE CROISÉ */
body::after {
    content: "";
    position: fixed;
    top: -100%; left: -100%; width: 300%; height: 300%;
    background: 
        radial-gradient(circle, rgba(255,0,0,0.2) 10%, transparent 40%),
        linear-gradient(45deg, transparent 46%, #00ffea 49%, #ff00ea 51%, transparent 54%),
        linear-gradient(-45deg, transparent 46%, #ffe600 49%, #00ff00 51%, transparent 54%);
    pointer-events: none;
    z-index: 2;
    animation: megaLasers 2.5s infinite linear;
}

@keyframes megaLasers {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.3); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ================= 4 COINS TOURNANTS PERMANENTS ================= */
.corner-spinner {
    position: fixed;
    font-size: 3.5rem;
    z-index: 9999;
    pointer-events: none;
    animation: perpetualSpin 1s infinite linear;
}

.corner-tl { top: 15px; left: 15px; animation-duration: 0.8s; }
.corner-tr { top: 15px; right: 15px; animation-duration: 1.2s; animation-direction: reverse; }
.corner-bl { bottom: 15px; left: 15px; animation-duration: 0.6s; }
.corner-br { bottom: 15px; right: 15px; animation-duration: 1s; animation-direction: reverse; }

@keyframes perpetualSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.5); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ================= OBJETS QUI VOLENT DANS TOUS LES SENS ================= */
/* 1. Pluie descendante */
.meme-rain {
    position: fixed;
    top: -50px;
    font-size: 2.8rem;
    pointer-events: none;
    z-index: 3;
    animation: memeFall linear infinite;
}

@keyframes memeFall {
    0% { transform: translateY(-50px) rotate(0deg) scale(0.6); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(115vh) rotate(1080deg) scale(1.5); opacity: 0; }
}

.mr-1 { left: 4%; animation-duration: 3s; animation-delay: 0s; }
.mr-2 { left: 16%; animation-duration: 4.5s; animation-delay: 1s; }
.mr-3 { left: 30%; animation-duration: 2.8s; animation-delay: 0.3s; }
.mr-4 { left: 46%; animation-duration: 5s; animation-delay: 1.7s; }
.mr-5 { left: 62%; animation-duration: 3.5s; animation-delay: 0.7s; }
.mr-6 { left: 76%; animation-duration: 4s; animation-delay: 1.4s; }
.mr-7 { left: 88%; animation-duration: 3.2s; animation-delay: 0.1s; }

/* 2. Ballons / Mèmes qui montent (Anti-Gravité) */
.meme-rise {
    position: fixed;
    bottom: -60px;
    font-size: 2.5rem;
    pointer-events: none;
    z-index: 3;
    animation: memeRise linear infinite;
}

@keyframes memeRise {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(-120vh) rotate(-720deg); opacity: 0; }
}

.m-rise-1 { left: 10%; animation-duration: 4s; animation-delay: 0.5s; }
.m-rise-2 { left: 38%; animation-duration: 5s; animation-delay: 2s; }
.m-rise-3 { left: 70%; animation-duration: 3.8s; animation-delay: 1.2s; }
.m-rise-4 { left: 85%; animation-duration: 4.8s; animation-delay: 0.2s; }

/* 3. Mèmes qui traversent l'écran à l'horizontale */
.meme-fly-h {
    position: fixed;
    left: -100px;
    font-size: 3rem;
    pointer-events: none;
    z-index: 4;
    animation: flyHorizontal linear infinite;
}

@keyframes flyHorizontal {
    0% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(50vw) rotate(180deg) scale(1.6); }
    100% { transform: translateX(115vw) rotate(360deg); }
}

.fly-1 { top: 25%; animation-duration: 4s; animation-delay: 0.5s; }
.fly-2 { top: 65%; animation-duration: 3.2s; animation-delay: 2s; }

/* ================= DEUX BANNIÈRES DÉFILANTES CROISÉES ================= */
.mlg-marquee {
    background: repeating-linear-gradient(
        -45deg,
        #000,
        #000 20px,
        #ffff00 20px,
        #ffff00 40px
    );
    color: #000;
    font-weight: 900;
    padding: 10px 0;
    font-size: 1.3rem;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 5px solid var(--rgb-pink);
    border-top: 5px solid var(--rgb-cyan);
    text-shadow: 2px 2px 0 #fff;
    box-shadow: 0 0 40px var(--rgb-yellow);
    animation: rgbBorderCycle 0.5s infinite linear;
}

.mlg-marquee-inner {
    display: inline-block;
    padding-left: 100%;
    animation: marqueeLeft 6s linear infinite;
}

@keyframes marqueeLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.marquee-bottom {
    margin-top: 50px;
}

.marquee-bottom .mlg-marquee-inner {
    animation: marqueeRight 6s linear infinite;
}

@keyframes marqueeRight {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

/* ================= CONTENEUR PRINCIPAL BASS BOOST RGB ================= */
.container {
    max-width: 980px;
    margin: 25px auto;
    background: rgba(10, 8, 25, 0.92);
    border: 8px solid var(--rgb-green);
    border-radius: 25px;
    padding: 35px;
    position: relative;
    z-index: 10;
    animation: 
        bassBoostTremble 0.3s infinite alternate,
        rgbBorderCycle 1s infinite linear,
        rainbowShadow 1.5s infinite linear;
}

@keyframes bassBoostTremble {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.01) rotate(-0.5deg); }
    50% { transform: scale(0.995) rotate(0.5deg); }
    75% { transform: scale(1.015) rotate(-0.3deg); }
    100% { transform: scale(1.005) rotate(0.3deg); }
}

@keyframes rgbBorderCycle {
    0%   { border-color: #ff0000; }
    16%  { border-color: #ff7700; }
    33%  { border-color: #ffff00; }
    50%  { border-color: #00ff00; }
    66%  { border-color: #00ffff; }
    83%  { border-color: #9900ff; }
    100% { border-color: #ff0000; }
}

@keyframes rainbowShadow {
    0%   { box-shadow: 0 0 40px #ff0000, inset 0 0 25px #00ffff; }
    33%  { box-shadow: 0 0 60px #00ff00, inset 0 0 35px #ff00ff; }
    66%  { box-shadow: 0 0 50px #ffff00, inset 0 0 30px #00ff00; }
    100% { box-shadow: 0 0 40px #ff0000, inset 0 0 25px #00ffff; }
}

/* ================= HEADER & TITRE GLITCH ARC-EN-CIEL ================= */
.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.spinning-pokeball {
    font-size: 4rem;
    display: inline-block;
    animation: megaPokeball 0.6s infinite linear;
}

@keyframes megaPokeball {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.5); }
    100% { transform: rotate(360deg) scale(1); }
}

h1 {
    font-family: 'Rubik Glitch', 'Impact', sans-serif;
    font-size: 3.6rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin: 0;
    background: linear-gradient(90deg, #ff0000, #ff7700, #ffff00, #00ff00, #00ffff, #0033ff, #ff007f, #ff0000);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rgbText 1s linear infinite, violentSeizure 0.2s infinite;
}

@keyframes rgbText {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes violentSeizure {
    0% { transform: translate(3px, 2px) rotate(1deg); }
    25% { transform: translate(-3px, -2px) rotate(-1deg); }
    50% { transform: translate(2px, -3px) rotate(1deg); }
    75% { transform: translate(-2px, 3px) rotate(-1deg); }
    100% { transform: translate(3px, -1px) rotate(0deg); }
}

/* BADGE DATE FLUO ULTRA BASS */
.date-badge {
    text-align: center;
    font-size: 1.4rem;
    color: var(--rgb-yellow);
    text-shadow: 0 0 15px var(--rgb-yellow), 0 0 30px #ff6600;
    margin: 10px 0;
    animation: dateFlash 0.3s infinite alternate;
}

@keyframes dateFlash {
    0% { transform: scale(0.95) rotate(-1deg); color: #ffff00; }
    50% { transform: scale(1.15) rotate(1deg); color: #00ffff; }
    100% { transform: scale(1.05) rotate(0deg); color: #ff007f; }
}

hr {
    border: none;
    height: 8px;
    background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #ff00ff, #ff0000);
    background-size: 200% 200%;
    margin: 25px 0;
    animation: rainbowBar 0.5s linear infinite;
    box-shadow: 0 0 30px var(--rgb-cyan);
}

@keyframes rainbowBar {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

h2 {
    font-size: 2.3rem;
    color: var(--rgb-cyan);
    text-shadow: 3px 3px 0 #000, 0 0 25px var(--rgb-cyan);
    text-transform: uppercase;
    animation: wobbleTitle 0.6s infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

@keyframes wobbleTitle {
    0% { transform: rotate(-2deg) scale(0.98); color: #00ffff; }
    100% { transform: rotate(2deg) scale(1.03); color: #ff00ff; }
}

/* ================= FORMULAIRE ULTRA RGB ================= */
.mlg-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    padding: 25px;
    border: 5px dashed var(--rgb-yellow);
    border-radius: 18px;
    box-shadow: 0 0 35px rgba(255, 255, 0, 0.7);
    animation: formRGBBorder 1s infinite linear;
}

@keyframes formRGBBorder {
    0% { border-color: #ffff00; box-shadow: 0 0 30px #ffff00; }
    33% { border-color: #ff007f; box-shadow: 0 0 45px #ff007f; }
    66% { border-color: #00ffff; box-shadow: 0 0 40px #00ffff; }
    100% { border-color: #ffff00; box-shadow: 0 0 30px #ffff00; }
}

.mlg-form label {
    font-size: 1.4rem;
    color: var(--rgb-green);
    text-shadow: 0 0 15px var(--rgb-green);
    animation: discoLabel 0.5s infinite alternate;
}

@keyframes discoLabel {
    0% { color: #00ff00; transform: scale(1); }
    100% { color: #ffff00; transform: scale(1.05); }
}

.mlg-input {
    flex: 1;
    min-width: 250px;
    padding: 16px 22px;
    font-size: 1.4rem;
    font-family: 'Comic Sans MS', sans-serif;
    font-weight: bold;
    color: #fff;
    background: #090914;
    border: 4px solid var(--rgb-pink);
    border-radius: 12px;
    outline: none;
    animation: inputGamerRGB 1s infinite linear;
}

@keyframes inputGamerRGB {
    0% { border-color: #ff007f; box-shadow: 0 0 15px #ff007f; }
    50% { border-color: #00ffff; box-shadow: 0 0 30px #00ffff; }
    100% { border-color: #ff007f; box-shadow: 0 0 15px #ff007f; }
}

.mlg-input:focus {
    transform: scale(1.05) rotate(1deg);
    background: #1a0033;
    animation: inputSeizure 0.15s infinite;
}

@keyframes inputSeizure {
    0% { border-color: #ff0000; box-shadow: 0 0 50px #ff0000; }
    50% { border-color: #ffff00; box-shadow: 0 0 50px #ffff00; }
    100% { border-color: #00ff00; box-shadow: 0 0 50px #00ff00; }
}

/* BOUTON AJOUTER QUI TOURNE ET EXPLOSE AU SURVOL */
.mlg-btn-add {
    background: linear-gradient(45deg, #ff0000, #ff7700, #ffff00, #00ff00, #00ffff, #ff007f, #ff0000);
    background-size: 400% 400%;
    border: 4px solid #fff;
    color: #000;
    font-size: 1.5rem;
    font-weight: 900;
    font-family: 'Impact', sans-serif;
    padding: 16px 32px;
    border-radius: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: btnRGBFlow 0.8s linear infinite;
    transition: all 0.2s;
}

@keyframes btnRGBFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.mlg-btn-add:hover {
    transform: scale(1.3) rotate(360deg);
    box-shadow: 0 0 80px #ffff00, 0 0 120px #ff007f, 0 0 160px #00ffff;
    animation: crazyButtonShake 0.1s infinite;
}

@keyframes crazyButtonShake {
    0% { transform: scale(1.3) translate(4px, 4px) rotate(358deg); }
    50% { transform: scale(1.35) translate(-4px, -4px) rotate(362deg); }
    100% { transform: scale(1.3) translate(2px, -3px) rotate(360deg); }
}

/* ================= CARTES POKÉMON EN ÉBULLITION ================= */
.pokemon-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.pokemon-card {
    background: linear-gradient(135deg, rgba(25, 20, 60, 0.95), rgba(60, 10, 50, 0.95));
    border: 5px solid var(--rgb-cyan);
    border-radius: 18px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    overflow: hidden;
    animation: 
        cardFloatCrazy 2s infinite ease-in-out alternate,
        rgbCardBorder 1.5s infinite linear;
}

@keyframes cardFloatCrazy {
    0% { transform: translateY(0) rotate(-1deg); }
    100% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes rgbCardBorder {
    0% { border-color: #00ffff; box-shadow: 0 0 25px #00ffff; }
    33% { border-color: #ff007f; box-shadow: 0 0 35px #ff007f; }
    66% { border-color: #ffff00; box-shadow: 0 0 30px #ffff00; }
    100% { border-color: #00ffff; box-shadow: 0 0 25px #00ffff; }
}

/* ÉTOILE NÉON QUI TOURNE SUR CHAQUE CARTE */
.card-spinner-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 1.8rem;
    animation: perpetualSpin 1s infinite linear;
}

.pokemon-card:hover {
    transform: translateY(-18px) scale(1.12) !important;
    animation: cardMegaSpasm 0.15s infinite !important;
    z-index: 50;
    border-color: #fff !important;
    box-shadow: 
        0 0 50px #ff0000, 
        0 0 90px #ffff00, 
        0 0 140px #00ff00, 
        0 0 180px #00ffff !important;
}

@keyframes cardMegaSpasm {
    0% { transform: translateY(-18px) scale(1.12) rotate(2deg); }
    50% { transform: translateY(-18px) scale(1.12) rotate(-2deg); }
    100% { transform: translateY(-18px) scale(1.12) rotate(2deg); }
}

.pokemon-name {
    font-size: 2rem;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 8px;
    word-break: break-word;
    background: linear-gradient(90deg, #ff007f, #ffff00, #00ff00, #00ffff, #ff007f);
    background-size: 250% 250%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rgbText 1.5s linear infinite;
}

.pokemon-date {
    font-size: 0.95rem;
    color: #eee;
    font-family: 'Comic Sans MS', sans-serif;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px #000;
}

/* ================= BOUTON SUPPRIMER TOURNOYANT TURBO ================= */
.btn-delete {
    display: block;
    width: 100%;
    font-family: inherit;
    outline: none;
    background: #ff0033;
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    text-align: center;
    padding: 14px 18px;
    border-radius: 10px;
    border: 3px solid #fff;
    box-shadow: 0 0 20px #ff0033;
    text-transform: uppercase;
    font-size: 1.1rem;
    position: relative;
    z-index: 5;
    animation: btnDelThrob 0.5s infinite alternate;
}

@keyframes btnDelThrob {
    0% { transform: scale(1); box-shadow: 0 0 15px #ff0033; }
    100% { transform: scale(1.05); box-shadow: 0 0 35px #ff0033, 0 0 50px #ff00ff; }
}

.btn-delete:hover {
    background: #000;
    color: #ffff00;
    border-color: #ffff00;
    box-shadow: 0 0 80px #ff0000, 0 0 120px #ffff00;
    transform: rotate(720deg) scale(1.25) !important;
    transition: transform 0.4s ease-out;
}

/* ================= HITMARKER & FLOATING DAMAGE NUMBERS ================= */
.hitmarker-click {
    position: fixed;
    pointer-events: none;
    width: 50px;
    height: 50px;
    background: 
        linear-gradient(45deg, transparent 40%, red 45%, red 55%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, red 45%, red 55%, transparent 60%);
    transform: translate(-50%, -50%) scale(2);
    z-index: 99999;
    animation: hitmarkerAnim 0.3s forwards;
}

@keyframes hitmarkerAnim {
    0% { transform: translate(-50%, -50%) scale(2.5) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.6) rotate(90deg); opacity: 0; }
}

/* ================= POUBELLE MLG POP-UP & CHUTE 2880° ================= */
#mlg-trash-can {
    position: fixed;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    z-index: 999999;
    pointer-events: none;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
}

#mlg-trash-can.visible {
    bottom: 20px;
    transform: translateX(-50%) scale(1.3);
    opacity: 1;
    animation: trashRumble 0.15s infinite alternate;
}

@keyframes trashRumble {
    0% { transform: translateX(-50%) scale(1.3) rotate(-6deg); filter: drop-shadow(0 0 25px #ff0000); }
    100% { transform: translateX(-50%) scale(1.3) rotate(6deg); filter: drop-shadow(0 0 50px #ffff00); }
}

.trash-icon {
    font-size: 6rem;
    animation: trashOpenLid 0.3s infinite alternate;
}

@keyframes trashOpenLid {
    0% { transform: scale(1); }
    100% { transform: scale(1.2) translateY(-10px); }
}

.trash-label {
    font-family: 'Impact', sans-serif;
    font-size: 1.5rem;
    color: #ffff00;
    text-shadow: 0 0 15px #ff0000, 2px 2px 0 #000;
    white-space: nowrap;
    background: #000;
    padding: 5px 15px;
    border: 3px solid #ff0000;
    border-radius: 8px;
    box-shadow: 0 0 25px #ff0000;
}

/* CARTE QUI FAIT DES FLIPS ET TOMBE DANS LA POUBELLE */
.card-falling-trash {
    position: fixed !important;
    z-index: 999998 !important;
    pointer-events: none !important;
    box-shadow: 0 0 80px #ff0000, 0 0 140px #ffff00 !important;
    animation: flipAndDropIntoTrash 1.2s cubic-bezier(0.5, 0, 0.75, 0) forwards !important;
}

@keyframes flipAndDropIntoTrash {
    0% {
        top: var(--start-top);
        left: var(--start-left);
        width: var(--start-width);
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    25% {
        top: calc(var(--start-top) - 100px);
        transform: scale(1.35) rotate(720deg);
        filter: hue-rotate(180deg) saturate(300%);
    }
    50% {
        top: calc(var(--start-top) - 30px);
        left: calc(var(--start-left) * 0.5 + 25vw);
        transform: scale(0.9) rotate(1440deg);
    }
    80% {
        top: calc(100vh - 200px);
        left: 50%;
        transform: translateX(-50%) scale(0.4) rotate(2160deg);
        opacity: 0.9;
    }
    100% {
        top: calc(100vh - 80px);
        left: 50%;
        transform: translateX(-50%) scale(0.01) rotate(2880deg);
        opacity: 0;
    }
}

/* TEXTE FLOTTANT QUI S'ENVOLE AU CLIC (EX: +420 XP, GET REKT) */
.damage-number {
    position: fixed;
    pointer-events: none;
    font-family: 'Impact', sans-serif;
    font-size: 2rem;
    color: #ffff00;
    text-shadow: 0 0 10px #ff0000, 2px 2px 0 #000;
    z-index: 999999;
    animation: floatDamage 0.8s forwards ease-out;
}

@keyframes floatDamage {
    0% { transform: translate(-50%, -50%) scale(0.8) rotate(0deg); opacity: 1; }
    50% { transform: translate(-50%, -100px) scale(1.5) rotate(15deg); opacity: 1; }
    100% { transform: translate(-50%, -150px) scale(2) rotate(-15deg); opacity: 0; }
}

/* ================= GROSSES LETTRES CLAVIER QUI RÉTRÉCISSENT ================= */
.mlg-key-pop {
    position: fixed;
    pointer-events: none;
    z-index: 99999999;
    font-family: 'Rubik Glitch', 'Impact', sans-serif;
    font-size: 11rem;
    font-weight: 900;
    color: #ffffff;
    text-shadow: 
        0 0 20px #ff0000, 
        0 0 45px #ffff00, 
        0 0 70px #00ff00, 
        0 0 95px #00ffff;
    user-select: none;
    text-transform: uppercase;
    animation: giantLetterShrink 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes giantLetterShrink {
    0% {
        transform: translate(-50%, -50%) scale(3) rotate(var(--rot, 0deg));
        opacity: 1;
        filter: hue-rotate(0deg);
    }
    40% {
        transform: translate(-50%, -50%) scale(1.6) rotate(calc(var(--rot, 0deg) * -1));
        opacity: 0.95;
        filter: hue-rotate(180deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(0.02) rotate(360deg);
        opacity: 0;
        filter: hue-rotate(360deg);
    }
}