:root{ --bg:#0b1220; --panel:#131c2e; --line:#22304a; --ink:#f1f5f9; --muted:#93a3bb;
  --accent:#38bdf8; --green:#34d399; --amber:#fbbf24; }
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Segoe UI",Roboto,Arial,sans-serif;padding-bottom:env(safe-area-inset-bottom);}
.wrap{max-width:560px;margin:0 auto;padding:14px;}
.top{position:sticky;top:0;z-index:5;background:linear-gradient(180deg,var(--bg) 70%,rgba(11,18,32,0));
  padding:calc(14px + env(safe-area-inset-top)) 14px 8px;}
.top h1{margin:0;font-size:20px;}
.top .t{color:var(--accent);font-weight:700;}
.top .upd{font-size:12px;color:var(--muted);margin-top:2px;}
.back{display:inline-block;color:var(--accent);text-decoration:none;font-size:15px;margin-bottom:8px;}
.sec-title{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin:18px 0 8px;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:10px;}
.card.tap{cursor:pointer;transition:border-color .15s;} .card.tap:active{border-color:var(--accent);}
.empty{color:var(--muted);text-align:center;padding:26px 0;}

/* Live-Karten */
.lv-board{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.lv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.lv-row + .lv-row{margin-top:8px;}
.lv-name{flex:1;min-width:0;font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lv-score{font-size:30px;font-weight:800;min-width:74px;text-align:right;}
.lv-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.lv-meta b{color:var(--ink);}

/* Gruppen */
.grp-name{font-size:18px;font-weight:800;color:var(--accent);margin-bottom:8px;}
table.mini{width:100%;border-collapse:collapse;}
table.mini th{font-size:11px;color:var(--muted);text-transform:uppercase;text-align:center;padding:3px 4px;border-bottom:1px solid var(--line);}
table.mini td{font-size:14px;text-align:center;padding:4px;border-bottom:1px solid rgba(255,255,255,.05);}
table.mini .l{text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}
table.mini .pk{color:var(--green);font-weight:800;}
.badge{display:inline-block;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700;}
.badge.offen{background:#1e293b;color:var(--muted);}
.badge.läuft{background:rgba(52,211,153,.18);color:var(--green);}
.badge.fertig{background:rgba(56,189,248,.15);color:var(--accent);}

/* Statistik-Kacheln */
.stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.stat-tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;}
.stat-tile .v{font-size:24px;font-weight:800;color:var(--accent);}
.stat-tile .k{font-size:11px;color:var(--muted);margin-top:3px;}
.stat-tile .s{font-size:12px;color:var(--ink);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Tabs */
.tabs{display:flex;gap:6px;margin:10px 0 12px;}
.tab{flex:1;text-align:center;padding:9px 6px;border-radius:10px;background:var(--panel);border:1px solid var(--line);
  color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;}
.tab.active{color:var(--ink);border-color:var(--accent);background:rgba(56,189,248,.12);}
.info-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.info-row:last-child{border-bottom:none;}
.info-row .k{color:var(--muted);} .info-row .v{font-weight:700;text-align:right;}

/* Statistik-Vergleich (zwei Spalten) */
.cmp{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.cmp:last-child{border-bottom:none;}
.cmp .a{font-size:17px;font-weight:700;text-align:left;}
.cmp .b{font-size:17px;font-weight:700;text-align:right;}
.cmp .k{font-size:11px;color:var(--muted);text-transform:uppercase;text-align:center;white-space:nowrap;}
.cmp-head{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-bottom:4px;}
.cmp-head .a,.cmp-head .b{font-weight:800;color:var(--accent);}
.cmp-head .a{text-align:left;} .cmp-head .b{text-align:right;}

/* Scoreboard */
.leg-sel{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.leg-btn{padding:6px 12px;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-weight:700;cursor:pointer;}
.leg-btn.active{color:var(--ink);border-color:var(--accent);background:rgba(56,189,248,.12);}
.sb-head{display:grid;grid-template-columns:1fr 54px 1fr;gap:6px;margin-bottom:6px;}
.sb-head .a{font-weight:800;text-align:left;} .sb-head .b{font-weight:800;text-align:right;}
.sb-head .a,.sb-head .b{color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-row{display:grid;grid-template-columns:1fr 54px 1fr;gap:6px;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);}
.sb-row .a{text-align:left;font-size:18px;font-weight:700;}
.sb-row .b{text-align:right;font-size:18px;font-weight:700;}
.sb-row .d{text-align:center;font-size:13px;color:var(--muted);}
.sb-row .bust{color:var(--amber);}
.toggle{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:14px;color:var(--muted);}
.toggle input{width:18px;height:18px;}
.best-of{text-align:center;color:var(--muted);font-size:13px;margin-top:14px;}

/* Beendete Begegnungen auf der Public-Seite antippbar machen */
.mini tr.finished-match { cursor: pointer; }
.mini tr.finished-match:hover { background: rgba(255,255,255,.06); }
.tap-hint { color: var(--muted); font-size: 11px; margin-left: 6px; white-space: nowrap; }

/* ===== KO auf der mobilen Seite ===== */
.ko-row{padding:8px 0;border-top:1px solid var(--line,#1f2a3d);}
.ko-row:first-of-type{border-top:none;}
.ko-row-vs{font-weight:700;}
.ko-row-vs .vs{color:var(--muted,#93a3bb);font-weight:400;font-size:13px;}
.ko-row-meta{font-size:12px;color:var(--muted,#93a3bb);margin-top:3px;}
.badge.pending{background:rgba(147,163,187,.2);color:var(--muted,#93a3bb);}
.badge.running{background:rgba(52,211,153,.2);color:#34d399;}
.badge.finished{background:rgba(56,189,248,.2);color:#38bdf8;}