body { background-color: transparent; color: #fff; font-family: 'Orbitron', sans-serif; margin: 0; padding: 20px; overflow: hidden; /* ล็อคหน้าจอหลักไม่ให้เลื่อนซ้อนกัน */ }
        
        /* --- ส่วนที่ FIX ไว้ด้านบน --- */
        .header-fixed {
            position: relative;
            background-color: transparent;
            z-index: 100;
            padding-bottom: 20px;
            border-bottom: 1px solid #1c242f;
        }

        /* --- Top 3 Cards --- */
        .top3-container { 
            display: flex; 
            align-items: flex-end; 
            justify-content: center; 
            gap: 20px; 
            margin-top: 10px; 
        }
        
        .card { background: #000; border: 1px solid #2a323d; border-radius: 15px; padding: 10px 10px; text-align: center; width: 220px; position: relative; }
        .rank-1 { border-color: #f1c40f; transform: scale(1.05); z-index: 10; box-shadow: 0 0 30px rgba(241, 196, 15, 0.15); }
        .rank-2 { border-color: #bdc3c7; }
        .rank-3 { border-color: #e67e22; }

        .medal-icon {width:60px;height:60px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-family:"Cinzel",serif;font-size:30px;font-weight:700;border-radius:50%;background:radial-gradient(circle at 30% 30%, #cbd0d8, #5a6068);color:#0a0807;box-shadow:0 4px 12px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.2)}
        .rank-num-big { font-size: 30px; font-weight: bold; color: #fff; line-height: 1; margin-bottom: 10px; display: block; }
        .char-name { font-size: 20px; font-weight: bold; color: #feab0c; display: block; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .char-job { color: #ffffff; font-size: 14px; }
        .char-lv { font-size: 25px; color: #fd0202; font-weight: bold; margin: 10px 0; display: block; }
		.char-guild { font-size: 15px; color: #70e316; font-weight: bold; margin: 10px 0; display: block; }
		.char-kill { font-size: 15px; color: #006d05; font-weight: bold; margin: 10px 0; }
		.char-dead { font-size: 15px; color: #e30303; font-weight: bold; margin: 10px 0; }

        /* --- Progress Bars --- */
        .progress-box { width: 100%; margin: 10px 0; position: relative; }
        .bar-bg { background: #fff; height: 10px; border-radius: 10px; overflow: hidden; }
        .bar-fill { background: linear-gradient(90deg, #37fd02, #1c580b); height: 100%; transition: width 0.8s ease-in-out; }
        .perc-val { font-size: 11px; color: #fff; display: block; text-align: right; margin-top: 5px; }

        /* --- Faction Colors --- */
        .good { color: #1ea902 !important; text-shadow: 0 0 8px rgba(0, 255, 102, 0.4); font-size: 14px;}
        .evil { color: #ff3333 !important; text-shadow: 0 0 8px rgba(255, 51, 51, 0.4); font-size: 14px;}
        .none { color: #fff; font-size: 14px  !important;}

        .tag { display: inline-block; padding: 5px 15px; border-radius: 5px; font-size: 20px; font-weight: bold; margin-top: 10px; background: rgba(255,255,255,0.05); }

        /* --- ส่วนที่ Scroll ได้ --- */
        .rank-list { 
            max-width: 1000px; 
            margin: 20px auto; 
            height: calc(100vh - 480px); /* คำนวณความสูงอัตโนมัติจากหน้าจอ */
            overflow-y: auto; 
            padding-right: 10px;
        }

        /* ตกแต่ง Scrollbar */
        .rank-list::-webkit-scrollbar { width: 6px; }
        .rank-list::-webkit-scrollbar-track { background: #060b12; }
        .rank-list::-webkit-scrollbar-thumb { background: #1c242f; border-radius: 10px; }
        .rank-list::-webkit-scrollbar-thumb:hover { background: #3a7bd5; }

        .list-item { background: #000; margin-bottom: 10px; border-radius: 12px; padding: 12px 25px; display: flex; align-items: center; border: 1px solid #011746; gap: 20px; }
        .list-num { width: 40px; color: #fff; font-weight: bold; font-size: 18px; }
        .list-name { flex: 1.5; font-weight: bold; font-size: 16px; color: #feab0c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .list-exp-area { flex: 2; padding: 0 20px; }
        .list-lv { flex: 0.5; color: #fd0202; font-weight: bold; font-size: 18px; text-align: right; }
        .list-job { flex: 0.8; color: #ffffff; font-size: 16px; text-align: center; }
        .list-fact { flex: 0.8; font-weight: bold; text-align: right; font-size: 14px; }
		.list-guild { font-size: 16px; color: #70e316; font-weight: bold; margin: 10px 0; display: block; }
		.list-kill { font-size: 16px; color: #006d05; font-weight: bold; margin: 10px 0; }
		.list-dead { font-size: 16px; color: #e30303; font-weight: bold; margin: 10px 0; }
		
		.reborn-tag {
    background: #ff4757;
    color: white;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 12px;
    margin-left: 5px;
    vertical-align: middle;
}
.list-reborn { flex: 0.5; text-align: center; color: #ff4757; font-weight: bold; }
    
	
/* ── TABS ── */
    .tab-wrap{
      display:flex;justify-content:center;margin-bottom:0rem;
    }
    .tabs{
      display:inline-flex;gap:4px;padding:4px;
      border-radius:14px;
      background:var(--glass);backdrop-filter:blur(15px);
      border:1px solid var(--glass-border);
    }
    .tabs button {
  font-family: 'Kanit';
  font-weight: 500;
  font-size: 1rem;        /* ขยายขนาดตัวหนังสือ */
  padding: 0.5rem 1rem;       /* เพิ่มพื้นที่รอบปุ่ม */
  cursor: pointer;
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 10px;      /* เพิ่มความโค้งเล็กน้อย */
  transition: all 0.3s;
  position: relative;
  }
    .tabs button:hover{color:#fb0101}
    .tabs button.active{
      background:#e88f02;
      color:#fff;font-weight:1000;
      box-shadow:0 0px 0px rgba(0,212,255,0.2);
	  
	  font-size: 1rem;        /* ขยายขนาดตัวหนังสือ */
      padding: 0.5rem 1rem;       /* เพิ่มพื้นที่รอบปุ่ม */
      cursor: pointer;
      
    }

    /* ── PANELS ── */
    .panel{display:none}
    .panel.active{display:block;animation:fadeUp 0.4s ease}
    @keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}

    /* ── TOP 3 PODIUM ── */
    .podium{
      display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;
      margin-bottom:2rem;align-items:end;
    }
    .podium-card{
      padding:2rem 1.2rem;text-align:center;position:relative;overflow:hidden;
    }
    .podium-card::before{
      content:'';position:absolute;inset:0;border-radius:16px;
      opacity:0;transition:opacity 0.4s;
    }
    .podium-card:hover::before{opacity:1}
    .podium-card:hover{transform:translateY(-6px);box-shadow:var(--glow-cyan)}