/* ==========================================================================
   STARFALL ONLINE v3.10 — premium HUD (loaded last; layouts chosen by js/hud.js)
   body.ui-desk  mouse & keyboard · body.ui-land  touch landscape · body.ui-port  touch portrait (+ .ui-big tablets)
   Look: dark glass panels with a thin gold edge, round avatar and slots, glossy bars. No backdrop blur
   (it re-renders every game frame on phones), just layered gradients.
   ========================================================================== */
:root {
  --hg-bg: linear-gradient(180deg, rgba(36, 30, 70, .9) 0%, rgba(17, 14, 36, .88) 100%);
  --hg-bg2: linear-gradient(180deg, rgba(28, 23, 56, .8) 0%, rgba(12, 10, 26, .78) 100%);
  --hg-edge: linear-gradient(155deg, rgba(255, 223, 145, .9) 0%, rgba(255, 223, 145, .18) 28%, rgba(139, 124, 246, .28) 62%, rgba(255, 213, 120, .7) 100%);
  --hg-edge2: linear-gradient(155deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06) 45%, rgba(139, 124, 246, .3));
  --hg-shadow: 0 10px 26px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .09);
  --hg-gold: #f5cf73;
  --hg-gold2: #d99b33;
  --hg-text: #f3efff;
  --hg-dim: #b9b2dc;
  --hg-r: 16px;
}

/* ---------------------------------------------------------------- shared: glass frames */
body.ui #hud #hud-player, body.ui #hud #minimap-box, body.ui #hud #quest-tracker, body.ui #hud #bot-panel, body.ui #hud #gift-btn,
body.ui #hud #target-frame, body.ui #hud #party-frame, body.ui #hud #boss-dmg, body.ui #hud #skillbar, body.ui #hud #quickbar,
body.ui #hud #chat, body.ui #hud #menubar, body.ui #hud #chat-open-btn {
  background: var(--hg-bg) padding-box, var(--hg-edge) border-box !important;
  border: 1px solid transparent !important;
  border-radius: var(--hg-r) !important;
  box-shadow: var(--hg-shadow) !important;
  color: var(--hg-text);
}
body.ui #hud #quest-tracker, body.ui #hud #chat { background: var(--hg-bg2) padding-box, var(--hg-edge2) border-box !important; }

/* ---------------------------------------------------------------- player card */
body.ui #hud #hud-player { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; }
body.ui #hud #hud-avatar {
  width: 62px; height: 62px; flex: 0 0 auto; border: 0 !important; border-radius: 50% !important;
  background: radial-gradient(circle at 50% 35%, #4b3d9a, #171231 72%);
  box-shadow: 0 0 0 2px #1a1330, 0 0 0 4px var(--hg-gold), 0 0 0 5px rgba(0, 0, 0, .55), 0 0 18px rgba(245, 207, 115, .45);
}
body.ui #hud .hud-name { display: flex; align-items: center; gap: 6px; font: 600 15px/1.2 'Kanit', sans-serif; white-space: nowrap; overflow: hidden; text-shadow: 0 1px 2px #000; }
body.ui #hud #hud-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
body.ui #hud .lv-badge { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; font: 700 11px/1.35 'Kanit', sans-serif; color: #3b2400; background: linear-gradient(#fff0b8, #f0c050 55%, #c98a1f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 3px rgba(0, 0, 0, .55); }
body.ui #hud .class-badge { flex: 0 0 auto; font: 500 11px 'Kanit', sans-serif; color: var(--hg-dim); }
body.ui #hud .hp-col .bar { margin-top: 5px; }
body.ui #hud .hud-gold { margin-top: 6px; gap: 5px; font-size: 11.5px; }
body.ui #hud .hud-gold > span:first-child, body.ui #hud .diamonds-badge, body.ui #hud .prem-badge, body.ui #hud .points-badge {
  display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px; border-radius: 999px !important; font: 600 11px 'Kanit', sans-serif; white-space: nowrap;
}
body.ui #hud .hud-gold > span:first-child { color: #ffe29a; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 213, 120, .35); }
body.ui #hud .diamonds-badge { color: #bfefff; background: rgba(14, 116, 144, .35); border: 0; box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .55); }
body.ui #hud .points-badge { background: linear-gradient(#34d399, #059669); color: #fff; box-shadow: 0 0 10px rgba(52, 211, 153, .5); }
body.ui #hud #hud-cp { top: -11px; right: 14px; }

/* bars: rounded, glossy */
body.ui #hud .bar, body.ui #hud #expbar {
  border: 0 !important; border-radius: 999px !important; background: rgba(5, 4, 14, .75);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .09) !important; overflow: hidden;
}
body.ui #hud .bar { height: 14px; }
body.ui #hud .bar > div, body.ui #hud #expfill { position: relative; border-radius: 999px; }
body.ui #hud .bar > div::after, body.ui #hud #expfill::after { content: ''; position: absolute; left: 2px; right: 2px; top: 1px; height: 42%; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); }
body.ui #hud .bar.hp > div { background: linear-gradient(90deg, #b3123a, #f43f5e 55%, #ff8a7a) !important; box-shadow: 0 0 8px rgba(244, 63, 94, .55); }
body.ui #hud .bar.mp > div { background: linear-gradient(90deg, #1d4ed8, #3b82f6 55%, #67e8f9) !important; box-shadow: 0 0 8px rgba(59, 130, 246, .55); }
body.ui #hud .bar > span { font: 600 10px/14px 'Kanit', sans-serif; letter-spacing: .3px; }
body.ui #hud #expfill { background: linear-gradient(90deg, #b45309, #f59e0b 45%, #fde68a) !important; box-shadow: 0 0 10px rgba(245, 158, 11, .6); }
body.ui #hud #exptxt { font: 600 9.5px/10px 'Kanit', sans-serif; letter-spacing: .3px; }

/* buffs */
body.ui #hud #buff-bar { gap: 5px; }
body.ui #hud .buff { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #3b2f7a, #140f2b); border: 0; box-shadow: 0 0 0 1.5px var(--hg-gold), 0 2px 6px rgba(0, 0, 0, .5); }

/* target / status stack */
body.ui #hud #target-frame { padding: 7px 12px 9px; }
body.ui #hud #target-name { font: 600 13.5px 'Kanit', sans-serif; text-shadow: 0 1px 2px #000; }
body.ui #hud #target-frame .bar { height: 12px; }
body.ui #hud #event-banner { border-radius: 14px; border: 1px solid rgba(196, 181, 253, .7); background: linear-gradient(90deg, rgba(76, 29, 149, .92), rgba(30, 27, 75, .9)); box-shadow: 0 0 18px rgba(167, 139, 250, .4), 0 8px 20px rgba(0, 0, 0, .35); }

