:root {
  --bg: #06100d;
  --bg-2: #0b1f17;
  --card: rgba(255,255,255,.075);
  --card-strong: rgba(255,255,255,.12);
  --line: rgba(255,255,255,.14);
  --text: #f3fff8;
  --muted: rgba(243,255,248,.68);
  --green: #49f58e;
  --green-2: #1dbf68;
  --yellow: #f5d64a;
  --red: #ff6b6b;
  --blue: #68a8ff;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
  --radius: 24px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body {
  background:
    radial-gradient(circle at 20% 0%, rgba(73,245,142,.28), transparent 36%),
    radial-gradient(circle at 85% 15%, rgba(104,168,255,.16), transparent 30%),
    linear-gradient(180deg, #07130f 0%, #06100d 48%, #040907 100%);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(100%, 760px); min-height: 100vh; margin: 0 auto; padding: 20px 16px calc(92px + var(--safe-bottom)); position: relative; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--green); font-weight: 800; }
h1 { margin: 0; font-size: clamp(31px, 8vw, 52px); line-height: .9; letter-spacing: -.06em; }
.ball-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 28px; }
.hero { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 32px; padding: 22px; background: linear-gradient(145deg, rgba(29,191,104,.25), rgba(255,255,255,.06)), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 48px); box-shadow: var(--shadow); }
.hero::after { content: ""; position: absolute; inset: auto -20% -48% -20%; height: 145px; border: 2px solid rgba(255,255,255,.16); border-radius: 50% 50% 0 0; }
.hero h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.04em; }
.hero p { margin: 0; color: var(--muted); max-width: 48ch; }
.grid { display: grid; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cards { margin-top: 14px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); backdrop-filter: blur(18px); padding: 16px; box-shadow: 0 14px 42px rgba(0,0,0,.22); }
.card-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.card-title h3 { margin: 0; font-size: 18px; letter-spacing: -.03em; }
.card-title span { color: var(--muted); font-size: 13px; }
.stat-card { min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; }
.stat-card strong { font-size: 30px; letter-spacing: -.05em; }
.stat-card span { color: var(--muted); font-size: 13px; }
.primary-btn, .secondary-btn, .danger-btn { border: 0; border-radius: 18px; min-height: 52px; padding: 0 16px; font-weight: 900; letter-spacing: -.02em; color: #04100a; background: linear-gradient(135deg, var(--green), #b9ffd2); box-shadow: 0 16px 36px rgba(73,245,142,.22); }
.secondary-btn { color: var(--text); background: rgba(255,255,255,.1); border: 1px solid var(--line); box-shadow: none; }
.danger-btn { color: #fff; background: rgba(255,107,107,.15); border: 1px solid rgba(255,107,107,.35); box-shadow: none; }
.section { margin-top: 16px; }
.section h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.04em; }
.form-section { margin-top: 14px; }
.form-section h3 { margin: 0 0 10px; color: var(--green); font-size: 14px; text-transform: uppercase; letter-spacing: .12em; }
.field { display: grid; gap: 7px; }
.field span { color: var(--muted); font-size: 13px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.22); color: var(--text); min-height: 48px; padding: 12px 13px; outline: none; }
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: rgba(73,245,142,.7); box-shadow: 0 0 0 4px rgba(73,245,142,.12); }
.metric-list { display: grid; gap: 10px; }
.metric { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; background: rgba(0,0,0,.18); border-radius: 16px; border: 1px solid rgba(255,255,255,.08); }
.metric span { color: var(--muted); }
.metric strong { font-size: 18px; }
.match-card { display: grid; gap: 10px; }
.match-card h3 { margin: 0; font-size: 19px; }
.match-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 1px solid var(--line); background: rgba(255,255,255,.08); border-radius: 999px; padding: 7px 10px; color: var(--muted); font-size: 13px; }
.pill.good { color: #05120b; background: var(--green); border-color: transparent; font-weight: 900; }
.pill.warn { color: #160f00; background: var(--yellow); border-color: transparent; font-weight: 900; }
.pill.bad { color: #fff; background: rgba(255,107,107,.32); border-color: rgba(255,107,107,.4); font-weight: 900; }
.empty { text-align: center; color: var(--muted); padding: 38px 18px; border: 1px dashed var(--line); border-radius: var(--radius); }
.bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(12px, var(--safe-bottom)); width: min(calc(100% - 24px), 720px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 9px; background: rgba(4,9,7,.78); backdrop-filter: blur(24px); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); z-index: 10; }
.nav-btn { border: 0; border-radius: 17px; min-height: 44px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 800; }
.nav-btn.active { color: #031109; background: var(--green); }
.detail-grid { display: grid; gap: 10px; }
.progress { height: 9px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--green-2), var(--green)); border-radius: inherit; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.toast { position: fixed; left: 50%; bottom: calc(86px + var(--safe-bottom)); transform: translateX(-50%); background: #f3fff8; color: #06100d; border-radius: 999px; padding: 10px 14px; font-weight: 900; box-shadow: var(--shadow); z-index: 20; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-8px); }
@media (min-width: 660px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { padding: 14px; } }

/* Player card stile calcetto fantasy */
.home-showcase {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
  align-items: stretch;
}
.player-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 348px;
  border-radius: 34px;
  padding: 18px;
  border: 1px solid rgba(255,224,102,.52);
  background:
    radial-gradient(circle at 50% 0%, rgba(255,224,102,.42), transparent 34%),
    linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,224,102,.08) 42%, rgba(73,245,142,.12)),
    linear-gradient(180deg, rgba(31,25,8,.92), rgba(8,18,15,.96));
  box-shadow: 0 26px 70px rgba(0,0,0,.42), 0 0 38px rgba(245,214,74,.16);
}
.player-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.22);
  pointer-events: none;
  z-index: -1;
}
.player-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.18) 44%, transparent 52% 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 13px);
  opacity: .55;
  pointer-events: none;
  z-index: -1;
}
.player-card-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  right: -32px;
  top: -30px;
  border-radius: 999px;
  background: rgba(73,245,142,.30);
  filter: blur(18px);
  z-index: -1;
}
.player-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.player-top strong {
  display: block;
  font-size: 46px;
  line-height: .9;
  letter-spacing: -.07em;
}
.player-top b {
  display: block;
  font-size: 20px;
  text-align: right;
}
.player-top span {
  display: block;
  color: rgba(243,255,248,.72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.player-photo-wrap {
  width: 132px;
  height: 132px;
  margin: 14px auto 10px;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,.04)),
    linear-gradient(145deg, rgba(73,245,142,.22), rgba(104,168,255,.12));
  border: 2px solid rgba(255,255,255,.26);
  box-shadow: inset 0 0 30px rgba(255,255,255,.08), 0 18px 38px rgba(0,0,0,.28);
}
.player-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}
.player-card h3 {
  margin: 0 0 12px;
  text-align: center;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.player-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.player-stats div {
  padding: 9px 6px;
  text-align: center;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
}
.player-stats strong {
  display: block;
  font-size: 22px;
  letter-spacing: -.04em;
}
.player-stats span {
  color: rgba(243,255,248,.70);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
}
@media (max-width: 720px) {
  .home-showcase { grid-template-columns: 1fr; }
  .player-card { min-height: 328px; }
}


/* === MATCHPULSE v4: Arena premium dashboard === */
:root {
  --bg: #020807;
  --bg-2: #061512;
  --card: rgba(255,255,255,.078);
  --line: rgba(255,255,255,.16);
  --text: #f8fff9;
  --muted: rgba(248,255,249,.68);
  --green: #00f5a0;
  --green-2: #00c2ff;
  --yellow: #f8d95a;
  --gold: #ffd76a;
  --purple: #9b5cff;
  --blue: #4ab8ff;
}

html, body { background: #020807; }
body {
  background:
    linear-gradient(180deg, rgba(2,8,7,.30), rgba(2,8,7,.94) 58%, #020807 100%),
    radial-gradient(circle at 20% 0%, rgba(0,245,160,.30), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(255,215,106,.24), transparent 28%),
    url("arena-bg.png") center top / cover fixed no-repeat;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0,245,160,.08) 0 1px, transparent 1px 60px),
    linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 72px);
  mask-image: linear-gradient(to bottom, transparent, black 14%, black 68%, transparent);
}
.app-shell { width: min(100%, 900px); }
.topbar {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 46px rgba(0,0,0,.32);
}
h1 {
  background: linear-gradient(90deg, #fff, var(--green), var(--green-2));
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(0,245,160,.18);
}
.ball-mark {
  background: linear-gradient(145deg, rgba(0,245,160,.28), rgba(255,215,106,.18));
  border-color: rgba(255,255,255,.18);
}

.arena-home {
  position: relative;
  overflow: hidden;
  border-radius: 38px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.15);
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.56)),
    radial-gradient(circle at 50% 4%, rgba(255,215,106,.18), transparent 24%),
    radial-gradient(circle at 22% 30%, rgba(0,245,160,.18), transparent 25%),
    rgba(0,0,0,.20);
  box-shadow: 0 30px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.14);
}
.arena-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.12) 44%, transparent 52% 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 16px);
  pointer-events: none;
  opacity: .45;
}
.arena-overlay {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 18% 12%, rgba(0,245,160,.25), transparent 20%),
    radial-gradient(circle at 82% 12%, rgba(255,215,106,.22), transparent 22%),
    radial-gradient(circle at 50% 72%, rgba(0,194,255,.11), transparent 28%);
  filter: blur(8px);
  pointer-events: none;
}
.home-logo-card,
.home-player-stage,
.premium-kpis,
.trend-card,
.action-grid-premium { position: relative; z-index: 1; }
.home-logo-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
}
.logo-kicker {
  color: var(--green);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .20em;
}
.home-logo-card h2 {
  margin: 4px 0 3px;
  font-size: clamp(24px, 5vw, 38px);
  letter-spacing: -.06em;
}
.home-logo-card p { margin: 0; color: var(--muted); max-width: 48ch; font-size: 14px; }
.small-glow-btn {
  flex-shrink: 0;
  border: 0;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 1000;
  color: #02100a;
  background: linear-gradient(135deg, var(--green), #c7ffe0);
  box-shadow: 0 12px 26px rgba(0,245,160,.28);
}
.home-player-stage { display: grid; place-items: center; padding: 16px 0 12px; }
.home-player-stage .player-card { width: min(100%, 370px); }

.player-card {
  position: relative;
  min-height: 430px;
  padding: 22px 18px 18px;
  border-radius: 42px;
  border: 2px solid rgba(255, 224, 102, .86);
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 245, 176, .82), transparent 26%),
    radial-gradient(circle at 18% 38%, rgba(255, 224, 102, .26), transparent 34%),
    radial-gradient(circle at 85% 42%, rgba(0,245,160,.22), transparent 34%),
    linear-gradient(160deg, #422f08 0%, #967425 35%, #221606 66%, #04100c 100%);
  box-shadow: 0 32px 85px rgba(0,0,0,.58), 0 0 60px rgba(255,215,106,.22), inset 0 0 0 1px rgba(255,255,255,.22);
}
.player-card::before { border-color: rgba(255,255,255,.30); z-index: 1; }
.player-card::after { opacity: .62; z-index: 1; }
.player-card-glow { width: 210px; height: 210px; right: -75px; top: -86px; background: rgba(255, 224, 102, .48); filter: blur(26px); }
.player-top { position: relative; z-index: 2; }
.player-top strong { font-size: 62px; color: #fff4b5; text-shadow: 0 4px 0 rgba(0,0,0,.22), 0 15px 28px rgba(0,0,0,.36); }
.player-top b { display: block; padding: 8px 13px; border-radius: 999px; color: #160f03; background: linear-gradient(135deg, #fff5ba, #f8d95a); box-shadow: 0 12px 24px rgba(0,0,0,.28); }
.player-photo-wrap { position: relative; z-index: 2; width: 182px; height: 182px; margin: 4px auto 8px; overflow: hidden; border-radius: 32px; border: 3px solid rgba(255,255,255,.38); background: rgba(0,0,0,.24); box-shadow: 0 22px 48px rgba(0,0,0,.45), 0 0 0 7px rgba(255,255,255,.07); }
.player-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; transform: scale(1.02); }
.player-card h3 { position: relative; z-index: 2; margin: 9px 0 14px; color: #fff4b5; font-size: 25px; letter-spacing: .11em; text-shadow: 0 9px 18px rgba(0,0,0,.42); }
.player-stats { position: relative; z-index: 2; gap: 9px; }
.player-stats div { border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.055)); border: 1px solid rgba(255,255,255,.20); }
.player-stats strong { font-size: 26px; color: #fff; }

.premium-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.premium-kpi, .premium-panel { border: 1px solid rgba(255,255,255,.14); background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.045)); box-shadow: 0 18px 45px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter: blur(20px); }
.premium-kpi { min-height: 98px; border-radius: 24px; padding: 14px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.premium-kpi span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.premium-kpi strong { display: block; margin: 5px 0 2px; font-size: clamp(24px, 5vw, 42px); line-height: .95; letter-spacing: -.06em; }
.premium-kpi em { color: rgba(255,255,255,.72); font-size: 12px; font-style: normal; }
.trend-card { margin-top: 12px; padding: 16px; border-radius: 26px; }
.trend-list { display: grid; gap: 10px; }
.trend-row { display: grid; grid-template-columns: 95px 36px 1fr; gap: 10px; align-items: center; color: var(--muted); font-size: 13px; }
.trend-row b { color: #fff; font-size: 18px; }
.trend-row i { display: block; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--green-2)); box-shadow: 0 0 18px rgba(0,245,160,.34); }
.dark-empty { background: rgba(0,0,0,.22); }
.action-grid-premium { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.action-tile { min-height: 118px; border: 1px solid rgba(255,255,255,.14); border-radius: 28px; padding: 12px; color: #fff; background: rgba(255,255,255,.07); box-shadow: 0 20px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; transition: transform .18s ease, box-shadow .18s ease; }
.action-tile:hover { transform: translateY(-3px); box-shadow: 0 28px 55px rgba(0,0,0,.38); }
.action-tile span { font-size: 31px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
.action-tile strong { font-size: 16px; line-height: 1; }
.action-tile em { color: rgba(255,255,255,.70); font-size: 12px; font-style: normal; }
.action-tile.green { background: linear-gradient(145deg, rgba(0,245,160,.26), rgba(0,0,0,.18)); box-shadow: 0 20px 42px rgba(0,245,160,.12); }
.action-tile.purple { background: linear-gradient(145deg, rgba(155,92,255,.24), rgba(0,0,0,.18)); }
.action-tile.gold { background: linear-gradient(145deg, rgba(255,184,63,.24), rgba(0,0,0,.18)); }
.action-tile.blue { background: linear-gradient(145deg, rgba(74,184,255,.22), rgba(0,0,0,.18)); }
.compact-cards { opacity: .98; }

.bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(14px, var(--safe-bottom)); width: min(calc(100% - 24px), 760px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 10px; background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06)), rgba(2,8,7,.82); backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); border: 1px solid rgba(255,255,255,.16); border-radius: 30px; box-shadow: 0 24px 60px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.16); z-index: 10; }
.nav-btn { position: relative; overflow: hidden; border: 0; border-radius: 22px; min-height: 58px; color: var(--muted); background: rgba(255,255,255,.055); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 900; transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease; }
.nav-icon, .nav-label { position: relative; z-index: 1; }
.nav-icon { font-size: 20px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.28)); }
.nav-label { font-size: 11px; letter-spacing: -.02em; }
.nav-btn.active { color: #031109; background: linear-gradient(135deg, var(--green), #c6ffe1); box-shadow: 0 12px 30px rgba(0,245,160,.32), inset 0 1px 0 rgba(255,255,255,.45); transform: translateY(-3px); }

@media (max-width: 720px) { body { background-attachment: scroll; } .premium-kpis { grid-template-columns: 1fr 1fr; } .premium-kpi:first-child { grid-column: 1 / -1; } .action-grid-premium { grid-template-columns: repeat(2, 1fr); } .trend-row { grid-template-columns: 82px 32px 1fr; } .home-logo-card { align-items: flex-start; } .small-glow-btn { padding: 0 12px; } }
@media (max-width: 420px) { .arena-home { padding: 12px; border-radius: 30px; } .home-player-stage .player-card { width: 100%; } .player-photo-wrap { width: 162px; height: 162px; } .player-card { min-height: 410px; border-radius: 36px; } .premium-kpi strong { font-size: 30px; } }


/* === MATCHPULSE v5 TRUE PREMIUM MOCKUP === */
html, body {
  background: #010605 !important;
  min-height: 100%;
}
body {
  background:
    linear-gradient(180deg, rgba(1,6,5,.15) 0%, rgba(1,6,5,.70) 50%, #010605 100%),
    url("arena-bg.png") center top / cover fixed no-repeat !important;
  color: #f8fff9 !important;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 26%, rgba(0,245,160,.34), transparent 22%),
    radial-gradient(circle at 86% 30%, rgba(255,215,106,.28), transparent 24%),
    linear-gradient(90deg, rgba(0,245,160,.06) 0 1px, transparent 1px 58px),
    linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 70px);
  mix-blend-mode: screen;
  opacity: .75;
  z-index: -1;
}
.app-shell {
  width: min(100%, 460px) !important;
  padding: 14px 14px calc(108px + var(--safe-bottom)) !important;
}
.topbar {
  display: none !important;
}
.mp-home-screen {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 130px);
  border-radius: 34px;
  padding: 16px 14px 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(1,6,5,.18);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 34px 100px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
}
.mp-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,215,106,.18), transparent 18%),
    radial-gradient(circle at 22% 34%, rgba(0,245,160,.18), transparent 22%),
    linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.09) 43%, transparent 52% 100%);
  pointer-events: none;
  z-index: 0;
}
.mp-home-screen > *:not(.mp-bg-overlay) {
  position: relative;
  z-index: 1;
}
.mp-app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mp-menu-btn {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 15px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.mp-logo {
  font-size: 26px;
  line-height: 1;
  font-weight: 1000;
  font-style: italic;
  letter-spacing: -.08em;
  text-shadow: 0 0 24px rgba(0,245,160,.34);
}
.mp-logo span {
  color: var(--green);
}
.mp-logo small {
  color: var(--green);
  font-style: normal;
  font-size: 16px;
  margin-left: 2px;
}
.mp-profile-dot {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 0 22px rgba(0,245,160,.18);
}
.mp-profile-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
}
.mp-motto {
  position: absolute !important;
  top: 118px;
  right: 12px;
  width: 86px;
  text-align: center;
  color: rgba(255,255,255,.85);
  transform: rotate(-3deg);
  z-index: 3 !important;
}
.mp-motto span {
  display: block;
  color: #fff;
  font-size: 28px;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.25));
}
.mp-motto p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: .03em;
  font-style: italic;
  text-shadow: 0 0 12px rgba(0,0,0,.5);
}
.mp-motto b { color: var(--green); }
.mp-card-stage {
  display: grid;
  place-items: center;
  margin-top: 6px;
  margin-bottom: 14px;
  perspective: 900px;
}
.mp-card-stage .player-card,
.mp-card-stage .ultimate-card {
  width: min(100%, 344px) !important;
  min-height: 468px !important;
  padding: 22px 18px 18px !important;
  border-radius: 44px !important;
  transform: rotateX(1deg);
  border: 2px solid rgba(255,222,94,.92) !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(255,249,190,.82), transparent 25%),
    radial-gradient(circle at 80% 30%, rgba(0,245,160,.22), transparent 28%),
    radial-gradient(circle at 22% 40%, rgba(255,215,106,.30), transparent 34%),
    linear-gradient(155deg, #544008 0%, #b9902d 34%, #201405 68%, #03120d 100%) !important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.68),
    0 0 55px rgba(255,215,106,.32),
    inset 0 0 0 1px rgba(255,255,255,.24) !important;
}
.card-crown {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  color: #fff1a5;
  font-size: 20px;
  z-index: 3;
  filter: drop-shadow(0 0 10px rgba(255,215,106,.45));
}
.rating-box strong,
.player-top strong {
  font-size: 68px !important;
  line-height: .78 !important;
  color: #fff4ae !important;
}
.role-box b,
.player-top b {
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #fff2a5, #f5d64a) !important;
  color: #1b1202 !important;
}
.player-photo-wrap {
  width: 204px !important;
  height: 204px !important;
  margin: 0 auto 4px !important;
  border-radius: 34px !important;
  border: 3px solid rgba(255,255,255,.40) !important;
  box-shadow:
    0 24px 52px rgba(0,0,0,.52),
    0 0 0 7px rgba(255,255,255,.07),
    0 0 34px rgba(255,215,106,.18) !important;
}
.player-photo {
  object-fit: cover !important;
  object-position: center 8% !important;
  transform: scale(1.02) !important;
}
.card-brand {
  position: relative;
  z-index: 4;
  text-align: center;
  font-size: 10px;
  letter-spacing: .38em;
  color: rgba(255,255,255,.55);
  margin-top: -2px;
}
.player-card h3 {
  font-size: 31px !important;
  margin: 6px 0 13px !important;
  color: #fff2a5 !important;
  font-style: italic;
  letter-spacing: .03em !important;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', system-ui, sans-serif;
}
.player-stats {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 0 !important;
  border-top: 1px solid rgba(255,255,255,.18);
  padding-top: 10px;
}
.player-stats div {
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 0 !important;
  padding: 4px 2px !important;
  box-shadow: none !important;
}
.player-stats div:last-child { border-right: 0 !important; }
.player-stats strong {
  font-size: 24px !important;
  color: #fff2a5 !important;
}
.player-stats span {
  color: #f9f9f9 !important;
  font-size: 10px !important;
}
.mp-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.mp-kpi {
  min-height: 86px;
  padding: 10px 7px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 34px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.13);
  backdrop-filter: blur(20px);
}
.mp-kpi span {
  display: block;
  min-height: 28px;
  color: rgba(255,255,255,.78);
  font-size: 9px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mp-kpi strong {
  display: block;
  margin: 2px 0;
  font-size: 31px;
  line-height: .95;
  letter-spacing: -.06em;
}
.mp-kpi em {
  display: block;
  color: var(--green);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}
.mp-trend-card {
  position: relative;
  margin-top: 12px;
  min-height: 132px;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 45px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
  overflow: hidden;
}
.mp-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.mp-panel-title h3 { margin: 0; font-size: 18px; letter-spacing: .05em; text-transform: uppercase; }
.mp-panel-title button {
  border: 0;
  border-radius: 999px;
  min-height: 30px;
  padding: 0 10px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 800;
}
.mp-chart-bars {
  height: 76px;
  display: flex;
  align-items: end;
  gap: 10px;
  padding-right: 96px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mp-chart-bars i {
  position: relative;
  flex: 1;
  min-height: 14px;
  max-height: 76px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--green), rgba(0,245,160,.20));
  box-shadow: 0 0 18px rgba(0,245,160,.34);
}
.mp-chart-bars i span {
  display: none;
}
.mp-empty-trend {
  color: var(--muted);
  margin: auto 0;
}
.mp-trend-side {
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: 82px;
  text-align: left;
}
.mp-trend-side strong {
  font-size: 41px;
  line-height: .9;
  letter-spacing: -.06em;
}
.mp-trend-side span {
  margin-left: 5px;
  color: rgba(255,255,255,.72);
  font-size: 10px;
  font-weight: 1000;
}
.mp-trend-side em {
  display: block;
  color: var(--green);
  font-style: normal;
  font-weight: 1000;
  margin-top: 5px;
}
.mp-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.mp-action {
  min-height: 104px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  color: #fff;
  background: rgba(255,255,255,.07);
  box-shadow: 0 20px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.mp-action span { font-size: 32px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.34)); }
.mp-action strong { font-size: 17px; text-transform: uppercase; letter-spacing: .04em; }
.mp-action em { color: rgba(255,255,255,.72); font-style: normal; }
.mp-action.green { background: linear-gradient(145deg, rgba(0,245,160,.25), rgba(0,0,0,.18)); }
.mp-action.purple { background: linear-gradient(145deg, rgba(155,92,255,.25), rgba(0,0,0,.18)); }
.mp-action.gold { background: linear-gradient(145deg, rgba(255,184,63,.25), rgba(0,0,0,.18)); }
.mp-action.blue { background: linear-gradient(145deg, rgba(74,184,255,.22), rgba(0,0,0,.18)); }
.bottom-nav {
  width: min(calc(100% - 24px), 430px) !important;
  border-radius: 26px !important;
  border: 1px solid rgba(0,245,160,.42) !important;
  box-shadow:
    0 0 0 1px rgba(74,184,255,.18),
    0 24px 60px rgba(0,0,0,.60),
    0 0 35px rgba(0,245,160,.18) !important;
}
@media (max-width: 390px) {
  .app-shell { padding-left: 10px !important; padding-right: 10px !important; }
  .mp-card-stage .player-card { width: 100% !important; min-height: 448px !important; }
  .player-photo-wrap { width: 184px !important; height: 184px !important; }
  .mp-kpi strong { font-size: 26px; }
}
/* === Grafici andamento Stats === */

.trend-title {
  margin-bottom: 12px;
}

.trend-grid {
  grid-template-columns: 1fr;
}

.trend-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055)),
    radial-gradient(circle at top right, color-mix(in srgb, var(--trend-color) 24%, transparent), transparent 45%);
  border-color: color-mix(in srgb, var(--trend-color) 38%, rgba(255,255,255,.14));
}

.trend-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.09) 50%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 14px);
  pointer-events: none;
}

.trend-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.trend-head h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.03em;
}

.trend-head span {
  color: var(--muted);
  font-size: 13px;
}

.trend-badge {
  flex-shrink: 0;
  padding: 7px 10px;
  border-radius: 999px;
  color: #06100d;
  background: var(--trend-color);
  font-size: 12px;
  font-weight: 1000;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--trend-color) 28%, transparent);
}

.trend-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 138px;
  display: block;
  margin-top: 8px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  border: 1px solid rgba(255,255,255,.08);
}

.trend-area {
  fill: var(--trend-color);
  opacity: .15;
}

.trend-line {
  fill: none;
  stroke: var(--trend-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px var(--trend-color));
}

.trend-dot {
  fill: #fff;
  stroke: var(--trend-color);
  stroke-width: 3;
  filter: drop-shadow(0 0 8px var(--trend-color));
}

.trend-grid-line {
  stroke: rgba(255,255,255,.09);
  stroke-width: 1;
}

