:root{--ink:#172033;--muted:#667085;--line:#dfe5ec;--blue:#2563eb;--canvas:#f4f6f9}
*{box-sizing:border-box}body{background:var(--canvas);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0}.page-shell{margin:0 auto;max-width:1400px;padding:24px}.page-header{align-items:end;display:flex;justify-content:space-between;margin-bottom:18px}.page-header h1{font-size:1.45rem;margin:6px 0 0}.back-link{color:var(--blue);font-size:.75rem;text-decoration:none}.page-header form{align-items:center;display:flex;gap:8px}.page-header label{color:var(--muted);font-size:.72rem;font-weight:700}.page-header select{border:1px solid #cbd5e1;border-radius:7px;padding:7px 9px}.matrix-panel{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 2px 8px rgba(15,23,42,.06);padding:20px}.metric-tabs{display:flex;gap:5px}.metric-tabs button{background:#f1f5f9;border:0;border-radius:7px;color:#475569;cursor:pointer;font-size:.74rem;font-weight:700;padding:8px 13px}.metric-tabs button.active{background:var(--blue);color:#fff}.matrix-heading{align-items:end;display:flex;justify-content:space-between;margin:20px 0 10px}.matrix-heading h2{font-size:1rem;margin:0}.matrix-heading p{color:var(--muted);font-size:.7rem;margin:4px 0 0}.direction{color:var(--muted);display:flex;font-size:.68rem;gap:16px}.chart-frame{display:grid;grid-template-columns:35px 1fr;grid-template-rows:minmax(570px,68vh) 34px}.plot{border:1px solid #cbd5e1;grid-column:2;grid-row:1;overflow:hidden;position:relative}.quadrant{position:absolute}.quadrant span{color:rgba(30,41,59,.42);font-size:.72rem;font-weight:800;left:12px;letter-spacing:.08em;position:absolute;text-transform:uppercase;top:10px}.defense-led{background:#eff6ff}.complete{background:#ecfdf3}.struggling{background:#fff1f2}.offense-led{background:#fffbeb}.median{background:#64748b;opacity:.55;position:absolute;z-index:2}.median.vertical{height:100%;top:0;width:1px}.median.horizontal{height:1px;left:0;width:100%}.team-point{position:absolute;transform:translate(-50%,-50%);z-index:3}.team-point img{background:white;border:2px solid white;border-radius:50%;filter:drop-shadow(0 1px 2px rgba(15,23,42,.35));height:34px;object-fit:contain;padding:2px;transition:transform .15s;width:34px}.team-point span{background:rgba(255,255,255,.86);border-radius:3px;color:#334155;font-size:.52rem;font-weight:800;left:50%;padding:1px 3px;position:absolute;top:30px;transform:translateX(-50%)}.team-point:hover{z-index:6}.team-point:hover img{transform:scale(1.25)}.y-label{align-items:center;color:var(--muted);display:flex;font-size:.67rem;font-weight:700;grid-column:1;grid-row:1;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg)}.x-label{align-items:center;color:var(--muted);display:flex;font-size:.67rem;font-weight:700;grid-column:2;justify-content:center}.axis-note{color:#64748b;font-size:.58rem;left:4px;position:absolute;z-index:4}.axis-note.top{top:3px}.axis-note.bottom{bottom:3px}.direction span:first-child{color:#15803d}.direction span:last-child{color:#1d4ed8}
@media(max-width:800px){.page-shell{padding:10px}.page-header,.matrix-heading{align-items:flex-start;flex-direction:column;gap:12px}.matrix-panel{padding:12px}.metric-tabs{flex-wrap:wrap}.chart-frame{grid-template-rows:520px 34px}.team-point img{height:27px;width:27px}.team-point span{display:none}.quadrant span{font-size:.56rem}}

/* Refined quadrant and axis treatment */
.quadrant>span{background:rgba(255,255,255,.86);border:1px solid rgba(148,163,184,.25);border-radius:6px;color:#475569;font-size:.64rem;font-weight:750;letter-spacing:.035em;padding:6px 8px;text-transform:uppercase;z-index:5}
.quadrant .good{color:#15803d}.quadrant .bad{color:#dc2626}
.defense-led>span{left:12px;top:12px}.complete>span{left:auto;right:12px;top:12px}.struggling>span{bottom:12px;left:12px;top:auto}.offense-led>span{bottom:12px;left:auto;right:12px;top:auto}
.median{opacity:1}.median>span{background:#475569;border-radius:5px;color:#fff;font-size:.55rem;font-weight:750;letter-spacing:.02em;padding:4px 6px;position:absolute;white-space:nowrap}.median.vertical>span{bottom:8px;left:7px}.median.horizontal>span{left:8px;top:7px}
.y-label,.x-label{color:#64748b;font-size:.58rem;font-weight:650;letter-spacing:.02em}.y-label{flex-direction:row;gap:8px}.x-label{gap:10px}.y-label strong,.x-label strong{color:#1e293b;font-size:.63rem;letter-spacing:.12em}.y-label i,.x-label i{color:#15803d;font-style:normal}.y-label b,.x-label b{color:#16a34a;font-size:1rem}

/* Team markers must remain the top visual layer when labels overlap them. */
.quadrant{z-index:0}
.quadrant>span,.median{z-index:1}
.team-point{z-index:3}

/* Integrate the matrix into the standard league page shell. */
.right-section>.page-header{align-items:center;margin:0;padding-bottom:12px}.right-section>.page-header h1{font-size:22px;margin:0}.right-section>.page-header form{align-items:center;display:flex;gap:8px}.team-stat-selector{padding:0 80px}.matrix-page-content{margin:0}.right-section{min-width:0}
@media(max-width:900px){.team-stat-selector{padding:0}.team-stat-selector .stat-button-container li{padding:6px 2px}.team-stat-selector .stat-button-container a{font-size:.7rem;padding:12px 3px}}

/* Let the unified-page matrix use the vertical room left below its compact header and tabs. */
.chart-frame{grid-template-rows:clamp(520px,calc(100vh - 285px),760px) 30px;margin-top:12px}
.y-label b{display:inline-block;transform:rotate(180deg);writing-mode:horizontal-tb}