/* ===== 賽博龐克風格變數定義 ===== */
:root {
  /* 賽博龐克主色調 */
  --cyber-primary: #ff006e;
  --cyber-secondary: #00f5ff;
  --cyber-accent: #ff10f0;
  --cyber-warning: #ffaa00;
  --cyber-success: #00ff41;
  --cyber-danger: #ff0040;

  /* 霓虹發光色 */
  --neon-pink: #ff006e;
  --neon-blue: #00f5ff;
  --neon-purple: #bf00ff;
  --neon-green: #00ff41;
  --neon-yellow: #ffde00;

  /* 背景色 */
  --bg-dark: #0a0a0f;
  --bg-darker: #050507;
  --bg-card: #0f0f1a;
  --bg-hover: #1a1a2e;
  --bg-glass: rgba(15, 15, 26, 0.85);

  /* 邊框和線條 */
  --border-neon: #00f5ff;
  --border-dim: rgba(0, 245, 255, 0.2);
  --grid-color: rgba(0, 245, 255, 0.1);

  /* 文字色彩 */
  --text-primary: #ffffff;
  --text-secondary: #00f5ff;
  --text-muted: #8b8b9a;

  /* 發光效果 */
  --glow-pink: 0 0 20px #ff006e, 0 0 40px #ff006e, 0 0 60px #ff006e;
  --glow-blue: 0 0 20px #00f5ff, 0 0 40px #00f5ff, 0 0 60px #00f5ff;
  --glow-purple: 0 0 20px #bf00ff, 0 0 40px #bf00ff, 0 0 60px #bf00ff;
  --glow-small: 0 0 10px currentColor;
  --glow-medium: 0 0 20px currentColor;
  --glow-large: 0 0 30px currentColor;

  /* 字體變數已移至全域CSS */

  /* 動畫時間 */
  --trans-fast: 0.2s ease;
  --trans-normal: 0.3s ease;
  --trans-slow: 0.5s ease;

  /* 稀有度顏色（保持原有） */
  --rarity-common: #b0c3d9;
  --rarity-rare: #4b69ff;
  --rarity-legendary: #d32ce6;
  --rarity-mythical: #eb4b4b;
}

/* ===== 全局樣式 ===== */
* {
  box-sizing: border-box;
}

/* 桌面版保留正常滾動條 */

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-darker);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  position: relative;
}

/* 手機版隱藏滾動條 */
@media (max-width: 1270px) {
  body {
    height: 100vh;
    /* 固定高度為視口高度 */
    overflow-y: auto;
    /* 允許頁面級別的卷軸，但只有一個 */
    overflow-x: hidden;
    /* 防止水平卷軸 */
  }

  /* 手機版隱藏所有滾動條但保持滾動功能，但升級頁面的網格容器需要顯示滾動條 */
  * {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  *::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  /* 升級頁面的網格容器顯示滾動條 */
  .upgrade-items-grid {
    -ms-overflow-style: auto !important; /* IE and Edge */
    scrollbar-width: thin !important; /* Firefox */
  }

  .upgrade-items-grid::-webkit-scrollbar {
    display: block !important; /* Chrome, Safari, Opera */
    width: 8px !important;
  }

  .upgrade-items-grid::-webkit-scrollbar-track {
    background: var(--bg-dark) !important;
    border-radius: 4px !important;
  }

  .upgrade-items-grid::-webkit-scrollbar-thumb {
    background: var(--border-neon) !important;
    border-radius: 4px !important;
    border: 1px solid var(--bg-dark) !important;
  }

  .upgrade-items-grid::-webkit-scrollbar-thumb:hover {
    background: var(--neon-blue) !important;
  }
}

/* 賽博龐克背景效果 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at top, rgba(191, 0, 255, 0.1) 0%, transparent 50%),
    radial-gradient(
      ellipse at bottom,
      rgba(0, 245, 255, 0.1) 0%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 0;
}

/* 網格背景 */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: -1px -1px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  animation: grid-move 10s linear infinite;
}

@keyframes grid-move {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(50px, 50px);
  }
}

/* ===== 主容器 ===== */
.upgrade-main {
  width: 100%;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 0px 20px;
  position: relative;
  z-index: 1;
}

/* ===== 遊戲容器 ===== */
.upgrade-game-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  border-radius: 0;
  position: relative;
  backdrop-filter: blur(10px);
  clip-path: polygon(
    0 20px,
    20px 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    20px 100%,
    0 calc(100% - 20px)
  );
  box-sizing: border-box;
}

.upgrade-game-container::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    var(--neon-pink),
    var(--neon-blue),
    var(--neon-purple)
  );
  z-index: -1;
  opacity: 0.5;
  filter: blur(10px);
  clip-path: inherit;
}

/* ===== 主要動作行 ===== */
.upgrade-main-action-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 25px;
  align-items: start;
  margin-bottom: 30px;
  min-height: 450px;
}

/* 桌面版：隱藏左右欄位容器，直接顯示三欄 */
.upgrade-left-right-columns-container {
  display: contents;
}

/* 桌面版：調整欄位順序 */
.upgrade-center-column {
  order: 0;
}

.upgrade-left-column {
  order: -1;
}

.upgrade-right-column {
  order: 1;
  justify-self: end;
  align-items: flex-end;
}

/* ===== 欄位統一設定 ===== */
.upgrade-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.upgrade-left-column,
.upgrade-right-column {
  justify-content: space-between;
  max-width: 400px;
}

.upgrade-center-column {
  justify-content: center;
  align-items: center;
}

/* ===== 側邊面板（左右展示區） ===== */
.upgrade-side-panel {
  background: var(--bg-card);
  border: 2px solid var(--border-dim);
  padding: 20px;
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 320px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
}

.upgrade-side-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--neon-blue),
    transparent
  );
  animation: scan-line 3s linear infinite;
}

@keyframes scan-line {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.upgrade-side-panel:hover {
  border-color: var(--border-neon);
  box-shadow:
    inset 0 0 20px rgba(0, 245, 255, 0.1),
    0 0 20px rgba(0, 245, 255, 0.2);
}

.upgrade-hexagon-title {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-secondary);
  margin: 0 0 20px 0;
  position: relative;
  padding-left: 20px;
}

.upgrade-hexagon-title::before {
  content: "▶";
  position: absolute;
  left: 0;
  color: var(--neon-pink);
  animation: blink 1s infinite;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

/* ===== 選中物品展示 ===== */
.upgrade-selected-item-wrapper {
  min-height: 250px;
  border: 1px dashed var(--border-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 245, 255, 0.03) 10px,
    rgba(0, 245, 255, 0.03) 20px
  );
  flex: 1;
  overflow: hidden;
}