/* minimap */
body.ui #hud #minimap-box { padding: 8px; }
body.ui #hud .mm-head { align-items: center; font: 600 12px 'Kanit', sans-serif; color: #ffe8a8; }
body.ui #hud #minimap { display: block; margin: 0 auto; border-radius: 12px !important; border: 0; box-shadow: 0 0 0 1px rgba(255, 223, 145, .45), 0 0 0 3px rgba(0, 0, 0, .45), inset 0 0 12px rgba(0, 0, 0, .6) !important; }
body.ui #hud .mm-foot { font: 500 11px 'Kanit', sans-serif; color: var(--hg-dim); margin-top: 6px; }
body.ui #hud .mm-btn, body.ui #hud .mm-ch { height: 24px; min-width: 24px; border-radius: 999px !important; border: 0; background: rgba(255, 255, 255, .08) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important; color: #fff; font: 600 11px 'Kanit', sans-serif; }
body.ui #hud .mm-ch { padding: 0 8px; color: #ffe8a8; }
body.ui #hud .mm-btn:hover, body.ui #hud .mm-ch:hover { background: rgba(255, 223, 145, .22) !important; }

/* auto (bot), gift, quests */
body.ui #hud #bot-panel { padding: 6px; }
body.ui #hud .btn-bot { border-radius: 999px; border: 0; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font: 600 13px 'Kanit', sans-serif; }
body.ui #hud .btn-bot.active { background: linear-gradient(135deg, #047857, #10b981); box-shadow: 0 0 14px rgba(16, 185, 129, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
body.ui #hud .bot-cfg { border-radius: 50% !important; }
body.ui #hud #gift-btn { display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 13px 'Kanit', sans-serif; }
body.ui #hud #gift-btn.ready { background: linear-gradient(135deg, #db2777, #f472b6) padding-box, var(--hg-edge) border-box !important; box-shadow: 0 0 16px rgba(244, 114, 182, .6) !important; }
body.ui #hud #quest-tracker { padding: 9px 11px; }
body.ui #hud .qt-head { font: 600 12.5px 'Kanit', sans-serif; color: #ffe29a; padding-bottom: 5px; margin-bottom: 2px; border-bottom: 1px solid rgba(255, 223, 145, .2); }
body.ui #hud .qt-row { font-size: 12px; margin-top: 6px; }
body.ui #hud .qt-name { font-family: 'Kanit', sans-serif; }

/* skills & quick slots */
body.ui #hud #skillbar { gap: 6px; padding: 8px 10px; border-radius: 20px !important; }
body.ui #hud .sk {
  width: 52px; height: 52px; border: 0 !important; border-radius: 14px !important;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c, #6d5fd8) 38%, #221b48), #0d0a20 78%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c, #6d5fd8) 80%, #fff 20%), inset 0 -10px 14px rgba(0, 0, 0, .45), 0 3px 8px rgba(0, 0, 0, .45);
}
body.ui #hud .sk .ico-img { width: 38px; height: 38px; image-rendering: pixelated; }
body.ui #hud .sk .key { top: 2px; left: 3px; padding: 0 4px; border-radius: 6px; background: rgba(0, 0, 0, .55); font: 700 9.5px/13px 'Kanit', sans-serif; color: #ffe8a8; }
body.ui #hud .sk .mpc { font: 600 9px 'Kanit', sans-serif; }
body.ui #hud .sk .cd { border-radius: 0; }
body.ui #hud .sk.pot { --c: #e11d48; }
body.ui #hud .sk.pot[data-pot=mp] { --c: #2563eb; }
body.ui #hud .sk.dodge { --c: #22d3ee; }
body.ui #hud .sk:active { filter: brightness(1.35); }
body.ui #hud #quickbar { gap: 5px; padding: 5px 7px; border-radius: 14px !important; }
body.ui #hud .qs { border-radius: 11px; border: 0; background: radial-gradient(circle at 50% 30%, #2b2459, #0e0b22 80%); box-shadow: inset 0 0 0 1px rgba(255, 223, 145, .35), 0 2px 5px rgba(0, 0, 0, .4); }
body.ui #hud .qs.empty { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); opacity: .6; }

/* activity icons */
body.ui #hud #act-dock { gap: 6px 4px; }
body.ui #hud .dock-btn { width: 54px; height: auto; padding: 0; gap: 3px; background: none !important; box-shadow: none !important; }
body.ui #hud .dock-btn .pxi {
  width: 44px; height: 44px; padding: 9px; border-radius: 50%; image-rendering: pixelated;
  background: radial-gradient(circle at 50% 30%, #43368c, #171231 75%); box-shadow: 0 0 0 1.5px rgba(255, 223, 145, .75), 0 0 0 3px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .45);
  transition: transform .12s, box-shadow .15s;
}
body.ui #hud .dock-btn:hover { transform: none; filter: none; }
body.ui #hud .dock-btn:hover .pxi { transform: translateY(-2px) scale(1.06); box-shadow: 0 0 0 1.5px #fff1c2, 0 0 0 3px rgba(0, 0, 0, .45), 0 0 16px rgba(255, 223, 145, .55); }
body.ui #hud .dock-btn.on .pxi { background: radial-gradient(circle at 50% 30%, #7c5ce0, #2d2456 75%); }
body.ui #hud .dock-btn span { font: 600 10.5px/1.1 'Kanit', sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
body.ui #hud .dock-sys .pxi { background: radial-gradient(circle at 50% 30%, #334155, #0f172a 75%); }
body.ui #hud .dock-badge { top: -2px; right: 2px; box-shadow: 0 0 0 2px #140f2b; }
body.ui #hud #act-dock .dock-head { width: 22px; height: 22px; border-radius: 50%; padding: 0; font-size: 11px; background: rgba(20, 16, 44, .85); box-shadow: 0 0 0 1px rgba(255, 223, 145, .5); }

