/* =====================================================================
   Sky-theme batch 2 (2026-09-26): Quest, Party, Settings, Premium
   (painted frames from the user) + Inventory and Bot (CSS sky theme
   like the character-select screen).
   Frames: /ui/quest/frame-sky.webp (1271x1237)
           /ui/party/frame-sky.webp (1393x1129)
           /ui/settings/frame-sky.webp (2112x745, 9-slice: 492 top / 145 bottom,
             the middle band stretches vertically) - used by Settings + Premium
   Remove the <link> to css/ui-sky-2.css to revert.
   ===================================================================== */

/* ---------------------------------------------------------------------
   QUEST
   --------------------------------------------------------------------- */
html body #hud section#quest-window.window {
  width: min(660px, calc((100vw - 12px) / var(--ui-zoom, 1)), calc((100dvh - 24px) / var(--ui-zoom, 1) * 1.027)) !important;
  aspect-ratio: 1271 / 1237 !important;
  background: url('/ui/quest/frame-sky.webp?v=1') center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 12px 22px rgba(10, 30, 60, 0.4)) !important;
  color: #10294f !important;
}
html body #hud section#quest-window.window .titlebar {
  left: 19.7% !important; right: 11.1% !important; top: 7.9% !important; height: 5.2% !important;
  justify-content: center !important; z-index: 3 !important;
}
html body #hud section#quest-window.window .qj-title {
  color: #ffffff !important; font-size: 4.6cqw !important;
  text-shadow: 0 0.3cqw 0 #0b2a66, 0 0 1cqw rgba(10, 40, 100, 0.7) !important;
}
html body #hud section#quest-window.window .qj-title i { color: #ffd98a !important; }
html body #hud section#quest-window.window .qj-title b { color: #ffe39a !important; font-size: 3.6cqw !important; }
html body #hud section#quest-window.window .qj-tag { display: none !important; }
html body #hud section#quest-window.window .titlebar button {
  left: 99.1% !important; right: auto !important; top: -8% !important; width: 9.4% !important; border-radius: 50% !important;
}
html body #hud section#quest-window.window .qj-motto { display: none !important; }
/* tabs sit on the ornament line under the title */
html body #hud section#quest-window.window .qj-tabs {
  left: 18.5% !important; top: 13.6% !important; width: 50% !important; height: 4% !important; gap: 1% !important; z-index: 4 !important;
}
html body #hud section#quest-window.window .qj-tabs button {
  padding: 0 !important; gap: 1cqw !important; border-radius: 99px !important;
  background: rgba(255, 255, 255, 0.16) !important; box-shadow: inset 0 0 0 0.18cqw rgba(255, 255, 255, 0.45) !important;
  color: #dbe9ff !important; text-shadow: 0 0.2cqw 0 #0b2a66 !important; font-size: 2.1cqw !important; white-space: nowrap !important; overflow: hidden !important;
}
html body #hud section#quest-window.window .qj-tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; box-shadow: inset 0 0 0 0.2cqw #9c7a36, 0 0 0.8cqw rgba(255, 214, 120, 0.7) !important;
  color: #3d2806 !important; text-shadow: none !important;
}
html body #hud section#quest-window.window .qj-tab-icon { width: 3.2cqw !important; height: 3.2cqw !important; }
/* quest card: title / sub next to the scroll icon, description between the two lines */
html body #hud section#quest-window.window #quest-card { left: 46.4% !important; right: 8.7% !important; top: 23% !important; height: 18.6% !important; }
html body #hud section#quest-window.window .quest-title { color: #10294f !important; font-size: 3.3cqw !important; }
html body #hud section#quest-window.window #qj-sub { color: #3a5680 !important; font-size: 2.4cqw !important; }
html body #hud section#quest-window.window #qj-desc {
  left: -19.3% !important; right: 0 !important; top: 54% !important; height: 45% !important;
  color: #1d3560 !important; font-size: 2.6cqw !important; line-height: 1.4 !important;
}
html body #hud section#quest-window.window #qj-page { background: #1d4f9a !important; }
html body #hud section#quest-window.window #qj-note {
  left: 9.4% !important; width: 61.4% !important; top: 46.1% !important; height: 8.9% !important;
  color: #2d4c7a !important; font-size: 2.5cqw !important;
}
/* objective bar + box; the count sits in the painted blue plate */
html body #hud section#quest-window.window .qj-goal-head { left: 15.7% !important; right: 9.5% !important; top: 57.6% !important; height: 4.5% !important; }
html body #hud section#quest-window.window .qj-goal-head span { background: none !important; color: #ffe39a !important; font-size: 2.7cqw !important; text-shadow: 0 0.2cqw 0 #0b2a66 !important; }
html body #hud section#quest-window.window .qj-goal-head em { background: none !important; color: #cfe0ff !important; font-size: 2.3cqw !important; }
html body #hud section#quest-window.window .quest-journal { left: 9.8% !important; right: 9.4% !important; top: 63.7% !important; height: 7.3% !important; }
html body #hud section#quest-window.window #qj-goal { right: 32% !important; color: #10294f !important; font-size: 3.2cqw !important; }
html body #hud section#quest-window.window .qj-count { right: 0 !important; width: 29.6% !important; color: #ffe39a !important; text-shadow: 0 0.3cqw 0 #0b2050 !important; }
html body #hud section#quest-window.window .quest-progress { right: 32% !important; border-color: #7fa9d6 !important; background: #dcebfa !important; }
/* reward */
html body #hud section#quest-window.window .qj-reward-head { left: 15.7% !important; width: 19.3% !important; top: 74.8% !important; height: 4.4% !important; color: #ffffff !important; font-size: 2.5cqw !important; }
html body #hud section#quest-window.window .qj-reward-head b { color: #ffe39a !important; }
html body #hud section#quest-window.window .qj-reward { left: 26% !important; right: 37.1% !important; top: 80.8% !important; height: 8.1% !important; }
html body #hud section#quest-window.window #qj-reward { color: #10294f !important; font-weight: 600 !important; font-size: 2.3cqw !important; }
html body #hud section#quest-window.window #quest-claim {
  left: 115% !important; width: 55% !important; padding: 1.4cqw 0.5cqw !important; font-size: 2.1cqw !important;
  border-color: #dfb758 !important; background: linear-gradient(180deg, #4f93f2, #1f5fd0 55%, #174cb0) !important;
}
html body #hud section#quest-window.window .qj-every { left: 68.4% !important; right: 11% !important; top: 83% !important; color: #2d4c7a !important; text-shadow: 0 0 0.6cqw #ffffff, 0 0 0.6cqw #ffffff !important; }
html body #hud section#quest-window.window .qj-foot { left: 35.4% !important; right: 35.5% !important; top: 91.4% !important; height: 4% !important; color: #dbe9ff !important; }

/* ---------------------------------------------------------------------
   PARTY
   --------------------------------------------------------------------- */