/* 選中物品容器 - 固定大小 */
.upgrade-selected-items-container {
  position: relative;
  width: 100%;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

/* 選中物品樣式調整 */
.upgrade-selected-item {
  padding: 20px;
  background: var(--bg-dark);
  border: 1px solid var(--border-neon);
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 90%;
}

.upgrade-selected-item-image-container {
  width: 80px;
  /* 縮小圖片容器 */
  height: 80px;
  /* 縮小圖片容器 */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upgrade-selected-item-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.upgrade-empty-state {
  text-align: center;
  opacity: 0.7;
}

.upgrade-empty-icon-img {
  width: 100px;
  height: 100px;
  opacity: 0.3;
  filter: hue-rotate(180deg) brightness(1.5);
}

.upgrade-empty-state p {
  color: var(--text-muted);
  margin-top: 10px;
  font-size: 0.9rem;
}

/* ===== 價格顯示 ===== */
.upgrade-price-display {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  padding: 15px;
  max-width: 400px;
  text-align: center;
  position: relative;
  overflow: hidden;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 15px;
}

.upgrade-price-display::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  animation: price-scan 2s linear infinite;
}

@keyframes price-scan {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.upgrade-price-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.upgrade-price-value {
  font-size: 1.5rem;
  font-weight: 700;
}

.upgrade-left-price .upgrade-price-value {
  color: var(--cyber-danger);
  text-shadow: var(--glow-small);
}

.upgrade-right-price .upgrade-price-value {
  color: var(--cyber-success);
  text-shadow: var(--glow-small);
}

/* ===== 中央輪盤區域 ===== */
.upgrade-center-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  justify-content: flex-start;
  padding-top: 20px;
}

.upgrade-wheel-section {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== 輪盤統計顯示 - 改為相對定位避免重疊 ===== */
.upgrade-wheel-stats-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 350px;
  margin-bottom: 15px;
  gap: 20px;
}

.upgrade-wheel-stat {
  background: var(--bg-glass);
  border: 1px solid var(--border-neon);
  padding: 8px 12px;
  z-index: 10;
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 50%,
    calc(100% - 8px) 100%,
    0 100%
  );
  flex: 1;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* 修復右邊尖角的顏色溢出 */
.upgrade-wheel-stat::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  bottom: -1px;
  width: 10px;
  background: var(--bg-glass);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.upgrade-success-rate-display {
  border-color: var(--cyber-success);
  color: var(--cyber-success);
}

.upgrade-multiplier-display {
  border-color: var(--cyber-warning);
  color: var(--cyber-warning);
}

.upgrade-wheel-stat .stat-label {
  font-size: 0.8rem;
  opacity: 0.8;
}

/* 添加upgrade-stat-label的CSS設定 */
.upgrade-stat-label {
  font-size: 0.8rem;
  opacity: 0.8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 4px;
}

.upgrade-wheel-stat .stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  display: block;
  text-shadow: var(--glow-small);
}

/* 輪盤容器 */
.upgrade-wheel-container {
  position: relative;
  width: 350px;
  height: 350px;
  margin: 0 auto 15px auto;
}

.upgrade-wheel-image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  filter: drop-shadow(0 0 20px rgba(0, 245, 255, 0.5));
}

.upgrade-wheel-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 梯形指針設計 - 從中心點粗往末端變細 */
.upgrade-wheel-pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 8px;
  transform-origin: left center;
  transform: translateY(-50%) rotate(-90deg);
  z-index: 3;
  background: linear-gradient(
    90deg,
    rgba(0, 245, 255, 0.9) 0%,
    rgba(0, 245, 255, 0.7) 30%,
    rgba(0, 245, 255, 0.5) 60%,
    rgba(0, 245, 255, 0.3) 80%,
    rgba(0, 245, 255, 0.1) 100%
  );
  clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
  box-shadow:
    0 0 12px rgba(0, 245, 255, 0.8),
    0 0 24px rgba(0, 245, 255, 0.5),
    0 0 36px rgba(0, 245, 255, 0.3);
  animation: pointerPulse 2s ease-in-out infinite;
}

/* 移除指針頂端發光點 */
.upgrade-wheel-pointer::before {
  display: none;
}

/* 指針內部光線增強效果 */
.upgrade-wheel-pointer::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: calc(100% - 15px);
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.2) 80%,
    transparent 100%
  );
  transform: translateY(-50%);
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
  animation: pointerInnerGlow 2s ease-in-out infinite;
}

/* 指針脈衝動畫 */
@keyframes pointerPulse {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(0, 245, 255, 0.8),
      0 0 20px rgba(0, 245, 255, 0.6),
      0 0 30px rgba(0, 245, 255, 0.4);
  }

  50% {
    box-shadow:
      0 0 15px rgba(0, 245, 255, 1),
      0 0 30px rgba(0, 245, 255, 0.8),
      0 0 45px rgba(0, 245, 255, 0.6);
  }
}

/* 指針內部光線動畫 */
@keyframes pointerInnerGlow {
  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* Logo中心點設計 */
.upgrade-wheel-center-hexagon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 45px;
  height: 45px;
  transform: translate(-50%, -50%);
  z-index: 4;
  background: rgba(10, 10, 15, 0.95);
  border: 2px solid rgba(0, 245, 255, 0.7);
  border-radius: 50%;
  box-shadow:
    0 0 20px rgba(0, 245, 255, 0.5),
    inset 0 0 15px rgba(0, 245, 255, 0.1);
  animation: centerPulse 3s ease-in-out infinite;
  overflow: hidden;
}

/* Logo圖片容器 */
.upgrade-wheel-center-hexagon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  background-image: url("/assets/images/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.9;
  filter: brightness(1.2) contrast(1.1);
  display: block;
}

/* Logo發光效果 */
.upgrade-wheel-center-hexagon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
  background-image: url("/assets/images/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.3;
  filter: blur(3px) brightness(2);
  animation: logoGlow 2s ease-in-out infinite alternate;
  display: block;
}

/* 移除核心中心點 */
.upgrade-wheel-center-core {
  display: none;
}

