@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap);

/* =========================================
   1. GLOBAL & ORIGINAL GAME DESIGN
   ========================================= */
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, #b8e05f 0%, #9ACD32 100%);
    display: flex; justify-content: center; align-items: flex-start;
    min-height: 100vh; margin: 0; padding: 0; color: #384f22; box-sizing: border-box;
}

#main-game-wrapper {
    display: flex; flex-direction: column; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0;
}

/* --- HEADER STRUCTURE --- */
header {
    position: sticky; top: 0; z-index: 100;
    background-color: #f8fff8; box-shadow: 0 2px 5px rgba(0,0,0,.1);
    padding: 8px 12px; margin-bottom: 10px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

/* Left Group (XP & Level) */
.header-left-group { 
    flex: 1; 
    display: flex; 
    align-items: flex-start; 
    justify-content: flex-start; 
}

#xp-panel {
    width: auto; 
    display: flex;
    flex-direction: column;
}

#farmer-name-display {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1em;
    font-weight: 900;
    color: #384f22;
}

/* --- LEVEL DISPLAY --- */
#level-display {
    display: flex !important;
    align-items: flex-start;
    font-size: 0.7em;        
    font-weight: 900;
    color: #666;
    line-height: 1;
    margin-bottom: 2px;
    padding-top: 2px;
}

#current-level {
    font-size: 2.2em !important;
    line-height: 0.7;
    color: #384f22;
    margin-left: 3px;
    position: relative;
    top: 3px; 
}

/* --- XP BAR --- */
#xp-bar-container {
    width: 130px;
    height: 10px;            
    background-color: #e0e0e0;
    border-radius: 5px; 
    overflow: hidden; 
    margin-top: 4px; 
    border: 1px solid #bbb;
    position: relative;
}

#xp-bar { height: 100%; background-color: #4caf50; border-radius: 4px 0 0 4px; transition: width 0.5s; }
#xp-text { display: none !important; } 
.desktop-xp-text { font-size: 0.7em; color: #666; margin-left: 2px; display: none; }

/* =========================================
   3. XP GAIN EFFECTS
   (Dagdag para mag-flash ang bar at text kapag may XP gain)
   ========================================= */

/* XP Bar Flash Effect */
#xp-bar.xp-flash-effect {
    box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.7); /* Yellow/Gold glow */
    transition: box-shadow 0.2s ease-out; /* Mas mabilis na transition */
}

/* XP Text Counter Effect */
#xp-panel #current-xp.xp-flash-text {
    /* Kailangan mo ng ID na 'current-xp' para sa element na ito! */
    transform: scale(1.2); /* Mabilis na paglaki */
    color: #FFD700 !important; /* Gold color */
    transition: transform 0.2s ease-out, color 0.2s ease-out;
}

/* Tiyakin na ang transition ay naka-set sa permanenteng element class/ID */
#xp-panel #current-xp { 
    transition: transform 0.4s ease-out, color 0.4s ease-out; 
}


/* Right Group (Coins/Weather) */
.header-right-group { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }

#coins-display { 
    font-weight: 900; 
    font-size: 0.9em; 
    display: flex; 
    align-items: center; 
    justify-content: flex-end;
    gap: 5px; 
}

#coins-count { color: #4A2C2A; font-size: 1.1em; line-height: 1; }
.coin-icon { font-size: 1.3em; line-height: 1; }
#logout-button { position: static; padding: 4px 8px; font-size: 0.8em; }

#weather-display { transition: all 0.2s; cursor: default; }

#main-content { display: flex; flex-direction: row; gap: 8px; padding: 0 5px; }

#left-menu-panel {
    width: 100px; flex-shrink: 0; background-color: #e6ffe6; padding: 8px;
    border-radius: 12px; align-self: flex-start;
}
#left-menu-panel h2 {
    font-size: 1em; font-weight: 900; text-align: center; margin-top: 0;
    margin-bottom: 8px; padding-bottom: 4px; border-bottom: 2px solid #a8e6cf;
}
#combined-navigation { display: flex; flex-direction: column; gap: 8px; width: 100%; }