/* menu */
body.ui #hud #menubar button { border: 0 !important; border-radius: 14px !important; background: linear-gradient(180deg, rgba(64, 52, 128, .92), rgba(28, 22, 58, .92)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 223, 145, .22) !important; }
body.ui #hud #menubar button:hover { background: linear-gradient(180deg, rgba(96, 78, 190, .95), rgba(40, 31, 86, .95)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px var(--hg-gold), 0 0 14px rgba(255, 223, 145, .35) !important; }
body.ui #hud #menubar button.open { background: linear-gradient(180deg, rgba(124, 92, 224, .95), rgba(54, 40, 120, .95)) !important; box-shadow: inset 0 0 0 1px var(--hg-gold), 0 0 12px rgba(255, 223, 145, .35) !important; }
body.ui #hud #menubar button span { color: #eee9ff !important; font: 600 9.5px/1.1 'Kanit', sans-serif !important; text-shadow: 0 1px 2px #000 !important; }
body.ui #hud #menubar .mb-head, body.ui #hud #menubar .mb-cat { display: none; }
body.ui #hud #mobile-menu-toggle {
  display: flex; align-items: center; justify-content: center; padding: 0; width: 50px; height: 50px; border-radius: 16px; cursor: pointer;
  font-size: 22px; color: #ffe8a8; border: 1px solid transparent; background: linear-gradient(180deg, #6b4fd1, #2a1f63) padding-box, var(--hg-edge) border-box;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25); z-index: 61;
}
body.ui #hud.mobile-nav-open #mobile-menu-toggle { background: linear-gradient(180deg, #b91c1c, #5b1010) padding-box, var(--hg-edge) border-box; color: #fff; }
/* the full menu (every layout): a categorised sheet */
body.ui #hud.mobile-nav-open #menubar {
  display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 12px 14px 14px;
  overflow-y: auto; overscroll-behavior: contain; z-index: 60; flex-wrap: initial;
}
body.ui #hud.mobile-nav-open #menubar > button { display: flex !important; width: auto !important; height: 64px !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
body.ui #hud.mobile-nav-open #menubar > button img.mi { width: 26px; height: 26px; }
body.ui #hud.mobile-nav-open #menubar > button span { display: block !important; font-size: 10.5px !important; }
body.ui #hud.mobile-nav-open #menubar .mb-head { display: flex; grid-column: 1 / -1; align-items: baseline; gap: 10px; padding: 0 2px 4px; border-bottom: 1px solid rgba(255, 223, 145, .22); }
body.ui #hud.mobile-nav-open #menubar .mb-head b { font: 600 17px 'Kanit', sans-serif; color: #ffe29a; }
body.ui #hud.mobile-nav-open #menubar .mb-head small { color: var(--hg-dim); font-size: 11px; }
body.ui #hud.mobile-nav-open #menubar .mb-cat { display: block; grid-column: 1 / -1; margin-top: 4px; font: 600 12px 'Kanit', sans-serif; color: #d9d2ff; letter-spacing: .4px; }
body.ui #hud #mobile-close-panels { display: none !important; }
body.ui #hud.mobile-nav-open::before { content: ''; position: fixed; inset: 0; background: rgba(5, 3, 14, .5); z-index: 59; }

/* chat */
body.ui #hud #chat { overflow: hidden; }
body.ui #hud .chat-tabs { gap: 3px; padding: 6px 8px 4px; background: none; }
body.ui #hud .chat-tabs button { border-radius: 999px !important; padding: 3px 9px; font: 600 11px 'Kanit', sans-serif; color: var(--hg-dim); background: transparent; box-shadow: none; }
body.ui #hud .chat-tabs button.active { background: linear-gradient(180deg, #6d55d8, #3b2d8a); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
body.ui #hud .chat-actions { background: none; }
body.ui #hud .chat-min, body.ui #hud .chat-close { border-radius: 50%; width: 22px; height: 22px; background: rgba(255, 255, 255, .08); border: 0; }
body.ui #hud #chat-log { font-size: 12.5px; line-height: 1.5; padding: 2px 10px 4px; }
body.ui #hud #chat-form { background: rgba(0, 0, 0, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); padding: 6px 8px; gap: 5px; }
body.ui #hud #chat-ch, body.ui #hud #chat-to, body.ui #hud #chat-input { border-radius: 999px !important; background: rgba(0, 0, 0, .45) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important; padding-left: 10px; }
body.ui #hud #chat-send, body.ui #hud #emote-btn { border-radius: 999px !important; }
body.ui #hud #chat-open-btn { padding: 8px 14px; font: 600 13px 'Kanit', sans-serif; border-radius: 999px !important; }