.trend-values {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.trend-values strong {
  color: var(--text);
}

.trend-empty p {
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

@media (min-width: 760px) {
  .trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.player-photo-wrap {
  width: 180px !important;
  height: 200px !important;
  margin: 8px auto 10px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

.player-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
  transform: scale(1) !important;
}

body {
  background:
    radial-gradient(circle at 50% -12%, rgba(255,224,102,.26), transparent 30%),
    radial-gradient(circle at 18% 16%, rgba(73,245,142,.20), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(104,168,255,.16), transparent 32%),
    linear-gradient(180deg, #020403 0%, #06100d 46%, #020403 100%) !important;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.82)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.035) 0 1px,
      transparent 1px 64px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 64px
    );
  opacity: .85;
}

body::after {
  content: "";
  position: fixed;
  left: 50%;
  bottom: -130px;
  width: 520px;
  height: 260px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
  border-radius: 50% 50% 0 0;
  border: 2px solid rgba(73,245,142,.20);
  box-shadow:
    0 0 70px rgba(73,245,142,.20),
    inset 0 0 70px rgba(73,245,142,.10);
}

.hero,
.card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.145), rgba(255,255,255,.055)) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 22px 58px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.hero {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 18%, rgba(73,245,142,.28), transparent 36%),
    radial-gradient(circle at 84% 0%, rgba(255,224,102,.20), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
}

.hero h2 {
  font-size: 34px;
  line-height: .95;
  letter-spacing: -.06em;
}

.hero p {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(243,255,248,.72);
}

/* === PREMIUM TITLE === */

h1 {
  background: linear-gradient(90deg, #fff7c2, var(--green), #68a8ff);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(73,245,142,.18);
}

.eyebrow {
  color: #fff7c2;
}

/* === MOBILE APP FEEL === */

.app-shell {
  width: min(100%, 460px) !important;
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 16px calc(96px + var(--safe-bottom));
  position: relative;
}

@media (min-width: 700px) {
  .app-shell {
    margin-top: 18px;
    margin-bottom: 18px;
    min-height: calc(100vh - 36px);
    border-radius: 36px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow:
      0 30px 90px rgba(0,0,0,.55),
      0 0 70px rgba(73,245,142,.10);
  }
}

/* =========================================================
   HOME PREMIUM REBUILD
   ========================================================= */

.premium-home {
  display: grid;
  gap: 14px;
}

/* PLAYER CARD CENTRALE */
.featured-card-wrap {
  margin-top: 4px;
}

.premium-home .player-card {
  min-height: 520px;
  padding: 18px 16px 18px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 230, 120, .72), transparent 28%),
    radial-gradient(circle at 0% 50%, rgba(73,245,142,.12), transparent 35%),
    radial-gradient(circle at 100% 40%, rgba(73,245,142,.14), transparent 35%),
    linear-gradient(160deg, #261b05 0%, #8e6d22 34%, #1d1607 68%, #07110d 100%);
  border: 2px solid rgba(255,224,102,.72);
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    0 0 45px rgba(255,224,102,.16),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.premium-home .player-top strong {
  font-size: 64px;
  color: #fff4b7;
}

.premium-home .player-top b {
  font-size: 18px;
  padding: 8px 14px;
}

.premium-home .player-photo-wrap {
  width: 200px;
  height: 230px;
  margin: 10px auto 8px;
  border-radius: 26px;
  border: 3px solid rgba(255,255,255,.36);
  box-shadow:
    0 20px 46px rgba(0,0,0,.42),
    0 0 0 6px rgba(255,255,255,.05);
}

.premium-home .player-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  transform: scale(1.02);
}

.premium-home .player-card h3 {
  font-size: 30px;
  margin: 10px 0 14px;
  color: #ffd86c;
  letter-spacing: .08em;
}

.premium-home .player-stats {
  gap: 10px;
}

.premium-home .player-stats div {
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.18);
}

.premium-home .player-stats strong {
  font-size: 26px;
}

.premium-home .player-stats span {
  color: rgba(255,255,255,.74);
  font-size: 11px;
}

/* 3 MINI BOX */
.home-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.home-mini-card {
  min-height: 110px;
  border-radius: 22px;
  padding: 14px 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-mini-card.green { box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 24px rgba(73,245,142,.10); }
.home-mini-card.yellow { box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 24px rgba(255,224,102,.10); }
.home-mini-card.blue { box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 24px rgba(104,168,255,.10); }

.mini-label {
  font-size: 10px;
  font-weight: 900;
  color: rgba(255,255,255,.72);
  letter-spacing: .08em;
}

.mini-value {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.05em;
}

.mini-sub {
  font-size: 12px;
  color: rgba(255,255,255,.72);
}

/* BOX ANDAMENTO */
.home-trend-card {
  border-radius: 24px;
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.home-trend-card.up {
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    0 0 26px rgba(73,245,142,.12);
}

.home-trend-card.down {
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    0 0 26px rgba(255,107,107,.12);
}

.home-trend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.home-trend-head h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.04em;
}

.home-trend-head span {
  color: rgba(255,255,255,.70);
  font-size: 12px;
}

.trend-side-box {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trend-side-box strong {
  font-size: 28px;
  line-height: 1;
}

.trend-side-box span {
  font-size: 11px;
  color: rgba(255,255,255,.66);
}

.trend-side-box em {
  font-style: normal;
  font-size: 18px;
  font-weight: 900;
  color: #49f58e;
}

.home-trend-card.down .trend-side-box em {
  color: #ff6b6b;
}

.home-sparkline {
  width: 100%;
  height: 120px;
  display: block;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  border: 1px solid rgba(255,255,255,.08);
}

.spark-area {
  fill: rgba(73,245,142,.14);
}

.home-trend-card.down .spark-area {
  fill: rgba(255,107,107,.14);
}

.spark-line {
  fill: none;
  stroke: #49f58e;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(73,245,142,.50));
}

.home-trend-card.down .spark-line {
  stroke: #ff6b6b;
  filter: drop-shadow(0 0 8px rgba(255,107,107,.50));
}

.spark-dot {
  fill: #fff;
  stroke: #49f58e;
  stroke-width: 3;
}

.home-trend-card.down .spark-dot {
  stroke: #ff6b6b;
}

.trend-empty-text {
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: 14px;
}

/* PULSANTI GRANDI */
.home-action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.home-action-tile {
  min-height: 116px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow:
    0 20px 44px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.12);
  padding: 14px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.home-action-tile.green { box-shadow: 0 20px 44px rgba(0,0,0,.28), 0 0 28px rgba(73,245,142,.16); }
.home-action-tile.purple { box-shadow: 0 20px 44px rgba(0,0,0,.28), 0 0 28px rgba(155,92,255,.16); }
.home-action-tile.orange { box-shadow: 0 20px 44px rgba(0,0,0,.28), 0 0 28px rgba(255,170,59,.16); }
.home-action-tile.blue { box-shadow: 0 20px 44px rgba(0,0,0,.28), 0 0 28px rgba(104,168,255,.16); }

.action-icon {
  font-size: 28px;
  line-height: 1;
}

.action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.action-text strong {
  font-size: 22px;
  line-height: 1;
}

.action-text span {
  font-size: 13px;
  color: rgba(255,255,255,.72);
}

/* MOBILE REFINEMENT */
@media (max-width: 390px) {
  .premium-home .player-card {
    min-height: 500px;
  }

  .premium-home .player-photo-wrap {
    width: 182px;
    height: 210px;
  }

  .mini-value {
    font-size: 24px;
  }

  .action-text strong {
    font-size: 20px;
  }
}

/* =========================================================
   FIX HOME: SFONDO VISIBILE + CARTA PIÙ COMPATTA
   ========================================================= */

.featured-card-wrap {
  position: relative !important;
  min-height: 620px !important;
  margin: -20px -16px 0 !important;
  padding: 82px 18px 18px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 0 0 34px 34px !important;
}

/* Sfondo dietro la carta */
.featured-card-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.82)),
    radial-gradient(circle at 18% 32%, rgba(73,245,142,.36), transparent 28%),
    radial-gradient(circle at 82% 24%, rgba(255,224,102,.28), transparent 30%),
    radial-gradient(circle at 50% 0%, rgba(104,168,255,.16), transparent 35%),
    url("arena-bg.jpg") center top / cover no-repeat,
    linear-gradient(180deg, #020403 0%, #06100d 100%);
  opacity: .98;
}

/* Effetto campo/luci */
.featured-card-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -105px;
  width: 560px;
  height: 280px;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  border-radius: 50% 50% 0 0;
  border: 2px solid rgba(73,245,142,.22);
  box-shadow:
    0 0 70px rgba(73,245,142,.18),
    inset 0 0 70px rgba(73,245,142,.08);
}

/* Carta più piccola e staccata dallo sfondo */
.featured-card-wrap .player-card {
  position: relative !important;
  z-index: 2 !important;
  width: min(100%, 340px) !important;
  min-height: 455px !important;
  padding: 16px 14px 16px !important;
  border-radius: 34px !important;
  margin: 0 auto !important;
}

/* Overall meno enorme */
.featured-card-wrap .player-top strong {
  font-size: 54px !important;
}

/* Ruolo più compatto */
.featured-card-wrap .player-top b {
  font-size: 15px !important;
  padding: 7px 12px !important;
}

/* Foto più compatta, così la carta respira */
.featured-card-wrap .player-photo-wrap {
  width: 168px !important;
  height: 190px !important;
  margin: 6px auto 8px !important;
  border-radius: 24px !important;
}

/* Regolazione foto */
.featured-card-wrap .player-photo {
  object-fit: cover !important;
  object-position: center 30%!important;
  transform: scale(1.01) !important;
}

/* Nome meno gigante */
.featured-card-wrap .player-card h3 {
  font-size: 25px !important;
  margin: 8px 0 12px !important;
}

/* Stats più compatte */
.featured-card-wrap .player-stats {
  gap: 7px !important;
}

.featured-card-wrap .player-stats div {
  padding: 8px 5px !important;
  border-radius: 14px !important;
}

.featured-card-wrap .player-stats strong {
  font-size: 22px !important;
}

.featured-card-wrap .player-stats span {
  font-size: 10px !important;
}

/* =========================================================
   LOGO HOME PREMIUM
   ========================================================= */

.home-brand {
  position: absolute;
  top: 18px;
  left: 16px;
  right: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 40px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background:
    radial-gradient(circle, rgba(255,255,255,.30), rgba(255,255,255,.06)),
    linear-gradient(135deg, rgba(73,245,142,.35), rgba(255,224,102,.18));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  font-size: 20px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-text strong {
  font-size: 25px;
  font-weight: 1000;
  letter-spacing: -.06em;
  color: #fff7c2;
  text-shadow:
    0 0 18px rgba(255,224,102,.22),
    0 8px 24px rgba(0,0,0,.36);
}

.brand-text strong span {
  color: #49f58e;
  text-shadow:
    0 0 18px rgba(73,245,142,.48),
    0 8px 24px rgba(0,0,0,.36);
}

.brand-text small {
  margin-top: 5px;
  color: rgba(243,255,248,.65);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.brand-pulse {
  flex: 1;
  height: 22px;
  min-width: 44px;
  opacity: .9;
  background:
    linear-gradient(90deg,
      transparent 0 8%,
      rgba(73,245,142,.0) 8% 15%,
      #49f58e 15% 17%,
      transparent 17% 25%,
      transparent 25% 34%,
      #49f58e 34% 36%,
      transparent 36% 44%,
      transparent 44% 52%,
      #49f58e 52% 54%,
      transparent 54% 64%,
      rgba(73,245,142,.65) 64% 100%
    );
  clip-path: polygon(
    0 52%,
    18% 52%,
    25% 20%,
    31% 78%,
    38% 44%,
    48% 44%,
    55% 12%,
    63% 82%,
    72% 52%,
    100% 52%,
    100% 62%,
    72% 62%,
    63% 92%,
    55% 22%,
    48% 54%,
    38% 54%,
    31% 88%,
    25% 30%,
    18% 62%,
    0 62%
  );
  filter: drop-shadow(0 0 8px rgba(73,245,142,.65));
}

/* =========================================================
   FUT CARD SHAPE - SAGOMA TIPO PLAYER CARD
   ========================================================= */

.featured-card-wrap .player-card {
  border-radius: 0 !important;
  clip-path: polygon(
    13% 10%,
    31% 10%,
    36% 5%,
    64% 5%,
    69% 10%,
    87% 10%,
    87% 82%,
    73% 84%,
    61% 84%,
    50% 91%,
    39% 84%,
    27% 84%,
    13% 82%
  ) !important;

  padding: 64px 34px 58px !important;
  overflow: hidden !important;
}

/* Bordo interno che segue la forma */
.featured-card-wrap .player-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 1;
  pointer-events: none;

  clip-path: polygon(
    13% 10%,
    31% 10%,
    36% 5%,
    64% 5%,
    69% 10%,
    87% 10%,
    87% 82%,
    73% 84%,
    61% 84%,
    50% 91%,
    39% 84%,
    27% 84%,
    13% 82%
  );

  border: 2px solid rgba(255,255,255,.26);
  box-shadow:
    inset 0 0 30px rgba(255,255,255,.12),
    0 0 28px rgba(255,224,102,.16);
}

/* Luce diagonale tipo carta lucida */
.featured-card-wrap .player-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      115deg,
      transparent 0 35%,
      rgba(255,255,255,.24) 44%,
      transparent 54% 100%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.055) 0 1px,
      transparent 1px 14px
    );

  opacity: .55;

  clip-path: polygon(
    13% 10%,
    31% 10%,
    36% 5%,
    64% 5%,
    69% 10%,
    87% 10%,
    87% 82%,
    73% 84%,
    61% 84%,
    50% 91%,
    39% 84%,
    27% 84%,
    13% 82%
  );
}

/* Tutti i contenuti devono stare sopra la forma */
.featured-card-wrap .player-top,
.featured-card-wrap .player-photo-wrap,
.featured-card-wrap .player-card h3,
.featured-card-wrap .player-stats {
  position: relative !important;
  z-index: 3 !important;
}


/* === CARTA LEGGERMENTE PIÙ PICCOLA === */

.featured-card-wrap .player-card {
  transform: scale(0.94) !important;
  transform-origin: center bottom !important;
}

/* =========================================================
   FINAL FIX - CARD FIFA TEMPLATE DINAMICA
   Usa una sola immagine card-template.png
   e la trasforma in bronzo / argento / oro
   ========================================================= */

.featured-card-wrap .player-card {
  position: relative !important;
  width: min(100%, 330px) !important;
  min-height: 505px !important;
  margin: 0 auto !important;
  padding: 54px 34px 48px !important;

  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  clip-path: none !important;
  overflow: visible !important;

  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    0 0 45px rgba(255,224,102,.18) !important;

  transform: scale(0.94) !important;
  transform-origin: center bottom !important;
}

/* Immagine vera della carta */
.featured-card-wrap .player-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background: url("card-template.png") center center / contain no-repeat !important;

  border: none !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
}

/* Luce lucida sopra la carta */
.featured-card-wrap .player-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 32px 22px 38px !important;
  z-index: 2 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      115deg,
      transparent 0 36%,
      rgba(255,255,255,.22) 45%,
      transparent 55% 100%
    );

  opacity: .50 !important;
  border-radius: 34px !important;
}

/* Toglie il vecchio glow */
.featured-card-wrap .player-card-glow {
  display: none !important;
}

/* I contenuti devono stare sopra l'immagine */
.featured-card-wrap .player-top,
.featured-card-wrap .player-photo-wrap,
.featured-card-wrap .player-card h3,
.featured-card-wrap .player-stats {
  position: relative !important;
  z-index: 3 !important;
}

/* -------------------------------
   FILTRI RARITÀ
   ------------------------------- */

/* Bronzo: usa la carta oro ma la scalda/scurisce */
.featured-card-wrap .player-card.tier-bronze::before {
  filter:
    sepia(1)
    saturate(1.55)
    hue-rotate(-24deg)
    brightness(.78)
    contrast(1.08) !important;
}

/* Argento: usa la carta oro ma la rende silver */
.featured-card-wrap .player-card.tier-silver::before {
  filter:
    grayscale(1)
    brightness(1.16)
    contrast(.96)
    saturate(.35) !important;
}

/* Oro: immagine originale */
.featured-card-wrap .player-card.tier-gold::before {
  filter: none !important;
}

/* Glow diverso per rarità */
.featured-card-wrap .player-card.tier-bronze {
  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    0 0 42px rgba(205,127,50,.24) !important;
}

.featured-card-wrap .player-card.tier-silver {
  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    0 0 42px rgba(220,235,255,.22) !important;
}

.featured-card-wrap .player-card.tier-gold {
  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    0 0 45px rgba(255,224,102,.28) !important;
}

/* -------------------------------
   POSIZIONAMENTO TESTI SULLA CARD
   ------------------------------- */

.featured-card-wrap .player-top {
  position: absolute !important;
  top: 82px !important;
  left: 52px !important;
  right: 52px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}

.featured-card-wrap .player-top strong {
  font-size: 50px !important;
  line-height: .82 !important;
  color: #2b2107 !important;
  text-shadow: none !important;
}

.featured-card-wrap .player-top span {
  color: #2b2107 !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
}

.featured-card-wrap .player-top b {
  background: transparent !important;
  box-shadow: none !important;
  color: #2b2107 !important;
  padding: 0 !important;
  font-size: 17px !important;
}

/* Foto */
.featured-card-wrap .player-photo-wrap {
  position: absolute !important;
  top: 145px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: 180px !important;
  height: 190px !important;
  margin: 0 !important;

  border: none !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: hidden !important;
}

.featured-card-wrap .player-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 18% !important;
  transform: scale(1.02) !important;
}

/* Nome */
.featured-card-wrap .player-card h3 {
  position: absolute !important;
  left: 40px !important;
  right: 40px !important;
  top: 344px !important;

  margin: 0 !important;
  text-align: center !important;
  color: #2b2107 !important;
  font-size: 23px !important;
  font-weight: 1000 !important;
  letter-spacing: .06em !important;
  text-shadow: none !important;
}

/* Stats */
.featured-card-wrap .player-stats {
  position: absolute !important;
  left: 48px !important;
  right: 48px !important;
  bottom: 72px !important;

  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
}

.featured-card-wrap .player-stats div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 3px 2px !important;
}

.featured-card-wrap .player-stats strong {
  color: #2b2107 !important;
  font-size: 23px !important;
  line-height: 1 !important;
}

.featured-card-wrap .player-stats span {
  color: #2b2107 !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
}

/* === FIX CENTRATURA FOTO SU CARD FIFA === */

.featured-card-wrap .player-photo-wrap {
  top: 138px !important;
  width: 188px !important;
  height: 205px !important;
}

.featured-card-wrap .player-photo {
  object-fit: cover !important;
  object-position: center 12% !important;
  transform: scale(1.03) !important;
}

/* =========================================================
   FIX FOTO + NOME + STATS SU CARD FIFA
   ========================================================= */

/* Foto più a destra e un po' più compatta */
.featured-card-wrap .player-photo-wrap {
  top: 132px !important;
  left: 64% !important;
  width: 178px !important;
  height: 170px !important;
  transform: translateX(-50%) !important;
}

/* Centratura interna della foto */
.featured-card-wrap .player-photo {
  object-fit: cover !important;
  object-position: center 14% !important;
  transform: scale(1.02) !important;
}

/* Nome più pulito e non sovrapposto */
.featured-card-wrap .player-card h3 {
  top: 334px !important;
  left: 44px !important;
  right: 44px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  z-index: 5 !important;
}

/* Statistiche più basse */
.featured-card-wrap .player-stats {
  bottom: 48px !important;
  left: 48px !important;
  right: 48px !important;
  gap: 2px !important;
}

/* Numeri leggermente più compatti */
.featured-card-wrap .player-stats strong {
  font-size: 22px !important;
  line-height: .95 !important;
}

.featured-card-wrap .player-stats span {
  font-size: 10px !important;
  line-height: 1 !important;
}

/* === ALZA SOLO LA FOTO DENTRO IL RIQUADRO === */

.featured-card-wrap .player-photo {
  object-fit: cover !important;
  object-position: center 40%!important;
  transform: scale(1.02) !important;
}

/* =========================================================
   BACHECA TROFEI / ACHIEVEMENTS
   ========================================================= */

.home-achievements-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.home-achievements-card::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255,224,102,.18);
  filter: blur(8px);
  pointer-events: none;
}

.achievements-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.achievements-head h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.04em;
}

.achievements-head span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 800;
}

.achievements-head strong {
  min-width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle, rgba(255,255,255,.26), rgba(255,255,255,.07)),
    linear-gradient(135deg, rgba(255,224,102,.32), rgba(73,245,142,.16));
  border: 1px solid rgba(255,255,255,.16);
  color: #fff7c2;
  font-size: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

.achievements-list {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}

.achievements-list::-webkit-scrollbar {
  display: none;
}

.achievement-item {
  flex: 0 0 148px;
  min-height: 150px;
  scroll-snap-align: start;
  border-radius: 22px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.achievement-item.unlocked {
  border-color: rgba(255,224,102,.36);
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    0 0 26px rgba(255,224,102,.12),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.achievement-item.locked {
  opacity: .48;
  filter: grayscale(.75);
}

.achievement-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  font-size: 23px;
  background:
    radial-gradient(circle, rgba(255,255,255,.24), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
}

.achievement-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.achievement-info strong {
  color: #fff;
  font-size: 15px;
  line-height: 1.05;
}

.achievement-info span {
  color: rgba(255,255,255,.66);
  font-size: 12px;
  line-height: 1.25;
}

.achievement-info small {
  width: fit-content;
  margin-top: 3px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(73,245,142,.14);
  border: 1px solid rgba(73,245,142,.20);
  color: #49f58e;
  font-size: 11px;
  font-weight: 1000;
}

/* =========================================================
   FIX SCORRIMENTO BACHECA TROFEI
   ========================================================= */

.home-achievements-card {
  overflow: hidden !important;
  max-width: 100% !important;
}

.achievements-list {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  padding: 0 4px 8px !important;
  margin: 0 !important;

  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  touch-action: pan-x !important;
}

.achievement-item {
  flex: 0 0 150px !important;
  width: 150px !important;
  min-width: 150px !important;
  scroll-snap-align: start !important;
}

.achievements-list::after {
  content: "";
  flex: 0 0 10px;
}

.achievements-list::-webkit-scrollbar {
  display: none;
}

/* =========================================================
   GESTIONE TROFEI PERSONALIZZATI
   ========================================================= */

.achievements-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.achievements-actions button {
  border: 0;
  border-radius: 999px;
  padding: 9px 11px;
  background: rgba(73,245,142,.16);
  border: 1px solid rgba(73,245,142,.24);
  color: #49f58e;
  font-size: 12px;
  font-weight: 1000;
}

.custom-achievement-form {
  display: grid;
  gap: 12px;
}

.custom-achievements-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.custom-achievement-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.custom-achievement-row strong {
  display: block;
  font-size: 16px;
}

.custom-achievement-row span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
}

.custom-achievement-row button {
  border: 0;
  border-radius: 999px;
  padding: 9px 11px;
  background: rgba(255,107,107,.14);
  border: 1px solid rgba(255,107,107,.24);
  color: #ff6b6b;
  font-size: 12px;
  font-weight: 1000;
}

.ghost-btn {
  width: fit-content;
  border: 0;
  border-radius: 999px;
  padding: 10px 13px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 900;
}

.muted {
  color: rgba(255,255,255,.68);
}

/* =========================================================
   FIX DEFINITIVO INTERAZIONE + SCROLL BACHECA TROFEI
   ========================================================= */

.home-achievements-card {
  position: relative !important;
  z-index: 30 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  max-width: 100% !important;
}

.home-achievements-card::before,
.home-achievements-card::after {
  pointer-events: none !important;
  z-index: 0 !important;
}

.achievements-head,
.achievements-actions,
.achievements-actions button,
.achievements-list,
.achievement-item {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}

/* Pulsante Gestisci cliccabile */
.achievements-actions button {
  cursor: pointer !important;
}

/* Scroll orizzontale vero */
.achievements-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;

  width: 100% !important;
  max-width: 100% !important;

  overflow-x: scroll !important;
  overflow-y: hidden !important;

  gap: 10px !important;
  padding: 0 20px 12px 2px !important;
  margin: 0 !important;

  -webkit-overflow-scrolling: touch !important;
  scroll-snap-type: x mandatory !important;
  touch-action: pan-x !important;

  cursor: grab !important;
}

.achievements-list:active {
  cursor: grabbing !important;
}

.achievement-item {
  flex: 0 0 156px !important;
  width: 156px !important;
  min-width: 156px !important;
  max-width: 156px !important;
  scroll-snap-align: start !important;
}

/* mostriamo una scrollbar sottile su PC, così capisci che scorre */
.achievements-list::-webkit-scrollbar {
  display: block !important;
  height: 6px !important;
}

.achievements-list::-webkit-scrollbar-track {
  background: rgba(255,255,255,.06) !important;
  border-radius: 999px !important;
}

.achievements-list::-webkit-scrollbar-thumb {
  background: rgba(73,245,142,.45) !important;
  border-radius: 999px !important;
}

/* =========================================================
   PROFILO GIOCATORE MODIFICABILE
   ========================================================= */

.profile-setup-section {
  min-height: calc(100vh - 120px);
  display: grid;
  align-content: start;
  gap: 16px;
}

.profile-setup-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.profile-setup-hero h2 {
  margin: 0;
  font-size: 32px;
  letter-spacing: -.06em;
}

.profile-setup-hero p {
  margin: 6px 0 0;
  color: rgba(255,255,255,.68);
  line-height: 1.35;
}

.profile-setup-form {
  display: grid;
  gap: 14px;
}

.profile-card-preview {
  display: grid;
  place-items: center;
  padding: 10px 0 4px;
}

.profile-photo-preview-wrap {
  width: 190px;
  height: 220px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(73,245,142,.18), transparent 45%),
    rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 20px 50px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.profile-photo-preview-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: center center;
}

.field-help {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  line-height: 1.35;
}

.photo-controls {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
}

.photo-controls label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.photo-controls label span {
  color: #49f58e;
  font-weight: 1000;
}

.photo-controls input[type="range"] {
  width: 100%;
  accent-color: #49f58e;
}

.edit-profile-btn {
  width: 100%;
  border: 0;
  border-radius: 22px;
  padding: 13px 14px;
  color: #031109;
  background: linear-gradient(135deg, #49f58e, #b9ffd2);
  font-weight: 1000;
  box-shadow:
    0 16px 34px rgba(73,245,142,.22),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* La foto sulla card usa le regolazioni del profilo */
.featured-card-wrap .player-photo {
  object-fit: cover !important;
  object-position: var(--photo-x, 50%) var(--photo-y, 8%) !important;
  transform: scale(var(--photo-zoom, 1.02)) !important;
  transform-origin: center center !important;
}

/* =========================================================
   EXTRA PROFILO GIOCATORE
   ========================================================= */

.profile-extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Mini scheda profilo in Home */
.player-profile-summary {
  border-radius: 24px;
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
  display: grid;
  gap: 12px;
}

.profile-summary-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-summary-avatar {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
}

.profile-summary-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-summary-main h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.04em;
}

.profile-summary-main span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 900;
}

.profile-summary-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

.profile-summary-tags::-webkit-scrollbar {
  display: none;
}

.profile-summary-tags span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(73,245,142,.13);
  border: 1px solid rgba(73,245,142,.20);
  color: #b9ffd2;
  font-size: 12px;
  font-weight: 1000;
}

/* Riga piccola sulla card FIFA: numero + piede */
.featured-card-wrap .player-card-extra {
  position: absolute !important;
  left: 48px !important;
  right: 48px !important;
  top: 365px !important;
  z-index: 5 !important;

  text-align: center !important;
  color: #2b2107 !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
  text-shadow: none !important;
  opacity: .92 !important;
}

