@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@500;700&display=swap'); 

 
/* 全域設定 */
    * {
      box-sizing: border-box;
    }

    html {
      overflow-x: hidden;
    }

    body {
      background: #0a0a0f;
      color: #fff;
      font-family: 'Rajdhani', sans-serif;
      overflow-x: hidden;
    }

    /* 信箱模態框 - 重新設計 */
    .mail-modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.85);
      z-index: 10000;
      display: none;
      overflow-y: auto;
      overflow-x: hidden;
      backdrop-filter: blur(8px);
      -webkit-overflow-scrolling: touch;
    }

    .mail-modal-content {
      background: linear-gradient(135deg, rgba(10,10,30,0.98) 0%, rgba(20,20,50,0.98) 100%);
      border: 2px solid rgba(0,255,255,0.3);
      border-radius: 12px;
      width: 96%;
      max-width: 1200px;
      height: 94vh;
      max-height: none;
      margin: 3vh auto;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,255,255,0.2);
    }

    .mail-modal-header {
      background: linear-gradient(135deg, rgba(0,255,255,0.1), rgba(102,126,234,0.1));
      padding: 0 12px 4px 12px;
      border-bottom: 1px solid rgba(0,255,255,0.3);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }

    .mail-modal-title {
      color: #00ffff;
      font-size: 0.9em;
      font-weight: bold;
      font-family: 'Orbitron', sans-serif;
      text-shadow: 0 0 10px rgba(0,255,255,0.5);
    }

    .mail-close-btn {
      background: rgba(255,68,68,0.2);
      border: 1px solid #ff4444;
      color: #ff4444;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      flex-shrink: 0;
    }

    .mail-close-btn:hover:not(:disabled) {
      background: rgba(255,68,68,0.4);
      box-shadow: 0 0 15px rgba(255,68,68,0.5);
    }

    .mail-close-btn:disabled {
      opacity: 0.3;
      cursor: not-allowed;
      pointer-events: none;
    }

    .mail-iframe-container {
      flex: 1;
      padding: 10px;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .mail-iframe {
      width: 100%;
      height: 100%;
      border: none;
      border-radius: 8px;
      background: white;
    }

    .mail-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #00ffff;
      font-family: 'Orbitron', sans-serif;
      font-size: 1.1em;
    }

    .mail-loading.hidden {
      display: none;
    }

    /* 主容器 */
    .main-container {
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px;
      position: relative;
      z-index: 1;
    }

    /* 標題 */
    .fancy-title {
      text-align: center;
      font-family: 'Orbitron', sans-serif;
      font-size: 1.8em;
      margin: 20px 0 30px;
      background: linear-gradient(90deg, #00ffff, #ff00ff, #00ffff);
      background-size: 200% auto;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradientMove 3s linear infinite;
    }

    @keyframes gradientMove {
      0% { background-position: 0% center; }
      100% { background-position: 200% center; }
    }

    /* 玩家資訊區域 - 玻璃半透明質感 */
    .player-info-section {
     text-align: center;
     margin: 15px;
     background: linear-gradient(135deg, rgba(15, 15, 35, 0.8) 0%, rgba(25, 25, 55, 0.6) 100%);
     backdrop-filter: blur(15px);
     border: 1px solid rgba(0, 255, 255, 0.2);
     border-radius: 15px;
     padding: 30px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     position: relative;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     justify-content: center;
     min-height: 200px;
   }

    .player-info-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 255, 0.05) 50%, transparent 70%);
      animation: sectionShine 4s ease-in-out infinite;
      pointer-events: none;
    }

    /* 優化的信箱按鈕 */
    .mail-button-corner {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 2;
    }

    /* 刷新按鈕（左側） */
    .refresh-button-corner {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 2;
    }

    .refresh-button {
      position: relative;
      display: inline-block;
    }

    .refresh-button button {
      width: 45px;
      height: 45px;
      border-radius: 12px;
      background: linear-gradient(145deg, #2d3a4a, #1a252f);
      border: 2px solid #4CAF50;
      color: #4CAF50;
      font-size: 20px;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow:
        0 4px 15px rgba(76, 175, 80, 0.3),
        inset 0 0 15px rgba(76, 175, 80, 0.1),
        0 0 20px rgba(76, 175, 80, 0.15);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .refresh-button button::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(76, 175, 80, 0.3) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .refresh-button button:hover::before {
      opacity: 1;
    }

    .refresh-button button:hover:not(:disabled) {
      transform: translateY(-3px) scale(1.05) rotate(180deg);
      background: linear-gradient(145deg, #1a252f, #2d3a4a);
      box-shadow:
        0 8px 25px rgba(76, 175, 80, 0.5),
        inset 0 0 20px rgba(76, 175, 80, 0.2),
        0 0 30px rgba(76, 175, 80, 0.3);
    }

    .refresh-button button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: #666;
      color: #666;
      box-shadow: none;
    }

    .refresh-button button:disabled:hover {
      transform: none;
    }

    /* 手機版調整 */
    @media (max-width: 768px) {
      .refresh-button-corner {
        top: 15px;
        left: 15px;
      }

      .refresh-button button {
        width: 40px;
        height: 40px;
        font-size: 18px;
        border-radius: 10px;
      }
    }

    @media (max-width: 480px) {
      .refresh-button-corner {
        top: 12px;
        left: 12px;
      }

      .refresh-button button {
        width: 35px;
        height: 35px;
        font-size: 16px;
        border-radius: 8px;
      }
    }

    .mail-button {
      position: relative;
      display: inline-block;
    }

    .mail-button button {
      width: 45px;
      height: 45px;
      border-radius: 12px;
      background: linear-gradient(145deg, #1e3c72, #2a5298);
      border: 2px solid #00e5ff;
      color: #00e5ff;
      font-size: 24px;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 
        0 4px 15px rgba(0, 229, 255, 0.3),
        inset 0 0 15px rgba(0, 229, 255, 0.1),
        0 0 30px rgba(0, 229, 255, 0.2);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .mail-button button::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(0, 229, 255, 0.3) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .mail-button button:hover::before {
      opacity: 1;
      animation: pulse 1s infinite;
    }

    .mail-button button:hover {
      transform: translateY(-3px) scale(1.05);
      background: linear-gradient(145deg, #2a5298, #1e3c72);
      box-shadow: 
        0 8px 25px rgba(0, 229, 255, 0.5),
        inset 0 0 20px rgba(0, 229, 255, 0.2),
        0 0 40px rgba(0, 229, 255, 0.3);
    }

    .mail-notification {
      position: absolute;
      top: -10px;
      right: -10px;
      background: linear-gradient(135deg, #ff1744, #ff5252);
      color: white;
      border-radius: 50%;
      width: 22px;
      height: 22px;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      animation: notificationPulse 2s infinite;
      box-shadow: 
        0 0 15px rgba(255, 23, 68, 0.6),
        0 0 25px rgba(255, 23, 68, 0.4);
      z-index: 10;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    @keyframes notificationPulse {
      0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 23, 68, 0.6);
      }
      50% { 
        transform: scale(1.15);
        box-shadow: 0 0 25px rgba(255, 23, 68, 0.8);
      }
    }

    /* 等級 + 頭像 橫排 */
    .player-level-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 20px;
      position: relative;
    }

    /* 頭像圓框 */
    .player-avatar-icon {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      border: 3px solid rgba(0, 255, 255, 0.5);
      object-fit: cover;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
      position: absolute;
      left: 60px;
      top: 50%;
      transform: translateY(-50%);
    }

    .player-avatar-icon:hover {
      border-color: #00ffff;
      box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
      transform: translateY(-50%) scale(1.08);
    }

    /* 等級顯示 */
    .player-level {
      font-family: 'Orbitron', sans-serif;
      font-size: 3em;
      background: linear-gradient(45deg, #00ffff, #ffffff, #00ffff);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textShine 3s ease-in-out infinite;
      font-weight: 900;
      text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
      text-align: center;
    }
   
   /* 確保經驗條容器置中 */
   .exp-container {
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
     text-align: center;
   }

    @keyframes textShine {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    /* 經驗值條 */
    .exp-container {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }

    .exp-bar {
      width: 100%;
      height: 35px;
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      border: 3px solid rgba(0, 255, 255, 0.6);
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      box-shadow: 
        inset 0 0 20px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(0, 255, 255, 0.3);
    }

    .exp-fill {
      height: 100%;
      background: linear-gradient(90deg, 
        #00ffff 0%, 
        #0099cc 25%,
        #66ccff 50%,
        #0099cc 75%,
        #00ffff 100%
      );
      background-size: 300% 100%;
      animation: expFlow 2s linear infinite;
      border-radius: 17px;
      position: relative;
      transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    }

    @keyframes expFlow {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }

    .exp-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: 'Orbitron', sans-serif;
      font-weight: 800;
      color: #fff;
      text-shadow: 
        0 0 10px rgba(0, 0, 0, 1),
        0 0 20px rgba(0, 255, 255, 0.5);
      font-size: 16px;
      z-index: 10;
    }

    /* 稱號容器樣式 */
    .player-title-container {
      margin-top: 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .player-title-container:hover .player-title {
      transform: translateY(-2px);
    }

    /* 遊戲內容網格布局 */
    .game-content-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 15px;
      margin: 15px;
    }

    /* ==========================================
       副本入口 - 三區塊網格佈局
       ========================================== */

    /* 外層容器 - Grid 佈局 */
    .dungeon-grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 20px;
    }

    /* 副本區塊 - 溫暖琥珀色玻璃質感 */
    .dungeon-section {
      background: linear-gradient(135deg, rgba(35, 25, 20, 0.8) 0%, rgba(45, 30, 25, 0.65) 100%);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 160, 80, 0.25);
      border-radius: 15px;
      padding: 2px;
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 0 25px rgba(255, 140, 60, 0.03);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .dungeon-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(255, 160, 80, 0.04) 50%, transparent 70%);
      animation: sectionShine 4s ease-in-out infinite;
      pointer-events: none;
    }

    /* 區塊標題 */
    .dungeon-section-title {
      font-family: 'Orbitron', sans-serif;
      font-size: 1.1em;
      color: #ffa500;
      margin: 0 0 20px 0;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
      position: relative;
      z-index: 1;
    }

    /* 左側單人副本 - 跨兩行 */
    .solo-section {
      grid-column: 1;
      grid-row: 1 / 3;
    }

    .dungeon-button-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      align-items: center;
      position: relative;
      z-index: 1;
      margin: 4px 0; /* 確保按鈕與上下邊框保持間距 */
    }

    /* 右上多人副本 */
    .multiplayer-section {
      grid-column: 2;
      grid-row: 1;
    }

    /* 多人副本按鈕間距 */
    .multiplayer-section .game-button {
      margin: 2px 0;
    }

    /* 右下限時活動 */
    .event-section {
      grid-column: 2;
      grid-row: 2;
      overflow: hidden; /* 防止動畫特效超出框框 */
    }

    /* 限時活動區塊內容間距 */
    .event-section > .button-container,
    .event-section > .no-event-placeholder {
      margin: 2px 0;
    }

    /* 限時活動按鈕容器 - 初始隱藏 */
    .event-section #limitedEventContainer {
      display: none;
      position: relative;
      z-index: 1;
    }

    /* 無活動佔位提示 - 默認顯示 */
    .no-event-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 20px;
      color: rgba(255, 255, 255, 0.5);
      font-family: 'Rajdhani', sans-serif;
      font-size: 1em;
      position: relative;
      z-index: 1;
    }

    .no-event-placeholder .no-event-icon {
      font-size: 2em;
      opacity: 0.6;
    }

    .no-event-placeholder .no-event-text {
      font-weight: 600;
      letter-spacing: 1px;
    }

    @keyframes rotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes sectionShine {
      0%, 100% { transform: translateX(-100%); }
      50% { transform: translateX(100%); }
    }

    /* 功能區網格 */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
    }

    /* 功能卡片 */
    /* 功能卡片 - 玻璃半透明質感 */
    .feature-card {
      background: linear-gradient(135deg, rgba(15, 15, 35, 0.8) 0%, rgba(25, 25, 55, 0.6) 100%);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(0, 255, 255, 0.2);
      border-radius: 15px;
      padding: 3px 25px 25px 25px;
      position: relative;
      transition: all 0.3s ease;
      overflow: hidden;
      text-align: center;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .feature-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 255, 0.05) 50%, transparent 70%);
      animation: sectionShine 4s ease-in-out infinite;
      pointer-events: none;
    }

    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
      border-color: rgba(0, 255, 255, 0.4);
    }

    .card-title {
      font-family: 'Orbitron', sans-serif;
      font-size: 1em;
      color: #00ffff;
      margin-bottom: 15px;
      text-transform: uppercase;
      letter-spacing: 2px;
      /* SFL-RPG 按鈕風格 */
      display: inline-block;
      background: linear-gradient(135deg, rgba(0, 255, 255, 0.15) 0%, rgba(139, 92, 246, 0.08) 100%);
      border: 2px solid rgba(0, 255, 255, 0.5);
      padding: 8px 20px;
      border-radius: 10px;
      cursor: default;
      pointer-events: none;
    }

    .button-group {
      display: flex;
      gap: 15px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* 優化的遊戲按鈕 */
    .game-button {
      min-width: 120px;
      height: 50px;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      font-family: 'Rajdhani', sans-serif;
      font-weight: 700;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 20px;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
      backdrop-filter: blur(10px);
      box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .game-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.5s ease;
    }

    .game-button:hover::before {
      left: 100%;
    }

    .game-button:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.3),
        0 0 20px var(--glow-color, rgba(255, 255, 255, 0.3));
    }

    /* 主要按鈕 - 副本入口 */
    .game-button.primary {
      width: 200px;
      height: 70px;
      font-size: 20px;
      background: linear-gradient(135deg, #ff6b35, #f7931e);
      color: #fff;
      border: 2px solid rgba(255, 107, 53, 0.5);
      --glow-color: rgba(255, 107, 53, 0.5);
      box-shadow:
        0 6px 20px rgba(255, 107, 53, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    }

    .game-button.primary:hover {
      box-shadow: 
        0 10px 30px rgba(255, 107, 53, 0.5),
        0 0 40px rgba(255, 107, 53, 0.4),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    }

   .game-button.multiplayer {
     width: 200px;
     height: 70px;
     font-size: 20px;
     background: linear-gradient(135deg, #3f51b5, #9c27b0);
     color: #fff;
     border: 2px solid rgba(63, 81, 181, 0.5);
     --glow-color: rgba(63, 81, 181, 0.5);
     box-shadow:
       0 6px 20px rgba(63, 81, 181, 0.3),
       inset 0 0 20px rgba(255, 255, 255, 0.1);
   }
   
   .game-button.multiplayer:hover {
     box-shadow: 
       0 10px 30px rgba(63, 81, 181, 0.5),
       0 0 40px rgba(156, 39, 176, 0.4),
       inset 0 0 20px rgba(255, 255, 255, 0.2);
   }

   .game-button.starStory {
     background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
     background-size: 200% 200%;
     color: #fff;
     border: 2px solid rgba(255, 255, 255, 0.3);
     --glow-color: rgba(138, 43, 226, 0.6);
     position: relative;
     overflow: hidden;
     animation: starBackground 8s ease-in-out infinite;
   }
   
   /* 星空背景動畫 */
   @keyframes starBackground {
     0%, 100% { 
       background-position: 0% 50%;
       box-shadow: 
         0 0 20px rgba(138, 43, 226, 0.4),
         0 0 40px rgba(75, 0, 130, 0.3),
         inset 0 0 60px rgba(138, 43, 226, 0.1);
     }
     50% { 
       background-position: 100% 50%;
       box-shadow: 
         0 0 30px rgba(138, 43, 226, 0.6),
         0 0 60px rgba(75, 0, 130, 0.4),
         inset 0 0 80px rgba(138, 43, 226, 0.2);
     }
   }
   
   /* 星空粒子效果 */
   .game-button.starStory::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: 
       radial-gradient(2px 2px at 20px 30px, #fff, transparent),
       radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
       radial-gradient(1px 1px at 90px 40px, #fff, transparent),
       radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
       radial-gradient(2px 2px at 160px 30px, #fff, transparent);
     background-repeat: repeat;
     background-size: 200px 100px;
     animation: sparkle 4s linear infinite;
     border-radius: 25px;
     opacity: 0.8;
   }
   
   /* 星光閃爍動畫 */
   @keyframes sparkle {
     0% { transform: translateX(0); opacity: 0.8; }
     100% { transform: translateX(200px); opacity: 0.3; }
   }
   
   /* 懸停效果增強 */
   .game-button.starStory:hover {
     transform: translateY(-2px) scale(1.05);
     box-shadow: 
       0 8px 25px rgba(138, 43, 226, 0.6),
       0 0 50px rgba(75, 0, 130, 0.5),
       inset 0 0 100px rgba(138, 43, 226, 0.3);
     border-color: rgba(255, 255, 255, 0.6);
   }
   
   /* 按鈕圖標特殊效果 */
   .game-button.starStory .button-icon {
     filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
     animation: iconGlow 2s ease-in-out infinite alternate;
   }
   
   @keyframes iconGlow {
     0% { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); }
     100% { filter: drop-shadow(0 0 10px rgba(138, 43, 226, 0.9)); }
   }
   
   /* 禁用狀態 */
   .game-button.starStory:disabled {
     background: linear-gradient(135deg, #2c3e50, #34495e);
     animation: none;
     box-shadow: none;
   }
   
   .game-button.starStory:disabled::before {
     display: none;
   }
   
   .game-button.starStory:disabled .button-icon {
     animation: none;
     filter: none;
   }

    /* 不同類型按鈕配色 */
    .game-button.boss {
      background: linear-gradient(135deg, #e74c3c, #c0392b);
      color: #fff;
      border: 2px solid rgba(231, 76, 60, 0.5);
      --glow-color: rgba(231, 76, 60, 0.5);
       position: relative;
       overflow: hidden;
    }

    .game-button.story {
      background: linear-gradient(135deg, #9b59b6, #8e44ad);
      color: #fff;
      border: 2px solid rgba(155, 89, 182, 0.5);
      --glow-color: rgba(155, 89, 182, 0.5);
    }

    .game-button.equipment {
      background: linear-gradient(135deg, #3498db, #2980b9);
      color: #fff;
      border: 2px solid rgba(52, 152, 219, 0.5);
      --glow-color: rgba(52, 152, 219, 0.5);
    }

    .game-button.skills {
      background: linear-gradient(135deg, #2ecc71, #27ae60);
      color: #fff;
      border: 2px solid rgba(46, 204, 113, 0.5);
      --glow-color: rgba(46, 204, 113, 0.5);
    }

   .game-button.partner {
     background: linear-gradient(135deg, #8e44ad, #6c5ce7);
     color: #fff;
     border: 2px solid rgba(142, 68, 173, 0.5);
     --glow-color: rgba(142, 68, 173, 0.5);
   }

   .game-button.spaceship {
     background: linear-gradient(135deg, #00d4ff, #0099cc);
     color: #fff;
     border: 2px solid rgba(0, 212, 255, 0.7);
     --glow-color: rgba(0, 212, 255, 0.5);
   }

    .game-button.workshop {
      background: linear-gradient(135deg, #f39c12, #e67e22);
      color: #fff;
      border: 2px solid rgba(243, 156, 18, 0.5);
      --glow-color: rgba(243, 156, 18, 0.5);
    }

    .game-button.shop {
      background: linear-gradient(135deg, #e67e22, #d35400);
      color: #fff;
      border: 2px solid rgba(230, 126, 34, 0.5);
      --glow-color: rgba(230, 126, 34, 0.5);
    }

    .game-button.ranking {
      background: linear-gradient(135deg, #34495e, #2c3e50);
      color: #fff;
      border: 2px solid rgba(52, 73, 94, 0.5);
      --glow-color: rgba(52, 73, 94, 0.5);
    }

   .game-button.codex {
     background: linear-gradient(135deg, #8e24aa, #4a148c);
     color: #fff;
     border: 2px solid rgba(74, 20, 140, 0.5);
     --glow-color: rgba(142, 36, 170, 0.6);
   }

    /* 按鈕圖標 */
    .button-icon {
      font-size: 1.2em;
    }

    /* 禁用狀態 */
    .game-button:disabled {
      background: linear-gradient(135deg, #555, #333);
      color: #999;
      cursor: not-allowed;
      opacity: 0.5;
      border-color: #555;
    }

    .game-button:disabled:hover {
      transform: none;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

   /* 夥伴故事按鈕 */
   .game-button.partnerStory {
     background: linear-gradient(135deg, #e91e63, #ad1457, #880e4f);
     background-size: 200% 200%;
     color: #fff;
     border: 2px solid rgba(233, 30, 99, 0.5);
     --glow-color: rgba(233, 30, 99, 0.5);
     position: relative;
     overflow: hidden;
     animation: partnerStoryBg 6s ease-in-out infinite;
   }

   @keyframes partnerStoryBg {
     0%, 100% {
       background-position: 0% 50%;
       box-shadow: 0 0 15px rgba(233, 30, 99, 0.3);
     }
     50% {
       background-position: 100% 50%;
       box-shadow: 0 0 25px rgba(233, 30, 99, 0.5);
     }
   }

   .game-button.partnerStory:hover {
     transform: translateY(-2px) scale(1.05);
     box-shadow:
       0 8px 25px rgba(233, 30, 99, 0.5),
       0 0 40px rgba(173, 20, 87, 0.4);
     border-color: rgba(255, 255, 255, 0.5);
   }

   .game-button.partnerStory:disabled {
     background: linear-gradient(135deg, #2c3e50, #34495e);
     animation: none;
     box-shadow: none;
   }

/* 按鈕容器 */
.button-container {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
}

/* 確保有標籤的按鈕大小正確 */
.button-container .game-button {
  flex-shrink: 0;
}

/* 世界王按鈕 - 保持光效限制 */
.game-button.boss {
  position: relative;
  overflow: hidden !important; /* 限制光效 */
}

.game-button.boss::before {
  border-radius: 25px;
}

/* 等級限制提示 - 相對於容器定位 */
.level-requirement {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1000;
  
  min-width: 20px;
  height: 20px;
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 6px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: linear-gradient(135deg, #ff1744, #ff5252);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 2px 8px rgba(255, 23, 68, 0.5),
    0 0 15px rgba(255, 23, 68, 0.4);
  
  animation: warningPulse 2s ease-in-out infinite;
  white-space: nowrap;
  width: auto;
}

.level-requirement.chaos-locked {
  background: linear-gradient(135deg, #1a0a1f, #2d0a2d);
  color: #ff1493;
  border: 2px solid rgba(255, 20, 147, 0.6);
  box-shadow: 
    0 4px 12px rgba(255, 20, 147, 0.5),
    0 0 20px rgba(139, 0, 139, 0.4),
    inset 0 0 15px rgba(255, 20, 147, 0.2);
  text-shadow: 0 0 8px rgba(255, 20, 147, 0.9);
}

@keyframes warningPulse {
  0%, 100% { 
    opacity: 0.9;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.05);
  }
}

    /* 響應式設計 */
    @media (max-width: 768px) {
      .main-container {
        padding: 15px 15px 100px 15px; /* 增加底部 padding 到 100px */
      }

      /* 手機版模態框 - 幾乎全螢幕，底部留空避免被 index.html footer 遮擋 */
      .mail-modal-content {
        width: 98%;
        height: calc(100vh - 80px);
        max-height: none;
        margin: 10px auto;
        padding-bottom: 60px;
        border-radius: 10px;
      }

      .feature-grid {
        grid-template-columns: 1fr;
      }

      .game-button {
        min-width: 100px;
        height: 50px;
        font-size: 14px;
      }

      .game-button.primary {
        width: 160px;
        height: 60px;
        font-size: 18px;
      }

       .game-button.multiplayer {
        width: 160px;
        height: 60px;
        font-size: 18px;
      }

      .fancy-title {
        font-size: 1.3em;
      }

      .player-level {
        font-size: 2.5em;
      }

      /* 手機版頭像縮小 */
      .player-avatar-icon {
        width: 64px;
        height: 64px;
        left: 10px;
      }

      /* 信箱按鈕手機版 - 跟 refresh 一樣大 */
      .mail-button-corner {
        top: 15px;
        right: 15px;
      }

      .mail-button button {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 18px;
      }
    }

    @media (max-width: 480px) {
      .player-avatar-icon {
        width: 56px;
        height: 56px;
        left: 5px;
      }

      .mail-button-corner {
        top: 12px;
        right: 12px;
      }

      .mail-button button {
        width: 35px;
        height: 35px;
        border-radius: 8px;
        font-size: 16px;
      }

      /* 小螢幕手機版模態框 - 幾乎全螢幕，底部留空避免被 index.html footer 遮擋 */
      .mail-modal-content {
        width: 99%;
        height: calc(100vh - 70px);
        margin: 5px auto;
        padding-bottom: 70px;
        border-radius: 8px;
      }

      .button-group {
        flex-direction: column;
        align-items: stretch;
      }

      .game-button {
        width: 100%;
      }

      /* 確保按鈕容器也撐滿寬度 */
      .shop-button-container,
      .button-container {
        width: 100%;
        display: flex;
      }
    }

/* 經驗值文字響應式設計 - 手機優化 */
@media (max-width: 768px) {
  .exp-text {
    font-size: 13px; /* 從16px縮小到13px */
    font-weight: 700; /* 稍微調整字重，保持清晰度 */
  }
}

@media (max-width: 480px) {
  .exp-text {
    font-size: 11px; /* 在更小的手機上進一步縮小 */
    font-weight: 700;
  }
}

@media (max-width: 360px) {
  .exp-text {
    font-size: 10px; /* 超小螢幕的最小字體 */
    font-weight: 700;
  }
}

/* 世界王狀態提示 - 不同狀態的顏色 */
.level-requirement.status-open {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  border: 2px solid rgba(39, 174, 96, 0.3);
  box-shadow: 
    0 2px 8px rgba(39, 174, 96, 0.5),
    0 0 15px rgba(39, 174, 96, 0.4);
}

.level-requirement.status-maintenance {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  border: 2px solid rgba(231, 76, 60, 0.3);
  box-shadow: 
    0 2px 8px rgba(231, 76, 60, 0.5),
    0 0 15px rgba(231, 76, 60, 0.4);
}

.level-requirement.status-locked {
  background: linear-gradient(135deg, #ff1744, #ff5252);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 2px 8px rgba(255, 23, 68, 0.5),
    0 0 15px rgba(255, 23, 68, 0.4);
}

/* 功能區塊（非副本）的鎖定標籤 - 低調版 */
.feature-card .level-requirement.status-locked {
  background: linear-gradient(135deg, #5a5a5a, #6e6e6e);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  animation: none;
  opacity: 0.85;
}

/* 開放狀態的動畫 */
@keyframes openPulse {
  0%, 100% { 
    opacity: 0.9;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.02);
  }
}

.level-requirement.status-open {
  animation: openPulse 3s ease-in-out infinite;
}

/* 維護狀態的動畫 */
@keyframes maintenancePulse {
  0%, 100% { 
    opacity: 0.9;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.05);
  }
}

.level-requirement.status-maintenance {
  animation: maintenancePulse 2s ease-in-out infinite;
}

 /* 次元商店 NEW 提醒樣式 */
 .shop-button-container {
   position: relative;
   display: inline-flex;
   align-items: flex-start;
 }

 .shop-button-container .game-button {
   flex-shrink: 0;
 }

 .shop-new-notification {
   position: absolute;
   top: -8px;
   right: -8px;
   background: linear-gradient(135deg, #ff1744, #ff5252);
   color: white;
   border-radius: 12px;
   padding: 4px 8px;
   font-size: 12px;
   font-weight: 700;
   font-family: 'Rajdhani', sans-serif;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   box-shadow: 
     0 2px 8px rgba(255, 23, 68, 0.6),
     0 0 15px rgba(255, 23, 68, 0.4);
   animation: newNotificationPulse 2s ease-in-out infinite;
   z-index: 100;
   min-width: 35px;
   text-align: center;
   border: 2px solid rgba(255, 255, 255, 0.3);
   display: none;
 }

 @keyframes newNotificationPulse {
   0%, 100% {
     transform: scale(1);
     box-shadow:
       0 2px 8px rgba(255, 23, 68, 0.6),
       0 0 15px rgba(255, 23, 68, 0.4);
   }
   50% {
     transform: scale(1.1);
     box-shadow:
       0 4px 15px rgba(255, 23, 68, 0.8),
       0 0 25px rgba(255, 23, 68, 0.6);
   }
 }

/* 遊戲攻略 - 新手必看標籤 */
.guide-beginner-badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: linear-gradient(135deg, #ffd700, #ffaa00, #ff8c00);
  color: #1a0a00;
  border-radius: 14px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow:
    0 2px 10px rgba(255, 170, 0, 0.8),
    0 0 20px rgba(255, 215, 0, 0.6),
    0 0 40px rgba(255, 140, 0, 0.3);
  animation: guideBeginnerPulse 1.5s ease-in-out infinite;
  z-index: 100;
  min-width: 40px;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, 0.6);
  text-shadow: 0 1px 2px rgba(255, 200, 0, 0.5);
}

@keyframes guideBeginnerPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 2px 10px rgba(255, 170, 0, 0.8),
      0 0 20px rgba(255, 215, 0, 0.6),
      0 0 40px rgba(255, 140, 0, 0.3);
  }
  50% {
    transform: scale(1.15);
    box-shadow:
      0 4px 20px rgba(255, 170, 0, 1),
      0 0 35px rgba(255, 215, 0, 0.9),
      0 0 60px rgba(255, 140, 0, 0.5);
  }
}

/* 限時活動按鈕樣式 */
.event-button-container {
  position: relative;
  display: inline-block;
}

.game-button.limited-event {
  width: 200px;
  height: 70px;
  font-size: 20px;
  background: linear-gradient(135deg, #ff1493, #ff69b4);
  color: #fff;
  border: 2px solid rgba(255, 20, 147, 0.5);
  --glow-color: rgba(255, 20, 147, 0.5);
  box-shadow:
    0 6px 20px rgba(255, 20, 147, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  animation: limitedEventGlow 2s ease-in-out infinite;
}

.game-button.limited-event:hover {
  background: linear-gradient(135deg, #ff69b4, #ff1493);
  border-color: rgba(255, 105, 180, 0.8);
  box-shadow:
    0 10px 30px rgba(255, 20, 147, 0.5),
    0 0 40px rgba(255, 20, 147, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

.game-button.limited-event:active {
  transform: translateY(-1px);
  box-shadow:
    0 4px 15px rgba(255, 20, 147, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
}

@keyframes limitedEventGlow {
  0%, 100% {
    box-shadow:
      0 6px 20px rgba(255, 20, 147, 0.3),
      inset 0 0 20px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow:
      0 8px 30px rgba(255, 20, 147, 0.5),
      0 0 30px rgba(255, 105, 180, 0.4),
      inset 0 0 20px rgba(255, 255, 255, 0.2);
  }
}

.event-label {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 1000;
  min-width: 20px;
  height: 20px;
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff1493, #ff69b4);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 2px 8px rgba(255, 20, 147, 0.5),
    0 0 15px rgba(255, 20, 147, 0.4);
  animation: eventLabelPulse 2s ease-in-out infinite;
  white-space: nowrap;
  width: auto;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
}

@keyframes eventLabelPulse {
  0%, 100% {
    opacity: 0.9;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* 每日通知標籤 - 左上角圓形 */
.daily-notice-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1000;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff1744, #ff5252);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 2px 8px rgba(255, 23, 68, 0.5),
    0 0 15px rgba(255, 23, 68, 0.4);
  animation: dailyNoticePulse 2s ease-in-out infinite;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

@keyframes dailyNoticePulse {
  0%, 100% {
    opacity: 0.9;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* 遊戲攻略按鈕樣式 */
.game-button.guide {
  background: linear-gradient(135deg, #16a085, #1abc9c);
  color: #fff;
  border: 2px solid rgba(22, 160, 133, 0.5);
  --glow-color: rgba(22, 160, 133, 0.5);
}

.game-button.guide:hover {
  box-shadow: 
    0 8px 25px rgba(22, 160, 133, 0.4),
    0 0 20px rgba(22, 160, 133, 0.3);
}

/* Discord 連結按鈕樣式 - 使用 Discord 官方配色 */
.game-button.DiscordLink {
  background: linear-gradient(135deg, #5865F2, #4752C4);
  color: #fff;
  border: 2px solid rgba(88, 101, 242, 0.5);
  --glow-color: rgba(88, 101, 242, 0.5);
  position: relative;
  overflow: hidden;
}

/* Discord 按鈕特殊效果 - 模擬 Discord 的動態背景 */
.game-button.DiscordLink::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255, 255, 255, 0.2), 
    rgba(87, 242, 135, 0.3),
    transparent
  );
  transition: left 0.6s ease;
  border-radius: 25px;
}

.game-button.DiscordLink:hover::after {
  left: 100%;
}

.game-button.DiscordLink:hover {
  background: linear-gradient(135deg, #4752C4, #5865F2);
  box-shadow: 
    0 8px 25px rgba(88, 101, 242, 0.4),
    0 0 20px rgba(88, 101, 242, 0.6),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(88, 101, 242, 0.8);
}

/* Discord 按鈕圖標特效 - 模擬 Discord logo 的動態效果 */
.game-button.DiscordLink .button-icon {
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
}

.game-button.DiscordLink:hover .button-icon {
  transform: scale(1.1) rotate(-5deg);
  filter: drop-shadow(0 0 8px rgba(87, 242, 135, 0.8));
}

/* Discord 按鈕文字效果 */
.game-button.DiscordLink span:not(.button-icon) {
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.game-button.DiscordLink:hover span:not(.button-icon) {
  text-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(87, 242, 135, 0.6);
}

/* Discord 按鈕脈衝動畫（可選 - 用於吸引注意） */
@keyframes discordPulse {
  0%, 100% { 
    box-shadow: 
      0 4px 15px rgba(88, 101, 242, 0.3),
      0 0 20px rgba(88, 101, 242, 0.2);
  }
  50% { 
    box-shadow: 
      0 6px 20px rgba(88, 101, 242, 0.5),
      0 0 30px rgba(88, 101, 242, 0.4);
  }
}

/* 如果需要脈衝效果，可以加上這個類別 */
.game-button.DiscordLink.pulse {
  animation: discordPulse 3s ease-in-out infinite;
}

/* Discord 按鈕禁用狀態 */
.game-button.DiscordLink:disabled {
  background: linear-gradient(135deg, #555, #333);
  color: #999;
  cursor: not-allowed;
  opacity: 0.5;
  border-color: #555;
}

.game-button.DiscordLink:disabled:hover {
  transform: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.game-button.DiscordLink:disabled::after {
  display: none;
}

.game-button.DiscordLink:disabled .button-icon {
  filter: none;
  transform: none;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .game-button.DiscordLink {
    min-width: 100px;
    height: 45px;
    font-size: 14px;
  }
  
  .game-button.DiscordLink .button-icon {
    font-size: 1.1em;
  }
}

@media (max-width: 480px) {
  .game-button.DiscordLink {
    width: 100%;
    justify-content: center;
  }
}

/* 銀白色計算機按鈕樣式 */
.game-button.calculator {
  background: linear-gradient(135deg, #dcdcdc, #f5f5f5);
  color: #333;
  border: 2px solid rgba(180, 180, 180, 0.5);
  --glow-color: rgba(200, 200, 200, 0.5);
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.3),
    0 4px 10px rgba(160, 160, 160, 0.2);
  transition: all 0.3s ease;
}

.game-button.calculator:hover {
  box-shadow:
    0 8px 25px rgba(160, 160, 160, 0.4),
    0 0 20px rgba(220, 220, 220, 0.6),
    inset 0 0 10px rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #f0f0f0, #ffffff);
  color: #111;
}

/* 🌌 命運啟示按鈕樣式 */
.game-button.destiny {
  position: relative;
  overflow: hidden;
  /* 神秘紫到啟示藍的漸變 */
  background: linear-gradient(135deg,
    #8B2FF8 0%,      /* 神秘紫 */
    #6D3FE8 25%,     /* 過渡紫 */
    #4F6FD8 50%,     /* 紫藍過渡 */
    #2F9CFF 100%     /* 啟示藍 */
  );
  background-size: 300% 300%;
  color: #fff;
  border: 2px solid rgba(139, 47, 248, 0.6);
  --glow-color: rgba(139, 47, 248, 0.6);

  text-shadow:
    0 0 10px rgba(139, 47, 248, 0.8),
    0 0 20px rgba(47, 156, 255, 0.6),
    2px 2px 4px rgba(0, 0, 0, 0.8);

  box-shadow:
    0 4px 15px rgba(139, 47, 248, 0.4),
    0 0 25px rgba(47, 156, 255, 0.3),
    inset 0 0 20px rgba(139, 47, 248, 0.2);

  /* 漸變流動動畫 */
  animation: destinyFlow 4s ease-in-out infinite;
}

/* 命運流動動畫 */
@keyframes destinyFlow {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      0 4px 15px rgba(139, 47, 248, 0.4),
      0 0 25px rgba(47, 156, 255, 0.3),
      inset 0 0 20px rgba(139, 47, 248, 0.2);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      0 6px 20px rgba(139, 47, 248, 0.6),
      0 0 35px rgba(47, 156, 255, 0.5),
      inset 0 0 30px rgba(47, 156, 255, 0.3);
  }
}

/* 命運星塵粒子效果 */
.game-button.destiny::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* 創造星塵粒子效果 */
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(139, 47, 248, 0.8), transparent),
    radial-gradient(2px 2px at 60% 20%, rgba(47, 156, 255, 0.9), transparent),
    radial-gradient(1px 1px at 80% 60%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 15% 80%, rgba(139, 47, 248, 0.6), transparent),
    radial-gradient(2px 2px at 90% 35%, rgba(47, 156, 255, 0.7), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 30% 90%, rgba(139, 47, 248, 0.5), transparent);

  background-size: 200% 200%;
  border-radius: 25px;
  opacity: 0.8;
  animation: destinyStardust 6s linear infinite;
}

/* 星塵漂浮動畫 */
@keyframes destinyStardust {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.8;
  }
  50% {
    transform: translate(-30px, -15px) rotate(180deg);
    opacity: 0.6;
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
    opacity: 0.8;
  }
}

/* 命運光暈效果層 */
.game-button.destiny::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(139, 47, 248, 0.3) 0%,
    rgba(47, 156, 255, 0.2) 30%,
    transparent 70%
  );
  transform: translate(-50%, -50%) scale(0.8);
  border-radius: 25px;
  opacity: 0;
  transition: all 0.4s ease;
  animation: destinyPulse 3s ease-in-out infinite;
}

/* 命運脈衝動畫 */
@keyframes destinyPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.6;
  }
}

/* 懸停效果 - 命運覺醒 */
.game-button.destiny:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(47, 156, 255, 0.9);

  box-shadow:
    0 8px 25px rgba(139, 47, 248, 0.6),
    0 0 40px rgba(47, 156, 255, 0.5),
    0 0 60px rgba(139, 47, 248, 0.4),
    inset 0 0 30px rgba(47, 156, 255, 0.3);

  text-shadow:
    0 0 15px rgba(139, 47, 248, 1),
    0 0 25px rgba(47, 156, 255, 0.8),
    2px 2px 6px rgba(0, 0, 0, 0.9);
}

.game-button.destiny:hover::before {
  opacity: 1;
  animation-duration: 3s;
}

.game-button.destiny:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.3);
}

/* 按鈕圖標特效 */
.game-button.destiny .button-icon {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
  animation: destinyIconGlow 2.5s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

@keyframes destinyIconGlow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(139, 47, 248, 0.9));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(47, 156, 255, 1));
    transform: scale(1.1);
  }
}

/* 按鈕文字特效 */
.game-button.destiny span:not(.button-icon) {
  position: relative;
  z-index: 1;
  font-weight: 800;
}

@media (max-width: 768px) {
  .core-section {
    flex-direction: column; /* 垂直排列按鈕 */
    gap: 15px;
    padding: 20px;
  }
  .core-section .game-button.primary,
  .core-section .game-button.multiplayer,
  .core-section .game-button.limited-event {
    width: 100% !important; /* 佔滿容器寬度 */
    max-width: 280px; /* 設定最大寬度 */
    height: 60px;
    font-size: 16px; /* 稍微縮小字體 */
  }
  .core-section .button-container {
    width: 100%;
    max-width: 280px;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .core-section .game-button.primary,
  .core-section .game-button.multiplayer,
  .core-section .game-button.limited-event {
    max-width: 100%;
    height: 55px;
    font-size: 15px;
    padding: 0 15px; /* 增加左右內距 */
  }
   .core-section .button-container {
    max-width: 100%;
  }
}


/* 第二章按鈕 */
/* 混沌副本按鈕 - 啟用狀態 */
.game-button.chaos-dungeon {
  width: 200px !important;  /* 強制與其他核心按鈕相同寬度 */
  height: 70px !important;
  font-size: 16px !important;  /* 縮小字體以適應更長的文字 */
  position: relative;
  overflow: hidden;
  padding: 0 20px !important;
  /* 混沌背景 - 桃紅色到深黑的漸變 */
  background: linear-gradient(135deg, 
    #1a0a1f 0%,      /* 深黑紫 */
    #2d0a2d 15%,     /* 深紫黑 */
    #ff1493 50%,     /* 桃紅 Deep Pink */
    #8b008b 85%,     /* 暗紫紅 */
    #0a0a0a 100%     /* 純黑 */
  );
  background-size: 300% 300%;
  
  color: #fff;
  border: 2px solid rgba(255, 20, 147, 0.6);
  --glow-color: rgba(255, 20, 147, 0.6);
  
  text-shadow: 
    0 0 10px rgba(255, 20, 147, 0.8),
    0 0 20px rgba(139, 0, 139, 0.6),
    2px 2px 4px rgba(0, 0, 0, 0.8);
  
  box-shadow: 
    0 6px 20px rgba(255, 20, 147, 0.4),
    0 0 30px rgba(139, 0, 139, 0.3),
    inset 0 0 30px rgba(255, 20, 147, 0.2);
  
  /* 背景流動動畫 */
  animation: chaosFlow 6s ease-in-out infinite;
  transition: all 0.3s ease;
}

/* 混沌能量流動動畫 */
@keyframes chaosFlow {
  0%, 100% { 
    background-position: 0% 50%;
    box-shadow: 
      0 6px 20px rgba(255, 20, 147, 0.4),
      0 0 30px rgba(139, 0, 139, 0.3),
      inset 0 0 30px rgba(255, 20, 147, 0.2);
  }
  50% { 
    background-position: 100% 50%;
    box-shadow: 
      0 8px 30px rgba(255, 20, 147, 0.6),
      0 0 50px rgba(139, 0, 139, 0.5),
      inset 0 0 50px rgba(255, 20, 147, 0.3);
  }
}

/* 魔氣粒子效果層 */
.game-button.chaos-dungeon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* 創造暗黑粒子效果 */
  background: 
    radial-gradient(2px 2px at 15% 20%, #ff1493, transparent),
    radial-gradient(1px 1px at 35% 60%, rgba(255, 20, 147, 0.8), transparent),
    radial-gradient(2px 2px at 60% 30%, #8b008b, transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(139, 0, 139, 0.6), transparent),
    radial-gradient(1px 1px at 25% 85%, #ff1493, transparent),
    radial-gradient(2px 2px at 90% 40%, rgba(255, 20, 147, 0.5), transparent);
  
  background-size: 200% 200%;
  border-radius: 25px;
  opacity: 0.7;
  animation: chaoticParticles 8s linear infinite;
}

@keyframes chaoticParticles {
  0% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
  50% { 
    transform: translate(-50px, -20px) scale(1.1);
    opacity: 0.5;
  }
  100% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
}

/* 懸停效果 - 魔氣爆發 */
.game-button.chaos-dungeon:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(255, 20, 147, 0.9);
  
  box-shadow: 
    0 10px 30px rgba(255, 20, 147, 0.6),
    0 0 50px rgba(139, 0, 139, 0.5),
    0 0 70px rgba(255, 20, 147, 0.4),
    inset 0 0 50px rgba(255, 20, 147, 0.3);
  
  text-shadow: 
    0 0 15px rgba(255, 20, 147, 1),
    0 0 30px rgba(139, 0, 139, 0.8),
    2px 2px 6px rgba(0, 0, 0, 0.9);
}

.game-button.chaos-dungeon:hover::before {
  opacity: 1;
  animation-duration: 4s;
}

/* 按鈕圖標特效 */
.game-button.chaos-dungeon .button-icon {
  filter: drop-shadow(0 0 8px rgba(255, 20, 147, 0.9));
  animation: iconChaos 3s ease-in-out infinite;
}

@keyframes iconChaos {
  0%, 100% { 
    filter: drop-shadow(0 0 8px rgba(255, 20, 147, 0.9));
    transform: rotate(0deg);
  }
  50% { 
    filter: drop-shadow(0 0 15px rgba(139, 0, 139, 1));
    transform: rotate(5deg);
  }
}

/* ==========================================
   🔒 禁用狀態 (300等以下)
   ========================================== */

.game-button.chaos-dungeon:disabled {
  background: linear-gradient(135deg, 
    #1a1a1a 0%,
    #2d2d2d 50%,
    #1a1a1a 100%
  );
  background-size: 200% 200%;
  
  color: #666;
  border: 2px solid rgba(100, 100, 100, 0.4);
  
  text-shadow: 
    0 0 5px rgba(100, 100, 100, 0.3),
    1px 1px 2px rgba(0, 0, 0, 0.8);
  
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(0, 0, 0, 0.6);
  
  cursor: not-allowed;
  opacity: 0.6;
  animation: sealedPulse 4s ease-in-out infinite;
}

@keyframes sealedPulse {
  0%, 100% { 
    opacity: 0.5;
    box-shadow: 
      0 4px 15px rgba(0, 0, 0, 0.5),
      inset 0 0 20px rgba(0, 0, 0, 0.6);
  }
  50% { 
    opacity: 0.7;
    box-shadow: 
      0 4px 15px rgba(100, 20, 60, 0.3),
      inset 0 0 20px rgba(100, 20, 60, 0.2);
  }
}

.game-button.chaos-dungeon:disabled::before {
  background: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 10px,
      rgba(100, 100, 100, 0.1) 10px,
      rgba(100, 100, 100, 0.1) 20px
    );
  animation: sealedPattern 20s linear infinite;
  opacity: 0.3;
}

@keyframes sealedPattern {
  0% { transform: translateX(0); }
  100% { transform: translateX(40px); }
}

.game-button.chaos-dungeon:disabled:hover {
  transform: none;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.5),
    inset 0 0 20px rgba(0, 0, 0, 0.6);
}

.game-button.chaos-dungeon:disabled .button-icon {
  filter: grayscale(100%) opacity(0.5);
  animation: none;
}

/* 手機版 768px */
@media (max-width: 768px) {
  .core-section .game-button.chaos-dungeon {
    width: 100% !important;
    max-width: 280px;
    height: 60px;
    font-size: 16px;
    padding: 0 15px;  /* 手機版也要有 padding */
  }
}

/* 手機版 480px */
@media (max-width: 480px) {
  .core-section .game-button.chaos-dungeon {
    max-width: 100%;
    height: 55px;
    font-size: 15px;
    padding: 0 15px;
  }
}

/* 限時活動按鈕 - 手機版 768px */
@media (max-width: 768px) {
  .core-section .game-button.limited-event {
    width: 100% !important;
    max-width: 280px;
    height: 60px !important;
    font-size: 16px !important;
    padding: 0 15px;
  }
}

/* 限時活動按鈕 - 手機版 480px */
@media (max-width: 480px) {
  .core-section .game-button.limited-event {
    max-width: 100%;
    height: 55px !important;
    font-size: 15px !important;
    padding: 0 15px;
  }
}

.chaos-level-requirement {
  position: absolute;
  top: -12px;  /* 在按鈕上方 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  
  background: linear-gradient(135deg, #1a0a1f, #2d0a2d);
  color: #ff1493;
  border: 2px solid rgba(255, 20, 147, 0.6);
  box-shadow: 
    0 4px 12px rgba(255, 20, 147, 0.5),
    0 0 20px rgba(139, 0, 139, 0.4),
    inset 0 0 15px rgba(255, 20, 147, 0.2);
  
  text-shadow: 0 0 8px rgba(255, 20, 147, 0.9);
  animation: chaosLockedPulse 2s ease-in-out infinite;
  pointer-events: none;  /* 不阻擋點擊 */
}

@keyframes chaosLockedPulse {
  0%, 100% {
    opacity: 0.9;
    box-shadow:
      0 2px 8px rgba(255, 20, 147, 0.4),
      0 0 15px rgba(139, 0, 139, 0.3),
      inset 0 0 10px rgba(255, 20, 147, 0.2);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 3px 12px rgba(255, 20, 147, 0.6),
      0 0 20px rgba(139, 0, 139, 0.5),
      inset 0 0 15px rgba(255, 20, 147, 0.3);
  }
}

/* 頂部區域容器 - 左右排版 */
.top-section-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 0;
  align-items: stretch; /* 讓兩個卡片等高 */
}

/* 公告卡片 */
.announcement-card {
  background: linear-gradient(135deg, rgba(15, 15, 35, 0.8) 0%, rgba(25, 25, 55, 0.6) 100%);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.announcement-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(0, 255, 255, 0.05) 50%, transparent 70%);
  animation: sectionShine 4s ease-in-out infinite;
  pointer-events: none;
}

.announcement-card {
  margin: 15px;
  min-height: 200px; /* 和 player-info-section 一樣的最小高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 讓內容分布均勻 */
}

.announcement-card:hover {
  border-color: rgba(0, 255, 255, 0.6);
  box-shadow: 0 12px 40px rgba(0, 255, 255, 0.3);
  transform: translateY(-2px);
}

.announcement-header {
  text-align: center;
  font-size: 1.3em;
  font-weight: 900;
  color: #00ffff;
  margin: 0 0 15px 0;
  text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
  animation: announcementHeaderGlow 3s ease-in-out infinite;
}

@keyframes announcementHeaderGlow {
  0%, 100% {
    color: #00ffff;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
  }
  50% {
    color: #ffffff;
    text-shadow: 0 0 40px rgba(0, 255, 255, 0.8);
  }
}

.announcement-content {
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  position: relative;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.announcement-image-container {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
  border: 3px solid rgba(255, 215, 0, 0.5);
  box-shadow:
    0 4px 15px rgba(255, 107, 53, 0.4),
    inset 0 2px 10px rgba(255, 255, 255, 0.1);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 107, 53, 0.1));
  transition: all 0.3s ease;
}

.announcement-image-container:hover {
  border-color: rgba(255, 215, 0, 0.8);
  box-shadow:
    0 6px 20px rgba(255, 107, 53, 0.6),
    inset 0 2px 10px rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.announcement-image-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 180px;
  display: block;
}

.announcement-title {
  font-size: 1.4em;
  font-weight: 800;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #FFD700, #FFA500, #FF6B35);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
  filter: drop-shadow(0 2px 15px rgba(255, 107, 53, 0.6));
  line-height: 1.5;
  padding: 10px;
  animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% {
    filter: drop-shadow(0 2px 15px rgba(255, 107, 53, 0.6));
  }
  50% {
    filter: drop-shadow(0 4px 25px rgba(255, 165, 0, 0.9));
  }
}

.announcement-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.announcement-nav-btn {
  text-align: center;
  background: rgba(0, 255, 255, 0.1);
  padding: 10px 15px;
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 255, 0.3);
  min-width: 40px;
  color: rgba(0, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Orbitron', sans-serif;
}

.announcement-nav-btn:hover {
  background: rgba(0, 255, 255, 0.2);
  border-color: rgba(0, 255, 255, 0.5);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
  transform: translateY(-2px) scale(1.05);
}

.announcement-nav-btn:active {
  transform: translateY(0) scale(1);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.announcement-indicators {
  display: flex;
  gap: 8px;
}

.announcement-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.2);
  border: 1px solid rgba(0, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.announcement-indicator.active {
  background: rgba(0, 255, 255, 0.6);
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 255, 255, 0.8);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

/* 公告對話框 */
.announcement-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.announcement-dialog-content {
  background: linear-gradient(135deg, #1e1e3c 0%, #2d1e46 100%);
  border: 2px solid rgba(255, 107, 53, 0.6);
  border-radius: 16px;
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 50px rgba(255, 107, 53, 0.3);
}

.announcement-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 2px solid rgba(255, 107, 53, 0.3);
}

.announcement-dialog-title {
  font-size: 1.8em;
  font-weight: 700;
  color: #ffa500;
  margin: 0;
  text-shadow: 0 0 15px rgba(255, 165, 0, 0.6);
}

.announcement-close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 2em;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.announcement-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}

.announcement-dialog-body {
  padding: 25px;
  overflow-y: auto;
  color: #fff;
  line-height: 1.8;
  font-size: 1.1em;
}

/* 調整經驗條樣式 - 處理大數值 */
.exp-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.85em;
  font-weight: 600;
  color: #fff;
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.8),
    -1px -1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95%;
  padding: 0 5px;
}

/* 響應式調整 */
@media (max-width: 992px) {
  .top-section-container {
    grid-template-columns: 1fr;
  }

  .announcement-card {
    order: -1; /* 在手機上公告卡片在上方 */
  }

  .player-info-section::before,
  .announcement-card::before,
  .feature-card::before,
  .dungeon-section::before {
    animation: none;
  }
}

@media (max-width: 768px) {
  .announcement-header {
    font-size: 1.2em;
  }

  .announcement-title {
    font-size: 1.1em;
  }

  .announcement-content {
    height: 140px;
  }

  .announcement-image-container img {
    max-height: 140px;
  }

  .announcement-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .announcement-dialog-content {
    max-height: 90vh;
  }

  .announcement-dialog-title {
    font-size: 1.4em;
  }

  .exp-text {
    font-size: 0.75em;
  }
}

/* ========== 圖片按鈕樣式 (帶 fallback) ========== */

/* picture 元素定位 */
.game-button picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border-radius: inherit;
}

/* 圖片按鈕：圖片填滿整個按鈕，超出部分裁切 */
.button-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 填滿按鈕，超出部分裁切 */
  object-position: center;  /* 圖片置中 */
  display: block;
  z-index: 1;
  border-radius: inherit;  /* 繼承按鈕的圓角 */
}

.fallback-content {
  display: flex;
  flex-direction: row;  /* 水平排列，與原始 .game-button 一致 */
  align-items: center;
  justify-content: center;
  gap: 8px;  /* 與原始 .game-button 的 gap 一致 */
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;  /* 在圖片下層 */
  visibility: hidden;  /* 隱藏但保持佔位 */
}

/* 當圖片載入失敗時，fallback 內容會被 JS 設為可見 */
.fallback-content.show {
  visibility: visible;
  z-index: 2;
}

/* ========== feature-card 區域響應式圖片按鈕處理 ========== */
/*
 * > 768px：電腦版圖片
 * 360px ~ 768px：手機版圖片（由 HTML <picture> 自動處理）
 * < 360px：文字按鈕
 */

/* 中間區間 (360px ~ 768px)：feature-card 按鈕垂直排列，讓圖片能完整顯示 */
@media (min-width: 360px) and (max-width: 768px) {
  .feature-card .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .feature-card .game-button {
    width: 100%;
  }

  /* 確保按鈕容器也撐滿寬度，避免 inline-flex 導致初始寬度計算錯誤 */
  .feature-card .shop-button-container,
  .feature-card .button-container {
    width: 100%;
    display: flex;
  }
}

/* 極小螢幕 (小於 360px)：feature-card 區域隱藏圖片，顯示文字按鈕 */
@media (max-width: 359px) {
  .feature-card .game-button picture,
  .feature-card .game-button .button-image {
    display: none !important;
  }

  .feature-card .game-button .fallback-content {
    visibility: visible;
    z-index: 2;
  }
}

/* ========== core-section 區域響應式圖片按鈕處理 ========== */
/* 極小螢幕 (小於 360px)：core-section 區域隱藏圖片，顯示文字按鈕 */
@media (max-width: 359px) {
  .core-section .game-button picture,
  .core-section .game-button .button-image {
    display: none !important;
  }

  .core-section .game-button .fallback-content {
    visibility: visible;
    z-index: 2;
  }
}

/* ==========================================
   第三章副本按鈕樣式
   ========================================== */

.game-button.chapter3-dungeon {
  width: 200px !important;
  height: 70px !important;
  font-size: 16px !important;
  position: relative;
  overflow: hidden;
  padding: 0 20px !important;
  /* 第三章背景 - 深藍到金色的漸變 */
  background: linear-gradient(135deg,
    #0a1628 0%,
    #1a2a4a 15%,
    #ffd700 50%,
    #b8860b 85%,
    #0a1628 100%
  );
  background-size: 300% 300%;

  color: #fff;
  border: 2px solid rgba(255, 215, 0, 0.6);
  --glow-color: rgba(255, 215, 0, 0.6);

  text-shadow:
    0 0 10px rgba(255, 215, 0, 0.8),
    0 0 20px rgba(184, 134, 11, 0.6),
    2px 2px 4px rgba(0, 0, 0, 0.8);

  box-shadow:
    0 6px 20px rgba(255, 215, 0, 0.4),
    0 0 30px rgba(184, 134, 11, 0.3),
    inset 0 0 30px rgba(255, 215, 0, 0.2);

  animation: chapter3Flow 6s ease-in-out infinite;
  transition: all 0.3s ease;
}

@keyframes chapter3Flow {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      0 6px 20px rgba(255, 215, 0, 0.4),
      0 0 30px rgba(184, 134, 11, 0.3),
      inset 0 0 30px rgba(255, 215, 0, 0.2);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      0 8px 30px rgba(255, 215, 0, 0.6),
      0 0 50px rgba(184, 134, 11, 0.5),
      inset 0 0 50px rgba(255, 215, 0, 0.3);
  }
}

.game-button.chapter3-dungeon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(2px 2px at 15% 20%, #ffd700, transparent),
    radial-gradient(1px 1px at 35% 60%, rgba(255, 215, 0, 0.8), transparent),
    radial-gradient(2px 2px at 60% 30%, #b8860b, transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(184, 134, 11, 0.6), transparent);
  background-size: 200% 200%;
  border-radius: 25px;
  opacity: 0.7;
  animation: chapter3Particles 8s linear infinite;
}

@keyframes chapter3Particles {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50px, -20px) scale(1.1);
    opacity: 0.5;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.7;
  }
}

.game-button.chapter3-dungeon:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(255, 215, 0, 0.9);

  box-shadow:
    0 10px 30px rgba(255, 215, 0, 0.6),
    0 0 50px rgba(184, 134, 11, 0.5),
    0 0 70px rgba(255, 215, 0, 0.4),
    inset 0 0 50px rgba(255, 215, 0, 0.3);
}

.game-button.chapter3-dungeon .button-icon {
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
  animation: iconChapter3 3s ease-in-out infinite;
}

@keyframes iconChapter3 {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.9));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(184, 134, 11, 1));
  }
}

/* 第三章禁用狀態 */
.game-button.chapter3-dungeon:disabled {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
  background-size: 200% 200%;
  color: #666;
  border: 2px solid rgba(100, 100, 100, 0.4);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.6);
  cursor: not-allowed;
  opacity: 0.6;
  animation: sealedPulse 4s ease-in-out infinite;
}

.game-button.chapter3-dungeon:disabled::before {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(100, 100, 100, 0.1) 10px,
    rgba(100, 100, 100, 0.1) 20px
  );
  animation: sealedPattern 20s linear infinite;
  opacity: 0.3;
}

.game-button.chapter3-dungeon:disabled:hover {
  transform: none;
}

.game-button.chapter3-dungeon:disabled .button-icon {
  filter: grayscale(100%) opacity(0.5);
  animation: none;
}

/* 第三章等級限制樣式 */
.level-requirement.chapter3-locked {
  background: linear-gradient(135deg, #0a1628, #1a2a4a);
  color: #ffd700;
  border: 2px solid rgba(255, 215, 0, 0.6);
  box-shadow:
    0 4px 12px rgba(255, 215, 0, 0.5),
    0 0 20px rgba(184, 134, 11, 0.4),
    inset 0 0 15px rgba(255, 215, 0, 0.2);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
}

/* ==========================================
   副本入口區塊響應式設計
   ========================================== */

@media (max-width: 768px) {
  .dungeon-grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 15px;
  }

  .solo-section {
    grid-column: 1;
    grid-row: auto;
  }

  .multiplayer-section {
    grid-column: 1;
    grid-row: auto;
  }

  .event-section {
    grid-column: 1;
    grid-row: auto;
  }

  .dungeon-section {
    padding: 2px;
    overflow: visible; /* 讓標籤可以顯示在外框外 */
  }

  .dungeon-section.event-section {
    overflow: visible; /* 讓標籤可以顯示在外框外 */
  }

  .dungeon-button-group {
    gap: 12px;
  }

  .dungeon-section .game-button.primary,
  .dungeon-section .game-button.chaos-dungeon,
  .dungeon-section .game-button.chapter3-dungeon,
  .dungeon-section .game-button.multiplayer,
  .dungeon-section .game-button.limited-event {
    width: 100% !important;
    max-width: 280px;
    height: 60px !important;
    font-size: 16px !important;
  }

  .dungeon-section .button-container {
    width: 100%;
    max-width: 280px;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .dungeon-section {
    padding: 2px;
    overflow: visible; /* 讓標籤可以顯示在外框外 */
  }

  .dungeon-section.event-section {
    overflow: visible; /* 讓標籤可以顯示在外框外 */
  }

  .dungeon-section .game-button.primary,
  .dungeon-section .game-button.chaos-dungeon,
  .dungeon-section .game-button.chapter3-dungeon,
  .dungeon-section .game-button.multiplayer,
  .dungeon-section .game-button.limited-event {
    max-width: 100%;
    height: 55px !important;
    font-size: 15px !important;
    padding: 0 15px !important;
  }

  .dungeon-section .button-container {
    max-width: 100%;
  }

  .dungeon-section-title {
    font-size: 0.95em;
  }

  .no-event-placeholder {
    padding: 15px;
  }

  .no-event-placeholder .no-event-icon {
    font-size: 1.5em;
  }

  .no-event-placeholder .no-event-text {
    font-size: 0.9em;
  }
}

/* ========== 手機版快速捲動按鈕 ========== */
.mobile-scroll-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-scroll-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 120px;
    bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    right: 10px;
    z-index: 9000;
    gap: 6px;
  }

  .scroll-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(0, 255, 255, 0.4);
    background: rgba(10, 10, 30, 0.75);
    color: rgba(0, 255, 255, 0.85);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    transition: background 0.2s, border-color 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .scroll-nav-btn:active {
    background: rgba(0, 255, 255, 0.2);
    border-color: rgba(0, 255, 255, 0.7);
  }
}