/* misc overlays */
body.ui #close-all { border-radius: 999px; padding: 6px 16px; background: linear-gradient(180deg, #b91c1c, #6b0f0f); box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 200, 200, .45); }
body.ui .toast { border-radius: 14px !important; background: linear-gradient(180deg, rgba(36, 30, 70, .95), rgba(17, 14, 36, .95)) !important; box-shadow: inset 4px 0 0 #8b7ff0, 0 8px 22px rgba(0, 0, 0, .45) !important; border: 0 !important; }
body.ui .toast.error { box-shadow: inset 4px 0 0 #f87171, 0 8px 22px rgba(0, 0, 0, .45) !important; }
body.ui .toast.levelup { box-shadow: inset 4px 0 0 var(--hg-gold), 0 8px 22px rgba(0, 0, 0, .45) !important; }
body.ui .toast.quest, body.ui .toast.success { box-shadow: inset 4px 0 0 #34d399, 0 8px 22px rgba(0, 0, 0, .45) !important; }
body.ui #hud-restore { border-radius: 999px; }

/* ==========================================================================
   DESKTOP
   ========================================================================== */
body.ui-desk #hud #hud-player { position: absolute; top: 14px; left: 14px; right: auto; bottom: auto; width: 320px; }
body.ui-desk #hud #buff-bar { position: absolute; top: 152px; left: 16px; }
body.ui-desk #hud #top-stack > #party-frame { position: fixed; top: 192px; left: 14px; width: 210px; }
body.ui-desk #hud #top-stack > #boss-dmg { position: fixed; left: 236px; top: 192px; bottom: auto; }
body.ui-desk #hud #hud-right { position: absolute; top: 14px; right: 14px; width: 214px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 5; }
body.ui-desk #hud #hud-right > * { position: relative; top: auto; right: auto; left: auto; bottom: auto; width: auto; pointer-events: auto; }
body.ui-desk #hud #minimap-box.collapsed { width: auto; }
body.ui-desk #hud #quest-tracker { max-height: min(34vh, calc(100vh - 480px)); min-height: 0; }
body.ui-desk #hud #act-dock { position: absolute; top: 14px; right: 240px; display: grid; grid-template-columns: repeat(6, 54px); z-index: 6; }
body.ui-desk #hud #act-dock .dock-head { position: absolute; left: -26px; top: 12px; }
body.ui-desk #hud #act-dock.min { grid-template-columns: 22px; }
body.ui-desk #hud.no-mm #act-dock { right: 240px; }
body.ui-desk #hud #top-stack { top: 14px; left: 350px; right: 598px; width: auto; max-width: none; margin: 0; align-items: center; }
body.ui-desk #hud.no-dock #top-stack { right: 240px; }
/* bottom: skills centred, chat left, menu dock right, exp bar along the edge */
body.ui-desk #hud #expbar { left: 0; right: 0; bottom: 0; height: 12px; border-radius: 0 !important; }
body.ui-desk #hud #expfill { border-radius: 0 6px 6px 0; }
body.ui-desk #hud #skillbar { position: absolute; bottom: 20px; left: 50%; right: auto; top: auto; transform: translateX(-50%); }
body.ui-desk #hud .sk.pot[data-pot=hp] { margin-left: 10px; }
body.ui-desk #hud #quickbar { position: absolute; bottom: 96px; left: 50%; right: auto; top: auto; transform: translateX(-50%); }
body.ui-desk #hud #chat { position: absolute; left: 14px; bottom: 20px; right: auto; top: auto; width: clamp(280px, calc(50vw - 354px), 400px); }
body.ui-desk #hud #chat-log { height: 128px; }
body.ui-desk #hud #chat-open-btn { position: absolute; left: 14px; bottom: 20px; top: auto; }
body.ui-desk #hud #menubar { position: absolute; right: 78px; bottom: 20px; top: auto; left: auto; display: flex; gap: 6px; padding: 7px 8px; max-height: none; overflow: visible; }
body.ui-desk #hud #menubar > button { display: none; }
body.ui-desk #hud #menubar > button.mb-main { display: flex; width: 50px; height: 50px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
body.ui-desk #hud #menubar > button.mb-main img.mi { width: 24px; height: 24px; }
body.ui-desk #hud #mobile-menu-toggle { position: absolute; right: 14px; bottom: 27px; top: auto; }
body.ui-desk #hud.mobile-nav-open #menubar { right: 14px; bottom: 84px; width: 470px; max-height: calc(100vh - 110px); }
body.ui-desk #hud #bot-panel { display: flex; }
body.ui-desk #close-all { top: auto; bottom: 152px; }
body.ui-desk #loot-feed { right: 244px; bottom: 90px; left: auto; transform: none; }
body.ui-desk #prompts { top: 150px; right: 244px; left: auto; transform: none; }
/* narrower screens */
@media (max-width: 1439px) {
  body.ui-desk #hud .sk { width: 48px; height: 48px; }
  body.ui-desk #hud .sk .ico-img { width: 34px; height: 34px; }
  body.ui-desk #hud #skillbar { gap: 5px; padding: 7px 8px; }
  body.ui-desk #hud #quickbar { bottom: 88px; }
}
@media (max-width: 1279px) {
  body.ui-desk #hud #act-dock { grid-template-columns: repeat(2, 48px); gap: 6px; }
  body.ui-desk #hud #act-dock .dock-btn { width: 48px; }
  body.ui-desk #hud #act-dock .dock-btn span { display: none; }
  body.ui-desk #hud #top-stack { right: 356px; }
  body.ui-desk #hud #chat { bottom: 150px; width: 320px; }
  body.ui-desk #hud #chat-log { height: 108px; }
  body.ui-desk #hud #chat-open-btn { bottom: 150px; }
  body.ui-desk #hud #menubar > button.mb-main { width: 44px; height: 44px; }
  body.ui-desk #hud #menubar > button.mb-main span { display: none; }
  body.ui-desk #hud #menubar { right: 70px; }
  body.ui-desk #hud #mobile-menu-toggle { width: 46px; height: 46px; bottom: 25px; }
}
@media (max-width: 1100px) {
  body.ui-desk #hud #skillbar, body.ui-desk #hud #quickbar { left: 42%; }
  body.ui-desk #hud .sk { width: 42px; height: 42px; border-radius: 12px !important; }
  body.ui-desk #hud .sk .ico-img { width: 30px; height: 30px; }
  body.ui-desk #hud #skillbar { gap: 4px; padding: 6px; }
  body.ui-desk #hud #quickbar { bottom: 78px; }
  body.ui-desk #hud .qs { width: 34px; height: 34px; }
  body.ui-desk #hud #menubar > button.mb-main { width: 40px; height: 40px; }
  body.ui-desk #hud #menubar { right: 64px; gap: 4px; padding: 6px; }
}
@media (max-height: 700px) {
  body.ui-desk #hud #quest-tracker { max-height: calc(100vh - 470px); }
}

/* ==========================================================================
   TOUCH (phones & tablets) — shared
   ========================================================================== */
body.ui-touch {
  --cx: 64px; --cy: 62px;          /* centre of the attack button, from the right / bottom edge */
  --atk: 76px; --ss: 44px; --ps: 42px;
  --r1: 82px; --r2: 136px;
}
body.ui-touch #hud #expbar { left: 0; right: 0; bottom: 0; height: 5px; border-radius: 0 !important; }
body.ui-touch #hud #exptxt { display: none; }
body.ui-touch #hud #bot-panel, body.ui-touch #hud #act-dock, body.ui-touch #hud #mob-emote, body.ui-touch #hud #mob-dodge { display: none !important; }
body.ui-touch #hud #hud-right { display: contents; }
body.ui-touch #hud #mobile-actions { display: contents; }
body.ui-touch #hud #hud-player { position: absolute; top: 8px; left: 8px; right: auto; bottom: auto; gap: 9px; padding: 7px 10px 7px 7px; }
body.ui-touch #hud #hud-avatar { width: 46px; height: 46px; }
body.ui-touch #hud .hud-name { font-size: 13.5px; }
body.ui-touch #hud #hud-class { display: none; }
body.ui-touch #hud .hp-col .bar { height: 12px; margin-top: 4px; }
body.ui-touch #hud .hp-col .bar.mp { height: 10px; }
body.ui-touch #hud .bar > span { font-size: 9px; line-height: 12px; }
body.ui-touch #hud .hud-gold { margin-top: 4px; }
body.ui-touch #hud .hud-gold > span:first-child, body.ui-touch #hud .diamonds-badge, body.ui-touch #hud .points-badge { height: 18px; font-size: 10.5px; padding: 0 7px; }
body.ui-touch #hud .prem-badge { display: none; }
body.ui-touch #hud #hud-cp { top: -9px; right: 10px; transform: scale(.85); transform-origin: right center; }
body.ui-touch #hud #minimap-box { position: absolute; top: 8px; right: 8px; left: auto; bottom: auto; width: 132px; padding: 6px; }
body.ui-touch #hud #minimap { width: 118px; height: 118px; }
body.ui-touch #hud .mm-head { font-size: 10.5px; margin-bottom: 4px; }
body.ui-touch #hud .mm-range, body.ui-touch #hud .mm-foot { display: none; }
body.ui-touch #hud #minimap-box.collapsed { width: auto; }
/* round utility buttons: menu · auto · ride · gift · target */
body.ui-touch #hud #mobile-menu-toggle, body.ui-touch #hud #mob-auto, body.ui-touch #hud #mob-ride, body.ui-touch #hud #gift-btn, body.ui-touch #hud #mob-target {
  position: absolute; width: 46px; height: 46px; padding: 0; margin: 0; border-radius: 50% !important; font-size: 20px; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; top: auto; left: auto; right: auto; bottom: auto; transform: none;
}
body.ui-touch #hud #mob-auto, body.ui-touch #hud #mob-ride, body.ui-touch #hud #mob-target {
  color: #fff; border: 1px solid transparent !important; background: radial-gradient(circle at 50% 30%, #3e3386, #15102f 78%) padding-box, var(--hg-edge) border-box !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}
body.ui-touch #hud #mob-auto { background: radial-gradient(circle at 50% 30%, #0f9f74, #064e3b 78%) padding-box, var(--hg-edge) border-box !important; }
body.ui-touch #hud #mob-auto.active { box-shadow: 0 0 0 3px rgba(110, 231, 183, .65), 0 0 18px rgba(52, 211, 153, .8) !important; }
body.ui-touch #hud #gift-btn { width: 50px; height: 50px; gap: 0; }
body.ui-touch #hud #gift-btn .gift-ico { font-size: 18px; }
body.ui-touch #hud #gift-txt { font: 600 8.5px/1 'Kanit', sans-serif; margin-top: 1px; }
/* joystick */
body.ui-touch #hud #joystick { position: absolute; left: 18px; bottom: 22px; top: auto; right: auto; width: 124px; height: 124px; border: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .02) 38%, rgba(139, 124, 246, .16) 62%, rgba(255, 255, 255, .06) 70%);
  box-shadow: 0 0 0 2px rgba(255, 223, 145, .35), inset 0 0 22px rgba(139, 124, 246, .3); }
body.ui-touch #hud #joy-knob { left: 38px; top: 38px; width: 48px; height: 48px; border: 0;
  background: radial-gradient(circle at 40% 35%, #fff4cc, #f2c14e 45%, #b7791f 100%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 4px 12px rgba(0, 0, 0, .5), 0 0 16px rgba(245, 207, 115, .55); }
/* attack button + arc skill pad (the skill bar becomes a zero-size anchor at the attack button's centre) */
body.ui-touch #hud #mob-attack {
  position: absolute; right: calc(var(--cx) - var(--atk) / 2); bottom: calc(var(--cy) - var(--atk) / 2); top: auto; left: auto;
  width: var(--atk); height: var(--atk); border-radius: 50%; font-size: calc(var(--atk) * .4); z-index: 8;
  border: 2px solid rgba(255, 223, 145, .85) !important; color: #fff;
  background: radial-gradient(circle at 50% 30%, #ff6b6b, #b91c1c 55%, #5b0b0b) !important;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .5), 0 0 24px rgba(248, 113, 113, .45), inset 0 2px 0 rgba(255, 255, 255, .35) !important;
}
body.ui-touch #hud #mob-attack:active { transform: scale(.94); }
body.ui-touch #hud #mob-target { right: calc(var(--cx) - (var(--r1) + 4px) * .5 - 20px); bottom: calc(var(--cy) + (var(--r1) + 4px) * .866 - 20px); width: 40px; height: 40px; font-size: 17px; }
body.ui-touch #hud #skillbar {
  position: absolute; right: var(--cx); bottom: var(--cy); left: auto; top: auto; width: 0; height: 0; padding: 0; gap: 0; transform: none;
  display: block; background: none !important; box-shadow: none !important; border: 0 !important; overflow: visible; max-width: none; z-index: 7;
}
body.ui-touch #hud #skillbar .sk {
  position: absolute; left: calc(cos(var(--a)) * var(--r)); top: calc(sin(var(--a)) * var(--r)); margin: calc(var(--ss) / -2) 0 0 calc(var(--ss) / -2);
  width: var(--ss); height: var(--ss); border-radius: 50% !important; transform: none;
}
body.ui-touch #hud #skillbar .sk .ico-img { width: calc(var(--ss) * .68); height: calc(var(--ss) * .68); }
body.ui-touch #hud #skillbar .sk .key { display: none; }
body.ui-touch #hud #skillbar .sk .mpc { right: 50%; transform: translateX(50%); bottom: -1px; font-size: 8.5px; }
body.ui-touch #hud #skillbar .sk .lock { border-radius: 50%; font-size: 9px; }
body.ui-touch #hud #skillbar .sk .cdt { font-size: 14px; }
body.ui-touch #hud #skillbar .sk[data-skill]:nth-child(1) { --a: 192deg; --r: var(--r1); }
body.ui-touch #hud #skillbar .sk[data-skill]:nth-child(2) { --a: 231deg; --r: var(--r1); }
body.ui-touch #hud #skillbar .sk[data-skill]:nth-child(3) { --a: 270deg; --r: var(--r1); }
body.ui-touch #hud #skillbar .sk[data-skill]:nth-child(4) { --a: 186deg; --r: var(--r2); }
body.ui-touch #hud #skillbar .sk[data-skill]:nth-child(5) { --a: 206deg; --r: var(--r2); }
body.ui-touch #hud #skillbar .sk[data-skill]:nth-child(6) { --a: 226deg; --r: var(--r2); }
body.ui-touch #hud #skillbar .sk[data-skill]:nth-child(7) { --a: 246deg; --r: var(--r2); }
body.ui-touch #hud #skillbar .sk[data-skill]:nth-child(8) { --a: 266deg; --r: var(--r2); }
body.ui-touch #hud #skillbar .sk[data-skill]:nth-child(9) { --a: 286deg; --r: var(--r2); }
body.ui-touch #hud #skillbar .sk[data-skill]:nth-child(n+10) { display: none; }
/* potions + dodge: a row along the bottom edge, left of the attack button */
body.ui-touch #hud #skillbar .sk.dodge, body.ui-touch #hud #skillbar .sk.pot { top: calc(var(--cy) - 10px - var(--ps)); margin: 0; width: var(--ps); height: var(--ps); }
body.ui-touch #hud #skillbar .sk.dodge { left: calc(var(--atk) / -2 - 12px - var(--ps)); }
body.ui-touch #hud #skillbar .sk.pot[data-pot=hp] { left: calc(var(--atk) / -2 - 20px - var(--ps) * 2); }
body.ui-touch #hud #skillbar .sk.pot[data-pot=mp] { left: calc(var(--atk) / -2 - 28px - var(--ps) * 3); }
body.ui-touch #hud #skillbar .sk.pot img { width: 26px; height: 26px; }
body.ui-touch #hud #skillbar .sk .cnt { right: 50%; transform: translateX(50%); bottom: -2px; font: 600 9px 'Kanit', sans-serif; }
body.ui-touch #hud #skillbar .sk.dodge .dodge-ico { font-size: 18px; }
/* chat: two-line peek, tap to open */
body.ui-touch #hud #chat { position: absolute; top: auto; right: auto; z-index: 30; }
body.ui-touch #hud #chat.peek { width: min(250px, 42vw); background: linear-gradient(180deg, rgba(14, 11, 30, .55), rgba(14, 11, 30, .7)) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .3) !important; border: 0 !important; border-radius: 12px !important; cursor: pointer; }
body.ui-touch #hud #chat.peek .chat-tabs, body.ui-touch #hud #chat.peek #chat-form { display: none; }
body.ui-touch #hud #chat.peek #chat-log { display: block; height: 38px; overflow: hidden; padding: 3px 9px; font-size: 11px; line-height: 1.45; pointer-events: none; }
body.ui-touch #hud #chat.peek::after { content: '💬'; position: absolute; right: 6px; bottom: 4px; font-size: 12px; opacity: .8; }
body.ui-touch #hud #chat.kb { position: fixed; top: 6px; bottom: auto; left: 6px; right: 6px; width: auto; transform: none; z-index: 13000; }
body.ui-touch #hud #chat:not(.peek):not(.kb) { left: 50%; transform: translateX(-50%); bottom: 12px; width: min(460px, 94vw); z-index: 40; }
body.ui-touch #hud #chat:not(.peek):not(.kb) #chat-log { height: min(32vh, 170px); }
body.ui-touch #hud #chat-open-btn { position: absolute; top: auto; right: auto; }
body.ui-touch #hud #quest-tracker { display: block; position: absolute; right: auto; bottom: auto; padding: 7px 9px; }
body.ui-touch #hud .qt-head { font-size: 11.5px; }
body.ui-touch #hud .qt-row { font-size: 11px; margin-top: 4px; }
body.ui-touch #hud #quickbar { position: absolute; top: auto; right: auto; transform: none; gap: 4px; padding: 4px 6px; display: flex !important; flex-wrap: nowrap; grid-template-columns: none; width: auto; height: auto; max-width: none; }
body.ui-touch #hud #quickbar:not(:has(.qs:not(.empty))) { display: none !important; }
body.ui-touch #hud .qs { width: 36px; height: 36px; }
body.ui-touch #hud .qs.empty { display: none; }
body.ui-touch #hud .qs .key { display: none; }
body.ui-touch #hud #top-stack { position: absolute; margin: 0; max-width: none; min-width: 0; width: auto; }
body.ui-touch #hud #top-stack > #target-frame { width: min(260px, 100%); }
body.ui-touch #hud #party-frame .dps-meter-wrap, body.ui-touch #hud #party-frame .pf-dps-btn, body.ui-touch #hud #party-frame .bar.mp { display: none; }
/* full menu as a centred sheet */
body.ui-touch #hud #menubar { display: none; }
body.ui-touch #hud.mobile-nav-open #menubar { position: fixed; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(560px, 94vw); max-height: 86dvh; }
body.ui-touch #close-all { top: auto; left: 50%; transform: translateX(-50%); }

