/* 
This file adds extra styling to make the game look more fun and retro!

A CSS file lets you change how your HTML looks.
Classes are 'labels' you place on elements in HTML, and you can style all elements with the same class.

We also style the buttons and pixel counter.
*/

body {
    background: #161518;
    font-family: 'Press Start 2P', cursive;
    color: #fff;
}

.game-title {
    font-size: 2.2rem;
    color: #ffe066;
    text-shadow: 2px 2px 0px #a67c00;
}

.pixel-counter {
    font-size: 1.7rem;
    background: #23213b;
    padding: 16px 0;
    margin-bottom: 20px;
    border-radius: 18px;
    box-shadow: 2px 2px 8px #343058;
    font-family: 'Press Start 2P', cursive;
}

.pixel-icon {
    color: #8fd694;
    margin: 0 8px;
}

.btn-pixel {
    background: linear-gradient(145deg, #ffe066 60%, #ffd358 100%);
    color: #161518;
    font-size: 1.2rem;
    font-family: inherit;
    padding: 22px 45px;
    border-radius: 20px;
    border: none;
    outline: none;
    box-shadow: 0 4px #a67c00;
    transition: all 0.08s;
}
.btn-pixel:active {
    box-shadow: none;
    transform: translateY(4px);
}

.shop-title {
    color: #90e0ef;
    text-shadow: 1px 1px #297373;
    font-size: 1.4rem;
}

.factory-list {
    background: #23213b;
    border-radius: 18px;
    padding: 24px 10px 8px 10px;
    box-shadow: 2px 2px 8px #14143d70;
}

.factory-card {
    border: 3px solid #ffe066;
    border-radius: 15px;
    margin: 12px auto;
    padding: 14px 18px 9px 18px;
    background: #1e1f2d;
    color: #fff;
    box-shadow: 1px 1px 8px #17162a;
    text-align: left;
    min-height: 105px;
    max-width: 450px;
    transition: background 0.2s;
}

.factory-card:hover {
    background: #1a2e38;
}

.factory-icon {
    font-size: 2rem;
    margin-right: 13px;
    color: #ffe066;
}

.factory-title {
    font-size: 1.07rem;
    color: #ffd358;
}

.btn-buy {
    font-size: 0.95rem;
    font-family: inherit;
    background: #90e0ef;
    color: #161518;
    border-radius: 8px;
    border: none;
    margin-top: 12px;
    margin-bottom: 4px;
    padding: 7px 18px;
    transition: background 0.1s;
    font-weight: bold;
}

.btn-buy:disabled, .btn-buy.disabled {
    background: #999;
    color: #ccc;
}

#pps {
    font-size: 1rem;
    color: #c0e8e0;
    background: #23213b;
    padding: 10px 16px;
    margin-top: 5px;
    border-radius: 13px;
    display: inline-block;
    font-family: inherit;
}

@media (max-width: 600px) {
    .factory-card {
        padding: 10px 6px 7px 6px;
        min-height: 95px;
        font-size: 0.88rem;
    }
    .game-title {
        font-size: 1.1rem;
    }
}