.table-wrapper {
      background: rgba(16,17,23,.92);
      border: 1px solid rgba(255,255,255,.1);
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
    table.stats-table { width: 100%; min-width: 1320px; border-collapse: collapse; table-layout: auto; color: #eef1f7; }
    thead { background: rgba(255,255,255,.03); }
    th {
      text-align: right;
      padding: .55rem .55rem;
      font-size: .68rem;
      text-transform: uppercase;
      letter-spacing: .035em;
      color: #aeb7c8;
      cursor: pointer;
      white-space: normal;
      line-height: 1.15;
      user-select: none;
    }
    td { padding: .5rem .55rem; vertical-align: middle; text-align: right; white-space: nowrap; font-size: .86rem; }
    #stats-table-online th:first-child, #stats-table-online td:first-child { text-align: left; min-width: 145px; white-space: normal; }
    th.sorted-asc::after, th.sorted-desc::after { content:''; display:inline-block; margin-left:6px; border:6px solid transparent; vertical-align: middle; }
    th.sorted-asc::after { border-bottom-color: #7fc8ff; }
    th.sorted-desc::after { border-top-color: #7fc8ff; }
    tbody tr { border-top: 1px solid rgba(255,255,255,.07); transition: background .2s ease; }
    tbody tr:hover { background: rgba(127,200,255,.12); }
    tbody tr.player-team-red { background: rgba(208,76,76,.18); }
    tbody tr.player-team-red:hover { background: rgba(208,76,76,.26); }
    tbody tr.player-team-blue { background: rgba(70,110,215,.18); }
    tbody tr.player-team-blue:hover { background: rgba(70,110,215,.26); }
    tbody tr.player-team-neutral { background: rgba(180,180,190,.14); }
    tbody tr.player-team-neutral:hover { background: rgba(180,180,190,.2); }
    tbody tr.player-faded { opacity: .8; }
    tbody tr.player-faded:hover { opacity: .9; }
    .player-cell { display:flex; align-items:center; gap:.2rem; }
    .player-avatar-link { display:inline-flex; flex:0 0 auto; }
    .player-avatar {
      width: 38px; height: 38px;
      border: 1px solid rgba(255,255,255,.12); box-shadow: 0 4px 16px rgba(0,0,0,.35);
      object-fit: cover;
    }
    .player-cell > div { min-width: 0; }
    .player-cell a { display: inline-block; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .player-cell a.player-avatar-link { max-width:none; overflow:visible; }
    .player-cell a { color: inherit; text-decoration: none; }
    .online-overview { width:100%; margin-bottom:1rem; }
    .info-card-grid { display:flex; flex-wrap:wrap; gap:1rem; }
    .info-card {
      display:flex; justify-content:space-between; gap:.75rem;
      background: rgba(16,17,23,.92); border:1px solid rgba(255,255,255,.1); padding:1rem;
      flex: 1 1 calc(33.333% - 1rem); max-width: calc(33.333% - 1rem); min-width:340px; min-height:220px;
    }
    .info-card-left { display:flex; flex-direction:column; gap:.4rem; flex:1 1 auto; min-width: 0; }
    .info-card-right { flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
    .info-card .label { font-size:.75rem; color:#aeb7c8; text-transform:uppercase; }
    .info-card .hostname { font-size:1.25rem; font-weight:600; color:#f1f4fb; }
    .info-card .value { font-size:1rem; font-weight:600; color:#f1f4fb; }
    .info-card .subvalue { font-size:.9rem; color:#aeb7c8; }
    .info-card-image {
      width: 160px;
      height: 120px;
      border:1px solid rgba(255,255,255,.12);
      object-fit: cover;
      max-height: none;
      flex: 0 0 160px;
      display: block;
    }
    .online-class-icon { margin-left:.1rem; width:16px; height:16px; object-fit:contain; }
    .class-icon-strip { display:inline-flex; align-items:center; gap:.1rem; margin-left:.15rem; }
    .class-icon-strip .online-class-icon:first-child { margin-left:0; }
    .connect-url { text-decoration:none; color:#ee6c3b; }
    .server-flag { width:16px; height:11px; image-rendering:pixelated; }
    .empty-state { padding: 1rem; color:#aeb7c8; }
    @media (max-width: 900px) {
      .info-card { flex:1 1 calc(50% - 1rem); max-width: calc(50% - 1rem); min-width: 300px; }
    }
    @media (max-width: 640px) {
      .online-page { padding-left: 0; padding-right: 0; }
      .online-shell { padding: .45rem; }
      .info-card-grid { gap: .55rem; }
      .info-card { flex:1 1 100%; max-width:100%; flex-direction:column; min-height:auto; min-width: 0; padding: .65rem; }
      .info-card-right { flex:0 0 auto; margin-top:.75rem; }
      .info-card-image { width: 160px; height: 120px; max-height:none; }
      .table-wrapper { margin: 0; }
      table.stats-table { min-width: 980px; }
      th { padding: .42rem .42rem; font-size: .62rem; }
      td { padding: .4rem .42rem; font-size: .78rem; }
      .player-avatar { width: 30px; height: 30px; }
      .player-cell a { max-width: 88px; }
    }