/* ========== 算式工坊 — Jisuan Module CSS ========== */

/* --- 选关页 --- */
.js-level-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: clamp(300px, 90vw, 420px);
  margin: 0 auto;
  padding: var(--space-4);
}
.js-level-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform var(--duration-fast) var(--ease-out);
}
.js-level-card:active { transform: scale(0.97); }
.js-level-card.current {
  border: 2px solid var(--module-color);
  box-shadow: var(--shadow-md);
}
.js-level-card.locked {
  opacity: 0.5;
  pointer-events: none;
}
.js-level-icon {
  font-size: 1.5rem;
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.js-level-info { flex: 1; }
.js-level-title {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.js-level-desc {
  font-size: var(--text-caption);
  color: var(--text-secondary);
  margin-top: 2px;
}
.js-level-stars {
  color: var(--warning);
  font-size: var(--text-body);
}

/* --- 竖式网格 --- */
.js-grid-wrap {
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}
.js-grid {
  border-collapse: collapse;
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: var(--weight-bold);
  font-family: var(--font-display);
}
.js-grid td {
  width: clamp(40px, 10vw, 56px);
  height: clamp(40px, 10vw, 56px);
  text-align: center;
  vertical-align: middle;
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: all var(--duration-normal) var(--ease-out);
}
/* 颜色编码数位列 */
.js-grid[data-color-cols="true"] td[data-col="ones"]     { background: #EFF6FF; }
.js-grid[data-color-cols="true"] td[data-col="tens"]      { background: #F0FDF4; }
.js-grid[data-color-cols="true"] td[data-col="hundreds"]  { background: #FFF7ED; }
.js-grid[data-color-cols="true"] td[data-col="thousands"] { background: #FDF2F8; }

/* 当前列高亮 */
.js-grid td.active-col {
  border-color: var(--module-color);
  box-shadow: inset 0 0 0 2px var(--module-color);
}
/* 已完成列 */
.js-grid td.done-col {
  color: var(--correct);
}
/* 结果行空格 */
.js-grid td.result-cell {
  border: 2px dashed var(--text-muted);
}
.js-grid td.result-cell.filled {
  border-color: var(--correct);
  border-style: solid;
}
/* 运算符列 */
.js-grid td.op-cell {
  color: var(--text-secondary);
  font-size: var(--text-heading);
  width: clamp(28px, 7vw, 36px);
}
/* 横线 */
.js-grid tr.line-row td {
  border-top: 3px solid var(--text-primary);
  height: 4px;
  padding: 0;
}
/* 进位行初始隐藏，有内容时显示 */
.js-grid tr.carry-row td { height: 20px; }

/* 进位标记 */
.js-carry-mark {
  position: absolute;
  top: -6px;
  left: 2px;
  font-size: var(--text-caption);
  color: var(--module-color);
  font-weight: var(--weight-bold);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s var(--ease-bounce);
}
.js-carry-mark.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 退位划线 */
.js-borrow-strike {
  text-decoration: line-through;
  text-decoration-color: var(--wrong);
  color: var(--text-muted);
}
.js-borrow-new {
  position: absolute;
  top: -4px;
  right: 2px;
  font-size: var(--text-caption);
  color: var(--module-color);
  font-weight: var(--weight-bold);
}

/* --- 底部固定栏（照搬数塔 tri-bottom-bar 结构）--- */
.js-bottom-bar {
  position: sticky;
  bottom: 0;
  z-index: 160;
  background: var(--bg-warm);
  padding-top: var(--space-2);
}

/* 题目 banner（先看参考物再提问，3.9 原则）*/
.js-question-banner {
  text-align: center;
  font-size: clamp(18px, 3vw, 24px);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--module-color);
}

/* 步骤面板 */
.js-step-panel {
  text-align: center;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--module-light);
  border-radius: var(--radius-md);
}
.js-step-label {
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.js-step-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.js-step-input {
  width: 80px;
  height: 48px;
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  text-align: center;
  border: 2px solid var(--module-color);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--surface);
  font-family: var(--font-display);
}
.js-step-input:focus {
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}
.js-confirm-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--module-color);
  color: var(--text-on-accent);
  font-size: var(--text-heading);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast) var(--ease-out);
}
.js-confirm-btn:active { transform: scale(0.9); }

/* 满十拆分按钮 */
.js-split-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  margin-top: var(--space-3);
  border: none;
  border-radius: var(--radius-md);
  background: var(--warning);
  color: var(--text-on-accent);
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  cursor: pointer;
  animation: js-pulse 1.2s infinite;
}
@keyframes js-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 内嵌反馈（照搬数塔 tri-feedback）*/
.js-feedback {
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  display: none;
}
.js-feedback.correct {
  display: block;
  background: var(--correct-bg);
  color: var(--correct);
}
.js-feedback.wrong {
  display: block;
  background: var(--wrong-bg);
  color: var(--wrong);
}

