/* 🏆 排行榜「榮耀殿堂」（js/ranking.js）：沿用單機版視窗外框（.lmui-ov，見 lmui.css）＋分頁（.tabs）。
   上面標題（皇冠＋金線）、副標；榜：前三名站頒獎台（2｜1｜3，金 #f2c14e、銀 #cfd5dc、銅 #cd8a55），第 4 名起一行一個；最下面「我的名次＋差多少」。
   手機直式 375 寬、電腦：台子三座並排；手機橫式（max-height 500，窗只有 288 高）：台子改成一排三張小卡 */
/* 標題：皇冠＋金色漸層字＋兩邊金線 */
.rk-ov .hd { padding-bottom: 0; }
.rk-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rk-title::before, .rk-title::after { content: ""; flex: 0 1 44px; min-width: 12px; height: 2px; background: linear-gradient(90deg, rgba(242,193,78,0), #f2c14e); }
.rk-title::after { transform: scaleX(-1); }
.rk-title > span { white-space: nowrap; font: 900 21px/1.2 "Microsoft JhengHei", "PingFang TC", serif; letter-spacing: 4px; padding-left: 4px;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe38f 40%, #d99a26 72%, #fff0b4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 6px rgba(255,190,60,.55)); }
.rk-crown { flex: none; width: 20px; height: 15px; fill: #f2c14e; filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 3px rgba(255,200,80,.6)); }
.rk-sub { flex: none; padding: 1px 8px 2px; text-align: center; color: #b9a57a; font-size: 12px; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-ago { color: #8d8574; }

.rk-ov .bd { padding: 6px 4px 8px; gap: 0; }

/* 頒獎台：2｜1｜3（DOM 順序 1、2、3，用 order 排）；顏色、台子高度看名次（同分並列可能兩座都是金的） */
.rk-pod { flex: none; display: flex; align-items: flex-end; justify-content: center; gap: 6px; padding: 18px 0 0; }
.rk-p { --c: #cd8a55; --dk: #5a3216; --glow: rgba(205,138,85,.5); position: relative; flex: 1 1 0; min-width: 0; max-width: 118px; display: flex; flex-direction: column; align-items: center; }
.rk-p.r1 { --c: #f2c14e; --dk: #6a4b0c; --glow: rgba(242,193,78,.7); }
.rk-p.r2 { --c: #cfd5dc; --dk: #4b525c; --glow: rgba(207,213,220,.5); }
.rk-p.sc { order: 2; } .rk-p.sl { order: 1; } .rk-p.sr { order: 3; }
.rk-p .rk-crown { position: absolute; top: -16px; left: 50%; width: 26px; height: 20px; margin-left: -13px; z-index: 1; }
.rk-ava { position: relative; width: 52px; height: 52px; flex: none; border: 2px solid var(--c); border-radius: 50%; overflow: hidden; box-sizing: border-box;
  background: radial-gradient(circle at 50% 35%, #3a2e1e, #0b0806 75%); box-shadow: 0 0 10px var(--glow); }
.rk-p.r1 .rk-ava { width: 66px; height: 66px; border-width: 3px; box-shadow: 0 0 16px var(--glow); }
.rk-ava img { display: block; width: 100%; height: 100%; padding: 8px; box-sizing: border-box; object-fit: contain; filter: brightness(1.5) contrast(1.1) drop-shadow(0 1px 1px #000); }
.rk-ava i { display: flex; align-items: center; justify-content: center; height: 100%; font-style: normal; font-weight: 900; font-size: 22px; color: var(--c); }
.rk-who { display: flex; flex-direction: column; align-items: center; max-width: 100%; margin: 4px 0; line-height: 1.25; text-align: center; }
.rk-pn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff3d6; font-size: 14px; text-shadow: 0 1px 0 #000; }
.rk-p.r1 .rk-pn { font-size: 15px; color: #ffe9a8; }
.rk-who small { color: #a8997a; font-size: 11px; }
.rk-pv { color: var(--c); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-p.me .rk-pn { color: #bfe6ff; }
.rk-p.me .rk-ava { outline: 2px solid #7fd0ff; outline-offset: 2px; }
/* 台子本體：上緣亮、往下變暗；名次數字刻在台子上 */
.rk-step { width: 100%; height: 30px; display: flex; justify-content: center; align-items: flex-start; padding-top: 3px; box-sizing: border-box; border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--c) 0%, var(--dk) 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -6px 10px rgba(0,0,0,.35); transform-origin: 50% 100%; }
.rk-p.r1 .rk-step { height: 54px; }
.rk-p.r2 .rk-step { height: 40px; }
.rk-step b { color: #1a1208; font: 900 20px/1 "Microsoft JhengHei", serif; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.rk-p.r1 .rk-step b { font-size: 24px; }

/* 開榜動畫（開視窗、切分頁各一次）：台子由低升起（3→2→1）、人跟著浮上來、第一名頭像掃一道光 */
.rk-pod.anim .rk-step { animation: rkRise .5s cubic-bezier(.2,.9,.3,1.1) both; animation-delay: calc(var(--i) * .14s); }
.rk-pod.anim .rk-ava, .rk-pod.anim .rk-who { animation: rkUp .45s ease-out both; animation-delay: calc(var(--i) * .14s + .22s); }
.rk-pod.anim .rk-crown { animation: rkCrown .55s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i) * .14s + .45s); }
.rk-pod.anim .rk-p.r1 .rk-ava::after { content: ""; position: absolute; inset: -10%; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,250,220,.85) 48%, rgba(255,230,150,.4) 54%, transparent 66%); transform: translateX(-120%);
  animation: rkSweep .8s ease-in-out both; animation-delay: calc(var(--i) * .14s + .8s); }
.rk-pod.anim ~ .rk-list { animation: rkFade .4s ease-out .35s both; }
@keyframes rkRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rkUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rkCrown { from { opacity: 0; transform: translateY(-10px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes rkSweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes rkFade { from { opacity: 0; } to { opacity: 1; } }

/* 第 4 名起：一行一個（名次、名字＋職業小字、數值），台子底下一條金線隔開 */
.rk-list { display: flex; flex-direction: column; border-top: 2px solid #6a4b0c; }
.rk-row { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 2px 8px; border: 1px solid transparent; border-bottom-color: #2e271e; color: #eee; }
.rk-row:nth-child(even) { background: rgba(255,240,200,.035); }
.rk-n { flex: none; width: 24px; text-align: center; font-weight: 700; font-size: 15px; color: #cdb98a; font-variant-numeric: tabular-nums; }
.rk-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }
.rk-nm small { margin-left: 6px; font-size: 11px; font-weight: 400; color: #a8997a; }
.rk-v { flex: none; text-align: right; font-size: 14px; font-weight: 700; color: #fcd34d; font-variant-numeric: tabular-nums; }
.rk-row.me { border-color: #7fd0ff; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(127,208,255,.55); background: rgba(60,120,170,.12); }
.rk-row.me .rk-nm { color: #bfe6ff; }
.rk-none { padding: 40px 8px; text-align: center; color: #a8997a; font-size: 15px; }

/* 最下面：我的名次＋一句差多少 */
.rk-me { flex: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; padding: 7px 10px 2px; border-top: 1px solid #6a4b0c; font-size: 15px; color: #f1ead9;
  background: linear-gradient(180deg, rgba(242,193,78,.10), rgba(242,193,78,0)); }
.rk-me:empty { display: none; }
.rk-mine { flex: none; }
.rk-mine b { color: #fde047; font-size: 19px; }
.rk-mine b.rk-no { color: #a8997a; font-size: 15px; }
.rk-mine small { color: #a8997a; font-size: 12px; }
.rk-tip { min-width: 0; color: #fcd34d; font-size: 13px; }

/* 等級分頁的職業按鈕（第 99 項）：分頁底下一排小按鈕，手機直式 375 寬六顆放一行 */
.rk-cls { flex: none; display: flex; flex-wrap: nowrap; gap: 4px; padding: 6px 8px 0; }   /* 一排：按鈕平分寬度，不換行 */
.rk-cls:empty { display: none; }
.rk-cls button { flex: 1 1 0; min-width: 0; min-height: 30px; padding: 2px 0; white-space: nowrap; border: 1px solid #4a3f30; border-radius: 14px; background: #15120e; color: #cdb98a; font-size: 13px; cursor: pointer; }
.rk-cls button.on { border-color: #c9a227; background: #3a2d0c; color: #fde047; font-weight: 700; }

/* 同分並列到第 3 名以內、排在台子底下的：名次數字也上色 */
.rk-row.r1 .rk-n { color: #f2c14e; } .rk-row.r2 .rk-n { color: #cfd5dc; } .rk-row.r3 .rk-n { color: #cd8a55; }

/* 電腦（800×600 舞台）：窗比手機直式矮一半 → 台子、頭像縮一點，底下多露出幾名 */
@media (min-height: 501px) {
  body.pcui .rk-pod { padding-top: 16px; }
  body.pcui .rk-ava { width: 42px; height: 42px; }
  body.pcui .rk-p.r1 .rk-ava { width: 54px; height: 54px; }
  body.pcui .rk-ava img { padding: 6px; }
  body.pcui .rk-who { margin: 2px 0 3px; line-height: 1.15; }
  body.pcui .rk-step { height: 20px; padding-top: 1px; }
  body.pcui .rk-p.r1 .rk-step { height: 38px; }
  body.pcui .rk-p.r2 .rk-step { height: 28px; }
  body.pcui .rk-step b { font-size: 16px; }
  body.pcui .rk-p.r1 .rk-step b { font-size: 20px; }
  body.pcui .rk-row { min-height: 32px; }
}

/* 手機橫式：窗只有 288 高 → 標題縮小、副標收起來；台子改成一排三張小卡（2｜1｜3，頭像在左、名字數值在右、名次徽章在左上角，中間那張略高） */
@media (max-height: 500px) {
  .rk-title > span { font-size: 16px; letter-spacing: 3px; }
  .rk-title .rk-crown { width: 16px; height: 12px; }
  .rk-title::before, .rk-title::after { flex-basis: 28px; }
  .rk-sub { display: none; }
  .rk-ov .tabs { padding-top: 2px; }
  .rk-ov .tabs button { padding: 3px; font-size: 13px; }
  .rk-cls { padding-top: 3px; gap: 3px; }
  .rk-cls button { min-height: 24px; padding: 0 4px; font-size: 12px; }
  .rk-ov .bd { padding: 4px; }
  .rk-pod { align-items: stretch; gap: 6px; padding: 10px 2px 6px; }
  .rk-p { max-width: none; justify-content: center; padding: 5px 4px 4px; border: 1px solid var(--c); border-radius: 8px;
    background: linear-gradient(180deg, var(--dk), #17120c 90%); }
  .rk-p.sc { translate: 0 -4px; box-shadow: 0 0 10px var(--glow); }
  .rk-p.me { outline: 2px solid #7fd0ff; outline-offset: 1px; }   /* 頭像收起來了：自己那張卡外面一圈藍 */
  .rk-p .rk-crown { top: -11px; width: 20px; height: 15px; margin-left: -10px; }
  .rk-ava { display: none; }   /* 窗只有 280 寬：一張卡 70 寬，頭像放不下名字 */
  .rk-who { width: 100%; margin: 0; line-height: 1.2; }
  .rk-pn, .rk-p.r1 .rk-pn { font-size: 13px; }
  .rk-who small { display: none; }
  .rk-pv { font-size: 12px; }
  .rk-step, .rk-p.r1 .rk-step, .rk-p.r2 .rk-step { position: absolute; left: -6px; top: -7px; width: 18px; height: 18px; padding: 0; align-items: center; border-radius: 50%; box-shadow: 0 1px 2px #000; }
  .rk-step b, .rk-p.r1 .rk-step b { font-size: 12px; }
  .rk-pod.anim .rk-step, .rk-pod.anim .rk-who { animation: none; }
  .rk-pod.anim .rk-p { animation: rkUp .4s ease-out both; animation-delay: calc(var(--i) * .1s); }
  .rk-p.r1 .rk-who { position: relative; overflow: hidden; }   /* 掃光改掃在第一名的卡上（頭像收起來了） */
  .rk-pod.anim .rk-p.r1 .rk-who::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,250,220,.75) 48%, transparent 66%); transform: translateX(-120%);
    animation: rkSweep .8s ease-in-out both; animation-delay: calc(var(--i) * .1s + .5s); }
  .rk-row { min-height: 30px; padding: 0 8px; }
  .rk-me { padding: 3px 10px 0; font-size: 13px; }
  .rk-mine b { font-size: 16px; }
  .rk-tip { font-size: 12px; }
}
/* 減少動態：整組不播 */
@media (prefers-reduced-motion: reduce) { .rk-pod *, .rk-pod .rk-p, .rk-list { animation: none !important; } .rk-ava::after, .rk-who::after { content: none !important; } }