/* 手機版：電腦版是 1476px 畫布整張 zoom 縮小，手機寬度改回一般流式排版。電腦版不受影響。 */
@media(max-width:820px){
html{overflow-x:hidden}
body{width:100%;zoom:1;min-height:100vh;min-height:100dvh;background:#08090a!important;font-size:15px}
.nav{position:sticky;top:0;z-index:20;width:100%}
.nav-inner{width:100%;max-width:none;display:flex;justify-content:flex-start;gap:0;margin:0;padding:0 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-inner::-webkit-scrollbar{display:none}
.nav a,.nav button{flex:0 0 auto;display:flex;align-items:center;height:46px;padding:0 13px;font-size:15px;white-space:nowrap}
.hero{width:100%;height:auto;aspect-ratio:39/17;background:url('assets/side-background.jpg?v=user1') center top/235% auto no-repeat}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,#08090a)}
.shell{width:100%;zoom:1;margin:0;padding:10px;border-width:1px 0}
.top-grid{display:flex;flex-direction:column;gap:10px}
.left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.quick-art{flex:none;min-height:0;aspect-ratio:317/100}
.center{display:flex;flex-direction:column}
.banner{height:auto;flex:none;aspect-ratio:660/141}
.slideshow .slide img{width:100%;height:100%;object-fit:cover}
.slide-arrow{display:none}
.tabs{height:44px;flex:0 0 44px;margin-top:8px}
.tabs button{font-size:14px;padding:0}
.notices{min-height:0;padding:6px 10px}
.notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 8px;height:auto;padding:9px 0;align-items:start;border-bottom:1px solid #ffffff14}
.notice:last-child{border-bottom:0}
.notice span{font-size:15px;line-height:1.5;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.notice time{grid-column:2;margin:0;color:#9faeb6;font-size:12px}
.sponsor{height:auto;min-height:0;border:1px solid #ae7a2e}
.sponsor .sponsor-image-link{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;height:96px}
.sponsor .sponsor-image-link img{width:128px;height:96px;object-fit:cover;object-position:center top;background:none}
.sponsor .sponsor-image-link::after{content:"贊助我們\A支持安安天堂 ›";white-space:pre;padding-left:16px;color:#ffd67a;font-size:17px;font-weight:600;line-height:1.7}
.game-zone{margin-top:10px;padding:10px}
.game-zone-title{gap:8px;margin:0 0 10px;padding:0;font-size:20px}
.game-zone-content{display:flex;flex-direction:column;gap:10px}
.boardgrid{order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:8px}
.line{order:2;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 12px;padding:10px}
.line .line-placeholder{grid-row:1/3;width:64px;height:64px;font-size:15px}
.line h2{margin:0;font-size:17px;text-align:left}
.line p{margin:0;text-align:left}
.ad-link{width:100%;margin:10px 0}
.ad-link img{width:100%}
.download{padding:0 2px}
.site-footer{padding:16px 12px 14px!important}
.breadcrumb{padding:8px 2px;font-size:14px}
.page-panel .page-inner{padding:10px}
.page-header h2{font-size:22px;overflow-wrap:anywhere}
.page-header p{font-size:14px}
.post-body{padding:10px 4px;font-size:15px;line-height:1.75;overflow-wrap:anywhere}
.post-body img{max-width:100%;height:auto}
.weapon-category-nav,.weapon-guide-pendant .weapon-category-nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:16px}
.weapon-category-tab{flex-direction:column;justify-content:center;gap:2px;min-height:58px;padding:7px 3px;text-align:center}
.weapon-category-name{font-size:14px;white-space:normal;overflow-wrap:anywhere}
.weapon-category-count{font-size:12px}
.weapon-guide-summary{white-space:normal}
.weapon-guide .data-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.weapon-guide .data-table{min-width:760px}
.weapon-guide-slate .data-table{min-width:900px}
.weapon-guide-wide .data-table{min-width:900px}
}
@media(min-width:640px) and (max-width:820px){
.boardgrid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
/* 閱讀權限密碼頁 */
.read-lock{max-width:420px;margin:32px auto;padding:24px;border:1px solid #6e5730;border-radius:6px;background:#17191a;text-align:center}
.read-lock-icon{display:block;font-size:34px;line-height:1.2}
.read-lock h3{margin:8px 0 4px;color:#ffe3a3;font-size:20px}
.read-lock p{margin:0 0 16px;color:#cfc4ad;font-size:15px}
.read-lock-row{display:flex;gap:8px}
.read-lock input{flex:1;min-width:0;height:44px;padding:0 12px;border:1px solid #6e5730;border-radius:4px;background:#0c0e0f;color:#f0e9db;font:inherit;font-size:16px}
.read-lock button{flex:0 0 auto;height:44px;padding:0 20px;border:1px solid #d3aa5e;border-radius:4px;background:#5c4522;color:#ffe9b8;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.read-lock button:disabled{opacity:.6;cursor:wait}
.read-lock-msg{min-height:22px;margin:10px 0 0!important;color:#ff8a82!important}