/* ========== 新手引導彈窗 ========== */
.beginner-tutorial-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: tutorialFadeIn 0.3s ease;
}

@keyframes tutorialFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.beginner-tutorial-modal {
  background: linear-gradient(135deg, #0a0a1e 0%, #1a1a3e 50%, #0d1b2a 100%);
  border: 2px solid rgba(0, 255, 255, 0.4);
  border-radius: 18px;
  width: 92%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.6),
    0 0 40px rgba(0, 255, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: tutorialSlideUp 0.4s ease;
}

@keyframes tutorialSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.beginner-tutorial-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 24px 12px;
  -webkit-overflow-scrolling: touch;
}

.tutorial-step {
  display: none;
  text-align: center;
  animation: tutorialStepIn 0.3s ease;
}

.tutorial-step.active {
  display: block;
}

@keyframes tutorialStepIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.tutorial-step-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.tutorial-step-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #00ffff;
  margin: 0 0 14px;
  letter-spacing: 0.5px;
}

.tutorial-step-image {
  width: 100%;
  max-width: 320px;
  margin: 0 auto 16px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 255, 255, 0.2);
}

.tutorial-step-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.tutorial-step-desc {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  padding: 0 4px;
}

.tutorial-step-desc strong {
  color: #00ffff;
}

/* 進度點 */
.tutorial-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px 0;
}

.tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
  cursor: pointer;
}

.tutorial-dot.active {
  background: #00ffff;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
  transform: scale(1.2);
}

/* 閱讀冷卻進度條 */
.tutorial-cooldown-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.tutorial-cooldown-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00b4d8, #00ffff);
  box-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
}

/* 按鈕禁用狀態 */
.tutorial-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 底部導覽 */
.tutorial-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tutorial-nav-right {
  display: flex;
  gap: 10px;
}

.tutorial-btn {
  padding: 9px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.5px;
}

.tutorial-skip {
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.tutorial-skip:hover {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.3);
}

.tutorial-prev {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.tutorial-prev:hover {
  background: rgba(255, 255, 255, 0.15);
}

.tutorial-next {
  background: linear-gradient(135deg, #00b4d8, #0077b6);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 180, 216, 0.3);
}

.tutorial-next:hover {
  box-shadow: 0 4px 20px rgba(0, 180, 216, 0.5);
  transform: translateY(-1px);
}

.tutorial-next.tutorial-finish {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #1a0a00;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.tutorial-next.tutorial-finish:hover {
  box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
}

/* 手機適配 */
@media (max-width: 480px) {
  .beginner-tutorial-modal {
    width: 95%;
    max-height: 88vh;
    border-radius: 14px;
  }

  .beginner-tutorial-body {
    padding: 22px 16px 8px;
  }

  .tutorial-step-title {
    font-size: 18px;
  }

  .tutorial-step-desc {
    font-size: 14px;
  }

  .tutorial-step-image {
    max-width: 260px;
  }

  .tutorial-btn {
    padding: 8px 14px;
    font-size: 13px;
  }

  .tutorial-nav {
    padding: 10px 14px 14px;
  }
}