/* Thông báo tập trung, nền xanh đêm và viền ánh vàng của MU Thần Ma. */
.page-shell {
  background:
    radial-gradient(ellipse at 0 25%, #1d57753d, transparent 50%),
    radial-gradient(ellipse at 100% 60%, #99744020, transparent 45%),
    linear-gradient(160deg, #101d2f, #0b1320 70%);
  border-inline-color: #c6a66c40;
  box-shadow: 0 0 0 5px #0a132866, 0 0 90px #000b;
}
.side-scene { border-inline: 1px solid #ccaa6845; }
.side-scene::after {
  content: ''; position: absolute; inset: 12px 8px; pointer-events: none;
  border: 1px solid #efd29945; border-radius: 5px;
  box-shadow: inset 0 0 40px #050b1850;
}
.community-heading {
  position: relative; isolation: isolate; overflow: hidden;
  height: 160px; padding: 24px 28px; border: 1px solid #bca37450; border-radius: 16px;
  background: #0b1522 url('../images/mu-than-ma-community-banner.png') center / cover no-repeat;
  box-shadow: inset 0 1px #f3d79920, 0 16px 35px #03081330;
}
.community-heading::after {
  content: ''; position: absolute; inset: auto 28px 0; height: 1px;
  background: linear-gradient(90deg, #dfba75, transparent); pointer-events: none;
}
.community-heading>div { width: 46%; }
.community-heading h2 { margin-block: 8px; font-size: clamp(22px,2.3vw,30px); }
.community-heading p { color: #b9c8d9; }
.news-board-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid #e6edf4; flex-shrink:0; }
.news-board-heading .news-board-title { border:0; padding:0; }
.news-board-heading .community-manage { margin:0; padding:7px 10px; min-height:31px; border-radius:7px; border:1px solid #b7d9f4; background:#edf6ff; color:#2674b0; font-size:10px; white-space:nowrap; gap:7px; }
.news-board-heading .community-manage:hover { background:#ddebfa; border-color:#70afe0; }
.danger-button { padding:10px 15px; border:1px solid #c45d66; border-radius:8px; color:#ffd8dc; background:#753540; font-size:12px; cursor:pointer; }
.danger-button:hover { background:#8e3541; }
.danger-button:disabled { opacity:.35; cursor:default; }
.post-delete-confirm { margin-top:20px; border:1px solid #a55b64; background:#5d303e44; border-radius:10px; padding:14px; color:#ffdadf; font-size:13px; }
.post-delete-confirm p { margin:0 0 12px; overflow-wrap:anywhere; line-height:1.7; }
.post-delete-confirm>div { display:flex; gap:10px; justify-content:flex-end; }
.post-delete-confirm .secondary-button { padding:9px 15px; font-size:12px; }
.editor-actions .danger-button { margin-top:20px; }
.news-board,.community-chat {
  border-radius: 14px; border-color: #d8e2ec;
  box-shadow: 0 16px 38px #02071440, 0 0 0 4px #a4b8cf08;
}
.news-board { background: linear-gradient(135deg, #fff, #f9fbfd); }
.news-board-title { color: #293b53; }
.news-row.server-notice-row {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(100deg, #eaf4ff, #f8fbff 72%, #fff9eb);
  border-left: 0;
  border-bottom-color: #dce8f4;
}
@property --notice-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.server-notice-row .news-title { color: #29496a; font-weight: 650; }
.server-notice-row .news-tag {
  color: #d31e35; padding: 2px 4px; border: 2px solid transparent;
  background: linear-gradient(120deg, #fff, #fff0f2) padding-box,
    repeating-conic-gradient(from var(--notice-border-angle), #c41936 0deg, #ff3656 55deg, #ffb1bd 85deg, #ff3656 115deg, #c41936 180deg) border-box;
  box-shadow: 0 0 5px #ea36532b;
  animation: notice-border-run 1.2s linear infinite;
}
.server-notice-row:nth-child(2) .news-tag { animation-delay: -.9s; }
.server-notice-row:nth-child(3) .news-tag { animation-delay: -1.8s; }
.server-notice-row .row-pin { color: #bc9346; }
.notice-row-arrow { text-align: right; color: #298ad1; font-size: 15px; transition: transform .2s; }
.server-notice-row:hover,.server-notice-row:focus-within { background: #e3f1ff; }
.server-notice-row:hover .notice-row-arrow { transform: translate(2px,-2px); }
@keyframes notice-border-run {
  to { --notice-border-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .server-notice-row .news-tag { animation-duration: 2.4s; }
  .notice-row-arrow { transition: none; }
}
.news-filters button[aria-pressed=true] {
  background: linear-gradient(125deg, #229efa, #1578d4); border-color: #168ce8;
  box-shadow: 0 3px 9px #218de32b;
}
.guide-cover { border-bottom: 1px solid #dbe5f0; }
.news-guide { border-radius: 10px; box-shadow: 0 4px 12px #223f6108; }
.server-notice-dialog { width: min(1080px, calc(100% - 32px)); }
.server-notice-dialog>.server-notice-heading {
  padding: 30px 60px 25px 30px;
  background: linear-gradient(100deg, #17283ef5 25%, #17283ec9 65%, #17283e99),
    url('../images/mu-than-ma-community-banner.png') center / cover;
  border-bottom-color: #b7965855;
}
.server-notice-heading h2 { font-size: 26px; margin: 9px 0; }
.server-notice-dialog .community-close { z-index: 2; }
.server-notice-dialog .server-hub { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.server-notice-dialog .hub-panel { background: linear-gradient(145deg, #14243a, #101b2c); }
.server-notice-dialog .hub-heading h2 { font-size: 25px; }
.server-notice-dialog .hub-tabs { position: sticky; top: 0; z-index: 1; background: #0e192a; }
.server-notice-dialog .hub-tabs button { min-height: 45px; }
.server-notice-dialog .event-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.catalog { border-top: 0; padding-top: 0; }
.catalog .player-cta { margin-top: 0; }
@media (max-width: 600px) {
  .community-heading { height:240px; padding:16px 19px; border-radius:12px; justify-content:flex-end; gap:0;
    background:linear-gradient(0deg,#101b2c 0%,#101b2c 28%,transparent 72%),url('../images/mu-than-ma-community-banner.png') right top / auto 150px no-repeat,#0b1522; }
  .community-heading>div { width:100%; }
  .community-heading h2 { font-size: 25px; }
  .news-board-heading { gap:7px; }
  .news-board-heading .news-board-title { font-size:13px; }
  .news-board-heading .community-manage { padding:6px; font-size:9px; }
  .server-notice-dialog { width: calc(100% - 16px); max-height: 92svh; }
  .server-notice-dialog>.server-notice-heading { padding: 25px 48px 20px 18px; }
  .server-notice-heading h2 { font-size: 21px; }
  .server-notice-dialog .event-grid { grid-template-columns: 1fr; }
  .server-notice-dialog .hub-tabs button { font-size: 10px; }
  .server-notice-row .news-title { font-size: 11px; }
}