@media (max-width: 390px) {
  .profile-extra-grid {
    grid-template-columns: 1fr;
  }

  .featured-card-wrap .player-card-extra {
    top: 362px !important;
  }
}

/* =========================================================
   PAGINA OBIETTIVI: PRE-PARTITA + RECORD
   ========================================================= */

.goals-page {
  display: grid;
  gap: 16px;
}

.goals-page .page-head {
  display: grid;
  gap: 12px;
}

.goals-page .page-head h2 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -.06em;
}

.goals-page .page-head p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.68);
  line-height: 1.35;
}

.goals-page-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.goals-page-card::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(73,245,142,.17);
  filter: blur(8px);
  pointer-events: none;
}

.goals-page-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.goals-page-head h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.04em;
}

.goals-page-head span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 800;
}

.goals-page-head > strong {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background:
    radial-gradient(circle, rgba(255,255,255,.26), rgba(255,255,255,.07)),
    linear-gradient(135deg, rgba(73,245,142,.32), rgba(255,224,102,.16));
  border: 1px solid rgba(255,255,255,.16);
  font-size: 24px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

.pre-goal-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.pre-goal-grid {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 12px;
}

.pre-goals-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.pre-goal-item {
  border-radius: 22px;
  padding: 13px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pre-goal-item.done {
  border-color: rgba(73,245,142,.30);
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    0 0 24px rgba(73,245,142,.12);
}

.pre-goal-item.missed {
  border-color: rgba(255,107,107,.26);
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    0 0 24px rgba(255,107,107,.10);
}

.pre-goal-item strong {
  display: block;
  color: #fff;
  font-size: 16px;
}

.pre-goal-item span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.70);
  font-size: 13px;
  font-weight: 800;
}

.pre-goal-item small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.52);
  font-size: 12px;
}

.pre-goal-side {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  align-content: space-between;
  gap: 10px;
}

.pre-goal-side em {
  font-style: normal;
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 1000;
}

.pre-goal-item.done .pre-goal-side em {
  background: rgba(73,245,142,.14);
  color: #49f58e;
}

.pre-goal-item.missed .pre-goal-side em {
  background: rgba(255,107,107,.14);
  color: #ff6b6b;
}

.pre-goal-side button {
  border: 0;
  border-radius: 999px;
  padding: 7px 9px;
  background: rgba(255,107,107,.14);
  border: 1px solid rgba(255,107,107,.22);
  color: #ff6b6b;
  font-size: 11px;
  font-weight: 1000;
}

.goals-empty-box,
.goals-empty {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: 20px;
  padding: 14px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.68);
}

.goals-empty-box p {
  margin: 0 0 5px;
  color: #fff;
  font-weight: 900;
}

.goals-empty-box span {
  font-size: 13px;
  line-height: 1.35;
}

.goal-records-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.goal-record-item {
  min-height: 124px;
  border-radius: 22px;
  padding: 12px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
  display: grid;
  align-content: space-between;
  gap: 10px;
}

.goal-record-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 22px;
  background:
    radial-gradient(circle, rgba(255,255,255,.24), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
}

.goal-record-item span {
  display: block;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.goal-record-item strong {
  display: block;
  margin-top: 3px;
  color: #fff7c2;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -.05em;
}

.goal-record-item small {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.52);
  font-size: 11px;
  line-height: 1.25;
}

@media (max-width: 390px) {
  .pre-goal-grid {
    grid-template-columns: 1fr;
  }

  .goal-records-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   BOTTOM NAV A 5 PULSANTI
   Home / Partita / Storico / Focus / Stats
   ========================================================= */

.bottom-nav {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 7px !important;
  padding: 9px !important;
  width: min(calc(100% - 18px), 460px) !important;
}

.nav-btn {
  min-height: 54px !important;
  border-radius: 18px !important;
  gap: 3px !important;
}

.nav-icon {
  font-size: 18px !important;
}

.nav-label {
  font-size: 10px !important;
  letter-spacing: -.03em !important;
}

@media (max-width: 370px) {
  .bottom-nav {
    gap: 5px !important;
    padding: 8px !important;
  }

  .nav-btn {
    min-height: 50px !important;
    border-radius: 16px !important;
  }

  .nav-icon {
    font-size: 17px !important;
  }

  .nav-label {
    font-size: 9px !important;
  }
}

/* =========================================================
   CARTA ICONA 90-99
   ========================================================= */

.featured-card-wrap .player-card.tier-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background: url("card-icon.png") center center / 100% 100% no-repeat !important;
  filter: none !important;

  /* ritaglio della forma della carta */
  clip-path: polygon(
    10% 7%,
    30% 7%,
    36% 2.5%,
    64% 2.5%,
    70% 7%,
    90% 7%,
    90% 86%,
    79% 89%,
    66% 89.5%,
    50% 97%,
    34% 89.5%,
    21% 89%,
    10% 86%
  ) !important;
}

/* bordo esterno pulito della carta Icona */
.featured-card-wrap .player-card.tier-icon {
  overflow: hidden !important;
  border-radius: 0 !important;
  clip-path: polygon(
    10% 7%,
    30% 7%,
    36% 2.5%,
    64% 2.5%,
    70% 7%,
    90% 7%,
    90% 86%,
    79% 89%,
    66% 89.5%,
    50% 97%,
    34% 89.5%,
    21% 89%,
    10% 86%
  ) !important;

  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    0 0 55px rgba(255,255,255,.28),
    0 0 38px rgba(255,224,102,.22) !important;
}

/* evita che eventuali vecchi layer bianchi coprano la carta */
.featured-card-wrap .player-card.tier-icon::after {
  opacity: .45 !important;
}

.featured-card-wrap .player-card.tier-icon {
  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    0 0 55px rgba(255,255,255,.28),
    0 0 38px rgba(255,224,102,.22) !important;
}

/* Colore testi su carta Icona */
.featured-card-wrap .player-card.tier-icon .player-top strong,
.featured-card-wrap .player-card.tier-icon .player-top span,
.featured-card-wrap .player-card.tier-icon .player-top b,
.featured-card-wrap .player-card.tier-icon h3,
.featured-card-wrap .player-card.tier-icon .player-card-extra,
.featured-card-wrap .player-card.tier-icon .player-stats strong,
.featured-card-wrap .player-card.tier-icon .player-stats span {
  color: #2b2107 !important;
  text-shadow: none !important;
}

/* Ruolo senza pill verde sulla carta Icona */
.featured-card-wrap .player-card.tier-icon .player-top b {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Piccolo effetto premio */
.featured-card-wrap .player-card.tier-icon::after {
  opacity: .65 !important;
}

/* =========================================================
   FIX CARTA ICONA: usa PNG pulito, senza ritaglio CSS
   ========================================================= */

.featured-card-wrap .player-card.tier-icon {
  clip-path: none !important;
  overflow: visible !important;
}

.featured-card-wrap .player-card.tier-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background: url("card-icon.png") center center / contain no-repeat !important;
  filter: none !important;

  clip-path: none !important;
  border: none !important;
  box-shadow: none !important;
}

.featured-card-wrap .player-card.tier-icon::after {
  clip-path: none !important;
}

.featured-card-wrap .player-card.tier-icon {
  background: transparent !important;
  border: none !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.58),
    0 0 40px rgba(255,244,210,.18) !important;
}

/* immagine Icona pulita */
.featured-card-wrap .player-card.tier-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background: url("card-icon.png") center center / contain no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
}

/* togliamo il layer gloss che crea differenze */
.featured-card-wrap .player-card.tier-icon::after {
  background: none !important;
  opacity: 0 !important;
  box-shadow: none !important;
}

/* niente altri overlay interni strani */
.featured-card-wrap .player-card.tier-icon .player-card-glow {
  display: none !important;
}

/* =========================================================
   FIX MAGLIA / PIEDE / STILE SULLA CARD
   ========================================================= */

/* Nasconde la vecchia riga #10 · DESTRO sotto al nome */
.featured-card-wrap .player-card-extra {
  display: none !important;
}

/* Blocco laterale accanto alla foto */
.featured-card-wrap .player-card-side-info {
  position: absolute !important;
  top: 174px !important;
  left: 64px !important;
  width: 74px !important;
  z-index: 8 !important;

  display: grid !important;
  gap: 6px !important;
}

/* Ogni box: MAGLIA / PIEDE / STILE */
.featured-card-wrap .player-card-side-info div {
  padding: 5px 5px !important;
  border-radius: 10px !important;

  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(43,33,7,.14) !important;

  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Titoletti piccoli */
.featured-card-wrap .player-card-side-info span {
  display: block !important;
  color: #2b2107 !important;
  font-size: 7px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
}

/* Valori */
.featured-card-wrap .player-card-side-info strong {
  display: block !important;
  margin-top: 3px !important;

  color: #2b2107 !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: left !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
}

/* Per la carta Icona resta leggibile */
.featured-card-wrap .player-card.tier-icon .player-card-side-info div {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(140,112,38,.20) !important;
}

.featured-card-wrap .player-card.tier-icon .player-card-side-info span,
.featured-card-wrap .player-card.tier-icon .player-card-side-info strong {
  color: #2b2107 !important;
  text-shadow: none !important;
}

/* Nome e statistiche tornano puliti */
.featured-card-wrap .player-card h3 {
  top: 326px !important;
}

.featured-card-wrap .player-stats {
  bottom: 42px !important;
}

/* =========================================================
   FIX FINALE: STATS VISIBILI + INFO LATERALI CARD
   ========================================================= */

/* Le stats devono stare sopra l'immagine della carta */
.featured-card-wrap .player-stats {
  position: absolute !important;
  left: 48px !important;
  right: 48px !important;
  bottom: 70px !important;
  z-index: 10 !important;

  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;

  opacity: 1 !important;
  visibility: visible !important;
}

/* Box delle stats */
.featured-card-wrap .player-stats div {
  display: block !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 3px 2px !important;
  text-align: center !important;
}

/* Numeri stats */
.featured-card-wrap .player-stats strong {
  display: block !important;
  color: #2b2107 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  text-shadow: none !important;
}

/* Etichette stats */
.featured-card-wrap .player-stats span {
  display: block !important;
  margin-top: 3px !important;
  color: #2b2107 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  text-shadow: none !important;
}

/* Info laterali: maglia / piede / stile */
.featured-card-wrap .player-card-side-info {
  position: absolute !important;
  top: 174px !important;
  left: 35px !important;
  width: 74px !important;
  z-index: 11 !important;

  display: grid !important;
  gap: 6px !important;
}

/* Mini box laterali */
.featured-card-wrap .player-card-side-info div {
  padding: 5px 5px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(43,33,7,.14) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* Titoli laterali */
.featured-card-wrap .player-card-side-info span {
  display: block !important;
  color: #2b2107 !important;
  font-size: 7px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}

/* Valori laterali */
.featured-card-wrap .player-card-side-info strong {
  display: block !important;
  margin-top: 3px !important;
  color: #2b2107 !important;
  font-size: 10px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: none !important;
}

/* Nasconde la vecchia riga se è rimasta */
.featured-card-wrap .player-card-extra {
  display: none !important;
}

/* Nome più alto, così non pesta sulle stats */
.featured-card-wrap .player-card h3 {
  top: 320px !important;
  z-index: 10 !important;
}

/* Foto resta sopra la card ma sotto le info */
.featured-card-wrap .player-photo-wrap {
  z-index: 8 !important;
}

/* =========================================================
   PULSANTE PROFILO ALTO + PANNELLO PROFILO/BACKUP
   ========================================================= */

.top-profile-btn {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 80;

  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 17px;

  display: grid;
  place-items: center;

  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
    rgba(4,9,7,.72);
  border: 1px solid rgba(255,255,255,.16);

  color: #fff;
  font-size: 21px;

  box-shadow:
    0 16px 36px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.16);

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.profile-hub-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;

  display: grid;
  place-items: end center;

  padding: 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));

  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.profile-hub-panel {
  width: min(100%, 430px);
  border-radius: 30px;
  padding: 16px;

  background:
    radial-gradient(circle at top right, rgba(73,245,142,.16), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.06)),
    rgba(5,12,9,.92);

  border: 1px solid rgba(255,255,255,.16);

  box-shadow:
    0 30px 90px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.14);
}

.profile-hub-head {
  display: grid;
  grid-template-columns: 58px 1fr 40px;
  align-items: center;
  gap: 12px;
}

.profile-hub-avatar {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.30);
}

.profile-hub-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-hub-head h3 {
  margin: 0;
  color: #fff;
  font-size: 23px;
  letter-spacing: -.05em;
}

.profile-hub-head span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.66);
  font-size: 13px;
  font-weight: 900;
}

.profile-hub-head button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 15px;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);

  color: #fff;
  font-size: 23px;
  font-weight: 900;
}

.profile-hub-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 14px;
  padding-bottom: 2px;

  -webkit-overflow-scrolling: touch;
}

.profile-hub-tags::-webkit-scrollbar {
  display: none;
}

.profile-hub-tags span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;

  background: rgba(73,245,142,.13);
  border: 1px solid rgba(73,245,142,.20);

  color: #b9ffd2;
  font-size: 12px;
  font-weight: 1000;
}

.profile-hub-actions {
  display: grid;
  gap: 10px;
  margin-top: 15px;
}

.profile-hub-actions button {
  width: 100%;
  border: 0;
  border-radius: 20px;
  padding: 14px;

  text-align: left;
  color: #fff;
  font-size: 14px;
  font-weight: 1000;

  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 14px 30px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.profile-hub-actions button:first-child {
  color: #031109;
  background: linear-gradient(135deg, #49f58e, #b9ffd2);
}

.profile-hub-note {
  margin: 12px 0 0;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  line-height: 1.4;
}

/* =========================================================
   FIX PULSANTE PROFILO DENTRO LA APP, NON NELL'ANGOLO DEL PC
   ========================================================= */

.top-profile-btn {
  right: max(14px, calc((100vw - 460px) / 2 + 14px)) !important;
  top: max(14px, env(safe-area-inset-top)) !important;
}

/* Su desktop, dove la app sembra un telefono centrato */
@media (min-width: 700px) {
  .top-profile-btn {
    top: 32px !important;
    right: calc((100vw - 460px) / 2 + 18px) !important;
  }
}

/* =========================================================
   PROSSIMO UPGRADE CARTA - FOCUS
   ========================================================= */

.card-upgrade-card {
  overflow: hidden !important;
}

.card-upgrade-card::before {
  background: rgba(255,224,102,.18) !important;
}

.card-upgrade-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 14px;
  align-items: stretch;
}

.card-upgrade-ovr {
  border-radius: 22px;
  padding: 14px 10px;
  text-align: center;

  background:
    radial-gradient(circle at top, rgba(255,255,255,.20), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 14px 30px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.12);
}

.card-upgrade-ovr span {
  display: block;
  color: rgba(255,255,255,.64);
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.card-upgrade-ovr strong {
  display: block;
  margin-top: 7px;
  color: #fff7c2;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.07em;
  text-shadow: 0 0 20px rgba(255,224,102,.18);
}

.card-upgrade-ovr small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.70);
  font-size: 12px;
  font-weight: 900;
}

.card-upgrade-details {
  display: grid;
  gap: 8px;
}

.card-upgrade-details div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
}

.card-upgrade-details span {
  color: rgba(255,255,255,.66);
  font-size: 13px;
  font-weight: 800;
}

.card-upgrade-details strong {
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
  text-align: right;
}

.card-upgrade-progress {
  position: relative;
  z-index: 1;
  margin-top: 14px;
}

.card-upgrade-bar {
  width: 100%;
  height: 13px;
  border-radius: 999px;
  overflow: hidden;

  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
}

.card-upgrade-bar div {
  height: 100%;
  border-radius: 999px;

  background: linear-gradient(90deg, #49f58e, #fff2a6);
  box-shadow: 0 0 18px rgba(73,245,142,.35);
}

.card-upgrade-progress small {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.62);
  font-size: 12px;
}

/* Colori leggermente diversi in base alla carta */
.card-upgrade-card.tier-bronze .card-upgrade-bar div {
  background: linear-gradient(90deg, #b86b2c, #ffbd7a);
}

.card-upgrade-card.tier-silver .card-upgrade-bar div {
  background: linear-gradient(90deg, #aebdca, #ffffff);
}

.card-upgrade-card.tier-gold .card-upgrade-bar div {
  background: linear-gradient(90deg, #f5d64a, #fff2a6);
}

.card-upgrade-card.tier-icon .card-upgrade-bar div {
  background: linear-gradient(90deg, #ffffff, #f5d64a);
}

@media (max-width: 390px) {
  .card-upgrade-content {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   BOTTOM NAV A 6 TASTI
   Home / Partita / Storico / Club / Focus / Stats
   ========================================================= */

.bottom-nav {
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 5px !important;
  padding: 8px !important;
  width: min(calc(100% - 12px), 460px) !important;
}

.nav-btn {
  min-height: 50px !important;
  border-radius: 16px !important;
  padding: 5px 2px !important;
}

.nav-icon {
  font-size: 17px !important;
}

.nav-label {
  font-size: 9px !important;
  font-weight: 1000 !important;
  letter-spacing: -.04em !important;
}

@media (max-width: 370px) {
  .bottom-nav {
    gap: 4px !important;
    padding: 7px !important;
  }

  .nav-btn {
    min-height: 48px !important;
    border-radius: 15px !important;
  }

  .nav-icon {
    font-size: 16px !important;
  }

  .nav-label {
    font-size: 8.5px !important;
  }
}

/* =========================================================
   PAGINA SPOGLIATOIO / CLUB
   ========================================================= */

.locker-page {
  display: grid;
  gap: 16px;
}

.locker-page .page-head h2 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -.06em;
}

.locker-page .page-head p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.68);
  line-height: 1.35;
}

.locker-hero-card,
.locker-reports-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 16px;

  background:
    radial-gradient(circle at top right, rgba(73,245,142,.16), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));

  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.locker-hero-card > div {
  position: relative;
  z-index: 1;
}

.locker-hero-card span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;

  border-radius: 18px;
  background:
    radial-gradient(circle, rgba(255,255,255,.24), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);

  font-size: 25px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

.locker-hero-card h3 {
  margin: 14px 0 6px;
  font-size: 24px;
  letter-spacing: -.04em;
}

.locker-hero-card p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 14px;
  line-height: 1.45;
}

.locker-head {
  position: relative;
  z-index: 1;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;

  margin-bottom: 14px;
}

.locker-head h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.04em;
}

.locker-head span {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 800;
}

.locker-head > strong {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;

  border-radius: 18px;
  background:
    radial-gradient(circle, rgba(255,255,255,.26), rgba(255,255,255,.07)),
    linear-gradient(135deg, rgba(73,245,142,.32), rgba(255,224,102,.16));

  border: 1px solid rgba(255,255,255,.16);
  font-size: 24px;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}

.locker-empty {
  position: relative;
  z-index: 1;

  border-radius: 22px;
  padding: 14px;

  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
}

.locker-empty strong {
  display: block;
  color: #fff;
  font-size: 16px;
}

.locker-empty p {
  margin: 6px 0 12px;
  color: rgba(255,255,255,.66);
  font-size: 13px;
  line-height: 1.4;
}

.locker-empty button {
  border: 0;
  border-radius: 999px;
  padding: 10px 13px;

  color: #031109;
  background: linear-gradient(135deg, #49f58e, #b9ffd2);

  font-weight: 1000;
}

.locker-report-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
}

.locker-report-item {
  border-radius: 22px;
  padding: 13px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 14px 30px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.locker-report-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.locker-report-top strong {
  color: #fff;
  font-size: 16px;
}

.locker-report-top span {
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;

  border-radius: 15px;
  color: #031109;
  background: linear-gradient(135deg, #49f58e, #b9ffd2);

  font-size: 18px;
  font-weight: 1000;
}

.locker-report-item p {
  margin: 8px 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.35;
}

.locker-report-item small {
  color: rgba(255,255,255,.52);
  font-size: 11px;
}

/* =========================================================
   SPOGLIATOIO ONLINE
   ========================================================= */

.club-code-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 16px;

  background:
    radial-gradient(circle at top right, rgba(73,245,142,.16), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));

  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.club-code-form {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 10px;
}

.club-code-form input {
  min-width: 0;
  border: 0;
  border-radius: 18px;
  padding: 13px 14px;

  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);

  font-weight: 1000;
  text-transform: uppercase;
  outline: none;
}

.club-code-form input::placeholder {
  color: rgba(255,255,255,.38);
}

.club-code-form button,
.locker-online-actions button {
  border: 0;
  border-radius: 18px;
  padding: 12px 13px;

  color: #031109;
  background: linear-gradient(135deg, #49f58e, #b9ffd2);

  font-weight: 1000;
}

.club-code-note {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;

  color: rgba(255,255,255,.62);
  font-size: 12px;
  line-height: 1.4;
}

.locker-online-actions {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 10px;
  margin-bottom: 12px;
}

.locker-online-actions button:last-child {
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.locker-online-content {
  position: relative;
  z-index: 1;
}

.locker-loading {
  border-radius: 22px;
  padding: 14px;

  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);

  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 390px) {
  .club-code-form,
  .locker-online-actions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   STATS CARD REPORT ONLINE
   ========================================================= */

.locker-report-top > div {
  min-width: 0;
}

.locker-report-top > div small {
  display: block;
  margin-top: 3px;
  color: rgba(255,255,255,.55);
  font-size: 11px;
  font-weight: 900;
}

.locker-report-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.locker-report-stats div {
  border-radius: 16px;
  padding: 10px 8px;
  text-align: center;

  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.10);
}

.locker-report-stats strong {
  display: block;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  font-weight: 1000;
}

.locker-report-stats span {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.58);
  font-size: 11px;
  font-weight: 900;
}

.locker-report-date {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.48);
  font-size: 11px;
}

/* =========================================================
   REPORT ONLINE - ELIMINA + VALUTAZIONE
   ========================================================= */

.locker-report-top {
  align-items: flex-start !important;
}

.locker-delete-report {
  border: 0;
  border-radius: 999px;
  padding: 8px 11px;

  color: #ffb8b8;
  background: rgba(255,80,80,.12);
  border: 1px solid rgba(255,80,80,.22);

  font-size: 11px;
  font-weight: 1000;
}

.locker-delete-report:active {
  transform: scale(.97);
}

/* =========================================================
   PULSANTE PUBBLICA REPORT NEL DETTAGLIO PARTITA
   ========================================================= */

.detail-actions {
  display: grid !important;
  gap: 10px !important;
}

.locker-publish-btn {
  border: 0;
  border-radius: 18px;
  padding: 13px 14px;

  color: #031109;
  background: linear-gradient(135deg, #49f58e, #b9ffd2);

  font-weight: 1000;
  box-shadow:
    0 16px 34px rgba(73,245,142,.20),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.locker-publish-btn:active {
  transform: scale(.98);
}

/* =========================================================
   SPOGLIATOIO - PULIZIA PULSANTE AGGIORNA
   ========================================================= */

.locker-online-actions-single {
  grid-template-columns: 1fr !important;
}

.locker-online-actions-single button {
  width: 100% !important;
}

/* =========================================================
   CLASSIFICA CLUB
   ========================================================= */

.club-leaderboard-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 16px;

  background:
    radial-gradient(circle at top right, rgba(255,224,102,.18), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));

  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 18px 45px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.club-leaderboard-content {
  position: relative;
  z-index: 1;
}

.club-leaderboard-grid {
  display: grid;
  gap: 10px;
}

.club-ranking-card {
  border-radius: 22px;
  padding: 13px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 14px 30px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.club-ranking-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}

.club-ranking-title span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;

  border-radius: 13px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);

  font-size: 17px;
}

.club-ranking-title strong {
  color: #fff;
  font-size: 15px;
  font-weight: 1000;
}

.club-ranking-list {
  display: grid;
  gap: 7px;
}

.club-ranking-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 9px;

  border-radius: 15px;
  padding: 9px 10px;

  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
}

.club-ranking-row span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;

  border-radius: 999px;
  color: #031109;
  background: linear-gradient(135deg, #49f58e, #b9ffd2);

  font-size: 12px;
  font-weight: 1000;
}

.club-ranking-row strong {
  min-width: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 1000;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.club-ranking-row em {
  color: #fff7c2;
  font-style: normal;
  font-size: 12px;
  font-weight: 1000;
}

.club-ranking-empty {
  border-radius: 15px;
  padding: 10px;

  color: rgba(255,255,255,.58);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);

  font-size: 12px;
  font-weight: 800;
}

/* =========================================================
   REPORT ONLINE - PROPRIETARIO
   ========================================================= */

.locker-owner-badge {
  border-radius: 999px;
  padding: 8px 11px;

  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);

  font-size: 11px;
  font-weight: 1000;
}

/* =========================================================
   FIX RARITÀ CARD - NON TOCCA IL CONTENITORE ESTERNO
   ========================================================= */

.player-card {
  background-color: transparent !important;
}

/* Se la carta è bronzo */
.player-card.card-bronze::before,
.player-card.card-bronze::after,
.player-card.card-bronze .player-card-glow {
  filter: sepia(0.8) saturate(1.1) hue-rotate(335deg) brightness(0.85) !important;
}

/* Se la carta è argento */
.player-card.card-silver::before,
.player-card.card-silver::after,
.player-card.card-silver .player-card-glow {
  filter: grayscale(1) saturate(0.15) brightness(1.18) contrast(0.92) !important;
}

/* Se la carta è oro */
.player-card.card-gold::before,
.player-card.card-gold::after,
.player-card.card-gold .player-card-glow {
  filter: none !important;
}

/* Se la carta è icona */
.player-card.card-icon::before,
.player-card.card-icon::after,
.player-card.card-icon .player-card-glow,
.player-card.card-special::before,
.player-card.card-special::after,
.player-card.card-special .player-card-glow {
  filter: brightness(1.15) saturate(0.75) contrast(0.95) !important;
}

/* =========================================================
   MATCHPULSE - PAGINA PLAYSTYLES
   ========================================================= */

.ps-page {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 110px;
}


/* HEADER */

.ps-page-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ps-page-title span,
.ps-category-header span {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  opacity: 0.55;
}

.ps-page-title h2,
.ps-category-header h3 {
  margin: 2px 0 0;
}

.ps-page-ovr {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ps-page-ovr span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  opacity: 0.55;
}

.ps-page-ovr strong {
  font-size: 24px;
  line-height: 1;
}


/* LOADOUT */

.ps-loadout-card,
.ps-category-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(0, 0, 0, 0.22)
    );
  padding: 17px;
  margin-bottom: 16px;
  overflow: hidden;
}

.ps-loadout-group + .ps-loadout-group {
  margin-top: 20px;
}

.ps-loadout-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}

.ps-loadout-title span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.3px;
}


/* SLOT */

.ps-slot-row {
  display: grid;
  align-items: center;
}

.ps-normal-row {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
}

.ps-plus-row {
  grid-template-columns: repeat(3, 44px);
  gap: 9px;
}

