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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── 設定 / Kit / Crest picker ── */
.mt-settings-tab { padding: 12px; }
.mt-settings-section { margin-bottom: 20px; }
.mt-settings-title { font-size: 13px; font-weight: 700; color: #f0c040; margin-bottom: 8px; }
.mt-settings-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-settings-swatch {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  cursor: pointer; transition: all 0.15s;
  padding: 0;
}
.mt-settings-swatch:hover { transform: scale(1.1); }
.mt-settings-swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px #f0c040; transform: scale(1.1); }
.mt-settings-crests { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-width: 320px; }
.mt-settings-crest {
  background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 4px; cursor: pointer; transition: all 0.15s;
}
.mt-settings-crest svg { width: 100%; height: 100%; display: block; }
.mt-settings-crest:hover { background: rgba(255,255,255,0.1); }
.mt-settings-crest.sel { border-color: #f0c040; background: rgba(240,192,64,0.12); }
.mt-settings-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.mt-settings-preset {
  display: flex; padding: 0; border: 2px solid rgba(255,255,255,0.2);
  border-radius: 20px; overflow: hidden; cursor: pointer; height: 32px;
}
.mt-settings-preset:hover { border-color: #f0c040; }
.mt-settings-preset span { width: 16px; height: 28px; display: block; }
.mt-settings-preview { display: flex; align-items: center; justify-content: center; }
.mt-settings-preview svg { width: 100%; height: 100%; }
.mt-settings-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;
}
/* 球迷超過上限：fans + overflow 顯示金色、跟徽章同色 */
.mt-fans-over-cap {
  color: #ffd54f;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(255,213,79,0.5);
  cursor: help;
}
/* 溢出徽章：顯示「🔒 +N 待解鎖」、配 pulse 動畫 */
.mt-fans-overflow {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  color: #ffd54f;
  background: rgba(240,192,64,0.18);
  border: 1px solid rgba(240,192,64,0.45);
  border-radius: 4px;
  letter-spacing: 0.3px;
  animation: mt-fans-overflow-pulse 2.5s ease-in-out infinite;
}
@keyframes mt-fans-overflow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,192,64,0); }
  50%      { box-shadow: 0 0 6px 1px rgba(240,192,64,0.5); }
}

.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;
}
.mt-hub-tab {
  flex: 1;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  padding: 14px 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
.mt-hub-tab.active {
  color: #f0c040;
  border-bottom-color: #f0c040;
}

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

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

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

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

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

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

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

/* 開發測試 danger zone */
.mt-settings-danger-zone {
  margin-top: 24px;
  border: 1.5px dashed rgba(255,120,120,0.5);
  border-radius: 10px;
  padding: 12px;
  background: rgba(40,15,15,0.3);
}
.mt-settings-dev-btn {
  width: 100%;
  background: linear-gradient(180deg, #c2453a 0%, #7a2520 100%);
  border-color: #6a1c18;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 10px;
  border-radius: 8px;
  margin-top: 6px;
}
.mt-settings-dev-btn:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(255,80,60,0.6);
}
.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;
  /* 不用 flex / grid — 純 positioning 容器
     pack-pos 跟 cards-wrap 都用 absolute top:50% left:50% translate(-50%,-50%) 置中
     stage 用 absolute inset:0 鋪滿
     →  三者各自獨立定位、互不干擾、不會被 grid track 推位 */
}
/* pack 包進 pack-pos，pack-pos 負責置中；pack 維持原本的 mt-pack-float 動畫 */
.mt-gacha-stage-frame > .mt-gacha-pack-pos,
.mt-gacha-stage-frame > .mt-gacha-cards-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mt-gacha-stage-frame > .mt-gacha-cards-wrap {
  width: 280px;
  height: 320px;
  /* 不擋 pack 的 drag 事件 — cards-wrap 看不見但在 pack-pos 上層、
     會攔住點擊。卡片進場後個別卡片有自己的 pointer-events:auto */
  pointer-events: none;
}
.mt-gacha-card3d {
  /* 重新啟用卡片 click（用於翻牌、cards-wrap pointer-events:none 不繼承）*/
  pointer-events: auto;
}
.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-all-btn 處理、不在這個提示裡提
   位置改成跟著 viewport 中心（卡片位置）+ 偏下 170px、貼在卡片下沿
   不再在螢幕最底端、避免使用者誤以為在指底部按鈕 */
.mt-gacha-flip-prompt {
  position: fixed;
  top: calc(50% + 170px);
  left: 50%;
  transform: translateX(-50%);
  display: flex; justify-content: center;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
}
.mt-gacha-flip-prompt[hidden] { display: none !important; }
.mt-gacha-flip-hint {
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6);
  padding: 8px 16px;
}

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

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

/* ─── SSR 光線爆發（多條放射光線） ─── */
.mt-gacha-rays {
  position: absolute;
  /* inset:-100% → 元素是 overlay 的 300%×300%、置中
     旋轉到任意角度、bounding box 對角線 ≈ 424% > 任何 viewport
     寬／高 viewport 都看不到 corner 露邊 */
  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;
  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-rarity-hint {
  grid-row: 3;
  align-self: end;
  margin-bottom: 8px;
  white-space: nowrap;
}
.mt-gacha-stage > .mt-gacha-actions {
  grid-row: 4;
  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 偏移（pending 拿掉後 transition 過去）*/
.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); }
}

/* 全部翻完 → 3 欄 grid（10 張卡 = 4 排 3+3+3+1）
   寬度從 520 縮到 410、4 排剛好擠進畫面不用滑動 */
