/* ป้ายข่าวเมือง (Lyra · herald-window.js) — กระดานประกาศไม้ + กระดาษ · ตาม mockup ผู้ใช้ 26 ก.ย.
   หัว (Lyra + ชื่อ) กับแท็บติดบนตอนเลื่อน · เนื้อหาเลื่อนในตัว · มือถือแนวตั้งเป็นแผ่นเต็มจอ (กฎ .win ของ ui-mobile.css) */
#windows .win[data-win="herald"] { width: min(95vw, 820px); max-height: min(92vh, 880px); }
html[data-skin="wood"] body .win[data-win="herald"] > .body { max-height: none; }
#windows .win[data-win="herald"] > .body { max-height: min(84vh, 820px); overflow: auto; padding: 0; }

.hw { --parch: #fbf3df; --parch2: #f5e8c8; --ink: #4a3418; --muted: #9a8258; --line: #e3cf9f; --teal: #2f6f73; --gold: #e8b64a;
  display: flex; flex-direction: column; background: var(--parch); color: var(--ink); min-height: 100%; }

/* ── หัว ─────────────────────────────────────────────── */
.hw-top {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px;
  padding: 10px 16px 10px 12px;
  background: linear-gradient(180deg, #fff7e2, #f3e2b8); border-bottom: 2px solid #c99a4a;
  box-shadow: inset 0 -3px 0 #f8ecd0;
}
.hw-top b { display: block; font: 700 22px/1.15 var(--font-head); color: #5b3a10; text-shadow: 0 1px 0 #fff8; }
.hw-top span { font-size: 12.5px; color: #8a6a3a; }
/* รูป Lyra แบบเต็ม (แตรโผล่นอกวง) — ไม่ครอบวงกลม ให้ล้นกรอบลงมานิด ๆ แบบ mockup */
.hw-lyra { width: 84px; height: 66px; position: relative; flex: none; }
.hw-lyra img { position: absolute; left: -4px; bottom: -14px; width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 3px 4px #8a5a1a55); }

/* ── แท็บ ────────────────────────────────────────────── */
.hw-tabs {
  position: sticky; top: 86px; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 8px 12px 6px; background: linear-gradient(#f3e2b8, var(--parch)); border-bottom: 1px solid var(--line);
}
.hw-tabs button {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  border-radius: 10px 10px 6px 6px; border: 1px solid #d8bd84; background: linear-gradient(#fffaf0, #f4e6c4);
  font: 700 14px/1 var(--font-head, inherit); color: #6b4f24; cursor: pointer;
}
.hw-tabs button svg { width: 20px; height: 20px; color: #8a6a3a; }
.hw-tabs button.on { background: linear-gradient(#3f8a8e, var(--teal)); border-color: #1f5558; color: #fff; box-shadow: 0 2px 6px #1f555855; }
.hw-tabs button.on svg { color: #fff; }

.hw-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 8px; }
.hw-foot { padding: 8px 14px 12px; font-size: 12px; color: var(--muted); text-align: center; }

/* ── หัวส่วน ─────────────────────────────────────────── */
.hw-sh { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; padding-bottom: 5px; border-bottom: 1px dashed #dcc48e; }
.hw-sh-ic { font-size: 18px; align-self: center; }
.hw-sh b { font: 700 16px/1.2 var(--font-head); color: #5b3a10; }
.hw-sh small { font-size: 12px; color: var(--muted); }
.hw-more-btn { margin-left: auto; align-self: center; padding: 4px 12px; border-radius: 999px; border: 1px solid #d8c294; background: #fffaf0; font: 700 12px/1.2 inherit; color: #6b5530; cursor: pointer; }

/* ── ข่าวเด่น ────────────────────────────────────────── */
.hw-feat {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 12px; align-items: center;
  padding: 14px 14px 14px 16px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(100deg, #fff4d4, #fffaf0 55%, #f7ebcd); border: 2px solid var(--gold);
  box-shadow: 0 2px 0 #d9a84a55, inset 0 0 22px #e8b64a22;
}
.hw-feat-tx b { display: block; margin: 4px 0; font: 700 18px/1.3 var(--font-head); color: #4a2f0a; }
.hw-feat-tx p { margin: 0; font-size: 13px; line-height: 1.55; color: #5b4524; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hw-feat time { position: absolute; top: 10px; right: 14px; font-size: 11.5px; color: var(--muted); }
.hw-feat-art { display: grid; place-items: center; height: 120px; }
.hw-feat-art img { max-width: 100%; max-height: 120px; object-fit: contain; }
.hw-more { display: inline-block; margin-top: 6px; font: 700 12px/1 inherit; color: var(--teal); }
.hw-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #e0443a; color: #fff; font: 700 11.5px/1.2 inherit; }
.hw-badge.live { background: #e0663a; animation: hwPulse 1.4s ease-in-out infinite; }
@keyframes hwPulse { 50% { box-shadow: 0 0 0 5px #e0663a33; } }
.hw-ph-big { font-size: 64px; filter: drop-shadow(0 3px 4px #8a5a1a44); }
.hw-full { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #dcc48e; font-size: 13px; line-height: 1.65; color: #4a3a22; }

.hw-notice { padding: 9px 12px; border-radius: 10px; background: #eef7f6; border: 1px solid #9cc9c4; font-size: 13px; color: #1f4f52; }

/* ── รายการข่าว ──────────────────────────────────────── */
.hw-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 14px; gap: 10px; align-items: start;
  padding: 9px 12px; border-radius: 11px; background: #fffdf6; border: 1px solid var(--line); cursor: pointer;
}
.hw-row:hover { border-color: #c9a86a; }
.hw-row-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #eef4ef; font-size: 20px; }
.hw-row-tx b { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #3b2a10; }
.hw-row-tx p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #6b5a3a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hw-row.open .hw-row-tx p { -webkit-line-clamp: unset; }
.hw-row time { font-size: 11px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.hw-chev { color: #b09060; font-size: 20px; line-height: 1; align-self: center; }
.hw-dot { width: 8px; height: 8px; border-radius: 50%; background: #5cbf6a; flex: none; }
.hw-dot.b-ใหม่ { background: #5aa0e0; } .hw-dot.b-สำคัญ { background: #e0443a; }

/* ── บอส ─────────────────────────────────────────────── */
.hw-bosses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hw-bosses.all { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.hw-boss { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px; border-radius: 12px; background: #fffdf6; border: 1px solid var(--line); }
.hw-boss.alive { border-color: #e0663a; background: #fff6ec; }
.hw-boss .hw-pt { width: 76px; height: 76px; border: 3px solid #c99a4a; }
.hw-boss b { display: block; font: 700 14.5px/1.2 var(--font-head); color: #3b2a10; }
.hw-boss small { display: block; font-size: 11.5px; color: var(--muted); }
.hw-loc { display: block; margin: 2px 0 5px; font-size: 11.5px; color: #6b5a3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #fde6e2; color: #c8423a; font: 700 12px/1.2 inherit; }
.hw-pill em { font-style: normal; font-variant-numeric: tabular-nums; }
.hw-pill.live { background: #e0663a; color: #fff; }
.hw-pill.big { font-size: 14px; padding: 6px 14px; align-self: center; white-space: nowrap; }

/* ── กิจกรรม ─────────────────────────────────────────── */
.hw-ev { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; background: #fffdf6; border: 1px solid var(--line); }
.hw-ev.live { border: 2px solid #e0663a; background: #fff3e4; }
.hw-ev .hw-pt { width: 64px; height: 64px; border: 3px solid #c99a4a; }
.hw-ev b { display: block; margin: 3px 0 2px; font: 700 15px/1.25 var(--font-head); color: #3b2a10; }
.hw-ev p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #6b5a3a; }

/* ── บริการ ──────────────────────────────────────────── */
.hw-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hw-svcs.wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hw-svc { display: grid; grid-template-columns: 50px minmax(0, 1fr) 12px; gap: 9px; align-items: center; text-align: left; padding: 7px 9px; border-radius: 12px; border: 1px solid var(--line); background: #fffdf6; cursor: pointer; }
.hw-svc:hover { border-color: var(--teal); box-shadow: 0 0 0 2px #2f6f7322; }
.hw-svc .hw-pt { width: 50px; height: 50px; border: 2px solid #d8bd84; }
.hw-svc b { display: block; font: 700 14px/1.2 var(--font-head); color: #3b2a10; }
.hw-svc i { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: normal; font-size: 11.5px; line-height: 1.35; color: #7a6646; }

/* ── รูปวงกลม + ของแทน ───────────────────────────────── */
.hw-pt { display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff8e6, #ecd9ad); flex: none; }
.hw-pt img { width: 100%; height: 100%; object-fit: cover; }
.hw-pt img.r3d { object-fit: contain; transform: scale(1.1); }
.hw-ph { font: 700 26px/1 var(--font-head); color: #8a6a3a; }
.hw-link { justify-self: start; padding: 6px 14px; border-radius: 999px; border: 1px solid #d8c294; background: #fbf4e2; font: 700 12.5px/1.2 inherit; color: #6b5530; cursor: pointer; white-space: nowrap; }
.hw-empty { font-size: 12.5px; color: #9a8a6a; padding: 6px 2px; }

/* ── จอแคบ: การ์ดเรียงลง · หัวย่อ ────────────────────── */
@media (max-width: 680px) {
  .hw-top b { font-size: 18px; }
  .hw-top span { display: none; }
  .hw-lyra { width: 60px; height: 50px; } .hw-lyra img { width: 68px; height: 68px; bottom: -10px; }
  .hw-tabs { top: 70px; gap: 4px; padding: 6px 8px; }
  .hw-tabs button { flex-direction: column; gap: 2px; min-height: 48px; font-size: 12px; }
  .hw-feat { grid-template-columns: 1fr; }
  .hw-feat-art { display: none; }
  .hw-bosses, .hw-svcs { grid-template-columns: 1fr; }
  .hw-ev { grid-template-columns: 52px minmax(0, 1fr); }
  .hw-ev .hw-pt { width: 52px; height: 52px; }
  .hw-ev .hw-pill.big, .hw-ev .hw-link { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
  .hw-row { grid-template-columns: 34px minmax(0, 1fr) 12px; }
  .hw-row time { display: none; }
}