/* Paket statistik: eigene Styles (Bestenliste, Deine Statistiken), nutzt die Tokens aus style.css */

/* ===== Ganzseitiges Panel (wie .full im Entwurf) ===== */
.screen.st-screen{display:block;padding:0;background:var(--dim);backdrop-filter:none}
.st-panel{position:relative;width:100%;max-width:430px;min-height:100dvh;margin:0 auto;display:flex;flex-direction:column;background:var(--panel);padding:var(--safe-top) 0 var(--safe-bottom);box-shadow:0 0 0 1px var(--line)}
.screen.st-screen:not(.hidden) .st-panel{animation:einblenden .22s ease-out}
.st-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:12px 8px 14px 20px}
.st-kopf-links{display:flex;align-items:center;gap:12px;min-width:0}
.st-avatar{flex:0 0 auto;display:inline-flex;line-height:0}
.st-crumb{font:400 11px var(--f-mono);letter-spacing:.04em;color:var(--copper-text);text-transform:uppercase}
.st-h1{margin:4px 0 0;font:700 28px/1.05 var(--f-cond);color:var(--text)}
.st-ib{flex:none;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:0;border-radius:24px;padding:0;color:var(--muted);cursor:pointer}
.st-ib:hover{color:var(--text)}
.st-btns{display:flex;flex-direction:column;gap:10px;padding:14px 20px 26px}
.st-sec{font:400 11px var(--f-mono);letter-spacing:.06em;color:var(--muted);padding:20px 20px 6px;text-transform:uppercase;margin:0}
.st-note{margin:12px 20px 0;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ===== Bestenliste ===== */
.bt-tabs{display:flex;align-items:center;justify-content:center;gap:14px;padding:0 20px 12px}
.bt-tab{position:relative;padding:0 0 5px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--muted-2);font:400 11px var(--f-mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.bt-tab::after{content:"";position:absolute;inset:-14px -7px}   /* Trefferfläche mindestens 44 px hoch */
.bt-tab:hover{color:var(--muted)}
.bt-tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--copper)}
.bt-paare{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 20px 8px}
.bt-paare-k{font:400 11px var(--f-mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.seg2 .bt-p{position:relative;min-width:44px;min-height:36px;padding:0 10px;border:0;border-radius:6px;background:transparent;color:var(--muted-3);font:400 13px var(--f-mono);cursor:pointer}
.seg2 .bt-p::after{content:"";position:absolute;inset:-4px -2px}
.seg2 .bt-p[aria-pressed="true"]{background:var(--copper);color:var(--copper-ink);font-weight:600}
.bt-karte{display:flex;flex-direction:column;min-height:160px}
.bt-liste{list-style:none;margin:0;padding:0}
.bt-zeile{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 20px;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--text-3)}
.bt-kopf{min-height:30px;border-bottom-color:var(--line-2);font:400 11px var(--f-mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.bt-kopf .bt-r{font-size:11px}
.bt-r{flex:none;width:24px;font:400 13px var(--f-mono);color:var(--muted)}
.bt-zeile.top .bt-r{color:var(--copper-text)}
.bt-av{flex:none;display:inline-flex;line-height:0}
.bt-av-platz{flex:none;width:32px}
.bt-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3)}
.bt-du{font:400 11px var(--f-mono);color:var(--copper-text);margin-left:6px}
.bt-g{flex:none;width:52px;text-align:right;font:400 12px var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.bt-p2{flex:none;min-width:64px;white-space:nowrap;text-align:right;font:700 19px var(--f-cond);color:var(--text-3);font-variant-numeric:tabular-nums}
.bt-kopf .bt-g,.bt-kopf .bt-p2{font:400 11px var(--f-mono);color:var(--muted)}
.bt-kopf .bt-n{color:var(--muted)}
.bt-zeile.eigen{background:var(--copper-row)}
.bt-zeile.eigen .bt-n,.bt-zeile.eigen .bt-p2{color:var(--text)}
.bt-zeile.eigen .bt-r{color:var(--copper-text)}
#bestScreen .best-status{padding:10px 20px 0}

/* ===== Deine Statistiken ===== */
.sx-gesamt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 20px 18px}
.sx-seg{position:relative;display:inline-block;white-space:nowrap;background:var(--seg-bg);border:1px solid var(--seg-border);border-radius:10px;padding:4px 10px;font:400 46px/1 var(--f-seg);letter-spacing:.06em}
.sx-seg .gh{color:var(--seg-ghost-ok)}
.sx-seg .v{position:absolute;left:10px;top:4px;color:var(--seg-green);text-shadow:0 0 10px var(--seg-green-glow)}
.sx-seg .v .d{color:var(--seg-dim-ok);text-shadow:none}
.sx-seg-k{font:400 11px var(--f-mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.sx-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 20px}
.sx-kachel{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px 14px;background:var(--sheet);border:1px solid var(--line);border-radius:12px}
.sx-kachel .k{font:400 11px var(--f-mono);letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.sx-kachel .w{font:700 28px/1.05 var(--f-cond);color:var(--text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sx-kachel .s{font-size:12.5px;color:var(--muted)}
.sx-modus{display:flex;flex-direction:column;gap:6px;padding:10px 20px;border-bottom:1px solid var(--line)}
.sx-modus-z{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sx-modus-n{font-size:15.5px;color:var(--text-3)}
.sx-modus-m{font:400 12px var(--f-mono);color:var(--muted);text-align:right}
.sx-modus-m b{font-weight:400;color:var(--text)}
.sx-balken{height:6px;border-radius:3px;background:var(--line)}
.sx-balken i{display:block;height:6px;border-radius:3px;background:var(--copper)}
.sx-gegner{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 20px;border-bottom:1px solid var(--line)}
.sx-gegner-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sx-gegner-n{display:flex;align-items:center;gap:8px;font-size:15.5px;color:var(--text)}
.sx-gegner-n span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-gegner-s{font:400 12px var(--f-mono);color:var(--muted)}
.sx-badge{flex:none;font:600 11px var(--f-mono);color:var(--copper-ink);background:var(--copper);border-radius:4px;padding:3px 6px}
.sx-bilanz{flex:none;font:700 20px var(--f-cond);font-variant-numeric:tabular-nums;white-space:nowrap}
.sx-bilanz .s{color:var(--green)}
.sx-bilanz .t{color:var(--red-2)}
.sx-bilanz .x{color:var(--muted)}
.sx-rekord{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line)}
.sx-rekord .k{font:400 12px var(--f-mono);letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.sx-rekord .v{font:700 24px var(--f-cond);color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
.sx-leer{margin:8px 20px 0;padding:22px 18px;background:var(--sheet);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;gap:8px;text-align:center}
.sx-leer h3{margin:0;font:700 22px/1.1 var(--f-cond);color:var(--text)}
.sx-leer p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.sx-fuss{height:30px}
@media (prefers-reduced-motion:reduce){.screen.st-screen:not(.hidden) .st-panel{animation:none}}