/* ==========================================================================
   ১. Variables, Reset & Base Layout
   ========================================================================== */
:root {
  /* The strictly requested 3-color palette */
  --light: #E2E8F0;
  --dark: #263147;
  --accent: #00BFAF;
  
  /* Shadow calculations derived from the dark color for consistency */
  --shadow-light: rgba(38, 49, 71, 0.1);
  --shadow-medium: rgba(38, 49, 71, 0.2);
  --shadow-heavy: rgba(38, 49, 71, 0.4);
}

* { 
  box-sizing: border-box; 
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, 'Noto Sans Bengali', sans-serif;
  background: var(--light);
  color: var(--dark);
  line-height: 1.5;
  min-height: 100vh;
  font-size: 12px;
}

/* ==========================================================================
   ২. Typography, Sections & Generic Helpers
   ========================================================================== */
.left-aligned { text-align: left; }
.info-text { text-align: center; font-size: 10px; color: var(--accent); margin-top: 4px; margin-bottom: -35px; }
.error-message { color: var(--dark); text-align: center; font-size: 13px; min-height: 18px; margin-bottom: -35px; margin-top: 1px; line-height: 1.3; padding: 2px 0; font-weight: bold; }

#how-to-play, #deposit-withdraw, #martingale, #fairness, #faq {
  color: var(--dark);
  font-size: 8px;
  line-height: 1.55;
}

#how-to-play h2, #deposit-withdraw h2, #martingale h2, #fairness h2, #faq h2 {
  color: var(--dark);
  font-weight: 600;
  margin-top: 0;
  margin-bottom: -10px;
  font-size: 0.7rem;
}

#faq .faq-item h3 { color: var(--dark); font-size: 0.7rem; margin: 18px 0 6px; }
#faq .faq-item p { color: var(--dark); margin: 0 0 8px; font-size: 0.5rem; }

#how-to-play a, #deposit-withdraw a, #martingale a, #fairness a, #faq a {
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
}
#how-to-play a:hover, #deposit-withdraw a:hover, #martingale a:hover, #fairness a:hover, #faq a:hover {
  color: var(--dark);
  text-decoration: underline;
}

/* ==========================================================================
   ৩. Floating Help Button
   ========================================================================== */
#helpBtn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  letter-spacing: .3px;
  color: var(--light);
  font-weight: 900;
  background: var(--dark);
  box-shadow: 0 4px 12px var(--shadow-heavy);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
#helpBtn:hover { 
  background: var(--accent); 
  color: var(--dark);
  border-color: var(--dark);
}
#helpBtn:active { transform: translateY(2px); }

#helpBtn .help-badge { 
  position: absolute;
  top: -6px; right: -6px;
  background: var(--accent); color: var(--dark);
  border-radius: 999px; padding: 2px 6px; font-size: 12px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; line-height: 1; border: 1px solid var(--dark);
}

#helpBtn .dot {
  width: 10px;
  height: 10px;
  background-color: #00ff00;
  border-radius: 50%;
  display: inline-block;
  animation: online-pulse 1.5s infinite;
}

@keyframes online-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
  70% { box-shadow: 0 0 0 7px rgba(0, 255, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
}

/* ==========================================================================
   ৪. Modals (Auth, Admin)
   ========================================================================== */
#authModal, #adminModal { position: fixed; inset: 0; background: var(--shadow-heavy); display: none; z-index: 10000; align-items: center; justify-content: center; padding: 1px; }
.auth-sheet { width: 100%; max-width: 360px; background: var(--light); border-radius: 14px; box-shadow: 0 10px 30px var(--shadow-heavy); overflow: hidden; border: 2px solid var(--dark); }
.auth-head { padding: 14px 16px; border-bottom: 2px solid var(--dark); font-weight: 700; background: var(--dark); color: var(--light); }
.auth-body { padding: 14px 16px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--dark); border-radius: 9px; padding: 10px 12px; font-weight: 700; cursor: pointer; }
.btn-google { background: var(--light); color: var(--dark); }
.btn-muted { background: var(--dark); color: var(--light); }
.hr { height: 1px; background: var(--dark); margin: 12px 0; opacity: 0.2; }

