/* ========== CUSTOM LED FONT ========== */
@font-face {
    font-family: 'DigitalLED';
    src: url('assets/fonts/MyLEDFont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* ========== DYSON SPHERE IDLE - ORANGE/GOLD THEME with LED SIGN ========== */
.dyson-system { position: relative; width: 100%; height: 100%; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.star-halo { z-index: 0; mix-blend-mode: screen; }
.star-base { z-index: 1; }
.star-core { z-index: 2; cursor: pointer; }
.rings-canvas { z-index: 4; pointer-events: none; }

.star-halo { animation: haloPulse 8s ease-in-out infinite; }
.star-base { animation: rotateCW 120s linear infinite; }
.star-core { animation: corePulse 10s ease-in-out infinite, coreRotate 240s linear infinite; }

@keyframes rotateCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotateCCW { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes haloPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes corePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1); } }
@keyframes coreRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }

body {
    background: radial-gradient(ellipse at 30% 40%, #0a0a14, #010105);
    font-family: 'Segoe UI', 'Orbitron', monospace;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    color: #d4d4dc;
    position: relative;
    overflow: hidden;
}

/* ===== STAR LAYER (z-index 10 – middle) ===== */
#star-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}
#star-layer .star-area {
    pointer-events: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 400px;
}

/* ===== UI GRID (z-index 20 – on top) ===== */
.game-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(500px, 1.8fr) minmax(200px, 1fr);
    gap: clamp(8px, 2vw, 20px);
    max-width: 100%;
    margin: 0 auto;
}

.col {
    pointer-events: auto;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 24px;
    padding: clamp(0.5rem, 1.5vw, 1.5rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none;
    height: 100%;
}

.middle-col { background: transparent; border: none; box-shadow: none; }
.middle-col.timed-positive, .middle-col.timed-negative { animation: none; }

.col-content {
    overflow-y: auto;
    padding-right: 6px;
    flex: 1;
    position: relative;
    pointer-events: auto;
}
.middle-col .col-content {
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    height: 100%;
}

.right-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.right-col .col-content {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 0.5rem;
}
#clickUpgradeSection {
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,170,68,0.3);
}

.left-col .col-content {
    overflow-y: auto;
}

/* ===== SCROLLBAR – RIGHT SIDE IN RTL ===== */
.left-col .col-content {
    direction: ltr;
    padding-right: 6px;
}
.left-col .building-card {
    margin-right: 12px;
}
.left-col .col-content .building-card,
.left-col .col-content .building-card * {
    direction: rtl;
}

.col-content::-webkit-scrollbar { width: 5px; }
.col-content::-webkit-scrollbar-track { background: rgba(255, 170, 68, 0.2); border-radius: 4px; }
.col-content::-webkit-scrollbar-thumb { background: #ffaa44; border-radius: 4px; }

.digits-area { width: 100%; text-align: center; margin-bottom: 0.8rem; }
.top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
.left-icons { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; }
.right-icons { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stats-group { flex: 1; text-align: center; }

.icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.05s, color 0.1s;
    line-height: 1;
}
.icon-btn img {
    width: 32px;
    height: 32px;
    display: block;
}
.icon-btn:active { transform: scale(0.9); }

.event-timer-canvas {
    width: 44px;
    height: 44px;
    cursor: pointer;
    display: block;
}
.event-timer-canvas:active { transform: scale(0.95); }

.event-popup {
    position: absolute;
    right: 20px;
    top: 80px;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(4px);
    border: 1px solid #ffaa44;
    border-radius: 1rem;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: #ffdd99;
    z-index: 30;
    white-space: nowrap;
    pointer-events: none;
}

.ad-icon-new {
    cursor: pointer;
    background: transparent;
    transition: transform 0.05s, color 0.1s;
    animation: pulseAd 1s infinite;
    padding: 0;
    display: flex;
}
#adIconMobile {
    display: none;
}
.ad-icon-new img {
    width: 32px;
    height: 32px;
    display: block;
}
.ad-icon-new:active { transform: scale(0.9); }
@keyframes pulseAd { 0% { transform: scale(0.95); } 70% { transform: scale(1); } 100% { transform: scale(0.95); } }

