/*

Theme Name: Pro – Child Theme
Theme URI: https://theme.co/pro/
Author: Themeco
Author URI: https://theme.co/
Description: Make all of your modifications to Pro in this child theme.
Version: 1.0.0
Template: pro

*/

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Micro+5&display=swap');

/* Pixel Perfect Rendering */
* {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.coin-counter {
    position: fixed;
    bottom: 45px;
    right: 150px;
    background: #fff;
    color: #151519;
    padding: 8px 16px;
    border: 3px solid #151519;
	border-radius: 0.5em;
    box-shadow: 4px 4px 0px #151519;
    font-family: 'Micro 5', monospace;
    font-size: 2em;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: none;
}

.coin-counter:hover {
    background: #001100;
    color: #44ff44;
    box-shadow: 
        inset -2px -2px 0px #002200,
        inset 2px 2px 0px #66ff66,
        4px 4px 0px #000;
}

.coin-icon {
    width: 16px;
    height: 16px;
    background: #ffff00;
    border: 2px solid #000;
    display: inline-block;
    position: relative;
}

.coin-icon::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
    background: #fff;
}

.coin-icon::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: #cc9900;
}

.coin-animation {
    position: fixed;
    color: #ffff00;
    font-family: 'Micro 5', monospace;
    font-size: 16px;
    font-weight: normal;
    pointer-events: none;
    z-index: 10000;
    text-shadow: 
        2px 0 0 #000,
        -2px 0 0 #000,
        0 2px 0 #000,
        0 -2px 0 #000,
        2px 2px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000;
    text-transform: uppercase;
}

@keyframes coinPop {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    25% {
        transform: translateY(-8px);
        opacity: 1;
    }
    50% {
        transform: translateY(-16px);
        opacity: 1;
    }
    75% {
        transform: translateY(-24px);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-32px);
        opacity: 0;
    }
}

.coin-animation.active {
    animation: coinPop 1.2s steps(8) forwards;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .coin-counter {
        bottom: 65px;
        right: 200px;
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .coin-icon {
        width: 14px;
        height: 14px;
    }
}