/* ==========================================================================
   TOUCH · LANDSCAPE PHONES
   ========================================================================== */
body.ui-land #hud #hud-player { width: 236px; }
body.ui-land #hud #buff-bar { position: absolute; top: 84px; left: 10px; }
body.ui-land #hud #minimap-box { width: 124px; }
body.ui-land #hud #minimap { width: 110px; height: 110px; }
body.ui-land #hud #mobile-menu-toggle { top: 8px; right: 142px; }
body.ui-land #hud #mob-auto { top: 8px; right: 194px; }
body.ui-land #hud #mob-ride { top: 8px; right: 246px; }
body.ui-land #hud #gift-btn { top: 6px; right: 298px; }
body.ui-land #hud #top-stack { top: 8px; left: 254px; right: 356px; align-items: center; }
body.ui-land #hud #quest-tracker { top: 118px; left: 8px; width: 196px; max-height: calc(100dvh - 118px - 172px); }
body.ui-land #hud #top-stack > #party-frame { position: fixed; top: 118px; left: 212px; width: 150px; max-height: calc(100dvh - 300px); overflow-y: auto; }
body.ui-land #hud #quickbar { left: 160px; bottom: 58px; }
body.ui-land #hud #chat.peek { left: 160px; bottom: 10px; }
body.ui-land #hud #chat-open-btn { left: 160px; bottom: 10px; }
body.ui-land #hud #joystick { bottom: 18px; left: 16px; }
body.ui-land #hud.mobile-nav-open #menubar { grid-template-columns: repeat(8, 1fr); width: min(720px, 94vw); }
body.ui-land #hud.mobile-nav-open #menubar > button { height: 56px !important; }
body.ui-land #close-all { bottom: 110px; }
body.ui-land #toasts { top: 22%; }
body.ui-land #loot-feed { left: 50%; right: auto; top: 58%; bottom: auto; transform: translateX(-50%); }
body.ui-land #prompts { top: 64px; left: 50%; right: auto; transform: translateX(-50%); }

