/* ===== 基础重置 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif;
  background: #f0f4f8;
  color: #1a202c;
  min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; border: none; }
ul { list-style: none; }

#app { max-width: 960px; margin: 0 auto; padding: 24px; }

/* ===== 通用按钮 ===== */
.btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.2s;
}
.btn-primary { background: #3182ce; color: #fff; }
.btn-primary:hover { background: #2c5282; }
.btn-primary:disabled { background: #a0aec0; cursor: not-allowed; }
.btn-secondary { background: #e2e8f0; color: #2d3748; }
.btn-secondary:hover { background: #cbd5e0; }
.btn-success { background: #38a169; color: #fff; }
.btn-success:hover { background: #2f855a; }
.btn-warning { background: #dd6b20; color: #fff; }
.btn-warning:hover { background: #c05621; }

/* ===== 首页 ===== */
.home { text-align: center; padding: 60px 20px; }
.home h1 { font-size: 32px; margin-bottom: 16px; color: #2d3748; }
.home .desc { color: #4a5568; font-size: 16px; line-height: 1.8; margin-bottom: 32px; max-width: 600px; margin-left: auto; margin-right: auto; }
.home .meta { color: #718096; font-size: 14px; margin-bottom: 40px; }

/* ===== 顶部栏 ===== */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}
.topbar .progress { font-size: 15px; font-weight: 600; color: #2d3748; }
.topbar .timer { font-size: 15px; color: #e53e3e; font-weight: 600; }
.topbar .total { font-size: 14px; color: #718096; }

/* ===== 题目卡片 ===== */
.question-card {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.question-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 8px;
}
.question-hint { color: #718096; font-size: 14px; margin-bottom: 24px; }

/* 操作区 */
.stage {
  position: relative;
  width: 100%;
  min-height: 320px;
  background: #f7fafc;
  border: 2px dashed #cbd5e0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 目标元素 */
.target {
  width: 80px;
  height: 80px;
  background: #4299e1;
  cursor: pointer;
  transition: transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  user-select: none;
}
.target.circle { border-radius: 50%; }
.target.square { border-radius: 8px; }
.target:hover { transform: scale(1.05); }
.target:active { transform: scale(0.95); }
.target.hit { background: #38a169; }

/* 右键菜单 */
.ctx-menu {
  position: absolute;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 140px;
  z-index: 100;
  overflow: hidden;
}
.ctx-menu .item {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: #2d3748;
}
.ctx-menu .item:hover { background: #edf2f7; }

/* 拖拽网格 */
.grid-area {
  display: grid;
  gap: 4px;
  padding: 12px;
}
.grid-cell {
  width: 60px;
  height: 60px;
  background: #edf2f7;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #4a5568;
  transition: background 0.1s;
  user-select: none;
}
.grid-cell.selected { background: #fbd38d; }
.grid-cell.correct { background: #9ae6b4; }

/* 文本选择区 */
.text-area {
  padding: 16px;
  font-size: 16px;
  line-height: 1.8;
  color: #2d3748;
  max-width: 100%;
}

/* ===== 反馈 ===== */
.feedback {
  text-align: center;
  padding: 12px;
  margin-top: 16px;
  border-radius: 8px;
  font-weight: 600;
}
.feedback.success { background: #c6f6d5; color: #22543d; }
.feedback.error { background: #fed7d7; color: #742a2a; }

/* 操作区原位错误提示：叠加层 + 抖动 */
.stage.shake {
  animation: stageShake 0.5s ease;
}
@keyframes stageShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}
.stage-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(229, 62, 62, 0.10);
  pointer-events: none;
  z-index: 10;
  animation: hintFadeIn 0.25s ease;
}
.stage-hint .hint-text {
  background: rgba(229, 62, 62, 0.92);
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  max-width: 80%;
  text-align: center;
}
@keyframes hintFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== 底部操作栏 ===== */
.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  gap: 12px;
}

/* ===== 讲解面板 ===== */
.explain-panel {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  margin-top: 20px;
}
.score-badge {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.score-badge.full { background: #c6f6d5; color: #22543d; }
.score-badge.partial { background: #feebc8; color: #7b341e; }
.explain-section { margin-bottom: 20px; }
.explain-section h4 { font-size: 16px; color: #2d3748; margin-bottom: 10px; }
.explain-section ol, .explain-section ul { padding-left: 20px; color: #4a5568; line-height: 1.8; }
.explain-section li { margin-bottom: 6px; }

/* 讲解面板左右两栏布局 */
.explain-row {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.explain-left {
  flex: 1 1 45%;
  min-width: 0;
}
.explain-right {
  flex: 1 1 55%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.explain-right h4 { margin: 0; }
.explain-right #demoStage {
  margin: 0;
}
.explain-right .btn { align-self: flex-start; }

@media (max-width: 720px) {
  .explain-row { flex-direction: column; }
}

/* 动画演示舞台 */
.demo-stage {
  position: relative;
  width: 100%;
  min-height: 300px;
  background: #f7fafc;
  border: 2px solid #4299e1;
  border-radius: 10px;
  overflow: hidden;
  margin: 16px 0;
}
.demo-cursor {
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
  z-index: 200; /* 高于右键菜单(100)，确保动画中指针可见于菜单之上 */
  transform-origin: 0 0; /* 缩放以指针尖端为原点 */
  transition: none;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.35));
}
.demo-cursor svg {
  display: block;
  width: 100%;
  height: 100%;
}
.demo-cursor.pressed {
  transform: scale(1.25);
}
.demo-cursor.clicking::after {
  content: "";
  position: absolute;
  top: -10px; left: -10px;
  width: 20px; height: 20px;
  border: 3px solid #e53e3e;
  border-radius: 50%;
  transform-origin: 0 0;
  animation: ripple 0.45s ease-out;
  pointer-events: none;
}
@keyframes ripple {
  from { transform: scale(0.4); opacity: 1; }
  to { transform: scale(2.4); opacity: 0; }
}
.demo-caption {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 210; /* 高于右键菜单(100)与光标(200) */
  max-width: 80%;
  text-align: center;
}

/* ===== 键盘打字题 ===== */
.typing-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  cursor: text;
}
.typing-display {
  display: flex;
  gap: 12px;
  font-family: "Courier New", monospace;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 4px;
}
.typing-display .char {
  display: inline-block;
  min-width: 40px;
  padding: 8px 10px;
  border: 2px solid #cbd5e0;
  border-radius: 8px;
  background: #f7fafc;
  color: #a0aec0;
  text-align: center;
  transition: all 0.15s ease;
}
.typing-display .char.correct {
  background: #c6f6d5;
  border-color: #38a169;
  color: #22543d;
}
.typing-display .char.wrong {
  background: #fed7d7;
  border-color: #e53e3e;
  color: #742a2a;
  animation: charShake 0.3s ease;
}
.typing-display .char.current {
  border-color: #3182ce;
  background: #ebf8ff;
  color: #2c5282;
  box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.25);
}
@keyframes charShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.typing-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.typing-status {
  font-size: 16px;
  color: #4a5568;
  min-height: 24px;
}
.typing-status.error { color: #c53030; font-weight: 600; }

/* 虚拟键盘（演示用） */
.virtual-keyboard {
  display: flex;
  gap: 5px;
  padding: 10px;
  background: #e2e8f0;
  border-radius: 8px;
  margin-top: 10px;
}
/* 打字题演示：目标字符在上、键盘在下，均水平居中 */
.stage.demo-typing {
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
}
.vk-key {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid #a0aec0;
  border-radius: 6px;
  font-family: "Courier New", monospace;
  font-size: 15px;
  font-weight: 700;
  color: #2d3748;
  box-shadow: 0 2px 0 #a0aec0;
  transition: all 0.08s ease;
  user-select: none;
}
.vk-key.wide { width: 48px; font-size: 13px; }
/* 基准键位（F、J）：底部凸起标记，模拟真实键盘的定位凸点 */
.vk-key.home-key {
  border-bottom: 4px solid #dd6b20;
  box-shadow: 0 2px 0 #a0aec0, inset 0 -3px 0 rgba(221, 107, 32, 0.3);
}
.vk-key.pressed {
  background: #fbd38d;
  border-color: #dd6b20;
  color: #7b341e;
  transform: translateY(2px);
  box-shadow: 0 0 0 #a0aec0;
}

/* ===== 结果页 ===== */
.result-page { text-align: center; }
.result-page h2 { font-size: 28px; margin-bottom: 12px; }
.result-score { font-size: 48px; font-weight: 700; color: #38a169; margin: 20px 0; }

/* ===== 左侧浮动选题轴 ===== */
.question-nav {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 50;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 20px;
  transition: background 0.2s ease;
}
.nav-item:hover { background: rgba(66, 153, 225, 0.1); }
.nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #cbd5e0;
  border: 2px solid #a0aec0;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}
.nav-item:hover .nav-dot {
  transform: scale(1.6);
  background: #63b3ed;
  border-color: #3182ce;
  box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.25);
}
.nav-item.active .nav-dot {
  background: #3182ce;
  border-color: #2b6cb0;
  transform: scale(1.4);
  box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.35);
}
.nav-label {
  font-size: 13px;
  font-weight: 600;
  color: #718096;
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.25s ease;
  user-select: none;
}
.nav-item:hover .nav-label {
  opacity: 1;
  transform: translateX(0);
  color: #2b6cb0;
}
.nav-item.active .nav-label {
  opacity: 1;
  transform: translateX(0);
  color: #2b6cb0;
}

/* ===== Ctrl/Shift 操作提示 ===== */
.ctrl-hint {
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #ebf8ff;
  border-left: 4px solid #4299e1;
  border-radius: 4px;
  text-align: left;
}

/* ===== 大方阵（10x10）小方块 ===== */
.grid-area-large {
  gap: 2px;
  padding: 8px;
}
.grid-cell-small {
  width: 36px;
  height: 36px;
  font-size: 10px;
  color: #718096;
  border-radius: 3px;
}

/* 第7题演示：Shift 键提示 */
.demo-shift-key {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 64px;
  height: 40px;
  font-size: 14px;
}

/* ===== 第8/9题：组合键（Ctrl+C / Ctrl+V） ===== */
.stage-combo {
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.combo-source-text {
  font-size: 22px;
  font-weight: 600;
  color: #2d3748;
  line-height: 1.8;
  margin: 0;
  user-select: text;
  cursor: text;
  letter-spacing: 1px;
}
.combo-source-text::selection {
  background: #bee3f8;
  color: #2b6cb0;
}
.combo-hint {
  font-size: 14px;
  color: #4a5568;
  padding: 10px 14px;
  background: #ebf8ff;
  border-left: 4px solid #4299e1;
  border-radius: 4px;
}
.combo-key-visual {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.combo-key-visual .k {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 64px;
  padding: 0 18px;
  background: #fff;
  border: 2px solid #a0aec0;
  border-radius: 8px;
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: 700;
  color: #2d3748;
  box-shadow: 0 3px 0 #a0aec0;
  transition: all 0.08s ease;
}
.combo-key-visual .plus {
  font-size: 26px;
  font-weight: 700;
  color: #718096;
}
.combo-key-visual .k.pressed {
  background: #fbd38d;
  border-color: #dd6b20;
  color: #7b341e;
  transform: translateY(3px);
  box-shadow: 0 0 0 #a0aec0;
}

/* ===== 第8题：复制粘贴 ===== */
.stage-copy-paste {
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  align-items: center;
  padding: 24px;
}
.copy-source-text {
  font-size: 22px;
  font-weight: 600;
  color: #2d3748;
  line-height: 1.8;
  margin: 0;
  user-select: text;
  cursor: text;
  letter-spacing: 1px;
}
.copy-source-text::selection {
  background: #bee3f8;
  color: #2b6cb0;
}
.paste-target-input {
  width: 80%;
  max-width: 420px;
  padding: 12px 16px;
  font-size: 18px;
  border: 2px solid #cbd5e0;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  text-align: center;
}
.paste-target-input:focus {
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}
.result-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.result-table th, .result-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}
.result-table th { background: #edf2f7; font-weight: 600; }
.result-table tr:last-child td { border-bottom: none; }

/* ===== 工具类 ===== */
.hidden { display: none !important; }