/* 中心點脈衝動畫 */
@keyframes centerPulse {
  0%,
  100% {
    box-shadow:
      0 0 20px rgba(0, 245, 255, 0.5),
      inset 0 0 15px rgba(0, 245, 255, 0.1);
    border-color: rgba(0, 245, 255, 0.7);
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    box-shadow:
      0 0 30px rgba(0, 245, 255, 0.7),
      inset 0 0 20px rgba(0, 245, 255, 0.2);
    border-color: rgba(0, 245, 255, 0.9);
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* Logo發光動畫 */
@keyframes logoGlow {
  from {
    opacity: 0.3;
    filter: blur(3px) brightness(2);
  }

  to {
    opacity: 0.5;
    filter: blur(4px) brightness(2.5);
  }
}

@keyframes coreGlow {
  from {
    box-shadow:
      0 0 10px rgba(0, 245, 255, 0.8),
      0 0 20px rgba(0, 245, 255, 0.4);
  }

  to {
    box-shadow:
      0 0 15px rgba(0, 245, 255, 1),
      0 0 30px rgba(0, 245, 255, 0.6);
  }
}

/* 指針旋轉時的特效 - 簡化版 */
.upgrade-wheel-pointer.animating {
  transition: transform 9s cubic-bezier(0.15, 0, 0.6, 1);
  box-shadow:
    0 0 15px rgba(0, 245, 255, 0.8),
    0 0 30px rgba(0, 245, 255, 0.6),
    0 0 45px rgba(0, 245, 255, 0.4);
}

.upgrade-wheel-pointer.animating::after {
  animation: pointerInnerGlow 2s ease-in-out infinite;
}

/* 360度握把控制器容器 */
.upgrade-grip-controller-container {
  width: 100%;
  max-width: 350px;
  margin: 20px auto 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.upgrade-grip-controller {
  width: 120px;
  height: 120px;
  position: relative;
}

/* 外環軌道 */
.upgrade-grip-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  min-width: 96px;
  min-height: 96px;
  max-width: 96px;
  max-height: 96px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 245, 255, 0.1) 0deg,
    rgba(0, 245, 255, 0.2) 90deg,
    rgba(255, 0, 110, 0.2) 180deg,
    rgba(255, 0, 110, 0.1) 270deg,
    rgba(0, 245, 255, 0.1) 360deg
  );
  border: 2px solid rgba(0, 245, 255, 0.3);
  box-shadow:
    inset 0 0 15px rgba(0, 245, 255, 0.1),
    0 0 20px rgba(0, 245, 255, 0.2);
}

/* 握把 */
.upgrade-grip-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  transform: translate(-50%, -50%);
  cursor: grab;
  z-index: 10;
  transition: none;
}

.upgrade-grip-handle:active {
  cursor: grabbing;
}

.upgrade-grip-handle-inner {
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(0, 245, 255, 1) 0%,
    rgba(0, 245, 255, 0.8) 30%,
    rgba(255, 0, 110, 0.8) 60%,
    rgba(255, 0, 110, 1) 100%
  );
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow:
    0 0 20px rgba(0, 245, 255, 0.8),
    0 0 40px rgba(0, 245, 255, 0.5),
    inset 0 0 15px rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

/* 握把光效 */
.upgrade-grip-handle-inner::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 20%;
  width: 30%;
  height: 30%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  border-radius: 50%;
  animation: handleGlow 2s ease-in-out infinite;
}

/* 中心點 */
.upgrade-grip-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at center,
    rgba(15, 15, 35, 1) 0%,
    rgba(15, 15, 35, 0.8) 50%,
    rgba(0, 245, 255, 0.3) 100%
  );
  border: 1px solid rgba(0, 245, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
}

@keyframes handleGlow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.4;
  }
}

/* 拖動時的效果 */
.upgrade-grip-handle.dragging .upgrade-grip-handle-inner {
  box-shadow:
    0 0 30px rgba(0, 245, 255, 1),
    0 0 60px rgba(0, 245, 255, 0.7),
    0 0 90px rgba(255, 0, 110, 0.5),
    inset 0 0 20px rgba(255, 255, 255, 0.5);
  transform: scale(1.1);
}

/* ===== 升級按鈕 ===== */
.upgrade-button-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.upgrade-button {
  width: 200px;
  height: 60px;
  background: linear-gradient(45deg, var(--cyber-primary), var(--cyber-accent));
  border: none;
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--trans-normal);
  clip-path: polygon(
    0 0,
    calc(100% - 20px) 0,
    100% 50%,
    calc(100% - 20px) 100%,
    0 100%
  );
}

.upgrade-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;
}

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

.upgrade-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 0, 110, 0.5);
}

.upgrade-button:disabled {
  background: linear-gradient(45deg, #333, #555);
  cursor: not-allowed;
  opacity: 0.5;
}

.upgrade-button:active:not(:disabled) {
  transform: translateY(0);
}

/* ===== 倍率按鈕 ===== */
.upgrade-multiplier-buttons-row {
  margin-top: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.upgrade-multiplier-buttons-container {
  display: flex;
  gap: 0;
  /* 移除gap，防止閃爍 */
  max-width: 300px;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0;
  /* 消除HTML空白字符間距 */
}

.upgrade-multiplier-button {
  padding: 8px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--trans-fast);
  position: relative;
  overflow: hidden;
  margin: 0;
  /* 確保永遠沒有間隔 */
  text-align: center;
  /* 文字置中 */
}

.upgrade-multiplier-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--cyber-accent);
  transition: width var(--trans-fast);
  z-index: -1;
}

.upgrade-multiplier-button:hover {
  color: white;
  border-color: var(--cyber-accent);
  text-shadow: var(--glow-small);
}

.upgrade-multiplier-button:hover::before {
  width: 100%;
}

.upgrade-multiplier-button.active {
  background: var(--cyber-accent);
  color: white;
  border-color: var(--cyber-accent);
  box-shadow: var(--glow-purple);
}

/* ===== 標籤切換（手機版） ===== */
.upgrade-tabs-container {
  display: none;
  border-bottom: 2px solid var(--border-dim);
}

.upgrade-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--trans-fast);
  position: relative;
}

.upgrade-tab::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--cyber-primary);
  transform: scaleX(0);
  transition: transform var(--trans-fast);
}

.upgrade-tab.active {
  color: var(--text-primary);
}

.upgrade-tab.active::after {
  transform: scaleX(1);
}

/* ===== 物品列表區域 ===== */
.upgrade-items-container {
  width: 100%;
  max-width: 1600px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.upgrade-items-section {
  background: var(--bg-glass);
  border: 1px solid var(--border-dim);
  backdrop-filter: blur(10px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.upgrade-section-header {
  background: var(--bg-card);
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-dim);
  flex-shrink: 0;
}

.upgrade-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin: 0;
}

.upgrade-search-filters {
  display: flex;
  gap: 10px;
  align-items: center;
}

.upgrade-search-box {
  position: relative;
}

.upgrade-search-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.upgrade-search-box input {
  padding: 8px 12px 8px 35px;
  background: var(--bg-dark);
  border: 1px solid var(--border-dim);
  color: var(--text-primary);
  width: 200px;
  transition: all var(--trans-fast);
}

.upgrade-search-box input:focus {
  outline: none;
  border-color: var(--border-neon);
  box-shadow: 0 0 10px rgba(0, 245, 255, 0.3);
  width: 250px;
}

.upgrade-price-sort-btn {
  padding: 8px 16px;
  background: var(--bg-dark);
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--trans-fast);
  display: flex;
  align-items: center;
  gap: 5px;
}

