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

/* ───────── FAB 懸浮入口（圓形 icon + 下方文字標籤） ───────── */
.mt-fab {
  position: fixed;
  right: 16px;
  /* iOS Safari 底部 ~50px 是瀏覽器手勢區、按鈕要往上閃開 */
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  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;
  /* iOS Safari: 100vh 包含 URL bar 高度、會把內容擠到看不到。dvh = 動態視窗高度、
     URL bar 顯示時自動縮短。較舊瀏覽器 fallback 到 100vh。 */
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  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 */
  /* iOS Safari 底部 ~50px 是瀏覽器手勢區、安全區用 padding 處理 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.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-preview-wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 8px 0;
}
.mt-settings-preview-label {
  font-size: 10px;
  color: rgba(240,192,64,0.85);
  letter-spacing: 1.5px;
  font-weight: 800;
  margin-bottom: 6px;
  text-align: center;
}

/* 設定區塊：配色設定 + 旁邊即時預覽 */
.mt-settings-with-sprite {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.mt-settings-kit-config {
  flex: 1;
  min-width: 0;
}
.mt-settings-sprite-preview {
  flex-shrink: 0;
  width: 110px;
  position: sticky;
  top: 8px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid rgba(240,192,64,0.35);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mt-settings-sprite-box {
  background-repeat: no-repeat;
  background-position: 0 0;
  margin: 0 auto;
}
.mt-settings-sprite-preview .mt-settings-preview {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mt-settings-sprite-preview .mt-settings-preview svg {
  width: 100%;
  height: 100%;
}
@media (max-width: 480px) {
  .mt-settings-with-sprite { flex-direction: column-reverse; gap: 12px; }
  .mt-settings-sprite-preview { width: 100%; position: static; }
}

/* 隊長按鈕 active 樣式 */
.mt-profile-btn.mt-profile-btn-active {
  background: linear-gradient(135deg, #ffe680 0%, #f0c040 50%, #c08030 100%);
  color: #2a1505;
  border-color: #fff;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 3px 10px rgba(240,192,64,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
#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;
  position: relative;
}
/* SSR 自選券稀有 badge — 只在 ssr_select_tickets > 0 時顯示，疊在教練券格右上 */
.mt-hub-ssr-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: linear-gradient(180deg, #ffe680, #c08030);
  color: #2a1505;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1.5px solid #fff;
  box-shadow: 0 2px 6px rgba(240,192,64,0.6);
  letter-spacing: 0.5px;
  z-index: 2;
  animation: mt-ssr-badge-pulse 2s ease-in-out infinite;
  cursor: help;
}
@keyframes mt-ssr-badge-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(240,192,64,0.5); }
  50%      { box-shadow: 0 2px 14px rgba(240,192,64,1); }
}
.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;
  scrollbar-width: thin;        /* Firefox */
  scrollbar-color: rgba(240,192,64,0.5) transparent;
}
.mt-hub-tabs::-webkit-scrollbar { height: 3px; }
.mt-hub-tabs::-webkit-scrollbar-track { background: transparent; }
.mt-hub-tabs::-webkit-scrollbar-thumb {
  background: rgba(240,192,64,0.5);
  border-radius: 999px;
}
.mt-hub-tabs::-webkit-scrollbar-thumb:hover { background: rgba(240,192,64,0.8); }
.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;
  /* bottom padding 要包 iOS safe-area-inset、避免最後一顆按鈕被 home indicator 蓋住 */
  padding: 16px 20px calc(40px + env(safe-area-inset-bottom, 0px));
  -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;
  /* 不再 flex 置中 — 由 .mt-gacha-stage-frame 統一處理所有定位 */
}
/* 直版固定寬度容器：所有 gacha 元素的定位基準
   寬螢幕兩側自然剩黑底（overlay 背景）= letterbox */
.mt-gacha-stage-frame {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 460px;
  /* 內部 pack 靠 flex 置中、stage 用 inset:0 鋪滿 */
  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;
  /* 700px = 比 1200 更近、3D 旋轉視覺更明顯（不會像隔很遠看一塊翻牌）*/
  perspective: 700px;
  perspective-origin: 50% 60%;
  /* idle 時夾住內部 shine 光影、避免跑到包裝外 */
  overflow: hidden;
}
/* 拖曳 / 撕開時改 visible：flap 折起 / 飛走才不會被夾掉 */
.mt-gacha-pack.dragging .mt-gacha-pack-wrap,
.mt-gacha-pack.opening .mt-gacha-pack-wrap {
  overflow: visible;
}
.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;
  /* 背景留給 .mt-gacha-pack-top-fold（帶鋸齒 clip-path）— 這層保持透明、
     讓上方鋸齒熱封條的尖齒能透出深色背景，不會被同色 bg 蓋平 */
  background: transparent;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55));
}
/* 撕的那塊「單片紙」：以撕方向反側的底角為支點、組合 rotateX + rotateY 折起
   - rotateX 把整張紙往使用者方向翹（讓 z 軸折起肉眼看得出來、不是平面在轉）
   - rotateY 把撕的那側朝使用者臉折過去（+Z 出螢幕方向）
   - transform-origin 動態鏡像：dir=+1 底-左角、dir=-1 底-右角 */
.mt-gacha-pack-top-fold {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  transform-origin: calc(50% - var(--tear-dir, 0) * 50%) 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  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%);
  /* 鋸齒熱封邊：規律 zigzag（同 pack-bottom、5% x 步、20% depth）*/
  clip-path: polygon(
    0% 20%, 5% 0%, 10% 20%, 15% 0%, 20% 20%, 25% 0%, 30% 20%, 35% 0%,
    40% 20%, 45% 0%, 50% 20%, 55% 0%, 60% 20%, 65% 0%, 70% 20%, 75% 0%,
    80% 20%, 85% 0%, 90% 20%, 95% 0%, 100% 20%,
    100% 100%, 0% 100%
  );
}
/* 翻面後可見的紙張內側 */
.mt-gacha-pack-top-fold::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 200% at 50% 30%,
      rgba(0,0,0,0.35) 0%, transparent 60%),
    linear-gradient(180deg, #5a1810 0%, #3a0e08 100%);
  clip-path: polygon(
    0% 20%, 5% 0%, 10% 20%, 15% 0%, 20% 20%, 25% 0%, 30% 20%, 35% 0%,
    40% 20%, 45% 0%, 50% 20%, 55% 0%, 60% 20%, 65% 0%, 70% 20%, 75% 0%,
    80% 20%, 85% 0%, 90% 20%, 95% 0%, 100% 20%,
    100% 100%, 0% 100%
  );
  transform: rotateY(180deg);
  backface-visibility: hidden;
  pointer-events: none;
}
.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;
}
/* 整包橫掃光：被 wrap 的 overflow:hidden 夾在包裝內、不會跑出去 */
.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;
  animation: mt-pack-shine 2.6s ease-in-out infinite;
}
/* 拖曳 / 撕開時隱藏 shine，避免 overflow:visible 後光跑出去 */
.mt-gacha-pack.dragging .mt-gacha-pack-shine,
.mt-gacha-pack.opening .mt-gacha-pack-shine {
  display: none;
}

/* 撕線（金邊穿孔 + 立體浮雕、隨拖曳進度發光）*/
.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);
}

/* ── 即時拖曳撕開：fold + curl compound rotation = 真正在彎的紙 ── */
.mt-gacha-pack-top {
  transition: none;
  transform-origin: 50% 100%;
}
.mt-gacha-pack-top-fold {
  /* 拖曳時：
     0~80% 進度 → rotateX 翹起 + rotateY 朝撕方向折
     80%~100%  → 額外 translateX/Y + rotateZ 把紙整片朝左上或右上「飛出」

     fly-prog = max(0, progress * 5 - 4)：0~0.8 → 0、0.8~1.0 → 0~1 */
  transform:
    /* 80% 後才生效的飛出位移
       注：fly 方向跟 fold 的 dir 含義相反（fold dir=-1 = 拖右、但飛走要飛右 = +X 方向）
       所以 translateX / rotateZ 用 -dir 倍率 */
    translateX(calc(max(0, var(--tear-progress, 0) * 5 - 4) * var(--tear-dir, 0) * -90px))
    translateY(calc(max(0, var(--tear-progress, 0) * 5 - 4) * -130px))
    rotateZ(calc(max(0, var(--tear-progress, 0) * 5 - 4) * var(--tear-dir, 0) * -55deg))
    /* 一直作用：紙頂往使用者臉翹 */
    rotateX(calc(var(--tear-progress, 0) * -25deg))
    /* 一直作用：朝撕方向折（fold 方向 OK、不要動）*/
    rotateY(calc(var(--tear-dir, 0) * var(--tear-progress, 0) * 90deg));
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
  filter: brightness(calc(1 - var(--tear-progress, 0) * 0.12));
}
.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(翹起) + rotateY(朝玩家折) compound 動畫 */
.mt-gacha-pack.opening .mt-gacha-pack-top-fold {
  animation: mt-pack-tear-fold 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;
}

/* 撕開動畫（放開後 → 紙完全飛出畫面）：
   接 drag 末態（progress=1）的位置繼續飛遠、加 opacity 漸消 */
@keyframes mt-pack-tear-fold {
  0% {
    transform:
      translateX(calc(var(--tear-dir, 1) * -90px))
      translateY(-130px)
      rotateZ(calc(var(--tear-dir, 1) * -55deg))
      rotateX(-25deg)
      rotateY(calc(var(--tear-dir, 1) * 90deg));
    filter: brightness(0.88);
    opacity: 1;
  }
  50% {
    transform:
      translateX(calc(var(--tear-dir, 1) * -180px))
      translateY(-220px)
      rotateZ(calc(var(--tear-dir, 1) * -110deg))
      rotateX(-30deg)
      rotateY(calc(var(--tear-dir, 1) * 140deg));
    filter: brightness(0.75);
    opacity: 0.85;
  }
  100% {
    transform:
      translateX(calc(var(--tear-dir, 1) * -320px))
      translateY(-400px)
      rotateZ(calc(var(--tear-dir, 1) * -200deg))
      rotateX(-35deg)
      rotateY(calc(var(--tear-dir, 1) * 200deg));
    filter: brightness(0.6);
    opacity: 0;
  }
}
@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;
  top: calc(50% + 170px);   /* 卡片中心 ≈ 50% / 卡片底 ≈ +160px / 提示在卡底再 ~10px */
  bottom: auto;              /* override 之前 v2 的 bottom: 28px */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  display: flex; justify-content: center;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
  /* 改用 drop-shadow（跟著文字實際形狀 alpha）+ 自訂 keyframes
     避免 box-shadow 畫在元素 bounding box 的方框上 */
  animation: mt-flip-prompt-glow 1.2s ease-in-out infinite;
}
@keyframes mt-flip-prompt-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(240,192,64,0.35)); }
  50%      { filter: drop-shadow(0 0 12px rgba(240,192,64,0.85)); }
}
.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 光線爆發（多條放射光線） ─── */
/* 元素放大成容器 3 倍（inset: -100%）→ 300%×300%、旋轉時 corner 永遠在容器外
   .mt-gacha-overlay 有 overflow:hidden、不會破版 */
.mt-gacha-rays {
  position: absolute; inset: -100%;
  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;
  transform-origin: center;
}
@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); }
}

/* ─── 主舞台 ─── */
/* Stage 鋪滿 stage-frame、子元素以 frame 中心為定位基準（不是 viewport）*/
.mt-gacha-stage {
  position: absolute;
  inset: 0;
  padding: 20px;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  justify-items: center;
  align-items: center;
  gap: 16px;
}
.mt-gacha-stage[hidden] { display: none !important; }
.mt-gacha-stage > * { pointer-events: auto; }
.mt-gacha-stage > .mt-gacha-banner {
  grid-row: 1;
  align-self: start;
  margin: 0 !important;
  max-width: 100%;
  white-space: nowrap;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
/* cards-wrap：絕對置中於 stage-frame（= 卡包位置）、固定寬高不變 */
.mt-gacha-stage > .mt-gacha-cards-wrap {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 280px !important;        /* 固定寬度、stack/all-revealed 不再切換 */
  height: 320px !important;
  grid-row: unset;
  padding: 0;
  max-height: none;
  overflow: visible !important;   /* all-revealed grid 卡片溢出可見 */
}
.mt-gacha-stage > .mt-gacha-fans-summary {
  grid-row: 3;
  align-self: end;
  margin: 0 0 4px 0;
}
.mt-gacha-stage > .mt-gacha-rarity-hint {
  grid-row: 4;
  align-self: end;
  margin-bottom: 8px;
  white-space: nowrap;
}
.mt-gacha-stage > .mt-gacha-actions {
  grid-row: 5;
  align-self: end;
  margin-bottom: 20px;
  max-width: 100%;
  white-space: nowrap;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.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;
  display: flex; align-items: center; justify-content: center;
  /* 不再 overflow:auto（scrollbar 會跑出綠色長條干擾畫面）
     all-revealed grid 模式如果太多卡，靠 cards 自己 wrap 換行處理 */
}
.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;
  flex-shrink: 0;
  /* 飛入動畫改成 .mt-card-pending → transition 機制（見下方）— 不再用 animation */
}
/* 卡片數多時自動縮小 */
.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); }
}

/* 起始 = 螢幕 Z 軸上方（離玩家近）：稍微右下 + 放大 1.25x、
   transition 期間縮回 1.0x 落到牌頂位置、模擬從觀察者前方掉下去的透視深度 */
.mt-gacha-card3d.mt-card-pending {
  opacity: 0;
  transform: translate(40px, 40px) scale(1.25) rotateZ(0deg) !important;
}
.mt-cards-fly-out .mt-gacha-card3d {
  transition: opacity 0.7s ease-out,
              transform 1.2s cubic-bezier(0.34, 1.5, 0.5, 1);
  cursor: pointer;
}

/* ─── 多抽 stack 模式：10 張疊一疊、只有最上面可點翻
   stack 模式不縮小、卡片跟 1 抽一樣大 200x300、看得清角色 portrait */
.mt-gacha-cards[data-mode="stack"] {
  position: relative;
  width: 200px;
  height: 300px;
}
/* stack 模式覆蓋舊的 auto-resize 規則（讓 7~10 連也用 200x300）*/
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d { width: 200px !important; height: 300px !important; }

.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d {
  position: absolute;
  top: 0; left: 0;
}
/* 每張卡的 stack 偏移（z-index 與位置回到原版：idx 0 = 最頂/最淺 Z、idx 9 = 最底）
   只在進場順序上做手腳：idx 9 先飛入墊底 → idx 8、7... 依序蓋上 → idx 0 最後飛入落在最頂 */
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d[data-stack-idx="0"] { z-index: 20; transform: translate(0px,  0px)  rotateZ(0deg); }
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d[data-stack-idx="1"] { z-index: 19; transform: translate(3px,  3px)  rotateZ(-1.5deg); }
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d[data-stack-idx="2"] { z-index: 18; transform: translate(-3px, 6px)  rotateZ(1.2deg); }
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d[data-stack-idx="3"] { z-index: 17; transform: translate(4px,  9px)  rotateZ(-2deg); }
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d[data-stack-idx="4"] { z-index: 16; transform: translate(-2px, 12px) rotateZ(0.8deg); }
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d[data-stack-idx="5"] { z-index: 15; transform: translate(2px,  15px) rotateZ(-1deg); }
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d[data-stack-idx="6"] { z-index: 14; transform: translate(-4px, 18px) rotateZ(1.5deg); }
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d[data-stack-idx="7"] { z-index: 13; transform: translate(3px,  21px) rotateZ(-1.2deg); }
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d[data-stack-idx="8"] { z-index: 12; transform: translate(-3px, 24px) rotateZ(2deg); }
.mt-gacha-cards[data-mode="stack"] .mt-gacha-card3d[data-stack-idx="9"] { z-index: 11; transform: translate(4px,  27px) rotateZ(-1.8deg); }

/* 滑掉：翻過後再點 → 飛走 */
.mt-gacha-card3d.slid-off {
  animation: mt-card-slid-off 0.6s cubic-bezier(0.34, 1.1, 0.64, 1) forwards;
  pointer-events: none;
}
@keyframes mt-card-slid-off {
  0%   { opacity: 1; }
  100% { opacity: 0; transform: translate(140%, -40%) rotateZ(20deg) scale(0.85); }
}

/* 全部翻完 → grid layout 展示所有卡（cards-wrap 寬度不變、cards 內溢出可見）*/
.mt-gacha-cards.all-revealed {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 420px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  justify-items: center;
}
.mt-gacha-cards.all-revealed .mt-gacha-card3d {
  position: relative !important;
  top: auto !important; left: auto !important;
  transform: none !important;
  width: 100% !important;             /* 由 grid 4-col 決定（約 100px）*/
  height: auto !important;
  aspect-ratio: 2/3;
  animation: none !important;
  opacity: 1 !important;
  margin: 0;
  cursor: default;
  transition: transform 0.3s;
}
.mt-gacha-cards.all-revealed .mt-gacha-card3d:hover {
  transform: translateY(-4px) !important;
}

/* grid view 內 portrait + 文字小尺寸覆蓋（4 col × 約 100px 卡寬）*/
.mt-gacha-cards.all-revealed .mt-gacha-card3d-back,
.mt-gacha-cards.all-revealed .mt-gacha-card3d-front {
  padding: 6px 4px !important;
}
.mt-gacha-cards.all-revealed .mt-gacha-front-portrait {
  width: 70px !important;
  height: 70px !important;
  margin: 2px auto 3px !important;
  border-width: 2px !important;
}
.mt-gacha-cards.all-revealed .mt-gacha-front-portrait-pos {
  width: 18px !important;
  height: 18px !important;
  font-size: 10px !important;
}
.mt-gacha-cards.all-revealed .mt-gacha-front-rarity-badge { font-size: 8px !important; padding: 1px 4px !important; }
.mt-gacha-cards.all-revealed .mt-gacha-front-stars { font-size: 9px !important; }
.mt-gacha-cards.all-revealed .mt-gacha-front-name { font-size: 10px !important; margin-top: 1px !important; }
.mt-gacha-cards.all-revealed .mt-gacha-front-nick { font-size: 8px !important; }
.mt-gacha-cards.all-revealed .mt-gacha-front-pos { font-size: 8.5px !important; }
.mt-gacha-cards.all-revealed .mt-gacha-front-stats { font-size: 7.5px !important; gap: 0 3px !important; margin-top: 1px !important; }
.mt-gacha-cards.all-revealed .mt-gacha-front-stats > div { padding: 0 !important; }
.mt-gacha-cards.all-revealed .mt-gacha-talent,
.mt-gacha-cards.all-revealed .mt-gacha-dup,
.mt-gacha-cards.all-revealed .mt-gacha-pity { font-size: 7px !important; padding: 0 3px !important; margin-top: 1px !important; }
.mt-gacha-cards.all-revealed .mt-gacha-back-emblem { font-size: 44px !important; }

/* 底部「一鍵翻全部」按鈕 */
.mt-gacha-flip-all-btn {
  position: fixed;
  bottom: 86px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.65);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #ffe680;
  font-size: 13px;
  font-weight: 800;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.5px;
  z-index: 22;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.mt-gacha-flip-all-btn:hover {
  background: rgba(240,192,64,0.25);
  border-color: #ffe680;
}
.mt-gacha-flip-all-btn[hidden] { display: none !important; }

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

/* 球員頭像 — LPC pixel art，稀有度漸層 bg、頭像框拉大到 ~80% 卡寬 */
.mt-gacha-front-portrait {
  position: relative;
  width: 160px; height: 160px;
  margin: 4px auto 6px;
  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: 2px; right: 2px;
  width: 34px; height: 34px;
  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: 16px;
}
.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; }