.admin-sheet { position: relative; width: 100%; max-width: 960px; height: 80vh; background: var(--light); border-radius: 14px; box-shadow: 0 10px 30px var(--shadow-heavy); display: flex; overflow: hidden; border: 2px solid var(--dark); }
.admin-close-btn { position: absolute; top: 10px; right: 10px; background: var(--accent); border: 1px solid var(--dark); border-radius: 5px; font-size: 24px; line-height: 1; color: var(--dark); cursor: pointer; z-index: 10; padding: 0 8px; transition: all 0.2s; }
.admin-close-btn:hover { background: var(--dark); color: var(--accent); }

.pane { height: 100%; overflow: auto; }
.pane.left { width: 280px; border-right: 2px solid var(--dark); background: var(--light); }
.pane.right { flex: 1; display: flex; flex-direction: column; }
.pane-header { padding: 1px 12px; border-bottom: 2px solid var(--dark); background: var(--dark); color: var(--light); display: flex; align-items: center; gap: 8px; }
.session-item { display: flex; flex-direction: column; gap: 6px; padding: -1px 12px; border-bottom: 1px solid var(--dark); }
.session-item:hover { background: var(--accent); color: var(--dark); }
.badge { background: var(--dark); color: var(--accent); font-weight: 700; font-size: 11px; border-radius: 999px; padding: 2px 8px; margin-left: auto; border: 1px solid var(--accent); }
.danger { color: var(--dark); font-weight: bold; }
.btn-red, .btn-soft { background: var(--accent); border: 1px solid var(--dark); border-radius: 8px; padding: 7px 12px; font-weight: 700; color: var(--dark); cursor: pointer; transition: all 0.2s; }
.btn-red:hover, .btn-soft:hover { background: var(--dark); color: var(--accent); }
.admin-footer { border-top: 2px solid var(--dark); background: var(--light); padding: 10px; display: flex; gap: 8px; justify-content: flex-end; }

/* ==========================================================================
   ৫. Game Components (PreGame, Ludo Area, Marquee, Inputs)
   ========================================================================== */
.input-group input { font-size: 14px; padding: 3px 0px; border-radius: 7px; border: 1px solid var(--dark); outline: none; background: var(--light); color: var(--dark); width: 70%; text-align: center; transition: border-color 0.2s; }
.input-group input:focus { border-color: var(--accent); box-shadow: 0 0 5px var(--accent); }

#preGameArea h2 { text-align: center; font-weight: bold; color: var(--dark); letter-spacing: 1px; font-size: 1.2rem; }

.send-btn { background: var(--accent); color: var(--dark); border: 2px solid var(--dark); padding: 15px 30px; font-size: 20px; font-weight: bold; border-radius: 12px; cursor: pointer; transition: all 0.25s; display: flex; align-items: center; gap: 10px; justify-content: center; width: 100%; }

.send-btn:hover { background: var(--dark); color: var(--accent); border-color: var(--accent); transform: translateY(-3px); }

.ludo-box { margin-top: 1px; background: var(--light); border-radius: 14px; border: 2px solid var(--dark); padding: 10px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.turn-title { color: var(--dark); font-size: 22px; font-weight: bold; margin-bottom: -13px; letter-spacing: 1px; }

.dice-turn-flex { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 95%; background: var(--light); border-radius: 1px; padding: 5px; border: 1px solid var(--dark); }
.dice-turn-player { flex: 1 1 auto; font-weight: bold; color: var(--dark); font-size: 1.15rem; text-align: center; background: transparent; }
.dice-face { font-size: 4rem; color: var(--accent); text-shadow: 1px 1px 0 var(--dark); }

#r-copy { background: var(--dark); color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; transition: all 0.2s; }
#r-copy:hover { background: var(--accent); color: var(--dark); }

.online-player { color: var(--dark) !important; font-weight: bold; border-bottom: 2px solid var(--accent); }
.online-dot, .waiting-dot { width: 12px; height: 12px; background-color: var(--accent); border: 1px solid var(--dark); border-radius: 50%; display: inline-block; margin-left: 6px; animation: pulse 1.2s infinite alternate; }
@keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.3); opacity: 0.6; } }

