/* ranked.css — หน้าอันดับ (ranked.js) · ปุ่มอันดับหน้าแรก */
.rv-sb.rv-rk{position:relative}
.rv-sb.rv-rk em{position:absolute;right:-.4vh;top:-.4vh;min-width:2.8vh;height:2.8vh;border-radius:99px;background:#e5484d;color:#fff;font:800 1.7vh/2.8vh Sarabun,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 .3vh #fff}

.rk-wrap{width:100%;display:grid;grid-template-columns:minmax(260px,34%) 1fr;gap:2vh;height:calc(100vh - 21vh);min-height:0;font-family:Sarabun,sans-serif}
.rk-side{display:flex;flex-direction:column;gap:1.6vh;min-height:0;overflow:auto;scrollbar-width:thin}
.rk-main{display:flex;flex-direction:column;min-height:0;border-radius:2vh;background:#fffaf2ee;box-shadow:0 .6vh 1.6vh #0004;border:.25vh solid #D4A537;overflow:hidden}
.rk-empty{display:flex;align-items:center;justify-content:center;min-height:20vh;padding:2vh;text-align:center;color:#7a5a8c;font:700 max(13px,2.4vh) Sarabun,sans-serif}
.pg[data-pg=rank] .pg-body>.rk-empty{color:#fff;text-shadow:0 1px 3px #0008;height:60vh}

/* การ์ดแรงก์ของฉัน */
.rk-me{border-radius:2vh;padding:1.6vh 1.8vh;color:#fff;background:linear-gradient(150deg,#6E0A1Ef2,#2a1530f2);border:.25vh solid #D4A537;box-shadow:0 .6vh 1.6vh #0006;display:flex;flex-direction:column;gap:1.1vh}
.rk-me-h{display:flex;align-items:center;gap:1.6vh}
.rk-me-h span{display:flex;flex-direction:column;line-height:1.1}
.rk-me-h small{font:700 max(10px,1.8vh) Sarabun,sans-serif;color:#ffd9a8}
.rk-tn{font:900 max(22px,5vh)/1 Mali,Sarabun,sans-serif;letter-spacing:.02em}
.rk-tn.t0{color:#ffc79a}.rk-tn.t1{color:#e9f0f7}.rk-tn.t2{color:#ffd76a}.rk-tn.t3{color:#9ff5e8}.rk-tn.t4{color:#b9d6ff}.rk-tn.t5{background:linear-gradient(90deg,#ffd6f6,#c8a2ff,#9fe7ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.rk-me-h em{font:700 max(11px,2vh) Sarabun,sans-serif;font-style:normal;color:#ffffffcc}
.rk-em{display:block;flex:none;width:4vh;height:4.5vh;filter:drop-shadow(0 .3vh .3vh #0005)}
.rk-em.big{width:10vh;height:11.2vh;filter:drop-shadow(0 0 1.6vh #ffd76a88) drop-shadow(0 .4vh .4vh #0007)}
.rk-em.sm{width:3.6vh;height:4vh}
.rk-bar{position:relative;height:3.2vh;border-radius:99px;background:#0006;overflow:hidden;box-shadow:inset 0 .2vh .4vh #0008}
.rk-bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;background:linear-gradient(90deg,#f2a93b,#ffe08a)}
.rk-bar span{position:relative;display:block;text-align:center;font:800 max(10px,1.8vh)/3.2vh Sarabun,sans-serif;text-shadow:0 1px 2px #000a}
.rk-steps{display:flex;justify-content:space-between;padding:0 .4vh}
.rk-steps span{opacity:.35;filter:grayscale(.7)}.rk-steps span.done{opacity:.75;filter:none}.rk-steps span.on{opacity:1;filter:none;transform:scale(1.2)}
.rk-note{margin:0;font:600 max(10px,1.7vh) Sarabun,sans-serif;color:#ffe3c4}
.rk-claim{border:0;border-radius:99px;padding:1.1vh 2vh;font:800 max(12px,2.2vh) Sarabun,sans-serif;color:#4a2a00;background:linear-gradient(#fff2b8,#ffc94a);box-shadow:0 .4vh 0 #b4781c,0 0 2vh #ffd76a99;cursor:pointer;animation:rkPulse 1.6s ease-in-out infinite}
.rk-claim:disabled{opacity:.6;animation:none}
@keyframes rkPulse{50%{box-shadow:0 .4vh 0 #b4781c,0 0 3.4vh #ffe08a}}
.rk-ttl{display:flex;flex-direction:column;gap:.6vh}
.rk-ttl small{font:700 max(10px,1.7vh) Sarabun,sans-serif;color:#ffd9a8}
.rk-ttl div{display:flex;flex-wrap:wrap;gap:.6vh}
.rk-ttl button{border:.2vh solid #ffd76a77;border-radius:99px;padding:.4vh 1.2vh;background:#ffffff14;color:#fff;font:700 max(10px,1.8vh) Sarabun,sans-serif;cursor:pointer}
.rk-ttl button.on{background:linear-gradient(#ffe08a,#f2a93b);color:#4a2a00;border-color:#fff3c4}
.rk-ttl em{font:600 max(10px,1.7vh) Sarabun,sans-serif;font-style:normal;color:#ffffffaa}

/* วิธีได้แต้ม + รางวัล */
.rk-how{border-radius:2vh;padding:1.4vh 1.8vh;background:#fffaf2ee;box-shadow:0 .6vh 1.6vh #0004;display:flex;flex-direction:column;gap:.5vh;color:#3a2748}
.rk-how>b{font:800 max(12px,2.2vh) Sarabun,sans-serif;margin-top:.4vh}.rk-how>b small{font-weight:600;color:#8a6fa3}
.rk-how>span{display:flex;align-items:center;gap:1vh;font:700 max(11px,2vh) Sarabun,sans-serif}
.rk-how>span>i{font-style:normal;min-width:9vh;padding:.2vh 1vh;border-radius:99px;background:#f3e9ff;color:#6a3d8f;text-align:center;font-weight:800}
.rk-how .rk-pts{flex-wrap:wrap;gap:.6vh}
.rk-how .rk-pts i{min-width:0;background:#fff0f6;color:#8a2450}.rk-how .rk-pts u{text-decoration:none;color:#c2185b}
.rk-fine{font:600 max(9px,1.6vh) Sarabun,sans-serif;color:#8a6fa3}

/* ตาราง */
.rk-tabs{display:flex;gap:.6vh;padding:1.2vh 1.4vh 0;background:linear-gradient(#6E0A1E,#4a0d22)}
.rk-tabs button{flex:1;border:0;border-radius:1.4vh 1.4vh 0 0;padding:1vh .4vh;font:800 max(11px,2.2vh) Sarabun,sans-serif;background:#ffffff22;color:#ffe3c4;cursor:pointer}
.rk-tabs button.on{background:#fffaf2;color:#6E0A1E}
.rk-sub{display:flex;align-items:center;gap:1.4vh;flex-wrap:wrap;padding:1vh 1.6vh;border-bottom:.2vh solid #ecd9b8}
.rk-sub small{font:700 max(10px,1.8vh) Sarabun,sans-serif;color:#8a6fa3}
.rk-play{border:0;border-radius:99px;padding:.6vh 1.8vh;font:800 max(11px,1.9vh) Sarabun,sans-serif;color:#4a2a00;background:linear-gradient(#fff2b8,#ffc94a);box-shadow:0 .3vh 0 #b4781c;cursor:pointer;white-space:nowrap}
.rk-wk{display:flex;border-radius:99px;background:#f0e3cf;padding:.3vh}
.rk-wk button{border:0;border-radius:99px;padding:.5vh 1.6vh;background:none;font:800 max(10px,1.8vh) Sarabun,sans-serif;color:#7a5a8c;cursor:pointer}
.rk-wk button.on{background:#6E0A1E;color:#fff}
.rk-list{flex:1;min-height:0;overflow:auto;padding:.8vh 1.2vh;display:flex;flex-direction:column;gap:.6vh;scrollbar-width:thin}
.rk-row{display:grid;grid-template-columns:6vh 5.6vh 1fr auto auto 13vh;align-items:center;gap:1.2vh;padding:.6vh 1.2vh;border-radius:1.4vh;background:#fff;box-shadow:0 .2vh .5vh #0001;color:#3a2748}
.rk-row.top1{background:linear-gradient(90deg,#fff3c4,#fff);box-shadow:0 0 0 .2vh #f2c14e inset}
.rk-row.top2{background:linear-gradient(90deg,#eef3f8,#fff);box-shadow:0 0 0 .2vh #b8c2cc inset}
.rk-row.top3{background:linear-gradient(90deg,#fbe2cf,#fff);box-shadow:0 0 0 .2vh #d39a6a inset}
.rk-row.me{box-shadow:0 0 0 .3vh #c2185b inset;background:#fff0f6}
.rk-row.pin{margin:0 1.2vh 1.2vh;border-radius:1.4vh}
.rk-no{text-align:center;font:900 max(13px,2.6vh) Mali,Sarabun,sans-serif;color:#8a6fa3}.rk-row.top .rk-no{font-size:max(18px,3.8vh)}
.rk-av{position:relative;display:block;width:5.6vh;height:5.6vh;border-radius:50%;overflow:hidden;background:#f3e9ff;box-shadow:0 0 0 .25vh #e9c27a}
.rk-av>:not(.av-fc){width:100%;height:100%;object-fit:cover}
.rk-nm{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.rk-nm b{font:800 max(12px,2.3vh) Sarabun,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-nm small,.rk-nm em{font:700 max(9px,1.6vh) Sarabun,sans-serif;color:#8a6fa3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:normal}
.rk-nm em{color:#b7791f}
.rk-wp small{font:700 max(9px,1.6vh) Sarabun,sans-serif;color:#8a6fa3;white-space:nowrap}
.rk-sc{text-align:right;white-space:nowrap;font:900 max(14px,2.8vh) Mali,Sarabun,sans-serif;color:#c2185b}
.rk-sc::after{content:" แต้ม";font:700 max(9px,1.5vh) Sarabun,sans-serif;color:#8a6fa3}

@media (orientation:portrait){
  .rk-wrap{grid-template-columns:1fr;height:auto}
  .rk-main{min-height:70vh}
  .rk-row{grid-template-columns:5vh 5vh 1fr auto 8vh}.rk-wp{display:none}
}
@media (prefers-reduced-motion:reduce){.rk-claim{animation:none}}