.ps-slot {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(
    50% 0%,
    100% 50%,
    50% 100%,
    0% 50%
  );
}

.ps-slot-normal.unlocked {
  background: rgba(240, 240, 240, 0.14);
}

.ps-slot-plus.unlocked {
  background: rgba(220, 192, 127, 0.17);
}

.ps-slot.locked {
  background: rgba(0, 0, 0, 0.32);
}

.ps-slot.locked b {
  font-size: 9px;
  opacity: 0.42;
}

.ps-slot.equipped {
  background: transparent;
}

.ps-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ps-empty-slot {
  width: 30%;
  height: 30%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
}


/* CATEGORIA */

.ps-category-header {
  margin-bottom: 16px;
}

.ps-category-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}

.ps-category-scroll::-webkit-scrollbar {
  display: none;
}


/* SINGOLO PS */

.ps-item {
  width: 102px;
  min-width: 102px;
  padding: 12px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 17px;
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  text-align: center;
  cursor: pointer;
}

.ps-item-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 8px;
}

.ps-item-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ps-item strong {
  display: block;
  font-size: 12px;
}

.ps-item small {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  opacity: 0.55;
}

.ps-state-none .ps-item-icon {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.48;
}

.ps-state-normal {
  border-color: rgba(255, 255, 255, 0.27);
}

.ps-state-plus {
  border-color: rgba(220, 192, 127, 0.58);
  box-shadow: 0 0 24px rgba(220, 192, 127, 0.12);
}


/* MENU IN BASSO */

.ps-selector-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(5px);
}

.ps-selector-sheet {
  width: 100%;
  max-width: 520px;
  padding:
    10px
    17px
    calc(18px + env(safe-area-inset-bottom));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 27px 27px 18px 18px;
  background: #171918;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.5);
}

.ps-selector-handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.ps-selector-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.ps-selector-title img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.ps-selector-title span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  opacity: 0.5;
}

.ps-selector-title h3 {
  margin: 2px 0 0;
}


/* PULSANTI SELEZIONE */

.ps-selector-actions {
  display: grid;
  gap: 10px;
}

.ps-select-normal,
.ps-select-plus {
  width: 100%;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 13px;
  border-radius: 17px;
  color: inherit;
  text-align: left;
}

.ps-select-normal {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.ps-select-plus {
  border: 1px solid rgba(220, 192, 127, 0.42);
  background: rgba(220, 192, 127, 0.1);
}

.ps-select-normal img,
.ps-select-plus img {
  width: 47px;
  height: 47px;
  object-fit: contain;
}

.ps-select-normal span,
.ps-select-plus span {
  display: flex;
  flex-direction: column;
}

.ps-select-normal small,
.ps-select-plus small {
  margin-top: 3px;
  opacity: 0.55;
}

.ps-select-normal.locked,
.ps-select-plus.locked {
  opacity: 0.42;
}

.ps-select-remove {
  width: 100%;
  padding: 14px;
  border: 0;
  background: transparent;
  color: #ff7777;
  font-weight: 800;
}


/* TILE HOME */

.ps-home-tile .action-icon {
  font-size: 29px;
}

/* =========================================================
   ICONE PS+ SULLA CARTA
   ========================================================= */

.player-card-side-info {
  overflow: visible !important;
}

.player-card-side-info > div {
  position: relative;
  overflow: visible !important;
}

.card-ps-plus-icon {
  position: absolute;

  width: 62px;
  height: 62px;

  left: -60px;
  top: 50%;

  transform: translateY(-50%);

  object-fit: contain;
  pointer-events: none;
  z-index: 20;

  filter:
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 4px rgba(220, 190, 110, 0.28));
}
/* =========================================================
   FRECCE SCORRIMENTO PLAYSTYLES
   ========================================================= */

.ps-category-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.ps-category-heading {
  min-width: 0;
}

.ps-category-heading span {
  display: block;
}

.ps-category-heading h3 {
  margin: 3px 0 0;
}

.ps-scroll-btn:active {
  transform: scale(0.94);
}

.ps-category-scroll {
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-snap-type: x proximity;
}

.ps-category-scroll .ps-item {
  scroll-snap-align: start;
}

/* =========================================================
   TRASCINAMENTO PLAYSTYLES CON MOUSE
   ========================================================= */

.ps-category-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;

  cursor: grab;
  user-select: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ps-category-scroll::-webkit-scrollbar {
  display: none;
}

.ps-category-scroll.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.ps-category-scroll .ps-item {
  flex: 0 0 102px;
}

.ps-category-scroll img {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

/* =========================================================
   NUOVA PARTITA - RUOLO E AUTOVALUTAZIONE
   ========================================================= */

.new-match-header {
  margin-bottom: 15px;
}

.new-match-header > span {
  display: block;
  margin-bottom: 5px;

  color: var(--green);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .16em;
}

.new-match-header h2 {
  margin-bottom: 6px;
}

.new-match-header p {
  max-width: 54ch;
  margin: 0;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.match-form-card,
.match-role-section,
.self-evaluation-section {
  overflow: hidden;
}

.match-section-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 4px;
}

.match-section-intro > div > span {
  display: block;
  margin-bottom: 3px;

  color: var(--green);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .14em;
}

.match-section-intro h3 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  letter-spacing: -.025em;
  text-transform: none;
}

.match-section-intro > strong {
  font-size: 25px;
}

.match-section-help {
  margin: 0 0 14px;

  color: rgba(255,255,255,.61);
  font-size: 11px;
  line-height: 1.45;
}


/* RUOLI */

.match-role-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.match-role-option {
  position: relative;
}

.match-role-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.match-role-option span {
  min-height: 62px;
  padding: 10px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;

  background: rgba(0,0,0,.23);
  color: rgba(255,255,255,.66);

  text-align: center;

  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}

.match-role-option b {
  color: inherit;
  font-size: 14px;
  letter-spacing: .03em;
}

.match-role-option small {
  margin-top: 3px;
  color: inherit;
  font-size: 9px;
  opacity: .72;
}

.match-role-option input:checked + span {
  border-color: rgba(0,245,160,.72);

  background:
    linear-gradient(
      145deg,
      rgba(0,245,160,.24),
      rgba(0,194,255,.10)
    );

  color: #fff;

  box-shadow:
    0 0 0 2px rgba(0,245,160,.08),
    0 12px 26px rgba(0,245,160,.10);
}

.match-role-option:active span {
  transform: scale(.97);
}


/* AUTOVALUTAZIONI */

.self-rating-list {
  display: grid;
  gap: 10px;
}

.self-rating-row {
  display: block;
  padding: 12px;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(0,0,0,.18)
    );
}

.self-rating-head {
  display: grid;
  grid-template-columns: 38px 1fr 44px;
  gap: 9px;
  align-items: center;
}

.self-rating-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;

  background: rgba(0,0,0,.25);
  font-size: 18px;
}

.self-rating-text {
  min-width: 0;
}

.self-rating-text strong {
  display: block;
  color: #fff;
  font-size: 12px;
}

.self-rating-text small {
  display: block;
  margin-top: 2px;

  color: rgba(255,255,255,.52);
  font-size: 9px;
  line-height: 1.3;
}

.self-rating-value {
  min-width: 44px;
  padding: 7px 6px;

  border: 1px solid rgba(0,245,160,.24);
  border-radius: 12px;

  background: rgba(0,245,160,.10);
  color: var(--green);

  font-size: 14px;
  font-weight: 1000;
  text-align: center;
}

.self-rating-row input[type="range"] {
  width: 100%;
  min-height: 24px;
  margin: 9px 0 0;
  padding: 0;

  border: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--green);
}

.self-rating-scale {
  display: flex;
  justify-content: space-between;
  margin-top: -1px;

  color: rgba(255,255,255,.38);
  font-size: 8px;
  font-weight: 800;
}

.match-form-actions {
  margin-bottom: 14px;
}


@media (min-width: 560px) {
  .match-role-grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));
  }
}

/* Omino presente esclusivamente nella Home */

.top-profile-btn.is-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Scritta OVERALL più grande sulla carta */

.featured-card-wrap
.player-top
> div:first-child
> .card-overall-label {
  display: block !important;

  margin-top: 7px !important;

  color: #2b2107 !important;

  font-size: 14px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;

  letter-spacing: .035em !important;
  text-align: left !important;
  text-transform: uppercase !important;

  opacity: 1 !important;
}

/* =========================================================
   MATCHPULSE
   CONSIGLI PLAYSTYLE
   ========================================================= */

.ps-recommendations-card {
  margin-bottom: 18px;
  padding: 16px;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 25px;

  background:
    radial-gradient(
      circle at top right,
      rgba(0,245,160,.14),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(0,0,0,.20)
    );

  box-shadow:
    0 18px 45px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.ps-recommendations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.ps-recommendations-header > div > span,
.ps-match-rec-header > div > span {
  display: block;
  margin-bottom: 4px;

  color: var(--green);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .15em;
}

.ps-recommendations-header h3,
.ps-match-rec-header h3 {
  margin: 0;

  color: #fff;
  font-size: 18px;
  letter-spacing: -.035em;
}

.ps-recommendations-header > strong,
.ps-match-rec-header > strong {
  color: var(--green);
  font-size: 27px;

  filter:
    drop-shadow(
      0 0 12px
      rgba(0,245,160,.38)
    );
}

.ps-recommendations-description {
  margin: 8px 0 14px;

  color: rgba(255,255,255,.60);
  font-size: 11px;
  line-height: 1.45;
}


/* LISTA ORIZZONTALE */

.ps-recommendations-scroll {
  display: flex;
  gap: 11px;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 2px 2px 8px;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ps-recommendations-scroll::-webkit-scrollbar {
  display: none;
}


/* SINGOLO CONSIGLIO */

.ps-recommendation-item {
  flex: 0 0 224px;
  min-width: 224px;

  padding: 13px;

  border: 1px solid rgba(255,255,255,.11);
  border-radius: 19px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(0,0,0,.22)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.07);
}

.ps-recommendation-top {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 10px;
}

.ps-recommendation-icon {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
}

.ps-recommendation-icon img {
  width: 40px;
  height: 40px;

  object-fit: contain;
  pointer-events: none;
}

.ps-recommendation-top span {
  display: block;

  color: var(--green);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .12em;
}

.ps-recommendation-top strong {
  display: block;
  margin-top: 3px;

  color: #fff;
  font-size: 13px;
  line-height: 1.15;
}

.ps-recommendation-item > p {
  min-height: 48px;
  margin: 11px 0;

  color: rgba(255,255,255,.62);
  font-size: 10px;
  line-height: 1.45;
}

.ps-recommendation-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
}

.ps-recommendation-actions button {
  min-height: 37px;
  padding: 8px 10px;

  border-radius: 12px;

  font-size: 10px;
  font-weight: 1000;
}

.ps-recommendation-open {
  border: 0;

  color: #031109;

  background:
    linear-gradient(
      135deg,
      var(--green),
      #b9ffd2
    );
}

.ps-recommendation-ignore {
  border: 1px solid rgba(255,255,255,.11);

  color: rgba(255,255,255,.68);
  background: rgba(255,255,255,.055);
}


/* STATO VUOTO */

.ps-recommendations-empty {
  padding: 14px;

  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 17px;

  background: rgba(0,0,0,.16);
}

.ps-recommendations-empty strong {
  display: block;

  color: #fff;
  font-size: 12px;
}

.ps-recommendations-empty p {
  margin: 5px 0 0;

  color: rgba(255,255,255,.54);
  font-size: 10px;
  line-height: 1.4;
}

.ps-restore-recommendations {
  width: 100%;
  margin-top: 10px;
  padding: 10px;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;

  color: rgba(255,255,255,.66);
  background: rgba(255,255,255,.045);

  font-size: 10px;
  font-weight: 900;
}


/* =========================================================
   CONSIGLI NEL DETTAGLIO PARTITA
   ========================================================= */

.ps-match-recommendations {
  margin-top: 12px;
  overflow: hidden;
}

.ps-match-rec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ps-match-rec-intro,
.ps-match-rec-empty {
  margin: 8px 0 13px;

  color: rgba(255,255,255,.58);
  font-size: 11px;
  line-height: 1.45;
}

.ps-match-rec-list {
  display: grid;
  gap: 8px;
}

.ps-match-rec-item {
  width: 100%;
  min-height: 64px;
  padding: 9px;

  display: grid;
  grid-template-columns: 46px 1fr 18px;
  align-items: center;
  gap: 10px;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 17px;

  color: inherit;
  text-align: left;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.075),
      rgba(0,0,0,.17)
    );
}

.ps-match-rec-item img {
  width: 44px;
  height: 44px;

  object-fit: contain;
  pointer-events: none;
}

.ps-match-rec-item span {
  min-width: 0;
}

.ps-match-rec-item strong {
  display: block;

  color: #fff;
  font-size: 12px;
}

.ps-match-rec-item small {
  display: block;
  margin-top: 3px;

  color: rgba(255,255,255,.53);
  font-size: 9px;
  line-height: 1.35;
}

.ps-match-rec-item > b {
  color: var(--green);
  font-size: 23px;
}


/* =========================================================
   SCORRIMENTO PLAYSTYLE FLUIDO
   ========================================================= */

.ps-category-scroll,
.ps-recommendations-scroll {
  position: relative;

  cursor: grab;
  user-select: none;

  overscroll-behavior-x: contain;

  scroll-behavior: auto !important;

  scroll-snap-type:
    x proximity;

  touch-action:
    pan-x pan-y pinch-zoom;

  will-change:
    scroll-position;

  -webkit-user-select: none;
  -webkit-overflow-scrolling: touch;
}

.ps-category-scroll.is-dragging,
.ps-recommendations-scroll.is-dragging {
  cursor: grabbing;

  scroll-snap-type: none;
}

.ps-category-scroll .ps-item,
.ps-recommendations-scroll
.ps-recommendation-item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.ps-category-scroll img,
.ps-recommendations-scroll img {
  pointer-events: none;

  user-select: none;

  -webkit-user-select: none;
  -webkit-user-drag: none;
}


/*
  Mentre trasciniamo col mouse,
  impediamo selezioni accidentali.
*/

.ps-category-scroll.is-dragging *,
.ps-recommendations-scroll.is-dragging * {
  pointer-events: none;
}


/* Effetto leggero al passaggio del mouse */

@media (hover: hover) {
  .ps-item,
  .ps-recommendation-item {
    transition:
      transform .16s ease,
      border-color .16s ease,
      background .16s ease;
  }

  .ps-item:hover,
  .ps-recommendation-item:hover {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.19);
  }

  .ps-category-scroll.is-dragging
  .ps-item:hover,
  .ps-recommendations-scroll.is-dragging
  .ps-recommendation-item:hover {
    transform: none;
  }
}

/* =========================================================
   MATCHPULSE - STORICO PARTITE NUOVO
   ========================================================= */

.history-page-header {
  margin-bottom: 16px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.history-page-header > div > span {
  display: block;
  margin-bottom: 5px;

  color: var(--green);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .16em;
}

.history-page-header h2 {
  margin: 0;
}

.history-page-header p {
  max-width: 32ch;
  margin: 7px 0 0;

  color: rgba(255,255,255,.58);
  font-size: 11px;
  line-height: 1.45;
}

.history-page-header > strong {
  min-width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(0,245,160,.25);
  border-radius: 16px;

  color: var(--green);
  background: rgba(0,245,160,.10);

  font-size: 20px;
  font-weight: 1000;
}


/* LISTA PARTITE */

.history-match-list {
  gap: 12px;
}

.history-match-card {
  padding: 15px;
  cursor: pointer;
  overflow: hidden;
}

.history-match-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.history-match-date {
  color: var(--green);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.history-match-top h3 {
  margin: 4px 0 0;

  color: #fff;
  font-size: 18px;
  letter-spacing: -.04em;
}

.history-match-top small {
  display: block;
  margin-top: 4px;

  color: rgba(255,255,255,.48);
  font-size: 10px;
}

.history-outcome {
  flex: 0 0 auto;

  padding: 7px 9px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 1000;
  text-transform: uppercase;
}

.history-outcome.win {
  border: 1px solid rgba(0,245,160,.35);
  color: #aaffd0;
  background: rgba(0,245,160,.13);
}

.history-outcome.draw {
  border: 1px solid rgba(255,214,102,.34);
  color: #ffe49b;
  background: rgba(255,214,102,.12);
}

.history-outcome.loss {
  border: 1px solid rgba(255,102,102,.34);
  color: #ffb0b0;
  background: rgba(255,102,102,.12);
}

.history-match-summary {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 7px;
  margin-top: 14px;
}

.history-match-summary > div,
.history-detail-main-stats > div {
  min-width: 0;
  padding: 9px 5px;

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;

  background: rgba(0,0,0,.20);
  text-align: center;
}

.history-match-summary span,
.history-detail-main-stats span {
  display: block;

  color: rgba(255,255,255,.46);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .09em;
}

.history-match-summary strong,
.history-detail-main-stats strong {
  display: block;
  margin-top: 4px;

  overflow: hidden;
  text-overflow: ellipsis;

  color: #fff;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

.history-match-open {
  margin-top: 11px;
  padding-top: 10px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  border-top: 1px solid rgba(255,255,255,.08);

  color: rgba(255,255,255,.55);
  font-size: 10px;
  font-weight: 900;
}

.history-match-open b {
  color: var(--green);
  font-size: 20px;
}


/* DETTAGLIO */

.history-detail-hero {
  margin-bottom: 12px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.history-detail-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.history-back-btn {
  width: 38px;
  height: 38px;

  flex: 0 0 auto;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;

  color: #fff;
  background: rgba(255,255,255,.055);

  font-size: 18px;
}

.history-detail-heading span {
  display: block;

  color: var(--green);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.history-detail-heading h2 {
  margin: 4px 0 0;
  font-size: 21px;
}

.history-detail-heading small {
  display: block;
  margin-top: 4px;

  color: rgba(255,255,255,.48);
  font-size: 10px;
}

.history-detail-main-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 8px;
  margin-bottom: 12px;
}


/* AUTOVALUTAZIONI */

.history-self-card,
.history-notes-card {
  margin-bottom: 12px;
}

.history-section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  gap: 12px;
  margin-bottom: 13px;
}

.history-section-title span {
  display: block;

  color: var(--green);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: .14em;
}

.history-section-title h3 {
  margin: 3px 0 0;

  color: #fff;
  font-size: 16px;
}

.history-section-title > strong {
  font-size: 23px;
}

.history-self-list {
  display: grid;
  gap: 9px;
}

.history-self-rating {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
}

.history-self-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;

  background: rgba(0,0,0,.22);
  font-size: 16px;
}

.history-self-content {
  min-width: 0;
}

.history-self-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.history-self-head strong {
  color: rgba(255,255,255,.78);
  font-size: 10px;
}

.history-self-head b {
  color: #fff;
  font-size: 12px;
}

.history-self-track {
  height: 6px;
  margin-top: 6px;

  overflow: hidden;

  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.history-self-track i {
  display: block;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--green),
      var(--green-2)
    );

  box-shadow:
    0 0 12px rgba(0,245,160,.25);
}

.history-notes-card p {
  margin: 0;

  color: rgba(255,255,255,.68);
  font-size: 12px;
  line-height: 1.55;
}

.history-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;

  margin-top: 12px;
  margin-bottom: 15px;
}

.history-empty strong {
  display: block;
  color: #fff;
}

.history-empty p {
  margin: 5px 0 0;
  color: rgba(255,255,255,.54);
}

/* Pulsanti consigli PlayStyle sempre cliccabili */

.ps-recommendation-actions {
  position: relative;
  z-index: 10;
}

.ps-recommendation-actions button {
  position: relative;
  z-index: 11;

  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
}

/* =========================================================
   MATCHPULSE CLUB ONLINE
   INCOLLA ALLA FINE DI style.css
   ========================================================= */

.mp-club-page {
  padding-bottom: 110px;
}

.mp-club-eyebrow {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ff7a00;
}

.mp-club-page-head {
  align-items: center;
}

.mp-club-page-head h2 {
  margin: 0;
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1;
  text-transform: uppercase;
}

.mp-club-page-head p {
  max-width: 520px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.65);
}

.mp-club-head-icon {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(255, 122, 0, 0.4);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 122, 0, 0.18),
      rgba(255, 255, 255, 0.02)
    );
  color: #ff8a1f;
  font-size: 19px;
  font-weight: 1000;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28);
}

.mp-club-entry-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.mp-club-entry-card {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  padding: 26px;
  border:
    1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 122, 0, 0.17),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(25, 28, 34, 0.97),
      rgba(10, 12, 16, 0.98)
    );
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.3);
}

.mp-club-entry-number {
  position: absolute;
  top: 10px;
  right: 19px;
  color: rgba(255, 255, 255, 0.045);
  font-size: 90px;
  font-weight: 1000;
  line-height: 1;
}

.mp-club-entry-copy {
  position: relative;
  z-index: 1;
}

.mp-club-entry-copy > span {
  display: block;
  margin-bottom: 8px;
  color: #ff7a00;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.7px;
}

.mp-club-entry-copy h3 {
  margin: 0;
  color: #fff;
  font-size: 27px;
  text-transform: uppercase;
}

.mp-club-entry-copy p {
  min-height: 64px;
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.55;
}

.mp-club-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  margin-top: 32px;
}

.mp-club-form label {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.mp-club-form input {
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
  border:
    1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  outline: none;
  background: rgba(0, 0, 0, 0.26);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  padding: 0 16px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.mp-club-form input:focus {
  border-color: rgba(255, 122, 0, 0.8);
  box-shadow:
    0 0 0 4px rgba(255, 122, 0, 0.1);
}

.mp-club-form input::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.mp-club-code-input {
  letter-spacing: 6px;
  text-align: center;
  text-transform: uppercase;
  font-size: 22px !important;
}

.mp-club-form button:disabled {
  cursor: wait;
  opacity: 0.6;
}

.mp-club-info-strip {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.mp-club-info-strip > div {
  display: flex;
  min-height: 76px;
  align-items: center;
  gap: 13px;
  padding: 14px 17px;
  border:
    1px solid rgba(255, 255, 255, 0.08);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.035);
}

.mp-club-info-strip strong {
  color: #ff7a00;
  font-size: 21px;
}

.mp-club-info-strip span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
}


/* Dashboard Club */

.mp-club-dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  padding: 28px;
  border:
    1px solid rgba(255, 122, 0, 0.2);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 82% 10%,
      rgba(255, 122, 0, 0.22),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #1d2027,
      #090b0f
    );
  box-shadow:
    0 25px 80px rgba(0, 0, 0, 0.34);
}

.mp-club-dashboard-copy h2 {
  margin: 0;
  max-width: 660px;
  color: #fff;
  font-size: clamp(30px, 7vw, 54px);
  line-height: 0.95;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.mp-club-code-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.mp-club-code-row > span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.mp-club-code-row > strong {
  color: #fff;
  font-size: 20px;
  letter-spacing: 5px;
}

.mp-club-code-row button {
  min-height: 36px;
  padding: 0 14px;
  border:
    1px solid rgba(255, 122, 0, 0.45);
  border-radius: 11px;
  background: rgba(255, 122, 0, 0.12);
  color: #ff932e;
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
}

.mp-club-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.mp-club-dashboard-actions button {
  min-height: 42px;
  padding: 0 17px;
  border-radius: 13px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.mp-club-refresh-btn {
  border:
    1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.mp-club-leave-btn {
  border:
    1px solid rgba(255, 73, 73, 0.32);
  background: rgba(255, 73, 73, 0.09);
  color: #ff7c7c;
}

.mp-club-summary {
  display: grid;
  grid-template-columns:
    0.7fr 0.9fr 1.4fr;
  gap: 12px;
  margin-top: 15px;
}

.mp-club-summary > div {
  display: flex;
  min-height: 82px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 15px 18px;
  border:
    1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.035);
}

.mp-club-summary span {
  color: rgba(255, 255, 255, 0.43);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.3px;
}

.mp-club-summary strong {
  color: #fff;
  font-size: 18px;
}


/* Rosa */

.mp-club-roster-section {
  margin-top: 27px;
}

.mp-club-roster-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}

.mp-club-roster-head span {
  color: #ff7a00;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.mp-club-roster-head h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 26px;
  text-transform: uppercase;
}

.mp-club-roster-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.47);
  font-size: 12px;
}

.mp-club-members-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(220px, 1fr)
    );
  gap: 15px;
}

.mp-club-member-card {
  position: relative;
  overflow: hidden;
  min-height: 350px;
  padding: 18px;
  border: 1px solid transparent;
  border-radius: 24px;
  color: #fff;
  cursor: pointer;
  text-align: left;
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}

.mp-club-member-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.3);
}

.mp-club-tier-bronze {
  background:
    radial-gradient(
      circle at 75% 12%,
      rgba(255, 225, 190, 0.22),
      transparent 31%
    ),
    linear-gradient(
      150deg,
      #8d5635,
      #382116
    );
}

.mp-club-tier-silver {
  background:
    radial-gradient(
      circle at 75% 12%,
      rgba(255, 255, 255, 0.26),
      transparent 31%
    ),
    linear-gradient(
      150deg,
      #75808c,
      #252c33
    );
}

.mp-club-tier-gold {
  background:
    radial-gradient(
      circle at 75% 12%,
      rgba(255, 247, 184, 0.28),
      transparent 31%
    ),
    linear-gradient(
      150deg,
      #aa8128,
      #3f2e08
    );
}

.mp-club-tier-icon {
  background:
    radial-gradient(
      circle at 75% 12%,
      rgba(255, 168, 63, 0.33),
      transparent 31%
    ),
    linear-gradient(
      150deg,
      #5d3828,
      #15100e 58%,
      #402517
    );
}

.mp-club-member-top {
  display: flex;
  min-height: 56px;
  align-items: flex-start;
  gap: 9px;
}

.mp-club-member-ovr {
  display: flex;
  flex-direction: column;
}

.mp-club-member-ovr strong {
  font-size: 33px;
  line-height: 0.9;
}

.mp-club-member-ovr span {
  margin-top: 4px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.mp-club-member-role {
  margin-top: 3px;
  padding: 5px 8px;
  border:
    1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
  font-size: 10px;
  font-weight: 1000;
}

.mp-club-founder {
  margin-left: auto;
  padding: 5px 7px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.6px;
}

.mp-club-member-avatar {
  display: grid;
  width: 90px;
  height: 90px;
  margin: 18px auto 13px;
  place-items: center;
  border:
    2px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  font-size: 29px;
  font-weight: 1000;
  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, 0.06);
}

.mp-club-member-name {
  overflow: hidden;
  min-height: 24px;
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mp-club-member-mini-stats {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 17px;
}

.mp-club-member-mini-stats span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 2px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.15);
  font-size: 7px;
  font-weight: 900;
}

.mp-club-member-mini-stats b {
  font-size: 15px;
}

.mp-club-member-open {
  margin-top: 15px;
  padding-top: 11px;
  border-top:
    1px solid rgba(255, 255, 255, 0.15);
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 1.3px;
  text-align: center;
}


/* Profilo membro */

