:root{--bg: #0b0c10; --panel: #12151a; --text: #e8eaed; --muted:#9aa0a6; --primary:#4f8cff; --accent:#ef4444; --danger:#ef4444; --card:#0f1116; --border:#22252b}
@media (prefers-color-scheme: light){:root{--bg:#f7f8fa; --panel:#ffffff; --text:#1f2937; --muted:#6b7280; --primary:#2b6aff; --accent:#dc2626; --danger:#dc2626; --card:#ffffff; --border:#e5e7eb}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif}
.container{max-width:1100px; margin:0 auto; padding:16px}
.site-header{padding:24px 16px 0; text-align:center}
.site-header h1{margin:8px 0 4px; font-size:clamp(1.6rem, 2.2vw + 1rem, 2.4rem)}
.site-header .tag{margin:0; color:var(--muted)}
.controls{margin:14px auto 0; display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.chip{border:1px solid var(--border); background:var(--panel); color:var(--text); padding:8px 12px; border-radius:999px; cursor:pointer}
.chip.ghost{background:transparent}
.chip[aria-pressed="true"], .chip.active{border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in oklab, var(--primary) 30%, transparent)}

/* Header hero images */
.hero-img{width:84px; height:84px; object-fit:cover; /* crop to fill */
	object-position: center 10%; /* adjust vertical offset: lower numbers move image up, higher move it down */
	position:absolute; top:14px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); opacity:.9; border-radius:50%;}
.hero-left{left:12px}
.hero-right{right:12px}
@media (min-width:720px){
	.site-header{position:relative; padding-top:32px}
	.hero-img{width:112px; height:112px}
	.hero-left{left:20px}
	.hero-right{right:20px}
}
@media (max-width:480px){
	.hero-img{width:64px; height:64px; top:10px}
}
.hero-img.highlight{outline:3px solid color-mix(in oklab, var(--primary) 40%, transparent); border-radius:50%}

.grid{display:grid; gap:16px; grid-template-columns:repeat(12, 1fr)}
.card{grid-column:1 / -1; background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden}
.card header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border)}
.card header h2{margin:0; font-size:1.1rem}
.card .content{padding:8px 16px 16px}
.collapse-btn {
	background: none;
	border: none;
	color: var(--muted);
	font-size: 1.2em;
	cursor: pointer;
	margin-left: 8px;
	transition: transform 0.2s;
	vertical-align: middle;
}
.collapse-btn[aria-expanded="false"] {
	transform: rotate(-90deg);
}
.table{width:100%; border-collapse:collapse}
.table th, .table td{padding:10px 8px; text-align:right; border-bottom:1px solid var(--border)}
.table th:first-child, .table td:first-child{text-align:left}
.table tr:last-child td{border-bottom:none}
.badge{font-size:.75rem; color:var(--muted)}
.player{font-weight:600}
.highlight{background:color-mix(in oklab, var(--primary) 10%, transparent)}
.metric{color:var(--muted)}

.section-total{grid-column:span 12}

.site-footer{padding:24px 16px 40px; text-align:center; color:var(--muted)}

/* Visualization bars */
.viz{margin-top:10px; display:grid; gap:10px}
.viz-row{display:grid; gap:6px}
.viz-label{display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:.9rem}
.viz-bars{position:relative; height:12px; background:color-mix(in oklab, var(--panel) 60%, transparent); border:1px solid var(--border); border-radius:999px; overflow:hidden; display:flex}
.viz-bar{height:100%}
.viz-bar.sesko{background:color-mix(in oklab, var(--primary) 75%, transparent)}
.viz-bar.gyokeres{background:color-mix(in oklab, var(--accent) 75%, transparent)}
.viz-bar.winner{filter:saturate(1.25)}
.viz-bar.highlight{outline:2px solid color-mix(in oklab, currentColor 60%, transparent)}