.energy { font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: bold; color: #ffcc44; text-shadow: 0 0 8px rgba(255, 200, 0, 0.8); }
.cps { font-size: clamp(0.8rem, 1.5vw, 1.2rem); color: #66f0ff; margin-top: 4px; text-shadow: 0 0 4px rgba(102,240,255,0.4); }
.multiplier { font-size: clamp(0.7rem, 1.2vw, 1rem); color: #88aaff; margin-top: 4px; }

.suffix {
    font-size: 0.5em;
    opacity: 0.7;
}
.button-suffix {
    font-size: 0.65em;
    opacity: 0.7;
}

/* ===== DESKTOP LED (in middle column, pushed to bottom) ===== */
.led-sign {
    pointer-events: auto;
    width: 100%;
    max-width: 400px;
    background: #0a0a0a;
    border-radius: 12px;
    padding: 6px;
    border: 1px solid #ffaa44;
    box-shadow: 0 0 8px rgba(255, 170, 68, 0.2), inset 0 0 2px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    position: relative;
}
.led-sign canvas {
    width: 100%;
    height: auto;
    background: #010101;
    border-radius: 6px;
    cursor: default;
    display: block;
}
.led-sign::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 5%;
    width: 90%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    pointer-events: none;
    z-index: 5;
    border-radius: 6px;
}
.led-sign::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 6px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.04) 20%,
        rgba(255, 255, 255, 0.00) 40%,
        rgba(255, 255, 255, 0.06) 60%,
        rgba(255, 255, 255, 0.10) 80%,
        rgba(255, 255, 255, 0.02) 100%
    );
    box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 5;
}

/* Desktop LED: push to bottom of middle column */
#desktopLedSign {
    margin-top: auto !important;
}

/* Hide mobile-only elements on desktop */
.mobile-digits,
.mobile-menu,
.mobile-led {
    display: none !important;
}

/* ===== ESSENCE PROGRESS BAR ===== */
.essence-progress-container {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2px;
    margin: 6px 0;
    border: 1px solid rgba(255, 170, 68, 0.2);
    height: 28px;
    overflow: hidden;
    position: relative;
}
.essence-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ff8800, #ffcc44);
    border-radius: 10px;
    transition: width 0.4s ease;
    width: 0%;
    box-shadow: 0 0 10px rgba(255, 170, 68, 0.3);
}
.essence-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    color: #1a1a1a;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
    white-space: nowrap;
    direction: rtl;
    z-index: 1;
    pointer-events: none;
}

/* ===== AD PANEL – IDENTICAL TO EVENT POPUP ===== */
.ad-panel {
    position: fixed;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(8px);
    border: 1px solid #ffaa44;
    border-radius: 1rem;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: #ffdd99;
    z-index: 999;
    min-width: 140px;
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
}
.ad-panel button {
    margin-top: 8px;
    background: #ffaa44;
    border: none;
    padding: 4px 8px;
    border-radius: 20px;
    cursor: pointer;
    color: #1a1a1a;
    font-weight: bold;
}

/* ===== BULK CONTROLS ===== */
.bulk-controls {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border-bottom: none;
}
.bulk-btn {
    background: rgba(255, 170, 68, 0.08);
    border: 1px solid rgba(255, 170, 68, 0.25);
    color: #bbaa88;
    padding: 2px 8px;
    border-radius: 14px;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.1s ease;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.4;
}
.bulk-btn:hover {
    background: rgba(255, 170, 68, 0.2);
    color: #eee;
    border-color: #ffaa44;
}
.bulk-btn.active {
    background: #ffaa44;
    color: #1a1a1a;
    border-color: #ffaa44;
    box-shadow: 0 0 8px rgba(255, 170, 68, 0.3);
}
.bulk-btn:active {
    transform: scale(0.95);
}

/* ===== BUILDING CARDS ===== */
.building-card {
    background: transparent;
    backdrop-filter: none;
    border-radius: 16px;
    padding: clamp(4px, 0.6vw, 10px);
    margin-bottom: clamp(4px, 0.6vw, 8px);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: clamp(4px, 1vw, 12px);
    border-left: 3px solid #ffaa44;
    cursor: pointer;
    transition: background 0.1s ease;
}
.building-card:hover {
    background: rgba(255, 170, 68, 0.05);
}
.building-card:active {
    transform: scale(0.99);
}
.building-card.locked {
    opacity: 0.6;
    border-left-color: #886644;
    filter: grayscale(0.2);
    cursor: default;
}
.building-card.locked:hover {
    background: transparent;
}
.building-card.locked:active {
    transform: none;
}

.owned-badge {
    display: inline-block;
    min-width: auto;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    border: none;
    color: rgba(255, 170, 68, 0.15);
    font-size: 2.2rem;
    font-weight: bold;
    padding: 0 4px;
    flex-shrink: 0;
    line-height: 1;
    text-align: center;
}

.building-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding: 0 8px;
    min-width: 0;
    text-align: right;
}
.building-name {
    font-size: 1rem;
    color: #d4d4dc;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: right;
    width: 100%;
}
.building-cost {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex-shrink: 0;
    text-align: right;
    width: 100%;
}
.building-cost img {
    width: 14px;
    height: 14px;
}
.building-cost.affordable {
    color: #66ff88;
}
.building-cost:not(.affordable) {
    color: #ffaa44;
}