body.mp-club-modal-open {
  overflow: hidden;
}

.mp-club-profile-backdrop {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: grid;
  overflow-y: auto;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(12px);
}

.mp-club-profile-modal {
  position: relative;
  width: min(920px, 100%);
  margin: auto;
  padding: 25px;
  border:
    1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  background:
    linear-gradient(
      145deg,
      #171a20,
      #090b0e
    );
  box-shadow:
    0 35px 110px rgba(0, 0, 0, 0.68);
}

.mp-club-profile-close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border:
    1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  cursor: pointer;
  font-size: 25px;
}

.mp-club-profile-head {
  display: grid;
  grid-template-columns:
    minmax(245px, 0.75fr)
    minmax(0, 1.25fr);
  gap: 24px;
}

.mp-club-profile-card {
  min-height: 410px;
  padding: 22px;
  border-radius: 26px;
  color: #fff;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.35);
}

.mp-club-profile-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mp-club-profile-rating strong {
  font-size: 45px;
  line-height: 0.9;
}

.mp-club-profile-rating span {
  margin-top: 4px;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 1px;
}

.mp-club-profile-role {
  display: inline-flex;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.16);
  font-size: 12px;
  font-weight: 1000;
}

.mp-club-profile-avatar {
  display: grid;
  width: 112px;
  height: 112px;
  margin: 24px auto 14px;
  place-items: center;
  border:
    2px solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  font-size: 36px;
  font-weight: 1000;
}

.mp-club-profile-card h3 {
  overflow: hidden;
  margin: 0;
  font-size: 21px;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mp-club-profile-stats {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.mp-club-profile-stats > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
}

.mp-club-profile-stats strong {
  font-size: 18px;
}

.mp-club-profile-stats span {
  font-size: 8px;
  font-weight: 900;
}

.mp-club-profile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 5px;
}

.mp-club-profile-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.mp-club-profile-title span {
  color: #ff7a00;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.mp-club-profile-title h2 {
  margin: 6px 0 0;
  color: #fff;
  font-size: clamp(27px, 5vw, 43px);
  line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.mp-club-founder-large {
  margin-right: 40px;
  padding: 7px 10px;
  border:
    1px solid rgba(255, 122, 0, 0.35);
  border-radius: 9px;
  background: rgba(255, 122, 0, 0.1);
  color: #ff9029;
  font-size: 8px;
  letter-spacing: 0.8px;
}

.mp-club-profile-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 25px;
}

.mp-club-profile-details > div,
.mp-club-star-details > div {
  display: flex;
  min-height: 67px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 13px 15px;
  border:
    1px solid rgba(255, 255, 255, 0.075);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
}

.mp-club-profile-details span,
.mp-club-star-details > div > span {
  color: rgba(255, 255, 255, 0.43);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.mp-club-profile-details strong {
  color: #fff;
  font-size: 15px;
}

.mp-club-star-details {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.mp-club-stars-active {
  color: #ffad32;
  letter-spacing: 2px;
}

.mp-club-stars-empty {
  color: rgba(255, 255, 255, 0.16);
  letter-spacing: 2px;
}

.mp-club-last-update {
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}

.mp-club-last-update strong {
  color: rgba(255, 255, 255, 0.78);
}

.mp-club-profile-ps-section {
  margin-top: 24px;
  padding-top: 22px;
  border-top:
    1px solid rgba(255, 255, 255, 0.08);
}

.mp-club-profile-section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.mp-club-profile-section-title span {
  color: #ff7a00;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.mp-club-profile-section-title h3 {
  margin: 4px 0 0;
  color: #fff;
  font-size: 26px;
  text-transform: uppercase;
}

.mp-club-profile-section-title > strong {
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 122, 0, 0.12);
  color: #ff8f25;
}

.mp-club-ps-group {
  margin-top: 21px;
}

.mp-club-ps-group h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
}

.mp-club-ps-group h4 span {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 10px;
}

.mp-club-ps-grid {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(195px, 1fr)
    );
  gap: 10px;
}

.mp-club-ps-item {
  display: flex;
  min-height: 69px;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border:
    1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
}

.mp-club-ps-item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.mp-club-ps-item div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.mp-club-ps-item strong {
  overflow: hidden;
  color: #fff;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-club-ps-item span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.7px;
}

.mp-club-ps-normal span {
  color: #bfc8d2;
}

.mp-club-ps-plus {
  border-color:
    rgba(255, 174, 49, 0.25);
  background:
    rgba(255, 145, 0, 0.07);
}

.mp-club-ps-plus span {
  color: #ffad32;
}


/* Stati caricamento ed errore */

.mp-club-loading,
.mp-club-error,
.mp-club-empty {
  display: flex;
  min-height: 340px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 30px;
  border:
    1px solid rgba(255, 255, 255, 0.08);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.025);
  color: #fff;
  text-align: center;
}

.mp-club-loading span,
.mp-club-error p {
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
}

.mp-club-loading-ball {
  width: 42px;
  height: 42px;
  margin-bottom: 6px;
  border:
    4px solid rgba(255, 255, 255, 0.08);
  border-top-color: #ff7a00;
  border-radius: 50%;
  animation:
    mpClubSpin 0.85s linear infinite;
}

.mp-club-empty {
  grid-column: 1 / -1;
  min-height: 180px;
}

.mp-club-empty-small {
  grid-column: 1 / -1;
  padding: 17px;
  border:
    1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}

@keyframes mpClubSpin {
  to {
    transform: rotate(360deg);
  }
}


/* Responsive */

@media (max-width: 720px) {
  .mp-club-entry-grid {
    grid-template-columns: 1fr;
  }

  .mp-club-entry-card {
    min-height: auto;
  }

  .mp-club-entry-copy p {
    min-height: auto;
  }

  .mp-club-info-strip {
    grid-template-columns: 1fr;
  }

  .mp-club-dashboard-head {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }

  .mp-club-dashboard-actions {
    width: 100%;
    justify-content: stretch;
  }

  .mp-club-dashboard-actions button {
    flex: 1;
  }

  .mp-club-summary {
    grid-template-columns: 1fr;
  }

  .mp-club-roster-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .mp-club-members-grid {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(165px, 1fr)
      );
  }

  .mp-club-member-card {
    min-height: 330px;
    padding: 14px;
  }

  .mp-club-member-mini-stats {
    gap: 5px;
  }

  .mp-club-profile-backdrop {
    align-items: flex-start;
    padding: 10px;
  }

  .mp-club-profile-modal {
    padding: 16px;
    border-radius: 23px;
  }

  .mp-club-profile-head {
    grid-template-columns: 1fr;
  }

  .mp-club-profile-card {
    width: min(310px, 100%);
    min-height: 390px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .mp-club-profile-info {
    padding: 5px 0;
  }

  .mp-club-profile-title {
    padding-right: 40px;
  }

  .mp-club-founder-large {
    display: none;
  }

  .mp-club-profile-details,
  .mp-club-star-details {
    grid-template-columns: 1fr;
  }

  .mp-club-ps-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MATCHPULSE
   FOTO CLUB + STELLE ABILITÀ
   ========================================================= */


/* Sezione stelle nel profilo */

.mp-profile-star-section {
  margin: 22px 0;
  padding: 20px;
  border:
    1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 174, 49, 0.1),
      rgba(255, 255, 255, 0.025)
    );
}

.mp-profile-star-title span {
  color: #ff9c28;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.mp-profile-star-title h3 {
  margin: 5px 0 0;
  color: #fff;
  font-size: 22px;
  text-transform: uppercase;
}

.mp-profile-star-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 17px;
}

.mp-profile-star-field {
  padding: 15px;
  border:
    1px solid rgba(255, 255, 255, 0.09);
  border-radius: 17px;
  background: rgba(0, 0, 0, 0.2);
}

.mp-profile-star-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mp-profile-star-head label {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.mp-profile-star-head strong {
  color: #ffad32;
  font-size: 13px;
}

.mp-profile-star-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 11px;
}

.mp-profile-star-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.17);
  cursor: pointer;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1;
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.mp-profile-star-button:hover {
  transform: translateY(-2px);
}

.mp-profile-star-button.is-active {
  color: #ffad32;
  filter:
    drop-shadow(
      0 3px 7px
      rgba(255, 153, 0, 0.3)
    );
}


/* Stelle sulla carta principale */

.mp-card-ability-stars {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: -4px 0 10px;
}

.mp-card-ability-stars > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 5px;
  border:
    1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.mp-card-ability-stars > div > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.7px;
  text-align: center;
}

.mp-card-ability-stars strong {
  display: flex;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.mp-ability-stars-on {
  color: #ffcf4b;
  letter-spacing: 1px;
  text-shadow:
    0 3px 7px
    rgba(0, 0, 0, 0.35);
}

.mp-ability-stars-off {
  color: rgba(255, 255, 255, 0.16);
  letter-spacing: 1px;
}


/* Foto vere nella rosa Club */

.mp-club-member-avatar,
.mp-club-profile-avatar {
  overflow: hidden;
}

.mp-club-member-avatar img,
.mp-club-profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}

.mp-club-member-avatar img {
  border-radius: 50%;
}

.mp-club-profile-avatar img {
  border-radius: 50%;
}


/* Mobile */

@media (max-width: 620px) {
  .mp-profile-star-grid {
    grid-template-columns: 1fr;
  }

  .mp-profile-star-button {
    font-size: 31px;
  }

  .mp-card-ability-stars {
    gap: 4px;
  }

  .mp-card-ability-stars > div {
    padding: 5px 3px;
  }

  .mp-card-ability-stars strong {
    font-size: 10px;
  }
}

/* =========================================================
   MATCHPULSE PATCH V2
   BADGE PREMIUM + STELLE UNITE + FOTO CLUB
   ========================================================= */


/* Nasconde il vecchio blocco poco integrato */

.mp-card-ability-stars {
  display: none !important;
}


/* =========================================================
   BADGE ABILITÀ SULLA CARTA
   ========================================================= */

.mp-card-premium-features {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: calc(100% - 30px);
  box-sizing: border-box;
  margin: 9px auto 11px;
  padding: 5px;
  border:
    1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background:
    linear-gradient(
      135deg,
      rgba(24, 13, 8, 0.87),
      rgba(68, 35, 17, 0.76)
    );
  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.18),
    0 7px 18px
      rgba(45, 19, 5, 0.26);
  backdrop-filter: blur(7px);
}

.mp-card-feature {
  position: relative;
  display: grid;
  grid-template-columns:
    28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 6px;
  border-radius: 10px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.11),
      rgba(255, 255, 255, 0.025)
    );
}

.mp-card-feature-code {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border:
    1px solid rgba(255, 210, 137, 0.42);
  border-radius: 9px;
  background:
    radial-gradient(
      circle at 35% 25%,
      #ffcf75,
      #bb701f 55%,
      #653311
    );
  color: #321708;
  font-size: 8px;
  font-weight: 1000;
  box-shadow:
    inset 0 1px 2px
      rgba(255, 255, 255, 0.54),
    0 4px 8px
      rgba(0, 0, 0, 0.24);
}

.mp-card-feature-main {
  display: grid;
  min-width: 0;
  grid-template-columns:
    minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 4px;
}

.mp-card-feature-main > span {
  overflow: hidden;
  color: rgba(255, 239, 210, 0.76);
  font-size: 5.7px;
  font-weight: 1000;
  letter-spacing: 0.45px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-card-feature-value {
  display: flex;
  align-items: center;
  gap: 1px;
}

.mp-card-feature-value strong {
  color: #fff7df;
  font-size: 16px;
  font-weight: 1000;
  line-height: 1;
}

.mp-card-feature-value b {
  color: #ffc34d;
  font-size: 10px;
  line-height: 1;
  filter:
    drop-shadow(
      0 2px 3px
      rgba(255, 166, 31, 0.32)
    );
}

.mp-card-feature-meter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  gap: 2px;
  margin-top: 4px;
}

.mp-card-feature-meter i {
  display: block;
  height: 3px;
  border-radius: 99px;
  background:
    rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 1px
      rgba(0, 0, 0, 0.2);
}

.mp-card-feature-meter i.is-active {
  background:
    linear-gradient(
      90deg,
      #e28d24,
      #ffd979
    );
  box-shadow:
    0 0 4px
      rgba(255, 183, 66, 0.5);
}


/* =========================================================
   STELLE UNITE NEL PROFILO CLUB
   ========================================================= */

.mp-club-star-details strong {
  display: block;
  min-width: 0;
}

.mp-club-unified-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  white-space: nowrap;
}

.mp-club-single-star {
  display: inline-block;
  width: 18px;
  color: rgba(255, 255, 255, 0.16);
  font-size: 20px;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 2px 5px
      rgba(0, 0, 0, 0.32);
}

.mp-club-single-star.is-active {
  color: #ffab2e;
  filter:
    drop-shadow(
      0 2px 5px
      rgba(255, 142, 24, 0.35)
    );
}


/* I vecchi due gruppi non servono più */

.mp-club-stars-active,
.mp-club-stars-empty {
  letter-spacing: 0 !important;
}


/* =========================================================
   FOTO PIÙ IMPORTANTE NEL CLUB
   ========================================================= */

.mp-club-member-avatar {
  width: 96px;
  height: 108px;
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.13),
      rgba(0, 0, 0, 0.2)
    );
}

.mp-club-member-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 19px;
  object-fit: cover;
}

.mp-club-profile-avatar {
  width: 145px;
  height: 155px;
  margin-top: 18px;
  border-radius: 26px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.14),
      rgba(0, 0, 0, 0.22)
    );
  box-shadow:
    0 15px 30px
      rgba(0, 0, 0, 0.24);
}

.mp-club-profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 23px;
  object-fit: cover;
}


/* Mobile */

@media (max-width: 620px) {
  .mp-card-premium-features {
    width: calc(100% - 24px);
    gap: 4px;
  }

  .mp-card-feature {
    grid-template-columns:
      25px minmax(0, 1fr);
    gap: 4px;
    padding: 5px;
  }

  .mp-card-feature-code {
    width: 25px;
    height: 25px;
  }

  .mp-card-feature-value strong {
    font-size: 14px;
  }

  .mp-club-single-star {
    width: 17px;
    font-size: 19px;
  }
}

/* =========================================================
   MATCHPULSE - RIPRISTINO STELLE CARTA
   ========================================================= */

/* Nasconde definitivamente il blocco WF / SM marrone */

.mp-card-premium-features {
  display: none !important;
}


/* Ripristina il vecchio blocco con le stelle */

.mp-card-ability-stars {
  position: relative;
  z-index: 5;
  display: grid !important;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: -4px 0 10px;
}

.mp-card-ability-stars > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 5px;
  border:
    1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.mp-card-ability-stars > div > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.7px;
  text-align: center;
}

.mp-card-ability-stars strong {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}

.mp-ability-stars-on {
  color: #ffcf4b;
  letter-spacing: 1px;
  text-shadow:
    0 3px 7px rgba(0, 0, 0, 0.35);
}

.mp-ability-stars-off {
  color: rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

/* =========================================================
   STELLE PROFILO CLUB TUTTE UNITE
   ========================================================= */

.mp-club-unified-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

.mp-club-single-star {
  display: inline-block;
  width: auto;
  color: rgba(255, 255, 255, 0.16);
  font-size: 21px;
  line-height: 1;
}

.mp-club-single-star.is-active {
  color: #ffab2e;
  filter:
    drop-shadow(
      0 2px 4px rgba(255, 142, 24, 0.35)
    );
}

.mp-club-star-details strong {
  display: inline-flex;
  align-items: center;
}


/* Evita spazi visivi tra i vecchi gruppi */

.mp-club-stars-active,
.mp-club-stars-empty {
  display: inline;
  letter-spacing: 1px !important;
}

/* =========================================================
   MATCHPULSE - STELLE VISIBILI SU OGNI RARITÀ
   ========================================================= */

/* BRONZO */

.player-card.card-bronze
.mp-ability-stars-on {
  color: #fff0c2;
  text-shadow:
    0 1px 2px rgba(60, 24, 5, 0.75);
}

.player-card.card-bronze
.mp-ability-stars-off {
  color: rgba(72, 30, 8, 0.3);
}


/* ARGENTO */

.player-card.card-silver
.mp-ability-stars-on {
  color: #17212a;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4);
}

.player-card.card-silver
.mp-ability-stars-off {
  color: rgba(23, 33, 42, 0.22);
}


/* ORO */

.player-card.card-gold
.mp-ability-stars-on {
  color: #321b08;
  text-shadow:
    0 1px 0 rgba(255, 248, 213, 0.55);
}

.player-card.card-gold
.mp-ability-stars-off {
  color: rgba(50, 27, 8, 0.22);
}

.player-card.card-gold
.mp-card-ability-stars > div > span {
  color: #39200c;
}

.player-card.card-gold
.mp-card-ability-stars > div {
  border-color: rgba(62, 32, 8, 0.26);
  background: rgba(255, 255, 255, 0.17);
}


/* ICONA / SPECIALE */

.player-card.card-icon
.mp-ability-stars-on,
.player-card.card-special
.mp-ability-stars-on {
  color: #fff1bd;
  text-shadow:
    0 0 5px rgba(255, 195, 72, 0.55),
    0 2px 3px rgba(0, 0, 0, 0.55);
}

.player-card.card-icon
.mp-ability-stars-off,
.player-card.card-special
.mp-ability-stars-off {
  color: rgba(255, 241, 189, 0.2);
}

/* =========================================================
   MATCHPULSE
   PULSANTE RIMUOVI MEMBRO
   ========================================================= */

.mp-club-kick-member {
  position: absolute;
  z-index: 20;
  top: 70px;
  right: 13px;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 5px;
  padding: 0 9px 0 6px;
  border:
    1px solid rgba(255, 105, 105, 0.45);
  border-radius: 999px;
  background:
    rgba(65, 8, 8, 0.72);
  color: #ffb0b0;
  cursor: pointer;
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.7px;
  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}

.mp-club-kick-member:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 120, 120, 0.8);
  background: rgba(112, 12, 12, 0.9);
  color: #fff;
}

.mp-club-kick-icon {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 100, 100, 0.18);
  font-size: 15px;
  line-height: 1;
}

@media (max-width: 620px) {
  .mp-club-kick-member {
    top: 65px;
    right: 9px;
    padding-right: 7px;
  }
}

/* =========================================================
   MATCHPULSE CLUB
   NUOVA PLAYER CARD
   ========================================================= */

.mp-club-members-grid {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(290px, 1fr)
    ) !important;
  gap: 22px !important;
}


/* =========================================================
   CARTA GENERALE
   ========================================================= */

.mp-club-showcase-card {
  --mp-card-a: #a8653d;
  --mp-card-b: #4d2718;
  --mp-card-ink: #fff8ef;
  --mp-card-soft: rgba(255, 255, 255, 0.72);
  --mp-card-panel: rgba(48, 18, 8, 0.26);
  --mp-card-line: rgba(255, 255, 255, 0.2);
  --mp-card-glow: rgba(255, 196, 125, 0.25);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 520px;
  box-sizing: border-box;
  padding: 24px 24px 29px;
  border: 0;
  clip-path:
    polygon(
      10% 0,
      90% 0,
      100% 7%,
      100% 91%,
      82% 97%,
      50% 100%,
      18% 97%,
      0 91%,
      0 7%
    );
  background:
    linear-gradient(
      145deg,
      var(--mp-card-a),
      var(--mp-card-b)
    ) !important;
  color: var(--mp-card-ink);
  cursor: pointer;
  filter:
    drop-shadow(
      0 24px 28px
      rgba(0, 0, 0, 0.36)
    );
  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}

.mp-club-showcase-card:hover {
  transform:
    translateY(-6px)
    scale(1.012);
  filter:
    drop-shadow(
      0 30px 35px
      rgba(0, 0, 0, 0.45)
    );
}

.mp-club-showcase-card:focus-visible {
  outline:
    3px solid #ff8a1f;
  outline-offset: 5px;
}

.mp-club-showcase-card::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    repeating-conic-gradient(
      from -18deg at 50% 36%,
      rgba(255, 255, 255, 0.13)
        0deg 7deg,
      transparent 7deg 15deg
    );
  opacity: 0.55;
}

.mp-club-showcase-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px;
  clip-path:
    polygon(
      10% 0,
      90% 0,
      100% 7%,
      100% 91%,
      82% 97%,
      50% 100%,
      18% 97%,
      0 91%,
      0 7%
    );
  border:
    1px solid
    rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.mp-club-showcase-shine {
  position: absolute;
  z-index: -1;
  top: -45%;
  left: -25%;
  width: 65%;
  height: 150%;
  transform: rotate(19deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.16),
      transparent
    );
  pointer-events: none;
}


/* =========================================================
   RARITÀ
   ========================================================= */

.mp-club-showcase-bronze {
  --mp-card-a: #c28159;
  --mp-card-b: #5b2c19;
  --mp-card-panel: rgba(61, 24, 9, 0.28);
  --mp-card-glow: rgba(255, 191, 127, 0.32);
}

.mp-club-showcase-silver {
  --mp-card-a: #dce4ea;
  --mp-card-b: #65717d;
  --mp-card-ink: #15212b;
  --mp-card-soft: rgba(21, 33, 43, 0.67);
  --mp-card-panel: rgba(255, 255, 255, 0.3);
  --mp-card-line: rgba(21, 33, 43, 0.22);
  --mp-card-glow: rgba(255, 255, 255, 0.45);
}

.mp-club-showcase-gold {
  --mp-card-a: #f5d36d;
  --mp-card-b: #9c6811;
  --mp-card-ink: #2d1a05;
  --mp-card-soft: rgba(45, 26, 5, 0.66);
  --mp-card-panel: rgba(255, 255, 255, 0.24);
  --mp-card-line: rgba(45, 26, 5, 0.23);
  --mp-card-glow: rgba(255, 242, 169, 0.55);
}

.mp-club-showcase-icon {
  --mp-card-a: #faf2db;
  --mp-card-b: #b99c65;
  --mp-card-ink: #321c12;
  --mp-card-soft: rgba(50, 28, 18, 0.67);
  --mp-card-panel: rgba(255, 255, 255, 0.3);
  --mp-card-line: rgba(79, 43, 22, 0.23);
  --mp-card-glow: rgba(255, 255, 255, 0.6);
}


/* =========================================================
   TESTATA
   ========================================================= */

.mp-club-showcase-top {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 59px;
  align-items: flex-start;
  gap: 9px;
}

.mp-club-showcase-rating {
  display: flex;
  flex-direction: column;
}

.mp-club-showcase-rating strong {
  font-size: 42px;
  font-weight: 1000;
  line-height: 0.84;
}

.mp-club-showcase-rating span {
  margin-top: 7px;
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 1px;
}

.mp-club-showcase-role {
  display: grid;
  min-width: 34px;
  height: 31px;
  place-items: center;
  border:
    1px solid var(--mp-card-line);
  border-radius: 10px;
  background: var(--mp-card-panel);
  font-size: 11px;
  font-weight: 1000;
}

.mp-club-showcase-tools {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 7px;
}

.mp-club-showcase-founder {
  padding: 6px 8px;
  border:
    1px solid var(--mp-card-line);
  border-radius: 999px;
  background: var(--mp-card-panel);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.7px;
}

.mp-club-showcase-kick {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border:
    1px solid
    rgba(255, 130, 130, 0.55);
  border-radius: 50%;
  background:
    rgba(95, 8, 8, 0.68);
  color: #ffd0d0;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.mp-club-showcase-kick:hover {
  background:
    rgba(155, 10, 10, 0.9);
  color: #fff;
}


/* =========================================================
   FOTO CENTRALE E RECORD
   ========================================================= */

.mp-club-showcase-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    62px minmax(120px, 1fr) 62px;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.mp-club-showcase-photo {
  position: relative;
  overflow: hidden;
  width: 132px;
  height: 148px;
  max-width: 100%;
  justify-self: center;
  border:
    3px solid
    rgba(255, 255, 255, 0.47);
  border-radius: 27px;
  background:
    rgba(0, 0, 0, 0.18);
  box-shadow:
    0 15px 28px
      rgba(0, 0, 0, 0.3),
    0 0 30px
      var(--mp-card-glow);
}

.mp-club-showcase-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
}

.mp-club-showcase-initials {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  font-size: 35px;
  font-weight: 1000;
}

.mp-club-showcase-wing {
  display: flex;
  min-height: 84px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border:
    1px solid var(--mp-card-line);
  background:
    linear-gradient(
      145deg,
      var(--mp-card-panel),
      rgba(0, 0, 0, 0.07)
    );
  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.13);
}

.mp-club-showcase-wing-left {
  border-radius:
    19px 8px 8px 19px;
}

.mp-club-showcase-wing-right {
  border-radius:
    8px 19px 19px 8px;
}