/* NAV BUTTONS */
.nav-button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 8px 4px; border: none; border-radius: 8px;
    background: linear-gradient(180deg, #e4f7d7 0%, #d4edc7 100%);
    transition: all 0.2s; box-shadow: 0 3px 5px rgba(0,0,0,.1), inset 0 -2px 0 rgba(0,0,0,.1);
    color: #384f22; font-weight: 600; font-size: .8em; cursor: pointer;
}
.nav-button img { width: 36px; height: 36px; margin-bottom: 2px; }
.nav-button.selected { background: linear-gradient(180deg, #b8f0df 0%, #a8e6cf 100%); }
.nav-button:hover { transform: scale(1.03); }
.nav-button:active { transform: scale(.98); }
#logout-nav-button { display: none; }

#game-container { flex-grow: 1; display: flex; flex-direction: column; gap: 15px; align-items: center; }

/* --- GRID LAYOUT FOR PLOTS --- */
#farm-grid, #animal-plot-grid {
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 6px;
    width: 100%; max-width: 600px; margin: 0 auto; box-sizing: border-box;
}

.plot, .animal-plot {
    border: none; background-color: transparent;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    font-size: .8em; cursor: pointer; transition: all 0.2s;
    text-align: center; position: relative; overflow: hidden;
    user-select: none; padding: 0; aspect-ratio: 1 / 1; box-shadow: none;
}
.plot.locked, .animal-plot.locked { color: #384f22; }
.locked-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; padding: 5px; }
.locked-icon { font-size: 2em; text-shadow: 1px 1px 2px rgba(255,255,255,.5); }
.locked-price { display: none !important; }


/* =========================================
   2. MODALS (GENERAL)
   ========================================= */
#shop-modal, #barn-modal, #feed-mill-modal, #order-board-modal, #leaderboard-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 95vw; max-width: 330px; /* Default small size */
    height: auto; max-height: 600px;
    background-color: rgba(0, 0, 0, 0.6);
    display: none; z-index: 2000;
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* SPECIAL OVERRIDE: BIGGER ORDER BOARD */
#order-board-modal {
    max-width: 700px !important; /* Wider for 3 columns */
}

#shop-panel, #barn-panel, #feed-mill-panel, #order-board-panel, #leaderboard-panel {
    max-height: initial; width: 100%; height: 100%;
    overflow-y: auto; position: relative; display: flex; flex-direction: column;
    background-color: #fff; box-sizing: border-box;
    padding: 10px 5px;
}

