/* 超级玛丽标题交互效果 */
.hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.mario-char-wrapper {
   position: relative;
   display: inline-block;
   cursor: help;
   vertical-align: baseline;
 }

 /* 当内部字符显示后，取消外层的特殊鼠标样式 */
 .mario-char-wrapper:has(.mario-char.show) {
   cursor: default;
   pointer-events: none; /* 同时禁用点击，防止重复触发逻辑 */
 }
 
 .mario-char {
      display: inline-block;
      opacity: 0;
      position: relative;
      z-index: 5;
      pointer-events: none;
      /* 同步首页标题的灰白渐变色 */
      background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 100%) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      color: transparent !important;
    }

    .light-theme .mario-char {
      background: none !important;
      color: #ffffff !important;
      -webkit-text-fill-color: #ffffff !important;
    }
  
 .mario-char.show {
   opacity: 1;
 }

 .mario-question-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0.9em;
      height: 0.9em;
      background-color: #fbd000; /* 亮黄色 */
      border: 2px solid #000;
      /* 3D 效果：外边框和内高光/阴影 */
      box-shadow: 
        inset 2px 2px 0 #fff,   /* 左上高光 */
        inset -2px -2px 0 #8d6e63; /* 右下阴影 */
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 20;
      animation: mario-float 1s ease-in-out infinite;
      pointer-events: auto;
    }

    /* 四个角的小圆点 */
    .mario-question-box::before {
      content: "";
      position: absolute;
      width: 4px;
      height: 4px;
      background-color: #5d4037; /* 深褐色小点 */
      top: 4px;
      left: 4px;
      box-shadow: 
        calc(0.9em - 16px) 0 0 #5d4037,          /* 右上 */
        0 calc(0.9em - 16px) 0 #5d4037,          /* 左下 */
        calc(0.9em - 16px) calc(0.9em - 16px) 0 #5d4037; /* 右下 */
      border-radius: 50%;
    }
   
   .mario-question-box::after {
     content: "?";
     color: #fff;
     font-family: "Arial Black", Gadget, sans-serif;
     font-size: 0.7em;
     font-weight: 900;
     text-shadow: 1px 1px 0px #000;
     position: absolute;
     top: 47%; /* 向上微调 */
     left: 47%; /* 向左微调 */
     transform: translate(-50%, -50%);
     z-index: 2;
     line-height: 1;
     margin: 0;
     padding: 0;
   }
   
   .mario-question-box.hit {
     animation: mario-hit 0.4s ease-out forwards;
     background-color: #7f8c8d;
     box-shadow: inset -2px -2px 0px 0px #2c3e50, 
                 inset 2px 2px 0px 0px #95a5a6;
     cursor: default;
   }
   
   .mario-question-box.hit::after {
     content: "";
   }

   .mario-question-box.hit::before {
     display: none; /* 撞击后隐藏小圆点 */
   }

   /* 碎裂效果：产生四个小碎块 */
   .mario-question-box.shatter {
     background: none !important;
     border: none !important;
     box-shadow: none !important;
   }

   .mario-question-box.shatter::before {
     box-shadow: none; /* 清除圆点阴影 */
     border-radius: 0;
     top: 0; left: 0; /* 恢复碎片位置 */
   }
 
   .mario-question-box.shatter::before,
   .mario-question-box.shatter::after,
   .mario-question-box.shatter .shatter-piece-1,
   .mario-question-box.shatter .shatter-piece-2 {
     content: "";
     position: absolute;
     width: 0.45em;
     height: 0.45em;
     background-color: #7f8c8d;
     border: 1px solid #000;
   }

  .mario-question-box.shatter::before {
    top: 0; left: 0;
    animation: piece-1 0.5s ease-out forwards;
  }
  .mario-question-box.shatter::after {
    top: 0; right: 0;
    animation: piece-2 0.5s ease-out forwards;
  }
  .mario-question-box.shatter .shatter-piece-1 {
    bottom: 0; left: 0;
    animation: piece-3 0.5s ease-out forwards;
  }
  .mario-question-box.shatter .shatter-piece-2 {
    bottom: 0; right: 0;
    animation: piece-4 0.5s ease-out forwards;
  }

  @keyframes piece-1 { 100% { transform: translate(-30px, -30px) rotate(-45deg); opacity: 0; } }
  @keyframes piece-2 { 100% { transform: translate(30px, -30px) rotate(45deg); opacity: 0; } }
  @keyframes piece-3 { 100% { transform: translate(-30px, 30px) rotate(-90deg); opacity: 0; } }
  @keyframes piece-4 { 100% { transform: translate(30px, 30px) rotate(90deg); opacity: 0; } }
  
  @keyframes mario-float {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, calc(-50% - 5px)); }
  }
  
  @keyframes mario-hit {
    0% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, calc(-50% - 20px)); }
    100% { transform: translate(-50%, -50%); }
  }
  
  /* 丝字从箱子滑下的动画 */
   .mario-char.emerge {
     animation: mario-emerge 2.0s cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }

   @keyframes mario-emerge {
      0% {
        opacity: 0;
        transform: translateY(0); /* 起始于箱子中心（被箱子遮挡） */
      }
      30% {
        opacity: 1;
        transform: translateY(-1.8em); /* 向上冲出箱子，到达箱子上方 */
      }
      60% {
        opacity: 1;
        transform: translateY(-1.8em); /* 在箱子上方停留观察 */
      }
      100% {
        opacity: 1;
        transform: translateY(0); /* 缓慢落回文字所在行 */
      }
    }