/* ========================================================= */
/* BASE & RESET */
/* ========================================================= */

/* 🛑 مکمل چوڑائی اور Horizontal Scroll کو ہٹانا */
html, body {
    overflow-x: hidden; 
    width: 100%;
    /* 🛑 عالمی طور پر Box Sizing کو Border-Box پر سیٹ کرنا */
    box-sizing: border-box;
}

*, *::before, *::after {
    /* یقینی بنانے کے لیے کہ ہر عنصر box-sizing استعمال کرے */
    box-sizing: inherit;
}

Body {
    font-family: Arial, sans-serif;
    background-color: #38761d; /* گہرے سبز رنگ کا بیک گراؤنڈ (گھاس) */
    color: #4e342e; /* گہرا بھورا ٹیکسٹ رنگ */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; 
    align-items: flex-start; 
    min-height: 100vh;
}


h2, h3 {
    color: #4e342e; /* گہرا بھورا عنوان */
    margin-top: 10px;
    text-shadow: 1px 1px 0 #fff; /* ہلکا شیڈو تاکہ لکڑی پر نمایاں ہو */
}

/* 🪵 بٹنوں کی نئی لکڑی کی تھیم */
button {
    background-color: #6d4c41; /* گہرا بھورا لکڑی کا رنگ */
    color: white;
    border: 3px solid #4e342e; /* لکڑی کے تختے کا بارڈر */
    padding: 10px 18px; /* تھوڑا زیادہ Padding */
    margin: 5px;
    border-radius: 8px; /* گول کونے */
    cursor: pointer;
    font-weight: bold;
    text-shadow: 1px 1px #333; /* ٹیکسٹ کو نمایاں کریں */
    box-shadow: 0 4px 0 #4e342e; /* 3D effect */
    transition: all 0.1s;
}

button:hover {
    background-color: #795548; /* ہلکا ہونے پر */
}

button:active {
    box-shadow: 0 1px 0 #4e342e; /* دبانے کا effect */
    transform: translateY(3px);
}

/* ========================================================= */
/* UI OVERLAY & HEADER BAR */
/* ========================================================= */

#ui-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.header-bar {
    background-color: #a9805d; /* ہلکا لکڑی کا رنگ */
    color: #4e342e;
    padding: 6px 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    box-sizing: border-box; 
    border-bottom: 4px solid #6d4c41; /* نچلا لکڑی کا بارڈر */
}

.header-bar .stat {
    display: flex;
    align-items: center;
    font-size: 1.0em;
    font-weight: bold;
    margin-right: 10px; 
    color: #fff; /* Stat ویلیوز کو سفید کریں تاکہ لکڑی پر نظر آئیں */
    text-shadow: 1px 1px #333;
}

.token-icon {
    width: 15px;
    height: 15px;
    margin-right: 4px;
    border-radius: 50%; 
    overflow: hidden; 
}
.reward-icon {
    width: 16px; 
    height: 16px;
}
/* Header Buttons کو لکڑی جیسا بنائیں */
#main-menu-btn, #play-music-btn {
    background-color: #a9805d; 
    border-color: #6d4c41;
    box-shadow: 0 4px 0 #6d4c41;
    padding: 4px 8px; 
}

#main-menu-btn:hover, #play-music-btn:hover {
    background-color: #795548;
}
#main-menu-btn:active, #play-music-btn:active {
    box-shadow: 0 1px 0 #6d4c41;
}

/* Selected Item Display */

#selected-item-display {
    position: absolute;
    top: 60px; 
    right: 10px; 
    background-color: #a9805d; /* لکڑی کا رنگ */
    border: 3px solid #6d4c41;
    border-radius: 10px;
    padding: 5px 10px;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
    text-align: center;
    cursor: pointer;
    text-shadow: 1px 1px #333;
    color: white; /* ٹیکسٹ کو سفید کریں */
}

#selected-item-display .item-icon {
    font-size: 2.2em;
    display: block;
    line-height: 1;
}

#selected-item-display .item-name {
    font-size: 0.7em; 
    font-weight: bold;
}

#selected-item-display .item-count {
    font-size: 0.9em;
    color: #ffeb3b; /* پیلا رنگ Coins کی طرح */
}

/* ========================================================= */
/* GAME SCREENS & CONTAINER (لکڑی کا بیک گراؤنڈ) */
/* ========================================================= */

#game-screens-container {
    margin-top: 60px; 
    width: 95%; /* زیادہ وڈتھ استعمال کریں */
    padding: 15px; 
    background-color: #a9805d; /* ہلکا لکڑی کا رنگ */
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    min-height: 70vh;
    border: 5px solid #6d4c41; /* گہرا لکڑی کا بارڈر */
}

.game-screen {
    padding: 10px;
    background-color: #f5f7fa; /* سکرین کے اندرونی حصے کو ہلکا رکھیں */
    border-radius: 8px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1);
}

/* ========================================================= */
/* FARM / PLOT GRID (مٹی/بھورا بیک گراؤنڈ) */
/* ========================================================= */

#farm-plots-container {
    display: grid;
    gap: var(--plot-gap, 5px); 
    padding: 5px; 
    background-color: #6d4c41; /* گہرا مٹی کا رنگ */
    border-radius: 5px;
    margin: 20px auto;
    width: fit-content; 
    justify-content: center; 
    max-width: 100%; 
    border: 5px solid #4e342e;
}

