/* ═══ ตารางอันดับ + กระดานบอส — "ที่ที่ผู้เล่นอยากเห็นชื่อตัวเอง" ════════════════════
   สองหน้าต่างนี้ไม่ใช่ตารางข้อมูลธรรมดา: คนที่ติดอันดับต้องรู้สึกว่าได้ขึ้นเวที
   · สามคนแรกยืนบนแท่นทอง/เงิน/ทองแดง ด้วยหน้าตาตัวละครจริง (หมวก ปีก อาวุธที่สวมอยู่)
   · การ์ด "อันดับของคุณ" ติดล่างเสมอ พร้อมบอกว่าขาดอีกเท่าไรจะแซงคนข้างบน
   · กระดานบอส: ตัวที่อยู่ในแมพเรืองขอบ ตัวที่ตายแล้วรูปซีด + นับถอยหลังตัวใหญ่
   โทน: กระดาษ + ทองของเกม · ตัวเลขใช้ Mitr แบบ tabular ให้หลักไม่เต้นตอนนับถอยหลัง */

/* ── แท็บ: ปุ่มแคปซูลต่อกันเป็นแถบเดียว ─────────────────────────────── */
.rk-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 3px; margin-bottom: 10px;
  background: #e9d9b4; border-radius: 12px; box-shadow: inset 0 1px 3px #0002; }
