/* rank-theme.css — ธีมใหม่ของ "จัดอันดับจอมยุทธ์" ทั้งสองที่: แผงบนหน้าแรก (.rank-container / .rc-*) และหน้า /ranking (.rkp-*)
   โทนเดียวกับทำเนียบบุญ + แผงความเคลื่อนไหว: กระจกดำ ขอบทอง ฟอนต์ Sarabun · ชื่อตัวละครแสดงเต็ม ไม่ตัด ไม่ตกบรรทัด
   เป็นการทับสไตล์ที่ฝังอยู่ในหน้า (ต้องโหลดไฟล์นี้ "หลัง" <style> ของหน้า) — โครงสร้าง/ตรรกะดึงข้อมูลไม่เปลี่ยน */

/* ============================================================ ส่วนที่ใช้ร่วมกัน */
@keyframes rkWire { to { background-position:-200% 0; } }
@keyframes rkShine { 0%,55% { background-position:130% 0, 0 0; } 100% { background-position:-40% 0, 0 0; } }
@keyframes rkRays { to { rotate:360deg; } }
@keyframes rkRing { to { --rka:360deg; } }
@property --rka { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes rkDeal { from { opacity:0; transform:translateY(16px) rotate(-.5deg); } }
@keyframes rkBarShine { to { background-position:200% 0; } }
@keyframes rkUp { 0% { background-color:rgba(110,255,160,.34); box-shadow:0 0 26px rgba(80,255,150,.5); } }
@keyframes rkDown { 0% { background-color:rgba(255,110,90,.32); box-shadow:0 0 26px rgba(255,90,70,.45); } }
@keyframes rkCrown { 50% { transform:translateY(-2px) rotate(-8deg) scale(1.08); } }

/* ============================================================ หน้าแรก: แผงจัดอันดับ */
.rank-container { position:relative; overflow:hidden; font-family:'Sarabun',sans-serif; background:rgba(12,10,9,.6); border:1px solid rgba(243,192,97,.28); border-radius:18px; box-shadow:0 16px 44px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.rank-container::before { content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:3; background:linear-gradient(90deg,transparent,#b3200f 18%,#f0c365 50%,#b3200f 82%,transparent); background-size:200% 100%; animation:rkWire 6s linear infinite; }
.rank-container .rank-title { font-weight:700; color:transparent; background:linear-gradient(105deg,#fff3cf,#f0c365 55%,#ff9a3d); -webkit-background-clip:text; background-clip:text; }
.rank-container .rank-title i { color:#f0c365; -webkit-text-fill-color:#f0c365; }
.rank-container .rc-live { -webkit-text-fill-color:#4ade80; }
.rk-tag { margin-left:6px; padding:1px 10px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:1.5px; vertical-align:middle; color:#ffd2b8; -webkit-text-fill-color:#ffd2b8; background:rgba(179,32,15,.35); border:1px solid rgba(255,120,80,.45); white-space:nowrap; }
.rank-container .rank-tabs, .rank-container .rc-daybar { background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.09); }
.rank-container .rank-tab, .rank-container .rc-daybtn { font-family:'Sarabun',sans-serif; font-weight:600; font-size:13px; color:#b9ad98; }
.rank-container .rank-tab:hover, .rank-container .rc-daybtn:hover { color:#ffe9b0; background:rgba(243,192,97,.1); }
.rank-container .rank-tab.active { background:linear-gradient(180deg,#ffe3a0,#dba032); color:#2a1a04; border-color:#ffeec2; font-weight:700; box-shadow:0 6px 18px rgba(219,160,50,.28), inset 0 1px 0 rgba(255,255,255,.65); }
.rank-container .rc-daybtn.active { background:linear-gradient(180deg,#d9483a,#a3241a); color:#fff; border-color:rgba(255,160,150,.5); font-weight:700; box-shadow:0 6px 16px rgba(201,36,27,.35); }
.rank-container .rc-subline { color:#8d8474; }
/* ตัวกรองอาชีพ: เหรียญกลม ขอบทองเมื่อเลือก */
.rank-container .rc-jobbtn { font-family:'Sarabun',sans-serif; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.1); border-radius:12px; color:#b9ad98; transition:transform .16s, border-color .16s, box-shadow .16s; }
.rank-container .rc-jobbtn:hover { transform:translateY(-3px); border-color:rgba(243,192,97,.6); color:#ffe9b0; }
.rank-container .rc-jobbtn.active { border-color:#f0c365; color:#ffe9b0; background:linear-gradient(180deg,rgba(243,192,97,.24),rgba(243,192,97,.05)); box-shadow:0 0 16px rgba(243,192,97,.35); }
.rank-container .rc-jb-ic img { border:2px solid rgba(255,255,255,.14); } .rank-container .rc-jobbtn.active .rc-jb-ic img { border-color:#f0c365; box-shadow:0 0 10px rgba(243,192,97,.7); }
.rank-container .rc-jb-tx { font-weight:600; }
/* การ์ดอันดับ */
.rank-container .rc-list { gap:9px; }
.rank-container .rc-card { background:rgba(12,10,9,.5); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:12px 16px 13px; transition:transform .18s, border-color .18s, box-shadow .18s; }
.rank-container .rc-card:hover { transform:translateY(-2px); border-color:rgba(243,192,97,.6); box-shadow:0 10px 24px rgba(0,0,0,.45), 0 0 14px rgba(243,192,97,.16); }
.rank-container .rc-card::before { width:3px; background:#6b6460; } .rank-container .rc-card.rc-fac1::before { background:linear-gradient(#7db4ff,#2f6fe0); } .rank-container .rc-card.rc-fac2::before { background:linear-gradient(#ff8a7a,#c92a1c); }
.rank-container .rc-card.rc-enter { animation:rkDeal .45s cubic-bezier(.2,1,.3,1) both; opacity:1; transform:none; }
.rank-container .rc-card.flash-up { animation:rkUp 1.5s ease-out; } .rank-container .rc-card.flash-down { animation:rkDown 1.5s ease-out; }
/* อันดับ 1–3: กรอบทอง/เงิน/ทองแดง · อันดับ 1 มีแสงวิ่ง */
.rank-container .rc-card.rk-t1 { padding:15px 16px 14px; border-color:#ffd76a; background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%) 130% 0 / 260% 100% no-repeat, linear-gradient(135deg,rgba(201,36,27,.34),rgba(12,10,9,.62) 58%); animation:rkShine 4.2s ease-in-out infinite; box-shadow:0 0 24px rgba(255,180,60,.3), 0 12px 30px rgba(0,0,0,.45); }
.rank-container .rc-card.rk-t2 { border-color:rgba(226,232,239,.5); background:linear-gradient(135deg,rgba(120,140,175,.22),rgba(12,10,9,.55) 58%); }
.rank-container .rc-card.rk-t3 { border-color:rgba(227,160,106,.55); background:linear-gradient(135deg,rgba(190,110,50,.22),rgba(12,10,9,.55) 58%); }
.rank-container .rc-card.rk-t1.flash-up, .rank-container .rc-card.rk-t1.flash-down { animation:rkShine 4.2s ease-in-out infinite; }
/* เหรียญอันดับ */
.rank-container .rc-rank { width:34px; font-family:'Sarabun',sans-serif; font-weight:700; font-size:16px; color:#8d8474; }
.rank-container .rc-rank .medal { width:32px; height:32px; font-size:13px; }
.rank-container .rc-rank.top1 .medal { color:#3a2203; background:radial-gradient(circle at 35% 30%,#fff6c8,#ffd24a 45%,#c98a12); box-shadow:0 0 14px rgba(255,200,80,.95), inset 0 -2px 3px rgba(120,70,0,.5); }
.rank-container .rc-rank.top1 .medal i { animation:rkCrown 2.2s ease-in-out infinite; }
.rank-container .rc-rank.top2 .medal { color:#1f2630; background:radial-gradient(circle at 35% 30%,#fff,#cfd8e3 50%,#8d99a8); box-shadow:0 0 9px rgba(220,230,245,.55); }
.rank-container .rc-rank.top3 .medal { color:#2e1505; background:radial-gradient(circle at 35% 30%,#ffd9b5,#e3975a 50%,#9a5424); box-shadow:0 0 9px rgba(227,150,90,.5); }
.rank-container .rc-arw.up { color:#8dffb0; } .rank-container .rc-arw.down { color:#ff9c8e; }
/* รูปตัวละคร: อันดับ 1 มีวงแหวนไฟหมุน */
.rank-container .rc-ava img { border:2px solid rgba(243,192,97,.55); }
.rank-container .rk-t1 .rc-ava { width:56px; height:56px; } .rank-container .rk-t1 .rc-ava img { width:56px; height:56px; border-color:transparent; }
.rank-container .rk-t1 .rc-ava::before { content:''; position:absolute; inset:-3px; border-radius:50%; background:conic-gradient(from var(--rka,0deg),#ffd24a,#ff5a3d,#fff6c8,#ff9a3d,#ffd24a); animation:rkRing 3.5s linear infinite; }
.rank-container .rk-t1 .rc-ava img, .rank-container .rk-t1 .rc-ava .rc-facdot { position:relative; z-index:1; } .rank-container .rk-t1 .rc-ava .rc-facdot { position:absolute; }
.rank-container .rk-t2 .rc-ava img { border-color:#cfd8e3; } .rank-container .rk-t3 .rc-ava img { border-color:#e3975a; }
.rank-container .rc-facdot { border-color:#0c0a09; }
/* ชื่อ: เต็มเสมอ ไม่ตกบรรทัด (ป้ายต่อท้ายย้ายลงบรรทัดถัดไปได้ถ้าที่ไม่พอ) */
.rank-container .rc-name { font-size:15.5px; font-weight:700; color:#fff; white-space:nowrap; gap:7px; row-gap:3px; }
.rank-container .rk-t1 .rc-name { font-size:17.5px; color:#fff3c4; text-shadow:0 0 12px rgba(255,190,70,.7); }
.rank-container .rc-lv { font-family:'Sarabun',sans-serif; font-weight:700; color:#ffe9b0; background:rgba(243,192,97,.16); }
.rank-container .rc-job { color:#b9ad98; } .rank-container .rc-couple { color:#ffb3d1; } .rank-container .rc-couple.no-couple { color:#8d8474; }
.rank-container .rc-hot { padding:0 8px; border-radius:20px; font-weight:700; color:#2a1803; background:linear-gradient(90deg,#ff9a3d,#ffe08a); box-shadow:0 0 10px rgba(255,160,50,.55); }
.rank-container .rc-max { color:#2a1803; background:linear-gradient(90deg,#ffd24a,#fff0b5); }
/* กล่องตัวเลข: ค่าที่แท็บนั้นจัดอันดับจะเด่นขึ้น */
.rank-container .rc-box { background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.09); border-radius:11px; }
.rank-container .rc-box .lbl { color:#a99e8c; }
.rank-container .rc-box b { font-family:'Sarabun',sans-serif; font-weight:700; font-variant-numeric:tabular-nums; }
.rank-container .rc-box.gold b { color:#ffe9b0; } .rank-container .rc-box.green b { color:#8dffb0; } .rank-container .rc-box.red b { color:#ff9c8e; }
#rank-body[data-type="money"] .rc-box.gold { border-color:rgba(255,215,106,.7); background:linear-gradient(180deg,rgba(255,200,70,.2),rgba(0,0,0,.34)); box-shadow:0 0 14px rgba(255,180,60,.25); } #rank-body[data-type="money"] .rc-box.gold b { font-size:19px; color:#fff3c4; text-shadow:0 0 12px rgba(255,190,70,.7); }
#rank-body[data-type="wuxun"] .rc-box.green { border-color:rgba(141,255,176,.65); background:linear-gradient(180deg,rgba(80,255,150,.16),rgba(0,0,0,.34)); box-shadow:0 0 14px rgba(80,255,150,.22); } #rank-body[data-type="wuxun"] .rc-box.green b { font-size:19px; text-shadow:0 0 12px rgba(80,255,150,.6); }
/* หลอด EXP */
.rank-container .rc-exp { height:7px; border-radius:5px; background:rgba(255,255,255,.08); box-shadow:inset 0 1px 2px rgba(0,0,0,.6); }
.rank-container .rc-exp > i { border-radius:5px; background:linear-gradient(90deg,#dba032,#ffe08a,#fff6c8,#ffe08a,#dba032); background-size:200% 100%; animation:rkBarShine 2.6s linear infinite; box-shadow:0 0 10px rgba(255,200,90,.6); }
#rank-body[data-type="exp"] .rc-exp { height:9px; } #rank-body[data-type="exp"] .rc-exp-txt .rc-e-num { color:#fff3c4; }
.rank-container .rc-exp-txt { color:#a99e8c; font-family:'Sarabun',sans-serif; } .rank-container .rc-exp-txt b { color:#ffe9b0; }
/* สงครามฝ่าย */
.rank-container .rc-facsub { border-top-color:rgba(255,255,255,.08); color:#a99e8c; } .rank-container .rc-facsub b { color:#fff; }
.rank-container .rc-faccard.rc-fw1 { border:1px solid #ffd76a; background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.16) 50%,transparent 58%) 130% 0 / 260% 100% no-repeat, linear-gradient(135deg,rgba(201,36,27,.34),rgba(12,10,9,.62) 58%); animation:rkShine 4.2s ease-in-out infinite; box-shadow:0 0 24px rgba(255,180,60,.3); }
/* ปุ่มหน้า */
.rank-container .rc-pg-btn { font-family:'Sarabun',sans-serif; font-weight:600; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.12); color:#d9cfbd; border-radius:10px; }
.rank-container .rc-pg-btn:hover:not(:disabled) { border-color:#f0c365; color:#ffe9b0; } .rank-container .rc-pg-btn.active { background:linear-gradient(180deg,#ffe3a0,#dba032); color:#2a1a04; border-color:#ffeec2; }
.rank-container .rank-loading { color:#a99e8c; }

/* ============================================================ หน้า /ranking */
.rkp-hero h1 { font-family:'Sarabun',sans-serif; font-weight:800; color:transparent; background:linear-gradient(105deg,#fff3cf,#f0c365 55%,#ff9a3d); -webkit-background-clip:text; background-clip:text; text-shadow:none; filter:drop-shadow(0 4px 14px rgba(0,0,0,.75)) drop-shadow(0 0 22px rgba(255,170,60,.35)); }
.rkp-hero h1 i { color:#f0c365; -webkit-text-fill-color:#f0c365; } .rkp-hero .rkp-live { -webkit-text-fill-color:#4ade80; }
.rkp-hero .rk-tag { font-size:13px; }
.rkp-hero p { font-family:'Sarabun',sans-serif; color:#e9dcc0; }
.rkp-wrap { font-family:'Sarabun',sans-serif; }
.rkp-tabs, .rkp-daybar { background:rgba(12,10,9,.62); border:1px solid rgba(243,192,97,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.rkp-tab, .rkp-daybtn { font-family:'Sarabun',sans-serif; font-weight:600; color:#cfc5b4; }
.rkp-tab:hover { color:#ffe9b0; background:rgba(243,192,97,.1); }
.rkp-tab.active { background:linear-gradient(180deg,#ffe3a0,#dba032); color:#2a1a04; border-color:#ffeec2; font-weight:700; box-shadow:0 6px 18px rgba(219,160,50,.3), inset 0 1px 0 rgba(255,255,255,.65); }
.rkp-tab.war.active, .rkp-daybtn.active { background:linear-gradient(180deg,#d9483a,#a3241a); color:#fff; border-color:rgba(255,160,150,.5); font-weight:700; box-shadow:0 6px 16px rgba(201,36,27,.4); }
.rkp-upd { color:#d9cfbd; padding:5px 12px; border-radius:20px; background:rgba(12,10,9,.55); border:1px solid rgba(255,255,255,.1); } .rkp-upd b { color:#ffe9b0; }
.rkp-jobbtn { font-family:'Sarabun',sans-serif; background:rgba(12,10,9,.6); border:1px solid rgba(255,255,255,.12); border-radius:12px; color:#cfc5b4; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:transform .16s, border-color .16s, box-shadow .16s; }
.rkp-jobbtn:hover { transform:translateY(-3px); border-color:rgba(243,192,97,.6); color:#ffe9b0; }
.rkp-jobbtn.active { border-color:#f0c365; color:#ffe9b0; background:linear-gradient(180deg,rgba(243,192,97,.26),rgba(12,10,9,.6)); box-shadow:0 0 18px rgba(243,192,97,.4); }
.rkp-jb-ic img { border:2px solid rgba(255,255,255,.14); } .rkp-jobbtn.active .rkp-jb-ic img { border-color:#f0c365; box-shadow:0 0 10px rgba(243,192,97,.7); } .rkp-jb-tx { font-weight:600; }
/* แท่นอันดับ 1–3 */
.rkp-podium { gap:16px; margin:26px 0 26px; }
.rkp-pod { position:relative; overflow:visible; background:rgba(12,10,9,.72); border:1.5px solid rgba(226,232,239,.5); border-radius:20px; box-shadow:0 16px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); transition:transform .2s, box-shadow .2s; animation:rkDeal .5s cubic-bezier(.2,1,.3,1) both; }
.rkp-pod.p2 { animation-delay:.06s; } .rkp-pod.p3 { animation-delay:.12s; }
.rkp-pod:hover { transform:translateY(-5px); } .rkp-pod.p1:hover { transform:translateY(-21px); }
.rkp-pod.p1 { border-color:#ffd76a; background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%) 130% 0 / 260% 100% no-repeat, linear-gradient(180deg,rgba(201,36,27,.36),rgba(12,10,9,.78) 55%); animation:rkDeal .5s cubic-bezier(.2,1,.3,1) both, rkShine 4.2s ease-in-out .6s infinite; box-shadow:0 0 40px rgba(255,180,60,.4), 0 16px 44px rgba(0,0,0,.5); }
.rkp-pod.p2 { background:linear-gradient(180deg,rgba(120,140,175,.26),rgba(12,10,9,.75) 55%); }
.rkp-pod.p3 { border-color:rgba(227,160,106,.65); background:linear-gradient(180deg,rgba(190,110,50,.26),rgba(12,10,9,.75) 55%); }
.rkp-pod-rank { font-family:'Sarabun',sans-serif; font-weight:800; border:0; }
.rkp-pod.p1 .rkp-pod-rank { color:#3a2203; background:radial-gradient(circle at 35% 30%,#fff6c8,#ffd24a 45%,#c98a12); box-shadow:0 0 20px rgba(255,200,80,1), inset 0 -2px 4px rgba(120,70,0,.5); } .rkp-pod.p1 .rkp-pod-rank i { animation:rkCrown 2.2s ease-in-out infinite; }
.rkp-pod.p2 .rkp-pod-rank { color:#1f2630; background:radial-gradient(circle at 35% 30%,#fff,#cfd8e3 50%,#8d99a8); box-shadow:0 0 12px rgba(220,230,245,.6); }
.rkp-pod.p3 .rkp-pod-rank { color:#2e1505; background:radial-gradient(circle at 35% 30%,#ffd9b5,#e3975a 50%,#9a5424); box-shadow:0 0 12px rgba(227,150,90,.55); }
.rkp-pod-ava { isolation:isolate; } .rkp-pod-ava img { position:relative; z-index:1; border:3px solid #cfd8e3; }
.rkp-pod.p3 .rkp-pod-ava img { border-color:#e3975a; } .rkp-pod.p1 .rkp-pod-ava img { border-color:transparent; }
.rkp-pod.p1 .rkp-pod-ava::before { content:''; position:absolute; inset:-4px; border-radius:50%; z-index:0; background:conic-gradient(from var(--rka,0deg),#ffd24a,#ff5a3d,#fff6c8,#ff9a3d,#ffd24a); animation:rkRing 3.5s linear infinite; }
.rkp-pod.p1 .rkp-pod-ava::after { content:''; position:absolute; left:50%; top:50%; width:260%; aspect-ratio:1; z-index:-1; translate:-50% -50%; border-radius:50%; pointer-events:none; background:repeating-conic-gradient(from 0deg,rgba(255,200,80,.34) 0 7deg,transparent 7deg 20deg); -webkit-mask:radial-gradient(circle,#000 18%,transparent 62%); mask:radial-gradient(circle,#000 18%,transparent 62%); animation:rkRays 16s linear infinite; }
.rkp-pod-ava .rkp-facdot { z-index:2; border-color:#0c0a09; }
.rkp-pod-name { font-size:20px; font-weight:800; color:#fff; white-space:nowrap; flex-wrap:nowrap; } .rkp-pod.p1 .rkp-pod-name { font-size:23px; color:#fff3c4; text-shadow:0 0 14px rgba(255,190,70,.75); }
.rkp-pod-job { color:#b9ad98; } .rkp-pod-couple { color:#ffb3d1; } .rkp-pod-couple.no { color:#8d8474; }
/* การ์ดอันดับ 4+ */
.rkp-list-inner { gap:9px; }
.rkp-card { background:rgba(12,10,9,.7); border:1px solid rgba(255,255,255,.1); border-radius:14px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .18s, border-color .18s, box-shadow .18s; animation:rkDeal .42s cubic-bezier(.2,1,.3,1) both; }
.rkp-card:nth-child(2) { animation-delay:.03s; } .rkp-card:nth-child(3) { animation-delay:.06s; } .rkp-card:nth-child(4) { animation-delay:.09s; } .rkp-card:nth-child(5) { animation-delay:.12s; } .rkp-card:nth-child(6) { animation-delay:.15s; } .rkp-card:nth-child(n+7) { animation-delay:.18s; }
.rkp-card:hover { transform:translateX(4px); border-color:rgba(243,192,97,.6); box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 16px rgba(243,192,97,.18); }
.rkp-card::before { background:#6b6460; } .rkp-card.f1::before { background:linear-gradient(#7db4ff,#2f6fe0); } .rkp-card.f2::before { background:linear-gradient(#ff8a7a,#c92a1c); }
.rkp-rank { font-family:'Sarabun',sans-serif; font-weight:700; color:#8d8474; }
.rkp-ava img { border:2px solid rgba(243,192,97,.55); } .rkp-ava .rkp-facdot { border-color:#0c0a09; }
.rkp-name { font-size:16.5px; font-weight:700; white-space:nowrap; row-gap:3px; }
.rkp-lv { font-weight:700; color:#ffe9b0; background:rgba(243,192,97,.16); }
.rkp-job { color:#b9ad98; } .rkp-couple { color:#ffb3d1; } .rkp-couple.no { color:#8d8474; }
.rkp-box { background:rgba(0,0,0,.36); border:1px solid rgba(255,255,255,.09); border-radius:11px; } .rkp-box .lbl { color:#a99e8c; }
.rkp-box b { font-weight:700; font-variant-numeric:tabular-nums; } .rkp-box.gold b { color:#ffe9b0; } .rkp-box.green b { color:#8dffb0; } .rkp-box.red b { color:#ff9c8e; }
.rkp-exp { height:7px; border-radius:5px; background:rgba(255,255,255,.08); box-shadow:inset 0 1px 2px rgba(0,0,0,.6); }
.rkp-exp > i { border-radius:5px; background:linear-gradient(90deg,#dba032,#ffe08a,#fff6c8,#ffe08a,#dba032); background-size:200% 100%; animation:rkBarShine 2.6s linear infinite; box-shadow:0 0 10px rgba(255,200,90,.6); }
.rkp-exp-txt { color:#a99e8c; } .rkp-exp-txt b { color:#ffe9b0; }
.rkp-max { color:#2a1803; background:linear-gradient(90deg,#ffd24a,#fff0b5); }
.rkp-facsub { border-top-color:rgba(255,255,255,.08); color:#a99e8c; } .rkp-facsub b { color:#fff; }
.rkp-pg { font-family:'Sarabun',sans-serif; font-weight:600; background:rgba(12,10,9,.62); border:1px solid rgba(255,255,255,.14); color:#d9cfbd; border-radius:10px; }
.rkp-pg:hover:not(:disabled) { border-color:#f0c365; color:#ffe9b0; } .rkp-pg.active { background:linear-gradient(180deg,#ffe3a0,#dba032); color:#2a1a04; border-color:#ffeec2; }
.rkp-loading { color:#cfc5b4; }
/* ค่าที่แท็บนั้นจัดอันดับเด่นขึ้น (หน้า /ranking ใส่ data-type ที่ #rkp-list) */
#rkp-list[data-type="money"] .rkp-box.gold { border-color:rgba(255,215,106,.7); background:linear-gradient(180deg,rgba(255,200,70,.2),rgba(0,0,0,.36)); box-shadow:0 0 14px rgba(255,180,60,.25); } #rkp-list[data-type="money"] .rkp-box.gold b { color:#fff3c4; text-shadow:0 0 12px rgba(255,190,70,.7); }
#rkp-list[data-type="wuxun"] .rkp-box.green { border-color:rgba(141,255,176,.65); background:linear-gradient(180deg,rgba(80,255,150,.16),rgba(0,0,0,.36)); box-shadow:0 0 14px rgba(80,255,150,.22); } #rkp-list[data-type="wuxun"] .rkp-box.green b { text-shadow:0 0 12px rgba(80,255,150,.6); }
#rkp-list[data-type="exp"] .rkp-exp { height:9px; }

@media (prefers-reduced-motion:reduce) {
  .rank-container::before, .rank-container .rc-card, .rank-container .rc-card.rk-t1, .rank-container .rc-faccard.rc-fw1, .rank-container .rk-t1 .rc-ava::before, .rank-container .rc-exp > i, .rank-container .rc-rank .medal i,
  .rkp-pod, .rkp-pod.p1, .rkp-card, .rkp-pod.p1 .rkp-pod-ava::before, .rkp-pod.p1 .rkp-pod-ava::after, .rkp-exp > i, .rkp-pod-rank i { animation:none !important; }
}