html body #hud section#party-window.window {
  width: min(700px, calc((100vw - 12px) / var(--ui-zoom, 1)), calc((100dvh - 24px) / var(--ui-zoom, 1) * 1.234)) !important;
  aspect-ratio: 1393 / 1129 !important;
  background: url('/ui/party/frame-sky.webp?v=1') center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 12px 22px rgba(10, 30, 60, 0.4)) !important;
  color: #10294f !important;
}
html body #hud section#party-window.window .titlebar {
  left: 18% !important; right: 11.7% !important; top: 8.9% !important; height: 10.2% !important; padding: 0 !important;
  column-gap: 2cqw !important;
}
html body #hud section#party-window.window .pw-title { color: #ffffff !important; font-size: 4.2cqw !important; text-shadow: 0 0.3cqw 0 #0b2a66 !important; }
html body #hud section#party-window.window .pw-sub { color: #cfe0ff !important; }
html body #hud section#party-window.window .pw-tag { color: #eaf3ff !important; text-shadow: 0 0.2cqw 0 #0b2a66 !important; max-width: 42cqw !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #hud section#party-window.window .titlebar button {
  position: absolute !important; left: 101% !important; right: auto !important; top: -20% !important;
  width: 9.2% !important; height: auto !important; aspect-ratio: 1 !important; border-radius: 50% !important;
}
html body #hud section#party-window.window #party-invite-form { left: 6.5% !important; right: 6.5% !important; width: auto !important; top: 22.6% !important; height: 10.6% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 0.8cqw !important; }
html body #hud section#party-window.window .pw-panel { left: 6.5% !important; right: 6.5% !important; width: auto !important; top: 34.2% !important; height: 24.6% !important; }
html body #hud section#party-window.window .pw-foot { left: 6.5% !important; right: 6.5% !important; width: auto !important; top: 59.6% !important; height: 4.4% !important; }
html body #hud section#party-window.window .pw-perks { position: static !important; }
html body #hud section#party-window.window .pw-perks > * { position: absolute !important; }
html body #hud section#party-window.window .pw-bubble {
  left: 15% !important; top: 69.2% !important; width: 20.6% !important; height: 4.6% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: #1d3a78 !important; font-weight: 800 !important; font-size: 2cqw !important; text-align: center !important;
}
html body #hud section#party-window.window .pw-bubble::before, html body #hud section#party-window.window .pw-bubble::after { display: none !important; }
html body #hud section#party-window.window .pw-perks h4 { left: 43.5% !important; top: 70.4% !important; width: 50% !important; margin: 0 !important; color: #1d3a78 !important; font-size: 2.3cqw !important; }
html body #hud section#party-window.window .pw-perks ul { left: 43.5% !important; top: 74.6% !important; width: 50% !important; height: 14% !important; margin: 0 !important; color: #10294f !important; font-size: 1.85cqw !important; line-height: 1.45 !important; }

/* ---------------------------------------------------------------------
   SETTINGS + PREMIUM : shared 9-slice sky frame
   (their existing CSS uses --u = window width / 821 and a ::before border-image)
   --------------------------------------------------------------------- */
html body #hud section#settings-window.settings-painted::before,
html body #hud section#premium-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#settings-window.settings-painted > .titlebar,
html body #hud section#premium-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#settings-window.settings-painted > .titlebar > span,
html body #hud section#premium-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 (frame px 1945-2075 x 195-325) */
html body #hud section#settings-window.settings-painted > .titlebar button,
html body #hud section#premium-window.painted-window > .titlebar button {
  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;
}
html body #hud section#settings-window.settings-painted > .body { margin: calc(var(--u) * 196) 0 calc(var(--u) * 50) !important; padding-left: calc(var(--u) * 40) !important; padding-right: calc(var(--u) * 36) !important; }
html body #hud section#premium-window.painted-window .pw-body { margin: calc(var(--u) * 196) 0 calc(var(--u) * 50) !important; padding-left: calc(var(--u) * 40) !important; padding-right: calc(var(--u) * 36) !important; max-height: calc((100dvh - 16px) / var(--ui-zoom, 1) - var(--u) * 250) !important; }
html body #hud section#premium-window.painted-window { --pw-width: 540px !important; }
/* sky panels instead of cream parchment */
html body #hud section#settings-window .settings-section,
html body #hud section#premium-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#settings-window .settings-section > h3,
html body #hud section#premium-window .pw-ribbon {
  background: linear-gradient(180deg, #3f86e0, #1d58b0) !important; color: #ffffff !important;
}
html body #hud section#settings-window .settings-section > h3 .settings-icon { background: linear-gradient(180deg, #ffffff, #ffe39a) !important; }
html body #hud section#settings-window .language-setting:not(.touch-controls-setting) + .touch-controls-setting,
html body #hud section#settings-window :not([data-setting="actions"]) + [data-setting="damage-numbers"] { border-top-color: #b9d3ec !important; }
html body #hud section#settings-window.settings-painted > .body,
html body #hud section#premium-window .pw-body { scrollbar-color: #7fa9d6 transparent !important; }
html body #hud section#premium-window .prem-status { border-color: #a9c6e2 !important; background: #eaf3fc !important; color: #3a5680 !important; }
html body #hud section#premium-window .prem-status.on { border-color: #dfb758 !important; background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important; text-shadow: none !important; box-shadow: none !important; }
html body #hud section#premium-window .pw-chip[aria-pressed="true"] { border-color: #9c7a36 !important; background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, 0.6) !important; color: #3d2806 !important; text-shadow: none !important; }
html body #hud section#premium-window .prem-card.premium { background: radial-gradient(ellipse at 50% 28%, #4f93f2, #1f5fd0 55%, #123a82) !important; border-color: #dfb758 !important; }
html body #hud section#premium-window .prem-card h4 { text-shadow: 0 calc(var(--u) * 2) #0b2050 !important; }
html body #hud section#premium-window .prem-card small { color: #dbe9ff !important; }
html body #hud section#premium-window .prem-card .prem-price { text-shadow: 0 calc(var(--u) * 1.5) #0b2050 !important; }
html body #hud section#premium-window .prem-perks b { color: #1f5fc4 !important; }
html body #hud section#premium-window .prem-hint { color: #3a5680 !important; }

/* ---------------------------------------------------------------------
   INVENTORY (bag) - character-select sky style
   --------------------------------------------------------------------- */