.mp-club-showcase-wing span {
  max-width: 56px;
  overflow: hidden;
  color: var(--mp-card-soft);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.7px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-club-showcase-wing strong {
  font-size: 28px;
  font-weight: 1000;
  line-height: 1;
}

.mp-club-showcase-wing.is-private {
  opacity: 0.68;
}

.mp-club-showcase-average {
  grid-column: 1 / -1;
  display: flex;
  min-height: 37px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: max-content;
  max-width: 92%;
  justify-self: center;
  margin-top: -8px;
  padding: 0 14px;
  border:
    1px solid var(--mp-card-line);
  border-radius: 999px;
  background: var(--mp-card-panel);
  box-shadow:
    0 8px 16px
      rgba(0, 0, 0, 0.18);
}

.mp-club-showcase-average span {
  color: var(--mp-card-soft);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.7px;
}

.mp-club-showcase-average strong {
  font-size: 18px;
  font-weight: 1000;
}

.mp-club-showcase-average small {
  font-size: 8px;
  font-weight: 900;
}

.mp-club-showcase-average.is-private {
  opacity: 0.68;
}


/* =========================================================
   NOME E ABILITÀ
   ========================================================= */

.mp-club-showcase-name {
  position: relative;
  z-index: 2;
  overflow: hidden;
  margin: 13px 0 0;
  padding: 9px 12px;
  border-top:
    1px solid var(--mp-card-line);
  border-bottom:
    1px solid var(--mp-card-line);
  font-size: 21px;
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mp-club-showcase-abilities {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.mp-club-showcase-abilities span {
  display: flex;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border:
    1px solid var(--mp-card-line);
  border-radius: 10px;
  background: var(--mp-card-panel);
  color: var(--mp-card-soft);
  font-size: 6px;
  font-weight: 1000;
  letter-spacing: 0.5px;
}

.mp-club-showcase-abilities strong {
  color: var(--mp-card-ink);
  font-size: 11px;
}


/* =========================================================
   STATISTICHE CARTA
   ========================================================= */

.mp-club-showcase-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.mp-club-showcase-stat {
  display: flex;
  min-height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 12px;
  background: var(--mp-card-panel);
  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.11);
}

.mp-club-showcase-stat strong {
  font-size: 20px;
  font-weight: 1000;
  line-height: 1;
}

.mp-club-showcase-stat span {
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.7px;
}

.mp-club-showcase-open {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 11px;
  border-top:
    1px solid var(--mp-card-line);
}

.mp-club-showcase-open span {
  color: var(--mp-card-soft);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: 0.8px;
}

.mp-club-showcase-open strong {
  font-size: 10px;
  letter-spacing: 1px;
}


/* =========================================================
   PULSANTE PRIVACY
   ========================================================= */

.mp-club-career-privacy {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 13px;
  cursor: pointer;
  font-size: 9px !important;
  font-weight: 1000;
  letter-spacing: 0.6px;
}

.mp-club-career-privacy span {
  margin-right: 5px;
}

.mp-club-career-privacy.is-public {
  border:
    1px solid
    rgba(91, 225, 143, 0.43);
  background:
    rgba(40, 165, 92, 0.13);
  color: #82efac;
}

.mp-club-career-privacy.is-private {
  border:
    1px solid
    rgba(255, 255, 255, 0.13);
  background:
    rgba(255, 255, 255, 0.06);
  color:
    rgba(255, 255, 255, 0.66);
}

.mp-club-career-privacy:disabled {
  cursor: wait;
  opacity: 0.55;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {
  .mp-club-members-grid {
    grid-template-columns:
      1fr !important;
  }

  .mp-club-showcase-card {
    width: min(365px, 100%);
    min-height: 505px;
    justify-self: center;
    padding:
      22px 20px 28px;
  }

  .mp-club-showcase-hero {
    grid-template-columns:
      57px minmax(115px, 1fr) 57px;
    gap: 6px;
  }

  .mp-club-showcase-photo {
    width: 125px;
    height: 142px;
  }

  .mp-club-showcase-wing strong {
    font-size: 24px;
  }

  .mp-club-career-privacy {
    width: 100%;
  }
}

/* =========================================================
   MATCHPULSE
   CARTA FIFA CLUB + NUOVA PAGINA STATISTICHE
   ========================================================= */


/* =========================================================
   CARTA FIFA NEL CLUB
   ========================================================= */

.mp-club-members-grid {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(350px, 1fr)
    ) !important;
  align-items: start;
  gap: 28px !important;
}

.mp-club-fifa-wrap {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  place-items: center;
  padding: 8px 0 20px;
}

.mp-club-fifa-wrap
.player-card {
  cursor: pointer;
  transform: none !important;
  transition:
    transform 0.22s ease,
    filter 0.22s ease !important;
}

.mp-club-fifa-wrap
.player-card:hover {
  transform:
    translateY(-6px)
    scale(1.015) !important;
  filter:
    drop-shadow(
      0 32px 38px
      rgba(0, 0, 0, 0.5)
    );
}

.mp-club-fifa-wrap
.player-photo-wrap {
  width: 150px !important;
  height: 160px !important;
}

.mp-club-fifa-wrap
.player-photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform-origin:
    center center !important;
}

.mp-club-fifa-initials {
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.22),
      rgba(0, 0, 0, 0.16)
    );
  color: #2b2107;
  font-size: 35px;
  font-weight: 1000;
}

.mp-club-fifa-initials.is-visible {
  display: grid;
}


/* Stelle integrate come nella Home */

.mp-club-fifa-wrap
.mp-club-fifa-abilities {
  display: grid !important;
}

.mp-club-fifa-wrap
.mp-club-fifa-abilities strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  white-space: nowrap;
}

.mp-club-fifa-star {
  color: rgba(43, 33, 7, 0.22);
  font-size: 12px;
  line-height: 1;
}

.mp-club-fifa-star.is-active {
  color: #2b2107;
  text-shadow:
    0 1px 0
    rgba(255, 255, 255, 0.35);
}

.mp-club-fifa-wrap
.card-icon
.mp-club-fifa-star.is-active {
  color: #765717;
}


/* Gol, assist e media sul lato destro */

.mp-club-fifa-career {
  position: absolute;
  z-index: 12;
  top: 174px;
  right: 35px;
  display: grid;
  width: 66px;
  gap: 6px;
}

.mp-club-fifa-career > div {
  display: flex;
  min-height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 5px;
  border:
    1px solid rgba(43, 33, 7, 0.14);
  border-radius: 10px;
  background:
    rgba(255, 255, 255, 0.16);
  color: #2b2107;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.mp-club-fifa-career span {
  font-size: 6px;
  font-weight: 1000;
  letter-spacing: 0.8px;
}

.mp-club-fifa-career strong {
  font-size: 14px;
  font-weight: 1000;
  line-height: 1;
}

.mp-club-fifa-career.is-private {
  opacity: 0.55;
}


/* Fondatore e rimozione membro */

.mp-club-fifa-founder {
  position: absolute;
  z-index: 20;
  top: 55px;
  right: 32px;
  padding: 5px 8px;
  border:
    1px solid rgba(43, 33, 7, 0.18);
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.2);
  color: #2b2107;
  font-size: 6px;
  font-weight: 1000;
  letter-spacing: 0.6px;
}

.mp-club-fifa-kick {
  position: absolute;
  z-index: 30;
  top: 53px;
  right: 30px;
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border:
    1px solid rgba(130, 15, 15, 0.35);
  border-radius: 50%;
  background:
    rgba(115, 12, 12, 0.82);
  color: #fff;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  box-shadow:
    0 8px 18px
    rgba(0, 0, 0, 0.25);
}

.mp-club-fifa-kick:hover {
  transform: scale(1.08);
  background: #a11111;
}

.mp-club-fifa-open {
  min-width: 180px;
  min-height: 38px;
  margin-top: -15px;
  border:
    1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background:
    rgba(0, 0, 0, 0.38);
  color: #fff;
  cursor: pointer;
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 1.3px;
  backdrop-filter: blur(12px);
}

.mp-club-fifa-open:hover {
  border-color:
    rgba(255, 145, 40, 0.6);
  background:
    rgba(255, 122, 0, 0.13);
}


/* =========================================================
   PAGINA STATISTICHE
   ========================================================= */

.mp-stats-page {
  padding-bottom: 120px;
}

.mp-stats-hero {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 190px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border:
    1px solid rgba(0, 245, 160, 0.2);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(0, 245, 160, 0.25),
      transparent 30%
    ),
    radial-gradient(
      circle at 8% 90%,
      rgba(0, 194, 255, 0.16),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      rgba(18, 30, 27, 0.97),
      rgba(4, 9, 8, 0.98)
    );
  box-shadow:
    0 28px 80px
    rgba(0, 0, 0, 0.38);
}

.mp-stats-hero::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -95px;
  width: 270px;
  height: 180px;
  border:
    2px solid
    rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.mp-stats-hero-copy {
  position: relative;
  z-index: 2;
}

.mp-stats-hero-copy > span,
.mp-stats-section-head span,
.mp-stats-panel-head > div > span,
.mp-stats-no-matches span,
.mp-stats-data-control > div > span {
  color: #00f5a0;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 1.7px;
}

.mp-stats-hero h2 {
  margin: 8px 0 0;
  color: #fff;
  font-size: clamp(32px, 7vw, 55px);
  line-height: 0.95;
  text-transform: uppercase;
}

.mp-stats-hero p {
  max-width: 510px;
  margin: 13px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.55;
}

.mp-stats-hero-rating {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 135px;
  min-height: 135px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border:
    1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  background:
    rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.1);
}

.mp-stats-hero-rating span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 1.2px;
}

.mp-stats-hero-rating strong {
  margin-top: 3px;
  color: #00f5a0;
  font-size: 48px;
  font-weight: 1000;
  line-height: 1;
}

.mp-stats-hero-rating small {
  max-width: 95px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 8px;
  text-align: center;
}


/* KPI principali */

.mp-stats-kpi-grid {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.mp-stats-kpi {
  position: relative;
  overflow: hidden;
  min-height: 125px;
  padding: 18px;
  border:
    1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.025)
    );
}

.mp-stats-kpi::after {
  content: "";
  position: absolute;
  top: -35px;
  right: -35px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(
    --mp-stats-accent,
    #00f5a0
  );
  opacity: 0.12;
  filter: blur(8px);
}

.mp-stats-kpi > span {
  color: rgba(255, 255, 255, 0.46);
  font-size: 8px;
  font-weight: 1000;
  letter-spacing: 1.3px;
}

.mp-stats-kpi strong {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-size: 37px;
  font-weight: 1000;
  line-height: 1;
}

.mp-stats-kpi small {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
}

.mp-stats-kpi.is-green {
  --mp-stats-accent: #00f5a0;
}

.mp-stats-kpi.is-orange {
  --mp-stats-accent: #ff8a1f;
}

.mp-stats-kpi.is-blue {
  --mp-stats-accent: #00c2ff;
}

.mp-stats-kpi.is-purple {
  --mp-stats-accent: #a46bff;
}


/* Grafici */

.mp-stats-trend-zone,
.mp-stats-recent {
  margin-top: 28px;
}

.mp-stats-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
}

.mp-stats-section-head h3 {
  margin: 5px 0 0;
  color: #fff;
  font-size: 27px;
  text-transform: uppercase;
}

.mp-stats-section-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.43);
  font-size: 11px;
}

.mp-stats-trend-grid {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.mp-stats-trend-grid
.trend-card {
  min-width: 0;
  border-radius: 23px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    );
}

.mp-stats-trend-grid
.trend-card:nth-child(1) {
  --trend-color: #00f5a0;
}

.mp-stats-trend-grid
.trend-card:nth-child(2) {
  --trend-color: #ff8a1f;
}

.mp-stats-trend-grid
.trend-card:nth-child(3) {
  --trend-color: #00c2ff;
}


/* Pannelli rendimento */

.mp-stats-dashboard-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 27px;
}

.mp-stats-panel {
  padding: 21px;
  border:
    1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.02)
    );
}

.mp-stats-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
}

.mp-stats-panel-head h3 {
  margin: 5px 0 0;
  color: #fff;
  font-size: 23px;
  text-transform: uppercase;
}

.mp-stats-panel-head > strong {
  color: #00f5a0;
  font-size: 31px;
}

.mp-stats-performance-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 20px;
}

.mp-stats-performance-grid > div {
  display: flex;
  min-height: 71px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 13px;
  border-radius: 16px;
  background:
    rgba(0, 0, 0, 0.2);
}

.mp-stats-performance-grid span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.mp-stats-performance-grid strong {
  color: #fff;
  font-size: 22px;
}

.mp-stats-results {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}

.mp-stats-results > div {
  display: flex;
  min-height: 75px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 16px;
  background:
    rgba(0, 0, 0, 0.2);
}

.mp-stats-results span {
  font-size: 7px;
  font-weight: 1000;
}

.mp-stats-results strong {
  color: #fff;
  font-size: 24px;
}

.mp-stats-results .win span {
  color: #00f5a0;
}

.mp-stats-results .draw span {
  color: #ffd05a;
}

.mp-stats-results .loss span {
  color: #ff6d6d;
}

.mp-stats-win-bar {
  overflow: hidden;
  height: 8px;
  margin-top: 18px;
  border-radius: 999px;
  background:
    rgba(255, 255, 255, 0.08);
}

.mp-stats-win-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #00c878,
      #00f5a0
    );
}

.mp-stats-win-copy {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
}


/* Ultime partite */

.mp-stats-recent-list {
  display: grid;
  gap: 9px;
}

.mp-stats-match {
  display: grid;
  grid-template-columns:
    minmax(140px, 1.35fr)
    auto
    45px
    minmax(190px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border:
    1px solid rgba(255, 255, 255, 0.075);
  border-radius: 18px;
  background:
    rgba(255, 255, 255, 0.035);
}

.mp-stats-match-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.mp-stats-match-main span {
  color: rgba(255, 255, 255, 0.4);
  font-size: 8px;
  font-weight: 800;
}

.mp-stats-match-main strong {
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-stats-outcome {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 1000;
}

.mp-stats-outcome.win {
  background: rgba(0, 245, 160, 0.12);
  color: #5fffc1;
}

.mp-stats-outcome.draw {
  background: rgba(255, 208, 90, 0.12);
  color: #ffe08b;
}

.mp-stats-outcome.loss {
  background: rgba(255, 90, 90, 0.12);
  color: #ff9292;
}

.mp-stats-outcome.neutral {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.58);
}

.mp-stats-match-role {
  display: grid;
  min-height: 34px;
  place-items: center;
  border-radius: 10px;
  background:
    rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 9px;
  font-weight: 1000;
}

.mp-stats-match-numbers {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.mp-stats-match-numbers span {
  display: flex;
  min-height: 45px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 11px;
  background:
    rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.42);
  font-size: 6px;
  font-weight: 1000;
}

.mp-stats-match-numbers strong {
  color: #fff;
  font-size: 16px;
}


/* Nessuna partita e gestione dati */

.mp-stats-no-matches {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-top: 24px;
  padding: 25px;
  border:
    1px dashed
    rgba(255, 255, 255, 0.13);
  border-radius: 25px;
  background:
    rgba(255, 255, 255, 0.025);
}

.mp-stats-no-matches h3 {
  margin: 7px 0 0;
  color: #fff;
  font-size: 24px;
  text-transform: uppercase;
}

.mp-stats-no-matches p {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 11px;
}

.mp-stats-trend-empty {
  margin-top: 25px;
}

.mp-stats-empty-graph {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  border-radius: 18px;
  background:
    linear-gradient(
      180deg,
      rgba(0, 245, 160, 0.07),
      rgba(0, 0, 0, 0.12)
    );
}

.mp-stats-empty-line {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 40%;
  height: 2px;
  transform: rotate(-4deg);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0, 245, 160, 0.6),
      transparent
    );
}

.mp-stats-empty-graph p {
  position: relative;
  z-index: 2;
  max-width: 280px;
  margin: 0;
  padding: 13px;
  border-radius: 14px;
  background:
    rgba(3, 10, 8, 0.75);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  text-align: center;
}

.mp-stats-data-control {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 25px;
  padding: 15px 18px;
  border:
    1px solid rgba(255, 90, 90, 0.12);
  border-radius: 18px;
  background:
    rgba(255, 90, 90, 0.035);
}

.mp-stats-data-control > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mp-stats-data-control strong {
  color: #fff;
  font-size: 13px;
}


/* Responsive */

@media (max-width: 850px) {
  .mp-stats-kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .mp-stats-trend-grid {
    grid-template-columns: 1fr;
  }

  .mp-stats-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .mp-club-members-grid {
    grid-template-columns:
      1fr !important;
  }

  .mp-club-fifa-wrap {
    overflow: visible;
  }

  .mp-club-fifa-wrap
  .player-card {
    width: min(
      330px,
      calc(100vw - 34px)
    ) !important;
  }

  .mp-stats-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }

  .mp-stats-hero-rating {
    width: 100%;
    min-height: 100px;
  }

  .mp-stats-kpi-grid {
    gap: 8px;
  }

  .mp-stats-kpi {
    min-height: 110px;
    padding: 15px;
  }

  .mp-stats-kpi strong {
    font-size: 31px;
  }

  .mp-stats-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .mp-stats-match {
    grid-template-columns:
      minmax(0, 1fr)
      auto
      38px;
  }

  .mp-stats-match-numbers {
    grid-column: 1 / -1;
  }

  .mp-stats-no-matches,
  .mp-stats-data-control {
    align-items: stretch;
    flex-direction: column;
  }

  .mp-stats-data-control button {
    width: 100%;
  }
}

/* =========================================================
   MATCHPULSE - FIX CARTA FIFA CLUB
   NIENTE SFONDO ARENA + DIMENSIONI CORRETTE
   ========================================================= */


/* La griglia contiene solo le carte, senza sfondi aggiuntivi */

.mp-club-members-grid {
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(330px, 1fr)
    ) !important;
  align-items: start !important;
  justify-items: center !important;
  gap: 28px !important;
}


/* Rimuove completamente lo sfondo ereditato dalla Home */

.mp-club-fifa-wrap,
.mp-club-fifa-wrap.featured-card-wrap {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  place-items: center !important;
  overflow: visible !important;

  margin: 0 !important;
  padding: 6px 0 18px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  filter: none !important;
}


/* Elimina eventuali decorazioni e immagini dello sfondo */

.mp-club-fifa-wrap::before,
.mp-club-fifa-wrap::after {
  display: none !important;
  content: none !important;
  background: none !important;
}


/* La carta mantiene le proporzioni della Home */

.mp-club-fifa-wrap .player-card,
.mp-club-fifa-wrap .mp-club-home-card {
  position: relative !important;
  width: 330px !important;
  max-width: calc(100vw - 42px) !important;
  min-width: 0 !important;

  margin: 0 auto !important;

  transform: none !important;
  transform-origin: top center !important;

  cursor: pointer !important;

  filter:
    drop-shadow(
      0 24px 28px
      rgba(0, 0, 0, 0.42)
    ) !important;

  transition:
    transform 0.2s ease,
    filter 0.2s ease !important;
}

.mp-club-fifa-wrap .player-card:hover {
  transform:
    translateY(-5px)
    scale(1.012) !important;

  filter:
    drop-shadow(
      0 30px 34px
      rgba(0, 0, 0, 0.5)
    ) !important;
}


/* Foto con le stesse proporzioni della carta Home */

.mp-club-fifa-wrap .player-photo-wrap {
  width: 168px !important;
  height: 160px !important;
}

.mp-club-fifa-wrap .player-photo {
  display: block !important;
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  transform-origin: center center !important;
}


/* =========================================================
   GOL, ASSIST E MEDIA SUL LATO DESTRO
   NON PIÙ SOPRA LA FOTO
   ========================================================= */

.mp-club-fifa-career {
  position: absolute !important;
  z-index: 15 !important;

  top: 179px !important;
  right: 24px !important;

  display: grid !important;
  width: 52px !important;
  gap: 5px !important;
}

.mp-club-fifa-career > div {
  display: flex !important;
  min-height: 32px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;

  box-sizing: border-box !important;
  padding: 4px 3px !important;

  border:
    1px solid rgba(43, 33, 7, 0.14) !important;
  border-radius: 9px !important;

  background:
    rgba(255, 255, 255, 0.22) !important;

  color: #2b2107 !important;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, 0.24) !important;

  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.mp-club-fifa-career span {
  color: #2b2107 !important;
  font-size: 5.5px !important;
  font-weight: 1000 !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
}

.mp-club-fifa-career strong {
  color: #2b2107 !important;
  font-size: 13px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}


/* Statistiche private più discrete */

.mp-club-fifa-career.is-private {
  opacity: 0.6 !important;
}


/* Pulsante esterno pulito */

.mp-club-fifa-open {
  position: relative !important;
  z-index: 5 !important;

  width: 210px !important;
  min-height: 38px !important;

  margin: -8px auto 0 !important;

  border:
    1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;

  background:
    rgba(8, 10, 12, 0.88) !important;

  color: #fff !important;

  box-shadow:
    0 12px 25px
    rgba(0, 0, 0, 0.32) !important;
}


/* =========================================================
   FIX PAGINA STATS SU TELEFONO
   EVITA ELEMENTI TAGLIATI A DESTRA
   ========================================================= */

.mp-stats-page,
.mp-stats-page * {
  box-sizing: border-box;
}

.mp-stats-hero,
.mp-stats-kpi-grid,
.mp-stats-dashboard-grid,
.mp-stats-trend-grid,
.mp-stats-recent-list {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 620px) {
  .mp-club-members-grid {
    grid-template-columns: 1fr !important;
  }

  .mp-club-fifa-wrap,
  .mp-club-fifa-wrap.featured-card-wrap {
    width: 100% !important;
    padding: 4px 0 17px !important;
  }

  .mp-club-fifa-wrap .player-card,
  .mp-club-fifa-wrap .mp-club-home-card {
    width: 320px !important;
    max-width: calc(100vw - 34px) !important;
  }

  .mp-club-fifa-career {
    top: 174px !important;
    right: 20px !important;
    width: 50px !important;
  }

  .mp-stats-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .mp-stats-hero-copy {
    min-width: 0 !important;
    width: 100% !important;
  }

  .mp-stats-hero h2 {
    max-width: 100% !important;
    font-size: clamp(38px, 12vw, 54px) !important;
    overflow-wrap: anywhere !important;
  }

  .mp-stats-hero-rating {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mp-stats-kpi-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

  .mp-stats-kpi {
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

/* =========================================================
   MATCHPULSE
   RIPRISTINO CARTA CLUB + FIX OVERFLOW STATS
   ========================================================= */


/* =========================================================
   CARTA CLUB PERSONALIZZATA
   ========================================================= */

.mp-club-members-grid {
  display: grid !important;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(280px, 1fr)
    ) !important;

  align-items: start !important;
  justify-items: center !important;

  width: 100% !important;
  max-width: 100% !important;

  gap: 20px !important;
}

.mp-club-showcase-card {
  width: min(100%, 390px) !important;
  max-width: 390px !important;
  min-width: 0 !important;

  box-sizing: border-box !important;
  margin: 0 auto !important;
}


/* Disattiva eventuali resti visivi
   della carta FIFA precedente */

.mp-club-fifa-wrap {
  display: none !important;
}


/* =========================================================
   BLOCCO GENERALE OVERFLOW PAGINA STATS
   ========================================================= */

html,
body,
#app {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.mp-stats-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.mp-stats-page *,
.mp-stats-page *::before,
.mp-stats-page *::after {
  box-sizing: border-box !important;
}


/* Tutti i blocchi principali devono
   restare dentro la larghezza dell'app */

.mp-stats-hero,
.mp-stats-kpi-grid,
.mp-stats-trend-zone,
.mp-stats-trend-grid,
.mp-stats-dashboard-grid,
.mp-stats-recent,
.mp-stats-recent-list,
.mp-stats-panel,
.mp-stats-data-control,
.mp-stats-no-matches {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}


/* =========================================================
   FIX GRAFICI
   ========================================================= */

.mp-stats-trend-grid {
  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  gap: 13px !important;

  overflow: hidden !important;
}

.mp-stats-trend-grid .trend-card,
.mp-stats-page .trend-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  overflow: hidden !important;
}

.mp-stats-page .trend-svg {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 120px !important;

  overflow: hidden !important;
}

.mp-stats-page .trend-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  gap: 8px !important;
}

.mp-stats-page .trend-head > div {
  min-width: 0 !important;
  max-width: 100% !important;
}

.mp-stats-page .trend-head h3,
.mp-stats-page .trend-head span {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.mp-stats-page .trend-badge {
  max-width: 100% !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: left !important;
}

.mp-stats-page .trend-values {
  display: flex !important;
  flex-wrap: wrap !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  gap: 8px !important;
}


/* =========================================================
   FIX HERO E MEDIA TAGLIATA
   ========================================================= */

.mp-stats-hero {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(120px, 150px) !important;
}

.mp-stats-hero-copy {
  width: 100% !important;
  min-width: 0 !important;
}

.mp-stats-hero h2 {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.mp-stats-hero-rating {
  width: 100% !important;
  max-width: 150px !important;
  min-width: 0 !important;
}


/* =========================================================
   TABLET E TELEFONO
   ========================================================= */

@media (max-width: 850px) {
  .mp-stats-hero {
    display: grid !important;
    grid-template-columns:
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;
  }

  .mp-stats-hero-rating {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mp-stats-trend-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .mp-stats-dashboard-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }
}


@media (max-width: 620px) {
  .mp-club-members-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;

    padding-inline: 0 !important;
  }

  .mp-club-showcase-card {
    width: min(
      100%,
      calc(100vw - 34px)
    ) !important;

    max-width: 370px !important;
  }

  .mp-stats-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mp-stats-hero,
  .mp-stats-trend-zone,
  .mp-stats-dashboard-grid,
  .mp-stats-recent,
  .mp-stats-data-control,
  .mp-stats-no-matches {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mp-stats-hero {
    padding: 20px !important;
  }

  .mp-stats-hero h2 {
    font-size:
      clamp(
        34px,
        11vw,
        49px
      ) !important;

    line-height: 0.94 !important;
  }

  .mp-stats-kpi-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    gap: 8px !important;
  }

  .mp-stats-kpi {
    width: 100% !important;
    min-width: 0 !important;

    padding: 14px !important;
    overflow: hidden !important;
  }

  .mp-stats-kpi strong {
    font-size: 30px !important;
  }

  .mp-stats-trend-grid,
  .mp-stats-trend-grid .trend-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mp-stats-page .trend-svg {
    width: 100% !important;
    height: 110px !important;
  }

  .mp-stats-match {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto
      38px !important;
  }

  .mp-stats-match-numbers {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   MATCHPULSE
   FIX FINALE STATS + FOOTER CARTA CLUB
   ========================================================= */


/* =========================================================
   STATS: NIENTE ELEMENTI FUORI DALLO SCHERMO
   ========================================================= */

.mp-stats-page,
.mp-stats-page *,
.mp-stats-page *::before,
.mp-stats-page *::after {
  box-sizing: border-box !important;
}

.mp-stats-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.mp-stats-hero,
.mp-stats-kpi-grid,
.mp-stats-trend-zone,
.mp-stats-trend-grid,
.mp-stats-dashboard-grid,
.mp-stats-panel,
.mp-stats-recent,
.mp-stats-recent-list {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}


/* Titolo: vietato spezzare STATISTICHE */

.mp-stats-hero-copy {
  width: 100% !important;
  min-width: 0 !important;
}

.mp-stats-hero h2 {
  max-width: 100% !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;

  letter-spacing: -1.7px !important;
}


/* =========================================================
   GRAFICI SEMPRE DENTRO IL CONTENITORE
   ========================================================= */

.mp-stats-trend-grid {
  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  gap: 12px !important;
}

.mp-stats-trend-grid .trend-card,
.mp-stats-page .trend-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  overflow: hidden !important;
}

.mp-stats-page .trend-svg,
.mp-stats-page svg {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  overflow: hidden !important;
}

.mp-stats-page .trend-head,
.mp-stats-page .trend-values {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}


/* =========================================================
   RENDIMENTO: IL 7.5 RESTA DENTRO
   ========================================================= */

.mp-stats-dashboard-grid {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;
}

.mp-stats-panel {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.mp-stats-panel-head {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  align-items: start !important;

  width: 100% !important;
  min-width: 0 !important;

  gap: 10px !important;
}

.mp-stats-panel-head > div {
  min-width: 0 !important;
}

.mp-stats-panel-head > strong {
  position: static !important;

  min-width: 0 !important;
  max-width: 75px !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-self: end !important;
  align-self: start !important;

  font-size: 29px !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}


/* =========================================================
   CARTA CLUB: TESTI IN BASSO NON TAGLIATI
   ========================================================= */

.mp-club-showcase-card {
  min-height: 575px !important;

  padding-bottom:
    48px !important;
}

.mp-club-showcase-open {
  position: relative !important;
  z-index: 5 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  margin:
    13px
    27px
    17px !important;

  padding:
    12px
    5px
    5px !important;

  border-top:
    1px solid
    var(--mp-card-line) !important;
}

.mp-club-showcase-open span {
  display: block !important;

  max-width: 135px !important;

  font-size: 6px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.65px !important;

  white-space: nowrap !important;
}

.mp-club-showcase-open strong {
  display: block !important;

  margin-left: 10px !important;

  font-size: 9px !important;
  line-height: 1 !important;

  white-space: nowrap !important;
}


/* =========================================================
   TELEFONO
   ========================================================= */

@media (max-width: 700px) {
  /* Titolo e media uno sotto l'altra */

  .mp-stats-hero {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;

    gap: 18px !important;

    padding: 20px !important;
  }

  .mp-stats-hero h2 {
    width: 100% !important;
    max-width: 100% !important;

    margin-top: 7px !important;

    font-size:
      clamp(
        34px,
        10.8vw,
        45px
      ) !important;

    line-height: 0.96 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* La media non stringe più il titolo */

  .mp-stats-hero-rating {
    display: grid !important;

    grid-template-columns:
      auto
      auto
      minmax(0, 1fr) !important;

    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;

    padding:
      13px
      17px !important;

    border-radius:
      20px !important;
  }

  .mp-stats-hero-rating span {
    justify-self: start !important;
  }

  .mp-stats-hero-rating strong {
    margin:
      0
      14px !important;

    font-size:
      39px !important;
  }

  .mp-stats-hero-rating small {
    max-width: none !important;

    margin: 0 !important;

    text-align: left !important;
  }

  /* Un grafico per riga */

  .mp-stats-trend-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .mp-stats-page .trend-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Rendimento e risultati uno sotto l'altro */

  .mp-stats-dashboard-grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .mp-stats-panel-head > strong {
    max-width: 68px !important;

    font-size:
      27px !important;
  }

  /* Footer carta Club più interno */

  .mp-club-showcase-card {
    min-height:
      570px !important;

    padding-bottom:
      45px !important;
  }

  .mp-club-showcase-open {
    margin:
      12px
      24px
      18px !important;
  }
}

/* =========================================================
   MATCHPULSE
   PAGINA E CARTE PROMO V1
   ========================================================= */

.mp-promos-page,
.mp-promos-page *,
.mp-promos-page *::before,
.mp-promos-page *::after {
  box-sizing: border-box;
}

.mp-promos-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  display: grid;
  gap: 18px;
}

.mp-promos-hero {
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 20px;

  padding: 24px;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(165,92,255,.30),
      transparent 34%
    ),
    radial-gradient(
      circle at 5% 100%,
      rgba(0,245,160,.18),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.04)
    );

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.36);
}

.mp-promos-hero::after {
  content: "";

  position: absolute;
  width: 180px;
  height: 180px;

  right: -70px;
  bottom: -105px;

  border:
    28px solid
    rgba(255,255,255,.035);

  border-radius: 999px;
}

.mp-promos-hero > * {
  position: relative;
  z-index: 1;
}

.mp-promos-hero span,
.mp-base-card-selection span,
.mp-promo-admin-head span {
  display: block;

  margin-bottom: 6px;

  color: var(--green);

  font-size: 10px;
  font-weight: 1000;

  letter-spacing: .17em;
  text-transform: uppercase;
}

.mp-promos-hero h2 {
  margin: 0 0 8px;

  font-size:
    clamp(
      30px,
      7vw,
      47px
    );

  line-height: .96;
  letter-spacing: -.055em;
}

.mp-promos-hero p {
  max-width: 520px;

  margin: 0;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.55;
}

.mp-promos-count {
  min-width: 104px;
  min-height: 104px;

  display: grid;
  place-content: center;

  text-align: center;

  border:
    1px solid
    rgba(255,255,255,.17);

  border-radius: 25px;

  background:
    rgba(0,0,0,.24);

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.10);
}

