/* แถบ "เป้าหมายตอนนี้" บนจอสัมผัส = แผงโปร่งสีเข้มแบบกล่องแชท (1 ต.ค. — ผู้ใช้: "การ์ดยาวดูรก · ทำเป็นกรอบใส ๆ เหมือนกรอบแชท")
 * เกมมือถือแนวนี้ทำตัวติดตามเควสต์เป็นแผงโปร่งตัวหนังสือขาวชิดซ้าย ฉากยังมองทะลุได้
 * 1 ต.ค. (ผู้ใช้): คอมใช้แบบเดียวกันด้วย — คอลัมน์ซ้ายของคอมทุกแถวกว้างเท่าแถว Lv/Gold (256px · ขอบ 14px)
 * โหลดหลัง ui-astra.css/ui-goal.css · specificity เท่ากัน (html body #goal…) จึงชนะด้วยลำดับไฟล์ */
html body #goal, html body #goal.min, html body #goal:not(.min) {
  color: #fff !important; background: rgba(16, 24, 32, .56) !important; border: 1px solid rgba(255, 255, 255, .16) !important;
  border-image: none !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/* ย่อ: บรรทัดเดียว สั้นพอไม่ลากยาวข้ามจอ */
html body #goal.min {
  width: auto !important; max-width: min(250px, 64vw) !important; height: 30px !important; min-height: 30px !important;
  padding: 0 !important; border-radius: 10px !important;
}
html body #goal.min > .body { padding: 0 6px 0 7px !important; gap: 5px !important; }
html body #goal.min .body::before { content: none !important; }
html body #goal.min #goal-icon { width: 18px !important; height: 18px !important; font-size: 15px !important; }
html body #goal.min #goal-txt { color: #fff !important; font-size: 12.5px !important; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .5) !important; }
html body #goal.min > .body::after, html body #goal.min .body::after {
  content: '›' !important; width: 18px !important; height: 18px !important; flex: 0 0 18px !important; margin-left: 2px;
  background: rgba(255, 255, 255, .16) !important; color: #ffe7a8 !important; box-shadow: none !important; font: 700 15px/1 var(--font-head, inherit) !important;
}
/* กาง: แผงโปร่งขนาดพอดี ยึดมุมเดิม ไม่ใช่การ์ดกระดาษใหญ่กลางจอ */
html body #goal:not(.min) {
  width: min(78vw, 300px) !important; max-width: min(78vw, 300px) !important; border-radius: 12px !important;
  background: rgba(16, 24, 32, .74) !important; max-height: calc((100dvh - var(--hz-goal-t, 200px) - 12px) / var(--ui, 1));   /* --hz-goal-t: ui-root.js · หาร --ui เพราะอยู่ในโซนที่ zoom */
}
html body #goal:not(.min) > header {
  min-height: 32px !important; padding: 2px 6px 2px 10px !important; background: transparent !important;
  border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .12) !important; color: #f3d98e;
  font: 700 12.5px/1.2 var(--font-head, inherit);
}
html body #goal:not(.min) #goal-min {
  min-height: 26px !important; padding: 2px 9px !important; color: #fff !important; background: rgba(255, 255, 255, .12) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important; font-size: 12px !important;
}
html body #goal:not(.min) > .body { grid-template-columns: 32px minmax(0, 1fr) !important; gap: 4px 8px !important; padding: 8px 10px !important; }
html body #goal:not(.min) #goal-icon { width: 32px !important; height: 32px !important; background: rgba(255, 255, 255, .1) !important; border: 0 !important; }
html body #goal:not(.min) #goal-txt { color: #fff !important; font-size: 14px !important; line-height: 1.4 !important; }
html body #goal:not(.min) #goal-sub { color: #d6e0e6 !important; font-size: 12.5px !important; line-height: 1.5 !important; }
html body #goal:not(.min) .gfoot { gap: 5px !important; padding: 0 10px 10px !important; grid-template-columns: 1fr 1fr !important; }
html body #goal:not(.min) .gfoot button {
  min-height: 36px !important; padding: 4px 6px !important; font-size: 12.5px !important; color: #fff !important;
  background: rgba(255, 255, 255, .1) !important; border: 1px solid rgba(255, 255, 255, .22) !important; border-radius: 8px !important;
}
html body #goal:not(.min) #goal-act {
  grid-column: 1 / -1 !important; background: linear-gradient(#3f8584, #2f6f73) !important; border-color: #5fa3a1 !important; font-weight: 700;
}
/* แนวนอน: ยึดขวาปุ่มเมนู/แชทตามเดิม ไม่กางเป็นแผ่นกว้าง 460px กลางจอ */
html.touch-ui.land body #goal:not(.min) { width: min(46vw, 330px) !important; max-width: min(46vw, 330px) !important; max-height: calc((100dvh - var(--hz-goal-t, 200px) - 8px) / var(--ui, 1)) !important; }
html.touch-ui.land body #goal:not(.min) .gfoot { grid-template-columns: 1.2fr 1fr .8fr !important; }
html.touch-ui.land body #goal:not(.min) #goal-act { grid-column: auto !important; }
html.touch-ui.land body #goal:not(.min) #goal-sub { -webkit-line-clamp: 2; display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; }
/* คอม: แนวเดียวกับแถว Base Lv / Job Lv / Gold / เพชร (x 14 · กว้าง 256) — เดิมแถบ 252 เริ่มที่ 16 ชิปน้ำหนัก 262 ยื่นเกิน */
html:not(.touch-ui) body #goal { left: 14px !important; }
html:not(.touch-ui) body #goal.min { width: 256px !important; max-width: 256px !important; height: 32px !important; min-height: 32px !important; }