/* แถบติดตามเควส ("เป้าหมายตอนนี้") — 26 ก.ย.
 * เดิมการ์ดกางเต็มตลอด (3 บรรทัด + 2 ปุ่ม) มือถือบัง NPC/แชท ผู้ใช้ว่าน่ารำคาญมาก
 * ปกติ = บรรทัดเดียวสีเข้มโปร่ง (แบบบรรทัดแชท) + ลูกศร › บอกว่าแตะดูได้ · แตะ = การ์ดเต็มเดิม + ปุ่ม "▶ ไปเลย"
 * เป้าหมายใหม่/ยืนงง = เรืองทอง + ป้าย "ใหม่" (ไม่กางเอง) · ตัวอักษรที่เห็นทุกตัว ≥ 13px
 * โหลดท้ายสุด (index.html) — กฎการ์ดเดิมอยู่ใน style.css · ui-mobile.css · ui-land.css · ui-kit.css (ไม่ลบ ใช้ตอนกาง) */

/* 27 ก.ย.: วัสดุเดียวกับชิปเพชรข้างบน (แถบไม้เข้ม kit/bar-dark-lg + ปุ่มกลมทอง) — รอบแรกเป็นพื้นกรมท่าโปร่ง ผู้ใช้ว่าคนละสไตล์ */
html body #goal.min {
  width: auto; max-width: min(340px, 62vw); min-width: 0; box-sizing: border-box; cursor: pointer;
  background: none; box-shadow: none; border-radius: 0; padding: 0;
  border: 0 solid transparent; border-width: 6px 12px; border-image: url(assets/ui/kit/bar-dark-lg.webp) 12 58 12 58 fill stretch;
}
html body #goal.min::before, html body #goal.min::after { display: none; }
html body #goal.min > header, html body #goal.min .gfoot, html body #goal.min #goal-sub { display: none; }
html body #goal.min .body { flex-direction: row; align-items: center; gap: 6px; padding: 1px 0; min-height: 22px; background: none; }
html body #goal.min #goal-txt {
  color: #fff6dc; font: 700 13px/1.3 var(--font-head, inherit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
}
html body #goal.min #goal-txt::before { content: none; }
html body #goal.min .body::before { content: '📜'; font-size: 13px; flex: 0 0 auto; }
html body #goal.min .body::after {
  content: '›'; margin-left: 4px; flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(#f3c75c, #d99a2b); color: #4a3010; font: 800 15px/1 var(--font-head, inherit); box-shadow: 0 0 0 1.5px #6a4a1a;
}
/* ป้าย "ใหม่": ติดมุมขวาบนนอกแถบ — ห้ามยัดลงปุ่มกลม › (29 ก.ย. ผู้ใช้เจอปุ่มยืดเพี้ยน ข้อความโดนตัดเมื่อแถบเต็มความกว้าง) */
html body #goal.min.new::after {
  display: block; content: 'ใหม่'; position: absolute; top: -13px; right: -8px; z-index: 1; pointer-events: none;
  padding: 1px 7px; border-radius: 999px; background: linear-gradient(#ff8a5c, #e0543a); color: #fff;
  font: 800 11px/1.35 var(--font-head, inherit); box-shadow: 0 0 0 1.5px #fff6dc, 0 1px 3px rgba(0, 0, 0, .35); white-space: nowrap;
}
html body #goal.min.pulse { animation: goalGlow 1.1s ease-in-out 3; }
@keyframes goalGlow {          /* กรอบเป็นภาพ (border-image) — เรืองด้วย drop-shadow ตามรูปทรงภาพ ไม่ใช่ box-shadow สี่เหลี่ยม */
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 5px rgba(232, 182, 74, .95)) brightness(1.12); }
}
html body #goal.min:active { transform: translateY(1px); }

/* กางแล้ว: การ์ดเดิม + หัวการ์ดมีปุ่มย่อ (มือถือเดิมซ่อนหัวการ์ด) · ปุ่มล่างอ่านง่ายขึ้น */
html body #goal:not(.min) { cursor: default; }
html body #goal:not(.min) > header { display: flex; align-items: center; }
html body #goal #goal-min {
  margin-left: auto; font: 700 13px/1 var(--font-head, inherit); color: #5c4a22; background: #fff5dc;
  border: 1px solid #c9ad72; border-radius: 999px; padding: 4px 10px; cursor: pointer;
}
html body #goal:not(.min) #goal-sub { font-size: 13px; -webkit-line-clamp: 4; }
html body #goal:not(.min) .gfoot { flex-wrap: wrap; }
html body #goal:not(.min) .gfoot button { font-size: 13px; min-height: 32px; }
html body #goal #goal-act { flex: 1 1 100%; color: #fff; background: linear-gradient(#e8a64a, #cf8424); border-color: #a86516; }
html body #goal #goal-act[hidden] { display: none; }
html.touch-ui body #goal:not(.min) { width: min(88vw, 320px); }
@media (prefers-reduced-motion: reduce) { html body #goal.min.pulse { animation: none; } }
/* มือถือแนวตั้ง: 62vw ตัดข้อความเป้าหมายเหลือ "Eggling (L…" — ใช้ความกว้างได้เกือบเต็มจอ (ขวาเป็นพื้นที่สนาม ไม่มี HUD) */

html[lang="en"] body #goal.min.new::after { content: 'New'; }   /* client/i18n.js ตั้ง <html lang> */