.building-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.building-icon-wrapper:hover {
    transform: scale(1.1);
}
.building-icon-wrapper:active {
    transform: scale(0.9);
}
.building-icon {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1;
    text-align: center;
}
.building-icon-wrapper .custom-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 5rem;
    max-height: 5rem;
    display: block;
    transition: filter 0.2s ease, transform 0.1s ease;
    filter: none !important;
}
.building-icon-wrapper .custom-icon:hover {
    transform: scale(1.05);
}

/* ===== UPGRADE CARDS ===== */
.upgrade-card {
    background: transparent;
    backdrop-filter: none;
    border-radius: 16px;
    padding: clamp(4px, 0.6vw, 10px);
    margin-bottom: clamp(4px, 0.6vw, 8px);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: clamp(4px, 1vw, 12px);
    border-left: 3px solid #ffaa44;
    cursor: pointer;
    transition: none;
}
.upgrade-card:hover,
.upgrade-card:active {
    background: transparent !important;
    transform: none !important;
}

.upgrade-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    flex-shrink: 0;
    cursor: pointer;
    transition: none;
}
.upgrade-icon-wrapper:hover,
.upgrade-icon-wrapper:active {
    transform: none !important;
}
.upgrade-icon {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1;
    text-align: center;
}
.upgrade-icon-wrapper .custom-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-width: 2.8rem;
    max-height: 2.8rem;
    display: block;
    transition: none;
    filter: none !important;
}
.upgrade-icon-wrapper .custom-icon:hover {
    transform: none !important;
}

.click-upgrade-icon {
    font-size: clamp(2rem, 3.2vw, 3rem);
    filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.3));
}
.click-upgrade-icon:hover {
    filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.3));
}

.upgrade-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding: 0 8px;
    min-width: 0;
    text-align: right;
}
.upgrade-name {
    font-size: 1rem;
    color: #d4d4dc;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: right;
    width: 100%;
}
.upgrade-cost {
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex-shrink: 0;
    text-align: right;
    width: 100%;
}
.upgrade-cost img {
    width: 14px;
    height: 14px;
}
.upgrade-cost.affordable {
    color: #66ff88;
}
.upgrade-cost:not(.affordable) {
    color: #ffaa44;
}

.upgrade-card button {
    min-width: clamp(80px, 15vw, 140px);
    width: auto;
    flex-shrink: 0;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(0.7rem, 1.2vw, 1.2rem);
    padding: clamp(4px, 0.6vw, 10px) clamp(6px, 1vw, 14px);
    background: #ffaa44;
    border: none;
    border-radius: 2rem;
    font-weight: bold;
    cursor: pointer;
    color: #1a1a1a;
    transition: 0.05s linear;
}
.upgrade-card button:active { transform: scale(0.96); }
.upgrade-card button:disabled {
    background: #6a5a3a !important;
    cursor: not-allowed !important;
    color: #aaa !important;
    opacity: 0.7 !important;
}

#clickUpgradeSection .upgrade-card {
    flex-wrap: nowrap;
    gap: 8px;
}
#clickUpgradeSection .upgrade-card button {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: clamp(0.7rem, 1.2vw, 1rem);
    padding: clamp(4px, 0.5vw, 8px) clamp(6px, 0.8vw, 12px);
    min-width: clamp(70px, 12vw, 120px);
}
#clickUpgradeSection .small-text {
    font-size: clamp(0.5rem, 0.8vw, 0.7rem);
}