.plot {
    width: var(--plot-size, 55px); 
    height: var(--plot-size, 55px); 
    
    background-color: #4e342e; /* گہری مٹی */
    border: 5px solid #333;
    border-radius: 5px;
    
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    
    font-size: 1.9em; 
    cursor: pointer;
    transition: background-color 0.1s;
}

.plot:hover {
    background-color: #5d4037;
}

.plot.ready-to-harvest {
    background-color: #ffeb3b; 
    border-color: #fbc02d;
}
/* ========================================================= */
/* FARM / PLOT GRID (Text Color Fix) */
/* ========================================================= */

.plot {
    /* (آپ کا موجودہ .plot کوڈ یہاں ہے، جیسے background-color وغیرہ) */
    
    color: white; /* 🛑 تمام پلاٹ مواد کا رنگ سفید کریں */
    text-shadow: 1px 1px 1px #333; /* گہرا شیڈو شامل کریں تاکہ یہ مٹی کے رنگ پر نمایاں ہو */
}

/* یہ یقینی بناتا ہے کہ چھوٹے سٹیٹس ٹیکسٹس (جیسے ٹائمر، یا "Needs Water") سفید ہی رہیں */
.plot .plot-status-text {
    color: white; /* 🛑 Status Text کو سفید کریں */
    font-size: 0.09em; 
    font-weight: bold;
    margin-top: 2px; 
}

/* ========================================================= */
/* SHOP & INVENTORY ITEMS LISTS */
/* ========================================================= */

.items-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    border: 3px solid #a9805d; /* لکڑی کا بارڈر */
    border-radius: 5px;
    background-color: #fff; /* اندرونی پس منظر سفید رکھیں */
    justify-content: center; 
}

/* 🛑 FIX: inventory-item کو بڑا اور Flexible کنٹینر بنائیں */
.shop-item, .inventory-item {
    background-color: #f7f7f7;
    border: 2px solid #c9c9c9;
    border-radius: 8px;
    padding: 8px;
    width: 120px; 
    
    /* FIX: display: flex شامل کریں تاکہ مواد قطار (Row) میں آئے */
    display: flex;
    /* FIX: مواد کو عمودی طور پر درمیان میں الائن کریں */
    align-items: center; 
    /* FIX: اگر ضرورت ہو تو wrap کریں */
    flex-wrap: wrap;
    /* FIX: مواد کے درمیان جگہ بنائیں */
    justify-content: flex-start; 
    
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: border-color 0.2s;
    
    /* text-align: center کو ہٹا دیا گیا ہے کیونکہ flex استعمال ہو رہا ہے */
}

.shop-item:hover, .inventory-item:hover {
    border-color:   #a9805d; 
}

.inventory-item.selected {
    border-color: #007bff; 
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* 🛑 FIX: item-icon کو اب block کی بجائے flex میں لایا جائے گا */
.item-icon {
    /* اگر یہ ایموجی ہے تو سائز بڑا رکھیں */
    font-size: 1.5em; 
    
    /* FIX: آئیکن کے بعد نام اور مقدار کے لیے مناسب جگہ دیں */
    margin-right: 8px;
    
    /* display: block کو ہٹا دیا گیا ہے */
}

/* 🖼️ Stone اور Wood کی تصاویر کے لیے پچھلا فکس یہاں ضروری ہے */
.inventory-item-icon-img {
    width: 30px; 
    height: 30px;
    object-fit: contain; 
    vertical-align: middle; 
    margin-right: 8px; /* icon-name سے فاصلہ */
}

/* 💡 نئے فکس کے بعد، آپ کے inventory-item کا HTML ڈھانچہ بھی یہ ہونا چاہیے:
   <div class="inventory-item">
       <span class="item-icon">...</span>  // یا <img class="inventory-item-icon-img">
       <span class="item-name">Stone</span>
       <span class="item-count">x2</span>
   </div>
*/


/* ========================================================= */
/* MODALS (Confirmation & Menu) - 50% Smaller */
/* ========================================================= */

/* Confirmation Modal (تصدیقی Pop-up) */
.modal-overlay { 
    display: none; 
    position: fixed;
    z-index: 5000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    justify-content: center;
    align-items: center;
}

#confirmation-modal .modal-content {
    background: #fff;
    /* 20px تھا، اب 10px */
    padding: 19px; 
    /* 10px تھا، اب 5px */
    border-radius: 9px; 
    /* 350px تھا، اب 175px */
    max-width: 275px; 
    text-align: center;
    /* 5px تھا، اب 2.5px */
    border: 9.5px solid #6d4c41; 
}

.modal-buttons {
    /* 15px تھا، اب 7.5px */
    margin-top: 15.5px;
}

.modal-buttons button {
    /* 10px 20px تھا، اب 5px 10px */
    padding: 5px 10px;
    /* 1em تھا، اب 0.8em یا 0.9em (تقریباً 50% چھوٹا) */
    font-size: 0.9em; 
}

.btn-success {
    background-color: #4CAF50;
    /* 4px تھا، اب 2px */
    box-shadow: 0 2px 0 #388e3c;
}

.btn-danger {
    background-color: #f44336;
    /* 4px تھا، اب 2px */
    box-shadow: 0 2px 0 #d32f2f;
}

/* MENU MODAL */
#menu-modal .modal {
    z-index: 4000; 
}

