/* ---------- "มีอัปเดตใหม่" (2026-10-18, js/updnotice.js): MIR4 / Lordnine style - a slim obsidian plate with a gold edge
   under the top menu bar, a gold diamond with the reload arrows, the line in gold, a gold button. Never blocks the game:
   only the plate itself takes a click. Crisp 1px outlines only, no soft halo round the text (the user's rule). ---------- */
#updnote {
  position: fixed; z-index: 990; left: 50%; top: 18px; transform: translate(-50%, -14px); opacity: 0; pointer-events: none !important;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  padding: 8px 10px 8px 12px; border-radius: 12px; font-family: Mali, Fredoka, sans-serif; color: #f2e6c4;
  background: linear-gradient(180deg, rgba(30, 24, 16, 0.96), rgba(12, 10, 8, 0.96));
  border: 1px solid #b98a35;
  box-shadow: 0 0 0 1px #050407, inset 0 1px 0 rgba(255, 226, 150, 0.28), 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: opacity 0.3s, transform 0.3s;
  overflow: hidden;
}
#updnote.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto !important; }
#updnote.in { animation: unIn 0.42s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes unIn { from { opacity: 0; transform: translate(-50%, -18px) scale(0.96); } }
/* (a light runs along the plate now and then) */
#updnote::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 228, 160, 0.16), transparent);
  animation: unSweep 4.5s ease-in-out 0.6s infinite;
}
@keyframes unSweep { 0% { left: -40%; } 38%, 100% { left: 120%; } }
#updnote .un-ic {
  flex: none; position: relative; width: 30px; height: 30px; transform: rotate(45deg); border-radius: 6px;
  background: linear-gradient(135deg, #ffe7a2, #d39a33 55%, #8a5a16); box-shadow: 0 0 0 1px #3a2406, inset 0 0 0 1px rgba(255, 246, 210, 0.5);
}
#updnote .un-ic::before {
  content: '⟳'; position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-45deg);
  font: 800 19px/1 Fredoka, sans-serif; color: #2a1704;
}
#updnote .un-ic.spin::before { animation: unSpin 0.9s linear infinite; }
@keyframes unSpin { to { transform: rotate(315deg); } }
#updnote .un-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#updnote .un-tx b { font-weight: 700; font-size: 15px; line-height: 1.25; color: #ffd772; text-shadow: 0 1px 0 #2a1a05; letter-spacing: 0.01em; }
#updnote .un-tx small { font-size: 12px; line-height: 1.3; color: #d8ccb0; text-shadow: 0 1px 0 #000; }
#updnote .un-n { font-family: Fredoka, sans-serif; font-weight: 700; color: #ffe08a; }
#updnote button { font-family: Mali, sans-serif; cursor: pointer; flex: none; }
#updnote .un-go {
  margin-left: 6px; padding: 6px 16px; border-radius: 8px; border: 1px solid #5a3a0c; font-weight: 700; font-size: 14px; color: #2a1704;
  background: linear-gradient(180deg, #ffe9a8, #e2ad45 55%, #b77d22); box-shadow: inset 0 1px 0 rgba(255, 250, 225, 0.75), 0 1px 0 #000;
}
#updnote .un-go:hover { filter: brightness(1.08); }
#updnote .un-go:active { transform: translateY(1px); }
#updnote .un-hold {
  padding: 6px 12px; border-radius: 8px; border: 1px solid #6b5326; font-size: 13px; font-weight: 600; color: #e9d9b0;
  background: rgba(255, 220, 140, 0.08);
}
#updnote .un-hold:hover { background: rgba(255, 220, 140, 0.16); }
#updnote .un-x {
  width: 26px; height: 26px; padding: 0; border-radius: 6px; border: 1px solid transparent; background: none;
  font: 600 20px/1 Fredoka, sans-serif; color: #b8a77f;
}
#updnote .un-x:hover { color: #ffe08a; border-color: #6b5326; }
@media (max-width: 720px) {
  #updnote { gap: 9px; padding: 7px 8px 7px 10px; }
  #updnote .un-ic { width: 24px; height: 24px; }
  #updnote .un-ic::before { font-size: 15px; }
  #updnote .un-tx b { font-size: 14px; }
  #updnote .un-tx small { font-size: 11px; }
  #updnote .un-go { padding: 6px 12px; font-size: 13px; }
}

