/* --- CSS-stilar --- */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

/* Uppdaterad body med padding-top */
body {
    padding-top: 100px; /* Ge plats för sticky header */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #f0f0f0;
    color: #333;
    margin: 0;
    padding-bottom: 120px; 
    -webkit-tap-highlight-color: transparent; 
}

h1, h2 {
    color: #2c3e50;
    border-bottom: 2px solid #bdc3c7;
    padding-bottom: 5px;
    width: 100%;
    text-align: center;
}

#game-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    gap: 20px;
}

/* Statistik-panelen (UPPDATERAD MED STICKY) */
#stats-container {
    background: #fff;
    border-radius: 0 0 8px 8px; /* Runda bara nedre hörn */
    padding: 15px; /* Lite mindre padding */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
    /* Nya regler för att göra den "sticky" */
    position: sticky;
    top: 0; /* Fäst vid toppen */
    z-index: 1001; /* Se till att den är över spelet, men under menyn */
    margin-bottom: 20px; /* Behåll marginal nedåt */
}

#stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    align-items: center;
}

#stats-grid div {
    font-size: 1.4em;
    font-weight: bold;
}

#money-display {
    color: #27ae60;
    font-size: 1.8em;
}

#income-display, #rebirth-display {
    color: #2980b9;
}

#rebirth-display {
    color: #8e44ad;
}

#rebirth-button {
    grid-column: 1 / -1; 
    padding: 12px 20px;
    font-size: 1.1em;
    font-weight: bold;
    color: white;
    background-color: #8e44ad; 
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

#rebirth-button:hover:not(:disabled) {
    background-color: #732d91;
    transform: scale(1.02);
}

#rebirth-button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
}

#reset-button {
    grid-column: 1 / -1; 
    background: none;
    border: none;
    color: #c0392b;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 10px;
}

#base-column {
    flex: 2;
    min-width: 300px;
}

#shop-column {
    flex: 1;
    min-width: 280px;
}

#shop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#shop-timer {
    font-size: 0.9em;
    color: #555;
    font-weight: bold;
}

#base-container {
    width: 100%;
    height: 400px;
    background-color: #ffffff;
    border: 3px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box; 
    overflow-y: auto; 
    position: relative; 
    display: flex;
    flex-wrap: wrap; 
    align-content: flex-start; 
    gap: 5px;
    justify-content: center; 
}

#base-icon-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15rem; 
    z-index: 0; 
    opacity: 0.15; 
    pointer-events: none; 
    user-select: none; 
}

.brainrot-item {
    font-size: 3rem; 
    user-select: none;
    animation: fadeIn 0.3s ease;
    position: relative; 
    z-index: 1; 
}

.brainrot-item.gold {
    text-shadow: 0 0 5px #f1c40f, 0 0 10px #f1c40f;
}

.brainrot-item.diamond {
    text-shadow: 0 0 5px #50E3C2, 0 0 10px #50E3C2;
}

.brainrot-item.rainbow {
    animation: fadeIn 0.3s ease, rainbow-flow 2s linear infinite;
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% 100%;
}


@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

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

#shop-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shop-item {
    padding: 15px;
    background: #fff;
    border-width: 3px;
    border-style: solid;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.shop-item:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.shop-item:disabled {
    background-color: #ecf0f1;
    color: #95a5a6;
    cursor: not-allowed;
    border-color: #bdc3c7;
}

.shop-item strong {
    font-size: 1.3em;
    margin-bottom: 5px;
}

.shop-item span {
    font-size: 0.9em;
    color: #555;
}

.shop-item:disabled span {
    color: #95a5a6;
}