html body #hud section#inventory-window.window {
  --bag-paper: radial-gradient(ellipse at 50% -10%, #ffffff 0%, #f0f7ff 38%, #e1eefb 72%, #cbe3f8 100%);
  --bag-ink: #10294f; --bag-muted: #5b7396; --bag-line: #b9d3ec; --bag-navy: #1d4f9a; --bag-navy-deep: #734f0d; --bag-gold: #dfb758;
  background: radial-gradient(ellipse at 50% -10%, #ffffff 0%, #f0f7ff 38%, #e1eefb 72%, #cbe3f8 100%) !important;
  border: 3px solid #dfb758 !important; border-radius: 16px !important;
  box-shadow: 0 0 0 2px #734f0d, inset 0 0 0 2px #fff4cb, 0 18px 44px rgba(10, 30, 60, 0.45) !important;
  color: #10294f !important; overflow: hidden !important;
}
html body #hud section#inventory-window.window::before, html body #hud section#inventory-window.window::after { display: none !important; }
html body #hud section#inventory-window .bag-head {
  background: linear-gradient(180deg, #ffffff 0%, #eaf4fd 60%, #d6e9f9 100%) !important;
  border-bottom: 2px solid #dfb758 !important; box-shadow: inset 0 -1px 0 #fff4cb !important; color: #10294f !important;
}
html body #hud section#inventory-window .bag-title strong { color: #10294f !important; text-shadow: 0 1px 0 #fff !important; }
html body #hud section#inventory-window .bag-title small { color: #8c6a2a !important; }
html body #hud section#inventory-window .bag-pill { background: #ffffff !important; color: #10294f !important; border: 1.5px solid #b9d3ec !important; box-shadow: inset 0 1px 3px rgba(16, 41, 79, 0.08) !important; }
html body #hud section#inventory-window .bag-pill svg { color: #3a5680 !important; }
html body #hud section#inventory-window .bag-head button { background: radial-gradient(circle at 40% 35%, #ffffff, #d8ebfa) !important; color: #8c6a2a !important; border: 2px solid #c9a24e !important; box-shadow: none !important; }
html body #hud section#inventory-window .bag-head .equipment-open { background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important; border-color: #9c7a36 !important; }
html body #hud section#inventory-window .bag-side { background: linear-gradient(90deg, #e3effb, #eef6fd) !important; border-right: 1.5px solid #b9d3ec !important; }
html body #hud section#inventory-window .bag-side button { color: #10294f !important; border-color: #ffffff transparent #cfe2f5 !important; }
html body #hud section#inventory-window .bag-side button svg { color: #3a6fb8 !important; }
html body #hud section#inventory-window .bag-side button small { color: #5b7396 !important; }
html body #hud section#inventory-window .bag-side button:hover { background: rgba(255, 255, 255, 0.7) !important; }
html body #hud section#inventory-window .bag-side button[aria-pressed="true"] {
  background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #2b1803 !important;
  border-color: #9c7a36 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 4px rgba(156, 122, 54, 0.45) !important;
}
html body #hud section#inventory-window .bag-side button[aria-pressed="true"] svg { color: #6b4a0e !important; }
html body #hud section#inventory-window .bag-side button[aria-pressed="true"] small { color: #5a3d0a !important; }
html body #hud section#inventory-window .bag-tabs button { background: linear-gradient(180deg, #ffffff, #e3effb) !important; border-color: #b9d3ec !important; color: #1d4f9a !important; }
html body #hud section#inventory-window .bag-tabs button[aria-pressed="true"] { background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; border: 2px solid #9c7a36 !important; }
html body #hud section#inventory-window .bag-tabs button[aria-pressed="true"] svg { color: #5a3d0a !important; }
html body #hud section#inventory-window .bag-slot, html body #hud section#inventory-window .bag-empty { background: linear-gradient(180deg, #ffffff, #e9f3fc) !important; border-color: #b9d3ec !important; }
html body #hud section#inventory-window .bag-search label { background: #ffffff !important; color: #10294f !important; border: 1.5px solid #b9d3ec !important; box-shadow: inset 0 1px 3px rgba(16, 41, 79, 0.08) !important; }
html body #hud section#inventory-window .bag-search input { color: #10294f !important; }
html body #hud section#inventory-window .bag-search input::placeholder { color: #7d93b3 !important; }
html body #hud section#inventory-window .bag-search label svg { color: #3a5680 !important; }
html body #hud section#inventory-window .bag-search button { background: linear-gradient(180deg, #ffffff, #d8ebfa) !important; color: #1d4f9a !important; border: 1.5px solid #9ec2e6 !important; box-shadow: none !important; }
html body #hud section#inventory-window .bag-card { background: linear-gradient(180deg, #ffffff, #eef6fe) !important; border-color: #b9d3ec !important; }
html body #hud section#inventory-window .bag-footer { background: linear-gradient(180deg, #eaf4fd, #d6e9f9) !important; border-top: 2px solid #dfb758 !important; color: #10294f !important; }
html body #hud section#inventory-window .bag-view button { background: linear-gradient(180deg, #ffffff, #e3effb) !important; color: #1d4f9a !important; }
html body #hud section#inventory-window .bag-view button[aria-pressed="true"],
html body #hud section#inventory-window #bag-lock[aria-pressed="true"] { background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important; box-shadow: inset 0 0 0 1px #9c7a36 !important; }
html body #hud section#inventory-window #bag-sort { background: linear-gradient(180deg, #4f93f2, #1f5fd0 55%, #174cb0) !important; border-color: #0e2a66 !important; box-shadow: inset 0 1px 0 #9cc6ff !important; }
html body #hud section#inventory-window #bag-lock { background: linear-gradient(180deg, #ffffff, #e3effb) !important; border-color: #b9d3ec !important; }

/* ---------------------------------------------------------------------
   BOT (auto play) - painted sky frame (same 9-slice as Settings / Premium)
   + our own inner style (light section bars with a gold accent)
   --------------------------------------------------------------------- */