/* ==========================================================================
   ৬. Misc UI Components (Lightbox, Tweaks)
   ========================================================================== */
.lightbox-overlay { position: fixed; inset: 0; background: var(--shadow-heavy); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.admin-action-icons { background: var(--light); border: 2px solid var(--dark); border-radius: 8px; box-shadow: 0 4px 12px var(--shadow-heavy); }
.admin-action-icons button { color: var(--dark); }
.admin-action-icons button:hover { color: var(--accent); }

/* ==========================================================================
   ৭. Game Active State Modifiers
   ========================================================================== */
body.game-active .seo-intro,
body.game-active #how-to-play,
body.game-active #deposit-withdraw,
body.game-active #martingale,
body.game-active #fairness,
body.game-active #faq,
body.game-active footer,
body.game-active #chat_box_static,
body.game-active #helpBtn,
body.game-active #global-waiting-players-box,
body.game-active .pre-game-msg,
body.game-active .scroll-text-block
body.game-active #showProfileBtn {
  display: none !important;
}

/* রিয়েল খেলা শুরু হলে MY ACCOUNT বাটনটি হাইড হয়ে যাবে */
body.game-active #showProfileBtn {
    display: none !important;
}

/* ==========================================================================
   ৮. Global Responsive Media Queries
   ========================================================================== */
@media (max-width: 992px) {
  .admin-sheet { height: 90vh; }
}

@media (max-width: 768px) {
  .admin-sheet { flex-direction: column; height: 100vh; max-width: 100vw; border-radius: 0; border: none; margin: 0; }
  .pane.left { width: 100%; border-right: none; border-bottom: 2px solid var(--dark); max-height: 40vh; }
  
  /* SEO intro spacing fix */
  .seo-intro {
    margin-top: 8px !important; 
    margin-bottom: 2px !important;
  }
  .seo-intro h1 {
    margin-bottom: 0px !important; 
    line-height: 1.1 !important; 
  }
  .seo-intro p {
    line-height: 1.2 !important;
    margin-top: 2px !important;
  }
}

@media (max-width: 480px) {
  .dice-turn-flex { flex-direction: column; padding: 0px; margin: 0 auto !important; }
  .dice-face { font-size: 4rem; }
}

/* ==========================================================================
   ৯. Additional Utility & Animation Styles
   ========================================================================== */
#rollBtn {
  width: 45%;
  padding: 3px 0px;
  margin: 0 auto;
  background: #ffffff;
  border: 2px solid var(--dark);
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.25s;
}
@media (min-width: 640px) {
  #rollBtn {
    width: 202px;
    padding: 10px 20px;
    font-size: 1.1rem;
  }
}
@media (min-width: 1024px) {
  #rollBtn {
    width: 210px;
    padding: 12px 24px;
  }
}

#preGameMsg { text-align: center; color: var(--dark); }
#faq h2 { color: #00BFAF; }

