/* my-team.css — 我的球隊系統樣式 */

/* ───────── FAB 懸浮入口（圓形 icon + 下方文字標籤） ───────── */
.mt-fab {
  position: fixed;
  right: 16px;
  bottom: 80px;
  width: 64px;
  height: 76px;
  border-radius: 16px;
  border: 2.5px solid rgba(255,255,255,0.45);
  background: linear-gradient(180deg, #f0c040 0%, #e07020 100%);
  box-shadow:
    0 6px 18px rgba(240,192,64,0.45),
    0 3px 10px rgba(0,0,0,0.35),
    inset 0 2px 3px rgba(255,255,255,0.4),
    inset 0 -2px 3px rgba(0,0,0,0.25);
  cursor: pointer;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 4px 4px;
  gap: 1px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mt-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 8px 22px rgba(240,192,64,0.7),
    0 3px 12px rgba(0,0,0,0.4),
    inset 0 2px 3px rgba(255,255,255,0.4),
    inset 0 -2px 3px rgba(0,0,0,0.25);
}
.mt-fab:active { transform: translateY(0) scale(0.96); }

.mt-fab-crest {
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 26px;
  line-height: 1;
}
.mt-fab-crest svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mt-fab-label {
  pointer-events: none;
  font-size: 11px;
  font-weight: 900;
  color: #2a1505;
  letter-spacing: 1px;
  font-family: 'Noto Sans TC', system-ui, sans-serif;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 -1px 0 rgba(0,0,0,0.15);
  line-height: 1.1;
  white-space: nowrap;
}

.mt-fab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: #ff3030;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1a1a2e;
  box-shadow: 0 2px 6px rgba(255,48,48,0.5);
  pointer-events: none;
}

@media (max-width: 600px) {
  .mt-fab {
    right: 12px;
    bottom: 92px;
  }
}

/* ───────── 我的球隊 Modal 殼 ───────── */
.mt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 10500;
  display: flex;
  align-items: stretch;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mt-modal-overlay.open { opacity: 1; }

.mt-modal {
  width: 100%;
  max-width: 560px;
  height: 100vh;
  max-height: 100vh;
  background: linear-gradient(180deg, #1a1a2e 0%, #0d1224 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  border-left: 1px solid rgba(240,192,64,0.2);
  border-right: 1px solid rgba(240,192,64,0.2);
  overflow: hidden;       /* 內部 scroll 用 mt-hub-content / mt-modal-body */
}
.mt-modal-body {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
}
.mt-modal-body > .mt-onboard { flex: 1; min-height: 0; overflow-y: auto; }

.mt-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s;
}
.mt-modal-close:hover { background: rgba(255,255,255,0.15); }

/* ───────── Onboarding（建隊）v2 polish ─────────── */
.mt-onboard {
  padding: 50px 24px 40px;
  text-align: center;
  flex: 1;
  overflow-y: auto;
}

/* Hero 區 — 動態星空 + pixel 場景 + 預覽卡片 */
/* Onboarding hero：用 .mt-match-banner 樣式 + 隊徽預覽疊上 */
.mt-onboard-hero.mt-match-banner {
  height: 180px;
  margin: -20px -24px 18px;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.mt-onboard-hero-card {
  position: absolute;
  left: 0; right: 0; top: 14px;
  z-index: 4;
  text-align: center;
  animation: mt-onboard-hero-in 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  pointer-events: none;
}
@keyframes mt-onboard-hero-in {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mt-onboard-hero-crest {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  font-size: 44px;
  background: linear-gradient(135deg, #f0c040, #e07020);
  box-shadow: 0 6px 22px rgba(240,192,64,0.5);
  margin-bottom: 8px;
  animation: mt-onboard-crest-bob 3s ease-in-out infinite;
  transition: transform 0.2s;
}
@keyframes mt-onboard-crest-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.mt-pulse-once { animation: mt-onboard-crest-pulse 0.4s ease-out; }
@keyframes mt-onboard-crest-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); box-shadow: 0 8px 30px rgba(240,192,64,0.8); }
  100% { transform: scale(1); }
}
.mt-onboard-hero-name {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

.mt-onboard-title {
  font-size: 22px;
  font-weight: 900;
  color: #f0c040;
  margin-bottom: 8px;
}
.mt-onboard-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 22px;
  line-height: 1.7;
}

