/* =====================================================================
   Ranking + Friends in the Premium Shop style (2026-09-28)
   Same 9-slice sky frame, title bar, sky panels and gold/blue buttons as #premium-window (css/ui-sky-2.css).
   The ranking window markup is built by the main bundle: section.painted-window.nv-rank > .pw-body.rk-body
   Remove the <link> to css/premium-social.css to go back to the old parchment look (the ranking markup keeps working).
   ===================================================================== */

/* ---------------------------------------------------------------- shared frame */
html body #hud section#ranking-window.painted-window.nv-rank,
html body #hud section#friends-window.painted-window {
  --frame: url('/ui/settings/frame-sky.webp?v=1');
  color: #10294f !important;
}
html body #hud section#ranking-window.painted-window.nv-rank { --pw-width: 520px !important; }
html body #hud section#friends-window.painted-window { --pw-width: 500px !important; }
html body #hud section#ranking-window.painted-window.nv-rank::before,
html body #hud section#friends-window.painted-window::before {
  border-width: calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) !important;
  border-image: url('/ui/settings/frame-sky.webp?v=1') 492 0 145 0 fill / calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) stretch !important;
  filter: drop-shadow(0 12px 22px rgba(10, 30, 60, 0.4)) !important;
}
html body #hud section#ranking-window.painted-window.nv-rank > .titlebar,
html body #hud section#friends-window.painted-window > .titlebar {
  top: calc(var(--u) * 78) !important; height: calc(var(--u) * 74) !important; padding: 0 calc(var(--u) * 120) !important;
}
html body #hud section#ranking-window.painted-window.nv-rank > .titlebar > span,
html body #hud section#friends-window.painted-window > .titlebar > span {
  color: #ffffff !important; font-size: calc(var(--u) * 44) !important;
  text-shadow: -0.1em 0 #1b3a7a, 0.1em 0 #1b3a7a, 0 -0.08em #1b3a7a, 0 0.1em #1b3a7a, 0 0.15em 0.25em rgba(10, 30, 80, 0.6) !important;
}
/* invisible hit area over the painted red X */
html body #hud section#ranking-window.painted-window.nv-rank > .titlebar button,
html body #hud section#friends-window.painted-window > .titlebar button {
  position: absolute !important; right: auto !important; left: calc(var(--u) * 754) !important; top: calc(var(--u) * -3) !important;
  width: calc(var(--u) * 54) !important; height: calc(var(--u) * 54) !important; border-radius: 50% !important; aspect-ratio: auto !important;
}
html body #hud section#ranking-window.painted-window.nv-rank .pw-body,
html body #hud section#friends-window.painted-window .pw-body {
  margin: calc(var(--u) * 196) 0 calc(var(--u) * 50) !important;
  padding: calc(var(--u) * 4) calc(var(--u) * 36) calc(var(--u) * 12) calc(var(--u) * 40) !important;
  max-height: calc((100dvh - 16px) / var(--ui-zoom, 1) - var(--u) * 250) !important;
  scrollbar-color: #7fa9d6 transparent !important;
}
html body #hud section:is(#ranking-window.nv-rank, #friends-window) .pw-panel {
  border-color: #9ec2e6 !important; background: linear-gradient(180deg, #ffffff, #eef6fe) !important;
  box-shadow: inset 0 0 0 calc(var(--u) * 3) #ffffff, inset 0 0 0 calc(var(--u) * 4.5) #cfe2f5, 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(20, 60, 120, 0.15) !important;
}
html body #hud section:is(#ranking-window.nv-rank, #friends-window) .pw-ribbon {
  background: linear-gradient(180deg, #3f86e0, #1d58b0) !important; color: #ffffff !important;
  border-bottom: calc(var(--u) * 2) solid #dfb758;
}
html body #hud section:is(#ranking-window.nv-rank, #friends-window) .pw-ribbon small { margin-left: auto; color: #ffe39a !important; }