.upgrade-price-sort-btn:hover {
  border-color: var(--border-neon);
  color: var(--text-primary);
}

.upgrade-price-sort-btn i {
  font-size: 0.8rem;
}

/* ===== 物品網格 ===== */
.upgrade-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  position: relative;
  /* 🎯 修復：確保grid有足夠高度來顯示居中的empty message */
  min-height: 300px;
}

/* 移除內部滾動條，使用頁面滾動 */

/* ===== 物品卡片 ===== */
.upgrade-inventory-item,
.upgrade-target-item {
  background: var(--bg-card);
  border: 1px solid var(--border-dim);
  padding: 10px;
  cursor: pointer;
  transition: all var(--trans-fast);
  position: relative;
  overflow: hidden;
}

.upgrade-inventory-item::before,
.upgrade-target-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(0, 245, 255, 0.1) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.upgrade-inventory-item:hover::before,
.upgrade-target-item:hover::before {
  transform: translateX(100%);
}

.upgrade-inventory-item:hover,
.upgrade-target-item:hover {
  border-color: var(--border-neon);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 245, 255, 0.3);
}

/* 使用data屬性和類名雙重控制選中狀態 */
.upgrade-inventory-item.selected,
.upgrade-target-item.selected,
.upgrade-inventory-item[data-selected="true"],
.upgrade-target-item[data-selected="true"] {
  border: 2px solid var(--cyber-primary) !important;
  background: rgba(255, 0, 110, 0.1) !important;
  box-shadow:
    0 0 10px rgba(255, 0, 110, 0.3),
    inset 0 0 10px rgba(255, 0, 110, 0.1) !important;
}

/* 減少邊框發光效果 */
.upgrade-inventory-item.selected::before,
.upgrade-target-item.selected::before,
.upgrade-inventory-item[data-selected="true"]::before,
.upgrade-target-item[data-selected="true"]::before {
  opacity: 0.6;
  background: linear-gradient(45deg, var(--cyber-primary), var(--cyber-accent));
  transform: translateX(100%) !important;
}

.upgrade-inventory-item.selected::after,
.upgrade-target-item.selected::after,
.upgrade-inventory-item[data-selected="true"]::after,
.upgrade-target-item[data-selected="true"]::after {
  opacity: 0.3;
}

/* 物品圖片容器 */
.upgrade-item-image-container {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 245, 255, 0.05),
    transparent
  );
}

.upgrade-item-image {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(0, 245, 255, 0.5));
}

/* 物品詳情 */
.upgrade-item-details {
  text-align: center;
}

.upgrade-item-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upgrade-item-wear {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

.upgrade-item-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cyber-success);
}

/* 稀有度指示器 */
.upgrade-item-rarity-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
}

.upgrade-common .upgrade-item-rarity-indicator {
  background: var(--rarity-common);
  box-shadow: 0 0 10px var(--rarity-common);
}

.upgrade-rare .upgrade-item-rarity-indicator {
  background: var(--rarity-rare);
  box-shadow: 0 0 10px var(--rarity-rare);
}

.upgrade-legendary .upgrade-item-rarity-indicator {
  background: var(--rarity-legendary);
  box-shadow: 0 0 10px var(--rarity-legendary);
}

.upgrade-mythical .upgrade-item-rarity-indicator {
  background: var(--rarity-mythical);
  box-shadow: 0 0 10px var(--rarity-mythical);
}

/* 物品數量 */
.upgrade-item-quantity {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--bg-dark);
  border: 1px solid var(--border-neon);
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* 加號圖標（已移除） */
.upgrade-plus-icon,
.upgrade-plus-h,
.upgrade-plus-v {
  display: none !important;
}

/* ===== 載入和空狀態 ===== */
.upgrade-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-muted);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  background-color: var(--mystic-bg);
}

/* 載入動畫樣式 */
.upgrade-modern-loader {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.upgrade-loader-shape {
  width: 40px;
  height: 40px;
  position: relative;
  background: transparent;
  transform: rotate(45deg);
}

.upgrade-loader-shape::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid transparent;
  border-top-color: var(--cyber-primary);
  border-right-color: var(--cyber-primary);
  border-radius: 50%;
  animation: loaderSpin 1.5s linear infinite;
}

.upgrade-loader-shape::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 3px solid transparent;
  border-bottom-color: var(--cyber-secondary);
  border-left-color: var(--cyber-secondary);
  border-radius: 50%;
  animation: loaderSpin 1s linear infinite reverse;
}

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

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

/* 載入容器樣式 */
#upgrade-inventory-loading,
#upgrade-target-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  background-color: var(--mystic-bg);
}

#upgrade-inventory-loading p,
#upgrade-target-loading p {
  color: #888;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
}

.upgrade-remove-item-btn {
  position: absolute;
  right: 5px;
  width: 20px;
  height: 20px;
  background: #424047;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  transition: all var(--trans-fast);
  z-index: 10;
}

.upgrade-remove-item-btn:hover {
  background: #48474d;
  color: white;
  transform: translateY(-2px);
}

.upgrade-empty-message {
  text-align: center;
  padding: 40px;
  color: var(--text-muted);
  /* 🎯 修復：在grid佈局中使單個元素居中顯示 */
  grid-column: 1 / -1; /* 佔滿整個grid寬度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px; /* 確保有足夠高度來顯示置中效果 */
}

