:root{
  --border:#e6e6e6;
  --text:#111;
  --muted:#666;
  --winBg:#eaf8ee;
  --hoverBg:#f7f7f7;
}

/* Basis */
*{ box-sizing:border-box; }
body{
  margin:0;
  padding:0px;
  overflow-x: hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
}
.wrap{ position:relative; }

/* Größen je Layout */
body.portrait .wrap{ width:300px; max-width:300px; }
body.landscape .wrap{ width:800px; max-width:800px; }

body.portrait{ font-size:10px; }
body.landscape{ font-size:12px; }

h1{ font-size:14px; margin:0 0 8px 0; }

/* Topbar */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin:0 0 8px 0;
}
.filters{
  display:flex;
  gap:4px;
  flex-wrap:nowrap;
  align-items:center;
}
.btn{
  font-size:10px;
  padding:4px 8px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  cursor:pointer;
  color:var(--text);
}
.btn.active{
  background:#111;
  color:#fff;
  border-color:#111;
}
.pager{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
}
.pager button{
  font-size:10px;
  padding:4px 8px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:6px;
  cursor:pointer;
}
.pager button:disabled{ opacity:.4; cursor:default; }

/* Tabelle */
table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
thead th{
  text-align:left;
  font-weight:600;
  padding:6px 6px;
  border-bottom:1px solid var(--border);
  color:var(--muted);
}
tbody td{
  padding:6px 6px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.portrait thead th,
body.portrait tbody td{ padding:5px 5px; }

tbody tr:hover{ background:var(--hoverBg); }
tbody tr.win{ background:var(--winBg); }
tbody tr.hover-outline{ outline:1px solid #ddd; outline-offset:-1px; }

/* Spaltenbreiten Portrait */
body.portrait .c-date  { width:50px; text-align:left; padding-right:0; }
body.portrait .c-group { width:55px; text-align:center; }
body.portrait .c-score { width:35px; text-align:center; }
body.portrait .matchwrap{ white-space:normal; line-height:1.15; }

/* Spaltenbreiten Landscape */
body.landscape .c-date  { width:140px; }
body.landscape .c-group { width:80px; }
body.landscape .c-score { width:40px; text-align:center; }

/* Tooltip (global overlay) */
#tooltip{
  display:none;
  position:fixed;
  z-index:9999;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  padding:8px;
  font-size:12px;
  color:var(--text);
  max-width:min(760px, calc(100vw - 20px));
  pointer-events:none;
}
#tooltip .muted{ color:var(--muted); font-size:11px; }