/* style.css ফাইলের সম্পূর্ণ কোড (REPLACE ALL OF style.css) */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Noto Serif Bengali', serif;
    background: linear-gradient(to bottom, #7cd1f9 0%, #bce6ff 60%, #52be80 100%);
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden; /* ব্রাউজারের মেইন স্ক্রোল বন্ধ করা হয়েছে */
    height: 100vh;
    width: 100vw;
}

/* ইংরেজি সংখ্যার বিশেষ ফন্ট */
.number-font {
    font-family: 'DynaPuff', system-ui;
}

/* স্মুথ ট্রানজিশন */
.box-transition {
    transition: all 0.3s ease;
}

/* মাউস হোভার করলে বক্সের বর্ডার কালার পরিবর্তন */
.box-hover-effect:hover {
    border-color: #10b981;
    background-color: #f0fdf4;
    transform: scale(1.02);
}

/* ================= Floating Clouds (স্ক্রিনের সাথে লক করা মেঘমালা) ================= */
.cloud-bg {
    position: fixed;
    /* absolute থেকে পরিবর্তন করে fixed করা হয়েছে */
    top: 8%;
    left: -150px;
    width: 120px;
    height: 40px;
    background: #fff;
    border-radius: 20px;
    opacity: 0.85;
    animation: drift 28s linear infinite;
    z-index: 1;
}

.cloud-bg::before,
.cloud-bg::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%;
}

.cloud-bg::before {
    width: 50px;
    height: 50px;
    top: -20px;
    left: 15px;
}

.cloud-bg::after {
    width: 70px;
    height: 70px;
    top: -35px;
    right: 15px;
}

.cloud-2 {
    top: 22%;
    animation-delay: 6s;
    animation-duration: 38s;
    transform: scale(0.8);
}

.cloud-3 {
    top: 35%;
    animation-delay: 14s;
    animation-duration: 22s;
    transform: scale(1.15);
}

@keyframes drift {
    0% {
        left: -150px;
    }

    100% {
        left: 100%;
    }
}

/* ================= Rolling Green Hills (নিখুঁতভাবে লক করা পাহাড়) ================= */
.hill-back {
    position: fixed;
    /* স্ক্রিনের সাথে ফিক্সড */
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 140vw;
    /* স্ক্রিনের চওড়ার চেয়ে বেশি রাখা হয়েছে যেন ডানে-বামে ফাঁকা না থাকে */
    height: 150px;
    background: #27ae60;
    border-radius: 50% 50% 0 0;
    z-index: 2;
}

.hill-front {
    position: fixed;
    /* স্ক্রিনের সাথে ফিক্সড */
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 150vw;
    height: 160px;
    background: #2ece78;
    border-radius: 50% 50% 0 0;
    z-index: 2;
}

/* গ্লাস মরফিজম সিএসএস স্টাইল (ADD TO THE END OF style.css) */

/* লাইট মোড মেইন কার্ড এবং মোডালের জন্য গ্লাস স্টাইল */
.glass-card {
    background: rgba(255, 255, 255, 0.8) !important; /* কুয়াশাচ্ছন্ন সাদা কাঁচ */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.15);
}

/* ডাইনামিক নোটিফিকেশন পজিশনিং সিএসএস (REPLACE TOAST STYLES IN style.css) */

.toast-notification {
    position: fixed;
    background: rgba(15, 23, 42, 0.8) !important; /* কুয়াশাচ্ছন্ন ডার্ক কাঁচ */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff;
    padding: 12px 18px;
    border-radius: 16px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 80;
    width: 290px;
    transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* ০.৩ সেকেন্ড স্নাপি স্লাইড */
}

/* পেজ ২ (উইথড্র পেজ) এর জন্য টপ-লেফট পজিশন */
.toast-top-left {
    top: 20px;
    left: -350px;
    bottom: auto;
}
.toast-top-left.show {
    left: 20px;
}

/* পেজ ১ (গেম পেজ) এর জন্য বটম-লেফট পজিশন */
.toast-bottom-left {
    bottom: 20px;
    left: -350px;
    top: auto;
}
.toast-bottom-left.show {
    left: 20px;
}

.toast-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #10b981;
    /* সফলতার সবুজ চিহ্ন */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

/* গুগল মেটেরিয়াল আইকন কনফিগারেশন (ADD TO THE END OF style.css) */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 500,
  'GRAD' 0,
  'opsz' 24;
}