.upgrade-empty-message .upgrade-empty-icon {
  font-size: 3rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.upgrade-empty-message h3 {
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
  font-size: 1.5rem;
}

.upgrade-empty-message p {
  margin: 0 0 1.5rem 0;
  font-size: 1rem;
}

.upgrade-login-btn {
  background: linear-gradient(135deg, #001a2e, #003d5b, #0066cc);
  border: 1px solid #0080ff;
  padding: 12px 24px;
  border-radius: 0;
  color: white;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--font-main);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all var(--trans-fast);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    100% 50%,
    calc(100% - 10px) 100%,
    0 100%
  );
  text-shadow: 0 0 10px rgba(0, 128, 255, 0.8);
  box-shadow:
    0 0 20px rgba(0, 102, 204, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.upgrade-login-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.6s ease;
}

.upgrade-login-btn:hover::before {
  left: 100%;
}

.upgrade-login-btn:hover {
  background: linear-gradient(135deg, #0066cc, #0080ff, #00aaff);
  transform: translateY(-2px);
  box-shadow:
    0 8px 25px rgba(0, 128, 255, 0.6),
    0 0 30px rgba(0, 170, 255, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: #00aaff;
}

/* ===== 通知系統 ===== */
.upgrade-notification-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 1000;
}

.upgrade-notification {
  background: var(--bg-glass);
  border: 1px solid var(--border-neon);
  padding: 15px 20px;
  margin-bottom: 10px;
  min-width: 300px;
  backdrop-filter: blur(10px);
  animation: slide-in 0.3s ease-out;
  position: relative;
  padding-left: 40px;
}

.upgrade-notification::before {
  content: "!";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.upgrade-notification.success {
  border-color: var(--cyber-success);
  color: var(--cyber-success);
}

.upgrade-notification.error {
  border-color: var(--cyber-danger);
  color: var(--cyber-danger);
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ===== 神秘背景效果（保留但優化） ===== */
.upgrade-mystical-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.upgrade-stars {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
}

.upgrade-stars::before,
.upgrade-stars::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  box-shadow: var(--glow-small);
  animation: twinkle 3s infinite;
}

@keyframes twinkle {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.upgrade-mist {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 245, 255, 0.05),
    transparent
  );
  animation: mist-move 20s infinite alternate;
}

@keyframes mist-move {
  0% {
    transform: scale(1) rotate(0deg);
  }

  100% {
    transform: scale(1.1) rotate(5deg);
  }
}

/* ===== 桌面版樣式 ===== */
@media (min-width: 1271px) {
  .upgrade-game-container {
    padding: 20px;
  }

  .upgrade-main-action-row {
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 25px;
    align-items: start;
    margin-bottom: 30px;
    min-height: 450px;
  }

  .upgrade-wheel-container {
    width: 350px;
    height: 350px;
    margin: 0 auto 15px auto;
  }

  .upgrade-wheel-stats-container {
    max-width: 350px;
    margin-bottom: 15px;
    gap: 20px;
  }

  .upgrade-grip-controller-container {
    max-width: 350px;
    margin: 20px auto 0;
  }

  .upgrade-side-panel {
    min-height: 320px;
    width: 400px;
    max-width: 400px;
    padding: 20px;
  }

  .upgrade-selected-item {
    min-height: 200px;
    min-width: 300px;
  }

  .upgrade-selected-item-wrapper {
    min-height: 250px;
  }

  .upgrade-price-display {
    width: 400px;
    max-width: 400px;
  }

  .upgrade-left-column,
  .upgrade-right-column {
    justify-content: space-between;
    min-width: 400px;
  }

  .upgrade-left-column {
    justify-content: flex-start;
    width: 400px;
    /* 確保桌面版本維持400px寬度 */
  }

  .upgrade-right-column {
    justify-content: flex-end;
    width: 400px;
    /* 確保桌面版本維持400px寬度 */
  }

  .upgrade-selected-item-info {
    margin-right: 20px;
  }

  .upgrade-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-height: 600px;
    min-height: 450px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .upgrade-tabs-container {
    display: none !important;
    /* 桌面版隱藏 */
  }

  .upgrade-items-container {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    min-height: 500px;
    margin: 30px auto 0;
  }

  .upgrade-left-right-columns-container {
    display: contents;
  }

  /* 特別針對犧牲物品的分頁容器樣式 */
  #upgrade-inventory-showcase .upgrade-pagination-container {
    margin-top: 30px;
    /* 增加上方間距 */
  }

  #upgrade-inventory-showcase .upgrade-selected-items-container {
    margin-top: 20px;
    /* 增加物品容器的上方間距 */
  }

  #upgrade-inventory-showcase .upgrade-pagination-controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    /* 增加分頁控制器的上方間距 */
    padding-bottom: 15px;
  }

  /* 特別針對犧牲物品的 upgrade-selected-item 樣式 */
  #upgrade-inventory-showcase .upgrade-selected-item {
    margin-top: 45px;
    /* 增加上方間距 */
  }
}

