body {
    margin: 0;
    font-family: "Press Start 2P", 'Segoe UI',  Tahoma, Geneva, Verdana, sans-serif;
    background: #ffffff;
    color: #eb51ae;
    overflow: hidden;
      font-size: 12px;
}

.game-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    height: 100vh;
}

.column {
    padding: 20px;
    border: 2px solid #b00262;
    text-align: center;
    background: rgb(255, 173, 226);
}

/* The Clicker & Animation */
/* Ensure the wrapper is the reference point */
.clicker-wrapper {
    position: relative;
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px; /* Gives space for decor */
}

/* Scrollbar styles */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}


::-webkit-scrollbar-track {
border: 2px ridge #FF71B3;
background: #ffffff;
background-size: cover;
border-radius: 10px;
margin-bottom: 0px;
}


::-webkit-scrollbar-thumb {
background: #FF8AD0;
border: 2px ridge #FF71B3;
border-radius: 10px;
background-repeat: repeat-y;
}


::-webkit-scrollbar-thumb:hover {
background: #FFEBEB; 
background-repeat: repeat-y;
}



#main-clicker {
    width: 250px;
    cursor: pointer;
    transition: transform 0.05s;
    user-select: none;
    z-index: 10;
}

/* The Recoil Effect */
#main-clicker:active {
    transform: scale(0.90);
}

#decorations-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

/* Decorative Upgrade Images */
.decor-img {
    position: absolute;
 /* Use a variable for width, default to 400px if not set */
    width: var(--size, 350px);
    max-width: none;
    pointer-events: none;
    transform-origin: center;
    /* We use CSS variables here with fallbacks */
    animation: 
        var(--direction, rotate) 
        var(--speed, 20s) 
        linear infinite;
}

/* New class for static (non-moving) decorations */
.decor-static {
    position: absolute;
    width: var(--size, 200px);
    pointer-events: none;
    z-index: 15; /* Sits slightly above or below depending on your need */
    
    /* Center it horizontally by default */
    left: 50%;
    transform: translateX(-50%);
    
    /* Position from the top of the wrapper */
    top: var(--top-offset, 100px); 
}

/* Normal Rotation */
@keyframes rotate { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}

/* Reverse Rotation */
@keyframes rotate-reverse { 
    from { transform: rotate(360deg); } 
    to { transform: rotate(0deg); } 
}


.upgrade-item {
    background: url(https://64.media.tumblr.com/2459142d598fb11d7ece46534de5c54c/f4ca4202b4f77912-af/s100x200/494d1aea762962a7fa90dfd376cee22e3833e0af.gif);
    border: 3px outset #FF8AD0;
    color: #eb51ae;
    margin: 10px 0;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.upgrade-item:hover { background: #444; }
.upgrade-item.disabled { opacity: 0.5; cursor: not-allowed; }