.rk-tabs button { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px;
  border: 0; border-radius: 9px; background: none; color: #6b5423; font: 500 13px var(--font-head); cursor: pointer; }
.rk-tabs button span { font-size: 15px; }
.rk-tabs button.on { background: linear-gradient(#fff8e6, #f2dfb0); color: #3a2a0c; box-shadow: 0 1px 3px #0003, inset 0 0 0 1px #c9a45a; }
.rk-tabs button:focus-visible { outline: 2px solid #2f6f73; outline-offset: 1px; }

.rk-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 12px; text-align: center; color: var(--ink-soft); }
.rk-empty b { color: var(--ink); font: 600 15px var(--font-head); }
.rk-empty .spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #0002; border-top-color: #a87825; animation: l-spin .8s linear infinite; }

/* ── แท่นสามอันดับแรก ─────────────────────────────────────────────── */
.podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 6px; padding: 18px 2px 0; }
.pd { position: relative; display: grid; justify-items: center; gap: 2px; min-width: 0; text-align: center; }
.pd-av { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #fff6df, #e8d4a6); box-shadow: 0 0 0 3px var(--medal), 0 4px 10px #0003; }
.pd-av > img:first-child { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pd-job { position: absolute; right: -6px; bottom: -4px; width: 24px; height: 24px; filter: drop-shadow(0 1px 2px #0006); }
.pd.p1 .pd-av { width: 78px; height: 78px; box-shadow: 0 0 0 4px var(--medal), 0 0 18px #f5c84a88, 0 5px 12px #0004; }
.pd.p1 { --medal: #e8b64a; --base-a: #f6d680; --base-b: #c8932f; }
.pd.p2 { --medal: #b9c3cf; --base-a: #e6ebf1; --base-b: #9aa6b4; }
.pd.p3 { --medal: #cf8f5a; --base-a: #f0c29a; --base-b: #a8683a; }
.pd-crown { position: absolute; top: -24px; width: 30px; height: 30px; animation: crownBob 2.4s ease-in-out infinite; filter: drop-shadow(0 2px 2px #0004); }
/* เหรียญประจำอันดับ — วางมุมซ้ายล่างของรูป ตรงข้ามไอคอนอาชีพ จะได้ไม่ทับกัน */
.pd-md { position: absolute; left: -8px; bottom: -4px; width: 26px; height: 26px; filter: drop-shadow(0 1px 2px #0005); }
.pd.p1 .pd-md { left: -10px; width: 32px; height: 32px; }
@keyframes crownBob { 50% { translate: 0 -3px; rotate: -6deg; } }
.pd-name { font: 600 13px/1.2 var(--font-head); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; }
.pd.p1 .pd-name { font-size: 15px; }
.pd-val { font: 600 13px var(--font-head); color: #6b4f19; font-variant-numeric: tabular-nums; }
.pd-val small { font: 400 10px var(--font); color: var(--ink-soft); }
.pd-base { width: 100%; display: grid; place-items: center; margin-top: 4px; border-radius: 8px 8px 0 0;
  background: linear-gradient(var(--base-a), var(--base-b)); box-shadow: inset 0 2px 0 #fff8, inset 0 -3px 0 #0002; }
.pd-base b { font: 600 20px var(--font-head); color: #fff; text-shadow: 0 1px 2px #0006; }
.pd.p1 .pd-base { height: 54px; } .pd.p2 .pd-base { height: 38px; } .pd.p3 .pd-base { height: 28px; }
.pd.p3 .pd-base b { font-size: 16px; }
.pd.empty .pd-base { background: #0000000f; box-shadow: none; } .pd.empty .pd-base b { color: #0003; text-shadow: none; }
.pd.me .pd-name { color: #2f6f73; }
.pd .dot, .rk-who .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3fbf6a; margin-left: 5px; vertical-align: 2px; box-shadow: 0 0 0 1.5px #fffa; }

/* ── อันดับที่ 4 ลงไป ─────────────────────────────────────────────── */
.rk-list { display: grid; gap: 3px; margin-top: 8px; }   /* ตัวเลื่อนมีชั้นเดียวคือเนื้อหาหน้าต่าง — ไม่ซ้อนสองชั้น */
.rk-row, .rk-me { display: grid; grid-template-columns: 30px 26px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 6px 9px; border-radius: 9px; background: #ffffff70; }
.rk-row:nth-child(even) { background: #ffffff45; }
.rk-row.me { background: #2f6f7322; box-shadow: inset 0 0 0 1.5px #2f6f73; }
.rk-n { font: 600 14px var(--font-head); text-align: center; color: #8a6b45; font-variant-numeric: tabular-nums; }
.rk-ic { width: 26px; height: 26px; }
.rk-who { display: grid; min-width: 0; line-height: 1.25; }
.rk-who b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-who small { color: var(--ink-soft); font-size: 11px; }
.rk-val { font: 600 14px var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; color: #4a3714; }
.rk-val small { font: 400 10px var(--font); color: var(--ink-soft); }
/* การ์ดตัวคุณ: ติดล่างของหน้าต่างเสมอ */
.rk-me { position: sticky; bottom: 0; margin-top: 8px; grid-template-columns: 30px minmax(0, 1fr) auto;
  background: linear-gradient(90deg, #2f6f73, #3d8a8e); color: #fff; box-shadow: 0 -4px 10px #0002; }
.rk-me .rk-n { color: #ffe39a; font-size: 16px; }
.rk-me span:nth-child(2) { display: grid; min-width: 0; line-height: 1.3; }
.rk-me small { color: #d8f0f0; font-size: 11.5px; }
.rk-me .rk-val, .rk-me .rk-val small { color: #fff; }

/* ── กระดานบอส ────────────────────────────────────────────────────── */
.mv-sum { display: flex; gap: 6px; margin-bottom: 8px; }
.mv-chip { font: 500 12px var(--font-head); padding: 3px 10px; border-radius: 99px; background: #0000000f; color: #6b5423; }
.mv-chip.on { background: #3fbf6a22; color: #237a43; }
.mv-fame { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; margin-bottom: 10px; border-radius: 10px;
  background: linear-gradient(90deg, #3a2a0c, #6b4a15); color: #ffe7a8; }
.mv-fame-t { font: 600 12px var(--font-head); color: #f6d680; flex-basis: 100%; letter-spacing: .02em; }
.mv-fame-p { display: inline-flex; align-items: center; gap: 4px; }
.fm-md { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 1px 1px #0005); }
.mv-fame-p b { font: 600 13px var(--font-head); color: #fff; } .mv-fame-p small, .mv-fame > small { color: #e6cf9a; font-size: 11px; }
.mv-h { font: 600 14px var(--font-head); color: #6b4f19; margin: 6px 2px 4px; }

.mv-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 12px; background: #ffffff70; box-shadow: inset 0 0 0 1px #0000000d; }
.mv-card.alive { background: linear-gradient(90deg, #e3f6dd, #fff8e6); box-shadow: inset 0 0 0 1.5px #57b86b, 0 0 12px #57b86b33; }
.mv-av { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, #43566c, #1c2634 72%); box-shadow: 0 0 0 2.5px var(--ring, #9a9a9a); }
.mv-av > img:first-child { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.mv-av > img[hidden] { display: none; }
.mv-card:not(.alive) .mv-av > img:first-child { filter: grayscale(.9) brightness(.8); }
.mv-elb { position: absolute; right: -4px; bottom: -3px; width: 22px; height: 22px; filter: drop-shadow(0 1px 2px #0007); }
.mv-info { display: grid; min-width: 0; gap: 1px; line-height: 1.3; }
.mv-name { font: 600 15px var(--font-head); color: #3a2a0c; }
.mv-name small { font: 500 11px var(--font); color: #8a6b45; margin-left: 2px; }
.mv-map, .mv-kill { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-kill b { color: #a8741a; }
.mv-cr { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
.mv-kill.none { color: #2f6f73; }
.mv-state { display: grid; justify-items: end; gap: 3px; text-align: right; min-width: 78px; }
.mv-state small { font-size: 11px; color: var(--ink-soft); }
.mv-state.wait b { font: 600 22px/1 var(--font-head); color: #a8741a; font-variant-numeric: tabular-nums; }
.mv-pill { font: 600 11px var(--font-head); color: #237a43; background: #3fbf6a26; padding: 2px 8px; border-radius: 99px;
  animation: alivePulse 1.8s ease-in-out infinite; }
@keyframes alivePulse { 50% { background: #3fbf6a44; } }
.mv-hp { width: 78px; height: 6px; border-radius: 99px; background: #00000018; overflow: hidden; }
.mv-hp i { display: block; height: 100%; background: linear-gradient(#ff8a78, #d8402e); border-radius: 99px; }

/* จอแคบ (มือถือแนวตั้ง): แท่นเล็กลงนิด ตัวเลขนับถอยหลังยังต้องอ่านง่าย */
html.touch-ui .pd-av { width: 54px; height: 54px; }
html.touch-ui .pd.p1 .pd-av { width: 68px; height: 68px; }
html.touch-ui .rk-tabs button { min-height: 40px; }

@media (prefers-reduced-motion: reduce) { .pd-crown, .mv-pill { animation: none; } }

/* สองบานนี้ต้องสูงกว่าบานทั่วไป (430px) — แท่นกินที่ไปครึ่งหนึ่งแล้ว เหลือเห็นแค่สองแถว */
html[data-skin="wood"]:not(.touch-ui) body .win[data-win="rank"],
html[data-skin="wood"]:not(.touch-ui) body .win[data-win="mvp"]{max-height:min(calc(100vh - 110px),660px)}

/* การ์ดกิจกรรมบุกเมือง: ทองทั้งใบ แยกจากบอสปกติชัดเจน */
.mv-card.ev { background: linear-gradient(90deg, #fbe7a6, #fff6dc); box-shadow: inset 0 0 0 1.5px #d9a53a; margin-bottom: 10px; }
.mv-card.ev.alive { background: linear-gradient(90deg, #ffe08a, #fff3c4); box-shadow: inset 0 0 0 2px #e8a21a, 0 0 14px #f2b63a66; }
.mv-card.ev .mv-state.wait b { font-size: 19px; }
.mv-card.ev:not(.alive) .mv-av > img:first-child { filter: none; }

/* หลอด HP บอสกลางบนจอ (25 ก.ย.) — ขึ้นเมื่อบอสอยู่ใน 14 ช่อง · main.js updateBossBar */
#boss-bar { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(460px, 70vw); z-index: 30;
  pointer-events: none; font-family: inherit; filter: drop-shadow(0 2px 3px rgba(40, 24, 10, .45)); }
#boss-bar .bb-top { display: flex; align-items: baseline; gap: 8px; color: #fff4d6; text-shadow: 0 1px 2px #3a2410, 0 0 3px #3a2410; font-size: 15px; }
#boss-bar .bb-top b { font-weight: 800; }
#boss-bar .bb-top em { font-style: normal; font-size: 12px; opacity: .9; }
#boss-bar .bb-top span { margin-left: auto; font-weight: 700; font-size: 13px; }
#boss-bar .bb-track { margin-top: 3px; height: 12px; border-radius: 7px; background: #3a2418; border: 2px solid #e8b64a; overflow: hidden; }
#boss-bar .bb-track i { display: block; height: 100%; width: 100%; background: linear-gradient(#ff7a4a, #c93a2a); transition: width .15s linear; }
@media (max-width: 700px) { #boss-bar { top: 6px; width: 62vw; } #boss-bar .bb-top { font-size: 13px; } }