.rarity-vanlig { border-color: #95a5a6; }
.rarity-ovanlig { border-color: #2ecc71; }
.rarity-sällsynt { border-color: #3498db; }
.rarity-episk { border-color: #9b59b6; }
.rarity-legendarisk { border-color: #f1c40f; }

.rarity-gold { 
    border-color: #f1c40f;
    box-shadow: 0 0 10px #f1c40f;
}
.rarity-diamond { 
    border-color: #50E3C2;
    box-shadow: 0 0 10px #50E3C2;
}
.rarity-rainbow {
    border-image: linear-gradient(to right, #f1c40f, #e74c3c, #9b59b6, #3498db, #2ecc71) 1;
    border-image-slice: 1;
}
.rarity-rainbow strong { color: #9b59b6; }


#click-button {
    padding: 15px 30px;
    font-size: 1.2em;
    color: white;
    background-color: #e74c3c;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.2s;
    width: 100%; 
    box-sizing: border-box;
}

#click-button:active { transform: scale(0.98); }
#click-button:hover { background-color: #c0392b; }

#install-prompt {
    display: none; 
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    padding: 15px;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-top: 1px solid #ddd;
}

#install-prompt.show {
    display: flex; 
}

#install-message {
    font-size: 1em;
    margin-bottom: 10px;
    max-width: 90%;
}

#install-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

#install-button {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#close-install-prompt {
    padding: 10px 20px;
    font-size: 1em;
    color: #555;
    background-color: #eee;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Uppdaterad media query för body padding */
@media (max-width: 600px) {
    body { 
        padding-top: 120px; /* Ge lite mer utrymme på mobil */
        padding-left: 10px; 
        padding-right: 10px; 
        padding-bottom: 140px; 
    }
    
    #stats-grid {
        grid-template-columns: 1fr; 
        text-align: left;
        padding-left: 10px;
        gap: 8px;
    }

    #stats-grid div { font-size: 1.2em; }
    #money-display { font-size: 1.6em; }
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.3em; }
    .brainrot-item { font-size: 2.5rem; }
    #base-container { height: 300px; }
    #base-icon-display { font-size: 10rem; }
    .shop-item { padding: 12px; }
}

#open-menu-button {
    grid-column: 1 / -1; 
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: white;
    background-color: #3498db;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
#open-menu-button:hover {
    background-color: #2980b9;
}

.modal-overlay {
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    min-height: 400px;
    max-height: 80vh; /* Begränsa höjd så den inte blir för stor */
    overflow-y: auto; /* Scrollbar om innehållet är för långt */
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: fadeInModal 0.3s ease;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    background: none;
    border: none;
    cursor: pointer;
}
.close-button:hover,
.close-button:focus {
    color: black;
}

.menu-tabs {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.menu-tab-button {
    padding: 10px 15px;
    cursor: pointer;
    background: #eee;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    font-size: 0.9em;
    font-weight: bold;
}

.menu-tab-button.active {
    background: #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px; 
    color: #2c3e50;
}

.menu-tab-content {
    animation: fadeInModal 0.2s ease-in-out;
}

#rebirth-upgrades-container,
#achievements-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    max-height: 400px; /* Maxhöjd för scroll */
    overflow-y: auto;
    padding-right: 10px; /* För scrollbar */
}

.upgrade-button {
    padding: 10px;
    background: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 5px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.upgrade-button:hover:not(:disabled) {
    background-color: #e6f7ff;
    border-color: #3498db;
}

.upgrade-button:disabled {
    background-color: #f0f0f0;
    color: #999;
    cursor: not-allowed;
}

.upgrade-button strong {
    font-size: 1.1em;
    color: #2c3e50;
}

.upgrade-button span {
    font-size: 0.9em;
    color: #555;
}

#stats-list-current, #stats-list-total {
    list-style: none;
    padding-left: 0;
}
#stats-list-current li, #stats-list-total li {
    padding: 5px;
    font-size: 1.1em;
    border-bottom: 1px dashed #eee;
}
#stats-list-current li strong, #stats-list-total li strong {
    color: #3498db;
}

.achievement-box {
    padding: 10px;
    background: #f0f0f0;
    border: 2px solid #ddd;
    border-radius: 5px;
    opacity: 0.6;
}

.achievement-box.unlocked {
    background: #e6fff2;
    border-color: #2ecc71;
    opacity: 1;
}

.achievement-box strong {
    color: #2c3e50;
    font-size: 1.1em;
}

.achievement-box p {
    font-size: 0.9em;
    margin: 5px 0;
}

#reroll-shop-button {
    padding: 4px 8px;
    font-size: 0.8em;
    font-weight: bold;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}
#reroll-shop-button:hover:not(:disabled) {
    background-color: #0056b3;
}
#reroll-shop-button:disabled {
    background-color: #aaa;
    cursor: not-allowed;
}

#base-column {
    position: relative;
    overflow: hidden; 
}

.popping-number {
    position: absolute;
    font-size: 1.5em;
    font-weight: bold;
    user-select: none;
    pointer-events: none;
    animation: pop-and-fade 1s ease-out forwards;
}

@keyframes pop-and-fade {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}

.popping-number-click {
    color: #e74c3c;
    bottom: 70px; 
    left: 50%;
    transform: translateX(-50%);
}

.popping-number-income {
    color: #27ae60;
    top: 50%;
    left: 50%;
}

#sell-mode-button {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: white;
    background-color: #e74c3c;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
    margin-top: 10px;
}
#sell-mode-button.active {
    background-color: #c0392b;
    box-shadow: 0 0 10px #e74c3c;
}

.sell-mode-on .brainrot-item {
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, filter 0.2s;
}

