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: 0px; padding: 0px 10px; text-align: center; width: 220px; position: relative; }*/
	.card {
    position: relative;
    background: #000;
    border: 1px solid #c8a34d;
    overflow: hidden;
	padding: 0px 10px; text-align: center; width: 220px;
}

.card::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(
        90deg,
        transparent,
        #ffd700,
        transparent
    );
    animation: borderRun 3s linear infinite;
}

.card::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #000;
    z-index: 1;
}

.card > * {
    position: relative;
    z-index: 2;
}

@keyframes borderRun {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
        
        .card { background: #000; border: 1px solid #2a323d; border-radius: 0px; 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: #fff; display: block; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .char-job { color: #7ffa72; font-size: 14px; }
        .char-lv { font-size: 25px; color: #ff3333; 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: #000; height: 10px; border-radius: 10px; overflow: hidden; }
        .bar-fill { background: linear-gradient(90deg, #62fcf3, #019edf); 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 #f4dafd; 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: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .list-exp-area { flex: 2; padding: 0 20px; }
        .list-lv { flex: 0.5; color: #ff3333; font-weight: bold; font-size: 18px; text-align: right; }
        .list-job { flex: 0.8; color: #7ffa72; 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:#291700;
      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)}
/* Modern Yulgang ranking skin */
body{font-family:'Kanit',sans-serif!important;color:#f4eee5!important;background:transparent!important;padding:12px!important;overflow:auto!important}
.menu{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:7px;margin:4px auto 14px!important;padding:11px 12px;max-width:1080px;border:1px solid rgba(228,180,94,.2);background:rgba(27,23,32,.88)}
.photo-container{width:44px;max-width:44px!important;height:44px!important;margin:0!important;padding:2px;border:1px solid rgba(228,180,94,.15);background:#17141c;transition:transform .18s,border-color .18s}
.photo-container:hover{transform:translateY(-3px);border-color:#e4b45e}
.photo-container img{width:38px;height:38px;object-fit:contain}
.photo-container a span{left:50%!important;margin-left:-65px!important;padding:5px 8px!important;border-color:#8b633d!important;background:#17141c!important;color:#ffe1a0!important;font-family:'Kanit',sans-serif!important}
.card,.list-item{background:linear-gradient(110deg,rgba(40,33,42,.98),rgba(24,21,29,.98))!important;border:1px solid rgba(228,180,94,.24)!important;border-radius:3px!important;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.card::after{background:#211b24!important}.rank-1{box-shadow:0 0 24px rgba(228,180,94,.18)!important}.medal-icon{background:radial-gradient(circle at 30% 30%,#ffe6ad,#9c672e)!important;color:#26180d!important}.char-lv,.list-lv{color:#f2c36d!important}.char-job,.list-job{color:#95d5b4!important}.list-item{border-radius:3px!important;padding:12px 18px!important;gap:16px!important}.list-num{color:#e4b45e!important}.rank-list{height:calc(100vh - 420px)!important;min-height:320px!important;max-height:720px!important;overflow-y:auto!important}.rank-list::-webkit-scrollbar-thumb{background:#82603d!important}.rank-list::-webkit-scrollbar-track{background:#17141c!important}
@media(max-width:600px){body{padding:7px!important}.top3-container{gap:7px!important;align-items:stretch!important}.card{width:33.33%!important;padding:9px 5px!important}.char-name{font-size:14px!important}.char-lv{font-size:18px!important}.medal-icon{width:42px!important;height:42px!important;font-size:22px!important}.list-item{padding:10px!important;gap:8px!important}.list-job{display:none!important}.rank-list{height:calc(100vh - 360px)!important}}


/* Transparent iframe canvases */
html,body{background:#151219!important;background-color:#151219!important}

/* Dark ranking scrollbars */
html{scrollbar-color:#765638 #151219;scrollbar-width:thin}::-webkit-scrollbar{width:10px;height:10px;background:#151219}::-webkit-scrollbar-track{background:#151219}::-webkit-scrollbar-thumb{background:#765638;border:2px solid #151219;border-radius:8px}::-webkit-scrollbar-thumb:hover{background:#a77a45}

/* Jade arena ranking skin */
body{font-family:'Kanit',Tahoma,sans-serif!important;color:#effffc!important;background:#080d16!important;padding:12px!important;overflow:auto!important}
.header-fixed{border-bottom:1px solid rgba(88,236,211,.24)!important}
.menu{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:4px auto 14px!important;padding:13px 12px;max-width:1080px;border:1px solid rgba(88,236,211,.19);border-radius:3px 17px 3px 17px;background:linear-gradient(110deg,#111e2b,#0c1722 55%,#161729);box-shadow:inset 0 0 24px rgba(58,205,192,.045),0 12px 30px rgba(0,0,0,.22)}
.photo-container{width:46px;max-width:46px!important;height:46px!important;margin:0!important;padding:2px;border:1px solid rgba(119,170,194,.24);border-radius:3px 11px 3px 11px;background:linear-gradient(145deg,#172b39,#101821);transition:transform .2s,border-color .2s,box-shadow .2s}
.photo-container:hover{transform:translateY(-4px) scale(1.04);border-color:#61efd8;box-shadow:0 0 18px rgba(69,231,209,.24)}.photo-container img{width:38px;height:38px;object-fit:contain}.photo-container a span{left:50%!important;margin-left:-65px!important;padding:5px 8px!important;border-color:#4cb8af!important;border-radius:3px 10px 3px 10px!important;background:#0c1722!important;color:#adffea!important;font-family:'Kanit',Tahoma,sans-serif!important}
.top3-container{gap:20px!important;margin:20px auto 24px!important;align-items:flex-end!important}.card{position:relative!important;width:230px!important;padding:18px 12px 16px!important;overflow:hidden!important;border:1px solid rgba(99,220,213,.34)!important;border-radius:4px 22px 4px 22px!important;background:linear-gradient(148deg,#132533 0%,#0c1722 55%,#19162b 100%)!important;box-shadow:0 16px 35px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.06)!important;transition:transform .25s,border-color .25s,box-shadow .25s!important}.card:before{inset:0!important;background:linear-gradient(110deg,transparent 15%,rgba(117,255,226,.12) 48%,transparent 78%)!important;transform:translateX(-130%);animation:jadeSweep 6s ease-in-out infinite!important;z-index:0!important}.card:after{inset:1px!important;border-radius:3px 21px 3px 21px!important;background:linear-gradient(150deg,rgba(16,33,46,.98),rgba(10,18,29,.98) 66%,rgba(23,21,40,.98))!important;z-index:1!important}.card>*{z-index:2!important}.card:hover{transform:translateY(-8px)!important;border-color:rgba(105,255,224,.85)!important;box-shadow:0 22px 42px rgba(0,0,0,.4),0 0 26px rgba(44,222,197,.14)!important}@keyframes jadeSweep{0%,65%{transform:translateX(-130%)}95%,100%{transform:translateX(130%)}}
.rank-1{border-color:#70ffe1!important;box-shadow:0 0 0 1px rgba(103,255,223,.15),0 0 34px rgba(45,230,203,.22),0 18px 40px rgba(0,0,0,.35)!important;transform:translateY(-9px) scale(1.035)!important}.rank-1:after{background:linear-gradient(145deg,rgba(17,54,61,.98),rgba(10,24,35,.98) 68%,rgba(28,27,52,.98))!important}.rank-2{border-color:rgba(147,187,255,.65)!important}.rank-3{border-color:rgba(255,116,143,.62)!important}
.medal-icon{width:62px!important;height:62px!important;margin:0 auto 13px!important;border:1px solid rgba(222,255,249,.7);background:radial-gradient(circle at 34% 25%,#d5fff5,#42c9bd 45%,#125d66 100%)!important;color:#072027!important;font-family:'Kanit',sans-serif!important;font-size:30px!important;box-shadow:0 0 0 5px rgba(86,240,209,.08),0 8px 24px rgba(0,0,0,.45),0 0 20px rgba(62,232,208,.18)!important}.rank-2 .medal-icon{background:radial-gradient(circle at 34% 25%,#f1f6ff,#96b8e3 55%,#486187)!important}.rank-3 .medal-icon{background:radial-gradient(circle at 34% 25%,#fff0e9,#f49580 55%,#8e4456)!important}.char-name{font-size:20px!important;letter-spacing:.03em}.char-job,.list-job{color:#79ecd0!important}.char-lv,.list-lv{color:#75f0dc!important;text-shadow:0 0 18px rgba(67,222,201,.18)}.char-guild,.list-guild{color:#83e9c9!important}.char-kill,.list-kill{color:#ff8198!important}.char-dead,.list-dead{color:#a5aeca!important}.good{color:#6cf0bf!important;text-shadow:0 0 12px rgba(72,239,177,.36)!important}.evil{color:#ff718d!important;text-shadow:0 0 12px rgba(255,80,120,.35)!important}.tag{border:1px solid rgba(102,240,211,.2)!important;border-radius:3px 12px 3px 12px!important;background:rgba(42,123,112,.17)!important;color:#79f4cf!important;font-size:16px!important}.bar-bg{height:9px!important;border:1px solid rgba(127,238,224,.14);background:#071018!important;border-radius:20px!important}.bar-fill{background:linear-gradient(90deg,#65ffdc,#27bcd2 58%,#7389ff)!important;box-shadow:0 0 14px rgba(54,228,210,.4)}.perc-val{color:#bde9e5!important}
.rank-list{max-width:1080px!important;height:calc(100vh - 445px)!important;min-height:320px!important;max-height:720px!important;margin:20px auto!important;padding:5px 13px 5px 2px!important;border-top:1px solid rgba(90,226,210,.2);overflow-y:auto!important}.rank-list::-webkit-scrollbar-track{background:#080d16!important}.rank-list::-webkit-scrollbar-thumb{background:#287a77!important;border:2px solid #080d16!important}.list-item{position:relative;margin-bottom:9px!important;padding:13px 18px!important;gap:17px!important;border:1px solid rgba(118,170,190,.19)!important;border-left:3px solid rgba(85,232,210,.46)!important;border-radius:3px 15px 3px 15px!important;background:linear-gradient(105deg,rgba(18,34,47,.98),rgba(11,20,32,.98) 62%,rgba(23,22,41,.98))!important;box-shadow:0 8px 20px rgba(0,0,0,.16)!important;transition:transform .18s,border-color .18s,box-shadow .18s!important}.list-item:hover{transform:translateX(5px)!important;border-color:rgba(89,243,215,.55)!important;box-shadow:0 10px 24px rgba(0,0,0,.28),0 0 18px rgba(54,206,190,.08)!important}.list-num{width:42px!important;color:#65efd3!important;font-size:19px!important}.list-name{color:#effffc!important;font-size:16px!important}.list-exp-area{padding:0 14px!important}.list-reborn{color:#ff829b!important}.reborn-tag{border-radius:3px 9px 3px 9px!important;background:#b93958!important}
.rank-list::-webkit-scrollbar{width:9px!important}.rank-list::-webkit-scrollbar-thumb:hover{background:#50cdbb!important}html,body{scrollbar-color:#287a77 #080d16!important;scrollbar-width:thin!important}::-webkit-scrollbar{width:10px;height:10px;background:#080d16}::-webkit-scrollbar-track{background:#080d16}::-webkit-scrollbar-thumb{background:#287a77;border:2px solid #080d16;border-radius:8px}
@media(max-width:700px){body{padding:8px!important}.menu{gap:5px!important;padding:8px 5px!important}.photo-container{width:40px!important;height:40px!important;flex:0 0 40px!important}.photo-container img{width:34px!important;height:34px!important}.top3-container{gap:7px!important;align-items:stretch!important}.card{width:33.33%!important;padding:11px 5px!important}.rank-1{transform:translateY(-4px) scale(1.02)!important}.char-name{font-size:14px!important}.char-lv{font-size:18px!important}.char-job{font-size:12px!important}.medal-icon{width:43px!important;height:43px!important;font-size:22px!important}.tag{padding:4px 8px!important;font-size:13px!important}.list-item{padding:10px 8px!important;gap:8px!important}.list-job{display:none!important}.list-guild{font-size:12px!important}.rank-list{height:calc(100vh - 390px)!important;padding-right:8px!important}}