/* ===========================================================
 * 开局陷阱速胜法 · web 端共用样式
 * 设计语言：与小程序 packages/traps/pages/* 保持一致；
 * 颜色变量跟随 ChessSettings.themeColor / themeMode（沿用 daily_puzzle 的 var(--bg-card) 等）
 * =========================================================== */

.traps-module{max-width:100%;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text-primary,#222)}
.traps-module, .traps-module *{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.traps-module canvas{outline:none!important;-webkit-tap-highlight-color:transparent!important}

/* ====== 总览页 ====== */
.traps-hero{background:linear-gradient(135deg,#7c3aed,#5b21b6);color:#fff;border-radius:14px;padding:18px 20px;margin-bottom:14px;box-shadow:0 4px 16px rgba(124,58,237,0.25);position:relative;overflow:hidden}
.traps-hero h1{font-size:20px;margin:0 0 4px;font-weight:700;letter-spacing:0.5px}
.traps-hero p{font-size:13px;margin:0;opacity:0.92;line-height:1.5}
.traps-hero-tip{position:absolute;right:14px;bottom:10px;font-size:11px;opacity:0.8;background:rgba(255,255,255,0.15);padding:4px 10px;border-radius:14px}

/* ====== 分类卡（4 大类） ====== */
.traps-cats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.traps-cat-card{background:var(--bg-card,#fff);border:1px solid var(--border-color,#eaecef);border-radius:12px;padding:14px 14px 12px;box-shadow:0 2px 10px rgba(124,58,237,0.06);transition:all .15s;cursor:pointer;text-decoration:none;color:inherit;display:block}
.traps-cat-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(124,58,237,0.18);border-color:#7c3aed}
.traps-cat-emoji{font-size:28px;margin-bottom:6px;line-height:1}
.traps-cat-name{font-size:15px;font-weight:700;color:var(--text-primary,#222);margin-bottom:4px}
.traps-cat-stat{font-size:12px;color:var(--text-secondary,#888);margin-bottom:6px}
.traps-cat-bar{height:5px;background:var(--bg-secondary,#f1f3f5);border-radius:3px;overflow:hidden}
.traps-cat-bar-inner{height:100%;background:linear-gradient(90deg,#7c3aed,#a855f7);transition:width .3s}
.traps-cat-arrow{font-size:11px;color:#7c3aed;margin-top:6px;display:inline-block;font-weight:600}

/* ====== 维度筛选（与小程序一致） ====== */
.traps-dims{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px;padding:0}
.traps-dim{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;background:var(--bg-secondary,#f1f3f5);border:1px solid var(--border-color,#eaecef);border-radius:14px;font-size:12px;color:var(--text-primary,#333);cursor:pointer;transition:all .12s;user-select:none}
.traps-dim:hover{background:#ede7f6;border-color:#7c3aed;color:#5b21b6}
.traps-dim.active{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border-color:transparent;font-weight:600}

/* ====== 搜索框 ====== */
.traps-search{display:flex;align-items:center;gap:8px;background:var(--bg-card,#fff);border:1px solid var(--border-color,#eaecef);border-radius:20px;padding:6px 14px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.traps-search input{flex:1;border:none;background:transparent;font-size:14px;color:var(--text-primary,#222);outline:none;padding:4px 0}
.traps-search-ico{color:#999;font-size:14px}

/* ====== 列表项 ====== */
.traps-list-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg-card,#fff);border:1px solid var(--border-color,#eaecef);border-radius:10px;margin-bottom:8px;cursor:pointer;transition:all .12s;text-decoration:none;color:inherit}
.traps-list-item:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(124,58,237,0.12);border-color:#7c3aed}
.traps-list-no{flex-shrink:0;width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.traps-list-main{flex:1;min-width:0}
.traps-list-title{font-size:14px;font-weight:600;color:var(--text-primary,#222);margin-bottom:2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.traps-list-meta{font-size:11px;color:var(--text-secondary,#888);display:flex;gap:6px;flex-wrap:wrap}
.traps-list-meta-tag{background:var(--bg-secondary,#f1f3f5);padding:2px 6px;border-radius:4px}
.traps-list-status{flex-shrink:0;font-size:16px;text-align:right;width:32px}
.traps-status-0{color:#ccc}
.traps-status-1{color:#22c55e}
.traps-status-2{color:#FFB300}
.traps-status-fav{color:#e91e63}

/* ====== 学习页/练习页共用棋盘卡 ====== */
.traps-board-card{background:var(--bg-card,#fff);border:1px solid var(--border-color,#eaecef);border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:0 2px 10px rgba(124,58,237,0.05)}
.traps-board-title-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.traps-board-no{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.traps-board-title{flex:1;min-width:0;font-size:15px;font-weight:700;color:var(--text-primary,#222);line-height:1.3}
.traps-board-fav{flex-shrink:0;background:#fff;border:1px solid #ffd54f;border-radius:18px;padding:6px 12px;font-size:12px;font-weight:600;color:#b45309;cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .12s}
.traps-board-fav.is-fav{background:#fff8e1;border-color:#e91e63;color:#e91e63}
.traps-board-fav:hover{background:#fff8e1;border-color:#e65100}

/* ====== 棋盘画布容器 ====== */
.traps-board-wrap{text-align:center;position:relative;min-height:300px;display:flex;align-items:center;justify-content:center}
.traps-board-wrap canvas{display:block;margin:0 auto;cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:manipulation;box-shadow:0 2px 8px rgba(0,0,0,0.08);border-radius:6px}

/* ====== 演示/练习控制条 ====== */
.traps-controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.traps-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;box-shadow:0 2px 6px rgba(124,58,237,0.3);display:inline-flex;align-items:center;gap:4px;justify-content:center;min-height:36px;line-height:1.2;white-space:nowrap}
.traps-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(124,58,237,0.4)}
.traps-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none;pointer-events:none}
.traps-btn-secondary{background:var(--bg-secondary,#f1f3f5);color:var(--text-primary,#333);box-shadow:none;border:1px solid var(--border-color,#eaecef)}
.traps-btn-secondary:hover{background:#ede7f6;color:#5b21b6;box-shadow:none;transform:none}
.traps-btn-play{background:linear-gradient(135deg,#43a047,#66bb6a);box-shadow:0 2px 6px rgba(67,160,71,0.3)}
.traps-btn-play:hover{box-shadow:0 4px 10px rgba(67,160,71,0.4)}
.traps-btn-warn{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 2px 6px rgba(245,158,11,0.3)}
.traps-btn-danger{background:linear-gradient(135deg,#e53935,#c62828);box-shadow:0 2px 6px rgba(229,57,53,0.3)}

/* ====== 简介卡 ====== */
.traps-desc{background:var(--bg-card,#fff);border:1px solid var(--border-color,#eaecef);border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.7;color:var(--text-primary,#333);margin-bottom:10px}
.traps-desc-toggle{color:#7c3aed;font-size:12px;font-weight:600;cursor:pointer;margin-top:4px;display:inline-block}
.traps-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.traps-meta-tag{padding:3px 10px;background:var(--bg-secondary,#f1f3f5);border:1px solid var(--border-color,#eaecef);border-radius:14px;font-size:12px;color:var(--text-secondary,#555)}
.traps-meta-tag.eco{background:#ede7f6;color:#5b21b6;border-color:#7c3aed}
.traps-meta-tag.trigger{background:#fce4ec;color:#c62828;border-color:#e91e63}

/* ====== 招法条（横向） ====== */
.traps-strip-wrap{background:var(--bg-card,#fff);border:1px solid var(--border-color,#eaecef);border-radius:10px;padding:8px 10px;margin-bottom:10px;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;min-height:46px}
.traps-strip-wrap::-webkit-scrollbar{height:4px}
.traps-strip-wrap::-webkit-scrollbar-thumb{background:#d0d7de;border-radius:2px}
.traps-km{flex-shrink:0;padding:4px 8px;border-radius:6px;font-size:13px;cursor:pointer;background:var(--bg-secondary,#f1f3f5);color:var(--text-primary,#222);border:1px solid transparent;line-height:1.3;transition:all .12s;display:inline-flex;align-items:center;gap:3px;min-width:48px}
.traps-km:hover{background:#ede7f6;border-color:#7c3aed}
.traps-km.active{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-weight:600;border-color:transparent}
.traps-km.is-setup{background:#fff8e1;border-color:#ffd54f;color:#b45309}
.traps-km.is-setup.active{background:#f59e0b;color:#fff;border-color:transparent}
.traps-km.is-trigger{background:#fce4ec;border-color:#e91e63;color:#c62828}
.traps-km.is-trigger.active{background:#e91e63;color:#fff;border-color:transparent}
.traps-km-num{color:var(--text-secondary,#999);font-size:11px;margin-right:2px}
.traps-km-nag{font-size:11px;opacity:0.85}
.traps-km.is-setup .traps-km-nag, .traps-km.is-trigger .traps-km-nag{font-weight:700}

/* ====== 翻局导航 ====== */
.traps-trap-nav{display:flex;align-items:center;justify-content:space-between;background:var(--bg-card,#fff);border:1px solid var(--border-color,#eaecef);border-radius:10px;padding:10px 14px;margin-bottom:10px}
.traps-trap-nav-btn{display:inline-flex;align-items:center;gap:4px;color:#7c3aed;font-weight:600;font-size:13px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .12s}
.traps-trap-nav-btn:hover{background:#ede7f6}
.traps-trap-nav-btn.disabled{color:#bbb;cursor:not-allowed;pointer-events:none}
.traps-trap-nav-info{flex:1;text-align:center;font-size:12px;color:var(--text-secondary,#888)}

/* ====== 状态行（demo/练习顶部） ====== */
.traps-status-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-secondary,#666);padding:0 4px;margin-bottom:6px;height:24px;position:relative;z-index:2}
.traps-status-state.is-playing{color:#2e7d32;font-weight:600}

/* ====== 消息条 ====== */
.traps-msg{padding:8px 14px;border-radius:8px;font-size:13px;margin-bottom:10px;text-align:center}
.traps-msg-success{background:rgba(67,160,71,0.1);color:#2e7d32;border:1px solid rgba(67,160,71,0.3)}
.traps-msg-info{background:rgba(25,118,210,0.1);color:#1565c0;border:1px solid rgba(25,118,210,0.3)}
.traps-msg-error{background:rgba(198,40,40,0.1);color:#c62828;border:1px solid rgba(198,40,40,0.3)}

/* ====== 弹窗（完成/错题） ====== */
.traps-modal-mask{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px}
.traps-modal-card{background:var(--bg-card,#fff);border-radius:16px;padding:28px 28px 22px;max-width:480px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.3);text-align:center;animation:trapsIn .2s ease-out}
.traps-modal-icon{font-size:60px;margin-bottom:10px}
.traps-modal-title{font-size:20px;font-weight:700;color:var(--text-primary,#222);margin-bottom:8px}
.traps-modal-stats{font-size:14px;color:var(--text-secondary,#666);margin-bottom:12px}
.traps-modal-tip{font-size:13px;color:#2e7d32;margin-bottom:8px}
.traps-modal-tip.error{color:#c62828}
.traps-modal-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.traps-modal-actions .traps-btn{flex:1;min-width:100px;padding:8px 10px}
@keyframes trapsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ====== 进度卡片（首页用） ====== */
.traps-progress-card{background:var(--bg-card,#fff);border:1px solid var(--border-color,#eaecef);border-radius:10px;padding:10px 14px;margin-bottom:12px;display:flex;justify-content:space-around;text-align:center}
.traps-prog-cell{flex:1}
.traps-prog-num{font-size:20px;font-weight:700;color:#7c3aed;line-height:1.2}
.traps-prog-label{font-size:11px;color:var(--text-secondary,#888);margin-top:2px}

/* ====== 提示区（hint） ====== */
.traps-hint-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px;margin-bottom:10px}
.traps-hint-btn{background:var(--bg-card,#fff);border:1px solid var(--border-color,#eaecef);border-radius:18px;padding:6px 14px;font-size:12px;color:#7c3aed;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:4px;transition:all .12s}
.traps-hint-btn:hover{background:#ede7f6;border-color:#7c3aed}
.traps-hint-btn:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}

/* ====== 移动端适配 ====== */
@media (max-width:768px){
  .traps-hero{padding:14px 16px;margin-bottom:10px}
  .traps-hero h1{font-size:17px}
  .traps-cats{gap:8px}
  .traps-cat-card{padding:12px 10px}
  .traps-cat-name{font-size:14px}
  .traps-board-card{padding:10px}
  .traps-btn{padding:7px 12px;font-size:12px;min-height:34px}
  .traps-km{font-size:12px;padding:3px 7px;min-width:42px}
  .traps-modal-card{padding:20px 18px}
  .traps-modal-title{font-size:17px}
  .traps-modal-actions .traps-btn{min-width:80px;font-size:12px;padding:6px 8px}
}
@media (max-width:480px){
  .traps-hero-tip{display:none}
  .traps-cat-emoji{font-size:22px}
  .traps-cat-stat{font-size:11px}
}