/********* ONLY MOBILE for index.html *********/
@media (max-width: 768px) {

  /* 0) پایه */
  html { font-size: 15px; }
  img, video { max-width: 100%; height: auto; display: block; }
  .container { padding-left: 12px; padding-right: 12px; }

  /* 1) قهرمان صفحه */
  .hero-section { padding: 28px 12px 8px; }
  .hero-section .main-title { font-size: clamp(22px, 6vw, 28px); margin-bottom: 12px !important; }
  .hero-section .lead { font-size: 14px; line-height: 1.9; margin-bottom: 20px !important; }

  /* 2) تیتر بخش پلن‌ها */
  .container > h2 { font-size: 18px; margin-bottom: 18px !important; }

  /* 3) ردیف پلن‌ها → تک‌ستونه تمیز */
  .row.justify-content-center { row-gap: 14px; }
  .row.justify-content-center > .col-lg-4.col-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* 4) کارت هر پلن */
  .pricing-card {
    border-radius: 16px;
    padding: 12px;                 /* padding اضافه روی card-body داریم، ولی
                                      خود کارت هم کمی padding داشته باشد */
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    background: rgba(255,255,255,.06);   /* روی گرادیان پس‌زمینه قشنگ می‌شود */
    backdrop-filter: blur(6px);
  }
  .pricing-card .card-body { padding: 14px 10px; }
  .pricing-card .card-title { font-size: 18px; margin-bottom: 6px; }
  .pricing-card .price {
    font-size: 16px;
    font-weight: 700;
    margin-top: 4px;
  }
  .pricing-card .price .price-unit { font-size: 12px; opacity: .85; margin-right: 4px; }

  /* 5) لیست مزایا (از {{ package.description|linebreaks }}) */
  .pricing-card .features { 
    margin: 10px 0 14px;
    font-size: 14px; line-height: 1.85;
  }
  .pricing-card .features p { margin: 0 0 8px; } /* فاصله پاراگراف‌های feature */

  /* 6) دکمه فعال‌سازی: فول‌عرض و لمس‌پسند */
  .activate-button.btn {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    font-weight: 600;
  }

  /* حالت انتخاب‌شده (وقتی کاربر روی یک پلن کلیک می‌کند) */
  .pricing-card.selected { outline: 2px solid rgba(0, 123, 255, .6); }
  .activate-button.selected { filter: brightness(1.05); }

  /* 7) فرم اشتراک (بخش بعد از انتخاب پلن) */
  #subscription-form-section { margin-top: 22px !important; }
  .subscription-form-container {
    max-width: 520px;
    margin: 0 auto;
    padding: 14px 12px;
    border-radius: 14px;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(4px);
  }
  .subscription-form-container .form-label { font-size: 14px; }
  .subscription-form-container .form-control { min-height: 44px; }
  .subscription-form-container .btn-success {
    min-height: 46px;
    border-radius: 10px;
    font-weight: 700;
  }
}

@media (max-width: 768px) {
  /* لوگو وسط‌چین و اندازه بهتر برای موبایل */
  .hero-section .mb-4 img {
    display: block;          /* از حالت inline خارج می‌کنیم */
    margin-inline: auto;     /* دقیقا وسط */
    max-width: 140px;        /* اگر بزرگ دیده میشه، کمی کوچک‌تر */
    height: auto;
  }

  /* تیتر و توضیح هم هماهنگ و خوانا */
  .hero-section { text-align: center; }
  .hero-section .main-title { margin-top: 10px; }
}


@media (max-width: 768px) {
  /* نوار جذب/دفع/خاموش در موبایل چسبان نباشه */
  .faq-wrap .mouse-mode{
    position: static !important;  /* لغو sticky */
    top: auto !important;
    z-index: auto !important;
    margin-bottom: 12px !important; /* کمی فاصله از بالای کارت */
  }

  /* (اختیاری) دکمه‌ها کمی جمع‌وجورتر */
  .faq-wrap .mouse-mode .panel { gap: 6px !important; }
  .faq-wrap .mouse-mode button { padding: 6px 10px !important; font-size: 12px !important; }
}

@media (max-width: 768px) {
  .faq-wrap .faq-box-title,
  .page-title,
  .breadcrumb { display: none !important; }
}

/* ===== Mobile layout (<=640px) – tidy, same width & height ===== */
@media (max-width: 640px) {

  html, body { overflow: auto !important; height: auto !important; }
  :root {
    --mob-card-w: min(560px, calc(100vw - 32px));
    --mob-card-h: 74px;
    --mob-gap: 12px;
  }

  .stage > * { display: none !important; }
  #support-banner, .quick-cards, .hud-left { display: block !important; }

  .stage{
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    row-gap: var(--mob-gap) !important;
    min-height: 100vh !important;
    padding: calc(8px + env(safe-area-inset-top)) 0 24px !important;
    box-sizing: border-box !important;
  }

  /* 🔹 بنر بالا هم‌اندازه کارت‌ها */
  #support-banner{
    grid-row: 1 !important;
    position: static !important;
    width: var(--mob-card-w) !important;
    min-height: var(--mob-card-h) !important;
    box-sizing: border-box !important;

    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    margin: 0 auto !important;
    padding: 12px 16px !important;
    font-size: 20px !important;        /* بزرگ‌تر شد */
    font-weight: 700 !important;
    line-height: 1.5 !important;
    border-radius: 14px !important;
    text-align: center !important;
  }

  .quick-cards{
    grid-row: 2 !important;
    position: static !important;
    display: grid !important;
    grid-auto-rows: auto !important;
    justify-items: center !important;
    row-gap: var(--mob-gap) !important;
    padding: 0 !important;
    transform: none !important;
    overflow: visible !important;
    width: 100% !important;
  }

  #magicCard{ display: none !important; }
  #donateCard{ order: 1 !important; }
  #coffeeCard{ order: 2 !important; }

  #donateCard,
  #coffeeCard,
  #instructions,
  #homeBtn{
    width: var(--mob-card-w) !important;
    min-height: var(--mob-card-h) !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    transform: none !important;
    box-shadow: 3px 3px 0 #e65100 !important;

    font-size: 18px !important;        /* بزرگ‌تر برای همه کارت‌ها */
    font-weight: 600 !important;
  }

  /* 🔹 CTA چرخشی کارت حمایت مالی */
  .donate .cta{
    margin: 0 0 0 10px !important;
    display: block !important;
    font-size: 16px !important;       /* کمی بزرگ‌تر CTA */
  }
  .donate .cta .rotator{
    display: inline-block !important;
    min-width: 160px !important;      /* پهن‌تر برای متن‌های بلند */
    height: 22px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .donate .cta .msg{
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity 0.28s ease, transform 0.28s ease !important;
  }
  .donate .cta .msg.active{
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .hud-left{
    grid-row: 3 !important;
    position: static !important;
    display: grid !important;
    justify-items: center !important;
    row-gap: var(--mob-gap) !important;
    width: 100% !important;
  }
  .left-controls{ display: contents !important; }
  #instructions{
    text-align: center !important;
    transform: none !important;
  }
  #instructions > *{ display: none !important; }
  #instructions::before{
    content: "برای فعال شدن بازی این صفحه را با لپ‌تاپ باز کن 💻";
    display: block;
    font-weight: 800;
  }

  #homeBtn{
    margin-bottom: 4px !important;
    background: #ffecb3 !important;
    color: #3a2a00 !important;
    border: 3px solid #ff9800 !important;
  }

  #combo, #muteBtn{ display: none !important; }
  .parallax, #ninja, #fx-layer, .coin, .trap, .dollar-bill, .sparkle { display: none !important; }
}