/* 本次所有 SSR 的球迷加總（顯示在「SSR 召喚成功！」上方） */
.mt-gacha-fans-summary[hidden] { display: none !important; }  /* [hidden] 優先：避免空殼一直顯示 */
.mt-gacha-fans-summary {
  display: inline-block;
  margin: 8px auto 0;
  padding: 6px 16px;
  background: linear-gradient(180deg, rgba(240,192,64,0.92), rgba(220,160,40,0.98));
  color: #1a0a00;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
  border: 1px solid rgba(240,192,64,0.7);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 0 14px rgba(240,192,64,0.5);
  white-space: nowrap;
  align-self: center;
  animation: mt-gacha-fans-summary-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mt-gacha-fans-summary b { color: #c8420e; font-size: 15px; margin: 0 2px; }
.mt-gacha-fans-summary-total { color: rgba(26,10,0,0.65); font-size: 11px; font-weight: 600; }
@keyframes mt-gacha-fans-summary-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 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: 12px;
}
.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: 96vh; overflow-y: auto;
  padding: 28px 18px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 內容垂直置中（pre-match / 短結算時）*/
}
/* 比賽 sim 進行時：拉滿可用高度、保持垂直置中 */
.mt-match-stage:has(.mt-match-sim) {
  min-height: 90vh;
  justify-content: center;
}
.mt-match-sim {
  padding: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.mt-match-sim #mt-match-sim-host {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* 比賽 modal 內：放寬 canvas 上限（外部 components.css 的預設 380px 在這裡撐大）*/
.mt-match-sim .msim-canvas {
  max-width: 100% !important;
}

/* ─── 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-crest-svg { font-size: 0; }  /* SVG 容器：取消 emoji 字體高度 */
.mt-pre-match-crest-svg svg {
  width: 64px;
  height: 64px;
  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;
}

/* 球迷加成 delta（顯示 "原 X ↓ -Y%"、解釋為什麼比按鈕的數字低/高）*/
.mt-pre-match-fan-delta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  animation: mt-pre-match-fan-delta-pop 0.5s cubic-bezier(0.34, 1.6, 0.64, 1) both;
}
.mt-pre-match-fan-delta.is-down {
  background: rgba(229, 57, 53, 0.18);
  border: 1px solid rgba(229, 57, 53, 0.5);
  color: #ef9a9a;
}
.mt-pre-match-fan-delta.is-up {
  background: rgba(76, 175, 80, 0.18);
  border: 1px solid rgba(76, 175, 80, 0.5);
  color: #a5d6a7;
}
.mt-pre-match-fan-delta-raw {
  opacity: 0.85;
}
.mt-pre-match-fan-delta-arrow {
  font-size: 11px;
  animation: mt-pre-match-fan-arrow-bounce 0.8s ease-in-out infinite;
}
.mt-pre-match-fan-delta-pct {
  font-weight: 800;
}
@keyframes mt-pre-match-fan-delta-pop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes mt-pre-match-fan-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
.mt-pre-match-fan-delta.is-up .mt-pre-match-fan-delta-arrow {
  animation-name: mt-pre-match-fan-arrow-bounce-up;
}
@keyframes mt-pre-match-fan-arrow-bounce-up {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.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-pre-match-countdown {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0 8px;
  gap: 4px;
  min-height: 70px;
}
.mt-pre-match-countdown-num {
  font-size: 48px;
  font-weight: 900;
  color: #ffe680;
  text-shadow: 0 0 24px rgba(255,230,128,0.85), 0 4px 8px rgba(0,0,0,0.6);
  line-height: 1;
  font-family: 'Impact','Arial Black',sans-serif;
  letter-spacing: 2px;
}
.mt-pre-match-countdown-num.mt-cd-pulse {
  animation: mt-cd-pulse 0.6s ease-out;
}
.mt-pre-match-countdown-num.mt-cd-go {
  color: #ff5252;
  text-shadow: 0 0 28px rgba(255,82,82,0.9), 0 4px 8px rgba(0,0,0,0.6);
  font-size: 56px;
  letter-spacing: 4px;
}
@keyframes mt-cd-pulse {
  0%   { transform: scale(0.5); opacity: 0; }
  50%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.mt-pre-match-countdown-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 4px;
  font-weight: 600;
}

/* （.mt-match-sim 主規則合併到上方 modal 區） */

/* ══════════════════════════════════════════════
   ✨ 教練召喚儀式（畫圓 mini-game）
   ══════════════════════════════════════════════ */
.coach-ritual-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(40,20,60,0.92) 0%, rgba(5,5,15,0.96) 70%);
  backdrop-filter: blur(8px);
  z-index: 12020;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
  padding: 16px;
}
.coach-ritual-overlay.open { opacity: 1; }
.coach-ritual-stage {
  background: linear-gradient(180deg, rgba(30,15,50,0.95), rgba(15,5,30,0.95));
  border: 2px solid rgba(240,192,64,0.6);
  border-radius: 16px;
  padding: 16px 18px 14px;
  width: 100%;
  max-width: 380px;
  position: relative;
  box-shadow:
    0 0 40px rgba(240,192,64,0.3),
    0 0 80px rgba(155,135,245,0.18),
    0 10px 30px rgba(0,0,0,0.7);
  text-align: center;
}
.coach-ritual-close {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.18);
  width: 28px; height: 28px;
  border-radius: 50%;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  padding: 0;
}
.coach-ritual-close:hover { background: rgba(255,255,255,0.15); color: #fff; }
.coach-ritual-title {
  font-size: 18px;
  font-weight: 900;
  color: #ffe680;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(255,230,128,0.7);
  margin-bottom: 4px;
}
.coach-ritual-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.coach-ritual-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0 auto 8px;
  max-width: 320px;
}
.coach-ritual-canvas {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: radial-gradient(ellipse at center, rgba(20,10,40,0.4), rgba(5,2,15,0.2));
  cursor: crosshair;
  touch-action: none;   /* 防止移動瀏覽器滾動 */
  display: block;
}
.coach-ritual-score {
  position: absolute;
  top: 6px; left: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.55);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  pointer-events: none;
}
.coach-ritual-score-num {
  font-weight: 900;
  font-family: 'Impact','Arial Black',sans-serif;
  letter-spacing: 1px;
  margin-left: 2px;
}
.coach-ritual-score-num.is-low { color: #ef9a9a; }
.coach-ritual-score-num.is-r   { color: #ffe680; }
.coach-ritual-score-num.is-sr  { color: #b894ff; text-shadow: 0 0 8px rgba(155,135,245,0.7); }
.coach-ritual-score-num.is-ssr { color: #ffd54a; text-shadow: 0 0 10px rgba(255,213,74,0.9); }
.coach-ritual-timer {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.55);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  pointer-events: none;
}
.coach-ritual-timer-num {
  font-weight: 900;
  color: #f0c040;
  margin: 0 2px;
}
.coach-ritual-rules {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}
.coach-ritual-rules-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.coach-ritual-rules-pill.rule-r   { background: rgba(255,230,128,0.18); color: #ffe680; border: 1px solid rgba(255,230,128,0.4); }
.coach-ritual-rules-pill.rule-sr  { background: rgba(155,135,245,0.2);  color: #c4b3ff; border: 1px solid rgba(155,135,245,0.5); }
.coach-ritual-rules-pill.rule-ssr { background: rgba(255,213,74,0.22);  color: #ffd54a; border: 1px solid rgba(255,213,74,0.55); animation: coach-ritual-pulse 1.8s ease-in-out infinite; }
@keyframes coach-ritual-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,213,74,0); }
  50%      { box-shadow: 0 0 14px rgba(255,213,74,0.7); }
}
/* 連環圓進度（10 連專用）*/
.coach-ritual-progress {
  margin: 6px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.coach-ritual-progress-label {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
  font-weight: 800;
}
.coach-ritual-progress-num {
  color: #ffd54a;
  font-size: 16px;
  font-weight: 900;
  font-family: 'Impact','Arial Black',sans-serif;
  margin: 0 2px;
}
.coach-ritual-progress-pills {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 18px;
}
.coach-ritual-progress-pill {
  font-size: 10px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
  animation: coach-pill-pop 0.4s cubic-bezier(0.34, 1.6, 0.64, 1);
}
.coach-ritual-progress-pill.is-r    { background: rgba(255,230,128,0.22); color: #ffe680; border: 1px solid rgba(255,230,128,0.45); }
.coach-ritual-progress-pill.is-sr   { background: rgba(155,135,245,0.28); color: #c4b3ff; border: 1px solid rgba(155,135,245,0.55); }
.coach-ritual-progress-pill.is-ssr  { background: rgba(255,213,74,0.35);  color: #ffd54a; border: 1px solid rgba(255,213,74,0.7);
  box-shadow: 0 0 10px rgba(255,213,74,0.65); }
.coach-ritual-progress-pill.is-fail { background: rgba(229,57,53,0.25);   color: #ef9a9a; border: 1px solid rgba(229,57,53,0.45); }
@keyframes coach-pill-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.coach-ritual-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.5px;
  min-height: 18px;
  transition: color 0.2s;
}
.coach-ritual-hint.is-warn {
  color: #ef9a9a;
  font-weight: 800;
}
.coach-ritual-hint.is-success {
  color: #ffd54a;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255,213,74,0.6);
}

/* ─── 比賽結果 splash 動畫（覆蓋整個 modal stage、跟 GOAL 動畫同風格） ─── */
.mt-result-splash {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* z-index 必須 > .msim-fulltime-banner (z-index 90)、不然金邊「全場結束」會穿透 */
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
  animation: mt-result-bg-in 0.4s ease-out forwards;
}
@keyframes mt-result-bg-in {
  from { background: rgba(0,0,0,0); }
  to   { background: rgba(0,0,0,0.78); }
}
.mt-result-splash.mt-result-W { box-shadow: inset 0 0 80px rgba(76,175,80,0.45); }
.mt-result-splash.mt-result-D { box-shadow: inset 0 0 80px rgba(255,213,74,0.4); }
.mt-result-splash.mt-result-L { box-shadow: inset 0 0 80px rgba(229,57,53,0.45); }
.mt-result-splash::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15) 0%, transparent 60%);
  animation: mt-result-rays-spin 8s linear infinite;
}
/* inset: -100% → 300% × 300%、旋轉時 corner 永遠在 splash 容器外、不露邊 */
.mt-result-splash::after {
  content: '';
  position: absolute; inset: -100%;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,255,255,0.1) 0deg 6deg,
      transparent 6deg 18deg);
  opacity: 0;
  animation: mt-result-rays-in 0.6s ease-out 0.2s forwards, mt-result-rays-spin 12s linear infinite;
  transform-origin: center;
}
@keyframes mt-result-rays-in   { from { opacity: 0; } to { opacity: 0.6; } }
@keyframes mt-result-rays-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.mt-result-splash-text {
  position: relative; z-index: 2;
  font-size: 72px;
  font-weight: 900;
  letter-spacing: 14px;
  font-style: italic;
  font-family: 'Impact','Arial Black',sans-serif;
  text-shadow: 0 4px 0 rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.8);
  transform: scale(0) rotate(-15deg);
  opacity: 0;
  animation: mt-result-text-pop 0.55s cubic-bezier(0.34, 1.8, 0.64, 1) 0.15s forwards,
             mt-result-text-shine 1.6s ease-in-out 0.7s infinite;
}
.mt-result-splash.mt-result-W .mt-result-splash-text {
  color: #ffe680;
  text-shadow: 0 0 20px rgba(255,235,128,0.9), 0 4px 0 #2e7d32, 0 8px 24px rgba(0,0,0,0.8);
}
.mt-result-splash.mt-result-D .mt-result-splash-text {
  color: #ffd54a;
  text-shadow: 0 0 16px rgba(255,213,74,0.75), 0 4px 0 #8d6708, 0 8px 24px rgba(0,0,0,0.8);
}
.mt-result-splash.mt-result-L .mt-result-splash-text {
  color: #ef9a9a;
  text-shadow: 0 0 18px rgba(229,57,53,0.7), 0 4px 0 #5e0a14, 0 8px 24px rgba(0,0,0,0.8);
}
@keyframes mt-result-text-pop {
  0%   { transform: scale(0)   rotate(-15deg); opacity: 0; }
  55%  { transform: scale(1.3) rotate(8deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);   opacity: 1; }
}
@keyframes mt-result-text-shine {
  0%, 100% { filter: brightness(1)   drop-shadow(0 0 8px rgba(255,255,255,0.4)); }
  50%      { filter: brightness(1.2) drop-shadow(0 0 18px rgba(255,255,255,0.7)); }
}

.mt-result-splash-score {
  position: relative; z-index: 2;
  margin-top: 18px;
  font-size: 56px;
  font-weight: 900;
  color: #fff;
  font-family: 'Impact','Arial Black',sans-serif;
  letter-spacing: 6px;
  opacity: 0;
  transform: translateY(20px);
  animation: mt-result-score-in 0.5s ease-out 0.6s forwards;
  text-shadow: 0 4px 0 rgba(0,0,0,0.5), 0 6px 18px rgba(0,0,0,0.6);
}
@keyframes mt-result-score-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mt-result-splash-sub {
  position: relative; z-index: 2;
  margin-top: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 4px;
  opacity: 0;
  animation: mt-result-score-in 0.4s ease-out 1.1s forwards;
}
.mt-result-splash.exit {
  animation: mt-result-bg-out 0.4s ease-in forwards;
}
@keyframes mt-result-bg-out {
  from { background: rgba(0,0,0,0.78); opacity: 1; }
  to   { background: rgba(0,0,0,0);    opacity: 0; }
}

/* ─── 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-mode-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.4);
  padding: 4px;
  border-radius: 10px;
}
.mt-rank-mode-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.5px;
}
.mt-rank-mode-tab:hover { color: rgba(255,255,255,0.85); }
.mt-rank-mode-tab.active {
  background: linear-gradient(180deg, #f0c040, #c08030);
  color: #2a1505;
  box-shadow: 0 2px 6px rgba(240,192,64,0.45), inset 0 1px 0 rgba(255,255,255,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.mt-rank-pt.mt-rank-elo {
  color: #ffd54a;
  font-size: 18px;
  text-shadow: 0 0 8px rgba(255,213,74,0.45);
}
.mt-rank-pt.mt-rank-elo span { color: rgba(255,213,74,0.65); font-size: 10px; }
.mt-rank-list { display: flex; flex-direction: column; gap: 6px; }

/* ─── 🎮 紀錄 tab ─── */
.mt-records-tab { padding: 12px; }
.mt-records-hint {
  font-size: 11px; opacity: 0.65; padding: 0 4px 8px; line-height: 1.4;
}
.mt-records-list { display: flex; flex-direction: column; gap: 6px; }

