/* ================= RANKED PvP: lambang peringkat per peran (js/rank-emblems.js) ================= */
.rk-emb { display: block; overflow: visible; filter: drop-shadow(0 4px 0 rgba(0,0,0,.38)); }
.rk-aura, .rk-rot, .rk-rotr, .rk-flame, .rk-pulse, .rk-sp, .rk-twinkle circle { transform-box: fill-box; }
/* Animasi lambang: makin tinggi tingkatnya makin banyak yang bergerak */
.rk-aura { animation: rkAura 2.6s ease-in-out infinite; transform-origin: center; }
.rk-rot { animation: rkRot 9s linear infinite; transform-origin: center; }
.rk-rot.slow { animation-duration: 26s; } .rk-rot.fast { animation-duration: 2.4s; }
.rk-rotr { animation: rkRot 7s linear infinite reverse; transform-origin: center; }
.rk-flame { animation: rkFlame .9s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.rk-float { animation: rkFloat 2.6s ease-in-out infinite; } .rk-float2 { animation: rkFloat 2.6s ease-in-out -1.3s infinite; }
.rk-pulse { animation: rkPulse 1.8s ease-in-out infinite; transform-origin: center; }
.rk-shine { animation: rkShine 4.2s ease-in-out infinite; }
.rk-sp { opacity: 0; animation: rkTwinkle 2.4s ease-in-out infinite; transform-origin: center; }
.rk-sp.s2 { animation-delay: .8s; } .rk-sp.s3 { animation-delay: 1.5s; }
.rk-em { opacity: 0; animation: rkRise 3.2s ease-in infinite; }
.rk-twinkle circle { animation: rkPulse 2.2s ease-in-out infinite; }
.rk-emb.static *, .rk-emb.static { animation: none !important; }
.rk-emb.static .rk-shine, .rk-emb.static .rk-sp, .rk-emb.static .rk-em { opacity: 0; }
@keyframes rkAura { 0%, 100% { opacity: .7; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes rkRot { to { transform: rotate(360deg); } }
@keyframes rkFlame { 0% { transform: scale(1, .88) skewX(-3deg); } 100% { transform: scale(1.06, 1.1) skewX(3deg); } }
@keyframes rkFloat { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes rkPulse { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes rkShine { 0%, 55% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(260px) skewX(-18deg); } }
@keyframes rkTwinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 85% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes rkRise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-54px); } }
@media (prefers-reduced-motion: reduce) { .rk-emb *, .rk-emb { animation: none !important; } }

/* Kartu satu peran */
.rk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.rk-card { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px 6px 6px; border: 3px solid #1E1A24; border-radius: 16px; box-shadow: 0 4px 0 rgba(0,0,0,.42); overflow: hidden; }
.rk-card::before { content: ""; position: absolute; inset: 0; opacity: .9; pointer-events: none; }
.rk-card.raja { background: linear-gradient(135deg, rgba(91,33,182,.9), rgba(30,16,70,.94)); }
.rk-card.mek { background: linear-gradient(135deg, rgba(194,65,12,.88), rgba(69,26,3,.94)); }
.rk-card::after { content: ""; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); pointer-events: none; }
.rk-art { flex: 0 0 auto; position: relative; z-index: 1; }
.rk-info { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rk-role { font: 400 11px Bungee, Impact, sans-serif; letter-spacing: .6px; color: #E9D5FF; white-space: nowrap; }
.rk-card.mek .rk-role { color: #FED7AA; }
.rk-tier { font: 400 15px Bungee, Impact, sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-tier em { font-style: normal; font-size: 11px; color: #FDE68A; margin-left: 2px; }
.rk-bar { display: block; height: 7px; margin-top: 3px; border-radius: 6px; background: rgba(0,0,0,.45); border: 1.5px solid rgba(0,0,0,.6); overflow: hidden; }
.rk-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #FDE68A, #F59E0B); box-shadow: 0 0 8px rgba(251,191,36,.7); transition: width .8s cubic-bezier(.2, .9, .3, 1); }
.rk-info small { font: 800 10px Nunito, system-ui, sans-serif; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Menu Ranked PvP: dua kartu bertumpuk di kolom main */
.fm-play .rk-pair { grid-template-columns: 1fr; gap: 6px; }
.fm-play .rk-card { padding: 3px 10px 3px 4px; gap: 6px; }
.fm-play .rk-tier { font-size: 14px; }

/* Profil: kolom identitas */
.pf-rk .rk-pair { grid-template-columns: 1fr 1fr; gap: 6px; }
.pf-rk .rk-card { flex-direction: column; align-items: center; text-align: center; padding: 6px 4px 6px; gap: 2px; }
.pf-rk .rk-info { align-items: center; width: 100%; }
.pf-rk .rk-role { font-size: 11px; } .pf-rk .rk-role em { font-style: normal; color: #FDE68A; font-size: 10px; }
.pf-rk .rk-tier { font-size: 12px; }
.pf-rk .rk-info small { display: none; }
.pf-rk .rk-bar { width: 80%; }
/* Profil: kartu besar di tab Ringkasan */
.pf-rkbig { display: flex; flex-direction: column; gap: 8px; }
.pf-rkbig h3 { margin: 0; font: 400 15px Bungee, Impact, sans-serif; color: #FDE68A; }
.pf-rkbig .rk-pair { gap: 10px; }
.pf-rkbig .rk-card { padding: 8px 14px 8px 8px; gap: 12px; }
.pf-rkbig .rk-tier { font-size: 20px; }
.pf-rkbig .rk-role { font-size: 12.5px; }
.pf-rkbig .rk-info small { font-size: 11.5px; }
.pf-rkbig .rk-bar { height: 9px; }

/* Layar hasil: perubahan rating per peran */
.rk-drows { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.rk-drow { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border-radius: 14px; border: 2.5px solid #1E1A24; background: rgba(8,12,28,.7); font: 800 13px Nunito, system-ui, sans-serif; color: #E2E8F0; }
.rk-drow.raja { box-shadow: inset 4px 0 0 #8B5CF6; } .rk-drow.mek { box-shadow: inset 4px 0 0 #F97316; }
.rk-dart { flex: 0 0 auto; display: grid; place-items: center; }
.rk-dlbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-dnum { font: 400 16px Bungee, Impact, sans-serif; }
.rk-drow.up .rk-dnum { color: #4ADE80; } .rk-drow.down .rk-dnum { color: #F87171; }
.rk-darr { color: #94A3B8; }
.rk-dnow { font: 400 16px Bungee, Impact, sans-serif; color: #FDE68A; }

/* Layar "Lawan ditemukan": undian liga + lambang kedua pemain */
.mm-draw { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px auto 0; }
.mm-draw-lbl { font: 800 11px Nunito, system-ui, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #A5B4FC; }
.mm-draw-box { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 220px; padding: 7px 18px; border: 3px solid #1E1A24; border-radius: 18px; background: linear-gradient(180deg, rgba(30,41,59,.95), rgba(8,12,28,.95)); box-shadow: 0 5px 0 rgba(0,0,0,.5); overflow: hidden; }
.mm-draw-box .ox-lg { width: 40px; height: 40px; }
.mm-draw-box b { font: 400 20px Bungee, Impact, sans-serif; color: #fff; }
.mm-draw-box small { display: block; font: 800 11.5px Nunito, system-ui, sans-serif; color: #FDE68A; }
.mm-draw-box.roll { animation: mmRoll .16s linear infinite; }
.mm-draw-box.land { animation: mmLand .5s cubic-bezier(.2, 1.6, .4, 1); border-color: #FACC15; box-shadow: 0 5px 0 #854D0E, 0 0 26px rgba(250,204,21,.6); }
@keyframes mmRoll { 0% { transform: translateY(-3px); filter: blur(.6px); } 50% { transform: translateY(3px); } 100% { transform: translateY(-3px); filter: blur(.6px); } }
@keyframes mmLand { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.mm-found .rk-rts { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.mm-found .rk-rts span { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px 1px 2px; border-radius: 10px; background: rgba(0,0,0,.4); font: 800 11px Nunito, system-ui, sans-serif; color: #FDE68A; }

/* Papan peringkat: pilihan peran */
.rk-subtabs { display: flex; gap: 6px; margin: 6px 0; }
.rk-subtab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 8px; cursor: pointer; color: #CBD5E1; border: 2.5px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(8,12,28,.75); font: 400 12.5px Bungee, Impact, sans-serif; }
.rk-subtab.on { color: #3A2A00; border-color: #1E1A24; background: linear-gradient(180deg, #FEF08A, #EAB308); box-shadow: 0 3px 0 #854D0E; }

@media (max-height: 520px) {
  .fm-play .rk-card { padding: 2px 8px 2px 3px; }
  .fm-play .rk-tier { font-size: 13px; }
  .fm-play .rk-info small { display: none; }
  .fm-play .rk-bar { margin-top: 1px; height: 6px; }
  .pf-rk .rk-card { padding: 3px 2px; }
}
@media (max-width: 700px) { .pf-rkbig .rk-pair { grid-template-columns: 1fr; } }

/* Kartu peringkat bisa diketuk */
.rk-card[data-rk] { cursor: pointer; transition: transform .12s, filter .12s; }
.rk-card[data-rk]:hover { transform: translateY(-2px); filter: brightness(1.08); }
.rk-card[data-rk]:active { transform: translateY(2px); }
.rk-art { display: grid; place-items: center; }

/* ================= Jalur Peringkat ================= */
.rkj-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 10px; align-items: stretch; }
.rkj-me { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 6px; border: 3px solid #1E1A24; border-radius: 18px; box-shadow: 0 5px 0 rgba(0,0,0,.45); }
.rkj-me.raja { background: linear-gradient(135deg, rgba(91,33,182,.92), rgba(30,16,70,.95)); }
.rkj-me.mek { background: linear-gradient(135deg, rgba(194,65,12,.9), rgba(69,26,3,.95)); }
.rkj-me-art { flex: 0 0 auto; display: grid; place-items: center; min-width: 130px; }
.rkj-me-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.rkj-me-tx small { font: 800 10.5px Nunito, system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.7); }
.rkj-me-tx > b { font: 400 clamp(20px, 3.4vw, 28px)/1 Bungee, Impact, sans-serif; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.rkj-me-tx em { font: 800 12px Nunito, system-ui, sans-serif; font-style: normal; color: #FDE68A; }
.rkj-me-tx em b { font: 400 14px Bungee, Impact, sans-serif; }
.rkj-how { padding: 8px 12px; border: 3px solid #1E1A24; border-radius: 18px; background: rgba(8,12,28,.74); box-shadow: 0 5px 0 rgba(0,0,0,.45); }
.rkj-how h3 { margin: 0 0 4px; font: 400 13px Bungee, Impact, sans-serif; color: #FDE68A; }
.rkj-how ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; font: 700 11.5px/1.35 Nunito, system-ui, sans-serif; color: #E2E8F0; }
.rkj-top { margin-top: 2px; }
.rkj-rail { display: flex; gap: 10px; overflow-x: auto; padding: 8px 4px 12px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.rkj-tier { position: relative; flex: 0 0 auto; width: 132px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px 8px; text-align: center; scroll-snap-align: center; border: 3px solid #1E1A24; border-radius: 18px; background: linear-gradient(180deg, rgba(30,41,59,.95), rgba(8,12,28,.95)); box-shadow: 0 5px 0 rgba(0,0,0,.45); }
.rkj-tier .rkj-art { min-height: 104px; display: grid; place-items: center; }
.rkj-tier b { font: 400 15px Bungee, Impact, sans-serif; color: #fff; }
.rkj-look { font: 800 11px Nunito, system-ui, sans-serif; color: #FDE68A; }
.rkj-tier small { font: 800 11px Nunito, system-ui, sans-serif; color: #94A3B8; }
.rkj-mark { font-style: normal; margin-top: 3px; font: 800 11px Nunito, system-ui, sans-serif; color: #94A3B8; }
.rkj-tier.done { border-color: #1E1A24; } .rkj-tier.done .rkj-mark { color: #4ADE80; }
.rkj-tier.now { border-color: #FACC15; box-shadow: 0 5px 0 #854D0E, 0 0 24px rgba(250,204,21,.5); transform: translateY(-3px); }
.rkj-tier.now .rkj-mark { color: #FDE68A; }
.rkj-tier.todo .rkj-art { filter: saturate(.55) brightness(.8); }
@media (max-width: 700px) { .rkj-top { grid-template-columns: 1fr; } }
@media (max-height: 520px) {
  .rkj-me-art { min-width: 112px; } .rkj-tier { width: 118px; } .rkj-tier .rkj-art { min-height: 92px; }
  .rkj-how ul { font-size: 10.5px; gap: 2px; }
}