/* Tsumo Ranking – verwendet dieselben Farben, Schatten und 840px-Container wie die Webseite. */
#ranking .ranking-heading { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:14px; }
#ranking .ranking-heading > div { flex:1 1 290px; }
#ranking .ranking-heading .section-title { margin-bottom:7px; }
#ranking .ranking-heading p { margin:0; }
#ranking .ranking-demo-toggle, #ranking .ranking-empty button {
  border:1px solid #d4ddd7; background:#f1faf5; border-radius:10px; padding:9px 12px;
  font:700 14px/1.2 "Roboto Condensed",sans-serif; cursor:pointer; color:#116338;
}
#ranking .ranking-demo-toggle:hover, #ranking .ranking-empty button:hover { background:#e2f7e9; }
#ranking .ranking-demo-toggle[aria-pressed="true"] { background:#114d30; color:#fff; border-color:#114d30; }
#ranking .ranking-note { margin:10px 0 16px; font-size:13px; line-height:1.35; color:var(--muted); }
#ranking .ranking-note.demo-active { color:#8a5a05; font-weight:700; }
#ranking .ranking-panel { min-width:0; border:1px solid #e6e9e7; border-radius:12px; padding:14px; }
#ranking .ranking-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; align-items:center; margin-bottom:14px; }
#ranking .ranking-tabs, .ranking-profile-variants { display:flex; gap:3px; padding:3px; background:var(--background); border-radius:10px; }
#ranking .ranking-tabs button, .ranking-profile-variants button { border:0; background:transparent; border-radius:8px; padding:9px 12px; font:700 14px/1 "Roboto Condensed",sans-serif; color:#666; cursor:pointer; white-space:nowrap; }
#ranking .ranking-tabs button.active, .ranking-profile-variants button.active { background:#114d30; color:white; }
#ranking .ranking-tabs button:focus-visible, .ranking-profile-variants button:focus-visible { outline:2px solid #05bd65; outline-offset:1px; }
#ranking .ranking-table { width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums; }
#ranking .ranking-table th { text-transform:uppercase; text-align:right; color:var(--muted); font-size:12px; font-weight:700; background:var(--background); padding:10px 8px; white-space:nowrap; }
#ranking .ranking-table th:nth-child(2), #ranking .ranking-table td:nth-child(2) { text-align:left; }
#ranking .ranking-table th:first-child, #ranking .ranking-table td:first-child { text-align:center; }
#ranking .ranking-table td { text-align:right; border-bottom:1px solid #ededed; padding:9px 8px; white-space:nowrap; }
/* Spiele: Spaltenkopf und Spielanzahl mittig statt am rechten Rand. */
#ranking .ranking-table th:nth-child(5), #ranking .ranking-table td:nth-child(5) { text-align:center; }
#ranking .ranking-table tbody tr:last-child td { border-bottom:0; }
#ranking .ranking-table tbody tr:hover { background:#f6fbf7; }
#ranking .ranking-rank { font-size:14px; font-weight:900; color:#127b46; }
#ranking .ranking-player { display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:0; border:0; background:none; color:var(--text); font:700 15px "Roboto Condensed",sans-serif; cursor:pointer; text-align:left; }
#ranking .ranking-player:hover { text-decoration:underline; }
#ranking .ranking-initial { display:inline-flex; align-items:center; justify-content:center; flex:0 0 27px; width:27px; height:27px; border-radius:50%; background:#dff8e9; color:#117842; font-size:13px; font-weight:700; }
#ranking .ranking-up { color:#008a4c; font-weight:700; }
#ranking .ranking-down, .ranking-profile-modal .ranking-down { color:#e8005f; font-weight:700; }
#ranking .ranking-steady { color:#777; }
#ranking .ranking-empty { text-align:center; padding:26px 12px; }
#ranking .ranking-empty strong { color:var(--text); font-size:19px; }
#ranking .ranking-empty p { margin:8px 0 16px; font-size:14px; }
.ranking-profile-modal .rating-svg { width:100%; height:auto; display:block; }
.ranking-profile-modal .rating-svg text { font:12px "Roboto Condensed",Arial,sans-serif; fill:#747474; }
#ranking button:focus-visible, .ranking-profile-modal button:focus-visible { outline:2px solid #0c9c5c; outline-offset:2px; }
.ranking-profile-modal { width:min(560px,calc(100% - 24px)); max-height:min(90dvh,780px); border:0; border-radius:16px; padding:0; background:white; color:var(--text); box-shadow:0 8px 24px rgba(0,15,30,.18); overflow:auto; }
.ranking-profile-modal::backdrop { background:rgba(0,15,30,.50); backdrop-filter:blur(2px); }
.ranking-profile-inner { position:relative; padding:26px; }
.ranking-profile-modal .ranking-profile-close { position:absolute; top:13px; right:14px; width:35px; height:35px; border:0; background:transparent; border-radius:50%; font-size:29px; cursor:pointer; }
.ranking-profile-modal .ranking-profile-close:hover { background:var(--background); }
.ranking-profile-eyebrow { display:block; font-size:14px; font-style:italic; color:#008f4d; font-weight:700; margin-bottom:3px; }
.ranking-profile-modal h2 { font-size:27px; font-weight:900; margin:0 48px 15px 0; }
.ranking-profile-modal h3 { font-size:18px; margin:22px 0 9px; }
.ranking-profile-variants { width:fit-content; margin-bottom:14px; }
.ranking-profile-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ranking-profile-stat { border-radius:10px; padding:12px; background:var(--background); }
.ranking-profile-stat span { display:block; font-size:13px; color:var(--muted); margin-bottom:5px; }
.ranking-profile-stat strong { font-size:22px; line-height:1; }
.ranking-profile-chart { min-height:155px; display:flex; align-items:center; justify-content:center; border:1px solid #e6e9e7; border-radius:10px; padding:8px; }
.ranking-profile-empty { font-size:14px; color:var(--muted); text-align:center; margin:15px 6px; }
.ranking-profile-games { display:grid; gap:6px; }
.ranking-profile-game { display:flex; justify-content:space-between; border-bottom:1px solid #eee; padding:7px 2px; font-size:15px; }
@media(max-width:740px) {
  #ranking .ranking-toolbar { align-items:stretch; }
  #ranking .ranking-tabs { flex:1 1 auto; justify-content:center; }
  #ranking .ranking-tabs button { flex:1; }
}
@media(max-width:500px) {
  #ranking .ranking-panel { padding:9px; }
  #ranking .ranking-table { font-size:13px; }
  #ranking .ranking-table th, #ranking .ranking-table td { padding:8px 3px; }
  #ranking .ranking-table th { font-size:10px; }
  #ranking .ranking-initial { display:none; }
  #ranking .ranking-player { font-size:13px; }
  #ranking .ranking-tabs button { font-size:12px; padding:9px 5px; }
  .ranking-profile-inner { padding:20px 16px; }
}
/* Additional nav item "Ranking" without exceeding the existing 840px container. */
@media(min-width:741px) {
  .header-row { gap:16px; }
  .header-row .logo { width:180px; }
  .header-row .menu { gap:16px; }
  .header-row .menu a { font-size:15px; }
}


/* Extrem schmale Displays und lange (freigegebene) Spielernamen. */
#ranking .ranking-table-wrap { max-width:100%; min-width:0; overflow-x:auto; }
#ranking .ranking-player span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:380px) {
  #ranking .ranking-table { min-width:300px; }
  #ranking .ranking-table th, #ranking .ranking-table td { padding:8px 2px; }
  #ranking .ranking-player { max-width:98px; }
  #ranking .ranking-table th:nth-child(3) { font-size:0; }
  #ranking .ranking-table th:nth-child(3)::after { content:'Δ'; font-size:11px; }
}

/* Anonyme Spieler: sichtbar, aber ohne Profil-Link oder aufdeckbare Initialen. */
#ranking .ranking-private-player { display:inline-flex; align-items:center; gap:8px; max-width:100%; color:var(--muted); font:700 15px "Roboto Condensed",sans-serif; text-align:left; cursor:default; }
#ranking .ranking-initial-private { background:#ececec; color:#777; }
@media(max-width:500px) { #ranking .ranking-private-player { font-size:13px; } }