/* ===== 小螢幕和手機版樣式 ===== */
@media (max-width: 1270px) {
  .upgrade-main {
    padding: 15px 15px 0px 15px;
    margin-top: 20px;
    /* 減少margin-top */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 40px);
    /* 確保有足夠的高度 */
  }

  .upgrade-game-container {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 0;
    clip-path: polygon(
      0 10px,
      10px 0,
      calc(100% - 10px) 0,
      100% 10px,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      10px 100%,
      0 calc(100% - 10px)
    );
    order: -1;
  }

  /* 標籤容器 - 顯示在upgrade-game-container之後 */
  .upgrade-tabs-container {
    display: flex !important;
    /* 確保在手機版顯示 */
    order: 0;
    margin-top: 10px;
    height: 50px;
    width: 100%;
    border-bottom: 2px solid var(--border-dim);
    background: var(--bg-card);
    border-radius: 8px 8px 0 0;
    overflow: hidden;
  }

  /* 物品容器 - 顯示在最底部 */
  .upgrade-items-container {
    display: block !important;
    /* 強制覆蓋桌面版的grid設置 */
    margin-top: 0px;
    grid-template-columns: unset !important;
    /* 重置桌面版的grid設置 */
    gap: 0;
    order: 1;
    min-height: 400px;
    /* 增加最小高度給更多空間 */
    position: relative;
    flex: 1;
    /* 讓容器自適應剩餘空間 */
  }

  /* 主要動作行 - 重新設計手機版排版 */
  .upgrade-main-action-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    min-height: auto;
    margin-bottom: 20px;
    position: relative;
  }

  /* 中央欄位 - 放在最上面 */
  .upgrade-center-column {
    order: 0;
    width: 100%;
    max-width: 280px;
    /* 保持較大寬度容納輪盤 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 0;
    margin: 0 auto 10px auto;
    /* 水平居中 */
  }

  /* 成功率和倍率統計 */
  .upgrade-wheel-stats-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 300px;
    padding: 0 10px;
    margin: 15px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .upgrade-wheel-stat {
    flex: 1;
    min-width: 100px;
    padding: 6px 10px;
    font-size: 0.9rem;
    text-align: center;
  }

  .upgrade-wheel-stat .stat-label {
    font-size: 0.7rem;
  }

  .upgrade-wheel-stat .stat-value {
    font-size: 1rem;
  }

  .upgrade-wheel-section {
    width: 100%;
    max-width: 280px;
    margin-bottom: 15px;
  }

  .upgrade-wheel-container {
    width: 240px;
    height: 240px;
    margin: 0 auto 10px;
  }

  .upgrade-wheel-image-wrapper {
    filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.5));
  }

  .upgrade-wheel-pointer {
    width: 60px;
    height: 6px;
  }

  .upgrade-wheel-pointer::after {
    left: 4px;
    width: calc(100% - 12px);
    height: 1.5px;
  }

  .upgrade-wheel-center-hexagon {
    width: 36px;
    height: 36px;
  }

  .upgrade-wheel-center-hexagon::before,
  .upgrade-wheel-center-hexagon::after {
    width: 24px;
    height: 24px;
  }

  /* 握把控制器 */
  .upgrade-grip-controller-container {
    max-width: 280px;
    width: 100%;
    margin: 10px auto 0;
  }

  .upgrade-grip-controller {
    width: 80px;
    height: 80px;
  }

  .upgrade-grip-ring {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
  }

  .upgrade-grip-handle {
    width: 16px;
    height: 16px;
  }

  /* 左右欄位容器 - 並排且居中 */
  .upgrade-left-right-columns-container {
    order: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    /* 並排顯示 */
    gap: 3px;
    align-items: flex-start;
    /* 頂部對齊 */
    justify-content: center;
    /* 整體居中 */
    max-width: 100%;
    overflow-x: auto;
    /* 如果內容過寬允許滾動 */
  }

  /* 左右欄位 - 固定寬度 */
  .upgrade-left-column,
  .upgrade-right-column {
    width: 150px;
    /* 縮小固定寬度以適應並排 */
    min-width: 145px;
    /* 最小寬度 */
    flex-shrink: 0;
    /* 防止收縮 */
    flex-direction: column;
    gap: 10px;
    display: flex;
  }

  /* 物品展示面板調整 */
  .upgrade-side-panel {
    padding: 10px;
    min-height: 305px;
    width: 100%;
    max-width: 150px;
  }

  .upgrade-hexagon-title {
    font-size: 0.8rem;
    /* 縮小字體以適應窄panel */
    margin-bottom: 10px;
    /* 縮小間距 */
  }

  .upgrade-selected-item-wrapper {
    min-height: 180px;
    /* 縮小高度 */
    /* 配合容器高度 */
  }

  .upgrade-selected-items-container {
    min-height: 180px;
    /* 縮小高度 */
    /* 增加高度以容納垂直佈局 */
    padding: 8px;
    /* 縮小padding */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .upgrade-selected-item {
    padding: 8px;
    /* 縮小padding */
    min-height: 175px;
    /* 縮小最大高度 */
    gap: 8px;
    /* 縮小間距 */
    background: var(--bg-dark);
    border: 1px solid var(--border-neon);
    position: relative;
    display: flex;
    flex-direction: column;
    /* 垂直佈局 */
    align-items: center;
    /* 水平居中 */
    justify-content: flex-start;
    /* 讓內容從頂部開始排列 */
    width: 100px;
    max-width: 95%;
    text-align: center;
  }

  .upgrade-selected-item-image-container {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-start;
    /* 讓圖片容器位於upgrade-selected-item的最頂部 */
    margin-top: 0;
    /* 確保沒有上邊距 */
  }

  .upgrade-selected-item-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .upgrade-selected-item-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 水平居中 */
    overflow: hidden;
    gap: 4px;
    width: 100%;
    margin-top: -8px;
    /* 往上調整位置，允許重疊到上方圖片 */
  }

  .upgrade-selected-item-name {
    font-size: 0.7rem;
    /* 進一步縮小字體 */
    margin-bottom: 0;
    white-space: normal;
    /* 允許換行 */
    text-align: center;
    line-height: 1.2;
    /* 改善行高 */
    font-weight: 600;
    color: var(--text-primary);
    max-width: 100%;
  }

  .upgrade-selected-item-wear {
    font-size: 0.65rem;
    /* 進一步縮小字體 */
    color: var(--text-muted);
    margin-bottom: 0;
    text-align: center;
    line-height: 2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
  }

  .upgrade-selected-item-price {
    font-weight: 700;
    color: var(--cyber-success);
    font-size: 0.8rem;
    /* 進一步縮小字體 */
    margin-top: 2px;
    /* 縮小間距 */
    text-align: center;
    line-height: 1.1;
  }

  /* empty-state 垂直佈局適應 */
  .upgrade-empty-state {
    text-align: center;
    opacity: 0.7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 180px;
    /* 確保有足夠高度 */
  }

  .upgrade-empty-icon-img {
    width: 70px;
    height: 70px;
    opacity: 0.3;
    filter: hue-rotate(180deg) brightness(1.5);
    display: block !important;
    margin: 0 auto 12px auto !important;
  }

  .upgrade-empty-state p {
    color: var(--text-muted);
    margin: 0 !important;
    font-size: 0.85rem;
    text-align: center !important;
    width: 100%;
    display: block !important;
    line-height: 1.4;
  }

  /* 移除按鈕位置設定 - 只修改位置到右上角 */
  .upgrade-remove-item-btn {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  /* 價格顯示調整 */
  .upgrade-price-display {
    height: 70px;
    /* 縮小高度 */
    padding: 8px;
    /* 縮小padding */
    margin-top: 10px;
    width: 100%;
    /* 填滿column寬度 */
    max-width: 150px;
    /* 配合column寬度 */
  }

  .upgrade-price-label {
    font-size: 0.7rem;
    margin-bottom: 3px;
  }

  .upgrade-price-value {
    font-size: 1.2rem;
  }

  /* 升級按鈕 */
  .upgrade-button-container {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .upgrade-button {
    width: 180px;
    height: 50px;
    font-size: 1rem;
  }

  /* 倍率按鈕 */
  .upgrade-multiplier-buttons-row {
    margin-top: 10px;
    width: 100%;
  }

  .upgrade-multiplier-buttons-container {
    display: flex;
    gap: 0;
    /* 移除gap，防止閃爍 */
    max-width: 300px;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0;
    /* 消除HTML空白字符間距 */
  }

  .upgrade-multiplier-button {
    padding: 6px 12px;
    font-size: 0.8rem;
    /* 恢復字體大小 */
    margin: 0;
    /* 移動版也沒有間隔 */
    text-align: center;
    /* 文字置中 */
  }

  /* 手機版項目區域 - 正確的tab切換邏輯 */
  /* 默認顯示倉庫清單，隱藏目標清單 */
  #upgrade-inventory-items-section {
    display: block !important;
  }

  #upgrade-target-items-section {
    display: none !important;
  }

  /* tab切換邏輯 - 使用父容器class控制 */
  .upgrade-main.show-inventory #upgrade-inventory-items-section {
    display: block !important;
  }

  .upgrade-main.show-inventory #upgrade-target-items-section {
    display: none !important;
  }

  .upgrade-main.show-target #upgrade-inventory-items-section {
    display: none !important;
  }

  .upgrade-main.show-target #upgrade-target-items-section {
    display: block !important;
  }

  #upgrade-inventory-showcase .upgrade-selected-item {
    margin-top: 30px !important;
  }

  #upgrade-target-showcase .upgrade-selected-item {
    margin-bottom: 22px !important;
  }

  /* 物品網格調整 - 手機版優化 */
  .upgrade-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 6px !important;
    padding: 10px !important;
    width: 100%;
    min-height: 350px;
    /* 設置最小高度確保有足夠空間 */
  }

  .upgrade-inventory-item,
  .upgrade-target-item {
    padding: 6px !important;
    /* 移除固定高度限制，讓虛擬列表引擎動態計算 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .upgrade-item-image-container {
    margin-bottom: 4px !important;
    /* 移除固定高度，使用aspect-ratio讓高度隨寬度縮放 */
    aspect-ratio: 1 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .upgrade-item-name {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .upgrade-item-wear {
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: keep-all !important;
  }

  .upgrade-item-price {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    margin-top: auto !important;
    /* 讓價格靠下對齊 */
  }

  /* 搜尋框調整 */
  .upgrade-section-header {
    padding: 12px 15px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .upgrade-section-title {
    font-size: 0.95rem;
    width: 100%;
  }

  .upgrade-search-filters {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .upgrade-search-box {
    flex: 1;
  }

  .upgrade-search-box input {
    width: 100%;
    font-size: 0.85rem;
    padding: 6px 10px 6px 30px;
  }

  .upgrade-search-box input:focus {
    width: 100%;
  }

  .upgrade-price-sort-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  /* 手機版分頁控制調整 - 垂直佈局內嵌樣式 */
  .upgrade-pagination-controls {
    position: static;
    /* 改為靜態定位 */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    background: none;
    /* 移除背景 */
    border: none;
    /* 移除邊框 */
    border-radius: 0;
    z-index: auto;
    box-shadow: none;
    /* 移除陰影 */
    margin-bottom: 25px;
  }

  .upgrade-page-nav-btn {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
    border-radius: 4px;
  }

  .upgrade-page-indicator {
    font-size: 0.75rem;
    color: var(--text-muted);
  }

  /* 通知調整 */
  .upgrade-notification-container {
    top: 60px;
    right: 10px;
    left: 10px;
  }

  .upgrade-notification {
    min-width: auto;
    width: 100%;
    font-size: 0.85rem;
    padding: 12px 15px 12px 35px;
  }

  /* 修復溢出問題 */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 防止水平滾動 - 由全域CSS統一控制 */

  /* 額外的手機版面優化 */
  .upgrade-main-action-row > * {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ===== 額外的賽博龐克特效 ===== */
.upgrade-cyber-glitch {
  animation: glitch 2s infinite;
}

@keyframes glitch {
  0%,
  100% {
    text-shadow:
      0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
      0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }

  14% {
    text-shadow:
      0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
      0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }

  15% {
    text-shadow:
      -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }

  49% {
    text-shadow:
      -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }

  50% {
    text-shadow:
      0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.025em 0 0 rgba(0, 255, 0, 0.75),
      0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }

  99% {
    text-shadow:
      0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
      0.025em 0 0 rgba(0, 255, 0, 0.75),
      0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

/* 成功率路徑 - 修正SVG高度 */
.upgrade-success-rate-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.upgrade-success-rate-path svg {
  width: 100%;
  height: 100%;
  max-height: 350px;
}

.upgrade-success-rate-path.visible {
  opacity: 1 !important;
}

.upgrade-success-rate-path {
  pointer-events: none !important;
  z-index: 10 !important;
}

.upgrade-success-rate-path svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

#upgrade-success-path {
  fill: none;
  stroke: var(--cyber-success);
  stroke-width: 3;
  filter: drop-shadow(0 0 5px var(--cyber-success));
}

/* 輪盤覆蓋層和其他必要元素 */
.upgrade-wheel-hexagon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* 分頁控制 */
.upgrade-pagination-container {
  margin-top: 10px;
  text-align: center;
}

.upgrade-page-button {
  background: var(--bg-dark);
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
  padding: 5px 10px;
  margin: 0 5px;
  cursor: pointer;
  transition: all var(--trans-fast);
}

.upgrade-page-button:hover:not(:disabled) {
  border-color: var(--border-neon);
  color: var(--text-primary);
}

.upgrade-page-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.upgrade-page-indicator {
  display: inline-block;
  margin: 0 10px;
  color: var(--text-muted);
}

/* 活動種子卡片 */
.upgrade-event-seed-card {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--bg-glass);
  border: 2px solid var(--cyber-warning);
  padding: 20px;
  max-width: 300px;
  backdrop-filter: blur(10px);
  animation: seed-card-appear 0.5s ease-out;
}

@keyframes seed-card-appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 選中物品資訊樣式 */
.upgrade-selected-item-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.upgrade-selected-item-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.upgrade-selected-item-wear {
  color: var(--text-muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
}

.upgrade-selected-item-price {
  font-weight: 700;
  color: var(--cyber-success);
  font-size: 1.2rem;
}

/* 升級結果模態框 */
.upgrade-result-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.upgrade-result-modal-content {
  background: var(--bg-card);
  border: 2px solid var(--border-neon);
  padding: 40px;
  max-width: 600px;
  width: 90%;
  position: relative;
  animation: modal-appear 0.5s ease-out;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.upgrade-success {
  border-color: var(--cyber-success);
  box-shadow: var(--glow-large);
}

.upgrade-fail {
  border-color: var(--cyber-danger);
}

/* 分頁控制器樣式 */
.upgrade-pagination-controls {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.upgrade-page-nav-btn {
  background: var(--bg-dark);
  border: 1px solid var(--border-dim);
  color: var(--text-secondary);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--trans-fast);
  border-radius: 4px;
}

.upgrade-page-nav-btn:hover:not(:disabled) {
  border-color: var(--border-neon);
  color: var(--text-primary);
  background: rgba(0, 245, 255, 0.1);
}

.upgrade-page-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.upgrade-page-indicator {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
}

/* 事件種子卡片樣式補充 */
.upgrade-event-seed-card {
  position: fixed;
  bottom: 90px;
  right: 20px;
  background: var(--bg-glass);
  border: 2px solid var(--cyber-warning);
  padding: 20px;
  max-width: 300px;
  backdrop-filter: blur(10px);
  animation: seed-card-appear 0.5s ease-out;
}

/* ===== 賽博龐克風格成功區域線 ===== */
.upgrade-success-rate-path {
  filter: drop-shadow(0 0 8px rgba(0, 245, 255, 0.8));
}

.upgrade-success-rate-path.visible {
  animation: pathGlow 2s ease-in-out infinite;
}

#upgrade-success-path {
  stroke: rgba(0, 245, 255, 0.9) !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
  filter: drop-shadow(0 0 8px rgba(0, 245, 255, 0.8)) !important;
  opacity: 1 !important;
}

/* SVG濾鏡定義 */
.upgrade-wheel-container svg {
  position: absolute;
  width: 0;
  height: 0;
}

/* 成功區域線動畫 */
@keyframes pathGlow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px rgba(0, 245, 255, 0.8))
      drop-shadow(0 0 15px rgba(0, 245, 255, 0.5));
  }

  50% {
    filter: drop-shadow(0 0 12px rgba(255, 0, 110, 0.8))
      drop-shadow(0 0 25px rgba(255, 0, 110, 0.5));
  }
}

/* 成功區域線脈衝效果 */
.upgrade-success-rate-path::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 30%,
    rgba(0, 245, 255, 0.1) 50%,
    transparent 70%
  );
  animation: pathPulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pathPulse {
  0%,
  100% {
    transform: scale(0.95);
    opacity: 0;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* ===== 升級結果區域賽博龐克風格 ===== */
.upgrade-result-area {
  background: transparent !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.upgrade-result-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 245, 255, 0.1) 0%,
    rgba(255, 0, 110, 0.1) 100%
  );
  clip-path: inherit;
  -webkit-clip-path: inherit;
  z-index: -1;
}

.upgrade-result-area.success::before {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 157, 0.2) 0%,
    rgba(0, 245, 255, 0.2) 100%
  );
  animation: successGlow 2s ease-in-out infinite;
}

