/* Mobile responsive guardrail */
html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,canvas,svg{max-width:100%}
table{max-width:100%}
pre,code{max-width:100%}

@media(max-width:900px){
  body{font-size:14px;-webkit-text-size-adjust:100%}
  .wrap,.cm-wrap,.search-page{width:100%;max-width:100%;padding-left:12px!important;padding-right:12px!important}

  /* Header */
  .topbar{display:block;background:#f3f4f6;border-bottom:1px solid #e5e7eb;padding:4px 0}
  .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:10px!important;padding-right:10px!important}
  .topbar-notice{display:block!important;min-width:0;max-width:190px;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:0;color:#555}
  .topbar-notice:before{content:"魔兽科普综合资讯门户网站！";font-size:12px}
  .topbar-links{width:auto;min-width:0;height:24px;overflow:visible;white-space:nowrap;justify-content:flex-end;padding-bottom:0;gap:6px;flex:0 0 auto}
  .topbar-links>a[href^="javascript"]{display:none!important}
  .topbar-links>.topbar-bnet-off,.topbar-links>.topbar-bnet-on,.topbar-links>.topbar-level-badge,.topbar-links>.topbar-msg-badge{display:none!important}
  .topbar-links a,.topbar-account-btn{font-size:12px;height:24px;line-height:24px;padding:0 8px}
  .topbar-links::-webkit-scrollbar{display:none}
  .topbar-account .topbar-account-menu{display:none!important;right:0!important;left:auto!important;top:calc(100% + 6px)!important}
  .topbar-account.open .topbar-account-menu{display:block!important}
  .site-header{padding:10px 0}
  .header-inner{display:grid;grid-template-columns:minmax(0,168px) minmax(170px,1fr);gap:8px 8px;align-items:center}
  .logo a{align-items:flex-start}
  .logo-main{font-size:24px;letter-spacing:1px}
  .logo-sub{font-size:10px;letter-spacing:2px}
  .header-slogan{display:none}
  .header-inner .ad-header-center{grid-column:2;grid-row:1;width:100%!important;height:54px!important;max-height:54px!important;align-self:center}
  .header-inner .ad-header-center .ad-media,.header-inner .ad-header-center picture{height:54px!important}
  .header-inner .ad-header-center img{height:54px!important;width:100%!important;object-fit:fill!important}
  .search-form{grid-column:1/-1;width:100%;margin:0;box-shadow:none}
  .search-form input{width:100%;min-width:0;height:38px}
  .search-form button{height:38px;white-space:nowrap;padding:0 14px}
  .main-nav .wrap{padding:0!important;overflow-x:auto}
  .main-nav .wrap::-webkit-scrollbar{display:none}
  .main-nav ul{display:flex;flex-wrap:nowrap;min-width:max-content}
  .main-nav a{padding:10px 13px;font-size:13px;white-space:nowrap}

  /* Generic layout */
  .page-wrap{display:block;width:100%;max-width:100%;margin:10px auto;padding:0 12px}
  .main-col,.side-col{width:100%;min-width:0;display:block}
  .side-col{margin-top:12px}
  .cm-shell{padding:12px 0 24px}
  .cm-grid,.wa-detail,.author-grid,.submit-grid,.forum-compose,.forum-pro-layout,.forum-pro-hero{grid-template-columns:1fr!important}
  .cm-hero,.wa-product-hero,.addon-toolbar,.forum-top,.forum-thread-title,.forum-compose-hero,.author-hero,.submit-hero{display:block}
  .cm-btn,.wa-btn{min-height:36px}
  .cm-card,.wa-panel,.art-full,.art-related,.rel-panel{border-radius:8px}

  /* Cards and grids */
  .art-list-grid,.related-grid,.rel-grid,.wa-grid,.addon-grid,.forum-pro-board-grid,.forum-board-grid,.forum-subboard-grid,.s-grid,.s-hot,.s-summary,.op-stats,.op-todo,.op-rank{grid-template-columns:1fr!important}
  .art-list-item:nth-child(odd),.rel-card,.forum-pro-board,.forum-board-card{border-right:0!important}
  .today-item,.cat-item,.art-list-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:10px 0}
  .today-thumb,.today-thumb-empty,.cat-item-thumb,.alt-thumb,.alt-thumb-empty{width:96px!important;min-width:96px!important;height:68px!important}
  .today-thumb img,.cat-item-thumb img,.alt-thumb img{height:68px!important}
  .today-body{padding:0}
  .today-body h3,.cat-item-body h2,.alt-body h3{font-size:15px;margin-bottom:4px}
  .today-body p,.cat-item-exc,.alt-body p{font-size:12px;-webkit-line-clamp:2}
  .today-meta,.cat-item-meta,.alt-meta{gap:8px;font-size:11px;flex-wrap:wrap}

  /* Home banner and sidebar blocks */
  #siteBanner{height:auto;display:block;border-radius:6px}
  #mainSlider{height:220px}
  #bannerPreview{width:100%;height:auto;border-left:0;border-top:4px solid #d8d8d8;display:grid;grid-template-columns:repeat(2,1fr)}
  #bannerPreview .pv{min-height:92px}
  .slide-caption{padding:44px 12px 12px}
  .slide-caption h3{font-size:16px}
  .sb-box{margin-bottom:10px}

  /* Detail pages */
  .art-full{padding:18px 14px}
  .art-full-title,.wa-product-hero h1,.forum-thread-title h1{font-size:22px;line-height:1.45}
  .art-full-meta{gap:10px;margin-bottom:16px;padding-bottom:12px}
  .art-full-content,.forum-post-content{font-size:15px;line-height:1.85}
  .art-prevnext{grid-template-columns:1fr;gap:8px}
  .wa-product-buy{text-align:left;margin-top:12px}
  .wa-product-buy strong{font-size:22px}
  .wa-shot-grid{grid-template-columns:1fr 1fr}
  .wa-code{max-height:320px;overflow:auto}
  .addon-head{align-items:flex-start}
  .addon-icon{width:46px;height:46px}

  /* Forum */
  .forum-pro-stats,.forum-quick{grid-template-columns:repeat(2,1fr)!important}
  .forum-pro-board{min-height:auto}
  .forum-subboards,.forum-pro-last{margin-left:0!important;padding-left:0!important}
  .forum-post{grid-template-columns:1fr!important}
  .forum-post-user{border-right:0!important;border-bottom:1px solid #e0a640!important;display:grid!important;grid-template-columns:54px minmax(0,1fr);text-align:left;gap:10px;align-items:center}
  .forum-avatar{width:54px;height:54px;margin:0;grid-row:1/4}
  .forum-user-level,.forum-user-auto{justify-content:flex-start}
  .forum-user-stats{display:none}
  .forum-post-main header{height:auto;min-height:36px;gap:8px;flex-wrap:wrap;padding:8px 12px}
  .forum-post-content{padding:14px;min-height:80px}
  .forum-post-main footer{padding:10px;gap:8px}
  .forum-post-main footer a,.forum-post-main footer span{height:34px;min-width:84px}
  .forum-thread-row{grid-template-columns:38px minmax(0,1fr)!important}
  .forum-thread-row>span{padding:8px}
  .forum-compose-side,.submit-side,.forum-pro-side{position:static!important}
  .forum-editor,.forum-post-page .forum-editor{height:280px!important}
  .forum-editor .ql-container,.forum-post-page .forum-editor .ql-container{height:222px!important}
  .forum-editor .ql-editor,.forum-post-page .forum-editor .ql-editor{height:222px!important}
  .ql-toolbar.ql-snow{white-space:normal;line-height:1.6}
  .ql-toolbar.ql-snow .ql-formats{margin-right:6px;margin-bottom:4px}
  .forum-insert-bar{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .forum-insert-bar button{white-space:nowrap}
  .forum-upload-row,.forum-post-page .forum-upload-row,.submit-upload-grid{grid-template-columns:1fr!important}
  .forum-uploaded-list{grid-template-columns:1fr}
  .forum-compose-actions{position:sticky!important;bottom:0;z-index:20;background:rgba(241,244,248,.94)!important;backdrop-filter:blur(8px);padding:10px 0!important}

  /* Tables, rich content and code */
  .art-full-content table,.forum-post-content table,.addon-rich-content table,.bluepost-content table,.cm-card-bd table{display:block;width:100%;overflow-x:auto;white-space:nowrap}
  .art-full-content pre,.forum-post-content pre,.addon-rich-content pre,.wa-code,.cm-card-bd pre{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .art-full-content iframe,.forum-post-content iframe,.addon-rich-content iframe{width:100%;aspect-ratio:16/9;height:auto}

  /* Ads */
  [class*="ad-"],.ad-slot,.ad-banner,.ad-page-top,.ad-header-center{max-width:100%!important;overflow:hidden!important}
  .ad-banner img{width:100%!important;height:auto!important;max-height:120px;object-fit:cover}
  .ad-slot picture{display:block;width:100%!important;height:auto!important}
  .ad-slot{aspect-ratio:auto!important;background:transparent!important}
  .ad-slot:not(.ad-home-side){height:auto!important}
  .ad-slot:not(.ad-home-side) .ad-media{height:auto!important;min-height:0!important}
  .ad-slot:not(.ad-home-side) img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important}
  .ad-header-center{display:block!important}
  .ad-header-center:empty{display:none!important}
  .header-inner .ad-header-center{height:54px!important;max-height:54px!important}
  .header-inner .ad-header-center .ad-media,.header-inner .ad-header-center picture{height:54px!important}
  .header-inner .ad-header-center img{height:54px!important;max-height:54px!important;object-fit:fill!important}
  .ad-label{font-size:10px!important}

  /* Footer */
  .site-footer{padding-top:0}
  .ft-top,.footer-main,.footer-contact-col,.footer-qr-col,.footer-qrs,.ft-friends-wrap{display:none!important}
  .ft-top{overflow:visible}
  .ft-d1,.ft-d2,.ft-d3{float:none;width:100%;margin:0;padding:0;border-right:0}
  .ft-ul li,.ft-ul li span{width:50%}
  .ft-bar,.footer-bottom,.ft-bottom{display:block!important;padding:12px 10px 14px!important;margin-top:0!important;text-align:center!important;border-top:1px solid #e6e6e6}
  .ft-bar-l,.ft-bot-left,.footer-icp,.footer-disc{font-size:12px!important;line-height:1.9!important;color:#8a8a8a!important}
  .ft-bar-r,.ft-bot-right{padding-left:0;margin-top:8px;justify-content:center!important}
  .ft-bar-r img,.ft-bot-right img{width:92px!important;height:auto!important}
  .ft-friends{padding:0 14px 16px}
}

@media(max-width:560px){
  .wrap,.cm-wrap,.search-page,.page-wrap{padding-left:10px!important;padding-right:10px!important}
  .topbar{display:block}
  .header-inner{grid-template-columns:minmax(0,168px) minmax(165px,1fr);gap:8px}
  .logo-main{font-size:24px}
  .logo-sub{font-size:10px}
  .main-nav a{padding:9px 11px}
  #mainSlider{height:190px}
  #bannerPreview{display:none}
  .today-item,.cat-item,.art-list-item{grid-template-columns:86px minmax(0,1fr)}
  .today-thumb,.today-thumb-empty,.cat-item-thumb,.alt-thumb,.alt-thumb-empty{width:86px!important;min-width:86px!important;height:62px!important}
  .today-thumb img,.cat-item-thumb img,.alt-thumb img{height:62px!important}
  .wa-shot-grid,.forum-pro-stats,.forum-quick{grid-template-columns:1fr!important}
  .s-box,.addon-search,.wa-search{display:grid!important;grid-template-columns:1fr!important}
  .addon-search input,.wa-search input,.wa-search select{min-width:0!important;width:100%!important}
  .addon-sort,.wa-sort{overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:4px}
  .addon-sort a,.wa-sort a{white-space:nowrap}
  .rel-panel-hd{align-items:flex-start;padding:12px 14px;display:block}
  .rel-panel-hd a{display:inline-block;margin-top:6px}
  .rel-card{padding:12px 14px}
  .forum-post-content h2{font-size:19px}
  .forum-post-content h3{font-size:17px}
  .ft-ul li,.ft-ul li span{width:100%}
}