html body #hud section#bot-window.window {
  --u: calc(100cqw / 821);
  --bw-paper: #eaf4fd; --bw-paper2: #dcebfa; --bw-ink: #10294f; --bw-muted: #5b7396; --bw-line: #b9d3ec;
  --bw-gold: #dfb758; --bw-gold2: #c9a24e; --bw-gold-light: #ffe39a; --bw-navy: #1d4f9a; --bw-navy2: #3f86e0; --bw-navy-deep: #173e7a; --bw-blue: #1f5fd0;
  container-type: inline-size !important;
  width: min(560px, calc((100vw - 20px) / var(--ui-zoom, 1))) !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important;
  color: #10294f !important;
}
html body #hud section#bot-window.window::before {
  content: "" !important; position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; width: auto !important; height: auto !important;
  transform: none !important; z-index: -1 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  border-style: solid !important; border-width: calc(var(--u) * 191.3) 0 calc(var(--u) * 56.4) !important; border-color: transparent !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; pointer-events: none !important;
}
html body #hud section#bot-window.window::after { display: none !important; }
html body #hud section#bot-window .titlebar {
  position: absolute !important; left: 0 !important; right: 0 !important; top: calc(var(--u) * 78) !important; height: calc(var(--u) * 74) !important;
  padding: 0 calc(var(--u) * 120) !important; display: flex !important; align-items: center !important; justify-content: center !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; z-index: 2 !important;
}
html body #hud section#bot-window .titlebar::before { display: none !important; }
html body #hud section#bot-window .titlebar > span {
  color: #ffffff !important; font: 700 calc(var(--u) * 42) / 1 'Cormorant Garamond', 'Noto Serif Thai', 'Noto Sans Thai', serif !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;
}
html body #hud section#bot-window .titlebar > span::before, html body #hud section#bot-window .titlebar > span::after { display: none !important; }
html body #hud section#bot-window .titlebar button {
  position: absolute !important; left: calc(var(--u) * 754) !important; right: auto !important; top: calc(var(--u) * -3) !important;
  width: calc(var(--u) * 54) !important; height: calc(var(--u) * 54) !important; border-radius: 50% !important;
  background: none !important; border: 0 !important; box-shadow: none !important; color: transparent !important; text-shadow: none !important; font-size: 0 !important;
}
html body #hud section#bot-window .titlebar button:hover { background: rgba(255, 255, 255, 0.25) !important; }
html body #hud section#bot-window .body {
  margin: calc(var(--u) * 196) 0 calc(var(--u) * 50) !important; padding: calc(var(--u) * 4) calc(var(--u) * 36) calc(var(--u) * 16) calc(var(--u) * 40) !important;
  max-height: calc((100dvh - 24px) / var(--ui-zoom, 1) - var(--u) * 250) !important; background: none !important; border-radius: 0 !important;
  scrollbar-color: #7fa9d6 transparent !important;
}
/* hero: status card + start button */
html body #hud section#bot-window .bot-hero {
  border-radius: 16px !important; border: 0 !important;
  background: linear-gradient(120deg, #ffffff 0%, #eaf4fd 55%, #d6e9f9 100%) !important;
  box-shadow: inset 0 0 0 2px #dfb758, inset 0 0 0 4px #ffffff, 0 3px 8px rgba(20, 60, 120, 0.15) !important;
}
html body #hud section#bot-window .bot-avatar { background: radial-gradient(circle, #ffffff 50%, #cfe2f5 70%, transparent 72%) !important; }
html body #hud section#bot-window #bot-status { border-radius: 999px !important; }
html body #hud section#bot-window #bot-run { border-radius: 999px !important; background: linear-gradient(180deg, #4f93f2, #1f5fd0 55%, #174cb0) !important; border: 2px solid #dfb758 !important; box-shadow: 0 3px 0 #0e2a66 !important; }
html body #hud section#bot-window .bot-help, html body #hud section#bot-window .bot-note { color: #2d4c7a !important; }
html body #hud section#bot-window .bot-help::before, html body #hud section#bot-window .bot-note::before { background: #1d4f9a !important; color: #ffffff !important; box-shadow: 0 0 0 2px #cfe2f5 !important; }
html body #hud section#bot-window .bot-note { background: #ffffff !important; border-color: #cfe2f5 !important; border-radius: 12px !important; }
/* section header: light bar with a gold accent instead of the navy ribbon */
html body #hud section#bot-window .bot-ribbon {
  background: linear-gradient(90deg, #eaf4fd, #ffffff) !important; color: #1d3a78 !important; text-shadow: none !important;
  border: 0 !important; border-radius: 12px 12px 0 0 !important;
  box-shadow: inset 6px 0 0 #e2ab33, inset 0 -2px 0 #cfe2f5 !important;
}
html body #hud section#bot-window .bot-section::before { color: #e2ab33 !important; }
html body #hud section#bot-window .bot-card {
  background: #ffffff !important; border-radius: 0 0 12px 12px !important; border-color: #cfe2f5 !important;
  box-shadow: 0 2px 6px rgba(20, 60, 120, 0.1) !important;
}
html body #hud section#bot-window .bot-card::after { opacity: 0.12 !important; }
html body #hud section#bot-window .bot-skill { background: linear-gradient(180deg, #ffffff, #eef6fe) !important; border-color: #cfe2f5 !important; border-radius: 12px !important; box-shadow: none !important; }
html body #hud section#bot-window .bot-priority-option, html body #hud section#bot-window .bot-monster-chip { background: #f4f9ff !important; border-color: #cfe2f5 !important; border-radius: 12px !important; }
html body #hud section#bot-window .bot-priority-option:has(input:checked), html body #hud section#bot-window .bot-monster-chip:has(input:checked) { background: #fff4d6 !important; border-color: #dfb758 !important; }
html body #hud section#bot-window .bot-monster-icon { border-radius: 50% !important; background-color: #eaf4fd !important; box-shadow: inset 0 0 0 1.5px #cfe2f5 !important; }
html body #hud section#bot-window input[type="checkbox"], html body #hud section#bot-window input[type="radio"] { background: linear-gradient(180deg, #ffffff, #e3effb) !important; border-color: #1d4f9a !important; box-shadow: 0 0 0 2px #cfe2f5 !important; }
html body #hud section#bot-window input[type="checkbox"]:checked, html body #hud section#bot-window input[type="radio"]:checked { background: linear-gradient(180deg, #4f93f2, #1f5fd0) !important; }
html body #hud section#bot-window select, html body #hud section#bot-window input[type="number"] { background: #ffffff !important; border-color: #9ec2e6 !important; box-shadow: none !important; border-radius: 8px !important; }
html body #hud section#bot-window .bot-motto { color: #c9a24e !important; }

/* party: polish */
html body #hud section#party-window.window .pw-tag { display: none !important; }
html body #hud section#party-window.window .pw-title { font-size: 3.8cqw !important; }
html body #hud section#party-window.window .party-invite-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 1.5cqw !important; width: 100% !important; }
html body #hud section#party-window.window .pw-search { width: auto !important; min-width: 0 !important; background: #ffffff !important; border: 1.5px solid #9ec2e6 !important; box-shadow: inset 0 1px 3px rgba(16, 41, 79, 0.08) !important; }
html body #hud section#party-window.window .pw-search input { color: #10294f !important; }
html body #hud section#party-window.window #party-invite-form label { color: #1d3a78 !important; }
html body #hud section#party-window.window .pw-panel { background: linear-gradient(180deg, #ffffff, #eef6fe) !important; border: 1.5px solid #9ec2e6 !important; box-shadow: inset 0 0 0 2px #ffffff !important; }
html body #hud section#party-window.window .pw-panel-head { background: linear-gradient(180deg, #4f93f2, #1f5fd0) !important; color: #ffffff !important; }
html body #hud section#party-window.window .pw-panel-head b { color: #ffffff !important; }
html body #hud section#party-window.window .pw-panel-head .pw-hint { color: #dbe9ff !important; }
html body #hud section#party-window.window .pw-empty { color: #3a5680 !important; }
html body #hud section#party-window.window .pw-foot { color: #10294f !important; }
html body #hud section#party-window.window .pw-foot p { color: #2d4c7a !important; }
html body #hud section#party-window.window .pw-perks ul { width: 48% !important; font-size: 1.7cqw !important; }
html body #hud section#party-window.window .pw-perks li { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
html body #hud section#party-window.window .pw-share i { background: #ffffff !important; border-color: #1d4f9a !important; box-shadow: 0 0 0 1.5px #cfe2f5 !important; }
html body #hud section#party-window.window .pw-share input:checked + i { background: linear-gradient(180deg, #4f93f2, #1f5fd0) !important; }