/* ---------- the banner's newest patch-note title and "ดูรายละเอียด" (2026-10-18) ---------- */
#updnote .un-t { color: #fff3d0; font-weight: 600; }
#updnote .un-more {
  margin-left: 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid #6b5326; font-size: 13px; font-weight: 600; color: #f0dca8;
  background: rgba(255, 220, 140, 0.08);
}
#updnote .un-more:hover { background: rgba(255, 220, 140, 0.16); color: #ffe08a; }
@media (max-width: 720px) { #updnote { flex-wrap: wrap; } #updnote .un-tx { flex: 1 1 60%; } }

/* ---------- "มีอะไรใหม่": the patch notes window (js/updnotice.js UpdNotice.openNews, notes in js/patchnotes.js) - an
   obsidian notice board with a gold frame, newest first, the unread ones marked "ใหม่". ---------- */
#patchwin {
  position: fixed; inset: 0; z-index: 995; display: grid; place-items: center; padding: 16px; box-sizing: border-box;
  background: rgba(6, 5, 4, 0.58); pointer-events: auto !important; font-family: Mali, Fredoka, sans-serif; color: #efe4c6;
}
#patchwin[hidden] { display: none; }
#patchwin.in .pw-panel { animation: pwIn 0.32s cubic-bezier(0.2, 1.3, 0.4, 1); }
@keyframes pwIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
#patchwin .pw-panel {
  display: flex; flex-direction: column; width: min(600px, 100%); max-height: min(82vh, 760px); border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #1f1912, #0f0c09); border: 1px solid #b98a35;
  box-shadow: 0 0 0 1px #050407, 0 0 0 4px rgba(185, 138, 53, 0.22), inset 0 1px 0 rgba(255, 226, 150, 0.25), 0 18px 48px rgba(0, 0, 0, 0.6);
}
#patchwin .pw-head {
  display: flex; align-items: center; gap: 14px; padding: 14px 14px 12px 18px; border-bottom: 1px solid rgba(185, 138, 53, 0.45);
  background: linear-gradient(180deg, rgba(255, 214, 120, 0.1), rgba(255, 214, 120, 0));
}
#patchwin .pw-ic {
  flex: none; width: 34px; height: 34px; transform: rotate(45deg); border-radius: 7px; position: relative;
  background: linear-gradient(135deg, #ffe7a2, #d39a33 55%, #8a5a16); box-shadow: 0 0 0 1px #3a2406, inset 0 0 0 1px rgba(255, 246, 210, 0.5);
}
#patchwin .pw-ic::before { content: '✦'; position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-45deg); font: 700 18px/1 Fredoka, sans-serif; color: #2a1704; }
#patchwin .pw-ht { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#patchwin .pw-ht b { font-size: 21px; font-weight: 700; color: #ffd772; text-shadow: 0 1px 0 #2a1a05; }
#patchwin .pw-ht small { font-size: 13px; color: #c9b88f; }
#patchwin .pw-x {
  flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid #6b5326; background: rgba(255, 220, 140, 0.06);
  color: #e6d3a3; font: 600 17px/1 Fredoka, sans-serif; cursor: pointer;
}
#patchwin .pw-x:hover { color: #ffe08a; background: rgba(255, 220, 140, 0.14); }
#patchwin .pw-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-color: #8a6a2c transparent; }
#patchwin .pw-e { padding: 10px 14px 11px; border-radius: 10px; background: rgba(255, 240, 200, 0.045); border: 1px solid rgba(185, 138, 53, 0.25); }
#patchwin .pw-e.new { background: linear-gradient(90deg, rgba(255, 200, 90, 0.12), rgba(255, 240, 200, 0.04)); border-color: rgba(233, 180, 80, 0.6); box-shadow: inset 3px 0 0 #e2ad45; }
#patchwin .pw-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
#patchwin .pw-date { font-size: 12px; color: #b7a57c; }
#patchwin .pw-new { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: #2a1704; background: linear-gradient(180deg, #ffe9a8, #e2ad45); }
#patchwin .pw-e h4 { margin: 0 0 4px; font-size: 16.5px; font-weight: 700; color: #ffe2a0; }
#patchwin .pw-e ul { margin: 0; padding-left: 20px; }
#patchwin .pw-e li { font-size: 14px; line-height: 1.55; color: #e8dcc0; }
#patchwin .pw-e li::marker { color: #d9a443; }
#patchwin .pw-none { margin: 20px 0; text-align: center; color: #b7a57c; }
#patchwin .pw-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid rgba(185, 138, 53, 0.4);
  background: rgba(0, 0, 0, 0.25);
}
#patchwin .pw-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#patchwin button { font-family: Mali, sans-serif; cursor: pointer; }
#patchwin .pw-all { padding: 7px 12px; border-radius: 8px; border: 1px solid #6b5326; background: rgba(255, 220, 140, 0.06); color: #e9d9b0; font-size: 13.5px; font-weight: 600; }
#patchwin .pw-all:hover { background: rgba(255, 220, 140, 0.14); }
#patchwin .pw-reload { padding: 8px 14px; border-radius: 8px; border: 1px solid #6b5326; background: rgba(255, 220, 140, 0.1); color: #ffe08a; font-size: 14px; font-weight: 700; }
#patchwin .pw-ok {
  padding: 8px 26px; border-radius: 8px; border: 1px solid #5a3a0c; font-weight: 700; font-size: 15px; color: #2a1704;
  background: linear-gradient(180deg, #ffe9a8, #e2ad45 55%, #b77d22); box-shadow: inset 0 1px 0 rgba(255, 250, 225, 0.75), 0 1px 0 #000;
}
#patchwin .pw-ok:hover { filter: brightness(1.08); }
@media (max-width: 720px) {
  #patchwin { padding: 10px; }
  #patchwin .pw-ht b { font-size: 18px; }
  #patchwin .pw-e h4 { font-size: 15px; }
  #patchwin .pw-e li { font-size: 13px; }
}