/* Shinsekai responsive layer: intentional mobile-first overrides. */
@media (max-width: 760px){
  .topbar{height:52px;padding:0 12px;gap:10px}
  .brandLogo{width:36px;height:36px}.brand h1{font-size:17px}
  .mainNav{gap:0}.navBtn{padding:7px 8px;font-size:11px}.discordNavBtn span{display:none}.discordNavBtn{padding-inline:8px}
  .topbarActions .roleBadge{display:none}
  #homeView{padding-top:10px}
  .homeHero{height:178px;width:calc(100% - 20px);border-radius:14px}
  .heroCopy{padding:18px 18px}.heroCopy h2{font-size:31px}.heroCopy p{max-width:250px;margin:7px 0;font-size:10px}
  .heroArt{left:28%}.heroCopy{max-width:62%}.artDots{bottom:10px;right:12px}
  .libraryHead,.chapterGrid,.sectionIntro,.bonusTools,.bonusGrid,.dashboardView,.lastReadBanner{width:calc(100% - 20px)}
  .libraryHead{align-items:flex-start;flex-direction:column;gap:9px;margin-top:18px}
  .libraryTools{width:100%}.searchBox{flex:1;min-width:0}
  .chapterGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cardPreview{height:125px}.cardBody{padding:10px}.cardNumber{font-size:27px}
}
@media (max-width:420px){
  .navBtn{font-size:10px;padding-inline:6px}.brand h1{font-size:16px}
  .homeHero{height:164px}.heroCopy h2{font-size:27px}.heroCopy p{display:none}.heroStats{margin-top:6px}
  .chapterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.cardPreview{height:112px}
}

@media (max-width: 720px){
  .bottomNav:has(#bnAddBtn:not(.hidden)){grid-template-columns:repeat(5,minmax(0,1fr));}
  .bottomNavBtn{min-width:0;padding-inline:4px;font-size:.62rem;}
}

@media (max-width: 760px){
  .bottomNav{grid-template-columns:repeat(5,minmax(0,1fr));}
  .bottomNav:has(#bnAddBtn:not(.hidden)){grid-template-columns:repeat(6,minmax(0,1fr));}
}


/* V66.1 — mobile header: the desktop navigation is replaced by the bottom nav.
   Keep only compact account/team actions in the top bar so nothing overflows. */
@media(max-width:760px){
  .topbar{height:50px;min-height:50px;padding:0 9px;gap:7px;overflow:hidden}
  .brand{gap:6px;padding:2px 4px;flex:0 0 auto}
  .brandLogo{width:32px;height:32px}.brand h1{font-size:14px;letter-spacing:0}
  .mainNav{display:none}
  .topbarActions{margin-left:auto;gap:4px;min-width:0;display:flex;flex:0 0 auto}
  .topbarActions .roleBadge{display:none}
  .topbarActions .ghost,.topbarActions .primary{min-height:30px;height:30px;padding:5px 7px;border-radius:7px;font-size:8px;line-height:1;white-space:nowrap}
  #teamBtn,#dashboardBtn,#logoutBtn{display:inline-flex;align-items:center;justify-content:center}
  #newChapterBtn{display:none!important}
}
@media(max-width:420px){
  .topbar{height:48px;min-height:48px;padding:0 7px}
  .brandLogo{width:29px;height:29px}.brand h1{font-size:13px}
  .topbarActions{gap:3px}
  .topbarActions .ghost{padding:5px 6px;font-size:7px}
  #teamBtn{max-width:48px;overflow:hidden;text-overflow:ellipsis}
  #dashboardBtn{max-width:40px;overflow:hidden;text-overflow:ellipsis}
  #logoutBtn{font-size:0;width:30px;padding:5px}
  #logoutBtn::before{content:'↪';font-size:15px;line-height:1}
}

@media (max-width: 760px){
  .heroCopy{min-width:0;overflow:hidden}
  .heroCopy h2{max-width:100%;overflow-wrap:anywhere}
  .heroStats{min-width:0;max-width:100%;flex-wrap:wrap}
}

@media (max-width:700px){.storageCleanupHead{flex-direction:column}.storageCleanupStats{grid-template-columns:1fr}.storageCleanupHead .ghost{width:100%}}