/* myplayer.css — MyPlayer v2 Design System */
/* Dark mode · KL Gold/Neon palette · Premium career simulator */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Unbounded:wght@500;700;800&display=swap');

/* ── Tokens ─────────────────────────────────────────────────────────────────── */
:root {
  --bg:          #0a0a0f;
  --bg-card:     #13131a;
  --bg-card2:    #1a1a24;
  --border:      #2a2a38;
  --accent:      #f0b429;
  --accent2:     #39e08a;
  --neon:        #7c3aed;
  --red:         #e53935;
  --text:        #f5f5f8;
  --text-muted:  #8888aa;
  --radius:      12px;
  --radius-sm:   7px;
  --shadow:      0 4px 24px rgba(0,0,0,.55);
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden { display: none !important; }

html, body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Root container ─────────────────────────────────────────────────────────── */
#mp-root {
  min-height: 100vh;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.mp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.mp-header-brand { font-family: 'Unbounded', sans-serif; font-size: 1.1rem; color: var(--accent); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; }
.mp-header-brand:hover { text-decoration: none; opacity: 0.9; }
.mp-header-brand small { color: var(--text-muted); font-size: 0.75rem; margin-left: 6px; }
.mp-header-controls { display: flex; align-items: center; gap: 10px; }

/* ── Live Online Players Counter Badge ─────────────────────────────────────── */
.mp-online-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(46, 204, 113, 0.1);
  border: 1px solid rgba(46, 204, 113, 0.35);
  padding: 4px 9px;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2ecc71;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.mp-pulsing-dot {
  width: 7px;
  height: 7px;
  background-color: #2ecc71;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px #2ecc71;
  animation: pulse-green 2s infinite;
}

.mp-lang-select {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s, background-color 0.2s;
}
.mp-lang-select:hover, .mp-lang-select:focus {
  border-color: var(--accent);
}
.mp-header-back { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.mp-header-back:hover { color: var(--text); }

/* ── Persistent Fixed Career HUD ────────────────────────────────────────────── */
.mp-hud-bar {
  background: linear-gradient(135deg, rgba(18, 18, 28, 0.95), rgba(12, 12, 20, 0.95));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  position: sticky; top: 52px; z-index: 99;
  padding: 8px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.mp-hud-inner {
  max-width: 1100px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.mp-hud-player { display: flex; align-items: center; gap: 10px; }
.mp-hud-ovr {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1rem;
  color: #0a0a0f; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.mp-hud-player-meta { display: flex; flex-direction: column; gap: 1px; }
.mp-hud-name { font-size: 0.88rem; color: var(--text); }
.mp-hud-name strong { color: var(--text); }
.mp-hud-name small { color: var(--text-muted); font-size: 0.72rem; }
.mp-hud-team-wrap { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; }
.mp-hud-team-logo { width: 16px; height: 16px; object-fit: contain; }
.mp-hud-team-name { font-weight: 700; color: var(--accent); }
.mp-hud-free-agent { color: var(--text-muted); font-style: italic; }

.mp-hud-divider {
  width: 1px; height: 26px; background: rgba(255,255,255,0.12);
}

.mp-hud-career-info { display: flex; align-items: center; gap: 14px; }
.mp-hud-stat { display: flex; flex-direction: column; text-align: center; }
.mp-hud-stat-lbl { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mp-hud-stat-val { font-family: 'Unbounded', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--text); }
.mp-hud-stat-val small { font-size: 0.68rem; color: var(--text-muted); font-weight: 400; }

.mp-hud-stats-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mp-hud-pill {
  background: var(--bg-card2); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 16px; font-size: 0.75rem;
  display: flex; align-items: center; gap: 5px;
}
.mp-hud-pill-lbl { color: var(--text-muted); font-size: 0.72rem; }
.mp-hud-pill-val { font-weight: 700; color: var(--text); }
.mp-hud-pill--value { border-color: rgba(240, 180, 41, 0.3); background: rgba(240, 180, 41, 0.08); }
.mp-hud-pill--value .mp-hud-pill-val { color: var(--accent); }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  border: none; border-radius: var(--radius-sm); cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 700;
  transition: all .15s ease;
  text-decoration: none;
}
.mp-btn-primary { background: var(--accent); color: #0a0a0f; }
.mp-btn-primary:hover { background: #ffc846; transform: translateY(-1px); }
.mp-btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--border);
}
.mp-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.mp-btn-full { width: 100%; margin-top: 16px; }
.mp-btn-big { padding: 16px 24px; font-size: 1.05rem; letter-spacing: .02em; }

.mp-btn-sign {
  padding: 8px 18px; border-radius: 6px; font-size: 0.85rem;
  color: #000; font-weight: 800; border: none; cursor: pointer;
  transition: all .12s; min-width: 80px;
}
.mp-btn-sign:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* ── Link back ───────────────────────────────────────────────────────────────── */
.mp-link-back {
  display: block; text-align: center; margin-top: 16px;
  color: var(--text-muted); text-decoration: none; font-size: 0.85rem;
}
.mp-link-back:hover { color: var(--text); }

/* ── Screen titles ───────────────────────────────────────────────────────────── */
.mp-screen-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.4rem; letter-spacing: .06em;
  color: var(--text); margin-bottom: 4px;
}
.mp-screen-sub { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px; }

/* ── HOME SCREEN ─────────────────────────────────────────────────────────────── */
.mp-home {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 70vh; gap: 20px; text-align: center;
}
.mp-home-logo {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mp-logo-kd {
  font-family: 'Unbounded', sans-serif; font-size: 2.2rem; font-weight: 800;
  color: var(--text);
}
.mp-logo-kd span { color: var(--accent); }
.mp-logo-mode {
  font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem;
  letter-spacing: .15em; color: var(--accent);
  text-shadow: 0 0 30px rgba(240,180,41,.4);
}
.mp-home-sub { color: var(--text-muted); font-size: 1rem; max-width: 340px; }

.mp-save-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--bg-card2); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 14px 20px;
  width: 100%; max-width: 440px;
}
.mp-save-title { font-weight: 700; font-size: 0.95rem; }
.mp-save-sub { color: var(--text-muted); font-size: 0.8rem; }

/* ── IDENTITY SCREEN ─────────────────────────────────────────────────────────── */
.mp-identity { max-width: 640px; margin: 0 auto; }
.mp-form { display: flex; flex-direction: column; gap: 20px; }
.mp-form-row { display: flex; gap: 12px; }
.mp-form-group { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mp-form-group--small { flex: 0 0 90px; }
label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

.mp-input {
  background: var(--bg-card2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 14px; border-radius: var(--radius-sm); font-family: inherit; font-size: 1rem;
  transition: border-color .15s;
  text-transform: uppercase; font-weight: 700;
}
.mp-input::placeholder { color: var(--text-muted); font-weight: 400; text-transform: none; }
.mp-input:focus { outline: none; border-color: var(--accent); }

.mp-field-error { font-size: 0.78rem; color: var(--red); min-height: 18px; }

/* Chip grids */
.mp-chip-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.mp-chip {
  padding: 6px 12px; border-radius: 20px;
  background: var(--bg-card2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.82rem; cursor: pointer;
  transition: all .12s;
}
.mp-chip:hover { border-color: var(--accent); color: var(--text); }
.mp-chip--selected { background: var(--accent); border-color: var(--accent); color: #0a0a0f; font-weight: 700; }

.mp-chip-grid--pos .mp-chip { min-width: 70px; }
.mp-chip-grid--nat .mp-chip { font-size: 0.78rem; }
.mp-chip-grid--region .mp-chip { font-size: 0.85rem; }

/* ── PLAYER CARD ─────────────────────────────────────────────────────────────── */
.mp-player-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  margin-bottom: 16px;
}
.mp-card--compact { padding: 10px 14px; margin-bottom: 12px; }

.mp-card-ovr {
  min-width: 52px; height: 52px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem;
  color: #0a0a0f; font-weight: 900; flex-shrink: 0;
}
.mp-card-ovr--xl { min-width: 72px; height: 72px; font-size: 2.5rem; border-radius: 14px; }

.mp-card-info { flex: 1; min-width: 0; }
.mp-card-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: .05em; }
.mp-card-name--lg { font-size: 1.8rem; }
.mp-card-meta { display: flex; align-items: center; gap: 6px; margin: 2px 0 6px; flex-wrap: wrap; }
.mp-pos-badge {
  background: var(--neon); color: #fff;
  font-size: 0.7rem; font-weight: 800; padding: 2px 7px; border-radius: 4px;
  letter-spacing: .04em;
}
.mp-num-badge {
  background: var(--bg-card); color: var(--text-muted);
  font-size: 0.75rem; font-weight: 700; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border);
}
.mp-team-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mp-card-team { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mp-card-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.mp-card-stats span { font-size: 0.78rem; color: var(--text-muted); }
.mp-card-stats strong { color: var(--text); font-weight: 700; }

/* ── DRAFT / TRANSFER ────────────────────────────────────────────────────────── */
.mp-draft { max-width: 640px; margin: 0 auto; }
.mp-offers-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.mp-offer-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
  transition: border-color .15s;
}
.mp-offer-card:hover { border-color: var(--accent); }

.mp-offer-logo {
  width: 52px; height: 52px; border-radius: 10px; border: 2px solid;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.mp-offer-logo img { width: 100%; height: 100%; object-fit: contain; }
.mp-offer-info { flex: 1; min-width: 0; }
.mp-offer-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-offer-region { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.mp-offer-renew-badge {
  display: inline-block; margin-top: 4px;
  background: var(--accent2); color: #000;
  font-size: 0.7rem; font-weight: 800; padding: 1px 7px; border-radius: 4px;
}

/* ── EVENT SCREEN ────────────────────────────────────────────────────────────── */
.mp-event { max-width: 580px; margin: 0 auto; }
.mp-event-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px 22px; text-align: center;
}
.mp-event-icon { font-size: 3rem; margin-bottom: 8px; }
.mp-event-title { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; letter-spacing: .06em; margin-bottom: 8px; }
.mp-event-desc { color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; font-size: 0.9rem; }
.mp-event-options { display: flex; flex-direction: column; gap: 12px; }

/* Option boxes with probabilities */
.mp-event-option-box {
  background: var(--bg-card2); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 16px; text-align: left;
  cursor: pointer; transition: all .2s ease; position: relative; overflow: hidden;
}
.mp-event-option-box:hover {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 230, 118, 0.15);
}
.mp-event-option-box--secondary:hover {
  border-color: var(--text-muted);
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.08);
}
.mp-event-option-head { margin-bottom: 8px; }
.mp-event-option-title { font-weight: 700; font-size: 0.95rem; color: var(--text); }
.mp-event-prob-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-prob-badge {
  font-size: 0.72rem; font-weight: 700; padding: 3px 8px; border-radius: 4px;
}
.mp-prob-badge--success { background: rgba(0, 230, 118, 0.15); color: var(--accent2); border: 1px solid rgba(0, 230, 118, 0.3); }
.mp-prob-badge--risk { background: rgba(255, 61, 0, 0.15); color: var(--red); border: 1px solid rgba(255, 61, 0, 0.3); }
.mp-prob-badge--safe { background: rgba(100, 181, 246, 0.15); color: #64b5f6; border: 1px solid rgba(100, 181, 246, 0.3); }

/* Roulette Animation Zone */
.mp-event-anim-zone { margin-top: 10px; }
.mp-roulette-card {
  background: var(--bg-card2); border: 2px dashed var(--accent);
  border-radius: var(--radius-sm); padding: 24px; text-align: center;
  animation: roulettePulse .2s infinite alternate;
}
.mp-roulette-card--success { border-color: var(--accent2); color: var(--accent2); }
.mp-roulette-card--risk { border-color: var(--red); color: var(--red); }
.mp-roulette-spinner { font-size: 2.5rem; animation: spin 0.4s linear infinite; margin-bottom: 8px; }
.mp-roulette-status { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 0.08em; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes roulettePulse { 0% { scale: 0.98; } 100% { scale: 1.02; } }

.mp-roulette-result {
  background: var(--bg-card2); border: 2px solid; border-radius: var(--radius-sm);
  padding: 20px; text-align: center; animation: fadeSlideIn .3s ease both;
}
.mp-roulette-result--success { border-color: var(--accent2); }
.mp-roulette-result--risk { border-color: var(--red); }
.mp-roulette-badge { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: 0.05em; margin-bottom: 6px; }
.mp-roulette-result--success .mp-roulette-badge { color: var(--accent2); }
.mp-roulette-result--risk .mp-roulette-badge { color: var(--red); }
.mp-roulette-effect-name { font-weight: 700; font-size: 1rem; color: var(--text); }

/* ── SEASON READY SCREEN ─────────────────────────────────────────────────────── */
.mp-season-ready { max-width: 580px; margin: 0 auto; }
.mp-season-info {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 24px;
}
.mp-season-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 2rem;
  letter-spacing: .05em; margin-bottom: 4px; text-align: center;
}
.mp-season-info-sub { color: var(--text-muted); margin-bottom: 12px; text-align: center; font-size: 0.85rem; }

/* Fixtures preview */
.mp-fixtures-preview {
  margin: 14px 0;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.mp-fixtures-label {
  font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 8px;
}
.mp-fixture-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: 0.83rem; animation: fadeSlideIn .3s ease both;
}
.mp-fixture-row:last-child { border-bottom: none; }
.mp-fixture-icon { font-size: 0.75rem; width: 20px; text-align: center; }
.mp-fixture-name { flex: 1; }
.mp-fixture-more { color: var(--text-muted); font-size: 0.75rem; padding-top: 6px; text-align: center; }

/* Stat zero placeholder */
.mp-stat-zero { color: var(--border); font-size: 0.75rem; }


/* ── SEASON RESULTS ──────────────────────────────────────────────────────────── */
.mp-season-results { max-width: 700px; margin: 0 auto; }

.mp-season-summary-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.mp-summary-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px; text-align: center;
}
.mp-summary-card--ovr { border-color: var(--accent); }
.mp-summary-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.mp-summary-value { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: .04em; }

.mp-ovr-delta { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 700; }
.mp-ovr-delta--positive { color: var(--accent2); }
.mp-ovr-delta--negative { color: var(--red); }
.mp-ovr-delta--neutral  { color: var(--text-muted); }

/* Trophies row */
.mp-trophies-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.mp-trophy {
  background: linear-gradient(135deg, #f0b429, #ff8c00);
  color: #0a0a0f; font-size: 0.78rem; font-weight: 800;
  padding: 4px 12px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 6px;
}
.mp-trophy--img {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: var(--text); border: 1px solid #f0b42966;
  padding: 6px 14px;
}
.mp-trophy--img img {
  width: 28px; height: 28px; object-fit: contain; flex-shrink: 0;
}

/* Match table */
.mp-match-table-wrap { overflow-x: auto; margin-bottom: 4px; }
.mp-match-table {
  width: 100%; border-collapse: collapse; font-size: 0.83rem;
}
.mp-match-table th {
  background: var(--bg-card2); color: var(--text-muted);
  text-align: left; padding: 8px 10px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.mp-match-table td { padding: 8px 10px; border-bottom: 1px solid #1e1e2a; vertical-align: middle; }
.mp-match-row:hover td { background: rgba(255,255,255,.025); }
.mp-match-row.mp-match-result-W td:first-child { border-left: 3px solid var(--accent2); }
.mp-match-row.mp-match-result-D td:first-child { border-left: 3px solid var(--text-muted); }
.mp-match-row.mp-match-result-L td:first-child { border-left: 3px solid var(--red); }
.mp-match-absent td { opacity: .5; }

.mp-match-num { color: var(--text-muted); font-size: 0.72rem; width: 24px; }
.mp-match-opponent { display: flex; align-items: center; gap: 6px; }
.mp-opp-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mp-score { font-size: 0.75rem; color: var(--text-muted); margin-left: 4px; }
.mp-absent-label { color: var(--text-muted); font-size: 0.78rem; }

/* Result badge */
.mp-result {
  display: inline-block; padding: 2px 7px;
  border-radius: 4px; font-size: 0.7rem; font-weight: 800;
}
.mp-result-W { background: #1a3a26; color: var(--accent2); }
.mp-result-D { background: #2a2a2a; color: #aaa; }
.mp-result-L { background: #3a1a1a; color: var(--red); }
.mp-result-absent { background: #222; color: #555; }

/* Rating badge */
.mp-rating {
  display: inline-block; padding: 3px 8px;
  border-radius: 5px; font-weight: 800; font-size: 0.88rem;
}
.mp-rating-gold   { background: rgba(240,180,41,.18); color: #f0b429; }
.mp-rating-green  { background: rgba(57,224,138,.14); color: var(--accent2); }
.mp-rating-white  { background: rgba(255,255,255,.07); color: #ccc; }
.mp-rating-orange { background: rgba(255,120,0,.14); color: #ff8c42; }
.mp-rating-red    { background: rgba(229,57,53,.14); color: var(--red); }
.mp-rating-absent { color: var(--text-muted); }

/* Goal / assist highlight */
.mp-stat-highlight { color: var(--accent); font-weight: 700; font-size: 0.82rem; }
.mp-stat-gls, .mp-stat-ast { text-align: center; }

/* ── SUMMARY ─────────────────────────────────────────────────────────────────── */
.mp-summary { max-width: 720px; margin: 0 auto; }
.mp-summary-header { text-align: center; margin-bottom: 24px; }
.mp-summary-player-card {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--bg-card2); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 20px; margin-bottom: 20px;
}
.mp-summary-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; letter-spacing: .08em; margin-bottom: 4px; }
.mp-summary-sub { color: var(--text-muted); }
.mp-summary-table-wrap { margin: 20px 0; overflow-x: auto; }
.mp-summary-table-wrap h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; letter-spacing: .05em; margin-bottom: 10px; color: var(--text-muted); }

.mp-summary-table-wrap table td small { font-size: 0.75rem; }
.mp-summary-table-wrap .pos { color: var(--accent2); }
.mp-summary-table-wrap .neg { color: var(--red); }

/* ── SIMULATE OVERLAY ────────────────────────────────────────────────────────── */
.mp-sim-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(10,10,15,.88); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.mp-sim-content { text-align: center; }
.mp-sim-spinner {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.mp-sim-text { font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; letter-spacing: .1em; color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Simulate progress bar */
.mp-sim-progress-wrap {
  width: 260px; height: 4px; background: var(--border);
  border-radius: 2px; margin: 16px auto 0; overflow: hidden;
}
.mp-sim-progress-bar {
  height: 100%; background: var(--accent);
  width: 0%; transition: width .2s ease;
  border-radius: 2px;
}
.mp-sim-match-name {
  margin-top: 12px; font-size: 0.85rem; color: var(--text-muted);
  min-height: 20px;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .mp-screen-title { font-size: 1.8rem; }
  .mp-logo-mode { font-size: 2.8rem; }
  .mp-player-card { flex-wrap: wrap; }
  .mp-form-row { flex-direction: column; }
  .mp-form-group--small { flex: 1; }
  .mp-match-table th:nth-child(5),
  .mp-match-table td:nth-child(5) { display: none; }
  .mp-summary-player-card { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════
   INTERACTIVE ENHANCEMENTS v2
   ════════════════════════════════════════════════════════════════════ */

/* ── Animated background particles on Home ───────────────────────────────────── */
.mp-home {
  position: relative;
  overflow: hidden;
}
.mp-home::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(240,180,41,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 80% 70%, rgba(124,58,237,.08) 0%, transparent 60%);
  animation: bgPulse 6s ease-in-out infinite alternate;
  pointer-events: none;
}
.mp-home > * { position: relative; z-index: 1; }
@keyframes bgPulse {
  from { opacity: .6; transform: scale(1); }
  to   { opacity: 1;  transform: scale(1.04); }
}

/* ── Logo glow effect ────────────────────────────────────────────────────────── */
.mp-logo-mode {
  animation: logoGlow 3s ease-in-out infinite alternate;
}
@keyframes logoGlow {
  from { text-shadow: 0 0 20px rgba(240,180,41,.35); }
  to   { text-shadow: 0 0 50px rgba(240,180,41,.7), 0 0 100px rgba(240,180,41,.3); }
}

/* ── Offer cards: 3D tilt + glow border on hover ─────────────────────────────── */
.mp-offer-card {
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
  cursor: default;
  perspective: 600px;
}
.mp-offer-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.mp-offer-card::after {
  content: '';
  position: absolute; inset: 0; border-radius: var(--radius);
  opacity: 0; transition: opacity .2s;
  pointer-events: none;
}
.mp-offer-card { position: relative; }
.mp-offer-card:hover::after { opacity: 1; }

/* Offer card slide-in stagger */
.mp-offer-card {
  animation: slideUp .35s ease both;
}
.mp-offer-card:nth-child(1) { animation-delay: .05s; }
.mp-offer-card:nth-child(2) { animation-delay: .12s; }
.mp-offer-card:nth-child(3) { animation-delay: .20s; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Season Ready screen: animated pitch graphic ─────────────────────────────── */
.mp-season-pitch {
  width: 100%; height: 120px;
  background: linear-gradient(180deg, #0d2b0d 0%, #164a16 50%, #0d2b0d 100%);
  border-radius: var(--radius); overflow: hidden; position: relative;
  margin-bottom: 16px; border: 1px solid #1e3a1e;
}
.mp-season-pitch::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 60px),
    radial-gradient(circle 40px at 50% 50%, rgba(255,255,255,.06) 0%, transparent 70%);
}
.mp-pitch-center-line {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: rgba(255,255,255,.12);
}
.mp-pitch-center-circle {
  position: absolute; top: 50%; left: 50%;
  width: 60px; height: 60px; margin: -30px 0 0 -30px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
}
.mp-pitch-player {
  position: absolute; width: 26px; height: 26px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 14px; animation: playerFloat 2s ease-in-out infinite;
  border: 2px solid rgba(255,255,255,.3);
  top: 50%; transform: translateY(-50%);
}
.mp-pitch-player--you {
  left: 30%; background: var(--accent); color: #000;
  animation: playerFloat 2s ease-in-out infinite, playerPulse 1.5s ease-in-out infinite;
}
.mp-pitch-player--a { left: 55%; background: #2a2a3a; animation-delay: .3s; }
.mp-pitch-player--b { left: 65%; background: #2a2a3a; animation-delay: .6s; }
.mp-pitch-player--c { left: 72%; background: #2a2a3a; animation-delay: .9s; }

@keyframes playerFloat {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%       { transform: translateY(calc(-50% - 4px)) translateX(2px); }
}
@keyframes playerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,180,41,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(240,180,41,.0); }
}

/* ── Match table: staggered row reveal ───────────────────────────────────────── */
.mp-match-row {
  animation: rowReveal .3s ease both;
  opacity: 0;
}
@keyframes rowReveal {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Delays injected via JS inline style, but CSS fallback */
.mp-match-row:nth-child(1)  { animation-delay: .05s; }
.mp-match-row:nth-child(2)  { animation-delay: .10s; }
.mp-match-row:nth-child(3)  { animation-delay: .15s; }
.mp-match-row:nth-child(4)  { animation-delay: .20s; }
.mp-match-row:nth-child(5)  { animation-delay: .25s; }
.mp-match-row:nth-child(6)  { animation-delay: .30s; }
.mp-match-row:nth-child(7)  { animation-delay: .35s; }
.mp-match-row:nth-child(8)  { animation-delay: .40s; }
.mp-match-row:nth-child(9)  { animation-delay: .45s; }
.mp-match-row:nth-child(10) { animation-delay: .50s; }

/* Goal/assist highlight flash */
.mp-stat-highlight {
  animation: statFlash .6s ease 0.5s both;
}
@keyframes statFlash {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); color: #fff; }
  100% { transform: scale(1); }
}

/* ── OVR badge: pulse on change ──────────────────────────────────────────────── */
.mp-card-ovr {
  transition: background .4s ease, transform .2s;
}
.mp-card-ovr--pulse {
  animation: ovrPulse .6s ease;
}
@keyframes ovrPulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3); box-shadow: 0 0 20px rgba(240,180,41,.6); }
  100% { transform: scale(1); }
}

/* ── Summary OVR counter animation ──────────────────────────────────────────── */
.mp-summary-value--counting {
  color: var(--accent);
}

/* ── Season summary cards: slide-in ─────────────────────────────────────────── */
.mp-summary-card {
  animation: cardPop .4s ease both;
}
.mp-summary-card:nth-child(1) { animation-delay: .05s; }
.mp-summary-card:nth-child(2) { animation-delay: .10s; }
.mp-summary-card:nth-child(3) { animation-delay: .15s; }
.mp-summary-card:nth-child(4) { animation-delay: .20s; }
.mp-summary-card:nth-child(5) { animation-delay: .25s; }
@keyframes cardPop {
  from { opacity: 0; transform: translateY(16px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Trophy burst ────────────────────────────────────────────────────────────── */
.mp-trophy {
  animation: trophyBounce .5s cubic-bezier(.36,.07,.19,.97) both;
}
.mp-trophy:nth-child(1) { animation-delay: .3s; }
.mp-trophy:nth-child(2) { animation-delay: .5s; }
@keyframes trophyBounce {
  0%   { opacity: 0; transform: scale(0) rotate(-10deg); }
  60%  { transform: scale(1.2) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ── Confetti canvas (JS-driven) ─────────────────────────────────────────────── */
#mp-confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 1000;
}

/* ── Season scoreboard header ────────────────────────────────────────────────── */
.mp-season-scoreboard {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 14px;
  margin-bottom: 12px;
}
.mp-scoreboard-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 10px; border-right: 1px solid var(--border);
}
.mp-scoreboard-stat:last-child { border-right: none; }
.mp-scoreboard-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.mp-scoreboard-value { font-family: 'Bebas Neue', sans-serif; font-size: 1.3rem; color: var(--text); }
.mp-scoreboard-value.green  { color: var(--accent2); }
.mp-scoreboard-value.gold   { color: var(--accent); }

/* Progress bar inside season screen */
.mp-season-progress-wrap {
  height: 4px; background: var(--border); border-radius: 2px; margin-bottom: 10px; overflow: hidden;
}
.mp-season-progress-bar {
  height: 100%; background: linear-gradient(90deg, var(--neon), var(--accent));
  border-radius: 2px; transition: width .4s ease;
}

/* ── Chip: selection ripple ──────────────────────────────────────────────────── */
.mp-chip--selected {
  animation: chipSelect .25s ease;
}
@keyframes chipSelect {
  0%   { transform: scale(.95); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ── Event card entrance ─────────────────────────────────────────────────────── */
.mp-event-card {
  animation: eventDrop .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes eventDrop {
  from { opacity: 0; transform: translateY(-20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mp-event-icon {
  animation: iconBounce .5s cubic-bezier(.36,.07,.19,.97) .2s both;
}
@keyframes iconBounce {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ── Identity form fade-in sections ──────────────────────────────────────────── */
.mp-form-group {
  animation: fadeSlideIn .3s ease both;
}
.mp-form-group:nth-child(1) { animation-delay: .05s; }
.mp-form-group:nth-child(2) { animation-delay: .12s; }
.mp-form-group:nth-child(3) { animation-delay: .20s; }
.mp-form-group:nth-child(4) { animation-delay: .28s; }
.mp-form-group:nth-child(5) { animation-delay: .36s; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Match highlight: best/worst match ───────────────────────────────────────── */
.mp-match-row--best { background: rgba(57,224,138,.04); }
.mp-match-row--worst { background: rgba(229,57,53,.04); }

/* Man of the match badge */
.mp-motm-badge {
  display: inline-block; background: var(--accent); color: #000;
  font-size: 0.6rem; font-weight: 900; padding: 1px 5px; border-radius: 3px;
  margin-left: 6px; vertical-align: middle; text-transform: uppercase;
  letter-spacing: .03em;
}

/* ── Career page: animated timeline ──────────────────────────────────────────── */
.mp-career-timeline {
  position: relative; padding-left: 20px;
}
.mp-career-timeline::before {
  content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--accent), var(--neon), transparent);
}

/* ── Floating stats on match rows ────────────────────────────────────────────── */
.mp-goal-float {
  position: fixed; pointer-events: none; z-index: 500;
  font-size: 1.5rem; font-weight: 900; color: var(--accent);
  animation: goalFloat 1s ease-out forwards;
}
@keyframes goalFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(.7); }
}

/* ── Home buttons: glow hover ────────────────────────────────────────────────── */
.mp-btn-primary:hover {
  box-shadow: 0 4px 20px rgba(240,180,41,.4);
}
.mp-btn-primary:active {
  transform: translateY(0) scale(.98);
}

/* ── Season ready: versus display ────────────────────────────────────────────── */
.mp-vs-display {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  margin: 20px 0; padding: 20px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.mp-vs-team {
  display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1;
}
.mp-vs-team-logo {
  width: 64px; height: 64px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; border: 2px solid rgba(255,255,255,.1);
}
.mp-vs-team-name { font-size: 0.85rem; font-weight: 700; text-align: center; }
.mp-vs-separator {
  font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: var(--text-muted);
  animation: vsPulse 2s ease-in-out infinite;
}
@keyframes vsPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* Season stats bar above table */
.mp-live-stats-bar {
  display: flex; gap: 20px; justify-content: center;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 8px;
  flex-wrap: wrap;
}
.mp-live-stat { text-align: center; }
.mp-live-stat-val { font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; }
.mp-live-stat-lbl { font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; }

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── MICRO LOGO STYLES ───────────────────────────────────────────────────────── */
.mp-card-team-logo {
  width: 18px; height: 18px; object-fit: contain;
  vertical-align: middle; flex-shrink: 0; display: inline-block;
  margin-right: 4px;
}
.mp-fixture-logo {
  width: 20px; height: 20px; object-fit: contain;
  vertical-align: middle; flex-shrink: 0; display: inline-block;
}
.mp-match-opp-logo {
  width: 22px; height: 22px; object-fit: contain;
  vertical-align: middle; flex-shrink: 0; display: inline-block;
  margin-right: 4px;
}
.mp-table-team-logo {
  width: 20px; height: 20px; object-fit: contain;
  vertical-align: middle; flex-shrink: 0; display: inline-block;
  margin-right: 4px;
}
.mp-summary-trophy-img {
  width: 22px; height: 22px; object-fit: contain;
  vertical-align: middle; display: inline-block;
  margin: 0 2px;
}

/* Tournament Badge Styles */
.mp-tourney-badge {
  display: inline-block; margin-left: 6px;
  background: linear-gradient(135deg, #f0b429, #ff8c00); color: #0a0a0f;
  font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 4px;
  letter-spacing: 0.04em; vertical-align: middle;
}
.mp-match-row--tourney {
  background: rgba(240, 180, 41, 0.08) !important;
  border-left: 3px solid var(--accent);
}

/* ── CUSTOM IN-APP MODAL STYLES ──────────────────────────────────────────────── */
.mp-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: mpModalFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.mp-modal-overlay.mp-modal-closing {
  animation: mpModalFadeOut 0.2s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes mpModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mpModalFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.mp-modal-card {
  background: linear-gradient(145deg, #181824, #12121a);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 440px; width: 100%;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(240, 180, 41, 0.15);
  animation: mpModalPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes mpModalPop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.mp-modal-icon {
  font-size: 2.8rem; margin-bottom: 12px;
}
.mp-modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 8px;
}
.mp-modal-message {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 24px;
}
.mp-modal-actions {
  display: flex; gap: 12px; justify-content: center;
}
.mp-modal-actions .mp-btn {
  flex: 1; min-height: 44px;
}
.mp-btn-danger {
  background: linear-gradient(135deg, #e53935, #c62828);
  color: #fff; border: none; font-weight: 700;
}
.mp-btn-danger:hover {
  background: linear-gradient(135deg, #ff4d4d, #d32f2f);
  box-shadow: 0 4px 16px rgba(229, 57, 53, 0.4);
}

/* ── Identity Wizard ────────────────────────────────────────────────────────── */
.mp-wizard-progress {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 20px; justify-content: center;
}
.mp-wizard-progress-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700;
  background: var(--bg-card2); border: 2px solid var(--border); color: var(--text-muted);
  transition: all 0.3s;
}
.mp-wizard-progress-dot--active {
  border-color: var(--accent); color: var(--accent); background: rgba(240,180,41,.12);
}
.mp-wizard-progress-dot--done {
  border-color: var(--accent2); color: var(--accent2); background: rgba(57,224,138,.12);
}
.mp-wizard-progress-line {
  flex: 1; height: 2px; background: var(--border); max-width: 60px;
  transition: background 0.3s;
}
.mp-wizard-progress-line--done { background: var(--accent2); }

.mp-league-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin-top: 8px;
}
.mp-league-card {
  background: var(--bg-card); border: 2px solid var(--border);
  border-radius: var(--radius); padding: 18px 14px 14px;
  cursor: pointer; transition: all 0.22s;
  display: flex; flex-direction: column; gap: 6px;
  position: relative; overflow: hidden;
}
.mp-league-card:hover {
  border-color: var(--accent); transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(240,180,41,.22);
}
.mp-league-card:hover .mp-league-select-indicator { opacity: 1; }
.mp-league-flag { font-size: 2.2rem; }
.mp-league-name { font-family: 'Unbounded', sans-serif; font-size: 0.78rem; font-weight: 700; }
.mp-league-team-count { font-size: 0.72rem; color: var(--text-muted); }
.mp-league-logos { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; min-height: 28px; }
.mp-league-mini-logo { width: 26px; height: 26px; object-fit: contain; border-radius: 4px; }
.mp-league-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mp-league-select-indicator {
  position: absolute; bottom: 8px; right: 10px;
  font-size: 0.72rem; color: var(--accent); opacity: 0;
  transition: opacity 0.2s; font-weight: 700;
}

.mp-wizard-region-badge {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 14px;
  margin-bottom: 16px; font-size: 0.9rem;
}
.mp-wizard-change-league {
  margin-left: auto; background: none; border: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.78rem; padding: 3px 10px;
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s;
}
.mp-wizard-change-league:hover { border-color: var(--accent); color: var(--accent); }

/* Wizard transition animations */
.mp-wizard-exit { animation: wizardExit 0.25s forwards; }
.mp-wizard-enter { animation: wizardEnter 0.35s forwards; }
@keyframes wizardExit {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-30px); }
}
@keyframes wizardEnter {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Offer Flavor Badge ──────────────────────────────────────────────────────── */
.mp-offer-flavor-badge {
  margin-top: 6px; padding: 6px 10px;
  border: 1px solid; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04);
  font-size: 0.73rem; line-height: 1.4; color: var(--text-muted);
}
.mp-offer-flavor-badge strong { color: var(--text); display: block; margin-bottom: 2px; }

/* ── Agent Divider ──────────────────────────────────────────────────────────── */
.mp-agent-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 10px;
}
.mp-agent-divider::before, .mp-agent-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.mp-agent-divider span { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.mp-btn-ghost {
  background: transparent; border: 1.5px solid var(--border);
  color: var(--text-muted); font-size: 0.9rem;
}
.mp-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── Agent Drawer ────────────────────────────────────────────────────────────── */
.mp-agent-drawer {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: flex-end;
  pointer-events: none;
}
.mp-agent-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.65); opacity: 0; transition: opacity 0.35s;
  pointer-events: none;
}
.mp-agent-panel {
  position: relative; width: 100%; max-width: 760px; margin: 0 auto;
  background: var(--bg-card); border-top: 2px solid var(--border);
  border-radius: 20px 20px 0 0; padding: 20px 20px 32px;
  transform: translateY(100%); transition: transform 0.35s cubic-bezier(.25,.87,.38,.98);
  pointer-events: auto; max-height: 80vh; overflow-y: auto;
}
.mp-agent-drawer--open .mp-agent-backdrop { opacity: 1; pointer-events: auto; }
.mp-agent-drawer--open .mp-agent-panel   { transform: translateY(0); }

.mp-agent-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mp-agent-title { font-family: 'Unbounded', sans-serif; font-size: 1rem; color: var(--accent); }
.mp-agent-close {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.mp-agent-close:hover { border-color: var(--red); color: var(--red); }
.mp-agent-sub { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 14px; }

.mp-agent-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.mp-agent-tab {
  background: var(--bg-card2); border: 1.5px solid var(--border);
  color: var(--text-muted); font-size: 0.78rem; padding: 5px 12px;
  border-radius: 20px; cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.mp-agent-tab:hover, .mp-agent-tab--active {
  border-color: var(--accent); color: var(--accent);
  background: rgba(240,180,41,.1);
}

.mp-agent-offers { display: flex; flex-direction: column; gap: 10px; }
.mp-agent-placeholder { color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 20px 0; }
.mp-agent-offer-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  transition: border-color 0.2s;
}
.mp-agent-offer-card:hover { border-color: var(--accent); }
.mp-agent-offer-logo {
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1.5px solid; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); overflow: hidden;
}
.mp-agent-offer-logo img { width: 100%; height: 100%; object-fit: contain; }
.mp-agent-offer-info { flex: 1; min-width: 0; }
.mp-agent-offer-name { font-weight: 700; font-size: 0.88rem; }
.mp-agent-offer-flavor { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.mp-agent-flavor-icon { font-size: 1rem; }
.mp-agent-flavor-name { font-size: 0.72rem; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mp-agent-offer-desc { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.mp-btn-agent-sign { flex-shrink: 0; font-size: 0.82rem; padding: 8px 16px; }

/* ── Missions Panel ──────────────────────────────────────────────────────────── */
.mp-missions-panel {
  background: var(--bg-card2); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin: 14px 0;
}
.mp-missions-title {
  font-family: 'Unbounded', sans-serif; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 10px;
}
.mp-mission-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: 0.83rem;
}
.mp-mission-row:last-child { border-bottom: none; }
.mp-mission-row--done { opacity: 0.8; }
.mp-mission-row--failed { opacity: 0.5; }
.mp-mission-icon { font-size: 1.1rem; flex-shrink: 0; width: 24px; text-align: center; }
.mp-mission-label { flex: 1; color: var(--text); }
.mp-mission-reward { font-size: 0.75rem; color: var(--accent2); font-weight: 700; white-space: nowrap; }
.mp-mission-status { font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.mp-mission-done   { color: var(--accent2); }
.mp-mission-failed { color: var(--red); }

/* ── Global Weekly Missions ──────────────────────────────────────────────────── */
.mp-weekly-missions-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 20px 0;
  width: 100%;
}
.mp-weekly-missions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.mp-weekly-missions-header h3 {
  font-size: 0.9rem;
  color: var(--accent);
  margin: 0;
}
.mp-weekly-missions-timer {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-card2);
  padding: 4px 8px;
  border-radius: 4px;
}
.mp-weekly-mission {
  background: var(--bg-card2);
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 10px;
  border-left: 4px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mp-weekly-mission:last-child { margin-bottom: 0; }
.mp-weekly-mission--common { border-left-color: #888; }
.mp-weekly-mission--epic { border-left-color: #9d4edd; }
.mp-weekly-mission--legendary { border-left-color: var(--accent); }

.mp-weekly-mission-desc {
  font-size: 0.85rem;
  font-weight: 500;
}
.mp-weekly-mission-progress {
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  overflow: hidden;
}
.mp-weekly-mission-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.mp-weekly-mission--epic .mp-weekly-mission-bar { background: #9d4edd; }
.mp-weekly-mission--common .mp-weekly-mission-bar { background: #ccc; }
.mp-weekly-mission-status {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: right;
  font-weight: 700;
}

/* ── Leaderboard Drawers ─────────────────────────────────────────────────────── */
.mp-home-profile-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: center;
}
.mp-drawer-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
  z-index: 1000;
}
.mp-drawer {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--accent);
  border-radius: 20px 20px 0 0;
  height: 75vh;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.1, 1, 0.2, 1);
  z-index: 1001;
  display: flex; flex-direction: column;
}
.mp-drawer--open { transform: translateY(0); }
.mp-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.mp-drawer-header h2 { font-size: 1.1rem; color: var(--accent); margin: 0; }
.mp-drawer-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.2rem; cursor: pointer; padding: 4px;
}
.mp-drawer-content {
  flex: 1; overflow-y: auto; padding: 20px;
}
.mp-drawer-loading {
  text-align: center; padding: 40px; color: var(--text-muted);
}
.mp-empty-state {
  text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 0.9rem;
}
.mp-leaderboard-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  background: var(--bg-card2); padding: 12px 16px;
  border-radius: var(--radius); margin-bottom: 8px;
  border: 1px solid var(--border);
  transition: transform 0.2s, box-shadow 0.2s;
}

/* ── Top 3 Glorious Podium Styles ─────────────────────────────────────────── */
.mp-lb-top-1 {
  background: linear-gradient(135deg, rgba(240, 180, 41, 0.24) 0%, #161a23 50%, rgba(240, 180, 41, 0.14) 100%) !important;
  border: 1.5px solid #f0b429 !important;
  box-shadow: 0 0 25px rgba(240, 180, 41, 0.45), inset 0 0 15px rgba(240, 180, 41, 0.15) !important;
  position: relative;
  overflow: hidden;
  animation: goldAuraPulse 3s infinite alternate ease-in-out;
}
.mp-lb-top-1::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(240, 180, 41, 0.15) 0%, transparent 60%);
  pointer-events: none;
}
.mp-lb-top-1 .mp-lb-rank {
  color: #ffd700 !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
  width: 55px !important;
}
.mp-lb-top-1 .mp-lb-name {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.3px;
}
.mp-lb-top-1 .mp-lb-score {
  color: #ffd700 !important;
  font-size: 1.18rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
}

.mp-lb-top-2 {
  background: linear-gradient(135deg, rgba(226, 232, 240, 0.16) 0%, #161a23 50%, rgba(148, 163, 184, 0.1) 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 0 18px rgba(203, 213, 225, 0.3), inset 0 0 10px rgba(203, 213, 225, 0.08) !important;
}
.mp-lb-top-2 .mp-lb-rank {
  color: #f1f5f9 !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px rgba(241, 245, 249, 0.7);
  width: 55px !important;
}
.mp-lb-top-2 .mp-lb-name {
  color: #ffffff !important;
  font-weight: 800 !important;
}
.mp-lb-top-2 .mp-lb-score {
  color: #e2e8f0 !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px rgba(226, 232, 240, 0.5);
}

.mp-lb-top-3 {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.18) 0%, #161a23 50%, rgba(180, 83, 9, 0.1) 100%) !important;
  border: 1.5px solid #d97706 !important;
  box-shadow: 0 0 18px rgba(217, 119, 6, 0.3), inset 0 0 10px rgba(217, 119, 6, 0.08) !important;
}
.mp-lb-top-3 .mp-lb-rank {
  color: #fbbf24 !important;
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
  width: 55px !important;
}
.mp-lb-top-3 .mp-lb-name {
  color: #ffffff !important;
  font-weight: 800 !important;
}
.mp-lb-top-3 .mp-lb-score {
  color: #f59e0b !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

@keyframes goldAuraPulse {
  0% { box-shadow: 0 0 18px rgba(240, 180, 41, 0.3), inset 0 0 10px rgba(240, 180, 41, 0.1); }
  100% { box-shadow: 0 0 32px rgba(240, 180, 41, 0.6), inset 0 0 20px rgba(240, 180, 41, 0.2); }
}

.mp-lb-rank { font-weight: 800; color: var(--accent); width: 35px; }
.mp-lb-name { font-weight: 700; flex: 1; min-width: 120px; }
.mp-lb-region { color: var(--text-muted); font-weight: 400; font-size: 0.8rem; }
.mp-lb-score { font-weight: 700; color: var(--accent2); }
.mp-lb-details { width: 100%; font-size: 0.75rem; color: var(--text-muted); padding-top: 4px; border-top: 1px solid var(--border); margin-top: 4px; }
.mp-career-final-score {
  text-align: center;
  background: rgba(240,180,41,0.1);
  border: 1px solid var(--accent);
  padding: 15px;
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.mp-career-final-score h3 { margin: 0; font-size: 0.85rem; color: var(--accent); }
.mp-score-value { font-size: 2rem; font-weight: 800; margin: 5px 0; }
.mp-score-status { font-size: 0.75rem; color: var(--text-muted); }

/* ── Audio Toggle Header ────────────────────────────────────────────────────── */
.mp-audio-toggle {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1rem;
  transition: transform 0.2s, border-color 0.2s;
}
.mp-audio-toggle:hover {
  border-color: var(--accent);
  transform: scale(1.1);
}

/* ── Country Cards Grid (Nationality Selector) ─────────────────────────────── */
.mp-country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px 2px;
}
.mp-country-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  position: relative;
}
.mp-country-card:hover {
  border-color: var(--accent);
  background: rgba(240, 180, 41, 0.08);
  transform: translateY(-2px);
}
.mp-country-card.mp-chip--selected {
  border-color: var(--accent);
  background: rgba(240, 180, 41, 0.15);
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.3);
}
.mp-country-flag {
  font-size: 1.4rem;
  line-height: 1;
}
.mp-country-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.mp-country-code {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255,255,255,0.06);
  padding: 2px 4px;
  border-radius: 3px;
}

/* ── Kings FUT Collectible Player Card ─────────────────────────────────────── */
.mp-fut-card {
  width: 220px;
  background: linear-gradient(135deg, #1f2430 0%, #0d1117 100%);
  border: 2px solid #b8860b;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 0 15px rgba(240, 180, 41, 0.15);
  position: relative;
  overflow: hidden;
  font-family: 'Unbounded', sans-serif;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mp-fut-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 30px rgba(240, 180, 41, 0.3);
}
.mp-fut-card--gold { border-color: #ffd700; background: linear-gradient(135deg, #3a2e05 0%, #171202 100%); }
.mp-fut-card--legend { border-color: #e0aaff; background: linear-gradient(135deg, #3c096c 0%, #10002b 100%); box-shadow: 0 0 20px rgba(157, 78, 221, 0.4); }
.mp-fut-card--silver { border-color: #c0c0c0; background: linear-gradient(135deg, #2b2d42 0%, #11121a 100%); }
.mp-fut-card--bronze { border-color: #cd7f32; background: linear-gradient(135deg, #2c1a0e 0%, #0f0804 100%); }

.mp-fut-card-inner { display: flex; flex-direction: column; gap: 8px; }
.mp-fut-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.mp-fut-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mp-fut-ovr { font-size: 1.6rem; font-weight: 900; color: var(--accent); line-height: 1; }
.mp-fut-pos { font-size: 0.75rem; font-weight: 800; color: #fff; text-transform: uppercase; }
.mp-fut-flag { font-size: 1.1rem; margin-top: 2px; }
.mp-fut-team-logo { width: 22px; height: 22px; object-fit: contain; margin-top: 2px; }

.mp-fut-avatar {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 90px; height: 90px; background: rgba(255,255,255,0.05); border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.2);
}
.mp-fut-silhouette { font-size: 2.2rem; opacity: 0.8; }
.mp-fut-number { font-size: 0.75rem; font-weight: 800; color: var(--accent); }

.mp-fut-card-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 8px; }
.mp-fut-name { font-size: 0.95rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.mp-fut-team-name { font-size: 0.65rem; color: var(--text-muted); margin-bottom: 6px; }
.mp-fut-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 8px;
  font-size: 0.68rem; color: var(--text-muted); background: rgba(0,0,0,0.3);
  padding: 6px; border-radius: 6px;
}
.mp-fut-stats span strong { color: #fff; }

/* ── Weekly Missions Drawer Enhancements ───────────────────────────────────── */
.mp-weekly-missions-info {
  display: flex; justify-content: space-between;
  font-size: 0.75rem; color: var(--text-muted);
  background: var(--bg-card2); padding: 8px 12px;
  border-radius: var(--radius); margin-bottom: 14px;
}
.mp-weekly-mission-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mp-weekly-rarity { font-size: 0.7rem; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.mp-weekly-rarity--common { background: rgba(255,255,255,0.1); color: #ccc; }
.mp-weekly-rarity--epic { background: rgba(157, 78, 221, 0.2); color: #e0aaff; }
.mp-weekly-rarity--legendary { background: rgba(240, 180, 41, 0.2); color: var(--accent); }
.mp-weekly-mission-footer { display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; margin-top: 4px; }
.mp-weekly-mission-reward { color: var(--accent2); }

/* ── Full-Width Page Container ──────────────────────────────────────────────── */
#mp-root {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

/* ── Mentalità Selection Grid (Matching Attachment 1) ────────────────────────── */
.mp-mentality-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0;
  width: 100%;
  box-sizing: border-box;
}
.mp-mentality-header {
  font-family: 'Unbounded', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mp-mentality-header-bar {
  color: var(--accent);
  font-weight: 900;
}
.mp-mentality-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .mp-mentality-grid {
    grid-template-columns: 1fr;
  }
}
.mp-mentality-card {
  background: #11141a;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mp-mentality-card:hover {
  border-color: rgba(240, 180, 41, 0.5);
  background: #161b24;
}
.mp-mentality-card--selected {
  border-color: var(--accent) !important;
  background: rgba(240, 180, 41, 0.08) !important;
  box-shadow: inset 0 0 10px rgba(240, 180, 41, 0.15), 0 0 12px rgba(240, 180, 41, 0.2);
}
.mp-mentality-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}
.mp-mentality-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* ── Press News Card (Matching Attachment 2 Tuttosport / Kings Gazette Style) ── */
.mp-news-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
}
.mp-news-card {
  background: #0d0f12;
  border: 1px solid #242933;
  border-radius: 14px;
  padding: 24px;
  max-width: 820px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.8);
  box-sizing: border-box;
}
.mp-news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #e63946;
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.mp-news-outlet {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.06em;
}
.mp-news-date {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.mp-news-subhead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.mp-news-team-logo {
  width: 24px; height: 24px;
  object-fit: contain;
}
.mp-news-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
}
.mp-news-headline {
  font-family: 'Unbounded', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}
.mp-news-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 18px;
}
.mp-news-body-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 700px) {
  .mp-news-body-grid {
    grid-template-columns: 1fr;
  }
}
.mp-news-text {
  font-size: 0.88rem;
  color: #d1d5db;
  line-height: 1.5;
}
.mp-news-quotes-box {
  background: #14171f;
  border-left: 3px solid #e63946;
  padding: 12px 14px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-news-quote {
  font-size: 0.78rem;
  color: #9ca3af;
  font-style: italic;
}
.mp-news-btn {
  background: #ffffff !important;
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
}
.mp-news-btn:hover {
  background: #e5e7eb !important;
}

/* ── Alex Hunter Staff Dialogue Screen ──────────────────────────────────────── */
.mp-dialogue-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
}
.mp-dialogue-card {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 16px;
  padding: 24px;
  max-width: 700px;
  width: 100%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  box-sizing: border-box;
}
.mp-dialogue-speaker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.mp-dialogue-avatar {
  font-size: 2.2rem;
  background: var(--bg-card2);
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--accent);
}
.mp-dialogue-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}
.mp-dialogue-role {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 600;
}
.mp-dialogue-message {
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #e5e7eb;
  margin-bottom: 20px;
}
.mp-dialogue-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mp-dialogue-opt {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.88rem;
  border-color: var(--border);
  transition: all 0.2s ease;
}
.mp-dialogue-opt:hover {
  border-color: var(--accent);
  background: rgba(240, 180, 41, 0.1);
}

/* ── OFFICIAL KINGS LEAGUE STANDINGS TABLE (Attachment 3) ────────────────────── */
.mp-standings-box {
  background: #0d0f12;
  border: 1px solid #1f242d;
  border-radius: 12px;
  padding: 16px;
  margin-top: 20px;
  font-family: 'Unbounded', sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mp-standings-header {
  font-size: 0.85rem;
  font-weight: 800;
  color: #6b7280;
  letter-spacing: 1px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.mp-standings-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: 0.82rem;
}
.mp-standings-table th {
  text-align: left;
  color: #9ca3af;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 6px 8px;
  border-bottom: 1px solid #1f242d;
}
.mp-standings-table th:nth-child(3),
.mp-standings-table th:nth-child(4),
.mp-standings-table th:nth-child(5),
.mp-standings-table th:nth-child(6) {
  text-align: center;
}
.mp-standings-row {
  background: #141821;
  transition: background 0.2s;
}
.mp-standings-row:hover {
  background: #1c2230;
}
.mp-standings-row--you {
  background: rgba(240, 180, 41, 0.15) !important;
  box-shadow: inset 0 0 10px rgba(240, 180, 41, 0.2);
}
.mp-standings-row td {
  padding: 8px;
  color: #e5e7eb;
}
.mp-st-pos {
  font-weight: 800;
  width: 30px;
  text-align: center;
}
.mp-st-team {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-st-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.mp-st-name {
  font-weight: 700;
}
.mp-st-you-tag {
  background: var(--accent);
  color: #000;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
}
.mp-st-record, .mp-st-stat, .mp-st-dr {
  text-align: center;
}
.mp-st-dr.pos { color: #10b981; font-weight: 700; }
.mp-st-dr.neg { color: #ef4444; font-weight: 700; }

.mp-standings-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #1f242d;
  font-size: 0.72rem;
  font-weight: 700;
  color: #9ca3af;
}
.mp-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mp-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ── METICULOUS CAREER STATS & TIMELINE (Attachment 1 & Attachment 2) ──────── */
.mp-career-stats-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 10px 0;
}
.mp-stats-top-banner {
  background: #11141a;
  border: 1px solid #262b36;
  border-radius: 12px;
  padding: 16px;
}
.mp-stats-nat-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #d1d5db;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.mp-stats-headline-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.mp-stats-hl-item {
  background: #181d26;
  border-radius: 8px;
  padding: 10px;
}
.mp-stats-hl-label {
  font-size: 0.65rem;
  color: #9ca3af;
  font-weight: 700;
}
.mp-stats-hl-val {
  font-size: 1.5rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  margin-top: 4px;
}
.mp-stats-toggle-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.mp-stats-toggle-btn:hover {
  color: #ffffff;
}

/* Expandable Detailed Stats Panel (Attachment 2) */
.mp-stats-details-panel {
  background: #11141a;
  border: 1px solid #262b36;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.3s ease;
}
.mp-stats-details-collapsed {
  display: none !important;
}
.mp-stats-best-season {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid #262b36;
}
.mp-stats-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
}
.mp-stats-metric-card {
  background: #181d26;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mp-sm-label {
  font-size: 0.6rem;
  color: #9ca3af;
  font-weight: 700;
}
.mp-sm-val {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
}

.mp-stats-comp-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: #9ca3af;
  letter-spacing: 0.5px;
  margin-top: 6px;
}
.mp-stats-comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.mp-stats-comp-table th {
  text-align: left;
  color: #6b7280;
  padding: 6px 0;
  border-bottom: 1px solid #262b36;
}
.mp-stats-comp-table td {
  padding: 8px 0;
  border-bottom: 1px solid #1a1e27;
  color: #e5e7eb;
}

/* Timeline Table (Attachment 1 & 2) */
.mp-timeline-box {
  background: #11141a;
  border: 1px solid #262b36;
  border-radius: 12px;
  overflow: hidden;
}
.mp-timeline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.mp-timeline-table th {
  text-align: left;
  color: #6b7280;
  padding: 8px 10px;
  font-size: 0.68rem;
  border-bottom: 1px solid #262b36;
}
.mp-timeline-row td {
  padding: 10px;
  color: #e5e7eb;
  border-top: 1px solid #1f242d;
}
.mp-tl-age {
  font-weight: 800;
  color: #9ca3af;
}
.mp-tl-club {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mp-tl-bar {
  width: 3px; height: 16px; border-radius: 2px;
}
.mp-tl-logo {
  width: 18px; height: 18px; object-fit: contain;
}
.mp-tl-name {
  font-weight: 700;
}
.mp-tl-trophy { font-size: 0.9rem; }
.mp-tl-plus { color: #10b981; font-weight: 900; }

.mp-ovr-pill {
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 800;
}

.mp-timeline-subrow td {
  padding: 2px 10px 8px 10px;
  border-top: none;
}
.mp-tl-subcell {
  display: flex;
  gap: 12px;
  font-size: 0.7rem;
  color: #9ca3af;
}

/* ── KINGS LEAGUE PRO MATCHDAY CENTER & PERFORMANCE WIDGET ────────────── */
.mp-matchday-hub-card {
  background: #11141b;
  border: 1px solid #1f242d;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.mp-mhub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid #1f242d;
}

.mp-mhub-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.mp-live-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.8; }
}

.mp-mhub-venue {
  font-size: 0.7rem;
  color: #9ca3af;
  font-weight: 700;
}

.mp-mhub-vs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: radial-gradient(circle at center, rgba(240, 180, 41, 0.06) 0%, rgba(17, 20, 27, 0.95) 100%);
  border-bottom: 1px solid #1f242d;
}

.mp-mhub-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.mp-mhub-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6));
}

.mp-mhub-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  text-align: center;
}

.mp-mhub-badge {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  background: #1f242d;
  color: #9ca3af;
  text-transform: uppercase;
}

.mp-mhub-team--home .mp-mhub-badge {
  background: rgba(240, 180, 41, 0.15);
  color: var(--accent);
  border: 1px solid rgba(240, 180, 41, 0.3);
}

.mp-mhub-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
}

.mp-mhub-vs {
  font-size: 1.3rem;
  font-weight: 900;
  color: #f59e0b;
  letter-spacing: 1px;
}

.mp-mhub-streak {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mp-streak-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 900;
  color: #000;
}
.mp-streak-w { background: #10b981; }
.mp-streak-d { background: #f0b429; }
.mp-streak-l { background: #ef4444; color: #fff; }

/* Live Stats Dashboard Bar */
.mp-tactical-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px 14px;
  background: #11141b;
}
.mp-ts-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mp-ts-label {
  font-size: 0.6rem;
  font-weight: 800;
  color: #9ca3af;
  letter-spacing: 0.5px;
}
.mp-ts-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ffffff;
}
.mp-ts-val small {
  font-size: 0.65rem;
  font-weight: 700;
  color: #9ca3af;
}

/* ── FAST INTERACTIVE LIVE KNOCKOUT MATCH MODAL (Matching Screenshot) ───────── */
.mp-live-overlay {
  z-index: 99999;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
}
.mp-live-match-card {
  background: #11141b;
  border: 1px solid #232a38;
  border-radius: 20px;
  width: 100%;
  max-width: 780px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  font-family: 'Unbounded', sans-serif;
  color: #ffffff;
  box-sizing: border-box;
}
.mp-live-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.mp-live-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: #f59e0b;
  letter-spacing: 0.8px;
}
.mp-live-speed-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #9ca3af;
}
.mp-speed-chip {
  background: #1c222e;
  border: 1px solid #2c3547;
  color: #d1d5db;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.mp-speed-chip:hover, .mp-speed-chip--active {
  background: #f59e0b;
  color: #000000;
  border-color: #f59e0b;
}

.mp-live-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0b0d12;
  border: 1px solid #1f242d;
  border-radius: 14px;
  padding: 16px 20px;
}
.mp-live-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 180px;
  text-align: center;
}
.mp-live-logo {
  width: 44px; height: 44px;
  object-fit: contain;
}
.mp-live-team-name {
  font-size: 0.95rem;
  font-weight: 800;
}
.mp-live-ovr-tag {
  font-size: 0.65rem;
  color: #9ca3af;
  background: #181d26;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}
.mp-live-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mp-live-min {
  font-size: 1.1rem;
  font-weight: 800;
  color: #9ca3af;
}
.mp-live-score {
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
}

.mp-live-progress-bar-wrap {
  background: #1c222e;
  height: 4px;
  border-radius: 2px;
  margin: 12px 0 16px 0;
  overflow: hidden;
}
.mp-live-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b);
  transition: width 0.3s ease;
}

.mp-live-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}
.mp-live-box {
  background: #0b0d12;
  border: 1px solid #1f242d;
  border-radius: 12px;
  padding: 14px;
}
.mp-live-box-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 800;
  color: #6b7280;
  margin-bottom: 12px;
  border-bottom: 1px solid #1f242d;
  padding-bottom: 6px;
}
.mp-live-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.mp-stat-bar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.mp-stat-bar-title {
  font-size: 0.62rem;
  color: #9ca3af;
  font-weight: 700;
}
.mp-stat-bar-dual {
  width: 100%;
  height: 5px;
  background: #1c222e;
  border-radius: 3px;
  display: flex;
  overflow: hidden;
}
.mp-bar-home { background: #10b981; transition: width 0.3s; }
.mp-bar-away { background: #ef4444; transition: width 0.3s; }

.mp-live-feed-box {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-live-feed-item {
  font-size: 0.78rem;
  color: #d1d5db;
  padding: 4px 6px;
  border-radius: 4px;
}
.mp-live-feed-item--goal {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  font-weight: 800;
}
.mp-live-feed-min {
  font-weight: 800;
  color: #f59e0b;
  margin-right: 6px;
}

.mp-live-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #1f242d;
}
.mp-live-footer-sub {
  font-size: 0.72rem;
  color: #6b7280;
  font-weight: 600;
}

/* ── MATCH BOX SCORE & HISTORY MODAL ("trascorso delle partite") ─────────────── */
.mp-boxscore-card {
  max-width: 620px;
  background: #11141b;
  border: 1px solid #262c3a;
  padding: 20px;
}
.mp-boxscore-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.mp-boxscore-sub {
  font-size: 0.75rem;
  font-weight: 800;
  color: #f59e0b;
  letter-spacing: 0.5px;
}
.mp-boxscore-close {
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 1.2rem;
  cursor: pointer;
}
.mp-boxscore-teams {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #0b0d12;
  border: 1px solid #1f242d;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.mp-boxscore-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mp-boxscore-team-name {
  font-size: 0.9rem;
  font-weight: 800;
}
.mp-boxscore-score {
  font-size: 2.2rem;
  font-weight: 900;
  color: #ffffff;
}
.mp-boxscore-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.mp-boxscore-stat {
  background: #0b0d12;
  border: 1px solid #1f242d;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.mp-bs-label {
  font-size: 0.62rem;
  color: #9ca3af;
  font-weight: 700;
}
.mp-bs-val {
  font-size: 1.2rem;
  font-weight: 900;
  color: #ffffff;
}
.mp-boxscore-timeline-title {
  font-size: 0.7rem;
  font-weight: 800;
  color: #9ca3af;
  margin-bottom: 8px;
}
.mp-boxscore-timeline {
  background: #0b0d12;
  border: 1px solid #1f242d;
  border-radius: 10px;
  padding: 12px;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mp-boxscore-event {
  font-size: 0.78rem;
  color: #d1d5db;
}
.mp-boxscore-min {
  font-weight: 800;
  color: #f59e0b;
  margin-right: 6px;
}

/* ── KINGS LEAGUE LIVE MATCH MODAL ───────────────────────────────────────────── */
.mp-live-overlay {
  background: rgba(4, 6, 10, 0.95);
  backdrop-filter: blur(8px);
}
.mp-live-match-card {
  width: 90%;
  max-width: 800px;
  background: #0b0d12;
  border: 1px solid #1f242d;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mp-live-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #1f242d;
  padding-bottom: 12px;
}
.mp-live-title {
  font-size: 1.1rem;
  font-weight: 900;
  color: #f0b429;
}
.mp-live-speed-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: #9ca3af;
  font-weight: 800;
}
.mp-speed-chip {
  background: #11141b;
  border: 1px solid #1f242d;
  color: #d1d5db;
  padding: 4px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  transition: all 0.2s;
}
.mp-speed-chip:hover {
  background: #1f242d;
}
.mp-speed-chip--active {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}
.mp-live-score-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.mp-live-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.mp-live-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.mp-opp-dot {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: block;
}
.mp-live-team-name {
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
}
.mp-live-ovr-tag {
  background: #1f242d;
  color: #9ca3af;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}
.mp-live-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.mp-live-min {
  font-size: 1rem;
  font-weight: 900;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
}
.mp-live-score {
  font-size: 3.5rem;
  font-weight: 900;
  line-height: 1;
}
.mp-live-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: #1f242d;
  border-radius: 4px;
  overflow: hidden;
}
.mp-live-progress-bar {
  height: 100%;
  background: #f0b429;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.mp-live-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mp-live-box {
  background: #11141b;
  border: 1px solid #1f242d;
  border-radius: 12px;
  padding: 16px;
  min-height: 250px;
}
.mp-live-stats-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mp-live-box-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  color: #9ca3af;
  font-weight: 800;
  margin-bottom: 4px;
}
.mp-live-stat-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mp-live-stat-row > span {
  font-size: 0.85rem;
  font-weight: 800;
  width: 30px;
  text-align: center;
}
.mp-stat-bar-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mp-stat-bar-title {
  text-align: center;
  font-size: 0.65rem;
  color: #9ca3af;
  font-weight: 800;
}
.mp-stat-bar-dual {
  display: flex;
  width: 100%;
  height: 6px;
  background: #1f242d;
  border-radius: 4px;
  overflow: hidden;
}
.mp-bar-home {
  background: #f0b429;
  height: 100%;
  transition: width 0.3s ease;
}
.mp-bar-away {
  background: #3b82f6;
  height: 100%;
  transition: width 0.3s ease;
}
.mp-live-feed-box {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mp-live-feed-item {
  font-size: 0.8rem;
  color: #d1d5db;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid #1f242d;
}
.mp-live-feed-min {
  font-weight: 900;
  color: #10b981;
  min-width: 25px;
}
.mp-live-feed-item--goal {
  color: #f0b429;
  font-weight: 800;
}
.mp-live-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #1f242d;
  padding-top: 16px;
}
.mp-live-footer-sub {
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 800;
}

/* ── Hub Tabs & AAA Modules ────────────────────────────────────────────────── */
.mp-hub-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.mp-hub-tabs .mp-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 0.85rem;
}
.mp-hub-tabs .mp-btn.active {
  background: rgba(240, 180, 41, 0.15);
  color: var(--accent);
  border-color: var(--accent);
}
.mp-tab-content { display: none; }
.mp-tab-content.active { display: block; animation: mp-fade-in 0.3s ease; }

.mp-social-feed {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-card); padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--border);
}
.mp-social-post {
  padding: 12px;
  background: var(--bg-card2);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--neon);
}
.mp-social-author { font-size: 0.85rem; color: var(--text); margin-bottom: 4px; }
.mp-social-author small { color: var(--text-muted); font-weight: normal; }
.mp-social-text { font-size: 0.95rem; line-height: 1.4; color: #ddd; }

.mp-skill-tree {
  background: var(--bg-card); padding: 16px; border-radius: var(--radius);
  border: 1px solid var(--border);
}
.mp-perks-list {
  display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
}
.mp-perk-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px; border-radius: var(--radius-sm); background: var(--bg-card2);
  border: 1px solid var(--border); transition: border-color 0.2s;
}
.mp-perk-item.owned { border-color: var(--accent); background: rgba(240, 180, 41, 0.05); }
.mp-perk-item.locked { opacity: 0.6; }
.mp-perk-info strong { display: block; font-size: 1rem; color: var(--text); }
.mp-perk-info small { color: var(--accent); font-weight: bold; }
.mp-perk-info p { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.mp-perk-owned { color: var(--accent2); font-weight: bold; font-size: 0.85rem; }
.mp-perk-locked { color: var(--red); font-size: 0.8rem; }

/* ── Unified Floating Action Hub (FAB) ────────────────────────────────────────── */
.kd-fab-hub {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.kd-fab-trigger {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(19, 19, 26, 0.94);
  border: 1.5px solid var(--accent, #f0b429);
  color: #fff;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), 0 0 15px rgba(240, 180, 41, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s, border-color 0.25s;
}

.kd-fab-trigger:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(240, 180, 41, 0.4);
  border-color: #ffd060;
}

.kd-fab-trigger:active {
  transform: scale(0.95);
}

.kd-fab-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 2px;
  animation: fabMenuSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kd-fab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  white-space: nowrap;
  font-family: inherit;
}

.kd-fab-guide {
  background: rgba(30, 58, 138, 0.92);
  border-color: #3b82f6;
  color: #fff;
}

.kd-fab-donate {
  background: rgba(49, 46, 129, 0.92);
  border-color: #818cf8;
  color: #fff;
}

.kd-fab-bug {
  background: rgba(31, 41, 55, 0.92);
  border-color: var(--accent, #f0b429);
  color: #fff;
}

.kd-fab-item:hover {
  transform: translateX(-4px) scale(1.04);
  filter: brightness(1.15);
}

.kd-fab-item:active {
  transform: scale(0.96);
}

.kd-fab-item-icon {
  font-size: 1.1rem;
}

@keyframes fabMenuSlideUp {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 600px) {
  body {
    padding-bottom: 80px;
  }

  /* Header mobile optimization */
  .mp-header {
    padding: 8px 12px;
    gap: 6px;
  }
  .mp-header-brand {
    font-size: 0.95rem;
  }
  .mp-header-brand small {
    display: none;
  }
  .mp-header-controls {
    gap: 6px;
  }
  .mp-online-counter {
    padding: 3px 6px;
    font-size: 0.72rem;
    gap: 4px;
  }
  .mp-audio-toggle {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
  }
  .mp-lang-select {
    padding: 3px 5px;
    font-size: 0.72rem;
    font-weight: 700;
  }
  .mp-header-back {
    font-size: 0.75rem;
    padding: 3px 4px;
    white-space: nowrap;
  }

  /* Nationality selector mobile */
  .mp-country-grid {
    grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
    gap: 6px;
    max-height: 200px;
  }
  .mp-country-card {
    padding: 6px 8px;
    gap: 6px;
  }
  .mp-country-flag {
    font-size: 1.15rem;
  }
  .mp-country-name {
    font-size: 0.72rem;
  }
  .mp-country-code {
    font-size: 0.6rem;
    padding: 1px 3px;
  }

  /* Position Chips */
  .mp-chips {
    gap: 6px;
  }
  .mp-pos-chip {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  /* HUD mobile */
  .mp-hud-bar {
    padding: 6px 12px;
    top: 45px;
  }
  .mp-hud-inner {
    gap: 6px;
  }

  /* FAB Floating Hub */
  .kd-fab-hub {
    bottom: 16px;
    right: 16px;
  }
  .kd-fab-trigger {
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
  }
  .kd-fab-item {
    font-size: 0.82rem;
    padding: 7px 14px;
  }
}

@media (max-width: 380px) {
  .mp-header-back {
    display: none; /* Fallback for ultra-narrow phones under 380px */
  }
}