.small-text { font-size: 0.7rem; color: #bbaa88; }
.discount-badge {
    background: gold;
    color: #1a1a2a;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 20px;
    margin-left: 8px;
    font-weight: bold;
    white-space: nowrap;
}

.star-core.timed-positive { animation: coreRotate 240s linear infinite, eventPositiveBrightness 1s infinite; }
.star-core.timed-negative { animation: coreRotate 240s linear infinite, eventNegativeBrightness 1s infinite; }
@keyframes eventPositiveBrightness {
    0% { filter: brightness(1) drop-shadow(0 0 5px #ffaa44); }
    50% { filter: brightness(1.5) drop-shadow(0 0 20px #ffaa44); }
    100% { filter: brightness(1) drop-shadow(0 0 5px #ffaa44); }
}
@keyframes eventNegativeBrightness {
    0% { filter: brightness(1) drop-shadow(0 0 5px #cc6644); }
    50% { filter: brightness(0.7) drop-shadow(0 0 15px #cc6644); }
    100% { filter: brightness(1) drop-shadow(0 0 5px #cc6644); }
}

/* ===== POPUPS ===== */
.building-info-popup,
.upgrade-info-popup,
.click-info-popup {
    position: fixed;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid #ffaa44;
    border-radius: 16px;
    padding: 12px 16px;
    z-index: 2000;
    min-width: 160px;
    max-width: 240px;
    box-shadow: 0 0 30px rgba(255, 170, 68, 0.3);
    pointer-events: auto;
    color: #eee;
    font-size: 0.85rem;
    text-align: center;
}
.building-info-popup .popup-content,
.upgrade-info-popup .popup-content,
.click-info-popup .popup-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.building-info-popup .popup-content > div:first-child,
.upgrade-info-popup .popup-content > div:first-child,
.click-info-popup .popup-content > div:first-child {
    font-size: 1rem;
    color: #ffcc77;
    border-bottom: 1px solid #ffaa4455;
    padding-bottom: 4px;
    margin-bottom: 4px;
}
.building-info-popup .popup-detail,
.upgrade-info-popup .popup-detail,
.click-info-popup .popup-detail {
    font-size: 0.8rem;
    color: #bbaa88;
}
.click-info-popup {
    min-width: 200px;
    max-width: 280px;
    padding: 14px 18px;
}
.click-info-popup .popup-content > div:first-child {
    font-size: 1.1rem;
}
.click-info-popup .popup-detail strong {
    color: #ffaa44;
}

/* ===== MOBILE ADJUSTMENTS ===== */
@media (max-width: 700px) {
    /* ----- HIDE LEFT & RIGHT COLUMNS AND DESKTOP DIGITS & LED ----- */
    .left-col, .right-col {
        display: none !important;
    }
    .middle-col {
        display: none !important;
    }

    /* ----- ABSOLUTE POSITIONING – PIN EVERYTHING TO THE TOP ----- */
    #star-layer {
        justify-content: flex-start !important;
        padding-top: 0 !important;
        height: 100vh !important;
        position: fixed !important;
    }
    .star-area {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        padding: 0 8px !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ----- MOBILE DIGITS: AT VERY TOP ----- */
    .mobile-digits {
        display: block !important;
        width: 100%;
        padding: 0 2px;
        margin: 0 !important;
        margin-bottom: 4px !important;
        pointer-events: auto;
        flex-shrink: 0;
    }

    /* ----- STAR WRAPPER: FILL REMAINING SPACE, CENTER STAR ----- */
    .star-area > div:first-child {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 400px !important;
        margin: 4px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        padding-bottom: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    .star-area > div:first-child .dyson-system {
        position: relative !important;
        width: 100% !important;
        max-width: 400px !important;
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        pointer-events: auto !important;
    }
    .star-area > div:first-child .dyson-system .layer {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* ----- MOBILE MENU: AT BOTTOM (just above LED) ----- */
    .mobile-menu {
        display: flex !important;
        justify-content: center;
        gap: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: rgba(10, 10, 10, 0.85);
        backdrop-filter: blur(4px);
        border: 1px solid #ffaa44;
        border-radius: 0 0 12px 12px;
        overflow: hidden;
        pointer-events: auto;
        box-shadow: 0 0 20px rgba(255, 170, 68, 0.3), inset 0 0 30px rgba(255, 170, 68, 0.1);
        position: relative;
        flex-shrink: 0;
    }
    .mobile-menu::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.10) 0%,
            rgba(255, 170, 68, 0.06) 20%,
            rgba(255, 170, 68, 0.02) 40%,
            rgba(255, 255, 255, 0.05) 60%,
            rgba(255, 170, 68, 0.08) 80%,
            rgba(255, 255, 255, 0.02) 100%
        );
        border-radius: 0 0 12px 12px;
        z-index: 1;
    }
    .mobile-menu button {
        background: transparent;
        border: none;
        color: #ffdd99;
        padding: 12px 8px;
        font-weight: bold;
        font-size: 1.2rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 52px;
        flex: 1;
        transition: background 0.1s, transform 0.1s;
        white-space: nowrap;
        text-shadow: 0 0 8px rgba(255, 170, 68, 0.3);
        position: relative;
        z-index: 2;
    }
    .mobile-menu button:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 10%;
        height: 80%;
        width: 1px;
        background: linear-gradient(to bottom, transparent, #ffaa44, #ffcc66, #ffaa44, transparent);
        filter: blur(0.5px);
        opacity: 0.9;
        box-shadow: 0 0 8px rgba(255, 170, 68, 0.5);
    }
    .mobile-menu button:active {
        background: rgba(255, 170, 68, 0.2);
        transform: scale(0.95);
    }
    .mobile-menu button img {
        width: 28px;
        height: 28px;
        filter: brightness(0) saturate(100%) invert(67%) sepia(61%) saturate(495%) hue-rotate(350deg) brightness(102%) contrast(101%);
    }
    .mobile-menu button span {
        font-size: 1.1rem;
    }

    /* ----- MOBILE LED: AT VERY BOTTOM ----- */
    .mobile-led {
        display: flex !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px !important;
        border-radius: 0 0 12px 12px !important;
        border-top: none !important;
        background: rgba(10, 10, 10, 0.85) !important;
        backdrop-filter: blur(4px) !important;
        box-shadow: 0 0 20px rgba(255, 170, 68, 0.3), inset 0 0 30px rgba(255, 170, 68, 0.1) !important;
        flex-shrink: 0;
    }
    .mobile-led canvas {
        min-height: 100px;
        height: auto;
        max-height: 120px;
    }

    /* ----- BIGGER DIGITS & ICONS ON MOBILE ----- */
    .energy {
        font-size: 2.4rem !important;
        text-shadow: 0 0 12px rgba(255, 200, 0, 0.8);
    }
    .cps {
        font-size: 1.2rem !important;
        text-shadow: 0 0 6px rgba(102,240,255,0.4);
    }
    .multiplier {
        font-size: 1.0rem !important;
    }
    .icon-btn img {
        width: 64px !important;
        height: 64px !important;
    }
    .ad-icon-new img {
        width: 64px !important;
        height: 64px !important;
    }

    /* ----- MOBILE EVENT ICON – MATCH AD ICON SIZE & MAKE CLICKABLE ----- */
    #eventIconContainerMobile {
        width: 64px !important;
        height: 64px !important;
        margin-top: 4px;
        position: relative;
        pointer-events: auto;
    }
    #eventIconContainerMobile canvas,
    #eventIconContainerMobile img {
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
    }
    #eventIconContainerMobile canvas {
        pointer-events: none;
        z-index: 2;
    }
    #eventIconContainerMobile img {
        pointer-events: auto;
        z-index: 1;
        cursor: pointer;
        object-fit: contain;
    }

    /* ----- MOBILE EVENT ICON – BRIGHTNESS PULSE (same as desktop) ----- */
    #eventIconImgMobile.event-positive,
    #eventIconImgMobile.event-negative {
        animation: pulseBrightness 0.6s ease-in-out infinite;
    }

    .top-row {
        gap: 8px;
    }
    .left-icons, .right-icons {
        gap: 6px;
    }
    .suffix {
        font-size: 0.65em;
    }
    .button-suffix {
        font-size: 0.75em;
    }
    .essence-progress-text {
        font-size: 0.7rem;
    }
    .essence-progress-container {
        height: 28px;
    }

    /* ----- BUILDING & UPGRADE CARDS INSIDE MODALS ----- */
    .building-card {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px;
    }
    .building-info {
        flex: 1 1 60%;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        text-align: right;
    }
    .building-name {
        font-size: 0.85rem;
        white-space: normal;
        text-align: right;
        width: 100%;
    }
    .building-cost {
        font-size: 0.7rem;
        justify-content: flex-end;
        text-align: right;
        width: 100%;
    }
    .owned-badge {
        font-size: 1.8rem;
        padding: 0 4px;
    }
    .building-icon-wrapper {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }
    .building-icon-wrapper .custom-icon {
        max-width: 3.5rem !important;
        max-height: 3.5rem !important;
    }

    .upgrade-card {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px;
    }
    .upgrade-info {
        flex: 1 1 60%;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        text-align: right;
    }
    .upgrade-name {
        font-size: 0.85rem;
        white-space: normal;
        text-align: right;
        width: 100%;
    }
    .upgrade-cost {
        font-size: 0.7rem;
        justify-content: flex-end;
        text-align: right;
        width: 100%;
    }
    .upgrade-icon-wrapper {
        width: 2.2rem;
        height: 2.2rem;
    }
    .upgrade-icon {
        font-size: 1.6rem;
    }
    .upgrade-icon-wrapper .custom-icon {
        max-width: 2.2rem;
        max-height: 2.2rem;
    }
    .click-upgrade-icon {
        font-size: 1.8rem;
    }
    .bulk-controls {
        gap: 3px;
    }
    .bulk-btn {
        font-size: 0.6rem;
        padding: 2px 6px;
    }
}

/* ===== GLASS MODAL ===== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 170, 68, 0.5);
    border-radius: 28px;
    max-width: 550px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.2rem;
    color: #eee;
    box-shadow: 0 0 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,170,68,0.2);
}
.modal-content h3 { margin-bottom: 1rem; color: #ffcc77; border-bottom: 1px solid #ffaa44; display: inline-block; }
.close-modal {
    float: right;
    background: none;
    border: none;
    cursor: pointer;
}
.close-modal img {
    width: 24px;
    height: 24px;
}
.settings-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ffaa44;
    padding-bottom: 8px;
    flex-wrap: wrap;
}
.settings-tab {
    background: none;
    border: none;
    color: #ccaa88;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.settings-tab img {
    width: 20px;
    height: 20px;
}
.settings-tab.active { background: #ffaa44; color: #000; }
.settings-tab.active img {
    filter: brightness(0) !important;
}
.tab-content { display: none; }
.tab-content.active { display: block; }
.slider-group { margin-bottom: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.slider-group label { font-size: 0.8rem; color: #ccaa88; min-width: 100px; }
.slider-group .vol-btn {
    background: rgba(0,0,0,0.5);
    border: 1px solid #ffaa44;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    color: #ffaa44;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.slider-group .vol-btn:hover { background: #ffaa44; color: #000; }
input[type="range"] {
    width: 180px;
    background: #2a2a1a;
    height: 4px;
    border-radius: 4px;
    -webkit-appearance: none;
}
input[type="range"]:focus { outline: none; }
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffaa44;
    cursor: pointer;
}
.mute-btn {
    background: transparent;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    color: #ffaa44;
}
.mute-btn:hover { color: #fff; }

/* Stats cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 10px;
    text-align: center;
    border: 1px solid rgba(255,170,68,0.3);
}
.stat-card .stat-icon img {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
}
.stat-card .stat-label { font-size: 0.7rem; color: #bbaa88; }
.stat-card .stat-value { font-size: 1.2rem; font-weight: bold; color: #ffcc77; }

/* ========== EVENT ICON (DESKTOP) – BRIGHTNESS PULSE ONLY ========== */
#eventIconContainer {
    position: relative;
    width: 32px;
    height: 32px;
    margin-top: 4px;
}
#eventIconContainer canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    pointer-events: none;
}
#eventIconImg {
    width: 32px;
    height: 32px;
    cursor: pointer;
    transition: transform 0.1s, filter 0.1s;
}
#eventIconImg:active {
    transform: scale(0.95);
}

/* Both positive and negative use the same brightness pulse – no colored glow */
#eventIconImg.event-positive,
#eventIconImg.event-negative {
    animation: pulseBrightness 0.6s ease-in-out infinite;
}

@keyframes pulseBrightness {
    0%   { transform: scale(1); filter: brightness(1); }
    50%  { transform: scale(1.08); filter: brightness(1.6); }
    100% { transform: scale(1); filter: brightness(1); }
}

#eventIconPopup {
    position: absolute;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(8px);
    border: 1px solid #ffaa44;
    border-radius: 1rem;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: #ffdd99;
    z-index: 35;
    min-width: 140px;
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
    pointer-events: none;
    direction: rtl;
    text-align: right;
}
#eventIconPopup span {
    display: block;
    margin: 2px 0;
}
#eventIconPopup .popup-name {
    font-weight: bold;
    color: #ffaa44;
}
#eventIconPopup .popup-desc {
    font-size: 0.7rem;
    color: #ddd;
}
#eventIconPopup .popup-time {
    font-size: 0.7rem;
    color: #88aaff;
}

