/* MU header, adapted from La2Top header.css and MU language/ad slots.
 * Load order: existing style.css, header.css, black.css, mu.css.
 * Reference: la2top.rar supplied 2026-09-25.
 */
body.mu-la2top #menu-box {
  grid-area:menu;
  display:flex;
  align-items:center;
  width:100%;
  height:auto;
  min-height:40px;
  margin:0;
  background:rgba(0,0,0,.65);
}
body.mu-la2top #menu-box .mobile-logo {
  display:none;
}
body.mu-la2top .mu-home {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 36px;
  width:36px;
  height:32px;
  margin:4px 0 4px 6px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:5px;
  color:#ffbd55;
}
body.mu-la2top .mu-home svg {
  width:20px;
  height:20px;
  transform:skew(8deg);
}
body.mu-la2top .mu-home:hover {
  background:rgba(255,255,255,.12);
  border-color:#ffb300;
}
body.mu-la2top #nav {
  display:block;
  flex:1 1 auto;
  float:none;
  min-width:0;
  background:transparent;
}
body.mu-la2top #nav li.head {
  float:none;
}
body.mu-la2top #nav .head>a,body.mu-la2top #nav .mu-page-heading {
  display:flex;
  align-items:center;
  float:none;
  width:auto;
  min-height:40px;
  height:auto;
  margin:0;
  padding:6px 15px;
  background:transparent;
  color:#fff;
  font:500 14px/1.3 Montserrat,Arial,sans-serif;
  text-transform:none;
  overflow-wrap:anywhere;
}
body.mu-la2top #addserver {
  display:block;
  flex:0 0 203px;
  margin-left:auto;
}
body.mu-la2top #addserver a {
  float:none;
  width:100%;
  background:transparent;
  color:#fff;
  font:500 14px/40px Montserrat,Arial,sans-serif;
}
body.mu-la2top #addserver a:hover {
  color:var(--mu-link);
}
body.mu-la2top .btn-menu {
  padding:0;
  border:0;
  background:transparent;
}
body.mu-la2top #header {
  grid-area:header;
  display:grid;
  grid-template-columns:minmax(0,1fr) 242px;
  align-items:center;
  width:100%;
  height:auto;
  min-height:58px;
  margin:0;
  padding:2px 0 11px;
  background:var(--mu-surface);
  border-radius:4px;
}
body.mu-la2top #header-news {
  grid-column:1;
  grid-row:1;
  position:static;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
  width:auto;
  min-width:0;
  margin:0 10px;
}
body.mu-la2top .hn-item {
  width:auto;
  min-width:0;
  min-height:45px;
  margin:0;
  padding:3px;
  border-radius:5px;
  background:#000;
  box-shadow:none;
}
body.mu-la2top .hn-item>a {
  display:flex;
  align-items:center;
  min-width:0;
  color:#fff;
}
body.mu-la2top .hn-image-wrapper {
  display:block;
  flex:0 1 200px;
  float:none;
  width:48%;
  max-width:200px;
  height:35px;
}
body.mu-la2top .hn-image-wrapper img {
  display:block;
  width:100%;
  height:35px;
  object-fit:cover;
}
body.mu-la2top .hn-info-wrapper {
  flex:1 1 0;
  min-width:0;
  padding-left:5px;
}
body.mu-la2top .hn-info-line1,body.mu-la2top .hn-info-line2 {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  min-width:0;
}
body.mu-la2top .hn-domain {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  letter-spacing:.3px;
}
body.mu-la2top .hn-flag {
  flex-shrink:0;
  float:none;
}
body.mu-la2top .hn-rate-cat {
  min-width:0;
  float:none;
  white-space:nowrap;
  font-size:11px;
}
body.mu-la2top .hn-date {
  flex-shrink:0;
  float:none;
  margin:0;
  font-size:10px;
}
body.mu-la2top #bookmark-button {
  grid-column:2;
  grid-row:1;
  position:static;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  height:40px;
  margin:0 10px;
  padding:0 8px;
  border-radius:4px;
  background:var(--mu-control);
  color:#edf0f1;
}
body.mu-la2top :is(#bookmark-button,.mu-mobile-language) .mu-language {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  gap:6px;
  float:none;
  width:auto;
  min-height:32px;
  height:auto;
  margin:0;
  padding:6px 10px;
  border:1px solid #697378;
  border-radius:4px;
  background:var(--mu-panel);
  color:#edf0f1;
  opacity:1;
  text-decoration:none;
  font:600 12px/1 Montserrat,Arial,sans-serif;
  cursor:default;
}
body.mu-la2top :is(#bookmark-button,.mu-mobile-language) .mu-language[aria-current="true"] {
  border-color:#c8943c;
  background:#373023;
  color:var(--mu-hover);
  box-shadow:0 0 8px rgba(255,189,85,.16);
  font-weight:700;
}
body.mu-la2top :is(#bookmark-button,.mu-mobile-language) a.mu-language {
  cursor:pointer;
}
body.mu-la2top :is(#bookmark-button,.mu-mobile-language) a.mu-language:is(:hover,:focus-visible) {
  border-color:#ffbd55;
  background:#373023;
  color:var(--mu-hover);
  box-shadow:0 0 8px rgba(255,189,85,.12);
}
body.mu-la2top :is(#bookmark-button,.mu-mobile-language) .mu-language img {
  display:block;
  width:22px;
  height:auto;
}
body.mu-la2top :is(#bookmark-button,.mu-mobile-language) .mu-language-check,body.mu-la2top :is(#bookmark-button,.mu-mobile-language) .mu-language-arrow {
  font:700 12px/1 Arial,sans-serif;
}
@media (max-width:1199px) {
  body.mu-la2top #menu-box {
    transform:none;
  }
  body.mu-la2top .mu-home svg {
    transform:none;
  }
}
@media (max-width:1023px) {
  body.mu-la2top #menu-box {
    min-height:60px;
    background:rgba(0,0,0,.65);
  }
  body.mu-la2top #menu-box .mu-home {
    flex-basis:32px;
    width:32px;
    height:36px;
  }
  body.mu-la2top #nav .head>a,body.mu-la2top #nav .mu-page-heading {
    min-height:60px;
    padding:8px;
    font-size:13px;
  }
  body.mu-la2top #addserver {
    flex:0 0 100px;
  }
  body.mu-la2top #addserver a {
    height:auto;
    padding:10px 4px;
    font-size:12px;
    line-height:1.4;
  }
  body.mu-la2top .btn-menu {
    display:block;
    flex:0 0 26px;
    width:26px;
    margin:19px 10px;
  }
  body.mu-la2top #header {
    display:none;
  }
}
@media (max-width:460px) {
  body.mu-la2top #nav .head>a,body.mu-la2top #nav .mu-page-heading {
    font-size:12px;
    padding:6px;
  }
  body.mu-la2top #addserver {
    flex-basis:74px;
  }
  body.mu-la2top #addserver a {
    font-size:11px;
  }
  body.mu-la2top .btn-menu {
    margin-right:8px;
    margin-left:6px;
  }
}