.sell-mode-on .brainrot-item::after {
    content: '💲'; 
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 0.5em;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.sell-mode-on .brainrot-item:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

#bonus-clicker-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000; 
    pointer-events: none; 
    overflow: hidden;
}

.bonus-clicker {
    position: absolute;
    font-size: 3.5rem;
    cursor: pointer;
    pointer-events: auto; 
    z-index: 5001;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    animation: fly-across 5s linear forwards;
}

@keyframes fly-across {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(calc(100vw + 100%));
    }
}

.customize-options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
    max-height: 150px; 
    overflow-y: auto;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #f9f9f9;
}

.customize-option {
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.customize-option.selected {
    border-color: #2ecc71; 
    box-shadow: 0 0 5px #2ecc71;
}

.customize-option strong {
    font-size: 1.1em;
    margin-bottom: 5px;
}

.customize-option span {
    font-size: 0.9em;
    color: #888;
    margin-bottom: 10px;
}

.customize-option button {
    padding: 5px 10px;
    font-size: 0.9em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.customize-option .buy-button {
    background-color: #e67e22; 
    color: white;
}
.customize-option .buy-button:hover {
    background-color: #d35400;
}
.customize-option .buy-button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
}

.customize-option .select-button {
    background-color: #3498db; 
    color: white;
}
.customize-option .select-button:hover {
    background-color: #2980b9;
}
.customize-option .select-button:disabled { 
    background-color: #2ecc71; 
    cursor: default;
}

body.bg-dark {
    background-color: #2c3e50;
    color: #ecf0f1;
}
body.bg-dark h1, body.bg-dark h2 {
    color: #ecf0f1;
    border-bottom-color: #7f8c8d;
}
body.bg-dark .modal-content,
body.bg-dark #stats-container, 
body.bg-dark .shop-item,
body.bg-dark #base-container {
    background-color: #34495e;
    color: #ecf0f1;
    border-color: #7f8c8d;
}
body.bg-dark .shop-item span { color: #bdc3c7; }
body.bg-dark .upgrade-button, 
body.bg-dark .customize-option { background-color: #46627f; border-color: #7f8c8d;}
body.bg-dark .upgrade-button:hover:not(:disabled) { background-color: #5c7e9f; }
body.bg-dark .menu-tab-button { background: #46627f; border-color: #7f8c8d; color: #ecf0f1;}
body.bg-dark .menu-tab-button.active { background: #34495e; border-bottom-color: #34495e; }


body.bg-gradient-sunset {
    background: linear-gradient(to bottom, #ff7e5f, #feb47b);
}

body.bg-gradient-ocean {
    background: linear-gradient(to bottom, #2c3e50, #4ca1af);
    color: #fff; 
}
body.bg-gradient-ocean h1, body.bg-gradient-ocean h2 { color: #fff; border-bottom-color: #eee;}

body.bg-animated-rainbow {
    background: linear-gradient(120deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    background-size: 400% 400%;
    animation: rainbowAnimation 15s ease infinite;
    color: #fff; 
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); 
}

body.bg-animated-rainbow h1, 
body.bg-animated-rainbow h2,
body.bg-animated-rainbow #money-display,
body.bg-animated-rainbow #income-display,
body.bg-animated-rainbow #rebirth-display,
body.bg-animated-rainbow #rebirth-points-display {
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    border-color: rgba(255,255,255,0.5); 
}

body.bg-animated-rainbow .modal-content,
body.bg-animated-rainbow #stats-container, 
body.bg-animated-rainbow .shop-item,
body.bg-animated-rainbow #base-container {
    background-color: rgba(0, 0, 0, 0.4); 
    color: #fff;
    border-color: rgba(255,255,255,0.5);
    text-shadow: none; 
}
body.bg-animated-rainbow .shop-item span { color: #eee; } 

body.bg-animated-rainbow .upgrade-button, 
body.bg-animated-rainbow .customize-option { 
    background-color: rgba(0, 0, 0, 0.3); 
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}
body.bg-animated-rainbow .upgrade-button:hover:not(:disabled) { 
    background-color: rgba(0, 0, 0, 0.5); 
}
body.bg-animated-rainbow .menu-tab-button { 
    background: rgba(0, 0, 0, 0.3); 
    border-color: rgba(255,255,255,0.5); 
    color: #fff;
}
body.bg-animated-rainbow .menu-tab-button.active { 
    background: rgba(0, 0, 0, 0.4); 
    border-bottom-color: rgba(0, 0, 0, 0.4); 
}
body.bg-animated-rainbow .customize-option strong { color: #fff; }
body.bg-animated-rainbow .customize-option span { color: #ccc; }

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