#menu-modal .modal-content {
    background-color: #a9805d; 
    /* 30px 20px تھا، اب 15px 10px */
    padding: 0px 50px; 
    /* 15px تھا، اب 7.5px */
    border-radius: 7.5px;
    
    /* Box Shadow کے سائز کو 50% کم کیا */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), inset 0 0 7.5px rgba(255, 255, 255, 0.4);
    
    text-align: center;
    /* 300px تھا، اب 150px */
    max-width: 300px; 
    /* 8px تھا، اب 4px */
    border: 4px solid #38761d; 
    position: relative;
    
    /* 🛑 اہم: اگر بٹن سکرین سے باہر نکلتے ہیں تو اسکرولنگ کی اجازت دیں */
    max-height: 95vh; 
    overflow-y: auto;
}

#menu-modal h3 {
    color: #fff;
    /* 25px تھا، اب 12.5px */
    margin-bottom: 12.5px;
    /* 1.5em تھا، اب 1.0em */
    font-size: 2.0em; 
}

/* Menu Buttons کو لکڑی کے تختوں کی شکل دینا (سائز کم کیا گیا) */
#menu-modal .modal-content button {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 90% چوڑائی استعمال کریں */
    width: 90%; 
    /* 10px تھا، اب 5px */
    margin: 5px auto;
    
    background-color: #6d4c41; 
    /* 3px تھا، اب 1.5px */
    border: 2.5px solid #4e342e;
    color: #fff;
    /* 12px 15px تھا، اب 6px 7.5px */
    padding: 8px 5.5px;
    /* 1.1em تھا، اب 0.8em */
    font-size: 1.0em; 
    font-weight: bold;
    /* 5px تھا، اب 2.5px */
    border-radius: 2.5px;
    
    /* 4px تھا، اب 2px */
    box-shadow: 0 2px 0 #4e342e; 
}

#menu-modal .modal-content button:hover {
    background-color: #795548;
}

#menu-modal .modal-content .close-btn {
    background-color: #e9573f;
    border-color: #a43a2c;
    box-shadow: 0 2px 0 #a43a2c;
}

/* =============================================== */
/* Quantity Modal - Professional Styles          */
/* =============================================== */

.professional-modal {
    background-color: #333; /* Darker background */
    color: #eee; /* Light text */
    border: 2px solid #555;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    padding: 25px;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.modal-header {
    font-size: 1.8em;
    color: #4CAF50; /* Green header */
    margin-bottom: 15px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

.modal-info {
    font-size: 1.1em;
    margin-bottom: 20px;
    color: #ccc;
}

.modal-input-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    gap: 8px; /* Space between elements */
}

.quantity-btn {
    background-color: #555;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    min-width: 40px; /* Ensure buttons have minimum width */
}

.quantity-btn:hover {
    background-color: #777;
    transform: translateY(-1px);
}

.control-btn { /* For + and - buttons */
    background-color: #4CAF50; /* Green for controls */
}

.control-btn:hover {
    background-color: #45a049;
}

.max-btn {
    background-color: #f44336; /* Red for MAX */
    padding: 10px 20px; /* Wider padding for MAX */
}

.max-btn:hover {
    background-color: #da190b;
}

.quantity-input-field {
    width: 80px; /* Fixed width */
    padding: 10px;
    font-size: 1.2em;
    text-align: center;
    border: 2px solid #555;
    border-radius: 6px;
    background-color: #444;
    color: #eee;
    outline: none;
    -moz-appearance: textfield; /* Hide arrows in Firefox */
}

.quantity-input-field::-webkit-outer-spin-button,
.quantity-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Hide arrows in Chrome/Safari */
    margin: 0;
}

.confirm-quantity-btn {
    background-color: #008CBA; /* Blue for confirm */
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 1.3em;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    width: calc(100% - 20px); /* Adjust width */
    margin-top: 15px;
}

.confirm-quantity-btn:hover {
    background-color: #007bb5;
    transform: translateY(-2px);
}

.close-button {
    color: #bbb; /* Lighter close button */
}
.close-button:hover {
    color: white;
}

/* ========================================================= */
/* MEDIA QUERY FOR SMALL SCREENS */
/* ========================================================= */

@media (max-width: 400px) {
    
    #game-screens-container {
        padding: 5px; 
        width: 98%; 
    }
    
    #selected-item-display {
        top: 85px;
        font-size: 0.7em;
    }

    #farm-plots-container {
        gap: var(--plot-gap, 5px); 
    }
    
    .plot {
        width: 55px; 
        height: 55px; 
    }
}
/* styles.css میں نیچے کی طرف یہ شامل کریں */

.btn-reward {
    background-color: #ffc107; /* پیلا رنگ */
    color: #333; /* گہرا ٹیکسٹ */
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, transform 0.1s;
    margin-top: 10px; /* اگر دوسرے بٹن سے الگ کرنا ہو */
}

.btn-reward:hover {
    background-color: #e0b433; /* ہوور پر تھوڑا گہرا */
    transform: translateY(-1px); /* تھوڑا اوپر اٹھنا */
}

.btn-reward:active {
    transform: translateY(1px); /* کلک پر تھوڑا نیچے دبنا */
}
/* styles.css میں موجودہ .btn-discord کوڈ کو اس سے بدلیں */

.btn-discord {
    /* Discord بٹن کو btn-reward جیسا بنانے کے لیے بنیادی خصوصیات سیٹ کریں */
    background-color: #ffc107; /* پیلا رنگ (btn-reward جیسا) */
    color: #333; /* گہرا ٹیکسٹ */
    border: none;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, transform 0.1s;
    margin-top: 10px;
    
    /* A tag کے لیے ضروری تاکہ یہ بٹن جیسا دکھے */
    text-decoration: none; 
    display: block; 
    text-align: center;
}