.close-button, .close-btn {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px;
    background-color: #e81123; color: #ffffff;
    border: 1px solid #b90d1c; border-radius: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 400; font-size: 1.2em; font-family: "Segoe UI", sans-serif;
    cursor: pointer; z-index: 50;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3); transition: background 0.2s;
}
.close-button:hover, .close-btn:hover { background-color: #ff4d4d; }
.close-button:active, .close-btn:active { background-color: #b90d1c; }

#shop-tabs { display: flex; justify-content: center; gap: 4px; padding: 4px; background: #fff; position: sticky; top: 0; z-index: 5; border-bottom: 1px solid #eee; margin-bottom: 5px; }
.shop-tab-button {
    flex: 1; padding: 5px; border: 1px solid #d4edc7; border-radius: 6px;
    background-color: #f0fff0; font-weight: 600; font-size: 0.75em;
    color: #384f22; cursor: pointer; transition: all 0.2s;
}
.shop-tab-button.selected { background-color: #a8e6cf; border-color: #5b945c; color: #000; }
.shop-content-wrapper { flex-grow: 1; overflow-y: hidden; overflow-x: hidden; padding: 0; }
.shop-tab-content { height: 100%; overflow-y: auto; padding-top: 4px; box-sizing: border-box; }

.shop-items-list, #shop-items, #animal-shop-items, #tool-shop-items {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 4px; padding: 4px;
    overflow-x: hidden; justify-content: center;
}

.crop-card {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
    background-color: #fff; border: 1px solid #e0e0e0;
    padding: 5px 2px; border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    width: 100%; height: auto; min-height: 140px;
    transition: transform 0.1s; cursor: pointer; text-align: center;
}
.crop-card:hover { transform: scale(1.05); background-color: #f8fff8; }
.shop-crop-icon { width: 36px; height: 36px; margin-bottom: 2px; object-fit: contain; }

.crop-card .crop-info strong {
    font-size: 0.65em; line-height: 1.1; margin-bottom: 2px;
    height: 2.2em; overflow: hidden; width: 100%;
    display: flex; align-items: center; justify-content: center; color: #333;
}
.crop-card .crop-info p {
    font-size: 0.65em; font-weight: 800; color: #fff; 
    background: #43a047; 
    padding: 4px 0; border-radius: 4px; margin-top: 2px;
    width: 90%; display: flex; align-items: center; justify-content: center;
    white-space: nowrap; margin-left: auto; margin-right: auto;
    box-shadow: 0 2px 2px rgba(0,0,0,0.15);
}
.crop-card .crop-info .mt-1 {
    display: block; width: 100%; margin-top: 4px; padding-top: 2px; border-top: 1px dotted #ddd;
}
.crop-card .crop-info .mt-1 p {
    background: transparent; color: #333; font-size: 0.8em; font-weight: 700; 
    margin: 0; padding: 1px 0; line-height: 1.2; 
    white-space: normal; box-shadow: none; display: block;
}

#barn-panel { background-color: #fff; color: #333; border: none; padding: 10px; }
#barn-panel h2 { font-size: 1.1em; color: #222; margin: 5px 0 10px 0; text-align: center; }

#barn-slots-grid {
    background-color: #f9f9f9 !important; border: 1px solid #ddd !important;
    display: grid; grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px !important; padding: 4px !important;
    border-radius: 6px; margin: 0 auto; width: 100%;
}
.barn-slot {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background-color: #fff8e8; border: 1px solid #e0c24e;
    border-radius: 4px; padding: 1px; position: relative;
    aspect-ratio: 1 / 1; cursor: default; box-shadow: none;
}
.barn-slot.sellable:hover { transform: scale(1.05); background-color: #ffecb3; }
.barn-slot .slot-image { width: 65%; height: auto; object-fit: contain; }
.barn-slot .slot-image.opacity-50 { opacity: 0.5; }
.barn-slot .slot-count {
    position: absolute; top: 1px; right: 1px; bottom: auto;
    background-color: rgba(91, 148, 92, .9); color: #fff;
    padding: 0 3px; border-radius: 3px; font-size: .55em; font-weight: 700;
    border: none; z-index: 2; width: auto; height: auto; min-width: 12px; text-align: center;
}
.barn-slot .slot-name { display: none; }
#barn-upgrade-status { margin: 8px 0; background: #fffbeb; border-radius: 6px; padding: 6px; border: 1px solid #e0c24e; font-size: 0.8em; text-align: center; }

/* --- ORDER BOARD STYLES --- */
#order-board-panel { background-color: #fff; padding: 10px; }
#order-board-panel h2 { font-size: 1.1em; margin-bottom: 10px; text-align: center; border-bottom: 1px solid #eee; padding-bottom: 5px; }

#order-list-grid {
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 Columns Default */
    gap: 10px; 
    padding-bottom: 15px;
    background: transparent !important; border: none !important;
}

.order-card {
    background-color: #fff; border: 1px solid #e0c24e;
    border-radius: 6px; padding: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex; flex-direction: column; gap: 4px;
    position: relative; height: 220px; overflow: hidden;
}
.order-card::after { display: none; }

.order-card-header {
    border-bottom: 1px dashed #f0e6c0; padding-bottom: 3px; margin-bottom: 3px;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.bot-name { font-size: 0.75em; font-weight: 900; color: #5d4037; text-align: center; }
.order-card-rewards { font-size: 0.65em; font-weight: 600; color: #4A2C2A; background: transparent; padding: 0; text-align: center; }

.order-card-items {
    display: flex; flex-direction: column; gap: 3px; flex-grow: 1;
    overflow-y: auto; min-height: 0; margin-bottom: 4px; padding-right: 2px;
}
.order-card-items::-webkit-scrollbar { width: 3px; }
.order-card-items::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }

.order-item { background: #f9f9f9; padding: 2px 4px; border-radius: 3px; display: flex; align-items: center; gap: 3px; border: 1px solid #eee; }
.order-item-icon { width: 14px; height: 14px; object-fit: contain; }
.order-item-name { font-size: 0.6em; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-item-amount { font-weight: 700; font-size: 0.65em; color: #385e39; }
.order-item-amount.not-enough { color: #D32F2F; }

.fulfill-order-btn {
    width: 100%; padding: 6px; border: none; border-radius: 6px;
    background: linear-gradient(180deg, #66bb6a 0%, #43a047 100%);
    color: white; font-weight: 700; font-size: 0.7em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-top: auto; flex-shrink: 0;
}

#feed-mill-panel { background: #fff; padding: 0; }
#feed-mill-panel h2 { font-size: 1.1em; padding: 10px; margin: 0; border-bottom: 1px solid #e0e0e0; text-align: center; }

#feed-inventory-display {
    background: #fff; padding: 8px; border-bottom: 1px solid #e0e0e0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
#feed-inventory-display > div {
    display: flex; align-items: center; justify-content: center; gap: 2px;
    background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px;
    padding: 2px; font-size: 0.6em; font-weight: bold; white-space: nowrap;
}
#feed-inventory-display img { width: 14px; height: 14px; }

#conversion-status-section {
    padding: 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
#conversion-status-section > div {
    background: #f8fff8; border-radius: 6px; padding: 6px;
    border: 1px solid #a8e6cf; box-shadow: none; min-height: 60px;
    display: flex; flex-direction: column; justify-content: center; text-align: center;
}
#conversion-status-section p { font-size: 0.7em; margin: 0; }
#conversion-status-section .text-sm { font-size: 0.65em; }
#conversion-status-section button { padding: 3px; font-size: 0.65em; margin-top: 2px; }

#feed-mill-groups { padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.feed-group {
    background: #fff; border-radius: 6px; padding: 0;
    border: 1px solid #ddd; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    overflow: hidden; display: flex; flex-direction: column;
}
.feed-group strong {
    display: block; background: #e6ffe6; color: #384f22;
    padding: 3px 8px; font-size: 0.75em; border-bottom: 1px solid #a8e6cf;
    font-weight: 800;
}
.feed-group > div {
    display: flex; flex-direction: row; /* Horizontal List */
    align-items: center; justify-content: space-between;
    padding: 4px 8px; border-bottom: 1px solid #f0f0f0;
    min-height: 30px;
}
.feed-group > div:last-child { border-bottom: none; }

.feed-mill-convert-button {
    background: #10b981 !important; color: white !important; border: none;
    padding: 4px 10px; border-radius: 12px; font-weight: 600; font-size: 0.65em;
    width: auto; min-width: 60px; margin-left: 8px;
}
.feed-mill-convert-button:hover { background: #ffe082 !important; }
.feed-mill-convert-button:disabled { background: #eee !important; color: #aaa !important; border-color: #ccc; }

.conversion-progress-container { 
    width: 100%; height: 14px; /* Bar Height */
    border-radius: 7px; border: 1px solid #ccc; background: #e0e0e0; 
    position: relative; overflow: hidden; margin-top: 2px;
}
.conversion-progress-bar { 
    height: 100%; background: linear-gradient(90deg, #4caf50, #66bb6a); 
    transition: width 0.5s ease;
    font-size: 0.65em; color: #fff; font-weight: bold;
    text-align: center; line-height: 14px; white-space: nowrap; display: block;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

#confirmation-modal, #buy-confirmation-modal, #unlock-confirmation-modal, #seed-selection-modal { z-index: 2100; }
#alert-modal { z-index: 3000; }
#confirmation-panel, #buy-confirmation-panel, #unlock-confirmation-panel, #alert-panel, #seed-selection-content { max-height: 90vh; overflow-y: auto; position: relative; box-sizing: border-box; }
#seed-selection-content { background-color: #fff; border: 4px solid #5b945c; border-radius: 12px; padding: 15px; box-shadow: 0 5px 20px rgba(0,0,0,.3); max-width: 320px; width: 90%; }
#seed-slots-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.seed-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #ccc; background-color: #f9f9f9; border-radius: 6px; padding: 4px; position: relative; aspect-ratio: 1 / 1.2; cursor: pointer; }
.seed-slot:hover { transform: scale(1.05); background-color: #f0fff0; }
.seed-slot.selected { background-color: #d4edc7; border-color: #5b945c; }
.seed-slot .slot-image { width: 70%; height: auto; flex-grow: 1; object-fit: contain; }
.seed-slot .slot-count { position: absolute; top: 1px; right: 1px; background-color: rgba(91, 148, 92, .8); color: #fff; padding: 1px 3px; border-radius: 4px; font-size: .65em; font-weight: 700; }
.seed-slot .slot-name { font-size: .6em; font-weight: 600; text-align: center; line-height: 1.1; color: #333; margin-top: 2px; }
#floating-order-bubble { position: fixed; z-index: 1900; }

#leaderboard-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 60vh; overflow-y: auto; }
.leaderboard-row { display: flex; align-items: center; padding: 6px; border-radius: 6px; background-color: #f8fff8; border: 1px solid #d4edc7; }
.leaderboard-rank { font-size: 0.9em; font-weight: 900; color: #384f22; width: 25px; flex-shrink: 0; text-align: center; }
.leaderboard-row:nth-child(1) .leaderboard-rank { color: #D4AF37; }
.leaderboard-row:nth-child(2) .leaderboard-rank { color: silver; }
.leaderboard-row:nth-child(3) .leaderboard-rank { color: #CD7F32; }
.leaderboard-details { flex-grow: 1; margin-left: 6px; }
.leaderboard-name { font-size: 0.9em; font-weight: 700; color: #4A2C2A; }
.leaderboard-stats { font-size: .75em; color: #555; display: flex; gap: 8px; }


/* --- MOBILE SPECIFIC STYLES --- */
@media (max-width: 767px) {
    
    header { 
        padding: 2px 8px !important;
        height: auto;
        align-items: flex-start;
    }

    .header-left-group { 
        flex: 1; 
        max-width: 75%;
        display: flex;
        flex-direction: column; 
        justify-content: center;
    }

    #farmer-name-display { 
        display: block !important; 
        font-size: 1em; 
        font-weight: 900; 
        margin-bottom: 0 !important; 
        line-height: 1.1; 
    }

    #level-display { 
        display: flex !important; 
        align-items: flex-start; 
        font-size: 0.6em; 
        margin: 0 !important; 
    }
    #current-level {
        font-size: 2em !important;
        font-weight: 900;
        margin-left: 3px;
        line-height: 0.8;
    }

    #xp-bar-container { 
        height: 10px;
        width: 130px; 
        max-width: none; 
        margin-top: 2px !important; 
        border-radius: 5px;
    }

    #xp-text { display: none !important; }
    .desktop-xp-text { display: none !important; }
    
    #protection-display, #weather-display {
        font-size: 0.65em !important;
        padding: 1px 4px !important;
        margin-top: 3px !important;
        width: fit-content !important; 
        min-width: auto !important;
        display: block; 
    }

    .header-right-group { 
        align-items: flex-end;
        justify-content: center;
        margin-top: 2px;
        margin-right: 0; 
    }
    
    #status-panel { padding: 0 !important; margin-bottom: 4px; }

    .icon-wallet {
        width: auto !important;   
        height: auto !important;
        transform: none !important;
        margin-right: 4px;
    }
    
    #coins-display { 
        display: flex !important;
        gap: 0 !important;
        align-items: center !important;
        justify-content: flex-end;
    }

    #coins-count { 
        font-size: 1em !important; 
        line-height: 1 !important;
        position: static !important;
        margin-top: 2px;
        font-weight: 900;
    }
    
    .coin-icon { font-size: 1.1em; }

    #logout-button { display: none !important; }
    #logout-nav-button { display: flex; }
    #logout-nav-button span { display: none !important; }
    
    #main-content { flex-direction: column; padding: 0 4px; }
    #left-menu-panel { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; height: auto; padding: 6px 4px; z-index: 1000; background-color: #f7fcf0; border-top: 2px solid #a8e6cf; box-shadow: 0 -4px 10px rgba(0, 0, 0, .1); align-self: auto; }
    #left-menu-panel h2 { display: none !important; }
    #combined-navigation { flex-direction: row; justify-content: space-around; gap: 2px; }
    .nav-button { flex-basis: 15%; font-size: .6em; padding: 4px 1px; }
    .nav-button img { width: 28px; height: 28px; }
    body { padding-bottom: 65px !important; }

    /* MOBILE: ORDER BOARD 2 COLUMNS */
    #order-list-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================
   ALIGNMENT FIXES
   ========================================= */

#animal-plot-grid {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 6px !important; 
}

.animal-plot-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; 
    transform: none !important; 
    position: absolute; 
    top: 0; left: 0;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

.animal-status-icon { position: absolute; top: 4px; left: 4px; font-size: 1.5em; text-shadow: 1px 1px 2px rgba(0, 0, 0, .5); z-index: 5; }
.animal-timer { position: absolute; bottom: 2px; left: 0; right: 0; background-color: rgba(0, 0, 0, .5); color: #fff; font-size: .8em; font-weight: 700; padding: 1px 0; z-index: 5; }

.animal-plot {
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

#animal-area {
    display: block;
    width: 100%;
}

.plot-harvestable { animation: bounce 0.8s infinite; }
@keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.plot-watered { background-color: #8a715a; }
.floating-text { position: absolute; font-size: 1.2em; font-weight: 700; color: #e0c24e; text-shadow: 1px 1px 2px rgba(0, 0, 0, .7); animation: float-up 1.5s ease-out forwards; pointer-events: none; z-index: 100; }
.floating-text.xp { color: #4caf50; }
@keyframes float-up { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-50px); } }


/* =========================================
   SECURITY PLOT
   ========================================= */
#security-slot-container {
    /* Changed from absolute to relative so it sits naturally under the board */
    position: relative; 
    
    /* Removed top/left/transform centering */
    top: auto;      
    left: auto;
    transform: none;

    /* Spacing: 10px top/bottom, Auto left/right (Center) */
    margin: 10px auto; 
    
    z-index: 10;      
    width: 70px;      
    height: 70px;     
    background-color: transparent !important; 
    border: none;                             
    box-shadow: none;                           
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px; 
}

#guardian-img {
    width: 90% !important;
    height: 90% !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
    animation: floating 3s ease-in-out infinite; 
}

.security-label {
    display: none; 
    position: absolute;
    bottom: 2px;
    width: 100%;
    text-align: center;
    font-size: 8px;
    font-weight: 900;
    color: #555;
    text-transform: uppercase;
}

@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

.security-card {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #4caf50;
    padding: 8px; border-radius: 8px;
    width: 100%; min-height: 150px;
    cursor: pointer; transition: transform 0.1s;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}
.security-card:hover { transform: scale(1.05); border-color: #2e7d32; }

.security-card.disabled {
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: not-allowed;
    border-color: #ccc;
    background: #eee;
}

.security-shop-img {
    width: 60px; height: 60px;
    object-fit: contain;
    margin-bottom: 5px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

.security-name { font-size: 0.75em; font-weight: 900; color: #14532d; text-align: center; margin-bottom: 2px; }
.security-duration { font-size: 0.7em; font-weight: 700; color: #15803d; background: #fff; padding: 1px 4px; border-radius: 4px; margin-bottom: 4px; }
.security-price { 
    background: #fff; padding: 3px 10px; border-radius: 12px; 
    border: 1px solid #86efac; font-size: 0.75em; font-weight: 900; color: #166534; 
}

/* =========================================
   CUSTOM COIN ICONS (SVG)
   ========================================= */
.icon-wallet {
    width: auto;        
    height: auto;
    margin-right: 0; 
    vertical-align: middle;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); 
    transition: transform 0.2s;
    transform: translateY(-2px); 
}

.icon-wallet:active {
    transform: scale(1.2); 
}

.icon-price {
    width: 18px;        
    height: 18px;
    vertical-align: text-bottom; 
    margin-right: 2px;
    display: inline-block;
}

/* =========================================
   RARE ORDER STYLES (NEW EFFECTS)
   ========================================= */

/* 1. The Card Container - Gold & Glowing */
.order-card.rare-order {
    border: 2px solid #FFD700 !important; /* Gold Border */
    background: linear-gradient(180deg, #fff 0%, #fffbe6 100%); /* Slight yellow tint */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
    animation: rareGlow 2s infinite alternate; /* Pulsing Effect */
    position: relative;
    overflow: hidden;
}

/* 2. The "RARE ORDER" Text Label */
.rare-order-label {
    font-size: 0.65em;
    font-weight: 900;
    color: #B8860B; /* Dark Gold Text */
    text-transform: uppercase;
    text-align: center;
    display: block;
    margin-bottom: 4px;
    background: rgba(255, 215, 0, 0.15);
    padding: 2px;
    border-radius: 4px;
    border: 1px solid rgba(184, 134, 11, 0.3);
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

/* 3. Pulsing Animation Keyframes */
@keyframes rareGlow {
    0% {
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
        border-color: #FFD700;
    }
    100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
        border-color: #FFA500; /* Orange-Gold pulse */
    }
}

/* 4. Slight shine effect on the button for rare orders */
.order-card.rare-order .fulfill-order-btn {
    background: linear-gradient(180deg, #fbc02d 0%, #f57f17 100%);
    border: 1px solid #f9a825;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

/* =========================================
   NEWS TICKER DESIGN & ANIMATION
   ========================================= */

#global-announcement-marquee {
    /* --- RUSTIC WOOD DESIGN --- */
    background-color: #5D4037;  /* Wood Brown Background */
    border: 4px solid #3E2723;  /* Darker Wood Border */
    color: #FFF8E1;             /* Cream Text Color */
    
    /* --- BEHAVIOR --- */
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;       /* Para hindi harang sa click */
    overflow: hidden;           /* Tago ang lampas na text */
}

#announcement-text {
    /* --- TEXT STYLE --- */
    color: inherit;             /* Gamitin ang kulay ng parent (#FFF8E1) */
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 1px;
    
    /* --- SCROLLING SETUP --- */
    white-space: nowrap;
    display: inline-block;
    padding-left: 100%;         /* Simula sa labas ng kanan */
}

/* --- ANIMATION KEYFRAMES --- */
.announcement-scrolling {
    animation: scroll-left 25s linear forwards; 
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-200%); }
}

/* --- FRIEND STATUS DOTS --- */
.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    border: 1px solid #fff; /* White border para lumutang */
}
.status-online { background-color: #42b72a; } /* Green */
.status-offline { background-color: #ccc; border: 2px solid #999; } /* Gray Hollow */

/* Friend Input in Modal */
.friend-input-group {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
    padding: 5px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

/* --- NOTIFICATION BADGE --- */
.nav-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff3b30; /* Bright Red */
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: none; /* Hidden by default */
    z-index: 10;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}


/* =========================================
   NEW LAYERED BOARD STYLE (Fixed & Robust)
   ========================================= */

.board-container {
    position: relative; /* Ito ang anchor para sa overlay */
    width: 98%;
    max-width: 600px;
    margin: 10px auto;
    /* Tinanggal na natin ang background-image dito para di mag-conflict */
}

/* LAYER 1: BOARD IMAGE */
.board-bg-image {
    width: 100%;       /* Laging puno ang lapad */
    height: auto;      /* Automatic ang height base sa lapad */
    display: block;    /* Para walang space sa baba */
    min-height: 140px; /* Safety height */
    border-radius: 10px; /* Optional: kung gusto mo rounded corners */
}

/* LAYER 2: OVERLAY (Dito nakapatong ang lahat) */
.board-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

/* 1. AVATAR - White Box with Brown Border */
.board-avatar {
    position: absolute;
    top: 20%;        /* Percent para responsive */
    left: 12%;
    width: 20%;      /* Responsive size */
    max-width: 85px;
    aspect-ratio: 1 / 1; /* Laging square */
    
    background-color: #fff;
    border: 3px solid #5d4037; /* Thick Brown Border */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.board-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* 2. NAME - Malaki at Bold */
.board-name { 
    position: absolute;
    top: 25%;
    left: 34%; /* Nakatabi sa Avatar */
    right: 5%; /* Hanggang dulo */
    
    font-size: clamp(20px, 6vw, 28px) !important; /* Responsive font size */
    font-weight: 900; 
    color: #3e2723; /* Dark Brown */
    text-shadow: 0px 1px 0 rgba(255,255,255,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* 3. NOTE - Maliit sa ilalim ng Name */
.board-note { 
    position: absolute;
    top: 45%;
    left: 34%;
    right: 5%;
    
    font-size: clamp(12px, 3vw, 16px);
    color: #5d4037; 
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* 4. STATS - Sa baba, kaliwa */
.board-stats { 
    position: absolute;
    bottom: 22%;
    left: 13%;
    
    font-size: clamp(10px, 3vw, 14px);
    font-weight: 900; 
    display: flex;
    align-items: center;
    gap: 8px;
}
.stat-lvl { color: #d32f2f; /* Red */ text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
.stat-heart { color: #5d4037; /* Brown */ }

/* 5. EDIT BUTTON - Sa baba, kanan */
.btn-edit {
    position: absolute;
    bottom: 25%;
    right: 14%;
    
    background-color: rgba(93, 64, 55, 0.9); /* Brown transparent */
    color: #FFECB3;
    border: 2px solid #3E2723; 
    padding: 4px 12px;
    border-radius: 15px; /* Pill shape gaya sa screenshot */
    font-size: 11px; 
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}

/* FORM - Centered */
.pop-edit-form {
    display: none; 
    position: absolute;
    bottom: -10px; 
    left: 50%; 
    transform: translateX(-40%);
    width: 90%; 
    z-index: 100;
}
.pop-input { width: 70%; padding: 4px; border: 2px solid #5d4037; border-radius: 5px; }
.btn-post { padding: 4px 10px; background-color: #2E7D32; color: white; border-radius: 5px; border: none; font-size: 12px; }

/* 2. IBABA ANG LAYER NG BOARD AT GUARDIAN */
.board-container {
    z-index: 5 !important; /* Mas mababa sa Header (1000) */
    position: relative;
    margin-top: 10px; /* Space from top */
}

#security-slot-container {
    z-index: 5 !important; /* Mas mababa sa Header */
    position: relative;
}

/* 3. AYUSIN ANG SCROLLING (Space sa taas at baba) */
#game-container {
    padding-top: 80px !important; /* Space para di matakpan ng Header ang una */
    padding-bottom: 200px !important; /* Malaking space sa baba para ma-scroll hanggang dulo */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scroll sa mobile */
}

/* 4. LIITAN ANG MGA PLOTS (Para magkasya sa screen) */
#farm-grid, #animal-plot-grid {
    display: grid;
    /* 5 Columns, pero mas dikit-dikit */
    grid-template-columns: repeat(5, 1fr) !important; 
    gap: 3px !important; /* Bawasan ang awang */
    width: 98% !important; /* Gamitin halos buong lapad */
    max-width: 450px !important; /* Wag masyadong malapad sa desktop */
    margin: 0 auto;
}

.plot, .animal-plot {
    /* Tanggalin ang fixed height, hayaang maging square base sa width */
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* Laging square */
    min-height: 0 !important;
}

/* Ayusin ang icon sa loob ng plot para sumunod sa liit */
.plot img, .animal-plot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 5. AYUSIN ANG ANIMAL SECTION OVERLAP */
#animal-area {
    margin-top: 10px;
    padding-bottom: 50px;
}