/* ========== ICON COLOR & HOVER EFFECTS ========== */
.icon-btn img,
.ad-icon-new img,
.settings-tab img,
.stat-card .stat-icon img,
.close-modal img,
h2 img,
.modal-content h3 img {
    filter: brightness(0) saturate(100%) invert(67%) sepia(61%) saturate(495%) hue-rotate(350deg) brightness(102%) contrast(101%);
    transition: transform 0.15s ease;
}
@keyframes iconGlint {
    0% { transform: scale(1) rotate(0deg); }
    40% { transform: scale(1.15) rotate(3deg); }
    80% { transform: scale(1.08) rotate(2deg); }
    100% { transform: scale(1.08) rotate(2deg); }
}
.icon-btn:hover img,
.ad-icon-new:hover img,
h2:hover img,
.modal-content h3:hover img,
.stat-card:hover .stat-icon img,
.close-modal:hover img {
    animation: iconGlint 0.25s ease forwards;
}
.settings-tab:not(.active):hover img {
    animation: iconGlint 0.25s ease forwards;
}
.settings-tab.active img {
    filter: brightness(0) !important;
    transform: none;
    animation: none;
}

/* ========== JUSTIFY PERSIAN TEXT ========== */
#tab-about p,
#tab-tutorial p,
#tutorialModal p {
    text-align: justify;
    text-justify: inter-word;
}