.btn-discord:hover {
    background-color: #e0b433; /* ہوور پر تھوڑا گہرا (btn-reward جیسا) */
    transform: translateY(-1px);
}

.btn-discord:active {
    transform: translateY(1px); /* کلک پر تھوڑا نیچے دبنا (btn-reward جیسا) */
}
/* styles.css - انرجی بار کا سٹائل */

.energy-stat {
    display: flex;
    align-items: center;
    background-color: #4CAF50; /* سبز رنگ */
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    margin-left: 10px;
    font-weight: bold;
}

.energy-bar-container {
    width: 60px; /* بار کی چوڑائی */
    height: 8px;
    background-color: #333;
    border-radius: 4px;
    margin-left: 5px;
    overflow: hidden;
}

.energy-bar {
    height: 100%;
    width: 100%; /* شروع میں پوری چوڑائی */
    background-color: #e6b800; /* پیلا رنگ */
    transition: width 0.3s ease-out; /* سموتھ ٹرانزیشن */
}

/* انرجی ڈسپلے کے لیے Text رنگ کو سفید رکھیں تاکہ بیک گراؤنڈ پر نمایاں ہو */
.energy-stat span {
    color: white;
}
/* ========================================================= */
/* 📋 Daily Task Board Screen Styles */
/* ========================================================= */

.game-screen {
    /* تمام اسکرینوں کے لیے بنیادی سیٹنگ */
    width: 100%;
    max-width: 900px; /* مرکزی مواد کے لیے زیادہ سے زیادہ چوڑائی */
    min-height: 100vh;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e3d8c1; /* ہلکا لکڑی کا پس منظر */
    border: 5px solid #6d4c41;
}

.screen-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #a1887f;
    margin-bottom: 20px;
}

.screen-title {
    flex-grow: 1;
    text-align: center;
    margin: 0;
}

/* ٹاسک لسٹ کنٹینر کو پوری چوڑائی میں پھیلائیں */
.tasks-list-container.full-page-list {
    width: 100%;
    max-height: 80vh; /* ویو پورٹ کی اونچائی سے تھوڑا کم */
    overflow-y: auto;
    padding: 10px;
}

.task-reset-info-container {
    width: 100%;
    padding: 10px;
    text-align: center;
}

/* پچھلے task-card سٹائلز کو برقرار رکھیں: .task-card, .req-met, .btn-deliver, وغیرہ */
/* آپ کے پچھلے .task-card اور دیگر سٹائلز یہاں بغیر کسی تبدیلی کے کام کریں گے۔ */
/* ========================================================= */
/* 📋 Daily Task Board Screen & Layout */
/* ========================================================= */

/* task-board-screen کے لیے مخصوص ہیڈر اور لے آؤٹ */
#task-board-screen {
    /* flex display یہاں موجود رہنا چاہیے تاکہ یہ game-screen کی طرح کام کرے */
    flex-direction: column; 
    align-items: center;
}

.tasks-list-container.full-page-list {
    width: 100%;
    /* 🛑 اہم FIX: GRID LAYOUT یہاں لاگو کریں */
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* ہر کارڈ کے لیے 280px کم از کم چوڑائی */
    gap: 20px; /* کارڈز کے درمیان فاصلہ */
    max-height: 500vh; 
    overflow-y: auto;
    padding: 10px;
    margin-top: 20px;
}

/* ========================================================= */
/* 📦 Task Card Styles (Shop Item Card کی طرح ڈیزائن) */
/* ========================================================= */

.task-card {
    background-color: #f7f7f7; /* ہلکا پس منظر */
    border: 3px solid #6d4c41; /* لکڑی جیسا موٹا بارڈر */
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
    display: flex; /* مواد کو عمودی طور پر ترتیب دینے کے لیے */
    flex-direction: column;
    justify-content: space-between; /* مواد اور بٹن کو الگ کرنے کے لیے */
}

.task-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}

.task-card h4 {
    margin-top: 0;
    font-size: 16px;
    color: #4e342e;
    min-height: 20px; /* ٹائٹل کے لیے مستقل جگہ */
}

/* مکمل ٹاسک کا سٹائل */
.task-complete {
    background-color: #d4edda; /* ہلکا سبز */
    border-color: #28a745;
    opacity: 0.7;
}

.task-complete h4 {
    text-decoration: line-through;
    color: #28a745;
}

/* ٹاسک مکمل کرنے کے لیے تیار ہونے پر کارڈ کا سٹائل */
.task-ready {
    border-color: #ffc107; /* نارنگی/پیلا بارڈر */
    background-color: #fff8e1;
}

/* ضروریات کا ڈسپلے */
.requirements {
    font-size: 12px;
    margin: 1px 0;
    padding: 5px;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
}

.req-met {
    color: #155724; /* گہرا سبز */
}

.req-unmet {
    color: #721c24; /* گہرا سرخ */
    font-weight: bold;
}

.reward-section {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 2px solid #eee;
}

.reward-text {
    font-size: 18px;
    font-weight: bold;
    color: #4e342e; 
    display: block; /* انعام کو بٹن کے اوپر ایک لائن پر لائیں */
    margin-bottom: 10px;
}
/* ========================================================= */
/* 🌳 Tree Screen Styles - FINAL OPTIMIZED LAYOUT */
/* ========================================================= */