/* ==========================================================================
   TOUCH · PORTRAIT PHONES
   ========================================================================== */
body.ui-port { --cx: 70px; --cy: 84px; --atk: 80px; --ss: 48px; --ps: 44px; --r1: 88px; --r2: 146px; }
body.ui-port #hud #hud-player { width: calc(100vw - 166px); max-width: 250px; }
body.ui-port #hud .hud-gold .diamonds-badge { display: none; }
body.ui-port #hud #buff-bar { position: absolute; top: 100px; left: 10px; }
body.ui-port #hud #mobile-menu-toggle { top: 162px; right: 10px; }
body.ui-port #hud #mob-auto { top: 216px; right: 10px; }
body.ui-port #hud #mob-ride { top: 270px; right: 10px; }
body.ui-port #hud #gift-btn { top: 322px; right: 8px; }
body.ui-port #hud #top-stack { top: 176px; left: 8px; right: 66px; align-items: stretch; }
body.ui-port #hud #top-stack > #target-frame { width: auto; }
body.ui-port #hud #top-stack > #party-frame { order: 3; position: static; width: auto; }
body.ui-port #hud #quest-tracker { top: 44vh; left: 8px; width: min(170px, 44vw); max-height: 22vh; }
body.ui-port #hud #quickbar { right: 8px; left: auto; transform: none; bottom: calc(var(--cy) + var(--r2) + var(--ss) / 2 + 12px); }
body.ui-port #hud #chat.peek { left: 8px; bottom: calc(var(--cy) + 140px); width: min(168px, 42vw); }
body.ui-port #hud #chat-open-btn { left: 8px; bottom: calc(var(--cy) + 140px); }
body.ui-port #hud #joystick { left: 16px; bottom: calc(var(--cy) + 6px); }
body.ui-port #hud.mobile-nav-open #menubar { grid-template-columns: repeat(4, 1fr); }
body.ui-port #close-all { bottom: calc(var(--cy) + var(--r2) + 80px); }
body.ui-port #toasts { top: 30%; }
body.ui-port #loot-feed { left: 50%; right: auto; top: 58%; bottom: auto; transform: translateX(-50%); }
body.ui-port #prompts { top: 30%; left: 50%; right: auto; transform: translateX(-50%); }