/* ========== PREVENT IMAGE DRAGGING ========== */
.dyson-system img {
    -webkit-user-drag: none;
    user-drag: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
}
.game-grid {
    user-select: none;
    -webkit-user-select: none;
}
.star-base {
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.8));
    transform: scale(1.02);
    mask-image: radial-gradient(circle, black 70%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, black 70%, transparent 100%);
}
#starCore {
    transition: filter 0.05s linear, transform 0.05s linear;
}
#starCore.click-flash {
    filter: brightness(1.8) drop-shadow(0 0 10px #ffaa44);
    transform: scale(0.95);
}

html[dir="rtl"] .game-grid {
    direction: rtl;
}
html[dir="rtl"] .left-col,
html[dir="rtl"] .right-col,
html[dir="rtl"] .middle-col {
    direction: rtl;
}
html[dir="rtl"] .building-card,
html[dir="rtl"] .upgrade-card {
    border-left: none;
    border-right: 3px solid #ffaa44;
}
html[dir="rtl"] .col-content {
    padding-right: 0;
    padding-left: 6px;
}
html[dir="rtl"] .close-modal {
    float: left;
}
html[dir="rtl"] .discount-badge {
    margin-left: 0;
    margin-right: 8px;
}
html[dir="rtl"] .ad-panel {
    left: auto;
    right: 0;
}
html[dir="rtl"] .event-popup {
    right: auto;
    left: 20px;
}
html[dir="rtl"] .energy,
html[dir="rtl"] .cps,
html[dir="rtl"] .multiplier {
    text-align: center;
}