.mp-promos-count strong {
  display: block;

  font-size: 38px;
  line-height: .9;
}

.mp-promos-count span {
  margin-top: 8px;
  margin-bottom: 0;

  color:
    rgba(255,255,255,.64);

  font-size: 9px;
}


/* =========================================================
   CARTA BASE SELEZIONABILE
   ========================================================= */

.mp-base-card-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  min-width: 0;

  padding: 18px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.035)
    );
}

.mp-base-card-selection.is-selected {
  border-color:
    rgba(0,245,160,.55);

  box-shadow:
    0 0 0 3px
    rgba(0,245,160,.09);
}

.mp-base-card-selection h3 {
  margin: 0 0 5px;

  font-size: 21px;
}

.mp-base-card-selection p {
  margin: 0;

  color: var(--muted);
  font-size: 13px;
}

.mp-base-card-selection button {
  flex-shrink: 0;
}


/* =========================================================
   GRIGLIA COLLEZIONE
   ========================================================= */

.mp-promo-collection-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  align-items: start;
  gap: 18px;
}

.mp-promo-collection-item {
  min-width: 0;

  padding: 14px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.03)
    );

  box-shadow:
    0 20px 55px
    rgba(0,0,0,.30);
}

.mp-promo-collection-item.is-selected {
  border-color:
    rgba(0,245,160,.70);

  box-shadow:
    0 0 0 3px
    rgba(0,245,160,.10),
    0 24px 60px
    rgba(0,0,0,.38);
}

.mp-promo-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 9px;
}

.mp-promo-card-label span {
  color:
    rgba(255,255,255,.66);

  font-size: 10px;
  font-weight: 1000;

  letter-spacing: .12em;
}

.mp-promo-card-label strong {
  padding: 6px 8px;

  border-radius: 999px;

  color: #02110a;

  background: var(--green);

  font-size: 8px;
  letter-spacing: .09em;
}


/* =========================================================
   TELA DELLA CARTA PROMO
   ========================================================= */

.mp-promo-card-canvas {
  --promo-photo-x: 50%;
  --promo-photo-y: 8%;
  --promo-photo-zoom: 1.02;

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 370px;

  aspect-ratio: 2 / 3;

  margin: 0 auto;

  overflow: hidden;

  filter:
    drop-shadow(
      0 22px 30px
      rgba(0,0,0,.48)
    );
}

.mp-promo-template {
  position: absolute;
  z-index: 1;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
}

.mp-promo-player-photo {
  position: absolute;
  z-index: 2;

  left: 21%;
  top: 12%;

  width: 63%;
  height: 49%;

  overflow: hidden;

  border-radius:
    46% 46%
    28% 28%;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.18),
      transparent 68%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      transparent 100%
    );
}

.mp-promo-player-photo > img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position:
    var(--promo-photo-x)
    var(--promo-photo-y);

  transform:
    scale(
      var(--promo-photo-zoom)
    );

  transform-origin:
    center center;
}

.mp-promo-photo-initials {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  font-size: 54px;
  font-weight: 1000;

  color:
    rgba(255,255,255,.84);

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.22),
      rgba(0,0,0,.12)
    );
}

.mp-promo-rating {
  position: absolute;
  z-index: 4;

  left: 16%;
  top: 13%;

  display: grid;

  text-align: center;

  color: #fff;

  text-shadow:
    0 3px 3px
    rgba(0,0,0,.75),
    0 0 12px
    rgba(0,0,0,.72);
}

.mp-promo-rating strong {
  font-size:
    clamp(
      32px,
      9vw,
      52px
    );

  line-height: .85;
  letter-spacing: -.07em;
}

.mp-promo-rating span {
  margin-top: 7px;

  font-size: 12px;
  font-weight: 1000;

  letter-spacing: .12em;
}

.mp-promo-plus-icons {
  position: absolute;
  z-index: 5;

  right: 15%;
  top: 17%;

  display: grid;
  gap: 5px;
}

.mp-promo-plus-icons img {
  width:
    clamp(
      24px,
      7vw,
      38px
    );

  height:
    clamp(
      24px,
      7vw,
      38px
    );

  object-fit: contain;

  filter:
    drop-shadow(
      0 4px 6px
      rgba(0,0,0,.75)
    );
}

.mp-promo-player-name {
  position: absolute;
  z-index: 5;

  left: 14%;
  right: 14%;
  top: 59%;

  overflow: hidden;

  color: #fff;

  text-align: center;

  font-size:
    clamp(
      14px,
      4vw,
      22px
    );

  font-weight: 1000;

  letter-spacing: .08em;
  text-transform: uppercase;

  white-space: nowrap;
  text-overflow: ellipsis;

  text-shadow:
    0 3px 4px
    rgba(0,0,0,.92);
}

.mp-promo-card-abilities {
  position: absolute;
  z-index: 5;

  left: 23%;
  right: 23%;
  top: 64%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  color: #fff;

  font-size:
    clamp(
      7px,
      2vw,
      10px
    );

  font-weight: 1000;

  text-shadow:
    0 2px 3px
    rgba(0,0,0,.95);
}

.mp-promo-card-stats {
  position: absolute;
  z-index: 5;

  left: 17%;
  right: 17%;
  top: 69%;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 4px 7px;

  color: #fff;

  text-shadow:
    0 2px 4px
    rgba(0,0,0,.95);
}

.mp-promo-card-stats div {
  display: flex;
  align-items: baseline;
  justify-content: center;

  gap: 3px;

  min-width: 0;
}

.mp-promo-card-stats strong {
  font-size:
    clamp(
      13px,
      4.2vw,
      22px
    );

  line-height: 1;
}

.mp-promo-card-stats span {
  font-size:
    clamp(
      6px,
      1.8vw,
      9px
    );

  font-weight: 1000;
}

.mp-promo-normal-icons {
  position: absolute;
  z-index: 5;

  left: 17%;
  right: 17%;
  top: 83%;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 3px;
}

.mp-promo-normal-icons img {
  width:
    clamp(
      17px,
      4.8vw,
      25px
    );

  height:
    clamp(
      17px,
      4.8vw,
      25px
    );

  object-fit: contain;

  filter:
    drop-shadow(
      0 3px 4px
      rgba(0,0,0,.72)
    );
}


/* =========================================================
   INFORMAZIONI E PULSANTI
   ========================================================= */

.mp-promo-card-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 12px;

  margin-top: 8px;
  padding: 2px 3px 0;
}

.mp-promo-card-info > div {
  min-width: 0;
}

.mp-promo-card-info span,
.mp-promo-card-info strong,
.mp-promo-card-info small {
  display: block;
}

.mp-promo-card-info span {
  color: var(--green);

  font-size: 9px;
  font-weight: 1000;

  letter-spacing: .10em;
  text-transform: uppercase;
}

.mp-promo-card-info strong {
  margin-top: 5px;

  font-size: 18px;
}

.mp-promo-card-info small {
  margin-top: 4px;

  color: var(--muted);

  font-size: 10px;
  line-height: 1.35;
}

.mp-promo-card-info time {
  flex-shrink: 0;

  color:
    rgba(255,255,255,.50);

  font-size: 9px;
  text-align: right;
}

.mp-promo-card-actions {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;

  margin-top: 12px;
}

.mp-promo-card-actions button {
  min-width: 0;
  min-height: 44px;

  padding: 0 9px;

  font-size: 9px;
}


/* =========================================================
   COLLEZIONE VUOTA
   ========================================================= */

.mp-promos-empty {
  padding: 38px 20px;

  text-align: center;

  border:
    1px dashed
    rgba(255,255,255,.16);

  border-radius: 28px;

  background:
    rgba(255,255,255,.035);
}

.mp-promos-empty span {
  color: var(--green);

  font-size: 10px;
  font-weight: 1000;

  letter-spacing: .14em;
}

.mp-promos-empty h3 {
  margin: 9px 0 7px;

  font-size: 21px;
}

.mp-promos-empty p {
  max-width: 430px;

  margin: 0 auto;

  color: var(--muted);

  line-height: 1.5;
}


/* =========================================================
   LABORATORIO PRIVATO
   ========================================================= */

.mp-promo-admin-lab {
  padding: 18px;

  border:
    1px solid
    rgba(255,184,63,.24);

  border-radius: 27px;

  background:
    linear-gradient(
      145deg,
      rgba(255,184,63,.11),
      rgba(255,255,255,.025)
    );
}

.mp-promo-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 15px;
}

.mp-promo-admin-head h3 {
  margin: 0 0 5px;

  font-size: 22px;
}

.mp-promo-admin-head p {
  max-width: 480px;

  margin: 0;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.45;
}

.mp-promo-admin-head button {
  flex-shrink: 0;

  min-height: 42px;
}

.mp-promo-admin-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 8px;
}

.mp-promo-admin-grid button {
  min-width: 0;
  min-height: 82px;

  display: grid;
  place-content: center;

  gap: 3px;

  padding: 9px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 17px;

  color: #fff;

  background:
    rgba(0,0,0,.18);
}

.mp-promo-admin-grid button:hover {
  border-color:
    rgba(255,184,63,.55);

  transform:
    translateY(-2px);
}

.mp-promo-admin-grid button span {
  margin: 0;

  color:
    rgba(255,255,255,.44);

  font-size: 8px;
}

.mp-promo-admin-grid button strong {
  overflow: hidden;

  font-size: 10px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.mp-promo-admin-grid button small {
  color: var(--green);

  font-size: 8px;
}

.mp-promo-admin-actions {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 9px;

  margin-top: 13px;
}


/* =========================================================
   MODIFICA FOTO
   ========================================================= */

.mp-promo-photo-overlay {
  position: fixed;
  z-index: 9999;

  inset: 0;

  display: grid;
  place-items: center;

  padding: 14px;

  overflow-y: auto;

  background:
    rgba(0,0,0,.82);

  backdrop-filter:
    blur(15px);
}

.mp-promo-photo-modal {
  width:
    min(
      100%,
      560px
    );

  padding: 18px;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius: 28px;

  background:
    linear-gradient(
      160deg,
      #0d1815,
      #030706
    );

  box-shadow:
    0 35px 95px
    rgba(0,0,0,.72);
}

.mp-promo-photo-modal > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;
}

.mp-promo-photo-modal header span {
  color: var(--green);

  font-size: 9px;
  font-weight: 1000;

  letter-spacing: .14em;
}

.mp-promo-photo-modal header h3 {
  margin: 5px 0 0;

  font-size: 22px;
}

.mp-promo-photo-modal header > button {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 13px;

  color: #fff;

  background:
    rgba(255,255,255,.07);

  font-size: 25px;
}

.mp-promo-photo-preview {
  width:
    min(
      100%,
      340px
    );

  margin: 0 auto 13px;
}

.mp-promo-photo-controls {
  display: grid;
  gap: 11px;

  padding: 13px;

  border-radius: 20px;

  background:
    rgba(255,255,255,.05);
}

.mp-promo-photo-controls label {
  display: grid;
  gap: 7px;
}

.mp-promo-photo-controls label > span {
  display: flex;
  justify-content: space-between;

  gap: 10px;

  color:
    rgba(255,255,255,.72);

  font-size: 11px;
  font-weight: 800;
}

.mp-promo-photo-controls b {
  color: var(--green);
}

.mp-promo-photo-controls input {
  min-height: 28px;
  padding: 0;

  accent-color: var(--green);
}

.mp-promo-photo-actions {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 9px;

  margin-top: 12px;
}


/* =========================================================
   CARTA PROMO NEL CLUB
   ========================================================= */

.mp-club-promo-card {
  position: relative;

  width: 100%;
  max-width: 390px;

  margin: 0 auto;

  padding: 12px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 29px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.42);

  cursor: pointer;
}

.mp-club-promo-tools {
  position: absolute;
  z-index: 20;

  left: 18px;
  right: 18px;
  top: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  pointer-events: none;
}

.mp-club-promo-tools span {
  padding: 5px 8px;

  border-radius: 999px;

  color: #071009;

  background: var(--green);

  font-size: 7px;
  font-weight: 1000;

  letter-spacing: .08em;
}

.mp-club-promo-tools button {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  margin-left: auto;

  border:
    1px solid
    rgba(255,107,107,.40);

  border-radius: 999px;

  color: #fff;

  background:
    rgba(255,107,107,.28);

  font-size: 18px;

  pointer-events: auto;
}

.mp-promo-card-club {
  max-width: 355px;
}

.mp-club-promo-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin: 7px 12px 2px;
  padding-top: 10px;

  border-top:
    1px solid
    rgba(255,255,255,.10);
}

.mp-club-promo-card > footer span {
  color: var(--green);

  font-size: 8px;
  font-weight: 1000;

  letter-spacing: .11em;
}

.mp-club-promo-card > footer strong {
  font-size: 9px;

  letter-spacing: .08em;
}


/* =========================================================
   TELEFONO
   ========================================================= */

@media (max-width: 720px) {
  .mp-promos-hero {
    grid-template-columns:
      minmax(0, 1fr);

    padding: 20px;
  }

  .mp-promos-count {
    width: 100%;
    min-height: 75px;

    grid-template-columns:
      auto auto;

    align-items: center;
    justify-content: center;

    gap: 10px;
  }

  .mp-promos-count strong {
    font-size: 31px;
  }

  .mp-promos-count span {
    margin: 0;
  }

  .mp-promo-collection-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .mp-promo-collection-item {
    padding: 12px;
  }

  .mp-base-card-selection {
    align-items: stretch;
    flex-direction: column;
  }

  .mp-base-card-selection button {
    width: 100%;
  }

  .mp-promo-admin-head {
    flex-direction: column;
  }

  .mp-promo-admin-head button {
    width: 100%;
  }

  .mp-promo-admin-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

@media (max-width: 420px) {
  .mp-promo-card-actions,
  .mp-promo-admin-actions,
  .mp-promo-photo-actions {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .mp-promo-card-info {
    align-items: flex-start;
    flex-direction: column;
  }

  .mp-promo-card-info time {
    text-align: left;
  }

  .mp-promo-card-stats {
    left: 15%;
    right: 15%;
  }

  .mp-promo-normal-icons {
    left: 15%;
    right: 15%;
  }
}

/* =========================================================
   MATCHPULSE
   CORREZIONE VISIVA CARTE PROMO V2
   ========================================================= */


/* =========================================================
   NASCONDE I PLAYSTYLE NORMALI DALLE ANTEPRIME VECCHIE
   ========================================================= */

.mp-promo-collection-item
.mp-promo-normal-icons,

.mp-club-promo-card
.mp-promo-normal-icons,

.mp-promo-collection-item
.mp-promo-card-abilities,

.mp-club-promo-card
.mp-promo-card-abilities {
  display: none !important;
}


/* =========================================================
   PULSANTE CHE APRE LA CARTA
   ========================================================= */

.mp-promo-v2-open-button {
  display: block;

  width: 100%;
  max-width: 280px;

  margin: 0 auto;
  padding: 0;

  border: 0;

  color: inherit;
  background: transparent;
}

.mp-promo-v2-open-button:hover {
  transform:
    translateY(-2px);
}


/* =========================================================
   TELA DELLA NUOVA CARTA
   ========================================================= */

.mp-promo-v2-card {
  --mp-pv2-photo-x: 50%;
  --mp-pv2-photo-y: 8%;
  --mp-pv2-photo-zoom: 1.02;

  position: relative;
  isolation: isolate;

  width: 100%;
  max-width: 340px;

  aspect-ratio: 2 / 3;

  margin: 0 auto;

  overflow: hidden;

  color: #fff;

  filter:
    drop-shadow(
      0 20px 27px
      rgba(0,0,0,.48)
    );
}


/* Immagine completa della promo */

.mp-promo-v2-template {
  position: absolute;
  z-index: 1;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
}


/* =========================================================
   FOTO PIÙ PICCOLA E SPOSTATA A DESTRA
   ========================================================= */

.mp-promo-v2-photo {
  position: absolute;
  z-index: 2;

  left: 39%;
  top: 16%;

  width: 45%;
  height: 40%;

  overflow: hidden;

  border-radius:
    48% 48%
    31% 31%;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(255,255,255,.18),
      rgba(0,0,0,.08) 70%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.88) 82%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000 0%,
      #000 72%,
      rgba(0,0,0,.88) 82%,
      transparent 100%
    );
}

.mp-promo-v2-photo > img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    var(--mp-pv2-photo-x)
    var(--mp-pv2-photo-y);

  transform:
    scale(
      var(--mp-pv2-photo-zoom)
    );

  transform-origin:
    center center;
}

.mp-promo-v2-initials {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  color: #fff;

  font-size: 38px;
  font-weight: 1000;

  background:
    rgba(0,0,0,.25);
}


/* =========================================================
   OVERALL E RUOLO
   ========================================================= */

.mp-promo-v2-rating {
  position: absolute;
  z-index: 5;

  left: 18%;
  top: 15%;

  width: 18%;

  display: grid;

  text-align: center;

  color: #fff;

  text-shadow:
    0 3px 4px
    rgba(0,0,0,.92),
    0 0 11px
    rgba(0,0,0,.68);
}

.mp-promo-v2-rating strong {
  display: block;

  font-size:
    clamp(
      29px,
      8vw,
      49px
    );

  line-height: .86;
  letter-spacing: -.075em;
}

.mp-promo-v2-rating span {
  display: block;

  margin-top: 7px;

  font-size:
    clamp(
      8px,
      2.4vw,
      12px
    );

  font-weight: 1000;

  letter-spacing: .07em;
}


/* =========================================================
   PLAYSTYLE+ A SINISTRA
   ========================================================= */

.mp-promo-v2-plus {
  position: absolute;
  z-index: 6;

  left: 19%;
  top: 30%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: flex-start;

  gap: 5px;
}

.mp-promo-v2-plus img {
  display: block;

  width:
    clamp(
      23px,
      6.7vw,
      35px
    );

  height:
    clamp(
      23px,
      6.7vw,
      35px
    );

  object-fit: contain;

  filter:
    drop-shadow(
      0 4px 5px
      rgba(0,0,0,.88)
    );
}


/* =========================================================
   NOME
   ========================================================= */

.mp-promo-v2-name {
  position: absolute;
  z-index: 6;

  left: 17%;
  right: 17%;
  top: 58.5%;

  overflow: hidden;

  color: #fff;

  text-align: center;

  font-size:
    clamp(
      12px,
      4.4vw,
      20px
    );

  font-weight: 1000;

  line-height: 1;

  letter-spacing: .075em;
  text-transform: uppercase;

  white-space: nowrap;
  text-overflow: ellipsis;

  text-shadow:
    0 3px 4px
    rgba(0,0,0,.98),
    0 0 10px
    rgba(0,0,0,.72);
}


/* =========================================================
   STATISTICHE
   ========================================================= */

.mp-promo-v2-stats {
  position: absolute;
  z-index: 6;

  left: 18%;
  right: 18%;
  top: 66%;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 5px 7px;

  color: #fff;

  text-shadow:
    0 2px 4px
    rgba(0,0,0,.98),
    0 0 8px
    rgba(0,0,0,.68);
}

.mp-promo-v2-stats div {
  min-width: 0;

  display: flex;
  align-items: baseline;
  justify-content: center;

  gap: 3px;
}

.mp-promo-v2-stats strong {
  display: block;

  font-size:
    clamp(
      14px,
      4.5vw,
      22px
    );

  line-height: .95;
}

.mp-promo-v2-stats span {
  display: block;

  font-size:
    clamp(
      6px,
      1.9vw,
      9px
    );

  font-weight: 1000;
}


/* =========================================================
   ANTEPRIMA NELLA COLLEZIONE
   ========================================================= */

.mp-promo-v2-preview {
  max-width: 255px;
}

.mp-promo-v2-preview
.mp-promo-v2-rating strong {
  font-size:
    clamp(
      28px,
      8vw,
      43px
    );
}

.mp-promo-v2-preview
.mp-promo-v2-name {
  font-size:
    clamp(
      11px,
      4vw,
      17px
    );
}

.mp-promo-v2-preview
.mp-promo-v2-stats strong {
  font-size:
    clamp(
      13px,
      4vw,
      18px
    );
}


/* =========================================================
   CARTA NEL CLUB
   ========================================================= */

.mp-club-promo-v2 {
  position: relative;

  width: 100%;
  max-width: 390px;

  margin: 0 auto;
  padding: 12px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 29px;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 26px 66px
    rgba(0,0,0,.42);

  cursor: pointer;
}

.mp-promo-v2-club {
  max-width: 335px;
}

.mp-club-promo-v2-tools {
  position: absolute;
  z-index: 30;

  left: 17px;
  right: 17px;
  top: 17px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  pointer-events: none;
}

.mp-club-promo-v2-tools span {
  padding: 5px 8px;

  border-radius: 999px;

  color: #04110a;
  background: var(--green);

  font-size: 7px;
  font-weight: 1000;

  letter-spacing: .08em;
}

.mp-club-promo-v2-tools button {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  margin-left: auto;

  border:
    1px solid
    rgba(255,107,107,.42);

  border-radius: 999px;

  color: #fff;
  background:
    rgba(255,107,107,.25);

  font-size: 18px;

  pointer-events: auto;
}

.mp-club-promo-v2 > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin: 7px 13px 2px;
  padding-top: 10px;

  border-top:
    1px solid
    rgba(255,255,255,.10);
}

.mp-club-promo-v2 > footer span {
  color: var(--green);

  font-size: 8px;
  font-weight: 1000;

  letter-spacing: .12em;
}

.mp-club-promo-v2 > footer strong {
  color: #fff;

  font-size: 9px;

  letter-spacing: .07em;
}


/* =========================================================
   RIMUOVE COMPLETAMENTE LA CARTA MARRONE
   NEL PROFILO CLUB APERTO
   ========================================================= */

.mp-club-profile-card-promo-v2 {
  width: 100% !important;
  max-width: 345px !important;
  min-height: 0 !important;

  margin: 0 auto !important;
  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.mp-club-profile-card-promo-v2::before,
.mp-club-profile-card-promo-v2::after {
  display: none !important;
}

.mp-club-profile-card-promo-v2
.mp-promo-v2-detail {
  width: 100%;
  max-width: 340px;
}


/* =========================================================
   MODALE DEL DETTAGLIO LOCALE
   ========================================================= */

body.mp-promo-v2-modal-open {
  overflow: hidden;
}

.mp-promo-v2-detail-backdrop {
  position: fixed;
  z-index: 10000;

  inset: 0;

  display: grid;
  place-items: center;

  padding: 15px;

  overflow-y: auto;

  background:
    rgba(0,0,0,.84);

  backdrop-filter:
    blur(16px);
}

.mp-promo-v2-detail-modal {
  position: relative;

  width:
    min(
      100%,
      790px
    );

  max-height:
    calc(
      100vh - 30px
    );

  overflow-y: auto;

  padding: 20px;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 30px;

  background:
    linear-gradient(
      160deg,
      #101c18,
      #030706
    );

  box-shadow:
    0 36px 100px
    rgba(0,0,0,.75);
}

.mp-promo-v2-detail-close {
  position: absolute;
  z-index: 20;

  right: 15px;
  top: 15px;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 14px;

  color: #fff;

  background:
    rgba(255,255,255,.08);

  font-size: 26px;
}

.mp-promo-v2-detail-head {
  display: grid;

  grid-template-columns:
    minmax(250px, 350px)
    minmax(0, 1fr);

  align-items: center;
  gap: 24px;

  padding-right: 40px;
}

.mp-promo-v2-detail-card {
  width: 100%;
}

.mp-promo-v2-detail-info {
  min-width: 0;
}

.mp-promo-v2-detail-info > span {
  display: block;

  color: var(--green);

  font-size: 10px;
  font-weight: 1000;

  letter-spacing: .16em;
}

.mp-promo-v2-detail-info h2 {
  margin: 8px 0 7px;

  font-size:
    clamp(
      31px,
      7vw,
      50px
    );

  line-height: .94;
  letter-spacing: -.055em;

  overflow-wrap: anywhere;
}

.mp-promo-v2-detail-info > p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;
}