/* short / narrow portrait phones (e.g. 360×640) */
@media (max-height: 700px), (max-width: 374px) {
  body.ui-port { --cx: 58px; --cy: 66px; --atk: 70px; --ss: 42px; --ps: 40px; --r1: 76px; --r2: 124px; }
  body.ui-port #hud #joystick { width: 110px; height: 110px; left: 10px; bottom: calc(var(--cy) + 2px); }
  body.ui-port #hud #joy-knob { left: 33px; top: 33px; width: 44px; height: 44px; }
  body.ui-port #hud #chat.peek, body.ui-port #hud #chat-open-btn { bottom: calc(var(--cy) + 122px); }
  body.ui-port #hud #quest-tracker { top: 36vh; max-height: 18vh; }
  body.ui-port #hud #top-stack { top: 168px; }
  body.ui-port #hud #mobile-menu-toggle, body.ui-port #hud #mob-auto, body.ui-port #hud #mob-ride { width: 42px; height: 42px; }
  body.ui-port #hud #mob-auto { top: 210px; } body.ui-port #hud #mob-ride { top: 258px; } body.ui-port #hud #gift-btn { top: 306px; width: 46px; height: 46px; }
}

/* tablets: the same layouts, larger */
body.ui-touch.ui-big { --atk: 92px; --ss: 56px; --ps: 50px; --r1: 100px; --r2: 168px; --cx: 84px; --cy: 88px; }
body.ui-big #hud #hud-player { width: 320px; max-width: none; }
body.ui-big #hud #minimap-box { width: 176px; }
body.ui-big #hud #minimap { width: 162px; height: 162px; }
body.ui-big #hud .diamonds-badge { display: inline-flex !important; }
body.ui-big.ui-port #hud #mobile-menu-toggle { top: 206px; }
body.ui-big.ui-port #hud #mob-auto { top: 262px; }
body.ui-big.ui-port #hud #mob-ride { top: 318px; }
body.ui-big.ui-port #hud #gift-btn { top: 372px; }
body.ui-big #hud #chat.peek { width: 300px; }
body.ui-big #hud #quest-tracker { width: 220px; }
body.ui-big.ui-port #hud #top-stack { top: 226px; }

/* ==========================================================================
   v3.10 phones: nothing may cover the play field — compact party, target, quests, toasts and drops
   ========================================================================== */
/* quest tracker: foldable everywhere (js/hud.js adds the ▾ button) */
body.ui #hud .qt-head { display: flex; align-items: center; gap: 6px; }
body.ui #hud .qt-head .qt-toggle { margin-left: auto; flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #ffe8a8; font-size: 11px; line-height: 1; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 223, 145, .35); }
body.ui #hud .qt-head .qt-count { flex: 0 0 auto; min-width: 18px; padding: 0 5px; border-radius: 999px; background: rgba(245, 207, 115, .22); color: #ffe8a8; font: 700 10.5px/16px 'Kanit', sans-serif; text-align: center; }
body.ui #hud #quest-tracker.folded { cursor: pointer; }
body.ui #hud #quest-tracker.folded .qt-row, body.ui #hud #quest-tracker.folded .qt-empty { display: none; }
body.ui #hud #quest-tracker.folded .qt-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
body.ui #hud #quest-tracker.folded { width: auto; }

body.ui-touch #hud .qt-head small, body.ui-touch #hud .qt-cat { display: none; }
body.ui-touch #hud #quest-tracker { padding: 5px 8px; overflow-y: auto; overscroll-behavior: contain; }
body.ui-touch #hud .qt-head { font-size: 11px; padding-bottom: 3px; }
body.ui-touch #hud .qt-row { font-size: 10.5px; margin-top: 3px; line-height: 1.3; }
body.ui-touch #hud .qt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
body.ui-touch #hud .qt-prog { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui-port #hud #quest-tracker { top: 40vh; width: min(158px, 42vw); max-height: 92px; }
body.ui-land #hud #quest-tracker { width: 180px; max-height: min(92px, calc(100dvh - 118px - 172px)); }
body.ui-big #hud #quest-tracker { max-height: 150px; }

