/* news.css — แผงประกาศในเกม (Art Production · 2 ต.ค. 2026 · ต้นแบบ รอเจ้าของดู)
   เจ้าของสั่ง: "ทำหน้าต่างประกาศในเกมเหมือนประกาศบนเว็บทางการ ใช้ Icon ตามรูป"
   หน้าตาโพสต์ยกจากกล่อง .news ของหน้าทางการ (official.html) — พื้นดำ · แถบแดงซ้าย · บรรทัด shout แดง · วันที่เทา
   ตัวหน้าต่าง = ป๊อปอัปกลางจอ โตจากไอคอน (เจ้าของสั่ง 2 ต.ค. "หน้าต่างประกาศ motion pop up จาก 0 ที่ 400ms" แล้วเลือกป๊อปอัปกลางจอ แทนแผงจากขวา)
   ปิด = [hidden] ไม่มีกล่องในผังเลย · ปิดหายทันที · ม่านหลังหน้าต่างหรี่ด้วยเม็ดหมากรุก ไม่ใช่ความโปร่ง (กฎ dither) · คลิกม่าน = ปิด
   สีจากทะเบียนเท่านั้น (ตัวแปร :root ของ paper.css ต้องอยู่ในหน้าแล้ว) · ทุกกฎผูก #news / #newsveil / #newsbtn */

#newsveil { position: fixed; inset: 0; z-index: 30; background: repeating-conic-gradient(var(--px-0) 0 25%, transparent 0 50%) 0 0 / 4px 4px; }
#newsveil[hidden] { display: none; }
#news { position: fixed; inset: 0; z-index: 31; display: flex; flex-direction: column; margin: auto;
  width: min(580px, 94vw); height: min(640px, 86vh); color: var(--px-12); background: var(--px-0);
  border: 3px solid var(--px-3); box-shadow: 8px 8px 0 rgb(0 0 0 / .6); }
#news[hidden] { display: none; }
/* pop จาก 0 → เต็ม ใน 400 ms เลยเป้าแล้วเด้งกลับ (โค้งเดียวกับจอ Get item) · จุดตั้งต้น = กลางไอคอน (news.js ตั้ง --nw-origin) */
#news.nw-pop { transform-origin: var(--nw-origin, 50% 50%); animation: nw-pop 400ms cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes nw-pop { from { transform: scale(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #news.nw-pop { animation: none; } }

/* หัว — ไอคอน + ชื่อ + ปุ่มปิด · ภาษาเดียวกับหัวแผงแชท แต่บนพื้นดำ */
.nw-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; background: var(--px-1); border-bottom: 3px solid var(--px-3); }
.nw-head .ico { width: 32px; height: 32px; image-rendering: pixelated; }
.nw-head h2 { flex: 1; margin: 0; padding: 0; background: none; color: var(--px-12); font: 400 12px/1.4 var(--font-label); letter-spacing: .14em; }
.nw-head button { margin: 0 0 6px; padding: 6px 10px; }

/* รายการ — เลื่อนในแผงเอง หน้าไม่เลื่อนตาม · ใหม่สุดบนสุด (แบบหน้าทางการ) */
.nw-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 16px; }
.nw-list::-webkit-scrollbar { width: 10px; }
.nw-list::-webkit-scrollbar-track { background: var(--px-0); }
.nw-list::-webkit-scrollbar-thumb { background: var(--px-6); border: 2px solid var(--px-0); }
.nw-kick { margin: 0 0 10px; font: 400 11px/1 var(--font-label); letter-spacing: .14em; color: var(--led-amber); }

/* โพสต์ — ยกจาก .news .post ของหน้าทางการ */
.nw-post { position: relative; margin: 0 0 14px; padding: 16px 18px 14px; background: var(--px-1); border-left: 6px solid var(--red-on-dark); }
.nw-posted { margin: 0 0 6px; font: 400 11px/1.3 var(--font-label); letter-spacing: .12em; color: var(--px-9); }
.nw-post h3 { margin: 0 0 8px; font: 800 24px/1.05 var(--font-heading); text-transform: uppercase; color: var(--px-12); }
.nw-post p { margin: 0 0 8px; font: 500 17px/1.4 var(--font-heading); color: var(--px-11); }
.nw-post .nw-shout { margin: 10px 0 0; font: 700 15px/1 var(--font-label); letter-spacing: .06em; color: var(--red-on-dark); }
/* ป้าย NEW ที่โพสต์ซึ่งยังไม่เคยเปิดเห็น (ตอนเปิดแผงครั้งนี้) — ตัวหนังสือดำบนแดง ไม่ใช่แดงบนกระดาษ */
.nw-new { position: absolute; top: 14px; right: 14px; padding: 2px 6px; font: 400 11px/1.3 var(--font-label); letter-spacing: .1em; color: var(--px-0); background: var(--red-on-dark); }

/* ท้ายแผง — ทางไปหน้าทางการ (โพสต์เต็มพร้อมลิงก์ถาวรอยู่ที่นั่น) */
.nw-foot { margin: 4px 0 0; font: 500 15px/1.4 var(--font-heading); color: var(--px-9); }
.nw-foot a { color: var(--px-blue); }
.nw-empty { margin: 40px 8px; text-align: center; font: 500 17px/1.4 var(--font-heading); color: var(--px-9); }

/* ปุ่มบนหน้าแรก — ไอคอนลอย ไม่ใช่ปุ่มยาง (เจ้าของสั่ง 2 ต.ค. "Icon ใช้สีสว่างตามรูป ไม่ใช้ปุ่มยาง ทำเป็น Icon ลอยจุดที่วงไว้")
   จุดที่เจ้าของวง = มุมซ้ายบนของฮู้ดหน้าแรก · ปุ่มอยู่ใน .hero (ไม่อยู่ใน .hood-art ซึ่ง aria-hidden และขยับตามลมหายใจ)
   ไอคอนชุด paper (หมึก/การ์ด/เทา = สว่าง) ×2 = 64 px · จุดแดงมุมขวาบนเมื่อมีโพสต์ใหม่ที่ยังไม่เปิดดู (ไม่มีตัวเลข) */
.hero:has(> #newsbtn) { position: relative; }
#newsbtn { position: absolute; z-index: 2; left: 25px; top: 14px; margin: 0; padding: 4px; border: 0; border-radius: 0;
  background: none; box-shadow: none; cursor: pointer; line-height: 0; transition: transform .12s ease-out; }
#newsbtn img { display: block; width: 64px; height: 64px; image-rendering: pixelated; filter: drop-shadow(0 4px 0 rgb(0 0 0 / .6)); }
#newsbtn:hover { transform: translateY(-3px); }
#newsbtn:active { transform: translateY(1px); }
#newsbtn[data-new]::after { content: ""; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; background: var(--red-on-dark); box-shadow: 0 0 0 2px var(--px-0); }
@media (max-width: 1000px) { #newsbtn { position: static; justify-self: end; } }   /* ฮู้ดซ่อนที่จอแคบ → ไอคอนเป็นแถวของตัวเองชิดขวาเหนือปุ่ม THE PIT (ลอยทับแล้วบังบรรทัดคำอธิบาย) */
@media (prefers-reduced-motion: reduce) { #newsbtn { transition: none; } }
#news button:focus-visible, #newsbtn:focus-visible { outline: 2px solid var(--px-blue); outline-offset: 3px; }