/* =====================================================================
   เส้นทางสู่แรงค์สูงสุด — แผนที่ผจญภัย (public/js/rankmap.js)
   ===================================================================== */
.rkm-page { padding-bottom: 8px; }
.rkm-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rkm-top .rk-mode { margin: 0; min-width: 240px; }
.rkm-title { margin: 10px 0 4px; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.25; }
.rkm-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 0 0 12px; font-size: .85rem; color: var(--color-text-muted); }
.rkm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rkm-lg { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border); }
.rkm-lg-done { background: #2BA36B; } .rkm-lg-cur { background: #FFD66B; } .rkm-lg-ready { background: #FF7A3D; } .rkm-lg-lock { background: #5C6077; }

.rkm-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { .rkm-layout { grid-template-columns: minmax(0, 1fr) 360px; } }
.rkm-stage { position: relative; border-radius: 24px; overflow: hidden; background: #121733;
  box-shadow: 0 12px 32px rgba(18, 23, 51, .28), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rkm-viewport { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .35) transparent; outline: none; touch-action: pan-x pan-y pinch-zoom; }
.rkm-viewport:focus-visible { box-shadow: inset 0 0 0 3px var(--color-primary); }
.rkm-canvas { margin: 0 auto; min-width: 280px; }
.rkm-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.rkm-loading { display: grid; place-items: center; gap: 8px; padding: 60px 16px; color: var(--color-text-muted); }

/* ปุ่มควบคุมบนแผนที่ (ใหญ่พอสำหรับนิ้ว) */
.rkm-zoom { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; }
.rkm-ctl { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: #1F2340; border: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.rkm-ctl:disabled { opacity: .45; cursor: default; }
.rkm-ctl:focus-visible, .rkm-home:focus-visible { outline: 3px solid #FFD66B; outline-offset: 2px; }
.rkm-home { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid #FFFFFF; cursor: pointer; white-space: nowrap;
  background: #1F2340; color: #FFFFFF; font: inherit; font-weight: 800; font-size: .9rem; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.rkm-home:hover { background: #2C3366; }

/* ตัวอักษรบนแผนที่ (SVG) — ไทยอ่านง่าย น้ำหนักหนา มีพื้นป้ายรองรับเสมอ */
.rkm-svg text { font-family: var(--font-display, 'Plus Jakarta Sans', 'Noto Sans Thai', sans-serif); }
.rkm-t-name { font-size: 15px; font-weight: 800; fill: #FFFFFF; }
.rkm-t-sub { font-size: 11px; font-weight: 600; fill: rgba(255, 255, 255, .92); }
.rkm-t-div { font-size: 11px; font-weight: 800; }
.rkm-t-me { font-size: 12px; font-weight: 800; fill: #FFFFFF; }
.rkm-t-title { font-size: 22px; font-weight: 800; fill: #FFF4C8; letter-spacing: .02em; }

/* จุดบนแผนที่ */
[data-node] { cursor: pointer; outline: none; }
.rkm-emblem-body, .rkm-boss > path, .rkm-check > circle { transition: transform .2s ease, filter .2s ease; transform-box: fill-box; transform-origin: center; }
@media (hover: hover) {
  .rkm-emblem:hover .rkm-emblem-body { transform: scale(1.07); }
  .rkm-boss:hover > path { transform: scale(1.06); }
  .rkm-check:hover > circle { transform: scale(1.15); }
}
[data-node]:focus-visible .rkm-emblem-body > circle:not(.rkm-pulse), [data-node]:focus-visible > path, [data-node]:focus-visible > circle { stroke: #FFD66B; stroke-width: 6; }
.rkm-selected .rkm-emblem-body > circle:nth-last-of-type(1) { stroke: #FFD66B; }
.rkm-plaque-cur rect { stroke: #FFD66B; stroke-width: 3; }

/* Animation (ปิดทั้งหมดเมื่อผู้ใช้ตั้ง "ลดการเคลื่อนไหว") */
.rkm-pulse, .rkm-ready-ring { transform-box: fill-box; transform-origin: center; animation: rkm-pulse 2.2s ease-out infinite; }
.rkm-ready-ring { animation-duration: 1.4s; }
@keyframes rkm-pulse { 0% { transform: scale(.92); opacity: .95; } 100% { transform: scale(1.35); opacity: 0; } }
.rkm-me-bob { animation: rkm-bob 2.4s ease-in-out infinite; }
@keyframes rkm-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.rkm-spark-flow { stroke-dasharray: 1 15; animation: rkm-flow 1.2s linear infinite; }
@keyframes rkm-flow { to { stroke-dashoffset: -32; } }
.rkm-flow { animation: rkm-flow 2.4s linear infinite; }
.rkm-twinkle { animation: rkm-twinkle 3.4s ease-in-out infinite; }
@keyframes rkm-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.rkm-firefly { animation: rkm-firefly 4s ease-in-out infinite; }
@keyframes rkm-firefly { 0%, 100% { opacity: .2; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(6px, -8px); } }
.rkm-wind { stroke-dasharray: 120; animation: rkm-wind 4s ease-in-out infinite; }
@keyframes rkm-wind { 0% { stroke-dashoffset: 120; opacity: 0; } 30% { opacity: .8; } 100% { stroke-dashoffset: -120; opacity: 0; } }
.rkm-bolt { animation: rkm-bolt 5s steps(1) infinite; opacity: 0; filter: drop-shadow(0 0 4px #FFE66D); }
@keyframes rkm-bolt { 0%, 86% { opacity: 0; } 87%, 89% { opacity: 1; } 90% { opacity: .2; } 91%, 93% { opacity: .9; } 94%, 100% { opacity: 0; } }
.rkm-rain { animation: rkm-rain 1.1s linear infinite; }
@keyframes rkm-rain { from { transform: translate(0, -6px); } to { transform: translate(-3px, 8px); } }
.rkm-aurora { animation: rkm-aurora 6s ease-in-out infinite; }
@keyframes rkm-aurora { 0%, 100% { opacity: .22; } 50% { opacity: .55; } }
.rkm-glow { animation: rkm-twinkle 3s ease-in-out infinite; }
.rkm-fog-lifting { transition: opacity 1.4s ease; }
.rkm-fog-lifting.is-gone { opacity: 0; }
.rkm-burst-ring { transform-box: fill-box; transform-origin: center; animation: rkm-burst-ring 1s ease-out forwards; }
@keyframes rkm-burst-ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(4); opacity: 0; } }
.rkm-burst-dot { animation: rkm-burst-dot 1.1s ease-out forwards; }
@keyframes rkm-burst-dot { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rkm-svg *, .rkm-svg { animation: none !important; transition: none !important; }
  .rkm-bolt { opacity: 0; }
}

/* ---------- รายละเอียดแรงค์ (Side panel บนจอกว้าง · Bottom sheet บนมือถือ) ---------- */
.rkm-panel { display: none; }
@media (min-width: 900px) {
  .rkm-panel { display: block; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; padding: 18px;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 22px; box-shadow: var(--shadow-md); }
}
.rkm-sheet { max-width: 520px; }
.rkd-head { display: flex; align-items: center; gap: 14px; }
.rkd-badge { flex-shrink: 0; width: 84px; height: 84px; display: grid; place-items: center; }
.rkd-badge .rk-badge { width: 84px; height: 84px; }
.rkd-badge.is-locked { filter: grayscale(.8); opacity: .65; }
.rkd-region { margin: 0; font-size: .85rem; font-weight: 700; color: var(--rk-x, var(--color-primary)); }
.rkd-name { margin: 2px 0 6px; font-size: 1.6rem; line-height: 1.2; }
.rkd-chip { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #FFFFFF; }
.rkd-chip-ok { background: #1F8A55; } .rkd-chip-current { background: var(--rk-x, var(--color-primary)); }
.rkd-chip-ready { background: #C2410C; } .rkd-chip-locked { background: #5C6077; }
.rkd-motto { margin: 10px 0; color: var(--color-text-muted); }
.rkd-progress { margin: 10px 0; padding: 12px; border-radius: 16px; background: var(--color-surface-2); }
.rkd-progress p { margin: 6px 0 0; font-size: .92rem; }
.rkd-progress.is-ready { background: #FFF1E6; color: #7C2D12; }
:root[data-theme="dark"] .rkd-progress.is-ready { background: #3A2412; color: #FED7AA; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .rkd-progress.is-ready { background: #3A2412; color: #FED7AA; } }
.rkd-qr { font-size: .9rem; color: var(--color-text-muted); }
.rkd-qr b { font-size: 1.5rem; color: var(--color-text); }
.rkd-actions { display: grid; gap: 8px; margin: 12px 0; }
.rkd-h { display: flex; align-items: center; gap: 6px; margin: 16px 0 6px; font-size: 1rem; }
.rkd-divs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rkd-divs li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--color-border); }
.rkd-divs li span { font-weight: 700; min-width: 64px; }
.rkd-divs li b { font-weight: 600; color: var(--color-text-muted); flex: 1; }
.rkd-divs li em { font-style: normal; font-weight: 800; font-size: .8rem; color: var(--rk-x, var(--color-primary)); }
.rkd-divs li.is-here { border: 2px solid var(--rk-x, var(--color-primary)); }
.rkd-how { margin: 0; line-height: 1.6; }
.rkd-note { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; font-size: .88rem; color: var(--color-text-muted); }
.rkd-boss { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 16px;
  background: linear-gradient(135deg, #2A1E3D, #3B1F2B); color: #FFFFFF; }
.rkd-boss > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rkd-boss small { opacity: .85; }
.rkd-boss-pic { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #1D1A2E; display: grid; place-items: center; }
.rkd-boss-st { font-style: normal; font-size: .78rem; font-weight: 800; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); white-space: nowrap; }

/* ป๊อปอัปปลดล็อกดินแดนใหม่ */
.rkm-unlock { text-align: center; max-width: 420px; background: radial-gradient(120% 70% at 50% 0%, var(--rk-p, #FFD66B) -60%, var(--color-surface) 60%); }
.rkm-unlock-kicker { margin: 0; font-weight: 800; letter-spacing: .08em; color: var(--rk-x, var(--color-primary)); }
.rkm-unlock-badge { margin: 8px auto; animation: rkm-pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.rkm-unlock-badge .rk-badge { width: 150px; height: 150px; }
.rkm-unlock h2 { margin: 6px 0 0; font-size: 1.8rem; }
.rkm-unlock-region { margin: 2px 0 8px; font-weight: 700; color: var(--color-text-muted); }
@keyframes rkm-pop { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rkm-unlock-badge { animation: none; } }
.rkm-svg:not(.rkm-wide) .rkm-mirror { display: none; }

/* มือถือ: หัวหน้ากระชับ ให้แผนที่ได้พื้นที่มากที่สุด */
@media (max-width: 599px) {
  .rkm-top { flex-wrap: nowrap; }
  .rkm-top .game-exit { flex-shrink: 0; }
  .rkm-top .rk-mode { min-width: 0; flex: 1; }
  .rkm-top .rk-mode .vd-seg-btn { min-height: 44px; }
  .rkm-title { font-size: 1.35rem; margin: 6px 0 2px; }
  .rkm-legend { flex-wrap: nowrap; overflow-x: auto; font-size: .75rem; gap: 10px; margin-bottom: 8px; scrollbar-width: none; }
  .rkm-legend li { white-space: nowrap; }
  .rkm-stage { border-radius: 18px; margin: 0 -4px; }
}
@media (max-width: 599px) { .rkm-back-text { display: none; } .rkm-top .game-exit { min-width: 44px; min-height: 44px; justify-content: center; } }

/* ---------- ประสิทธิภาพ: ดินแดนนอกจอ/ที่ล็อก ไม่เล่น animation · ไม่มี filter ในแผนที่ ---------- */
.rkm-off *, .rkm-region.rkm-locked * { animation-play-state: paused !important; }
.rkm-region.rkm-locked .rkm-twinkle, .rkm-region.rkm-locked .rkm-glow { opacity: .6; }
.rkm-rain { animation: rkm-rain 1.1s linear infinite; }
.rkm-glow { animation: rkm-twinkle 3s ease-in-out infinite; }

/* ---------- เพื่อนบนแผนที่ ---------- */
.rkm-fgroup { cursor: pointer; outline: none; }
.rkm-fgroup:focus-visible circle { stroke: #FFD66B; stroke-width: 4; }
@media (hover: hover) { .rkm-fgroup:hover circle:first-of-type { stroke: #FFD66B; } }
.rkm-t-more { font-size: 11px; font-weight: 800; fill: #FFFFFF; }
.rkm-t-friend { font-size: 10.5px; font-weight: 700; fill: #FFFFFF; }
.rkm-only-me #rkm-friends, .rkm-only-friends #rkm-me { display: none; }
.rkm-tools { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 10px; }
.rkm-filter { margin: 0; width: auto; }
.rkm-filter .vd-seg-btn { min-height: 40px; padding: 0 14px; white-space: nowrap; }
.rkm-privacy { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--color-text-muted); cursor: pointer; }
.rkm-privacy input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.rkm-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }
.rkm-flist li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; border: 1px solid var(--color-border); }
.rkm-flist li > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rkm-flist li b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rkm-flist small { color: var(--color-text-muted); }
.rkm-flist-av, .rkm-flist li > svg.avatar-svg, .rkm-flist li > img { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.rkm-flist .rk-badge { width: 44px; height: 44px; }
.rkm-fhead { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rkm-fhead .rk-badge { width: 52px; height: 52px; flex-shrink: 0; }
.rkm-fhead .vb-sheet-title { margin: 0; }
.rkm-fsub { margin: 2px 0 0; font-size: .85rem; color: var(--color-text-muted); }
.rkm-ftag { display: inline-block; padding: 0 7px; border-radius: 999px; background: #5B8DEF; color: #FFFFFF; font-size: .72rem; font-weight: 700; line-height: 1.5; }
.rkm-fmore { width: 100%; margin-top: 10px; }
.rkm-fmore[hidden] { display: none; }
.rkm-fsheet .rkm-fhead, .rkm-fsheet .rkm-flist li > span { text-align: left; }
.rkm-fhead { padding-right: 48px; }
.rkm-flist li > .lb-friend { flex: 0 0 auto; }
.rkm-flist li > .lb-friend:empty { display: none; }
@media (max-width: 599px) { .rkm-tools { margin-bottom: 8px; } .rkm-filter { flex: 1; } .rkm-filter .vd-seg-btn { flex: 1; padding: 0 8px; } .rkm-privacy { font-size: .8rem; } }