/* ==========================================================================
   Responsive — Kolkata FF Games light theme (compact)
   ========================================================================== */

@media (max-width: 1024px) {
  .rest_month { grid-template-columns: repeat(2, 1fr); }
  .rest_month.years_grid { grid-template-columns: repeat(2, 1fr); }
  .rest_month.chart_toc { grid-template-columns: repeat(4, 1fr); }
  .round_board { grid-template-columns: repeat(4, 1fr); }
  .round_digits .patti { font-size: 24px; }
}

@media (max-width: 860px) {
  :root { --section-pad: 20px; }

  /* Mobile Header & Sandwich Navigation */
  .main_header_area {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .header_inn {
    justify-content: space-between;
    align-items: center;
    min-height: 54px;
    padding-top: 6px;
    padding-bottom: 6px;
    position: relative;
  }

  .logo {
    gap: 8px;
  }

  .logo img {
    width: 36px;
    height: 36px;
  }

  .logo_text strong {
    font-size: 15.5px;
  }

  .logo_text small {
    font-size: 10px;
  }

  .sandwich_btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #ffffff;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    box-shadow: 0 1px 2px rgba(15, 31, 61, .05);
    flex-shrink: 0;
    position: relative;
    z-index: 1002;
    -webkit-tap-highlight-color: transparent;
  }

  .sandwich_btn:hover,
  .sandwich_btn:focus-visible {
    background: var(--wash);
    border-color: #cbd8f3;
  }

  .sandwich_bar {
    display: block;
    width: 19px;
    height: 2px;
    background-color: var(--ink);
    border-radius: 2px;
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), opacity .2s ease;
    transform-origin: center;
  }

  .sandwich_bar + .sandwich_bar {
    margin-top: 4px;
  }

  .sandwich_btn.is_open .bar_1 {
    transform: translateY(6px) rotate(45deg);
  }

  .sandwich_btn.is_open .bar_2 {
    opacity: 0;
    transform: translateX(-5px);
  }

  .sandwich_btn.is_open .bar_3 {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Dropdown Drawer */
  .site_nav_wrap {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(15, 31, 61, .12);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(0.16, 1, 0.3, 1), visibility .22s;
    z-index: 1001;
  }

  .site_nav_wrap.is_open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site_nav {
    display: flex;
    flex-direction: column;
    padding: 10px 14px 14px;
    gap: 4px;
    width: 100%;
    overflow-x: visible;
  }

  .site_nav .nav_link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
  }

  .site_nav .nav_link:hover {
    background: var(--wash-2);
    color: var(--accent);
  }

  .site_nav .nav_link.active {
    background: var(--wash);
    color: var(--accent);
    border-color: #cbd8f3;
    font-weight: 700;
  }

  .nav_arrow {
    display: block;
    width: 15px;
    height: 15px;
    color: var(--muted);
    transition: transform .15s ease, color .15s ease;
    flex-shrink: 0;
  }

  .nav_link:hover .nav_arrow,
  .nav_link.active .nav_arrow {
    color: var(--accent);
    transform: translateX(2px);
  }

  /* Backdrop */
  .nav_backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 31, 61, .45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s;
    z-index: 999;
  }

  .nav_backdrop.is_open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body.nav_open {
    overflow: hidden;
  }

  .heading_area { padding: 16px 0 18px; }
  .heading_area h1 { font-size: 21px; }
  .heading_area h4 { font-size: 12.5px; padding: 0 14px; }

  .live_result_area { padding: 18px 0 22px; }
  .section_head { margin-bottom: 12px; }
  .section_head h2, .section_head h3 { font-size: 17px; }
  .live_title { font-size: 17px; }
  .eyebrow { font-size: 10.5px; padding: 3px 10px; margin-bottom: 7px; }
  .btn_refresh { font-size: 11.5px; padding: 5px 11px; }

  /* Round board: 4 per row keeps all 8 bazi within 2 rows */
  .round_board { grid-template-columns: repeat(4, 1fr); }
  .round_card { padding: 10px 6px 8px; }
  .round_card.is_awaiting { padding-top: 16px; }
  .round_head { margin-bottom: 6px; }
  .round_no { font-size: 10px; }
  .round_time { font-size: 9.5px; }
  .note_icon { width: 14px; height: 14px; }
  .round_digits { min-height: 58px; gap: 6px; }
  .round_digits .patti { font-size: 19px; }
  .round_digits .single { width: 27px; height: 27px; font-size: 14px; }
  .round_digits .live_q { width: 30px; height: 30px; font-size: 16px; }
  .round_digits .round_bazi { font-size: 9.5px; }
  .round_digits .wait_mark { font-size: 14px; }
  .round_note { font-size: 9px; margin-top: 6px; }
  .live_ribbon { font-size: 8px; padding: 2px 8px; top: -8px; }

  .result_dste { font-size: 11px; padding: 3px 10px; margin: 0; }
  .result_text p { font-size: 12.5px; }

  .chart_month_area { padding: 20px 0; }
  .heading_chart h1, .heading_chart h2, .heading_chart h3 { font-size: 17px; }
  .heading_chart .chart_sub { font-size: 12px; margin-bottom: 12px; }

  /* Month chart: keep every bazi on one line — compress type instead */
  .chart_table_wrap { border-radius: 10px; }
  .month_chart th { font-size: 10px; padding: 6px 1px; }
  .month_chart th.date_col { width: 52px; }
  .month_chart td { padding: 4px 1px; }
  .month_chart td.date_cell { font-size: 9px; }
  .month_chart .res .p { font-size: 12px; }
  .month_chart .res .s { font-size: 9.5px; }

  .rest_month { grid-template-columns: 1fr; margin-top: 14px; gap: 6px; }
  .rest_month.years_grid { grid-template-columns: 1fr; }
  .rest_month a { padding: 9px 12px; font-size: 12.5px; }

  .timetable_area { padding: 20px 0; }
  .sing_time_table { padding: 12px 10px; }
  .time_heading h2 { font-size: 15px; margin-bottom: 10px; }
  .time_heading table th { font-size: 10.5px; padding: 7px 3px; }
  .time_heading table td { font-size: 11.5px; padding: 7px 3px; }

  .botm_txt { padding: 12px 0; }
  .botm_txt p { font-size: 12px; }

  .page_content_area { padding: 20px 0; }
  .page_sing_cont { padding: 13px 13px; margin: 8px 0; }
  .page_sing_cont h3 { font-size: 15px; }
  .page_sing_cont p { font-size: 12.5px; }
  .accordion { padding: 11px 12px; font-size: 13px; }
  .panel { padding: 0 12px; }

  .howto_play_area { padding: 18px 0 22px; }
  .howto_play_area .headeing h1 { font-size: 17.5px; }
  .howto_play_area .headeing p { font-size: 12px; }
  .content_area { padding: 14px 13px; }
  .content_area h2 { font-size: 15.5px; }

  .chart_page_head { padding: 16px 0 14px; }
  .chart_page_head h1 { font-size: 17px; }
  .chart_page_head p { font-size: 12.5px; }
  .chart { padding: 10px 8px; }
  .chart h2 { font-size: 14px; padding: 8px 9px; margin: 14px 0 8px; }
  .rest_month.chart_toc { grid-template-columns: repeat(4, 1fr); }
  .rest_month.chart_toc a { padding: 7px 4px; font-size: 11px; }
  .chart th, .chart td { padding: 4px 2px; }
  .chart th { font-size: 10px; }
  .chart td { font-size: 10px; }
  .chart td::first-line { font-size: 11px; }
  .chart td:first-child { font-size: 9.5px; }
  .chart td:first-child::first-line { font-size: 9.5px; }

  .footer_main { padding-top: 18px; }
  .foot_menu ul li a { font-size: 11.5px; padding: 3px 9px; }
}

@media (max-width: 400px) {
  .logo_text strong { font-size: 15px; }
  .logo_text small { font-size: 10px; }
  .round_digits .patti { font-size: 17px; }
  .round_digits .single { width: 24px; height: 24px; font-size: 12.5px; }
  .month_chart th.date_col { width: 46px; }
  .month_chart .res .p { font-size: 11px; }
  .month_chart td.date_cell { font-size: 8.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}