/* 福利徽章排（建隊送什麼） */
.mt-onboard-perks {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 12px;
}
.mt-onboard-perk {
  background: rgba(240,192,64,0.1);
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 18px;
  padding: 4px 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
}
.mt-onboard-perk b { color: #f0c040; font-size: 13px; }

/* Submit button v2 */
.mt-onboard-submit {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
}
.mt-onboard-submit-arrow {
  font-size: 18px;
  transition: transform 0.2s;
}
.mt-onboard-submit:hover:not(:disabled) .mt-onboard-submit-arrow {
  transform: translateX(4px);
}
.mt-onboard-section {
  margin-bottom: 24px;
  text-align: left;
}
.mt-onboard-label {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.mt-onboard-input {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}
.mt-onboard-input:focus {
  border-color: #f0c040;
  outline: none;
  background: rgba(255,255,255,0.1);
}

.mt-crest-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.mt-crest-cell {
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mt-crest-cell:hover { background: rgba(255,255,255,0.1); transform: scale(1.05); }
.mt-crest-cell.sel {
  background: linear-gradient(135deg, #f0c040 0%, #e07020 100%);
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 2px rgba(240,192,64,0.4);
}

.mt-onboard-submit {
  width: 100%;
  background: linear-gradient(135deg, #f0c040 0%, #e07020 100%);
  border: none;
  border-radius: 12px;
  padding: 14px;
  color: #1a1a2e;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  margin-top: 16px;
  box-shadow: 0 4px 14px rgba(240,192,64,0.3);
  transition: transform 0.1s;
}
.mt-onboard-submit:hover { transform: translateY(-1px); }
.mt-onboard-submit:disabled {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.4);
  cursor: not-allowed;
  box-shadow: none;
}

.mt-onboard-gift {
  margin-top: 12px;
  font-size: 12px;
  color: #f0c040;
  text-align: center;
}
.mt-onboard-pending {
  background: linear-gradient(135deg, rgba(240,192,64,0.18), rgba(224,112,32,0.1));
  border: 1px solid rgba(240,192,64,0.45);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 20px;
  color: #f0c040;
  font-size: 13px;
  text-align: center;
  animation: mt-pending-pulse 2s ease-in-out infinite;
}
.mt-onboard-pending b { color: #fff; font-size: 16px; }
@keyframes mt-pending-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,192,64,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(240,192,64,0); }
}

/* ───────── Hub（球隊管理）─────────── */
.mt-hub-header {
  padding: 38px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mt-hub-team {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.mt-hub-team-crest {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  overflow: hidden;
}
.mt-hub-team-crest svg { width: 100%; height: 100%; }

/* ── 設定 / Kit / Crest picker ── */
.mt-settings-tab { padding: 12px; }
.mt-settings-section { margin-bottom: 20px; }
.mt-settings-title { font-size: 13px; font-weight: 700; color: #f0c040; margin-bottom: 8px; }
.mt-settings-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-settings-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer; transition: all 0.15s;
  padding: 0;
}
.mt-settings-swatch:hover { transform: scale(1.1); }
.mt-settings-swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px #f0c040; transform: scale(1.1); }
.mt-settings-crests { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 320px; }
.mt-settings-crest {
  background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 4px; cursor: pointer; transition: all 0.15s;
}
.mt-settings-crest svg { width: 100%; height: 100%; display: block; }
.mt-settings-crest:hover { background: rgba(255,255,255,0.1); }
.mt-settings-crest.sel { border-color: #f0c040; background: rgba(240,192,64,0.12); }
.mt-settings-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-settings-preset {
  display: flex; padding: 0; border: 2px solid rgba(255,255,255,0.2);
  border-radius: 20px; overflow: hidden; cursor: pointer; height: 32px;
}
.mt-settings-preset:hover { border-color: #f0c040; }
.mt-settings-preset span { width: 16px; height: 28px; display: block; }
.mt-settings-preview { display: flex; align-items: center; justify-content: center; }
.mt-settings-preview svg { width: 100%; height: 100%; }
#mt-settings-save {
  display: block; width: 100%; margin-top: 20px;
}

/* ── 教練 tab ── */
.mt-coach-tab { padding: 12px; }
.mt-coach-active {
  background: rgba(240,192,64,0.08); border: 1px solid rgba(240,192,64,0.3);
  border-radius: 10px; padding: 12px; margin-top: 12px;
}
.mt-coach-active-label { font-size: 11px; color: #f0c040; margin-bottom: 4px; }
.mt-coach-active-name { font-size: 16px; font-weight: 800; }
.mt-coach-active-trait { font-size: 12px; opacity: 0.8; margin-top: 2px; }
.mt-coach-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px;
}
.mt-coach-card {
  background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 8px; text-align: center; position: relative;
}
.mt-coach-card.rarity-SSR { border-color: #f0c040; }
.mt-coach-card.rarity-SR  { border-color: #9b59b6; }
.mt-coach-card.active { box-shadow: 0 0 0 2px #f0c040; }
.mt-coach-badge {
  position: absolute; top: -8px; right: 8px;
  background: #f0c040; color: #000; font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
}
.mt-coach-card .mt-player-portrait { width: 64px; height: 80px; margin: 0 auto 6px; }
.mt-coach-card .mt-player-portrait img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.mt-coach-set-btn {
  width: 100%; margin-top: 6px; padding: 4px 8px;
  background: rgba(240,192,64,0.15); border: 1px solid #f0c040; color: #f0c040;
  border-radius: 5px; cursor: pointer; font-size: 11px; font-weight: 700;
}
.mt-coach-set-btn:disabled { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); cursor: default; }
.mt-hub-team-info { flex: 1; min-width: 0; }
.mt-hub-team-name {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-hub-team-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

.mt-hub-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.mt-hub-stat {
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
}
.mt-hub-stat-icon { font-size: 18px; }
.mt-hub-stat-val {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  margin-top: 2px;
}
.mt-hub-stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
  letter-spacing: 0.5px;
}
.mt-hub-stamina-countdown {
  display: inline-block;
  margin-left: 3px;
  font-family: monospace;
  color: #ffe680;
  font-weight: 700;
  letter-spacing: 0;
}

.mt-hub-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  overflow-x: auto;
}
.mt-hub-tab {
  flex: 1;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  padding: 14px 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
.mt-hub-tab.active {
  color: #f0c040;
  border-bottom-color: #f0c040;
}

.mt-hub-content {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 40px;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* ── 各 tab 沉浸式場景背景（依當前 tab 換場景）── */
/* 每個 tab 都用 ::before 畫場景主體、::after 加細節，融入功能 icon */

/* 🎰 GACHA：抽券店場景（紅金霓虹 + 扭蛋機 + 浮卡） */
.mt-hub-content[data-tab="gacha"] {
  background:
    /* 中央光柱 */
    radial-gradient(ellipse 70% 50% at 50% 25%, rgba(240,192,64,0.18) 0%, transparent 65%),
    /* 牆面磚紋 */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px,
      transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px,
      transparent 1px, transparent 40px),
    /* 紅金主色 */
    linear-gradient(180deg, #1a0a1f 0%, #2a1015 50%, #1a0a14 100%);
}
.mt-hub-content[data-tab="gacha"]::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    /* 扭蛋機 bottom-left */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140'><defs><radialGradient id='g' cx='50%25' cy='40%25'><stop offset='0%25' stop-color='%23ffe8a0'/><stop offset='100%25' stop-color='%23c0892a'/></radialGradient></defs><rect x='20' y='80' width='60' height='55' rx='4' fill='%23a02030' stroke='%23501018' stroke-width='2'/><rect x='28' y='95' width='44' height='14' fill='%23200a10' rx='2'/><rect x='42' y='115' width='16' height='14' fill='%23f0c040' rx='2' stroke='%23805020' stroke-width='1'/><circle cx='50' cy='40' r='30' fill='url(%23g)' stroke='%23805020' stroke-width='2'/><circle cx='42' cy='32' r='4' fill='%23e53935'/><circle cx='55' cy='38' r='4' fill='%2343a047'/><circle cx='45' cy='48' r='4' fill='%231976d2'/><circle cx='58' cy='28' r='4' fill='%23f0c040'/><circle cx='38' cy='42' r='4' fill='%239b87f5'/><rect x='44' y='75' width='12' height='6' fill='%23805020'/></svg>"),
    /* 浮卡 top-right */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'><rect x='10' y='30' width='35' height='50' rx='3' fill='%23f0c040' stroke='%23805020' stroke-width='2' transform='rotate(-12 27 55)'/><rect x='45' y='20' width='35' height='50' rx='3' fill='%239b87f5' stroke='%23403080' stroke-width='2' transform='rotate(5 62 45)'/><rect x='75' y='35' width='35' height='50' rx='3' fill='%23e53935' stroke='%23601015' stroke-width='2' transform='rotate(15 92 60)'/><text x='27' y='62' font-size='14' fill='%23805020' text-anchor='middle' transform='rotate(-12 27 55)'>★</text><text x='62' y='52' font-size='14' fill='%23fff' text-anchor='middle' transform='rotate(5 62 45)'>★</text><text x='92' y='67' font-size='14' fill='%23fff' text-anchor='middle' transform='rotate(15 92 60)'>★</text></svg>");
  background-position: 6px bottom, top right 6px;
  background-repeat: no-repeat;
  background-size: 110px auto, 130px auto;
  pointer-events: none;
  opacity: 0.42;
}
.mt-hub-content[data-tab="gacha"]::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 1.5px at 20% 30%, rgba(240,192,64,0.7) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 70% 20%, rgba(240,192,64,0.5) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 40% 55%, rgba(240,192,64,0.6) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 85% 60%, rgba(240,192,64,0.5) 50%, transparent 51%);
  background-size: 280px 280px;
  pointer-events: none;
  animation: mt-bg-twinkle 4s ease-in-out infinite alternate;
}
@keyframes mt-bg-twinkle {
  0%   { opacity: 0.4; }
  100% { opacity: 0.85; }
}

/* 📋 COACH：戰術室（黑板 + 戰術 X/O + 哨子 + 戰術筆） */
.mt-hub-content[data-tab="coach"] {
  background:
    /* 木地板紋（底部） */
    repeating-linear-gradient(90deg,
      rgba(180,120,60,0.05) 0, rgba(180,120,60,0.05) 60px,
      transparent 60px, transparent 62px),
    /* 牆 → 木地板分界 */
    linear-gradient(180deg, #0d1f1a 0%, #142822 65%, #2a1d10 65%, #1a1208 100%);
}
.mt-hub-content[data-tab="coach"]::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    /* 黑板 X/O 戰術圖（上中） */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100'><rect x='4' y='4' width='192' height='92' rx='3' fill='%231a3025' stroke='%23805030' stroke-width='4'/><line x1='100' y1='8' x2='100' y2='92' stroke='rgba(255,255,255,0.25)' stroke-width='1' stroke-dasharray='3,3'/><circle cx='30' cy='30' r='5' fill='none' stroke='%2390caf9' stroke-width='2'/><circle cx='60' cy='50' r='5' fill='none' stroke='%2390caf9' stroke-width='2'/><circle cx='40' cy='70' r='5' fill='none' stroke='%2390caf9' stroke-width='2'/><line x1='30' y1='30' x2='60' y2='50' stroke='%23f0c040' stroke-width='1.5' stroke-dasharray='2,2'/><line x1='60' y1='50' x2='40' y2='70' stroke='%23f0c040' stroke-width='1.5' stroke-dasharray='2,2'/><text x='140' y='28' font-size='14' font-weight='900' fill='%23e53935' text-anchor='middle'>X</text><text x='160' y='52' font-size='14' font-weight='900' fill='%23e53935' text-anchor='middle'>X</text><text x='175' y='75' font-size='14' font-weight='900' fill='%23e53935' text-anchor='middle'>X</text><path d='M 145 30 Q 155 40 158 50' stroke='%23f0c040' fill='none' stroke-width='1.5' stroke-dasharray='2,2' marker-end='url(%23arr)'/></svg>"),
    /* 哨子 bottom-right */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50'><ellipse cx='25' cy='28' rx='18' ry='12' fill='%23c0c0c0' stroke='%23606060' stroke-width='2'/><rect x='40' y='24' width='12' height='8' fill='%23c0c0c0' stroke='%23606060' stroke-width='2' rx='2'/><circle cx='22' cy='28' r='3' fill='%23202020'/><path d='M 8 18 Q 0 14 -3 8' stroke='%23ffffff' fill='none' stroke-width='1.5' opacity='0.6'/></svg>"),
    /* 戰術筆 top-right */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'><rect x='10' y='12' width='55' height='6' fill='%23f0c040' rx='2'/><polygon points='65,9 75,15 65,21' fill='%23805030'/><circle cx='14' cy='15' r='3' fill='%23805030'/></svg>");
  background-position: center 10px, right 8px bottom 8px, right 8px top 90px;
  background-repeat: no-repeat;
  background-size: min(70%, 280px) auto, 56px auto, 70px auto;
  pointer-events: none;
  opacity: 0.5;
}

/* ⚽ MATCH：球場（夜空 + 聚光燈 + 計分板 + 觀眾席剪影） */
.mt-hub-content[data-tab="match"] {
  background:
    /* 聚光燈光線 */
    radial-gradient(ellipse 60% 40% at 30% 0%, rgba(255,255,210,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 70% 0%, rgba(255,255,210,0.16) 0%, transparent 70%),
    /* 夜空 → 看台 → 草皮 */
    linear-gradient(180deg,
      #0a1230 0%,
      #1a2545 25%,
      #1a3050 50%,
      #1a4520 62%,
      #0d2a14 100%);
}
.mt-hub-content[data-tab="match"]::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    /* 計分板 top-center */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 50'><rect x='4' y='4' width='132' height='42' rx='4' fill='%23101820' stroke='%23f0c040' stroke-width='2'/><line x1='70' y1='4' x2='70' y2='46' stroke='%23f0c040' stroke-width='2'/><text x='35' y='32' font-size='22' font-weight='900' fill='%23ff4030' text-anchor='middle' font-family='monospace'>0</text><text x='105' y='32' font-size='22' font-weight='900' fill='%23ff4030' text-anchor='middle' font-family='monospace'>0</text></svg>"),
    /* 聚光燈柱 left */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 130'><rect x='22' y='40' width='6' height='90' fill='%23606060'/><rect x='10' y='30' width='30' height='15' rx='2' fill='%23a0a0a0' stroke='%23303030' stroke-width='1.5'/><circle cx='14' cy='37' r='2.5' fill='%23ffe080'/><circle cx='25' cy='37' r='2.5' fill='%23ffe080'/><circle cx='36' cy='37' r='2.5' fill='%23ffe080'/></svg>"),
    /* 聚光燈柱 right */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 130'><rect x='22' y='40' width='6' height='90' fill='%23606060'/><rect x='10' y='30' width='30' height='15' rx='2' fill='%23a0a0a0' stroke='%23303030' stroke-width='1.5'/><circle cx='14' cy='37' r='2.5' fill='%23ffe080'/><circle cx='25' cy='37' r='2.5' fill='%23ffe080'/><circle cx='36' cy='37' r='2.5' fill='%23ffe080'/></svg>");
  background-position: center 50px, left 4px top 8px, right 4px top 8px;
  background-repeat: no-repeat;
  background-size: 130px auto, 42px auto, 42px auto;
  pointer-events: none;
  opacity: 0.55;
}
.mt-hub-content[data-tab="match"]::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* 觀眾席剪影（45% 處） */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'><path d='M 0 30 Q 10 10 20 18 Q 30 8 40 18 Q 50 12 60 18 Q 70 6 80 18 Q 90 10 100 18 Q 110 14 120 18 Q 130 8 140 18 Q 150 12 160 18 Q 170 6 180 18 Q 190 10 200 18 Q 210 14 220 18 Q 230 8 240 18 Q 250 12 260 18 Q 270 6 280 18 Q 290 10 300 18 Q 310 14 320 18 Q 330 8 340 18 Q 350 12 360 18 Q 370 6 380 18 Q 390 10 400 18 L 400 30 Z' fill='%23000000' opacity='0.5'/></svg>") repeat-x left 46%,
    /* 草皮條紋 */
    repeating-linear-gradient(0deg,
      transparent 0, transparent 22px,
      rgba(255,255,255,0.03) 22px, rgba(255,255,255,0.03) 24px);
  background-size: 200px 30px, auto auto;
  pointer-events: none;
}

/* 💪 TRAIN：訓練館（牆 + 啞鈴 + 跑步機 + 訓練錐） */
.mt-hub-content[data-tab="train"] {
  background:
    /* 木地板 */
    repeating-linear-gradient(90deg,
      rgba(120,80,40,0.06) 0, rgba(120,80,40,0.06) 80px,
      transparent 80px, transparent 82px),
    /* 牆 → 地板 */
    linear-gradient(180deg, #1f1808 0%, #2a2010 55%, #3a2614 55%, #251a08 100%);
}
.mt-hub-content[data-tab="train"]::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    /* 啞鈴 bottom-left */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40'><rect x='5' y='8' width='14' height='24' rx='2' fill='%23404040' stroke='%23202020' stroke-width='2'/><rect x='81' y='8' width='14' height='24' rx='2' fill='%23404040' stroke='%23202020' stroke-width='2'/><rect x='19' y='17' width='62' height='6' fill='%23606060' stroke='%23202020' stroke-width='1.5'/><rect x='25' y='19' width='2' height='2' fill='%23202020'/><rect x='30' y='19' width='2' height='2' fill='%23202020'/></svg>"),
    /* 訓練錐 bottom-right */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 60'><polygon points='25,8 40,50 10,50' fill='%23ff8030' stroke='%23a04010' stroke-width='2'/><rect x='6' y='48' width='38' height='6' fill='%23a04010' rx='1'/><rect x='13' y='22' width='24' height='3' fill='%23ffffff' opacity='0.7'/><rect x='15' y='34' width='20' height='3' fill='%23ffffff' opacity='0.7'/></svg>"),
    /* 能量條紋 top */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'><text x='100' y='22' font-size='20' text-anchor='middle' fill='%23ff8040' opacity='0.6'>⚡ TRAINING ⚡</text></svg>");
  background-position: left 8px bottom 8px, right 8px bottom 8px, center top 8px;
  background-repeat: no-repeat;
  background-size: 110px auto, 50px auto, min(60%, 240px) auto;
  pointer-events: none;
  opacity: 0.55;
}

/* Settings tab 儲存 / 升級鈕（明確可見、有金邊） */
.mt-settings-action-btn {
  display: block;
  width: 100%;
  background: linear-gradient(135deg, #f0c040 0%, #e07020 100%);
  color: #1a1a2e;
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  margin-top: 8px;
  box-shadow:
    0 4px 14px rgba(240,192,64,0.45),
    inset 0 2px 3px rgba(255,255,255,0.4);
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
  transition: transform 0.12s, box-shadow 0.15s;
}
.mt-settings-action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 6px 18px rgba(240,192,64,0.65),
    inset 0 2px 3px rgba(255,255,255,0.4);
}
.mt-settings-action-btn:active:not(:disabled) { transform: translateY(0); }
.mt-settings-action-btn:disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(0.4); }
.mt-settings-save-btn {
  margin-top: 16px;
  /* 黏在最底部更明顯 */
  position: sticky;
  bottom: 12px;
  z-index: 5;
}

/* 📜 QUEST / 🛒 SHOP / 📖 DEX / 🏆 RANK / 👥 FRIENDS：純色背景（簡潔） */
.mt-hub-content[data-tab="quest"] {
  background: linear-gradient(180deg, #1a1530 0%, #2a2050 50%, #1a1530 100%);
}
.mt-hub-content[data-tab="shop"] {
  background: linear-gradient(180deg, #1a0a28 0%, #2a1840 50%, #14081f 100%);
}
.mt-hub-content[data-tab="dex"] {
  background: linear-gradient(180deg, #0a1f1a 0%, #1a2a25 50%, #08140f 100%);
}
.mt-hub-content[data-tab="rank"] {
  background: linear-gradient(180deg, #1a1505 0%, #2a2510 50%, #1a1408 100%);
}
.mt-hub-content[data-tab="friends"] {
  background: linear-gradient(180deg, #0a1428 0%, #1a2a50 50%, #08142a 100%);
}

/* 確保內容在背景之上 */
.mt-hub-content > * { position: relative; z-index: 1; }
.mt-hub-header, .mt-hub-tabs { flex-shrink: 0; }

/* ───────── 球員 roster tab ───────── */
.mt-roster-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgba(255,255,255,0.5);
}
.mt-roster-empty-icon { font-size: 64px; margin-bottom: 12px; }
.mt-roster-empty-cta {
  background: linear-gradient(135deg, #f0c040 0%, #e07020 100%);
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  color: #1a1a2e;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  margin-top: 16px;
}

.mt-roster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.mt-player-card {
  background: linear-gradient(165deg, #2a2440 0%, #181428 100%);
  border-radius: 12px;
  padding: 12px 10px 10px;
  border: 2px solid rgba(255,255,255,0.12);
  position: relative;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  text-align: center;
}
.mt-player-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.mt-player-card.rarity-SSR {
  border-color: #ffd455;
  background: linear-gradient(165deg, #5a3a0c 0%, #2a1808 100%);
  box-shadow: 0 0 16px rgba(240,192,64,0.45), 0 4px 14px rgba(0,0,0,0.5);
}
.mt-player-card.rarity-SR {
  border-color: #b5a4ff;
  background: linear-gradient(165deg, #3d2f78 0%, #1f1845 100%);
  box-shadow: 0 0 14px rgba(155,135,245,0.4), 0 4px 14px rgba(0,0,0,0.5);
}

/* roster 卡片頭像 — Phase 2.1++ LPC */
.mt-player-portrait {
  position: relative;
  width: 80px; height: 80px;
  margin: 6px auto 8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  overflow: hidden;
  background: radial-gradient(circle at center, #4a4060 0%, #1a1428 100%);
}
.mt-player-card.rarity-SR .mt-player-portrait {
  background: radial-gradient(circle at center, #5a4a90 0%, #1f1545 100%);
}
.mt-player-card.rarity-SSR .mt-player-portrait {
  background: radial-gradient(circle at center, #8a5520 0%, #2a1808 100%);
}
.mt-player-card.rarity-SR  .mt-player-portrait { border-color: #b5a4ff; box-shadow: 0 0 12px rgba(155,135,245,0.4); }
.mt-player-card.rarity-SSR .mt-player-portrait { border-color: #ffd455; box-shadow: 0 0 14px rgba(240,192,64,0.55); }
.mt-player-portrait-img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 28%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.mt-player-portrait-pos {
  position: absolute;
  bottom: -3px; right: -3px;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, #1a1a2e, #2a1855);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.mt-player-card.rarity-SR  .mt-player-portrait-pos { border-color: #b5a4ff; }
.mt-player-card.rarity-SSR .mt-player-portrait-pos { border-color: #ffd455; }
.mt-player-card .mt-player-name { text-align: center; padding-right: 0; }
.mt-player-card-rarity {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.mt-player-card.rarity-SSR .mt-player-card-rarity { background: #f0c040; color: #1a1a2e; }
.mt-player-card.rarity-SR .mt-player-card-rarity { background: #9b87f5; color: #fff; }
.mt-player-card.rarity-R .mt-player-card-rarity { background: #43a047; color: #fff; }
.mt-player-card.rarity-N .mt-player-card-rarity { background: rgba(120,128,140,0.7); color: rgba(255,255,255,0.85); }
/* N 級球員的整體配色（板凳/場上）— 灰系、不發光 */
.mt-bench-player.rarity-N { border-color: rgba(120,128,140,0.5); }
.mt-pitch-player.rarity-N .mt-pitch-player-portrait { filter: none; }

.mt-player-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 36px;
}
.mt-player-position {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.mt-player-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  font-size: 10px;
}
.mt-player-stat {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  padding: 3px 4px;
  text-align: center;
  color: rgba(255,255,255,0.8);
}
.mt-player-stat b { color: #f0c040; }
.mt-player-starting-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: #4caf50;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
}

/* ───────── 抽卡 tab UI ───────── */
.mt-gacha-tab {
  text-align: center;
  padding: 0 4px;
}
.mt-gacha-banner {
  background: linear-gradient(135deg, #2a1855 0%, #1a1a2e 100%);
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: 14px;
  padding: 24px 16px;
  margin-bottom: 20px;
}
.mt-gacha-banner-title {
  font-size: 22px;
  font-weight: 900;
  color: #f0c040;
  margin-bottom: 6px;
}
.mt-gacha-banner-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}
.mt-gacha-rates {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}
.mt-gacha-rates b { color: #fff; }
.mt-gacha-pity-bar {
  margin-top: 14px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  color: rgba(255,255,255,0.7);
}
.mt-gacha-pity-bar b { color: #f0c040; }

.mt-gacha-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt-gacha-btn-row {
  background: linear-gradient(135deg, #1a1a2e 0%, #2a1855 100%);
  border: 2px solid rgba(240,192,64,0.3);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.15s;
}
.mt-gacha-btn-row:hover {
  background: linear-gradient(135deg, #2a1855 0%, #3a2070 100%);
  border-color: rgba(240,192,64,0.6);
  transform: translateY(-1px);
}
.mt-gacha-btn-row:disabled,
.mt-gacha-btn-row[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}
.mt-gacha-btn-info { text-align: left; }
.mt-gacha-btn-title { font-size: 16px; font-weight: 900; color: #fff; }
.mt-gacha-btn-sub { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; }
.mt-gacha-btn-cost {
  background: rgba(240,192,64,0.2);
  color: #f0c040;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════
   抽卡動畫 v2（2026-05-12 polish）
   多層次：星空 / 光柱 / 光線 / 3D 翻牌 / 粒子 / 螢幕閃
   ═══════════════════════════════════════════════════ */

.mt-gacha-overlay {
  position: fixed; inset: 0;
  z-index: 11000;
  background: radial-gradient(ellipse at center, #0a0418 0%, #02010a 70%, #000 100%);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex; align-items: center; justify-content: center;
}
.mt-gacha-overlay.open { opacity: 1; }
.mt-gacha-overlay[data-peak="SR"]  { background: radial-gradient(ellipse at center, #1a0a3a 0%, #050118 70%, #000 100%); }
.mt-gacha-overlay[data-peak="SSR"] { background: radial-gradient(ellipse at center, #3a1a05 0%, #1a0a02 70%, #000 100%); }

/* ─── 星空背景 ─── */
/* ── Stage 0：卡包互動（神秘 hover + 3D 跟隨滑鼠）── */
.mt-gacha-pack {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  cursor: grab;
  z-index: 2;
  perspective: 800px;
  animation: mt-pack-float 2.6s ease-in-out infinite;
  user-select: none;
  touch-action: none;
}
.mt-gacha-pack.dragging { cursor: grabbing; }
.mt-gacha-pack.opening {
  animation: mt-pack-burst 0.6s ease-out forwards;
}
@keyframes mt-pack-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes mt-pack-burst {
  0%   { transform: scale(1) rotateY(0deg); opacity: 1; }
  60%  { transform: scale(1.4) rotateY(180deg); opacity: 1; }
  100% { transform: scale(2.2) rotateY(360deg); opacity: 0; }
}
.mt-gacha-pack-banner {
  text-align: center; margin-bottom: 24px;
}
.mt-gacha-pack-title {
  font-size: 22px; font-weight: 900; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 20px rgba(240,192,64,0.6);
}
.mt-gacha-pack-sub {
  font-size: 13px; color: rgba(255,255,255,0.8); margin-top: 4px;
}

/* 3D 容器：JS 控 transform 跟滑鼠 */
.mt-gacha-pack-3d {
  position: relative;
  width: 140px; height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.18s ease-out;
}
.mt-gacha-pack.hovering .mt-gacha-pack-3d {
  transition: transform 0.05s linear;
}

.mt-gacha-pack-stack {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
}

/* ── 精美紙袋包裝（鋸齒邊由 top/bottom 各自帶、wrap 不再 clip）── */
/* 把鋸齒從 wrap 移走 → 撕開時 flap 飛走鋸齒會跟著一起飛、不殘留在原位置 */
.mt-gacha-pack-wrap {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  z-index: 5;
  perspective: 1200px;
  perspective-origin: 50% 60%;
}
.mt-gacha-pack[data-rarity="SSR"] .mt-gacha-pack-wrap {
  filter: drop-shadow(0 0 40px rgba(240,192,64,0.75));
}
.mt-gacha-pack[data-rarity="SR"] .mt-gacha-pack-wrap {
  filter: drop-shadow(0 0 36px rgba(155,135,245,0.6));
}

/* 上半紙袋（撕條、22%）— 拆兩層做折線效果（不是硬梆梆木板）
   .mt-gacha-pack-top = 下段（hinge 在 perforation）
   .mt-gacha-pack-top-fold = 上段（hinge 在折線、會額外多折一段）*/
.mt-gacha-pack-top {
  position: relative;
  flex: 0 0 22%;
  transform-style: preserve-3d;
  background:
    radial-gradient(ellipse 60% 200% at 50% 50%,
      rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 30%, transparent 60%),
    radial-gradient(ellipse 35% 150% at 0% 50%,
      rgba(0,0,0,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 35% 150% at 100% 50%,
      rgba(0,0,0,0.4) 0%, transparent 70%),
    linear-gradient(150deg, #d44b3a 0%, #c0392b 50%, #8a2a1f 100%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}
.mt-gacha-pack-top-fold {
  position: absolute;
  /* 上段佔 top 的上 65%、bottom 在折線（top 的 35% 處）*/
  left: 0; right: 0; top: 0;
  height: 65%;
  transform-origin: 50% 100%;    /* hinge 在自己的 bottom = 折線 */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    /* 折線陰影（上段底部多一道暗線、模擬被折）*/
    linear-gradient(180deg,
      transparent 0%, transparent 80%,
      rgba(0,0,0,0.25) 95%, rgba(0,0,0,0.35) 100%),
    /* 跟 pack-top 同色系（看起來連續）*/
    radial-gradient(ellipse 60% 200% at 50% 50%,
      rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.08) 30%, transparent 60%),
    radial-gradient(ellipse 35% 150% at 0% 50%,
      rgba(0,0,0,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 35% 150% at 100% 50%,
      rgba(0,0,0,0.4) 0%, transparent 70%),
    linear-gradient(150deg, #d44b3a 0%, #c0392b 50%, #8a2a1f 100%);
  /* 鋸齒熱封邊在上段頂部 */
  clip-path: polygon(
    0% 22%, 5% 0%, 10% 22%, 15% 0%, 20% 22%, 25% 0%, 30% 22%, 35% 0%,
    40% 22%, 45% 0%, 50% 22%, 55% 0%, 60% 22%, 65% 0%, 70% 22%, 75% 0%,
    80% 22%, 85% 0%, 90% 22%, 95% 0%, 100% 22%,
    100% 100%, 0% 100%
  );
}
.mt-gacha-pack-logo {
  font-size: 24px;       /* 上半變窄 → logo 縮小 */
  color: #ffd866;
  text-shadow:
    -1px -1px 0 #fff7c0,
    1px 1px 0 #6a4500,
    1px 2px 4px rgba(0,0,0,0.7),
    0 0 8px rgba(240,192,64,0.6);
  transform: rotate(-5deg);
  z-index: 2;
}
.mt-gacha-pack-stripe {
  position: absolute;
  left: -10%; right: -10%; top: 50%;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, #ffd866 30%, #fff7c0 50%, #ffd866 70%, transparent 100%);
  transform: translateY(-50%);
  opacity: 0.4;
  z-index: 1;
}
/* 整包橫掃光：永遠在播、覆蓋整包（不只上半）*/
.mt-gacha-pack-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.18) 48%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.18) 52%,
    transparent 70%);
  pointer-events: none;
  z-index: 4;
  /* clip-path 跟 bottom 一致、確保光不會跑出包裝外面 */
  animation: mt-pack-shine 2.6s ease-in-out infinite;
}

/* 撕線（金邊穿孔 + 立體浮雕、隨拖曳進度發光）*/
.mt-gacha-pack-perforation {
  height: 8px;
  background:
    linear-gradient(180deg, #0a0a14 0%, #2a2440 50%, #0a0a14 100%);
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 6px;
  position: relative;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8),
    inset 0 -1px 0 rgba(255,255,255,0.15),
    0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
}
.mt-gacha-pack-perforation span {
  width: 4px; height: 4px;
  background: radial-gradient(circle at 30% 30%, #ffd866 0%, #c0392b 100%);
  border-radius: 50%;
  box-shadow: 0 1px 1px rgba(0,0,0,0.6), inset 1px 1px 0 rgba(255,255,255,0.4);
  position: relative; z-index: 2;
}
/* 撕線發光：依進度從手指拖的方向逐步擴展 */
.mt-gacha-pack-perforation::before {
  content: ''; position: absolute;
  top: 0; bottom: 0;
  /* dir=+1 從左往右、dir=-1 從右往左 */
  left: 0; right: calc(100% * (1 - var(--tear-progress, 0)));
  background:
    linear-gradient(90deg,
      rgba(255,80,40,0.8) 0%, #ffd866 40%, #fff7c0 70%, transparent 100%);
  box-shadow:
    0 0 8px rgba(255,200,80,0.9),
    0 0 16px rgba(240,192,64,0.6);
  pointer-events: none;
  z-index: 1;
  transition: right 0.05s linear;
}
.mt-gacha-pack-perforation[data-dir="-1"]::before {
  left: calc(100% * (1 - var(--tear-progress, 0)));
  right: 0;
  background:
    linear-gradient(270deg,
      rgba(255,80,40,0.8) 0%, #ffd866 40%, #fff7c0 70%, transparent 100%);
}

/* 下半紙袋（主體、圓筒漸層光影、底部鋸齒袋底）*/
.mt-gacha-pack-bottom {
  position: relative; flex: 1;
  background:
    radial-gradient(ellipse 120% 30% at 50% 0%,
      rgba(0,0,0,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 40%,
      rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 40%, transparent 70%),
    radial-gradient(ellipse 30% 100% at 0% 50%,
      rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 25%, transparent 60%),
    radial-gradient(ellipse 30% 100% at 100% 50%,
      rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 25%, transparent 60%),
    radial-gradient(ellipse 120% 25% at 50% 100%,
      rgba(0,0,0,0.4) 0%, transparent 60%),
    linear-gradient(180deg, #c44132 0%, #c0392b 40%, #a83020 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  color: #ffd866;
  padding: 14px 12px 22px;
  /* 底部鋸齒袋底（撕線在上方乾淨切口、不要鋸齒）*/
  clip-path: polygon(
    0% 0%, 100% 0%,
    100% 96%, 95% 100%, 90% 96%, 85% 100%, 80% 96%, 75% 100%, 70% 96%, 65% 100%,
    60% 96%, 55% 100%, 50% 96%, 45% 100%, 40% 96%, 35% 100%, 30% 96%, 25% 100%,
    20% 96%, 15% 100%, 10% 96%, 5% 100%, 0% 96%
  );
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55));
}
/* 大 ⚽ logo — 移到上 1/3、不擋到字 */
.mt-gacha-pack-bottom::before {
  content: '⚽';
  position: absolute;
  top: 22%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg);
  font-size: 42px;
  color: #ffd866;
  text-shadow:
    -1px -1px 0 #fff7c0,
    1px 1px 0 #6a4500,
    2px 2px 0 #5a3a00,
    0 3px 10px rgba(0,0,0,0.7),
    0 0 14px rgba(240,192,64,0.5);
  pointer-events: none;
}
.mt-gacha-pack-label {
  font-size: 18px; font-weight: 900;
  letter-spacing: 4px;
  text-shadow:
    -1px -1px 0 #fff7c0,
    1px 1px 0 #6a4500,
    1px 2px 0 #4a2f00,
    0 3px 8px rgba(0,0,0,0.7);
}
.mt-gacha-pack-count {
  font-size: 11px; font-weight: 700;
  opacity: 0.9;
  margin-top: 6px;
  letter-spacing: 3px;
  color: #fff7c0;
  text-shadow: 0 1px 0 #6a4500, 0 2px 4px rgba(0,0,0,0.6);
}

/* ── 即時拖曳撕開：兩段折起（下段 + 上段各自 hinge、模擬塑膠錫箔包裝折起來）── */
/* dir=+1 拖右 → 支點右下、左上角往上翹；dir=-1 反之 */
.mt-gacha-pack-top {
  /* 下段：rotateX 較小（先輕微傾）+ rotateY 朝撕方向側傾 */
  transform:
    rotateX(calc(var(--tear-progress, 0) * 18deg))
    rotateY(calc(var(--tear-progress, 0) * var(--tear-dir, 1) * -12deg))
    translateZ(calc(var(--tear-progress, 0) * 6px))
    translateY(calc(var(--tear-progress, 0) * -4px));
  transition: transform 0.18s ease-out;
  transform-origin: calc(50% + var(--tear-dir, 0) * 50%) bottom;
}
.mt-gacha-pack-top-fold {
  /* 上段：rotateX 更大（折線處再多折一段）+ 撕方向側傾 */
  transform:
    rotateX(calc(var(--tear-progress, 0) * 38deg))
    rotateY(calc(var(--tear-progress, 0) * var(--tear-dir, 1) * -10deg));
  transition: transform 0.18s ease-out;
}
/* 下半不動（只撕上方）*/
.mt-gacha-pack-bottom {
  transform: none;
}
/* 撕線：依進度從一邊「裂開」（clip-path 漸進）*/
.mt-gacha-pack-perforation {
  position: relative;
}
.mt-gacha-pack-perforation::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255,200,80,1) 0%, rgba(255,160,40,1) 50%, transparent 100%);
  opacity: var(--tear-progress, 0);
  pointer-events: none;
}
.mt-gacha-pack.dragging .mt-gacha-pack-top,
.mt-gacha-pack.dragging .mt-gacha-pack-bottom {
  transition: none;     /* 拖曳中即時跟隨 */
}

/* 撕開：下段 + 上段各自 rotateX 折起來、compound 效果像真實折紙 */
.mt-gacha-pack.opening .mt-gacha-pack-top {
  animation: mt-pack-tear-fold-lower 1.0s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
}
.mt-gacha-pack.opening .mt-gacha-pack-top-fold {
  animation: mt-pack-tear-fold-upper 1.0s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
}
.mt-gacha-pack.opening .mt-gacha-pack-perforation {
  animation: mt-pack-perforation-fade 0.4s ease-out forwards;
}

/* 下段折線（在 perforation 上方折起、輕微）*/
@keyframes mt-pack-tear-fold-lower {
  0%   {
    transform: rotateX(0) rotateY(0) translateZ(0) translateY(0);
    opacity: 1;
  }
  30%  {
    transform:
      rotateX(35deg)
      rotateY(calc(var(--tear-dir, 1) * -18deg))
      translateZ(12px)
      translateY(-6px);
    opacity: 1;
  }
  60%  {
    transform:
      rotateX(70deg)
      rotateY(calc(var(--tear-dir, 1) * -38deg))
      translateZ(22px)
      translateY(-18px);
    opacity: 0.9;
  }
  100% {
    transform:
      rotateX(105deg)
      rotateY(calc(var(--tear-dir, 1) * -60deg))
      translateZ(18px)
      translateY(-50px);
    opacity: 0;
  }
}

/* 上段折線（在折線處再折一段、compound 後讓上緣翻過去）*/
@keyframes mt-pack-tear-fold-upper {
  0%   {
    transform: rotateX(0) rotateY(0);
    filter: brightness(1);
  }
  30%  {
    transform:
      rotateX(50deg)
      rotateY(calc(var(--tear-dir, 1) * -12deg));
    filter: brightness(0.95);
  }
  60%  {
    transform:
      rotateX(95deg)
      rotateY(calc(var(--tear-dir, 1) * -22deg));
    filter: brightness(0.78);
  }
  100% {
    transform:
      rotateX(135deg)
      rotateY(calc(var(--tear-dir, 1) * -32deg));
    filter: brightness(0.6);
  }
}
@keyframes mt-pack-perforation-fade {
  to { opacity: 0; transform: scaleY(0.2); }
}

/* 兩根手指動畫 hint：左右擺動 */
.mt-gacha-pack-finger-swipe { animation: mt-finger-swipe-l 1.4s ease-in-out infinite; }
.mt-gacha-pack-finger-swipe-r { animation: mt-finger-swipe-r 1.4s ease-in-out infinite; }
@keyframes mt-finger-swipe-l {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-4px); }
}
@keyframes mt-finger-swipe-r {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* 包裝內部、撕開後可見的卡背 stack */
.mt-gacha-pack-inside {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  opacity: 0;
}
.mt-gacha-pack.opening .mt-gacha-pack-inside {
  animation: mt-pack-cards-reveal 0.8s ease-out 0.4s forwards;
}
@keyframes mt-pack-cards-reveal {
  0%   { opacity: 0; transform: scale(0.85) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mt-gacha-pack-card {
  position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(135deg, #2a1855 0%, #1a1a2e 100%);
  border: 3px solid #f0c040;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 30px rgba(240,192,64,0.3);
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.mt-gacha-pack-card-1 {
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.mt-gacha-pack-card-2 {
  transform: translate(8px, 8px) rotate(4deg);
  z-index: 2; opacity: 0.85;
}
.mt-gacha-pack-card-3 {
  transform: translate(-8px, 16px) rotate(-5deg);
  z-index: 1; opacity: 0.7;
}
/* hover 時牌散開 */
.mt-gacha-pack.hovering .mt-gacha-pack-card-2 {
  transform: translate(22px, 4px) rotate(10deg);
}
.mt-gacha-pack.hovering .mt-gacha-pack-card-3 {
  transform: translate(-22px, 18px) rotate(-12deg);
}
.mt-gacha-pack.hovering .mt-gacha-pack-card {
  box-shadow: 0 14px 40px rgba(0,0,0,0.7), 0 0 60px rgba(240,192,64,0.9);
}

.mt-gacha-pack[data-rarity="SSR"] .mt-gacha-pack-card { border-color: #f0c040; box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 50px rgba(240,192,64,0.6); }
.mt-gacha-pack[data-rarity="SR"]  .mt-gacha-pack-card { border-color: #9b87f5; box-shadow: 0 10px 30px rgba(0,0,0,0.6), 0 0 40px rgba(155,135,245,0.5); }
.mt-gacha-pack-card .mt-gacha-back-pattern {
  position: absolute; inset: 8px;
  background:
    repeating-linear-gradient(45deg, transparent 0, transparent 4px, rgba(240,192,64,0.15) 4px, rgba(240,192,64,0.15) 5px);
  border-radius: 6px;
}
.mt-gacha-pack-card .mt-gacha-back-emblem {
  font-size: 48px; opacity: 0.9; position: relative; z-index: 2;
}

/* 橫掃光動畫（行 1112-1127 已定義 .mt-gacha-pack-shine 樣式、這邊只留 keyframes）*/
@keyframes mt-pack-shine {
  0%   { transform: translateX(-110%); }
  60%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}

/* 極光環（hover 強化）*/
.mt-gacha-pack-aurora {
  position: absolute; inset: -50px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(240,192,64,0.4),
    rgba(155,135,245,0.4),
    rgba(94,234,212,0.4),
    rgba(255,107,157,0.4),
    rgba(240,192,64,0.4));
  filter: blur(30px);
  opacity: 0.3;
  z-index: -2;
  animation: mt-aurora-rot 8s linear infinite;
  pointer-events: none;
  transition: opacity 0.3s, filter 0.3s;
}
.mt-gacha-pack.hovering .mt-gacha-pack-aurora {
  opacity: 0.8;
  filter: blur(22px);
}
@keyframes mt-aurora-rot {
  to { transform: rotate(360deg); }
}

.mt-gacha-pack-glow {
  position: absolute; inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,192,64,0.4) 0%, transparent 70%);
  z-index: -1;
  animation: mt-pack-glow-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mt-gacha-pack.hovering .mt-gacha-pack-glow {
  animation-duration: 1s;
  opacity: 1.4;
}
@keyframes mt-pack-glow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* 火花粒子（JS 噴出）*/
.mt-gacha-pack-sparks {
  position: absolute; inset: 0; pointer-events: none;
  z-index: 5;
}
.mt-gacha-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  left: var(--sx);
  top: var(--sy);
  pointer-events: none;
  box-shadow: 0 0 10px currentColor;
  animation: mt-spark-fly 0.9s ease-out forwards;
}
@keyframes mt-spark-fly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

.mt-gacha-pack-cta {
  margin-top: 24px;
  display: flex; gap: 8px; align-items: center;
  background: rgba(0,0,0,0.5); padding: 10px 18px;
  border-radius: 24px; border: 1px solid rgba(240,192,64,0.5);
  color: #f0c040; font-weight: 800; font-size: 15px;
  animation: mt-pack-cta-blink 1.2s ease-in-out infinite;
  transition: transform 0.2s, color 0.2s;
}
.mt-gacha-pack.hovering .mt-gacha-pack-cta {
  transform: scale(1.08);
  color: #fff;
  border-color: #fff;
}
@keyframes mt-pack-cta-blink {
  0%, 100% { box-shadow: 0 0 8px rgba(240,192,64,0.3); }
  50%      { box-shadow: 0 0 20px rgba(240,192,64,0.7); }
}
.mt-gacha-pack-finger {
  animation: mt-finger-tap 1s ease-in-out infinite;
  display: inline-block;
}
@keyframes mt-finger-tap {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* ── Stage 2.5：點擊翻牌（固定螢幕底部、不被卡擠掉）── */
.mt-gacha-flip-prompt {
  position: fixed;
  bottom: 28px; left: 0; right: 0;
  display: flex; justify-content: center;
  z-index: 20;
  animation: mt-pack-cta-blink 1.2s ease-in-out infinite;
}
.mt-gacha-flip-prompt[hidden] { display: none !important; }
.mt-gacha-flip-btn {
  background: linear-gradient(180deg, #f0c040 0%, #e07020 100%);
  color: #000; font-weight: 900; font-size: 16px;
  padding: 12px 32px; border: 0; border-radius: 28px;
  display: flex; gap: 8px; align-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 30px rgba(240,192,64,0.6);
}
.mt-gacha-flip-btn:hover { transform: translateY(-2px); }
.mt-gacha-flip-btn:active { transform: translateY(1px); }

.mt-gacha-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 8% 12%, white, transparent 70%),
    radial-gradient(1px 1px at 25% 38%, white, transparent 70%),
    radial-gradient(2px 2px at 42% 18%, white, transparent 70%),
    radial-gradient(1px 1px at 58% 72%, white, transparent 70%),
    radial-gradient(2px 2px at 75% 28%, white, transparent 70%),
    radial-gradient(1px 1px at 88% 65%, white, transparent 70%),
    radial-gradient(1px 1px at 12% 78%, white, transparent 70%),
    radial-gradient(2px 2px at 33% 92%, white, transparent 70%),
    radial-gradient(1px 1px at 67% 5%, white, transparent 70%),
    radial-gradient(1px 1px at 50% 50%, white, transparent 70%),
    radial-gradient(1px 1px at 92% 90%, white, transparent 70%),
    radial-gradient(1px 1px at 3% 50%, white, transparent 70%);
  opacity: 0.5;
  animation: mt-stars-drift 80s linear infinite;
  pointer-events: none;
}
@keyframes mt-stars-drift {
  to { background-position: 100px 100px, -80px 50px, 90px -120px, -100px 60px, 70px -50px, -60px 80px, 100px -90px, -90px 40px, 110px -60px, -50px 90px, 80px -40px, -70px 100px; }
}

/* ─── 底部光柱（依稀有度長高）─── */
.mt-gacha-beam {
  position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 200px;
  height: 0;
  pointer-events: none;
  opacity: 0;
  animation: mt-beam-grow 1.4s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes mt-beam-grow {
  0%   { height: 0;   width: 100px; opacity: 0; }
  20%  { opacity: 1; }
  100% { height: 95vh; width: 520px; opacity: 0.85; }
}
.mt-gacha-beam[data-rarity="R"]   { background: radial-gradient(ellipse at bottom, rgba(190,205,225,0.85), rgba(190,205,225,0.15) 50%, transparent 75%); }
.mt-gacha-beam[data-rarity="SR"]  { background: radial-gradient(ellipse at bottom, rgba(180,140,255,0.95), rgba(180,140,255,0.2) 50%, transparent 75%); }
.mt-gacha-beam[data-rarity="SSR"] { background: radial-gradient(ellipse at bottom, rgba(255,210,90,1), rgba(255,170,40,0.35) 50%, transparent 75%); }

/* ─── SSR 光線爆發（多條放射光線） ─── */
.mt-gacha-rays {
  position: absolute; inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,210,90,0.0) 0deg,
    rgba(255,210,90,0.0) 15deg,
    rgba(255,210,90,0.18) 16deg,
    rgba(255,210,90,0.0) 17deg);
  animation: mt-rays-rotate 8s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes mt-rays-rotate { to { transform: rotate(360deg); } }

/* ─── 全屏白閃（SSR）─── */
.mt-gacha-flash {
  position: absolute; inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
}
.mt-gacha-flash.mt-flash-active {
  animation: mt-flash 0.6s ease-out;
}
@keyframes mt-flash {
  0%   { opacity: 0; }
  25%  { opacity: 0.85; }
  100% { opacity: 0; }
}

/* ─── 螢幕震動（SSR 出現時） ─── */
@keyframes mt-shake-anim {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5px, -3px); }
  20% { transform: translate(4px, 2px); }
  30% { transform: translate(-3px, 4px); }
  40% { transform: translate(3px, -4px); }
  50% { transform: translate(-4px, 2px); }
  60% { transform: translate(4px, 3px); }
  70% { transform: translate(-2px, -4px); }
  80% { transform: translate(3px, 2px); }
  90% { transform: translate(-2px, -2px); }
}
.mt-shake { animation: mt-shake-anim 0.5s ease-out; }
.mt-pulse-sr {
  animation: mt-pulse-sr-anim 0.4s ease-out;
}
@keyframes mt-pulse-sr-anim {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* ─── 主舞台 ─── */
.mt-gacha-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: 20px;
  text-align: center;
  z-index: 5;
}

.mt-gacha-skip {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 10;
}
.mt-gacha-skip:hover { background: rgba(255,255,255,0.15); color: #fff; }

.mt-gacha-banner {
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(-30px) scale(0.9);
  animation: mt-banner-in 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes mt-banner-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.mt-gacha-banner-title {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px rgba(240,192,64,0.6), 0 2px 8px rgba(0,0,0,0.6);
  letter-spacing: 1px;
}
.mt-gacha-banner-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  margin-top: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ─── 卡片區 ─── */
.mt-gacha-cards-wrap {
  perspective: 1200px;
  max-height: 64vh;            /* 不會把翻牌按鈕擠出去 */
  overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 8px 80px;       /* 底下留位給浮動翻牌按鈕 */
}
.mt-gacha-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 100%;
}

/* ─── 3D 卡片 ─── */
.mt-gacha-card3d {
  width: 200px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  opacity: 0;
  animation: mt-card-fly-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  flex-shrink: 0;
}
/* 卡片數多時自動縮小 */
.mt-gacha-cards[data-count="4"] .mt-gacha-card3d,
.mt-gacha-cards[data-count="5"] .mt-gacha-card3d,
.mt-gacha-cards[data-count="6"] .mt-gacha-card3d { width: 150px; height: 225px; }
.mt-gacha-cards[data-count="7"] .mt-gacha-card3d,
.mt-gacha-cards[data-count="8"] .mt-gacha-card3d,
.mt-gacha-cards[data-count="9"] .mt-gacha-card3d,
.mt-gacha-cards[data-count="10"] .mt-gacha-card3d { width: 115px; height: 172px; }
@media (max-width: 720px) {
  .mt-gacha-cards[data-count="7"] .mt-gacha-card3d,
  .mt-gacha-cards[data-count="8"] .mt-gacha-card3d,
  .mt-gacha-cards[data-count="9"] .mt-gacha-card3d,
  .mt-gacha-cards[data-count="10"] .mt-gacha-card3d { width: 95px; height: 142px; }
}
@keyframes mt-card-fly-in {
  from { opacity: 0; transform: translateY(-80px) scale(0.7) rotateZ(-15deg); }
  to   { opacity: 1; transform: translateY(0) scale(1) rotateZ(0deg); }
}

.mt-gacha-card3d-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mt-gacha-card3d.flipped .mt-gacha-card3d-inner {
  transform: rotateY(180deg);
}

.mt-gacha-card3d-back,
.mt-gacha-card3d-front {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 14px 10px;
  overflow: hidden;
}

/* 卡背 */
.mt-gacha-card3d-back {
  background: linear-gradient(135deg, #1a1a2e 0%, #2a1855 100%);
  border: 2px solid rgba(240,192,64,0.45);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 30px rgba(240,192,64,0.15);
}
.mt-gacha-back-pattern {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(240,192,64,0.05) 14px 15px),
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(240,192,64,0.05) 14px 15px);
  pointer-events: none;
}
.mt-gacha-back-emblem {
  font-size: 84px;
  filter: drop-shadow(0 0 24px rgba(240,192,64,0.7));
  animation: mt-back-pulse 1.5s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes mt-back-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 24px rgba(240,192,64,0.7)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 36px rgba(240,192,64,0.95)); }
}

/* 卡面 — 實底色 + 漸層 + 邊框依稀有度 */
.mt-gacha-card3d-front {
  transform: rotateY(180deg);
  background: linear-gradient(165deg, #2a2440 0%, #181428 100%);
  border: 2px solid rgba(255,255,255,0.18);
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
.mt-gacha-card3d.rarity-SR .mt-gacha-card3d-front {
  border-color: #b5a4ff;
  background: linear-gradient(165deg, #3d2f78 0%, #1f1845 100%);
  box-shadow: 0 0 24px rgba(155,135,245,0.55), 0 6px 20px rgba(0,0,0,0.55);
}
.mt-gacha-card3d.rarity-SSR .mt-gacha-card3d-front {
  border-color: #ffd455;
  background: linear-gradient(165deg, #5a3a0c 0%, #2a1808 100%);
  box-shadow: 0 0 40px rgba(240,192,64,0.7), 0 6px 22px rgba(0,0,0,0.55);
  animation: mt-ssr-card-glow 2s ease-in-out infinite;
}
@keyframes mt-ssr-card-glow {
  0%, 100% { box-shadow: 0 0 40px rgba(240,192,64,0.65), inset 0 0 26px rgba(240,192,64,0.2); }
  50%      { box-shadow: 0 0 60px rgba(240,192,64,0.95), inset 0 0 36px rgba(240,192,64,0.35); }
}

/* 卡面 shine 動畫條 */
.mt-gacha-front-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  pointer-events: none;
}
.mt-gacha-card3d.flipped .mt-gacha-front-shine {
  animation: mt-shine-sweep 1.2s 0.6s ease-out;
}
@keyframes mt-shine-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.mt-gacha-front-rarity {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
}
.mt-gacha-front-rarity-badge {
  font-size: 11px;
  font-weight: 900;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.mt-gacha-card3d.rarity-R   .mt-gacha-front-rarity-badge { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); }
.mt-gacha-card3d.rarity-SR  .mt-gacha-front-rarity-badge { background: #9b87f5; color: #fff; }
.mt-gacha-card3d.rarity-SSR .mt-gacha-front-rarity-badge { background: linear-gradient(135deg,#f0c040,#e07020); color: #1a1a2e; }
.mt-gacha-front-stars { font-size: 13px; color: #f0c040; text-shadow: 0 0 8px rgba(240,192,64,0.8); }
.mt-gacha-card3d.rarity-R   .mt-gacha-front-stars { color: rgba(255,255,255,0.5); text-shadow: none; }
.mt-gacha-card3d.rarity-SR  .mt-gacha-front-stars { color: #9b87f5; text-shadow: 0 0 6px rgba(155,135,245,0.6); }

.mt-gacha-front-emoji {
  font-size: 56px;
  line-height: 1;
  margin: 8px 0;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  position: relative; z-index: 2;
}

/* 球員頭像 — Phase 2.1++：LPC pixel art 64×48（CC-BY-SA），稀有度漸層 bg */
.mt-gacha-front-portrait {
  position: relative;
  width: 120px; height: 120px;
  margin: 6px auto 8px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  z-index: 2;
  background: radial-gradient(circle at center, #4a4060 0%, #1a1428 100%);
}
.mt-gacha-card3d.rarity-SR .mt-gacha-front-portrait {
  background: radial-gradient(circle at center, #5a4a90 0%, #1f1545 100%);
}
.mt-gacha-card3d.rarity-SSR .mt-gacha-front-portrait {
  background: radial-gradient(circle at center, #8a5520 0%, #2a1808 100%);
}
.mt-gacha-card3d.rarity-SR  .mt-gacha-front-portrait { border-color: #b5a4ff; box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 18px rgba(155,135,245,0.5); }
.mt-gacha-card3d.rarity-SSR .mt-gacha-front-portrait { border-color: #ffd455; box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 22px rgba(240,192,64,0.7); }
.mt-gacha-front-portrait-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  /* PIPOYA 是 32×32 pixel art，要 pixelated 才能放大保持銳利 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.mt-gacha-front-portrait-pos {
  position: absolute;
  bottom: -4px; right: -4px;
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #1a1a2e, #2a1855);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.mt-gacha-card3d.rarity-SR  .mt-gacha-front-portrait-pos { border-color: #b5a4ff; }
.mt-gacha-card3d.rarity-SSR .mt-gacha-front-portrait-pos { border-color: #ffd455; }
.mt-gacha-front-name {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
  position: relative; z-index: 2;
}
.mt-gacha-front-nick {
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 5px;
  position: relative; z-index: 2;
}
.mt-gacha-front-pos {
  font-size: 11px;
  color: #f0c040;
  margin-bottom: 8px;
  letter-spacing: 1px;
  font-weight: 700;
  position: relative; z-index: 2;
}
.mt-gacha-front-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  margin-bottom: 4px;
  position: relative; z-index: 2;
}
.mt-gacha-front-stats b { color: #f0c040; font-weight: 800; }

.mt-gacha-talent {
  margin-top: 4px;
  font-size: 10px;
  background: rgba(240,192,64,0.18);
  color: #f0c040;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  position: relative; z-index: 2;
}
.mt-gacha-dup {
  margin-top: 4px;
  font-size: 10px;
  color: #ff8c42;
  font-weight: 700;
  position: relative; z-index: 2;
}
.mt-gacha-pity {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #ff3030, #ff8030);
  color: #fff;
  font-size: 10px; font-weight: 900;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(255,48,48,0.5);
  animation: mt-pity-bounce 0.6s ease-out;
}
@keyframes mt-pity-bounce {
  0%   { transform: translateX(-50%) scale(0); }
  60%  { transform: translateX(-50%) scale(1.15); }
  100% { transform: translateX(-50%) scale(1); }
}

/* 粒子爆發 */
.mt-gacha-particles {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 3;
}
.mt-gacha-particles i {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
  animation: mt-particle 0.85s ease-out forwards;
}
@keyframes mt-particle {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--pdx), var(--pdy)) scale(0.2); opacity: 0; }
}

/* 稀有度 hint 文字（CTA 上方） */
.mt-gacha-rarity-hint {
  margin: 14px 0 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}
.mt-gacha-rarity-hint b { color: #f0c040; font-size: 18px; }

/* CTA */
.mt-gacha-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mt-gacha-actions.reveal {
  opacity: 1;
  transform: translateY(0);
}
.mt-gacha-btn {
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
}
.mt-gacha-btn:hover { transform: translateY(-1px); }
.mt-gacha-btn-primary {
  background: linear-gradient(135deg, #f0c040 0%, #e07020 100%);
  color: #1a1a2e;
  box-shadow: 0 4px 16px rgba(240,192,64,0.4);
}
.mt-gacha-btn-primary:hover { box-shadow: 0 6px 22px rgba(240,192,64,0.6); }
.mt-gacha-btn-secondary {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
}

/* ───────── 訓練 tab ───────── */
.mt-train-rp {
  background: linear-gradient(135deg, rgba(240,192,64,0.1), rgba(255,255,255,0.02));
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
}
.mt-train-rp-title { font-size: 12px; color: #f0c040; font-weight: 800; margin-bottom: 8px; }
.mt-train-rp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mt-train-rp-cell {
  background: rgba(0,0,0,0.25); border-radius: 8px; padding: 6px 4px; text-align: center;
}
.mt-train-rp-cell span { display: block; font-size: 10px; color: rgba(255,255,255,0.5); }
.mt-train-rp-cell b { display: block; font-size: 18px; color: #fff; margin-top: 2px; font-weight: 900; }
.mt-train-rp-sub { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 8px; text-align: center; }

.mt-train-row {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}
.mt-train-row.rarity-SSR { border-color: rgba(240,192,64,0.4); }
.mt-train-row.rarity-SR { border-color: rgba(155,135,245,0.3); }
.mt-train-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mt-train-row-head .mt-player-card-rarity { position: static; }
.mt-train-row-head .mt-player-name { font-size: 14px; flex: 1; padding: 0; }
.mt-train-row-head .mt-player-position { font-size: 11px; color: rgba(255,255,255,0.5); }
.mt-train-row-stats { font-size: 11px; color: rgba(255,255,255,0.7); margin-bottom: 10px; }
.mt-train-row-actions { display: flex; gap: 6px; }
.mt-train-btn {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.mt-train-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
}
.mt-train-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mt-train-btn-premium {
  background: linear-gradient(135deg, rgba(240,192,64,0.2), rgba(224,112,32,0.2));
  border-color: rgba(240,192,64,0.4);
  color: #f0c040;
}

/* ───────── 比賽 tab ───────── */
.mt-match-season {
  background: linear-gradient(135deg, rgba(76,175,80,0.1), rgba(255,255,255,0.02));
  border: 1px solid rgba(76,175,80,0.25);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.mt-match-season-tier { font-size: 18px; font-weight: 900; color: #fff; }
.mt-match-season-sub { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.mt-match-season-progress { margin: 12px 0 6px; }
.mt-match-season-bar {
  height: 8px; background: rgba(0,0,0,0.3); border-radius: 4px; overflow: hidden;
}
.mt-match-season-bar > div {
  height: 100%; background: linear-gradient(90deg, #4caf50, #8bc34a); transition: width 0.4s;
}
.mt-match-season-stats { font-size: 12px; color: rgba(255,255,255,0.7); margin-top: 6px; }
.mt-match-season-hint { font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 8px; }

.mt-match-boss-note {
  background: rgba(240,192,64,0.1); border: 1px solid rgba(240,192,64,0.3);
  border-radius: 8px; padding: 8px 12px; font-size: 11px; color: #f0c040; margin-bottom: 14px;
}
.mt-match-start {
  width: 100%;
  background: linear-gradient(135deg, #4caf50 0%, #2e8b30 100%);
  border: none; border-radius: 12px;
  padding: 16px; color: #fff;
  font-size: 16px; font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(76,175,80,0.35);
  display: flex; flex-direction: column; align-items: center;
  transition: transform 0.1s;
}
.mt-match-start:hover:not(:disabled) { transform: translateY(-1px); }
.mt-match-start:disabled { background: rgba(255,255,255,0.1); cursor: not-allowed; box-shadow: none; color: rgba(255,255,255,0.4); }
.mt-match-start-cost { font-size: 11px; font-weight: 600; opacity: 0.9; margin-top: 4px; }
.mt-match-low-stamina { text-align: center; font-size: 11px; color: #ef9a9a; margin-top: 8px; }

/* ───────── 比賽 modal ───────── */
.mt-match-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.85);
  z-index: 10800; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease; padding: 16px;
}
.mt-match-overlay.open { opacity: 1; }
.mt-match-stage {
  background: linear-gradient(180deg, #1a1a2e 0%, #0d1224 100%);
  border: 1px solid rgba(240,192,64,0.3); border-radius: 16px;
  width: 100%; max-width: 560px;
  max-height: 90vh; overflow-y: auto;
  padding: 30px 20px 20px;
  position: relative;
}

/* ─── Pre-match v2 polish ─── */
.mt-pre-match { text-align: center; }
.mt-pre-match-tier { font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 8px; letter-spacing: 0.5px; }
.mt-pre-match-boss {
  background: linear-gradient(135deg, #ff8030, #ff3030);
  color: #fff; font-size: 13px; font-weight: 900;
  padding: 8px 14px; border-radius: 8px; margin: 0 auto 14px;
  letter-spacing: 1px;
  display: inline-block;
  box-shadow: 0 4px 16px rgba(255,48,48,0.4);
  animation: mt-boss-pulse 1.2s ease-in-out infinite;
}
@keyframes mt-boss-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(255,48,48,0.4); }
  50%      { box-shadow: 0 6px 26px rgba(255,48,48,0.75); }
}

/* 雙隊衝撞 arena */
.mt-pre-match-arena {
  position: relative;
  display: flex; align-items: center;
  background: radial-gradient(ellipse at center, rgba(240,192,64,0.08), transparent 70%);
  padding: 18px 8px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 14px;
}
.mt-pre-match-clash-rays {
  position: absolute; inset: 0;
  background: repeating-conic-gradient(from 90deg at 50% 50%,
    transparent 0deg, transparent 22deg,
    rgba(240,192,64,0.06) 23deg, transparent 24deg);
  pointer-events: none;
}
.mt-pre-match-side {
  flex: 1;
  position: relative; z-index: 2;
  opacity: 0;
}
.mt-pre-match-side-home {
  animation: mt-side-slide-l 0.5s ease-out forwards;
}
.mt-pre-match-side-away {
  animation: mt-side-slide-r 0.5s ease-out forwards;
}
@keyframes mt-side-slide-l {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mt-side-slide-r {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mt-pre-match-crest {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.mt-pre-match-crest img { display: inline-block; }
.mt-pre-match-name {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
  line-height: 1.2;
}
.mt-pre-match-radar {
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
  line-height: 1.5;
}
.mt-pre-match-radar b { color: #fff; font-weight: 700; }
.mt-pre-match-avg {
  font-size: 12px;
  color: #f0c040;
  font-weight: 700;
}
.mt-pre-match-mid {
  flex: 0 0 60px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
}
.mt-pre-match-mid-vs {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #f0c040, #ff8030);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(240,192,64,0.5);
  animation: mt-vs-bounce 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
@keyframes mt-vs-bounce {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.mt-pre-match-mid-spark {
  font-size: 22px;
  animation: mt-spark-rotate 1.6s linear infinite;
}
@keyframes mt-spark-rotate {
  to { transform: rotate(360deg); }
}

/* 勝率條 */
.mt-pre-match-prob { margin: 18px 0; }
.mt-pre-match-prob-label {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.mt-pre-match-prob-bar {
  display: flex;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
}
.mt-pre-match-prob-home {
  background: linear-gradient(90deg, #4caf50, #66bb6a);
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mt-pre-match-prob-away {
  background: linear-gradient(270deg, #ef5350, #e74c3c);
  transition: width 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mt-pre-match-prob-stats {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
}
.mt-prob-h { color: rgba(76,175,80,0.95); }
.mt-prob-a { color: rgba(239,83,80,0.95); }
.mt-prob-h b, .mt-prob-a b { font-size: 14px; font-weight: 900; }

/* 開始比賽按鈕 */
.mt-pre-match-go {
  width: 100%;
  background: linear-gradient(135deg, #4caf50 0%, #2e8b30 100%);
  border: none; border-radius: 14px;
  padding: 16px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(76,175,80,0.45);
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}
.mt-pre-match-go:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(76,175,80,0.7);
}
.mt-pre-match-go-icon { font-size: 22px; }
.mt-pre-match-go-cost { font-size: 12px; opacity: 0.85; font-weight: 500; }
.mt-pre-match.is-boss .mt-pre-match-go {
  background: linear-gradient(135deg, #ff8030 0%, #c0392b 100%);
  box-shadow: 0 4px 18px rgba(255,128,48,0.5);
}
.mt-pre-match.is-boss .mt-pre-match-go:hover {
  box-shadow: 0 6px 28px rgba(255,128,48,0.75);
}

.mt-match-sim { padding: 4px; }

/* ─── Post-match v2 polish ─── */
.mt-post-match {
  text-align: center;
  padding: 10px 0 6px;
  position: relative;
}
.mt-post-match-icon {
  font-size: 64px;
  line-height: 1;
  margin-bottom: 4px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
  animation: mt-post-icon-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mt-post-icon-pop {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.mt-post-match.win .mt-post-match-result { color: #4caf50; }
.mt-post-match.draw .mt-post-match-result { color: #f0c040; }
.mt-post-match.loss .mt-post-match-result { color: #ef9a9a; }
.mt-post-match-result {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 4px;
  margin-bottom: 4px;
  text-shadow: 0 4px 16px currentColor;
}

/* Confetti for win */
.mt-post-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 6px at 10% 20%, #f0c040 50%, transparent 50%),
    radial-gradient(2px 6px at 25% 35%, #4caf50 50%, transparent 50%),
    radial-gradient(2px 6px at 45% 18%, #9b87f5 50%, transparent 50%),
    radial-gradient(2px 6px at 65% 30%, #ff8030 50%, transparent 50%),
    radial-gradient(2px 6px at 85% 22%, #4caf50 50%, transparent 50%),
    radial-gradient(2px 6px at 18% 50%, #f0c040 50%, transparent 50%),
    radial-gradient(2px 6px at 88% 50%, #ef5350 50%, transparent 50%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: mt-confetti-fall 2s ease-in;
  opacity: 0.85;
}
@keyframes mt-confetti-fall {
  from { transform: translateY(-40px); opacity: 0; }
  10%  { opacity: 1; }
  to   { transform: translateY(80px); opacity: 0; }
}

.mt-post-match-score {
  font-size: 56px;
  font-weight: 900;
  color: #fff;
  margin: 4px 0 8px;
  display: flex; justify-content: center; align-items: baseline;
  gap: 16px;
  text-shadow: 0 4px 24px rgba(240,192,64,0.4);
}
.mt-post-score-sep {
  font-size: 36px;
  opacity: 0.5;
  font-weight: 700;
}
.mt-post-match-vs {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 16px;
}
.mt-post-match-boss-bonus {
  background: linear-gradient(135deg, rgba(240,192,64,0.25), rgba(224,112,32,0.15));
  border: 1px solid rgba(240,192,64,0.5);
  color: #f0c040;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  display: inline-block;
  margin-bottom: 14px;
}
.mt-post-match-rewards {
  display: flex; justify-content: center; gap: 10px;
  margin-bottom: 14px;
}
.mt-post-reward {
  flex: 1;
  max-width: 110px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}
.mt-post-reward-icon { font-size: 24px; line-height: 1; }
.mt-post-reward-val { font-size: 18px; font-weight: 900; color: #f0c040; margin: 4px 0 2px; }
.mt-post-reward-label { font-size: 10px; color: rgba(255,255,255,0.55); letter-spacing: 0.5px; }

.mt-post-match-season {
  background: linear-gradient(135deg, rgba(240,192,64,0.15), rgba(224,112,32,0.1));
  border: 1px solid rgba(240,192,64,0.4);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #fff;
}
.mt-post-match-season-title { font-size: 17px; font-weight: 900; color: #f0c040; margin-bottom: 6px; }
.mt-post-season-tier {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
}
.mt-post-season-tier.up { color: #4caf50; }
.mt-post-season-tier.down { color: #ef9a9a; }
.mt-post-season-reward { color: #f0c040; font-size: 13px; margin-top: 2px; }

/* ───────── tab 內各區共用提示 ───────── */
.mt-tab-todo {
  text-align: center;
  padding: 80px 20px;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
}
.mt-tab-todo-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }

/* ── 新手 Tutorial overlay（階段式）── */
.mt-tutorial-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.78);
  z-index: 12000; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(6px);
  padding: 16px;
}
.mt-tutorial-overlay.open { opacity: 1; }
.mt-tutorial-card {
  background: linear-gradient(180deg, #1a1a2e 0%, #0d1224 100%);
  border: 2px solid #f0c040; border-radius: 20px;
  padding: 28px 24px 20px; text-align: center;
  max-width: 380px; width: 100%; color: #fff;
  box-shadow: 0 20px 60px rgba(240,192,64,0.35);
  transition: opacity 0.2s, transform 0.3s;
}
.mt-tutorial-step-out { opacity: 0; transform: translateX(-30px); }
.mt-tutorial-step-in  { animation: mt-tut-in 0.3s ease-out; }
@keyframes mt-tut-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mt-tutorial-progress { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.mt-tut-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.2s;
}
.mt-tut-dot.active { background: #f0c040; transform: scale(1.4); }
.mt-tut-dot.done   { background: rgba(240,192,64,0.5); }
.mt-tutorial-emoji {
  font-size: 64px; margin-bottom: 6px;
  animation: mt-tut-emoji-bounce 1.6s ease-in-out infinite;
}
@keyframes mt-tut-emoji-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.mt-tutorial-card h2 {
  margin: 0 0 10px; font-size: 22px; color: #f0c040;
}
.mt-tutorial-card p {
  margin: 0 0 18px; line-height: 1.7;
  font-size: 14px; color: rgba(255,255,255,0.9);
}
.mt-tutorial-cta {
  display: block; width: 100%; margin-bottom: 8px; padding: 14px;
  background: linear-gradient(180deg, #f0c040, #e07020);
  border: 0; border-radius: 10px;
  color: #000; font-size: 16px; font-weight: 900; cursor: pointer;
}
.mt-tutorial-cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(240,192,64,0.4); }
.mt-tutorial-cta:disabled { opacity: 0.6; cursor: default; }
.mt-tutorial-skip {
  background: none; border: 0; color: rgba(255,255,255,0.5);
  font-size: 12px; cursor: pointer; padding: 6px; width: 100%;
}
.mt-tutorial-skip:hover { color: rgba(255,255,255,0.9); }

/* 結尾完成 toast */
.mt-starter-complete {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 12100; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(4px);
}
.mt-starter-complete.open { opacity: 1; }
.mt-starter-complete-card {
  background: linear-gradient(180deg, #1a1a2e, #0d1224);
  border: 2px solid #f0c040; border-radius: 18px;
  padding: 32px 28px; text-align: center;
  max-width: 320px; color: #fff;
  box-shadow: 0 20px 60px rgba(240,192,64,0.5);
  animation: mt-tut-in 0.4s ease-out;
}
.mt-starter-complete-card h3 { margin: 8px 0; color: #f0c040; font-size: 22px; }
.mt-starter-complete-card p { font-size: 13px; opacity: 0.9; margin-bottom: 16px; }
.mt-starter-complete-ok { width: 100%; }
.mt-starter-complete-buttons {
  display: flex; flex-direction: column; gap: 6px;
}
.mt-starter-arrange, .mt-starter-train, .mt-starter-primary { width: 100%; }

/* 教學賽賽後 banner */
.mt-post-tutorial-banner {
  background: linear-gradient(180deg, rgba(240,192,64,0.18), rgba(240,192,64,0.06));
  border: 2px solid rgba(240,192,64,0.5);
  border-radius: 10px;
  padding: 12px 14px; margin: 14px 0;
  text-align: center; font-weight: 800; color: #f0c040;
  font-size: 17px;
  animation: mt-tutorial-banner-pulse 1.8s ease-in-out infinite;
}
@keyframes mt-tutorial-banner-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,192,64,0.3); }
  50%      { box-shadow: 0 0 16px 2px rgba(240,192,64,0.4); }
}
.mt-starter-complete-skip {
  background: none; border: 0; color: rgba(255,255,255,0.5);
  font-size: 12px; cursor: pointer; padding: 6px;
}
.mt-starter-complete-skip:hover { color: rgba(255,255,255,0.9); }

/* 訓練教學 progress bar */
.mt-tutorial-progress-wrap {
  height: 14px; background: rgba(255,255,255,0.1);
  border-radius: 7px; overflow: hidden;
  margin: 14px 0 4px;
}
.mt-tutorial-progress-bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #f0c040, #e07020);
  transition: width 0.1s linear;
}

/* ⏱️ 時間訓練 */
.mt-train-timed {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.1);
}
.mt-train-timed-pick {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  font-size: 12px; color: rgba(255,255,255,0.7);
}
.mt-train-timed-attr {
  background: rgba(94,234,212,0.15); border: 1px solid #5eead4;
  color: #5eead4; font-weight: 700;
  padding: 4px 10px; border-radius: 4px;
  font-size: 12px; cursor: pointer;
}
.mt-train-timed-attr:hover { background: rgba(94,234,212,0.3); }
.mt-train-timed-active {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: rgba(94,234,212,0.08);
  border: 1px solid rgba(94,234,212,0.4);
  border-radius: 6px; padding: 6px 10px;
  font-size: 12px;
}
.mt-train-timed-active.ready {
  background: rgba(76,175,80,0.18);
  border-color: #4caf50;
  animation: mt-train-ready-pulse 1.2s ease-in-out infinite;
}
@keyframes mt-train-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,80,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(76,175,80,0); }
}
.mt-train-countdown { font-family: monospace; font-weight: 800; color: #5eead4; }
.mt-train-timed-active.ready .mt-train-countdown { color: #4caf50; }
.mt-train-claim-btn {
  margin-left: auto;
  background: #4caf50; border: 0; color: #000;
  font-weight: 800; padding: 4px 10px; border-radius: 4px;
  cursor: pointer; font-size: 12px;
}
.mt-train-claim-btn:disabled {
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); cursor: default;
}

/* ── 排行榜 tab ── */
.mt-rank-tab { padding: 12px; }
.mt-rank-list { display: flex; flex-direction: column; gap: 6px; }
.mt-rank-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px;
}
.mt-rank-row.me { background: rgba(240,192,64,0.12); border: 1px solid rgba(240,192,64,0.4); }
.mt-rank-pos { font-size: 18px; font-weight: 800; min-width: 32px; text-align: center; }
.mt-rank-crest { width: 38px; height: 38px; flex-shrink: 0; }
.mt-rank-crest svg { width: 100%; height: 100%; }
.mt-rank-info { flex: 1; min-width: 0; }
.mt-rank-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-rank-meta { font-size: 11px; opacity: 0.7; }
.mt-rank-stats { text-align: right; }
.mt-rank-pt { font-size: 18px; font-weight: 800; color: #f0c040; }
.mt-rank-pt span { font-size: 10px; opacity: 0.7; }
.mt-rank-record { font-size: 11px; opacity: 0.7; }

/* 陣型 picker（搬到球員 tab 球場上方） */
.mt-formation-bar {
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
  padding: 6px 4px; margin-bottom: 8px;
}
.mt-formation-opt {
  background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 5px 10px; cursor: pointer; font-weight: 700;
  color: #fff; font-size: 13px; min-width: 56px;
}
.mt-formation-opt:hover:not(.locked):not(:disabled) { background: rgba(255,255,255,0.12); }
.mt-formation-opt.sel { border-color: #f0c040; background: rgba(240,192,64,0.18); color: #f0c040; }
.mt-formation-opt.locked, .mt-formation-opt:disabled {
  opacity: 0.45; cursor: not-allowed;
}

/* 隊名輸入 */
.mt-settings-name-input {
  width: 100%; padding: 10px 12px;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: #fff; font-size: 15px; font-weight: 700;
}
.mt-settings-name-input:focus {
  outline: none; border-color: #f0c040;
  background: rgba(240,192,64,0.06);
}

#mt-stadium-upgrade { width: 100%; }

/* ── PvP 區塊 ── */
.mt-pvp-section {
  background: linear-gradient(180deg, rgba(231,76,60,0.12) 0%, rgba(0,0,0,0) 100%);
  border: 1px solid rgba(231,76,60,0.3);
  border-radius: 10px; padding: 14px; margin-top: 16px;
}
.mt-pvp-title { font-size: 14px; font-weight: 800; color: #e74c3c; margin-bottom: 4px; }
.mt-pvp-stat { font-size: 12px; opacity: 0.85; margin-bottom: 8px; }
.mt-pvp-btn {
  width: 100%; padding: 10px;
  background: linear-gradient(180deg, #e74c3c, #c0392b);
  border: 0; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 800;
  cursor: pointer;
}
.mt-pvp-btn:disabled { background: #555; cursor: default; }

/* PvP post-match ELO 顯示 */
.mt-post-pvp {
  margin-top: 14px; padding: 12px;
  background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.3); border-radius: 10px;
  text-align: center;
}
.mt-post-pvp-title { font-size: 12px; color: #e74c3c; margin-bottom: 4px; }
.mt-post-pvp-elo { font-size: 16px; font-weight: 800; }
.mt-post-pvp-elo.up { color: #4caf50; }
.mt-post-pvp-elo.down { color: #ef9a9a; }

/* SSR 自選券 */
.mt-ssr-select-section {
  background: linear-gradient(180deg, rgba(240,192,64,0.12) 0%, rgba(0,0,0,0) 100%);
  border: 1px solid rgba(240,192,64,0.4); border-radius: 10px;
  padding: 14px; margin-top: 14px; text-align: center;
}
.mt-ssr-select-title { font-size: 16px; font-weight: 800; color: #f0c040; margin-bottom: 4px; }
.mt-ssr-select-sub { font-size: 12px; opacity: 0.85; margin-bottom: 10px; }

.mt-ssr-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 12001;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(4px);
}
.mt-ssr-overlay.open { opacity: 1; }
.mt-ssr-card-modal {
  background: #0d1224; border: 2px solid #f0c040; border-radius: 14px;
  width: 92%; max-width: 720px; max-height: 86vh; overflow-y: auto;
  padding: 18px; position: relative;
}
.mt-ssr-modal-title {
  font-size: 16px; font-weight: 800; color: #f0c040; text-align: center;
  margin-bottom: 12px;
}
.mt-ssr-close {
  position: absolute; top: 10px; right: 14px; background: none; border: 0;
  color: #fff; font-size: 24px; cursor: pointer;
}
.mt-ssr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px;
}
.mt-ssr-pickable { cursor: pointer; transition: transform 0.15s; }
.mt-ssr-pickable:hover { transform: translateY(-2px); }

/* ── 任務 tab ── */
.mt-quest-tab { padding: 12px; }
.mt-quest-group { margin-bottom: 20px; }
.mt-quest-group-title { font-size: 13px; font-weight: 800; color: #f0c040; margin-bottom: 8px; }
.mt-quest-row {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04); border-radius: 8px; padding: 10px;
  margin-bottom: 6px;
}
.mt-quest-row.ready { background: rgba(240,192,64,0.12); border: 1px solid rgba(240,192,64,0.4); }
.mt-quest-row.claimed { opacity: 0.5; }
.mt-quest-info { flex: 1; min-width: 0; }
.mt-quest-name { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.mt-quest-bar {
  height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden;
}
.mt-quest-bar > div { height: 100%; background: linear-gradient(90deg, #f0c040, #e07020); transition: width 0.3s; }
.mt-quest-progress { font-size: 11px; opacity: 0.7; margin-top: 3px; }
.mt-quest-reward { font-size: 12px; font-weight: 700; }
.mt-quest-claim {
  background: rgba(240,192,64,0.15); border: 1px solid #f0c040; color: #f0c040;
  border-radius: 6px; padding: 6px 12px; font-weight: 700; cursor: pointer; font-size: 12px;
  min-width: 70px;
}
.mt-quest-claim:disabled { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.4); cursor: default; }
.mt-quest-row.ready .mt-quest-claim {
  background: #f0c040; color: #000; animation: mt-pulse 1.4s infinite;
}
@keyframes mt-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ── 商店 tab ── */
.mt-shop-tab { padding: 12px; }
.mt-shop-grid, .mt-inv-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.mt-shop-card, .mt-inv-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 10px; text-align: center;
}
.mt-shop-icon { font-size: 32px; margin-bottom: 4px; }
.mt-shop-name { font-size: 13px; font-weight: 700; }
.mt-shop-desc { font-size: 11px; opacity: 0.7; margin: 4px 0 8px; min-height: 30px; }
.mt-shop-buy, .mt-inv-use {
  width: 100%; padding: 6px;
  background: linear-gradient(180deg, #f0c040, #e07020);
  border: 0; border-radius: 6px; color: #000; font-weight: 700; cursor: pointer;
  font-size: 12px;
}
.mt-shop-buy span { font-weight: 500; opacity: 0.7; }
.mt-shop-buy:disabled, .mt-inv-use:disabled { background: #555; color: #fff; cursor: default; }

/* ── 圖鑑 tab ── */
.mt-dex-tab { padding: 12px; }
.mt-dex-title { font-size: 16px; font-weight: 800; color: #f0c040; margin-bottom: 4px; text-align: center; }
.mt-dex-sub { font-size: 12px; opacity: 0.8; text-align: center; margin-bottom: 12px; }
.mt-dex-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px;
}
.mt-dex-card {
  background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 8px; text-align: center;
}
.mt-dex-card.owned { border-color: #f0c040; }
.mt-dex-card.locked { opacity: 0.4; }
.mt-dex-card.locked .mt-player-portrait { background: rgba(0,0,0,0.3); }
.mt-dex-card.locked .mt-player-portrait img { display: none; }
.mt-dex-card .mt-player-portrait { width: 64px; height: 80px; margin: 0 auto 4px; position: relative; }
.mt-dex-card.locked .mt-player-portrait::after {
  content: '?'; position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 32px; color: rgba(255,255,255,0.3);
}
.mt-dex-card .mt-player-portrait img { width: 100%; height: 100%; image-rendering: pixelated; }
.mt-dex-name { font-size: 12px; font-weight: 700; }
.mt-dex-pos { font-size: 10px; opacity: 0.7; }

/* ════════════════════════════════════════
   🏟️ 主頁 tab：戶外訓練場景
   天空 + 雲 + 太陽 + 樹 + 訓練館 + 操場 + 全身球員漫步
   ════════════════════════════════════════ */
.mt-home-tab { padding: 8px; }
.mt-home-scene {
  position: relative;
  width: 100%;
  height: 72vh;
  max-height: 600px;
  overflow: hidden;
  border: 2px solid #1a1a2e;
  border-radius: 8px;
  image-rendering: pixelated;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}

/* Pixel art 風天空 — 三層漸層 + 遠山 silhouette、延伸到操場頂避免縫隙 */
.mt-home-sky {
  position: absolute; inset: 0 0 62% 0;     /* 0 → 38%、剛好接到操場頂 */
  background: linear-gradient(180deg,
    #4ea3ff 0%,
    #7ac1ff 45%,
    #b8e0ff 75%,
    #d6edff 100%);
  image-rendering: pixelated;
  overflow: hidden;
}
/* 遠山：後排淺、前排深 */
.mt-home-mountains {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 38%;
  pointer-events: none;
  display: block;
}
/* 鳥（用 ˜ 字符模擬遠處剪影）*/
.mt-home-birds {
  position: absolute;
  left: 26%; top: 38%;
  font-size: 10px;
  color: rgba(40,55,80,0.55);
  letter-spacing: 14px;
  font-weight: 800;
  pointer-events: none;
  animation: mt-birds-fly 22s linear infinite;
}
@keyframes mt-birds-fly {
  from { transform: translate(0, 0); }
  to   { transform: translate(50vw, -10px); }
}
.mt-home-sun {
  position: absolute; top: 14%; right: 14%;
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle, #fff7c0 0%, #ffd866 70%, #ffaa33 100%);
  box-shadow: 0 0 26px rgba(255,200,80,0.75);
}
.mt-home-cloud {
  position: absolute;
  background: #fff;
  border: 2px solid #1a1a2e;
  height: 14px;
  z-index: 5;             /* 在太陽 (z 0) 之上 */
  animation:
    mt-cloud-drift 90s linear infinite,
    mt-cloud-bob 6s ease-in-out infinite;
}
.mt-home-cloud::before, .mt-home-cloud::after {
  content: ''; position: absolute;
  background: #fff;
  border: 2px solid #1a1a2e;
}
.mt-home-cloud::before {
  left: 20%; top: -10px;
  width: 14px; height: 12px;
  border-bottom: 0;
  box-shadow: inset 0 -2px 0 #fff;
}
.mt-home-cloud::after {
  right: 18%; top: -14px;
  width: 18px; height: 16px;
  border-bottom: 0;
  box-shadow: inset 0 -2px 0 #fff;
}
.mt-home-cloud-1 { top: 14%;  left: -20%; width: 56px; animation-duration: 110s, 7s; }
.mt-home-cloud-2 { top: 38%;  left: -10%; width: 40px; animation-duration: 85s, 5s;  animation-delay: -28s, -2s; }
.mt-home-cloud-3 { top: 58%;  left: -30%; width: 72px; animation-duration: 140s, 8s; animation-delay: -60s, -4s; }
@keyframes mt-cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(140vw); }
}
@keyframes mt-cloud-bob {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: 6px; }
}

/* 遠景：建築 + 樹（佔中間帶）*/
.mt-home-distance {
  position: absolute; left: 0; right: 0; top: 18%; height: 20%;
  z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 4%;
}

/* 球場等級裝飾 — 看台 / 聚光燈 / 旗桿 / 球迷 */
.mt-home-stand {
  position: absolute;
  bottom: 0;
  width: 30px; height: 50%;
  background: linear-gradient(180deg, #5a4030 0%, #3a2410 100%);
  border: 2px solid #1a1a2e;
  border-bottom: 0;
  z-index: 1;
}
.mt-home-stand-l { left: -32px; }
.mt-home-stand-r { right: -32px; }
.mt-home-stand::before {
  content: ''; position: absolute;
  left: 2px; right: 2px; top: 2px; height: 6px;
  background: repeating-linear-gradient(90deg,
    #f0c040 0, #f0c040 3px, #e07020 3px, #e07020 6px);
}

.mt-home-floodlight {
  position: absolute;
  top: -34px;
  width: 5px; height: 38px;
  background: #404040;
  border: 1.5px solid #1a1a2e;
  z-index: 3;
}
.mt-home-floodlight-l { left: -38px; }
.mt-home-floodlight-r { right: -38px; }
.mt-home-floodlight::after {
  content: ''; position: absolute;
  left: -6px; right: -6px; top: -10px;
  width: 17px; height: 10px;
  background: linear-gradient(180deg, #ffffaa 0%, #f0c040 100%);
  border: 1.5px solid #1a1a2e;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255,235,150,0.9), 0 0 20px rgba(255,235,150,0.45);
  animation: mt-floodlight-flicker 3s ease-in-out infinite;
}
@keyframes mt-floodlight-flicker {
  0%, 95%, 100% { opacity: 1; }
  97% { opacity: 0.6; }
}

.mt-home-flag {
  position: absolute;
  top: -28px;
  width: 2px; height: 32px;
  background: #6d4c2a;
  z-index: 3;
}
.mt-home-flag-l { left: 10%; }
.mt-home-flag-r { right: 10%; }
.mt-home-flag::after {
  content: ''; position: absolute;
  left: 2px; top: 0;
  width: 14px; height: 10px;
  background: linear-gradient(135deg, #e53935 0%, #f0c040 100%);
  border: 1px solid #1a1a2e;
  animation: mt-flag-wave 1.8s ease-in-out infinite;
}
@keyframes mt-flag-wave {
  0%, 100% { transform: skewX(0deg);  }
  50%      { transform: skewX(-12deg); }
}

/* 球場等級 → clubhouse 漸進變更 */
.mt-home-distance[data-stadium-level="2"] .mt-home-clubhouse { max-width: 240px; }
.mt-home-distance[data-stadium-level="3"] .mt-home-clubhouse,
.mt-home-distance[data-stadium-level="4"] .mt-home-clubhouse { max-width: 260px; }
.mt-home-distance[data-stadium-level="5"] .mt-home-clubhouse,
.mt-home-distance[data-stadium-level="6"] .mt-home-clubhouse { max-width: 280px; }
.mt-home-distance[data-stadium-level="7"] .mt-home-clubhouse,
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse { max-width: 300px; }
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse,
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse { max-width: 320px; }
/* 高等級換金頂 */
.mt-home-distance[data-stadium-level="7"] .mt-home-clubhouse-roof polygon,
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse-roof polygon,
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse-roof polygon,
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-roof polygon {
  fill: #f0c040 !important;
}

/* 球迷加油 NPC：站在地平線（distance 區底部）上、不再飄在空中 */
.mt-home-fans {
  position: absolute;
  left: 0; right: 0;
  top: auto;
  bottom: 0;          /* 對齊 distance 區底部 = 地平線 */
  height: 36px;
  pointer-events: none;
  z-index: 4;
}
.mt-home-fan {
  position: absolute;
  bottom: 0;          /* 腳站在地平線上 */
  top: auto;
  width: 22px;        /* 放大：14 → 22 */
  height: 34px;       /* 放大：22 → 34 */
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
  animation: mt-fan-cheer 1.4s ease-in-out infinite;
  image-rendering: pixelated;
  transform-origin: 50% 95%;   /* hinge 在腳、跳動時腳不離地 */
}
.mt-home-fan svg {
  width: 100%; height: 100%;
  display: block;
}
@keyframes mt-fan-cheer {
  0%, 100% { transform: translateY(0)    rotate(-5deg); }
  50%      { transform: translateY(-4px) rotate( 5deg); }
}

/* Pixel art 樹 — 純色塊 + 黑框 */
.mt-home-tree {
  position: relative;
  width: 50px; height: 90px;
}
.mt-home-tree::before {
  /* 樹冠 */
  content: ''; position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 50px;
  background: #4caf50;
  border: 2px solid #1a1a2e;
  border-radius: 22px 22px 18px 18px;
  box-shadow: inset 6px 6px 0 #6dcb6b, inset -4px -4px 0 #2e7d32;
}
.mt-home-tree::after {
  /* 樹幹 */
  content: ''; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 38px;
  background: #6d4c2a;
  border: 2px solid #1a1a2e;
  border-bottom: 0;
}
.mt-home-tree-r { transform: scale(1.1); }

/* Pixel art 訓練館 — 純色 + 黑框 */
.mt-home-clubhouse {
  position: relative;
  flex: 1; max-width: 220px; min-width: 140px;
  height: 100%;
  background:
    repeating-linear-gradient(0deg,
      transparent 0, transparent 14px,
      rgba(0,0,0,0.08) 14px, rgba(0,0,0,0.08) 15px),
    repeating-linear-gradient(90deg,
      transparent 0, transparent 24px,
      rgba(0,0,0,0.06) 24px, rgba(0,0,0,0.06) 25px),
    #e8dcc2;
  border: 2px solid #1a1a2e;
  border-bottom: 0;
  margin: 0 12px;
}
/* SVG triangle 屋頂：寬 110% 蓋滿牆頂 + 兩側 eaves overhang */
.mt-home-clubhouse-roof {
  position: absolute;
  left: -8%; right: -8%; top: -28px;
  width: 116%;
  height: 32px;
  display: block;
  overflow: visible;
  z-index: 2;
}
/* 屋頂磚瓦紋路（橫條紋）*/
.mt-home-clubhouse-roof-tiles {
  position: absolute;
  left: -8%; right: -8%; top: -26px;
  width: 116%; height: 28px;
  background: repeating-linear-gradient(0deg,
    transparent 0, transparent 5px,
    rgba(0,0,0,0.18) 5px, rgba(0,0,0,0.18) 6px);
  clip-path: polygon(10% 100%, 50% 5%, 90% 100%);
  pointer-events: none;
  z-index: 3;
}
/* 煙囪（坐落於右側屋頂斜面上）*/
.mt-home-clubhouse-chimney {
  position: absolute;
  left: 68%; top: -34px;
  width: 10px; height: 22px;
  background: #b03a2e;
  border: 2px solid #1a1a2e;
  z-index: 4;
}
.mt-home-clubhouse-chimney::after {
  /* 煙囪頂部凸出 */
  content: ''; position: absolute;
  left: -3px; right: -3px; top: -4px;
  height: 4px;
  background: #1a1a2e;
}
.mt-home-clubhouse-chimney::before {
  /* 煙霧 */
  content: ''; position: absolute;
  left: 50%; top: -10px;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  animation: mt-chimney-smoke 4s ease-out infinite;
}
@keyframes mt-chimney-smoke {
  0%   { opacity: 0.7; transform: translate(-50%, 0) scale(0.6); }
  100% { opacity: 0;   transform: translate(-50%, -30px) scale(1.4); }
}
.mt-home-clubhouse-sign {
  position: absolute; left: 0; right: 0; top: 18%;
  text-align: center; font-size: 11px; font-weight: 900;
  color: #1a1a2e;
  background: #fff;
  border: 2px solid #1a1a2e;
  padding: 2px 4px; margin: 0 14%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-home-clubhouse-door {
  position: absolute; left: 42%; bottom: 0;
  width: 16%; height: 40%;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,0.08) 0%, transparent 50%),
    #5d3a1a;
  border: 2px solid #1a1a2e;
  border-bottom: 0;
}
/* 門把 */
.mt-home-clubhouse-handle {
  position: absolute;
  right: 4px; top: 50%;
  width: 4px; height: 4px;
  background: #f0c040;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #1a1a2e;
}
.mt-home-clubhouse-window {
  position: absolute; width: 14%; height: 18%; top: 45%;
  background: linear-gradient(135deg, #b0ddef 0%, #87ceeb 60%, #6fa8d6 100%);
  border: 2px solid #1a1a2e;
}
/* 窗框十字 */
.mt-home-clubhouse-window-cross {
  position: absolute; inset: 0;
}
.mt-home-clubhouse-window-cross::before,
.mt-home-clubhouse-window-cross::after {
  content: ''; position: absolute;
  background: #1a1a2e;
}
.mt-home-clubhouse-window-cross::before {
  left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
}
.mt-home-clubhouse-window-cross::after {
  top: 50%; left: 0; right: 0; height: 2px; transform: translateY(-50%);
}
.mt-home-cw-1 { left: 18%; }
.mt-home-cw-2 { right: 18%; }

/* Pixel art 操場 — 多層綠色漸層 + 條紋 + 草簇紋路 */
.mt-home-ground {
  position: absolute; left: 0; right: 0; bottom: 0; top: 38%;
  background:
    linear-gradient(180deg, #5fad5c 0%, #4d9b4a 40%, #3c8a3e 100%);
  border: 2px solid #1a1a2e;
  border-bottom: 0;
  z-index: 3;
  /* 不裁切 — 讓球員的頭/上半身能超出操場頂部、覆蓋到建築前面 */
}
.mt-home-ground-lines {
  position: absolute; inset: 0;
  background:
    /* 水平亮帶（草坪修剪痕）*/
    repeating-linear-gradient(180deg,
      transparent 0, transparent 30px,
      rgba(255,255,255,0.06) 30px, rgba(255,255,255,0.06) 60px);
  pointer-events: none;
}
/* 隨機草簇 dots — 用 radial-gradient repeat 模擬 */
.mt-home-ground-tufts {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 1.5px at 12% 18%, rgba(0,0,0,0.22) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 32% 35%, rgba(255,255,255,0.18) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 58% 22%, rgba(0,0,0,0.22) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 78% 48%, rgba(255,255,255,0.18) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 88% 12%, rgba(0,0,0,0.22) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 22% 68%, rgba(0,0,0,0.22) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 48% 78%, rgba(255,255,255,0.18) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 68% 88%, rgba(0,0,0,0.22) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 82% 72%, rgba(255,255,255,0.18) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 8% 52%, rgba(0,0,0,0.22) 50%, transparent 51%);
  background-size: 200px 200px;
  background-repeat: repeat;
  pointer-events: none;
}

/* 全身球員（站在操場上、有透視縮放）*/
.mt-home-player {
  position: absolute;
  transform: translate(-50%, -100%) scale(var(--persp, 1));
  background: none; border: 0; padding: 0;
  cursor: pointer; color: #fff; text-align: center;
  z-index: 10;
  transform-origin: bottom center;
  transition: left 0.5s linear, top 0.5s linear;
}
.mt-home-player:hover { z-index: 20; filter: brightness(1.15); }
.mt-home-sprite {
  background-repeat: no-repeat;
  image-rendering: pixelated;
  margin: 0 auto;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.5));
}
.mt-home-shadow {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translate(-50%, 4px);
  width: 28px; height: 6px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.35) 0%, transparent 70%);
  pointer-events: none;
}
/* 名字依稀有度上色（取代大 badge）*/
.mt-home-name {
  font-size: 9px; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 3px rgba(0,0,0,0.6);
  white-space: nowrap;
  margin-top: 1px;
}
.mt-home-name.rarity-SSR { color: #ffd866; }
.mt-home-name.rarity-SR  { color: #c9b6ff; }
.mt-home-name.rarity-R   { color: #fff; }

.mt-home-star {
  display: inline-block;
  margin-right: 2px;
  font-size: 9px;
  vertical-align: 1px;
}
.mt-home-star.ssr { color: #ffd866; text-shadow: 0 0 3px rgba(240,192,64,0.8); }
.mt-home-star.sr  { color: #c9b6ff; text-shadow: 0 0 3px rgba(155,135,245,0.6); }

/* 位置標籤（4 種角色配色）*/
.mt-home-pos {
  display: inline-block;
  font-size: 8px; font-weight: 900;
  padding: 1px 4px;
  border-radius: 3px;
  margin: -1px 0 1px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.7);
  line-height: 1.2;
  letter-spacing: 0.5px;
}
.pos-GK  { background: #fbc02d; color: #1a1a2e; }
.pos-DEF { background: #1976d2; }
.pos-MID { background: #43a047; }
.pos-FWD { background: #e53935; }

/* 球場（roster tab）位置 badge */
.mt-pitch-player-pos {
  position: absolute; top: -4px; right: -4px;
  font-size: 8px; font-weight: 900;
  padding: 1px 4px; border-radius: 3px;
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.5);
  z-index: 3;
}

/* 板凳位置 badge */
.mt-bench-position {
  position: absolute; top: 2px; left: 2px;
  font-size: 8px; font-weight: 900;
  padding: 1px 4px; border-radius: 3px;
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  z-index: 1;
}

/* 替換對話框：starter 列表 */
.mt-swap-grid {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 60vh; overflow-y: auto;
}
.mt-swap-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 8px;
  text-align: left; cursor: pointer; color: #fff;
  transition: all 0.15s;
}
.mt-swap-row:hover { background: rgba(240,192,64,0.1); border-color: #f0c040; }
.mt-swap-row.same-role {
  border-color: rgba(76,175,80,0.6);
  background: rgba(76,175,80,0.06);
}
.mt-swap-row.rarity-SSR { border-left: 4px solid #f0c040; }
.mt-swap-row.rarity-SR  { border-left: 4px solid #9b87f5; }
.mt-swap-row img {
  width: 48px; height: 60px; image-rendering: pixelated; flex-shrink: 0;
}
.mt-swap-info { flex: 1; min-width: 0; }
.mt-swap-name { font-weight: 800; font-size: 14px; }
.mt-swap-pos  { font-size: 11px; opacity: 0.8; margin-top: 2px; }
.mt-swap-stat { font-size: 11px; opacity: 0.65; margin-top: 2px; }
.mt-swap-tag {
  background: #4caf50; color: #fff; font-weight: 800; font-size: 10px;
  padding: 2px 6px; border-radius: 3px; flex-shrink: 0;
}

/* ─── 球場視覺化主頁 (Kairosoft 風) ─── */
.mt-stadium-tab { padding: 6px; }
.mt-stadium-pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 5/7;
  max-width: 380px;
  max-height: 56vh;        /* 不會撐爆螢幕 */
  margin: 0 auto;
  background:
    repeating-linear-gradient(0deg, #2e7d32 0px, #2e7d32 20px, #357c3b 20px, #357c3b 40px),
    linear-gradient(180deg, #2e7d32, #1b5e20);
  border: 3px solid #1a4d1f;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.3);
}
.mt-pitch-line {
  position: absolute; background: rgba(255,255,255,0.4);
}
.mt-pitch-mid { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-1px); }
.mt-pitch-circle {
  position: absolute; left: 50%; top: 50%;
  width: 22%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%; transform: translate(-50%, -50%);
}
.mt-pitch-box {
  position: absolute; left: 18%; right: 18%; height: 18%;
  border: 2px solid rgba(255,255,255,0.4);
}
.mt-pitch-box-top { top: 0; border-top: none; }
.mt-pitch-box-bottom { bottom: 0; border-bottom: none; }
.mt-pitch-goalbox {
  position: absolute; left: 36%; right: 36%; height: 8%;
  border: 2px solid rgba(255,255,255,0.4);
}
.mt-pitch-goalbox-top { top: 0; border-top: none; }
.mt-pitch-goalbox-bottom { bottom: 0; border-bottom: none; }

.mt-pitch-formation-label {
  position: absolute; left: 8px; top: 8px;
  background: rgba(0,0,0,0.5); color: #f0c040;
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 4px;
}

/* 場上裝飾物：訓練錐 + 球 */
.mt-pitch-cone {
  position: absolute; transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #ff7043;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
  pointer-events: none;
  z-index: 1;
}
.mt-pitch-ball {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.6), inset -2px -2px 0 rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 1;
  animation: mt-ball-spin 4s linear infinite;
}
@keyframes mt-ball-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 漫步球員（取代舊的 mt-pitch-player）*/
.mt-wander-player {
  position: absolute;
  transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #fff; text-align: center;
  transition: left 0.6s linear, top 0.6s linear;
  z-index: 3;
}
.mt-wander-player:hover { z-index: 5; }
.mt-wander-sprite {
  background-repeat: no-repeat;
  image-rendering: pixelated;
  margin: 0 auto;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7));
  transition: transform 0.15s;
}
.mt-wander-player:hover .mt-wander-sprite {
  transform: scale(1.15);
}
.mt-wander-player.rarity-SSR .mt-wander-sprite {
  filter: drop-shadow(0 0 4px rgba(240,192,64,0.9)) drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
.mt-wander-player.rarity-SR .mt-wander-sprite {
  filter: drop-shadow(0 0 3px rgba(155,135,245,0.8)) drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}
.mt-wander-name {
  font-size: 9px; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
  white-space: nowrap;
  margin-top: -2px;
}

.mt-pitch-player {
  position: absolute; transform: translate(-50%, -50%);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-align: center; color: #fff;
  animation: mt-bob 2.4s ease-in-out infinite;
  transition: transform 0.2s;
  z-index: 2;
}

/* 替換模式：場上球員可被點擊取代 */
.mt-swap-mode .mt-pitch-player {
  cursor: cell;
}
.mt-swap-mode .mt-pitch-player::after {
  content: ''; position: absolute; inset: -8px;
  border: 2px dashed rgba(240,192,64,0.7);
  border-radius: 50%;
  animation: mt-swap-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
.mt-swap-mode .mt-pitch-player.mt-swap-target-match::after {
  border-color: rgba(76,175,80,0.95);
  border-width: 3px;
  box-shadow: 0 0 12px rgba(76,175,80,0.6);
}
@keyframes mt-swap-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.mt-swap-mode .mt-pitch-player:hover {
  transform: translate(-50%, -50%) scale(1.15);
}

/* 替換模式提示橫幅 */
.mt-swap-prompt-banner {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(240,192,64,0.18), rgba(229,57,53,0.18));
  border: 2px solid #f0c040; border-radius: 10px;
  padding: 8px 12px; margin-bottom: 8px;
  color: #fff; font-size: 12px;
  box-shadow: 0 2px 8px rgba(240,192,64,0.25);
  animation: mt-swap-banner-in 0.25s ease-out;
}
@keyframes mt-swap-banner-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mt-swap-prompt-icon {
  font-size: 18px;
  animation: mt-swap-finger 1s ease-in-out infinite;
}
@keyframes mt-swap-finger {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
.mt-swap-prompt-text { flex: 1; }
.mt-swap-prompt-text b { color: #f0c040; }
.mt-swap-cancel-btn {
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
}
.mt-swap-cancel-btn:hover { background: rgba(229,57,53,0.4); border-color: #e53935; }

/* 位置不符警告 — 紅色遊戲感感嘆號（純文字、無圓圈） */
.mt-pos-warn-bubble {
  position: absolute;
  top: -9px;
  right: -10px;
  background: transparent;
  color: #ff3030;
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
     0 0 6px rgba(229,57,53,0.85);
  z-index: 4;
  pointer-events: auto;
  animation: mt-warn-pulse 1s ease-in-out infinite;
}
@keyframes mt-warn-pulse {
  0%, 100% { transform: scale(1)    rotate(-6deg); }
  50%      { transform: scale(1.25) rotate( 6deg); }
}

/* 替換動畫：場上 + 板凳元素淡出（避免重繪閃跳） */
.mt-pitch-player.mt-swap-leaving,
.mt-bench-player.mt-swap-leaving {
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  pointer-events: none;
}
.mt-bench-player.mt-swap-leaving {
  /* bench 沒有 translate(-50%,-50%)，調整 transform 起點 */
  transform: scale(0.7);
}

/* 板凳區上方的替換 banner 槽 */
.mt-swap-banner-slot:empty { display: none; }
.mt-swap-banner-slot { margin: 4px 0 6px; }

/* 空位（先發少於 11 人時的可放置點） */
.mt-pitch-empty-slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 48px; height: 60px;
  background: rgba(0,0,0,0.25);
  border: 2.5px dashed rgba(240,192,64,0.65);
  border-radius: 50%;
  color: rgba(240,192,64,0.85);
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  z-index: 1;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  animation: mt-empty-breathe 1.8s ease-in-out infinite;
}
.mt-pitch-empty-slot:hover {
  background: rgba(240,192,64,0.18);
  border-color: #ffe680;
  transform: translate(-50%, -50%) scale(1.12);
}
.mt-pitch-empty-plus {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.mt-pitch-empty-role {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
}
@keyframes mt-empty-breathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1;   }
}
.mt-swap-mode .mt-pitch-empty-slot {
  background: rgba(240,192,64,0.22);
  border-color: #ffe680;
  animation: mt-empty-swap-glow 0.9s ease-in-out infinite;
}
@keyframes mt-empty-swap-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(240,192,64,0); }
  50%      { box-shadow: 0 0 14px rgba(240,192,64,0.85); }
}

/* 拖拽中：被拖的球員淡化、其他成可放置 */
.mt-being-dragged { opacity: 0.3; pointer-events: none; }
.mt-drag-active .mt-pitch-player:not(.mt-being-dragged),
.mt-drag-active .mt-pitch-empty-slot {
  outline: 2px dashed rgba(76,175,80,0.6);
  outline-offset: 4px;
}
.mt-drag-ghost {
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.65));
  animation: none !important;
}

/* 禁止瀏覽器原生 img 拖拽（會搶走 pointer event），整張卡都能 pointerdown */
.mt-pitch-player,
.mt-pitch-player * {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.mt-pitch-player img {
  pointer-events: none;  /* 確保事件冒泡到 button */
  -webkit-user-drag: none;
}

/* ═════════════════════════════════════════════════════════════
   🎰 GACHA TAB — AI 背景圖 + 卡包/按鈕/招牌 overlay
   ═════════════════════════════════════════════════════════════ */
.mt-gacha-shop-fullscene {
  position: relative;
  width: calc(100% + 40px);
  margin: -16px -20px -40px;
  padding: 0;
  overflow: hidden;
  /* 鎖 3:4 比例（同 bg 圖）→ % 位置才準、不會被裁切偏移 */
  aspect-ratio: 3 / 4;
  background:
    url('../img/my-team/gacha-bg.jpg') 0 0 / 100% 100% no-repeat,
    #1a0a14;
}

/* 背景圖：已改用 background-image、img 元素隱藏避免雙重渲染 */
.mt-gshop-bg-img {
  display: none;
}

/* 頂部招牌：球員卡販售 */
.mt-gshop-marquee {
  position: absolute;
  top: 4%; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4a1c28 0%, #2a0e18 100%);
  border: 3px solid #f0c040;
  border-radius: 8px;
  padding: 6px 22px;
  font-size: 22px;
  font-weight: 900;
  color: #ffe680;
  letter-spacing: 4px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9), 0 0 8px rgba(240,192,64,0.7);
  box-shadow:
    0 0 16px rgba(240,192,64,0.6),
    inset 0 0 8px rgba(240,192,64,0.3);
  white-space: nowrap;
  z-index: 5;
}
.mt-gshop-marquee-text { display: inline-block; }
.mt-gshop-marquee-stars {
  position: absolute;
  inset: -8px -8px -8px -8px;
  pointer-events: none;
}
.mt-gshop-marquee-stars .ns {
  position: absolute;
  font-size: 14px;
  color: #ffe680;
  text-shadow: 0 0 8px rgba(255,235,150,0.95);
  animation: mt-marquee-twinkle 1.5s ease-in-out infinite alternate;
}
.mt-gshop-marquee-stars .ns1 { left: -6px;  top: -6px; }
.mt-gshop-marquee-stars .ns2 { left: 50%;   top: -14px; transform: translateX(-50%); animation-delay: 0.3s; }
.mt-gshop-marquee-stars .ns3 { right: -6px; top: -6px; animation-delay: 0.6s; }
@keyframes mt-marquee-twinkle {
  0%   { opacity: 0.4; transform: scale(0.9); }
  100% { opacity: 1;   transform: scale(1.15); }
}

/* 副標：抽卡區 */
.mt-gshop-subtitle {
  position: absolute;
  top: 14%; left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #ffe680;
  background: rgba(0,0,0,0.6);
  border: 1.5px solid rgba(240,192,64,0.5);
  border-radius: 4px;
  padding: 2px 10px;
  letter-spacing: 2px;
  z-index: 5;
}

/* 4 卡包並排（玻璃櫃內 — 對齊背景櫃台前方的玻璃櫃區）*/
.mt-gshop-packs {
  position: absolute;
  top: 20%;
  left: 6%; right: 6%;
  display: flex;
  justify-content: space-between;
  gap: 1.5%;
  z-index: 4;
}
.mt-gshop-pack {
  flex: 1;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.18s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7));
  position: relative;
  animation: mt-pack-float 3s ease-in-out infinite;
}
.mt-gshop-pack:nth-child(2) { animation-delay: 0.3s; }
.mt-gshop-pack:nth-child(3) { animation-delay: 0.6s; }
.mt-gshop-pack:nth-child(4) { animation-delay: 0.9s; }
.mt-gshop-pack img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  pointer-events: none;
}
.mt-gshop-pack:hover {
  transform: translateY(-6px) scale(1.05);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.8)) brightness(1.1);
}
.mt-gshop-pack:active { transform: translateY(-2px) scale(0.98); }
.mt-gshop-pack.pack-ssr {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7)) drop-shadow(0 0 8px rgba(240,192,64,0.5));
}
@keyframes mt-pack-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* 卡包說明 caption（卡包下方）*/
.mt-gshop-packs-caption {
  position: absolute;
  top: 44%;
  left: 24%; right: 24%;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: #ffe680;
  background: rgba(0,0,0,0.7);
  border: 1.5px solid #f0c040;
  border-radius: 6px;
  padding: 5px 12px;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* 黑板告示 */
.mt-gshop-chalk-overlay {
  position: absolute;
  top: 57%;
  left: 14.5%;
  width: 11.5%;
  height: 8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  font-family: 'Caveat','Comic Sans MS',cursive;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 1px 1px rgba(0,0,0,0.95);
  z-index: 4;
  transform: rotate(-2deg);
}
.mt-gshop-chalk-overlay .mt-gshop-chalk-line1 { display: block; color: #ffe680; }
.mt-gshop-chalk-overlay .mt-gshop-chalk-line2 { display: block; }
.mt-gshop-chalk-overlay .mt-gshop-chalk-line3 { display: block; color: #ffe680; font-weight: 900; }

/* 機率資訊按鈕（疊在右下書架/相框位置） */
.mt-gshop-rates-btn {
  position: absolute;
  top: 60%;
  right: 6%;
  background: rgba(0,0,0,0.7);
  border: 1.5px solid #f0c040;
  border-radius: 6px;
  padding: 4px 10px;
  color: #ffe680;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 0 8px rgba(240,192,64,0.5);
}
.mt-gshop-rates-btn:hover { background: rgba(0,0,0,0.9); }

/* 抽卡按鈕（疊在背景的木地板區域）*/
.mt-gshop-buttons {
  position: absolute;
  bottom: 18%;
  left: 5%; right: 5%;
  display: flex;
  gap: 10px;
  align-items: stretch;     /* 兩顆按鈕同高（拉伸到一致）*/
  z-index: 5;
}
.mt-gshop-btn {
  flex: 1;
  position: relative;
  padding: 9px 10px 22px;     /* 下方留給必得 SR pill */
  border-radius: 12px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}
/* 左到右的金屬光影 sweep（持續循環）*/
.mt-gshop-btn-shine {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.mt-gshop-btn-shine::before {
  content: '';
  position: absolute;
  top: -20%; bottom: -20%;
  left: -40%;
  width: 35%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,0.15) 30%,
    rgba(255,255,255,0.7) 50%,
    rgba(255,255,255,0.15) 70%,
    transparent 100%);
  transform: skewX(-18deg);
  animation: mt-gshop-btn-shine 2.8s ease-in-out infinite;
}
.mt-gshop-btn-10 .mt-gshop-btn-shine::before {
  animation-delay: 0.4s;
}
@keyframes mt-gshop-btn-shine {
  0%        { left: -40%; opacity: 0; }
  10%       { opacity: 1; }
  55%       { left: 120%; opacity: 1; }
  60%, 100% { left: 120%; opacity: 0; }
}
/* 內容浮在 shine 之上 */
.mt-gshop-btn-label,
.mt-gshop-btn-cost,
.mt-gshop-btn-sub {
  position: relative;
  z-index: 2;
}
.mt-gshop-btn-10 { flex: 1.4; }
.mt-gshop-btn:hover:not(:disabled) { transform: translateY(-2px); }
.mt-gshop-btn:active:not(:disabled) { transform: translateY(1px); }
.mt-gshop-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.5); }
/* 1 抽：鮮亮藍金屬感（搭配 10 抽 #fbcd0c 的同等飽和度）*/
.mt-gshop-btn-1 {
  background:
    /* 頂部窄反光（不再蓋住主色）*/
    linear-gradient(180deg,
      rgba(255,255,255,0.4) 0%,
      rgba(255,255,255,0.08) 6%,
      rgba(255,255,255,0) 12%,
      rgba(0,0,0,0) 65%,
      rgba(0,0,0,0.32) 95%,
      rgba(0,0,0,0.55) 100%),
    /* 金屬主色（#1e9be8）— 飽和色佔更多版面 */
    linear-gradient(180deg,
      #2eaef2 0%,
      #1e9be8 25%,
      #1888d0 55%,
      #0e6aa5 82%,
      #053f6a 100%) !important;
  background-color: #1e9be8 !important;
  border: 2.5px solid #ffffff !important;
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.3),
    0 2px 4px rgba(0,20,45,1),
    0 -1px 1px rgba(0,25,55,0.7);
  box-shadow:
    0 0 0 2px #042746,
    0 4px 0 #08355d,
    0 8px 20px rgba(0,25,55,0.9),
    inset 0 2px 0 rgba(255,255,255,0.9),
    inset 0 4px 6px rgba(255,255,255,0.3),
    inset 0 -4px 8px rgba(0,20,45,0.6),
    inset 0 -1px 0 rgba(0,15,35,0.8) !important;
  opacity: 1 !important;
}
/* 10 抽：金屬金（主色 #fbcd0c）*/
.mt-gshop-btn-10 {
  background:
    /* 頂部窄反光（不再蓋住主色）*/
    linear-gradient(180deg,
      rgba(255,255,255,0.42) 0%,
      rgba(255,255,255,0.1) 6%,
      rgba(255,255,255,0) 12%,
      rgba(0,0,0,0) 60%,
      rgba(70,45,5,0.32) 92%,
      rgba(50,30,5,0.6) 100%),
    /* 金屬金主色（#fbcd0c）— 飽和色佔更多版面 */
    linear-gradient(180deg,
      #ffd92a 0%,
      #fbcd0c 25%,
      #d8a808 55%,
      #a07808 82%,
      #5f4604 100%) !important;
  background-color: #fbcd0c !important;
  color: #2a1505;
  border: 2.5px solid #ffffff !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 -1px 0 rgba(120,60,10,0.5);
  box-shadow:
    0 0 0 2px #382308,
    0 4px 0 #5a3a0a,
    0 8px 20px rgba(55,30,5,0.85),
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 4px 6px rgba(255,255,255,0.4),
    inset 0 -4px 8px rgba(80,45,5,0.55),
    inset 0 -1px 0 rgba(45,25,0,0.85) !important;
  opacity: 1 !important;
  animation: mt-gshop-btn10-glow 1.6s ease-in-out infinite;
}
@keyframes mt-gshop-btn10-glow {
  0%, 100% {
    box-shadow:
      0 0 0 2px #382308,
      0 4px 0 #5a3a0a,
      0 8px 20px rgba(55,30,5,0.85),
      0 0 18px rgba(251,205,12,0.5),
      inset 0 2px 0 rgba(255,255,255,0.95),
      inset 0 4px 6px rgba(255,255,255,0.4),
      inset 0 -4px 8px rgba(80,45,5,0.55),
      inset 0 -1px 0 rgba(45,25,0,0.85);
  }
  50% {
    box-shadow:
      0 0 0 2px #382308,
      0 4px 0 #5a3a0a,
      0 8px 22px rgba(55,30,5,0.9),
      0 0 36px rgba(251,205,12,0.9),
      inset 0 2px 0 rgba(255,255,255,1),
      inset 0 4px 6px rgba(255,255,255,0.55),
      inset 0 -4px 8px rgba(80,45,5,0.55),
      inset 0 -1px 0 rgba(45,25,0,0.85);
  }
}
.mt-gshop-btn-label {
  font-size: 19px;
  letter-spacing: 3px;
  text-align: center;
  line-height: 1;
}
/* Cost：長條 pill 樣式（半透明深底 + 圓角、跟原本一樣）*/
.mt-gshop-btn-cost {
  background: rgba(0,0,0,0.32);
  border-radius: 999px;
  padding: 3px 18px;
  font-size: 12px;
  text-align: center;
  line-height: 1.2;
  min-width: 60%;
}
.mt-gshop-btn-10 .mt-gshop-btn-cost {
  background: rgba(0,0,0,0.22);
  color: #2a1505;
}
.mt-gshop-btn-cost b { font-size: 14px; margin-left: 2px; }

/* 必得 SR：底部深色 pill（白字 + 黃強調、可讀性大幅提升）*/
.mt-gshop-btn-sub {
  position: absolute;
  left: 8px; right: 8px; bottom: 4px;
  font-size: 10.5px;
  text-align: center;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.3px;
  background: rgba(35,15,2,0.78);
  border-radius: 999px;
  padding: 2px 6px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.75);
  box-shadow: 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
  z-index: 3;
}
.mt-gshop-btn-sub b { color: #ffd54a; font-size: 11.5px; }
.mt-gshop-btn-promo {
  position: absolute;
  top: -11px; right: -8px;
  background: linear-gradient(135deg, #ff5252, #c0231a);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  padding: 4px 11px;
  border-radius: 14px;
  transform: rotate(10deg);
  box-shadow: 0 3px 10px rgba(0,0,0,0.7), 0 0 0 0.5px rgba(80,10,5,0.6);
  border: 2.5px solid #fff;
  z-index: 6;
  letter-spacing: 1.2px;
  text-shadow: 0 1px 2px rgba(60,0,0,0.7);
}

/* SSR 自選券（疊在背景頂部右上、有的話）*/
.mt-gshop-ssr-ticket {
  position: absolute;
  top: 12%;
  right: 4%;
  background: linear-gradient(135deg, #ffe680, #f0c040);
  border: 2.5px solid #fff;
  color: #2a1505;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 11px;
  box-shadow: 0 3px 8px rgba(240,192,64,0.55);
  animation: mt-pack-float 2.5s ease-in-out infinite;
  z-index: 6;
}

/* 機率資訊 modal */
.mt-rates-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 12020;
  opacity: 0; transition: opacity 0.2s;
  padding: 20px;
}
.mt-rates-overlay.open { opacity: 1; }
.mt-rates-modal {
  background: linear-gradient(180deg, #2a1810 0%, #1a0d08 100%);
  border: 3px solid #f0c040;
  border-radius: 14px;
  padding: 22px 20px;
  width: 100%;
  max-width: 360px;
  position: relative;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7), 0 0 24px rgba(240,192,64,0.4);
  color: #fff;
}
.mt-rates-title {
  font-size: 18px;
  font-weight: 900;
  color: #ffe680;
  text-align: center;
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
}
.mt-rates-close {
  position: absolute;
  top: 6px; right: 8px;
  background: none; border: 0;
  color: #fff; font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.mt-rates-row {
  display: flex; align-items: center;
  gap: 10px;
  margin: 8px 0;
  font-size: 14px;
}
.mt-rates-rarity {
  flex: 0 0 38px;
  font-weight: 900;
  font-size: 13px;
}
.mt-rates-n   .mt-rates-rarity { color: #b0b8c0; }
.mt-rates-r   .mt-rates-rarity { color: #6cdc8a; }
.mt-rates-sr  .mt-rates-rarity { color: #c0b0ff; }
.mt-rates-ssr .mt-rates-rarity { color: #ffe680; }
.mt-rates-bar {
  flex: 1;
  height: 14px;
  background: rgba(255,255,255,0.08);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
}
.mt-rates-bar span {
  display: block;
  height: 100%;
  border-radius: 7px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.3);
}
.mt-rates-pct {
  flex: 0 0 46px;
  text-align: right;
  font-weight: 800;
  font-family: monospace;
}
.mt-rates-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(240,192,64,0.25);
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}

/* ─── 以下舊 fullscene 元素（保留 class 但隱藏，因為 HTML 不再產生）─── */
.mt-gshop-wall, .mt-gshop-floor, .mt-gshop-bunting,
.mt-gshop-neon-sign, .mt-gshop-frames, .mt-gshop-shelf,
.mt-gshop-chalkboard, .mt-gshop-counter, .mt-gshop-clerk-anchor,
.mt-gshop-coins, .mt-gshop-sparkles { display: none !important; }
.mt-gacha-shop-fullscene-OLD {
  position: relative;
  width: 100%;
  min-height: 100%;
  margin: -16px -20px -40px;        /* 撐滿 mt-hub-content 內 padding */
  padding: 16px 20px 40px;
  overflow: hidden;
}

/* 背牆磚（佔上 62%） */
.mt-gshop-wall {
  position: absolute; left: 0; right: 0; top: 0; height: 62%;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.08) 0, rgba(0,0,0,0.08) 1px,
      transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg,
      transparent 0, transparent 39px,
      rgba(0,0,0,0.1) 39px, rgba(0,0,0,0.1) 40px),
    linear-gradient(180deg, #4a1c28 0%, #5a2030 50%, #4a1820 100%);
  z-index: 0;
}
.mt-gshop-wall::after {
  /* 磚塊偏移效果 — 每行錯位 20px */
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg,
      transparent 0, transparent 20px,
      transparent 20px, transparent 40px);
  /* 偽磚牆細節用半透明高光 */
  background:
    linear-gradient(0deg,
      transparent 0, transparent 80%,
      rgba(255,255,255,0.04) 80%, rgba(255,255,255,0.04) 81%);
  pointer-events: none;
}

/* 木地板（下 38%） */
.mt-gshop-floor {
  position: absolute; left: 0; right: 0; top: 62%; bottom: 0;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 2px,
      transparent 2px, transparent 64px),
    linear-gradient(180deg, #6d4827 0%, #4a2810 100%);
  border-top: 3px solid #2a1505;
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.45);
  z-index: 0;
}

/* 旗幟串（天花板掛飾）*/
.mt-gshop-bunting {
  position: absolute; left: 0; right: 0; top: 4px;
  height: 24px;
  display: flex; justify-content: space-around;
  pointer-events: none;
  z-index: 2;
}
.mt-gshop-bunting span {
  width: 16px; height: 18px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
  animation: mt-bunting-sway 2.5s ease-in-out infinite;
}
.mt-gshop-bunting span:nth-child(1)  { background: #e53935; animation-delay: 0s; }
.mt-gshop-bunting span:nth-child(2)  { background: #f0c040; animation-delay: -0.25s; }
.mt-gshop-bunting span:nth-child(3)  { background: #43a047; animation-delay: -0.5s; }
.mt-gshop-bunting span:nth-child(4)  { background: #1976d2; animation-delay: -0.75s; }
.mt-gshop-bunting span:nth-child(5)  { background: #9b87f5; animation-delay: -1s; }
.mt-gshop-bunting span:nth-child(6)  { background: #e53935; animation-delay: -1.25s; }
.mt-gshop-bunting span:nth-child(7)  { background: #f0c040; animation-delay: -1.5s; }
.mt-gshop-bunting span:nth-child(8)  { background: #43a047; animation-delay: -1.75s; }
.mt-gshop-bunting span:nth-child(9)  { background: #1976d2; animation-delay: -2s; }
.mt-gshop-bunting span:nth-child(10) { background: #9b87f5; animation-delay: -2.25s; }
@keyframes mt-bunting-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate( 4deg); }
}

/* 霓虹招牌（頂部正中、覆蓋旗幟之上） */
.mt-gshop-neon-sign {
  position: absolute;
  top: 30px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  background: rgba(20,8,12,0.7);
  border: 3px solid #f0c040;
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(240,192,64,0.7), inset 0 0 10px rgba(240,192,64,0.3);
  z-index: 6;
}
.mt-gshop-neon-text {
  font-family: 'Impact','Arial Black',sans-serif;
  font-size: 17px; font-weight: 900;
  letter-spacing: 2px;
  color: #ffe680;
  text-shadow:
    0 0 4px #f0c040,
    0 0 10px rgba(240,192,64,0.85),
    0 0 16px rgba(255,80,40,0.5);
  animation: mt-neon-flicker 3.5s ease-in-out infinite;
}
.mt-gshop-neon-stars {
  position: absolute; inset: -10px;
  pointer-events: none;
}
.mt-gshop-neon-stars .ns {
  position: absolute;
  font-size: 12px; color: #ffe680;
  text-shadow: 0 0 8px rgba(255,235,150,0.95);
  animation: mt-neon-twinkle 1.6s ease-in-out infinite alternate;
}
.mt-gshop-neon-stars .ns1 { left: -4px;  top: -8px; }
.mt-gshop-neon-stars .ns2 { right: -4px; top: -8px; animation-delay: 0.4s; }
.mt-gshop-neon-stars .ns3 { left: -4px;  bottom: -8px; animation-delay: 0.8s; }
.mt-gshop-neon-stars .ns4 { right: -4px; bottom: -8px; animation-delay: 1.2s; }

/* 左牆三張卡牌畫框 */
.mt-gshop-frames {
  position: absolute;
  left: 12px;
  top: 80px;
  display: flex; flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.mt-gshop-frame {
  width: 44px;
  background: linear-gradient(135deg, #8b5a2b 0%, #5a3010 100%);
  border: 2px solid #2a1505;
  padding: 3px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.55);
  text-align: center;
  transform: rotate(-2deg);
}
.mt-gshop-frame:nth-child(2) { transform: rotate(2deg); }
.mt-gshop-frame:nth-child(3) { transform: rotate(-1.5deg); }
.mt-gshop-frame-card {
  width: 100%;
  aspect-ratio: 3/4;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  border: 1px solid #1a1a2e;
}
.mt-gshop-frame.frame-ssr .mt-gshop-frame-card {
  background: linear-gradient(135deg, #ffe680, #f0c040 50%, #c08030);
  color: #2a1505;
  box-shadow: 0 0 10px rgba(240,192,64,0.85);
}
.mt-gshop-frame.frame-sr .mt-gshop-frame-card {
  background: linear-gradient(135deg, #b5a4ff, #6a4fb5);
  color: #fff;
  box-shadow: 0 0 8px rgba(155,135,245,0.6);
}
.mt-gshop-frame.frame-r .mt-gshop-frame-card {
  background: linear-gradient(135deg, #7d8590, #4a4f56);
  color: #fff;
}
.mt-gshop-frame-label {
  font-size: 9px;
  font-weight: 900;
  color: #f0c040;
  margin-top: 2px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.7);
}

/* 中央兩層貨架 + 上層 SSR/SR、下層 R */
.mt-gshop-shelf {
  position: absolute;
  left: 30%;
  right: 28%;
  z-index: 2;
}
.mt-gshop-shelf-board {
  position: absolute;
  left: -4px; right: -4px;
  bottom: -4px;
  height: 6px;
  background: linear-gradient(180deg, #8b5a2b 0%, #5a3010 100%);
  border: 1.5px solid #2a1505;
  box-shadow: 0 3px 5px rgba(0,0,0,0.6);
}
.mt-gshop-shelf.shelf-top { top: 90px; }
.mt-gshop-shelf.shelf-mid { top: 158px; }
.mt-gshop-shelf-items {
  display: flex; gap: 3px;
  align-items: flex-end;
  justify-content: center;
  padding: 0 2px;
}
.mt-gshop-box {
  width: 30px; height: 32px;
  position: relative;
  border-radius: 3px 3px 4px 4px;
  display: flex;
  align-items: center; justify-content: center;
  box-shadow: inset 0 -3px 4px rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.3);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.4));
}
.mt-gshop-box::before {
  content: ''; position: absolute;
  top: -3px; left: 3px; right: 3px;
  height: 4px;
  background: rgba(0,0,0,0.5);
  border-radius: 3px 3px 0 0;
}
.mt-gshop-box.blindbox-r {
  background: linear-gradient(135deg, #7d8590 0%, #4a4f56 100%);
  border: 1.5px solid #2a2d33;
}
.mt-gshop-box.blindbox-sr {
  background: linear-gradient(135deg, #b5a4ff 0%, #6a4fb5 100%);
  border: 1.5px solid #2a1850;
  box-shadow: inset 0 -3px 4px rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.35), 0 0 6px rgba(155,135,245,0.55);
}
.mt-gshop-box.blindbox-ssr {
  background: linear-gradient(135deg, #ffe680 0%, #f0c040 50%, #c08030 100%);
  border: 1.5px solid #5a3010;
  box-shadow: inset 0 -3px 4px rgba(0,0,0,0.2), inset 0 2px 3px rgba(255,255,255,0.5), 0 0 10px rgba(240,192,64,0.95);
  animation: mt-blindbox-ssr 2.5s ease-in-out infinite;
}
.mt-gshop-box-rarity {
  font-size: 9px; font-weight: 900; letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}
.mt-gshop-box.blindbox-ssr .mt-gshop-box-rarity {
  color: #2a1505;
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

/* 黑板價目表（掛右上） */
.mt-gshop-chalkboard {
  position: absolute;
  right: 8px;
  top: 80px;
  width: 110px;
  background: linear-gradient(180deg, #1d3a2c 0%, #0d1f1a 100%);
  border: 4px solid #7a5230;
  border-radius: 4px;
  padding: 6px 8px;
  color: #fff;
  font-family: 'Caveat','Comic Sans MS',cursive;
  z-index: 3;
  box-shadow: 0 4px 8px rgba(0,0,0,0.55);
  transform: rotate(-2deg);
}
.mt-gshop-chalk-title {
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  color: #ffe680;
  margin-bottom: 4px;
}
.mt-gshop-chalk-line {
  font-size: 11px;
  color: #fff;
  margin: 1px 0;
  letter-spacing: 0.5px;
}
.mt-gshop-chalk-divider {
  height: 1px;
  background: rgba(255,255,255,0.35);
  margin: 4px 0;
}
.mt-gshop-chalk-rate {
  font-size: 10px;
  color: #f0c040;
}

/* 收銀台木櫃（前景中央偏右下） */
.mt-gshop-counter {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 6px;
  width: 200px;
  height: 70px;
  z-index: 4;
}
.mt-gshop-counter-face {
  position: absolute; inset: 14px 0 0 0;
  background: linear-gradient(180deg, #8b5a2b 0%, #5a3010 100%);
  border: 2.5px solid #2a1505;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.55), inset 0 -4px 6px rgba(0,0,0,0.3);
}
.mt-gshop-counter-face::before {
  /* 木板細節 */
  content: ''; position: absolute; inset: 4px;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.18) 0, rgba(0,0,0,0.18) 2px,
      transparent 2px, transparent 38px);
}
.mt-gshop-counter-top {
  position: absolute;
  left: -8px; right: -8px;
  top: 0;
  height: 14px;
  background: linear-gradient(180deg, #a06a30 0%, #6d4827 100%);
  border: 2.5px solid #2a1505;
  border-radius: 6px;
  box-shadow: 0 3px 4px rgba(0,0,0,0.55);
}

/* 收銀電腦螢幕（櫃台上） */
.mt-gshop-counter-screen {
  position: absolute;
  right: 14px;
  top: -38px;
  width: 76px;
  height: 50px;
  background: linear-gradient(180deg, #102020 0%, #050a0a 100%);
  border: 2.5px solid #1a1a1a;
  border-radius: 4px;
  padding: 4px 6px;
  font-family: monospace;
  color: #4cf04c;
  font-size: 10px;
  text-shadow: 0 0 4px rgba(76,240,76,0.65);
  box-shadow: 0 3px 6px rgba(0,0,0,0.6), inset 0 0 6px rgba(76,240,76,0.2);
}
.mt-gshop-counter-screen::after {
  /* 螢幕底座 */
  content: '';
  position: absolute;
  left: 50%; bottom: -8px;
  transform: translateX(-50%);
  width: 30px; height: 6px;
  background: #1a1a1a;
  border-radius: 2px;
}
.mt-gshop-screen-line { line-height: 1.4; }
.mt-gshop-screen-line b { color: #ffe680; }
.mt-gshop-pity { color: #ff8080 !important; font-size: 9px; }

/* 帳本 */
.mt-gshop-counter-ledger {
  position: absolute;
  left: 16px;
  top: -10px;
  width: 30px; height: 22px;
  background: linear-gradient(135deg, #f0e0a0 0%, #c0a060 100%);
  border: 1.5px solid #5a3010;
  transform: rotate(-8deg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.mt-gshop-counter-ledger::before {
  /* 帳本封面條 */
  content: ''; position: absolute;
  left: 0; right: 0; top: 30%;
  height: 2px;
  background: #5a3010;
}
.mt-gshop-counter-ledger::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 55%;
  height: 2px;
  background: #5a3010;
}

/* 收銀員（站在櫃台後） */
.mt-gshop-clerk-anchor {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 70px;     /* 在櫃台後方 */
  width: 50px;
  height: 80px;
  z-index: 3;
  animation: mt-clerk-bob 1.8s ease-in-out infinite;
}
.mt-gshop-clerk {
  width: 100%; height: 100%;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.55));
  image-rendering: pixelated;
}

/* 金幣（地板上散落） */
.mt-gshop-coins {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30px;
  pointer-events: none;
  z-index: 3;
}
.mt-gshop-coin {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe680 0%, #f0c040 60%, #805020 100%);
  border: 1px solid #5a3010;
  box-shadow: 0 0 4px rgba(240,192,64,0.85);
}

/* 場景粒子閃爍 */
.mt-gshop-sparkles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5;
}
.mt-gshop-sparkles span {
  position: absolute;
  width: 2px; height: 2px;
  background: #ffe680;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,235,150,0.95);
  animation: mt-sparkle-fade 2.4s ease-in-out infinite;
}
.mt-gshop-sparkles span:nth-child(1) { left: 18%; top: 12%; animation-delay: 0s;   }
.mt-gshop-sparkles span:nth-child(2) { left: 35%; top: 9%;  animation-delay: 0.3s; }
.mt-gshop-sparkles span:nth-child(3) { left: 60%; top: 14%; animation-delay: 0.6s; }
.mt-gshop-sparkles span:nth-child(4) { left: 78%; top: 10%; animation-delay: 0.9s; }
.mt-gshop-sparkles span:nth-child(5) { left: 22%; top: 38%; animation-delay: 1.2s; }
.mt-gshop-sparkles span:nth-child(6) { left: 68%; top: 42%; animation-delay: 1.5s; }
.mt-gshop-sparkles span:nth-child(7) { left: 88%; top: 36%; animation-delay: 1.8s; }
.mt-gshop-sparkles span:nth-child(8) { left: 48%; top: 8%;  animation-delay: 2.1s; }

/* ─── 舊版（保留，但不再使用）───────────────────────────────────
   ═════════════════════════════════════════════════════════════
   🎰 GACHA TAB — 沉浸式商店場景（無方塊感）
   ═════════════════════════════════════════════════════════════ */
.mt-gacha-shop {
  position: relative;
  padding: 0 4px 16px;
  min-height: 100%;
}

/* 商店整體場景容器（沒有 box、純背景畫） */
.mt-gacha-shop-scene {
  position: relative;
  width: 100%;
  height: 240px;
  margin-bottom: 14px;
  background:
    /* 牆磚紋 */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.04) 0, rgba(0,0,0,0.04) 1px,
      transparent 1px, transparent 28px),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.06) 0, rgba(0,0,0,0.06) 1px,
      transparent 1px, transparent 26px),
    /* 牆面 → 地板漸層 */
    linear-gradient(180deg,
      #2a0d18 0%,
      #3a1420 35%,
      #4a1828 60%,
      #2a1015 60%,
      #1a0a10 100%);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.55),
    inset 0 -16px 24px rgba(0,0,0,0.45),
    inset 0 6px 12px rgba(0,0,0,0.35);
}

/* 霓虹店招（頂部置中）*/
.mt-gacha-neon-board {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  background: rgba(20,8,12,0.6);
  border: 2px solid #f0c040;
  border-radius: 8px;
  box-shadow: 0 0 14px rgba(240,192,64,0.55), inset 0 0 8px rgba(240,192,64,0.25);
  z-index: 5;
}
.mt-gacha-neon-stars {
  position: absolute;
  inset: -10px;
  pointer-events: none;
}
.mt-gacha-neon-stars .ns {
  position: absolute;
  font-size: 12px;
  color: #ffe680;
  text-shadow: 0 0 8px rgba(255,235,150,0.95);
  animation: mt-neon-twinkle 1.6s ease-in-out infinite alternate;
}
.mt-gacha-neon-stars .ns1 { left:  -4px; top: -8px; }
.mt-gacha-neon-stars .ns2 { right: -4px; top: -8px; animation-delay: 0.4s; }
.mt-gacha-neon-stars .ns3 { left:  -4px; bottom: -8px; animation-delay: 0.8s; }
.mt-gacha-neon-stars .ns4 { right: -4px; bottom: -8px; animation-delay: 1.2s; }
@keyframes mt-neon-twinkle {
  0%   { opacity: 0.35; transform: scale(0.85); }
  100% { opacity: 1;    transform: scale(1.15); }
}

/* 左側卡牌牆（3 張歪斜貼著） */
.mt-gacha-cardwall {
  position: absolute;
  left: 8px;
  top: 56px;
  width: 38%;
  height: 110px;
}
.mt-gacha-walled-card {
  position: absolute;
  width: 36px; height: 50px;
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.55));
  border: 2px solid #fff;
}
.mt-gacha-walled-card.cw-1 {
  left: 4px;  top: 0;
  background: linear-gradient(135deg, #f0c040, #c08030);
  color: #2a1505;
  transform: rotate(-12deg);
}
.mt-gacha-walled-card.cw-2 {
  left: 50px; top: 18px;
  background: linear-gradient(135deg, #b5a4ff, #6a4fb5);
  color: #fff;
  transform: rotate(6deg);
}
.mt-gacha-walled-card.cw-3 {
  left: 4px;  top: 56px;
  background: linear-gradient(135deg, #ff8080, #c0303a);
  color: #fff;
  transform: rotate(-4deg);
}

/* 右側盲盒金字塔堆（地板上）*/
.mt-gacha-pyramid {
  position: absolute;
  right: 10px;
  bottom: 24px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 2px;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.5));
}
.mt-gacha-pyramid-row {
  display: flex; gap: 3px;
}
.mt-gacha-blindbox {
  width: 38px; height: 26px;
  position: relative;
  border-radius: 3px 3px 5px 5px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-weight: 900;
  font-size: 8px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  box-shadow: inset 0 -3px 5px rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.25);
}
.mt-gacha-blindbox::before {
  content: ''; position: absolute;
  top: -3px; left: 4px; right: 4px;
  height: 5px;
  background: rgba(0,0,0,0.5);
  border-radius: 3px 3px 0 0;
}
.mt-gacha-blindbox.blindbox-r {
  background: linear-gradient(135deg, #7d8590 0%, #4a4f56 100%);
  border: 1.5px solid #2a2d33;
}
.mt-gacha-blindbox.blindbox-sr {
  background: linear-gradient(135deg, #b5a4ff 0%, #6a4fb5 100%);
  border: 1.5px solid #2a1850;
  box-shadow: inset 0 -3px 5px rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.35), 0 0 8px rgba(155,135,245,0.55);
}
.mt-gacha-blindbox.blindbox-ssr {
  background: linear-gradient(135deg, #ffe680 0%, #f0c040 50%, #c08030 100%);
  border: 1.5px solid #5a3010;
  color: #2a1505;
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
  box-shadow: inset 0 -3px 5px rgba(0,0,0,0.2), inset 0 2px 3px rgba(255,255,255,0.5), 0 0 14px rgba(240,192,64,0.95);
  animation: mt-blindbox-ssr 2.5s ease-in-out infinite;
}
@keyframes mt-blindbox-ssr {
  0%, 100% { box-shadow: inset 0 -3px 5px rgba(0,0,0,0.2), inset 0 2px 3px rgba(255,255,255,0.5), 0 0 14px rgba(240,192,64,0.95); }
  50%      { box-shadow: inset 0 -3px 5px rgba(0,0,0,0.2), inset 0 2px 3px rgba(255,255,255,0.5), 0 0 22px rgba(255,210,80,1);    }
}
.mt-gacha-blindbox-star { font-size: 10px; line-height: 1; }
.mt-gacha-blindbox-rarity { font-size: 8px; letter-spacing: 1px; }

/* 收銀員 + 櫃台 */
.mt-gacha-clerk {
  position: absolute;
  left: 4%;
  bottom: 4px;
  z-index: 4;
}
.mt-gacha-clerk-body {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
  animation: mt-clerk-bob 1.8s ease-in-out infinite;
}
@keyframes mt-clerk-bob {
  0%, 100% { transform: translateY(0);    }
  50%      { transform: translateY(-3px); }
}
.mt-gacha-clerk-counter {
  position: absolute;
  left: -8px; right: -100px;
  bottom: -2px;
  height: 18px;
  background: linear-gradient(180deg, #8b5a2b 0%, #5a3010 100%);
  border-top: 2px solid #2a1505;
  z-index: -1;
}
.mt-gacha-clerk-resources {
  position: absolute;
  left: 50px; bottom: 2px;
  display: flex;
  gap: 6px;
  font-family: monospace;
  font-size: 11px;
  color: #ffe680;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.mt-gacha-clerk-resources b { color: #fff; font-size: 13px; }
.mt-gacha-counter-pity {
  font-size: 10px;
  color: rgba(255,180,180,0.85);
}

/* 粒子閃爍 */
.mt-gacha-sparkles {
  position: absolute; inset: 0;
  pointer-events: none;
}
.mt-gacha-sparkles span {
  position: absolute;
  width: 2px; height: 2px;
  background: #ffe680;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255,235,150,0.95);
  animation: mt-sparkle-fade 2.4s ease-in-out infinite;
}
.mt-gacha-sparkles span:nth-child(1) { left: 18%; top: 28%; animation-delay: 0s;   }
.mt-gacha-sparkles span:nth-child(2) { left: 35%; top: 18%; animation-delay: 0.4s; }
.mt-gacha-sparkles span:nth-child(3) { left: 60%; top: 32%; animation-delay: 0.8s; }
.mt-gacha-sparkles span:nth-child(4) { left: 78%; top: 22%; animation-delay: 1.2s; }
.mt-gacha-sparkles span:nth-child(5) { left: 42%; top: 48%; animation-delay: 1.6s; }
.mt-gacha-sparkles span:nth-child(6) { left: 88%; top: 42%; animation-delay: 2.0s; }
@keyframes mt-sparkle-fade {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.4); }
}

/* 左側：盲盒架 */
.mt-gacha-blindbox-rack {
  position: relative;
  flex: 0 0 38%;
  padding: 6px;
  background:
    linear-gradient(180deg, rgba(120,80,40,0.18) 0%, rgba(80,50,20,0.32) 100%);
  border: 2px solid rgba(180,120,60,0.45);
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.mt-gacha-blindbox-shelf {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.mt-gacha-blindbox-shelf-board {
  position: absolute;
  left: 4px; right: 4px;
  bottom: 4px;
  height: 4px;
  background: linear-gradient(180deg, #8b5a2b 0%, #5a3010 100%);
  border-radius: 2px;
}
.mt-gacha-blindbox {
  width: 70px; height: 42px;
  position: relative;
  border-radius: 4px 4px 6px 6px;
  cursor: default;
  transition: transform 0.2s;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}
.mt-gacha-blindbox:hover { transform: translateY(-3px) rotate(-2deg); }
.mt-gacha-blindbox-top {
  position: absolute;
  top: -3px; left: 6px; right: 6px;
  height: 6px;
  background: rgba(0,0,0,0.45);
  border-radius: 3px 3px 0 0;
}
.mt-gacha-blindbox-body {
  position: relative;
  width: 100%; height: 100%;
  border-radius: inherit;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.2);
}
.mt-gacha-blindbox.blindbox-r .mt-gacha-blindbox-body {
  background: linear-gradient(135deg, #7d8590 0%, #4a4f56 100%);
  border: 2px solid #2a2d33;
}
.mt-gacha-blindbox.blindbox-sr .mt-gacha-blindbox-body {
  background: linear-gradient(135deg, #b5a4ff 0%, #6a4fb5 100%);
  border: 2px solid #2a1850;
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.3), inset 0 2px 3px rgba(255,255,255,0.3), 0 0 10px rgba(155,135,245,0.5);
}
.mt-gacha-blindbox.blindbox-ssr .mt-gacha-blindbox-body {
  background: linear-gradient(135deg, #ffe680 0%, #f0c040 50%, #c08030 100%);
  border: 2px solid #5a3010;
  color: #2a1505;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2), inset 0 2px 3px rgba(255,255,255,0.5), 0 0 14px rgba(240,192,64,0.85);
  animation: mt-blindbox-ssr 2.5s ease-in-out infinite;
}
@keyframes mt-blindbox-ssr {
  0%, 100% { box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2), inset 0 2px 3px rgba(255,255,255,0.5), 0 0 14px rgba(240,192,64,0.85); }
  50%      { box-shadow: inset 0 -3px 6px rgba(0,0,0,0.2), inset 0 2px 3px rgba(255,255,255,0.5), 0 0 22px rgba(255,210,80,1);    }
}
.mt-gacha-blindbox-star {
  font-size: 14px;
  line-height: 1;
}
.mt-gacha-blindbox-rarity {
  font-size: 10px;
  letter-spacing: 1px;
}

/* 右側：櫃台 + 收銀台 */
.mt-gacha-counter {
  flex: 1;
  position: relative;
  display: flex; flex-direction: column;
  background:
    linear-gradient(180deg, rgba(80,50,20,0.5) 0%, rgba(40,25,10,0.6) 100%);
  border: 2px solid rgba(180,120,60,0.45);
  border-radius: 8px;
  padding: 10px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.mt-gacha-counter-clerk {
  font-size: 36px;
  text-align: center;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
.mt-gacha-counter-cashreg {
  background: rgba(0,0,0,0.5);
  border: 1.5px solid rgba(240,192,64,0.55);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex; flex-direction: column;
  gap: 4px;
  font-family: monospace;
  font-size: 11px;
  color: #ffe680;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
}
.mt-gacha-counter-resource b { font-size: 14px; color: #fff; }
.mt-gacha-counter-pity {
  font-size: 10px;
  color: rgba(255,180,180,0.85);
}

/* SSR row 在 mt-gacha-btn-row 之上加金光 */
.mt-gacha-btn-row.mt-gacha-ssr-row {
  background: linear-gradient(135deg, #5a3a0c 0%, #2a1808 100%);
  border-color: #f0c040;
  box-shadow: 0 0 16px rgba(240,192,64,0.6);
  animation: mt-bigbtn-glow 2.5s ease-in-out infinite;
}
.mt-gacha-btn-row.mt-gacha-ssr-row .mt-gacha-btn-title { color: #ffe680; }
.mt-gacha-btn-row.mt-gacha-ssr-row .mt-gacha-btn-cost {
  background: linear-gradient(135deg, #ffe680, #f0c040);
  color: #2a1505;
}

/* 舊 .mt-gacha-stage 還在用的 stats chips（保留向後相容） */
.mt-gacha-stage {
  position: relative;
  padding: 0 8px 20px;
  min-height: 100%;
}
.mt-gacha-shopname {
  text-align: center;
  margin: -8px 0 6px;
  font-family: 'Impact','Arial Black',sans-serif;
  letter-spacing: 1.5px;
}
.mt-gacha-neon {
  display: inline-block;
  color: #ffe680;
  font-size: 15px; font-weight: 900;
  text-shadow:
    0 0 4px #f0c040,
    0 0 8px rgba(240,192,64,0.7),
    0 0 14px rgba(255,80,40,0.45);
  animation: mt-neon-flicker 3.5s ease-in-out infinite;
}
@keyframes mt-neon-flicker {
  0%, 95%, 100% { opacity: 1; }
  96%, 98% { opacity: 0.4; }
}
.mt-gacha-stats {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.mt-gacha-chip {
  background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3));
  border: 1.5px solid rgba(240,192,64,0.5);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 800; color: #fff;
  display: inline-flex; align-items: center; gap: 4px;
}
.mt-gacha-chip-ticket { border-color: #f0c040; color: #ffe680; }
.mt-gacha-chip-gem    { border-color: #9b87f5; color: #cdbfff; }
.mt-gacha-chip-pity   { border-color: rgba(229,57,53,0.5); color: #ffb0b0; }
.mt-gacha-chip b { font-size: 14px; }

.mt-gacha-machine {
  position: relative;
  width: 100%; max-width: 320px;
  aspect-ratio: 260/380;
  margin: 0 auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.55));
}
.mt-gacha-machine-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.mt-gacha-capsules {
  position: absolute;
  left: 14%; top: 24%;
  width: 60%; height: 40%;
  pointer-events: none;
  overflow: hidden;
  border-radius: 50%;
}
.mt-gacha-capsule {
  position: absolute;
  left: var(--cx); top: var(--cy);
  width: 16px; height: 16px;
  border-radius: 50%;
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  animation: mt-cap-bounce 3s ease-in-out infinite;
}
.mt-gacha-capsule.c1 { animation-delay: 0s; }
.mt-gacha-capsule.c2 { animation-delay: 0.3s; }
.mt-gacha-capsule.c3 { animation-delay: 0.8s; }
.mt-gacha-capsule.c4 { animation-delay: 1.2s; }
.mt-gacha-capsule.c5 { animation-delay: 1.6s; }
.mt-gacha-capsule.c6 { animation-delay: 2.1s; }
@keyframes mt-cap-bounce {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(2px, -3px); }
}

/* 機台上的可點按鈕：把手（旋轉鈕）= 抽 1 */
.mt-gacha-handle {
  position: absolute;
  right: -2%; top: 38%;
  width: 22%; aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #ffd680 0%, #d49a30 50%, #805020 100%);
  border: 3px solid #1a0c04;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.5),
    inset 0 3px 4px rgba(255,255,255,0.5),
    inset 0 -3px 4px rgba(0,0,0,0.4);
  transition: transform 0.15s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.mt-gacha-handle:hover:not(.disabled) { transform: rotate(-12deg) scale(1.05); }
.mt-gacha-handle:active:not(.disabled) { transform: rotate(-30deg) scale(0.98); }
.mt-gacha-handle-knob {
  font-size: 18px; line-height: 1;
}
.mt-gacha-handle-label small { font-size: 10px; opacity: 0.9; }
.mt-gacha-handle.disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }

/* 大紅按鈕 = 10 連抽 */
.mt-gacha-bigbtn {
  position: absolute;
  left: 50%; top: 67%;
  transform: translateX(-50%);
  width: 38%; aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #ff7060 0%, #e53935 50%, #80101a 100%);
  border: 4px solid #1a0408;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  font-size: 24px;
  font-family: 'Impact','Arial Black',sans-serif;
  letter-spacing: 1px;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.6),
    inset 0 4px 6px rgba(255,255,255,0.45),
    inset 0 -4px 6px rgba(0,0,0,0.45);
  transition: transform 0.12s, box-shadow 0.12s;
  text-shadow: 0 2px 3px rgba(0,0,0,0.7);
  animation: mt-bigbtn-glow 2.5s ease-in-out infinite;
}
@keyframes mt-bigbtn-glow {
  0%, 100% { box-shadow: 0 6px 14px rgba(0,0,0,0.6), inset 0 4px 6px rgba(255,255,255,0.45), inset 0 -4px 6px rgba(0,0,0,0.45), 0 0 0 rgba(229,57,53,0); }
  50%      { box-shadow: 0 6px 14px rgba(0,0,0,0.6), inset 0 4px 6px rgba(255,255,255,0.45), inset 0 -4px 6px rgba(0,0,0,0.45), 0 0 18px rgba(229,57,53,0.7); }
}
.mt-gacha-bigbtn:hover:not(.disabled) { transform: translateX(-50%) scale(1.06); }
.mt-gacha-bigbtn:active:not(.disabled) {
  transform: translateX(-50%) scale(0.92) translateY(2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 3px 4px rgba(0,0,0,0.4);
}
.mt-gacha-bigbtn.disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); animation: none; }

/* 小寶石鈕 */
.mt-gacha-gembtn {
  position: absolute;
  left: 2%; top: 70%;
  width: 18%; aspect-ratio: 1;
  background: radial-gradient(circle at 35% 30%, #c0a0ff 0%, #6a4fb5 60%, #2a1850 100%);
  border: 2.5px solid #1a0830;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  font-size: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  box-shadow:
    0 3px 8px rgba(0,0,0,0.5),
    inset 0 2px 3px rgba(255,255,255,0.45),
    inset 0 -2px 3px rgba(0,0,0,0.4);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.mt-gacha-gem-icon { font-size: 14px; }
.mt-gacha-gembtn:hover:not(.disabled) { transform: scale(1.08); }
.mt-gacha-gembtn:active:not(.disabled) { transform: scale(0.94); }
.mt-gacha-gembtn.disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }

/* SSR 自選券貼紙 */
.mt-gacha-ssr-sticker {
  position: absolute;
  left: 4%; top: 12%;
  background: linear-gradient(135deg, #ffe680 0%, #f0c040 50%, #c08020 100%);
  border: 2.5px solid #fff;
  border-radius: 8px;
  padding: 4px 8px;
  color: #5a3010;
  font-weight: 900;
  font-size: 10px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  transform: rotate(-12deg);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  animation: mt-ssr-sparkle 1.5s ease-in-out infinite;
}
@keyframes mt-ssr-sparkle {
  0%, 100% { box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 0 0 rgba(240,192,64,0); }
  50%      { box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 0 16px rgba(255,210,80,0.95); }
}
.mt-gacha-ssr-star { font-size: 16px; }
.mt-gacha-ssr-text { font-size: 9px; }

.mt-gacha-shopnote {
  text-align: center;
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.mt-gacha-shopnote .dot { opacity: 0.5; margin: 0 4px; }
.mt-gacha-pity-warn {
  margin-top: 8px;
  text-align: center;
  font-size: 12px; font-weight: 900;
  background: linear-gradient(135deg, rgba(229,57,53,0.3), rgba(240,192,64,0.3));
  border: 2px solid #f0c040;
  border-radius: 8px;
  padding: 6px 10px;
  color: #ffe680;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  animation: mt-pity-pulse 1s ease-in-out infinite;
}
@keyframes mt-pity-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* ═════════════════════════════════════════════════════════════
   📋 COACH TAB — 教練辦公室（黑板 + 教練站位）
   ═════════════════════════════════════════════════════════════ */
.mt-coach-office {
  position: relative;
  padding: 8px 6px 100px;
  min-height: 100%;
}
.mt-coach-office-title {
  text-align: center;
  font-size: 14px; font-weight: 900;
  color: #f0c040;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.mt-coach-office-formation {
  display: inline-block;
  margin-left: 6px;
  background: rgba(240,192,64,0.2);
  border: 1.5px solid #f0c040;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
}

.mt-coach-blackboard {
  position: relative;
  width: 75%; max-width: 280px;
  aspect-ratio: 240/180;
  margin: 0 auto 6px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}
.mt-coach-blackboard-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.mt-coach-board-label {
  position: absolute;
  left: 0; right: 0;
  bottom: 8px;
  text-align: center;
  color: #f0c040;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  font-family: 'Caveat','Comic Sans MS',cursive;
}
.mt-coach-board-trait {
  position: absolute;
  left: 0; right: 0;
  bottom: -18px;
  text-align: center;
  color: rgba(255,255,255,0.8);
  font-size: 10px;
}

/* 教練站位列 */
.mt-coach-line {
  position: absolute;
  top: 40px;
  width: 12%;
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 0 4px;
}
.mt-coach-line-l { left: 0; }
.mt-coach-line-r { right: 0; }

.mt-coach-slot {
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 4px;
  width: 100%;
  cursor: pointer;
  position: relative;
  color: #fff;
  text-align: center;
  transition: transform 0.12s, border-color 0.15s;
}
.mt-coach-slot:hover:not(.mt-coach-slot-ghost) {
  transform: scale(1.06);
  border-color: #f0c040;
}
.mt-coach-slot.rarity-SSR { border-color: #f0c040; box-shadow: 0 0 8px rgba(240,192,64,0.6); }
.mt-coach-slot.rarity-SR  { border-color: #9b87f5; box-shadow: 0 0 6px rgba(155,135,245,0.5); }
.mt-coach-slot.active { background: rgba(240,192,64,0.18); }
.mt-coach-active-crown {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-size: 14px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.mt-coach-slot-portrait {
  width: 100%; aspect-ratio: 1;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.mt-coach-slot-portrait img {
  width: 100%; height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}
.mt-coach-slot-portrait-ghost {
  color: rgba(255,255,255,0.25);
  font-size: 24px;
  background: rgba(0,0,0,0.3);
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 6px;
}
.mt-coach-slot-name {
  font-size: 9px; font-weight: 800;
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-coach-slot-rarity {
  position: absolute; top: 2px; left: 2px;
  font-size: 8px; font-weight: 900;
  padding: 0 3px; border-radius: 3px;
  background: rgba(0,0,0,0.6); color: #fff;
}
.mt-coach-slot-rarity.rarity-SSR { background: #f0c040; color: #5a3010; }
.mt-coach-slot-rarity.rarity-SR  { background: #9b87f5; color: #2a1850; }
.mt-coach-slot.mt-coach-slot-ghost {
  opacity: 0.45;
  cursor: default;
  border-style: dashed;
}
.mt-coach-setting { animation: mt-pulse 0.6s ease-in-out; }
@keyframes mt-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.1); }
}

.mt-coach-floor {
  position: absolute;
  left: 0; right: 0; bottom: 70px;
  height: 30px;
  background: linear-gradient(180deg, transparent 0%, rgba(120,70,30,0.3) 50%, rgba(80,50,20,0.5) 100%);
  pointer-events: none;
}

.mt-coach-actions {
  position: absolute;
  bottom: 12px; left: 8px; right: 8px;
  display: flex; gap: 8px; align-items: center;
  background: linear-gradient(135deg, rgba(80,50,20,0.92), rgba(40,25,10,0.92));
  border: 3px solid #f0c040;
  border-radius: 12px;
  padding: 10px;
  box-shadow:
    0 6px 14px rgba(0,0,0,0.55),
    0 0 12px rgba(240,192,64,0.35);
}
.mt-coach-draw-btn {
  flex: 1;
  background: linear-gradient(135deg, #f0c040 0%, #e07020 100%);
  border: 2.5px solid #fff;
  color: #1a1a2e;
  font-weight: 900;
  font-size: 13px;
  padding: 12px 6px;
  border-radius: 10px;
  cursor: pointer;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
  box-shadow:
    0 4px 10px rgba(240,192,64,0.5),
    inset 0 2px 3px rgba(255,255,255,0.4);
  transition: transform 0.12s, box-shadow 0.15s;
  animation: mt-draw-glow 2.4s ease-in-out infinite;
}
.mt-coach-draw-btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 6px 14px rgba(240,192,64,0.7),
    inset 0 2px 3px rgba(255,255,255,0.4);
}
.mt-coach-draw-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); animation: none; }
.mt-coach-draw-10 {
  background: linear-gradient(135deg, #ffe680 0%, #f0c040 50%, #c08030 100%);
}
@keyframes mt-draw-glow {
  0%, 100% { box-shadow: 0 4px 10px rgba(240,192,64,0.5), inset 0 2px 3px rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 4px 10px rgba(240,192,64,0.5), inset 0 2px 3px rgba(255,255,255,0.4), 0 0 18px rgba(240,192,64,0.9); }
}

/* 抽教練結果彈窗 */
.mt-coach-result-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 12010;
  opacity: 0; transition: opacity 0.2s;
  padding: 20px;
}
.mt-coach-result-overlay.open { opacity: 1; }
.mt-coach-result-modal {
  background: linear-gradient(180deg, #2a1810 0%, #1a0d08 100%);
  border: 3px solid #f0c040;
  border-radius: 16px;
  padding: 20px;
  max-width: 480px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 12px 32px rgba(0,0,0,0.7), 0 0 28px rgba(240,192,64,0.35);
}
.mt-coach-result-title {
  font-size: 22px; font-weight: 900;
  color: #ffe680;
  text-align: center;
  margin-bottom: 14px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 0 12px rgba(240,192,64,0.5);
  animation: mt-coach-title-pop 0.5s ease-out;
}
@keyframes mt-coach-title-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.mt-coach-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.mt-coach-result-card {
  background: rgba(255,255,255,0.05);
  border: 2.5px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
  color: #fff;
  opacity: 0;
  animation: mt-coach-card-in 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
  position: relative;
}
@keyframes mt-coach-card-in {
  0%   { transform: scale(0.3) rotate(180deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(0deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}
.mt-coach-result-card.rarity-SSR {
  border-color: #f0c040;
  box-shadow: 0 0 18px rgba(240,192,64,0.7);
  background: radial-gradient(circle at 50% 0%, rgba(240,192,64,0.25), rgba(255,255,255,0.05));
}
.mt-coach-result-card.rarity-SR {
  border-color: #9b87f5;
  box-shadow: 0 0 12px rgba(155,135,245,0.6);
  background: radial-gradient(circle at 50% 0%, rgba(155,135,245,0.2), rgba(255,255,255,0.05));
}
.mt-coach-result-rarity {
  position: absolute; top: 6px; left: 6px;
  background: rgba(0,0,0,0.6);
  padding: 1px 6px; border-radius: 4px;
  font-size: 10px; font-weight: 900;
  color: #fff;
}
.mt-coach-result-card.rarity-SSR .mt-coach-result-rarity { background: #f0c040; color: #5a3010; }
.mt-coach-result-card.rarity-SR  .mt-coach-result-rarity { background: #9b87f5; color: #2a1850; }
.mt-coach-result-dup {
  position: absolute; top: 6px; right: 6px;
  background: #43a047;
  color: #fff;
  font-size: 9px; font-weight: 900;
  padding: 1px 6px; border-radius: 4px;
}
.mt-coach-result-portrait {
  width: 80px; height: 100px;
  margin: 4px auto;
}
.mt-coach-result-portrait img {
  width: 100%; height: 100%;
  image-rendering: pixelated;
}
.mt-coach-result-name {
  font-size: 13px; font-weight: 900;
  color: #ffe680;
  margin-top: 4px;
}
.mt-coach-result-nickname { font-size: 10px; opacity: 0.75; margin-top: 1px; }
.mt-coach-result-trait { font-size: 10px; color: #cdbfff; margin-top: 4px; }

/* ═════════════════════════════════════════════════════════════
   ⚽ MATCH TAB — 路線地圖闖關 + 2D 主角卷軸
   ═════════════════════════════════════════════════════════════ */
.mt-match-map {
  position: relative;
  padding: 6px 8px 24px;
}

/* 頂部 2D 主角卷軸 banner */
.mt-match-banner {
  position: relative;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #74cfff 0%, #b6e6ff 70%, #c7e9ff 100%);
  border: 2px solid #1a1a2e;
  margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45), inset 0 -8px 12px rgba(0,0,0,0.18);
}
.mt-match-banner-scroll {
  position: absolute; inset: 0;
}
.mt-match-banner-clouds {
  position: absolute; left: 0; right: 0; top: 4px; height: 30px;
}
.mt-match-cloud {
  position: absolute;
  top: 0;
  width: 38px; height: 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 14px 0 0 -4px #fff, -10px 4px 0 -3px #fff;
  opacity: 0.95;
  animation: mt-cloud-drift 12s linear infinite;
}
.mt-match-cloud.c1 { left: -50px; top: 4px;  animation-delay: 0s;   }
.mt-match-cloud.c2 { left: -50px; top: 14px; animation-delay: -4s;  }
.mt-match-cloud.c3 { left: -50px; top: 24px; animation-delay: -8s;  }
@keyframes mt-cloud-drift {
  from { transform: translateX(0);     }
  to   { transform: translateX(110vw); }
}
.mt-match-banner-ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 28px;
  background: linear-gradient(180deg, #6ec24a 0%, #3a7a25 100%);
  border-top: 2px solid #1a3a08;
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0, transparent 16px,
      rgba(255,255,255,0.07) 16px, rgba(255,255,255,0.07) 18px),
    linear-gradient(180deg, #6ec24a 0%, #3a7a25 100%);
}
/* 主角 LPC sprite（JS 控位置/sprite frame） */
.mt-match-hero {
  position: absolute;
  bottom: 2px;
  left: -40px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  z-index: 3;
  pointer-events: none;
}
/* 守門員 sprite（站在球門中間） */
.mt-match-goalkeeper {
  position: absolute;
  right: 32px;
  bottom: 2px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  z-index: 2;
  pointer-events: none;
}
/* 球門 SVG（拉寬 ≈ 真實球門比例） */
.mt-match-goal {
  position: absolute;
  right: 4px;
  bottom: 16px;
  width: 80px;
  height: 50px;
  z-index: 1;
}
.mt-match-goal svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
/* 對手球員 sprite ×2（站在球門前） */
.mt-match-opp {
  position: absolute;
  bottom: 2px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  z-index: 2;
  pointer-events: none;
  animation: mt-match-opp-bob 2.4s ease-in-out infinite;
}
#mt-match-opp-1 { right: 64px; }
#mt-match-opp-2 { right: 8px; animation-delay: -1.2s; }
@keyframes mt-match-opp-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
/* 對手隊徽 + 隊名（右上） */
.mt-match-opp-label {
  position: absolute;
  right: 8px; top: 8px;
  background: rgba(0,0,0,0.72);
  border: 1.5px solid rgba(229,57,53,0.7);
  border-radius: 8px;
  padding: 4px 9px 5px;
  color: #fff;
  max-width: 60%;
  z-index: 4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.mt-match-opp-label-tag {
  font-size: 9px;
  font-weight: 800;
  color: #ffd54a;
  letter-spacing: 1.2px;
  line-height: 1;
  margin-bottom: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.mt-match-opp-label-row {
  display: flex; align-items: center; gap: 5px;
}
.mt-match-opp-label-crest {
  font-size: 15px;
  line-height: 1;
}
.mt-match-opp-label-name {
  font-size: 11px;
  font-weight: 900;
  color: #ffb0b0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}
.mt-match-opp-real {
  background: linear-gradient(180deg, #ff7060, #c0231a);
  color: #fff;
  font-size: 8px;
  padding: 0 4px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  vertical-align: 1px;
  font-weight: 900;
}
.mt-match-opp-npc {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  font-size: 8px;
  padding: 0 4px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  vertical-align: 1px;
  border: 1px solid rgba(255,255,255,0.2);
  font-weight: 900;
}
/* 足球（SVG）— 主角腳邊帶球、射門時飛走 */
.mt-match-ball {
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 16px; height: 16px;
  opacity: 1;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.55));
}
.mt-match-ball svg { width: 100%; height: 100%; display: block; }
.mt-match-banner-overlay {
  position: absolute;
  left: 8px; top: 8px;
  background: rgba(0,0,0,0.65);
  border-radius: 8px;
  padding: 4px 10px;
  color: #fff;
}
.mt-match-banner-overlay .mt-match-tier {
  font-size: 13px; font-weight: 900;
  color: #ffe680;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.mt-match-banner-overlay .mt-match-tier small { font-size: 10px; opacity: 0.75; margin-left: 4px; }
.mt-match-record-line { font-size: 11px; margin-top: 2px; }
.mt-match-record-line .mt-match-boss-tag {
  margin-left: 6px;
  background: rgba(229,57,53,0.6);
  border: 1px solid #ff8080;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 9px;
  animation: mt-boss-blink 1.4s ease-in-out infinite;
}
@keyframes mt-boss-blink {
  0%, 100% { box-shadow: 0 0 0 rgba(229,57,53,0); }
  50%      { box-shadow: 0 0 10px rgba(229,57,53,0.9); }
}

/* 路線地圖外框：可滾、自動聚焦當前關 */
.mt-match-path-wrap {
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 0 12px;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(240,192,64,0.5) rgba(0,0,0,0.2);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.15));
  box-shadow: inset 0 4px 6px -4px rgba(0,0,0,0.45), inset 0 -4px 6px -4px rgba(0,0,0,0.45);
}
.mt-match-path-wrap::-webkit-scrollbar { width: 6px; }
.mt-match-path-wrap::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.5); border-radius: 3px; }
.mt-match-path-wrap::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); }
/* 路線地圖 */
.mt-match-path {
  position: relative;
  width: 100%; max-width: 360px;
  height: 460px;
  margin: 0 auto;
}
.mt-match-path-line {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.mt-match-stages {
  position: absolute; inset: 0;
}
.mt-match-stage-node {
  position: absolute;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe680 0%, #f0c040 50%, #c08030 100%);
  border: 3px solid #fff;
  color: #2a1505;
  font-weight: 900;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.55),
    inset 0 2px 3px rgba(255,255,255,0.5),
    inset 0 -2px 3px rgba(0,0,0,0.25);
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
  transition: transform 0.15s;
}
.mt-match-stage-node:hover { transform: translate(-50%, -50%) scale(1.08); }
.mt-match-stage-node:active { transform: translate(-50%, -50%) scale(0.96); }
.mt-match-stage-icon { font-size: 18px; line-height: 1; }
.mt-match-stage-num  { font-size: 11px; line-height: 1; margin-top: 1px; }

/* 已通過：深綠 + ✓ */
.mt-match-stage-node.is-past {
  background: linear-gradient(180deg, #6ec24a 0%, #3a7a25 100%);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.5);
}
/* 當前關：脈動 */
.mt-match-stage-node.is-now {
  animation: mt-stage-pulse 1.1s ease-in-out infinite;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.55),
    inset 0 2px 3px rgba(255,255,255,0.5),
    0 0 18px rgba(240,192,64,0.95);
  z-index: 3;
}
@keyframes mt-stage-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    }
  50%      { transform: translate(-50%, -50%) scale(1.15); }
}
/* 鎖住 */
.mt-match-stage-node.is-locked {
  background: linear-gradient(180deg, #555 0%, #333 100%);
  color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.2);
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.mt-match-stage-node.is-locked .mt-match-stage-icon { content: '🔒'; }
/* Boss 關（5, 10）：紅金大、爆炸光圈 */
.mt-match-stage-node.is-boss {
  width: 62px; height: 62px;
  background: radial-gradient(circle at 35% 30%, #ff8080 0%, #e53935 60%, #80101a 100%);
  border-color: #ffe680;
  color: #ffe680;
  text-shadow: 0 0 6px rgba(255,235,150,0.9);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.7),
    0 0 20px rgba(229,57,53,0.85);
}
.mt-match-stage-node.is-boss.is-now {
  animation: mt-stage-pulse-boss 1s ease-in-out infinite;
}
@keyframes mt-stage-pulse-boss {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 6px 14px rgba(0,0,0,0.7), 0 0 20px rgba(229,57,53,0.85); }
  50%      { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 6px 14px rgba(0,0,0,0.7), 0 0 32px rgba(229,57,53,1);    }
}

/* 路線節點位置（往上爬塔：1 在下、10 在頂）— 路徑是 S 形蛇形 */
.mt-match-stage-node[data-stage="1"]  { left: 50%; top: 95%; transform: translate(-50%, -50%); }
.mt-match-stage-node[data-stage="2"]  { left: 23%; top: 83%; transform: translate(-50%, -50%); }
.mt-match-stage-node[data-stage="3"]  { left: 50%; top: 72%; transform: translate(-50%, -50%); }
.mt-match-stage-node[data-stage="4"]  { left: 78%; top: 61%; transform: translate(-50%, -50%); }
.mt-match-stage-node[data-stage="5"]  { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.mt-match-stage-node[data-stage="6"]  { left: 23%; top: 39%; transform: translate(-50%, -50%); }
.mt-match-stage-node[data-stage="7"]  { left: 50%; top: 28%; transform: translate(-50%, -50%); }
.mt-match-stage-node[data-stage="8"]  { left: 78%; top: 17%; transform: translate(-50%, -50%); }
.mt-match-stage-node[data-stage="9"]  { left: 50%; top:  9%; transform: translate(-50%, -50%); }
.mt-match-stage-node[data-stage="10"] { left: 78%; top:  3%; transform: translate(-50%, -50%); }

/* 當前關卡資訊面板：左按鈕 右對手資訊（緊湊版） */
.mt-match-current {
  position: relative;
  margin: 0 0 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3));
  border: 2px solid rgba(240,192,64,0.55);
  border-radius: 12px;
  padding: 14px 10px 8px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}
/* 左上角「第 N 關」徽章 */
.mt-match-current-stage-badge {
  position: absolute;
  top: -10px; left: 12px;
  background: linear-gradient(180deg, #ffe680 0%, #f0c040 50%, #c08030 100%);
  color: #2a1505;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px 3px 9px;
  border-radius: 6px;
  letter-spacing: 1px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
  border: 1.5px solid rgba(80,40,5,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  z-index: 2;
}
.mt-match-current-left {
  flex: 1.2;
  min-width: 130px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
}
.mt-match-current-right {
  flex: 1;
  min-width: 120px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  border-left: 1px solid rgba(240,192,64,0.25);
  padding-left: 10px;
}
.mt-match-current-label {
  font-size: 11px;
  opacity: 0.85;
  text-align: center;
  line-height: 1.3;
}
.mt-match-current-next {
  font-size: 11px;
  color: #ffd54a;
  font-weight: 800;
  text-align: center;
  line-height: 1.2;
  opacity: 0.95;
  letter-spacing: 0.5px;
}
.mt-match-current-vs-label {
  font-size: 11px;
  color: rgba(255,213,74,0.7);
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1;
}
.mt-match-current-opp-power {
  background: rgba(76,175,80,0.18);
  color: #b9e8b3;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  border: 1px solid rgba(76,175,80,0.35);
}
.mt-match-current-opp-name {
  font-size: 13px;
  font-weight: 900;
  color: #ffb0b0;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-match-current-opp-meta {
  display: flex; gap: 4px;
  align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.mt-match-current-boss-pill {
  background: linear-gradient(180deg, #ff7060, #b81a10);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(229,57,53,0.7);
  animation: mt-boss-blink 1.2s ease-in-out infinite;
}
.mt-match-current-boss-pill--maybe {
  background: linear-gradient(180deg, #ffd54a, #b8830a);
  color: #2a1505;
  box-shadow: 0 0 6px rgba(255,213,74,0.55);
  animation: none;
}
.mt-match-current-warn {
  flex-basis: 100%;
  font-size: 11px; color: #ffb0b0;
  margin-top: 4px;
  text-align: center;
}
.mt-match-current .mt-match-engage-btn {
  margin: 0;
  padding: 8px 14px;
  min-height: auto;
}

/* ═════════════════════════════════════════════════════════════
   舊版：MATCH TAB — 球場入口隧道（保留 .mt-match-stage class）
   ═════════════════════════════════════════════════════════════ */
.mt-match-stage {
  position: relative;
  padding: 0 0 20px;
  min-height: 100%;
}
.mt-match-tunnel-lights {
  display: flex; justify-content: space-around;
  padding: 8px 30px 0;
  margin-bottom: -4px;
}
.mt-match-tunnel-light {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffaa 0%, #f0c040 60%, #805020 100%);
  box-shadow: 0 0 14px rgba(255,235,150,0.85), 0 0 28px rgba(255,235,150,0.45);
  animation: mt-tunnel-light-flicker 4s ease-in-out infinite;
}
.mt-match-tunnel-light:nth-child(2) { animation-delay: 0.7s; }
.mt-match-tunnel-light:nth-child(3) { animation-delay: 1.4s; }
@keyframes mt-tunnel-light-flicker {
  0%, 95%, 100% { opacity: 1; }
  97% { opacity: 0.55; }
}

.mt-match-tunnel-arch {
  display: block;
  width: 100%; height: 100px;
}

.mt-match-tunnel-board {
  margin: -6px 14px 12px;
  padding: 8px 10px;
  background: linear-gradient(135deg, rgba(0,0,0,0.7), rgba(20,30,50,0.7));
  border: 2px solid rgba(240,192,64,0.55);
  border-radius: 8px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.5), 0 0 8px rgba(240,192,64,0.3);
}
.mt-match-tier {
  font-size: 13px; font-weight: 900;
  color: #ffe680;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.mt-match-tier small { font-size: 10px; opacity: 0.7; margin-left: 4px; }
.mt-match-progress-row {
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0;
}
.mt-match-progress-bar {
  flex: 1; height: 8px;
  background: rgba(0,0,0,0.6);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  overflow: hidden;
}
.mt-match-progress-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #43a047 0%, #f0c040 70%, #e53935 100%);
  transition: width 0.4s;
}
.mt-match-progress-text { font-size: 10px; opacity: 0.75; }
.mt-match-record {
  font-size: 11px; color: #fff;
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.mt-match-boss-tag {
  margin-left: auto;
  background: rgba(229,57,53,0.6);
  border: 1px solid #ff8080;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10px;
  color: #fff;
  animation: mt-boss-blink 1.4s ease-in-out infinite;
}
@keyframes mt-boss-blink {
  0%, 100% { box-shadow: 0 0 0 rgba(229,57,53,0); }
  50%      { box-shadow: 0 0 12px rgba(229,57,53,0.9); }
}

/* 對手卡（中央大卡） */
.mt-match-opp-card {
  margin: 0 24px 16px;
  perspective: 800px;
}
.mt-match-opp-card-inner {
  background: linear-gradient(180deg, #2a1810 0%, #5a3020 100%);
  border: 3px solid #f0c040;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  color: #fff;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.7),
    inset 0 2px 4px rgba(255,255,255,0.2);
  transform: rotateX(2deg);
}
.mt-match-opp-crest {
  font-size: 38px;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 6px rgba(229,57,53,0.7));
}
.mt-match-opp-label {
  font-size: 11px; opacity: 0.75;
  text-transform: uppercase; letter-spacing: 2px;
}
.mt-match-opp-name {
  font-size: 18px; font-weight: 900;
  margin: 2px 0 4px;
  color: #ffe680;
}
.mt-match-opp-power {
  font-size: 12px; color: #ffb0b0;
  margin-bottom: 10px;
}

.mt-match-engage-btn {
  display: inline-flex; flex-direction: column; align-items: center;
  background: linear-gradient(135deg, #e53935 0%, #a01020 100%);
  border: 3px solid #ffe680;
  color: #fff;
  font-weight: 900;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Impact','Arial Black',sans-serif;
  letter-spacing: 2px;
  box-shadow: 0 6px 14px rgba(229,57,53,0.5), inset 0 2px 4px rgba(255,255,255,0.3);
  transition: transform 0.12s;
  text-shadow: 0 2px 3px rgba(0,0,0,0.6);
}
.mt-match-engage-btn:hover:not(:disabled) { transform: scale(1.06); }
.mt-match-engage-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); }
.mt-match-engage-sword { font-size: 22px; }
.mt-match-engage-label { font-size: 16px; }
.mt-match-engage-cost  { font-size: 10px; opacity: 0.85; letter-spacing: 0; margin-top: 2px; }

/* 隧道牆招牌 */
.mt-match-wall-sign {
  display: block;
  margin: 0 32px 12px;
  background: linear-gradient(135deg, rgba(80,30,30,0.7), rgba(40,15,15,0.7));
  border: 2px solid #9b87f5;
  border-radius: 8px;
  padding: 8px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  transform: rotate(-1.5deg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
  transition: transform 0.15s;
}
.mt-match-wall-sign:hover:not(:disabled) { transform: rotate(0deg) scale(1.04); }
.mt-match-wall-sign:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); }
.mt-match-wall-sign-icon { font-size: 22px; }
.mt-match-wall-sign-title {
  font-weight: 900; font-size: 13px;
  color: #cdbfff;
}
.mt-match-wall-sign-sub { font-size: 10px; opacity: 0.75; }

.mt-match-grass {
  margin-top: 14px;
  min-height: 30px;
  background: linear-gradient(180deg, transparent 0%, rgba(46,125,50,0.5) 60%, rgba(20,80,30,0.6) 100%);
  position: relative;
}
.mt-match-grass-warn {
  text-align: center;
  padding: 8px;
  font-size: 11px;
  color: #ffb0b0;
}

/* ═════════════════════════════════════════════════════════════
   💪 TRAIN TAB — 訓練館（機台一排）
   ═════════════════════════════════════════════════════════════ */
.mt-train-gym {
  position: relative;
  padding: 8px 8px 20px;
}
.mt-train-gym-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap; gap: 6px;
}
.mt-train-gym-title {
  font-size: 15px; font-weight: 900;
  color: #f0c040;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.mt-train-rp-chips {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.mt-train-rp-chips > span {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,180,80,0.4);
  border-radius: 12px;
  padding: 3px 8px;
  font-size: 11px; font-weight: 800;
  color: #ffe680;
}

.mt-train-machines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.mt-train-machine {
  background: linear-gradient(180deg, #555555 0%, #2a2a2a 100%);
  border: 3px solid #1a1a1a;
  border-radius: 8px;
  padding: 8px 4px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  position: relative;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.5),
    inset 0 2px 3px rgba(255,255,255,0.15),
    inset 0 -2px 3px rgba(0,0,0,0.4);
  transition: transform 0.12s;
}
.mt-train-machine:hover {
  transform: translateY(-3px);
  box-shadow:
    0 6px 12px rgba(0,0,0,0.6),
    inset 0 2px 3px rgba(255,255,255,0.2),
    inset 0 -2px 3px rgba(0,0,0,0.4),
    0 0 14px rgba(240,192,64,0.55);
}
.mt-train-machine:active { transform: translateY(0); }
.mt-train-machine-icon {
  width: 42px; height: 36px;
  margin: 0 auto;
}
.mt-train-machine-icon svg { width: 100%; height: 100%; }
.mt-train-machine-label {
  font-size: 12px; font-weight: 900;
  margin-top: 2px;
  color: #ffe680;
  text-shadow: 0 1px 1px rgba(0,0,0,0.7);
}
.mt-train-machine-sub {
  font-size: 9px; opacity: 0.75;
}

.mt-train-active-wrap {
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 8px;
}
.mt-train-active-title {
  font-size: 12px; font-weight: 800;
  color: #f0c040;
  margin-bottom: 6px;
}
.mt-train-active-list {
  display: flex; flex-direction: column; gap: 6px;
}
.mt-train-active-empty {
  text-align: center;
  padding: 12px;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.mt-train-active-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 8px;
  color: #fff;
}
.mt-train-active-row.rarity-SSR { border-color: #f0c040; }
.mt-train-active-row.rarity-SR  { border-color: #9b87f5; }
.mt-train-active-row.ready { animation: mt-active-ready 1.4s ease-in-out infinite; }
@keyframes mt-active-ready {
  0%, 100% { background: rgba(76,175,80,0.18); }
  50%      { background: rgba(76,175,80,0.35); }
}
.mt-train-active-portrait {
  width: 36px; height: 44px;
  flex-shrink: 0;
}
.mt-train-active-portrait img {
  width: 100%; height: 100%;
  image-rendering: pixelated;
}
.mt-train-active-info { flex: 1; min-width: 0; }
.mt-train-active-name { font-size: 12px; font-weight: 800; }
.mt-train-active-name small { opacity: 0.75; }
.mt-train-active-time {
  font-size: 11px; opacity: 0.85;
  font-family: monospace;
}

/* 訓練機台選人彈窗 */
.mt-train-picker .mt-profile-card { max-width: 420px; }
.mt-train-picker-title { font-size: 16px; font-weight: 900; color: #f0c040; margin-bottom: 4px; }
.mt-train-picker-sub { font-size: 11px; opacity: 0.7; margin-bottom: 10px; }
.mt-train-picker-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 60vh; overflow-y: auto;
}
.mt-train-pick-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px;
  color: #fff;
}
.mt-train-pick-row.rarity-SSR { border-color: #f0c040; }
.mt-train-pick-row.rarity-SR  { border-color: #9b87f5; }
.mt-train-pick-portrait { width: 36px; height: 44px; flex-shrink: 0; }
.mt-train-pick-portrait img { width: 100%; height: 100%; image-rendering: pixelated; }
.mt-train-pick-info { flex: 1; min-width: 0; }
.mt-train-pick-name { font-size: 12px; font-weight: 800; }
.mt-train-pick-name small { opacity: 0.7; font-weight: 600; }
.mt-train-pick-attr { font-size: 11px; opacity: 0.85; margin-top: 2px; }
.mt-train-pick-attr b { color: #ffe680; }
.mt-train-pick-btns { display: flex; gap: 4px; flex-shrink: 0; }
.mt-train-pick-btn {
  background: linear-gradient(135deg, #43a047 0%, #1f6024 100%);
  border: 1.5px solid #1a4d1f;
  color: #fff; font-size: 10px; font-weight: 800;
  padding: 4px 8px; border-radius: 6px;
  cursor: pointer; text-align: center;
}
.mt-train-pick-btn small { font-size: 9px; opacity: 0.85; font-weight: 600; }
.mt-train-pick-rp { background: linear-gradient(135deg, #f0c040 0%, #c08030 100%); border-color: #5a3010; color: #2a1505; }
.mt-train-pick-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); }
.mt-train-pick-busy {
  font-size: 11px; opacity: 0.7;
  padding: 4px 8px;
  color: #f0c040;
}

/* Coach tab + Match tab + Train tab：移除背景 SVG（場景由內部 DOM 渲染） */
.mt-hub-content[data-tab="coach"]::before,
.mt-hub-content[data-tab="match"]::before,
.mt-hub-content[data-tab="match"]::after,
.mt-hub-content[data-tab="train"]::before,
.mt-hub-content[data-tab="gacha"]::before { display: none; }
.mt-hub-content[data-tab="gacha"]::after { display: none; }

/* 深化各 tab 內場景的環境光 */
.mt-hub-content[data-tab="gacha"] {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(240,192,64,0.18) 0%, transparent 70%),
    linear-gradient(180deg, #1a0a14 0%, #2a1015 50%, #14070c 100%);
}
.mt-hub-content[data-tab="coach"] {
  background:
    repeating-linear-gradient(90deg,
      rgba(120,70,30,0.04) 0, rgba(120,70,30,0.04) 80px,
      transparent 80px, transparent 82px),
    linear-gradient(180deg, #0d1f1a 0%, #142822 55%, #2a1812 55%, #1a0e08 100%);
}
.mt-hub-content[data-tab="match"] {
  background:
    radial-gradient(ellipse 60% 30% at 50% 0%, rgba(255,255,150,0.1) 0%, transparent 70%),
    linear-gradient(180deg, #050a18 0%, #0a1430 30%, #1a3050 55%, #1a4520 75%, #0d2a14 100%);
}
.mt-hub-content[data-tab="train"] {
  background:
    repeating-linear-gradient(90deg,
      rgba(120,80,40,0.05) 0, rgba(120,80,40,0.05) 60px,
      transparent 60px, transparent 62px),
    linear-gradient(180deg, #1f1808 0%, #2a2010 60%, #3a2614 60%, #251a08 100%);
}
.mt-pitch-player:nth-child(odd) { animation-delay: 0.4s; }
.mt-pitch-player:nth-child(3n) { animation-delay: 0.8s; }
.mt-pitch-player:hover { z-index: 5; }
.mt-pitch-player:hover .mt-pitch-player-portrait {
  transform: scale(1.15);
  filter: drop-shadow(0 4px 12px rgba(240,192,64,0.6));
}
.mt-pitch-player.rarity-SSR .mt-pitch-player-portrait {
  filter: drop-shadow(0 0 8px rgba(240,192,64,0.7));
}
.mt-pitch-player.rarity-SR .mt-pitch-player-portrait {
  filter: drop-shadow(0 0 6px rgba(155,135,245,0.6));
}
@keyframes mt-bob {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 3px)); }
}
.mt-pitch-player-portrait {
  width: 48px; height: 60px;
  margin: 0 auto;
  position: relative;
  transition: all 0.2s;
}
.mt-pitch-player-portrait img {
  width: 100%; height: 100%; display: block;
  image-rendering: pixelated;
}
.mt-pitch-injury {
  position: absolute; top: -4px; right: -4px;
  background: rgba(229,57,53,0.95); color: #fff;
  font-size: 12px; padding: 1px 4px; border-radius: 4px;
}
.mt-pitch-player-name {
  font-size: 10px; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 4px rgba(0,0,0,0.7);
  margin-top: 1px; white-space: nowrap;
}
.mt-pitch-player-stat {
  font-size: 9px; opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}

/* 板凳 strip */
.mt-bench-section { margin-top: 10px; }
.mt-bench-title { font-size: 12px; font-weight: 800; color: #f0c040; margin-bottom: 4px; }
.mt-bench-strip {
  display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px;
}
.mt-bench-player {
  background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 4px;
  flex-shrink: 0; width: 68px; text-align: center;
  cursor: pointer; position: relative; color: #fff;
}
.mt-bench-player.rarity-SSR { border-color: #f0c040; }
.mt-bench-player.rarity-SR  { border-color: #9b87f5; }
.mt-bench-player img {
  width: 48px; height: 60px; image-rendering: pixelated;
  margin-bottom: 2px;
}
.mt-bench-rarity {
  position: absolute; top: 2px; right: 2px;
  background: rgba(0,0,0,0.5); font-size: 9px; padding: 1px 4px; border-radius: 3px;
}
.mt-bench-injury {
  position: absolute; top: 2px; left: 2px;
  background: rgba(229,57,53,0.95); font-size: 11px; padding: 1px 3px; border-radius: 3px;
}
.mt-bench-name { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-bench-pos { font-size: 9px; opacity: 0.7; }

/* ─── 球員個人主頁 ─── */
.mt-profile-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 12002; opacity: 0; transition: opacity 0.2s;
  backdrop-filter: blur(6px); padding: 16px;
}
.mt-profile-overlay.open { opacity: 1; }
.mt-profile-card {
  background: linear-gradient(180deg, #1a1a2e 0%, #0d1224 100%);
  border: 2px solid #444; border-radius: 14px;
  width: 100%; max-width: 380px; max-height: 92vh; overflow-y: auto;
  padding: 20px; position: relative; color: #fff;
}
.mt-profile-card.rarity-SSR { border-color: #f0c040; box-shadow: 0 0 32px rgba(240,192,64,0.4); }
.mt-profile-card.rarity-SR  { border-color: #9b87f5; box-shadow: 0 0 24px rgba(155,135,245,0.3); }
.mt-profile-close {
  position: absolute; top: 10px; right: 14px; background: none; border: 0;
  color: #fff; font-size: 28px; cursor: pointer; z-index: 2;
}
.mt-profile-injury-banner {
  background: rgba(229,57,53,0.2); border: 1px solid rgba(229,57,53,0.6);
  color: #ef9a9a; text-align: center; padding: 6px; border-radius: 6px;
  font-weight: 700; margin-bottom: 12px;
}
.mt-profile-hero {
  display: flex; gap: 14px; align-items: center; margin-bottom: 14px;
}
.mt-profile-portrait-wrap {
  position: relative; flex-shrink: 0;
  background: linear-gradient(135deg, #2a1855, #0d1224);
  border-radius: 12px; padding: 8px;
}
.mt-profile-portrait {
  width: 120px; height: 150px;
  image-rendering: pixelated; display: block;
}
.mt-profile-rarity {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.7); padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 800;
}
.mt-profile-card.rarity-SSR .mt-profile-rarity { background: #f0c040; color: #000; }
.mt-profile-card.rarity-SR  .mt-profile-rarity { background: #9b87f5; color: #fff; }
.mt-profile-meta { flex: 1; min-width: 0; }
.mt-profile-name { font-size: 24px; font-weight: 900; }
.mt-profile-nick { font-size: 13px; opacity: 0.8; margin-bottom: 6px; }
.mt-profile-pos { font-size: 14px; color: #f0c040; }
.mt-profile-talent {
  display: inline-block; margin-top: 6px;
  background: rgba(240,192,64,0.15); border: 1px solid rgba(240,192,64,0.4);
  padding: 3px 8px; border-radius: 4px; font-size: 12px;
}

.mt-profile-radar { margin-bottom: 14px; }
.mt-radar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mt-radar-label { font-size: 12px; width: 36px; flex-shrink: 0; color: rgba(255,255,255,0.7); }
.mt-radar-bar {
  flex: 1; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;
}
.mt-radar-bar > div { height: 100%; border-radius: 4px; transition: width 0.5s; }
.mt-radar-val { font-size: 13px; font-weight: 800; width: 32px; text-align: right; }

.mt-profile-lore {
  background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px;
  margin-bottom: 14px;
}
.mt-profile-lore-title { font-size: 12px; color: #f0c040; margin-bottom: 4px; }
.mt-profile-lore-text { font-size: 13px; line-height: 1.6; opacity: 0.9; }

.mt-profile-actions { display: flex; gap: 8px; }
.mt-profile-btn {
  flex: 1; padding: 10px 8px; font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; border-radius: 8px; cursor: pointer; transition: all 0.15s;
}
.mt-profile-btn:hover { background: rgba(240,192,64,0.15); border-color: #f0c040; }

/* ─── 隊徽特效 ─── */
.mt-hub-team-crest {
  position: relative;
}
.mt-hub-team-crest::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, #f0c040, transparent 30%, transparent 60%, #f0c040);
  animation: mt-crest-rot 4s linear infinite;
  z-index: -1; opacity: 0.5;
}
@keyframes mt-crest-rot {
  to { transform: rotate(360deg); }
}
.mt-hub-team-crest svg {
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 8px rgba(240,192,64,0.3));
  animation: mt-crest-pulse 3s ease-in-out infinite;
}
@keyframes mt-crest-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(240,192,64,0.3)); }
  50%      { filter: drop-shadow(0 0 14px rgba(240,192,64,0.7)); }
}

/* ── 朋友 tab ── */
.mt-friends-tab { padding: 12px; }
.mt-friends-list { display: flex; flex-direction: column; gap: 6px; }
.mt-friend-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px;
  cursor: pointer;
}
.mt-friend-row:hover { background: rgba(255,255,255,0.08); }
.mt-friend-remove {
  background: rgba(229,57,53,0.15); border: 0;
  color: #ef9a9a; width: 26px; height: 26px;
  border-radius: 50%; font-size: 16px; cursor: pointer;
}
.mt-rank-friend-btn {
  background: rgba(76,175,80,0.2); border: 0;
  color: #4caf50; width: 24px; height: 24px; min-width: 24px;
  border-radius: 50%; font-size: 14px; font-weight: 800;
  cursor: pointer; margin-left: 4px;
}
.mt-rank-row { cursor: pointer; }
.mt-rank-row:hover { background: rgba(255,255,255,0.08); }

/* ── 看別人陣容 ── */
.mt-opp-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  text-align: left;
}
.mt-opp-crest { width: 56px; height: 56px; flex-shrink: 0; }
.mt-opp-crest svg { width: 100%; height: 100%; }
.mt-opp-name { font-size: 20px; font-weight: 900; }
.mt-opp-meta { font-size: 12px; opacity: 0.7; }
.mt-opp-radar { text-align: left; margin-bottom: 12px; }
.mt-opp-coach {
  background: rgba(240,192,64,0.1); padding: 6px 10px; border-radius: 6px;
  font-size: 13px; margin-bottom: 12px;
}
.mt-opp-players-title { font-size: 13px; color: #f0c040; margin-bottom: 8px; text-align: left; }
.mt-opp-players {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.mt-opp-player {
  background: rgba(255,255,255,0.04); border-radius: 6px; padding: 4px; text-align: center;
}
.mt-opp-player img {
  width: 100%; aspect-ratio: 4/5; image-rendering: pixelated; object-fit: contain;
}
.mt-opp-pname { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-opp-ppos { font-size: 9px; opacity: 0.7; }

/* ── 球員受傷 badge ── */
.mt-player-card.injured { opacity: 0.7; filter: grayscale(0.3); }
.mt-player-injury-badge {
  position: absolute; top: 4px; left: 4px;
  background: rgba(229,57,53,0.95); color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px;
  z-index: 2;
}