/* ============================================================
 * 文件：css/map.css
 * 作用：地图界面、音符/盾牌按钮、难度气泡
 * ============================================================ */
  /* === 地图界面 === */
  #mapView {
    position: relative;
    z-index: 1;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #1a0f0a;
  }
  .map-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .map-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  .map-back-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: bold;
    color: #e8d5b5;
    border: 2px solid #8b6914;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(145deg, #4a3728, #2a1f18);
    transition: transform 0.1s, box-shadow 0.2s, border-color 0.2s;
    text-align: center;
    user-select: none;
    pointer-events: auto;
  }
  .map-back-btn:hover { box-shadow: 0 0 15px rgba(255,215,0,0.3); border-color: #ffd700; }
  .map-back-btn:active { transform: scale(0.97); }

  /* === 地图音符按钮 === */
  .map-note-btn {
    position: absolute;
    left: 20%;
    bottom: 12%;
    width: 31px;
    height: 31px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
    border: 2px solid #fff8dc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    z-index: 10;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 4px 8px rgba(0,0,0,0.4);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
    animation: noteFloatIdle 2.5s ease-in-out infinite;
  }
  .map-note-btn:hover {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 6px 12px rgba(0,0,0,0.5);
    transform: scale(1.1);
  }
  .map-note-btn:active {
    transform: scale(0.85);
  }
  .map-shield-btn {
    position: absolute;
    left: 25%;
    bottom: 25%;
    width: 31px;
    height: 31px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
    border: 2px solid #fff8dc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    z-index: 10;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 4px 8px rgba(0,0,0,0.4);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
    animation: noteFloatIdle 2.5s ease-in-out infinite;
  }
  .map-shield-btn:hover {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 6px 12px rgba(0,0,0,0.5);
    transform: scale(1.1);
  }
  .map-shield-btn:active {
    transform: scale(0.85);
  }
  .map-monster-btn {
    position: absolute;
    left: 47%;
    bottom: 16%;
    width: 31px;
    height: 31px;
    background: radial-gradient(circle at 30% 30%, #ffd700, #b8860b);
    border: 2px solid #fff8dc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    z-index: 10;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.6), 0 4px 8px rgba(0,0,0,0.4);
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
    animation: noteFloatIdle 2.5s ease-in-out infinite;
  }
  .map-monster-btn:hover {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 0 6px 12px rgba(0,0,0,0.5);
    transform: scale(1.1);
  }
  .map-monster-btn:active {
    transform: scale(0.85);
  }



  /* === 地图难度选择气泡 === */
  .map-difficulty-bubbles {
    position: absolute;
    left: calc(20% + 44px);
    bottom: 12%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
    pointer-events: auto;
    animation: bubblePopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  /* === 地图盾牌难度选择气泡 === */
  /* === 地图怪兽难度选择气泡 === */
  .map-monster-bubbles {
    position: absolute;
    left: calc(47% + 44px);
    bottom: 16%;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
    pointer-events: auto;
    animation: bubblePopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  .map-shield-bubbles {
    position: absolute;
    left: calc(25% + 44px);
    bottom: 25%;
    display: none;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
    pointer-events: auto;
    animation: bubblePopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }

  @keyframes bubblePopIn {
    from { opacity: 0; transform: translateX(-10px) scale(0.8); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
  }
  .map-diff-bubble {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.4);
    cursor: pointer;
    pointer-events: auto;
    user-select: none;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.1s, box-shadow 0.2s;
    white-space: nowrap;
    text-align: center;
  }
  .map-diff-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  }
  .map-bubble-title {
    color: #ffd700;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255,215,0,0.6), 0 2px 4px rgba(0,0,0,0.8);
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 4px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.35);
    border-radius: 12px;
    border: 1px solid rgba(255,215,0,0.25);
    animation: titleFloat 2.2s ease-in-out infinite;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
  }
  @keyframes titleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
  }
  .map-diff-bubble:active {
    transform: scale(0.95);
  }
  .map-diff-easy {
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
    border-color: #4caf50;
  }
  .map-diff-easy:hover {
    box-shadow: 0 0 15px rgba(76,175,80,0.5);
  }
  .map-diff-normal {
    background: linear-gradient(135deg, #1565c0, #0d47a1);
    border-color: #2196f3;
  }
  .map-diff-normal:hover {
    box-shadow: 0 0 15px rgba(33,150,243,0.5);
  }
  .map-diff-hard {
    background: linear-gradient(135deg, #c62828, #8e0000);
    border-color: #f44336;
  }
  .map-diff-hard:hover {
    box-shadow: 0 0 15px rgba(244,67,54,0.5);
  }

  @keyframes noteFloatIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

/* === 未解锁章节按钮 === */
.map-locked {
  filter: grayscale(100%) brightness(0.5);
  animation: none !important;
  cursor: not-allowed;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.map-locked:hover {
  transform: none !important;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0,0,0,0.4) !important;
}
.map-locked:active {
  transform: none !important;
}

/* === 锁定提示 Toast === */
@keyframes toastFadeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes toastFadeOut {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* === 困难难度气泡锁定 === */
.map-diff-hard.map-locked {
  filter: grayscale(100%) brightness(0.5);
  cursor: not-allowed;
  opacity: 0.6;
}
.map-diff-hard.map-locked:hover {
  transform: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}