/* Icons remain pixel-perfect relative to container, so calc(--px) is fine or convert to cqw */
/* 80px = 4.16cqw */
.icon-btn {
    width: 4.16cqw;
    height: 4.16cqw;
    background: #fff;
    border: calc(3 * var(--px)) solid #000;
    border-radius: calc(16 * var(--px));
    font-size: 2.08cqw;
    /* ~40px */
    cursor: pointer;
    transition: transform 0.1s, background-color 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 calc(5 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, 0.15);
}

@media (hover: hover) {
    .icon-btn:hover {
        transform: scale(1.05);
        background-color: #f8f9fa;
    }
}

.icon-btn:active {
    transform: scale(0.95);
}

.header-stats {
    position: absolute;
    top: 2.6cqw;
    /* 50px */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-shadow: calc(2 * var(--px)) calc(2 * var(--px)) calc(4 * var(--px)) rgba(0, 0, 0, 0.5);
    color: var(--text-light);
    animation: float 3s ease-in-out infinite;
    width: 60%;
    /* Limit width to avoid sidebar overlap if needed */
    pointer-events: none;
}

.score-container {
    font-family: var(--font-heading);
    font-size: 5cqw;
    /* 96px */
    line-height: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    justify-content: center;
}

.currency-icon-lg {
    width: 6.25cqw;
    /* 120px */
    height: 6.25cqw;
    object-fit: contain;
    filter: drop-shadow(0px calc(4 * var(--px)) calc(8 * var(--px)) rgba(0, 0, 0, 0.4));
    margin-bottom: calc(-0.5cqw);
}

.currency-icon-sm {
    width: 2cqw;
    /* 28px */
    height: 2cqw;
    object-fit: contain;
    vertical-align: sub;
    margin-right: 0.3cqw;
    filter: drop-shadow(calc(1 * var(--px)) calc(1 * var(--px)) calc(2 * var(--px)) rgba(0, 0, 0, 0.2));
}

.cps-container {
    font-size: 1.25cqw;
    /* 24px */
    margin-top: 0.8cqw;
    /* 15px */
    opacity: 0.8;
    font-weight: 600;
}

.clicker-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-height: 33.85cqw;
    /* 650px */
    z-index: 5;
    margin-top: 10.16cqw;
}

.clicker-btn {
    width: 31.25cqw;
    /* 600px */
    max-width: 36.45cqw;
    /* 700px */
    height: 31.25cqw;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 calc(15 * var(--px)) calc(30 * var(--px)) rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 2;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
}

/* Only use .pressed class for interaction state */
.clicker-btn.pressed {
    transform: scale(0.92) translateZ(0);
    transition: none;
    /* Instant press down */
}

.clicker-btn img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Removed transition for instant state swap */
    /* transition: opacity 0.05s linear; */
    pointer-events: none;
    /* Let clicks pass to container */
}

/* Visibility Control */
.char-img.hidden {
    opacity: 0;
    visibility: hidden;
}

.char-img {
    opacity: 1;
    visibility: visible;
}

.click-power-container {
    background: transparent;
    padding: calc(20 * var(--px));
    text-align: center;
    font-family: var(--font-heading);
    color: var(--text-light);
    width: 100%;
    z-index: 20;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: calc(2 * var(--px)) solid rgba(255, 255, 255, 0.1);
    margin-bottom: calc(10 * var(--px));
}

.cp-label {
    font-size: calc(24 * var(--px));
    /* 1.5rem */
    color: #fff;
    text-align: center;
    text-shadow: calc(2 * var(--px)) calc(2 * var(--px)) 0 #000;
    margin-bottom: calc(5 * var(--px));
}

.cp-value {
    font-size: calc(48 * var(--px));
    /* 3rem */
    color: #fff;
    text-shadow: calc(4 * var(--px)) calc(4 * var(--px)) 0 #000;
    line-height: 1;
}

/* Move upgrades list down to accommodate Click Power */
.upgrades-list {
    flex: 1;
    overflow-y: auto;
    padding: calc(20 * var(--px));
    scrollbar-width: auto;
    scrollbar-width: auto;
    contain: content;
    /* Better containment for scroll lists */
    /* Removed will-change: transform to prevent stacking context issues during scroll */
    touch-action: pan-y;
}

.upgrades-list::-webkit-scrollbar {
    width: calc(16 * var(--px));
}

.upgrades-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: calc(8 * var(--px));
    margin: calc(5 * var(--px));
}

.upgrades-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-color), #ffbb00);
    border-radius: calc(8 * var(--px));
    border: calc(4 * var(--px)) solid rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 0 calc(6 * var(--px)) rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
    .upgrades-list::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #ffbb00, var(--accent-color));
    }
}

