/* Yulgang in-game windows: one native "jade and gold" skin for every window the client builds in code.
   Spec and review notes: docs/ingame-ui-design.md. Installed by tools/client-patch/ui_windows.py.
   Frame art: /ui-kit/jade-frame.png, cut on install from the client's ui/classic/shop_box.png (the inventory frame).
   Only looks and layout limits change here; ids, classes, DOM and game logic stay as the client made them. */
:root {
  --ygw-frame: url(/ui-kit/jade-frame.png) 42 48 44 48 / 42px 48px 44px 48px / 2px 8px 8px 8px stretch;
  --ygw-body: radial-gradient(128% 96% at 50% 38%, #0d4020 0%, #05190c 68%, #010704 100%);
  --ygw-sunk: #020a05;
  --ygw-panel: linear-gradient(#0c2414e6, #03100ae6);
  --ygw-gold: #e2bd6a;
  --ygw-gold-hi: #ffeab4;
  --ygw-gold-dim: #e2bd6a66;
  --ygw-gold-line: #e2bd6a40;
  --ygw-capsule: #1f1311;
  --ygw-ink: #e9efdc;
  --ygw-ink-dim: #b9c8ad;
  --ygw-ink-off: #8d9a84;
  --ygw-danger: #ff7a5c;
  --ygw-ok: #9fe08a;
  --ygw-r1: #d9dccf; /* common   ธรรมดา */
  --ygw-r2: #7fdc6b; /* rare     หายาก */
  --ygw-r3: #63a9ff; /* very rare หายากมาก */
  --ygw-r4: #ffc23d; /* legend   ตำนาน */
  --ygw-btn: linear-gradient(#174a28, #0a2614 55%, #051509);
  --ygw-btn-hot: linear-gradient(#20603a, #0e321b 55%, #061a0c);
  --ygw-btn-gold: linear-gradient(#ffeab4, #e2bd6a 55%, #a87c2e);
  --ygw-btn-gold-hot: linear-gradient(#fff4d2, #f0cf80 55%, #b98c38);
  --ygw-font: Tahoma, "Leelawadee UI", "Noto Sans Thai", sans-serif;
  --ygw-fs: 12px;
  --ygw-fs-title: 14px;
  --ygw-top: 56px;     /* desktop: keep clear of the top icon row */
  --ygw-bottom: 84px;  /* desktop: keep clear of the chat input and the skill bar */
  /* desktop width: clear of the minimap (top right, 170 px) on both sides when the screen allows, never under 900 px
     (the mall/market layouts) unless the screen itself is narrower */
  --ygw-max-w: min(calc(100vw - 32px), max(calc(100vw - 352px), 900px));
  --ygw-scroll-track: #06120b;     /* the one game-wide scrollbar (section 13) */
  --ygw-scroll-thumb: #a8792a;
  --ygw-scroll-thumb-hi: #e2bd6a;
  --ygw-sheet-zoom: 1.0834; /* phones: 13 / 12, so the windows' 12 px minimum reads as 13 px */
}

/* ---------- 1. window frame ---------- */
html body #mallWindow, html body #gachaWindow, html body #giftWindow, html body #marketWindow, html body #dailyWindow,
html body #botWindow, html body #gameSettings, html body #itemCodeWindow, html body #worldMap,
html body #craftingOverlay .craft-window, html body #usdtTopupWindow .usdt-topup-panel,
html body #partyFinderUi .pf-live-panel, html body #guildTitlesUi .gt-panel,
html body #factionWarScoreboardUi .fw-board-panel, html body #gameGuide .guide-box,
html body #systemMenu .system-menu-box, html body #channelSwitchUi .channel-switch-box,
html body .friend-request-panel, html body .security-code-card, html body .death-dialog-panel,
html body #partyInviteDialog, html body #guildInviteDialog, html body #guildWarpDialog,
html body #petTransformDialog, html body #petItemDialog, html body .qigong-reset-panel,
html body .character-rename-panel, html body .lion-roar-panel, html body .body-transfer-panel,
html body .timed-charm-panel, html body .needle-thread-panel, html body .remote-equipment-panel,
html body .player-trade-panel {
  border-style: solid !important; border-color: transparent !important; border-width: 6px 8px 8px !important;
  border-image: var(--ygw-frame) !important; border-radius: 0 !important;
  background: var(--ygw-body) padding-box !important;
  box-shadow: 0 12px 40px #000c !important;
  color: var(--ygw-ink) !important; font-family: var(--ygw-font) !important;
}
/* the corner swirls stand out of the box like the native windows; nothing may clip them */
html body #craftingOverlay .craft-window, html body #usdtTopupWindow .usdt-topup-panel { overflow: visible !important; }
html body #craftingOverlay .craft-window > * { min-width: 0; }

/* ---------- 2. title bar: the title sits in the native black capsule (y 6-35) ---------- */
html body .mall-head, html body .gacha-head, html body .gift-head, html body .market-head, html body .daily-head,
html body .bot-title, html body .set-title, html body .item-code-heading, html body .craft-head,
html body .topup-header, html body #guildTitlesUi .gt-panel > header, html body .pf-live-panel > header,
html body .fw-board-header, html body .guide-head, html body #wmTitle, html body .channel-switch-header,
html body .system-menu-title {
  position: relative !important; box-sizing: border-box !important;
  min-height: 30px !important; margin: 0 0 6px !important; padding: 0 44px !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important;
  column-gap: 8px !important; flex: none !important;
  color: var(--ygw-gold-hi) !important; font: 700 var(--ygw-fs-title)/30px var(--ygw-font) !important;
  text-align: center !important; text-shadow: 0 1px 0 #000, 0 0 6px #000 !important;
}
html body :is(.mall-head, .gacha-head, .gift-head, .market-head, .daily-head, .channel-switch-header, .pf-live-panel > header,
  #guildTitlesUi .gt-panel > header) h2,
html body .craft-head h2, html body .item-code-heading h2, html body .topup-header h2, html body #wmTitleText,
html body .guide-title, html body .fw-board-heading {
  margin: 0 !important; padding: 0 !important; height: 30px; line-height: 30px !important;
  color: var(--ygw-gold-hi) !important; font: 700 var(--ygw-fs-title)/30px var(--ygw-font) !important;
  letter-spacing: 0 !important; text-shadow: 0 1px 0 #000, 0 0 6px #000 !important; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* modern decorations the native windows never had: English eyebrows, emblem art, badge glyphs, swirl rules */
html body .craft-eyebrow, html body .item-code-kicker, html body .topup-eyebrow, html body .craft-emblem,
html body .mall-badge, html body .gacha-head-gem { display: none !important; }
html body .mall-head::after, html body .gacha-head::after, html body .gift-head::after, html body .market-head::after,
html body .daily-head::after, html body .mall-head::before, html body .gacha-head::before { display: none !important; }
/* secondary header lines go under the capsule, plain dim text */
html body .craft-heading, html body .item-code-heading > div, html body .topup-header > div, html body .guide-heading {
  display: contents !important;
}
html body .craft-heading p, html body .item-code-intro, html body .topup-subtitle, html body .guide-heading small {
  flex: 1 0 100% !important; order: 5; margin: 6px 0 0 !important; line-height: 1.5 !important;
  color: var(--ygw-ink-dim) !important; font: 400 var(--ygw-fs)/1.5 var(--ygw-font) !important; text-shadow: none !important;
}
html body .craft-head h2, html body .item-code-heading h2, html body .topup-header h2 { flex: 1 0 100%; }

/* ---------- 3. close button: the native gold ring, top right on the capsule ---------- */
html body :where(.mall-close, .gacha-close, .gift-close, .market-close, .daily-close, .bot-close, .set-close, .item-code-close,
  .craft-close, .topup-close, .fw-board-close, .guide-close, #wmClose, .channel-switch-close, .pf-live-panel > header > button:last-child,
  #guildTitlesUi .gt-panel > header > button:last-child) {
  position: absolute !important; top: 4px !important; right: 6px !important; left: auto !important; bottom: auto !important;
  width: 24px !important; height: 24px !important; min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: url(/ui-kit/close.png) center / 22px 22px no-repeat !important; box-shadow: none !important;
  color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-indent: -999px; overflow: hidden !important;
  cursor: pointer !important; flex: none !important; z-index: 5;
}
html body :where(.mall-close, .gacha-close, .gift-close, .market-close, .daily-close, .bot-close, .set-close, .item-code-close,
  .craft-close, .topup-close, .fw-board-close, .guide-close, #wmClose, .channel-switch-close, .pf-live-panel > header > button:last-child,
  #guildTitlesUi .gt-panel > header > button:last-child):hover { filter: brightness(1.25) drop-shadow(0 0 4px #ffd36a) !important; }
html body :where(.mall-close, .gacha-close, .gift-close, .market-close, .daily-close, .bot-close, .set-close, .item-code-close,
  .craft-close, .topup-close, .fw-board-close, .guide-close, #wmClose, .channel-switch-close, .pf-live-panel > header > button:last-child,
  #guildTitlesUi .gt-panel > header > button:last-child):active { filter: brightness(.85) !important; }
html body :where(.mall-close, .gacha-close, .gift-close, .market-close, .daily-close, .bot-close, .set-close, .item-code-close,
  .craft-close, .topup-close, .fw-board-close, .guide-close, #wmClose, .channel-switch-close, .pf-live-panel > header > button:last-child,
  #guildTitlesUi .gt-panel > header > button:last-child)::after {
  content: ""; position: absolute; inset: -10px; /* 44 px hit area */
}
/* small header tools (refresh, reset, guide actions) sit left of the close ring */
html body .mall-reset, html body .gacha-refresh { position: absolute !important; top: 4px !important; right: 36px !important;
  width: 24px !important; height: 24px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; }
html body .guide-actions { position: absolute !important; top: 3px; right: 36px; display: flex; gap: 4px; }
html body .guide-actions button:not(.guide-close) { width: 26px !important; height: 24px !important; min-height: 0 !important; padding: 0 !important; }

/* ---------- 4. controls ---------- */
/* buttons: jade bevel; the window's main action: gold bevel (the client's own "top up" button style) */
html body :is(#itemCodeWindow, #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi)
  button:where(:not(.item-code-close, .craft-close, .topup-close, .fw-board-close, .craft-recipe, .craft-quantity button, .fw-board-launcher, header > button:last-child)) {
  border: 1px solid var(--ygw-gold-dim) !important; border-radius: 2px !important; background: var(--ygw-btn) !important;
  color: var(--ygw-gold-hi) !important; font-family: var(--ygw-font) !important; text-shadow: 0 1px 0 #000;
  box-shadow: inset 0 1px #ffeab433, inset 0 -1px #000 !important; min-height: 28px;
}
html body :is(#itemCodeWindow, #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi)
  button:not(:disabled):hover { border-color: var(--ygw-gold) !important; filter: brightness(1.12); }
html body :is(#itemCodeWindow, #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi)
  button:not(:disabled):active { filter: brightness(.88); transform: translateY(1px); }
/* selected tab / chosen amount / pressed toggle: the mall's lit gold tab */
html body :is(#itemCodeWindow, #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi)
  button:is([aria-pressed=true], [aria-selected=true], .is-active, .active):not(:disabled, .craft-recipe) {
  border-color: var(--ygw-gold-hi) !important; background: var(--ygw-btn-gold) !important; color: #2a1c05 !important;
  text-shadow: 0 1px 0 #fff4 !important; font-weight: 700;
}
html body :is(#itemCodeWindow, #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #botWindow)
  :is(.item-code-submit, .craft-submit, .craft-confirm-yes, .craft-retry, .topup-create, .pf-live-primary, button[type=submit], .bot-start) {
  border: 1px solid var(--ygw-gold-hi) !important; border-radius: 2px !important; background: var(--ygw-btn-gold) !important;
  color: #2a1c05 !important; text-shadow: 0 1px 0 #fff4 !important; font-weight: 700 !important;
  box-shadow: inset 0 1px #fff8, inset 0 -2px #0004, 0 2px 6px #0008 !important;
}
html body :is(#itemCodeWindow, #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #botWindow)
  :is(.item-code-submit, .craft-submit, .craft-confirm-yes, .topup-create, .pf-live-primary, button[type=submit], .bot-start):not(:disabled):hover {
  background: var(--ygw-btn-gold-hot) !important; filter: none !important;
}
/* disabled: readable, not faded (owner readability rule); the reason is shown by each window's status line */
html body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow,
  #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi) button:disabled {
  background: linear-gradient(#18221a, #0c140e) !important; border-color: #4d5a44 !important; color: var(--ygw-ink-off) !important;
  text-shadow: none !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; cursor: not-allowed !important;
}
/* fields */
html body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow,
  #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi)
  :is(input[type=text], input[type=search], input[type=number], input:not([type]), select, textarea) {
  border-radius: 0 !important; border: 1px solid var(--ygw-gold-dim) !important; background-color: var(--ygw-sunk) !important;
  color: var(--ygw-ink) !important; font-family: var(--ygw-font) !important; box-shadow: inset 0 1px 3px #000 !important;
}
html body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow,
  #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi) :is(input, select, textarea):focus {
  border-color: var(--ygw-gold) !important; outline: 0 !important;
}
html body :is(#itemCodeWindow, #craftingOverlay, #usdtTopupWindow, #partyFinderUi) ::placeholder { color: var(--ygw-ink-off) !important; opacity: 1; }
/* keyboard focus is always visible */
html body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow,
  #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi, #worldMap, #gameGuide, #systemMenu,
  #channelSwitchUi) :focus-visible { outline: 2px solid var(--ygw-gold-hi) !important; outline-offset: 1px !important; }
/* scrollbars: thin gold on sunk jade */
html body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow,
  #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi, #worldMap) * {
  scrollbar-width: thin; scrollbar-color: #a8884a var(--ygw-sunk);
}
html body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow,
  #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi, #worldMap) ::-webkit-scrollbar { width: 8px; height: 8px; }
html body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow,
  #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi, #worldMap) ::-webkit-scrollbar-track { background: var(--ygw-sunk); }
html body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow,
  #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi, #worldMap) ::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #8a6a2e, #d8b464, #8a6a2e); border: 1px solid #000; border-radius: 0;
}

/* ---------- 5. panels inside the code-built outliers: the mall's sunk jade panel with a dim gold rule ---------- */
html body #craftingOverlay :is(.craft-panel, .craft-recipe, .craft-filters select, .craft-search, .craft-quantity > div, .craft-result-slot, .craft-item-icon),
html body #itemCodeWindow :is(.pr-game-history, .item-code-history-panel, .item-code-history, .pr-game-history-toggle),
html body #partyFinderUi :is(.pf-live-tools, .pf-live-body > *),
html body #guildTitlesUi .gt-scroll {
  border-radius: 0 !important; border-color: var(--ygw-gold-line) !important;
}
html body #craftingOverlay .craft-panel, html body #itemCodeWindow :is(.pr-game-history, .item-code-history-panel) {
  background: var(--ygw-panel) !important; border: 1px solid var(--ygw-gold-line) !important;
  box-shadow: inset 0 1px #ffeab41a !important;
}
html body #craftingOverlay .craft-panel-head {
  background: linear-gradient(#123a20cc, #06180ccc) !important; border-bottom: 1px solid var(--ygw-gold-line) !important;
}
html body #craftingOverlay .craft-panel-head h3, html body #itemCodeWindow .item-code-history-head div {
  color: var(--ygw-gold) !important; font: 700 var(--ygw-fs)/1.4 var(--ygw-font) !important; letter-spacing: 0 !important;
}
html body #craftingOverlay :is(.craft-small-label, .craft-list-caption, .craft-availability, .craft-recipe-info small,
  .craft-material-name, .craft-material-numbers, .craft-history-entry, .craft-cost > span, .craft-quantity > span, .craft-status,
  .craft-chance, .craft-wallet, .craft-rank, .craft-empty, .craft-panel-head > span, .craft-recipe-output, .craft-submit small) {
  font-size: var(--ygw-fs) !important; letter-spacing: 0 !important;
}
html body #craftingOverlay { --craft-ink: var(--ygw-ink); --craft-muted: var(--ygw-ink-dim); --craft-gold: var(--ygw-gold);
  --craft-line: var(--ygw-gold-line); --craft-green: var(--ygw-ok); font-family: var(--ygw-font) !important; }
html body #craftingOverlay .craft-recipe {
  background: linear-gradient(#0f2d18, #071a0d) !important; border: 1px solid var(--ygw-gold-line) !important; color: var(--ygw-ink) !important;
}
html body #craftingOverlay .craft-recipe:hover { border-color: var(--ygw-gold-dim) !important; }
html body #craftingOverlay .craft-recipe[data-selected=true] {
  background: linear-gradient(#245a33, #0e3018) !important; border-color: var(--ygw-gold) !important;
  box-shadow: inset 3px 0 var(--ygw-gold) !important;
}
html body #craftingOverlay .craft-recipe-info strong, html body #craftingOverlay .craft-material-name { color: var(--ygw-ink) !important; }
html body #craftingOverlay :is(.craft-wallet b, .craft-cost strong, .craft-rank b, .craft-tab) { color: var(--ygw-gold-hi) !important; }
html body #craftingOverlay .craft-tab { background: linear-gradient(90deg, #1d4a2a, #1d4a2a00) !important; border-left-color: var(--ygw-gold) !important; }
html body #craftingOverlay :is(.craft-item-icon, .craft-result-slot) {
  background: radial-gradient(#0f3a1c, #03100a) !important; border: 1px solid #a8884a !important; border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 8px #000a !important;
}
html body #craftingOverlay :is(.craft-footer, .craft-subbar) { background: none !important; border-color: var(--ygw-gold-line) !important; }
html body #craftingOverlay .craft-footer { border-top: 1px solid var(--ygw-gold-line) !important; }
html body #craftingOverlay .craft-head { border: 0 !important; }
html body #craftingOverlay .craft-rank { order: 6; flex-direction: row !important; justify-content: center; gap: 18px !important;
  margin: 2px 0 0 !important; min-width: 0 !important; font: 400 var(--ygw-fs)/1.5 var(--ygw-font) !important; color: var(--ygw-ink-dim) !important; text-shadow: none !important; }
html body #craftingOverlay .craft-rank > span { gap: 6px !important; }
html body #craftingOverlay .craft-confirm { background: var(--ygw-body) !important; border: 1px solid var(--ygw-gold) !important; border-radius: 0 !important; }
html body #craftingOverlay .craft-confirm-layer { background: #010704d9 !important; }
html body #craftingOverlay .craft-submit { min-height: 46px !important; }
html body #craftingOverlay .craft-quantity button { background: var(--ygw-btn) !important; color: var(--ygw-gold-hi) !important; }
html body #craftingOverlay .craft-quantity input { background: var(--ygw-sunk) !important; color: var(--ygw-ink) !important; }

/* item code: same building blocks as the mall */
html body #itemCodeWindow { border-radius: 0 !important; }
html body #itemCodeWindow label { color: var(--ygw-gold) !important; font-weight: 700; }
html body #itemCodeWindow .item-code-help, html body #itemCodeWindow .item-code-history-status, html body #itemCodeWindow .pr-game-history-status {
  color: var(--ygw-ink-dim) !important; font-size: var(--ygw-fs) !important;
}
html body #itemCodeWindow #itemCodeInput { min-height: 34px !important; font-size: 13px !important; }
html body #itemCodeWindow .item-code-history:empty, html body #itemCodeWindow .item-code-history > :only-child {
  border-style: solid !important;
}

/* ---------- 6. item slots and rarity (shared by gacha, mall, daily, gift, craft) ---------- */
html body [data-rarity="1"] { --ygw-rarity: var(--ygw-r1); }
html body [data-rarity="2"] { --ygw-rarity: var(--ygw-r2); }
html body [data-rarity="3"] { --ygw-rarity: var(--ygw-r3); }
html body [data-rarity="4"] { --ygw-rarity: var(--ygw-r4); }

/* the header is the first row, so it sits in the capsule (y 6-35 of the frame) */
html body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow,
  #worldMap, #usdtTopupWindow .usdt-topup-panel, #factionWarScoreboardUi .fw-board-panel) { padding-top: 0 !important; }
html body #craftingOverlay .craft-submit small { display: none !important; }

/* ---------- 7. desktop placement: centred in the play area between the top icon row and the chat input / skill bar,
   clamped to the viewport; wide windows shrink instead of overflowing ---------- */
@media (min-width: 768px) {
  html:not(.mobile-hud-on) body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow,
    #itemCodeWindow, #worldMap, #gameSettings) {
    top: calc(50% + (var(--ygw-top) - var(--ygw-bottom)) / 2) !important;
    max-width: var(--ygw-max-w) !important;
    max-height: calc(100dvh - var(--ygw-top) - var(--ygw-bottom) - 8px) !important;
  }
  html:not(.mobile-hud-on) body #gameSettings .set-body {
    max-height: calc(100dvh - var(--ygw-top) - var(--ygw-bottom) - 8px - 92px) !important; /* minus title, tabs, frame */
  }
  html:not(.mobile-hud-on) body :is(#craftingOverlay, #usdtTopupWindow, #partyFinderUi .pf-live-overlay, #guildTitlesUi,
    #factionWarScoreboardUi .fw-board-overlay, #gameGuide) {
    padding-top: calc(var(--ygw-top) + 4px) !important; padding-bottom: calc(var(--ygw-bottom) + 4px) !important;
    box-sizing: border-box !important;
  }
  html:not(.mobile-hud-on) body :is(#craftingOverlay .craft-window, #usdtTopupWindow .usdt-topup-panel, #partyFinderUi .pf-live-panel,
    #guildTitlesUi .gt-panel, #factionWarScoreboardUi .fw-board-panel, #gameGuide .guide-box) {
    max-height: calc(100dvh - var(--ygw-top) - var(--ygw-bottom) - 8px) !important; max-width: var(--ygw-max-w) !important;
  }
}
/* ---------- 8. phones and tablets (html.ygw-sheet, set by yg-windows.js when the touch HUD is on or the screen is
   under 768 px): every window is a full-screen sheet at real pixel size (the client scales the whole HUD by
   --ui-scale; the sheet undoes that, like the client's own crafting overlay), title bar and close stay on top,
   the body scrolls, the main action bar stays at the bottom, text is at least 13 px and every control 44 px. ---------- */
html.ygw-sheet body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings,
  #itemCodeWindow, #worldMap, #rankingWindow) {
  position: fixed !important; inset: 50% auto auto 50% !important; translate: none !important;
  /* drawn at 13/12 of real size so the windows' 12 px text reads as 13 px (hierarchy kept), filling the screen */
  width: calc(100vw / var(--ygw-sheet-zoom)) !important; height: calc(100dvh / var(--ygw-sheet-zoom)) !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
  transform: translate(-50%, -50%) scale(calc(var(--ygw-sheet-zoom) / var(--ui-scale, 1))) !important; transform-origin: 50% 50% !important;
}
html.ygw-sheet body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings,
  #itemCodeWindow, #worldMap) {
  flex-direction: column !important; overflow-x: hidden !important; overflow-y: auto !important; /* never set display: the client hides windows with it */
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  border-width: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
  border-image-outset: 0 !important; padding: 0 6px 0 !important; font-size: 13px !important;
}
html.ygw-sheet body #gameSettings .set-body, html.ygw-sheet body #botWindow .bot-body { max-height: none !important; overflow: visible !important; }
/* sticky title bar: the capsule colour behind it once the body scrolls under */
html.ygw-sheet body :is(.mall-head, .gacha-head, .gift-head, .market-head, .daily-head, .bot-title, .set-title, .item-code-heading, #wmTitle) {
  position: sticky !important; top: 0 !important; z-index: 20 !important; min-height: 40px !important; margin: 0 0 6px !important;
  background: linear-gradient(#1f1311, #1f1311) padding-box !important; border: 1px solid var(--ygw-gold) !important;
  border-radius: 20px !important; box-shadow: 0 0 0 2px #0b2a14, 0 4px 10px #000a !important; line-height: 40px !important;
  font-size: 15px !important;
}
html.ygw-sheet body :is(.mall-head, .gacha-head, .gift-head, .market-head, .daily-head, .item-code-heading) h2 { font-size: 15px !important; line-height: 40px !important; height: 40px !important; }
html.ygw-sheet body :where(.mall-close, .gacha-close, .gift-close, .market-close, .daily-close, .bot-close, .set-close, .item-code-close, #wmClose) {
  width: 40px !important; height: 40px !important; top: 0 !important; right: 2px !important; background-size: 30px 30px !important;
}
html.ygw-sheet body :where(.mall-close, .gacha-close, .gift-close, .market-close, .daily-close, .bot-close, .set-close, .item-code-close, #wmClose)::after { inset: -2px !important; }
html.ygw-sheet body :where(.mall-reset, .gacha-refresh) { top: 0 !important; right: 46px !important; width: 40px !important; height: 40px !important; }
/* body grows with its content and the sheet scrolls, instead of squeezing lists to a few pixels */
html.ygw-sheet body :is(.mall-body, .gacha-machine-area, .gift-body, .market-table, .daily-grid) { flex: 1 0 auto !important; min-height: 260px !important; }
/* main action bars stay visible */
html.ygw-sheet body :is(.gacha-controls, .market-footer, .daily-foot, .bot-actions) {
  position: sticky !important; bottom: 0 !important; z-index: 15 !important; margin-top: 6px !important;
  background: linear-gradient(#0b2a14f2, #031009f7) !important; border-top: 1px solid var(--ygw-gold-dim) !important;
  padding: 6px !important; box-shadow: 0 -6px 12px #0009 !important;
}
/* readable and touchable */
html.ygw-sheet body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow, #worldMap) * {
  letter-spacing: 0 !important;
}
html.ygw-sheet body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow, #worldMap)
  :is(button, select, input:not([type=checkbox]):not([type=radio]):not([type=range])) {
  min-height: 44px !important;
}
html.ygw-sheet body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow, #worldMap)
  button:not(:is(.mall-close, .gacha-close, .gift-close, .market-close, .daily-close, .bot-close, .set-close, .item-code-close, #wmClose, .mall-reset, .gacha-refresh)) {
  min-width: 44px !important;
}
html.ygw-sheet body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #itemCodeWindow, #worldMap)
  :is(input[type=checkbox], input[type=radio]) { width: 22px !important; height: 22px !important; }
/* the other full-screen overlays already undo the HUD scale (crafting) or fill the screen: frame them flush */
html.ygw-sheet body #craftingOverlay .craft-window, html.ygw-sheet body #rankingWindow {
  border-image-outset: 0 !important;
}
html.ygw-sheet body #craftingOverlay {
  width: calc(100vw / var(--ygw-sheet-zoom)) !important; height: calc(100dvh / var(--ygw-sheet-zoom)) !important;
  transform: translate(-50%, -50%) scale(calc(var(--ygw-sheet-zoom) / var(--ui-scale, 1))) !important;
}
html.ygw-sheet body #craftingOverlay * { letter-spacing: 0 !important; }
html.ygw-sheet body #craftingOverlay :is(button, select, .craft-search) { min-height: 44px !important; }
html.ygw-sheet body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings,
  #itemCodeWindow, #worldMap) { padding: 0 10px !important; }
/* mall: the try-on side column goes under the item grid, so the grid keeps three readable columns */
html.ygw-sheet body #mallWindow .mall-body { flex-direction: column !important; gap: 8px !important; }
html.ygw-sheet body #mallWindow .mall-shop { flex: none !important; min-height: 300px !important; }
html.ygw-sheet body #mallWindow .mall-side { flex: none !important; width: auto !important; max-width: none !important; }
/* hints that only repeat the field label are dropped on phones, so the list and the action keep the room */
html.ygw-sheet body .item-code-intro { display: none !important; }
@media (max-height: 480px) {
  html.ygw-sheet body #craftingOverlay .craft-heading p { display: none !important; }
  html.ygw-sheet body #craftingOverlay .craft-rank { margin: 0 !important; }
  html.ygw-sheet body #craftingOverlay .craft-head { margin-bottom: 2px !important; }
}
/* windows that already fill the screen through their own overlay: the panel takes the whole sheet */
html.ygw-sheet body :is(#partyFinderUi .pf-live-overlay, #usdtTopupWindow, #guildTitlesUi, #factionWarScoreboardUi .fw-board-overlay, #gameGuide) {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}
html.ygw-sheet body :is(#partyFinderUi .pf-live-panel, #usdtTopupWindow .usdt-topup-panel, #guildTitlesUi .gt-panel,
  #factionWarScoreboardUi .fw-board-panel, #gameGuide .guide-box) {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  border-image-outset: 0 !important; border-width: 8px 10px 10px !important;
}
html.ygw-sheet body :is(#partyFinderUi, #usdtTopupWindow, #guildTitlesUi, #factionWarScoreboardUi, #gameGuide) :is(button, select, input:not([type=checkbox]):not([type=radio])) {
  min-height: 44px !important;
}
html.ygw-sheet:root body :is(#partyFinderUi, #usdtTopupWindow, #guildTitlesUi, #factionWarScoreboardUi) * { font-size: max(13px, 1em) !important; }
/* narrow desktops (768-1279 px): the minimap (top right, ~180 px) would sit under a centred window, so windows are
   centred in the space left of it */
@media (min-width: 768px) and (max-width: 1279px) {
  html:not(.ygw-sheet) { --ygw-max-w: calc(100vw - 196px); }
  html:not(.ygw-sheet) body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow,
    #itemCodeWindow, #worldMap, #gameSettings) { left: calc((100vw - 180px) / 2) !important; }
  html:not(.ygw-sheet) body :is(#craftingOverlay, #usdtTopupWindow, #partyFinderUi .pf-live-overlay, #guildTitlesUi,
    #factionWarScoreboardUi .fw-board-overlay, #gameGuide) { padding-right: 180px !important; padding-left: 16px !important; }
}
/* small print the client set at 11 px (gacha prize rarity, machine tagline, costs on the open buttons) */
html body #gachaWindow :is(.gacha-prize-copy span, .gacha-machine span, .gacha-open b) { font-size: 12px !important; }
html body #craftingOverlay .craft-cost > div > span { font-size: 12px !important; }
html body #usdtTopupWindow :is(small, .topup-rule, .topup-message, .topup-summary-label, .topup-summary-row span,
  .topup-summary-row b, .topup-summary-hint) { font-size: 12px !important; letter-spacing: 0 !important; }html body #itemCodeWindow .item-code-history-head span { font-size: 12px !important; }
html body #gameSettings .set-note, html body #botWindow :is(.bot-info, .bot-info b, .bot-pair button) { font-size: 12px !important; }
html body #gameSettings .set-choice button { font-size: 12px !important; min-width: 24px; }html body #botWindow .bot-anchor { font-size: 12px !important; }
html body :is(#itemCodeWindow, #craftingOverlay, #usdtTopupWindow, #partyFinderUi, #guildTitlesUi, #factionWarScoreboardUi)
  button:is([aria-pressed=true], [aria-selected=true], .is-active, .active):not(:disabled, .craft-recipe) * { color: #2a1c05 !important; text-shadow: none !important; }
html body #craftingOverlay .craft-search input { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html body #craftingOverlay .craft-small-label { display: none !important; } /* English decoration ("ITEM RECIPES") */html.ygw-sheet body #rankingWindow { grid-template-rows: minmax(0, 1fr) !important; grid-template-columns: minmax(0, 1fr) !important; }
/* the client's 11 px labels in the commerce windows and its 8-9 px crafting tab counts: 12 px everywhere
   (13 px on phones through --ygw-sheet-zoom) */
html body :is(#giftWindow .gift-quantity, #dailyWindow .daily-day-no, #dailyWindow .daily-day-foot span, #gachaWindow .gacha-status,
  #craftingOverlay .craft-mobile-tabs button, #craftingOverlay .craft-mobile-tabs [data-role=result-count],
  #craftingOverlay .craft-recipe-empty small) { font-size: 12px !important; }html body #dailyWindow :is(.daily-hint, .daily-note) { font-size: 12px !important; }
/* system menu / channel switch: title row in the capsule; the world map's own corner glyphs give way to the frame */
html body :is(#systemMenu .system-menu-box, #channelSwitchUi .channel-switch-box) { padding-top: 0 !important; }
html body #worldMap .wm-corner { display: none !important; }
/* ---------- 9. phone sheets: one scroll area per window (owner report: rows hidden behind the bot footer) ----------
   The sheet itself no longer scrolls. Title, tabs, toolbars and the action bar keep their natural height in the flex
   column; only the window's main list scrolls, inside its own area, so nothing can slide under the footer.
   Overlays inside a window (pickers, modals, toasts, reveal layers) keep their own positioning. */
html.ygw-sheet body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #worldMap) {
  /* never set display here: the client opens and closes these windows with [hidden] / inline display */
  overflow: hidden !important; overscroll-behavior: contain;
}
html.ygw-sheet body :is(#mallWindow, #gachaWindow, #giftWindow, #marketWindow, #dailyWindow, #botWindow, #gameSettings, #worldMap) > * {
  flex: none !important; min-height: 0;
}
html.ygw-sheet body :is(.mall-head, .gacha-head, .gift-head, .market-head, .daily-head, .bot-title, .set-title, #wmTitle) {
  position: relative !important; top: auto !important;
}
html.ygw-sheet body :is(.gacha-controls, .market-footer, .daily-foot, .bot-actions) {
  position: relative !important; bottom: auto !important; margin: 0 !important; box-shadow: none !important;
  padding: 8px 6px !important; display: flex !important; gap: 8px !important; justify-content: center; align-items: center;
}
/* the one scrolling region */
html.ygw-sheet body :is(#mallWindow > .mall-body, #gachaWindow > .gacha-machine-area, #giftWindow > .gift-body, #marketWindow > .market-table, #dailyWindow > .daily-grid,
  #botWindow > .bot-body, #gameSettings > .set-body, #worldMap > #wmBody) {
  flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; height: auto !important;
  overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; padding: 8px 4px !important; margin: 0 !important; scrollbar-width: thin; scrollbar-color: var(--ygw-gold-dim) transparent;
}
/* the mall's item grid scrolls inside its body; the try-on column follows below the grid */
html.ygw-sheet body #mallWindow > .mall-body { display: flex !important; }
html.ygw-sheet body #mallWindow .mall-shop { min-height: 220px !important; }
/* tabs: one row; when a language makes them wider than the screen they scroll sideways instead of wrapping */
html.ygw-sheet body :is(.bot-tabs, .set-tabs, .mall-tabs) {
  display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; overflow-x: auto !important; overflow-y: hidden !important;
  padding: 0 0 6px !important; margin: 0 !important; scrollbar-width: none; justify-content: flex-start !important;
}
html.ygw-sheet body :is(.bot-tabs, .set-tabs, .mall-tabs)::-webkit-scrollbar { display: none; }
html.ygw-sheet body :is(.bot-tabs, .set-tabs, .mall-tabs) > * { flex: 1 0 auto !important; white-space: nowrap !important; margin: 0 !important; }
/* notes that only explain are dropped on phones, so the list keeps the room */
html.ygw-sheet body :is(.mall-note, .gift-note, .daily-note) { display: none !important; }
/* the item-code window is a short form plus history: it keeps the sheet scroll, nothing is pinned over content */
/* the :not(#ygw-none) only lifts specificity above the 44 px minimum rule above */
html.ygw-sheet body :is(#botWindow, #marketWindow, #dailyWindow) > :is(.bot-actions, .market-footer, .daily-foot) > button:not(#ygw-none) { flex: 0 0 auto !important; width: auto !important; min-width: 128px !important; padding: 0 16px !important; }
@media (max-height: 420px) {
  html.ygw-sheet body :is(.mall-head, .gift-head, .market-head, .daily-head, .bot-title, .set-title, #wmTitle) { margin: 0 0 4px !important; }
  html.ygw-sheet body :is(.mall-wallet, .mall-tools, .market-actions, .daily-stats, .daily-progress) { margin-bottom: 4px !important; }
}

/* ---------- 10. phone service panels take the equipment column (owner: lock service drawn over the gear) ----------
   The client lays the touch inventory out as "equipment | bag". Its enhancement and synthesis services hide the
   equipment and draw into that column; lock, repair and the two pet services keep their desktop placement and land
   on top of the gear (native client gap, not caused by this skin). Here they behave like enhancement: the gear is
   hidden while the service is open (it returns by itself when the client removes the body class) and the panel
   fills the column. yg-windows.js measures the column (--ygs-svc-*: runtime values, real pixels, not theme tokens): the body is scaled by --ui-scale. */
html.mobile-hud-on body:is(.item-lock-open, .item-repair-open, .pet-service-open) :is(#equipGrid, #invPetSummon) {
  visibility: hidden !important; pointer-events: none !important;
}
html.mobile-hud-on.ygw-svc :is(.item-lock, .item-repair):not([hidden]) {
  position: fixed !important; box-sizing: border-box !important; transform-origin: 0 0 !important;
  left: calc(var(--ygs-svc-x) / var(--ui-scale, 1)) !important; top: calc(var(--ygs-svc-y) / var(--ui-scale, 1)) !important;
  width: var(--ygs-svc-w) !important; height: var(--ygs-svc-h) !important;
  transform: scale(calc(1 / var(--ui-scale, 1))) !important;
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 10px 10px !important;
  background: linear-gradient(#0b1a12e0, #0b1a12f0), var(--item-lock-background, none) 50% 34% / 118% auto no-repeat, #0b1a12 !important;
  border: 1px solid var(--ygw-gold-dim) !important; border-radius: 0 !important; box-shadow: 0 6px 18px #000a !important;
  font: 14px/1.4 var(--ygw-font) !important; color: var(--ygw-ink) !important; overflow: hidden !important;
}
html.mobile-hud-on.ygw-svc .item-lock:not([hidden]) {
  grid-template-rows: 30px 40px minmax(0, 1fr) auto 44px; grid-template-areas: "t t" "m1 m2" "s s" "msg msg" "ok no";
}
html.mobile-hud-on.ygw-svc .item-repair:not([hidden]) {
  grid-template-rows: 30px minmax(0, 1fr) 36px auto 44px; grid-template-areas: "t t" "s s" "c m" "msg msg" "ok no";
  background: linear-gradient(#0b1a12e0, #0b1a12f0), var(--item-repair-background, none) 50% 34% / 118% auto no-repeat, #0b1a12 !important;
}
html.mobile-hud-on.ygw-svc :is(.item-lock, .item-repair):not([hidden]) > * { position: relative !important; inset: auto !important; margin: 0 !important; min-width: 0; }
html.mobile-hud-on.ygw-svc :is(.item-lock-title, .item-repair-title) {
  grid-area: t; width: auto !important; height: 30px !important; padding: 0 44px 0 8px !important;
  color: var(--ygw-gold-hi) !important; font: bold 15px/30px var(--ygw-font) !important; text-align: center;
  border-bottom: 1px solid var(--ygw-gold-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html.mobile-hud-on.ygw-svc :is(.item-lock, .item-repair):not([hidden]) > :is(.item-lock-close, .item-repair-close) {
  position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; width: 44px !important; height: 44px !important;
  background: url(/ui-kit/close.png) center / 20px 20px no-repeat !important; border: 0 !important;
}
html.mobile-hud-on.ygw-svc .item-lock-mode {
  width: auto !important; height: 40px !important; border-radius: 0 !important; font: bold 14px var(--ygw-font) !important;
  color: var(--ygw-ink-dim) !important; background: #020a05 !important; border: 1px solid var(--ygw-gold-line) !important;
}
html.mobile-hud-on.ygw-svc .item-lock-mode.lock { grid-area: m1; }
html.mobile-hud-on.ygw-svc .item-lock-mode.unlock { grid-area: m2; }
html.mobile-hud-on.ygw-svc .item-lock-mode.active { color: var(--ygw-gold-hi) !important; border-color: var(--ygw-gold) !important; background: #13281c !important; }
/* slots: a calm row of 44 px wells instead of the chain diagram (the diagram stays as the faint backdrop) */
html.mobile-hud-on.ygw-svc :is(.item-lock-slots, .item-repair-slot) {
  grid-area: s; width: auto !important; height: auto !important; min-height: 0;
  display: flex !important; flex-wrap: wrap; align-content: center; justify-content: center; gap: 8px;
}
html.mobile-hud-on.ygw-svc .item-lock-slot, html.mobile-hud-on.ygw-svc .item-repair-slot > * {
  position: relative !important; inset: auto !important; width: 44px !important; height: 44px !important; flex: none;
  display: grid !important; place-items: center; background: #020a05cc !important; border: 1px solid var(--ygw-gold-dim) !important;
}
html.mobile-hud-on.ygw-svc :is(.item-lock-slot, .item-repair-slot) img { width: 36px !important; height: 36px !important; object-fit: contain; }
html.mobile-hud-on.ygw-svc :is(.item-lock-message, .item-repair-message) {
  grid-area: msg; width: auto !important; height: auto !important; min-height: 20px; text-align: center; color: var(--ygw-gold-hi) !important;
  font: 14px/20px var(--ygw-font) !important;
}
html.mobile-hud-on.ygw-svc :is(.item-repair-cost, .item-repair-money) {
  width: auto !important; height: 36px !important; display: flex !important; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 8px; background: #020a05 !important; border: 1px solid var(--ygw-gold-line); color: var(--ygw-gold-hi) !important;
  font: bold 14px var(--ygw-font) !important;
}
html.mobile-hud-on.ygw-svc .item-repair-cost { grid-area: c; }
html.mobile-hud-on.ygw-svc .item-repair-money { grid-area: m; }
html.mobile-hud-on.ygw-svc :is(.item-repair-cost, .item-repair-money)::before { color: var(--ygw-ink-dim); font-weight: normal; font-size: 13px; }
html.mobile-hud-on.ygw-svc .item-repair-cost::before { content: "ค่าใช้จ่าย"; }
html.mobile-hud-on.ygw-svc .item-repair-money::before { content: "เงินที่มี"; }
html.mobile-hud-on.ygw-svc:not([lang|=th]) .item-repair-cost::before { content: "Cost"; }
html.mobile-hud-on.ygw-svc:not([lang|=th]) .item-repair-money::before { content: "Money"; }
/* confirm / cancel: the art carried the words; here they are live text from the client's own aria-label */
html.mobile-hud-on.ygw-svc :is(.item-lock, .item-repair):not([hidden]) > :is(.item-lock-confirm, .item-lock-cancel, .item-repair-confirm, .item-repair-cancel) {
  width: auto !important; height: 44px !important; border-radius: 0 !important; display: grid !important; place-items: center;
  border: 1px solid var(--ygw-gold-dim) !important; background: #020a05 !important; color: var(--ygw-gold-hi) !important;
  font: bold 14px var(--ygw-font) !important;
}
html.mobile-hud-on.ygw-svc :is(.item-lock-confirm, .item-lock-cancel, .item-repair-confirm, .item-repair-cancel)::after { content: attr(aria-label); }
html.mobile-hud-on.ygw-svc :is(.item-lock, .item-repair):not([hidden]) > :is(.item-lock-confirm, .item-repair-confirm) { grid-area: ok; background: #8a3812 !important; border-color: var(--ygw-gold) !important; }
html.mobile-hud-on.ygw-svc :is(.item-lock, .item-repair):not([hidden]) > :is(.item-lock-cancel, .item-repair-cancel) { grid-area: no; }
html.mobile-hud-on.ygw-svc :is(.item-lock, .item-repair):not([hidden]) > :is(.item-lock-confirm, .item-repair-confirm):disabled { background: #1d1f18 !important; color: #8a927f !important; border-color: var(--ygw-gold-line) !important; }
/* pet services: the art keeps its aspect (no crop) and is centred; the column behind it shows the lacquer texture
   instead of empty space (the gear itself stays hidden) */
html.mobile-hud-on body.pet-service-open #equipGrid { visibility: visible !important; border: 1px solid var(--ygw-gold-dim) !important;
  background: var(--ygf-lacquer, #1a0c06) !important; box-shadow: var(--ygf-lacquer-shadow, inset 0 0 18px #000) !important; }
html.mobile-hud-on body.pet-service-open #equipGrid > * { visibility: hidden !important; }
/* pet services keep their own art, scaled to fit the column (yg-windows.js computes --ygs-svc-s and the origin) */
html.mobile-hud-on.ygw-svc :is(#petElixirService, #petStorageService):not([hidden]) {
  position: fixed !important; transform-origin: 0 0 !important; margin: 0 !important;
  left: calc(var(--ygs-svc-px) / var(--ui-scale, 1)) !important; top: calc(var(--ygs-svc-py) / var(--ui-scale, 1)) !important;
  transform: scale(calc(var(--ygs-svc-s) / var(--ui-scale, 1))) !important;
}

/* ---------- 11. item tooltip on phones (owner: details unreadable, about 8 px) ----------
   #invTip lives in the body that the touch HUD scales by --ui-scale (0.6-0.7 on phones). It is drawn at real size,
   15 px text, beside the item that was tapped instead of on it (yg-windows.js places it: --ygs-tip-x/y), and a tap
   elsewhere closes it. The item action sheet's detail text gets the same size. */
html.mobile-hud-on #invTip {
  transform: scale(calc(1 / var(--ui-scale, 1))) !important; transform-origin: 0 0 !important;
  width: max-content !important; min-width: 180px; max-width: min(340px, 46vw) !important; box-sizing: border-box !important;
  padding: 10px 12px !important; font: 15px/22px var(--ygw-font) !important;
  background: #07120ef2 !important; border: 1px solid var(--ygw-gold-dim) !important; box-shadow: 0 6px 18px #000c !important;
  max-height: calc(100vh - 16px); overflow: hidden;
}
html.mobile-hud-on #invTip.wide { max-width: min(560px, 92vw) !important; }
html.mobile-hud-on.ygw-tip-placed #invTip { left: calc(var(--ygs-tip-x) / var(--ui-scale, 1)) !important; top: calc(var(--ygs-tip-y) / var(--ui-scale, 1)) !important; }
html.mobile-hud-on #invTip * { font-size: 15px !important; line-height: 22px !important; }
html.mobile-hud-on #invTip .t-name { font-weight: bold; font-size: 16px !important; }
html.mobile-hud-on #invTip .t-spacer { height: 6px !important; line-height: 6px !important; }
html.mobile-hud-on #itemActionDetail, html.mobile-hud-on #itemActionDetail * { font-size: 15px !important; line-height: 22px !important; }

/* ---------- 12. phone service column: the art fills it (owner: "small, not full width") ----------
   The client draws enhancement, element, synthesis and their variants into the gear column with --cl-w = 72 % of the
   column and a fixed top. The art now takes the column width, or the free height when that is shorter (aspect kept),
   and sits centred in the band between the title and the cost fields. Slots, art and footer all derive from these
   variables, so every variant scales together. */
html.mobile-hud-on .item-enhancement {
  /* the art takes the column width (>= 95 %); the band below the title is the only height limit */
  --ygs-art-h: calc(100vh - var(--mw-edge-bottom) - var(--ie-top) - 34px);
  --cl-w: min(calc(var(--ie-w) - 6px), calc(var(--ygs-art-h) / 1.1429)) !important;
  --cl-x: calc(var(--ie-x) + (var(--ie-w) - var(--cl-w)) / 2) !important;
  --cl-y: calc(var(--ie-top) + 30px) !important;
}
/* the art's empty areas carry the controls, so nothing pushes it smaller: cost and money as two slim wells between the
   middle slot row and the bottom slot (either side of the centre connector), OK and Cancel either side of the bottom
   slot. Every rune slot stays uncovered. Positions are fractions of the art width, like the client's slot positions. */
html.mobile-hud-on .item-enhancement :is(.item-enhancement-cost, .item-enhancement-money) {
  z-index: 3 !important; top: calc(var(--cl-y) + var(--cl-w) * .70) !important; bottom: auto !important; height: 24px !important;
  padding: 0 6px !important; font-size: 12px !important; line-height: 22px !important; gap: 4px !important; white-space: nowrap; overflow: hidden;
}
/* money (often 9+ digits) gets the wider well; the cost well stays left of the connector */
html.mobile-hud-on .item-enhancement .item-enhancement-cost { left: calc(var(--cl-x) + var(--cl-w) * .02) !important; width: calc(var(--cl-w) * .36) !important; }
html.mobile-hud-on .item-enhancement .item-enhancement-money { left: calc(var(--cl-x) + var(--cl-w) * .40) !important; width: calc(var(--cl-w) * .58) !important; }
html.mobile-hud-on .item-enhancement :is(.item-enhancement-cost, .item-enhancement-money)::before { font-size: 12px !important; }
html.mobile-hud-on .item-enhancement :is(.item-enhancement-confirm, .item-enhancement-cancel) {
  z-index: 3 !important; top: calc(var(--cl-y) + var(--cl-w) * .93) !important; bottom: auto !important; height: 36px !important; min-height: 36px !important;
  width: calc(var(--cl-w) * .37) !important; overflow: visible !important;
}
html.mobile-hud-on .item-enhancement .item-enhancement-confirm { left: calc(var(--cl-x) + var(--cl-w) * .02) !important; }
html.mobile-hud-on .item-enhancement .item-enhancement-cancel { left: calc(var(--cl-x) + var(--cl-w) * .61) !important; }
/* 36 px drawn, 44 px to the finger */
html.mobile-hud-on .item-enhancement :is(.item-enhancement-confirm, .item-enhancement-cancel)::after { content: ""; position: absolute; inset: -4px 0; }
html.mobile-hud-on .item-enhancement .item-enhancement-result { top: calc(var(--cl-y) + var(--cl-w) * .58) !important; bottom: auto !important; }
/* fields: recessed wells; actions: the depth kit's plates (secondary jade, primary lacquer) */
html.mobile-hud-on :is(.item-enhancement .item-enhancement-cost, .item-enhancement .item-enhancement-money, .item-repair-cost, .item-repair-money) {
  background: var(--ygf-well, #050d08) !important; border: 1px solid var(--ygw-gold-line) !important; border-radius: 3px !important;
  box-shadow: var(--ygf-well-shadow, inset 0 2px 6px #000) !important;
}
html.mobile-hud-on :is(.item-enhancement-confirm, .item-enhancement-cancel, .item-lock-confirm, .item-lock-cancel, .item-repair-confirm, .item-repair-cancel) {
  height: 44px !important; border: 1px solid #00000000 !important; border-radius: 0 !important; background: var(--ygf-plate2, #0e2a17) !important;
  box-shadow: var(--ygf-drop, 0 3px 6px #000a) !important; color: var(--ygw-gold-hi) !important; text-shadow: 0 1px 0 #1a0700, 0 0 6px #000b !important;
  font: bold 14px var(--ygw-font) !important; transition: transform .12s, box-shadow .12s;
}
html.mobile-hud-on :is(.item-enhancement-confirm, .item-lock-confirm, .item-repair-confirm) { background: var(--ygf-plate1, #8a3812) !important; }
html.mobile-hud-on :is(.item-enhancement-confirm, .item-enhancement-cancel, .item-lock-confirm, .item-lock-cancel, .item-repair-confirm, .item-repair-cancel):active {
  transform: translateY(1px); box-shadow: var(--ygf-tint-press, inset 0 0 0 99px #0000004d) !important;
}
html.mobile-hud-on :is(.item-enhancement-confirm, .item-lock-confirm, .item-repair-confirm):disabled { opacity: .55; }
html.mobile-hud-on.ygw-svc :is(.item-lock, .item-repair):not([hidden]) > :is(.item-lock-confirm, .item-repair-confirm) { background: var(--ygf-plate1, #8a3812) !important; border-color: #00000000 !important; }
html.mobile-hud-on.ygw-svc :is(.item-lock, .item-repair):not([hidden]) > :is(.item-lock-cancel, .item-repair-cancel) { background: var(--ygf-plate2, #0e2a17) !important; border-color: #00000000 !important; }
html.mobile-hud-on.ygw-svc .item-lock-mode { border-radius: 3px !important; box-shadow: var(--ygf-socket-shadow, inset 0 2px 5px #000) !important; }
html.mobile-hud-on.ygw-svc .item-lock-mode.active { box-shadow: var(--ygf-socket-lit-shadow, inset 0 0 12px #e2bd6a66) !important; background: var(--ygf-socket-lit, #3b2c0f) !important; }
html.mobile-hud-on.ygw-svc .item-lock-slot, html.mobile-hud-on.ygw-svc .item-repair-slot > * { border-radius: 3px; box-shadow: var(--ygf-well-shadow, inset 0 2px 6px #000) !important; }

/* ---------- 13. one themed scrollbar in the whole game (owner: no white OS scrollbars) ----------
   Slim dark recessed track, gold thumb, no arrow buttons. Standard properties (Chrome 121+, Firefox) plus the
   -webkit- pseudo-elements for older engines. Touch scrolling is unchanged. Lists the owner wants without any
   bar keep scrollbar-width: none (more specific). */
html * { scrollbar-width: thin !important; scrollbar-color: var(--ygw-scroll-thumb) var(--ygw-scroll-track) !important; }
html ::-webkit-scrollbar { width: 8px; height: 8px; background: var(--ygw-scroll-track); }
html ::-webkit-scrollbar-track { background: var(--ygw-scroll-track); box-shadow: inset 0 0 3px #000; border-radius: 4px; }
html ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--ygw-scroll-thumb-hi), var(--ygw-scroll-thumb)); border: 1px solid #000; border-radius: 4px; }
html ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
html ::-webkit-scrollbar-corner { background: var(--ygw-scroll-track); }