/* =====================================================================
 * FluidLab Responsive CSS — Claude 2026-07-23
 * 全站统一响应式：手机(≤768px) / 平板(769-1024px) / 桌面(≥1025px)
 * 引入方式: <link href="/assets/ds/responsive.css" rel="stylesheet">
 * ===================================================================== */

/* ---------- 断点变量 ---------- */
:root {
  --fl-bp-mobile: 768px;
  --fl-bp-tablet: 1024px;
}

/* ==========================================================
 * 1. 主页 Navbar (顶栏) 响应式
 * ========================================================== */

/* 手机: 按角色只保留 1 个主按钮 + 用户名, 其余进汉堡菜单 */
@media (max-width: 768px) {
  .navbar {
    flex-wrap: nowrap !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  .navbar .brand-title {
    font-size: 16px !important;
    flex: 1;
  }
  /* 默认: 手机端隐藏所有导航按钮 (含主题/消息/风云榜/教师/上帝) */
  #nav-leaderboard,
  #notif-btn,
  #nav-teacher,
  #god-btn,
  #fl-theme-btn {
    display: none !important;
  }
  /* 按角色显示唯一主按钮 (body class 由 mobile.js 设置) */
  body.fl-role-student  #nav-leaderboard { display: inline-flex !important; }
  body.fl-role-teacher  #nav-teacher     { display: inline-flex !important; }
  body.fl-role-admin    #god-btn         { display: inline-flex !important; }
  /* 主按钮缩小 */
  .navbar #nav-leaderboard,
  .navbar #nav-teacher,
  .navbar #god-btn {
    padding: 4px 10px !important;
    font-size: 12px !important;
  }
  /* 用户名缩短 */
  #u-name {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 退出按钮简化 */
  .navbar [onclick*="logoutReq"] {
    font-size: 12px !important;
  }

  /* 添加汉堡菜单按钮(通过JS控制显示) */
  .fl-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,.1));
    background: transparent;
    color: var(--text-main, #fff);
    cursor: pointer;
    font-size: 20px;
  }

  /* 汉堡菜单展开面板 */
  .fl-mobile-menu {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.7);
    z-index: 99990;
  }
  .fl-mobile-menu.show { display: flex !important; }
  .fl-mobile-menu-inner {
    position: absolute;
    top: 60px; right: 12px;
    width: 220px;
    background: var(--panel-bg, #2f343f);
    border: 1px solid var(--border, rgba(255,255,255,.1));
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
  }
  .fl-mobile-menu-inner button {
    display: block; width: 100%;
    padding: 12px; margin: 4px 0;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(255,255,255,.08));
    background: transparent;
    color: var(--text-main, #eceff4);
    font: inherit; font-size: 14px;
    cursor: pointer; text-align: left;
  }
  .fl-mobile-menu-inner button:active { background: var(--primary-dim, rgba(97,175,239,.12)); }
}

/* 平板: 按钮缩小但都保留 */
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar button,
  .navbar .nav-pill {
    padding: 4px 10px !important;
    font-size: 12px !important;
  }
  #u-name { font-size: 13px !important; }
  .fl-hamburger { display: none !important; }
}

/* 桌面: 汉堡菜单隐藏 */
@media (min-width: 769px) {
  .fl-hamburger { display: none !important; }
  .fl-mobile-menu { display: none !important; }
}

/* ==========================================================
 * 2. Hero Section (主页标题区) 响应式
 * ========================================================== */
@media (max-width: 768px) {
  .hero-title {
    font-size: 24px !important;
    letter-spacing: 0 !important;
  }
  .hero-subtitle {
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }
  .hero-stats {
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 13px !important;
  }
  .hero-stats .divider { display: none !important; }
}

/* ==========================================================
 * 3. Mode Cards (闯关模式/自由探索/交流论坛) 响应式
 * ========================================================== */
@media (max-width: 768px) {
  .mode-cards,
  [class*="mode-card"] {
    flex-direction: column !important;
  }
  .mode-card {
    width: 100% !important;
    min-height: auto !important;
    padding: 16px !important;
    margin: 6px 0 !important;
  }
}

/* ==========================================================
 * 4. 仿真页 Sidebar 响应式 (顶部抽屉模式)
 * ========================================================== */