/* 按钮栏（照搬数塔 tri-action-bar）*/
.js-action-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.js-action-btn {
  background: var(--surface);
  border: 2px solid var(--module-color);
  border-radius: var(--radius-md);
  padding: var(--space-2) clamp(10px, 3vw, 20px);
  font-size: clamp(13px, 3.5vw, 16px);
  font-weight: var(--weight-bold);
  color: var(--module-color);
  cursor: pointer;
  transition: all var(--duration-fast);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.js-action-btn:active {
  background: var(--module-color);
  color: var(--text-on-accent);
  transform: scale(0.95);
}
.js-action-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* 分数栏（照搬数塔 tri-score-bar）*/
.js-score-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-3) var(--space-5);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-body);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
}
.js-score-bar .js-sval {
  font-weight: var(--weight-bold);
  font-size: var(--text-heading);
  color: var(--module-color);
}
.js-score-bar .js-cval {
  font-weight: var(--weight-bold);
  font-size: var(--text-heading);
  color: var(--warning);
}

/* 导航栏（照搬数塔 tri-nav-bar）*/
.js-nav-bar {
  position: relative;
  z-index: 160;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(8px, 2vw, 16px);
  padding: var(--space-2) 0;
  margin-top: var(--space-2);
}

/* 进度条 */
.js-progress-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-secondary);
}
.js-progress-bar .level-name {
  font-weight: var(--weight-bold);
  color: var(--module-color);
}

/* --- 找错模式 --- */
.js-grid td.fix-selectable {
  cursor: pointer;
}
.js-grid td.fix-selectable:active {
  background: var(--warning-bg);
}
.js-grid td.fix-selected {
  border: 2px solid var(--wrong);
  background: var(--wrong-bg);
}
.js-grid td.fix-correct {
  border: 2px solid var(--correct);
  background: var(--correct-bg);
}

/* ===== 满十拆分动画（增强版）===== */

/* 溢出数字：在格子里抖动+变红色 */
.js-overflow-num {
  color: var(--wrong) !important;
  animation: js-overflow-shake 0.5s ease-in-out;
}
@keyframes js-overflow-shake {
  0%, 100% { transform: scale(1) rotate(0); }
  20% { transform: scale(1.15) rotate(-3deg); }
  40% { transform: scale(1.15) rotate(3deg); }
  60% { transform: scale(1.1) rotate(-2deg); }
  80% { transform: scale(1.1) rotate(2deg); }
}

/* 拆分预览区 */
.js-split-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  margin: var(--space-3) 0;
}
.js-split-whole {
  color: var(--wrong);
  font-size: 1.8rem;
  animation: js-split-wobble 0.8s ease-in-out;
}
@keyframes js-split-wobble {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.js-split-arrow { color: var(--text-muted); font-size: 1.4rem; }
.js-split-ones {
  color: var(--correct);
  font-size: 1.8rem;
  animation: js-pop-in 0.4s 0.2s var(--ease-bounce) both;
}
.js-split-plus { color: var(--text-muted); font-size: 1.2rem; }
.js-split-carry {
  color: var(--module-color);
  font-size: 1.8rem;
  animation: js-pop-in 0.4s 0.4s var(--ease-bounce) both;
}
@keyframes js-pop-in {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 进位数字从格子飞走 */
.js-carry-fly-digit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
  font-weight: var(--weight-bold);
  color: var(--module-color);
  z-index: 10;
  pointer-events: none;
  transition: all 0.5s var(--ease-out);
}
.js-carry-fly-digit.flying {
  top: -50px;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.5);
}