.upgrade-result-area.failure::before {
  background: linear-gradient(
    135deg,
    rgba(255, 0, 110, 0.2) 0%,
    rgba(255, 70, 85, 0.2) 100%
  );
  animation: failureGlow 2s ease-in-out infinite;
}

@keyframes successGlow {
  0%,
  100% {
    box-shadow:
      inset 0 0 30px rgba(0, 255, 157, 0.3),
      0 0 40px rgba(0, 255, 157, 0.4);
  }

  50% {
    box-shadow:
      inset 0 0 50px rgba(0, 245, 255, 0.4),
      0 0 60px rgba(0, 245, 255, 0.5);
  }
}

@keyframes failureGlow {
  0%,
  100% {
    box-shadow:
      inset 0 0 30px rgba(255, 0, 110, 0.3),
      0 0 40px rgba(255, 0, 110, 0.4);
  }

  50% {
    box-shadow:
      inset 0 0 50px rgba(255, 70, 85, 0.4),
      0 0 60px rgba(255, 70, 85, 0.5);
  }
}

/* 結果標題賽博龐克風格 */
.upgrade-result-title {
  font-size: 20px !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: linear-gradient(
    45deg,
    #fff 0%,
    rgba(0, 245, 255, 1) 50%,
    #fff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleShine 3s linear infinite;
  text-shadow: none;
  position: relative;
}

.upgrade-result-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background: none;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 20px currentColor,
    0 0 40px currentColor,
    0 0 60px currentColor;
  opacity: 0.5;
  animation: titleGlitch 2s infinite;
}