.mt-gacha-cards.all-revealed {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 410px !important;
  max-width: none !important;        /* 解開 .mt-gacha-cards 預設的 max-width:100% */
  height: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  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 + 文字尺寸覆蓋（3 col × ~130px 卡寬 ≈ 單張卡 200×300 的 65%）
   字體保持 10-12px 可讀範圍 */
.mt-gacha-cards.all-revealed .mt-gacha-card3d-back,
.mt-gacha-cards.all-revealed .mt-gacha-card3d-front {
  padding: 7px 6px !important;
}
/* portrait 75×75（卡片 ~130 的 58%、跟之前 95/166 同比例）
   flex:0 0 + min/max 三層保險防止被 flex 壓擠 */
.mt-gacha-cards.all-revealed .mt-gacha-card3d .mt-gacha-front-portrait {
  width: 75px !important;
  height: 75px !important;
  min-width: 75px !important;
  min-height: 75px !important;
  max-width: 75px !important;
  max-height: 75px !important;
  flex: 0 0 75px !important;
  margin: 3px auto 5px !important;
  border-width: 2px !important;
  box-sizing: border-box !important;
}
.mt-gacha-cards.all-revealed .mt-gacha-front-portrait-pos {
  width: 20px !important;
  height: 20px !important;
  font-size: 11px !important;
}
.mt-gacha-cards.all-revealed .mt-gacha-front-rarity-badge { font-size: 9px !important; padding: 1px 5px !important; }
.mt-gacha-cards.all-revealed .mt-gacha-front-stars { font-size: 10px !important; }
.mt-gacha-cards.all-revealed .mt-gacha-front-name {
  font-size: 12px !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
  line-height: 1.15 !important;
}
.mt-gacha-cards.all-revealed .mt-gacha-front-nick {
  font-size: 9px !important;
  margin-bottom: 1px !important;
  line-height: 1.1 !important;
}
.mt-gacha-cards.all-revealed .mt-gacha-front-pos {
  font-size: 10px !important;
  margin-bottom: 2px !important;
  line-height: 1.1 !important;
}
.mt-gacha-cards.all-revealed .mt-gacha-front-stats {
  font-size: 9.5px !important;
  gap: 0 4px !important;
  margin-top: 1px !important;
  margin-bottom: 0 !important;
  line-height: 1.15 !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: 8.5px !important;
  padding: 0 4px !important;
  margin-top: 1px !important;
  line-height: 1.2 !important;
}
.mt-gacha-cards.all-revealed .mt-gacha-back-emblem { font-size: 48px !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; }

/* 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;
}
.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-fans {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 16px 0;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  border: 1.2px solid rgba(255,255,255,0.12);
}
.mt-pre-match-fan-pct { font-size: 12px; font-weight: 900; }
.mt-pre-match-fans.is-pos     { background: rgba(76,175,80,0.18);  border-color: rgba(76,175,80,0.45);  color: #b9f0bf; }
.mt-pre-match-fans.is-neg     { background: rgba(239,68,68,0.18);  border-color: rgba(239,68,68,0.5);   color: #ffc1c1; }
.mt-pre-match-fans.is-neutral { color: rgba(255,255,255,0.7); }

/* 教練機制預測 panel */
.mt-pre-coach-mech {
  margin: 14px 0;
  background: linear-gradient(180deg, rgba(30,25,55,0.6), rgba(15,12,30,0.6));
  border: 1px solid rgba(240,192,64,0.3);
  border-radius: 10px;
  padding: 10px 12px;
}
.mt-pre-coach-mech-title {
  font-size: 12px;
  font-weight: 800;
  color: #ffd96f;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.mt-pre-coach-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 8px;
  margin-bottom: 5px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border-left: 3px solid rgba(255,255,255,0.15);
}
.mt-pre-coach-row:last-child { margin-bottom: 0; }
.mt-pre-coach-row.is-active   { border-left-color: #66bb6a; background: rgba(76,175,80,0.1); }
.mt-pre-coach-row.is-inactive { border-left-color: #ef5350; background: rgba(239,83,80,0.08); opacity: 0.7; }
.mt-pre-coach-row.is-conditional { border-left-color: #42a5f5; background: rgba(66,165,245,0.08); }
.mt-pre-coach-row-opp { border-style: dashed; }
.mt-pre-coach-row-status {
  font-size: 16px;
  flex: 0 0 22px;
  text-align: center;
  line-height: 1.2;
  padding-top: 1px;
}
.mt-pre-coach-row-body { flex: 1; min-width: 0; }
.mt-pre-coach-row-label {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.mt-pre-coach-row-effect {
  font-size: 11px;
  color: #ffd96f;
  font-weight: 700;
  margin-top: 2px;
}
.mt-pre-coach-row-cond {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.mt-pre-coach-row.is-active .mt-pre-coach-row-cond   { color: #a5d6a7; }
.mt-pre-coach-row.is-inactive .mt-pre-coach-row-cond { color: #ef9a9a; }

.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 50 → 200：確保闖關成功 splash 蓋在所有 modal content / post-match 之上 */
  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%、旋轉時不露邊 */
.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-goals {
  background: rgba(20,25,40,0.55);
  border: 1px solid rgba(140,180,240,0.18);
  border-radius: 10px;
  padding: 9px 11px 8px;
  margin: 8px 0 14px;
  text-align: left;
}
.mt-post-goals-title {
  font-size: 12px;
  font-weight: 700;
  color: #aacfff;
  margin-bottom: 6px;
  letter-spacing: 0.4px;
  text-align: center;
}
.mt-post-goals-empty {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  font-style: italic;
}
.mt-post-goals-list {
  display: flex; flex-direction: column; gap: 4px;
}
.mt-post-goal {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  border-left: 3px solid transparent;
}
.mt-post-goal-home { border-left-color: #66bb6a; }
.mt-post-goal-away { border-left-color: #ef5350; }
.mt-post-goal-min {
  font-weight: 700;
  color: #ffd54f;
  min-width: 32px;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}
.mt-post-goal-team {
  font-size: 10.5px;
  color: rgba(255,255,255,0.55);
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-post-goal-scorer {
  font-weight: 600;
  color: #fff;
  flex: 1;
}
.mt-post-goal-assist {
  font-size: 11px;
  color: #cfe2ff;
  opacity: 0.85;
  white-space: nowrap;
}

.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-tier.blocked {
  color: #ffd96f;
  background: rgba(255,200,100,0.12);
  border: 1.5px dashed rgba(255,217,111,0.5);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0;
}
.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;
}

/* ─── Spotlight：環狀框 + 全幕變暗（環外部用 box-shadow 撐黑）─── */
.mt-spotlight {
  position: fixed;
  inset: 0;
  z-index: 12500;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mt-spotlight.is-fading { opacity: 0; }
/* 教學 spotlight active 時鎖住所有 modal X close，避免使用者中途離開破壞流程 */
body.mt-spotlight-active .mt-modal-close {
  pointer-events: none;
  opacity: 0.25;
  cursor: not-allowed;
}
.mt-spotlight-ring {
  position: fixed;
  border: 3px solid #ffd96f;
  border-radius: 12px;
  box-shadow:
    0 0 0 9999px rgba(0,0,0,0.7),
    0 0 24px rgba(255,217,111,0.9),
    inset 0 0 14px rgba(255,217,111,0.35);
  pointer-events: none;
  animation: mt-spotlight-pulse 1.4s ease-in-out infinite;
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
@keyframes mt-spotlight-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 9999px rgba(0,0,0,0.7),
      0 0 24px rgba(255,217,111,0.9),
      inset 0 0 14px rgba(255,217,111,0.35);
  }
  50% {
    box-shadow:
      0 0 0 9999px rgba(0,0,0,0.75),
      0 0 36px rgba(255,217,111,1),
      inset 0 0 18px rgba(255,217,111,0.55);
  }
}
/* hint 用 JS 動態定位（near target）— left/top 由 JS 設、transform 由 JS 切換上下指向 */
.mt-spotlight-hint {
  position: fixed;
  background: linear-gradient(180deg, #1a1a2e 0%, #0d1224 100%);
  border: 2px solid #ffd96f;
  color: #ffe680;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 20px rgba(255,217,111,0.45);
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 12501;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: mt-spotlight-hint-bob 1.2s ease-in-out infinite;
}
.mt-spotlight-hint-arrow {
  font-size: 18px;
  line-height: 1;
}
/* 上下指向動畫 — 箭頭 / 手指輕微跳動朝目標 */
@keyframes mt-spotlight-hint-bob {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255,217,111,0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,217,111,0.95)); }
}
.mt-spotlight-hint.point-down .mt-spotlight-hint-arrow {
  animation: mt-spotlight-arrow-down 1s ease-in-out infinite;
}
.mt-spotlight-hint.point-up .mt-spotlight-hint-arrow {
  animation: mt-spotlight-arrow-up 1s ease-in-out infinite;
}
@keyframes mt-spotlight-arrow-down {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}
@keyframes mt-spotlight-arrow-up {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.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%;
  background: linear-gradient(135deg, #f0c040 0%, #e07020 100%);
  color: #1a1a2e;
  font-weight: 900;
  font-size: 15px;
  padding: 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(240,192,64,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  transition: transform 0.1s;
}
.mt-starter-arrange:hover, .mt-starter-train:hover, .mt-starter-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(240,192,64,0.75), inset 0 1px 0 rgba(255,255,255,0.5);
}
.mt-starter-arrange:active, .mt-starter-train:active, .mt-starter-primary:active {
  transform: translateY(0);
}

/* 教學賽賽後 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; }
.mt-rank-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.04); border-radius: 8px; padding: 8px;
}
.mt-rank-row.me { background: rgba(240,192,64,0.12); border: 1px solid rgba(240,192,64,0.4); }
.mt-rank-pos { font-size: 18px; font-weight: 800; min-width: 32px; text-align: center; }
.mt-rank-crest { width: 38px; height: 38px; flex-shrink: 0; }
.mt-rank-crest svg { width: 100%; height: 100%; }
.mt-rank-info { flex: 1; min-width: 0; }
.mt-rank-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-rank-meta { font-size: 11px; opacity: 0.7; }
.mt-rank-stats { text-align: right; }
.mt-rank-pt { font-size: 18px; font-weight: 800; color: #f0c040; }
.mt-rank-pt span { font-size: 10px; opacity: 0.7; }
.mt-rank-record { font-size: 11px; opacity: 0.7; }

/* 陣型 picker（搬到球員 tab 球場上方） */
/* 球隊平均數據 header — 球員 tab 最上方一條、含教練 buff / 老將 / 自動補位 */
.mt-roster-radar {
  background: linear-gradient(180deg, rgba(30,35,55,0.7), rgba(15,18,30,0.7));
  border: 1px solid rgba(140,180,240,0.22);
  border-radius: 10px;
  padding: 9px 11px 8px;
  margin: 4px 4px 10px;
}
.mt-roster-radar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 7px;
}
.mt-roster-radar-title {
  font-size: 12px; font-weight: 700;
  color: #aacfff;
  letter-spacing: 0.5px;
}
.mt-roster-radar-overall {
  font-size: 11px;
  color: rgba(255,255,255,0.75);
}
.mt-roster-radar-overall b {
  color: #ffd54f;
  font-size: 15px;
  margin-left: 4px;
}
.mt-roster-radar-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 12px;
}
.mt-roster-radar-cell {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
}
.mt-roster-radar-key {
  width: 14px;
  font-weight: 700;
  color: var(--c);
  text-align: center;
  flex-shrink: 0;
}
.mt-roster-radar-val {
  width: 22px;
  font-weight: 700;
  color: #fff;
  text-align: right;
  flex-shrink: 0;
}
.mt-roster-radar-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.mt-roster-radar-bar-fill {
  display: block;
  height: 100%;
  background: var(--c);
  border-radius: 3px;
  transition: width 0.4s ease-out;
}
.mt-roster-radar-foot {
  font-size: 9.5px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.3px;
}

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

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

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

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

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

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

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

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

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

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

/* ════════════════════════════════════════
   🏟️ 主頁 tab：戶外訓練場景
   天空 + 雲 + 太陽 + 樹 + 訓練館 + 操場 + 全身球員漫步
   ════════════════════════════════════════ */
.mt-home-tab { padding: 8px; position: relative; }
.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);
}

/* ─── 球場等級招牌 widget（主頁右上角 pixel-art 木牌）─── */
.mt-home-stadium-widget {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 8;
  padding: 6px 10px 7px;
  background: linear-gradient(180deg, #c9905a 0%, #8c5d2e 100%);
  border: 2px solid #2a1408;
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 4px rgba(0,0,0,0.35),
    0 4px 10px rgba(0,0,0,0.5);
  color: #fff8e0;
  font-family: inherit;
  cursor: pointer;
  min-width: 130px;
  image-rendering: pixelated;
  text-align: left;
  transition: transform 0.15s ease-out, box-shadow 0.15s;
}
.mt-home-stadium-widget:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.35),
    0 6px 14px rgba(0,0,0,0.55);
}
.mt-home-stadium-widget:active { transform: translateY(0); }
/* 高等級招牌變金色 */
.mt-home-stadium-widget[data-lv="7"],
.mt-home-stadium-widget[data-lv="8"] {
  background: linear-gradient(180deg, #d4af5e 0%, #8a6a25 100%);
}
.mt-home-stadium-widget[data-lv="9"] {
  background: linear-gradient(180deg, #e8c870 0%, #9a7820 100%);
}
.mt-home-stadium-widget[data-lv="10"] {
  background: linear-gradient(180deg, #ffd700 0%, #c89010 100%);
  border-color: #6e4a08;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.35),
    0 4px 10px rgba(0,0,0,0.5),
    0 0 16px rgba(255,215,0,0.5);
}
.mt-home-stadium-row {
  display: flex;
  align-items: center;
  gap: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.mt-home-stadium-icon { font-size: 16px; line-height: 1; }
.mt-home-stadium-lv {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.5px;
}
.mt-home-stadium-lv small { font-size: 10px; opacity: 0.8; font-weight: 700; }
.mt-home-stadium-row-sub {
  font-size: 11px;
  margin-top: 2px;
  gap: 8px;
  opacity: 0.95;
}
.mt-home-stadium-cta {
  font-size: 10px;
  margin-top: 3px;
  color: #ffeaa0;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
  border-top: 1px dashed rgba(255,255,255,0.25);
  padding-top: 3px;
}
.mt-home-stadium-cta.is-maxed {
  color: #fff;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  border-top: 0;
  padding: 2px 0;
}

/* ─── 球場升級 modal ─── */
.mt-stadium-upgrade-overlay {
  /* 用既有 mt-profile-overlay 殼、card 自己定義 */
}
.mt-stadium-upgrade-card {
  background: linear-gradient(180deg, #1a2330 0%, #0d141c 100%);
  border: 2px solid #d4af5e;
  border-radius: 14px;
  width: 100%;
  max-width: 420px;
  padding: 18px;
  position: relative;
  color: #fff;
  box-shadow: 0 0 32px rgba(212,175,94,0.4);
}
.mt-stadium-up-title {
  font-size: 18px;
  font-weight: 900;
  color: #ffd96f;
  text-align: center;
  margin-bottom: 14px;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.mt-stadium-up-compare {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.mt-stadium-up-side {
  flex: 1;
  text-align: center;
}
.mt-stadium-up-side.is-next {
  filter: drop-shadow(0 0 8px rgba(255,217,111,0.6));
}
.mt-stadium-up-arrow {
  font-size: 26px;
  font-weight: 900;
  color: #ffd96f;
  flex-shrink: 0;
}
.mt-stadium-up-mini {
  position: relative;
  width: 100%;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
  border: 1.5px solid #2a1408;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.4);
}
.mt-stadium-up-mini svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mt-stadium-up-side-lv {
  font-size: 14px;
  font-weight: 900;
  color: #ffd96f;
}
.mt-stadium-up-side-label {
  font-size: 10px;
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 舊的 mini 預覽 ::before / ::after 已拔掉（改用 _stadiumPreviewSvg 直接畫 SVG）*/

/* ─── 「🔍 預覽所有等級」連結（升級 modal 底部）─── */
.mt-stadium-preview-all-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: rgba(255,217,111,0.1);
  border: 1px dashed rgba(255,217,111,0.4);
  border-radius: 8px;
  color: #ffd96f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0.5px;
  transition: background 0.15s;
}
.mt-stadium-preview-all-link:hover {
  background: rgba(255,217,111,0.2);
  border-color: rgba(255,217,111,0.7);
}

/* ─── 球場 10 級預覽 gallery modal ─── */
.mt-stadium-gallery-card {
  background: linear-gradient(180deg, #1a2330 0%, #0d141c 100%);
  border: 2px solid #d4af5e;
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  padding: 18px;
  position: relative;
  color: #fff;
  box-shadow: 0 0 32px rgba(212,175,94,0.4);
  max-height: 90vh;
  overflow-y: auto;
}
.mt-stadium-gallery-title {
  font-size: 17px;
  font-weight: 900;
  color: #ffd96f;
  text-align: center;
  margin-bottom: 4px;
  letter-spacing: 1px;
}
.mt-stadium-gallery-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  text-align: center;
  margin-bottom: 12px;
}
.mt-stadium-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.mt-stadium-gallery-item {
  position: relative;
  padding: 6px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  text-align: center;
}
.mt-stadium-gallery-item.is-current {
  border-color: #00d96b;
  box-shadow: 0 0 12px rgba(0,217,107,0.45);
}
.mt-stadium-gallery-preview {
  width: 100%;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #2a1408;
  margin-bottom: 4px;
}
.mt-stadium-gallery-preview svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mt-stadium-gallery-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.mt-stadium-gallery-lv {
  font-size: 13px;
  font-weight: 900;
  color: #ffd96f;
}
.mt-stadium-gallery-now {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: #00d96b;
  color: #0a2914;
  letter-spacing: 0.5px;
}
.mt-stadium-gallery-label {
  font-size: 10px;
  color: rgba(255,255,255,0.7);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mt-stadium-up-stats {
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.mt-stadium-up-stat-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 3px 0;
}
.mt-stadium-up-stat-row span:last-child {
  color: #ffd96f;
  font-weight: 800;
}
.mt-stadium-up-stat-sub {
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  font-size: 11px;
}
.mt-stadium-up-confirm {
  width: 100%;
  padding: 12px;
  background: linear-gradient(180deg, #66bb6a 0%, #2e7d32 100%);
  border: 1.5px solid #1b5e20;
  border-radius: 10px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  letter-spacing: 1px;
  box-shadow: 0 3px 8px rgba(46,125,50,0.5), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: filter 0.15s, transform 0.15s;
}
.mt-stadium-up-confirm:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.mt-stadium-up-confirm:disabled {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  cursor: not-allowed;
}
.mt-stadium-up-cost {
  background: rgba(0,0,0,0.3);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 13px;
}
.mt-stadium-up-hint {
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
  margin-top: 8px;
}
.mt-stadium-up-hint b { color: #ffd96f; }
.mt-stadium-up-maxed {
  text-align: center;
  font-size: 14px;
  color: #ffd96f;
  font-weight: 900;
  padding: 12px;
  background: rgba(255,215,0,0.1);
  border: 1px solid #ffd96f;
  border-radius: 8px;
  letter-spacing: 1px;
}

/* ─── 10 Tier 視覺逐步升級（額外加碼、不取代既有 max-width / roof color rules） ─── */
/* Lv 2：屋頂下方加門簷小招牌（純 CSS、用 ::before on clubhouse-door） */
.mt-home-distance[data-stadium-level="2"] .mt-home-clubhouse-door::before,
.mt-home-distance[data-stadium-level="3"] .mt-home-clubhouse-door::before,
.mt-home-distance[data-stadium-level="4"] .mt-home-clubhouse-door::before,
.mt-home-distance[data-stadium-level="5"] .mt-home-clubhouse-door::before,
.mt-home-distance[data-stadium-level="6"] .mt-home-clubhouse-door::before,
.mt-home-distance[data-stadium-level="7"] .mt-home-clubhouse-door::before,
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse-door::before,
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse-door::before,
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-door::before {
  content: '';
  position: absolute;
  top: -8px; left: -10%; right: -10%;
  height: 5px;
  background: #2a1408;
  border-radius: 1px;
}

/* Lv 4+：地面加鋪石路（從 ground 中央到 clubhouse door） */
.mt-home-distance[data-stadium-level="4"] ~ .mt-home-ground::before,
.mt-home-distance[data-stadium-level="5"] ~ .mt-home-ground::before,
.mt-home-distance[data-stadium-level="6"] ~ .mt-home-ground::before,
.mt-home-distance[data-stadium-level="7"] ~ .mt-home-ground::before,
.mt-home-distance[data-stadium-level="8"] ~ .mt-home-ground::before,
.mt-home-distance[data-stadium-level="9"] ~ .mt-home-ground::before,
.mt-home-distance[data-stadium-level="10"] ~ .mt-home-ground::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 47%;
  width: 6%;
  height: 100%;
  background: repeating-linear-gradient(180deg, #8a7a6a 0 8px, #6a5a4a 8px 14px);
  border-left: 1px solid #1a1a2e;
  border-right: 1px solid #1a1a2e;
  z-index: 1;
}

/* Lv 6+：CHAMPIONS 燈牌（掛在訓練館牆面上 — 名牌正上方）*/
.mt-home-distance[data-stadium-level="6"] .mt-home-clubhouse::before,
.mt-home-distance[data-stadium-level="7"] .mt-home-clubhouse::before,
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse::before,
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse::before,
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse::before {
  content: '★ CHAMPIONS ★';
  position: absolute;
  top: 1%;                 /* 緊貼建築最頂、在名牌正上方（名牌會挪到 top:10%）*/
  left: 50%;
  transform: translateX(-50%);
  width: 56%;
  height: 12px;
  background: linear-gradient(180deg, #1a3050 0%, #0d1830 100%);
  border: 1px solid #ffd96f;
  color: #ffd96f;
  font-size: 8px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  border-radius: 2px;
  text-shadow: 0 0 4px rgba(255,217,111,0.9);
  z-index: 6;              /* 高過名牌 (z 5)、避免被遮 */
  animation: mt-champ-led 1.6s ease-in-out infinite;
}
@keyframes mt-champ-led {
  0%, 100% {
    box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 4px rgba(255,217,111,0.45);
  }
  50% {
    box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 12px rgba(255,217,111,0.95);
  }
}

/* Lv 8+：屋頂 LED 跑馬燈（屋頂上方一條閃動的字幕） */
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse-sign,
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse-sign,
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-sign {
  background: linear-gradient(180deg, #0d0d20 0%, #1a1a3a 100%);
  border: 1px solid #ffd96f;
  color: #ffd96f;
  text-shadow: 0 0 6px rgba(255,217,111,0.9);
  animation: mt-led-glow 1.5s ease-in-out infinite;
}
@keyframes mt-led-glow {
  0%, 100% { box-shadow: 0 0 4px rgba(255,217,111,0.4); }
  50%      { box-shadow: 0 0 12px rgba(255,217,111,0.9); }
}

/* Lv 9+：clubhouse 右邊加鐘塔（::after on .mt-home-clubhouse） */
/* Lv 10：草地噴泉用 SVG — 大幅放大、依「最下面台座 Y」決定 z 軸 */
.mt-home-fountain {
  position: absolute;
  bottom: 22%;   /* 台座 Y = 22% from bottom → z = 100 + (100 - 22) = 178 */
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 200px;
  /* 所有 SVG 內部物件共享同一 z（依台座 Y 計算）→ 球員若 y > 22% 在前、否則在後 */
  z-index: 178;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.4)) drop-shadow(0 0 18px rgba(135,206,235,0.6));
  animation: mt-fountain-bob 3.2s ease-in-out infinite;
}
.mt-home-fountain svg { width: 100%; height: 100%; display: block; }
@keyframes mt-fountain-bob {
  0%, 100% { transform: translateX(-50%) scale(1);    }
  50%      { transform: translateX(-50%) scale(1.04); }
}
/* 噴泉水柱單獨 pulse */
.mt-home-fountain .mt-fountain-water {
  animation: mt-fountain-water 1.6s ease-in-out infinite;
  transform-origin: 30px 38px;
}
@keyframes mt-fountain-water {
  0%, 100% { transform: scaleY(1);    opacity: 0.85; }
  50%      { transform: scaleY(1.15); opacity: 1;    }
}

/* ─── 草地裝飾：每級在地面區加 SVG 物件（樹叢 / 燈柱 / 長椅 / 雕像）─── */
.mt-home-grass-decor {
  position: absolute;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
}
.mt-home-grass-decor svg { width: 100%; height: 100%; display: block; }
/* 草地裝飾尺寸
   底部裝飾（樹、燈、灌木、長椅、頒獎台）→ 永遠最前（球員不會走到那麼下面）
   雕像在較高處 → 依 Y 軸動態排序 (z = 100 + (100 - bottomPct)) */
.mt-home-grass-decor.is-bush     { width: 50px; height: 38px;  bottom: 6%; z-index: 250; }
.mt-home-grass-decor.is-lamp     { width: 24px; height: 90px;  bottom: 8%; z-index: 250; }
.mt-home-grass-decor.is-bench    { width: 64px; height: 28px;  bottom: 5%; z-index: 250; }
.mt-home-grass-decor.is-tree     { width: 70px; height: 110px; bottom: 6%; z-index: 250; }
.mt-home-grass-decor.is-statue   { width: 36px; height: 76px;  bottom: 8%; z-index: 192; }
.mt-home-grass-decor.is-podium   { width: 80px; height: 22px;  bottom: 4%; z-index: 250; filter: drop-shadow(0 0 8px rgba(255,215,0,0.6)); }

/* 多樓層分隔線（疊在 clubhouse 上的透明 overlay div .mt-home-floors）*/
.mt-home-floors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.mt-home-floors[data-floors="2"] {
  background:
    linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(0,0,0,0.45) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.mt-home-floors[data-floors="3"] {
  background:
    linear-gradient(180deg, transparent calc(33% - 0.5px), rgba(0,0,0,0.45) calc(33% - 0.5px) calc(33% + 0.5px), transparent calc(33% + 0.5px)),
    linear-gradient(180deg, transparent calc(66% - 0.5px), rgba(0,0,0,0.45) calc(66% - 0.5px) calc(66% + 0.5px), transparent calc(66% + 0.5px));
}
.mt-home-floors[data-floors="4"] {
  background:
    linear-gradient(180deg, transparent calc(25% - 0.5px), rgba(0,0,0,0.45) calc(25% - 0.5px) calc(25% + 0.5px), transparent calc(25% + 0.5px)),
    linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(0,0,0,0.45) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(180deg, transparent calc(75% - 0.5px), rgba(0,0,0,0.45) calc(75% - 0.5px) calc(75% + 0.5px), transparent calc(75% + 0.5px));
}

/* clubhouse 高度依等級（樓層上限 3、高等級靠建築變寬不是堆樓） */
.mt-home-distance[data-stadium-level="1"]  .mt-home-clubhouse { height: 80px;  }
.mt-home-distance[data-stadium-level="2"]  .mt-home-clubhouse { height: 90px;  }
.mt-home-distance[data-stadium-level="3"]  .mt-home-clubhouse { height: 100px; }
.mt-home-distance[data-stadium-level="4"]  .mt-home-clubhouse { height: 110px; }
.mt-home-distance[data-stadium-level="5"]  .mt-home-clubhouse { height: 130px; }
.mt-home-distance[data-stadium-level="6"]  .mt-home-clubhouse { height: 145px; }
.mt-home-distance[data-stadium-level="7"]  .mt-home-clubhouse { height: 165px; max-width: 320px; }
.mt-home-distance[data-stadium-level="8"]  .mt-home-clubhouse { height: 175px; max-width: 340px; }
.mt-home-distance[data-stadium-level="9"]  .mt-home-clubhouse { height: 185px; max-width: 360px; }
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse { height: 195px; max-width: 380px; }
.mt-home-distance[data-stadium-level="10"] {
  animation: mt-stadium-rainbow 6s linear infinite;
}
@keyframes mt-stadium-rainbow {
  0%   { filter: hue-rotate(0deg)   drop-shadow(0 0 20px rgba(255,215,0,0.3)); }
  50%  { filter: hue-rotate(20deg)  drop-shadow(0 0 25px rgba(255,215,0,0.5)); }
  100% { filter: hue-rotate(0deg)   drop-shadow(0 0 20px rgba(255,215,0,0.3)); }
}

/* 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%; left: 14%;     /* 改左邊、避開右上角的木牌 widget */
  width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle, #fff7c0 0%, #ffd866 55%, #ffaa33 100%);
  box-shadow:
    0 0 40px rgba(255,200,80,0.65),
    0 0 80px rgba(255,170,50,0.35);
  z-index: 1;        /* 太陽在最背景、雲在太陽之前可以遮過 */
}
.mt-home-sun::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,220,120,0.25) 0deg, transparent 20deg,
    rgba(255,220,120,0.25) 45deg, transparent 65deg,
    rgba(255,220,120,0.25) 90deg, transparent 110deg,
    rgba(255,220,120,0.25) 135deg, transparent 155deg,
    rgba(255,220,120,0.25) 180deg, transparent 200deg,
    rgba(255,220,120,0.25) 225deg, transparent 245deg,
    rgba(255,220,120,0.25) 270deg, transparent 290deg,
    rgba(255,220,120,0.25) 315deg, transparent 335deg);
  animation: mt-sun-rays 30s linear infinite;
  z-index: -1;
}
.mt-home-sun::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,235,160,0.4), transparent 70%);
  animation: mt-sun-pulse 3.5s ease-in-out infinite;
  z-index: -1;
}
@keyframes mt-sun-rays {
  to { transform: rotate(360deg); }
}
@keyframes mt-sun-pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 0.9; }
}
.mt-home-cloud {
  position: absolute;
  z-index: 2;             /* 雲在太陽前面、但低於建築 / 裝飾 / 球員 */
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
  animation:
    mt-cloud-drift 90s linear infinite,
    mt-cloud-bob 6s ease-in-out infinite;
}
.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%;
}

/* 球場等級裝飾 — 看台 / 聚光燈 / 旗桿 / 球迷 */
/* 看台：階梯踏面 + 兩側直立扶手（上下樓抓的那種，分別在左右邊緣）*/
.mt-home-stand {
  position: absolute;
  bottom: 0;
  width: 80px;
  height: 65%;
  background:
    /* 階梯踏面紋（180deg 横向）：踏面 + 前緣陰影 + 階梯下凹 */
    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;
  /* 兩側直立扶手（inset shadow 製作米色直條 + 深邊內勾）*/
  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-fan.mt-home-fan-on-stand 變體（同 chibi 縮小） */
.mt-home-stand-fans {
  position: absolute;
  inset: 12px 2px 0 2px;     /* 留頂部彩條 + 扶手 + 兩側邊框 */
  pointer-events: none;
  overflow: hidden;
}
/* 看台球迷：用同一套 .mt-home-fan chibi、縮 50% 才裝得進 14px 一階 */
.mt-home-fan.mt-home-fan-on-stand {
  width: 16px;
  height: 24px;
  bottom: calc(var(--tier, 0) * 14px + 2px);
  transform: translateX(-50%) scale(0.7);
  transform-origin: bottom center;
}

/* 聚光燈：base 從地平線（clubhouse bottom）開始往上長、最頂端是燈具
   高度有上限（避免高等級 clubhouse 過高、燈頭跑出 scene 外）*/
.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;
}
/* Lv 8+ 高聳聚光燈（仍受 max-height 上限保護不超出 scene）*/
.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; }
.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); }
}
.mt-home-distance[data-stadium-level="10"] .mt-home-flag::after {
  background: linear-gradient(135deg, #c0392b 0%, #8b1f15 100%);
}

/* 球場等級 → clubhouse 漸進變更 */
/* ════════════════════════════════════════════════
   球場 10 級整體進化（牆體 / 屋頂 / 門 / 窗 / 煙囪）
   5 階段：木造 → 紅磚 → 石造/現代 → 玻璃帷幕 → 鋼骨/黃金
   ══════════════════════════════════════════════ */

/* Lv 1：原始木造小屋 — 深棕、木紋粗糙、有煙囪 */
.mt-home-distance[data-stadium-level="1"] .mt-home-clubhouse {
  background:
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(0,0,0,0.22) 12px 13px),
    repeating-linear-gradient(90deg, transparent 0 40px, rgba(0,0,0,0.15) 40px 41px),
    linear-gradient(180deg, #8a6238 0%, #6e4a26 100%);
}
.mt-home-distance[data-stadium-level="1"] .mt-home-clubhouse-roof .is-roof-main {
  fill: #5a3a1a; stroke: #2a1408; stroke-width: 2.5;
}
.mt-home-distance[data-stadium-level="1"] .mt-home-clubhouse-door {
  background: #3a2410;
}
.mt-home-distance[data-stadium-level="1"] .mt-home-clubhouse-window {
  background: linear-gradient(135deg, #5a8090 0%, #3a5060 100%);
}

/* Lv 2：木造小屋升級 — 修整過的淺棕木、屋瓦初現 */
.mt-home-distance[data-stadium-level="2"] .mt-home-clubhouse {
  max-width: 240px;
  background:
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(0,0,0,0.15) 10px 11px),
    linear-gradient(180deg, #c19a6b 0%, #a07d52 100%);
}
.mt-home-distance[data-stadium-level="2"] .mt-home-clubhouse-roof .is-roof-main {
  fill: #8a4a2a; stroke: #2a1408; stroke-width: 2.5;
}
.mt-home-distance[data-stadium-level="2"] .mt-home-clubhouse-window {
  background: linear-gradient(135deg, #9ec5d6 0%, #6fa8d6 100%);
}

/* Lv 3：紅磚體育館 — 磚紋清晰、紅瓦屋頂、無煙囪改加陶瓦 */
.mt-home-distance[data-stadium-level="3"] .mt-home-clubhouse {
  max-width: 260px;
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(60,15,5,0.45) 8px 9px),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(60,15,5,0.4) 18px 19px),
    linear-gradient(180deg, #b85e4a 0%, #9a4830 100%);
}
.mt-home-distance[data-stadium-level="3"] .mt-home-clubhouse-roof .is-roof-main {
  fill: #c0392b; stroke: #2a1408; stroke-width: 2.5;
}
.mt-home-distance[data-stadium-level="3"] .mt-home-clubhouse-roof-tiles {
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(0,0,0,0.3) 4px 5px);
}
.mt-home-distance[data-stadium-level="3"] .mt-home-clubhouse-window {
  background: linear-gradient(135deg, #b0ddef 0%, #87ceeb 60%, #6fa8d6 100%);
}

/* Lv 4：米色磚 + 鋪石路 — 磚較精細、屋瓦更暗紅 */
.mt-home-distance[data-stadium-level="4"] .mt-home-clubhouse {
  max-width: 260px;
  background:
    repeating-linear-gradient(0deg, transparent 0 6px, rgba(100,70,40,0.3) 6px 7px),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(100,70,40,0.25) 14px 15px),
    linear-gradient(180deg, #e8dcc2 0%, #c5b896 100%);
}
.mt-home-distance[data-stadium-level="4"] .mt-home-clubhouse-roof .is-roof-main {
  fill: #a82e1f; stroke: #2a1408; stroke-width: 2.5;
}
.mt-home-distance[data-stadium-level="4"] .mt-home-clubhouse-chimney {
  display: none;  /* 進入磚造後不再有木屋煙囪 */
}

/* Lv 5：石造體育館 — 石灰白牆、紅瓦、大門柱 */
.mt-home-distance[data-stadium-level="5"] .mt-home-clubhouse {
  max-width: 280px;
  background:
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(0,0,0,0.12) 20px 21px),
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(0,0,0,0.1) 36px 37px),
    linear-gradient(180deg, #e8e0d0 0%, #c5bca8 100%);
}
.mt-home-distance[data-stadium-level="5"] .mt-home-clubhouse-roof .is-roof-main {
  fill: #b04030; stroke: #2a1408; stroke-width: 2.5;
}
.mt-home-distance[data-stadium-level="5"] .mt-home-clubhouse-chimney { display: none; }
.mt-home-distance[data-stadium-level="5"] .mt-home-clubhouse-door {
  background: linear-gradient(180deg, #6a4a30 0%, #4a3520 100%);
}

/* Lv 6：現代化 — 灰白混凝土 + 玻璃感窗、平頂感 */
.mt-home-distance[data-stadium-level="6"] .mt-home-clubhouse {
  max-width: 280px;
  background:
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(0,0,0,0.06) 40px 41px),
    linear-gradient(180deg, #f0f0f0 0%, #c8c8c8 100%);
}
.mt-home-distance[data-stadium-level="6"] .mt-home-clubhouse-roof .is-roof-main {
  fill: #5a5a5a; stroke: #2a1408; stroke-width: 2.5;
}
.mt-home-distance[data-stadium-level="6"] .mt-home-clubhouse-roof-tiles {
  background: none;       /* 現代平頂、不用瓦片紋 */
}
.mt-home-distance[data-stadium-level="6"] .mt-home-clubhouse-chimney { display: none; }
.mt-home-distance[data-stadium-level="6"] .mt-home-clubhouse-window {
  background: linear-gradient(135deg, #c0e8f5 0%, #7090a8 100%);
  border-color: #2a3040;
}

/* Lv 7：玻璃帷幕 + 金色屋頂 — 深藍玻璃格、屋頂變金 */
.mt-home-distance[data-stadium-level="7"] .mt-home-clubhouse {
  max-width: 300px;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,0.12) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,255,255,0.1) 26px 27px),
    linear-gradient(180deg, #4a6080 0%, #2a3a55 100%);
}
.mt-home-distance[data-stadium-level="7"] .mt-home-clubhouse-roof .is-roof-main {
  fill: #f0c040 !important; stroke: #5a4010; stroke-width: 2.5;
}
.mt-home-distance[data-stadium-level="7"] .mt-home-clubhouse-roof-tiles { background: none; }
.mt-home-distance[data-stadium-level="7"] .mt-home-clubhouse-chimney { display: none; }
.mt-home-distance[data-stadium-level="7"] .mt-home-clubhouse-window {
  background: linear-gradient(135deg, #80b8d0 0%, #4070a0 100%);
  border-color: #ffd96f;
}
.mt-home-distance[data-stadium-level="7"] .mt-home-clubhouse-door {
  background: linear-gradient(180deg, #1a2030 0%, #0a1020 100%);
  border-color: #ffd96f;
}

/* Lv 8：鋼骨+LED — 黑底玻璃 + 鋼框、屋頂金色發光 */
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse {
  max-width: 300px;
  background:
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(255,217,111,0.2) 14px 15px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,217,111,0.15) 22px 23px),
    linear-gradient(180deg, #2a3040 0%, #1a1f30 100%);
  box-shadow: 0 0 12px rgba(255,217,111,0.3);
}
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse-roof .is-roof-main {
  fill: #f0c040 !important; stroke: #5a4010; stroke-width: 2.5;
}
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse-roof-tiles { background: none; }
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse-chimney { display: none; }
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse-window {
  background: linear-gradient(135deg, #ffd96f 0%, #c0a040 100%);
  border-color: #5a4010;
}
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse-door {
  background: linear-gradient(180deg, #1a1408 0%, #0a0a04 100%);
  border-color: #ffd96f;
}

/* Lv 9：高聳鋼骨 — 純白混凝土 + 金邊框 + 鐘塔效果（已在 ::after 加）*/
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse {
  max-width: 320px;
  background:
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(180,150,80,0.18) 22px 23px),
    repeating-linear-gradient(90deg, transparent 0 32px, rgba(180,150,80,0.15) 32px 33px),
    linear-gradient(180deg, #fdfaf0 0%, #e0d8c0 100%);
  border-color: #b89060;
  box-shadow: 0 0 16px rgba(255,217,111,0.4);
}
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse-roof .is-roof-main {
  fill: #f0c040 !important; stroke: #5a4010; stroke-width: 2.5;
}
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse-roof-tiles { background: none; }
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse-chimney { display: none; }
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse-window {
  background: linear-gradient(135deg, #fff5d0 0%, #f0c060 100%);
  border-color: #b89060;
}

/* Lv 10：黃金球場 — 全金 + 發光 */
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse {
  max-width: 320px;
  background:
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(200,140,40,0.45) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(200,140,40,0.35) 28px 29px),
    linear-gradient(180deg, #ffe890 0%, #d4a040 100%);
  border-color: #6e4a08;
  box-shadow: 0 0 24px rgba(255,215,0,0.7), inset 0 0 12px rgba(255,255,255,0.4);
}
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-roof .is-roof-main {
  fill: #ffd700 !important; stroke: #6e4a08; stroke-width: 2.5;
}
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-roof-tiles {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(180,130,0,0.5) 3px 4px);
}
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-chimney { display: none; }
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-window {
  background: linear-gradient(135deg, #fff0a0 0%, #ffd700 100%);
  border-color: #6e4a08;
}
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-door {
  background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
  border-color: #6e4a08;
}

/* 舊規則：Lv 2-10 max-width 漸增（保留兼容、新規則優先） */
.mt-home-distance[data-stadium-level="2"] .mt-home-clubhouse-OLD { 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 .is-roof-main,
.mt-home-distance[data-stadium-level="8"] .mt-home-clubhouse-roof .is-roof-main,
.mt-home-distance[data-stadium-level="9"] .mt-home-clubhouse-roof .is-roof-main,
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-roof .is-roof-main {
  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;
  height: 34px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.6));
  image-rendering: pixelated;
  transform-origin: 50% 95%;
}
.mt-home-fan svg {
  width: 100%; height: 100%;
  display: block;
}

/* 3 個動畫 variant — 不旋轉、只偶爾上下跳、停留時間長
   v1: 慢節奏單跳、v2: 快雙跳、v3: 中速大跳
   配合 JS 給的 random animation-delay 整體不會同步 */
.mt-home-fan.fan-v1 { animation: mt-fan-jump-1 5.4s ease-in-out infinite; }
.mt-home-fan.fan-v2 { animation: mt-fan-jump-2 6.8s ease-in-out infinite; }
.mt-home-fan.fan-v3 { animation: mt-fan-jump-3 4.6s ease-in-out infinite; }

/* v1: 慢的小跳、85% 時間靜止 */
@keyframes mt-fan-jump-1 {
  0%, 80%, 100% { transform: translateY(0); }
  87%           { transform: translateY(-5px); }
  93%           { transform: translateY(-1px); }
}
/* v2: 快雙跳（連續 2 次彈） */
@keyframes mt-fan-jump-2 {
  0%, 75%, 100% { transform: translateY(0); }
  82%           { transform: translateY(-6px); }
  86%           { transform: translateY(-1px); }
  90%           { transform: translateY(-4px); }
  95%           { transform: translateY(0); }
}
/* v3: 大跳（一次彈很高、慢慢回） */
@keyframes mt-fan-jump-3 {
  0%, 70%, 100% { transform: translateY(0); }
  80%           { transform: translateY(-8px); }
  88%           { transform: translateY(-3px); }
  94%           { transform: translateY(-1px); }
}

/* 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 屋頂：寬 110% 蓋滿牆頂 + 兩側 eaves overhang
   shape 由 JS _renderClubhouseRoofSvg 依等級切換（gable/hipped/flat/pyramid/stepped/dome） */
.mt-home-clubhouse-roof {
  position: absolute;
  left: -8%; right: -8%; top: -28px;
  width: 116%;
  height: 32px;
  display: block;
  overflow: visible;
  z-index: 2;
}
/* 主屋頂 fill / stroke：被 per-stadium-level rule 覆寫 */
.mt-home-clubhouse-roof .is-roof-main {
  fill: #c0392b;
  stroke: #1a1a2e;
  stroke-width: 3;
}
.mt-home-clubhouse-roof .is-roof-ridge {
  stroke: #2a1408;
  stroke-width: 1.2;
}
.mt-home-clubhouse-roof .is-roof-spire {
  fill: #ffd700;
  stroke: #2a1408;
  stroke-width: 1;
}
/* 屋頂磚瓦紋路（橫條紋）— 只在 gable 屋頂（Lv 1-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;
}
/* Lv 3+ 屋頂改變形狀、hide triangle-clipped tiles */
.mt-home-distance[data-stadium-level="3"]  .mt-home-clubhouse-roof-tiles,
.mt-home-distance[data-stadium-level="4"]  .mt-home-clubhouse-roof-tiles,
.mt-home-distance[data-stadium-level="5"]  .mt-home-clubhouse-roof-tiles,
.mt-home-distance[data-stadium-level="6"]  .mt-home-clubhouse-roof-tiles,
.mt-home-distance[data-stadium-level="7"]  .mt-home-clubhouse-roof-tiles,
.mt-home-distance[data-stadium-level="8"]  .mt-home-clubhouse-roof-tiles,
.mt-home-distance[data-stadium-level="9"]  .mt-home-clubhouse-roof-tiles,
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-roof-tiles { display: none; }
/* 煙囪（坐落於右側屋頂斜面上）*/
.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;
  z-index: 5;        /* 高於窗戶（z 1）、roof（z 2）→ 永遠蓋住背後窗戶 */
}
/* Lv 5：建物變高、隊牌往上移到屋頂下方、塞在第 2 層窗戶上方 (Lv 6+ 用下面規則讓位給 CHAMPIONS) */
.mt-home-distance[data-stadium-level="5"]  .mt-home-clubhouse-sign { top: 5%; }
/* Lv 6+：隊牌讓位給 CHAMPIONS、只小幅往下、不要太低 */
.mt-home-distance[data-stadium-level="6"]  .mt-home-clubhouse-sign,
.mt-home-distance[data-stadium-level="7"]  .mt-home-clubhouse-sign,
.mt-home-distance[data-stadium-level="8"]  .mt-home-clubhouse-sign,
.mt-home-distance[data-stadium-level="9"]  .mt-home-clubhouse-sign,
.mt-home-distance[data-stadium-level="10"] .mt-home-clubhouse-sign { top: 10%; }
.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: 24%; top: 55%;
  background: linear-gradient(135deg, #b0ddef 0%, #87ceeb 60%, #6fa8d6 100%);
  border: 2px solid #1a1a2e;
  z-index: 1;   /* 在隊牌之下 */
  box-sizing: border-box;
}
/* 窗框十字（垂直 + 水平兩條線）*/
.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 / mt-home-cw-2 已停用 — 窗戶改由 _renderClubhouseWindowsHtml(lv) 動態渲染、inline 設 left/top/width/height */

/* Lv 5+ 球場邊（訓練館門口兩側）廣告牌、彩色 LED 風
   ★ 兩條獨立的條（左 + 右）、JS render 完用 clubhouse rect 把 left/right inline 設成 px
     左條 right 邊貼門 left 邊、右條 left 邊貼門 right 邊
     門本身就是 gap、不管螢幕大小或 stadium 等級都自動對齊
   ★ 每片固定 80px、JS 產 12 片、用 overflow:hidden 把超出部分裁掉、確保牌貼到邊 */
.mt-home-pitch-ads-side {
  position: absolute;
  top: 36%;
  height: 18px;
  display: flex;
  gap: 1px;
  padding: 0;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.45));
  overflow: hidden;
  /* left / right 由 JS 在 render 後 + ResizeObserver 即時設定 */
}
/* 左條：DOM 第一片顯示在右（=門邊）、後面的往左延、超出 scene 左邊就裁掉 */
.mt-home-pitch-ads-l {
  flex-direction: row-reverse;
}
.mt-home-pitch-ad {
  flex: 0 0 80px;       /* 固定寬度、不縮不長 — 字才放得下 */
  background: var(--c, #1a3050);
  border: 1px solid #1a1a2e;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 40%, rgba(0,0,0,0.25) 100%),
    linear-gradient(180deg, var(--c, #1a3050), var(--c, #1a3050));
}

/* 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.08) 30px, rgba(255,255,255,0.08) 60px),
    /* 微弱垂直紋路（垂直草修剪線）*/
    repeating-linear-gradient(90deg,
      transparent 0, transparent 80px,
      rgba(0,0,0,0.04) 80px, rgba(0,0,0,0.04) 81px);
  pointer-events: none;
}
/* 草地上的小花點綴 — 黃 / 白 / 粉，散落在草坪上 */
.mt-home-ground-lines::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 2px at 15% 25%, #ffeb3b 60%, transparent 61%),
    radial-gradient(circle 2px at 42% 18%, #fff 60%, transparent 61%),
    radial-gradient(circle 2px at 68% 38%, #ff80c8 60%, transparent 61%),
    radial-gradient(circle 2px at 88% 55%, #ffeb3b 60%, transparent 61%),
    radial-gradient(circle 2px at 8% 65%, #fff 60%, transparent 61%),
    radial-gradient(circle 2px at 35% 78%, #ff80c8 60%, transparent 61%),
    radial-gradient(circle 2px at 78% 85%, #ffeb3b 60%, transparent 61%),
    radial-gradient(circle 2px at 55% 60%, #fff 60%, transparent 61%);
  background-size: 360px 240px;
  background-repeat: repeat;
  opacity: 0.7;
  pointer-events: none;
}
/* 隨機草簇 dots — 用 radial-gradient repeat 模擬 */
.mt-home-ground-tufts {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle 1.5px at 12% 18%, rgba(0,0,0,0.22) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 32% 35%, rgba(255,255,255,0.18) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 58% 22%, rgba(0,0,0,0.22) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 78% 48%, rgba(255,255,255,0.18) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 88% 12%, rgba(0,0,0,0.22) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 22% 68%, rgba(0,0,0,0.22) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 48% 78%, rgba(255,255,255,0.18) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 68% 88%, rgba(0,0,0,0.22) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 82% 72%, rgba(255,255,255,0.18) 50%, transparent 51%),
    radial-gradient(circle 1.5px at 8% 52%, rgba(0,0,0,0.22) 50%, transparent 51%);
  background-size: 200px 200px;
  background-repeat: repeat;
  pointer-events: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ═════════════════════════════════════════════════════════════
   🎰 GACHA TAB — AI 背景圖 + 卡包/按鈕/招牌 overlay
   ═════════════════════════════════════════════════════════════ */
.mt-gacha-shop-fullscene {
  /* 改用 absolute + inset:0 填滿父 .mt-hub-content 的 padding-box
     (絕對定位下 padding-box 包含 parent 的 padding 區域、視覺上跟原本
      width: calc(100%+40px) + 負 margin 效果一樣、但 element 寬高就是 558×671
      child 用 % 定位才會落在正確位置) */
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
  background:
    url('../img/my-team/gacha-bg.jpg') 0 0 / 100% 100% no-repeat,
    #1a0a14;
}
/* gacha tab 不滾動 */
.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);
}

/* 黑板告示 */
.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: 10%;              /* 從 5% 往上拉到 10% — 不再貼底 */
  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 {
  /* 改用 absolute + inset:0 填滿父 padding-box（同 .mt-gacha-shop-fullscene 原因）*/
  position: absolute;
  inset: 0;
  padding: 0;
  overflow: hidden;
  background:
    url('../img/my-team/coach-bg.jpg') 0 0 / 100% 100% no-repeat,
    #2a1812;
}
/* 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: 6%;
  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: -14px;
  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;
}

/* ─── 球員 tab：展開所有球員按鈕 + grid modal（同教練 modal 設計） ─── */
.mt-roster-expand-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #2a2a4a 0%, #1a1a35 100%);
  border: 1px solid rgba(240,192,64,0.4);
  border-radius: 8px;
  color: #ffe680;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.15s;
}
.mt-roster-expand-btn:hover {
  background: linear-gradient(180deg, #3a3a5a 0%, #2a2a45 100%);
  transform: translateY(-1px);
}
.mt-roster-expand-btn:active { transform: translateY(0); }

/* 球員 tab 底部按鈕列（展開 + 陣型預設）*/
.mt-roster-actions-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}
.mt-roster-actions-row .mt-roster-expand-btn { margin-top: 0; }
.mt-roster-presets-btn {
  padding: 10px 14px;
  background: linear-gradient(180deg, #2a4a5a 0%, #1a3a4a 100%);
  border: 1px solid rgba(120,200,240,0.45);
  border-radius: 8px;
  color: #cfe8ff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: transform 0.1s, filter 0.1s;
}
.mt-roster-presets-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.mt-roster-presets-btn:active { transform: translateY(0); }

/* 陣型預設 modal */
.mt-formation-presets-card {
  max-width: 420px;
  padding: 22px 18px;
}
.mt-formation-presets-title {
  font-size: 17px; font-weight: 900;
  color: #f0c040; text-align: center; margin-bottom: 4px;
  letter-spacing: 1px;
}
.mt-formation-presets-hint {
  font-size: 11px; color: rgba(255,255,255,0.6);
  text-align: center; margin-bottom: 14px;
}
.mt-formation-presets-list {
  display: flex; flex-direction: column; gap: 10px;
}
.mt-fp-row {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 12px;
}
.mt-fp-row.is-saved { border-color: rgba(120,200,240,0.4); }
.mt-fp-row.is-empty { opacity: 0.85; }
.mt-fp-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.mt-fp-name {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 8px;
}
.mt-fp-name:focus {
  outline: none;
  border-color: rgba(240,192,64,0.6);
}
.mt-fp-formation {
  font-size: 11px; font-weight: 800;
  background: rgba(155,135,245,0.18);
  border: 1px solid rgba(155,135,245,0.5);
  color: #cdbfff;
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
}
.mt-fp-formation.mt-fp-empty-tag {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.45);
}
.mt-fp-preview {
  font-size: 11px; color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
  padding: 4px 0;
}
.mt-fp-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.mt-fp-save, .mt-fp-apply, .mt-fp-delete {
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  color: #fff;
  transition: filter 0.1s;
}
.mt-fp-save  { background: rgba(120,200,240,0.22); border-color: rgba(120,200,240,0.5); color: #cfe8ff; flex: 1; }
.mt-fp-apply { background: rgba(240,192,64,0.25); border-color: rgba(240,192,64,0.55); color: #ffe082; flex: 1; }
.mt-fp-delete { background: rgba(239,83,80,0.18); border-color: rgba(239,83,80,0.5); color: #ef9a9a; width: 36px; }
.mt-fp-save:hover, .mt-fp-apply:hover, .mt-fp-delete:hover { filter: brightness(1.15); }
.mt-fp-save:disabled, .mt-fp-apply:disabled, .mt-fp-delete:disabled { opacity: 0.5; cursor: wait; }

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

.mt-roster-slot {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 8px 4px 18px;     /* 底部 18px 留給 rarity 標籤 */
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.mt-roster-slot:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-2px);
}
.mt-roster-slot.rarity-SSR {
  border-color: #f0c040;
  box-shadow: 0 0 12px rgba(240,192,64,0.35);
}
.mt-roster-slot.rarity-SR { border-color: #9b87f5; }
.mt-roster-slot.is-starter::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(0,255,135,0.5);
  pointer-events: none;
}
.mt-roster-slot.is-injured {
  opacity: 0.7;
  filter: grayscale(0.3);
}
.mt-roster-slot.is-training {
  opacity: 0.8;
  filter: saturate(0.6);
}
/* 場上/傷停 文字標籤 pill — 右上角 */
.mt-roster-slot-badge {
  position: absolute;
  top: 3px; right: 3px;
  font-size: 9px;
  font-weight: 900;
  padding: 1.5px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.mt-roster-slot-badge.is-starter-badge {
  background: linear-gradient(180deg, #00d96b 0%, #00a851 100%);
  color: #0a2914;
  border: 1px solid rgba(255,255,255,0.4);
}
.mt-roster-slot-badge.is-injured-badge {
  background: linear-gradient(180deg, #ff5050 0%, #c52525 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
.mt-roster-slot-badge.is-training-badge {
  background: linear-gradient(180deg, #ffa726 0%, #e65100 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
.mt-roster-slot-portrait {
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  border: 2px solid rgba(255,255,255,0.15);
}
.mt-roster-slot.rarity-SSR .mt-roster-slot-portrait { border-color: #ffd455; }
.mt-roster-slot.rarity-SR .mt-roster-slot-portrait { border-color: #b5a4ff; }
.mt-roster-slot-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.mt-roster-slot-name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mt-roster-slot-pos {
  font-size: 10px;
  color: #f0c040;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.mt-roster-slot-rarity {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0,0,0,0.5);
  color: rgba(255,255,255,0.85);
  letter-spacing: 1px;
}
.mt-roster-slot-rarity.rarity-SSR { background: #f0c040; color: #2a1505; }
.mt-roster-slot-rarity.rarity-SR { background: #9b87f5; color: #fff; }

/* 羈絆狀態列（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; }

/* 按鈕區：透明、讓按鈕自己跳出來 */
.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;
  /* 每 tier 用 CSS 變數定義主題色（sky / ground / accent）→ banner & path wrap 共用 */
  --tier-sky-top:    #74cfff;
  --tier-sky-mid:    #b6e6ff;
  --tier-sky-bot:    #c7e9ff;
  --tier-ground-top: #6ec24a;
  --tier-ground-bot: #3a7a25;
  --tier-accent:     #ffd96f;
  --tier-overlay-bg: rgba(0,0,0,0.65);
  --tier-overlay-fg: #ffe680;
  --tier-extra-bg:   transparent;
}
/* ─── 10 tier 主題（sky 上→下、ground 上→下、accent）─── */
.mt-match-map[data-tier="1"]  { --tier-sky-top:#74cfff; --tier-sky-mid:#b6e6ff; --tier-sky-bot:#c7e9ff; --tier-ground-top:#6ec24a; --tier-ground-bot:#3a7a25; --tier-accent:#ffd96f; --tier-overlay-fg:#ffe680; }
.mt-match-map[data-tier="2"]  { --tier-sky-top:#ffc488; --tier-sky-mid:#ffe2b8; --tier-sky-bot:#fff0d6; --tier-ground-top:#80b760; --tier-ground-bot:#5a9040; --tier-accent:#ff9a3c; --tier-overlay-fg:#ffd07a; }
.mt-match-map[data-tier="3"]  { --tier-sky-top:#5a9fd0; --tier-sky-mid:#9ec7e2; --tier-sky-bot:#cce3f0; --tier-ground-top:#5fb050; --tier-ground-bot:#2e6822; --tier-accent:#42a5f5; --tier-overlay-fg:#a5d6ff; }
.mt-match-map[data-tier="4"]  { --tier-sky-top:#7889a0; --tier-sky-mid:#a6b8cc; --tier-sky-bot:#cdd8e6; --tier-ground-top:#52a542; --tier-ground-bot:#2c6020; --tier-accent:#90a4ae; --tier-overlay-fg:#cfd8dc; }
.mt-match-map[data-tier="5"]  { --tier-sky-top:#ffa050; --tier-sky-mid:#ffcc88; --tier-sky-bot:#ffe3b8; --tier-ground-top:#58a448; --tier-ground-bot:#286018; --tier-accent:#f39c12; --tier-overlay-fg:#ffcc66; }
.mt-match-map[data-tier="6"]  { --tier-sky-top:#d4452f; --tier-sky-mid:#ff6f55; --tier-sky-bot:#ffa688; --tier-ground-top:#4a8a3a; --tier-ground-bot:#2a5820; --tier-accent:#c0392b; --tier-overlay-fg:#ffb088; }
.mt-match-map[data-tier="7"]  { --tier-sky-top:#e8b020; --tier-sky-mid:#ffd95a; --tier-sky-bot:#fff0a8; --tier-ground-top:#50983e; --tier-ground-bot:#2c6020; --tier-accent:#d4af37; --tier-overlay-fg:#fff2a0; }
.mt-match-map[data-tier="8"]  { --tier-sky-top:#1a2050; --tier-sky-mid:#2c3a78; --tier-sky-bot:#4860a0; --tier-ground-top:#4caf50; --tier-ground-bot:#2e7d32; --tier-accent:#ffd96f; --tier-overlay-fg:#ffe680; }
.mt-match-map[data-tier="9"]  { --tier-sky-top:#5a2a8a; --tier-sky-mid:#a050c0; --tier-sky-bot:#ff8ab0; --tier-ground-top:#3da030; --tier-ground-bot:#1f6020; --tier-accent:#ce93d8; --tier-overlay-fg:#f0c0ff; }
.mt-match-map[data-tier="10"] { --tier-sky-top:#ffd700; --tier-sky-mid:#ffbf40; --tier-sky-bot:#fff0a8; --tier-ground-top:#56b048; --tier-ground-bot:#1f5818; --tier-accent:#ffd700; --tier-overlay-fg:#fff5b0; }

/* 開發測試：跳 Tier 按鈕（fixed 右上角小膠囊）*/
.mt-match-test-tier {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 20;
  background: rgba(0,0,0,0.85);
  border: 1.5px dashed rgba(255,217,111,0.7);
  color: #ffd96f;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.mt-match-test-tier:hover { background: rgba(0,0,0,0.95); }
.mt-match-test-tier:active { transform: scale(0.96); }

/* 頂部 2D 主角卷軸 banner */
.mt-match-banner {
  position: relative;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--tier-sky-top) 0%, var(--tier-sky-mid) 60%, var(--tier-sky-bot) 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);
}
/* Tier 8（夜場）：sky 上加一層星空雜點（小白點）*/
.mt-match-banner[data-tier="8"]::before {
  content: ''; position: absolute; inset: 0 0 32px 0;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(255,255,255,0.9) 1px, transparent 1.5px),
    radial-gradient(circle at 28% 14%, rgba(255,255,255,0.7) 1px, transparent 1.5px),
    radial-gradient(circle at 48% 38%, rgba(255,255,255,0.85) 1px, transparent 1.5px),
    radial-gradient(circle at 68% 22%, rgba(255,255,255,0.6) 1px, transparent 1.5px),
    radial-gradient(circle at 86% 48%, rgba(255,255,255,0.95) 1px, transparent 1.5px),
    radial-gradient(circle at 38% 60%, rgba(255,255,255,0.5) 1px, transparent 1.5px);
  pointer-events: none;
}
/* Tier 9（紫粉黎明）：頂部加極光帶 */
.mt-match-banner[data-tier="9"]::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40px;
  background: linear-gradient(180deg,
    rgba(140,80,200,0.55) 0%, rgba(255,140,200,0.3) 50%, transparent 100%);
  pointer-events: none;
}
/* Tier 10（傳奇）：彩虹光環 + 金色閃光 */
.mt-match-banner[data-tier="10"]::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 100%, rgba(255,215,0,0.45) 0%, transparent 60%),
    conic-gradient(from 0deg at 50% 90%,
      transparent 0deg, rgba(255,107,107,0.18) 60deg, transparent 90deg,
      rgba(255,217,111,0.22) 150deg, transparent 180deg,
      rgba(126,211,107,0.18) 210deg, transparent 240deg,
      rgba(135,206,235,0.18) 300deg, transparent 360deg);
  pointer-events: none;
  animation: mt-match-rainbow-spin 18s linear infinite;
}
@keyframes mt-match-rainbow-spin { to { transform: rotate(360deg); } }
.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;
  border-top: 2px solid rgba(0,0,0,0.55);
  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, var(--tier-ground-top, #6ec24a) 0%, var(--tier-ground-bot, #3a7a25) 100%);
}
/* 主角 LPC sprite（JS 控位置/sprite frame） */
.mt-match-hero {
  position: absolute;
  bottom: 2px;
  left: -40px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  z-index: 3;
  pointer-events: none;
}
/* 守門員 sprite（站在球門中間） */
.mt-match-goalkeeper {
  position: absolute;
  right: 32px;
  bottom: 2px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  z-index: 2;
  pointer-events: none;
}
/* 球門 SVG（拉寬 ≈ 真實球門比例） */
.mt-match-goal {
  position: absolute;
  right: 4px;
  bottom: 16px;
  width: 80px;
  height: 50px;
  z-index: 1;
}
.mt-match-goal svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
/* 對手球員 sprite ×2（站在球門前） */
.mt-match-opp {
  position: absolute;
  bottom: 2px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  z-index: 2;
  pointer-events: none;
  animation: mt-match-opp-bob 2.4s ease-in-out infinite;
}
#mt-match-opp-1 { right: 64px; }
#mt-match-opp-2 { right: 8px; animation-delay: -1.2s; }
@keyframes mt-match-opp-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
/* 對手隊徽 + 隊名（右上） */
.mt-match-opp-label {
  position: absolute;
  right: 8px; top: 8px;
  background: rgba(0,0,0,0.72);
  border: 1.5px solid rgba(229,57,53,0.7);
  border-radius: 8px;
  padding: 4px 9px 5px;
  color: #fff;
  max-width: 60%;
  z-index: 4;
  box-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
.mt-match-opp-label-tag {
  font-size: 9px;
  font-weight: 800;
  color: #ffd54a;
  letter-spacing: 1.2px;
  line-height: 1;
  margin-bottom: 3px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.mt-match-opp-label-row {
  display: flex; align-items: center; gap: 5px;
}
.mt-match-opp-label-crest {
  font-size: 15px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.mt-match-opp-crest-img {
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  vertical-align: middle;
  border: 1.5px solid #1a1a2e;
  box-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.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: var(--tier-overlay-bg, rgba(0,0,0,0.65));
  border: 1.2px solid var(--tier-accent, #ffd96f);
  border-radius: 8px;
  padding: 4px 10px;
  color: #fff;
  z-index: 5;
}
.mt-match-banner-overlay .mt-match-tier {
  font-size: 13px; font-weight: 900;
  color: var(--tier-overlay-fg, #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); }
}

/* 路線地圖外框：可滾、自動聚焦當前關 */
/* 每 tier 用 inherit 的 CSS 變數做出不同的色調背景（從 banner 那邊繼承 --tier-* ）*/
.mt-match-path-wrap {
  position: relative;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 0 12px;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--tier-accent, #ffd96f) rgba(0,0,0,0.2);
  border-radius: 12px;
  border: 1.5px solid var(--tier-accent, #ffd96f);
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,0.12), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--tier-sky-top, #4caf50) 35%, #0a1418) 0%,
                            color-mix(in srgb, var(--tier-ground-bot, #2e7d32) 60%, #050a0e) 100%);
  box-shadow:
    inset 0 4px 8px -4px rgba(0,0,0,0.55),
    inset 0 -4px 8px -4px rgba(0,0,0,0.55),
    0 4px 10px rgba(0,0,0,0.35);
}
.mt-match-path-wrap::-webkit-scrollbar { width: 6px; }
.mt-match-path-wrap::-webkit-scrollbar-thumb { background: var(--tier-accent, #ffd96f); border-radius: 3px; }

/* 路線背景裝飾層：遠山 SVG + 飄浮粒子（每 tier 變色）*/
.mt-match-path-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.mt-match-path-deco-hills {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mt-match-path-spark {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tier-accent, #ffd96f);
  box-shadow: 0 0 8px var(--tier-accent, #ffd96f);
  opacity: 0.7;
  animation: mt-match-spark-twinkle 3.5s ease-in-out infinite;
}
.mt-match-path-spark.s1 { left: 8%;  top: 12%; animation-delay: 0s;    }
.mt-match-path-spark.s2 { left: 88%; top: 28%; animation-delay: -0.7s; width: 3px; height: 3px; }
.mt-match-path-spark.s3 { left: 14%; top: 48%; animation-delay: -1.4s; width: 4px; height: 4px; }
.mt-match-path-spark.s4 { left: 82%; top: 64%; animation-delay: -2.1s; }
.mt-match-path-spark.s5 { left: 22%; top: 82%; animation-delay: -2.8s; width: 3px; height: 3px; }
@keyframes mt-match-spark-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 0.9; transform: scale(1.2); }
}

/* 路徑主線 dashed-flow 動畫（流動感）*/
.mt-match-path-anim {
  animation: mt-match-path-flow 1.6s linear infinite;
}
@keyframes mt-match-path-flow {
  to { stroke-dashoffset: -14; }
}
.mt-match-path-wrap::-webkit-scrollbar { width: 6px; }
.mt-match-path-wrap::-webkit-scrollbar-thumb { background: rgba(240,192,64,0.5); border-radius: 3px; }
.mt-match-path-wrap::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); }
/* 路線地圖 */
.mt-match-path {
  position: relative;
  width: 100%; max-width: 360px;
  height: 460px;
  margin: 0 auto;
}
.mt-match-path-line {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.mt-match-stages {
  position: absolute; inset: 0;
}
.mt-match-stage-node {
  position: absolute;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe680 0%, #f0c040 50%, #c08030 100%);
  border: 3px solid #fff;
  color: #2a1505;
  font-weight: 900;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.55),
    inset 0 2px 3px rgba(255,255,255,0.5),
    inset 0 -2px 3px rgba(0,0,0,0.25);
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
  transition: transform 0.15s;
}
.mt-match-stage-node:hover { transform: translate(-50%, -50%) scale(1.08); }
.mt-match-stage-node:active { transform: translate(-50%, -50%) scale(0.96); }
.mt-match-stage-icon { font-size: 18px; line-height: 1; }
.mt-match-stage-num  { font-size: 11px; line-height: 1; margin-top: 1px; }

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

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

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

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

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

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

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

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

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

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

/* ═════════════════════════════════════════════════════════════
   💪 TRAIN TAB — 訓練館（機台一排）
   ═════════════════════════════════════════════════════════════ */
.mt-train-gym {
  position: relative;
  padding: 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（已停用、改成 inline 嵌在 section-divider）*/
.mt-train-info-btn-float {
  position: absolute;
  top: 4px; right: 8px;
  z-index: 5;
}
/* 嵌在「🏋️ 集訓營」section-divider 同行的右側 */
.mt-train-info-btn-inline {
  margin-left: auto;
}

/* 機台動作標籤（例：跑步機、舉重）*/
.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; }
.mt-train-info-note {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* 天賦清單 */
.mt-talents-info-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.mt-talent-info-row {
  padding: 3px 8px;
  background: rgba(255,217,111,0.06);
  border-left: 2.5px solid #ffd96f;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
}
.mt-talent-info-row b { color: #ffe680; }

/* Lv 屬性上限對照表 */
.mt-lv-cap-table {
  width: 100%;
  margin-top: 6px;
  border-collapse: collapse;
  font-size: 11px;
}
.mt-lv-cap-table th,
.mt-lv-cap-table td {
  text-align: center;
  padding: 3px 6px;
  border: 1px solid rgba(240,192,64,0.18);
}
.mt-lv-cap-table th {
  background: rgba(240,192,64,0.18);
  color: #ffe680;
  font-size: 11px;
}
.mt-lv-cap-table tbody tr:nth-child(odd) td { background: rgba(255,255,255,0.03); }
.mt-lv-cap-table tbody tr.is-max td {
  background: rgba(255,217,111,0.22);
  color: #fff5b0;
}

/* 餵球員 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.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;
}

/* 訓練點數面板（壓縮版：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-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;
}

/* RP 訓練結果頁：6 屬性條一次顯示、間距要更緊 */
.mt-rp-train-result .mt-claim-result-card {
  max-width: 440px;
}
.mt-rp-train-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0 14px;
}
.mt-rp-train-result .mt-claim-result-bar-row {
  margin-bottom: 0;
  padding: 5px 9px;
}
.mt-rp-train-result .mt-claim-result-bar-row .mt-claim-result-bar-label {
  font-size: 12px;
}
.mt-rp-train-result .mt-claim-result-bar {
  height: 11px;
}
.mt-rp-train-result .mt-claim-result-val {
  font-size: 11px;
}
.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); }
}

.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: 12px;
}

.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-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-player-name {
  font-size: 10px; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 4px rgba(0,0,0,0.7);
  margin-top: 1px; white-space: nowrap;
}
.mt-pitch-player-stat {
  font-size: 9px; opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95);
}

/* 板凳 strip */
.mt-bench-section { margin-top: 10px; }
.mt-bench-title { font-size: 12px; font-weight: 800; color: #f0c040; margin-bottom: 4px; }
.mt-bench-strip {
  display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px;
}
.mt-bench-player {
  background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: 4px;
  flex-shrink: 0; width: 68px; text-align: center;
  cursor: pointer; position: relative; color: #fff;
}
.mt-bench-player.rarity-SSR { border-color: #f0c040; }
.mt-bench-player.rarity-SR  { border-color: #9b87f5; }
.mt-bench-player img {
  width: 48px; height: 60px; image-rendering: pixelated;
  margin-bottom: 2px;
}
.mt-bench-rarity {
  position: absolute; top: 2px; right: 2px;
  background: rgba(0,0,0,0.5); font-size: 9px; padding: 1px 4px; border-radius: 3px;
}
/* 板凳球員受傷標示 — 紅底全寬橫條（蓋在 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-name { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-bench-pos { font-size: 9px; opacity: 0.7; }

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

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

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

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

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

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

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

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