/* 全站响应式外壳：统一管理桌面压缩、移动导航、安全区与触控尺寸。 */

@media(max-width:1024px){
  :root{--desktop-nav-w:216px}
  body.state-menu .menu{width:340px; padding-left:36px}
  body.state-menu .music-player{left:36px}
  body.state-menu .mi{font-size:var(--fs-24)}
  body.state-menu .mi .sub{display:none}
  .news{right:28px; width:280px}
  .monument h1{font-size:var(--fs-hero)}

  body.state-app .menu{width:var(--desktop-nav-w); padding:24px 14px 70px 24px}
  body.state-app .menu .brand{gap:8px}
  body.state-app .menu .brand b{font-size:var(--fs-20); letter-spacing:2px}
  body.state-app .menu .brand small{letter-spacing:3px}
  body.state-app .menu .brand-back{font-size:var(--fs-11); letter-spacing:.5px}
  body.state-app .music-player{left:calc(var(--desktop-nav-w) / 2); width:196px}
  body.state-app .music-dock{grid-template-columns:40px 100px 28px 28px}
  body.state-app .music-cover{width:40px}
  body.state-app .music-button{width:22px}
  body.state-app .music-play{width:28px}
  body.state-app .music-volume,body.state-app .music-list-toggle{width:28px}
  body.state-app .music-list-panel{left:0; width:196px}
  body.state-app .view{left:var(--desktop-nav-w); padding:42px 28px 32px}
  body.state-app .mi{font-size:var(--fs-16); letter-spacing:2px}
  .find-page-head{grid-template-columns:1fr; align-items:start; gap:8px; margin-bottom:15px}
  [data-panel="find"] .result-bar{align-items:flex-start; min-width:0; text-align:left}
  [data-panel="find"] .controls{grid-template-columns:1fr; gap:10px}
  [data-panel="find"] .search-tools{grid-row:1; width:100%}
  [data-panel="find"] .filter-groups{grid-row:2; justify-self:start}
  [data-panel="find"] .tw thead th:first-child{z-index:4}
  [data-panel="find"] .tw thead th:first-child,[data-panel="find"] .tw tbody td:first-child{position:sticky; left:0}
  [data-panel="find"] .tw tbody td:first-child{z-index:1; background:#091216;
    box-shadow:10px 0 18px -18px rgba(0,0,0,.95)}
  [data-panel="find"] .tw tbody tr:hover td:first-child,[data-panel="find"] .tw tbody tr:focus td:first-child{background:#0b1a20}
  .story-novel{padding:1rem .8rem 30vh}
}

@media(max-width:900px){
  .ack-page{display:flex; flex:0 0 auto; flex-direction:column; min-height:auto; overflow:visible}
  .ack-thanks{min-height:auto; overflow:visible}
  .ack-column{min-height:auto; overflow:visible}
  .ack-log{min-height:320px; max-height:min(52dvh,520px)}
}

@media(max-width:760px){
  html,body{width:100%; min-width:0; overflow-x:hidden}
  .badge,.corner{display:none}

  /* 手机主菜单使用完整宽度，不再保留桌面左栏和中央纪念碑的并排结构。 */
  body.state-menu{overflow-y:auto}
  body.state-menu .shell{min-height:100dvh; height:auto; overflow:hidden}
  body.state-menu .menu{position:relative; width:100%; min-height:100dvh; padding:28px 20px 76px;
    justify-content:center; gap:12px}
  body.state-menu .brand{margin:0 0 18px}
  body.state-menu .menu-list{display:grid; grid-template-columns:1fr; gap:2px; width:100%}
  body.state-menu .mi{width:100%; min-height:var(--touch-h); padding:9px 10px 9px 18px;
    font-size:var(--fs-20); letter-spacing:2px}
  body.state-menu .mi .sub{margin-left:auto; font-size:var(--fs-11)}
  body.state-menu .hero,body.state-menu .news{display:none}

  /* 应用态改为顶部栏与全宽抽屉。 */
  body.state-app .menu{position:fixed; inset:0 0 auto; z-index:var(--z-nav); width:100%; height:var(--mobile-header-h);
    padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));
    flex-direction:row; align-items:center; justify-content:flex-start; gap:10px;
    background:rgba(7,13,16,.94); border-bottom:1px solid var(--border); backdrop-filter:blur(14px)}
  body.state-app .menu .brand{width:auto; min-width:0; margin:0; opacity:1; transform:none; animation:none}
  body.state-app .menu .brand,body.state-app .menu-toggle{position:relative; z-index:2}
  body.state-app .menu .brand .mark{width:30px; height:30px; flex-basis:30px}
  body.state-app .menu .brand b{font-size:var(--fs-16); letter-spacing:2px}
  body.state-app .menu .brand small,body.state-app .menu .brand-back{display:none}
  body.state-app .menu-toggle{display:inline-flex; align-items:center; justify-content:center; margin-left:auto}
  body.state-app .hero{display:none}
  body.state-app .menu-list{position:absolute; top:100%; right:0; left:0; z-index:1; width:100vw;
    height:calc(100dvh - var(--mobile-header-h));
    display:flex; flex-direction:column; gap:4px; padding:18px max(16px,env(safe-area-inset-right))
      max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
    overflow-y:auto; background:rgba(7,13,16,.985); border-top:1px solid rgba(214,207,191,.08);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
    transition:opacity var(--duration-panel) var(--ease-standard),transform var(--duration-panel) var(--ease-standard),visibility var(--duration-panel)}
  body.state-app .menu.nav-open .menu-list{opacity:1; visibility:visible; pointer-events:auto; transform:none}
  body.state-app .mi{width:100%; min-height:52px; padding:10px 14px 10px 20px; font-size:var(--fs-20);
    letter-spacing:2px; opacity:1; animation:none; transform:none}
  body.state-app .mi .sub{display:block; margin-left:auto; font-size:var(--fs-11)}
  body.state-app .mi::before{height:22px}

  body.state-app .view{inset:var(--mobile-header-h) 0 0; left:0; width:100%; padding:24px 16px max(88px,calc(env(safe-area-inset-bottom) + 72px));
    overflow-y:auto; overflow-x:hidden; transition:none; overscroll-behavior:contain}
  body.state-app .panel.on{min-width:0}
  body.state-app .view-head{align-items:flex-start; flex-wrap:wrap; gap:4px 10px; margin-bottom:8px}
  body.state-app .view-head h2{font-size:var(--fs-24); line-height:1.25; letter-spacing:2px}
  body.state-app .view-head .accent{flex-basis:100%; line-height:1.5; letter-spacing:1px}
  body.state-app .view-sub{font-size:var(--fs-14); line-height:1.7; margin-bottom:18px}
  .find-page-head{display:block; margin-bottom:16px}
  [data-panel="find"] .find-page-head .view-sub{margin-bottom:0}
  [data-panel="find"] .result-bar{align-items:flex-start; min-width:0; margin-top:10px; text-align:left}

  /* 工具和攻略在手机上使用 view 作为主滚动容器。 */
  body.state-app #toolsRoot,body.state-app #guidesRoot{flex:0 0 auto; min-height:0; overflow:visible; padding-right:0}
  .tool-filter{align-items:flex-start; flex-direction:column; gap:8px; margin-bottom:18px}
  .tool-filter .seg{width:100%}
  .tool-filter .seg button{flex:1}
  .tool-favorite-filter{width:100%; min-height:var(--touch-h); margin-left:0}
  .tool-cat{margin-bottom:22px}
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .tool-card{min-width:0; min-height:var(--touch-h); padding:13px 58px 13px 14px}
  .tool-favorite{top:5px; right:5px; width:var(--touch-h); height:var(--touch-h)}
  .tool-wrap,.tool-wrap.wide{width:100%; max-width:none; margin:0}
  .tool-back{min-height:var(--touch-h); display:inline-flex; align-items:center; margin:0 0 8px; padding:0 4px}
  .tool-head{padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--border)}
  .tool-head h3{font-size:var(--fs-20); align-items:flex-start; flex-wrap:wrap}
  .tool-head p{line-height:1.65; margin-bottom:0}
  .f-row{max-width:none; flex-direction:column; align-items:stretch; gap:6px; margin-bottom:14px}
  .f-row label,.f-row .field-label{width:auto; text-align:left; color:var(--text-muted)}
  .ipt,.ipt2,.seg button,.btn-go,.iconbtn,.pager button,.btn-ghost{min-height:var(--touch-h)}
  .ipt2{width:100%}
  .seg{max-width:100%; overflow-x:auto}
  .seg button{white-space:nowrap; padding:9px 12px}
  .tool-out{margin:16px 0; padding:14px; overflow-x:auto}
  .tool-out .big{font-size:var(--fs-24)}
  .tool-btn-row{flex-wrap:wrap}
  .tool-jump{min-height:36px; margin:2px 4px 2px 0}
  .tool-foot{font-size:var(--fs-12); line-height:1.75}
  .data-table{min-width:100%}
  .data-table th,.data-table td{padding:8px 7px}

  /* 控制条和内容阅读。 */
  .controls{gap:8px; align-items:stretch}
  .controls .ipt{flex:1 1 100%; min-width:0; order:-1}
  .controls .chk{flex:1 1 100%; min-height:var(--touch-h)}
  .controls .seg{flex:1 1 auto}
  .controls .seg button{flex:1}
  [data-panel="find"] .controls{display:grid; grid-template-columns:minmax(0,1fr); margin-bottom:10px}
  [data-panel="find"] .search-tools{order:-1; display:grid; grid-template-columns:minmax(0,1fr) var(--touch-h);
    gap:8px; flex:1 1 100%; min-width:0; width:100%}
  [data-panel="find"] .search-tools .ipt{grid-column:1; grid-row:1; width:100%; order:0}
  [data-panel="find"] .search-tools .iconbtn{grid-column:2; grid-row:1; width:var(--touch-h); height:var(--touch-h)}
  [data-panel="find"] .search-tools .chk{grid-column:1 / -1; grid-row:2; min-height:34px; padding:0 2px}
  [data-panel="find"] .filter-groups{display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%}
  [data-panel="find"] .filter-groups .seg{width:100%}
  [data-panel="find"] #modeSeg{grid-column:1 / -1}
  [data-panel="find"] .find-status{margin-bottom:7px}
  [data-panel="find"] .result-bar{min-height:30px}
  [data-panel="find"] .tw{flex:0 0 auto; min-height:360px; height:min(52vh,520px)}
  [data-panel="find"] .tw table{min-width:1080px}
  [data-panel="find"] .map-filter{height:var(--touch-h); font-size:var(--fs-12)}
  [data-panel="find"] .pager{padding-top:10px}
  .ack-page{gap:16px; padding-bottom:10vh}
  .ack-thanks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ack-column{padding:22px 18px 26px}
  .ack-column h3,.ack-log h3{font-size:var(--fs-20)}
  .ack-links{grid-template-columns:1fr}
  .ack-log-head{padding:18px 18px 14px}
  .ack-log-scroll{padding:0 18px 18px}
  .settings-list{max-width:none}
  .story-novel{border:0; border-radius:0; padding:18px 0 30vh; background:none}
  .chapter-nav{grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-bottom:8px}
  .chapter-status{grid-column:1 / -1; font-size:var(--fs-11)}
  .chapter-links{grid-column:1}
  .chapter-links button{min-height:var(--touch-h); padding:7px 13px}
  .chapter-percent{grid-column:2; grid-row:2}
  .chapter{margin-bottom:3rem}
  .chapter h2,.chapter .story-title{font-size:var(--fs-24)}
  .chapter p,.story-md p{font-size:var(--fs-16); line-height:1.9}
  .story-md h3{font-size:var(--fs-20)}
  .story-md blockquote,.story-md ul,.story-md ol{font-size:var(--fs-16)}
  .guide-entry{grid-template-columns:52px minmax(0,1fr); gap:12px; min-height:0; padding:16px 4px}
  .guide-entry-side{grid-column:2; justify-content:flex-start}
  .guide-entry-copy strong{font-size:var(--fs-20)}
  .guide-reader{padding-bottom:18vh}
  .guide-reader-toolbar{top:0; margin-bottom:18px}
  .guide-cover{width:132px; height:132px}

  body.state-menu .music-player{left:50%; bottom:max(8px,env(safe-area-inset-bottom));
    width:214px; transform:translateX(-50%)}
  body.state-app .music-player{left:50%; bottom:max(8px,env(safe-area-inset-bottom)); width:214px;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(8px);
    transition:opacity var(--duration-fast),transform var(--duration-fast),visibility var(--duration-fast)}
  body.state-app.nav-open .music-player{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%)}
  body.state-app .menu-list{padding-bottom:max(82px,calc(env(safe-area-inset-bottom) + 74px))}
  body.state-menu .music-dock,body.state-app .music-dock{grid-template-columns:44px 110px 30px 30px}
  body.state-menu .music-cover,body.state-app .music-cover{width:44px}
  body.state-menu .music-button,body.state-app .music-button{width:25px}
  body.state-menu .music-play,body.state-app .music-play{width:30px}
  body.state-menu .music-volume,body.state-menu .music-list-toggle,
  body.state-app .music-volume,body.state-app .music-list-toggle{width:30px}
  body.state-menu .music-list-panel,body.state-app .music-list-panel{left:-8px; width:min(230px,calc(100vw - 24px))}
  .music-list-panel,.music-list-scroll{max-height:min(38vh,300px)}

  body.state-app.hub-on .view{inset:0; padding:0; overflow:hidden}
  body.hub-on .hub-back{top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); min-height:var(--touch-h)}
  .modal-card{width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:24px 18px}
  #toastContainer{bottom:max(18px,env(safe-area-inset-bottom)); width:calc(100% - 24px)}
}

@media(max-width:520px){
  body.state-menu .menu{padding-inline:16px}
  body.state-menu .mi .sub{display:none}
  .tool-grid{grid-template-columns:1fr}
  .tc-desc{font-size:var(--fs-12); line-height:1.55}
  .settings-list{gap:20px}
  .set-group{padding:18px 16px}
  .set-row{align-items:flex-start; gap:14px}
  .set-info{min-width:0}
  .developer-settings summary{min-height:72px; padding:14px 16px}
  .developer-settings-body{padding:0 16px 4px}
  .ack-thanks{grid-template-columns:1fr}
  .ack-column+.ack-column{border-top:1px solid var(--border); border-left:0}
}

@media(hover:none){
  .mi:hover,.tool-card:hover:not(.soon){transform:none}
}