@media (max-width: 768px) {
  /* 网格布局从双列变单列 */
  #app-layout,
  .fl-app {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas:
      "header"
      "main"
      "statusbar" !important;
  }

  /* Sidebar 变为可折叠顶部抽屉 */
  #control-panel,
  .fl-sidebar {
    position: fixed !important;
    top: 0; left: 0; right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
    transform: translateY(-100%) !important;
    transition: transform 0.3s cubic-bezier(.4,0,.2,1) !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, rgba(255,255,255,.1)) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
  }
  #control-panel.open,
  .fl-sidebar.open {
    transform: translateY(0) !important;
  }

  /* 主舞台占满宽度 */
  #main-stage,
  .fl-main {
    grid-column: 1 !important;
    width: 100% !important;
    height: 100dvh !important;
  }

  /* 抽屉切换按钮 */
  .fl-sidebar-toggle {
    display: flex !important;
    position: fixed !important;
    top: 8px; left: 8px;
    z-index: 1001 !important;
    width: 40px; height: 40px;
    align-items: center; justify-content: center;
    border-radius: 10px;
    background: var(--panel-bg, #2f343f) !important;
    border: 1px solid var(--border, rgba(255,255,255,.1)) !important;
    color: var(--primary, #61afef) !important;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
  }
  .fl-sidebar-toggle.rotated { transform: rotate(180deg); }

  /* 遮罩层 */
  .fl-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 999;
  }
  .fl-sidebar-backdrop.show { display: block !important; }
}

/* 平板: sidebar 窄一些 */
@media (min-width: 769px) and (max-width: 1024px) {
  #app-layout,
  .fl-app {
    grid-template-columns: 280px 1fr !important;
  }
  #control-panel,
  .fl-sidebar {
    padding: 12px !important;
  }
  .fl-sidebar-toggle { display: none !important; }
  .fl-sidebar-backdrop { display: none !important; }
}

/* 桌面: 隐藏toggle按钮和backdrop */
@media (min-width: 1025px) {
  .fl-sidebar-toggle { display: none !important; }
  .fl-sidebar-backdrop { display: none !important; }
}

/* ==========================================================
 * 5. 主题面板响应式 (已有,这里再强化)
 * ========================================================== */
@media (max-width: 768px) {
  #fl-theme-panel {
    position: fixed !important;
    top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    min-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 20px 16px env(safe-area-inset-bottom, 16px) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.5) !important;
  }
}

/* ==========================================================
 * 6. 通用: 防止内容溢出
 * ========================================================== */
@media (max-width: 768px) {
  body { overflow-x: hidden !important; }
  canvas, svg { max-width: 100% !important; }
  table { display: block; overflow-x: auto; }
  pre, code { white-space: pre-wrap !important; word-break: break-word !important; }
  /* 弹窗/模态框 */
  .m-content, .fl-modal-box {
    width: 92vw !important; max-width: none !important;
    margin: 0 auto !important;
  }
}

/* ==========================================================
 * 7. 关卡列表(闯关模式内) 响应式
 * ========================================================== */
@media (max-width: 768px) {
  .chapter-levels,
  .level-nodes {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .level-node {
    width: 48px !important; height: 48px !important;
  }
  .level-node-label {
    font-size: 10px !important;
  }
}

/* ==========================================================
 * 8. 底部版权/footer 响应式
 * ========================================================== */
@media (max-width: 768px) {
  .footer-section,
  footer {
    font-size: 11px !important;
    padding: 12px !important;
    text-align: center !important;
  }
}
/* ===== HAMBURGER VISIBILITY FIX ===== */
@media (max-width: 768px) {
  .fl-hamburger {
    width: 42px !important;
    height: 42px !important;
    font-size: 24px !important;
    border: 2px solid var(--primary, #61afef) !important;
    color: var(--primary, #61afef) !important;
    border-radius: 10px !important;
    background: var(--primary-dim, rgba(97,175,239,.1)) !important;
  }
  .fl-mobile-menu-inner {
    width: 260px !important;
    right: 8px !important;
  }
  .fl-mobile-menu-inner button {
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
}

@media (max-width: 768px) {
  .fl-hamburger {
    width: 42px !important;
    height: 42px !important;
    font-size: 24px !important;
    border: 2px solid var(--primary, #61afef) !important;
    color: var(--primary, #61afef) !important;
    border-radius: 10px !important;
    background: var(--primary-dim, rgba(97,175,239,.1)) !important;
  }
  .fl-mobile-menu-inner {
    width: 260px !important;
    right: 8px !important;
  }
  .fl-mobile-menu-inner button {
    padding: 14px 16px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }
}