/*
 * MuppetMadness Theme 2.8.5 — narrow-header and integrated plugin polish.
 * Presentation only. Does not touch reward, Firebase, forum or purchase logic.
 */

/* Header: keep framed avatar self-contained and make long display names truncate
   rather than pushing navigation and notification buttons off the screen. */
.mm-header{min-width:0}
.mm-header .mm-header-actions{min-width:0!important;flex:0 0 auto;align-items:center;gap:8px}
.mm-header .mm-account-menu{flex:0 1 auto;min-width:0;max-width:220px}
.mm-header .mm-account-trigger{
  display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:8px!important;min-width:0;max-width:100%;min-height:42px;
  padding:3px 7px 3px 3px!important;border:1px solid transparent!important;
  border-radius:12px!important;background:transparent!important;
  box-shadow:none!important;line-height:1.1!important;
}
.mm-header .mm-account-trigger:hover,.mm-header .mm-account-menu.is-open .mm-account-trigger{
  border-color:var(--mm-border)!important;background:var(--mm-surface)!important;
}
.mm-header .mm-account-trigger>span:not(.mmd-mm-avatar-shell){
  display:block;min-width:0;max-width:148px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-weight:750;font-size:13px;
}
/* Exact PNG frame remains visible in the header; no second CSS halo. */
.mm-header .mm-account-trigger>.mmd-mm-avatar-shell{
  display:inline-grid!important;place-items:center!important;
  position:relative!important;isolation:isolate!important;
  flex:0 0 38px!important;width:38px!important;height:38px!important;min-width:38px!important;
  max-width:38px!important;max-height:38px!important;margin:0!important;border-radius:50%;
  overflow:visible!important;
}
.mm-header .mm-account-trigger>.mmd-mm-avatar-shell.mmd-mm-avatar-has-art::before,
.mm-header .mm-account-trigger>.mmd-mm-avatar-shell.mmd-mm-avatar-has-art::after{content:none!important;display:none!important}
.mm-header .mm-account-trigger>.mmd-mm-avatar-shell>img.mm-account-avatar{
  display:block!important;width:73%!important;height:73%!important;max-width:73%!important;max-height:73%!important;
  padding:0!important;margin:0!important;object-fit:cover!important;border-radius:50%!important;
  border:0!important;background:transparent!important;box-shadow:none!important;
}
.mm-header .mm-account-trigger>.mmd-mm-avatar-shell>.mmd-mm-frame-art{
  display:block!important;position:absolute!important;inset:0!important;z-index:3!important;
  width:100%!important;height:100%!important;margin:0!important;pointer-events:none!important;
}
.mm-header .mm-account-trigger>.mmd-mm-avatar-shell>.mmd-mm-frame-art>img{
  display:block!important;position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;margin:0!important;padding:0!important;border:0!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.mm-header .mm-account-trigger>img.mm-account-avatar{
  display:block!important;flex:0 0 36px!important;width:36px!important;height:36px!important;
  max-width:36px!important;max-height:36px!important;border-radius:50%!important;object-fit:cover!important;
}
.mm-header .mm-account-dropdown{max-width:calc(100vw - 20px);max-height:min(72dvh,520px);overflow-y:auto;overscroll-behavior:contain}
.mm-header .mm-header-actions :is(.mm-icon-button,.mm-menu-toggle){flex:0 0 auto;touch-action:manipulation}
.mm-header .mm-header-actions :is(button,summary):focus-visible{outline:2px solid var(--mm-accent);outline-offset:3px}
.mm-header .mm-header-actions summary.mm-notice-bell{position:relative}
.mm-header .mm-notice-bell-wrap:not([open]) .mm-notice-popover{display:none}

/* Medium/compact headers: preserve the actual search action on touch screens. */
@media(max-width:1080px){
  .mm-header{gap:10px!important}
  .mm-header .mm-branding{flex:1 1 auto!important;min-width:0!important;max-width:none!important}
  .mm-header .mm-branding .custom-logo-link{flex:0 1 auto!important;max-width:100%!important}
  .mm-header .mm-branding .custom-logo{max-width:100%!important}
  .mm-header .mm-header-actions{margin-left:auto!important}
}
@media(max-width:820px){
  .mm-header .mm-header-actions{gap:6px!important}
  .mm-header .mm-account-menu{max-width:165px}
  .mm-header .mm-account-trigger>span:not(.mmd-mm-avatar-shell){max-width:108px;font-size:12px}
  .mm-header .mm-branding .custom-logo{height:min(var(--mm-logo-height),56px)!important}
}
@media(max-width:680px){
  .mm-header{min-height:68px!important;height:auto!important;padding:8px 10px!important;gap:6px!important}
  .mm-header .mm-header-actions{gap:5px!important}
  .mm-header .mm-header-actions>[data-mm-search-toggle],
  .mm-header .mm-header-actions>.mm-menu-toggle,
  .mm-header .mm-notice-bell-wrap>.mm-notice-bell{
    display:grid!important;place-items:center!important;
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;
    max-width:38px!important;border-radius:10px!important;padding:0!important;
  }
  .mm-header .mm-header-actions>.mm-menu-toggle{display:grid!important}
  .mm-header .mm-account-menu{flex:0 0 38px!important;max-width:38px!important;min-width:38px!important}
  .mm-header .mm-account-menu>.mm-account-trigger{
    width:38px!important;height:38px!important;min-height:38px!important;
    padding:0!important;justify-content:center!important;border:0!important;
  }
  /* Do not let the older .mm-account-trigger span{display:none} hide the PNG frame. */
  .mm-header .mm-account-trigger>span:not(.mmd-mm-avatar-shell){display:none!important}
  .mm-header .mm-account-trigger>.mmd-mm-avatar-shell,
  .mm-header .mm-account-trigger>.mmd-mm-avatar-shell>.mmd-mm-frame-art{display:grid!important}
  .mm-header .mm-account-trigger>.mmd-mm-avatar-shell{flex-basis:36px!important;width:36px!important;height:36px!important;min-width:36px!important;max-width:36px!important}
  .mm-header .mm-account-dropdown{right:-43px;width:min(260px,calc(100vw - 20px))}
  .mm-header .mm-branding{min-width:0!important;width:auto!important;flex:1 1 auto!important;max-width:none!important}
  .mm-header .mm-branding .custom-logo-link{min-width:0!important;max-width:100%!important}
  .mm-header .mm-branding .custom-logo{
    width:auto!important;height:min(var(--mm-logo-height),44px)!important;
    max-width:100%!important;object-fit:contain!important;
  }
  .mm-header .mm-site-title{font-size:clamp(15px,4vw,19px)!important;line-height:1.1!important}
  .mm-header .mm-brand-mark{width:32px!important;height:32px!important;flex:0 0 32px!important}
  .mm-header .mm-notice-popover{position:fixed!important;top:calc(env(safe-area-inset-top,0px) + 74px)!important;right:10px!important;width:min(350px,calc(100vw - 20px))!important;max-height:calc(100dvh - 90px);overflow-y:auto}
  .mm-header .mm-primary-nav{left:10px!important;right:10px!important;max-height:calc(100dvh - 105px)!important;overflow-y:auto!important;overscroll-behavior:contain}
  .mm-search-panel{padding:10px!important}
  .mm-search-form{width:100%!important;min-width:0!important}
  .mm-search-field{min-width:0!important;max-width:100%!important}
}
@media(max-width:390px){
  .mm-header{padding-inline:7px!important;gap:3px!important}
  .mm-header .mm-header-actions{gap:3px!important}
  .mm-header .mm-header-actions>[data-mm-search-toggle],
  .mm-header .mm-header-actions>.mm-menu-toggle,
  .mm-header .mm-notice-bell-wrap>.mm-notice-bell{
    width:34px!important;height:36px!important;min-width:34px!important;max-width:34px!important;
  }
  .mm-header .mm-account-menu{flex-basis:36px!important;min-width:36px!important;max-width:36px!important}
  .mm-header .mm-account-menu>.mm-account-trigger{width:36px!important;height:36px!important}
  .mm-header .mm-branding .custom-logo{height:min(var(--mm-logo-height),39px)!important}
}
/* Shared content safety without overriding each plugin's purpose-built layouts. */
@media(max-width:820px){
  .mm-site-wrap :is(.mm-page-shell,.mm-article-shell,.mm-member-wrap,.mm-page-shell-arena){min-width:0;max-width:100%!important}
  .mm-member-virtual-page .mm-member-profile-grid,
  .mm-member-virtual-page .mm-member-profile-grid>main,
  .mm-member-virtual-page .mm-member-profile-grid>aside{min-width:0;max-width:100%}
  .mm-member-virtual-page .mm-profile-collectibles-v3 .mm-profile-id-badges{max-width:100%;min-width:0}
  .mm-member-virtual-page .mm-profile-collectibles-v3 .mm-profile-tabs{scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .mm-site-wrap :is(.mmf-forum,.mm-chatroom,.mm-arena,.mmd-daily,.mmd-daily-wrap){max-width:100%;min-width:0}
  .mm-site-wrap :is(.mmf-forum,.mm-chatroom,.mm-arena,.mmd-daily,.mmd-daily-wrap) img{max-width:100%;height:auto}
}
@media(max-width:600px){
  .mm-member-virtual-page .mm-profile-collectibles-v3 .mm-profile-id-badge-line{min-width:0;max-width:100%}
  .mm-member-virtual-page .mm-profile-collectibles-v3 .mm-profile-id-badge-line :is(.mmd-shop-flair-card,.mmd-shop-flair){max-width:100%}
  .mm-member-virtual-page .mm-profile-collectibles-v3 .mm-profile-id-badge-line :is(.mmd-shop-flair-card__copy,.mmd-shop-flair-card__copy b){min-width:0;overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){.mm-header :is(.mm-account-dropdown,.mm-account-trigger){transition:none!important}}
/* On a narrow desktop, centered/spotlight logos must not overlap account controls. */
@media(min-width:1081px) and (max-width:1250px){
  body.mm-header-layout-centered .mm-header .mm-branding,
  body.mm-header-layout-spotlight .mm-header .mm-branding{
    max-width:min(var(--mm-logo-width),32vw)!important;
  }
  body.mm-header-layout-centered .mm-header .mm-branding .custom-logo,
  body.mm-header-layout-spotlight .mm-header .mm-branding .custom-logo{max-width:100%!important}
}
@media(min-width:1081px) and (max-width:1250px){
  body.mm-header-layout-spotlight .mm-header .mm-branding{max-width:min(var(--mm-logo-width),24vw)!important}
}