/**
 * ============================================================
 *   移动端专注模式 UI 方案 — 纯 CSS 文件
 * ============================================================
 *
 * 适用场景：移动端卡牌分类游戏，点击特征块时弹出解释面板
 *           + 分类按钮，替代跨区域拖拽操作。
 *
 * 设计语言：白色圆角卡片 + 彩色胶囊按钮 + 独立底部Toast
 * 视觉风格：现代简洁，Apple HIG / Material 3 风格
 *
 * 使用方法：
 *   1. 将本文件引入你的样式表（<link> 或 @import）
 *   2. 在页面中放置 <div class="tooltip-backdrop"></div> 作为遮罩层
 *   3. JS 中动态创建 .focus-panel、.focus-move-toast 元素
 *   4. 详细接入说明请参阅 focus-mode-ui-guide.md
 *
 * 浏览器兼容：iOS Safari 15+、Chrome 90+、Android 10+
 *              需要 backdrop-filter 支持
 *
 * @version 1.0.0
 * @date    2026-04-06
 * ============================================================
 */


/* ==========================================================================
   1. 毛玻璃遮罩层（全屏半透明 + 模糊）
   ========================================================================== */

.tooltip-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);           /* 半透明黑色遮罩 */
  backdrop-filter: blur(6px);                  /* 毛玻璃模糊效果 */
  -webkit-backdrop-filter: blur(6px);         /* Safari 兼容 */
  z-index: 1000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;              /* 淡入淡出过渡 */
}

.tooltip-backdrop.active {
  display: block;
  opacity: 1;
}


/* ==========================================================================
   2. 专注面板（白色圆角卡片，居中，从底部滑入）
   ========================================================================== */

.focus-panel {
  position: fixed;
  z-index: 1001;                               /* 在遮罩之上 */
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);            /* 水平+垂直居中 */
  width: calc(100% - 48px);                   /* 两侧各留 24px 安全区 */
  max-width: 340px;
  max-height: 72vh;                            /* 防止内容过长超出屏幕 */
  overflow-y: auto;                            /* 允许内容滚动 */

  /* 卡片视觉 */
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 20px;

  /* 初始隐藏状态 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 可见状态 — 触发滑入动画 */
.focus-panel.visible {
  opacity: 1;
  pointer-events: auto;
  animation: focusSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 滑入关键帧 — 从底部偏移 6% 滑入中心 */
@keyframes focusSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -44%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* 隐藏滚动条但保留滚动能力（视觉更干净） */
.focus-panel::-webkit-scrollbar {
  display: none;
}
.focus-panel {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* ==========================================================================
   3. 面板内部 — 解释区标题
   ========================================================================== */

.focus-panel .focus-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a2e;                              /* 深色文字 */
  margin: 0 0 12px 0;
  padding-left: 12px;
  border-left: 3px solid #3b82f6;              /* 左侧蓝色竖线装饰 */
  line-height: 1.4;
}


/* ==========================================================================
   4. 面板内部 — 解释区列表
   ========================================================================== */

.focus-panel ul {
  padding-left: 16px;
  margin: 0 0 18px 0;
}

.focus-panel li {
  font-size: 14px;
  color: #475569;                              /* 灰蓝色文字 */
  line-height: 1.8;
  margin-bottom: 4px;
}


/* ==========================================================================
   5. 分类按钮容器（2×2 网格布局）
   ========================================================================== */

.focus-match-options {
  display: grid;
  grid-template-columns: 1fr 1fr;              /* 两列等宽 */
  gap: 10px;
}


/* ==========================================================================
   6. 胶囊按钮（通用样式）
   ========================================================================== */

.focus-match-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 10px;
  border-radius: 12px;                         /* 圆角胶囊形状 */
  border: 1.5px solid;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
  letter-spacing: 0.3px;
}

/* 按下缩放反馈（触感模拟） */
.focus-match-btn:active {
  transform: scale(0.94);
}


/* ==========================================================================
   7. 四个按钮的颜色方案（语义化色彩系统）
   ========================================================================== */