#trees-screen {
    /* Trees Screen خود game-screen کلاس میں موجود ہے */
    display: flex; 
    flex-direction: column;
    /* 🛑 FIX: تمام اندرونی مواد کو افقی طور پر مرکز میں لائیں */
    align-items: center; 
    width: 100%; 
    padding: 20px 0; /* دائیں بائیں پیڈنگ ہٹا کر اسے گرڈ کے لیے محفوظ رکھیں */
}

#trees-screen .screen-header {
    margin-bottom: 15px;
    /* ہیڈر کو کنٹینر کی پوری چوڑائی استعمال کرنے پر مجبور کریں */
    width: 95%; 
    padding: 0 10px; /* ہیڈر کو سائیڈ پیڈنگ دیں */
}

.tree-grid {
    display: grid;
    /* 🛑 FIX: دو برابر کالموں کا مستقل لے آؤٹ */
    grid-template-columns: 1fr 1fr; 
    gap: 15px; /* کارڈز کے درمیان فاصلہ */
    padding: 10px;
    
    /* 🛑 FIX: چوڑائی بڑھا کر 98% کریں تاکہ کنٹینر کے اندر زیادہ جگہ لے */
    width: 98%; 
    max-width: 650px; /* بہت بڑی سکرینوں کے لیے زیادہ سے زیادہ چوڑائی */
    /* گرڈ کو کنٹینر کے اندر مرکز میں لائیں */
    margin: 10px auto; 
    justify-content: center;
}