/* settings: a bit wider so the painted banner reads well; --u follows the real width */
html body #hud section#settings-window.settings-painted {
  --u: calc(100cqw / 821) !important;
  width: min(540px, calc((100vw - 12px) / var(--ui-zoom, 1)), calc(((100dvh - 24px) / var(--ui-zoom, 1)) * 1.5)) !important;
}

/* =====================================================================
   BATCH 3 (2026-09-26): own layouts for Premium, Inventory, Settings
   ===================================================================== */

/* ---------------- PREMIUM: wallet strip, underline tabs, perk chips, pack rows ---------------- */
html body #hud section#premium-window .prem-wallet {
  padding: calc(var(--u) * 10) calc(var(--u) * 16) !important; border-radius: calc(var(--u) * 40) !important;
  background: linear-gradient(90deg, #1d58b0, #3f86e0 60%, #6fb0f5) !important;
  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, 0.25) !important;
}
html body #hud section#premium-window .prem-status { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.55) !important; color: #ffffff !important; }
html body #hud section#premium-window .prem-purse { padding: calc(var(--u) * 4) calc(var(--u) * 14) !important; border-radius: calc(var(--u) * 30) !important; background: #ffffff !important; color: #10294f !important; }
html body #hud section#premium-window .prem-tabs { gap: 0 !important; border-bottom: calc(var(--u) * 3) solid #cfe2f5 !important; }
html body #hud section#premium-window .prem-tabs .pw-chip,
html body #hud section#premium-window .prem-tabs .pw-chip[aria-pressed="true"] {
  border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  color: #5b7396 !important; text-shadow: none !important; margin-bottom: calc(var(--u) * -3) !important;
  border-bottom: calc(var(--u) * 5) solid transparent !important; font-weight: 700 !important;
}
html body #hud section#premium-window .prem-tabs .pw-chip[aria-pressed="true"] { color: #1d4f9a !important; border-bottom-color: #e2ab33 !important; }
/* benefits: no ribbon, 2-column chip list */
html body #hud section#premium-window #premium-tab-premium > .pw-panel { flex-direction: row !important; align-items: stretch !important; padding: calc(var(--u) * 10) !important; gap: calc(var(--u) * 12) !important; }
html body #hud section#premium-window #premium-tab-premium > .pw-panel > .pw-ribbon {
  flex: 0 0 calc(var(--u) * 150) !important; height: auto !important; flex-direction: column !important; justify-content: center !important;
  text-align: center !important; white-space: normal !important; border-radius: calc(var(--u) * 12) !important; padding: calc(var(--u) * 10) !important;
  background: radial-gradient(ellipse at 50% 30%, #fff4d6, #ffe39a 60%, #e2ab33) !important; color: #3d2806 !important; text-shadow: none !important;
  line-height: 1.2 !important; font-size: calc(var(--u) * 24) !important;
}
html body #hud section#premium-window #premium-tab-premium > .pw-panel > .pw-ribbon .pw-ico { width: calc(var(--u) * 54) !important; height: calc(var(--u) * 54) !important; filter: none !important; }
html body #hud section#premium-window .prem-perks { flex: 1 1 auto !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: calc(var(--u) * 8) !important; padding: 0 !important; list-style: none !important; }
html body #hud section#premium-window .prem-perks li {
  display: block !important;
  padding: calc(var(--u) * 8) calc(var(--u) * 12) !important; border-radius: calc(var(--u) * 10) !important;
  background: #eef6fe !important; box-shadow: inset 0 0 0 calc(var(--u) * 2) #cfe2f5 !important; line-height: 1.25 !important;
}
html body #hud section#premium-window .prem-perks li::before { content: "✦ "; color: #e2ab33; }
/* packs: one horizontal row per pack */
html body #hud section#premium-window .prem-grid { grid-template-columns: 1fr !important; gap: calc(var(--u) * 8) !important; }
html body #hud section#premium-window .prem-card {
  display: grid !important; grid-template-columns: calc(var(--u) * 84) minmax(0, 1fr) auto calc(var(--u) * 150) calc(var(--u) * 150) !important;
  grid-template-rows: auto auto !important; column-gap: calc(var(--u) * 14) !important; row-gap: 0 !important; align-items: center !important;
  padding: calc(var(--u) * 8) calc(var(--u) * 14) !important; border-radius: calc(var(--u) * 16) !important; text-align: left !important;
}
html body #hud section#premium-window .prem-card.premium { background: linear-gradient(90deg, #ffffff, #e8f2fc) !important; border-color: #9ec2e6 !important; color: #10294f !important; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(20, 60, 120, 0.15) !important; }
html body #hud section#premium-window .prem-card.gold { background: linear-gradient(90deg, #fffdf4, #fff1cc) !important; border-color: #dfb758 !important; color: #3d2806 !important; box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 6) rgba(120, 90, 20, 0.15) !important; }
html body #hud section#premium-window .prem-card .prem-art { grid-row: 1 / 3 !important; grid-column: 1 !important; width: calc(var(--u) * 84) !important; height: calc(var(--u) * 84) !important; border-radius: 50% !important; background: radial-gradient(circle, #fff4d6 40%, #ffe39a 70%, transparent 72%) !important; }
html body #hud section#premium-window .prem-card .prem-art i { --size: calc(var(--u) * 58) !important; }
html body #hud section#premium-window .prem-card h4 { grid-column: 2 !important; grid-row: 1 !important; color: #1d3a78 !important; text-shadow: none !important; font-size: calc(var(--u) * 30) !important; }
html body #hud section#premium-window .prem-card.gold h4 { color: #6b4a0e !important; }
html body #hud section#premium-window .prem-card small { grid-column: 2 !important; grid-row: 2 !important; min-height: 0 !important; color: #5b7396 !important; font-size: calc(var(--u) * 19) !important; }
html body #hud section#premium-window .prem-card small b { color: #c07a0e !important; }
html body #hud section#premium-window .prem-card .prem-price { grid-column: 3 !important; grid-row: 1 / 3 !important; color: #1d4f9a !important; text-shadow: none !important; font-size: calc(var(--u) * 28) !important; }
html body #hud section#premium-window .prem-card.gold .prem-price { color: #8c5a06 !important; }
html body #hud section#premium-window .prem-card .pw-btn { grid-row: 1 / 3 !important; width: 100% !important; }
html body #hud section#premium-window .prem-card .pw-btn.prem-soon { grid-column: 4 !important; }
html body #hud section#premium-window .prem-card .pw-btn[data-gold-pack] { grid-column: 5 !important; }
html body #hud section#premium-window .prem-card.gold .pw-btn.prem-soon { grid-column: 4 / 6 !important; }