/* party frame: names + thin HP only */
body.ui-touch #hud #party-frame { padding: 4px 7px 5px; border-radius: 12px !important; }
body.ui-touch #hud #party-frame .pf-title { font-size: 10.5px; margin-bottom: 1px; }
body.ui-touch #hud #party-frame .pf-row { padding: 1px 2px; }
body.ui-touch #hud #party-frame .pf-name { font-size: 10px; line-height: 1.25; }
body.ui-touch #hud #party-frame .bar { height: 5px; margin-top: 1px; }
body.ui-touch #hud #party-frame .bar > span { display: none; }
body.ui-port #hud #top-stack > #party-frame { align-self: flex-start; width: min(150px, 40vw); order: 3; }
body.ui-land #hud #top-stack > #party-frame { width: 140px; }
/* target (monster HP): a slim centred bar */
body.ui-touch #hud #top-stack > #target-frame { align-self: center; width: min(210px, 100%); padding: 3px 10px 5px; border-radius: 12px !important; }
body.ui-touch #hud #target-name { font-size: 11px; }
body.ui-touch #hud #target-frame .bar { height: 9px; margin-top: 2px; }
body.ui-touch #hud #target-frame .bar > span { font-size: 8px; line-height: 9px; }
body.ui-touch #hud #event-banner { align-self: center; padding: 3px 10px; font-size: 11px; gap: 6px; max-width: 100%; }
body.ui-touch #hud #event-banner .eb-ico { font-size: 15px; }
body.ui-touch #hud #event-banner small { display: none; }
body.ui-touch #hud #boss-dmg { align-self: flex-start; width: min(170px, 46vw); font-size: 10px; padding: 4px 6px; }
/* toasts and drop cards */
body.ui-touch #toasts { width: min(330px, 86vw); gap: 3px; }
body.ui-touch .toast { padding: 4px 11px; font-size: 11px; line-height: 1.35; border-radius: 10px !important; }
body.ui-touch #toasts .toast:nth-last-child(n+3) { display: none; }
body.ui-port #toasts { top: 24%; }
body.ui-touch .drop-card { min-width: 0; max-width: 46vw; gap: 5px; padding: 2px 8px 2px 2px; font-size: 10.5px; }
body.ui-touch .drop-card img { width: 22px; height: 22px; }
body.ui-port #loot-feed { left: auto; right: 8px; top: 384px; bottom: auto; transform: none; align-items: flex-end; max-height: 96px; overflow: hidden; }
body.ui-land #loot-feed { left: 50%; right: auto; top: 30%; bottom: auto; transform: translateX(-50%); max-height: 70px; overflow: hidden; }
@media (max-height: 700px), (max-width: 374px) { body.ui-port #loot-feed { top: 356px; max-height: 60px; } body.ui-port #hud #quest-tracker { top: 36vh; max-height: 74px; } }
/* skills that are not learned yet stay out of the way; chat button is just an icon */
body.ui-touch #hud #skillbar .sk.locked { display: none; }
body.ui-touch #hud #chat-open-btn { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50% !important; font-size: 17px; }
body.ui-touch #hud #chat-open-btn span { display: none; }
body.ui-touch #hud #chat-open-btn.hidden { display: none; }

/* phones: the folded quest tracker is one more round button (📜 + count); opened, it drops next to it */
body.ui-touch #hud #quest-tracker.folded { width: 46px; height: 46px; padding: 0; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; overflow: visible; max-height: none; }
body.ui-touch #hud #quest-tracker.folded .qt-head { font-size: 0; gap: 0; padding: 0; }
body.ui-touch #hud #quest-tracker.folded .qt-head::before { content: '📜'; font-size: 19px; line-height: 1; }
body.ui-touch #hud #quest-tracker.folded .qt-toggle { display: none; }
body.ui-touch #hud #quest-tracker.folded .qt-count { position: absolute; top: -4px; right: -4px; background: #ef4444; color: #fff; box-shadow: 0 0 0 2px #140f2b; }
body.ui-port #hud #quest-tracker { top: 214px; right: 62px; left: auto; bottom: auto; width: 168px; max-height: 110px; }
body.ui-port #hud #quest-tracker.folded { top: 162px; right: 62px; }
body.ui-port #hud #top-stack { right: 116px; }
body.ui-land #hud #quest-tracker { top: 58px; right: 300px; left: auto; bottom: auto; width: 190px; max-height: min(110px, calc(100dvh - 240px)); }
body.ui-land #hud #quest-tracker.folded { top: 8px; right: 352px; }
body.ui-land #hud #top-stack { right: 406px; }
body.ui-land #hud #top-stack > #party-frame { position: fixed; top: 118px; left: 8px; width: 140px; max-height: calc(100dvh - 118px - 160px); overflow-y: auto; }
body.ui-big.ui-port #hud #quest-tracker.folded { top: 206px; right: 66px; }
body.ui-big.ui-port #hud #quest-tracker { top: 262px; right: 66px; width: 230px; max-height: 170px; }
@media (max-height: 700px), (max-width: 374px) {
  body.ui-port #hud #quest-tracker { top: 212px; right: 58px; max-height: 96px; }
  body.ui-port #hud #quest-tracker.folded { top: 162px; right: 58px; width: 42px; height: 42px; }
}
/* toasts sit where nothing else lives: under the feet (portrait), under the top row (landscape) */
body.ui-port #toasts { top: calc(50% + 64px); }
body.ui-land #toasts { top: 58px; }
/* target bar: readable numbers */
body.ui-touch #hud #target-frame .bar { height: 11px; }
body.ui-touch #hud #target-frame .bar > span { font-size: 8.5px; line-height: 11px; }
@media (max-height: 700px), (max-width: 374px) { body.ui-port #toasts { top: calc(50% + 40px); } }
/* ---------------------------------------------------------------- v3.11 tower bar */
#tw-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; padding: 5px 12px; border-radius: 12px; font-size: 13px; color: #fef3c7; white-space: nowrap;
  background: linear-gradient(180deg, rgba(41, 24, 8, .92), rgba(20, 12, 6, .94)); border: 1px solid rgba(251, 191, 36, .55); box-shadow: 0 4px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(6px); }
#tw-bar.boss { border-color: #f87171; box-shadow: 0 0 16px rgba(248, 113, 113, .45), inset 0 1px 0 rgba(255, 255, 255, .08); }
#tw-bar .twb-name b { font: 700 17px 'Kanit', sans-serif; color: #fde047; margin: 0 1px 0 3px; } #tw-bar .twb-name small { color: #d6c7a1; }
#tw-bar .twb-tier { padding: 0 8px; border-radius: 999px; font-weight: 700; font-size: 11.5px; color: var(--tc); border: 1px solid var(--tc); background: rgba(0, 0, 0, .35); }
#tw-bar .twb-lv { color: #d6c7a1; font-size: 12px; }
#tw-bar .twb-mobs, #tw-bar .twb-time { font-weight: 700; font-variant-numeric: tabular-nums; }
#tw-bar .twb-time.low { color: #fca5a5; animation: twb-blink 1s steps(2) infinite; }
#tw-bar .twb-st { font-weight: 700; } #tw-bar .twb-st.ok { color: #86efac; } #tw-bar .twb-st.bad { color: #fca5a5; }
#tw-bar .btn { padding: 1px 8px; font-size: 11.5px; }
@keyframes twb-blink { 50% { opacity: .45; } }
body.ui-touch #hud #tw-bar { font-size: 11.5px; gap: 2px 7px; padding: 3px 9px; border-radius: 10px; }
body.ui-touch #hud #tw-bar .twb-name b { font-size: 14px; }
body.ui-touch #hud #tw-bar .twb-lv { display: none; }
body.ui-port #hud #tw-bar { align-self: center; flex-wrap: nowrap; gap: 2px 6px; padding: 3px 7px; }
body.ui-port #hud #tw-bar .twb-name small, body.ui-port #hud #tw-bar .twb-lbl { display: none; }
body.ui-port #hud #tw-bar .btn { padding: 1px 5px; }

.seg.seg3 { grid-template-columns: repeat(3, 1fr); }
body.ui #hud .qt-head small { display: none; }