/* 留下的个位数字缩放出现 */
.js-stay-digit {
  display: inline-block;
  color: var(--correct);
  animation: js-stay-pop 0.4s var(--ease-bounce);
}
@keyframes js-stay-pop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 进位标记弹入 */
.js-carry-pop {
  animation: js-carry-bounce 0.5s var(--ease-bounce);
}
@keyframes js-carry-bounce {
  0% { transform: scale(0) translateY(15px); opacity: 0; }
  60% { transform: scale(1.3) translateY(-3px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* 成功文字渐入 */
.js-success-text {
  color: var(--correct) !important;
  animation: js-success-fade 0.4s var(--ease-out);
}
@keyframes js-success-fade {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 提示文字抖动 */
.js-shake-text {
  animation: js-shake-text-anim 0.6s ease-in-out;
}
@keyframes js-shake-text-anim {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}

/* 格子溢出抖动（旧的保留兼容） */
@keyframes js-overflow {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.js-overflow { animation: js-overflow 0.4s; }

/* ===== 退位动画（增强版）===== */

/* 退位新数字弹入 */
.js-borrow-slide {
  animation: js-borrow-slide-in 0.4s var(--ease-bounce) forwards;
}
@keyframes js-borrow-slide-in {
  0%   { opacity: 0; transform: translateX(-12px) scale(0.7); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* 退位目标列的数字弹入（从上方滑入，模拟"10掉下来"） */
.js-borrow-arrive {
  animation: js-borrow-drop 0.5s var(--ease-bounce) forwards;
}
@keyframes js-borrow-drop {
  0%   { opacity: 0; transform: translateY(-15px) scale(0.7); }
  60%  { transform: translateY(2px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 退位闪烁（高亮正在被借的列） */
.js-borrow-flash {
  animation: js-borrow-flash-anim 0.4s ease-in-out;
}
@keyframes js-borrow-flash-anim {
  0%   { background: transparent; }
  30%  { background: var(--warning-bg); }
  100% { background: transparent; }
}

/* 退位划线样式加粗 */
.js-borrow-strike {
  text-decoration: line-through;
  text-decoration-color: var(--wrong);
  text-decoration-thickness: 2px;
  color: var(--text-muted);
  font-size: 0.85em;
}
.js-borrow-new {
  position: absolute;
  top: -2px;
  right: 4px;
  font-size: var(--text-caption);
  color: var(--module-color);
  font-weight: var(--weight-bold);
}

/* ===== 首次引导覆盖层 ===== */

.js-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.55);
  animation: js-guide-fadein 0.3s ease-out;
}
@keyframes js-guide-fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.js-guide-overlay.js-guide-fading {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

/* 聚光灯挖孔 */
.js-guide-hole {
  position: absolute;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  background: transparent;
  z-index: 1;
  animation: js-guide-hole-pulse 1.5s ease-in-out infinite;
}
@keyframes js-guide-hole-pulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 0 rgba(14,165,233,0.3); }
  50% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 8px rgba(14,165,233,0.3); }
}

/* 提示文字 */
.js-guide-tip {
  position: absolute;
  z-index: 2;
  text-align: center;
  width: 80%;
  max-width: 300px;
}
.js-guide-pointer {
  font-size: 2rem;
  animation: js-guide-bounce 0.8s ease-in-out infinite;
}
@keyframes js-guide-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.js-guide-text {
  color: white;
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  margin: var(--space-2) 0;
  line-height: var(--leading-normal);
}
.js-guide-dismiss {
  color: rgba(255,255,255,0.6);
  font-size: var(--text-caption);
  margin-top: var(--space-2);
}

/* --- 复习页 --- */
.js-review-page {
  max-width: clamp(300px, 90vw, 420px);
  margin: 0 auto;
  padding: var(--space-4);
  text-align: center;
}
.js-review-title {
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  color: var(--module-color);
  margin-bottom: var(--space-4);
}
.js-review-core {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  background: var(--module-light);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  line-height: var(--leading-normal);
}
.js-review-visual {
  padding: var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-4);
  font-size: var(--text-heading);
  line-height: var(--leading-loose);
}
.js-review-explain {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-4);
}

/* --- 过关弹窗（照搬数塔 tri-complete-overlay）--- */
.js-complete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal);
}
.js-complete-overlay.show { opacity: 1; pointer-events: auto; }
.js-complete-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  max-width: 320px;
  box-shadow: var(--shadow-lg);
}
.js-complete-card h2 {
  font-size: var(--text-title);
  font-family: var(--font-display);
  color: var(--module-color);
  margin-bottom: var(--space-3);
}
.js-complete-card .js-complete-stars {
  font-size: var(--text-hero);
  margin-bottom: var(--space-3);
}
.js-complete-card .js-complete-summary {
  font-size: var(--text-body);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}
.js-complete-card button {
  background: var(--module-color);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  cursor: pointer;
  margin: var(--space-2);
}