.policy-heading {
  font-size: 18px !important;
  color: #00BFAF !important;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

.turn-animated {
  display: inline-block;
  animation: bounceName 1.5s ease-in-out infinite;
}
@keyframes bounceName {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

#chat_login_static.highlight-login-btn {
  animation: loginGlowPulse 0.9s ease-in-out 3;
  transition: all 0.2s ease;
}
@keyframes loginGlowPulse {
  0% { box-shadow: 0 0 0 0 #00BFAF; border-color: #00BFAF; transform: scale(1); }
  50% { box-shadow: 0 0 0 8px rgba(0, 191, 175, 0.4); border-color: #00BFAF; transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 #00BFAF; border-color: #00BFAF; transform: scale(1); }
}

.faq-item-card .faq-question span {
  transition: transform 0.2s;
}
.faq-item-card .faq-question[aria-expanded="true"] span {
  transform: rotate(180deg);
}
#msgList .faq-item-card {
  margin-bottom: 8px;
}

#public-demo-area,
#ludo-game {
    margin-top: 300px;   
}






/* Play With Deposit বক্সের সেটিং */
#preGameArea {
    width: 92%; /* মোবাইলে বক্সের দুই পাশে কিছুটা জায়গা (Space) রাখবে */
    max-width: 450px; /* ডেস্কটপে বক্সটি সর্বোচ্চ ৪৫০ পিক্সেল বড় হবে, এর বেশি নয় */
    margin: 20px auto; /* বক্সটিকে স্ক্রিনের ঠিক মাঝখানে (Center) রাখবে */
    padding: 20px;
    box-sizing: border-box; /* প্যাডিং যেন Width এর বাইরে চলে না যায় */
    display: flex;
    flex-direction: column;
    align-items: center; /* বক্সের ভেতরের উপাদানগুলোকে সেন্টারে রাখবে */
    justify-content: center;
}


/* =======================================================
   ১. ভেতরের আলগা গ্যাপগুলো রিসেট করা (Reset Margins)
   ======================================================= */
/* TURN লেখার ওপরের ৩০০ পিক্সেলের বিশাল গ্যাপ মুছে ফেলা হলো */
#public-demo-area,
#ludo-game {
    margin-top: 1px !important;
}
/* Play Now বাটনের নিচের ১৫ পিক্সেলের গ্যাপ মুছে ফেলা হলো */
#preGameArea {
    margin-bottom: 1px !important;
    margin-top: 20px !important;
}
.send-btn-center {
    margin-bottom: 1px !important;
}

/* =======================================================
   ২. মূল গেম বক্সের লজিক্যাল ডিজাইন (Perfect Wrapper)
   ======================================================= */
 /* দুইটি wrapper-এর জন্য শেয়ার করা স্টাইল */
.dice-game-wrapper {
    width: 100%;
    max-width: 345px;
    padding: 0px 15px; 
    margin-left: auto;
    margin-right: auto;
    
    /* ডিজাইন ও সৌন্দর্য */
    background: transparent;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(38, 49, 71, 0.5);
    border: 1px solid rgba(0, 191, 175, 0.2);
    box-sizing: border-box;

    /* স্মুথ অ্যানিমেশন */
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* ডেমো wrapper-এর জন্য আলাদা উচ্চতা ও মার্জিন */
.demo-wrapper {
    height: 575px; /* আপনার ডেমো বোর্ডের প্রয়োজন অনুযায়ী এই মান পরিবর্তন করুন */
    margin-top: 300px; 
    margin-bottom: -490px;
}

/* আসল গেমের wrapper-এর জন্য আলাদা উচ্চতা ও মার্জিন */
.real-wrapper {
    height: 490px; /* আসল ছোট বোর্ডের জন্য ৪৯০ পিক্সেল রাখা হয়েছে */
    margin-top: 300px; 
    margin-bottom: 20px;
}
/* =======================================================
   ৩. গ্লোয়িং অ্যানিমেশন (Hover & Touch Effect)
   ======================================================= */
/* কম্পিউটারে মাউস নিলে (:hover) এবং মোবাইলে টাচ করলে (:active) এই ডিজাইনটি কাজ করবে */

/* যখন গেম চলবে (game-active ক্লাস থাকবে), তখন গ্লোয়িং ইফেক্ট কাজ করবে না */
body.game-active .dice-game-wrapper:hover,
body.game-active .dice-game-wrapper:active {
    box-shadow: 0 10px 30px rgba(38, 49, 71, 0.5); /* ডিফল্ট শ্যাডো ফিরিয়ে আনা */
    border: 1px solid rgba(0, 191, 175, 0.2);     /* ডিফল্ট বর্ডার */
    transform: none;                              /* নড়াচড়া বন্ধ করা */
    cursor: default;                              /* মাউস কার্সর স্বাভাবিক রাখা */
}


.dice-game-wrapper:hover,
.dice-game-wrapper:active {
    /* শেডো পরিবর্তন হয়ে আপনার থিম কালারের (0, 191, 175) গ্লো বা আলো ছড়াবে */
    box-shadow: 0 12px 40px rgba(0, 191, 175, 0.5), 0 0 20px rgba(0, 191, 175, 0.3);
    
    /* বর্ডারটি আরও উজ্জ্বল হয়ে যাবে */
    border: 1px solid rgba(0, 191, 175, 0.8);
    
    /* বক্সটি খুব সামান্য (2 পিক্সেল) উপরের দিকে ভেসে উঠবে, যা রিয়েলিস্টিক ফিল দেবে */
    transform: translateY(-2px); 
}










/* =======================================================
   Input Field Styling (Accessibility & UX)
   ======================================================= */
.input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.input-label {
  font-weight: bold;
  color: var(--dark);
  font-size: 14px;
  text-align: center;
  display: block;
  width: 100%;
}

.input-field {
  font-size: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 2px solid var(--dark);
  outline: none;
  background: var(--light);
  color: var(--dark);
  width: 100%;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.input-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 191, 175, 0.3);
}