/* ---------------------------------------------------------------- RANKING */
/* undo the old parchment frame (#hud #ranking-window in the bundle css) */
html body #hud section#ranking-window.painted-window.nv-rank {
  width: min(var(--pw-width), calc((100vw - 12px) / var(--ui-zoom, 1))) !important;
  aspect-ratio: auto !important; height: fit-content !important;
  max-height: calc((100dvh - 16px) / var(--ui-zoom, 1)) !important;
  background: none !important; container-type: inline-size !important; overflow: visible !important;
}
html body #hud section#ranking-window.nv-rank .rk-hero {
  display: flex; align-items: center; gap: calc(var(--u) * 16); margin: 0 0 calc(var(--u) * 14);
  padding: calc(var(--u) * 12) calc(var(--u) * 18); border-radius: calc(var(--u) * 16);
  border: calc(var(--u) * 2.5) solid #dfb758;
  background: radial-gradient(ellipse at 20% 30%, #4f93f2, #1f5fd0 55%, #123a82) !important;
  box-shadow: inset 0 0 0 calc(var(--u) * 3) rgba(255, 255, 255, 0.35), 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(20, 60, 120, 0.25);
}
html body #hud section#ranking-window.nv-rank .rk-trophy {
  flex: none; width: calc(var(--u) * 84); height: calc(var(--u) * 84);
  background: url('/ui/ranking/medal-1.png') center / contain no-repeat;
  filter: drop-shadow(0 calc(var(--u) * 3) 0 #0b2050);
}
html body #hud section#ranking-window.nv-rank .rk-hero > span { display: flex; flex-direction: column; min-width: 0; }
html body #hud section#ranking-window.nv-rank .rk-hero .rk-title {
  font-family: "Cormorant Garamond", "Noto Serif Thai", "Noto Sans Thai", serif; font-size: calc(var(--u) * 38) !important;
  font-weight: 700; line-height: 1.1; color: #ffe39a !important; text-shadow: 0 calc(var(--u) * 2) 0 #0b2050 !important; white-space: nowrap;
}
html body #hud section#ranking-window.nv-rank .rk-hero .rk-title::before,
html body #hud section#ranking-window.nv-rank .rk-hero .rk-title::after,
html body #hud section#ranking-window.nv-rank .rk-hero .rk-sub::before,
html body #hud section#ranking-window.nv-rank .rk-hero .rk-sub::after { content: none !important; }
html body #hud section#ranking-window.nv-rank .rk-hero .rk-sub {
  font-size: calc(var(--u) * 22) !important; font-weight: 600; color: #dbe9ff !important; letter-spacing: 0; text-shadow: 0 calc(var(--u) * 1.5) 0 #0b2050 !important;
}
html body #hud section#ranking-window.nv-rank .rk-panel { overflow: hidden; }
html body #hud section#ranking-window.nv-rank .rk-cols {
  position: static !important; inset: auto !important; height: auto !important;
  display: grid !important; grid-template-columns: 17% minmax(0, 1fr) 30% 16%; align-items: center; text-align: center;
  padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 4); color: #3a5680 !important; text-shadow: none !important;
  font-size: calc(var(--u) * 20) !important; font-weight: 700;
}
html body #hud section#ranking-window.nv-rank .rk-cols span + span::before { content: none !important; }
html body #hud section#ranking-window.nv-rank #ranking-list {
  position: static !important; inset: auto !important;
  display: flex !important; flex-direction: column; gap: calc(var(--u) * 6);
  padding: calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * 10);
  max-height: calc((100dvh - 16px) / var(--ui-zoom, 1) - var(--u) * 640); min-height: calc(var(--u) * 160); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #7fa9d6 transparent;
}
html body #hud section#ranking-window.nv-rank .rank-row {
  flex: none; display: grid; grid-template-columns: 17% minmax(0, 1fr) 30% 16%; align-items: center;
  min-height: calc(var(--u) * 64); padding: 0 !important; line-height: 1.2;
  border: calc(var(--u) * 2) solid #b9d3ec !important; border-radius: calc(var(--u) * 12) !important;
  background: linear-gradient(180deg, #ffffff, #eaf3fc) !important;
  box-shadow: inset 0 0 0 calc(var(--u) * 2) #ffffff, 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(20, 60, 120, 0.12) !important;
}
html body #hud section#ranking-window.nv-rank .rank-row:nth-child(1) { border-color: #dfb758 !important; background: linear-gradient(180deg, #fff8dc, #ffe7a3) !important; }
html body #hud section#ranking-window.nv-rank .rank-row:nth-child(2) { border-color: #b8c4d6 !important; background: linear-gradient(180deg, #ffffff, #e3e9f2) !important; }
html body #hud section#ranking-window.nv-rank .rank-row:nth-child(3) { border-color: #d9a57a !important; background: linear-gradient(180deg, #fff6ee, #f6dcc4) !important; }
html body #hud section#ranking-window.nv-rank .rank-row.me {
  border-color: #1d58b0 !important; background: linear-gradient(180deg, #4f93f2, #1f5fd0) !important;
  box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, 0.4), 0 0 0 calc(var(--u) * 2) #ffe39a !important;
}
html body #hud section#ranking-window.nv-rank .rank-place {
  width: calc(var(--u) * 46) !important; height: calc(var(--u) * 46) !important; padding: 0 !important;
  font-size: calc(var(--u) * 22) !important; color: #ffffff !important;
}
html body #hud section#ranking-window.nv-rank .rank-place.place-1 { width: calc(var(--u) * 54) !important; height: calc(var(--u) * 54) !important; }
html body #hud section#ranking-window.nv-rank .rank-name { translate: none !important; padding-left: calc(var(--u) * 10) !important; font-size: calc(var(--u) * 24) !important; color: #10294f !important; }
html body #hud section#ranking-window.nv-rank .rank-job { translate: none !important; gap: calc(var(--u) * 8) !important; font-size: calc(var(--u) * 20) !important; color: #3a5680 !important; }
html body #hud section#ranking-window.nv-rank .rank-job img { width: calc(var(--u) * 30) !important; height: calc(var(--u) * 30) !important; filter: none !important; }
html body #hud section#ranking-window.nv-rank .rank-level { translate: none !important; padding-right: calc(var(--u) * 12) !important; font-size: calc(var(--u) * 24) !important; color: #1f5fd0 !important; }
html body #hud section#ranking-window.nv-rank .rank-row.me :is(.rank-name, .rank-job, .rank-level) { color: #ffffff !important; text-shadow: 0 calc(var(--u) * 1.5) #0b2050 !important; }
html body #hud section#ranking-window.nv-rank .rank-row.me .rank-level { color: #ffe39a !important; }
html body #hud section#ranking-window.nv-rank .rank-row.guest .rank-name { color: #8b97aa !important; }
html body #hud section#ranking-window.nv-rank .ranking-note { padding: calc(var(--u) * 30) 0; font-size: calc(var(--u) * 22) !important; color: #5b7396 !important; }
html body #hud section#ranking-window.nv-rank #ranking-self {
  position: static !important; inset: auto !important; height: auto !important;
  display: flex !important; flex-direction: column; align-items: center; gap: calc(var(--u) * 6);
  margin: calc(var(--u) * 14) 0 0 !important; padding: calc(var(--u) * 12) calc(var(--u) * 16) !important;
  border: calc(var(--u) * 2) solid #dfb758 !important; border-radius: calc(var(--u) * 14) !important;
  background: linear-gradient(180deg, #fff8dc, #ffeebd) !important; box-shadow: inset 0 0 0 calc(var(--u) * 3) #ffffff !important;
}
html body #hud section#ranking-window.nv-rank #ranking-self:empty { display: none !important; }
html body #hud section#ranking-window.nv-rank #ranking-self .rk-own { font-size: calc(var(--u) * 26) !important; color: #3d2806; border-bottom-color: #e2c27a !important; }
html body #hud section#ranking-window.nv-rank #ranking-self .rk-own b { font-size: calc(var(--u) * 34) !important; color: #1f5fd0 !important; }
html body #hud section#ranking-window.nv-rank #ranking-self .rk-info { font-size: calc(var(--u) * 20) !important; color: #3a5680 !important; gap: calc(var(--u) * 8) !important; }
html body #hud section#ranking-window.nv-rank #ranking-self .rk-info::before { width: calc(var(--u) * 26) !important; height: calc(var(--u) * 26) !important; }

