/* ===== 角度侦探 · Angle Detective ===== */
/* 模块前缀: angle- */

/* === Level Select === */
#angleLevelGrid {
  max-width: 480px;
  margin: var(--space-4) auto;
  padding: 0 var(--space-4);
}
.angle-level-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.angle-level-btn {
  background: var(--surface);
  border: 2px solid var(--surface-dim);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.angle-level-btn:active { transform: scale(0.96); }
.angle-level-btn.locked { opacity: 0.5; pointer-events: none; }
.angle-level-btn.locked::after {
  content: '🔒'; position: absolute; top: var(--space-1); right: var(--space-2);
  font-size: var(--text-body);
}
.angle-level-btn.completed { border-color: var(--correct); background: var(--correct-bg); }
.angle-level-btn .angle-ln {
  font-size: var(--text-title); font-weight: var(--weight-bold);
  color: var(--angle-color, #6366F1); font-family: var(--font-display);
}
.angle-level-btn .angle-lname {
  font-size: var(--text-caption); color: var(--text-secondary);
  margin-top: var(--space-1);
}
.angle-done-badge {
  font-size: var(--text-caption); font-weight: var(--weight-bold);
  color: var(--correct); margin-top: var(--space-2);
}

/* === Game Wrap === */
.angle-game-wrap {
  max-width: 480px; margin: 0 auto; padding: var(--space-4);
  min-height: 100vh; position: relative;
}

/* === SVG 几何图形 === */
.angle-figure {
  width: 100%; aspect-ratio: 1; max-height: 50vh;
  margin: 0 auto var(--space-4);
}
.angle-figure svg { width: 100%; height: 100%; }

/* 线段 */
.angle-line { stroke: var(--text-primary); stroke-width: 2; stroke-linecap: round; }

/* 角弧线 — 已揭开 */
.angle-arc { fill: none; stroke-width: 2; opacity: 0.7; }
.angle-arc.revealed { stroke: var(--angle-color, #6366F1); opacity: 1; }
.angle-arc.known { stroke: var(--correct); opacity: 0.8; }

/* 角度标签 */
.angle-label {
  font-size: 14px; font-weight: var(--weight-bold); fill: var(--text-primary);
  text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
.angle-label.known { fill: var(--correct); }
.angle-label.revealed { fill: var(--angle-color, #6366F1); }

/* 迷雾覆盖 — 点击触发输入，脉冲动画提示可点击 */
.angle-fog {
  fill: var(--angle-color, #6366F1); opacity: 0.18; cursor: pointer;
  stroke: var(--angle-color, #6366F1); stroke-width: 2;
  stroke-dasharray: 6 3;
  transition: opacity 0.3s ease;
  animation: angleFogPulse 2s ease-in-out infinite;
}
.angle-fog:hover { opacity: 0.35; }
.angle-fog.active {
  opacity: 0.4; stroke-width: 3; stroke-dasharray: none;
  animation: none;
}
@keyframes angleFogPulse {
  0%, 100% { opacity: 0.18; stroke-dashoffset: 0; }
  50% { opacity: 0.35; stroke-dashoffset: 9; }
}

/* 直角标记（小方块） */
.angle-right-mark {
  fill: none; stroke: var(--text-primary); stroke-width: 1.5;
}

/* 揭开动画 */
@keyframes angleFogClear {
  0% { opacity: 0.85; }
  50% { opacity: 0.3; }
  100% { opacity: 0; }
}
@keyframes angleRevealPulse {
  0% { transform: scale(1); opacity: 0; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.angle-fog.clearing { animation: angleFogClear 0.5s ease forwards; }
.angle-label.revealing { animation: angleRevealPulse 0.5s ease forwards; }

/* 对顶角连锁光线 */
@keyframes angleCascadeBeam {
  0% { stroke-dashoffset: 40; opacity: 0; }
  50% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.angle-cascade-beam {
  stroke: var(--angle-color, #6366F1); stroke-width: 3;
  stroke-dasharray: 40; fill: none;
  animation: angleCascadeBeam 0.6s ease forwards;
}

/* 交叉点完成爆发 */
@keyframes anglePointBurst {
  0% { r: 4; opacity: 1; }
  100% { r: 30; opacity: 0; }
}
.angle-point-burst {
  fill: var(--angle-color, #6366F1); opacity: 0;
}
.angle-point-burst.active {
  animation: anglePointBurst 0.8s ease forwards;
}

/* === 迷你键盘（固定在屏幕底部，不会被截断）=== */
.angle-keypad {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 200;
  background: var(--surface);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-1);
  width: min(320px, 92vw);
  animation: angleKeypadSlideUp 0.2s ease;
}
@keyframes angleKeypadSlideUp {
  from { transform: translateX(-50%) translateY(100%); }
  to   { transform: translateX(-50%) translateY(0); }
}
.angle-keypad button {
  height: 48px;
  border: 1px solid var(--surface-dim); border-radius: var(--radius-sm);
  background: var(--surface); font-size: var(--text-heading);
  font-weight: var(--weight-bold); cursor: pointer;
  transition: background 0.15s;
}
.angle-keypad button:active { background: var(--surface-dim); }
.angle-keypad .angle-key-confirm {
  background: var(--angle-color, #6366F1); color: var(--text-on-accent);
  border-color: var(--angle-color, #6366F1);
}
.angle-keypad-close {
  position: absolute; top: 6px; right: 10px;
  font-size: 18px; color: var(--text-muted); cursor: pointer;
  padding: 4px 8px; line-height: 1;
}
.angle-keypad-close:active { color: var(--text-primary); }
.angle-keypad-display {
  grid-column: 1 / -1; text-align: center; padding: var(--space-2);
  font-size: var(--text-title); font-weight: var(--weight-bold);
  color: var(--text-primary); min-height: 36px;
  border-bottom: 2px solid var(--surface-dim); margin-bottom: var(--space-1);
}

/* === 题目/状态栏 === */
.angle-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) 0; margin-bottom: var(--space-3);
}
.angle-header .angle-progress {
  font-size: var(--text-caption); color: var(--text-secondary);
}
.angle-header .angle-score {
  font-size: var(--text-heading); font-weight: var(--weight-bold);
  color: var(--angle-color, #6366F1);
}
.angle-question-text {
  font-size: var(--text-heading); font-weight: var(--weight-bold);
  color: var(--text-primary); text-align: center;
  margin-bottom: var(--space-3);
}

/* === 底部操作区（照搬数塔 tri-bottom-bar 结构）=== */
.angle-bottom-bar {
  position: sticky; bottom: 0; z-index: 160;
  background: var(--bg-warm); padding-top: var(--space-2);
}
/* 辅助按钮栏 */
.angle-action-bar {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--space-2); margin-bottom: var(--space-3);
}
.angle-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 0.15s;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(45,42,38,0.08));
  white-space: nowrap;
}
.angle-action-btn:active {
  background: var(--module-color); color: var(--text-on-accent);
  transform: scale(0.95);
}
.angle-action-btn:disabled { opacity: 0.35; pointer-events: none; }
/* 得分/连击栏 */
.angle-score-bar {
  display: flex; justify-content: center; gap: var(--space-6);
  font-size: var(--text-caption); color: var(--text-secondary);
  padding: var(--space-1) 0;
}
.angle-score-bar .angle-sval { font-weight: var(--weight-bold); color: var(--module-color); }
/* 关卡导航栏 */
.angle-nav-bar {
  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);
}
/* 草稿工具栏上移（和数塔一样） */
body[data-module="angle"] #scratchpadBar { bottom: 200px; }

/* === 探索模式（拖线旋转）=== */
.angle-explore-hint {
  text-align: center; color: var(--text-secondary);
  font-size: var(--text-body); margin-bottom: var(--space-3);
}
.angle-discover-choices {
  display: flex; flex-direction: column; gap: var(--space-2);
  max-width: 360px; margin: var(--space-4) auto;
}
.angle-discover-btn {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--surface-dim); border-radius: var(--radius-md);
  background: var(--surface); font-size: var(--text-body);
  cursor: pointer; text-align: left; transition: all 0.2s;
}
.angle-discover-btn:active { transform: scale(0.98); }
.angle-discover-btn.correct {
  border-color: var(--correct); background: var(--correct-bg);
}
.angle-discover-btn.wrong {
  border-color: var(--wrong); background: var(--wrong-bg);
}

/* === 导航 toast（切题/切关感知）=== */
.angle-nav-toast {
  position: fixed; top: 12%; left: 50%; transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-body); font-weight: var(--weight-bold);
  background: var(--angle-color, #6366F1); color: #fff;
  z-index: 200; pointer-events: none;
  white-space: nowrap;
  animation: angleNavToastIn 0.3s ease, angleNavToastOut 0.3s ease 1.2s forwards;
}
@keyframes angleNavToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes angleNavToastOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* === 反馈浮层 === */
.angle-feedback {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg); font-size: var(--text-heading);
  font-weight: var(--weight-bold); z-index: 200;
  animation: angleFeedbackPop 0.3s ease;
  pointer-events: none;
}
.angle-feedback.correct { background: var(--correct-bg); color: var(--correct); }
.angle-feedback.wrong { background: var(--wrong-bg); color: var(--wrong); }
@keyframes angleFeedbackPop {
  0% { transform: translate(-50%,-50%) scale(0.8); opacity: 0; }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}

/* === 结算卡片 === */
.angle-complete-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 300;
  align-items: center; justify-content: center;
}
.angle-complete-overlay.show { display: flex; }
.angle-complete-card {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: var(--space-6); text-align: center;
  max-width: 340px; width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.angle-complete-card h2 { font-size: var(--text-hero); margin-bottom: var(--space-3); }
.angle-stars-display { font-size: 2rem; margin: var(--space-3) 0; }
.angle-score-summary {
  font-size: var(--text-body); color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.angle-complete-btns { display: flex; flex-direction: column; gap: var(--space-2); }

/* === 线索卡 === */
.angle-clue-card {
  background: var(--info-bg); border: 1px solid var(--info);
  border-radius: var(--radius-md); padding: var(--space-3);
  font-size: var(--text-caption); color: var(--text-secondary);
  margin-top: var(--space-3); text-align: center;
}

/* === 首次引导 === */
.angle-guide-overlay {
  position: fixed; inset: 0; z-index: 500; cursor: pointer;
}
.angle-guide-mask {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
}
.angle-guide-hole {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  background: transparent;
  border: 3px solid var(--angle-color, #6366F1);
  z-index: 1;
}
.angle-guide-finger {
  position: absolute; font-size: 32px; z-index: 2;
  animation: angleGuideBounce 1s ease-in-out infinite;
}
@keyframes angleGuideBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.angle-guide-text {
  position: absolute; left: 50%; transform: translateX(-50%);
  background: var(--surface); color: var(--text-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md); font-size: var(--text-heading);
  font-weight: var(--weight-bold); z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  white-space: nowrap;
}

/* === 复习卡片 === */
.angle-review-cards {
  min-height: 200px; padding: var(--space-4);
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(45,42,38,0.08));
}
.angle-review-card-content {
  animation: angleFeedbackPop 0.3s ease;
}
.angle-review-entry:active { transform: scale(0.97); }

/* === 迷雾角计数 + 点击提示 === */
.angle-fog-count {
  text-align: center; font-size: var(--text-caption);
  color: var(--text-muted); margin-top: var(--space-2);
}
.angle-tap-hint {
  text-align: center; font-size: var(--text-caption);
  color: var(--angle-color, #6366F1); margin-top: var(--space-1);
  animation: angleTapHintPulse 2.5s ease-in-out infinite;
}
@keyframes angleTapHintPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}