#tutorialModal .modal-content {
    max-width: 600px;
}
#tutorialModal h4 {
    color: #ffcc77;
    margin: 1rem 0 0.5rem 0;
    border-bottom: 1px solid #ffaa4455;
    padding-bottom: 0.25rem;
}
#tutorialModal p {
    margin: 0.5rem 0;
    line-height: 1.5;
    font-size: 0.9rem;
}
#tutorialModal strong {
    color: #ffaa44;
}
#closeTutorialBtn {
    background: #ffaa44;
    color: #1a1a1a;
    font-size: 1rem;
    padding: 8px;
}

/* ========== EVENT VISUAL EFFECTS ========== */
.star-halo.pulse-saturate {
    animation: saturatePulse 1s ease-in-out 3;
}
@keyframes saturatePulse {
    0% { filter: saturate(1) brightness(1); }
    50% { filter: saturate(1.2) brightness(2); }
    100% { filter: saturate(1) brightness(1); }
}
.star-halo.golden-wave {
    animation: goldenBreathe 2s ease-in-out infinite;
}
@keyframes goldenBreathe {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.5); }
    100% { filter: brightness(1); }
}

/* ========== LEADERBOARD TAB ========== */
#tab-leaderboard .slider-group {
    margin-bottom: 10px;
}
#tab-leaderboard .slider-group label {
    min-width: 80px;
}
#tab-leaderboard input[type="text"],
#tab-leaderboard input[type="email"] {
    background: #1a1a0a;
    border: 1px solid #ffaa44;
    border-radius: 6px;
    color: #eee;
    padding: 6px 10px;
    font-size: 0.9rem;
    width: 100%;
    max-width: 280px;
    direction: ltr;
}
#tab-leaderboard input[type="text"]:focus,
#tab-leaderboard input[type="email"]:focus {
    outline: none;
    border-color: #ffcc66;
    box-shadow: 0 0 8px rgba(255, 170, 68, 0.3);
}
#tab-leaderboard input::placeholder {
    color: #666;
    font-size: 0.8rem;
}
#lbSaveProfileBtn {
    background: #ffaa44;
    color: #1a1a1a;
    border: none;
    padding: 6px 18px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.1s;
}
#lbSaveProfileBtn:hover {
    background: #ffbb55;
    transform: scale(1.02);
}
#lbSaveProfileBtn:active {
    transform: scale(0.95);
}
#lbProfileStatus {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #88aaff;
    min-height: 1.2em;
}
#lbProfileStatus.error {
    color: #ff6644;
}
#lbProfileStatus.success {
    color: #66ff88;
}

