/* =====================================================================
   เจ้าหน้าที่นักผจญภัย (#guild-window.adv-window, js/nv-guild.js) - ADV-GUILD-V1 2026-09-29
   Same look as the Supreme shop (css/supreme.css): blue wallet strip, underline tabs, sky panels with a blue ribbon.
   The sky frame / titlebar / .nvg-* rows come from css/npc-ui-v3.css (.nv-guild). --u = window width / 821.
   ===================================================================== */
html body #hud section.window.painted-window.nv-guild.adv-window { --pw-width: 640px !important; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-body { display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window :is(b, small, em) { font-size: inherit; }

/* ---- wallet strip */
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-wallet { display: flex; align-items: center; gap: calc(var(--u) * 10); flex-wrap: wrap;
  padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 40);
  background: linear-gradient(90deg, #1d58b0, #3f86e0 60%, #6fb0f5); box-shadow: inset 0 0 0 calc(var(--u) * 2.5) #dfb758, 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(20, 60, 120, .25); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-pill { padding: calc(var(--u) * 5) calc(var(--u) * 16); border-radius: calc(var(--u) * 30); border: calc(var(--u) * 2) solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.18); color: #fff; font-weight: 800; font-size: calc(var(--u) * 21) !important; white-space: nowrap; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-pill.guild.on { border-color: #9c7a36; background: linear-gradient(180deg, #ffe39a, #e2ab33); color: #3d2806; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-purse { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 5) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 30); background: #fff; color: #10294f; font-weight: 800; font-size: calc(var(--u) * 22) !important; font-variant-numeric: tabular-nums; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-purse small { font-size: calc(var(--u) * 16) !important; color: #5b7396; font-weight: 600; }

/* ---- mode switch: 🧭 นักผจญภัย | 🛡 กิลด์นักผจญภัย */
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes button { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 10) calc(var(--u) * 8);
  border: calc(var(--u) * 2.5) solid #b9d3ec; border-radius: calc(var(--u) * 16); background: linear-gradient(180deg, #ffffff, #eaf3fc); color: #3a5680; font: inherit; cursor: pointer;
  box-shadow: 0 calc(var(--u) * 3) 0 #cfe2f5; transition: transform .12s; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes button b { font-size: calc(var(--u) * 26) !important; font-weight: 800; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes button small { font-size: calc(var(--u) * 15) !important; color: #6d7a8c; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes button:hover { transform: translateY(-1px); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes button[aria-pressed="true"] { border-color: #9c7a36; background: linear-gradient(180deg, #fff6d2, #ffe39a); color: #3d2806; box-shadow: 0 calc(var(--u) * 3) 0 #e2ab33; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes button[data-adv-mode="guild"][aria-pressed="true"] { border-color: #10407f; background: linear-gradient(180deg, #4f93f2, #1f5fd0); color: #fff; box-shadow: 0 calc(var(--u) * 3) 0 #0e2a66; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes button[data-adv-mode="guild"][aria-pressed="true"] small { color: #dbe9ff; }

/* ---- underline tabs (same as the Supreme shop) */
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tabs { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 0; border-bottom: calc(var(--u) * 3) solid #cfe2f5; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tabs .pw-chip { height: calc(var(--u) * 50); border: 0 !important; border-bottom: calc(var(--u) * 5) solid transparent !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; color: #5b7396 !important; font-size: calc(var(--u) * 20) !important; font-weight: 700; text-shadow: none !important; white-space: nowrap; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tabs .pw-chip[aria-pressed="true"] { color: #1d4f9a !important; border-bottom-color: #e2ab33 !important; background: linear-gradient(180deg, transparent, #eaf3fc) !important; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-dot { display: inline-grid; place-items: center; min-width: 1.3em; height: 1.3em; padding: 0 .25em; border-radius: 1em; background: #e53935; color: #fff;
  font-style: normal; font-size: .75em !important; vertical-align: .15em; animation: adv-pulse 1.2s ease-in-out infinite; }
@keyframes adv-pulse { 50% { transform: scale(1.18); } }

/* ---- content + panels */
/* one scroll container per window: .pw-body (touch pan-y). The content must not shrink inside the flex column. */
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-content { display: flex; flex-direction: column; gap: calc(var(--u) * 12); flex: none; max-height: none; overflow: visible; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-body > * { flex-shrink: 0; }
html body #hud section:is(#guild-window, #jelly-window, #player-guild-window).adv-window .pw-body { overflow-y: auto !important; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-panel { border-color: #9ec2e6 !important; background: linear-gradient(180deg, #ffffff, #eef6fe) !important;
  box-shadow: inset 0 0 0 calc(var(--u) * 3) #fff, inset 0 0 0 calc(var(--u) * 4.5) #cfe2f5, 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(20, 60, 120, .15) !important; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-panel > .pw-ribbon { background: linear-gradient(180deg, #3f86e0, #1d58b0) !important; color: #fff !important; font-size: calc(var(--u) * 24) !important; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-panel > .pw-ribbon small { margin-left: auto; font-size: calc(var(--u) * 16) !important; color: #dbe9ff; font-family: 'Noto Sans Thai', sans-serif; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-panel-body { padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 4); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window #nvg-content { max-height: none; overflow: visible; }

/* rank card (personal) */
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-rank { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 14); align-items: center; padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border: calc(var(--u) * 2) solid #dfb758; border-radius: calc(var(--u) * 16); background: linear-gradient(120deg, #ffffff 0%, #fff6d6 55%, #ffe9a8 100%); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-rank-info { display: flex; flex-direction: column; gap: calc(var(--u) * 4); min-width: 0; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-rank-info > b { font-size: calc(var(--u) * 24) !important; color: #10294f; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-rank-info > small { font-size: calc(var(--u) * 16) !important; color: #6b4a0e; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .nvg-mats { margin: 0; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .nvg-req small em { font-style: normal; color: #17894a; font-weight: 800; }

/* reward chips */
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 4); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 2) calc(var(--u) * 10) calc(var(--u) * 2) calc(var(--u) * 4);
  border-radius: 999px; background: #fff8dd; border: 1px solid #f0d58c; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-chip img { width: calc(var(--u) * 26); height: calc(var(--u) * 26); image-rendering: pixelated; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-chip b { font-size: calc(var(--u) * 16) !important; color: #6b4a0e; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-chip small { font-size: calc(var(--u) * 14) !important; color: #6d7a8c; }