.tree-card {
    background-color: #e8f5e9;
    border: 3px solid #388e3c;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s, box-shadow 0.1s;
    /* 🛑 Height کو ایڈجسٹ کیا تاکہ دو کالمز موبائل پر مناسب لگیں */
    height: 220px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tree-card:hover:not(.chopped):not(.growing) {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

.tree-card.chopped {
    background-color: #ffebee; 
    border-color: #d32f2f;
    opacity: 0.7;
    cursor: default;
}

.tree-card.growing {
    background-color: #fffde7;
    border-color: #fdd835;
    opacity: 0.8;
    cursor: default;
}

/* 🛑 ٹری آئیکن سائز */
.tree-icon {
    font-size: 55px; 
    line-height: 1;
    margin: 10px auto;
}

.tree-status-text {
    font-weight: bold;
    margin-bottom: 10px;
    color: #4CAF50;
}

/* Upgrade Button Container (Screen Footer) */
#trees-screen .screen-footer {
    /* 🛑 FIX: چوڑائی کو Tree Grid سے مماثل بنائیں اور مرکز میں رکھیں */
    width: 95%; 
    max-width: 650px;
    margin: 20px auto 0;
    text-align: center;
    padding-top: 10px;
}

.btn-upgrade-trees {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
}
/* =================================== */
/* ⛏️ MINING SCREEN STYLES (Fixed for 2 Cards) */
/* =================================== */

/* پتھروں کی لسٹ کا کنٹینر */
.resource-list-container {
    display: flex;
    flex-wrap: wrap; /* تاکہ کارڈز اگلی لائن میں جا سکیں */
    gap: 10px;       /* کارڈز کے درمیان فاصلہ */
    padding: 10px;
    justify-content: center; /* کارڈز کو درمیان میں رکھنے کے لیے */
}

/* انفرادی پتھر کا کارڈ - ایک لائن میں دو کے لیے */
.rock-card {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    padding: 10px;
    border: 2px solid #5d4037; 
    border-radius: 15px;
    background-color: #f5f5f5; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
    transition: transform 0.2s;
    /* 🛑 اہم تبدیلی: چوڑائی 50% تاکہ ایک لائن میں دو آئیں */
    width: calc(50% - 15px); 
    min-width: 150px; /* موبائل پر بہت چھوٹا ہونے سے بچانے کے لیے */
    box-sizing: border-box;
}

.rock-card:hover {
    transform: translateY(-3px);
}

/* پتھر کی تصویر کا کنٹینر */
.rock-display {
    height: 120px; /* اونچائی تھوڑی کم کی تاکہ دو کارڈز سیٹ آ سکیں */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    overflow: hidden;
}

/* تصویر کا سائز */
.rock-img-icon {
    width: 100px;  
    height: 100px; 
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* پتھر کی معلومات */
.rock-info {
    width: 100%;
    background-color: #eeeeee;
    border-radius: 8px;
    padding: 5px 0;
    margin-bottom: 10px;
    border: 1px inset #ccc;
}

.rock-info h4 {
    margin: 0;
    color: #4e342e;
    font-size: 0.9rem; /* فونٹ تھوڑا چھوٹا کیا تاکہ فٹ آ سکے */
}

.status {
    font-size: 0.85em;
    color: #d32f2f; 
    font-weight: bold;
}

/* مائننگ بٹن */
.btn-mine {
    width: 100%;
    padding: 10px 5px;
    background-color: #795548; 
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    box-shadow: 0 4px #4b3621;
    transition: all 0.1s;
}

.btn-mine:active:not([disabled]) {
    box-shadow: 0 1px #4b3621;
    transform: translateY(3px);
}

.btn-mine[disabled] {
    background-color: #bdbdbd;
    box-shadow: 0 4px #9e9e9e;
}

/* اپ گریڈ کارڈ (نیچے والا حصہ) */
.upgrade-card {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border: 2px dashed #1976d2;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    margin: 20px auto;
    width: 90%; /* اسکرین کے مطابق ایڈجسٹ */
    max-width: 400px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}


/* =============================================== */
/* 🖼️ انوینٹری آئیکن کی تصویر کا سائز (Stone/Wood) */
/* =============================================== */

.inventory-item-icon-img {
    width: 30px; 
    height: 30px;
    object-fit: contain; 
    /* FIX 4: اسے عمودی طور پر درمیان میں رکھیں (اگر flex کام نہیں کر رہا) */
    vertical-align: middle; 
    
    /* FIX 5: نام سے فاصلہ پیدا کریں */
    margin-right: 10px; 
}

/* style.css میں یہ شامل کریں */

.rock-img-icon {
    width: 150px; /* Rock card کے اندر مناسب سائز */
    height: 150px;
    object-fit: contain;
}

/* ٹوٹے ہوئے پتھر کے آئیکن کو تھوڑا مختلف دکھانے کے لیے (اختیاری) */
.mined-rock-icon {
    opacity: 0.5; /* دھندلا دکھائیں */
}
/* =============================================== */
/* ⛏️ ٹوٹے ہوئے پتھر کو دھندلا دکھانے کا CSS */
/* =============================================== */

.rock-faded {
    opacity: 0.3; /* تصویر کو 30% اوپیک دکھائیں (یا 0.5 اگر آپ زیادہ واضح چاہتے ہیں) */
    filter: grayscale(100%); /* رنگین پتھر کو گرے سکیل میں بدل دیں (اختیاری) */
}
/* 1. مین کنٹینر (جس میں تمام کارڈز ہوں گے) */
#crafting-recipes-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* اسکرین کے مطابق کالمز بنائے گا */
    gap: 15px;
    padding: 10px;
    justify-items: center;
    width: 100%;
    box-sizing: border-box;
}

/* 1. کارڈ کے اندر تصویر والا ڈبہ */
.crafting-card .rock-display {
    width: 100% !important;
    height: 110px !important; /* فکسڈ اونچائی */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important; /* سب سے اہم: جو باہر نکلے اسے کاٹ دو */
    background: #f0f0f0 !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
}

/* 2. جوس کے گلاس، بنچ اور دیگر تصاویر کا سائز */
.crafting-card .rock-img-icon {
    width: auto !important;
    height: auto !important;
    max-width: 85% !important;  /* چوڑائی کو 85% تک محدود کریں */
    max-height: 85% !important; /* اونچائی کو 85% تک محدود کریں */
    object-fit: contain !important; /* تصویر کا تناسب درست رہے گا */
    display: block !important;
}

/* 3. ایموجی آئیکنز کے لیے (اگر تصویر نہ ہو) */
.crafting-card .item-emoji-icon {
    font-size: 3rem !important;
    line-height: 1 !important;
}

/* 4. کارڈ کا سائز اور ترتیب */
.crafting-card {
    width: 150px !important; 
    min-height: 300px !important;
    padding: 10px !important;
    box-sizing: border-box !important; /* پیڈنگ کو چوڑائی میں شامل کریں */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border-radius: 15px !important;
    border: 2px solid #a9805d !important;
    background: white !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}


/* 4. جوس اور فرنیچر کی تصاویر */
.crafting-card .rock-img-icon {
    max-width: 90%;          /* ڈبے کے اندر 90% تک پھیلے گی */
    max-height: 90%;
    object-fit: contain;     /* تصویر کا تناسب خراب نہیں ہوگا */
}

/* 5. میٹریریل لسٹ (Scrollable اگر زیادہ ہوں) */
.recipe-materials {
    width: 100%;
    background: #fff;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.recipe-materials span {
    font-size: 0.75rem !important;
    display: block;
    line-height: 1.2;
}

/* 6. پروگریس بار */
.progress-bar-container {
    width: 100% !important;
    height: 12px !important;
    background-color: #e0e0e0 !important;
    border-radius: 6px !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
    display: none; /* شروع میں چھپا ہوا */
}

.progress-fill {
    height: 100% !important;
    width: 0%; /* یہ JS سے بدلے گا */
    background: linear-gradient(90deg, #28a745, #5cd65c) !important;
    transition: width 0.1s linear !important;
}


/* 7. بٹن ہمیشہ نیچے رہے */
.crafting-card button {
    margin-top: auto;        /* کارڈ جتنا بھی بڑا ہو، بٹن نیچے رہے گا */
    width: 100%;
    padding: 8px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
}




/* =============================================== */
/* 📦 SEED SELECTION BAR (نیچے والا حصہ) */
/* =============================================== */

.selection-bar {
    background: #fff9c4;
    border: 2px dashed #fbc02d;
    border-radius: 12px;
    padding: 15px;
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.selection-bar h3 {
    width: 100%;
    margin-top: 0;
    font-size: 1em;
    color: #f57f17;
}

.seed-select-item {
    background: white;
    border: 2px solid #fff176;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    min-width: 70px;
    text-align: center;
    transition: all 0.2s;
}

.seed-select-item:hover {
    background: #fffde7;
    border-color: #fbc02d;
    transform: scale(1.05);
}

.seed-select-item p {
    margin: 5px 0 0;
    font-size: 0.75em;
    font-weight: bold;
}

/* ٹائمر ڈسپلے (اگر آپ وقت دکھانا چاہیں) */
.growth-timer {
    font-size: 0.7em;
    color: #666;
    background: #eee;
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 5px;
}
.items-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    margin-bottom: 20px;
}

/* ===============================================
   🛒 SHOP SCREEN & TAB SYSTEM STYLES
   =============================================== */

/* مین شاپ کنٹینر */
#shop-screen {
    padding: 10px;
    background-color: #fdf6e3; /* ہلکا کریمی رنگ */
    border-radius: 15px;
    color: #4a331a;
}

/* شاپ کا ہیڈر اور ٹائٹل */
.shop-header h2 {
    text-align: center;
    color: #d35400;
    margin-bottom: 15px;
    font-size: 1.5em;
    text-shadow: 1px 1px 0px #fff;
}

/* 🎫 ٹیب سوئچر (Buy/Sell Buttons) */
.shop-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 8px;
    background: #e3c193;
    border-radius: 12px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

.tab-btn {
    flex: 1;
    padding: 10px 5px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    background: #bd9a6e;
    color: #fff;
    transition: all 0.2s ease;
}

.tab-btn.active {
    background: #ffffff;
    color: #27ae60;
    box-shadow: 0 4px 0 #219150;
    transform: translateY(-2px);
}

/* 📦 شاپ گرڈ (ایک لائن میں دو کارڈز) */
.items-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns */
    gap: 12px;
    padding: 5px;
}