/* ---------------- INVENTORY: category chips on top, details left, bag grid right ---------------- */
html body #hud section#inventory-window .bag-head { padding-left: 84px !important; }
html body #hud section#inventory-window .bag-head-icon {
  left: 14px !important; top: 50% !important; width: 56px !important; height: 56px !important; transform: translateY(-50%) !important;
  padding: 6px !important; box-sizing: border-box !important; border-radius: 50% !important;
  background: radial-gradient(circle, #ffffff 55%, #d8ebfa) !important; box-shadow: 0 0 0 3px #dfb758, 0 0 0 5px #734f0d !important; filter: none !important;
}
html body #hud section#inventory-window .bag-main {
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas: "side side" "detail layout" !important; column-gap: 12px !important; row-gap: 8px !important; padding: 10px 12px 8px !important;
}
html body #hud section#inventory-window .bag-side {
  grid-area: side !important; flex-direction: row !important; gap: 6px !important; margin: 0 !important; padding: 4px !important;
  overflow-x: auto !important; overflow-y: hidden !important; border: 0 !important; border-radius: 999px !important;
  background: #eef6fd !important; box-shadow: inset 0 0 0 1.5px #b9d3ec !important; scrollbar-width: none !important;
}
html body #hud section#inventory-window .bag-side button {
  flex: 0 0 auto !important; min-height: 34px !important; max-height: 34px !important; padding: 0 12px 0 8px !important; gap: 6px !important;
  border: 0 !important; border-radius: 999px !important; background: transparent !important;
}
html body #hud section#inventory-window .bag-side button svg { font-size: 18px !important; width: 18px !important; height: 18px !important; }
html body #hud section#inventory-window .bag-side button small { display: none !important; }
html body #hud section#inventory-window .bag-side button b { font-weight: 700 !important; font-size: 12.5px !important; }
html body #hud section#inventory-window .bag-side button[aria-pressed="true"] { border: 0 !important; }
html body #hud section#inventory-window .bag-detail { grid-area: detail !important; }
html body #hud section#inventory-window .bag-layout { grid-area: layout !important; padding: 0 !important; }
html body #hud section#inventory-window .bag-grid { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)) !important; gap: 7px !important; }
html body #hud section#inventory-window .bag-slot, html body #hud section#inventory-window .bag-empty {
  border-radius: 14px !important; background: radial-gradient(circle at 50% 40%, #ffffff 45%, #e3effb) !important;
  box-shadow: inset 0 0 0 2px #ffffff, 0 1px 3px rgba(20, 60, 120, 0.12) !important;
}
html body #hud section#inventory-window .bag-slot[aria-pressed="true"] { background: radial-gradient(circle at 50% 40%, #fffdf4 45%, #ffe39a) !important; border: 2px solid #e2ab33 !important; }
html body #hud section#inventory-window .bag-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
html body #hud section#inventory-window .bag-tabs button { border-radius: 999px !important; height: 34px !important; }
html body #hud section#inventory-window .bag-card { border-radius: 16px !important; }
html body #hud section#inventory-window .bag-search label { border-radius: 999px !important; }
html body #hud section#inventory-window .bag-search button { border-radius: 50% !important; }
html body #hud section#inventory-window .bag-footer { flex-direction: row-reverse !important; }
html body #hud section#inventory-window .bag-footer #bag-summary { margin-right: auto !important; }

/* ---------------- SETTINGS: new order, light headers, no castle pictures ---------------- */
html body #hud section#settings-window.settings-painted > .body { display: flex !important; flex-direction: column !important; }
html body #hud section#settings-window [data-settings-section="display"] { order: 1 !important; }
html body #hud section#settings-window [data-settings-section="audio"] { order: 2 !important; }
html body #hud section#settings-window [data-settings-section="session"] { order: 3 !important; }
html body #hud section#settings-window [data-settings-section="account"] { order: 4 !important; margin-bottom: 0 !important; }
html body #hud section#settings-window .settings-section:last-child { margin-bottom: calc(var(--u) * 18) !important; }
html body #hud section#settings-window .settings-section > h3 {
  background: linear-gradient(90deg, #eaf4fd, #ffffff) !important; color: #1d3a78 !important; text-shadow: none !important;
  border-bottom: calc(var(--u) * 2) solid #cfe2f5 !important; box-shadow: inset calc(var(--u) * 8) 0 0 #e2ab33 !important;
}
html body #hud section#settings-window .settings-section > h3 .settings-icon {
  background: #1d4f9a !important; filter: none !important;
}
html body #hud section#settings-window [data-settings-section="audio"] > h3::after,
html body #hud section#settings-window [data-settings-section="session"]::after { display: none !important; content: none !important; }
html body #hud section#settings-window .account-link-panel,
html body #hud section#settings-window .connection-monitor { background: linear-gradient(180deg, #ffffff, #eef6fe) !important; border-color: #cfe2f5 !important; }
html body #hud section#settings-window .account-link-panel::after,
html body #hud section#settings-window .connection-monitor::after { display: none !important; }
/* session: connection info first, then the log-out button */
html body #hud section#settings-window [data-settings-section="session"] .settings-section-body { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 240) !important; }
html body #hud section#settings-window #connection-monitor { order: 1 !important; }
html body #hud section#settings-window :is(#online-logout, #offline-home) { order: 2 !important; background: linear-gradient(180deg, #4f93f2, #1f5fd0 55%, #174cb0) !important; border-color: #0e2a66 !important; }
html body #hud section#settings-window #settings-links { order: 3 !important; }

/* All main windows 15% smaller (2026-09-26). --window-scale is part of every window's transform
   (index.html #novicia-cointh-scale + the drag code), so this scales them without touching layouts. */
html body #hud section.window:is(#status-window, #skill-window, #quest-window, #settings-window, #equipment-window, #premium-window, #bot-window, #inventory-window, #party-window, #world-window, #ranking-window, #mail-window, #daily-window) { --window-scale: 0.85; }

/* =====================================================================
   DAILY LOGIN REWARD (2026-09-26): painted header + our own body layout
   header /ui/daily/header-sky.webp (2135x401), picture /ui/daily/art-sky.webp
   Body = one 8-column grid: picture (left, 16:9) | info + today's reward (right),
   then the 30 days in 4 rows (Day 30 = 3-wide grand tile).
   ===================================================================== */
