/* Widen the matchup page beyond the plugin's usual card width. We do NOT use
   the classic left:50%/-50vw "full-bleed" CSS trick here — it only recenters
   correctly when the theme's content column itself is centered with plain
   margin:auto directly under the viewport, which many themes (incl. custom
   ones) are not; on an off-center or nested container it shifts the whole
   section sideways and clips content (exactly what a mis-fit trick does).
   Instead JS below measures the element's real position and computes an
   exact-fit breakout, so it works regardless of the parent's layout — and if
   JS hasn't run yet (or fails), it simply stays at this safe contained width. */
.pp-matchup{ --mu-gap:22px; --mu-max:1220px; max-width:var(--mu-max); margin:0 auto; box-sizing:border-box; }
.pp-matchup[data-bleed="1"]{ max-width:none; }
.pp-mu-inner{max-width:var(--mu-max);margin:0 auto;padding:0 24px;box-sizing:border-box}

/* Header: side-anchored team blocks with a large faint vertical watermark
   of the team name along each outer edge (like a broadcast graphic). */
.pp-mu-header{
    position:relative; overflow:hidden; isolation:isolate;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
    padding:34px 40px;
    background:color-mix(in srgb, var(--pp-bg-card) 62%, transparent);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid var(--pp-border);
    border-radius:var(--pp-radius);box-shadow:var(--pp-shadow);margin-bottom:var(--mu-gap);
}
.pp-mu-watermark{
    position:absolute;top:0;bottom:0;width:110px;display:flex;align-items:center;justify-content:center;
    font-family:"Saira",-apple-system,sans-serif;font-weight:700;font-size:30px;letter-spacing:.3em;
    color:var(--pp-text);opacity:.07;writing-mode:vertical-rl;text-transform:uppercase;pointer-events:none;user-select:none;z-index:0;
}
.pp-mu-watermark.left{left:0;transform:rotate(180deg)}
.pp-mu-watermark.right{right:0}
.pp-mu-team{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pp-mu-team.home{justify-self:start}
.pp-mu-team.away{justify-self:end;order:3}
.pp-mu-logo{width:76px;height:76px;object-fit:contain;border-radius:14px;background:rgba(127,127,127,.08);padding:8px}
.pp-mu-name{font-family:"Saira",-apple-system,sans-serif;font-size:30px;font-weight:800;line-height:1.05;color:var(--pp-text)}
.pp-mu-vs{position:relative;z-index:1;font-size:13px;font-weight:800;color:var(--pp-text-faint);letter-spacing:.12em;width:64px;text-align:center}
.pp-mu-meta{position:relative;z-index:1;text-align:center;grid-column:1/-1;order:4;margin-top:8px;font-size:12.5px;color:var(--pp-text-muted);font-weight:600}

.pp-mu-secttitle{font-family:"Saira",-apple-system,sans-serif;font-size:24px;font-weight:800;color:var(--pp-text);margin:4px 0 16px}
.pp-mu-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pp-mu-chip{cursor:pointer;border:1px solid var(--pp-border);background:transparent;color:var(--pp-text-muted);font-size:12.5px;font-weight:700;padding:8px 16px;border-radius:20px;transition:.15s}
.pp-mu-chip.on{border-color:var(--pp-accent);color:var(--pp-accent);box-shadow:0 0 0 1px var(--pp-accent) inset}
.pp-mu-chip:disabled{opacity:.4;cursor:not-allowed}

.pp-mu-picks{display:grid;gap:16px}
.pp-mu-pick{background:var(--pp-bg-card);border:1px solid var(--pp-border);border-radius:var(--pp-radius);padding:22px;box-shadow:var(--pp-shadow)}
.pp-mu-pick-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.pp-mu-market{font-size:11px;font-weight:700;color:var(--pp-text-faint);text-transform:uppercase;letter-spacing:.07em}
.pp-mu-sel{font-size:19px;font-weight:800;color:var(--pp-text);margin-top:3px}
.pp-mu-units{font-size:12px;color:var(--pp-text-muted);font-weight:700;text-align:right;white-space:nowrap}
.pp-mu-capper{display:flex;align-items:center;gap:12px;margin:16px 0}
.pp-mu-avatar{width:46px;height:46px;border-radius:50%;background:var(--pp-accent);color:var(--pp-accent-text,#fff);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0;overflow:hidden}
.pp-mu-capper-name{font-weight:800;color:var(--pp-text);font-size:14.5px}
.pp-mu-capper-rec{font-size:12px;color:var(--pp-text-muted);font-variant-numeric:tabular-nums}
.pp-mu-hot{color:var(--pp-win);font-weight:700}
.pp-mu-analysis{font-size:14px;line-height:1.65;color:var(--pp-text);margin-top:6px}
.pp-mu-ts{font-size:11px;color:var(--pp-text-faint);margin-top:14px;padding-top:12px;border-top:1px solid var(--pp-border)}
.pp-mu-empty{text-align:center;padding:50px 20px;color:var(--pp-text-muted)}

/* Locked teaser: blurred fake analysis lines behind a clean card + a real
   SVG padlock (no emoji) + a prominent full-width CTA. */
.pp-mu-lock{position:relative;overflow:hidden;margin-top:16px;border-radius:var(--pp-radius-sm,10px);
    border:1px solid var(--pp-border); background:var(--pp-bg,var(--pp-bg-card));}
.pp-mu-lock-fake{padding:16px 18px 0;filter:blur(5px);opacity:.55;user-select:none;pointer-events:none}
.pp-mu-lock-fake .ln{height:11px;border-radius:5px;background:var(--pp-text-faint,var(--pp-border));margin-bottom:9px}
.pp-mu-lock-fake .ln:nth-child(1){width:96%}
.pp-mu-lock-fake .ln:nth-child(2){width:88%}
.pp-mu-lock-fake .ln:nth-child(3){width:72%}
.pp-mu-lock-cta{
    position:relative; margin-top:-34px; padding:34px 22px 22px;
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
    background:linear-gradient(180deg, transparent, var(--pp-bg,var(--pp-bg-card)) 55%);
}
.pp-mu-lock-icon{width:34px;height:34px;color:var(--pp-accent);margin-bottom:6px}
.pp-mu-lock-title{margin:0;font-size:15px;font-weight:800;color:var(--pp-text)}
.pp-mu-lock-sub{margin:2px 0 14px;font-size:12.5px;color:var(--pp-text-muted);max-width:340px}
.pp-mu-join{
    display:inline-flex;align-items:center;gap:6px;justify-content:center;width:100%;max-width:280px;
    background:linear-gradient(135deg,var(--pp-accent),var(--pp-accent-2,var(--pp-accent)));
    color:var(--pp-accent-text,#fff);font-weight:800;font-size:14.5px;padding:13px 24px;border-radius:10px;
    text-decoration:none;box-shadow:0 10px 24px -12px var(--pp-accent);transition:transform .15s,box-shadow .15s;
}
.pp-mu-join:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px var(--pp-accent)}

@media(max-width:760px){
    .pp-mu-header{padding:24px 16px;gap:10px}
    .pp-mu-name{font-size:19px}
    .pp-mu-logo{width:52px;height:52px}
    .pp-mu-watermark{display:none}
    .pp-mu-vs{width:auto}
}