/* 🃏 انفرادی شاپ کارڈ */
.shop-item {
    background: #ffffff;
    border: 2px solid #e0d5c1;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.1s;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.shop-item:active {
    transform: scale(0.98);
}

/* 🖼️ آئیکن اور امیج */
.item-icon {
    font-size: 35px;
    margin-bottom: 8px;
    display: block;
}

.shop-item img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    margin-bottom: 8px;
}

/* 📝 نام اور تفصیلات */
.item-name {
    font-size: 14px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 4px;
    display: block;
}

.item-owned, .item-count {
    font-size: 11px;
    color: #7f8c8d;
    margin-bottom: 6px;
}

.item-price {
    font-size: 15px;
    font-weight: bold;
    color: #e67e22;
    margin-bottom: 8px;
}

/* 🟢 خرید و فروخت کے بٹن */
.buy-btn {
    width: 100%;
    padding: 8px 5px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    background: #2ecc71;
    color: white;
    font-size: 13px;
    box-shadow: 0 3px 0 #27ae60;
}

.buy-btn:active {
    box-shadow: none;
    transform: translateY(2px);
}

/* 🔵 سیل بٹن کا رنگ (اگر الگ رکھنا چاہیں) */
.sell-item .buy-btn {
    background: #3498db;
    box-shadow: 0 3px 0 #2980b9;
}

/* 📂 کیٹیگری ٹائٹلز */
.shop-category h3 {
    width: 100%;
    font-size: 1.1em;
    color: #8e44ad;
    margin: 15px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 2px dashed #dcdde1;
    text-align: left;
}

/* 📱 موبائل اسکرولنگ کے لیے */
.shop-content {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 5px;
}

.shop-content::-webkit-scrollbar {
    width: 5px;
}

.shop-content::-webkit-scrollbar-thumb {
    background: #d4a373;
    border-radius: 10px;
}.shop-item.sell-item {
    display: flex;
    flex-direction: column; /* آئیکن، نام اور بٹن کو ایک دوسرے کے نیچے رکھے گا */
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 10px;
}

/* =========================================
   🍎 FRUIT GARDEN UI STYLES
   ========================================= */

#fruit-garden-screen {
    padding: 20px;
    background-color: #f0fff0; /* ہلکا سبز پس منظر */
    border-radius: 15px;
    text-align: center;
}

#fruit-garden-screen h2 {
    color: #2e7d32;
    margin-bottom: 5px;
    font-size: 1.8rem;
}

#fruit-garden-screen p {
    color: #666;
    margin-bottom: 20px;
    font-style: italic;
}

/* 🌳 Plots Grid */
#fruit-garden-plots-container.plot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    justify-content: center;
    padding: 10px;
}

/* 🌲 Individual Fruit Plot/Tree Card */
.fruit-plot {
    background: #ffffff;
    border: 2px solid #a5d6a7;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.fruit-plot:hover {
    transform: translateY(-5px);
    border-color: #4caf50;
}

/* 🍎 Tree Display (Emoji or Image) */
/* تصاویر کو بڑا اور متناسب بنانے کے لیے */
.tree-main-img {
    width: 150px;         /* تصویر کی چوڑائی بڑھا دی گئی */
    height: 150px;        /* تصویر کی اونچائی بڑھا دی گئی */
    object-fit: contain; /* تصویر کھنچے گی نہیں */
    transition: transform 0.3s ease;
}

.tree-icon-display {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(200,240,200,0.5) 100%);
    border-radius: 50%;
    margin-bottom: 10px;
}

.fruit-plot:hover .tree-main-img {
    transform: scale(1.1); /* ہوور کرنے پر تصویر تھوڑی بڑی ہوگی */
}

.empty-plot-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    border: 2px dashed #4caf50;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
}


/* 📊 Progress Bar for Fruits */
.fruit-progress-container {
    width: 100%;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    margin: 10px 0;
    overflow: hidden;
}

.fruit-progress-fill {
    height: 100%;
    background: #ff9800; /* اورنج رنگ بڑھوتری کے لیے */
    width: 0%;
    transition: width 0.4s ease;
}

/* 🔘 Buttons */
.btn-harvest-fruit {
    background: #4caf50;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
    margin-top: 5px;
}