html body #hud section#daily-window.window { --navy: #10294f; --u: 1cqw !important; color: #10294f !important; }
html body #hud section#daily-window .titlebar {
  height: 18.78cqw !important; margin-top: 0 !important; z-index: 3 !important;
  background: url('/ui/daily/header-sky.webp?v=1') center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 6px 10px rgba(10, 30, 60, 0.35)) !important;
}
/* invisible hit area over the painted red X */
html body #hud section#daily-window .titlebar button { right: 2.2% !important; top: 40% !important; width: 6.6% !important; height: auto !important; aspect-ratio: 1 !important; border-radius: 50% !important; }
html body #hud section#daily-window .body {
  margin: -4.6cqw 2.2cqw 0 !important; padding: 5.2cqw 1.8cqw 1.8cqw !important;
  display: grid !important; grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  grid-template-rows: 11cqw 17cqw !important; grid-auto-rows: 10.6cqw !important; gap: 0.9cqw !important;
  background: radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f0f7ff 40%, #e1eefb 75%, #cbe3f8 100%) !important;
  border: 0.35cqw solid #dfb758 !important; border-top: 0 !important; border-radius: 0 0 2cqw 2cqw !important;
  box-shadow: 0 0 0 0.25cqw #734f0d, inset 0 0 0 0.25cqw #fff4cb, 0 1.6cqw 3.6cqw rgba(10, 30, 60, 0.4) !important;
}
html body #hud section#daily-window .body::before, html body #hud section#daily-window .body::after { display: none !important; }
html body #hud section#daily-window #daily-grid { display: contents !important; }
/* picture */
html body #hud section#daily-window .daily-side {
  display: block !important; grid-column: 1 / 5 !important; grid-row: 1 / 3 !important;
  background: url('/ui/daily/art-sky.webp?v=1') center 35% / cover no-repeat !important;
  border: 0 !important; border-radius: 1.4cqw !important;
  box-shadow: 0 0 0 0.3cqw #dfb758, 0 0 0 0.55cqw #ffffff, 0 0.6cqw 1.4cqw rgba(20, 60, 120, 0.3) !important;
}
/* info + today's reward on the right */
html body #hud section#daily-window .daily-info {
  grid-column: 5 / 9 !important; grid-row: 1 !important; margin: 0 !important; padding: 0.8cqw 1.4cqw !important;
  flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0.4cqw !important;
  border-radius: 1.2cqw !important; background: linear-gradient(90deg, #1d58b0, #3f86e0) !important; border: 0 !important;
  box-shadow: inset 0 0 0 0.2cqw rgba(255, 255, 255, 0.35) !important;
}
html body #hud section#daily-window .daily-info span { color: #ffffff !important; }
html body #hud section#daily-window .daily-info-reset span { color: #dbe9ff !important; }
html body #hud section#daily-window .daily-ico { filter: brightness(0) invert(1) !important; }
html body #hud section#daily-window .daily-today {
  grid-column: 5 / 9 !important; grid-row: 2 !important; margin: 0 !important; padding: 1cqw 1.4cqw !important;
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-rows: auto auto auto !important;
  column-gap: 1.2cqw !important; row-gap: 0.6cqw !important; align-items: center !important;
  border: 0 !important; border-radius: 1.2cqw !important; background: #ffffff !important;
  box-shadow: inset 0 0 0 0.2cqw #cfe2f5, 0 0.3cqw 0.8cqw rgba(20, 60, 120, 0.12) !important;
}
html body #hud section#daily-window .daily-gift { grid-column: 1 !important; grid-row: 1 !important; width: 4.4cqw !important; height: 4.4cqw !important; }
html body #hud section#daily-window .daily-next { grid-column: 2 !important; grid-row: 1 !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; }
html body #hud section#daily-window .daily-crown { grid-column: 3 !important; grid-row: 1 !important; width: 4.4cqw !important; margin: 0 !important; }
html body #hud section#daily-window .daily-progress { grid-column: 1 / 4 !important; grid-row: 2 !important; }
html body #hud section#daily-window #daily-claim {
  grid-column: 1 / 4 !important; grid-row: 3 !important; flex: none !important; width: 100% !important; min-width: 0 !important; height: 3.6cqw !important;
  border-radius: 99px !important; background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important; text-shadow: none !important;
  border: 0.2cqw solid #9c7a36 !important; box-shadow: 0 0.3cqw 0 #9c7a36 !important; font-size: 1.6cqw !important;
}
html body #hud section#daily-window #daily-claim:disabled { background: #e3ecf6 !important; color: #5b7396 !important; border-color: #b9d3ec !important; box-shadow: none !important; }
html body #hud section#daily-window .daily-today b { color: #1d3a78 !important; font-size: 1.45cqw !important; }
html body #hud section#daily-window .daily-bar { background: #dcebfa !important; }
html body #hud section#daily-window #daily-bar-fill { background: linear-gradient(90deg, #e2ab33, #ffe39a) !important; }
/* day tiles: round-cornered sky cards, day label as a small pill on top */
html body #hud section#daily-window .daily-cell {
  padding-top: 0.5cqw !important; border: 0 !important; border-radius: 1.2cqw !important;
  background: linear-gradient(180deg, #ffffff, #eaf4fd) !important;
  box-shadow: inset 0 0 0 0.18cqw #cfe2f5, 0 0.2cqw 0.5cqw rgba(20, 60, 120, 0.12) !important;
}
html body #hud section#daily-window .daily-cell b {
  padding: 0.1cqw 0.9cqw !important; border-radius: 99px !important; background: #1d4f9a !important; color: #ffffff !important; font-size: 1.3cqw !important;
}
html body #hud section#daily-window .daily-cell.big { background: linear-gradient(180deg, #fffdf4, #fff1cc) !important; box-shadow: inset 0 0 0 0.18cqw #dfb758 !important; }
html body #hud section#daily-window .daily-cell.big b { background: #c98a14 !important; }
html body #hud section#daily-window .daily-cell.done { background: linear-gradient(180deg, #eef6fe, #d6e9f9) !important; box-shadow: inset 0 0 0 0.18cqw #7fa9d6 !important; }
html body #hud section#daily-window .daily-cell.done b { background: #7fa9d6 !important; }
html body #hud section#daily-window .daily-cell.today { box-shadow: inset 0 0 0 0.25cqw #e2ab33, 0 0 1cqw rgba(234, 177, 55, 0.7) !important; }
html body #hud section#daily-window .daily-cell.today b { background: #e2ab33 !important; color: #3d2806 !important; }
html body #hud section#daily-window .daily-cell.today em { background: linear-gradient(180deg, #ffe39a, #e2ab33) !important; color: #3d2806 !important; text-shadow: none !important; }
html body #hud section#daily-window .daily-cell.grand {
  grid-column: span 3 !important; border: 0 !important;
  background: radial-gradient(ellipse at 30% 50%, #ffffff 0%, #fff4d6 35%, #ffe39a 70%, #e2ab33 100%) !important;
  box-shadow: inset 0 0 0 0.3cqw #c98a14, inset 0 0 0 0.55cqw #fff6d8 !important;
}
html body #hud section#daily-window .daily-cell.grand b { background: #8c5a06 !important; }
html body #hud section#daily-window .daily-ribbon { background: linear-gradient(180deg, #4f93f2, #1f5fd0) !important; color: #ffffff !important; }
html body #hud section#daily-window .daily-today { flex-wrap: nowrap !important; }
html body #hud section#daily-window .daily-cell b { font-size: 1.25cqw !important; }
html body #hud section#daily-window .daily-cell.grand { grid-column: span 3 !important; }
html body #hud section#daily-window .body { overflow-x: hidden !important; }

/* Phones (landscape height <= 520px or portrait width <= 640px): Premium, Bot, Settings, Equipment even smaller */
@media (max-height: 520px), (max-width: 640px) {
  html body #hud section.window:is(#premium-window, #bot-window, #settings-window) { --window-scale: 0.62; }
}

/* Phones: let Settings / Bot / Premium use the full screen height (the body max-height now
   accounts for the smaller --window-scale), and make the Daily reward window bigger + clearer. */
