/* เจลลี่ผู้ช่วย (#jelly-window, js/jelly.js) - JELLY-V1 2026-09-29. Frame / wallet / tabs / panels from css/adventurer.css. */
html body #hud section.window.painted-window.nv-guild.adv-window.jelly-window { --pw-width: 580px !important; }
html body #hud nav.toolbar.toolbar > button[data-toggle=jelly-window]::after { content: "เจลลี่" !important; }
/* same box as the other toolbar icons (index.html .generated-menu-icon: 32 x --u) */
#hud .toolbar [data-toggle=jelly-window] .jl-menu-art { background-image: url(/pets/jelly/portrait.png) !important; background-size: 118% 118% !important; image-rendering: pixelated; }

#hud #jelly-window .adv-pill.jl-state.on { border-color: #9fd5ad; background: linear-gradient(180deg, #d9ffe3, #7fd99a); color: #0f4d27; }
#hud #jelly-window .adv-pill.jl-state.warn { border-color: #f0c14b; background: linear-gradient(180deg, #fff3c4, #ffd166); color: #5a3d00; }

#hud #jelly-window .jl-hero { display: grid; grid-template-columns: calc(var(--u) * 110) minmax(0, 1fr) auto; gap: calc(var(--u) * 14); align-items: center;
  padding: calc(var(--u) * 12) calc(var(--u) * 16); border: calc(var(--u) * 2.5) solid #f3a6cc; border-radius: calc(var(--u) * 18);
  background: linear-gradient(120deg, #ffffff 0%, #ffeef7 55%, #ffd6ea 100%); box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) rgba(160, 40, 110, .18); }
#hud #jelly-window .jl-pic { display: grid; place-items: center; width: calc(var(--u) * 110); height: calc(var(--u) * 110); border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fff, #ffe0f0 60%, #ffc2df); box-shadow: 0 0 0 calc(var(--u) * 4) #fff, 0 0 0 calc(var(--u) * 7) #f3a6cc; }
#hud #jelly-window .jl-pic img { width: 92%; height: 92%; object-fit: contain; image-rendering: pixelated; }
#hud #jelly-window .jl-hero.on .jl-pic img { animation: jl-bob 1.6s ease-in-out infinite; }
@keyframes jl-bob { 50% { transform: translateY(calc(var(--u) * -5)) scale(1.04, .96); } }
#hud #jelly-window .jl-hero-info { display: flex; flex-direction: column; gap: calc(var(--u) * 4); min-width: 0; }
#hud #jelly-window .jl-hero-info > b { font-size: calc(var(--u) * 28) !important; color: #8a1f5a; }
#hud #jelly-window .jl-hero-info > small { font-size: calc(var(--u) * 15) !important; color: #6d5a66; }
#hud #jelly-window .jl-bar { background: #fbd9ea !important; }
#hud #jelly-window .jl-bar i { background: linear-gradient(90deg, #ff8cc6, #e0428f) !important; }
#hud #jelly-window .jl-hero-act { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
#hud #jelly-window .jl-hero-act .pw-btn { min-height: calc(var(--u) * 50) !important; font-size: calc(var(--u) * 19) !important; white-space: nowrap; }
#hud #jelly-window .jl-hero-act small { font-size: .8em !important; opacity: .8; }

#hud #jelly-window .jl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 92), 1fr)); gap: calc(var(--u) * 8); padding: 2px; }
#hud #jelly-window .jl-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 8) calc(var(--u) * 4) calc(var(--u) * 6);
  border: calc(var(--u) * 2) solid #cfe2f5; border-radius: calc(var(--u) * 12); background: #fff; font: inherit; cursor: pointer; transition: transform .12s, border-color .12s; }
#hud #jelly-window .jl-item:hover { transform: translateY(-2px); border-color: #f3a6cc; }
#hud #jelly-window .jl-item.gear { border-color: #e7c877; background: #fffdf5; }
#hud #jelly-window .jl-item img { width: calc(var(--u) * 48); height: calc(var(--u) * 48); object-fit: contain; image-rendering: pixelated; }
#hud #jelly-window .jl-item b { position: absolute; top: calc(var(--u) * 4); right: calc(var(--u) * 6); font-size: calc(var(--u) * 16) !important; color: #8a1f5a; }
#hud #jelly-window .jl-item small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--u) * 13) !important; color: #3a5680; }
#hud #jelly-window .jl-actions { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 10); }
#hud #jelly-window .jl-actions .pw-btn { flex: 1; min-height: calc(var(--u) * 52) !important; font-size: calc(var(--u) * 18) !important; }

#hud #jelly-window .jl-row { display: flex; gap: calc(var(--u) * 10); }
#hud #jelly-window .jl-row input { flex: 1; height: calc(var(--u) * 50); text-align: left; padding: 0 calc(var(--u) * 12); }
#hud #jelly-window .jl-modes { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10); }
#hud #jelly-window .jl-mode { display: flex; flex-direction: column; gap: calc(var(--u) * 4); padding: calc(var(--u) * 10) calc(var(--u) * 12); text-align: left;
  border: calc(var(--u) * 2.5) solid #cfe2f5; border-radius: calc(var(--u) * 14); background: #fff; font: inherit; color: #10294f; cursor: pointer; }
#hud #jelly-window .jl-mode b { font-size: calc(var(--u) * 20) !important; }
#hud #jelly-window .jl-mode small { font-size: calc(var(--u) * 14) !important; color: #5b7396; }
#hud #jelly-window .jl-mode[aria-pressed="true"] { border-color: #e0428f; background: linear-gradient(180deg, #fff, #ffeef7); box-shadow: 0 0 0 calc(var(--u) * 2) #ffd6ea; }
#hud #jelly-window .jl-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 160), 1fr)); gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 10); }
#hud #jelly-window .jl-cat { display: flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 10);
  background: #f3f8fd; font-size: calc(var(--u) * 17) !important; color: #10294f; cursor: pointer; }
#hud #jelly-window .jl-cat input { width: calc(var(--u) * 22); height: calc(var(--u) * 22); accent-color: #e0428f; }
#hud #jelly-window .jl-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
#hud #jelly-window .jl-chips .pw-chip { height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 18) !important; }
#hud #jelly-window .jl-guide { margin: 0; padding-left: 0; list-style: none; display: grid; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 17) !important; line-height: 1.5; color: #10294f; }
#hud #jelly-window .jl-guide li { padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 10); background: #fff; border: 1px solid #e3effb; }
#hud #jelly-window .pw-note.bad { color: #b3372b !important; }
@media (max-width: 700px) {
  html body #hud section.window.painted-window.nv-guild.adv-window.jelly-window { --pw-width: 380px !important; }
  #hud #jelly-window .jl-hero { grid-template-columns: calc(var(--u) * 90) minmax(0, 1fr); }
  #hud #jelly-window .jl-hero-act { grid-column: 1 / -1; flex-direction: row; }
  #hud #jelly-window .jl-hero-act .pw-btn { flex: 1; }
  #hud #jelly-window .jl-modes { grid-template-columns: 1fr; }
}
/* shared bits the guild window gets from npc-ui-v3.css (#guild-window only) */
#hud #jelly-window .nvg-bar { display: block; height: calc(var(--u) * 12); border-radius: 999px; background: #f3e3b5; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
#hud #jelly-window .nvg-bar i { display: block; height: 100%; border-radius: 999px; }
#hud #jelly-window .nvg-zen { display: inline-block; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #f4c542 45%, #b98311); box-shadow: 0 0 0 1px #8a5d0b; vertical-align: middle; }
#hud #jelly-window .nvg-tip { margin: calc(var(--u) * 8) 0 calc(var(--u) * 4); padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 12); background: #eaf4fd; color: #2d4c7a; font-size: calc(var(--u) * 16) !important; line-height: 1.5; }
/* landscape phones (height <= 500): narrower window, compact hero so the pouch is visible without scrolling far */
@media (max-height: 500px) {
  html body #hud section.window.painted-window.nv-guild.adv-window.jelly-window { --pw-width: 480px !important; }
  #hud #jelly-window .jl-hero { grid-template-columns: calc(var(--u) * 80) minmax(0, 1fr) auto; padding: calc(var(--u) * 8) calc(var(--u) * 12); }
  #hud #jelly-window .jl-pic { width: calc(var(--u) * 80); height: calc(var(--u) * 80); }
  #hud #jelly-window .jl-hero-info > small:last-child { display: none; }
}