<!doctype html>
<html lang="en">
<head>
  <?php
    $pagename = 'ZEOnline - Ranking';
    include('head.php'); 
    include('src/zeosrv/srv.ranking.php'); 
  ?>
  <style>
    :root{
      --bg-900:#121212; --bg-800:#1b1b1b; --bg-700:#242424;
      --txt-100:#f0e6d2; --txt-200:#fff7e0; --muted:#b9b1a2;
      --brand:#e3c374; --brand-2:#caa550; --shadow:0 18px 50px rgba(0,0,0,.35);
      --radius:16px;
    }

    /* ===== Fantasy top bar (matches Home) ===== */
    .topnav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(8px); background:rgba(0,0,0,.45); border-bottom:1px solid rgba(255,215,128,.15); box-shadow:0 2px 10px rgba(0,0,0,.45); }
    .topnav .wrap{ max-width:1200px; margin:auto; padding:.65rem clamp(12px,3vw,24px); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
    .brand{ font-weight:900; letter-spacing:.5px; color:#e3c374; font-family:"Cinzel", Georgia, serif; text-shadow:0 0 6px rgba(227,195,116,.55); }
    .menu{ display:flex; gap:.65rem; flex-wrap:wrap; align-items:center; }
    .menu a, .dropbtn{
      position:relative; color:#f0e6d2; text-decoration:none; padding:.55rem 1rem; border-radius:12px;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25));
      border:1px solid rgba(255,255,255,.1); font-weight:600; letter-spacing:.3px;
      font-family:"Cinzel", Georgia, serif; transition:all .25s ease;
      box-shadow:inset 0 1px 1px rgba(255,255,255,.2), inset 0 -1px 2px rgba(0,0,0,.35);
      display:inline-flex; align-items:center; gap:.35rem;
    }
    .menu a:hover, .dropbtn:hover{ background:linear-gradient(180deg,#d6b25e,#b48a3a); border-color:rgba(255,215,128,.6); color:#1b1b1b; box-shadow:0 0 12px rgba(255,215,128,.45), inset 0 1px 0 rgba(255,255,255,.4); transform:translateY(-1px); }
    .menu a[aria-current="page"]{ background:linear-gradient(180deg,#e3c374,#caa550); color:#1b1b1b; font-weight:700; box-shadow:0 0 15px rgba(227,195,116,.55); }
    .menu a[aria-current="page"]::after{ content:""; position:absolute; left:20%; right:20%; bottom:-6px; height:3px; border-radius:2px; background:linear-gradient(90deg,#f6e7b2,#e3c374,#b48a3a); box-shadow:0 0 6px rgba(227,195,116,.6); }
    .dropdown{ position:relative; display:inline-flex; align-items:center; }
    .dropbtn{ cursor:pointer; user-select:none; }
    .dropdown-menu{ position:absolute; right:0; top:calc(100% + .4rem); background:#1b1b1b; border:1px solid rgba(255,255,255,.15); border-radius:10px; min-width:180px; box-shadow:0 8px 18px rgba(0,0,0,.5); padding:.35rem; display:none; }
    .dropdown-menu a{ display:block; padding:.6rem .8rem; border-radius:8px; color:#f0e6d2; text-decoration:none; font-family:"Cinzel", Georgia, serif; }
    .dropdown-menu a:hover{ background:linear-gradient(180deg,#d6b25e,#b48a3a); color:#1b1b1b; }
    .dropdown.open .dropdown-menu{ display:block; }

    /* ===== Hero ===== */
    .hero{ position:relative; min-height:58vh; display:grid; place-items:center; overflow:hidden; background:#000; background-size:cover; background-position:center; isolation:isolate; }
    .hero::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(80% 60% at 50% 30%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.72) 100%), linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.15)); }
    .heroText{ position:relative; z-index:1; text-align:center; padding:clamp(1.5rem,4vw,3rem) 1rem; max-width:1200px; width:100%; color:#fff; }
    .heroText h1{ font-family:Georgia,"Times New Roman",serif; font-weight:800; letter-spacing:.02em; font-size:clamp(2.1rem,5.6vw,3.6rem); line-height:1.05; margin:0 0 .35rem; text-shadow:0 6px 24px rgba(0,0,0,.6); }
    .heroText p{ font-size:clamp(1rem,2vw,1.2rem); color:var(--txt-200); opacity:.95; margin:0 auto 1.25rem; max-width:64ch; }

    /* ===== Stats row ===== */
    .stats{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,2.2vw,20px); margin-top:clamp(1rem,2.2vw,1.6rem); }
    .stat{ grid-column:span 12; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:clamp(.9rem,2.6vw,1.25rem); box-shadow:var(--shadow); }
    .stat h1{ margin:.1rem 0; font-size:clamp(1.6rem,5vw,2.2rem); color:#fff; }
    .stat small{ display:block; color:#b9b1a2; font-size:.95rem; letter-spacing:.2px; }
    @media (min-width:700px){ .stat{ grid-column:span 4; } }

    /* ===== Ranking area wrapper ===== */
    .ranking-scope{ background:linear-gradient(180deg,var(--bg-800) 0%, var(--bg-700) 100%); padding:clamp(2.2rem,5vw,4rem) 0; }
    .container-narrow{ max-width:1100px; margin-inline:auto; padding-inline:clamp(14px,3vw,28px); }

    /* Fantasy panels */
    .panel{
      border-radius:16px;
      background:rgba(5,7,12,.78);
      border:1px solid rgba(227,195,116,.22);
      box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
      overflow:hidden;
    }
    .panel + .panel{ margin-top:18px; }
    .panel__title{
      padding:12px 16px;
      font-family:"Cinzel", Georgia, serif;
      font-weight:800; letter-spacing:.4px; color:#e3c374;
      background:linear-gradient(180deg, rgba(227,195,116,.12), rgba(227,195,116,.02));
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .panel__body{ padding:14px; }

    /* Tables inside panels */
    .panel__body table{ width:100% !important; border-collapse:separate; border-spacing:0; min-width:680px; }
    .panel__body thead th{
      position:sticky; top:0; z-index:1;
      background:linear-gradient(180deg,#e3c374,#caa550);
      color:#1b1b1b; font-weight:800; text-transform:uppercase; letter-spacing:.35px;
      padding:.75rem .9rem; border:none;
    }
    .panel__body tbody td{ padding:.65rem .9rem; border-top:1px solid rgba(255,255,255,.08); }
    .panel__body tbody tr:nth-child(even){ background:rgba(255,255,255,.03); }
    .panel__body tbody tr:hover{ background:rgba(255,255,255,.07); }
    .panel__body img{ max-width:100%; height:auto; }
    .panel__body .scroll, .panel__body [style*="overflow"], .panel__body iframe{ overflow:visible !important; }

    /* --- Top Lists polish ---------------- */
    .panel.has-toplists .panel__body{ display:grid; grid-template-columns:1fr; gap:12px; }
    .panel.has-toplists .panel__body table:first-of-type tr:first-child{
      display:flex; flex-wrap:wrap; gap:8px; border:0;
    }
    .panel.has-toplists .panel__body table:first-of-type tr:first-child > td{
      flex:1 1 140px; padding:0; border:0; background:transparent !important;
    }
    .panel.has-toplists .panel__body table:first-of-type tr:first-child > td > *{
      display:block; width:100%; text-align:center; padding:.55rem .8rem; border-radius:10px; text-decoration:none; color:#f0e6d2;
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25));
      border:1px solid rgba(255,255,255,.12);
      box-shadow: inset 0 1px 1px rgba(255,255,255,.2), inset 0 -1px 2px rgba(0,0,0,.35);
      font-weight:600; letter-spacing:.3px; font-family:"Cinzel", Georgia, serif; white-space:nowrap;
    }
    .panel.has-toplists .panel__body table:first-of-type tr:first-child > td > *:hover{
      background:linear-gradient(180deg,#d6b25e,#b48a3a); border-color:rgba(255,215,128,.6); color:#1b1b1b; transform:translateY(-1px);
    }
    .panel.has-toplists .panel__body table{ width:100% !important; max-width:100%; table-layout:auto; }
    .panel.has-toplists .panel__body table [width]{ width:auto !important; }
    .panel.has-toplists .panel__body [style*="overflow"]{ overflow:visible !important; }

    /* ===== EXTRA: FIX VOOR DE UNIQUE KILLS LOOKS ===== */
    .panel.has-toplists .panel__body table, 
    .panel.has-toplists .panel__body div[style*="background"] {
      width: 100% !important;
    }
    .panel.has-toplists tbody tr,
    .panel.has-toplists .panel__body > div {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      flex-wrap: wrap !important;
      background: rgba(255, 255, 255, 0.02) !important;
      border: 1px solid rgba(227, 195, 116, 0.12) !important;
      border-radius: 12px !important;
      padding: 12px 20px !important;
      margin-bottom: 6px !important;
      transition: all 0.25s ease-in-out !important;
    }
    .panel.has-toplists tbody tr:hover,
    .panel.has-toplists .panel__body > div:hover {
      background: rgba(227, 195, 116, 0.05) !important;
      border-color: rgba(227, 195, 116, 0.4) !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    }
    /* Verwijdert de storende checkboxes */
    .panel.has-toplists td:empty,
    .panel.has-toplists input[type="checkbox"] {
      display: none !important;
    }
    /* Geeft de monster avatars een strakke look */
    .panel.has-toplists td img,
    .panel.has-toplists img {
      width: 46px !important;
      height: 46px !important;
      min-width: 46px !important;
      object-fit: cover !important;
      border-radius: 8px !important;
      border: 2px solid #e3c374 !important;
      box-shadow: 0 0 10px rgba(227, 195, 116, 0.25) !important;
      background: #121212 !important;
      margin-right: 15px !important;
    }
    .panel.has-toplists td {
      font-weight: 700 !important;
      color: #f0e6d2 !important;
      border: none !important;
      padding: 0 !important;
      background: transparent !important;
    }
    .panel.has-toplists td strong,
    .panel.has-toplists b {
      color: #e3c374 !important;
      font-family: "Cinzel", Georgia, serif !important;
      display: block !important;
    }
    /* Duwt de datum netjes helemaal naar rechts */
    .panel.has-toplists td:last-child,
    .panel.has-toplists small {
      margin-left: auto !important;
      font-size: 0.85rem !important;
      color: #b9b1a2 !important;