/* ---------------------------------------------------------------- FRIENDS */
html body #hud section#friends-window #friends-add-form input { border-color: #9ec2e6 !important; border-radius: calc(var(--u) * 10) !important; color: #10294f !important; }
html body #hud section#friends-window #friends-add-form input:focus { border-color: #1f5fd0 !important; box-shadow: 0 0 0 calc(var(--u) * 3) rgba(79, 147, 242, 0.25); }
html body #hud section#friends-window #friends-list { scrollbar-color: #7fa9d6 transparent !important; }
html body #hud section#friends-window .fr-head {
  background: linear-gradient(180deg, #3f86e0, #1d58b0) !important; color: #ffffff !important;
  border-bottom: calc(var(--u) * 2) solid #dfb758; text-shadow: 0 calc(var(--u) * 2) 0 #0b2a66 !important;
}
html body #hud section#friends-window .fr-empty { color: #5b7396 !important; }
html body #hud section#friends-window .fr-row {
  background: linear-gradient(180deg, #ffffff, #eaf3fc) !important;
  border: calc(var(--u) * 2) solid #b9d3ec; border-radius: calc(var(--u) * 12);
  box-shadow: inset 0 0 0 calc(var(--u) * 2) #ffffff, 0 calc(var(--u) * 1.5) calc(var(--u) * 3) rgba(20, 60, 120, 0.12);
}
html body #hud section#friends-window .fr-row.request { border-color: #dfb758; background: linear-gradient(180deg, #fff8dc, #ffeebd) !important; filter: none !important; }
html body #hud section#friends-window .fr-face { border-color: #1d58b0 !important; box-shadow: 0 0 0 calc(var(--u) * 2) #9ec2e6 !important; background-color: #d6e9f9 !important; }
html body #hud section#friends-window .fr-who b { color: #10294f !important; }
html body #hud section#friends-window .fr-who small { color: #5b7396 !important; }
html body #hud section#friends-window .fr-row.off .fr-who b { color: #8b97aa !important; }
html body #hud section#friends-window .fr-foot { color: #3a5680 !important; }
html body #hud section#friends-window .fr-foot #friends-count { color: #1f5fd0 !important; }
html body #hud section#friends-window #friends-note { color: #3a5680 !important; }