.input-field::placeholder {
  color: var(--dark);
  opacity: 0.6;
  font-size: 14px;
}

/* মোবাইল ডিভাইসের জন্য স্পেসিফিক */
@media (max-width: 480px) {
  .input-group {
    max-width: 100%;
    padding: 0 10px;
  }
  .input-field {
    font-size: 14px;
    padding: 8px 10px;
  }
  .input-label {
    font-size: 13px;
  }
}





/* Input Error State */
.input-field.input-error {
  border-color: #d32f2f;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.3);
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}








/* =======================================================
   3D 'PLAY NOW' Button Style (Modern & Technical)
   ======================================================= */
#playNowBtn {
    /* Base Size & Positioning (আপনার আগের সাইজ) */
    width: 100%;
    max-width: 140px;
    margin: 15px auto;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    /* Modern Technical Colors & Shape */
    background: #00BFAF; /* টেকনিক্যাল সায়ান কালার */
    color: #FFFFFF; /* সাদা টেক্সট */
    font-size: 15px; 
    font-weight: 900; 
    letter-spacing: 0.5px;
    border-radius: 40px; 
    border: 2px solid #FFFFFF; /* সাদা বর্ডার */
    
    /* 3D Shadow Effects (#263147 দিয়ে নিচের অংশে ডার্ক টেকনিক্যাল লুক দেওয়া হয়েছে) */
    box-shadow: 
        0 0 0 2px #00BFAF,        
        0 4px 0 2px #263147,      
        0 6px 6px rgba(0, 0, 0, 0.3); 
        
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); 
    
    /* Smooth animation */
    transform: translateY(0);
    transition: all 0.2s ease;
}

/* Hover Effect (মাউস নিলে বাটনটি লাইম গ্রিন রঙে পরিবর্তন হবে) */
#playNowBtn:hover {
    background: #bad80a; 
    color: #263147; /* টেক্সট কালার ডার্ক করা হয়েছে ভালো কনট্রাস্টের জন্য */
    border-color: #263147; 
    box-shadow: 
        0 0 0 2px #bad80a,        
        0 4px 0 2px #263147,      
        0 6px 6px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px); 
}

/* Active Effect (ক্লিক করলে বাটনটি নিচে দেবে যাবে) */
#playNowBtn:active {
    transform: translateY(3px); 
    box-shadow: 
        0 0 0 2px #00BFAF, 
        0 1px 0 2px #263147, /* নিচের শ্যাডো কমিয়ে দেওয়া হয়েছে */     
        0 2px 2px rgba(0, 0, 0, 0.3);
}

/* Hover অবস্থায় ক্লিক করলে যেন লাইম কালারটি বজায় থাকে */
#playNowBtn:hover:active {
    box-shadow: 
        0 0 0 2px #bad80a, 
        0 1px 0 2px #263147,      
        0 2px 2px rgba(0, 0, 0, 0.3);
}