/* Upgrade Item */
.upgrade-item {
    background: white;
    border: calc(3 * var(--px)) solid #333;
    border-radius: calc(16 * var(--px));
    padding: calc(20 * var(--px));
    margin-bottom: calc(20 * var(--px));
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    min-height: calc(120 * var(--px));
    content-visibility: auto;
    /* GPU friendly rendering for long lists */
    contain-intrinsic-size: calc(120 * var(--px));
    /* Prevents scrollbar jumping */
}

@media (hover: hover) {
    .upgrade-item:hover {
        transform: translateY(calc(-4 * var(--px)));
        box-shadow: 0 calc(8 * var(--px)) calc(20 * var(--px)) rgba(0, 0, 0, 0.1);
        border-color: var(--accent-color);
    }
}

.upgrade-item.disabled {
    opacity: 0.6;
    filter: grayscale(1);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.upgrade-icon {
    width: calc(60 * var(--px));
    height: calc(60 * var(--px));
    background: #fff3cd;
    border-radius: calc(12 * var(--px));
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: calc(20 * var(--px));
    font-size: calc(32 * var(--px));
    /* 2rem */
}

.upgrade-info {
    flex: 1;
}

.upgrade-name {
    font-weight: 800;
    font-size: calc(25.6 * var(--px));
    /* 1.6rem */
    margin-bottom: calc(5 * var(--px));
    color: #212529;
    text-transform: uppercase;
    font-family: var(--font-heading);
    letter-spacing: calc(0.5 * var(--px));
}

.upgrade-effect {
    font-size: calc(17.6 * var(--px));
    /* 1.1rem */
    color: #495057;
    margin-bottom: calc(10 * var(--px));
}

.upgrade-cost {
    font-weight: 800;
    color: var(--accent-color);
    font-size: calc(20.8 * var(--px));
    /* 1.3rem */
    display: flex;
    align-items: center;
    gap: calc(8 * var(--px));
}

.upgrade-icon-left {
    width: calc(100 * var(--px));
    height: calc(100 * var(--px));
    object-fit: contain;
    margin-right: calc(25 * var(--px));
    filter: drop-shadow(0 calc(4 * var(--px)) calc(6 * var(--px)) rgba(0, 0, 0, 0.1));
}

/* Ascension Section */
.ascension-container {
    background: transparent;
    padding: calc(15 * var(--px));
    width: 100%;
    z-index: 20;
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-top: calc(2 * var(--px)) solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
    /* Push to bottom if needed, though flex structure handles it */
    min-height: calc(150 * var(--px));
    /* ~1.5x upgrade item height (120px) */
    gap: calc(10 * var(--px));
}

.ascension-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: calc(5 * var(--px));
}

.ascension-label {
    font-size: calc(24 * var(--px));
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: calc(2 * var(--px)) calc(2 * var(--px)) 0 #000;
    margin-bottom: calc(5 * var(--px));
    text-align: center;
    font-family: var(--font-heading);
}

.ascension-value {
    font-size: calc(40 * var(--px));
    color: #fff;
    font-family: var(--font-heading);
    text-shadow: calc(4 * var(--px)) calc(4 * var(--px)) 0 #000;
    line-height: 1;
}

.ascend-btn {
    background: #fff;
    border: calc(3 * var(--px)) solid #333;
    border-radius: calc(16 * var(--px));
    /* Match upgrade item radius */
    padding: calc(10 * var(--px)) calc(15 * var(--px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s;
    box-shadow: 0 calc(8 * var(--px)) calc(20 * var(--px)) rgba(0, 0, 0, 0.1);
    /* Soft shadow like upgrade-item */
    min-width: calc(180 * var(--px));
    margin-bottom: calc(6 * var(--px));
    /* Account for shadow push */
}

@media (hover: hover) {
    .ascend-btn:hover {
        transform: translateY(calc(-4 * var(--px)));
        box-shadow: 0 calc(8 * var(--px)) calc(20 * var(--px)) rgba(0, 0, 0, 0.1);
        border-color: var(--accent-color);
        background-color: #fff;
    }
}

.ascend-btn:active {
    transform: scale(0.95);
    box-shadow: none;
}

.ascend-title {
    font-size: calc(25.6 * var(--px));
    font-family: var(--font-heading);
    color: #212529;
    text-transform: uppercase;
    margin-bottom: calc(2 * var(--px));
    font-weight: 800;
    letter-spacing: calc(0.5 * var(--px));
}

.ascend-gain {
    font-size: calc(20.8 * var(--px));
    font-weight: 800;
    color: var(--accent-color);
    font-family: var(--font-body);
}