@media (max-height: 520px), (max-width: 640px) {
  html body #hud section#settings-window.settings-painted,
  html body #hud section#premium-window.painted-window,
  html body #hud section#bot-window.window { max-height: none !important; }
  html body #hud section#settings-window.settings-painted > .body,
  html body #hud section#premium-window.painted-window .pw-body,
  html body #hud section#bot-window .body {
    max-height: calc((100dvh - 16px) / (var(--ui-zoom, 1) * var(--window-scale, 1)) - var(--u) * 250) !important;
    overflow-y: auto !important;
  }
  html body #hud section#daily-window.window {
    --window-scale: 1;
    width: min(864px, calc((100vw - 12px) / var(--ui-zoom, 1)), calc((100dvh - 12px) / var(--ui-zoom, 1) / 1.02)) !important;
  }
  html body #hud section#daily-window .body { max-height: none !important; overflow-y: visible !important; }
  html body #hud section#daily-window .daily-cell b { font-size: 1.6cqw !important; }
  html body #hud section#daily-window .daily-item i, html body #hud section#daily-window .daily-done-count { font-size: 1.9cqw !important; font-weight: 700 !important; }
  html body #hud section#daily-window .daily-cell em { font-size: 1.5cqw !important; }
  html body #hud section#daily-window .daily-info span { font-size: 1.8cqw !important; }
  html body #hud section#daily-window .daily-info-reset span { font-size: 1.6cqw !important; }
  html body #hud section#daily-window .daily-today b, html body #hud section#daily-window #daily-count { font-size: 1.75cqw !important; }
  html body #hud section#daily-window .daily-next .daily-item i { font-size: 1.8cqw !important; }
  html body #hud section#daily-window #daily-claim { font-size: 1.9cqw !important; }
}

/* =====================================================================
   Landscape phones: bigger, bolder text inside Status / Skill / Equipment
   (window sizes stay; Equipment now uses the same 0.85 scale as Status/Skill)
   ===================================================================== */
@media (orientation: landscape) and (max-height: 520px) {
  /* STATUS */
  html body #hud #status-window.status .st-head { font-size: 1.5cqw !important; }
  html body #hud #status-window.status .stat { grid-template-columns: 2.8cqw minmax(0, 1fr) 4.2cqw 3.4cqw 2.9cqw !important; gap: 0.35cqw !important; padding: 0 0.35cqw !important; }
  html body #hud #status-window.status .stat-icon { width: 2.7cqw !important; height: 2.7cqw !important; }
  html body #hud #status-window.status .stat > div { font-size: 2.05cqw !important; font-weight: 800 !important; }
  html body #hud #status-window.status .stat b { height: 2.9cqw !important; font-size: 2cqw !important; font-weight: 800 !important; }
  html body #hud #status-window.status .stat em { height: 2.9cqw !important; font-size: 1.7cqw !important; font-weight: 800 !important; }
  html body #hud #status-window.status .stat button { width: 2.9cqw !important; height: 2.9cqw !important; font-size: 2cqw !important; }
  html body #hud #status-window.status #status-derived > div::before { width: 2.4cqw !important; height: 2.4cqw !important; }
  html body #hud #status-window.status #status-derived span { font-size: 1.7cqw !important; font-weight: 800 !important; }
  html body #hud #status-window.status #status-derived b { font-size: 2.2cqw !important; font-weight: 800 !important; }
  html body #hud #status-window.status .body > .row h3 { font-size: 2.3cqw !important; }
  html body #hud #status-window.status #points { font-size: 2.1cqw !important; font-weight: 800 !important; }
  html body #hud #status-window.status #points b { font-size: 4cqw !important; }

  /* SKILL */
  html body #hud section#skill-window.window .skill-name { font-size: 2.05cqw !important; font-weight: 800 !important; }
  html body #hud section#skill-window.window .skill-rank span { width: 5cqw !important; font-size: 1.65cqw !important; font-weight: 800 !important; }
  html body #hud section#skill-window.window .skill-lock { font-size: 1.45cqw !important; font-weight: 800 !important; }
  html body #hud section#skill-window.window #skill-description strong { font-size: 2.3cqw !important; }
  html body #hud section#skill-window.window #skill-description p { font-size: 1.55cqw !important; font-weight: 600 !important; line-height: 1.25 !important; }
  html body #hud section#skill-window.window .skill-drag-help { font-size: 1.35cqw !important; font-weight: 600 !important; }
  html body #hud section#skill-window.window #skill-use { font-size: 1.6cqw !important; }
  html body #hud section#skill-window.window :is(#skill-reset, #skill-apply, .skill-job-tab) { font-size: 1.45cqw !important; }
  html body #hud section#skill-window.window #skill-points { font-size: 1.9cqw !important; }
  html body #hud section#skill-window.window #skill-points b { font-size: 2.1cqw !important; }

  /* EQUIPMENT */
  html body #hud section#equipment-window.window.equipment .equipment-tabline small { font-size: 2.1cqw !important; }
  html body #hud section#equipment-window.window.equipment .paper-slot small { font-size: 1.65cqw !important; font-weight: 700 !important; }
  html body #hud section#equipment-window.window.equipment .paper-slot strong { font-size: 2.3cqw !important; font-weight: 800 !important; }
  html body #hud section#equipment-window.window.equipment .paper-slot small::before,
  html body #hud section#equipment-window.window.equipment .paper-slot strong::before { display: none !important; }
  html body #hud section#equipment-window.window.equipment #eq-class { font-size: 1.7cqw !important; }
  html body #hud section#equipment-window.window.equipment .equipment-detail strong { font-size: 2.6cqw !important; }
  html body #hud section#equipment-window.window.equipment .equipment-detail span:not(.eq-selected-icon) { font-size: 1.9cqw !important; font-weight: 700 !important; }
  html body #hud section#equipment-window.window.equipment .equipment-detail button { font-size: 1.9cqw !important; }
  html body #hud section#equipment-window.window.equipment .loadout-chip small { font-size: 1.7cqw !important; }
}

/* Touch devices: the page itself must never scroll (iOS Safari scrolled the page while using the
   joystick -> toolbar show/hide -> endless canvas resizes -> very low FPS) */
@media (pointer: coarse) {
  html, body { height: 100% !important; overflow: hidden !important; overscroll-behavior: none !important; }
  body { position: fixed !important; inset: 0 !important; width: 100% !important; }
}

/* Minimap NPC markers: name tooltip on hover (js/nv_minimap_npcs.js + main bundle) */
html body #hud section.minimap .minimap-npc-tip {
  position: absolute; z-index: 5; pointer-events: none; transform: translate(-50%, calc(-100% - 10px));
  padding: 3px 8px; border-radius: 6px; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  background: rgba(16, 41, 79, 0.92); border: 1px solid #dfb758; color: #fff6d6;
  font: 700 12px/1.3 "Noto Sans Thai", Tahoma, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
html body #hud section.minimap .minimap-npc-tip[hidden] { display: none; }