.upgrade-result-area.success .upgrade-result-title {
  background: linear-gradient(
    45deg,
    #fff 0%,
    rgba(0, 255, 157, 1) 50%,
    #fff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.upgrade-result-area.failure .upgrade-result-title {
  background: linear-gradient(
    45deg,
    #fff 0%,
    rgba(255, 0, 110, 1) 50%,
    #fff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

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

  100% {
    background-position: 200% center;
  }
}

@keyframes titleGlitch {
  0%,
  100% {
    transform: translate(0);
    opacity: 0.5;
  }

  20% {
    transform: translate(-2px, 2px);
    opacity: 0.7;
  }

  40% {
    transform: translate(-2px, -2px);
    opacity: 0.6;
  }

  60% {
    transform: translate(2px, 2px);
    opacity: 0.8;
  }

  80% {
    transform: translate(2px, -2px);
    opacity: 0.5;
  }
}

/* 技術數據面板賽博龐克風格 */
.upgrade-tech-data {
  background: linear-gradient(
    135deg,
    rgba(15, 15, 35, 0.9) 0%,
    rgba(25, 25, 55, 0.9) 100%
  ) !important;
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: 0 !important;
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% 100%,
    8px 100%,
    0 calc(100% - 8px)
  );
  position: relative;
  overflow: hidden;
  padding: 8px !important;
  max-width: 180px !important;
  margin: 0 auto;
}

.upgrade-tech-data::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    45deg,
    rgba(0, 245, 255, 0.5) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 0, 110, 0.5) 100%
  );
  animation: borderRotate 3s linear infinite;
  z-index: -1;
}

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

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

.upgrade-tech-data-item {
  border-bottom: 1px solid rgba(0, 245, 255, 0.2);
  padding: 6px 0;
  position: relative;
}

.upgrade-tech-data-item:last-child {
  border-bottom: none;
}

.upgrade-tech-data-item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 245, 255, 0.8) 50%,
    transparent 100%
  );
  transition: width 0.3s ease;
}

.upgrade-tech-data-item:hover::before {
  width: 100%;
}

.upgrade-label {
  text-transform: uppercase;
  color: rgba(0, 245, 255, 0.8) !important;
  font-size: 9px !important;
  letter-spacing: 0.3px;
}

.upgrade-value {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(0, 245, 255, 0.3) !important;
  color: #fff !important;
  padding: 2px 6px !important;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  font-size: 10px !important;
}

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

.upgrade-value:hover::before {
  left: 100%;
}

.upgrade-value.success-value {
  border-color: rgba(0, 255, 157, 0.5) !important;
  background: linear-gradient(
    135deg,
    rgba(0, 255, 157, 0.2) 0%,
    rgba(0, 245, 255, 0.2) 100%
  ) !important;
  animation: successValuePulse 2s ease-in-out infinite;
}

.upgrade-value.failure-value {
  border-color: rgba(255, 0, 110, 0.5) !important;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 110, 0.2) 0%,
    rgba(255, 70, 85, 0.2) 100%
  ) !important;
  animation: failureValuePulse 2s ease-in-out infinite;
}

@keyframes successValuePulse {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(0, 255, 157, 0.5),
      inset 0 0 10px rgba(0, 255, 157, 0.2);
  }

  50% {
    box-shadow:
      0 0 20px rgba(0, 245, 255, 0.7),
      inset 0 0 15px rgba(0, 245, 255, 0.3);
  }
}

@keyframes failureValuePulse {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(255, 0, 110, 0.5),
      inset 0 0 10px rgba(255, 0, 110, 0.2);
  }

  50% {
    box-shadow:
      0 0 20px rgba(255, 70, 85, 0.7),
      inset 0 0 15px rgba(255, 70, 85, 0.3);
  }
}

/* 結果區域進入動畫 */
.upgrade-result-area.visible .result-content {
  animation: resultSlideIn 0.5s ease-out forwards;
}

@keyframes resultSlideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.upgrade-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: none;
}

.upgrade-animation-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: none;
}

.upgrade-success-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: none;
}