#leaderboardTableContainer {
    margin-top: 4px;
}
#leaderboardTableContainer h4 {
    color: #ffcc77;
    margin: 0;
}
#lbRefreshBtn {
    background: transparent;
    border: none;
    color: #ffaa44;
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 20px;
    transition: 0.1s;
}
#lbRefreshBtn:hover {
    background: rgba(255, 170, 68, 0.15);
    transform: scale(1.05);
}
#lbRefreshBtn:active {
    transform: scale(0.95);
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 4px;
}
.leaderboard-table th {
    background: rgba(255, 170, 68, 0.2);
    color: #ffcc77;
    padding: 6px 8px;
    text-align: center;
    border-bottom: 2px solid #ffaa44;
    font-weight: bold;
}
.leaderboard-table td {
    padding: 5px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 170, 68, 0.15);
    color: #ddd;
}
.leaderboard-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}
.leaderboard-table tr:hover td {
    background: rgba(255, 170, 68, 0.08);
}
.leaderboard-table .rank-1 td {
    color: #ffd700;
    font-weight: bold;
}
.leaderboard-table .rank-2 td {
    color: #c0c0c0;
    font-weight: bold;
}
.leaderboard-table .rank-3 td {
    color: #cd7f32;
    font-weight: bold;
}
.leaderboard-table .rank-highlight td {
    background: rgba(255, 170, 68, 0.25);
    border-left: 3px solid #ffaa44;
    border-right: 3px solid #ffaa44;
}
.leaderboard-table .username-cell {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
.leaderboard-table .score-cell {
    font-variant-numeric: tabular-nums;
}

#lbYourRank {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(255, 170, 68, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 170, 68, 0.3);
    font-size: 0.9rem;
    color: #ffcc77;
    text-align: center;
}
#lbYourRank .highlight {
    color: #ffaa44;
    font-weight: bold;
}

#leaderboardTable .lb-loading {
    color: #888;
    text-align: center;
    padding: 20px 0;
}
#leaderboardTable .lb-empty {
    color: #666;
    text-align: center;
    padding: 20px 0;
}
#leaderboardTable .lb-error {
    color: #ff6644;
    text-align: center;
    padding: 20px 0;
}

@media (max-width: 700px) {
    .leaderboard-table {
        font-size: 0.7rem;
    }
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 4px 4px;
    }
    .leaderboard-table .username-cell {
        max-width: 70px;
    }
    #tab-leaderboard input[type="text"],
    #tab-leaderboard input[type="email"] {
        max-width: 100%;
        font-size: 0.8rem;
    }
    #tab-leaderboard .slider-group label {
        min-width: 60px;
        font-size: 0.8rem;
    }
    #lbYourRank {
        font-size: 0.75rem;
        padding: 6px 10px;
    }
}

/* ========== SETTINGS BUTTON FIXES ========== */
#applyAudioBtn {
    background: #ffaa44;
    color: #1a1a1a;
    border: none;
    padding: 6px 24px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.1s;
    margin-top: 4px;
}
#applyAudioBtn:hover {
    background: #ffbb55;
    transform: scale(1.02);
}
#applyAudioBtn:active {
    transform: scale(0.95);
}

#resetGameBtn {
    background: #cc3333 !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    transition: 0.1s !important;
    width: auto !important;
}
#resetGameBtn:hover {
    background: #dd4444 !important;
    transform: scale(1.02);
}
#resetGameBtn:active {
    transform: scale(0.95);
}

/* ===== FLOATING +NUMBER ON STAR CLICK (green) ===== */
.float-text {
    position: fixed;
    pointer-events: none;
    font-size: 1.4rem;
    font-weight: bold;
    color: #66ff88;
    background: rgba(0, 0, 0, 0.85);
    padding: 3px 14px;
    border-radius: 30px;
    border: 1px solid rgba(102, 255, 136, 0.6);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), 0 0 15px rgba(102, 255, 136, 0.2);
    text-shadow: 0 0 20px rgba(102, 255, 136, 0.8);
    z-index: 9999;
    animation: floatUp 0.9s ease-out forwards;
    font-family: 'Segoe UI', 'Orbitron', monospace;
    user-select: none;
    white-space: nowrap;
    transform: translateX(-50%);
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(0.7);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-80px) scale(1.15);
    }
}

/* ===== GOLDEN FLOATING BADGE (Slicker Version) ===== */
.float-object {
    position: fixed;
    pointer-events: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffcc44;
    background: rgba(10, 10, 10, 0.85);
    padding: 6px 18px;
    border-radius: 40px;
    border: 2px solid #ffaa44;
    box-shadow: 0 0 30px rgba(255, 170, 68, 0.4), inset 0 0 20px rgba(255, 170, 68, 0.1);
    text-shadow: 0 0 20px rgba(255, 170, 68, 0.8);
    z-index: 9999;
    font-family: 'Segoe UI', 'Orbitron', monospace;
    user-select: none;
    white-space: nowrap;
    transform: translateX(-50%) scale(0.5);
    animation: floatGold 1.4s cubic-bezier(0.22, 0.68, 0.35, 1) forwards;
}

@keyframes floatGold {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) scale(0.5);
    }
    25% {
        opacity: 1;
        transform: translateX(-50%) translateY(-15px) scale(1.15);
    }
    55% {
        opacity: 1;
        transform: translateX(-50%) translateY(-35px) scale(1.0);
    }
    80% {
        opacity: 0.9;
        transform: translateX(-50%) translateY(-60px) scale(0.95);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-90px) scale(0.8);
    }
}