/* 個人紀錄 row（對手 + 結果 + 操作 一行）*/
.mt-record-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mt-record-row:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); }
.mt-record-row.record-win  { border-left-color: #4caf50; }
.mt-record-row.record-loss { border-left-color: #ef5350; }
.mt-record-row.record-draw { border-left-color: #ffd54a; }
.mt-record-crest {
  flex: 0 0 36px; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.mt-record-crest svg { width: 100%; height: 100%; }
.mt-record-info { flex: 1; min-width: 0; }
.mt-record-top {
  display: flex; align-items: center; gap: 6px; font-size: 13px;
  margin-bottom: 2px;
}
.mt-record-opp-name {
  font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 140px;
}
.mt-record-attack-tag {
  font-size: 9px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65); font-weight: 700;
  letter-spacing: 0.3px;
}
.mt-record-mid {
  display: flex; gap: 8px; align-items: center; font-size: 12px;
}
.mt-record-result {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; font-weight: 900;
}
.mt-record-result-win  { background: rgba(76,175,80,0.25);  color: #b9e8b3; border: 1px solid rgba(76,175,80,0.6); }
.mt-record-result-loss { background: rgba(239,83,80,0.25);  color: #ef9a9a; border: 1px solid rgba(239,83,80,0.6); }
.mt-record-result-draw { background: rgba(255,213,79,0.25); color: #ffe082; border: 1px solid rgba(255,213,79,0.6); }
.mt-record-score { font-weight: 800; color: #f0c040; letter-spacing: 0.5px; }
.mt-record-elo-delta {
  font-size: 11px; font-weight: 800;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
}
.mt-record-elo-delta.up   { background: rgba(76,175,80,0.18);  color: #b9e8b3; border: 1px solid rgba(76,175,80,0.5); }
.mt-record-elo-delta.down { background: rgba(239,83,80,0.18);  color: #ef9a9a; border: 1px solid rgba(239,83,80,0.5); }
.mt-record-time { color: rgba(255,255,255,0.5); font-size: 11px; margin-left: auto; }
.mt-record-actions { display: flex; gap: 4px; align-items: center; }
.mt-record-revenge-btn {
  background: linear-gradient(180deg, #d84747, #a02020);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; padding: 4px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 800;
  cursor: pointer; letter-spacing: 0.3px;
  box-shadow: 0 2px 4px rgba(216,71,71,0.45);
  transition: transform 0.1s, filter 0.1s;
}
.mt-record-revenge-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.mt-record-revenge-btn:disabled { opacity: 0.5; cursor: wait; }
.mt-record-detail-btn {
  background: rgba(120,170,255,0.18);
  border: 1px solid rgba(120,170,255,0.4);
  color: #cfe3ff; padding: 4px 8px; border-radius: 6px;
  font-size: 14px; cursor: pointer;
}
.mt-record-detail-btn:hover { background: rgba(120,170,255,0.3); }

/* 巔峰紀錄 row（雙隊 vs 對戰）*/
.mt-top-record-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  cursor: pointer;
}
.mt-top-record-side {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0;
}
.mt-top-record-name {
  font-size: 10px; font-weight: 700; color: #fff;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.mt-top-record-mid {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 80px;
}
.mt-top-record-score {
  font-size: 16px; font-weight: 900; color: #ffd54a;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.mt-top-record-score span:first-child { color: #b9e8b3; }
.mt-top-record-score span:last-child { color: #ef9a9a; }

/* ─── 戰報 modal ─── */
.mt-record-detail-overlay {}
.mt-record-detail-card {
  max-width: 420px;
  padding: 24px 20px 20px;
}
.mt-record-detail-title {
  text-align: center; font-size: 18px; font-weight: 900;
  color: #f0c040; margin-bottom: 16px;
  letter-spacing: 1px;
}
.mt-record-detail-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px; align-items: center;
  margin-bottom: 16px;
}
.mt-record-detail-side {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.mt-record-detail-crest {
  width: 56px; height: 56px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5));
}
.mt-record-detail-crest svg { width: 100%; height: 100%; }
.mt-record-detail-name {
  font-size: 12px; font-weight: 700; color: #fff;
  text-align: center; max-width: 110px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mt-record-detail-mid {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mt-record-detail-score {
  display: flex; align-items: center; gap: 4px;
  font-size: 28px; font-weight: 900; color: #ffd54a;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.mt-record-detail-dash { color: rgba(255,255,255,0.4); }
.mt-record-detail-result {
  font-size: 13px; font-weight: 900;
  padding: 2px 12px; border-radius: 999px;
}
.mt-record-detail-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.55);
  padding: 8px 4px; border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 14px;
}
.mt-record-detail-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.mt-record-replay-btn {
  background: linear-gradient(180deg, #4ba3ff, #1565c0);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff; padding: 10px; border-radius: 8px;
  font-size: 14px; font-weight: 800; cursor: pointer;
  box-shadow: 0 3px 8px rgba(75,163,255,0.4);
  transition: transform 0.1s, filter 0.1s;
}
.mt-record-replay-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.mt-record-detail-revenge { padding: 10px; font-size: 13px; }
.mt-record-no-replay {
  text-align: center; padding: 10px;
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.04);
  border-radius: 6px; font-size: 12px;
}
.mt-record-detail-close {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; padding: 8px; border-radius: 8px;
  cursor: pointer; font-size: 13px;
}

/* 回放 overlay：要疊在戰報 modal（z=12002）上、否則玩家看不到回放開始 */
.mt-replay-overlay { z-index: 12500 !important; }
.mt-replay-overlay .mt-replay-banner {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(75,163,255,0.85);
  color: #fff; padding: 2px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 900; letter-spacing: 1px;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.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-tier-label {
  font-size: 10px; font-weight: 800;
  color: #cdbfff;
  background: rgba(155,135,245,0.15);
  border: 1px solid rgba(155,135,245,0.4);
  padding: 1px 6px;
  border-radius: 999px;
  display: inline-block;
  margin-bottom: 2px;
  letter-spacing: 0.3px;
}
.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; }

/* PvP 對手 3 選 1 modal */
.mt-pvp-choice-overlay {
  position: fixed; inset: 0; z-index: 13000;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; transition: opacity 0.2s ease;
}
.mt-pvp-choice-overlay.open { opacity: 1; }
.mt-pvp-choice-card {
  background: linear-gradient(180deg, #1a1a2e 0%, #0d1224 100%);
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 14px;
  padding: 22px 18px 18px;
  max-width: 460px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  position: relative; color: #fff;
}
.mt-pvp-choice-close {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,255,255,0.08); border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 18px; cursor: pointer;
}
.mt-pvp-choice-title {
  font-size: 20px; font-weight: 800; text-align: center; margin-bottom: 6px;
  color: #f0c040;
}
.mt-pvp-choice-sub {
  text-align: center; font-size: 12px; opacity: 0.7; margin-bottom: 14px;
}
.mt-pvp-choice-list {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px;
}
.mt-pvp-choice-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left; cursor: pointer;
  color: #fff;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  position: relative;
  display: flex; align-items: center; gap: 12px;
}
.mt-pvp-choice-crest {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.mt-pvp-choice-crest svg {
  width: 100%; height: 100%;
}
.mt-pvp-choice-info { flex: 1; min-width: 0; }
.mt-pvp-choice-btn:hover {
  background: rgba(240,192,64,0.10);
  border-color: rgba(240,192,64,0.5);
  transform: translateY(-1px);
}
.mt-pvp-choice-btn.is-harder { border-left: 3px solid #ef5350; }
.mt-pvp-choice-btn.is-easier { border-left: 3px solid #4caf50; }
.mt-pvp-choice-btn.is-fair { border-left: 3px solid #ffd54f; }
.mt-pvp-choice-name { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.mt-pvp-choice-meta { font-size: 12px; opacity: 0.85; margin-bottom: 4px; }
.mt-pvp-choice-meta b { color: #f0c040; }
.mt-pvp-choice-diff { color: #aab; font-weight: 600; }
.mt-pvp-choice-radar { font-size: 11px; opacity: 0.7; letter-spacing: 0.3px; }
.mt-pvp-choice-tag {
  position: absolute; top: 10px; right: 12px;
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.10);
}
.mt-pvp-choice-btn.is-harder .mt-pvp-choice-tag { background: rgba(239,83,80,0.15); color: #ef9a9a; }
.mt-pvp-choice-btn.is-easier .mt-pvp-choice-tag { background: rgba(76,175,80,0.15); color: #b9e8b3; }
.mt-pvp-choice-btn.is-fair .mt-pvp-choice-tag { background: rgba(255,213,79,0.15); color: #ffd54f; }
.mt-pvp-choice-actions {
  display: flex; gap: 10px; justify-content: center; margin-top: 10px;
}
.mt-pvp-choice-refresh,
.mt-pvp-choice-cancel {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 8px 20px; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 700;
  transition: background 0.15s;
}
.mt-pvp-choice-refresh {
  background: rgba(120,180,240,0.18);
  border-color: rgba(120,180,240,0.45);
  color: #cfe3ff;
}
.mt-pvp-choice-refresh:hover { background: rgba(120,180,240,0.32); }
.mt-pvp-choice-refresh:disabled { opacity: 0.5; cursor: wait; }
.mt-pvp-choice-cancel:hover { background: rgba(255,255,255,0.15); }

/* 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);
}
/* 雲朵：用 SVG 平滑剪影（HTML 結構 .mt-home-cloud > svg）
   v2 不再用舊的 ::before / ::after 矩形堆疊 */
.mt-home-cloud {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
  background: none;
  border: 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: none; }
.mt-home-cloud svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mt-home-cloud-1 { top: 10%; left: -20%; width: 70px; height: 32px; animation-duration: 110s, 7s; }
.mt-home-cloud-2 { top: 32%; left: -10%; width: 52px; height: 26px; animation-duration: 85s, 5s;  animation-delay: -28s, -2s; }
.mt-home-cloud-3 { top: 54%; left: -30%; width: 90px; height: 38px; 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%;
}

/* 球場等級裝飾 — 看台 / 聚光燈 / 旗桿 / 球迷
   注意：以下規則保持跟 my-team.css 一致、不再「窄一條」+「飄空中」
   v2 之前的精簡版會把 my-team.css 的階梯紋看台與長桿聚光燈蓋掉 */
.mt-home-stand {
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 65%;
  background:
    repeating-linear-gradient(180deg,
      #6a4a30 0 11px,
      #4a3020 11px 13px,
      #2a1408 13px 14px),
    linear-gradient(180deg, #5a4030 0%, #3a2410 100%);
  border: 2px solid #1a1a2e;
  border-bottom: 0;
  box-shadow:
    inset 5px 0 0 #f5edc8,
    inset 7px 0 0 #1a1a2e,
    inset -5px 0 0 #f5edc8,
    inset -7px 0 0 #1a1a2e;
  z-index: 1;
}
.mt-home-stand-l { left: -82px; }
.mt-home-stand-r { right: -82px; }
.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);
  z-index: 2;
}
.mt-home-stand::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 9px; height: 1.5px;
  background: #f0e8c0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
  z-index: 2;
}
/* Lv 6+ 雙層看台 */
.mt-home-distance[data-stadium-level="6"]  .mt-home-stand,
.mt-home-distance[data-stadium-level="7"]  .mt-home-stand,
.mt-home-distance[data-stadium-level="8"]  .mt-home-stand,
.mt-home-distance[data-stadium-level="9"]  .mt-home-stand,
.mt-home-distance[data-stadium-level="10"] .mt-home-stand {
  width: 100px;
  height: 85%;
}
.mt-home-distance[data-stadium-level="6"]  .mt-home-stand-l,
.mt-home-distance[data-stadium-level="7"]  .mt-home-stand-l,
.mt-home-distance[data-stadium-level="8"]  .mt-home-stand-l,
.mt-home-distance[data-stadium-level="9"]  .mt-home-stand-l,
.mt-home-distance[data-stadium-level="10"] .mt-home-stand-l { left: -102px; }
.mt-home-distance[data-stadium-level="6"]  .mt-home-stand-r,
.mt-home-distance[data-stadium-level="7"]  .mt-home-stand-r,
.mt-home-distance[data-stadium-level="8"]  .mt-home-stand-r,
.mt-home-distance[data-stadium-level="9"]  .mt-home-stand-r,
.mt-home-distance[data-stadium-level="10"] .mt-home-stand-r { right: -102px; }

.mt-home-floodlight {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: calc(100% + 25px);
  max-height: min(200px, 30vh);
  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;
}
.mt-home-distance[data-stadium-level="8"] .mt-home-floodlight,
.mt-home-distance[data-stadium-level="9"] .mt-home-floodlight,
.mt-home-distance[data-stadium-level="10"] .mt-home-floodlight {
  height: calc(100% + 30px);
  max-height: min(220px, 33vh);
}
@keyframes mt-floodlight-flicker {
  0%, 95%, 100% { opacity: 1; }
  97% { opacity: 0.6; }
}

/* Lv 7+ 屋頂旗子（冠軍球場感）— 旗桿短、插在屋頂兩側角落 */
.mt-home-flag {
  position: absolute;
  top: -22px;
  width: 2px; height: 22px;
  background: #4a3018;
  z-index: 3;
}
.mt-home-flag-l { left: 8px; }
.mt-home-flag-r { right: 8px; }
/* 三角旗（pennant 感）：左旗右指、右旗左指 */
.mt-home-flag::after {
  content: ''; position: absolute;
  top: 1px;
  width: 11px; height: 7px;
  background: linear-gradient(135deg, #e53935 0%, #f0c040 100%);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
  animation: mt-flag-wave 1.8s ease-in-out infinite;
  transform-origin: left center;
}
.mt-home-flag-l::after { left: 2px;  clip-path: polygon(0 0, 100% 50%, 0 100%); }
.mt-home-flag-r::after { right: 2px; clip-path: polygon(100% 0, 0 50%, 100% 100%); transform-origin: right center; }
@keyframes mt-flag-wave {
  0%, 100% { transform: skewX(0deg)  scaleX(1); }
  50%      { transform: skewX(-10deg) scaleX(0.92); }
}

/* Lv 10：黃金球場、旗改純紅冠軍旗 */
.mt-home-distance[data-stadium-level="10"] .mt-home-flag::after {
  background: linear-gradient(135deg, #c0392b 0%, #8b1f15 100%);
}

/* 球場等級 → 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: #9bc8ff; }   /* 淺藍 — 跟 portrait 藍光暈一致 */
.mt-home-name.rarity-N   { 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.rarity-R   { border-left: 4px solid #4d9bff; }
.mt-swap-row.rarity-N   { border-left: 4px solid #7c8492; }
.mt-swap-row.rarity-SSR .mt-swap-name { color: #ffd866; }
.mt-swap-row.rarity-SR  .mt-swap-name { color: #c9b6ff; }
.mt-swap-row.rarity-R   .mt-swap-name { color: #8ec0ff; }
.mt-swap-row.rarity-N   .mt-swap-name { color: #aab; }
.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);
  height: calc(100% + 56px);     /* 填滿父 hub-content + 補 padding */
  margin: -16px -20px -40px;
  padding: 0;
  overflow: hidden;
  background:
    url('../img/my-team/gacha-bg.jpg') 0 0 / 100% 100% no-repeat,
    #1a0a14;
}
/* gacha tab 不滾動（fullscene 填滿） */
.mt-hub-content[data-tab="gacha"] {
  overflow: hidden !important;
}

/* 背景圖：已改用 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);
}
/* 電腦版（寬螢幕）caption 往下挪一點、跟卡包底拉開距離 */
@media (min-width: 768px) {
  .mt-gshop-packs-caption { top: 50%; }
}

/* 黑板告示 */
.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: 8%;
  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 抽：鮮亮藍綠（cyan-blue）— 與 10 抽金色同明亮度
   原本太暗是因為藍色感知亮度本來就低於金色，所以這版用更亮的青藍 + 更淺底色 */
.mt-gshop-btn-1 {
  background:
    /* 頂部高光（與 10 抽同手法）*/
    linear-gradient(180deg,
      rgba(255,255,255,0.55) 0%,
      rgba(255,255,255,0.15) 8%,
      rgba(255,255,255,0) 16%,
      rgba(0,0,0,0) 70%,
      rgba(0,0,0,0.1) 95%,
      rgba(0,0,0,0.18) 100%),
    /* 主色 — 鮮亮 cyan-blue，整體拉亮 2~3 階 */
    linear-gradient(180deg,
      #80e0ff 0%,
      #4cc8ff 22%,
      #2bb0f0 52%,
      #1f95d8 80%,
      #1779b8 100%) !important;
  background-color: #4cc8ff !important;
  border: 2.5px solid #ffffff !important;
  color: #ffffff;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.55),
    0 2px 3px rgba(0,60,120,0.75),
    0 -1px 1px rgba(0,60,130,0.4);
  box-shadow:
    0 0 0 2px #07355c,
    0 4px 0 #0d4d82,
    0 8px 20px rgba(0,60,120,0.7),
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 4px 6px rgba(255,255,255,0.5),
    inset 0 -4px 8px rgba(0,60,130,0.35),
    inset 0 -1px 0 rgba(0,50,110,0.55) !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; }

/* 雙費用 pill（券 / 寶石都可付）*/
.mt-gshop-btn-cost-dual {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  background: transparent !important;
  padding: 0 !important;
  min-width: auto !important;
}
.mt-gshop-cost-pill {
  background: rgba(0,0,0,0.4);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  line-height: 1.2;
  transition: opacity 0.15s;
}
.mt-gshop-cost-pill b { font-size: 13px; margin-left: 1px; }
.mt-gshop-cost-active { opacity: 1; }
.mt-gshop-cost-fade   { opacity: 0.42; }
.mt-gshop-cost-or {
  color: rgba(255,255,255,0.5);
  font-size: 10px;
  font-weight: 700;
}
.mt-gshop-btn-10 .mt-gshop-cost-pill { background: rgba(0,0,0,0.32); color: #2a1505; }
.mt-gshop-btn-10 .mt-gshop-cost-or   { color: rgba(42,21,5,0.55); }

/* 必得 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 — 教練辦公室（黑板 + 教練站位）
   ═════════════════════════════════════════════════════════════ */
/* AI 背景：填滿父容器（不滑動）*/
.mt-coach-office {
  position: relative;
  width: calc(100% + 40px);
  height: calc(100% + 56px);    /* 補回父 hub-content 的 padding 16+40 */
  margin: -16px -20px -40px;
  padding: 0;
  overflow: hidden;
  background:
    url('../img/my-team/coach-bg.jpg') 0 0 / 100% 100% no-repeat,
    #2a1812;
  min-height: 0;
}
/* coach tab 不滾動（office 已填滿） */
.mt-hub-content[data-tab="coach"] {
  overflow: hidden !important;
}
.mt-coach-office-title {
  position: absolute;
  top: 1.5%; left: 50%; transform: translateX(-50%);
  z-index: 4;
  text-align: center;
  font-size: 13px; font-weight: 900;
  color: #ffe680;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(240,192,64,0.55);
  border-radius: 999px;
  padding: 3px 12px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7);
  white-space: nowrap;
  display: none;  /* 圖內已有滿滿裝飾、頂部標題反而擋住、預設隱藏 */
}
.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;
}

/* 黑板：貼在 AI 圖中央米色牆面（縮小、上移）*/
.mt-coach-blackboard {
  position: absolute;
  top: 16%; left: 30%;
  width: 40%;
  aspect-ratio: 240/180;
  z-index: 3;
  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: -16px;     /* 移到黑板外、下方木地板區 */
  text-align: center;
  color: #f0c040;
  font-size: 11px;
  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: -34px;     /* 跟著 label 一起下移、彼此間距 ~18px */
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

/* 教練團：1 大主教練 + 2 小助教（橫排、主教練比助教大）*/
.mt-coach-team {
  position: absolute;
  top: 47%;
  left: 4%;
  right: 4%;
  height: 19%;   /* 加高一點讓主教練的「推薦陣型」chip 不會被下方面板蓋住 */
  display: flex;
  gap: 6px;
  align-items: stretch;
  z-index: 3;
}
.mt-coach-team-head {
  flex: 1.8;       /* 主教練佔比加大（原 1.4） */
  min-width: 0;
}
.mt-coach-team-assists {
  flex: 1;
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.mt-coach-team-assists > * { flex: 1; min-width: 0; }

/* 主教練大格（含 portrait + name + trait + rarity）*/
.mt-coach-team-head-slot {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, rgba(240,192,64,0.18), rgba(0,0,0,0.5));
  border: 2.5px solid #f0c040;
  border-radius: 10px;
  padding: 5px;
  color: #fff;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 4px 10px rgba(240,192,64,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.12s;
}
.mt-coach-team-head-slot:hover { transform: translateY(-2px); }
.mt-coach-team-head-portrait {
  width: 100%; height: 100%;
  max-width: 72px;      /* 主教練頭像加大（原 50px）*/
  aspect-ratio: 1;
  flex-shrink: 0;
  background: rgba(0,0,0,0.45);
  border: 2px solid rgba(240,192,64,0.7);
  border-radius: 8px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px rgba(240,192,64,0.45);
}
.mt-coach-team-head-portrait img {
  width: 100%; height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}
.mt-coach-team-head-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  gap: 1px;
}
.mt-coach-team-head-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.mt-coach-team-head-name {
  font-size: 13px;
  font-weight: 900;
  color: #ffe680;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
}
.mt-coach-team-head-name-row .mt-coach-slot-rarity {
  position: static;
  font-size: 9px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.mt-coach-team-head-nickname {
  font-size: 9.5px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  line-height: 1.1;
}
.mt-coach-team-head-trait {
  font-size: 10px;
  color: #b9e8b3;
  line-height: 1.2;
  font-weight: 800;
}
/* 主教練卡的推薦陣型 — 藍底邊框 chip、align-self:flex-start 不撐滿 */
.mt-coach-team-head-formation {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  background: linear-gradient(180deg, rgba(33,150,243,0.4), rgba(13,71,161,0.55));
  border: 1.5px solid #42a5f5;
  border-radius: 999px;
  padding: 1px 9px 1px 7px;
  margin-top: 2px;
  letter-spacing: 0.5px;
  box-shadow: 0 0 8px rgba(66,165,245,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
  white-space: nowrap;
}
.mt-coach-team-head-formation b {
  color: #ffe680;
  font-weight: 900;
  font-size: 11.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  margin-left: 2px;
}
.mt-coach-head-role-badge {
  position: absolute;
  top: -8px; left: 8px;
  background: linear-gradient(180deg, #ffe680, #c08030);
  color: #2a1505;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1.5px solid #fff;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  z-index: 2;
}
/* 主教練卡名稱列右側的 SR/SSR badge — 改成 inline、不再絕對定位
   （避免與「👑 主教練」角色 chip / portrait 重疊） */
.mt-coach-team-head-slot .mt-coach-team-head-name-row .mt-coach-slot-rarity {
  position: static !important;
  font-size: 9.5px;
  padding: 1px 5px;
  flex-shrink: 0;
  line-height: 1.15;
}

/* 主教練空格（未指派）*/
.mt-coach-team-head-empty {
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.45);
  border: 2px dashed rgba(240,192,64,0.5);
  border-radius: 10px;
  padding: 8px;
  color: rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  gap: 2px;
}
.mt-coach-team-head-empty:hover { background: rgba(0,0,0,0.55); border-color: #f0c040; }
.mt-coach-team-head-empty-icon { font-size: 22px; }
.mt-coach-team-head-empty-text { font-size: 11px; font-weight: 800; color: #ffe680; }
.mt-coach-team-head-empty-hint { font-size: 9px; color: rgba(255,255,255,0.5); }

/* 助教小格（沿用原本 mt-coach-slot 樣式、但是「空位」也要好看）*/
.mt-coach-team-assist-empty {
  cursor: pointer;
}
.mt-coach-team-assist-empty .mt-coach-slot-portrait-ghost {
  font-size: 22px;
  color: rgba(240,192,64,0.6);
}

/* 展開所有教練按鈕 */
.mt-coach-expand-btn {
  position: absolute;
  top: 79%; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  border: 1.5px solid rgba(240,192,64,0.65);
  color: #ffe680;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
  white-space: nowrap;
  transition: all 0.12s;
}
.mt-coach-expand-btn:hover {
  background: rgba(240,192,64,0.25);
  transform: translateX(-50%) translateY(-1px);
}

/* 所有教練 modal 內的 grid */
.mt-coach-all-title {
  font-size: 16px;
  font-weight: 900;
  color: #ffe680;
  text-align: center;
  margin-bottom: 4px;
}
.mt-coach-all-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin-bottom: 12px;
}
.mt-coach-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  max-height: 65vh;
  overflow-y: auto;
  padding: 4px;
}

/* 羈絆狀態列（modal 頂部：6 個派系小 chip）*/
.mt-coach-syn-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 10px;
  padding: 6px 4px;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
}
.mt-coach-syn-chip {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
}
.mt-coach-syn-chip.ready {
  background: rgba(76,175,80,0.22);
  border-color: rgba(76,175,80,0.6);
  color: #b9e8b3;
}
.mt-coach-syn-chip.family-tactic.ready  { background: rgba(144,202,249,0.22); border-color: #90caf9; color: #bcdfff; }
.mt-coach-syn-chip.family-attack.ready  { background: rgba(239,83,80,0.22);   border-color: #ef5350; color: #ffb1ab; }
.mt-coach-syn-chip.family-defense.ready { background: rgba(102,187,106,0.22); border-color: #66bb6a; color: #c1ecc4; }
.mt-coach-syn-chip.family-speed.ready   { background: rgba(255,202,40,0.22);  border-color: #ffca28; color: #ffe88a; }
.mt-coach-syn-chip.family-stamina.ready { background: rgba(236,64,122,0.22);  border-color: #ec407a; color: #ffbacf; }
.mt-coach-syn-chip.family-youth.ready   { background: rgba(171,71,188,0.22);  border-color: #ab47bc; color: #d8a8e3; }
/* 派系 chip — 卡片右上角、純中文（戰術 / 攻擊 / 防線 / 速度 / 體能 / 青訓）*/
.mt-coach-family-chip {
  position: absolute;
  top: 3px; right: 3px;
  background: rgba(0,0,0,0.78);
  border: 1.5px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
  padding: 1px 7px;
  border-radius: 999px;
  z-index: 3;
  letter-spacing: 1px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: auto;
  line-height: 1.4;
}
/* 派系顏色：邊框 + 同色文字 */
.mt-coach-family-chip.family-tactic   { border-color: #90caf9; color: #bcdfff; }
.mt-coach-family-chip.family-attack   { border-color: #ef5350; color: #ffb1ab; }
.mt-coach-family-chip.family-defense  { border-color: #66bb6a; color: #c1ecc4; }
.mt-coach-family-chip.family-speed    { border-color: #ffca28; color: #ffe88a; }
.mt-coach-family-chip.family-stamina  { border-color: #ec407a; color: #ffbacf; }
.mt-coach-family-chip.family-youth    { border-color: #ab47bc; color: #d8a8e3; }

/* 教練卡上的陣型 chip — 卡片底部小行 */
.mt-coach-slot-formation {
  display: block;
  font-size: 8.5px;
  font-weight: 800;
  color: #90caf9;
  margin-top: 1px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 合計加成面板（主 100% + 助教 50% × 2 + 羈絆）*/
.mt-coach-total-buff {
  position: absolute;
  top: 67%;
  left: 4%;
  right: 4%;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.5));
  border: 1.5px solid rgba(76,175,80,0.55);
  border-radius: 8px;
  padding: 4px 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.mt-coach-total-buff-empty {
  color: rgba(255,255,255,0.4);
  font-style: italic;
  font-weight: 700;
  border-color: rgba(255,255,255,0.12);
  display: block;
  text-align: center;
}
.mt-coach-total-buff-label {
  font-size: 11px;
  font-weight: 900;
  color: #b9e8b3;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mt-coach-total-buff-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex: 1;
}
.mt-coach-buff-pill {
  background: rgba(76,175,80,0.22);
  color: #fff;
  border: 1px solid rgba(76,175,80,0.5);
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 800;
}
/* 場外加成 pill（訓練 RP / 抗翻盤 / 老將）— 藍色區隔比賽屬性加成 */
.mt-coach-buff-pill-off {
  background: rgba(100,150,255,0.22);
  border-color: rgba(100,150,255,0.55);
  color: #cfe1ff;
}
.mt-coach-buff-empty {
  color: rgba(255,255,255,0.45);
  font-size: 10px;
}

/* 羈絆狀態條 */
.mt-coach-synergy {
  position: absolute;
  top: 74%;
  left: 4%;
  right: 4%;
  border-radius: 8px;
  padding: 4px 8px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  z-index: 3;
  line-height: 1.3;
}
.mt-coach-synergy-on {
  background: linear-gradient(135deg, rgba(76,175,80,0.85), rgba(46,125,50,0.85));
  border: 1.5px solid #66bb6a;
  color: #fff;
  box-shadow: 0 0 12px rgba(76,175,80,0.5);
  animation: mt-synergy-pulse 1.8s ease-in-out infinite;
}
.mt-coach-synergy-off {
  background: rgba(0,0,0,0.5);
  border: 1px dashed rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.55);
  font-size: 9px;
  font-weight: 600;
}
@keyframes mt-synergy-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(76,175,80,0.4); }
  50%      { box-shadow: 0 0 16px rgba(76,175,80,0.85); }
}

/* slot 角色 badge 顏色 */
.mt-coach-slot.role-head    .mt-coach-active-crown { color: #ffd54a; font-size: 14px; }
.mt-coach-slot.role-assist1 .mt-coach-active-crown,
.mt-coach-slot.role-assist2 .mt-coach-active-crown {
  background: rgba(76,175,80,0.95);
  color: #fff;
  border-radius: 50%;
  width: 14px; height: 14px;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #fff;
}
.mt-coach-slot.role-head    { border-color: #f0c040 !important; }
.mt-coach-slot.role-assist1,
.mt-coach-slot.role-assist2 { border-color: #66bb6a !important; }

/* 角色選單 modal */
.mt-coach-role-title {
  font-size: 16px;
  font-weight: 900;
  color: #ffe680;
  text-align: center;
  margin-bottom: 4px;
}
.mt-coach-role-title small {
  font-size: 11px;
  background: rgba(240,192,64,0.25);
  border: 1px solid #f0c040;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
}
.mt-coach-role-trait {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  text-align: center;
  margin-bottom: 12px;
}
.mt-coach-role-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mt-coach-role-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.12s;
}
.mt-coach-role-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(240,192,64,0.65);
  transform: translateX(2px);
}
.mt-coach-role-btn.is-current {
  background: rgba(240,192,64,0.25);
  border-color: #f0c040;
  cursor: default;
}
.mt-coach-role-btn.is-current::after {
  content: '✓';
  color: #ffe680;
  font-weight: 900;
  margin-left: auto;
  font-size: 18px;
}
.mt-coach-role-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}
.mt-coach-role-name {
  font-size: 14px;
  font-weight: 900;
  flex: 1;
}
.mt-coach-role-info {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}
.mt-coach-role-btn-clear {
  border-color: rgba(229,57,53,0.5);
  color: #ef9a9a;
}
.mt-coach-role-btn-clear:hover {
  background: rgba(229,57,53,0.15);
  border-color: #e53935;
}

/* 教練站位列（兩排垂直、貼地毯左右）*/
.mt-coach-line {
  position: absolute;
  top: 53%;
  bottom: 17%;       /* 留 17% 給底部桌子 + 按鈕區 */
  width: 13%;
  display: flex; flex-direction: column;
  gap: 3px;
  padding: 2px;
  z-index: 3;
  overflow-y: auto;
  scrollbar-width: thin;
}
.mt-coach-line::-webkit-scrollbar { width: 4px; }
.mt-coach-line::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.5); border-radius: 2px; }
.mt-coach-line-l { left: 2%; }
.mt-coach-line-r { right: 2%; }

.mt-coach-slot {
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 7px;
  padding: 3px;
  width: 100%;
  cursor: pointer;
  position: relative;
  color: #fff;
  text-align: center;
  transition: transform 0.12s, border-color 0.15s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.55);
}
.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: 8px; font-weight: 800;
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.mt-coach-slot-trait {
  font-size: 8px;
  color: #ffd54a;
  margin-top: 1px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}
.mt-coach-slot-rarity {
  position: absolute; top: 1px; left: 1px;
  font-size: 7px; font-weight: 900;
  padding: 0 2px; border-radius: 2px;
  background: rgba(0,0,0,0.7); 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 {
  display: none;  /* AI 圖已含木地板、不再用 CSS 疊一層 */
}

/* 抽卡 / 教練 tab 右上角持券 pill */
.mt-gacha-tab-wallet {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  z-index: 10;
}
.mt-gacha-tab-pill {
  background: rgba(0,0,0,0.7);
  border: 1.5px solid rgba(240,192,64,0.55);
  color: #ffe680;
  border-radius: 999px;
  padding: 3px 9px 3px 7px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
.mt-gacha-tab-pill b { color: #fff; font-weight: 900; font-size: 12px; }
.mt-gacha-tab-pill-icon { font-size: 13px; line-height: 1; }

/* SSR 保底進度條（左上角、跟右上 wallet 對稱）*/
.mt-coach-pity-bar {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 10;
  width: 175px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.7);
  border: 1.5px solid rgba(240,192,64,0.6);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  color: rgba(255,255,255,0.95);
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.mt-coach-pity-label {
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  color: #ffe082;
}
.mt-coach-pity-track {
  flex: 1; min-width: 0;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  overflow: hidden;
}
.mt-coach-pity-fill {
  height: 100%;
  background: linear-gradient(90deg, #f0c040, #ff9800);
  border-radius: inherit;
  box-shadow: 0 0 4px rgba(240,192,64,0.6);
  transition: width 0.3s ease;
}
.mt-coach-pity-count {
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.mt-coach-pity-count b { color: #f0c040; font-size: 11px; }

/* 按鈕區：透明、讓按鈕自己跳出來 */
.mt-coach-actions {
  position: absolute;
  top: 85%;
  left: 4%; right: 4%;
  display: flex; gap: 8px; align-items: stretch;
  z-index: 4;
}
.mt-coach-draw-btn {
  flex: 1;
  /* 金屬金漸層 + 頂部高光、底部柔淡（同球員 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.55) 100%),
    linear-gradient(180deg,
      #ffd92a 0%,
      #fbcd0c 25%,
      #d8a808 55%,
      #a07808 82%,
      #5f4604 100%) !important;
  background-color: #fbcd0c !important;
  border: 2.5px solid #ffffff !important;
  color: #2a1505;
  font-weight: 900;
  padding: 8px 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 -1px 0 rgba(120,60,10,0.5);
  /* 立體陰影（同球員按鈕的 3D 沉降效果：外圈深框 + 4px 沉降層 + 大柔陰影 + inset 高光/暗）*/
  box-shadow:
    0 0 0 2px #382308,
    0 4px 0 #5a3a0a,
    0 8px 20px rgba(55,30,5,0.8),
    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;
  transition: transform 0.12s, filter 0.15s;
  animation: mt-draw-glow 1.8s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  opacity: 1 !important;
}
/* 左到右光影 sweep（教練按鈕用、同球員抽卡）*/
.mt-coach-btn-shine {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.mt-coach-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-coach-btn-shine 2.8s ease-in-out infinite;
}
.mt-coach-draw-10 .mt-coach-btn-shine::before {
  animation-delay: 0.4s;
}
@keyframes mt-coach-btn-shine {
  0%        { left: -40%; opacity: 0; }
  10%       { opacity: 1; }
  55%       { left: 120%; opacity: 1; }
  60%, 100% { left: 120%; opacity: 0; }
}
/* 內容浮在 shine 之上 */
.mt-coach-btn-label,
.mt-coach-btn-cost-dual {
  position: relative;
  z-index: 2;
}

.mt-coach-btn-label {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1;
  text-align: center;
}
.mt-coach-btn-cost-dual {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mt-coach-cost-pill {
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  transition: opacity 0.15s;
}
.mt-coach-cost-pill b { font-size: 12px; margin-left: 1px; }
.mt-coach-cost-pill.is-active { opacity: 1; }
.mt-coach-cost-pill.is-fade   { opacity: 0.42; }
.mt-coach-cost-or {
  color: rgba(42,21,5,0.6);
  font-size: 10px;
  font-weight: 700;
}
.mt-coach-draw-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.mt-coach-draw-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow:
    0 0 0 2px #382308,
    0 0 0 #5a3a0a,
    0 4px 12px rgba(55,30,5,0.6),
    inset 0 2px 0 rgba(255,255,255,0.95),
    inset 0 -3px 6px rgba(80,45,5,0.5);
}
.mt-coach-draw-btn:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); animation: none; }

/* 10 連抽：實心藍 */
.mt-coach-draw-10 {
  background: linear-gradient(180deg, #4ab8ff 0%, #1e9be8 45%, #1370b0 100%) !important;
  background-color: #1e9be8 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow: 0 2px 3px rgba(0,15,40,0.95) !important;
  box-shadow:
    0 0 0 2px #042746,
    0 4px 0 #08355d,
    0 8px 16px rgba(0,25,55,0.7),
    inset 0 2px 0 rgba(255,255,255,0.85) !important;
}
.mt-coach-draw-10 .mt-coach-cost-or { color: rgba(255,255,255,0.7); }

@keyframes mt-draw-glow {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.08) drop-shadow(0 0 8px rgba(255,213,74,0.6)); }
}

/* 抽教練結果彈窗 */
.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;
  /* 拿掉 mt-match-opp-bob 上下飄動 — combat-idle 本身的 2 幀循環就是呼吸感、不需要再 translateY */
}
#mt-match-opp-1 { right: 64px; }
#mt-match-opp-2 { right: 8px; }
/* 對手隊徽 + 隊名（右上） */
.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-my-power {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.75);
  display: flex; gap: 4px; align-items: center; justify-content: center;
}
.mt-match-current-my-power b { color: #f0c040; font-size: 14px; }
.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-fans {
  background: rgba(120,150,220,0.18);
  color: #c8d4f0;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  border: 1px solid rgba(120,150,220,0.4);
  cursor: help;
}
.mt-match-current-opp-formation {
  background: rgba(220,180,80,0.16);
  color: #f0d68a;
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  border: 1px solid rgba(220,180,80,0.38);
  cursor: help;
}
.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):not(.is-locked) { 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.is-locked {
  opacity: 0.55;
  filter: grayscale(0.4);
  cursor: pointer;  /* 還是可點 — 點了會跳 toast 解釋原因 */
}
.mt-match-pvp-lock-tag {
  display: inline-block;
  background: rgba(239,83,80,0.25);
  border: 1px solid rgba(239,83,80,0.55);
  color: #ef9a9a;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  margin-left: 4px;
  letter-spacing: 0.3px;
}
.mt-match-pvp-ticket-tag {
  display: inline-block;
  background: rgba(240,192,64,0.25);
  border: 1px solid rgba(240,192,64,0.6);
  color: #ffd96f;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  margin-left: 4px;
  letter-spacing: 0.3px;
}
.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: 6px 8px 16px;
}
/* 已移除 mt-train-gym-header（節省垂直高度）*/
.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;
}

/* 開羅式訓練 hint 文字 */
.mt-train-gym-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
  letter-spacing: 0.3px;
  gap: 8px;
}
.mt-train-info-btn {
  background: rgba(240,192,64,0.18);
  border: 1px solid rgba(240,192,64,0.5);
  color: #ffe680;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.mt-train-info-btn:hover { background: rgba(240,192,64,0.3); }
/* 浮在訓練 tab 右上角的「❓ 屬性說明」chip */
.mt-train-info-btn-float {
  position: absolute;
  top: 4px; right: 8px;
  z-index: 5;
}

/* 機台動作標籤（例：跑步機、舉重）*/
.mt-train-station-activity {
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 2px;
}

/* 點數卡片改成 button + hover/active */
button.mt-train-point-card {
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  box-shadow: 0 3px 6px rgba(0,0,0,0.35);
}
button.mt-train-point-card:hover {
  transform: translateY(-2px);
  border-color: rgba(240,192,64,0.7);
  box-shadow: 0 5px 12px rgba(0,0,0,0.5), 0 0 14px rgba(240,192,64,0.35);
}
button.mt-train-point-card:active { transform: translateY(0); }

/* 餵球員 2 大按鈕（集訓/精英）— 壓縮版 */
.mt-train-feed-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 4px 0 0;
}
.mt-train-feed-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 6px 7px;
  border-radius: 9px;
  cursor: pointer;
  text-align: center;
  font-family: inherit;
  border: 2px solid;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mt-train-feed-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,0.6), 0 0 18px rgba(255,255,255,0.18); }
.mt-train-feed-btn:active { transform: translateY(0); }
.mt-train-feed-normal {
  background: linear-gradient(180deg, #42a5f5 0%, #1565c0 100%);
  border-color: #0d47a1;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,30,80,0.7);
}
.mt-train-feed-premium {
  background: linear-gradient(180deg, #ffe680 0%, #c08030 100%);
  border-color: #5a3010;
  color: #2a1505;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.mt-train-feed-btn-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1;
}
.mt-train-feed-btn-benefit {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.2;
  opacity: 0.95;
}
.mt-train-feed-btn-cost {
  font-size: 11px;
  font-weight: 700;
  background: rgba(0,0,0,0.3);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  margin-top: 2px;
}
.mt-train-feed-premium .mt-train-feed-btn-cost { background: rgba(0,0,0,0.18); }

/* 點數庫存（按鈕下方）*/
.mt-train-inventory {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 5px 8px;
  margin-bottom: 6px;
}
.mt-train-inv-label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
  margin-right: 2px;
}
.mt-train-inv-chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

/* picker 單按鈕 grid */
.mt-train-pick-btns-1 {
  grid-template-columns: 1fr !important;
}

/* 訓練系統說明 modal */
.mt-train-info-title {
  font-size: 17px;
  font-weight: 900;
  color: #ffe680;
  margin-bottom: 6px;
  text-align: center;
}
.mt-train-info-intro {
  font-size: 11.5px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin-bottom: 12px;
}

/* 6 屬性說明卡片 grid */
.mt-attr-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.mt-attr-info-card {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.1);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 6px 10px 7px;
}
.mt-attr-info-card.attr-attack   { border-left-color: #ef5350; }
.mt-attr-info-card.attr-defense  { border-left-color: #66bb6a; }
.mt-attr-info-card.attr-speed    { border-left-color: #ffca28; }
.mt-attr-info-card.attr-midfield { border-left-color: #90caf9; }
.mt-attr-info-card.attr-stamina  { border-left-color: #ec407a; }
.mt-attr-info-card.attr-aura     { border-left-color: #ab47bc; }
.mt-attr-info-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.mt-attr-info-icon { font-size: 14px; }
.mt-attr-info-name {
  font-size: 13px;
  font-weight: 900;
  color: #ffe680;
  letter-spacing: 0.5px;
}
.mt-attr-info-machine {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  margin-left: auto;
  background: rgba(255,255,255,0.05);
  padding: 1px 6px;
  border-radius: 999px;
}
.mt-attr-info-body {
  font-size: 11.5px;
  color: rgba(255,255,255,0.85);
  line-height: 1.45;
}
.mt-attr-info-body b { color: #ffe680; }
.mt-train-info-section {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(240,192,64,0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.mt-train-info-q {
  font-size: 13px;
  font-weight: 900;
  color: #f0c040;
  margin-bottom: 4px;
}
.mt-train-info-a {
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}
.mt-train-info-a b { color: #ffe680; }

/* 餵球員 picker：只兩個按鈕 */
.mt-train-pick-btns-2 {
  grid-template-columns: 1fr 1fr !important;
}

/* 開羅風像素地板：6 個機台 2 列 × 3 行 */
.mt-train-floor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  /* 木地板紋路 */
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0) 0, rgba(0,0,0,0) 28px,
      rgba(255,255,255,0.04) 28px, rgba(255,255,255,0.04) 30px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0) 0, rgba(0,0,0,0) 56px,
      rgba(0,0,0,0.15) 56px, rgba(0,0,0,0.15) 58px),
    linear-gradient(180deg, #6b4628 0%, #4a2f1c 100%);
  border: 3px solid #1a1a1a;
  border-radius: 10px;
  padding: 12px 10px;
  box-shadow: inset 0 4px 10px rgba(0,0,0,0.45), 0 4px 10px rgba(0,0,0,0.4);
}

/* 訓練機台（每格）*/
.mt-train-station {
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
  border: 2px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 6px 4px 8px;
  position: relative;
  cursor: pointer;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 134px;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 3px 6px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
  --station-color: #f0c040;
}
.mt-train-station:hover {
  transform: translateY(-2px);
  border-color: var(--station-color);
  box-shadow: 0 6px 12px rgba(0,0,0,0.55), 0 0 14px color-mix(in srgb, var(--station-color) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mt-train-station.is-busy {
  border-color: color-mix(in srgb, var(--station-color) 70%, white 30%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--station-color) 22%, transparent) 0%,
    rgba(255,255,255,0.04) 100%);
}
.mt-train-station.is-ready {
  animation: mt-station-ready 1.2s ease-in-out infinite;
  border-color: #66bb6a;
}
@keyframes mt-station-ready {
  0%, 100% { box-shadow: 0 3px 6px rgba(0,0,0,0.45), 0 0 0 rgba(102,187,106,0); }
  50%      { box-shadow: 0 3px 6px rgba(0,0,0,0.45), 0 0 18px rgba(102,187,106,0.9); }
}

.mt-train-station-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 900;
  color: var(--station-color);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.mt-train-station-emoji { font-size: 12px; }
.mt-train-station-count {
  background: var(--station-color);
  color: #1a1a1a;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 999px;
  margin-left: 2px;
}

/* 機台像素 tile */
.mt-train-station-tile {
  width: 56px; height: 56px;
  flex-shrink: 0;
}
.mt-train-station-tile svg {
  width: 100%; height: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}

/* 站在機台旁的球員 chibi */
.mt-train-station-trainees {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 50px;
  margin-top: 2px;
}
.mt-train-trainee {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
/* 時長 chip — 機台上每位 trainee 頭頂 */
.mt-train-trainee-tier {
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(255,255,255,0.25);
  color: #ffe680;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.mt-train-trainee-cancel {
  position: absolute;
  top: -6px; right: -6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(229,57,53,0.95);
  border: 1.5px solid #fff;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: transform 0.1s, background 0.1s;
}
.mt-train-trainee-cancel:hover {
  background: #ef5350;
  transform: scale(1.1);
}
.mt-train-trainee-cancel:disabled { opacity: 0.5; cursor: wait; }

/* ⏩ 寶石加速按鈕（右下、emoji 本身即按鈕、無底色） */
.mt-train-trainee-speedup {
  position: absolute;
  bottom: -2px; right: -2px;
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  z-index: 3;
  padding: 2px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
  transition: transform 0.1s;
}
.mt-train-trainee-speedup:hover { transform: scale(1.15); }
.mt-train-trainee-speedup:disabled { opacity: 0.5; cursor: wait; }
.mt-train-trainee.tier-24h .mt-train-trainee-tier {
  border-color: #ff6b9d;
  color: #ffbacf;
  background: rgba(60,15,40,0.85);
  box-shadow: 0 0 6px rgba(255,107,157,0.55);
}
.mt-train-trainee.tier-8h .mt-train-trainee-tier {
  border-color: #42a5f5;
  color: #bcdfff;
  background: rgba(15,40,80,0.85);
}
.mt-train-trainee.tier-2h .mt-train-trainee-tier {
  border-color: #66bb6a;
  color: #c1ecc4;
  background: rgba(20,60,30,0.85);
}
.mt-train-trainee.is-ready .mt-train-trainee-tier {
  animation: mt-trainee-tier-glow 1.2s ease-in-out infinite;
}
@keyframes mt-trainee-tier-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(255,213,74,0.5); }
  50%      { box-shadow: 0 0 14px rgba(255,213,74,1); }
}
.mt-train-trainee img {
  width: 30px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
}
.mt-train-trainee-sprite {
  background-repeat: no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.55));
  image-rendering: pixelated;
}
.mt-train-trainee-bar {
  width: 100%;
  height: 4px;
  background: rgba(0,0,0,0.55);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.5);
}
.mt-train-trainee-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #ffd54a 0%, #f0c040 100%);
  transition: width 0.4s linear;
}
.mt-train-trainee.is-ready .mt-train-trainee-bar > div {
  background: linear-gradient(90deg, #66bb6a 0%, #2e7d32 100%);
}
.mt-train-trainee-time {
  font-size: 9px;
  font-weight: 900;
  color: rgba(255,255,255,0.85);
  font-family: monospace;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 1px rgba(0,0,0,0.7);
}
.mt-train-trainee-ready {
  color: #66bb6a;
  font-weight: 900;
  animation: mt-trainee-ready-pulse 0.8s ease-in-out infinite;
}
@keyframes mt-trainee-ready-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.mt-train-station-empty-hint {
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.5px;
  padding: 14px 0 4px;
}

/* 機台 modal：列出全部訓練中球員 + 加入訓練 */
.mt-train-station-modal-card {
  max-width: 480px;
}
.mt-train-station-modal-title {
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  padding: 12px 0 2px;
  color: #ffd96f;
  letter-spacing: 0.5px;
}
.mt-train-station-modal-cap {
  font-size: 12px;
  color: rgba(255,217,111,0.85);
  margin-left: 4px;
  background: rgba(240,192,64,0.18);
  border: 1px solid rgba(240,192,64,0.45);
  padding: 1px 6px;
  border-radius: 4px;
}
.mt-train-station-modal-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}
.mt-train-station-modal-list {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 12px;
}
.mt-train-station-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px;
}
.mt-train-station-row.is-ready {
  background: rgba(120,200,60,0.15);
  border-color: rgba(180,220,100,0.5);
}
.mt-train-station-row-portrait {
  width: 38px; height: 38px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.mt-train-station-row-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.mt-train-station-row-info {
  flex: 1;
  min-width: 0;
}
.mt-train-station-row-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-train-station-row-name small {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  margin-left: 4px;
}
.mt-train-station-row-bar {
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0;
}
.mt-train-station-row-bar > div {
  height: 100%;
  background: linear-gradient(90deg, #ffd96f 0%, #f0c040 100%);
  border-radius: 3px;
  transition: width 0.4s ease-out;
}
.mt-train-station-row-time {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  font-variant-numeric: tabular-nums;
}
.mt-train-station-row-ready {
  color: #c5e58a;
  font-weight: 700;
}
.mt-train-station-row-actions {
  display: flex; gap: 4px;
  flex-shrink: 0;
}
.mt-train-station-row-claim,
.mt-train-station-row-cancel,
.mt-train-station-row-speedup {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.mt-train-station-row-claim {
  width: auto; padding: 0 10px;
  background: linear-gradient(180deg, #66bb6a, #43a047);
  border-color: #43a047;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
}
.mt-train-station-row-cancel:hover { background: rgba(239,83,80,0.3); }
.mt-train-station-row-speedup:hover { background: rgba(240,192,64,0.3); }
.mt-train-station-modal-add {
  display: block;
  width: 100%;
  padding: 10px;
  background: linear-gradient(180deg, #4caf50, #2e7d32);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.5px;
}
.mt-train-station-modal-add:hover {
  background: linear-gradient(180deg, #66bb6a, #43a047);
}
.mt-train-station-modal-full {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  padding: 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
}

/* 訓練點數面板（壓縮版：title + 庫存 chip 同一列、buttons 較矮）*/
.mt-train-points-panel {
  margin-top: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.25) 100%);
  border: 1.5px solid rgba(240,192,64,0.4);
  border-radius: 10px;
  padding: 6px 10px 8px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}
.mt-train-points-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 900;
  color: #f0c040;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  margin-bottom: 4px;
}
.mt-train-points-emoji { font-size: 14px; }
/* 標題列右側 inline 庫存 chips */
.mt-train-inventory-inline {
  margin-left: auto;
  display: inline-flex;
  gap: 3px;
}
.mt-train-inventory-inline .mt-train-inv-chip {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  font-size: 10px;
  padding: 0 5px;
}

/* 集訓營區段標題（壓縮成一行）*/
.mt-train-section-divider {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0 4px;
  padding: 5px 4px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mt-train-section-title {
  font-size: 13px;
  font-weight: 900;
  color: #f0c040;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.mt-train-section-sub {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
}
/* （舊 4 點數卡 grid 已改成 2 大按鈕 + 庫存 chips） */
.mt-train-points-source {
  margin-top: 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
}

/* 訓練機台選人彈窗 */
.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: 8px; }
.mt-train-picker-rp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(240,192,64,0.2);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
}
.mt-train-rp-label {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.5px;
  margin-right: 4px;
}
.mt-train-rp-pill {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11.5px;
  color: #fff;
  font-weight: 800;
}
.mt-train-btn-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.mt-train-btn-sub {
  font-size: 9.5px;
  opacity: 0.85;
  margin-top: 3px;
  letter-spacing: 0.2px;
  line-height: 1.2;
}
.mt-train-pick-btn:disabled .mt-train-btn-sub {
  color: #ef9a9a;
  font-weight: 800;
  opacity: 1;
}
.mt-train-pick-btn.mt-train-btn-premium {
  background: linear-gradient(180deg, #ffe680 0%, #f0c040 50%, #c08030 100%);
  color: #2a1505;
  border-color: rgba(255,255,255,0.8);
}
.mt-train-pick-btn.mt-train-btn-premium:disabled {
  filter: grayscale(0.8);
}
.mt-train-help-tag-rp {
  background: rgba(33,150,243,0.18);
  color: #90caf9;
  border-color: rgba(33,150,243,0.45);
}
.mt-train-picker-help {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(240,192,64,0.25);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mt-train-help-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px;
  line-height: 1.4;
}
.mt-train-help-tag {
  background: rgba(76,175,80,0.18);
  color: #b9e8b3;
  border: 1px solid rgba(76,175,80,0.35);
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 800;
  white-space: nowrap;
  font-size: 10px;
}
.mt-train-help-tag-premium {
  background: rgba(240,192,64,0.18);
  color: #ffe680;
  border-color: rgba(240,192,64,0.45);
}
.mt-train-help-desc {
  color: rgba(255,255,255,0.78);
  flex: 1;
}
.mt-train-help-desc b { color: #fff; }
.mt-train-picker-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 60vh; overflow-y: auto;
}
/* 選人 popup：球員 row 改成上下兩層（header + 按鈕一排）→ 不會跑版 */
.mt-train-picker-card { max-width: 480px; }
.mt-train-pick-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px 10px;
  color: #fff;
}
.mt-train-pick-row.rarity-SSR { border-color: #f0c040; }
.mt-train-pick-row.rarity-SR  { border-color: #9b87f5; }
/* 先發球員：金色左邊細條 + 微金底 */
.mt-train-pick-row.is-starter {
  background: linear-gradient(90deg, rgba(240,192,64,0.18), rgba(255,255,255,0.04) 40%);
  box-shadow: inset 4px 0 0 0 #f0c040;
}
.mt-train-pick-starter-badge {
  display: inline-block;
  background: linear-gradient(180deg, #ffe680, #c08030);
  color: #2a1505;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 999px;
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: 0.5px;
  border: 1px solid #fff;
}
.mt-train-pick-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mt-train-pick-portrait {
  width: 42px;
  height: 50px;
  flex-shrink: 0;
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mt-train-pick-portrait img {
  width: 100%; height: 100%;
  image-rendering: pixelated;
  object-fit: contain;
}
.mt-train-pick-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mt-train-pick-name {
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
}
.mt-train-pick-name small {
  opacity: 0.7;
  font-weight: 600;
  font-size: 11px;
  margin-left: 4px;
}
.mt-train-pick-stars {
  color: #f0c040;
  font-size: 11px;
  letter-spacing: -1px;
  margin-left: 2px;
}
.mt-train-pick-attr {
  font-size: 12px;
  opacity: 0.85;
  white-space: nowrap;
}
.mt-train-pick-attr b {
  color: #ffe680;
  font-size: 13px;
  margin: 0 2px;
}
.mt-train-pick-btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.mt-train-pick-btn {
  background: linear-gradient(180deg, #43a047 0%, #1f6024 100%);
  border: 1.5px solid #1a4d1f;
  color: #fff;
  padding: 6px 4px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.12s;
}
.mt-train-pick-btn:hover:not(:disabled) { transform: translateY(-1px); }
.mt-train-pick-rp {
  background: linear-gradient(180deg, #42a5f5 0%, #1565c0 100%);
  border-color: #0d47a1;
  color: #fff;
}
.mt-train-btn-premium {
  background: linear-gradient(180deg, #ffe680 0%, #c08030 100%) !important;
  border-color: #5a3010 !important;
  color: #2a1505 !important;
}
.mt-train-pick-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
/* 集訓營 picker row（整列可點、不再 per-row 3 buttons）*/
.mt-train-pick-row-clickable {
  cursor: pointer;
  width: 100%;
  border-width: 2px;
  text-align: left;
  font-family: inherit;
  color: #fff;
  transition: transform 0.12s, border-color 0.15s, background 0.15s;
}
.mt-train-pick-row-clickable:hover:not(.is-busy):not(.is-max) {
  transform: translateY(-1px);
  border-color: #f0c040;
  background: rgba(240,192,64,0.08);
}
.mt-train-pick-row-clickable.is-busy,
.mt-train-pick-row-clickable.is-max {
  cursor: not-allowed;
  opacity: 0.55;
}
.mt-train-pick-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 999px;
  margin-top: 3px;
}
.mt-train-pick-status.ready {
  background: rgba(76,175,80,0.25);
  border: 1px solid rgba(76,175,80,0.6);
  color: #b9e8b3;
}
.mt-train-pick-status.busy {
  background: rgba(33,150,243,0.2);
  border: 1px solid rgba(33,150,243,0.55);
  color: #90caf9;
}
.mt-train-pick-status.max {
  background: rgba(240,192,64,0.18);
  border: 1px solid rgba(240,192,64,0.55);
  color: #ffe680;
}
.mt-train-pick-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  display: inline-block;
  margin-top: 3px;
}

/* RP 不足但保持可點 — click 後預覽彈窗會說明 */
.mt-train-pick-btn.is-unaffordable {
  opacity: 0.55;
  filter: grayscale(0.55) brightness(0.85);
}
.mt-train-pick-btn.is-unaffordable:hover { opacity: 0.7; }
.mt-train-pick-btn.is-unaffordable .mt-train-btn-sub {
  color: #ffab91;
  font-weight: 900;
}

/* ─── 時間訓練領取慶祝彈窗 ─── */
.mt-claim-result-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 12005;
  opacity: 0; transition: opacity 0.2s;
  backdrop-filter: blur(6px);
  padding: 16px;
}
.mt-claim-result-overlay.open { opacity: 1; }
.mt-claim-result-card {
  background: linear-gradient(180deg, #2a1a4e 0%, #0d1224 100%);
  border: 3px solid #f0c040;
  border-radius: 16px;
  padding: 18px 20px 16px;
  width: 100%;
  max-width: 360px;
  color: #fff;
  text-align: center;
  position: relative;
  box-shadow: 0 0 40px rgba(240,192,64,0.6), 0 20px 40px rgba(0,0,0,0.6);
  animation: mt-claim-result-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mt-claim-result-card.rarity-SSR { border-color: #f0c040; box-shadow: 0 0 50px rgba(240,192,64,0.7); }
.mt-claim-result-card.rarity-SR  { border-color: #9b87f5; box-shadow: 0 0 40px rgba(155,135,245,0.55); }
.mt-claim-result-card.rarity-R   { border-color: #66bb6a; box-shadow: 0 0 30px rgba(102,187,106,0.45); }
@keyframes mt-claim-result-pop {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 12 顆四散星花 */
.mt-claim-result-burst {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: visible;
}
.mt-claim-spark {
  position: absolute;
  top: 50%; left: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ffd54a;
  box-shadow: 0 0 8px #ffe680;
  transform-origin: 0 0;
  opacity: 0;
  animation: mt-claim-spark-shoot 0.9s ease-out forwards;
  animation-delay: 0.1s;
}
@keyframes mt-claim-spark-shoot {
  0%   { transform: rotate(var(--ang)) translateX(0) scale(0); opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: rotate(var(--ang)) translateX(140px) scale(1.2); opacity: 0; }
}

.mt-claim-result-title {
  font-size: 18px;
  font-weight: 900;
  color: #ffe680;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(240,192,64,0.7);
  margin-bottom: 12px;
}
.mt-claim-result-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(0,0,0,0.35);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.mt-claim-result-hero img {
  width: 64px; height: 80px;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.mt-claim-result-meta { text-align: left; flex: 1; }
.mt-claim-result-name { font-size: 16px; font-weight: 900; color: #ffe680; }
.mt-claim-result-lvup {
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.mt-claim-result-lv-old { color: rgba(255,255,255,0.55); }
.mt-claim-result-lv-new {
  color: #66bb6a;
  font-size: 16px;
  text-shadow: 0 0 8px rgba(102,187,106,0.7);
}
.mt-claim-result-arrow { color: rgba(255,255,255,0.6); font-size: 12px; }

.mt-claim-result-bar-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 14px;
}
.mt-claim-result-bar-row .mt-claim-result-bar-label {
  font-size: 13px;
  font-weight: 900;
  color: #cfd8dc;
  grid-row: span 2;
  text-align: right;
}
.mt-claim-result-bar {
  position: relative;
  height: 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
}
.mt-claim-result-bar-old {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, #90caf9 0%, #5d9cdb 100%);
}
.mt-claim-result-bar-new {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, #66bb6a 0%, #43a047 100%);
  width: 0;
  animation: mt-claim-bar-grow 0.9s 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
  box-shadow: 0 0 8px rgba(102,187,106,0.6);
}
@keyframes mt-claim-bar-grow {
  to { width: var(--target, 100%); }
}
.mt-claim-result-val {
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.mt-claim-result-val-old { color: rgba(255,255,255,0.55); }
.mt-claim-result-val-new { color: #66bb6a; font-size: 14px; }
.mt-claim-result-gain {
  background: rgba(76,175,80,0.25);
  border: 1px solid rgba(76,175,80,0.6);
  color: #b9e8b3;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  margin-left: 4px;
}

.mt-claim-result-confirm {
  background: linear-gradient(180deg, #f0c040 0%, #c08030 100%);
  border: 2px solid #fff;
  color: #2a1505;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 9px 24px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
}
.mt-claim-result-confirm:hover { filter: brightness(1.1); }

/* ─── 天賦覺醒慶祝彈窗（24h 集訓營 5% 觸發）─── */
.mt-talent-awaken-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, rgba(60,30,80,0.85), rgba(0,0,0,0.9));
  display: flex; align-items: center; justify-content: center;
  z-index: 12010;
  opacity: 0; transition: opacity 0.3s;
  backdrop-filter: blur(8px);
  padding: 20px;
}
.mt-talent-awaken-overlay.open { opacity: 1; }
.mt-talent-awaken-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: 24px 20px 20px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2a1a4e 0%, #1a0828 100%);
  border: 3px solid #ff6b9d;
  box-shadow:
    0 0 60px rgba(255,107,157,0.7),
    0 20px 50px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.15);
  text-align: center;
  color: #fff;
  overflow: hidden;
  animation: mt-talent-awaken-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mt-talent-awaken-card.rarity-SSR { border-color: #f0c040; box-shadow: 0 0 60px rgba(240,192,64,0.8), 0 20px 50px rgba(0,0,0,0.7); }
.mt-talent-awaken-card.rarity-SR  { border-color: #9b87f5; box-shadow: 0 0 50px rgba(155,135,245,0.6), 0 20px 50px rgba(0,0,0,0.7); }
@keyframes mt-talent-awaken-pop {
  0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* 放射光線（背景）*/
.mt-talent-awaken-rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 0;
}
.mt-talent-ray {
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 320px;
  margin-left: -2px;
  background: linear-gradient(180deg, rgba(255,213,128,0.5), transparent);
  transform-origin: 0 0;
  transform: rotate(var(--ang)) translateY(-160px);
  animation: mt-talent-ray-spin 8s linear infinite;
}
@keyframes mt-talent-ray-spin {
  to { transform: rotate(calc(var(--ang) + 360deg)) translateY(-160px); }
}

/* ──── PvP 週賽季結算 popup ──── */
.mt-pvp-weekly-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 10010;
  opacity: 0; transition: opacity 0.25s ease;
}
.mt-pvp-weekly-overlay.open { opacity: 1; }
.mt-pvp-weekly-card {
  background: linear-gradient(180deg, rgba(30,30,55,0.98), rgba(15,15,30,0.98));
  border: 3px solid #f0c040;
  border-radius: 16px;
  padding: 24px 22px;
  width: min(360px, 92vw);
  text-align: center;
  box-shadow: 0 12px 36px rgba(0,0,0,0.7), 0 0 30px rgba(240,192,64,0.4);
  animation: mt-pvp-weekly-in 0.5s cubic-bezier(0.34, 1.6, 0.64, 1);
}
@keyframes mt-pvp-weekly-in {
  0% { opacity: 0; transform: scale(0.7) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mt-pvp-weekly-week {
  font-size: 12px; letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 4px;
}
.mt-pvp-weekly-tier {
  font-size: 32px; font-weight: 900;
  letter-spacing: 4px;
  margin-bottom: 16px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
}
.mt-pvp-weekly-stats {
  display: flex; gap: 12px; justify-content: center;
  margin-bottom: 12px;
}
.mt-pvp-weekly-stat {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 8px;
}
.mt-pvp-weekly-stat-num {
  font-size: 22px; font-weight: 900;
  color: #f0c040;
}
.mt-pvp-weekly-stat-lbl {
  font-size: 11px; color: rgba(255,255,255,0.6);
  margin-top: 2px;
}
.mt-pvp-weekly-badge {
  background: linear-gradient(135deg, rgba(255,150,30,0.3), rgba(240,192,64,0.3));
  border: 1px solid rgba(240,192,64,0.6);
  color: #ffe680;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
  display: inline-block;
}
.mt-pvp-weekly-rewards {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 16px;
}
.mt-pvp-weekly-rewards-title {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.mt-pvp-weekly-reward-row {
  font-size: 15px; font-weight: 700;
  color: #fff;
  padding: 4px 0;
}
.mt-pvp-weekly-claim {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, #66bb6a, #43a047);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 16px; font-weight: 900;
  cursor: pointer;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(76,175,80,0.4);
}
.mt-pvp-weekly-claim:hover { background: linear-gradient(180deg, #81c784, #66bb6a); }
.mt-pvp-weekly-claim:disabled { opacity: 0.6; cursor: not-allowed; }
.mt-pvp-weekly-later {
  display: block; width: 100%;
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 8px;
  font-size: 13px;
  cursor: pointer;
}
.mt-pvp-weekly-later:hover { color: #fff; border-color: rgba(255,255,255,0.4); }
.mt-pvp-weekly-other {
  display: block; width: 100%;
  background: rgba(66, 165, 245, 0.18);
  color: #90caf9;
  border: 1px solid rgba(66, 165, 245, 0.5);
  border-radius: 8px;
  padding: 10px;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
}
.mt-pvp-weekly-other:hover { background: rgba(66, 165, 245, 0.28); }

/* PvP 週賽季狀態列（比賽 tab、PvP 按鈕上方） */
.mt-pvp-week-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 0 6px;
  background: linear-gradient(180deg, rgba(40,30,55,0.85), rgba(20,15,30,0.85));
  border: 1px solid rgba(240,192,64,0.45);
  border-radius: 10px;
  width: 100%;
  font-family: inherit;
  color: #fff;
  text-align: left;
}
.mt-pvp-week-status.is-clickable {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mt-pvp-week-status.is-clickable:hover {
  border-color: rgba(240,192,64,0.85);
  background: linear-gradient(180deg, rgba(50,40,70,0.95), rgba(25,20,40,0.95));
}
.mt-pvp-week-tier-next {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: rgba(240,192,64,0.75);
  margin-top: 2px;
}
.mt-pvp-week-mid {
  flex: 1;
  text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.mt-pvp-week-cta {
  font-size: 12px;
  color: #ffd96f;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(240,192,64,0.18);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(240,192,64,0.4);
}
.mt-pvp-week-tier {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px;
}
.mt-pvp-week-tier-icon { font-size: 18px; }
.mt-pvp-week-tier-name { font-weight: 900; letter-spacing: 1px; }
.mt-pvp-week-tier-elo {
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  font-weight: 700;
}
.mt-pvp-week-countdown {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 11px;
}
.mt-pvp-week-countdown-label {
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.5px;
}
.mt-pvp-week-countdown-time {
  color: #f0c040;
  font-weight: 800;
  font-size: 13px;
}

/* 未領清單 modal */
.mt-pvp-weekly-list-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 10005;
  opacity: 0; transition: opacity 0.2s;
}
.mt-pvp-weekly-list-overlay.open { opacity: 1; }
.mt-pvp-weekly-list-card {
  background: linear-gradient(180deg, rgba(30,30,55,0.98), rgba(15,15,30,0.98));
  border: 2px solid rgba(240,192,64,0.5);
  border-radius: 12px;
  padding: 20px;
  width: min(380px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
.mt-pvp-weekly-list-title {
  font-size: 18px; font-weight: 900;
  color: #f0c040;
  margin-bottom: 4px;
  text-align: center;
}
.mt-pvp-weekly-list-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  text-align: center;
  margin-bottom: 14px;
}
.mt-pvp-weekly-list-items {
  display: flex; flex-direction: column; gap: 8px;
}
.mt-pvp-weekly-list-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid #f0c040;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.mt-pvp-weekly-list-item:hover { background: rgba(255,255,255,0.1); }
.mt-pvp-weekly-list-item-top {
  display: flex; justify-content: space-between;
  font-size: 14px;
}
.mt-pvp-weekly-list-item-week {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
}
.mt-pvp-weekly-list-item-mid {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  margin: 4px 0;
}
.mt-pvp-weekly-list-item-rewards {
  font-size: 13px;
  color: #f0c040;
  font-weight: 700;
}

/* ============================================================
   積分賽 tab — 沉浸式競技場場景（深黑底 + 段位聚光 + 邊角 vignette）
   ============================================================ */
/* 段位主題色變數（hub-content 也定義一份、給背景用）*/
.mt-hub-content[data-tab="arena"][data-tier="master"]   { --tier-bg-glow: rgba(255,82,82,0.22); }
.mt-hub-content[data-tab="arena"][data-tier="diamond"]  { --tier-bg-glow: rgba(66,165,245,0.22); }
.mt-hub-content[data-tab="arena"][data-tier="platinum"] { --tier-bg-glow: rgba(77,208,225,0.25); }
.mt-hub-content[data-tab="arena"][data-tier="gold"]     { --tier-bg-glow: rgba(240,192,64,0.22); }
.mt-hub-content[data-tab="arena"][data-tier="silver"]   { --tier-bg-glow: rgba(207,216,220,0.15); }
.mt-hub-content[data-tab="arena"][data-tier="bronze"]   { --tier-bg-glow: rgba(205,127,50,0.18); }

.mt-hub-content[data-tab="arena"] {
  background:
    /* 頂部段位聚光（依 tier 變色、CSS var 從 .mt-arena-tab 透傳）*/
    radial-gradient(ellipse 75% 30% at 50% 0%, var(--tier-bg-glow, rgba(240,192,64,0.18)) 0%, transparent 65%),
    /* 中央暗紫薄霧 */
    radial-gradient(ellipse 60% 40% at 50% 38%, rgba(70,40,110,0.18) 0%, transparent 60%),
    /* 底部地平線光 */
    radial-gradient(ellipse 90% 18% at 50% 95%, var(--tier-bg-glow, rgba(240,192,64,0.1)) 0%, transparent 70%),
    /* 暗夜深底 */
    linear-gradient(180deg, #060410 0%, #0b0820 30%, #100a26 65%, #060410 100%);
}
/* 四角 vignette + 細微星點 */
.mt-hub-content[data-tab="arena"]::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle 200px at 0% 0%,   rgba(0,0,0,0.55) 0%, transparent 100%),
    radial-gradient(circle 200px at 100% 0%, rgba(0,0,0,0.55) 0%, transparent 100%),
    radial-gradient(circle 200px at 0% 100%, rgba(0,0,0,0.45) 0%, transparent 100%),
    radial-gradient(circle 200px at 100% 100%, rgba(0,0,0,0.45) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.mt-hub-content[data-tab="arena"]::after {
  content: ''; position: absolute; inset: 0;
  /* 高雅菱格 + 細微星點 */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 0.8px, transparent 1.2px),
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.018) 0 1px,
      transparent 1px 14px),
    repeating-linear-gradient(-45deg,
      rgba(255,255,255,0.012) 0 1px,
      transparent 1px 14px);
  background-size: 28px 28px, auto, auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.mt-hub-content[data-tab="arena"] > * { position: relative; z-index: 1; }

.mt-arena-tab {
  position: relative;
  padding: 14px 12px 24px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 100%;
}
.mt-arena-bg { display: none; }  /* 背景已搬到 hub-content [data-tab=arena]、舊節點不再需要 */

/* 段位顏色變數 */
.mt-arena-tab[data-tier="master"]   { --tier-c1: #ff5252; --tier-c2: #b71c1c; --tier-bg-glow: rgba(255,82,82,0.22);  --tier-text: #ff8a80; --tier-shadow: rgba(255,82,82,0.6); }
.mt-arena-tab[data-tier="diamond"]  { --tier-c1: #42a5f5; --tier-c2: #1565c0; --tier-bg-glow: rgba(66,165,245,0.22); --tier-text: #90caf9; --tier-shadow: rgba(66,165,245,0.55); }
.mt-arena-tab[data-tier="platinum"] { --tier-c1: #e0f7fa; --tier-c2: #00acc1; --tier-bg-glow: rgba(77,208,225,0.25); --tier-text: #84ffff; --tier-shadow: rgba(0,172,193,0.6); }
.mt-arena-tab[data-tier="gold"]     { --tier-c1: #f0c040; --tier-c2: #b8860b; --tier-bg-glow: rgba(240,192,64,0.22); --tier-text: #ffd96f; --tier-shadow: rgba(240,192,64,0.55); }
.mt-arena-tab[data-tier="silver"]   { --tier-c1: #d7d7d7; --tier-c2: #757575; --tier-bg-glow: rgba(207,216,220,0.15); --tier-text: #cfd8dc; --tier-shadow: rgba(207,216,220,0.4); }
.mt-arena-tab[data-tier="bronze"]   { --tier-c1: #cd7f32; --tier-c2: #5d4037; --tier-bg-glow: rgba(205,127,50,0.18);  --tier-text: #d2a878; --tier-shadow: rgba(205,127,50,0.45); }

/* ────────── 段位狀態列（依段位變色） ────────── */
.mt-arena-tier-bar {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 16px 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tier-c1) 18%, #1a1530) 0%, color-mix(in srgb, var(--tier-c2) 22%, #0d0a1c) 100%);
  border: 2px solid color-mix(in srgb, var(--tier-c1) 55%, transparent);
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  box-shadow: 0 6px 22px var(--tier-shadow);
  transition: transform 0.15s, box-shadow 0.2s;
}
.mt-arena-tier-bar:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px var(--tier-shadow);
}
.mt-arena-tier-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--tier-c1) 35%, transparent) 0%, transparent 50%);
  pointer-events: none;
}
/* 上方狀態列：mini shield + 段位獎勵預覽 */
.mt-arena-mini-shield {
  width: 44px;
  height: 52px;
  flex: 0 0 auto;
  overflow: visible;
  filter: drop-shadow(0 3px 8px var(--tier-shadow));
  z-index: 1;
}
.mt-arena-tier-rewards {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 1;
  min-width: 0;
}
.mt-arena-rwd-now {
  display: inline-block;
  background: linear-gradient(135deg, var(--tier-c1), var(--tier-c2));
  color: #000;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 1px 4px var(--tier-shadow);
  flex: 0 0 auto;
}
.mt-arena-rwd-next-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 1px;
  padding: 1px 5px;
  border: 1px dashed rgba(255,255,255,0.2);
  border-radius: 3px;
  flex: 0 0 auto;
}
.mt-arena-rwd-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  white-space: nowrap;
}
.mt-arena-rwd-label {
  color: rgba(255,255,255,0.65);
  flex: 0 0 auto;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.mt-arena-rwd-items {
  display: flex; gap: 5px;
  flex-wrap: wrap;
}
/* 目前段位列：放大、加重 */
.mt-arena-rwd-current .mt-arena-rwd-label {
  color: var(--tier-text);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.mt-arena-rwd-current .mt-arena-rwd-pill {
  font-size: 13px;
  padding: 3px 11px;
  font-weight: 900;
  background: rgba(0,0,0,0.45);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* 下一階列：縮小、降不透明、給「升級會多拿這些」的對比暗示 */
.mt-arena-rwd-next {
  font-size: 11px;
  opacity: 0.75;
}
.mt-arena-rwd-next .mt-arena-rwd-label {
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.mt-arena-rwd-next .mt-arena-rwd-pill {
  font-size: 10px;
  padding: 1px 7px;
  font-weight: 700;
  background: rgba(255,255,255,0.04);
}

.mt-arena-rwd-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  letter-spacing: 0.3px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
}
.mt-arena-rwd-pill.rwd-gem    { color: #80deea; border-color: rgba(128,222,234,0.5); }
.mt-arena-rwd-pill.rwd-coach  { color: #ffd96f; border-color: rgba(240,192,64,0.5); }
.mt-arena-rwd-pill.rwd-gacha  { color: #a5d6a7; border-color: rgba(165,214,167,0.5); }
.mt-arena-tier-text { display: flex; flex-direction: column; gap: 2px; }
.mt-arena-tier-name {
  font-size: 20px; font-weight: 900;
  color: var(--tier-text);
  letter-spacing: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.mt-arena-tier-elo {
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.85);
}
.mt-arena-tier-next {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  margin-left: 4px;
}
.mt-arena-tier-right {
  margin-left: auto;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  z-index: 1;
}
.mt-arena-cta-pill {
  font-size: 11px;
  color: var(--tier-text);
  font-weight: 800;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.4);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tier-c1) 50%, transparent);
  white-space: nowrap;
}
.mt-arena-countdown {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 10px;
}
.mt-arena-countdown .mt-pvp-week-countdown-label {
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.3px;
}
.mt-arena-countdown .mt-pvp-week-countdown-time {
  color: var(--tier-text);
  font-weight: 800;
  font-size: 12px;
}
/* 段位進度條（底部） */
.mt-arena-tier-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(0,0,0,0.45);
}
.mt-arena-tier-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tier-c1), color-mix(in srgb, var(--tier-c1) 70%, white));
  box-shadow: 0 0 8px var(--tier-shadow);
  transition: width 0.5s ease-out;
}

/* ────────── PvP 主卡片（含動畫） ────────── */
.mt-arena-main {
  position: relative;
  background: linear-gradient(180deg, rgba(30,25,50,0.92), rgba(15,12,30,0.92));
  border: 2px solid color-mix(in srgb, var(--tier-c1, #f0c040) 35%, transparent);
  border-radius: 16px;
  padding: 22px 18px 18px;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
.mt-arena-main-glow {
  position: absolute;
  inset: -2px;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--tier-c1, #f0c040) 15%, transparent) 0%, transparent 65%);
  pointer-events: none;
  animation: mt-arena-main-glow-pulse 4s ease-in-out infinite;
}
@keyframes mt-arena-main-glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* 大盾牌 emblem — 段位 + 積分當中央主視覺 */
.mt-arena-emblem-wrap {
  position: relative;
  display: inline-block;
  width: 230px;
  height: 270px;
  margin-bottom: 16px;
}
.mt-arena-big-shield {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;     /* 讓 drop shadow 不被 SVG viewBox 切到 */
  animation: mt-arena-shield-float 4s ease-in-out infinite;
}
@keyframes mt-arena-shield-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.mt-arena-emblem-text {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  pointer-events: none;
}
.mt-arena-emblem-tier {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 8px;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.85),
    0 0 12px rgba(255,255,255,0.4);
  margin-left: 8px; /* 補 letter-spacing 視覺中心 */
}
.mt-arena-emblem-elo {
  font-size: 38px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.9),
    0 0 16px var(--tier-shadow, rgba(255,255,255,0.5));
  font-family: 'Impact', 'Arial Black', sans-serif;
  line-height: 1;
  margin-top: 2px;
}
.mt-arena-emblem-next {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
  margin-top: 8px;
  padding: 3px 10px;
  background: rgba(0,0,0,0.45);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.2);
}
/* 放射光影（取代之前的虛線環）*/
.mt-arena-emblem-rays {
  position: absolute;
  width: 340px; height: 340px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 8px var(--tier-shadow, rgba(240,192,64,0.3)));
}
/* 每道光獨立伸縮（內底固定、尖端拉伸）*/
.mt-arena-ray {
  transform-origin: 0 0;  /* 內底為錨點 */
  animation: mt-arena-ray-pulse 2.4s ease-in-out infinite;
  animation-delay: calc(var(--ray-i, 0) * -0.13s);
}
@keyframes mt-arena-ray-pulse {
  0%, 100% { transform: scaleY(0.7); opacity: 0.55; }
  50%      { transform: scaleY(1.25); opacity: 1; }
}
.mt-arena-hero-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

/* 集訓 / 傷停警告 — 「找對手」按鈕上方紅字、讓玩家知道誰會被替補 */
.mt-arena-lineup-warn {
  font-size: 12px;
  font-weight: 600;
  color: #ff8a80;
  background: rgba(176, 24, 24, 0.18);
  border: 1px solid rgba(229, 57, 53, 0.45);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  text-align: center;
  line-height: 1.45;
  letter-spacing: 0.3px;
}

.mt-arena-find-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  background: linear-gradient(180deg, #e53935, #b71c1c);
  color: #fff;
  border: 2px solid rgba(255,150,30,0.6);
  border-radius: 12px;
  padding: 14px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(229,57,53,0.45);
  transition: transform 0.15s, box-shadow 0.2s;
  overflow: hidden;
}
.mt-arena-find-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: mt-arena-find-shine 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mt-arena-find-shine {
  0%, 50% { transform: translateX(-100%); }
  60% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
.mt-arena-find-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(229,57,53,0.6);
}
.mt-arena-find-btn:active:not(:disabled) { transform: translateY(0); }
.mt-arena-find-btn:disabled,
.mt-arena-find-btn.is-locked {
  background: linear-gradient(180deg, #555, #333);
  border-color: rgba(255,255,255,0.15);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.7;
}
.mt-arena-find-btn:disabled::before,
.mt-arena-find-btn.is-locked::before { display: none; }
.mt-arena-find-text { flex: 0 0 auto; position: relative; z-index: 1; }
.mt-arena-find-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.85);
  display: flex; gap: 6px; align-items: center;
  position: relative; z-index: 1;
}
.mt-arena-tag-ticket {
  background: rgba(240,192,64,0.3);
  color: #ffd96f;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(240,192,64,0.5);
  font-size: 10px;
}
.mt-arena-tag-lock {
  background: rgba(239,83,80,0.3);
  color: #ef9a9a;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
}

/* ────────── shortcut 卡片 ────────── */
.mt-arena-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mt-arena-shortcut {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  color: #fff;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  overflow: hidden;
  position: relative;
}
.mt-arena-shortcut:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  border-color: rgba(240,192,64,0.45);
  transform: translateY(-2px);
}
.mt-arena-shortcut-icon-wrap {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(240,192,64,0.25), rgba(240,192,64,0.05));
  border: 1px solid rgba(240,192,64,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.mt-arena-shortcut-icon-wrap svg {
  width: 24px; height: 24px;
}
.mt-arena-shortcut-records .mt-arena-shortcut-icon-wrap {
  background: linear-gradient(135deg, rgba(66,165,245,0.25), rgba(66,165,245,0.05));
  border-color: rgba(66,165,245,0.4);
}
.mt-arena-shortcut-rank .mt-arena-shortcut-icon-wrap {
  background: linear-gradient(135deg, rgba(255,150,30,0.3), rgba(240,192,64,0.1));
  border-color: rgba(255,150,30,0.45);
}
.mt-arena-shortcut-icon { line-height: 1; }
.mt-arena-shortcut-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-arena-shortcut-label { font-weight: 800; font-size: 14px; }
.mt-arena-shortcut-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 對戰紀錄 modal */
.mt-records-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  z-index: 10005;
  opacity: 0; transition: opacity 0.2s;
  padding: 20px;
}
.mt-records-modal-overlay.open { opacity: 1; }
.mt-records-modal-card {
  background: linear-gradient(180deg, rgba(30,30,55,0.98), rgba(15,15,30,0.98));
  border: 2px solid rgba(240,192,64,0.5);
  border-radius: 14px;
  padding: 20px;
  width: min(450px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}
.mt-records-modal-title {
  font-size: 18px; font-weight: 900;
  color: #f0c040;
  text-align: center;
  margin-bottom: 14px;
}

/* 賽季說明 / 獎勵表 modal */
.mt-pvp-season-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 10005;
  opacity: 0; transition: opacity 0.2s;
  padding: 20px;
}
.mt-pvp-season-overlay.open { opacity: 1; }
.mt-pvp-season-card {
  background: linear-gradient(180deg, rgba(30,30,55,0.98), rgba(15,15,30,0.98));
  border: 2px solid rgba(240,192,64,0.6);
  border-radius: 14px;
  padding: 22px;
  width: min(400px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 12px 36px rgba(0,0,0,0.7);
}
.mt-pvp-season-title {
  font-size: 20px; font-weight: 900;
  color: #f0c040;
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: 2px;
}
.mt-pvp-season-intro {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.5;
}
.mt-pvp-season-unclaimed {
  display: block; width: 100%;
  background: linear-gradient(180deg, rgba(255,150,30,0.3), rgba(220,60,40,0.3));
  color: #ffd96f;
  border: 1px solid rgba(255,150,30,0.65);
  border-radius: 10px;
  padding: 10px;
  font-size: 14px; font-weight: 800;
  cursor: pointer;
  margin-bottom: 14px;
  animation: mt-pvp-unclaimed-pulse 1.5s ease-in-out infinite;
}
@keyframes mt-pvp-unclaimed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,150,30,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(255,150,30,0); }
}
.mt-pvp-season-section-title {
  font-size: 13px; font-weight: 800;
  color: #ffd96f;
  letter-spacing: 1px;
  margin: 12px 0 6px;
  text-align: left;
}
.mt-pvp-season-tiers {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 4px;
}
.mt-pvp-season-tier-row {
  display: grid;
  grid-template-columns: 1fr auto 1.6fr;
  gap: 8px;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid #f0c040;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}
.mt-pvp-season-tier-row.is-current {
  background: rgba(240,192,64,0.14);
  border-left-width: 5px;
}
.mt-pvp-season-tier-name { font-weight: 800; }
.mt-pvp-season-cur-tag {
  font-size: 10px;
  background: rgba(240,192,64,0.35);
  color: #1a1100;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 6px;
  font-weight: 900;
}
.mt-pvp-season-tier-elo {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  font-weight: 700;
  text-align: center;
}
.mt-pvp-season-tier-rwd {
  font-size: 13px;
  color: #f0c040;
  font-weight: 700;
  text-align: right;
}
.mt-pvp-season-ranks {
  display: flex; flex-direction: column; gap: 6px;
}
.mt-pvp-season-rank-row {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
}
.mt-pvp-season-rank-row.is-top1 {
  background: linear-gradient(135deg, rgba(255,150,30,0.2), rgba(240,192,64,0.2));
  border-color: rgba(255,150,30,0.5);
}
.mt-pvp-season-rank-tag { font-weight: 900; color: #ffd96f; }
.mt-pvp-season-rank-rwd { color: #f0c040; font-weight: 700; }
.mt-pvp-season-foot {
  margin-top: 14px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.mt-talent-awaken-title {
  position: relative; z-index: 2;
  font-size: 22px;
  font-weight: 900;
  color: #ffe680;
  letter-spacing: 4px;
  text-shadow: 0 0 16px rgba(240,192,64,0.9), 0 2px 4px rgba(0,0,0,0.6);
  margin-bottom: 4px;
}
.mt-talent-awaken-sub {
  position: relative; z-index: 2;
  font-size: 11px;
  color: rgba(255, 230, 128, 0.75);
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.mt-talent-awaken-hero {
  position: relative;
  width: 130px; height: 160px;
  margin: 6px auto 8px;
  z-index: 2;
}
.mt-talent-awaken-halo {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(255,213,128,0.6) 0%, rgba(255,107,157,0.3) 50%, transparent 70%);
  border-radius: 50%;
  filter: blur(8px);
  animation: mt-talent-halo-pulse 1.5s ease-in-out infinite;
  z-index: 0;
}
@keyframes mt-talent-halo-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.15); opacity: 1; }
}
.mt-talent-awaken-hero img {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  image-rendering: pixelated;
}

.mt-talent-awaken-name {
  position: relative; z-index: 2;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.mt-talent-awaken-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f0c040, #ff6b9d);
  color: #2a0a1f;
  font-size: 18px;
  font-weight: 900;
  padding: 6px 18px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 0 20px rgba(255,107,157,0.7), 0 4px 10px rgba(0,0,0,0.5);
  margin-bottom: 10px;
  letter-spacing: 1px;
  position: relative; z-index: 2;
}
.mt-talent-awaken-icon { font-size: 20px; }
.mt-talent-awaken-label { font-size: 16px; }

.mt-talent-awaken-effect {
  position: relative; z-index: 2;
  font-size: 12.5px;
  color: #e1bee7;
  font-weight: 700;
  margin-bottom: 16px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.4);
  border-radius: 8px;
  border: 1px solid rgba(255,107,157,0.3);
  line-height: 1.4;
}

.mt-talent-awaken-confirm {
  position: relative; z-index: 2;
  background: linear-gradient(180deg, #ffe680 0%, #c08030 100%);
  border: 2px solid #fff;
  color: #2a1505;
  font-size: 15px;
  font-weight: 900;
  padding: 10px 30px;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 1.5px;
  box-shadow: 0 0 16px rgba(240,192,64,0.6), 0 4px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.5);
}
.mt-talent-awaken-confirm:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ─── 集訓營 preview modal (4 時長卡 + 能力條增量) ─── */
.mt-focus-preview-overlay { z-index: 12003; }
.mt-focus-preview-card { max-width: 460px; }
.mt-focus-preview-title {
  font-size: 19px;
  font-weight: 900;
  color: #ffe680;
  text-align: center;
  letter-spacing: 1.5px;
  margin-bottom: 2px;
}
.mt-focus-preview-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.65);
  text-align: center;
  margin-bottom: 14px;
}
.mt-focus-preview-bars {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 6px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mt-focus-preview-bars .mt-train-preview-row.is-target .mt-train-preview-label {
  color: #ffe680;
  font-weight: 900;
}

/* 4 時長卡片 — 4 等分 grid */
.mt-focus-tier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.mt-focus-tier-card {
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 8px 4px;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: transform 0.1s, border-color 0.12s, background 0.12s;
}
.mt-focus-tier-card:hover {
  transform: translateY(-1px);
  border-color: rgba(240,192,64,0.6);
  background: rgba(240,192,64,0.08);
}
.mt-focus-tier-card.is-selected {
  border-color: #f0c040;
  background: linear-gradient(180deg, rgba(240,192,64,0.25), rgba(240,192,64,0.08));
  box-shadow: 0 0 12px rgba(240,192,64,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mt-focus-tier-card.is-premium {
  border-color: rgba(255,107,157,0.5);
}
.mt-focus-tier-card.is-premium.is-selected {
  border-color: #ff6b9d;
  background: linear-gradient(180deg, rgba(255,107,157,0.25), rgba(155,135,245,0.12));
  box-shadow: 0 0 14px rgba(255,107,157,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.mt-focus-tier-label {
  font-size: 13px;
  font-weight: 900;
  color: #ffe680;
  letter-spacing: 0.5px;
}
.mt-focus-tier-gain {
  font-size: 10px;
  color: rgba(255,255,255,0.8);
}
.mt-focus-tier-gain b { color: #b9e8b3; font-size: 14px; }
.mt-focus-tier-extra {
  font-size: 10px;
  font-weight: 800;
  color: #90caf9;
}
.mt-focus-tier-extra-empty { font-size: 10px; opacity: 0; user-select: none; }
.mt-focus-tier-talent {
  font-size: 9.5px;
  font-weight: 900;
  color: #ff6b9d;
  text-shadow: 0 0 6px rgba(255,107,157,0.5);
  letter-spacing: 0.3px;
}
.mt-focus-tier-finish {
  text-align: center;
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(255,255,255,0.75);
  margin-bottom: 8px;
  background: rgba(0,0,0,0.25);
  padding: 4px 8px;
  border-radius: 6px;
}

/* ─── 訓練預覽 modal (能力卡 + 增量條) ─── */
.mt-train-preview-overlay { z-index: 12003; }
.mt-train-preview-card { max-width: 420px; }
.mt-train-preview-title {
  font-size: 18px;
  font-weight: 900;
  color: #ffe680;
  text-align: center;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.mt-train-preview-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  text-align: center;
  margin-bottom: 12px;
}
.mt-train-preview-lv-up {
  color: #ffe680;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(240,192,64,0.5);
}
.mt-train-preview-bars {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.mt-train-preview-row {
  display: grid;
  grid-template-columns: 38px 1fr 82px;
  align-items: center;
  gap: 8px;
}
.mt-train-preview-label {
  font-size: 12px;
  font-weight: 800;
  color: #cfd8dc;
  text-align: right;
}
.mt-train-preview-bar {
  position: relative;
  height: 12px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.mt-train-preview-bar-cur {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, #90caf9 0%, #5d9cdb 100%);
  border-radius: 6px 0 0 6px;
}
.mt-train-preview-bar-gain {
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(180deg, #66bb6a 0%, #2e7d32 100%);
  border-radius: 0 6px 6px 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    0 0 8px rgba(102,187,106,0.6);
  animation: mt-train-gain-pulse 1.2s ease-in-out infinite;
}
@keyframes mt-train-gain-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}
.mt-train-preview-val {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 900;
}
.mt-train-preview-val-cur { color: #fff; min-width: 22px; text-align: right; }
.mt-train-preview-val-gain {
  color: #b9e8b3;
  background: rgba(76,175,80,0.2);
  border: 1px solid rgba(76,175,80,0.5);
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.3px;
}
.mt-train-preview-val-cap {
  color: #ffd54f;
  background: rgba(255,213,79,0.18);
  border: 1px solid rgba(255,213,79,0.5);
  padding: 1px 5px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.3px;
}
.mt-focus-tier-cap-warn {
  background: rgba(255,213,79,0.10);
  border: 1px solid rgba(255,213,79,0.35);
  color: #ffd54f;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
  line-height: 1.5;
}

.mt-train-preview-cost {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  margin-bottom: 6px;
}
.mt-train-preview-cost-label {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.65);
  margin-right: 2px;
}
.mt-train-preview-cost-pill {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
}
.mt-train-preview-cost-pill.is-miss {
  background: rgba(229,57,53,0.18);
  border-color: rgba(229,57,53,0.6);
  color: #ffab91;
}

.mt-train-preview-blocked {
  background: rgba(229,57,53,0.18);
  border: 1px solid rgba(229,57,53,0.55);
  color: #ffab91;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 8px;
}

.mt-train-preview-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.mt-train-preview-cancel {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  padding: 9px;
  border-radius: 10px;
  cursor: pointer;
}
.mt-train-preview-cancel:hover { background: rgba(255,255,255,0.12); }
.mt-train-preview-confirm {
  flex: 2;
  background: linear-gradient(180deg, #66bb6a 0%, #2e7d32 100%);
  border: 1.5px solid #1b5e20;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  padding: 9px;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(46,125,50,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  letter-spacing: 1px;
}
.mt-train-preview-confirm:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.mt-train-preview-confirm:disabled {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5);
  cursor: not-allowed;
  box-shadow: none;
}
.mt-train-pick-busy {
  font-size: 12px;
  text-align: center;
  padding: 8px;
  color: #ffe680;
  background: rgba(240,192,64,0.12);
  border-radius: 8px;
  font-weight: 800;
}

/* 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;
}
/* 場上球員受傷標示 — 紅底底部橫條 + 脈動光暈，跨整張 portrait 不可能漏看 */
.mt-pitch-injury {
  position: absolute;
  left: -2px; right: -2px; bottom: -3px;
  background: linear-gradient(180deg, #e53935, #b71c1c);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 0 2px;
  border-radius: 4px;
  border: 1.5px solid #fff;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  box-shadow: 0 0 8px rgba(229,57,53,0.85);
  z-index: 5;
  pointer-events: none;
  animation: mt-injury-pulse 1.4s ease-in-out infinite;
}
@keyframes mt-injury-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(229,57,53,0.7); filter: brightness(1); }
  50%      { box-shadow: 0 0 14px rgba(229,57,53,1);   filter: brightness(1.2); }
}
/* 場上球員集訓中 — 橘底，跟受傷的紅底區分 */
.mt-pitch-training {
  position: absolute;
  left: -2px; right: -2px; bottom: -3px;
  background: linear-gradient(180deg, #ff9800, #e65100);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 0 2px;
  border-radius: 4px;
  border: 1.5px solid #fff;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  box-shadow: 0 0 8px rgba(255,152,0,0.85);
  z-index: 5;
  pointer-events: none;
  animation: mt-training-pulse 1.6s ease-in-out infinite;
}
@keyframes mt-training-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,152,0,0.7); filter: brightness(1); }
  50%      { box-shadow: 0 0 14px rgba(255,152,0,1);   filter: brightness(1.2); }
}
/* 集訓中球員 portrait 半透明 + 灰階感 */
.mt-pitch-player.is-training .mt-pitch-player-portrait img,
.mt-bench-player.is-training img { opacity: 0.5; filter: saturate(0.5); }
.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.rarity-SSR .mt-pitch-player-name { color: #ffd866; text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 6px rgba(240,192,64,0.6); }
.mt-pitch-player.rarity-SR  .mt-pitch-player-name { color: #c9b6ff; text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 5px rgba(155,135,245,0.5); }
.mt-pitch-player.rarity-R   .mt-pitch-player-name { color: #8ec0ff; text-shadow: 0 1px 2px rgba(0,0,0,0.95); }
.mt-pitch-player.rarity-N   .mt-pitch-player-name { color: #c7ccd5; text-shadow: 0 1px 2px rgba(0,0,0,0.95); }
.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); color: #fff;
  font-size: 9px; padding: 1px 4px; border-radius: 3px;
  font-weight: 800; letter-spacing: 0.5px;
}
/* rarity chip 用半透明、避免跟位置 chip (FWD/DEF/MID) 的飽和色互搶 */
.mt-bench-player.rarity-N   .mt-bench-rarity { background: rgba(120,128,140,0.55); color: #fff; }
.mt-bench-player.rarity-R   .mt-bench-rarity { background: rgba(64,156,255,0.55); color: #fff; }
.mt-bench-player.rarity-SR  .mt-bench-rarity { background: rgba(155,135,245,0.65); color: #fff; }
.mt-bench-player.rarity-SSR .mt-bench-rarity { background: rgba(240,192,64,0.85); color: #2a1505; }

/* 球員稀有度光暈金字塔 — R 藍光、SR 紫光、SSR 金光（N 保持基本卡形式不弱化）*/
/* 改用藍色避免跟綠色球場背景互搶 */
.mt-pitch-player.rarity-R .mt-pitch-player-portrait {
  filter: drop-shadow(0 0 4px rgba(64,156,255,0.6));
}
.mt-bench-player.rarity-R { border-color: rgba(64,156,255,0.55); }

/* roster-slot 補 N / R 顏色（半透明、跟 chip 一致）*/
.mt-roster-slot-rarity.rarity-N { background: rgba(120,128,140,0.7); color: #fff; }
.mt-roster-slot-rarity.rarity-R { background: rgba(64,156,255,0.7); color: #fff; }
/* 板凳球員受傷標示 — 紅底全寬橫條（蓋在 portrait 下緣）*/
.mt-bench-injury {
  position: absolute;
  left: 4px; right: 4px;
  top: 50px;
  background: linear-gradient(180deg, #e53935, #b71c1c);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 0 2px;
  border-radius: 3px;
  border: 1px solid #fff;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  z-index: 5;
  box-shadow: 0 0 6px rgba(229,57,53,0.8);
  animation: mt-injury-pulse 1.4s ease-in-out infinite;
}
.mt-bench-training {
  position: absolute;
  left: 4px; right: 4px;
  top: 50px;
  background: linear-gradient(180deg, #ff9800, #e65100);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 0 2px;
  border-radius: 3px;
  border: 1px solid #fff;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  z-index: 5;
  box-shadow: 0 0 6px rgba(255,152,0,0.8);
  animation: mt-training-pulse 1.6s ease-in-out infinite;
}
.mt-bench-name { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-bench-player.rarity-SSR .mt-bench-name { color: #ffd866; }
.mt-bench-player.rarity-SR  .mt-bench-name { color: #c9b6ff; }
.mt-bench-player.rarity-R   .mt-bench-name { color: #8ec0ff; }
.mt-bench-player.rarity-N   .mt-bench-name { color: #aab; }
/* 球員展開頁 (mt-roster-slot) 名字依稀有度上色 */
.mt-roster-slot.rarity-SSR .mt-roster-slot-name { color: #ffd866; }
.mt-roster-slot.rarity-SR  .mt-roster-slot-name { color: #c9b6ff; }
.mt-roster-slot.rarity-R   .mt-roster-slot-name { color: #8ec0ff; }
.mt-roster-slot.rarity-N   .mt-roster-slot-name { color: #aab; }
.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-training-banner {
  background: rgba(255,152,0,0.18); border: 1px solid rgba(255,152,0,0.6);
  color: #ffcc80; padding: 8px; border-radius: 6px;
  font-weight: 700; margin-bottom: 12px;
  font-size: 13px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.mt-profile-training-actions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.mt-profile-training-cancel {
  background: rgba(255,152,0,0.35);
  border: 1px solid rgba(255,152,0,0.7);
  color: #fff;
  padding: 4px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  cursor: pointer; letter-spacing: 0.3px;
}
.mt-profile-training-cancel:hover { background: rgba(255,152,0,0.55); }
.mt-profile-training-cancel:disabled { opacity: 0.5; cursor: wait; }
.mt-profile-training-speedup {
  background: linear-gradient(180deg, #66bff8, #1e88e5);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 4px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  cursor: pointer; letter-spacing: 0.3px;
  box-shadow: 0 2px 4px rgba(30,136,229,0.4);
}
.mt-profile-training-speedup:hover { filter: brightness(1.1); }
.mt-profile-training-speedup:disabled { opacity: 0.5; cursor: wait; }
.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: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap;
}
.mt-profile-talent-pill {
  display: inline-block;
  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;
  color: #ffd866;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  margin-right: 4px;
}
.mt-profile-talent-pill:hover {
  background: rgba(240,192,64,0.25);
  border-color: rgba(240,192,64,0.65);
}
.mt-profile-talent-pill.is-active {
  background: rgba(240,192,64,0.35);
  border-color: #f0c040;
  box-shadow: 0 0 6px rgba(240,192,64,0.5);
  transform: scale(1.03);
}
.mt-profile-talent-desc {
  margin-top: 6px;
  background: rgba(20,18,8,0.7);
  border: 1px solid rgba(240,192,64,0.35);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
  animation: mt-profile-talent-desc-in 0.18s ease-out;
}
@keyframes mt-profile-talent-desc-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mt-profile-talent-desc b { color: #ffd866; }
.mt-profile-talent-desc-stat {
  font-size: 11px;
  color: #ffcc66;
  margin-left: 6px;
  opacity: 0.85;
}
.mt-profile-talent-desc-effect {
  margin-top: 3px;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
}

/* ─── 天賦替換 modal ─── */
.mt-talent-replace-card {
  max-width: 380px;
  padding: 22px 18px;
}
.mt-talent-replace-title {
  text-align: center; font-size: 18px; font-weight: 900;
  color: #f0c040; margin-bottom: 6px;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(240,192,64,0.45);
}
.mt-talent-replace-sub {
  text-align: center; font-size: 12px; color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
}
.mt-talent-replace-section-title {
  font-size: 11px; font-weight: 800;
  color: rgba(255,255,255,0.55);
  margin: 10px 0 6px;
  letter-spacing: 0.5px;
}
.mt-talent-replace-pill {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center; gap: 8px;
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 10px 12px; border-radius: 8px;
  cursor: pointer; text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  margin-bottom: 6px;
}
.mt-talent-replace-pill:hover:not(:disabled) {
  background: rgba(240,192,64,0.15);
  border-color: rgba(240,192,64,0.5);
  transform: translateY(-1px);
}
.mt-talent-replace-pill:disabled { opacity: 0.5; cursor: wait; }
.mt-talent-replace-icon { font-size: 20px; }
.mt-talent-replace-label { font-weight: 800; font-size: 14px; color: #ffd866; }
.mt-talent-replace-effect { font-size: 11px; color: rgba(255,255,255,0.65); line-height: 1.3; }
.mt-talent-replace-arrow { color: #ef5350; font-size: 16px; font-weight: 900; }
.mt-talent-replace-new-pill {
  border-color: rgba(240,192,64,0.6);
  background: linear-gradient(180deg, rgba(240,192,64,0.18), rgba(240,192,64,0.05));
  cursor: default;
}
.mt-talent-replace-new-pill .mt-talent-replace-label { color: #ffe080; }
.mt-talent-replace-skip {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  padding: 8px; border-radius: 8px;
  font-size: 12px; cursor: pointer; margin-top: 6px;
}
.mt-talent-replace-skip:hover { background: rgba(255,255,255,0.12); color: #fff; }

.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: 56px; text-align: right; }
.mt-radar-cap {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 1px;
}
.mt-profile-cap {
  font-size: 12px;
  font-weight: 700;
  color: #ffd96f;
  padding: 1px 6px;
  background: rgba(255,217,111,0.12);
  border: 1px solid rgba(255,217,111,0.35);
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.mt-profile-ssr-showcase {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  margin-left: 8px;
  padding: 0;
  background: linear-gradient(135deg, #ffd96f 0%, #f0a020 100%);
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: 50%;
  color: #2a1505;
  font-size: 14px;
  cursor: pointer;
  vertical-align: 2px;
  box-shadow: 0 0 12px rgba(255,217,111,0.6), inset 0 1px 0 rgba(255,255,255,0.4);
  animation: mt-ssr-showcase-pulse 2s ease-in-out infinite;
}
@keyframes mt-ssr-showcase-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,217,111,0.5), inset 0 1px 0 rgba(255,255,255,0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 18px rgba(255,217,111,0.9), inset 0 1px 0 rgba(255,255,255,0.4); transform: scale(1.08); }
}
.mt-profile-ssr-showcase:hover { filter: brightness(1.15); }

.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-friends-section { margin-bottom: 14px; }
.mt-friends-empty {
  padding: 12px; text-align: center;
  font-size: 12.5px; color: var(--text-muted);
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 6px;
}
.mt-friend-row-incoming {
  background: linear-gradient(90deg, rgba(76,175,80,0.10) 0%, rgba(255,255,255,0.04) 100%);
  border-left: 3px solid #4caf50;
}
.mt-friend-row-outgoing {
  background: rgba(255,213,79,0.06);
  border-left: 3px solid #ffd54f;
  opacity: 0.85;
}
.mt-friend-status {
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
}
.mt-friend-status-pending {
  color: #ffd54f;
  background: rgba(255,213,79,0.12);
  border: 1px solid rgba(255,213,79,0.35);
}
.mt-friend-accept, .mt-friend-reject, .mt-friend-cancel {
  border: 0; cursor: pointer;
  padding: 5px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.3px;
}
.mt-friend-accept {
  background: rgba(76,175,80,0.25); color: #b9e8b3;
  border: 1px solid rgba(76,175,80,0.55);
  margin-right: 4px;
}
.mt-friend-accept:hover { background: rgba(76,175,80,0.35); }
.mt-friend-reject {
  background: rgba(229,57,53,0.18); color: #ef9a9a;
  border: 1px solid rgba(229,57,53,0.5);
}
.mt-friend-reject:hover { background: rgba(229,57,53,0.3); }
.mt-friend-cancel {
  background: rgba(255,255,255,0.06); color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.15);
  width: 26px; height: 26px; padding: 0;
  font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.mt-friend-cancel:hover { background: rgba(255,255,255,0.12); }
.mt-friend-accept[disabled], .mt-friend-reject[disabled] { opacity: 0.5; cursor: not-allowed; }
.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;
}

/* ─── 賽季賽程表（取代闖關地圖、像素遊戲風 fixtures） ─── */
.mt-season-wrap {
  padding: 12px 14px 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
  border-radius: 12px;
  margin-top: 10px;
}

/* HUD：戰績 + 進度條 + 目標 */
.mt-season-hud {
  padding: 10px 12px 12px;
  background: rgba(0,0,0,0.4);
  border: 2px solid rgba(240,192,64,0.55);
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  margin-bottom: 14px;
  font-family: 'Press Start 2P', 'Noto Sans TC', sans-serif;
}
.mt-season-record-line {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.mt-season-record {
  display: flex; gap: 6px;
}
.mt-rec-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border: 1.5px solid;
}
.mt-rec-w { color: #b9e8b3; border-color: rgba(76,175,80,0.7);   background: rgba(76,175,80,0.18); }
.mt-rec-d { color: #ffd54f; border-color: rgba(255,213,79,0.7);   background: rgba(255,213,79,0.15); }
.mt-rec-l { color: #ef9a9a; border-color: rgba(239,83,80,0.7);    background: rgba(239,83,80,0.15); }
.mt-season-progress-text {
  font-size: 12px; font-weight: 700;
  color: var(--text-secondary);
}
.mt-season-progress-bar {
  position: relative;
  display: flex;
  height: 14px;
  background: rgba(0,0,0,0.55);
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
/* 堆疊式 W/D/L 三色塊 — 從左到右依序填、灰色背景代表未打場次 */
.mt-season-progress-seg {
  height: 100%;
  transition: width 0.6s ease-out;
}
.mt-season-progress-w {
  background: linear-gradient(180deg, #66bb6a 0%, #43a047 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
}
.mt-season-progress-d {
  background: linear-gradient(180deg, #ffd54f 0%, #f0c040 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
}
.mt-season-progress-l {
  background: linear-gradient(180deg, #ef5350 0%, #c62828 100%);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
}
.mt-season-tick {
  position: absolute;
  top: -2px; bottom: -2px;
  width: 2px;
  pointer-events: none;
}
.mt-season-tick-promote {
  background: #4caf50;
  box-shadow: 0 0 4px #4caf50;
}
.mt-season-tick-promote::after {
  content: '⬆';
  position: absolute;
  top: -12px; left: -4px;
  font-size: 10px;
  color: #4caf50;
}
.mt-season-tick-relegate {
  background: #ef5350;
  box-shadow: 0 0 4px #ef5350;
}
.mt-season-tick-relegate::after {
  content: '⬇';
  position: absolute;
  bottom: -12px; left: -4px;
  font-size: 10px;
  color: #ef5350;
}
.mt-season-goal {
  font-size: 12px;
  color: var(--text-primary);
  text-align: center;
  padding: 4px 0 0;
  line-height: 1.5;
}
.mt-season-goal b { color: #ffd96f; }

/* Fixture cards：直立堆疊、每張像門票 */
.mt-fixtures {
  display: flex; flex-direction: column; gap: 6px;
}
.mt-fixture-card {
  position: relative;
  padding: 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mt-fixture-card.is-past {
  opacity: 0.85;
}
.mt-fixture-card.is-past.is-w {
  background: linear-gradient(90deg, rgba(76,175,80,0.18) 0%, rgba(76,175,80,0.05) 100%);
  border-color: rgba(76,175,80,0.55);
}
.mt-fixture-card.is-past.is-d {
  background: linear-gradient(90deg, rgba(255,213,79,0.15) 0%, rgba(255,213,79,0.04) 100%);
  border-color: rgba(255,213,79,0.45);
}
.mt-fixture-card.is-past.is-l {
  background: linear-gradient(90deg, rgba(239,83,80,0.18) 0%, rgba(239,83,80,0.04) 100%);
  border-color: rgba(239,83,80,0.55);
}
.mt-fixture-card.is-now {
  background: linear-gradient(90deg, rgba(240,192,64,0.2) 0%, rgba(240,192,64,0.05) 100%);
  border-color: #f0c040;
  box-shadow: 0 0 0 1px rgba(240,192,64,0.5), 0 0 18px rgba(240,192,64,0.35);
  animation: mt-fix-now-pulse 1.6s ease-in-out infinite;
}
@keyframes mt-fix-now-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240,192,64,0.5), 0 0 12px rgba(240,192,64,0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(240,192,64,0.8), 0 0 22px rgba(240,192,64,0.55); }
}
.mt-fixture-card.is-future {
  opacity: 0.45;
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.08);
  border-style: dashed;
}
.mt-fixture-card.is-boss-slot {
  border-color: rgba(255,107,107,0.55);
}
.mt-fixture-card.is-boss-slot.is-now {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 1px rgba(255,107,107,0.55), 0 0 18px rgba(255,107,107,0.4);
}

.mt-fix-md {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.mt-fix-boss-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  background: rgba(255,107,107,0.2);
  color: #ff8a8a;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.mt-fix-matchup {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
}
.mt-fix-team-home, .mt-fix-team-away {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mt-fix-team-home { color: #6bd09e; }
.mt-fix-team-away { color: #ef9a9a; }
.mt-fix-opp-crest {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; flex-shrink: 0;
}
.mt-fix-opp-crest img.mt-match-opp-crest-img {
  width: 22px; height: 22px;
}
.mt-fix-opp-hidden {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.08);
  border: 1.5px dashed rgba(255,255,255,0.25);
  border-radius: 50%;
  font-size: 12px; font-weight: 800;
  color: var(--text-muted);
}
.mt-fix-score {
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  padding: 0 6px;
  font-family: ui-monospace, monospace;
}
.mt-fix-vs {
  font-size: 11px;
  color: var(--text-muted);
  padding: 0 4px;
  letter-spacing: 1px;
}
.mt-fix-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
  min-width: 50px;
  text-align: center;
  border: 1.5px solid transparent;
}
.mt-fix-badge-w { background: rgba(76,175,80,0.25); color: #b9e8b3; border-color: rgba(76,175,80,0.6); }
.mt-fix-badge-d { background: rgba(255,213,79,0.22); color: #ffd54f; border-color: rgba(255,213,79,0.55); }
.mt-fix-badge-l { background: rgba(239,83,80,0.25); color: #ef9a9a; border-color: rgba(239,83,80,0.6); }
.mt-fix-badge-now {
  background: rgba(240,192,64,0.25); color: #ffd96f; border-color: #f0c040;
}
.mt-fix-badge-future {
  background: rgba(255,255,255,0.06); color: var(--text-muted);
  border-color: rgba(255,255,255,0.1);
}

/* 手機窄寬：matchup 縮一點 + score 換行 */
@media (max-width: 480px) {
  .mt-fixture-card {
    grid-template-columns: 44px 1fr auto;
    padding: 7px 9px;
    font-size: 12px;
  }
  .mt-fix-team-home, .mt-fix-team-away { font-size: 11.5px; }
  .mt-fix-score { font-size: 14px; padding: 0 4px; }
  .mt-fix-badge { font-size: 10px; min-width: 38px; padding: 3px 6px; }
}

/* 聯賽標題（HUD 卡內、靠頂置中）*/
.mt-season-title-inner {
  text-align: center;
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(240,192,64,0.25);
}
.mt-season-title-inner b {
  color: #ffd96f;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(255,217,111,0.35);
  margin: 0 4px;
}
.mt-season-title-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-left: 6px;
  font-weight: 600;
}
@media (max-width: 480px) {
  .mt-season-title-inner { font-size: 12px; }
  .mt-season-title-inner b { font-size: 13px; }
}

/* ─── SSR 專屬展示頁（讀 img/ssr-showcase/{file}.png + LPC sprite 疊「角色」框）─── */
.mt-ssr-showcase-overlay {
  position: fixed; inset: 0;
  z-index: 13500;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mt-ssr-showcase-overlay.open { opacity: 1; }
.mt-ssr-showcase-card {
  position: relative;
  width: auto;       /* 跟著圖大小 — 配合 RWD 滿版 */
  max-width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  background: #0a0612;
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 60px rgba(240,192,64,0.25);
}
.mt-ssr-showcase-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: rgba(0, 0, 0, 0.7);
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.mt-ssr-showcase-close:hover { background: rgba(0,0,0,0.9); }
.mt-ssr-showcase-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #0a0612 0%, #050308 100%);
  flex: 1; min-height: 0;   /* 撐滿 card、讓 img 用 max-height 算對 */
}
.mt-ssr-showcase-bg {
  /* RWD 滿版：等比例縮放、寬不超過 card、高不超過視窗，永遠保留原始比例 */
  max-width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
.mt-ssr-showcase-loading {
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

/* 「角色」框內的 LPC 全身 sprite — 疊在 AI 圖中右側的「角色」框上 */
.mt-ssr-showcase-char {
  position: absolute;
  right: 3%;
  bottom: 20%;
  width: 22%;
  aspect-ratio: 48 / 64;
  display: flex; align-items: flex-end; justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(240,192,64,0.6));
  animation: mt-ssr-sprite-pulse 2.4s ease-in-out infinite;
}
@keyframes mt-ssr-sprite-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(240,192,64,0.4)); }
  50%      { filter: drop-shadow(0 0 18px rgba(240,192,64,0.85)); }
}
.mt-ssr-showcase-sprite {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
}

/* 球迷加入 banner — 卡片下方獨立顯示（翻到正面才出現）*/
.mt-gacha-fans-below {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  /* 卡背狀態隱藏、翻面後淡入 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease 0.3s, visibility 0s linear 0.6s;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(240,192,64,0.85), rgba(220,160,40,0.95));
  color: #1a0a00;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
  border: 1px solid rgba(240,192,64,0.7);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45), 0 0 14px rgba(240,192,64,0.5);
  z-index: 2;
  pointer-events: none;
}
.mt-gacha-fans-below b { color: #c8420e; font-size: 14px; margin: 0 2px; }
.mt-gacha-fans-below-total { color: rgba(26,10,0,0.65); font-size: 10px; font-weight: 600; }
/* 卡片翻到正面（.flipped）才顯示 fans banner */
.mt-gacha-card3d.flipped .mt-gacha-fans-below {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease 0.3s, visibility 0s linear 0s;
}
/* 有 fans banner 的卡片下方留空、避免下排卡片往上頂到 */
.mt-gacha-card3d.has-fans-below { margin-bottom: 32px; }

/* 未解鎖 placeholder（沒對應 AI 圖時）*/
.mt-ssr-showcase-placeholder {
  padding: 80px 30px;
  text-align: center;
  color: #fff;
  width: 100%;
}
.mt-ssr-showcase-ph-silhouette {
  font-size: 100px;
  opacity: 0.3;
  filter: blur(2px);
  margin-bottom: 14px;
}
.mt-ssr-showcase-ph-name {
  font-size: 22px;
  font-weight: 900;
  color: #ffd96f;
  letter-spacing: 1.5px;
  margin-bottom: 4px;
  text-shadow: 0 0 12px rgba(255,217,111,0.4);
}
.mt-ssr-showcase-ph-nick {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  font-style: italic;
}
.mt-ssr-showcase-ph-tag {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(240,192,64,0.18);
  border: 1.5px solid rgba(240,192,64,0.5);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #ffd96f;
  margin-bottom: 10px;
}
.mt-ssr-showcase-ph-hint {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 1px;
}

@media (max-width: 480px) {
  .mt-ssr-showcase-card { max-width: 100%; border-radius: 0; max-height: 100vh; }
}

/* ─── 每日登入禮 modal（連勝循環）─── */
.mt-daily-login-overlay {
  position: fixed; inset: 0;
  z-index: 13800;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mt-daily-login-overlay.open { opacity: 1; }
.mt-daily-login-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: linear-gradient(160deg, #1a0e2a 0%, #0a0612 100%);
  border: 1px solid rgba(240,192,64,0.35);
  border-radius: 14px;
  padding: 22px 18px 16px;
  box-shadow: 0 0 50px rgba(240,192,64,0.2);
  color: #fff;
}
.mt-daily-login-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mt-daily-login-title {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #f0c040;
  margin-bottom: 4px;
  letter-spacing: 1px;
}
.mt-daily-login-streak {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
}
.mt-daily-login-streak b { color: #fff; font-size: 18px; margin: 0 4px; }
.mt-daily-login-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 14px;
}
.mt-daily-login-day {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 8px 4px 6px;
  text-align: center;
  font-size: 11px;
  position: relative;
  min-height: 64px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.mt-daily-login-day.is-past {
  opacity: 0.45;
  background: rgba(120,180,120,0.08);
  border-color: rgba(120,200,120,0.25);
}
.mt-daily-login-day.is-today {
  background: linear-gradient(160deg, rgba(240,192,64,0.25), rgba(240,192,64,0.1));
  border-color: #f0c040;
  box-shadow: 0 0 18px rgba(240,192,64,0.45);
  animation: mt-daily-today-pulse 1.8s ease-in-out infinite;
}
@keyframes mt-daily-today-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(240,192,64,0.35); }
  50%      { box-shadow: 0 0 24px rgba(240,192,64,0.7); }
}
.mt-daily-login-day.is-future {
  opacity: 0.55;
}
.mt-daily-login-day.is-week-reward {
  grid-column: span 3;
  min-height: 78px;
  background:
    linear-gradient(135deg, rgba(245,200,80,0.25), rgba(245,150,40,0.18)),
    radial-gradient(circle at 20% 0%, rgba(255,220,120,0.25), transparent 50%);
  border: 1.5px solid rgba(245,200,80,0.7);
  box-shadow: inset 0 0 18px rgba(245,200,80,0.18);
}
.mt-daily-login-day.is-week-reward.is-future {
  opacity: 0.7;
}
.mt-daily-login-day .mt-day-num {
  font-weight: 700;
  font-size: 11px;
  color: rgba(255,255,255,0.8);
}
.mt-daily-login-day .mt-day-reward {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  line-height: 1.3;
}
.mt-daily-login-day.is-week-reward .mt-day-reward { font-size: 14px; color: #f0c040; }
.mt-daily-login-day .mt-day-mark {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}
.mt-daily-login-day.is-past .mt-day-mark { color: #8fdc8a; }
.mt-daily-login-day.is-today .mt-day-mark { color: #f0c040; }
/* 今日獎勵摘要：中性藍灰色、跟 Day 7 金禮明顯區分（按收下才會真的領取） */
.mt-daily-login-today-reward {
  background: rgba(120,150,200,0.1);
  border: 1px solid rgba(160,180,220,0.35);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.mt-daily-login-today-label {
  font-size: 11px;
  color: rgba(180,200,230,0.85);
  letter-spacing: 1px;
  white-space: nowrap;
  font-weight: 700;
}
.mt-daily-login-today-text {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  text-align: right;
  flex: 1;
}
.mt-daily-login-ok {
  width: 100%;
  background: linear-gradient(180deg, #f0c040, #d49810);
  color: #1a0a00;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mt-daily-login-ok:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(240,192,64,0.5);
}

/* ─── SSR 自選券：球員名完整顯示 + 置中（覆蓋通用 mt-player-name 的 nowrap/ellipsis）── */
.mt-ssr-pickable .mt-player-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding-right: 0;
  text-align: center;
  line-height: 1.2;
}
.mt-ssr-pickable .mt-player-position {
  text-align: center;
}

/* ─── header 體力 chip：可點 + 體力來源 info modal ─── */
.mt-hub-stat-stamina {
  cursor: pointer;
  position: relative;
  transition: background 0.15s, transform 0.15s;
}
.mt-hub-stat-stamina:hover { background: rgba(255,255,255,0.05); }
.mt-hub-stat-stamina::after {
  content: '?';
  position: absolute;
  top: 2px; right: 4px;
  width: 14px; height: 14px;
  font-size: 9px; line-height: 14px;
  background: rgba(255,217,111,0.85);
  color: #1a0a00; font-weight: 800;
  border-radius: 50%;
  text-align: center;
  pointer-events: none;
}

.mt-stamina-info-overlay {
  position: fixed; inset: 0;
  z-index: 14000;
  background: rgba(0,0,0,0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mt-stamina-info-overlay.open { opacity: 1; }
.mt-stamina-info-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(160deg, #1a0e2a 0%, #0a0612 100%);
  border: 1px solid rgba(240,192,64,0.35);
  border-radius: 14px;
  padding: 22px 20px 16px;
  box-shadow: 0 0 40px rgba(240,192,64,0.18);
  color: #fff;
}
.mt-stamina-info-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mt-stamina-info-title {
  text-align: center;
  font-size: 18px; font-weight: 800;
  color: #ffd96f;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.mt-stamina-info-sub {
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 14px;
}
.mt-stamina-info-list {
  list-style: none;
  padding: 0; margin: 0 0 6px;
}
.mt-stamina-info-list li {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid #f0c040;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.45;
}
.mt-stamina-info-list li b { color: #ffd96f; }
.mt-stamina-info-list li .mt-stamina-info-action {
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  margin-top: 2px;
  display: block;
}

/* ─── 互換陣容（swap-any）模式 — 按鈕黏在球場右下角 ─── */
/* 保存陣型按鈕：球場右上角 */
.mt-roster-presets-pitch-btn {
  position: absolute;
  right: 6px;
  top: 6px;
  background: rgba(0,0,0,0.7);
  border: 1.5px solid rgba(120,200,240,0.55);
  color: #cfe8ff;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 4;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: filter 0.1s, transform 0.1s;
}
.mt-roster-presets-pitch-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.mt-roster-presets-pitch-btn:active { transform: translateY(0); }

.mt-swap-any-pitch-btn {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(0,0,0,0.7);
  border: 1.5px solid rgba(240,192,64,0.55);
  color: #ffd96f;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 4;
  letter-spacing: 0.5px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  backdrop-filter: blur(4px);
}
.mt-swap-any-pitch-btn:hover {
  background: rgba(20,10,0,0.85);
  border-color: #f0c040;
}
.mt-swap-any-pitch-btn.is-on {
  background: linear-gradient(180deg, #f0c040, #d49810);
  color: #1a0a00;
  border-color: #f0c040;
  box-shadow: 0 0 14px rgba(240,192,64,0.55);
}
/* 互換模式下、提示飄在按鈕上方（與按鈕同樣靠右、避免擋到 GK / DEF） */
.mt-swap-any-pitch-hint {
  position: absolute;
  right: 6px;
  bottom: 38px;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(240,192,64,0.35);
  color: #fff;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 4;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.mt-swap-any-pitch-hint b { color: #ffd96f; }

/* 模式開啟時：所有可選球員加虛線邊框、給視覺暗示「可點」*/
.mt-swap-any-mode .mt-pitch-player,
.mt-swap-any-mode .mt-bench-player {
  outline: 2px dashed rgba(240,192,64,0.5);
  outline-offset: 2px;
  cursor: pointer;
  animation: mt-swap-any-pulse 2s ease-in-out infinite;
}
@keyframes mt-swap-any-pulse {
  0%, 100% { outline-color: rgba(240,192,64,0.35); }
  50%      { outline-color: rgba(240,192,64,0.7); }
}

/* 第一位被選的球員：實心金邊 + 光暈、強調已選 */
.mt-swap-any-selected {
  outline: 3px solid #f0c040 !important;
  outline-offset: 2px;
  box-shadow: 0 0 18px rgba(240,192,64,0.7) !important;
  animation: none !important;
  position: relative;
  z-index: 5;
}
.mt-swap-any-selected::after {
  content: '✓ 已選';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: #f0c040;
  color: #1a0a00;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  z-index: 6;
}