/* 规则怪谈专属样式 */
.rule-card {
  padding-bottom: 20px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.red-stamp {
  background: #8b1a1a;
  color: #ffd7b0;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid #4a0000;
  box-shadow: inset 0 0 4px #ffaaaa;
  letter-spacing: 2px;
  margin-left: 12px;
}
.rule-paper {
  background: #f4e4c1;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 2px, transparent 2px, transparent 6px);
  border-radius: 12px 12px 20px 20px;
  padding: 28px 22px;
  position: relative;
  color: #2a1a0a;
  font-family: 'Courier New', 'Noto Serif SC', monospace;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.1), 0 8px 0 #8b5a2b;
  border-left: 4px solid #a0522d;
  border-right: 4px solid #a0522d;
  margin-bottom: 20px;
}
.tear-edge {
  height: 12px;
  background: repeating-linear-gradient(90deg, transparent, transparent 8px, #1a0f1a 8px, #1a0f1a 12px);
  margin: 0 -24px;
}
.tear-edge.top { margin-bottom: -6px; }
.tear-edge.bottom { margin-top: -6px; }
.typewriter-line {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 12px;
  border-bottom: 1px dashed #c0a080;
  padding-bottom: 8px;
  color: #3a2510;
  font-weight: 500;
  min-height: 28px;
  cursor: pointer;
  transition: color 0.2s;
}
.typewriter-line:hover { background: rgba(139, 0, 0, 0.05); }
.typewriter-line.red { color: #8b0000 !important; text-shadow: 0 0 2px #ff5555; }
.rule-checkboxes {
  margin-top: 24px;
  border-top: 2px solid #8b5a2b;
  padding-top: 18px;
}
.rule-checkbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  color: #3a2510;
  font-size: 14px;
  cursor: pointer;
}
.rule-checkbox-item input {
  width: 18px;
  height: 18px;
  accent-color: #8b1a1a;
  cursor: pointer;
}
.unlocked-content {
  margin-top: 20px;
  text-align: center;
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.seal-line {
  color: #8b5a2b;
  letter-spacing: 4px;
  font-weight: 300;
  margin: 12px 0;
}
.hidden-truth {
  font-size: 18px;
  color: #8b1a1a;
  font-weight: 700;
  margin: 16px 0 8px;
}
.truth-icon {
  margin-right: 8px;
  font-size: 22px;
}
.rating-reveal {
  font-size: 32px;
  font-weight: 900;
  color: #4a0000;
  text-shadow: 2px 2px 0 #c09060;
  letter-spacing: 2px;
  margin: 10px 0;
}
.rule-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.btn-acknowledge {
  background: #3a2510;
  border: 2px solid #8b5a2b;
  color: #ffdead;
  padding: 14px 36px;
  border-radius: 40px;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 0 #1a0f0a;
  transition: all 0.1s;
  text-transform: uppercase;
  letter-spacing: 4px;
}
.btn-acknowledge:hover { transform: translateY(2px); box-shadow: 0 4px 0 #1a0f0a; }
.btn-acknowledge:active { transform: translateY(6px); box-shadow: 0 0 0 #1a0f0a; }
.glitch-warning {
  min-height: 24px;
  font-family: monospace;
  color: #8b0000;
  font-size: 14px;
  letter-spacing: 2px;
}
.glitch-text { animation: glitch 0.3s infinite; }
@keyframes glitch {
  0% { transform: skew(0deg, 0deg); opacity: 1; }
  20% { transform: skew(5deg, 1deg); opacity: 0.8; text-shadow: 2px 0 red, -2px 0 blue; }
  40% { transform: skew(-5deg, -1deg); opacity: 0.9; text-shadow: -2px 0 red, 2px 0 blue; }
  60% { transform: skew(3deg, 0.5deg); opacity: 0.7; }
  80% { transform: skew(-2deg, -0.5deg); opacity: 0.9; }
  100% { transform: skew(0deg, 0deg); opacity: 1; }
}



/* 简化交互版样式 */
.rule-confirm-wrapper {
  margin-top: 24px;
  text-align: center;
}
.rule-confirm-btn {
  background: transparent;
  border: 2px solid #8b5a2b;
  border-radius: 60px;
  padding: 14px 28px;
  color: #3a2510;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Courier New', 'Noto Serif SC', monospace;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 0 #4a2a1a;
  background-color: #e8d5b5;
  position: relative;
  z-index: 100;                     /* 确保不被其他元素遮挡 */
  min-height: 56px;                 /* 移动端最低点击高度44px以上 */
  touch-action: manipulation;       /* 禁用双击缩放，提升响应速度 */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* 扩大点击热区 */
.rule-confirm-wrapper {
  padding: 8px 0;
  z-index: 100;
  position: relative;
}

.rule-confirm-btn:hover {
  background-color: #f0e4cc;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #4a2a1a;
}
.rule-confirm-btn.confirmed {
  background-color: #5f2f4f;
  border-color: #9f6f8f;
  color: #ffeaaf;
  box-shadow: 0 0 15px #7f3f5f;
  pointer-events: none;
}
.rule-confirm-btn.confirmed .confirm-icon {
  content: "✅";
}
.confirm-icon {
  font-size: 24px;
  line-height: 1;
}
.confirm-text {
  letter-spacing: 2px;
}

/* 守护按钮启用状态 */
.btn-acknowledge:enabled {
  background: #3a2510;
  border: 2px solid #ffd966;
  color: #ffeaaf;
  box-shadow: 0 0 15px #ffd966, 0 6px 0 #1a0f0a;
  cursor: pointer;
  animation: pulseGlow 2s infinite;
}
.btn-acknowledge:enabled:hover {
  transform: translateY(2px);
  box-shadow: 0 0 25px #ffeaaf, 0 4px 0 #1a0f0a;
}
@keyframes pulseGlow {
  0%,100% { box-shadow: 0 0 10px #ffd966, 0 6px 0 #1a0f0a; }
  50% { box-shadow: 0 0 20px #ffeaaf, 0 6px 0 #1a0f0a; }
}

/* 跳动警示文字 */
.destroy-hint {
  margin-top: 12px;
  color: #8b1a1a;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  text-shadow: 0 0 5px #ff5555;
  animation: pulseWarning 1.5s infinite;
  opacity: 0.8;
}
@keyframes pulseWarning {
  0%,100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); text-shadow: 0 0 12px #ff0000; }
}

/* 守护按钮强化 */
.btn-acknowledge:enabled {
  background: #3a1a1a;
  border: 2px solid #ffd966;
  color: #ffeaaf;
  box-shadow: 0 0 20px #ff5555, 0 6px 0 #1a0f0a;
  animation: btnPulse 1.2s infinite;
  font-size: 20px;
  padding: 16px 40px;
  letter-spacing: 6px;
}
@keyframes btnPulse {
  0%,100% { box-shadow: 0 0 15px #ffd966, 0 6px 0 #1a0f0a; }
  50% { box-shadow: 0 0 30px #ff3333, 0 6px 0 #1a0f0a; transform: scale(1.02); }
}
.btn-acknowledge:enabled:hover {
  animation: none;
  background: #5f1f1f;
  box-shadow: 0 0 40px #ff0000, 0 4px 0 #1a0f0a;
  transform: translateY(2px);
}


/* 毁灭动画（保持不变） */
.destroy-animation {
  animation: destroy 0.5s forwards;
}
@keyframes destroy {
  0% { opacity: 1; transform: scale(1); filter: blur(0); }
  30% { opacity: 0.8; transform: scale(1.02); filter: blur(2px); background: #8b1a1a; }
  60% { opacity: 0.4; transform: scale(0.9); filter: blur(4px); background: #4a0000; }
  100% { opacity: 0; transform: scale(0); filter: blur(8px); display: none; }
}