/* Leaderboard window (item 70, src/rankings-ui.js): modal <dialog> in #game with the HUD's green/gold palette (same
   family as the friends and mail windows). Tabs scroll sideways inside the window on narrow screens, the list scrolls
   inside, the viewer's own row stays at the bottom. No continuous animation. */
#game #rankings-dialog{box-sizing:border-box;width:min(560px,calc(100vw - 24px));max-height:min(680px,calc(100dvh - 24px));margin:auto;padding:12px;border:2px solid #c9a75b;border-radius:14px;background:linear-gradient(#24392c,#1b2c22);color:#fff8dc;font:13px Tahoma,"Noto Sans Thai",sans-serif;box-shadow:0 10px 28px #000b;overflow:hidden;display:none;flex-direction:column;gap:8px}
#game #rankings-dialog[open]{display:flex}
#game #rankings-dialog::backdrop{background:#0007}
#rankings-dialog .rankings-head{display:flex;align-items:center;gap:8px}
#rankings-dialog .rankings-head-icon{flex:none;width:22px;height:22px;fill:none;stroke:#f4dfa8;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#rankings-dialog .rankings-head h2{flex:1;margin:0;color:#f4dfa8;font-size:17px;letter-spacing:.5px}
#rankings-dialog .rankings-close{flex:none;width:38px;height:38px;min-height:0;padding:0;border:1px solid #c9a75b99;border-radius:50%;background:#0003;color:#fff8dc;font:bold 20px/1 Tahoma,sans-serif;cursor:pointer}
#rankings-dialog .rankings-close:hover,#rankings-dialog .rankings-close:focus-visible{background:#8a3a2b}
#rankings-dialog .rankings-tabs{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;padding-bottom:2px;flex:none}
#rankings-dialog .rankings-tabs[hidden]{display:none}
#rankings-dialog .rankings-tab{flex:1 0 auto;min-height:38px;padding:6px 10px;border:1px solid #8fcf8a66;border-radius:9px;background:#0003;color:#e9ffe2;font:bold 12px Tahoma,"Noto Sans Thai",sans-serif;cursor:pointer;white-space:nowrap}
#rankings-dialog .rankings-tab.active{border-color:#e2c172;background:#2f6b3a;color:#fff7d6}
#rankings-dialog .rankings-tab.waiting{opacity:.45;cursor:not-allowed}
#rankings-dialog .rankings-message{min-height:0;margin:0;color:#cfe8c9;font-size:12px}
#rankings-dialog .rankings-message[hidden]{display:none}
#rankings-dialog .rankings-message[data-kind="error"]{color:#ffb4a2}
#rankings-dialog .rankings-list{flex:1 1 auto;min-height:120px;margin:0;padding:0 2px 0 0;overflow-x:hidden;overflow-y:auto;list-style:none;display:grid;align-content:start;gap:5px}
#rankings-dialog .rankings-row{display:flex;align-items:center;gap:8px;min-width:0;padding:6px 8px;border:1px solid #8fcf8a33;border-radius:9px;background:#0002}
#rankings-dialog .rankings-clickable{cursor:pointer}
#rankings-dialog .rankings-clickable:hover,#rankings-dialog .rankings-clickable:focus-visible{border-color:#e2c17299;background:#2f6b3a66;outline:none}
#rankings-dialog .rankings-mine{border-color:#e2c172;background:#3d5a2f}
#rankings-dialog .rankings-pos{flex:none;min-width:34px;height:28px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:#0004;color:#f4dfa8;font:bold 13px/28px Tahoma,"Noto Sans Thai",sans-serif;text-align:center;font-variant-numeric:tabular-nums}
#rankings-dialog .rankings-top1 .rankings-pos{background:#d4a72c;color:#2a2008}
#rankings-dialog .rankings-top2 .rankings-pos{background:#c3c8cc;color:#1f2629}
#rankings-dialog .rankings-top3 .rankings-pos{background:#b9773e;color:#26160a}
#rankings-dialog .rankings-top1 .rankings-name{color:#ffe08a}
#rankings-dialog .rankings-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#8b948d;box-shadow:0 0 0 2px #0004}
#rankings-dialog .rankings-dot-online{background:#5fd35a}
#rankings-dialog .rankings-who{flex:1;min-width:0;display:grid;gap:1px}
#rankings-dialog .rankings-name-line{display:flex;align-items:center;gap:6px;min-width:0}
#rankings-dialog .rankings-name{min-width:0;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
#rankings-dialog .rankings-meta{overflow:hidden;color:#cfe8c9;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
#rankings-dialog .rankings-rank-badge{flex:none;display:inline-block;min-width:16px;height:16px;padding:0 3px;box-sizing:border-box;border:1px solid #1d2b22;border-radius:4px;color:#fffdf2;font:bold 11px/14px Tahoma,sans-serif;text-align:center;text-shadow:0 0 2px #1d2b22}
#rankings-dialog img.rankings-rank-badge{width:16px;padding:0;border:0;object-fit:contain}
#rankings-dialog .rankings-emblem{flex:none;width:20px;height:20px}
#rankings-dialog .rankings-emblem-empty{color:#f4dfa8;font-size:14px;line-height:20px;text-align:center}
#rankings-dialog .rankings-value{flex:none;max-width:46%;overflow:hidden;color:#f4dfa8;font-size:12px;font-weight:bold;text-align:right;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
#rankings-dialog .rankings-empty{padding:16px 8px;color:#cfe8c9;font-size:12px;text-align:center}
#rankings-dialog .rankings-me{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid #e2c172;border-radius:9px;background:#14241a;font-weight:bold}
#rankings-dialog .rankings-me[hidden]{display:none}
#rankings-dialog .rankings-me-label{color:#fff7d6}
#rankings-dialog .rankings-me-value{min-width:0;overflow:hidden;color:#f4dfa8;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
#rankings-dialog .rankings-foot{flex:none;margin:0;color:#a9c7a2;font-size:11px;text-align:right}
@media(max-width:600px){
 #game #rankings-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border-width:0;padding:10px}
 #rankings-dialog .rankings-tab{flex:0 0 auto}
 #rankings-dialog .rankings-value{max-width:40%;font-size:11px}
 #rankings-dialog .rankings-pos{min-width:30px}
}
/* Landscape phones: short screens get the full height. */
@media(max-height:500px){#game #rankings-dialog{max-height:calc(100dvh - 12px);padding:8px;gap:5px}#rankings-dialog .rankings-head h2{font-size:15px}#rankings-dialog .rankings-list{min-height:60px}#rankings-dialog .rankings-row{padding:4px 8px}}
/* The 10th menu button ("อันดับ"): between 601 and 850 px wide the one-row menu sits beside the minimap, so its gaps
   shrink there to keep every button left of the minimap (390 px phones wrap the menu already; desktop is unchanged). */
#adventure-navigation .adventure-nav-button[data-section="rankings"] svg.adventure-icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
@media(max-width:850px) and (min-width:601px){body:not(.hud-navy) #adventure-navigation.adventure-navigation{gap:5px}body:not(.hud-navy) #adventure-navigation .adventure-nav-button{font-size:9px;gap:2px;padding-left:1px;padding-right:1px}body:not(.hud-navy) #adventure-navigation .adventure-nav-button>.adventure-icon{width:20px;height:20px}}
@media(max-width:780px) and (min-width:601px){body:not(.hud-navy) #adventure-navigation.adventure-navigation{gap:1px}body:not(.hud-navy) #adventure-navigation .adventure-nav-button{min-width:0}}
/* Approved gold/laurel frame: presentation scoped to the native leaderboard. */
#game #rankings-dialog{--rk-gold:#e7c66f;--rk-paper:#fff3c7;--rk-muted:#bdd3bc;--rk-accent:#66bf65;--rk-pad:clamp(48px,6.8dvh,64px);--rk-top:clamp(90px,13dvh,120px);isolation:isolate;box-sizing:border-box;width:min(750px,calc((100dvh - 24px) * .8333333),calc(100vw - 20px));height:min(900px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);max-width:calc(100vw - 20px);margin:auto;padding:var(--rk-top) var(--rk-pad) clamp(64px,9dvh,86px);border:0;border-radius:12px;background:transparent;color:var(--rk-paper);font-family:Tahoma,"Noto Sans Thai",sans-serif;box-shadow:0 18px 46px #0009;overflow:visible;gap:10px;color-scheme:dark;scrollbar-color:#c8a45b #0b2119;scrollbar-width:thin}
#rankings-dialog .rankings-frame{position:absolute;inset:0;z-index:5;background:url('/assets/ui/rankings-royal-v1/frame.df223ae01f76.webp') center/100% 100% no-repeat;pointer-events:none}
#rankings-dialog>header{position:relative;flex:none;padding:0 0 8px;border:0;background:none;gap:10px}
#rankings-dialog>header::before{content:"";position:absolute;width:44px;height:44px;left:calc(50% - 22px);top:calc(32px - var(--rk-top));background:url('/assets/ui/rankings-royal-v1/emblems.png') 0 0/400% 200%;pointer-events:none;z-index:6}
#rankings-dialog[data-board="guild-rank"]>header::before{background-position:33.333% 0}
#rankings-dialog[data-board="boss-damage"]>header::before{background-position:66.667% 0}
#rankings-dialog[data-board="guild"]>header::before{background-position:100% 0}
#rankings-dialog[data-board="wealth"]>header::before{background-position:0 100%}
#rankings-dialog .rankings-head h2{padding:0;border:0;background:none;font-size:clamp(20px,2.6vh,28px);line-height:1.25;letter-spacing:0;color:var(--rk-paper)}
#rankings-dialog .rankings-head-icon{width:26px;height:26px;stroke:var(--rk-gold)}
#rankings-dialog .rankings-close{width:36px;height:36px;border:1px solid #a68e4e;background:#10271e;color:var(--rk-paper);font-size:25px;transition:background .16s ease-out}
#rankings-dialog .rankings-close:hover{background:#523022}
#rankings-dialog .rankings-tabs{display:flex;flex:none;gap:6px;min-height:43px;padding:0 0 4px;overflow-x:auto;scrollbar-width:thin}
#rankings-dialog .rankings-tab{flex:1 0 auto;min-height:38px;padding:6px 9px;font-size:clamp(11px,1.55vh,14px);border:1px solid #587f64;border-radius:6px;background:#0e271e;color:var(--rk-paper);line-height:1.3;transition:background .18s ease-out,border-color .18s ease-out}
#rankings-dialog .rankings-tab.active{border-color:var(--rk-gold);background:#2e6838;color:#fffbdc;box-shadow:inset 0 2px 8px #decb7b33}
#rankings-dialog .rankings-tab.waiting{opacity:1;color:#a8bea4;border-style:dashed;cursor:pointer}
#rankings-dialog .rankings-tab.waiting.active{background:#3a2020;border-color:#db967d;color:#ffe3ce}
#rankings-dialog .rankings-podium{flex:none;list-style:none;display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:8px;margin:0;padding:6px 0 12px;border-bottom:1px solid #725d38;animation:rankings-reveal .32s cubic-bezier(.16,1,.3,1)}
#rankings-dialog .rankings-podium[hidden],#rankings-dialog .rankings-list[hidden],#rankings-dialog .rankings-waiting[hidden]{display:none}
#rankings-dialog .rankings-podium>.rankings-row{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0;gap:3px;padding:0 4px 10px;border:0;border-radius:0;background:linear-gradient(180deg,transparent,#244a3a66);text-align:center;min-height:139px}
#rankings-dialog .rankings-podium>.rankings-top1{grid-column:2;grid-row:1;min-height:158px;background:linear-gradient(180deg,transparent,#755c2044)}
#rankings-dialog .rankings-podium>.rankings-top2{grid-column:1;grid-row:1}
#rankings-dialog .rankings-podium>.rankings-top3{grid-column:3;grid-row:1;background:linear-gradient(180deg,transparent,#77412a33)}
#rankings-dialog .rankings-podium .rankings-pos{position:relative;display:grid;place-items:center;flex:none;width:76px;height:76px;padding:8px 0 0;border-radius:0;background:transparent;color:#ffe7a0;font-size:27px;line-height:1;text-shadow:0 2px 3px #000}
#rankings-dialog .rankings-podium .rankings-pos::before{content:"";position:absolute;inset:0;background:url('/assets/ui/rankings-royal-v1/emblems.png') 33.333% 100%/400% 200%;z-index:-1}
#rankings-dialog .rankings-podium .rankings-top2 .rankings-pos::before{background-position:66.667% 100%}
#rankings-dialog .rankings-podium .rankings-top3 .rankings-pos::before{background-position:100% 100%}
#rankings-dialog .rankings-podium .rankings-top1 .rankings-pos{width:92px;height:92px;font-size:32px}
#rankings-dialog .rankings-podium .rankings-dot{position:absolute;right:15%;top:75px;width:7px;height:7px}
#rankings-dialog .rankings-podium .rankings-top1 .rankings-dot{top:90px}
#rankings-dialog .rankings-podium .rankings-who{flex:none;max-width:100%;gap:3px}
#rankings-dialog .rankings-podium .rankings-name-line{justify-content:center;gap:4px}
#rankings-dialog .rankings-podium .rankings-name{font-size:clamp(12px,1.8vh,16px);line-height:1.4}
#rankings-dialog .rankings-podium .rankings-meta{font-size:clamp(10px,1.35vh,12px);line-height:1.4;color:var(--rk-muted)}
#rankings-dialog .rankings-podium .rankings-value{max-width:100%;font-size:clamp(11px,1.6vh,14px);line-height:1.4;text-align:center;white-space:normal;overflow-wrap:anywhere;color:var(--rk-gold)}
#rankings-dialog .rankings-list{min-height:52px;flex:1 1 auto;gap:0;padding:0 3px 0 0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;animation:rankings-reveal .28s cubic-bezier(.16,1,.3,1)}
#rankings-dialog .rankings-list>.rankings-row{min-height:43px;padding:7px 9px;border:0;border-bottom:1px solid #4d6f533d;border-radius:0;background:#0c251ccc;gap:8px}
#rankings-dialog .rankings-list>.rankings-row:nth-child(even){background:#16342899}
#rankings-dialog .rankings-clickable:hover,#rankings-dialog .rankings-clickable:focus-visible{background:#365934;color:#fff8d9;outline:2px solid var(--rk-gold);outline-offset:-2px}
#rankings-dialog .rankings-row.rankings-mine{background:#4d522766;border-bottom-color:var(--rk-gold)}
#rankings-dialog .rankings-name{font-size:clamp(12px,1.65vh,15px);line-height:1.35;color:var(--rk-paper)}
#rankings-dialog .rankings-meta{font-size:11px;line-height:1.35;color:var(--rk-muted)}
#rankings-dialog .rankings-pos{background:#092018;color:var(--rk-gold);border-radius:4px;min-width:30px;height:26px;line-height:26px}
#rankings-dialog .rankings-value{color:var(--rk-gold);font-size:clamp(11px,1.65vh,14px);max-width:45%;font-variant-numeric:tabular-nums}
#rankings-dialog .rankings-me{margin-top:auto;padding:9px 12px;border-radius:6px;border:1px solid var(--rk-gold);background:#1c321c;flex:none;min-height:40px;font-size:13px}
#rankings-dialog .rankings-me-value{color:var(--rk-gold);font-size:13px;white-space:normal;text-align:right}
#rankings-dialog .rankings-foot{font-size:10px;line-height:1.35;color:var(--rk-muted)}
#rankings-dialog .rankings-message{font-size:12px;line-height:1.4;color:var(--rk-muted)}
#rankings-dialog .rankings-waiting{flex:1;min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px 16px;text-align:center;background:radial-gradient(ellipse at center,#722c2733,transparent 70%);animation:rankings-boss .45s cubic-bezier(.16,1,.3,1)}
#rankings-dialog .rankings-waiting-icon{width:112px;height:112px;background:url('/assets/ui/rankings-royal-v1/emblems.png') 66.667% 0/400% 200%}
#rankings-dialog .rankings-waiting h3{font-size:22px;line-height:1.4;color:#ffe3cd;margin:0}
#rankings-dialog .rankings-waiting p{max-width:35ch;font-size:14px;line-height:1.65;color:#e2c4b7;margin:0}
#rankings-dialog[data-board="guild-rank"]{--rk-accent:#c8b061}
#rankings-dialog[data-board="guild"]{--rk-accent:#77bfaa}
#rankings-dialog[data-board="wealth"]{--rk-accent:#dfbf61}
#rankings-dialog[data-board="guild-rank"] .rankings-podium{animation-name:rankings-seal}
#rankings-dialog[data-board="guild"] .rankings-podium{animation-name:rankings-banner}
#rankings-dialog[data-board="wealth"] .rankings-podium{animation-name:rankings-gold}
#rankings-dialog :is(button,[role=button]):focus-visible{outline:2px solid #ffe6a2;outline-offset:2px}
#rankings-dialog ::selection{background:#b9a248;color:#091e17}
@keyframes rankings-reveal{from{filter:brightness(.88);transform:translateY(4px)}to{filter:brightness(1);transform:translateY(0)}}
@keyframes rankings-seal{from{filter:brightness(.75);transform:scale(.985)}to{filter:brightness(1);transform:scale(1)}}
@keyframes rankings-banner{from{clip-path:inset(0 0 3% 0);filter:brightness(.85)}to{clip-path:inset(0);filter:brightness(1)}}
@keyframes rankings-gold{from{filter:brightness(1.28)}to{filter:brightness(1)}}
@keyframes rankings-boss{from{filter:brightness(.65);transform:translateY(5px)}to{filter:brightness(1);transform:translateY(0)}}
@media(max-height:800px){#game #rankings-dialog{gap:7px}#rankings-dialog .rankings-podium{gap:5px;padding:2px 0 8px}#rankings-dialog .rankings-podium>.rankings-row{min-height:116px}#rankings-dialog .rankings-podium>.rankings-top1{min-height:132px}#rankings-dialog .rankings-podium .rankings-pos{width:62px;height:62px;font-size:23px}#rankings-dialog .rankings-podium .rankings-top1 .rankings-pos{width:75px;height:75px;font-size:27px}#rankings-dialog .rankings-podium .rankings-dot{top:59px}#rankings-dialog .rankings-podium .rankings-top1 .rankings-dot{top:71px}}
@media(max-width:600px){#game #rankings-dialog{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);max-width:calc(100vw - 12px);--rk-top:110px;padding:110px 34px 82px;gap:7px}#rankings-dialog>header::before{top:-76px;width:40px;height:40px;left:calc(50% - 20px)}#rankings-dialog .rankings-tab{flex:0 0 auto;padding:6px 10px}#rankings-dialog .rankings-podium .rankings-name{font-size:11px}#rankings-dialog .rankings-podium .rankings-meta{font-size:10px}#rankings-dialog .rankings-list .rankings-value{max-width:41%;font-size:11px}#rankings-dialog .rankings-list .rankings-name{font-size:12px}#rankings-dialog .rankings-me{margin-top:auto;padding:8px;font-size:11px}#rankings-dialog .rankings-me-value{font-size:11px}}
@media(max-height:520px){#game #rankings-dialog{width:min(720px,calc(100vw - 20px));height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);--rk-top:55px;padding:55px 58px 45px;gap:5px}#rankings-dialog>header::before{top:-43px;width:30px;height:30px;left:calc(50% - 15px)}#rankings-dialog .rankings-head h2{font-size:19px}#rankings-dialog .rankings-podium{display:none}#rankings-dialog .rankings-tabs{min-height:35px}#rankings-dialog .rankings-tab{min-height:31px}#rankings-dialog .rankings-me{min-height:30px;padding:5px 10px}#rankings-dialog .rankings-waiting-icon{width:64px;height:64px}#rankings-dialog .rankings-waiting{min-height:80px;padding:8px;gap:5px}}
@media(prefers-reduced-motion:reduce){#rankings-dialog *,#rankings-dialog *::before,#rankings-dialog *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#rankings-dialog .rankings-list>.rankings-compact-top{display:none}
@media(max-height:520px){#rankings-dialog .rankings-list>.rankings-compact-top{display:flex}#rankings-dialog:not([data-waiting="true"]) .rankings-list[hidden]{display:grid}}

#game #rankings-dialog::before{content:'';position:absolute;inset:6% 6%;z-index:-1;background:linear-gradient(135deg,#15372b,#091e17 70%);border-radius:10px;pointer-events:none}
#rankings-dialog .rankings-waiting{background:linear-gradient(180deg,#101c1433,#071510aa),url('/assets/ui/rankings-royal-v1/boss.ba6929a94f7f.webp') center/cover;border:1px solid #735037;border-radius:6px;text-shadow:0 2px 4px #000;padding:24px}
#rankings-dialog .rankings-waiting h3,#rankings-dialog .rankings-waiting p{background:#0c1612d9;padding:5px 12px;border-radius:4px}

#rankings-dialog .rankings-foot{padding-right:10px}