/* 非常符合 — 绿色系（积极/正向） */
.focus-match-btn[data-score="5"] {
  color: #059669;                              /* 绿色文字 */
  border-color: #a7f3d0;                      /* 浅绿色边框 */
  background: #ecfdf5;                        /* 极浅绿色填充 */
}
.focus-match-btn[data-score="5"]:active {
  background: #d1fae5;                        /* 按下时加深 */
}

/* 比较符合 — 蓝色系（中性/认同） */
.focus-match-btn[data-score="3"] {
  color: #2563eb;                              /* 蓝色文字 */
  border-color: #bfdbfe;                      /* 浅蓝色边框 */
  background: #eff6ff;                        /* 极浅蓝色填充 */
}
.focus-match-btn[data-score="3"]:active {
  background: #dbeafe;
}

/* 一般符合 — 琥珀色系（中性/犹疑） */
.focus-match-btn[data-score="1"] {
  color: #d97706;                              /* 琥珀色文字 */
  border-color: #fde68a;                      /* 浅黄色边框 */
  background: #fffbeb;                        /* 极浅黄色填充 */
}
.focus-match-btn[data-score="1"]:active {
  background: #fef3c7;
}

/* 不太符合 — 灰色系（消极/否定） */
.focus-match-btn[data-score="0"] {
  color: #6b7280;                              /* 灰色文字 */
  border-color: #e5e7eb;                      /* 浅灰色边框 */
  background: #f9fafb;                        /* 极浅灰色填充 */
}
.focus-match-btn[data-score="0"]:active {
  background: #f3f4f6;
}


/* ==========================================================================
   8. 底部 Toast 气泡（独立于面板，用于操作反馈）
   ========================================================================== */

.focus-move-toast {
  position: fixed;
  z-index: 1002;                               /* 在所有元素之上 */
  left: 50%;
  bottom: 80px;                                /* 距底部一定距离 */
  transform: translateX(-50%) translateY(10px);

  /* 视觉样式 — 深色圆角气泡 */
  background: rgba(30, 30, 50, 0.88);         /* 半透明深色 */
  color: #ffffff;
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 20px;                         /* 胶囊形状 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  pointer-events: none;                        /* 不拦截点击 */

  /* 初始隐藏 */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;                         /* 单行不换行 */
}

/* Toast 显示状态 — 向上滑动出现 */
.focus-move-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ==========================================================================
   9. 可选：小屏适配（≤480px）
   ========================================================================== */

@media (max-width: 480px) {
  .focus-panel {
    width: calc(100% - 32px);                 /* 两侧各留 16px */
    padding: 16px;
    border-radius: 16px;
  }

  .focus-panel .focus-title {
    font-size: 16px;
  }

  .focus-panel li {
    font-size: 13px;
  }

  .focus-match-btn {
    padding: 10px 8px;
    font-size: 13px;
    border-radius: 10px;
  }

  .focus-move-toast {
    bottom: 60px;
    font-size: 12px;
    padding: 8px 16px;
  }
}


/* ==========================================================================
   11. 卡牌弹动动画（专注模式移动后的反馈）
   ========================================================================== */

@keyframes focusCardBounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.12); }
  50%  { transform: scale(0.95); }
  70%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.focus-card-bounce {
  animation: focusCardBounce 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   10. 可选：暗色模式适配
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .focus-panel {
    background: #1e1e2e;                      /* 深色卡片背景 */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  }

  .focus-panel .focus-title {
    color: #e2e8f0;
    border-left-color: #60a5fa;               /* 亮蓝色装饰线 */
  }

  .focus-panel li {
    color: #94a3b8;                           /* 浅灰文字 */
  }

  /* 暗色模式下按钮加深背景 */
  .focus-match-btn[data-score="5"] {
    background: rgba(5, 150, 105, 0.15);
    border-color: rgba(167, 243, 208, 0.3);
  }
  .focus-match-btn[data-score="3"] {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(191, 219, 254, 0.3);
  }
  .focus-match-btn[data-score="1"] {
    background: rgba(217, 119, 6, 0.15);
    border-color: rgba(253, 230, 138, 0.3);
  }
  .focus-match-btn[data-score="0"] {
    background: rgba(107, 114, 128, 0.15);
    border-color: rgba(229, 231, 235, 0.3);
  }
}