@import url('https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans:wght@400;600&display=swap');

.ssr-brand .title {
  font-family: 'Anton', sans-serif;
}
.ssr-wrap, .ssr-table {
  font-family: 'Open Sans', sans-serif;
}
.ssr-name {
  font-weight: 600;
}

/* Public table styling to match Sandy's Spiel dark theme */
.ssr-wrap{background:#111;color:#e5e5e5;border-radius:8px;padding:12px}
.ssr-brand{font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;text-align:center;letter-spacing:2px;margin:8px 0 18px 0}
.ssr-brand .title{font-size:48px;color:#E80D10;}
.ssr-brand .subtitle{font-size:14px;text-transform:uppercase;color:#ddd}
.ssr-tabs{display:flex;gap:12px;margin:16px 0}
.ssr-tab{background:#1d1d1d;padding:10px 14px;border-radius:6px;color:#fff;text-decoration:none;border:1px solid #2a2a2a}
.ssr-tab.active{background:#E80D10;border-color:#E80D10}
.ssr-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.ssr-thead th{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#aaa;padding:10px 12px;background:#1b1b1b}
.ssr-row{background:#1a1a1a;border:1px solid #2a2a2a}
.ssr-row td{padding:14px 12px;border-top:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a}
.ssr-rank{width:55px;text-align:center;color:#fff}
.ssr-name{display:flex;align-items:center;gap:12px;font-weight:700}
.ssr-avatar{width:32px;height:32px;border-radius:50%;background:#2a2a2a;display:inline-block}
.ssr-move.up{color:#3bd16f;font-weight:700}
.ssr-move.down{color:#e96a6a;font-weight:700}
.ssr-move.new{color:#3aa3ff;font-weight:700}


.ssr-logo { display:block; margin:0 auto 8px auto; width:60px; max-width:15%; }
@media (max-width: 600px){ .ssr-logo { width:45px; } }
.ssr-logo-link { display:block; text-align:center; }


/* === Mobile Responsive Enhancements === */
@media (max-width: 600px) {
  .ssr-brand .title { font-size: 28px; }
  .ssr-brand .subtitle { font-size: 12px; }
  .ssr-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; }
  .ssr-tab { flex: 0 0 auto; font-size: 13px; padding: 8px 10px; }
  .ssr-table, .ssr-thead { display: none; } /* Hide full table on mobile */
  .ssr-year table { border-collapse: separate; border-spacing: 0; width: 100%; }
  .ssr-year .ssr-row { display: block; border: 1px solid #2a2a2a; border-radius: 6px; margin-bottom: 10px; padding: 10px; background:#1a1a1a; }
  .ssr-year .ssr-row td { display: block; border: none; padding: 4px 0; font-size: 14px; }
  .ssr-year .ssr-row td.ssr-rank { font-weight: bold; color: #E80D10; font-size: 15px; }
  .ssr-year .ssr-row td.ssr-name { font-weight: 600; }
  .ssr-year .ssr-row td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: #aaa;
  }
}