/* guild goals */
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-goalbar { position: relative; height: calc(var(--u) * 16); margin: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 26); border-radius: 999px; background: #dfeaf6;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.15); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-goalbar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffd24a, #e2ab33); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-goalbar .mark { position: absolute; top: 50%; width: calc(var(--u) * 30); height: calc(var(--u) * 30); transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; background: #fff; border: calc(var(--u) * 3) solid #b9d3ec; color: #5b7396; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-goalbar .mark b { font-size: calc(var(--u) * 14) !important; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-goalbar .mark.on { background: linear-gradient(180deg, #ffe39a, #e2ab33); border-color: #9c7a36; color: #3d2806; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tiers { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tier { display: grid; grid-template-columns: calc(var(--u) * 72) minmax(0, 1fr) auto; gap: calc(var(--u) * 12); align-items: center;
  padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 14); background: #fff; border: calc(var(--u) * 1.5) solid #cfe2f5; box-shadow: 0 calc(var(--u) * 2) 0 #e3effb; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tier.reached { border-color: #dfb758; background: linear-gradient(120deg, #fffdf5, #fff1c7); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tier.done { border-color: #9fd5ad; background: linear-gradient(180deg, #f2fbf4, #e3f5e8); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tier-need { display: grid; place-items: center; width: calc(var(--u) * 68); height: calc(var(--u) * 68); border-radius: 50%; line-height: 1;
  background: radial-gradient(circle at 40% 35%, #4f93f2, #1d58b0); box-shadow: 0 0 0 calc(var(--u) * 3) #fff, 0 0 0 calc(var(--u) * 5) #dfb758; color: #fff; font-weight: 900; font-size: calc(var(--u) * 26) !important; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tier-need small { font-size: calc(var(--u) * 11) !important; color: #ffe39a; font-weight: 700; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tier-info { display: flex; flex-direction: column; gap: calc(var(--u) * 2); min-width: 0; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tier-info b { font-size: calc(var(--u) * 20) !important; color: #10294f; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tier-info small { font-size: calc(var(--u) * 15) !important; color: #5b7396; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tier .pw-btn { min-height: calc(var(--u) * 48) !important; font-size: calc(var(--u) * 19) !important; white-space: nowrap; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-top { margin: 0; padding: 0 0 0 1.4em; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4) calc(var(--u) * 16); font-size: calc(var(--u) * 18) !important; color: #10294f; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-top li { padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: calc(var(--u) * 8); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-top li span { font-weight: 700; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-top li em { float: right; font-style: normal; color: #1f5fc4; font-weight: 800; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-top li.me { background: #fff3c4; }

/* my guild card */
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-gcard { display: grid; grid-template-columns: calc(var(--u) * 72) minmax(0, 1fr) auto; gap: calc(var(--u) * 14); align-items: center; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-emblem { width: calc(var(--u) * 72); height: calc(var(--u) * 72); border-radius: calc(var(--u) * 12); image-rendering: pixelated; object-fit: cover;
  border: calc(var(--u) * 3) solid #dfb758; background: #eaf3fc; display: grid; place-items: center; font-size: calc(var(--u) * 36) !important; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-gcard-info { display: flex; flex-direction: column; gap: calc(var(--u) * 4); min-width: 0; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-gcard-info > b { font-size: calc(var(--u) * 26) !important; color: #10294f; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-gcard-info > b em { font-style: normal; color: #c07a0e; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-gcard-info > small { font-size: calc(var(--u) * 16) !important; color: #5b7396; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-bonus { margin: calc(var(--u) * 12) 0 calc(var(--u) * 6); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 8); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-bonus li { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 10) calc(var(--u) * 6); border-radius: calc(var(--u) * 12);
  background: #fff; border: calc(var(--u) * 1.5) solid #cfe2f5; text-align: center; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-bonus li i { font-style: normal; font-size: calc(var(--u) * 26) !important; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-bonus li span { font-size: calc(var(--u) * 15) !important; color: #5b7396; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-bonus li b { font-size: calc(var(--u) * 24) !important; color: #1f5fc4; }

/* how it works + no guild */
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-how { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-how-col { padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 12); background: #fff; border: calc(var(--u) * 1.5) solid #cfe2f5; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-how-col:first-child { background: linear-gradient(180deg, #fffdf5, #fff3d1); border-color: #e7c877; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-how-col h4 { margin: 0 0 calc(var(--u) * 6); font-size: calc(var(--u) * 21) !important; color: #1d3a78; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-how-col ul { margin: 0; padding-left: 1.1em; font-size: calc(var(--u) * 16) !important; line-height: 1.5; color: #10294f; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-empty { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 10); text-align: center; padding: calc(var(--u) * 6) calc(var(--u) * 10); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-empty img { width: calc(var(--u) * 84); height: calc(var(--u) * 84); }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-empty p { margin: 0; font-size: calc(var(--u) * 18) !important; line-height: 1.5; color: #2d4c7a; }
#hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .nvg-tip { margin: calc(var(--u) * 8) 0 calc(var(--u) * 4); }

@media (max-width: 700px) {
  html body #hud section.window.painted-window.nv-guild.adv-window { --pw-width: 380px !important; }
  #hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-tabs .pw-chip { font-size: calc(var(--u) * 24) !important; height: calc(var(--u) * 60); }
  #hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-how, #hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-top { grid-template-columns: 1fr; }
  #hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-bonus { grid-template-columns: 1fr 1fr 1fr; }
  #hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes button small { display: none; }
}
@media (max-height: 500px) {
  html body #hud section.window.painted-window.nv-guild.adv-window:not(.jelly-window) { --pw-width: 500px !important; }
  #hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes button small { display: none; }
  #hud :is(#guild-window, #jelly-window, #player-guild-window).adv-window .adv-modes button { padding: calc(var(--u) * 6) calc(var(--u) * 8); }
}