.mp-promo-v2-ability-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 9px;

  margin-top: 18px;
}

.mp-promo-v2-ability-grid > div {
  padding: 13px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 17px;

  background:
    rgba(255,255,255,.055);
}

.mp-promo-v2-ability-grid span,
.mp-promo-v2-ability-grid strong {
  display: block;
}

.mp-promo-v2-ability-grid span {
  color: var(--muted);

  font-size: 10px;
  font-weight: 900;

  text-transform: uppercase;
}

.mp-promo-v2-ability-grid strong {
  margin-top: 6px;

  color: #fff;

  font-size: 24px;
}


/* =========================================================
   PLAYSTYLE VISIBILI SOLTANTO NEL DETTAGLIO
   ========================================================= */

.mp-promo-v2-ps-section {
  display: grid;
  gap: 15px;

  margin-top: 20px;
}

.mp-promo-v2-ps-group {
  padding: 15px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 22px;

  background:
    rgba(255,255,255,.045);
}

.mp-promo-v2-ps-group > header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;
}

.mp-promo-v2-ps-group > header span {
  color: var(--green);

  font-size: 9px;
  font-weight: 1000;

  letter-spacing: .13em;
}

.mp-promo-v2-ps-group > header strong {
  min-width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 999px;

  color: #fff;

  background:
    rgba(255,255,255,.09);

  font-size: 13px;
}

.mp-promo-v2-ps-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;
}

.mp-pv2-ps-item {
  min-width: 0;

  display: grid;

  grid-template-columns:
    43px
    minmax(0, 1fr);

  align-items: center;
  gap: 10px;

  padding: 10px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 16px;

  background:
    rgba(0,0,0,.18);
}

.mp-pv2-ps-item img {
  width: 43px;
  height: 43px;

  display: block;

  object-fit: contain;
}

.mp-pv2-ps-item div {
  min-width: 0;
}

.mp-pv2-ps-item strong,
.mp-pv2-ps-item span {
  display: block;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.mp-pv2-ps-item strong {
  color: #fff;

  font-size: 12px;
}

.mp-pv2-ps-item span {
  margin-top: 4px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 1000;

  letter-spacing: .08em;
}

.mp-pv2-ps-item.is-plus {
  border-color:
    rgba(255,215,106,.30);

  background:
    linear-gradient(
      145deg,
      rgba(255,215,106,.12),
      rgba(0,0,0,.18)
    );
}


/* =========================================================
   TELEFONO
   ========================================================= */

@media (max-width: 700px) {
  .mp-promo-v2-preview {
    max-width: 245px;
  }

  .mp-promo-v2-club {
    max-width: 325px;
  }

  .mp-promo-v2-detail-head {
    grid-template-columns:
      minmax(0, 1fr);

    padding-right: 0;
  }

  .mp-promo-v2-detail-card {
    width:
      min(
        100%,
        330px
      );

    margin: 0 auto;
  }

  .mp-promo-v2-detail-info {
    text-align: center;
  }

  .mp-promo-v2-ability-grid {
    text-align: left;
  }

  .mp-promo-v2-ps-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .mp-promo-v2-detail-modal {
    padding:
      60px
      14px
      18px;
  }
}

/* =========================================================
   MATCHPULSE
   PROMO VISUAL V3
   ========================================================= */


/* =========================================================
   PROPORZIONI CARTA
   ========================================================= */

.mp-promo-v2-card {
  aspect-ratio: 5 / 7 !important;

  overflow: visible !important;
}


/*
  Il template rimane intero.
*/

.mp-promo-v2-template {
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
}


/* =========================================================
   FOTO
   NIENTE PIÙ OVALE
   ========================================================= */

.mp-promo-v2-photo {
  left: 43% !important;
  top: 17.5% !important;

  width: 39% !important;
  height: 35% !important;

  overflow: hidden !important;

  border-radius:
    17px !important;

  background:
    rgba(
      0,
      0,
      0,
      .10
    ) !important;

  -webkit-mask-image:
    none !important;

  mask-image:
    none !important;

  box-shadow:
    0 8px 18px
    rgba(
      0,
      0,
      0,
      .22
    ) !important;
}


.mp-promo-v2-photo > img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius:
    17px !important;
}


/* =========================================================
   OVERALL
   ========================================================= */

.mp-promo-v2-rating {
  left: 16% !important;
  top: 16% !important;

  width: 18% !important;
}


.mp-promo-v2-rating strong {
  font-size:
    clamp(
      31px,
      7vw,
      45px
    ) !important;
}


.mp-promo-v2-rating span {
  margin-top:
    6px !important;

  font-size:
    clamp(
      8px,
      2vw,
      11px
    ) !important;
}


/* =========================================================
   PLAYSTYLE+
   SUL BORDO SINISTRO COME CARTA BASE
   ========================================================= */

.mp-promo-v2-plus {
  left: 8.5% !important;
  top: 29% !important;

  gap: 4px !important;
}


.mp-promo-v2-plus img {
  width:
    clamp(
      22px,
      6vw,
      31px
    ) !important;

  height:
    clamp(
      22px,
      6vw,
      31px
    ) !important;
}


/* =========================================================
   NOME
   ========================================================= */

.mp-promo-v2-name {
  left: 15% !important;
  right: 15% !important;

  top: 59.5% !important;

  font-size:
    clamp(
      11px,
      3.8vw,
      18px
    ) !important;

  letter-spacing:
    .055em !important;
}


/* =========================================================
   STATISTICHE CARTA
   ========================================================= */

.mp-promo-v2-stats {
  left: 16% !important;
  right: 16% !important;

  top: 67% !important;

  gap:
    6px
    8px !important;
}


.mp-promo-v2-stats div {
  gap: 2px !important;
}


.mp-promo-v2-stats strong {
  font-size:
    clamp(
      13px,
      4vw,
      20px
    ) !important;
}


.mp-promo-v2-stats span {
  font-size:
    clamp(
      6px,
      1.7vw,
      8px
    ) !important;
}


/* =========================================================
   COLLEZIONE
   ========================================================= */

.mp-promo-v2-preview {
  width: 100% !important;

  max-width:
    245px !important;
}


/*
  Nessun PS normale
  nell'anteprima.
*/

.mp-promo-collection-item
.mp-promo-normal-icons,

.mp-promo-collection-item
.mp-promo-v2-ps-section {
  display: none !important;
}


/* =========================================================
   CLUB
   ========================================================= */

.mp-promo-v2-club {
  width: 100% !important;

  max-width:
    315px !important;
}


/*
  Nessun PlayStyle normale
  sulla carta Club.
*/

.mp-club-promo-card
.mp-promo-normal-icons,

.mp-club-promo-v2
.mp-promo-normal-icons,

.mp-club-promo-card
.mp-promo-card-abilities {
  display: none !important;
}


/* =========================================================
   DETTAGLIO APERTO
   ========================================================= */

.mp-promo-v2-detail {
  width: 100% !important;

  max-width:
    340px !important;
}


/*
  Nel dettaglio sotto la carta,
  invece, rimangono visibili
  PlayStyle normali e PS+.
*/

.mp-promo-v2-detail-modal
.mp-promo-v2-ps-section {
  display: grid !important;
}


/* =========================================================
   TELEFONO
   ========================================================= */

@media (max-width: 700px) {

  .mp-promo-v2-preview {
    max-width:
      235px !important;
  }


  .mp-promo-v2-club {
    max-width:
      300px !important;
  }


  .mp-promo-v2-detail {
    max-width:
      310px !important;
  }


  .mp-promo-v2-photo {
    left:
      43.5% !important;

    width:
      38% !important;

    height:
      34% !important;
  }


  .mp-promo-v2-plus {
    left:
      8% !important;
  }
}

/* =========================================================
   MATCHPULSE
   PROMO VISUAL V3
   ========================================================= */


/* =========================================================
   CARTA
   ========================================================= */

.mp-promo-v3-card {
  --mp-v3-photo-x: 50%;
  --mp-v3-photo-y: 8%;
  --mp-v3-photo-zoom: 1.02;

  --mp-v3-photo-left: 39%;
  --mp-v3-photo-top: 16%;
  --mp-v3-photo-width: 48%;
  --mp-v3-photo-height: 41%;

  --mp-v3-rating-left: 16%;
  --mp-v3-rating-top: 15%;

  --mp-v3-role-right: 16%;
  --mp-v3-role-top: 15%;

  --mp-v3-side-left: 15.5%;
  --mp-v3-side-top: 29%;
  --mp-v3-side-width: 22%;

  --mp-v3-plus-left: 14.8%;
  --mp-v3-plus-top: 45%;
  --mp-v3-plus-width: 25.5%;

  --mp-v3-name-top: 59%;

  --mp-v3-stats-left: 17%;
  --mp-v3-stats-right: 17%;
  --mp-v3-stats-top: 66%;

  --mp-v3-abilities-top: 84%;

  position: relative;

  container-type: inline-size;

  width: 100%;

  aspect-ratio: 2 / 3;

  margin: 0 auto;

  overflow: hidden;

  color: #fff;

  isolation: isolate;

  filter:
    drop-shadow(
      0 22px 30px
      rgba(0,0,0,.52)
    );
}


/* template */

.mp-promo-v3-template {
  position: absolute;

  z-index: 1;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  pointer-events: none;
}


/* =========================================================
   FOTO
   ========================================================= */

.mp-promo-v3-photo {
  position: absolute;

  z-index: 2;

  left:
    var(--mp-v3-photo-left);

  top:
    var(--mp-v3-photo-top);

  width:
    var(--mp-v3-photo-width);

  height:
    var(--mp-v3-photo-height);

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.22);

  border-radius: 8%;

  background:
    rgba(0,0,0,.18);

  box-shadow:
    0 10px 24px
    rgba(0,0,0,.28);
}


/*
  NIENTE MASCHERA OVALE.
  Foto rettangolare come
  la carta base.
*/

.mp-promo-v3-photo > img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  object-position:
    var(--mp-v3-photo-x)
    var(--mp-v3-photo-y);

  transform:
    scale(
      var(--mp-v3-photo-zoom)
    );

  transform-origin:
    center center;
}


.mp-promo-v3-initials {
  width: 100%;
  height: 100%;

  display: grid;
  place-items: center;

  color: #fff;

  background:
    rgba(0,0,0,.25);

  font-size: 38px;
  font-size: 12cqw;

  font-weight: 1000;
}


/* =========================================================
   OVERALL
   ========================================================= */

.mp-promo-v3-rating {
  position: absolute;

  z-index: 6;

  left:
    var(--mp-v3-rating-left);

  top:
    var(--mp-v3-rating-top);

  width: 20%;

  text-align: center;

  text-shadow:
    0 3px 5px
    rgba(0,0,0,.95),
    0 0 10px
    rgba(0,0,0,.75);
}


.mp-promo-v3-rating strong {
  display: block;

  font-size: 45px;
  font-size: 14.5cqw;

  line-height: .82;

  letter-spacing: -.08em;

  font-weight: 1000;
}


.mp-promo-v3-rating span {
  display: block;

  margin-top: 5px;

  font-size: 8px;
  font-size: 2.5cqw;

  font-weight: 1000;

  letter-spacing: .08em;
}


/* =========================================================
   RUOLO + PROMO
   ========================================================= */

.mp-promo-v3-role {
  position: absolute;

  z-index: 6;

  right:
    var(--mp-v3-role-right);

  top:
    var(--mp-v3-role-top);

  max-width: 27%;

  text-align: right;

  text-shadow:
    0 2px 5px
    rgba(0,0,0,.95);
}


.mp-promo-v3-role strong {
  display: block;

  font-size: 18px;
  font-size: 5.8cqw;

  line-height: 1;

  font-weight: 1000;
}


.mp-promo-v3-role span {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color:
    rgba(255,255,255,.88);

  font-size: 7px;
  font-size: 2.15cqw;

  font-weight: 1000;

  white-space: nowrap;

  text-overflow: ellipsis;
}


/* =========================================================
   INFO LATERALI
   ========================================================= */

.mp-promo-v3-side {
  position: absolute;

  z-index: 6;

  left:
    var(--mp-v3-side-left);

  top:
    var(--mp-v3-side-top);

  width:
    var(--mp-v3-side-width);

  display: grid;

  gap: 3px;
  gap: .9cqw;
}


.mp-promo-v3-side > div {
  min-width: 0;

  padding:
    4px 3px;

  padding:
    1.25cqw
    .8cqw;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius: 8px;

  background:
    rgba(0,0,0,.28);

  text-align: center;

  backdrop-filter:
    blur(4px);
}


.mp-promo-v3-side span,
.mp-promo-v3-side strong {
  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.mp-promo-v3-side span {
  color:
    rgba(255,255,255,.67);

  font-size: 6px;
  font-size: 1.75cqw;

  font-weight: 1000;

  letter-spacing: .04em;
}


.mp-promo-v3-side strong {
  margin-top: 1px;

  color: #fff;

  font-size: 7px;
  font-size: 2.05cqw;

  line-height: 1;

  font-weight: 1000;

  text-shadow:
    0 2px 4px
    rgba(0,0,0,.8);
}


/* =========================================================
   PLAYSTYLE+
   ========================================================= */

.mp-promo-v3-plus {
  position: absolute;

  z-index: 7;

  left:
    var(--mp-v3-plus-left);

  top:
    var(--mp-v3-plus-top);

  width:
    var(--mp-v3-plus-width);

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  align-items: center;

  justify-items: center;

  gap:
    3px 2px;
}


.mp-promo-v3-plus img {
  width: 24px;
  height: 24px;

  width: 7.2cqw;
  height: 7.2cqw;

  max-width: 29px;
  max-height: 29px;

  display: block;

  object-fit: contain;

  filter:
    drop-shadow(
      0 3px 4px
      rgba(0,0,0,.92)
    );
}


/* =========================================================
   NOME
   ========================================================= */

.mp-promo-v3-name {
  position: absolute;

  z-index: 7;

  left: 16%;
  right: 16%;

  top:
    var(--mp-v3-name-top);

  overflow: hidden;

  color: #fff;

  text-align: center;

  font-size: 18px;
  font-size: 5.7cqw;

  font-weight: 1000;

  line-height: 1;

  letter-spacing: .055em;

  text-transform: uppercase;

  white-space: nowrap;

  text-overflow: ellipsis;

  text-shadow:
    0 3px 5px
    rgba(0,0,0,.98),
    0 0 9px
    rgba(0,0,0,.75);
}


/* =========================================================
   6 STATISTICHE
   3 COLONNE × 2 RIGHE
   ========================================================= */

.mp-promo-v3-stats {
  position: absolute;

  z-index: 7;

  left:
    var(--mp-v3-stats-left);

  right:
    var(--mp-v3-stats-right);

  top:
    var(--mp-v3-stats-top);

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    4px 5px;

  gap:
    1.1cqw 1.4cqw;
}


.mp-promo-v3-stats > div {
  min-width: 0;

  padding:
    4px 2px;

  padding:
    1.15cqw .5cqw;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 8px;

  background:
    rgba(0,0,0,.24);

  text-align: center;

  backdrop-filter:
    blur(3px);
}


.mp-promo-v3-stats strong {
  display: block;

  color: #fff;

  font-size: 18px;
  font-size: 5.6cqw;

  line-height: .9;

  font-weight: 1000;

  text-shadow:
    0 2px 4px
    rgba(0,0,0,.95);
}


.mp-promo-v3-stats span {
  display: block;

  margin-top: 2px;

  color:
    rgba(255,255,255,.79);

  font-size: 7px;
  font-size: 2.05cqw;

  font-weight: 1000;
}


/* =========================================================
   PIEDE DEBOLE + MOSSE
   ========================================================= */

.mp-promo-v3-abilities {
  position: absolute;

  z-index: 7;

  left: 18%;
  right: 18%;

  top:
    var(--mp-v3-abilities-top);

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    5px;

  gap:
    1.5cqw;
}


.mp-promo-v3-abilities > div {
  min-width: 0;

  text-align: center;
}


.mp-promo-v3-abilities > div > span {
  display: block;

  margin-bottom: 2px;

  color:
    rgba(255,255,255,.66);

  font-size: 5px;
  font-size: 1.7cqw;

  font-weight: 1000;

  letter-spacing: .03em;
}


.mp-promo-v3-stars {
  display: block;

  color: #ffd76a;

  font-size: 8px;
  font-size: 2.65cqw;

  line-height: 1;

  white-space: nowrap;

  text-shadow:
    0 2px 4px
    rgba(0,0,0,.9);
}


.mp-promo-v3-stars i {
  color:
    rgba(255,255,255,.22);

  font-style: normal;
}


/* =========================================================
   SAFE AREA SPECIFICHE DEI TEMPLATE
   ========================================================= */


/* OTW */

.mp-promo-v3-theme-otw {
  --mp-v3-photo-top: 16%;
  --mp-v3-name-top: 59%;
}


/* ULTIMATE SCREAM */

.mp-promo-v3-theme-ultimatescream {
  --mp-v3-photo-top: 15.5%;
  --mp-v3-name-top: 59%;
}


/* THUNDERSTRUCK */

.mp-promo-v3-theme-thunderstruck {
  --mp-v3-photo-top: 15.5%;
  --mp-v3-name-top: 58.7%;
}


/* FUTMAS */

.mp-promo-v3-theme-futmas {
  --mp-v3-photo-top: 16%;
  --mp-v3-name-top: 59.4%;
  --mp-v3-stats-top: 66.4%;
}


/* TOTY - bordi interni più stretti */

.mp-promo-v3-theme-toty {
  --mp-v3-photo-left: 40%;
  --mp-v3-photo-top: 17%;
  --mp-v3-photo-width: 45%;
  --mp-v3-photo-height: 40%;

  --mp-v3-name-top: 60%;

  --mp-v3-stats-left: 19%;
  --mp-v3-stats-right: 19%;
  --mp-v3-stats-top: 67%;

  --mp-v3-abilities-top: 85%;
}


/* FUTURE STARS */

.mp-promo-v3-theme-futurestars {
  --mp-v3-photo-top: 15.5%;
  --mp-v3-name-top: 58.8%;
}


/* FUT BIRTHDAY */

.mp-promo-v3-theme-futbirthday {
  --mp-v3-photo-top: 16%;
  --mp-v3-name-top: 59.2%;
}


/* TIME WARP */

.mp-promo-v3-theme-timewarp {
  --mp-v3-photo-top: 15.8%;
  --mp-v3-name-top: 59.2%;
}


/* TOTS */

.mp-promo-v3-theme-tots {
  --mp-v3-photo-left: 39.5%;
  --mp-v3-photo-top: 16.5%;
  --mp-v3-photo-width: 46%;
  --mp-v3-photo-height: 40.5%;

  --mp-v3-name-top: 59.5%;

  --mp-v3-stats-left: 18.5%;
  --mp-v3-stats-right: 18.5%;
  --mp-v3-stats-top: 66.8%;
}


/* SUMMER HEAT */

.mp-promo-v3-theme-summerheat {
  --mp-v3-photo-top: 15.5%;
  --mp-v3-name-top: 58.8%;
}


/* FUTTIES */

.mp-promo-v3-theme-futties {
  --mp-v3-photo-top: 15.8%;
  --mp-v3-name-top: 59.2%;
}


/* =========================================================
   DIMENSIONI
   STESSA CARTA, SOLTANTO SCALATA
   ========================================================= */

.mp-promo-v3-open-button {
  display: block;

  width: 100%;
  max-width: 315px;

  margin: 0 auto;

  padding: 0;

  border: 0;

  color: inherit;
  background: transparent;

  cursor: pointer;
}


.mp-promo-v3-open-button:hover {
  transform:
    translateY(-2px);
}


.mp-promo-v3-preview {
  max-width: 315px;
}


.mp-promo-v3-club {
  max-width: 355px;
}


.mp-promo-v3-detail {
  max-width: 390px;
}


/* =========================================================
   CLUB
   ========================================================= */

.mp-club-promo-v3 {
  position: relative;

  width: 100%;
  max-width: 405px;

  margin: 0 auto;

  padding: 12px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 29px;

  color: #fff;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.025)
    );

  box-shadow:
    0 26px 66px
    rgba(0,0,0,.42);

  cursor: pointer;
}


.mp-club-promo-v3-tools {
  position: absolute;

  z-index: 40;

  left: 17px;
  right: 17px;
  top: 17px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  pointer-events: none;
}


.mp-club-promo-v3-tools span {
  padding:
    5px 8px;

  border-radius:
    999px;

  color: #04110a;

  background:
    var(--green);

  font-size: 7px;
  font-weight: 1000;

  letter-spacing: .08em;
}


.mp-club-promo-v3-tools button {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  margin-left: auto;

  border:
    1px solid
    rgba(255,107,107,.42);

  border-radius:
    999px;

  color: #fff;

  background:
    rgba(255,107,107,.25);

  font-size: 18px;

  pointer-events: auto;
}


.mp-club-promo-v3 > footer {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin:
    7px 13px 2px;

  padding-top: 10px;

  border-top:
    1px solid
    rgba(255,255,255,.10);
}


.mp-club-promo-v3 > footer span {
  color: var(--green);

  font-size: 8px;
  font-weight: 1000;

  letter-spacing: .12em;
}


.mp-club-promo-v3 > footer strong {
  color: #fff;

  font-size: 9px;

  letter-spacing: .07em;
}


/* =========================================================
   CARTA NEL PROFILO CLUB APERTO
   ========================================================= */

.mp-club-profile-card-promo-v3 {
  width: 100% !important;

  max-width: 395px !important;

  min-height: 0 !important;

  margin:
    0 auto !important;

  padding: 0 !important;

  overflow:
    visible !important;

  border: 0 !important;
  border-radius: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}


.mp-club-profile-card-promo-v3::before,
.mp-club-profile-card-promo-v3::after {
  display:
    none !important;
}


/* =========================================================
   DETTAGLIO
   ========================================================= */

body.mp-promo-v3-modal-open {
  overflow: hidden;
}


.mp-promo-v3-detail-backdrop {
  position: fixed;

  z-index: 11000;

  inset: 0;

  display: grid;

  place-items: center;

  padding: 15px;

  overflow-y: auto;

  background:
    rgba(0,0,0,.86);

  backdrop-filter:
    blur(16px);
}


.mp-promo-v3-detail-modal {
  position: relative;

  width:
    min(
      100%,
      860px
    );

  max-height:
    calc(
      100vh - 30px
    );

  overflow-y: auto;

  padding: 22px;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 30px;

  background:
    linear-gradient(
      160deg,
      #101c18,
      #030706
    );

  box-shadow:
    0 36px 100px
    rgba(0,0,0,.78);
}


.mp-promo-v3-detail-close {
  position: absolute;

  z-index: 30;

  right: 15px;
  top: 15px;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 14px;

  color: #fff;

  background:
    rgba(255,255,255,.08);

  font-size: 26px;
}


.mp-promo-v3-detail-head {
  display: grid;

  grid-template-columns:
    minmax(
      300px,
      410px
    )
    minmax(
      0,
      1fr
    );

  align-items: center;

  gap: 26px;

  padding-right: 40px;
}


.mp-promo-v3-detail-card {
  width: 100%;
}


.mp-promo-v3-detail-info {
  min-width: 0;
}


.mp-promo-v3-detail-info > span {
  display: block;

  color: var(--green);

  font-size: 10px;
  font-weight: 1000;

  letter-spacing: .16em;
}


.mp-promo-v3-detail-info h2 {
  margin:
    8px 0 7px;

  font-size:
    clamp(
      32px,
      7vw,
      52px
    );

  line-height: .94;

  letter-spacing: -.055em;

  overflow-wrap: anywhere;
}


.mp-promo-v3-detail-info > p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;
}


/* stelle dettaglio */

.mp-promo-v3-detail-abilities {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 9px;

  margin-top: 18px;
}


.mp-promo-v3-detail-abilities > div {
  padding: 13px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 17px;

  background:
    rgba(255,255,255,.055);
}


.mp-promo-v3-detail-abilities
> div
> span {
  display: block;

  color: var(--muted);

  font-size: 10px;
  font-weight: 900;

  text-transform: uppercase;
}


.mp-promo-v3-detail-abilities
> div
> strong {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 7px;

  color: #fff;

  font-size: 15px;
}


.mp-promo-v3-detail-abilities
.mp-promo-v3-stars {
  display: inline-block;

  font-size: 16px;
}


/* =========================================================
   PLAYSTYLE NEL DETTAGLIO
   ========================================================= */

.mp-promo-v3-ps-section {
  display: grid;

  gap: 15px;

  margin-top: 22px;
}


.mp-promo-v3-ps-group {
  padding: 15px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 22px;

  background:
    rgba(255,255,255,.045);
}


.mp-promo-v3-ps-group > header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;
}


.mp-promo-v3-ps-group
> header
> span {
  color: var(--green);

  font-size: 9px;
  font-weight: 1000;

  letter-spacing: .13em;
}


.mp-promo-v3-ps-group
> header
> strong {
  min-width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  border-radius: 999px;

  color: #fff;

  background:
    rgba(255,255,255,.09);

  font-size: 13px;
}


.mp-promo-v3-ps-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 8px;
}


.mp-pv3-ps-item {
  min-width: 0;

  display: grid;

  grid-template-columns:
    44px
    minmax(0, 1fr);

  align-items: center;

  gap: 10px;

  padding: 10px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 16px;

  background:
    rgba(0,0,0,.18);
}


.mp-pv3-ps-item img {
  width: 44px;
  height: 44px;

  display: block;

  object-fit: contain;
}


.mp-pv3-ps-item div {
  min-width: 0;
}


.mp-pv3-ps-item strong,
.mp-pv3-ps-item span {
  display: block;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.mp-pv3-ps-item strong {
  color: #fff;

  font-size: 12px;
}


.mp-pv3-ps-item span {
  margin-top: 4px;

  color: var(--muted);

  font-size: 8px;
  font-weight: 1000;

  letter-spacing: .08em;
}


.mp-pv3-ps-item.is-plus {
  border-color:
    rgba(255,215,106,.30);

  background:
    linear-gradient(
      145deg,
      rgba(255,215,106,.12),
      rgba(0,0,0,.18)
    );
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .mp-promo-v3-open-button,
  .mp-promo-v3-preview {
    max-width: 310px;
  }


  .mp-promo-v3-club {
    max-width: 345px;
  }


  .mp-promo-v3-detail {
    max-width: 355px;
  }


  .mp-promo-v3-detail-modal {
    padding:
      58px 14px 18px;
  }


  .mp-promo-v3-detail-head {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 20px;

    padding-right: 0;
  }


  .mp-promo-v3-detail-card {
    width:
      min(
        100%,
        355px
      );

    margin: 0 auto;
  }


  .mp-promo-v3-detail-info {
    text-align: center;
  }


  .mp-promo-v3-detail-abilities {
    text-align: left;
  }


  .mp-promo-v3-ps-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }

}