.btn-harvest-fruit:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* 🛠️ Upgrade Section */
.upgrade-section {
    margin-top: 30px;
    padding: 20px;
    background: #fff3e0;
    border: 2px dashed #ffb74d;
    border-radius: 12px;
}

.upgrade-card h3 {
    margin-top: 0;
    color: #e65100;
}

.btn-upgrade-garden {
    background: #e65100;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

.btn-upgrade-garden:hover {
    background: #bf360c;
}

/* 📱 Mobile Optimization */
@media (max-width: 480px) {
    #fruit-garden-plots-container.plot-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
.nft-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
    padding: 15px;
}

.nft-card {
    background: linear-gradient(145deg, #2c3e50, #000000);
    border: 2px solid #f1c40f; /* گولڈن بارڈر NFT کے لیے */
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    color: white;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3);
}

.nft-icon {
    font-size: 40px;
    margin-bottom: 5px;
}

.durability-bar {
    background: #444;
    height: 8px;
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
}

.durability-bar .fill {
    background: #27ae60;
    height: 100%;
    transition: width 0.3s;
}

.coming-soon {
    color: #888;
    font-style: italic;
    text-align: center;
    width: 100%;
}
/* --- Login & Sign-up Overlay --- */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* گہرا بیک گراؤنڈ تاکہ گیم پیچھے چھپ جائے */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000; /* سب سے اوپر رکھنے کے لیے */
    font-family: 'Arial', sans-serif;
}

.auth-container {
    background: #fdf5e6; /* پرانا کاغذ جیسا رنگ */
    width: 90%;
    max-width: 380px;
    padding: 30px;
    border-radius: 20px;
    border: 5px solid #8b4513; /* لکڑی جیسا رنگ */
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    text-align: center;
}

/* Tabs: Login vs Signup */
.auth-tabs {
    display: flex;
    margin-bottom: 25px;
    border-bottom: 2px solid #d2b48c;
}

.auth-tabs button {
    flex: 1;
    padding: 12px;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    color: #8b4513;
    transition: 0.3s;
}

.auth-tabs button.active {
    color: #2e8b57; /* سبز رنگ ایکٹو ٹیب کے لیے */
    border-bottom: 4px solid #2e8b57;
}

/* Form Styles */
.auth-form h2 {
    color: #5d4037;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.auth-form input {
    width: 100%;
    padding: 12px 15px;
    margin: 10px 0;
    border: 2px solid #d2b48c;
    border-radius: 10px;
    box-sizing: border-box; /* پیڈنگ کو چوڑائی کے اندر رکھنے کے لیے */
    font-size: 1rem;
    background: #fff;
}

.auth-form input:focus {
    border-color: #2e8b57;
    outline: none;
}

/* Login/Signup Button */
.btn-auth {
    width: 100%;
    padding: 15px;
    margin-top: 15px;
    background: #4caf50;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px #2d6a30;
    transition: 0.2s;
}

.btn-auth:hover {
    background: #45a049;
    transform: translateY(-2px);
}

.btn-auth:active {
    transform: translateY(2px);
    box-shadow: 0 2px #2d6a30;
}

.auth-footer {
    font-size: 0.85rem;
    color: #8b4513;
    margin-top: 20px;
    font-style: italic;
}

/* Logout Button (For Menu) */
.btn-danger {
    background: #e74c3c !important;
    color: white !important;
    border-radius: 8px;
    padding: 10px;
    margin-top: 10px;
    font-weight: bold;
}
.profile-popup {
    background: #fdf5e6 !important; /* کاغذ جیسا رنگ */
    border: 5px solid #8b4513 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    text-align: left !important;
    max-width: 320px !important;
}

.profile-info p {
    font-size: 1.1rem;
    color: #5d4037;
    margin: 15px 0;
    border-bottom: 1px dashed #d2b48c;
    padding-bottom: 5px;
}

.profile-info strong {
    color: #2e8b57; /* سبز رنگ */
}

.pass-dots {
    letter-spacing: 3px;
    font-weight: bold;
}
/* Level and XP Bar Design */
.level-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-right: 15px;
}

.level-badge {
    font-weight: bold;
    color: #ffd700; /* گولڈن رنگ */
    text-shadow: 1px 1px 2px #000;
    font-size: 14px;
    margin-bottom: 2px;
}

.xp-bar-container {
    width: 120px;
    height: 12px;
    background: #333;
    border: 2px solid #8b4513;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.xp-bar {
    width: 0%; /* یہ جاوا اسکرپٹ سے بڑھے گی */
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2ecc71); /* نیلا اور سبز مکس */
    transition: width 0.5s ease-in-out;
}

#xp-text {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 8px;
    color: white;
    font-weight: bold;
    top: 0;
    line-height: 10px;
    pointer-events: none;
}
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); display: flex; justify-content: center;
    align-items: center; z-index: 9999;
}
.level-up-card {
    background: linear-gradient(135deg, #f1c40f, #e67e22);
    padding: 30px; border-radius: 20px; text-align: center;
    box-shadow: 0 0 30px rgba(241, 196, 15, 0.5);
    border: 5px solid #fff; animation: popIn 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes popIn { 0% { transform: scale(0.5); } 100% { transform: scale(1); } }
.level-circle {
    width: 80px; height: 80px; background: #fff; border-radius: 50%;
    margin: 10px auto; display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-weight: bold; color: #e67e22;
}
.btn-claim {
    background: #2ecc71; color: white; border: none; padding: 10px 20px;
    border-radius: 10px; cursor: pointer; font-weight: bold; margin-top: 15px;
}